From eb811204eb8ae2e81270ce6c09b14b9808737efa Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Wed, 15 Jan 2025 17:02:38 -0500 Subject: [PATCH 001/103] feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror --- .changeset/honest-bulldogs-flow.md | 5 + .changeset/itchy-brooms-behave.md | 87 ++++++++++++++ .changeset/six-otters-argue.md | 112 ++++++++++++++++++ .changeset/stupid-rice-compare.md | 5 + components/badge/stories/badge.stories.js | 4 +- components/badge/stories/badge.test.js | 2 +- components/coachindicator/dist/metadata.json | 4 - components/coachindicator/index.css | 14 +-- .../typography/stories/typography.stories.js | 20 ++-- yarn.lock | 14 ++- 10 files changed, 236 insertions(+), 31 deletions(-) create mode 100644 .changeset/honest-bulldogs-flow.md create mode 100644 .changeset/itchy-brooms-behave.md create mode 100644 .changeset/six-otters-argue.md create mode 100644 .changeset/stupid-rice-compare.md diff --git a/.changeset/honest-bulldogs-flow.md b/.changeset/honest-bulldogs-flow.md new file mode 100644 index 00000000000..d0fcfb65966 --- /dev/null +++ b/.changeset/honest-bulldogs-flow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/preview": minor +--- + +Update Storybook to leverage the new CSS bundled assets. diff --git a/.changeset/itchy-brooms-behave.md b/.changeset/itchy-brooms-behave.md new file mode 100644 index 00000000000..b1ec4cdbf87 --- /dev/null +++ b/.changeset/itchy-brooms-behave.md @@ -0,0 +1,87 @@ +--- +"@spectrum-css/tokens": major +--- + +## Breaking change + +🎉 Welcome Spectrum 2! This update brings in a set of new tokens to bring existing components closer to the new Spectrum 2 look-and-feel. As part of the update, the token library is no longer shipping Express theme values or any Spectrum 1 custom overrides. Any manual token overrides needed are now sourced from a folder named `custom` inside the tokens package and the file name matches the context in which those overrides apply (i.e., `dark-vars.css` for dark-context, and `global-vars.css` for static values). These values will be concatenated to the `dist/css` output file with a matching name. + +The `darkest` and `lightest` themes are deprecated and no longer shipped with this release. + +### Corner rounding + +| Property name | Old value | Updated value | +| ------------------------------- | ------------------- | ------------- | +| `--spectrum-corner-radius-0` | **new** | 0px | +| `--spectrum-corner-radius-75` | 2px | 4px | +| `--spectrum-corner-radius-100` | 4px / 5px (mobile) | 8px | +| `--spectrum-corner-radius-200` | 8px / 10px (mobile) | 10px | +| `--spectrum-corner-radius-300` | **new** | 6px | +| `--spectrum-corner-radius-400` | **new** | 7px | +| `--spectrum-corner-radius-500` | **new** | 8px | +| `--spectrum-corner-radius-600` | **new** | 9px | +| `--spectrum-corner-radius-700` | **new** | 10px | +| `--spectrum-corner-radius-800` | **new** | 16px | +| `--spectrum-corner-radius-1000` | **new** | 0.5 | + +#### New aliases + +| Property name | Maps to | +| -------------------------------------------------- | ------------------------------- | +| `--spectrum-corner-radius-none` | `--spectrum-corner-radius-0` | +| `--spectrum-corner-radius-small-default` | `--spectrum-corner-radius-100` | +| `--spectrum-corner-radius-medium-default` | `--spectrum-corner-radius-500` | +| `--spectrum-corner-radius-large-default` | `--spectrum-corner-radius-700` | +| `--spectrum-corner-radius-extra-large-default` | `--spectrum-corner-radius-800` | +| `--spectrum-corner-radius-full` | `--spectrum-corner-radius-1000` | +| `--spectrum-corner-radius-small-size-small` | `--spectrum-corner-radius-75` | +| `--spectrum-corner-radius-small-size-medium` | `--spectrum-corner-radius-100` | +| `--spectrum-corner-radius-small-size-large` | `--spectrum-corner-radius-200` | +| `--spectrum-corner-radius-small-size-extra-large` | `--spectrum-corner-radius-300` | +| `--spectrum-corner-radius-medium-size-extra-small` | `--spectrum-corner-radius-300` | +| `--spectrum-corner-radius-medium-size-small` | `--spectrum-corner-radius-400` | +| `--spectrum-corner-radius-medium-size-medium` | `--spectrum-corner-radius-500` | +| `--spectrum-corner-radius-medium-size-large` | `--spectrum-corner-radius-600` | +| `--spectrum-corner-radius-medium-size-extra-large` | `--spectrum-corner-radius-700` | + +#### Component-specific updates + +| Property name | Old value | Updated value | +| ----------------------------------------- | ----------------------------------- | ------------------------------------------------- | +| `--spectrum-color-area-border-rounding` | `var(--spectrum-corner-radius-100)` | `var(--spectrum-corner-radius-medium-size-small)` | +| `--spectrum-color-slider-border-rounding` | `4px` | `var(--spectrum-corner-radius-medium-size-small)` | + +### Color updates + +| Property name | Context | Old value | Updated value | +| --------------------------- | ------- | ------------------ | ------------------ | +| `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) | +| `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) | +| `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) | +| `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) | +| `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) | +| `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) | +| `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) | +| `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) | +| `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) | +| `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) | +| `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) | +| `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) | +| `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) | +| `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) | +| `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) | +| `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) | +| `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) | +| `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) | + +## New tokens + +| Property name | Context | Value | +| ------------- | ------- | ----- | +| | | | + +## Removed tokens + +| Property name | Context | Value | +| ------------- | ------- | ----- | +| | | | diff --git a/.changeset/six-otters-argue.md b/.changeset/six-otters-argue.md new file mode 100644 index 00000000000..f812b6a1bc6 --- /dev/null +++ b/.changeset/six-otters-argue.md @@ -0,0 +1,112 @@ +--- +"@spectrum-css/floatingactionbutton": major +"@spectrum-css/opacitycheckerboard": major +"@spectrum-css/illustratedmessage": major +"@spectrum-css/coachindicator": major +"@spectrum-css/contextualhelp": major +"@spectrum-css/progresscircle": major +"@spectrum-css/dropindicator": major +"@spectrum-css/infieldbutton": major +"@spectrum-css/actionbutton": major +"@spectrum-css/pickerbutton": major +"@spectrum-css/actiongroup": major +"@spectrum-css/alertbanner": major +"@spectrum-css/alertdialog": major +"@spectrum-css/buttongroup": major +"@spectrum-css/clearbutton": major +"@spectrum-css/closebutton": major +"@spectrum-css/colorhandle": major +"@spectrum-css/colorslider": major +"@spectrum-css/inlinealert": major +"@spectrum-css/logicbutton": major +"@spectrum-css/progressbar": major +"@spectrum-css/statuslight": major +"@spectrum-css/swatchgroup": major +"@spectrum-css/actionmenu": major +"@spectrum-css/breadcrumb": major +"@spectrum-css/colorloupe": major +"@spectrum-css/colorwheel": major +"@spectrum-css/datepicker": major +"@spectrum-css/fieldgroup": major +"@spectrum-css/fieldlabel": major +"@spectrum-css/pagination": major +"@spectrum-css/typography": major +"@spectrum-css/accordion": major +"@spectrum-css/actionbar": major +"@spectrum-css/assetcard": major +"@spectrum-css/assetlist": major +"@spectrum-css/coachmark": major +"@spectrum-css/colorarea": major +"@spectrum-css/splitview": major +"@spectrum-css/textfield": major +"@spectrum-css/thumbnail": major +"@spectrum-css/calendar": major +"@spectrum-css/checkbox": major +"@spectrum-css/combobox": major +"@spectrum-css/dropzone": major +"@spectrum-css/helptext": major +"@spectrum-css/steplist": major +"@spectrum-css/taggroup": major +"@spectrum-css/treeview": major +"@spectrum-css/underlay": major +"@spectrum-css/commons": major +"@spectrum-css/divider": major +"@spectrum-css/popover": major +"@spectrum-css/sidenav": major +"@spectrum-css/stepper": major +"@spectrum-css/tooltip": major +"@spectrum-css/avatar": major +"@spectrum-css/button": major +"@spectrum-css/dialog": major +"@spectrum-css/miller": major +"@spectrum-css/picker": major +"@spectrum-css/rating": major +"@spectrum-css/search": major +"@spectrum-css/slider": major +"@spectrum-css/swatch": major +"@spectrum-css/switch": major +"@spectrum-css/asset": major +"@spectrum-css/badge": major +"@spectrum-css/meter": major +"@spectrum-css/modal": major +"@spectrum-css/radio": major +"@spectrum-css/table": major +"@spectrum-css/toast": major +"@spectrum-css/card": major +"@spectrum-css/dial": major +"@spectrum-css/form": major +"@spectrum-css/icon": major +"@spectrum-css/link": major +"@spectrum-css/menu": major +"@spectrum-css/tabs": major +"@spectrum-css/tray": major +"@spectrum-css/well": major +"@spectrum-css/tag": major +--- + +## Breaking change + +Welcome Spectrum 2! This update introduces the Spectrum 2 design updates to all components while still maintaining support for Spectrum 1 and Express styles through the same `--system-*` theming layer used previously. + +Though components in this update are not completely migrated to the new Spectrum 2 designs, this update introduces color palette updates, corner rounding changes, and a few remappings of component-level values to improve accessibility. Additional information regarding the migration can be found in the [documentation](.storybook/guides/s2_migration.mdx) or in it's [published form](https://pr-2786--spectrum-css.netlify.app/?path=/docs/guides-migration-guide--docs) + +Expect all components to ship: + +- `index.css`: A Spectrum 2 flavored version of the component with update colors and corner roundings. Does not support alternate themes, only Spectrum 2. +- `metadata.json`: A list of all selectors and available or used custom properties. + +For components that require additional component-level mappings for theming, the following files will also be included: + +- `index-base.css`: All styles for the component minus the variables used for theme switching (those defined in the `themes/spectrum-two.css` file for example). +- `index-theme.css`: All variables leveraged in theme switching, attached to the root class and mapped to their abstracted `--system` prefixed connector. +- `themes/spectrum-two.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum`. +- `themes/spectrum.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum--legacy`. +- `themes/express.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum--express`. + +**Deprecated**: `index-vars.css` was deprecated and is no longer shipped in this release. Additionally, the `metadata/mods.md` asset has been removed in favor of the data being shipped in `metadata.json`. + +### New components + +Welcome `@spectrum-css/form`! Form styles extracted out of the `@spectrum-css/fieldlabel` component. + +Welcome `@spectrum-css/meter`! Meter styles extracted out of the `@spectrum-css/progressbar` component. diff --git a/.changeset/stupid-rice-compare.md b/.changeset/stupid-rice-compare.md new file mode 100644 index 00000000000..9d6cac2ec0f --- /dev/null +++ b/.changeset/stupid-rice-compare.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/bundle": major +--- + +Resurrecting the CSS bundle for development use. Excellent resource for generating quick demo pages by loading all the CSS components in the library in a pre-bundled package with tokens pre-loaded and minified to remove unused tokens. diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index fb9961227a2..4de26b9b9fa 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -40,7 +40,7 @@ export default { type: { summary: "string" }, category: "Component", }, - options: ["neutral", "accent", "informative", "positive", "negative", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice", "gray", "red", "orange", "yellow", "chartreuse", "celery", "green", "seafoam", "cyan", "blue", "indigo", "purple", "fuchsia", "magenta"], control: "select", }, fixed: { @@ -84,7 +84,7 @@ Default.args = { export const SemanticVariants = (args, context) => ArgGrid({ Template, argKey: "variant", - options: ["neutral", "accent", "informative", "positive", "negative"], + options: ["neutral", "accent", "informative", "positive", "negative", "notice"], withBorder: false, ...args, }, context); diff --git a/components/badge/stories/badge.test.js b/components/badge/stories/badge.test.js index d1068ec340a..b226b07b700 100644 --- a/components/badge/stories/badge.test.js +++ b/components/badge/stories/badge.test.js @@ -17,7 +17,7 @@ export const BadgeGroup = Variants({ Template: Badges, sizeDirection: "row", testData: [ - ...["neutral", "accent", "informative", "positive", "negative"].map((variant) => + ...["neutral", "accent", "informative", "positive", "negative", "notice"].map((variant) => ({ testHeading: capitalize(variant), wrapperStyles: { diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed1..3582f27f459 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -6,8 +6,6 @@ ".spectrum-CoachIndicator-ring:first-child", ".spectrum-CoachIndicator-ring:nth-child(2)", ".spectrum-CoachIndicator-ring:nth-child(3)", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--dark", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", @@ -31,11 +29,9 @@ "--mod-coach-indicator-quiet-ring-diameter", "--mod-coach-indicator-ring-block-size", "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-dark-color", "--mod-coach-indicator-ring-default-color", "--mod-coach-indicator-ring-diameter", "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-ring-light-color", "--mod-coach-indicator-top" ], "component": [ diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 8cc7bdb8eda..88817f5c1c7 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -32,19 +32,7 @@ --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); } - - /* @deprecated .spectrum-CoachIndicator--light */ - &.spectrum-CoachIndicator--light { - /* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white)); - } - - /* @deprecated .spectrum-CoachIndicator--dark */ - &.spectrum-CoachIndicator--dark { - /* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black)); - } - + &.spectrum-CoachIndicator--staticWhite { --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); } diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index 044a76bc5b6..2eb198a216a 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -4,16 +4,16 @@ import { size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { - DocsBodyVariants, - DocsCodeVariants, - DocsDetailVariants, - DocsHeadingBodyPairing, - DocsHeadingVariants, - DocsInternationalizedBodyVariants, - DocsInternationalizedCodeVariants, - DocsInternationalizedDetailVariants, - DocsInternationalizedHeadingBodyPairing, - DocsInternationalizedHeadingVariants, Template + DocsBodyVariants, + DocsCodeVariants, + DocsDetailVariants, + DocsHeadingBodyPairing, + DocsHeadingVariants, + DocsInternationalizedBodyVariants, + DocsInternationalizedCodeVariants, + DocsInternationalizedDetailVariants, + DocsInternationalizedHeadingBodyPairing, + DocsInternationalizedHeadingVariants, Template } from "./template.js"; import { TypographyGroup } from "./typography.test.js"; diff --git a/yarn.lock b/yarn.lock index 2f89b7d9d9d..e129630b654 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9290,7 +9290,19 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:~4.4.0": +"debug@npm:^4.0.0, debug@npm:^4.3.7": + version: 4.3.7 + resolution: "debug@npm:4.3.7" + dependencies: + ms: "npm:^2.1.3" + peerDependenciesMeta: + supports-color: + optional: true + checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b + languageName: node + linkType: hard + +"debug@npm:^4.1.1, debug@npm:~4.4.0": version: 4.4.0 resolution: "debug@npm:4.4.0" dependencies: From a1fe6208d52f4cad23a8766d3ce2f6998017c95f Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Wed, 15 Jan 2025 17:02:38 -0500 Subject: [PATCH 002/103] feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror --- components/accordion/stories/template.js | 3 --- components/actionbar/stories/template.js | 5 +---- components/actionbutton/stories/template.js | 3 --- components/actiongroup/stories/template.js | 3 --- components/alertbanner/stories/template.js | 3 --- components/asset/stories/template.js | 3 --- components/assetcard/stories/template.js | 3 --- components/assetlist/stories/template.js | 7 ++----- components/button/stories/template.js | 3 --- components/calendar/stories/template.js | 3 --- components/card/stories/template.js | 3 --- components/checkbox/stories/template.js | 3 --- components/clearbutton/stories/template.js | 3 --- components/closebutton/stories/template.js | 3 --- components/colorwheel/stories/template.js | 3 --- components/combobox/stories/template.js | 3 --- components/datepicker/stories/template.js | 3 --- components/dial/stories/template.js | 3 --- components/divider/stories/template.js | 3 --- components/dropzone/stories/template.js | 3 --- components/infieldbutton/stories/template.js | 3 --- components/logicbutton/stories/template.js | 3 --- components/menu/stories/template.js | 3 --- components/modal/stories/template.js | 3 --- components/page/stories/template.js | 3 --- components/page/themes/express.css | 16 ---------------- components/picker/stories/template.js | 3 --- components/pickerbutton/stories/template.js | 3 --- components/popover/stories/template.js | 3 --- components/progressbar/stories/template.js | 3 --- components/progresscircle/stories/template.js | 5 +---- components/radio/stories/template.js | 3 --- components/rating/stories/template.js | 3 --- components/search/stories/template.js | 3 --- components/sidenav/stories/template.js | 3 --- components/slider/stories/template.js | 3 --- components/splitview/stories/template.js | 3 --- components/steplist/stories/template.js | 3 --- components/stepper/stories/template.js | 3 --- components/swatch/stories/template.js | 3 --- components/switch/stories/template.js | 3 --- components/table/stories/template.js | 3 --- components/tabs/stories/template.js | 3 --- components/tag/stories/template.js | 3 --- components/textfield/stories/template.js | 3 --- components/thumbnail/dist/metadata.json | 2 +- components/thumbnail/index.css | 3 +-- components/thumbnail/stories/template.js | 3 --- components/toast/stories/template.js | 3 --- components/tooltip/stories/template.js | 3 --- components/treeview/stories/template.js | 3 --- components/well/stories/template.js | 3 --- 52 files changed, 6 insertions(+), 170 deletions(-) delete mode 100644 components/page/themes/express.css diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 8294f3a4027..79fc3648bf3 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AccordionItem = ({ heading, diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd2..6809e55225e 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,16 +1,13 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115c..9c1fd980055 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @todo load order should not influence the icon size but it is; fix this diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64aa..25d8f25f4e0 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c0612..b564deeed0d 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index c32f792cd49..795c346c508 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b7..1b44be4e568 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -8,9 +8,6 @@ import { when } from "lit/directives/when.js"; import { camelCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80c..f5c6d9731af 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", @@ -45,10 +42,10 @@ export const AssetListItem = ({ customClasses: [`${rootClass}Selector`], }, context) )} - ${when(image, () => + ${when(image, () => html`asset image thumbnail` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 16e259bd86f..cecada6f7a9 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Button", diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 19c70fe9395..863f5e8d113 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -8,9 +8,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Calendar", diff --git a/components/card/stories/template.js b/components/card/stories/template.js index d1d226c7b0e..09eb0360803 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Card", diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index 9c778259f7d..920b1f98b56 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Checkbox", diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 58e90007c04..a4ce921c7aa 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ClearButton", diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f62..4e730b8529c 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 851150ffd37..1d02f5e7823 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -5,9 +5,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ColorWheel", diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index fe68d45cba9..96dfdcf25ee 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; const Combobox = ({ rootClass = "spectrum-Combobox", diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..eebb928df80 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -9,9 +9,6 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js index c8f25c2175b..547fb97f661 100644 --- a/components/dial/stories/template.js +++ b/components/dial/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Dial", diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index ac2ffa2a4c1..cd3d9bc1a64 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -4,9 +4,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Divider", diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface7..3363790eccc 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-DropZone", diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 7f0b4ee8db1..5cc77d42045 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -4,9 +4,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ( { diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js index 5b0730616ef..02f5b3aa028 100644 --- a/components/logicbutton/stories/template.js +++ b/components/logicbutton/stories/template.js @@ -2,9 +2,6 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-LogicButton", diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb696..79c4136fdad 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -13,9 +13,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Get the tray submenu back arrow name with scale number (defined in design spec). diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js index 07a52b89131..9abbf49ebea 100644 --- a/components/modal/stories/template.js +++ b/components/modal/stories/template.js @@ -5,9 +5,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Just the modal markup. diff --git a/components/page/stories/template.js b/components/page/stories/template.js index 570ca98b244..395f6d48390 100644 --- a/components/page/stories/template.js +++ b/components/page/stories/template.js @@ -2,9 +2,6 @@ import { renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ content = [] } = {}, context = {}) => { return html`${renderContent(content, { context })}`; diff --git a/components/page/themes/express.css b/components/page/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/page/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 5bce15f0744..4be33a2092f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Template for Picker only (no popover or help text). diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 3df4f85b636..6adcb7398fd 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-PickerButton", diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index 6d7e55375e2..b76c6fe5dbf 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Popover", diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index c358879721c..30c9cfeb827 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ProgressBar", diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js index 2e27221f91a..8fbb22aa461 100644 --- a/components/progresscircle/stories/template.js +++ b/components/progresscircle/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ id = getRandomId("progress-circle"), @@ -59,4 +56,4 @@ export const Template = ({ `; -}; \ No newline at end of file +}; diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index 68c3cbf0e96..50ba8484b2f 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Radio", diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 47ea5c5f61a..245694af8fa 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Rating", diff --git a/components/search/stories/template.js b/components/search/stories/template.js index 364c8d8fde6..09570d33581 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -7,9 +7,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Search", diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js index 3aa9960e809..d3a832ab03a 100644 --- a/components/sidenav/stories/template.js +++ b/components/sidenav/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SideNav", diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index becef6ade92..bc625452855 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Slider", diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js index 4fb08b911dd..aacdd00a3e7 100644 --- a/components/splitview/stories/template.js +++ b/components/splitview/stories/template.js @@ -3,9 +3,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SplitView", diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js index ea9a57ef420..7edfdf8199b 100644 --- a/components/steplist/stories/template.js +++ b/components/steplist/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const SteplistItem = ({ rootClass = "spectrum-Steplist-item", diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fbb818b72f3..fb14155af87 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Stepper", diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index 2556fc3da75..836dd20d36f 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Swatch", diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 5e67a3cc8b3..4f0877d5c86 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Switch", diff --git a/components/table/stories/template.js b/components/table/stories/template.js index 662a6e3206b..8487cca716d 100644 --- a/components/table/stories/template.js +++ b/components/table/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TableRowItem = ({ rootClass = "spectrum-Table", diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js index 716f45ea2e5..387683f1ae9 100644 --- a/components/tabs/stories/template.js +++ b/components/tabs/stories/template.js @@ -10,9 +10,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tabs", diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 90c72435bae..ee4b244dd43 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tag", diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 5f20b0abb86..55c2d55d124 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @typedef API diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 067259ff6a1..29275bd67f3 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -88,7 +88,7 @@ "--spectrum-gray-800-rgb", "--spectrum-white" ], - "system-theme": ["--system-thumbnail-border-radius"], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 62e44665518..7cf6a00e27e 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Thumbnail, .spectrum-Thumbnail--size500 { --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); @@ -63,6 +61,7 @@ } .spectrum-Thumbnail { + --spectrum-thumbnail-border-radius: 2px; --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size)); /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index aa476ea722b..2b40d8e1015 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Thumbnail", diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index 89d459dbf0a..6bf43215408 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Toast", diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 5c5c260f4d6..4098beb8b73 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tooltip", diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js index df31e3ed464..6c15ccdacd7 100644 --- a/components/treeview/stories/template.js +++ b/components/treeview/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TreeViewItem = ({ rootClass = "spectrum-TreeView", diff --git a/components/well/stories/template.js b/components/well/stories/template.js index c9645cfdcdb..5e8210305d1 100644 --- a/components/well/stories/template.js +++ b/components/well/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Well", From cd9f2ae7ccf40d17305eba261c44709e9b704900 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Mon, 18 Nov 2024 11:15:52 -0500 Subject: [PATCH 003/103] feat: migration of tokens to spectrum 2 Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe Co-authored-by: Patrick Fulton Co-authored-by: Cory Dransfeldt Co-authored-by: Aziz Ramos Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding Co-authored-by: Marissa Huysentruyt Co-authored-by: Rajdeep Chandra Co-authored-by: TarunAdobe Co-authored-by: Dragan Eror --- .changeset/pre.json | 104 ++++++++++++++++++++++++++++++++++++ .storybook/assets/index.css | 7 +++ yarn.lock | 29 ++++++++-- 3 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 .changeset/pre.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..25e99ff76c5 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,104 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@spectrum-tools/gh-action-file-diff": "2.1.0", + "@spectrum-css/preview": "11.0.0", + "@spectrum-css/accordion": "5.3.0", + "@spectrum-css/actionbar": "8.2.0", + "@spectrum-css/actionbutton": "6.2.0", + "@spectrum-css/actiongroup": "5.2.0", + "@spectrum-css/actionmenu": "6.2.0", + "@spectrum-css/alertbanner": "2.3.0", + "@spectrum-css/alertdialog": "2.2.0", + "@spectrum-css/asset": "5.2.0", + "@spectrum-css/assetcard": "4.2.0", + "@spectrum-css/assetlist": "6.4.0", + "@spectrum-css/avatar": "7.3.0", + "@spectrum-css/badge": "4.3.0", + "@spectrum-css/breadcrumb": "9.2.0", + "@spectrum-css/button": "13.5.0", + "@spectrum-css/buttongroup": "7.2.0", + "@spectrum-css/calendar": "5.3.0", + "@spectrum-css/card": "9.3.0", + "@spectrum-css/checkbox": "9.2.1", + "@spectrum-css/clearbutton": "6.4.0", + "@spectrum-css/closebutton": "5.3.0", + "@spectrum-css/coachindicator": "2.2.0", + "@spectrum-css/coachmark": "7.3.0", + "@spectrum-css/colorarea": "5.2.0", + "@spectrum-css/colorhandle": "8.2.0", + "@spectrum-css/colorloupe": "5.3.0", + "@spectrum-css/colorslider": "6.2.0", + "@spectrum-css/colorwheel": "4.2.0", + "@spectrum-css/combobox": "3.3.0", + "@spectrum-css/commons": "10.1.0", + "@spectrum-css/contextualhelp": "3.3.0", + "@spectrum-css/datepicker": "3.3.0", + "@spectrum-css/dial": "3.2.0", + "@spectrum-css/dialog": "10.2.0", + "@spectrum-css/divider": "3.2.0", + "@spectrum-css/dropindicator": "5.2.0", + "@spectrum-css/dropzone": "6.2.0", + "@spectrum-css/fieldgroup": "5.3.0", + "@spectrum-css/fieldlabel": "8.2.0", + "@spectrum-css/floatingactionbutton": "2.2.0", + "@spectrum-css/form": "0.0.0", + "@spectrum-css/helptext": "5.2.0", + "@spectrum-css/icon": "7.2.0", + "@spectrum-css/illustratedmessage": "7.2.0", + "@spectrum-css/infieldbutton": "5.2.0", + "@spectrum-css/inlinealert": "8.2.0", + "@spectrum-css/link": "5.2.0", + "@spectrum-css/logicbutton": "4.2.0", + "@spectrum-css/menu": "7.2.0", + "@spectrum-css/meter": "0.0.0", + "@spectrum-css/miller": "6.2.0", + "@spectrum-css/modal": "5.2.0", + "@spectrum-css/opacitycheckerboard": "2.2.0", + "@spectrum-css/page": "8.2.0", + "@spectrum-css/pagination": "8.2.0", + "@spectrum-css/picker": "8.3.0", + "@spectrum-css/pickerbutton": "5.2.0", + "@spectrum-css/popover": "7.2.0", + "@spectrum-css/progressbar": "4.2.0", + "@spectrum-css/progresscircle": "3.2.0", + "@spectrum-css/radio": "9.4.1", + "@spectrum-css/rating": "5.2.0", + "@spectrum-css/search": "7.4.0", + "@spectrum-css/sidenav": "5.2.0", + "@spectrum-css/slider": "5.5.1", + "@spectrum-css/splitview": "5.3.0", + "@spectrum-css/statuslight": "7.3.0", + "@spectrum-css/steplist": "5.2.0", + "@spectrum-css/stepper": "6.3.0", + "@spectrum-css/swatch": "6.4.1", + "@spectrum-css/swatchgroup": "3.2.0", + "@spectrum-css/switch": "5.2.0", + "@spectrum-css/table": "6.2.0", + "@spectrum-css/tabs": "5.2.0", + "@spectrum-css/tag": "9.2.0", + "@spectrum-css/taggroup": "5.2.0", + "@spectrum-css/textfield": "7.3.0", + "@spectrum-css/thumbnail": "6.3.0", + "@spectrum-css/toast": "10.3.0", + "@spectrum-css/tooltip": "6.2.0", + "@spectrum-css/tray": "3.2.0", + "@spectrum-css/treeview": "10.4.0", + "@spectrum-css/typography": "6.2.0", + "@spectrum-css/underlay": "4.2.0", + "@spectrum-css/well": "5.3.0", + "@spectrum-tools/postcss-add-theming-layer": "0.0.0", + "@spectrum-tools/postcss-property-rollup": "0.0.0", + "@spectrum-tools/postcss-rgb-mapping": "2.1.0", + "@spectrum-tools/stylelint-no-missing-var": "2.0.1", + "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.1", + "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.2", + "@spectrum-tools/theme-alignment": "1.1.0", + "@spectrum-css/tokens": "15.0.0", + "@spectrum-css/bundle": "1.0.0", + "@spectrum-css/generator": "4.1.0", + "@spectrum-css/ui-icons": "1.1.2" + }, + "changesets": [] +} diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css index 95b4d83897d..b18c09d34ce 100644 --- a/.storybook/assets/index.css +++ b/.storybook/assets/index.css @@ -119,4 +119,11 @@ select:focus, border-color: rgb(2, 101, 220) !important; box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important; } + +nav.sidebar-container, +div.sb-bar { + color: var(--spectrum-neutral-content-color-default) !important; + background-color: var(--spectrum-background-layer-2-color) !important; +} + /* stylelint-enable selector-class-pattern */ diff --git a/yarn.lock b/yarn.lock index e129630b654..b9528abce4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7969,10 +7969,31 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001690 - resolution: "caniuse-lite@npm:1.0.30001690" - checksum: 10c0/646bd469032afa90400a84dec30a2b00a6eda62c03ead358117e3f884cda8aacec02ec058a6dbee5eaf9714f83e483b9b0eb4fb42febb8076569f5ca40f1d347 +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": + version: 1.0.30001643 + resolution: "caniuse-lite@npm:1.0.30001643" + checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001629": + version: 1.0.30001636 + resolution: "caniuse-lite@npm:1.0.30001636" + checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001660 + resolution: "caniuse-lite@npm:1.0.30001660" + checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001673 + resolution: "caniuse-lite@npm:1.0.30001673" + checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b languageName: node linkType: hard From bf49404d6133dc4cb5712c3d65e711bacc6ccda6 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Nov 2024 11:20:58 -0500 Subject: [PATCH 004/103] feat: bug fixes for reducing theming variables --- components/coachmark/stories/coachmark.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index e13b70fce24..975039f95b3 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -69,6 +69,7 @@ export default { }; export const Default = CoachMarkGroup.bind({}); +Default.title = "Standard"; Default.tags = ["!autodocs"]; Default.args = {}; From ee89fbe45d2cafff29e7405c36a7c185ae1e8353 Mon Sep 17 00:00:00 2001 From: Patrick Fulton <360251+pfulton@users.noreply.github.com> Date: Fri, 22 Nov 2024 10:33:06 -0500 Subject: [PATCH 005/103] feat: s2 foundations non-gray-800 colors update (#3413) * feat: s2 foundations non-gray-800 colors update * add changeset --- .changeset/weak-kings-pretend.md | 108 +++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 .changeset/weak-kings-pretend.md diff --git a/.changeset/weak-kings-pretend.md b/.changeset/weak-kings-pretend.md new file mode 100644 index 00000000000..5f347b589db --- /dev/null +++ b/.changeset/weak-kings-pretend.md @@ -0,0 +1,108 @@ +--- +"@spectrum-css/tokens": minor +"@spectrum-css/floatingactionbutton": major +"@spectrum-css/opacitycheckerboard": major +"@spectrum-css/illustratedmessage": major +"@spectrum-css/coachindicator": major +"@spectrum-css/contextualhelp": major +"@spectrum-css/progresscircle": major +"@spectrum-css/dropindicator": major +"@spectrum-css/infieldbutton": major +"@spectrum-css/actionbutton": major +"@spectrum-css/pickerbutton": major +"@spectrum-css/actiongroup": major +"@spectrum-css/alertbanner": major +"@spectrum-css/alertdialog": major +"@spectrum-css/buttongroup": major +"@spectrum-css/clearbutton": major +"@spectrum-css/closebutton": major +"@spectrum-css/colorhandle": major +"@spectrum-css/colorslider": major +"@spectrum-css/inlinealert": major +"@spectrum-css/logicbutton": major +"@spectrum-css/progressbar": major +"@spectrum-css/statuslight": major +"@spectrum-css/swatchgroup": major +"@spectrum-css/actionmenu": major +"@spectrum-css/breadcrumb": major +"@spectrum-css/colorloupe": major +"@spectrum-css/colorwheel": major +"@spectrum-css/datepicker": major +"@spectrum-css/fieldgroup": major +"@spectrum-css/fieldlabel": major +"@spectrum-css/pagination": major +"@spectrum-css/typography": major +"@spectrum-css/accordion": major +"@spectrum-css/actionbar": major +"@spectrum-css/assetcard": major +"@spectrum-css/assetlist": major +"@spectrum-css/coachmark": major +"@spectrum-css/colorarea": major +"@spectrum-css/splitview": major +"@spectrum-css/textfield": major +"@spectrum-css/thumbnail": major +"@spectrum-css/calendar": major +"@spectrum-css/checkbox": major +"@spectrum-css/combobox": major +"@spectrum-css/dropzone": major +"@spectrum-css/helptext": major +"@spectrum-css/steplist": major +"@spectrum-css/taggroup": major +"@spectrum-css/treeview": major +"@spectrum-css/underlay": major +"@spectrum-css/divider": major +"@spectrum-css/popover": major +"@spectrum-css/sidenav": major +"@spectrum-css/stepper": major +"@spectrum-css/tooltip": major +"@spectrum-css/avatar": major +"@spectrum-css/button": major +"@spectrum-css/dialog": major +"@spectrum-css/miller": major +"@spectrum-css/picker": major +"@spectrum-css/rating": major +"@spectrum-css/search": major +"@spectrum-css/slider": major +"@spectrum-css/swatch": major +"@spectrum-css/switch": major +"@spectrum-css/asset": major +"@spectrum-css/badge": major +"@spectrum-css/modal": major +"@spectrum-css/radio": major +"@spectrum-css/table": major +"@spectrum-css/toast": major +"@spectrum-css/card": major +"@spectrum-css/dial": major +"@spectrum-css/icon": major +"@spectrum-css/link": major +"@spectrum-css/menu": major +"@spectrum-css/tabs": major +"@spectrum-css/tray": major +"@spectrum-css/well": major +"@spectrum-css/tag": major +"@spectrum-css/meter": major +"@spectrum-css/form": major +--- + +feat: s2 foundations non-gray-800 colors update + +| Property name | Context | Old value | Updated value | +| --------------------------- | ------- | ------------------ | ------------------ | +| `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) | +| `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) | +| `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) | +| `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) | +| `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) | +| `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) | +| `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) | +| `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) | +| `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) | +| `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) | +| `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) | +| `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) | +| `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) | +| `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) | +| `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) | +| `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) | +| `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) | +| `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) | From a03dfbbfd8a116d35faed236f6870f2df7367096 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:21:21 -0500 Subject: [PATCH 006/103] chore: release (s2-foundations) (#3421) Co-authored-by: github-actions[bot] --- .changeset/honest-bulldogs-flow.md | 5 -- .changeset/itchy-brooms-behave.md | 87 ---------------------- .changeset/pre.json | 4 +- .changeset/six-otters-argue.md | 112 ----------------------------- .changeset/stupid-rice-compare.md | 5 -- .github/workflows/lint.yml | 1 + 6 files changed, 4 insertions(+), 210 deletions(-) delete mode 100644 .changeset/honest-bulldogs-flow.md delete mode 100644 .changeset/itchy-brooms-behave.md delete mode 100644 .changeset/six-otters-argue.md delete mode 100644 .changeset/stupid-rice-compare.md diff --git a/.changeset/honest-bulldogs-flow.md b/.changeset/honest-bulldogs-flow.md deleted file mode 100644 index d0fcfb65966..00000000000 --- a/.changeset/honest-bulldogs-flow.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/preview": minor ---- - -Update Storybook to leverage the new CSS bundled assets. diff --git a/.changeset/itchy-brooms-behave.md b/.changeset/itchy-brooms-behave.md deleted file mode 100644 index b1ec4cdbf87..00000000000 --- a/.changeset/itchy-brooms-behave.md +++ /dev/null @@ -1,87 +0,0 @@ ---- -"@spectrum-css/tokens": major ---- - -## Breaking change - -🎉 Welcome Spectrum 2! This update brings in a set of new tokens to bring existing components closer to the new Spectrum 2 look-and-feel. As part of the update, the token library is no longer shipping Express theme values or any Spectrum 1 custom overrides. Any manual token overrides needed are now sourced from a folder named `custom` inside the tokens package and the file name matches the context in which those overrides apply (i.e., `dark-vars.css` for dark-context, and `global-vars.css` for static values). These values will be concatenated to the `dist/css` output file with a matching name. - -The `darkest` and `lightest` themes are deprecated and no longer shipped with this release. - -### Corner rounding - -| Property name | Old value | Updated value | -| ------------------------------- | ------------------- | ------------- | -| `--spectrum-corner-radius-0` | **new** | 0px | -| `--spectrum-corner-radius-75` | 2px | 4px | -| `--spectrum-corner-radius-100` | 4px / 5px (mobile) | 8px | -| `--spectrum-corner-radius-200` | 8px / 10px (mobile) | 10px | -| `--spectrum-corner-radius-300` | **new** | 6px | -| `--spectrum-corner-radius-400` | **new** | 7px | -| `--spectrum-corner-radius-500` | **new** | 8px | -| `--spectrum-corner-radius-600` | **new** | 9px | -| `--spectrum-corner-radius-700` | **new** | 10px | -| `--spectrum-corner-radius-800` | **new** | 16px | -| `--spectrum-corner-radius-1000` | **new** | 0.5 | - -#### New aliases - -| Property name | Maps to | -| -------------------------------------------------- | ------------------------------- | -| `--spectrum-corner-radius-none` | `--spectrum-corner-radius-0` | -| `--spectrum-corner-radius-small-default` | `--spectrum-corner-radius-100` | -| `--spectrum-corner-radius-medium-default` | `--spectrum-corner-radius-500` | -| `--spectrum-corner-radius-large-default` | `--spectrum-corner-radius-700` | -| `--spectrum-corner-radius-extra-large-default` | `--spectrum-corner-radius-800` | -| `--spectrum-corner-radius-full` | `--spectrum-corner-radius-1000` | -| `--spectrum-corner-radius-small-size-small` | `--spectrum-corner-radius-75` | -| `--spectrum-corner-radius-small-size-medium` | `--spectrum-corner-radius-100` | -| `--spectrum-corner-radius-small-size-large` | `--spectrum-corner-radius-200` | -| `--spectrum-corner-radius-small-size-extra-large` | `--spectrum-corner-radius-300` | -| `--spectrum-corner-radius-medium-size-extra-small` | `--spectrum-corner-radius-300` | -| `--spectrum-corner-radius-medium-size-small` | `--spectrum-corner-radius-400` | -| `--spectrum-corner-radius-medium-size-medium` | `--spectrum-corner-radius-500` | -| `--spectrum-corner-radius-medium-size-large` | `--spectrum-corner-radius-600` | -| `--spectrum-corner-radius-medium-size-extra-large` | `--spectrum-corner-radius-700` | - -#### Component-specific updates - -| Property name | Old value | Updated value | -| ----------------------------------------- | ----------------------------------- | ------------------------------------------------- | -| `--spectrum-color-area-border-rounding` | `var(--spectrum-corner-radius-100)` | `var(--spectrum-corner-radius-medium-size-small)` | -| `--spectrum-color-slider-border-rounding` | `4px` | `var(--spectrum-corner-radius-medium-size-small)` | - -### Color updates - -| Property name | Context | Old value | Updated value | -| --------------------------- | ------- | ------------------ | ------------------ | -| `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) | -| `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) | -| `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) | -| `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) | -| `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) | -| `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) | -| `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) | -| `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) | -| `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) | -| `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) | -| `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) | -| `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) | -| `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) | -| `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) | -| `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) | -| `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) | -| `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) | -| `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) | - -## New tokens - -| Property name | Context | Value | -| ------------- | ------- | ----- | -| | | | - -## Removed tokens - -| Property name | Context | Value | -| ------------- | ------- | ----- | -| | | | diff --git a/.changeset/pre.json b/.changeset/pre.json index 25e99ff76c5..914d4feb186 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -100,5 +100,7 @@ "@spectrum-css/generator": "4.1.0", "@spectrum-css/ui-icons": "1.1.2" }, - "changesets": [] + "changesets": [ + "weak-kings-pretend" + ] } diff --git a/.changeset/six-otters-argue.md b/.changeset/six-otters-argue.md deleted file mode 100644 index f812b6a1bc6..00000000000 --- a/.changeset/six-otters-argue.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -"@spectrum-css/floatingactionbutton": major -"@spectrum-css/opacitycheckerboard": major -"@spectrum-css/illustratedmessage": major -"@spectrum-css/coachindicator": major -"@spectrum-css/contextualhelp": major -"@spectrum-css/progresscircle": major -"@spectrum-css/dropindicator": major -"@spectrum-css/infieldbutton": major -"@spectrum-css/actionbutton": major -"@spectrum-css/pickerbutton": major -"@spectrum-css/actiongroup": major -"@spectrum-css/alertbanner": major -"@spectrum-css/alertdialog": major -"@spectrum-css/buttongroup": major -"@spectrum-css/clearbutton": major -"@spectrum-css/closebutton": major -"@spectrum-css/colorhandle": major -"@spectrum-css/colorslider": major -"@spectrum-css/inlinealert": major -"@spectrum-css/logicbutton": major -"@spectrum-css/progressbar": major -"@spectrum-css/statuslight": major -"@spectrum-css/swatchgroup": major -"@spectrum-css/actionmenu": major -"@spectrum-css/breadcrumb": major -"@spectrum-css/colorloupe": major -"@spectrum-css/colorwheel": major -"@spectrum-css/datepicker": major -"@spectrum-css/fieldgroup": major -"@spectrum-css/fieldlabel": major -"@spectrum-css/pagination": major -"@spectrum-css/typography": major -"@spectrum-css/accordion": major -"@spectrum-css/actionbar": major -"@spectrum-css/assetcard": major -"@spectrum-css/assetlist": major -"@spectrum-css/coachmark": major -"@spectrum-css/colorarea": major -"@spectrum-css/splitview": major -"@spectrum-css/textfield": major -"@spectrum-css/thumbnail": major -"@spectrum-css/calendar": major -"@spectrum-css/checkbox": major -"@spectrum-css/combobox": major -"@spectrum-css/dropzone": major -"@spectrum-css/helptext": major -"@spectrum-css/steplist": major -"@spectrum-css/taggroup": major -"@spectrum-css/treeview": major -"@spectrum-css/underlay": major -"@spectrum-css/commons": major -"@spectrum-css/divider": major -"@spectrum-css/popover": major -"@spectrum-css/sidenav": major -"@spectrum-css/stepper": major -"@spectrum-css/tooltip": major -"@spectrum-css/avatar": major -"@spectrum-css/button": major -"@spectrum-css/dialog": major -"@spectrum-css/miller": major -"@spectrum-css/picker": major -"@spectrum-css/rating": major -"@spectrum-css/search": major -"@spectrum-css/slider": major -"@spectrum-css/swatch": major -"@spectrum-css/switch": major -"@spectrum-css/asset": major -"@spectrum-css/badge": major -"@spectrum-css/meter": major -"@spectrum-css/modal": major -"@spectrum-css/radio": major -"@spectrum-css/table": major -"@spectrum-css/toast": major -"@spectrum-css/card": major -"@spectrum-css/dial": major -"@spectrum-css/form": major -"@spectrum-css/icon": major -"@spectrum-css/link": major -"@spectrum-css/menu": major -"@spectrum-css/tabs": major -"@spectrum-css/tray": major -"@spectrum-css/well": major -"@spectrum-css/tag": major ---- - -## Breaking change - -Welcome Spectrum 2! This update introduces the Spectrum 2 design updates to all components while still maintaining support for Spectrum 1 and Express styles through the same `--system-*` theming layer used previously. - -Though components in this update are not completely migrated to the new Spectrum 2 designs, this update introduces color palette updates, corner rounding changes, and a few remappings of component-level values to improve accessibility. Additional information regarding the migration can be found in the [documentation](.storybook/guides/s2_migration.mdx) or in it's [published form](https://pr-2786--spectrum-css.netlify.app/?path=/docs/guides-migration-guide--docs) - -Expect all components to ship: - -- `index.css`: A Spectrum 2 flavored version of the component with update colors and corner roundings. Does not support alternate themes, only Spectrum 2. -- `metadata.json`: A list of all selectors and available or used custom properties. - -For components that require additional component-level mappings for theming, the following files will also be included: - -- `index-base.css`: All styles for the component minus the variables used for theme switching (those defined in the `themes/spectrum-two.css` file for example). -- `index-theme.css`: All variables leveraged in theme switching, attached to the root class and mapped to their abstracted `--system` prefixed connector. -- `themes/spectrum-two.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum`. -- `themes/spectrum.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum--legacy`. -- `themes/express.css`: All `--system` prefixed connectors required for theme switching, attached to the root class `.spectrum--express`. - -**Deprecated**: `index-vars.css` was deprecated and is no longer shipped in this release. Additionally, the `metadata/mods.md` asset has been removed in favor of the data being shipped in `metadata.json`. - -### New components - -Welcome `@spectrum-css/form`! Form styles extracted out of the `@spectrum-css/fieldlabel` component. - -Welcome `@spectrum-css/meter`! Meter styles extracted out of the `@spectrum-css/progressbar` component. diff --git a/.changeset/stupid-rice-compare.md b/.changeset/stupid-rice-compare.md deleted file mode 100644 index 9d6cac2ec0f..00000000000 --- a/.changeset/stupid-rice-compare.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/bundle": major ---- - -Resurrecting the CSS bundle for development use. Excellent resource for generating quick demo pages by loading all the CSS components in the library in a pre-bundled package with tokens pre-loaded and minified to remove unused tokens. diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 17e6219d073..3853533ae77 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -93,6 +93,7 @@ jobs: # stylelint_input: "components/*/index.css components/*/themes/*.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" + packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' - name: Run eslint on packages and stories uses: reviewdog/action-eslint@v1.33.0 From 52d7f94c972acd99ef3a589421d065c09aae64e2 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 17:52:06 -0500 Subject: [PATCH 007/103] fix(combobox): update border color in spectrum-two --- Co-authored-by: TarunAdobe --- .changeset/sixty-vans-thank.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/sixty-vans-thank.md diff --git a/.changeset/sixty-vans-thank.md b/.changeset/sixty-vans-thank.md new file mode 100644 index 00000000000..abce22caac8 --- /dev/null +++ b/.changeset/sixty-vans-thank.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/combobox": minor +"@spectrum-css/tokens": minor +--- + +Update border and background color values for Combobox states [SWC-582] From af1faf673df6b42abbe5fd840dc74d674c8c423a Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 18:03:09 -0500 Subject: [PATCH 008/103] fix(picker): update background and border color --- Co-authored-by: TarunAdobe --- .changeset/big-chairs-care.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/big-chairs-care.md diff --git a/.changeset/big-chairs-care.md b/.changeset/big-chairs-care.md new file mode 100644 index 00000000000..1e06436bf8b --- /dev/null +++ b/.changeset/big-chairs-care.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/picker": minor +"@spectrum-css/tokens": minor +--- + +Update background and border color for picker in Spectrum 2 theme [SWC-575] From f3eb7a0abcfa94a21eb3eb905bdf6306a25a7a6d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:26:10 -0500 Subject: [PATCH 009/103] chore: release (s2-foundations) (#3425) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.changeset/pre.json b/.changeset/pre.json index 914d4feb186..96c99bba5d3 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -101,6 +101,8 @@ "@spectrum-css/ui-icons": "1.1.2" }, "changesets": [ + "big-chairs-care", + "sixty-vans-thank", "weak-kings-pretend" ] } From 18e7f189c84824b409fe72a0a7a18105cca8d05d Mon Sep 17 00:00:00 2001 From: castastrophe Date: Tue, 3 Dec 2024 18:54:44 -0500 Subject: [PATCH 010/103] fix(combobox): retain border values for S1 --- .changeset/young-cheetahs-peel.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/young-cheetahs-peel.md diff --git a/.changeset/young-cheetahs-peel.md b/.changeset/young-cheetahs-peel.md new file mode 100644 index 00000000000..960240851c5 --- /dev/null +++ b/.changeset/young-cheetahs-peel.md @@ -0,0 +1,6 @@ +--- +"@spectrum-css/combobox": patch +"@spectrum-css/tokens": patch +--- + +Bug fix to retain border color values in S1 for combobox [SWC-582] From dabab7bc4fdb63f45d64f5f4487a1f80a9fe0f8d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 3 Dec 2024 18:56:58 -0500 Subject: [PATCH 011/103] chore: release (s2-foundations) (#3426) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 96c99bba5d3..ae18fc160b9 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -103,6 +103,7 @@ "changesets": [ "big-chairs-care", "sixty-vans-thank", - "weak-kings-pretend" + "weak-kings-pretend", + "young-cheetahs-peel" ] } From 820b79a859a35175f335673c7d384b32c8874eb0 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Thu, 19 Dec 2024 15:35:20 -0500 Subject: [PATCH 012/103] chore(assetcard,avatar,badge): remove mdx files (#3408) * docs(assetcard): remove MDX file - adds some missing documentation regarding stories, classes and custom properties - corrects sentence-casing of story names * docs(avatar): remove MDX file - adds some missing documentation regarding stories - reorganizes some information to sit with appropriate story/variant - migrates documentation from MDX file to the stories file instead * chore(avatar): fix disabled test arguments * docs(badge): remove MDX file - adds notice badge variants to semantic story - adds sizing story to docs page - migrates documentation in MDX to stories.js instead * docs(badge): pr fixes - remove empty doc block line - remove html wrapper in favor of content array - add notice badge to test coverage --- components/badge/stories/badge.stories.js | 1 + components/badge/stories/template.js | 1 + 2 files changed, 2 insertions(+) diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index 4de26b9b9fa..7d5a17662d6 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,3 +1,4 @@ +import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { ArgGrid } from "@spectrum-css/preview/decorators"; import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index ee071e455fe..0ec22bbe5b2 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -1,3 +1,4 @@ +import { Container } from "@spectrum-css/preview/decorators"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; From 882172402a0c2c5562a09fc7968f92fdb3b40127 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 11 Dec 2023 15:38:11 -0500 Subject: [PATCH 013/103] feat(tokens): use 13.0.0-beta.5 Includes new color values for Spectrum 2 --- tokens/dist/json/tokens.json | 2158 +++++++--------------------------- tokens/package.json | 2 +- yarn.lock | 10 +- 3 files changed, 409 insertions(+), 1761 deletions(-) diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 2be36fb5803..0dcdea3f595 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -1,42 +1,42 @@ { "accent-background-color-default": { "prop": "--spectrum-accent-background-color-default", - "ref": "var(--spectrum-accent-color-800)", + "ref": "var(--spectrum-accent-color-600)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(37, 73, 229)" } }, "accent-background-color-down": { "prop": "--spectrum-accent-background-color-down", - "ref": "var(--spectrum-accent-color-700)", + "ref": "var(--spectrum-accent-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "accent-background-color-hover": { "prop": "--spectrum-accent-background-color-hover", - "ref": "var(--spectrum-accent-color-700)", + "ref": "var(--spectrum-accent-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "accent-background-color-key-focus": { "prop": "--spectrum-accent-background-color-key-focus", - "ref": "var(--spectrum-accent-color-700)", + "ref": "var(--spectrum-accent-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "accent-color-100": { @@ -186,7 +186,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(69, 110, 254)" } }, "accent-color-900": { @@ -249,16 +249,6 @@ "value": "rgb(105, 149, 254)" } }, - "accent-subtle-background-color-default": { - "prop": "--spectrum-accent-subtle-background-color-default", - "ref": "var(--spectrum-accent-color-300)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" - } - }, "accent-visual-color": { "prop": "--spectrum-accent-visual-color", "ref": "var(--spectrum-accent-color-900)", @@ -397,19 +387,39 @@ }, "accordion-disclosure-indicator-to-text": { "prop": "--spectrum-accordion-disclosure-indicator-to-text", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "accordion-edge-to-disclosure-indicator": { "prop": "--spectrum-accordion-edge-to-disclosure-indicator", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "accordion-edge-to-text": { "prop": "--spectrum-accordion-edge-to-text", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "accordion-focus-indicator-gap": { "prop": "--spectrum-accordion-focus-indicator-gap", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", @@ -449,11 +459,21 @@ }, "accordion-top-to-text-compact-medium": { "prop": "--spectrum-accordion-top-to-text-compact-medium", - "value": "4px" + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "4px" + } }, "accordion-top-to-text-compact-small": { "prop": "--spectrum-accordion-top-to-text-compact-small", - "value": "2px" + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "2px" + } }, "accordion-top-to-text-regular-extra-large": { "prop": "--spectrum-accordion-top-to-text-regular-extra-large", @@ -518,15 +538,6 @@ "value": "14px" } }, - "accordion-top-to-text-spacious-small": { - "prop": "--spectrum-accordion-top-to-text-spacious-small", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "12px" - } - }, "action-bar-height": { "prop": "--spectrum-action-bar-height", "desktop": { @@ -556,7 +567,12 @@ }, "action-button-edge-to-hold-icon-extra-small": { "prop": "--spectrum-action-button-edge-to-hold-icon-extra-small", - "value": "3px" + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "3px" + } }, "action-button-edge-to-hold-icon-large": { "prop": "--spectrum-action-button-edge-to-hold-icon-large", @@ -578,7 +594,12 @@ }, "action-button-edge-to-hold-icon-small": { "prop": "--spectrum-action-button-edge-to-hold-icon-small", - "value": "3px" + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "3px" + } }, "alert-banner-bottom-to-text": { "prop": "--spectrum-alert-banner-bottom-to-text", @@ -687,100 +708,6 @@ "prop": "--spectrum-android-elevation", "value": "2dp" }, - "arrow-icon-size-100": { - "prop": "--spectrum-arrow-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "arrow-icon-size-200": { - "prop": "--spectrum-arrow-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "arrow-icon-size-300": { - "prop": "--spectrum-arrow-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "arrow-icon-size-400": { - "prop": "--spectrum-arrow-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "arrow-icon-size-500": { - "prop": "--spectrum-arrow-icon-size-500", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "arrow-icon-size-600": { - "prop": "--spectrum-arrow-icon-size-600", - "desktop": { - "value": "20px" - }, - "mobile": { - "value": "24px" - } - }, - "arrow-icon-size-75": { - "prop": "--spectrum-arrow-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-100": { - "prop": "--spectrum-asterisk-icon-size-100", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "asterisk-icon-size-200": { - "prop": "--spectrum-asterisk-icon-size-200", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-300": { - "prop": "--spectrum-asterisk-icon-size-300", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "asterisk-icon-size-75": { - "prop": "--spectrum-asterisk-icon-size-75", - "value": "8px" - }, "avatar-opacity-disabled": { "prop": "--spectrum-avatar-opacity-disabled", "ref": "var(--spectrum-opacity-disabled)", @@ -870,21 +797,11 @@ "background-base-color": { "prop": "--spectrum-background-base-color", "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" - }, "light": { - "value": "rgb(255, 255, 255)" - } - }, - "background-elevated-color": { - "prop": "--spectrum-background-elevated-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(34, 34, 34)" + "value": "rgb(233, 233, 233)" }, - "light": { - "value": "rgb(255, 255, 255)" + "dark": { + "value": "rgb(17, 17, 17)" } }, "background-layer-1-color": { @@ -923,16 +840,6 @@ "prop": "--spectrum-background-opacity-key-focus", "value": "0.1" }, - "background-pasteboard-color": { - "prop": "--spectrum-background-pasteboard-color", - "ref": "var(--spectrum-gray-100)", - "dark": { - "value": "rgb(17, 17, 17)" - }, - "light": { - "value": "rgb(233, 233, 233)" - } - }, "black": { "prop": "--spectrum-black", "value": "rgb(0, 0, 0)" @@ -1073,7 +980,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(69, 110, 254)" } }, "blue-900": { @@ -1087,22 +994,12 @@ }, "blue-background-color-default": { "prop": "--spectrum-blue-background-color-default", - "ref": "var(--spectrum-blue-800)", + "ref": "var(--spectrum-blue-700)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(64, 105, 253)" - } - }, - "blue-subtle-background-color-default": { - "prop": "--spectrum-blue-subtle-background-color-default", - "ref": "var(--spectrum-blue-300)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" + "value": "rgb(52, 91, 248)" } }, "blue-visual-color": { @@ -1660,7 +1557,7 @@ "brown-800": { "prop": "--spectrum-brown-800", "dark": { - "value": "rgb(143, 114, 69)" + "value": "rgb(148, 118, 73)" }, "light": { "value": "rgb(154, 123, 77)" @@ -1675,36 +1572,6 @@ "value": "rgb(139, 109, 66)" } }, - "brown-background-color-default": { - "prop": "--spectrum-brown-background-color-default", - "ref": "var(--spectrum-brown-800)", - "light": { - "value": "rgb(139, 109, 66)" - }, - "dark": { - "value": "rgb(143, 114, 69)" - } - }, - "brown-subtle-background-color-default": { - "prop": "--spectrum-brown-subtle-background-color-default", - "ref": "var(--spectrum-brown-300)", - "light": { - "value": "rgb(247, 238, 225)" - }, - "dark": { - "value": "rgb(58, 40, 14)" - } - }, - "brown-visual-color": { - "prop": "--spectrum-brown-visual-color", - "ref": "var(--spectrum-brown-900)", - "light": { - "value": "rgb(154, 123, 77)" - }, - "dark": { - "value": "rgb(163, 132, 84)" - } - }, "button-minimum-width-multiplier": { "prop": "--spectrum-button-minimum-width-multiplier", "value": "2.25" @@ -1867,7 +1734,7 @@ "value": "rgb(72, 144, 20)" }, "dark": { - "value": "rgb(66, 134, 18)" + "value": "rgb(69, 138, 19)" } }, "celery-900": { @@ -1881,22 +1748,12 @@ }, "celery-background-color-default": { "prop": "--spectrum-celery-background-color-default", - "ref": "var(--spectrum-celery-900)", + "ref": "var(--spectrum-celery-800)", "light": { "value": "rgb(93, 180, 31)" }, "dark": { - "value": "rgb(78, 154, 23)" - } - }, - "celery-subtle-background-color-default": { - "prop": "--spectrum-celery-subtle-background-color-default", - "ref": "var(--spectrum-celery-300)", - "light": { - "value": "rgb(197, 255, 156)" - }, - "dark": { - "value": "rgb(21, 51, 1)" + "value": "rgb(69, 138, 19)" } }, "celery-visual-color": { @@ -1906,7 +1763,7 @@ "value": "rgb(82, 161, 25)" }, "dark": { - "value": "rgb(66, 134, 18)" + "value": "rgb(69, 138, 19)" } }, "character-count-to-field-quiet-extra-large": { @@ -2077,7 +1934,7 @@ "value": "rgb(114, 137, 0)" }, "dark": { - "value": "rgb(106, 127, 0)" + "value": "rgb(109, 131, 0)" } }, "chartreuse-900": { @@ -2091,22 +1948,12 @@ }, "chartreuse-background-color-default": { "prop": "--spectrum-chartreuse-background-color-default", - "ref": "var(--spectrum-chartreuse-1000)", + "ref": "var(--spectrum-chartreuse-900)", "light": { "value": "rgb(163, 196, 0)" }, "dark": { - "value": "rgb(136, 164, 0)" - } - }, - "chartreuse-subtle-background-color-default": { - "prop": "--spectrum-chartreuse-subtle-background-color-default", - "ref": "var(--spectrum-chartreuse-300)", - "light": { - "value": "rgb(234, 246, 173)" - }, - "dark": { - "value": "rgb(39, 47, 0)" + "value": "rgb(122, 147, 0)" } }, "chartreuse-visual-color": { @@ -2191,377 +2038,59 @@ "value": "7px" } }, - "checkmark-icon-size-100": { - "prop": "--spectrum-checkmark-icon-size-100", + "cjk-font-family": { + "prop": "--spectrum-cjk-font-family", + "value": "Adobe Clean Han" + }, + "cjk-letter-spacing": { + "prop": "--spectrum-cjk-letter-spacing", + "value": "0.05em" + }, + "cjk-line-height-100": { + "prop": "--spectrum-cjk-line-height-100", + "value": "1.5" + }, + "cjk-line-height-200": { + "prop": "--spectrum-cjk-line-height-200", + "value": "1.7" + }, + "coach-mark-body-size": { + "prop": "--spectrum-coach-mark-body-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "10px" + "value": "14px" }, "mobile": { - "value": "14px" + "value": "15px" } }, - "checkmark-icon-size-200": { - "prop": "--spectrum-checkmark-icon-size-200", + "coach-mark-edge-to-content": { + "prop": "--spectrum-coach-mark-edge-to-content", "desktop": { - "value": "12px" + "ref": "var(--spectrum-spacing-400)", + "value": "24px" }, "mobile": { - "value": "14px" + "ref": "var(--spectrum-spacing-300)", + "value": "16px" } }, - "checkmark-icon-size-300": { - "prop": "--spectrum-checkmark-icon-size-300", + "coach-mark-maximum-width": { + "prop": "--spectrum-coach-mark-maximum-width", "desktop": { - "value": "14px" + "value": "380px" }, "mobile": { - "value": "16px" + "value": "248px" } }, - "checkmark-icon-size-400": { - "prop": "--spectrum-checkmark-icon-size-400", + "coach-mark-media-height": { + "prop": "--spectrum-coach-mark-media-height", "desktop": { - "value": "16px" + "value": "222px" }, "mobile": { - "value": "18px" - } - }, - "checkmark-icon-size-50": { - "prop": "--spectrum-checkmark-icon-size-50", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "checkmark-icon-size-500": { - "prop": "--spectrum-checkmark-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "checkmark-icon-size-600": { - "prop": "--spectrum-checkmark-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "24px" - } - }, - "checkmark-icon-size-75": { - "prop": "--spectrum-checkmark-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "chevron-icon-size-100": { - "prop": "--spectrum-chevron-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "14px" - } - }, - "chevron-icon-size-200": { - "prop": "--spectrum-chevron-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "chevron-icon-size-300": { - "prop": "--spectrum-chevron-icon-size-300", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "16px" - } - }, - "chevron-icon-size-400": { - "prop": "--spectrum-chevron-icon-size-400", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "18px" - } - }, - "chevron-icon-size-50": { - "prop": "--spectrum-chevron-icon-size-50", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "chevron-icon-size-500": { - "prop": "--spectrum-chevron-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "chevron-icon-size-600": { - "prop": "--spectrum-chevron-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "24px" - } - }, - "chevron-icon-size-75": { - "prop": "--spectrum-chevron-icon-size-75", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "cinnamon-100": { - "prop": "--spectrum-cinnamon-100", - "dark": { - "value": "rgb(48, 17, 4)" - }, - "light": { - "value": "rgb(253, 247, 243)" - } - }, - "cinnamon-1000": { - "prop": "--spectrum-cinnamon-1000", - "dark": { - "value": "rgb(206, 136, 99)" - }, - "light": { - "value": "rgb(147, 77, 43)" - } - }, - "cinnamon-1100": { - "prop": "--spectrum-cinnamon-1100", - "dark": { - "value": "rgb(220, 154, 118)" - }, - "light": { - "value": "rgb(128, 62, 32)" - } - }, - "cinnamon-1200": { - "prop": "--spectrum-cinnamon-1200", - "dark": { - "value": "rgb(232, 179, 149)" - }, - "light": { - "value": "rgb(110, 48, 21)" - } - }, - "cinnamon-1300": { - "prop": "--spectrum-cinnamon-1300", - "dark": { - "value": "rgb(239, 203, 183)" - }, - "light": { - "value": "rgb(92, 35, 11)" - } - }, - "cinnamon-1400": { - "prop": "--spectrum-cinnamon-1400", - "dark": { - "value": "rgb(246, 225, 214)" - }, - "light": { - "value": "rgb(72, 25, 6)" - } - }, - "cinnamon-1500": { - "prop": "--spectrum-cinnamon-1500", - "dark": { - "value": "rgb(252, 244, 239)" - }, - "light": { - "value": "rgb(52, 18, 4)" - } - }, - "cinnamon-1600": { - "prop": "--spectrum-cinnamon-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, - "light": { - "value": "rgb(24, 8, 2)" - } - }, - "cinnamon-200": { - "prop": "--spectrum-cinnamon-200", - "dark": { - "value": "rgb(59, 21, 5)" - }, - "light": { - "value": "rgb(249, 236, 229)" - } - }, - "cinnamon-300": { - "prop": "--spectrum-cinnamon-300", - "dark": { - "value": "rgb(79, 28, 7)" - }, - "light": { - "value": "rgb(244, 218, 203)" - } - }, - "cinnamon-400": { - "prop": "--spectrum-cinnamon-400", - "dark": { - "value": "rgb(100, 41, 15)" - }, - "light": { - "value": "rgb(237, 196, 172)" - } - }, - "cinnamon-500": { - "prop": "--spectrum-cinnamon-500", - "dark": { - "value": "rgb(122, 57, 28)" - }, - "light": { - "value": "rgb(229, 170, 136)" - } - }, - "cinnamon-600": { - "prop": "--spectrum-cinnamon-600", - "dark": { - "value": "rgb(143, 74, 40)" - }, - "light": { - "value": "rgb(212, 145, 108)" - } - }, - "cinnamon-700": { - "prop": "--spectrum-cinnamon-700", - "dark": { - "value": "rgb(163, 88, 52)" - }, - "light": { - "value": "rgb(198, 126, 88)" - } - }, - "cinnamon-800": { - "prop": "--spectrum-cinnamon-800", - "dark": { - "value": "rgb(176, 98, 59)" - }, - "light": { - "value": "rgb(184, 109, 70)" - } - }, - "cinnamon-900": { - "prop": "--spectrum-cinnamon-900", - "dark": { - "value": "rgb(192, 119, 80)" - }, - "light": { - "value": "rgb(170, 94, 56)" - } - }, - "cinnamon-background-color-default": { - "prop": "--spectrum-cinnamon-background-color-default", - "ref": "var(--spectrum-cinnamon-800)", - "light": { - "value": "rgb(170, 94, 56)" - }, - "dark": { - "value": "rgb(176, 98, 59)" - } - }, - "cinnamon-subtle-background-color-default": { - "prop": "--spectrum-cinnamon-subtle-background-color-default", - "ref": "var(--spectrum-cinnamon-300)", - "light": { - "value": "rgb(249, 236, 229)" - }, - "dark": { - "value": "rgb(79, 28, 7)" - } - }, - "cinnamon-visual-color": { - "prop": "--spectrum-cinnamon-visual-color", - "ref": "var(--spectrum-cinnamon-900)", - "light": { - "value": "rgb(184, 109, 70)" - }, - "dark": { - "value": "rgb(192, 119, 80)" - } - }, - "cjk-font-family": { - "prop": "--spectrum-cjk-font-family", - "value": "Adobe Clean Han" - }, - "cjk-letter-spacing": { - "prop": "--spectrum-cjk-letter-spacing", - "value": "0.05em" - }, - "cjk-line-height-100": { - "prop": "--spectrum-cjk-line-height-100", - "value": "1.5" - }, - "cjk-line-height-200": { - "prop": "--spectrum-cjk-line-height-200", - "value": "1.7" - }, - "coach-mark-body-size": { - "prop": "--spectrum-coach-mark-body-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "15px" - } - }, - "coach-mark-edge-to-content": { - "prop": "--spectrum-coach-mark-edge-to-content", - "desktop": { - "ref": "var(--spectrum-spacing-400)", - "value": "24px" - }, - "mobile": { - "ref": "var(--spectrum-spacing-300)", - "value": "16px" - } - }, - "coach-mark-maximum-width": { - "prop": "--spectrum-coach-mark-maximum-width", - "desktop": { - "value": "380px" - }, - "mobile": { - "value": "248px" - } - }, - "coach-mark-media-height": { - "prop": "--spectrum-coach-mark-media-height", - "desktop": { - "value": "222px" - }, - "mobile": { - "value": "162px" + "value": "162px" } }, "coach-mark-media-minimum-height": { @@ -2805,8 +2334,13 @@ }, "color-area-border-rounding": { "prop": "--spectrum-color-area-border-rounding", - "ref": "var(--spectrum-corner-radius-medium-size-small)", - "value": "7px" + "ref": "var(--spectrum-corner-radius-100)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } }, "color-area-border-width": { "prop": "--spectrum-color-area-border-width", @@ -2871,10 +2405,10 @@ "prop": "--spectrum-color-handle-drop-shadow-color", "ref": "var(--spectrum-drop-shadow-color)", "light": { - "value": "rgba(0, 0, 0, 0.12)" + "value": "rgba(0, 0, 0, 0.15)" }, "dark": { - "value": "rgba(0, 0, 0, 0.36)" + "value": "rgba(0, 0, 0, 0.8)" } }, "color-handle-drop-shadow-x": { @@ -2900,8 +2434,10 @@ }, "color-handle-outer-border-color": { "prop": "--spectrum-color-handle-outer-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" + "spectrum": { + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + } }, "color-handle-outer-border-opacity": { "prop": "--spectrum-color-handle-outer-border-opacity", @@ -2941,12 +2477,7 @@ "color-loupe-drop-shadow-color": { "prop": "--spectrum-color-loupe-drop-shadow-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "color-loupe-drop-shadow-y": { "prop": "--spectrum-color-loupe-drop-shadow-y", @@ -2959,12 +2490,7 @@ "color-loupe-inner-border": { "prop": "--spectrum-color-loupe-inner-border", "ref": "var(--spectrum-transparent-black-200)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } + "value": "rgba(0, 0, 0, 0.12)" }, "color-loupe-inner-border-width": { "prop": "--spectrum-color-loupe-inner-border-width", @@ -2973,12 +2499,7 @@ "color-loupe-outer-border": { "prop": "--spectrum-color-loupe-outer-border", "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "color-loupe-outer-border-width": { "prop": "--spectrum-color-loupe-outer-border-width", @@ -3005,8 +2526,7 @@ }, "color-slider-border-rounding": { "prop": "--spectrum-color-slider-border-rounding", - "ref": "var(--spectrum-corner-radius-medium-size-small)", - "value": "7px" + "value": "4px" }, "color-slider-border-width": { "prop": "--spectrum-color-slider-border-width", @@ -3160,13 +2680,13 @@ "value": "15px" }, "mobile": { - "value": "18px" + "value": "19px" } }, "component-edge-to-text-300": { "prop": "--spectrum-component-edge-to-text-300", "desktop": { - "value": "17px" + "value": "18px" }, "mobile": { "value": "22px" @@ -3178,16 +2698,16 @@ "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "component-edge-to-text-75": { "prop": "--spectrum-component-edge-to-text-75", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-edge-to-visual-100": { @@ -3205,61 +2725,61 @@ "value": "13px" }, "mobile": { - "value": "15px" + "value": "16px" } }, "component-edge-to-visual-300": { "prop": "--spectrum-component-edge-to-visual-300", "desktop": { - "value": "14px" + "value": "15px" }, "mobile": { - "value": "20px" + "value": "19px" } }, "component-edge-to-visual-50": { "prop": "--spectrum-component-edge-to-visual-50", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "7px" } }, "component-edge-to-visual-75": { "prop": "--spectrum-component-edge-to-visual-75", "desktop": { - "value": "8px" + "value": "7px" }, "mobile": { - "value": "11px" + "value": "9px" } }, "component-edge-to-visual-only-100": { "prop": "--spectrum-component-edge-to-visual-only-100", "desktop": { - "value": "6px" + "value": "7px" }, "mobile": { - "value": "8px" + "value": "9px" } }, "component-edge-to-visual-only-200": { "prop": "--spectrum-component-edge-to-visual-only-200", "desktop": { - "value": "9px" + "value": "10px" }, "mobile": { - "value": "11px" + "value": "13px" } }, "component-edge-to-visual-only-300": { "prop": "--spectrum-component-edge-to-visual-only-300", "desktop": { - "value": "11px" + "value": "13px" }, "mobile": { - "value": "15px" + "value": "16px" } }, "component-edge-to-visual-only-50": { @@ -3268,7 +2788,7 @@ "value": "3px" }, "mobile": { - "value": "5px" + "value": "4px" } }, "component-edge-to-visual-only-75": { @@ -3277,7 +2797,7 @@ "value": "4px" }, "mobile": { - "value": "6px" + "value": "5px" } }, "component-height-100": { @@ -3358,13 +2878,13 @@ "value": "20px" }, "mobile": { - "value": "24px" + "value": "25px" } }, "component-pill-edge-to-text-300": { "prop": "--spectrum-component-pill-edge-to-text-300", "desktop": { - "value": "23px" + "value": "24px" }, "mobile": { "value": "30px" @@ -3373,10 +2893,10 @@ "component-pill-edge-to-text-75": { "prop": "--spectrum-component-pill-edge-to-text-75", "desktop": { - "value": "13px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "15px" } }, "component-pill-edge-to-visual-100": { @@ -3394,52 +2914,52 @@ "value": "18px" }, "mobile": { - "value": "21px" + "value": "22px" } }, "component-pill-edge-to-visual-300": { "prop": "--spectrum-component-pill-edge-to-visual-300", "desktop": { - "value": "20px" + "value": "21px" }, "mobile": { - "value": "28px" + "value": "27px" } }, "component-pill-edge-to-visual-75": { "prop": "--spectrum-component-pill-edge-to-visual-75", "desktop": { - "value": "11px" + "value": "10px" }, "mobile": { - "value": "15px" + "value": "13px" } }, "component-pill-edge-to-visual-only-100": { "prop": "--spectrum-component-pill-edge-to-visual-only-100", "desktop": { - "value": "6px" + "value": "7px" }, "mobile": { - "value": "8px" + "value": "9px" } }, "component-pill-edge-to-visual-only-200": { "prop": "--spectrum-component-pill-edge-to-visual-only-200", "desktop": { - "value": "9px" + "value": "10px" }, "mobile": { - "value": "11px" + "value": "13px" } }, "component-pill-edge-to-visual-only-300": { "prop": "--spectrum-component-pill-edge-to-visual-only-300", "desktop": { - "value": "11px" + "value": "13px" }, "mobile": { - "value": "15px" + "value": "16px" } }, "component-pill-edge-to-visual-only-75": { @@ -3448,7 +2968,7 @@ "value": "4px" }, "mobile": { - "value": "6px" + "value": "5px" } }, "component-to-menu-extra-large": { @@ -3509,309 +3029,109 @@ "prop": "--spectrum-component-top-to-text-300", "desktop": { "value": "12px" - }, - "mobile": { - "value": "15px" - } - }, - "component-top-to-text-50": { - "prop": "--spectrum-component-top-to-text-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "4px" - } - }, - "component-top-to-text-75": { - "prop": "--spectrum-component-top-to-text-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } - }, - "component-top-to-workflow-icon-100": { - "prop": "--spectrum-component-top-to-workflow-icon-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } - }, - "component-top-to-workflow-icon-200": { - "prop": "--spectrum-component-top-to-workflow-icon-200", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } - }, - "component-top-to-workflow-icon-300": { - "prop": "--spectrum-component-top-to-workflow-icon-300", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "15px" - } - }, - "component-top-to-workflow-icon-50": { - "prop": "--spectrum-component-top-to-workflow-icon-50", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "5px" - } - }, - "component-top-to-workflow-icon-75": { - "prop": "--spectrum-component-top-to-workflow-icon-75", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } - }, - "contextual-help-body-size": { - "prop": "--spectrum-contextual-help-body-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "15px" - } - }, - "contextual-help-minimum-width": { - "prop": "--spectrum-contextual-help-minimum-width", - "value": "268px" - }, - "contextual-help-title-size": { - "prop": "--spectrum-contextual-help-title-size", - "ref": "var(--spectrum-heading-size-xxs)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "17px" - } - }, - "corner-radius-0": { - "prop": "--spectrum-corner-radius-0", - "value": "0px" - }, - "corner-radius-100": { - "prop": "--spectrum-corner-radius-100", - "value": "8px" - }, - "corner-radius-1000": { - "prop": "--spectrum-corner-radius-1000", - "value": "0.5" - }, - "corner-radius-200": { - "prop": "--spectrum-corner-radius-200", - "value": "10px" - }, - "corner-radius-300": { - "prop": "--spectrum-corner-radius-300", - "value": "6px" - }, - "corner-radius-400": { - "prop": "--spectrum-corner-radius-400", - "value": "7px" - }, - "corner-radius-500": { - "prop": "--spectrum-corner-radius-500", - "value": "8px" - }, - "corner-radius-600": { - "prop": "--spectrum-corner-radius-600", - "value": "9px" - }, - "corner-radius-700": { - "prop": "--spectrum-corner-radius-700", - "value": "10px" - }, - "corner-radius-75": { - "prop": "--spectrum-corner-radius-75", - "value": "4px" - }, - "corner-radius-800": { - "prop": "--spectrum-corner-radius-800", - "value": "16px" - }, - "corner-radius-extra-large-default": { - "prop": "--spectrum-corner-radius-extra-large-default", - "ref": "var(--spectrum-corner-radius-800)", - "value": "16px" - }, - "corner-radius-full": { - "prop": "--spectrum-corner-radius-full", - "ref": "var(--spectrum-corner-radius-1000)", - "value": "0.5" - }, - "corner-radius-large-default": { - "prop": "--spectrum-corner-radius-large-default", - "ref": "var(--spectrum-corner-radius-700)", - "value": "10px" - }, - "corner-radius-medium-default": { - "prop": "--spectrum-corner-radius-medium-default", - "ref": "var(--spectrum-corner-radius-500)", - "value": "8px" - }, - "corner-radius-medium-size-extra-large": { - "prop": "--spectrum-corner-radius-medium-size-extra-large", - "ref": "var(--spectrum-corner-radius-700)", - "value": "10px" - }, - "corner-radius-medium-size-extra-small": { - "prop": "--spectrum-corner-radius-medium-size-extra-small", - "ref": "var(--spectrum-corner-radius-300)", - "value": "6px" - }, - "corner-radius-medium-size-large": { - "prop": "--spectrum-corner-radius-medium-size-large", - "ref": "var(--spectrum-corner-radius-600)", - "value": "9px" - }, - "corner-radius-medium-size-medium": { - "prop": "--spectrum-corner-radius-medium-size-medium", - "ref": "var(--spectrum-corner-radius-500)", - "value": "8px" - }, - "corner-radius-medium-size-small": { - "prop": "--spectrum-corner-radius-medium-size-small", - "ref": "var(--spectrum-corner-radius-400)", - "value": "7px" - }, - "corner-radius-none": { - "prop": "--spectrum-corner-radius-none", - "ref": "var(--spectrum-corner-radius-0)", - "value": "0px" - }, - "corner-radius-small-default": { - "prop": "--spectrum-corner-radius-small-default", - "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" - }, - "corner-radius-small-size-extra-large": { - "prop": "--spectrum-corner-radius-small-size-extra-large", - "ref": "var(--spectrum-corner-radius-300)", - "value": "6px" - }, - "corner-radius-small-size-large": { - "prop": "--spectrum-corner-radius-small-size-large", - "ref": "var(--spectrum-corner-radius-200)", - "value": "10px" - }, - "corner-radius-small-size-medium": { - "prop": "--spectrum-corner-radius-small-size-medium", - "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" - }, - "corner-radius-small-size-small": { - "prop": "--spectrum-corner-radius-small-size-small", - "ref": "var(--spectrum-corner-radius-75)", - "value": "4px" + }, + "mobile": { + "value": "15px" + } }, - "corner-triangle-icon-size-100": { - "prop": "--spectrum-corner-triangle-icon-size-100", + "component-top-to-text-50": { + "prop": "--spectrum-component-top-to-text-50", "desktop": { - "value": "5px" + "value": "3px" }, "mobile": { - "value": "7px" + "value": "4px" } }, - "corner-triangle-icon-size-200": { - "prop": "--spectrum-corner-triangle-icon-size-200", + "component-top-to-text-75": { + "prop": "--spectrum-component-top-to-text-75", "desktop": { - "value": "6px" + "value": "4px" }, "mobile": { - "value": "8px" + "value": "5px" } }, - "corner-triangle-icon-size-300": { - "prop": "--spectrum-corner-triangle-icon-size-300", + "component-top-to-workflow-icon-100": { + "prop": "--spectrum-component-top-to-workflow-icon-100", "desktop": { "value": "7px" }, "mobile": { - "value": "8px" + "value": "9px" } }, - "corner-triangle-icon-size-75": { - "prop": "--spectrum-corner-triangle-icon-size-75", + "component-top-to-workflow-icon-200": { + "prop": "--spectrum-component-top-to-workflow-icon-200", "desktop": { - "value": "5px" + "value": "10px" }, "mobile": { - "value": "6px" + "value": "13px" } }, - "cross-icon-size-100": { - "prop": "--spectrum-cross-icon-size-100", + "component-top-to-workflow-icon-300": { + "prop": "--spectrum-component-top-to-workflow-icon-300", "desktop": { - "value": "8px" + "value": "13px" }, "mobile": { - "value": "10px" + "value": "16px" } }, - "cross-icon-size-200": { - "prop": "--spectrum-cross-icon-size-200", + "component-top-to-workflow-icon-50": { + "prop": "--spectrum-component-top-to-workflow-icon-50", "desktop": { - "value": "10px" + "value": "3px" }, "mobile": { - "value": "12px" + "value": "4px" } }, - "cross-icon-size-300": { - "prop": "--spectrum-cross-icon-size-300", + "component-top-to-workflow-icon-75": { + "prop": "--spectrum-component-top-to-workflow-icon-75", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "14px" + "value": "5px" } }, - "cross-icon-size-400": { - "prop": "--spectrum-cross-icon-size-400", + "contextual-help-body-size": { + "prop": "--spectrum-contextual-help-body-size", + "ref": "var(--spectrum-heading-size-xs)", "desktop": { - "value": "12px" + "value": "18px" }, "mobile": { - "value": "16px" + "value": "19px" } }, - "cross-icon-size-500": { - "prop": "--spectrum-cross-icon-size-500", + "contextual-help-minimum-width": { + "prop": "--spectrum-contextual-help-minimum-width", + "value": "268px" + }, + "contextual-help-title-size": { + "prop": "--spectrum-contextual-help-title-size", + "ref": "var(--spectrum-heading-size-xxs)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "16px" + "value": "17px" } }, - "cross-icon-size-600": { - "prop": "--spectrum-cross-icon-size-600", + "corner-radius-100": { + "prop": "--spectrum-corner-radius-100", "desktop": { - "value": "16px" + "value": "4px" }, "mobile": { - "value": "18px" + "value": "5px" } }, - "cross-icon-size-75": { - "prop": "--spectrum-cross-icon-size-75", + "corner-radius-200": { + "prop": "--spectrum-corner-radius-200", "desktop": { "value": "8px" }, @@ -3819,6 +3139,15 @@ "value": "10px" } }, + "corner-radius-75": { + "prop": "--spectrum-corner-radius-75", + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "2px" + } + }, "cyan-100": { "prop": "--spectrum-cyan-100", "light": { @@ -3951,7 +3280,7 @@ "value": "rgb(18, 134, 205)" }, "dark": { - "value": "rgb(13, 125, 186)" + "value": "rgb(15, 128, 194)" } }, "cyan-900": { @@ -3965,22 +3294,12 @@ }, "cyan-background-color-default": { "prop": "--spectrum-cyan-background-color-default", - "ref": "var(--spectrum-cyan-800)", + "ref": "var(--spectrum-cyan-700)", "light": { "value": "rgb(11, 120, 179)" }, "dark": { - "value": "rgb(13, 125, 186)" - } - }, - "cyan-subtle-background-color-default": { - "prop": "--spectrum-cyan-subtle-background-color-default", - "ref": "var(--spectrum-cyan-300)", - "light": { - "value": "rgb(217, 244, 253)" - }, - "dark": { - "value": "rgb(0, 48, 65)" + "value": "rgb(8, 115, 168)" } }, "cyan-visual-color": { @@ -3993,78 +3312,6 @@ "value": "rgb(24, 142, 220)" } }, - "dash-icon-size-100": { - "prop": "--spectrum-dash-icon-size-100", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "12px" - } - }, - "dash-icon-size-200": { - "prop": "--spectrum-dash-icon-size-200", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "14px" - } - }, - "dash-icon-size-300": { - "prop": "--spectrum-dash-icon-size-300", - "desktop": { - "value": "12px" - }, - "mobile": { - "value": "16px" - } - }, - "dash-icon-size-400": { - "prop": "--spectrum-dash-icon-size-400", - "desktop": { - "value": "14px" - }, - "mobile": { - "value": "18px" - } - }, - "dash-icon-size-50": { - "prop": "--spectrum-dash-icon-size-50", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, - "dash-icon-size-500": { - "prop": "--spectrum-dash-icon-size-500", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "20px" - } - }, - "dash-icon-size-600": { - "prop": "--spectrum-dash-icon-size-600", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "dash-icon-size-75": { - "prop": "--spectrum-dash-icon-size-75", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, "default-font-family": { "prop": "--spectrum-default-font-family", "ref": "var(--spectrum-sans-serif-font-family)", @@ -4442,62 +3689,32 @@ "disabled-static-black-background-color": { "prop": "--spectrum-disabled-static-black-background-color", "ref": "var(--spectrum-transparent-black-100)", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } + "value": "rgba(0, 0, 0, 0.09)" }, "disabled-static-black-border-color": { "prop": "--spectrum-disabled-static-black-border-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "disabled-static-black-content-color": { "prop": "--spectrum-disabled-static-black-content-color", "ref": "var(--spectrum-transparent-black-400)", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } + "value": "rgba(0, 0, 0, 0.22)" }, "disabled-static-white-background-color": { "prop": "--spectrum-disabled-static-white-background-color", "ref": "var(--spectrum-transparent-white-100)", - "light": { - "value": "rgba(255, 255, 255, 0.11)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" - } + "value": "rgba(255, 255, 255, 0.11)" }, "disabled-static-white-border-color": { "prop": "--spectrum-disabled-static-white-border-color", "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" - } + "value": "rgba(255, 255, 255, 0.17)" }, "disabled-static-white-content-color": { "prop": "--spectrum-disabled-static-white-content-color", "ref": "var(--spectrum-transparent-white-400)", - "light": { - "value": "rgba(255, 255, 255, 0.21)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.21)" - } + "value": "rgba(255, 255, 255, 0.21)" }, "disclosure-indicator-top-to-disclosure-icon-extra-large": { "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large", @@ -4558,84 +3775,21 @@ }, "drop-shadow-color": { "prop": "--spectrum-drop-shadow-color", - "ref": "var(--spectrum-drop-shadow-color-100)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - } - }, - "drop-shadow-color-100": { - "prop": "--spectrum-drop-shadow-color-100", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - } - }, - "drop-shadow-color-200": { - "prop": "--spectrum-drop-shadow-color-200", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - } - }, - "drop-shadow-color-300": { - "prop": "--spectrum-drop-shadow-color-300", - "light": { - "value": "rgba(0, 0, 0, 0.2)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.6)" - } - }, - "drop-shadow-dragged-color": { - "prop": "--spectrum-drop-shadow-dragged-color", - "ref": "var(--spectrum-drop-shadow-color-300)", - "light": { - "value": "rgba(0, 0, 0, 0.2)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.6)" - } - }, - "drop-shadow-elevated-color": { - "prop": "--spectrum-drop-shadow-elevated-color", - "ref": "var(--spectrum-drop-shadow-color-200)", - "light": { - "value": "rgba(0, 0, 0, 0.16)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.48)" - } - }, - "drop-shadow-emphasized-default-color": { - "prop": "--spectrum-drop-shadow-emphasized-default-color", - "ref": "var(--spectrum-drop-shadow-color-100)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.36)" - } - }, - "drop-shadow-emphasized-hover-color": { - "prop": "--spectrum-drop-shadow-emphasized-hover-color", - "ref": "var(--spectrum-drop-shadow-color-200)", "light": { - "value": "rgba(0, 0, 0, 0.16)" + "value": "rgba(0, 0, 0, 0.15)" }, "dark": { - "value": "rgba(0, 0, 0, 0.48)" + "value": "rgba(0, 0, 0, 0.8)" } }, "drop-shadow-x": { "prop": "--spectrum-drop-shadow-x", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "drop-shadow-y": { "prop": "--spectrum-drop-shadow-y", @@ -4984,7 +4138,12 @@ }, "field-label-top-margin-small": { "prop": "--spectrum-field-label-top-margin-small", - "value": "0px" + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } }, "field-label-top-to-asterisk-extra-large": { "prop": "--spectrum-field-label-top-to-asterisk-extra-large", @@ -5254,12 +4413,7 @@ "floating-action-button-drop-shadow-color": { "prop": "--spectrum-floating-action-button-drop-shadow-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "floating-action-button-drop-shadow-y": { "prop": "--spectrum-floating-action-button-drop-shadow-y", @@ -5268,12 +4422,7 @@ "floating-action-button-shadow-color": { "prop": "--spectrum-floating-action-button-shadow-color", "ref": "var(--spectrum-floating-action-button-drop-shadow-color)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "focus-indicator-color": { "prop": "--spectrum-focus-indicator-color", @@ -5282,7 +4431,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(69, 110, 254)" } }, "focus-indicator-gap": { @@ -5560,7 +4709,7 @@ "value": "rgb(200, 68, 220)" }, "dark": { - "value": "rgb(186, 60, 206)" + "value": "rgb(192, 64, 212)" } }, "fuchsia-900": { @@ -5574,22 +4723,12 @@ }, "fuchsia-background-color-default": { "prop": "--spectrum-fuchsia-background-color-default", - "ref": "var(--spectrum-fuchsia-800)", + "ref": "var(--spectrum-fuchsia-700)", "light": { "value": "rgb(181, 57, 200)" }, "dark": { - "value": "rgb(186, 60, 206)" - } - }, - "fuchsia-subtle-background-color-default": { - "prop": "--spectrum-fuchsia-subtle-background-color-default", - "ref": "var(--spectrum-fuchsia-300)", - "light": { - "value": "rgb(253, 233, 255)" - }, - "dark": { - "value": "rgb(79, 0, 95)" + "value": "rgb(173, 51, 192)" } }, "fuchsia-visual-color": { @@ -5721,22 +4860,12 @@ }, "gray-background-color-default": { "prop": "--spectrum-gray-background-color-default", - "ref": "var(--spectrum-gray-500)", + "ref": "var(--spectrum-gray-700)", "light": { "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(109, 109, 109)" - } - }, - "gray-subtle-background-color-default": { - "prop": "--spectrum-gray-subtle-background-color-default", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(175, 175, 175)" } }, "gray-visual-color": { @@ -5881,7 +5010,7 @@ "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(6, 140, 82)" } }, "green-900": { @@ -5895,22 +5024,12 @@ }, "green-background-color-default": { "prop": "--spectrum-green-background-color-default", - "ref": "var(--spectrum-green-800)", + "ref": "var(--spectrum-green-700)", "light": { "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(6, 136, 80)" - } - }, - "green-subtle-background-color-default": { - "prop": "--spectrum-green-subtle-background-color-default", - "ref": "var(--spectrum-green-300)", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 51, 38)" + "value": "rgb(4, 124, 75)" } }, "green-visual-color": { @@ -5920,7 +5039,7 @@ "value": "rgb(11, 164, 93)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(6, 140, 82)" } }, "heading-cjk-emphasized-font-style": { @@ -6533,7 +5652,7 @@ "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(69, 110, 254)" } }, "icon-color-green-primary-default": { @@ -6543,7 +5662,7 @@ "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(6, 140, 82)" } }, "icon-color-inverse": { @@ -6836,7 +5955,7 @@ "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(116, 91, 252)" + "value": "rgb(119, 97, 252)" } }, "indigo-900": { @@ -6850,22 +5969,12 @@ }, "indigo-background-color-default": { "prop": "--spectrum-indigo-background-color-default", - "ref": "var(--spectrum-indigo-800)", + "ref": "var(--spectrum-indigo-700)", "light": { "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(116, 91, 252)" - } - }, - "indigo-subtle-background-color-default": { - "prop": "--spectrum-indigo-subtle-background-color-default", - "ref": "var(--spectrum-indigo-300)", - "light": { - "value": "rgb(235, 238, 255)" - }, - "dark": { - "value": "rgb(47, 0, 140)" + "value": "rgb(109, 75, 248)" } }, "indigo-visual-color": { @@ -6880,42 +5989,42 @@ }, "informative-background-color-default": { "prop": "--spectrum-informative-background-color-default", - "ref": "var(--spectrum-informative-color-800)", + "ref": "var(--spectrum-informative-color-600)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(37, 73, 229)" } }, "informative-background-color-down": { "prop": "--spectrum-informative-background-color-down", - "ref": "var(--spectrum-informative-color-700)", + "ref": "var(--spectrum-informative-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "informative-background-color-hover": { "prop": "--spectrum-informative-background-color-hover", - "ref": "var(--spectrum-informative-color-700)", + "ref": "var(--spectrum-informative-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "informative-background-color-key-focus": { "prop": "--spectrum-informative-background-color-key-focus", - "ref": "var(--spectrum-informative-color-700)", + "ref": "var(--spectrum-informative-color-500)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(26, 58, 195)" } }, "informative-color-100": { @@ -7065,7 +6174,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(69, 110, 254)" } }, "informative-color-900": { @@ -7078,16 +6187,6 @@ "value": "rgb(86, 129, 255)" } }, - "informative-subtle-background-color-default": { - "prop": "--spectrum-informative-subtle-background-color-default", - "ref": "var(--spectrum-informative-color-300)", - "light": { - "value": "rgb(229, 240, 254)" - }, - "dark": { - "value": "rgb(12, 33, 117)" - } - }, "informative-visual-color": { "prop": "--spectrum-informative-visual-color", "ref": "var(--spectrum-informative-color-900)", @@ -7246,7 +6345,7 @@ "value": "rgb(240, 45, 110)" }, "dark": { - "value": "rgb(224, 38, 101)" + "value": "rgb(231, 41, 105)" } }, "magenta-900": { @@ -7260,22 +6359,12 @@ }, "magenta-background-color-default": { "prop": "--spectrum-magenta-background-color-default", - "ref": "var(--spectrum-magenta-800)", + "ref": "var(--spectrum-magenta-700)", "light": { "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(224, 38, 101)" - } - }, - "magenta-subtle-background-color-default": { - "prop": "--spectrum-magenta-subtle-background-color-default", - "ref": "var(--spectrum-magenta-300)", - "light": { - "value": "rgb(255, 232, 240)" - }, - "dark": { - "value": "rgb(93, 0, 34)" + "value": "rgb(207, 31, 92)" } }, "magenta-visual-color": { @@ -7456,77 +6545,77 @@ "navigational-indicator-top-to-back-icon-extra-large": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "desktop": { - "value": "15px" + "value": "17px" }, "mobile": { - "value": "19px" + "value": "22px" } }, "navigational-indicator-top-to-back-icon-large": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "16px" + "value": "17px" } }, "navigational-indicator-top-to-back-icon-medium": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", "desktop": { - "value": "9px" + "value": "11px" }, "mobile": { - "value": "12px" + "value": "13px" } }, "navigational-indicator-top-to-back-icon-small": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", "desktop": { - "value": "6px" + "value": "7px" }, "mobile": { - "value": "7px" + "value": "9px" } }, "negative-background-color-default": { "prop": "--spectrum-negative-background-color-default", - "ref": "var(--spectrum-negative-color-800)", + "ref": "var(--spectrum-negative-color-600)", "light": { "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(177, 38, 23)" } }, "negative-background-color-down": { "prop": "--spectrum-negative-background-color-down", - "ref": "var(--spectrum-negative-color-700)", + "ref": "var(--spectrum-negative-color-500)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(147, 31, 17)" } }, "negative-background-color-hover": { "prop": "--spectrum-negative-background-color-hover", - "ref": "var(--spectrum-negative-color-700)", + "ref": "var(--spectrum-negative-color-500)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(147, 31, 17)" } }, "negative-background-color-key-focus": { "prop": "--spectrum-negative-background-color-key-focus", - "ref": "var(--spectrum-negative-color-700)", + "ref": "var(--spectrum-negative-color-500)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(147, 31, 17)" } }, "negative-border-color-default": { @@ -7736,7 +6825,7 @@ "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(230, 54, 35)" } }, "negative-color-900": { @@ -7789,64 +6878,14 @@ "value": "rgb(255, 103, 86)" } }, - "negative-subdued-background-color-default": { - "prop": "--spectrum-negative-subdued-background-color-default", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - } - }, - "negative-subdued-background-color-down": { - "prop": "--spectrum-negative-subdued-background-color-down", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - } - }, - "negative-subdued-background-color-hover": { - "prop": "--spectrum-negative-subdued-background-color-hover", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - } - }, - "negative-subdued-background-color-key-focus": { - "prop": "--spectrum-negative-subdued-background-color-key-focus", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 214, 209)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - } - }, - "negative-subtle-background-color-default": { - "prop": "--spectrum-negative-subtle-background-color-default", - "ref": "var(--spectrum-negative-color-300)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(87, 17, 7)" - } - }, "negative-visual-color": { "prop": "--spectrum-negative-visual-color", - "ref": "var(--spectrum-negative-color-900)", + "ref": "var(--spectrum-negative-color-700)", "light": { "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(205, 46, 29)" } }, "neutral-background-color-default": { @@ -7991,42 +7030,42 @@ }, "neutral-subdued-background-color-default": { "prop": "--spectrum-neutral-subdued-background-color-default", - "ref": "var(--spectrum-gray-500)", + "ref": "var(--spectrum-gray-400)", "light": { "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(109, 109, 109)" + "value": "rgb(68, 68, 68)" } }, "neutral-subdued-background-color-down": { "prop": "--spectrum-neutral-subdued-background-color-down", - "ref": "var(--spectrum-gray-400)", + "ref": "var(--spectrum-gray-300)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(68, 68, 68)" + "value": "rgb(57, 57, 57)" } }, "neutral-subdued-background-color-hover": { "prop": "--spectrum-neutral-subdued-background-color-hover", - "ref": "var(--spectrum-gray-400)", + "ref": "var(--spectrum-gray-300)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(68, 68, 68)" + "value": "rgb(57, 57, 57)" } }, "neutral-subdued-background-color-key-focus": { "prop": "--spectrum-neutral-subdued-background-color-key-focus", - "ref": "var(--spectrum-gray-400)", + "ref": "var(--spectrum-gray-300)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(68, 68, 68)" + "value": "rgb(57, 57, 57)" } }, "neutral-subdued-content-color-default": { @@ -8079,16 +7118,6 @@ "value": "rgb(219, 219, 219)" } }, - "neutral-subtle-background-color-default": { - "prop": "--spectrum-neutral-subtle-background-color-default", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(233, 233, 233)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - } - }, "neutral-visual-color": { "prop": "--spectrum-neutral-visual-color", "ref": "var(--spectrum-gray-600)", @@ -8101,12 +7130,12 @@ }, "notice-background-color-default": { "prop": "--spectrum-notice-background-color-default", - "ref": "var(--spectrum-notice-color-600)", - "dark": { - "value": "rgb(224, 100, 0)" - }, + "ref": "var(--spectrum-notice-color-800)", "light": { - "value": "rgb(252, 125, 0)" + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(205, 86, 0)" } }, "notice-color-100": { @@ -8256,7 +7285,7 @@ "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(199, 82, 0)" + "value": "rgb(205, 86, 0)" } }, "notice-color-900": { @@ -8269,21 +7298,11 @@ "value": "rgb(224, 100, 0)" } }, - "notice-subtle-background-color-default": { - "prop": "--spectrum-notice-subtle-background-color-default", - "ref": "var(--spectrum-notice-color-300)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(80, 27, 0)" - } - }, "notice-visual-color": { "prop": "--spectrum-notice-visual-color", "ref": "var(--spectrum-notice-color-900)", "light": { - "value": "rgb(212, 91, 0)" + "value": "rgb(232, 106, 0)" }, "dark": { "value": "rgb(224, 100, 0)" @@ -8302,12 +7321,7 @@ "opacity-checkerboard-square-light": { "prop": "--spectrum-opacity-checkerboard-square-light", "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "opacity-checkerboard-square-size": { "prop": "--spectrum-opacity-checkerboard-square-size", @@ -8454,7 +7468,7 @@ "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(199, 82, 0)" + "value": "rgb(205, 86, 0)" } }, "orange-900": { @@ -8468,22 +7482,12 @@ }, "orange-background-color-default": { "prop": "--spectrum-orange-background-color-default", - "ref": "var(--spectrum-orange-900)", + "ref": "var(--spectrum-orange-800)", "light": { "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(224, 100, 0)" - } - }, - "orange-subtle-background-color-default": { - "prop": "--spectrum-orange-subtle-background-color-default", - "ref": "var(--spectrum-orange-300)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(80, 27, 0)" + "value": "rgb(205, 86, 0)" } }, "orange-visual-color": { @@ -8512,8 +7516,10 @@ }, "picker-border-width": { "prop": "--spectrum-picker-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" + "spectrum": { + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + } }, "picker-end-edge-to-disclosure-icon-quiet": { "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", @@ -8693,7 +7699,7 @@ "pink-800": { "prop": "--spectrum-pink-800", "dark": { - "value": "rgb(213, 45, 151)" + "value": "rgb(220, 47, 156)" }, "light": { "value": "rgb(228, 52, 163)" @@ -8708,36 +7714,6 @@ "value": "rgb(206, 42, 146)" } }, - "pink-background-color-default": { - "prop": "--spectrum-pink-background-color-default", - "ref": "var(--spectrum-pink-800)", - "light": { - "value": "rgb(206, 42, 146)" - }, - "dark": { - "value": "rgb(213, 45, 151)" - } - }, - "pink-subtle-background-color-default": { - "prop": "--spectrum-pink-subtle-background-color-default", - "ref": "var(--spectrum-pink-300)", - "light": { - "value": "rgb(255, 232, 247)" - }, - "dark": { - "value": "rgb(90, 0, 57)" - } - }, - "pink-visual-color": { - "prop": "--spectrum-pink-visual-color", - "ref": "var(--spectrum-pink-900)", - "light": { - "value": "rgb(228, 52, 163)" - }, - "dark": { - "value": "rgb(236, 67, 175)" - } - }, "popover-tip-height": { "prop": "--spectrum-popover-tip-height", "value": "8px" @@ -8757,42 +7733,42 @@ }, "positive-background-color-default": { "prop": "--spectrum-positive-background-color-default", - "ref": "var(--spectrum-positive-color-800)", + "ref": "var(--spectrum-positive-color-600)", "light": { "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(3, 106, 67)" } }, "positive-background-color-down": { "prop": "--spectrum-positive-background-color-down", - "ref": "var(--spectrum-positive-color-700)", + "ref": "var(--spectrum-positive-color-500)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(2, 87, 58)" } }, "positive-background-color-hover": { "prop": "--spectrum-positive-background-color-hover", - "ref": "var(--spectrum-positive-color-700)", + "ref": "var(--spectrum-positive-color-500)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(2, 87, 58)" } }, "positive-background-color-key-focus": { "prop": "--spectrum-positive-background-color-key-focus", - "ref": "var(--spectrum-positive-color-700)", + "ref": "var(--spectrum-positive-color-500)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(2, 87, 58)" } }, "positive-color-100": { @@ -8942,7 +7918,7 @@ "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(6, 140, 82)" } }, "positive-color-900": { @@ -8955,24 +7931,14 @@ "value": "rgb(9, 157, 89)" } }, - "positive-subtle-background-color-default": { - "prop": "--spectrum-positive-subtle-background-color-default", - "ref": "var(--spectrum-positive-color-300)", - "light": { - "value": "rgb(215, 247, 225)" - }, - "dark": { - "value": "rgb(0, 51, 38)" - } - }, "positive-visual-color": { "prop": "--spectrum-positive-visual-color", - "ref": "var(--spectrum-positive-color-900)", + "ref": "var(--spectrum-positive-color-800)", "light": { - "value": "rgb(7, 147, 85)" + "value": "rgb(11, 164, 93)" }, "dark": { - "value": "rgb(9, 157, 89)" + "value": "rgb(6, 140, 82)" } }, "progress-bar-maximum-width": { @@ -9205,7 +8171,7 @@ "value": "rgb(166, 92, 231)" }, "dark": { - "value": "rgb(157, 78, 228)" + "value": "rgb(161, 84, 229)" } }, "purple-900": { @@ -9219,22 +8185,12 @@ }, "purple-background-color-default": { "prop": "--spectrum-purple-background-color-default", - "ref": "var(--spectrum-purple-800)", + "ref": "var(--spectrum-purple-700)", "light": { "value": "rgb(154, 71, 226)" }, "dark": { - "value": "rgb(157, 78, 228)" - } - }, - "purple-subtle-background-color-default": { - "prop": "--spectrum-purple-subtle-background-color-default", - "ref": "var(--spectrum-purple-300)", - "light": { - "value": "rgb(244, 235, 252)" - }, - "dark": { - "value": "rgb(64, 0, 122)" + "value": "rgb(148, 62, 224)" } }, "purple-visual-color": { @@ -9473,7 +8429,7 @@ "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(230, 54, 35)" } }, "red-900": { @@ -9487,22 +8443,12 @@ }, "red-background-color-default": { "prop": "--spectrum-red-background-color-default", - "ref": "var(--spectrum-red-800)", + "ref": "var(--spectrum-red-700)", "light": { "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(223, 52, 34)" - } - }, - "red-subtle-background-color-default": { - "prop": "--spectrum-red-subtle-background-color-default", - "ref": "var(--spectrum-red-300)", - "light": { - "value": "rgb(255, 235, 232)" - }, - "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(205, 46, 29)" } }, "red-visual-color": { @@ -9655,7 +8601,7 @@ "value": "rgb(9, 144, 120)" }, "dark": { - "value": "rgb(8, 134, 112)" + "value": "rgb(8, 138, 116)" } }, "seafoam-900": { @@ -9669,22 +8615,12 @@ }, "seafoam-background-color-default": { "prop": "--spectrum-seafoam-background-color-default", - "ref": "var(--spectrum-seafoam-800)", + "ref": "var(--spectrum-seafoam-700)", "light": { "value": "rgb(7, 129, 109)" }, "dark": { - "value": "rgb(8, 134, 112)" - } - }, - "seafoam-subtle-background-color-default": { - "prop": "--spectrum-seafoam-subtle-background-color-default", - "ref": "var(--spectrum-seafoam-300)", - "light": { - "value": "rgb(211, 246, 234)" - }, - "dark": { - "value": "rgb(0, 50, 44)" + "value": "rgb(6, 122, 103)" } }, "seafoam-visual-color": { @@ -9694,7 +8630,7 @@ "value": "rgb(11, 162, 134)" }, "dark": { - "value": "rgb(8, 134, 112)" + "value": "rgb(8, 138, 116)" } }, "search-field-minimum-width-multiplier": { @@ -9759,22 +8695,13 @@ "value": "10px" } }, - "side-navigation-header-to-item": { - "prop": "--spectrum-side-navigation-header-to-item", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } - }, "side-navigation-item-to-header": { "prop": "--spectrum-side-navigation-item-to-header", "desktop": { - "value": "24px" + "value": "16px" }, "mobile": { - "value": "30px" + "value": "20px" } }, "side-navigation-item-to-item": { @@ -9978,7 +8905,7 @@ "silver-800": { "prop": "--spectrum-silver-800", "dark": { - "value": "rgb(118, 118, 118)" + "value": "rgb(123, 123, 123)" }, "light": { "value": "rgb(128, 128, 128)" @@ -9989,38 +8916,8 @@ "dark": { "value": "rgb(137, 137, 137)" }, - "light": { - "value": "rgb(114, 114, 114)" - } - }, - "silver-background-color-default": { - "prop": "--spectrum-silver-background-color-default", - "ref": "var(--spectrum-silver-800)", - "light": { - "value": "rgb(114, 114, 114)" - }, - "dark": { - "value": "rgb(118, 118, 118)" - } - }, - "silver-subtle-background-color-default": { - "prop": "--spectrum-silver-subtle-background-color-default", - "ref": "var(--spectrum-silver-300)", - "light": { - "value": "rgb(239, 239, 239)" - }, - "dark": { - "value": "rgb(44, 44, 44)" - } - }, - "silver-visual-color": { - "prop": "--spectrum-silver-visual-color", - "ref": "var(--spectrum-silver-900)", - "light": { - "value": "rgb(128, 128, 128)" - }, - "dark": { - "value": "rgb(137, 137, 137)" + "light": { + "value": "rgb(114, 114, 114)" } }, "slider-bottom-to-handle-extra-large": { @@ -10264,70 +9161,10 @@ "ref": "var(--spectrum-black)", "value": "rgb(0, 0, 0)" }, - "static-black-text-color": { - "prop": "--spectrum-static-black-text-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-track-color": { - "prop": "--spectrum-static-black-track-color", - "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } - }, - "static-black-track-indicator-color": { - "prop": "--spectrum-static-black-track-indicator-color", - "ref": "var(--spectrum-transparent-black-900)", - "light": { - "value": "rgba(0, 0, 0, 0.93)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" - } - }, "static-white-focus-indicator-color": { "prop": "--spectrum-static-white-focus-indicator-color", "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } - }, - "static-white-text-color": { - "prop": "--spectrum-static-white-text-color", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } - }, - "static-white-track-color": { - "prop": "--spectrum-static-white-track-color", - "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" - } - }, - "static-white-track-indicator-color": { - "prop": "--spectrum-static-white-track-indicator-color", - "ref": "var(--spectrum-transparent-white-900)", - "light": { - "value": "rgba(255, 255, 255, 0.94)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" - } + "value": "rgb(255, 255, 255)" }, "status-light-dot-size-extra-large": { "prop": "--spectrum-status-light-dot-size-extra-large", @@ -10358,7 +9195,12 @@ }, "status-light-dot-size-small": { "prop": "--spectrum-status-light-dot-size-small", - "value": "8px" + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "8px" + } }, "status-light-top-to-dot-extra-large": { "prop": "--spectrum-status-light-top-to-dot-extra-large", @@ -11114,7 +9956,12 @@ }, "table-edge-to-content": { "prop": "--spectrum-table-edge-to-content", - "value": "16px" + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "16px" + } }, "table-header-row-checkbox-to-top-extra-large": { "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", @@ -11652,12 +10499,12 @@ }, "table-selected-row-background-color": { "prop": "--spectrum-table-selected-row-background-color", - "ref": "var(--spectrum-informative-color-800)", + "ref": "var(--spectrum-informative-color-600)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(37, 73, 229)" } }, "table-selected-row-background-color-non-emphasized": { @@ -11909,55 +10756,46 @@ "text-to-visual-100": { "prop": "--spectrum-text-to-visual-100", "desktop": { - "value": "6px" + "value": "8px" }, "mobile": { - "value": "8px" + "value": "10px" } }, "text-to-visual-200": { "prop": "--spectrum-text-to-visual-200", "desktop": { - "value": "7px" + "value": "9px" }, "mobile": { - "value": "9px" + "value": "11px" } }, "text-to-visual-300": { "prop": "--spectrum-text-to-visual-300", "desktop": { - "value": "8px" - }, - "mobile": { "value": "10px" - } - }, - "text-to-visual-400": { - "prop": "--spectrum-text-to-visual-400", - "desktop": { - "value": "9px" }, "mobile": { - "value": "11px" + "value": "13px" } }, "text-to-visual-50": { "prop": "--spectrum-text-to-visual-50", "desktop": { - "value": "5px" + "value": "6px" }, "mobile": { - "value": "7px" + "value": "8px" } }, "text-to-visual-75": { "prop": "--spectrum-text-to-visual-75", "desktop": { - "value": "5px" + "value": "7px" }, "mobile": { - "value": "7px" + "value": "9px" } }, "text-underline-gap": { @@ -12095,16 +10933,6 @@ "value": "62px" } }, - "title-color": { - "prop": "--spectrum-title-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, - "dark": { - "value": "rgb(242, 242, 242)" - } - }, "toast-bottom-to-text": { "prop": "--spectrum-toast-bottom-to-text", "desktop": { @@ -12177,24 +11005,9 @@ "value": "10px" } }, - "track-color": { - "prop": "--spectrum-track-color", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - } - }, "transparent-black-100": { "prop": "--spectrum-transparent-black-100", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } + "value": "rgba(0, 0, 0, 0.09)" }, "transparent-black-1000": { "prop": "--spectrum-transparent-black-1000", @@ -12202,219 +11015,99 @@ }, "transparent-black-200": { "prop": "--spectrum-transparent-black-200", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } + "value": "rgba(0, 0, 0, 0.12)" }, "transparent-black-25": { "prop": "--spectrum-transparent-black-25", - "light": { - "value": "rgba(0, 0, 0, 0)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0)" - } + "value": "rgba(0, 0, 0, 0)" }, "transparent-black-300": { "prop": "--spectrum-transparent-black-300", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "transparent-black-400": { "prop": "--spectrum-transparent-black-400", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } + "value": "rgba(0, 0, 0, 0.22)" }, "transparent-black-50": { "prop": "--spectrum-transparent-black-50", - "light": { - "value": "rgba(0, 0, 0, 0.03)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.03)" - } + "value": "rgba(0, 0, 0, 0.03)" }, "transparent-black-500": { "prop": "--spectrum-transparent-black-500", - "light": { - "value": "rgba(0, 0, 0, 0.44)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.44)" - } + "value": "rgba(0, 0, 0, 0.44)" }, "transparent-black-600": { "prop": "--spectrum-transparent-black-600", - "light": { - "value": "rgba(0, 0, 0, 0.56)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.56)" - } + "value": "rgba(0, 0, 0, 0.56)" }, "transparent-black-700": { "prop": "--spectrum-transparent-black-700", - "light": { - "value": "rgba(0, 0, 0, 0.69)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.69)" - } + "value": "rgba(0, 0, 0, 0.69)" }, "transparent-black-75": { "prop": "--spectrum-transparent-black-75", - "light": { - "value": "rgba(0, 0, 0, 0.05)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.05)" - } + "value": "rgba(0, 0, 0, 0.05)" }, "transparent-black-800": { "prop": "--spectrum-transparent-black-800", - "light": { - "value": "rgba(0, 0, 0, 0.84)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.84)" - } + "value": "rgba(0, 0, 0, 0.84)" }, "transparent-black-900": { "prop": "--spectrum-transparent-black-900", - "light": { - "value": "rgba(0, 0, 0, 0.93)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" - } + "value": "rgba(0, 0, 0, 0.93)" }, "transparent-white-100": { "prop": "--spectrum-transparent-white-100", - "light": { - "value": "rgba(255, 255, 255, 0.11)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" - } + "value": "rgba(255, 255, 255, 0.11)" }, "transparent-white-1000": { "prop": "--spectrum-transparent-white-1000", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "transparent-white-200": { "prop": "--spectrum-transparent-white-200", - "light": { - "value": "rgba(255, 255, 255, 0.14)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.14)" - } + "value": "rgba(255, 255, 255, 0.14)" }, "transparent-white-25": { "prop": "--spectrum-transparent-white-25", - "light": { - "value": "rgba(255, 255, 255, 0)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0)" - } + "value": "rgba(255, 255, 255, 0)" }, "transparent-white-300": { "prop": "--spectrum-transparent-white-300", - "light": { - "value": "rgba(255, 255, 255, 0.17)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" - } + "value": "rgba(255, 255, 255, 0.17)" }, "transparent-white-400": { "prop": "--spectrum-transparent-white-400", - "light": { - "value": "rgba(255, 255, 255, 0.21)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.21)" - } + "value": "rgba(255, 255, 255, 0.21)" }, "transparent-white-50": { "prop": "--spectrum-transparent-white-50", - "light": { - "value": "rgba(255, 255, 255, 0.04)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.04)" - } + "value": "rgba(255, 255, 255, 0.04)" }, "transparent-white-500": { "prop": "--spectrum-transparent-white-500", - "light": { - "value": "rgba(255, 255, 255, 0.39)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.39)" - } + "value": "rgba(255, 255, 255, 0.39)" }, "transparent-white-600": { "prop": "--spectrum-transparent-white-600", - "light": { - "value": "rgba(255, 255, 255, 0.51)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.51)" - } + "value": "rgba(255, 255, 255, 0.51)" }, "transparent-white-700": { "prop": "--spectrum-transparent-white-700", - "light": { - "value": "rgba(255, 255, 255, 0.66)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.66)" - } + "value": "rgba(255, 255, 255, 0.66)" }, "transparent-white-75": { "prop": "--spectrum-transparent-white-75", - "light": { - "value": "rgba(255, 255, 255, 0.07)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.07)" - } + "value": "rgba(255, 255, 255, 0.07)" }, "transparent-white-800": { "prop": "--spectrum-transparent-white-800", - "light": { - "value": "rgba(255, 255, 255, 0.85)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.85)" - } + "value": "rgba(255, 255, 255, 0.85)" }, "transparent-white-900": { "prop": "--spectrum-transparent-white-900", - "light": { - "value": "rgba(255, 255, 255, 0.94)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" - } + "value": "rgba(255, 255, 255, 0.94)" }, "tray-top-to-content-area": { "prop": "--spectrum-tray-top-to-content-area", @@ -12554,7 +11247,7 @@ "turquoise-800": { "prop": "--spectrum-turquoise-800", "dark": { - "value": "rgb(9, 131, 142)" + "value": "rgb(9, 135, 147)" }, "light": { "value": "rgb(10, 141, 153)" @@ -12569,70 +11262,35 @@ "value": "rgb(8, 126, 137)" } }, - "turquoise-background-color-default": { - "prop": "--spectrum-turquoise-background-color-default", - "ref": "var(--spectrum-turquoise-800)", - "light": { - "value": "rgb(8, 126, 137)" - }, - "dark": { - "value": "rgb(9, 131, 142)" - } - }, - "turquoise-subtle-background-color-default": { - "prop": "--spectrum-turquoise-subtle-background-color-default", - "ref": "var(--spectrum-turquoise-300)", - "light": { - "value": "rgb(209, 245, 245)" - }, - "dark": { - "value": "rgb(0, 49, 54)" - } - }, - "turquoise-visual-color": { - "prop": "--spectrum-turquoise-visual-color", - "ref": "var(--spectrum-turquoise-900)", - "light": { - "value": "rgb(10, 141, 153)" - }, - "dark": { - "value": "rgb(11, 151, 164)" - } - }, "white": { "prop": "--spectrum-white", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "workflow-icon-size-100": { "prop": "--spectrum-workflow-icon-size-100", "desktop": { - "value": "20px" + "value": "18px" }, "mobile": { - "value": "24px" + "value": "22px" } }, "workflow-icon-size-200": { "prop": "--spectrum-workflow-icon-size-200", "desktop": { - "value": "22px" + "value": "20px" }, "mobile": { - "value": "28px" + "value": "24px" } }, "workflow-icon-size-300": { "prop": "--spectrum-workflow-icon-size-300", "desktop": { - "value": "26px" + "value": "22px" }, "mobile": { - "value": "30px" + "value": "28px" } }, "workflow-icon-size-50": { @@ -12641,7 +11299,7 @@ "value": "14px" }, "mobile": { - "value": "16px" + "value": "18px" } }, "workflow-icon-size-75": { @@ -12650,7 +11308,7 @@ "value": "16px" }, "mobile": { - "value": "18px" + "value": "20px" } }, "yellow-100": { @@ -12785,7 +11443,7 @@ "value": "rgb(175, 116, 0)" }, "dark": { - "value": "rgb(164, 106, 0)" + "value": "rgb(169, 110, 0)" } }, "yellow-900": { @@ -12799,22 +11457,12 @@ }, "yellow-background-color-default": { "prop": "--spectrum-yellow-background-color-default", - "ref": "var(--spectrum-yellow-1100)", + "ref": "var(--spectrum-yellow-1000)", "light": { "value": "rgb(245, 199, 0)" }, "dark": { - "value": "rgb(218, 159, 0)" - } - }, - "yellow-subtle-background-color-default": { - "prop": "--spectrum-yellow-subtle-background-color-default", - "ref": "var(--spectrum-yellow-300)", - "light": { - "value": "rgb(255, 241, 151)" - }, - "dark": { - "value": "rgb(61, 39, 0)" + "value": "rgb(203, 141, 0)" } }, "yellow-visual-color": { diff --git a/tokens/package.json b/tokens/package.json index 7488f81265e..f11ebeb4a69 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241121221506", + "@adobe/spectrum-tokens": "13.0.0-beta.5", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/yarn.lock b/yarn.lock index b9528abce4a..22f5f17251d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506": - version: 0.0.0-s2-foundations-20241121221506 - resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506" - checksum: 10c0/64664995ca98170c2a089ecb215103c77bb5a3ff49848371e2dfc301dc3ca30ef4dafae3d44cda82a1609d877e54608cc2e591edef37095ee646c6cf185143ee +"@adobe/spectrum-tokens@npm:13.0.0-beta.5": + version: 13.0.0-beta.5 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.5" + checksum: 10c0/4b2d8540c552cccbfe6cd48e9e4d6019d0728d1c6108a4d711d15aa443807572978c79aac8db5810d5dc886ec4194e1a7abd6144bfc3183866018ca6e75c3d00 languageName: node linkType: hard @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241121221506" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.5" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From b434a2cf956883fe15a7ebd0931bc2b88f42aa79 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Mon, 8 Jan 2024 16:14:51 -0500 Subject: [PATCH 014/103] feat(tokens): use 13.0.0-beta.8 --- tokens/dist/json/tokens.json | 635 +++++++++++++++++++++++++++++++++-- tokens/package.json | 2 +- yarn.lock | 10 +- 3 files changed, 615 insertions(+), 32 deletions(-) diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 0dcdea3f595..65999f35bcf 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -708,6 +708,105 @@ "prop": "--spectrum-android-elevation", "value": "2dp" }, + "arrow-icon-size-100": { + "prop": "--spectrum-arrow-icon-size-100", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "arrow-icon-size-200": { + "prop": "--spectrum-arrow-icon-size-200", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "arrow-icon-size-300": { + "prop": "--spectrum-arrow-icon-size-300", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "arrow-icon-size-400": { + "prop": "--spectrum-arrow-icon-size-400", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "18px" + } + }, + "arrow-icon-size-500": { + "prop": "--spectrum-arrow-icon-size-500", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "arrow-icon-size-600": { + "prop": "--spectrum-arrow-icon-size-600", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "arrow-icon-size-75": { + "prop": "--spectrum-arrow-icon-size-75", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "asterisk-icon-size-100": { + "prop": "--spectrum-asterisk-icon-size-100", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "asterisk-icon-size-200": { + "prop": "--spectrum-asterisk-icon-size-200", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "asterisk-icon-size-300": { + "prop": "--spectrum-asterisk-icon-size-300", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "asterisk-icon-size-75": { + "prop": "--spectrum-asterisk-icon-size-75", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "8px" + } + }, "avatar-opacity-disabled": { "prop": "--spectrum-avatar-opacity-disabled", "ref": "var(--spectrum-opacity-disabled)", @@ -798,12 +897,22 @@ "prop": "--spectrum-background-base-color", "ref": "var(--spectrum-gray-25)", "light": { - "value": "rgb(233, 233, 233)" + "value": "rgb(255, 255, 255)" }, "dark": { "value": "rgb(17, 17, 17)" } }, + "background-elevated-color": { + "prop": "--spectrum-background-elevated-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(34, 34, 34)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, "background-layer-1-color": { "prop": "--spectrum-background-layer-1-color", "ref": "var(--spectrum-gray-50)", @@ -840,6 +949,16 @@ "prop": "--spectrum-background-opacity-key-focus", "value": "0.1" }, + "background-pasteboard-color": { + "prop": "--spectrum-background-pasteboard-color", + "ref": "var(--spectrum-gray-100)", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(233, 233, 233)" + } + }, "black": { "prop": "--spectrum-black", "value": "rgb(0, 0, 0)" @@ -2038,6 +2157,294 @@ "value": "7px" } }, + "checkmark-icon-size-100": { + "prop": "--spectrum-checkmark-icon-size-100", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "checkmark-icon-size-200": { + "prop": "--spectrum-checkmark-icon-size-200", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "checkmark-icon-size-300": { + "prop": "--spectrum-checkmark-icon-size-300", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "checkmark-icon-size-400": { + "prop": "--spectrum-checkmark-icon-size-400", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "18px" + } + }, + "checkmark-icon-size-50": { + "prop": "--spectrum-checkmark-icon-size-50", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "checkmark-icon-size-500": { + "prop": "--spectrum-checkmark-icon-size-500", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "checkmark-icon-size-600": { + "prop": "--spectrum-checkmark-icon-size-600", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "24px" + } + }, + "checkmark-icon-size-75": { + "prop": "--spectrum-checkmark-icon-size-75", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "chevron-icon-size-100": { + "prop": "--spectrum-chevron-icon-size-100", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "chevron-icon-size-200": { + "prop": "--spectrum-chevron-icon-size-200", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "chevron-icon-size-300": { + "prop": "--spectrum-chevron-icon-size-300", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "chevron-icon-size-400": { + "prop": "--spectrum-chevron-icon-size-400", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "18px" + } + }, + "chevron-icon-size-50": { + "prop": "--spectrum-chevron-icon-size-50", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "chevron-icon-size-500": { + "prop": "--spectrum-chevron-icon-size-500", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "chevron-icon-size-600": { + "prop": "--spectrum-chevron-icon-size-600", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "24px" + } + }, + "chevron-icon-size-75": { + "prop": "--spectrum-chevron-icon-size-75", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "cinnamon-100": { + "prop": "--spectrum-cinnamon-100", + "dark": { + "value": "rgb(48, 17, 4)" + }, + "light": { + "value": "rgb(253, 247, 243)" + } + }, + "cinnamon-1000": { + "prop": "--spectrum-cinnamon-1000", + "dark": { + "value": "rgb(206, 136, 99)" + }, + "light": { + "value": "rgb(147, 77, 43)" + } + }, + "cinnamon-1100": { + "prop": "--spectrum-cinnamon-1100", + "dark": { + "value": "rgb(220, 154, 118)" + }, + "light": { + "value": "rgb(128, 62, 32)" + } + }, + "cinnamon-1200": { + "prop": "--spectrum-cinnamon-1200", + "dark": { + "value": "rgb(232, 179, 149)" + }, + "light": { + "value": "rgb(110, 48, 21)" + } + }, + "cinnamon-1300": { + "prop": "--spectrum-cinnamon-1300", + "dark": { + "value": "rgb(239, 203, 183)" + }, + "light": { + "value": "rgb(92, 35, 11)" + } + }, + "cinnamon-1400": { + "prop": "--spectrum-cinnamon-1400", + "dark": { + "value": "rgb(246, 225, 214)" + }, + "light": { + "value": "rgb(72, 25, 6)" + } + }, + "cinnamon-1500": { + "prop": "--spectrum-cinnamon-1500", + "dark": { + "value": "rgb(252, 244, 239)" + }, + "light": { + "value": "rgb(52, 18, 4)" + } + }, + "cinnamon-1600": { + "prop": "--spectrum-cinnamon-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(24, 8, 2)" + } + }, + "cinnamon-200": { + "prop": "--spectrum-cinnamon-200", + "dark": { + "value": "rgb(59, 21, 5)" + }, + "light": { + "value": "rgb(249, 236, 229)" + } + }, + "cinnamon-300": { + "prop": "--spectrum-cinnamon-300", + "dark": { + "value": "rgb(79, 28, 7)" + }, + "light": { + "value": "rgb(244, 218, 203)" + } + }, + "cinnamon-400": { + "prop": "--spectrum-cinnamon-400", + "dark": { + "value": "rgb(100, 41, 15)" + }, + "light": { + "value": "rgb(237, 196, 172)" + } + }, + "cinnamon-500": { + "prop": "--spectrum-cinnamon-500", + "dark": { + "value": "rgb(122, 57, 28)" + }, + "light": { + "value": "rgb(229, 170, 136)" + } + }, + "cinnamon-600": { + "prop": "--spectrum-cinnamon-600", + "dark": { + "value": "rgb(143, 74, 40)" + }, + "light": { + "value": "rgb(212, 145, 108)" + } + }, + "cinnamon-700": { + "prop": "--spectrum-cinnamon-700", + "dark": { + "value": "rgb(163, 88, 52)" + }, + "light": { + "value": "rgb(198, 126, 88)" + } + }, + "cinnamon-800": { + "prop": "--spectrum-cinnamon-800", + "dark": { + "value": "rgb(179, 103, 64)" + }, + "light": { + "value": "rgb(184, 109, 70)" + } + }, + "cinnamon-900": { + "prop": "--spectrum-cinnamon-900", + "dark": { + "value": "rgb(192, 119, 80)" + }, + "light": { + "value": "rgb(170, 94, 56)" + } + }, "cjk-font-family": { "prop": "--spectrum-cjk-font-family", "value": "Adobe Clean Han" @@ -2434,10 +2841,8 @@ }, "color-handle-outer-border-color": { "prop": "--spectrum-color-handle-outer-border-color", - "spectrum": { - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - } + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" }, "color-handle-outer-border-opacity": { "prop": "--spectrum-color-handle-outer-border-opacity", @@ -3099,12 +3504,12 @@ }, "contextual-help-body-size": { "prop": "--spectrum-contextual-help-body-size", - "ref": "var(--spectrum-heading-size-xs)", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "18px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "15px" } }, "contextual-help-minimum-width": { @@ -3148,6 +3553,105 @@ "value": "2px" } }, + "corner-triangle-icon-size-100": { + "prop": "--spectrum-corner-triangle-icon-size-100", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "7px" + } + }, + "corner-triangle-icon-size-200": { + "prop": "--spectrum-corner-triangle-icon-size-200", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "corner-triangle-icon-size-300": { + "prop": "--spectrum-corner-triangle-icon-size-300", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "8px" + } + }, + "corner-triangle-icon-size-75": { + "prop": "--spectrum-corner-triangle-icon-size-75", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, + "cross-icon-size-100": { + "prop": "--spectrum-cross-icon-size-100", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "cross-icon-size-200": { + "prop": "--spectrum-cross-icon-size-200", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "cross-icon-size-300": { + "prop": "--spectrum-cross-icon-size-300", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "cross-icon-size-400": { + "prop": "--spectrum-cross-icon-size-400", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "cross-icon-size-500": { + "prop": "--spectrum-cross-icon-size-500", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "cross-icon-size-600": { + "prop": "--spectrum-cross-icon-size-600", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "18px" + } + }, + "cross-icon-size-75": { + "prop": "--spectrum-cross-icon-size-75", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "cyan-100": { "prop": "--spectrum-cyan-100", "light": { @@ -3312,6 +3816,78 @@ "value": "rgb(24, 142, 220)" } }, + "dash-icon-size-100": { + "prop": "--spectrum-dash-icon-size-100", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "dash-icon-size-200": { + "prop": "--spectrum-dash-icon-size-200", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "dash-icon-size-300": { + "prop": "--spectrum-dash-icon-size-300", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "dash-icon-size-400": { + "prop": "--spectrum-dash-icon-size-400", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "dash-icon-size-50": { + "prop": "--spectrum-dash-icon-size-50", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "dash-icon-size-500": { + "prop": "--spectrum-dash-icon-size-500", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "dash-icon-size-600": { + "prop": "--spectrum-dash-icon-size-600", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "dash-icon-size-75": { + "prop": "--spectrum-dash-icon-size-75", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "default-font-family": { "prop": "--spectrum-default-font-family", "ref": "var(--spectrum-sans-serif-font-family)", @@ -6545,37 +7121,37 @@ "navigational-indicator-top-to-back-icon-extra-large": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", "desktop": { - "value": "17px" + "value": "15px" }, "mobile": { - "value": "22px" + "value": "19px" } }, "navigational-indicator-top-to-back-icon-large": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "16px" } }, "navigational-indicator-top-to-back-icon-medium": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", "desktop": { - "value": "11px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "12px" } }, "navigational-indicator-top-to-back-icon-small": { "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "7px" } }, "negative-background-color-default": { @@ -7130,12 +7706,12 @@ }, "notice-background-color-default": { "prop": "--spectrum-notice-background-color-default", - "ref": "var(--spectrum-notice-color-800)", - "light": { - "value": "rgb(212, 91, 0)" - }, + "ref": "var(--spectrum-notice-color-600)", "dark": { "value": "rgb(205, 86, 0)" + }, + "light": { + "value": "rgb(252, 125, 0)" } }, "notice-color-100": { @@ -7516,10 +8092,8 @@ }, "picker-border-width": { "prop": "--spectrum-picker-border-width", - "spectrum": { - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - } + "ref": "var(--spectrum-border-width-100)", + "value": "1px" }, "picker-end-edge-to-disclosure-icon-quiet": { "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", @@ -8695,13 +9269,22 @@ "value": "10px" } }, + "side-navigation-header-to-item": { + "prop": "--spectrum-side-navigation-header-to-item", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "side-navigation-item-to-header": { "prop": "--spectrum-side-navigation-item-to-header", "desktop": { - "value": "16px" + "value": "24px" }, "mobile": { - "value": "20px" + "value": "30px" } }, "side-navigation-item-to-item": { diff --git a/tokens/package.json b/tokens/package.json index f11ebeb4a69..4d13da7a47c 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.5", + "@adobe/spectrum-tokens": "13.0.0-beta.8", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 22f5f17251d..1965dc93a3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.5": - version: 13.0.0-beta.5 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.5" - checksum: 10c0/4b2d8540c552cccbfe6cd48e9e4d6019d0728d1c6108a4d711d15aa443807572978c79aac8db5810d5dc886ec4194e1a7abd6144bfc3183866018ca6e75c3d00 +"@adobe/spectrum-tokens@npm:13.0.0-beta.8": + version: 13.0.0-beta.8 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.8" + checksum: 10c0/a259d380a4b203f57bb6b84ec2fc53dbee53fa1ebff23c4cc400254fe9dd8aace2f016b40b0748c1937fa60eccdfc26db91786e64a8f12485063595266461205 languageName: node linkType: hard @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.5" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.8" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From 33af66e94e05164f66dfc941653de83b3f55be15 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Thu, 11 Jan 2024 09:30:35 -0500 Subject: [PATCH 015/103] feat(tokens): use 13.0.0-beta.9 --- tokens/dist/json/tokens.json | 64 +++++++++++++++++++++--------------- tokens/package.json | 2 +- yarn.lock | 10 +++--- 3 files changed, 44 insertions(+), 32 deletions(-) diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 65999f35bcf..7dad249ec8f 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -3376,6 +3376,18 @@ "value": "5px" } }, + "component-size-difference-down": { + "prop": "--spectrum-component-size-difference-down", + "value": "-2px" + }, + "component-size-minimum-perspective-down": { + "prop": "--spectrum-component-size-minimum-perspective-down", + "value": "24px" + }, + "component-size-width-ratio-down": { + "prop": "--spectrum-component-size-width-ratio-down", + "value": "0.3333" + }, "component-to-menu-extra-large": { "prop": "--spectrum-component-to-menu-extra-large", "desktop": { @@ -3460,28 +3472,28 @@ "component-top-to-workflow-icon-100": { "prop": "--spectrum-component-top-to-workflow-icon-100", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "8px" } }, "component-top-to-workflow-icon-200": { "prop": "--spectrum-component-top-to-workflow-icon-200", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-top-to-workflow-icon-300": { "prop": "--spectrum-component-top-to-workflow-icon-300", "desktop": { - "value": "13px" + "value": "11px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "component-top-to-workflow-icon-50": { @@ -3490,7 +3502,7 @@ "value": "3px" }, "mobile": { - "value": "4px" + "value": "5px" } }, "component-top-to-workflow-icon-75": { @@ -3499,7 +3511,7 @@ "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" } }, "contextual-help-body-size": { @@ -11339,46 +11351,46 @@ "text-to-visual-100": { "prop": "--spectrum-text-to-visual-100", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "10px" + "value": "8px" } }, "text-to-visual-200": { "prop": "--spectrum-text-to-visual-200", "desktop": { - "value": "9px" + "value": "7px" }, "mobile": { - "value": "11px" + "value": "9px" } }, "text-to-visual-300": { "prop": "--spectrum-text-to-visual-300", "desktop": { - "value": "10px" + "value": "8px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "text-to-visual-50": { "prop": "--spectrum-text-to-visual-50", "desktop": { - "value": "6px" + "value": "5px" }, "mobile": { - "value": "8px" + "value": "7px" } }, "text-to-visual-75": { "prop": "--spectrum-text-to-visual-75", "desktop": { - "value": "7px" + "value": "5px" }, "mobile": { - "value": "9px" + "value": "7px" } }, "text-underline-gap": { @@ -11852,28 +11864,28 @@ "workflow-icon-size-100": { "prop": "--spectrum-workflow-icon-size-100", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "24px" } }, "workflow-icon-size-200": { "prop": "--spectrum-workflow-icon-size-200", "desktop": { - "value": "20px" + "value": "22px" }, "mobile": { - "value": "24px" + "value": "28px" } }, "workflow-icon-size-300": { "prop": "--spectrum-workflow-icon-size-300", "desktop": { - "value": "22px" + "value": "26px" }, "mobile": { - "value": "28px" + "value": "30px" } }, "workflow-icon-size-50": { @@ -11882,7 +11894,7 @@ "value": "14px" }, "mobile": { - "value": "18px" + "value": "16px" } }, "workflow-icon-size-75": { @@ -11891,7 +11903,7 @@ "value": "16px" }, "mobile": { - "value": "20px" + "value": "18px" } }, "yellow-100": { diff --git a/tokens/package.json b/tokens/package.json index 4d13da7a47c..8bc149b2d0e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.8", + "@adobe/spectrum-tokens": "13.0.0-beta.9", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 1965dc93a3f..5e8af5aa0ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.8": - version: 13.0.0-beta.8 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.8" - checksum: 10c0/a259d380a4b203f57bb6b84ec2fc53dbee53fa1ebff23c4cc400254fe9dd8aace2f016b40b0748c1937fa60eccdfc26db91786e64a8f12485063595266461205 +"@adobe/spectrum-tokens@npm:13.0.0-beta.9": + version: 13.0.0-beta.9 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.9" + checksum: 10c0/3928c7a7ca8e6f8f307d0c5eee6e95093771625b1e18465c4fe7b08997cff0a97cf65b5329ee8f1f3a03b2534c704a8cd06bf102a23613057544039c90592078 languageName: node linkType: hard @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.8" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.9" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From deb2043ddb6e273dea54fceaa1ee87355cb258a2 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 2 Feb 2024 11:26:25 -0500 Subject: [PATCH 016/103] feat(actiongroup)!: migrate to S2 (#2453) BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties --- components/actiongroup/dist/metadata.json | 15 +--- components/actiongroup/index.css | 69 ++++++------------- .../stories/actiongroup.stories.js | 9 +++ components/actiongroup/themes/express.css | 26 ------- .../actiongroup/themes/spectrum-two.css | 22 ------ components/actiongroup/themes/spectrum.css | 16 ----- 6 files changed, 33 insertions(+), 124 deletions(-) delete mode 100644 components/actiongroup/themes/express.css delete mode 100644 components/actiongroup/themes/spectrum-two.css delete mode 100644 components/actiongroup/themes/spectrum.css diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c78e7d30965..c4f40444893 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,12 +7,10 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", @@ -31,33 +29,24 @@ "modifiers": [ "--mod-actiongroup-border-radius", "--mod-actiongroup-border-radius-reset", - "--mod-actiongroup-button-spacing-reset", "--mod-actiongroup-gap-size-compact", - "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ "--spectrum-actiongroup-border-radius", "--spectrum-actiongroup-border-radius-reset", - "--spectrum-actiongroup-button-spacing-reset", "--spectrum-actiongroup-gap-size-compact", - "--spectrum-actiongroup-horizontal-spacing-compact", "--spectrum-actiongroup-horizontal-spacing-regular", - "--spectrum-actiongroup-vertical-spacing-compact", "--spectrum-actiongroup-vertical-spacing-regular" ], "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", + "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-action-group-gap-size-compact", - "--system-action-group-horizontal-spacing-compact", - "--system-action-group-vertical-spacing-compact" - ], + "system-theme": [], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index bbd26cb0f65..8eb51ff0eae 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -11,12 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionGroup { - --spectrum-actiongroup-button-spacing-reset: 0; - --spectrum-actiongroup-border-radius-reset: 0; - --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); + --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, @@ -75,28 +73,17 @@ /* @passthrough -- Action button styling */ --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - 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 { - /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; + 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-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 { - /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; + &:last-child { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; - 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)); - } + 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)); + } &.is-selected { z-index: 1; @@ -127,30 +114,18 @@ /* @passthrough -- Action button styling */ --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; - 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)); - } + 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)); + } - & + .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 { + /* Action button passthrough styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - &:last-child { - /* @passthrough -- Action button styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-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)); - 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)); - } - } + 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)); + } + } } .spectrum-ActionGroup--justified .spectrum-ActionGroup-item { diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index a83857b9e54..7a88e3db4e7 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -279,6 +279,15 @@ JustifiedIconOnlyCompact.parameters = { chromatic: { disableSnapshot: true }, }; +export const Quiet = Template.bind({}); +Quiet.tags = ["!dev"]; +Quiet.args = { + areQuiet: true, +}; +Quiet.parameters = { + chromatic: { disableSnapshot: true }, +}; + /** * When space is limited in an action group, there are 2 options for the group's overflow behavior: wrap or collapse. By default, an action group is set to wrap, meaning that the action buttons inside the group wrap to form another line. Alternatively, an action group can be set to collapse inside a **More (...)** action button. */ diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css deleted file mode 100644 index 3fd8de9cdbb..00000000000 --- a/components/actiongroup/themes/express.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } -} diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css deleted file mode 100644 index b25c0f945b2..00000000000 --- a/components/actiongroup/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } -} diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/actiongroup/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; From 651fc8a035b412ef00d24034cc689535ad7d8aab Mon Sep 17 00:00:00 2001 From: Jennifer Grenier Diaz Date: Fri, 2 Feb 2024 10:07:46 -0700 Subject: [PATCH 017/103] feat(buttongroup,page)!: migrate to S2 (#2457) BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes --- components/buttongroup/dist/metadata.json | 10 ++++---- components/buttongroup/index.css | 23 ++++++++----------- .../stories/buttongroup.stories.js | 8 +++---- components/page/dist/metadata.json | 5 +--- components/page/index.css | 5 ++-- components/page/themes/spectrum-two.css | 19 --------------- components/page/themes/spectrum.css | 23 ------------------- 7 files changed, 21 insertions(+), 72 deletions(-) delete mode 100644 components/page/themes/spectrum-two.css delete mode 100644 components/page/themes/spectrum.css diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e39..523a464c6df 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -2,15 +2,13 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ButtonGroup", - ".spectrum-ButtonGroup-item", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", - ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" + ".spectrum-ButtonGroup--sizeS", + ".spectrum-ButtonGroup--vertical", + ".spectrum-ButtonGroup-item" ], "modifiers": [ "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-buttongroup-spacing-horizontal", - "--mod-buttongroup-spacing-vertical" + "--mod-buttongroup-spacing" ], "component": [ "--spectrum-buttongroup-display", diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 05019824787..666239f687b 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -12,24 +12,19 @@ */ .spectrum-ButtonGroup { - /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300))); + --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-300)); --spectrum-buttongroup-display: flex; --spectrum-buttongroup-flex-direction: row; - --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal); - - &.spectrum-ButtonGroup--sizeS { - /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))); - } + --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, flex-start); +} - &.spectrum-ButtonGroup--vertical { - /* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */ - --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical); +.spectrum-ButtonGroup--sizeS { + --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-200)); +} - --spectrum-buttongroup-display: inline-flex; - --spectrum-buttongroup-flex-direction: column; - } +.spectrum-ButtonGroup--vertical { + --spectrum-buttongroup-display: inline-flex; + --spectrum-buttongroup-flex-direction: column; } .spectrum-ButtonGroup { diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index ba7e125de76..8845fe12ec1 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -74,7 +74,7 @@ Default.tags = ["!autodocs"]; // ********* DOCS ONLY ********* // /** - * Default spacing for Medium, Large, and Extra Large t-shirt sizes. + * Default horizontal spacing for when using medium, large, and extra large buttons. */ export const Horizontal = Template.bind({}); Horizontal.tags = ["!dev"]; @@ -87,7 +87,7 @@ Horizontal.parameters = { }; /** - * Spacing for the Small t-shirt size. + * Horizontal spacing for the small t-shirt size. Should be used with small buttons. */ export const HorizontalSmall = Template.bind({}); HorizontalSmall.tags = ["!dev"]; @@ -102,7 +102,7 @@ HorizontalSmall.parameters = { }; /** - * Default spacing for Medium, Large, and Extra Large t-shirt sizes + * Default vertical spacing for when using medium, large, and extra large buttons. */ export const Vertical = ButtonGroup.bind({}); Vertical.tags = ["!dev"]; @@ -117,7 +117,7 @@ Vertical.parameters = { }; /** - * Spacing for the Small t-shirt size. + * Vertical spacing for the small t-shirt size. Should be used with small buttons. */ export const VerticalSmall = Template.bind({}); VerticalSmall.tags = ["!dev"]; diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index cb8c8163de8..ad01f46d959 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -7,10 +7,7 @@ "--spectrum-page-content-tap-highlight" ], "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [ - "--system-root-page-background-color", - "--system-root-page-content-tap-highlight" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/index.css b/components/page/index.css index 7a29f49a2e2..6b50597aa05 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - :root { + --spectrum-page-background-color: var(--spectrum-gray-75); + --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); + background: var(--mod-page-background, var(--spectrum-page-background-color)); /* The highlight that appears over a link while it's being tapped */ diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css deleted file mode 100644 index 896ecf506cc..00000000000 --- a/components/page/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-75); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); - } -} diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css deleted file mode 100644 index f6c120c2d43..00000000000 --- a/components/page/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-100); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100); - } -} From 06576bfc4e1eecf906accd28cec237223eb1d978 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Fri, 2 Feb 2024 15:02:10 -0500 Subject: [PATCH 018/103] feat(tokens)!: use 13.0.0-beta.13 BREAKING CHANGE: uses Spectrum 2 tokens --- tokens/dist/json/tokens.json | 300 +++++++++++++++++++++++++++++++---- tokens/package.json | 2 +- yarn.lock | 10 +- 3 files changed, 275 insertions(+), 37 deletions(-) diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 7dad249ec8f..4353dee5736 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -2746,7 +2746,7 @@ "value": "4px" }, "mobile": { - "value": "5px" + "value": "4px" } }, "color-area-border-width": { @@ -3163,28 +3163,28 @@ "component-edge-to-visual-only-100": { "prop": "--spectrum-component-edge-to-visual-only-100", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "8px" } }, "component-edge-to-visual-only-200": { "prop": "--spectrum-component-edge-to-visual-only-200", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-edge-to-visual-only-300": { "prop": "--spectrum-component-edge-to-visual-only-300", "desktop": { - "value": "13px" + "value": "11px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "component-edge-to-visual-only-50": { @@ -3193,7 +3193,7 @@ "value": "3px" }, "mobile": { - "value": "4px" + "value": "5px" } }, "component-edge-to-visual-only-75": { @@ -3202,7 +3202,7 @@ "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" } }, "component-height-100": { @@ -3538,20 +3538,83 @@ "value": "17px" } }, + "corner-radius-0": { + "prop": "--spectrum-corner-radius-0", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } + }, "corner-radius-100": { "prop": "--spectrum-corner-radius-100", "desktop": { "value": "4px" }, "mobile": { - "value": "5px" + "value": "4px" + } + }, + "corner-radius-1000": { + "prop": "--spectrum-corner-radius-1000", + "desktop": { + "value": "0.5" + }, + "mobile": { + "value": "0.5" } }, "corner-radius-200": { "prop": "--spectrum-corner-radius-200", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "5px" + } + }, + "corner-radius-300": { + "prop": "--spectrum-corner-radius-300", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "6px" + } + }, + "corner-radius-400": { + "prop": "--spectrum-corner-radius-400", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "7px" + } + }, + "corner-radius-500": { + "prop": "--spectrum-corner-radius-500", "desktop": { "value": "8px" }, + "mobile": { + "value": "8px" + } + }, + "corner-radius-600": { + "prop": "--spectrum-corner-radius-600", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "9px" + } + }, + "corner-radius-700": { + "prop": "--spectrum-corner-radius-700", + "desktop": { + "value": "10px" + }, "mobile": { "value": "10px" } @@ -3559,10 +3622,169 @@ "corner-radius-75": { "prop": "--spectrum-corner-radius-75", "desktop": { - "value": "2px" + "value": "3px" }, "mobile": { - "value": "2px" + "value": "3px" + } + }, + "corner-radius-800": { + "prop": "--spectrum-corner-radius-800", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "16px" + } + }, + "corner-radius-extra-large-default": { + "prop": "--spectrum-corner-radius-extra-large-default", + "ref": "var(--spectrum-corner-radius-800)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "16px" + } + }, + "corner-radius-full": { + "prop": "--spectrum-corner-radius-full", + "ref": "var(--spectrum-corner-radius-1000)", + "desktop": { + "value": "0.5" + }, + "mobile": { + "value": "0.5" + } + }, + "corner-radius-large-default": { + "prop": "--spectrum-corner-radius-large-default", + "ref": "var(--spectrum-corner-radius-700)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "10px" + } + }, + "corner-radius-medium-default": { + "prop": "--spectrum-corner-radius-medium-default", + "ref": "var(--spectrum-corner-radius-500)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "8px" + } + }, + "corner-radius-medium-size-extra-large": { + "prop": "--spectrum-corner-radius-medium-size-extra-large", + "ref": "var(--spectrum-corner-radius-700)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "10px" + } + }, + "corner-radius-medium-size-extra-small": { + "prop": "--spectrum-corner-radius-medium-size-extra-small", + "ref": "var(--spectrum-corner-radius-300)", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "6px" + } + }, + "corner-radius-medium-size-large": { + "prop": "--spectrum-corner-radius-medium-size-large", + "ref": "var(--spectrum-corner-radius-600)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "9px" + } + }, + "corner-radius-medium-size-medium": { + "prop": "--spectrum-corner-radius-medium-size-medium", + "ref": "var(--spectrum-corner-radius-500)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "8px" + } + }, + "corner-radius-medium-size-small": { + "prop": "--spectrum-corner-radius-medium-size-small", + "ref": "var(--spectrum-corner-radius-400)", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "7px" + } + }, + "corner-radius-none": { + "prop": "--spectrum-corner-radius-none", + "ref": "var(--spectrum-corner-radius-0)", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "0px" + } + }, + "corner-radius-small-default": { + "prop": "--spectrum-corner-radius-small-default", + "ref": "var(--spectrum-corner-radius-100)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "4px" + } + }, + "corner-radius-small-size-extra-large": { + "prop": "--spectrum-corner-radius-small-size-extra-large", + "ref": "var(--spectrum-corner-radius-300)", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "6px" + } + }, + "corner-radius-small-size-large": { + "prop": "--spectrum-corner-radius-small-size-large", + "ref": "var(--spectrum-corner-radius-200)", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "5px" + } + }, + "corner-radius-small-size-medium": { + "prop": "--spectrum-corner-radius-small-size-medium", + "ref": "var(--spectrum-corner-radius-100)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "4px" + } + }, + "corner-radius-small-size-small": { + "prop": "--spectrum-corner-radius-small-size-small", + "ref": "var(--spectrum-corner-radius-75)", + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "3px" } }, "corner-triangle-icon-size-100": { @@ -4340,6 +4562,10 @@ "value": "9px" } }, + "divider-horizontal-minimum-width": { + "prop": "--spectrum-divider-horizontal-minimum-width", + "value": "200px" + }, "divider-thickness-large": { "prop": "--spectrum-divider-thickness-large", "value": "4px" @@ -4352,6 +4578,10 @@ "prop": "--spectrum-divider-thickness-small", "value": "1px" }, + "divider-vertical-minimum-height": { + "prop": "--spectrum-divider-vertical-minimum-height", + "value": "200px" + }, "drop-shadow-blur": { "prop": "--spectrum-drop-shadow-blur", "desktop": { @@ -4700,28 +4930,28 @@ "field-label-top-margin-extra-large": { "prop": "--spectrum-field-label-top-margin-extra-large", "desktop": { - "value": "5px" + "value": "0px" }, "mobile": { - "value": "6px" + "value": "0px" } }, "field-label-top-margin-large": { "prop": "--spectrum-field-label-top-margin-large", "desktop": { - "value": "5px" + "value": "0px" }, "mobile": { - "value": "6px" + "value": "0px" } }, "field-label-top-margin-medium": { "prop": "--spectrum-field-label-top-margin-medium", "desktop": { - "value": "4px" + "value": "0px" }, "mobile": { - "value": "5px" + "value": "0px" } }, "field-label-top-margin-small": { @@ -4736,7 +4966,7 @@ "field-label-top-to-asterisk-extra-large": { "prop": "--spectrum-field-label-top-to-asterisk-extra-large", "desktop": { - "value": "19px" + "value": "18px" }, "mobile": { "value": "24px" @@ -6199,38 +6429,42 @@ }, "help-text-top-to-workflow-icon-extra-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-extra-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-300)", "desktop": { - "value": "9px" + "value": "11px" }, "mobile": { - "value": "11px" + "value": "15px" } }, "help-text-top-to-workflow-icon-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-200)", "desktop": { - "value": "6px" + "value": "9px" }, "mobile": { - "value": "8px" + "value": "11px" } }, "help-text-top-to-workflow-icon-medium": { "prop": "--spectrum-help-text-top-to-workflow-icon-medium", + "ref": "var(--spectrum-component-top-to-workflow-icon-100)", "desktop": { - "value": "3px" + "value": "6px" }, "mobile": { - "value": "4px" + "value": "8px" } }, "help-text-top-to-workflow-icon-small": { "prop": "--spectrum-help-text-top-to-workflow-icon-small", + "ref": "var(--spectrum-component-top-to-workflow-icon-75)", "desktop": { "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" } }, "icon-color-blue-primary-default": { @@ -11372,7 +11606,7 @@ "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "text-to-visual-50": { @@ -11582,22 +11816,26 @@ "value": "200px" } }, + "tooltip-tip-corner-radius": { + "prop": "--spectrum-tooltip-tip-corner-radius", + "value": "1px" + }, "tooltip-tip-height": { "prop": "--spectrum-tooltip-tip-height", "desktop": { - "value": "4px" + "value": "5px" }, "mobile": { - "value": "5px" + "value": "6px" } }, "tooltip-tip-width": { "prop": "--spectrum-tooltip-tip-width", "desktop": { - "value": "8px" + "value": "10px" }, "mobile": { - "value": "10px" + "value": "12px" } }, "transparent-black-100": { diff --git a/tokens/package.json b/tokens/package.json index 8bc149b2d0e..494c3afebf2 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.9", + "@adobe/spectrum-tokens": "13.0.0-beta.13", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 5e8af5aa0ce..92555947508 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.9": - version: 13.0.0-beta.9 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.9" - checksum: 10c0/3928c7a7ca8e6f8f307d0c5eee6e95093771625b1e18465c4fe7b08997cff0a97cf65b5329ee8f1f3a03b2534c704a8cd06bf102a23613057544039c90592078 +"@adobe/spectrum-tokens@npm:13.0.0-beta.13": + version: 13.0.0-beta.13 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.13" + checksum: 10c0/ce025cf6dcc462a84b633c93cd168210ad53fbfb40c81846c2c610ef87ed358ac6f38c1b7264c9cbe0fd03c12626cfe00f381fe26f5d59df9e23fc1428ee3720 languageName: node linkType: hard @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.9" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.13" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From bac39e8a0cb61f5998f47f883f9c0175fc068b42 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Tue, 6 Feb 2024 10:19:38 -0500 Subject: [PATCH 019/103] chore(release): release - @spectrum-css/preview@7.4.2-next.0 - @spectrum-css/actiongroup@5.0.0-next.0 - @spectrum-css/buttongroup@7.0.0-next.0 - @spectrum-css/tokens@14.0.0-next.0 - @spectrum-css/bundle-builder@6.3.1-next.0 - @spectrum-css/component-builder-simple@5.0.1-next.0 - @spectrum-css/component-builder@6.0.1-next.0 --- .storybook/CHANGELOG.md | 34 ++++++++++++++--------------- components/actiongroup/CHANGELOG.md | 5 +++-- components/buttongroup/CHANGELOG.md | 33 ++++++++++++---------------- 3 files changed, 34 insertions(+), 38 deletions(-) diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md index 337efdc3ed8..efb36537a50 100644 --- a/.storybook/CHANGELOG.md +++ b/.storybook/CHANGELOG.md @@ -10,10 +10,10 @@ ### Patch Changes -- [#3528](https://github.com/adobe/spectrum-css/pull/3528) [`bee70fb`](https://github.com/adobe/spectrum-css/commit/bee70fbab5f12b49ce2611366b614c75277e0aa9) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3528](https://github.com/adobe/spectrum-css/pull/3528) [`bee70fb`](https://github.com/adobe/spectrum-css/commit/bee70fbab5f12b49ce2611366b614c75277e0aa9) Thanks [@castastrophe](https://github.com/castastrophe)! - Update fetchToken to use the exported JSON from @spectrum-css/tokens instead of @adobe/spectrum-tokens -- [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)! - Dependency alignment across the project. Set component peerDependencies as optional to reduce console warnings on downstream projects. @@ -33,23 +33,23 @@ ### Major Changes -- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6c19fcf`](https://github.com/adobe/spectrum-css/commit/6c19fcf3f0eda76987f338981ae20f9999febce6) Thanks [@pfulton](https://github.com/pfulton)! +- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`6c19fcf`](https://github.com/adobe/spectrum-css/commit/6c19fcf3f0eda76987f338981ae20f9999febce6) Thanks [@pfulton](https://github.com/pfulton)! #### Breaking change - This update removes the previously deprecated component documentation for **cyclebutton**, **quickaction**, **searchwithin**, and **splitbutton**. +This update removes the previously deprecated component documentation for **cyclebutton**, **quickaction**, **searchwithin**, and **splitbutton**. - To support the Spectrum 2 (S2) Foundations release, Storybook has been updated to toggle token packages to connect the following labels with their appropriate data sources: +To support the Spectrum 2 (S2) Foundations release, Storybook has been updated to toggle token packages to connect the following labels with their appropriate data sources: - - **Spectrum 1**: Flagged as the "legacy" context, this version is no longer the default for the component contexts. When selected, Storybook will load the `@spectrum-css/tokens` at release `v14.6.0` and attach the `.spectrum--legacy` class to the container. - - **Spectrum 2**: The new default context, this version represents the "S2 Foundations" release which serves as a bridge between S1 and S2. Components in this context are not fully S2 and will not exactly match specifications but they do reflect a significant move toward the S2 designs. For full details, see the token and component-level changelogs. - - **Express**: This now deprecated context is still rendered in Storybook by leveraging the `@spectrum-css/tokens` at release `v14.6.0`. Please note that Express and S1 will be removed in the next major release. +- **Spectrum 1**: Flagged as the "legacy" context, this version is no longer the default for the component contexts. When selected, Storybook will load the `@spectrum-css/tokens` at release `v14.6.0` and attach the `.spectrum--legacy` class to the container. +- **Spectrum 2**: The new default context, this version represents the "S2 Foundations" release which serves as a bridge between S1 and S2. Components in this context are not fully S2 and will not exactly match specifications but they do reflect a significant move toward the S2 designs. For full details, see the token and component-level changelogs. +- **Express**: This now deprecated context is still rendered in Storybook by leveraging the `@spectrum-css/tokens` at release `v14.6.0`. Please note that Express and S1 will be removed in the next major release. - This release also includes: +This release also includes: - - New migration documentation for S1 -> S2 updates - - Fix for the duplicate line numbers in the code preview plugin - - Updated styles to integrate Spectrum styling into the Storybook UI +- New migration documentation for S1 -> S2 updates +- Fix for the duplicate line numbers in the code preview plugin +- Updated styles to integrate Spectrum styling into the Storybook UI #### Patch Changes @@ -61,7 +61,7 @@ ### Patch Changes -- [#3522](https://github.com/adobe/spectrum-css/pull/3522) [`7a47c22`](https://github.com/adobe/spectrum-css/commit/7a47c2266b6d0e8c99061fe85cba8d52684bae39) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3522](https://github.com/adobe/spectrum-css/pull/3522) [`7a47c22`](https://github.com/adobe/spectrum-css/commit/7a47c2266b6d0e8c99061fe85cba8d52684bae39) Thanks [@castastrophe](https://github.com/castastrophe)! - Minor storybook updates and fixes including some whitespace changes. A bug was fixed with the HTML code preview that was displaying duplicate line numbers. @@ -86,7 +86,7 @@ ### Major Changes -- [#3458](https://github.com/adobe/spectrum-css/pull/3458) [`e1b7102`](https://github.com/adobe/spectrum-css/commit/e1b71027f92ce18feb3a63c100d2b4871fc73b9f) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3458](https://github.com/adobe/spectrum-css/pull/3458) [`e1b7102`](https://github.com/adobe/spectrum-css/commit/e1b71027f92ce18feb3a63c100d2b4871fc73b9f) Thanks [@castastrophe](https://github.com/castastrophe)! - Update the Chromatic add-on to the currently maintained package: - from "@chromaui/addon-visual-tests": "^1.0.0" @@ -100,14 +100,14 @@ ### Patch Changes -- [#3440](https://github.com/adobe/spectrum-css/pull/3440) [`6808c85`](https://github.com/adobe/spectrum-css/commit/6808c85295d472286c0a52e28d2279b2b5a16f92) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3440](https://github.com/adobe/spectrum-css/pull/3440) [`6808c85`](https://github.com/adobe/spectrum-css/commit/6808c85295d472286c0a52e28d2279b2b5a16f92) Thanks [@castastrophe](https://github.com/castastrophe)! - Fix an issue where "show code" was blocking loading in Storybook docs pages [CSS-1070] ## 10.12.0 ### Minor Changes -- [#3477](https://github.com/adobe/spectrum-css/pull/3477) [`d52c701`](https://github.com/adobe/spectrum-css/commit/d52c70196bf2d17433c239313a82f00f75d77e79) Thanks [@castastrophe](https://github.com/castastrophe)! +- [#3477](https://github.com/adobe/spectrum-css/pull/3477) [`d52c701`](https://github.com/adobe/spectrum-css/commit/d52c70196bf2d17433c239313a82f00f75d77e79) Thanks [@castastrophe](https://github.com/castastrophe)! - Update Storybook to leverage the new CSS bundled assets. ### Patch Changes @@ -804,7 +804,7 @@ fix max nesting depth ## 3.0.26 -## 🗓 2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/preview@3.0.25...@spectrum-css/preview@3.0.26) +🗓 2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/preview@3.0.25...@spectrum-css/preview@3.0.26) **Note:** Version bump only for package @spectrum-css/preview diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md index 76274d183a8..25bac02b338 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -223,7 +223,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 4.1.10 -📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.1.9...@spectrum-css/actiongroup@4.1.10) +🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.1.9...@spectrum-css/actiongroup@4.1.10) **Note:** Version bump only for package @spectrum-css/actiongroup @@ -423,7 +423,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 3.0.56 -📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.55...@spectrum-css/actiongroup@3.0.56) +🗓 2023-07-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.55...@spectrum-css/actiongroup@3.0.56) **Note:** Version bump only for package @spectrum-css/actiongroup @@ -492,6 +492,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 3.0.48 🗓 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@3.0.47...@spectrum-css/actiongroup@3.0.48) + **Note:** Version bump only for package @spectrum-css/actiongroup diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md index 08efe682570..1cbfe27c61d 100644 --- a/components/buttongroup/CHANGELOG.md +++ b/components/buttongroup/CHANGELOG.md @@ -181,6 +181,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.2.5 🗓 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.4...@spectrum-css/buttongroup@6.2.5) + **Note:** Version bump only for package @spectrum-css/buttongroup @@ -218,8 +219,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.2.0 -🗓 -2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.16...@spectrum-css/buttongroup@6.2.0) +🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.16...@spectrum-css/buttongroup@6.2.0) ### ✨ Features @@ -245,8 +245,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.14 -🗓 -2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.12...@spectrum-css/buttongroup@6.1.14) +🗓 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.12...@spectrum-css/buttongroup@6.1.14) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -255,6 +254,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.13 🗓 2023-11-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.12...@spectrum-css/buttongroup@6.1.13) + **Note:** Version bump only for package @spectrum-css/buttongroup @@ -292,8 +292,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.8 -🗓 -2023-09-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.7...@spectrum-css/buttongroup@6.1.8) +🗓 2023-09-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.7...@spectrum-css/buttongroup@6.1.8) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -317,8 +316,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.5 -🗓 -2023-09-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.4...@spectrum-css/buttongroup@6.1.5) +🗓 2023-09-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.4...@spectrum-css/buttongroup@6.1.5) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -327,6 +325,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.1.4 🗓 2023-08-31 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.1.3...@spectrum-css/buttongroup@6.1.4) + **Note:** Version bump only for package @spectrum-css/buttongroup @@ -345,7 +344,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🔙 Reverts -\*gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099) +- gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099) @@ -385,8 +384,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.61 -🗓 -2023-08-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.60...@spectrum-css/buttongroup@6.0.61) +🗓 2023-08-10 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.60...@spectrum-css/buttongroup@6.0.61) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -394,8 +392,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.60 -🗓 -2023-08-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.59...@spectrum-css/buttongroup@6.0.60) +🗓 2023-08-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.59...@spectrum-css/buttongroup@6.0.60) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -404,6 +401,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.59 🗓 2023-08-03 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.58...@spectrum-css/buttongroup@6.0.59) + **Note:** Version bump only for package @spectrum-css/buttongroup @@ -442,8 +440,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.54 -🗓 -2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.53...@spectrum-css/buttongroup@6.0.54) +🗓 2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.53...@spectrum-css/buttongroup@6.0.54) **Note:** Version bump only for package @spectrum-css/buttongroup @@ -467,8 +464,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.51 -🗓 -2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.50...@spectrum-css/buttongroup@6.0.51) +🗓 2023-06-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.50...@spectrum-css/buttongroup@6.0.51) ### 🐛 Bug fixes @@ -486,8 +482,7 @@ Output for all component CSS files is now being run through a lightweight optimi ## 6.0.49 -🗓 -2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.48...@spectrum-css/buttongroup@6.0.49) +🗓 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.0.48...@spectrum-css/buttongroup@6.0.49) **Note:** Version bump only for package @spectrum-css/buttongroup From bcf27abb2d3c836b2ca74b4c87f96945eaddcb2e Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Thu, 22 Feb 2024 13:56:15 -0500 Subject: [PATCH 020/103] feat(tokens)!: use spectrum-tokens 13.0.0-beta.16 --- tokens/dist/json/tokens.json | 509 ++++++++++++++++------------------- tokens/package.json | 2 +- yarn.lock | 10 +- 3 files changed, 240 insertions(+), 281 deletions(-) diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 4353dee5736..f9a84180189 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -387,39 +387,19 @@ }, "accordion-disclosure-indicator-to-text": { "prop": "--spectrum-accordion-disclosure-indicator-to-text", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "accordion-edge-to-disclosure-indicator": { "prop": "--spectrum-accordion-edge-to-disclosure-indicator", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "accordion-edge-to-text": { "prop": "--spectrum-accordion-edge-to-text", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "accordion-focus-indicator-gap": { "prop": "--spectrum-accordion-focus-indicator-gap", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", @@ -459,21 +439,11 @@ }, "accordion-top-to-text-compact-medium": { "prop": "--spectrum-accordion-top-to-text-compact-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "4px" - } + "value": "4px" }, "accordion-top-to-text-compact-small": { "prop": "--spectrum-accordion-top-to-text-compact-small", - "desktop": { - "value": "2px" - }, - "mobile": { - "value": "2px" - } + "value": "2px" }, "accordion-top-to-text-regular-extra-large": { "prop": "--spectrum-accordion-top-to-text-regular-extra-large", @@ -567,12 +537,7 @@ }, "action-button-edge-to-hold-icon-extra-small": { "prop": "--spectrum-action-button-edge-to-hold-icon-extra-small", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "3px" - } + "value": "3px" }, "action-button-edge-to-hold-icon-large": { "prop": "--spectrum-action-button-edge-to-hold-icon-large", @@ -594,12 +559,7 @@ }, "action-button-edge-to-hold-icon-small": { "prop": "--spectrum-action-button-edge-to-hold-icon-small", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "3px" - } + "value": "3px" }, "alert-banner-bottom-to-text": { "prop": "--spectrum-alert-banner-bottom-to-text", @@ -800,12 +760,7 @@ }, "asterisk-icon-size-75": { "prop": "--spectrum-asterisk-icon-size-75", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "8px" - } + "value": "8px" }, "avatar-opacity-disabled": { "prop": "--spectrum-avatar-opacity-disabled", @@ -896,11 +851,11 @@ "background-base-color": { "prop": "--spectrum-background-base-color", "ref": "var(--spectrum-gray-25)", - "light": { - "value": "rgb(255, 255, 255)" - }, "dark": { "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(255, 255, 255)" } }, "background-elevated-color": { @@ -2742,12 +2697,7 @@ "color-area-border-rounding": { "prop": "--spectrum-color-area-border-rounding", "ref": "var(--spectrum-corner-radius-100)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "4px" - } + "value": "4px" }, "color-area-border-width": { "prop": "--spectrum-color-area-border-width", @@ -3540,252 +3490,122 @@ }, "corner-radius-0": { "prop": "--spectrum-corner-radius-0", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "corner-radius-100": { "prop": "--spectrum-corner-radius-100", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "4px" - } + "value": "4px" }, "corner-radius-1000": { "prop": "--spectrum-corner-radius-1000", - "desktop": { - "value": "0.5" - }, - "mobile": { - "value": "0.5" - } + "value": "0.5" }, "corner-radius-200": { "prop": "--spectrum-corner-radius-200", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "5px" - } + "value": "5px" }, "corner-radius-300": { "prop": "--spectrum-corner-radius-300", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "6px" - } + "value": "6px" }, "corner-radius-400": { "prop": "--spectrum-corner-radius-400", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "7px" - } + "value": "7px" }, "corner-radius-500": { "prop": "--spectrum-corner-radius-500", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "8px" - } + "value": "8px" }, "corner-radius-600": { "prop": "--spectrum-corner-radius-600", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "9px" - } + "value": "9px" }, "corner-radius-700": { "prop": "--spectrum-corner-radius-700", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "10px" - } + "value": "10px" }, "corner-radius-75": { "prop": "--spectrum-corner-radius-75", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "3px" - } + "value": "3px" }, "corner-radius-800": { "prop": "--spectrum-corner-radius-800", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "16px" - } + "value": "16px" }, "corner-radius-extra-large-default": { "prop": "--spectrum-corner-radius-extra-large-default", "ref": "var(--spectrum-corner-radius-800)", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "16px" - } + "value": "16px" }, "corner-radius-full": { "prop": "--spectrum-corner-radius-full", "ref": "var(--spectrum-corner-radius-1000)", - "desktop": { - "value": "0.5" - }, - "mobile": { - "value": "0.5" - } + "value": "0.5" }, "corner-radius-large-default": { "prop": "--spectrum-corner-radius-large-default", "ref": "var(--spectrum-corner-radius-700)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "10px" - } + "value": "10px" }, "corner-radius-medium-default": { "prop": "--spectrum-corner-radius-medium-default", "ref": "var(--spectrum-corner-radius-500)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "8px" - } + "value": "8px" }, "corner-radius-medium-size-extra-large": { "prop": "--spectrum-corner-radius-medium-size-extra-large", "ref": "var(--spectrum-corner-radius-700)", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "10px" - } + "value": "10px" }, "corner-radius-medium-size-extra-small": { "prop": "--spectrum-corner-radius-medium-size-extra-small", "ref": "var(--spectrum-corner-radius-300)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "6px" - } + "value": "6px" }, "corner-radius-medium-size-large": { "prop": "--spectrum-corner-radius-medium-size-large", "ref": "var(--spectrum-corner-radius-600)", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "9px" - } + "value": "9px" }, "corner-radius-medium-size-medium": { "prop": "--spectrum-corner-radius-medium-size-medium", "ref": "var(--spectrum-corner-radius-500)", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "8px" - } + "value": "8px" }, "corner-radius-medium-size-small": { "prop": "--spectrum-corner-radius-medium-size-small", "ref": "var(--spectrum-corner-radius-400)", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "7px" - } + "value": "7px" }, "corner-radius-none": { "prop": "--spectrum-corner-radius-none", "ref": "var(--spectrum-corner-radius-0)", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "corner-radius-small-default": { "prop": "--spectrum-corner-radius-small-default", "ref": "var(--spectrum-corner-radius-100)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "4px" - } + "value": "4px" }, "corner-radius-small-size-extra-large": { "prop": "--spectrum-corner-radius-small-size-extra-large", "ref": "var(--spectrum-corner-radius-300)", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "6px" - } + "value": "6px" }, "corner-radius-small-size-large": { "prop": "--spectrum-corner-radius-small-size-large", "ref": "var(--spectrum-corner-radius-200)", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "5px" - } + "value": "5px" }, "corner-radius-small-size-medium": { "prop": "--spectrum-corner-radius-small-size-medium", "ref": "var(--spectrum-corner-radius-100)", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "4px" - } + "value": "4px" }, "corner-radius-small-size-small": { "prop": "--spectrum-corner-radius-small-size-small", "ref": "var(--spectrum-corner-radius-75)", - "desktop": { - "value": "3px" - }, - "mobile": { - "value": "3px" - } + "value": "3px" }, "corner-triangle-icon-size-100": { "prop": "--spectrum-corner-triangle-icon-size-100", @@ -4602,12 +4422,7 @@ }, "drop-shadow-x": { "prop": "--spectrum-drop-shadow-x", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "drop-shadow-y": { "prop": "--spectrum-drop-shadow-y", @@ -4929,39 +4744,19 @@ }, "field-label-top-margin-extra-large": { "prop": "--spectrum-field-label-top-margin-extra-large", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "field-label-top-margin-large": { "prop": "--spectrum-field-label-top-margin-large", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "field-label-top-margin-medium": { "prop": "--spectrum-field-label-top-margin-medium", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "field-label-top-margin-small": { "prop": "--spectrum-field-label-top-margin-small", - "desktop": { - "value": "0px" - }, - "mobile": { - "value": "0px" - } + "value": "0px" }, "field-label-top-to-asterisk-extra-large": { "prop": "--spectrum-field-label-top-to-asterisk-extra-large", @@ -7700,6 +7495,46 @@ "value": "rgb(255, 103, 86)" } }, + "negative-subdued-background-color-default": { + "prop": "--spectrum-negative-subdued-background-color-default", + "ref": "var(--spectrum-negative-color-200)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(68, 13, 5)" + } + }, + "negative-subdued-background-color-down": { + "prop": "--spectrum-negative-subdued-background-color-down", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "negative-subdued-background-color-hover": { + "prop": "--spectrum-negative-subdued-background-color-hover", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "negative-subdued-background-color-key-focus": { + "prop": "--spectrum-negative-subdued-background-color-key-focus", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, "negative-visual-color": { "prop": "--spectrum-negative-visual-color", "ref": "var(--spectrum-negative-color-700)", @@ -10024,12 +9859,7 @@ }, "status-light-dot-size-small": { "prop": "--spectrum-status-light-dot-size-small", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "8px" - } + "value": "8px" }, "status-light-top-to-dot-extra-large": { "prop": "--spectrum-status-light-top-to-dot-extra-large", @@ -10149,43 +9979,43 @@ "switch-control-height-extra-large": { "prop": "--spectrum-switch-control-height-extra-large", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "26px" } }, "switch-control-height-large": { "prop": "--spectrum-switch-control-height-large", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "20px" + "value": "22px" } }, "switch-control-height-medium": { "prop": "--spectrum-switch-control-height-medium", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "18px" + "value": "20px" } }, "switch-control-height-small": { "prop": "--spectrum-switch-control-height-small", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "16px" + "value": "18px" } }, "switch-control-width-extra-large": { "prop": "--spectrum-switch-control-width-extra-large", "desktop": { - "value": "33px" + "value": "34px" }, "mobile": { "value": "46px" @@ -10194,10 +10024,10 @@ "switch-control-width-large": { "prop": "--spectrum-switch-control-width-large", "desktop": { - "value": "29px" + "value": "30px" }, "mobile": { - "value": "41px" + "value": "38px" } }, "switch-control-width-medium": { @@ -10206,16 +10036,88 @@ "value": "26px" }, "mobile": { - "value": "36px" + "value": "34px" } }, "switch-control-width-small": { "prop": "--spectrum-switch-control-width-small", "desktop": { - "value": "23px" + "value": "22px" }, "mobile": { - "value": "32px" + "value": "30px" + } + }, + "switch-handle-selected-size-extra-large": { + "prop": "--spectrum-switch-handle-selected-size-extra-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "20px" + } + }, + "switch-handle-selected-size-large": { + "prop": "--spectrum-switch-handle-selected-size-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "switch-handle-selected-size-medium": { + "prop": "--spectrum-switch-handle-selected-size-medium", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "switch-handle-selected-size-small": { + "prop": "--spectrum-switch-handle-selected-size-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "12px" + } + }, + "switch-handle-size-extra-large": { + "prop": "--spectrum-switch-handle-size-extra-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "18px" + } + }, + "switch-handle-size-large": { + "prop": "--spectrum-switch-handle-size-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, + "switch-handle-size-medium": { + "prop": "--spectrum-switch-handle-size-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "12px" + } + }, + "switch-handle-size-small": { + "prop": "--spectrum-switch-handle-size-small", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "10px" } }, "switch-top-to-control-extra-large": { @@ -10785,12 +10687,7 @@ }, "table-edge-to-content": { "prop": "--spectrum-table-edge-to-content", - "desktop": { - "value": "16px" - }, - "mobile": { - "value": "16px" - } + "value": "16px" }, "table-header-row-checkbox-to-top-extra-large": { "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", @@ -11470,6 +11367,68 @@ "value": "9px" } }, + "tag-edge-to-clear-icon-large": { + "prop": "--spectrum-tag-edge-to-clear-icon-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "tag-edge-to-clear-icon-medium": { + "prop": "--spectrum-tag-edge-to-clear-icon-medium", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "tag-edge-to-clear-icon-small": { + "prop": "--spectrum-tag-edge-to-clear-icon-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "tag-label-to-clear-icon-large": { + "prop": "--spectrum-tag-label-to-clear-icon-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "tag-label-to-clear-icon-medium": { + "prop": "--spectrum-tag-label-to-clear-icon-medium", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "tag-label-to-clear-icon-small": { + "prop": "--spectrum-tag-label-to-clear-icon-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "tag-maximum-width-multiplier": { + "prop": "--spectrum-tag-maximum-width-multiplier", + "value": "7" + }, + "tag-minimum-width-multiplier": { + "prop": "--spectrum-tag-minimum-width-multiplier", + "value": "1" + }, "tag-top-to-avatar-large": { "prop": "--spectrum-tag-top-to-avatar-large", "desktop": { diff --git a/tokens/package.json b/tokens/package.json index 494c3afebf2..5e29939eae3 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.13", + "@adobe/spectrum-tokens": "13.0.0-beta.16", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/yarn.lock b/yarn.lock index 92555947508..26d3faebe35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.13": - version: 13.0.0-beta.13 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.13" - checksum: 10c0/ce025cf6dcc462a84b633c93cd168210ad53fbfb40c81846c2c610ef87ed358ac6f38c1b7264c9cbe0fd03c12626cfe00f381fe26f5d59df9e23fc1428ee3720 +"@adobe/spectrum-tokens@npm:13.0.0-beta.16": + version: 13.0.0-beta.16 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.16" + checksum: 10c0/84ca0d3faff5ad9281fdd14c3b5227b2356aa46a590ed4d0281db63e1773e58ab9533e172730a78f77e8bc2d21e587e3dd11870b484b0bd9342128833e8d5af5 languageName: node linkType: hard @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.13" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.16" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From 01ea4ac342673dec98b2492b76ddc97c4b753301 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Thu, 7 Mar 2024 09:04:27 -0500 Subject: [PATCH 021/103] feat(closebutton)!: migrate to S2 (#2564) BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton --- components/closebutton/dist/metadata.json | 82 +---- components/closebutton/index.css | 280 ++++++++---------- components/closebutton/themes/express.css | 25 -- .../closebutton/themes/spectrum-two.css | 33 --- components/closebutton/themes/spectrum.css | 36 --- 5 files changed, 137 insertions(+), 319 deletions(-) delete mode 100644 components/closebutton/themes/express.css delete mode 100644 components/closebutton/themes/spectrum-two.css delete mode 100644 components/closebutton/themes/spectrum.css diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 756fc3d7e62..7ade8f98f76 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -2,45 +2,16 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-CloseButton", + ".spectrum-CloseButton--sizeL", + ".spectrum-CloseButton--sizeS", + ".spectrum-CloseButton--sizeXL", ".spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled)", - ".spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):active", - ".spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible", - ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack:not(:disabled):hover", - ".spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite", - ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled)", - ".spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):active", - ".spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible", - ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite:not(:disabled):hover", - ".spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-disabled", ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.spectrum-CloseButton--sizeL", - ".spectrum-CloseButton.spectrum-CloseButton--sizeM", - ".spectrum-CloseButton.spectrum-CloseButton--sizeS", - ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", - ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", ".spectrum-CloseButton::-moz-focus-inner", ".spectrum-CloseButton:after", ".spectrum-CloseButton:disabled", @@ -72,7 +43,6 @@ "--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", @@ -81,11 +51,6 @@ "--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" ], @@ -104,27 +69,22 @@ "--spectrum-closebutton-icon-color-down", "--spectrum-closebutton-icon-color-focus", "--spectrum-closebutton-icon-color-hover", - "--spectrum-closebutton-size", - "--spectrum-closebutton-static-background-color-default", - "--spectrum-closebutton-static-background-color-down", - "--spectrum-closebutton-static-background-color-focus", - "--spectrum-closebutton-static-background-color-hover" + "--spectrum-closebutton-size" ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-black", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-corner-radius-full", "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-content-color", + "--spectrum-disabled-static-black-background-color", + "--spectrum-disabled-static-white-background-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-gray-100", - "--spectrum-gray-200", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", @@ -133,24 +93,14 @@ "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", "--spectrum-static-white-focus-indicator-color", - "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-white" - ], - "system-theme": [ - "--system-close-button-background-color-default", - "--system-close-button-background-color-down", - "--system-close-button-background-color-focus", - "--system-close-button-background-color-hover", - "--system-close-button-static-black-static-background-color-down", - "--system-close-button-static-black-static-background-color-focus", - "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-static-background-color-down", - "--system-close-button-static-white-static-background-color-focus", - "--system-close-button-static-white-static-background-color-hover" + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-800", + "--spectrum-transparent-black-900", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-800", + "--spectrum-transparent-white-900" ], + "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", @@ -159,11 +109,9 @@ "high-contrast": [ "--highcontrast-closebutton-background-color-default", "--highcontrast-closebutton-focus-indicator-color", - "--highcontrast-closebutton-icon-color-default", "--highcontrast-closebutton-icon-color-disabled", "--highcontrast-closebutton-icon-color-down", "--highcontrast-closebutton-icon-color-focus", - "--highcontrast-closebutton-icon-color-hover", - "--highcontrast-closebutton-static-background-color-default" + "--highcontrast-closebutton-icon-color-hover" ] } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 14880d3ee6e..45006b72dc8 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -11,44 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-CloseButton { - --highcontrast-closebutton-icon-color-disabled: GrayText; - --highcontrast-closebutton-icon-color-down: Highlight; - --highcontrast-closebutton-icon-color-hover: Highlight; - --highcontrast-closebutton-icon-color-focus: Highlight; - --highcontrast-closebutton-background-color-default: ButtonFace; - --highcontrast-closebutton-focus-indicator-color: ButtonText; - - &:focus-visible { - &::after { - forced-color-adjust: none; - margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); - transition: - opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, - margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; - } - } - } - - .spectrum-CloseButton--staticBlack { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: GrayText; - } - - .spectrum-CloseButton--staticWhite { - --highcontrast-closebutton-static-background-color-default: ButtonFace; - --highcontrast-closebutton-icon-color-default: Highlight; - --highcontrast-closebutton-icon-color-disabled: Highlight; - } -} - .spectrum-CloseButton { + --spectrum-closebutton-border-radius: var(--spectrum-corner-radius-full); + /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); @@ -56,54 +23,104 @@ --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); + /* Size */ + --spectrum-closebutton-size: var(--spectrum-component-height-100); + --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); - &.spectrum-CloseButton--sizeS { - --spectrum-closebutton-size: var(--spectrum-component-height-75); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-75); - } + /* 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-size: var(--spectrum-component-height-100); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-100); - } +.spectrum-CloseButton--sizeS { + --spectrum-closebutton-size: var(--spectrum-component-height-75); +} - &.spectrum-CloseButton--sizeL { - --spectrum-closebutton-size: var(--spectrum-component-height-200); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-200); - } +.spectrum-CloseButton--sizeL { + --spectrum-closebutton-size: var(--spectrum-component-height-200); +} - &.spectrum-CloseButton--sizeXL { - --spectrum-closebutton-size: var(--spectrum-component-height-300); - --spectrum-closebutton-border-radius: var(--spectrum-component-height-300); - } +.spectrum-CloseButton--sizeXL { + --spectrum-closebutton-size: var(--spectrum-component-height-300); +} - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; +.spectrum-CloseButton--staticWhite { + /* 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-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - } +.spectrum-CloseButton--staticBlack { + /* 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); +} + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-CloseButton { + --highcontrast-closebutton-icon-color-disabled: GrayText; + --highcontrast-closebutton-icon-color-down: Highlight; + --highcontrast-closebutton-icon-color-hover: Highlight; + --highcontrast-closebutton-icon-color-focus: Highlight; + --highcontrast-closebutton-background-color-default: ButtonFace; + --highcontrast-closebutton-focus-indicator-color: ButtonText; - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; + &:focus-visible::after { + forced-color-adjust: none; + margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)); + transition: + opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out, + margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out; + } + } - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); - --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + .spectrum-CloseButton--staticWhite { + --highcontrast-closebutton-icon-color-disabled: Highlight; } +} +a.spectrum-CloseButton { + @extend %spectrum-AnchorButton; +} + +.spectrum-CloseButton { @extend %spectrum-BaseButton; - block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); - inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size))); + block-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); + inline-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size)); position: relative; @@ -125,7 +142,6 @@ margin-block-start: var(--mod-closebutton-margin-top); align-self: var(--mod-closebutton-align-self); - /* Represents focus ring */ &::after { pointer-events: none; content: ""; @@ -135,7 +151,7 @@ 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; } @@ -148,106 +164,54 @@ } } - &:not(:disabled) { - background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); +/* COLORS */ + &:not(:disabled) { + background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); - &:hover { - background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); + &:hover { + background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); - } - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + } + } - &:active { - background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); + &:active { + background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); - } - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); + } + } - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); + &:focus-visible, + &.is-keyboardFocused { + background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } - .spectrum-CloseButton-UIIcon { - color: 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)); + } - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } - } + &:focus, + &.is-focused { + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } + } - &:disabled { - background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); + &:disabled { + background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); - } - } -} - -a.spectrum-CloseButton { - @extend %spectrum-AnchorButton; -} - -/* 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(--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(--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(--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(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)); - } + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + } + } } .spectrum-CloseButton-UIIcon { diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css deleted file mode 100644 index 06a90e4fee9..00000000000 --- a/components/closebutton/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } -} diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css deleted file mode 100644 index 01479c42fd4..00000000000 --- a/components/closebutton/themes/spectrum-two.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); - } - } -} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css deleted file mode 100644 index 62e907bae8a..00000000000 --- a/components/closebutton/themes/spectrum.css +++ /dev/null @@ -1,36 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); - } - } -} From 5307fbeaff4534a25d0ef688dca4ebc90ff11e20 Mon Sep 17 00:00:00 2001 From: Patrick Fulton <360251+pfulton@users.noreply.github.com> Date: Thu, 7 Mar 2024 09:24:08 -0500 Subject: [PATCH 022/103] chore: s2 grays component-level migration (#2583) * chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200 --- .github/workflows/development.yml | 2 - .github/workflows/lint.yml | 2 +- .storybook/guides/develop.mdx | 20 +- .vscode/settings.json | 6 +- components/accordion/dist/metadata.json | 6 +- components/accordion/index.css | 6 +- components/accordion/themes/express.css | 16 - components/accordion/themes/spectrum-two.css | 20 - components/accordion/themes/spectrum.css | 24 - components/actionbar/dist/metadata.json | 5 +- components/actionbar/index.css | 5 +- components/actionbar/package.json | 4 +- components/actionbar/themes/express.css | 16 - components/actionbar/themes/spectrum-two.css | 20 - components/actionbar/themes/spectrum.css | 23 - components/actionbutton/dist/metadata.json | 81 +- components/actionbutton/index.css | 108 +- components/actionbutton/themes/express.css | 71 - .../actionbutton/themes/spectrum-two.css | 102 - components/actionbutton/themes/spectrum.css | 71 - components/actiongroup/dist/metadata.json | 9 +- components/actiongroup/index.css | 73 +- .../stories/actiongroup.stories.js | 4 +- components/alertbanner/dist/metadata.json | 2 +- components/alertbanner/index.css | 4 +- components/alertbanner/package.json | 4 +- components/alertbanner/themes/express.css | 22 - .../alertbanner/themes/spectrum-two.css | 18 - components/alertbanner/themes/spectrum.css | 22 - components/asset/dist/metadata.json | 11 +- components/asset/index.css | 10 +- components/asset/themes/express.css | 16 - components/asset/themes/spectrum-two.css | 20 - components/asset/themes/spectrum.css | 24 - components/assetcard/dist/metadata.json | 7 +- components/assetcard/index.css | 7 +- components/assetcard/themes/express.css | 22 - components/assetcard/themes/spectrum-two.css | 21 - components/assetcard/themes/spectrum.css | 25 - components/assetlist/dist/metadata.json | 5 +- components/assetlist/index.css | 5 +- components/assetlist/themes/express.css | 16 - components/assetlist/themes/spectrum-two.css | 19 - components/assetlist/themes/spectrum.css | 23 - components/badge/stories/template.js | 1 - components/button/dist/metadata.json | 104 +- components/button/index.css | 165 +- components/button/themes/express.css | 37 - components/button/themes/spectrum-two.css | 177 - components/button/themes/spectrum.css | 133 - components/buttongroup/dist/metadata.json | 10 +- components/buttongroup/index.css | 23 +- components/calendar/dist/metadata.json | 2 +- components/calendar/index.css | 4 +- components/calendar/themes/express.css | 16 - components/calendar/themes/spectrum-two.css | 18 - components/calendar/themes/spectrum.css | 22 - components/card/dist/metadata.json | 8 +- components/card/index.css | 8 +- components/card/themes/express.css | 16 - components/card/themes/spectrum-two.css | 22 - components/card/themes/spectrum.css | 26 - components/checkbox/dist/metadata.json | 9 +- components/checkbox/index.css | 10 +- components/checkbox/themes/express.css | 25 - components/checkbox/themes/spectrum-two.css | 24 - components/checkbox/themes/spectrum.css | 23 - components/clearbutton/dist/metadata.json | 10 +- components/clearbutton/index.css | 11 +- components/clearbutton/themes/express.css | 25 - .../clearbutton/themes/spectrum-two.css | 27 - components/clearbutton/themes/spectrum.css | 26 - components/closebutton/dist/metadata.json | 5 +- components/closebutton/index.css | 96 +- components/closebutton/package.json | 11 +- .../stories/closebutton.stories.js | 1 + components/closebutton/stories/template.js | 14 +- components/coachindicator/dist/metadata.json | 4 + components/coachindicator/index.css | 14 +- components/colorwheel/dist/metadata.json | 2 +- components/colorwheel/index.css | 4 +- components/colorwheel/themes/express.css | 16 - components/colorwheel/themes/spectrum-two.css | 18 - components/colorwheel/themes/spectrum.css | 22 - components/combobox/dist/metadata.json | 10 +- components/combobox/index.css | 42 +- components/combobox/themes/express.css | 26 - components/combobox/themes/spectrum-two.css | 24 - components/combobox/themes/spectrum.css | 26 - components/datepicker/dist/metadata.json | 2 +- components/datepicker/index.css | 4 +- components/datepicker/themes/express.css | 22 - components/datepicker/themes/spectrum-two.css | 18 - components/datepicker/themes/spectrum.css | 16 - components/dial/dist/metadata.json | 5 +- components/dial/index.css | 5 +- components/dial/themes/express.css | 16 - components/dial/themes/spectrum-two.css | 19 - components/dial/themes/spectrum.css | 23 - components/dialog/package.json | 4 +- components/divider/dist/metadata.json | 6 +- components/divider/index.css | 11 +- components/divider/themes/express.css | 16 - components/divider/themes/spectrum-two.css | 25 - components/divider/themes/spectrum.css | 29 - components/dropzone/dist/metadata.json | 2 +- components/dropzone/index.css | 4 +- components/dropzone/themes/express.css | 16 - components/dropzone/themes/spectrum-two.css | 18 - components/dropzone/themes/spectrum.css | 22 - components/infieldbutton/dist/metadata.json | 13 +- components/infieldbutton/index.css | 17 +- components/infieldbutton/themes/express.css | 34 - .../infieldbutton/themes/spectrum-two.css | 31 - components/infieldbutton/themes/spectrum.css | 25 - components/logicbutton/dist/metadata.json | 11 +- components/logicbutton/index.css | 11 +- components/logicbutton/themes/express.css | 16 - .../logicbutton/themes/spectrum-two.css | 26 - components/logicbutton/themes/spectrum.css | 30 - components/menu/dist/metadata.json | 11 +- components/menu/index.css | 14 +- components/menu/themes/express.css | 16 - components/menu/themes/spectrum-two.css | 28 - components/menu/themes/spectrum.css | 32 - components/modal/dist/metadata.json | 2 +- components/modal/index.css | 3 +- components/modal/themes/express.css | 16 - components/modal/themes/spectrum-two.css | 18 - components/modal/themes/spectrum.css | 22 - components/picker/dist/metadata.json | 17 +- components/picker/index.css | 18 +- components/picker/themes/express.css | 36 - components/picker/themes/spectrum-two.css | 33 - components/picker/themes/spectrum.css | 32 - components/pickerbutton/dist/metadata.json | 13 +- components/pickerbutton/index.css | 16 +- components/pickerbutton/themes/express.css | 33 - .../pickerbutton/themes/spectrum-two.css | 30 - components/pickerbutton/themes/spectrum.css | 33 - components/popover/dist/metadata.json | 2 +- components/popover/index.css | 3 +- components/popover/themes/express.css | 22 - components/popover/themes/spectrum-two.css | 18 - components/popover/themes/spectrum.css | 16 - components/progressbar/dist/metadata.json | 6 +- components/progressbar/index.css | 6 +- components/progressbar/themes/express.css | 16 - .../progressbar/themes/spectrum-two.css | 19 - components/progressbar/themes/spectrum.css | 23 - components/progresscircle/dist/metadata.json | 11 +- components/progresscircle/index.css | 13 +- components/progresscircle/themes/express.css | 16 - .../progresscircle/themes/spectrum-two.css | 22 - components/progresscircle/themes/spectrum.css | 26 - components/radio/dist/metadata.json | 8 +- components/radio/index.css | 10 +- components/radio/themes/express.css | 26 - components/radio/themes/spectrum-two.css | 24 - components/radio/themes/spectrum.css | 22 - components/rating/dist/metadata.json | 8 +- components/rating/index.css | 9 +- components/rating/themes/express.css | 25 - components/rating/themes/spectrum-two.css | 23 - components/rating/themes/spectrum.css | 22 - components/search/dist/metadata.json | 20 +- components/search/index.css | 28 +- components/search/themes/express.css | 47 - components/search/themes/spectrum-two.css | 45 - components/search/themes/spectrum.css | 22 - components/sidenav/dist/metadata.json | 10 +- components/sidenav/index.css | 11 +- components/sidenav/themes/express.css | 16 - components/sidenav/themes/spectrum-two.css | 25 - components/sidenav/themes/spectrum.css | 29 - components/slider/dist/metadata.json | 25 +- components/slider/index.css | 37 +- components/slider/themes/express.css | 39 - components/slider/themes/spectrum-two.css | 54 - components/slider/themes/spectrum.css | 45 - components/splitview/dist/metadata.json | 6 +- components/splitview/index.css | 6 +- components/splitview/themes/express.css | 16 - components/splitview/themes/spectrum-two.css | 20 - components/splitview/themes/spectrum.css | 24 - components/steplist/dist/metadata.json | 5 +- components/steplist/index.css | 5 +- components/steplist/themes/express.css | 16 - components/steplist/themes/spectrum-two.css | 19 - components/steplist/themes/spectrum.css | 23 - components/stepper/dist/metadata.json | 26 +- components/stepper/index.css | 35 +- components/stepper/themes/express.css | 53 - components/stepper/themes/spectrum-two.css | 49 - components/stepper/themes/spectrum.css | 25 - components/swatch/dist/metadata.json | 8 +- components/swatch/index.css | 10 +- components/swatch/themes/express.css | 16 - components/swatch/themes/spectrum-two.css | 22 - components/swatch/themes/spectrum.css | 25 - components/switch/dist/metadata.json | 15 +- components/switch/index.css | 63 +- components/switch/themes/express.css | 30 - components/switch/themes/spectrum-two.css | 30 - components/switch/themes/spectrum.css | 24 - components/table/dist/metadata.json | 13 +- components/table/index.css | 16 +- components/table/themes/express.css | 16 - components/table/themes/spectrum-two.css | 30 - components/table/themes/spectrum.css | 34 - components/tabs/dist/metadata.json | 5 +- components/tabs/index.css | 5 +- components/tabs/themes/express.css | 22 - components/tabs/themes/spectrum-two.css | 19 - components/tabs/themes/spectrum.css | 23 - components/tag/dist/metadata.json | 34 +- components/tag/index.css | 42 +- components/tag/themes/express.css | 64 - components/tag/themes/spectrum-two.css | 56 - components/tag/themes/spectrum.css | 27 - components/textfield/dist/metadata.json | 20 +- components/textfield/index.css | 22 +- components/textfield/themes/express.css | 28 - components/textfield/themes/spectrum-two.css | 46 - components/textfield/themes/spectrum.css | 43 - components/thumbnail/dist/metadata.json | 1 - components/thumbnail/index.css | 6 +- components/thumbnail/themes/express.css | 16 - components/thumbnail/themes/spectrum-two.css | 18 - components/thumbnail/themes/spectrum.css | 22 - components/toast/dist/metadata.json | 5 +- components/toast/index.css | 5 +- components/toast/package.json | 4 +- components/toast/themes/express.css | 22 - components/toast/themes/spectrum-two.css | 19 - components/toast/themes/spectrum.css | 22 - components/tooltip/dist/metadata.json | 2 +- components/tooltip/index.css | 3 +- components/tooltip/themes/express.css | 22 - components/tooltip/themes/spectrum-two.css | 18 - components/tooltip/themes/spectrum.css | 16 - components/treeview/dist/metadata.json | 6 +- components/treeview/index.css | 8 +- components/treeview/themes/express.css | 16 - components/treeview/themes/spectrum-two.css | 19 - components/treeview/themes/spectrum.css | 23 - components/well/dist/metadata.json | 2 +- components/well/index.css | 4 +- components/well/themes/express.css | 16 - components/well/themes/spectrum-two.css | 18 - components/well/themes/spectrum.css | 22 - nx.json | 6 +- .../CHANGELOG.md | 1 + .../index.js | 9 - stylelint.config.js | 15 - tasks/component-builder.js | 74 - tokens/CHANGELOG.md | 10 +- tokens/dist/json/tokens.json | 5480 +++++++++++++++-- tokens/package.json | 2 +- tools/generator/CHANGELOG.md | 3 + .../templates/stories/template.js.hbs | 2 - ui-icons/CHANGELOG.md | 3 +- yarn.lock | 28 +- 263 files changed, 5749 insertions(+), 5438 deletions(-) delete mode 100644 components/accordion/themes/express.css delete mode 100644 components/accordion/themes/spectrum-two.css delete mode 100644 components/accordion/themes/spectrum.css delete mode 100644 components/actionbar/themes/express.css delete mode 100644 components/actionbar/themes/spectrum-two.css delete mode 100644 components/actionbar/themes/spectrum.css delete mode 100644 components/actionbutton/themes/express.css delete mode 100644 components/actionbutton/themes/spectrum-two.css delete mode 100644 components/actionbutton/themes/spectrum.css delete mode 100644 components/alertbanner/themes/express.css delete mode 100644 components/alertbanner/themes/spectrum-two.css delete mode 100644 components/alertbanner/themes/spectrum.css delete mode 100644 components/asset/themes/express.css delete mode 100644 components/asset/themes/spectrum-two.css delete mode 100644 components/asset/themes/spectrum.css delete mode 100644 components/assetcard/themes/express.css delete mode 100644 components/assetcard/themes/spectrum-two.css delete mode 100644 components/assetcard/themes/spectrum.css delete mode 100644 components/assetlist/themes/express.css delete mode 100644 components/assetlist/themes/spectrum-two.css delete mode 100644 components/assetlist/themes/spectrum.css delete mode 100644 components/button/themes/express.css delete mode 100644 components/button/themes/spectrum-two.css delete mode 100644 components/button/themes/spectrum.css delete mode 100644 components/calendar/themes/express.css delete mode 100644 components/calendar/themes/spectrum-two.css delete mode 100644 components/calendar/themes/spectrum.css delete mode 100644 components/card/themes/express.css delete mode 100644 components/card/themes/spectrum-two.css delete mode 100644 components/card/themes/spectrum.css delete mode 100644 components/checkbox/themes/express.css delete mode 100644 components/checkbox/themes/spectrum-two.css delete mode 100644 components/checkbox/themes/spectrum.css delete mode 100644 components/clearbutton/themes/express.css delete mode 100644 components/clearbutton/themes/spectrum-two.css delete mode 100644 components/clearbutton/themes/spectrum.css delete mode 100644 components/colorwheel/themes/express.css delete mode 100644 components/colorwheel/themes/spectrum-two.css delete mode 100644 components/colorwheel/themes/spectrum.css delete mode 100644 components/combobox/themes/express.css delete mode 100644 components/combobox/themes/spectrum-two.css delete mode 100644 components/combobox/themes/spectrum.css delete mode 100644 components/datepicker/themes/express.css delete mode 100644 components/datepicker/themes/spectrum-two.css delete mode 100644 components/datepicker/themes/spectrum.css delete mode 100644 components/dial/themes/express.css delete mode 100644 components/dial/themes/spectrum-two.css delete mode 100644 components/dial/themes/spectrum.css delete mode 100644 components/divider/themes/express.css delete mode 100644 components/divider/themes/spectrum-two.css delete mode 100644 components/divider/themes/spectrum.css delete mode 100644 components/dropzone/themes/express.css delete mode 100644 components/dropzone/themes/spectrum-two.css delete mode 100644 components/dropzone/themes/spectrum.css delete mode 100644 components/infieldbutton/themes/express.css delete mode 100644 components/infieldbutton/themes/spectrum-two.css delete mode 100644 components/infieldbutton/themes/spectrum.css delete mode 100644 components/logicbutton/themes/express.css delete mode 100644 components/logicbutton/themes/spectrum-two.css delete mode 100644 components/logicbutton/themes/spectrum.css delete mode 100644 components/menu/themes/express.css delete mode 100644 components/menu/themes/spectrum-two.css delete mode 100644 components/menu/themes/spectrum.css delete mode 100644 components/modal/themes/express.css delete mode 100644 components/modal/themes/spectrum-two.css delete mode 100644 components/modal/themes/spectrum.css delete mode 100644 components/picker/themes/express.css delete mode 100644 components/picker/themes/spectrum-two.css delete mode 100644 components/picker/themes/spectrum.css delete mode 100644 components/pickerbutton/themes/express.css delete mode 100644 components/pickerbutton/themes/spectrum-two.css delete mode 100644 components/pickerbutton/themes/spectrum.css delete mode 100644 components/popover/themes/express.css delete mode 100644 components/popover/themes/spectrum-two.css delete mode 100644 components/popover/themes/spectrum.css delete mode 100644 components/progressbar/themes/express.css delete mode 100644 components/progressbar/themes/spectrum-two.css delete mode 100644 components/progressbar/themes/spectrum.css delete mode 100644 components/progresscircle/themes/express.css delete mode 100644 components/progresscircle/themes/spectrum-two.css delete mode 100644 components/progresscircle/themes/spectrum.css delete mode 100644 components/radio/themes/express.css delete mode 100644 components/radio/themes/spectrum-two.css delete mode 100644 components/radio/themes/spectrum.css delete mode 100644 components/rating/themes/express.css delete mode 100644 components/rating/themes/spectrum-two.css delete mode 100644 components/rating/themes/spectrum.css delete mode 100644 components/search/themes/express.css delete mode 100644 components/search/themes/spectrum-two.css delete mode 100644 components/search/themes/spectrum.css delete mode 100644 components/sidenav/themes/express.css delete mode 100644 components/sidenav/themes/spectrum-two.css delete mode 100644 components/sidenav/themes/spectrum.css delete mode 100644 components/slider/themes/express.css delete mode 100644 components/slider/themes/spectrum-two.css delete mode 100644 components/slider/themes/spectrum.css delete mode 100644 components/splitview/themes/express.css delete mode 100644 components/splitview/themes/spectrum-two.css delete mode 100644 components/splitview/themes/spectrum.css delete mode 100644 components/steplist/themes/express.css delete mode 100644 components/steplist/themes/spectrum-two.css delete mode 100644 components/steplist/themes/spectrum.css delete mode 100644 components/stepper/themes/express.css delete mode 100644 components/stepper/themes/spectrum-two.css delete mode 100644 components/stepper/themes/spectrum.css delete mode 100644 components/swatch/themes/express.css delete mode 100644 components/swatch/themes/spectrum-two.css delete mode 100644 components/swatch/themes/spectrum.css delete mode 100644 components/switch/themes/express.css delete mode 100644 components/switch/themes/spectrum-two.css delete mode 100644 components/switch/themes/spectrum.css delete mode 100644 components/table/themes/express.css delete mode 100644 components/table/themes/spectrum-two.css delete mode 100644 components/table/themes/spectrum.css delete mode 100644 components/tabs/themes/express.css delete mode 100644 components/tabs/themes/spectrum-two.css delete mode 100644 components/tabs/themes/spectrum.css delete mode 100644 components/tag/themes/express.css delete mode 100644 components/tag/themes/spectrum-two.css delete mode 100644 components/tag/themes/spectrum.css delete mode 100644 components/textfield/themes/express.css delete mode 100644 components/textfield/themes/spectrum-two.css delete mode 100644 components/textfield/themes/spectrum.css delete mode 100644 components/thumbnail/themes/express.css delete mode 100644 components/thumbnail/themes/spectrum-two.css delete mode 100644 components/thumbnail/themes/spectrum.css delete mode 100644 components/toast/themes/express.css delete mode 100644 components/toast/themes/spectrum-two.css delete mode 100644 components/toast/themes/spectrum.css delete mode 100644 components/tooltip/themes/express.css delete mode 100644 components/tooltip/themes/spectrum-two.css delete mode 100644 components/tooltip/themes/spectrum.css delete mode 100644 components/treeview/themes/express.css delete mode 100644 components/treeview/themes/spectrum-two.css delete mode 100644 components/treeview/themes/spectrum.css delete mode 100644 components/well/themes/express.css delete mode 100644 components/well/themes/spectrum-two.css delete mode 100644 components/well/themes/spectrum.css diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index c6fd8824220..e813676e215 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -98,8 +98,6 @@ jobs: files_yaml: | styles: - components/*/index.css - - components/*/themes/spectrum.css - - components/*/themes/express.css eslint: - components/*/stories/*.js plugins: diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 3853533ae77..0f0fd5272ce 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -90,7 +90,7 @@ jobs: filter_mode: diff_context level: error reporter: github-pr-review - # stylelint_input: "components/*/index.css components/*/themes/*.css" + # stylelint_input: "components/*/index.css stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx index d36ba09a9a7..3658ceb3160 100644 --- a/.storybook/guides/develop.mdx +++ b/.storybook/guides/develop.mdx @@ -31,8 +31,7 @@ For more general information about how to contribute to the Spectrum CSS project Each component has the following files: -- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component but specifically lacks any custom properties or variables. These values are sourced from the `themes` directory. -- `themes/*.css` - The theme-specific, component-level custom properties used to style the component. These files are meant to be loaded with the source styles. +- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component. - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component. - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings. - `stories/*.test.js` - The testing grid for visual regression testing in Chromatic. @@ -40,26 +39,17 @@ Each component has the following files: Each component outputs the following assets to `dist`: -- `index.css`: This asset includes the base CSS and the `themes/spectrum.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported. -- `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component. -- `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component. - -Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component. - -- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2. -- `themes/spectrum.css`: Represents the legacy Spectrum theme, aka Spectrum 1. **deprecated** -- `themes/express.css`: Represents the Express theme. **deprecated** +- `index.css`: This asset includes the base CSS. ## Adding a new component 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component. 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`. 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing. -4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum.css` asset. +4. The `index.css` file is where all of your styles will be added. 5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. - - Update the `*.mdx` file with the documentation for your component. _Note_: Because we use scoped packages, before it can be published, you must manually publish the new component as public: @@ -116,8 +106,6 @@ CSS assets will be run through their respective postcss configurations. This mea ```js import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; ``` We are leaning on Storybook's `@storybook/web-components-vite` framework configuration as our stories rely on lit for dynamic attribute assignment. @@ -345,8 +333,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; export const Template = ( { diff --git a/.vscode/settings.json b/.vscode/settings.json index c940cee9d9d..0b67eb8639e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -101,10 +101,8 @@ } ], "cssVariables.lookupFiles": [ - "${workspaceFolder}/tokens/dist/css/index.css", - "${workspaceFolder}/tokens/dist/css/*.css", - "${workspaceFolder}/components/*/index.css", - "${workspaceFolder}/components/*/themes/*.css" + "${workspaceFolder}/tokens/**/*.css", + "${workspaceFolder}/components/*/index.css" ], "docthis.includeDescriptionTag": true, "docthis.inferTypesFromNames": true, diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 3f3e89fbf15..94f78a21d2b 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -198,11 +198,7 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack" ], - "system-theme": [ - "--system-accordion-divider-color", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a7616455..e08441208df 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Accordion { + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-item-height: var(--spectrum-component-height-200); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); diff --git a/components/accordion/themes/express.css b/components/accordion/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/accordion/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css deleted file mode 100644 index 7097b1adc62..00000000000 --- a/components/accordion/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-200); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - } -} diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css deleted file mode 100644 index 572d3f1db1b..00000000000 --- a/components/accordion/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-300); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-gray-400); - --spectrum-accordion-item-content-color: var(--spectrum-gray-800); - } -} diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 3632db90bf7..60d9ccb3336 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -88,10 +88,7 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [ - "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 474499e462f..46d4a86d4a5 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionBar { + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); + --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); + --spectrum-actionbar-height: var(--spectrum-action-bar-height); --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 6bbcd38c26f..a3315e25c93 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/actiongroup": "6.1.0", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/actionbar/themes/express.css b/components/actionbar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/actionbar/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css deleted file mode 100644 index 157c2dc9294..00000000000 --- a/components/actionbar/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionBar { - /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css deleted file mode 100644 index 27971810d3d..00000000000 --- a/components/actionbar/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionBar { - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index b49b355497e..a3236639598 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-ActionButton", ".spectrum-ActionButton--sizeL", - ".spectrum-ActionButton--sizeM", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", @@ -20,11 +19,6 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", - ".spectrum-ActionButton.spectrum-ActionButton--sizeS", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", @@ -90,10 +84,7 @@ "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual", - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-actionbutton-text-to-visual" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -170,18 +161,10 @@ "--spectrum-component-height-300", "--spectrum-component-height-50", "--spectrum-component-height-75", - "--spectrum-corner-radius-medium-size-extra-large", - "--spectrum-corner-radius-medium-size-extra-small", - "--spectrum-corner-radius-medium-size-large", - "--spectrum-corner-radius-medium-size-medium", - "--spectrum-corner-radius-medium-size-small", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-background-color", "--spectrum-disabled-static-black-border-color", "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-background-color", "--spectrum-disabled-static-white-border-color", "--spectrum-disabled-static-white-content-color", "--spectrum-focus-indicator-color", @@ -216,12 +199,15 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50", "--spectrum-text-to-visual-75", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-200", "--spectrum-transparent-black-400", "--spectrum-transparent-black-500", "--spectrum-transparent-black-600", "--spectrum-transparent-black-700", "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", + "--spectrum-transparent-white-200", "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", @@ -235,64 +221,7 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-action-button-background-color-default", - "--system-action-button-background-color-disabled", - "--system-action-button-background-color-down", - "--system-action-button-background-color-focus", - "--system-action-button-background-color-hover", - "--system-action-button-background-color-selected", - "--system-action-button-background-color-selected-down", - "--system-action-button-background-color-selected-focus", - "--system-action-button-background-color-selected-hover", - "--system-action-button-border-color-default", - "--system-action-button-border-color-disabled", - "--system-action-button-border-color-down", - "--system-action-button-border-color-focus", - "--system-action-button-border-color-hover", - "--system-action-button-content-color-selected", - "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", - "--system-action-button-quiet-background-color-down", - "--system-action-button-quiet-background-color-focus", - "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-background-color-selected-disabled", - "--system-action-button-size-l-border-radius", - "--system-action-button-size-m-border-radius", - "--system-action-button-size-s-border-radius", - "--system-action-button-size-xl-border-radius", - "--system-action-button-size-xs-border-radius", - "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", - "--system-action-button-static-black-background-color-down", - "--system-action-button-static-black-background-color-focus", - "--system-action-button-static-black-background-color-hover", - "--system-action-button-static-black-background-color-selected-disabled", - "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-down", - "--system-action-button-static-black-border-color-focus", - "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-quiet-background-color-default", - "--system-action-button-static-black-quiet-background-color-disabled", - "--system-action-button-static-black-quiet-background-color-down", - "--system-action-button-static-black-quiet-background-color-focus", - "--system-action-button-static-black-quiet-background-color-hover", - "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", - "--system-action-button-static-white-background-color-down", - "--system-action-button-static-white-background-color-focus", - "--system-action-button-static-white-background-color-hover", - "--system-action-button-static-white-background-color-selected-disabled", - "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-down", - "--system-action-button-static-white-border-color-focus", - "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-quiet-background-color-default", - "--system-action-button-static-white-quiet-background-color-disabled", - "--system-action-button-static-white-quiet-background-color-down", - "--system-action-button-static-white-quiet-background-color-focus", - "--system-action-button-static-white-quiet-background-color-hover" - ], + "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index c87e5ebbf80..898e0dd01f3 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -12,7 +12,6 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; @media (forced-colors: active) { .spectrum-ActionButton { @@ -49,6 +48,25 @@ } .spectrum-ActionButton { + --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-background-color-selected-disabled: var(--spectrum-transparent-black-100); + + --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); + --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); + --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); + + --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); + --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); @@ -60,28 +78,33 @@ --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); + --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); &.spectrum-ActionButton--quiet { --spectrum-actionbutton-border-color: transparent; - } - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); } &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); + --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); @@ -102,9 +125,25 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + &, + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); + } } &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700); + --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); + + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); + /* background color _not_ selected is coming from the system theme layer */ --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); @@ -126,6 +165,31 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + &, + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); + } + } + + /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ + &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + } + + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &.is-selected { @@ -173,18 +237,6 @@ } } -.spectrum-ActionButton, -.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); -} - .spectrum-ActionButton--sizeXS { --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css deleted file mode 100644 index a2f9f796101..00000000000 --- a/components/actionbutton/themes/express.css +++ /dev/null @@ -1,71 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } -} diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css deleted file mode 100644 index 4c889f693c7..00000000000 --- a/components/actionbutton/themes/spectrum-two.css +++ /dev/null @@ -1,102 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-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-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); - - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css deleted file mode 100644 index e0c964b8dd5..00000000000 --- a/components/actionbutton/themes/spectrum.css +++ /dev/null @@ -1,71 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); - - &.spectrum-ActionButton--sizeXS, - &.spectrum-ActionButton--sizeS, - &.spectrum-ActionButton--sizeM, - &.spectrum-ActionButton--sizeL, - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } -} diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c4f40444893..f454479c5d1 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -7,10 +7,12 @@ ".spectrum-ActionGroup--compact", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", @@ -29,21 +31,26 @@ "modifiers": [ "--mod-actiongroup-border-radius", "--mod-actiongroup-border-radius-reset", + "--mod-actiongroup-button-spacing-reset", "--mod-actiongroup-gap-size-compact", + "--mod-actiongroup-horizontal-spacing-compact", "--mod-actiongroup-horizontal-spacing-regular", + "--mod-actiongroup-vertical-spacing-compact", "--mod-actiongroup-vertical-spacing-regular" ], "component": [ "--spectrum-actiongroup-border-radius", "--spectrum-actiongroup-border-radius-reset", + "--spectrum-actiongroup-button-spacing-reset", "--spectrum-actiongroup-gap-size-compact", + "--spectrum-actiongroup-horizontal-spacing-compact", "--spectrum-actiongroup-horizontal-spacing-regular", + "--spectrum-actiongroup-vertical-spacing-compact", "--spectrum-actiongroup-vertical-spacing-regular" ], "global": [ "--spectrum-corner-radius-100", "--spectrum-spacing-100", - "--spectrum-spacing-50", "--spectrum-spacing-75" ], "system-theme": [], diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 8eb51ff0eae..ac427bc8636 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -12,9 +12,15 @@ */ .spectrum-ActionGroup { - --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-gap-size-compact: 0; + + /* account for button border */ + --spectrum-actiongroup-horizontal-spacing-compact: -1px; + --spectrum-actiongroup-vertical-spacing-compact: -1px; + + --spectrum-actiongroup-button-spacing-reset: 0; + --spectrum-actiongroup-border-radius-reset: 0; + --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); } .spectrum-ActionGroup--sizeXS, @@ -73,17 +79,28 @@ /* @passthrough -- Action button styling */ --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - 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)); - } + 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 { + /* @passthrough -- Action button styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px; - &:last-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-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)); + } - 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)); - } + &:last-child { + /* @passthrough -- Action button styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px; + + 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 { z-index: 1; @@ -114,18 +131,30 @@ /* @passthrough -- Action button styling */ --mod-actionbutton-focus-indicator-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0px 0px; - 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)); - } + 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)); + } - &:last-child { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); + & + .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)); + } - 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)); - } - } + &:last-child { + /* @passthrough -- Action button styling */ + --mod-actionbutton-focus-indicator-border-radius: 0px 0px var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-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)); + 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)); + } + } } .spectrum-ActionGroup--justified .spectrum-ActionGroup-item { diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 7a88e3db4e7..4158a734cac 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -5,7 +5,7 @@ import { size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ActionGroups } from "./actiongroup.test.js"; -import { OverflowOption, TreatmentTemplate } from "./template.js"; +import { OverflowOption, Template, TreatmentTemplate } from "./template.js"; /** * An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other. @@ -282,7 +282,7 @@ JustifiedIconOnlyCompact.parameters = { export const Quiet = Template.bind({}); Quiet.tags = ["!dev"]; Quiet.args = { - areQuiet: true, + areQuiet: true, }; Quiet.parameters = { chromatic: { disableSnapshot: true }, diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 15b6983e631..d4bf3d34ee5 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -71,7 +71,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-alert-banner-neutral-background"], + "system-theme": [], "passthroughs": [ "--mod-button-margin-block", "--mod-button-margin-left", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 2f483970fb8..04701fe55f9 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AlertBanner { + --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); --spectrum-alert-banner-size: auto; diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 02c19c0f6d0..9fa192a2b47 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css deleted file mode 100644 index a86424d5e4b..00000000000 --- a/components/alertbanner/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css deleted file mode 100644 index 3e038dbd7a4..00000000000 --- a/components/alertbanner/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css deleted file mode 100644 index 1bd05c8e88f..00000000000 --- a/components/alertbanner/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 306c123b1b6..914c0406132 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -20,12 +20,9 @@ ], "component": [ "--spectrum-asset-file-background", - "--spectrum-asset-file-background-color", "--spectrum-asset-file-outline", "--spectrum-asset-folder-background", - "--spectrum-asset-folder-background-color", - "--spectrum-asset-folder-outline", - "--spectrum-asset-icon-outline-color" + "--spectrum-asset-folder-outline" ], "global": [ "--spectrum-animation-duration-100", @@ -33,11 +30,7 @@ "--spectrum-gray-25", "--spectrum-gray-500" ], - "system-theme": [ - "--system-asset-file-background-color", - "--system-asset-folder-background-color", - "--system-asset-icon-outline-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-asset-icon-background-color"] } diff --git a/components/asset/index.css b/components/asset/index.css index abf5d42572f..e31f6aea3a7 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -11,13 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Asset { - --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); - --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); - --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); - --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); + --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200))); + --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25))); + --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); display: flex; align-items: center; diff --git a/components/asset/themes/express.css b/components/asset/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/asset/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css deleted file mode 100644 index 5eda732011b..00000000000 --- a/components/asset/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-200); - --spectrum-asset-file-background-color: var(--spectrum-gray-25); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css deleted file mode 100644 index 8b2b12ee379..00000000000 --- a/components/asset/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-300); - --spectrum-asset-file-background-color: var(--spectrum-gray-50); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 1c86dc47523..bbe547339cb 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -176,12 +176,7 @@ "--spectrum-transparent-black-300", "--spectrum-white" ], - "system-theme": [ - "--system-asset-card-background-color", - "--system-asset-card-overlay-background-color", - "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-box-shadow-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-assectcard-border-color-selected-down", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 26881a3f45f..b776e53414b 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -11,10 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* outer container, unstyled */ .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); + --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); + /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css deleted file mode 100644 index 63115538f15..00000000000 --- a/components/assetcard/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%); - } -} diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css deleted file mode 100644 index f38045fb758..00000000000 --- a/components/assetcard/themes/spectrum-two.css +++ /dev/null @@ -1,21 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css deleted file mode 100644 index c3e7ef9e0a8..00000000000 --- a/components/assetcard/themes/spectrum.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-200); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 6aa102a6dc1..4a4d1f31381 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -93,10 +93,7 @@ "--spectrum-spacing-600", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-assetlist-border-color-key-focus", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 742070edbd4..28801db0d89 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AssetList { + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-assetlist-width: 272px; --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/assetlist/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css deleted file mode 100644 index 0624623caf5..00000000000 --- a/components/assetlist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - } -} diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css deleted file mode 100644 index 30f67757c2e..00000000000 --- a/components/assetlist/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/badge/stories/template.js b/components/badge/stories/template.js index 0ec22bbe5b2..ee071e455fe 100644 --- a/components/badge/stories/template.js +++ b/components/badge/stories/template.js @@ -1,4 +1,3 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index 1a77f387fc3..fcfb7620378 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -8,7 +8,6 @@ ".spectrum-Button .spectrum-ProgressCircle", ".spectrum-Button--noWrap .spectrum-Button-label", ".spectrum-Button--sizeL", - ".spectrum-Button--sizeM", ".spectrum-Button--sizeS", ".spectrum-Button--sizeXL", ".spectrum-Button-label", @@ -69,7 +68,6 @@ "a.spectrum-Button" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-bold-font-weight", "--mod-button-animation-duration", "--mod-button-background-color-default", @@ -115,8 +113,6 @@ "--mod-button-top-to-icon", "--mod-button-top-to-text", "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-sans-font-family-stack", "--mod-static-black-focus-indicator-color" ], "component": [ @@ -290,105 +286,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-button-background-color-default", - "--system-button-background-color-disabled", - "--system-button-background-color-down", - "--system-button-background-color-focus", - "--system-button-background-color-hover", - "--system-button-border-color-default", - "--system-button-border-color-disabled", - "--system-button-border-color-down", - "--system-button-border-color-focus", - "--system-button-border-color-hover", - "--system-button-primary-content-color-default", - "--system-button-primary-content-color-down", - "--system-button-primary-content-color-focus", - "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-down", - "--system-button-primary-outline-background-color-focus", - "--system-button-primary-outline-background-color-hover", - "--system-button-secondary-background-color-default", - "--system-button-secondary-not-outline-background-color-down", - "--system-button-secondary-not-outline-background-color-focus", - "--system-button-secondary-not-outline-background-color-hover", - "--system-button-secondary-outline-background-color-down", - "--system-button-secondary-outline-background-color-focus", - "--system-button-secondary-outline-background-color-hover", - "--system-button-secondary-outline-border-color-default", - "--system-button-selected-background-color-default", - "--system-button-selected-background-color-down", - "--system-button-selected-background-color-focus", - "--system-button-selected-background-color-hover", - "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-down", - "--system-button-static-black-background-color-focus", - "--system-button-static-black-background-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-outline-not-secondary-background-color-down", - "--system-button-static-black-outline-not-secondary-background-color-focus", - "--system-button-static-black-outline-not-secondary-background-color-hover", - "--system-button-static-black-outline-not-secondary-border-color-default", - "--system-button-static-black-outline-not-secondary-border-color-down", - "--system-button-static-black-outline-not-secondary-border-color-focus", - "--system-button-static-black-outline-not-secondary-border-color-hover", - "--system-button-static-black-outline-not-secondary-content-color-default", - "--system-button-static-black-outline-not-secondary-content-color-down", - "--system-button-static-black-outline-not-secondary-content-color-focus", - "--system-button-static-black-outline-not-secondary-content-color-hover", - "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-down", - "--system-button-static-black-secondary-background-color-focus", - "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-outline-background-color-down", - "--system-button-static-black-secondary-outline-background-color-focus", - "--system-button-static-black-secondary-outline-background-color-hover", - "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-down", - "--system-button-static-black-secondary-outline-border-color-focus", - "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-down", - "--system-button-static-white-background-color-focus", - "--system-button-static-white-background-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-outline-not-secondary-background-color-down", - "--system-button-static-white-outline-not-secondary-background-color-focus", - "--system-button-static-white-outline-not-secondary-background-color-hover", - "--system-button-static-white-outline-not-secondary-border-color-default", - "--system-button-static-white-outline-not-secondary-border-color-down", - "--system-button-static-white-outline-not-secondary-border-color-focus", - "--system-button-static-white-outline-not-secondary-border-color-hover", - "--system-button-static-white-outline-not-secondary-content-color-default", - "--system-button-static-white-outline-not-secondary-content-color-down", - "--system-button-static-white-outline-not-secondary-content-color-focus", - "--system-button-static-white-outline-not-secondary-content-color-hover", - "--system-button-static-white-outline-secondary-background-color-down", - "--system-button-static-white-outline-secondary-background-color-focus", - "--system-button-static-white-outline-secondary-background-color-hover", - "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-down", - "--system-button-static-white-secondary-background-color-focus", - "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-down", - "--system-button-static-white-secondary-outline-border-color-focus", - "--system-button-static-white-secondary-outline-border-color-hover" - ], + "system-theme": [], "passthroughs": [ "--mod-progress-circle-position", "--mod-progress-circle-thickness", diff --git a/components/button/index.css b/components/button/index.css index 69d17903f9e..bea80baa424 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -12,10 +12,21 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; -.spectrum-Button, -.spectrum-Button--sizeM { +.spectrum-Button { + --spectrum-button-background-color-default: var(--spectrum-gray-50); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-sized-height: var(--spectrum-component-height-100); --spectrum-button-sized-font-size: var(--spectrum-font-size-100); @@ -27,6 +38,154 @@ --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + + &.is-selected { + --mod-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --mod-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --mod-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --mod-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + } + + &.spectrum-Button--primary { + --mod-button-content-color-default: var(--spectrum-gray-25); + --mod-button-content-color-hover: var(--spectrum-gray-25); + --mod-button-content-color-down: var(--spectrum-gray-25); + --mod-button-content-color-focus: var(--spectrum-gray-25); + + &.spectrum-Button--outline { + --mod-button-background-color-hover: var(--spectrum-gray-200); + --mod-button-background-color-down: var(--spectrum-gray-400); + --mod-button-background-color-focus: var(--spectrum-gray-200); + } + } + + &.spectrum-Button--secondary { + --mod-button-background-color-default: var(--spectrum-gray-100); + + &:not(.spectrum-Button--outline) { + --mod-button-background-color-hover: var(--spectrum-gray-200); + --mod-button-background-color-down: var(--spectrum-gray-400); + --mod-button-background-color-focus: var(--spectrum-gray-200); + } + + &.spectrum-Button--outline { + --mod-button-background-color-hover: var(--spectrum-gray-200); + --mod-button-background-color-down: var(--spectrum-gray-400); + --mod-button-background-color-focus: var(--spectrum-gray-200); + + --mod-button-border-color-default: var(--spectrum-gray-200); + } + } + + /* static white: double the selector, double the fun (specificity...) */ + &.spectrum-Button--staticWhite { + --mod-button-background-color-default: var(--spectrum-transparent-white-900); + --mod-button-background-color-hover: var(--spectrum-transparent-white-1000); + --mod-button-background-color-down: var(--spectrum-transparent-white-1000); + --mod-button-background-color-focus: var(--spectrum-transparent-white-1000); + + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); + + &.spectrum-Button--secondary { + --mod-button-background-color-default: var(--spectrum-transparent-white-300); + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); + + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + + &.spectrum-Button--outline { + --mod-button-border-color-default: var(--spectrum-transparent-white-400); + --mod-button-border-color-hover: var(--spectrum-transparent-white-500); + --mod-button-border-color-down: var(--spectrum-transparent-white-600); + --mod-button-border-color-focus: var(--spectrum-transparent-white-500); + } + } + + &.spectrum-Button--outline { + &:not(.spectrum-Button--secondary) { + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); + + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + + --mod-button-border-color-default: var(--spectrum-transparent-white-900); + --mod-button-border-color-hover: var(--spectrum-transparent-white-1000); + --mod-button-border-color-down: var(--spectrum-transparent-white-1000); + --mod-button-border-color-focus: var(--spectrum-transparent-white-1000); + } + + &.spectrum-Button--secondary { + --mod-button-background-color-hover: var(--spectrum-transparent-white-400); + --mod-button-background-color-down: var(--spectrum-transparent-white-500); + --mod-button-background-color-focus: var(--spectrum-transparent-white-400); + } + } + } + + /* static black */ + &.spectrum-Button--staticBlack { + --mod-button-background-color-default: var(--spectrum-transparent-black-900); + --mod-button-background-color-hover: var(--spectrum-transparent-black-1000); + --mod-button-background-color-down: var(--spectrum-transparent-black-1000); + --mod-button-background-color-focus: var(--spectrum-transparent-black-1000); + + --mod-button-content-color-default: var(--spectrum-white); + --mod-button-content-color-hover: var(--spectrum-white); + --mod-button-content-color-down: var(--spectrum-white); + --mod-button-content-color-focus: var(--spectrum-white); + + &.spectrum-Button--secondary { + --mod-button-background-color-default: var(--spectrum-transparent-black-300); + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); + + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); + + &.spectrum-Button--outline { + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); + + --mod-button-border-color-default: var(--spectrum-transparent-black-400); + --mod-button-border-color-hover: var(--spectrum-transparent-black-500); + --mod-button-border-color-down: var(--spectrum-transparent-black-600); + --mod-button-border-color-focus: var(--spectrum-transparent-black-500); + } + } + + &.spectrum-Button--outline { + &:not(.spectrum-Button--secondary) { + --mod-button-background-color-hover: var(--spectrum-transparent-black-400); + --mod-button-background-color-down: var(--spectrum-transparent-black-500); + --mod-button-background-color-focus: var(--spectrum-transparent-black-400); + + --mod-button-content-color-default: var(--spectrum-black); + --mod-button-content-color-hover: var(--spectrum-black); + --mod-button-content-color-down: var(--spectrum-black); + --mod-button-content-color-focus: var(--spectrum-black); + + --mod-button-border-color-default: var(--spectrum-transparent-black-500); + --mod-button-border-color-hover: var(--spectrum-transparent-black-600); + --mod-button-border-color-down: var(--spectrum-transparent-black-700); + --mod-button-border-color-focus: var(--spectrum-transparent-black-600); + } + } + } } .spectrum-Button--sizeS { diff --git a/components/button/themes/express.css b/components/button/themes/express.css deleted file mode 100644 index 9c43b7cb5dc..00000000000 --- a/components/button/themes/express.css +++ /dev/null @@ -1,37 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Button { - --mod-button-background-color-default: var(--spectrum-gray-200); - --mod-button-background-color-hover: var(--spectrum-gray-300); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-300); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - &.is-selected { - --mod-button-background-color-default: var(--spectrum-neutral-background-color-default); - --mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --mod-button-background-color-down: var(--spectrum-neutral-background-color-down); - --mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - } -} diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css deleted file mode 100644 index 79af18b6fde..00000000000 --- a/components/button/themes/spectrum-two.css +++ /dev/null @@ -1,177 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - &.is-selected { - --mod-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --mod-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --mod-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --mod-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } - - &.spectrum-Button--primary { - --mod-button-content-color-default: var(--spectrum-gray-25); - --mod-button-content-color-hover: var(--spectrum-gray-25); - --mod-button-content-color-down: var(--spectrum-gray-25); - --mod-button-content-color-focus: var(--spectrum-gray-25); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - } - } - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-gray-100); - - &:not(.spectrum-Button--outline) { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - } - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - - --mod-button-border-color-default: var(--spectrum-gray-200); - } - } - - /* static white: double the selector, double the fun (specificity...) */ - &.spectrum-Button--staticWhite { - --mod-button-background-color-default: var(--spectrum-transparent-white-900); - --mod-button-background-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-background-color-down: var(--spectrum-transparent-white-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-white-1000); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-white-300); - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --mod-button-border-color-default: var(--spectrum-transparent-white-400); - --mod-button-border-color-hover: var(--spectrum-transparent-white-500); - --mod-button-border-color-down: var(--spectrum-transparent-white-600); - --mod-button-border-color-focus: var(--spectrum-transparent-white-500); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-border-color-default: var(--spectrum-transparent-white-900); - --mod-button-border-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-border-color-down: var(--spectrum-transparent-white-1000); - --mod-button-border-color-focus: var(--spectrum-transparent-white-1000); - } - - &.spectrum-Button--secondary { - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - } - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --mod-button-background-color-default: var(--spectrum-transparent-black-900); - --mod-button-background-color-hover: var(--spectrum-transparent-black-1000); - --mod-button-background-color-down: var(--spectrum-transparent-black-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-black-1000); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-black-300); - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-border-color-default: var(--spectrum-transparent-black-400); - --mod-button-border-color-hover: var(--spectrum-transparent-black-500); - --mod-button-border-color-down: var(--spectrum-transparent-black-600); - --mod-button-border-color-focus: var(--spectrum-transparent-black-500); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-border-color-default: var(--spectrum-transparent-black-500); - --mod-button-border-color-hover: var(--spectrum-transparent-black-600); - --mod-button-border-color-down: var(--spectrum-transparent-black-700); - --mod-button-border-color-focus: var(--spectrum-transparent-black-600); - } - } - } - } -} diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css deleted file mode 100644 index 75d3d9623f3..00000000000 --- a/components/button/themes/spectrum.css +++ /dev/null @@ -1,133 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Button { - --mod-button-background-color-default: var(--spectrum-gray-75); - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-300); - --mod-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--primary { - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-300); - --mod-button-background-color-focus: var(--spectrum-gray-300); - } - } - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-gray-200); - - &:not(.spectrum-Button--outline) { - --mod-button-background-color-hover: var(--spectrum-gray-300); - --mod-button-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-300); - --mod-button-background-color-focus: var(--spectrum-gray-300); - - --mod-button-border-color-default: var(--spectrum-gray-300); - } - } - - &.spectrum-Button--staticWhite { - --mod-button-background-color-default: var(--spectrum-transparent-white-800); - --mod-button-background-color-hover: var(--spectrum-transparent-white-900); - --mod-button-background-color-down: var(--spectrum-transparent-white-900); - --mod-button-background-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-white-200); - --mod-button-background-color-hover: var(--spectrum-transparent-white-300); - --mod-button-background-color-down: var(--spectrum-transparent-white-400); - --mod-button-background-color-focus: var(--spectrum-transparent-white-300); - - &.spectrum-Button--outline { - --mod-button-border-color-default: var(--spectrum-transparent-white-300); - --mod-button-border-color-hover: var(--spectrum-transparent-white-400); - --mod-button-border-color-down: var(--spectrum-transparent-white-500); - --mod-button-border-color-focus: var(--spectrum-transparent-white-400); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-white-300); - --mod-button-background-color-down: var(--spectrum-transparent-white-400); - --mod-button-background-color-focus: var(--spectrum-transparent-white-300); - - --mod-button-border-color-default: var(--spectrum-transparent-white-800); - --mod-button-border-color-hover: var(--spectrum-transparent-white-900); - --mod-button-border-color-down: var(--spectrum-transparent-white-900); - --mod-button-border-color-focus: var(--spectrum-transparent-white-900); - } - - &.spectrum-Button--secondary { - --mod-button-background-color-hover: var(--spectrum-transparent-white-300); - --mod-button-background-color-down: var(--spectrum-transparent-white-400); - --mod-button-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } - - &.spectrum-Button--staticBlack { - --mod-button-background-color-default: var(--spectrum-transparent-black-800); - --mod-button-background-color-hover: var(--spectrum-transparent-black-900); - --mod-button-background-color-down: var(--spectrum-transparent-black-900); - --mod-button-background-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-black-200); - --mod-button-background-color-hover: var(--spectrum-transparent-black-300); - --mod-button-background-color-down: var(--spectrum-transparent-black-400); - --mod-button-background-color-focus: var(--spectrum-transparent-black-300); - - &.spectrum-Button--outline { - --mod-button-border-color-default: var(--spectrum-transparent-black-300); - --mod-button-border-color-hover: var(--spectrum-transparent-black-400); - --mod-button-border-color-down: var(--spectrum-transparent-black-500); - --mod-button-border-color-focus: var(--spectrum-transparent-black-400); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-black-300); - --mod-button-background-color-down: var(--spectrum-transparent-black-400); - --mod-button-background-color-focus: var(--spectrum-transparent-black-300); - - --mod-button-border-color-default: var(--spectrum-transparent-black-400); - --mod-button-border-color-hover: var(--spectrum-transparent-black-500); - --mod-button-border-color-down: var(--spectrum-transparent-black-600); - --mod-button-border-color-focus: var(--spectrum-transparent-black-500); - } - - &.spectrum-Button--secondary { - --mod-button-background-color-hover: var(--spectrum-transparent-black-300); - --mod-button-background-color-down: var(--spectrum-transparent-black-400); - --mod-button-background-color-focus: var(--spectrum-transparent-black-300); - } - } - } - } -} diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 523a464c6df..38d29f26e39 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -2,13 +2,15 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ButtonGroup", - ".spectrum-ButtonGroup--sizeS", - ".spectrum-ButtonGroup--vertical", - ".spectrum-ButtonGroup-item" + ".spectrum-ButtonGroup-item", + ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", + ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], "modifiers": [ "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing" + "--mod-buttongroup-spacing", + "--mod-buttongroup-spacing-horizontal", + "--mod-buttongroup-spacing-vertical" ], "component": [ "--spectrum-buttongroup-display", diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 666239f687b..05019824787 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -12,19 +12,24 @@ */ .spectrum-ButtonGroup { - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-300)); + /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ + --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-300))); --spectrum-buttongroup-display: flex; --spectrum-buttongroup-flex-direction: row; - --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, flex-start); -} + --spectrum-buttongroup-justify-content: var(--mod-buttongroup-justify-content, normal); -.spectrum-ButtonGroup--sizeS { - --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--spectrum-spacing-200)); -} + &.spectrum-ButtonGroup--sizeS { + /* @deprecated --mod-buttongroup-spacing-horizontal -- replaced by --mod-buttongroup-spacing */ + --spectrum-buttongroup-spacing: var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))); + } + + &.spectrum-ButtonGroup--vertical { + /* @deprecated --mod-buttongroup-spacing-vertical -- replaced by generic --mod-buttongroup-spacing */ + --mod-buttongroup-spacing: var(--mod-buttongroup-spacing-vertical); -.spectrum-ButtonGroup--vertical { - --spectrum-buttongroup-display: inline-flex; - --spectrum-buttongroup-flex-direction: column; + --spectrum-buttongroup-display: inline-flex; + --spectrum-buttongroup-flex-direction: column; + } } .spectrum-ButtonGroup { diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041f..d7d0632f6ae 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -176,7 +176,7 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "system-theme": ["--system-calendar-day-background-color-selected-disabled"], + "system-theme": [], "passthroughs": [ "--mod-actionbutton-content-color-default", "--mod-actionbutton-edge-to-text", diff --git a/components/calendar/index.css b/components/calendar/index.css index 2ca1bc289aa..3a641fa47f8 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Calendar { + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); --spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200)); diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/calendar/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css deleted file mode 100644 index b14c7134359..00000000000 --- a/components/calendar/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); - } -} diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css deleted file mode 100644 index 368d50d51e8..00000000000 --- a/components/calendar/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4); - } -} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 54eb899211d..b6b033a6404 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -215,13 +215,7 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [ - "--system-card-border-color", - "--system-card-border-color-hover", - "--system-card-divider-color", - "--system-card-preview-background-color", - "--system-card-preview-background-color-hover" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/card/index.css b/components/card/index.css index f56599c17c4..e6cabc897e4 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -11,9 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Card { + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); + --spectrum-card-divider-color: var(--spectrum-gray-200); + --spectrum-card-preview-background-color: var(--spectrum-gray-100); + --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); + /* Default Layout */ --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color)); --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400)); diff --git a/components/card/themes/express.css b/components/card/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/card/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css deleted file mode 100644 index 2ef275418ee..00000000000 --- a/components/card/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-100); - --spectrum-card-border-color-hover: var(--spectrum-gray-200); - --spectrum-card-divider-color: var(--spectrum-gray-200); - --spectrum-card-preview-background-color: var(--spectrum-gray-100); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css deleted file mode 100644 index a1906d601bd..00000000000 --- a/components/card/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-divider-color: var(--spectrum-gray-300); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - } -} diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index fcfbcf86abc..0cf77653159 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -208,14 +208,7 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-checkbox-checkmark-color", - "--system-checkbox-control-color-default", - "--system-checkbox-control-color-down", - "--system-checkbox-control-color-focus", - "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-background-color-default", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index c997e7ceca1..cf4bb5783fb 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -11,14 +11,20 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* * .spectrum-Checkbox-box::before is the Checkbox "box" * .spectrum-Checkbox-box::after is the focus indicator */ .spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); + + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); + --spectrum-checkbox-control-corner-radius: 2px; + /* Color */ --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css deleted file mode 100644 index 1c84aa5f83b..00000000000 --- a/components/checkbox/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css deleted file mode 100644 index 8632f60bce8..00000000000 --- a/components/checkbox/themes/spectrum-two.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - --spectrum-checkbox-control-corner-radius: 2px; - } -} diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css deleted file mode 100644 index 25ea7552d11..00000000000 --- a/components/checkbox/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Checkbox { - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index 9c4c6a65118..fc01bb2f197 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -72,15 +72,7 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-clear-button-background-color", - "--system-clear-button-background-color-down", - "--system-clear-button-background-color-hover", - "--system-clear-button-background-color-key-focus", - "--system-clear-button-static-white-background-color-down", - "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index edee47004ee..517093d7c3a 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -11,9 +11,12 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ClearButton { + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; + --spectrum-clear-button-height: var(--spectrum-component-height-100); --spectrum-clear-button-width: var(--spectrum-component-height-100); --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); @@ -57,6 +60,10 @@ } &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); --mod-clear-button-icon-color-down: var(--spectrum-white); diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css deleted file mode 100644 index e13724e2883..00000000000 --- a/components/clearbutton/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css deleted file mode 100644 index abba1f78556..00000000000 --- a/components/clearbutton/themes/spectrum-two.css +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); - } - } -} diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css deleted file mode 100644 index e4235fb3dff..00000000000 --- a/components/clearbutton/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ClearButton { - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300); - } - } -} diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 7ade8f98f76..2c23dfaad17 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -31,7 +31,6 @@ "a.spectrum-CloseButton" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-closebutton-align-self", "--mod-closebutton-animation-duraction", "--mod-closebutton-animation-duration", @@ -50,9 +49,7 @@ "--mod-closebutton-icon-color-hover", "--mod-closebutton-margin-inline", "--mod-closebutton-margin-top", - "--mod-closebutton-size", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-closebutton-size" ], "component": [ "--spectrum-closebutton-animation-duration", diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 45006b72dc8..98cec5bd7f4 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -164,54 +164,54 @@ a.spectrum-CloseButton { } } -/* COLORS */ - &:not(:disabled) { - background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); - - &:hover { - background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); - } - } - - &:active { - background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } - - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); - } - - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); - } - } - } - - &:disabled { - background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); - } - } + /* COLORS */ + &:not(:disabled) { + background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))); + + &:hover { + background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))); + } + } + + &:active { + background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))); + } + } + + &:focus-visible, + &.is-keyboardFocused { + background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } + + .spectrum-CloseButton-UIIcon { + color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); + } + + &:focus, + &.is-focused { + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))); + } + } + } + + &:disabled { + background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)); + + .spectrum-CloseButton-UIIcon { + color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); + } + } } .spectrum-CloseButton-UIIcon { diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 7f5bdfed878..031f1df7fb8 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,10 +1,10 @@ { "name": "@spectrum-css/closebutton", - "version": "6.1.0", + "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/?path=/docs/components-close-button--docs", + "homepage": "https://opensource.adobe.com/spectrum-css/closebutton", "repository": { "type": "git", "url": "https://github.com/adobe/spectrum-css.git", @@ -24,6 +24,13 @@ "./stories/*": "./stories/*" }, "main": "dist/index.css", + "files": [ + "dist/*", + "*.md", + "package.json", + "stories/*", + "metadata/*" + ], "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index f048e3e23b0..9407e15a352 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -53,6 +53,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = CloseButtonGroup.bind({}); diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 4e730b8529c..4f6c5d8c00e 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -43,6 +43,7 @@ export const Template = ({ size, iconName: getCloseButtonIconName(size, iconSize), setName: "ui", + useRef: false, customClasses: [`${rootClass}-UIIcon`], }, context)} @@ -66,6 +67,7 @@ const getCloseButtonIconName = (size = "m", iconSize = "regular", iconName = "Cr return `${iconName}300`; } } + // Default, "regular" icon size. switch (size) { case "s": @@ -85,14 +87,14 @@ const getCloseButtonIconName = (size = "m", iconSize = "regular", iconName = "Cr */ export const CloseButtonExample = (args, context) => Container({ withBorder: false, - content: html` - ${Container({ + content: [ + Container({ withBorder: false, direction: "column", heading: "Default", content: Template(args, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Disabled", @@ -100,6 +102,6 @@ export const CloseButtonExample = (args, context) => Container({ ...args, isDisabled: true, }, context), - }, context)} - `, + }, context), + ], }, context); diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 3582f27f459..9714f9f1ed1 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -6,6 +6,8 @@ ".spectrum-CoachIndicator-ring:first-child", ".spectrum-CoachIndicator-ring:nth-child(2)", ".spectrum-CoachIndicator-ring:nth-child(3)", + ".spectrum-CoachIndicator.spectrum-CoachIndicator--dark", + ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", @@ -29,9 +31,11 @@ "--mod-coach-indicator-quiet-ring-diameter", "--mod-coach-indicator-ring-block-size", "--mod-coach-indicator-ring-border-size", + "--mod-coach-indicator-ring-dark-color", "--mod-coach-indicator-ring-default-color", "--mod-coach-indicator-ring-diameter", "--mod-coach-indicator-ring-inline-size", + "--mod-coach-indicator-ring-light-color", "--mod-coach-indicator-top" ], "component": [ diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 88817f5c1c7..8cc7bdb8eda 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -32,7 +32,19 @@ --spectrum-coach-indicator-ring-diameter-size: var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter)); --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); } - + + /* @deprecated .spectrum-CoachIndicator--light */ + &.spectrum-CoachIndicator--light { + /* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */ + --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white)); + } + + /* @deprecated .spectrum-CoachIndicator--dark */ + &.spectrum-CoachIndicator--dark { + /* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */ + --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black)); + } + &.spectrum-CoachIndicator--staticWhite { --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); } diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca27..e3ccdfcaa6f 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -50,7 +50,7 @@ "--spectrum-disabled-background-color", "--spectrum-transparent-black-300" ], - "system-theme": ["--system-color-wheel-border-color"], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index e44d21045f0..9c0f9746c64 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows High Contrast Mode */ @media (forced-colors: active) { .spectrum-ColorWheel { @@ -24,6 +22,8 @@ } .spectrum-ColorWheel { + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/colorwheel/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css deleted file mode 100644 index b80c228ebb8..00000000000 --- a/components/colorwheel/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css deleted file mode 100644 index 9c47a280a66..00000000000 --- a/components/colorwheel/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 97b38d5f400..59df10e978b 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -18,7 +18,6 @@ ".spectrum-Combobox--quiet.spectrum-Combobox--sizeS", ".spectrum-Combobox--quiet.spectrum-Combobox--sizeXL", ".spectrum-Combobox--sizeL", - ".spectrum-Combobox--sizeM", ".spectrum-Combobox--sizeS", ".spectrum-Combobox--sizeXL", ".spectrum-Combobox-button", @@ -249,14 +248,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-combobox-background-color-disabled", - "--system-combobox-border-color-default", - "--system-combobox-border-color-focus", - "--system-combobox-border-color-focus-hover", - "--system-combobox-border-color-hover", - "--system-combobox-border-color-key-focus" - ], + "system-theme": [], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", diff --git a/components/combobox/index.css b/components/combobox/index.css index 524c396f88c..0338d879b47 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -11,13 +11,16 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Combobox { - --spectrum-combobox-inline-size: var(--spectrum-field-width); + --spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); - --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-combobox-font-size: var(--spectrum-font-size-100); @@ -30,6 +33,10 @@ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-combobox-inline-size: var(--spectrum-field-width); + --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); + --spectrum-combobox-button-width: var(--spectrum-combobox-block-size); + --spectrum-combobox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-combobox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-combobox-focus-indicator-color: var(--spectrum-focus-indicator-color); @@ -100,22 +107,6 @@ --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); } -.spectrum-Combobox, -.spectrum-Combobox--sizeM { - --spectrum-combobox-block-size: var(--spectrum-component-height-100); - --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-combobox-font-size: var(--spectrum-font-size-100); - - --spectrum-combobox-spacing-inline-icon-to-button: var(--spectrum-combo-box-visual-to-field-button-medium); - --spectrum-combobox-block-spacing-edge-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); - --spectrum-combobox-block-spacing-edge-to-alert: var(--spectrum-field-top-to-alert-icon-medium); - --spectrum-combobox-spacing-edge-to-menu: var(--spectrum-component-to-menu-medium); - --spectrum-combobox-spacing-block-start-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-combobox-spacing-block-end-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-combobox-spacing-inline-end-edge-to-text: var(--spectrum-component-edge-to-text-100); -} - .spectrum-Combobox--sizeS { --spectrum-combobox-block-size: var(--spectrum-component-height-75); --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-75); @@ -167,8 +158,13 @@ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--spectrum-field-edge-to-text-quiet); --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-medium); --spectrum-combobox-button-inline-offset: calc((var(--mod-combobox-block-size, var(--spectrum-combobox-block-size)) / 2) - (var(--mod-combobox-icon-size, var(--spectrum-combobox-icon-size)) / 2)); + --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, initial); + /* Settings for nested Picker Button component. */ + --mod-picker-button-background-color-quiet: transparent; + --mod-picker-button-border-color-quiet: transparent; + &.spectrum-Combobox--sizeS { --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-small); } @@ -184,10 +180,6 @@ &.spectrum-Combobox--sizeXL { --spectrum-combobox-spacing-label-to-combobox: var(--spectrum-field-label-to-component-quiet-extra-large); } - - /* Settings for nested Picker Button component. */ - --mod-picker-button-background-color-quiet: transparent; - --mod-picker-button-border-color-quiet: transparent; } @media (forced-colors: active) { diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css deleted file mode 100644 index 4b554c207db..00000000000 --- a/components/combobox/themes/express.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); - } -} diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css deleted file mode 100644 index 2e6ae242055..00000000000 --- a/components/combobox/themes/spectrum-two.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); - - --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - } -} diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css deleted file mode 100644 index 4e5bd9ece62..00000000000 --- a/components/combobox/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: spectrum) { - .spectrum-Combobox { - --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color); - } -} diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index f52f1b93cd6..de7bcf413f4 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -140,7 +140,7 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-date-picker-initial-height"], + "system-theme": [], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-hover-disabled", diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 7b20a28ae6b..6a5554d320e 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); + --spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100)); --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0); --spectrum-datepicker-border-width: var(--spectrum-border-width-100); diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css deleted file mode 100644 index ead071e6f18..00000000000 --- a/components/datepicker/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); - } -} diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css deleted file mode 100644 index 05b3ca88ae4..00000000000 --- a/components/datepicker/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - } -} diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/datepicker/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index 29e38855d6a..75777aed512 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -116,10 +116,7 @@ "--spectrum-gray-800", "--spectrum-line-height-200" ], - "system-theme": [ - "--system-dial-background-color-default", - "--system-dial-handle-marker-color-key-focus" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-dial-border-color", diff --git a/components/dial/index.css b/components/dial/index.css index 8aee8cef361..1db955a115f 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Dial { + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dial/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css deleted file mode 100644 index 410196c3916..00000000000 --- a/components/dial/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - } -} diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css deleted file mode 100644 index 24077607a8b..00000000000 --- a/components/dial/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - } -} diff --git a/components/dialog/package.json b/components/dialog/package.json index 019f93ce9be..65247b7f680 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a485bf25e3b..a2bf7fb2d7d 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -42,11 +42,7 @@ "--spectrum-transparent-white-200", "--spectrum-transparent-white-800" ], - "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-static-black", - "--system-divider-background-color-static-white" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-divider-background-color"] } diff --git a/components/divider/index.css b/components/divider/index.css index 188aeea7ecf..0e01578eed1 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Divider { @@ -21,6 +19,15 @@ } .spectrum-Divider { + /* background colors */ + --spectrum-divider-background-color: var(--spectrum-gray-200); + + /* static white background colors */ + --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); + + /* static black background colors */ + --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); } diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/divider/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css deleted file mode 100644 index 58f8de9a767..00000000000 --- a/components/divider/themes/spectrum-two.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-200); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - } -} diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css deleted file mode 100644 index ecfe3f3a46a..00000000000 --- a/components/divider/themes/spectrum.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-300); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-300); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-300); - } -} diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 3044ecfc906..454b64dfb52 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -100,7 +100,7 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": ["--system-drop-zone-border-color"], + "system-theme": [], "passthroughs": [ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 2b3fbefe0c7..768ee1dd1f6 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DropZone { + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dropzone/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css deleted file mode 100644 index cf71b766c33..00000000000 --- a/components/dropzone/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - } -} diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css deleted file mode 100644 index 0760508568f..00000000000 --- a/components/dropzone/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - } -} diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 0f740ffe77e..dcbf8ad3e07 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -138,18 +138,7 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus" ], - "system-theme": [ - "--system-infield-button-background-color", - "--system-infield-button-background-color-down", - "--system-infield-button-background-color-hover", - "--system-infield-button-background-color-key-focus", - "--system-infield-button-border-color", - "--system-infield-button-border-radius", - "--system-infield-button-border-radius-reset", - "--system-infield-button-border-width", - "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-top-border-radius-start-start" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-infield-button-border-color", diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index ab1533eeacc..84bb9389975 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -11,9 +11,22 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-InfieldButton { + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + + /* Have to call these out specifically due to Express differences */ + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + + --spectrum-infield-button-background-color: var(--spectrum-gray-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); + /* Medium size is the default */ --spectrum-infield-button-height: var(--spectrum-component-height-100); --spectrum-infield-button-width: var(--spectrum-component-height-100); diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css deleted file mode 100644 index 1d930d4cfee..00000000000 --- a/components/infieldbutton/themes/express.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: 0; - --spectrum-infield-button-border-color: transparent; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css deleted file mode 100644 index 69b060d4e03..00000000000 --- a/components/infieldbutton/themes/spectrum-two.css +++ /dev/null @@ -1,31 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--spectrum-border-width-100); - --spectrum-infield-button-border-color: inherit; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-infield-button-border-radius-reset: 0; - - /* Have to call these out specifically due to Express differences */ - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - - --spectrum-infield-button-background-color: var(--spectrum-gray-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/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css deleted file mode 100644 index ff95c7c2dce..00000000000 --- a/components/infieldbutton/themes/spectrum.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-InfieldButton { - --spectrum-infield-button-background-color: var(--spectrum-gray-75); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - } -} diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 6adfbf58b24..341103900ae 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -88,16 +88,7 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "system-theme": [ - "--system-logic-button-and-background-color-disabled", - "--system-logic-button-and-background-color-hover-disabled", - "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-or-background-color-disabled", - "--system-logic-button-or-background-color-hover-disabled", - "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled" - ], + "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-focus-indicator-gap", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 4429907705b..8e1c2658fbf 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -12,9 +12,18 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-LogicButton { + --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); + + --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-logic-button-and-text-color: var(--spectrum-white); diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/logicbutton/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css deleted file mode 100644 index c0bd0d1b3fb..00000000000 --- a/components/logicbutton/themes/spectrum-two.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css deleted file mode 100644 index 4aa43a01048..00000000000 --- a/components/logicbutton/themes/spectrum.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); - } -} diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index a1732cd9a20..9972e1c046c 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -380,16 +380,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-menu-item-background-color-down", - "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-corner-radius", - "--system-menu-item-focus-indicator-offset", - "--system-menu-item-focus-indicator-outline-style", - "--system-menu-item-focus-indicator-shadow", - "--system-menu-item-spacing-multiplier" - ], + "system-theme": [], "passthroughs": [ "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", diff --git a/components/menu/index.css b/components/menu/index.css index 66f146f0348..0932c960bd4 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-Menu { --highcontrast-menu-item-background-color-default: ButtonFace; @@ -81,6 +79,18 @@ } .spectrum-Menu { + --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); + + /* Focus state styling */ + --spectrum-menu-item-focus-indicator-shadow: none; + --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); + --spectrum-menu-item-spacing-multiplier: 1; + --spectrum-menu-item-focus-indicator-outline-style: solid; + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/menu/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css deleted file mode 100644 index 11951a42550..00000000000 --- a/components/menu/themes/spectrum-two.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: none; - --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); - --spectrum-menu-item-spacing-multiplier: 1; - --spectrum-menu-item-focus-indicator-outline-style: solid; - } -} diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css deleted file mode 100644 index 0836ce0774f..00000000000 --- a/components/menu/themes/spectrum.css +++ /dev/null @@ -1,32 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: 0; - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: inset; - --spectrum-menu-item-focus-indicator-offset: 0; - --spectrum-menu-item-spacing-multiplier: 0; - --spectrum-menu-item-focus-indicator-outline-style: none; - } -} diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 950d9fca3c6..155ef5729ee 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -46,7 +46,7 @@ "--spectrum-corner-radius-100", "--spectrum-dialog-confirm-entry-animation-distance" ], - "system-theme": ["--system-modal-background-color"], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/index.css b/components/modal/index.css index 8a5e2e9ad95..dd589b0018b 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -12,9 +12,10 @@ */ @import "@spectrum-css/commons/overlay.css"; -@import "./themes/spectrum-two.css"; .spectrum-Modal { + --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); + --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/modal/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css deleted file mode 100644 index c31756dcdae..00000000000 --- a/components/modal/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - } -} diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css deleted file mode 100644 index f637e6f343e..00000000000 --- a/components/modal/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-gray-100); - } -} diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 8b62a6c4c3a..5c43722cc69 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -304,22 +304,7 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-picker-background-color-active", - "--system-picker-background-color-default", - "--system-picker-background-color-default-open", - "--system-picker-background-color-hover", - "--system-picker-background-color-hover-open", - "--system-picker-background-color-key-focus", - "--system-picker-border-color-active", - "--system-picker-border-color-default", - "--system-picker-border-color-default-open", - "--system-picker-border-color-disabled", - "--system-picker-border-color-hover", - "--system-picker-border-color-hover-open", - "--system-picker-border-color-key-focus", - "--system-picker-border-width" - ], + "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/picker/index.css b/components/picker/index.css index 53dcb003ce3..ddb1b63544d 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -11,10 +11,26 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-border-color-default: var(--spectrum-gray-800); + --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); + --spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); + --spectrum-picker-border-color-active: var(--spectrum-gray-700); + --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); + --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-picker-border-width: var(--spectrum-border-width-100); + /* font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css deleted file mode 100644 index bb521933e6b..00000000000 --- a/components/picker/themes/express.css +++ /dev/null @@ -1,36 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-200); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-border-color-default: transparent; - --spectrum-picker-border-color-default-open: transparent; - --spectrum-picker-border-color-hover: transparent; - --spectrum-picker-border-color-hover-open: transparent; - --spectrum-picker-border-color-active: transparent; - --spectrum-picker-border-color-key-focus: transparent; - - --spectrum-picker-border-width: 0px; - } -} diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css deleted file mode 100644 index 3d481512294..00000000000 --- a/components/picker/themes/spectrum-two.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-100); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-800); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css deleted file mode 100644 index 0e15e162fe0..00000000000 --- a/components/picker/themes/spectrum.css +++ /dev/null @@ -1,32 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-75); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --spectrum-picker-border-color-disabled: transparent; - } -} diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 27643d6fd25..480f8b733a2 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -137,18 +137,7 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50" ], - "system-theme": [ - "--system-picker-button-background-color", - "--system-picker-button-background-color-down", - "--system-picker-button-background-color-hover", - "--system-picker-button-background-color-key-focus", - "--system-picker-button-border-color", - "--system-picker-button-border-radius", - "--system-picker-button-border-radius-rounded-sided", - "--system-picker-button-border-radius-sided", - "--system-picker-button-border-width", - "--system-picker-button-padding" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index d9404687aca..5114b50d712 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-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: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + + /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ + --spectrum-picker-button-padding: 4px; + --spectrum-picker-button-height: var(--spectrum-component-height-100); --spectrum-picker-button-width: var(--spectrum-component-height-100); --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css deleted file mode 100644 index 9dbd1a7fa4a..00000000000 --- a/components/pickerbutton/themes/express.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css deleted file mode 100644 index fb132a104e9..00000000000 --- a/components/pickerbutton/themes/spectrum-two.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-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: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ - --spectrum-picker-button-padding: 4px; - } -} diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css deleted file mode 100644 index 85c3b9aaf9e..00000000000 --- a/components/pickerbutton/themes/spectrum.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-75); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-button-border-color: inherit; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-button-border-radius-rounded-sided: 0; - --spectrum-picker-button-border-radius-sided: 0; - --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index 234562ed9ae..d0294a34b6a 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -149,7 +149,7 @@ "--spectrum-gray-400", "--spectrum-spacing-100" ], - "system-theme": ["--system-popover-border-width"], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-popover-border-color"] } diff --git a/components/popover/index.css b/components/popover/index.css index 080412ed506..45c41dde7ae 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .spectrum-Popover { + --spectrum-popover-border-width: var(--spectrum-border-width-100); + /* animation distance is equal to and responsible for popover offset */ --spectrum-popover-animation-distance: var(--spectrum-spacing-100); diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css deleted file mode 100644 index 32c92bf71b5..00000000000 --- a/components/popover/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Popover { - --spectrum-popover-border-width: 0; - } -} diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css deleted file mode 100644 index 80c0cdc94c4..00000000000 --- a/components/popover/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/popover/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3294d6c477a..b5ba3032da2 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", - ".spectrum-ProgressBar--sizeM", ".spectrum-ProgressBar--sizeS", ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar-fill", @@ -102,10 +101,7 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-progress-bar-track-color", - "--system-progress-bar-track-color-white" - ], + "system-theme": [], "passthroughs": ["--mod-fieldlabel-font-size"], "high-contrast": [ "--highcontrast-progressbar-fill-color", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 648c492df0f..b51319a58a0 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -11,10 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-ProgressBar { + --spectrum-progressbar-track-color: var(--spectrum-gray-200); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); -.spectrum-ProgressBar, -.spectrum-ProgressBar--sizeM { --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); /* @todo should this be --spectrum-progress-bar-thickness-medium? */ diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/progressbar/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css deleted file mode 100644 index 3b705ef64c4..00000000000 --- a/components/progressbar/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-200); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); - } -} diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css deleted file mode 100644 index 3760cc4cfc4..00000000000 --- a/components/progressbar/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); - } -} diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 82493f14621..9148d61fb7f 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -107,17 +107,10 @@ "global": [ "--spectrum-accent-content-color-default", "--spectrum-gray-200", - "--spectrum-gray-300", "--spectrum-transparent-white-1000", - "--spectrum-transparent-white-300", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-900" - ], - "system-theme": [ - "--system-progress-circle-fill-border-color-over-background", - "--system-progress-circle-track-border-color", - "--system-progress-circle-track-border-color-over-background" + "--spectrum-transparent-white-400" ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-progress-circle-fill-border-color", diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 019cbb78bbd..e3c32f3ff3e 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-ProgressCircle { @@ -31,17 +29,14 @@ .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); + + --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); - /* over background unfilled border color */ - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - - /* over background progress fill border color */ - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - /* track border style */ --spectrum-progress-circle-track-border-style: solid; diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/progresscircle/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css deleted file mode 100644 index 93464f22940..00000000000 --- a/components/progresscircle/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); - } -} diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css deleted file mode 100644 index 2d0e45eece1..00000000000 --- a/components/progresscircle/themes/spectrum.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - } -} diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index b94c6dfcf90..bf7160225d6 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -167,13 +167,7 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-radio-button-background-color", - "--system-radio-button-border-color-default", - "--system-radio-button-border-color-down", - "--system-radio-button-border-color-focus", - "--system-radio-button-border-color-hover" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-radio-button-background-color", diff --git a/components/radio/index.css b/components/radio/index.css index f531d01f8dd..c391935c97e 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* * Radio: * ::before is to style the input circle (selection indicator) @@ -20,6 +18,14 @@ */ .spectrum-Radio { + /* selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); + + --spectrum-radio-button-background-color: var(--spectrum-gray-50); + /* state colors for all themes */ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css deleted file mode 100644 index 8565459259d..00000000000 --- a/components/radio/themes/express.css +++ /dev/null @@ -1,26 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css deleted file mode 100644 index 48b980fc0e4..00000000000 --- a/components/radio/themes/spectrum-two.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - - --spectrum-radio-button-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css deleted file mode 100644 index 33772fcc7c9..00000000000 --- a/components/radio/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Radio { - --spectrum-radio-button-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 75ee43e0895..c6a11b9abe5 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -101,13 +101,7 @@ "--spectrum-neutral-subdued-content-color-key-focus", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-rating-icon-color-default", - "--system-rating-icon-color-down", - "--system-rating-icon-color-hover", - "--system-rating-icon-color-key-focus", - "--system-rating-indicator-border-radius" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-rating-emphasized-icon-color-default", diff --git a/components/rating/index.css b/components/rating/index.css index 02c76194916..6b2ed7acd61 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -11,9 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Rating { + --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + --spectrum-rating-indicator-border-radius: 2px; + /* Icon */ --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css deleted file mode 100644 index 1a0d5c792b2..00000000000 --- a/components/rating/themes/express.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - } -} diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css deleted file mode 100644 index 0c2a8df9260..00000000000 --- a/components/rating/themes/spectrum-two.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-rating-indicator-border-radius: 2px; - } -} diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css deleted file mode 100644 index c99df8e652f..00000000000 --- a/components/rating/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Rating { - --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index 5dacd2f6ba3..d9cf0543354 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -26,7 +26,6 @@ ".spectrum-Search-textfield:hover .spectrum-Search-icon", ".spectrum-Search.is-disabled .spectrum-Search-clearButton", ".spectrum-Search.spectrum-Search--sizeL", - ".spectrum-Search.spectrum-Search--sizeM", ".spectrum-Search.spectrum-Search--sizeS", ".spectrum-Search.spectrum-Search--sizeXL", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", @@ -149,24 +148,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-search-background-color", - "--system-search-border-color-default", - "--system-search-border-color-focus", - "--system-search-border-color-focus-hover", - "--system-search-border-color-hover", - "--system-search-border-color-key-focus", - "--system-search-border-radius", - "--system-search-edge-to-visual", - "--system-search-size-l-border-radius", - "--system-search-size-l-edge-to-visual", - "--system-search-size-m-border-radius", - "--system-search-size-m-edge-to-visual", - "--system-search-size-s-border-radius", - "--system-search-size-s-edge-to-visual", - "--system-search-size-xl-border-radius", - "--system-search-size-xl-edge-to-visual" - ], + "system-theme": [], "passthroughs": [ "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", diff --git a/components/search/index.css b/components/search/index.css index 842123e839a..d72f2223e89 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -11,9 +11,33 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + .spectrum-Search { + --spectrum-search-border-color-default: var(--spectrum-gray-500); + --spectrum-search-border-color-hover: var(--spectrum-gray-600); + --spectrum-search-border-color-focus: var(--spectrum-gray-800); + --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + + --spectrum-search-background-color: var(--spectrum-gray-25); + + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + + &.spectrum-Search--sizeS { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + } + + &.spectrum-Search--sizeL { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + } + + &.spectrum-Search--sizeXL { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + } -.spectrum-Search { /* Size / Spacing */ --spectrum-search-inline-size: var(--spectrum-field-width); --spectrum-search-block-size: var(--spectrum-component-height-100); diff --git a/components/search/themes/express.css b/components/search/themes/express.css deleted file mode 100644 index 002ab9cecb6..00000000000 --- a/components/search/themes/express.css +++ /dev/null @@ -1,47 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Search { - --spectrum-search-border-color-default: var(--spectrum-gray-400); - --spectrum-search-border-color-hover: var(--spectrum-gray-500); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - - &, - &.spectrum-Search--sizeM { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - } - - &.spectrum-Search--sizeS { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); - } - - &.spectrum-Search--sizeL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); - } - - &.spectrum-Search--sizeXL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); - } - } -} diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css deleted file mode 100644 index 85a34114a0a..00000000000 --- a/components/search/themes/spectrum-two.css +++ /dev/null @@ -1,45 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Search { - --spectrum-search-border-color-default: var(--spectrum-gray-500); - --spectrum-search-border-color-hover: var(--spectrum-gray-600); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-search-background-color: var(--spectrum-gray-25); - - &, - &.spectrum-Search--sizeM { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - } - - &.spectrum-Search--sizeS { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - } - - &.spectrum-Search--sizeL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - } - - &.spectrum-Search--sizeXL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - } - } -} diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css deleted file mode 100644 index 4fd1a9aae94..00000000000 --- a/components/search/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Search { - --spectrum-search-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index a0be758aa57..cad6a65dbe2 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -180,15 +180,7 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-side-nav-background-hover", - "--system-side-nav-background-hover-selected", - "--system-side-nav-background-key-focus", - "--system-side-nav-background-key-focus-selected", - "--system-side-nav-item-background-default-selected", - "--system-side-nav-item-background-down", - "--system-side-nav-item-background-down-selected" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-sidenav-background-hover", diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c0b75855d42..163a73f7590 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ .spectrum-SideNav { @@ -47,6 +45,15 @@ } .spectrum-SideNav { + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); + /* focus indicator */ --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/sidenav/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css deleted file mode 100644 index 85869d92dbe..00000000000 --- a/components/sidenav/themes/spectrum-two.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); - } -} diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css deleted file mode 100644 index 51828a4d8bf..00000000000 --- a/components/sidenav/themes/spectrum.css +++ /dev/null @@ -1,29 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - } -} diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 9cc5b6e39fa..2ee9be1294f 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -84,7 +84,6 @@ ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", ".spectrum-Slider.spectrum-Slider--sizeL", - ".spectrum-Slider.spectrum-Slider--sizeM", ".spectrum-Slider.spectrum-Slider--sizeS", ".spectrum-Slider.spectrum-Slider--sizeXL", ".spectrum-Slider:dir(rtl)", @@ -259,29 +258,7 @@ "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-slider-handle-background-color", - "--system-slider-handle-background-color-disabled", - "--system-slider-handle-border-color", - "--system-slider-handle-border-color-down", - "--system-slider-handle-border-color-hover", - "--system-slider-handle-border-color-key-focus", - "--system-slider-handle-border-radius", - "--system-slider-handle-disabled-background-color", - "--system-slider-handle-focus-ring-color-key-focus", - "--system-slider-ramp-handle-background-color", - "--system-slider-ramp-track-color", - "--system-slider-ramp-track-color-disabled", - "--system-slider-size-l-handle-border-radius", - "--system-slider-size-m-handle-border-radius", - "--system-slider-size-s-handle-border-radius", - "--system-slider-size-xl-handle-border-radius", - "--system-slider-tick-mark-color", - "--system-slider-ticks-handle-background-color", - "--system-slider-track-color", - "--system-slider-track-corner-radius", - "--system-slider-track-fill-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", diff --git a/components/slider/index.css b/components/slider/index.css index b0e907d2132..8d5d2f9ff6c 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -11,9 +11,42 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Slider { + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + + --spectrum-slider-track-corner-radius: 2px; + + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + + &.spectrum-Slider--sizeS { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + } + + &.spectrum-Slider--sizeL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + } + + &.spectrum-Slider--sizeXL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + } + /* default sizing, matches t-shirt size M */ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css deleted file mode 100644 index f9f149f4d93..00000000000 --- a/components/slider/themes/express.css +++ /dev/null @@ -1,39 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - } -} diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css deleted file mode 100644 index b118d77cffd..00000000000 --- a/components/slider/themes/spectrum-two.css +++ /dev/null @@ -1,54 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - - --spectrum-slider-track-corner-radius: 2px; - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - } -} diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css deleted file mode 100644 index f411427cc8d..00000000000 --- a/components/slider/themes/spectrum.css +++ /dev/null @@ -1,45 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - } -} diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index 4902e8e2368..0ddade0d57e 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -81,11 +81,7 @@ "--spectrum-gray-75", "--spectrum-gray-800" ], - "system-theme": [ - "--system-split-view-background-color", - "--system-split-view-gripper-border-radius", - "--system-split-view-handle-background-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-splitview-handle-background-color", diff --git a/components/splitview/index.css b/components/splitview/index.css index 81ca706a34d..990108806d3 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-SplitView { + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); + --spectrum-splitview-gripper-border-radius: 2px; + --spectrum-splitview-vertical-width: 100%; --spectrum-splitview-vertical-gripper-width: 50%; --spectrum-splitview-vertical-gripper-outer-width: 100%; diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/splitview/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css deleted file mode 100644 index 14ef6131e5a..00000000000 --- a/components/splitview/themes/spectrum-two.css +++ /dev/null @@ -1,20 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); - --spectrum-splitview-gripper-border-radius: 2px; - } -} diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css deleted file mode 100644 index 209e46a4b3b..00000000000 --- a/components/splitview/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); - --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 3e4e5dc0bed..4d6a4a8b4ec 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -91,10 +91,7 @@ "--spectrum-gray-700", "--spectrum-gray-800" ], - "system-theme": [ - "--system-steplist-incomplete-marker-border-color", - "--system-steplist-incomplete-segment-border-block-end-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-steplist-complete-marker-background-color", diff --git a/components/steplist/index.css b/components/steplist/index.css index 7fc57091919..62900591018 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Steplist { + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); + /* The width of a step */ --spectrum-steplist-step-width: 80px; diff --git a/components/steplist/themes/express.css b/components/steplist/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/steplist/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css deleted file mode 100644 index 649e9fb4d3a..00000000000 --- a/components/steplist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); - } -} diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css deleted file mode 100644 index bfe1e5f6f8c..00000000000 --- a/components/steplist/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); - } -} diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 3d08677cea2..72885764821 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -143,31 +143,7 @@ "--spectrum-negative-border-color-key-focus", "--spectrum-text-field-minimum-width-multiplier" ], - "system-theme": [ - "--system-stepper-border-color-default", - "--system-stepper-border-color-disabled", - "--system-stepper-border-color-focus", - "--system-stepper-border-color-focus-hover", - "--system-stepper-border-color-focus-hover-invalid", - "--system-stepper-border-color-focus-invalid", - "--system-stepper-border-color-hover", - "--system-stepper-border-color-invalid", - "--system-stepper-border-color-keyboard-focus", - "--system-stepper-border-color-keyboard-focus-invalid", - "--system-stepper-border-width", - "--system-stepper-button-border-width", - "--system-stepper-button-border-width-disabled", - "--system-stepper-buttons-background-color", - "--system-stepper-buttons-background-color-disabled", - "--system-stepper-buttons-border-color", - "--system-stepper-buttons-border-color-focus", - "--system-stepper-buttons-border-color-hover", - "--system-stepper-buttons-border-color-keyboard-focus", - "--system-stepper-buttons-border-style", - "--system-stepper-buttons-border-width", - "--system-stepper-quiet-button-edge-to-fill", - "--system-stepper-quiet-buttons-border-style" - ], + "system-theme": [], "passthroughs": [ "--mod-infield-button-border-block-end-width", "--mod-infield-button-border-color", diff --git a/components/stepper/index.css b/components/stepper/index.css index e7654a6de4b..cb35ba620b7 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -11,7 +11,40 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; + .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-default: var(--spectrum-gray-500); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + + --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-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); + + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + + /** Invalid **/ + --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + + /** Disabled **/ + --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); + --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); +} + +.spectrum-Stepper--quiet { + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-button-edge-to-fill: 0; +} /* --- High contrast settings --- */ @media (forced-colors: active) { diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css deleted file mode 100644 index 724f4e973ff..00000000000 --- a/components/stepper/themes/express.css +++ /dev/null @@ -1,53 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-border-color-default: var(--spectrum-gray-400); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-border-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-stepper-buttons-border-style: solid; - --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: transparent; - --spectrum-stepper-buttons-border-color-focus: transparent; - --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; - - --spectrum-stepper-button-border-width: 0; - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: transparent; - --spectrum-stepper-border-color-focus-invalid: transparent; - --spectrum-stepper-border-color-focus-hover-invalid: transparent; - --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; - - /** Disabled **/ - --spectrum-stepper-button-border-width-disabled: 0; - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css deleted file mode 100644 index 5fc7af36cae..00000000000 --- a/components/stepper/themes/spectrum-two.css +++ /dev/null @@ -1,49 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-border-color-default: var(--spectrum-gray-500); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - - --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-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); - - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - - /** Disabled **/ - --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css deleted file mode 100644 index 1b904f9f952..00000000000 --- a/components/stepper/themes/spectrum.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Stepper { - --spectrum-stepper-border-color-disabled: transparent; - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 81819168972..67fa26286ff 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -23,7 +23,6 @@ ".spectrum-Swatch--roundingNone:before", ".spectrum-Swatch--sizeL", ".spectrum-Swatch--sizeM", - ".spectrum-Swatch--sizeS", ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", @@ -118,12 +117,7 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-swatch-border-color", - "--system-swatch-border-radius", - "--system-swatch-disabled-icon-color", - "--system-swatch-inner-border-color-selected" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-swatch-background-color-selected", diff --git a/components/swatch/index.css b/components/swatch/index.css index 8cf5132ed72..6b5644ce951 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { @@ -34,8 +32,11 @@ } } -.spectrum-Swatch, -.spectrum-Swatch--sizeS { +.spectrum-Swatch { + --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25); + --spectrum-swatch-size: var(--spectrum-swatch-size-small); --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); @@ -70,6 +71,7 @@ --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/swatch/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css deleted file mode 100644 index 3bae3a42a93..00000000000 --- a/components/swatch/themes/spectrum-two.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - /* Swatch tokens */ - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css deleted file mode 100644 index aa964cb5045..00000000000 --- a/components/swatch/themes/spectrum.css +++ /dev/null @@ -1,25 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - } -} diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 00a47cdd798..2807b50faad 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -22,7 +22,6 @@ ".spectrum-Switch .spectrum-Switch-switch:before", ".spectrum-Switch--disabled", ".spectrum-Switch--sizeL", - ".spectrum-Switch--sizeM", ".spectrum-Switch--sizeS", ".spectrum-Switch--sizeXL", ".spectrum-Switch-input", @@ -202,19 +201,7 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-switch-background-color", - "--system-switch-background-color-disabled", - "--system-switch-handle-background-color", - "--system-switch-handle-border-color-default", - "--system-switch-handle-border-color-down", - "--system-switch-handle-border-color-focus", - "--system-switch-handle-border-color-hover", - "--system-switch-handle-border-color-selected-default", - "--system-switch-handle-border-color-selected-down", - "--system-switch-handle-border-color-selected-focus", - "--system-switch-handle-border-color-selected-hover" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-switch-background-color", diff --git a/components/switch/index.css b/components/switch/index.css index 763ad359ab8..24a8e0734c5 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Switch { + --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); + --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); + + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); + --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); @@ -29,32 +41,7 @@ --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); -} - -.spectrum-Switch--disabled { - --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); -} -.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, -.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); @@ -63,6 +50,28 @@ --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); --spectrum-switch-font-size: var(--spectrum-font-size-100); + + &.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--disabled { + --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } .spectrum-Switch--sizeS { diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css deleted file mode 100644 index ac5198ba733..00000000000 --- a/components/switch/themes/express.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); - } -} diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css deleted file mode 100644 index c2ed1a192a4..00000000000 --- a/components/switch/themes/spectrum-two.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - - --spectrum-switch-background-color: var(--spectrum-gray-200); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css deleted file mode 100644 index 8b32e03d8f3..00000000000 --- a/components/switch/themes/spectrum.css +++ /dev/null @@ -1,24 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Switch { - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index e319678fb13..3c677816e3f 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -435,18 +435,7 @@ "--spectrum-transparent-white-100", "--spectrum-transparent-white-25" ], - "system-theme": [ - "--system-table-border-color", - "--system-table-divider-color", - "--system-table-header-background-color", - "--system-table-icon-color-focus", - "--system-table-icon-color-focus-hover", - "--system-table-quiet-header-background-color", - "--system-table-quiet-row-background-color", - "--system-table-row-background-color", - "--system-table-section-header-background-color", - "--system-table-summary-row-background-color" - ], + "system-theme": [], "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], "high-contrast": [ "--highcontrast-table-border-color", diff --git a/components/table/index.css b/components/table/index.css index 830e1528ff4..7ffbacf046a 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -11,7 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-Table { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); + --spectrum-table-row-background-color: var(--spectrum-gray-25); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); +} + +.spectrum-Table--quiet { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); +} /********* HIGH CONTRAST *********/ @media (forced-colors: active) { diff --git a/components/table/themes/express.css b/components/table/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/table/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css deleted file mode 100644 index 1c0a4684070..00000000000 --- a/components/table/themes/spectrum-two.css +++ /dev/null @@ -1,30 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-border-color: var(--spectrum-gray-200); - --spectrum-table-divider-color: var(--spectrum-gray-200); - --spectrum-table-row-background-color: var(--spectrum-gray-25); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); - --spectrum-table-section-header-background-color: var(--spectrum-gray-100); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); - } -} diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css deleted file mode 100644 index a40d7fabde2..00000000000 --- a/components/table/themes/spectrum.css +++ /dev/null @@ -1,34 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); - --spectrum-table-row-background-color: var(--spectrum-gray-50); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-100); - } -} diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 544295ef045..9f0ab1d93a0 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -206,10 +206,7 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tabs-divider-background-color", - "--system-tabs-font-weight" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-color", diff --git a/components/tabs/index.css b/components/tabs/index.css index 6727243f384..c2a430f3d7c 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tabs { + --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); + /* Default is Medium sizing */ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css deleted file mode 100644 index 83b105f4ac8..00000000000 --- a/components/tabs/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); - } -} diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css deleted file mode 100644 index 71d71c3c719..00000000000 --- a/components/tabs/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); - } -} diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css deleted file mode 100644 index 97cb90cac5b..00000000000 --- a/components/tabs/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); - } -} diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 10a87e4aa2c..7d15383fa92 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -280,39 +280,7 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tag-background-color", - "--system-tag-background-color-active", - "--system-tag-background-color-disabled", - "--system-tag-background-color-focus", - "--system-tag-background-color-hover", - "--system-tag-border-color", - "--system-tag-border-color-active", - "--system-tag-border-color-disabled", - "--system-tag-border-color-focus", - "--system-tag-border-color-hover", - "--system-tag-border-color-selected", - "--system-tag-border-color-selected-active", - "--system-tag-border-color-selected-focus", - "--system-tag-border-color-selected-hover", - "--system-tag-content-color", - "--system-tag-content-color-active", - "--system-tag-content-color-focus", - "--system-tag-content-color-hover", - "--system-tag-content-color-selected", - "--system-tag-size-large-clear-button-spacing-inline-end", - "--system-tag-size-large-corner-radius", - "--system-tag-size-large-label-spacing-inline-end", - "--system-tag-size-large-spacing-inline-start", - "--system-tag-size-medium-clear-button-spacing-inline-end", - "--system-tag-size-medium-corner-radius", - "--system-tag-size-medium-label-spacing-inline-end", - "--system-tag-size-medium-spacing-inline-start", - "--system-tag-size-small-clear-button-spacing-inline-end", - "--system-tag-size-small-corner-radius", - "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start" - ], + "system-theme": [], "passthroughs": [ "--mod-avatar-opacity-disabled", "--mod-clear-button-width", diff --git a/components/tag/index.css b/components/tag/index.css index 9385b432e60..23a6453edce 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -11,9 +11,47 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tag { + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); + + --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + + --spectrum-tag-border-color: var(--spectrum-gray-700); + --spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --spectrum-tag-border-color-active: var(--spectrum-gray-900); + --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + + --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); + + --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + /* disabled variant */ + --spectrum-tag-border-color-disabled: transparent; + --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ --spectrum-avatar-opacity-disabled: 0.3; diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css deleted file mode 100644 index 7c2c2e67303..00000000000 --- a/components/tag/themes/express.css +++ /dev/null @@ -1,64 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tag { - /* border */ - --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); - --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); - - /* express has pill style full corner radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); - - /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); - --spectrum-tag-border-color-hover: var(--spectrum-gray-400); - --spectrum-tag-border-color-active: var(--spectrum-gray-500); - --spectrum-tag-border-color-focus: var(--spectrum-gray-400); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* selected */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - - /* disabled */ - --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-tag-background-color-disabled: transparent; - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); - } -} diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css deleted file mode 100644 index f9c51730f48..00000000000 --- a/components/tag/themes/spectrum-two.css +++ /dev/null @@ -1,56 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Tag { - --spectrum-tag-background-color: var(--spectrum-gray-50); - --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-100); - --spectrum-tag-background-color-focus: var(--spectrum-gray-50); - - --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); - - --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - - --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - /* disabled variant */ - --spectrum-tag-border-color-disabled: transparent; - --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - } -} diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css deleted file mode 100644 index 171968e1f50..00000000000 --- a/components/tag/themes/spectrum.css +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tag { - --spectrum-tag-background-color: var(--spectrum-gray-75); - --spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --spectrum-tag-background-color-active: var(--spectrum-gray-200); - --spectrum-tag-background-color-focus: var(--spectrum-gray-75); - - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - } -} diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 7e36cb740e0..0ec4467b8ca 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -88,9 +88,6 @@ ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--sizeL", - ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], @@ -331,22 +328,7 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-textfield-background-color", - "--system-textfield-background-color-disabled", - "--system-textfield-border-color", - "--system-textfield-border-color-disabled", - "--system-textfield-border-color-focus", - "--system-textfield-border-color-focus-hover", - "--system-textfield-border-color-hover", - "--system-textfield-border-color-keyboard-focus", - "--system-textfield-border-width", - "--system-textfield-icon-spacing-block-invalid", - "--system-textfield-quiet-border-color-disabled", - "--system-textfield-size-l-icon-spacing-block-invalid", - "--system-textfield-size-s-icon-spacing-block-invalid", - "--system-textfield-size-xl-icon-spacing-block-invalid" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", diff --git a/components/textfield/index.css b/components/textfield/index.css index 329672d06a4..99b618abb08 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -11,9 +11,23 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Textfield { + --spectrum-textfield-background-color: var(--spectrum-gray-25); + --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); + + --spectrum-textfield-border-color: var(--spectrum-gray-500); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-textfield-border-width: var(--spectrum-border-width-100); + + &.spectrum-Textfield--quiet { + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + } + /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ /* disallow mod for max compatibility */ --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); @@ -100,6 +114,7 @@ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium); --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); @@ -123,6 +138,7 @@ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small); --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-75); @@ -145,6 +161,7 @@ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large); --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-100); @@ -167,6 +184,7 @@ --spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large); --spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large); --spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large); + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large); --spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large); --spectrum-textfield-character-count-font-size: var(--spectrum-font-size-200); diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css deleted file mode 100644 index 31de0c5779a..00000000000 --- a/components/textfield/themes/express.css +++ /dev/null @@ -1,28 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-400); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-500); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-textfield-border-width: var(--spectrum-border-width-200); - } -} diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css deleted file mode 100644 index aaa31d06a28..00000000000 --- a/components/textfield/themes/spectrum-two.css +++ /dev/null @@ -1,46 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-25); - --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); - - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css deleted file mode 100644 index c2e75945c6b..00000000000 --- a/components/textfield/themes/spectrum.css +++ /dev/null @@ -1,43 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-50); - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-200); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 29275bd67f3..a8cd3c64c44 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -9,7 +9,6 @@ ".spectrum-Thumbnail--size300", ".spectrum-Thumbnail--size400", ".spectrum-Thumbnail--size50", - ".spectrum-Thumbnail--size500", ".spectrum-Thumbnail--size600", ".spectrum-Thumbnail--size700", ".spectrum-Thumbnail--size75", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 7cf6a00e27e..eb1473aca22 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -11,8 +11,9 @@ * governing permissions and limitations under the License. */ -.spectrum-Thumbnail, -.spectrum-Thumbnail--size500 { +.spectrum-Thumbnail { + --spectrum-thumbnail-border-radius: 2px; + --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); } @@ -61,7 +62,6 @@ } .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: 2px; --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size)); /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/thumbnail/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css deleted file mode 100644 index 4cd647afd85..00000000000 --- a/components/thumbnail/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: 2px; - } -} diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css deleted file mode 100644 index b1abf324653..00000000000 --- a/components/thumbnail/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 8721a98ef8a..15ae32f0e48 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -99,10 +99,7 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-toast-background-color-default", - "--system-toast-divider-color" - ], + "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-toast-border-color"] } diff --git a/components/toast/index.css b/components/toast/index.css index 8b3793de9af..b8156dc08b9 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Toast { + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); + /* Hardcoded variables */ --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); diff --git a/components/toast/package.json b/components/toast/package.json index 94a06565d64..969c6f64383 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -46,7 +46,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css deleted file mode 100644 index 2de113b03ed..00000000000 --- a/components/toast/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css deleted file mode 100644 index 1097d457299..00000000000 --- a/components/toast/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); - } -} diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css deleted file mode 100644 index 3f6e05c5d78..00000000000 --- a/components/toast/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Toast { - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); - } -} diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 7f6d6d0b94d..3aea2e551ee 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -391,7 +391,7 @@ "--spectrum-white", "--spectrum-workflow-icon-size-50" ], - "system-theme": ["--system-tooltip-backgound-color-default-neutral"], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", diff --git a/components/tooltip/index.css b/components/tooltip/index.css index f488b9cbf49..b8c5806afa7 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .spectrum-Tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); /* override if additional spacing to source is required */ diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css deleted file mode 100644 index ec00162e91a..00000000000 --- a/components/tooltip/themes/express.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css deleted file mode 100644 index 42b423e3448..00000000000 --- a/components/tooltip/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/tooltip/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index 0e5af238587..86d12b5a674 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -4,7 +4,6 @@ ".spectrum-TreeView", ".spectrum-TreeView .spectrum-TreeView", ".spectrum-TreeView--sizeL", - ".spectrum-TreeView--sizeM", ".spectrum-TreeView--sizeS", ".spectrum-TreeView--sizeXL", ".spectrum-TreeView--thumbnail .spectrum-TreeView-itemThumbnail", @@ -168,10 +167,7 @@ "--spectrum-neutral-content-color-default", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-tree-view-item-background-color-focus", - "--system-tree-view-item-background-color-hover" - ], + "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-treeview-heading-color", diff --git a/components/treeview/index.css b/components/treeview/index.css index 2c55ebea3be..34fccb03caf 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-TreeView { --highcontrast-treeview-item-background-color-selected: Highlight; @@ -54,8 +52,10 @@ } } -.spectrum-TreeView, -.spectrum-TreeView--sizeM { +.spectrum-TreeView { + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); + --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100)); --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100)); diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/treeview/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css deleted file mode 100644 index 215290b3b6e..00000000000 --- a/components/treeview/themes/spectrum-two.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - } -} diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css deleted file mode 100644 index 7698b2b4c3e..00000000000 --- a/components/treeview/themes/spectrum.css +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); - } -} diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index 3587fa73f7a..5bd2d68a796 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -27,7 +27,7 @@ "--spectrum-gray-1000-rgb", "--spectrum-gray-800-rgb" ], - "system-theme": ["--system-well-border-color"], + "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/index.css b/components/well/index.css index 26abcff0032..1aabb0c2b55 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Well { + --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); + --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-content-color: var(--spectrum-body-color); --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); diff --git a/components/well/themes/express.css b/components/well/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/well/themes/express.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css deleted file mode 100644 index f4a2ef0983e..00000000000 --- a/components/well/themes/spectrum-two.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -@container style(--system: spectrum) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); - } -} diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css deleted file mode 100644 index 5cfe7120396..00000000000 --- a/components/well/themes/spectrum.css +++ /dev/null @@ -1,22 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05); - } -} diff --git a/nx.json b/nx.json index 3b56761c597..fd9504fea01 100644 --- a/nx.json +++ b/nx.json @@ -8,7 +8,7 @@ } }, "namedInputs": { - "core": ["{projectRoot}/*.css", "{projectRoot}/themes/*.css"], + "core": ["{projectRoot}/*.css"], "eslint": ["{workspaceRoot}/.eslintrc"], "metadata": ["{projectRoot}/metadata/*.json"], "prettier": ["{workspaceRoot}/.prettierrc"], @@ -54,9 +54,7 @@ }, "outputs": [ "{projectRoot}/dist/*.{css,json}", - "{projectRoot}/dist/themes/*.css", - "{projectRoot}/dist/*.map", - "{projectRoot}/dist/themes/*.css.map" + "{projectRoot}/dist/*.map" ] }, "clean": { diff --git a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md index 266b4a813ff..f328cea13b6 100644 --- a/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md +++ b/plugins/stylelint-no-unknown-custom-properties/CHANGELOG.md @@ -45,6 +45,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 1.3.1 🗓 2024-02-06 + **Note:** Version bump only for package @spectrum-tools/stylelint-no-unknown-custom-properties diff --git a/plugins/stylelint-no-unknown-custom-properties/index.js b/plugins/stylelint-no-unknown-custom-properties/index.js index 443af61c20e..69ec3f8ad67 100644 --- a/plugins/stylelint-no-unknown-custom-properties/index.js +++ b/plugins/stylelint-no-unknown-custom-properties/index.js @@ -30,7 +30,6 @@ const messages = ruleMessages(ruleName, { expected: (prop) => `Custom property ${prop.magenta} not defined`, }); -import fg from "fast-glob"; import { parse } from "postcss"; import valuesParser from "postcss-values-parser"; @@ -71,14 +70,6 @@ const ruleFunction = (enabled, options = {}) => { const sharedDefinitions = new Set(); - for (const themePath of fg.sync(["themes/*.css"], { cwd: componentRoot, absolute: true })) { - const content = readFileSync(themePath, "utf8"); - if (!content) continue; - parse(content).walkDecls(/^--/, ({ prop }) => { - sharedDefinitions.add(prop); - }); - } - function fetchResolutions(depName) { let req; try { diff --git a/stylelint.config.js b/stylelint.config.js index 2761f849caf..3791f46083a 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -212,21 +212,6 @@ module.exports = { "custom-property-pattern": [/^(spectrum|color|scale|system)/, {}], } }, - { - /* Validate that the legacy themes don't introduce any new selectors or custom properties */ - files: ["components/*/themes/*.css", "!components/*/themes/spectrum.css"], - rules: { - "spectrum-tools/no-unused-custom-properties": null, - "selector-class-pattern": [ - "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { - resolveNestedSelectors: true - } - ], - "spectrum-tools/theme-alignment": [true, { - baseFilename: "spectrum-two", - }], - }, - }, { /* Allow "tree shaking" of unused custom properties in the bundle */ files: ["tools/bundle/**/*.css"], diff --git a/tasks/component-builder.js b/tasks/component-builder.js index 93afb637693..93f6c0d8384 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -196,79 +196,6 @@ async function build({ cwd = process.cwd(), clean = false, minify = false, compo ]); } -/** - * The builder for the individual themes assets - * @param {object} config - * @param {string} config.cwd - Current working directory for the component being built - * @param {boolean} config.clean - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function buildThemes({ cwd = process.cwd(), minify = false, clean = false } = {}) { - // This fetches the content of the files and returns an array of objects with the content and input paths - const contentData = await fetchContent(["themes/*.css"], { cwd, clean }); - - // Nothing to do if there's no content - if (!contentData || contentData.length === 0) return; - - const imports = contentData.map(({ input }) => input); - const importMap = imports.map((i) => `@import "${i}";`).join("\n"); - - const basePostCSSOptions = { - cwd, - clean, - map: false, - env: "production", - lint: false, - }; - - const promises = []; - - contentData.forEach(async ({ content, input }) => { - const theme = path.basename(input, ".css"); - - promises.push( - processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.min.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - ); - }); - - promises.push( - processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - // Expect this file to have component-specific selectors mapping to the system tokens but not the system tokens themselves - processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }), - minify ? processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }) : Promise.resolve(), - ); - - return Promise.all(promises); -} - /** * The main entry point for this tool; this builds a CSS component * @param {object} config @@ -311,7 +238,6 @@ async function main({ return Promise.all([ build({ cwd, clean, minify }), - buildThemes({ cwd, clean, minify }), ]) .then((report) => { const logs = report.flat(Infinity).filter(Boolean); diff --git a/tokens/CHANGELOG.md b/tokens/CHANGELOG.md index 65e5be4d98e..c8f700e0143 100644 --- a/tokens/CHANGELOG.md +++ b/tokens/CHANGELOG.md @@ -2625,8 +2625,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 13.0.5 -🗓 -2023-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@13.0.4...@spectrum-css/tokens@13.0.5) +🗓 2023-12-04 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@13.0.4...@spectrum-css/tokens@13.0.5) **Note:** Version bump only for package @spectrum-css/tokens @@ -2635,6 +2634,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 13.0.4 🗓 2023-11-15 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@13.0.0...@spectrum-css/tokens@13.0.4) + **Note:** Version bump only for package @spectrum-css/tokens @@ -2815,6 +2815,7 @@ chore: updated css properties ## 11.0.2 🗓 2023-07-24 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@11.0.1...@spectrum-css/tokens@11.0.2) + **Note:** Version bump only for package @spectrum-css/tokens @@ -2829,6 +2830,8 @@ chore: updated css properties ## 11.0.0 +🗓 2023-07-14 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@10.2.2...@spectrum-css/tokens@11.0.0) + ### ✨ Features - **tokens:**update to spectrum-tokens 12.4.0 ([#2031](https://github.com/adobe/spectrum-css/issues/2031))([955c8f1](https://github.com/adobe/spectrum-css/commit/955c8f1)) @@ -2853,8 +2856,7 @@ chore: updated css properties ## 10.2.1 -🗓 -2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@10.2.0...@spectrum-css/tokens@10.2.1) +🗓 2023-06-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@10.2.0...@spectrum-css/tokens@10.2.1) **Note:** Version bump only for package @spectrum-css/tokens diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index f9a84180189..5a4bb6de487 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -1,42 +1,42 @@ { "accent-background-color-default": { "prop": "--spectrum-accent-background-color-default", - "ref": "var(--spectrum-accent-color-600)", + "ref": "var(--spectrum-accent-color-800)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(37, 73, 229)" + "value": "rgb(64, 105, 253)" } }, "accent-background-color-down": { "prop": "--spectrum-accent-background-color-down", - "ref": "var(--spectrum-accent-color-500)", + "ref": "var(--spectrum-accent-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "accent-background-color-hover": { "prop": "--spectrum-accent-background-color-hover", - "ref": "var(--spectrum-accent-color-500)", + "ref": "var(--spectrum-accent-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "accent-background-color-key-focus": { "prop": "--spectrum-accent-background-color-key-focus", - "ref": "var(--spectrum-accent-color-500)", + "ref": "var(--spectrum-accent-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "accent-color-100": { @@ -186,7 +186,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(69, 110, 254)" + "value": "rgb(64, 105, 253)" } }, "accent-color-900": { @@ -249,6 +249,16 @@ "value": "rgb(105, 149, 254)" } }, + "accent-subtle-background-color-default": { + "prop": "--spectrum-accent-subtle-background-color-default", + "ref": "var(--spectrum-accent-color-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, "accent-visual-color": { "prop": "--spectrum-accent-visual-color", "ref": "var(--spectrum-accent-color-900)", @@ -376,6 +386,42 @@ "value": "20px" } }, + "accordion-content-area-edge-to-content-extra-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-extra-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "accordion-content-area-edge-to-content-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "accordion-content-area-edge-to-content-medium": { + "prop": "--spectrum-accordion-content-area-edge-to-content-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "accordion-content-area-edge-to-content-small": { + "prop": "--spectrum-accordion-content-area-edge-to-content-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "accordion-content-area-top-to-content": { "prop": "--spectrum-accordion-content-area-top-to-content", "desktop": { @@ -389,6 +435,42 @@ "prop": "--spectrum-accordion-disclosure-indicator-to-text", "value": "0px" }, + "accordion-disclosure-indicator-to-text-extra-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "desktop": { + "value": "17px" + }, + "mobile": { + "value": "22px" + } + }, + "accordion-disclosure-indicator-to-text-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "accordion-disclosure-indicator-to-text-medium": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "accordion-disclosure-indicator-to-text-small": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-small", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, "accordion-edge-to-disclosure-indicator": { "prop": "--spectrum-accordion-edge-to-disclosure-indicator", "value": "0px" @@ -401,6 +483,10 @@ "prop": "--spectrum-accordion-focus-indicator-gap", "value": "0px" }, + "accordion-item-to-divider": { + "prop": "--spectrum-accordion-item-to-divider", + "value": "0px" + }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", "desktop": { @@ -508,22 +594,88 @@ "value": "14px" } }, + "accordion-top-to-text-spacious-small": { + "prop": "--spectrum-accordion-top-to-text-spacious-small", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "12px" + } + }, + "action-bar-border-color": { + "prop": "--spectrum-action-bar-border-color", + "light": { + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" + }, + "ref": "var(--spectrum-gray-400)", + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "action-bar-bottom-to-content-area": { + "prop": "--spectrum-action-bar-bottom-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, + "action-bar-close-button-to-counter": { + "prop": "--spectrum-action-bar-close-button-to-counter", + "ref": "var(--spectrum-text-to-control-50)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "action-bar-counter-font-size": { + "prop": "--spectrum-action-bar-counter-font-size", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "action-bar-edge-to-content-area": { + "prop": "--spectrum-action-bar-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, "action-bar-height": { "prop": "--spectrum-action-bar-height", + "ref": "var(--spectrum-component-height-400)", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { - "value": "56px" + "value": "70px" } }, + "action-bar-label-to-action-group-area": { + "prop": "--spectrum-action-bar-label-to-action-group-area", + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "action-bar-minimum-width": { + "prop": "--spectrum-action-bar-minimum-width", + "value": "176px" + }, + "action-bar-top-to-content-area": { + "prop": "--spectrum-action-bar-top-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, "action-bar-top-to-item-counter": { "prop": "--spectrum-action-bar-top-to-item-counter", + "ref": "var(--spectrum-component-top-to-text-300)", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "action-button-edge-to-hold-icon-extra-large": { @@ -564,7 +716,7 @@ "alert-banner-bottom-to-text": { "prop": "--spectrum-alert-banner-bottom-to-text", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -573,7 +725,7 @@ "alert-banner-minimum-height": { "prop": "--spectrum-alert-banner-minimum-height", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { "value": "64px" @@ -583,7 +735,7 @@ "prop": "--spectrum-alert-banner-to-bottom-text", "ref": "var(--spectrum-alert-banner-bottom-to-text)", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -593,7 +745,7 @@ "prop": "--spectrum-alert-banner-to-top-text", "ref": "var(--spectrum-alert-banner-top-to-text)", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -603,16 +755,25 @@ "prop": "--spectrum-alert-banner-to-top-workflow-icon", "ref": "var(--spectrum-alert-banner-top-to-workflow-icon)", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" + } + }, + "alert-banner-top-to-alert-icon": { + "prop": "--spectrum-alert-banner-top-to-alert-icon", + "desktop": { + "value": "37px" + }, + "mobile": { + "value": "29px" } }, "alert-banner-top-to-text": { "prop": "--spectrum-alert-banner-top-to-text", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -621,10 +782,10 @@ "alert-banner-top-to-workflow-icon": { "prop": "--spectrum-alert-banner-top-to-workflow-icon", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" } }, "alert-banner-width": { @@ -636,14 +797,24 @@ "value": "680px" } }, + "alert-dialog-description-font-size": { + "prop": "--spectrum-alert-dialog-description-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "alert-dialog-description-size": { "prop": "--spectrum-alert-dialog-description-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "alert-dialog-maximum-width": { @@ -654,14 +825,24 @@ "prop": "--spectrum-alert-dialog-minimum-width", "value": "288px" }, + "alert-dialog-title-font-size": { + "prop": "--spectrum-alert-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, "alert-dialog-title-size": { "prop": "--spectrum-alert-dialog-title-size", - "ref": "var(--spectrum-heading-size-xs)", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "18px" + "value": "22px" }, "mobile": { - "value": "19px" + "value": "24px" } }, "android-elevation": { @@ -762,110 +943,330 @@ "prop": "--spectrum-asterisk-icon-size-75", "value": "8px" }, - "avatar-opacity-disabled": { - "prop": "--spectrum-avatar-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "avatar-size-100": { - "prop": "--spectrum-avatar-size-100", - "desktop": { - "value": "20px" + "avatar-border-color": { + "prop": "--spectrum-avatar-border-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" }, - "mobile": { - "value": "26px" + "light": { + "value": "rgb(255, 255, 255)" } }, - "avatar-size-200": { - "prop": "--spectrum-avatar-size-200", + "avatar-border-width": { + "prop": "--spectrum-avatar-border-width", + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + }, + "avatar-group-size-100": { + "prop": "--spectrum-avatar-group-size-100", + "ref": "var(--spectrum-avatar-size-100)", "desktop": { - "value": "22px" + "value": "24px" }, "mobile": { "value": "28px" } }, - "avatar-size-300": { - "prop": "--spectrum-avatar-size-300", + "avatar-group-size-200": { + "prop": "--spectrum-avatar-group-size-200", + "ref": "var(--spectrum-avatar-size-200)", "desktop": { - "value": "26px" + "value": "28px" }, "mobile": { "value": "32px" } }, - "avatar-size-400": { - "prop": "--spectrum-avatar-size-400", + "avatar-group-size-300": { + "prop": "--spectrum-avatar-group-size-300", + "ref": "var(--spectrum-avatar-size-300)", "desktop": { - "value": "28px" + "value": "32px" }, "mobile": { "value": "36px" } }, - "avatar-size-50": { - "prop": "--spectrum-avatar-size-50", + "avatar-group-size-400": { + "prop": "--spectrum-avatar-group-size-400", + "ref": "var(--spectrum-avatar-size-400)", "desktop": { - "value": "16px" + "value": "36px" }, "mobile": { - "value": "20px" + "value": "40px" } }, - "avatar-size-500": { - "prop": "--spectrum-avatar-size-500", + "avatar-group-size-50": { + "prop": "--spectrum-avatar-group-size-50", + "ref": "var(--spectrum-avatar-size-50)", "desktop": { - "value": "32px" + "value": "16px" }, "mobile": { - "value": "40px" + "value": "20px" } }, - "avatar-size-600": { - "prop": "--spectrum-avatar-size-600", + "avatar-group-size-500": { + "prop": "--spectrum-avatar-group-size-500", + "ref": "var(--spectrum-avatar-size-500)", "desktop": { - "value": "36px" + "value": "40px" }, "mobile": { - "value": "46px" + "value": "44px" } }, - "avatar-size-700": { - "prop": "--spectrum-avatar-size-700", + "avatar-group-size-75": { + "prop": "--spectrum-avatar-group-size-75", + "ref": "var(--spectrum-avatar-size-75)", "desktop": { - "value": "40px" + "value": "20px" }, "mobile": { - "value": "50px" + "value": "24px" } }, - "avatar-size-75": { - "prop": "--spectrum-avatar-size-75", + "avatar-opacity-disabled": { + "prop": "--spectrum-avatar-opacity-disabled", + "ref": "var(--spectrum-opacity-disabled)", + "value": "0.3" + }, + "avatar-size-100": { + "prop": "--spectrum-avatar-size-100", "desktop": { - "value": "18px" + "value": "24px" }, "mobile": { - "value": "22px" + "value": "28px" } }, - "background-base-color": { - "prop": "--spectrum-background-base-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" + "avatar-size-1000": { + "prop": "--spectrum-avatar-size-1000", + "desktop": { + "value": "64px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "72px" } }, - "background-elevated-color": { - "prop": "--spectrum-background-elevated-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(34, 34, 34)" + "avatar-size-1100": { + "prop": "--spectrum-avatar-size-1100", + "desktop": { + "value": "72px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "80px" + } + }, + "avatar-size-1200": { + "prop": "--spectrum-avatar-size-1200", + "desktop": { + "value": "80px" + }, + "mobile": { + "value": "88px" + } + }, + "avatar-size-1300": { + "prop": "--spectrum-avatar-size-1300", + "desktop": { + "value": "88px" + }, + "mobile": { + "value": "96px" + } + }, + "avatar-size-1400": { + "prop": "--spectrum-avatar-size-1400", + "desktop": { + "value": "96px" + }, + "mobile": { + "value": "104px" + } + }, + "avatar-size-1500": { + "prop": "--spectrum-avatar-size-1500", + "desktop": { + "value": "104px" + }, + "mobile": { + "value": "112px" + } + }, + "avatar-size-200": { + "prop": "--spectrum-avatar-size-200", + "desktop": { + "value": "28px" + }, + "mobile": { + "value": "32px" + } + }, + "avatar-size-300": { + "prop": "--spectrum-avatar-size-300", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "36px" + } + }, + "avatar-size-400": { + "prop": "--spectrum-avatar-size-400", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "40px" + } + }, + "avatar-size-50": { + "prop": "--spectrum-avatar-size-50", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "avatar-size-500": { + "prop": "--spectrum-avatar-size-500", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "44px" + } + }, + "avatar-size-600": { + "prop": "--spectrum-avatar-size-600", + "desktop": { + "value": "44px" + }, + "mobile": { + "value": "48px" + } + }, + "avatar-size-700": { + "prop": "--spectrum-avatar-size-700", + "desktop": { + "value": "48px" + }, + "mobile": { + "value": "52px" + } + }, + "avatar-size-75": { + "prop": "--spectrum-avatar-size-75", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "avatar-size-800": { + "prop": "--spectrum-avatar-size-800", + "desktop": { + "value": "52px" + }, + "mobile": { + "value": "56px" + } + }, + "avatar-size-900": { + "prop": "--spectrum-avatar-size-900", + "desktop": { + "value": "56px" + }, + "mobile": { + "value": "64px" + } + }, + "avatar-to-avatar-100": { + "prop": "--spectrum-avatar-to-avatar-100", + "desktop": { + "value": "-6px" + }, + "mobile": { + "value": "-7px" + } + }, + "avatar-to-avatar-200": { + "prop": "--spectrum-avatar-to-avatar-200", + "desktop": { + "value": "-7px" + }, + "mobile": { + "value": "-8px" + } + }, + "avatar-to-avatar-300": { + "prop": "--spectrum-avatar-to-avatar-300", + "desktop": { + "value": "-8px" + }, + "mobile": { + "value": "-9px" + } + }, + "avatar-to-avatar-400": { + "prop": "--spectrum-avatar-to-avatar-400", + "desktop": { + "value": "-9px" + }, + "mobile": { + "value": "-10px" + } + }, + "avatar-to-avatar-50": { + "prop": "--spectrum-avatar-to-avatar-50", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-5px" + } + }, + "avatar-to-avatar-500": { + "prop": "--spectrum-avatar-to-avatar-500", + "desktop": { + "value": "-10px" + }, + "mobile": { + "value": "-11px" + } + }, + "avatar-to-avatar-75": { + "prop": "--spectrum-avatar-to-avatar-75", + "desktop": { + "value": "-5px" + }, + "mobile": { + "value": "-6px" + } + }, + "background-base-color": { + "prop": "--spectrum-background-base-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "background-elevated-color": { + "prop": "--spectrum-background-elevated-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(34, 34, 34)" + }, + "light": { + "value": "rgb(255, 255, 255)" } }, "background-layer-1-color": { @@ -914,6 +1315,42 @@ "value": "rgb(233, 233, 233)" } }, + "bar-panel-gripper-color": { + "prop": "--spectrum-bar-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "bar-panel-gripper-color-drag": { + "prop": "--spectrum-bar-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "bar-panel-maximum-width": { + "prop": "--spectrum-bar-panel-maximum-width", + "value": "72px" + }, + "bar-panel-minimum-width": { + "prop": "--spectrum-bar-panel-minimum-width", + "value": "40px" + }, + "bar-panel-spacing-extra-spacious": { + "prop": "--spectrum-bar-panel-spacing-extra-spacious", + "value": "20px" + }, + "bar-panel-width": { + "prop": "--spectrum-bar-panel-width", + "value": "56px" + }, "black": { "prop": "--spectrum-black", "value": "rgb(0, 0, 0)" @@ -1054,7 +1491,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(69, 110, 254)" + "value": "rgb(64, 105, 253)" } }, "blue-900": { @@ -1068,12 +1505,22 @@ }, "blue-background-color-default": { "prop": "--spectrum-blue-background-color-default", - "ref": "var(--spectrum-blue-700)", + "ref": "var(--spectrum-blue-800)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(64, 105, 253)" + } + }, + "blue-subtle-background-color-default": { + "prop": "--spectrum-blue-subtle-background-color-default", + "ref": "var(--spectrum-blue-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" } }, "blue-visual-color": { @@ -1114,46 +1561,126 @@ "body-cjk-line-height": { "prop": "--spectrum-body-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 }, - "body-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-l": { + "prop": "--spectrum-body-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } }, - "body-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-m": { + "prop": "--spectrum-body-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } }, - "body-cjk-strong-font-style": { - "prop": "--spectrum-body-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-s": { + "prop": "--spectrum-body-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, - "body-cjk-strong-font-weight": { - "prop": "--spectrum-body-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-xl": { + "prop": "--spectrum-body-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } }, - "body-color": { - "prop": "--spectrum-body-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" + "body-cjk-size-xs": { + "prop": "--spectrum-body-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(219, 219, 219)" + "mobile": { + "value": "13px" + } + }, + "body-cjk-size-xxl": { + "prop": "--spectrum-body-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "body-cjk-size-xxs": { + "prop": "--spectrum-body-cjk-size-xxs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "body-cjk-size-xxxl": { + "prop": "--spectrum-body-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "27px" + } + }, + "body-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-cjk-strong-font-style": { + "prop": "--spectrum-body-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-font-weight": { + "prop": "--spectrum-body-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-color": { + "prop": "--spectrum-body-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" } }, "body-line-height": { "prop": "--spectrum-body-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "body-margin-multiplier": { "prop": "--spectrum-body-margin-multiplier", - "value": "0.75" + "value": 0.75 }, "body-sans-serif-emphasized-font-style": { "prop": "--spectrum-body-sans-serif-emphasized-font-style", @@ -1305,6 +1832,16 @@ "value": "27px" } }, + "body-size-xxs": { + "prop": "--spectrum-body-size-xxs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, "body-size-xxxl": { "prop": "--spectrum-body-size-xxxl", "ref": "var(--spectrum-font-size-600)", @@ -1333,20 +1870,22 @@ }, "breadcrumbs-bottom-to-text": { "prop": "--spectrum-breadcrumbs-bottom-to-text", + "ref": "var(--spectrum-component-bottom-to-text-200)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "19px" + "value": "14px" } }, "breadcrumbs-bottom-to-text-compact": { "prop": "--spectrum-breadcrumbs-bottom-to-text-compact", + "ref": "var(--spectrum-component-bottom-to-text-100)", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "19px" + "value": "11px" } }, "breadcrumbs-bottom-to-text-multiline": { @@ -1355,7 +1894,7 @@ "value": "9px" }, "mobile": { - "value": "10px" + "value": "11px" } }, "breadcrumbs-end-edge-to-text": { @@ -1364,22 +1903,22 @@ }, "breadcrumbs-height": { "prop": "--spectrum-breadcrumbs-height", - "ref": "var(--spectrum-component-height-300)", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "48px" + "value": "40px" }, "mobile": { - "value": "60px" + "value": "50px" } }, "breadcrumbs-height-compact": { "prop": "--spectrum-breadcrumbs-height-compact", - "ref": "var(--spectrum-component-height-200)", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "40px" + "value": "32px" }, "mobile": { - "value": "50px" + "value": "40px" } }, "breadcrumbs-height-multiline": { @@ -1388,11 +1927,21 @@ "value": "72px" }, "mobile": { - "value": "84px" + "value": "90px" } }, "breadcrumbs-separator-icon-to-bottom-text-multiline": { "prop": "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-separator-to-bottom-text-multiline": { + "prop": "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", "desktop": { "value": "11px" }, @@ -1402,17 +1951,72 @@ }, "breadcrumbs-start-edge-to-text": { "prop": "--spectrum-breadcrumbs-start-edge-to-text", + "ref": "var(--spectrum-breadcrumbs-start-edge-to-text-large)", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-large": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-large", + "desktop": { "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-medium": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-start-edge-to-text-multiline": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" } }, "breadcrumbs-start-edge-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "value": "0px" }, + "breadcrumbs-text-to-separator-large": { + "prop": "--spectrum-breadcrumbs-text-to-separator-large", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-text-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-text-to-separator-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-text-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-text-to-separator-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "breadcrumbs-top-text-to-bottom-text": { "prop": "--spectrum-breadcrumbs-top-text-to-bottom-text", "desktop": { @@ -1424,24 +2028,36 @@ }, "breadcrumbs-top-to-separator-icon": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-large)", "desktop": { - "value": "19px" + "value": "15px" }, "mobile": { - "value": "25px" + "value": "20px" } }, "breadcrumbs-top-to-separator-icon-compact": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-medium)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "23px" + "value": "15px" } }, "breadcrumbs-top-to-separator-icon-multiline": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline)", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-large": { + "prop": "--spectrum-breadcrumbs-top-to-separator-large", "desktop": { "value": "15px" }, @@ -1449,44 +2065,64 @@ "value": "20px" } }, + "breadcrumbs-top-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-top-to-separator-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-top-to-separator-multiline", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "10px" + } + }, "breadcrumbs-top-to-text": { "prop": "--spectrum-breadcrumbs-top-to-text", + "ref": "var(--spectrum-component-top-to-text-200)", "desktop": { - "value": "13px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "12px" } }, "breadcrumbs-top-to-text-compact": { "prop": "--spectrum-breadcrumbs-top-to-text-compact", + "ref": "var(--spectrum-component-top-to-text-100)", "desktop": { - "value": "11px" + "value": "6px" }, "mobile": { - "value": "16px" + "value": "8px" } }, "breadcrumbs-top-to-text-multiline": { "prop": "--spectrum-breadcrumbs-top-to-text-multiline", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "15px" + "value": "5px" } }, "breadcrumbs-top-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "value": "0px" }, "breadcrumbs-top-to-truncated-menu-compact": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-truncated-menu)", + "value": "0px" + }, + "breadcrumbs-truncated-menu-to-bottom-text": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", "desktop": { "value": "4px" }, @@ -1494,12 +2130,13 @@ "value": "5px" } }, - "breadcrumbs-truncated-menu-to-bottom-text": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", + "breadcrumbs-truncated-menu-to-separator": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator", "value": "0px" }, "breadcrumbs-truncated-menu-to-separator-icon": { "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-truncated-menu-to-separator)", "value": "0px" }, "brown-100": { @@ -1631,7 +2268,7 @@ "brown-800": { "prop": "--spectrum-brown-800", "dark": { - "value": "rgb(148, 118, 73)" + "value": "rgb(143, 114, 69)" }, "light": { "value": "rgb(154, 123, 77)" @@ -1646,9 +2283,39 @@ "value": "rgb(139, 109, 66)" } }, + "brown-background-color-default": { + "prop": "--spectrum-brown-background-color-default", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" + }, + "dark": { + "value": "rgb(143, 114, 69)" + } + }, + "brown-subtle-background-color-default": { + "prop": "--spectrum-brown-subtle-background-color-default", + "ref": "var(--spectrum-brown-300)", + "light": { + "value": "rgb(247, 238, 225)" + }, + "dark": { + "value": "rgb(58, 40, 14)" + } + }, + "brown-visual-color": { + "prop": "--spectrum-brown-visual-color", + "ref": "var(--spectrum-brown-900)", + "light": { + "value": "rgb(154, 123, 77)" + }, + "dark": { + "value": "rgb(163, 132, 84)" + } + }, "button-minimum-width-multiplier": { "prop": "--spectrum-button-minimum-width-multiplier", - "value": "2.25" + "value": 2.25 }, "card-minimum-width": { "prop": "--spectrum-card-minimum-width", @@ -1808,7 +2475,7 @@ "value": "rgb(72, 144, 20)" }, "dark": { - "value": "rgb(69, 138, 19)" + "value": "rgb(66, 134, 18)" } }, "celery-900": { @@ -1822,12 +2489,22 @@ }, "celery-background-color-default": { "prop": "--spectrum-celery-background-color-default", - "ref": "var(--spectrum-celery-800)", + "ref": "var(--spectrum-celery-900)", "light": { "value": "rgb(93, 180, 31)" }, "dark": { - "value": "rgb(69, 138, 19)" + "value": "rgb(78, 154, 23)" + } + }, + "celery-subtle-background-color-default": { + "prop": "--spectrum-celery-subtle-background-color-default", + "ref": "var(--spectrum-celery-300)", + "light": { + "value": "rgb(197, 255, 156)" + }, + "dark": { + "value": "rgb(21, 51, 1)" } }, "celery-visual-color": { @@ -1837,7 +2514,7 @@ "value": "rgb(82, 161, 25)" }, "dark": { - "value": "rgb(69, 138, 19)" + "value": "rgb(66, 134, 18)" } }, "character-count-to-field-quiet-extra-large": { @@ -2008,7 +2685,7 @@ "value": "rgb(114, 137, 0)" }, "dark": { - "value": "rgb(109, 131, 0)" + "value": "rgb(106, 127, 0)" } }, "chartreuse-900": { @@ -2022,12 +2699,22 @@ }, "chartreuse-background-color-default": { "prop": "--spectrum-chartreuse-background-color-default", - "ref": "var(--spectrum-chartreuse-900)", + "ref": "var(--spectrum-chartreuse-1000)", "light": { "value": "rgb(163, 196, 0)" }, "dark": { - "value": "rgb(122, 147, 0)" + "value": "rgb(136, 164, 0)" + } + }, + "chartreuse-subtle-background-color-default": { + "prop": "--spectrum-chartreuse-subtle-background-color-default", + "ref": "var(--spectrum-chartreuse-300)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(39, 47, 0)" } }, "chartreuse-visual-color": { @@ -2043,73 +2730,73 @@ "checkbox-control-size-extra-large": { "prop": "--spectrum-checkbox-control-size-extra-large", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "26px" } }, "checkbox-control-size-large": { "prop": "--spectrum-checkbox-control-size-large", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "20px" + "value": "22px" } }, "checkbox-control-size-medium": { "prop": "--spectrum-checkbox-control-size-medium", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "18px" + "value": "20px" } }, "checkbox-control-size-small": { "prop": "--spectrum-checkbox-control-size-small", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "16px" + "value": "18px" } }, "checkbox-top-to-control-extra-large": { "prop": "--spectrum-checkbox-top-to-control-extra-large", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "17px" } }, "checkbox-top-to-control-large": { "prop": "--spectrum-checkbox-top-to-control-large", "desktop": { - "value": "12px" + "value": "11px" }, "mobile": { - "value": "15px" + "value": "14px" } }, "checkbox-top-to-control-medium": { "prop": "--spectrum-checkbox-top-to-control-medium", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "checkbox-top-to-control-small": { "prop": "--spectrum-checkbox-top-to-control-small", "desktop": { - "value": "6px" + "value": "5px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "checkmark-icon-size-100": { @@ -2385,7 +3072,7 @@ "cinnamon-800": { "prop": "--spectrum-cinnamon-800", "dark": { - "value": "rgb(179, 103, 64)" + "value": "rgb(176, 98, 59)" }, "light": { "value": "rgb(184, 109, 70)" @@ -2400,30 +3087,109 @@ "value": "rgb(170, 94, 56)" } }, + "cinnamon-background-color-default": { + "prop": "--spectrum-cinnamon-background-color-default", + "ref": "var(--spectrum-cinnamon-800)", + "light": { + "value": "rgb(170, 94, 56)" + }, + "dark": { + "value": "rgb(176, 98, 59)" + } + }, + "cinnamon-subtle-background-color-default": { + "prop": "--spectrum-cinnamon-subtle-background-color-default", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } + }, + "cinnamon-visual-color": { + "prop": "--spectrum-cinnamon-visual-color", + "ref": "var(--spectrum-cinnamon-900)", + "light": { + "value": "rgb(184, 109, 70)" + }, + "dark": { + "value": "rgb(192, 119, 80)" + } + }, "cjk-font-family": { "prop": "--spectrum-cjk-font-family", "value": "Adobe Clean Han" }, "cjk-letter-spacing": { "prop": "--spectrum-cjk-letter-spacing", - "value": "0.05em" + "ref": "var(--spectrum-letter-spacing)", + "value": "0em" }, "cjk-line-height-100": { "prop": "--spectrum-cjk-line-height-100", - "value": "1.5" + "value": 1.5 }, "cjk-line-height-200": { "prop": "--spectrum-cjk-line-height-200", - "value": "1.7" + "value": 1.7 + }, + "coach-indicator-collapsed-gap": { + "prop": "--spectrum-coach-indicator-collapsed-gap", + "value": "2px" + }, + "coach-indicator-collapsed-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-collapsed-ring-rounding-increment", + "value": "6px" + }, + "coach-indicator-collapsed-ring-thickness": { + "prop": "--spectrum-coach-indicator-collapsed-ring-thickness", + "value": "4px" + }, + "coach-indicator-color": { + "prop": "--spectrum-coach-indicator-color", + "ref": "var(--spectrum-blue-800)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "coach-indicator-expanded-gap": { + "prop": "--spectrum-coach-indicator-expanded-gap", + "value": "6px" + }, + "coach-indicator-expanded-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-expanded-ring-rounding-increment", + "value": "14px" + }, + "coach-indicator-expanded-ring-thickness": { + "prop": "--spectrum-coach-indicator-expanded-ring-thickness", + "value": "8px" + }, + "coach-indicator-opacity": { + "prop": "--spectrum-coach-indicator-opacity", + "value": "0.2" + }, + "coach-mark-body-font-size": { + "prop": "--spectrum-coach-mark-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } }, "coach-mark-body-size": { "prop": "--spectrum-coach-mark-body-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "coach-mark-edge-to-content": { @@ -2473,6 +3239,16 @@ "value": "216px" } }, + "coach-mark-pagination-body-font-size": { + "prop": "--spectrum-coach-mark-pagination-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "coach-mark-pagination-body-size": { "prop": "--spectrum-coach-mark-pagination-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -2502,9 +3278,19 @@ "value": "22px" } }, + "coach-mark-title-font-size": { + "prop": "--spectrum-coach-mark-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "coach-mark-title-size": { "prop": "--spectrum-coach-mark-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -2549,7 +3335,57 @@ "code-cjk-line-height": { "prop": "--spectrum-code-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 + }, + "code-cjk-size-l": { + "prop": "--spectrum-code-cjk-size-l", + "ref": "var(--spectrum-code-size-l)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "code-cjk-size-m": { + "prop": "--spectrum-code-cjk-size-m", + "ref": "var(--spectrum-code-size-m)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "code-cjk-size-s": { + "prop": "--spectrum-code-cjk-size-s", + "ref": "var(--spectrum-code-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "code-cjk-size-xl": { + "prop": "--spectrum-code-cjk-size-xl", + "ref": "var(--spectrum-code-size-xl)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "code-cjk-size-xs": { + "prop": "--spectrum-code-cjk-size-xs", + "ref": "var(--spectrum-code-size-xs)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, "code-cjk-strong-emphasized-font-style": { "prop": "--spectrum-code-cjk-strong-emphasized-font-style", @@ -2558,8 +3394,8 @@ }, "code-cjk-strong-emphasized-font-weight": { "prop": "--spectrum-code-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-cjk-strong-font-style": { "prop": "--spectrum-code-cjk-strong-font-style", @@ -2568,8 +3404,8 @@ }, "code-cjk-strong-font-weight": { "prop": "--spectrum-code-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-color": { "prop": "--spectrum-code-color", @@ -2608,7 +3444,7 @@ "code-line-height": { "prop": "--spectrum-code-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "code-size-l": { "prop": "--spectrum-code-size-l", @@ -2682,12 +3518,12 @@ }, "color-area-border-color": { "prop": "--spectrum-color-area-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-area-border-opacity": { @@ -2696,8 +3532,8 @@ }, "color-area-border-rounding": { "prop": "--spectrum-color-area-border-rounding", - "ref": "var(--spectrum-corner-radius-100)", - "value": "4px" + "ref": "var(--spectrum-corner-radius-medium-size-small)", + "value": "7px" }, "color-area-border-width": { "prop": "--spectrum-color-area-border-width", @@ -2762,10 +3598,10 @@ "prop": "--spectrum-color-handle-drop-shadow-color", "ref": "var(--spectrum-drop-shadow-color)", "light": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.12)" }, "dark": { - "value": "rgba(0, 0, 0, 0.8)" + "value": "rgba(0, 0, 0, 0.36)" } }, "color-handle-drop-shadow-x": { @@ -2827,15 +3663,22 @@ }, "color-loupe-drop-shadow-blur": { "prop": "--spectrum-color-loupe-drop-shadow-blur", + "ref": "var(--spectrum-drop-shadow-elevated-blur)", "value": "8px" }, "color-loupe-drop-shadow-color": { "prop": "--spectrum-color-loupe-drop-shadow-color", - "ref": "var(--spectrum-transparent-black-300)", - "value": "rgba(0, 0, 0, 0.15)" + "ref": "var(--spectrum-drop-shadow-elevated-color)", + "light": { + "value": "rgba(0, 0, 0, 0.16)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.48)" + } }, "color-loupe-drop-shadow-y": { "prop": "--spectrum-color-loupe-drop-shadow-y", + "ref": "var(--spectrum-drop-shadow-elevated-y)", "value": "2px" }, "color-loupe-height": { @@ -2867,12 +3710,12 @@ }, "color-slider-border-color": { "prop": "--spectrum-color-slider-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-slider-border-opacity": { @@ -2881,7 +3724,8 @@ }, "color-slider-border-rounding": { "prop": "--spectrum-color-slider-border-rounding", - "value": "4px" + "ref": "var(--spectrum-corner-radius-medium-size-small)", + "value": "7px" }, "color-slider-border-width": { "prop": "--spectrum-color-slider-border-width", @@ -2905,6 +3749,20 @@ "value": "100px" } }, + "color-wheel-border-color": { + "prop": "--spectrum-color-wheel-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "color-wheel-border-opacity": { + "prop": "--spectrum-color-wheel-border-opacity", + "value": "0.1" + }, "color-wheel-color-area-margin": { "prop": "--spectrum-color-wheel-color-area-margin", "value": "12px" @@ -2929,51 +3787,40 @@ }, "combo-box-minimum-width-multiplier": { "prop": "--spectrum-combo-box-minimum-width-multiplier", - "value": "2.5" + "value": 2.5 }, "combo-box-quiet-minimum-width-multiplier": { "prop": "--spectrum-combo-box-quiet-minimum-width-multiplier", - "value": "2" + "value": 2 + }, + "combo-box-visual-to-field-button": { + "prop": "--spectrum-combo-box-visual-to-field-button", + "value": "0px" }, "combo-box-visual-to-field-button-extra-large": { "prop": "--spectrum-combo-box-visual-to-field-button-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-large": { "prop": "--spectrum-combo-box-visual-to-field-button-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-medium": { "prop": "--spectrum-combo-box-visual-to-field-button-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-quiet": { "prop": "--spectrum-combo-box-visual-to-field-button-quiet", + "ref": "var(--spectrum-combo-box-visual-to-field-button)", "value": "0px" }, "combo-box-visual-to-field-button-small": { "prop": "--spectrum-combo-box-visual-to-field-button-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "component-bottom-to-text-100": { "prop": "--spectrum-component-bottom-to-text-100", @@ -3293,28 +4140,28 @@ "component-pill-edge-to-visual-only-100": { "prop": "--spectrum-component-pill-edge-to-visual-only-100", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "8px" } }, "component-pill-edge-to-visual-only-200": { "prop": "--spectrum-component-pill-edge-to-visual-only-200", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-pill-edge-to-visual-only-300": { "prop": "--spectrum-component-pill-edge-to-visual-only-300", "desktop": { - "value": "13px" + "value": "11px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "component-pill-edge-to-visual-only-75": { @@ -3323,20 +4170,24 @@ "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" } }, "component-size-difference-down": { "prop": "--spectrum-component-size-difference-down", "value": "-2px" }, + "component-size-maximum-perspective-down": { + "prop": "--spectrum-component-size-maximum-perspective-down", + "value": "96px" + }, "component-size-minimum-perspective-down": { "prop": "--spectrum-component-size-minimum-perspective-down", "value": "24px" }, "component-size-width-ratio-down": { "prop": "--spectrum-component-size-width-ratio-down", - "value": "0.3333" + "value": 0.3333 }, "component-to-menu-extra-large": { "prop": "--spectrum-component-to-menu-extra-large", @@ -3464,6 +4315,16 @@ "value": "6px" } }, + "contextual-help-body-font-size": { + "prop": "--spectrum-contextual-help-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "contextual-help-body-size": { "prop": "--spectrum-contextual-help-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -3478,9 +4339,19 @@ "prop": "--spectrum-contextual-help-minimum-width", "value": "268px" }, + "contextual-help-title-font-size": { + "prop": "--spectrum-contextual-help-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "contextual-help-title-size": { "prop": "--spectrum-contextual-help-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -3498,7 +4369,7 @@ }, "corner-radius-1000": { "prop": "--spectrum-corner-radius-1000", - "value": "0.5" + "value": 0.5 }, "corner-radius-200": { "prop": "--spectrum-corner-radius-200", @@ -3540,7 +4411,7 @@ "corner-radius-full": { "prop": "--spectrum-corner-radius-full", "ref": "var(--spectrum-corner-radius-1000)", - "value": "0.5" + "value": 0.5 }, "corner-radius-large-default": { "prop": "--spectrum-corner-radius-large-default", @@ -3838,7 +4709,7 @@ "value": "rgb(18, 134, 205)" }, "dark": { - "value": "rgb(15, 128, 194)" + "value": "rgb(13, 125, 186)" } }, "cyan-900": { @@ -3852,12 +4723,22 @@ }, "cyan-background-color-default": { "prop": "--spectrum-cyan-background-color-default", - "ref": "var(--spectrum-cyan-700)", + "ref": "var(--spectrum-cyan-800)", "light": { "value": "rgb(11, 120, 179)" }, "dark": { - "value": "rgb(8, 115, 168)" + "value": "rgb(13, 125, 186)" + } + }, + "cyan-subtle-background-color-default": { + "prop": "--spectrum-cyan-subtle-background-color-default", + "ref": "var(--spectrum-cyan-300)", + "light": { + "value": "rgb(217, 244, 253)" + }, + "dark": { + "value": "rgb(0, 48, 65)" } }, "cyan-visual-color": { @@ -3958,8 +4839,8 @@ }, "detail-cjk-emphasized-font-weight": { "prop": "--spectrum-detail-cjk-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-cjk-font-family": { "prop": "--spectrum-detail-cjk-font-family", @@ -3973,8 +4854,8 @@ }, "detail-cjk-font-weight": { "prop": "--spectrum-detail-cjk-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "detail-cjk-light-emphasized-font-style": { "prop": "--spectrum-detail-cjk-light-emphasized-font-style", @@ -4019,36 +4900,86 @@ "detail-cjk-line-height": { "prop": "--spectrum-detail-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 }, - "detail-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-detail-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "detail-cjk-size-l": { + "prop": "--spectrum-detail-cjk-size-l", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } }, - "detail-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-detail-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "detail-cjk-size-m": { + "prop": "--spectrum-detail-cjk-size-m", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, - "detail-cjk-strong-font-style": { - "prop": "--spectrum-detail-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", + "detail-cjk-size-s": { + "prop": "--spectrum-detail-cjk-size-s", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "detail-cjk-size-xl": { + "prop": "--spectrum-detail-cjk-size-xl", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "detail-cjk-size-xs": { + "prop": "--spectrum-detail-cjk-size-xs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "detail-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-detail-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "detail-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-detail-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "detail-cjk-strong-font-style": { + "prop": "--spectrum-detail-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", "value": "normal" }, "detail-cjk-strong-font-weight": { "prop": "--spectrum-detail-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-color": { "prop": "--spectrum-detail-color", - "ref": "var(--spectrum-gray-900)", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(113, 113, 113)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(138, 138, 138)" } }, "detail-letter-spacing": { @@ -4058,15 +4989,15 @@ "detail-line-height": { "prop": "--spectrum-detail-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "detail-margin-bottom-multiplier": { "prop": "--spectrum-detail-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "detail-margin-top-multiplier": { "prop": "--spectrum-detail-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "detail-sans-serif-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-emphasized-font-style", @@ -4075,8 +5006,8 @@ }, "detail-sans-serif-emphasized-font-weight": { "prop": "--spectrum-detail-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-regular-font-weight)", + "value": "400" }, "detail-sans-serif-font-family": { "prop": "--spectrum-detail-sans-serif-font-family", @@ -4090,8 +5021,8 @@ }, "detail-sans-serif-font-weight": { "prop": "--spectrum-detail-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-sans-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-light-emphasized-font-style", @@ -4164,8 +5095,8 @@ }, "detail-serif-emphasized-font-weight": { "prop": "--spectrum-detail-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-font-family": { "prop": "--spectrum-detail-serif-font-family", @@ -4179,8 +5110,8 @@ }, "detail-serif-font-weight": { "prop": "--spectrum-detail-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-serif-light-emphasized-font-style", @@ -4248,42 +5179,52 @@ }, "detail-size-l": { "prop": "--spectrum-detail-size-l", - "ref": "var(--spectrum-font-size-100)", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "17px" + "value": "19px" } }, "detail-size-m": { "prop": "--spectrum-detail-size-m", - "ref": "var(--spectrum-font-size-75)", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "detail-size-s": { "prop": "--spectrum-detail-size-s", - "ref": "var(--spectrum-font-size-50)", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "11px" + "value": "12px" }, "mobile": { - "value": "13px" + "value": "15px" } }, "detail-size-xl": { "prop": "--spectrum-detail-size-xl", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" + } + }, + "detail-size-xs": { + "prop": "--spectrum-detail-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" } }, "disabled-background-color": { @@ -4404,34 +5345,191 @@ }, "drop-shadow-blur": { "prop": "--spectrum-drop-shadow-blur", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, + "drop-shadow-blur-100": { + "prop": "--spectrum-drop-shadow-blur-100", + "value": "6px" + }, + "drop-shadow-blur-200": { + "prop": "--spectrum-drop-shadow-blur-200", + "value": "8px" + }, + "drop-shadow-blur-300": { + "prop": "--spectrum-drop-shadow-blur-300", + "value": "16px" }, "drop-shadow-color": { "prop": "--spectrum-drop-shadow-color", + "ref": "var(--spectrum-drop-shadow-color-100)", + "light": { + "value": "rgba(0, 0, 0, 0.12)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.36)" + } + }, + "drop-shadow-color-100": { + "prop": "--spectrum-drop-shadow-color-100", + "light": { + "value": "rgba(0, 0, 0, 0.12)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.36)" + } + }, + "drop-shadow-color-200": { + "prop": "--spectrum-drop-shadow-color-200", + "light": { + "value": "rgba(0, 0, 0, 0.16)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.48)" + } + }, + "drop-shadow-color-300": { + "prop": "--spectrum-drop-shadow-color-300", + "light": { + "value": "rgba(0, 0, 0, 0.2)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.6)" + } + }, + "drop-shadow-dragged-blur": { + "prop": "--spectrum-drop-shadow-dragged-blur", + "ref": "var(--spectrum-drop-shadow-blur-300)", + "value": "16px" + }, + "drop-shadow-dragged-color": { + "prop": "--spectrum-drop-shadow-dragged-color", + "ref": "var(--spectrum-drop-shadow-color-300)", + "light": { + "value": "rgba(0, 0, 0, 0.2)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.6)" + } + }, + "drop-shadow-dragged-x": { + "prop": "--spectrum-drop-shadow-dragged-x", + "ref": "var(--spectrum-drop-shadow-x-300)", + "value": "0px" + }, + "drop-shadow-dragged-y": { + "prop": "--spectrum-drop-shadow-dragged-y", + "ref": "var(--spectrum-drop-shadow-y-300)", + "value": "6px" + }, + "drop-shadow-elevated-blur": { + "prop": "--spectrum-drop-shadow-elevated-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, + "drop-shadow-elevated-color": { + "prop": "--spectrum-drop-shadow-elevated-color", + "ref": "var(--spectrum-drop-shadow-color-200)", + "light": { + "value": "rgba(0, 0, 0, 0.16)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.48)" + } + }, + "drop-shadow-elevated-x": { + "prop": "--spectrum-drop-shadow-elevated-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-elevated-y": { + "prop": "--spectrum-drop-shadow-elevated-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, + "drop-shadow-emphasized-default-blur": { + "prop": "--spectrum-drop-shadow-emphasized-default-blur", + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, + "drop-shadow-emphasized-default-color": { + "prop": "--spectrum-drop-shadow-emphasized-default-color", + "ref": "var(--spectrum-drop-shadow-color-100)", + "light": { + "value": "rgba(0, 0, 0, 0.12)" + }, + "dark": { + "value": "rgba(0, 0, 0, 0.36)" + } + }, + "drop-shadow-emphasized-default-x": { + "prop": "--spectrum-drop-shadow-emphasized-default-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-emphasized-default-y": { + "prop": "--spectrum-drop-shadow-emphasized-default-y", + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-emphasized-hover-blur": { + "prop": "--spectrum-drop-shadow-emphasized-hover-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, + "drop-shadow-emphasized-hover-color": { + "prop": "--spectrum-drop-shadow-emphasized-hover-color", + "ref": "var(--spectrum-drop-shadow-color-200)", "light": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.16)" }, "dark": { - "value": "rgba(0, 0, 0, 0.8)" + "value": "rgba(0, 0, 0, 0.48)" } }, + "drop-shadow-emphasized-hover-x": { + "prop": "--spectrum-drop-shadow-emphasized-hover-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-emphasized-hover-y": { + "prop": "--spectrum-drop-shadow-emphasized-hover-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, "drop-shadow-x": { "prop": "--spectrum-drop-shadow-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-x-100": { + "prop": "--spectrum-drop-shadow-x-100", + "value": "0px" + }, + "drop-shadow-x-200": { + "prop": "--spectrum-drop-shadow-x-200", + "value": "0px" + }, + "drop-shadow-x-300": { + "prop": "--spectrum-drop-shadow-x-300", "value": "0px" }, "drop-shadow-y": { "prop": "--spectrum-drop-shadow-y", - "desktop": { - "value": "1px" - }, - "mobile": { - "value": "2px" - } + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-y-100": { + "prop": "--spectrum-drop-shadow-y-100", + "value": "1px" + }, + "drop-shadow-y-200": { + "prop": "--spectrum-drop-shadow-y-200", + "value": "2px" + }, + "drop-shadow-y-300": { + "prop": "--spectrum-drop-shadow-y-300", + "value": "6px" }, "drop-zone-background-color": { "prop": "--spectrum-drop-zone-background-color", @@ -4451,8 +5549,8 @@ "prop": "--spectrum-drop-zone-background-color-opacity-filled", "value": "0.3" }, - "drop-zone-body-size": { - "prop": "--spectrum-drop-zone-body-size", + "drop-zone-body-font-size": { + "prop": "--spectrum-drop-zone-body-font-size", "ref": "var(--spectrum-body-size-xs)", "desktop": { "value": "14px" @@ -4461,39 +5559,54 @@ "value": "15px" } }, + "drop-zone-body-size": { + "prop": "--spectrum-drop-zone-body-size", + "ref": "var(--spectrum-drop-zone-body-font-size)", + "value": "{drop-zone-body-font-size}" + }, "drop-zone-border-dash-gap": { "prop": "--spectrum-drop-zone-border-dash-gap", - "value": "4px" + "value": "6px" }, "drop-zone-border-dash-length": { "prop": "--spectrum-drop-zone-border-dash-length", "value": "8px" }, - "drop-zone-cjk-title-size": { - "prop": "--spectrum-drop-zone-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", + "drop-zone-cjk-title-font-size": { + "prop": "--spectrum-drop-zone-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", "desktop": { - "value": "20px" + "value": "18px" }, "mobile": { - "value": "22px" + "value": "19px" } }, + "drop-zone-cjk-title-size": { + "prop": "--spectrum-drop-zone-cjk-title-size", + "ref": "var(--spectrum-drop-zone-cjk-title-font-size)", + "value": "{drop-zone-cjk-title-font-size}" + }, "drop-zone-content-maximum-width": { "prop": "--spectrum-drop-zone-content-maximum-width", "ref": "var(--spectrum-illustrated-message-maximum-width)", "value": "380px" }, - "drop-zone-title-size": { - "prop": "--spectrum-drop-zone-title-size", - "ref": "var(--spectrum-heading-size-s)", + "drop-zone-title-font-size": { + "prop": "--spectrum-drop-zone-title-font-size", + "ref": "var(--spectrum-title-size-l)", "desktop": { - "value": "22px" + "value": "20px" }, "mobile": { "value": "22px" } }, + "drop-zone-title-size": { + "prop": "--spectrum-drop-zone-title-size", + "ref": "var(--spectrum-drop-zone-title-font-size)", + "value": "{drop-zone-title-font-size}" + }, "drop-zone-width": { "prop": "--spectrum-drop-zone-width", "value": "428px" @@ -4502,6 +5615,42 @@ "prop": "--spectrum-extra-bold-font-weight", "value": "800" }, + "field-default-width-extra-large": { + "prop": "--spectrum-field-default-width-extra-large", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } + }, + "field-default-width-large": { + "prop": "--spectrum-field-default-width-large", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-default-width-medium": { + "prop": "--spectrum-field-default-width-medium", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-default-width-small": { + "prop": "--spectrum-field-default-width-small", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, "field-edge-to-alert-icon-extra-large": { "prop": "--spectrum-field-edge-to-alert-icon-extra-large", "desktop": { @@ -4941,28 +6090,28 @@ "field-top-to-progress-circle-extra-large": { "prop": "--spectrum-field-top-to-progress-circle-extra-large", "desktop": { - "value": "16px" + "value": "11px" }, "mobile": { - "value": "22px" + "value": "15px" } }, "field-top-to-progress-circle-large": { "prop": "--spectrum-field-top-to-progress-circle-large", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "11px" } }, "field-top-to-progress-circle-medium": { "prop": "--spectrum-field-top-to-progress-circle-medium", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "12px" + "value": "8px" } }, "field-top-to-progress-circle-small": { @@ -4971,7 +6120,7 @@ "value": "4px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "field-top-to-validation-icon-extra-large": { @@ -5012,6 +6161,7 @@ }, "field-width": { "prop": "--spectrum-field-width", + "ref": "var(--spectrum-field-width-small)", "desktop": { "value": "192px" }, @@ -5019,16 +6169,56 @@ "value": "240px" } }, - "floating-action-button-drop-shadow-blur": { - "prop": "--spectrum-floating-action-button-drop-shadow-blur", - "value": "12px" - }, - "floating-action-button-drop-shadow-color": { - "prop": "--spectrum-floating-action-button-drop-shadow-color", - "ref": "var(--spectrum-transparent-black-300)", - "value": "rgba(0, 0, 0, 0.15)" + "field-width-extra-large": { + "prop": "--spectrum-field-width-extra-large", + "ref": "var(--spectrum-field-default-width-extra-large)", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } }, - "floating-action-button-drop-shadow-y": { + "field-width-large": { + "prop": "--spectrum-field-width-large", + "ref": "var(--spectrum-field-default-width-large)", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-width-medium": { + "prop": "--spectrum-field-width-medium", + "ref": "var(--spectrum-field-default-width-medium)", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-width-small": { + "prop": "--spectrum-field-width-small", + "ref": "var(--spectrum-field-default-width-small)", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, + "floating-action-button-drop-shadow-blur": { + "prop": "--spectrum-floating-action-button-drop-shadow-blur", + "value": "12px" + }, + "floating-action-button-drop-shadow-color": { + "prop": "--spectrum-floating-action-button-drop-shadow-color", + "ref": "var(--spectrum-transparent-black-300)", + "value": "rgba(0, 0, 0, 0.15)" + }, + "floating-action-button-drop-shadow-y": { "prop": "--spectrum-floating-action-button-drop-shadow-y", "value": "4px" }, @@ -5044,7 +6234,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(69, 110, 254)" + "value": "rgb(64, 105, 253)" } }, "focus-indicator-gap": { @@ -5085,7 +6275,7 @@ "font-size-1200": { "prop": "--spectrum-font-size-1200", "desktop": { - "value": "50px" + "value": "51px" }, "mobile": { "value": "62px" @@ -5094,12 +6284,30 @@ "font-size-1300": { "prop": "--spectrum-font-size-1300", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, + "font-size-1400": { + "prop": "--spectrum-font-size-1400", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" + } + }, + "font-size-1500": { + "prop": "--spectrum-font-size-1500", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, "font-size-200": { "prop": "--spectrum-font-size-200", "desktop": { @@ -5109,6 +6317,15 @@ "value": "19px" } }, + "font-size-25": { + "prop": "--spectrum-font-size-25", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, "font-size-300": { "prop": "--spectrum-font-size-300", "desktop": { @@ -5322,7 +6539,7 @@ "value": "rgb(200, 68, 220)" }, "dark": { - "value": "rgb(192, 64, 212)" + "value": "rgb(186, 60, 206)" } }, "fuchsia-900": { @@ -5336,12 +6553,22 @@ }, "fuchsia-background-color-default": { "prop": "--spectrum-fuchsia-background-color-default", - "ref": "var(--spectrum-fuchsia-700)", + "ref": "var(--spectrum-fuchsia-800)", "light": { "value": "rgb(181, 57, 200)" }, "dark": { - "value": "rgb(173, 51, 192)" + "value": "rgb(186, 60, 206)" + } + }, + "fuchsia-subtle-background-color-default": { + "prop": "--spectrum-fuchsia-subtle-background-color-default", + "ref": "var(--spectrum-fuchsia-300)", + "light": { + "value": "rgb(253, 233, 255)" + }, + "dark": { + "value": "rgb(79, 0, 95)" } }, "fuchsia-visual-color": { @@ -5354,6 +6581,30 @@ "value": "rgb(213, 73, 235)" } }, + "gradient-stop-1-genai": { + "prop": "--spectrum-gradient-stop-1-genai", + "value": 0 + }, + "gradient-stop-1-premium": { + "prop": "--spectrum-gradient-stop-1-premium", + "value": 0 + }, + "gradient-stop-2-genai": { + "prop": "--spectrum-gradient-stop-2-genai", + "value": 0.3333 + }, + "gradient-stop-2-premium": { + "prop": "--spectrum-gradient-stop-2-premium", + "value": 0.6666 + }, + "gradient-stop-3-genai": { + "prop": "--spectrum-gradient-stop-3-genai", + "value": 1 + }, + "gradient-stop-3-premium": { + "prop": "--spectrum-gradient-stop-3-premium", + "value": 1 + }, "gray-100": { "prop": "--spectrum-gray-100", "light": { @@ -5473,12 +6724,22 @@ }, "gray-background-color-default": { "prop": "--spectrum-gray-background-color-default", - "ref": "var(--spectrum-gray-700)", + "ref": "var(--spectrum-gray-500)", "light": { "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(175, 175, 175)" + "value": "rgb(109, 109, 109)" + } + }, + "gray-subtle-background-color-default": { + "prop": "--spectrum-gray-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(57, 57, 57)" } }, "gray-visual-color": { @@ -5623,7 +6884,7 @@ "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(6, 140, 82)" + "value": "rgb(6, 136, 80)" } }, "green-900": { @@ -5637,12 +6898,22 @@ }, "green-background-color-default": { "prop": "--spectrum-green-background-color-default", - "ref": "var(--spectrum-green-700)", + "ref": "var(--spectrum-green-800)", "light": { "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(6, 136, 80)" + } + }, + "green-subtle-background-color-default": { + "prop": "--spectrum-green-subtle-background-color-default", + "ref": "var(--spectrum-green-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" } }, "green-visual-color": { @@ -5652,7 +6923,7 @@ "value": "rgb(11, 164, 93)" }, "dark": { - "value": "rgb(6, 140, 82)" + "value": "rgb(6, 136, 80)" } }, "heading-cjk-emphasized-font-style": { @@ -5697,8 +6968,8 @@ }, "heading-cjk-heavy-font-weight": { "prop": "--spectrum-heading-cjk-heavy-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-cjk-heavy-strong-emphasized-font-style": { "prop": "--spectrum-heading-cjk-heavy-strong-emphasized-font-style", @@ -5763,7 +7034,7 @@ "heading-cjk-line-height": { "prop": "--spectrum-heading-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 }, "heading-cjk-size-l": { "prop": "--spectrum-heading-cjk-size-l", @@ -5817,12 +7088,12 @@ }, "heading-cjk-size-xxl": { "prop": "--spectrum-heading-cjk-size-xxl", - "ref": "var(--spectrum-font-size-900)", + "ref": "var(--spectrum-font-size-1000)", "desktop": { - "value": "36px" + "value": "40px" }, "mobile": { - "value": "44px" + "value": "49px" } }, "heading-cjk-size-xxs": { @@ -5837,12 +7108,22 @@ }, "heading-cjk-size-xxxl": { "prop": "--spectrum-heading-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-1300)", + "ref": "var(--spectrum-font-size-1200)", "desktop": { - "value": "60px" + "value": "51px" }, "mobile": { - "value": "70px" + "value": "62px" + } + }, + "heading-cjk-size-xxxxl": { + "prop": "--spectrum-heading-cjk-size-xxxxl", + "ref": "var(--spectrum-font-size-1400)", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" } }, "heading-cjk-strong-emphasized-font-style": { @@ -5878,15 +7159,15 @@ "heading-line-height": { "prop": "--spectrum-heading-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "heading-margin-bottom-multiplier": { "prop": "--spectrum-heading-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "heading-margin-top-multiplier": { "prop": "--spectrum-heading-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "heading-sans-serif-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-emphasized-font-style", @@ -5895,8 +7176,8 @@ }, "heading-sans-serif-emphasized-font-weight": { "prop": "--spectrum-heading-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-font-family": { "prop": "--spectrum-heading-sans-serif-font-family", @@ -5910,8 +7191,8 @@ }, "heading-sans-serif-font-weight": { "prop": "--spectrum-heading-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-heavy-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-style", @@ -6160,12 +7441,12 @@ }, "heading-size-s": { "prop": "--spectrum-heading-size-s", - "ref": "var(--spectrum-font-size-300)", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "24px" } }, "heading-size-xl": { @@ -6180,12 +7461,12 @@ }, "heading-size-xs": { "prop": "--spectrum-heading-size-xs", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" } }, "heading-size-xxl": { @@ -6212,12 +7493,22 @@ "prop": "--spectrum-heading-size-xxxl", "ref": "var(--spectrum-font-size-1300)", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, + "heading-size-xxxxl": { + "prop": "--spectrum-heading-size-xxxxl", + "ref": "var(--spectrum-font-size-1500)", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, "help-text-to-component": { "prop": "--spectrum-help-text-to-component", "value": "0px" @@ -6262,6 +7553,16 @@ "value": "6px" } }, + "icon-color-blue-background": { + "prop": "--spectrum-icon-color-blue-background", + "ref": "var(--spectrum-blue-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, "icon-color-blue-primary-default": { "prop": "--spectrum-icon-color-blue-primary-default", "ref": "var(--spectrum-blue-800)", @@ -6269,115 +7570,1010 @@ "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(69, 110, 254)" + "value": "rgb(64, 105, 253)" } }, - "icon-color-green-primary-default": { - "prop": "--spectrum-icon-color-green-primary-default", - "ref": "var(--spectrum-green-800)", + "icon-color-blue-primary-down": { + "prop": "--spectrum-icon-color-blue-primary-down", + "ref": "var(--spectrum-blue-1000)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(29, 62, 207)" }, "dark": { - "value": "rgb(6, 140, 82)" + "value": "rgb(105, 149, 254)" } }, - "icon-color-inverse": { - "prop": "--spectrum-icon-color-inverse", - "ref": "var(--spectrum-gray-50)", + "icon-color-blue-primary-hover": { + "prop": "--spectrum-icon-color-blue-primary-hover", + "ref": "var(--spectrum-blue-900)", "light": { - "value": "rgb(248, 248, 248)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(27, 27, 27)" + "value": "rgb(86, 129, 255)" } }, - "icon-color-primary-default": { - "prop": "--spectrum-icon-color-primary-default", - "ref": "var(--spectrum-neutral-content-color-default)", + "icon-color-brown-background": { + "prop": "--spectrum-icon-color-brown-background", + "ref": "var(--spectrum-brown-400)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(247, 238, 225)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(78, 55, 19)" } }, - "icon-color-red-primary-default": { - "prop": "--spectrum-icon-color-red-primary-default", - "ref": "var(--spectrum-red-700)", + "icon-color-brown-primary-default": { + "prop": "--spectrum-icon-color-brown-primary-default", + "ref": "var(--spectrum-brown-700)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(154, 123, 77)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(132, 104, 61)" } }, - "icon-color-yellow-primary-default": { - "prop": "--spectrum-icon-color-yellow-primary-default", - "ref": "var(--spectrum-yellow-1000)", + "icon-color-brown-primary-down": { + "prop": "--spectrum-icon-color-brown-primary-down", + "ref": "var(--spectrum-brown-900)", "light": { - "value": "rgb(245, 199, 0)" + "value": "rgb(119, 91, 50)" }, "dark": { - "value": "rgb(203, 141, 0)" + "value": "rgb(163, 132, 84)" } }, - "illustrated-message-body-size": { - "prop": "--spectrum-illustrated-message-body-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "14px" + "icon-color-brown-primary-hover": { + "prop": "--spectrum-icon-color-brown-primary-hover", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" }, - "mobile": { - "value": "15px" + "dark": { + "value": "rgb(143, 114, 69)" } }, - "illustrated-message-cjk-title-size": { - "prop": "--spectrum-illustrated-message-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", - "desktop": { - "value": "20px" + "icon-color-celery-background": { + "prop": "--spectrum-icon-color-celery-background", + "ref": "var(--spectrum-celery-400)", + "light": { + "value": "rgb(235, 255, 220)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(31, 67, 4)" } }, - "illustrated-message-maximum-width": { - "prop": "--spectrum-illustrated-message-maximum-width", - "value": "380px" + "icon-color-celery-primary-default": { + "prop": "--spectrum-icon-color-celery-primary-default", + "ref": "var(--spectrum-celery-900)", + "light": { + "value": "rgb(82, 161, 25)" + }, + "dark": { + "value": "rgb(78, 154, 23)" + } }, - "illustrated-message-title-size": { - "prop": "--spectrum-illustrated-message-title-size", - "ref": "var(--spectrum-heading-size-s)", - "desktop": { - "value": "22px" + "icon-color-celery-primary-down": { + "prop": "--spectrum-icon-color-celery-primary-down", + "ref": "var(--spectrum-celery-1100)", + "light": { + "value": "rgb(64, 129, 17)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(100, 190, 35)" } }, - "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "value": "16px" + "icon-color-celery-primary-hover": { + "prop": "--spectrum-icon-color-celery-primary-hover", + "ref": "var(--spectrum-celery-1000)", + "light": { + "value": "rgb(72, 144, 20)" + }, + "dark": { + "value": "rgb(88, 172, 28)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "value": "13px" + "icon-color-chartreuse-background": { + "prop": "--spectrum-icon-color-chartreuse-background", + "ref": "var(--spectrum-chartreuse-400)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(53, 63, 0)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "value": "9px" + "icon-color-chartreuse-primary-default": { + "prop": "--spectrum-icon-color-chartreuse-primary-default", + "ref": "var(--spectrum-chartreuse-1000)", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "value": "7px" + "icon-color-chartreuse-primary-down": { + "prop": "--spectrum-icon-color-chartreuse-primary-down", + "ref": "var(--spectrum-chartreuse-1200)", + "light": { + "value": "rgb(114, 137, 0)" + }, + "dark": { + "value": "rgb(169, 203, 0)" + } }, - "in-field-button-edge-to-fill": { - "prop": "--spectrum-in-field-button-edge-to-fill", - "value": "0px" + "icon-color-chartreuse-primary-hover": { + "prop": "--spectrum-icon-color-chartreuse-primary-hover", + "ref": "var(--spectrum-chartreuse-1100)", + "light": { + "value": "rgb(128, 153, 0)" + }, + "dark": { + "value": "rgb(151, 181, 0)" + } }, - "in-field-button-fill-stacked-inner-border-rounding": { - "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", + "icon-color-cinnamon-background": { + "prop": "--spectrum-icon-color-cinnamon-background", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } + }, + "icon-color-cinnamon-primary-default": { + "prop": "--spectrum-icon-color-cinnamon-primary-default", + "ref": "var(--spectrum-cinnamon-800)", + "dark": { + "value": "rgb(176, 98, 59)" + }, + "light": { + "value": "rgb(184, 109, 70)" + } + }, + "icon-color-cinnamon-primary-down": { + "prop": "--spectrum-icon-color-cinnamon-primary-down", + "ref": "var(--spectrum-cinnamon-1000)", + "dark": { + "value": "rgb(206, 136, 99)" + }, + "light": { + "value": "rgb(147, 77, 43)" + } + }, + "icon-color-cinnamon-primary-hover": { + "prop": "--spectrum-icon-color-cinnamon-primary-hover", + "ref": "var(--spectrum-cinnamon-900)", + "dark": { + "value": "rgb(192, 119, 80)" + }, + "light": { + "value": "rgb(170, 94, 56)" + } + }, + "icon-color-cyan-background": { + "prop": "--spectrum-icon-color-cyan-background", + "ref": "var(--spectrum-cyan-400)", + "light": { + "value": "rgb(238, 250, 254)" + }, + "dark": { + "value": "rgb(0, 64, 88)" + } + }, + "icon-color-cyan-primary-default": { + "prop": "--spectrum-icon-color-cyan-primary-default", + "ref": "var(--spectrum-cyan-800)", + "light": { + "value": "rgb(18, 134, 205)" + }, + "dark": { + "value": "rgb(13, 125, 186)" + } + }, + "icon-color-cyan-primary-down": { + "prop": "--spectrum-icon-color-cyan-primary-down", + "ref": "var(--spectrum-cyan-1000)", + "light": { + "value": "rgb(4, 102, 145)" + }, + "dark": { + "value": "rgb(38, 159, 244)" + } + }, + "icon-color-cyan-primary-hover": { + "prop": "--spectrum-icon-color-cyan-primary-hover", + "ref": "var(--spectrum-cyan-900)", + "light": { + "value": "rgb(11, 120, 179)" + }, + "dark": { + "value": "rgb(24, 142, 220)" + } + }, + "icon-color-disabled-primary": { + "prop": "--spectrum-icon-color-disabled-primary", + "ref": "var(--spectrum-gray-400)", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "icon-color-emphasized-background": { + "prop": "--spectrum-icon-color-emphasized-background", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "icon-color-fuchsia-background": { + "prop": "--spectrum-icon-color-fuchsia-background", + "ref": "var(--spectrum-fuchsia-200)", + "light": { + "value": "rgb(253, 233, 255)" + }, + "dark": { + "value": "rgb(61, 0, 74)" + } + }, + "icon-color-fuchsia-primary-default": { + "prop": "--spectrum-icon-color-fuchsia-primary-default", + "ref": "var(--spectrum-fuchsia-700)", + "light": { + "value": "rgb(181, 57, 200)" + }, + "dark": { + "value": "rgb(173, 51, 192)" + } + }, + "icon-color-fuchsia-primary-down": { + "prop": "--spectrum-icon-color-fuchsia-primary-down", + "ref": "var(--spectrum-fuchsia-900)", + "light": { + "value": "rgb(135, 27, 154)" + }, + "dark": { + "value": "rgb(213, 73, 235)" + } + }, + "icon-color-fuchsia-primary-hover": { + "prop": "--spectrum-icon-color-fuchsia-primary-hover", + "ref": "var(--spectrum-fuchsia-800)", + "light": { + "value": "rgb(156, 40, 175)" + }, + "dark": { + "value": "rgb(186, 60, 206)" + } + }, + "icon-color-green-background": { + "prop": "--spectrum-icon-color-green-background", + "ref": "var(--spectrum-green-400)", + "light": { + "value": "rgb(237, 252, 241)" + }, + "dark": { + "value": "rgb(0, 68, 48)" + } + }, + "icon-color-green-primary-default": { + "prop": "--spectrum-icon-color-green-primary-default", + "ref": "var(--spectrum-green-800)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "icon-color-green-primary-down": { + "prop": "--spectrum-icon-color-green-primary-down", + "ref": "var(--spectrum-green-1000)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(14, 175, 98)" + } + }, + "icon-color-green-primary-hover": { + "prop": "--spectrum-icon-color-green-primary-hover", + "ref": "var(--spectrum-green-900)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "icon-color-indigo-background": { + "prop": "--spectrum-icon-color-indigo-background", + "ref": "var(--spectrum-indigo-100)", + "light": { + "value": "rgb(235, 238, 255)" + }, + "dark": { + "value": "rgb(30, 0, 93)" + } + }, + "icon-color-indigo-primary-default": { + "prop": "--spectrum-icon-color-indigo-primary-default", + "ref": "var(--spectrum-indigo-700)", + "light": { + "value": "rgb(113, 85, 250)" + }, + "dark": { + "value": "rgb(109, 75, 248)" + } + }, + "icon-color-indigo-primary-down": { + "prop": "--spectrum-icon-color-indigo-primary-down", + "ref": "var(--spectrum-indigo-900)", + "light": { + "value": "rgb(84, 36, 219)" + }, + "dark": { + "value": "rgb(128, 119, 254)" + } + }, + "icon-color-indigo-primary-hover": { + "prop": "--spectrum-icon-color-indigo-primary-hover", + "ref": "var(--spectrum-indigo-800)", + "light": { + "value": "rgb(99, 56, 238)" + }, + "dark": { + "value": "rgb(116, 91, 252)" + } + }, + "icon-color-informative": { + "prop": "--spectrum-icon-color-informative", + "ref": "var(--spectrum-informative-color-900)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(86, 129, 255)" + } + }, + "icon-color-inverse": { + "prop": "--spectrum-icon-color-inverse", + "ref": "var(--spectrum-gray-50)", + "light": { + "value": "rgb(248, 248, 248)" + }, + "dark": { + "value": "rgb(27, 27, 27)" + } + }, + "icon-color-inverse-background": { + "prop": "--spectrum-icon-color-inverse-background", + "ref": "var(--spectrum-gray-50)", + "light": { + "value": "rgb(248, 248, 248)" + }, + "dark": { + "value": "rgb(27, 27, 27)" + } + }, + "icon-color-magenta-background": { + "prop": "--spectrum-icon-color-magenta-background", + "ref": "var(--spectrum-magenta-200)", + "light": { + "value": "rgb(255, 232, 240)" + }, + "dark": { + "value": "rgb(74, 0, 27)" + } + }, + "icon-color-magenta-primary-default": { + "prop": "--spectrum-icon-color-magenta-primary-default", + "ref": "var(--spectrum-magenta-700)", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(207, 31, 92)" + } + }, + "icon-color-magenta-primary-down": { + "prop": "--spectrum-icon-color-magenta-primary-down", + "ref": "var(--spectrum-magenta-900)", + "light": { + "value": "rgb(163, 5, 62)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "icon-color-magenta-primary-hover": { + "prop": "--spectrum-icon-color-magenta-primary-hover", + "ref": "var(--spectrum-magenta-800)", + "light": { + "value": "rgb(186, 22, 80)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "icon-color-negative": { + "prop": "--spectrum-icon-color-negative", + "ref": "var(--spectrum-negative-color-900)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "icon-color-neutral": { + "prop": "--spectrum-icon-color-neutral", + "ref": "var(--spectrum-gray-600)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(138, 138, 138)" + } + }, + "icon-color-notice": { + "prop": "--spectrum-icon-color-notice", + "ref": "var(--spectrum-notice-color-900)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "icon-color-orange-background": { + "prop": "--spectrum-icon-color-orange-background", + "ref": "var(--spectrum-orange-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "icon-color-orange-primary-default": { + "prop": "--spectrum-icon-color-orange-primary-default", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "icon-color-orange-primary-down": { + "prop": "--spectrum-icon-color-orange-primary-down", + "ref": "var(--spectrum-orange-1100)", + "light": { + "value": "rgb(194, 78, 0)" + }, + "dark": { + "value": "rgb(255, 137, 0)" + } + }, + "icon-color-orange-primary-hover": { + "prop": "--spectrum-icon-color-orange-primary-hover", + "ref": "var(--spectrum-orange-1000)", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(243, 117, 0)" + } + }, + "icon-color-pink-background": { + "prop": "--spectrum-icon-color-pink-background", + "ref": "var(--spectrum-pink-200)", + "dark": { + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" + } + }, + "icon-color-pink-primary-default": { + "prop": "--spectrum-icon-color-pink-primary-default", + "ref": "var(--spectrum-pink-700)", + "light": { + "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(196, 39, 138)" + } + }, + "icon-color-pink-primary-down": { + "prop": "--spectrum-icon-color-pink-primary-down", + "ref": "var(--spectrum-pink-900)", + "light": { + "value": "rgb(176, 31, 123)" + }, + "dark": { + "value": "rgb(236, 67, 175)" + } + }, + "icon-color-pink-primary-hover": { + "prop": "--spectrum-icon-color-pink-primary-hover", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(213, 45, 151)" + } + }, + "icon-color-positive": { + "prop": "--spectrum-icon-color-positive", + "ref": "var(--spectrum-positive-color-900)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "icon-color-primary-default": { + "prop": "--spectrum-icon-color-primary-default", + "ref": "var(--spectrum-neutral-content-color-default)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "icon-color-primary-down": { + "prop": "--spectrum-icon-color-primary-down", + "ref": "var(--spectrum-neutral-content-color-down)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "icon-color-primary-hover": { + "prop": "--spectrum-icon-color-primary-hover", + "ref": "var(--spectrum-neutral-content-color-hover)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "icon-color-purple-background": { + "prop": "--spectrum-icon-color-purple-background", + "ref": "var(--spectrum-purple-200)", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(50, 0, 96)" + } + }, + "icon-color-purple-primary-default": { + "prop": "--spectrum-icon-color-purple-primary-default", + "ref": "var(--spectrum-purple-700)", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(148, 62, 224)" + } + }, + "icon-color-purple-primary-down": { + "prop": "--spectrum-icon-color-purple-primary-down", + "ref": "var(--spectrum-purple-900)", + "light": { + "value": "rgb(115, 13, 204)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "icon-color-purple-primary-hover": { + "prop": "--spectrum-icon-color-purple-primary-hover", + "ref": "var(--spectrum-purple-800)", + "light": { + "value": "rgb(134, 40, 217)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "icon-color-red-background": { + "prop": "--spectrum-icon-color-red-background", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "icon-color-red-primary-default": { + "prop": "--spectrum-icon-color-red-primary-default", + "ref": "var(--spectrum-red-700)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "icon-color-red-primary-down": { + "prop": "--spectrum-icon-color-red-primary-down", + "ref": "var(--spectrum-red-900)", + "light": { + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "icon-color-red-primary-hover": { + "prop": "--spectrum-icon-color-red-primary-hover", + "ref": "var(--spectrum-red-800)", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "icon-color-seafoam-background": { + "prop": "--spectrum-icon-color-seafoam-background", + "ref": "var(--spectrum-seafoam-400)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 67, 59)" + } + }, + "icon-color-seafoam-primary-default": { + "prop": "--spectrum-icon-color-seafoam-primary-default", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(9, 144, 120)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "icon-color-seafoam-primary-down": { + "prop": "--spectrum-icon-color-seafoam-primary-down", + "ref": "var(--spectrum-seafoam-1000)", + "light": { + "value": "rgb(5, 108, 92)" + }, + "dark": { + "value": "rgb(12, 173, 142)" + } + }, + "icon-color-seafoam-primary-hover": { + "prop": "--spectrum-icon-color-seafoam-primary-hover", + "ref": "var(--spectrum-seafoam-900)", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(10, 154, 128)" + } + }, + "icon-color-silver-background": { + "prop": "--spectrum-icon-color-silver-background", + "ref": "var(--spectrum-silver-400)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(59, 59, 59)" + } + }, + "icon-color-silver-primary-default": { + "prop": "--spectrum-icon-color-silver-primary-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(143, 143, 143)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "icon-color-silver-primary-down": { + "prop": "--spectrum-icon-color-silver-primary-down", + "ref": "var(--spectrum-silver-1000)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(152, 152, 152)" + } + }, + "icon-color-silver-primary-hover": { + "prop": "--spectrum-icon-color-silver-primary-hover", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" + } + }, + "icon-color-turquoise-background": { + "prop": "--spectrum-icon-color-turquoise-background", + "ref": "var(--spectrum-turquoise-400)", + "light": { + "value": "rgb(209, 245, 245)" + }, + "dark": { + "value": "rgb(0, 66, 72)" + } + }, + "icon-color-turquoise-primary-default": { + "prop": "--spectrum-icon-color-turquoise-primary-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(12, 158, 171)" + }, + "dark": { + "value": "rgb(9, 131, 142)" + } + }, + "icon-color-turquoise-primary-down": { + "prop": "--spectrum-icon-color-turquoise-primary-down", + "ref": "var(--spectrum-turquoise-1000)", + "light": { + "value": "rgb(8, 126, 137)" + }, + "dark": { + "value": "rgb(13, 168, 182)" + } + }, + "icon-color-turquoise-primary-hover": { + "prop": "--spectrum-icon-color-turquoise-primary-hover", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" + }, + "dark": { + "value": "rgb(11, 151, 164)" + } + }, + "icon-color-yellow-background": { + "prop": "--spectrum-icon-color-yellow-background", + "ref": "var(--spectrum-yellow-400)", + "light": { + "value": "rgb(255, 248, 204)" + }, + "dark": { + "value": "rgb(83, 52, 0)" + } + }, + "icon-color-yellow-primary-default": { + "prop": "--spectrum-icon-color-yellow-primary-default", + "ref": "var(--spectrum-yellow-1200)", + "light": { + "value": "rgb(245, 199, 0)" + }, + "dark": { + "value": "rgb(235, 183, 0)" + } + }, + "icon-color-yellow-primary-down": { + "prop": "--spectrum-icon-color-yellow-primary-down", + "ref": "var(--spectrum-yellow-1400)", + "light": { + "value": "rgb(210, 149, 0)" + }, + "dark": { + "value": "rgb(255, 230, 86)" + } + }, + "icon-color-yellow-primary-hover": { + "prop": "--spectrum-icon-color-yellow-primary-hover", + "ref": "var(--spectrum-yellow-1300)", + "light": { + "value": "rgb(230, 175, 0)" + }, + "dark": { + "value": "rgb(249, 206, 0)" + } + }, + "illustrated-message-body-size": { + "prop": "--spectrum-illustrated-message-body-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-cjk-title-size": { + "prop": "--spectrum-illustrated-message-cjk-title-size", + "ref": "var(--spectrum-title-cjk-size-xl)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "22px" + } + }, + "illustrated-message-horizontal-maximum-width": { + "prop": "--spectrum-illustrated-message-horizontal-maximum-width", + "value": "535px" + }, + "illustrated-message-large-body-font-size": { + "prop": "--spectrum-illustrated-message-large-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-large-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-large-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-xl)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "22px" + } + }, + "illustrated-message-large-title-font-size": { + "prop": "--spectrum-illustrated-message-large-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "illustrated-message-maximum-width": { + "prop": "--spectrum-illustrated-message-maximum-width", + "ref": "var(--spectrum-illustrated-message-vertical-maximum-width)", + "value": "380px" + }, + "illustrated-message-medium-body-font-size": { + "prop": "--spectrum-illustrated-message-medium-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-medium-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "19px" + } + }, + "illustrated-message-medium-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-title-font-size", + "ref": "var(--spectrum-title-size-l)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "22px" + } + }, + "illustrated-message-small-body-font-size": { + "prop": "--spectrum-illustrated-message-small-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-small-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-small-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, + "illustrated-message-small-title-font-size": { + "prop": "--spectrum-illustrated-message-small-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "illustrated-message-title-size": { + "prop": "--spectrum-illustrated-message-title-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "illustrated-message-vertical-maximum-width": { + "prop": "--spectrum-illustrated-message-vertical-maximum-width", + "value": "380px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", + "value": "16px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", + "value": "13px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", + "value": "9px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", + "value": "7px" + }, + "in-field-button-edge-to-fill": { + "prop": "--spectrum-in-field-button-edge-to-fill", + "value": "0px" + }, + "in-field-button-edge-to-fill-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-extra-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "in-field-button-edge-to-fill-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-large", + "value": "8px" + }, + "in-field-button-edge-to-fill-medium": { + "prop": "--spectrum-in-field-button-edge-to-fill-medium", + "value": "6px" + }, + "in-field-button-edge-to-fill-small": { + "prop": "--spectrum-in-field-button-edge-to-fill-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "in-field-button-fill-stacked-inner-border-rounding": { + "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", "value": "0px" }, "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { @@ -6436,6 +8632,77 @@ "prop": "--spectrum-in-field-button-width-stacked-small", "value": "20px" }, + "in-field-progress-circle-edge-to-fill": { + "prop": "--spectrum-in-field-progress-circle-edge-to-fill", + "desktop": { + "value": "1px" + }, + "mobile": { + "value": "2px" + } + }, + "in-field-progress-circle-size-100": { + "prop": "--spectrum-in-field-progress-circle-size-100", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "in-field-progress-circle-size-200": { + "prop": "--spectrum-in-field-progress-circle-size-200", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "28px" + } + }, + "in-field-progress-circle-size-300": { + "prop": "--spectrum-in-field-progress-circle-size-300", + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "30px" + } + }, + "in-field-progress-circle-size-75": { + "prop": "--spectrum-in-field-progress-circle-size-75", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "18px" + } + }, + "in-field-stepper-to-end-extra-large": { + "prop": "--spectrum-in-field-stepper-to-end-extra-large", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "in-field-stepper-to-end-large": { + "prop": "--spectrum-in-field-stepper-to-end-large", + "value": "4px" + }, + "in-field-stepper-to-end-medium": { + "prop": "--spectrum-in-field-stepper-to-end-medium", + "value": "3px" + }, + "in-field-stepper-to-end-small": { + "prop": "--spectrum-in-field-stepper-to-end-small", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "3px" + } + }, "in-line-alert-minimum-width": { "prop": "--spectrum-in-line-alert-minimum-width", "value": "240px" @@ -6572,7 +8839,7 @@ "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(119, 97, 252)" + "value": "rgb(116, 91, 252)" } }, "indigo-900": { @@ -6586,12 +8853,22 @@ }, "indigo-background-color-default": { "prop": "--spectrum-indigo-background-color-default", - "ref": "var(--spectrum-indigo-700)", + "ref": "var(--spectrum-indigo-800)", "light": { "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(109, 75, 248)" + "value": "rgb(116, 91, 252)" + } + }, + "indigo-subtle-background-color-default": { + "prop": "--spectrum-indigo-subtle-background-color-default", + "ref": "var(--spectrum-indigo-300)", + "light": { + "value": "rgb(235, 238, 255)" + }, + "dark": { + "value": "rgb(47, 0, 140)" } }, "indigo-visual-color": { @@ -6606,42 +8883,42 @@ }, "informative-background-color-default": { "prop": "--spectrum-informative-background-color-default", - "ref": "var(--spectrum-informative-color-600)", + "ref": "var(--spectrum-informative-color-800)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(37, 73, 229)" + "value": "rgb(64, 105, 253)" } }, "informative-background-color-down": { "prop": "--spectrum-informative-background-color-down", - "ref": "var(--spectrum-informative-color-500)", + "ref": "var(--spectrum-informative-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "informative-background-color-hover": { "prop": "--spectrum-informative-background-color-hover", - "ref": "var(--spectrum-informative-color-500)", + "ref": "var(--spectrum-informative-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "informative-background-color-key-focus": { "prop": "--spectrum-informative-background-color-key-focus", - "ref": "var(--spectrum-informative-color-500)", + "ref": "var(--spectrum-informative-color-700)", "light": { "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(52, 91, 248)" } }, "informative-color-100": { @@ -6791,7 +9068,7 @@ "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(69, 110, 254)" + "value": "rgb(64, 105, 253)" } }, "informative-color-900": { @@ -6804,6 +9081,16 @@ "value": "rgb(86, 129, 255)" } }, + "informative-subtle-background-color-default": { + "prop": "--spectrum-informative-subtle-background-color-default", + "ref": "var(--spectrum-informative-color-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" + } + }, "informative-visual-color": { "prop": "--spectrum-informative-visual-color", "ref": "var(--spectrum-informative-color-900)", @@ -6818,17 +9105,48 @@ "prop": "--spectrum-italic-font-style", "value": "italic" }, + "letter-spacing": { + "prop": "--spectrum-letter-spacing", + "value": "0em" + }, "light-font-weight": { "prop": "--spectrum-light-font-weight", "value": "300" }, "line-height-100": { "prop": "--spectrum-line-height-100", - "value": "1.3" + "value": 1.3 }, "line-height-200": { "prop": "--spectrum-line-height-200", - "value": "1.5" + "value": 1.5 + }, + "link-out-icon-size-100": { + "prop": "--spectrum-link-out-icon-size-100", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "link-out-icon-size-200": { + "prop": "--spectrum-link-out-icon-size-200", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "link-out-icon-size-75": { + "prop": "--spectrum-link-out-icon-size-75", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } }, "magenta-100": { "prop": "--spectrum-magenta-100", @@ -6947,56 +9265,120 @@ "value": "rgb(181, 19, 76)" } }, - "magenta-700": { - "prop": "--spectrum-magenta-700", + "magenta-700": { + "prop": "--spectrum-magenta-700", + "light": { + "value": "rgb(255, 72, 133)" + }, + "dark": { + "value": "rgb(207, 31, 92)" + } + }, + "magenta-800": { + "prop": "--spectrum-magenta-800", + "light": { + "value": "rgb(240, 45, 110)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "magenta-900": { + "prop": "--spectrum-magenta-900", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "magenta-background-color-default": { + "prop": "--spectrum-magenta-background-color-default", + "ref": "var(--spectrum-magenta-800)", + "light": { + "value": "rgb(217, 35, 97)" + }, + "dark": { + "value": "rgb(224, 38, 101)" + } + }, + "magenta-subtle-background-color-default": { + "prop": "--spectrum-magenta-subtle-background-color-default", + "ref": "var(--spectrum-magenta-300)", + "light": { + "value": "rgb(255, 232, 240)" + }, + "dark": { + "value": "rgb(93, 0, 34)" + } + }, + "magenta-visual-color": { + "prop": "--spectrum-magenta-visual-color", + "ref": "var(--spectrum-magenta-900)", + "light": { + "value": "rgb(240, 45, 110)" + }, + "dark": { + "value": "rgb(255, 51, 119)" + } + }, + "medium-font-weight": { + "prop": "--spectrum-medium-font-weight", + "value": "500" + }, + "menu-item-background-color-default": { + "prop": "--spectrum-menu-item-background-color-default", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(255, 72, 133)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(207, 31, 92)" + "value": "rgb(50, 50, 50)" } }, - "magenta-800": { - "prop": "--spectrum-magenta-800", + "menu-item-background-color-disabled": { + "prop": "--spectrum-menu-item-background-color-disabled", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(231, 41, 105)" + "value": "rgb(50, 50, 50)" } }, - "magenta-900": { - "prop": "--spectrum-magenta-900", + "menu-item-background-color-down": { + "prop": "--spectrum-menu-item-background-color-down", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(50, 50, 50)" } }, - "magenta-background-color-default": { - "prop": "--spectrum-magenta-background-color-default", - "ref": "var(--spectrum-magenta-700)", + "menu-item-background-color-hover": { + "prop": "--spectrum-menu-item-background-color-hover", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(207, 31, 92)" + "value": "rgb(50, 50, 50)" } }, - "magenta-visual-color": { - "prop": "--spectrum-magenta-visual-color", - "ref": "var(--spectrum-magenta-900)", + "menu-item-background-color-keyboard-focus": { + "prop": "--spectrum-menu-item-background-color-keyboard-focus", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(50, 50, 50)" } }, - "medium-font-weight": { - "prop": "--spectrum-medium-font-weight", - "value": "500" + "menu-item-background-opacity": { + "prop": "--spectrum-menu-item-background-opacity", + "value": "0" }, "menu-item-edge-to-content-not-selected-extra-large": { "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", @@ -7036,11 +9418,28 @@ }, "menu-item-label-to-description": { "prop": "--spectrum-menu-item-label-to-description", + "ref": "var(--spectrum-menu-item-label-to-description-medium)", + "value": "1px" + }, + "menu-item-label-to-description-extra-large": { + "prop": "--spectrum-menu-item-label-to-description-extra-large", + "value": "2px" + }, + "menu-item-label-to-description-large": { + "prop": "--spectrum-menu-item-label-to-description-large", + "value": "2px" + }, + "menu-item-label-to-description-medium": { + "prop": "--spectrum-menu-item-label-to-description-medium", + "value": "1px" + }, + "menu-item-label-to-description-small": { + "prop": "--spectrum-menu-item-label-to-description-small", "value": "1px" }, "menu-item-section-divider-height": { "prop": "--spectrum-menu-item-section-divider-height", - "value": "8px" + "value": "12px" }, "menu-item-top-to-disclosure-icon-extra-large": { "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", @@ -7114,6 +9513,58 @@ "value": "9px" } }, + "menu-item-top-to-thumbnail-extra-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-extra-large", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "menu-item-top-to-thumbnail-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "menu-item-top-to-thumbnail-medium": { + "prop": "--spectrum-menu-item-top-to-thumbnail-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "menu-item-top-to-thumbnail-small": { + "prop": "--spectrum-menu-item-top-to-thumbnail-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "menu-section-header-to-description-extra-large": { + "prop": "--spectrum-menu-section-header-to-description-extra-large", + "value": "2px" + }, + "menu-section-header-to-description-large": { + "prop": "--spectrum-menu-section-header-to-description-large", + "value": "2px" + }, + "menu-section-header-to-description-medium": { + "prop": "--spectrum-menu-section-header-to-description-medium", + "value": "1px" + }, + "menu-section-header-to-description-small": { + "prop": "--spectrum-menu-section-header-to-description-small", + "value": "1px" + }, "meter-default-width": { "prop": "--spectrum-meter-default-width", "ref": "var(--spectrum-meter-width)", @@ -7132,8 +9583,26 @@ "prop": "--spectrum-meter-minimum-width", "value": "48px" }, + "meter-thickness-extra-large": { + "prop": "--spectrum-meter-thickness-extra-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, "meter-thickness-large": { "prop": "--spectrum-meter-thickness-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "meter-thickness-medium": { + "prop": "--spectrum-meter-thickness-medium", "desktop": { "value": "6px" }, @@ -7197,42 +9666,42 @@ }, "negative-background-color-default": { "prop": "--spectrum-negative-background-color-default", - "ref": "var(--spectrum-negative-color-600)", + "ref": "var(--spectrum-negative-color-800)", "light": { "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(177, 38, 23)" + "value": "rgb(223, 52, 34)" } }, "negative-background-color-down": { "prop": "--spectrum-negative-background-color-down", - "ref": "var(--spectrum-negative-color-500)", + "ref": "var(--spectrum-negative-color-700)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(205, 46, 29)" } }, "negative-background-color-hover": { "prop": "--spectrum-negative-background-color-hover", - "ref": "var(--spectrum-negative-color-500)", + "ref": "var(--spectrum-negative-color-700)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(205, 46, 29)" } }, "negative-background-color-key-focus": { "prop": "--spectrum-negative-background-color-key-focus", - "ref": "var(--spectrum-negative-color-500)", + "ref": "var(--spectrum-negative-color-700)", "light": { "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(205, 46, 29)" } }, "negative-border-color-default": { @@ -7442,7 +9911,7 @@ "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(230, 54, 35)" + "value": "rgb(223, 52, 34)" } }, "negative-color-900": { @@ -7497,12 +9966,12 @@ }, "negative-subdued-background-color-default": { "prop": "--spectrum-negative-subdued-background-color-default", - "ref": "var(--spectrum-negative-color-200)", + "ref": "var(--spectrum-negative-color-300)", "light": { "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(68, 13, 5)" + "value": "rgb(87, 17, 7)" } }, "negative-subdued-background-color-down": { @@ -7535,14 +10004,24 @@ "value": "rgb(87, 17, 7)" } }, + "negative-subtle-background-color-default": { + "prop": "--spectrum-negative-subtle-background-color-default", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, "negative-visual-color": { "prop": "--spectrum-negative-visual-color", - "ref": "var(--spectrum-negative-color-700)", + "ref": "var(--spectrum-negative-color-900)", "light": { "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(252, 67, 46)" } }, "neutral-background-color-default": { @@ -7687,42 +10166,42 @@ }, "neutral-subdued-background-color-default": { "prop": "--spectrum-neutral-subdued-background-color-default", - "ref": "var(--spectrum-gray-400)", + "ref": "var(--spectrum-gray-500)", "light": { "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(68, 68, 68)" + "value": "rgb(109, 109, 109)" } }, "neutral-subdued-background-color-down": { "prop": "--spectrum-neutral-subdued-background-color-down", - "ref": "var(--spectrum-gray-300)", + "ref": "var(--spectrum-gray-400)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(68, 68, 68)" } }, "neutral-subdued-background-color-hover": { "prop": "--spectrum-neutral-subdued-background-color-hover", - "ref": "var(--spectrum-gray-300)", + "ref": "var(--spectrum-gray-400)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(68, 68, 68)" } }, "neutral-subdued-background-color-key-focus": { "prop": "--spectrum-neutral-subdued-background-color-key-focus", - "ref": "var(--spectrum-gray-300)", + "ref": "var(--spectrum-gray-400)", "light": { "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(68, 68, 68)" } }, "neutral-subdued-content-color-default": { @@ -7775,6 +10254,16 @@ "value": "rgb(219, 219, 219)" } }, + "neutral-subtle-background-color-default": { + "prop": "--spectrum-neutral-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, "neutral-visual-color": { "prop": "--spectrum-neutral-visual-color", "ref": "var(--spectrum-gray-600)", @@ -7789,7 +10278,7 @@ "prop": "--spectrum-notice-background-color-default", "ref": "var(--spectrum-notice-color-600)", "dark": { - "value": "rgb(205, 86, 0)" + "value": "rgb(224, 100, 0)" }, "light": { "value": "rgb(252, 125, 0)" @@ -7942,7 +10431,7 @@ "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(205, 86, 0)" + "value": "rgb(199, 82, 0)" } }, "notice-color-900": { @@ -7955,16 +10444,102 @@ "value": "rgb(224, 100, 0)" } }, + "notice-subtle-background-color-default": { + "prop": "--spectrum-notice-subtle-background-color-default", + "ref": "var(--spectrum-notice-color-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, "notice-visual-color": { "prop": "--spectrum-notice-visual-color", "ref": "var(--spectrum-notice-color-900)", "light": { - "value": "rgb(232, 106, 0)" + "value": "rgb(212, 91, 0)" }, "dark": { "value": "rgb(224, 100, 0)" } }, + "number-field-minimum-width-multiplier": { + "prop": "--spectrum-number-field-minimum-width-multiplier", + "value": 1.25 + }, + "number-field-visual-to-in-field-stepper-extra-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-extra-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "number-field-visual-to-in-field-stepper-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-large", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "number-field-visual-to-in-field-stepper-medium": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "number-field-visual-to-in-field-stepper-small": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "7px" + } + }, + "number-field-with-stepper-minimum-width-extra-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-extra-large", + "desktop": { + "value": "168px" + }, + "mobile": { + "value": "198px" + } + }, + "number-field-with-stepper-minimum-width-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-large", + "desktop": { + "value": "144px" + }, + "mobile": { + "value": "174px" + } + }, + "number-field-with-stepper-minimum-width-medium": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-medium", + "desktop": { + "value": "120px" + }, + "mobile": { + "value": "150px" + } + }, + "number-field-with-stepper-minimum-width-small": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-small", + "desktop": { + "value": "104px" + }, + "mobile": { + "value": "126px" + } + }, "opacity-checkerboard-square-dark": { "prop": "--spectrum-opacity-checkerboard-square-dark", "ref": "var(--spectrum-gray-800)", @@ -7982,6 +10557,16 @@ }, "opacity-checkerboard-square-size": { "prop": "--spectrum-opacity-checkerboard-square-size", + "ref": "var(--spectrum-opacity-checkerboard-square-size-medium)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "opacity-checkerboard-square-size-medium": { + "prop": "--spectrum-opacity-checkerboard-square-size-medium", "desktop": { "value": "8px" }, @@ -7989,6 +10574,15 @@ "value": "10px" } }, + "opacity-checkerboard-square-size-small": { + "prop": "--spectrum-opacity-checkerboard-square-size-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "opacity-disabled": { "prop": "--spectrum-opacity-disabled", "value": "0.3" @@ -8125,7 +10719,7 @@ "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(205, 86, 0)" + "value": "rgb(199, 82, 0)" } }, "orange-900": { @@ -8139,12 +10733,22 @@ }, "orange-background-color-default": { "prop": "--spectrum-orange-background-color-default", - "ref": "var(--spectrum-orange-800)", + "ref": "var(--spectrum-orange-900)", "light": { "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(205, 86, 0)" + "value": "rgb(224, 100, 0)" + } + }, + "orange-subtle-background-color-default": { + "prop": "--spectrum-orange-subtle-background-color-default", + "ref": "var(--spectrum-orange-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" } }, "orange-visual-color": { @@ -8187,7 +10791,7 @@ }, "picker-minimum-width-multiplier": { "prop": "--spectrum-picker-minimum-width-multiplier", - "value": "2" + "value": 2 }, "picker-visual-to-disclosure-icon-extra-large": { "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", @@ -8347,28 +10951,83 @@ "dark": { "value": "rgb(196, 39, 138)" }, - "light": { - "value": "rgb(242, 76, 184)" + "light": { + "value": "rgb(242, 76, 184)" + } + }, + "pink-800": { + "prop": "--spectrum-pink-800", + "dark": { + "value": "rgb(213, 45, 151)" + }, + "light": { + "value": "rgb(228, 52, 163)" + } + }, + "pink-900": { + "prop": "--spectrum-pink-900", + "dark": { + "value": "rgb(236, 67, 175)" + }, + "light": { + "value": "rgb(206, 42, 146)" + } + }, + "pink-background-color-default": { + "prop": "--spectrum-pink-background-color-default", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(213, 45, 151)" } }, - "pink-800": { - "prop": "--spectrum-pink-800", - "dark": { - "value": "rgb(220, 47, 156)" - }, + "pink-subtle-background-color-default": { + "prop": "--spectrum-pink-subtle-background-color-default", + "ref": "var(--spectrum-pink-300)", "light": { - "value": "rgb(228, 52, 163)" + "value": "rgb(255, 232, 247)" + }, + "dark": { + "value": "rgb(90, 0, 57)" } }, - "pink-900": { - "prop": "--spectrum-pink-900", + "pink-visual-color": { + "prop": "--spectrum-pink-visual-color", + "ref": "var(--spectrum-pink-900)", + "light": { + "value": "rgb(228, 52, 163)" + }, "dark": { "value": "rgb(236, 67, 175)" + } + }, + "popover-border-color": { + "prop": "--spectrum-popover-border-color", + "light": { + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" }, + "ref": "var(--spectrum-gray-400)", + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "popover-border-opacity": { + "prop": "--spectrum-popover-border-opacity", "light": { - "value": "rgb(206, 42, 146)" + "value": "0" + }, + "dark": { + "value": "1.0" } }, + "popover-edge-to-content-area": { + "prop": "--spectrum-popover-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, "popover-tip-height": { "prop": "--spectrum-popover-tip-height", "value": "8px" @@ -8379,51 +11038,47 @@ }, "popover-top-to-content-area": { "prop": "--spectrum-popover-top-to-content-area", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } + "ref": "var(--spectrum-popover-edge-to-content-area)", + "value": "8px" }, "positive-background-color-default": { "prop": "--spectrum-positive-background-color-default", - "ref": "var(--spectrum-positive-color-600)", + "ref": "var(--spectrum-positive-color-800)", "light": { "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(3, 106, 67)" + "value": "rgb(6, 136, 80)" } }, "positive-background-color-down": { "prop": "--spectrum-positive-background-color-down", - "ref": "var(--spectrum-positive-color-500)", + "ref": "var(--spectrum-positive-color-700)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(2, 87, 58)" + "value": "rgb(4, 124, 75)" } }, "positive-background-color-hover": { "prop": "--spectrum-positive-background-color-hover", - "ref": "var(--spectrum-positive-color-500)", + "ref": "var(--spectrum-positive-color-700)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(2, 87, 58)" + "value": "rgb(4, 124, 75)" } }, "positive-background-color-key-focus": { "prop": "--spectrum-positive-background-color-key-focus", - "ref": "var(--spectrum-positive-color-500)", + "ref": "var(--spectrum-positive-color-700)", "light": { "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(2, 87, 58)" + "value": "rgb(4, 124, 75)" } }, "positive-color-100": { @@ -8573,7 +11228,7 @@ "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(6, 140, 82)" + "value": "rgb(6, 136, 80)" } }, "positive-color-900": { @@ -8586,14 +11241,24 @@ "value": "rgb(9, 157, 89)" } }, + "positive-subtle-background-color-default": { + "prop": "--spectrum-positive-subtle-background-color-default", + "ref": "var(--spectrum-positive-color-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, "positive-visual-color": { "prop": "--spectrum-positive-visual-color", - "ref": "var(--spectrum-positive-color-800)", + "ref": "var(--spectrum-positive-color-900)", "light": { - "value": "rgb(11, 164, 93)" + "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(6, 140, 82)" + "value": "rgb(9, 157, 89)" } }, "progress-bar-maximum-width": { @@ -8826,7 +11491,7 @@ "value": "rgb(166, 92, 231)" }, "dark": { - "value": "rgb(161, 84, 229)" + "value": "rgb(157, 78, 228)" } }, "purple-900": { @@ -8840,12 +11505,22 @@ }, "purple-background-color-default": { "prop": "--spectrum-purple-background-color-default", - "ref": "var(--spectrum-purple-700)", + "ref": "var(--spectrum-purple-800)", "light": { "value": "rgb(154, 71, 226)" }, "dark": { - "value": "rgb(148, 62, 224)" + "value": "rgb(157, 78, 228)" + } + }, + "purple-subtle-background-color-default": { + "prop": "--spectrum-purple-subtle-background-color-default", + "ref": "var(--spectrum-purple-300)", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(64, 0, 122)" } }, "purple-visual-color": { @@ -8934,6 +11609,44 @@ "value": "7px" } }, + "rating-bottom-to-content-area-medium": { + "prop": "--spectrum-rating-bottom-to-content-area-medium", + "value": "6px" + }, + "rating-bottom-to-content-area-small": { + "prop": "--spectrum-rating-bottom-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-edge-to-content-area-medium": { + "prop": "--spectrum-rating-edge-to-content-area-medium", + "value": "6px" + }, + "rating-edge-to-content-area-small": { + "prop": "--spectrum-rating-edge-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-height-medium": { + "prop": "--spectrum-rating-height-medium", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "rating-height-small": { + "prop": "--spectrum-rating-height-small", + "ref": "var(--spectrum-component-height-75)", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, "rating-indicator-to-icon": { "prop": "--spectrum-rating-indicator-to-icon", "desktop": { @@ -8952,6 +11665,23 @@ "value": "22px" } }, + "rating-top-to-content-area-medium": { + "prop": "--spectrum-rating-top-to-content-area-medium", + "value": "6px" + }, + "rating-top-to-content-area-small": { + "prop": "--spectrum-rating-top-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-width-medium": { + "prop": "--spectrum-rating-width-medium", + "value": "128px" + }, + "rating-width-small": { + "prop": "--spectrum-rating-width-small", + "value": "104px" + }, "red-100": { "prop": "--spectrum-red-100", "light": { @@ -9084,7 +11814,7 @@ "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(230, 54, 35)" + "value": "rgb(223, 52, 34)" } }, "red-900": { @@ -9098,12 +11828,22 @@ }, "red-background-color-default": { "prop": "--spectrum-red-background-color-default", - "ref": "var(--spectrum-red-700)", + "ref": "var(--spectrum-red-800)", "light": { "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(223, 52, 34)" + } + }, + "red-subtle-background-color-default": { + "prop": "--spectrum-red-subtle-background-color-default", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" } }, "red-visual-color": { @@ -9256,7 +11996,7 @@ "value": "rgb(9, 144, 120)" }, "dark": { - "value": "rgb(8, 138, 116)" + "value": "rgb(8, 134, 112)" } }, "seafoam-900": { @@ -9270,12 +12010,22 @@ }, "seafoam-background-color-default": { "prop": "--spectrum-seafoam-background-color-default", - "ref": "var(--spectrum-seafoam-700)", + "ref": "var(--spectrum-seafoam-800)", "light": { "value": "rgb(7, 129, 109)" }, "dark": { - "value": "rgb(6, 122, 103)" + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-subtle-background-color-default": { + "prop": "--spectrum-seafoam-subtle-background-color-default", + "ref": "var(--spectrum-seafoam-300)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 50, 44)" } }, "seafoam-visual-color": { @@ -9285,19 +12035,30 @@ "value": "rgb(11, 162, 134)" }, "dark": { - "value": "rgb(8, 138, 116)" + "value": "rgb(8, 134, 112)" } }, "search-field-minimum-width-multiplier": { "prop": "--spectrum-search-field-minimum-width-multiplier", - "value": "3" + "value": 4 }, - "serif-font-family": { - "prop": "--spectrum-serif-font-family", - "value": "Adobe Clean Serif" + "segmented-control-item-height": { + "prop": "--spectrum-segmented-control-item-height", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } }, - "side-label-character-count-to-field": { - "prop": "--spectrum-side-label-character-count-to-field", + "segmented-control-selection-border-width": { + "prop": "--spectrum-segmented-control-selection-border-width", + "ref": "var(--spectrum-border-width-200)", + "value": "2px" + }, + "select-box-edge-to-checkbox": { + "prop": "--spectrum-select-box-edge-to-checkbox", "desktop": { "value": "12px" }, @@ -9305,35 +12066,81 @@ "value": "15px" } }, - "side-label-character-count-top-margin-extra-large": { - "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "select-box-horizontal-end-to-content": { + "prop": "--spectrum-select-box-horizontal-end-to-content", "desktop": { - "value": "14px" + "value": "32px" }, "mobile": { - "value": "18px" + "value": "40px" } }, - "side-label-character-count-top-margin-large": { - "prop": "--spectrum-side-label-character-count-top-margin-large", + "select-box-horizontal-illustration-to-label": { + "prop": "--spectrum-select-box-horizontal-illustration-to-label", "desktop": { - "value": "11px" + "value": "10px" }, "mobile": { - "value": "14px" + "value": "12px" } }, - "side-label-character-count-top-margin-medium": { - "prop": "--spectrum-side-label-character-count-top-margin-medium", + "select-box-horizontal-label-to-description": { + "prop": "--spectrum-select-box-horizontal-label-to-description", "desktop": { - "value": "8px" + "value": "2px" }, "mobile": { - "value": "10px" + "value": "3px" } }, - "side-label-character-count-top-margin-small": { - "prop": "--spectrum-side-label-character-count-top-margin-small", + "select-box-horizontal-minimum-height": { + "prop": "--spectrum-select-box-horizontal-minimum-height", + "desktop": { + "value": "80px" + }, + "mobile": { + "value": "100px" + } + }, + "select-box-horizontal-start-to-content": { + "prop": "--spectrum-select-box-horizontal-start-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-horizontal-top-to-content": { + "prop": "--spectrum-select-box-horizontal-top-to-content", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "select-box-horizontal-width": { + "prop": "--spectrum-select-box-horizontal-width", + "desktop": { + "value": "368px" + }, + "mobile": { + "value": "460px" + } + }, + "select-box-selected-border-color": { + "prop": "--spectrum-select-box-selected-border-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "select-box-top-to-checkbox": { + "prop": "--spectrum-select-box-top-to-checkbox", "desktop": { "value": "4px" }, @@ -9341,6 +12148,66 @@ "value": "5px" } }, + "select-box-vertical-edge-to-content": { + "prop": "--spectrum-select-box-vertical-edge-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-vertical-height": { + "prop": "--spectrum-select-box-vertical-height", + "desktop": { + "value": "170px" + }, + "mobile": { + "value": "212px" + } + }, + "select-box-vertical-illustration-to-label": { + "prop": "--spectrum-select-box-vertical-illustration-to-label", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "serif-font-family": { + "prop": "--spectrum-serif-font-family", + "value": "Adobe Clean Serif" + }, + "side-focus-indicator": { + "prop": "--spectrum-side-focus-indicator", + "value": "4px" + }, + "side-label-character-count-to-field": { + "prop": "--spectrum-side-label-character-count-to-field", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "side-label-character-count-top-margin-extra-large": { + "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "value": "0px" + }, + "side-label-character-count-top-margin-large": { + "prop": "--spectrum-side-label-character-count-top-margin-large", + "value": "0px" + }, + "side-label-character-count-top-margin-medium": { + "prop": "--spectrum-side-label-character-count-top-margin-medium", + "value": "0px" + }, + "side-label-character-count-top-margin-small": { + "prop": "--spectrum-side-label-character-count-top-margin-small", + "value": "0px" + }, "side-navigation-bottom-to-text": { "prop": "--spectrum-side-navigation-bottom-to-text", "desktop": { @@ -9569,7 +12436,7 @@ "silver-800": { "prop": "--spectrum-silver-800", "dark": { - "value": "rgb(123, 123, 123)" + "value": "rgb(118, 118, 118)" }, "light": { "value": "rgb(128, 128, 128)" @@ -9579,9 +12446,39 @@ "prop": "--spectrum-silver-900", "dark": { "value": "rgb(137, 137, 137)" - }, - "light": { - "value": "rgb(114, 114, 114)" + }, + "light": { + "value": "rgb(114, 114, 114)" + } + }, + "silver-background-color-default": { + "prop": "--spectrum-silver-background-color-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "silver-subtle-background-color-default": { + "prop": "--spectrum-silver-subtle-background-color-default", + "ref": "var(--spectrum-silver-300)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "silver-visual-color": { + "prop": "--spectrum-silver-visual-color", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" } }, "slider-bottom-to-handle-extra-large": { @@ -9656,40 +12553,148 @@ "value": "18px" } }, + "slider-control-to-field-label-editable-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-extra-large", + "desktop": { + "value": "-20px" + }, + "mobile": { + "value": "-24px" + } + }, + "slider-control-to-field-label-editable-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-large", + "desktop": { + "value": "-16px" + }, + "mobile": { + "value": "-20px" + } + }, + "slider-control-to-field-label-editable-medium": { + "prop": "--spectrum-slider-control-to-field-label-editable-medium", + "desktop": { + "value": "-12px" + }, + "mobile": { + "value": "-16px" + } + }, + "slider-control-to-field-label-editable-small": { + "prop": "--spectrum-slider-control-to-field-label-editable-small", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-8px" + } + }, "slider-control-to-field-label-extra-large": { "prop": "--spectrum-slider-control-to-field-label-extra-large", "desktop": { - "value": "14px" + "value": "-20px" }, "mobile": { - "value": "17px" + "value": "-28px" } }, "slider-control-to-field-label-large": { "prop": "--spectrum-slider-control-to-field-label-large", "desktop": { - "value": "11px" + "value": "-16px" }, "mobile": { - "value": "14px" + "value": "-20px" } }, "slider-control-to-field-label-medium": { "prop": "--spectrum-slider-control-to-field-label-medium", "desktop": { - "value": "8px" + "value": "-12px" }, "mobile": { - "value": "10px" + "value": "-16px" + } + }, + "slider-control-to-field-label-side-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-side-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-field-label-side-large": { + "prop": "--spectrum-slider-control-to-field-label-side-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-field-label-side-medium": { + "prop": "--spectrum-slider-control-to-field-label-side-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-field-label-side-small": { + "prop": "--spectrum-slider-control-to-field-label-side-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" } }, "slider-control-to-field-label-small": { "prop": "--spectrum-slider-control-to-field-label-small", "desktop": { - "value": "5px" + "value": "-4px" }, "mobile": { - "value": "6px" + "value": "-8px" + } + }, + "slider-control-to-text-field-extra-large": { + "prop": "--spectrum-slider-control-to-text-field-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-text-field-large": { + "prop": "--spectrum-slider-control-to-text-field-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-text-field-medium": { + "prop": "--spectrum-slider-control-to-text-field-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-text-field-small": { + "prop": "--spectrum-slider-control-to-text-field-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" } }, "slider-handle-border-width-down-extra-large": { @@ -9728,10 +12733,77 @@ "value": "7px" } }, + "slider-handle-extra-large": { + "prop": "--spectrum-slider-handle-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, "slider-handle-gap": { "prop": "--spectrum-slider-handle-gap", "value": "4px" }, + "slider-handle-height-precision-extra-large": { + "prop": "--spectrum-slider-handle-height-precision-extra-large", + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "32px" + } + }, + "slider-handle-height-precision-large": { + "prop": "--spectrum-slider-handle-height-precision-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-handle-height-precision-medium": { + "prop": "--spectrum-slider-handle-height-precision-medium", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-handle-height-precision-small": { + "prop": "--spectrum-slider-handle-height-precision-small", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-large": { + "prop": "--spectrum-slider-handle-large", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-handle-medium": { + "prop": "--spectrum-slider-handle-medium", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-precision-width": { + "prop": "--spectrum-slider-handle-precision-width", + "value": "6px" + }, "slider-handle-size-extra-large": { "prop": "--spectrum-slider-handle-size-extra-large", "desktop": { @@ -9768,6 +12840,23 @@ "value": "18px" } }, + "slider-handle-small": { + "prop": "--spectrum-slider-handle-small", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-track-height-large": { + "prop": "--spectrum-slider-track-height-large", + "value": "16px" + }, + "slider-track-height-medium": { + "prop": "--spectrum-slider-track-height-medium", + "value": "4px" + }, "slider-track-thickness": { "prop": "--spectrum-slider-track-thickness", "value": "2px" @@ -9820,18 +12909,208 @@ "prop": "--spectrum-spacing-900", "value": "80px" }, + "standard-dialog-body-font-size": { + "prop": "--spectrum-standard-dialog-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-dialog-maximum-width-large": { + "prop": "--spectrum-standard-dialog-maximum-width-large", + "value": "640px" + }, + "standard-dialog-maximum-width-medium": { + "prop": "--spectrum-standard-dialog-maximum-width-medium", + "value": "480px" + }, + "standard-dialog-maximum-width-small": { + "prop": "--spectrum-standard-dialog-maximum-width-small", + "value": "400px" + }, + "standard-dialog-minimum-width": { + "prop": "--spectrum-standard-dialog-minimum-width", + "value": "288px" + }, + "standard-dialog-title-font-size": { + "prop": "--spectrum-standard-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "standard-panel-edge-to-close-button-compact": { + "prop": "--spectrum-standard-panel-edge-to-close-button-compact", + "value": "3px" + }, + "standard-panel-edge-to-close-button-regular": { + "prop": "--spectrum-standard-panel-edge-to-close-button-regular", + "value": "7px" + }, + "standard-panel-edge-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-edge-to-close-button-spacious", + "value": "15px" + }, + "standard-panel-gripper-color": { + "prop": "--spectrum-standard-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "standard-panel-gripper-color-drag": { + "prop": "--spectrum-standard-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "standard-panel-maximum-width": { + "prop": "--spectrum-standard-panel-maximum-width", + "value": "400px" + }, + "standard-panel-minimum-width": { + "prop": "--spectrum-standard-panel-minimum-width", + "value": "200px" + }, + "standard-panel-title-font-size": { + "prop": "--spectrum-standard-panel-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-panel-top-to-close-button-compact": { + "prop": "--spectrum-standard-panel-top-to-close-button-compact", + "value": "5px" + }, + "standard-panel-top-to-close-button-regular": { + "prop": "--spectrum-standard-panel-top-to-close-button-regular", + "value": "9px" + }, + "standard-panel-top-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-top-to-close-button-spacious", + "value": "17px" + }, + "standard-panel-width": { + "prop": "--spectrum-standard-panel-width", + "value": "260px" + }, "static-black-focus-indicator-color": { "prop": "--spectrum-static-black-focus-indicator-color", "ref": "var(--spectrum-black)", "value": "rgb(0, 0, 0)" }, + "static-black-text-color": { + "prop": "--spectrum-static-black-text-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "static-black-track-color": { + "prop": "--spectrum-static-black-track-color", + "ref": "var(--spectrum-transparent-black-300)", + "value": "rgba(0, 0, 0, 0.15)" + }, + "static-black-track-indicator-color": { + "prop": "--spectrum-static-black-track-indicator-color", + "ref": "var(--spectrum-transparent-black-900)", + "value": "rgba(0, 0, 0, 0.93)" + }, + "static-blue-1000": { + "prop": "--spectrum-static-blue-1000", + "value": "rgb(39, 77, 234)" + }, + "static-blue-900": { + "prop": "--spectrum-static-blue-900", + "value": "rgb(59, 99, 251)" + }, + "static-fuchsia-1000": { + "prop": "--spectrum-static-fuchsia-1000", + "value": "rgb(156, 40, 175)" + }, + "static-fuchsia-900": { + "prop": "--spectrum-static-fuchsia-900", + "value": "rgb(181, 57, 200)" + }, + "static-indigo-1000": { + "prop": "--spectrum-static-indigo-1000", + "value": "rgb(99, 56, 238)" + }, + "static-indigo-900": { + "prop": "--spectrum-static-indigo-900", + "value": "rgb(113, 85, 250)" + }, + "static-magenta-1000": { + "prop": "--spectrum-static-magenta-1000", + "value": "rgb(186, 22, 80)" + }, + "static-magenta-900": { + "prop": "--spectrum-static-magenta-900", + "value": "rgb(217, 35, 97)" + }, + "static-red-1000": { + "prop": "--spectrum-static-red-1000", + "value": "rgb(183, 40, 24)" + }, + "static-red-900": { + "prop": "--spectrum-static-red-900", + "value": "rgb(215, 50, 32)" + }, "static-white-focus-indicator-color": { "prop": "--spectrum-static-white-focus-indicator-color", "ref": "var(--spectrum-white)", "value": "rgb(255, 255, 255)" }, - "status-light-dot-size-extra-large": { - "prop": "--spectrum-status-light-dot-size-extra-large", + "static-white-text-color": { + "prop": "--spectrum-static-white-text-color", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "static-white-track-color": { + "prop": "--spectrum-static-white-track-color", + "ref": "var(--spectrum-transparent-white-300)", + "value": "rgba(255, 255, 255, 0.17)" + }, + "static-white-track-indicator-color": { + "prop": "--spectrum-static-white-track-indicator-color", + "ref": "var(--spectrum-transparent-white-900)", + "value": "rgba(255, 255, 255, 0.94)" + }, + "status-light-dot-size-extra-large": { + "prop": "--spectrum-status-light-dot-size-extra-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "16px" + } + }, + "status-light-dot-size-large": { + "prop": "--spectrum-status-light-dot-size-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "14px" + } + }, + "status-light-dot-size-medium": { + "prop": "--spectrum-status-light-dot-size-medium", "desktop": { "value": "10px" }, @@ -9839,17 +13118,38 @@ "value": "12px" } }, - "status-light-dot-size-large": { - "prop": "--spectrum-status-light-dot-size-large", + "status-light-dot-size-small": { + "prop": "--spectrum-status-light-dot-size-small", "desktop": { + "value": "8px" + }, + "mobile": { "value": "10px" + } + }, + "status-light-text-to-visual-100": { + "prop": "--spectrum-status-light-text-to-visual-100", + "ref": "var(--spectrum-text-to-visual-100)", + "desktop": { + "value": "6px" }, "mobile": { - "value": "12px" + "value": "8px" } }, - "status-light-dot-size-medium": { - "prop": "--spectrum-status-light-dot-size-medium", + "status-light-text-to-visual-200": { + "prop": "--spectrum-status-light-text-to-visual-200", + "ref": "var(--spectrum-text-to-visual-200)", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "status-light-text-to-visual-300": { + "prop": "--spectrum-status-light-text-to-visual-300", + "ref": "var(--spectrum-text-to-visual-300)", "desktop": { "value": "8px" }, @@ -9857,35 +13157,41 @@ "value": "10px" } }, - "status-light-dot-size-small": { - "prop": "--spectrum-status-light-dot-size-small", - "value": "8px" + "status-light-text-to-visual-75": { + "prop": "--spectrum-status-light-text-to-visual-75", + "ref": "var(--spectrum-text-to-visual-75)", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "7px" + } }, "status-light-top-to-dot-extra-large": { "prop": "--spectrum-status-light-top-to-dot-extra-large", "desktop": { - "value": "19px" + "value": "17px" }, "mobile": { - "value": "24px" + "value": "22px" } }, "status-light-top-to-dot-large": { "prop": "--spectrum-status-light-top-to-dot-large", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "18px" } }, "status-light-top-to-dot-medium": { "prop": "--spectrum-status-light-top-to-dot-medium", "desktop": { - "value": "12px" + "value": "11px" }, "mobile": { - "value": "15px" + "value": "14px" } }, "status-light-top-to-dot-small": { @@ -9894,22 +13200,22 @@ "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "swatch-border-color": { "prop": "--spectrum-swatch-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "swatch-border-opacity": { "prop": "--spectrum-swatch-border-opacity", - "value": "0.51" + "value": "0.42" }, "swatch-disabled-icon-border-color": { "prop": "--spectrum-swatch-disabled-icon-border-color", @@ -9918,11 +13224,29 @@ }, "swatch-disabled-icon-border-opacity": { "prop": "--spectrum-swatch-disabled-icon-border-opacity", - "value": "0.51" + "value": "0.42" + }, + "swatch-group-border-color": { + "prop": "--spectrum-swatch-group-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "swatch-group-border-opacity": { + "prop": "--spectrum-swatch-group-border-opacity", + "value": "0.2" + }, + "swatch-group-spacing-spacious": { + "prop": "--spectrum-swatch-group-spacing-spacious", + "value": "6px" }, "swatch-rectangle-width-multiplier": { "prop": "--spectrum-swatch-rectangle-width-multiplier", - "value": "2" + "value": 2 }, "swatch-size-extra-small": { "prop": "--spectrum-swatch-size-extra-small", @@ -10670,7 +13994,7 @@ "table-column-header-row-top-to-text-medium": { "prop": "--spectrum-table-column-header-row-top-to-text-medium", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { "value": "9px" @@ -10710,10 +14034,10 @@ "table-header-row-checkbox-to-top-medium": { "prop": "--spectrum-table-header-row-checkbox-to-top-medium", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "table-header-row-checkbox-to-top-small": { @@ -10725,6 +14049,15 @@ "value": "14px" } }, + "table-row-bottom-to-text-extra-large": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large", + "desktop": { + "value": "17px" + }, + "mobile": { + "value": "22px" + } + }, "table-row-bottom-to-text-extra-large-compact": { "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", "ref": "var(--spectrum-component-bottom-to-text-300)", @@ -10737,6 +14070,7 @@ }, "table-row-bottom-to-text-extra-large-regular": { "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-extra-large)", "desktop": { "value": "17px" }, @@ -10753,6 +14087,15 @@ "value": "27px" } }, + "table-row-bottom-to-text-large": { + "prop": "--spectrum-table-row-bottom-to-text-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, "table-row-bottom-to-text-large-compact": { "prop": "--spectrum-table-row-bottom-to-text-large-compact", "ref": "var(--spectrum-component-bottom-to-text-200)", @@ -10765,6 +14108,7 @@ }, "table-row-bottom-to-text-large-regular": { "prop": "--spectrum-table-row-bottom-to-text-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-large)", "desktop": { "value": "14px" }, @@ -10781,6 +14125,15 @@ "value": "23px" } }, + "table-row-bottom-to-text-medium": { + "prop": "--spectrum-table-row-bottom-to-text-medium", + "desktop": { + "value": "13px" + }, + "mobile": { + "value": "15px" + } + }, "table-row-bottom-to-text-medium-compact": { "prop": "--spectrum-table-row-bottom-to-text-medium-compact", "ref": "var(--spectrum-component-bottom-to-text-100)", @@ -10793,8 +14146,9 @@ }, "table-row-bottom-to-text-medium-regular": { "prop": "--spectrum-table-row-bottom-to-text-medium-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-medium)", "desktop": { - "value": "12px" + "value": "13px" }, "mobile": { "value": "15px" @@ -10809,6 +14163,15 @@ "value": "18px" } }, + "table-row-bottom-to-text-small": { + "prop": "--spectrum-table-row-bottom-to-text-small", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, "table-row-bottom-to-text-small-compact": { "prop": "--spectrum-table-row-bottom-to-text-small-compact", "ref": "var(--spectrum-component-bottom-to-text-75)", @@ -10821,6 +14184,7 @@ }, "table-row-bottom-to-text-small-regular": { "prop": "--spectrum-table-row-bottom-to-text-small-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-small)", "desktop": { "value": "9px" }, @@ -10837,6 +14201,15 @@ "value": "16px" } }, + "table-row-checkbox-to-top-extra-large": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large", + "desktop": { + "value": "19px" + }, + "mobile": { + "value": "26px" + } + }, "table-row-checkbox-to-top-extra-large-compact": { "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", "desktop": { @@ -10848,6 +14221,7 @@ }, "table-row-checkbox-to-top-extra-large-regular": { "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-extra-large)", "desktop": { "value": "19px" }, @@ -10864,6 +14238,15 @@ "value": "31px" } }, + "table-row-checkbox-to-top-large": { + "prop": "--spectrum-table-row-checkbox-to-top-large", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "22px" + } + }, "table-row-checkbox-to-top-large-compact": { "prop": "--spectrum-table-row-checkbox-to-top-large-compact", "desktop": { @@ -10875,6 +14258,7 @@ }, "table-row-checkbox-to-top-large-regular": { "prop": "--spectrum-table-row-checkbox-to-top-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-large)", "desktop": { "value": "16px" }, @@ -10891,31 +14275,50 @@ "value": "27px" } }, + "table-row-checkbox-to-top-medium": { + "prop": "--spectrum-table-row-checkbox-to-top-medium", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, "table-row-checkbox-to-top-medium-compact": { "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "table-row-checkbox-to-top-medium-regular": { "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-medium)", "desktop": { - "value": "13px" + "value": "12px" }, "mobile": { - "value": "18px" + "value": "16px" } }, "table-row-checkbox-to-top-medium-spacious": { "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", "desktop": { - "value": "17px" + "value": "16px" }, "mobile": { - "value": "23px" + "value": "21px" + } + }, + "table-row-checkbox-to-top-small": { + "prop": "--spectrum-table-row-checkbox-to-top-small", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" } }, "table-row-checkbox-to-top-small-compact": { @@ -10929,6 +14332,7 @@ }, "table-row-checkbox-to-top-small-regular": { "prop": "--spectrum-table-row-checkbox-to-top-small-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-small)", "desktop": { "value": "10px" }, @@ -10949,6 +14353,15 @@ "prop": "--spectrum-table-row-down-opacity", "value": "0.1" }, + "table-row-height-extra-large": { + "prop": "--spectrum-table-row-height-extra-large", + "desktop": { + "value": "56px" + }, + "mobile": { + "value": "70px" + } + }, "table-row-height-extra-large-compact": { "prop": "--spectrum-table-row-height-extra-large-compact", "ref": "var(--spectrum-component-height-300)", @@ -10961,6 +14374,7 @@ }, "table-row-height-extra-large-regular": { "prop": "--spectrum-table-row-height-extra-large-regular", + "ref": "var(--spectrum-table-row-height-extra-large)", "desktop": { "value": "56px" }, @@ -10977,6 +14391,15 @@ "value": "80px" } }, + "table-row-height-large": { + "prop": "--spectrum-table-row-height-large", + "desktop": { + "value": "48px" + }, + "mobile": { + "value": "60px" + } + }, "table-row-height-large-compact": { "prop": "--spectrum-table-row-height-large-compact", "ref": "var(--spectrum-component-height-200)", @@ -10989,6 +14412,7 @@ }, "table-row-height-large-regular": { "prop": "--spectrum-table-row-height-large-regular", + "ref": "var(--spectrum-table-row-height-large)", "desktop": { "value": "48px" }, @@ -11005,6 +14429,15 @@ "value": "70px" } }, + "table-row-height-medium": { + "prop": "--spectrum-table-row-height-medium", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "50px" + } + }, "table-row-height-medium-compact": { "prop": "--spectrum-table-row-height-medium-compact", "ref": "var(--spectrum-component-height-100)", @@ -11017,6 +14450,7 @@ }, "table-row-height-medium-regular": { "prop": "--spectrum-table-row-height-medium-regular", + "ref": "var(--spectrum-table-row-height-medium)", "desktop": { "value": "40px" }, @@ -11033,6 +14467,15 @@ "value": "60px" } }, + "table-row-height-small": { + "prop": "--spectrum-table-row-height-small", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, "table-row-height-small-compact": { "prop": "--spectrum-table-row-height-small-compact", "ref": "var(--spectrum-component-height-75)", @@ -11045,6 +14488,7 @@ }, "table-row-height-small-regular": { "prop": "--spectrum-table-row-height-small-regular", + "ref": "var(--spectrum-table-row-height-small)", "desktop": { "value": "32px" }, @@ -11075,6 +14519,15 @@ "prop": "--spectrum-table-row-hover-opacity", "value": "0.07" }, + "table-row-top-to-text-extra-large": { + "prop": "--spectrum-table-row-top-to-text-extra-large", + "desktop": { + "value": "17px" + }, + "mobile": { + "value": "21px" + } + }, "table-row-top-to-text-extra-large-compact": { "prop": "--spectrum-table-row-top-to-text-extra-large-compact", "ref": "var(--spectrum-component-top-to-text-300)", @@ -11087,6 +14540,7 @@ }, "table-row-top-to-text-extra-large-regular": { "prop": "--spectrum-table-row-top-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-extra-large)", "desktop": { "value": "17px" }, @@ -11103,6 +14557,15 @@ "value": "26px" } }, + "table-row-top-to-text-large": { + "prop": "--spectrum-table-row-top-to-text-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, "table-row-top-to-text-large-compact": { "prop": "--spectrum-table-row-top-to-text-large-compact", "ref": "var(--spectrum-component-top-to-text-200)", @@ -11115,6 +14578,7 @@ }, "table-row-top-to-text-large-regular": { "prop": "--spectrum-table-row-top-to-text-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-large)", "desktop": { "value": "14px" }, @@ -11131,6 +14595,15 @@ "value": "23px" } }, + "table-row-top-to-text-medium": { + "prop": "--spectrum-table-row-top-to-text-medium", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "14px" + } + }, "table-row-top-to-text-medium-compact": { "prop": "--spectrum-table-row-top-to-text-medium-compact", "ref": "var(--spectrum-component-top-to-text-100)", @@ -11143,8 +14616,9 @@ }, "table-row-top-to-text-medium-regular": { "prop": "--spectrum-table-row-top-to-text-medium-regular", + "ref": "var(--spectrum-table-row-top-to-text-medium)", "desktop": { - "value": "11px" + "value": "10px" }, "mobile": { "value": "14px" @@ -11156,7 +14630,16 @@ "value": "15px" }, "mobile": { - "value": "18px" + "value": "16px" + } + }, + "table-row-top-to-text-small": { + "prop": "--spectrum-table-row-top-to-text-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" } }, "table-row-top-to-text-small-compact": { @@ -11171,6 +14654,7 @@ }, "table-row-top-to-text-small-regular": { "prop": "--spectrum-table-row-top-to-text-small-regular", + "ref": "var(--spectrum-table-row-top-to-text-small)", "desktop": { "value": "8px" }, @@ -11225,12 +14709,12 @@ }, "table-selected-row-background-color": { "prop": "--spectrum-table-selected-row-background-color", - "ref": "var(--spectrum-informative-color-600)", + "ref": "var(--spectrum-informative-color-800)", "light": { "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(37, 73, 229)" + "value": "rgb(64, 105, 253)" } }, "table-selected-row-background-color-non-emphasized": { @@ -11259,6 +14743,15 @@ "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", "value": "0.15" }, + "table-thumbnail-to-top-minimum-extra-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "table-thumbnail-to-top-minimum-extra-large-compact": { "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", "desktop": { @@ -11270,6 +14763,7 @@ }, "table-thumbnail-to-top-minimum-extra-large-regular": { "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-extra-large)", "desktop": { "value": "8px" }, @@ -11286,6 +14780,15 @@ "value": "12px" } }, + "table-thumbnail-to-top-minimum-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "table-thumbnail-to-top-minimum-large-compact": { "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", "desktop": { @@ -11297,6 +14800,7 @@ }, "table-thumbnail-to-top-minimum-large-regular": { "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-large)", "desktop": { "value": "8px" }, @@ -11313,6 +14817,15 @@ "value": "10px" } }, + "table-thumbnail-to-top-minimum-medium": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, "table-thumbnail-to-top-minimum-medium-compact": { "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", "desktop": { @@ -11324,6 +14837,7 @@ }, "table-thumbnail-to-top-minimum-medium-regular": { "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-medium)", "desktop": { "value": "7px" }, @@ -11340,6 +14854,15 @@ "value": "10px" } }, + "table-thumbnail-to-top-minimum-small": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, "table-thumbnail-to-top-minimum-small-compact": { "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", "desktop": { @@ -11351,6 +14874,7 @@ }, "table-thumbnail-to-top-minimum-small-regular": { "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-small)", "desktop": { "value": "5px" }, @@ -11423,11 +14947,38 @@ }, "tag-maximum-width-multiplier": { "prop": "--spectrum-tag-maximum-width-multiplier", - "value": "7" + "value": 7 + }, + "tag-minimum-width-large": { + "prop": "--spectrum-tag-minimum-width-large", + "desktop": { + "value": "33px" + }, + "mobile": { + "value": "42px" + } + }, + "tag-minimum-width-medium": { + "prop": "--spectrum-tag-minimum-width-medium", + "desktop": { + "value": "27px" + }, + "mobile": { + "value": "34px" + } }, "tag-minimum-width-multiplier": { "prop": "--spectrum-tag-minimum-width-multiplier", - "value": "1" + "value": 1 + }, + "tag-minimum-width-small": { + "prop": "--spectrum-tag-minimum-width-small", + "desktop": { + "value": "21px" + }, + "mobile": { + "value": "25px" + } }, "tag-top-to-avatar-large": { "prop": "--spectrum-tag-top-to-avatar-large", @@ -11483,6 +15034,26 @@ "value": "10px" } }, + "takeover-dialog-height": { + "prop": "--spectrum-takeover-dialog-height", + "value": "100%" + }, + "takeover-dialog-width": { + "prop": "--spectrum-takeover-dialog-width", + "value": "100%" + }, + "text-align-center": { + "prop": "--spectrum-text-align-center", + "value": "center" + }, + "text-align-end": { + "prop": "--spectrum-text-align-end", + "value": "end" + }, + "text-align-start": { + "prop": "--spectrum-text-align-start", + "value": "start" + }, "text-area-minimum-height": { "prop": "--spectrum-text-area-minimum-height", "desktop": { @@ -11503,7 +15074,7 @@ }, "text-field-minimum-width-multiplier": { "prop": "--spectrum-text-field-minimum-width-multiplier", - "value": "1.5" + "value": 1.5 }, "text-to-control-100": { "prop": "--spectrum-text-to-control-100", @@ -11532,6 +15103,15 @@ "value": "16px" } }, + "text-to-control-50": { + "prop": "--spectrum-text-to-control-50", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "text-to-control-75": { "prop": "--spectrum-text-to-control-75", "desktop": { @@ -11568,6 +15148,15 @@ "value": "10px" } }, + "text-to-visual-400": { + "prop": "--spectrum-text-to-visual-400", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, "text-to-visual-50": { "prop": "--spectrum-text-to-visual-50", "desktop": { @@ -11608,6 +15197,15 @@ "prop": "--spectrum-thumbnail-border-opacity", "value": "0.1" }, + "thumbnail-corner-radius": { + "prop": "--spectrum-thumbnail-corner-radius", + "ref": "var(--spectrum-corner-radius-75)", + "value": "3px" + }, + "thumbnail-opacity-checkerboard-square-size": { + "prop": "--spectrum-thumbnail-opacity-checkerboard-square-size", + "value": "4px" + }, "thumbnail-opacity-disabled": { "prop": "--spectrum-thumbnail-opacity-disabled", "ref": "var(--spectrum-opacity-disabled)", @@ -11616,46 +15214,46 @@ "thumbnail-size-100": { "prop": "--spectrum-thumbnail-size-100", "desktop": { - "value": "20px" + "value": "24px" }, "mobile": { - "value": "26px" + "value": "28px" } }, "thumbnail-size-1000": { "prop": "--spectrum-thumbnail-size-1000", "desktop": { - "value": "56px" + "value": "64px" }, "mobile": { - "value": "70px" + "value": "72px" } }, "thumbnail-size-200": { "prop": "--spectrum-thumbnail-size-200", "desktop": { - "value": "22px" + "value": "28px" }, "mobile": { - "value": "28px" + "value": "32px" } }, "thumbnail-size-300": { "prop": "--spectrum-thumbnail-size-300", "desktop": { - "value": "26px" + "value": "32px" }, "mobile": { - "value": "32px" + "value": "36px" } }, "thumbnail-size-400": { "prop": "--spectrum-thumbnail-size-400", "desktop": { - "value": "28px" + "value": "36px" }, "mobile": { - "value": "36px" + "value": "40px" } }, "thumbnail-size-50": { @@ -11670,73 +15268,376 @@ "thumbnail-size-500": { "prop": "--spectrum-thumbnail-size-500", "desktop": { - "value": "32px" + "value": "40px" + }, + "mobile": { + "value": "44px" + } + }, + "thumbnail-size-600": { + "prop": "--spectrum-thumbnail-size-600", + "desktop": { + "value": "44px" + }, + "mobile": { + "value": "48px" + } + }, + "thumbnail-size-700": { + "prop": "--spectrum-thumbnail-size-700", + "desktop": { + "value": "48px" + }, + "mobile": { + "value": "52px" + } + }, + "thumbnail-size-75": { + "prop": "--spectrum-thumbnail-size-75", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "thumbnail-size-800": { + "prop": "--spectrum-thumbnail-size-800", + "desktop": { + "value": "52px" + }, + "mobile": { + "value": "56px" + } + }, + "thumbnail-size-900": { + "prop": "--spectrum-thumbnail-size-900", + "desktop": { + "value": "56px" + }, + "mobile": { + "value": "64px" + } + }, + "title-cjk-emphasized-font-style": { + "prop": "--spectrum-title-cjk-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-cjk-font-family": { + "prop": "--spectrum-title-cjk-font-family", + "ref": "var(--spectrum-cjk-font-family)", + "value": "Adobe Clean Han" + }, + "title-cjk-font-style": { + "prop": "--spectrum-title-cjk-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-font-weight": { + "prop": "--spectrum-title-cjk-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-cjk-line-height": { + "prop": "--spectrum-title-cjk-line-height", + "ref": "var(--spectrum-cjk-line-height-100)", + "value": 1.5 + }, + "title-cjk-size-l": { + "prop": "--spectrum-title-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "title-cjk-size-m": { + "prop": "--spectrum-title-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "title-cjk-size-s": { + "prop": "--spectrum-title-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "title-cjk-size-xl": { + "prop": "--spectrum-title-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "title-cjk-size-xs": { + "prop": "--spectrum-title-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "title-cjk-size-xxl": { + "prop": "--spectrum-title-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "title-cjk-size-xxxl": { + "prop": "--spectrum-title-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "27px" + } + }, + "title-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-cjk-strong-font-style": { + "prop": "--spectrum-title-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-strong-font-weight": { + "prop": "--spectrum-title-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-color": { + "prop": "--spectrum-title-color", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "title-line-height": { + "prop": "--spectrum-title-line-height", + "ref": "var(--spectrum-line-height-100)", + "value": 1.3 + }, + "title-margin-bottom-multiplier": { + "prop": "--spectrum-title-margin-bottom-multiplier", + "value": 0.25 + }, + "title-margin-top-multiplier": { + "prop": "--spectrum-title-margin-top-multiplier", + "value": 0.88888889 + }, + "title-sans-serif-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-font-family": { + "prop": "--spectrum-title-sans-serif-font-family", + "ref": "var(--spectrum-sans-serif-font-family)", + "value": "Adobe Clean" + }, + "title-sans-serif-font-style": { + "prop": "--spectrum-title-sans-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-font-weight": { + "prop": "--spectrum-title-sans-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-sans-serif-strong-font-style": { + "prop": "--spectrum-title-sans-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-strong-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-serif-emphasized-font-style": { + "prop": "--spectrum-title-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-emphasized-font-weight": { + "prop": "--spectrum-title-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-font-family": { + "prop": "--spectrum-title-serif-font-family", + "ref": "var(--spectrum-serif-font-family)", + "value": "Adobe Clean Serif" + }, + "title-serif-font-style": { + "prop": "--spectrum-title-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-serif-font-weight": { + "prop": "--spectrum-title-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" + }, + "title-serif-strong-font-style": { + "prop": "--spectrum-title-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-serif-strong-font-weight": { + "prop": "--spectrum-title-serif-strong-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" + }, + "title-size-l": { + "prop": "--spectrum-title-size-l", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "title-size-m": { + "prop": "--spectrum-title-size-m", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" }, "mobile": { - "value": "40px" + "value": "19px" } }, - "thumbnail-size-600": { - "prop": "--spectrum-thumbnail-size-600", + "title-size-s": { + "prop": "--spectrum-title-size-s", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "36px" + "value": "14px" }, "mobile": { - "value": "46px" + "value": "17px" } }, - "thumbnail-size-700": { - "prop": "--spectrum-thumbnail-size-700", + "title-size-xl": { + "prop": "--spectrum-title-size-xl", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "40px" + "value": "20px" }, "mobile": { - "value": "50px" + "value": "24px" } }, - "thumbnail-size-75": { - "prop": "--spectrum-thumbnail-size-75", + "title-size-xs": { + "prop": "--spectrum-title-size-xs", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "18px" + "value": "12px" }, "mobile": { - "value": "22px" + "value": "15px" } }, - "thumbnail-size-800": { - "prop": "--spectrum-thumbnail-size-800", + "title-size-xxl": { + "prop": "--spectrum-title-size-xxl", + "ref": "var(--spectrum-font-size-500)", "desktop": { - "value": "44px" + "value": "22px" }, "mobile": { - "value": "55px" + "value": "27px" } }, - "thumbnail-size-900": { - "prop": "--spectrum-thumbnail-size-900", + "title-size-xxxl": { + "prop": "--spectrum-title-size-xxxl", + "ref": "var(--spectrum-font-size-600)", "desktop": { - "value": "50px" + "value": "25px" }, "mobile": { - "value": "62px" + "value": "31px" } }, "toast-bottom-to-text": { "prop": "--spectrum-toast-bottom-to-text", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { - "value": "19px" + "value": "22px" } }, "toast-height": { "prop": "--spectrum-toast-height", "desktop": { - "value": "48px" + "value": "52px" }, "mobile": { - "value": "56px" + "value": "60px" } }, "toast-maximum-width": { @@ -11751,19 +15652,19 @@ "toast-top-to-text": { "prop": "--spectrum-toast-top-to-text", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { - "value": "16px" + "value": "20px" } }, "toast-top-to-workflow-icon": { "prop": "--spectrum-toast-top-to-workflow-icon", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "17px" + "value": "20px" } }, "tooltip-maximum-width": { @@ -11797,6 +15698,16 @@ "value": "12px" } }, + "track-color": { + "prop": "--spectrum-track-color", + "ref": "var(--spectrum-gray-300)", + "light": { + "value": "rgb(218, 218, 218)" + }, + "dark": { + "value": "rgb(57, 57, 57)" + } + }, "transparent-black-100": { "prop": "--spectrum-transparent-black-100", "value": "rgba(0, 0, 0, 0.09)" @@ -11910,6 +15821,228 @@ "value": "5px" } }, + "tree-view-bottom-to-label": { + "prop": "--spectrum-tree-view-bottom-to-label", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "tree-view-disclosure-indicator-height": { + "prop": "--spectrum-tree-view-disclosure-indicator-height", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "tree-view-disclosure-indicator-width": { + "prop": "--spectrum-tree-view-disclosure-indicator-width", + "desktop": { + "value": "34px" + }, + "mobile": { + "value": "42px" + } + }, + "tree-view-drag-handle-to-checkbox": { + "prop": "--spectrum-tree-view-drag-handle-to-checkbox", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "tree-view-edge-to-checkbox": { + "prop": "--spectrum-tree-view-edge-to-checkbox", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "tree-view-edge-to-drag-handle": { + "prop": "--spectrum-tree-view-edge-to-drag-handle", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "tree-view-end-edge-to-action-area": { + "prop": "--spectrum-tree-view-end-edge-to-action-area", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "7px" + } + }, + "tree-view-header-to-item": { + "prop": "--spectrum-tree-view-header-to-item", + "value": "-1px" + }, + "tree-view-item-to-header": { + "prop": "--spectrum-tree-view-item-to-header", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "tree-view-item-to-item": { + "prop": "--spectrum-tree-view-item-to-item", + "value": "-1px" + }, + "tree-view-item-to-item-detached": { + "prop": "--spectrum-tree-view-item-to-item-detached", + "value": "2px" + }, + "tree-view-label-to-action-area": { + "prop": "--spectrum-tree-view-label-to-action-area", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "tree-view-level-increment": { + "prop": "--spectrum-tree-view-level-increment", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "tree-view-minimum-height": { + "prop": "--spectrum-tree-view-minimum-height", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "50px" + } + }, + "tree-view-minimum-top-to-context-area": { + "prop": "--spectrum-tree-view-minimum-top-to-context-area", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "tree-view-minimum-width": { + "prop": "--spectrum-tree-view-minimum-width", + "desktop": { + "value": "160px" + }, + "mobile": { + "value": "200px" + } + }, + "tree-view-row-background-hover": { + "prop": "--spectrum-tree-view-row-background-hover", + "ref": "var(--spectrum-gray-100)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "tree-view-selected-row-background-color-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-color-emphasized", + "ref": "var(--spectrum-informative-color-800)", + "light": { + "value": "rgb(59, 99, 251)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "tree-view-selected-row-background-default": { + "prop": "--spectrum-tree-view-selected-row-background-default", + "ref": "var(--spectrum-gray-100)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "tree-view-selected-row-background-hover": { + "prop": "--spectrum-tree-view-selected-row-background-hover", + "ref": "var(--spectrum-gray-100)", + "light": { + "value": "rgb(233, 233, 233)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "tree-view-selected-row-background-opacity-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", + "value": "0.1" + }, + "tree-view-selected-row-background-opacity-emphasized-hover": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", + "value": "0.15" + }, + "tree-view-top-to-action-button": { + "prop": "--spectrum-tree-view-top-to-action-button", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "tree-view-top-to-checkbox": { + "prop": "--spectrum-tree-view-top-to-checkbox", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "tree-view-top-to-disclosure-indicator": { + "prop": "--spectrum-tree-view-top-to-disclosure-indicator", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "tree-view-top-to-drag-handle": { + "prop": "--spectrum-tree-view-top-to-drag-handle", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "tree-view-top-to-label": { + "prop": "--spectrum-tree-view-top-to-label", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, "turquoise-100": { "prop": "--spectrum-turquoise-100", "dark": { @@ -12039,7 +16172,7 @@ "turquoise-800": { "prop": "--spectrum-turquoise-800", "dark": { - "value": "rgb(9, 135, 147)" + "value": "rgb(9, 131, 142)" }, "light": { "value": "rgb(10, 141, 153)" @@ -12054,10 +16187,45 @@ "value": "rgb(8, 126, 137)" } }, + "turquoise-background-color-default": { + "prop": "--spectrum-turquoise-background-color-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(8, 126, 137)" + }, + "dark": { + "value": "rgb(9, 131, 142)" + } + }, + "turquoise-subtle-background-color-default": { + "prop": "--spectrum-turquoise-subtle-background-color-default", + "ref": "var(--spectrum-turquoise-300)", + "light": { + "value": "rgb(209, 245, 245)" + }, + "dark": { + "value": "rgb(0, 49, 54)" + } + }, + "turquoise-visual-color": { + "prop": "--spectrum-turquoise-visual-color", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" + }, + "dark": { + "value": "rgb(11, 151, 164)" + } + }, "white": { "prop": "--spectrum-white", "value": "rgb(255, 255, 255)" }, + "window-to-edge": { + "prop": "--spectrum-window-to-edge", + "ref": "var(--spectrum-spacing-600)", + "value": "40px" + }, "workflow-icon-size-100": { "prop": "--spectrum-workflow-icon-size-100", "desktop": { @@ -12235,7 +16403,7 @@ "value": "rgb(175, 116, 0)" }, "dark": { - "value": "rgb(169, 110, 0)" + "value": "rgb(164, 106, 0)" } }, "yellow-900": { @@ -12249,12 +16417,22 @@ }, "yellow-background-color-default": { "prop": "--spectrum-yellow-background-color-default", - "ref": "var(--spectrum-yellow-1000)", + "ref": "var(--spectrum-yellow-1100)", "light": { "value": "rgb(245, 199, 0)" }, "dark": { - "value": "rgb(203, 141, 0)" + "value": "rgb(218, 159, 0)" + } + }, + "yellow-subtle-background-color-default": { + "prop": "--spectrum-yellow-subtle-background-color-default", + "ref": "var(--spectrum-yellow-300)", + "light": { + "value": "rgb(255, 241, 151)" + }, + "dark": { + "value": "rgb(61, 39, 0)" } }, "yellow-visual-color": { diff --git a/tokens/package.json b/tokens/package.json index 5e29939eae3..e18cd9033b8 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "13.0.0-beta.16", + "@adobe/spectrum-tokens": "13.0.0-beta.58", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.0.0", diff --git a/tools/generator/CHANGELOG.md b/tools/generator/CHANGELOG.md index ca13d6ad0ab..b085e4eec54 100644 --- a/tools/generator/CHANGELOG.md +++ b/tools/generator/CHANGELOG.md @@ -112,6 +112,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 2.0.11 +🗓 2023-07-24 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/generator@2.0.10...@spectrum-css/generator@2.0.11) + **Note:** Version bump only for package @spectrum-css/generator @@ -135,6 +137,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 2.0.8 🗓 2023-06-01 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/generator@2.0.7...@spectrum-css/generator@2.0.8) + **Note:** Version bump only for package @spectrum-css/generator diff --git a/tools/generator/templates/stories/template.js.hbs b/tools/generator/templates/stories/template.js.hbs index af1047abb64..394ccd11658 100644 --- a/tools/generator/templates/stories/template.js.hbs +++ b/tools/generator/templates/stories/template.js.hbs @@ -7,8 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-{{ pascalCase name }}", diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md index f5cead1e626..3737c251b26 100644 --- a/ui-icons/CHANGELOG.md +++ b/ui-icons/CHANGELOG.md @@ -23,8 +23,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ## 1.1.0 -🗓 -2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@0.1.0...@spectrum-css/ui-icons@1.1.0) +🗓 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@0.1.0...@spectrum-css/ui-icons@1.1.0) ### ✨ Features diff --git a/yarn.lock b/yarn.lock index 26d3faebe35..c714f26d0cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -185,10 +185,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:13.0.0-beta.16": - version: 13.0.0-beta.16 - resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.16" - checksum: 10c0/84ca0d3faff5ad9281fdd14c3b5227b2356aa46a590ed4d0281db63e1773e58ab9533e172730a78f77e8bc2d21e587e3dd11870b484b0bd9342128833e8d5af5 +"@adobe/spectrum-tokens@npm:13.0.0-beta.58": + version: 13.0.0-beta.58 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.58" + checksum: 10c0/2713a0dfd73b11172c5f9d2be4ae92c472387e74aad857575cee0a4391f029f9fa7b10f8b46e917d8972b1c7631758432130ca361ce9dfc76064af2378c12a02 languageName: node linkType: hard @@ -3728,13 +3728,13 @@ __metadata: resolution: "@spectrum-css/actionbar@workspace:components/actionbar" dependencies: "@spectrum-css/actiongroup": "npm:6.1.0" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -3821,13 +3821,13 @@ __metadata: resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4201,7 +4201,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/closebutton@npm:6.1.0, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": +"@spectrum-css/closebutton@npm:5.0.0-next.2, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: @@ -4481,13 +4481,13 @@ __metadata: resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -5410,12 +5410,12 @@ __metadata: resolution: "@spectrum-css/toast@workspace:components/toast" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5441,7 +5441,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:13.0.0-beta.16" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.58" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.0.0" From 46477a038a419842746956622074b47f3656834e Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 8 Mar 2024 13:45:59 -0500 Subject: [PATCH 023/103] fix(commons): remove renamed mods marked for deprecation (#2580) * fix(commons): remove renamed mods marked for deprecation Remove mods that were renamed and previously marked for deprecation, and regenerate mods lists. This will help in reviewing the accuracy of other components' mods lists as they are being migrated to s2. * docs: migration guide notes for mod property deprecations Add notes to components affected by mod property changes in the commons basebutton. * docs(closebutton): updated docs for migration guide and icon size - Removes the "Icon size" variant options, as noted in the closebutton PR. Per Figma changelog "removed icon size as a property". - Updates migration guide with a more organized history. * fix(commons): remove another mod referencing global token Deprecates an additional mod name that was referencing a global token, and updates migration notes for all affected components. --- components/accordion/index.css | 34 ++--- components/actionbar/package.json | 2 +- components/alertbanner/dist/metadata.json | 1 - components/alertbanner/index.css | 12 +- components/alertbanner/package.json | 2 +- components/alertdialog/index.css | 2 +- components/calendar/index.css | 3 +- components/coachindicator/dist/metadata.json | 4 - components/coachindicator/index.css | 12 -- components/coachmark/package.json | 10 +- components/commons/basebutton.css | 36 +++--- components/commons/package.json | 4 +- components/datepicker/index.css | 2 + components/dialog/package.json | 2 +- components/dropindicator/package.json | 22 ++-- components/fieldlabel/package.json | 22 ++-- components/helptext/package.json | 22 ++-- components/illustratedmessage/package.json | 22 ++-- components/infieldbutton/package.json | 4 +- components/inlinealert/package.json | 6 +- components/logicbutton/dist/metadata.json | 5 +- components/logicbutton/package.json | 14 +-- components/menu/index.css | 2 + components/miller/package.json | 36 +++--- components/modal/package.json | 14 +-- components/picker/dist/metadata.json | 5 +- components/picker/package.json | 8 +- components/pickerbutton/package.json | 36 +++--- components/popover/package.json | 4 +- components/progressbar/package.json | 4 +- components/radio/package.json | 22 ++-- components/rating/package.json | 22 ++-- components/sidenav/package.json | 4 +- components/tag/index.css | 3 +- components/tag/package.json | 4 +- components/toast/package.json | 38 +++--- components/tooltip/package.json | 22 ++-- components/tray/package.json | 10 +- components/underlay/package.json | 12 +- tools/bundle/package.json | 4 +- yarn.lock | 124 +++++++++---------- 41 files changed, 300 insertions(+), 317 deletions(-) diff --git a/components/accordion/index.css b/components/accordion/index.css index e08441208df..f3b52638318 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -12,11 +12,11 @@ */ .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-200); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); + --spectrum-accordion-item-content-disabled-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); - --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200)); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text); @@ -63,7 +63,7 @@ --spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-accordion-min-block-size: max( - var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), + var(--spectrum-accordion-item-height), calc(var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)))) ); @@ -80,24 +80,24 @@ } .spectrum-Accordion--compact { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-75)); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-200)); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); } @@ -128,7 +128,7 @@ } .spectrum-Accordion--sizeS { - --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-100)); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); @@ -138,7 +138,7 @@ } .spectrum-Accordion--sizeL { - --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-300)); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); @@ -148,7 +148,7 @@ } .spectrum-Accordion--sizeXL { - --spectrum-accordion-item-height: var(--spectrum-component-height-400); + --spectrum-accordion-item-height: var(--mod-accordion-item-height, var(--spectrum-component-height-400)); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300); --spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); @@ -170,17 +170,17 @@ margin: 0; - min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)); + min-block-size: var(--spectrum-accordion-item-height); min-inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); &:first-child { border-block-start: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); + border-color: var(--spectrum-accordion-divider-color); border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); } border-block-end: 1px solid transparent; - border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color)); + border-color: var(--spectrum-accordion-divider-color); border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)); } @@ -210,7 +210,7 @@ padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)); display: none; - color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color)); + color: var(--spectrum-accordion-item-content-color); font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); @@ -305,7 +305,7 @@ } .spectrum-Accordion-itemContent { - color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color)); + color: var(--spectrum-accordion-item-content-disabled-color); } } diff --git a/components/actionbar/package.json b/components/actionbar/package.json index a3315e25c93..e7e83cf3208 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0", - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", + "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index d4bf3d34ee5..213feb52411 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -53,7 +53,6 @@ "--spectrum-alert-banner-start-edge", "--spectrum-alert-banner-text-to-button-horizontal", "--spectrum-alert-banner-text-to-button-vertical", - "--spectrum-alert-banner-text-to-divider", "--spectrum-alert-banner-top-icon", "--spectrum-alert-banner-top-text", "--spectrum-alert-banner-top-to-text", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 04701fe55f9..57696101f1f 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -24,7 +24,6 @@ --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --spectrum-alert-banner-text-to-divider: var(--spectrum-spacing-300); --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); @@ -34,20 +33,23 @@ --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); --spectrum-alert-banner-font-color: var(--spectrum-white); - /* settings for nested Divider */ + /* @passthrough start -- settings for nested Divider */ --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); --mod-divider-vertical-height: auto; --mod-divider-vertical-align: stretch; + /* @passthrough end */ - /* settings for nested Button */ + /* @passthrough start -- settings for nested Button */ --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); - --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-alert-banner-text-to-divider)); + --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-spacing-300)); --mod-button-margin-left: auto; + /* @passthrough end */ - /* settings for nested CloseButton */ + /* @passthrough start -- settings for nested CloseButton */ --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); --mod-closebutton-align-self: flex-start; + /* @passthrough end */ display: none; justify-content: space-between; diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 9fa192a2b47..392ec92b2c5 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", + "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" diff --git a/components/alertdialog/index.css b/components/alertdialog/index.css index 14e6e555f2c..32f5367d1ca 100644 --- a/components/alertdialog/index.css +++ b/components/alertdialog/index.css @@ -40,7 +40,7 @@ --spectrum-alert-dialog-divider-to-description: var(--spectrum-spacing-300); --spectrum-alert-dialog-title-to-icon: var(--spectrum-spacing-300); - /* mods for nested component */ + /* @passthrough -- mods for nested component */ --mod-buttongroup-justify-content: flex-end; } diff --git a/components/calendar/index.css b/components/calendar/index.css index 3a641fa47f8..5dfa423d94c 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -170,8 +170,7 @@ .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - /* @passthrough start */ - /* Mimic the placement and sizing of the dates in the grid below */ + /* @passthrough start -- mimic the placement and sizing of the dates in the grid below */ --mod-actionbutton-edge-to-text: var(--spectrum-calendar-day-padding); --mod-actionbutton-min-width: var(--spectrum-calendar-day-width); --mod-actionbutton-content-color-default: var(--spectrum-calendar-button-icon-color); diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed1..3582f27f459 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -6,8 +6,6 @@ ".spectrum-CoachIndicator-ring:first-child", ".spectrum-CoachIndicator-ring:nth-child(2)", ".spectrum-CoachIndicator-ring:nth-child(3)", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--dark", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", @@ -31,11 +29,9 @@ "--mod-coach-indicator-quiet-ring-diameter", "--mod-coach-indicator-ring-block-size", "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-dark-color", "--mod-coach-indicator-ring-default-color", "--mod-coach-indicator-ring-diameter", "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-ring-light-color", "--mod-coach-indicator-top" ], "component": [ diff --git a/components/coachindicator/index.css b/components/coachindicator/index.css index 8cc7bdb8eda..c3bb2754d30 100644 --- a/components/coachindicator/index.css +++ b/components/coachindicator/index.css @@ -33,18 +33,6 @@ --spectrum-coach-indicator-animation-ring-inner-delay-multiple: var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33); } - /* @deprecated .spectrum-CoachIndicator--light */ - &.spectrum-CoachIndicator--light { - /* @deprecated --mod-coach-indicator-ring-light-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-light-color, var(--spectrum-white)); - } - - /* @deprecated .spectrum-CoachIndicator--dark */ - &.spectrum-CoachIndicator--dark { - /* @deprecated --mod-coach-indicator-ring-dark-color, use --mod-coach-indicator-ring-default-color instead */ - --spectrum-coach-indicator-ring-default-color: var(--mod-coach-indicator-ring-dark-color, var(--spectrum-black)); - } - &.spectrum-CoachIndicator--staticWhite { --spectrum-coach-indicator-ring-default-color: var(--spectrum-white); } diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 96bed986f27..66233ddf5fa 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -25,13 +25,13 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=7", "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", + "@spectrum-css/button": ">=14", + "@spectrum-css/buttongroup": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/popover": ">=8", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index fa015bc145f..ca0caa6bba2 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -29,39 +29,40 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; -webkit-font-smoothing: antialiased; /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ text-transform: none; - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-style: solid; - transition: - background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; /* Fix Firefox */ &::-moz-focus-inner { - border-style: none; + margin-block-start: -2px; + margin-block-end: -2px; padding: 0; + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; } &:focus { @@ -90,12 +91,11 @@ inset-inline-end: 0; display: block; - - margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); transition: - opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out; + opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; } &:focus-visible::after { diff --git a/components/commons/package.json b/components/commons/package.json index ee9bd8e69b6..9bdd5194965 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -27,10 +27,10 @@ "package.json" ], "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16" }, "devDependencies": { - "@spectrum-css/tokens": "workspace:^" + "@spectrum-css/tokens": "^16.0.0" }, "keywords": [ "design-system", diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 6a5554d320e..fcbf8fc0b39 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -85,8 +85,10 @@ } &.is-invalid { + /* @passthrough start */ --mod-textfield-icon-spacing-inline-end-invalid: calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-datepicker-invalid-icon-to-button)); --mod-textfield-icon-spacing-inline-end-quiet-invalid: calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-invalid-icon-to-button-quiet)); + /* @passthrough end */ } &:not(.spectrum-DatePicker--quiet, .is-disabled) { diff --git a/components/dialog/package.json b/components/dialog/package.json index 65247b7f680..0d553267ad5 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", + "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index f55b41f1c3e..73eeb28d4d1 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -56,5 +48,13 @@ { "rootClass": "spectrum-DropIndicator" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index cbd75939f46..4a9bc93cb93 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -58,5 +50,13 @@ "rootClass": "spectrum-FieldLabel", "swc": "https://opensource.adobe.com/spectrum-web-components/components/field-label/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/helptext/package.json b/components/helptext/package.json index 6634f970948..af1f984db5e 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -58,5 +50,13 @@ "rootClass": "spectrum-HelpText", "swc": "https://opensource.adobe.com/spectrum-web-components/components/help-text/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index a73e3ef51c2..1047ca92327 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/typography": ">=8.0.0 <9.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - }, - "@spectrum-css/typography": { - "optional": true - } + "@spectrum-css/tokens": ">=16", + "@spectrum-css/typography": ">=8" }, "devDependencies": { "@spectrum-css/tokens": "16.0.1", @@ -58,5 +50,13 @@ "rootClass": "spectrum-IllustratedMessage", "swc": "https://opensource.adobe.com/spectrum-web-components/components/illustrated-message/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + }, + "@spectrum-css/typography": { + "optional": true + } + } } diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 5a8d00cc3f6..bae45cdec62 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index d9d78203521..dce67135f04 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=14", + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/button": { diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 341103900ae..eb1ebaa8e18 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -15,9 +15,7 @@ ".spectrum-LogicButton:focus-visible:after" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-focus-indicator-gap", - "--mod-line-height-100", "--mod-logic-button-and-background-color", "--mod-logic-button-and-background-color-disabled", "--mod-logic-button-and-background-color-hover", @@ -46,8 +44,7 @@ "--mod-logic-button-or-border-color-hover-disabled", "--mod-logic-button-or-text-color", "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding", - "--mod-sans-font-family-stack" + "--mod-logic-button-padding" ], "component": [ "--spectrum-logic-button-and-background-color", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 5e2ea7ecab3..05ead3cf08a 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -25,12 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" - }, - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", @@ -53,5 +48,10 @@ "guidelines": "https://spectrum-contributions.corp.adobe.com/page/logic-button-beta", "rootClass": "spectrum-LogicButton" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/menu/index.css b/components/menu/index.css index 0932c960bd4..e09af32ad97 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -421,8 +421,10 @@ grid-template-rows: 1fr auto; .spectrum-Menu-itemCheckbox { + /* @passthrough start */ --mod-checkbox-top-to-text: 0; --mod-checkbox-text-to-control: 0; + /* @passthrough end */ min-block-size: 0; diff --git a/components/miller/package.json b/components/miller/package.json index efd37891624..07c01a640a9 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -26,23 +26,9 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/assetlist": { - "optional": true - }, - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/checkbox": ">=10", + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/assetlist": "8.1.0", @@ -67,5 +53,19 @@ "guidelines": "https://spectrum-contributions.corp.adobe.com/page/miller-columns-beta", "rootClass": "spectrum-MillerColumns" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/assetlist": { + "optional": true + }, + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/modal/package.json b/components/modal/package.json index 8e0ed460b58..a3ada51ddb4 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -25,12 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" - }, - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", @@ -52,5 +47,10 @@ { "rootClass": "spectrum-Modal" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 5c43722cc69..f3489092bc9 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -77,8 +77,6 @@ ".spectrum-Picker:hover .spectrum-Picker-menuIcon" ], "modifiers": [ - "--mod-animation-duration-100", - "--mod-line-height-100", "--mod-picker-animation-duration", "--mod-picker-background-color-active", "--mod-picker-background-color-default", @@ -141,8 +139,7 @@ "--mod-picker-spacing-top-to-alert-icon", "--mod-picker-spacing-top-to-disclosure-icon", "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text", - "--mod-sans-font-family-stack" + "--mod-picker-spacing-top-to-text" ], "component": [ "--spectrum-picker-animation-duration", diff --git a/components/picker/package.json b/components/picker/package.json index 43cdaf799b3..dc425da790a 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/popover": ">=8", + "@spectrum-css/progresscircle": ">=5", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 06dcb4fc068..a078eab6cfa 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -25,24 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/menu": { - "optional": true - }, - "@spectrum-css/popover": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/popover": ">=8", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -67,5 +53,19 @@ "rootClass": "spectrum-PickerButton", "swc": "https://opensource.adobe.com/spectrum-web-components/components/picker-button/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/menu": { + "optional": true + }, + "@spectrum-css/popover": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/popover/package.json b/components/popover/package.json index 78062944942..1c0ab9711ab 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -27,9 +27,9 @@ "peerDependencies": { "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0", "@spectrum-css/dialog": ">=12.0.0 <13.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=5", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/alertdialog": { diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 1270fb3b86c..4fb495c2b39 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/fieldlabel": ">=10", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/fieldlabel": { diff --git a/components/radio/package.json b/components/radio/package.json index 6d4b76d3802..2f99838994d 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -58,5 +50,13 @@ "rootClass": "spectrum-Radio", "swc": "https://opensource.adobe.com/spectrum-web-components/components/radio/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/rating/package.json b/components/rating/package.json index f0cce6f4f1c..261cbd3c161 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", @@ -57,5 +49,13 @@ "guidelines": "https://spectrum.adobe.com/page/rating", "rootClass": "spectrum-Rating" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/sidenav/package.json b/components/sidenav/package.json index f27098c5ce4..28b120c7524 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/tag/index.css b/components/tag/index.css index 23a6453edce..c685d7611c0 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -237,10 +237,11 @@ /* clear button */ .spectrum-Tag-clearButton { - /* width of fill neutralized to ensure correct inline spacing within tag */ + /* @passthrough start -- width of fill neutralized to ensure correct inline spacing within tag */ --mod-clear-button-width: fit-content; --spectrum-clearbutton-fill-size: fit-content; --spectrum-clearbutton-fill-background-color: transparent; + /* @passthrough end */ box-sizing: border-box; diff --git a/components/tag/package.json b/components/tag/package.json index 4bb576e74c5..331a2cc5fc1 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -27,8 +27,8 @@ "peerDependencies": { "@spectrum-css/avatar": ">=9.0.0 <10.0.0", "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/avatar": { diff --git a/components/toast/package.json b/components/toast/package.json index 969c6f64383..bf63aabd19e 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -25,24 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/button": { - "optional": true - }, - "@spectrum-css/closebutton": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/button": ">=14", + "@spectrum-css/closebutton": ">=5.0.0-next.0", + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/button": "14.1.1", @@ -68,5 +54,19 @@ "rootClass": "spectrum-Toast", "swc": "https://opensource.adobe.com/spectrum-web-components/components/toast/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + }, + "@spectrum-css/closebutton": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 379ecb22fc4..cd1d4ab926b 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -25,16 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } + "@spectrum-css/icon": ">=9", + "@spectrum-css/tokens": ">=16" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", @@ -59,5 +51,13 @@ "rootClass": "spectrum-Tooltip", "swc": "https://opensource.adobe.com/spectrum-web-components/components/tooltip/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/components/tray/package.json b/components/tray/package.json index 5bcf38044f1..270c7f4591b 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/button": ">=14", "@spectrum-css/dialog": ">=12.0.0 <13.0.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/divider": ">=5", + "@spectrum-css/icon": ">=9", + "@spectrum-css/modal": ">=7", + "@spectrum-css/tokens": ">=16" }, "peerDependenciesMeta": { "@spectrum-css/button": { diff --git a/components/underlay/package.json b/components/underlay/package.json index aeffe00205c..63d590735e1 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -27,11 +27,6 @@ "peerDependencies": { "@spectrum-css/tokens": ">=16.0.1" }, - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } - }, "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" @@ -53,5 +48,10 @@ "rootClass": "spectrum-Underlay", "swc": "https://opensource.adobe.com/spectrum-web-components/components/underlay/" } - ] + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + } } diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 2ebb930814b..a3d9ae1d9d0 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -58,7 +58,7 @@ "@spectrum-css/colorslider": "workspace:^", "@spectrum-css/colorwheel": "workspace:^", "@spectrum-css/combobox": "workspace:^", - "@spectrum-css/commons": "workspace:^", + "@spectrum-css/commons": "^11.0.0", "@spectrum-css/contextualhelp": "workspace:^", "@spectrum-css/datepicker": "workspace:^", "@spectrum-css/dial": "workspace:^", @@ -108,7 +108,7 @@ "@spectrum-css/textfield": "workspace:^", "@spectrum-css/thumbnail": "workspace:^", "@spectrum-css/toast": "workspace:^", - "@spectrum-css/tokens": "workspace:^", + "@spectrum-css/tokens": "^16.0.0", "@spectrum-css/tooltip": "workspace:^", "@spectrum-css/tray": "workspace:^", "@spectrum-css/treeview": "workspace:^", diff --git a/yarn.lock b/yarn.lock index c714f26d0cb..6cc41ceb8a1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3734,7 +3734,7 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" + "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -3827,7 +3827,7 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" + "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4012,7 +4012,7 @@ __metadata: "@spectrum-css/colorslider": "workspace:^" "@spectrum-css/colorwheel": "workspace:^" "@spectrum-css/combobox": "workspace:^" - "@spectrum-css/commons": "workspace:^" + "@spectrum-css/commons": "npm:^11.0.0" "@spectrum-css/contextualhelp": "workspace:^" "@spectrum-css/datepicker": "workspace:^" "@spectrum-css/dial": "workspace:^" @@ -4062,7 +4062,7 @@ __metadata: "@spectrum-css/textfield": "workspace:^" "@spectrum-css/thumbnail": "workspace:^" "@spectrum-css/toast": "workspace:^" - "@spectrum-css/tokens": "workspace:^" + "@spectrum-css/tokens": "npm:^16.0.0" "@spectrum-css/tooltip": "workspace:^" "@spectrum-css/tray": "workspace:^" "@spectrum-css/treeview": "workspace:^" @@ -4244,13 +4244,13 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" + "@spectrum-css/button": ">=14" + "@spectrum-css/buttongroup": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/popover": ">=8" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4399,13 +4399,13 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@npm:^11.0.0, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" dependencies: - "@spectrum-css/tokens": "workspace:^" + "@spectrum-css/tokens": "npm:^16.0.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16" languageName: unknown linkType: soft @@ -4487,7 +4487,7 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" + "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4526,8 +4526,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4593,8 +4593,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4647,8 +4647,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4677,8 +4677,8 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - "@spectrum-css/typography": ">=8.0.0 <9.0.0" + "@spectrum-css/tokens": ">=16" + "@spectrum-css/typography": ">=8" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4694,8 +4694,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4712,9 +4712,9 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=14" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -4745,7 +4745,7 @@ __metadata: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4812,9 +4812,9 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/checkbox": ">=10" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/assetlist": optional: true @@ -4834,7 +4834,7 @@ __metadata: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4909,11 +4909,11 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/popover": ">=8" + "@spectrum-css/progresscircle": ">=5" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -4939,10 +4939,10 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/popover": ">=8" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4968,9 +4968,9 @@ __metadata: peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=5" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/alertdialog": optional: true @@ -5036,8 +5036,8 @@ __metadata: "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/fieldlabel": ">=10" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/fieldlabel": optional: true @@ -5066,8 +5066,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5083,8 +5083,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5125,8 +5125,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5340,8 +5340,8 @@ __metadata: peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/avatar": optional: true @@ -5414,10 +5414,10 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/button": ">=14" + "@spectrum-css/closebutton": ">=5.0.0-next.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5437,7 +5437,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@npm:^16.0.0, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5460,8 +5460,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/icon": ">=9" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5481,12 +5481,12 @@ __metadata: "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/divider": ">=5" + "@spectrum-css/icon": ">=9" + "@spectrum-css/modal": ">=7" + "@spectrum-css/tokens": ">=16" peerDependenciesMeta: "@spectrum-css/button": optional: true From e033d05e3bae1e69c2a6820eaca1cacc72154ade Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 11 Mar 2024 13:04:35 -0400 Subject: [PATCH 024/103] feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. --- components/accordion/package.json | 4 +- components/actionbar/package.json | 4 +- components/actionbutton/package.json | 4 +- components/actiongroup/package.json | 4 +- components/actionmenu/package.json | 4 +- components/alertbanner/package.json | 4 +- components/alertdialog/package.json | 4 +- components/asset/package.json | 4 +- components/assetcard/package.json | 4 +- components/assetlist/package.json | 4 +- components/avatar/package.json | 4 +- components/badge/package.json | 4 +- components/breadcrumb/package.json | 4 +- components/button/package.json | 4 +- components/buttongroup/package.json | 4 +- components/calendar/package.json | 4 +- components/card/package.json | 4 +- components/checkbox/package.json | 4 +- components/clearbutton/package.json | 4 +- components/closebutton/package.json | 4 +- components/coachindicator/package.json | 4 +- components/coachmark/package.json | 4 +- components/colorarea/package.json | 4 +- components/colorhandle/package.json | 4 +- components/colorloupe/package.json | 4 +- components/colorslider/package.json | 4 +- components/colorwheel/package.json | 4 +- components/combobox/package.json | 4 +- components/commons/package.json | 2 +- components/contextualhelp/package.json | 4 +- components/datepicker/package.json | 4 +- components/dial/package.json | 4 +- components/dialog/package.json | 6 +- components/divider/package.json | 4 +- components/dropindicator/package.json | 4 +- components/dropzone/package.json | 4 +- components/fieldgroup/package.json | 4 +- components/fieldlabel/dist/metadata.json | 49 +-- components/fieldlabel/index.css | 121 +++--- components/fieldlabel/package.json | 4 +- .../fieldlabel/stories/fieldlabel.stories.js | 29 +- components/fieldlabel/stories/template.js | 3 + components/floatingactionbutton/package.json | 4 +- components/form/package.json | 4 +- components/helptext/package.json | 4 +- components/icon/package.json | 4 +- components/illustratedmessage/package.json | 4 +- components/infieldbutton/package.json | 4 +- components/inlinealert/package.json | 4 +- components/link/package.json | 4 +- components/logicbutton/package.json | 4 +- components/menu/package.json | 4 +- components/meter/package.json | 4 +- components/miller/package.json | 4 +- components/modal/package.json | 4 +- components/opacitycheckerboard/package.json | 4 +- components/page/package.json | 4 +- components/pagination/package.json | 4 +- components/picker/package.json | 4 +- components/pickerbutton/package.json | 4 +- components/popover/package.json | 4 +- components/progressbar/package.json | 4 +- components/progresscircle/package.json | 4 +- components/radio/package.json | 4 +- components/rating/package.json | 4 +- components/search/package.json | 4 +- components/sidenav/package.json | 4 +- components/slider/package.json | 4 +- components/splitview/package.json | 4 +- components/statuslight/package.json | 4 +- components/steplist/package.json | 4 +- components/stepper/package.json | 4 +- components/swatch/package.json | 4 +- components/swatchgroup/package.json | 4 +- components/switch/package.json | 4 +- components/table/package.json | 4 +- components/tabs/package.json | 4 +- components/tag/package.json | 4 +- components/taggroup/package.json | 4 +- components/textfield/package.json | 4 +- components/thumbnail/package.json | 4 +- components/toast/package.json | 8 +- components/tooltip/package.json | 4 +- components/tray/package.json | 4 +- components/treeview/package.json | 4 +- components/typography/package.json | 4 +- components/underlay/package.json | 4 +- components/well/package.json | 4 +- package.json | 6 +- tokens/package.json | 2 +- tools/bundle/package.json | 4 +- yarn.lock | 382 +++++++++--------- 92 files changed, 495 insertions(+), 441 deletions(-) diff --git a/components/accordion/package.json b/components/accordion/package.json index 74e0e9bfd1c..9084a0dc58f 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index e7e83cf3208..303ad03e811 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -29,7 +29,7 @@ "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actiongroup": { @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 4fc5bb1d26d..a7cad51fa11 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -39,7 +39,7 @@ "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 8329a400255..60132757517 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index fbdfcdcef55..8f25a4fd0ff 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -29,14 +29,14 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 392ec92b2c5..4b44345fc95 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -29,7 +29,7 @@ "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 3b3f5f2414e..d18230f8da5 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -29,7 +29,7 @@ "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, "peerDependenciesMeta": { @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/asset/package.json b/components/asset/package.json index 5cc31e0d64f..160f43c239e 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 5f6524ee91f..5985685aa7b 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index c5b2ecc909d..59e456d2eaf 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/avatar/package.json b/components/avatar/package.json index 0f954886a7a..b801dbb2250 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/badge/package.json b/components/badge/package.json index 8a59b3b72bb..7b01b89f356 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index e1dc521b6c9..0e3d7b666c9 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/button/package.json b/components/button/package.json index 039ab069117..4892309a5f1 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -44,7 +44,7 @@ "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 4d6ce4722dc..4916540a557 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/calendar/package.json b/components/calendar/package.json index 068b1a46966..fe737d42648 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/card/package.json b/components/card/package.json index 928e0496576..b0f2928c23c 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -30,7 +30,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/quickaction": ">=3", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/typography": ">=8.0.0 <9.0.0" }, "peerDependenciesMeta": { @@ -61,7 +61,7 @@ "@spectrum-css/asset": "7.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 66df3ef427f..28b51a69c56 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 873f2fc97e1..be51838bd68 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 031f1df7fb8..23c4e41e3a2 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -33,7 +33,7 @@ ], "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -46,7 +46,7 @@ "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 041ae077b01..b8d69fb3aa9 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 66233ddf5fa..9105d87a923 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -31,7 +31,7 @@ "@spectrum-css/buttongroup": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -63,7 +63,7 @@ "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 0bdce72d461..52b516090b0 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 2805419f8a7..1e752e5fa8d 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorloupe": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 854cc7ced9c..5cc768b0366 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/colorslider/package.json b/components/colorslider/package.json index 4ec24fd9faf..bbef89e8eb2 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 4f11e9e3bd4..8699c488924 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -28,7 +28,7 @@ "@spectrum-css/colorarea": ">=7.0.0 <8.0.0", "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/colorarea": { @@ -48,7 +48,7 @@ "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/combobox/package.json b/components/combobox/package.json index ccf3f076282..0c2cefa70fd 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -30,7 +30,7 @@ "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/menu": { @@ -58,7 +58,7 @@ "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/commons/package.json b/components/commons/package.json index 9bdd5194965..71d24a64af0 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -27,7 +27,7 @@ "package.json" ], "peerDependencies": { - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/tokens": "^16.0.0" diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 5cb5641bdd1..6ee9a3a2fd0 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -28,7 +28,7 @@ "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/link": "7.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index fb401015bf5..2810b578d70 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -29,7 +29,7 @@ "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/calendar": { @@ -53,7 +53,7 @@ "@spectrum-css/pickerbutton": "6.1.1", "@spectrum-css/popover": "8.2.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/dial/package.json b/components/dial/package.json index 4c486b10c7a..a2897ce9fb5 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index 0d553267ad5..e27bab7c086 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/closebutton": ">=5.0.0-next.0", + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, "peerDependenciesMeta": { @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/divider/package.json b/components/divider/package.json index 78b8e624467..94f53c6956c 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index 73eeb28d4d1..d40acd9e53d 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index 26afb9f0990..bfeccb43aa7 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -28,7 +28,7 @@ "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index b8af94c4092..64a6900987a 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -28,7 +28,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/helptext": ">=7.0.0 <8.0.0", "@spectrum-css/radio": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -48,7 +48,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index cc26c19a022..0740215e8a2 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -5,9 +5,10 @@ ".spectrum-FieldLabel--left", ".spectrum-FieldLabel--right", ".spectrum-FieldLabel--sizeL", - ".spectrum-FieldLabel--sizeM", ".spectrum-FieldLabel--sizeS", ".spectrum-FieldLabel--sizeXL", + ".spectrum-FieldLabel--staticBlack", + ".spectrum-FieldLabel--staticWhite", ".spectrum-FieldLabel-requiredIcon", ".spectrum-FieldLabel.is-disabled", ".spectrum-FieldLabel:lang(ja)", @@ -15,35 +16,20 @@ ".spectrum-FieldLabel:lang(zh)" ], "modifiers": [ - "--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-color", + "--mod-fieldlabel-asterisk-vertical-align", + "--mod-fieldlabel-bottom-to-text", "--mod-fieldlabel-font-size", "--mod-fieldlabel-font-weight", "--mod-fieldlabel-line-height", "--mod-fieldlabel-line-height-cjk", - "--mod-fieldlabel-margin-block", - "--mod-fieldlabel-margin-block-end", - "--mod-fieldlabel-margin-block-start", - "--mod-fieldlabel-margin-inline", - "--mod-fieldlabel-margin-inline-end", - "--mod-fieldlabel-margin-inline-start", "--mod-fieldlabel-min-height", - "--mod-fieldlabel-padding-block", "--mod-fieldlabel-padding-inline", "--mod-fieldlabel-side-margin-block-start", - "--mod-fieldlabel-side-padding-right" + "--mod-fieldlabel-side-padding-right", + "--mod-fieldlabel-text-to-asterisk", + "--mod-fieldlabel-top-to-text" ], "component": [ - "--spectrum-field-label-bottom-to-text", - "--spectrum-field-label-font-size", - "--spectrum-field-label-min-height", - "--spectrum-field-label-side-margin-block-start", - "--spectrum-field-label-side-padding-right", - "--spectrum-field-label-text-to-asterisk", "--spectrum-field-label-text-to-asterisk-extra-large", "--spectrum-field-label-text-to-asterisk-large", "--spectrum-field-label-text-to-asterisk-medium", @@ -52,30 +38,45 @@ "--spectrum-field-label-top-margin-large", "--spectrum-field-label-top-margin-medium", "--spectrum-field-label-top-margin-small", - "--spectrum-field-label-top-to-text" + "--spectrum-fieldlabel-bottom-to-text", + "--spectrum-fieldlabel-color", + "--spectrum-fieldlabel-font-size", + "--spectrum-fieldlabel-font-weight", + "--spectrum-fieldlabel-line-height", + "--spectrum-fieldlabel-min-height", + "--spectrum-fieldlabel-side-margin-block-start", + "--spectrum-fieldlabel-side-padding-right", + "--spectrum-fieldlabel-text-to-asterisk", + "--spectrum-fieldlabel-top-to-text" ], "global": [ + "--spectrum-black", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", + "--spectrum-component-height-300", "--spectrum-component-height-75", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", + "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", "--spectrum-disabled-content-color", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-line-height-100", "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-spacing-100", - "--spectrum-spacing-200" + "--spectrum-spacing-200", + "--spectrum-white" ], "system-theme": [], "passthroughs": [], - "high-contrast": ["--highcontrast-field-label-content-color"] + "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"] } diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index 4e5b4653efd..174875f109a 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -11,104 +11,111 @@ * governing permissions and limitations under the License. */ -/* @todo align modifiers to use field-label or fieldlabel but not both */ +.spectrum-FieldLabel { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); + + --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-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); -.spectrum-FieldLabel, -.spectrum-FieldLabel--sizeM { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --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-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); + } - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + /********* Disabled state *********/ + &.is-disabled { + --spectrum-fieldlabel-color: var(--highcontrast-fieldlabel-disabled-content-color, var(--spectrum-disabled-content-color)); + } } .spectrum-FieldLabel--sizeS { - --spectrum-field-label-min-height: var(--spectrum-component-height-75); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-field-label-font-size: var(--spectrum-font-size-75); + --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-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-100); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); + --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-field-label-min-height: var(--spectrum-component-height-100); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-field-label-font-size: var(--spectrum-font-size-100); + --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-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); } .spectrum-FieldLabel--sizeXL { - --spectrum-field-label-min-height: var(--spectrum-component-height-200); - --spectrum-field-label-top-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-field-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200); - --spectrum-field-label-font-size: var(--spectrum-font-size-200); + --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-fieldlabel-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); + + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-300); - --spectrum-field-label-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-field-label-side-padding-right: var(--spectrum-spacing-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-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); +.spectrum-FieldLabel--staticBlack { + --spectrum-fieldlabel-color: var(--spectrum-black); +} + +.spectrum-FieldLabel--staticWhite { + --spectrum-fieldlabel-color: var(--spectrum-white); } .spectrum-FieldLabel { display: block; box-sizing: border-box; - min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-field-label-min-height)); + min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); - padding-block: var(--mod-fieldlabel-padding-block, var(--mod-field-label-top-to-text, var(--spectrum-field-label-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))); + padding-block: var(--mod-fieldlabel-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-fieldlabel-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); padding-inline: var(--mod-fieldlabel-padding-inline, 0); - margin-block: var(--mod-fieldlabel-margin-block, var(--mod-fieldlabel-margin-block-start, 0) var(--mod-fieldlabel-margin-block-end, 0)); - margin-inline: var(--mod-fieldlabel-margin-inline, var(--mod-fieldlabel-margin-inline-start, 0) var(--mod-fieldlabel-margin-inline-end, 0)); - font-size: var(--mod-fieldlabel-font-size, var(--spectrum-field-label-font-size)); - font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-regular-font-weight)); + 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-line-height-100)); + line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--highcontrast-field-label-content-color, var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))); - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-fieldlabel-line-height: var(--mod-fieldlabel-line-height-cjk, var(--spectrum-cjk-line-height-100)); - } - - /********* Disabled state *********/ - &.is-disabled { - --mod-fieldlabel-color: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); - } + color: var(--spectrum-fieldlabel-color); } .spectrum-FieldLabel-requiredIcon { color: inherit; margin-block: 0; - margin-inline: var(--mod-field-label-text-to-asterisk, var(--spectrum-field-label-text-to-asterisk)) 0; - vertical-align: var(--mod-field-label-asterisk-vertical-align, baseline); + margin-inline: var(--mod-fieldlabel-text-to-asterisk, var(--spectrum-fieldlabel-text-to-asterisk)) 0; + vertical-align: var(--mod-fieldlabel-asterisk-vertical-align, baseline); } .spectrum-FieldLabel--left, .spectrum-FieldLabel--right { display: inline-block; - margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-field-label-side-margin-block-start)); + margin-block-start: var(--mod-fieldlabel-side-margin-block-start, var(--spectrum-fieldlabel-side-margin-block-start)); margin-block-end: 0; - margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-field-label-side-padding-right)); + margin-inline-end: var(--mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right)); vertical-align: top; } @@ -119,7 +126,7 @@ /********* WHCM *********/ @media (forced-colors: active) { - .spectrum-FieldLabel.is-disabled { - --highcontrast-field-label-content-color: GrayText; + .spectrum-FieldLabel { + --highcontrast-fieldlabel-disabled-content-color: GrayText; } } diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 4a9bc93cb93..eed003e74d6 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 1a268284d7f..125ca52e0cf 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; +import { isDisabled, isRequired, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { FieldLabelGroup } from "./fieldlabel.test.js"; @@ -35,6 +35,7 @@ export default { }, isDisabled, isRequired, + staticColor, }, args: { rootClass: "spectrum-FieldLabel", @@ -136,6 +137,32 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + */ +export const StaticWhite = Default.bind({}); +StaticWhite.storyName = "Static white"; +StaticWhite.args = { + staticColor: "white", +}; +StaticWhite.tags = ["!dev"]; +StaticWhite.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + */ +export const StaticBlack = Default.bind({}); +StaticBlack.storyName = "Static black"; +StaticBlack.args = { + staticColor: "black", +}; +StaticBlack.tags = ["!dev"]; +StaticBlack.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = FieldLabelGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 7f5477e4d5f..d5e4a14b42e 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -5,6 +5,7 @@ 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 { when } from "lit/directives/when.js"; +import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; @@ -20,6 +21,7 @@ export const Template = ({ alignment, isDisabled, isRequired, + staticColor, } = {}, context = {}) => { if (!label) { console.warn("FieldLabel: please provide a label for the field label."); @@ -49,6 +51,7 @@ export const Template = ({ [`${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 }), {}), })} diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 21e13f719a5..57e39350da8 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -26,7 +26,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/form/package.json b/components/form/package.json index 0b38d9056a7..1ed0cc02b0b 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/helptext/package.json b/components/helptext/package.json index af1f984db5e..c3907bf2b3f 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/icon/package.json b/components/icon/package.json index 4a4d22b16dc..f3217684add 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 1047ca92327..5f358c57dc4 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/typography": ">=8" }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index bae45cdec62..760837f7759 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index dce67135f04..b8ebd8f00ea 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/button": ">=14", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/link/package.json b/components/link/package.json index 36e977af7d1..0622f123d67 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 05ead3cf08a..267864e1e88 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/menu/package.json b/components/menu/package.json index a210399dd99..a4c2167af03 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -29,7 +29,7 @@ "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/switch": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/tray": ">=5.0.0 <6.0.0" }, "peerDependenciesMeta": { @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/tray": "5.1.0" }, "keywords": [ diff --git a/components/meter/package.json b/components/meter/package.json index a99280d1626..83da7e3cd17 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/progressbar": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/progressbar": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/miller/package.json b/components/miller/package.json index 07c01a640a9..889f2199011 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -28,13 +28,13 @@ "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", "@spectrum-css/checkbox": ">=10", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/modal/package.json b/components/modal/package.json index a3ada51ddb4..630db609431 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 46a96fb249a..54d8ea85f24 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/page/package.json b/components/page/package.json index cd71b59b372..bf980e91962 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/pagination/package.json b/components/pagination/package.json index 73915f0a91b..c6477b26361 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -29,7 +29,7 @@ "@spectrum-css/button": ">=14.0.0 <15.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -53,7 +53,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index dc425da790a..4a3dd66e03d 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -30,7 +30,7 @@ "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", "@spectrum-css/progresscircle": ">=5", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -59,7 +59,7 @@ "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index a078eab6cfa..57f0c9ef593 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -28,13 +28,13 @@ "@spectrum-css/icon": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/popover/package.json b/components/popover/package.json index 1c0ab9711ab..0f9657d97ff 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -29,7 +29,7 @@ "@spectrum-css/dialog": ">=12.0.0 <13.0.0", "@spectrum-css/divider": ">=5", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/alertdialog": { @@ -54,7 +54,7 @@ "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 4fb495c2b39..044d14646d7 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/fieldlabel": ">=10", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/fieldlabel": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index 6f08404e35d..f3a03b2018b 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/radio/package.json b/components/radio/package.json index 2f99838994d..1042e881941 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/rating/package.json b/components/rating/package.json index 261cbd3c161..6a3dfd41751 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/search/package.json b/components/search/package.json index f2b5334b7ca..6c4f5fb9f90 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -28,7 +28,7 @@ "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/clearbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 28b120c7524..8ce1fd29718 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/slider/package.json b/components/slider/package.json index 34c1d08a354..14a27b8b87d 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/stepper": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/stepper": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/stepper": "7.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/splitview/package.json b/components/splitview/package.json index 75ca825dd74..0d309677ad7 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/statuslight/package.json b/components/statuslight/package.json index 0b297a7d754..6350df8545c 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/steplist/package.json b/components/steplist/package.json index b286e0f0367..9ddaf60927b 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0", + "@spectrum-css/tokens": ">=14.0.0-next.0", "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" }, "peerDependenciesMeta": { @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/tokens": "14.0.0-next.0", "@spectrum-css/tooltip": "7.1.0" }, "keywords": [ diff --git a/components/stepper/package.json b/components/stepper/package.json index a2d956d094c..5287dc1fa0e 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -29,7 +29,7 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -53,7 +53,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/infieldbutton": "6.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/swatch/package.json b/components/swatch/package.json index e0b85e811f0..5c99dd1060f 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/opacitycheckerboard": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 370f463f0cd..0b749b4f297 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/swatch": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/swatch": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/switch/package.json b/components/switch/package.json index 9194bda53b3..80c173bdd98 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/table/package.json b/components/table/package.json index 669e0357898..dd00ea18be7 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -29,7 +29,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -53,7 +53,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/tabs/package.json b/components/tabs/package.json index 4e19a32397c..8a67dc71e3d 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -28,7 +28,7 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/picker": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -48,7 +48,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/picker": "9.1.1", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/tag/package.json b/components/tag/package.json index 331a2cc5fc1..a5cf597b95c 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -28,7 +28,7 @@ "@spectrum-css/avatar": ">=9.0.0 <10.0.0", "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/avatar": { @@ -48,7 +48,7 @@ "@spectrum-css/avatar": "9.1.0", "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index 1db26f49132..aab9413ebfa 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/tag": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tag": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/tag": "10.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/textfield/package.json b/components/textfield/package.json index c4cfa7bb026..850c6445df5 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index fa0f893136e..3ae92fe526e 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/opacitycheckerboard": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/toast/package.json b/components/toast/package.json index bf63aabd19e..efbac229e77 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -26,15 +26,14 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14", - "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", @@ -59,9 +58,6 @@ "@spectrum-css/button": { "optional": true }, - "@spectrum-css/closebutton": { - "optional": true - }, "@spectrum-css/icon": { "optional": true }, diff --git a/components/tooltip/package.json b/components/tooltip/package.json index cd1d4ab926b..5eb2ef487c2 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -26,12 +26,12 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/tray/package.json b/components/tray/package.json index 270c7f4591b..db7ac49ed3d 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -30,7 +30,7 @@ "@spectrum-css/divider": ">=5", "@spectrum-css/icon": ">=9", "@spectrum-css/modal": ">=7", - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -58,7 +58,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/treeview/package.json b/components/treeview/package.json index fb3c89534d4..a062d1bdc49 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/typography/package.json b/components/typography/package.json index b14835ead75..8d5b530d9f8 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/underlay/package.json b/components/underlay/package.json index 63d590735e1..1e0f8640105 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/well/package.json b/components/well/package.json index f13f53473ae..1a7ae26ddfb 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "16.0.1" + "@spectrum-css/tokens": "14.0.0-next.0" }, "keywords": [ "design-system", diff --git a/package.json b/package.json index 32ecb440e9a..430cee39c7a 100644 --- a/package.json +++ b/package.json @@ -72,9 +72,9 @@ "@commitlint/cli": "^19.6.1", "@commitlint/config-conventional": "^19.6.0", "@nx/devkit": "^19.8.2", - "@spectrum-tools/postcss-add-theming-layer": "workspace:^", - "@spectrum-tools/postcss-property-rollup": "workspace:^", - "@spectrum-tools/postcss-rgb-mapping": "workspace:^", + "@spectrum-tools/postcss-add-theming-layer": "^1.0.0", + "@spectrum-tools/postcss-property-rollup": "^0.0.0", + "@spectrum-tools/postcss-rgb-mapping": "^1.0.0", "@yarnpkg/types": "^4.0.0", "at-rule-packer": "^0.4.2", "autoprefixer": "^10.4.19", diff --git a/tokens/package.json b/tokens/package.json index e18cd9033b8..88769607f33 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "16.0.1", + "version": "14.0.0-next.0", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index a3d9ae1d9d0..2ebb930814b 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -58,7 +58,7 @@ "@spectrum-css/colorslider": "workspace:^", "@spectrum-css/colorwheel": "workspace:^", "@spectrum-css/combobox": "workspace:^", - "@spectrum-css/commons": "^11.0.0", + "@spectrum-css/commons": "workspace:^", "@spectrum-css/contextualhelp": "workspace:^", "@spectrum-css/datepicker": "workspace:^", "@spectrum-css/dial": "workspace:^", @@ -108,7 +108,7 @@ "@spectrum-css/textfield": "workspace:^", "@spectrum-css/thumbnail": "workspace:^", "@spectrum-css/toast": "workspace:^", - "@spectrum-css/tokens": "^16.0.0", + "@spectrum-css/tokens": "workspace:^", "@spectrum-css/tooltip": "workspace:^", "@spectrum-css/tray": "workspace:^", "@spectrum-css/treeview": "workspace:^", diff --git a/yarn.lock b/yarn.lock index 6cc41ceb8a1..3dec80506e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -123,9 +123,9 @@ __metadata: "@commitlint/cli": "npm:^19.6.1" "@commitlint/config-conventional": "npm:^19.6.0" "@nx/devkit": "npm:^19.8.2" - "@spectrum-tools/postcss-add-theming-layer": "workspace:^" - "@spectrum-tools/postcss-property-rollup": "workspace:^" - "@spectrum-tools/postcss-rgb-mapping": "workspace:^" + "@spectrum-tools/postcss-add-theming-layer": "npm:^1.0.0" + "@spectrum-tools/postcss-property-rollup": "npm:^0.0.0" + "@spectrum-tools/postcss-rgb-mapping": "npm:^1.0.0" "@yarnpkg/types": "npm:^4.0.0" at-rule-packer: "npm:^0.4.2" autoprefixer: "npm:^10.4.19" @@ -3711,10 +3711,10 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3731,13 +3731,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actiongroup": optional: true @@ -3758,10 +3758,10 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3775,10 +3775,10 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -3795,13 +3795,13 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -3824,13 +3824,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -3853,14 +3853,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: "@spectrum-css/buttongroup": @@ -3882,9 +3882,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -3896,10 +3896,10 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -3914,11 +3914,11 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -3933,9 +3933,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -3947,10 +3947,10 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3965,11 +3965,11 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4012,7 +4012,7 @@ __metadata: "@spectrum-css/colorslider": "workspace:^" "@spectrum-css/colorwheel": "workspace:^" "@spectrum-css/combobox": "workspace:^" - "@spectrum-css/commons": "npm:^11.0.0" + "@spectrum-css/commons": "workspace:^" "@spectrum-css/contextualhelp": "workspace:^" "@spectrum-css/datepicker": "workspace:^" "@spectrum-css/dial": "workspace:^" @@ -4062,7 +4062,7 @@ __metadata: "@spectrum-css/textfield": "workspace:^" "@spectrum-css/thumbnail": "workspace:^" "@spectrum-css/toast": "workspace:^" - "@spectrum-css/tokens": "npm:^16.0.0" + "@spectrum-css/tokens": "workspace:^" "@spectrum-css/tooltip": "workspace:^" "@spectrum-css/tray": "workspace:^" "@spectrum-css/treeview": "workspace:^" @@ -4082,11 +4082,11 @@ __metadata: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4102,10 +4102,10 @@ __metadata: resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -4119,10 +4119,10 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4139,7 +4139,7 @@ __metadata: "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" @@ -4147,7 +4147,7 @@ __metadata: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/quickaction": ">=3" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/typography": ">=8.0.0 <9.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4172,10 +4172,10 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4189,10 +4189,10 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4207,10 +4207,10 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4223,9 +4223,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4242,7 +4242,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" @@ -4250,7 +4250,7 @@ __metadata: "@spectrum-css/buttongroup": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4274,10 +4274,10 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/colorhandle": optional: true @@ -4292,11 +4292,11 @@ __metadata: dependencies: "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/colorloupe": optional: true @@ -4311,9 +4311,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4326,11 +4326,11 @@ __metadata: dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/colorhandle": optional: true @@ -4348,12 +4348,12 @@ __metadata: "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/colorarea": ">=7.0.0 <8.0.0" "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/colorarea": optional: true @@ -4375,14 +4375,14 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/menu": optional: true @@ -4399,13 +4399,13 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@npm:^11.0.0, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" dependencies: "@spectrum-css/tokens": "npm:^16.0.0" peerDependencies: - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" languageName: unknown linkType: soft @@ -4416,12 +4416,12 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4442,13 +4442,13 @@ __metadata: "@spectrum-css/pickerbutton": "npm:6.1.1" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/calendar": ">=7.0.0 <8.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/calendar": optional: true @@ -4467,9 +4467,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4484,13 +4484,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/closebutton": ">=5.0.0-next.0" + "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: "@spectrum-css/closebutton": @@ -4510,9 +4510,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4524,10 +4524,10 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4543,12 +4543,12 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4568,12 +4568,12 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/radio": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -4591,10 +4591,10 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4607,9 +4607,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4620,9 +4620,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4645,10 +4645,10 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4661,9 +4661,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4674,10 +4674,10 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/typography": ">=8" peerDependenciesMeta: "@spectrum-css/tokens": @@ -4692,10 +4692,10 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4710,11 +4710,11 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -4729,9 +4729,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4743,9 +4743,9 @@ __metadata: resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4760,14 +4760,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/tray": "npm:5.1.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/switch": ">=6.0.0 <7.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/tray": ">=5.0.0 <6.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": @@ -4790,10 +4790,10 @@ __metadata: resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: "@spectrum-css/progressbar": "npm:6.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/progressbar": optional: true @@ -4809,12 +4809,12 @@ __metadata: "@spectrum-css/assetlist": "npm:8.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" "@spectrum-css/checkbox": ">=10" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/assetlist": optional: true @@ -4832,9 +4832,9 @@ __metadata: resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4845,9 +4845,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4858,9 +4858,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4875,13 +4875,13 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4906,14 +4906,14 @@ __metadata: "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" "@spectrum-css/progresscircle": ">=5" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -4937,12 +4937,12 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4964,13 +4964,13 @@ __metadata: "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" "@spectrum-css/divider": ">=5" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/alertdialog": optional: true @@ -5034,10 +5034,10 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/fieldlabel": ">=10" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/fieldlabel": optional: true @@ -5050,9 +5050,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5064,10 +5064,10 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5081,10 +5081,10 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5100,12 +5100,12 @@ __metadata: "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/clearbutton": optional: true @@ -5123,10 +5123,10 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5140,10 +5140,10 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: "@spectrum-css/stepper": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/stepper": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/stepper": optional: true @@ -5156,9 +5156,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5169,9 +5169,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5183,11 +5183,11 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" "@spectrum-css/tooltip": "npm:7.1.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5207,13 +5207,13 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:6.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -5233,10 +5233,10 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/opacitycheckerboard": optional: true @@ -5250,10 +5250,10 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: "@spectrum-css/swatch": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/swatch": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/swatch": optional: true @@ -5266,9 +5266,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5283,13 +5283,13 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5311,12 +5311,12 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/picker": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5336,12 +5336,12 @@ __metadata: "@spectrum-css/avatar": "npm:9.1.0" "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/avatar": optional: true @@ -5359,10 +5359,10 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/tag": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tag": optional: true @@ -5376,10 +5376,10 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -5393,10 +5393,10 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/opacitycheckerboard": optional: true @@ -5412,17 +5412,14 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14" - "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true - "@spectrum-css/closebutton": - optional: true "@spectrum-css/icon": optional: true "@spectrum-css/tokens": @@ -5437,7 +5434,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@npm:^16.0.0, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:14.0.0-next.0, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5452,16 +5449,30 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/tokens@npm:16.0.1": + version: 16.0.1 + resolution: "@spectrum-css/tokens@npm:16.0.1" + checksum: 10c0/32bd3339e8f6bf2c35effe58ae3bf9ff4a4349fa778dcd12708c271fe358a94c6f353ecc3371515b4e6d84f9578ebf30b27f2e21761e84a0dce8b7aa1751c89f + languageName: node + linkType: hard + +"@spectrum-css/tokens@npm:^16.0.0": + version: 16.0.0 + resolution: "@spectrum-css/tokens@npm:16.0.0" + checksum: 10c0/f80225dc86ed51e2d6fed61c917b76439800fe1a192a476d6688bcf321ea48fe7f985bed483f3cd2f28ff244808c1cc6977a2e785d630b9c1db90dc0ba976633 + languageName: node + linkType: hard + "@spectrum-css/tooltip@npm:7.1.0, @spectrum-css/tooltip@workspace:^, @spectrum-css/tooltip@workspace:components/tooltip": version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5479,14 +5490,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" "@spectrum-css/divider": ">=5" "@spectrum-css/icon": ">=9" "@spectrum-css/modal": ">=7" - "@spectrum-css/tokens": ">=16" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5509,11 +5520,11 @@ __metadata: dependencies: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5528,9 +5539,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5553,9 +5564,9 @@ __metadata: resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5566,9 +5577,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/tokens": "npm:14.0.0-next.0" peerDependencies: - "@spectrum-css/tokens": ">=16.0.1" + "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5588,7 +5599,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-add-theming-layer@workspace:^, @spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": +"@spectrum-tools/postcss-add-theming-layer@npm:^1.0.0, @spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": version: 0.0.0-use.local resolution: "@spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer" dependencies: @@ -5602,7 +5613,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-property-rollup@workspace:^, @spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup": +"@spectrum-tools/postcss-property-rollup@npm:^0.0.0": + version: 0.0.0 + resolution: "@spectrum-tools/postcss-property-rollup@npm:0.0.0" + peerDependencies: + postcss: ">=8" + checksum: 10c0/78694d79964321ac6356e2d6b5d77af5172fdacc673d155df9a4352fec2e5ba732e99a699698cb0aaddcd2e4e4a84c8c760c06592b93f6441def1e0e3a23c9a8 + languageName: node + linkType: hard + +"@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup": version: 0.0.0-use.local resolution: "@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup" dependencies: @@ -5614,7 +5634,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-rgb-mapping@npm:1.0.0, @spectrum-tools/postcss-rgb-mapping@workspace:^, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": +"@spectrum-tools/postcss-rgb-mapping@npm:1.0.0, @spectrum-tools/postcss-rgb-mapping@npm:^1.0.0, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": version: 0.0.0-use.local resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" dependencies: From 92ece2d77a9fa5fc2a7dbe00ac2aaa2b4acfb2e5 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Tue, 12 Mar 2024 10:03:53 -0400 Subject: [PATCH 025/103] chore(tokens): manual version bump for 14.0.0-next.1 --- tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tokens/package.json b/tokens/package.json index 88769607f33..1da64b1fd08 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0-next.0", + "version": "14.0.0-next.1", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", From 12adde2a3c9b1f9296b68f9e9b1143008c4d9eb4 Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Tue, 12 Mar 2024 16:15:17 -0400 Subject: [PATCH 026/103] chore(release): release - @spectrum-css/preview@8.0.5-next.0 - @spectrum-css/accordion@4.2.7-next.0 - @spectrum-css/actionbar@7.2.5-next.0 - @spectrum-css/actionbutton@5.2.7-next.0 - @spectrum-css/actiongroup@5.0.0-next.1 - @spectrum-css/actionmenu@5.1.4-next.0 - @spectrum-css/alertbanner@1.1.42-next.0 - @spectrum-css/alertdialog@1.2.5-next.0 - @spectrum-css/asset@4.0.1-next.0 - @spectrum-css/assetcard@3.1.5-next.0 - @spectrum-css/assetlist@5.2.5-next.0 - @spectrum-css/avatar@6.1.6-next.0 - @spectrum-css/badge@3.2.6-next.0 - @spectrum-css/breadcrumb@8.2.6-next.0 - @spectrum-css/button@12.0.3-next.0 - @spectrum-css/buttongroup@7.0.0-next.1 - @spectrum-css/calendar@4.2.6-next.0 - @spectrum-css/card@7.0.3-next.0 - @spectrum-css/checkbox@8.1.6-next.0 - @spectrum-css/clearbutton@5.1.5-next.0 - @spectrum-css/closebutton@5.0.0-next.0 - @spectrum-css/coachindicator@1.1.6-next.0 - @spectrum-css/coachmark@6.1.6-next.0 - @spectrum-css/colorarea@4.1.6-next.0 - @spectrum-css/colorhandle@7.1.5-next.0 - @spectrum-css/colorloupe@4.2.5-next.0 - @spectrum-css/colorslider@5.1.6-next.0 - @spectrum-css/colorwheel@3.1.6-next.0 - @spectrum-css/combobox@2.1.7-next.0 - @spectrum-css/commons@9.1.3 - @spectrum-css/contextualhelp@2.1.6-next.0 - @spectrum-css/datepicker@2.1.5-next.0 - @spectrum-css/dial@2.2.5-next.0 - @spectrum-css/dialog@9.2.5-next.0 - @spectrum-css/divider@2.2.6-next.0 - @spectrum-css/dropindicator@4.1.5-next.0 - @spectrum-css/dropzone@5.2.6-next.0 - @spectrum-css/fieldgroup@4.2.5-next.0 - @spectrum-css/fieldlabel@8.0.0-next.0 - @spectrum-css/floatingactionbutton@1.2.6-next.0 - @spectrum-css/helptext@4.1.6-next.0 - @spectrum-css/icon@6.0.6-next.0 - @spectrum-css/illustratedmessage@6.1.6-next.0 - @spectrum-css/infieldbutton@4.2.5-next.0 - @spectrum-css/inlinealert@7.1.7-next.0 - @spectrum-css/link@4.2.6-next.0 - @spectrum-css/logicbutton@3.3.5-next.0 - @spectrum-css/menu@6.1.6-next.0 - @spectrum-css/miller@5.1.5-next.0 - @spectrum-css/modal@4.2.7-next.0 - @spectrum-css/opacitycheckerboard@1.1.6-next.0 - @spectrum-css/page@7.1.5-next.0 - @spectrum-css/pagination@7.1.7-next.0 - @spectrum-css/picker@7.2.8-next.0 - @spectrum-css/pickerbutton@4.1.6-next.0 - @spectrum-css/popover@6.2.6-next.0 - @spectrum-css/progressbar@3.1.6-next.0 - @spectrum-css/progresscircle@2.2.4-next.0 - @spectrum-css/radio@8.1.6-next.0 - @spectrum-css/rating@4.2.5-next.0 - @spectrum-css/search@6.2.5-next.0 - @spectrum-css/sidenav@4.2.5-next.0 - @spectrum-css/site@4.2.5-next.0 - @spectrum-css/slider@4.3.6-next.0 - @spectrum-css/splitview@4.2.5-next.0 - @spectrum-css/statuslight@6.1.7-next.0 - @spectrum-css/steplist@4.1.5-next.0 - @spectrum-css/stepper@5.1.6-next.0 - @spectrum-css/swatch@5.1.6-next.0 - @spectrum-css/swatchgroup@2.1.6-next.0 - @spectrum-css/switch@4.2.6-next.0 - @spectrum-css/table@5.2.6-next.0 - @spectrum-css/tabs@4.1.5-next.0 - @spectrum-css/tag@8.1.6-next.0 - @spectrum-css/taggroup@4.1.6-next.0 - @spectrum-css/textfield@6.1.7-next.0 - @spectrum-css/thumbnail@5.2.5-next.0 - @spectrum-css/toast@9.1.26-next.0 - @spectrum-css/tooltip@5.3.6-next.0 - @spectrum-css/tray@2.2.8-next.0 - @spectrum-css/treeview@9.2.7-next.0 - @spectrum-css/typography@5.1.6-next.0 - @spectrum-css/underlay@3.2.5-next.0 - @spectrum-css/well@4.1.5-next.0 - @spectrum-css/tokens@14.0.0-next.2 - @spectrum-css/bundle-builder@7.0.3-next.0 - @spectrum-css/component-builder-simple@5.0.6-next.0 - @spectrum-css/component-builder@7.0.3-next.0 --- .storybook/package.json | 4 +- components/accordion/package.json | 2 +- components/actionbar/package.json | 2 +- components/actionbutton/package.json | 2 +- components/actiongroup/package.json | 2 +- components/actionmenu/package.json | 2 +- components/alertbanner/package.json | 2 +- components/alertdialog/package.json | 2 +- components/asset/package.json | 2 +- components/assetcard/package.json | 2 +- components/assetlist/package.json | 2 +- components/avatar/package.json | 2 +- components/badge/package.json | 2 +- components/breadcrumb/package.json | 2 +- components/button/package.json | 2 +- components/buttongroup/package.json | 2 +- components/calendar/package.json | 2 +- components/card/package.json | 2 +- components/checkbox/package.json | 2 +- components/clearbutton/package.json | 2 +- components/closebutton/package.json | 2 +- components/coachindicator/package.json | 2 +- components/coachmark/package.json | 2 +- components/colorarea/package.json | 2 +- components/colorhandle/package.json | 2 +- components/colorloupe/package.json | 2 +- components/colorslider/package.json | 2 +- components/colorwheel/package.json | 2 +- components/combobox/package.json | 2 +- components/contextualhelp/package.json | 2 +- components/datepicker/package.json | 2 +- components/dial/package.json | 2 +- components/dialog/package.json | 2 +- components/divider/package.json | 2 +- components/dropindicator/package.json | 2 +- components/dropzone/package.json | 2 +- components/fieldgroup/package.json | 2 +- components/fieldlabel/package.json | 2 +- components/floatingactionbutton/package.json | 2 +- components/form/package.json | 2 +- components/helptext/package.json | 2 +- components/icon/package.json | 2 +- components/illustratedmessage/package.json | 2 +- components/infieldbutton/package.json | 2 +- components/inlinealert/package.json | 2 +- components/link/package.json | 2 +- components/logicbutton/package.json | 2 +- components/menu/package.json | 2 +- components/meter/package.json | 2 +- components/miller/package.json | 2 +- components/modal/package.json | 2 +- components/opacitycheckerboard/package.json | 2 +- components/page/package.json | 2 +- components/pagination/package.json | 2 +- components/picker/package.json | 2 +- components/pickerbutton/package.json | 2 +- components/popover/package.json | 2 +- components/progressbar/package.json | 2 +- components/progresscircle/package.json | 2 +- components/radio/package.json | 2 +- components/rating/package.json | 2 +- components/search/package.json | 2 +- components/sidenav/package.json | 2 +- components/slider/package.json | 2 +- components/splitview/package.json | 2 +- components/statuslight/package.json | 2 +- components/steplist/package.json | 2 +- components/stepper/package.json | 2 +- components/swatch/package.json | 2 +- components/swatchgroup/package.json | 2 +- components/switch/package.json | 2 +- components/table/package.json | 2 +- components/tabs/package.json | 2 +- components/tag/package.json | 2 +- components/taggroup/package.json | 2 +- components/textfield/package.json | 2 +- components/thumbnail/package.json | 2 +- components/toast/package.json | 2 +- components/tooltip/package.json | 2 +- components/tray/package.json | 2 +- components/treeview/package.json | 2 +- components/typography/package.json | 2 +- components/underlay/package.json | 2 +- components/well/package.json | 2 +- tokens/package.json | 2 +- yarn.lock | 181 +++++++++---------- 86 files changed, 173 insertions(+), 180 deletions(-) diff --git a/.storybook/package.json b/.storybook/package.json index bb968f27c62..ca59effec22 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -40,8 +40,8 @@ }, "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/bundle": "1.0.0", - "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/bundle": "workspace:^", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0", "@spectrum-css/ui-icons": "1.1.2" }, diff --git a/components/accordion/package.json b/components/accordion/package.json index 9084a0dc58f..f1c48f95bb6 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 303ad03e811..07a921819b9 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index a7cad51fa11..d9c852320b0 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -39,7 +39,7 @@ "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 60132757517..56c75bd832a 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index 8f25a4fd0ff..674ddf25aa5 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -36,7 +36,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 4b44345fc95..54a5573ae50 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index d18230f8da5..53fa444826b 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/asset/package.json b/components/asset/package.json index 160f43c239e..d622bf181bb 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 5985685aa7b..5a6c7f368c3 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 59e456d2eaf..8be39c588f2 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/avatar/package.json b/components/avatar/package.json index b801dbb2250..17a0f33297b 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/badge/package.json b/components/badge/package.json index 7b01b89f356..050aae6d286 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index 0e3d7b666c9..1ba7d94b075 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/button/package.json b/components/button/package.json index 4892309a5f1..40ca7e213a0 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -44,7 +44,7 @@ "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 4916540a557..0186ee056dc 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/calendar/package.json b/components/calendar/package.json index fe737d42648..b0778dd333d 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/card/package.json b/components/card/package.json index b0f2928c23c..194b0523f32 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -61,7 +61,7 @@ "@spectrum-css/asset": "7.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 28b51a69c56..7eaa72b9679 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index be51838bd68..1ead3194094 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 23c4e41e3a2..e807b74edb6 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -46,7 +46,7 @@ "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index b8d69fb3aa9..12911f37fcd 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 9105d87a923..9b1609a96aa 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -63,7 +63,7 @@ "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 52b516090b0..5f88b9f3050 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 1e752e5fa8d..a19be7aa228 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 5cc768b0366..c7aea1421f9 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/colorslider/package.json b/components/colorslider/package.json index bbef89e8eb2..7619f55b28a 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 8699c488924..add0bb339a8 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -48,7 +48,7 @@ "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/combobox/package.json b/components/combobox/package.json index 0c2cefa70fd..bb382fd5113 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -58,7 +58,7 @@ "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 6ee9a3a2fd0..97195a41b0b 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/link": "7.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index 2810b578d70..a07b167e291 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -53,7 +53,7 @@ "@spectrum-css/pickerbutton": "6.1.1", "@spectrum-css/popover": "8.2.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/dial/package.json b/components/dial/package.json index a2897ce9fb5..533d4079e0b 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index e27bab7c086..92c48a30052 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/divider/package.json b/components/divider/package.json index 94f53c6956c..19e9fede560 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index d40acd9e53d..c31fb05ccee 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index bfeccb43aa7..67d5d400826 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index 64a6900987a..c2df1b5a463 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -48,7 +48,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index eed003e74d6..34d99d46635 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 57e39350da8..69b892612d6 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/form/package.json b/components/form/package.json index 1ed0cc02b0b..7a936ecd2cd 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/helptext/package.json b/components/helptext/package.json index c3907bf2b3f..912de3f9ba5 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/icon/package.json b/components/icon/package.json index f3217684add..1074510be42 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 5f358c57dc4..f98c6cd8215 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -29,7 +29,7 @@ "@spectrum-css/typography": ">=8" }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 760837f7759..0e7b8ad5e8e 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index b8ebd8f00ea..2bb785b7c85 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/link/package.json b/components/link/package.json index 0622f123d67..b5db4b73289 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 267864e1e88..a306369c2a7 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/menu/package.json b/components/menu/package.json index a4c2167af03..ef0122f84bb 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/tray": "5.1.0" }, "keywords": [ diff --git a/components/meter/package.json b/components/meter/package.json index 83da7e3cd17..8b92324134f 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/miller/package.json b/components/miller/package.json index 889f2199011..ab24adfbb53 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -34,7 +34,7 @@ "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/modal/package.json b/components/modal/package.json index 630db609431..9764f9df239 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 54d8ea85f24..151dc48ec06 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/page/package.json b/components/page/package.json index bf980e91962..c0f9d6c75a3 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/pagination/package.json b/components/pagination/package.json index c6477b26361..e6f2e36f830 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -53,7 +53,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index 4a3dd66e03d..fdc05c67d63 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -59,7 +59,7 @@ "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 57f0c9ef593..565268ba0ed 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -34,7 +34,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/popover/package.json b/components/popover/package.json index 0f9657d97ff..3b3e9b15383 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -54,7 +54,7 @@ "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 044d14646d7..e4d44b372d6 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index f3a03b2018b..8edca7bef45 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/radio/package.json b/components/radio/package.json index 1042e881941..a5257672d2d 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/rating/package.json b/components/rating/package.json index 6a3dfd41751..44f5a6a4a94 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/search/package.json b/components/search/package.json index 6c4f5fb9f90..1623b142487 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -48,7 +48,7 @@ "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 8ce1fd29718..4c3bbacd30e 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/slider/package.json b/components/slider/package.json index 14a27b8b87d..6c545fc6224 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/stepper": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/splitview/package.json b/components/splitview/package.json index 0d309677ad7..52b779ff354 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/statuslight/package.json b/components/statuslight/package.json index 6350df8545c..3d81f9ba605 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/steplist/package.json b/components/steplist/package.json index 9ddaf60927b..51dadf21ea4 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0", + "@spectrum-css/tokens": "14.0.0-next.2", "@spectrum-css/tooltip": "7.1.0" }, "keywords": [ diff --git a/components/stepper/package.json b/components/stepper/package.json index 5287dc1fa0e..0682d933ea8 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -53,7 +53,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/infieldbutton": "6.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/swatch/package.json b/components/swatch/package.json index 5c99dd1060f..8abdfdb6ebe 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 0b749b4f297..c945fac13b7 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/switch/package.json b/components/switch/package.json index 80c173bdd98..2a3c51137c9 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/table/package.json b/components/table/package.json index dd00ea18be7..cca36303d5c 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -53,7 +53,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/tabs/package.json b/components/tabs/package.json index 8a67dc71e3d..68348dc9e79 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -48,7 +48,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/picker": "9.1.1", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/tag/package.json b/components/tag/package.json index a5cf597b95c..ba5340ff27b 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -48,7 +48,7 @@ "@spectrum-css/avatar": "9.1.0", "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index aab9413ebfa..f2abde3d677 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/tag": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/textfield/package.json b/components/textfield/package.json index 850c6445df5..694528edcda 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index 3ae92fe526e..f9a48f641c7 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/toast/package.json b/components/toast/package.json index efbac229e77..fb53fb28dc0 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -33,7 +33,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 5eb2ef487c2..3bce06a1a2c 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -31,7 +31,7 @@ "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/tray/package.json b/components/tray/package.json index db7ac49ed3d..397d1fad009 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -58,7 +58,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/treeview/package.json b/components/treeview/package.json index a062d1bdc49..09d07736152 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/typography/package.json b/components/typography/package.json index 8d5b530d9f8..be2d1f23b66 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/underlay/package.json b/components/underlay/package.json index 1e0f8640105..508b9b56398 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/well/package.json b/components/well/package.json index 1a7ae26ddfb..1ea2eea9180 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.0" + "@spectrum-css/tokens": "14.0.0-next.2" }, "keywords": [ "design-system", diff --git a/tokens/package.json b/tokens/package.json index 1da64b1fd08..1091e09c1aa 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0-next.1", + "version": "14.0.0-next.2", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", diff --git a/yarn.lock b/yarn.lock index 3dec80506e5..9699711583b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3711,7 +3711,7 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3731,7 +3731,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3758,7 +3758,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3775,7 +3775,7 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3795,7 +3795,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3824,7 +3824,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3853,7 +3853,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" @@ -3882,7 +3882,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3896,7 +3896,7 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3914,7 +3914,7 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3933,7 +3933,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3947,7 +3947,7 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3965,7 +3965,7 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3980,7 +3980,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/bundle@npm:1.0.0, @spectrum-css/bundle@workspace:tools/bundle": +"@spectrum-css/bundle@workspace:^, @spectrum-css/bundle@workspace:tools/bundle": version: 0.0.0-use.local resolution: "@spectrum-css/bundle@workspace:tools/bundle" dependencies: @@ -4082,7 +4082,7 @@ __metadata: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" @@ -4102,7 +4102,7 @@ __metadata: resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4119,7 +4119,7 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4139,7 +4139,7 @@ __metadata: "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" @@ -4172,7 +4172,7 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4189,7 +4189,7 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4207,7 +4207,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4223,7 +4223,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4242,7 +4242,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" @@ -4274,7 +4274,7 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4292,7 +4292,7 @@ __metadata: dependencies: "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4311,7 +4311,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4326,7 +4326,7 @@ __metadata: dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4348,7 +4348,7 @@ __metadata: "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/colorarea": ">=7.0.0 <8.0.0" "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" @@ -4375,7 +4375,7 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4416,7 +4416,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" @@ -4442,7 +4442,7 @@ __metadata: "@spectrum-css/pickerbutton": "npm:6.1.1" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/calendar": ">=7.0.0 <8.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4467,7 +4467,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4484,7 +4484,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" @@ -4510,7 +4510,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4524,7 +4524,7 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4543,7 +4543,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" @@ -4568,7 +4568,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/helptext": ">=7.0.0 <8.0.0" @@ -4591,7 +4591,7 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4607,7 +4607,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4620,7 +4620,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4645,7 +4645,7 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4661,7 +4661,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4674,7 +4674,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4692,7 +4692,7 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4710,7 +4710,7 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -4729,7 +4729,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4743,7 +4743,7 @@ __metadata: resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4760,7 +4760,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/tray": "npm:5.1.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -4790,7 +4790,7 @@ __metadata: resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: "@spectrum-css/progressbar": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4809,7 +4809,7 @@ __metadata: "@spectrum-css/assetlist": "npm:8.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" "@spectrum-css/checkbox": ">=10" @@ -4832,7 +4832,7 @@ __metadata: resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4845,7 +4845,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4858,7 +4858,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4875,7 +4875,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/button": ">=14.0.0 <15.0.0" @@ -4906,7 +4906,7 @@ __metadata: "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" @@ -4937,7 +4937,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -4964,7 +4964,7 @@ __metadata: "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -4993,8 +4993,8 @@ __metadata: "@babel/core": "npm:^7.26.0" "@chromatic-com/storybook": "npm:^3.2.3" "@etchteam/storybook-addon-status": "npm:^5.0.0" - "@spectrum-css/bundle": "npm:1.0.0" - "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/bundle": "workspace:^" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0" "@spectrum-css/ui-icons": "npm:1.1.2" "@storybook/addon-a11y": "npm:^8.4.7" @@ -5034,7 +5034,7 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/fieldlabel": ">=10" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5050,7 +5050,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5064,7 +5064,7 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5081,7 +5081,7 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5100,7 +5100,7 @@ __metadata: "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5123,7 +5123,7 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5140,7 +5140,7 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: "@spectrum-css/stepper": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/stepper": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5156,7 +5156,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5169,7 +5169,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5183,7 +5183,7 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" "@spectrum-css/tooltip": "npm:7.1.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5207,7 +5207,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:6.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5233,7 +5233,7 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5250,7 +5250,7 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: "@spectrum-css/swatch": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/swatch": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5266,7 +5266,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5283,7 +5283,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -5311,7 +5311,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -5336,7 +5336,7 @@ __metadata: "@spectrum-css/avatar": "npm:9.1.0" "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" @@ -5359,7 +5359,7 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tag": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5376,7 +5376,7 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5393,7 +5393,7 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5412,7 +5412,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -5434,7 +5434,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.0.0-next.0, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:14.0.0-next.2, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5449,13 +5449,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tokens@npm:16.0.1": - version: 16.0.1 - resolution: "@spectrum-css/tokens@npm:16.0.1" - checksum: 10c0/32bd3339e8f6bf2c35effe58ae3bf9ff4a4349fa778dcd12708c271fe358a94c6f353ecc3371515b4e6d84f9578ebf30b27f2e21761e84a0dce8b7aa1751c89f - languageName: node - linkType: hard - "@spectrum-css/tokens@npm:^16.0.0": version: 16.0.0 resolution: "@spectrum-css/tokens@npm:16.0.0" @@ -5469,7 +5462,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5490,7 +5483,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -5520,7 +5513,7 @@ __metadata: dependencies: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" @@ -5539,7 +5532,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5564,7 +5557,7 @@ __metadata: resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5577,7 +5570,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.2" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: From c20f1c6cf3c3f16f0e051940a3f2137e60fcc02e Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Tue, 19 Mar 2024 14:27:52 -0400 Subject: [PATCH 027/103] feat(downstate): docs + implementation for example components (#2520) * feat(downstate): docs + implementation for example components * docs: update mdx * docs: reorg, stories live within foundations * docs: decorator for down state dimension tokens * docs: fix mdx hierarchy console error * fix: small iconOnly button gets min perspective * docs: use markdown, update language * fix: disabled, readonly checkbox doesnt have down state * chore(button,checkbox): update package versions --- .storybook/decorators/down-state.js | 19 ++++++++ .storybook/decorators/index.js | 1 + .../down-state/button-down-state.stories.js | 32 ++++++++++++++ .../down-state/checkbox-down-state.stories.js | 27 ++++++++++++ .../foundations/down-state/down-state.mdx | 44 +++++++++++++++++++ .storybook/main.js | 5 +++ .storybook/manager.js | 3 ++ .storybook/preview.js | 2 + components/button/dist/metadata.json | 6 +++ components/button/index.css | 9 ++++ components/button/stories/button.stories.js | 5 ++- components/checkbox/dist/metadata.json | 5 ++- components/checkbox/index.css | 11 +++++ 13 files changed, 167 insertions(+), 2 deletions(-) create mode 100644 .storybook/decorators/down-state.js create mode 100644 .storybook/foundations/down-state/button-down-state.stories.js create mode 100644 .storybook/foundations/down-state/checkbox-down-state.stories.js create mode 100644 .storybook/foundations/down-state/down-state.mdx diff --git a/.storybook/decorators/down-state.js b/.storybook/decorators/down-state.js new file mode 100644 index 00000000000..616852d34ce --- /dev/null +++ b/.storybook/decorators/down-state.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/decorators/index.js b/.storybook/decorators/index.js index 059919173ba..f44d173b22a 100644 --- a/.storybook/decorators/index.js +++ b/.storybook/decorators/index.js @@ -13,6 +13,7 @@ export { withArgEvents } from "./arg-events.js"; export { withContextWrapper } from "./context.js"; +export { withDownStateDimensionCapture } from "./down-state.js"; export { withIconSpriteSheet } from "./icon-sprites.js"; export { withLanguageWrapper } from "./language.js"; export { withReducedMotionWrapper } from "./reduce-motion.js"; 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..d5c07618b83 --- /dev/null +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -0,0 +1,32 @@ +import { Template } from "../../../components/button/stories/template.js"; + +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'], + }, + status: { + type: process.env.MIGRATED_PACKAGES.includes("button") + ? "migrated" + : undefined, + }, + }, + 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..889c4fe4ce4 --- /dev/null +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -0,0 +1,27 @@ +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"]'], + }, + status: { + type: process.env.MIGRATED_PACKAGES.includes("checkbox") + ? "migrated" + : undefined, + }, + }, + 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..5933bff7604 --- /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'; + + + +# 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: + + + +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: + + + +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 6b0d640c7f6..b954fa71535 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -20,6 +20,11 @@ export default { files: "*.@(stories.js|mdx)", titlePrefix: "Guides", }, + { + directory: "./foundations", + files: "*/*.mdx", + titlePrefix: "Foundations", + }, { directory: "./deprecated", files: "**/*.@(stories.js|mdx)", diff --git a/.storybook/manager.js b/.storybook/manager.js index 53b86a56602..82598b04ffb 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -64,5 +64,8 @@ addons.setConfig({ }), sidebar: { showRoots: false, + filters: { + patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')), + } }, }); diff --git a/.storybook/preview.js b/.storybook/preview.js index ff243044967..232b980ebfa 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -32,6 +32,8 @@ export const parameters = { order: [ "Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], + "Foundations", + ["*"], "Components", ["*", ["Docs", "Default", "*"]], "Deprecated", diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index fcfb7620378..a8fb60a475d 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -202,6 +202,9 @@ "--spectrum-component-pill-edge-to-visual-only-200", "--spectrum-component-pill-edge-to-visual-only-300", "--spectrum-component-pill-edge-to-visual-only-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-top-to-workflow-icon-100", "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", @@ -215,6 +218,9 @@ "--spectrum-disabled-static-white-background-color", "--spectrum-disabled-static-white-border-color", "--spectrum-disabled-static-white-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-perspective", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", diff --git a/components/button/index.css b/components/button/index.css index bea80baa424..dd74678f4be 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -186,6 +186,13 @@ } } } + + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */ + --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + + &.spectrum-Button--iconOnly { + --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + } } .spectrum-Button--sizeS { @@ -591,6 +598,8 @@ border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); color: var(--spectrum-button-content-color-down); box-shadow: none; + + transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:hover, diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 0dbefb09f65..829e5c16819 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -1,5 +1,5 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -92,6 +92,9 @@ export default { packageJson, metadata, }, + decorators: [ + withDownStateDimensionCapture('.spectrum-Button:not(:disabled)') + ], tags: ["!autodocs"], }; diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 0cf77653159..c0267b38d57 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -77,7 +77,8 @@ ".spectrum-Checkbox:active .spectrum-Checkbox-label", ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-label" + ".spectrum-Checkbox:hover .spectrum-Checkbox-label", + ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box" ], "modifiers": [ "--mod-checkbox-animation-duration", @@ -175,6 +176,8 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index cf4bb5783fb..40a8383d2f3 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -31,6 +31,11 @@ --spectrum-checkbox-content-color-down: var(--spectrum-neutral-content-color-down); --spectrum-checkbox-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); + --spectrum-checkbox-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); @@ -147,6 +152,12 @@ } } + &: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, From 679beae7582b98c2b63d8ff50d0fa0723d4e569b Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Thu, 21 Mar 2024 09:53:35 -0400 Subject: [PATCH 028/103] chore(release): release - @spectrum-css/preview@8.1.0-next.0 - @spectrum-css/accordion@4.2.7-next.1 - @spectrum-css/actionbar@7.2.5-next.1 - @spectrum-css/actionbutton@5.2.7-next.1 - @spectrum-css/actiongroup@5.0.0-next.2 - @spectrum-css/actionmenu@5.1.4-next.1 - @spectrum-css/alertbanner@1.1.42-next.1 - @spectrum-css/alertdialog@1.2.5-next.1 - @spectrum-css/asset@4.0.1-next.1 - @spectrum-css/assetcard@3.1.5-next.1 - @spectrum-css/assetlist@5.2.5-next.1 - @spectrum-css/avatar@6.1.6-next.1 - @spectrum-css/badge@3.2.6-next.1 - @spectrum-css/breadcrumb@8.2.6-next.1 - @spectrum-css/button@14.0.0-next.3 - @spectrum-css/buttongroup@7.0.0-next.2 - @spectrum-css/calendar@4.2.6-next.1 - @spectrum-css/card@7.0.3-next.1 - @spectrum-css/checkbox@14.0.0-next.3 - @spectrum-css/clearbutton@5.1.5-next.1 - @spectrum-css/closebutton@5.0.0-next.1 - @spectrum-css/coachindicator@1.1.6-next.1 - @spectrum-css/coachmark@6.1.6-next.1 - @spectrum-css/colorarea@4.1.6-next.1 - @spectrum-css/colorhandle@7.1.5-next.1 - @spectrum-css/colorloupe@4.2.5-next.1 - @spectrum-css/colorslider@5.1.6-next.1 - @spectrum-css/colorwheel@3.1.6-next.1 - @spectrum-css/combobox@2.1.7-next.1 - @spectrum-css/commons@9.1.4-next.0 - @spectrum-css/contextualhelp@2.1.6-next.1 - @spectrum-css/datepicker@2.1.5-next.1 - @spectrum-css/dial@2.2.5-next.1 - @spectrum-css/dialog@9.2.5-next.1 - @spectrum-css/divider@2.2.6-next.1 - @spectrum-css/dropindicator@4.1.5-next.1 - @spectrum-css/dropzone@5.2.6-next.1 - @spectrum-css/fieldgroup@4.2.5-next.1 - @spectrum-css/fieldlabel@8.0.0-next.1 - @spectrum-css/floatingactionbutton@1.2.6-next.1 - @spectrum-css/helptext@4.1.6-next.1 - @spectrum-css/icon@6.0.6-next.1 - @spectrum-css/illustratedmessage@6.1.6-next.1 - @spectrum-css/infieldbutton@4.2.5-next.1 - @spectrum-css/inlinealert@7.1.7-next.1 - @spectrum-css/link@4.2.6-next.1 - @spectrum-css/logicbutton@3.3.5-next.1 - @spectrum-css/menu@6.1.6-next.1 - @spectrum-css/miller@5.1.5-next.1 - @spectrum-css/modal@4.2.7-next.1 - @spectrum-css/opacitycheckerboard@1.1.6-next.1 - @spectrum-css/page@7.1.5-next.1 - @spectrum-css/pagination@7.1.7-next.1 - @spectrum-css/picker@7.2.8-next.1 - @spectrum-css/pickerbutton@4.1.6-next.1 - @spectrum-css/popover@6.2.6-next.1 - @spectrum-css/progressbar@3.1.6-next.1 - @spectrum-css/progresscircle@2.2.4-next.1 - @spectrum-css/radio@8.1.6-next.1 - @spectrum-css/rating@4.2.5-next.1 - @spectrum-css/search@6.2.5-next.1 - @spectrum-css/sidenav@4.2.5-next.1 - @spectrum-css/site@4.2.5-next.1 - @spectrum-css/slider@4.3.6-next.1 - @spectrum-css/splitview@4.2.5-next.1 - @spectrum-css/statuslight@6.1.7-next.1 - @spectrum-css/steplist@4.1.5-next.1 - @spectrum-css/stepper@5.1.6-next.1 - @spectrum-css/swatch@5.1.6-next.1 - @spectrum-css/swatchgroup@2.1.6-next.1 - @spectrum-css/switch@4.2.6-next.1 - @spectrum-css/table@5.2.6-next.1 - @spectrum-css/tabs@4.1.5-next.1 - @spectrum-css/tag@8.1.6-next.1 - @spectrum-css/taggroup@4.1.6-next.1 - @spectrum-css/textfield@6.1.7-next.1 - @spectrum-css/thumbnail@5.2.5-next.1 - @spectrum-css/toast@9.1.26-next.1 - @spectrum-css/tooltip@5.3.6-next.1 - @spectrum-css/tray@2.2.8-next.1 - @spectrum-css/treeview@9.2.7-next.1 - @spectrum-css/typography@5.1.6-next.1 - @spectrum-css/underlay@3.2.5-next.1 - @spectrum-css/well@4.1.5-next.1 - @spectrum-css/tokens@14.0.0-next.3 - @spectrum-css/bundle-builder@7.0.3-next.1 - @spectrum-css/component-builder-simple@5.0.6-next.1 - @spectrum-css/component-builder@7.0.3-next.1 --- components/accordion/package.json | 2 +- components/actionbar/package.json | 2 +- components/actionbutton/package.json | 4 +- components/actiongroup/package.json | 2 +- components/actionmenu/package.json | 2 +- components/alertbanner/package.json | 2 +- components/alertdialog/package.json | 2 +- components/asset/package.json | 2 +- components/assetcard/package.json | 2 +- components/assetlist/package.json | 2 +- components/avatar/package.json | 2 +- components/badge/package.json | 2 +- components/breadcrumb/package.json | 2 +- components/button/package.json | 4 +- components/buttongroup/package.json | 2 +- components/calendar/package.json | 2 +- components/card/package.json | 2 +- components/checkbox/package.json | 2 +- components/clearbutton/package.json | 2 +- components/closebutton/package.json | 4 +- components/coachindicator/package.json | 2 +- components/coachmark/package.json | 2 +- components/colorarea/package.json | 2 +- components/colorhandle/package.json | 2 +- components/colorloupe/package.json | 2 +- components/colorslider/package.json | 2 +- components/colorwheel/package.json | 2 +- components/combobox/package.json | 2 +- components/commons/package.json | 2 +- components/contextualhelp/package.json | 2 +- components/datepicker/package.json | 2 +- components/dial/package.json | 2 +- components/dialog/package.json | 2 +- components/divider/package.json | 2 +- components/dropindicator/package.json | 2 +- components/dropzone/package.json | 2 +- components/fieldgroup/package.json | 2 +- components/fieldlabel/package.json | 2 +- components/floatingactionbutton/package.json | 2 +- components/form/package.json | 2 +- components/helptext/package.json | 2 +- components/icon/package.json | 2 +- components/illustratedmessage/package.json | 2 +- components/infieldbutton/package.json | 2 +- components/inlinealert/package.json | 2 +- components/link/package.json | 2 +- components/logicbutton/package.json | 4 +- components/menu/package.json | 2 +- components/meter/package.json | 2 +- components/miller/package.json | 2 +- components/modal/package.json | 4 +- components/opacitycheckerboard/package.json | 2 +- components/page/package.json | 2 +- components/pagination/package.json | 2 +- components/picker/package.json | 4 +- components/pickerbutton/package.json | 2 +- components/popover/package.json | 4 +- components/progressbar/package.json | 2 +- components/progresscircle/package.json | 2 +- components/radio/package.json | 2 +- components/rating/package.json | 2 +- components/search/package.json | 2 +- components/sidenav/package.json | 2 +- components/slider/package.json | 2 +- components/splitview/package.json | 2 +- components/statuslight/package.json | 2 +- components/steplist/package.json | 2 +- components/stepper/package.json | 2 +- components/swatch/package.json | 2 +- components/swatchgroup/package.json | 2 +- components/switch/package.json | 2 +- components/table/package.json | 2 +- components/tabs/package.json | 2 +- components/tag/package.json | 2 +- components/taggroup/package.json | 2 +- components/textfield/package.json | 2 +- components/thumbnail/package.json | 2 +- components/toast/package.json | 2 +- components/tooltip/package.json | 4 +- components/tray/package.json | 2 +- components/treeview/package.json | 2 +- components/typography/package.json | 2 +- components/underlay/package.json | 4 +- components/well/package.json | 2 +- tokens/package.json | 2 +- yarn.lock | 195 ++++++++++--------- 86 files changed, 195 insertions(+), 188 deletions(-) diff --git a/components/accordion/package.json b/components/accordion/package.json index f1c48f95bb6..0e9a4afc178 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 07a921819b9..e56df323227 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index d9c852320b0..0e3539e9d77 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -37,9 +37,9 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 56c75bd832a..c49e554f293 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index 674ddf25aa5..9c752d24c6f 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -36,7 +36,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 54a5573ae50..2868447d3ee 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 53fa444826b..fccff2744ca 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/asset/package.json b/components/asset/package.json index d622bf181bb..95dc9a2be60 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 5a6c7f368c3..e2f03f42883 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 8be39c588f2..82492c0af9e 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/avatar/package.json b/components/avatar/package.json index 17a0f33297b..37ee746ae33 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/badge/package.json b/components/badge/package.json index 050aae6d286..fbe15e99d53 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index 1ba7d94b075..4eb2be6ec91 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/button/package.json b/components/button/package.json index 40ca7e213a0..6c0dcbaf4be 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -41,10 +41,10 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 0186ee056dc..ee3f749aef1 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/calendar/package.json b/components/calendar/package.json index b0778dd333d..6ee17fefe96 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/card/package.json b/components/card/package.json index 194b0523f32..2eef42e2b65 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -61,7 +61,7 @@ "@spectrum-css/asset": "7.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 7eaa72b9679..226086b9364 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 1ead3194094..9210bd36d2e 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/closebutton/package.json b/components/closebutton/package.json index e807b74edb6..18d9949cc81 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -44,9 +44,9 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 12911f37fcd..bd25e6a4902 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 9b1609a96aa..4a80ffe4a67 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -63,7 +63,7 @@ "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 5f88b9f3050..6b99f94ad5e 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index a19be7aa228..febb3d45339 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index c7aea1421f9..0227a4b5270 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/colorslider/package.json b/components/colorslider/package.json index 7619f55b28a..28d374e4849 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index add0bb339a8..5f7187e08be 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -48,7 +48,7 @@ "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/combobox/package.json b/components/combobox/package.json index bb382fd5113..fadd3ed5ec1 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -58,7 +58,7 @@ "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/commons/package.json b/components/commons/package.json index 71d24a64af0..c75d5c6bb24 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/commons", - "version": "11.0.0", + "version": "9.1.4-next.0", "description": "Common mixins for Spectrum CSS components", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 97195a41b0b..0b2dfb9c98c 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/link": "7.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index a07b167e291..b4c40953a65 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -53,7 +53,7 @@ "@spectrum-css/pickerbutton": "6.1.1", "@spectrum-css/popover": "8.2.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/dial/package.json b/components/dial/package.json index 533d4079e0b..eadd2eeac7a 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index 92c48a30052..b1266a30764 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/divider/package.json b/components/divider/package.json index 19e9fede560..a23e2f4e539 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index c31fb05ccee..e188a30818d 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index 67d5d400826..cff9a0fed05 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index c2df1b5a463..6e1975bdd79 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -48,7 +48,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 34d99d46635..c6c7740d9f6 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 69b892612d6..359dd9ce73a 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/form/package.json b/components/form/package.json index 7a936ecd2cd..7c9bd2084d3 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/helptext/package.json b/components/helptext/package.json index 912de3f9ba5..dcaf5281fc0 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/icon/package.json b/components/icon/package.json index 1074510be42..8031cc3ee85 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index f98c6cd8215..4a3b0efcf7d 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -29,7 +29,7 @@ "@spectrum-css/typography": ">=8" }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 0e7b8ad5e8e..e1c9d0e5a6b 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 2bb785b7c85..11496b81133 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/link/package.json b/components/link/package.json index b5db4b73289..0e89c0a77db 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index a306369c2a7..de3ae13739a 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -28,8 +28,8 @@ "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/menu/package.json b/components/menu/package.json index ef0122f84bb..26999ebeb07 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/tray": "5.1.0" }, "keywords": [ diff --git a/components/meter/package.json b/components/meter/package.json index 8b92324134f..a34774a795a 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/miller/package.json b/components/miller/package.json index ab24adfbb53..497d4502dc4 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -34,7 +34,7 @@ "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/modal/package.json b/components/modal/package.json index 9764f9df239..7cfeab99b3c 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -28,8 +28,8 @@ "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 151dc48ec06..17acb1eb8e1 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/page/package.json b/components/page/package.json index c0f9d6c75a3..28bd15e9a8b 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/pagination/package.json b/components/pagination/package.json index e6f2e36f830..ef0c7ea434d 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -53,7 +53,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index fdc05c67d63..f7f46691385 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -53,13 +53,13 @@ } }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 565268ba0ed..ce9910f381a 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -34,7 +34,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/popover/package.json b/components/popover/package.json index 3b3e9b15383..57f72bc3b31 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -50,11 +50,11 @@ }, "devDependencies": { "@spectrum-css/alertdialog": "4.1.0", - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index e4d44b372d6..31c53200f95 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index 8edca7bef45..1e7d1053e3e 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/radio/package.json b/components/radio/package.json index a5257672d2d..a1fa4304456 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/rating/package.json b/components/rating/package.json index 44f5a6a4a94..21f7770ab7e 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/search/package.json b/components/search/package.json index 1623b142487..861cdbb33ac 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -48,7 +48,7 @@ "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 4c3bbacd30e..b75f75fb706 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/slider/package.json b/components/slider/package.json index 6c545fc6224..4ab950c880f 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/stepper": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/splitview/package.json b/components/splitview/package.json index 52b779ff354..2230c334adf 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/statuslight/package.json b/components/statuslight/package.json index 3d81f9ba605..cae71c04c08 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/steplist/package.json b/components/steplist/package.json index 51dadf21ea4..6f717301d44 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/tokens": "14.0.0-next.3", "@spectrum-css/tooltip": "7.1.0" }, "keywords": [ diff --git a/components/stepper/package.json b/components/stepper/package.json index 0682d933ea8..a200b6e1606 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -53,7 +53,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/infieldbutton": "6.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/swatch/package.json b/components/swatch/package.json index 8abdfdb6ebe..135d32e96fc 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index c945fac13b7..3d83d5d940a 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/switch/package.json b/components/switch/package.json index 2a3c51137c9..a7df5508102 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/table/package.json b/components/table/package.json index cca36303d5c..5f5b4753d26 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -53,7 +53,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/tabs/package.json b/components/tabs/package.json index 68348dc9e79..bc98834b264 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -48,7 +48,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/picker": "9.1.1", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/tag/package.json b/components/tag/package.json index ba5340ff27b..8df834e5b07 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -48,7 +48,7 @@ "@spectrum-css/avatar": "9.1.0", "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index f2abde3d677..689ae34d8f6 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/tag": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/textfield/package.json b/components/textfield/package.json index 694528edcda..1b0d9b4ca0b 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index f9a48f641c7..ce3dfc3a652 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/toast/package.json b/components/toast/package.json index fb53fb28dc0..3e848a2360e 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -33,7 +33,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 3bce06a1a2c..0c9b710ddcd 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -29,9 +29,9 @@ "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", + "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/tray/package.json b/components/tray/package.json index 397d1fad009..ff910639922 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -58,7 +58,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/treeview/package.json b/components/treeview/package.json index 09d07736152..cbce89bc763 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/typography/package.json b/components/typography/package.json index be2d1f23b66..5d14692c12e 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/underlay/package.json b/components/underlay/package.json index 508b9b56398..8e3c3248e38 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -28,8 +28,8 @@ "@spectrum-css/tokens": ">=14.0.0-next.0" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/components/well/package.json b/components/well/package.json index 1ea2eea9180..470e5c350eb 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.2" + "@spectrum-css/tokens": "14.0.0-next.3" }, "keywords": [ "design-system", diff --git a/tokens/package.json b/tokens/package.json index 1091e09c1aa..6ba5c6133aa 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0-next.2", + "version": "14.0.0-next.3", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", diff --git a/yarn.lock b/yarn.lock index 9699711583b..bb064d07226 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3711,7 +3711,7 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3731,7 +3731,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3756,9 +3756,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton" dependencies: - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3775,7 +3775,7 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3795,7 +3795,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3824,7 +3824,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3853,7 +3853,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" @@ -3882,7 +3882,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3896,7 +3896,7 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3914,7 +3914,7 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3933,7 +3933,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3947,7 +3947,7 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3965,7 +3965,7 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -4079,10 +4079,10 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" dependencies: - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" @@ -4102,7 +4102,7 @@ __metadata: resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4119,7 +4119,7 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4139,7 +4139,7 @@ __metadata: "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" @@ -4172,7 +4172,7 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4189,7 +4189,7 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4205,9 +4205,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4223,7 +4223,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4242,7 +4242,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" @@ -4274,7 +4274,7 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4292,7 +4292,7 @@ __metadata: dependencies: "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4311,7 +4311,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4326,7 +4326,7 @@ __metadata: dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4348,7 +4348,7 @@ __metadata: "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/colorarea": ">=7.0.0 <8.0.0" "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" @@ -4375,7 +4375,7 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4399,7 +4399,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:9.1.4-next.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" dependencies: @@ -4416,7 +4416,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" @@ -4442,7 +4442,7 @@ __metadata: "@spectrum-css/pickerbutton": "npm:6.1.1" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/calendar": ">=7.0.0 <8.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4467,7 +4467,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4484,7 +4484,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" @@ -4510,7 +4510,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4524,7 +4524,7 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4543,7 +4543,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" @@ -4568,7 +4568,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/helptext": ">=7.0.0 <8.0.0" @@ -4591,7 +4591,7 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4607,7 +4607,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4620,7 +4620,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4645,7 +4645,7 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4661,7 +4661,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4674,7 +4674,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4692,7 +4692,7 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4710,7 +4710,7 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -4729,7 +4729,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4742,8 +4742,8 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: - "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4760,7 +4760,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/tray": "npm:5.1.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -4790,7 +4790,7 @@ __metadata: resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: "@spectrum-css/progressbar": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4809,7 +4809,7 @@ __metadata: "@spectrum-css/assetlist": "npm:8.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" "@spectrum-css/checkbox": ">=10" @@ -4831,8 +4831,8 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: - "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4845,7 +4845,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4858,7 +4858,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4875,7 +4875,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/button": ">=14.0.0 <15.0.0" @@ -4900,13 +4900,13 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/picker@workspace:components/picker" dependencies: - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" @@ -4937,7 +4937,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -4960,11 +4960,11 @@ __metadata: resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: "@spectrum-css/alertdialog": "npm:4.1.0" - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -5034,7 +5034,7 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/fieldlabel": ">=10" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5050,7 +5050,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5064,7 +5064,7 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5081,7 +5081,7 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5100,7 +5100,7 @@ __metadata: "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5123,7 +5123,7 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5140,7 +5140,7 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: "@spectrum-css/stepper": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/stepper": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5156,7 +5156,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5169,7 +5169,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5183,7 +5183,7 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" "@spectrum-css/tooltip": "npm:7.1.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5207,7 +5207,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:6.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5233,7 +5233,7 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5250,7 +5250,7 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: "@spectrum-css/swatch": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/swatch": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5266,7 +5266,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5283,7 +5283,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -5311,7 +5311,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -5336,7 +5336,7 @@ __metadata: "@spectrum-css/avatar": "npm:9.1.0" "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" @@ -5359,7 +5359,7 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tag": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5376,7 +5376,7 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5393,7 +5393,7 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5412,7 +5412,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -5434,7 +5434,14 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.0.0-next.2, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:14.0.0-next.2": + version: 14.0.0-next.2 + resolution: "@spectrum-css/tokens@npm:14.0.0-next.2" + checksum: 10c0/769faa9c1efca3f926a1b9f4d3c951005a3cdaceb752a4523cb9dd6b3241f4541130c79a0071cb0597ab9ce01bd9f943764b049bced387b34eda85432f9a80bb + languageName: node + linkType: hard + +"@spectrum-css/tokens@npm:14.0.0-next.3, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5460,9 +5467,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: - "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5483,7 +5490,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -5513,7 +5520,7 @@ __metadata: dependencies: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" @@ -5532,7 +5539,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5556,8 +5563,8 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: - "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5570,7 +5577,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/tokens": "npm:14.0.0-next.3" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: From 4aae7b0a8e79b41a79764090f298372bce2ed19f Mon Sep 17 00:00:00 2001 From: Patrick Fulton Date: Thu, 28 Mar 2024 10:10:22 -0400 Subject: [PATCH 029/103] chore: rebase against main and update components to use prerelease tokens --- .../down-state/button-down-state.stories.js | 9 +--- .../down-state/checkbox-down-state.stories.js | 9 +--- components/dialog/package.json | 1 + yarn.lock | 41 ++++++++++++++++++- 4 files changed, 44 insertions(+), 16 deletions(-) diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js index d5c07618b83..482e9d57fa1 100644 --- a/.storybook/foundations/down-state/button-down-state.stories.js +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -10,15 +10,10 @@ export default { }, parameters: { actions: { - handles: ['click .spectrum-Button'], - }, - status: { - type: process.env.MIGRATED_PACKAGES.includes("button") - ? "migrated" - : undefined, + handles: ["click .spectrum-Button"], }, }, - tags: ['foundation'], + tags: ["foundation"], }; export const ButtonDownState = Template.bind({}); diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js index 889c4fe4ce4..fcc43a4ee1a 100644 --- a/.storybook/foundations/down-state/checkbox-down-state.stories.js +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -10,15 +10,10 @@ export default { }, parameters: { actions: { - handles: ['click input[type="checkbox"]'], - }, - status: { - type: process.env.MIGRATED_PACKAGES.includes("checkbox") - ? "migrated" - : undefined, + handles: ["click input[type=\"checkbox\"]"], }, }, - tags: ['foundation'], + tags: ["foundation"], }; export const CheckboxDownState = Template.bind({}); diff --git a/components/dialog/package.json b/components/dialog/package.json index b1266a30764..25761271762 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -49,6 +49,7 @@ } }, "devDependencies": { + "@spectrum-css/button": "14.1.1", "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", diff --git a/yarn.lock b/yarn.lock index bb064d07226..0abe693ea14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4075,6 +4075,22 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/button@npm:14.0.0-next.3": + version: 14.0.0-next.3 + resolution: "@spectrum-css/button@npm:14.0.0-next.3" + peerDependencies: + "@spectrum-css/icon": ">=6" + "@spectrum-css/progresscircle": ">=2" + "@spectrum-css/tokens": ">=13" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/progresscircle": + optional: true + checksum: 10c0/b8fd5fea3e92f2612f73c8a675fa3a55b897680e57770b4f496c889210d2a386ac3110854be4fe19bc0168c48dd0bc635e9a1241b42d4b33e4c3ee7d8fb3f95e + languageName: node + linkType: hard + "@spectrum-css/button@npm:14.1.1, @spectrum-css/button@workspace:^, @spectrum-css/button@workspace:components/button": version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" @@ -4097,6 +4113,16 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/buttongroup@npm:7.0.0-next.2": + version: 7.0.0-next.2 + resolution: "@spectrum-css/buttongroup@npm:7.0.0-next.2" + peerDependencies: + "@spectrum-css/button": ">=11" + "@spectrum-css/tokens": 14.0.0-next.0 + checksum: 10c0/08971a7e495e9112f61247604617c43552e44315c240919c9a87f300970fc0c6946219911c5d883a6559ca79ac7fe52ffe2e2ea74e66571d6b88ff0c52be9372 + languageName: node + linkType: hard + "@spectrum-css/buttongroup@npm:9.1.0, @spectrum-css/buttongroup@workspace:^, @spectrum-css/buttongroup@workspace:components/buttongroup": version: 0.0.0-use.local resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" @@ -4201,6 +4227,16 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/closebutton@npm:5.0.0-next.1": + version: 5.0.0-next.1 + resolution: "@spectrum-css/closebutton@npm:5.0.0-next.1" + peerDependencies: + "@spectrum-css/icon": ">=4" + "@spectrum-css/tokens": ^14.0.0-next.0 + checksum: 10c0/e408178fd722ec2f049e51d8e206aa627d7511a7ff47900557c629c8322d76c4d97fa92729192441ff416e35588322e693702d673856e04e6d3e596438def869 + languageName: node + linkType: hard + "@spectrum-css/closebutton@npm:5.0.0-next.2, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" @@ -4480,8 +4516,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: - "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/closebutton": "npm:5.0.0-next.2" + "@spectrum-css/button": "npm:14.0.0-next.3" + "@spectrum-css/buttongroup": "npm:7.0.0-next.2" + "@spectrum-css/closebutton": "npm:5.0.0-next.1" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:14.0.0-next.3" From 5fd334c65c5e2f78cc213f51a37671175672802b Mon Sep 17 00:00:00 2001 From: Jennifer Grenier Diaz Date: Thu, 28 Mar 2024 13:12:20 -0600 Subject: [PATCH 030/103] feat(cornerrounding): add custom token and foundations documentation (#2559) * feat(cornerrounding): documentation, custom tokens - feat(cornerrounding): add custom token - chore(cornerrounding): adds dist - docs(cornerrounding): add file strucutre for foundations - feat(cornerrounding): override token value - Sets custom var to override token spectrum-corner-radius-full - chore(cornerrounding): add override to dist - Adds custom var to override token value to dist - chore(cornerrounding): adjust file structure - Also renames file - feat(cornerrounding): add Foundations story for corner-rounding - feat(cornerrounding): add action buttons and checkboxes - Adds action buttons and checkboxes stories to demonstrate corner rounding - docs(cornerrounding): update corner-rounding docs - better utilize storybook features - clean up checkbox and action button stories - hide stories in corner-rounding directory - improve table styling and css token use - improve corner rounding documentation - add tables for component size tokens - fix(cornerrounding): remove mdx for tables - fix(cornerrounding): use sentence case - feat(cornerrounding): use custom token on close button - docs: add alias note - docs: remove reference to non-alias tokens - feat(actionbutton): partial migration for corner rounding only - feat(checkbox): partial migration for corner rounding only - chore(closebutton): update custom var post-refactor - fix: token rebase issue - chore(actionbutton,checkbox): update package version - chore: use corner-radius alias token - chore: update tokens version - chore: revert unneeded component version change - docs: design requested updates, show token with example - docs: move tables to stories, inline spacing for tables * fix: includes error --------- Co-authored-by: Melissa Thompson --- .../action-button-corner-rounding.stories.js | 103 ++++++++++++++++++ .../checkbox-corner-rounding.stories.js | 97 +++++++++++++++++ .../component-size-tokens-medium.md | 7 ++ .../component-size-tokens-small.md | 6 + .../corner-rounding/corner-rounding.mdx | 26 +++++ .../corner-rounding.stories.js | 90 +++++++++++++++ .../foundations/corner-rounding/index.css | 57 ++++++++++ .../foundations/corner-rounding/template.js | 43 ++++++++ .../down-state/button-down-state.stories.js | 2 +- .../down-state/checkbox-down-state.stories.js | 2 +- components/checkbox/dist/metadata.json | 4 + components/checkbox/index.css | 14 ++- 12 files changed, 446 insertions(+), 5 deletions(-) create mode 100644 .storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js create mode 100644 .storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js create mode 100644 .storybook/foundations/corner-rounding/component-size-tokens-medium.md create mode 100644 .storybook/foundations/corner-rounding/component-size-tokens-small.md create mode 100644 .storybook/foundations/corner-rounding/corner-rounding.mdx create mode 100644 .storybook/foundations/corner-rounding/corner-rounding.stories.js create mode 100644 .storybook/foundations/corner-rounding/index.css create mode 100644 .storybook/foundations/corner-rounding/template.js 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..f2724f7df7e --- /dev/null +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -0,0 +1,103 @@ +import { html } from "lit"; +import { Template } from "../../../components/actionbutton/stories/template"; + +export default { + title: "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, context) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + }, context)} +
+ `; +}; + +const ActionButtonTable = (args, context) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueMedium example
--spectrum-corner-radius-medium-size-extra-small6px + ${ActionButton({ + ...args, + label: "Extra Small", + size: "xs" + }, context)} +
--spectrum-corner-radius-medium-size-small7px + ${ActionButton({ + ...args, + label: "Small", + size: "s" + }, context)} +
--spectrum-corner-radius-medium-size-medium8px + ${ActionButton({ + ...args, + label: "Medium", + size: "m" + }, context)} +
--spectrum-corner-radius-medium-size-large9px + ${ActionButton({ + ...args, + label: "Large", + size: "l" + }, context)} +
--spectrum-corner-radius-medium-size-extra-large10px + ${ActionButton({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} +
+ `; +}; + +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..d623f8dafff --- /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: "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 +}, context) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + }, context)} +
+ `; +}; + +const CheckboxTable = (args, context) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueSmall example
--spectrum-corner-radius-small-size-small3px + ${Checkbox({ + ...args, + label: "Small", + size: "s" + }, context)} +
--spectrum-corner-radius-small-size-medium4px + ${Checkbox({ + ...args, + label: "Medium", + size: "m" + }, context)} +
--spectrum-corner-radius-small-size-large5px + ${Checkbox({ + ...args, + label: "Large", + size: "l" + }, context)} +
--spectrum-corner-radius-small-size-extra-large6px + ${Checkbox({ + ...args, + label: "Extra Large", + size: "xl" + }, context)} +
+ `; +} + +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..f2201667866 --- /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..4882791e015 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -0,0 +1,90 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from "./template.js"; + +export default { + title: "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 }, context) => { + 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", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-small-default", + size: "s", + value: "4px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-medium-default", + size: "m", + value: "8px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-large-default", + size: "l", + value: "10px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-extra-large-default", + size: "xl", + value: "16px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-full", + size: "full", + value: "9999px", + }, + context, + )} + </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..d11cbe7823d --- /dev/null +++ b/.storybook/foundations/corner-rounding/index.css @@ -0,0 +1,57 @@ +/*! + * 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..8b86645ade8 --- /dev/null +++ b/.storybook/foundations/corner-rounding/template.js @@ -0,0 +1,43 @@ +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 index 482e9d57fa1..6bf385af68f 100644 --- a/.storybook/foundations/down-state/button-down-state.stories.js +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -1,7 +1,7 @@ import { Template } from "../../../components/button/stories/template.js"; export default { - title: "Foundations/Down state", + title: "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", diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js index fcc43a4ee1a..405e585cfff 100644 --- a/.storybook/foundations/down-state/checkbox-down-state.stories.js +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -1,7 +1,7 @@ import { Template } from "../../../components/checkbox/stories/template"; export default { - title: "Foundations/Down state", + title: "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", diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index c0267b38d57..8b4ee3160b6 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -182,6 +182,10 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-corner-radius-small-size-extra-large", + "--spectrum-corner-radius-small-size-large", + "--spectrum-corner-radius-small-size-medium", + "--spectrum-corner-radius-small-size-small", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 40a8383d2f3..839e0f4a020 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -60,6 +60,11 @@ --spectrum-checkbox-line-height: var(--spectrum-line-height-100); --spectrum-checkbox-line-height-cjk: var(--spectrum-cjk-line-height-100); + /* 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-small-size-medium); + --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); @@ -73,14 +78,13 @@ .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--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); @@ -91,6 +95,8 @@ } .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); @@ -101,6 +107,8 @@ } .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); From a98eb7d74d44bcb0f9b461c4d608986059bd57a1 Mon Sep 17 00:00:00 2001 From: Melissa Thompson <mthompson@heysparkbox.com> Date: Mon, 1 Apr 2024 10:00:19 -0400 Subject: [PATCH 031/103] fix(storybook): body classes for story and docs pages (#2617) --- .storybook/decorators/context.js | 9 +-------- .storybook/types/global.js | 1 - tokens/project.json | 9 +-------- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 991a1717dd2..7c1a10e69df 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -92,13 +92,6 @@ export const withContextWrapper = makeDecorator({ // Express only gets the express class container.classList.toggle("spectrum--express", isExpress && !isRaw); - // Darkest is deprecated in Spectrum 2 - if (isModern && color === "darkest") { - /* eslint-disable no-console -- notify that darkest was deprecated in S2 */ - console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead."); - color = "dark"; - } - // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { color = staticColorSettings[staticKey].color; @@ -110,7 +103,7 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark", "darkest"]) { + for (let c of ["light", "dark"]) { container.classList.toggle(`spectrum--${c}`, c === color && !isRaw); } diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 60a369079e5..7206e24ed98 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -30,7 +30,6 @@ export default { items: [ { value: "light", title: "Light", right: "default" }, { value: "dark", title: "Dark" }, - { value: "darkest", title: "Darkest", right: "deprecated" }, ], dynamicTitle: true, }, diff --git a/tokens/project.json b/tokens/project.json index 0e9ead556bc..6d6f74dfb42 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -71,15 +71,8 @@ "{projectRoot}/dist/css/global-vars.css", "{projectRoot}/dist/css/light-vars.css", "{projectRoot}/dist/css/dark-vars.css", - "{projectRoot}/dist/css/darkest-vars.css", "{projectRoot}/dist/css/medium-vars.css", - "{projectRoot}/dist/css/large-vars.css", - "{projectRoot}/dist/css/spectrum/global-vars.css", - "{projectRoot}/dist/css/spectrum/medium-vars.css", - "{projectRoot}/dist/css/spectrum/large-vars.css", - "{projectRoot}/dist/css/express/global-vars.css", - "{projectRoot}/dist/css/express/medium-vars.css", - "{projectRoot}/dist/css/express/large-vars.css" + "{projectRoot}/dist/css/large-vars.css" ] } } From e5a0e9134d837fd6c801dc906f15f6b7b9b66d86 Mon Sep 17 00:00:00 2001 From: Melissa Thompson <mthompson@heysparkbox.com> Date: Mon, 8 Apr 2024 16:09:53 -0400 Subject: [PATCH 032/103] feat(opacitycheckerboard): S2, small t-shirt size squares (#2610) * feat(opacitycheckerboard): small t-shirt size squares * docs(opacitycheckerboard): chromatic coverage for t-shirt size --- .../opacitycheckerboard/dist/metadata.json | 12 ++++++-- components/opacitycheckerboard/index.css | 18 +++++++++++- .../stories/opacitycheckerboard.stories.js | 10 +++++++ .../opacitycheckerboard/stories/template.js | 1 + yarn.lock | 29 +++---------------- 5 files changed, 42 insertions(+), 28 deletions(-) diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 51c1a155873..bd104aef772 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -1,6 +1,9 @@ { "sourceFile": "index.css", - "selectors": [".spectrum-OpacityCheckerboard"], + "selectors": [ + ".spectrum-OpacityCheckerboard", + ".spectrum-OpacityCheckerboard--sizeS" + ], "modifiers": [ "--mod-opacity-checkerboard-dark", "--mod-opacity-checkerboard-light", @@ -8,9 +11,14 @@ "--mod-opacity-checkerboard-size" ], "component": [ + "--spectrum-opacity-checkerboard-dark", + "--spectrum-opacity-checkerboard-light", + "--spectrum-opacity-checkerboard-position", + "--spectrum-opacity-checkerboard-size", "--spectrum-opacity-checkerboard-square-dark", "--spectrum-opacity-checkerboard-square-light", - "--spectrum-opacity-checkerboard-square-size" + "--spectrum-opacity-checkerboard-square-size-medium", + "--spectrum-opacity-checkerboard-square-size-small" ], "global": [], "system-theme": [], diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 675449dd8dd..c90d81eacdb 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -12,7 +12,23 @@ */ .spectrum-OpacityCheckerboard { - background: repeating-conic-gradient(var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)) 0% 25%, var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)) 0% 50%) var(--mod-opacity-checkerboard-position, left top) / calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2) calc(var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size)) * 2); + --spectrum-opacity-checkerboard-dark: var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark)); + --spectrum-opacity-checkerboard-light: var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light)); + --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-medium)); + + --spectrum-opacity-checkerboard-position: var(--mod-opacity-checkerboard-position, left top); +} + +.spectrum-OpacityCheckerboard--sizeS { + --spectrum-opacity-checkerboard-size: var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small)); +} + +.spectrum-OpacityCheckerboard { + background: + repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) + var(--spectrum-opacity-checkerboard-position) / + calc(var(--spectrum-opacity-checkerboard-size) * 2) + calc(var(--spectrum-opacity-checkerboard-size) * 2); } @media (forced-colors: active) { diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index e908a5cd05b..b6e6f6304ce 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -20,6 +20,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", diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index 733789c5f3a..be0c3f3aed7 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -13,6 +13,7 @@ export const Template = ({ customStyles = {}, id = getRandomId("opacity-checkerboard"), content = [], + size, role, } = {}) => { return html` diff --git a/yarn.lock b/yarn.lock index 0abe693ea14..6b8b1b88ade 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8026,31 +8026,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001643 - resolution: "caniuse-lite@npm:1.0.30001643" - checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001629": - version: 1.0.30001636 - resolution: "caniuse-lite@npm:1.0.30001636" - checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001660 - resolution: "caniuse-lite@npm:1.0.30001660" - checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001673 - resolution: "caniuse-lite@npm:1.0.30001673" - checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001692 + resolution: "caniuse-lite@npm:1.0.30001692" + checksum: 10c0/fca5105561ea12f3de593f3b0f062af82f7d07519e8dbcb97f34e7fd23349bcef1b1622a9a6cd2164d98e3d2f20059ef7e271edae46567aef88caf4c16c7708a languageName: node linkType: hard From b52890ed9c32e735bc2978499226886219c2ea15 Mon Sep 17 00:00:00 2001 From: Patrick Fulton <pfulton@adobe.com> Date: Tue, 9 Apr 2024 15:12:43 -0400 Subject: [PATCH 033/103] chore(tokens): manual version bump for prerelease --- tokens/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tokens/package.json b/tokens/package.json index 6ba5c6133aa..0c739d104c6 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0-next.3", + "version": "14.0.0-next.4", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", From 900c8ef650565dd952ba9162764588ec397a024d Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 11 Apr 2024 15:59:31 -0400 Subject: [PATCH 034/103] feat: add example gradients for static black and white (#2637) * feat: add example gradients for static black and white Add new gradient backgrounds, displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator. * docs(fieldlabel): support static colors decorator in storybook Change Field label stories that show static black and static white, so they work with the recently added decorator that changes the main Storybook background. * docs(button): adjust static colors template Adjust static colors template to better handle the static color decorator and gradients. * chore(fieldlabel): apply eslint indentation changes to stories --- .storybook/decorators/context.js | 4 +- components/accordion/package.json | 2 +- components/actionbar/package.json | 2 +- components/actionbutton/package.json | 2 +- components/actiongroup/package.json | 2 +- components/actionmenu/package.json | 2 +- components/alertbanner/package.json | 2 +- components/alertdialog/package.json | 2 +- components/asset/package.json | 2 +- components/assetcard/package.json | 2 +- components/assetlist/package.json | 2 +- components/avatar/package.json | 2 +- components/badge/package.json | 2 +- components/breadcrumb/package.json | 2 +- components/button/package.json | 2 +- components/buttongroup/package.json | 2 +- components/calendar/package.json | 2 +- components/card/package.json | 2 +- components/checkbox/package.json | 2 +- components/clearbutton/package.json | 2 +- components/closebutton/package.json | 2 +- components/coachindicator/package.json | 2 +- components/coachmark/package.json | 2 +- components/colorarea/package.json | 2 +- components/colorhandle/package.json | 2 +- components/colorloupe/package.json | 2 +- components/colorslider/package.json | 2 +- components/colorwheel/package.json | 2 +- components/combobox/package.json | 2 +- components/contextualhelp/package.json | 2 +- components/datepicker/package.json | 2 +- components/dial/package.json | 2 +- components/dialog/package.json | 2 +- components/divider/package.json | 2 +- components/dropindicator/package.json | 2 +- components/dropzone/package.json | 2 +- components/fieldgroup/package.json | 2 +- components/fieldlabel/package.json | 2 +- components/floatingactionbutton/package.json | 2 +- components/form/package.json | 2 +- components/helptext/package.json | 2 +- components/icon/package.json | 2 +- components/illustratedmessage/package.json | 2 +- components/infieldbutton/package.json | 2 +- components/inlinealert/package.json | 2 +- components/link/package.json | 2 +- components/logicbutton/package.json | 2 +- components/menu/package.json | 2 +- components/meter/package.json | 2 +- components/miller/package.json | 2 +- components/modal/package.json | 2 +- components/opacitycheckerboard/package.json | 2 +- components/page/package.json | 2 +- components/pagination/package.json | 2 +- components/picker/package.json | 2 +- components/pickerbutton/package.json | 2 +- components/popover/package.json | 2 +- components/progressbar/package.json | 2 +- components/progresscircle/package.json | 2 +- components/radio/package.json | 2 +- components/rating/package.json | 2 +- components/search/package.json | 2 +- components/sidenav/package.json | 2 +- components/slider/package.json | 2 +- components/splitview/package.json | 2 +- components/statuslight/package.json | 2 +- components/steplist/package.json | 2 +- components/stepper/package.json | 2 +- components/swatch/package.json | 2 +- components/swatchgroup/package.json | 2 +- components/switch/package.json | 2 +- components/table/package.json | 2 +- components/tabs/package.json | 2 +- components/tag/package.json | 2 +- components/taggroup/package.json | 2 +- components/textfield/package.json | 2 +- components/thumbnail/package.json | 2 +- components/toast/package.json | 2 +- components/tooltip/package.json | 2 +- components/tray/package.json | 2 +- components/treeview/package.json | 2 +- components/typography/package.json | 2 +- components/underlay/package.json | 2 +- components/well/package.json | 2 +- tokens/custom/global-vars.css | 9 +- yarn.lock | 210 ++++++++----------- 86 files changed, 178 insertions(+), 211 deletions(-) diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 7c1a10e69df..fded75323bc 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -31,11 +31,11 @@ export const withContextWrapper = makeDecorator({ const staticColorSettings = { "black": { - background: "var(--spectrum-docs-static-black-background-color)", + background: "var(--spectrum-examples-gradient-static-black)", color: "light" }, "white": { - background: "var(--spectrum-docs-static-white-background-color)", + background: "var(--spectrum-examples-gradient-static-white)", color: "dark" }, }; diff --git a/components/accordion/package.json b/components/accordion/package.json index 0e9a4afc178..60d58b771d1 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index e56df323227..55f5087ed8f 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 0e3539e9d77..1faa206263e 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -39,7 +39,7 @@ "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index c49e554f293..a2b1a4271a7 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index 9c752d24c6f..8bad3fb15c3 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -36,7 +36,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 2868447d3ee..287cf485772 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index fccff2744ca..81c332cfcf2 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/asset/package.json b/components/asset/package.json index 95dc9a2be60..1d460c74bde 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/assetcard/package.json b/components/assetcard/package.json index e2f03f42883..d0d58977863 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 82492c0af9e..cd90042e78d 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/avatar/package.json b/components/avatar/package.json index 37ee746ae33..174cc0fda58 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/badge/package.json b/components/badge/package.json index fbe15e99d53..9cb2862f2d5 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index 4eb2be6ec91..ba835cf04df 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/button/package.json b/components/button/package.json index 6c0dcbaf4be..eb6945e8540 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -44,7 +44,7 @@ "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index ee3f749aef1..9a07c278d61 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/calendar/package.json b/components/calendar/package.json index 6ee17fefe96..9d107ce82c3 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/card/package.json b/components/card/package.json index 2eef42e2b65..5c3e6db8b0c 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -61,7 +61,7 @@ "@spectrum-css/asset": "7.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 226086b9364..2ec36249e0a 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 9210bd36d2e..e988a5ced39 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 18d9949cc81..9a690a66224 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -46,7 +46,7 @@ "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index bd25e6a4902..5cec7ee5151 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 4a80ffe4a67..82692981985 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -63,7 +63,7 @@ "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 6b99f94ad5e..3a6fd1b9a14 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index febb3d45339..47ff949d8e1 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 0227a4b5270..63c4b4929a9 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/colorslider/package.json b/components/colorslider/package.json index 28d374e4849..d75fc4f50d6 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 5f7187e08be..a7ea8f990bd 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -48,7 +48,7 @@ "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/combobox/package.json b/components/combobox/package.json index fadd3ed5ec1..1878e28b9c7 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -58,7 +58,7 @@ "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 0b2dfb9c98c..1aab12bb169 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/link": "7.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index b4c40953a65..b9ef27c5d2f 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -53,7 +53,7 @@ "@spectrum-css/pickerbutton": "6.1.1", "@spectrum-css/popover": "8.2.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/dial/package.json b/components/dial/package.json index eadd2eeac7a..df3f6293301 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index 25761271762..06f3ea5fba0 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -54,7 +54,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/divider/package.json b/components/divider/package.json index a23e2f4e539..30b371b9530 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index e188a30818d..da142d778af 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index cff9a0fed05..db18d22e07f 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index 6e1975bdd79..af3aef3d496 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -48,7 +48,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index c6c7740d9f6..3b1242f62b7 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 359dd9ce73a..49ea401ce26 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/form/package.json b/components/form/package.json index 7c9bd2084d3..70f5c1eaf4b 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/helptext/package.json b/components/helptext/package.json index dcaf5281fc0..a4c10da7992 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/icon/package.json b/components/icon/package.json index 8031cc3ee85..5a3bfb7b5e7 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 4a3b0efcf7d..57a8080285f 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -29,7 +29,7 @@ "@spectrum-css/typography": ">=8" }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index e1c9d0e5a6b..c2a8743f15d 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 11496b81133..3e5c5f63753 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/link/package.json b/components/link/package.json index 0e89c0a77db..7f0f6669454 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index de3ae13739a..560081e7b4d 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/menu/package.json b/components/menu/package.json index 26999ebeb07..185b2849f7d 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/tray": "5.1.0" }, "keywords": [ diff --git a/components/meter/package.json b/components/meter/package.json index a34774a795a..b9500b695c8 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/miller/package.json b/components/miller/package.json index 497d4502dc4..86bda80b654 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -34,7 +34,7 @@ "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/modal/package.json b/components/modal/package.json index 7cfeab99b3c..994d9cbe53a 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 17acb1eb8e1..8bdc88adbb2 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/page/package.json b/components/page/package.json index 28bd15e9a8b..4e8584a0c21 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/pagination/package.json b/components/pagination/package.json index ef0c7ea434d..eb9bd5dac65 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -53,7 +53,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index f7f46691385..e11226367c8 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -59,7 +59,7 @@ "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index ce9910f381a..2d8c272022a 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -34,7 +34,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/popover/package.json b/components/popover/package.json index 57f72bc3b31..405173fd337 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -54,7 +54,7 @@ "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 31c53200f95..deebba329ac 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index 1e7d1053e3e..f2cc959c3aa 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/radio/package.json b/components/radio/package.json index a1fa4304456..cf387a364df 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/rating/package.json b/components/rating/package.json index 21f7770ab7e..484f1e2276c 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -30,7 +30,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/search/package.json b/components/search/package.json index 861cdbb33ac..6979c429076 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -48,7 +48,7 @@ "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index b75f75fb706..cddebf3ff6f 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/slider/package.json b/components/slider/package.json index 4ab950c880f..347e813c463 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/stepper": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/splitview/package.json b/components/splitview/package.json index 2230c334adf..89f32159bba 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/statuslight/package.json b/components/statuslight/package.json index cae71c04c08..a829778b6e1 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/steplist/package.json b/components/steplist/package.json index 6f717301d44..5636390ee5e 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3", + "@spectrum-css/tokens": "14.0.0-next.4", "@spectrum-css/tooltip": "7.1.0" }, "keywords": [ diff --git a/components/stepper/package.json b/components/stepper/package.json index a200b6e1606..aef7c43ddeb 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -53,7 +53,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/infieldbutton": "6.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/swatch/package.json b/components/swatch/package.json index 135d32e96fc..2e49da8439b 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 3d83d5d940a..18ba84c0ed7 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/switch/package.json b/components/switch/package.json index a7df5508102..76f0a63e8f6 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/table/package.json b/components/table/package.json index 5f5b4753d26..b28d07e5ea5 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -53,7 +53,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/tabs/package.json b/components/tabs/package.json index bc98834b264..9e6ce3d806a 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -48,7 +48,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/picker": "9.1.1", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/tag/package.json b/components/tag/package.json index 8df834e5b07..13f5b29f213 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -48,7 +48,7 @@ "@spectrum-css/avatar": "9.1.0", "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index 689ae34d8f6..d01d0d5af64 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/tag": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/textfield/package.json b/components/textfield/package.json index 1b0d9b4ca0b..5921f811f76 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index ce3dfc3a652..b62f0bda364 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/toast/package.json b/components/toast/package.json index 3e848a2360e..02735a410a7 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -33,7 +33,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 0c9b710ddcd..f965035a69b 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -31,7 +31,7 @@ "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/tray/package.json b/components/tray/package.json index ff910639922..412cd9ab1d7 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -58,7 +58,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/treeview/package.json b/components/treeview/package.json index cbce89bc763..459fdb495d4 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/typography/package.json b/components/typography/package.json index 5d14692c12e..b7fd21bb0cb 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/underlay/package.json b/components/underlay/package.json index 8e3c3248e38..cf5dcfb3a9d 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -29,7 +29,7 @@ }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/components/well/package.json b/components/well/package.json index 470e5c350eb..a511cd92411 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.3" + "@spectrum-css/tokens": "14.0.0-next.4" }, "keywords": [ "design-system", diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css index 55cad6984bd..be7d3bbb698 100644 --- a/tokens/custom/global-vars.css +++ b/tokens/custom/global-vars.css @@ -57,9 +57,12 @@ --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color: rgb(15 121 125); - --spectrum-docs-static-black-background-color: rgb(181 209 211); + /* Gradient that changes with the color theme. */ + --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); + + /* Gradients that do not change with the color theme, for use in static color backgrounds. */ + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/yarn.lock b/yarn.lock index 6b8b1b88ade..9435526eebf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3711,7 +3711,7 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3731,7 +3731,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3758,7 +3758,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3775,7 +3775,7 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3795,7 +3795,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3824,7 +3824,7 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" @@ -3853,7 +3853,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" @@ -3882,7 +3882,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3896,7 +3896,7 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3914,7 +3914,7 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -3933,7 +3933,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -3947,7 +3947,7 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -3965,7 +3965,7 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -4075,22 +4075,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/button@npm:14.0.0-next.3": - version: 14.0.0-next.3 - resolution: "@spectrum-css/button@npm:14.0.0-next.3" - peerDependencies: - "@spectrum-css/icon": ">=6" - "@spectrum-css/progresscircle": ">=2" - "@spectrum-css/tokens": ">=13" - peerDependenciesMeta: - "@spectrum-css/icon": - optional: true - "@spectrum-css/progresscircle": - optional: true - checksum: 10c0/b8fd5fea3e92f2612f73c8a675fa3a55b897680e57770b4f496c889210d2a386ac3110854be4fe19bc0168c48dd0bc635e9a1241b42d4b33e4c3ee7d8fb3f95e - languageName: node - linkType: hard - "@spectrum-css/button@npm:14.1.1, @spectrum-css/button@workspace:^, @spectrum-css/button@workspace:components/button": version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" @@ -4098,7 +4082,7 @@ __metadata: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" @@ -4113,22 +4097,12 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/buttongroup@npm:7.0.0-next.2": - version: 7.0.0-next.2 - resolution: "@spectrum-css/buttongroup@npm:7.0.0-next.2" - peerDependencies: - "@spectrum-css/button": ">=11" - "@spectrum-css/tokens": 14.0.0-next.0 - checksum: 10c0/08971a7e495e9112f61247604617c43552e44315c240919c9a87f300970fc0c6946219911c5d883a6559ca79ac7fe52ffe2e2ea74e66571d6b88ff0c52be9372 - languageName: node - linkType: hard - "@spectrum-css/buttongroup@npm:9.1.0, @spectrum-css/buttongroup@workspace:^, @spectrum-css/buttongroup@workspace:components/buttongroup": version: 0.0.0-use.local resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4145,7 +4119,7 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4165,7 +4139,7 @@ __metadata: "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" @@ -4198,7 +4172,7 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4215,7 +4189,7 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4227,23 +4201,13 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/closebutton@npm:5.0.0-next.1": - version: 5.0.0-next.1 - resolution: "@spectrum-css/closebutton@npm:5.0.0-next.1" - peerDependencies: - "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ^14.0.0-next.0 - checksum: 10c0/e408178fd722ec2f049e51d8e206aa627d7511a7ff47900557c629c8322d76c4d97fa92729192441ff416e35588322e693702d673856e04e6d3e596438def869 - languageName: node - linkType: hard - "@spectrum-css/closebutton@npm:5.0.0-next.2, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4259,7 +4223,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4278,7 +4242,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" @@ -4310,7 +4274,7 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4328,7 +4292,7 @@ __metadata: dependencies: "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4347,7 +4311,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4362,7 +4326,7 @@ __metadata: dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" @@ -4384,7 +4348,7 @@ __metadata: "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/colorarea": ">=7.0.0 <8.0.0" "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" @@ -4411,7 +4375,7 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4452,7 +4416,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" @@ -4478,7 +4442,7 @@ __metadata: "@spectrum-css/pickerbutton": "npm:6.1.1" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/calendar": ">=7.0.0 <8.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" @@ -4503,7 +4467,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4516,12 +4480,12 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: - "@spectrum-css/button": "npm:14.0.0-next.3" - "@spectrum-css/buttongroup": "npm:7.0.0-next.2" - "@spectrum-css/closebutton": "npm:5.0.0-next.1" + "@spectrum-css/button": "npm:14.1.1" + "@spectrum-css/buttongroup": "npm:9.1.0" + "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" @@ -4547,7 +4511,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4561,7 +4525,7 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4580,7 +4544,7 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" @@ -4605,7 +4569,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/helptext": ">=7.0.0 <8.0.0" @@ -4628,7 +4592,7 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4644,7 +4608,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4657,7 +4621,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4682,7 +4646,7 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4698,7 +4662,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4711,7 +4675,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4729,7 +4693,7 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4747,7 +4711,7 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -4766,7 +4730,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4780,7 +4744,7 @@ __metadata: resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4797,7 +4761,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/tray": "npm:5.1.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -4827,7 +4791,7 @@ __metadata: resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: "@spectrum-css/progressbar": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -4846,7 +4810,7 @@ __metadata: "@spectrum-css/assetlist": "npm:8.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" "@spectrum-css/checkbox": ">=10" @@ -4869,7 +4833,7 @@ __metadata: resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4882,7 +4846,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4895,7 +4859,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -4912,7 +4876,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/button": ">=14.0.0 <15.0.0" @@ -4943,7 +4907,7 @@ __metadata: "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" @@ -4974,7 +4938,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -5001,7 +4965,7 @@ __metadata: "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -5071,7 +5035,7 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/fieldlabel": ">=10" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5087,7 +5051,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5101,7 +5065,7 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5118,7 +5082,7 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5137,7 +5101,7 @@ __metadata: "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5160,7 +5124,7 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5177,7 +5141,7 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: "@spectrum-css/stepper": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/stepper": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5193,7 +5157,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5206,7 +5170,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5220,7 +5184,7 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" "@spectrum-css/tooltip": "npm:7.1.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5244,7 +5208,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:6.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" @@ -5270,7 +5234,7 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5287,7 +5251,7 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: "@spectrum-css/swatch": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/swatch": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5303,7 +5267,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5320,7 +5284,7 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" @@ -5348,7 +5312,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" @@ -5373,7 +5337,7 @@ __metadata: "@spectrum-css/avatar": "npm:9.1.0" "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" @@ -5396,7 +5360,7 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tag": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5413,7 +5377,7 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5430,7 +5394,7 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5449,7 +5413,7 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" @@ -5478,7 +5442,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.0.0-next.3, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:14.0.0-next.4, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5506,7 +5470,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/tokens": ">=14.0.0-next.0" @@ -5527,7 +5491,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" @@ -5557,7 +5521,7 @@ __metadata: dependencies: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" @@ -5576,7 +5540,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5601,7 +5565,7 @@ __metadata: resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: @@ -5614,7 +5578,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.3" + "@spectrum-css/tokens": "npm:14.0.0-next.4" peerDependencies: "@spectrum-css/tokens": ">=14.0.0-next.0" peerDependenciesMeta: From d8546bd0f46aba73635d21a57fd78725b0aee96e Mon Sep 17 00:00:00 2001 From: Patrick Fulton <pfulton@adobe.com> Date: Fri, 12 Apr 2024 10:16:02 -0400 Subject: [PATCH 035/103] chore(tokens): use spectrum-tokens@13.0.0-beta.27 --- components/accordion/package.json | 4 +- components/actionbar/package.json | 4 +- components/actionbutton/package.json | 4 +- components/actiongroup/package.json | 4 +- components/actionmenu/package.json | 4 +- components/alertbanner/package.json | 4 +- components/alertdialog/package.json | 4 +- components/asset/package.json | 4 +- components/assetcard/package.json | 4 +- components/assetlist/package.json | 4 +- components/avatar/package.json | 4 +- components/badge/package.json | 4 +- components/breadcrumb/package.json | 4 +- components/button/package.json | 4 +- components/buttongroup/package.json | 4 +- components/calendar/package.json | 4 +- components/card/package.json | 4 +- components/checkbox/package.json | 4 +- components/clearbutton/package.json | 4 +- components/closebutton/package.json | 4 +- components/coachindicator/package.json | 4 +- components/coachmark/package.json | 4 +- components/colorarea/package.json | 4 +- components/colorhandle/package.json | 4 +- components/colorloupe/package.json | 4 +- components/colorslider/package.json | 4 +- components/colorwheel/package.json | 4 +- components/combobox/package.json | 4 +- components/contextualhelp/package.json | 4 +- components/datepicker/package.json | 4 +- components/dial/package.json | 4 +- components/dialog/package.json | 4 +- components/divider/package.json | 4 +- components/dropindicator/package.json | 4 +- components/dropzone/package.json | 4 +- components/fieldgroup/package.json | 4 +- components/fieldlabel/package.json | 4 +- components/floatingactionbutton/package.json | 4 +- components/form/package.json | 4 +- components/helptext/package.json | 4 +- components/icon/package.json | 4 +- components/illustratedmessage/package.json | 4 +- components/infieldbutton/package.json | 4 +- components/inlinealert/package.json | 4 +- components/link/package.json | 4 +- components/logicbutton/package.json | 4 +- components/menu/package.json | 4 +- components/meter/package.json | 4 +- components/miller/package.json | 4 +- components/modal/package.json | 4 +- components/opacitycheckerboard/package.json | 4 +- components/page/package.json | 4 +- components/pagination/package.json | 4 +- components/picker/package.json | 4 +- components/pickerbutton/package.json | 4 +- components/popover/package.json | 4 +- components/progressbar/package.json | 4 +- components/progresscircle/package.json | 4 +- components/radio/package.json | 4 +- components/rating/package.json | 4 +- components/search/package.json | 4 +- components/sidenav/package.json | 4 +- components/slider/package.json | 4 +- components/splitview/package.json | 4 +- components/statuslight/package.json | 4 +- components/steplist/package.json | 4 +- components/stepper/package.json | 4 +- components/swatch/package.json | 4 +- components/swatchgroup/package.json | 4 +- components/switch/package.json | 4 +- components/table/package.json | 4 +- components/tabs/package.json | 4 +- components/tag/package.json | 4 +- components/taggroup/package.json | 4 +- components/textfield/package.json | 4 +- components/thumbnail/package.json | 4 +- components/toast/package.json | 4 +- components/tooltip/package.json | 4 +- components/tray/package.json | 4 +- components/treeview/package.json | 4 +- components/typography/package.json | 4 +- components/underlay/package.json | 4 +- components/well/package.json | 4 +- tokens/package.json | 2 +- yarn.lock | 334 +++++++++---------- 85 files changed, 334 insertions(+), 334 deletions(-) diff --git a/components/accordion/package.json b/components/accordion/package.json index 60d58b771d1..74e0e9bfd1c 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 55f5087ed8f..e7e83cf3208 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -29,7 +29,7 @@ "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actiongroup": { @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 1faa206263e..3fad0a7e6e8 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -39,7 +39,7 @@ "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index a2b1a4271a7..8329a400255 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index 8bad3fb15c3..fbdfcdcef55 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -29,14 +29,14 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 287cf485772..392ec92b2c5 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -29,7 +29,7 @@ "@spectrum-css/closebutton": ">=5.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -53,7 +53,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 81c332cfcf2..3b3f5f2414e 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -29,7 +29,7 @@ "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, "peerDependenciesMeta": { @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/asset/package.json b/components/asset/package.json index 1d460c74bde..7ad2e15e044 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/assetcard/package.json b/components/assetcard/package.json index d0d58977863..5f6524ee91f 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/assetlist/package.json b/components/assetlist/package.json index cd90042e78d..c5b2ecc909d 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/avatar/package.json b/components/avatar/package.json index 174cc0fda58..610d7554bff 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/badge/package.json b/components/badge/package.json index 9cb2862f2d5..8a59b3b72bb 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index ba835cf04df..e1dc521b6c9 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/button/package.json b/components/button/package.json index eb6945e8540..492abc990e7 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -44,7 +44,7 @@ "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 9a07c278d61..4d6ce4722dc 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/calendar/package.json b/components/calendar/package.json index 9d107ce82c3..068b1a46966 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/card/package.json b/components/card/package.json index 5c3e6db8b0c..928e0496576 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -30,7 +30,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/quickaction": ">=3", - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/typography": ">=8.0.0 <9.0.0" }, "peerDependenciesMeta": { @@ -61,7 +61,7 @@ "@spectrum-css/asset": "7.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 2ec36249e0a..66df3ef427f 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index e988a5ced39..873f2fc97e1 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 9a690a66224..2470e42a631 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -33,7 +33,7 @@ ], "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -46,7 +46,7 @@ "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 5cec7ee5151..edb0a6e403a 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 82692981985..b415b821296 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -31,7 +31,7 @@ "@spectrum-css/buttongroup": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -63,7 +63,7 @@ "@spectrum-css/buttongroup": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 3a6fd1b9a14..0bdce72d461 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 47ff949d8e1..2805419f8a7 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/colorloupe": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 63c4b4929a9..c3d967a5b51 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/colorslider/package.json b/components/colorslider/package.json index d75fc4f50d6..4ec24fd9faf 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/colorhandle": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index a7ea8f990bd..4f11e9e3bd4 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -28,7 +28,7 @@ "@spectrum-css/colorarea": ">=7.0.0 <8.0.0", "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0", "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/colorarea": { @@ -48,7 +48,7 @@ "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/combobox/package.json b/components/combobox/package.json index 1878e28b9c7..ccf3f076282 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -30,7 +30,7 @@ "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/menu": { @@ -58,7 +58,7 @@ "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 1aab12bb169..5cb5641bdd1 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -28,7 +28,7 @@ "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/link": "7.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/datepicker/package.json b/components/datepicker/package.json index b9ef27c5d2f..fb401015bf5 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -29,7 +29,7 @@ "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/calendar": { @@ -53,7 +53,7 @@ "@spectrum-css/pickerbutton": "6.1.1", "@spectrum-css/popover": "8.2.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/dial/package.json b/components/dial/package.json index df3f6293301..4c486b10c7a 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index 06f3ea5fba0..9f85aef2d7c 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -28,7 +28,7 @@ "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, "peerDependenciesMeta": { @@ -54,7 +54,7 @@ "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/divider/package.json b/components/divider/package.json index 30b371b9530..00e5d767fad 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index da142d778af..1be203a11bf 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/dropzone/package.json b/components/dropzone/package.json index db18d22e07f..26afb9f0990 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -28,7 +28,7 @@ "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/actionbutton": "7.1.1", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index af3aef3d496..b8af94c4092 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -28,7 +28,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/helptext": ">=7.0.0 <8.0.0", "@spectrum-css/radio": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -48,7 +48,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/radio": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 3b1242f62b7..6b0e50d0af5 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 49ea401ce26..df6ab7b469c 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -26,7 +26,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -34,7 +34,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/form/package.json b/components/form/package.json index 70f5c1eaf4b..8bc2bcbd83a 100644 --- a/components/form/package.json +++ b/components/form/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/helptext/package.json b/components/helptext/package.json index a4c10da7992..4ef2a9f9ac4 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/icon/package.json b/components/icon/package.json index 5a3bfb7b5e7..4a4d22b16dc 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 57a8080285f..9864839f069 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/typography": ">=8" }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/typography": "8.1.0" }, "keywords": [ diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index c2a8743f15d..858dd2f2e9b 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 3e5c5f63753..fe9e3467c01 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/button": ">=14", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/link/package.json b/components/link/package.json index 7f0f6669454..4c24ea2c74f 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 560081e7b4d..39f68738490 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/menu/package.json b/components/menu/package.json index 185b2849f7d..a210399dd99 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -29,7 +29,7 @@ "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/switch": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/tray": ">=5.0.0 <6.0.0" }, "peerDependenciesMeta": { @@ -57,7 +57,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/tray": "5.1.0" }, "keywords": [ diff --git a/components/meter/package.json b/components/meter/package.json index b9500b695c8..a99280d1626 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/progressbar": ">=6.0.0 <7.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/progressbar": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/progressbar": "6.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/miller/package.json b/components/miller/package.json index 86bda80b654..4f232cc2d20 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -28,13 +28,13 @@ "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", "@spectrum-css/checkbox": ">=10", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/modal/package.json b/components/modal/package.json index 994d9cbe53a..b84d584de7d 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index 8bdc88adbb2..e1109442884 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/page/package.json b/components/page/package.json index 4e8584a0c21..0118de09cff 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/pagination/package.json b/components/pagination/package.json index eb9bd5dac65..73915f0a91b 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -29,7 +29,7 @@ "@spectrum-css/button": ">=14.0.0 <15.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -53,7 +53,7 @@ "@spectrum-css/button": "14.1.1", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index e11226367c8..b61a7499ec8 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -30,7 +30,7 @@ "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", "@spectrum-css/progresscircle": ">=5", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -59,7 +59,7 @@ "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 2d8c272022a..55b7082f9e3 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -28,13 +28,13 @@ "@spectrum-css/icon": ">=9", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/popover": ">=8", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/popover": "8.2.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/popover/package.json b/components/popover/package.json index 405173fd337..f8be6397aec 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -29,7 +29,7 @@ "@spectrum-css/dialog": ">=12.0.0 <13.0.0", "@spectrum-css/divider": ">=5", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/alertdialog": { @@ -54,7 +54,7 @@ "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/progressbar/package.json b/components/progressbar/package.json index deebba329ac..d8bfc407089 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/fieldlabel": ">=10", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/fieldlabel": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index f2cc959c3aa..5b863ba30f1 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/radio/package.json b/components/radio/package.json index cf387a364df..997f6af160a 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/rating/package.json b/components/rating/package.json index 484f1e2276c..c1912e491fe 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -26,11 +26,11 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/search/package.json b/components/search/package.json index 6979c429076..f2b5334b7ca 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -28,7 +28,7 @@ "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/clearbutton": { @@ -48,7 +48,7 @@ "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/sidenav/package.json b/components/sidenav/package.json index cddebf3ff6f..9bb072c0000 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/slider/package.json b/components/slider/package.json index 347e813c463..34c1d08a354 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/stepper": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/stepper": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/stepper": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/splitview/package.json b/components/splitview/package.json index 89f32159bba..aa695ab5dc5 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/statuslight/package.json b/components/statuslight/package.json index a829778b6e1..ab7f6db763a 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/steplist/package.json b/components/steplist/package.json index 5636390ee5e..b286e0f0367 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0", + "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" }, "peerDependenciesMeta": { @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/tooltip": "7.1.0" }, "keywords": [ diff --git a/components/stepper/package.json b/components/stepper/package.json index aef7c43ddeb..a2d956d094c 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -29,7 +29,7 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0", "@spectrum-css/textfield": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { @@ -53,7 +53,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/infieldbutton": "6.1.0", "@spectrum-css/textfield": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/swatch/package.json b/components/swatch/package.json index 2e49da8439b..e0b85e811f0 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/opacitycheckerboard": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 18ba84c0ed7..370f463f0cd 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/swatch": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/swatch": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/swatch": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/switch/package.json b/components/switch/package.json index 76f0a63e8f6..cce19a21972 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/table/package.json b/components/table/package.json index b28d07e5ea5..669e0357898 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -29,7 +29,7 @@ "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -53,7 +53,7 @@ "@spectrum-css/checkbox": "10.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/tabs/package.json b/components/tabs/package.json index 9e6ce3d806a..4e19a32397c 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -28,7 +28,7 @@ "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/picker": ">=9.0.0 <10.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -48,7 +48,7 @@ "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", "@spectrum-css/picker": "9.1.1", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/tag/package.json b/components/tag/package.json index 13f5b29f213..5fffbf2c2a0 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -28,7 +28,7 @@ "@spectrum-css/avatar": ">=9.0.0 <10.0.0", "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/avatar": { @@ -48,7 +48,7 @@ "@spectrum-css/avatar": "9.1.0", "@spectrum-css/clearbutton": "7.1.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/taggroup/package.json b/components/taggroup/package.json index d01d0d5af64..1db26f49132 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/tag": ">=10.0.0 <11.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tag": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/tag": "10.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/textfield/package.json b/components/textfield/package.json index 5921f811f76..c4cfa7bb026 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index b62f0bda364..fa0f893136e 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/opacitycheckerboard": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/opacitycheckerboard": "4.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/toast/package.json b/components/toast/package.json index 02735a410a7..72337a4bd29 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -27,13 +27,13 @@ "peerDependencies": { "@spectrum-css/button": ">=14", "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "5.0.0-next.2", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/tooltip/package.json b/components/tooltip/package.json index f965035a69b..c76ab8fcb4b 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -26,12 +26,12 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=9", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", "@spectrum-css/icon": "9.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/tray/package.json b/components/tray/package.json index 412cd9ab1d7..d5c0b6360cf 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -30,7 +30,7 @@ "@spectrum-css/divider": ">=5", "@spectrum-css/icon": ">=9", "@spectrum-css/modal": ">=7", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/button": { @@ -58,7 +58,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/modal": "7.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/treeview/package.json b/components/treeview/package.json index 459fdb495d4..fb3c89534d4 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -43,7 +43,7 @@ "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/typography/package.json b/components/typography/package.json index b7fd21bb0cb..d420b5bf827 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/underlay/package.json b/components/underlay/package.json index cf5dcfb3a9d..903e5f6330d 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { "@spectrum-css/commons": "9.1.4-next.0", - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/components/well/package.json b/components/well/package.json index a511cd92411..98f5443072e 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { "@spectrum-css/tokens": { @@ -33,7 +33,7 @@ } }, "devDependencies": { - "@spectrum-css/tokens": "14.0.0-next.4" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/tokens/package.json b/tokens/package.json index 0c739d104c6..e18cd9033b8 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0-next.4", + "version": "16.0.1", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", diff --git a/yarn.lock b/yarn.lock index 9435526eebf..4a84ab816d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3711,10 +3711,10 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3731,13 +3731,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actiongroup": optional: true @@ -3758,10 +3758,10 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3775,10 +3775,10 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -3795,13 +3795,13 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -3824,13 +3824,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/closebutton": ">=5.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -3853,14 +3853,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: "@spectrum-css/buttongroup": @@ -3882,9 +3882,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -3896,10 +3896,10 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -3914,11 +3914,11 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -3933,9 +3933,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -3947,10 +3947,10 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -3965,11 +3965,11 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4082,11 +4082,11 @@ __metadata: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4102,10 +4102,10 @@ __metadata: resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -4119,10 +4119,10 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4139,7 +4139,7 @@ __metadata: "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" @@ -4147,7 +4147,7 @@ __metadata: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/quickaction": ">=3" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/typography": ">=8.0.0 <9.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4172,10 +4172,10 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4189,10 +4189,10 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4207,10 +4207,10 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4223,9 +4223,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4242,7 +4242,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" @@ -4250,7 +4250,7 @@ __metadata: "@spectrum-css/buttongroup": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4274,10 +4274,10 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/colorhandle": optional: true @@ -4292,11 +4292,11 @@ __metadata: dependencies: "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/colorloupe": optional: true @@ -4311,9 +4311,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4326,11 +4326,11 @@ __metadata: dependencies: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/colorhandle": optional: true @@ -4348,12 +4348,12 @@ __metadata: "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/colorarea": ">=7.0.0 <8.0.0" "@spectrum-css/colorhandle": ">=10.0.0 <11.0.0" "@spectrum-css/colorloupe": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/colorarea": optional: true @@ -4375,14 +4375,14 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/menu": optional: true @@ -4416,12 +4416,12 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4442,13 +4442,13 @@ __metadata: "@spectrum-css/pickerbutton": "npm:6.1.1" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/calendar": ">=7.0.0 <8.0.0" "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/calendar": optional: true @@ -4467,9 +4467,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4485,13 +4485,13 @@ __metadata: "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: "@spectrum-css/closebutton": @@ -4511,9 +4511,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4525,10 +4525,10 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4544,12 +4544,12 @@ __metadata: "@spectrum-css/actionbutton": "npm:7.1.1" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4569,12 +4569,12 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/radio": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -4592,10 +4592,10 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4608,9 +4608,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4621,9 +4621,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4646,10 +4646,10 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4662,9 +4662,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4675,10 +4675,10 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/typography": ">=8" peerDependenciesMeta: "@spectrum-css/tokens": @@ -4693,10 +4693,10 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4711,11 +4711,11 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -4730,9 +4730,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4744,9 +4744,9 @@ __metadata: resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4761,14 +4761,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/tray": "npm:5.1.0" peerDependencies: "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/switch": ">=6.0.0 <7.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/tray": ">=5.0.0 <6.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": @@ -4791,10 +4791,10 @@ __metadata: resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: "@spectrum-css/progressbar": "npm:6.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/progressbar": optional: true @@ -4810,12 +4810,12 @@ __metadata: "@spectrum-css/assetlist": "npm:8.1.0" "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" "@spectrum-css/checkbox": ">=10" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/assetlist": optional: true @@ -4833,9 +4833,9 @@ __metadata: resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4846,9 +4846,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4859,9 +4859,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4876,13 +4876,13 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4907,14 +4907,14 @@ __metadata: "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" "@spectrum-css/progresscircle": ">=5" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -4938,12 +4938,12 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/popover": ">=8" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4965,13 +4965,13 @@ __metadata: "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" "@spectrum-css/divider": ">=5" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/alertdialog": optional: true @@ -5035,10 +5035,10 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/fieldlabel": ">=10" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/fieldlabel": optional: true @@ -5051,9 +5051,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5065,10 +5065,10 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5082,10 +5082,10 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5101,12 +5101,12 @@ __metadata: "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/clearbutton": optional: true @@ -5124,10 +5124,10 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5141,10 +5141,10 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: "@spectrum-css/stepper": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/stepper": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/stepper": optional: true @@ -5157,9 +5157,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5170,9 +5170,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5184,11 +5184,11 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/tooltip": "npm:7.1.0" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5208,13 +5208,13 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:6.1.0" "@spectrum-css/textfield": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0" "@spectrum-css/textfield": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -5234,10 +5234,10 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/opacitycheckerboard": optional: true @@ -5251,10 +5251,10 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: "@spectrum-css/swatch": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/swatch": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/swatch": optional: true @@ -5267,9 +5267,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5284,13 +5284,13 @@ __metadata: "@spectrum-css/checkbox": "npm:10.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5312,12 +5312,12 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/picker": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5337,12 +5337,12 @@ __metadata: "@spectrum-css/avatar": "npm:9.1.0" "@spectrum-css/clearbutton": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/avatar": optional: true @@ -5360,10 +5360,10 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tag": ">=10.0.0 <11.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tag": optional: true @@ -5377,10 +5377,10 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -5394,10 +5394,10 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: "@spectrum-css/opacitycheckerboard": "npm:4.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=4.0.0 <5.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/opacitycheckerboard": optional: true @@ -5413,11 +5413,11 @@ __metadata: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/closebutton": "npm:5.0.0-next.2" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5442,7 +5442,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.0.0-next.4, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: @@ -5470,10 +5470,10 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5491,14 +5491,14 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/modal": "npm:7.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" "@spectrum-css/divider": ">=5" "@spectrum-css/icon": ">=9" "@spectrum-css/modal": ">=7" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true @@ -5521,11 +5521,11 @@ __metadata: dependencies: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5540,9 +5540,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5565,9 +5565,9 @@ __metadata: resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: "@spectrum-css/commons": "npm:9.1.4-next.0" - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -5578,9 +5578,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: - "@spectrum-css/tokens": "npm:14.0.0-next.4" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true From af2c0cd1dee7fee876efab6585d1ec1c7d69a6a0 Mon Sep 17 00:00:00 2001 From: Patrick Fulton <pfulton@adobe.com> Date: Fri, 12 Apr 2024 10:57:05 -0400 Subject: [PATCH 036/103] chore(release): release - @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@2.1.1-next.0 - @spectrum-css/tokens@14.0.0-next.6 --- components/actionbar/package.json | 4 +-- components/actionbutton/package.json | 2 +- components/alertbanner/package.json | 4 +-- components/button/package.json | 2 +- components/closebutton/package.json | 13 ++------ components/commons/package.json | 6 ++-- components/dialog/package.json | 4 +-- components/logicbutton/package.json | 2 +- components/modal/package.json | 2 +- components/picker/package.json | 2 +- components/popover/package.json | 2 +- components/toast/package.json | 2 +- components/tooltip/package.json | 2 +- components/underlay/package.json | 2 +- yarn.lock | 47 ++++++++++++---------------- 15 files changed, 41 insertions(+), 55 deletions(-) diff --git a/components/actionbar/package.json b/components/actionbar/package.json index e7e83cf3208..6bbcd38c26f 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0", - "@spectrum-css/closebutton": ">=5.0.0-next.0", + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/actiongroup": "6.1.0", - "@spectrum-css/closebutton": "5.0.0-next.2", + "@spectrum-css/closebutton": "6.1.0", "@spectrum-css/fieldlabel": "10.1.0", "@spectrum-css/popover": "8.2.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 3fad0a7e6e8..4fc5bb1d26d 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 392ec92b2c5..02c19c0f6d0 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=5.0.0-next.0", + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "5.0.0-next.2", + "@spectrum-css/closebutton": "6.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/button/package.json b/components/button/package.json index 492abc990e7..039ab069117 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -41,7 +41,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 2470e42a631..7f5bdfed878 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,10 +1,10 @@ { "name": "@spectrum-css/closebutton", - "version": "5.0.0-next.2", + "version": "6.1.0", "description": "The Spectrum CSS close button component", "license": "Apache-2.0", "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/closebutton", + "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-close-button--docs", "repository": { "type": "git", "url": "https://github.com/adobe/spectrum-css.git", @@ -24,13 +24,6 @@ "./stories/*": "./stories/*" }, "main": "dist/index.css", - "files": [ - "dist/*", - "*.md", - "package.json", - "stories/*", - "metadata/*" - ], "peerDependencies": { "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -44,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/commons/package.json b/components/commons/package.json index c75d5c6bb24..ee9bd8e69b6 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/commons", - "version": "9.1.4-next.0", + "version": "11.0.0", "description": "Common mixins for Spectrum CSS components", "license": "Apache-2.0", "author": "Adobe", @@ -27,10 +27,10 @@ "package.json" ], "peerDependencies": { - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.1" }, "devDependencies": { - "@spectrum-css/tokens": "^16.0.0" + "@spectrum-css/tokens": "workspace:^" }, "keywords": [ "design-system", diff --git a/components/dialog/package.json b/components/dialog/package.json index 9f85aef2d7c..730879c20e9 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0", + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", @@ -51,7 +51,7 @@ "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/closebutton": "5.0.0-next.2", + "@spectrum-css/closebutton": "6.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 39f68738490..16375af1ba8 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -28,7 +28,7 @@ "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/modal/package.json b/components/modal/package.json index b84d584de7d..d9f24e65885 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -28,7 +28,7 @@ "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/picker/package.json b/components/picker/package.json index b61a7499ec8..cae30f9c849 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -53,7 +53,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/helptext": "7.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", diff --git a/components/popover/package.json b/components/popover/package.json index f8be6397aec..83b29d43f32 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -50,7 +50,7 @@ }, "devDependencies": { "@spectrum-css/alertdialog": "4.1.0", - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/dialog": "12.1.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/menu": "9.1.0", diff --git a/components/toast/package.json b/components/toast/package.json index 72337a4bd29..c5bb6dea087 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -31,7 +31,7 @@ }, "devDependencies": { "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "5.0.0-next.2", + "@spectrum-css/closebutton": "6.1.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/tooltip/package.json b/components/tooltip/package.json index c76ab8fcb4b..715e6239739 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -29,7 +29,7 @@ "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/underlay/package.json b/components/underlay/package.json index 903e5f6330d..b36dd0a3959 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -28,7 +28,7 @@ "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/commons": "9.1.4-next.0", + "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/yarn.lock b/yarn.lock index 4a84ab816d7..e8359f5a6a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3728,13 +3728,13 @@ __metadata: resolution: "@spectrum-css/actionbar@workspace:components/actionbar" dependencies: "@spectrum-css/actiongroup": "npm:6.1.0" - "@spectrum-css/closebutton": "npm:5.0.0-next.2" + "@spectrum-css/closebutton": "npm:6.1.0" "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" - "@spectrum-css/closebutton": ">=5.0.0-next.0" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -3756,7 +3756,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -3821,13 +3821,13 @@ __metadata: resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:5.0.0-next.2" + "@spectrum-css/closebutton": "npm:6.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=5.0.0-next.0" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4079,7 +4079,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/tokens": "npm:16.0.1" @@ -4201,11 +4201,11 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/closebutton@npm:5.0.0-next.2, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": +"@spectrum-css/closebutton@npm:6.1.0, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -4399,13 +4399,13 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/commons@npm:9.1.4-next.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" dependencies: - "@spectrum-css/tokens": "npm:^16.0.0" + "@spectrum-css/tokens": "workspace:^" peerDependencies: - "@spectrum-css/tokens": ">=14.0.0-next.0" + "@spectrum-css/tokens": ">=16.0.1" languageName: unknown linkType: soft @@ -4482,13 +4482,13 @@ __metadata: dependencies: "@spectrum-css/button": "npm:14.1.1" "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/closebutton": "npm:5.0.0-next.2" + "@spectrum-css/closebutton": "npm:6.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/closebutton": ">=5.0.0 <6.0.0" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4743,7 +4743,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4832,7 +4832,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4901,7 +4901,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/picker@workspace:components/picker" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/helptext": "npm:7.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/menu": "npm:9.1.0" @@ -4961,7 +4961,7 @@ __metadata: resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: "@spectrum-css/alertdialog": "npm:4.1.0" - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/dialog": "npm:12.1.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/menu": "npm:9.1.0" @@ -5411,7 +5411,7 @@ __metadata: resolution: "@spectrum-css/toast@workspace:components/toast" dependencies: "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:5.0.0-next.2" + "@spectrum-css/closebutton": "npm:6.1.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -5457,18 +5457,11 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tokens@npm:^16.0.0": - version: 16.0.0 - resolution: "@spectrum-css/tokens@npm:16.0.0" - checksum: 10c0/f80225dc86ed51e2d6fed61c917b76439800fe1a192a476d6688bcf321ea48fe7f985bed483f3cd2f28ff244808c1cc6977a2e785d630b9c1db90dc0ba976633 - languageName: node - linkType: hard - "@spectrum-css/tooltip@npm:7.1.0, @spectrum-css/tooltip@workspace:^, @spectrum-css/tooltip@workspace:components/tooltip": version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -5564,7 +5557,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: - "@spectrum-css/commons": "npm:9.1.4-next.0" + "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" From 7ebe95456081987e6a89d8de888d189c4f44084e Mon Sep 17 00:00:00 2001 From: Melissa Thompson <mthompson@heysparkbox.com> Date: Mon, 15 Apr 2024 12:51:09 -0400 Subject: [PATCH 037/103] feat(switch): s2 migration (#2651) * feat(switch): s2 migration * chore: remove themes * fix: animation * fix: whcm light mode unchecked handle shows * docs(storybook): align chromatic setup with new standard * fix: checked corners for non-retina display * fix: whcm handle selected color * fix: namespace mods, use semantic tokens instead of global * fix: handle state colors --- components/switch/dist/metadata.json | 208 +++++++----- components/switch/index.css | 476 ++++++++++++--------------- 2 files changed, 322 insertions(+), 362 deletions(-) diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 2807b50faad..883098590e0 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -2,85 +2,66 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Switch", + ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch", + ".spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", ".spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label", ".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", ".spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch", - ".spectrum-Switch .spectrum-Switch-input:disabled:not(:checked) + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after", - ".spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label", - ".spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch", - ".spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch", + ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch", + ".spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", ".spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch", - ".spectrum-Switch .spectrum-Switch-input[disabled]:not(:checked) + .spectrum-Switch-switch:before", - ".spectrum-Switch .spectrum-Switch-switch", - ".spectrum-Switch .spectrum-Switch-switch:before", ".spectrum-Switch--disabled", + ".spectrum-Switch--emphasized", ".spectrum-Switch--sizeL", ".spectrum-Switch--sizeS", ".spectrum-Switch--sizeXL", ".spectrum-Switch-input", ".spectrum-Switch-input:checked + .spectrum-Switch-switch", ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before", + ".spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)", + ".spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch", ".spectrum-Switch-input:disabled", - ".spectrum-Switch-input:disabled + .spectrum-Switch-switch", - ".spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", - ".spectrum-Switch-input:disabled ~ .spectrum-Switch-label", - ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", - ".spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", + ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch", ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after", + ".spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before", + ".spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label", ".spectrum-Switch-input[disabled]", - ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch", - ".spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", - ".spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", - ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", - ".spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", ".spectrum-Switch-label", + ".spectrum-Switch-label:lang(ja)", + ".spectrum-Switch-label:lang(ko)", + ".spectrum-Switch-label:lang(zh)", ".spectrum-Switch-switch", ".spectrum-Switch-switch:after", ".spectrum-Switch-switch:before", - ".spectrum-Switch.spectrum-Switch--emphasized", - ".spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before", - ".spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label", - ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", - ".spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label", - ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before", + ".spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch", + ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before", + ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before", + ".spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)", + ".spectrum-Switch:active .spectrum-Switch-switch", + ".spectrum-Switch:active .spectrum-Switch-switch:before", + ".spectrum-Switch:active ~ .spectrum-Switch-label", + ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch", + ".spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before", ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before", ".spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label", - ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after", - ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label", - ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch", - ".spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input:not(:checked) + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before", ".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", - "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before" + ".spectrum-Switch:hover .spectrum-Switch-switch", + ".spectrum-Switch:hover .spectrum-Switch-switch:before", + ".spectrum-Switch:hover ~ .spectrum-Switch-label", + "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before", + "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before" ], "modifiers": [ "--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", @@ -88,28 +69,42 @@ "--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", - "--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-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", "--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" ], @@ -121,6 +116,18 @@ "--spectrum-switch-background-color-selected-down", "--spectrum-switch-background-color-selected-focus", "--spectrum-switch-background-color-selected-hover", + "--spectrum-switch-border-color-default", + "--spectrum-switch-border-color-disabled", + "--spectrum-switch-border-color-down", + "--spectrum-switch-border-color-focus", + "--spectrum-switch-border-color-hover", + "--spectrum-switch-border-color-selected-default", + "--spectrum-switch-border-color-selected-down", + "--spectrum-switch-border-color-selected-focus", + "--spectrum-switch-border-color-selected-hover", + "--spectrum-switch-border-radius", + "--spectrum-switch-border-width", + "--spectrum-switch-cjk-line-height", "--spectrum-switch-control-height", "--spectrum-switch-control-height-extra-large", "--spectrum-switch-control-height-large", @@ -133,24 +140,34 @@ "--spectrum-switch-control-width-medium", "--spectrum-switch-control-width-small", "--spectrum-switch-focus-indicator-color", + "--spectrum-switch-focus-indicator-gap", "--spectrum-switch-focus-indicator-thickness", "--spectrum-switch-font-size", - "--spectrum-switch-handle-background-color", - "--spectrum-switch-handle-border-color-default", - "--spectrum-switch-handle-border-color-disabled", - "--spectrum-switch-handle-border-color-down", - "--spectrum-switch-handle-border-color-focus", - "--spectrum-switch-handle-border-color-hover", - "--spectrum-switch-handle-border-color-selected-default", - "--spectrum-switch-handle-border-color-selected-down", - "--spectrum-switch-handle-border-color-selected-focus", - "--spectrum-switch-handle-border-color-selected-hover", + "--spectrum-switch-handle-background-color-default", + "--spectrum-switch-handle-background-color-disabled", + "--spectrum-switch-handle-background-color-down", + "--spectrum-switch-handle-background-color-focus", + "--spectrum-switch-handle-background-color-hover", + "--spectrum-switch-handle-background-color-selected", + "--spectrum-switch-handle-background-color-selected-disabled", + "--spectrum-switch-handle-selected-size", + "--spectrum-switch-handle-selected-size-extra-large", + "--spectrum-switch-handle-selected-size-large", + "--spectrum-switch-handle-selected-size-medium", + "--spectrum-switch-handle-selected-size-small", + "--spectrum-switch-handle-size", + "--spectrum-switch-handle-size-extra-large", + "--spectrum-switch-handle-size-large", + "--spectrum-switch-handle-size-medium", + "--spectrum-switch-handle-size-small", "--spectrum-switch-label-color-default", "--spectrum-switch-label-color-disabled", "--spectrum-switch-label-color-down", "--spectrum-switch-label-color-focus", "--spectrum-switch-label-color-hover", + "--spectrum-switch-line-height", "--spectrum-switch-min-height", + "--spectrum-switch-spacing-bottom-to-label", "--spectrum-switch-spacing-top-to-control", "--spectrum-switch-spacing-top-to-label", "--spectrum-switch-top-to-control-extra-large", @@ -159,20 +176,29 @@ "--spectrum-switch-top-to-control-small" ], "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", + "--spectrum-accent-background-color-default", + "--spectrum-accent-background-color-down", + "--spectrum-accent-background-color-hover", + "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-animation-duration-200", "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-bottom-to-text-300", + "--spectrum-component-bottom-to-text-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-corner-radius-full", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -181,17 +207,12 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-200", - "--spectrum-gray-50", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", + "--spectrum-gray-25", "--spectrum-line-height-100", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", + "--spectrum-neutral-background-color-default", + "--spectrum-neutral-background-color-down", + "--spectrum-neutral-background-color-hover", + "--spectrum-neutral-background-color-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", @@ -205,22 +226,29 @@ "passthroughs": [], "high-contrast": [ "--highcontrast-switch-background-color", + "--highcontrast-switch-background-color-disabled", "--highcontrast-switch-background-color-selected-default", "--highcontrast-switch-background-color-selected-disabled", "--highcontrast-switch-background-color-selected-down", "--highcontrast-switch-background-color-selected-focus", "--highcontrast-switch-background-color-selected-hover", + "--highcontrast-switch-border-color-default", + "--highcontrast-switch-border-color-disabled", + "--highcontrast-switch-border-color-down", + "--highcontrast-switch-border-color-focus", + "--highcontrast-switch-border-color-hover", + "--highcontrast-switch-border-color-selected-default", + "--highcontrast-switch-border-color-selected-down", + "--highcontrast-switch-border-color-selected-focus", + "--highcontrast-switch-border-color-selected-hover", "--highcontrast-switch-focus-indicator-color", - "--highcontrast-switch-handle-background-color", - "--highcontrast-switch-handle-border-color-default", - "--highcontrast-switch-handle-border-color-disabled", - "--highcontrast-switch-handle-border-color-down", - "--highcontrast-switch-handle-border-color-focus", - "--highcontrast-switch-handle-border-color-hover", - "--highcontrast-switch-handle-border-color-selected-default", - "--highcontrast-switch-handle-border-color-selected-down", - "--highcontrast-switch-handle-border-color-selected-focus", - "--highcontrast-switch-handle-border-color-selected-hover", + "--highcontrast-switch-handle-background-color-default", + "--highcontrast-switch-handle-background-color-disabled", + "--highcontrast-switch-handle-background-color-down", + "--highcontrast-switch-handle-background-color-focus", + "--highcontrast-switch-handle-background-color-hover", + "--highcontrast-switch-handle-background-color-selected", + "--highcontrast-switch-handle-background-color-selected-disabled", "--highcontrast-switch-label-color-default", "--highcontrast-switch-label-color-disabled", "--highcontrast-switch-label-color-down", diff --git a/components/switch/index.css b/components/switch/index.css index 24a8e0734c5..2e0a88fe4f1 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -12,68 +12,82 @@ */ .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - - --spectrum-switch-background-color: var(--spectrum-gray-200); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); --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-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-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-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-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(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-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); + + /* 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--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-border-radius: var(--spectrum-corner-radius-full); } .spectrum-Switch--disabled { --spectrum-switch-label-color-default: var(--spectrum-disabled-content-color); } +.spectrum-Switch--emphasized { + --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 { --spectrum-switch-min-height: var(--spectrum-component-height-75); --spectrum-switch-control-width: var(--spectrum-switch-control-width-small); @@ -81,6 +95,10 @@ --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-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-75); } @@ -92,6 +110,10 @@ --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); } @@ -103,6 +125,10 @@ --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); } @@ -117,13 +143,8 @@ } .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; @@ -136,36 +157,38 @@ 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))); + color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color, 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(--spectrum-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 { @@ -195,191 +218,148 @@ 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; + .spectrum-Switch:active & { + border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))); + } - inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); + .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))); + } - inset-block-start: 0; - inset-inline-start: 0; + .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))); - 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: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: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))); + } } - /* :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: ""; + .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))); + } + + /* :before is used for the handle of the switch */ + &::before { display: block; position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: 0; + content: ""; + box-sizing: border-box; - 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; - } -} + transition: background var(--spectrum-animation-duration-100) ease-in-out, + border var(--spectrum-animation-duration-100) ease-in-out, + transform var(--spectrum-animation-duration-100) ease-in-out, + box-shadow var(--spectrum-animation-duration-100) ease-in-out; -.spectrum-Switch { - .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); + inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); + block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); - &::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))); - } - } -} + 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); -.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; - } - } + 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-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + .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))); } - /* 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:active & { + background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))); } - &:disabled, - &[disabled] { - & + .spectrum-Switch-switch { - background-color: var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)); - } + .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))); + } - & + .spectrum-Switch-switch::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } + /* 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))); - & ~ .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-selected-size, var(--spectrum-switch-handle-selected-size)); + block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-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-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); - &:checked + .spectrum-Switch-switch::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } + transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))); - &:checked ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); + &:dir(rtl) { + transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))); } - } - } -} -.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:hover & { + background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); } } - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + & { + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); } - /* 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))); + .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)); - &::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))); + &: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)); } } } -} -/* 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))); - } - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); - } - } - - /* 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))); - } - - & + .spectrum-Switch-switch::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-label { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); - } - } -} + /* :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; -/* 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))); + transition: + opacity var(--spectrum-animation-duration-100) ease-out, + outline-offset var(--spectrum-animation-duration-100) ease-out, + border var(--spectrum-animation-duration-100) ease-in-out; - &::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))); + .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(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled)); + 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))); } } @@ -387,12 +367,11 @@ 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 +389,36 @@ --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-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-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-selected: HighlightText; + --highcontrast-switch-handle-background-color-selected-disabled: ButtonFace; - --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-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; - - forced-color-adjust: none; - - .spectrum-Switch-input { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px ButtonText; - } - } - - &: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; - } - - &:checked + .spectrum-Switch-switch::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; - } - - &:not(:checked) + .spectrum-Switch-switch::before { - border-color: GrayText; - background-color: ButtonFace; - } - - &:checked + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: GrayText; - } - - &:checked + .spectrum-Switch-switch::before { - border-color: GrayText; - background-color: ButtonFace; - } - - & ~ .spectrum-Switch-label { - color: GrayText; - } - } - } } } From ae38e22bd601b8e5d9253140cb936a5bffb20b8e Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 1 May 2024 14:30:28 -0400 Subject: [PATCH 038/103] feat(button): migrate to Spectrum 2 (#2600) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor(button): spectrum 2 styles and cleanup Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default. * fix(button): high contrast - ensure matching color pairs for accent Ensures that a matching background and foreground color pair is used for the high contrast colors, for Accent hover, down, and focus. Changes the content color to HighlightText to ensure contrast when these have a background set to Highlight. * docs(button): update documentation and storybook for s2 - Some improvements and additions to the spectrum 2 release notes. - Updates migration guide notes to include version and dates for the previous notes. - Removes spectrum-Button--sizeM class from examples. Excludes the spectrum-Button--sizeM class in the storybook template. - Removes medium size class from storybook - Fixes default flex alignment stretching buttons vertically in Storybook to the tallest button. * fix(button): calculate corner rounding to support wrapping design Calculate corner rounding based on the component height, so that the rounding looks correct when there is wrapping text. Otherwise, when the button wraps, it has too much rounding as compared to the design when using the corner-radius-full token. * feat(button): outline option removals and use accent as the default Removes the outline option for the accent and negative variants, and makes sure that the accent variant is the default. == outline option removal == Per design feedback and updated design spec changelog, the outline treatment (style) is no longer supported for the Accent and Negative color variants: "Outline buttons are no longer available in accent and negative options — use the filled variant instead" This removes their CSS, lists the change in the migration notes, and disables the treatment control for the Accent and Negative stories. It also removes the outline example in the template for those two stories. == use accent as the default == Use accent styles for the default button when there is no variant class applied, to match the default defined on the guidelines. * fix(button): additional s2 style adjustments and organization - make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting * docs(button): custom mdx docs page Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items. * chore(button): add changeset * build(button): use beta version of commons dependency Since the commons version on main was updated to 10.0, the Button started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch. * chore(button): clear up linter warnings Fixes warnings and errors from stylelint and eslint. * fix(button): correct focus indicator rounding and basebutton mod The focus indicator rounding needed an additional calc in order to have the correct rounding. While testing --mod-button-focus-ring-gap and some other mods, it was also noticed that a declaration being imported from basebutton was causing some of the mod names to be different and the mod to not work correctly (basebutton is generating a selector for the margin of .spectrum-Button:focus-visible::after). --- .changeset/nine-kings-repair.md | 15 + .storybook/assets/base.css | 8 + .storybook/manager.js | 2 +- components/button/dist/metadata.json | 87 +-- components/button/index.css | 911 ++++++++++----------------- components/button/stories/button.mdx | 100 ++- 6 files changed, 428 insertions(+), 695 deletions(-) create mode 100644 .changeset/nine-kings-repair.md 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/.storybook/assets/base.css b/.storybook/assets/base.css index fbf3f32e582..b6c2c73d6a5 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -39,6 +39,14 @@ body { background-color: var(--spectrum-background-layer-1-color); } +.spectrum .spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black); +} + +.spectrum .spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white) +} + /* Hide the SVG elements that only include references */ svg:has(symbol):not(:has(use)) { display: none; diff --git a/.storybook/manager.js b/.storybook/manager.js index 82598b04ffb..1441c73b39f 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -65,7 +65,7 @@ addons.setConfig({ sidebar: { showRoots: false, filters: { - patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')), + patterns: (item) => !item.id.includes('forced-colors') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)), } }, }); diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index a8fb60a475d..24489b26f64 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -6,53 +6,38 @@ ".spectrum-Button .spectrum-Icon", ".spectrum-Button .spectrum-Icon + .spectrum-Button-label", ".spectrum-Button .spectrum-ProgressCircle", - ".spectrum-Button--noWrap .spectrum-Button-label", ".spectrum-Button--sizeL", ".spectrum-Button--sizeS", + ".spectrum-Button--sizeS.spectrum-Button--iconOnly", ".spectrum-Button--sizeXL", ".spectrum-Button-label", ".spectrum-Button-label:empty", ".spectrum-Button.is-disabled", + ".spectrum-Button.is-focused", ".spectrum-Button.is-focused:after", ".spectrum-Button.is-pending", ".spectrum-Button.is-pending .spectrum-Button-label", ".spectrum-Button.is-pending .spectrum-Icon", ".spectrum-Button.is-pending .spectrum-ProgressCircle", - ".spectrum-Button.is-selected", - ".spectrum-Button.is-selected.spectrum-Button--emphasized", ".spectrum-Button.spectrum-Button--accent", - ".spectrum-Button.spectrum-Button--accent.spectrum-Button--fill", - ".spectrum-Button.spectrum-Button--accent.spectrum-Button--outline", + ".spectrum-Button.spectrum-Button--accent .spectrum-Button-label", ".spectrum-Button.spectrum-Button--iconOnly", ".spectrum-Button.spectrum-Button--iconOnly .spectrum-Icon", ".spectrum-Button.spectrum-Button--iconOnly:after", ".spectrum-Button.spectrum-Button--negative", - ".spectrum-Button.spectrum-Button--negative.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--outline", ".spectrum-Button.spectrum-Button--primary", ".spectrum-Button.spectrum-Button--primary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--secondary:not(.spectrum-Button--outline)", ".spectrum-Button.spectrum-Button--staticBlack", - ".spectrum-Button.spectrum-Button--staticBlack.is-selected", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline:not(.spectrum-Button--secondary)", - ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary:not(.spectrum-Button--outline)", ".spectrum-Button.spectrum-Button--staticWhite", - ".spectrum-Button.spectrum-Button--staticWhite.is-selected", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline.spectrum-Button--secondary", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline:not(.spectrum-Button--secondary)", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", - ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary:not(.spectrum-Button--outline)", ".spectrum-Button::-moz-focus-inner", ".spectrum-Button:active", ".spectrum-Button:after", @@ -61,6 +46,8 @@ ".spectrum-Button:focus-visible", ".spectrum-Button:focus-visible:after", ".spectrum-Button:hover", + ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)", + ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label", ".spectrum-Button[pending]", ".spectrum-Button[pending] .spectrum-Button-label", ".spectrum-Button[pending] .spectrum-Icon", @@ -68,7 +55,6 @@ "a.spectrum-Button" ], "modifiers": [ - "--mod-bold-font-weight", "--mod-button-animation-duration", "--mod-button-background-color-default", "--mod-button-background-color-disabled", @@ -91,29 +77,25 @@ "--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-max-inline-size", "--mod-button-min-width", "--mod-button-padding-label-to-icon", - "--mod-button-static-content-color", "--mod-button-text-align", "--mod-button-text-align-with-icon", "--mod-button-top-to-icon", - "--mod-button-top-to-text", - "--mod-focus-indicator-gap", - "--mod-static-black-focus-indicator-color" + "--mod-button-top-to-text" ], "component": [ "--spectrum-button-animation-duration", @@ -146,21 +128,14 @@ "--spectrum-button-focus-ring-gap", "--spectrum-button-focus-ring-thickness", "--spectrum-button-font-size", + "--spectrum-button-font-weight", "--spectrum-button-height", + "--spectrum-button-icon-size-difference", "--spectrum-button-intended-icon-size", "--spectrum-button-line-height", "--spectrum-button-min-width", "--spectrum-button-minimum-width-multiplier", "--spectrum-button-padding-label-to-icon", - "--spectrum-button-sized-bottom-to-text", - "--spectrum-button-sized-edge-to-text", - "--spectrum-button-sized-edge-to-visual", - "--spectrum-button-sized-edge-to-visual-only", - "--spectrum-button-sized-font-size", - "--spectrum-button-sized-height", - "--spectrum-button-sized-padding-label-to-icon", - "--spectrum-button-sized-top-to-icon", - "--spectrum-button-sized-top-to-text", "--spectrum-button-top-to-icon", "--spectrum-button-top-to-text", "--spectrum-button-top-to-text-extra-large", @@ -173,15 +148,6 @@ "--spectrum-accent-background-color-down", "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-200", - "--spectrum-accent-color-300", - "--spectrum-accent-color-900", - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-black", "--spectrum-bold-font-weight", @@ -209,6 +175,7 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-300", "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-full", "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", @@ -233,9 +200,6 @@ "--spectrum-gray-25", "--spectrum-gray-300", "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-icon-block-size", @@ -244,15 +208,6 @@ "--spectrum-negative-background-color-down", "--spectrum-negative-background-color-hover", "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-200", - "--spectrum-negative-color-300", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", "--spectrum-neutral-background-color-default", "--spectrum-neutral-background-color-down", "--spectrum-neutral-background-color-hover", @@ -261,10 +216,6 @@ "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-progress-circle-thickness-medium", "--spectrum-sans-font-family-stack", "--spectrum-static-black-focus-indicator-color", @@ -273,18 +224,19 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-1000", + "--spectrum-transparent-black-100", + "--spectrum-transparent-black-200", + "--spectrum-transparent-black-25", "--spectrum-transparent-black-300", "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-black-600", - "--spectrum-transparent-black-700", + "--spectrum-transparent-black-800", "--spectrum-transparent-black-900", - "--spectrum-transparent-white-1000", + "--spectrum-transparent-white-100", + "--spectrum-transparent-white-200", + "--spectrum-transparent-white-25", "--spectrum-transparent-white-300", "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-transparent-white-600", + "--spectrum-transparent-white-800", "--spectrum-transparent-white-900", "--spectrum-white", "--spectrum-workflow-icon-size-100", @@ -314,6 +266,7 @@ "--highcontrast-button-content-color-disabled", "--highcontrast-button-content-color-down", "--highcontrast-button-content-color-focus", - "--highcontrast-button-content-color-hover" + "--highcontrast-button-content-color-hover", + "--highcontrast-button-focus-ring-color" ] } diff --git a/components/button/index.css b/components/button/index.css index dd74678f4be..e8d6c54c18c 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -14,591 +14,407 @@ @import "@spectrum-css/commons/basebutton.css"; .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-button-sized-height: var(--spectrum-component-height-100); - --spectrum-button-sized-font-size: var(--spectrum-font-size-100); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); + + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --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); - &.is-selected { - --mod-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --mod-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --mod-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --mod-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } - - &.spectrum-Button--primary { - --mod-button-content-color-default: var(--spectrum-gray-25); - --mod-button-content-color-hover: var(--spectrum-gray-25); - --mod-button-content-color-down: var(--spectrum-gray-25); - --mod-button-content-color-focus: var(--spectrum-gray-25); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - } - } - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-gray-100); - - &:not(.spectrum-Button--outline) { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - } - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-400); - --mod-button-background-color-focus: var(--spectrum-gray-200); - - --mod-button-border-color-default: var(--spectrum-gray-200); - } - } - - /* static white: double the selector, double the fun (specificity...) */ - &.spectrum-Button--staticWhite { - --mod-button-background-color-default: var(--spectrum-transparent-white-900); - --mod-button-background-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-background-color-down: var(--spectrum-transparent-white-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-white-1000); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-white-300); - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --mod-button-border-color-default: var(--spectrum-transparent-white-400); - --mod-button-border-color-hover: var(--spectrum-transparent-white-500); - --mod-button-border-color-down: var(--spectrum-transparent-white-600); - --mod-button-border-color-focus: var(--spectrum-transparent-white-500); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-border-color-default: var(--spectrum-transparent-white-900); - --mod-button-border-color-hover: var(--spectrum-transparent-white-1000); - --mod-button-border-color-down: var(--spectrum-transparent-white-1000); - --mod-button-border-color-focus: var(--spectrum-transparent-white-1000); - } - - &.spectrum-Button--secondary { - --mod-button-background-color-hover: var(--spectrum-transparent-white-400); - --mod-button-background-color-down: var(--spectrum-transparent-white-500); - --mod-button-background-color-focus: var(--spectrum-transparent-white-400); - } - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --mod-button-background-color-default: var(--spectrum-transparent-black-900); - --mod-button-background-color-hover: var(--spectrum-transparent-black-1000); - --mod-button-background-color-down: var(--spectrum-transparent-black-1000); - --mod-button-background-color-focus: var(--spectrum-transparent-black-1000); - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--secondary { - --mod-button-background-color-default: var(--spectrum-transparent-black-300); - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-border-color-default: var(--spectrum-transparent-black-400); - --mod-button-border-color-hover: var(--spectrum-transparent-black-500); - --mod-button-border-color-down: var(--spectrum-transparent-black-600); - --mod-button-border-color-focus: var(--spectrum-transparent-black-500); - } - } - - &.spectrum-Button--outline { - &:not(.spectrum-Button--secondary) { - --mod-button-background-color-hover: var(--spectrum-transparent-black-400); - --mod-button-background-color-down: var(--spectrum-transparent-black-500); - --mod-button-background-color-focus: var(--spectrum-transparent-black-400); - - --mod-button-content-color-default: var(--spectrum-black); - --mod-button-content-color-hover: var(--spectrum-black); - --mod-button-content-color-down: var(--spectrum-black); - --mod-button-content-color-focus: var(--spectrum-black); - - --mod-button-border-color-default: var(--spectrum-transparent-black-500); - --mod-button-border-color-hover: var(--spectrum-transparent-black-600); - --mod-button-border-color-down: var(--spectrum-transparent-black-700); - --mod-button-border-color-focus: var(--spectrum-transparent-black-600); - } - } - } - - /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */ + --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-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + --spectrum-button-border-radius: var(--spectrum-corner-radius-full); } } .spectrum-Button--sizeS { - --spectrum-button-sized-height: var(--spectrum-component-height-75); - --spectrum-button-sized-font-size: var(--spectrum-font-size-75); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-small); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-small); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + --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(--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--iconOnly { + --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + } } .spectrum-Button--sizeL { - --spectrum-button-sized-height: var(--spectrum-component-height-200); - --spectrum-button-sized-font-size: var(--spectrum-font-size-200); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-large); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-large); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + --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(--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); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200); } .spectrum-Button--sizeXL { - --spectrum-button-sized-height: var(--spectrum-component-height-300); - --spectrum-button-sized-font-size: var(--spectrum-font-size-300); - - --spectrum-button-sized-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-sized-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-sized-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); - --spectrum-button-sized-padding-label-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-button-sized-top-to-text: var(--spectrum-button-top-to-text-extra-large); - --spectrum-button-sized-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); - --spectrum-button-sized-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + --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(--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); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); } -/* default for all buttons */ +/* Variants and colors */ .spectrum-Button { - &.is-selected { - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-background-color-disabled: var(--spectrum-disabled-background-color); - --mod-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --mod-button-background-color-default: var(--spectrum-accent-background-color-default); - --mod-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --mod-button-background-color-down: var(--spectrum-accent-background-color-down); - --mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } + --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 { - --mod-button-background-color-default: var(--spectrum-accent-background-color-default); - --mod-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --mod-button-background-color-down: var(--spectrum-accent-background-color-down); - --mod-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - --mod-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-accent-color-200); - --mod-button-background-color-down: var(--spectrum-accent-color-300); - --mod-button-background-color-focus: var(--spectrum-accent-color-200); - - --mod-button-border-color-default: var(--spectrum-accent-color-900); - --mod-button-border-color-hover: var(--spectrum-accent-color-1000); - --mod-button-border-color-down: var(--spectrum-accent-color-1100); - --mod-button-border-color-focus: var(--spectrum-accent-color-1000); - --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --mod-button-content-color-default: var(--spectrum-accent-content-color-default); - --mod-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --mod-button-content-color-down: var(--spectrum-accent-content-color-down); - --mod-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); - } + --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 { - --mod-button-background-color-default: var(--spectrum-negative-background-color-default); - --mod-button-background-color-hover: var(--spectrum-negative-background-color-hover); - --mod-button-background-color-down: var(--spectrum-negative-background-color-down); - --mod-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - - --mod-button-content-color-default: var(--spectrum-white); - --mod-button-content-color-hover: var(--spectrum-white); - --mod-button-content-color-down: var(--spectrum-white); - --mod-button-content-color-focus: var(--spectrum-white); - - --mod-button-background-color-disabled: var(--spectrum-disabled-background-color); - --mod-button-border-color-disabled: transparent; - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --mod-button-background-color-hover: var(--spectrum-negative-color-200); - --mod-button-background-color-down: var(--spectrum-negative-color-300); - --mod-button-background-color-focus: var(--spectrum-negative-color-200); - - --mod-button-border-color-default: var(--spectrum-negative-color-900); - --mod-button-border-color-hover: var(--spectrum-negative-color-1000); - --mod-button-border-color-down: var(--spectrum-negative-color-1100); - --mod-button-border-color-focus: var(--spectrum-negative-color-1000); - --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --mod-button-content-color-default: var(--spectrum-negative-content-color-default); - --mod-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --mod-button-content-color-down: var(--spectrum-negative-content-color-down); - --mod-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); - } + --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 { - --mod-button-background-color-default: var(--spectrum-neutral-background-color-default); - --mod-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --mod-button-background-color-down: var(--spectrum-neutral-background-color-down); - --mod-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - --mod-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; + --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 { - --mod-button-border-color-default: var(--spectrum-gray-800); - --mod-button-border-color-hover: var(--spectrum-gray-900); - --mod-button-border-color-down: var(--spectrum-gray-900); - --mod-button-border-color-focus: var(--spectrum-gray-900); - - --mod-button-content-color-default: var(--spectrum-neutral-content-color-default); - --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); - --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); + --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 { - --mod-button-background-color-disabled: var(--spectrum-disabled-background-color); - - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; + --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); - --mod-button-content-color-default: var(--spectrum-neutral-content-color-default); - --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); - --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); + --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 { - --mod-button-background-color-down: var(--spectrum-gray-400); - - --mod-button-border-color-default: var(--spectrum-gray-300); - --mod-button-border-color-hover: var(--spectrum-gray-400); - --mod-button-border-color-down: var(--spectrum-gray-500); - --mod-button-border-color-focus: var(--spectrum-gray-400); - --mod-button-border-color-disabled: var(--spectrum-disabled-border-color); - - --mod-button-content-color-default: var(--spectrum-neutral-content-color-default); - --mod-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --mod-button-content-color-down: var(--spectrum-neutral-content-color-down); - --mod-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - --mod-button-content-color-disabled: var(--spectrum-disabled-content-color); + --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); } } - &.spectrum-Button--quiet { - --mod-button-background-color-hover: var(--spectrum-gray-200); - --mod-button-background-color-down: var(--spectrum-gray-300); - --mod-button-background-color-focus: var(--spectrum-gray-200); + /* ---- 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); - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; - } + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; - - &.is-selected { - /* @deprecated previous mapping for --mod-button-static-content-color was applied to the is-selected state */ - --mod-button-content-color-default: var(--mod-button-static-content-color); - --mod-button-content-color-hover: var(--mod-button-static-content-color); - --mod-button-content-color-down: var(--mod-button-static-content-color); - --mod-button-content-color-focus: var(--mod-button-static-content-color); - - --mod-button-border-color-disabled: transparent; + --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 { - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; - --mod-button-border-color-disabled: transparent; - } + --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--quiet { - --mod-button-border-color-default: transparent; - --mod-button-border-color-hover: transparent; - --mod-button-border-color-down: transparent; - --mod-button-border-color-focus: transparent; + --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); - --mod-button-border-color-disabled: transparent; + &.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); + } } } - &.spectrum-Button--staticWhite { - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-button-focus-ring-color: var(--spectrum-static-white-focus-indicator-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--secondary:not(.spectrum-Button--outline) { - --mod-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - } + --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 { - --mod-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --mod-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --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--staticBlack { - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-button-focus-ring-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-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--secondary:not(.spectrum-Button--outline) { - --mod-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - } + --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 { - --mod-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --mod-button-border-color-disabled: var(--spectrum-disabled-static-black-border-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-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--quiet, - &.spectrum-Button--outline { - --mod-button-background-color-default: transparent; - --mod-button-background-color-disabled: transparent; - } } .spectrum-Button { - --spectrum-button-height: var(--mod-button-height, var(--spectrum-button-sized-height)); - --spectrum-button-min-width: var(--mod-button-min-width, calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))); - - --spectrum-button-line-height: var(--mod-button-line-height, 1.2); /* Hack to keep buttons at 32px */ - --spectrum-button-font-size: var(--mod-button-font-size, var(--spectrum-button-sized-font-size)); - --spectrum-button-padding-label-to-icon: var(--mod-button-padding-label-to-icon, var(--spectrum-button-sized-padding-label-to-icon)); - - --spectrum-button-edge-to-visual: var(--mod-button-edge-to-visual, var(--spectrum-button-sized-edge-to-visual)); - --spectrum-button-edge-to-visual-only: var(--mod-button-edge-to-visual-only, var(--spectrum-button-sized-edge-to-visual-only)); - --spectrum-button-edge-to-text: var(--mod-button-edge-to-text, var(--spectrum-button-sized-edge-to-text)); - - --spectrum-button-top-to-text: var(--mod-button-top-to-text, var(--spectrum-button-sized-top-to-text)); - --spectrum-button-bottom-to-text: var(--mod-button-bottom-to-text, var(--spectrum-button-sized-bottom-to-text)); - --spectrum-button-top-to-icon: var(--mod-button-top-to-icon, var(--spectrum-button-sized-top-to-icon)); - - --spectrum-button-focus-ring-thickness: var(--mod-button-focus-ring-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-button-focus-indicator-color: var(--mod-button-focus-ring-color, var(--spectrum-focus-indicator-color)); - - --spectrum-button-animation-duration: var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)); - --spectrum-button-border-width: var(--mod-button-border-width, var(--spectrum-border-width-200)); - - --spectrum-button-focus-ring-gap: var(--mod-focus-indicator-gap, var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))); - --spectrum-button-border-radius: var(--mod-button-border-radius, calc(var(--spectrum-button-height) / 2)); - - --spectrum-button-content-color-default: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-neutral-content-color-default))); - --spectrum-button-content-color-hover: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-button-content-color-down: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-neutral-content-color-down))); - --spectrum-button-content-color-focus: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); - --spectrum-button-content-color-disabled: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-disabled-content-color))); - - /* @passthrough -- align the progress circle in the button */ - --mod-progress-circle-position: absolute; - @extend %spectrum-BaseButton; - @extend %spectrum-ButtonWithFocusRing; - border-radius: var(--spectrum-button-border-radius); - border-width: var(--spectrum-button-border-width); + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); border-style: solid; - font-size: var(--spectrum-button-font-size); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); - gap: var(--spectrum-button-padding-label-to-icon); - max-inline-size: var(--mod-button-max-inline-size, none); - min-inline-size: var(--spectrum-button-min-width); - min-block-size: var(--spectrum-button-height); - - /* Start with text-only padding */ + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + 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)); + padding-block: 0; - padding-inline: var(--spectrum-button-edge-to-text); + padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); position: relative; + 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); - 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))); + .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. */ + --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))); - /* let staticColor variants inherit their color */ - color: var(--spectrum-button-content-color-default, inherit); - transition: - border var(--spectrum-button-animation-duration, 130ms) linear, - color var(--spectrum-button-animation-duration, 130ms) linear, - background-color var(--spectrum-button-animation-duration, 130ms) linear; + margin-block-start: var(--mod-button-icon-margin-block-start, 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(--spectrum-button-icon-size-difference, 0px) / 2))); - &.spectrum-Button--outline { - background-color: transparent; + margin-inline-start: calc(var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))); + color: inherit; + flex-shrink: 0; + align-self: flex-start; } + /* Focus indicator */ &::after { + content: ""; + display: block; position: absolute; inset: 0; - margin: var(--mod-button-focus-ring-border-radius, calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)); - transition: box-shadow var(--spectrum-button-animation-duration) ease-in-out; + 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: ""; + } - /* correct focus indicator radius for t-shirt sizing */ - border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-focus-indicator-gap)); + &: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(--spectrum-button-focus-indicator-color))); + } + } + + /* 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))); border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); - color: var(--spectrum-button-content-color-hover); - box-shadow: none; + color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); } &:focus-visible { background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); - color: var(--spectrum-button-content-color-focus); - - /* Remove the default focus outline */ - box-shadow: none; - outline: none; - - &::after { - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color); - } - } - - &:focus-visible, - &.is-focused { - &::after { - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) var(--spectrum-button-focus-indicator-color); - } + color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); } &:active { 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(--spectrum-button-content-color-down); - box-shadow: none; - + 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)); } @@ -613,7 +429,7 @@ &.is-pending { background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); - color: var(--spectrum-button-content-color-disabled); + color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); } .spectrum-Icon { @@ -652,15 +468,15 @@ .spectrum-Button-label { visibility: visible; opacity: 1; - transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; } .spectrum-ProgressCircle { visibility: hidden; opacity: 0; transition: - opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out, - visibility 0ms linear var(--spectrum-button-animation-duration, 130ms); + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); } &[pending], @@ -672,48 +488,15 @@ visibility: hidden; opacity: 0; transition: - opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out, - visibility 0ms linear var(--spectrum-button-animation-duration, 130ms); + opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out, + visibility 0ms linear var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)); } .spectrum-ProgressCircle { visibility: visible; opacity: 1; - transition: opacity var(--spectrum-button-animation-duration, 130ms) ease-in-out; - } - } - - .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, calc(var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)))); - - margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + (var(--_icon-size-difference, 0px) / 2)))); - - margin-inline-start: calc(var(--spectrum-button-edge-to-visual) - var(--spectrum-button-edge-to-text)); - color: inherit; - flex-shrink: 0; - align-self: flex-start; - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--spectrum-button-edge-to-visual-only) - var(--spectrum-button-border-width)); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; + transition: opacity var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) ease-in-out; } - - &::after { - border-radius: 50%; - } - } - - .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); } } @@ -723,75 +506,67 @@ a.spectrum-Button { .spectrum-Button-label { @extend %spectrum-ButtonLabel; - padding-block-start: calc(var(--spectrum-button-top-to-text) - var(--spectrum-button-border-width)); - padding-block-end: calc(var(--spectrum-button-bottom-to-text) - var(--spectrum-button-border-width)); - line-height: var(--spectrum-button-line-height); + 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); +} + +/* 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)); - /* Disable button label wrap */ - .spectrum-Button--noWrap & { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + .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-default: ButtonText; - --highcontrast-button-content-color-hover: ButtonText; - --highcontrast-button-content-color-focus: ButtonText; - --highcontrast-button-content-color-down: ButtonText; --highcontrast-button-content-color-disabled: GrayText; - - --highcontrast-button-border-color-default: ButtonBorder; - --highcontrast-button-border-color-hover: ButtonBorder; - --highcontrast-button-border-color-focus: ButtonBorder; - --highcontrast-button-border-color-down: ButtonBorder; --highcontrast-button-border-color-disabled: GrayText; - - --highcontrast-button-background-color-default: ButtonFace; - --highcontrast-button-background-color-hover: ButtonFace; - --highcontrast-button-background-color-down: ButtonFace; - --highcontrast-button-background-color-focus: ButtonFace; --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); - --mod-button-animation-duration: 0s; - - .spectrum-Button-label { - forced-color-adjust: none; - } - &:focus-visible::after { - forced-color-adjust: none; - box-shadow: 0 0 0 var(--spectrum-button-focus-ring-thickness) ButtonText; - } + --highcontrast-button-focus-ring-color: ButtonText; - &.spectrum-Button--staticWhite.spectrum-Button--accent { - --highcontrast-button-content-color-disabled: GrayText; + &:focus-visible { + &::after { + /* Make sure the box-shadow used for the focus indicator is displayed. */ + forced-color-adjust: none; + } } - &.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-hover: Highlight; --highcontrast-button-background-color-down: Highlight; --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-background-color-disabled: ButtonFace; - --highcontrast-button-content-color-default: ButtonFace; --highcontrast-button-content-color-hover: HighlightText; --highcontrast-button-content-color-down: HighlightText; --highcontrast-button-content-color-focus: HighlightText; - --highcontrast-button-border-color-default: ButtonText; - --highcontrast-button-border-color-hover: Highlight; - --highcontrast-button-border-color-focus: Highlight; - --highcontrast-button-border-color-down: Highlight; + .spectrum-Button-label { + forced-color-adjust: none; + } } } } diff --git a/components/button/stories/button.mdx b/components/button/stories/button.mdx index 024a29f86e0..a20869868f5 100644 --- a/components/button/stories/button.mdx +++ b/components/button/stories/button.mdx @@ -1,24 +1,10 @@ -import { - Meta, - Title, - Subtitle, - Description, - ArgTypes, - Canvas, -} from "@storybook/blocks"; -import { - ComponentDetails, - TaggedReleases, - PropertiesTable, -} from "@spectrum-css/preview/blocks"; - -import * as ButtonStories from "./button.stories"; +import { Canvas, Meta, Description } from '@storybook/blocks'; + +import * as ButtonStories from './button.stories'; <Meta of={ButtonStories} title="Docs" /> -<Title of={ButtonStories} /> -<Subtitle of={ButtonStories} /> -<ComponentDetails of={ButtonStories} /> +# Button <Description of={ButtonStories} /> @@ -30,22 +16,32 @@ and secondary variants also have an outline option. ### Accent -<Description of={ButtonStories.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 -<Description of={ButtonStories.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 -<Description of={ButtonStories.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 -<Description of={ButtonStories.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 @@ -55,65 +51,51 @@ option. Static color buttons do not change shades or values depending upon the c ### Static white - primary -<Canvas - of={ButtonStories.StaticWhitePrimary} - className="spectrum-examples-static-white" -/> +<Canvas of={ButtonStories.StaticWhitePrimary} className="spectrum-examples-static-white" /> ### Static white - secondary -<Canvas - of={ButtonStories.StaticWhiteSecondary} - className="spectrum-examples-static-white" -/> +<Canvas of={ButtonStories.StaticWhiteSecondary} className="spectrum-examples-static-white" /> ### Static black - primary -<Canvas - of={ButtonStories.StaticBlackPrimary} - className="spectrum-examples-static-black" -/> +<Canvas of={ButtonStories.StaticBlackPrimary} className="spectrum-examples-static-black" /> ### Static black - secondary -<Canvas - of={ButtonStories.StaticBlackSecondary} - className="spectrum-examples-static-black" -/> +<Canvas of={ButtonStories.StaticBlackSecondary} className="spectrum-examples-static-black" /> ## Sizing -<Description of={ButtonStories.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 -<Description of={ButtonStories.Pending} /> +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 -<Description of={ButtonStories.Disabled} /> +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 -<Description of={ButtonStories.WithWrapping} /> -<Canvas of={ButtonStories.WithWrapping} /> - -## Disable text wrapping - -<Description of={ButtonStories.DisableWrapping} /> -<Canvas of={ButtonStories.DisableWrapping} /> - -## Properties - -The component accepts the following inputs (properties): - -<ArgTypes of={ButtonStories} /> - -<PropertiesTable /> - -## Tagged releases +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. -<TaggedReleases of={ButtonStories} /> +<Canvas of={ButtonStories.WithWrapping} /> \ No newline at end of file From d125b430b85fb4168b81c30e953535a508678349 Mon Sep 17 00:00:00 2001 From: Melissa Thompson <mthompson@heysparkbox.com> Date: Wed, 8 May 2024 16:43:34 -0400 Subject: [PATCH 039/103] feat(progressbar): s2 migration (#2659) --- .changeset/proud-jokes-rule.md | 7 + components/meter/dist/metadata.json | 4 +- components/meter/index.css | 2 + components/progressbar/dist/metadata.json | 55 ++-- components/progressbar/index.css | 283 ++++++++++-------- .../stories/progressbar.stories.js | 6 +- 6 files changed, 197 insertions(+), 160 deletions(-) create mode 100644 .changeset/proud-jokes-rule.md diff --git a/.changeset/proud-jokes-rule.md b/.changeset/proud-jokes-rule.md new file mode 100644 index 00000000000..15c300f61ef --- /dev/null +++ b/.changeset/proud-jokes-rule.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/progressbar": major +--- + +feat(progressbar): S2 migration + +Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same). diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 9bfe3424ce7..aa2e591ec6d 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -27,7 +27,9 @@ "--spectrum-font-size-75", "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color" + "--spectrum-positive-visual-color", + "--spectrum-progressbar-size-2400", + "--spectrum-progressbar-size-2500" ], "system-theme": [], "passthroughs": [ diff --git a/components/meter/index.css b/components/meter/index.css index b51a393aa73..7a76757a6d7 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -19,12 +19,14 @@ &, &.spectrum-Meter--sizeS { + --mod-progressbar-size-default: var(--spectrum-progressbar-size-2400); --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); --mod-progressbar-font-size: var(--spectrum-font-size-75); --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); } &.spectrum-Meter--sizeL { + --mod-progressbar-size-default: var(--spectrum-progressbar-size-2500); --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); --mod-progressbar-font-size: var(--spectrum-font-size-100); --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index b5ba3032da2..2f5d69199b1 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -2,25 +2,32 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ProgressBar", + ".spectrum-ProgressBar .spectrum-ProgressBar-fill", + ".spectrum-ProgressBar .spectrum-ProgressBar-label", + ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja)", + ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko)", + ".spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh)", + ".spectrum-ProgressBar .spectrum-ProgressBar-percentage", + ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja)", + ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko)", + ".spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)", + ".spectrum-ProgressBar .spectrum-ProgressBar-track", ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill", + ".spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)", + ".spectrum-ProgressBar--sideLabel", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", ".spectrum-ProgressBar--sizeS", ".spectrum-ProgressBar--sizeXL", - ".spectrum-ProgressBar-fill", - ".spectrum-ProgressBar-label", - ".spectrum-ProgressBar-percentage", + ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill", + ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label", + ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", + ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track", ".spectrum-ProgressBar-track", - ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel", - ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite", - ".spectrum-ProgressBar:dir(rtl)", - ".spectrum-ProgressBar:lang(ja)", - ".spectrum-ProgressBar:lang(ko)", - ".spectrum-ProgressBar:lang(zh)", "0%", - "[dir=\"rtl\"] .spectrum-ProgressBar", + "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill", "to" ], "modifiers": [ @@ -41,18 +48,19 @@ "--mod-progressbar-spacing-top-to-text", "--mod-progressbar-text-color", "--mod-progressbar-thickness", - "--mod-progressbar-track-color" + "--mod-progressbar-track-color", + "--mod-spacing-progressbar-label-to-text" ], "component": [ "--spectrum-progress-bar-maximum-width", "--spectrum-progress-bar-minimum-width", "--spectrum-progress-bar-thickness-extra-large", "--spectrum-progress-bar-thickness-large", + "--spectrum-progress-bar-thickness-medium", "--spectrum-progress-bar-thickness-small", "--spectrum-progressbar-animation-duration-indeterminate", "--spectrum-progressbar-animation-ease-in-out-indeterminate", "--spectrum-progressbar-corner-radius", - "--spectrum-progressbar-dir-indeterminate-multiplier", "--spectrum-progressbar-fill-color", "--spectrum-progressbar-fill-color-white", "--spectrum-progressbar-fill-size-indeterminate", @@ -66,22 +74,16 @@ "--spectrum-progressbar-size-2500", "--spectrum-progressbar-size-2800", "--spectrum-progressbar-size-default", - "--spectrum-progressbar-sized-font-size", - "--spectrum-progressbar-sized-size-default", - "--spectrum-progressbar-sized-spacing-top-to-text", - "--spectrum-progressbar-sized-thickness", "--spectrum-progressbar-spacing-label-to-progressbar", "--spectrum-progressbar-spacing-label-to-text", "--spectrum-progressbar-spacing-top-to-text", - "--spectrum-progressbar-static-white-track-color", "--spectrum-progressbar-text-color", "--spectrum-progressbar-thickness", "--spectrum-progressbar-track-color", - "--spectrum-progressbar-track-color-default", "--spectrum-progressbar-track-color-white" ], "global": [ - "--spectrum-accent-color-900", + "--spectrum-accent-content-color-default", "--spectrum-animation-duration-2000", "--spectrum-animation-ease-in-out", "--spectrum-cjk-line-height-100", @@ -89,22 +91,25 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-full", "--spectrum-font-size-100", "--spectrum-font-size-200", + "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-200", + "--spectrum-gray-300", "--spectrum-line-height-100", - "--spectrum-neutral-content-color-default", + "--spectrum-neutral-subdued-content-color-default", "--spectrum-spacing-200", "--spectrum-spacing-75", - "--spectrum-transparent-white-400", - "--spectrum-white" + "--spectrum-transparent-white-300", + "--spectrum-transparent-white-700", + "--spectrum-transparent-white-900" ], "system-theme": [], - "passthroughs": ["--mod-fieldlabel-font-size"], + "passthroughs": [], "high-contrast": [ "--highcontrast-progressbar-fill-color", + "--highcontrast-progressbar-fill-color-white", "--highcontrast-progressbar-track-color" ] } diff --git a/components/progressbar/index.css b/components/progressbar/index.css index b51319a58a0..e69d5328da7 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -12,49 +12,12 @@ */ .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-200); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); - - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); - /* @todo should this be --spectrum-progress-bar-thickness-medium? */ - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); -} - -.spectrum-ProgressBar--sizeS { - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-small); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-75); -} - -.spectrum-ProgressBar--sizeL { - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2500); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-100); - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-200); -} - -.spectrum-ProgressBar--sizeXL { - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2800); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-200); - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-extra-large); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-300); -} - -.spectrum-ProgressBar { - --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default)); - --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size)); - --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness)); - --spectrum-progressbar-spacing-top-to-text: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-sized-spacing-top-to-text)); + /* Static tokens */ + --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out); + --spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000); + --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-full); - --spectrum-progressbar-animation-ease-in-out-indeterminate: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-animation-ease-in-out)); - --spectrum-progressbar-animation-duration-indeterminate: var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-animation-duration-2000)); - --spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-progressbar-fill-size-indeterminate: var(--mod-progressbar-fill-size-indeterminate, 70%); - --spectrum-progressbar-dir-indeterminate-multiplier: 1; + --spectrum-progressbar-fill-size-indeterminate: 70%; /* --spectrum-global-dimension-static-size-2400 */ --spectrum-progressbar-size-2400: 192px; @@ -66,50 +29,56 @@ --spectrum-progressbar-size-2800: 224px; /* Size */ - --spectrum-progressbar-line-height-cjk: var(--mod-progressbar-line-height-cjk, var(--spectrum-cjk-line-height-100)); + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-100); + --spectrum-progressbar-line-height: var(--spectrum-line-height-100); + --spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100); - --spectrum-progressbar-min-size: var(--mod-progressbar-min-size, var(--spectrum-progress-bar-minimum-width)); - --spectrum-progressbar-max-size: var(--mod-progressbar-max-size, var(--spectrum-progress-bar-maximum-width)); + --spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width); + --spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width); - --spectrum-progressbar-line-height: var(--mod-progressbar-line-height, var(--spectrum-line-height-100)); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium); /* Spacing */ - --spectrum-progressbar-spacing-label-to-progressbar: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-spacing-75)); - --spectrum-progressbar-spacing-label-to-text: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-spacing-200)); + --spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75); + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200); /* Color */ - --spectrum-progressbar-fill-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))); - --spectrum-progressbar-track-color-default: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + --spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-progressbar-track-color: var(--spectrum-gray-300); + --spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default); + --spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); + --spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900); +} - --spectrum-progressbar-text-color: var(--mod-progressbar-text-color, var(--spectrum-neutral-content-color-default)); - --spectrum-progressbar-label-and-value-white: var(--mod-progressbar-label-and-value-white, var(--spectrum-white)); - --spectrum-progressbar-fill-color-white: var(--mod-progressbar-fill-color-white, var(--spectrum-white)); - --spectrum-progressbar-static-white-track-color: var(--spectrum-progressbar-track-color-white); +.spectrum-ProgressBar--sizeS { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400); - /* @passthrough */ - --mod-fieldlabel-font-size: var(--spectrum-progressbar-font-size); + --spectrum-progressbar-font-size: var(--spectrum-font-size-75); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-small); - &:dir(rtl) { - --spectrum-progressbar-dir-indeterminate-multiplier: -1; - } + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); +} - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --mod-progressbar-line-height: var(--spectrum-progressbar-line-height-cjk); - } +.spectrum-ProgressBar--sizeL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500); + + --spectrum-progressbar-font-size: var(--spectrum-font-size-200); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); } -@media (forced-colors: active) { - .spectrum-ProgressBar { - --highcontrast-progressbar-fill-color: ButtonText; - --highcontrast-progressbar-track-color: ButtonFace; - } +.spectrum-ProgressBar--sizeXL { + --spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800); - .spectrum-ProgressBar-track { - forced-color-adjust: none; - border: 1px solid ButtonText; - } + --spectrum-progressbar-font-size: var(--spectrum-font-size-300); + --spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large); + + --spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300); } .spectrum-ProgressBar { @@ -118,99 +87,151 @@ flex-flow: row wrap; justify-content: space-between; align-items: center; + font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size)); vertical-align: top; + word-break: break-word; - inline-size: var(--spectrum-progressbar-size-default); - max-inline-size: var(--spectrum-progressbar-max-size); - min-inline-size: var(--spectrum-progressbar-min-size); + inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size)); + min-inline-size: var(--mod-progressbar-min-size, var(--spectrum-progressbar-min-size)); - &.spectrum-ProgressBar--sideLabel { - flex-flow: row; - justify-content: space-between; + /* Label and Percentage */ + .spectrum-ProgressBar-label, + .spectrum-ProgressBar-percentage { + text-align: start; + margin-block-start: var(--mod-progressbar-spacing-top-to-text, var(--spectrum-progressbar-spacing-top-to-text)); + margin-block-end: var(--mod-progressbar-spacing-label-to-progressbar, var(--spectrum-progressbar-spacing-label-to-progressbar)); + + line-height: var(--mod-progressbar-line-height, var(--spectrum-progressbar-line-height)); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-progressbar-line-height-cjk, var(--spectrum-progressbar-line-height-cjk)); + } + + color: var(--mod-progressbar-text-color, var(--spectrum-progressbar-text-color)); } - &.spectrum-ProgressBar--staticWhite { - --mod-progressbar-fill-color: var(--spectrum-progressbar-fill-color-white); - --mod-progressbar-text-color: var(--spectrum-progressbar-label-and-value-white); - --mod-progressbar-track-color: var(--spectrum-progressbar-static-white-track-color); + /* Label */ + .spectrum-ProgressBar-label { + flex: 1 1 0%; } -} -/* Label and Percentage */ -.spectrum-ProgressBar-label, -.spectrum-ProgressBar-percentage { - text-align: start; - margin-block-start: var(--spectrum-progressbar-spacing-top-to-text); - margin-block-end: var(--spectrum-progressbar-spacing-label-to-progressbar); + /* Percentage */ + .spectrum-ProgressBar-percentage { + align-self: flex-start; + margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); + word-break: normal; + } + + /* Track */ + .spectrum-ProgressBar-track { + /* Visually apply border radius to child elements */ + overflow: hidden; + inline-size: 100%; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + border-radius: var(--spectrum-progressbar-corner-radius); + + background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + } - line-height: var(--spectrum-progressbar-line-height); - color: var(--spectrum-progressbar-text-color); + .spectrum-ProgressBar-fill { + border: none; + block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); + transition: width 1s; + background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + } +} + +.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { + inline-size: var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)); + position: relative; + animation-timing-function: var(--mod-progressbar-animation-ease-in-out-indeterminate, var(--spectrum-progressbar-animation-ease-in-out-indeterminate)); + will-change: transform; } -/* Label */ -.spectrum-ProgressBar-label { - flex: 1 1 0%; +/* Variants */ +/* Side Label */ +.spectrum-ProgressBar--sideLabel { + display: inline-flex; + flex-flow: row; + justify-content: space-between; + word-break: normal; + + .spectrum-ProgressBar-track { + flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)); + } - .spectrum-ProgressBar--sideLabel & { + .spectrum-ProgressBar-label { flex-grow: 0; - margin-inline-end: var(--spectrum-progressbar-spacing-label-to-text); + margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); margin-block-end: 0; + margin-block-start: 0; } -} - -/* Percentage */ -.spectrum-ProgressBar-percentage { - align-self: flex-start; - margin-inline-start: var(--spectrum-progressbar-spacing-label-to-text); - .spectrum-ProgressBar--sideLabel & { + .spectrum-ProgressBar-percentage { order: 3; text-align: end; + margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text)); margin-block-end: 0; + margin-block-start: 0; } } -/* Track */ -.spectrum-ProgressBar-track { - /* Visually apply border radius to child elements */ - overflow: hidden; - inline-size: 100%; - block-size: var(--spectrum-progressbar-thickness); - border-radius: var(--spectrum-progressbar-corner-radius); +/* Static White */ +.spectrum-ProgressBar--staticWhite { + .spectrum-ProgressBar-fill { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); + background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); + } - background: var(--spectrum-progressbar-track-color-default); + .spectrum-ProgressBar-label, + .spectrum-ProgressBar-percentage { + color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); + } - .spectrum-ProgressBar--sideLabel & { - flex: 1 1 var(--spectrum-progressbar-size-default); + .spectrum-ProgressBar-track { + background-color: var(--spectrum-progressbar-track-color-white); } } -.spectrum-ProgressBar-fill { - block-size: var(--spectrum-progressbar-thickness); - - border: none; - background: var(--spectrum-progressbar-fill-color); +/* Animations */ +.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill { + animation: indeterminate-loop-ltr var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; +} - transition: width 1s; +.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl) { + animation: indeterminate-loop-rtl var(--mod-progressbar-animation-duration-indeterminate, var(--spectrum-progressbar-animation-duration-indeterminate)) infinite; +} - .spectrum-ProgressBar--indeterminate & { - position: relative; - inline-size: var(--spectrum-progressbar-fill-size-indeterminate); +@keyframes indeterminate-loop-ltr { + from { + transform: translate(calc(-1 * var(--mod-progressbar-fill-size-indeterminate, var(--spectrum-progressbar-fill-size-indeterminate)))); + } - will-change: transform; - animation-name: indeterminate-loop; - animation-timing-function: var(--spectrum-progressbar-animation-ease-in-out-indeterminate); - animation-duration: var(--spectrum-progressbar-animation-duration-indeterminate); - animation-iteration-count: infinite; + to { + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))); } } -@keyframes indeterminate-loop { +@keyframes indeterminate-loop-rtl { from { - transform: translate(calc(-1 * var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-fill-size-indeterminate))); + transform: translate(var(--mod-progressbar-size-default, var(--spectrum-progressbar-fill-size-indeterminate))); } to { - transform: translate(calc(var(--spectrum-progressbar-dir-indeterminate-multiplier) * var(--spectrum-progressbar-size-default))); + transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default)))); + } +} + +@media (forced-colors: active) { + .spectrum-ProgressBar-track { + --highcontrast-progressbar-fill-color: ButtonText; + --highcontrast-progressbar-track-color: ButtonFace; + --highcontrast-progressbar-fill-color-white: ButtonText; + + forced-color-adjust: none; + border: 1px solid ButtonText; } } diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index 4468a701277..932a4d366d0 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -21,12 +21,12 @@ export default { customWidth: { name: "Custom width", defaultValue: 192, - description: "Adjust the width of the component between 48px and 768px. 192px is the default width on desktop, while 240px is the default on mobile.", + description: "A number to adjust the width of the component. Spectrum 2 specifications limit the component width to be between 48px and 768px.", type: { name: "number" }, table: { type: { summary: "number" }, category: "Component", - defaultValue: { summary: 192 }, + defaultValue: { summary: 200 }, }, control: { type: "range", min: 48, max: 768,}, }, @@ -87,7 +87,7 @@ export default { label: "Loading", labelPosition: "top", value: 0, - customWidth: 192, + customWidth: 200, isIndeterminate: false, showValueLabel: true, }, From f90cc369cd38e650c6a65da61b16ef453be593ff Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 30 May 2024 16:59:22 -0400 Subject: [PATCH 040/103] refactor(button): remove spectrum-ButtonWithFocusRing extend (#2725) The styles had previously diverged from what this placeholder class was providing, which was causing an issue with needing to override styles with unnecessary CSS. This cleans that up by integrating the small number of styles from spectrum-ButtonWithFocusRing that were not already present, and removing that "extend". --- .changeset/fresh-seahorses-join.md | 8 ++++++++ components/button/index.css | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 .changeset/fresh-seahorses-join.md diff --git a/.changeset/fresh-seahorses-join.md b/.changeset/fresh-seahorses-join.md new file mode 100644 index 00000000000..34f9fb60e01 --- /dev/null +++ b/.changeset/fresh-seahorses-join.md @@ -0,0 +1,8 @@ +--- +"@spectrum-css/button": patch +--- + +#### refactor: remove spectrum-ButtonWithFocusRing placeholder class extend + +Removes the need for the extend from this placeholder class, as the styles it provides have diverged slightly from what is in button and it was causing some unnecessary CSS to override. +This should not result in any changed visuals or behavior, as the same CSS has been integrated. \ No newline at end of file diff --git a/components/button/index.css b/components/button/index.css index e8d6c54c18c..5359bf05d7f 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -125,7 +125,7 @@ /* ---- 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); From edef8abc4f1fee2d2c712c341ecd873b24239ac1 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Tue, 4 Jun 2024 08:39:27 -1000 Subject: [PATCH 041/103] docs(dropshadow): add stories and docs for dropshadow (#2674) --- .../foundations/drop-shadow/drop-shadow.mdx | 86 +++++++++++++ .../drop-shadow/drop-shadow.stories.js | 74 +++++++++++ .storybook/foundations/drop-shadow/index.css | 115 ++++++++++++++++++ 3 files changed, 275 insertions(+) create mode 100644 .storybook/foundations/drop-shadow/drop-shadow.mdx create mode 100644 .storybook/foundations/drop-shadow/drop-shadow.stories.js create mode 100644 .storybook/foundations/drop-shadow/index.css diff --git a/.storybook/foundations/drop-shadow/drop-shadow.mdx b/.storybook/foundations/drop-shadow/drop-shadow.mdx new file mode 100644 index 00000000000..a8d6f298632 --- /dev/null +++ b/.storybook/foundations/drop-shadow/drop-shadow.mdx @@ -0,0 +1,86 @@ +import { Meta, Title, Story, Description } from '@storybook/blocks'; +import * as DropShadowStories from './drop-shadow.stories.js'; + + +<Meta of={DropShadowStories} /> + +<Title /> +<Description of={DropShadowStories} /> + +Drop shadow tokens may be used for box shadows or drop shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used. Note that in cases where `filter: drop-shadow()` is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed. + +The opacity values in dark shadow colors are 3x the light values. + +These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows. + +## Emphasized Default +This shadow is used to provide emphasis to containers within a page. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowEmphasizedDefault} /> +``` +box-shadow: + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + var(--spectrum-drop-shadow-emphasized-default-blur) + var(--spectrum-drop-shadow-emphasized-default-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowEmphasizedDefault} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) + var(--spectrum-drop-shadow-emphasized-default-color) +); +``` + +## Emphasized Hover +If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowEmphasizedHover} /> +``` +box-shadow: + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + var(--spectrum-drop-shadow-emphasized-hover-blur) + var(--spectrum-drop-shadow-emphasized-hover-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowEmphasizedHover} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) + var(--spectrum-drop-shadow-emphasized-hover-color) +); +``` + +## Elevated +Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels. + +### `box-shadow` +<Story of={DropShadowStories.BoxShadowElevated} /> +``` +box-shadow: + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + var(--spectrum-drop-shadow-elevated-blur) + var(--spectrum-drop-shadow-elevated-color); +``` + +### `filter: drop-shadow()` +<Story of={DropShadowStories.DropShadowElevated} /> +``` +filter: drop-shadow( + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + calc(var(--spectrum-drop-shadow-elevated-blur) / 2) + var(--spectrum-drop-shadow-elevated-color) +); +``` diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js new file mode 100644 index 00000000000..b61c7661f4c --- /dev/null +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -0,0 +1,74 @@ +import { html } from "lit"; +import { classMap } from "lit/directives/class-map.js"; +import "./index.css"; + +export default { + title: "Foundations/Drop shadow", + description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.", + component: "Drop shadow", + tags: ['foundation'], +} + +const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant, ...args}) => { + const { isDropShadow } = args; + return html` + <div class=${classMap({ + [rootClass]: true, + [`${rootClass}--${variant}-drop-shadow`]: typeof variant !== undefined && !!isDropShadow, + [`${rootClass}--${variant}-box-shadow`]: typeof variant !== undefined && !isDropShadow, + })}></div> +`;} + +const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => html` + <div class=${classMap({ + [rootClass]: true, + "spectrum--light": color === "light", + "spectrum--dark": color === "dark", + })}> + ${DropShadowSwatch(args)} + </div> + `; + +const DropShadowVariant = ({...args}) => html` + <div class="spectrum-Foundations-Example-variant-container"> + ${DropShadowBackground({...args, color: "light"})} + ${DropShadowBackground({...args, color: "dark"})} + </div> +`; + + +export const DropShadowEmphasizedDefault = DropShadowVariant.bind({}); +DropShadowEmphasizedDefault.args = { + variant: "emphasized-default", + isDropShadow: true, +}; + +export const DropShadowEmphasizedHover = DropShadowVariant.bind({}); +DropShadowEmphasizedHover.args = { + variant: "emphasized-hover", + isDropShadow: true, +}; + +export const DropShadowElevated = DropShadowVariant.bind({}); +DropShadowElevated.args = { + variant: "elevated", + isDropShadow: true, +}; + +export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({}); +BoxShadowEmphasizedDefault.args = { + variant: "emphasized-default", + isDropShadow: false, +}; + +export const BoxShadowEmphasizedHover = DropShadowVariant.bind({}); +BoxShadowEmphasizedHover.args = { + variant: "emphasized-hover", + isDropShadow: false, +}; + +export const BoxShadowElevated = DropShadowVariant.bind({}); +BoxShadowElevated.args = { + variant: "elevated", + isDropShadow: false, +}; diff --git a/.storybook/foundations/drop-shadow/index.css b/.storybook/foundations/drop-shadow/index.css new file mode 100644 index 00000000000..bf54a5ddce9 --- /dev/null +++ b/.storybook/foundations/drop-shadow/index.css @@ -0,0 +1,115 @@ +/*! +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. +*/ + +/* stylelint-disable spectrum-tools/no-unknown-custom-properties */ + +.spectrum-Foundations-Example-DropShadow-swatch { + block-size: 150px; + inline-size: 150px; + background-color: var(--spectrum-gray-25); + border-radius: var(--spectrum-corner-radius-large-default); + border: transparent; +} + +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch { + background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + var(--spectrum-drop-shadow-emphasized-default-blur) + var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-default-x) + var(--spectrum-drop-shadow-emphasized-default-y) + calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + var(--spectrum-drop-shadow-emphasized-hover-blur) + var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-emphasized-hover-x) + var(--spectrum-drop-shadow-emphasized-hover-y) + calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); +} + +.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { + box-shadow: + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + var(--spectrum-drop-shadow-elevated-blur) + var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); +} + +.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow { + filter: drop-shadow( + var(--spectrum-drop-shadow-elevated-x) + var(--spectrum-drop-shadow-elevated-y) + calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ + var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)) + ); +} + +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, +.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow, +.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { +/* adjustment because color tokens do not work properly on foundations pages */ + --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); +} + +.spectrum-Foundations-Example-swatch-container { + background-color: var(--spectrum-gray-25); + block-size: 200px; + inline-size: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +.spectrum-Foundations-Example-variant-container { + background-color: var(--spectrum-gray-25); + display: flex; + flex-direction: row; +} From 7d3171a4e26f167f29064c93178df85ca8f94804 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 18 Jun 2024 16:26:58 -0400 Subject: [PATCH 042/103] feat(picker)!: migrate to spectrum 2 (#2697) Migrates the Picker component to Spectrum 2, based on the updated Figma specs. - Integrate themes CSS files into index.css - Uses new S2 tokens for field width and corner rounding - Add down state with new calculated perspective - The top to alert icon in Spectrum 2 now uses the component-top-to-workflow-icon-* tokens as defined on the design. - Adds the CJK line-height token defined on the design specs. - Uses border-width-200 instead of border-width-100 * fix(picker): use correct spacing between icons and value text The spacing between alert icon and disclosure icon was incorrect because it was being overridden by a selector that shouldn't have been affecting this scenario (which was using the subsequent-sibling combinator ~). Some mods around the spacing for the three different types of icons were also not working as expected. Fixes this spacing and clarifies which spacing is which. Renames the mod that applies to the optional workflow icon to the left of the value. Simplifies quiet styles by changing custom property values instead of adding extra styles. * feat(picker): storybook - expanded and improved chromatic template Expands the Chromatic-only template in Storybook to increase coverage of different options. Organizes the stories into sections using the formatting and typography previously established with Action button. States in each section are based on the grid of options in the Desktop S2 design Figma, with some additions such as the loading state. And the Switch examples from the existing template. Removes the "Open" story which is now covered in the Chromatic template. Adds missing icon (to left of value/placeholder text) option to Storybook, along with VRT coverage. Improves display of Popover within these different contexts; fixes how it is aligned on the side label example. Changes the side label example to use flex row instead of using inline-block which could wrap as the screen shrunk. === Other Storybook fixes and additions === - Adds aria-labelledby and unique ids to make sure the label is associated with the Picker. - Includes downstate dimension capture - Popover does not show when in the loading state (per design feedback) - Makes sure HelpText appears below the Picker when using side label, by adjusting its wrapper markup. - Adds conditional controls to disabled and loading states, per the PR feedback that disabled + loading should not be a possible combo. --- .changeset/hot-books-fail.md | 13 + components/picker/dist/metadata.json | 76 +++--- components/picker/index.css | 285 ++++++++++---------- components/picker/stories/picker.stories.js | 64 +++-- components/picker/stories/template.js | 210 ++++++++------- 5 files changed, 340 insertions(+), 308 deletions(-) create mode 100644 .changeset/hot-books-fail.md diff --git a/.changeset/hot-books-fail.md b/.changeset/hot-books-fail.md new file mode 100644 index 00000000000..4c71ab8b722 --- /dev/null +++ b/.changeset/hot-books-fail.md @@ -0,0 +1,13 @@ +--- +"@spectrum-css/picker": major +--- + +#### Spectrum 2 migration + +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`. +- The mod custom property `--mod-picker-spacing-text-to-alert-icon-inline-start` has been renamed to `--mod-picker-spacing-text-to-icon-inline-end`. This removed the fallback that was marked as deprecated in a previous version. +- The mod custom property `--mod-picker-spacing-text-to-icon` has been removed. Use `--mod-picker-spacing-text-to-icon-inline-end` for the spacing between text and visual (indicator or disclosure), or `--mod-picker-spacing-starting-icon-to-text` for the space between the optional workflow icon and the text. diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index f3489092bc9..e4da8f634b6 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -7,18 +7,10 @@ ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", ".spectrum-Picker--quiet", - ".spectrum-Picker--quiet .spectrum-Picker-menuIcon", - ".spectrum-Picker--quiet.is-keyboardFocused", ".spectrum-Picker--quiet.is-keyboardFocused:after", - ".spectrum-Picker--quiet.is-open", ".spectrum-Picker--quiet.spectrum-Picker--sideLabel", - ".spectrum-Picker--quiet.spectrum-Picker.is-disabled", - ".spectrum-Picker--quiet.spectrum-Picker:disabled", - ".spectrum-Picker--quiet:active", ".spectrum-Picker--quiet:after", - ".spectrum-Picker--quiet:focus-visible", ".spectrum-Picker--quiet:focus-visible:after", - ".spectrum-Picker--quiet:hover", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", @@ -27,7 +19,6 @@ ".spectrum-Picker--sizeXL", ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", ".spectrum-Picker-label", - ".spectrum-Picker-label ~ .spectrum-Picker-menuIcon", ".spectrum-Picker-label.is-placeholder", ".spectrum-Picker-label.is-placeholder:active", ".spectrum-Picker-label.is-placeholder:hover", @@ -39,7 +30,7 @@ ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder", ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon", ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker.is-invalid .spectrum-Picker-label", + ".spectrum-Picker.is-disabled:not(.spectrum-Picker--quiet)", ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)", ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover", @@ -52,12 +43,12 @@ ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon", ".spectrum-Picker.is-keyboardFocused.is-placeholder", ".spectrum-Picker.is-keyboardFocused:after", - ".spectrum-Picker.is-loading .spectrum-Picker-label", + ".spectrum-Picker.is-loading", ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover", - ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon", + ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)", + ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon", + ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover", + ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon", ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label", ".spectrum-Picker.is-placeholder:focus-visible", ".spectrum-Picker::-moz-focus-inner", @@ -69,12 +60,16 @@ ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder", ".spectrum-Picker:disabled .spectrum-Picker-menuIcon", ".spectrum-Picker:disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker:disabled:not(.spectrum-Picker--quiet)", ".spectrum-Picker:focus", ".spectrum-Picker:focus-visible", ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon", ".spectrum-Picker:focus-visible:after", ".spectrum-Picker:hover", - ".spectrum-Picker:hover .spectrum-Picker-menuIcon" + ".spectrum-Picker:hover .spectrum-Picker-menuIcon", + ".spectrum-Picker:lang(ja) .spectrum-Picker-label", + ".spectrum-Picker:lang(ko) .spectrum-Picker-label", + ".spectrum-Picker:lang(zh) .spectrum-Picker-label" ], "modifiers": [ "--mod-picker-animation-duration", @@ -121,7 +116,11 @@ "--mod-picker-icon-color-hover-open", "--mod-picker-icon-color-key-focus", "--mod-picker-inline-size", + "--mod-picker-inline-size-quiet", "--mod-picker-line-height", + "--mod-picker-line-height-cjk", + "--mod-picker-min-inline-size", + "--mod-picker-min-inline-size-quiet", "--mod-picker-placeholder-font-style", "--mod-picker-placeholder-font-weight", "--mod-picker-spacing-bottom-to-text", @@ -133,8 +132,7 @@ "--mod-picker-spacing-label-to-picker", "--mod-picker-spacing-label-to-picker-quiet", "--mod-picker-spacing-picker-to-popover", - "--mod-picker-spacing-text-to-alert-icon-inline-start", - "--mod-picker-spacing-text-to-icon", + "--mod-picker-spacing-starting-icon-to-text", "--mod-picker-spacing-text-to-icon-inline-end", "--mod-picker-spacing-top-to-alert-icon", "--mod-picker-spacing-top-to-disclosure-icon", @@ -154,7 +152,6 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -189,18 +186,18 @@ "--spectrum-picker-icon-color-key-focus", "--spectrum-picker-inline-size", "--spectrum-picker-line-height", + "--spectrum-picker-line-height-cjk", + "--spectrum-picker-min-inline-size", "--spectrum-picker-minimum-width-multiplier", "--spectrum-picker-placeholder-font-style", "--spectrum-picker-spacing-bottom-to-text", "--spectrum-picker-spacing-edge-to-disclosure-icon", - "--spectrum-picker-spacing-edge-to-disclosure-icon-quiet", "--spectrum-picker-spacing-edge-to-text", - "--spectrum-picker-spacing-edge-to-text-quiet", "--spectrum-picker-spacing-icon-to-disclosure-icon", "--spectrum-picker-spacing-label-to-picker", "--spectrum-picker-spacing-label-to-picker-quiet", "--spectrum-picker-spacing-picker-to-popover", - "--spectrum-picker-spacing-text-to-icon", + "--spectrum-picker-spacing-starting-icon-to-text", "--spectrum-picker-spacing-text-to-icon-inline-end", "--spectrum-picker-spacing-top-to-alert-icon", "--spectrum-picker-spacing-top-to-disclosure-icon", @@ -213,7 +210,8 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", + "--spectrum-border-width-200", + "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", "--spectrum-component-bottom-to-text-300", @@ -226,6 +224,8 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-component-to-menu-extra-large", "--spectrum-component-to-menu-large", "--spectrum-component-to-menu-medium", @@ -234,10 +234,23 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", + "--spectrum-component-top-to-workflow-icon-100", + "--spectrum-component-top-to-workflow-icon-200", + "--spectrum-component-top-to-workflow-icon-300", + "--spectrum-component-top-to-workflow-icon-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", + "--spectrum-field-default-width-extra-large", + "--spectrum-field-default-width-large", + "--spectrum-field-default-width-medium", + "--spectrum-field-default-width-small", "--spectrum-field-edge-to-text-quiet", "--spectrum-field-end-edge-to-disclosure-icon-100", "--spectrum-field-end-edge-to-disclosure-icon-200", @@ -248,14 +261,6 @@ "--spectrum-field-label-to-component-quiet-large", "--spectrum-field-label-to-component-quiet-medium", "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-text-to-alert-icon-extra-large", - "--spectrum-field-text-to-alert-icon-large", - "--spectrum-field-text-to-alert-icon-medium", - "--spectrum-field-text-to-alert-icon-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", "--spectrum-field-top-to-disclosure-icon-100", "--spectrum-field-top-to-disclosure-icon-200", "--spectrum-field-top-to-disclosure-icon-300", @@ -264,7 +269,6 @@ "--spectrum-field-top-to-progress-circle-large", "--spectrum-field-top-to-progress-circle-medium", "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -274,12 +278,6 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-down", diff --git a/components/picker/index.css b/components/picker/index.css index ddb1b63544d..5b46d2597fe 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -14,57 +14,67 @@ @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-100); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-800); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); - - /* font */ + /* Font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); --spectrum-picker-placeholder-font-style: var(--spectrum-default-font-style); --spectrum-picker-line-height: var(--spectrum-line-height-100); + --spectrum-picker-line-height-cjk: var(--spectrum-cjk-line-height-100); - /* height */ + /* Dimensions */ --spectrum-picker-block-size: var(--spectrum-component-height-100); - --spectrum-picker-inline-size: var(--spectrum-field-width); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-medium); + --spectrum-picker-min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); - /* border */ - --spectrum-picker-border-radius: var(--spectrum-corner-radius-100); + /* Border */ + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-picker-border-width: var(--spectrum-border-width-200); - /* spacing */ + /* Spacing */ --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-picker-spacing-edge-to-text-quiet: var(--spectrum-field-edge-to-text-quiet); + + /* Space from label component to Picker component. */ --spectrum-picker-spacing-label-to-picker: var(--spectrum-field-label-to-component); + --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); + + /* Space from optional starting icon to the text. */ + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-medium); + /* Space from text to either the disclosure icon or the alert/progress visual if present. */ + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-100); + + /* Space from alert/progress visual to the disclosure icon (chevron). */ --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-medium); - --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-medium); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-medium); + + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-100); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-medium); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - --spectrum-picker-spacing-edge-to-disclosure-icon-quiet: var(--spectrum-picker-end-edge-to-disclousure-icon-quiet); - /* animation */ + & + .spectrum-Popover--bottom.is-open { + --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); + } + + /* Animation */ --spectrum-picker-animation-duration: var(--spectrum-animation-duration-100); - /* color */ + /* Color */ + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-border-color-default: transparent; + --spectrum-picker-border-color-default-open: transparent; + --spectrum-picker-border-color-hover: transparent; + --spectrum-picker-border-color-hover-open: transparent; + --spectrum-picker-border-color-active: transparent; + --spectrum-picker-border-color-key-focus: transparent; + --spectrum-picker-font-color-default: var(--spectrum-neutral-content-color-default); --spectrum-picker-font-color-default-open: var(--spectrum-neutral-content-color-focus); --spectrum-picker-font-color-hover: var(--spectrum-neutral-content-color-hover); @@ -92,27 +102,25 @@ --spectrum-picker-font-color-disabled: var(--spectrum-disabled-content-color); --spectrum-picker-icon-color-disabled: var(--spectrum-disabled-content-color); - /* special cases for focus indicator */ + /* focus indicator */ --spectrum-picker-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-picker-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-picker-focus-indicator-color: var(--spectrum-focus-indicator-color); - - & + .spectrum-Popover--bottom.is-open { - --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); - } } .spectrum-Picker--sizeS { --spectrum-picker-font-size: var(--spectrum-font-size-75); --spectrum-picker-block-size: var(--spectrum-component-height-75); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-small); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-small); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-75); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-small); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-75); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-75); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-small); --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-small); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-small); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-small); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); @@ -124,15 +132,17 @@ .spectrum-Picker--sizeL { --spectrum-picker-font-size: var(--spectrum-font-size-200); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-large); --spectrum-picker-block-size: var(--spectrum-component-height-200); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-200); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-200); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-large); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-200); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-200); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-large); --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); @@ -144,15 +154,17 @@ .spectrum-Picker--sizeXL { --spectrum-picker-font-size: var(--spectrum-font-size-300); + --spectrum-picker-inline-size: var(--spectrum-field-default-width-extra-large); --spectrum-picker-block-size: var(--spectrum-component-height-300); + --spectrum-picker-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); --spectrum-picker-spacing-top-to-text: var(--spectrum-component-top-to-text-300); --spectrum-picker-spacing-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-picker-spacing-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-picker-spacing-text-to-icon: var(--spectrum-text-to-visual-300); - --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-field-text-to-alert-icon-extra-large); + --spectrum-picker-spacing-starting-icon-to-text: var(--spectrum-text-to-visual-300); + --spectrum-picker-spacing-text-to-icon-inline-end: var(--spectrum-text-to-visual-300); --spectrum-picker-spacing-icon-to-disclosure-icon: var(--spectrum-picker-visual-to-disclosure-icon-extra-large); --spectrum-picker-spacing-label-to-picker-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); - --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-field-top-to-alert-icon-extra-large); + --spectrum-picker-spacing-top-to-alert-icon: var(--spectrum-component-top-to-workflow-icon-300); --spectrum-picker-spacing-top-to-progress-circle: var(--spectrum-field-top-to-progress-circle-extra-large); --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); @@ -162,52 +174,35 @@ } } -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Picker { - --highcontrast-picker-focus-indicator-color: Highlight; - - --highcontrast-picker-border-color-default: ButtonBorder; - --highcontrast-picker-border-color-hover: Highlight; - --highcontrast-picker-border-color-disabled: GrayText; - - --highcontrast-picker-content-color-default: ButtonText; - --highcontrast-picker-content-color-disabled: GrayText; - --highcontrast-picker-background-color: ButtonFace; - - &:focus-visible, - &.is-keyboardFocused { - --highcontrast-picker-border-color-hover: ButtonText; - } - - /* Focus indicator */ - &::after { - /* Make sure default transparent border stays transparent. */ - forced-color-adjust: none; - } - - .spectrum-Picker-label { - /* Remove additional text backplate added in WHCM (Edge). */ - forced-color-adjust: none; - } - } +.spectrum-Picker--quiet { + --spectrum-picker-background-color-default: transparent; + --spectrum-picker-background-color-default-open: transparent; + --spectrum-picker-background-color-hover: transparent; + --spectrum-picker-background-color-hover-open: transparent; + --spectrum-picker-background-color-active: transparent; + --spectrum-picker-background-color-key-focus: transparent; + --spectrum-picker-background-color-disabled: transparent; + + --spectrum-picker-min-inline-size: var(--mod-picker-min-inline-size-quiet, 0); + --spectrum-picker-inline-size: var(--mod-picker-inline-size-quiet, auto); + --spectrum-picker-spacing-edge-to-text: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet)); + --spectrum-picker-spacing-edge-to-disclosure-icon: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet)); + --spectrum-picker-spacing-label-to-picker: var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)); } .spectrum-Picker { @extend %spectrum-BaseButton; - /* Layout */ display: flex; box-sizing: border-box; - /* Minimum width is 2 times the height */ max-inline-size: 100%; - min-inline-size: calc(var(--spectrum-picker-minimum-width-multiplier) * var(--mod-picker-block-size, var(--spectrum-picker-block-size))); + min-inline-size: var(--mod-picker-min-inline-size, var(--spectrum-picker-min-inline-size)); inline-size: var(--mod-picker-inline-size, var(--spectrum-picker-inline-size)); block-size: var(--mod-picker-block-size, var(--spectrum-picker-block-size)); - padding-block: 0; - margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + margin-block-start: var(--mod-picker-spacing-label-to-picker, var(--spectrum-picker-spacing-label-to-picker)); + padding-block: 0; padding-inline-start: var(--mod-picker-spacing-edge-to-text, var(--spectrum-picker-spacing-edge-to-text)); padding-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon, var(--spectrum-picker-spacing-edge-to-disclosure-icon)); @@ -258,6 +253,7 @@ &:active { background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-active, var(--spectrum-picker-background-color-active))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-active, var(--spectrum-picker-border-color-active))); + 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)); /* Focus indicator */ &::after { @@ -290,7 +286,7 @@ } } - &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) { + &.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) { color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default-open, var(--spectrum-picker-font-color-default-open))); background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-default-open, var(--spectrum-picker-background-color-default-open))); border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-default-open, var(--spectrum-picker-border-color-default-open))); @@ -338,32 +334,17 @@ border-color: var(--highcontrast-picker-border-color-default, var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))); } } +} - &.is-loading { - .spectrum-Picker-menuIcon { - color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); - } - } - - &.is-loading, - &.is-invalid { - .spectrum-Picker-label { - /* @deprecation --mod-picker-spacing-text-to-alert-icon-inline-start has been renamed to --mod-picker-spacing-text-to-icon-inline-end - and will be removed in a future version. */ - margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))); - } - } - - .spectrum-Picker-icon { - flex-shrink: 0; - margin-inline-end: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); - } +/* Optional workflow icon that appears before the text within the picker. */ +.spectrum-Picker .spectrum-Picker-icon { + flex-shrink: 0; + margin-inline-end: var(--mod-picker-spacing-starting-icon-to-text, var(--spectrum-picker-spacing-starting-icon-to-text)); } +/* Value: the text within the Picker (current value or placeholder) */ .spectrum-Picker-label { - /* Be the biggest, but also shrink! */ flex: 1 1 auto; - white-space: nowrap; overflow: hidden; @@ -374,14 +355,14 @@ text-overflow: ellipsis; text-align: start; - padding-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); - padding-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-block-start: var(--mod-picker-spacing-top-to-text, var(--spectrum-picker-spacing-top-to-text)); + margin-block-end: calc(var(--mod-picker-spacing-bottom-to-text, var(--spectrum-picker-spacing-bottom-to-text)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-inline-end: var(--mod-picker-spacing-text-to-icon-inline-end, var(--spectrum-picker-spacing-text-to-icon-inline-end)); &.is-placeholder { font-weight: var(--mod-picker-placeholder-font-weight, var(--spectrum-picker-font-weight)); font-style: var(--mod-picker-placeholder-font-style, var(--spectrum-picker-placeholder-font-style)); transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-in-out; - color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); &:hover { @@ -392,19 +373,23 @@ color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-active, var(--spectrum-picker-font-color-active))); } } + + /* CJK (Chinese, Japanese, and Korean) language support */ + .spectrum-Picker:lang(ja) &, + .spectrum-Picker:lang(zh) &, + .spectrum-Picker:lang(ko) & { + line-height: var(--mod-picker-line-height-cjk, var(--spectrum-picker-line-height-cjk)); + } } -/* The picker chevron */ +/* Disclosure icon (chevron) */ .spectrum-Picker-menuIcon { display: inline-block; position: relative; vertical-align: top; - transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; flex-shrink: 0; - - margin-inline-start: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); margin-block: var(--mod-picker-spacing-top-to-disclosure-icon, var(--spectrum-picker-spacing-top-to-disclosure-icon)); - + transition: color var(--mod-picker-animation-duration, var(--spectrum-picker-animation-duration)) ease-out; color: var(--highcontrast-picker-content-color-default, var(--mod-picker-icon-color-default, var(--spectrum-picker-icon-color-default))); &:active { @@ -413,18 +398,16 @@ } .spectrum-Picker-validationIcon { - flex-shrink: 0; margin-block-start: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-block-end: calc(var(--mod-picker-spacing-top-to-alert-icon, var(--spectrum-picker-spacing-top-to-alert-icon)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); + margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); + flex-shrink: 0; } .spectrum-Picker .spectrum-ProgressCircle { margin-block-start: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); margin-block-end: calc(var(--mod-picker-spacing-top-to-progress-circle, var(--spectrum-picker-spacing-top-to-progress-circle)) - var(--mod-picker-border-width, var(--spectrum-picker-border-width))); -} - -.spectrum-Picker-label ~ .spectrum-Picker-menuIcon { - margin-inline-start: var(--mod-picker-spacing-text-to-icon, var(--spectrum-picker-spacing-text-to-icon)); + margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); } .spectrum-Picker + .spectrum-Popover--bottom.is-open { @@ -432,37 +415,22 @@ } .spectrum-Picker--quiet { - inline-size: auto; - min-inline-size: 0; border: none; border-radius: 0; - padding-inline: var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-picker-spacing-edge-to-text-quiet)); - margin-block-start: calc(var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet)) + (1px)); color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))); - background-color: var(--highcontrast-picker-background-color, transparent); &.spectrum-Picker--sideLabel { margin-block-start: 0; } - .spectrum-Picker-menuIcon { - margin-inline-end: var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)); - } - &::after { border: none; block-size: auto; inline-size: auto; } - &:hover { - background-color: var(--highcontrast-picker-background-color, transparent); - } - &:focus-visible, &.is-keyboardFocused { - background-color: var(--highcontrast-picker-background-color, transparent); - /* Focus indicator changes from a ring to a line underneath. */ &::after { border: none; @@ -471,16 +439,6 @@ margin: calc((var(--mod-picker-focus-indicator-gap, var(--spectrum-picker-focus-indicator-gap)) + var(--mod-picker-border-width, var(--spectrum-picker-border-width))) * -1) 0; } } - - &:active, - &.is-open { - background-color: var(--highcontrast-picker-background-color, transparent); - } - - &.spectrum-Picker:disabled, - &.spectrum-Picker.is-disabled { - background-color: var(--highcontrast-picker-background-color, transparent); - } } .spectrum-Picker--sideLabel { @@ -488,16 +446,20 @@ vertical-align: top; } -/* Disabled state: +/* Disabled and loading states: Make sure this appears after any use of :hover while postcss-hover-media-feature is being used. The plugin moves all hover styles within a media query that changes the order of the CSS, affecting styles with the same specificity. */ .spectrum-Picker:disabled, .spectrum-Picker.is-disabled { cursor: default; - background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); - border-color: var(--highcontrast-picker-border-color-disabled, var(--spectrum-picker-border-color-disabled)); + transform: none; + border-color: var(--highcontrast-picker-border-color-disabled, transparent); color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); + &:not(.spectrum-Picker--quiet) { + background-color: var(--highcontrast-picker-background-color, var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))); + } + .spectrum-Picker-icon, .spectrum-Picker-menuIcon, .spectrum-Picker-validationIcon { @@ -508,3 +470,42 @@ color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))); } } + +.spectrum-Picker.is-loading { + transform: none; + + .spectrum-Picker-menuIcon { + color: var(--highcontrast-picker-content-color-disabled, var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))); + } +} + +/* Forced colors / high contrast mode */ +@media (forced-colors: active) { + .spectrum-Picker { + --highcontrast-picker-focus-indicator-color: Highlight; + + --highcontrast-picker-border-color-default: ButtonBorder; + --highcontrast-picker-border-color-hover: Highlight; + --highcontrast-picker-border-color-disabled: GrayText; + + --highcontrast-picker-content-color-default: ButtonText; + --highcontrast-picker-content-color-disabled: GrayText; + --highcontrast-picker-background-color: ButtonFace; + + &:focus-visible, + &.is-keyboardFocused { + --highcontrast-picker-border-color-hover: ButtonText; + } + + /* Focus indicator */ + &::after { + /* Make sure default transparent border stays transparent. */ + forced-color-adjust: none; + } + + .spectrum-Picker-label { + /* Remove additional text backplate added in WHCM (Edge). */ + forced-color-adjust: none; + } + } +} diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index c2fa56e619d..e1bab069825 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -17,7 +17,7 @@ export default { size: size(["s", "m", "l", "xl"]), label: { name: "Label", - description: "The text for the field label", + description: "The label text that is displayed above or to the side of the Picker. This uses a separate Label component outside of the Picker markup.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -32,33 +32,28 @@ export default { type: { summary: "string" }, category: "Component", }, + control: { + type: "select", + labels: { + side: "side (inline start)", + }, + }, options: ["top", "side"], - control: { type: "select" }, }, withSwitch: { - name: "Show switch component", - description: "Display a separate switch component after the picker. Helpful for testing alignment with the picker when using the side label.", + name: "Display Switch component", + description: "Displays a Switch component after the Picker. This is used for testing the vertical alignment between the side label, Picker, and Switch.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, - category: "Advanced", + category: "Content", }, control: "boolean", if: { arg: "labelPosition", eq: "side" }, }, - showWorkflowIcon: { - name: "Show workflow icon", - description: "Display optional workflow icon before the value or placeholder", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Advanced", - }, - control: "boolean", - }, placeholder: { - name: "Placeholder", - description: "The placeholder text prompts a user to select an option from the picker menu. It disappears once a user selects an option. This will not be displayed if the `value` control is set.", + name: "Value or placeholder", + description: "The text within the Picker that represents its current value or placeholder.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -66,15 +61,16 @@ export default { }, control: { type: "text" }, }, - currentValue: { - name: "Value", - description: "The value shows the option that a user has selected.", - type: { name: "string" }, - table: { - type: { summary: "string" }, - category: "Content", - }, - control: { type: "text" }, + contentIconName: { + ...(IconStories?.argTypes?.iconName ?? {}), + name: "Icon", + description: "Optional workflow icon that appears before the value/placeholder text within the picker.", + if: false, + }, + isQuiet: { + ...isQuiet, + description: "An alternative way to display the Picker without a visible background.", + name: "Quiet styling", }, helpText: { name: "Help text", @@ -90,11 +86,18 @@ export default { isOpen, isKeyboardFocused, isDisabled, - isLoading, - isInvalid, + isLoading: { + ...isLoading, + description: "When in the loading state, a progress circle will display next to the disclosure icon.", + if: { arg: "isDisabled", eq: false } + }, + isInvalid: { + ...isInvalid, + description: "When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon.", + }, isHovered, isActive, - popoverContent: { table: { disable: true } }, + content: { table: { disable: true } }, }, args: { rootClass: "spectrum-Picker", @@ -140,6 +143,9 @@ export default { packageJson, metadata, }, + decorators: [ + withDownStateDimensionCapture(".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"), + ], }; export const Default = PickerGroup.bind({}); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 4be33a2092f..806c2782834 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -7,33 +7,42 @@ import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; 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 { when } from "lit/directives/when.js"; import "../index.css"; /** - * Template for Picker only (no popover or help text). + * Template for just the Picker. Does not include sibling Label and Help text. */ export const Picker = ({ rootClass = "spectrum-Picker", + id = getRandomId("picker"), size = "m", - labelPosition, - placeholder = "", - currentValue = "", + labelPosition = "top", + placeholder, + contentIconName, isQuiet = false, isKeyboardFocused = false, - showWorkflowIcon = false, isOpen = false, isInvalid = false, isLoading = false, isDisabled = false, isHovered = false, isActive = false, + ariaLabeledBy, customClasses = [], customStyles = {}, - onclick, } = {}, context = {}) => { + const { updateArgs } = context; + + // Use the chevron from the UI icon set for each size, as defined in the design spec. + let disclosureIconName = "ChevronDown100"; + if (size == "s") { disclosureIconName = "ChevronDown75"; } + else if (size == "l") { disclosureIconName = "ChevronDown200"; } + else if (size == "xl") { disclosureIconName = "ChevronDown300"; } + return html` <button class=${classMap({ @@ -41,7 +50,7 @@ export const Picker = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--quiet`]: isQuiet, - [`${rootClass}--sideLabel`]: labelPosition != "top", + [`${rootClass}--sideLabel`]: labelPosition == "side", ["is-invalid"]: isInvalid, ["is-open"]: isOpen, ["is-loading"]: isLoading, @@ -52,24 +61,23 @@ export const Picker = ({ })} ?disabled=${isDisabled} aria-haspopup="listbox" + id=${id} style=${styleMap(customStyles)} type="button" - @click=${onclick} + @click=${() => { + if (window.isChromatic()) return; + updateArgs({ isOpen: !isOpen }); + }} + aria-labelledby=${ifDefined(ariaLabeledBy)} > - ${when(showWorkflowIcon, () => + ${when(contentIconName, () => Icon({ + iconName: contentIconName, size, - setName: "workflow", - iconName: "Image", - customClasses: [`${rootClass}-icon`], - }, context) - )} - <span - class=${classMap({ - [`${rootClass}-label`]: true, - ["is-placeholder"]: !currentValue, - })} - >${currentValue ? currentValue : placeholder}</span> + customClasses: ["spectrum-Picker-icon"], + }, context)) + } + <span class="${rootClass}-label is-placeholder">${placeholder}</span> ${when(isLoading, () => ProgressCircle({ size: "s", @@ -87,12 +95,7 @@ export const Picker = ({ ${Icon({ size, setName: "ui", - iconName: { - s: "ChevronDown75", - m: "ChevronDown100", - l: "ChevronDown200", - xl: "ChevronDown300", - }[size ?? "m"], + iconName: disclosureIconName, customClasses: [`${rootClass}-menuIcon`], }, context)} </button> @@ -100,92 +103,103 @@ export const Picker = ({ }; /** - * Picker template including adjacent popover and help text. + * Picker template used along with other sibling components, such as Field label and Help text. */ export const Template = ({ - rootClass = "spectrum-Picker", size = "m", label, labelPosition = "top", - placeholder = "", - currentValue = "", - helpText = "", + helpText, isQuiet = false, - isKeyboardFocused = false, - showWorkflowIcon = false, isOpen = false, isInvalid = false, - isLoading = false, isDisabled = false, - isReadOnly = false, - isHovered = false, - isActive = false, + isLoading = false, withSwitch = false, fieldLabelStyle = {}, - customClasses = [], - customStyles = {}, - popoverContent = [], - id = getRandomId("picker"), + fieldLabelId = getRandomId("fieldlabel"), + customPopoverStyles = { + // Demonstrate popover at 100% of the width of the Picker. + minInlineSize: "100%", + "--mod-menu-inline-size": "100%", + // Helps ensure that Popover appears below the Picker, with side labels layout. + display: "block", + }, + content = [], } = {}, context = {}) => { - const { updateArgs } = context; + const pickerMarkup = Picker({ + size, + isQuiet, + isOpen, + isInvalid, + isDisabled, + isLoading, + content, + labelPosition, + ariaLabeledBy: fieldLabelId, + }, context); - return html` - ${when(label, () => - FieldLabel({ - size, - label, - isDisabled, - customStyles: fieldLabelStyle, - alignment: labelPosition === "side" ? "left" : undefined, - }, context) - )} - ${Popover({ - isOpen: isOpen && !isDisabled, - withTip: false, - position: "bottom-start", - trigger: (passthroughs, context) => Picker({ - ...passthroughs, - rootClass, - size, - placeholder, - currentValue, - isQuiet, - showWorkflowIcon, - isKeyboardFocused, - isOpen, - isInvalid, - isLoading, - isDisabled, - isReadOnly, - isHovered, - isActive, - customClasses, - customStyles, - labelPosition, - id, - onclick: function() { - updateArgs({ isOpen: !isOpen }); - }, - }, context), - content: popoverContent, - }, context)} - ${when(helpText, () => - HelpText({ - text: helpText, - variant: isInvalid ? "negative" : "neutral", - hideIcon: true, - }, context) - )} - ${when(withSwitch, () => - Switch({ - size, - label: "Toggle switch", - customStyles: { - "padding-inline-start": "15px" + const popoverMarkup = content.length !== 0 ? Popover({ + isOpen: isOpen && !isDisabled && !isLoading, + withTip: false, + position: "bottom", + isQuiet, + content, + size, + customStyles: customPopoverStyles, + }, context) : ""; + + const helpTextMarkup = helpText ? HelpText({ + size, + text: helpText, + variant: isInvalid ? "negative" : "neutral", + hideIcon: true, + isDisabled, + }, context) : ""; + + const markup = html` + <div + style=${styleMap({ + position: "relative", + display: "inline-block", + ...(labelPosition == "side") && { + display: "flex", + flexWrap: "nowrap", } - }, context) - )} - `; + })} + > + ${when(label, () => + FieldLabel({ + size, + label, + isDisabled, + style: fieldLabelStyle, + alignment: labelPosition == "side" ? "left" : undefined, + id: fieldLabelId, + }, context) + )} + ${labelPosition == "side" + ? html`<div style="display: inline-block; position: relative;">${pickerMarkup} ${popoverMarkup} ${helpTextMarkup}</div>` + : html`${pickerMarkup} ${popoverMarkup} ${helpTextMarkup}` + } + ${when(withSwitch, () => + Switch({ + size, + label: "Toggle switch", + id: fieldLabelId + "-switch", + customStyles: { + "padding-inline-start": "15px" + } + }, context) + )} + </div>`; + + // Make sure there is a wrapper around sibling components when using the Chromatic + // template, so their layout is not affected by the flex and grid layouts used. + if (window.isChromatic()) { + return html`<div style="position: relative;">${markup}</div>`; + } + return markup; }; /** From 4e3db2e8e3418fc4be28f64d0be72e1a38631492 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Fri, 28 Jun 2024 12:03:35 -0400 Subject: [PATCH 043/103] feat(statuslight): s2 migration (#2818) * refactor: remove --sizeM modifier and make "medium" default size * refactor:remove accent semantic variant * refactor: add/update new colors/tokens * refactor: update typography styles * refactor: generate new mod properties * docs: add migration notes/changes to yml * feat: add chromatic vr coverage * fix: high contrast changes (utilizes changes from PR#2771 to clean up legacy vendor prefixes) * docs: add changeset and update yml --- .changeset/chilly-peaches-sniff.md | 21 +++++ components/statuslight/dist/metadata.json | 40 +++++++-- components/statuslight/index.css | 86 +++++++++++++++---- .../stories/statuslight.stories.js | 17 ++-- 4 files changed, 135 insertions(+), 29 deletions(-) create mode 100644 .changeset/chilly-peaches-sniff.md diff --git a/.changeset/chilly-peaches-sniff.md b/.changeset/chilly-peaches-sniff.md new file mode 100644 index 00000000000..518391edc1c --- /dev/null +++ b/.changeset/chilly-peaches-sniff.md @@ -0,0 +1,21 @@ +--- +"@spectrum-css/statuslight": major +--- + +Spectrum 2 Status light migration + +New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight. + +New mods added: + +- `--mod-statuslight-font-family` +- `--mod-statuslight-font-style` +- `--mod-statuslight-nonsemantic-brown-color` +- `--mod-statuslight-nonsemantic-cinnamon-color` +- `--mod-statuslight-nonsemantic-pink-color` +- `--mod-statuslight-nonsemantic-silver-color` +- `--mod-statuslight-nonsemantic-turquoise-color` + +Removed mods: + +- `--mod-statuslight-semantic-accent-color` diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 7c7c6a7587f..b2fc9f40509 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -2,10 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-StatusLight", - ".spectrum-StatusLight--accent:before", ".spectrum-StatusLight--blue:before", + ".spectrum-StatusLight--brown:before", ".spectrum-StatusLight--celery:before", ".spectrum-StatusLight--chartreuse:before", + ".spectrum-StatusLight--cinnamon:before", ".spectrum-StatusLight--cyan:before", ".spectrum-StatusLight--fuchsia:before", ".spectrum-StatusLight--gray:before", @@ -18,14 +19,16 @@ ".spectrum-StatusLight--neutral:before", ".spectrum-StatusLight--notice:before", ".spectrum-StatusLight--orange:before", + ".spectrum-StatusLight--pink:before", ".spectrum-StatusLight--positive:before", ".spectrum-StatusLight--purple:before", ".spectrum-StatusLight--red:before", ".spectrum-StatusLight--seafoam:before", + ".spectrum-StatusLight--silver:before", ".spectrum-StatusLight--sizeL", - ".spectrum-StatusLight--sizeM", ".spectrum-StatusLight--sizeS", ".spectrum-StatusLight--sizeXL", + ".spectrum-StatusLight--turquoise:before", ".spectrum-StatusLight--yellow:before", ".spectrum-StatusLight:before", ".spectrum-StatusLight:lang(ja)", @@ -37,14 +40,18 @@ "--mod-statuslight-content-color-default", "--mod-statuslight-corner-radius", "--mod-statuslight-dot-size", + "--mod-statuslight-font-family", "--mod-statuslight-font-size", + "--mod-statuslight-font-style", "--mod-statuslight-font-weight", "--mod-statuslight-height", "--mod-statuslight-line-height", "--mod-statuslight-line-height-cjk", "--mod-statuslight-nonsemantic-blue-color", + "--mod-statuslight-nonsemantic-brown-color", "--mod-statuslight-nonsemantic-celery-color", "--mod-statuslight-nonsemantic-chartreuse-color", + "--mod-statuslight-nonsemantic-cinnamon-color", "--mod-statuslight-nonsemantic-cyan-color", "--mod-statuslight-nonsemantic-fuchsia-color", "--mod-statuslight-nonsemantic-gray-color", @@ -52,11 +59,13 @@ "--mod-statuslight-nonsemantic-indigo-color", "--mod-statuslight-nonsemantic-magenta-color", "--mod-statuslight-nonsemantic-orange-color", + "--mod-statuslight-nonsemantic-pink-color", "--mod-statuslight-nonsemantic-purple-color", "--mod-statuslight-nonsemantic-red-color", "--mod-statuslight-nonsemantic-seafoam-color", + "--mod-statuslight-nonsemantic-silver-color", + "--mod-statuslight-nonsemantic-turquoise-color", "--mod-statuslight-nonsemantic-yellow-color", - "--mod-statuslight-semantic-accent-color", "--mod-statuslight-semantic-info-color", "--mod-statuslight-semantic-negative-color", "--mod-statuslight-semantic-neutral-color", @@ -73,6 +82,10 @@ "--spectrum-status-light-dot-size-large", "--spectrum-status-light-dot-size-medium", "--spectrum-status-light-dot-size-small", + "--spectrum-status-light-text-to-visual-100", + "--spectrum-status-light-text-to-visual-200", + "--spectrum-status-light-text-to-visual-300", + "--spectrum-status-light-text-to-visual-75", "--spectrum-status-light-top-to-dot-extra-large", "--spectrum-status-light-top-to-dot-large", "--spectrum-status-light-top-to-dot-medium", @@ -81,14 +94,18 @@ "--spectrum-statuslight-content-color-default", "--spectrum-statuslight-corner-radius", "--spectrum-statuslight-dot-size", + "--spectrum-statuslight-font-family", "--spectrum-statuslight-font-size", + "--spectrum-statuslight-font-style", "--spectrum-statuslight-font-weight", "--spectrum-statuslight-height", "--spectrum-statuslight-line-height", "--spectrum-statuslight-line-height-cjk", "--spectrum-statuslight-nonsemantic-blue-color", + "--spectrum-statuslight-nonsemantic-brown-color", "--spectrum-statuslight-nonsemantic-celery-color", "--spectrum-statuslight-nonsemantic-chartreuse-color", + "--spectrum-statuslight-nonsemantic-cinnamon-color", "--spectrum-statuslight-nonsemantic-cyan-color", "--spectrum-statuslight-nonsemantic-fuchsia-color", "--spectrum-statuslight-nonsemantic-gray-color", @@ -96,9 +113,12 @@ "--spectrum-statuslight-nonsemantic-indigo-color", "--spectrum-statuslight-nonsemantic-magenta-color", "--spectrum-statuslight-nonsemantic-orange-color", + "--spectrum-statuslight-nonsemantic-pink-color", "--spectrum-statuslight-nonsemantic-purple-color", "--spectrum-statuslight-nonsemantic-red-color", "--spectrum-statuslight-nonsemantic-seafoam-color", + "--spectrum-statuslight-nonsemantic-silver-color", + "--spectrum-statuslight-nonsemantic-turquoise-color", "--spectrum-statuslight-nonsemantic-yellow-color", "--spectrum-statuslight-semantic-accent-color", "--spectrum-statuslight-semantic-info-color", @@ -117,8 +137,10 @@ "--spectrum-accent-visual-color", "--spectrum-blue-visual-color", "--spectrum-border-width-100", + "--spectrum-brown-visual-color", "--spectrum-celery-visual-color", "--spectrum-chartreuse-visual-color", + "--spectrum-cinnamon-visual-color", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -132,12 +154,16 @@ "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-corner-radius-full", "--spectrum-cyan-visual-color", + "--spectrum-default-font-family", + "--spectrum-default-font-style", "--spectrum-font-size-100", "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", "--spectrum-fuchsia-visual-color", + "--spectrum-gray-600", "--spectrum-gray-visual-color", "--spectrum-green-visual-color", "--spectrum-indigo-visual-color", @@ -150,14 +176,14 @@ "--spectrum-neutral-visual-color", "--spectrum-notice-visual-color", "--spectrum-orange-visual-color", + "--spectrum-pink-visual-color", "--spectrum-positive-visual-color", "--spectrum-purple-visual-color", "--spectrum-red-visual-color", + "--spectrum-regular-font-weight", "--spectrum-seafoam-visual-color", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", + "--spectrum-silver-visual-color", + "--spectrum-turquoise-visual-color", "--spectrum-yellow-visual-color" ], "system-theme": [], diff --git a/components/statuslight/index.css b/components/statuslight/index.css index aed7e351d88..f1788a51779 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -11,17 +11,57 @@ * governing permissions and limitations under the License. */ -.spectrum-StatusLight, -.spectrum-StatusLight--sizeM { +.spectrum-StatusLight { + /* Static tokens */ + --spectrum-statuslight-corner-radius: var(--spectrum-corner-radius-full); + --spectrum-statuslight-border-width: var(--spectrum-border-width-100); + + /* Size */ --spectrum-statuslight-height: var(--spectrum-component-height-100); --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium); + --spectrum-statuslight-line-height: var(--spectrum-line-height-100); + --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100); + /* Font */ + --spectrum-statuslight-font-family: var(--spectrum-default-font-family); + --spectrum-statuslight-font-weight: var(--spectrum-regular-font-weight); + --spectrum-statuslight-font-style: var(--spectrum-default-font-style); --spectrum-statuslight-font-size: var(--spectrum-font-size-100); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-100); + /* Space */ + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-100); --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-medium); --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-100); --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + + /* Color */ + --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-statuslight-subdued-content-color-default: var(--spectrum-gray-600); + --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); + --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); + --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); + --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); + --spectrum-statuslight-semantic-positive-color: var(--spectrum-positive-visual-color); + + --spectrum-statuslight-nonsemantic-gray-color: var(--spectrum-gray-visual-color); + --spectrum-statuslight-nonsemantic-red-color: var(--spectrum-red-visual-color); + --spectrum-statuslight-nonsemantic-orange-color: var(--spectrum-orange-visual-color); + --spectrum-statuslight-nonsemantic-yellow-color: var(--spectrum-yellow-visual-color); + --spectrum-statuslight-nonsemantic-chartreuse-color: var(--spectrum-chartreuse-visual-color); + --spectrum-statuslight-nonsemantic-celery-color: var(--spectrum-celery-visual-color); + --spectrum-statuslight-nonsemantic-green-color: var(--spectrum-green-visual-color); + --spectrum-statuslight-nonsemantic-seafoam-color: var(--spectrum-seafoam-visual-color); + --spectrum-statuslight-nonsemantic-cyan-color: var(--spectrum-cyan-visual-color); + --spectrum-statuslight-nonsemantic-blue-color: var(--spectrum-blue-visual-color); + --spectrum-statuslight-nonsemantic-indigo-color: var(--spectrum-indigo-visual-color); + --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color); + --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color); + --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color); + --spectrum-statuslight-nonsemantic-pink-color: var(--spectrum-pink-visual-color); + --spectrum-statuslight-nonsemantic-turquoise-color: var(--spectrum-turquoise-visual-color); + --spectrum-statuslight-nonsemantic-cinnamon-color: var(--spectrum-cinnamon-visual-color); + --spectrum-statuslight-nonsemantic-brown-color: var(--spectrum-brown-visual-color); + --spectrum-statuslight-nonsemantic-silver-color: var(--spectrum-silver-visual-color); } .spectrum-StatusLight--sizeS { @@ -30,7 +70,7 @@ --spectrum-statuslight-font-size: var(--spectrum-font-size-75); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-75); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-75); --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-small); --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-75); --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); @@ -42,7 +82,7 @@ --spectrum-statuslight-font-size: var(--spectrum-font-size-200); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-200); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-200); --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-large); --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-200); --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); @@ -54,7 +94,7 @@ --spectrum-statuslight-font-size: var(--spectrum-font-size-300); - --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-text-to-visual-300); + --spectrum-statuslight-spacing-dot-to-label: var(--spectrum-status-light-text-to-visual-300); --spectrum-statuslight-spacing-top-to-dot: var(--spectrum-status-light-top-to-dot-extra-large); --spectrum-statuslight-spacing-top-to-label: var(--spectrum-component-top-to-text-300); --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); @@ -104,6 +144,8 @@ font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size)); font-weight: var(--mod-statuslight-font-weight, var(--spectrum-statuslight-font-weight)); + font-family: var(--mod-statuslight-font-family, var(--spectrum-statuslight-font-family)); + font-style: var(--mod-statuslight-font-style, var(--spectrum-statuslight-font-style)); line-height: var(--mod-statuslight-line-height, var(--spectrum-statuslight-line-height)); @@ -117,8 +159,6 @@ /* Dot */ &::before { - --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); - content: ""; flex-grow: 0; flex-shrink: 0; @@ -127,6 +167,7 @@ block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); + --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); } @@ -134,8 +175,6 @@ /* Semantic Colors */ .spectrum-StatusLight--neutral { - font-style: italic; - color: var(--highcontrast-statuslight-subdued-content-color-default, var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))); &::before { @@ -143,10 +182,6 @@ } } -.spectrum-StatusLight--accent::before { - background-color: var(--mod-statuslight-semantic-accent-color, var(--spectrum-statuslight-semantic-accent-color)); -} - .spectrum-StatusLight--info::before { background-color: var(--mod-statuslight-semantic-info-color, var(--spectrum-statuslight-semantic-info-color)); } @@ -220,13 +255,32 @@ background-color: var(--mod-statuslight-nonsemantic-magenta-color, var(--spectrum-statuslight-nonsemantic-magenta-color)); } +.spectrum-StatusLight--pink::before { + background-color: var(--mod-statuslight-nonsemantic-pink-color, var(--spectrum-statuslight-nonsemantic-pink-color)); +} + +.spectrum-StatusLight--turquoise::before { + background-color: var(--mod-statuslight-nonsemantic-turquoise-color, var(--spectrum-statuslight-nonsemantic-turquoise-color)); +} + +.spectrum-StatusLight--cinnamon::before { + background-color: var(--mod-statuslight-nonsemantic-cinnamon-color, var(--spectrum-statuslight-nonsemantic-cinnamon-color)); +} + +.spectrum-StatusLight--brown::before { + background-color: var(--mod-statuslight-nonsemantic-brown-color, var(--spectrum-statuslight-nonsemantic-brown-color)); +} + +.spectrum-StatusLight--silver::before { + background-color: var(--mod-statuslight-nonsemantic-silver-color, var(--spectrum-statuslight-nonsemantic-silver-color)); +} + @media (forced-colors: active) { .spectrum-StatusLight { + forced-color-adjust: none; --highcontrast-statuslight-content-color-default: CanvasText; --highcontrast-statuslight-subdued-content-color-default: CanvasText; - forced-color-adjust: none; - /* Dot */ &::before { forced-color-adjust: none; diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b385bcc9da3..66ffde71986 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -33,26 +33,30 @@ export default { category: "Component", }, options: [ - "accent", "info", "neutral", "positive", "notice", "negative", - "gray", - "red", - "orange", "yellow", "chartreuse", "celery", - "green", "seafoam", "cyan", - "blue", "indigo", "purple", "fuchsia", "magenta", + "gray", + "red", + "orange", + "green", + "blue", + "pink", + "turquoise", + "cinnamon", + "brown", + "silver", ], control: "select", }, @@ -72,6 +76,7 @@ export default { packageJson, metadata, }, + decorators: [], }; /** From 7b4f4f432028562d40f0a76308e9c07ac0676a3f Mon Sep 17 00:00:00 2001 From: Melissa Thompson <mthompson@heysparkbox.com> Date: Fri, 19 Jul 2024 15:06:05 -0400 Subject: [PATCH 044/103] feat(tooltip): s2 migration (#2743) --- .changeset/light-years-speak.md | 23 +++ components/tooltip/dist/metadata.json | 46 +----- components/tooltip/index.css | 146 +++++------------- components/tooltip/stories/template.js | 3 - components/tooltip/stories/tooltip.stories.js | 11 -- tokens/custom/large-vars.css | 4 +- tokens/custom/medium-vars.css | 4 +- 7 files changed, 77 insertions(+), 160 deletions(-) create mode 100644 .changeset/light-years-speak.md diff --git a/.changeset/light-years-speak.md b/.changeset/light-years-speak.md new file mode 100644 index 00000000000..d92990e0f59 --- /dev/null +++ b/.changeset/light-years-speak.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/tooltip": major +--- + +feat(tooltip): Spectrum 2 migration + +This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed. + +The redesign of the tip, specifically the rounding, required a reworking of how we use clip-path and transform. + +Some custom property mods have been removed: + +- `--mod-tooltip-background-color-informative` +- `--mod-tooltip-background-color-negative` +- `--mod-tooltip-background-color-positive` +- `--mod-tooltip-icon-spacing-block-start` +- `--mod-tooltip-icon-spacing-inline-end` +- `--mod-tooltip-icon-spacing-inline-start` +- `--mod-tooltip-icon-width` + +And one mod has been added: + +- `--mod-tooltip-tip-corner-radius` diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 3aea2e551ee..637b9bf30d2 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -35,8 +35,6 @@ ".spectrum-Tooltip--end-top.is-open:dir(rtl)", ".spectrum-Tooltip--end.is-open", ".spectrum-Tooltip--end.is-open:dir(rtl)", - ".spectrum-Tooltip--info", - ".spectrum-Tooltip--info .spectrum-Tooltip-tip", ".spectrum-Tooltip--left", ".spectrum-Tooltip--left .spectrum-Tooltip-tip", ".spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl)", @@ -49,10 +47,6 @@ ".spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl)", ".spectrum-Tooltip--left-top.is-open", ".spectrum-Tooltip--left.is-open", - ".spectrum-Tooltip--negative", - ".spectrum-Tooltip--negative .spectrum-Tooltip-tip", - ".spectrum-Tooltip--positive", - ".spectrum-Tooltip--positive .spectrum-Tooltip-tip", ".spectrum-Tooltip--right", ".spectrum-Tooltip--right .spectrum-Tooltip-tip", ".spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl)", @@ -99,7 +93,6 @@ ".spectrum-Tooltip--top.is-open", ".spectrum-Tooltip-label", ".spectrum-Tooltip-tip", - ".spectrum-Tooltip-typeIcon", ".spectrum-Tooltip.is-open", ".spectrum-Tooltip:lang(ja)", ".spectrum-Tooltip:lang(ko)", @@ -309,20 +302,12 @@ "--mod-overlay-animation-duration-opened", "--mod-tooltip-animation-distance", "--mod-tooltip-background-color-default", - "--mod-tooltip-background-color-informative", - "--mod-tooltip-background-color-negative", - "--mod-tooltip-background-color-positive", "--mod-tooltip-border-radius", "--mod-tooltip-cjk-line-height", "--mod-tooltip-content-color", "--mod-tooltip-font-size", "--mod-tooltip-font-weight", "--mod-tooltip-height", - "--mod-tooltip-icon-height", - "--mod-tooltip-icon-spacing-block-start", - "--mod-tooltip-icon-spacing-inline-end", - "--mod-tooltip-icon-spacing-inline-start", - "--mod-tooltip-icon-width", "--mod-tooltip-line-height", "--mod-tooltip-margin", "--mod-tooltip-max-inline-size", @@ -332,6 +317,7 @@ "--mod-tooltip-spacing-inline", "--mod-tooltip-tip-antialiasing-inset", "--mod-tooltip-tip-block-size", + "--mod-tooltip-tip-corner-radius", "--mod-tooltip-tip-height-percentage", "--mod-tooltip-tip-square-size" ], @@ -340,20 +326,12 @@ "--spectrum-tooltip-animation-duration", "--spectrum-tooltip-backgound-color-default-neutral", "--spectrum-tooltip-background-color-default", - "--spectrum-tooltip-background-color-informative", - "--spectrum-tooltip-background-color-negative", - "--spectrum-tooltip-background-color-positive", "--spectrum-tooltip-border-radius", "--spectrum-tooltip-cjk-line-height", "--spectrum-tooltip-content-color", "--spectrum-tooltip-font-size", "--spectrum-tooltip-font-weight", "--spectrum-tooltip-height", - "--spectrum-tooltip-icon-height", - "--spectrum-tooltip-icon-spacing-block-start", - "--spectrum-tooltip-icon-spacing-inline-end", - "--spectrum-tooltip-icon-spacing-inline-start", - "--spectrum-tooltip-icon-width", "--spectrum-tooltip-line-height", "--spectrum-tooltip-margin", "--spectrum-tooltip-max-inline-size", @@ -364,11 +342,10 @@ "--spectrum-tooltip-spacing-inline", "--spectrum-tooltip-tip-antialiasing-inset", "--spectrum-tooltip-tip-block-size", + "--spectrum-tooltip-tip-corner-radius", "--spectrum-tooltip-tip-height", "--spectrum-tooltip-tip-height-percentage", - "--spectrum-tooltip-tip-inline-size", - "--spectrum-tooltip-tip-square-size", - "--spectrum-tooltip-tip-width" + "--spectrum-tooltip-tip-square-size" ], "global": [ "--spectrum-animation-duration-0", @@ -378,25 +355,18 @@ "--spectrum-component-edge-to-text-75", "--spectrum-component-height-75", "--spectrum-component-top-to-text-75", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-400", "--spectrum-font-size-75", - "--spectrum-informative-background-color-default", - "--spectrum-line-height-100", - "--spectrum-negative-background-color-default", + "--spectrum-gray-25", + "--spectrum-neutral-background-color-default", "--spectrum-neutral-subdued-background-color-default", - "--spectrum-positive-background-color-default", "--spectrum-regular-font-weight", - "--spectrum-text-to-visual-75", - "--spectrum-white", - "--spectrum-workflow-icon-size-50" + "--spectrum-spacing-75" ], "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", - "--highcontrast-tooltip-background-color-informative", - "--highcontrast-tooltip-background-color-negative", - "--highcontrast-tooltip-background-color-positive" + "--highcontrast-tooltip-border-width" ] } diff --git a/components/tooltip/index.css b/components/tooltip/index.css index b8c5806afa7..2a7787b7aec 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -17,19 +17,19 @@ --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); /* override if additional spacing to source is required */ --spectrum-tooltip-margin: 0px; --spectrum-tooltip-height: var(--spectrum-component-height-75); --spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width); - --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100); - - --spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50); - --spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50); + --spectrum-tooltip-border-radius: var(--spectrum-corner-radius-400); --spectrum-tooltip-font-size: var(--spectrum-font-size-75); - --spectrum-tooltip-line-height: var(--spectrum-line-height-100); + + /* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */ + --spectrum-tooltip-line-height: 1.2; --spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100); --spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight); @@ -40,53 +40,23 @@ --spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75); --spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75); - /* icon spacing */ - --spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75); - --spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75); - - /* colors */ - --spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default); - --spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default); - --spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default); - - --spectrum-tooltip-content-color: var(--spectrum-white); + --spectrum-tooltip-content-color: var(--spectrum-gray-25); + --spectrum-tooltip-background-color-default: var(--spectrum-neutral-background-color-default); /* tip */ - --spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width); --spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height); - /* Width and height of square element used to render the tip triangle. */ - --spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size); - /* Percentage value of height divided by width, for calculating clip-path within a square tip. */ - --spectrum-tooltip-tip-height-percentage: 50%; + --spectrum-tooltip-tip-height-percentage: 100%; /* Tip inset from container edges for clip-paths calculation, to fix hairline gap in Chrome cause by antialiasing. */ --spectrum-tooltip-tip-antialiasing-inset: 0.5px; /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100); - - /* neutral background changes per theme */ - --spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral); -} - -@media (forced-colors: active) { - .spectrum-Tooltip { - border: 1px solid transparent; - } - - .spectrum-Tooltip-tip { - --highcontrast-tooltip-background-color-default: CanvasText; - --highcontrast-tooltip-background-color-informative: CanvasText; - --highcontrast-tooltip-background-color-positive: CanvasText; - --highcontrast-tooltip-background-color-negative: CanvasText; + --spectrum-tooltip-pointer-corner-spacing: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius)); - forced-color-adjust: none; - } + --highcontrast-tooltip-border-width: 0px; } - .spectrum-Tooltip { @extend %spectrum-overlay; @@ -132,19 +102,6 @@ } } -/****** Variants ******/ -.spectrum-Tooltip--info { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); -} - -.spectrum-Tooltip--positive { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); -} - -.spectrum-Tooltip--negative { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); -} - .spectrum-Tooltip.is-open { @extend %spectrum-overlay--open; } @@ -156,27 +113,17 @@ block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)); - inset-block-start: 100%; + inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); /* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */ - left: 50%; - transform: translateX(-50%); + left: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); + transform: rotate(-45deg); background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default))); /* Default: Pointing down ▽ */ - clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); - - .spectrum-Tooltip--info & { - background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative))); - } - - .spectrum-Tooltip--positive & { - background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive))); - } + clip-path: polygon(0 0, 100% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 0 100%); - .spectrum-Tooltip--negative & { - background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative))); - } + border-radius: 0 0 0 var(--mod-tooltip-tip-corner-radius, var(--spectrum-tooltip-tip-corner-radius)); /*** Tip Placement ***/ /* tip is horizontal at bottom pointing down ▽ */ @@ -185,7 +132,8 @@ .spectrum-Tooltip--top-right &, .spectrum-Tooltip--top-start &, .spectrum-Tooltip--top-end & { - inset-block-start: 100%; + inset-block-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(-45deg); } /* tip is horizontal at top pointing up △ */ @@ -194,20 +142,8 @@ .spectrum-Tooltip--bottom-right &, .spectrum-Tooltip--bottom-start &, .spectrum-Tooltip--bottom-end & { - clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)))); - inset-block: auto 100%; - } - - /* tip is horizontal and at the edge */ - .spectrum-Tooltip--top-left &, - .spectrum-Tooltip--bottom-left &, - .spectrum-Tooltip--top-right &, - .spectrum-Tooltip--bottom-right &, - .spectrum-Tooltip--top-start &, - .spectrum-Tooltip--bottom-start &, - .spectrum-Tooltip--top-end &, - .spectrum-Tooltip--bottom-end & { - transform: none; + inset-block: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(135deg); } /* tip is horizontal at left △ ▽ */ @@ -257,8 +193,7 @@ .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - inset-block-start: 50%; - transform: translateY(-50%); + inset-block-start: calc(50% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size)))); } /* tip is vertical and at edge */ @@ -270,7 +205,6 @@ .spectrum-Tooltip--start-bottom &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - transform: none; inset-block-start: auto; } @@ -281,8 +215,8 @@ .spectrum-Tooltip--end &, .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { - clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); - inset-inline: auto 100%; + inset-inline: auto calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(45deg); } /* tip is vertical pointing ▷ right or end, for LTR. */ @@ -292,8 +226,8 @@ .spectrum-Tooltip--start &, .spectrum-Tooltip--start-top &, .spectrum-Tooltip--start-bottom & { - clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%); - inset-inline-start: 100%; + inset-inline-start: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); + transform: rotate(-135deg); } /* tip is vertical at top ◁ ▷ */ @@ -320,9 +254,9 @@ .spectrum-Tooltip--end-top &, .spectrum-Tooltip--end-bottom & { &:dir(rtl) { - clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%); + transform: rotate(-135deg); right: auto; - left: 100%; + left: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); } } @@ -334,25 +268,13 @@ .spectrum-Tooltip--start-top &, .spectrum-Tooltip--start-bottom & { &:dir(rtl) { - clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0); + transform: rotate(45deg); left: auto; - right: 100%; + right: calc(100% - (0.5 * var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size))) - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset)) + var(--highcontrast-tooltip-border-width)); } } } -/****** Icon ******/ -.spectrum-Tooltip-typeIcon { - /* subtract tooltip padding from icon start margin */ - margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline))); - margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end)); - margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start)); - inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width)); - block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height)); - align-self: flex-start; - flex-shrink: 0; -} - /****** Label ******/ .spectrum-Tooltip-label { /* Make sure line height is correct to prevent problems in Windows */ @@ -650,3 +572,15 @@ } } } + +@media (forced-colors: active) { + .spectrum-Tooltip { + --highcontrast-tooltip-border-width: 1px; + + border: var(--highcontrast-tooltip-border-width) solid CanvasText; + } + + .spectrum-Tooltip-tip { + --highcontrast-tooltip-background-color-default: CanvasText; + } +} diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 4098beb8b73..1457ae2b95f 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -11,7 +11,6 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Tooltip", label, - variant = "neutral", placement, isOpen = true, isFocused = false, @@ -42,8 +41,6 @@ export const Template = ({ <span class=${classMap({ [rootClass]: true, - [`${rootClass}--${variant}`]: - typeof variant !== "undefined" && variant !== "neutral", [`${rootClass}--${placement}`]: typeof placement !== "undefined", "is-open": isOpen, "is-focused": isFocused, diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index a594409e4b7..3a48b70e916 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -21,16 +21,6 @@ export default { }, control: "text", }, - variant: { - name: "Variant", - type: { name: "string" }, - table: { - type: { summary: "string" }, - category: "Component", - }, - options: ["neutral", "info", "positive", "negative"], - control: "inline-radio", - }, placement: { name: "Placement", description: "The placement of the tooltip relative to the source. Note that placements that start with left/right do not change with text direction, but start/end placements do.", @@ -86,7 +76,6 @@ export default { isOpen: true, isFocused: false, showOnHover: false, - variant: "neutral", label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", }, parameters: { diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 358ad3404c6..951ee330822 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -111,7 +111,9 @@ --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-tooltip-animation-distance: 5px; + /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ + --spectrum-tooltip-tip-square-size: 10px; + --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 5221e74999c..3b090a3a0bb 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -109,7 +109,9 @@ --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ + --spectrum-tooltip-tip-square-size: 8px; + --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; From 547f860ec92652d267ae9c3bce7b81d5e3cb7c01 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 12 Aug 2024 20:05:13 +0000 Subject: [PATCH 045/103] chore: release (next) (#2852) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --- .storybook/package.json | 4 +-- components/dialog/package.json | 8 +++++ components/picker/package.json | 6 ++-- components/tooltip/package.json | 20 ++++++------ yarn.lock | 56 ++++++++++++++++++++++----------- 5 files changed, 61 insertions(+), 33 deletions(-) diff --git a/.storybook/package.json b/.storybook/package.json index ca59effec22..bb968f27c62 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -40,8 +40,8 @@ }, "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/bundle": "workspace:^", - "@spectrum-css/tokens": "14.0.0-next.2", + "@spectrum-css/bundle": "1.0.0", + "@spectrum-css/tokens": "16.0.1", "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0", "@spectrum-css/ui-icons": "1.1.2" }, diff --git a/components/dialog/package.json b/components/dialog/package.json index 730879c20e9..a728d6bd185 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -25,6 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { + "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", @@ -32,6 +34,12 @@ "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + }, + "@spectrum-css/buttongroup": { + "optional": true + }, "@spectrum-css/closebutton": { "optional": true }, diff --git a/components/picker/package.json b/components/picker/package.json index cae30f9c849..43cdaf799b3 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -26,10 +26,10 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8", - "@spectrum-css/progresscircle": ">=5", + "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 715e6239739..379ecb22fc4 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/icon": "9.1.0", @@ -51,13 +59,5 @@ "rootClass": "spectrum-Tooltip", "swc": "https://opensource.adobe.com/spectrum-web-components/components/tooltip/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/yarn.lock b/yarn.lock index e8359f5a6a9..59abdc1faee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3980,7 +3980,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/bundle@workspace:^, @spectrum-css/bundle@workspace:tools/bundle": +"@spectrum-css/bundle@npm:1.0.0, @spectrum-css/bundle@workspace:tools/bundle": version: 0.0.0-use.local resolution: "@spectrum-css/bundle@workspace:tools/bundle" dependencies: @@ -4488,12 +4488,18 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: + "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: + "@spectrum-css/button": + optional: true + "@spectrum-css/buttongroup": + optional: true "@spectrum-css/closebutton": optional: true "@spectrum-css/divider": @@ -4910,10 +4916,10 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8" - "@spectrum-css/progresscircle": ">=5" + "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/helptext": @@ -4994,8 +5000,8 @@ __metadata: "@babel/core": "npm:^7.26.0" "@chromatic-com/storybook": "npm:^3.2.3" "@etchteam/storybook-addon-status": "npm:^5.0.0" - "@spectrum-css/bundle": "workspace:^" - "@spectrum-css/tokens": "npm:14.0.0-next.2" + "@spectrum-css/bundle": "npm:1.0.0" + "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0" "@spectrum-css/ui-icons": "npm:1.1.2" "@storybook/addon-a11y": "npm:^8.4.7" @@ -5435,13 +5441,6 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:14.0.0-next.2": - version: 14.0.0-next.2 - resolution: "@spectrum-css/tokens@npm:14.0.0-next.2" - checksum: 10c0/769faa9c1efca3f926a1b9f4d3c951005a3cdaceb752a4523cb9dd6b3241f4541130c79a0071cb0597ab9ce01bd9f943764b049bced387b34eda85432f9a80bb - languageName: node - linkType: hard - "@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" @@ -5465,7 +5464,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -7983,10 +7982,31 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001692 - resolution: "caniuse-lite@npm:1.0.30001692" - checksum: 10c0/fca5105561ea12f3de593f3b0f062af82f7d07519e8dbcb97f34e7fd23349bcef1b1622a9a6cd2164d98e3d2f20059ef7e271edae46567aef88caf4c16c7708a +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": + version: 1.0.30001643 + resolution: "caniuse-lite@npm:1.0.30001643" + checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001629": + version: 1.0.30001636 + resolution: "caniuse-lite@npm:1.0.30001636" + checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001660 + resolution: "caniuse-lite@npm:1.0.30001660" + checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001673 + resolution: "caniuse-lite@npm:1.0.30001673" + checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b languageName: node linkType: hard From 16325b0446809794187c9934dfb4ac404cafb289 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 1 Nov 2024 14:39:14 -0400 Subject: [PATCH 046/103] chore: release (next) (#3353) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --- yarn.lock | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 59abdc1faee..bfe090766e2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4201,7 +4201,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/closebutton@npm:6.1.0, @spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": +"@spectrum-css/closebutton@npm:6.1.0": + version: 6.1.0 + resolution: "@spectrum-css/closebutton@npm:6.1.0" + peerDependencies: + "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + peerDependenciesMeta: + "@spectrum-css/icon": + optional: true + "@spectrum-css/tokens": + optional: true + checksum: 10c0/6764236c5b36c50f9d9a5f76174b19d1300a32cc28df70f43718b11b6ecfba61ece94adbc51cc7d8e5e99861ddc644402a9daabd16ed8e8205b68ef91aa7fae0 + languageName: node + linkType: hard + +"@spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: From 19f79ccd0e88599f1a2bb54bf84eaf3378a79030 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Fri, 8 Nov 2024 10:50:54 -0800 Subject: [PATCH 047/103] feat(avatar): migrate s2 avatar (#3355) * chore(s2-avatar): initial commit * chore(s2-avatar): add sizing and border tokens --- .changeset/friendly-dolls-raise.md | 5 ++ components/avatar/dist/metadata.json | 27 ++++++++++- components/avatar/index.css | 52 +++++++++++++++++++-- components/avatar/stories/avatar.stories.js | 2 +- 4 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 .changeset/friendly-dolls-raise.md diff --git a/.changeset/friendly-dolls-raise.md b/.changeset/friendly-dolls-raise.md new file mode 100644 index 00000000000..e8504c217f4 --- /dev/null +++ b/.changeset/friendly-dolls-raise.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/avatar": major +--- + +Adds support for new avatar-size tokens (avatar-size-800 to avatar-size-1500). Updates avatar component story to support new sizes. Adds support for avatar-border-color and avatar-border-thickness. diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 47df733191c..e9482e1bde8 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -3,6 +3,12 @@ "selectors": [ ".spectrum-Avatar", ".spectrum-Avatar--size100", + ".spectrum-Avatar--size1000", + ".spectrum-Avatar--size1100", + ".spectrum-Avatar--size1200", + ".spectrum-Avatar--size1300", + ".spectrum-Avatar--size1400", + ".spectrum-Avatar--size1500", ".spectrum-Avatar--size200", ".spectrum-Avatar--size300", ".spectrum-Avatar--size400", @@ -11,6 +17,8 @@ ".spectrum-Avatar--size600", ".spectrum-Avatar--size700", ".spectrum-Avatar--size75", + ".spectrum-Avatar--size800", + ".spectrum-Avatar--size900", ".spectrum-Avatar-image", ".spectrum-Avatar-link", ".spectrum-Avatar.is-disabled", @@ -29,7 +37,11 @@ ], "component": [ "--spectrum-avatar-block-size", + "--spectrum-avatar-border-color", + "--spectrum-avatar-border-color-default", "--spectrum-avatar-border-radius", + "--spectrum-avatar-border-thickness", + "--spectrum-avatar-border-width", "--spectrum-avatar-color-opacity", "--spectrum-avatar-color-opacity-disabled", "--spectrum-avatar-focus-indicator-color", @@ -38,6 +50,12 @@ "--spectrum-avatar-inline-size", "--spectrum-avatar-opacity-disabled", "--spectrum-avatar-size-100", + "--spectrum-avatar-size-1000", + "--spectrum-avatar-size-1100", + "--spectrum-avatar-size-1200", + "--spectrum-avatar-size-1300", + "--spectrum-avatar-size-1400", + "--spectrum-avatar-size-1500", "--spectrum-avatar-size-200", "--spectrum-avatar-size-300", "--spectrum-avatar-size-400", @@ -45,7 +63,9 @@ "--spectrum-avatar-size-500", "--spectrum-avatar-size-600", "--spectrum-avatar-size-700", - "--spectrum-avatar-size-75" + "--spectrum-avatar-size-75", + "--spectrum-avatar-size-800", + "--spectrum-avatar-size-900" ], "global": [ "--spectrum-focus-indicator-color", @@ -54,5 +74,8 @@ ], "system-theme": [], "passthroughs": [], - "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] + "high-contrast": [ + "--highcontrast-avatar-color-opacity-disabled", + "--highcontrast-avatar-focus-indicator-color" + ] } diff --git a/components/avatar/index.css b/components/avatar/index.css index 4f165dbf364..ceea0e03702 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -18,6 +18,8 @@ --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + --spectrum-avatar-border-thickness: var(--spectrum-avatar-border-width); + --spectrum-avatar-border-color-default: var(--spectrum-avatar-border-color); --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); @@ -71,6 +73,46 @@ --spectrum-avatar-block-size: var(--spectrum-avatar-size-700); } +.spectrum-Avatar--size800 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-800); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-800); +} + +.spectrum-Avatar--size900 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-900); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-900); +} + +.spectrum-Avatar--size1000 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1000); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1000); +} + +.spectrum-Avatar--size1100 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1100); +} + +.spectrum-Avatar--size1200 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1200); +} + +.spectrum-Avatar--size1300 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1300); +} + +.spectrum-Avatar--size1400 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1400); +} + +.spectrum-Avatar--size1500 { + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-1500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-1500); +} + @media (forced-colors: active) { .spectrum-Avatar { --highcontrast-avatar-focus-indicator-color: CanvasText; @@ -83,8 +125,10 @@ inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + border-style: solid; border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); - border-width: 0; + border-width: var(--spectrum-avatar-border-thickness); + border-color: var(--spectrum-avatar-border-color-default); outline: none; @@ -96,7 +140,7 @@ opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); &.is-disabled { - opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)); + opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); } } @@ -120,7 +164,9 @@ } .spectrum-Avatar-link { - outline: 0; + outline: none; + outline-color: transparent; + outline-style: solid; } .spectrum-Avatar-image { diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 3ef54b07b71..59796413ad5 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -13,7 +13,7 @@ export default { title: "Avatar", component: "Avatar", argTypes: { - size: size([50, 75, 100, 200, 300, 400, 500, 600, 700], false), + size: size([50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500], false), image: { name: "Image", type: { name: "string" }, From 5188292113a7351ac35ab3ef38b7f79ff48ed0b4 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Tue, 12 Nov 2024 10:58:22 -0600 Subject: [PATCH 048/103] feat(colorloupe): migrate to s2 drop-shadow tokens (#3301) --- .changeset/strange-glasses-allow.md | 5 +++ components/colorloupe/dist/metadata.json | 24 ++++++++++--- components/colorloupe/index.css | 46 +++++++++++++++++------- 3 files changed, 57 insertions(+), 18 deletions(-) create mode 100644 .changeset/strange-glasses-allow.md diff --git a/.changeset/strange-glasses-allow.md b/.changeset/strange-glasses-allow.md new file mode 100644 index 00000000000..e9bb9303c9c --- /dev/null +++ b/.changeset/strange-glasses-allow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/colorloupe": major +--- + +Migrates color loupe to Spectrum 2 tokens. Color loupe now uses the new drop shadow tokens `--spectrum-drop-shadow-elevated-x`, `--spectrum-drop-shadow-elevated-y`, `--spectrum-drop-shadow-elevated-blur`, and `--spectrum-drop-shadow-elevated-color` rather than specific color loupe tokens. diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1f..1bf0a4dceb8 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -26,21 +26,35 @@ ], "component": [ "--spectrum-color-loupe-bottom-to-color-handle", - "--spectrum-color-loupe-drop-shadow-blur", - "--spectrum-color-loupe-drop-shadow-color", - "--spectrum-color-loupe-drop-shadow-y", "--spectrum-color-loupe-height", "--spectrum-color-loupe-inner-border", "--spectrum-color-loupe-inner-border-width", "--spectrum-color-loupe-outer-border", "--spectrum-color-loupe-outer-border-width", "--spectrum-color-loupe-width", - "--spectrum-colorloupe-checkerboard-fill" + "--spectrum-colorloupe-animation-distance", + "--spectrum-colorloupe-checkerboard-dark-color", + "--spectrum-colorloupe-checkerboard-fill", + "--spectrum-colorloupe-checkerboard-light-color", + "--spectrum-colorloupe-drop-shadow-blur", + "--spectrum-colorloupe-drop-shadow-color", + "--spectrum-colorloupe-drop-shadow-x", + "--spectrum-colorloupe-drop-shadow-y", + "--spectrum-colorloupe-height", + "--spectrum-colorloupe-inner-border-color", + "--spectrum-colorloupe-inner-border-width", + "--spectrum-colorloupe-offset", + "--spectrum-colorloupe-outer-border-color", + "--spectrum-colorloupe-outer-border-width", + "--spectrum-colorloupe-width" ], "global": [ "--spectrum-color-handle-outer-border-width", "--spectrum-color-handle-size", - "--spectrum-drop-shadow-x", + "--spectrum-drop-shadow-elevated-blur", + "--spectrum-drop-shadow-elevated-color", + "--spectrum-drop-shadow-elevated-x", + "--spectrum-drop-shadow-elevated-y", "--spectrum-opacity-checkerboard-square-dark", "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" diff --git a/components/colorloupe/index.css b/components/colorloupe/index.css index f793d2fa6b0..adcd988e569 100644 --- a/components/colorloupe/index.css +++ b/components/colorloupe/index.css @@ -12,25 +12,44 @@ */ .spectrum-ColorLoupe { - inline-size: var(--spectrum-color-loupe-width); - block-size: var(--spectrum-color-loupe-height); + --spectrum-colorloupe-width: var(--spectrum-color-loupe-width); + --spectrum-colorloupe-height: var(--spectrum-color-loupe-height); + + --spectrum-colorloupe-offset: var(--spectrum-color-loupe-bottom-to-color-handle); + --spectrum-colorloupe-animation-distance: 8px; /* TODO: replace with forthcoming animation token */ + + --spectrum-colorloupe-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x); + --spectrum-colorloupe-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y); + --spectrum-colorloupe-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-colorloupe-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color); + + --spectrum-colorloupe-outer-border-width: var(--spectrum-color-loupe-outer-border-width); + --spectrum-colorloupe-inner-border-width: var(--spectrum-color-loupe-inner-border-width); + --spectrum-colorloupe-outer-border-color: var(--spectrum-color-loupe-outer-border); + --spectrum-colorloupe-inner-border-color: var(--spectrum-color-loupe-inner-border); + + --spectrum-colorloupe-checkerboard-dark-color: var(--spectrum-opacity-checkerboard-square-dark); + --spectrum-colorloupe-checkerboard-light-color: var(--spectrum-opacity-checkerboard-square-light); + + inline-size: var(--spectrum-colorloupe-width); + block-size: var(--spectrum-colorloupe-height); position: absolute; - transform: translate(0, var(--mod-colorloupe-animation-distance, 8px)); + transform: translate(0, var(--mod-colorloupe-animation-distance, var(--spectrum-colorloupe-animation-distance))); opacity: 0; transform-origin: bottom center; - inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle))); - inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2); + inset-block-end: calc((var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width)) + var(--mod-colorloupe-offset, var(--spectrum-colorloupe-offset))); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2)); transition: transform 100ms ease-in-out, opacity 125ms ease-in-out; pointer-events: none; - filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color))); + filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-colorloupe-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-colorloupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-colorloupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-colorloupe-drop-shadow-color))); &:dir(rtl) { - inset-inline-end: calc(50% - (var(--spectrum-color-loupe-width) / 2) - 1px); + inset-inline-end: calc(50% - (var(--spectrum-colorloupe-width) / 2) - 1px); } &.is-open { @@ -44,26 +63,27 @@ } .spectrum-ColorLoupe-inner-border { + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ fill: var(--spectrum-picked-color); - stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border)); - stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width)); + stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-colorloupe-inner-border-color)); + stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-colorloupe-inner-border-width)); } .spectrum-ColorLoupe-outer-border { fill: none; - stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))); - stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px); + stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))); + stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-colorloupe-outer-border-width)) + 2px); } /* The checkerboard classes use opacity checkerboard tokens for dark and light color. The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe docs are using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */ .spectrum-ColorLoupe-checkerboard-pattern { - fill: var(--spectrum-opacity-checkerboard-square-dark); + fill: var(--spectrum-colorloupe-checkerboard-dark-color); } .spectrum-ColorLoupe-checkerboard-background { - fill: var(--spectrum-opacity-checkerboard-square-light); + fill: var(--spectrum-colorloupe-checkerboard-light-color); } .spectrum-ColorLoupe-checkerboard-fill { From 9be793105e793d8748c10422393fb53bc148879e Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Tue, 12 Nov 2024 13:27:03 -0800 Subject: [PATCH 049/103] feat(thumbnail): S2 migration (#3367) * feat(thumbnail): migrate to S2 * feat(thumbnail): add customstyles to scope change to thumbnail --- .changeset/mean-eggs-learn.md | 5 + components/thumbnail/dist/metadata.json | 6 +- components/thumbnail/index.css | 112 ++++++++++++----------- components/thumbnail/stories/template.js | 3 + 4 files changed, 68 insertions(+), 58 deletions(-) create mode 100644 .changeset/mean-eggs-learn.md diff --git a/.changeset/mean-eggs-learn.md b/.changeset/mean-eggs-learn.md new file mode 100644 index 00000000000..9302a1872d2 --- /dev/null +++ b/.changeset/mean-eggs-learn.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/thumbnail": minor +--- + +Replaces corner-radius-75 with thumbnail-corner-radius. diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index a8cd3c64c44..53a223c2e05 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -9,6 +9,7 @@ ".spectrum-Thumbnail--size300", ".spectrum-Thumbnail--size400", ".spectrum-Thumbnail--size50", + ".spectrum-Thumbnail--size500", ".spectrum-Thumbnail--size600", ".spectrum-Thumbnail--size700", ".spectrum-Thumbnail--size75", @@ -48,10 +49,10 @@ "--spectrum-thumbnail-border-color-selected", "--spectrum-thumbnail-border-opacity", "--spectrum-thumbnail-border-radius", - "--spectrum-thumbnail-border-radius-default", "--spectrum-thumbnail-border-width", "--spectrum-thumbnail-border-width-selected", "--spectrum-thumbnail-color-opacity-disabled", + "--spectrum-thumbnail-corner-radius", "--spectrum-thumbnail-focus-indicator-color", "--spectrum-thumbnail-focus-indicator-gap", "--spectrum-thumbnail-focus-indicator-thickness", @@ -72,8 +73,7 @@ "--spectrum-thumbnail-size-700", "--spectrum-thumbnail-size-75", "--spectrum-thumbnail-size-800", - "--spectrum-thumbnail-size-900", - "--spectrum-thumbnail-sized-size" + "--spectrum-thumbnail-size-900" ], "global": [ "--spectrum-accent-color-800", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index eb1473aca22..3f21c003643 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -12,74 +12,77 @@ */ .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: 2px; + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); + --spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius); + --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); + + /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ + --spectrum-thumbnail-border-color: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); + --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); + --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); + --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); + --spectrum-thumbnail-layer-border-color-outer: var(--spectrum-gray-500); + + --spectrum-thumbnail-border-width-selected: var(--spectrum-border-width-200); + --spectrum-thumbnail-border-color-selected: var(--spectrum-accent-color-800); + + --spectrum-thumbnail-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-thumbnail-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); } .spectrum-Thumbnail--size50 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-50); } .spectrum-Thumbnail--size75 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-75); } .spectrum-Thumbnail--size100 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-100); } .spectrum-Thumbnail--size200 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-200); } .spectrum-Thumbnail--size300 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-300); } .spectrum-Thumbnail--size400 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-400); +} + +.spectrum-Thumbnail--size500 { + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-500); } .spectrum-Thumbnail--size600 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-600); } .spectrum-Thumbnail--size700 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-700); } .spectrum-Thumbnail--size800 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-800); } .spectrum-Thumbnail--size900 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-900); } .spectrum-Thumbnail--size1000 { - --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000); + --spectrum-thumbnail-size: var(--spectrum-thumbnail-size-1000); } .spectrum-Thumbnail { - --spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size)); - - /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)))); - --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800))); - --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100)); - --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200)); - --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); - - --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white))); - --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500))); - --spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400)); - --spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100)); - - --spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color))); - --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); position: relative; @@ -87,11 +90,13 @@ padding: 0; display: block; - inline-size: var(--spectrum-thumbnail-size); - block-size: var(--spectrum-thumbnail-size); + inline-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); + block-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-size)); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + /* Friends should align to the top of the tabs */ + vertical-align: top; overflow: hidden; z-index: 0; @@ -101,8 +106,8 @@ position: absolute; inline-size: 100%; block-size: 100%; - border-radius: var(--spectrum-thumbnail-border-radius-default); - box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + box-shadow: inset 0 0 0 var(--mod-thumbnail-border-width, var(--spectrum-thumbnail-border-width)) var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, var(--spectrum-thumbnail-border-color))); } &.is-disabled { @@ -115,27 +120,24 @@ &::after { content: ""; border-style: solid; - border-width: var(--spectrum-thumbnail-focus-indicator-thickness); - border-color: var(--spectrum-thumbnail-focus-indicator-color); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-width: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness)); + border-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-thumbnail-focus-indicator-color))); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); position: absolute; - inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); - inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); - inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); - inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); + inset: calc((var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-thumbnail-focus-indicator-gap)) + var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-thumbnail-focus-indicator-thickness))) * -1); } .spectrum-Thumbnail-image-wrapper { overflow: hidden; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } } } .spectrum-Thumbnail-layer { border-style: solid; - border-width: var(--spectrum-thumbnail-layer-border-width-outer); - border-color: var(--spectrum-thumbnail-layer-border-color-outer); + border-width: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer)); + border-color: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-thumbnail-layer-border-color-outer))); box-sizing: border-box; display: flex; @@ -148,9 +150,9 @@ &.is-selected { outline-style: solid; - outline-color: var(--spectrum-thumbnail-border-color-selected); - outline-width: var(--spectrum-thumbnail-border-width-selected); - outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner)); + outline-color: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-thumbnail-border-color-selected))); + outline-width: var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)); + outline-offset: calc(var(--mod-thumbnail-border-width-selected, var(--spectrum-thumbnail-border-width-selected)) - var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner))); } } @@ -159,11 +161,11 @@ align-items: center; justify-content: center; - inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2); - block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2); + inline-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); + block-size: calc(var(--spectrum-thumbnail-size) - ((var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)))) * 2); outline-style: solid; - outline-color: var(--spectrum-thumbnail-layer-border-color-inner); - outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer)); + outline-color: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-thumbnail-layer-border-color-inner))); + outline-width: calc(var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-thumbnail-layer-border-width-inner)) - var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-thumbnail-layer-border-width-outer))); } .spectrum-Thumbnail-image-wrapper { @@ -176,8 +178,8 @@ .spectrum-Thumbnail-image { position: relative; - max-inline-size: 100%; max-block-size: 100%; + max-inline-size: 100%; z-index: 1; } @@ -201,7 +203,7 @@ inline-size: 100%; background-size: cover; background-position: center center; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); } /* Windows High Contrast Mode */ diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index 2b40d8e1015..8857d1dab00 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -121,6 +121,9 @@ export const Template = ({ ${OpacityCheckerboard({ rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined, customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [], + customStyles: { + "--spectrum-opacity-checkerboard-size": "var(--spectrum-thumbnail-opacity-checkerboard-square-size)" + }, content: image ? [image] : [], }, context)} </div> From 418219fc31ed8e9778599bbb29eeefac682c0e9b Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Fri, 15 Nov 2024 12:02:28 -0800 Subject: [PATCH 050/103] feat(colorarea): S2 migration (#3388) * feat(colorarea): s2 migration * feat(colorarea): remove redundant property * feat(colorarea): clarify color + rgb implementation * feat(colorarea): fix gradient border-radius * feat(colorarea): move forced-colors media query * feat(colorarea): update changeset --- .changeset/spotty-onions-study.md | 7 +++ components/colorarea/dist/metadata.json | 16 +++++- components/colorarea/index.css | 73 ++++++++++++++----------- 3 files changed, 62 insertions(+), 34 deletions(-) create mode 100644 .changeset/spotty-onions-study.md diff --git a/.changeset/spotty-onions-study.md b/.changeset/spotty-onions-study.md new file mode 100644 index 00000000000..acad27e0006 --- /dev/null +++ b/.changeset/spotty-onions-study.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/colorarea": major +--- + +# colorarea S2 migration + +This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values. diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ff86d1c0045..ee81137849b 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -23,15 +23,27 @@ "--mod-colorarea-width" ], "component": [ + "--spectrum-color-area-border-opacity", "--spectrum-color-area-border-rounding", "--spectrum-color-area-border-width", "--spectrum-color-area-height", "--spectrum-color-area-minimum-height", "--spectrum-color-area-minimum-width", "--spectrum-color-area-width", - "--spectrum-colorarea-border-color" + "--spectrum-colorarea-border-color", + "--spectrum-colorarea-border-color-rgb", + "--spectrum-colorarea-border-radius", + "--spectrum-colorarea-border-width", + "--spectrum-colorarea-disabled-background-color", + "--spectrum-colorarea-height", + "--spectrum-colorarea-min-height", + "--spectrum-colorarea-min-width", + "--spectrum-colorarea-width" + ], + "global": [ + "--spectrum-disabled-background-color", + "--spectrum-gray-1000-rgb" ], - "global": ["--spectrum-disabled-background-color"], "system-theme": [], "passthroughs": [], "high-contrast": [ diff --git a/components/colorarea/index.css b/components/colorarea/index.css index 6887fac3398..62b41854548 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -11,41 +11,30 @@ * governing permissions and limitations under the License. */ -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorArea { - --highcontrast-colorarea-border-color-disabled: GrayText; - --highcontrast-colorarea-border-color: Canvas; - --highcontrast-colorarea-fill-color-disabled: Canvas; - } - - .spectrum-ColorArea { - &.is-disabled { - forced-color-adjust: none; - } - } - - .spectrum-ColorArea-gradient, - .spectrum-ColorHandle-color { - forced-color-adjust: none; - } -} - .spectrum-ColorArea { - /* TODO replace with token --spectrum-color-area-border-color and --spectrum-color-area-border-opacity using RGBA function */ - --spectrum-colorarea-border-color: rgb(0 0 0 / 10%); + --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); + + /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ + --spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb); + --spectrum-colorarea-border-color: rgba(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity)); + --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); + --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); + --spectrum-colorarea-height: var(--spectrum-color-area-height); + --spectrum-colorarea-width: var(--spectrum-color-area-width); + --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); + --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); position: relative; display: inline-block; cursor: default; user-select: none; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-color-area-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-color-area-height)); + min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); + min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); + inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); + block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); - border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); &.is-focused { z-index: 2; @@ -53,8 +42,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); + border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); .spectrum-ColorArea-gradient { display: none; @@ -63,7 +52,7 @@ } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-color-area-width)) - var(--spectrum-color-area-border-width)), 0); + transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); inset-block-start: 0; &:dir(rtl) { @@ -74,7 +63,9 @@ .spectrum-ColorArea-gradient { inline-size: 100%; block-size: 100%; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); + + /* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */ + border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width))); } .spectrum-ColorArea-slider { @@ -88,3 +79,21 @@ margin: 0; pointer-events: none; } + +/* Windows High Contrast Mode */ +@media (forced-colors: active) { + .spectrum-ColorArea { + --highcontrast-colorarea-border-color-disabled: GrayText; + --highcontrast-colorarea-border-color: Canvas; + --highcontrast-colorarea-fill-color-disabled: Canvas; + + &.is-disabled { + forced-color-adjust: none; + } + } + + .spectrum-ColorArea-gradient, + .spectrum-ColorHandle-color { + forced-color-adjust: none; + } +} From 570ceec2f0458854b37bc6ab363a2b8c25503584 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Tue, 19 Nov 2024 11:56:20 -0800 Subject: [PATCH 051/103] feat(thumbnail-opacity-checkboard): S2 migration (#3394) * feat(thumbnail-opacity-checkboard): s2 migration * feat(thumbnail-opacity-checkboard): fix token rule * feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule * feat(thumbnail-opacity-checkboard): drop unnecessary styles * feat(thumbnail-opacity-checkboard): update token * feat(thumbnail-opacity-checkboard): update changeset --- .changeset/twenty-tables-know.md | 10 ++++++++++ components/opacitycheckerboard/index.css | 6 +----- components/thumbnail/dist/metadata.json | 3 ++- components/thumbnail/index.css | 3 +++ components/thumbnail/stories/template.js | 3 --- 5 files changed, 16 insertions(+), 9 deletions(-) create mode 100644 .changeset/twenty-tables-know.md diff --git a/.changeset/twenty-tables-know.md b/.changeset/twenty-tables-know.md new file mode 100644 index 00000000000..584bf66b2da --- /dev/null +++ b/.changeset/twenty-tables-know.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/opacitycheckerboard": major +"@spectrum-css/thumbnail": minor +--- + +# thumbnail-opacity-checkerboard S2 migration + +Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. + +This also corrects an issue with a token name in the `thumbnail` component by renaming `--spectrum-thumbnail-border-color-opacity` to `--spectrum-thumbnail-border-opacity`. diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index c90d81eacdb..8f1700294f0 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -24,11 +24,7 @@ } .spectrum-OpacityCheckerboard { - background: - repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) - var(--spectrum-opacity-checkerboard-position) / - calc(var(--spectrum-opacity-checkerboard-size) * 2) - calc(var(--spectrum-opacity-checkerboard-size) * 2); + background: repeating-conic-gradient(var(--spectrum-opacity-checkerboard-light) 0% 25%, var(--spectrum-opacity-checkerboard-dark) 0% 50%) var(--spectrum-opacity-checkerboard-position) / calc(var(--spectrum-opacity-checkerboard-size) * 2) calc(var(--spectrum-opacity-checkerboard-size) * 2); } @media (forced-colors: active) { diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 53a223c2e05..6ddf2c93958 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -60,6 +60,7 @@ "--spectrum-thumbnail-layer-border-color-outer", "--spectrum-thumbnail-layer-border-width-inner", "--spectrum-thumbnail-layer-border-width-outer", + "--spectrum-thumbnail-opacity-checkerboard-square-size", "--spectrum-thumbnail-opacity-disabled", "--spectrum-thumbnail-size", "--spectrum-thumbnail-size-100", @@ -88,7 +89,7 @@ "--spectrum-white" ], "system-theme": [], - "passthroughs": [], + "passthroughs": ["--mod-opacity-checkerboard-size"], "high-contrast": [ "--highcontrast-thumbnail-border-color", "--highcontrast-thumbnail-border-color-selected", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 3f21c003643..3f2ab89f941 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -32,6 +32,9 @@ --spectrum-thumbnail-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled); + + /* @passthrough -- custom sizing for opacity checkerboard */ + --mod-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size); } .spectrum-Thumbnail--size50 { diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index 8857d1dab00..2b40d8e1015 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -121,9 +121,6 @@ export const Template = ({ ${OpacityCheckerboard({ rootClass: backgroundColor ? `${rootClass}-image-wrapper` : undefined, customClasses: isLayer ? [`${rootClass}-layer-inner`] : !backgroundColor ? [`${rootClass}-image-wrapper`] : [], - customStyles: { - "--spectrum-opacity-checkerboard-size": "var(--spectrum-thumbnail-opacity-checkerboard-square-size)" - }, content: image ? [image] : [], }, context)} </div> From 0bce7a51eafa0e81061df999399eb9130b51bfe6 Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Tue, 3 Dec 2024 23:38:03 -0500 Subject: [PATCH 052/103] build: align tooling with s2-foundations branch --- .storybook/assets/base.css | 7 +- .storybook/decorators/context.js | 15 +- .../action-button-corner-rounding.stories.js | 17 +- .../checkbox-corner-rounding.stories.js | 17 +- .../corner-rounding.stories.js | 142 +++++----- .../foundations/corner-rounding/template.js | 9 +- .../down-state/button-down-state.stories.js | 2 +- .../down-state/checkbox-down-state.stories.js | 2 +- .../drop-shadow/drop-shadow.stories.js | 97 ++++--- .storybook/manager.js | 4 +- .storybook/package.json | 1 - .storybook/types/global.js | 2 - package.json | 2 - .../postcss-add-theming-layer/CHANGELOG.md | 15 -- plugins/postcss-add-theming-layer/README.md | 115 --------- .../expected/basic.css | 41 --- .../fixtures/basic.css | 49 ---- plugins/postcss-add-theming-layer/index.js | 201 --------------- .../postcss-add-theming-layer/package.json | 44 ---- .../postcss-add-theming-layer/project.json | 16 -- plugins/postcss-add-theming-layer/test.js | 43 --- .../postcss-add-theming-layer/utilities.js | 244 ------------------ plugins/postcss-property-rollup/CHANGELOG.md | 53 ---- plugins/postcss-property-rollup/README.md | 74 ------ .../expected/basic.css | 4 - .../fixtures/basic.css | 9 - plugins/postcss-property-rollup/index.js | 98 ------- plugins/postcss-property-rollup/package.json | 40 --- plugins/postcss-property-rollup/project.json | 16 -- plugins/postcss-property-rollup/test.js | 50 ---- postcss.config.js | 18 -- tasks/component-reporter.js | 6 +- tasks/templates/diff-preview.njk | 8 +- yarn.lock | 242 +++++++---------- 34 files changed, 254 insertions(+), 1449 deletions(-) delete mode 100644 plugins/postcss-add-theming-layer/CHANGELOG.md delete mode 100644 plugins/postcss-add-theming-layer/README.md delete mode 100644 plugins/postcss-add-theming-layer/expected/basic.css delete mode 100644 plugins/postcss-add-theming-layer/fixtures/basic.css delete mode 100644 plugins/postcss-add-theming-layer/index.js delete mode 100644 plugins/postcss-add-theming-layer/package.json delete mode 100644 plugins/postcss-add-theming-layer/project.json delete mode 100644 plugins/postcss-add-theming-layer/test.js delete mode 100644 plugins/postcss-add-theming-layer/utilities.js delete mode 100644 plugins/postcss-property-rollup/CHANGELOG.md delete mode 100644 plugins/postcss-property-rollup/README.md delete mode 100644 plugins/postcss-property-rollup/expected/basic.css delete mode 100644 plugins/postcss-property-rollup/fixtures/basic.css delete mode 100644 plugins/postcss-property-rollup/index.js delete mode 100644 plugins/postcss-property-rollup/package.json delete mode 100644 plugins/postcss-property-rollup/project.json delete mode 100644 plugins/postcss-property-rollup/test.js diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index b6c2c73d6a5..e5886de13ec 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -34,17 +34,12 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); } -.spectrum.spectrum--legacy { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-layer-1-color); -} - .spectrum .spectrum-examples-static-black { background: var(--spectrum-examples-gradient-static-black); } .spectrum .spectrum-examples-static-white { - background: var(--spectrum-examples-gradient-static-white) + background: var(--spectrum-examples-gradient-static-white); } /* Hide the SVG elements that only include references */ diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index fded75323bc..6ff50d3f1ae 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,8 +1,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline"; -import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; +import tokens from "@spectrum-css/tokens/dist/index.css?inline"; /** * @type import('@storybook/csf').DecoratorFunction<import('@storybook/web-components').WebComponentsFramework> @@ -50,8 +49,6 @@ export const withContextWrapper = makeDecorator({ const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; const isRaw = Boolean(context === "raw"); - const isModern = Boolean(context === "spectrum"); - const isExpress = Boolean(context === "express"); if (!isRaw) { // add the default classes to the body to ensure labels, headings, and borders are styled correctly @@ -59,7 +56,7 @@ export const withContextWrapper = makeDecorator({ } // Start by attaching the appropriate tokens to the container - toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw, context); + toggleStyles(document.body, "tokens", tokens, !isRaw); for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid @@ -86,12 +83,6 @@ export const withContextWrapper = makeDecorator({ // Every container gets the spectrum class container.classList.toggle("spectrum", !isRaw); - // S1 and S1 Express get the legacy class - container.classList.toggle("spectrum--legacy", !isModern && !isRaw); - - // Express only gets the express class - container.classList.toggle("spectrum--express", isExpress && !isRaw); - // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { color = staticColorSettings[staticKey].color; @@ -121,7 +112,7 @@ export const withContextWrapper = makeDecorator({ } } - }, [context, color, scale, viewMode, original, staticColor, rootClass, tokens, legacyTokens, staticColorSettings, showTestingGrid]); + }, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); return StoryFn(data); }, diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js index f2724f7df7e..3903c4b6d41 100644 --- a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -1,5 +1,5 @@ +import { Template } from "@spectrum-css/actionbutton/stories/template.js"; import { html } from "lit"; -import { Template } from "../../../components/actionbutton/stories/template"; export default { title: "Corner rounding", @@ -17,16 +17,11 @@ export default { tags: ['foundation'], }; -const ActionButton = (args, context) => { - return html` - <div style="padding: 1rem 0;"> - ${Template({ - ...args, - iconName: undefined, - }, context)} - </div> - `; -}; +const ActionButton = (args, context) => html` + <div style="padding: 1rem 0;"> + ${Template({ ...args, iconName: undefined }, context)} + </div> +`; const ActionButtonTable = (args, context) => { return html` diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js index d623f8dafff..8f86e535d71 100644 --- a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -1,6 +1,6 @@ // Import the component markup template +import { Template } from "@spectrum-css/checkbox/stories/template.js"; import { html } from "lit"; -import { Template } from "../../../components/checkbox/stories/template"; export default { title: "Corner rounding", @@ -22,16 +22,11 @@ const Checkbox = ({ customStyles = {}, isChecked = false, ...args -}, context) => { - return html` - <div style="padding: 1rem 0;"> - ${Template({ - ...args, - iconName: undefined, - }, context)} - </div> - `; -}; +} = {}, context = {}) => html` + <div style="padding: 1rem 0;"> + ${Template({ ...args, iconName: undefined }, context)} + </div> +`; const CheckboxTable = (args, context) => { return html` diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js index 4882791e015..f413dbccff1 100644 --- a/.storybook/foundations/corner-rounding/corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -13,78 +13,76 @@ export default { tags: ["foundation"], }; -const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => { - 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", - }, - context, - )} - ${Template( - { - ...args, - label: "--spectrum-corner-radius-small-default", - size: "s", - value: "4px", - }, - context, - )} - ${Template( - { - ...args, - label: "--spectrum-corner-radius-medium-default", - size: "m", - value: "8px", - }, - context, - )} - ${Template( - { - ...args, - label: "--spectrum-corner-radius-large-default", - size: "l", - value: "10px", - }, - context, - )} - ${Template( - { - ...args, - label: "--spectrum-corner-radius-extra-large-default", - size: "xl", - value: "16px", - }, - context, - )} - ${Template( - { - ...args, - label: "--spectrum-corner-radius-full", - size: "full", - value: "9999px", - }, - context, - )} - </tbody> - </table> - </div> - `; -}; +const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => 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", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-small-default", + size: "s", + value: "4px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-medium-default", + size: "m", + value: "8px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-large-default", + size: "l", + value: "10px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-extra-large-default", + size: "xl", + value: "16px", + }, + context, + )} + ${Template( + { + ...args, + label: "--spectrum-corner-radius-full", + size: "full", + value: "9999px", + }, + context, + )} + </tbody> + </table> + </div> +`; export const CornerRounding = CornerRadiusGroup.bind({}); CornerRounding.args = {}; diff --git a/.storybook/foundations/corner-rounding/template.js b/.storybook/foundations/corner-rounding/template.js index 8b86645ade8..bd000575982 100644 --- a/.storybook/foundations/corner-rounding/template.js +++ b/.storybook/foundations/corner-rounding/template.js @@ -4,11 +4,8 @@ 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()}`; - } + if (size === "none" || size === "full") return size; + return `size${size.toUpperCase()}`; }; export const Template = ({ @@ -16,7 +13,7 @@ export const Template = ({ size = "none", label, value, -} = {}) => html` +}) => html` <tr> <td>${label}</td> <td style="padding: 0 2rem;">${value}</td> diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js index 6bf385af68f..2f4f0d6e39e 100644 --- a/.storybook/foundations/down-state/button-down-state.stories.js +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -1,4 +1,4 @@ -import { Template } from "../../../components/button/stories/template.js"; +import { Template } from "@spectrum-css/button/stories/template.js"; export default { title: "Down state", diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js index 405e585cfff..039b99faf20 100644 --- a/.storybook/foundations/down-state/checkbox-down-state.stories.js +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -1,4 +1,4 @@ -import { Template } from "../../../components/checkbox/stories/template"; +import { Template } from "@spectrum-css/checkbox/stories/template.js"; export default { title: "Down state", diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js index b61c7661f4c..2c85a1d7169 100644 --- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -3,72 +3,87 @@ import { classMap } from "lit/directives/class-map.js"; import "./index.css"; export default { - title: "Foundations/Drop shadow", - description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.", - component: "Drop shadow", - tags: ['foundation'], -} - -const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant, ...args}) => { - const { isDropShadow } = args; - return html` - <div class=${classMap({ - [rootClass]: true, - [`${rootClass}--${variant}-drop-shadow`]: typeof variant !== undefined && !!isDropShadow, - [`${rootClass}--${variant}-box-shadow`]: typeof variant !== undefined && !isDropShadow, - })}></div> -`;} + title: "Drop shadow", + description: + "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.", + component: "Drop shadow", + tags: ["foundation"], +}; -const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => html` - <div class=${classMap({ - [rootClass]: true, - "spectrum--light": color === "light", - "spectrum--dark": color === "dark", - })}> - ${DropShadowSwatch(args)} - </div> - `; +const DropShadowSwatch = ({ + rootClass = "spectrum-Foundations-Example-DropShadow-swatch", + variant, + isDropShadow, +}) => html` + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${variant}-drop-shadow`]: + typeof variant !== undefined && !!isDropShadow, + [`${rootClass}--${variant}-box-shadow`]: + typeof variant !== undefined && !isDropShadow, + })} + ></div> +`; -const DropShadowVariant = ({...args}) => html` - <div class="spectrum-Foundations-Example-variant-container"> - ${DropShadowBackground({...args, color: "light"})} - ${DropShadowBackground({...args, color: "dark"})} - </div> +const DropShadowBackground = ( + { + rootClass = "spectrum-Foundations-Example-swatch-container", + color, + ...args + }, + context, +) => html` + <div + class=${classMap({ + [rootClass]: true, + "spectrum--light": color === "light", + "spectrum--dark": color === "dark", + })} + > + ${DropShadowSwatch(args, context)} + </div> `; +const DropShadowVariant = (args, context) => html` + <div class="spectrum-Foundations-Example-variant-container"> + ${DropShadowBackground({ ...args, color: "light" }, context)} + ${DropShadowBackground({ ...args, color: "dark" }, context)} + </div> +`; export const DropShadowEmphasizedDefault = DropShadowVariant.bind({}); DropShadowEmphasizedDefault.args = { - variant: "emphasized-default", - isDropShadow: true, + variant: "emphasized-default", + isDropShadow: true, }; export const DropShadowEmphasizedHover = DropShadowVariant.bind({}); DropShadowEmphasizedHover.args = { - variant: "emphasized-hover", - isDropShadow: true, + variant: "emphasized-hover", + isDropShadow: true, }; export const DropShadowElevated = DropShadowVariant.bind({}); DropShadowElevated.args = { - variant: "elevated", - isDropShadow: true, + variant: "elevated", + isDropShadow: true, }; export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({}); BoxShadowEmphasizedDefault.args = { - variant: "emphasized-default", - isDropShadow: false, + variant: "emphasized-default", + isDropShadow: false, }; export const BoxShadowEmphasizedHover = DropShadowVariant.bind({}); BoxShadowEmphasizedHover.args = { - variant: "emphasized-hover", - isDropShadow: false, + variant: "emphasized-hover", + isDropShadow: false, }; export const BoxShadowElevated = DropShadowVariant.bind({}); BoxShadowElevated.args = { - variant: "elevated", - isDropShadow: false, + variant: "elevated", + isDropShadow: false, }; diff --git a/.storybook/manager.js b/.storybook/manager.js index 1441c73b39f..2c2085aa240 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -65,7 +65,7 @@ addons.setConfig({ sidebar: { showRoots: false, filters: { - patterns: (item) => !item.id.includes('forced-colors') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)), - } + patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)), + }, }, }); diff --git a/.storybook/package.json b/.storybook/package.json index bb968f27c62..be84ad45f97 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -42,7 +42,6 @@ "@adobe/spectrum-css-workflow-icons": "^1.5.4", "@spectrum-css/bundle": "1.0.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0", "@spectrum-css/ui-icons": "1.1.2" }, "devDependencies": { diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 7206e24ed98..0c8cf3ffc82 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -13,8 +13,6 @@ export default { toolbar: { items: [ { value: "spectrum", title: "Spectrum 2", right: "default" }, - { value: "legacy", title: "Spectrum 1", right: "legacy" }, - { value: "express", title: "Express", right: "legacy" }, { value: "raw", title: "Token-free", right: "raw" }, ], dynamicTitle: true, diff --git a/package.json b/package.json index 430cee39c7a..af909191110 100644 --- a/package.json +++ b/package.json @@ -72,8 +72,6 @@ "@commitlint/cli": "^19.6.1", "@commitlint/config-conventional": "^19.6.0", "@nx/devkit": "^19.8.2", - "@spectrum-tools/postcss-add-theming-layer": "^1.0.0", - "@spectrum-tools/postcss-property-rollup": "^0.0.0", "@spectrum-tools/postcss-rgb-mapping": "^1.0.0", "@yarnpkg/types": "^4.0.0", "at-rule-packer": "^0.4.2", diff --git a/plugins/postcss-add-theming-layer/CHANGELOG.md b/plugins/postcss-add-theming-layer/CHANGELOG.md deleted file mode 100644 index d92a8b971c0..00000000000 --- a/plugins/postcss-add-theming-layer/CHANGELOG.md +++ /dev/null @@ -1,15 +0,0 @@ -# Change Log - -## 1.0.1 - -### Patch Changes - -- [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)! - Dependency alignment across the project. - - Set component peerDependencies as optional to reduce console warnings on downstream projects. - -## 1.0.0 - -### Major Changes - -- [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)! - The PostCSS plugin previously published as `postcss-splitinator`. This new package creates a polyfill for style queries by creating a layer of `--system` prefixed custom properties to be loaded by attaching a unique selector. This allows the toggling of component-level property definitions by theme or context. There are many options available to customize the output that are documented in the package [README](plugins/postcss-add-theming-layer/README.md). diff --git a/plugins/postcss-add-theming-layer/README.md b/plugins/postcss-add-theming-layer/README.md deleted file mode 100644 index 610310f5662..00000000000 --- a/plugins/postcss-add-theming-layer/README.md +++ /dev/null @@ -1,115 +0,0 @@ -# postcss-add-theming-layer - -> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems. - -## Installation - -Add the dependency to your project: - -```sh -npm install postcss-add-theming-layer -``` - -or - -```sh -yarn add -DW postcss-add-theming-layer -``` - -Use the plugin in your PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-add-theming-layer": {}, - }, -}; -``` - -or as part of your CLI command: - -```sh -postcss -u postcss-add-theming-layer -o dist/index.css src/index.css -``` - -## Options - -### `selectorPrefix` [string] - -This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts. - -### `skipMapping` [boolean=false] - -Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - -### `preserveVariables` [boolean=true] - -When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - -### `referencesOnly` [boolean=false] - -This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - -### `stripLocalSelectors` [boolean=false] - -This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - -### `processIdentifier` [(identifierValue: string, identifierName: string) => string]` - -Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is. - -## Usage - -This plugin turns this: - -```css -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - .component.is-selected { - --background-color: darkpurple; - } - .component .icon { - --color: white; - } -} -``` - -Into this: - -```css -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: darkpurple; -} - -.component { - --background-color: var(--system-component-background-color); -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color); -} -``` - -## Usage notes - -This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer. diff --git a/plugins/postcss-add-theming-layer/expected/basic.css b/plugins/postcss-add-theming-layer/expected/basic.css deleted file mode 100644 index 711a906a74d..00000000000 --- a/plugins/postcss-add-theming-layer/expected/basic.css +++ /dev/null @@ -1,41 +0,0 @@ -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; - --system-component-icon-color: gray; - --system-where-component-background-color: blue; - --system-component-where-selected-background-color: darkblue; - --system-component-has-icon-color: gray -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: indigo; - --system-component-icon-color: white; - --system-where-component-background-color: indigo; - --system-component-where-selected-background-color: darkpurple; - --system-component-has-icon-color: white -} - -.component { - --background-color: var(--system-component-background-color) -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color) -} - -.component .icon { - --color: var(--system-component-icon-color) -} - -:where(.component) { - --background-color: var(--system-where-component-background-color) -} - -.component:where(:selected,.is-selected) { - --background-color: var(--system-component-where-selected-background-color) -} - -.component:has(.icon) { - --color: var(--system-component-has-icon-color) -} diff --git a/plugins/postcss-add-theming-layer/fixtures/basic.css b/plugins/postcss-add-theming-layer/fixtures/basic.css deleted file mode 100644 index 50692d97093..00000000000 --- a/plugins/postcss-add-theming-layer/fixtures/basic.css +++ /dev/null @@ -1,49 +0,0 @@ -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } - - :where(.component) { - --background-color: blue; - } - - .component:where(:selected, .is-selected) { - --background-color: darkblue; - } - - .component:has(.icon) { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - - .component.is-selected { - --background-color: indigo; - } - - .component .icon { - --color: white; - } - - :where(.component) { - --background-color: indigo; - } - - .component:where(:selected, .is-selected) { - --background-color: darkpurple; - } - - .component:has(.icon) { - --color: white; - } -} diff --git a/plugins/postcss-add-theming-layer/index.js b/plugins/postcss-add-theming-layer/index.js deleted file mode 100644 index fa9904a5801..00000000000 --- a/plugins/postcss-add-theming-layer/index.js +++ /dev/null @@ -1,201 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const selectorParser = require("postcss-selector-parser"); -const { - cleanPropertyName, - extractFallbackValue, - getVariableName, - checkForReplacement -} = require("./utilities"); - -/** - * @typedef Options - * @property {string} [selectorPrefix] - The prefix to use for the new selectors - * @property {boolean} [skipMapping=false] - Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - * @property {boolean} [preserveVariables=false] - When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - * @property {boolean} [referencesOnly=false] - This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - * @property {boolean} [stripLocalSelectors=false] - This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier] - A function that processes the identifier value and creates a new selector -*/ - -/** @type import('postcss').PluginCreator<Options> */ -module.exports = ({ - selectorPrefix, - skipMapping = false, - preserveVariables = true, - referencesOnly = false, - stripLocalSelectors = false, - processIdentifier, -}) => ({ - postcssPlugin: "postcss-add-theming-layer", - OnceExit(root, { Rule, Declaration }) { - // Fallback function to process the identifier value and create a new selector - if (typeof processIdentifier !== "function") { - // If the base prefix exists and differs from the identifier value, append the identifier value to the base prefix as the new class name - processIdentifier = (identifierValue) => selectorPrefix && selectorPrefix !== identifierValue ? `.${selectorPrefix}--${identifierValue}` : `.${identifierValue}`; - } - - // This object will store the mappings for each selector - const systemMap = new Map(); - const conversionMap = new Map(); - - // Step 1: loop over all the container style queries and create a new selector for each - // to be used as a theming toggle for components where style queries are not natively supported - // @todo should there be a support check around this? - root.walkAtRules(/container/, (container) => { - if (skipMapping) { - if (preserveVariables) { - // Iterate over each rule in the container and append them to the root - container.walkRules((rule) => { - root.insertAfter(root.first, rule); - }); - } - - container.remove(); - return; - } - - // Extract the custom property name and it's value to use in creating the new selector - // Identifier name is the prefix used for the custom properties created for the bridge - // Identifier value is used to create the new selector - const [, identifierName, identifierValue] = container.params.match( - /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/ - ); - - const selectorMap = systemMap.get(identifierName) ?? {}; - - // Create a new rule using this selector to attach the new system-level custom properties - let rule; - - // If we're only interested in references, we can skip the next step of appending the new rule - if (!referencesOnly) { - rule = new Rule({ - selector: processIdentifier(identifierValue, identifierName), - source: container.source, - }); - - container.parent.insertAfter(container, rule); - } - - // Iterate over each custom property in the container to create a new mapping that supports the new selector - container.walkDecls(/^--[A-Z|a-z]/, (decl) => { - selectorParser((selectors) => { - selectors.each((s) => { - // Check if the property is already mapped - const variableName = getVariableName(s, decl.prop, { - identifierName, - identifierValue, - selectorPrefix - }); - - const newDecl = decl.clone({ - prop: variableName, - }); - newDecl.raws.before = "\n "; - - const uniqueSet = conversionMap.get(decl.prop) ?? new Set(); - conversionMap.set(decl.prop, uniqueSet.add(variableName)); - - if (!referencesOnly) { - rule.append(newDecl); - } - - const selector = s.toString(); - selectorMap[selector] = selectorMap[selector] ?? {}; - - const selectorNode = selectorMap[selector]; - - // Check for fallbacks in the var() function - const fallbackValue = extractFallbackValue(decl.value); - if (fallbackValue) { - // The final declaration should have the override present - selectorNode[decl.prop] = `var(${fallbackValue}, var(${variableName}))`; - - // The system-level declaration should only have the fallback - newDecl.value = `var(${fallbackValue})`; - } - else { - selectorNode[decl.prop] = `var(${variableName})`; - } - - selectorMap[selector] = selectorNode; - }); - }).processSync(decl.parent.selector, { lossless: false }); - }); - - systemMap.set(identifierName, selectorMap); - - if (rule) { - rule.walkDecls((decl) => { - const convertedProps = [...conversionMap.keys()]; - - if (!convertedProps.some((key) => decl.value.includes(key))) return; - - // loop over all the updated properties and update internal references to the new variables - for (let [prop, mappedValues] of conversionMap.entries()) { - // Check if this key exists in the value - if (!decl.value.match(new RegExp(`${prop}[^-]`))) continue; - - const systemValues = [...mappedValues]; - - // If there is only one system variable, replace all instances of the prop with the system variable - if (systemValues.length === 1) { - decl.value = decl.value.replace(new RegExp(prop, "g"), systemValues[0]); - continue; - } - - const replacement = checkForReplacement(decl, prop, [ - `--${identifierName}-${cleanPropertyName(prop, { selectorPrefix })}`, - ], systemValues); - - if (replacement) { - decl.value = replacement; - continue; - } - - // @note: this will be an empty variable because we didn't find a match but it will match the format of the other variables - decl.value = decl.value.replace(new RegExp(decl.prop, "g"), `--${identifierName}-${cleanPropertyName(decl.prop, { selectorPrefix })}`); - } - }); - } - - container.remove(); - }); - - // Our job here is done - if (skipMapping || stripLocalSelectors) return; - - const rules = []; - for (let [, selectorMap] of systemMap.entries()) { - // This adds the new selectors to the root with their respective system-level mappings - for (let [selector, props] of Object.entries(selectorMap)) { - const rule = new Rule({ selector }); - - for (let [prop, value] of Object.entries(props)) { - const decl = new Declaration({ prop, value }); - decl.raws.before = "\n "; - - rule.append(decl); - } - - rules.push(rule); - } - } - - // Insert the new rules in order after the first rule in the root - root.append(rules); - }, -}); - -module.exports.postcss = true; diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json deleted file mode 100644 index 79f9c7a647a..00000000000 --- a/plugins/postcss-add-theming-layer/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-add-theming-layer", - "version": "1.0.1", - "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts <castastrophe@users.noreply.github.com>" - ], - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-selector-parser": "^6.1.1", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ], - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-add-theming-layer" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "homepage": "https://opensource.adobe.com/spectrum-css/" -} diff --git a/plugins/postcss-add-theming-layer/project.json b/plugins/postcss-add-theming-layer/project.json deleted file mode 100644 index 7797edce0f8..00000000000 --- a/plugins/postcss-add-theming-layer/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-add-theming-layer", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-add-theming-layer/test.js b/plugins/postcss-add-theming-layer/test.js deleted file mode 100644 index ed431c85f20..00000000000 --- a/plugins/postcss-add-theming-layer/test.js +++ /dev/null @@ -1,43 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare( - t, - fixtureFilePath, - expectedFilePath, - options = {} -) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); diff --git a/plugins/postcss-add-theming-layer/utilities.js b/plugins/postcss-add-theming-layer/utilities.js deleted file mode 100644 index 0988f27ce38..00000000000 --- a/plugins/postcss-add-theming-layer/utilities.js +++ /dev/null @@ -1,244 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const valuesParser = require("postcss-values-parser"); - -/** - * Clean the property name to be used as a variable name - * @param {string} prop - * @param {{ selectorPrefix: string }} options - * @returns {string} The clean variable name - */ -function cleanPropertyName(prop, { selectorPrefix = "" } = {}) { - if (!prop) return; - return ( - prop - // Remove the provided prefix if used - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove mod from the new property name - .replace(/-?mod-/g, "-") - // Remove state-based prefix - .replace(/is-/g, "") - // Remove the internal identifier marker - .replace(/^_/g, "") - // If a string has a lowercase letter followed by an uppercase letter, insert a dash between them - .replace(/([a-z])([A-Z])/g, "$1-$2") - // If a string has two uppercase letters followed by a lowercase letter, insert a dash between them - .replace(/([A-Z])([A-Z])([a-z])/g, "$1-$2$3") - .replace(/([a-z])([0-9])/g, "$1-$2") - // Remove all whitespace - .replace(/\s+/g, "") - // Remove non-alphanumeric characters - .replace(/\W/g, "-") - // Replace multiple dashes with a single dash - .replace(/-+/g, "-") - // Remove any leading or trailing dashes - .replace(/^-/g, "") - .replace(/-$/g, "") - .toLowerCase() - ); -} - -/** - * Extract the fallback value from a var() function - * @param {string} declValue - * @returns {string} The fallback value - */ -function extractFallbackValue(declValue) { - const parsed = valuesParser.parse(declValue); - let fallbackValue; - - parsed.walk((node) => { - if (node.type !== "func" || node.value !== "var") { - return; - } - - // Assuming the second argument of the var() function is the fallback - const fallbackNode = node.nodes[2]; - if (fallbackNode) { - // Convert the fallback node back to a string - fallbackValue = valuesParser.stringify(fallbackNode); - } - }); - - return fallbackValue; -} - -/** - * Get the base selector for a given selector - * @param {string} selector - * @param {{ selectorPrefix: string }} options - * @returns {string} The base selector - */ -function getBaseSelector(selector, { selectorPrefix = "" } = {}) { - let baseSelector; - - if (!selector || !selector.nodes) return baseSelector; - - // This regex is designed to pull spectrum-<ComponentName> out of a selector - const baseRegex = new RegExp( - `^(${selectorPrefix ? `${selectorPrefix}-` : ""}[A-Z][^\\W-.\\s]+)`, - ); - - // Iterate over the selector nodes to find a common root class name - const found = []; - selector.each((node) => { - if (node.type !== "class") return; - if (!node.value) return; - - const value = node.value ?? node.toString(); - const matches = value.match(baseRegex); - if (!matches) return; - - const [, foundSelector] = matches; - if (foundSelector) found.push(foundSelector); - }); - - if (found.length === 1) { - return cleanPropertyName(found[0], { selectorPrefix }); - } - - let countMap = new Map(); - - // Find and return the most common base selector in the array - found.forEach((s) => countMap.set(s, (countMap.get(s) || 0) + 1)); - - let count = 0; - for (let [s, c] of countMap.entries()) { - if (c > count) { - baseSelector = s; - count = c; - } - } - - // Remove the selector prefix from the returned base selector - return baseSelector ? cleanPropertyName(baseSelector, { selectorPrefix }) : baseSelector; -} - -/** - * Fallback function to process the name of the new variable - * @param {string} selector - * @param {string} prop - * @param {{ identifierName: string, identifierValue: string, selectorPrefix: string }} options - * @returns {string} The new variable name - */ -function getVariableName( - selector, - prop, - { selectorPrefix = "", identifierName, identifierValue } = {}, -) { - const baseSelector = getBaseSelector(selector, { selectorPrefix }) ?? ""; - - const clean = (prop) => - prop && - cleanPropertyName( - prop - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove the identifers if they exist - .replace(new RegExp(baseSelector, "gi"), "") - // Check for identifiers in the property name that don't include the dash - .replace(new RegExp(baseSelector?.replace(/-/g, ""), "gi"), "") - .replace(new RegExp(identifierName, "gi"), "") - .replace(new RegExp(identifierValue, "gi"), ""), - { selectorPrefix } - ); - - let property = []; - - function processSelector(node) { - if (node.type === "pseudo") { - property.push(node.value.slice(1)); - } - else if (node.type === "tag") { - property.push(node.value); - } - else if (node.type === "combinator") { - switch (node.value) { - case " ": // Descendant combinator - break; - case ">": - property.push("child-of"); - break; - case "+": - property.push("next-to"); - break; - case "~": - property.push("sibling-of"); - break; - } - } - else if (node.type === "class") { - if (node.value === baseSelector) return; - property.push(clean(node.value)); - return; - } - - if (!node.nodes) return; - node.each(processSelector); - } - - selector.each(processSelector); - - // Dedupe the property array, removing the 2nd instance of a property - property = property - .filter((value, index) => property.indexOf(value) === index) - .filter(Boolean); - - return `--${[identifierName, baseSelector, clean([...property, prop].filter(Boolean).join("-"))].filter(Boolean).join("-").toLowerCase()}`; -} - -/** - * Check for a replacement value based on the provided guesses - * @param {import('postcss').Declaration} decl - * @param {string} replace - * @param {string[]} guesses - * @param {string[]} systemValues - * @returns {string|undefined|void} The updated declaration value - */ -function checkForReplacement( - decl, - replace, - guesses = [], - systemValues = [], -) { - if (!decl || !replace || guesses.length === 0) return; - - const replacer = new RegExp(replace, "g"); - - for (const g of guesses) { - if (systemValues.includes(g)) { - return decl.value.replace(replacer, g); - } - - const values = systemValues.filter((value) => value.startsWith(g)); - if (values.length === 0) continue; - - if (values.length === 1) { - return decl.value.replace(replacer, values[0]); - } - - if (values.length > 1) { - return decl.value.replace(replacer, values[0]); - } - - continue; - } -} - -module.exports = { - cleanPropertyName, - extractFallbackValue, - getBaseSelector, - getVariableName, - checkForReplacement, -}; diff --git a/plugins/postcss-property-rollup/CHANGELOG.md b/plugins/postcss-property-rollup/CHANGELOG.md deleted file mode 100644 index 7470ee11a85..00000000000 --- a/plugins/postcss-property-rollup/CHANGELOG.md +++ /dev/null @@ -1,53 +0,0 @@ -# Change log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## 0.0.1 - -### Patch Changes - -- [#3541](https://github.com/adobe/spectrum-css/pull/3541) [`1a3245c`](https://github.com/adobe/spectrum-css/commit/1a3245c3a660bc52ed260f18b6cceab5ee81541d) Thanks [@castastrophe](https://github.com/castastrophe)! - Dependency alignment across the project. - - Set component peerDependencies as optional to reduce console warnings on downstream projects. - -## 2.0.1 - -### Patch Changes - -- [#2775](https://github.com/adobe/spectrum-css/pull/2775) [`2452637`](https://github.com/adobe/spectrum-css/commit/2452637d1179b9b2b025dafeb5834720712413d7) Thanks [@castastrophe](https://github.com/castastrophe)! -- Dependency minor and patch updates to support new features in tools leveraged - -<a name="2.0.0"></a> - -## 2.0.0 - -🗓 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.2...postcss-combininator@2.0.0) - -### 🛑 BREAKING CHANGES - -Upgrade to PostCSS v8 [bd6c40e](https://github.com/adobe/spectrum-css/commit/bd6c40eb5a4b43df94dff1f325502e5cd08b7f5f) - -<a name="1.0.2"></a> - -## 1.0.2 - -🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.2) - -**Note:** Version bump only for package postcss-combininator - -<a name="1.0.1"></a> - -## 1.0.1 - -🗓 2023-04-25 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0...postcss-combininator@1.0.1) - -**Note:** Version bump only for package postcss-combininator - -<a name="1.0.0"></a> - -## 1.0.0 - -🗓 2023-03-27 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/postcss-combininator@1.0.0-beta.1...postcss-combininator@1.0.0) - -**Note:** Version bump only for package postcss-combininator diff --git a/plugins/postcss-property-rollup/README.md b/plugins/postcss-property-rollup/README.md deleted file mode 100644 index a7a653d2a1b..00000000000 --- a/plugins/postcss-property-rollup/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# postcss-property-rollup - -> Combines multiple blocks of custom properties - -## Installation - -```sh -npm install postcss-property-rollup -``` - -## Usage - -On the command line: - -```sh -postcss -u postcss-property-rollup -o dist/index.css src/index.css -``` - -or in the PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-property-rollup": {}, - }, -}; -``` - -This plugin turns this: - -```css -.lorem { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.ipsum { - --spectrum-actionbutton-background-color: purple; -} -``` - -Into this: - -```css -.ipsum { - --spectrum-actionbutton-border-color: transparent; - --spectrum-actionbutton-background-color: purple; -} -``` - -The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations. - -## Options - -### `newSelector` - -Type: `string`<br> -Default: `null` - -The selector to use for the combined rule. If not provided, the last selector in the list will be used. - -### `ignore` - -Type: `string[]`<br> -Default: `[]` - -An array of selectors to ignore when combining rules. - -### `keyword` - -Type: `string`<br> -Default: `combine` - -The `@` prefixed comment keyword to search for when determining what code to roll-up into the new selector. diff --git a/plugins/postcss-property-rollup/expected/basic.css b/plugins/postcss-property-rollup/expected/basic.css deleted file mode 100644 index 201ab4356c5..00000000000 --- a/plugins/postcss-property-rollup/expected/basic.css +++ /dev/null @@ -1,4 +0,0 @@ -.spectrum--express { - --spectrum-actionbutton-background-color: purple; - --spectrum-actionbutton-border-color: transparent; -} diff --git a/plugins/postcss-property-rollup/fixtures/basic.css b/plugins/postcss-property-rollup/fixtures/basic.css deleted file mode 100644 index d7614ec6ee3..00000000000 --- a/plugins/postcss-property-rollup/fixtures/basic.css +++ /dev/null @@ -1,9 +0,0 @@ -/* @combine */ -.spectrum { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.spectrum--express { - --spectrum-actionbutton-background-color: purple; -} diff --git a/plugins/postcss-property-rollup/index.js b/plugins/postcss-property-rollup/index.js deleted file mode 100644 index 2d986684c94..00000000000 --- a/plugins/postcss-property-rollup/index.js +++ /dev/null @@ -1,98 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <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. - */ - -/** - * @typedef Options - * @property ignore {string[]} - List of selectors to ignore - * @property newSelector {string} - New selector to create with the combined declarations - */ - -/** @type import('postcss').PluginCreator<Options> */ -module.exports = ({ - ignore = [], - newSelector, -} = {}) => { - return { - postcssPlugin: "postcss-property-rollup", - OnceExit(root, { Rule }) { - let shouldCombine = false; - let localSelector; - // Check the file for a comment with @combine and fetch the preceeding selector(s) - root.walkComments((comment) => { - if (!comment.text.includes("@combine")) return; - - shouldCombine = true; - - // Remove the @combine from the string - const selectors = comment.text.replace("@combine", "").trim(); - - comment.remove(); - - if (!selectors) return; - - // Prefer the selectors from the comment over one provided in the config - if (!localSelector) localSelector = selectors; - }); - - if (!shouldCombine) return; - - if (localSelector) newSelector = localSelector; - - const rules = []; - const declarations = {}; - - root.walkRules((rule) => { - if (ignore.includes(rule.selector)) return; - rules.push(rule); - rule.walkDecls(/^--/, (decl) => { - declarations[decl.prop] = decl; - decl.remove(); - }); - }); - - if (!rules.length) return; - - if (newSelector) { - // Create a new rule with the combined declarations - const newRule = new Rule({ selector: newSelector }); - for (const decl of Object.values(declarations)) { - newRule.append(decl); - } - root.append(newRule); - - // Remove the rules from the root - rules.forEach((rule) => { - rule.remove(); - }); - - return; - } - - // If no new selector is provided, combine the declarations into the last rule - const lastIdx = rules.length - 1; - const lastRule = rules[lastIdx]; - - if (!lastRule) return; - - rules.forEach((rule, index) => { - if (index !== lastIdx) rule.remove(); - }); - - for (const decl of Object.values(declarations)) { - lastRule.append(decl); - } - }, - }; -}; - -module.exports.postcss = true; diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json deleted file mode 100644 index 3e1c6c3ae77..00000000000 --- a/plugins/postcss-property-rollup/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-property-rollup", - "version": "0.0.1", - "description": "Combines custom properties from multiple selectors into a single selector", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts <castastrophe@users.noreply.github.com>" - ], - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ], - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-property-rollup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "homepage": "https://opensource.adobe.com/spectrum-css/" -} diff --git a/plugins/postcss-property-rollup/project.json b/plugins/postcss-property-rollup/project.json deleted file mode 100644 index 681869f7a14..00000000000 --- a/plugins/postcss-property-rollup/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-property-rollup", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-property-rollup/test.js b/plugins/postcss-property-rollup/test.js deleted file mode 100644 index 2e2923f7b91..00000000000 --- a/plugins/postcss-property-rollup/test.js +++ /dev/null @@ -1,50 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at <http://www.apache.org/licenses/LICENSE-2.0> - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare( - t, - fixtureFilePath, - expectedFilePath, - options = { - processIdentifier: (identifier) => { - if (identifier === "express") { - return "spectrum--express"; - } - return identifier; - }, - } -) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); diff --git a/postcss.config.js b/postcss.config.js index 2231192ac7c..9667614004c 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -15,12 +15,7 @@ const fs = require("node:fs"); const { join, basename } = require("node:path"); module.exports = ({ - skipMapping = false, - referencesOnly = false, - preserveVariables = true, - stripLocalSelectors = false, resolveImports = true, - shouldCombine = false, lint = true, verbose = true, minify = false, @@ -84,19 +79,6 @@ module.exports = ({ prefix: "is-" } : false, "postcss-hover-media-feature": {}, - /* --------------------------------------------------- */ - /* ------------------- VARIABLE PARSING -------------- */ - "@spectrum-tools/postcss-add-theming-layer": { - selectorPrefix: "spectrum", - skipMapping, - preserveVariables, - referencesOnly, - stripLocalSelectors, - debug: verbose, - }, - "@spectrum-tools/postcss-property-rollup": shouldCombine ? { - newSelector: ".spectrum", - } : false, ...additionalPlugins, /* --------------------------------------------------- */ /* ------------------- POLYFILLS --------------------- */ diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index 444449c833a..b865ffd6c34 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -170,10 +170,6 @@ async function main({ const processed = await processCSS(undefined, sourceCSS, undefined, { cwd, - skipMapping: false, - referencesOnly: false, - preserveVariables: true, - stripLocalSelectors: false, map: false, env: "production", }); @@ -184,7 +180,7 @@ async function main({ cwd, sourcePath: sourceCSS, componentName, - baseSelectors: [".spectrum", ".spectrum--express", ".spectrum--legacy"], + baseSelectors: [".spectrum"], dataModel: { modifiers: ["mod"], spectrum: ["spectrum"], diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk index dc90d09a576..468a77ed93c 100644 --- a/tasks/templates/diff-preview.njk +++ b/tasks/templates/diff-preview.njk @@ -7,11 +7,11 @@ <meta name="theme-color" content="#e1251b" /> <!-- Load component stylesheets --> - <link rel="stylesheet" type="text/css" href="{{ "../../../components/typography/dist/index.css" | safe }}"/> + <link rel="stylesheet" type="text/css" href="{{ "@spectrum-css/typography/dist/index.css" | safe }}"/> - <link rel="stylesheet" type="text/css" href="{{ "../../../components/icon/dist/index.css" | safe }}"/> - <link rel="stylesheet" type="text/css" href="{{ "../../../components/sidenav/dist/index.css" | safe }}"/> - <link rel="stylesheet" type="text/css" href="{{ "../../../components/divider/dist/index.css" | safe }}"/> + <link rel="stylesheet" type="text/css" href="{{ "@spectrum-css/icon/dist/index.css" | safe }}"/> + <link rel="stylesheet" type="text/css" href="{{ "@spectrum-css/sidenav/dist/index.css" | safe }}"/> + <link rel="stylesheet" type="text/css" href="{{ "@spectrum-css/divider/dist/index.css" | safe }}"/> <link rel="stylesheet" type="text/css" href="{{ "../../../tokens/dist/css/index.css" | safe }}"/> diff --git a/yarn.lock b/yarn.lock index bfe090766e2..e2e077b90bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -123,8 +123,6 @@ __metadata: "@commitlint/cli": "npm:^19.6.1" "@commitlint/config-conventional": "npm:^19.6.0" "@nx/devkit": "npm:^19.8.2" - "@spectrum-tools/postcss-add-theming-layer": "npm:^1.0.0" - "@spectrum-tools/postcss-property-rollup": "npm:^0.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:^1.0.0" "@yarnpkg/types": "npm:^4.0.0" at-rule-packer: "npm:^0.4.2" @@ -5017,7 +5015,6 @@ __metadata: "@etchteam/storybook-addon-status": "npm:^5.0.0" "@spectrum-css/bundle": "npm:1.0.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0" "@spectrum-css/ui-icons": "npm:1.1.2" "@storybook/addon-a11y": "npm:^8.4.7" "@storybook/addon-actions": "npm:^8.4.7" @@ -5449,13 +5446,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tokens-legacy@npm:@spectrum-css/tokens@^15.2.0": - version: 15.2.0 - resolution: "@spectrum-css/tokens@npm:15.2.0" - checksum: 10c0/dd8d1dd39fc72d57bc12e183b3fda7654a7ebf90902267e8c4145d54b09eecfc150f09c92ec837b6c501c0c9da573e2d9b0bc3745c7c8981c3a39ee03367fc24 - languageName: node - linkType: hard - "@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:^, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" @@ -5607,41 +5597,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-add-theming-layer@npm:^1.0.0, @spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - postcss-selector-parser: "npm:^6.1.1" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - -"@spectrum-tools/postcss-property-rollup@npm:^0.0.0": - version: 0.0.0 - resolution: "@spectrum-tools/postcss-property-rollup@npm:0.0.0" - peerDependencies: - postcss: ">=8" - checksum: 10c0/78694d79964321ac6356e2d6b5d77af5172fdacc673d155df9a4352fec2e5ba732e99a699698cb0aaddcd2e4e4a84c8c760c06592b93f6441def1e0e3a23c9a8 - languageName: node - linkType: hard - -"@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "@spectrum-tools/postcss-rgb-mapping@npm:1.0.0, @spectrum-tools/postcss-rgb-mapping@npm:^1.0.0, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": version: 0.0.0-use.local resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" @@ -6864,21 +6819,21 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.11.0, acorn@npm:^8.12.1": - version: 8.12.1 - resolution: "acorn@npm:8.12.1" +"acorn@npm:^8.11.0, acorn@npm:^8.13.0": + version: 8.14.0 + resolution: "acorn@npm:8.14.0" bin: acorn: bin/acorn - checksum: 10c0/51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386 + checksum: 10c0/6d4ee461a7734b2f48836ee0fbb752903606e576cc100eb49340295129ca0b452f3ba91ddd4424a1d4406a98adfb2ebb6bd0ff4c49d7a0930c10e462719bbfd7 languageName: node linkType: hard -"acorn@npm:^8.13.0": - version: 8.14.0 - resolution: "acorn@npm:8.14.0" +"acorn@npm:^8.12.1": + version: 8.12.1 + resolution: "acorn@npm:8.12.1" bin: acorn: bin/acorn - checksum: 10c0/6d4ee461a7734b2f48836ee0fbb752903606e576cc100eb49340295129ca0b452f3ba91ddd4424a1d4406a98adfb2ebb6bd0ff4c49d7a0930c10e462719bbfd7 + checksum: 10c0/51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386 languageName: node linkType: hard @@ -7755,17 +7710,17 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.23.1": - version: 4.23.1 - resolution: "browserslist@npm:4.23.1" +"browserslist@npm:^4.23.1, browserslist@npm:^4.24.0": + version: 4.24.2 + resolution: "browserslist@npm:4.24.2" dependencies: - caniuse-lite: "npm:^1.0.30001629" - electron-to-chromium: "npm:^1.4.796" - node-releases: "npm:^2.0.14" - update-browserslist-db: "npm:^1.0.16" + caniuse-lite: "npm:^1.0.30001669" + electron-to-chromium: "npm:^1.5.41" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.1" bin: browserslist: cli.js - checksum: 10c0/eb47c7ab9d60db25ce2faca70efeb278faa7282a2f62b7f2fa2f92e5f5251cf65144244566c86559419ff4f6d78f59ea50e39911321ad91f3b27788901f1f5e9 + checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a languageName: node linkType: hard @@ -7783,20 +7738,6 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.24.0": - version: 4.24.2 - resolution: "browserslist@npm:4.24.2" - dependencies: - caniuse-lite: "npm:^1.0.30001669" - electron-to-chromium: "npm:^1.5.41" - node-releases: "npm:^2.0.18" - update-browserslist-db: "npm:^1.1.1" - bin: - browserslist: cli.js - checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a - languageName: node - linkType: hard - "bser@npm:2.1.1": version: 2.1.1 resolution: "bser@npm:2.1.1" @@ -8004,13 +7945,6 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001629": - version: 1.0.30001636 - resolution: "caniuse-lite@npm:1.0.30001636" - checksum: 10c0/e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94 - languageName: node - linkType: hard - "caniuse-lite@npm:^1.0.30001646": version: 1.0.30001660 resolution: "caniuse-lite@npm:1.0.30001660" @@ -9804,7 +9738,7 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:^16.4.4, dotenv@npm:~16.4.5": +"dotenv@npm:^16.4.4": version: 16.4.5 resolution: "dotenv@npm:16.4.5" checksum: 10c0/48d92870076832af0418b13acd6e5a5a3e83bb00df690d9812e94b24aff62b88ade955ac99a05501305b8dc8f1b0ee7638b18493deb6fe93d680e5220936292f @@ -9818,6 +9752,13 @@ __metadata: languageName: node linkType: hard +"dotenv@npm:~16.4.5": + version: 16.4.7 + resolution: "dotenv@npm:16.4.7" + checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462 + languageName: node + linkType: hard + "duplexer@npm:^0.1.1": version: 0.1.2 resolution: "duplexer@npm:0.1.2" @@ -9863,13 +9804,6 @@ __metadata: languageName: node linkType: hard -"electron-to-chromium@npm:^1.4.796": - version: 1.4.810 - resolution: "electron-to-chromium@npm:1.4.810" - checksum: 10c0/0fed53e156aab30d71f2d6fd3bcd818755cee6aab3316e497c1f92424b4ef628f9faf1cf3cc2b4bcacc91c6a58d4e610202c4aa23cf91d7fbe77f82144bdc0ba - languageName: node - linkType: hard - "electron-to-chromium@npm:^1.4.820": version: 1.5.0 resolution: "electron-to-chromium@npm:1.5.0" @@ -11118,13 +11052,20 @@ __metadata: languageName: node linkType: hard -"flatted@npm:^3.2.9, flatted@npm:^3.3.1": +"flatted@npm:^3.2.9": version: 3.3.1 resolution: "flatted@npm:3.3.1" checksum: 10c0/324166b125ee07d4ca9bcf3a5f98d915d5db4f39d711fba640a3178b959919aae1f7cfd8aabcfef5826ed8aa8a2aa14cc85b2d7d18ff638ddf4ae3df39573eaf languageName: node linkType: hard +"flatted@npm:^3.3.1": + version: 3.3.2 + resolution: "flatted@npm:3.3.2" + checksum: 10c0/24cc735e74d593b6c767fe04f2ef369abe15b62f6906158079b9874bdb3ee5ae7110bb75042e70cd3f99d409d766f357caf78d5ecee9780206f5fdc5edbad334 + languageName: node + linkType: hard + "follow-redirects@npm:^1.15.6": version: 1.15.6 resolution: "follow-redirects@npm:1.15.6" @@ -11426,13 +11367,6 @@ __metadata: languageName: node linkType: hard -"get-func-name@npm:^2.0.1": - version: 2.0.2 - resolution: "get-func-name@npm:2.0.2" - checksum: 10c0/89830fd07623fa73429a711b9daecdb304386d237c71268007f788f113505ef1d4cc2d0b9680e072c5082490aec9df5d7758bf5ac6f1c37062855e8e3dc0b9df - languageName: node - linkType: hard - "get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4": version: 1.2.4 resolution: "get-intrinsic@npm:1.2.4" @@ -11527,7 +11461,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.1": +"glob@npm:^10.0.0, glob@npm:^10.4.1": version: 10.4.5 resolution: "glob@npm:10.4.5" dependencies: @@ -11543,6 +11477,21 @@ __metadata: languageName: node linkType: hard +"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7": + version: 10.3.12 + resolution: "glob@npm:10.3.12" + dependencies: + foreground-child: "npm:^3.1.0" + jackspeak: "npm:^2.3.6" + minimatch: "npm:^9.0.1" + minipass: "npm:^7.0.4" + path-scurry: "npm:^1.10.2" + bin: + glob: dist/esm/bin.mjs + checksum: 10c0/f60cefdc1cf3f958b2bb5823e1b233727f04916d489dc4641d76914f016e6704421e06a83cbb68b0cb1cb9382298b7a88075b844ad2127fc9727ea22b18b0711 + languageName: node + linkType: hard + "glob@npm:^11.0.0": version: 11.0.0 resolution: "glob@npm:11.0.0" @@ -12953,6 +12902,19 @@ __metadata: languageName: node linkType: hard +"jackspeak@npm:^2.3.6": + version: 2.3.6 + resolution: "jackspeak@npm:2.3.6" + dependencies: + "@isaacs/cliui": "npm:^8.0.2" + "@pkgjs/parseargs": "npm:^0.11.0" + dependenciesMeta: + "@pkgjs/parseargs": + optional: true + checksum: 10c0/f01d8f972d894cd7638bc338e9ef5ddb86f7b208ce177a36d718eac96ec86638a6efa17d0221b10073e64b45edc2ce15340db9380b1f5d5c5d000cbc517dc111 + languageName: node + linkType: hard + "jackspeak@npm:^3.1.2": version: 3.4.3 resolution: "jackspeak@npm:3.4.3" @@ -13793,14 +13755,14 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:^3.1.1, lilconfig@npm:^3.1.2": +"lilconfig@npm:^3.1.1": version: 3.1.2 resolution: "lilconfig@npm:3.1.2" checksum: 10c0/f059630b1a9bddaeba83059db00c672b64dc14074e9f232adce32b38ca1b5686ab737eb665c5ba3c32f147f0002b4bee7311ad0386a9b98547b5623e87071fbe languageName: node linkType: hard -"lilconfig@npm:~3.1.3": +"lilconfig@npm:^3.1.2, lilconfig@npm:~3.1.3": version: 3.1.3 resolution: "lilconfig@npm:3.1.3" checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc @@ -14121,16 +14083,7 @@ __metadata: languageName: node linkType: hard -"loupe@npm:^3.1.0, loupe@npm:^3.1.1": - version: 3.1.1 - resolution: "loupe@npm:3.1.1" - dependencies: - get-func-name: "npm:^2.0.1" - checksum: 10c0/99f88badc47e894016df0c403de846fedfea61154aadabbf776c8428dd59e8d8378007135d385d737de32ae47980af07d22ba7bec5ef7beebd721de9baa0a0af - languageName: node - linkType: hard - -"loupe@npm:^3.1.2": +"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2": version: 3.1.2 resolution: "loupe@npm:3.1.2" checksum: 10c0/b13c02e3ddd6a9d5f8bf84133b3242de556512d824dddeea71cce2dbd6579c8f4d672381c4e742d45cf4423d0701765b4a6e5fbc24701def16bc2b40f8daa96a @@ -14967,6 +14920,15 @@ __metadata: languageName: node linkType: hard +"minimatch@npm:^9.0.1": + version: 9.0.4 + resolution: "minimatch@npm:9.0.4" + dependencies: + brace-expansion: "npm:^2.0.1" + checksum: 10c0/2c16f21f50e64922864e560ff97c587d15fd491f65d92a677a344e970fe62aafdbeafe648965fa96d33c061b4d0eabfe0213466203dd793367e7f28658cf6414 + languageName: node + linkType: hard + "minimatch@npm:^9.0.4": version: 9.0.5 resolution: "minimatch@npm:9.0.5" @@ -16178,6 +16140,16 @@ __metadata: languageName: node linkType: hard +"path-scurry@npm:^1.10.2": + version: 1.10.2 + resolution: "path-scurry@npm:1.10.2" + dependencies: + lru-cache: "npm:^10.2.0" + minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0" + checksum: 10c0/d723777fbf9627f201e64656680f66ebd940957eebacf780e6cce1c2919c29c116678b2d7dbf8821b3a2caa758d125f4444005ccec886a25c8f324504e48e601 + languageName: node + linkType: hard + "path-scurry@npm:^1.11.1": version: 1.11.1 resolution: "path-scurry@npm:1.11.1" @@ -16226,13 +16198,20 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1": +"picocolors@npm:^1.0.0": version: 1.0.1 resolution: "picocolors@npm:1.0.1" checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400 languageName: node linkType: hard +"picocolors@npm:^1.0.1, picocolors@npm:^1.1.1": + version: 1.1.1 + resolution: "picocolors@npm:1.1.1" + checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 + languageName: node + linkType: hard + "picocolors@npm:^1.1.0": version: 1.1.0 resolution: "picocolors@npm:1.1.0" @@ -16240,13 +16219,6 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.1.1": - version: 1.1.1 - resolution: "picocolors@npm:1.1.1" - checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 - languageName: node - linkType: hard - "picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" @@ -17360,27 +17332,27 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.16, postcss-selector-parser@npm:^6.0.4": - version: 6.1.1 - resolution: "postcss-selector-parser@npm:6.1.1" +"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.4": + version: 6.0.16 + resolution: "postcss-selector-parser@npm:6.0.16" dependencies: cssesc: "npm:^3.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10c0/5608765e033fee35d448e1f607ffbaa750eb86901824a8bc4a911ea8bc137cb82f29239330787427c5d3695afd90d8721e190f211dbbf733e25033d8b3100763 + checksum: 10c0/0e11657cb3181aaf9ff67c2e59427c4df496b4a1b6a17063fae579813f80af79d444bf38f82eeb8b15b4679653fd3089e66ef0283f9aab01874d885e6cf1d2cf languageName: node linkType: hard -"postcss-selector-parser@npm:^6.1.0": - version: 6.1.0 - resolution: "postcss-selector-parser@npm:6.1.0" +"postcss-selector-parser@npm:^6.0.16": + version: 6.1.1 + resolution: "postcss-selector-parser@npm:6.1.1" dependencies: cssesc: "npm:^3.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10c0/91e9c6434772506bc7f318699dd9d19d32178b52dfa05bed24cb0babbdab54f8fb765d9920f01ac548be0a642aab56bce493811406ceb00ae182bbb53754c473 + checksum: 10c0/5608765e033fee35d448e1f607ffbaa750eb86901824a8bc4a911ea8bc137cb82f29239330787427c5d3695afd90d8721e190f211dbbf733e25033d8b3100763 languageName: node linkType: hard -"postcss-selector-parser@npm:^6.1.1, postcss-selector-parser@npm:^6.1.2": +"postcss-selector-parser@npm:^6.1.0, postcss-selector-parser@npm:^6.1.2": version: 6.1.2 resolution: "postcss-selector-parser@npm:6.1.2" dependencies: @@ -20146,20 +20118,6 @@ __metadata: languageName: node linkType: hard -"update-browserslist-db@npm:^1.0.16": - version: 1.0.16 - resolution: "update-browserslist-db@npm:1.0.16" - dependencies: - escalade: "npm:^3.1.2" - picocolors: "npm:^1.0.1" - peerDependencies: - browserslist: ">= 4.21.0" - bin: - update-browserslist-db: cli.js - checksum: 10c0/5995399fc202adbb51567e4810e146cdf7af630a92cc969365a099150cb00597e425cc14987ca7080b09a4d0cfd2a3de53fbe72eebff171aed7f9bb81f9bf405 - languageName: node - linkType: hard - "update-browserslist-db@npm:^1.1.0": version: 1.1.0 resolution: "update-browserslist-db@npm:1.1.0" From 1a2491e25ba5ea5e081dd021cad3f415e178816b Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" <castastrophe@users.noreply.github.com> Date: Wed, 4 Dec 2024 09:42:54 -0500 Subject: [PATCH 053/103] fix(pagination): deprecate legacy features to align with foundations --- .storybook/modes/index.js | 35 +++++++++---------------- .storybook/preview.js | 2 +- components/card/index.css | 8 +----- components/pagination/CHANGELOG.md | 7 ++--- tools/generator/templates/index.css.hbs | 2 -- 5 files changed, 17 insertions(+), 37 deletions(-) diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index 1b570d6c2e1..9e16fbf0ec9 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -12,31 +12,22 @@ */ const modes = { - "Light | LTR": { - color: "light", - textDirection: "ltr", - }, - "Dark | RTL": { - color: "dark", - textDirection: "rtl", - }, - "S1 | Light | LTR": { - context: "legacy", - color: "light", - textDirection: "ltr", - }, - "Express | Light | LTR": { - context: "express", - color: "light", - textDirection: "ltr", - }, + Light: { + color: "light", + }, + Dark: { + color: "dark", + }, + RTL: { + textDirection: "rtl", + }, }; export default modes; export const disableDefaultModes = { - ...Object.keys(modes).reduce((acc, key) => { - acc[key] = { disable: true }; - return acc; - }, {}), + ...Object.keys(modes).reduce((acc, key) => { + acc[key] = { disable: true }; + return acc; + }, {}), }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 232b980ebfa..9f75a7e221f 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -90,7 +90,7 @@ export const parameters = { // Set an empty object to avoid the "undefined" value in the ComponentDetails doc block packageJson: {}, // A list of published npm tags that should not appear in the ComponentDetails doc block - ignoredTags: ["beta", "next"], + ignoredTags: ["beta"], }; export default { diff --git a/components/card/index.css b/components/card/index.css index e6cabc897e4..0d41d088761 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -30,6 +30,7 @@ --spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100)); --spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100)); + --spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700)); /* Typography */ --spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack)); @@ -81,13 +82,6 @@ --spectrum-card-content-margin-top: var(--spectrum-spacing-100); } - &.is-selected, - &.is-drop-target { - --spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700)); - } -} - -.spectrum-Card { position: relative; display: inline-flex; flex-direction: column; diff --git a/components/pagination/CHANGELOG.md b/components/pagination/CHANGELOG.md index a294a3a70d5..4dc4dbeb33b 100644 --- a/components/pagination/CHANGELOG.md +++ b/components/pagination/CHANGELOG.md @@ -313,9 +313,7 @@ Output for all component CSS files is now being run through a lightweight optimi - feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d)) - ### - - 🛑 BREAKING CHANGES +### 🛑 BREAKING CHANGES - Replaces DNA tokens with Spectrum tokens. @@ -434,7 +432,6 @@ Add the "Button style" version of Pagination from the docs to Storybook. ### 🔙 Reverts - gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099) - <a name="6.0.40"></a> ## 6.0.40 @@ -500,7 +497,7 @@ Add the "Button style" version of Pagination from the docs to Storybook. ### 🐛 Bug fixes -\*icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3)) +- icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3)) <a name="6.0.32"></a> diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs index 2219223a2b1..8fa905253bd 100644 --- a/tools/generator/templates/index.css.hbs +++ b/tools/generator/templates/index.css.hbs @@ -15,8 +15,6 @@ // color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default))); &.spectrum-{{ pascalCase name }}--sizeS {} - &, - &.spectrum-{{ pascalCase name }}--sizeM {} &.spectrum-{{ pascalCase name }}--sizeL {} &.spectrum-{{ pascalCase name }}--sizeXL {} } From 347b1c9a4f58ab4be549f9bbb5b39869d180b6d6 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Mon, 9 Dec 2024 17:36:29 -0500 Subject: [PATCH 054/103] feat(dialog): s2 standard dialog migration (#2860) * feat(dialog)!: s2 standard dialog migration * docs(dialog): dialog controls/coverage - adds new features/behaviors such as the checkbox in the footer, wrapping for footer/header content, being able to have close button and button group, hasHeroImage - removes Divider support in dialog - adds is-hidden-story to replicate what is on main and remove most stories from the sidebar - adds some comments and TODOs giving context to this choice - removes layout from control table from default argTypes - removes hasFooter from control table for fullscreen/fullscreenTakeover argTypes - adds a comment to explain the custom argTypes changes for those stories - also adds a comment about multiple conditionals for argTypes * refactor(modal): use corner-radius-extra-large-default to match design specs * fix(underlay): update comment notes for spectrum-overlay-color - also comments out a duplicated custom property and adds a TODO comment * refactor(dialog): new css for S2 dialog - adds some opportunities for mod properties - fixes dismissible grid spacing between additional header content and close button - scope passthrough mods to spectrum-Dialog class - add flex-direction: column to footer (this should allow the footer content and button group to stack at small screens at smallest dialog sizes on the mobile scale.) * feat(dialog): rebuild mods - lots of mods are renamed to use "standard dialog" language * chore(dialog): create changeset * chore(dialog): update peer deps data - remove divider from peerDependencies and peerDependenciesMeta - adds closebutton, checkbox and typography to peerDependenciesMeta * chore: remove divider tests * chore(buttongroup): add flex-wrap mod property * chore(buttongroup): creates buttongroup changeset * chore(buttongroup,dialog): rebuild mods * fix(dialog): platform custom variables - calls for --spectrum-standard-dialog-spacing-edge-to-content * chore(tokens): create changeset for custom standard dialog token * chore(tray): fix spelling of isDismissible arg * fix(dialog,modal): custom styles for modal background color - because modal was originally setting the background color of dialogs, there was some 'antialiasing bleed through' behind the dialog. By adding customStyles to Modal, we can set --mod-modal-background-color to transparent and get rid of the hairline color (especially noticeable behind a hero image in a dialog) * docs(dialog): adds modal background color documentation * fix(dialog): use font-stack instead of font-family * docs(dialog): rebase fixes - override layout:centered parameter with layout:padded instead so the dialogs are visible on their canvases on the docs page. --- .changeset/few-doors-smile.md | 5 + .changeset/metal-fireants-switch.md | 52 +++ components/buttongroup/dist/metadata.json | 1 + components/buttongroup/index.css | 2 +- components/card/dist/metadata.json | 2 +- components/dialog/dist/metadata.json | 158 ++++---- components/dialog/index.css | 381 ++++++++++++-------- components/dialog/package.json | 1 + components/dialog/stories/dialog.stories.js | 163 ++++++--- components/dialog/stories/template.js | 181 +++++++--- components/modal/dist/metadata.json | 18 +- components/modal/index.css | 36 +- components/modal/package.json | 1 - tokens/custom/large-vars.css | 2 + tokens/custom/medium-vars.css | 2 + yarn.lock | 2 +- 16 files changed, 646 insertions(+), 361 deletions(-) create mode 100644 .changeset/few-doors-smile.md create mode 100644 .changeset/metal-fireants-switch.md diff --git a/.changeset/few-doors-smile.md b/.changeset/few-doors-smile.md new file mode 100644 index 00000000000..872a7c98e6d --- /dev/null +++ b/.changeset/few-doors-smile.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/buttongroup": patch +--- + +Adds a new `--mod-buttongroup-flex-wrap` custom property to leverage if a user wishes to customize the `flex-wrap` property. diff --git a/.changeset/metal-fireants-switch.md b/.changeset/metal-fireants-switch.md new file mode 100644 index 00000000000..97acf890c52 --- /dev/null +++ b/.changeset/metal-fireants-switch.md @@ -0,0 +1,52 @@ +--- +"@spectrum-css/dialog": major +"@spectrum-css/modal": patch +"@spectrum-css/underlay": patch +--- + +Spectrum 2 Standard Dialog Migration + +This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area. + +The `.spectrum-Dialog--small`, `.spectrum-Dialog--medium`, and `.spectrum-Dialog--large` sizing classes were deprecated and removed from the CSS in favor of the t-shirt sizes. Additionally, the spelling of the `.spectrum-Dialog--dismissable` class was corrected to `.spectrum-Dialog--dismissible`. + +Mod properties are either "new," have been renamed to reflect the respective dialog language, or were removed: + +_New Mods_ +`--mod-standard-dialog-spacing-title-to-header-content` +`--mod-standard-dialog-spacing-title-to-description` +`--mod-standard-dialog-header-content-font-size` + +_Renamed Mods_ +`--mod-dialog-confirm-small-width` > `--mod-standard-dialog-max-width-small` +`--mod-dialog-confirm-medium-width` > `--mod-standard-dialog-max-width` +`--mod-dialog-confirm-large-width` > `--mod-standard-dialog-max-width-large` +`--mod-dialog-confirm-border-radius` > `--mod-standard-dialog-border-radius` +`--mod-dialog-confirm-description-text-size` > `--mod-standard-dialog-description-font-size` +`--mod-dialog-confirm-description-text-line-height` > `--mod-standard-dialog-description-line-height` +`--mod-dialog-confirm-description-text-color` > `--mod-standard-dialog-description-text-color` +`--mod-dialog-confirm-description-font-weight` > `--mod-standard-dialog-description-font-weight` +`--mod-dialog-heading-font-weight` > `--mod-standard-dialog-heading-font-weight` +`--mod-dialog-confirm-title-text-line-height` > `--mod-standard-dialog-heading-line-height` +`--mod-dialog-confirm-title-text-color` > `--mod-standard-dialog-heading-text-color` +`--mod-dialog-confirm-title-text-size` > `--mod-standard-dialog-heading-font-size` +`--mod-dialog-confirm-hero-height` > `--mod-standard-dialog-hero-block-size` +`--mod-dialog-min-inline-size` > `--mod-standard-dialog-min-inline-size` +`--mod-dialog-confirm-padding-grid` > `--mod-standard-dialog-spacing-grid-padding` +`--mod-dialog-confirm-footer-padding-top` > `--mod-standard-dialog-spacing-description-to-footer` +`--mod-dialog-confirm-close-button-padding` > `--mod-standard-dialog-spacing-edge-to-close-button` +`--mod-dialog-confirm-gap-size` > `--mod-standard-dialog-spacing-footer-to-button-group` + +_Removed Mods_ +`--mod-dialog-confirm-buttongroup-padding-top` +`--mod-dialog-confirm-close-button-size` +`--mod-dialog-confirm-description-margin` +`--mod-dialog-confirm-description-padding` +`--mod-dialog-confirm-divider-block-spacing-end` +`--mod-dialog-confirm-divider-block-spacing-start` +`--mod-dialog-confirm-divider-height` + +Modal and underlay updates + +- Modal component now uses the updated corner rounding. +- Underlay has an updated comment that addresses the overlay-color/overlay-opacity tokens. diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e39..0662926cc8d 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -7,6 +7,7 @@ ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], "modifiers": [ + "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content", "--mod-buttongroup-spacing", "--mod-buttongroup-spacing-horizontal", diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index 05019824787..0d65d39c0f2 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -35,7 +35,7 @@ .spectrum-ButtonGroup { display: var(--spectrum-buttongroup-display); flex-direction: var(--spectrum-buttongroup-flex-direction); - flex-wrap: wrap; + flex-wrap: var(--mod-buttongroup-flex-wrap, wrap); gap: var(--spectrum-buttongroup-spacing); justify-content: var(--spectrum-buttongroup-justify-content); diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index b6b033a6404..53a9f53d47b 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -55,7 +55,6 @@ ".spectrum-Card.is-drop-target", ".spectrum-Card.is-focused .spectrum-Card-actions", ".spectrum-Card.is-focused .spectrum-Card-quickActions", - ".spectrum-Card.is-selected", ".spectrum-Card.is-selected .spectrum-Card-actions", ".spectrum-Card.is-selected .spectrum-Card-quickActions", ".spectrum-Card.is-selected:before", @@ -155,6 +154,7 @@ "--spectrum-card-body-spacing", "--spectrum-card-border-color", "--spectrum-card-border-color-hover", + "--spectrum-card-border-color-selected", "--spectrum-card-border-width", "--spectrum-card-content-margin-bottom", "--spectrum-card-content-margin-top", diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 812542da227..18c67230d3d 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -2,100 +2,124 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Dialog", - ".spectrum-Dialog .spectrum-Dialog-divider", - ".spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog .spectrum-Dialog-header", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid", + ".spectrum-Dialog--dismissible .spectrum-Dialog-grid .spectrum-Dialog-footer", ".spectrum-Dialog--fullscreen", ".spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreen .spectrum-Dialog-content", ".spectrum-Dialog--fullscreen .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-header", ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading", - ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider", ".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreenTakeover", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-closeButton", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-content", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading", ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid", - ".spectrum-Dialog--noDivider .spectrum-Dialog-divider", - ".spectrum-Dialog--noDivider .spectrum-Dialog-heading", ".spectrum-Dialog--sizeL", ".spectrum-Dialog--sizeS", ".spectrum-Dialog-buttonGroup", - ".spectrum-Dialog-buttonGroup.spectrum-Dialog-buttonGroup--noFooter", + ".spectrum-Dialog-buttonGroup--noFooter", ".spectrum-Dialog-closeButton", ".spectrum-Dialog-content", ".spectrum-Dialog-footer", - ".spectrum-Dialog-footer > *", - ".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button", + ".spectrum-Dialog-footer .spectrum-Dialog-footer-content", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)", + ".spectrum-Dialog-grid", ".spectrum-Dialog-header", + ".spectrum-Dialog-header > .spectrum-Dialog-header-content", ".spectrum-Dialog-heading", - ".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader", - ".spectrum-Dialog-hero", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup", - ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer" + ".spectrum-Dialog-hero" ], "modifiers": [ - "--mod-dialog-confirm-border-radius", - "--mod-dialog-confirm-buttongroup-padding-top", - "--mod-dialog-confirm-close-button-padding", - "--mod-dialog-confirm-close-button-size", - "--mod-dialog-confirm-description-font-weight", - "--mod-dialog-confirm-description-margin", - "--mod-dialog-confirm-description-padding", - "--mod-dialog-confirm-description-text-color", - "--mod-dialog-confirm-description-text-line-height", - "--mod-dialog-confirm-description-text-size", - "--mod-dialog-confirm-divider-block-spacing-end", - "--mod-dialog-confirm-divider-block-spacing-start", - "--mod-dialog-confirm-divider-height", - "--mod-dialog-confirm-footer-padding-top", - "--mod-dialog-confirm-gap-size", - "--mod-dialog-confirm-hero-height", - "--mod-dialog-confirm-large-width", - "--mod-dialog-confirm-medium-width", - "--mod-dialog-confirm-padding-grid", - "--mod-dialog-confirm-small-width", - "--mod-dialog-confirm-title-text-color", - "--mod-dialog-confirm-title-text-line-height", - "--mod-dialog-confirm-title-text-size", - "--mod-dialog-fullscreen-header-text-size", - "--mod-dialog-heading-font-weight", - "--mod-dialog-min-inline-size", - "--mod-dialog-width" - ], - "component": [ - "--spectrum-dialog-confirm-border-radius", - "--spectrum-dialog-confirm-buttongroup-padding-top", - "--spectrum-dialog-confirm-close-button-padding", - "--spectrum-dialog-confirm-close-button-size", - "--spectrum-dialog-confirm-description-padding", - "--spectrum-dialog-confirm-description-text-color", - "--spectrum-dialog-confirm-description-text-size", - "--spectrum-dialog-confirm-divider-block-spacing-end", - "--spectrum-dialog-confirm-divider-block-spacing-start", - "--spectrum-dialog-confirm-gap-size", - "--spectrum-dialog-confirm-hero-height", - "--spectrum-dialog-confirm-padding-grid", - "--spectrum-dialog-confirm-title-text-size" + "--mod-standard-dialog-background-color", + "--mod-standard-dialog-border-radius", + "--mod-standard-dialog-description-font-size", + "--mod-standard-dialog-description-font-weight", + "--mod-standard-dialog-description-line-height", + "--mod-standard-dialog-description-text-color", + "--mod-standard-dialog-header-content-font-size", + "--mod-standard-dialog-heading-font-size", + "--mod-standard-dialog-heading-font-weight", + "--mod-standard-dialog-heading-line-height", + "--mod-standard-dialog-heading-text-color", + "--mod-standard-dialog-hero-block-size", + "--mod-standard-dialog-max-width", + "--mod-standard-dialog-max-width-large", + "--mod-standard-dialog-max-width-small", + "--mod-standard-dialog-min-inline-size", + "--mod-standard-dialog-spacing-description-to-footer", + "--mod-standard-dialog-spacing-edge-to-close-button", + "--mod-standard-dialog-spacing-footer-to-button-group", + "--mod-standard-dialog-spacing-grid-padding", + "--mod-standard-dialog-spacing-title-to-description", + "--mod-standard-dialog-spacing-title-to-header-content" ], + "component": [], "global": [ - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-height-100", - "--spectrum-component-pill-edge-to-text-100", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-regular-font-weight", + "--spectrum-background-layer-2-color", + "--spectrum-black-rgb", + "--spectrum-body-color", + "--spectrum-body-sans-serif-font-style", + "--spectrum-body-sans-serif-font-weight", + "--spectrum-corner-radius-extra-large-default", + "--spectrum-heading-color", + "--spectrum-line-height-200", + "--spectrum-overlay-opacity", + "--spectrum-sans-font-family-stack", "--spectrum-spacing-200", "--spectrum-spacing-300", - "--spectrum-spacing-50", - "--spectrum-spacing-600" + "--spectrum-spacing-400", + "--spectrum-spacing-500", + "--spectrum-standard-dialog-background-color", + "--spectrum-standard-dialog-body-font-size", + "--spectrum-standard-dialog-border-radius", + "--spectrum-standard-dialog-description-font-family", + "--spectrum-standard-dialog-description-font-size", + "--spectrum-standard-dialog-description-font-style", + "--spectrum-standard-dialog-description-font-weight", + "--spectrum-standard-dialog-description-line-height", + "--spectrum-standard-dialog-description-text-color", + "--spectrum-standard-dialog-header-content-font-size", + "--spectrum-standard-dialog-heading-font-family", + "--spectrum-standard-dialog-heading-font-size", + "--spectrum-standard-dialog-heading-font-style", + "--spectrum-standard-dialog-heading-font-weight", + "--spectrum-standard-dialog-heading-line-height", + "--spectrum-standard-dialog-heading-text-color", + "--spectrum-standard-dialog-hero-block-size", + "--spectrum-standard-dialog-max-width", + "--spectrum-standard-dialog-maximum-width-large", + "--spectrum-standard-dialog-maximum-width-medium", + "--spectrum-standard-dialog-maximum-width-small", + "--spectrum-standard-dialog-min-inline-size", + "--spectrum-standard-dialog-minimum-width", + "--spectrum-standard-dialog-padding", + "--spectrum-standard-dialog-spacing-description-to-footer", + "--spectrum-standard-dialog-spacing-edge-to-close-button", + "--spectrum-standard-dialog-spacing-edge-to-content", + "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end", + "--spectrum-standard-dialog-spacing-footer-to-button-group", + "--spectrum-standard-dialog-spacing-grid-padding", + "--spectrum-standard-dialog-spacing-title-to-description", + "--spectrum-standard-dialog-spacing-title-to-header-content", + "--spectrum-standard-dialog-title-font-size", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" ], "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "passthroughs": [ + "--mod-buttongroup-flex-wrap", + "--mod-buttongroup-justify-content" + ], + "high-contrast": ["--highcontrast-standard-dialog-border-color"] } diff --git a/components/dialog/index.css b/components/dialog/index.css index 39ed5be57c7..d83c7920258 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -12,200 +12,227 @@ */ .spectrum-Dialog { - --spectrum-dialog-confirm-divider-block-spacing-start: var(--spectrum-spacing-300); - --spectrum-dialog-confirm-divider-block-spacing-end: var(--spectrum-spacing-200); - --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); - --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); - --spectrum-dialog-confirm-gap-size: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-dialog-confirm-buttongroup-padding-top: var(--spectrum-spacing-600); - --spectrum-dialog-confirm-close-button-size: var(--spectrum-component-height-100); - --spectrum-dialog-confirm-close-button-padding: calc(26px - var(--spectrum-component-bottom-to-text-300)); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-medium); + --spectrum-standard-dialog-min-inline-size: var(--spectrum-standard-dialog-minimum-width); + --spectrum-standard-dialog-border-radius: var(--spectrum-corner-radius-extra-large-default); + + /* Fonts */ + --spectrum-standard-dialog-heading-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-standard-dialog-heading-font-size: var(--spectrum-standard-dialog-title-font-size); + --spectrum-standard-dialog-heading-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-standard-dialog-heading-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-description-font-weight: var(--spectrum-body-sans-serif-font-weight); + --spectrum-standard-dialog-description-font-size: var(--spectrum-standard-dialog-body-font-size); + --spectrum-standard-dialog-description-font-style: var(--spectrum-body-sans-serif-font-style); + --spectrum-standard-dialog-description-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-standard-dialog-header-content-font-size: var(--spectrum-standard-dialog-body-font-size); + + --spectrum-standard-dialog-heading-line-height: var(--spectrum-title-line-height); + --spectrum-standard-dialog-description-line-height: var(--spectrum-line-height-200); + + /* Colors */ + --spectrum-standard-dialog-heading-text-color: var(--spectrum-heading-color); + --spectrum-standard-dialog-description-text-color: var(--spectrum-body-color); + --spectrum-standard-dialog-background-color: var(--spectrum-background-layer-2-color); + + /* Spacing */ + --spectrum-standard-dialog-padding: var(--spectrum-standard-dialog-spacing-edge-to-content); + --spectrum-standard-dialog-spacing-title-to-description: var(--spectrum-spacing-300); + --spectrum-standard-dialog-spacing-description-to-footer: var(--spectrum-spacing-500); + --spectrum-standard-dialog-spacing-title-to-header-content: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-edge-to-header-content-inline-end: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-footer-to-button-group: var(--spectrum-spacing-400); + + /* Grid */ + --spectrum-standard-dialog-spacing-grid-padding: var(--spectrum-standard-dialog-padding); + --spectrum-standard-dialog-spacing-edge-to-close-button: var(--spectrum-spacing-200); + + /* Hero */ + --spectrum-standard-dialog-hero-block-size: 140px; + + /* Passthrough for nested component(s) */ + --mod-buttongroup-justify-content: flex-end; + --mod-buttongroup-flex-wrap: nowrap; +} +.spectrum-Dialog { /* Be a flexbox to allow a full sized content area that scrolls */ display: flex; /* Allow 100% width, taking into account padding */ box-sizing: border-box; - /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ - inline-size: var(--mod-dialog-width, var(--mod-dialog-confirm-medium-width, 480px)); - min-inline-size: var(--mod-dialog-min-inline-size, 288px); + /* Be no bigger than max-width, but also be 90% if the viewport is smaller than max-width */ + inline-size: var(--mod-standard-dialog-max-width, var(--spectrum-standard-dialog-max-width)); + min-inline-size: var(--mod-standard-dialog-min-inline-size, var(--spectrum-standard-dialog-min-inline-size)); max-inline-size: 100%; - max-block-size: inherit; - + background-color: var(--mod-standard-dialog-background-color, var(--spectrum-standard-dialog-background-color)); outline: none; + border-radius: var(--mod-standard-dialog-border-radius, var(--spectrum-standard-dialog-border-radius)); + overflow: hidden; } .spectrum-Dialog--sizeS { - --mod-dialog-width: var(--mod-dialog-confirm-small-width, 400px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-small); + inline-size: var(--mod-standard-dialog-max-width-small, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog--sizeL { - --mod-dialog-width: var(--mod-dialog-confirm-large-width, 640px); + --spectrum-standard-dialog-max-width: var(--spectrum-standard-dialog-maximum-width-large); + inline-size: var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-max-width)); } .spectrum-Dialog-hero { grid-area: hero; - block-size: var(--mod-dialog-confirm-hero-height, var(--spectrum-dialog-confirm-hero-height)); - border-start-start-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); - border-start-end-radius: var(--mod-dialog-confirm-border-radius, var(--spectrum-dialog-confirm-border-radius)); + block-size: var(--mod-standard-dialog-hero-block-size, var(--spectrum-standard-dialog-hero-block-size)); background-size: cover; background-position: center center; - overflow: hidden; } -.spectrum-Dialog .spectrum-Dialog-grid { +/* Non-Dismissible Dialog (no close button) */ +.spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero" - ". . . . . ." - ". heading header header header ." - ". divider divider divider divider ." - ". content content content content ." - ". footer footer buttonGroup buttonGroup ." - ". . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + "hero hero hero hero hero hero hero" + ". . . . . . ." + ". heading header header header header ." + ". content content content content content ." + ". footer footer footer buttonGroup buttonGroup ." + ". . . . . . ."; inline-size: 100%; } +/* the dialog's heading/title */ .spectrum-Dialog-heading { grid-area: heading; - margin: 0; - - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); - font-weight: var(--mod-dialog-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - line-height: var(--mod-dialog-confirm-title-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-title-text-color, var(--spectrum-gray-900)); + margin-block: 0; + font-size: var(--mod-standard-dialog-heading-font-size, var(--spectrum-standard-dialog-heading-font-size)); + font-weight: var(--mod-standard-dialog-heading-font-weight, var(--spectrum-standard-dialog-heading-font-weight)); + font-style: var(--spectrum-standard-dialog-heading-font-style); + font-family: var(--spectrum-standard-dialog-heading-font-family); + line-height: var(--mod-standard-dialog-heading-line-height, var(--spectrum-standard-dialog-heading-line-height)); + color: var(--mod-standard-dialog-heading-text-color, var(--spectrum-standard-dialog-heading-text-color)); outline: none; /* Hide focus outline */ - - padding-inline-end: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-heading--noHeader { - grid-area: heading-start / heading-start / header-end / header-end; - padding-inline-end: 0; - } } +/* the container for the heading and any additional header content */ .spectrum-Dialog-header { grid-area: header; display: flex; + max-inline-size: 100%; + margin-block-end: var(--mod-standard-dialog-spacing-title-to-description, var(--spectrum-standard-dialog-spacing-title-to-description)); + gap: var(--mod-standard-dialog-spacing-title-to-header-content, var(--spectrum-standard-dialog-spacing-title-to-header-content)); - /* Without this, buttons will be stretched */ - align-items: center; - justify-content: flex-end; + /* Without this, buttons will be stretched */ + align-items: flex-start; + justify-content: space-between; box-sizing: border-box; outline: none; /* Hide focus outline around header */ -} - -.spectrum-Dialog .spectrum-Dialog-divider { - grid-area: divider; - inline-size: 100%; - margin-block-start: var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)); - margin-block-end: var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)); -} - -/* remove top vertical padding of spectrum-Dialog-content from bottom margin of first divider after heading */ -.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider { - margin-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) - (var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2)); -} -.spectrum-Dialog--noDivider { - .spectrum-Dialog-divider { - display: none; - } - - .spectrum-Dialog-heading { - padding-block-end: calc(var(--mod-dialog-confirm-divider-block-spacing-end, var(--spectrum-dialog-confirm-divider-block-spacing-end)) + var(--mod-dialog-confirm-divider-block-spacing-start, var(--spectrum-dialog-confirm-divider-block-spacing-start)) + var(--mod-dialog-confirm-divider-height, var(--spectrum-spacing-50))); + /* additional header content should grow/shrink with the text, but only until it takes up half of the header */ + > .spectrum-Dialog-header-content { + max-inline-size: fit-content; + flex: 1 1 100%; + font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size)); + text-wrap: pretty; } } .spectrum-Dialog-content { grid-area: content; box-sizing: border-box; - - /* - v2 is currently worse, inputs that get focus rings get a slight clipping unless overflow: visible replaces this line - we should think of a better way to handle this, see padding/margin below for fix - */ overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; /* Hide focus outline */ - - font-size: var(--mod-dialog-confirm-description-text-size, var(--spectrum-dialog-confirm-description-text-size)); - font-weight: var(--mod-dialog-confirm-description-font-weight, var(--spectrum-regular-font-weight)); - line-height: var(--mod-dialog-confirm-description-text-line-height, var(--spectrum-line-height-100)); - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); - - /* this is kinda dumb, but needed for the keyboard focus rings so they don't get clipped. is there a better way to treat this */ - padding: calc(var(--mod-dialog-confirm-description-padding, var(--spectrum-dialog-confirm-description-padding)) * 2); - margin: 0 var(--mod-dialog-confirm-description-margin, calc(var(--spectrum-spacing-50) * -1)); + font-size: var(--mod-standard-dialog-description-font-size, var(--spectrum-standard-dialog-description-font-size)); + font-weight: var(--mod-standard-dialog-description-font-weight, var(--spectrum-standard-dialog-description-font-weight)); + font-family: var(--spectrum-standard-dialog-description-font-family); + font-style: var(--spectrum-standard-dialog-description-font-style); + line-height: var(--mod-standard-dialog-description-line-height, var(--spectrum-standard-dialog-description-line-height)); + color: var(--mod-standard-dialog-description-text-color, var(--spectrum-standard-dialog-description-text-color)); } .spectrum-Dialog-footer { - grid-area: footer; + grid-area: footer / footer / buttonGroup / buttonGroup; + max-inline-size: 100%; + display: flex; + align-items: flex-end; - /* this padding isn't built into the grid because it disappears with this footer */ - padding-block-start: var(--mod-dialog-confirm-footer-padding-top, var(--spectrum-spacing-600)); + /* this recreates padding between the footer content and button group. It should be safe as button group is always end aligned */ + gap: var(--mod-standard-dialog-spacing-footer-to-button-group, var(--spectrum-standard-dialog-spacing-footer-to-button-group)); - display: flex; - flex-wrap: wrap; + /* this padding isn't built into the grid because it disappears with this footer */ + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); outline: none; /* Hide focus outline */ - /* Both selectors are required to override the button + button rule */ - > *, - > .spectrum-Button + .spectrum-Button { - margin-block-end: 0; + .spectrum-Dialog-footer-content { + /* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */ + flex: 1 1 100%; + } + + &:has(.spectrum-Dialog-footer-content), + &:has(.spectrum-Dialog-buttonGroup) { + justify-content: space-between; } } .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; +} - /* this padding isn't built into the grid because it disappears with this buttonGroup */ - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); - display: flex; - justify-content: flex-end; - - /* this padding should be safe as button group is always end aligned */ - padding-inline-start: var(--mod-dialog-confirm-gap-size, var(--spectrum-dialog-confirm-gap-size)); - - &.spectrum-Dialog-buttonGroup--noFooter { - grid-area: footer-start / footer-start / buttonGroup-end / buttonGroup-end; - } +.spectrum-Dialog-buttonGroup--noFooter { + padding-block-start: var(--mod-standard-dialog-spacing-description-to-footer, var(--spectrum-standard-dialog-spacing-description-to-footer)); } -.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { +/* Dismissible Dialog (with close button) */ +.spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, var(--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end)) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: - "hero hero hero hero hero hero hero" - ". . . . . closeButton closeButton" - ". heading header header typeIcon closeButton closeButton" - ". divider divider divider divider divider ." - ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." - ". . . . . . ."; - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - - .spectrum-Dialog-buttonGroup { - display: none; - } + "hero hero hero hero hero hero" + ". . . . closeButton closeButton" + ". heading header header closeButton closeButton" + ". content content content content ." + ". footer footer footer footer ." + ". . . . . ."; .spectrum-Dialog-footer { - grid-area: footer / footer/ buttonGroup / buttonGroup; - color: var(--mod-dialog-confirm-description-text-color, var(--spectrum-dialog-confirm-description-text-color)); + grid-area: footer; } } @@ -216,8 +243,8 @@ align-self: start; justify-self: end; - margin-inline-end: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); - margin-block-start: var(--mod-dialog-confirm-close-button-padding, var(--spectrum-dialog-confirm-close-button-padding)); + margin-block-start: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); + margin-inline-end: var(--mod-standard-dialog-spacing-edge-to-close-button, var(--spectrum-standard-dialog-spacing-edge-to-close-button)); } .spectrum-Dialog--fullscreen { @@ -228,7 +255,6 @@ .spectrum-Dialog--fullscreenTakeover { inline-size: 100%; block-size: 100%; - border-radius: 0; } @@ -237,29 +263,36 @@ max-block-size: none; max-inline-size: none; - &.spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr auto auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + 1fr + auto + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: ". . . . ." ". heading header buttonGroup ." - ". divider divider divider ." ". content content content ." ". . . . ."; } - .spectrum-Dialog-heading { - font-size: var(--mod-dialog-fullscreen-header-text-size, 28px); + .spectrum-Dialog-header { + grid-area: heading; } - .spectrum-Dialog-content { - max-block-size: none; + .spectrum-Dialog-closeButton { + display: none; } - .spectrum-Dialog-footer, - .spectrum-Dialog-buttonGroup { - padding-block-start: 0; + .spectrum-Dialog-content { + max-block-size: none; } .spectrum-Dialog-footer { @@ -268,75 +301,119 @@ .spectrum-Dialog-buttonGroup { grid-area: buttonGroup; - align-self: start; } } @media screen and (width <= 700px) { - .spectrum-Dialog .spectrum-Dialog-grid { + .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + + /* TODO: investigate if we could refactor the grid to make the footer text/checkbox stack on top of the button group */ grid-template-areas: "hero hero hero hero hero hero" ". . . . . ." - ". heading heading heading heading ." + ". heading heading heading heading ." ". header header header header ." - ". divider divider divider divider ." ". content content content content ." ". footer footer buttonGroup buttonGroup ." ". . . . . ."; } - .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid { + .spectrum-Dialog-footer { + flex-direction: column; + } + + .spectrum-Dialog--dismissible .spectrum-Dialog-grid { grid-template-columns: - var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto 1fr auto minmax(0, auto) - minmax(0, var(--mod-dialog-confirm-close-button-size, var(--spectrum-dialog-confirm-close-button-size))) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + 1fr + auto + minmax(0, auto) + minmax(0, calc(var(--spectrum-standard-dialog-spacing-edge-to-content) - var(--spectrum-standard-dialog-spacing-edge-to-close-button))) + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: "hero hero hero hero hero hero hero" ". . . . . closeButton closeButton" - ". heading heading heading heading closeButton closeButton" + ". heading heading heading heading closeButton closeButton" ". header header header header header ." - ". divider divider divider divider divider ." ". content content content content content ." - ". footer footer buttonGroup buttonGroup buttonGroup ." + ". footer footer footer footer footer ." ". . . . . . ."; } .spectrum-Dialog .spectrum-Dialog-header { + display: flex; + flex-direction: column; + align-items: flex-start; justify-content: flex-start; + gap: 0; } .spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover { &.spectrum-Dialog .spectrum-Dialog-grid { display: grid; - grid-template-columns: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) 1fr var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); - grid-template-rows: var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)) auto auto auto 1fr auto var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-columns: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + grid-template-rows: + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + auto + 1fr + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + auto + var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); grid-template-areas: ". . ." ". heading ." ". header ." - ". divider ." ". content ." + ". . ." ". buttonGroup ." ". . ."; } - .spectrum-Dialog-buttonGroup { - padding-block-start: var(--mod-dialog-confirm-buttongroup-padding-top, var(--spectrum-dialog-confirm-buttongroup-padding-top)); + .spectrum-Dialog-header { + margin-inline-end: 0; } .spectrum-Dialog-heading { - font-size: var(--mod-dialog-confirm-title-text-size, var(--spectrum-dialog-confirm-title-text-size)); + margin-inline-end: 0; } } + + .spectrum-Dialog-heading { + margin-block-end: var(--spectrum-standard-dialog-spacing-title-to-description); + } } @media (forced-colors: active) { .spectrum-Dialog { - border: solid; + border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); } } diff --git a/components/dialog/package.json b/components/dialog/package.json index a728d6bd185..4c7e0a411f0 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -63,6 +63,7 @@ "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/typography": "8.1.0", "@spectrum-css/underlay": "6.1.0" }, "keywords": [ diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 45bec9bc1d1..9e6ff4e5c9f 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -8,9 +8,12 @@ import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialo import { Template } from "./template.js"; /** - * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. + * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows. * - * The alert variants that were previously a part of Dialog were moved to their own component, [Alert Dialog](/docs/components-alert-dialog--docs). + * ## Usage with modal component + * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. + * + * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). */ export default { title: "Dialog", @@ -18,6 +21,17 @@ export default { argTypes: { heading: { name: "Heading", + description: "Title for the dialog.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + }, + header: { + name: "Additional header content", + description: "Controls header content.", type: { name: "string" }, table: { type: { summary: "string" }, @@ -28,6 +42,7 @@ export default { content: { table: { disable: true } }, hasFooter: { name: "Has footer", + description: "Adds a footer to the dialog, containing the button group, checkbox, and footer text. Currently only supported in the default layout.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -35,7 +50,28 @@ export default { }, control: "boolean", }, - footer: { table: { disable: true } }, + footer: { + name: "Footer text", + description: "Text content of the dialog footer. Represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox. Currently only supported in the default layout.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { type: "text" }, + if: { arg: "hasFooter", truthy: true, }, + }, + hasCheckbox: { + name: "Has checkbox", + description: "Adds a checkbox to the footer content. Currently only supported in the default layout.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: { type: "boolean" }, + if: { arg: "hasFooter", truthy: true, }, + }, size: size(["s", "m", "l"]), layout: { name: "Layout", @@ -45,6 +81,7 @@ export default { type: { summary: "string" }, category: "Component", defaultValue: { summary: "Default" }, + disable: true, }, options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", @@ -77,33 +114,46 @@ export default { }, control: "boolean", }, - isOpen, + hasHeroImage: { + name: "Has hero image", + type: { name: "boolean" }, + description: "Adds a cover image to the header of a dialog.", + table: { + type: { summary: "boolean" }, + category: "Content", + }, + control: "boolean", + if: { arg: "layout", eq: "default" }, + }, heroImageUrl: { name: "Hero Image", type: { name: "string" }, - description: "Adds a cover image to the header of a dialog.", + description: "Select a cover image for the hero section of a dialog.", + defaultValue: "example-card-portrait.png", table: { type: { summary: "string" }, category: "Content", + defaultValue: { summary: "example-card-portrait.png" }, }, control: { type: "file", accept: ".svg,.png,.jpg,.jpeg,.webc" }, - if: { arg: "layout", eq: "default" }, + if: { arg: "hasHeroImage", truthy: true }, }, }, args: { rootClass: "spectrum-Dialog", hasFooter: true, + footer: "Do not show this message again.", isDismissible: false, - hasDivider: true, isOpen: true, - showModal: true, + showModal: false, size: "m", layout: "default", + hasCheckbox: true, + hasHeroImage: false, }, parameters: { - layout: "fullscreen", actions: { - handles: ["click .spectrum-Dialog button"], + handles: [], }, docs: { story: { @@ -123,16 +173,18 @@ export default { ], }; -const ExampleContent = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor augue mauris augue neque gravida. Libero volutpat sed ornare arcu. Quisque egestas diam in arcu cursus euismod quis viverra. Posuere ac ut consequat semper viverra nam libero justo laoreet. Enim ut tellus elementum sagittis vitae et leo duis ut. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl. Diam volutpat commodo sed egestas egestas. Dolor magna eget est lorem ipsum dolor. Vitae suscipit tellus mauris a diam maecenas sed. Turpis in eu mi bibendum neque egestas congue. Rhoncus est pellentesque elit ullamcorper dignissim cras lobortis."; +const ExampleContent = "Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences."; /** - * The default size for dialog is medium. + * The default size for dialog is medium. The default dialog also has a checkbox in the footer. */ export const Default = DialogGroup.bind({}); Default.args = { heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit", + header: "* Required", + showModal: true, content: [ - (passthroughs, context) => Typography({ + (passthroughs, context) => Typography({ semantics: "body", size: "m", content: [ ExampleContent ], @@ -141,9 +193,13 @@ Default.args = { ], }; +/* TODO: For all dialog stories: the "is-hidden-story" tags in older versions of Storybook. In newer versions, +use "!dev" to remove the stories from the side navigation, reflecting the intended behavior. +Remove "is-hidden-story" in favor of "!dev" tags when possible. +*/ // ********* DOCS ONLY ********* // export const DefaultSmall = Template.bind({}); -DefaultSmall.tags = ["!dev"]; +DefaultSmall.tags = ["is-hidden-story", "!dev"]; DefaultSmall.storyName = "Dialog - small", DefaultSmall.parameters = { chromatic: { disableSnapshot: true }, @@ -154,7 +210,7 @@ DefaultSmall.args = { }; export const DefaultLarge = Template.bind({}); -DefaultLarge.tags = ["!dev"]; +DefaultLarge.tags = ["is-hidden-story", "!dev"]; DefaultLarge.storyName = "Dialog - large", DefaultLarge.parameters = { chromatic: { disableSnapshot: true }, @@ -165,10 +221,10 @@ DefaultLarge.args = { }; /** - * A dialog that can be dismissed without taking an action. Dismissible dialogs should never have buttons. + * A dialog that can be dismissed without taking an action. */ export const Dismissible = Template.bind({}); -Dismissible.tags = ["!dev"]; +Dismissible.tags = ["is-hidden-story", "!dev"]; Dismissible.parameters = { chromatic: { disableSnapshot: true }, }; @@ -177,25 +233,12 @@ Dismissible.args = { isDismissible: true, }; -/** - * Dialogs can forgo the divider if they have content that spans the entire width of the dialog. - */ -export const NoDivider = Template.bind({}); -NoDivider.tags = ["!dev"]; -NoDivider.parameters = { - chromatic: { disableSnapshot: true }, -}; -NoDivider.args = { - ...Default.args, - isDismissible: true, - hasDivider: false, -}; - /** * Dialogs can have a hero or cover image header. */ export const WithHero = Template.bind({}); -WithHero.tags = ["!dev"]; +WithHero.tags = ["is-hidden-story", "!dev"]; +WithHero.storyName = "With hero image"; WithHero.parameters = { docs: { story: { @@ -206,9 +249,7 @@ WithHero.parameters = { }; WithHero.args = { ...Default.args, - isDismissible: true, hasHeroImage: true, - heroImageUrl: "example-card-portrait.png", }; /** @@ -217,59 +258,67 @@ WithHero.args = { export const WithScroll = Template.bind({}); WithScroll.args = { ...Default.args, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], customStyles: { "max-block-size": "400px", } }; -WithScroll.tags = ["!dev"]; +WithScroll.storyName = "Scrollable"; +WithScroll.tags = ["is-hidden-story", "!dev"]; WithScroll.parameters = { chromatic: { disableSnapshot: true }, }; +/* TODO: once this gets rebased with `main`, make sure to use the fullscreen and fullscreenTakeover test templates +that are imported above, but commented out. + */ /** - * A fullscreen dialog will automatically fill almost all of the available screen space. A margin is included around the outside of the dialog. + * The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. */ -export const Fullscreen = DialogFullscreen.bind({}); -Fullscreen.parameters = { - chromatic: { disableSnapshot: true }, - design: { - type: "figma", - url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, -}; +export const Fullscreen = Template.bind({}); Fullscreen.args = { ...Default.args, layout: "fullscreen", + hasFooter: false, +}; +Fullscreen.parameters = { + chromatic: { disableSnapshot: true }, +}; + +// TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter +// arg from the control table for the fullscreen and fullscreenTakeover stories only. Ideally, we +// could have some of our controls display when more than one arg is met to avoid custom argTypes. +// For instance, hasCheckbox would appear when layout: "default", AND footer is truthy. +// https://github.com/storybookjs/storybook/discussions/18542 +Fullscreen.argTypes = { + hasFooter: { table: { disable: true, } }, }; /** - * A fullscreen takeover dialog will fill all of the available screen space. + * The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. */ -export const FullscreenTakeover = DialogFullscreenTakeover.bind({}); +export const FullscreenTakeover = Template.bind({}); +FullscreenTakeover.storyName = "Fullscreen takeover"; FullscreenTakeover.parameters = { chromatic: { disableSnapshot: true }, - design: { - type: "figma", - url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", - }, }; FullscreenTakeover.args = { ...Default.args, layout: "fullscreenTakeover", - content: [ () => Typography({ - semantics: "body", - size: "m", - content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent ], - })], + hasFooter: false, + content: [ ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent, ExampleContent ], +}; +FullscreenTakeover.argTypes = { + hasFooter: { table: { disable: true, } }, }; // ********* VRT ONLY ********* // -export const WithForcedColors = DialogGroup.bind({}); +export const WithForcedColors = Default.bind({}); WithForcedColors.args = Default.args; WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes, + modes: disableDefaultModes, }, }; diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 86d2af5d050..0fe5d0620a8 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -1,7 +1,9 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; +import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js"; import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -14,17 +16,20 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Dialog", isDismissible = false, - hasDivider = true, isOpen = true, showModal = false, hasFooter = false, heading, + header, + footer, + hasCheckbox = false, content = [], footer = [], customClasses = [], id = getRandomId("dialog"), size = "m", layout, + hasHeroImage = false, heroImageUrl, customStyles = {}, } = {}, context = {}) => { @@ -38,10 +43,9 @@ export const Template = ({ <div class=${classMap({ [rootClass]: true, - [`${rootClass}--dismissable`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), + [`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), [`${rootClass}--${layout}`]: typeof layout !== "undefined", - [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", - [`${rootClass}--noDivider`]: !hasDivider, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -49,74 +53,137 @@ export const Template = ({ tabindex="-1" aria-modal="true" style=${ifDefined(styleMap(customStyles))} - > + > <div class="${rootClass}-grid"> - ${when(typeof heroImageUrl !== "undefined", () => + ${when(hasHeroImage, () => html` - <div + <div class="spectrum-Dialog-hero" - style="background-image:url(${heroImageUrl})"> + style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})"> </div> ` )} - ${when(heading, () => html` - <h1 class="${rootClass}-heading">${heading}</h1> - `)} - ${when(hasDivider, () => - Divider({ - horizontal: true, - customClasses: [`${rootClass}-divider`], - }, context), + <div class="${rootClass}-header"> + ${when(heading, () => html` + <h1 class="${rootClass}-heading">${heading}</h1> + `)} + ${when(header, () => html` + <span class="${rootClass}-header-content"> + ${Typography({ + semantics: "body", + size: "m", + // @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here? + content: [ header ] + }, context)} + </span> + `, )} - <section class="${rootClass}-content"> - ${renderContent(content)} - </section> - ${when(hasFooter, () => { - return html` - <footer class="${rootClass}-footer" style=${styleMap({ - "justify-content": "flex-end", - })}> - ${when(typeof footer !== "undefined" && Array.isArray(footer) && footer.length > 0, - () => renderContent(footer), - )} - ${when(!isDismissible, () => html ` - ${ButtonGroup({ - items: [ - { - label: "Cancel", - treatment: "outline", - variant: "secondary", - }, - { - label: "Save", - treatment: "fill", - variant: "accent" - }, - ], - }, context)} - ` - )} - </footer> - `; - })} - ${when(isDismissible && layout !== "fullscreen" && layout !== "fullscreenTakeover", () => + </div> + <section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section> + ${when(isDismissible, () => CloseButton({ customClasses: [`${rootClass}-closeButton`], onclick: toggleOpen, }, context) )} + ${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html` + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + `)} + ${when(hasFooter, () => html` + <footer class="${rootClass}-footer"> + ${when(typeof footer !== "undefined", () => html` + <div class="${rootClass}-footer-content"> + ${when(hasCheckbox, () => html` + ${Checkbox({ + label: footer, + }, context)} + `, + () => + Typography({ + semantics: "body", + size: "m", + content: [ footer ] + }, context) + )} + </div> + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + `, + () => html` + <div class="${rootClass}-noFooter"></div> + <div class="${rootClass}-buttonGroup"> + ${ButtonGroup({ + items: [ + { + label: "Cancel", + treatment: "outline", + variant: "secondary", + }, + { + label: "Save", + treatment: "fill", + variant: "accent" + }, + ], + onclick: () => { + updateArgs(toggleOpen); + }, + }, context)} + </div> + ` + )} + </footer> + `, + () => html` + <div class="${rootClass}-noFooter"></div> + `)} </div> </div> `; - if (showModal) { - return html` - ${Modal({ - isOpen, - content: [ () => Dialog], - variant: layout, - }, context)} - `; + return Modal({ + isOpen, + content: Dialog, + variant: layout, + customStyles: { + "--mod-modal-background-color": "transparent" + }, + }, context); } else { return Dialog; diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 155ef5729ee..ded6af72a96 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -15,24 +15,24 @@ "--mod-modal-background-color", "--mod-modal-confirm-border-radius", "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-distance", "--mod-modal-confirm-entry-animation-duration", "--mod-modal-confirm-exit-animation-delay", "--mod-modal-confirm-exit-animation-duration", - "--mod-modal-fullscreen-margin", "--mod-modal-max-height", "--mod-modal-max-width", - "--mod-modal-transition-animation-duration", - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened" + "--mod-modal-transition-animation-duration" ], "component": [ "--spectrum-modal-background-color", + "--spectrum-modal-confirm-border-radius", "--spectrum-modal-confirm-entry-animation-delay", "--spectrum-modal-confirm-entry-animation-duration", "--spectrum-modal-confirm-exit-animation-delay", "--spectrum-modal-confirm-exit-animation-duration", - "--spectrum-modal-fullscreen-margin" + "--spectrum-modal-fullscreen-margin", + "--spectrum-modal-max-height", + "--spectrum-modal-max-width", + "--spectrum-modal-transition-animation-duration" ], "global": [ "--spectrum-animation-duration-0", @@ -41,10 +41,10 @@ "--spectrum-animation-duration-500", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-animation-linear", "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100", - "--spectrum-dialog-confirm-entry-animation-distance" + "--spectrum-corner-radius-extra-large-default", + "--spectrum-dialog-confirm-entry-animation-distance", + "--spectrum-gray-75" ], "system-theme": [], "passthroughs": [], diff --git a/components/modal/index.css b/components/modal/index.css index dd589b0018b..a9b181aff42 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -11,21 +11,24 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/overlay.css"; - .spectrum-Modal { --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ - --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); + --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)); - /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ - --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); + --spectrum-modal-confirm-exit-animation-duration: var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100)); --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px); + --spectrum-modal-fullscreen-margin: 32px; + --spectrum-modal-max-height: var(--mod-modal-max-height, 90vh); + --spectrum-modal-max-width: var(--mod-modal-max-width, 90%); + + --spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75)); + --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); + + --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); } /* Used to position the modal */ @@ -47,6 +50,9 @@ * We use the stretch value to counteract this where supported. */ block-size: 100vh; + /* stylelint-disable-next-line value-no-vendor-prefix */ + block-size: -moz-available; + /* stylelint-disable-next-line value-no-vendor-prefix */ block-size: -webkit-fill-available; /* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */ @@ -61,7 +67,7 @@ z-index: 2; /* Be invisible by default */ - transition: visibility 0ms linear var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); + transition: visibility 0ms linear var(--spectrum-modal-transition-animation-duration); &.is-open { visibility: visible; @@ -73,17 +79,17 @@ opacity: 0; /* Start offset by the animation distance -- @note this is using the global dialog token */ - transform: translateY(var(--mod-modal-confirm-entry-animation-distance, var(--spectrum-dialog-confirm-entry-animation-distance))); + transform: translateY(var(--spectrum-dialog-confirm-entry-animation-distance)); /* Appear above underlay */ z-index: 2; /* Don't be bigger than the screen */ - max-block-size: var(--mod-modal-max-height, 90vh); - max-inline-size: var(--mod-modal-max-width, 90%); + max-block-size: var(--spectrum-modal-max-height); + max-inline-size: var(--spectrum-modal-max-width); - background: var(--mod-modal-background-color, var(--spectrum-modal-background-color)); - border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-100)); + background: var(--spectrum-modal-background-color); + border-radius: var(--spectrum-modal-confirm-border-radius); overflow: hidden; outline: none; /* Firefox shows outline */ pointer-events: auto; @@ -91,8 +97,8 @@ /* Exit animations */ transition: opacity var(--spectrum-modal-confirm-exit-animation-duration) var(--spectrum-animation-ease-in) var(--spectrum-modal-confirm-exit-animation-delay), - visibility var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), - transform var(--spectrum-animation-duration-0) var(--spectrum-animation-linear) calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); + visibility 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)), + transform 0ms linear calc(var(--spectrum-modal-confirm-exit-animation-delay) + var(--spectrum-modal-confirm-exit-animation-duration)); &.is-open { pointer-events: auto; diff --git a/components/modal/package.json b/components/modal/package.json index d9f24e65885..3733ac63812 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -28,7 +28,6 @@ "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 951ee330822..e480e8bdc24 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -104,6 +104,8 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; --spectrum-treeview-item-indentation-large: 25px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 3b090a3a0bb..144ab07fa08 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -102,6 +102,8 @@ --spectrum-slider-ramp-track-height: 16px; --spectrum-slider-tick-mark-height: 10px; + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); + --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); diff --git a/yarn.lock b/yarn.lock index e2e077b90bc..6101d98618c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4499,6 +4499,7 @@ __metadata: "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" + "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/button": ">=14.0.0 <15.0.0" @@ -4851,7 +4852,6 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: - "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" From 4fb30b35aaae5dfe4b76102a15b748823e99d1c0 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 19 Dec 2024 15:28:30 -0500 Subject: [PATCH 055/103] feat(alertbanner): migrate to spectrum 2 (#2652) * feat(alertbanner): start migration to spectrum two Migrates the component to spectrum two. - Theme files are removed, and their custom properties integrated into the main index.css. - Renames misspelled mod custom property (noted in docs) - Simplifies background color styles by changing a single custom property per variant, as done on other components. * feat(alertbanner): spectrum 2 spacing and mod name cleanup Adjust some spacings to match the Spectrum 2 spec spacing. And renames some mods so they are more consistent with current naming conventions, and their purpose is more clear. === Update spacing to match the Spectrum 2 spec === One issue with the S1 version was that there was too much space between the text and the button, when the button wrapped to the next line. And there was a different token defined for the space from the bottom edge to the text, and vertically between the button and the text. This helps resolve this by moving some of the spacing to padding on the AlertBanner-body, and subtracting this value from some of the other custom properties. Along with using both column-gap and row-gap properties. === adjust storybook template spacing and decorator === Improves spacing in Storybook template, especially the Chromatic only template. Decorator and wrapper styles are modeled after those used in Action button, so they look more similar. Previously the layout was a little cramped and the "detail" elements were missing their margins because they were display inline. * docs(alertbanner): custom storybook docs page and template updates Creates a custom MDX docs page in Storybook for the Alert banner component. And reworks the stories and chromatic-only templates a little to facilitate and increase coverage. Includes Storybook VRT coverage for the max width changes in PR #2762 . Tests the display of the alert banner when in a container larger than and smaller than its max-inline-size. * chore(alertbanner): linter updates and update mods - Add stylelint disable line comments for some false positives caught by the linter. - Re-generate mods file * docs(alertbanner): use stories and template from main Use the stories and updated template from main, with a few things left out that are not yet available in the spectrum-two branch. * feat(alertbanner): support no close button or no action button Adds spacing to the end of the alert banner when the close button is not displayed, or both the close button and action button are not displayed. These are allowed combinations of options. * feat(alertbanner): use spec defined line-height token * feat(alertbanner): add font-family token and mod * feat(alertbanner): add cjk line-height * feat(alertbanner): remove unnecessary styles for end element Remove styles for .spectrum-AlertBanner-end, which were no longer doing anything after the removal of the divider. --- .changeset/tame-bobcats-beam.md | 19 ++++ components/alertbanner/dist/metadata.json | 62 +++++++----- components/alertbanner/index.css | 112 ++++++++++++---------- 3 files changed, 118 insertions(+), 75 deletions(-) create mode 100644 .changeset/tame-bobcats-beam.md diff --git a/.changeset/tame-bobcats-beam.md b/.changeset/tame-bobcats-beam.md new file mode 100644 index 00000000000..a45cb615339 --- /dev/null +++ b/.changeset/tame-bobcats-beam.md @@ -0,0 +1,19 @@ +--- +"@spectrum-css/alertbanner": major +--- + +#### Spectrum 2 migration + +Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. + +The following changes have been made to the mod custom properties: + +- `--mod-alert-banner-size` was renamed to `--mod-alert-banner-inline-size` +- `--mod-alert-banner-neutral-background` was previously misspelled. The mod `--mod-alert-banner-background` was also added, which will take precendence over the variant background mods. +- `--mod-alert-banner-top-text` was renamed to `--mod-alert-banner-top-to-text` +- `--mod-alert-banner-top-icon` was renamed to `--mod-alert-banner-top-to-icon` +- `--mod-alert-banner-bottom-text` was renamed to `--mod-alert-banner-bottom-to-text` +- `--mod-alert-banner-start-edge` was renamed to `--mod-alert-banner-inline-start-to-content` +- `--mod-alert-banner-edge-to-button` was renamed to `--mod-alert-banner-block-edge-to-button` +- The spacing on either side of the close button is now controlled by two separate mods; `--mod-alert-banner-close-button-to-inline-end` and `--mod-alert-banner-close-button-to-content`. The previous `--mod-alert-banner-close-button-spacing` has been removed. +- A new mod `--mod-alert-banner-inline-end-to-content` was added, which handles the inline end spacing when the alert banner does not have a close button. Or when there is neither a close button or an action button. diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 213feb52411..03ebcd73083 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -6,65 +6,80 @@ ".spectrum-AlertBanner--negative", ".spectrum-AlertBanner-body", ".spectrum-AlertBanner-content", - ".spectrum-AlertBanner-end", ".spectrum-AlertBanner-icon", ".spectrum-AlertBanner-text", - ".spectrum-AlertBanner.is-open" + ".spectrum-AlertBanner.is-open", + ".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body", + ".spectrum-AlertBanner:lang(ja)", + ".spectrum-AlertBanner:lang(ko)", + ".spectrum-AlertBanner:lang(zh)" ], "modifiers": [ - "--mod-alert-banner-bottom-text", - "--mod-alert-banner-close-button-spacing", - "--mod-alert-banner-edge-to-button", - "--mod-alert-banner-edge-to-divider", + "--mod-alert-banner-background", + "--mod-alert-banner-block-edge-to-button", + "--mod-alert-banner-bottom-to-text", + "--mod-alert-banner-close-button-to-content", + "--mod-alert-banner-close-button-to-inline-end", "--mod-alert-banner-font-color", + "--mod-alert-banner-font-family", "--mod-alert-banner-font-size", "--mod-alert-banner-icon-size", "--mod-alert-banner-icon-to-text", "--mod-alert-banner-informative-background", + "--mod-alert-banner-inline-end-to-content", + "--mod-alert-banner-inline-size", + "--mod-alert-banner-inline-start-to-content", + "--mod-alert-banner-line-height", "--mod-alert-banner-max-inline-size", "--mod-alert-banner-min-height", "--mod-alert-banner-negative-background", "--mod-alert-banner-neutral-background", - "--mod-alert-banner-size", - "--mod-alert-banner-start-edge", + "--mod-alert-banner-text-margin-block-end", + "--mod-alert-banner-text-margin-block-start", "--mod-alert-banner-text-to-button-horizontal", "--mod-alert-banner-text-to-button-vertical", - "--mod-alert-banner-text-to-divider", - "--mod-alert-banner-top-icon", - "--mod-alert-banner-top-text" + "--mod-alert-banner-top-to-close-button", + "--mod-alert-banner-top-to-icon", + "--mod-alert-banner-top-to-text" ], "component": [ - "--spectrum-alert-banner-bottom-text", + "--spectrum-alert-banner-background", + "--spectrum-alert-banner-block-edge-to-button", "--spectrum-alert-banner-bottom-to-text", "--spectrum-alert-banner-close-button-spacing", - "--spectrum-alert-banner-edge-to-button", - "--spectrum-alert-banner-edge-to-divider", + "--spectrum-alert-banner-close-button-to-content", + "--spectrum-alert-banner-close-button-to-inline-end", "--spectrum-alert-banner-font-color", + "--spectrum-alert-banner-font-family", "--spectrum-alert-banner-font-size", "--spectrum-alert-banner-icon-size", "--spectrum-alert-banner-icon-to-text", - "--spectrum-alert-banner-informative-background", + "--spectrum-alert-banner-inline-end-to-content", + "--spectrum-alert-banner-inline-size", + "--spectrum-alert-banner-inline-start-to-content", + "--spectrum-alert-banner-line-height", "--spectrum-alert-banner-max-inline-size", "--spectrum-alert-banner-min-height", "--spectrum-alert-banner-minimum-height", - "--spectrum-alert-banner-negative-background", "--spectrum-alert-banner-neutral-background", - "--spectrum-alert-banner-size", - "--spectrum-alert-banner-start-edge", + "--spectrum-alert-banner-text-margin-block-end", + "--spectrum-alert-banner-text-margin-block-start", "--spectrum-alert-banner-text-to-button-horizontal", "--spectrum-alert-banner-text-to-button-vertical", - "--spectrum-alert-banner-top-icon", - "--spectrum-alert-banner-top-text", "--spectrum-alert-banner-top-to-text", "--spectrum-alert-banner-top-to-workflow-icon", "--spectrum-alert-banner-width" ], "global": [ "--spectrum-border-width-100", + "--spectrum-cjk-line-height-100", "--spectrum-font-size-100", "--spectrum-informative-background-color-default", + "--spectrum-line-height-100", "--spectrum-negative-background-color-default", "--spectrum-neutral-subdued-background-color-default", + "--spectrum-sans-font-family-stack", + "--spectrum-spacing-200", "--spectrum-spacing-300", "--spectrum-text-to-visual-300", "--spectrum-white", @@ -72,15 +87,10 @@ ], "system-theme": [], "passthroughs": [ - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", "--mod-closebutton-align-self", "--mod-closebutton-margin-inline", "--mod-closebutton-margin-top", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" + "--mod-icon-size" ], "high-contrast": [ "--highcontrast-alert-banner-border-color", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 57696101f1f..6659d42cbd1 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -16,49 +16,62 @@ --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); - --spectrum-alert-banner-size: auto; + --spectrum-alert-banner-inline-size: auto; + --spectrum-alert-banner-font-size: var(--spectrum-font-size-100); - --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-alert-banner-line-height: var(--spectrum-line-height-100); + --spectrum-alert-banner-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ /* spacing */ --spectrum-alert-banner-icon-to-text: var(--spectrum-text-to-visual-300); - --spectrum-alert-banner-start-edge: var(--spectrum-spacing-300); + --spectrum-alert-banner-inline-start-to-content: var(--spectrum-spacing-300); + --spectrum-alert-banner-inline-end-to-content: var(--spectrum-spacing-300); --spectrum-alert-banner-text-to-button-horizontal: var(--spectrum-spacing-300); - --spectrum-alert-banner-top-icon: var(--spectrum-alert-banner-top-to-workflow-icon); - --spectrum-alert-banner-top-text: var(--spectrum-alert-banner-top-to-text); - --spectrum-alert-banner-bottom-text: var(--spectrum-alert-banner-bottom-to-text); + --spectrum-alert-banner-block-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-close-button-to-content: var(--spectrum-spacing-300); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ + --spectrum-alert-banner-close-button-to-inline-end: var(--spectrum-alert-banner-close-button-spacing); /* stylelint-disable-line spectrum-tools/no-unused-custom-properties -- used in passthrough */ + + /* Top and bottom margins for AlertBanner-text. Subtracts the vertical spacing that is already included in the + padding-block of its parent AlertBanner-body element. */ + --spectrum-alert-banner-text-margin-block-start: max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); + --spectrum-alert-banner-text-margin-block-end: max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); /* colors */ - --spectrum-alert-banner-informative-background: var(--spectrum-informative-background-color-default); - --spectrum-alert-banner-negative-background: var(--spectrum-negative-background-color-default); + --spectrum-alert-banner-background: var(--mod-alert-banner-neutral-background, var(--spectrum-neutral-subdued-background-color-default)); --spectrum-alert-banner-font-color: var(--spectrum-white); - /* @passthrough start -- settings for nested Divider */ - --mod-divider-vertical-margin: var(--mod-alert-banner-edge-to-divider, var(--spectrum-alert-banner-edge-to-divider)); - --mod-divider-vertical-height: auto; - --mod-divider-vertical-align: stretch; - /* @passthrough end */ - - /* @passthrough start -- settings for nested Button */ - --mod-button-margin-block: var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button)); - --mod-button-margin-right: var(--mod-alert-banner-text-to-divider, var(--spectrum-spacing-300)); - --mod-button-margin-left: auto; - /* @passthrough end */ - - /* @passthrough start -- settings for nested CloseButton */ - --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); - --mod-closebutton-margin-top: var(--mod-alert-banner-close-button-spacing, var(--spectrum-alert-banner-close-button-spacing)); + /* @passthrough -- settings for nested Close button */ + --mod-closebutton-margin-inline: var(--mod-alert-banner-close-button-to-content, var(--spectrum-alert-banner-close-button-to-content)) var(--mod-alert-banner-close-button-to-inline-end, var(--spectrum-alert-banner-close-button-to-inline-end)); + --mod-closebutton-margin-top: var(--mod-alert-banner-top-to-close-button, var(--spectrum-alert-banner-block-edge-to-button)); --mod-closebutton-align-self: flex-start; - /* @passthrough end */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-alert-banner-line-height: var(--spectrum-cjk-line-height-100); + } +} + +.spectrum-AlertBanner--info { + --spectrum-alert-banner-background: var(--mod-alert-banner-informative-background, var(--spectrum-informative-background-color-default)); +} + +.spectrum-AlertBanner--negative { + --spectrum-alert-banner-background: var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default)); +} + +.spectrum-AlertBanner { display: none; justify-content: space-between; - inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size)); + inline-size: var(--mod-alert-banner-inline-size, var(--spectrum-alert-banner-inline-size)); max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size)); min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height)); font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size)); + font-family: var(--mod-alert-banner-font-family, var(--spectrum-alert-banner-font-family)); + line-height: var(--mod-alert-banner-line-height, var(--spectrum-alert-banner-line-height)); color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color)); - background-color: var(--mod-alert-banner-neutral-background, var(--spectrum-alert-banner-neutral-background)); + background: var(--mod-alert-banner-background, var(--spectrum-alert-banner-background)); border: var(--highcontrast-alert-banner-border-width, 0) solid var(--highcontrast-alert-banner-border-color, transparent); &.is-open { @@ -66,46 +79,47 @@ } } -.spectrum-AlertBanner--info { - background-color: var(--mod-alert-banner-informative-background, var(--spectrum-alert-banner-informative-background)); -} - -.spectrum-AlertBanner--negative { - background-color: var(--mod-alert-banner-negative-background, var(--spectrum-alert-banner-negative-background)); -} - .spectrum-AlertBanner-body { inline-size: 100%; display: flex; - - /* --mod-* for alert-banner-text-to-button-vertical will only accept values larger than alert-banner-edge-to-bottom, as gap only recognizes positive values */ - gap: max(calc(var(--mod-alert-banner-text-to-button-vertical, var(--spectrum-alert-banner-text-to-button-vertical)) - var(--mod-alert-banner-edge-to-button, var(--spectrum-alert-banner-edge-to-button))), 0px); flex-wrap: wrap; align-items: center; - margin-inline-start: var(--mod-alert-banner-start-edge, var(--spectrum-alert-banner-start-edge)); -} + justify-content: flex-end; -.spectrum-AlertBanner-content { - display: flex; + /* Inline spacing between text and button, only when the button has not wrapped to the next line. */ + column-gap: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + + /* Block spacing between text and button, when the button has wrapped to the next line. Takes into + account the existing margins on the text. */ + row-gap: max(var(--mod-alert-banner-text-to-button-vertical, 0px), var(--spectrum-alert-banner-text-to-button-vertical) - var(--spectrum-alert-banner-text-margin-block-end)); + + padding-block: var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)); + margin-inline-start: var(--mod-alert-banner-inline-start-to-content, var(--spectrum-alert-banner-inline-start-to-content)); + margin-inline-end: var(--mod-alert-banner-inline-end-to-content, var(--spectrum-alert-banner-inline-end-to-content)); + + /* When dismissible, this spacing is handled by the margin-inline-start on the close button instead. */ + .spectrum-AlertBanner:has(.spectrum-CloseButton) & { + margin-inline-end: 0; + } } -.spectrum-AlertBanner-end { +.spectrum-AlertBanner-content { display: flex; - align-items: center; + flex-grow: 1; } .spectrum-AlertBanner-icon { - inline-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - block-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); - margin-block-start: var(--mod-alert-banner-top-icon, var(--spectrum-alert-banner-top-icon)); + /* @passthrough -- icon-size */ + --mod-icon-size: var(--mod-alert-banner-icon-size, var(--spectrum-alert-banner-icon-size)); + + margin-block-start: calc(var(--mod-alert-banner-top-to-icon, var(--spectrum-alert-banner-top-to-workflow-icon)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button))); margin-inline-end: var(--mod-alert-banner-icon-to-text, var(--spectrum-alert-banner-icon-to-text)); flex-shrink: 0; } .spectrum-AlertBanner-text { - margin-block-start: var(--mod-alert-banner-top-text, var(--spectrum-alert-banner-top-text)); - margin-block-end: var(--mod-alert-banner-bottom-text, var(--spectrum-alert-banner-bottom-text)); - margin-inline-end: var(--mod-alert-banner-text-to-button-horizontal, var(--spectrum-alert-banner-text-to-button-horizontal)); + margin-block-start: var(--mod-alert-banner-text-margin-block-start, var(--spectrum-alert-banner-text-margin-block-start)); + margin-block-end: var(--mod-alert-banner-text-margin-block-end, var(--spectrum-alert-banner-text-margin-block-end)); } @media (forced-colors: active) { From f2f626b293e9547a9283a58a7ce3277871b39f82 Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Tue, 24 Dec 2024 14:36:39 -0500 Subject: [PATCH 056/103] chore(storybook): standardize down-state decorator --- .storybook/decorators/down-state.js | 55 ++++++++++++++------- components/button/stories/button.stories.js | 8 ++- components/picker/stories/picker.stories.js | 5 +- 3 files changed, 49 insertions(+), 19 deletions(-) diff --git a/.storybook/decorators/down-state.js b/.storybook/decorators/down-state.js index 616852d34ce..31ba5ed5133 100644 --- a/.storybook/decorators/down-state.js +++ b/.storybook/decorators/down-state.js @@ -1,19 +1,40 @@ -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`); - }); - }; +import { makeDecorator, useEffect } from "@storybook/preview-api"; +import { fetchContainers } from "./helpers.js"; - document.addEventListener("DOMContentLoaded", () => { - // Wait to make sure the story is fully rendered (otherwise width/height can be wrong) - setTimeout(() => { - captureDownStateDimensions(); - }, 100); - }); +export const withDownStateDimensionCapture = makeDecorator({ + name: "withDownStateDimensionCapture", + parameterName: "downState", + wrapper: (StoryFn, context) => { + const { args = {}, parameters = {}, viewMode, id } = context; + + /* Selectors are defined in the downState parameter */ + const { + // Fall back to the rootClass if no selectors are provided + selectors = args.rootClass ? [ args.rootClass ] : [] + } = parameters.downState ?? {}; - return Story(context); -}; + /** + * This effect will run after the component is rendered and will capture the dimensions of the + * components that are specified in the selectors array. It will then set the custom properties + * --spectrum-downstate-width and --spectrum-downstate-height on the component to the width and + * height of the component respectively. This will allow the downstate to be calculated correctly + * in the CSS. + */ + useEffect(() => { + if (selectors.length === 0) return; + + for (const container of fetchContainers(id, viewMode === "docs")) { + for (const selector of selectors) { + const components = [...container.querySelectorAll(selector)]; + for (const component of components) { + const { width, height } = component.getBoundingClientRect(); + component.style.setProperty("--spectrum-downstate-width", `${width}px`); + component.style.setProperty("--spectrum-downstate-height", `${height}px`); + } + } + } + }, [selectors]); + + return StoryFn(context); + }, +}); diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 829e5c16819..37b258ee3b6 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -89,11 +89,17 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=707-2774", }, + html: { + root: "#render-root" + }, + downState: { + selectors: [".spectrum-Button:not(:disabled)"], + } packageJson, metadata, }, decorators: [ - withDownStateDimensionCapture('.spectrum-Button:not(:disabled)') + withDownStateDimensionCapture, ], tags: ["!autodocs"], }; diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index e1bab069825..db7edc8d806 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -142,9 +142,12 @@ export default { }, packageJson, metadata, + downState: { + selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"], + }, }, decorators: [ - withDownStateDimensionCapture(".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"), + withDownStateDimensionCapture, ], }; From 487ace563f2a3e5d60dc0d882d66ed0c893d8982 Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Tue, 24 Dec 2024 15:47:10 -0500 Subject: [PATCH 057/103] build: remove theme processing, site package; add reporter --- .github/workflows/lint.yml | 2 +- .storybook/guides/develop.mdx | 7 +- .storybook/manager.js | 3 - .storybook/modes/index.js | 7 +- components/accordion/dist/metadata.json | 1 - components/actionbar/dist/metadata.json | 1 - components/actionbutton/dist/metadata.json | 93 ++- components/actionbutton/index.css | 536 ++++++++++-------- components/actiongroup/dist/metadata.json | 1 - components/alertbanner/dist/metadata.json | 1 - components/alertdialog/dist/metadata.json | 1 - components/asset/dist/metadata.json | 1 - components/assetcard/dist/metadata.json | 1 - components/assetlist/dist/metadata.json | 1 - components/avatar/dist/metadata.json | 1 - components/badge/dist/metadata.json | 1 - components/breadcrumb/dist/metadata.json | 1 - components/button/dist/metadata.json | 1 - components/button/stories/button.stories.js | 2 +- components/buttongroup/dist/metadata.json | 1 - components/calendar/dist/metadata.json | 1 - components/card/dist/metadata.json | 1 - components/checkbox/dist/metadata.json | 1 - components/clearbutton/dist/metadata.json | 1 - components/closebutton/dist/metadata.json | 1 - components/coachindicator/dist/metadata.json | 1 - components/coachmark/dist/metadata.json | 1 - components/colorarea/dist/metadata.json | 1 - components/colorhandle/dist/metadata.json | 1 - components/colorloupe/dist/metadata.json | 1 - components/colorslider/dist/metadata.json | 1 - components/colorwheel/dist/metadata.json | 1 - components/combobox/dist/metadata.json | 1 - components/contextualhelp/dist/metadata.json | 1 - components/datepicker/dist/metadata.json | 1 - components/dial/dist/metadata.json | 1 - components/dialog/dist/metadata.json | 1 - components/dialog/stories/dialog.stories.js | 26 +- components/dialog/stories/template.js | 29 +- components/divider/dist/metadata.json | 1 - components/dropindicator/dist/metadata.json | 1 - components/dropzone/dist/metadata.json | 1 - components/fieldgroup/dist/metadata.json | 1 - components/fieldlabel/dist/metadata.json | 1 - .../floatingactionbutton/dist/metadata.json | 1 - components/form/dist/metadata.json | 1 - components/form/stories/template.js | 3 + components/helptext/dist/metadata.json | 1 - components/icon/dist/metadata.json | 1 - .../illustratedmessage/dist/metadata.json | 1 - components/infieldbutton/dist/metadata.json | 1 - components/inlinealert/dist/metadata.json | 1 - components/link/dist/metadata.json | 1 - components/logicbutton/dist/metadata.json | 1 - components/menu/dist/metadata.json | 1 - components/meter/dist/metadata.json | 5 +- components/meter/index.css | 12 +- components/miller/dist/metadata.json | 1 - components/modal/dist/metadata.json | 1 - .../opacitycheckerboard/dist/metadata.json | 1 - components/page/dist/metadata.json | 1 - components/page/index.css | 7 +- components/pagination/dist/metadata.json | 1 - components/picker/dist/metadata.json | 1 - components/pickerbutton/dist/metadata.json | 1 - components/popover/dist/metadata.json | 1 - components/progressbar/dist/metadata.json | 1 - components/progresscircle/dist/metadata.json | 1 - components/radio/dist/metadata.json | 1 - components/rating/dist/metadata.json | 1 - components/search/dist/metadata.json | 1 - components/sidenav/dist/metadata.json | 1 - components/slider/dist/metadata.json | 1 - components/splitview/dist/metadata.json | 1 - components/statuslight/dist/metadata.json | 1 - components/steplist/dist/metadata.json | 1 - components/stepper/dist/metadata.json | 1 - components/swatch/dist/metadata.json | 6 +- components/swatch/index.css | 145 ++--- components/swatchgroup/dist/metadata.json | 1 - components/switch/dist/metadata.json | 1 - components/table/dist/metadata.json | 1 - components/tabs/dist/metadata.json | 1 - components/tag/dist/metadata.json | 1 - components/taggroup/dist/metadata.json | 1 - components/textfield/dist/metadata.json | 1 - components/thumbnail/dist/metadata.json | 1 - components/toast/dist/metadata.json | 1 - components/tooltip/dist/metadata.json | 1 - components/tray/dist/metadata.json | 1 - components/treeview/dist/metadata.json | 1 - components/typography/dist/metadata.json | 1 - components/underlay/dist/metadata.json | 1 - components/well/dist/metadata.json | 1 - plugins/postcss-rgb-mapping/index.js | 2 +- .../stylelint-theme-alignment/CHANGELOG.md | 24 - plugins/stylelint-theme-alignment/README.md | 78 --- plugins/stylelint-theme-alignment/index.js | 158 ------ .../stylelint-theme-alignment/package.json | 44 -- .../stylelint-theme-alignment/project.json | 13 - schemas/metadata.schema.json | 113 ++-- stylelint.config.js | 2 - tasks/component-builder.js | 58 +- tasks/component-reporter.js | 2 - tokens/custom/global-vars.css | 4 +- tokens/postcss.config.js | 27 +- tokens/project.json | 3 +- tokens/tasks/token-rollup.js | 78 ++- tools/generator/plopfile.js | 7 +- tools/generator/templates/package.json.hbs | 82 ++- yarn.lock | 35 +- 111 files changed, 659 insertions(+), 1033 deletions(-) delete mode 100644 plugins/stylelint-theme-alignment/CHANGELOG.md delete mode 100644 plugins/stylelint-theme-alignment/README.md delete mode 100644 plugins/stylelint-theme-alignment/index.js delete mode 100644 plugins/stylelint-theme-alignment/package.json delete mode 100644 plugins/stylelint-theme-alignment/project.json diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 0f0fd5272ce..b52638ee840 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -90,7 +90,7 @@ jobs: filter_mode: diff_context level: error reporter: github-pr-review - # stylelint_input: "components/*/index.css + # stylelint_input: "components/*/index.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" packages: 'stylelint-header stylelint-config-standard stylelint-selector-bem-pattern stylelint-order stylelint-use-logical' diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx index 3658ceb3160..24287b9f371 100644 --- a/.storybook/guides/develop.mdx +++ b/.storybook/guides/develop.mdx @@ -35,19 +35,18 @@ Each component has the following files: - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component. - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings. - `stories/*.test.js` - The testing grid for visual regression testing in Chromatic. -- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page. Each component outputs the following assets to `dist`: -- `index.css`: This asset includes the base CSS. +- `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales. ## Adding a new component 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component. 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`. 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing. -4. The `index.css` file is where all of your styles will be added. -5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file. +4. The `index.css` file is where all of your styles should be added. +5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. diff --git a/.storybook/manager.js b/.storybook/manager.js index 2c2085aa240..53b86a56602 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -64,8 +64,5 @@ addons.setConfig({ }), sidebar: { showRoots: false, - filters: { - patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)), - }, }, }); diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index 9e16fbf0ec9..b4df304251d 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -12,13 +12,12 @@ */ const modes = { - Light: { + "Light | LTR": { color: "light", + textDirection: "ltr", }, - Dark: { + "Dark | RTL": { color: "dark", - }, - RTL: { textDirection: "rtl", }, }; diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 94f78a21d2b..bc3c102ec9b 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -198,7 +198,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 60d9ccb3336..da9142c6fc3 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -88,7 +88,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index a3236639598..06487511be1 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -14,15 +14,25 @@ ".spectrum-ActionButton-label:empty", ".spectrum-ActionButton.is-disabled", ".spectrum-ActionButton.is-selected", + ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)", + ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", + ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton::-moz-focus-inner", ".spectrum-ActionButton:active", ".spectrum-ActionButton:after", @@ -38,18 +48,10 @@ "modifiers": [ "--mod-actionbutton-animation-duration", "--mod-actionbutton-background-color-default", - "--mod-actionbutton-background-color-default-selected", - "--mod-actionbutton-background-color-default-selected-emphasized", "--mod-actionbutton-background-color-disabled", "--mod-actionbutton-background-color-down", - "--mod-actionbutton-background-color-down-selected", - "--mod-actionbutton-background-color-down-selected-emphasized", "--mod-actionbutton-background-color-focus", - "--mod-actionbutton-background-color-focus-selected", - "--mod-actionbutton-background-color-focus-selected-emphasized", "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-background-color-hover-selected", - "--mod-actionbutton-background-color-hover-selected-emphasized", "--mod-actionbutton-border-color-default", "--mod-actionbutton-border-color-disabled", "--mod-actionbutton-border-color-down", @@ -58,18 +60,10 @@ "--mod-actionbutton-border-radius", "--mod-actionbutton-border-width", "--mod-actionbutton-content-color-default", - "--mod-actionbutton-content-color-default-selected", - "--mod-actionbutton-content-color-default-selected-emphasized", "--mod-actionbutton-content-color-disabled", "--mod-actionbutton-content-color-down", - "--mod-actionbutton-content-color-down-selected", - "--mod-actionbutton-content-color-down-selected-emphasized", "--mod-actionbutton-content-color-focus", - "--mod-actionbutton-content-color-focus-selected", - "--mod-actionbutton-content-color-focus-selected-emphasized", "--mod-actionbutton-content-color-hover", - "--mod-actionbutton-content-color-hover-selected", - "--mod-actionbutton-content-color-hover-selected-emphasized", "--mod-actionbutton-edge-to-hold-icon", "--mod-actionbutton-edge-to-text", "--mod-actionbutton-edge-to-visual", @@ -77,14 +71,13 @@ "--mod-actionbutton-focus-indicator-border-radius", "--mod-actionbutton-focus-indicator-color", "--mod-actionbutton-focus-indicator-gap", - "--mod-actionbutton-focus-indicator-thickness", - "--mod-actionbutton-font-size", "--mod-actionbutton-height", "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", - "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual" + "--mod-actionbutton-text-to-visual", + "--mod-disabled-background-color", + "--mod-disabled-content-color" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -92,7 +85,7 @@ "--spectrum-action-button-edge-to-hold-icon-large", "--spectrum-action-button-edge-to-hold-icon-medium", "--spectrum-action-button-edge-to-hold-icon-small", - "--spectrum-actionbutton-background-color", + "--spectrum-actionbutton-animation-duration", "--spectrum-actionbutton-background-color-default", "--spectrum-actionbutton-background-color-disabled", "--spectrum-actionbutton-background-color-down", @@ -103,7 +96,6 @@ "--spectrum-actionbutton-background-color-selected-down", "--spectrum-actionbutton-background-color-selected-focus", "--spectrum-actionbutton-background-color-selected-hover", - "--spectrum-actionbutton-border-color", "--spectrum-actionbutton-border-color-default", "--spectrum-actionbutton-border-color-disabled", "--spectrum-actionbutton-border-color-down", @@ -111,26 +103,24 @@ "--spectrum-actionbutton-border-color-hover", "--spectrum-actionbutton-border-radius", "--spectrum-actionbutton-border-width", - "--spectrum-actionbutton-content-color", + "--spectrum-actionbutton-content-color-default", + "--spectrum-actionbutton-content-color-disabled", + "--spectrum-actionbutton-content-color-down", + "--spectrum-actionbutton-content-color-focus", + "--spectrum-actionbutton-content-color-hover", "--spectrum-actionbutton-content-color-selected", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", "--spectrum-actionbutton-edge-to-visual", "--spectrum-actionbutton-edge-to-visual-only", + "--spectrum-actionbutton-focus-indicator-border-radius", "--spectrum-actionbutton-focus-indicator-color", "--spectrum-actionbutton-focus-indicator-gap", "--spectrum-actionbutton-focus-indicator-thickness", "--spectrum-actionbutton-font-size", "--spectrum-actionbutton-height", "--spectrum-actionbutton-icon-size", - "--spectrum-actionbutton-sized-edge-to-hold-icon", - "--spectrum-actionbutton-sized-edge-to-text", - "--spectrum-actionbutton-sized-edge-to-visual", - "--spectrum-actionbutton-sized-edge-to-visual-only", - "--spectrum-actionbutton-sized-font-size", - "--spectrum-actionbutton-sized-height", - "--spectrum-actionbutton-sized-icon-size", - "--spectrum-actionbutton-sized-text-to-visual", + "--spectrum-actionbutton-min-width", "--spectrum-actionbutton-text-to-visual" ], "global": [ @@ -139,7 +129,6 @@ "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", - "--spectrum-black", "--spectrum-border-width-100", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", @@ -161,12 +150,14 @@ "--spectrum-component-height-300", "--spectrum-component-height-50", "--spectrum-component-height-75", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-corner-radius-medium-size-extra-small", + "--spectrum-corner-radius-medium-size-large", + "--spectrum-corner-radius-medium-size-medium", + "--spectrum-corner-radius-medium-size-small", + "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-border-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-border-color", - "--spectrum-disabled-static-white-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -177,6 +168,7 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-25", "--spectrum-gray-400", "--spectrum-gray-50", "--spectrum-gray-500", @@ -201,19 +193,14 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-400", "--spectrum-transparent-black-500", "--spectrum-transparent-black-600", "--spectrum-transparent-black-700", - "--spectrum-transparent-black-800", - "--spectrum-transparent-black-900", + "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", "--spectrum-transparent-white-700", - "--spectrum-transparent-white-800", - "--spectrum-transparent-white-900", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", @@ -221,16 +208,26 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", "--mod-button-line-height" ], "high-contrast": [ - "--highcontrast-actionbutton-background-color", - "--highcontrast-actionbutton-border-color", - "--highcontrast-actionbutton-content-color", - "--highcontrast-actionbutton-focus-indicator-color" + "--highcontrast-actionbutton-background-color-default", + "--highcontrast-actionbutton-background-color-disabled", + "--highcontrast-actionbutton-background-color-down", + "--highcontrast-actionbutton-background-color-focus", + "--highcontrast-actionbutton-background-color-hover", + "--highcontrast-actionbutton-border-color-default", + "--highcontrast-actionbutton-border-color-disabled", + "--highcontrast-actionbutton-border-color-down", + "--highcontrast-actionbutton-border-color-focus", + "--highcontrast-actionbutton-border-color-hover", + "--highcontrast-actionbutton-content-color-default", + "--highcontrast-actionbutton-content-color-disabled", + "--highcontrast-actionbutton-content-color-down", + "--highcontrast-actionbutton-content-color-focus", + "--highcontrast-actionbutton-content-color-hover" ] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 898e0dd01f3..bcf9af21804 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,47 +11,11 @@ * governing permissions and limitations under the License. */ -@import "@spectrum-css/commons/basebutton.css"; - -@media (forced-colors: active) { - .spectrum-ActionButton { - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - --highcontrast-actionbutton-content-color: ButtonText; - - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } - - &:disabled, - &.is-disabled { - --highcontrast-actionbutton-content-color: GrayText; - --highcontrast-actionbutton-border-color: GrayText; - --highcontrast-actionbutton-background-color: ButtonFace; - } - - &.is-selected { - --highcontrast-actionbutton-background-color: Highlight; - --highcontrast-actionbutton-border-color: HighlightText; - --highcontrast-actionbutton-content-color: HighlightText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - } -} - .spectrum-ActionButton { - --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-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50))); + --spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100))); + --spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200))); + --spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100))); --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100); --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); @@ -59,144 +23,113 @@ --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); + --spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400))); + --spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500))); + --spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600))); + --spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500))); --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); + --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25); + --spectrum-actionbutton-content-color-disabled: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); + --spectrum-actionbutton-background-color-disabled: var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)); - --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); - --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); - --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); + --spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium)); --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); + --spectrum-actionbutton-content-color-default: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); + --spectrum-actionbutton-content-color-hover: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover))); + --spectrum-actionbutton-content-color-down: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down))); + --spectrum-actionbutton-content-color-focus: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); + --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); - --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); - - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); + --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-border-color: transparent; + --spectrum-actionbutton-min-width: var(--mod-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); - --spectrum-actionbutton-background-color-default: transparent; - --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-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium)); - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); + &.spectrum-ActionButton--quiet { + --mod-actionbutton-border-color-default: transparent; - /* border color _not_ disabled is coming from the system theme layer */ - --mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-background-color-hover: var(--spectrum-gray-100); + --mod-actionbutton-background-color-down: var(--spectrum-gray-200); + --mod-actionbutton-background-color-focus: var(--spectrum-gray-100); - --mod-actionbutton-content-color-default: var(--spectrum-black); - --mod-actionbutton-content-color-hover: var(--spectrum-black); - --mod-actionbutton-content-color-down: var(--spectrum-black); - --mod-actionbutton-content-color-focus: var(--spectrum-black); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + &:disabled:not(.is-selected), + &.is-disabled:not(.is-selected) { + --mod-actionbutton-border-color-disabled: transparent; + --mod-actionbutton-background-color-disabled: transparent; + } + } - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); + &.spectrum-ActionButton--staticBlack { + --mod-actionbutton-background-color-default: transparent; + + --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); + --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); + --mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700); + --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - &, + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); + + &:disabled, + .is-disabled { + --mod-disabled-content-color: var(--spectrum-transparent-black-500); + --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-black-500); + } + &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); + --mod-actionbutton-border-color-default: transparent; } } &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); + --mod-actionbutton-background-color-default: transparent; - /* background color _not_ selected is coming from the system theme layer */ - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); + --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); + --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); + --mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700); + --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); - /* border color _not_ disabled is coming from the system theme layer */ - --mod-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - - --mod-actionbutton-content-color-default: var(--spectrum-white); - --mod-actionbutton-content-color-hover: var(--spectrum-white); - --mod-actionbutton-content-color-down: var(--spectrum-white); - --mod-actionbutton-content-color-focus: var(--spectrum-white); - --mod-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + &:disabled, + .is-disabled { + --mod-disabled-content-color: var(--spectrum-transparent-white-500); + --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-white-500); + } - &, &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); + --mod-actionbutton-border-color-default: transparent; } } - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); - } - - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - &.is-selected { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-actionbutton-background-color-selected)); - --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-actionbutton-background-color-selected-hover)); - --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-actionbutton-background-color-selected-down)); - --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-actionbutton-background-color-selected-focus)); + --mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected); + --mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-selected-hover); + --mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-selected-down); + --mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-selected-focus); --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); --mod-actionbutton-border-color-default: transparent; @@ -205,114 +138,159 @@ --mod-actionbutton-border-color-focus: transparent; --mod-actionbutton-border-color-disabled: transparent; - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-actionbutton-content-color-selected)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-actionbutton-content-color-selected)); - } - - &:hover { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-hover, var(--spectrum-actionbutton-border-color-hover)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover)); - } - - &:focus-visible { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-focus, var(--spectrum-actionbutton-border-color-focus)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus)); - } + --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-selected); + --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-selected); + + &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + --mod-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); + --mod-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); + --mod-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); + --mod-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + --mod-actionbutton-content-color-default: var(--spectrum-white); + --mod-actionbutton-content-color-hover: var(--spectrum-white); + --mod-actionbutton-content-color-down: var(--spectrum-white); + --mod-actionbutton-content-color-focus: var(--spectrum-white); + } - &:active { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-down, var(--spectrum-actionbutton-border-color-down)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down)); - } + &:disabled, + .is-disabled { + &.spectrum-ActionButton--staticBlack { + --mod-disabled-content-color: var(--spectrum-transparent-black-500); + --mod-disabled-background-color: var(--spectrum-transparent-black-100); + } - &:disabled, - &.is-disabled { - --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)); - --mod-actionbutton-border-color-default: var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-disabled, var(--spectrum-disabled-content-color)); + &.spectrum-ActionButton--staticWhite { + --mod-disabled-content-color: var(--spectrum-transparent-white-500); + --mod-disabled-background-color: var(--spectrum-transparent-white-100); + } + } } } .spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-50); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-50); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small)); + + --spectrum-actionbutton-min-width: var(--mod-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); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); + --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small)); + --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))); } .spectrum-ActionButton--sizeS { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-75); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-small)); + + --spectrum-actionbutton-min-width: var(--mod-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); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small)); + --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width))); } .spectrum-ActionButton--sizeL { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-200); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-large)); + + --spectrum-actionbutton-min-width: var(--mod-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); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large)); + --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width))); } .spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-300); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); + + --spectrum-actionbutton-min-width: var(--mod-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); + + --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large)); + --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width))); } .spectrum-ActionButton { - /* Variables leveraging t-shirt sizing */ - --spectrum-actionbutton-height: var(--mod-actionbutton-height, var(--spectrum-actionbutton-sized-height)); - --spectrum-actionbutton-icon-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-sized-icon-size)); - --spectrum-actionbutton-font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-sized-font-size)); - --spectrum-actionbutton-text-to-visual: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-sized-text-to-visual)); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-sized-edge-to-hold-icon)); - - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-actionbutton-sized-edge-to-visual-only) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-focus-indicator-border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))); - @extend %spectrum-BaseButton; + cursor: pointer; + user-select: none; + /* Contain halo */ position: relative; - min-inline-size: var(--mod-actionbutton-min-width, calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))); - block-size: var(--spectrum-actionbutton-height); + /* Show the button overflow in Edge. */ + overflow: visible; + display: inline-flex; + align-items: center; + justify-content: center; + + box-sizing: border-box; + + /* Remove button the margin in Firefox and Safari. */ + margin: 0; + + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; + + -webkit-font-smoothing: antialiased; + + /* Font smoothing for Firefox */ + -moz-osx-font-smoothing: grayscale; + + 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; + + /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ + -webkit-appearance: button; + + border-style: solid; + + transition: + background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-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; + + min-inline-size: var(--spectrum-actionbutton-min-width); + block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); border-radius: var(--spectrum-actionbutton-border-radius); border-width: var(--spectrum-actionbutton-border-width); - gap: calc(var(--spectrum-actionbutton-text-to-visual) + var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only)); + gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only))); /* Start with text-only padding */ padding-inline: var(--spectrum-actionbutton-edge-to-text); - background-color: var(--spectrum-actionbutton-background-color); - border-color: var(--spectrum-actionbutton-border-color); - color: var(--spectrum-actionbutton-content-color); - - transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; + background: var(--spectrum-actionbutton-background-color-default); + border-color: var(--spectrum-actionbutton-border-color-default); + color: var(--spectrum-actionbutton-content-color-default); &::after { position: absolute; @@ -320,35 +298,79 @@ margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1); - border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))); + border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius); - transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out; + transition: box-shadow var(--spectrum-actionbutton-animation-duration) ease-in-out; pointer-events: none; content: ""; } + &:hover { + background: var(--spectrum-actionbutton-background-color-hover); + border-color: var(--spectrum-actionbutton-border-color-hover); + color: var(--spectrum-actionbutton-content-color-hover); + } + + /* Fix Firefox */ + &::-moz-focus-inner { + margin-block-start: -2px; + margin-block-end: -2px; + padding: 0; + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; + } + + &:focus, &:focus-visible { /* kill the default ring */ box-shadow: none; outline: none; + } + + &:focus-visible { + background: var(--spectrum-actionbutton-background-color-focus); + border-color: var(--spectrum-actionbutton-border-color-focus); + color: var(--spectrum-actionbutton-content-color-focus); &::after { box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color); } } + + &:active { + background: var(--spectrum-actionbutton-background-color-down); + border-color: var(--spectrum-actionbutton-border-color-down); + color: var(--spectrum-actionbutton-content-color-down); + } + + &:disabled, + &.is-disabled { + cursor: default; + + background: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); + border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); + } } a.spectrum-ActionButton { - @extend %spectrum-AnchorButton; + /* Make link text not selectable */ + user-select: none; + + /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */ + -webkit-appearance: none; } /* Nested sub-component: Icon */ .spectrum-ActionButton-icon { - @extend %spectrum-ButtonIcon; + flex-shrink: 0; - inline-size: var(--spectrum-actionbutton-icon-size); - block-size: var(--spectrum-actionbutton-icon-size); + inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); + max-block-size: 100%; /* adjust icon positioning to match UI kit */ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text)); @@ -364,7 +386,12 @@ a.spectrum-ActionButton { } .spectrum-ActionButton-label { - @extend %spectrum-ButtonLabel; + align-self: center; + justify-self: center; + + /* Fixes horizontal alignment of text in anchor buttons */ + text-align: center; + pointer-events: none; line-height: var(--spectrum-actionbutton-height); @@ -374,6 +401,10 @@ a.spectrum-ActionButton { text-overflow: ellipsis; overflow: hidden; + + &:empty { + display: none; + } } .spectrum-ActionButton-hold { @@ -385,3 +416,46 @@ a.spectrum-ActionButton { transform: var(--spectrum-logical-rotation,); } + +.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, +.spectrum-ActionButton-icon:only-child { + /* Augment the margin correction for the icon only scenario */ + margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); +} + +@media (forced-colors: active) { + .spectrum-ActionButton { + &::after { + /* make sure focus indicator renders */ + forced-color-adjust: none; + } + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } +} diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index f454479c5d1..8d4d2ba86b7 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -53,7 +53,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] } diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 03ebcd73083..2e9ddb2f699 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -85,7 +85,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [ "--mod-closebutton-align-self", "--mod-closebutton-margin-inline", diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 03bf62123f2..4e34b0e5fb8 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -78,7 +78,6 @@ "--spectrum-spacing-300", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], "high-contrast": [] } diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 914c0406132..6389e295f47 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -30,7 +30,6 @@ "--spectrum-gray-25", "--spectrum-gray-500" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-asset-icon-background-color"] } diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index bbe547339cb..94bf07de0af 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -176,7 +176,6 @@ "--spectrum-transparent-black-300", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-assectcard-border-color-selected-down", diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 4a4d1f31381..960f3e03ce3 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -93,7 +93,6 @@ "--spectrum-spacing-600", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-assetlist-border-color-key-focus", diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index e9482e1bde8..8c6f9792c1d 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-avatar-color-opacity-disabled", diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index c8be859d830..050f08d41ef 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -175,7 +175,6 @@ "--spectrum-workflow-icon-size-75", "--spectrum-yellow-background-color-default" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-badge-border-color"] } diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 561253d9efa..96f608af79c 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -190,7 +190,6 @@ "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-breadcrumbs-action-button-color", diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index 24489b26f64..24193c867d8 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -244,7 +244,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-progress-circle-position", "--mod-progress-circle-thickness", diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 37b258ee3b6..967804f4a4a 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -94,7 +94,7 @@ export default { }, downState: { selectors: [".spectrum-Button:not(:disabled)"], - } + }, packageJson, metadata, }, diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 0662926cc8d..04dc22bce0f 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -20,7 +20,6 @@ "--spectrum-buttongroup-spacing" ], "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index d7d0632f6ae..c4901c2be46 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -176,7 +176,6 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "system-theme": [], "passthroughs": [ "--mod-actionbutton-content-color-default", "--mod-actionbutton-edge-to-text", diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 53a9f53d47b..56e8fcaac8c 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -215,7 +215,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 8b4ee3160b6..1ab4c79962e 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -215,7 +215,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-background-color-default", diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index fc01bb2f197..491cb6bbd32 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] } diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 2c23dfaad17..6c74f8bf61f 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -97,7 +97,6 @@ "--spectrum-transparent-white-800", "--spectrum-transparent-white-900" ], - "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 3582f27f459..8c085971406 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -56,7 +56,6 @@ "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fca..690cd1f8f6e 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -81,7 +81,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [ "--mod-button-edge-to-visual-only", "--mod-buttongroup-justify-content", diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ee81137849b..9039b7c1028 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -44,7 +44,6 @@ "--spectrum-disabled-background-color", "--spectrum-gray-1000-rgb" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index 4d8589ac1c1..cbd2b5d599f 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-picked-color", "--spectrum-white" ], - "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-position"], "high-contrast": [ "--highcontrast-colorhandle-border-color-disabled", diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 1bf0a4dceb8..11ab2606d1e 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -59,7 +59,6 @@ "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] } diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a0..de2b20d0bfa 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -45,7 +45,6 @@ "--spectrum-disabled-background-color", "--spectrum-gray-900-rgb" ], - "system-theme": [], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index e3ccdfcaa6f..07c9f09723f 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -50,7 +50,6 @@ "--spectrum-disabled-background-color", "--spectrum-transparent-black-300" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 59df10e978b..9670d6e6997 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -248,7 +248,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index 4f7dbd58c5b..8711f77b47f 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index de7bcf413f4..cf8fffe86db 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -140,7 +140,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-hover-disabled", diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index 75777aed512..49c6d601fe3 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -116,7 +116,6 @@ "--spectrum-gray-800", "--spectrum-line-height-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-dial-border-color", diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 18c67230d3d..7a0c521ff2b 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -116,7 +116,6 @@ "--spectrum-title-sans-serif-font-style", "--spectrum-title-sans-serif-font-weight" ], - "system-theme": [], "passthroughs": [ "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content" diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 9e6ff4e5c9f..9b62a7ad3d4 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -19,6 +19,7 @@ export default { title: "Dialog", component: "Dialog", argTypes: { + size: size(["s", "m", "l"]), heading: { name: "Heading", description: "Title for the dialog.", @@ -72,7 +73,6 @@ export default { control: { type: "boolean" }, if: { arg: "hasFooter", truthy: true, }, }, - size: size(["s", "m", "l"]), layout: { name: "Layout", type: { name: "string" }, @@ -86,6 +86,7 @@ export default { options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", }, + isOpen, isDismissible: { name: "Dismissible", type: { name: "boolean" }, @@ -193,13 +194,9 @@ Default.args = { ], }; -/* TODO: For all dialog stories: the "is-hidden-story" tags in older versions of Storybook. In newer versions, -use "!dev" to remove the stories from the side navigation, reflecting the intended behavior. -Remove "is-hidden-story" in favor of "!dev" tags when possible. -*/ // ********* DOCS ONLY ********* // export const DefaultSmall = Template.bind({}); -DefaultSmall.tags = ["is-hidden-story", "!dev"]; +DefaultSmall.tags = ["!dev"]; DefaultSmall.storyName = "Dialog - small", DefaultSmall.parameters = { chromatic: { disableSnapshot: true }, @@ -210,7 +207,7 @@ DefaultSmall.args = { }; export const DefaultLarge = Template.bind({}); -DefaultLarge.tags = ["is-hidden-story", "!dev"]; +DefaultLarge.tags = ["!dev"]; DefaultLarge.storyName = "Dialog - large", DefaultLarge.parameters = { chromatic: { disableSnapshot: true }, @@ -224,7 +221,7 @@ DefaultLarge.args = { * A dialog that can be dismissed without taking an action. */ export const Dismissible = Template.bind({}); -Dismissible.tags = ["is-hidden-story", "!dev"]; +Dismissible.tags = ["!dev"]; Dismissible.parameters = { chromatic: { disableSnapshot: true }, }; @@ -237,7 +234,7 @@ Dismissible.args = { * Dialogs can have a hero or cover image header. */ export const WithHero = Template.bind({}); -WithHero.tags = ["is-hidden-story", "!dev"]; +WithHero.tags = ["!dev"]; WithHero.storyName = "With hero image"; WithHero.parameters = { docs: { @@ -264,18 +261,15 @@ WithScroll.args = { } }; WithScroll.storyName = "Scrollable"; -WithScroll.tags = ["is-hidden-story", "!dev"]; +WithScroll.tags = ["!dev"]; WithScroll.parameters = { chromatic: { disableSnapshot: true }, }; -/* TODO: once this gets rebased with `main`, make sure to use the fullscreen and fullscreenTakeover test templates -that are imported above, but commented out. - */ /** * The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. */ -export const Fullscreen = Template.bind({}); +export const Fullscreen = DialogFullscreen.bind({}); Fullscreen.args = { ...Default.args, layout: "fullscreen", @@ -297,7 +291,7 @@ Fullscreen.argTypes = { /** * The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. */ -export const FullscreenTakeover = Template.bind({}); +export const FullscreenTakeover = DialogFullscreenTakeover.bind({}); FullscreenTakeover.storyName = "Fullscreen takeover"; FullscreenTakeover.parameters = { chromatic: { disableSnapshot: true }, @@ -319,6 +313,6 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes, + modes: disableDefaultModes, }, }; diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 0fe5d0620a8..a9ab8ea61dc 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -2,9 +2,8 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/templ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; +import { getRandomId } from "@spectrum-css/preview/decorators"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js"; -import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -21,7 +20,6 @@ export const Template = ({ hasFooter = false, heading, header, - footer, hasCheckbox = false, content = [], footer = [], @@ -45,7 +43,7 @@ export const Template = ({ [rootClass]: true, [`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l), [`${rootClass}--${layout}`]: typeof layout !== "undefined", - [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} @@ -53,11 +51,11 @@ export const Template = ({ tabindex="-1" aria-modal="true" style=${ifDefined(styleMap(customStyles))} - > + > <div class="${rootClass}-grid"> ${when(hasHeroImage, () => html` - <div + <div class="spectrum-Dialog-hero" style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})"> </div> @@ -116,7 +114,7 @@ export const Template = ({ label: footer, }, context)} `, - () => + () => Typography({ semantics: "body", size: "m", @@ -143,7 +141,7 @@ export const Template = ({ }, }, context)} </div> - `, + `, () => html` <div class="${rootClass}-noFooter"></div> <div class="${rootClass}-buttonGroup"> @@ -175,15 +173,16 @@ export const Template = ({ </div> </div> `; + if (showModal) { return Modal({ - isOpen, - content: Dialog, - variant: layout, - customStyles: { - "--mod-modal-background-color": "transparent" - }, - }, context); + isOpen, + content: Dialog, + variant: layout, + customStyles: { + "--mod-modal-background-color": "transparent" + }, + }, context); } else { return Dialog; diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a2bf7fb2d7d..15fa0043a7b 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -42,7 +42,6 @@ "--spectrum-transparent-white-200", "--spectrum-transparent-white-800" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-divider-background-color"] } diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index dd3a7a50810..294d6ad70bb 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -23,7 +23,6 @@ "--spectrum-dropindicator-color" ], "global": ["--spectrum-border-width-200"], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 454b64dfb52..96f850663e7 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -100,7 +100,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [], "passthroughs": [ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index c8875b9d3a9..3c2343b1019 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -13,7 +13,6 @@ "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index 0740215e8a2..2a55dbd82f4 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -76,7 +76,6 @@ "--spectrum-spacing-200", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"] } diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 7daf062a329..0ddd22d190a 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-floating-action-button-background-color", diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index 88655f8edd3..c07dfdca8d9 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-form-item-disabled-content-color"] } diff --git a/components/form/stories/template.js b/components/form/stories/template.js index 1b176395bbe..c75456bc895 100644 --- a/components/form/stories/template.js +++ b/components/form/stories/template.js @@ -8,6 +8,9 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; +import "../themes/spectrum.css"; +/* Must be imported last */ +import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Form", diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index f730c33a671..5eab153c21a 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -77,7 +77,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7f5d27e3789..590503e05b8 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -170,7 +170,6 @@ "--spectrum-workflow-icon-size-xxl", "--spectrum-workflow-icon-size-xxs" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 24de798ac33..313c6d71885 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -76,7 +76,6 @@ "--spectrum-spacing-400", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-illustrated-message-illustration-accent-color", diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index dcbf8ad3e07..9b4476f0a4a 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -138,7 +138,6 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-infield-button-border-color", diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 935c89f08a3..bd5894d28c9 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -98,7 +98,6 @@ "--spectrum-spacing-400", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-inlinealert-background-color", diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9befaceefc4..ad90df33840 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -42,7 +42,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-link-text-color"] } diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index eb1ebaa8e18..195d8c87082 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -85,7 +85,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-focus-indicator-gap", diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 9972e1c046c..00816f469b3 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -380,7 +380,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index aa2e591ec6d..12d5893d69d 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -5,8 +5,7 @@ ".spectrum-Meter.is-negative", ".spectrum-Meter.is-notice", ".spectrum-Meter.is-positive", - ".spectrum-Meter.spectrum-Meter--sizeL", - ".spectrum-Meter.spectrum-Meter--sizeS" + ".spectrum-Meter.spectrum-Meter--sizeL" ], "modifiers": [ "--mod-meter-inline-size", @@ -28,10 +27,8 @@ "--spectrum-negative-visual-color", "--spectrum-notice-visual-color", "--spectrum-positive-visual-color", - "--spectrum-progressbar-size-2400", "--spectrum-progressbar-size-2500" ], - "system-theme": [], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", diff --git a/components/meter/index.css b/components/meter/index.css index 7a76757a6d7..2db081b1e9d 100644 --- a/components/meter/index.css +++ b/components/meter/index.css @@ -17,16 +17,12 @@ --mod-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-maximum-width)); --mod-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-minimum-width)); - &, - &.spectrum-Meter--sizeS { - --mod-progressbar-size-default: var(--spectrum-progressbar-size-2400); - --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); - --mod-progressbar-font-size: var(--spectrum-font-size-75); - --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); - } + --mod-progressbar-thickness: var(--spectrum-meter-thickness-small); + --mod-progressbar-font-size: var(--spectrum-font-size-75); + --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75); &.spectrum-Meter--sizeL { - --mod-progressbar-size-default: var(--spectrum-progressbar-size-2500); + --mod-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-progressbar-size-2500)); --mod-progressbar-thickness: var(--spectrum-meter-thickness-large); --mod-progressbar-font-size: var(--spectrum-font-size-100); --mod-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200); diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index adb2109144c..fbb3770d558 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -13,7 +13,6 @@ ], "component": [], "global": ["--spectrum-spacing-100"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index ded6af72a96..923b9118be3 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-dialog-confirm-entry-animation-distance", "--spectrum-gray-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index bd104aef772..31fd76317b9 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -21,7 +21,6 @@ "--spectrum-opacity-checkerboard-square-size-small" ], "global": [], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index ad01f46d959..4e3ac035552 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -7,7 +7,6 @@ "--spectrum-page-content-tap-highlight" ], "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/index.css b/components/page/index.css index 6b50597aa05..b5ce5555917 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -12,11 +12,8 @@ */ :root { - --spectrum-page-background-color: var(--spectrum-gray-75); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); - - background: var(--mod-page-background, var(--spectrum-page-background-color)); + background: var(--mod-page-background, var(--spectrum-page-background-color, var(--spectrum-gray-75))); /* The highlight that appears over a link while it's being tapped */ - -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight)); + -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight, var(--spectrum-transparent-black-25))); } diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 7a0b21fe8dd..e44857f71b9 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -34,7 +34,6 @@ "--spectrum-logical-rotation", "--spectrum-neutral-subdued-content-color-default" ], - "system-theme": [], "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], "high-contrast": [] } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index e4da8f634b6..1048a0a2f50 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -299,7 +299,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "system-theme": [], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 480f8b733a2..221fc5c9c01 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -137,7 +137,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index d0294a34b6a..ae647daed75 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -149,7 +149,6 @@ "--spectrum-gray-400", "--spectrum-spacing-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-popover-border-color"] } diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 2f5d69199b1..1986962a2f5 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -105,7 +105,6 @@ "--spectrum-transparent-white-700", "--spectrum-transparent-white-900" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-progressbar-fill-color", diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 9148d61fb7f..a5d0ef93c8c 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -110,7 +110,6 @@ "--spectrum-transparent-white-1000", "--spectrum-transparent-white-400" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-progress-circle-fill-border-color", diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index bf7160225d6..8f7e7985ca0 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -167,7 +167,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-radio-button-background-color", diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index c6a11b9abe5..f0ab77b22a9 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -101,7 +101,6 @@ "--spectrum-neutral-subdued-content-color-key-focus", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-rating-emphasized-icon-color-default", diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index d9cf0543354..6222364ff13 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -148,7 +148,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index cad6a65dbe2..0215529e384 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -180,7 +180,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-sidenav-background-hover", diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 2ee9be1294f..78f17a358a4 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -258,7 +258,6 @@ "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index 0ddade0d57e..c6925723f7c 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -81,7 +81,6 @@ "--spectrum-gray-75", "--spectrum-gray-800" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-splitview-handle-background-color", diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index b2fc9f40509..f48621da4c8 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -186,7 +186,6 @@ "--spectrum-turquoise-visual-color", "--spectrum-yellow-visual-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-statuslight-content-color-default", diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 4d6a4a8b4ec..57745bc4c4c 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -91,7 +91,6 @@ "--spectrum-gray-700", "--spectrum-gray-800" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-steplist-complete-marker-background-color", diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 72885764821..800b4f022b6 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -143,7 +143,6 @@ "--spectrum-negative-border-color-key-focus", "--spectrum-text-field-minimum-width-multiplier" ], - "system-theme": [], "passthroughs": [ "--mod-infield-button-border-block-end-width", "--mod-infield-button-border-color", diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 67fa26286ff..e3affcc83cb 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -72,7 +72,6 @@ "component": [ "--spectrum-swatch-border-color", "--spectrum-swatch-border-color-light", - "--spectrum-swatch-border-color-opacity", "--spectrum-swatch-border-color-selected", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", @@ -102,22 +101,21 @@ "--spectrum-animation-duration-100", "--spectrum-border-width-100", "--spectrum-border-width-200", - "--spectrum-corner-radius-75", + "--spectrum-corner-radius-100", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", - "--spectrum-gray-1000-rgb", "--spectrum-gray-25", "--spectrum-gray-800", "--spectrum-gray-900", "--spectrum-picked-color", "--spectrum-red-900", + "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-swatch-background-color-selected", diff --git a/components/swatch/index.css b/components/swatch/index.css index 6b5644ce951..f0f03dbaac9 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -11,6 +11,49 @@ * governing permissions and limitations under the License. */ + /* @note: default sizing for swatch is small */ +.spectrum-Swatch { + /* Placeholder tokens */ + --spectrum-swatch-focus-indicator-border-radius: var(--mod-swatch-focus-indicator-border-radius, 8px); + --spectrum-swatch-icon-border-color: var(--mod-swatch-icon-border-color, rgb(0 0 0 / 51%)); + + /* Size */ + --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-small)); + --spectrum-swatch-border-radius: var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100)); + --spectrum-swatch-border-thickness: var(--mod-swatch-border-thickness, var(--spectrum-border-width-100)); + --spectrum-swatch-border-thickness-selected: var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200)); + --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-75)); + --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-small)); + --spectrum-swatch-focus-indicator-thickness: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-swatch-focus-indicator-gap: var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + + /* Color */ + --spectrum-swatch-border-color-selected: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-900))); + --spectrum-swatch-inner-border-color-selected: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))); + --spectrum-swatch-disabled-icon-color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white))); + --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); + --spectrum-swatch-slash-icon-color: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-red-900))); + --spectrum-swatch-focus-indicator-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))); +} + +.spectrum-Swatch--sizeXS { + --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-extra-small)); + --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-50)); + --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-extra-small)); +} + +.spectrum-Swatch--sizeM { + --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-medium)); + --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-100)); + --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-medium)); +} + +.spectrum-Swatch--sizeL { + --spectrum-swatch-size: var(--mod-swatch-size, var(--spectrum-swatch-size-large)); + --spectrum-swatch-disabled-icon-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200)); + --spectrum-swatch-slash-thickness: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large)); +} + /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { @@ -24,57 +67,17 @@ .spectrum-Swatch-fill { forced-color-adjust: none; } - } - .spectrum-Swatch[disabled], - .spectrum-Swatch.is-disabled { - --highcontrast-swatch-border-color: GrayText; + &[disabled], + &.is-disabled { + --highcontrast-swatch-border-color: GrayText; + } } } .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25); - - --spectrum-swatch-size: var(--spectrum-swatch-size-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); -} - -.spectrum-Swatch--sizeXS { - --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small); -} - -.spectrum-Swatch--sizeM { - --spectrum-swatch-size: var(--spectrum-swatch-size-medium); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium); -} - -.spectrum-Swatch--sizeL { - --spectrum-swatch-size: var(--spectrum-swatch-size-large); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large); -} - -.spectrum-Swatch { - --spectrum-swatch-focus-indicator-border-radius: 8px; - --spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%); - --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); - --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); - --spectrum-swatch-slash-icon-color: var(--spectrum-red-900); - --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); - - inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); - block-size: var(--mod-swatch-size, var(--spectrum-swatch-size)); + inline-size: var(--spectrum-swatch-size); + block-size: var(--spectrum-swatch-size); display: flex; align-items: center; @@ -89,24 +92,24 @@ user-select: none; .spectrum-Swatch-disabledIcon { - inline-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size)); - block-size: var(--mod-swatch-disabled-icon-size, var(--spectrum-swatch-disabled-icon-size)); + inline-size: var(--spectrum-swatch-disabled-icon-size); + block-size: var(--spectrum-swatch-disabled-icon-size); } &, &::before { - border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius)); + border-radius: var(--spectrum-swatch-border-radius); } &.is-selected { - background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))); + background: var(--spectrum-swatch-inner-border-color-selected); .spectrum-Swatch-fill { clip-path: polygon( - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2), - calc(var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) calc(100% - var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2) + calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2), + calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(var(--spectrum-swatch-border-thickness-selected) * 2), + calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2), + calc(var(--spectrum-swatch-border-thickness-selected) * 2) calc(100% - var(--spectrum-swatch-border-thickness-selected) * 2) ); /* no border radius when selected */ @@ -148,12 +151,12 @@ background-image: none; &::after { - inline-size: var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness)); + inline-size: var(--spectrum-swatch-slash-thickness); content: ""; position: absolute; transform: rotate(-45deg); block-size: 200%; /* just needs to be bigger than a swatch */ - background: var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))); + background: var(--spectrum-swatch-slash-icon-color); } } @@ -175,9 +178,9 @@ position: absolute; inset: 0; - border-width: var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)); + border-width: var(--spectrum-swatch-border-thickness-selected); border-style: solid; - border-color: var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))); + border-color: var(--spectrum-swatch-border-color-selected); opacity: 0; @@ -188,14 +191,14 @@ &::after { content: ""; position: absolute; - inset: calc(-2 * var(--mod-swatch-focus-indicator-gap, var(--spectrum-swatch-focus-indicator-gap))); + inset: calc(-2 * var(--spectrum-swatch-focus-indicator-gap)); opacity: 0; - border-width: var(--mod-swatch-focus-indicator-thickness, var(--spectrum-swatch-focus-indicator-thickness)); + border-width: var(--spectrum-swatch-focus-indicator-thickness); border-style: solid; - border-color: var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))); - border-radius: var(--mod-swatch-focus-indicator-border-radius, var(--spectrum-swatch-focus-indicator-border-radius)); + border-color: var(--spectrum-swatch-focus-indicator-color); + border-radius: var(--spectrum-swatch-focus-indicator-border-radius); transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; } @@ -228,6 +231,8 @@ position: absolute; inset: 0; z-index: 0; + + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ background: var(--spectrum-picked-color, transparent); /* Swatch border */ @@ -249,7 +254,7 @@ .spectrum-Swatch--lightBorder { .spectrum-Swatch-fill { &::before { - box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)); + box-shadow: inset 0 0 0 var(--spectrum-swatch-border-thickness) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)); } } } @@ -257,6 +262,8 @@ .spectrum-Swatch-mixedValueIcon { display: none; pointer-events: none; + + /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ color: var(--spectrum-picked-color, transparent); } @@ -267,22 +274,22 @@ display: none; pointer-events: none; - color: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); - stroke: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + color: var(--spectrum-swatch-disabled-icon-color); + stroke: var(--spectrum-swatch-disabled-icon-color); /* Icon fill color */ path:first-child { - fill: var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))); + fill: var(--spectrum-swatch-disabled-icon-color); } /* Icon outline color - does not need a highcontrast token because the icon fill color provides contrast. */ path:last-child { - fill: var(--mod-swatch-icon-border-color, var(--spectrum-swatch-icon-border-color)); + fill: var(--spectrum-swatch-icon-border-color); } } .spectrum-Swatch--rectangle { - inline-size: calc(var(--mod-swatch-size, var(--spectrum-swatch-size)) * 2); + inline-size: calc(var(--spectrum-swatch-size) * 2); } /* Variant: Rounding - None */ @@ -312,7 +319,7 @@ } &.is-selected .spectrum-Swatch-fill { - clip-path: circle(calc(50% - (var(--mod-swatch-border-thickness-selected, var(--spectrum-swatch-border-thickness-selected)) * 2)) at 50% 50%); + clip-path: circle(calc(50% - (var(--spectrum-swatch-border-thickness-selected) * 2)) at 50% 50%); } } } diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 74adf019d54..24e3423ca5d 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -16,7 +16,6 @@ "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 883098590e0..57a281d35df 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -222,7 +222,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-switch-background-color", diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index 3c677816e3f..26a601ce86e 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -435,7 +435,6 @@ "--spectrum-transparent-white-100", "--spectrum-transparent-white-25" ], - "system-theme": [], "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], "high-contrast": [ "--highcontrast-table-border-color", diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 9f0ab1d93a0..37e3c7b1a37 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -206,7 +206,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-color", diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 7d15383fa92..20d2158b8a1 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -280,7 +280,6 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [ "--mod-avatar-opacity-disabled", "--mod-clear-button-width", diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 10ed81256ff..b9eeaede1e8 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -10,7 +10,6 @@ "--spectrum-tag-group-item-margin-inline" ], "global": ["--spectrum-spacing-75"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 0ec4467b8ca..ea7001c7db6 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -328,7 +328,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 6ddf2c93958..2a5fa051ef2 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -88,7 +88,6 @@ "--spectrum-gray-800-rgb", "--spectrum-white" ], - "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-size"], "high-contrast": [ "--highcontrast-thumbnail-border-color", diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 15ae32f0e48..853a11f961a 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -99,7 +99,6 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-toast-border-color"] } diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 637b9bf30d2..008df5e0cbe 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -363,7 +363,6 @@ "--spectrum-regular-font-weight", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index 2d510b6a7aa..db6c152c441 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -36,7 +36,6 @@ "--spectrum-background-layer-2-color", "--spectrum-corner-radius-100" ], - "system-theme": [], "passthroughs": ["--mod-modal-max-width"], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index 86d12b5a674..7456a1853f8 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -167,7 +167,6 @@ "--spectrum-neutral-content-color-default", "--spectrum-text-to-visual-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-treeview-heading-color", diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 5d45be326da..3ef566f741d 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -751,7 +751,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-serif-font-family-stack" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-body-font-color", diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 6b35fb4f7f0..21a3e4aa1d0 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -30,7 +30,6 @@ "--spectrum-black-rgb", "--spectrum-overlay-opacity" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index 5bd2d68a796..c9fdd7f6da1 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -27,7 +27,6 @@ "--spectrum-gray-1000-rgb", "--spectrum-gray-800-rgb" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js index 155a1c68cfe..248c928e991 100644 --- a/plugins/postcss-rgb-mapping/index.js +++ b/plugins/postcss-rgb-mapping/index.js @@ -24,7 +24,7 @@ function rgbMappingFunction ({ colorFunctionalNotation = false, }) { return { - postcssPlugin: "postcss-rgb-mapping", + postcssPlugin: "@spectrum-tools/postcss-rgb-mapping", /** @type {import('postcss').DeclarationProcessor} */ Declaration(decl, { Warning }) { const { prop, value } = decl; diff --git a/plugins/stylelint-theme-alignment/CHANGELOG.md b/plugins/stylelint-theme-alignment/CHANGELOG.md deleted file mode 100644 index b8058c28c64..00000000000 --- a/plugins/stylelint-theme-alignment/CHANGELOG.md +++ /dev/null @@ -1,24 +0,0 @@ -# Change log - -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - -## 1.2.0 - -### Minor Changes - -- [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)! - Fixes a bug where the source file is expected to be "spectrum-two" instead of "spectrum". - -## 1.1.0 - -### Minor Changes - -- [#3403](https://github.com/adobe/spectrum-css/pull/3403) [`48626b8`](https://github.com/adobe/spectrum-css/commit/48626b8ca11043d290c0fe987ec501b88bd6e339) Thanks [@castastrophe](https://github.com/castastrophe)! -- Allow the base filename to be passed into the tool so that the core theme can be updated. Great preparations for S2 roll-out when spectrum-two.css theme files will become our primary source of theme content. - -## 1.0.0 - -### Major Changes - -- [#3026](https://github.com/adobe/spectrum-css/pull/3026) [`544a803`](https://github.com/adobe/spectrum-css/commit/544a8039e84423a4db3137a0688f27b7812e291f) Thanks [@castastrophe](https://github.com/castastrophe)! -- Initial release of the stylelint theme alignment tool. This package uses the base file (themes/spectrum.css) for a Spectrum CSS component as a "source of truth" and validates the sub-themes (i.e., themes/express.css) use only selectors and custom properties defined in the base file. diff --git a/plugins/stylelint-theme-alignment/README.md b/plugins/stylelint-theme-alignment/README.md deleted file mode 100644 index 1aa58cd7fa4..00000000000 --- a/plugins/stylelint-theme-alignment/README.md +++ /dev/null @@ -1,78 +0,0 @@ -# stylelint-no-unused-custom-properties - -> Remove or report on unused variable definitions - -## Installation - -```sh -yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties -``` - -## Usage - -Assuming you have some variables defined and rule(s) that use them: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -The variables that are not used in any rule will be removed from the output or reported to the console: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition: - -```css -:root { - /* @passthrough */ - --nested-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`: - -```css -:root { - /* @passthrough start */ - --nested-component-background-color: blue; - --nested-component-width: 10px; - /* @passthrough end */ - - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -## Options - -### `ignoreList` (default: `[]`) - -An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored. diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js deleted file mode 100644 index 98653a2225a..00000000000 --- a/plugins/stylelint-theme-alignment/index.js +++ /dev/null @@ -1,158 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -import fs from "node:fs"; -import { basename, relative, sep } from "node:path"; - -import postcss from "postcss"; -import valuesParser from "postcss-values-parser"; -import stylelint from "stylelint"; -import { isString } from "stylelint/lib/utils/validateTypes.mjs"; - -const { - createPlugin, - utils: { report, ruleMessages, validateOptions } -} = stylelint; - -import "colors"; - -const ruleName = "spectrum-tools/theme-alignment"; -const messages = ruleMessages(ruleName, { - missing: (baseFile, sourceFile, rootPath) => `A base file (${relative(rootPath, baseFile)}) is required to validate ${relative(rootPath, sourceFile)}.`, - // Report if a selector is in this file but not in the base file - expected: (selector, baseFile, rootPath) => `Selector "${selector}" is not used or defined in the base file (${relative(rootPath, baseFile)}).`, - // Report if a custom property is used in this file but not in the base file - referenced: (property, baseFile, rootPath) => `Custom property "${property}" is not used or defined by the base file (${relative(rootPath, baseFile)}).`, -}); - -/** @type {import('stylelint').Plugin} */ -const ruleFunction = (enabled, options = {}) => { - return (root, result) => { - const validOptions = validateOptions( - result, - ruleName, - { - actual: enabled, - possible: [true], - }, - { - actual: options, - possible: { - baseFilename: isString, - }, - optional: true, - }, - ); - - if (!validOptions) return; - - - const { baseFilename = "spectrum" } = options; - - const sourceFile = root.source.input.file; - const parts = sourceFile ? sourceFile.split(sep) : []; - const isTheme = parts[parts.length - 2] === "themes"; - const filename = parts[parts.length - 1]; - - if (!isTheme || basename(filename, ".css") === baseFilename) return; - - // All the parts of the source file but replace the filename with the baseFilename - const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep); - const rootPath = parts.slice(0, -2).join(sep); - - // If the base file doesn't exist, throw an error - if (!fs.existsSync(baseFile)) { - report({ - message: messages.missing, - messageArgs: [baseFile, sourceFile, rootPath], - node: root, - result, - ruleName, - }); - return; - } - - // Read in the base file and parse it - const baseContent = fs.readFileSync(baseFile, "utf8"); - const baseRoot = postcss.parse(baseContent); - - /* A list of all selectors in the base file */ - const baseSelectors = new Set(); - /* A list of all properties in the base file */ - const baseProperties = new Set(); - - /* Iterate over selectors in the base root */ - baseRoot.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Add this selector to the selectors set - baseSelectors.add(selector); - }); - - rule.walkDecls((decl) => { - // If this is a custom property, add it to the properties set - if (decl.prop.startsWith("--")) { - baseProperties.add(decl.prop); - } - - // If the value of this declaration includes a custom property, add it to the properties set - const parsed = valuesParser.parse(decl.value); - parsed.walk((node) => { - if (node.type === "func" && node.value === "var") { - baseProperties.add(node.nodes[0].value); - } - }); - }); - }); - - /* Iterate over selectors in the source root and validate that they align with the base */ - root.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Check if this selector exists in the base - if (!baseSelectors.has(selector)) { - // Report any selectors that don't exist in the base - report({ - message: messages.expected, - messageArgs: [selector, baseFile, rootPath], - node: rule, - result, - ruleName, - }); - return; - } - }); - - rule.walkDecls((decl) => { - const isProperty = decl.prop.startsWith("--"); - // @todo should report that this is setting something other than a custom property in the theme file - if (!isProperty) { - return; - } - - // If this is a custom property, check if it's used in the base - if (!baseProperties.has(decl.prop)) { - report({ - message: messages.referenced, - messageArgs: [decl.prop, baseFile, rootPath], - node: decl, - result, - ruleName, - }); - } - }); - }); - }; -}; - -ruleFunction.ruleName = ruleName; -ruleFunction.messages = messages; - -export default createPlugin(ruleName, ruleFunction); diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json deleted file mode 100644 index b317637cade..00000000000 --- a/plugins/stylelint-theme-alignment/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/stylelint-theme-alignment", - "version": "1.2.0", - "description": "A utility to ensure that all custom properties are intially defined in a core resource file and all subsequent uses leverage only values defined there first.", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts <castastrophe@users.noreply.github.com>" - ], - "homepage": "https://opensource.adobe.com/spectrum-css", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/stylelint-theme-alignment" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "type": "module", - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "colors": "^1.4.0", - "postcss": "^8.5.3", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "stylelint": ">=16" - }, - "devDependencies": { - "stylelint": "^16.9.0" - }, - "keywords": [ - "css", - "lint", - "properties", - "report", - "stylelint-plugin" - ] -} diff --git a/plugins/stylelint-theme-alignment/project.json b/plugins/stylelint-theme-alignment/project.json deleted file mode 100644 index 90709f217ad..00000000000 --- a/plugins/stylelint-theme-alignment/project.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "stylelint-theme-alignment", - "tags": ["tooling", "stylelint"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json index c91ce98e0f2..1352f802900 100644 --- a/schemas/metadata.schema.json +++ b/schemas/metadata.schema.json @@ -10,71 +10,54 @@ "pattern": "^.+\\.css$", "description": "The path to the source file used in generating the metadata." }, - "selectors": { - "description": "These are the selectors available for the component.", - "type": "array", - "items": { - "type": "string" - } - }, - "modifiers": { - "description": "These are the modifiers available for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "component": { - "description": "The component-level custom properties for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "global": { - "description": "The global custom properties used in this component as generated by the design tokens.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "system-theme": { - "description": "The system theme hooks created by the postcss tooling to allow theme toggling on a component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--system-" - } - }, - "passthroughs": { - "description": "Modifier custom properties for nested components that are passed through by this component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "high-contrast": { - "description": "Custom properties that allow high-contrast styles to be applied to the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--highcontrast-" - } - } + "selectors": { + "description": "These are the selectors available for the component.", + "type": "array", + "items": { + "type": "string" + } + }, + "modifiers": { + "description": "These are the modifiers available for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "component": { + "description": "The component-level custom properties for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "global": { + "description": "The global custom properties used in this component as generated by the design tokens.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "passthroughs": { + "description": "Modifier custom properties for nested components that are passed through by this component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "high-contrast": { + "description": "Custom properties that allow high-contrast styles to be applied to the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--highcontrast-" + } + } }, - "required": [ - "sourceFile", - "selectors", - "modifiers", - "component", - "global", - "system-theme", - "passthroughs", - "high-contrast" - ], + "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"], "additionalProperties": false } diff --git a/stylelint.config.js b/stylelint.config.js index 3791f46083a..5054a2e63bf 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -11,7 +11,6 @@ module.exports = { "@spectrum-tools/stylelint-no-missing-var", "@spectrum-tools/stylelint-no-unused-custom-properties", "@spectrum-tools/stylelint-no-unknown-custom-properties", - "@spectrum-tools/stylelint-theme-alignment", // "stylelint-high-performance-animation", ], rules: { @@ -150,7 +149,6 @@ module.exports = { * Local/custom plugins * -------------------------------------------------------------- */ "spectrum-tools/no-missing-var": true, - "spectrum-tools/theme-alignment": null, "spectrum-tools/no-unused-custom-properties": null, "spectrum-tools/no-unknown-custom-properties": null, }, diff --git a/tasks/component-builder.js b/tasks/component-builder.js index 93f6c0d8384..6d37af3b6a4 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -231,41 +231,33 @@ async function main({ const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`; console.time(key); - // Create the dist directory if it doesn't exist - if (!fs.existsSync(path.join(cwd, "dist"))) { - fs.mkdirSync(path.join(cwd, "dist")); + const reports = []; + const errors = []; + + await build({ cwd, clean, minify }).then((report) => reports.push(report)).catch((err) => errors.push(err)); + + const logs = reports.flat(Infinity).filter(Boolean); + const errs = errors.flat(Infinity).filter(Boolean); + + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); + + if (errs && errs.length > 0) { + errs.forEach((err) => console.error(err)); + } + else { + if (logs && logs.length > 0) { + logs.forEach((log) => console.log(log)); + } + else console.log("No assets created.".gray); } - return Promise.all([ - build({ cwd, clean, minify }), - ]) - .then((report) => { - const logs = report.flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (logs && logs.length > 0) { - logs.forEach((log) => console.log(log)); - } - else console.log("No assets created.".gray); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }) - .catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); + + if (errs && errs.length > 0) process.exit(1); + else process.exit(0); } exports.processCSS = processCSS; diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index b865ffd6c34..db15dc333bf 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -184,7 +184,6 @@ async function main({ dataModel: { modifiers: ["mod"], spectrum: ["spectrum"], - "system-theme": ["system"], "high-contrast": ["highcontrast"], }, } @@ -199,7 +198,6 @@ async function main({ modifiers: meta.modifiers, component: meta.component, global: meta.global, - "system-theme": meta["system-theme"], passthroughs: meta.passthroughs, "high-contrast": meta["high-contrast"], }, null, 2), diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css index be7d3bbb698..0a188980cb1 100644 --- a/tokens/custom/global-vars.css +++ b/tokens/custom/global-vars.css @@ -61,8 +61,8 @@ --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); /* Gradients that do not change with the color theme, for use in static color backgrounds. */ - --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); - --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67)); --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index e117b38812b..dff6ce1fea5 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -11,15 +11,9 @@ * governing permissions and limitations under the License. */ -module.exports = ({ - resolveImports = true, - ...options -}) => require("../postcss.config.js")({ - ...options, - resolveImports, - env: "production", - map: false, - additionalPlugins: { +module.exports = () => ({ + plugins: { + "postcss-import": {}, "@spectrum-tools/postcss-rgb-mapping": { colorFunctionalNotation: false, }, @@ -27,5 +21,20 @@ module.exports = ({ order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", }, + cssnano: { + preset: [ + "cssnano-preset-advanced", + { + colormin: false, + discardComments: { removeAll: true }, + // @todo yarn add -DW css-declaration-sorter + cssDeclarationSorter: false, // @todo { order: "smacss" }, + normalizeWhitespace: false, + }, + ], + }, + "postcss-licensing": { + filename: "../COPYRIGHT", + }, }, }); diff --git a/tokens/project.json b/tokens/project.json index 6d6f74dfb42..92061b809b0 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -3,8 +3,7 @@ "tag": ["tokens"], "namedInputs": { "core": [ - "{projectRoot}/custom-express/*.css", - "{projectRoot}/custom-spectrum/*.css" + "{projectRoot}/custom/*.css" ], "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], "tools": ["{projectRoot}/postcss.config.js", "{projectRoot}/tasks/token-rollup.js"] diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js index 39f907f7ee1..551f2001c88 100644 --- a/tokens/tasks/token-rollup.js +++ b/tokens/tasks/token-rollup.js @@ -115,52 +115,44 @@ async function main({ const compiledOutputPath = path.join(cwd, "dist"); - // Ensure the dist directory exists - if (!fs.existsSync(compiledOutputPath)) { - fs.mkdirSync(compiledOutputPath); + const reports = []; + const errors = []; + + // Wait for all the custom files to be processed + await appendCustomOverrides({ cwd }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); + + // Then build the index.css file + await index(["dist/css/*-vars.css"], path.join(compiledOutputPath, "css", "index.css"), { cwd, clean }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); + + // Combine all the reports into a single log output + const logs = reports.flat(Infinity).filter(Boolean); + const errorLogs = errors.flat(Infinity).filter(Boolean); + + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); + + if (!(errorLogs && errorLogs.length > 0)) { + if (logs && logs.length > 0) { + logs.forEach(log => { + // Strip the ../../tokens/ from the paths + console.log(log.replace(/(\.\.\/)+tokens\//g, "")); + }); + } + else console.log("No assets created.".gray); + } + else { + errorLogs.forEach(log => { + console.error(log); + }); } - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); - // Wait for all the custom files to be processed - return appendCustomOverrides({ packageJson, cwd }).then(async (r) => - Promise.all([ - index( - ["dist/css/*-vars.css"], - path.join(compiledOutputPath, "css", "index.css"), - { cwd, clean, packageJson } - ) - ]).then((reports) => { - const logs = [reports, r].flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (logs && logs.length > 0) { - logs.forEach(log => { - // Strip the ../../tokens/ from the paths - console.log(log.replace(/(\.\.\/)+tokens\//g, "")); - }); - } - else console.log("No assets created.".gray); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }).catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }) - ); + if (errorLogs && errorLogs.length > 0) { + process.exit(1); + } } exports.default = main; diff --git a/tools/generator/plopfile.js b/tools/generator/plopfile.js index 0ad4f678252..5d9b2360a2b 100644 --- a/tools/generator/plopfile.js +++ b/tools/generator/plopfile.js @@ -67,8 +67,9 @@ export default async (plop) => { return "Naming is hard; but it must have a name. You can always change it later."; } - const name = plop.renderString("{{ lowerCase (camelCase name) }}", { name: answer }); - if (name && existingComponents && existingComponents.includes(name)) { + const name = plop.renderString("{{ lowerCase (kebabCase name) }}", { name: answer }); + const altName = plop.renderString("{{ lowerCase (camelCase name) }}", { name: answer }); + if ((name || altName) && existingComponents && (existingComponents.includes(name) || existingComponents.includes(altName))) { return "A component with that name already exists. You can always change it later."; } @@ -79,7 +80,7 @@ export default async (plop) => { ], actions: (data) => { data.description = `The ${data.name} component is...`; - data.folderName = plop.renderString("{{ lowerCase (camelCase name) }}", data); + data.folderName = plop.renderString("{{ lowerCase (kebabCase name) }}", data); data.pkg = pkg; data.tokens = { name: tokens.name, version: tokens.version }; diff --git a/tools/generator/templates/package.json.hbs b/tools/generator/templates/package.json.hbs index 4ae644481fd..f9ba84398a0 100644 --- a/tools/generator/templates/package.json.hbs +++ b/tools/generator/templates/package.json.hbs @@ -1,36 +1,56 @@ { - "name": "@spectrum-css/{{ folderName }}", - "version": "0.0.0", - "description": "The Spectrum CSS {{ folderName }} component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/{{ folderName }}", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/{{ folderName }}" - }, - "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" - ], + "name": "@spectrum-css/{{ folderName }}", + "version": "0.0.0", + "description": "The Spectrum CSS {{ folderName }} component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-{{ folderName }}--docs", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/{{ folderName }}" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index.css": "./dist/index.css", + "./metadata.json": "./metadata/metadata.json", + "./metadata/*": "./metadata/*", + "./package.json": "./package.json" + }, + "main": "dist/index.css", + "peerDependencies": { + "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" + }, + "peerDependenciesMeta": { + "{{ tokens.name }}": { + "optional": true + } + }, + "devDependencies": { + "{{ tokens.name }}": "{{ tokens.version }}" + }, "keywords": [ + "design-system", "spectrum", - "css", - "design system", - "adobe" + "spectrum-css", + "adobe", + "adobe-spectrum", + "component", + "css" ], - "peerDependencies": { - "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" - }, - "publishConfig": { - "access": "public" - } + "publishConfig": { + "access": "public" + }, + "spectrum": [ + { + "guidelines": "https://spectrum.adobe.com/page/{{ folderName }}", + "rootClass": "spectrum-{{ pascalCase name }}", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/{{ folderName }}/" + } + ] } diff --git a/yarn.lock b/yarn.lock index 6101d98618c..adbce9fbabd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5654,19 +5654,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment": - version: 0.0.0-use.local - resolution: "@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment" - dependencies: - colors: "npm:^1.4.0" - postcss: "npm:^8.5.3" - postcss-values-parser: "npm:^6.0.2" - stylelint: "npm:^16.9.0" - peerDependencies: - stylelint: ">=16" - languageName: unknown - linkType: soft - "@storybook/addon-a11y@npm:^8.4.7": version: 8.4.7 resolution: "@storybook/addon-a11y@npm:8.4.7" @@ -7938,24 +7925,10 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001643 - resolution: "caniuse-lite@npm:1.0.30001643" - checksum: 10c0/7fcd0fd180bbe6764311ad57b0d39c23afdcc3bb1d8f804e7a76752c62a85b1bb7cf74b672d9da2f0afe7ad75336ff811a6fe279eb2a54bc04c272b6b62e57f1 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001660 - resolution: "caniuse-lite@npm:1.0.30001660" - checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001673 - resolution: "caniuse-lite@npm:1.0.30001673" - checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001700 + resolution: "caniuse-lite@npm:1.0.30001700" + checksum: 10c0/3d391bcdd193208166d3ad759de240b9c18ac3759dbd57195770f0fcd2eedcd47d5e853609aba1eee5a2def44b0a14eee457796bdb3451a27de0c8b27355017c languageName: node linkType: hard From 054cb00e121c1eb63315f64405114188b9a18ff6 Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Fri, 27 Dec 2024 15:06:57 -0500 Subject: [PATCH 058/103] build: add story exports; remove context from storybook --- .github/QUICK-START.md | 51 ++++++--- .github/actions/file-diff/README.md | 9 +- .storybook/decorators/context.js | 24 ++-- .storybook/manager.js | 2 + .storybook/types/global.js | 14 --- components/actionbutton/dist/metadata.json | 7 +- components/actionbutton/index.css | 107 +++++++++--------- components/actiongroup/CHANGELOG.md | 7 ++ .../stories/actiongroup.stories.js | 1 + .../actionmenu/stories/actionmenu.stories.js | 3 - .../stories/alertbanner.stories.js | 1 + .../alertbanner/stories/alertbanner.test.js | 35 +++++- components/alertbanner/stories/template.js | 80 ++++++------- .../stories/alertdialog.stories.js | 5 + components/avatar/stories/avatar.stories.js | 1 + components/button/stories/button.stories.js | 2 +- .../stories/buttongroup.stories.js | 1 + .../colorarea/stories/colorarea.stories.js | 1 + .../colorloupe/stories/colorloupe.stories.js | 1 + components/dial/stories/dial.stories.js | 1 + components/dialog/stories/dialog.stories.js | 1 + components/divider/index.css | 5 +- .../fieldlabel/stories/fieldlabel.stories.js | 1 + components/form/stories/form.stories.js | 1 + components/form/stories/template.js | 3 - components/meter/stories/meter.stories.js | 1 + .../stories/opacitycheckerboard.stories.js | 1 + .../pagination/stories/pagination.stories.js | 1 + components/picker/stories/picker.stories.js | 21 ++-- .../stories/progressbar.stories.js | 1 + .../stories/statuslight.stories.js | 2 +- components/switch/stories/switch.stories.js | 1 + .../thumbnail/stories/thumbnail.stories.js | 1 + components/tooltip/stories/tooltip.stories.js | 1 + 34 files changed, 225 insertions(+), 169 deletions(-) diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 963eb0580fb..3e4f04d6c4d 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -3,6 +3,7 @@ This guide will show you how to quickly install Spectrum CSS and use it to display the Button component. ## Install using Node/yarn + Install the components you want along with their dependencies. Here's an example: ```shell @@ -12,26 +13,34 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `<html>` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme: ```html -<html class="spectrum spectrum--medium spectrum--light"> +<html class="spectrum spectrum--medium spectrum--light"></html> ``` Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag: ```html <head> - <!-- Include global tokens depedency first --> - <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/> + <!-- Include global tokens depedency first --> + <link + rel="stylesheet" + href="node_modules/@spectrum-css/tokens/dist/index.css" + /> - <!-- Include index.css for the components you're using --> - <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index.css"/> + <!-- Include index.css for the components you're using --> + <link + rel="stylesheet" + href="node_modules/@spectrum-css/button/dist/index.css" + /> </head> ``` Inside the `<body>` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant: ```html -<button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"> - <span class="spectrum-Button-label">Button</span> +<button + class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM" +> + <span class="spectrum-Button-label">Button</span> </button> ``` @@ -39,18 +48,26 @@ To put it all together, your final html file will look like this: ```html <html class="spectrum spectrum--light spectrum--medium"> - <head> - <link rel="stylesheet" href="node_modules/@spectrum-css/tokens/dist/index.css"/> - <link rel="stylesheet" href="node_modules/@spectrum-css/page/dist/index-vars.css"> - <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css"> - </head> - <body> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"> - <span class="spectrum-Button-label">Button</span> - </button> - </body> + <head> + <link + rel="stylesheet" + href="node_modules/@spectrum-css/tokens/dist/index.css" + /> + <link + rel="stylesheet" + href="node_modules/@spectrum-css/button/dist/index.css" + /> + </head> + <body> + <button + class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM" + > + <span class="spectrum-Button-label">Button</span> + </button> + </body> </html> ``` ## Include files from a CDN + Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `<head>` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment. diff --git a/.github/actions/file-diff/README.md b/.github/actions/file-diff/README.md index 69ee1c91426..e20ef0d7b0b 100644 --- a/.github/actions/file-diff/README.md +++ b/.github/actions/file-diff/README.md @@ -44,9 +44,8 @@ Total size of all files for this branch in bytes. name: Compare compiled output file size uses: "spectrum-tools/gh-action-file-diff" with: - head-path: ${{ github.workspace }}/pull-request - base-path: ${{ github.workspace }}/base-branch - file-glob-pattern: | - components/*/dist/*.{css,json} - components/*/dist/themes/*.css + head-path: ${{ github.workspace }}/pull-request + base-path: ${{ github.workspace }}/base-branch + file-glob-pattern: | + components/*/dist/*.{css,json} ``` diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 6ff50d3f1ae..2c13e6edfb6 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -18,7 +18,6 @@ export const withContextWrapper = makeDecorator({ } = {}, globals: { color = "light", - context = "spectrum", scale = "medium", } = {}, parameters: { @@ -39,24 +38,18 @@ export const withContextWrapper = makeDecorator({ }, }; - const original = { - color, - context, - scale, - }; + const original = { color, scale }; useEffect(() => { const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; const isRaw = Boolean(context === "raw"); - if (!isRaw) { - // add the default classes to the body to ensure labels, headings, and borders are styled correctly - document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - } - // Start by attaching the appropriate tokens to the container - toggleStyles(document.body, "tokens", tokens, !isRaw); + toggleStyles(document.body, "tokens", tokens, true); + + // add the default classes to the body to ensure labels, headings, and borders are styled correctly + document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid @@ -66,7 +59,6 @@ export const withContextWrapper = makeDecorator({ // Reset the context to the original values color = original.color; - context = original.context; scale = original.scale; let staticKey = staticColor; @@ -81,7 +73,7 @@ export const withContextWrapper = makeDecorator({ if (!staticKey) hasStaticElement = false; // Every container gets the spectrum class - container.classList.toggle("spectrum", !isRaw); + container.classList.toggle("spectrum", true); // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { @@ -95,11 +87,11 @@ export const withContextWrapper = makeDecorator({ } for (let c of ["light", "dark"]) { - container.classList.toggle(`spectrum--${c}`, c === color && !isRaw); + container.classList.toggle(`spectrum--${c}`, c === color); } for (const s of ["medium", "large"]) { - container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw); + container.classList.toggle(`spectrum--${s}`, s === scale); } if (!isTestingWrapper) { diff --git a/.storybook/manager.js b/.storybook/manager.js index 53b86a56602..1e1fe3ef8d1 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,5 +1,6 @@ import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; +import { startCase } from "lodash"; import "./assets/index.css"; @@ -64,5 +65,6 @@ addons.setConfig({ }), sidebar: { showRoots: false, + renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", }, }); diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 0c8cf3ffc82..55f8c760e4d 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -4,20 +4,6 @@ /** @type import('@storybook/types').GlobalTypes */ export default { - context: { - title: "Design context", - description: "The variation of Spectrum to use in the component", - defaultValue: "spectrum", - type: "string", - showName: true, - toolbar: { - items: [ - { value: "spectrum", title: "Spectrum 2", right: "default" }, - { value: "raw", title: "Token-free", right: "raw" }, - ], - dynamicTitle: true, - }, - }, color: { title: "Color", description: "Controls the color context of the component", diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 06487511be1..0046a1f48b3 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -23,8 +23,6 @@ ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled", ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)", - ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", @@ -193,11 +191,13 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", + "--spectrum-transparent-black-400", "--spectrum-transparent-black-500", "--spectrum-transparent-black-600", "--spectrum-transparent-black-700", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", + "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", "--spectrum-transparent-white-700", @@ -228,6 +228,7 @@ "--highcontrast-actionbutton-content-color-disabled", "--highcontrast-actionbutton-content-color-down", "--highcontrast-actionbutton-content-color-focus", - "--highcontrast-actionbutton-content-color-hover" + "--highcontrast-actionbutton-content-color-hover", + "--highcontrast-actionbutton-focus-indicator-color" ] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index bcf9af21804..f2ed2a2c58f 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,6 +11,46 @@ * governing permissions and limitations under the License. */ +@media (forced-colors: active) { + .spectrum-ActionButton { + /* force a more visible focus indicator color */ + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + + &::after { + /* make sure focus indicator renders */ + forced-color-adjust: none; + } + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } +} + .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50))); --spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100))); @@ -63,22 +103,17 @@ } &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; - --mod-actionbutton-background-color-default: transparent; --mod-actionbutton-background-color-hover: var(--spectrum-gray-100); --mod-actionbutton-background-color-down: var(--spectrum-gray-200); --mod-actionbutton-background-color-focus: var(--spectrum-gray-100); - - &:disabled:not(.is-selected), - &.is-disabled:not(.is-selected) { - --mod-actionbutton-border-color-disabled: transparent; - --mod-actionbutton-background-color-disabled: transparent; - } } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); + --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); + --mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700); + --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); @@ -97,12 +132,18 @@ } &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); + --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500); + --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); } } &.spectrum-ActionButton--staticWhite { - --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); + --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); + --mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700); + --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); @@ -121,7 +162,10 @@ } &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-background-color-default: transparent; + --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); + --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500); + --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); } } @@ -269,8 +313,6 @@ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-style: solid; - transition: background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out, @@ -422,40 +464,3 @@ a.spectrum-ActionButton { /* Augment the margin correction for the icon only scenario */ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); } - -@media (forced-colors: active) { - .spectrum-ActionButton { - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } - - &.is-selected { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - } -} diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md index 25bac02b338..04ab6e0c2e4 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -375,8 +375,15 @@ Output for all component CSS files is now being run through a lightweight optimi - refactor(actiongroup)!: replace focus-ring with focus-visible([d792847](https://github.com/adobe/spectrum-css/commit/d792847)) + ### + ### 🛑 BREAKING CHANGES +🛑 BREAKING CHANGES + + * + use native focus-visible pseudo class for focus styling + - use native focus-visible pseudo class for focus styling <a name="3.0.61"></a> diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 4158a734cac..dec566c8156 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -99,6 +99,7 @@ export default { }, packageJson, metadata, + tags: ["migrated"], }, }; diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index e9cdd3b8a14..b3cab764ac2 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -31,9 +31,6 @@ export default { control: { type: "text" }, }, items: { table: { disable: true } }, - id: { table: { disable: true } }, - testId: { table: { disable: true } }, - triggerId: { table: { disable: true } }, }, args: { isOpen: false, diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index cd49c21a70e..b6d7f22dc69 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -76,6 +76,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = AlertBannerGroup.bind({}); diff --git a/components/alertbanner/stories/alertbanner.test.js b/components/alertbanner/stories/alertbanner.test.js index dee63d20c8d..a4440153b6b 100644 --- a/components/alertbanner/stories/alertbanner.test.js +++ b/components/alertbanner/stories/alertbanner.test.js @@ -1,8 +1,39 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Container, Variants } from "@spectrum-css/preview/decorators"; import { Template } from "./template.js"; +/** + * Examples of options for contextual action button and close button. + */ +export const AlertBannerVariantsTemplate = (args, context) => Container({ + withBorder: false, + direction: "column", + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, + content: [ + Template({ + ...args, + variant: "neutral", + text: "Alert banner message. Use a short phrase to describe what's happening.", + actionButtonText: "Action", + }, context), + Template({ + ...args, + variant: "info", + text: "Alert banner message. Use a short phrase to describe what's happening.", + actionButtonText: "Action", + }, context), + Template({ + ...args, + variant: "negative", + text: "Alert banner message. Use a short phrase to describe what's happening.", + actionButtonText: "Action", + }, context), + ], +}, context); + export const AlertBannerGroup = Variants({ - Template, + Template: AlertBannerVariantsTemplate, + TestTemplate: Template, stateDirection: "column", wrapperStyles: { "inline-size": "100%", diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index b564deeed0d..ec0278583fd 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -1,6 +1,5 @@ import { Template as Button } from "@spectrum-css/button/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; -import { Template as Divider } from "@spectrum-css/divider/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; @@ -23,6 +22,12 @@ export const Template = ({ customClasses = [], customStyles = {}, } = {}, context = {}) => { + const { updateArgs } = context; + + const onclick = () => { + updateArgs({ isOpen: false }); + }; + return html` <div class=${classMap({ @@ -68,11 +73,6 @@ export const Template = ({ <div class=${classMap({ [`${rootClass}-end`]: true })}> - ${Divider({ - vertical: true, - size: "s", - tag: "div", - }, context)} ${CloseButton({ size: "m", staticColor: "white", @@ -115,62 +115,62 @@ export const TextOverflowTemplate = (args) => html` export const ActionableOptionsTemplate = (args, context) => Container({ withBorder: false, direction: "column", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, - content: html` - ${Container({ + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, + content: [ + Container({ withBorder: false, direction: "column", heading: "Action button and close button", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "Buy now", + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "Buy now", }, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Action button only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "Buy now", - showCloseButton: false, + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "Buy now", + showCloseButton: false, }, context), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Close button only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ ...args, variant: "neutral", text: "Your trial has expired", actionButtonText: "", }), - }, context)} - ${Container({ + }, context), + Container({ withBorder: false, direction: "column", heading: "Text only", - containerStyles: { alignItems: "stretch" }, - wrapperStyles: { alignItems: "stretch" }, + containerStyles: { "align-items": "stretch" }, + wrapperStyles: { "align-items": "stretch" }, content: Template({ - ...args, - variant: "neutral", - text: "Your trial has expired", - actionButtonText: "", - showCloseButton: false, + ...args, + variant: "neutral", + text: "Your trial has expired", + actionButtonText: "", + showCloseButton: false, }, context), - }, context)} - `, + }, context), + ], }, context); diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 87c83d18ff9..6f647f0e1ea 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -117,6 +117,11 @@ Information.args = { content: "If you enjoy our app, would you mind taking a moment to rate it?", }; Information.parameters = { + docs: { + story: { + height: "400px", + } + }, chromatic: { disableSnapshot: true }, }; diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 59796413ad5..0ae7ae2e131 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -60,6 +60,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 967804f4a4a..8205cbde5c8 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -101,7 +101,7 @@ export default { decorators: [ withDownStateDimensionCapture, ], - tags: ["!autodocs"], + tags: ["!autodocs", "migrated"], }; export const Default = ButtonGroups.bind({}); diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index 8845fe12ec1..79d78b47168 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -65,6 +65,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = ButtonGroup.bind({}); diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index ec418649f05..f4aa2b0561b 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -50,6 +50,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = ColorAreaGroup.bind({}); diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index f07cdf83ee7..fd827e3994f 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -46,6 +46,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = ColorLoupeGroup.bind({}); diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 9e9970e234b..51c3dbbedfc 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -36,6 +36,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = DialGroup.bind(); diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 9b62a7ad3d4..4e7f97a6657 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -172,6 +172,7 @@ export default { decorators: [ withUnderlayWrapper, ], + tags: ["migrated"], }; const ExampleContent = "Standard dialog description. This should briefly communicate any additional information or context about the standard dialog title, to help users make one of the decisions offered by the buttons. Make it no more than a few short sentences."; diff --git a/components/divider/index.css b/components/divider/index.css index 0e01578eed1..c1095df1c09 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -89,8 +89,7 @@ /* vertical dividers */ .spectrum-Divider--vertical { inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + margin-block: var(--mod-divider-vertical-margin, 0); block-size: var(--mod-divider-vertical-height, 100%); - - margin-block: var(--mod-divider-vertical-margin); - align-self: var(--mod-divider-vertical-align); + align-self: var(--mod-divider-vertical-align, flex-start); } diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 125ca52e0cf..296ef716310 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -53,6 +53,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 0d2438b9ab9..faeef1c8a02 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -108,6 +108,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/form/stories/template.js b/components/form/stories/template.js index c75456bc895..1b176395bbe 100644 --- a/components/form/stories/template.js +++ b/components/form/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Form", diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js index 15603bc9d7c..cbb31433a4b 100644 --- a/components/meter/stories/meter.stories.js +++ b/components/meter/stories/meter.stories.js @@ -48,6 +48,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index b6e6f6304ce..7640544d884 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -43,6 +43,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = OpacityCheckboardGroup.bind({}); diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index 7fa6fa909e1..a9098d40630 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -71,6 +71,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index db7edc8d806..9c65f215c39 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -1,5 +1,6 @@ +import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; @@ -68,7 +69,7 @@ export default { if: false, }, isQuiet: { - ...isQuiet, + ...isQuiet, description: "An alternative way to display the Picker without a visible background.", name: "Quiet styling", }, @@ -82,19 +83,18 @@ export default { }, control: { type: "text" }, }, - isQuiet, isOpen, isKeyboardFocused, isDisabled, isLoading: { - ...isLoading, - description: "When in the loading state, a progress circle will display next to the disclosure icon.", - if: { arg: "isDisabled", eq: false } - }, + ...isLoading, + description: "When in the loading state, a progress circle will display next to the disclosure icon.", + if: { arg: "isDisabled", eq: false } + }, isInvalid: { - ...isInvalid, - description: "When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon.", - }, + ...isInvalid, + description: "When in the invalid state, some styles change on the Picker, and an invalid icon displays next to the disclosure icon.", + }, isHovered, isActive, content: { table: { disable: true } }, @@ -149,6 +149,7 @@ export default { decorators: [ withDownStateDimensionCapture, ], + tags: ["migrated"], }; export const Default = PickerGroup.bind({}); diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index 932a4d366d0..3a6a620c07a 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -99,6 +99,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; /** diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index 66ffde71986..567bea4c55d 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -76,7 +76,7 @@ export default { packageJson, metadata, }, - decorators: [], + tags: ["migrated"], }; /** diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index 5286b307882..cc38ca06286 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -46,6 +46,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = SwitchGroup.bind({}); diff --git a/components/thumbnail/stories/thumbnail.stories.js b/components/thumbnail/stories/thumbnail.stories.js index cf32fab1dbb..aea3b4ece7d 100644 --- a/components/thumbnail/stories/thumbnail.stories.js +++ b/components/thumbnail/stories/thumbnail.stories.js @@ -95,6 +95,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; // @todo combine variants into one snapshot diff --git a/components/tooltip/stories/tooltip.stories.js b/components/tooltip/stories/tooltip.stories.js index 3a48b70e916..c7f8fe3007e 100644 --- a/components/tooltip/stories/tooltip.stories.js +++ b/components/tooltip/stories/tooltip.stories.js @@ -86,6 +86,7 @@ export default { packageJson, metadata, }, + tags: ["migrated"], }; export const Default = PlacementVariants.bind({}); From 95237f13ba094c329afcc1d2ad9d5ce622a3f52d Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Sun, 29 Dec 2024 13:05:01 -0500 Subject: [PATCH 059/103] chore: align peerDependencies to local versions --- .../actiongroup/stories/actiongroup.stories.js | 2 +- components/progressbar/package.json | 2 +- yarn.lock | 18 ++++++++++++++++-- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index dec566c8156..314083c3502 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -99,8 +99,8 @@ export default { }, packageJson, metadata, - tags: ["migrated"], }, + tags: ["migrated"], }; export const Default = ActionGroups.bind({}); diff --git a/components/progressbar/package.json b/components/progressbar/package.json index d8bfc407089..1270fb3b86c 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/fieldlabel": ">=10", + "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/yarn.lock b/yarn.lock index adbce9fbabd..1db1d243127 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5055,7 +5055,7 @@ __metadata: "@spectrum-css/fieldlabel": "npm:10.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/fieldlabel": ">=10" + "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/fieldlabel": @@ -7925,13 +7925,27 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001669": +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": version: 1.0.30001700 resolution: "caniuse-lite@npm:1.0.30001700" checksum: 10c0/3d391bcdd193208166d3ad759de240b9c18ac3759dbd57195770f0fcd2eedcd47d5e853609aba1eee5a2def44b0a14eee457796bdb3451a27de0c8b27355017c languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001646": + version: 1.0.30001660 + resolution: "caniuse-lite@npm:1.0.30001660" + checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001673 + resolution: "caniuse-lite@npm:1.0.30001673" + checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b + languageName: node + linkType: hard + "capital-case@npm:^1.0.4": version: 1.0.4 resolution: "capital-case@npm:1.0.4" From 0cd289f7e4c8fb1a61f9a6b11910e369cd07a8d2 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Fri, 3 Jan 2025 16:39:59 -0500 Subject: [PATCH 060/103] fix: use new tag to hide storybook foundations stories (#3474) Storybook foundations pages now display as a single page instead of in folders with their example stories appearing. These now use the newer !dev tag to hide them. The old custom "foundation" tag was previously used to hide them, but this tag is no longer used. Also fixes some linter errors encountered during commit; a couple unused variables and incorrect typeof comparisons. --- .changeset/plenty-trees-act.md | 5 +++++ .../action-button-corner-rounding.stories.js | 2 +- .../corner-rounding/checkbox-corner-rounding.stories.js | 8 ++------ .../corner-rounding/corner-rounding.stories.js | 4 ++-- .../foundations/down-state/button-down-state.stories.js | 2 +- .../foundations/down-state/checkbox-down-state.stories.js | 2 +- .storybook/foundations/drop-shadow/drop-shadow.stories.js | 6 +++--- 7 files changed, 15 insertions(+), 14 deletions(-) create mode 100644 .changeset/plenty-trees-act.md diff --git a/.changeset/plenty-trees-act.md b/.changeset/plenty-trees-act.md new file mode 100644 index 00000000000..793194dceab --- /dev/null +++ b/.changeset/plenty-trees-act.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/preview": patch +--- + +Updates the tags used by the stories in the "Foundations" documentation, so hidden stories remain hidden on the sidebar. diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js index 3903c4b6d41..c944ca467ab 100644 --- a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -14,7 +14,7 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, }, - tags: ['foundation'], + tags: ['!dev'], }; const ActionButton = (args, context) => html` diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js index 8f86e535d71..96aa3ce69c4 100644 --- a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -15,14 +15,10 @@ export default { handles: ['click input[type="checkbox"]'], }, }, - tags: ['foundation'], + tags: ['!dev'], }; -const Checkbox = ({ - customStyles = {}, - isChecked = false, - ...args -} = {}, context = {}) => html` +const Checkbox = (args = {}, context = {}) => html` <div style="padding: 1rem 0;"> ${Template({ ...args, iconName: undefined }, context)} </div> diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js index f413dbccff1..1080abdf4d3 100644 --- a/.storybook/foundations/corner-rounding/corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -10,10 +10,10 @@ export default { args: { rootClass: "spectrum-Foundations-Example-CornerRounding", }, - tags: ["foundation"], + tags: ["!dev"], }; -const CornerRadiusGroup = ({ customStyles = {}, ...args }, context) => html` +const CornerRadiusGroup = (args = {}, context = {}) => html` <div> <table class="spectrum-Foundations-Example-CornerRounding-table"> <thead> diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js index 2f4f0d6e39e..0d85100133e 100644 --- a/.storybook/foundations/down-state/button-down-state.stories.js +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -13,7 +13,7 @@ export default { handles: ["click .spectrum-Button"], }, }, - tags: ["foundation"], + tags: ["!dev"], }; export const ButtonDownState = Template.bind({}); diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js index 039b99faf20..88ca9f3a5d9 100644 --- a/.storybook/foundations/down-state/checkbox-down-state.stories.js +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -13,7 +13,7 @@ export default { handles: ["click input[type=\"checkbox\"]"], }, }, - tags: ["foundation"], + tags: ["!dev"], }; export const CheckboxDownState = Template.bind({}); diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js index 2c85a1d7169..6d936af9411 100644 --- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -7,7 +7,7 @@ export default { description: "Drop shadows draw attention and give the appearance of depth. By default, this style is used to show elevation, when content appears on top of other content.", component: "Drop shadow", - tags: ["foundation"], + tags: ["!dev"], }; const DropShadowSwatch = ({ @@ -19,9 +19,9 @@ const DropShadowSwatch = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--${variant}-drop-shadow`]: - typeof variant !== undefined && !!isDropShadow, + typeof variant !== "undefined" && !!isDropShadow, [`${rootClass}--${variant}-box-shadow`]: - typeof variant !== undefined && !isDropShadow, + typeof variant !== "undefined" && !isDropShadow, })} ></div> `; From ae95f0efebd37c5d258f0c5e53afe27753c7a65f Mon Sep 17 00:00:00 2001 From: Stephanie Eckles <thinkdobecreate@gmail.com> Date: Mon, 6 Jan 2025 09:35:42 -0600 Subject: [PATCH 061/103] fix: restore undefined custom properties [part 5] (#3475) --- .changeset/hip-spies-try.md | 9 +++++++++ components/datepicker/index.css | 1 + components/rating/index.css | 9 ++++++++- components/sidenav/index.css | 7 +++++++ components/slider/index.css | 24 ++++++++++++++++++++++++ 5 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 .changeset/hip-spies-try.md diff --git a/.changeset/hip-spies-try.md b/.changeset/hip-spies-try.md new file mode 100644 index 00000000000..fe265b7d8b4 --- /dev/null +++ b/.changeset/hip-spies-try.md @@ -0,0 +1,9 @@ +--- +"@spectrum-css/datepicker": patch +"@spectrum-css/rating": patch +"@spectrum-css/sidenav": patch +"@spectrum-css/slider": patch +"@spectrum-css/switch": patch +--- + +Define undefined custom properties from themes directory. diff --git a/components/datepicker/index.css b/components/datepicker/index.css index fcbf8fc0b39..2c6cd24fc1f 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -18,6 +18,7 @@ --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0); --spectrum-datepicker-border-width: var(--spectrum-border-width-100); --spectrum-datepicker-min-width: var(--mod-datepicker-min-width, var(--spectrum-field-width)); + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); --spectrum-datepicker-icon-size: var(--spectrum-workflow-icon-size-100); /* button */ diff --git a/components/rating/index.css b/components/rating/index.css index 6b2ed7acd61..38ee34ef285 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -22,6 +22,12 @@ /* Icon */ --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); + --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + /* Focus ring */ --spectrum-rating-border-radius: var(--spectrum-corner-radius-100); @@ -32,8 +38,9 @@ /* Spacing (top/bottom edge to icon) */ --spectrum-rating-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100); - /* Indicator height */ + /* Indicator */ --spectrum-rating-indicator-height: var(--spectrum-border-width-200); + --spectrum-rating-indicator-border-radius: 2px; /* Colors */ /* selected + emphasized */ diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 163a73f7590..f75a07ca5fc 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -85,6 +85,13 @@ /* color - background */ --spectrum-sidenav-background-disabled: transparent; --spectrum-sidenav-background-default: transparent; + --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/slider/index.css b/components/slider/index.css index 8d5d2f9ff6c..7d78b6adb38 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -76,6 +76,10 @@ --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); /* colors */ + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-track-fill-color-disabled: var(--spectrum-disabled-background-color); --spectrum-slider-handle-border-color-disabled: var(--spectrum-disabled-border-color); @@ -84,6 +88,19 @@ --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-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + + + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); @@ -91,6 +108,10 @@ --spectrum-slider-range-track-reset: 0; + --spectrum-slider-track-corner-radius: 2px; + + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + position: relative; /* Don't let z-index'd child elements float above other things on the page */ @@ -118,6 +139,7 @@ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-small); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-100); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); } .spectrum-Slider--sizeL { @@ -128,6 +150,7 @@ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-large); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; @@ -141,6 +164,7 @@ --spectrum-slider-label-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-slider-control-to-field-label: var(--spectrum-slider-control-to-field-label-extra-large); --spectrum-slider-value-side-padding-inline: var(--spectrum-spacing-200); + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 22px; From b2b9166e3b49bd2fdc1f51d9fded34784528532f Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 6 Jan 2025 11:45:21 -0500 Subject: [PATCH 062/103] fix: restore undefined custom properties [part 4] (#3473) * fix(search): restore missing custom properties * fix(colorwheel): restore missing custom properties * fix(assetcard): restore missing custom properties * fix(treeview): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. * fix(combobox): restore missing custom properties Restore missing properties from foundations that were flagged by the linter. Also removes a group of duplicate custom property definitions that were flagged. --- .changeset/healthy-zebras-unite.md | 9 +++++++++ components/assetcard/index.css | 4 ++++ components/colorwheel/index.css | 1 + components/combobox/index.css | 8 ++++++++ components/search/index.css | 11 +++++++++++ components/treeview/index.css | 29 +++++++++++++++++++++++++++++ 6 files changed, 62 insertions(+) create mode 100644 .changeset/healthy-zebras-unite.md diff --git a/.changeset/healthy-zebras-unite.md b/.changeset/healthy-zebras-unite.md new file mode 100644 index 00000000000..dc90d1b9b1e --- /dev/null +++ b/.changeset/healthy-zebras-unite.md @@ -0,0 +1,9 @@ +--- +"@spectrum-css/colorwheel": patch +"@spectrum-css/assetcard": patch +"@spectrum-css/combobox": patch +"@spectrum-css/treeview": patch +"@spectrum-css/search": patch +--- + +Restores missing custom properties that were flagged by the linter. The missing properties were copied from the spectrum two theme files in the foundations branch. This clears up all linter errors and warnings for these components. diff --git a/components/assetcard/index.css b/components/assetcard/index.css index b776e53414b..7b9ee81e647 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -20,6 +20,8 @@ /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; + --spectrum-assetcard-background-color: var(--spectrum-gray-75); + --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); @@ -40,6 +42,8 @@ --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); + --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* title */ --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index 9c0f9746c64..fe4b7865baf 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -27,6 +27,7 @@ --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100)); --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width)); diff --git a/components/combobox/index.css b/components/combobox/index.css index 0338d879b47..1c791073855 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -49,6 +49,14 @@ --spectrum-combobox-font-style: var(--spectrum-default-font-style); --spectrum-combobox-line-height: var(--spectrum-line-height-100); + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + + --spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); --spectrum-combobox-border-color-invalid-focus: var(--spectrum-negative-border-color-focus); diff --git a/components/search/index.css b/components/search/index.css index d72f2223e89..18a8de66124 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -49,6 +49,8 @@ --spectrum-search-to-help-text: var(--spectrum-help-text-to-component); --spectrum-search-top-to-text: var(--spectrum-component-top-to-text-100); --spectrum-search-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); /* Focus Indicator */ --spectrum-search-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); @@ -67,6 +69,12 @@ --spectrum-search-color-focus-hover: var(--spectrum-neutral-content-color-focus-hover); --spectrum-search-color-key-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-search-border-color-default: var(--spectrum-gray-500); + --spectrum-search-border-color-hover: var(--spectrum-gray-600); + --spectrum-search-border-color-focus: var(--spectrum-gray-800); + --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); + /* Background and Border */ --spectrum-search-border-width: var(--spectrum-border-width-100); @@ -118,18 +126,21 @@ --spectrum-search-block-size: var(--spectrum-component-height-75); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); } .spectrum-Search--sizeL { --spectrum-search-block-size: var(--spectrum-component-height-200); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); } .spectrum-Search--sizeXL { --spectrum-search-block-size: var(--spectrum-component-height-300); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); } @media (forced-colors: active) { diff --git a/components/treeview/index.css b/components/treeview/index.css index 34fccb03caf..20e3fd46ea6 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -56,6 +56,35 @@ --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); + --spectrum-treeview-item-border-size: var(--mod-treeview-item-border-size, var(--spectrum-border-width-200)); + --spectrum-treeview-item-border-size-selected: var(--mod-treeview-item-border-size-selected, 1px); + --spectrum-treeview-item-border-radius: var(--mod-treeview-item-border-radius, 0px); + + --spectrum-treeview-item-border-color-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected, var(--spectrum-blue-800))); + --spectrum-treeview-item-border-color-focus: var(--highcontrast-treeview-item-border-color-focus, var(--mod-treeview-item-border-color-focus, var(--spectrum-blue-700))); + + --spectrum-treeview-item-border-color-quiet-selected: var(--highcontrast-treeview-item-border-color-selected, var(--mod-treeview-item-border-color-selected-quiet, transparent)); + + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); + + --spectrum-treeview-item-icon-gap: var(--mod-treeview-item-icon-gap, var(--spectrum-text-to-visual-75)); + --spectrum-treeview-item-icon-color: var(--highcontrast-treeview-item-icon-color, var(--mod-treeview-item-icon-color, var(--spectrum-gray-700))); + --spectrum-treeview-item-icon-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-icon-color-hover, var(--spectrum-gray-900))); + --spectrum-treeview-item-icon-color-focus: var(--highcontrast-treeview-item-icon-color-focus, var(--mod-treeview-item-icon-color-focus, var(--spectrum-gray-900))); + --spectrum-treeview-item-icon-color-selected: var(--highcontrast-treeview-item-icon-color-selected, var(--mod-treeview-item-icon-color-selected, var(--spectrum-gray-900))); + --spectrum-treeview-item-icon-color-disabled: var(--highcontrast-treeview-item-icon-color-disabled, var(--mod-treeview-item-icon-color-disabled, var(--spectrum-disabled-content-color))); + + --spectrum-treeview-item-text-color: var(--highcontrast-treeview-item-text-color, var(--mod-treeview-item-text-color, var(--spectrum-neutral-content-color-default))); + --spectrum-treeview-item-text-color-selected: var(--highcontrast-treeview-item-text-color-selected, var(--mod-treeview-item-text-color-selected, var(--spectrum-gray-900))); + --spectrum-treeview-item-text-color-disabled: var(--highcontrast-treeview-item-text-color-disabled, var(--mod-treeview-item-text-color-disabled, var(--spectrum-gray-500))); + --spectrum-treeview-item-text-color-focus: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-focus, var(--spectrum-gray-900))); + --spectrum-treeview-item-text-color-hover: var(--highcontrast-treeview-item-text-color-focus, var(--mod-treeview-item-text-color-hover, var(--spectrum-gray-900))); + + --spectrum-treeview-indicator-animation-duration: var(--mod-treeview-indicator-animation-duration, var(--spectrum-animation-duration-100)); + + --spectrum-treeview-item-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-treeview-item-sized-min-block-size)); + --spectrum-treeview-font-size: var(--mod-treeview-font-size, var(--spectrum-font-size-100)); --spectrum-treeview-item-sized-min-block-size: var(--mod-treeview-item-min-block-size, var(--spectrum-component-height-100)); From ed559fe6620322e3dda862732303a749a03d3218 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Mon, 6 Jan 2025 09:15:57 -1000 Subject: [PATCH 063/103] fix(textfield,menu,tag,toast,tabs,well,popover): define custom props (#3471) * fix(popover): define --spectrum-popover-border-width in index.css * fix(well): define --spectrum-well-border-color in index.css * fix(tabs): define --spectrum-tabs-font-weight * fix(toast): define default background color and divider color * fix(tag): define undefined custom properties * fix(menu): define menu item background colors * fix(textfield): define undefined custom properties --- components/tag/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/tag/package.json b/components/tag/package.json index 5fffbf2c2a0..4bb576e74c5 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/avatar": ">=9.0.0 <10.0.0", "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/yarn.lock b/yarn.lock index 1db1d243127..c58a91368f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5359,7 +5359,7 @@ __metadata: peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/avatar": @@ -7926,9 +7926,9 @@ __metadata: linkType: hard "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001700 - resolution: "caniuse-lite@npm:1.0.30001700" - checksum: 10c0/3d391bcdd193208166d3ad759de240b9c18ac3759dbd57195770f0fcd2eedcd47d5e853609aba1eee5a2def44b0a14eee457796bdb3451a27de0c8b27355017c + version: 1.0.30001699 + resolution: "caniuse-lite@npm:1.0.30001699" + checksum: 10c0/e87b3a0602c3124131f6a21f1eb262378e17a2ee3089e3c472ac8b9caa85cf7d6a219655379302c29c6f10a74051f2a712639d7f98ee0444c73fefcbaf25d519 languageName: node linkType: hard From 049f787b10a1dbfb79218315889cddc4a34afd19 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Wed, 8 Jan 2025 13:45:06 -0500 Subject: [PATCH 064/103] docs(avatar): update sizing documentation (#3483) --- components/avatar/stories/avatar.stories.js | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/components/avatar/stories/avatar.stories.js b/components/avatar/stories/avatar.stories.js index 0ae7ae2e131..7cdf32f408d 100644 --- a/components/avatar/stories/avatar.stories.js +++ b/components/avatar/stories/avatar.stories.js @@ -75,19 +75,7 @@ export const Default = AvatarGroup.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // -/** Avatar sizes scale exponentially, based on the Spectrum type scale. These range from size-50 to size-700, with the default size for an avatar being `100`. An avatar can also be customized to fit appropriately for your context. - * - * Avatar is available in many sizes using the required `.spectrum-Avatar--size<number>` class. The available size classes are: - -- `spectrum-Avatar--size50` -- `spectrum-Avatar--size75` -- `spectrum-Avatar--size100` -- `spectrum-Avatar--size200` -- `spectrum-Avatar--size300` -- `spectrum-Avatar--size400` -- `spectrum-Avatar--size500` -- `spectrum-Avatar--size600` -- `spectrum-Avatar--size700` +/** Avatar is available in many sizes and scales exponentially, based on the Spectrum type scale. These sizes range from size-50 to size-1500, using the required `.spectrum-Avatar--size<number>` class. The default size for an avatar is `100`. An avatar can also be customized to fit appropriately for your context. */ export const Sizing = (args, context) => Sizes({ Template, From 8a3216299f895c94b69c6cb76b6efdd5569a6a06 Mon Sep 17 00:00:00 2001 From: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Date: Mon, 13 Jan 2025 05:08:50 -1000 Subject: [PATCH 065/103] fix(calendar,dial,pickerbutton,progressbar,radio,stepper): unused custom properties (#3487) * fix(pickerbutton): add missing custom properties * fix(radio): add missing custom props * fix(calendar): add missing custom properties * fix(stepper): define unused custom props * fix(progressbar): remove unused custom properties; change background-color to background see #2929; fix static color * fix(dial): remove unused custom properties; add undefined custom properties --- .changeset/wicked-dragons-cheer.md | 17 +++ components/calendar/index.css | 1 + components/dial/index.css | 2 + components/pickerbutton/dist/metadata.json | 2 + components/pickerbutton/index.css | 10 ++ components/progressbar/index.css | 8 +- components/radio/dist/metadata.json | 1 - components/radio/index.css | 7 +- components/stepper/dist/metadata.json | 2 - components/stepper/index.css | 162 ++++++++++----------- 10 files changed, 119 insertions(+), 93 deletions(-) create mode 100644 .changeset/wicked-dragons-cheer.md diff --git a/.changeset/wicked-dragons-cheer.md b/.changeset/wicked-dragons-cheer.md new file mode 100644 index 00000000000..db2204d0232 --- /dev/null +++ b/.changeset/wicked-dragons-cheer.md @@ -0,0 +1,17 @@ +--- +"@spectrum-css/pickerbutton": patch +"@spectrum-css/progressbar": patch +"@spectrum-css/calendar": patch +"@spectrum-css/stepper": patch +"@spectrum-css/radio": patch +"@spectrum-css/dial": patch +--- + +Fixes to align `spectrum-two` with `s2-foundations-redux`/`main`, mostly defining unused custom properties, but addresses any other lint warnings or inconsistencies noted in the following components: + +**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux` +**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties +**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux` +**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients +**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux` +**Stepper**: moves high contrast block further down to align with other components' CSS structure, defines multiple undefined custom properties, adds disable-next-line comment to suppress no-unused-custom-properties warning diff --git a/components/calendar/index.css b/components/calendar/index.css index 5dfa423d94c..68b3c73e049 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -48,6 +48,7 @@ --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); diff --git a/components/dial/index.css b/components/dial/index.css index 1db955a115f..4e891ef1b17 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -25,6 +25,8 @@ --spectrum-dial-min-max-tick-color: var(--spectrum-gray-600); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-label-text-color: var(--spectrum-gray-700); --spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700); --spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400); diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 221fc5c9c01..c5d5a45af1d 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -107,10 +107,12 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-body-sans-serif-font-weight", + "--spectrum-border-width-100", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-corner-radius-100", "--spectrum-corner-radius-200", "--spectrum-corner-radius-75", "--spectrum-default-font-style", diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index 5114b50d712..e9f41ae796b 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -48,7 +48,17 @@ --spectrum-picker-button-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-picker-button-font-size: var(--spectrum-font-size-100); + --spectrum-picker-button-border-color: inherit; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-picker-button-border-radius-rounded-sided: 0; + --spectrum-picker-button-border-radius-sided: 0; + --spectrum-picker-button-border-width: var(--spectrum-border-width-100); --spectrum-picker-button-border-radius-rounded: var(--spectrum-corner-radius-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-background-animation-duration: var(--spectrum-animation-duration-100); &:hover { diff --git a/components/progressbar/index.css b/components/progressbar/index.css index e69d5328da7..a45e9285b09 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -133,14 +133,14 @@ block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); border-radius: var(--spectrum-progressbar-corner-radius); - background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); + background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))); } .spectrum-ProgressBar-fill { border: none; block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness)); transition: width 1s; - background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); + background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))); } } @@ -183,7 +183,7 @@ .spectrum-ProgressBar--staticWhite { .spectrum-ProgressBar-fill { color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white)); - background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); + background: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))); } .spectrum-ProgressBar-label, @@ -192,7 +192,7 @@ } .spectrum-ProgressBar-track { - background-color: var(--spectrum-progressbar-track-color-white); + background: var(--spectrum-progressbar-track-color-white); } } diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index 8f7e7985ca0..a517304c965 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -127,7 +127,6 @@ "--spectrum-accent-color-1100", "--spectrum-accent-color-900", "--spectrum-animation-duration-100", - "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", diff --git a/components/radio/index.css b/components/radio/index.css index c391935c97e..04d37e076bc 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -47,8 +47,11 @@ --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - /* selection indicator all themes */ - --spectrum-radio-border-width: var(--spectrum-border-width-200); + /* unchecked selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); /* checked selection indicator */ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index 800b4f022b6..6b3f887214a 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -115,7 +115,6 @@ "global": [ "--spectrum-animation-duration-100", "--spectrum-border-width-100", - "--spectrum-border-width-200", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-300", @@ -126,7 +125,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-gray-25", - "--spectrum-gray-300", "--spectrum-gray-50", "--spectrum-gray-500", "--spectrum-gray-600", diff --git a/components/stepper/index.css b/components/stepper/index.css index cb35ba620b7..f5c206e179f 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -11,13 +11,28 @@ * governing permissions and limitations under the License. */ - .spectrum-Stepper { +/* --- Component-level definitions --- */ +.spectrum-Stepper { --spectrum-stepper-border-width: var(--spectrum-border-width-100); --spectrum-stepper-border-color-default: var(--spectrum-gray-500); --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800); --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); + --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); + --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); + + --spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); + --spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))); + + --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); + + &, + &.spectrum-Stepper--sizeM { + --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); + --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); + } --spectrum-stepper-buttons-border-style: none; --spectrum-stepper-buttons-border-width: 0; @@ -36,90 +51,8 @@ --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); /** Disabled **/ - --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); -} - -.spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; -} - -/* --- High contrast settings --- */ -@media (forced-colors: active) { - .spectrum-Stepper { - --highcontrast-stepper-border-color: CanvasText; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: CanvasText; - --highcontrast-stepper-focus-indicator-color: Highlight; - - &.is-invalid { - --highcontrast-stepper-border-color: Highlight; - --highcontrast-stepper-border-color-hover: Highlight; - --highcontrast-stepper-border-color-focus: Highlight; - --highcontrast-stepper-border-color-focus-hover: Highlight; - --highcontrast-stepper-border-color-keyboard-focus: Highlight; - } - - &.is-disabled { - --highcontrast-stepper-border-color: GrayText; - --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); - } - - &:not(.is-disabled) { - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover); - } - - &.is-focused, - &:focus { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus); - - &:hover { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover); - } - } - - &.is-keyboardFocused, - &:focus-visible { - --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus); - } - } - } - - /* @passthrough start */ - .spectrum-Stepper-input { - --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color); - } - /* @passthrough end */ - - /* @passthrough start */ - .spectrum-Stepper-button { - --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color); - --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color); - } - /* @passthrough end */ -} - -/* --- Component-level definitions --- */ -.spectrum-Stepper { - --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); - --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); - - --spectrum-stepper-focus-indicator-width: var(--mod-stepper-focus-indicator-width, var(--spectrum-focus-indicator-thickness)); - --spectrum-stepper-focus-indicator-gap: var(--mod-stepper-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); - --spectrum-stepper-focus-indicator-color: var(--highcontrast-stepper-focus-indicator-color, var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))); - - --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); - } &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); @@ -169,6 +102,9 @@ } &.spectrum-Stepper--quiet { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used by --mod-infield-button-inner-edge-to-fill and --mod-infield-button-edge-to-fill */ + --spectrum-stepper-button-edge-to-fill: 0; + --mod-stepper-buttons-background-color: transparent; /* quiet hover */ @@ -189,6 +125,64 @@ } } +/* --- High contrast settings --- */ +@media (forced-colors: active) { + .spectrum-Stepper { + --highcontrast-stepper-border-color: CanvasText; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: CanvasText; + --highcontrast-stepper-focus-indicator-color: Highlight; + + &.is-invalid { + --highcontrast-stepper-border-color: Highlight; + --highcontrast-stepper-border-color-hover: Highlight; + --highcontrast-stepper-border-color-focus: Highlight; + --highcontrast-stepper-border-color-focus-hover: Highlight; + --highcontrast-stepper-border-color-keyboard-focus: Highlight; + } + + &.is-disabled { + --highcontrast-stepper-border-color: GrayText; + --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)); + } + + &:not(.is-disabled) { + &:hover { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-hover); + } + + &.is-focused, + &:focus { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus); + + &:hover { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-focus-hover); + } + } + + &.is-keyboardFocused, + &:focus-visible { + --highcontrast-stepper-border-color: var(--highcontrast-stepper-border-color-keyboard-focus); + } + } + } + + /* @passthrough start */ + .spectrum-Stepper-input { + --highcontrast-textfield-border-color: var(--highcontrast-stepper-border-color); + } + /* @passthrough end */ + + /* @passthrough start */ + .spectrum-Stepper-button { + --highcontrast-infield-button-border-color: var(--highcontrast-stepper-border-color); + --highcontrast-infield-button-border-color-active: var(--highcontrast-stepper-border-color); + } + /* @passthrough end */ +} + /* --- Component-level passthroughs for nested components --- */ /* @passthrough start -- MODS for sub components */ .spectrum-Stepper { From d1521e23dd8d910595b879fc3903ec54e82303b9 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" <castastrophe@users.noreply.github.com> Date: Tue, 21 Jan 2025 14:38:02 -0500 Subject: [PATCH 066/103] chore: fix storybook import errors --- .storybook/decorators/context.js | 3 +-- components/badge/stories/badge.stories.js | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 2c13e6edfb6..7a736433855 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -43,7 +43,6 @@ export const withContextWrapper = makeDecorator({ useEffect(() => { const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; - const isRaw = Boolean(context === "raw"); // Start by attaching the appropriate tokens to the container toggleStyles(document.body, "tokens", tokens, true); @@ -104,7 +103,7 @@ export const withContextWrapper = makeDecorator({ } } - }, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); + }, [viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); return StoryFn(data); }, diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js index 7d5a17662d6..4de26b9b9fa 100644 --- a/components/badge/stories/badge.stories.js +++ b/components/badge/stories/badge.stories.js @@ -1,4 +1,3 @@ -import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { ArgGrid } from "@spectrum-css/preview/decorators"; import { Sizes } from "@spectrum-css/preview/decorators/utilities.js"; From 91d2cf4c4de62d8780ab6373ac6dd2c758967aef Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Tue, 21 Jan 2025 13:48:21 -0800 Subject: [PATCH 067/103] fix(actionbutton,avatar,button,dialog): define missing custom properties from theme directory (#3517) * restore missing mods and tokens * restore missing mod and update metadata --- .changeset/sixty-crabs-thank.md | 8 ++ components/actionbutton/dist/metadata.json | 4 +- components/actionbutton/index.css | 110 ++++++++++----------- components/avatar/dist/metadata.json | 5 +- components/avatar/index.css | 2 +- components/button/index.css | 4 + components/dialog/dist/metadata.json | 2 +- components/dialog/index.css | 2 +- 8 files changed, 72 insertions(+), 65 deletions(-) create mode 100644 .changeset/sixty-crabs-thank.md diff --git a/.changeset/sixty-crabs-thank.md b/.changeset/sixty-crabs-thank.md new file mode 100644 index 00000000000..5d53813dc55 --- /dev/null +++ b/.changeset/sixty-crabs-thank.md @@ -0,0 +1,8 @@ +--- +"@spectrum-css/actionbutton": patch +"@spectrum-css/avatar": patch +"@spectrum-css/button": patch +"@spectrum-css/dialog": patch +--- + +Define undefined properties from theme directory. diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 0046a1f48b3..59bf8543946 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -23,6 +23,8 @@ ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled", ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton.spectrum-ActionButton--quiet", + ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)", + ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", @@ -191,13 +193,11 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-400", "--spectrum-transparent-black-500", "--spectrum-transparent-black-600", "--spectrum-transparent-black-700", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-400", "--spectrum-transparent-white-500", "--spectrum-transparent-white-600", "--spectrum-transparent-white-700", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index f2ed2a2c58f..f3c1b270ee0 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -11,46 +11,6 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ActionButton { - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - - &::after { - /* make sure focus indicator renders */ - forced-color-adjust: none; - } - - &.is-selected { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; - - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; - - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; - } - } - } -} - .spectrum-ActionButton { --spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50))); --spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100))); @@ -103,17 +63,22 @@ } &.spectrum-ActionButton--quiet { + --mod-actionbutton-border-color-default: transparent; + --mod-actionbutton-background-color-default: transparent; --mod-actionbutton-background-color-hover: var(--spectrum-gray-100); --mod-actionbutton-background-color-down: var(--spectrum-gray-200); --mod-actionbutton-background-color-focus: var(--spectrum-gray-100); + + &:disabled:not(.is-selected), + &.is-disabled:not(.is-selected) { + --mod-actionbutton-border-color-disabled: transparent; + --mod-actionbutton-background-color-disabled: transparent; + } } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); - --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); - --mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700); - --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + --mod-actionbutton-background-color-default: transparent; --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); @@ -132,18 +97,12 @@ } &.spectrum-ActionButton--quiet { - --mod-actionbutton-background-color-default: transparent; - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-black-400); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-black-500); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-black-400); + --mod-actionbutton-border-color-default: transparent; } } &.spectrum-ActionButton--staticWhite { - --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); - --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); - --mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700); - --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); + --mod-actionbutton-background-color-default: transparent; --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); @@ -162,10 +121,7 @@ } &.spectrum-ActionButton--quiet { - --mod-actionbutton-background-color-default: transparent; - --mod-actionbutton-background-color-hover: var(--spectrum-transparent-white-400); - --mod-actionbutton-background-color-down: var(--spectrum-transparent-white-500); - --mod-actionbutton-background-color-focus: var(--spectrum-transparent-white-400); + --mod-actionbutton-border-color-default: transparent; } } @@ -313,6 +269,8 @@ /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; + border-style: solid; + transition: background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-out, @@ -464,3 +422,43 @@ a.spectrum-ActionButton { /* Augment the margin correction for the icon only scenario */ margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); } + +@media (forced-colors: active) { + .spectrum-ActionButton { + /* force a more visible focus indicator color */ + --highcontrast-actionbutton-focus-indicator-color: ButtonText; + + &::after { + /* make sure focus indicator renders */ + forced-color-adjust: none; + } + + &.is-selected { + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-background-color-hover: Highlight; + --highcontrast-actionbutton-background-color-focus: Highlight; + --highcontrast-actionbutton-background-color-down: Highlight; + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + + --highcontrast-actionbutton-border-color-default: HighlightText; + --highcontrast-actionbutton-border-color-hover: HighlightText; + --highcontrast-actionbutton-border-color-focus: HighlightText; + --highcontrast-actionbutton-border-color-down: HighlightText; + --highcontrast-actionbutton-border-color-disabled: GrayText; + + --highcontrast-actionbutton-content-color-default: HighlightText; + --highcontrast-actionbutton-content-color-hover: HighlightText; + --highcontrast-actionbutton-content-color-focus: HighlightText; + --highcontrast-actionbutton-content-color-down: HighlightText; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* ensure custom text colors from above get applied */ + /* it seems like this shouldn't have to be done, but colors are wrong without it */ + forced-color-adjust: none; + } + } + } +} diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 8c6f9792c1d..6b5fb54aac2 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -73,8 +73,5 @@ "--spectrum-focus-indicator-thickness" ], "passthroughs": [], - "high-contrast": [ - "--highcontrast-avatar-color-opacity-disabled", - "--highcontrast-avatar-focus-indicator-color" - ] + "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] } diff --git a/components/avatar/index.css b/components/avatar/index.css index ceea0e03702..e6203f003d8 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -140,7 +140,7 @@ opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); &.is-disabled { - opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); + opacity: var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)); } } diff --git a/components/button/index.css b/components/button/index.css index 5359bf05d7f..4acd3c43af1 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -532,6 +532,10 @@ a.spectrum-Button { /* Forced colors / high contrast mode */ @media (forced-colors: active) { .spectrum-Button { + --highcontrast-button-border-color-default: ButtonBorder; + --highcontrast-button-border-color-hover: ButtonBorder; + --highcontrast-button-border-color-focus: ButtonBorder; + --highcontrast-button-border-color-down: ButtonBorder; --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; --highcontrast-button-background-color-disabled: ButtonFace; diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 7a0c521ff2b..33753fbe8ed 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -120,5 +120,5 @@ "--mod-buttongroup-flex-wrap", "--mod-buttongroup-justify-content" ], - "high-contrast": ["--highcontrast-standard-dialog-border-color"] + "high-contrast": [] } diff --git a/components/dialog/index.css b/components/dialog/index.css index d83c7920258..cd89fe5956a 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -414,6 +414,6 @@ @media (forced-colors: active) { .spectrum-Dialog { - border: 1px solid var(--highcontrast-standard-dialog-border-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + border: 1px solid rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); } } From ce189d045a5a4d8fc9ad822dacd12209c45a6b4f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 22 Jan 2025 01:48:39 +0000 Subject: [PATCH 068/103] chore: release (next) (#3513) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> --- .changeset/big-chairs-care.md | 1 - .changeset/plenty-trees-act.md | 5 -- .changeset/pre.json | 19 ++++- .changeset/sixty-vans-thank.md | 1 - .changeset/weak-kings-pretend.md | 108 ---------------------------- .changeset/young-cheetahs-peel.md | 1 - .storybook/CHANGELOG.md | 1 - components/clearbutton/CHANGELOG.md | 4 +- components/sidenav/CHANGELOG.md | 4 +- yarn.lock | 26 ++++++- 10 files changed, 45 insertions(+), 125 deletions(-) delete mode 100644 .changeset/plenty-trees-act.md delete mode 100644 .changeset/weak-kings-pretend.md diff --git a/.changeset/big-chairs-care.md b/.changeset/big-chairs-care.md index 1e06436bf8b..9e647419cbc 100644 --- a/.changeset/big-chairs-care.md +++ b/.changeset/big-chairs-care.md @@ -1,6 +1,5 @@ --- "@spectrum-css/picker": minor -"@spectrum-css/tokens": minor --- Update background and border color for picker in Spectrum 2 theme [SWC-575] diff --git a/.changeset/plenty-trees-act.md b/.changeset/plenty-trees-act.md deleted file mode 100644 index 793194dceab..00000000000 --- a/.changeset/plenty-trees-act.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/preview": patch ---- - -Updates the tags used by the stories in the "Foundations" documentation, so hidden stories remain hidden on the sidebar. diff --git a/.changeset/pre.json b/.changeset/pre.json index ae18fc160b9..1e10d3b6036 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -102,8 +102,25 @@ }, "changesets": [ "big-chairs-care", + "chilly-peaches-sniff", + "few-doors-smile", + "fresh-seahorses-join", + "friendly-dolls-raise", + "healthy-zebras-unite", + "hip-spies-try", + "hot-books-fail", + "light-years-speak", + "mean-eggs-learn", + "metal-fireants-switch", + "nine-kings-repair", + "proud-jokes-rule", + "sixty-crabs-thank", "sixty-vans-thank", - "weak-kings-pretend", + "spotty-onions-study", + "strange-glasses-allow", + "tame-bobcats-beam", + "twenty-tables-know", + "wicked-dragons-cheer", "young-cheetahs-peel" ] } diff --git a/.changeset/sixty-vans-thank.md b/.changeset/sixty-vans-thank.md index abce22caac8..1a3af0f2e8f 100644 --- a/.changeset/sixty-vans-thank.md +++ b/.changeset/sixty-vans-thank.md @@ -1,6 +1,5 @@ --- "@spectrum-css/combobox": minor -"@spectrum-css/tokens": minor --- Update border and background color values for Combobox states [SWC-582] diff --git a/.changeset/weak-kings-pretend.md b/.changeset/weak-kings-pretend.md deleted file mode 100644 index 5f347b589db..00000000000 --- a/.changeset/weak-kings-pretend.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -"@spectrum-css/tokens": minor -"@spectrum-css/floatingactionbutton": major -"@spectrum-css/opacitycheckerboard": major -"@spectrum-css/illustratedmessage": major -"@spectrum-css/coachindicator": major -"@spectrum-css/contextualhelp": major -"@spectrum-css/progresscircle": major -"@spectrum-css/dropindicator": major -"@spectrum-css/infieldbutton": major -"@spectrum-css/actionbutton": major -"@spectrum-css/pickerbutton": major -"@spectrum-css/actiongroup": major -"@spectrum-css/alertbanner": major -"@spectrum-css/alertdialog": major -"@spectrum-css/buttongroup": major -"@spectrum-css/clearbutton": major -"@spectrum-css/closebutton": major -"@spectrum-css/colorhandle": major -"@spectrum-css/colorslider": major -"@spectrum-css/inlinealert": major -"@spectrum-css/logicbutton": major -"@spectrum-css/progressbar": major -"@spectrum-css/statuslight": major -"@spectrum-css/swatchgroup": major -"@spectrum-css/actionmenu": major -"@spectrum-css/breadcrumb": major -"@spectrum-css/colorloupe": major -"@spectrum-css/colorwheel": major -"@spectrum-css/datepicker": major -"@spectrum-css/fieldgroup": major -"@spectrum-css/fieldlabel": major -"@spectrum-css/pagination": major -"@spectrum-css/typography": major -"@spectrum-css/accordion": major -"@spectrum-css/actionbar": major -"@spectrum-css/assetcard": major -"@spectrum-css/assetlist": major -"@spectrum-css/coachmark": major -"@spectrum-css/colorarea": major -"@spectrum-css/splitview": major -"@spectrum-css/textfield": major -"@spectrum-css/thumbnail": major -"@spectrum-css/calendar": major -"@spectrum-css/checkbox": major -"@spectrum-css/combobox": major -"@spectrum-css/dropzone": major -"@spectrum-css/helptext": major -"@spectrum-css/steplist": major -"@spectrum-css/taggroup": major -"@spectrum-css/treeview": major -"@spectrum-css/underlay": major -"@spectrum-css/divider": major -"@spectrum-css/popover": major -"@spectrum-css/sidenav": major -"@spectrum-css/stepper": major -"@spectrum-css/tooltip": major -"@spectrum-css/avatar": major -"@spectrum-css/button": major -"@spectrum-css/dialog": major -"@spectrum-css/miller": major -"@spectrum-css/picker": major -"@spectrum-css/rating": major -"@spectrum-css/search": major -"@spectrum-css/slider": major -"@spectrum-css/swatch": major -"@spectrum-css/switch": major -"@spectrum-css/asset": major -"@spectrum-css/badge": major -"@spectrum-css/modal": major -"@spectrum-css/radio": major -"@spectrum-css/table": major -"@spectrum-css/toast": major -"@spectrum-css/card": major -"@spectrum-css/dial": major -"@spectrum-css/icon": major -"@spectrum-css/link": major -"@spectrum-css/menu": major -"@spectrum-css/tabs": major -"@spectrum-css/tray": major -"@spectrum-css/well": major -"@spectrum-css/tag": major -"@spectrum-css/meter": major -"@spectrum-css/form": major ---- - -feat: s2 foundations non-gray-800 colors update - -| Property name | Context | Old value | Updated value | -| --------------------------- | ------- | ------------------ | ------------------ | -| `--spectrum-blue-800` | dark | rgb(69, 110, 254) | rgb(64, 105, 253) | -| `--spectrum-red-800` | dark | rgb(230, 54, 35) | rgb(223, 52, 34) | -| `--spectrum-orange-800` | dark | rgb(205, 86, 0) | rgb(199, 82, 0) | -| `--spectrum-yellow-800` | dark | rgb(169, 110, 0) | rgb(164, 106, 0) | -| `--spectrum-chartreuse-800` | dark | rgb(109, 131, 0) | rgb(106, 127, 0) | -| `--spectrum-celery-800` | dark | rgb(69, 138, 19) | rgb(66, 134, 18) | -| `--spectrum-green-800` | dark | rgb(6, 140, 82) | rgb(6, 136, 80) | -| `--spectrum-seafoam-800` | dark | rgb(8, 138, 116) | rgb(8, 134, 112) | -| `--spectrum-cyan-800` | dark | rgb(15, 128, 194) | rgb(13, 125, 186) | -| `--spectrum-indigo-800` | dark | rgb(119, 97, 252) | rgb(116, 91, 252) | -| `--spectrum-purple-800` | dark | rgb(161, 84, 229) | rgb(157, 78, 228) | -| `--spectrum-fuchsia-800` | dark | rgb(192, 64, 212) | rgb(186, 60, 206) | -| `--spectrum-magenta-800` | dark | rgb(231, 41, 105) | rgb(224, 38, 101) | -| `--spectrum-pink-800` | dark | rgb(220, 47, 156) | rgb(213, 45, 151) | -| `--spectrum-turqoise-800` | dark | rgb(9, 135, 147) | rgb(9, 131, 142) | -| `--spectrum-brown-800` | dark | rgb(148, 118, 73) | rgb(143, 114, 69) | -| `--spectrum-silver-800` | dark | rgb(123, 123, 123) | rgb(118, 118, 118) | -| `--spectrum-cinnamon-800` | dark | rgb(179, 103, 64) | rgb(176, 98, 59) | diff --git a/.changeset/young-cheetahs-peel.md b/.changeset/young-cheetahs-peel.md index 960240851c5..81a0d59185b 100644 --- a/.changeset/young-cheetahs-peel.md +++ b/.changeset/young-cheetahs-peel.md @@ -1,6 +1,5 @@ --- "@spectrum-css/combobox": patch -"@spectrum-css/tokens": patch --- Bug fix to retain border color values in S1 for combobox [SWC-582] diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md index efb36537a50..2b51f88ab6f 100644 --- a/.storybook/CHANGELOG.md +++ b/.storybook/CHANGELOG.md @@ -498,7 +498,6 @@ This component has been deprecated. Use an action bar to allow users to perform ### 🛑 BREAKING CHANGES - @spectrum-css/icon will no longer contain SVG assets; it will be a purely CSS package with all SVG assets migrated to the new @spectrum-css/ui-icons package. - - NEW: @spectrum-css/ui-icons package for all SVG icons in the UI set. <a name="6.0.1"></a> diff --git a/components/clearbutton/CHANGELOG.md b/components/clearbutton/CHANGELOG.md index 79a4b385294..3f80a03cb79 100644 --- a/components/clearbutton/CHANGELOG.md +++ b/components/clearbutton/CHANGELOG.md @@ -187,9 +187,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - * - - Removes component-builder & component-builder-simple for script leveraging postcss - +- Removes component-builder & component-builder-simple for script leveraging postcss - Imports added to index.css and themes/express.css <a name="5.1.4"></a> diff --git a/components/sidenav/CHANGELOG.md b/components/sidenav/CHANGELOG.md index a22479c0c29..64bd74a5963 100644 --- a/components/sidenav/CHANGELOG.md +++ b/components/sidenav/CHANGELOG.md @@ -180,9 +180,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - * - - Removes component-builder & component-builder-simple for script leveraging postcss - +- Removes component-builder & component-builder-simple for script leveraging postcss - Imports added to index.css and themes/express.css <a name="4.2.4"></a> diff --git a/yarn.lock b/yarn.lock index c58a91368f4..171d1864625 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4489,7 +4489,31 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dialog@npm:12.1.0, @spectrum-css/dialog@workspace:^, @spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@npm:12.1.0": + version: 12.1.0 + resolution: "@spectrum-css/dialog@npm:12.1.0" + peerDependencies: + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/modal": ">=7.0.0 <8.0.0" + "@spectrum-css/tokens": ">=16.0.0 <17.0.0" + "@spectrum-css/underlay": ">=6.0.0 <7.0.0" + peerDependenciesMeta: + "@spectrum-css/closebutton": + optional: true + "@spectrum-css/divider": + optional: true + "@spectrum-css/modal": + optional: true + "@spectrum-css/tokens": + optional: true + "@spectrum-css/underlay": + optional: true + checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75 + languageName: node + linkType: hard + +"@spectrum-css/dialog@workspace:^, @spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: From e1ef019633a5075d819feca242789176c9312684 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Wed, 22 Jan 2025 13:40:52 -0500 Subject: [PATCH 069/103] chore: spectrum-two fixes (#3514) * docs(tooltip): add missing args to template - Tooltip was missing the `variant = "neutral"` arg, so adding that back in renders the component * chore(picker): add/correct arg naming - adds missing placeholder arg to template - corrects content arg to popoverContent * chore(picker): remove window.isChromatic calls and click event --- components/picker/stories/picker.stories.js | 2 +- components/picker/stories/template.js | 19 +++++++------------ components/tooltip/stories/template.js | 1 + 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index 9c65f215c39..45c32f3872a 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -97,7 +97,7 @@ export default { }, isHovered, isActive, - content: { table: { disable: true } }, + popoverContent: { table: { disable: true } }, }, args: { rootClass: "spectrum-Picker", diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 806c2782834..a9c06a3f817 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -64,8 +64,7 @@ export const Picker = ({ id=${id} style=${styleMap(customStyles)} type="button" - @click=${() => { - if (window.isChromatic()) return; + @click=${function() { updateArgs({ isOpen: !isOpen }); }} aria-labelledby=${ifDefined(ariaLabeledBy)} @@ -109,6 +108,7 @@ export const Template = ({ size = "m", label, labelPosition = "top", + placeholder, helpText, isQuiet = false, isOpen = false, @@ -125,7 +125,7 @@ export const Template = ({ // Helps ensure that Popover appears below the Picker, with side labels layout. display: "block", }, - content = [], + popoverContent = [], } = {}, context = {}) => { const pickerMarkup = Picker({ size, @@ -134,17 +134,18 @@ export const Template = ({ isInvalid, isDisabled, isLoading, - content, + placeholder, + popoverContent, labelPosition, ariaLabeledBy: fieldLabelId, }, context); - const popoverMarkup = content.length !== 0 ? Popover({ + const popoverMarkup = popoverContent.length !== 0 ? Popover({ isOpen: isOpen && !isDisabled && !isLoading, withTip: false, position: "bottom", isQuiet, - content, + content: popoverContent, size, customStyles: customPopoverStyles, }, context) : ""; @@ -193,12 +194,6 @@ export const Template = ({ }, context) )} </div>`; - - // Make sure there is a wrapper around sibling components when using the Chromatic - // template, so their layout is not affected by the flex and grid layouts used. - if (window.isChromatic()) { - return html`<div style="position: relative;">${markup}</div>`; - } return markup; }; diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 1457ae2b95f..61cf2ce81b2 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -12,6 +12,7 @@ export const Template = ({ rootClass = "spectrum-Tooltip", label, placement, + variant = "neutral", isOpen = true, isFocused = false, showOnHover = false, From 0c52c4820a3c5fb0881f23c6144fb0d0bd9a35cf Mon Sep 17 00:00:00 2001 From: Aziz Ramos <abdulr@adobe.com> Date: Sun, 10 Nov 2024 14:56:21 -0500 Subject: [PATCH 070/103] feat(progress-circle): migrating s2 tokens --- .changeset/itchy-kids-travel.md | 24 + components/progresscircle/animation.css | 493 +------------ components/progresscircle/dist/metadata.json | 97 +-- components/progresscircle/index.css | 665 ++---------------- .../stories/progresscircle.stories.js | 35 +- .../stories/progresscircle.test.js | 4 + components/progresscircle/stories/template.js | 59 +- tasks/component-reporter.js | 3 + tools/generator/templates/package.json.hbs | 3 +- 9 files changed, 179 insertions(+), 1204 deletions(-) create mode 100644 .changeset/itchy-kids-travel.md diff --git a/.changeset/itchy-kids-travel.md b/.changeset/itchy-kids-travel.md new file mode 100644 index 00000000000..06e87f65e00 --- /dev/null +++ b/.changeset/itchy-kids-travel.md @@ -0,0 +1,24 @@ +--- +"@spectrum-css/progresscircle": major +--- + +## Progress circle S2 migration + +This is the S2 migration of the progress circle. The original markup has changed to an svg and circle element to allow CSS styles such as `stroke-linecap`. This was necessary to match the design. The `--small/--medium/--large` sizing classes have been deprecated in favor of t-shirt classes `--sizeS/--sizeM/--sizeL` + +### Animation + +`@keyframes spectrum-dashoffset-animation`: +This animation was created by React Spectrum and used to keep the same speed and bezier curve. + +### Added tokens + +### Removed styles & mods + +`--spectrum-progress-circle-track-border-color-over-background` +`--spectrum-progress-circle-fill-border-color-over-background` +`--spectrum-progress-circle-track-border-style` +`--spectrum-progress-circle-track-border-style` +`--highcontrast-progress-circle-track-border-style` +`--mod-progress-circle-track-border-style` +`--spectrum-progress-circle-track-border-style` diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css index 176d4da4c17..433f642948b 100644 --- a/components/progresscircle/animation.css +++ b/components/progresscircle/animation.css @@ -11,500 +11,23 @@ * governing permissions and limitations under the License. */ -.spectrum-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; -} - -@keyframes spectrum-fill-mask-1 { +@keyframes spectrum-fills-rotate { 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); + transform: rotate(-90deg); } 100% { - transform: rotate(90deg); + transform: rotate(270deg); } } -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - +@keyframes spectrum-dashoffset-animation { + 0%, 100% { - transform: rotate(180deg); + stroke-dashoffset: 75px; } -} -@keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } - - 100% { - transform: rotate(270deg); + 30% { + stroke-dashoffset: 20px; } } diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index a5d0ef93c8c..9de4f4257b2 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -2,92 +2,22 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ProgressCircle", - ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1", - ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2", - ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills", - ".spectrum-ProgressCircle--indeterminate-fill-submask-2", + ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fill", + ".spectrum-ProgressCircle--sizeL", + ".spectrum-ProgressCircle--sizeS", ".spectrum-ProgressCircle-fill", - ".spectrum-ProgressCircle-fillMask1", - ".spectrum-ProgressCircle-fillMask2", - ".spectrum-ProgressCircle-fillSubMask1", - ".spectrum-ProgressCircle-fillSubMask2", - ".spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle-track", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--large", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--small", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track", - "0%", - "1.69%", - "10.17%", - "11.86%", - "13.56%", - "15.25%", - "16.95%", - "18.64%", - "20.34%", - "22.03%", - "23.73%", - "25.42%", - "27.12%", - "28.81%", - "3.39%", - "30.51%", - "32.2%", - "33.9%", - "35.59%", - "37.29%", - "38.98%", - "40.68%", - "42.37%", - "44.07%", - "45.76%", - "47.46%", - "49.15%", - "5.08%", - "50.85%", - "52.54%", - "54.24%", - "55.93%", - "57.63%", - "59.32%", - "6.78%", - "61.02%", - "62.71%", - "64.41%", - "66.1%", - "67.8%", - "69.49%", - "71.19%", - "72.88%", - "74.58%", - "76.27%", - "77.97%", - "79.66%", - "8.47%", - "81.36%", - "83.05%", - "84.75%", - "86.44%", - "88.14%", - "89.83%", - "91.53%", - "93.22%", - "94.92%", - "96.61%", - "98.31%", - "to" + ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack", + ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite", + ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle", + ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle" ], "modifiers": [ "--mod-progress-circle-fill-border-color", - "--mod-progress-circle-fill-border-color-over-background", "--mod-progress-circle-position", "--mod-progress-circle-size", "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background", - "--mod-progress-circle-track-border-style" + "--mod-progress-circle-track-border-color" ], "component": [ "--spectrum-progress-circle-fill-border-color", @@ -101,18 +31,21 @@ "--spectrum-progress-circle-thickness-medium", "--spectrum-progress-circle-thickness-small", "--spectrum-progress-circle-track-border-color", - "--spectrum-progress-circle-track-border-color-over-background", - "--spectrum-progress-circle-track-border-style" + "--spectrum-progress-circle-track-border-color-over-background" ], "global": [ "--spectrum-accent-content-color-default", - "--spectrum-gray-200", + "--spectrum-static-black-track-color", + "--spectrum-static-black-track-indicator-color", + "--spectrum-static-white-track-color", + "--spectrum-static-white-track-indicator-color", + "--spectrum-track-color", "--spectrum-transparent-white-1000", "--spectrum-transparent-white-400" ], "passthroughs": [], "high-contrast": [ "--highcontrast-progress-circle-fill-border-color", - "--highcontrast-progress-circle-fill-border-color-over-background" + "--highcontrast-progress-circle-track-color" ] } diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index e3c32f3ff3e..573fb4917ac 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -1,35 +1,20 @@ /*! - * 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. - */ +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 -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-ProgressCircle { - /* fill is bright color */ - --highcontrast-progress-circle-fill-border-color: Highlight; +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. +*/ - /* fill over background is bright color */ - --highcontrast-progress-circle-fill-border-color-over-background: Highlight; - } - - /* track double for visibility */ - .spectrum-ProgressCircle-track { - --spectrum-progress-circle-track-border-style: double; - } -} +@import "animation.css"; .spectrum-ProgressCircle { /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); + --spectrum-progress-circle-track-border-color: var(--spectrum-track-color); --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); @@ -37,25 +22,22 @@ /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); - /* track border style */ - --spectrum-progress-circle-track-border-style: solid; - - &.spectrum-ProgressCircle--small { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); - } + /* default size and thickness */ + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); +} - &, - &.spectrum-ProgressCircle--medium { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-medium); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); - } +.spectrum-ProgressCircle--sizeS { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); +} - &.spectrum-ProgressCircle--large { - --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); - --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); - } +.spectrum-ProgressCircle--sizeL { + --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large); + --spectrum-progress-circle-thickness: var(--spectrum-progress-circle-thickness-large); +} +.spectrum-ProgressCircle { display: inline-block; inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); @@ -65,591 +47,66 @@ /* Fix for Safari rendering bug */ /* more info: https://github.com/adobe/spectrum-web-components/issues/1392 */ transform: translate3d(0, 0, 0); -} -.spectrum-ProgressCircle-track { - box-sizing: border-box; - inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - - border-style: var(--mod-progress-circle-track-border-style, var(--spectrum-progress-circle-track-border-style)); - border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - border-color: var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color)); -} + &.spectrum-ProgressCircle--staticWhite { + --spectrum-progress-circle-track-border-color: var(--spectrum-static-white-track-color); + --spectrum-progress-circle-fill-border-color: var(--spectrum-static-white-track-indicator-color); + } -/* circle progress fill parent container */ -.spectrum-ProgressCircle-fills { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - inline-size: 100%; - block-size: 100%; + &.spectrum-ProgressCircle--staticBlack { + --spectrum-progress-circle-track-border-color: var(--spectrum-static-black-track-color); + --spectrum-progress-circle-fill-border-color: var(--spectrum-static-black-track-indicator-color); + } } -/* circle progress filled */ +.spectrum-ProgressCircle-track, .spectrum-ProgressCircle-fill { box-sizing: border-box; inline-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); block-size: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - - border-style: solid; - border-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); - border-radius: var(--mod-progress-circle-size, var(--spectrum-progress-circle-size)); - border-color: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); } -/* circle colors over background */ -.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite { - .spectrum-ProgressCircle-track { - border-color: var(--mod-progress-circle-track-border-color-over-background, var(--spectrum-progress-circle-track-border-color-over-background)); - } - - .spectrum-ProgressCircle-fill { - border-color: var(--highcontrast-progress-circle-fill-border-color-over-background, var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))); - } -} - -/* animation masks - circle fill progress */ -.spectrum-ProgressCircle-fillMask1, -.spectrum-ProgressCircle-fillMask2 { - inline-size: 50%; - block-size: 100%; - transform-origin: 100% center; - transform: rotate(180deg); - overflow: hidden; - position: absolute; -} - -.spectrum-ProgressCircle-fillSubMask1, -.spectrum-ProgressCircle-fillSubMask2 { - inline-size: 100%; - block-size: 100%; - transform-origin: 100% center; - overflow: hidden; - transform: rotate(-180deg); +.spectrum-ProgressCircle-track { + stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + stroke: var(--highcontrast-progress-circle-track-color, var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))); } -.spectrum-ProgressCircle-fillMask2 { - transform: rotate(0deg); +/* circle progress filled */ +.spectrum-ProgressCircle-fill { + stroke-width: var(--mod-progress-circle-thickness, var(--spectrum-progress-circle-thickness)); + stroke: var(--highcontrast-progress-circle-fill-border-color, var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))); + transform: rotate(-90deg); + transform-origin: center; } /* animation masks - circle indeterminate with continuous animation */ .spectrum-ProgressCircle--indeterminate { - .spectrum-ProgressCircle-fills { + .spectrum-ProgressCircle-fill { will-change: transform; - transform: translateZ(0); - animation: 1s infinite cubic-bezier(0.25, 0.78, 0.48, 0.89) spectrum-fills-rotate; + animation: + 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite spectrum-fills-rotate, + 1s cubic-bezier(0.25, 0.1, 0.25, 1.3) infinite spectrum-dashoffset-animation; transform-origin: center; } - - .spectrum-ProgressCircle-fillSubMask1 { - will-change: transform; - transform: translateZ(0); - animation: 1s infinite linear spectrum-fill-mask-1; - } - - .spectrum-ProgressCircle-fillSubMask2 { - will-change: transform; - transform: translateZ(0); - animation: 1s infinite linear spectrum-fill-mask-2; - } -} - -.spectrum-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; -} - -@keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); - } - - 100% { - transform: rotate(90deg); - } } -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-ProgressCircle { + /* fill is bright color */ + --highcontrast-progress-circle-fill-border-color: Highlight; + --highcontrast-progress-circle-track-color: Background; } -} -@keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } + .spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) { + .spectrum-innerCircle { + stroke: CanvasText; + } - 100% { - transform: rotate(270deg); + .spectrum-outerCircle { + border: 1px solid; + border-color: CanvasText; + border-radius: 50%; + } } } diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index f64c2f2780a..ac3f3111330 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -15,16 +15,21 @@ export default { argTypes: { size: size(["s", "m", "l"]), isIndeterminate, - staticColor: { - ...staticColor, - options: ["white"], - }, + staticColor, + value: { + control: { + type: "range", + min: 0, + max: 100 + } + } }, args: { rootClass: "spectrum-ProgressCircle", size: "m", isIndeterminate: false, staticColor: undefined, + value: 43 }, parameters: { design: { @@ -102,3 +107,25 @@ StaticWhiteIndeterminate.args = { StaticWhiteIndeterminate.parameters = { chromatic: { disableSnapshot: true }, }; + +export const StaticBlackDeterminate = Sizing.bind({}); +StaticBlackDeterminate.tags = ["!dev"]; +StaticBlackDeterminate.storyName = "Static black, default"; +StaticBlackDeterminate.args = { + staticColor: "black", + isIndeterminate: false, +}; +StaticBlackDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackIndeterminate = Sizing.bind({}); +StaticBlackIndeterminate.tags = ["!dev"]; +StaticBlackIndeterminate.storyName = "Static black, indeterminate"; +StaticBlackIndeterminate.args = { + staticColor: "black", + isIndeterminate: true, +}; +StaticBlackIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/progresscircle/stories/progresscircle.test.js b/components/progresscircle/stories/progresscircle.test.js index 26c9d8e078c..83fe05791dc 100644 --- a/components/progresscircle/stories/progresscircle.test.js +++ b/components/progresscircle/stories/progresscircle.test.js @@ -11,6 +11,10 @@ export const ProgressCircleGroup = Variants({ testHeading: "Static white", staticColor: "white", }, + { + testHeading: "Static black", + staticColor: "black", + }, ], stateData: [ { diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js index 8fbb22aa461..1890e58d4b0 100644 --- a/components/progresscircle/stories/template.js +++ b/components/progresscircle/stories/template.js @@ -4,6 +4,8 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; +import { capitalize } from "lodash-es"; + import "../index.css"; export const Template = ({ @@ -15,45 +17,48 @@ export const Template = ({ size = "m", staticColor, isIndeterminate = false, -} = {}) => { - let sizeClassName = "medium"; - switch (size) { - case "s": - sizeClassName = "small"; - break; - case "l": - sizeClassName = "large"; - break; - default: - sizeClassName = "medium"; - } + value, +}) => { + + let strokeWidth = size === "s" ? 2 : size === "l" ? 4 : 3; + + // SVG strokes are centered, so subtract half the stroke width from the radius to create an inner stroke. + let radius = `calc(50% - ${strokeWidth / 2}px)`; + + let insideRadius = `calc(50% - ${strokeWidth / 1}px)`; return html` <div class=${classMap({ [rootClass]: true, - [`${rootClass}--${sizeClassName}`]: typeof size !== "undefined", [`${rootClass}--indeterminate`]: isIndeterminate, - [`${rootClass}--staticWhite`]: staticColor === "white", + [`${rootClass}--static${capitalize(staticColor)}`]: typeof staticColor !== "undefined", + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} id=${ifDefined(id)} style=${styleMap(customStyles)} data-testid=${ifDefined(testId)} > - <div class="spectrum-ProgressCircle-track"></div> - <div class="spectrum-ProgressCircle-fills"> - <div class="spectrum-ProgressCircle-fillMask1"> - <div class="spectrum-ProgressCircle-fillSubMask1"> - <div class="spectrum-ProgressCircle-fill"></div> - </div> - </div> - <div class="spectrum-ProgressCircle-fillMask2"> - <div class="spectrum-ProgressCircle-fillSubMask2"> - <div class="spectrum-ProgressCircle-fill"></div> - </div> - </div> - </div> + <svg fill="none" width="100%" height="100%" class="spectrum-outerCircle"> + <circle class="spectrum-innerCircle" cx="50%" cy="50%" r=${insideRadius} stroke-width="2" /> + <circle + cx="50%" + cy="50%" + class="spectrum-ProgressCircle-track" + r=${radius} + /> + <circle + cx="50%" + cy="50%" + r=${radius} + class="spectrum-ProgressCircle-fill" + pathLength="100" + stroke-dasharray="100 200" + stroke-dashoffset=${100 - value} + stroke-linecap="round" + /> + </svg> </div> `; }; diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index db15dc333bf..379256b9107 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -66,6 +66,9 @@ async function extractModifiers( const selectors = new Set(); const root = postcss.parse(content); root.walkRules((rule) => { + // Check that the selector is not inside a keyframe + if (rule.parent.type === "atrule" && rule.parent.name === "keyframes") return; + if (rule.selectors) { rule.selectors.forEach((selector) => { // If the selector is not a base selector, add it to the set diff --git a/tools/generator/templates/package.json.hbs b/tools/generator/templates/package.json.hbs index f9ba84398a0..6e9d3b2f7f3 100644 --- a/tools/generator/templates/package.json.hbs +++ b/tools/generator/templates/package.json.hbs @@ -18,8 +18,7 @@ "./*.md": "./*.md", "./dist/*": "./dist/*", "./index.css": "./dist/index.css", - "./metadata.json": "./metadata/metadata.json", - "./metadata/*": "./metadata/*", + "./metadata.json": "./dist/metadata.json", "./package.json": "./package.json" }, "main": "dist/index.css", From dba52031e9cd5be0ca2c261c1064f0c045e775d9 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Wed, 29 Jan 2025 09:53:58 -0500 Subject: [PATCH 071/103] fix(opacitycheckerboard): remove unused var causing error (#3525) Resolves linting error: 'size' is assigned a value but never used no-unused-vars --- components/opacitycheckerboard/stories/template.js | 1 - 1 file changed, 1 deletion(-) diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index be0c3f3aed7..733789c5f3a 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -13,7 +13,6 @@ export const Template = ({ customStyles = {}, id = getRandomId("opacity-checkerboard"), content = [], - size, role, } = {}) => { return html` From 8988f80fd9fd8c7b41ed18c3e99e28e3f59a72f6 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt <cdransfeldt@adobe.com> Date: Wed, 29 Jan 2025 10:18:45 -0800 Subject: [PATCH 072/103] feat(colorslider): S2 migration (#3424) * feat(colorslider): s2 migration * fix(colorslider): custom property aliasing * chore(colorslider): add color control to story * chore(colorslider): add vertical control to story * chore(colorslider): update custom property name for consistency * fix(colorslider): control name in test * fix(colorslider): arg name and value * chore(colorslider): restore missing files * chore(colorslider): update gradient direction for vertical tests + stories * chore(colorslider): update dist files * fix(colorslider): alpha story gradient * fix(colorslider): adjust inline-block-start for color handle when vertical * fix(colorslider): add missing vertical style; update gradient color --- .changeset/serious-clouds-jam.md | 11 ++ components/colorslider/dist/metadata.json | 4 +- components/colorslider/index.css | 33 ++-- .../stories/colorslider.stories.js | 37 +++-- .../colorslider/stories/colorslider.test.js | 3 +- components/colorslider/stories/template.js | 152 +++++++++--------- 6 files changed, 135 insertions(+), 105 deletions(-) create mode 100644 .changeset/serious-clouds-jam.md diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md new file mode 100644 index 00000000000..ca1191d6846 --- /dev/null +++ b/.changeset/serious-clouds-jam.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/colorslider": minor +--- + +# S2 colorslider migration + +This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec. + +| Before | After | +| ------------------------- | -------------------------- | +| `--spectrum-gray-900-rgb` | `--spectrum-gray-1000-rgb` | diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index de2b20d0bfa..497550155a7 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -37,13 +37,15 @@ "--spectrum-color-slider-border-opacity", "--spectrum-color-slider-border-rounding", "--spectrum-color-slider-border-width", + "--spectrum-color-slider-control-track-width", + "--spectrum-color-slider-fill-color-disabled", "--spectrum-color-slider-length", "--spectrum-color-slider-minimum-length" ], "global": [ "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-gray-900-rgb" + "--spectrum-gray-1000-rgb" ], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ diff --git a/components/colorslider/index.css b/components/colorslider/index.css index 2876596753d..50983a0e53a 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -11,28 +11,24 @@ * governing permissions and limitations under the License. */ -@media (forced-colors: active) { - .spectrum-ColorSlider { - --highcontrast-color-slider-border-color: CanvasText; - --highcontrast-color-slider-border-color-disabled: GrayText; - --highcontrast-color-slider-background-color-disabled: Canvas; - forced-color-adjust: none; - } -} - .spectrum-ColorSlider { + /* Size and Spacing */ + --spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width); + /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); /* @passthrough -- settings for nested color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); + --spectrum-color-slider-fill-color-disabled: var(--spectrum-disabled-background-color); + position: relative; display: block; min-inline-size: var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length)); inline-size: var(--mod-color-slider-length, var(--spectrum-color-slider-length)); - block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-control-track-width)); + block-size: var(--mod-color-slider-control-track-width, var(--spectrum-color-slider-control-track-width)); /* Otherwise we randomly drag a file icon */ user-select: none; @@ -58,7 +54,7 @@ min-block-size: var(--mod-color-slider-vertical-minimum-height, var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))); block-size: var(--mod-color-slider-vertical-height, var(--mod-color-slider-length, var(--spectrum-color-slider-length))); min-inline-size: 0; - inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))); + inline-size: var(--mod-color-slider-vertical-control-track-width, var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width))); .spectrum-ColorSlider-handle { inset-inline-start: 50%; @@ -85,8 +81,8 @@ } .spectrum-ColorSlider.is-disabled & { - --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))); - background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))); + --spectrum-color-slider-border-color-local: var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); + background: var(--highcontrast-color-slider-background-color-disabled, var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))); } } @@ -114,3 +110,12 @@ margin: 0; pointer-events: none; } + +@media (forced-colors: active) { + .spectrum-ColorSlider { + --highcontrast-color-slider-border-color: CanvasText; + --highcontrast-color-slider-border-color-disabled: GrayText; + --highcontrast-color-slider-background-color-disabled: Canvas; + forced-color-adjust: none; + } +} diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 633fa48b8be..010b0f31510 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -19,18 +19,20 @@ export default { component: "ColorSlider", argTypes: { colorHandleStyle: { table: { disable: true } }, - vertical: { table: { disable: true } }, isDisabled, isFocused: { ...isFocused, if: { arg: "isDisabled", truthy: false }, }, - gradientStops: { - name: "Gradient stops", + color: { + name: "Color", description: - "The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.", - type: { name: "array" }, - table: { disable: true }, + "Supports standard color input or any valid input for the <code>background</code> property such as, <code>linear-gradient(red, blue)</code>.", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + }, + control: "color", }, selectedColor: { name: "Selected color", @@ -40,12 +42,19 @@ export default { control: "color", }, gradientType: { - name: "Gradient type", - description: "The gradient can be defined in the markup using CSS or with an image.", - options: ["gradient", "image"], + name: "Color type", + description: + "The color can be defined in the markup using CSS or with an image.", + options: ["color", "image"], control: { type: "select" }, table: { disable: true }, }, + vertical: { + name: "Vertical", + description: "The orientation of the component.", + type: { name: "boolean" }, + control: "boolean", + }, }, args: { rootClass: "spectrum-ColorSlider", @@ -70,8 +79,8 @@ export default { */ export const Default = ColorSliderGroup.bind({}); Default.args = { - gradientStops: - ["rgb(255, 0, 0) 0%", "rgb(255, 255, 0) 17%", "rgb(0, 255, 0) 33%", "rgb(0, 255, 255) 50%", "rgb(0, 0, 255) 67%", "rgb(255, 0, 255) 83%", "rgb(255, 0, 0) 100%"], + color: + "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", }; // ********* VRT ONLY ********* // @@ -81,7 +90,7 @@ WithForcedColors.tags = ["!autodocs", "!dev"]; WithForcedColors.parameters = { chromatic: { forcedColors: "active", - modes: disableDefaultModes + modes: disableDefaultModes, }, }; @@ -92,6 +101,8 @@ WithForcedColors.parameters = { export const Vertical = Template.bind({}); Vertical.args = { vertical: true, + color: + "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", }; Vertical.tags = ["!dev"]; Vertical.parameters = { @@ -100,7 +111,7 @@ Vertical.parameters = { export const Alpha = Template.bind({}); Alpha.args = { - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", }; Alpha.tags = ["!dev"]; diff --git a/components/colorslider/stories/colorslider.test.js b/components/colorslider/stories/colorslider.test.js index 166960e9353..ceb4f5dac81 100644 --- a/components/colorslider/stories/colorslider.test.js +++ b/components/colorslider/stories/colorslider.test.js @@ -14,6 +14,7 @@ export const ColorSliderGroup = Variants({ { testHeading: "Vertical", vertical: true, + color: "linear-gradient(to bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", wrapperStyles: { // Adjust for the indicator "padding-block": "20px", @@ -21,7 +22,7 @@ export const ColorSliderGroup = Variants({ }, { testHeading: "Alpha", - gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"], + color: "linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%)", selectedColor: "rgba(0, 0, 0, 1)", wrapperStyles: { // Adjust for the indicator diff --git a/components/colorslider/stories/template.js b/components/colorslider/stories/template.js index f4c15735012..73f7f123568 100644 --- a/components/colorslider/stories/template.js +++ b/components/colorslider/stories/template.js @@ -7,83 +7,83 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -export const Template = ({ - rootClass = "spectrum-ColorSlider", - customClasses = [], - customStyles = {}, - isDisabled = false, - isFocused = false, - vertical = false, - gradientStops = [ - "rgb(255, 0, 0) 0%", - "rgb(255, 255, 0) 17%", - "rgb(0, 255, 0) 33%", - "rgb(0, 255, 255) 50%", - "rgb(0, 0, 255) 67%", - "rgb(255, 0, 255) 83%", - "rgb(255, 0, 0)", - ], - gradientType = "gradient", - selectedColor = "rgba(255, 0, 0, 1)", - colorHandleStyle = {}, -} = {}, context = {}) => { +export const Template = ( + { + rootClass = "spectrum-ColorSlider", + customClasses = [], + customStyles = {}, + isDisabled = false, + isFocused = false, + vertical = false, + color = "linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)", + gradientType = "gradient", + selectedColor = "rgba(255, 0, 0, 1)", + colorHandleStyle = {}, + } = {}, + context = {}, +) => { const { updateArgs } = context; return html` - <div - class=${classMap({ - [rootClass]: true, - [`${rootClass}--vertical`]: vertical, - "is-disabled": isDisabled, - "is-focused": isFocused, - ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })} - style=${styleMap(customStyles)} - @focusin=${function() { - updateArgs({ isFocused: true }); - }} - @focusout=${function() { - updateArgs({ isFocused: false }); - }} - > - ${OpacityCheckerboard({ - customClasses: [`${rootClass}-checkerboard`], - content: [ - when( - gradientType === "image", - () => html`<img - class="${rootClass}-gradient" - role="presentation" - src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII=" - />`, - () => html`<div - class="${rootClass}-gradient" - role="presentation" - style=${when(gradientStops && gradientStops.length, () => - styleMap({ - background: `linear-gradient(to ${ - vertical ? "bottom" : "right" - }, ${gradientStops.join(", ")})`, - }) - )} - ></div>` - ), - ], - role: "presentation", - }, context)} - ${ColorHandle({ - isDisabled, - isFocused, - selectedColor, - customClasses: [`${rootClass}-handle`], - customStyles: colorHandleStyle, - }, context)} - <input - type="color" - value=${selectedColor} - class=${classMap({ - [`${rootClass}-slider`]: true - })} /> - </div> - `; + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--vertical`]: vertical, + "is-disabled": isDisabled, + "is-focused": isFocused, + ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + @focusin=${function () { + updateArgs({ isFocused: true }); + }} + @focusout=${function () { + updateArgs({ isFocused: false }); + }} + > + ${OpacityCheckerboard( + { + customClasses: [`${rootClass}-checkerboard`], + content: [ + when( + gradientType === "image", + () => + html`<img + class="${rootClass}-gradient" + role="presentation" + src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII=" + />`, + () => + html`<div + class="${rootClass}-gradient" + role="presentation" + style=${styleMap({ + background: `${color}`, + })} + ></div>`, + ), + ], + role: "presentation", + }, + context, + )} + ${ColorHandle( + { + isDisabled, + isFocused, + selectedColor, + customClasses: [`${rootClass}-handle`], + customStyles: colorHandleStyle, + }, + context, + )} + <input + type="color" + value=${selectedColor} + class=${classMap({ + [`${rootClass}-slider`]: true, + })} + /> + </div> + `; }; From 50e1e020b0fa4de48fb18b73c8637cc33372365f Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Thu, 30 Jan 2025 12:54:12 -0500 Subject: [PATCH 073/103] feat(dialog): S2 takeover dialog migration (#3347) * feat(dialog): adds new takeover dialog styles - new tokens and takeover dialog styles were implemented in index.css - rebuild tokens/metadata * docs(dialog): updates dialog template and stories - adds layout: "fullscreen" to render dialogs in their canvases, instead of off the canvas - uses getRandomId and renderContent functions to render header and footer contents - implements "slotted" components for the new takeover dialog feature - removes hasDivider since s2 dialogs don't support a divider - updates Figma links for fullscreen and fullscreenTakeover stories - updates some class names to better follow naming conventions * chore(dialog): clean up dialog tests - adds hasHeroImage arg - adds background and margin customStyles for fullscreen dialog in Chromatic only (so we can see the rounded corners better) fix(modal): update modal with takeover dialog styles - builds metadata - adds tokens for modal that complement new takeover dialog styles/tokens chore(dialog,modal): create changeset --- .changeset/modern-chairs-sit.md | 23 ++++++ components/coachindicator/dist/metadata.json | 5 +- components/dialog/dist/metadata.json | 27 +++++-- components/dialog/index.css | 44 ++++++++--- components/dialog/stories/dialog.stories.js | 81 +++++++++++++++++--- components/dialog/stories/dialog.test.js | 39 ++++------ components/dialog/stories/template.js | 28 +++---- components/modal/dist/metadata.json | 5 +- components/modal/index.css | 19 +++-- components/progressbar/dist/metadata.json | 4 +- tokens/custom/large-vars.css | 5 +- tokens/custom/medium-vars.css | 3 + 12 files changed, 195 insertions(+), 88 deletions(-) create mode 100644 .changeset/modern-chairs-sit.md diff --git a/.changeset/modern-chairs-sit.md b/.changeset/modern-chairs-sit.md new file mode 100644 index 00000000000..61234653691 --- /dev/null +++ b/.changeset/modern-chairs-sit.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/dialog": major +"@spectrum-css/modal": minor +--- + +S2 Takeover dialog + +This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog). + +Takeover dialogs also support replacing text in the header and body areas with other components. This required an additional `.spectrum-Dialog-headerContentWrapper` element that should center whatever component/content within. + +Class names updated to match naming convention (remove hyphens and capitalize second word): +`.spectrum-Dialog-header-content` > `.spectrum-Dialog-headerContent` +`.spectrum-Dialog-footer-content` > `.spectrum-Dialog-footerContent` + +_New Mods_ +`--mod-takeover-dialog-grid-spacing` +`--mod-takeover-dialog-spacing-header-content-gap` +`--mod-takeover-dialog-title-font-size` + +Modal updates + +- Modal component now uses the updated margin token (`window-to-edge`) found in the takeover dialog design specs. This work also introduced `--spectrum-modal-takeover-window-to-edge` diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 8c085971406..0bed4172eef 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -8,10 +8,7 @@ ".spectrum-CoachIndicator-ring:nth-child(3)", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", - "0%", - "50%", - "to" + ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], "modifiers": [ "--mod-coach-animation-indicator-ring-center-delay-multiple", diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 33753fbe8ed..738156392db 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -12,6 +12,7 @@ ".spectrum-Dialog--fullscreen .spectrum-Dialog-footer", ".spectrum-Dialog--fullscreen .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreen .spectrum-Dialog-header", + ".spectrum-Dialog--fullscreen .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog--fullscreen .spectrum-Dialog-heading", ".spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreenTakeover", @@ -21,6 +22,7 @@ ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-footer", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header", + ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading", ".spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid", ".spectrum-Dialog--sizeL", @@ -30,12 +32,12 @@ ".spectrum-Dialog-closeButton", ".spectrum-Dialog-content", ".spectrum-Dialog-footer", - ".spectrum-Dialog-footer .spectrum-Dialog-footer-content", + ".spectrum-Dialog-footer .spectrum-Dialog-footerContent", ".spectrum-Dialog-footer:has(.spectrum-Dialog-buttonGroup)", - ".spectrum-Dialog-footer:has(.spectrum-Dialog-footer-content)", + ".spectrum-Dialog-footer:has(.spectrum-Dialog-footerContent)", ".spectrum-Dialog-grid", ".spectrum-Dialog-header", - ".spectrum-Dialog-header > .spectrum-Dialog-header-content", + ".spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper", ".spectrum-Dialog-heading", ".spectrum-Dialog-hero" ], @@ -61,7 +63,10 @@ "--mod-standard-dialog-spacing-footer-to-button-group", "--mod-standard-dialog-spacing-grid-padding", "--mod-standard-dialog-spacing-title-to-description", - "--mod-standard-dialog-spacing-title-to-header-content" + "--mod-standard-dialog-spacing-title-to-header-content", + "--mod-takeover-dialog-grid-spacing", + "--mod-takeover-dialog-spacing-header-content-gap", + "--mod-takeover-dialog-title-font-size" ], "component": [], "global": [ @@ -112,9 +117,21 @@ "--spectrum-standard-dialog-spacing-title-to-description", "--spectrum-standard-dialog-spacing-title-to-header-content", "--spectrum-standard-dialog-title-font-size", + "--spectrum-takeover-dialog-block-size", + "--spectrum-takeover-dialog-grid-spacing", + "--spectrum-takeover-dialog-height", + "--spectrum-takeover-dialog-inline-size", + "--spectrum-takeover-dialog-spacing-grid-padding", + "--spectrum-takeover-dialog-spacing-header-content-gap", + "--spectrum-takeover-dialog-spacing-header-gap", + "--spectrum-takeover-dialog-spacing-title-to-body", + "--spectrum-takeover-dialog-spacing-title-to-content", + "--spectrum-takeover-dialog-title-font-size", + "--spectrum-takeover-dialog-width", "--spectrum-title-line-height", "--spectrum-title-sans-serif-font-style", - "--spectrum-title-sans-serif-font-weight" + "--spectrum-title-sans-serif-font-weight", + "--spectrum-title-size-xxl" ], "passthroughs": [ "--mod-buttongroup-flex-wrap", diff --git a/components/dialog/index.css b/components/dialog/index.css index cd89fe5956a..b4ea3002d30 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -53,6 +53,14 @@ /* Passthrough for nested component(s) */ --mod-buttongroup-justify-content: flex-end; --mod-buttongroup-flex-wrap: nowrap; + + /* Fullscreen/fullscreenTakeover */ + --spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl); + --spectrum-takeover-dialog-grid-spacing: var(--spectrum-takeover-dialog-spacing-grid-padding); + --spectrum-takeover-dialog-spacing-header-content-gap: var(--spectrum-takeover-dialog-spacing-header-gap); + --spectrum-takeover-dialog-spacing-title-to-content: var(--spectrum-takeover-dialog-spacing-title-to-body); + --spectrum-takeover-dialog-inline-size: var(--spectrum-takeover-dialog-width); + --spectrum-takeover-dialog-block-size: var(--spectrum-takeover-dialog-height); } .spectrum-Dialog { @@ -151,7 +159,7 @@ outline: none; /* Hide focus outline around header */ /* additional header content should grow/shrink with the text, but only until it takes up half of the header */ - > .spectrum-Dialog-header-content { + > .spectrum-Dialog-headerContentWrapper { max-inline-size: fit-content; flex: 1 1 100%; font-size: var(--mod-standard-dialog-header-content-font-size, var(--spectrum-standard-dialog-header-content-font-size)); @@ -188,12 +196,12 @@ outline: none; /* Hide focus outline */ - .spectrum-Dialog-footer-content { + .spectrum-Dialog-footerContent { /* this attempts to give as much space as possible for the button group, particularly to avoid stacking on mobile. Some sizes still may have to stack. */ flex: 1 1 100%; } - &:has(.spectrum-Dialog-footer-content), + &:has(.spectrum-Dialog-footerContent), &:has(.spectrum-Dialog-buttonGroup) { justify-content: space-between; } @@ -248,13 +256,13 @@ } .spectrum-Dialog--fullscreen { - inline-size: 100%; - block-size: 100%; + inline-size: var(--spectrum-takeover-dialog-inline-size); + block-size: var(--spectrum-takeover-dialog-block-size); } .spectrum-Dialog--fullscreenTakeover { - inline-size: 100%; - block-size: 100%; + inline-size: var(--spectrum-takeover-dialog-inline-size); + block-size: var(--spectrum-takeover-dialog-block-size); border-radius: 0; } @@ -266,16 +274,16 @@ .spectrum-Dialog-grid { display: grid; grid-template-columns: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) 1fr auto auto - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); grid-template-rows: - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)) + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)) auto 1fr - var(--mod-standard-dialog-spacing-grid-padding, var(--spectrum-standard-dialog-spacing-grid-padding)); + var(--mod-takeover-dialog-grid-spacing, var(--spectrum-takeover-dialog-grid-spacing)); grid-template-areas: ". . . . ." ". heading header buttonGroup ." @@ -285,6 +293,20 @@ .spectrum-Dialog-header { grid-area: heading; + gap: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + margin-inline-end: var(--mod-takeover-dialog-spacing-header-content-gap, var(--spectrum-takeover-dialog-spacing-header-content-gap)); + margin-block-end: var(--spectrum-takeover-dialog-spacing-title-to-content); + + /* components in fullscreen/fullscreenTakeover dialogs are centered in the headerContentWrapper */ + > .spectrum-Dialog-headerContentWrapper { + max-inline-size: unset; + display: inline-flex; + justify-content: center; + } + } + + .spectrum-Dialog-heading { + font-size: var(--mod-takeover-dialog-title-font-size, var(--spectrum-takeover-dialog-title-font-size)); } .spectrum-Dialog-closeButton { diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 4e7f97a6657..1cc2f56521b 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -1,6 +1,8 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen, size } from "@spectrum-css/preview/types"; +import { Template as Table } from "@spectrum-css/table/stories/template.js"; +import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; @@ -10,10 +12,11 @@ import { Template } from "./template.js"; /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows. * + * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). + * * ## Usage with modal component * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations should set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peeking through from behind the dialog at the rounded corners, allowing the dialog's background color to take precedence. * - * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs). */ export default { title: "Dialog", @@ -97,15 +100,6 @@ export default { control: "boolean", if: { arg: "layout", eq: "default" }, }, - hasDivider: { - name: "Divider", - type: { name: "boolean" }, - table: { - type: { summary: "boolean" }, - category: "Component", - }, - control: "boolean", - }, showModal: { name: "Wrap the dialog in a modal", type: { name: "boolean" }, @@ -168,6 +162,7 @@ export default { }, packageJson, metadata, + layout: "fullscreen", }, decorators: [ withUnderlayWrapper, @@ -268,16 +263,71 @@ WithScroll.parameters = { }; /** - * The full screen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. + * The fullscreen variant shows a large dialog background, only revealing a small portion of the page around the outside of the dialog, behind an overlay. The size of the dialog varies with the size of the screen, in both width and height. + * + * Fullscreen dialogs do not support a close button, and are not dismissible. + * + * Implementations may swap out the extra header content and body content for other components, like the [steplist](/docs/components-steplist--docs) and [table](/docs/components-table--docs) seen in this example. Components in the extra header content area will be centered. */ export const Fullscreen = DialogFullscreen.bind({}); Fullscreen.args = { ...Default.args, + header:[ + (passthroughs, context) => Steplist({ + ...passthroughs, + items: [ + { + label: "Enter records", + isComplete: true, + }, + { + label: "Confirmation", + isComplete: true, + }, + { + label: "Summary", + isSelected: true, + }, + ], + }, context), + ], + content: [ + (passthroughs, context) => Table({ + ...passthroughs, + showThumbnails: true, + rowItems: [ + { + cellContent: ["Table Row Alpha", "Test", "2"], + }, + { + cellContent: ["Table Row Bravo", "Test", "28"], + }, + { + cellContent: [ + "Table Row Charlie. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.", + "Test", + "23", + ], + }, + { + cellContent: ["Table Row Delta", "Test", "7"], + }, + { + cellContent: ["Summary Row", "", "60"], + isSummaryRow: true, + }, + ], + }, context), + ], layout: "fullscreen", hasFooter: false, }; Fullscreen.parameters = { chromatic: { disableSnapshot: true }, + design: { + type: "figma", + url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", + } }; // TODO: Because storybook doesn't support for multiple conditionals, we've removed the hasFooter @@ -287,15 +337,22 @@ Fullscreen.parameters = { // https://github.com/storybookjs/storybook/discussions/18542 Fullscreen.argTypes = { hasFooter: { table: { disable: true, } }, + header: { table: { disable: true, } }, }; /** - * The full screen takeover variant is similar to the full screen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. + * The fullscreen takeover variant is similar to the fullscreen variant except that the background covers the entire screen. The page behind the dialog is not visible. This variant should be reserved for workflows where displaying a second dialog on top of the first one is to be expected. + * + * Fullscreen takeover dialogs do not support a close button, and are not dismissible. */ export const FullscreenTakeover = DialogFullscreenTakeover.bind({}); FullscreenTakeover.storyName = "Fullscreen takeover"; FullscreenTakeover.parameters = { chromatic: { disableSnapshot: true }, + design: { + type: "figma", + url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=61935-5399", + } }; FullscreenTakeover.args = { ...Default.args, diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js index f9b5acb6b2e..a6b6b177114 100644 --- a/components/dialog/stories/dialog.test.js +++ b/components/dialog/stories/dialog.test.js @@ -42,41 +42,34 @@ export const DialogGroup = Variants({ }, { testHeading: "With hero/cover image", + hasHeroImage: true, heroImageUrl: "example-card-portrait.png", }, { testHeading: "With hero/cover image, dismissible", + hasHeroImage: true, heroImageUrl: "example-card-portrait.png", isDismissible: true, hasFooter: false, }, - { - testHeading: "No divider", - hasDivider: false, - }, - { - testHeading: "No divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - }, - { - testHeading: "With hero/cover image, no divider", - hasDivider: false, - heroImageUrl: "example-card-portrait.png", - }, - { - testHeading: "With hero/cover image, no divider, dismissible", - hasDivider: false, - isDismissible: true, - hasFooter: false, - heroImageUrl: "example-card-portrait.png", - }, ], }); export const DialogFullscreen = Variants({ - Template, + Template: (args, context) => { + const { parameters: { showTestingGrid = false } = {} } = context; + + return Template({ + ...args, + /* + * Custom styles were added to make sure the VRTs catch the rounded corners + */ + customStyles: { + margin: showTestingGrid ? "16px" : undefined, + "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, + }, + }, context); + }, withSizes: false, wrapperStyles: { "background-color": "var(--spectrum-gray-50)" diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index a9ab8ea61dc..1f20f54109c 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -2,8 +2,7 @@ import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/templ import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as Modal } from "@spectrum-css/modal/stories/template.js"; -import { getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -19,7 +18,7 @@ export const Template = ({ showModal = false, hasFooter = false, heading, - header, + header = [], hasCheckbox = false, content = [], footer = [], @@ -66,18 +65,15 @@ export const Template = ({ <h1 class="${rootClass}-heading">${heading}</h1> `)} ${when(header, () => html` - <span class="${rootClass}-header-content"> - ${Typography({ - semantics: "body", - size: "m", - // @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here? - content: [ header ] - }, context)} - </span> + <div class="${rootClass}-headerContentWrapper"> + <div class="${rootClass}-headerContent"> + ${renderContent(header)} + </div> + </div> `, )} </div> - <section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section> + <section class="${rootClass}-content">${renderContent(content)}</section> ${when(isDismissible, () => CloseButton({ customClasses: [`${rootClass}-closeButton`], @@ -108,18 +104,14 @@ export const Template = ({ ${when(hasFooter, () => html` <footer class="${rootClass}-footer"> ${when(typeof footer !== "undefined", () => html` - <div class="${rootClass}-footer-content"> + <div class="${rootClass}-footerContent"> ${when(hasCheckbox, () => html` ${Checkbox({ label: footer, }, context)} `, () => - Typography({ - semantics: "body", - size: "m", - content: [ footer ] - }, context) + renderContent(footer) )} </div> <div class="${rootClass}-buttonGroup"> diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 923b9118be3..72cd495068b 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -18,6 +18,7 @@ "--mod-modal-confirm-entry-animation-duration", "--mod-modal-confirm-exit-animation-delay", "--mod-modal-confirm-exit-animation-duration", + "--mod-modal-fullscreen-margin", "--mod-modal-max-height", "--mod-modal-max-width", "--mod-modal-transition-animation-duration" @@ -32,6 +33,7 @@ "--spectrum-modal-fullscreen-margin", "--spectrum-modal-max-height", "--spectrum-modal-max-width", + "--spectrum-modal-takeover-window-to-edge", "--spectrum-modal-transition-animation-duration" ], "global": [ @@ -44,7 +46,8 @@ "--spectrum-background-layer-2-color", "--spectrum-corner-radius-extra-large-default", "--spectrum-dialog-confirm-entry-animation-distance", - "--spectrum-gray-75" + "--spectrum-gray-75", + "--spectrum-window-to-edge" ], "passthroughs": [], "high-contrast": [] diff --git a/components/modal/index.css b/components/modal/index.css index a9b181aff42..6bd085fd812 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -21,9 +21,10 @@ --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: 32px; - --spectrum-modal-max-height: var(--mod-modal-max-height, 90vh); - --spectrum-modal-max-width: var(--mod-modal-max-width, 90%); + --spectrum-modal-fullscreen-margin: var(--spectrum-window-to-edge); + --spectrum-modal-takeover-window-to-edge: 0; + --spectrum-modal-max-height: 90vh; + --spectrum-modal-max-width: 90%; --spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75)); --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); @@ -85,8 +86,8 @@ z-index: 2; /* Don't be bigger than the screen */ - max-block-size: var(--spectrum-modal-max-height); - max-inline-size: var(--spectrum-modal-max-width); + max-block-size: var(--mod-modal-max-height, var(--spectrum-modal-max-height)); + max-inline-size: var(--mod-modal-max-width, var(--spectrum-modal-max-width)); background: var(--spectrum-modal-background-color); border-radius: var(--spectrum-modal-confirm-border-radius); @@ -132,17 +133,15 @@ /** @unofficial */ .spectrum-Modal--fullscreen { position: fixed; - inset-inline-start: var(--spectrum-modal-fullscreen-margin); - inset-block-start: var(--spectrum-modal-fullscreen-margin); - inset-inline-end: var(--spectrum-modal-fullscreen-margin); - inset-block-end: var(--spectrum-modal-fullscreen-margin); + inset-block: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); + inset-inline: var(--mod-modal-fullscreen-margin, var(--spectrum-modal-fullscreen-margin)); max-inline-size: none; max-block-size: none; } .spectrum-Modal--fullscreenTakeover { position: fixed; - inset: 0; + inset: var(--spectrum-modal-takeover-window-to-edge); max-inline-size: none; max-block-size: none; diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 1986962a2f5..25c7fd682a6 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -26,9 +26,7 @@ ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track", ".spectrum-ProgressBar-track", - "0%", - "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill", - "to" + "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill" ], "modifiers": [ "--mod-progressbar-animation-duration-indeterminate", diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index e480e8bdc24..cdc0bc73bf9 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -104,7 +104,10 @@ --spectrum-slider-tick-mark-height: 13px; --spectrum-slider-ramp-track-height: 20px; - --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300); + --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400); --spectrum-treeview-item-indentation-medium: 20px; --spectrum-treeview-item-indentation-small: 15px; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 144ab07fa08..817e26b2d5d 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -103,6 +103,9 @@ --spectrum-slider-tick-mark-height: 10px; --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); + --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); + --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400); + --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500); --spectrum-treeview-indicator-inset-block-start: 5px; --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); From 4bc6ad330882a311ad458f9cd72aae46812c353c Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Fri, 31 Jan 2025 11:46:51 -0500 Subject: [PATCH 074/103] feat(popover)!: S2 popover migration (#3365) feat(popover): new S2 popover styles - new tokens and token values used for popover - create changeset - rebuild metadata.json - adjust popoverWidth and popoverHeight args to accommodate new padding - update test file with new popoverWidth and popoverHeight - correct side aligned popovers distance to source * fix(coachmark): nested popover style updates - update the border radius of the popover nested in coachmark to match S2 popover specs - update popover `--mod-popover-content-area-spacing` variable name (previously --mod-popover-content-area-spacing-vertical) - rebuild metadata.json * fix(picker): update popover selector class - with the new default position for popover, the selector class for the popover in picker also needed to be updated. (--bottom-start) - create changeset - rebuild metadata.json * docs(popover): fixup some docs wording - add down state link --- .changeset/itchy-shrimps-help.md | 5 ++ .changeset/rotten-meals-share.md | 17 ++++++ .changeset/twenty-ravens-divide.md | 8 +++ components/coachmark/dist/metadata.json | 4 +- components/coachmark/index.css | 4 +- components/picker/dist/metadata.json | 8 +-- components/picker/index.css | 10 ++-- components/picker/stories/template.js | 5 +- components/popover/dist/metadata.json | 43 +++++++------- components/popover/index.css | 56 ++++++++++--------- components/popover/stories/popover.stories.js | 23 +++++--- components/popover/stories/popover.test.js | 4 +- components/popover/stories/template.js | 4 +- 13 files changed, 118 insertions(+), 73 deletions(-) create mode 100644 .changeset/itchy-shrimps-help.md create mode 100644 .changeset/rotten-meals-share.md create mode 100644 .changeset/twenty-ravens-divide.md diff --git a/.changeset/itchy-shrimps-help.md b/.changeset/itchy-shrimps-help.md new file mode 100644 index 00000000000..68598dd4f7c --- /dev/null +++ b/.changeset/itchy-shrimps-help.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/picker": patch +--- + +S2 Popover has an updated default position, bottom-start. The correct `.spectrum-Popover--bottom-start` class was added to the open popover selector blocks for picker so that the spacing from the picker to the popover is correctly adjusted. diff --git a/.changeset/rotten-meals-share.md b/.changeset/rotten-meals-share.md new file mode 100644 index 00000000000..4c0b89a0c5a --- /dev/null +++ b/.changeset/rotten-meals-share.md @@ -0,0 +1,17 @@ +--- +"@spectrum-css/popover": major +--- + +S2 Popover Migration + +The S2 popover using new tokens for border color, padding, corner radius and elevation/drop shadows. + +Renamed Mods + +| Old mod | New mod | +| --------------------------------------------- | ------------------------------------ | +| `--mod-popover-shadow-blur` | `--mod-popover-drop-shadow-blur` | +| `--mod-popover-shadow-color` | `--mod-popover-drop-shadow-color` | +| `--mod-popover-shadow-horizontal` | `--mod-popover-drop-shadow-x` | +| `--mod-popover-shadow-vertical` | `--mod-popover-drop-shadow-y` | +| `--mod-popover-content-area-spacing-vertical` | `--mod-popover-content-area-spacing` | diff --git a/.changeset/twenty-ravens-divide.md b/.changeset/twenty-ravens-divide.md new file mode 100644 index 00000000000..01f7271a5fe --- /dev/null +++ b/.changeset/twenty-ravens-divide.md @@ -0,0 +1,8 @@ +--- +"@spectrum-css/coachmark": minor +--- + +CSS references to popover custom properties/tokens were updated to reflect some mod name changes in the S2 popover (#3365). The corner radius token was updated to correspond to the new S2 popover corner radius, as well as some updated popover mod names: + +- `--mod-popover-content-area-spacing-vertical` was updated to `--mod-popover-content-area-spacing`. +- `--spectrum-border-width-100` was updated to `--spectrum-corner-radius-large-default` diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 690cd1f8f6e..a6bbae0715e 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -71,7 +71,7 @@ "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-border-width-100", - "--spectrum-corner-radius-100", + "--spectrum-corner-radius-large-default", "--spectrum-heading-color", "--spectrum-heading-line-height", "--spectrum-heading-sans-serif-font-weight", @@ -86,7 +86,7 @@ "--mod-buttongroup-justify-content", "--mod-buttongroup-spacing", "--mod-popover-border-width", - "--mod-popover-content-area-spacing-vertical", + "--mod-popover-content-area-spacing", "--mod-popover-corner-radius" ], "high-contrast": [] diff --git a/components/coachmark/index.css b/components/coachmark/index.css index bd8821b3bb1..0ade95bfbec 100644 --- a/components/coachmark/index.css +++ b/components/coachmark/index.css @@ -18,8 +18,8 @@ /* @passthrough start */ --mod-buttongroup-justify-content: flex-end; --mod-popover-border-width: var(--spectrum-border-width-100); - --mod-popover-corner-radius: var(--spectrum-corner-radius-100); - --mod-popover-content-area-spacing-vertical: 0; + --mod-popover-corner-radius: var(--spectrum-corner-radius-large-default); + --mod-popover-content-area-spacing: 0; --mod-button-edge-to-visual-only: 9px; /* @passthrough end */ diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index 1048a0a2f50..754e012f599 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -2,7 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Picker", - ".spectrum-Picker + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", @@ -13,11 +13,11 @@ ".spectrum-Picker--quiet:focus-visible:after", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", - ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeL + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeS", - ".spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeS + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker--sizeXL", - ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open", + ".spectrum-Picker--sizeXL + .spectrum-Popover--bottom-start.is-open", ".spectrum-Picker-label", ".spectrum-Picker-label.is-placeholder", ".spectrum-Picker-label.is-placeholder:active", diff --git a/components/picker/index.css b/components/picker/index.css index 5b46d2597fe..ace3bd34cd6 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -53,7 +53,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-100); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-100); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-medium); } @@ -125,7 +125,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-75); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-75); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-small); } } @@ -147,7 +147,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-200); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-200); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-large); } } @@ -169,7 +169,7 @@ --spectrum-picker-spacing-top-to-disclosure-icon: var(--spectrum-field-top-to-disclosure-icon-300); --spectrum-picker-spacing-edge-to-disclosure-icon: var(--spectrum-field-end-edge-to-disclosure-icon-300); - & + .spectrum-Popover--bottom.is-open { + & + .spectrum-Popover--bottom-start.is-open { --spectrum-picker-spacing-picker-to-popover: var(--spectrum-component-to-menu-extra-large); } } @@ -410,7 +410,7 @@ margin-inline-end: var(--mod-picker-spacing-icon-to-disclosure-icon, var(--spectrum-picker-spacing-icon-to-disclosure-icon)); } -.spectrum-Picker + .spectrum-Popover--bottom.is-open { +.spectrum-Picker + .spectrum-Popover--bottom-start.is-open { transform: translateY(var(--mod-picker-spacing-picker-to-popover, var(--spectrum-picker-spacing-picker-to-popover))); } diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index a9c06a3f817..f1219f98085 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -143,11 +143,14 @@ export const Template = ({ const popoverMarkup = popoverContent.length !== 0 ? Popover({ isOpen: isOpen && !isDisabled && !isLoading, withTip: false, - position: "bottom", + position: "bottom-start", isQuiet, content: popoverContent, size, customStyles: customPopoverStyles, + popoverWrapperStyles: { + "display": "block", + }, }, context) : ""; const helpTextMarkup = helpText ? HelpText({ diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index ae647daed75..ffc401b6b99 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -105,48 +105,51 @@ "--mod-popover-background-color", "--mod-popover-border-color", "--mod-popover-border-width", - "--mod-popover-content-area-spacing-vertical", + "--mod-popover-content-area-spacing", "--mod-popover-corner-radius", + "--mod-popover-drop-shadow-blur", + "--mod-popover-drop-shadow-color", + "--mod-popover-drop-shadow-x", + "--mod-popover-drop-shadow-y", "--mod-popover-filter", "--mod-popover-pointer-edge-spacing", "--mod-popover-pointer-height", - "--mod-popover-pointer-width", - "--mod-popover-shadow-blur", - "--mod-popover-shadow-color", - "--mod-popover-shadow-horizontal", - "--mod-popover-shadow-vertical" + "--mod-popover-pointer-width" ], "component": [ "--spectrum-popover-animation-distance", "--spectrum-popover-background-color", - "--spectrum-popover-border-color", + "--spectrum-popover-border-color-rgb", + "--spectrum-popover-border-color-with-transparency", + "--spectrum-popover-border-opacity", + "--spectrum-popover-border-transparency", "--spectrum-popover-border-width", - "--spectrum-popover-content-area-spacing-vertical", + "--spectrum-popover-content-area-spacing", "--spectrum-popover-corner-radius", + "--spectrum-popover-drop-shadow-blur", + "--spectrum-popover-drop-shadow-color", + "--spectrum-popover-drop-shadow-x", + "--spectrum-popover-drop-shadow-y", + "--spectrum-popover-edge-to-content-area", "--spectrum-popover-filter", "--spectrum-popover-pointer-edge-offset", "--spectrum-popover-pointer-edge-spacing", "--spectrum-popover-pointer-height", "--spectrum-popover-pointer-width", - "--spectrum-popover-shadow-blur", - "--spectrum-popover-shadow-color", - "--spectrum-popover-shadow-horizontal", - "--spectrum-popover-shadow-vertical", "--spectrum-popover-tip-height", - "--spectrum-popover-tip-width", - "--spectrum-popover-top-to-content-area" + "--spectrum-popover-tip-width" ], "global": [ "--spectrum-animation-duration-0", "--spectrum-animation-duration-100", "--spectrum-background-layer-2-color", "--spectrum-border-width-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", - "--spectrum-gray-400", + "--spectrum-corner-radius-large-default", + "--spectrum-drop-shadow-elevated-blur", + "--spectrum-drop-shadow-elevated-color", + "--spectrum-drop-shadow-elevated-x", + "--spectrum-drop-shadow-elevated-y", + "--spectrum-gray-200-rgb", "--spectrum-spacing-100" ], "passthroughs": [], diff --git a/components/popover/index.css b/components/popover/index.css index 45c41dde7ae..0cc88d2eda4 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -14,46 +14,42 @@ @import "@spectrum-css/commons/overlay.css"; .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - - /* animation distance is equal to and responsible for popover offset */ + /* animation distance is equal to and responsible for popover offset ("spacing" tip to source) */ --spectrum-popover-animation-distance: var(--spectrum-spacing-100); --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); - --spectrum-popover-border-color: var(--spectrum-gray-400); + + /* TODO: Cannot use popover-border-color token until the value no longer has the rgba() function alpha/opacity. We should be able to refactor instances of `--spectrum-popover-border-color-rgb` with `--spectrum-popover-border-color` once this is available. */ + /* --spectrum-popover-border-color-default: var(--spectrum-popover-border-color); */ + --spectrum-popover-border-color-rgb: var(--spectrum-gray-200-rgb); + --spectrum-popover-border-transparency: var(--spectrum-popover-border-opacity); + --spectrum-popover-border-color-with-transparency: rgba(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency)); /* popover inner padding */ - --spectrum-popover-content-area-spacing-vertical: var(--spectrum-popover-top-to-content-area); + --spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area); /* popover drop shadow */ - --spectrum-popover-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-popover-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-popover-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-popover-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x); + --spectrum-popover-drop-shadow-y: var(--spectrum-drop-shadow-elevated-y); + --spectrum-popover-drop-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color); /* popover corner radius */ - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default); /* pointer tip dimensions */ --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ - --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-corner-radius-100) + (var(--spectrum-popover-tip-width) / 2)); + --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-popover-corner-radius) + (var(--spectrum-popover-tip-width) / 2)); /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Popover { - --highcontrast-popover-border-color: CanvasText; - } -} - .spectrum-Popover { - --spectrum-popover-filter: drop-shadow(var(--mod-popover-shadow-horizontal, var(--spectrum-popover-shadow-horizontal)) var(--mod-popover-shadow-vertical, var(--spectrum-popover-shadow-vertical)) var(--mod-popover-shadow-blur, var(--spectrum-popover-shadow-blur)) var(--mod-popover-shadow-color, var(--spectrum-popover-shadow-color))); + --spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))); @extend %spectrum-overlay; box-sizing: border-box; @@ -61,14 +57,15 @@ outline: none; /* Hide focus outline */ - padding: var(--mod-popover-content-area-spacing-vertical, var(--spectrum-popover-content-area-spacing-vertical)) 0; + padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing)); display: inline-flex; flex-direction: column; border-style: solid; border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); - border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); + border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); @@ -85,7 +82,7 @@ stroke-linecap: square; stroke-linejoin: miter; fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color))); + stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); } } @@ -151,7 +148,7 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */ - margin-left: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); } /* popover animates towards right ⮕ */ @@ -169,7 +166,7 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */ - margin-right: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); } /* popover animates towards left ⬅ */ @@ -186,7 +183,7 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-end: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); } /* LTR read, popover animates towards left ⬅ */ @@ -208,7 +205,7 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-start: calc(var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); } /* LTR read, popover animates towards right ⮕ */ @@ -423,3 +420,10 @@ } } } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Popover { + --highcontrast-popover-border-color: CanvasText; + } +} diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index e5e7f986607..844b18eeeff 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -12,11 +12,12 @@ import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./temp /** * A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.). - * It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface. + * It stands out via its visual style (stroke and/or drop shadow) and floats on top of the rest of the interface. * + * ## Usage notes * - Popover's position and distance to its source should be handled by the implementation. Positioning in Storybook is only for demonstration purposes. - * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This - * offset is done with a CSS transform and animates with a CSS transition. + * - When the `.is-open` class is present, popover is offset from the source by the spacing value defined in `--spectrum-popover-animation-distance`. This offset is done with a CSS transform and animates with a CSS transition. + * - There may be cases where a popover has another sibling popover. Implementations can add `margin` styles to the sibling popover, set to `--spectrum-popover-animation-distance`, within their popover position calculations. See [the nested popover story](/docs/components-popover--docs#nested) below for an example. */ export default { title: "Popover", @@ -81,8 +82,8 @@ export default { isOpen: true, withTip: false, position: "bottom", - popoverHeight: 142, - popoverWidth: 89, + popoverHeight: 158, + popoverWidth: 105, }, parameters: { layout: "centered", @@ -101,10 +102,10 @@ export default { }; /** - * By default, popovers do not have a tip. Popovers without a tip should be used when the source has a - * visually distinct down state, in order to show the connection between the popover and its source. + * By default, popovers do not have a tip and are positioned at the top. Popovers without a tip should be used when the source has a + * visually distinct [down state](/docs/foundations-down-state--docs), in order to show the connection between the popover and its source. * - * This example uses the [menu](?path=/docs/components-menu--docs) component within the popover, and a button as the source. + * This example uses the [menu](/docs/components-menu--docs) component within the popover, has a position of `bottom`, and uses a button as the source. */ export const Default = PopoverGroup.bind({}); Default.args = { @@ -163,6 +164,10 @@ Nested.args = { (passthroughs, context) => Template({ position: "end-top", isOpen: true, + customStyles: { + // nested popover spacing so that adjacent `.spectrum-Popover` divs don't "touch" + "margin": "var(--spectrum-popover-animation-distance)", + }, trigger: (passthroughs, context) => ActionButton({ label: "More actions", ...passthroughs, @@ -231,7 +236,7 @@ WithTip.parameters = { */ // @see https://opensource.adobe.com/spectrum-web-components/components/popover/#dialog-popovers export const DialogStyle = Template.bind({}); -DialogStyle.storyName = "Dialog style content"; +DialogStyle.storyName = "Dialog-style content"; DialogStyle.tags = ["!dev"]; DialogStyle.args = { withTip: true, diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js index ad179e3b70e..846d9bd15c4 100644 --- a/components/popover/stories/popover.test.js +++ b/components/popover/stories/popover.test.js @@ -30,8 +30,8 @@ export const PopoverGroup = Variants({ "end-top", "end-bottom", ].map((position) => { - const popoverHeight = 142; - const popoverWidth = 89; + const popoverHeight = 158; + const popoverWidth = 105; let wrapperStyles = { "justify-content": "center", diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index b76c6fe5dbf..3ff8ee18be9 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -21,8 +21,8 @@ export const Template = ({ triggerId = getRandomId("popover-trigger"), customStyles = {}, popoverWrapperStyles = {}, - popoverHeight = 142, - popoverWidth = 89, + popoverHeight = 158, + popoverWidth = 105, popoverAlignment = {}, skipAlignment = false, trigger, From d975107ed7232f3c317f24fb17006957ae078ec8 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Mon, 3 Feb 2025 10:02:21 -0500 Subject: [PATCH 075/103] feat(breadcrumb)!: spectrum 2 migration (#3395) Migrates component to Spectrum 2. Includes renaming of variants and new large t-shirt size, changed token usage to match spec, additional storybook options, etc. docs(breadcrumb): new controls for nested and improved nested docs Adds controls so a user is able to display the nested truncated menu, root context, set disabled items, and item text. This also clears up and moves around some of the documentation about the truncated menu and root context. docs(breadcrumb): refactor tests Update VRTs tests file to use new refactored controls and updated s2 variants. More options can now live in the state data. docs(breadcrumb): add hover and focus-visible to tests --- .changeset/fresh-crabs-deliver.md | 16 + components/breadcrumb/dist/metadata.json | 120 +++----- components/breadcrumb/index.css | 279 +++++++----------- .../breadcrumb/stories/breadcrumb.stories.js | 248 +++++++++++----- .../breadcrumb/stories/breadcrumb.test.js | 151 +++++----- components/breadcrumb/stories/template.js | 70 ++++- components/popover/dist/metadata.json | 1 - 7 files changed, 470 insertions(+), 415 deletions(-) create mode 100644 .changeset/fresh-crabs-deliver.md diff --git a/.changeset/fresh-crabs-deliver.md b/.changeset/fresh-crabs-deliver.md new file mode 100644 index 00000000000..8197b9cc588 --- /dev/null +++ b/.changeset/fresh-crabs-deliver.md @@ -0,0 +1,16 @@ +--- +"@spectrum-css/breadcrumb": major +--- + +#### Spectrum 2 Migration + +The breadcrumbs component is now updated to use the S2 specs and tokens. This includes updated spacing, heights, colors, font sizes, etc. + +There has been a major design change to the variant classes related to density and sizing, to align their terminology better with t-shirt sizes: + +- The "compact" variant no longer exists. The `spectrum-Breadcrumbs--compact` class and associated custom properties are removed. The default (medium) breadcrumbs are now sized similar to what was previously called compact. +- There is a new "large" variant, which uses the `spectrum-Breadcrumbs--sizeL` class. This is sized similarly to what was previously the default. + +In the multiline variant, the size of the title item can optionally be customized using an additional child heading element that applies one of the +typography component's `spectrum-Heading--size*` classes. The preferred sizes specified in the design spec are small, medium, large (default), and +extra-large. If an additional heading element is not used within the title item, the text will still be sized correctly to the default. diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 96f608af79c..35fb0b03993 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -2,35 +2,30 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Breadcrumbs", - ".spectrum-Breadcrumbs--compact", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item > .spectrum-ActionButton", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item:last-of-type", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs--multiline", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item > .spectrum-ActionButton", ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemLink", - ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-itemSeparator", + ".spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink", + ".spectrum-Breadcrumbs--sizeL", ".spectrum-Breadcrumbs-item", ".spectrum-Breadcrumbs-item > .spectrum-ActionButton", ".spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled", ".spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before", ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton", + ".spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink", ".spectrum-Breadcrumbs-item:last-of-type", ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink", ".spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemLink", + ".spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator", ".spectrum-Breadcrumbs-itemLink.is-disabled", ".spectrum-Breadcrumbs-itemLink:focus-visible:before", ".spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]", ".spectrum-Breadcrumbs-itemLink[href]", + ".spectrum-Breadcrumbs-itemLink[href]:active", ".spectrum-Breadcrumbs-itemLink[href]:focus-visible", ".spectrum-Breadcrumbs-itemLink[href]:hover", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]", + ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover", ".spectrum-Breadcrumbs-itemSeparator", @@ -41,41 +36,23 @@ "--mod-breadcrumbs-action-button-color", "--mod-breadcrumbs-action-button-color-disabled", "--mod-breadcrumbs-action-button-spacing-block", - "--mod-breadcrumbs-action-button-spacing-block-between-multiline", - "--mod-breadcrumbs-action-button-spacing-block-compact", - "--mod-breadcrumbs-action-button-spacing-block-multiline", "--mod-breadcrumbs-action-button-spacing-inline", - "--mod-breadcrumbs-action-button-spacing-inline-start", "--mod-breadcrumbs-block-size", - "--mod-breadcrumbs-block-size-compact", - "--mod-breadcrumbs-block-size-multiline", "--mod-breadcrumbs-focus-indicator-color", "--mod-breadcrumbs-focus-indicator-gap", "--mod-breadcrumbs-focus-indicator-thickness", "--mod-breadcrumbs-font-family", - "--mod-breadcrumbs-font-family-compact", - "--mod-breadcrumbs-font-family-compact-current", "--mod-breadcrumbs-font-family-current", - "--mod-breadcrumbs-font-family-multiline", - "--mod-breadcrumbs-font-family-multiline-current", "--mod-breadcrumbs-font-size", - "--mod-breadcrumbs-font-size-compact", - "--mod-breadcrumbs-font-size-compact-current", "--mod-breadcrumbs-font-size-current", - "--mod-breadcrumbs-font-size-multiline", - "--mod-breadcrumbs-font-size-multiline-current", + "--mod-breadcrumbs-font-style", "--mod-breadcrumbs-font-weight", - "--mod-breadcrumbs-font-weight-compact", - "--mod-breadcrumbs-font-weight-compact-current", "--mod-breadcrumbs-font-weight-current", - "--mod-breadcrumbs-font-weight-multiline", - "--mod-breadcrumbs-font-weight-multiline-current", "--mod-breadcrumbs-icon-spacing-block", - "--mod-breadcrumbs-icon-spacing-block-between-multiline", - "--mod-breadcrumbs-icon-spacing-block-compact", - "--mod-breadcrumbs-icon-spacing-block-start-multiline", "--mod-breadcrumbs-inline-end", "--mod-breadcrumbs-inline-start", + "--mod-breadcrumbs-inline-start-to-truncated-menu", + "--mod-breadcrumbs-item-dragged-background", "--mod-breadcrumbs-item-link-border-radius", "--mod-breadcrumbs-line-height", "--mod-breadcrumbs-separator-color", @@ -85,108 +62,93 @@ "--mod-breadcrumbs-text-color-disabled", "--mod-breadcrumbs-text-decoration-gap", "--mod-breadcrumbs-text-decoration-thickness", - "--mod-breadcrumbs-text-spacing-block-between-multiline", "--mod-breadcrumbs-text-spacing-block-end", - "--mod-breadcrumbs-text-spacing-block-end-compact", - "--mod-breadcrumbs-text-spacing-block-end-multiline", "--mod-breadcrumbs-text-spacing-block-start", - "--mod-breadcrumbs-text-spacing-block-start-compact", - "--mod-breadcrumbs-text-spacing-block-start-multiline" + "--mod-breadcrumbs-title-spacing-block-end", + "--mod-breadcrumbs-title-spacing-block-start", + "--mod-heading-margin-end", + "--mod-heading-margin-start" ], "component": [ "--spectrum-breadcrumbs-action-button-color", "--spectrum-breadcrumbs-action-button-color-disabled", "--spectrum-breadcrumbs-action-button-spacing-block", - "--spectrum-breadcrumbs-action-button-spacing-block-between-multiline", - "--spectrum-breadcrumbs-action-button-spacing-block-compact", - "--spectrum-breadcrumbs-action-button-spacing-block-multiline", "--spectrum-breadcrumbs-action-button-spacing-inline", - "--spectrum-breadcrumbs-action-button-spacing-inline-start", "--spectrum-breadcrumbs-block-size", - "--spectrum-breadcrumbs-block-size-compact", - "--spectrum-breadcrumbs-block-size-multiline", - "--spectrum-breadcrumbs-bottom-to-text", - "--spectrum-breadcrumbs-bottom-to-text-compact", "--spectrum-breadcrumbs-bottom-to-text-multiline", "--spectrum-breadcrumbs-end-edge-to-text", "--spectrum-breadcrumbs-focus-indicator-color", "--spectrum-breadcrumbs-focus-indicator-gap", "--spectrum-breadcrumbs-focus-indicator-thickness", "--spectrum-breadcrumbs-font-family", - "--spectrum-breadcrumbs-font-family-compact", - "--spectrum-breadcrumbs-font-family-compact-current", "--spectrum-breadcrumbs-font-family-current", - "--spectrum-breadcrumbs-font-family-multiline", - "--spectrum-breadcrumbs-font-family-multiline-current", "--spectrum-breadcrumbs-font-size", - "--spectrum-breadcrumbs-font-size-compact", - "--spectrum-breadcrumbs-font-size-compact-current", "--spectrum-breadcrumbs-font-size-current", - "--spectrum-breadcrumbs-font-size-multiline", - "--spectrum-breadcrumbs-font-size-multiline-current", + "--spectrum-breadcrumbs-font-style", "--spectrum-breadcrumbs-font-weight", - "--spectrum-breadcrumbs-font-weight-compact", - "--spectrum-breadcrumbs-font-weight-compact-current", "--spectrum-breadcrumbs-font-weight-current", - "--spectrum-breadcrumbs-font-weight-multiline", - "--spectrum-breadcrumbs-font-weight-multiline-current", - "--spectrum-breadcrumbs-height", - "--spectrum-breadcrumbs-height-compact", "--spectrum-breadcrumbs-height-multiline", "--spectrum-breadcrumbs-icon-spacing-block", - "--spectrum-breadcrumbs-icon-spacing-block-between-multiline", - "--spectrum-breadcrumbs-icon-spacing-block-compact", - "--spectrum-breadcrumbs-icon-spacing-block-start-multiline", "--spectrum-breadcrumbs-inline-end", "--spectrum-breadcrumbs-inline-start", + "--spectrum-breadcrumbs-inline-start-to-truncated-menu", + "--spectrum-breadcrumbs-item-dragged-background", "--spectrum-breadcrumbs-item-link-border-radius", "--spectrum-breadcrumbs-line-height", "--spectrum-breadcrumbs-separator-color", - "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", "--spectrum-breadcrumbs-separator-spacing-inline", - "--spectrum-breadcrumbs-start-edge-to-text", + "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", + "--spectrum-breadcrumbs-start-edge-to-text-large", + "--spectrum-breadcrumbs-start-edge-to-text-medium", + "--spectrum-breadcrumbs-start-edge-to-text-multiline", "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "--spectrum-breadcrumbs-text-color", "--spectrum-breadcrumbs-text-color-current", "--spectrum-breadcrumbs-text-color-disabled", "--spectrum-breadcrumbs-text-decoration-gap", "--spectrum-breadcrumbs-text-decoration-thickness", - "--spectrum-breadcrumbs-text-spacing-block-between-multiline", "--spectrum-breadcrumbs-text-spacing-block-end", - "--spectrum-breadcrumbs-text-spacing-block-end-compact", - "--spectrum-breadcrumbs-text-spacing-block-end-multiline", "--spectrum-breadcrumbs-text-spacing-block-start", - "--spectrum-breadcrumbs-text-spacing-block-start-compact", - "--spectrum-breadcrumbs-text-spacing-block-start-multiline", + "--spectrum-breadcrumbs-text-to-separator-large", + "--spectrum-breadcrumbs-text-to-separator-medium", + "--spectrum-breadcrumbs-text-to-separator-multiline", + "--spectrum-breadcrumbs-title-spacing-block-end", + "--spectrum-breadcrumbs-title-spacing-block-start", "--spectrum-breadcrumbs-top-text-to-bottom-text", - "--spectrum-breadcrumbs-top-to-separator-icon", - "--spectrum-breadcrumbs-top-to-separator-icon-compact", - "--spectrum-breadcrumbs-top-to-separator-icon-multiline", - "--spectrum-breadcrumbs-top-to-text", - "--spectrum-breadcrumbs-top-to-text-compact", + "--spectrum-breadcrumbs-top-to-separator-large", + "--spectrum-breadcrumbs-top-to-separator-medium", + "--spectrum-breadcrumbs-top-to-separator-multiline", "--spectrum-breadcrumbs-top-to-text-multiline", "--spectrum-breadcrumbs-top-to-truncated-menu", - "--spectrum-breadcrumbs-top-to-truncated-menu-compact", "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", - "--spectrum-breadcrumbs-truncated-menu-to-separator-icon" + "--spectrum-breadcrumbs-truncated-menu-to-separator" ], "global": [ "--spectrum-bold-font-weight", - "--spectrum-corner-radius-100", + "--spectrum-component-bottom-to-text-100", + "--spectrum-component-bottom-to-text-200", + "--spectrum-component-height-100", + "--spectrum-component-height-200", + "--spectrum-component-top-to-text-100", + "--spectrum-component-top-to-text-200", + "--spectrum-corner-radius-small-default", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", + "--spectrum-drop-zone-background-color-opacity", + "--spectrum-drop-zone-background-color-rgb", + "--spectrum-extra-bold-font-weight", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-font-size-200", - "--spectrum-font-size-300", "--spectrum-font-size-75", + "--spectrum-heading-size-l", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight", "--spectrum-sans-font-family-stack", - "--spectrum-text-to-visual-100", "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index 11e5a68e03b..d8d46e277dc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -12,88 +12,46 @@ */ .spectrum-Breadcrumbs { - /* block size */ - --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height); - --spectrum-breadcrumbs-block-size-compact: var(--spectrum-breadcrumbs-height-compact); - --spectrum-breadcrumbs-block-size-multiline: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-100); - /* text regular */ + /* Text - medium / default */ --spectrum-breadcrumbs-line-height: var(--spectrum-line-height-100); - --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-breadcrumbs-font-style: var(--spectrum-default-font-style); - /* text regular active item */ - --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-100); --spectrum-breadcrumbs-font-family-current: var(--spectrum-sans-font-family-stack); --spectrum-breadcrumbs-font-weight-current: var(--spectrum-bold-font-weight); - /* text compact */ - --spectrum-breadcrumbs-font-size-compact: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact: var(--spectrum-regular-font-weight); - - /* text compact active item */ - --spectrum-breadcrumbs-font-size-compact-current: var(--spectrum-font-size-100); - --spectrum-breadcrumbs-font-family-compact-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-compact-current: var(--spectrum-bold-font-weight); - - /* text multiline */ - --spectrum-breadcrumbs-font-size-multiline: var(--spectrum-font-size-75); - --spectrum-breadcrumbs-font-family-multiline: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline: var(--spectrum-regular-font-weight); - - /* text multiline active item */ - --spectrum-breadcrumbs-font-size-multiline-current: var(--spectrum-font-size-300); - --spectrum-breadcrumbs-font-family-multiline-current: var(--spectrum-sans-font-family-stack); - --spectrum-breadcrumbs-font-weight-multiline-current: var(--spectrum-bold-font-weight); - - /* hover, active, focus underline */ + /* Hover, active, focus underline */ --spectrum-breadcrumbs-text-decoration-thickness: var(--spectrum-text-underline-thickness); --spectrum-breadcrumbs-text-decoration-gap: var(--spectrum-text-underline-gap); - /* space between items */ - --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-text-to-visual-100); - - /* vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text); - --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text); - --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-icon); + /* Space between separator chevron and items */ + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-medium); - /* compact vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-compact: var(--spectrum-breadcrumbs-top-to-text-compact); - --spectrum-breadcrumbs-text-spacing-block-end-compact: var(--spectrum-breadcrumbs-bottom-to-text-compact); - --spectrum-breadcrumbs-icon-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-separator-icon-compact); + /* Vertical spacing for text and separator icon */ + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-100); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-100); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-medium); + --spectrum-breadcrumbs-title-spacing-block-start: var(--spectrum-breadcrumbs-text-spacing-block-start); + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-text-spacing-block-end); - /* multiline vertical spacing */ - --spectrum-breadcrumbs-text-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-end-multiline: var(--spectrum-breadcrumbs-bottom-to-text-multiline); - --spectrum-breadcrumbs-text-spacing-block-between-multiline: var(--spectrum-breadcrumbs-top-text-to-bottom-text); /* vertical between lines */ - --spectrum-breadcrumbs-icon-spacing-block-start-multiline: var(--spectrum-breadcrumbs-top-to-separator-icon-multiline); - --spectrum-breadcrumbs-icon-spacing-block-between-multiline: var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline); /* vertical between lines */ - - /* horizontal outer spacing of list */ - --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text); + /* Horizontal outer spacing of list */ + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-medium); --spectrum-breadcrumbs-inline-end: var(--spectrum-breadcrumbs-end-edge-to-text); + --spectrum-breadcrumbs-inline-start-to-truncated-menu: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); - /* menu action button icon spacing */ - --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator-icon); - - /* action button spacing */ + /* Action button (truncated menu) spacing */ + --spectrum-breadcrumbs-action-button-spacing-inline: var(--spectrum-breadcrumbs-truncated-menu-to-separator); --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu); - --spectrum-breadcrumbs-action-button-spacing-block-compact: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* compact */ - - --spectrum-breadcrumbs-action-button-spacing-inline-start: var(--spectrum-breadcrumbs-start-edge-to-truncated-menu); /* if icon is first item */ - --spectrum-breadcrumbs-action-button-spacing-block-multiline: var(--spectrum-breadcrumbs-top-to-truncated-menu-compact); /* multiline */ - --spectrum-breadcrumbs-action-button-spacing-block-between-multiline: var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); /* multiline */ - - /* Focus Indicator */ + /* Focus indicator */ --spectrum-breadcrumbs-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-breadcrumbs-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - - /* placeholder for border radius for focus indicator */ - --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-100); + --spectrum-breadcrumbs-item-link-border-radius: var(--spectrum-corner-radius-small-default); /* Colors */ --spectrum-breadcrumbs-text-color: var(--spectrum-neutral-subdued-content-color-default); @@ -102,72 +60,63 @@ --spectrum-breadcrumbs-separator-color: var(--spectrum-neutral-content-color-default); --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-breadcrumbs-item-dragged-background: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + + /* Sub-component: heading */ + --mod-heading-margin-end: 0px; + --mod-heading-margin-start: 0px; } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Breadcrumbs { - --highcontrast-breadcrumbs-text-color: LinkText; - --highcontrast-breadcrumbs-text-color-current: CanvasText; - --highcontrast-breadcrumbs-text-color-disabled: GrayText; - --highcontrast-breadcrumbs-separator-color: CanvasText; - --highcontrast-breadcrumbs-action-button-color: LinkText; - --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; +.spectrum-Breadcrumbs--sizeL { + --spectrum-breadcrumbs-block-size: var(--spectrum-component-height-200); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-200); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-font-size-200); - --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; - } + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-large); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-component-top-to-text-200); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-component-bottom-to-text-200); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-large); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-large); +} + +.spectrum-Breadcrumbs--multiline { + --spectrum-breadcrumbs-block-size: var(--spectrum-breadcrumbs-height-multiline); + --spectrum-breadcrumbs-font-size: var(--spectrum-font-size-75); + --spectrum-breadcrumbs-font-size-current: var(--spectrum-heading-size-l); + --spectrum-breadcrumbs-font-weight-current: var(--spectrum-extra-bold-font-weight); + + --spectrum-breadcrumbs-separator-spacing-inline: var(--spectrum-breadcrumbs-text-to-separator-multiline); + --spectrum-breadcrumbs-text-spacing-block-start: var(--spectrum-breadcrumbs-top-to-text-multiline); + --spectrum-breadcrumbs-text-spacing-block-end: var(--spectrum-breadcrumbs-top-text-to-bottom-text); + --spectrum-breadcrumbs-icon-spacing-block: var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline); + --spectrum-breadcrumbs-title-spacing-block-start: 0; + --spectrum-breadcrumbs-title-spacing-block-end: var(--spectrum-breadcrumbs-bottom-to-text-multiline); + --spectrum-breadcrumbs-inline-start: var(--spectrum-breadcrumbs-start-edge-to-text-multiline); + --spectrum-breadcrumbs-action-button-spacing-block: var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text); } .spectrum-Breadcrumbs { list-style-type: none; - margin: 0; - padding-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); - padding-inline-end: var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + padding-inline: 0 var(--mod-breadcrumbs-inline-end, var(--spectrum-breadcrumbs-inline-end)); + block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; - flex: 1 0 0%; - - block-size: var(--mod-breadcrumbs-block-size, var(--spectrum-breadcrumbs-block-size)); -} - -.spectrum-Breadcrumbs--compact { - block-size: var(--mod-breadcrumbs-block-size-compact, var(--spectrum-breadcrumbs-block-size-compact)); -} - -.spectrum-Breadcrumbs--multiline { - block-size: var(--mod-breadcrumbs-block-size-multiline, var(--spectrum-breadcrumbs-block-size-multiline)); - - flex-wrap: wrap; - align-content: center; } .spectrum-Breadcrumbs-itemSeparator { position: relative; - margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); - margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - opacity: 1; color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); &:dir(rtl) { transform: scaleX(-1); } - - .spectrum-Breadcrumbs--compact & { - margin-block: var(--mod-breadcrumbs-icon-spacing-block-compact, var(--spectrum-breadcrumbs-icon-spacing-block-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - margin-block-start: var(--mod-breadcrumbs-icon-spacing-block-start-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-icon-spacing-block-between-multiline, var(--spectrum-breadcrumbs-icon-spacing-block-between-multiline)); - } } .spectrum-Breadcrumbs-item { @@ -175,40 +124,15 @@ position: relative; display: inline-flex; white-space: nowrap; - align-items: center; font-family: var(--mod-breadcrumbs-font-family, var(--spectrum-breadcrumbs-font-family)); font-size: var(--mod-breadcrumbs-font-size, var(--spectrum-breadcrumbs-font-size)); font-weight: var(--mod-breadcrumbs-font-weight, var(--spectrum-breadcrumbs-font-weight)); + font-style: var(--mod-breadcrumbs-font-style, var(--spectrum-breadcrumbs-font-style)); line-height: var(--mod-breadcrumbs-line-height, var(--spectrum-breadcrumbs-line-height)); - .spectrum-Breadcrumbs--compact & { - font-family: var(--mod-breadcrumbs-font-family-compact, var(--spectrum-breadcrumbs-font-family-compact)); - font-size: var(--mod-breadcrumbs-font-size-compact, var(--spectrum-breadcrumbs-font-size-compact)); - font-weight: var(--mod-breadcrumbs-font-weight-compact, var(--spectrum-breadcrumbs-font-weight-compact)); - - > .spectrum-ActionButton { - margin-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact)); - } - } - - .spectrum-Breadcrumbs--multiline & { - font-family: var(--mod-breadcrumbs-font-family-multiline, var(--spectrum-breadcrumbs-font-family-multiline)); - font-size: var(--mod-breadcrumbs-font-size-multiline, var(--spectrum-breadcrumbs-font-size-multiline)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline, var(--spectrum-breadcrumbs-font-weight-multiline)); - - &:last-of-type { - block-size: auto; - inline-size: 100%; - } - - > .spectrum-ActionButton { - margin-block-start: var(--mod-breadcrumbs-action-button-spacing-block-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-multiline)); - margin-block-end: var(--mod-breadcrumbs-action-button-spacing-block-between-multiline, var(--spectrum-breadcrumbs-action-button-spacing-block-between-multiline)); - } - } - + /* Breadcrumbs title (current item) */ &:last-of-type { font-family: var(--mod-breadcrumbs-font-family-current, var(--spectrum-breadcrumbs-font-family-current)); font-size: var(--mod-breadcrumbs-font-size-current, var(--spectrum-breadcrumbs-font-size-current)); @@ -219,27 +143,10 @@ } } - .spectrum-Breadcrumbs--compact &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-compact-current, var(--spectrum-breadcrumbs-font-family-compact-current)); - font-size: var(--mod-breadcrumbs-font-size-compact-current, var(--spectrum-breadcrumbs-font-size-compact-current)); - font-weight: var(--mod-breadcrumbs-font-weight-compact-current, var(--spectrum-breadcrumbs-font-weight-compact-current)); - } - - .spectrum-Breadcrumbs--multiline &:last-of-type { - font-family: var(--mod-breadcrumbs-font-family-multiline-current, var(--spectrum-breadcrumbs-font-family-multiline-current)); - font-size: var(--mod-breadcrumbs-font-size-multiline-current, var(--spectrum-breadcrumbs-font-size-multiline-current)); - font-weight: var(--mod-breadcrumbs-font-weight-multiline-current, var(--spectrum-breadcrumbs-font-weight-multiline-current)); - - .spectrum-Breadcrumbs-itemLink { - margin-block-start: 0; - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-multiline, var(--spectrum-breadcrumbs-text-spacing-block-end-multiline)); - } - } - + /* Truncated menu */ > .spectrum-ActionButton { margin-inline: var(--mod-breadcrumbs-action-button-spacing-inline, var(--spectrum-breadcrumbs-action-button-spacing-inline)); margin-block: var(--mod-breadcrumbs-action-button-spacing-block, var(--spectrum-breadcrumbs-action-button-spacing-block)); - color: var(--highcontrast-breadcrumbs-action-button-color, var(--mod-breadcrumbs-action-button-color, var(--spectrum-breadcrumbs-action-button-color))); &:disabled { @@ -247,10 +154,14 @@ } } + /* Start edge to text or truncated menu */ &:first-of-type { - /* if folder icon is first item */ + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + > .spectrum-ActionButton { - margin-inline-start: var(--mod-breadcrumbs-action-button-spacing-inline-start, var(--spectrum-breadcrumbs-action-button-spacing-inline-start)); + margin-inline-start: var(--mod-breadcrumbs-inline-start-to-truncated-menu, var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)); } } } @@ -258,46 +169,43 @@ .spectrum-Breadcrumbs-itemLink { cursor: default; position: relative; - box-sizing: border-box; - display: block; - border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); /* placeholder for token */ outline: none; - text-decoration: none; color: var(--highcontrast-breadcrumbs-text-color, var(--mod-breadcrumbs-text-color, var(--spectrum-breadcrumbs-text-color))); + /* Create new stacking context for negative z-index dragged pseudo element. */ + isolation: isolate; + margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start, var(--spectrum-breadcrumbs-text-spacing-block-start)); margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end, var(--spectrum-breadcrumbs-text-spacing-block-end)); + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); &.is-disabled, &[aria-disabled="true"] { color: var(--highcontrast-breadcrumbs-text-color-disabled, var(--mod-breadcrumbs-text-color-disabled, var(--spectrum-breadcrumbs-text-color-disabled))); } + /* Breadcrumbs title (current item) */ .spectrum-Breadcrumbs-item:last-of-type & { color: var(--highcontrast-breadcrumbs-text-color-current, var(--mod-breadcrumbs-text-color-current, var(--spectrum-breadcrumbs-text-color-current))); + margin-block-start: var(--mod-breadcrumbs-title-spacing-block-start, var(--spectrum-breadcrumbs-title-spacing-block-start)); + margin-block-end: var(--mod-breadcrumbs-title-spacing-block-end, var(--spectrum-breadcrumbs-title-spacing-block-end)); } - .spectrum-Breadcrumbs--compact & { - /* compact vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-compact, var(--spectrum-breadcrumbs-text-spacing-block-start-compact)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-end-compact, var(--spectrum-breadcrumbs-text-spacing-block-end-compact)); - } - - .spectrum-Breadcrumbs--multiline & { - /* multiline vertical spacing */ - margin-block-start: var(--mod-breadcrumbs-text-spacing-block-start-multiline, var(--spectrum-breadcrumbs-text-spacing-block-start-multiline)); - margin-block-end: var(--mod-breadcrumbs-text-spacing-block-between-multiline, var(--spectrum-breadcrumbs-text-spacing-block-between-multiline)); /* vertical between lines */ + + .spectrum-Breadcrumbs-itemSeparator { + margin-inline-start: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); } + /* Link is focusable */ &[href], &[tabindex="0"] { cursor: pointer; &:hover, + &:active, &:focus-visible { text-decoration: underline; text-decoration-thickness: var(--mod-breadcrumbs-text-decoration-thickness, var(--spectrum-breadcrumbs-text-decoration-thickness)); @@ -306,10 +214,12 @@ } } -/* focus indicator */ +/* Focus indicator */ .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before, .spectrum-Breadcrumbs-itemLink:focus-visible::before { position: absolute; + content: ""; + pointer-events: none; margin-inline-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); margin-block-start: calc((var(--mod-breadcrumbs-focus-indicator-gap, var(--spectrum-breadcrumbs-focus-indicator-gap)) + var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness))) * -1); @@ -322,9 +232,40 @@ border-width: var(--mod-breadcrumbs-focus-indicator-thickness, var(--spectrum-breadcrumbs-focus-indicator-thickness)); border-style: solid; border-radius: var(--mod-breadcrumbs-item-link-border-radius, var(--spectrum-breadcrumbs-item-link-border-radius)); + border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); +} - content: ""; - pointer-events: none; +.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink::before { + background: var(--mod-breadcrumbs-item-dragged-background, var(--spectrum-breadcrumbs-item-dragged-background)); - border-color: var(--highcontrast-breadcrumbs-focus-indicator-color, var(--mod-breadcrumbs-focus-indicator-color, var(--spectrum-breadcrumbs-focus-indicator-color))); + /* Make sure the background color does not appear on top of the text. */ + z-index: -1; +} + +/* Multiline */ +.spectrum-Breadcrumbs--multiline { + flex-wrap: wrap; + align-content: center; + + /* The multiline title takes up the full width and appears below the other breadcrumb items. */ + .spectrum-Breadcrumbs-item:last-of-type { + block-size: auto; + inline-size: 100%; + + > .spectrum-Breadcrumbs-itemLink { + margin-inline-start: var(--mod-breadcrumbs-inline-start, var(--spectrum-breadcrumbs-inline-start)); + } + } +} + +@media (forced-colors: active) { + .spectrum-Breadcrumbs { + --highcontrast-breadcrumbs-text-color: LinkText; + --highcontrast-breadcrumbs-text-color-current: CanvasText; + --highcontrast-breadcrumbs-text-color-disabled: GrayText; + --highcontrast-breadcrumbs-separator-color: CanvasText; + --highcontrast-breadcrumbs-action-button-color: LinkText; + --highcontrast-breadcrumbs-action-button-color-disabled: GrayText; + --highcontrast-breadcrumbs-focus-indicator-color: CanvasText; + } } diff --git a/components/breadcrumb/stories/breadcrumb.stories.js b/components/breadcrumb/stories/breadcrumb.stories.js index a25c76c285c..84302d77c29 100644 --- a/components/breadcrumb/stories/breadcrumb.stories.js +++ b/components/breadcrumb/stories/breadcrumb.stories.js @@ -1,44 +1,136 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isDragged } from "@spectrum-css/preview/types"; +import { isDragged, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { BreadcrumbGroup } from "./breadcrumb.test.js"; -import { Template } from "./template.js"; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; /** * Breadcrumbs show hierarchy and navigational context for a user's location within an app. - * - * ## Nesting - * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. They are typically indicated by the truncated menu folder icon. - * - * The nested variants below are non-functional. Implementations can add their own overflow menus to display all options within a breadcrumb. - * - * ## Root Context - * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory called “On this device” is very helpful. */ export default { title: "Breadcrumbs", component: "Breadcrumbs", argTypes: { - items: { table: { disable: true } }, + items: { + name: "Breadcrumb items", + description: "Additional breadcrumb items after the nav root item, including their label text.<br>Advanced:<ul><li>To show an item as disabled, add a key named `isDisabled` with a value of `true`.</li><li>The \"Show dragged item\" control will affect the item with `isDragged` set to `true`.</li></ul>", + control: "array", + table: { + category: "Content", + }, + }, + size: { + ...size(["m", "l"]), + if: { arg: "variant", neq: "multiline" }, + }, variant: { - name: "Variants", + name: "Variant", type: { name: "string" }, defaultValue: "Default", table: { type: { summary: "string" }, category: "Component", - defaultValue: { summary: "Default" }, }, - options: ["default", "compact", "multiline"], - control: "select", + options: [undefined, "multiline"], + control: { + type: "select", + labels: { + undefined: "Default", + multiline: "Multiline", + }, + }, + }, + isDragged: { + ...isDragged, + name: "Show dragged item", + description: "Breadcrumbs can have optional behavior to allow for drag and drop functionality. Setting this to true will style a breadcrumb item as if something is currently being dragged on top of it.", + }, + titleHeadingSize: { + name: "Breadcrumb title heading size", + description: "The breadcrumb title can be customized in the multiline variant using an additional element that uses the typography component's heading classes. The preferred heading sizes are small, medium, large, and extra-large. When no heading classes are used, the text will be sized the same as a large heading by default.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: { + type: "select", + labels: { + undefined: "Default", + s: "Small", + m: "Medium", + l: "Large", + xl: "Extra-large", + }, + }, + defaultValue: undefined, + options: [undefined, "s", "m", "l", "xl"], + if: { arg: "variant", eq: "multiline" }, + }, + showTruncatedMenu: { + name: "Show truncated menu", + description: "Displays a breadcrumb item with a folder icon, that would house truncated breadcrumb items.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + showRootContext: { + name: "Show with root context", + description: "Includes a visible breadcrumb item before the truncated menu, for displaying a root directory.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + truncatedMenuIsDisabled: { + name: "Show truncated menu as disabled", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + if: { arg: "showTruncatedMenu" }, + }, + rootItemText: { + name: "Root breadcrumb item label", + type: { name: "string" }, + defaultValue: "Nav root", + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", }, - isDragged, }, args: { rootClass: "spectrum-Breadcrumbs", isDragged: false, - variant: "default", + variant: undefined, + size: "m", + showTruncatedMenu: false, + showRootContext: false, + truncatedMenuIsDisabled: false, + rootItemText: "Nav root", + items: [ + { + label: "Sub item", + isDragged: true, + }, + { + label: "Trend", + }, + { + label: "January 2019 assets", + }, + ], }, parameters: { design: { @@ -52,33 +144,21 @@ export default { /** * By default, breadcrumbs are displayed inline with the hierarchy shown in reading order. + * The medium size is used by default, and it should display the medium truncated menu action button. + * The separator UI icon displayed should be `Chevron100`. */ export const Default = BreadcrumbGroup.bind({}); -Default.args = { - items: [ - { - label: "Nav root", - }, - { - label: "Trend", - isDragged: true, - }, - { - label: "January 2019 assets", - }, - ], -}; +Default.args = {}; +/** + * Breadcrumbs truncate when there is not enough room to display all levels of the breadcrumb list, or as a way of managing relevance of the visible breadcrumb items in a deeply nested hierarchy. The truncation of breadcrumb items begins when either there is not enough room to display all items, or if there are 5 or more breadcrumbs to display. This truncated menu is an icon only action button that typically displays a folder icon. + * + * The nested variants below are non-functional. Implementations should make sure to follow the design guidelines for overflow behavior and displaying all options within the truncated menu. + */ export const DefaultNested = Template.bind({}); DefaultNested.args = { + showTruncatedMenu: true, items: [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Sub item", - }, { label: "Trend", }, @@ -91,18 +171,18 @@ DefaultNested.tags = ["!dev"]; DefaultNested.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNested.storyName = "Default, nested"; +DefaultNested.storyName = "Default, nested (truncated menu)"; +/** + * Some applications find that displaying the root directory is useful for user orientation. This variation keeps the root visible when other folders are + * truncated into a menu. For example, when users can navigate file directories on their device as well as in the cloud, exposing a root directory + * called “On this device” is very helpful. + */ export const DefaultNestedRootVisible = Template.bind({}); DefaultNestedRootVisible.args = { + showTruncatedMenu: true, + showRootContext: true, items: [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - }, { label: "Trend", }, @@ -115,7 +195,7 @@ DefaultNestedRootVisible.tags = ["!dev"]; DefaultNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -DefaultNestedRootVisible.storyName = "Default, nested (root visible)"; +DefaultNestedRootVisible.storyName = "Default, nested with root context"; /** * The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location. @@ -135,7 +215,7 @@ MultilineNested.args = { ...DefaultNested.args, variant: "multiline", }; -MultilineNested.storyName = "Multiline, nested"; +MultilineNested.storyName = "Multiline, nested (truncated menu)"; MultilineNested.tags= ["!dev"]; MultilineNested.parameters = { chromatic: { disableSnapshot: true }, @@ -150,45 +230,47 @@ MultilineNestedRootVisible.tags = ["!dev"]; MultilineNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -MultilineNestedRootVisible.storyName = "Multiline, nested (root visible)"; +MultilineNestedRootVisible.storyName = "Multiline, nested with root context"; /** - * When needing to optimize for functional space, the compact option is useful for reducing the height of the breadcrumbs while still maintaining the proper user context. + * When using the large size, the truncated menu action button should also use the large size. The separator UI icon displayed should be `Chevron100`. */ -export const Compact = Template.bind({}); -Compact.args = { +export const Large = Template.bind({}); +Large.args = { ...Default.args, - variant: "compact", + size: "l", }; -Compact.tags = ["!dev"]; -Compact.parameters = { +Large.tags = ["!dev"]; +Large.parameters = { chromatic: { disableSnapshot: true }, }; -export const CompactNested = Template.bind({}); -CompactNested.args = { +export const LargeNested = Template.bind({}); +LargeNested.args = { ...DefaultNested.args, - variant: "compact", + size: "l", }; -CompactNested.tags = ["!dev"]; -CompactNested.parameters = { +LargeNested.tags = ["!dev"]; +LargeNested.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNested.storyName = "Compact, nested"; +LargeNested.storyName = "Large, nested (truncated menu)"; -export const CompactNestedRootVisible = Template.bind({}); -CompactNestedRootVisible.args = { +export const LargeNestedRootVisible = Template.bind({}); +LargeNestedRootVisible.args = { ...DefaultNestedRootVisible.args, - variant: "compact", + size: "l", }; -CompactNestedRootVisible.tags = ["!dev"]; -CompactNestedRootVisible.parameters = { +LargeNestedRootVisible.tags = ["!dev"]; +LargeNestedRootVisible.parameters = { chromatic: { disableSnapshot: true }, }; -CompactNestedRootVisible.storyName = "Compact, nested (root visible)"; +LargeNestedRootVisible.storyName = "Large, nested with root context"; /** * Breadcrumbs can have optional behavior to allow for drag and drop functionality. + * When a breadcrumb item has something being dragged on top of it, the class `is-dragged` is added to it. + * This example adds that class to the second breadcrumb item. */ export const Dragged = Template.bind({}); Dragged.args = { @@ -201,21 +283,16 @@ Dragged.parameters = { }; /** - * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the Action button, the `[disabled]` attribute is applied. + * The example below has two disabled breadcrumb items. When disabling the text link, the `is-disabled` class + * gets added to `.spectrum-Breadcrumbs-itemLink`. When disabling the truncated menu action button, the `[disabled]` attribute is applied. */ export const Disabled = Template.bind({}); Disabled.args = { + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, items: [ { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Trendy", + label: "Trend", isDisabled: true, }, { @@ -228,6 +305,23 @@ Disabled.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * For the multiline variant, the breadcrumb title can be customized using an additional element that uses the heading classes from + * the [typography component](/docs/components-typography--docs). The preferred heading sizes are `.spectrum-Heading--sizeS`, + * `.spectrum-Heading--sizeM`, `.spectrum-Heading--sizeL` (default), and `.spectrum-Heading--sizeXL`. If no heading element or classes are + * used, the text will be sized the same as a large heading by default. + */ +export const MultilineTitleSizes = BreadcrumbTitleHeadings.bind({}); +MultilineTitleSizes.args = { + ...Multiline.args, + showTruncatedMenu: true, +}; +MultilineTitleSizes.storyName = "Multiline, title heading sizes"; +MultilineTitleSizes.tags = ["!dev"]; +MultilineTitleSizes.parameters = { + chromatic: { disableSnapshot: true }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = BreadcrumbGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/breadcrumb/stories/breadcrumb.test.js b/components/breadcrumb/stories/breadcrumb.test.js index f5e33d71c58..ef56e21e722 100644 --- a/components/breadcrumb/stories/breadcrumb.test.js +++ b/components/breadcrumb/stories/breadcrumb.test.js @@ -1,109 +1,94 @@ import { Variants } from "@spectrum-css/preview/decorators"; -import { Template } from "./template.js"; - -const DefaultItems = [ - { - label: "Nav root", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled sub item", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedItems = [ - { - iconName: "FolderOpen", - iconSet: "workflow", - }, - { - label: "Dragged", - isDragged: true, - }, - { - label: "Disabled", - isDisabled: true, - }, - { - label: "January 2019 assets", - }, -]; - -const NestedRootVisibleItems = [ - { - label: "Nav root", - }, - { - iconName: "FolderOpen", - iconSet: "workflow", - isDisabled: true, - }, - { - label: "Dragged sub item", - isDragged: true, - }, - { - label: "January 2019 assets", - }, -]; +import { BreadcrumbTitleHeadings, Template } from "./template.js"; export const BreadcrumbGroup = Variants({ Template, + withSizes: false, testData: [ { testHeading: "Default", - items: DefaultItems, - }, - { - testHeading: "Default (nested)", - items: NestedItems, }, { - testHeading: "Default (nested, root visible)", - items: NestedRootVisibleItems, + testHeading: "Large", + size: "l", }, { - testHeading: "Compact", - variant: "compact", - items: DefaultItems, + testHeading: "Multiline", + variant: "multiline", }, { - testHeading: "Compact (nested)", - variant: "compact", - items: NestedItems, + testHeading: "Multiline with typography headings", + variant: "multiline", + withStates: false, + Template: BreadcrumbTitleHeadings, + showTruncatedMenu: true, + showRootContext: true, + isDragged: true, }, + ], + stateData: [ { - testHeading: "Compact (nested, root visible)", - variant: "compact", - items: NestedRootVisibleItems, + testHeading: "Nested", + showTruncatedMenu: true, }, { - testHeading: "Multiline", - variant: "multiline", - items: DefaultItems, + testHeading: "Nested with root context", + showTruncatedMenu: true, + showRootContext: true, }, { - testHeading: "Multiline (nested)", - variant: "multiline", - items: NestedItems, + testHeading: "Disabled items and dragged item", + isDragged: true, + showTruncatedMenu: true, + truncatedMenuIsDisabled: true, + items: [ + { + label: "Dragged item", + isDragged: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + }, + { + label: "January 2019 assets", + }, + ] }, { - testHeading: "Multiline (nested, root visible)", - variant: "multiline", - items: NestedRootVisibleItems, + testHeading: "Hover", + isDragged: true, + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isHovered: true, + }, + { + label: "Disabled sub item", + isDisabled: true, + isHovered: true, + }, + { + label: "January 2019 assets", + isHovered: true, + }, + ] }, - ], - stateData: [ { - testHeading: "Dragged, disabled", + testHeading: "Focus-visible", isDragged: true, - } + showTruncatedMenu: true, + items: [ + { + label: "Sub item", + isFocused: true, + }, + { + label: "January 2019 assets", + isFocused: true, + }, + ] + }, ] }); diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js index 3f0db2ad30b..0a0ad48c0d9 100644 --- a/components/breadcrumb/stories/template.js +++ b/components/breadcrumb/stories/template.js @@ -1,5 +1,7 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -11,19 +13,43 @@ export const Template = ({ rootClass = "spectrum-Breadcrumbs", customClasses = [], items = [], + size = "m", variant, isDragged = false, + titleHeadingSize, + showTruncatedMenu = false, + showRootContext = false, + truncatedMenuIsDisabled = false, + rootItemText = "Nav root", } = {}, context = {}) => { + /** + * Build array of breadcrumb items. + * - The presence of the root item and truncated menu are dependent upon controls. + * - The rest of the items, including the current item, come from the `items` array. + */ + const breadcrumbItems = [ + ...(showTruncatedMenu == false || showRootContext == true) ? [{ + label: rootItemText, + }] : [], + ...(showTruncatedMenu == true) ? [{ + iconName: "FolderOpen", + iconSet: "workflow", + isDragged: true, + }] : [], + ...items, + ]; + return html` <nav> <ul class=${classMap({ [rootClass]: true, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m", [`${rootClass}--${variant}`]: typeof variant !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} > - ${items.map((item, idx, arr) => { + ${breadcrumbItems.map((item, idx, arr) => { const { label, isDisabled, iconName, iconSet } = item; return html` <li class=${classMap({ @@ -38,10 +64,10 @@ export const Template = ({ { iconName, iconSet, - isDisabled, + isDisabled: isDisabled || truncatedMenuIsDisabled, isQuiet: true, customIconClasses: [`${rootClass}-folder`], - size: "m", + size: variant === "multiline" ? "s" : size, }, context, ), @@ -53,6 +79,8 @@ export const Template = ({ class=${classMap({ [`${rootClass}-itemLink`]: true, "is-disabled": isDisabled, + "is-focus-visible": item.isFocused, + "is-hover": item.isHovered, })} aria-disabled=${ifDefined( isDisabled ? "true" : undefined, @@ -63,15 +91,24 @@ export const Template = ({ ${label} </div>`, () => - html`<a class="${rootClass}-itemLink" aria-current="page" - >${label}</a + html`<a + class=${classMap({ + [`${rootClass}-itemLink`]: true, + "is-hover": item.isHovered, + })} + aria-current="page" + >${ typeof titleHeadingSize == "undefined" ? label : Typography({ + semantics: "heading", + size: titleHeadingSize, + content: [label], + })}</a >`, ), )} ${when(idx !== arr.length - 1, () => Icon( { - iconName: "ChevronRight100", + iconName: variant == "multiline" ? "ChevronRight75" : "ChevronRight100", setName: "ui", customClasses: [`${rootClass}-itemSeparator`], }, @@ -84,3 +121,24 @@ export const Template = ({ </nav> `; }; + +/** + * Displays all preferred sizes for breadcrumb title headings used with the multiline variant. + */ +export const BreadcrumbTitleHeadings = (args, context) => Container({ + withBorder: false, + direction: "column", + wrapperStyles: { + rowGap: "12px", + }, + content: html`${[undefined, "s", "m", "l", "xl"].map((titleHeadingSize) => Container({ + withBorder: true, + heading: typeof titleHeadingSize != "undefined" + ? `Heading size: ${titleHeadingSize}` + : "Default - no heading element or classes", + content: Template({ + ...args, + titleHeadingSize, + }) + }, context))}`, +}, context); diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index ffc401b6b99..75570cec13b 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -143,7 +143,6 @@ "--spectrum-animation-duration-0", "--spectrum-animation-duration-100", "--spectrum-background-layer-2-color", - "--spectrum-border-width-100", "--spectrum-corner-radius-large-default", "--spectrum-drop-shadow-elevated-blur", "--spectrum-drop-shadow-elevated-color", From 86f5f90a56924921aca6ab3a3e4238392ca2c4ba Mon Sep 17 00:00:00 2001 From: Aziz Ramos <abdulr@adobe.com> Date: Mon, 14 Oct 2024 13:39:03 -0400 Subject: [PATCH 076/103] feat(illustratedmessage): adding new s2 tokens feat(illustratedmessage): updating token version feat(illustratedmessage): work in progress feat(illustratedmessage): adding new tokens, tshirt sizes, orientation, button group feat(illustratedmessage): updating CSS structure and adding conditional buttons feat(illustratedmessage): update tokens feat(illustratedmessage): changeset, styles, dropzone mods feat(illustratedmessage): work in progress feat(illustratedmessage): updating mods feat(illustratedmessage): removing message accent color selector chore(illustratedmessage): updating changeset docs(illustratedmessage): heading controls fix(illustratedmessage): fixing cjk tokens and removing heading and base classes fix(illustratedmessage): fixing cjk tokens and removing heading and base classes feat(illustratedmessage): new mods docs(illustratedmessage): adding horizontal story context feat(illustratedmessage): removing extra dashes, reverting dropzone chore(fix): adding stylelint disable desc chore(fix): removing unused highcontrast accent color token feat(illustratedmessage): adding grid display chore(im): removing unused import chore(im): removing more unused imports chore(illustratedmessage): updating testing env fix(dropzone): removing unused controls feat(illustratedmessage): reviewing comments feat(illustratedmessage): adjusting story horiz copy fix(illustratedmessage): resolving changes chore(im): bringing back to center fix: removing lint line chore: restore stepper index css file chore(illustratedmessage): removing one liner in dropzone) chore(illustratedmessage): removing stylelint line chore(illustratedmessage): removing unused custom props in dropzone --- .changeset/beige-dragons-tickle.md | 49 +++++ components/dropzone/dist/metadata.json | 40 ++++- components/dropzone/index.css | 163 +++++++++++------ .../dropzone/stories/dropzone.stories.js | 6 +- components/dropzone/stories/template.js | 4 +- .../illustratedmessage/dist/metadata.json | 73 +++++--- components/illustratedmessage/index.css | 142 +++++++++------ .../stories/illustratedmessage.stories.js | 101 +++++++---- .../stories/illustratedmessage.test.js | 26 +-- .../illustratedmessage/stories/template.js | 167 +++++++----------- 10 files changed, 481 insertions(+), 290 deletions(-) create mode 100644 .changeset/beige-dragons-tickle.md diff --git a/.changeset/beige-dragons-tickle.md b/.changeset/beige-dragons-tickle.md new file mode 100644 index 00000000000..1f5e66fd674 --- /dev/null +++ b/.changeset/beige-dragons-tickle.md @@ -0,0 +1,49 @@ +--- +"@spectrum-css/illustratedmessage": major +"@spectrum-css/dropzone": major +--- + +# S2 Illustrated Message Migration + +This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing. Dropzone `--mod` names are renamed to match the semantic tokens in illustrated message. + +## Illustrated Message + +New properties +`--spectrum-illustrated-message-heading-to-description` +`--spectrum-illustrated-message-illustration-to-heading` +`--spectrum-illustrated-message-illustration-to-content` +`--spectrum-illustrated-message-description-to-action` +`--spectrum-illustrated-message-illustration-color` +`--spectrum-illustrated-message-illustration-size` +`--spectrum-illustrated-message-small-cjk-title-font-size` +`--spectrum-illustrated-message-large-cjk-title-font-size` +`--spectrum-illustrated-message-large-body-font-size` +`--spectrum-illustrated-message-horizontal-maximum-width` + +New mods +`--mod-illustrated-message-description-to-action` +`--mod-illustrated-message-heading-to-description` +`--mod-illustrated-message-illustration-to-content` +`--mod-illustrated-message-horizontal-maximum-width` + +Removed properties +`--spectrum-illustrated-message-title-to-heading` +`--spectrum-illustrated-message-description-max-inline-size` +`--spectrum-illustrated-message-heading-max-inline-size` +`--spectrum-illustrated-message-illustration-accent-color` +`--mod-illustrated-message-illustration-accent-color` +`--highcontrast-illustrated-message-illustration-accent-color` + +## Dropzone + +New mods +`--mod-drop-zone-body-to-action` +`--mod-drop-zone-illustration-to-title` + +## Dropzone nested mods + +Renamed mods +`--mod-illustrated-message-title-to-heading` > `--mod-illustrated-message-illustration-to-heading` +`--mod-illustrated-message-heading-to-body` > `--mod-illustrated-message-heading-to-description` +`--mod-illustrated-message-content-maximum-width` > `--mod-illustrated-message-vertical-maximum-width` diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 96f850663e7..dbbe449c8a9 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -24,9 +24,11 @@ "--mod-drop-zone-body-font-style", "--mod-drop-zone-body-font-weight", "--mod-drop-zone-body-line-height", + "--mod-drop-zone-body-to-action", "--mod-drop-zone-border-color", "--mod-drop-zone-border-color-hover", "--mod-drop-zone-border-style", + "--mod-drop-zone-border-style--dragged", "--mod-drop-zone-border-style-dragged", "--mod-drop-zone-border-width", "--mod-drop-zone-content-background-color", @@ -62,14 +64,44 @@ "--spectrum-drop-zone-background-color-opacity", "--spectrum-drop-zone-background-color-opacity-filled", "--spectrum-drop-zone-background-color-rgb", + "--spectrum-drop-zone-body-color", + "--spectrum-drop-zone-body-font-family", + "--spectrum-drop-zone-body-font-size", + "--spectrum-drop-zone-body-font-style", + "--spectrum-drop-zone-body-font-weight", + "--spectrum-drop-zone-body-line-height", "--spectrum-drop-zone-body-size", + "--spectrum-drop-zone-body-to-action", "--spectrum-drop-zone-border-color", "--spectrum-drop-zone-border-color-hover", "--spectrum-drop-zone-border-width", "--spectrum-drop-zone-cjk-title-size", "--spectrum-drop-zone-content-background-color", + "--spectrum-drop-zone-content-bottom-to-text", + "--spectrum-drop-zone-content-color", + "--spectrum-drop-zone-content-edge-to-text", + "--spectrum-drop-zone-content-font-family", + "--spectrum-drop-zone-content-font-size", + "--spectrum-drop-zone-content-font-style", + "--spectrum-drop-zone-content-font-weight", + "--spectrum-drop-zone-content-height", + "--spectrum-drop-zone-content-line-height", + "--spectrum-drop-zone-content-max-width", "--spectrum-drop-zone-content-maximum-width", + "--spectrum-drop-zone-content-top-to-text", + "--spectrum-drop-zone-corner-radius", + "--spectrum-drop-zone-heading-color", + "--spectrum-drop-zone-heading-font-family", + "--spectrum-drop-zone-heading-font-size", + "--spectrum-drop-zone-heading-font-style", + "--spectrum-drop-zone-heading-font-weight", + "--spectrum-drop-zone-heading-line-height", + "--spectrum-drop-zone-heading-to-body", "--spectrum-drop-zone-illustration-color", + "--spectrum-drop-zone-illustration-color-hover", + "--spectrum-drop-zone-illustration-to-heading", + "--spectrum-drop-zone-illustration-to-title", + "--spectrum-drop-zone-padding", "--spectrum-drop-zone-title-size", "--spectrum-drop-zone-width" ], @@ -96,6 +128,8 @@ "--spectrum-line-height-100", "--spectrum-neutral-visual-color", "--spectrum-sans-font-family-stack", + "--spectrum-spacing-200", + "--spectrum-spacing-300", "--spectrum-spacing-400", "--spectrum-spacing-75", "--spectrum-white" @@ -104,7 +138,6 @@ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", "--mod-actionbutton-label-color", - "--mod-illustrated-message-content-maximum-width", "--mod-illustrated-message-description-color", "--mod-illustrated-message-description-font-family", "--mod-illustrated-message-description-font-size", @@ -112,18 +145,19 @@ "--mod-illustrated-message-description-font-weight", "--mod-illustrated-message-description-line-height", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-body", "--mod-illustrated-message-heading-to-description", "--mod-illustrated-message-illustration-color", + "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-title-color", "--mod-illustrated-message-title-font-family", "--mod-illustrated-message-title-font-size", "--mod-illustrated-message-title-font-style", "--mod-illustrated-message-title-font-weight", "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "high-contrast": [ "--highcontrast-drop-zone-border-color-hover", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 768ee1dd1f6..4f0f4fb322e 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -12,74 +12,134 @@ */ .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); + --spectrum-drop-zone-padding: var(--spectrum-spacing-400); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-to-heading: var(--spectrum-spacing-400); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-to-body: var(--spectrum-spacing-75); --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-200); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-style: var(--spectrum-heading-sans-serif-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-title-size); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-line-height: var(--spectrum-heading-line-height); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-color: var(--spectrum-heading-color); + + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-family: var(--spectrum-sans-font-family-stack); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-weight: var(--spectrum-body-sans-serif-font-weight); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-style: var(--spectrum-body-sans-serif-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-font-size: var(--spectrum-drop-zone-body-size); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-line-height: var(--spectrum-body-line-height); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-color: var(--spectrum-body-color); + --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ --spectrum-drop-zone-illustration-color: var(--spectrum-neutral-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-illustration-to-title: var(--spectrum-spacing-200); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300); + + /* Filled styles */ + --spectrum-drop-zone-content-height: var(--spectrum-component-height-300); + --spectrum-drop-zone-content-max-width: var(--spectrum-drop-zone-content-maximum-width); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-drop-zone-content-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-drop-zone-content-bottom-to-text: var(--spectrum-component-bottom-to-text-300); + + --spectrum-drop-zone-content-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-drop-zone-content-font-weight: var(--spectrum-bold-font-weight); + --spectrum-drop-zone-content-font-style: var(--spectrum-default-font-style); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-font-size: var(--spectrum-font-size-300); + --spectrum-drop-zone-content-line-height: var(--spectrum-line-height-100); + --spectrum-drop-zone-content-background-color: var(--spectrum-accent-visual-color); + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-content-color: var(--spectrum-white); - /* @passthrough start -- IllustratedMessage -- settings for a nested illustrated message */ - --mod-illustrated-message-content-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); + /* Settings for a nested illustrated message */ + --mod-illustrated-message-vertical-maximum-width: var(--mod-drop-zone-content-maximum-width, var(--spectrum-drop-zone-content-maximum-width)); --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color, var(--spectrum-drop-zone-illustration-color)); - --mod-illustrated-message-title-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-spacing-400)); - --mod-illustrated-message-heading-to-body: var(--mod-drop-zone-heading-to-body, var(--spectrum-spacing-75)); - --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-sans-font-family-stack)); - --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-heading-sans-serif-font-weight)); - --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-heading-sans-serif-font-style)); - --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-title-size)); - --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-heading-line-height)); - --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-heading-color)); + --mod-illustrated-message-illustration-to-heading: var(--mod-drop-zone-illustration-to-heading, var(--spectrum-drop-zone-illustration-to-heading)); + --mod-illustrated-message-heading-to-description: var(--mod-drop-zone-heading-to-body, var(--spectrum-drop-zone-heading-to-body)); + --mod-illustrated-message-description-to-action: var(--mod-drop-zone-body-to-action, var(--spectrum-drop-zone-body-to-action)); + --mod-illustrated-message-title-font-family: var(--mod-drop-zone-heading-font-family, var(--spectrum-drop-zone-heading-font-family)); + --mod-illustrated-message-title-font-weight: var(--mod-drop-zone-heading-font-weight, var(--spectrum-drop-zone-heading-font-weight)); + --mod-illustrated-message-title-font-style: var(--mod-drop-zone-heading-font-style, var(--spectrum-drop-zone-heading-font-style)); + --mod-illustrated-message-title-font-size: var(--mod-drop-zone-heading-font-size, var(--spectrum-drop-zone-heading-font-size)); + --mod-illustrated-message-title-line-height: var(--mod-drop-zone-heading-line-height, var(--spectrum-drop-zone-heading-line-height)); + --mod-illustrated-message-title-color: var(--mod-drop-zone-heading-color, var(--spectrum-drop-zone-heading-color)); --mod-illustrated-message-description-position: relative; --mod-illustrated-message-description-z-index: 10; - --mod-illustrated-message-heading-to-description: 0; - --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-sans-font-family-stack)); - --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-body-sans-serif-font-weight)); - --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-body-sans-serif-font-style)); - --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-size)); - --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-body-line-height)); - --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-body-color)); - /* @passthrough end */ - - /* @passthrough start -- ActionButton settings for a nested actionbutton */ - --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-font-size-300)); - --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-white)); - --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-component-edge-to-text-300)); - /* @passthrough end */ + --mod-illustrated-message-description-font-family: var(--mod-drop-zone-body-font-family, var(--spectrum-drop-zone-body-font-family)); + --mod-illustrated-message-description-font-weight: var(--mod-drop-zone-body-font-weight, var(--spectrum-drop-zone-body-font-weight)); + --mod-illustrated-message-description-font-style: var(--mod-drop-zone-body-font-style, var(--spectrum-drop-zone-body-font-style)); + --mod-illustrated-message-description-font-size: var(--mod-drop-zone-body-font-size, var(--spectrum-drop-zone-body-font-size)); + --mod-illustrated-message-description-line-height: var(--mod-drop-zone-body-line-height, var(--spectrum-drop-zone-body-line-height)); + --mod-illustrated-message-description-color: var(--mod-drop-zone-body-color, var(--spectrum-drop-zone-body-color)); + + /* Settings for a nested actionbutton */ + --mod-actionbutton-font-size: var(--mod-drop-zone-content-font-size, var(--spectrum-drop-zone-content-font-size)); + --mod-actionbutton-label-color: var(--mod-drop-zone-content-color, var(--spectrum-drop-zone-content-color)); + --mod-actionbutton-edge-to-text: var(--mod-drop-zone-content-edge-to-text, var(--spectrum-drop-zone-content-edge-to-text)); + + /* cjk language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ + --spectrum-drop-zone-heading-font-size: var(--spectrum-drop-zone-cjk-title-size); + } +} +.spectrum-DropZone { box-sizing: border-box; inline-size: var(--mod-drop-zone-width, var(--spectrum-drop-zone-width)); - padding: calc(var(--mod-drop-zone-padding, var(--spectrum-spacing-400)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); + padding: calc(var(--mod-drop-zone-padding, var(--spectrum-drop-zone-padding)) - var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width))); text-align: center; border-color: var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color)); border-width: var(--mod-drop-zone-border-width, var(--spectrum-drop-zone-border-width)); - border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-corner-radius-100)); + border-radius: var(--mod-drop-zone-corner-radius, var(--spectrum-drop-zone-corner-radius)); border-style: var(--mod-drop-zone-border-style, dashed); - background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); background-size: cover; - - &:lang(ja), - &:lang(zh), - &:lang(ko) { - /* @passthrough -- updated value for cjk font size */ - --mod-illustrated-message-title-font-size: var(--spectrum-drop-zone-cjk-title-size); - } + background-color: var(--mod-drop-zone-background-color, var(--spectrum-drop-zone-background-color)); &.is-dragged { - --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); + /* @deprecation --mod-drop-zone-border-style--dragged will be removed during the S2 migration; please update your code to --mod-drop-zone-border-style-dragged */ + --mod-drop-zone-border-style: var(--mod-drop-zone-border-style--dragged, var(--mod-drop-zone-border-style-dragged, solid)); --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-background-color-opacity))); - --mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - /* @passthrough -- Updated values for a nested illustrated message when state changes */ - --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-accent-visual-color)); + /* Updated values for a nested illustrated message when state changes */ + --mod-illustrated-message-illustration-color: var(--mod-drop-zone-illustration-color-hover, var(--spectrum-drop-zone-illustration-color-hover)); } &.is-filled { /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); - /* @passthrough -- Updated values for a nested illustrated message when state changes */ + /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-display: none; } @@ -89,8 +149,7 @@ &:focus-visible { --mod-drop-zone-border-style: solid; - --mod-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); - + --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); outline: 0; } } @@ -107,16 +166,16 @@ .spectrum-DropZone-button { box-sizing: border-box; border: none; - block-size: var(--mod-drop-zone-content-height, var(--spectrum-component-height-300)); - max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-maximum-width)); - padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-component-top-to-text-300)); - padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-component-bottom-to-text-300)); + block-size: var(--mod-drop-zone-content-height, var(--spectrum-drop-zone-content-height)); + max-inline-size: var(--mod-drop-zone-content-max-width, var(--spectrum-drop-zone-content-max-width)); + padding-block-start: var(--mod-drop-zone-content-top-to-text, var(--spectrum-drop-zone-content-top-to-text)); + padding-block-end: var(--mod-drop-zone-content-bottom-to-text, var(--spectrum-drop-zone-content-bottom-to-text)); background-color: var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color)); - font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-sans-font-family-stack)); - font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-bold-font-weight)); - font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-default-font-style)); - line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-line-height-100)); + font-family: var(--mod-drop-zone-content-font-family, var(--spectrum-drop-zone-content-font-family)); + font-weight: var(--mod-drop-zone-content-font-weight, var(--spectrum-drop-zone-content-font-weight)); + font-style: var(--mod-drop-zone-content-font-style, var(--spectrum-drop-zone-content-font-style)); + line-height: var(--mod-drop-zone-content-line-height, var(--spectrum-drop-zone-content-line-height)); &:hover, &:focus { @@ -127,11 +186,13 @@ /********* WHCM *********/ @media (forced-colors: active) { .spectrum-DropZone { + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ --highcontrast-drop-zone-illustration-color: CanvasText; --highcontrast-drop-zone-border-color-hover: Highlight; - /* @passthrough -- updated values for a nested illustrated message when in a high contrast state */ + /* Updated values for a nested illustrated message when in a high contrast state */ + /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used in illustrated */ --highcontrast-illustrated-message-illustration-color: var(--highcontrast-drop-zone-illustration-color); } } diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 9d0d7e4c3d2..7bca0bd87a7 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -27,12 +27,16 @@ export default { if: { arg: "isDragged", truthy: true }, }, ...IllustratedMessage.argTypes, + hasButtons: { table: { disable: true }}, + isHorizontal: { table: { disable: true }}, label: ActionButton.argTypes.label, }, args: { rootClass: "spectrum-DropZone", isDragged: false, isFilled: false, + title: "Drag and drop your file", + description: "Or, select a file from your computer.", }, parameters: { design: { @@ -46,14 +50,12 @@ export default { export const Default = DropzoneGroup.bind({}); Default.args = { - heading: "Drag and drop your file", description: [ () => { return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; }, ], label: "Drop file to replace", - useAccentColor: true, customStyles: { width: "300px", }, diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 3363790eccc..b9d6013a0b0 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ isFilled = false, customClasses = [], customStyles = {}, - heading, + title, description, label, id = getRandomId("dropzone"), @@ -32,7 +32,7 @@ export const Template = ({ tabindex="0" style=${styleMap(customStyles)} > - ${IllustratedMessage({ heading, description }, context)} + ${IllustratedMessage({ title, description }, context)} <div class="${rootClass}-content"> ${ActionButton( diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 313c6d71885..12705f6822e 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -2,7 +2,18 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-IllustratedMessage", - ".spectrum-IllustratedMessage-accent", + ".spectrum-IllustratedMessage--horizontal", + ".spectrum-IllustratedMessage--horizontal .spectrum-IllustratedMessage-illustration", + ".spectrum-IllustratedMessage--sizeL", + ".spectrum-IllustratedMessage--sizeL:lang(ja)", + ".spectrum-IllustratedMessage--sizeL:lang(ko)", + ".spectrum-IllustratedMessage--sizeL:lang(zh)", + ".spectrum-IllustratedMessage--sizeS", + ".spectrum-IllustratedMessage--sizeS:lang(ja)", + ".spectrum-IllustratedMessage--sizeS:lang(ko)", + ".spectrum-IllustratedMessage--sizeS:lang(zh)", + ".spectrum-IllustratedMessage-actions", + ".spectrum-IllustratedMessage-content", ".spectrum-IllustratedMessage-description", ".spectrum-IllustratedMessage-heading", ".spectrum-IllustratedMessage-illustration", @@ -11,23 +22,24 @@ ".spectrum-IllustratedMessage:lang(zh)" ], "modifiers": [ - "--mod-illustrated-message-content-maximum-width", "--mod-illustrated-message-description-color", "--mod-illustrated-message-description-font-family", "--mod-illustrated-message-description-font-size", "--mod-illustrated-message-description-font-style", "--mod-illustrated-message-description-font-weight", "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-max-inline-size", "--mod-illustrated-message-description-pointer-events", "--mod-illustrated-message-description-position", + "--mod-illustrated-message-description-to-action", "--mod-illustrated-message-description-z-index", "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-max-inline-size", - "--mod-illustrated-message-heading-to-body", "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-illustration-accent-color", + "--mod-illustrated-message-horizontal-maximum-width", + "--mod-illustrated-message-illustrated-inline-size", + "--mod-illustrated-message-illustration-block-size", "--mod-illustrated-message-illustration-color", + "--mod-illustrated-message-illustration-size", + "--mod-illustrated-message-illustration-to-heading", "--mod-illustrated-message-pointer-events", "--mod-illustrated-message-title-color", "--mod-illustrated-message-title-font-family", @@ -35,50 +47,55 @@ "--mod-illustrated-message-title-font-style", "--mod-illustrated-message-title-font-weight", "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + "--mod-illustrated-message-vertical-maximum-width" ], "component": [ - "--spectrum-illustrated-message-body-size", - "--spectrum-illustrated-message-cjk-title-size", "--spectrum-illustrated-message-description-color", "--spectrum-illustrated-message-description-font-family", "--spectrum-illustrated-message-description-font-size", "--spectrum-illustrated-message-description-font-style", "--spectrum-illustrated-message-description-font-weight", "--spectrum-illustrated-message-description-line-height", - "--spectrum-illustrated-message-description-max-inline-size", - "--spectrum-illustrated-message-heading-max-inline-size", + "--spectrum-illustrated-message-description-to-action", "--spectrum-illustrated-message-heading-to-description", - "--spectrum-illustrated-message-illustration-accent-color", + "--spectrum-illustrated-message-horizontal-maximum-width", "--spectrum-illustrated-message-illustration-color", - "--spectrum-illustrated-message-maximum-width", + "--spectrum-illustrated-message-illustration-size", + "--spectrum-illustrated-message-illustration-to-content", + "--spectrum-illustrated-message-illustration-to-heading", + "--spectrum-illustrated-message-large-body-font-size", + "--spectrum-illustrated-message-large-cjk-title-font-size", + "--spectrum-illustrated-message-large-title-font-size", + "--spectrum-illustrated-message-medium-body-font-size", + "--spectrum-illustrated-message-medium-cjk-title-font-size", + "--spectrum-illustrated-message-medium-title-font-size", + "--spectrum-illustrated-message-small-body-font-size", + "--spectrum-illustrated-message-small-cjk-title-font-size", + "--spectrum-illustrated-message-small-title-font-size", "--spectrum-illustrated-message-title-color", "--spectrum-illustrated-message-title-font-family", "--spectrum-illustrated-message-title-font-size", "--spectrum-illustrated-message-title-font-style", "--spectrum-illustrated-message-title-font-weight", "--spectrum-illustrated-message-title-line-height", - "--spectrum-illustrated-message-title-size", - "--spectrum-illustrated-message-title-to-heading" + "--spectrum-illustrated-message-vertical-maximum-width" ], "global": [ - "--spectrum-accent-visual-color", "--spectrum-body-color", - "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-neutral-visual-color", + "--spectrum-line-height-200", + "--spectrum-neutral-content-color-default", "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75" + "--spectrum-spacing-100", + "--spectrum-spacing-200", + "--spectrum-spacing-300", + "--spectrum-spacing-75", + "--spectrum-title-line-height", + "--spectrum-title-sans-serif-font-style", + "--spectrum-title-sans-serif-font-weight" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-illustrated-message-illustration-accent-color", - "--highcontrast-illustrated-message-illustration-color" - ] + "passthroughs": ["--mod-buttongroup-justify-content"], + "high-contrast": ["--highcontrast-illustrated-message-illustration-color"] } diff --git a/components/illustratedmessage/index.css b/components/illustratedmessage/index.css index 6b588504d11..39894c695a1 100644 --- a/components/illustratedmessage/index.css +++ b/components/illustratedmessage/index.css @@ -1,82 +1,96 @@ /*! - * 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. - */ +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 -@media (forced-colors: active) { - .spectrum-IllustratedMessage { - --highcontrast-illustrated-message-illustration-color: CanvasText; - --highcontrast-illustrated-message-illustration-accent-color: Highlight; - } -} +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-IllustratedMessage { /* Size & Spacing */ - --spectrum-illustrated-message-description-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-heading-max-inline-size: var(--spectrum-illustrated-message-maximum-width); - --spectrum-illustrated-message-title-to-heading: var(--spectrum-spacing-400); --spectrum-illustrated-message-heading-to-description: var(--spectrum-spacing-75); + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-200); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-200); + --spectrum-illustrated-message-description-to-action: var(--spectrum-spacing-300); + /* @passthrough -- settings for nested button group */ + --mod-buttongroup-justify-content: center; /* Illustration */ - --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-visual-color); - --spectrum-illustrated-message-illustration-accent-color: var(--spectrum-accent-visual-color); + --spectrum-illustrated-message-illustration-color: var(--spectrum-neutral-content-color-default); + --spectrum-illustrated-message-illustration-size: 96px; /* Title */ --spectrum-illustrated-message-title-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-illustrated-message-title-font-weight: var(--spectrum-heading-sans-serif-font-weight); - --spectrum-illustrated-message-title-font-style: var(--spectrum-heading-sans-serif-font-style); - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-title-size); - --spectrum-illustrated-message-title-line-height: var(--spectrum-heading-line-height); + --spectrum-illustrated-message-title-font-weight: var(--spectrum-title-sans-serif-font-weight); + --spectrum-illustrated-message-title-font-style: var(--spectrum-title-sans-serif-font-style); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-title-font-size); + --spectrum-illustrated-message-title-line-height: var(--spectrum-title-line-height); --spectrum-illustrated-message-title-color: var(--spectrum-heading-color); /* Description */ --spectrum-illustrated-message-description-font-family: var(--spectrum-sans-font-family-stack); --spectrum-illustrated-message-description-font-weight: var(--spectrum-body-sans-serif-font-weight); --spectrum-illustrated-message-description-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-body-size); - --spectrum-illustrated-message-description-line-height: var(--spectrum-body-line-height); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-medium-body-font-size); + --spectrum-illustrated-message-description-line-height: var(--spectrum-line-height-200); --spectrum-illustrated-message-description-color: var(--spectrum-body-color); - block-size: 100%; - - display: var(--mod-illustrated-message-display, flex); - flex-direction: column; - align-items: center; - justify-content: center; + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-medium-cjk-title-font-size); + } +} - text-align: center; - pointer-events: var(--mod-illustrated-message-pointer-events, auto); - max-inline-size: var(--mod-illustrated-message-content-maximum-width); +.spectrum-IllustratedMessage--sizeS { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-small-body-font-size); - /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), &:lang(ko) { - --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-cjk-title-size); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-small-cjk-title-font-size); } } -.spectrum-IllustratedMessage-illustration { - margin-block-end: var(--mod-illustrated-message-title-to-heading, var(--spectrum-illustrated-message-title-to-heading)); - color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); - fill: currentColor; - stroke: currentColor; +.spectrum-IllustratedMessage--sizeL { + --spectrum-illustrated-message-illustration-size: 160px; + --spectrum-illustrated-message-illustration-to-heading: var(--spectrum-spacing-100); + --spectrum-illustrated-message-illustration-to-content: var(--spectrum-spacing-100); + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-title-font-size); + --spectrum-illustrated-message-description-font-size: var(--spectrum-illustrated-message-large-body-font-size); + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-illustrated-message-title-font-size: var(--spectrum-illustrated-message-large-cjk-title-font-size); + } } -.spectrum-IllustratedMessage-accent { - color: var(--highcontrast-illustrated-message-illustration-accent-color, var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))); +.spectrum-IllustratedMessage { + block-size: 100%; + display: var(--mod-illustrated-message-display, grid); + grid-template-areas: + ". illustration ." + "body body body"; + text-align: center; + pointer-events: var(--mod-illustrated-message-pointer-events, auto); + max-inline-size: var(--mod-illustrated-message-vertical-maximum-width, var(--spectrum-illustrated-message-vertical-maximum-width)); +} - /* Safari 16.3 🐛🛠️: Repeated stroke/fill properties is a workaround for a currentcolor bug that was fixed in 16.4. */ +.spectrum-IllustratedMessage-illustration { + margin-block-end: var(--mod-illustrated-message-illustration-to-heading, var(--spectrum-illustrated-message-illustration-to-heading)); + color: var(--highcontrast-illustrated-message-illustration-color, var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))); fill: currentColor; stroke: currentColor; + block-size: var(--mod-illustrated-message-illustration-block-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + inline-size: var(--mod-illustrated-message-illustrated-inline-size, var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))); + grid-area: illustration; } .spectrum-IllustratedMessage-heading { @@ -88,9 +102,8 @@ color: var(--mod-illustrated-message-title-color, var(--spectrum-illustrated-message-title-color)); - max-inline-size: var(--mod-illustrated-message-heading-max-inline-size, var(--spectrum-illustrated-message-heading-max-inline-size)); margin-block-start: 0; - margin-block-end: var(--mod-illustrated-message-heading-to-body, 0); + margin-block-end: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); } .spectrum-IllustratedMessage-description { @@ -106,7 +119,32 @@ color: var(--mod-illustrated-message-description-color, var(--spectrum-illustrated-message-description-color)); - max-inline-size: var(--mod-illustrated-message-description-max-inline-size, var(--spectrum-illustrated-message-description-max-inline-size)); - margin-block-start: var(--mod-illustrated-message-heading-to-description, var(--spectrum-illustrated-message-heading-to-description)); - margin-block-end: 0; + margin-block: 0; +} + +.spectrum-IllustratedMessage--horizontal { + --mod-buttongroup-justify-content: flex-start; + max-inline-size: var(--mod-illustrated-message-horizontal-maximum-width, var(--spectrum-illustrated-message-horizontal-maximum-width)); + text-align: start; + gap: var(--spectrum-illustrated-message-illustration-to-content); + grid-template-areas: "illustration body"; + align-items: center; + + .spectrum-IllustratedMessage-illustration { + margin-block-end: 0; + } +} + +.spectrum-IllustratedMessage-actions { + margin-block-start: var(--mod-illustrated-message-description-to-action, var(--spectrum-illustrated-message-description-to-action)); +} + +.spectrum-IllustratedMessage-content { + grid-area: body; +} + +@media (forced-colors: active) { + .spectrum-IllustratedMessage { + --highcontrast-illustrated-message-illustration-color: CanvasText; + } } diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index 2b00b063d31..794accd74da 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,20 +1,38 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { html } from "lit"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; /** - * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. + * The Illustrated Message displays an illustration along with a heading, description and group of buttons. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. */ export default { title: "Illustrated message", component: "IllustratedMessage", argTypes: { - useAccentColor: { - name: "Illustration accent color", + title: { + name: "Title", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + description: { + name: "Description", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Content", + }, + control: "text", + }, + isHorizontal: { + name: "Horizontal orientation", + description: "The default content orientation is vertical. Add the horizontal class to horizontally align the illustration with the content. The illustration will align left or right determined by the global direction of the text.", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -22,26 +40,33 @@ export default { }, control: "boolean", }, - heading: { - name: "Heading", - type: { name: "string" }, + size: { + name: "Size", + type: { name: "string", required: true }, table: { type: { summary: "string" }, - category: "Content", + category: "Component", }, - control: "text", + options: ["s", "m", "l"], + control: "select", }, - description: { - name: "Description", + hasButtons: { + name: "Show button group", + type: { name: "boolean" }, table: { - category: "Content", - disable: true, + type: { summary: "boolean" }, + category: "Component", }, + control: "boolean", }, }, args: { rootClass: "spectrum-IllustratedMessage", - useAccentColor: false, + isHorizontal: false, + size: "m", + hasButtons: true, + title: "Error 404: Page not found", + description: "This page isn't available. Try checking the URL or visit a different page.", }, parameters: { design: { @@ -50,32 +75,22 @@ export default { }, packageJson, metadata, + layout: "centered" }, }; export const Default = IllustratedMessageGroup.bind({}); -Default.args = { - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], -}; +Default.args = {}; /** - * To use the accent color, the class `.spectrum-IllustratedMessage-accent` can be added to element(s) within the illustration SVG. - */ -export const AccentColor = Template.bind({}); -AccentColor.tags = ["!dev"]; -AccentColor.args = { - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, + * Horizontal illustrated messages are displayed on extra large screen sizes or in a menu. +*/ +export const Horizontal = Template.bind({}); +Horizontal.tags = ["!dev"]; +Horizontal.args = { + isHorizontal: true }; -AccentColor.parameters = { +Horizontal.parameters = { chromatic: { disableSnapshot: true }, }; @@ -88,3 +103,21 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; +/** + * Illustrated message comes in three sizes: small, medium, and large. + * - Small illustrated message is typically used in quick or in-line actions. + * - The medium size is the default, and often used in panels. + * - The large size illustrated message is generally used in full page layouts and dialogs. + */ +export const Sizing = (args, context) => Sizes({ + Template: Template, + withBorder: false, + withHeader: false, + ...args +}, context); + +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/illustratedmessage/stories/illustratedmessage.test.js b/components/illustratedmessage/stories/illustratedmessage.test.js index 2b7b85946a1..a6da8059521 100644 --- a/components/illustratedmessage/stories/illustratedmessage.test.js +++ b/components/illustratedmessage/stories/illustratedmessage.test.js @@ -1,25 +1,17 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Variants } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; import { Template } from "./template.js"; export const IllustratedMessageGroup = Variants({ Template, testData: [{ - heading: "Error 404: Page not found", - description: [ - "This page isn't available. Try checking the URL or visit a different page.", - ], - useAccentColor: false, - }, { - testHeading: "With accent color", - heading: "Drag and drop your file", - description: [ - () => { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - useAccentColor: true, - } + }, + { + testHeading: "Horizontal layout", + isHorizontal: true + }, + { + testHeading: "W/o button group", + hasButtons: false + }, ], }); diff --git a/components/illustratedmessage/stories/template.js b/components/illustratedmessage/stories/template.js index ace824ddae9..8ee5daa77b0 100644 --- a/components/illustratedmessage/stories/template.js +++ b/components/illustratedmessage/stories/template.js @@ -1,4 +1,4 @@ -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { Template as ButtonGroup } from "@spectrum-css/buttongroup/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; @@ -7,111 +7,76 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-IllustratedMessage", - heading, + title, description, customClasses = [], - useAccentColor = false, -} = {}, context = {}) => { + hasButtons = false, + isHorizontal = false, + size = "m", + customIllustration, +}) => { + const descriptionContent = Array.isArray(description) + ? description + : [() => html`${description}`]; return html` - <div - class=${classMap({ - [rootClass]: true, - ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), - })} - > - ${illustrationSvgMarkup(useAccentColor)} - ${when(heading, () => - Typography({ - semantics: "heading", - "size": "m", - customClasses: [`${rootClass}-heading`], - content: [heading], - }, context) + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--horizontal`]: isHorizontal, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m", + ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), + })} + > + ${customIllustration + ? customIllustration() + : illustrationSvgMarkup(size)} + <div class="${rootClass}-content"> + ${when( + title, + () => + html`<h2 class="${rootClass}-heading"> + ${title} + </h2>` )} - ${when(description, () => - Typography({ - semantics: "body", - "size": "s", - customClasses: [`${rootClass}-description`], - content: [ - ...description.map((c) => (typeof c === "function" ? c({}) : c)) - ], - }, context) + ${when( + descriptionContent, + () => + html`<p + class="${rootClass}-description" + > + ${descriptionContent.map((c) => + typeof c === "function" ? c({}) : c + )} + </p>` + )} + ${when(hasButtons, () => + ButtonGroup({ + size, + customClasses: ["spectrum-IllustratedMessage-actions"], + items: [ + { + variant: "secondary", + treatment: "outline", + label: "Remind me later", + }, + { + variant: "accent", + treatment: "fill", + label: "Rate now", + }, + ] + }) )} </div> - `; + </div> +`; }; -const illustrationSvgMarkup = (withAccentColorClass = false) => html` - <svg - class="spectrum-IllustratedMessage-illustration" - width="199" - height="98" - viewBox="0 0 199 97.7" - > - <defs> - <style> - .cls-1, - .cls-2 { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; - } - - .cls-1 { - stroke-width: 3px; - } - - .cls-2 { - stroke-width: 2px; - } - </style> - </defs> - <path - class="cls-1 ${withAccentColorClass - ? "spectrum-IllustratedMessage-accent" - : ""}" - d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" - /> - <line - class="cls-1 ${withAccentColorClass - ? "spectrum-IllustratedMessage-accent" - : ""}" - x1="99.5" - y1="95.5" - x2="99.5" - y2="58.5" - /> - <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" /> - <path - class="cls-1" - d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" - /> - <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" /> - <path - class="cls-2" - d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" - /> - <path - class="cls-2" - d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" - /> - <path - class="cls-2" - d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" - /> - <path - class="cls-1" - d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" - /> - <rect - class="cls-1" - x="1.5" - y="34.5" - width="58" - height="39" - rx="2" - ry="2" - /> - </svg> -`; +const illustrationSvgMarkup = (size = "m") => { + const computedSize = size === "l" ? 160 : 96; + return html` + <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width=${computedSize} height=${computedSize} viewBox="0 0 160 160" fill="none" preserveAspectRatio="xMinYMid slice"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M56.2825 50.793C61.8957 37.7312 74.5092 28.5 89.3299 28.5C108.539 28.5 124.014 43.962 125.409 63.2651C140.627 65.9995 152 79.7949 152 96.1349C152 114.396 137.783 129.5 119.883 129.5C119.853 129.5 119.825 129.5 119.8 129.499C119.775 129.5 119.751 129.5 119.726 129.5H31.8807C31.7163 129.5 31.5543 129.49 31.3951 129.471C18.254 129.016 8 117.815 8 104.385C8 94.2115 13.8616 85.3693 22.4022 81.4428C22.3022 80.4808 22.2483 79.4993 22.2483 78.4996C22.2483 62.9094 34.3921 49.9713 49.734 49.9713C51.9924 49.9713 54.1854 50.2579 56.2825 50.793ZM32.2594 121.5H119.543C119.611 121.497 119.679 121.496 119.747 121.496C119.774 121.496 119.799 121.496 119.821 121.497C119.848 121.497 119.87 121.498 119.889 121.498C119.904 121.499 119.919 121.499 119.931 121.5C133.067 121.473 144 110.292 144 96.1349C144 82.4618 133.788 71.5539 121.259 70.8142C119.114 70.6875 117.453 68.8895 117.495 66.7416C117.5 66.5158 117.504 66.4133 117.507 66.3391C117.51 66.2659 117.512 66.2201 117.512 66.1104C117.512 49.5915 104.732 36.5 89.3299 36.5C76.895 36.5 66.2004 45.0052 62.5117 57.0028C62.1777 58.0892 61.3973 58.9822 60.3655 59.4587C59.3337 59.9353 58.1478 59.9504 57.1042 59.5002C54.8242 58.5168 52.3404 57.9713 49.734 57.9713C39.1343 57.9713 30.2483 66.9966 30.2483 78.4996C30.2483 80.0856 30.4387 81.6435 30.7778 83.175C31.235 85.2398 30.0059 87.3038 27.9726 87.8855C21.1678 89.8321 16 96.3955 16 104.385C16 113.898 23.2726 121.333 31.9497 121.483C32.054 121.485 32.1573 121.49 32.2594 121.5ZM119.959 121.501L119.957 121.501C119.967 121.501 119.973 121.502 119.959 121.501Z" /> + </svg> + `; +}; From a4a8d7b1a19e7629615ffd63fb581f05a663a26f Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Tue, 4 Feb 2025 23:08:33 -0500 Subject: [PATCH 077/103] chore: fix a few minor duplicate properties --- .github/workflows/vrt.yml | 1 + components/actionbutton/dist/metadata.json | 3 +- components/actionbutton/index.css | 3 -- components/checkbox/index.css | 16 +++------ components/clearbutton/index.css | 36 ++++++++++++-------- components/modal/dist/metadata.json | 1 - components/modal/index.css | 2 -- components/pickerbutton/dist/metadata.json | 1 - components/pickerbutton/index.css | 11 ------ components/progresscircle/dist/metadata.json | 8 ++--- components/progresscircle/index.css | 3 -- components/radio/dist/metadata.json | 1 - components/radio/index.css | 23 ++++--------- components/tag/dist/metadata.json | 11 ------ components/tag/index.css | 36 ++++++-------------- components/textfield/dist/metadata.json | 6 ---- components/textfield/index.css | 26 ++++---------- 17 files changed, 55 insertions(+), 133 deletions(-) diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index a8944aeecd4..d90c0d89a3d 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - spectrum-two - "!changeset-release/**" - "!dependabot/**" workflow_dispatch: diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 59bf8543946..06487511be1 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -228,7 +228,6 @@ "--highcontrast-actionbutton-content-color-disabled", "--highcontrast-actionbutton-content-color-down", "--highcontrast-actionbutton-content-color-focus", - "--highcontrast-actionbutton-content-color-hover", - "--highcontrast-actionbutton-focus-indicator-color" + "--highcontrast-actionbutton-content-color-hover" ] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index f3c1b270ee0..bcf9af21804 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -425,9 +425,6 @@ a.spectrum-ActionButton { @media (forced-colors: active) { .spectrum-ActionButton { - /* force a more visible focus indicator color */ - --highcontrast-actionbutton-focus-indicator-color: ButtonText; - &::after { /* make sure focus indicator renders */ forced-color-adjust: none; diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 839e0f4a020..617dd677b95 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -17,13 +17,7 @@ */ .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - --spectrum-checkbox-control-corner-radius: 2px; + --spectrum-checkbox-checkmark-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-gray-50))); /* Color */ --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); @@ -201,7 +195,7 @@ .spectrum-Checkbox-input:checked { &:disabled + .spectrum-Checkbox-box::before { border-color: var(--highcontrast-checkbox-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + background-color: var(--spectrum-checkbox-checkmark-color); } &:disabled ~ .spectrum-Checkbox-label { @@ -422,7 +416,7 @@ &:checked + .spectrum-Checkbox-box { &::before { border-color: var(--highcontrast-checkbox-highlight-color-default, var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))); - background-color: var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color)); + background-color: var(--spectrum-checkbox-checkmark-color); border-width: var(--mod-checkbox-selected-border-width, var(--spectrum-checkbox-selected-border-width)); } @@ -520,7 +514,7 @@ .spectrum-Checkbox { .spectrum-Checkbox-checkmark, .spectrum-Checkbox-partialCheckmark { - color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + color: var(--spectrum-checkbox-checkmark-color); opacity: 0; transform: scale(0); @@ -541,7 +535,7 @@ &::before { border-color: var(--highcontrast-checkbox-disabled-color-default, var(--mod-checkbox-control-color-disabled, var(--spectrum-checkbox-control-color-disabled))); - background-color: var(--highcontrast-checkbox-background-color-default, var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))); + background-color: var(--spectrum-checkbox-checkmark-color); } } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index 517093d7c3a..5ddfcb3060a 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -12,11 +12,6 @@ */ .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - --spectrum-clear-button-height: var(--spectrum-component-height-100); --spectrum-clear-button-width: var(--spectrum-component-height-100); --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); @@ -26,16 +21,16 @@ --spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down); --spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); - inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); - border-radius: 100%; - - background-color: var(--mod-clear-button-background-color, transparent); - margin: 0; - padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; - border: none; - color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); + &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + } &.spectrum-ClearButton--sizeS { --spectrum-clear-button-height: var(--spectrum-component-height-75); @@ -80,6 +75,19 @@ --mod-clear-button-icon-color-down: var(--spectrum-disabled-content-color); --mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent); } +} + +.spectrum-ClearButton { + block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height)); + inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width)); + border-radius: 100%; + + background-color: var(--mod-clear-button-background-color, transparent); + margin: 0; + padding: var(--mod-clear-button-padding, var(--spectrum-clear-button-padding)); + + border: none; + color: var(--mod-clear-button-icon-color, var(--spectrum-clear-button-icon-color)); &:not(:disabled) { cursor: pointer; diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 72cd495068b..43de95295b1 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -43,7 +43,6 @@ "--spectrum-animation-duration-500", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-background-layer-2-color", "--spectrum-corner-radius-extra-large-default", "--spectrum-dialog-confirm-entry-animation-distance", "--spectrum-gray-75", diff --git a/components/modal/index.css b/components/modal/index.css index 6bd085fd812..2829b930d18 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -12,8 +12,6 @@ */ .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); --spectrum-modal-confirm-entry-animation-delay: var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200)); diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index c5d5a45af1d..c6186980d83 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -114,7 +114,6 @@ "--spectrum-component-height-75", "--spectrum-corner-radius-100", "--spectrum-corner-radius-200", - "--spectrum-corner-radius-75", "--spectrum-default-font-style", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index e9f41ae796b..65e1f840c19 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -12,17 +12,6 @@ */ .spectrum-PickerButton { - --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: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ --spectrum-picker-button-padding: 4px; diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 9de4f4257b2..a252d2638db 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -21,7 +21,6 @@ ], "component": [ "--spectrum-progress-circle-fill-border-color", - "--spectrum-progress-circle-fill-border-color-over-background", "--spectrum-progress-circle-size", "--spectrum-progress-circle-size-large", "--spectrum-progress-circle-size-medium", @@ -30,8 +29,7 @@ "--spectrum-progress-circle-thickness-large", "--spectrum-progress-circle-thickness-medium", "--spectrum-progress-circle-thickness-small", - "--spectrum-progress-circle-track-border-color", - "--spectrum-progress-circle-track-border-color-over-background" + "--spectrum-progress-circle-track-border-color" ], "global": [ "--spectrum-accent-content-color-default", @@ -39,9 +37,7 @@ "--spectrum-static-black-track-indicator-color", "--spectrum-static-white-track-color", "--spectrum-static-white-track-indicator-color", - "--spectrum-track-color", - "--spectrum-transparent-white-1000", - "--spectrum-transparent-white-400" + "--spectrum-track-color" ], "passthroughs": [], "high-contrast": [ diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 573fb4917ac..d2adf1c18dd 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -16,9 +16,6 @@ governing permissions and limitations under the License. /* circle unfilled border color */ --spectrum-progress-circle-track-border-color: var(--spectrum-track-color); - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); - /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index a517304c965..fdeccc96e85 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -12,7 +12,6 @@ ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--sizeL", - ".spectrum-Radio--sizeM", ".spectrum-Radio--sizeS", ".spectrum-Radio--sizeXL", ".spectrum-Radio-button", diff --git a/components/radio/index.css b/components/radio/index.css index 04d37e076bc..36b03e7bdca 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -18,12 +18,6 @@ */ .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - --spectrum-radio-button-background-color: var(--spectrum-gray-50); /* state colors for all themes */ @@ -64,16 +58,6 @@ /* animation all themes */ --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - /* CJK language support all themes */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); - } -} - -.spectrum-Radio, -.spectrum-Radio--sizeM { --spectrum-radio-height: var(--spectrum-component-height-100); --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); @@ -83,6 +67,13 @@ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --spectrum-radio-font-size: var(--spectrum-font-size-100); + + /* CJK language support all themes */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); + } } .spectrum-Radio--sizeS { diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 20d2158b8a1..58ce63ea185 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -217,12 +217,6 @@ "--spectrum-border-width-100", "--spectrum-clearbutton-fill-background-color", "--spectrum-clearbutton-fill-size", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-75", "--spectrum-component-height-100", "--spectrum-component-height-200", "--spectrum-component-height-75", @@ -233,7 +227,6 @@ "--spectrum-component-top-to-workflow-icon-200", "--spectrum-component-top-to-workflow-icon-75", "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -263,10 +256,6 @@ "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", "--spectrum-neutral-subdued-content-color-default", "--spectrum-neutral-subdued-content-color-down", "--spectrum-neutral-subdued-content-color-hover", diff --git a/components/tag/index.css b/components/tag/index.css index c685d7611c0..285a9cabeea 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -12,52 +12,36 @@ */ .spectrum-Tag { + /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ + --spectrum-avatar-opacity-disabled: 0.3; + + --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-tag-border-width: var(--spectrum-border-width-100); + + /* background color */ --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); + /* border radius */ --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + /* border color */ --spectrum-tag-border-color: var(--spectrum-gray-700); --spectrum-tag-border-color-hover: var(--spectrum-gray-800); --spectrum-tag-border-color-active: var(--spectrum-gray-900); --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + /* content color */ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - /* disabled variant */ - --spectrum-tag-border-color-disabled: transparent; - --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - - /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ - --spectrum-avatar-opacity-disabled: 0.3; - - --spectrum-tag-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-tag-border-width: var(--spectrum-border-width-100); - /* focus ring */ --spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap); diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index ea7001c7db6..b6201b6cf42 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -86,7 +86,6 @@ ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input", ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" @@ -227,7 +226,6 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-border-width-100", "--spectrum-character-count-to-field-quiet-extra-large", "--spectrum-character-count-to-field-quiet-large", "--spectrum-character-count-to-field-quiet-medium", @@ -291,10 +289,6 @@ "--spectrum-font-size-75", "--spectrum-gray-25", "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", "--spectrum-help-text-to-component", "--spectrum-negative-border-color-default", "--spectrum-negative-border-color-focus", diff --git a/components/textfield/index.css b/components/textfield/index.css index 99b618abb08..739c6a645f8 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -12,21 +12,9 @@ */ .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-25); - --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); - - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } + --spectrum-textfield-background-color: var(--mod-textfield-background-color, var(--spectrum-gray-25)); + --spectrum-textfield-background-color-disabled: var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)); + --spectrum-textfield-border-color-disabled: var(--mod-textfield-border-color-disabled, var(--spectrum-gray-300)); /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ /* disallow mod for max compatibility */ @@ -332,7 +320,7 @@ vertical-align: top; /* used to align them correctly in forms. */ outline: none; - background-color: var(--mod-textfield-background-color, var(--spectrum-textfield-background-color)); + background-color: var(--spectrum-textfield-background-color); border-width: var(--mod-textfield-border-width, var(--spectrum-textfield-border-width)); border-style: solid; border-color: var(--highcontrast-textfield-border-color, var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))); @@ -479,8 +467,8 @@ .spectrum-Textfield.is-disabled &, .spectrum-Textfield.is-disabled:hover &, &:disabled { - background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-textfield-background-color-disabled)); - border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled)); + background-color: var(--spectrum-textfield-background-color-disabled); + border-color: var(--spectrum-textfield-border-color-disabled); color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); /* Disable the resize functionality when disabled */ @@ -516,7 +504,7 @@ .spectrum-Textfield--quiet.is-disabled:hover &, &:disabled { background-color: transparent; - border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-textfield-border-color-disabled)); + border-color: var(--spectrum-textfield-border-color-disabled); color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))); &::placeholder { From 740d1f2c792700f53ae8c891db46363178f4ef93 Mon Sep 17 00:00:00 2001 From: castastrophe <castastrophe@users.noreply.github.com> Date: Tue, 4 Feb 2025 23:30:07 -0500 Subject: [PATCH 078/103] build: exit and reenter pretag to reset versions --- .changeset/big-chairs-care.md | 5 - .changeset/chilly-peaches-sniff.md | 2 +- .changeset/healthy-zebras-unite.md | 9 - .changeset/hip-spies-try.md | 9 - .changeset/light-years-speak.md | 2 +- .changeset/metal-fireants-switch.md | 2 +- .changeset/modern-chairs-sit.md | 2 +- .changeset/nine-kings-repair.md | 3 + .changeset/pre.json | 201 +++++++++++---------- .changeset/proud-jokes-rule.md | 2 +- .changeset/rotten-meals-share.md | 2 +- .changeset/serious-clouds-jam.md | 2 +- .changeset/sixty-crabs-thank.md | 8 - .changeset/sixty-vans-thank.md | 5 - .changeset/spotty-onions-study.md | 2 +- .changeset/strange-glasses-allow.md | 2 + .changeset/tame-bobcats-beam.md | 2 +- .changeset/twenty-tables-know.md | 2 +- .changeset/wicked-dragons-cheer.md | 17 -- .changeset/young-cheetahs-peel.md | 5 - components/coachmark/package.json | 8 +- components/dropindicator/package.json | 20 +- components/fieldlabel/package.json | 20 +- components/helptext/package.json | 20 +- components/illustratedmessage/package.json | 20 +- components/infieldbutton/package.json | 2 +- components/inlinealert/package.json | 4 +- components/logicbutton/package.json | 12 +- components/miller/package.json | 34 ++-- components/modal/package.json | 12 +- components/pickerbutton/package.json | 34 ++-- components/popover/package.json | 2 +- components/radio/package.json | 20 +- components/rating/package.json | 20 +- components/sidenav/package.json | 2 +- components/toast/package.json | 32 ++-- components/tray/package.json | 8 +- components/underlay/package.json | 12 +- yarn.lock | 53 +++--- 39 files changed, 287 insertions(+), 332 deletions(-) delete mode 100644 .changeset/big-chairs-care.md delete mode 100644 .changeset/healthy-zebras-unite.md delete mode 100644 .changeset/hip-spies-try.md delete mode 100644 .changeset/sixty-crabs-thank.md delete mode 100644 .changeset/sixty-vans-thank.md delete mode 100644 .changeset/wicked-dragons-cheer.md delete mode 100644 .changeset/young-cheetahs-peel.md diff --git a/.changeset/big-chairs-care.md b/.changeset/big-chairs-care.md deleted file mode 100644 index 9e647419cbc..00000000000 --- a/.changeset/big-chairs-care.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/picker": minor ---- - -Update background and border color for picker in Spectrum 2 theme [SWC-575] diff --git a/.changeset/chilly-peaches-sniff.md b/.changeset/chilly-peaches-sniff.md index 518391edc1c..e432e437d28 100644 --- a/.changeset/chilly-peaches-sniff.md +++ b/.changeset/chilly-peaches-sniff.md @@ -2,7 +2,7 @@ "@spectrum-css/statuslight": major --- -Spectrum 2 Status light migration +## Spectrum 2 migration New non-semantic colors were added to the variants list, while the `accent` semantic variant was removed. There were also some new and updated color and text-to-visual tokens used to match the designs, along with normalizing font family, font style, and font weight. diff --git a/.changeset/healthy-zebras-unite.md b/.changeset/healthy-zebras-unite.md deleted file mode 100644 index dc90d1b9b1e..00000000000 --- a/.changeset/healthy-zebras-unite.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -"@spectrum-css/colorwheel": patch -"@spectrum-css/assetcard": patch -"@spectrum-css/combobox": patch -"@spectrum-css/treeview": patch -"@spectrum-css/search": patch ---- - -Restores missing custom properties that were flagged by the linter. The missing properties were copied from the spectrum two theme files in the foundations branch. This clears up all linter errors and warnings for these components. diff --git a/.changeset/hip-spies-try.md b/.changeset/hip-spies-try.md deleted file mode 100644 index fe265b7d8b4..00000000000 --- a/.changeset/hip-spies-try.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -"@spectrum-css/datepicker": patch -"@spectrum-css/rating": patch -"@spectrum-css/sidenav": patch -"@spectrum-css/slider": patch -"@spectrum-css/switch": patch ---- - -Define undefined custom properties from themes directory. diff --git a/.changeset/light-years-speak.md b/.changeset/light-years-speak.md index d92990e0f59..908577e5562 100644 --- a/.changeset/light-years-speak.md +++ b/.changeset/light-years-speak.md @@ -2,7 +2,7 @@ "@spectrum-css/tooltip": major --- -feat(tooltip): Spectrum 2 migration +## Spectrum 2 migration This migration includes updated colors, rounding, a bigger tip, and the removal of variants (only neutral is available in Spectrum 2). As a result of the deprecation of variants, icons have also been removed. diff --git a/.changeset/metal-fireants-switch.md b/.changeset/metal-fireants-switch.md index 97acf890c52..ff03fe24d56 100644 --- a/.changeset/metal-fireants-switch.md +++ b/.changeset/metal-fireants-switch.md @@ -4,7 +4,7 @@ "@spectrum-css/underlay": patch --- -Spectrum 2 Standard Dialog Migration +## Spectrum 2 Standard Dialog Migration This is the migration for standard dialog. The Divider component is no longer supported in S2 dialogs. In addition, some new and updated tokens are in place to update dialog corner rounding, font treatments, spacing/padding, and maximum/minimum widths. There were several new elements implemented as well, including optional header and footer content, hero/cover images, checkbox and text-only options in the footer content area. diff --git a/.changeset/modern-chairs-sit.md b/.changeset/modern-chairs-sit.md index 61234653691..e7294a8b4b4 100644 --- a/.changeset/modern-chairs-sit.md +++ b/.changeset/modern-chairs-sit.md @@ -3,7 +3,7 @@ "@spectrum-css/modal": minor --- -S2 Takeover dialog +## S2 Takeover dialog This is the migration for the fullscreen/fullscreenTakeover dialog stories (these stories correspond to the "takeover dialog" in Figma). The Divider component support was removed in S2 standard dialog migration ([#2860](https://github.com/adobe/spectrum-css/pull/2860)). New and updated tokens are in place to update fullscreen/fullscreenTakeover dialog sizing, grid spacing, spacing in the header, and font sizes. Fullscreen/fullscreenTakeover dialogs do not support additional footer content or checkboxes (in comparison to the standard dialog). diff --git a/.changeset/nine-kings-repair.md b/.changeset/nine-kings-repair.md index 0714bbb8274..eee7910997a 100644 --- a/.changeset/nine-kings-repair.md +++ b/.changeset/nine-kings-repair.md @@ -3,12 +3,15 @@ --- #### 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` diff --git a/.changeset/pre.json b/.changeset/pre.json index 1e10d3b6036..9d8c525a639 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -3,124 +3,125 @@ "tag": "next", "initialVersions": { "@spectrum-tools/gh-action-file-diff": "2.1.0", - "@spectrum-css/preview": "11.0.0", - "@spectrum-css/accordion": "5.3.0", - "@spectrum-css/actionbar": "8.2.0", - "@spectrum-css/actionbutton": "6.2.0", - "@spectrum-css/actiongroup": "5.2.0", - "@spectrum-css/actionmenu": "6.2.0", - "@spectrum-css/alertbanner": "2.3.0", - "@spectrum-css/alertdialog": "2.2.0", - "@spectrum-css/asset": "5.2.0", - "@spectrum-css/assetcard": "4.2.0", - "@spectrum-css/assetlist": "6.4.0", - "@spectrum-css/avatar": "7.3.0", - "@spectrum-css/badge": "4.3.0", - "@spectrum-css/breadcrumb": "9.2.0", - "@spectrum-css/button": "13.5.0", - "@spectrum-css/buttongroup": "7.2.0", - "@spectrum-css/calendar": "5.3.0", - "@spectrum-css/card": "9.3.0", - "@spectrum-css/checkbox": "9.2.1", - "@spectrum-css/clearbutton": "6.4.0", - "@spectrum-css/closebutton": "5.3.0", - "@spectrum-css/coachindicator": "2.2.0", - "@spectrum-css/coachmark": "7.3.0", - "@spectrum-css/colorarea": "5.2.0", - "@spectrum-css/colorhandle": "8.2.0", - "@spectrum-css/colorloupe": "5.3.0", - "@spectrum-css/colorslider": "6.2.0", - "@spectrum-css/colorwheel": "4.2.0", - "@spectrum-css/combobox": "3.3.0", - "@spectrum-css/commons": "10.1.0", - "@spectrum-css/contextualhelp": "3.3.0", - "@spectrum-css/datepicker": "3.3.0", - "@spectrum-css/dial": "3.2.0", - "@spectrum-css/dialog": "10.2.0", - "@spectrum-css/divider": "3.2.0", - "@spectrum-css/dropindicator": "5.2.0", - "@spectrum-css/dropzone": "6.2.0", - "@spectrum-css/fieldgroup": "5.3.0", - "@spectrum-css/fieldlabel": "8.2.0", - "@spectrum-css/floatingactionbutton": "2.2.0", - "@spectrum-css/form": "0.0.0", - "@spectrum-css/helptext": "5.2.0", - "@spectrum-css/icon": "7.2.0", - "@spectrum-css/illustratedmessage": "7.2.0", - "@spectrum-css/infieldbutton": "5.2.0", - "@spectrum-css/inlinealert": "8.2.0", - "@spectrum-css/link": "5.2.0", - "@spectrum-css/logicbutton": "4.2.0", - "@spectrum-css/menu": "7.2.0", - "@spectrum-css/meter": "0.0.0", - "@spectrum-css/miller": "6.2.0", - "@spectrum-css/modal": "5.2.0", - "@spectrum-css/opacitycheckerboard": "2.2.0", - "@spectrum-css/page": "8.2.0", - "@spectrum-css/pagination": "8.2.0", - "@spectrum-css/picker": "8.3.0", - "@spectrum-css/pickerbutton": "5.2.0", - "@spectrum-css/popover": "7.2.0", - "@spectrum-css/progressbar": "4.2.0", - "@spectrum-css/progresscircle": "3.2.0", - "@spectrum-css/radio": "9.4.1", - "@spectrum-css/rating": "5.2.0", - "@spectrum-css/search": "7.4.0", - "@spectrum-css/sidenav": "5.2.0", - "@spectrum-css/slider": "5.5.1", - "@spectrum-css/splitview": "5.3.0", - "@spectrum-css/statuslight": "7.3.0", - "@spectrum-css/steplist": "5.2.0", - "@spectrum-css/stepper": "6.3.0", - "@spectrum-css/swatch": "6.4.1", - "@spectrum-css/swatchgroup": "3.2.0", - "@spectrum-css/switch": "5.2.0", - "@spectrum-css/table": "6.2.0", - "@spectrum-css/tabs": "5.2.0", - "@spectrum-css/tag": "9.2.0", - "@spectrum-css/taggroup": "5.2.0", - "@spectrum-css/textfield": "7.3.0", - "@spectrum-css/thumbnail": "6.3.0", - "@spectrum-css/toast": "10.3.0", - "@spectrum-css/tooltip": "6.2.0", - "@spectrum-css/tray": "3.2.0", - "@spectrum-css/treeview": "10.4.0", - "@spectrum-css/typography": "6.2.0", - "@spectrum-css/underlay": "4.2.0", - "@spectrum-css/well": "5.3.0", - "@spectrum-tools/postcss-add-theming-layer": "0.0.0", - "@spectrum-tools/postcss-property-rollup": "0.0.0", - "@spectrum-tools/postcss-rgb-mapping": "2.1.0", + "@spectrum-css/preview": "11.0.1-next.2", + "@spectrum-css/accordion": "7.0.1", + "@spectrum-css/actionbar": "10.0.1", + "@spectrum-css/actionbutton": "7.0.1", + "@spectrum-css/actiongroup": "6.0.1", + "@spectrum-css/actionmenu": "7.0.0", + "@spectrum-css/alertbanner": "3.0.1", + "@spectrum-css/alertdialog": "4.0.1", + "@spectrum-css/asset": "7.0.1", + "@spectrum-css/assetcard": "5.0.1", + "@spectrum-css/assetlist": "8.0.1", + "@spectrum-css/avatar": "9.0.1", + "@spectrum-css/badge": "6.0.1", + "@spectrum-css/breadcrumb": "11.0.1", + "@spectrum-css/button": "14.0.1", + "@spectrum-css/buttongroup": "9.0.1", + "@spectrum-css/calendar": "7.0.1", + "@spectrum-css/card": "11.0.1", + "@spectrum-css/checkbox": "10.0.1", + "@spectrum-css/clearbutton": "7.0.1", + "@spectrum-css/closebutton": "6.0.1", + "@spectrum-css/coachindicator": "4.0.1", + "@spectrum-css/coachmark": "9.0.1", + "@spectrum-css/colorarea": "7.0.1", + "@spectrum-css/colorhandle": "10.0.1", + "@spectrum-css/colorloupe": "7.0.1", + "@spectrum-css/colorslider": "8.0.1", + "@spectrum-css/colorwheel": "6.0.1", + "@spectrum-css/combobox": "4.0.1", + "@spectrum-css/commons": "11.0.0", + "@spectrum-css/contextualhelp": "5.0.1", + "@spectrum-css/datepicker": "4.0.1", + "@spectrum-css/dial": "5.0.1", + "@spectrum-css/dialog": "12.0.1", + "@spectrum-css/divider": "5.0.1", + "@spectrum-css/dropindicator": "7.0.1", + "@spectrum-css/dropzone": "8.0.1", + "@spectrum-css/fieldgroup": "7.0.1", + "@spectrum-css/fieldlabel": "10.0.1", + "@spectrum-css/floatingactionbutton": "4.0.1", + "@spectrum-css/form": "1.0.1", + "@spectrum-css/helptext": "7.0.1", + "@spectrum-css/icon": "9.0.1", + "@spectrum-css/illustratedmessage": "9.0.1", + "@spectrum-css/infieldbutton": "6.0.1", + "@spectrum-css/inlinealert": "10.0.1", + "@spectrum-css/link": "7.0.1", + "@spectrum-css/logicbutton": "6.0.1", + "@spectrum-css/menu": "9.0.1", + "@spectrum-css/meter": "1.0.1", + "@spectrum-css/miller": "8.0.1", + "@spectrum-css/modal": "7.0.1", + "@spectrum-css/opacitycheckerboard": "4.0.1", + "@spectrum-css/page": "9.0.1", + "@spectrum-css/pagination": "10.0.1", + "@spectrum-css/picker": "9.0.1", + "@spectrum-css/pickerbutton": "6.0.1", + "@spectrum-css/popover": "8.0.1", + "@spectrum-css/progressbar": "6.0.1", + "@spectrum-css/progresscircle": "5.0.1", + "@spectrum-css/radio": "10.0.1", + "@spectrum-css/rating": "6.0.1", + "@spectrum-css/search": "8.0.1", + "@spectrum-css/sidenav": "7.0.1", + "@spectrum-css/slider": "6.0.1", + "@spectrum-css/splitview": "7.0.1", + "@spectrum-css/statuslight": "9.0.1", + "@spectrum-css/steplist": "7.0.1", + "@spectrum-css/stepper": "7.0.1", + "@spectrum-css/swatch": "8.0.1", + "@spectrum-css/swatchgroup": "5.0.1", + "@spectrum-css/switch": "6.0.1", + "@spectrum-css/table": "8.0.1", + "@spectrum-css/tabs": "6.0.1", + "@spectrum-css/tag": "10.0.1", + "@spectrum-css/taggroup": "7.0.1", + "@spectrum-css/textfield": "8.0.1", + "@spectrum-css/thumbnail": "8.0.1", + "@spectrum-css/toast": "11.0.1", + "@spectrum-css/tooltip": "7.0.1", + "@spectrum-css/tray": "5.0.1", + "@spectrum-css/treeview": "12.0.1", + "@spectrum-css/typography": "8.0.1", + "@spectrum-css/underlay": "6.0.1", + "@spectrum-css/well": "7.0.1", + "@spectrum-tools/postcss-rgb-mapping": "1.0.0", "@spectrum-tools/stylelint-no-missing-var": "2.0.1", - "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.1", - "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.2", - "@spectrum-tools/theme-alignment": "1.1.0", - "@spectrum-css/tokens": "15.0.0", + "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2", + "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.3", + "@spectrum-css/tokens": "16.0.0", "@spectrum-css/bundle": "1.0.0", "@spectrum-css/generator": "4.1.0", "@spectrum-css/ui-icons": "1.1.2" }, "changesets": [ - "big-chairs-care", + "beige-dragons-tickle", "chilly-peaches-sniff", "few-doors-smile", + "few-eels-retire", + "fresh-crabs-deliver", "fresh-seahorses-join", "friendly-dolls-raise", - "healthy-zebras-unite", - "hip-spies-try", "hot-books-fail", + "itchy-kids-travel", + "itchy-shrimps-help", "light-years-speak", "mean-eggs-learn", "metal-fireants-switch", + "modern-chairs-sit", "nine-kings-repair", + "pretty-parents-drum", "proud-jokes-rule", - "sixty-crabs-thank", - "sixty-vans-thank", + "rotten-meals-share", + "serious-clouds-jam", "spotty-onions-study", "strange-glasses-allow", "tame-bobcats-beam", - "twenty-tables-know", - "wicked-dragons-cheer", - "young-cheetahs-peel" + "tame-wasps-shake", + "twenty-ravens-divide", + "twenty-tables-know" ] } diff --git a/.changeset/proud-jokes-rule.md b/.changeset/proud-jokes-rule.md index 15c300f61ef..23bfe575805 100644 --- a/.changeset/proud-jokes-rule.md +++ b/.changeset/proud-jokes-rule.md @@ -2,6 +2,6 @@ "@spectrum-css/progressbar": major --- -feat(progressbar): S2 migration +## S2 migration Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same). diff --git a/.changeset/rotten-meals-share.md b/.changeset/rotten-meals-share.md index 4c0b89a0c5a..f61652384af 100644 --- a/.changeset/rotten-meals-share.md +++ b/.changeset/rotten-meals-share.md @@ -2,7 +2,7 @@ "@spectrum-css/popover": major --- -S2 Popover Migration +## S2 Popover Migration The S2 popover using new tokens for border color, padding, corner radius and elevation/drop shadows. diff --git a/.changeset/serious-clouds-jam.md b/.changeset/serious-clouds-jam.md index ca1191d6846..1c68dc92f32 100644 --- a/.changeset/serious-clouds-jam.md +++ b/.changeset/serious-clouds-jam.md @@ -2,7 +2,7 @@ "@spectrum-css/colorslider": minor --- -# S2 colorslider migration +## S2 colorslider migration This migrates the `colorslider` component to S2. Custom properties have been remapped per the design spec. diff --git a/.changeset/sixty-crabs-thank.md b/.changeset/sixty-crabs-thank.md deleted file mode 100644 index 5d53813dc55..00000000000 --- a/.changeset/sixty-crabs-thank.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -"@spectrum-css/actionbutton": patch -"@spectrum-css/avatar": patch -"@spectrum-css/button": patch -"@spectrum-css/dialog": patch ---- - -Define undefined properties from theme directory. diff --git a/.changeset/sixty-vans-thank.md b/.changeset/sixty-vans-thank.md deleted file mode 100644 index 1a3af0f2e8f..00000000000 --- a/.changeset/sixty-vans-thank.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/combobox": minor ---- - -Update border and background color values for Combobox states [SWC-582] diff --git a/.changeset/spotty-onions-study.md b/.changeset/spotty-onions-study.md index acad27e0006..40bed0dd1dd 100644 --- a/.changeset/spotty-onions-study.md +++ b/.changeset/spotty-onions-study.md @@ -2,6 +2,6 @@ "@spectrum-css/colorarea": major --- -# colorarea S2 migration +# S2 migration This change migrates the `colorarea` component to S2. It leverages updated tokens and the `rgba(...)` color function, replacing the existing `TODO` and hardcoded values. diff --git a/.changeset/strange-glasses-allow.md b/.changeset/strange-glasses-allow.md index e9bb9303c9c..941d18b4417 100644 --- a/.changeset/strange-glasses-allow.md +++ b/.changeset/strange-glasses-allow.md @@ -2,4 +2,6 @@ "@spectrum-css/colorloupe": major --- +## Spectrum 2 migration + Migrates color loupe to Spectrum 2 tokens. Color loupe now uses the new drop shadow tokens `--spectrum-drop-shadow-elevated-x`, `--spectrum-drop-shadow-elevated-y`, `--spectrum-drop-shadow-elevated-blur`, and `--spectrum-drop-shadow-elevated-color` rather than specific color loupe tokens. diff --git a/.changeset/tame-bobcats-beam.md b/.changeset/tame-bobcats-beam.md index a45cb615339..aec1388e32f 100644 --- a/.changeset/tame-bobcats-beam.md +++ b/.changeset/tame-bobcats-beam.md @@ -2,7 +2,7 @@ "@spectrum-css/alertbanner": major --- -#### Spectrum 2 migration +## Spectrum 2 migration Alert banner now uses Spectrum 2 tokens and specifications. In this new design, the divider has been removed. diff --git a/.changeset/twenty-tables-know.md b/.changeset/twenty-tables-know.md index 584bf66b2da..9f18ef93a5f 100644 --- a/.changeset/twenty-tables-know.md +++ b/.changeset/twenty-tables-know.md @@ -3,7 +3,7 @@ "@spectrum-css/thumbnail": minor --- -# thumbnail-opacity-checkerboard S2 migration +# S2 migration Adds thumbnail specific `thumbnail-opacity-checkerboard-square-size` token aliased to `--spectrum-opacity-checkerboard-size`. This impacts the display of the `opacity-checkerboard` when used within the `thumbnail` component. diff --git a/.changeset/wicked-dragons-cheer.md b/.changeset/wicked-dragons-cheer.md deleted file mode 100644 index db2204d0232..00000000000 --- a/.changeset/wicked-dragons-cheer.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -"@spectrum-css/pickerbutton": patch -"@spectrum-css/progressbar": patch -"@spectrum-css/calendar": patch -"@spectrum-css/stepper": patch -"@spectrum-css/radio": patch -"@spectrum-css/dial": patch ---- - -Fixes to align `spectrum-two` with `s2-foundations-redux`/`main`, mostly defining unused custom properties, but addresses any other lint warnings or inconsistencies noted in the following components: - -**Calendar**: Defines 1 previously undefined custom property to align with `main` and `s2-foundations-redux` -**Dial**: Defines 6 previously undefined custom properties, removes 3 unused custom properties -**Pickerbutton**: Defines 9 previously undefined custom properties to align with `main` and `s2-foundations-redux` -**Progressbar**: Removes 3 unused custom properties, reverts background-color to background to accommodate gradients -**Radio**: Defines 4 previously undefined custom properties to align with `main` and `s2-foundations-redux` -**Stepper**: moves high contrast block further down to align with other components' CSS structure, defines multiple undefined custom properties, adds disable-next-line comment to suppress no-unused-custom-properties warning diff --git a/.changeset/young-cheetahs-peel.md b/.changeset/young-cheetahs-peel.md deleted file mode 100644 index 81a0d59185b..00000000000 --- a/.changeset/young-cheetahs-peel.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@spectrum-css/combobox": patch ---- - -Bug fix to retain border color values in S1 for combobox [SWC-582] diff --git a/components/coachmark/package.json b/components/coachmark/package.json index b415b821296..96bed986f27 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7", + "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14", - "@spectrum-css/buttongroup": ">=9", + "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8", + "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index 1be203a11bf..f55b41f1c3e 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" @@ -48,13 +56,5 @@ { "rootClass": "spectrum-DropIndicator" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index 6b0e50d0af5..cbd75939f46 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" @@ -50,13 +58,5 @@ "rootClass": "spectrum-FieldLabel", "swc": "https://opensource.adobe.com/spectrum-web-components/components/field-label/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/helptext/package.json b/components/helptext/package.json index 4ef2a9f9ac4..6634f970948 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" @@ -50,13 +58,5 @@ "rootClass": "spectrum-HelpText", "swc": "https://opensource.adobe.com/spectrum-web-components/components/help-text/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 9864839f069..a73e3ef51c2 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -26,7 +26,15 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/typography": ">=8" + "@spectrum-css/typography": ">=8.0.0 <9.0.0" + }, + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + }, + "@spectrum-css/typography": { + "optional": true + } }, "devDependencies": { "@spectrum-css/tokens": "16.0.1", @@ -50,13 +58,5 @@ "rootClass": "spectrum-IllustratedMessage", "swc": "https://opensource.adobe.com/spectrum-web-components/components/illustrated-message/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - }, - "@spectrum-css/typography": { - "optional": true - } - } + ] } diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 858dd2f2e9b..5a8d00cc3f6 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index fe9e3467c01..d9d78203521 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14", - "@spectrum-css/icon": ">=9", + "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 16375af1ba8..74fccd39c5d 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -27,6 +27,11 @@ "peerDependencies": { "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" @@ -48,10 +53,5 @@ "guidelines": "https://spectrum-contributions.corp.adobe.com/page/logic-button-beta", "rootClass": "spectrum-LogicButton" } - ], - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/miller/package.json b/components/miller/package.json index 4f232cc2d20..efd37891624 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -26,10 +26,24 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", - "@spectrum-css/checkbox": ">=10", - "@spectrum-css/icon": ">=9", + "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/assetlist": { + "optional": true + }, + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/assetlist": "8.1.0", "@spectrum-css/checkbox": "10.1.0", @@ -53,19 +67,5 @@ "guidelines": "https://spectrum-contributions.corp.adobe.com/page/miller-columns-beta", "rootClass": "spectrum-MillerColumns" } - ], - "peerDependenciesMeta": { - "@spectrum-css/assetlist": { - "optional": true - }, - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/modal/package.json b/components/modal/package.json index 3733ac63812..3808a7b2625 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -27,6 +27,11 @@ "peerDependencies": { "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/tokens": "16.0.1" }, @@ -46,10 +51,5 @@ { "rootClass": "spectrum-Modal" } - ], - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 55b7082f9e3..06dcb4fc068 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -25,11 +25,25 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8", + "@spectrum-css/popover": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/menu": { + "optional": true + }, + "@spectrum-css/popover": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/menu": "9.1.0", @@ -53,19 +67,5 @@ "rootClass": "spectrum-PickerButton", "swc": "https://opensource.adobe.com/spectrum-web-components/components/picker-button/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/menu": { - "optional": true - }, - "@spectrum-css/popover": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/popover/package.json b/components/popover/package.json index 83b29d43f32..78062944942 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0", "@spectrum-css/dialog": ">=12.0.0 <13.0.0", - "@spectrum-css/divider": ">=5", + "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/menu": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, diff --git a/components/radio/package.json b/components/radio/package.json index 997f6af160a..6d4b76d3802 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" @@ -50,13 +58,5 @@ "rootClass": "spectrum-Radio", "swc": "https://opensource.adobe.com/spectrum-web-components/components/radio/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/rating/package.json b/components/rating/package.json index c1912e491fe..f0cce6f4f1c 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -25,9 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/icon": "9.1.0", "@spectrum-css/tokens": "16.0.1" @@ -49,13 +57,5 @@ "guidelines": "https://spectrum.adobe.com/page/rating", "rootClass": "spectrum-Rating" } - ], - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 9bb072c0000..f27098c5ce4 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/toast/package.json b/components/toast/package.json index c5bb6dea087..94a06565d64 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -25,10 +25,25 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14", - "@spectrum-css/icon": ">=9", + "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + }, + "@spectrum-css/closebutton": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/button": "14.1.1", "@spectrum-css/closebutton": "6.1.0", @@ -53,16 +68,5 @@ "rootClass": "spectrum-Toast", "swc": "https://opensource.adobe.com/spectrum-web-components/components/toast/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/button": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/components/tray/package.json b/components/tray/package.json index d5c0b6360cf..5bcf38044f1 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14", + "@spectrum-css/button": ">=14.0.0 <15.0.0", "@spectrum-css/dialog": ">=12.0.0 <13.0.0", - "@spectrum-css/divider": ">=5", - "@spectrum-css/icon": ">=9", - "@spectrum-css/modal": ">=7", + "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { diff --git a/components/underlay/package.json b/components/underlay/package.json index b36dd0a3959..7b6c78a236b 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -27,6 +27,11 @@ "peerDependencies": { "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + }, "devDependencies": { "@spectrum-css/commons": "11.0.0", "@spectrum-css/tokens": "16.0.1" @@ -48,10 +53,5 @@ "rootClass": "spectrum-Underlay", "swc": "https://opensource.adobe.com/spectrum-web-components/components/underlay/" } - ], - "peerDependenciesMeta": { - "@spectrum-css/tokens": { - "optional": true - } - } + ] } diff --git a/yarn.lock b/yarn.lock index 171d1864625..a6a39fe5fa2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4257,12 +4257,12 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7" + "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" - "@spectrum-css/button": ">=14" - "@spectrum-css/buttongroup": ">=9" + "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8" + "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4571,7 +4571,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4638,7 +4638,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4692,7 +4692,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4723,7 +4723,7 @@ __metadata: "@spectrum-css/typography": "npm:8.1.0" peerDependencies: "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - "@spectrum-css/typography": ">=8" + "@spectrum-css/typography": ">=8.0.0 <9.0.0" peerDependenciesMeta: "@spectrum-css/tokens": optional: true @@ -4739,7 +4739,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4757,8 +4757,8 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14" - "@spectrum-css/icon": ">=9" + "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": @@ -4857,8 +4857,8 @@ __metadata: "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" - "@spectrum-css/checkbox": ">=10" - "@spectrum-css/icon": ">=9" + "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/assetlist": @@ -4983,9 +4983,9 @@ __metadata: "@spectrum-css/popover": "npm:8.2.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8" + "@spectrum-css/popover": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5012,7 +5012,7 @@ __metadata: peerDependencies: "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" - "@spectrum-css/divider": ">=5" + "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/menu": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5109,7 +5109,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5126,7 +5126,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5168,7 +5168,7 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5457,12 +5457,15 @@ __metadata: "@spectrum-css/icon": "npm:9.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14" - "@spectrum-css/icon": ">=9" + "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": optional: true + "@spectrum-css/closebutton": + optional: true "@spectrum-css/icon": optional: true "@spectrum-css/tokens": @@ -5514,11 +5517,11 @@ __metadata: "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14" + "@spectrum-css/button": ">=14.0.0 <15.0.0" "@spectrum-css/dialog": ">=12.0.0 <13.0.0" - "@spectrum-css/divider": ">=5" - "@spectrum-css/icon": ">=9" - "@spectrum-css/modal": ">=7" + "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": From 03175e92abab182f10a2ff32050af943645374d3 Mon Sep 17 00:00:00 2001 From: aramos-adobe <abdulr@adobe.com> Date: Thu, 6 Feb 2025 15:27:46 -0500 Subject: [PATCH 079/103] feat(infield-progress-cirlce): new component, sharing tokens from progress circle (#3430) * feat(infieldprogress): add new component feat(infieldcircle): new component feat(ifpc): updating template and vrts chore(ifpc): updating story changes chore(ifpc): cleaning up build files feat(ifpc): add infield loader to components feat(infieldprogress): add new component feat(ifpc): updating template and vrts feat(ifpc): updating package, story, template chore(ifpc): spectrum two updates chore(ifpc): adding dist files chore(ifpc): changing button id chore(ifpc): updating bundle chore(ifpc): updating package chore(ifpc): testing out files chore(ifpc): adding missing dist files chore(ifpc): removing index css in dist fix(ifpc): fixing typos fix(ifpc): update mods in changeset chore(ifpc): removing mods from ifpc components in changeset * chore(ifpc): update package json) --- .changeset/flat-snails-admire.md | 7 + .github/QUICK-START.md | 2 +- .storybook/blocks/utilities.js | 4 +- README.md | 44 +------ components/button/stories/template.js | 17 +-- components/combobox/stories/template.js | 2 +- components/infieldprogresscircle/README.md | 7 + .../infieldprogresscircle/dist/metadata.json | 25 ++++ components/infieldprogresscircle/index.css | 37 ++++++ components/infieldprogresscircle/package.json | 57 +++++++++ components/infieldprogresscircle/project.json | 17 +++ .../stories/infieldprogresscircle.stories.js | 121 ++++++++++++++++++ .../stories/infieldprogresscircle.test.js | 25 ++++ .../infieldprogresscircle/stories/template.js | 21 +++ components/picker/stories/template.js | 6 +- .../stories/progresscircle.stories.js | 9 +- components/textfield/stories/template.js | 12 +- tasks/clean-up-after-migration.sh | 5 - tokens/README.md | 2 +- tools/bundle/package.json | 1 + tools/bundle/src/index.css | 1 + yarn.lock | 14 ++ 22 files changed, 362 insertions(+), 74 deletions(-) create mode 100644 .changeset/flat-snails-admire.md create mode 100644 components/infieldprogresscircle/README.md create mode 100644 components/infieldprogresscircle/dist/metadata.json create mode 100644 components/infieldprogresscircle/index.css create mode 100644 components/infieldprogresscircle/package.json create mode 100644 components/infieldprogresscircle/project.json create mode 100644 components/infieldprogresscircle/stories/infieldprogresscircle.stories.js create mode 100644 components/infieldprogresscircle/stories/infieldprogresscircle.test.js create mode 100644 components/infieldprogresscircle/stories/template.js diff --git a/.changeset/flat-snails-admire.md b/.changeset/flat-snails-admire.md new file mode 100644 index 00000000000..fa25475ac25 --- /dev/null +++ b/.changeset/flat-snails-admire.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/infieldprogresscircle": major +--- + +## Infield Progresscircle S2 Migration + +In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness. diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 3e4f04d6c4d..4b97fcab7e8 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -16,7 +16,7 @@ Spectrum CSS components utilize custom properties in order to change themes and <html class="spectrum spectrum--medium spectrum--light"></html> ``` -Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag: +Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `<head>` tag: ```html <head> diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index 204cb83a2e6..220a2acdd27 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -1,4 +1,3 @@ -import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json"; import spectrum from "@spectrum-css/tokens/dist/json/tokens.json"; import { useTheme } from "@storybook/theming"; @@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - const tokens = context === "spectrum" ? spectrum : legacy; - return { color, scale, context, platform, tokens }; + return { color, scale, context, platform, tokens: spectrum }; } /** diff --git a/README.md b/README.md index e73a4a96e6f..dab6d831ec3 100644 --- a/README.md +++ b/README.md @@ -52,17 +52,6 @@ Spectrum CSS components have build output that is designed to be used in a varie - `index.css` - _Preferred and most commonly used to incorporate Spectrum CSS into a project_. This file includes the component's styles and variable definitions. In this version, token-driven CSS properties<sup>[1](#token-footnote)</sup> are mapped to empty `--mod` prefixed variables (for customization) with a fallback to variables prefixed with `--spectrum` (sourced from the design tokens). - - This file loads the `.spectrum`, `.spectrum--legacy`, and `.spectrum--express` contexts which are used to toggle components between different [visual styles](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language). The `.spectrum` context is the default. - -- `index-base.css`: This file mimics the `index.css` output, but does not include the `.spectrum` or `.spectrum--express` contexts. - - - If your product only requires the `.spectrum` context, you can use `index-base.css` plus `themes/spectrum-two.css` from the `themes` directory to render the default Spectrum visual language. - - The `.spectrum--legacy` context represents the previous version of Spectrum (also known as Spectrum 1). This means if you only want to use the legacy context, you should load `themes/spectrum.css`. **deprecated** - - The `.spectrum--express` context represents the subtheme of Spectrum 1 called Express . This means if you only want to use the Express context, you should load `themes/express.css`. **deprecated** - - This approach can also be used when you have defined and written your own visual language and only need the base component styles from Spectrum CSS. To wire up your own visual language, you would need to define your own custom properties that match those defined in the `themes/spectrum-two.css` assets. - -- `index-theme.css`: This file provides only the visual language for a component. It is used in conjunction with `index-base.css` and when loaded together, provides the same result as using `index.css` by itself. - <sup><a name="token-footnote">1</a></sup>: Token-driven CSS properties are properties whose values are mapped to a value in the `@spectrum-css/tokens` package. These values represent design-language and are meant to be used across platforms. In contrast, properties specific to web-based implementations will not have a token value assigned, so not all CSS properties will use custom properties. #### Including assets @@ -73,29 +62,10 @@ Start by including the base set of variables: /* Include tokens */ @import "node_modules/@spectrum-css/tokens/dist/index.css"; -/* - For components with no other contexts available, load the - index.css file from the component's package. These are components - that do not have a spectrum or express context available. -*/ @import "node_modules/@spectrum-css/page/dist/index.css"; @import "node_modules/@spectrum-css/typography/dist/index.css"; @import "node_modules/@spectrum-css/icon/dist/index.css"; - -/* - Recommended: For components with multiple contexts available, if you - want access to all contexts, load the index.css file, which includes - all contexts and component variables. -*/ @import "node_modules/@spectrum-css/button/dist/index.css"; - -/* - If you only need the spectrum visual context: For components with - multiple contexts available, load only the spectrum context by sourcing - index-base.css and the spectrum theme from the themes directory. -*/ -@import "node_modules/@spectrum-css/button/dist/index-base.css"; -@import "node_modules/@spectrum-css/button/dist/themes/spectrum.css"; ``` Tokens values are mapped to context-specific classes which can be applied to the `<html>` element or any place in your DOM where you wish to encapsulate or alter the visual language of your Spectrum components. @@ -106,9 +76,7 @@ All contexts you want to use must be defined in order to load all the appropriat ##### Visual language -- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 foundations visual language. -- `.spectrum--legacy` - The legacy Spectrum 1 visual language. _This visual language will be deprecated in Spectrum 2_. -- `.spectrum--express` - A variant of the standard visual language. _This visual language will be deprecated in Spectrum 2_. +- `.spectrum` - The default visual language for Spectrum CSS; represents the Spectrum 2 visual language. ##### Scales @@ -134,16 +102,6 @@ Put together, we would define the context for our application in the following w <html class="spectrum spectrum--medium spectrum--light"></html> ``` -To switch to Express, **add** the `.spectrum--express` class to the `<html>` element: - -```html -<html - class="spectrum spectrum--medium spectrum--light spectrum--express" -></html> -``` - -Note the `spectrum--legacy` or `spectrum--express` class is added to the existing classes; `spectrum` should always be present to ensure the correct visual language is loaded. - Because CSS custom properties honor the cascading nature of CSS, you can infinitely nest different contexts. For example, you could have a `.spectrum--dark` context inside of a `.spectrum--light` context, and components will honor the innermost context. ### Modifying components diff --git a/components/button/stories/template.js b/components/button/stories/template.js index cecada6f7a9..1fa73697743 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -1,6 +1,6 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -89,15 +89,12 @@ export const Template = ({ Icon({ iconName, setName: iconSet, size }, context) )} ${when(isPending, () => - ProgressCircle( - { - size: "s", - testId: "progress-circle", - staticColor, - isIndeterminate: true, - }, - context - ) + InfieldProgressCircle({ + size: size, + staticColor, + isIndeterminate: true, + testId: "infield-progress-circle" + }, context) )} </button> `; diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index 96dfdcf25ee..f8cc0dbc1b1 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -63,7 +63,7 @@ const Combobox = ({ ], customInputClasses: [`${rootClass}-input`], isLoading, - customProgressCircleClasses: ["spectrum-Combobox-progress-circle"], + customInfieldProgressCircleClasses: ["spectrum-Combobox-progress-circle"], name: "field", isReadOnly, value, diff --git a/components/infieldprogresscircle/README.md b/components/infieldprogresscircle/README.md new file mode 100644 index 00000000000..4d411cc9502 --- /dev/null +++ b/components/infieldprogresscircle/README.md @@ -0,0 +1,7 @@ +# @spectrum-css/infieldprogresscircle + +> The Spectrum CSS infield progress circle component + +This package is part of the [Spectrum CSS project](https://github.com/adobe/spectrum-css). + +See the [Spectrum CSS documentation](https://opensource.adobe.com/spectrum-css/) and [Spectrum CSS on GitHub](https://github.com/adobe/spectrum-css) for details. diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json new file mode 100644 index 00000000000..ffc95f11390 --- /dev/null +++ b/components/infieldprogresscircle/dist/metadata.json @@ -0,0 +1,25 @@ +{ + "sourceFile": "index.css", + "selectors": [ + ".spectrum-InfieldProgressCircle", + ".spectrum-InfieldProgressCircle .spectrum-ProgressCircle-fill", + ".spectrum-InfieldProgressCircle--sizeL", + ".spectrum-InfieldProgressCircle--sizeS", + ".spectrum-InfieldProgressCircle--sizeXL" + ], + "modifiers": [], + "component": [ + "--spectrum-in-field-progress-circle-edge-to-fill", + "--spectrum-in-field-progress-circle-size-100", + "--spectrum-in-field-progress-circle-size-200", + "--spectrum-in-field-progress-circle-size-300", + "--spectrum-in-field-progress-circle-size-75", + "--spectrum-infieldprogresscircle-padding-block" + ], + "global": ["--spectrum-progress-circle-thickness-small"], + "passthroughs": [ + "--mod-progress-circle-size", + "--mod-progress-circle-thickness" + ], + "high-contrast": [] +} diff --git a/components/infieldprogresscircle/index.css b/components/infieldprogresscircle/index.css new file mode 100644 index 00000000000..e3525eccc40 --- /dev/null +++ b/components/infieldprogresscircle/index.css @@ -0,0 +1,37 @@ +/*! +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at 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-InfieldProgressCircle { + --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-small); + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-100); + --spectrum-infieldprogresscircle-padding-block: var(--spectrum-in-field-progress-circle-edge-to-fill); +} + +.spectrum-InfieldProgressCircle--sizeS { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-75); +} + +.spectrum-InfieldProgressCircle--sizeL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-200); +} + +.spectrum-InfieldProgressCircle--sizeXL { + --mod-progress-circle-size: var(--spectrum-in-field-progress-circle-size-300); +} + +.spectrum-InfieldProgressCircle { + padding-block: var(--spectrum-infieldprogresscircle-padding-block); + + .spectrum-ProgressCircle-fill { + stroke-linecap: square; + } +} diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json new file mode 100644 index 00000000000..c48a50c6389 --- /dev/null +++ b/components/infieldprogresscircle/package.json @@ -0,0 +1,57 @@ +{ + "name": "@spectrum-css/infieldprogresscircle", + "version": "0.0.0", + "description": "The Spectrum CSS infieldprogresscircle component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/?path=/docs/components-in-field-progress-circle--docs", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/infieldprogresscircle" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index-*.css": "./dist/index-*.css", + "./index.css": "./dist/index.css", + "./metadata.json": "./dist/metadata.json", + "./package.json": "./package.json", + "./stories/*": "./stories/*" + }, + "main": "dist/index.css", + "peerDependencies": { + "@spectrum-css/tokens": ">=16" + }, + "devDependencies": { + "@spectrum-css/tokens": "16.0.0" + }, + "keywords": [ + "design-system", + "spectrum", + "spectrum-css", + "adobe", + "adobe-spectrum", + "component", + "css" + ], + "publishConfig": { + "access": "public" + }, + "spectrum": [ + { + "guidelines": "https://spectrum.adobe.com/page/progress-circle", + "rootClass": "spectrum-InfieldProgressCircle", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/progress-circle/" + } + ], + "peerDependenciesMeta": { + "@spectrum-css/tokens": { + "optional": true + } + } +} diff --git a/components/infieldprogresscircle/project.json b/components/infieldprogresscircle/project.json new file mode 100644 index 00000000000..ff11b0651fc --- /dev/null +++ b/components/infieldprogresscircle/project.json @@ -0,0 +1,17 @@ +{ + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "name": "infieldprogresscircle", + "tags": ["component"], + "targets": { + "build": {}, + "clean": {}, + "compare": {}, + "format": {}, + "lint": {}, + "report": {}, + "test": { + "defaultConfiguration": "scope" + }, + "validate": {} + } +} diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js new file mode 100644 index 00000000000..e8c60ee9d6d --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.stories.js @@ -0,0 +1,121 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; +import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { size } from "@spectrum-css/preview/types"; +import { default as ProgressCircle } from "@spectrum-css/progresscircle/stories/progresscircle.stories.js"; +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; +import { InfieldProgressCircleGroup } from "./infieldprogresscircle.test.js"; +import { Template } from "./template.js"; + +/** + * In-field progress circles are used in t-shirt size components such as [buttons](/docs/components-button--docs), [combo boxes](/docs/components-combobox--docs), and [pickers](/docs/components-picker--docs). The in-field progress circle can be used in place of an icon or in tight spaces when space is limited both vertically and horizontally. +*/ + +export default { + title: "In-field progress circle", + component: "InfieldProgressCircle", + argTypes: { + ...ProgressCircle.argTypes, + size: size(["s", "m", "l", "xl"]), + }, + args: { + ...ProgressCircle.args, + rootClass: "spectrum-InfieldProgressCircle", + }, + parameters: { + ...ProgressCircle.parameters, + design: { + type: "figma", + url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=14970-6050", + }, + packageJson, + metadata, + } +}; + +export const Default = InfieldProgressCircleGroup.bind({}); +Default.args = {}; + +// ********* VRT ONLY ********* // +export const WithForcedColors = InfieldProgressCircleGroup.bind({}); +WithForcedColors.args = Default.args; +WithForcedColors.tags = ["!autodocs", "!dev"]; +WithForcedColors.parameters = { + chromatic: { + forcedColors: "active", + modes: disableDefaultModes, + }, +}; + +// ********* DOCS ONLY ********* // + +export const Sizing = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The indeterminate progress circle displays a repeating animation for the inner fill. + */ +export const Indeterminate = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); +Indeterminate.args = { + isIndeterminate: true, +}; +Indeterminate.tags = ["!dev"]; +Indeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteDeterminate = Sizing.bind({}); +StaticWhiteDeterminate.tags = ["!dev"]; +StaticWhiteDeterminate.storyName = "Static white, default"; +StaticWhiteDeterminate.args = { + staticColor: "white", +}; +StaticWhiteDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteIndeterminate = Sizing.bind({}); +StaticWhiteIndeterminate.tags = ["!dev"]; +StaticWhiteIndeterminate.storyName = "Static white, indeterminate"; +StaticWhiteIndeterminate.args = { + staticColor: "white", + isIndeterminate: true, +}; +StaticWhiteIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackDeterminate = Sizing.bind({}); +StaticBlackDeterminate.tags = ["!dev"]; +StaticBlackDeterminate.storyName = "Static black, default"; +StaticBlackDeterminate.args = { + staticColor: "black", +}; +StaticBlackDeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackIndeterminate = Sizing.bind({}); +StaticBlackIndeterminate.tags = ["!dev"]; +StaticBlackIndeterminate.storyName = "Static black, indeterminate"; +StaticBlackIndeterminate.args = { + staticColor: "black", + isIndeterminate: true, +}; +StaticBlackIndeterminate.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/infieldprogresscircle/stories/infieldprogresscircle.test.js b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js new file mode 100644 index 00000000000..2ef07f947ab --- /dev/null +++ b/components/infieldprogresscircle/stories/infieldprogresscircle.test.js @@ -0,0 +1,25 @@ +import { Variants } from "@spectrum-css/preview/decorators"; +import { Template } from "./template.js"; + +export const InfieldProgressCircleGroup = Variants({ + Template, + testData: [ + { + testHeading: "Default", + }, + { + testHeading: "Static white", + staticColor: "white", + }, + { + testHeading: "Static black", + staticColor: "black", + }, + ], + stateData: [ + { + testHeading: "Indeterminate", + isIndeterminate: true, + } + ] +}); diff --git a/components/infieldprogresscircle/stories/template.js b/components/infieldprogresscircle/stories/template.js new file mode 100644 index 00000000000..7f8fc1f8de1 --- /dev/null +++ b/components/infieldprogresscircle/stories/template.js @@ -0,0 +1,21 @@ +import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; +import { capitalize } from "lodash-es"; +import "../index.css"; + +export const Template = ({ + customClasses = [], + rootClass = "spectrum-InfieldProgressCircle", + size = "m", + staticColor, + ...item +} = {}, context = {}) => ProgressCircle({ + customClasses: [ + rootClass, + typeof size !== "undefined" ? `${rootClass}--size${size.toUpperCase()}` : null, + typeof staticColor !== "undefined" ? `${rootClass}--static${capitalize(staticColor)}` : null, + ...customClasses + ].filter(Boolean), + size, + staticColor, + ...item +}, context ); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index f1219f98085..0d8bec6d42f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -1,9 +1,9 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { Template as Switch } from "@spectrum-css/switch/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; @@ -78,8 +78,8 @@ export const Picker = ({ } <span class="${rootClass}-label is-placeholder">${placeholder}</span> ${when(isLoading, () => - ProgressCircle({ - size: "s", + InfieldProgressCircle({ + size: size, isIndeterminate: true, }, context) )} diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index ac3f3111330..9146a54f0f1 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -17,11 +17,18 @@ export default { isIndeterminate, staticColor, value: { + name: "Percent filled", + type: { name: "number" }, + table: { + type: { summary: "number" }, + category: "Content", + }, control: { type: "range", min: 0, max: 100 - } + }, + if: { arg: "isIndeterminate", truthy: false }, } }, args: { diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 55c2d55d124..9413a7504e3 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -1,8 +1,8 @@ import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as HelpText } from "@spectrum-css/helptext/stories/template.js"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; +import { Template as InfieldProgressCircle } from "@spectrum-css/infieldprogresscircle/stories/template.js"; import { Container, getRandomId } from "@spectrum-css/preview/decorators"; -import { Template as ProgressCircle } from "@spectrum-css/progresscircle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -18,7 +18,7 @@ import "../index.css"; * @property {string[]} [customClasses=[]] * @property {string[]} [customInputClasses=[]] * @property {string[]} [customIconClasses=[]] - * @property {string[]} [customProgressCircleClasses=[]] + * @property {string[]} [customInfieldProgressCircleClasses=[]] * @property {Record<string, string>} [customStyles={}] * @property {boolean} [isInvalid=false] * @property {boolean} [isValid=false] @@ -58,7 +58,7 @@ export const Template = ({ customClasses = [], customInputClasses = [], customIconClasses = [], - customProgressCircleClasses = [], + customInfieldProgressCircleClasses = [], isInvalid = false, isValid = false, multiline = false, @@ -196,10 +196,10 @@ export const Template = ({ })} />` )} - ${when(isLoading, () => ProgressCircle({ + ${when(isLoading, () => InfieldProgressCircle({ isIndeterminate: true, - size: "s", - customClasses: customProgressCircleClasses, + size: size, + customClasses: customInfieldProgressCircleClasses, }, context))} ${when(helpText, () => HelpText({ diff --git a/tasks/clean-up-after-migration.sh b/tasks/clean-up-after-migration.sh index 101f07e82ee..f04cb29e10c 100644 --- a/tasks/clean-up-after-migration.sh +++ b/tasks/clean-up-after-migration.sh @@ -13,11 +13,6 @@ # After migrating from our old build system, there are a lot of empty folders hanging out still # This script aims to clean up those folders -# Legacy tools folder (included storybook & generator) -# test -d "tools" && rm -rf tools - -test -d "tools" && rm -rf tools - # Remove deprecated files for folder in components/*; do # Only processing nested folders, not top-level files diff --git a/tokens/README.md b/tokens/README.md index a0e99bf2381..ebdf427d75e 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -29,7 +29,7 @@ Consumers should load only the mappings for the components they are using in the The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. -On the `<body>` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`. +On the `<body>` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. For additional guidance on which assets to load, see the architecture section below. diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 2ebb930814b..069112b6bec 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -74,6 +74,7 @@ "@spectrum-css/icon": "workspace:^", "@spectrum-css/illustratedmessage": "workspace:^", "@spectrum-css/infieldbutton": "workspace:^", + "@spectrum-css/infieldprogresscircle": "workspace:^", "@spectrum-css/inlinealert": "workspace:^", "@spectrum-css/link": "workspace:^", "@spectrum-css/logicbutton": "workspace:^", diff --git a/tools/bundle/src/index.css b/tools/bundle/src/index.css index 31d68ccee09..3f1db509c75 100644 --- a/tools/bundle/src/index.css +++ b/tools/bundle/src/index.css @@ -66,6 +66,7 @@ @import "@spectrum-css/icon"; @import "@spectrum-css/illustratedmessage"; @import "@spectrum-css/infieldbutton"; +@import "@spectrum-css/infieldprogresscircle"; @import "@spectrum-css/inlinealert"; @import "@spectrum-css/link"; @import "@spectrum-css/logicbutton"; diff --git a/yarn.lock b/yarn.lock index a6a39fe5fa2..9c3bea25997 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4026,6 +4026,7 @@ __metadata: "@spectrum-css/icon": "workspace:^" "@spectrum-css/illustratedmessage": "workspace:^" "@spectrum-css/infieldbutton": "workspace:^" + "@spectrum-css/infieldprogresscircle": "workspace:^" "@spectrum-css/inlinealert": "workspace:^" "@spectrum-css/link": "workspace:^" "@spectrum-css/logicbutton": "workspace:^" @@ -4749,6 +4750,19 @@ __metadata: languageName: unknown linkType: soft +"@spectrum-css/infieldprogresscircle@workspace:^, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": + version: 0.0.0-use.local + resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle" + dependencies: + "@spectrum-css/tokens": "npm:16.0.0" + peerDependencies: + "@spectrum-css/tokens": ">=16" + peerDependenciesMeta: + "@spectrum-css/tokens": + optional: true + languageName: unknown + linkType: soft + "@spectrum-css/inlinealert@workspace:^, @spectrum-css/inlinealert@workspace:components/inlinealert": version: 0.0.0-use.local resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert" From b9e874a0d7562d7981f6778bf3e9234f7ba83d45 Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Mon, 17 Feb 2025 16:44:09 -0500 Subject: [PATCH 080/103] docs(dialog): use isOpen shared state in controls (#3562) --- components/dialog/stories/dialog.stories.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 1cc2f56521b..091098a0068 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -54,6 +54,7 @@ export default { }, control: "boolean", }, + isOpen, footer: { name: "Footer text", description: "Text content of the dialog footer. Represents the checkbox label if a checkbox is present, or stands alone if there is no checkbox. Currently only supported in the default layout.", From 842b11f3ec36f54b17ed79de873cbe685d74191c Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Mon, 17 Feb 2025 16:55:08 -0500 Subject: [PATCH 081/103] fix(statuslight): remove accent variant (#3561) - removes --spectrum-statuslight-semantic-accent-color from CSS - removes deprecated accent variant from template and tests - adds changeset - update metadata.json --- .changeset/small-impalas-search.md | 10 ++++++++++ components/statuslight/dist/metadata.json | 2 -- components/statuslight/index.css | 6 ++---- components/statuslight/stories/statuslight.test.js | 2 +- components/statuslight/stories/template.js | 2 -- 5 files changed, 13 insertions(+), 9 deletions(-) create mode 100644 .changeset/small-impalas-search.md diff --git a/.changeset/small-impalas-search.md b/.changeset/small-impalas-search.md new file mode 100644 index 00000000000..53317c408e0 --- /dev/null +++ b/.changeset/small-impalas-search.md @@ -0,0 +1,10 @@ +--- +"@spectrum-css/statuslight": patch +--- + +Removes references to the accent variant, since the accent status light was deprecated in S2. + +Removed variant: + +`.spectrum-StatusLight--accent` +`--spectrum-statuslight-semantic-accent-color` diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index f48621da4c8..13c313b8342 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -120,7 +120,6 @@ "--spectrum-statuslight-nonsemantic-silver-color", "--spectrum-statuslight-nonsemantic-turquoise-color", "--spectrum-statuslight-nonsemantic-yellow-color", - "--spectrum-statuslight-semantic-accent-color", "--spectrum-statuslight-semantic-info-color", "--spectrum-statuslight-semantic-negative-color", "--spectrum-statuslight-semantic-neutral-color", @@ -134,7 +133,6 @@ "--spectrum-statuslight-subdued-content-color-default" ], "global": [ - "--spectrum-accent-visual-color", "--spectrum-blue-visual-color", "--spectrum-border-width-100", "--spectrum-brown-visual-color", diff --git a/components/statuslight/index.css b/components/statuslight/index.css index f1788a51779..db4a4f57e4d 100644 --- a/components/statuslight/index.css +++ b/components/statuslight/index.css @@ -111,7 +111,6 @@ --spectrum-statuslight-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-statuslight-subdued-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-statuslight-semantic-neutral-color: var(--spectrum-neutral-visual-color); - --spectrum-statuslight-semantic-accent-color: var(--spectrum-accent-visual-color); --spectrum-statuslight-semantic-negative-color: var(--spectrum-negative-visual-color); --spectrum-statuslight-semantic-info-color: var(--spectrum-informative-visual-color); --spectrum-statuslight-semantic-notice-color: var(--spectrum-notice-visual-color); @@ -159,6 +158,7 @@ /* Dot */ &::before { + --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); content: ""; flex-grow: 0; flex-shrink: 0; @@ -166,8 +166,6 @@ inline-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); block-size: var(--mod-statuslight-dot-size, var(--spectrum-statuslight-dot-size)); border-radius: var(--mod-statuslight-corner-radius, var(--spectrum-statuslight-corner-radius)); - - --spectrum-statuslight-spacing-computed-top-to-dot: calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label))); margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot); margin-inline-end: var(--mod-statuslight-spacing-dot-to-label, var(--spectrum-statuslight-spacing-dot-to-label)); } @@ -277,9 +275,9 @@ @media (forced-colors: active) { .spectrum-StatusLight { - forced-color-adjust: none; --highcontrast-statuslight-content-color-default: CanvasText; --highcontrast-statuslight-subdued-content-color-default: CanvasText; + forced-color-adjust: none; /* Dot */ &::before { diff --git a/components/statuslight/stories/statuslight.test.js b/components/statuslight/stories/statuslight.test.js index 9cfab9c3094..7fc72a9ce6b 100644 --- a/components/statuslight/stories/statuslight.test.js +++ b/components/statuslight/stories/statuslight.test.js @@ -4,7 +4,7 @@ import { Template } from "./template.js"; export const StatusLightGroup = Variants({ Template, testData: [ - ...["accent", "info", "positive", "negative", "notice", "neutral"].map((variant) => ({ + ...["info", "positive", "negative", "notice", "neutral"].map((variant) => ({ testHeading: variant.charAt(0).toUpperCase() + variant.slice(1), variant, })), diff --git a/components/statuslight/stories/template.js b/components/statuslight/stories/template.js index 2faf35797c8..be01af383ba 100644 --- a/components/statuslight/stories/template.js +++ b/components/statuslight/stories/template.js @@ -27,12 +27,10 @@ export const Template = ({ </div> `; -// TODO: the accent variant will be removed in S2. export const SemanticGroup = (args, context) => Container({ withBorder: false, direction: "column", content: html`${[ - "accent", "neutral", "info", "negative", From 986d10464078d91fe65f91ec7d135f85f1eef397 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 18 Feb 2025 15:12:23 -0500 Subject: [PATCH 082/103] feat(icons)!: s2 icons - use latest workflow and ui icon sets (#3001) * feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116) --- .changeset/clean-oranges-smell.md | 11 + .changeset/olive-tools-hang.md | 59 +++ .changeset/tame-knives-train.md | 5 + .env.example | 3 + .gitignore | 1 + .storybook/decorators/icon-sprites.js | 5 +- .storybook/loaders/icon-loader.js | 69 +-- .storybook/package.json | 2 +- components/icon/dist/metadata.json | 8 +- components/icon/icons.css | 6 +- components/icon/stories/icon.mdx | 16 +- components/icon/stories/icon.stories.js | 230 +++------- components/icon/stories/icon.test.js | 206 +++++---- components/icon/stories/template.js | 426 +++++++++++------- components/icon/stories/utilities.js | 210 +++++++-- components/icon/ui-icons.css | 16 - components/infieldprogresscircle/package.json | 2 +- ui-icons/README.md | 75 ++- ui-icons/dist/icons.json | 35 ++ ui-icons/dist/spectrum-css-icons.svg | 101 +++++ ui-icons/dist/svg/Arrow100.svg | 3 + ui-icons/dist/svg/Arrow400.svg | 3 + ui-icons/dist/svg/Asterisk100.svg | 3 + ui-icons/dist/svg/Asterisk200.svg | 3 + ui-icons/dist/svg/Asterisk300.svg | 3 + ui-icons/dist/svg/Checkmark100.svg | 3 + ui-icons/dist/svg/Checkmark200.svg | 3 + ui-icons/dist/svg/Checkmark300.svg | 3 + ui-icons/dist/svg/Checkmark400.svg | 3 + ui-icons/dist/svg/Checkmark50.svg | 3 + ui-icons/dist/svg/Checkmark75.svg | 3 + ui-icons/dist/svg/Chevron100.svg | 3 + ui-icons/dist/svg/Chevron200.svg | 3 + ui-icons/dist/svg/Chevron300.svg | 3 + ui-icons/dist/svg/Chevron400.svg | 3 + ui-icons/dist/svg/Chevron50.svg | 3 + ui-icons/dist/svg/Chevron75.svg | 3 + ui-icons/dist/svg/CornerTriangle100.svg | 3 + ui-icons/dist/svg/CornerTriangle200.svg | 3 + ui-icons/dist/svg/CornerTriangle300.svg | 3 + ui-icons/dist/svg/CornerTriangle75.svg | 3 + ui-icons/dist/svg/Cross100.svg | 3 + ui-icons/dist/svg/Cross200.svg | 3 + ui-icons/dist/svg/Cross300.svg | 3 + ui-icons/dist/svg/Cross400.svg | 3 + ui-icons/dist/svg/Cross500.svg | 3 + ui-icons/dist/svg/Cross600.svg | 3 + ui-icons/dist/svg/Cross75.svg | 3 + ui-icons/dist/svg/Dash100.svg | 3 + ui-icons/dist/svg/Dash200.svg | 3 + ui-icons/dist/svg/Dash300.svg | 3 + ui-icons/dist/svg/Dash50.svg | 3 + ui-icons/dist/svg/Dash75.svg | 3 + ui-icons/index.js | 255 ++++++----- ui-icons/large/Arrow100.svg | 1 - ui-icons/large/Arrow200.svg | 1 - ui-icons/large/Arrow300.svg | 1 - ui-icons/large/Arrow400.svg | 1 - ui-icons/large/Arrow500.svg | 1 - ui-icons/large/Arrow600.svg | 1 - ui-icons/large/Arrow75.svg | 1 - ui-icons/large/Asterisk100.svg | 1 - ui-icons/large/Asterisk200.svg | 1 - ui-icons/large/Asterisk300.svg | 1 - ui-icons/large/Asterisk75.svg | 1 - ui-icons/large/Checkmark100.svg | 1 - ui-icons/large/Checkmark200.svg | 1 - ui-icons/large/Checkmark300.svg | 1 - ui-icons/large/Checkmark400.svg | 1 - ui-icons/large/Checkmark50.svg | 1 - ui-icons/large/Checkmark500.svg | 1 - ui-icons/large/Checkmark600.svg | 1 - ui-icons/large/Checkmark75.svg | 1 - ui-icons/large/Chevron100.svg | 1 - ui-icons/large/Chevron200.svg | 1 - ui-icons/large/Chevron300.svg | 1 - ui-icons/large/Chevron400.svg | 1 - ui-icons/large/Chevron50.svg | 1 - ui-icons/large/Chevron500.svg | 1 - ui-icons/large/Chevron600.svg | 1 - ui-icons/large/Chevron75.svg | 1 - ui-icons/large/CornerTriangle100.svg | 1 - ui-icons/large/CornerTriangle200.svg | 1 - ui-icons/large/CornerTriangle300.svg | 1 - ui-icons/large/CornerTriangle75.svg | 1 - ui-icons/large/Cross100.svg | 1 - ui-icons/large/Cross200.svg | 1 - ui-icons/large/Cross300.svg | 1 - ui-icons/large/Cross400.svg | 1 - ui-icons/large/Cross500.svg | 1 - ui-icons/large/Cross600.svg | 1 - ui-icons/large/Cross75.svg | 1 - ui-icons/large/Dash100.svg | 1 - ui-icons/large/Dash200.svg | 1 - ui-icons/large/Dash300.svg | 1 - ui-icons/large/Dash400.svg | 1 - ui-icons/large/Dash50.svg | 1 - ui-icons/large/Dash500.svg | 1 - ui-icons/large/Dash600.svg | 1 - ui-icons/large/Dash75.svg | 1 - ui-icons/large/DoubleGripper.svg | 1 - ui-icons/large/SingleGripper.svg | 1 - ui-icons/large/TripleGripper.svg | 1 - ui-icons/medium/Arrow100.svg | 1 - ui-icons/medium/Arrow200.svg | 1 - ui-icons/medium/Arrow300.svg | 1 - ui-icons/medium/Arrow400.svg | 1 - ui-icons/medium/Arrow500.svg | 1 - ui-icons/medium/Arrow600.svg | 1 - ui-icons/medium/Arrow75.svg | 1 - ui-icons/medium/Asterisk100.svg | 1 - ui-icons/medium/Asterisk200.svg | 1 - ui-icons/medium/Asterisk300.svg | 1 - ui-icons/medium/Asterisk75.svg | 1 - ui-icons/medium/Checkmark100.svg | 1 - ui-icons/medium/Checkmark200.svg | 1 - ui-icons/medium/Checkmark300.svg | 1 - ui-icons/medium/Checkmark400.svg | 1 - ui-icons/medium/Checkmark50.svg | 1 - ui-icons/medium/Checkmark500.svg | 1 - ui-icons/medium/Checkmark600.svg | 1 - ui-icons/medium/Checkmark75.svg | 1 - ui-icons/medium/Chevron100.svg | 1 - ui-icons/medium/Chevron200.svg | 1 - ui-icons/medium/Chevron300.svg | 1 - ui-icons/medium/Chevron400.svg | 1 - ui-icons/medium/Chevron50.svg | 1 - ui-icons/medium/Chevron500.svg | 1 - ui-icons/medium/Chevron600.svg | 1 - ui-icons/medium/Chevron75.svg | 1 - ui-icons/medium/CornerTriangle100.svg | 1 - ui-icons/medium/CornerTriangle200.svg | 1 - ui-icons/medium/CornerTriangle300.svg | 1 - ui-icons/medium/CornerTriangle75.svg | 1 - ui-icons/medium/Cross100.svg | 1 - ui-icons/medium/Cross200.svg | 1 - ui-icons/medium/Cross300.svg | 1 - ui-icons/medium/Cross400.svg | 1 - ui-icons/medium/Cross500.svg | 1 - ui-icons/medium/Cross600.svg | 1 - ui-icons/medium/Cross75.svg | 1 - ui-icons/medium/Dash100.svg | 1 - ui-icons/medium/Dash200.svg | 1 - ui-icons/medium/Dash300.svg | 1 - ui-icons/medium/Dash400.svg | 1 - ui-icons/medium/Dash50.svg | 1 - ui-icons/medium/Dash500.svg | 1 - ui-icons/medium/Dash600.svg | 1 - ui-icons/medium/Dash75.svg | 1 - ui-icons/medium/DoubleGripper.svg | 1 - ui-icons/medium/SingleGripper.svg | 1 - ui-icons/medium/TripleGripper.svg | 1 - ui-icons/package.json | 72 ++- ui-icons/project.json | 18 +- ui-icons/svgo.config.js | 90 ++-- yarn.lock | 84 +--- 156 files changed, 1321 insertions(+), 881 deletions(-) create mode 100644 .changeset/clean-oranges-smell.md create mode 100644 .changeset/olive-tools-hang.md create mode 100644 .changeset/tame-knives-train.md create mode 100644 ui-icons/dist/icons.json create mode 100644 ui-icons/dist/spectrum-css-icons.svg create mode 100644 ui-icons/dist/svg/Arrow100.svg create mode 100644 ui-icons/dist/svg/Arrow400.svg create mode 100644 ui-icons/dist/svg/Asterisk100.svg create mode 100644 ui-icons/dist/svg/Asterisk200.svg create mode 100644 ui-icons/dist/svg/Asterisk300.svg create mode 100644 ui-icons/dist/svg/Checkmark100.svg create mode 100644 ui-icons/dist/svg/Checkmark200.svg create mode 100644 ui-icons/dist/svg/Checkmark300.svg create mode 100644 ui-icons/dist/svg/Checkmark400.svg create mode 100644 ui-icons/dist/svg/Checkmark50.svg create mode 100644 ui-icons/dist/svg/Checkmark75.svg create mode 100644 ui-icons/dist/svg/Chevron100.svg create mode 100644 ui-icons/dist/svg/Chevron200.svg create mode 100644 ui-icons/dist/svg/Chevron300.svg create mode 100644 ui-icons/dist/svg/Chevron400.svg create mode 100644 ui-icons/dist/svg/Chevron50.svg create mode 100644 ui-icons/dist/svg/Chevron75.svg create mode 100644 ui-icons/dist/svg/CornerTriangle100.svg create mode 100644 ui-icons/dist/svg/CornerTriangle200.svg create mode 100644 ui-icons/dist/svg/CornerTriangle300.svg create mode 100644 ui-icons/dist/svg/CornerTriangle75.svg create mode 100644 ui-icons/dist/svg/Cross100.svg create mode 100644 ui-icons/dist/svg/Cross200.svg create mode 100644 ui-icons/dist/svg/Cross300.svg create mode 100644 ui-icons/dist/svg/Cross400.svg create mode 100644 ui-icons/dist/svg/Cross500.svg create mode 100644 ui-icons/dist/svg/Cross600.svg create mode 100644 ui-icons/dist/svg/Cross75.svg create mode 100644 ui-icons/dist/svg/Dash100.svg create mode 100644 ui-icons/dist/svg/Dash200.svg create mode 100644 ui-icons/dist/svg/Dash300.svg create mode 100644 ui-icons/dist/svg/Dash50.svg create mode 100644 ui-icons/dist/svg/Dash75.svg delete mode 100644 ui-icons/large/Arrow100.svg delete mode 100644 ui-icons/large/Arrow200.svg delete mode 100644 ui-icons/large/Arrow300.svg delete mode 100644 ui-icons/large/Arrow400.svg delete mode 100644 ui-icons/large/Arrow500.svg delete mode 100644 ui-icons/large/Arrow600.svg delete mode 100644 ui-icons/large/Arrow75.svg delete mode 100644 ui-icons/large/Asterisk100.svg delete mode 100644 ui-icons/large/Asterisk200.svg delete mode 100644 ui-icons/large/Asterisk300.svg delete mode 100644 ui-icons/large/Asterisk75.svg delete mode 100644 ui-icons/large/Checkmark100.svg delete mode 100644 ui-icons/large/Checkmark200.svg delete mode 100644 ui-icons/large/Checkmark300.svg delete mode 100644 ui-icons/large/Checkmark400.svg delete mode 100644 ui-icons/large/Checkmark50.svg delete mode 100644 ui-icons/large/Checkmark500.svg delete mode 100644 ui-icons/large/Checkmark600.svg delete mode 100644 ui-icons/large/Checkmark75.svg delete mode 100644 ui-icons/large/Chevron100.svg delete mode 100644 ui-icons/large/Chevron200.svg delete mode 100644 ui-icons/large/Chevron300.svg delete mode 100644 ui-icons/large/Chevron400.svg delete mode 100644 ui-icons/large/Chevron50.svg delete mode 100644 ui-icons/large/Chevron500.svg delete mode 100644 ui-icons/large/Chevron600.svg delete mode 100644 ui-icons/large/Chevron75.svg delete mode 100644 ui-icons/large/CornerTriangle100.svg delete mode 100644 ui-icons/large/CornerTriangle200.svg delete mode 100644 ui-icons/large/CornerTriangle300.svg delete mode 100644 ui-icons/large/CornerTriangle75.svg delete mode 100644 ui-icons/large/Cross100.svg delete mode 100644 ui-icons/large/Cross200.svg delete mode 100644 ui-icons/large/Cross300.svg delete mode 100644 ui-icons/large/Cross400.svg delete mode 100644 ui-icons/large/Cross500.svg delete mode 100644 ui-icons/large/Cross600.svg delete mode 100644 ui-icons/large/Cross75.svg delete mode 100644 ui-icons/large/Dash100.svg delete mode 100644 ui-icons/large/Dash200.svg delete mode 100644 ui-icons/large/Dash300.svg delete mode 100644 ui-icons/large/Dash400.svg delete mode 100644 ui-icons/large/Dash50.svg delete mode 100644 ui-icons/large/Dash500.svg delete mode 100644 ui-icons/large/Dash600.svg delete mode 100644 ui-icons/large/Dash75.svg delete mode 100644 ui-icons/large/DoubleGripper.svg delete mode 100644 ui-icons/large/SingleGripper.svg delete mode 100644 ui-icons/large/TripleGripper.svg delete mode 100644 ui-icons/medium/Arrow100.svg delete mode 100644 ui-icons/medium/Arrow200.svg delete mode 100644 ui-icons/medium/Arrow300.svg delete mode 100644 ui-icons/medium/Arrow400.svg delete mode 100644 ui-icons/medium/Arrow500.svg delete mode 100644 ui-icons/medium/Arrow600.svg delete mode 100644 ui-icons/medium/Arrow75.svg delete mode 100644 ui-icons/medium/Asterisk100.svg delete mode 100644 ui-icons/medium/Asterisk200.svg delete mode 100644 ui-icons/medium/Asterisk300.svg delete mode 100644 ui-icons/medium/Asterisk75.svg delete mode 100644 ui-icons/medium/Checkmark100.svg delete mode 100644 ui-icons/medium/Checkmark200.svg delete mode 100644 ui-icons/medium/Checkmark300.svg delete mode 100644 ui-icons/medium/Checkmark400.svg delete mode 100644 ui-icons/medium/Checkmark50.svg delete mode 100644 ui-icons/medium/Checkmark500.svg delete mode 100644 ui-icons/medium/Checkmark600.svg delete mode 100644 ui-icons/medium/Checkmark75.svg delete mode 100644 ui-icons/medium/Chevron100.svg delete mode 100644 ui-icons/medium/Chevron200.svg delete mode 100644 ui-icons/medium/Chevron300.svg delete mode 100644 ui-icons/medium/Chevron400.svg delete mode 100644 ui-icons/medium/Chevron50.svg delete mode 100644 ui-icons/medium/Chevron500.svg delete mode 100644 ui-icons/medium/Chevron600.svg delete mode 100644 ui-icons/medium/Chevron75.svg delete mode 100644 ui-icons/medium/CornerTriangle100.svg delete mode 100644 ui-icons/medium/CornerTriangle200.svg delete mode 100644 ui-icons/medium/CornerTriangle300.svg delete mode 100644 ui-icons/medium/CornerTriangle75.svg delete mode 100644 ui-icons/medium/Cross100.svg delete mode 100644 ui-icons/medium/Cross200.svg delete mode 100644 ui-icons/medium/Cross300.svg delete mode 100644 ui-icons/medium/Cross400.svg delete mode 100644 ui-icons/medium/Cross500.svg delete mode 100644 ui-icons/medium/Cross600.svg delete mode 100644 ui-icons/medium/Cross75.svg delete mode 100644 ui-icons/medium/Dash100.svg delete mode 100644 ui-icons/medium/Dash200.svg delete mode 100644 ui-icons/medium/Dash300.svg delete mode 100644 ui-icons/medium/Dash400.svg delete mode 100644 ui-icons/medium/Dash50.svg delete mode 100644 ui-icons/medium/Dash500.svg delete mode 100644 ui-icons/medium/Dash600.svg delete mode 100644 ui-icons/medium/Dash75.svg delete mode 100644 ui-icons/medium/DoubleGripper.svg delete mode 100644 ui-icons/medium/SingleGripper.svg delete mode 100644 ui-icons/medium/TripleGripper.svg diff --git a/.changeset/clean-oranges-smell.md b/.changeset/clean-oranges-smell.md new file mode 100644 index 00000000000..3deb7bdb737 --- /dev/null +++ b/.changeset/clean-oranges-smell.md @@ -0,0 +1,11 @@ +--- +"@spectrum-css/preview": major +--- + +Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that +are used for loading in the sprite sheet and the individual icons, as they have moved. + +The global Icon Loader has been updated to apply the existing key name renaming from file names to icon +names. This is now done once at the loader step, rather than each time within the Icon component template. +The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the +design system. diff --git a/.changeset/olive-tools-hang.md b/.changeset/olive-tools-hang.md new file mode 100644 index 00000000000..fe513013a5c --- /dev/null +++ b/.changeset/olive-tools-hang.md @@ -0,0 +1,59 @@ +--- +"@spectrum-css/ui-icons": major +--- + +# Breaking change + +Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons. + +| Icon name | Migration notes | +| ----------------- | --------------- | +| Arrow75 | Deprecated | +| Arrow100 | - | +| Arrow200 | Deprecated | +| Arrow300 | Deprecated | +| Arrow400 | - | +| Arrow500 | Deprecated | +| Arrow600 | Deprecated | +| Asterisk75 | Deprecated | +| Asterisk100 | - | +| Asterisk200 | - | +| Asterisk300 | - | +| Checkmark50 | - | +| Checkmark75 | - | +| Checkmark100 | - | +| Checkmark200 | - | +| Checkmark300 | - | +| Checkmark400 | - | +| Checkmark500 | Deprecated | +| Checkmark600 | Deprecated | +| Chevron50 | - | +| Chevron75 | - | +| Chevron100 | - | +| Chevron200 | - | +| Chevron300 | - | +| Chevron400 | - | +| Chevron500 | Deprecated | +| Chevron600 | Deprecated | +| CornerTriangle75 | - | +| CornerTriangle100 | - | +| CornerTriangle200 | - | +| CornerTriangle300 | - | +| Cross75 | - | +| Cross100 | - | +| Cross200 | - | +| Cross300 | - | +| Cross400 | - | +| Cross500 | - | +| Cross600 | - | +| Dash50 | - | +| Dash75 | - | +| Dash100 | - | +| Dash200 | - | +| Dash300 | - | +| Dash400 | Deprecated | +| Dash500 | Deprecated | +| Dash600 | Deprecated | +| SingleGripper | Deprecated | +| DoubleGripper | Deprecated | +| TripleGripper | Deprecated | diff --git a/.changeset/tame-knives-train.md b/.changeset/tame-knives-train.md new file mode 100644 index 00000000000..2c774a96d25 --- /dev/null +++ b/.changeset/tame-knives-train.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/icon": major +--- + +Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed. diff --git a/.env.example b/.env.example index b8c80f47bb1..86a0b5a23fd 100644 --- a/.env.example +++ b/.env.example @@ -20,3 +20,6 @@ WATCH_MODE=true NX_VERBOSE_LOGGING=false NX_SKIP_NX_CACHE=false NX_PERF_LOGGING=false + +ARTIFACTORY_API_KEY= +ARTIFACTORY_API_TOKEN= diff --git a/.gitignore b/.gitignore index 197669eba81..82ac5eeeec7 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ dist !dist/metadata.json !tokens/dist/json/* +!ui-icons/dist # Not committing the map assets, these are dev-only *.map diff --git a/.storybook/decorators/icon-sprites.js b/.storybook/decorators/icon-sprites.js index 9b8afb09925..9a4648e934d 100644 --- a/.storybook/decorators/icon-sprites.js +++ b/.storybook/decorators/icon-sprites.js @@ -1,5 +1,5 @@ // Used in the icon sprite decorator to inject the sprite sheets into the document -import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw"; +import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw"; import uiSprite from "@spectrum-css/ui-icons/dist/spectrum-css-icons.svg?raw"; import { makeDecorator, useEffect } from "@storybook/preview-api"; @@ -14,9 +14,6 @@ export const withIconSpriteSheet = makeDecorator({ loaded = {}, } = context; - // Load the icons into the window object - if (loaded.icons) window.icons = loaded.icons; - useEffect(() => { // Inject the sprite sheets into the document let sprite = document.getElementById("spritesheets"); diff --git a/.storybook/loaders/icon-loader.js b/.storybook/loaders/icon-loader.js index 07fcd6ff5df..0265335db7c 100644 --- a/.storybook/loaders/icon-loader.js +++ b/.storybook/loaders/icon-loader.js @@ -1,16 +1,29 @@ -export const IconLoader = async () => ({ - icons: { - workflow: { - medium: await import.meta.glob( - "/node_modules/@adobe/spectrum-css-workflow-icons/dist/18/*.svg", +import { cleanUiIconName, cleanWorkflowIconName } from "@spectrum-css/icon/stories/utilities.js"; + +/** + * Loads all SVG files from both icon sets, and stores a string with the SVG markup. + * + * Excludes "22x20" workflow icons as they are not yet used within the design system. + * + * @see https://storybook.js.org/docs/writing-stories/loaders + * @see https://vite.dev/guide/features#glob-import + */ +export const IconLoader = async () => { + let iconData = { + icons: { + workflow: await import.meta.glob( + [ + "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*.svg", + "!/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*_22x20*.svg", + ], { eager: true, query: "?raw", import: "default", } ), - large: await import.meta.glob( - "/node_modules/@adobe/spectrum-css-workflow-icons/dist/24/*.svg", + ui: await import.meta.glob( + "/node_modules/@spectrum-css/ui-icons/dist/svg/*.svg", { eager: true, query: "?raw", @@ -18,23 +31,25 @@ export const IconLoader = async () => ({ } ), }, - ui: { - medium: await import.meta.glob( - "/node_modules/@spectrum-css/ui-icons/dist/medium/*.svg", - { - eager: true, - query: "?raw", - import: "default", - } - ), - large: await import.meta.glob( - "/node_modules/@spectrum-css/ui-icons/dist/large/*.svg", - { - eager: true, - query: "?raw", - import: "default", - } - ), - }, - }, -}); + }; + + /** + * Changes all keys in the IconLoader object to be just the cleaned icon name used within our Storybook's Icon component, + * instead of the full file name and directory that was loaded. + * + * E.g. "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/S2_Icon_3DAsset_20_N.svg" would become just "3DAsset". + */ + iconData.icons.workflow = Object.fromEntries( + Object.entries(iconData.icons.workflow).map( + ([key, value]) => [cleanWorkflowIconName(key.split("/").pop()), value] + ) + ); + + iconData.icons.ui = Object.fromEntries( + Object.entries(iconData.icons.ui).map( + ([key, value]) => [cleanUiIconName(key.split("/").pop()), value] + ) + ); + + return iconData; +}; diff --git a/.storybook/package.json b/.storybook/package.json index be84ad45f97..70cf69751dc 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -39,7 +39,7 @@ "build": "yarn docs:report && cross-env NODE_ENV=development storybook build --stats-json --config-dir ." }, "dependencies": { - "@adobe/spectrum-css-workflow-icons": "^1.5.4", + "@adobe/spectrum-css-workflow-icons": "^4.0.0", "@spectrum-css/bundle": "1.0.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/ui-icons": "1.1.2" diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 590503e05b8..72722ba0b6b 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -11,8 +11,6 @@ ".spectrum-Icon--sizeXXL", ".spectrum-Icon--sizeXXS", ".spectrum-UIIcon", - ".spectrum-UIIcon--large", - ".spectrum-UIIcon--medium", ".spectrum-UIIcon-ArrowDown100", ".spectrum-UIIcon-ArrowDown200", ".spectrum-UIIcon-ArrowDown300", @@ -105,9 +103,7 @@ "--mod-icon-block-size", "--mod-icon-color", "--mod-icon-inline-size", - "--mod-icon-size", - "--mod-ui-icon-large-display", - "--mod-ui-icon-medium-display" + "--mod-icon-size" ], "component": [ "--spectrum-icon-block-size", @@ -160,8 +156,6 @@ "--spectrum-dash-icon-size-500", "--spectrum-dash-icon-size-600", "--spectrum-dash-icon-size-75", - "--spectrum-ui-icon-large-display", - "--spectrum-ui-icon-medium-display", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", diff --git a/components/icon/icons.css b/components/icon/icons.css index e413ba95173..ff0a39b001d 100644 --- a/components/icon/icons.css +++ b/components/icon/icons.css @@ -13,6 +13,9 @@ .spectrum-Icon, .spectrum-UIIcon { + /* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */ + --iconPrimary: var(--mod-icon-color, currentColor); + --spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size))); --spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size))); @@ -24,7 +27,8 @@ color: var(--mod-icon-color, inherit); /* Fill should match the current text color. */ - fill: currentColor; + /* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */ + fill: var(--iconPrimary); /* Don't catch clicks or hover, otherwise they may not escape the SVG. */ pointer-events: none; diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx index 6425344761a..de5d3711be7 100644 --- a/components/icon/stories/icon.mdx +++ b/components/icon/stories/icon.mdx @@ -20,20 +20,26 @@ The SVG icons used in Spectrum CSS are a part of two different icon sets, "workf ### Workflow icons -The workflow icon set contains several hundred icons to choose from. -These icons can be seen in use within Button, Action button, Menu, and many other components. +The workflow icon set contains several hundred icons to choose from. For a full list of all icons within this set, see **[workflow icons](/story/components-icon--workflow)**. +These icons can be seen in use within button, action button, menu, and many other components. Here is an example with just a few of these icons: <Canvas of={IconStories.WorkflowDefault} /> -These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set: +#### T-shirt sizing + +Workflow icons use "t-shirt" sizes, e.g. small or medium, that are the same width and height for each icon in the set. Note that the +extra-extra-large size is currently _not_ part of the design specifications and may be deprecated in the near future: <Canvas of={IconStories.WorkflowSizing} /> ### UI icons UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within -the [Combobox component](?path=/docs/components-combobox--docs) is one example. +the [Combobox component](/docs/components-combobox--docs) is one example. For a full list of all icons within this +set, see **[ui icons](/story/components-icon--ui)**. + +#### Numbered sizing Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing. They have unique classes applied that set their size in CSS. For example: @@ -49,6 +55,8 @@ An example of some UI icons in their available sizes: <Canvas of={IconStories.UIDefault} /> +#### Directional icons + Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used with: diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index 5411a9d2d09..d418250a69d 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,29 +1,11 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import { html } from "lit"; -import { styleMap } from "lit/directives/style-map.js"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { IconGroup } from "./icon.test.js"; -import { Template } from "./template.js"; -import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; - -/** - * Create a list of all UI Icons with their sizing numbers. - * - * The list is a little long until Storybook adds a way to use conditional options - * in controls, e.g. a "uiSize" control with options pulled from uiIconSizes: - * @see https://github.com/storybookjs/storybook/discussions/24235 - */ -const uiIconNameOptions = uiIconsWithDirections.map((iconName) => { - const baseIconName = iconName.replace(/(Left|Right|Up|Down)$/, ""); - // Icons like Gripper that don't have sizes yet, represented by any empty array. - if (uiIconSizes[baseIconName]?.length == 0) { - return [baseIconName]; - } - return uiIconSizes[baseIconName]?.map(sizeNum => iconName + sizeNum) ?? []; -}).flat(); +import { FullIconSetTemplate, Template, UIArrowsTemplate, UIDefaultTemplate, WorkflowDefaultTemplate } from "./template"; +import { uiIconsWithDirections, workflowIconsCleaned, workflowSizes } from "./utilities.js"; /** * The Icon component contains all of the CSS used for displaying both workflow and UI icons. @@ -33,7 +15,7 @@ export default { component: "Icon", argTypes: { size: { - ...size(["xs", "s", "m", "l", "xl", "xxl"]), + ...size(workflowSizes), if: { arg: "setName", eq: "workflow" }, }, setName: { @@ -53,7 +35,7 @@ export default { type: { summary: "string" }, category: "Content", }, - options: workflowIcons, + options: workflowIconsCleaned, control: "select", if: { arg: "setName", eq: "workflow" }, }, @@ -64,9 +46,7 @@ export default { type: { summary: "string" }, category: "Content", }, - options: [ - ...uiIconNameOptions, - ], + options: uiIconsWithDirections, control: "select", if: { arg: "setName", eq: "ui" }, }, @@ -79,18 +59,32 @@ export default { }, control: "color", }, - useRef: { table: { disable: true } }, + useRef: { + name: "Use sprite sheet reference", + description: "Storybook only: whether to display an SVG with a `<use>` reference to the icon within a loaded sprite sheet. This improves Storybook performance, especially for multiple icons. When set to `false`, the icon file's full markup is used.", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Advanced", + }, + control: "boolean", + }, }, args: { rootClass: "spectrum-Icon", setName: "workflow", - iconName: "ABC", + iconName: "Color", + uiIconName: "Checkmark400", size: "xl", useRef: true, }, parameters: { packageJson, metadata, + design: { + type: "figma", + url: "https://www.figma.com/design/9qeVZSJ9t0kv6r7njzgHx7/S2-%2F-Styles-visualizer-(WIP)?node-id=295-24257&t=ZC7fyaQ0VQYQ5VYM-1", + }, }, tags: ["!autodocs"], }; @@ -98,6 +92,44 @@ export default { export const Default = IconGroup.bind({}); Default.args = {}; +/** + * All icons in the Workflow icon set. + */ +export const Workflow = FullIconSetTemplate.bind({}); +Workflow.storyName = "Workflow icons"; +Workflow.args = { + setName: "workflow", + useRef: true, +}; +Workflow.argTypes = { + setName: { table: { disable: true } }, + iconName: { table: { disable: true } }, +}; +Workflow.parameters = { + chromatic: { disableSnapshot: true }, + // Layout other than "centered" needed for dynamic grid columns CSS to work correctly. + layout: "padded", +}; + +/** + * All icons in the UI icon set. + */ +export const UI = FullIconSetTemplate.bind({}); +UI.storyName = "UI icons"; +UI.args = { + setName: "ui", + useRef: true, +}; +UI.argTypes = { + setName: { table: { disable: true } }, + uiIconName: { table: { disable: true } }, +}; +UI.parameters = { + chromatic: { disableSnapshot: true }, + // Layout other than "centered" needed for dynamic grid columns CSS to work correctly. + layout: "padded", +}; + // ********* VRT ONLY ********* // export const WithForcedColors = IconGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; @@ -111,50 +143,13 @@ WithForcedColors.parameters = { }, }; -/** - * Helper template function to display multiple icons using an array of icon names. - */ -const IconListTemplate = (args, iconsList = [], context) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "32px", - "flexWrap": "wrap", - })} - > - ${iconsList.map( - (iconName) => Template({ ...args, iconName }, context) - )} - </div> -`; - -/* Stories for the MDX "Docs" only. */ +// ********* DOCS ONLY ********* // /** * A sampling of multiple Workflow icons. */ -export const WorkflowDefault = (args, context) => IconListTemplate( - { - ...args, - setName: "workflow", - size: "xl", - }, - [ - "Alert", - "Asset", - "Actions", - "ArrowDown", - "Camera", - "Copy", - "DeviceDesktop", - "Download", - "FilterAdd", - "Form", - "Light", - "Polygon", - ], - context -); +export const WorkflowDefault = WorkflowDefaultTemplate.bind({}); +WorkflowDefault.storyName = "Workflow icons"; WorkflowDefault.tags = ["!dev"]; WorkflowDefault.parameters = { chromatic: { disableSnapshot: true }, @@ -162,49 +157,14 @@ WorkflowDefault.parameters = { /** * An example of a Workflow icon displayed at all sizes, from small to extra-large. + * Note that the extra-extra-large size is currently *not* part of the design specifications and may be deprecated in the near future. */ -export const WorkflowSizing = (args, context) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "24px", - "flexWrap": "wrap", - })} - > - ${["xs","s","m","l","xl"].map( - (size) => html` - <div - style=${styleMap({ - "display": "flex", - "gap": "16px", - "flexDirection": "column", - "alignItems": "center", - "flexBasis": "80px", - })} - > - ${Typography({ - semantics: "heading", - size: "xs", - content: [ - { - xs: "Extra-small", - s: "Small", - m: "Medium", - l: "Large", - xl: "Extra-large", - }[size], - ], - customStyles: { - "white-space": "nowrap", - "--mod-detail-font-color": "var(--spectrum-seafoam-900)", - } - })} - ${Template({ ...args, size }, context)} - </div> - ` - )} - </div> -`; +export const WorkflowSizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeading: false, + ...args, +}, context); WorkflowSizing.tags = ["!dev"]; WorkflowSizing.args = { setName: "workflow", @@ -217,40 +177,8 @@ WorkflowSizing.parameters = { /** * A sampling of a few UI icons. */ -export const UIDefault = (args, context) => html` - <div style="margin-bottom: 32px;"> - ${IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "Asterisk100", - "Asterisk200", - "Asterisk300", - ], - context - )} - </div> - <div> - ${IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "ChevronDown50", - "ChevronDown75", - "ChevronDown100", - "ChevronDown200", - "ChevronDown300", - "ChevronDown400", - ], - context - )} - </div> -`; -UIDefault.storyName = "UI Default"; +export const UIDefault = UIDefaultTemplate.bind({}); +UIDefault.storyName = "UI icons"; UIDefault.tags = ["!dev"]; UIDefault.parameters = { chromatic: { disableSnapshot: true }, @@ -259,19 +187,7 @@ UIDefault.parameters = { /** * A UI arrow displayed for all directions (left, right, up, down). */ -export const UIArrows = (args, context) => IconListTemplate( - { - ...args, - setName: "ui", - }, - [ - "ArrowRight100", - "ArrowLeft100", - "ArrowDown100", - "ArrowUp100", - ], - context -); +export const UIArrows = UIArrowsTemplate.bind({}); UIArrows.storyName = "UI Arrows"; UIArrows.tags = ["!dev"]; UIArrows.parameters = { diff --git a/components/icon/stories/icon.test.js b/components/icon/stories/icon.test.js index fc81d4cb922..34202826597 100644 --- a/components/icon/stories/icon.test.js +++ b/components/icon/stories/icon.test.js @@ -1,99 +1,127 @@ -import { Variants } from "@spectrum-css/preview/decorators"; +import { Container, Variants } from "@spectrum-css/preview/decorators"; +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.js"; -import { uiIconSizes, uiIconsWithDirections } from "./utilities.js"; +import { uiIconsWithDirections, uniqueUiIconBaseNames, workflowSizes } from "./utilities.js"; /** * Chromatic VRT template that displays multiple icons to cover various options. + * Includes Chromatic-only testing grid with: + * - Several workflow icons, at all sizes, with some set to a color + * - All UI icons, organized within a grid by sizing number and name */ -const TestTemplate = (args, context) => { - return html` - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "32px", - })} - > - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "16px", - })} - > - ${[ - { - setName: "workflow", - iconName: "Alert", - fill: "var(--spectrum-negative-content-color-default)", - }, - { - setName: "workflow", - iconName: "Hand", - }, - { - setName: "workflow", - iconName: "Help", - }, - { - setName: "workflow", - iconName: "ArrowLeft", - }, - { - setName: "workflow", - iconName: "ArrowRight", - }, - { - setName: "workflow", - iconName: "ChevronDown", - } - ].map((row_args) => html` - <div - style=${styleMap({ - "display": "grid", - "grid-template-columns": "repeat(6, 1fr)", - "column-gap": "24px", - "row-gap": "48px", - "place-items": "center", - })} - > - ${["xs","s","m","l","xl","xxl"].map( - (size) => Template({ ...args, ...row_args, size }) - )} - </div>` - )} - </div> - <div - style=${styleMap({ - "display": "flex", - "flex-direction": "column", - "gap": "16px", - })} - > - ${uiIconsWithDirections.map(iconName => html` - <div - style=${styleMap({ - "display": "grid", - "grid-template-columns": "repeat(8, 1fr)", - "column-gap": "24px", - "row-gap": "48px", - })} - > - ${uiIconSizes[iconName.replace(/(Left|Right|Up|Down)$/, "")]?.map((iconSize) => - Template({ ...args, setName: "ui", iconName: iconName + iconSize }, context) - )} - ${when(uiIconSizes[iconName]?.length == 0, () => - Template({ ...args, setName: "ui", iconName }, context) - )} - </div>` - )} - </div> - </div> - `; -}; +export const TestTemplate = (args, context) => html` + ${Container({ + heading: "Workflow icon examples", + withBorder: false, + direction: "row", + wrapperStyles: { + columnGap: "12px", + }, + content: html` + <div + style=${styleMap({ + "display": "grid", + "grid-template-columns": `repeat(${workflowSizes.length}, 50px)`, + "gap": "16px", + "border": "1px solid var(--spectrum-gray-200)", + "border-radius": "4px", + "padding": "16px", + "margin-block-end": "32px", + })} + > + ${workflowSizes.map(scale => html` + <div> + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "detail", + size: "s", + content: [scale], + customStyles: { + "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + } + })} + </div> + `)} + ${[ + "Add", + "AlertTriangle", + "Edit", + "File", + "Folder", + "MenuHamburger", + "SelectRectangle", + "Redo", + "Star", + "StarFilled", + "User", + "ColorHarmony", + "CornerRadiusBottomLeft", + ].map((iconName, idx) => html` + ${workflowSizes.map((size) => Template({ + ...args, + useRef: true, + iconName, + setName: "workflow", + size, + fill: idx % 5 === 0 ? "var(--spectrum-negative-content-color-default)" : undefined + }, context))} + `)} + </div> + `, + }, context)} + + ${Container({ + heading: "UI icon set", + withBorder: false, + direction: "row", + wrapperStyles: { + columnGap: "12px", + }, + content: html` + <div + style=${styleMap({ + "display": "grid", + "grid-template-columns": "repeat(8, 50px)", + "gap": "16px", + "border": "1px solid var(--spectrum-gray-200)", + "border-radius": "4px", + "padding": "16px", + })} + > + ${["50", "75", "100", "200", "300", "400", "500", "600"].map(scale => html` + <div> + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "detail", + size: "s", + content: [scale], + customStyles: { + "--mod-detail-font-color": "var(--spectrum-seafoam-900)", + } + })} + </div> + `)} + ${uniqueUiIconBaseNames.sort().reduce((print, iconName) => { + let output = Array(8).fill(html`<span></span>`); + ["50", "75", "100", "200", "300", "400", "500", "600"].forEach((scale, idx) => { + if (uiIconsWithDirections.includes(`${iconName}${scale}`)) { + output[idx] = Template({ + ...args, + setName: "ui", + useRef: false, + uiIconName: `${iconName}${scale}`, + }, context); + } + }); + print.push(...output); + return print; + }, [])} + </div> + `, + }, context)} +`; export const IconGroup = Variants({ Template, diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index 408107755e7..b6deef70de5 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -1,8 +1,12 @@ import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; 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 { unsafeSVG } from "lit/directives/unsafe-svg.js"; +import { when } from "lit/directives/when.js"; +import { getSpriteSheetName, uiIconsCleaned, uiIconsWithDirections, workflowIconsCleaned } from "./utilities.js"; import "../index.css"; @@ -11,78 +15,8 @@ import "../index.css"; * @typedef { IconArgs & { scale: string, setName: 'workflow' | 'ui' } } IconProps */ -const fetchIconDetails = ({ - icons, - workflowIcons = [], - uiIcons = [], - uiIconSizes = {}, -}) => { - if (!icons || Object.keys(icons).length == 0) { - // Fetch loaded data if not provided - if (window.icons) icons = window.icons; - else { - return { - workflowIcons: [], - uiIcons: [], - uiIconSizes: {}, - uiIconsWithDirections: [], - }; - } - } - - // clean up loaded icon data - icons = Object.entries(icons).reduce((acc, [setName, data]) => { - acc[setName] = Object.entries(data).reduce((acc, [size, data]) => { - acc[size] = Object.entries(data).reduce((acc, [iconName, svg]) => { - // simplify icon name - iconName = iconName.split("/").pop().replace(/\.svg$/, ""); - acc[iconName] = svg; - - // Add the icon name to the workflowIcons list if it's from the workflow set - if (setName === "workflow") { - workflowIcons.push(iconName); - } - else { - const iconNameRoot = iconName.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""); - const iconNameSize = iconName.match(/\d{2,3}/g)?.[0]; - uiIcons.push(iconNameRoot); - uiIconSizes[iconNameRoot] = [ - ...new Set([ - ...uiIconSizes[iconNameRoot] ?? [], - ...(iconNameSize ? [iconNameSize] : []), - ]) - ]; - } - return acc; - }, {}); - return acc; - }, {}); - return acc; - }, {}); - - return { - icons, - workflowIcons: [...new Set(workflowIcons)], - uiIcons: [...new Set(uiIcons)], - uiIconSizes, - uiIconsWithDirections: [ - ...new Set([ - ...(uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)) ?? []), - "ArrowRight", - "ArrowLeft", - "ArrowUp", - "ArrowDown", - "ChevronRight", - "ChevronLeft", - "ChevronUp", - "ChevronDown", - ]) - ], - }; -}; - /** - * Template for rendering an icon + * Template for rendering an icon. * @description Icon template that renders an icon based on the provided icon name and set name. * @param {IconProps} props * @param {string} props.rootClass @@ -93,6 +27,7 @@ const fetchIconDetails = ({ * @param {string} props.fill * @param {string} props.id * @param {string[]} props.customClasses + * @param {boolean} props.useRef [true] Whether to use an SVG with a reference to the icon within the sprite sheet. When false, returns the the individual SVG's entire markup. * @returns {import('lit').TemplateResult<1>} */ export const Template = ({ @@ -104,46 +39,18 @@ export const Template = ({ fill, id = getRandomId("icon"), customClasses = [], - icons, useRef = true, - workflowIcons, - uiIcons, - uiIconSizes, } = {}, context = {}) => { - const { globals = {}, loaded = {} } = context; - - const scale = globals.scale ?? "medium"; - - if (!workflowIcons || !uiIcons || !uiIconSizes) { - const details = fetchIconDetails({ - icons: loaded.icons, - workflowIcons, - uiIcons, - uiIconSizes - }); - - if(details.icons) { - icons = details.icons; - } + // All icons SVG markup from the global IconLoader are in loaded.icons + const { loaded } = context; - if (!workflowIcons && details.workflowIcons) { - workflowIcons = details.workflowIcons; - } - - if (!uiIcons && details.uiIcons) { - uiIcons = details.uiIcons; - } - - if (!uiIconSizes && details.uiIconSizes) { - uiIconSizes = details.uiIconSizes; - } - } - - // UI icons are selected from a different control. + // Treat "iconName" as the icon name regardless of the icon set. + // UI icons are selected from a different control and arg. if (setName === "ui" && uiIconName) { iconName = uiIconName; } + // Make sure icon name is provided. if (!iconName) { console.warn( "Icon: Could not render a result because no icon name was provided to the icon template." @@ -151,88 +58,105 @@ export const Template = ({ return html``; } + // Name of icon that corresponds with SVG file. This may differ from the icon name, such as with + // directional icons that use a single icon. let idKey = iconName; - // If icon set was not provided, try determine which icon set contains this icon. - // Note: icon sets can contain the same icon name, with different icons. - if (!["workflow","ui"].includes(setName)) { - if (workflowIcons.includes(idKey)) { - setName = "workflow"; - } - else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""))) { - setName = "ui"; - } - } - - // Prefer full SVG for UI icons because sizing is more consistent. - if (setName === "ui" && uiIconName) { - useRef = false; + // If a descriptor like "Right", "Left", "Down", or "Up" is present for the UI icons Chevron or + // Arrow, use that only for the class name and not the icon fetch. This is because these use a + // single icon file that is rotated in CSS. + if ( + ["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c)) && + setName === "ui" + ) { + idKey = idKey.replace(/(Right|Left|Down|Up)/, ""); } + // Make sure icon set is provided. if (!setName) { console.warn( - `Icon: Could not determine the icon set for the provided icon name: ${idKey}.` + `Icon "${idKey}" is missing its icon set. Make sure you are explicitly setting either the workflow or ui icon set.` ); return html``; } - // If a descriptor like Right, Left, Down, or Up is present for the UI icons Chevron or - // Arrow, use that only for the class and not the icon fetch. - if ( - setName == "ui" && - uiIcons.some((c) => idKey.startsWith(c)) && - ["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c)) - ) { - idKey = idKey.replace(/(Right|Left|Down|Up)/, ""); - } - /** * Fallback UI Icon sizing number. * * If the icon name includes its scale, we want to leave that scale. This is preferred, * as UI icons do not use workflow icon sizing. * - * If the UI icon name does not include scale, reformat it to match the provided sizing. - * E.g. with a size of "s", the icon name "ChevronRight" would become "ChevronRight75". + * If the UI icon name does not include scale, or the scale does not exist in the current + * list of UI icons, reformat it to approximate the provided sizing for the component. */ if ( - setName == "ui" && - // Exists in the list of available UI icons. - uiIcons.includes(idKey.replace(/\d{2,3}$/, "")) && - // Does not already have size number at the end. - !idKey.match(/^(?!\d).*\d{2,3}$/) && - // Exclude some UI icons that do not (yet) have size numbers. - uiIconSizes[idKey]?.length != 0 + setName === "ui" && + ( + // Does not already have size number at the end. + !idKey.match(/\d{2,3}$/) || + // If the provided icon name includes the sizing number, make sure it's a supported sizing number; + // if not, strip it from the key. + ( + idKey.match(/\d{2,3}$/) && + !uiIconsCleaned.includes(idKey) + ) + ) ) { let sizeVal; switch (size) { case "xs": + if (["CornerTriangle", "Cross"].some(c => idKey.startsWith(c))) { + sizeVal = "75"; + } + else if (["Arrow", "Asterisk", "LinkOut"].some(c => idKey.startsWith(c))) { + sizeVal = "100"; + } + else { + sizeVal = "50"; + } + break; case "s": - sizeVal = "75"; + if (["Arrow", "Asterisk", "LinkOut"].some(c => idKey.startsWith(c))) { + sizeVal = "100"; + } + else { + sizeVal = "75"; + } break; case "l": - sizeVal = "200"; + if (["Arrow"].some(c => idKey.startsWith(c))) { + sizeVal = "400"; + } + else { + sizeVal = "200"; + } break; case "xl": case "xxl": - sizeVal = "300"; + if (["Arrow"].some(c => idKey.startsWith(c))) { + sizeVal = "400"; + } + else { + sizeVal = "300"; + } break; default: sizeVal = "100"; break; } + console.warn(`Using fallback UI Icon sizing number "${sizeVal}" for "${idKey}". UI icon size was not provided or does not exist in the list of available UI icons.`); + + // Replace sizing number on idKey and iconName with new fallback size. + idKey = idKey.replace(/\d{2,3}$/, ""); idKey += sizeVal; - iconName += sizeVal; - } - // Fetch SVG file markup, and set optional fill color. - let inlineStyle; - if (fill) inlineStyle = `color: ${fill}`; + iconName = iconName.replace(/\d{2,3}$/, ""); + iconName += sizeVal; - let svgString; - if (!useRef && icons && icons[setName]?.[scale]?.[idKey]) { - svgString = icons[setName][scale][idKey]; + if (!uiIconsCleaned.includes(idKey)) { + console.error(`The UI icon "${idKey}" does not exist in the list of available UI icons.`); + } } /** @@ -242,7 +166,6 @@ export const Template = ({ const classList = { [rootClass]: true, [`spectrum-UIIcon-${iconName}`]: !!(setName === "ui"), - [`${rootClass}--${scale}`]: !!(setName === "ui" && scale), [`${rootClass}--size${size?.toUpperCase()}`]: !!( (!setName || setName === "workflow") && size @@ -250,34 +173,205 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), }; - if (svgString) { - const classesAsString = Object.entries(classList).reduce((acc, [key, value]) => { - if (value) acc += `${key} `; - return acc; - }, ""); + /** + * Display full SVG file markup from global IconLoader data, when not using a reference to the sprite sheet. + */ + if (!useRef) { + let svgString; + if (loaded?.icons && loaded?.icons[setName]?.[idKey]) { + svgString = loaded.icons[setName][idKey]; + } + + // Return the individual SVG's entire markup. + if (svgString) { + const classesAsString = Object.entries(classList).reduce((acc, [key, value]) => { + if (value) acc += `${key} `; + return acc; + }, ""); - return html`${unsafeSVG( - svgString.replace(/<svg/, `<svg class="${classesAsString}" focusable="false" aria-hidden="true" role="img"`) - )}`; + return html`${unsafeSVG( + svgString.replace(/<svg/, `<svg class="${classesAsString}" ${fill ? `style="color: ${fill};"` : ""} focusable="false" aria-hidden="true" role="img"`) + )}`; + } + else { + console.warn(`Could not find SVG markup for "${idKey}" in context.loaded.icons. Did you pass through context? Falling back to using the sprite sheet reference instead.`); + } } - // ui ID: #spectrum-css-icon-${idKey} - // workflow ID: #spectrum-icon-(18|24)-${idKey} - const iconID = - setName !== "workflow" - ? `spectrum-css-icon-${idKey}` - : `spectrum-icon-${scale !== "medium" ? "24" : "18"}-${idKey}`; + // ID of the icon within the sprite sheet for its icon set. + const iconID = getSpriteSheetName(idKey, setName); + // Return SVG markup with a reference to the icon ID within the sprite sheet. return html`<svg class=${classMap(classList)} id=${ifDefined(id)} - style=${ifDefined(inlineStyle)} + style=${ifDefined(fill ? `color: ${fill};` : undefined)} focusable="false" aria-hidden="true" - aria-labelledby=${idKey} + aria-label=${iconName} role="img" > <title id=${idKey}>${idKey.replace(/([A-Z])/g, " $1").trim()} `; }; + +/** + * Display all icons in the icon set within a grid. + */ +export const FullIconSetTemplate = (args, context) => { + return html` +
+ ${when(args.setName === "workflow", () => { + return workflowIconsCleaned.sort().map((iconName) => IconWithLabelTemplate({ ...args, iconName }, context)); + }, () => { + return uiIconsWithDirections.sort().map((iconName) => IconWithLabelTemplate({ ...args, uiIconName: iconName }, context)); + })} +
+ `; +}; + +/** + * Display a single icon in the icon set with a label showing the icon name. + */ +export const IconWithLabelTemplate = (args, context) => html` +
+ ${Template({ + useRef: true, + size: "xxl", + setName: args.setName, + iconName: args?.iconName ?? undefined, + uiIconName: args?.uiIconName ?? undefined, + ...args, + }, context)} + ${Typography({ + customClasses: ["chromatic-ignore"], + semantics: "body", + size: "xxs", + content: [ + args.setName == "ui" ? args.uiIconName : args.iconName, + ], + })} +
+`; + +/** + * Helper template function to display multiple icons using an array of icon names. + */ +export const IconListTemplate = (args, context, iconsList = []) => html` +
+ ${iconsList.map( + (iconName) => Template({ + ...args, + iconName: args?.setName === "workflow" ? iconName : undefined, + uiIconName: args?.setName === "ui" ? iconName : undefined, + }, context) + )} +
+`; + +/** + * Display examples of multiple workflow icons. + */ +export const WorkflowDefaultTemplate = (args, context) => html` + ${IconListTemplate( + { + ...args, + setName: "workflow", + size: "xl", + }, + context, + [ + "AlertCircle", + "Bell", + "Camera", + "Color", + "Copy", + "DeviceDesktop", + "Download", + "Draw", + "Files", + "Hand", + "Lightbulb", + "Paragraph", + ] + )} +`; + +/** + * Display examples of all directions of a single UI arrow. + */ +export const UIArrowsTemplate = (args, context) => html` + ${IconListTemplate( + { + ...args, + setName: "ui", + }, + context, + [ + "ArrowRight100", + "ArrowLeft100", + "ArrowDown100", + "ArrowUp100", + ] + )} +`; + +/** + * Display examples of multiple UI icons. + */ +export const UIDefaultTemplate = (args, context) => html` +
+ ${IconListTemplate( + { + ...args, + setName: "ui", + }, + context, + [ + "Asterisk100", + "Asterisk200", + "Asterisk300", + ] + )} +
+
+ ${IconListTemplate( + { + ...args, + setName: "ui", + }, + context, + [ + "ChevronDown50", + "ChevronDown75", + "ChevronDown100", + "ChevronDown200", + "ChevronDown300", + "ChevronDown400", + ] + )} +
+`; diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js index d4219af7974..2ba609a3416 100644 --- a/components/icon/stories/utilities.js +++ b/components/icon/stories/utilities.js @@ -1,44 +1,192 @@ -// Imports an array of all icon names in the workflow set -import iconOpts from "@adobe/spectrum-css-workflow-icons"; +// Import arrays containing data with all icon names in both icon sets. +import workflowIconOpts from "@adobe/spectrum-css-workflow-icons/dist/manifest.json"; +import uiIconOpts from "@spectrum-css/ui-icons/dist/icons.json"; -export const workflowIcons = (iconOpts || []).map((icon) => - icon.replace(/\.svg$/, "") +/** + * Clean workflow icon name to strip out unnecessary prefix and postfix text. + * Also removes file extension if present. + * Example: "S2_Icon_AlertCircle_20_N" becomes "AlertCircle" + * + * @param {string} iconName + * @returns {string} + */ +export const cleanWorkflowIconName = (iconName) => ( + iconName.replace(/\.svg$/, "").replace(/^S2_Icon_/, "").replace(/_N$/, "").replace(/_20$/, "") +); + +/** + * Clean UI icon name to remove file extension and any unnecessary text. + * + * @param {string} iconName + * @returns {string} + */ +export const cleanUiIconName = (iconName) => ( + iconName.replace(/\.svg$/, "") ); /** - * UI Icons have specific sizes represented by a number. - * Each size has its own individual file and a CSS class with defined dimensions. - */ -export const uiIconSizes = { - "Arrow": ["75","100","200","300","400","500","600"], - "Asterisk": ["75","100","200","300"], - "Checkmark": ["50","75","100","200","300","400","500","600"], - "Chevron": ["50","75","100","200","300","400","500"], - "CornerTriangle": ["75","100","200","300"], - "Cross": ["75","100","200","300","400","500","600"], - "Dash": ["50","75","100","200","300","400","500","600"], - "SingleGripper": [], - "DoubleGripper": [], - "TripleGripper": [], + * Get the ID of the icon within the sprite sheet. + * + * The sprite sheets are single SVG files containing all of the icons in the set, each with a + * unique ID. The ID can then be used to display the icon elsewhere by referencing the ID + * within an SVG element. + * + * Example of the format of IDs within the different sprite sheets: + * ui ID: #spectrum-css-icon-alert-triangle + * workflow ID: #icon-spectrum-css-icon-Arrow100 + * + * @param {string} iconName Icon name (original or cleaned). + * @param {string} setName Icon set. + * @returns {string} Icon name with original file name prefix and postfix added. + */ +export const getSpriteSheetName = (iconName, setName) => { + if (setName == "ui") { + return "spectrum-css-icon-" + iconName; + } + else if (setName == "workflow") { + // Use cleaned name, without file name prefix/postfix. + let iconID = cleanWorkflowIconName(iconName); + + // These regexes convert camel case or pascal case strings into kebab-case: + // ------- + // Matches a lowercase letter or digit followed by an uppercase letter and inserts a hyphen between them. + // E.g. "AddCircle" becomes "Add-Circle". + // Digits are included in the first grouping because of the exception of "3D" being "3-d" in the IDs. + iconID = iconID.replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2"); + + // Matches an uppercase sequence followed by an uppercase letter with a lowercase letter. + // Replacing this separately helps prevent uppercase acronyms like CC and CCW from being split up by dashes. + iconID = iconID.replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2"); + // ------- + + // Underscores become dashes. + iconID = iconID.replace("_", "-"); + + // All IDs begin with this prefix and are lowercase. + iconID = "icon-" + iconID.toLowerCase(); + + return iconID; + } + else { + console.error("setSpriteSheetName received an invalid setName and could not create the ID."); + return ""; + } }; /** - * List of UI icon names, corresponding to files. + * Sorted array with all the SVG workflow icon names, cleaned to remove file extension and + * unnecessary prefix and postfix text. These might look something like "3DAsset". + * + * Excludes 22x20 icons, which currently do not match workflow icon sizing. + */ +export const workflowIconsCleaned = (workflowIconOpts?.svg ?? []) + .filter(iconName => !iconName.includes("22x20")) + .map(iconName => cleanWorkflowIconName(iconName)) + .sort(alphaNumericSort); + +/** + * Sorted array with all UI icon names, without the file extension. + */ +export const uiIconsCleaned = (uiIconOpts || []) + .map(iconName => cleanUiIconName(iconName)) + .sort(alphaNumericSort); + +/** + * @description A custom alpha-numeric sort that helps keep the order of the sizing numbers at the end of the string. + * @param {string} a + * @param {string} b + * @returns {number} */ -export const uiIcons = Object.keys(uiIconSizes); +function alphaNumericSort(a, b) { + const aSet = a.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i); + const bSet = b.match(/^([a-zA-Z]+)([0-9]+)(\.svg)?$/i); + + // Handle cases where match fails + if (!aSet || !bSet) return 0; + + // Compare characters at start of string (case-insensitive) + const aChar = aSet[1].toLowerCase(); + const bChar = bSet[1].toLowerCase(); + if (aChar !== bChar) return aChar > bChar ? 1 : -1; + + // Compare numbers at end of string + const aInt = parseInt(aSet[2]); + const bInt = parseInt(bSet[2]); + return aInt - bInt; +} /** - * List of all UI icon names for CSS. Chevron and Arrow have directional suffixes + * Array of all UI icon names for CSS. Chevron and Arrow have directional suffixes * for rotating the same base icon, e.g. Arrow becomes ArrowRight, ArrowDown, etc. + * + * @param {string[]} uiIcons Array of icon names. + * @returns {string[]} */ -export const uiIconsWithDirections = [ - ...uiIcons.filter((c) => !["Chevron", "Arrow"].includes(c)), - "ArrowRight", - "ArrowLeft", - "ArrowUp", - "ArrowDown", - "ChevronRight", - "ChevronLeft", - "ChevronUp", - "ChevronDown", +export const getUiIconsWithDirections = (uiIcons) => [ + ...uiIcons.filter((c) => !["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Right$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Left$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Up$2")), + ...uiIcons.filter((c) => ["Chevron", "Arrow"].some(prefix => c.startsWith(prefix))).map(i => i.replace(/(Chevron|Arrow)(\d{2,3})/, "$1Down$2")), +].sort(alphaNumericSort); + +/** + * Array of all cleaned UI icon names for CSS. Including sizing numbers and directional suffixes. + */ +export const uiIconsWithDirections = getUiIconsWithDirections(uiIconsCleaned); + +/** + * Array of all unique base UI icon names without their sizing numbers. + */ +export const getUniqueUiIconBaseNames = (uiIcons) => [ + ...new Set(uiIcons.map(ui => ui.replace(/\d{2,3}$/, ""))) ]; + +/** + * Array of all base UI icon names (without sizing numbers) for CSS (including directional suffixes). + */ +export const uniqueUiIconBaseNames = getUniqueUiIconBaseNames(uiIconsWithDirections); + +/** + * Workflow icon sizes. Does not apply to UI icons. Note: XXL is not part of the design + * spec and may be deprecated in the future. + */ +export const workflowSizes = ["xs", "s", "m", "l", "xl", "xxl"]; + +/** + * Create an object where the key is the UI icon name, and the value is an array of + * strings with every sizing number available. + * + * Returns something like the following: + * { + * "Arrow": ['100', '400'], + * "Asterisk": ['100', '200', '300'], + * ... + * } + * + * @param {string[]} uiIcons Array of all UI icon names. + * @returns {object} + */ +export const getUiIconSizes = (uiIcons) => { + let uiIconSizes = {}; + + uiIcons.forEach(iconName => { + // UI icon name without the sizing number at the end. + const iconNameRoot = iconName.replace(/\d{2,3}$/, ""); + + // Sizing number at the end of the icon name (e.g. "100"). + const iconNameSize = iconName.match(/\d{2,3}/g)?.[0]; + + // Add to object (with no duplicates). + uiIconSizes[iconNameRoot] = [ + ...new Set([ + ...uiIconSizes[iconNameRoot] ?? [], + ...(iconNameSize ? [iconNameSize] : []), + ]) + ]; + }); + + return uiIconSizes; +}; + +export const uiIconSizes = getUiIconSizes(uiIconsWithDirections); diff --git a/components/icon/ui-icons.css b/components/icon/ui-icons.css index ce39d50ea8c..000c6671d44 100644 --- a/components/icon/ui-icons.css +++ b/components/icon/ui-icons.css @@ -11,22 +11,6 @@ * governing permissions and limitations under the License. */ -/* - * Medium/large scale - * ------------------ - * In the "combined" versiom of the UI Icon SVGs, the medium and the large icons are - * contained within the same SVG. The two separate elements are shown or hidden based - * on the current platform scale. - */ - -.spectrum-UIIcon--medium { - display: var(--mod-ui-icon-medium-display, var(--spectrum-ui-icon-medium-display, block)); -} - -.spectrum-UIIcon--large { - display: var(--mod-ui-icon-large-display, var(--spectrum-ui-icon-large-display, none)); -} - /* * UI icons list * ------------- diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json index c48a50c6389..c6fca862ee9 100644 --- a/components/infieldprogresscircle/package.json +++ b/components/infieldprogresscircle/package.json @@ -28,7 +28,7 @@ "@spectrum-css/tokens": ">=16" }, "devDependencies": { - "@spectrum-css/tokens": "16.0.0" + "@spectrum-css/tokens": "16.0.1" }, "keywords": [ "design-system", diff --git a/ui-icons/README.md b/ui-icons/README.md index afdce5c3e84..61fa8d297a8 100644 --- a/ui-icons/README.md +++ b/ui-icons/README.md @@ -16,15 +16,78 @@ yarn add -DW @spectrum-css/ui-icons ### SVGs -SVGs are available in the `dist` directory. They are organized by size. The `dist` directory contains the following: +SVGs are available in the `dist` directory The `dist` directory contains the following: -- `medium`: assets to be used in desktop display formats -- `large`: assets to be used in mobile display formats -- `combined`: assets to be used in products requiring both desktop and mobile display icons to swap quickly or be used in parallel +- `svg`: a folder containing all raw icon SVGs - `spectrum-css-icons.svg`: a single sprite sheet containing all icons -- `spectrum-css-icons-medium.svg`: a single sprite sheet for medium icons -- `spectrum-css-icons-large.svg`: a single sprite sheet for large icons +- `icons.json`: a list of all SVG files available in the `svg` folder ### CSS CSS for the icons is available from the `@spectrum-css/icon` package. See the [Icon documentation](../components/icon/README.md) for more information. + +## Updating icons + +Icons are available from an internal repository that is available only to Adobe employees. If you are an employee with access, follow the steps below: + +1. `yarn npm login --scope a4u` to authenticate with the internal repository +2. `yarn workspace @spectrum-css/ui-icons add -D @a4u/a4u-s2-ui-icon-global-set@1.7.1` to install the latest version of the internal repository (replace `1.7.1` with the latest version available) +3. **Do not commit** the updated `ui-icons/package.json` with the new version of `@a4u/a4u-s2-ui-icon-global-set` as this blocks non-Adobe employees from installing and using the repository. + +Once your environment is ready, you can run `rm -rf ui-icons/dist/svg && yarn builder ui-icons`. Expect to see the updated SVG assets populate in your `ui-icons/dist/svg` folder, an updated `icons.json` that should accurately reflect what files are in the `svg` folder, and an updated `spectrum-css-icons.svg` spritesheet containing the updated content from the new assets. + +## Migrating from v1.x icons to v2.x + +Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons. + +| Icon name | Migration notes | +| ----------------- | --------------- | +| Arrow75 | Deprecated | +| Arrow100 | - | +| Arrow200 | Deprecated | +| Arrow300 | Deprecated | +| Arrow400 | - | +| Arrow500 | Deprecated | +| Arrow600 | Deprecated | +| Asterisk75 | Deprecated | +| Asterisk100 | - | +| Asterisk200 | - | +| Asterisk300 | - | +| Checkmark50 | - | +| Checkmark75 | - | +| Checkmark100 | - | +| Checkmark200 | - | +| Checkmark300 | - | +| Checkmark400 | - | +| Checkmark500 | Deprecated | +| Checkmark600 | Deprecated | +| Chevron50 | - | +| Chevron75 | - | +| Chevron100 | - | +| Chevron200 | - | +| Chevron300 | - | +| Chevron400 | - | +| Chevron500 | Deprecated | +| Chevron600 | Deprecated | +| CornerTriangle75 | - | +| CornerTriangle100 | - | +| CornerTriangle200 | - | +| CornerTriangle300 | - | +| Cross75 | - | +| Cross100 | - | +| Cross200 | - | +| Cross300 | - | +| Cross400 | - | +| Cross500 | - | +| Cross600 | - | +| Dash50 | - | +| Dash75 | - | +| Dash100 | - | +| Dash200 | - | +| Dash300 | - | +| Dash400 | Deprecated | +| Dash500 | Deprecated | +| Dash600 | Deprecated | +| SingleGripper | Deprecated | +| DoubleGripper | Deprecated | +| TripleGripper | Deprecated | diff --git a/ui-icons/dist/icons.json b/ui-icons/dist/icons.json new file mode 100644 index 00000000000..0d41c66f2c5 --- /dev/null +++ b/ui-icons/dist/icons.json @@ -0,0 +1,35 @@ +[ + "Arrow100.svg", + "Arrow400.svg", + "Asterisk100.svg", + "Asterisk200.svg", + "Asterisk300.svg", + "Checkmark50.svg", + "Checkmark75.svg", + "Checkmark100.svg", + "Checkmark200.svg", + "Checkmark300.svg", + "Checkmark400.svg", + "Chevron50.svg", + "Chevron75.svg", + "Chevron100.svg", + "Chevron200.svg", + "Chevron300.svg", + "Chevron400.svg", + "CornerTriangle75.svg", + "CornerTriangle100.svg", + "CornerTriangle200.svg", + "CornerTriangle300.svg", + "Cross75.svg", + "Cross100.svg", + "Cross200.svg", + "Cross300.svg", + "Cross400.svg", + "Cross500.svg", + "Cross600.svg", + "Dash50.svg", + "Dash75.svg", + "Dash100.svg", + "Dash200.svg", + "Dash300.svg" +] \ No newline at end of file diff --git a/ui-icons/dist/spectrum-css-icons.svg b/ui-icons/dist/spectrum-css-icons.svg new file mode 100644 index 00000000000..fe7a6df5107 --- /dev/null +++ b/ui-icons/dist/spectrum-css-icons.svg @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui-icons/dist/svg/Arrow100.svg b/ui-icons/dist/svg/Arrow100.svg new file mode 100644 index 00000000000..a6c433499cd --- /dev/null +++ b/ui-icons/dist/svg/Arrow100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Arrow400.svg b/ui-icons/dist/svg/Arrow400.svg new file mode 100644 index 00000000000..af171ce0e68 --- /dev/null +++ b/ui-icons/dist/svg/Arrow400.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Asterisk100.svg b/ui-icons/dist/svg/Asterisk100.svg new file mode 100644 index 00000000000..af668563976 --- /dev/null +++ b/ui-icons/dist/svg/Asterisk100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Asterisk200.svg b/ui-icons/dist/svg/Asterisk200.svg new file mode 100644 index 00000000000..91754591db9 --- /dev/null +++ b/ui-icons/dist/svg/Asterisk200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Asterisk300.svg b/ui-icons/dist/svg/Asterisk300.svg new file mode 100644 index 00000000000..3cbd7e379f5 --- /dev/null +++ b/ui-icons/dist/svg/Asterisk300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark100.svg b/ui-icons/dist/svg/Checkmark100.svg new file mode 100644 index 00000000000..6d082e8f7f3 --- /dev/null +++ b/ui-icons/dist/svg/Checkmark100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark200.svg b/ui-icons/dist/svg/Checkmark200.svg new file mode 100644 index 00000000000..8aae373b1c5 --- /dev/null +++ b/ui-icons/dist/svg/Checkmark200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark300.svg b/ui-icons/dist/svg/Checkmark300.svg new file mode 100644 index 00000000000..bdcc9296de7 --- /dev/null +++ b/ui-icons/dist/svg/Checkmark300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark400.svg b/ui-icons/dist/svg/Checkmark400.svg new file mode 100644 index 00000000000..9400f42a2a3 --- /dev/null +++ b/ui-icons/dist/svg/Checkmark400.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark50.svg b/ui-icons/dist/svg/Checkmark50.svg new file mode 100644 index 00000000000..704b869ecce --- /dev/null +++ b/ui-icons/dist/svg/Checkmark50.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Checkmark75.svg b/ui-icons/dist/svg/Checkmark75.svg new file mode 100644 index 00000000000..9b0c902d8a2 --- /dev/null +++ b/ui-icons/dist/svg/Checkmark75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron100.svg b/ui-icons/dist/svg/Chevron100.svg new file mode 100644 index 00000000000..5edaf03b675 --- /dev/null +++ b/ui-icons/dist/svg/Chevron100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron200.svg b/ui-icons/dist/svg/Chevron200.svg new file mode 100644 index 00000000000..f6f23faf52c --- /dev/null +++ b/ui-icons/dist/svg/Chevron200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron300.svg b/ui-icons/dist/svg/Chevron300.svg new file mode 100644 index 00000000000..06ad2ade3f5 --- /dev/null +++ b/ui-icons/dist/svg/Chevron300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron400.svg b/ui-icons/dist/svg/Chevron400.svg new file mode 100644 index 00000000000..f8a01dbcabb --- /dev/null +++ b/ui-icons/dist/svg/Chevron400.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron50.svg b/ui-icons/dist/svg/Chevron50.svg new file mode 100644 index 00000000000..6c80a8c3080 --- /dev/null +++ b/ui-icons/dist/svg/Chevron50.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Chevron75.svg b/ui-icons/dist/svg/Chevron75.svg new file mode 100644 index 00000000000..1913da9f1cd --- /dev/null +++ b/ui-icons/dist/svg/Chevron75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/CornerTriangle100.svg b/ui-icons/dist/svg/CornerTriangle100.svg new file mode 100644 index 00000000000..8b45d75972a --- /dev/null +++ b/ui-icons/dist/svg/CornerTriangle100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/CornerTriangle200.svg b/ui-icons/dist/svg/CornerTriangle200.svg new file mode 100644 index 00000000000..73f555eeb10 --- /dev/null +++ b/ui-icons/dist/svg/CornerTriangle200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/CornerTriangle300.svg b/ui-icons/dist/svg/CornerTriangle300.svg new file mode 100644 index 00000000000..f3e396f8d19 --- /dev/null +++ b/ui-icons/dist/svg/CornerTriangle300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/CornerTriangle75.svg b/ui-icons/dist/svg/CornerTriangle75.svg new file mode 100644 index 00000000000..adc2a60646c --- /dev/null +++ b/ui-icons/dist/svg/CornerTriangle75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross100.svg b/ui-icons/dist/svg/Cross100.svg new file mode 100644 index 00000000000..c29d221fd64 --- /dev/null +++ b/ui-icons/dist/svg/Cross100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross200.svg b/ui-icons/dist/svg/Cross200.svg new file mode 100644 index 00000000000..303de9df8d4 --- /dev/null +++ b/ui-icons/dist/svg/Cross200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross300.svg b/ui-icons/dist/svg/Cross300.svg new file mode 100644 index 00000000000..cf60cae4390 --- /dev/null +++ b/ui-icons/dist/svg/Cross300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross400.svg b/ui-icons/dist/svg/Cross400.svg new file mode 100644 index 00000000000..17ae1b7cae5 --- /dev/null +++ b/ui-icons/dist/svg/Cross400.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross500.svg b/ui-icons/dist/svg/Cross500.svg new file mode 100644 index 00000000000..e315377ec13 --- /dev/null +++ b/ui-icons/dist/svg/Cross500.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross600.svg b/ui-icons/dist/svg/Cross600.svg new file mode 100644 index 00000000000..ac09b6343ca --- /dev/null +++ b/ui-icons/dist/svg/Cross600.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Cross75.svg b/ui-icons/dist/svg/Cross75.svg new file mode 100644 index 00000000000..e13a110f942 --- /dev/null +++ b/ui-icons/dist/svg/Cross75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Dash100.svg b/ui-icons/dist/svg/Dash100.svg new file mode 100644 index 00000000000..b999e39178a --- /dev/null +++ b/ui-icons/dist/svg/Dash100.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Dash200.svg b/ui-icons/dist/svg/Dash200.svg new file mode 100644 index 00000000000..ad1fb7fd198 --- /dev/null +++ b/ui-icons/dist/svg/Dash200.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Dash300.svg b/ui-icons/dist/svg/Dash300.svg new file mode 100644 index 00000000000..088990ab145 --- /dev/null +++ b/ui-icons/dist/svg/Dash300.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Dash50.svg b/ui-icons/dist/svg/Dash50.svg new file mode 100644 index 00000000000..3a364e588a1 --- /dev/null +++ b/ui-icons/dist/svg/Dash50.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/dist/svg/Dash75.svg b/ui-icons/dist/svg/Dash75.svg new file mode 100644 index 00000000000..c0df96d142b --- /dev/null +++ b/ui-icons/dist/svg/Dash75.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui-icons/index.js b/ui-icons/index.js index 884926f2215..b1eb8257727 100644 --- a/ui-icons/index.js +++ b/ui-icons/index.js @@ -1,118 +1,169 @@ -const fs = require('fs'); +const fs = require("fs"); const fsp = fs.promises; -const path = require('path'); - -const fg = require('fast-glob'); -const { optimize } = require('svgo'); -const combine = require('svgcombiner'); -const svgstore = require('svgstore'); - -async function setupIconStores() { - const stores = new Map(); - stores.set('all', svgstore()); - - for (const variant of await fg(['*'], { - cwd: __dirname, - ignore: ['dist', 'node_modules'], - onlyDirectories: true, - })) { - stores.set(variant, svgstore()); - } - - return stores; -} - -async function main() { - // Not using svgo's loadConfig because it doesn't support dynamic config files - const getSvgoConfig = require('./svgo.config.js'); - - // Hash to hold all icons arranged by processed name - const icons = new Map(); - const stores = await setupIconStores(); - const variants = [...stores.keys()].filter((key) => key !== 'all'); - - const files = await fg([`{${variants.join(',')}}/*.svg`], { - cwd: __dirname, - onlyFiles: true, - }); - - const promises = []; - for (const file of files) { - const assetName = path.basename(file, '.svg'); - - // Capture metadata about the icon from the path and filename - const variant = path.dirname(file); - - // Read in the SVG contents - const contents = await fsp.readFile(file, 'utf-8'); - const result = optimize(contents, getSvgoConfig({ clean: true })); +const path = require("path"); - icons.set(assetName, { - ...(icons.has(assetName) ? icons.get(assetName) : {}), - [variant]: result.data, - }); +const fg = require("fast-glob"); +const { optimize } = require("svgo"); - stores.get(variant).add(assetName, result.data); +const svgstore = require("svgstore"); - const dest = path.join(__dirname, 'dist', file); - if (!fs.existsSync(path.dirname(dest))) { - fs.mkdirSync(path.dirname(dest), { recursive: true }); - } +// Not using svgo's loadConfig because it doesn't support dynamic config files +const getSvgoConfig = require("./svgo.config.js"); - promises.push(fsp.writeFile(dest, result.data)); - } +/** + * @description Clean the file name + */ +const cleanFileName = (file) => { + return file.replace(/^S2_/, "").replace(/Size/, ""); +}; - // Wait for all the SVG content to be read in and processed before continuing - await Promise.all(promises); +/** + * @description Process the SVG assets using svgo config settings + */ +async function processSVG(filePath, destPath) { + if (!fs.existsSync(filePath)) return; - if (icons.size === 0) return; + // Read in the SVG contents + const contents = await fsp.readFile(filePath, "utf-8"); + const result = optimize(contents, getSvgoConfig({ + clean: true + })); - // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols - promises.length = 0; - [...icons.entries()].map(([iconName, data]) => { - // Combine the SVG variants into a single SVG file with multiple symbols - const contents = combine(iconName, data); + if (!result?.data) return; - // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons - stores.get('all').add(iconName, contents); + const assetName = cleanFileName(path.basename(filePath, ".svg")); - // Write the combined SVG to the dist folder - const destPath = path.join(__dirname, 'dist/combined'); - if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true }); - - promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data)); - }); - - // Finally, we write out the stores to disk - for (const [identifier, store] of stores.entries()) { - const isFullSet = identifier === 'all'; - const filename = isFullSet ? 'spectrum-css-icons' : `spectrum-css-icons-${identifier}`; - const dest = path.join(__dirname, `dist/${filename}.svg`); - const config = getSvgoConfig( - isFullSet - ? { - idPrefix: 'spectrum-css-icon', - removeViewBox: true, - } - : {}, - ); - - const result = optimize(store.toString(), config); + return fsp.writeFile(path.join(destPath, `${assetName}.svg`), result.data); +} - if (!result?.data) continue; +/** + * @description Attempts to fetch icon assets from their source + */ +async function copySVGs() { + let source; + + // workflow icons: @a4u/a4u-s2-icon-global-set-open-source-processed + try { + source = require.resolve("@a4u/a4u-s2-ui-icon-global-set", { + paths: [process.cwd(), path.join(__dirname, ".."), "~/"] + }); + } + catch (e) { /* empty */ } + + if (!source) return Promise.resolve(); + + const sourcePath = path.join(path.dirname(source), "assets"); + if (!fs.existsSync(sourcePath)) return Promise.resolve(); + + const files = await fg(["svg/*.svg"], { + cwd: sourcePath, + onlyFiles: true, + }); + + if (!files || files.length === 0) return Promise.resolve(); + + const outputPath = path.join(__dirname, "dist", "svg"); + + if (fs.existsSync(outputPath)) { + // Remove existing assets to replace them fully with the new ones + fs.rmdirSync(outputPath, { + force: true, + recursive: true + }); + } + + // Recreate the folder to store the new assets + await fsp.mkdir(outputPath, { + force: true, + recursive: true + }); + + return Promise.all( + files.map(file => + processSVG( + path.join(sourcePath, file), + outputPath + ) + ) + ); +} - promises.push(fsp.writeFile(dest, result?.data)); - } +/** + * @description A custom alpha-numeric sort + * @param {string} a + * @param {string} b + * @returns number + */ +function alphaNumericSort (a, b) { + const aSet = a.match(/^([a-z]+)([0-9]+)\.svg$/i); + const bSet = b.match(/^([a-z]+)([0-9]+)\.svg$/i); + const aChar = aSet[1]; + const bChar = bSet[1]; + + if (aChar !== bChar) return aChar > bChar ? 1 : -1; + + const aInt = parseInt(aSet[2] ?? 0); + const bInt = parseInt(bSet[2] ?? 0); + return aInt - bInt; +} - return Promise.all(promises); +async function main() { + // This can only be run by an Adobe employee on the VPN with appropriate access configured on their machine + await copySVGs(); + + // Hash to hold all icons arranged by processed name + const icons = []; + const store = svgstore(); + + const files = await fg(["*.svg"], { + cwd: path.join(__dirname, "dist", "svg"), + onlyFiles: true, + }); + + if (!files || files.length === 0) { + return Promise.resolve("No assets detected."); + } + + /** Sorting here controls the order in which entries are added to the store + * such that they print in the same order every time; preventing unnecessary diffs */ + for (const file of files.sort(alphaNumericSort)) { + const assetName = path.basename(file, ".svg"); + if (icons.includes(`${assetName}.svg`)) { + // eslint-disable-next-line no-console + console.log(`⚠️ The icon set already includes an icon with the name ${assetName}.`); + } + else icons.push(`${assetName}.svg`); + + const content = await fsp.readFile(path.join(__dirname, "dist", "svg", file), { encoding: "utf-8" }); + store.add(assetName, content); + } + + // Write the icon array to icons.json as a resource + await fsp.writeFile(path.join(__dirname, "dist", "icons.json"), JSON.stringify(icons.sort(alphaNumericSort), null, 2)); + + // Finally, we write out the store to disk + const dest = path.join(__dirname, "dist", "spectrum-css-icons.svg"); + const config = getSvgoConfig({ + idPrefix: "spectrum-css-icon", + removeViewBox: true, + }); + + const result = optimize(store.toString(), config); + + if (!result?.data) { + return Promise.reject("Encountered an error optimizing SVG assets via svgo."); + } + + return fsp.writeFile(dest, result?.data); } main() - .then(() => { - console.log('✔ Icons generated successfully.'); - process.exit(0); - }) - .catch((e) => { - console.error(e); - process.exit(1); - }); + .then(() => { + // eslint-disable-next-line no-console + console.log("✔ Icons generated successfully."); + process.exit(0); + }) + .catch((e) => { + console.error(e); + process.exit(1); + }); diff --git a/ui-icons/large/Arrow100.svg b/ui-icons/large/Arrow100.svg deleted file mode 100644 index af57dc15a22..00000000000 --- a/ui-icons/large/Arrow100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow200.svg b/ui-icons/large/Arrow200.svg deleted file mode 100644 index 2dfdaf37f34..00000000000 --- a/ui-icons/large/Arrow200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow300.svg b/ui-icons/large/Arrow300.svg deleted file mode 100644 index 2aa666dc475..00000000000 --- a/ui-icons/large/Arrow300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow400.svg b/ui-icons/large/Arrow400.svg deleted file mode 100644 index 1865888c0cd..00000000000 --- a/ui-icons/large/Arrow400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow500.svg b/ui-icons/large/Arrow500.svg deleted file mode 100644 index 55eff2a8012..00000000000 --- a/ui-icons/large/Arrow500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow600.svg b/ui-icons/large/Arrow600.svg deleted file mode 100644 index 75875f95cb4..00000000000 --- a/ui-icons/large/Arrow600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Arrow75.svg b/ui-icons/large/Arrow75.svg deleted file mode 100644 index cd57bb6f4aa..00000000000 --- a/ui-icons/large/Arrow75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Asterisk100.svg b/ui-icons/large/Asterisk100.svg deleted file mode 100644 index 59a1913d101..00000000000 --- a/ui-icons/large/Asterisk100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Asterisk200.svg b/ui-icons/large/Asterisk200.svg deleted file mode 100644 index 220bc897bd2..00000000000 --- a/ui-icons/large/Asterisk200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Asterisk300.svg b/ui-icons/large/Asterisk300.svg deleted file mode 100644 index abcfe5ffd0a..00000000000 --- a/ui-icons/large/Asterisk300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Asterisk75.svg b/ui-icons/large/Asterisk75.svg deleted file mode 100644 index 78b3c2e2dae..00000000000 --- a/ui-icons/large/Asterisk75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark100.svg b/ui-icons/large/Checkmark100.svg deleted file mode 100644 index 8362be47127..00000000000 --- a/ui-icons/large/Checkmark100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark200.svg b/ui-icons/large/Checkmark200.svg deleted file mode 100644 index 6590d710091..00000000000 --- a/ui-icons/large/Checkmark200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark300.svg b/ui-icons/large/Checkmark300.svg deleted file mode 100644 index 828ea417ef2..00000000000 --- a/ui-icons/large/Checkmark300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark400.svg b/ui-icons/large/Checkmark400.svg deleted file mode 100644 index fb3dc577815..00000000000 --- a/ui-icons/large/Checkmark400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark50.svg b/ui-icons/large/Checkmark50.svg deleted file mode 100644 index 55a3cc89ebe..00000000000 --- a/ui-icons/large/Checkmark50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark500.svg b/ui-icons/large/Checkmark500.svg deleted file mode 100644 index ca7159ad57b..00000000000 --- a/ui-icons/large/Checkmark500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark600.svg b/ui-icons/large/Checkmark600.svg deleted file mode 100644 index 8f28aa1b749..00000000000 --- a/ui-icons/large/Checkmark600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Checkmark75.svg b/ui-icons/large/Checkmark75.svg deleted file mode 100644 index b226a795871..00000000000 --- a/ui-icons/large/Checkmark75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron100.svg b/ui-icons/large/Chevron100.svg deleted file mode 100644 index 94163168915..00000000000 --- a/ui-icons/large/Chevron100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron200.svg b/ui-icons/large/Chevron200.svg deleted file mode 100644 index fa8e741d02c..00000000000 --- a/ui-icons/large/Chevron200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron300.svg b/ui-icons/large/Chevron300.svg deleted file mode 100644 index c49fa8f4105..00000000000 --- a/ui-icons/large/Chevron300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron400.svg b/ui-icons/large/Chevron400.svg deleted file mode 100644 index cf80b230087..00000000000 --- a/ui-icons/large/Chevron400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron50.svg b/ui-icons/large/Chevron50.svg deleted file mode 100644 index b2a2f1fdc43..00000000000 --- a/ui-icons/large/Chevron50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron500.svg b/ui-icons/large/Chevron500.svg deleted file mode 100644 index c24637ac389..00000000000 --- a/ui-icons/large/Chevron500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron600.svg b/ui-icons/large/Chevron600.svg deleted file mode 100644 index da194a5abf0..00000000000 --- a/ui-icons/large/Chevron600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Chevron75.svg b/ui-icons/large/Chevron75.svg deleted file mode 100644 index 19492094489..00000000000 --- a/ui-icons/large/Chevron75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/CornerTriangle100.svg b/ui-icons/large/CornerTriangle100.svg deleted file mode 100644 index 9745b9304c3..00000000000 --- a/ui-icons/large/CornerTriangle100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/CornerTriangle200.svg b/ui-icons/large/CornerTriangle200.svg deleted file mode 100644 index 86459a673b1..00000000000 --- a/ui-icons/large/CornerTriangle200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/CornerTriangle300.svg b/ui-icons/large/CornerTriangle300.svg deleted file mode 100644 index e46b3d6e08f..00000000000 --- a/ui-icons/large/CornerTriangle300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/CornerTriangle75.svg b/ui-icons/large/CornerTriangle75.svg deleted file mode 100644 index 962b1ee438b..00000000000 --- a/ui-icons/large/CornerTriangle75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross100.svg b/ui-icons/large/Cross100.svg deleted file mode 100644 index b08715c9b54..00000000000 --- a/ui-icons/large/Cross100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross200.svg b/ui-icons/large/Cross200.svg deleted file mode 100644 index a309427b738..00000000000 --- a/ui-icons/large/Cross200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross300.svg b/ui-icons/large/Cross300.svg deleted file mode 100644 index fa3fe6f98f1..00000000000 --- a/ui-icons/large/Cross300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross400.svg b/ui-icons/large/Cross400.svg deleted file mode 100644 index b6c32b03c2b..00000000000 --- a/ui-icons/large/Cross400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross500.svg b/ui-icons/large/Cross500.svg deleted file mode 100644 index 1076c01970f..00000000000 --- a/ui-icons/large/Cross500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross600.svg b/ui-icons/large/Cross600.svg deleted file mode 100644 index a2e3795f99a..00000000000 --- a/ui-icons/large/Cross600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Cross75.svg b/ui-icons/large/Cross75.svg deleted file mode 100644 index 67a3001925b..00000000000 --- a/ui-icons/large/Cross75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash100.svg b/ui-icons/large/Dash100.svg deleted file mode 100644 index b40bda3dab9..00000000000 --- a/ui-icons/large/Dash100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash200.svg b/ui-icons/large/Dash200.svg deleted file mode 100644 index 69259fac867..00000000000 --- a/ui-icons/large/Dash200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash300.svg b/ui-icons/large/Dash300.svg deleted file mode 100644 index fa63bad3270..00000000000 --- a/ui-icons/large/Dash300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash400.svg b/ui-icons/large/Dash400.svg deleted file mode 100644 index 72be4059769..00000000000 --- a/ui-icons/large/Dash400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash50.svg b/ui-icons/large/Dash50.svg deleted file mode 100644 index 65e0175cc43..00000000000 --- a/ui-icons/large/Dash50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash500.svg b/ui-icons/large/Dash500.svg deleted file mode 100644 index 57dc24cda94..00000000000 --- a/ui-icons/large/Dash500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash600.svg b/ui-icons/large/Dash600.svg deleted file mode 100644 index fad36114e63..00000000000 --- a/ui-icons/large/Dash600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/Dash75.svg b/ui-icons/large/Dash75.svg deleted file mode 100644 index 912679537cd..00000000000 --- a/ui-icons/large/Dash75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/DoubleGripper.svg b/ui-icons/large/DoubleGripper.svg deleted file mode 100644 index 1e62891f452..00000000000 --- a/ui-icons/large/DoubleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/SingleGripper.svg b/ui-icons/large/SingleGripper.svg deleted file mode 100644 index b0a33483d1d..00000000000 --- a/ui-icons/large/SingleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/large/TripleGripper.svg b/ui-icons/large/TripleGripper.svg deleted file mode 100644 index 3e210b594a2..00000000000 --- a/ui-icons/large/TripleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow100.svg b/ui-icons/medium/Arrow100.svg deleted file mode 100644 index 2b30fae538c..00000000000 --- a/ui-icons/medium/Arrow100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow200.svg b/ui-icons/medium/Arrow200.svg deleted file mode 100644 index bde962d721d..00000000000 --- a/ui-icons/medium/Arrow200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow300.svg b/ui-icons/medium/Arrow300.svg deleted file mode 100644 index ee4594a47e1..00000000000 --- a/ui-icons/medium/Arrow300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow400.svg b/ui-icons/medium/Arrow400.svg deleted file mode 100644 index bff53b02f10..00000000000 --- a/ui-icons/medium/Arrow400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow500.svg b/ui-icons/medium/Arrow500.svg deleted file mode 100644 index 1796915a65f..00000000000 --- a/ui-icons/medium/Arrow500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow600.svg b/ui-icons/medium/Arrow600.svg deleted file mode 100644 index d4622580582..00000000000 --- a/ui-icons/medium/Arrow600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Arrow75.svg b/ui-icons/medium/Arrow75.svg deleted file mode 100644 index 183c46c860a..00000000000 --- a/ui-icons/medium/Arrow75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Asterisk100.svg b/ui-icons/medium/Asterisk100.svg deleted file mode 100644 index 76d5c197325..00000000000 --- a/ui-icons/medium/Asterisk100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Asterisk200.svg b/ui-icons/medium/Asterisk200.svg deleted file mode 100644 index 35cf824a4b6..00000000000 --- a/ui-icons/medium/Asterisk200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Asterisk300.svg b/ui-icons/medium/Asterisk300.svg deleted file mode 100644 index dff55914808..00000000000 --- a/ui-icons/medium/Asterisk300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Asterisk75.svg b/ui-icons/medium/Asterisk75.svg deleted file mode 100644 index 930207c2a4c..00000000000 --- a/ui-icons/medium/Asterisk75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark100.svg b/ui-icons/medium/Checkmark100.svg deleted file mode 100644 index 60c485ee421..00000000000 --- a/ui-icons/medium/Checkmark100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark200.svg b/ui-icons/medium/Checkmark200.svg deleted file mode 100644 index 9db3c8c6d42..00000000000 --- a/ui-icons/medium/Checkmark200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark300.svg b/ui-icons/medium/Checkmark300.svg deleted file mode 100644 index 8593cb115ae..00000000000 --- a/ui-icons/medium/Checkmark300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark400.svg b/ui-icons/medium/Checkmark400.svg deleted file mode 100644 index d4a2aaa04a5..00000000000 --- a/ui-icons/medium/Checkmark400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark50.svg b/ui-icons/medium/Checkmark50.svg deleted file mode 100644 index 669561df599..00000000000 --- a/ui-icons/medium/Checkmark50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark500.svg b/ui-icons/medium/Checkmark500.svg deleted file mode 100644 index 942ed316690..00000000000 --- a/ui-icons/medium/Checkmark500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark600.svg b/ui-icons/medium/Checkmark600.svg deleted file mode 100644 index dd6ca433451..00000000000 --- a/ui-icons/medium/Checkmark600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Checkmark75.svg b/ui-icons/medium/Checkmark75.svg deleted file mode 100644 index 7cc23280b88..00000000000 --- a/ui-icons/medium/Checkmark75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron100.svg b/ui-icons/medium/Chevron100.svg deleted file mode 100644 index 568ba88803e..00000000000 --- a/ui-icons/medium/Chevron100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron200.svg b/ui-icons/medium/Chevron200.svg deleted file mode 100644 index 11a5079b2ed..00000000000 --- a/ui-icons/medium/Chevron200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron300.svg b/ui-icons/medium/Chevron300.svg deleted file mode 100644 index 8103b8bd12e..00000000000 --- a/ui-icons/medium/Chevron300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron400.svg b/ui-icons/medium/Chevron400.svg deleted file mode 100644 index 7a055392c3c..00000000000 --- a/ui-icons/medium/Chevron400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron50.svg b/ui-icons/medium/Chevron50.svg deleted file mode 100644 index 1d5779da5f2..00000000000 --- a/ui-icons/medium/Chevron50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron500.svg b/ui-icons/medium/Chevron500.svg deleted file mode 100644 index 3827ddbd24f..00000000000 --- a/ui-icons/medium/Chevron500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron600.svg b/ui-icons/medium/Chevron600.svg deleted file mode 100644 index f5ebd21708b..00000000000 --- a/ui-icons/medium/Chevron600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Chevron75.svg b/ui-icons/medium/Chevron75.svg deleted file mode 100644 index b184588e717..00000000000 --- a/ui-icons/medium/Chevron75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/CornerTriangle100.svg b/ui-icons/medium/CornerTriangle100.svg deleted file mode 100644 index c4fb3062b88..00000000000 --- a/ui-icons/medium/CornerTriangle100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/CornerTriangle200.svg b/ui-icons/medium/CornerTriangle200.svg deleted file mode 100644 index 29d0238fe35..00000000000 --- a/ui-icons/medium/CornerTriangle200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/CornerTriangle300.svg b/ui-icons/medium/CornerTriangle300.svg deleted file mode 100644 index e059a8c2e6c..00000000000 --- a/ui-icons/medium/CornerTriangle300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/CornerTriangle75.svg b/ui-icons/medium/CornerTriangle75.svg deleted file mode 100644 index 47807fc2825..00000000000 --- a/ui-icons/medium/CornerTriangle75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross100.svg b/ui-icons/medium/Cross100.svg deleted file mode 100644 index 626c43fc23a..00000000000 --- a/ui-icons/medium/Cross100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross200.svg b/ui-icons/medium/Cross200.svg deleted file mode 100644 index ad3c3fcd95f..00000000000 --- a/ui-icons/medium/Cross200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross300.svg b/ui-icons/medium/Cross300.svg deleted file mode 100644 index 8783e10dd2b..00000000000 --- a/ui-icons/medium/Cross300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross400.svg b/ui-icons/medium/Cross400.svg deleted file mode 100644 index 9b3ada3811d..00000000000 --- a/ui-icons/medium/Cross400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross500.svg b/ui-icons/medium/Cross500.svg deleted file mode 100644 index 9e614cb933f..00000000000 --- a/ui-icons/medium/Cross500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross600.svg b/ui-icons/medium/Cross600.svg deleted file mode 100644 index 4a8f907b983..00000000000 --- a/ui-icons/medium/Cross600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Cross75.svg b/ui-icons/medium/Cross75.svg deleted file mode 100644 index 700cd425cd7..00000000000 --- a/ui-icons/medium/Cross75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash100.svg b/ui-icons/medium/Dash100.svg deleted file mode 100644 index 8f2cceb75d2..00000000000 --- a/ui-icons/medium/Dash100.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash200.svg b/ui-icons/medium/Dash200.svg deleted file mode 100644 index 779d610269d..00000000000 --- a/ui-icons/medium/Dash200.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash300.svg b/ui-icons/medium/Dash300.svg deleted file mode 100644 index bfeff0fe8be..00000000000 --- a/ui-icons/medium/Dash300.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash400.svg b/ui-icons/medium/Dash400.svg deleted file mode 100644 index 902e625ef4d..00000000000 --- a/ui-icons/medium/Dash400.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash50.svg b/ui-icons/medium/Dash50.svg deleted file mode 100644 index 5fd58663680..00000000000 --- a/ui-icons/medium/Dash50.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash500.svg b/ui-icons/medium/Dash500.svg deleted file mode 100644 index 76892e88455..00000000000 --- a/ui-icons/medium/Dash500.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash600.svg b/ui-icons/medium/Dash600.svg deleted file mode 100644 index 4b06d838c1e..00000000000 --- a/ui-icons/medium/Dash600.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/Dash75.svg b/ui-icons/medium/Dash75.svg deleted file mode 100644 index db730b85769..00000000000 --- a/ui-icons/medium/Dash75.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/DoubleGripper.svg b/ui-icons/medium/DoubleGripper.svg deleted file mode 100644 index 13d29945d5b..00000000000 --- a/ui-icons/medium/DoubleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/SingleGripper.svg b/ui-icons/medium/SingleGripper.svg deleted file mode 100644 index c64ca4942f4..00000000000 --- a/ui-icons/medium/SingleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/medium/TripleGripper.svg b/ui-icons/medium/TripleGripper.svg deleted file mode 100644 index 671757156c2..00000000000 --- a/ui-icons/medium/TripleGripper.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui-icons/package.json b/ui-icons/package.json index ade3fbaaf30..fd1f9ca0871 100644 --- a/ui-icons/package.json +++ b/ui-icons/package.json @@ -1,40 +1,36 @@ { - "name": "@spectrum-css/ui-icons", - "version": "1.1.2", - "description": "The Spectrum CSS UI icons", - "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": "ui-icons" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/spectrum-css-icons.svg", - "files": [ - "dist/combined", - "dist/large", - "dist/medium", - "dist/spectrum-css-icons-large.svg", - "dist/spectrum-css-icons-medium.svg" - ], - "devDependencies": { - "fast-glob": "^3.3.3", - "svgcombiner": "^1.0.1", - "svgo": "^3.3.2", - "svgstore": "^3.0.1" - }, - "keywords": [ - "design-system", - "spectrum", - "spectrum-css", - "adobe", - "adobe-spectrum" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/ui-icons", + "version": "1.1.2", + "description": "The Spectrum CSS UI icons", + "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": "ui-icons" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/spectrum-css-icons.svg", + "files": [ + "dist/icons.json", + "dist/svgs" + ], + "devDependencies": { + "fast-glob": "^3.3.3", + "svgo": "^3.3.2", + "svgstore": "^3.0.1" + }, + "keywords": [ + "design-system", + "spectrum", + "spectrum-css", + "adobe", + "adobe-spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/ui-icons/project.json b/ui-icons/project.json index ed61d56db0e..6f55512e21a 100644 --- a/ui-icons/project.json +++ b/ui-icons/project.json @@ -2,23 +2,19 @@ "name": "ui-icons", "tag": ["icons"], "namedInputs": { - "core": ["{projectRoot}/large/*.svg", "{projectRoot}/medium/*.svg"], + "core": ["{projectRoot}/svgs/*.svg"], "scripts": ["{projectRoot}/index.js"], "tools": ["{projectRoot}/svgo.config.js"] }, "targets": { "build": { + "dependsOn": ["^build"], "inputs": [ "core", "scripts", "tools", { - "externalDependencies": [ - "fast-glob", - "svgcombiner", - "svgo", - "svgstore" - ] + "externalDependencies": ["fast-glob", "svgo", "svgstore"] } ], "options": { @@ -26,12 +22,8 @@ "cwd": "{projectRoot}" }, "outputs": [ - "{projectRoot}/dist/combined", - "{projectRoot}/dist/large", - "{projectRoot}/dist/medium", - "{projectRoot}/dist/spectrum-css-icons.svg", - "{projectRoot}/dist/spectrum-css-icons-large.svg", - "{projectRoot}/dist/spectrum-css-icons-medium.svg" + "{projectRoot}/dist/svgs", + "{projectRoot}/dist/spectrum-css-icons.svg" ] }, "clean": { diff --git a/ui-icons/svgo.config.js b/ui-icons/svgo.config.js index 0f03bc85b01..2e24e71723c 100644 --- a/ui-icons/svgo.config.js +++ b/ui-icons/svgo.config.js @@ -1,46 +1,50 @@ module.exports = ({ - clean = false, - idPrefix = false, - classPrefix = 'spectrum-UIIcon', - removeViewBox = false, + clean = false, + idPrefix = false, + // classPrefix = "spectrum-UIIcon", + removeViewBox = false, } = {}) => ({ - multipass: true, - js2svg: { - indent: 2, - pretty: true, - }, - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - cleanupIds: clean, - removeDesc: false, - removeTitle: false, - removeViewBox, - removeHiddenElems: false, - removeUnusedNS: false, - }, - }, - }, - ...(clean ? [{ - name: 'removeAttrs', - params: { - attrs: ['class', 'data-name', 'id'], - }, - }] : []), - ...(idPrefix ? [{ - name: 'prefixIds', - params: { delim: '-', prefix: idPrefix, prefixClassNames: false }, - }] : []), - ...(classPrefix ? [{ - name: 'prefixIds', - params: { - delim: '--', - prefix: classPrefix, - prefixClassNames: true, - prefixIds: false, - }, - } ] : []), - ], + multipass: true, + js2svg: { + indent: 2, + pretty: true, + }, + plugins: [ + { + name: "preset-default", + params: { + overrides: { + cleanupIds: clean, + removeDesc: false, + removeTitle: false, + removeViewBox, + removeHiddenElems: false, + removeUnusedNS: false, + }, + }, + }, + ...(clean ? [{ + name: "removeAttrs", + params: { + attrs: ["class", "data-name", "id"], + }, + }] : []), + ...(idPrefix ? [{ + name: "prefixIds", + params: { delim: "-", prefix: idPrefix, prefixClassNames: false }, + }] : []), + { + name: "addClassesToSVGElement", + params: { + classNames: ["spectrum-UIIcon"] + } + }, + { + name: "sortAttrs", + params: { + order: ["id", "width", "height", "x", "x1", "x2", "y", "y1", "y2", "cx", "cy", "r", "fill", "stroke", "marker", "d", "points"], + xmlnsOrder: "front" + } + }, + ], }); diff --git a/yarn.lock b/yarn.lock index 9c3bea25997..edf9c075510 100644 --- a/yarn.lock +++ b/yarn.lock @@ -176,10 +176,10 @@ __metadata: languageName: unknown linkType: soft -"@adobe/spectrum-css-workflow-icons@npm:^1.5.4": - version: 1.5.4 - resolution: "@adobe/spectrum-css-workflow-icons@npm:1.5.4" - checksum: 10c0/6c76ec7f9eb8d64c93603d72b243a46e766f6b961811a37a7cc3b874452e48bb9d0efd13762448ab1f09f327813ce448292b2e7a9801c83b7666f58a79e9e1af +"@adobe/spectrum-css-workflow-icons@npm:^4.0.0": + version: 4.0.0 + resolution: "@adobe/spectrum-css-workflow-icons@npm:4.0.0" + checksum: 10c0/9fdfbd634a29a06fbfd1236fa15a17c283a1330d3cc7c61e52f6c85a0b4981894bd512d91f072339a8ed504b2da17755839792ce8dd767589d926ddde812e2ce languageName: node linkType: hard @@ -4754,7 +4754,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle" dependencies: - "@spectrum-css/tokens": "npm:16.0.0" + "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/tokens": ">=16" peerDependenciesMeta: @@ -5047,7 +5047,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/preview@workspace:.storybook" dependencies: - "@adobe/spectrum-css-workflow-icons": "npm:^1.5.4" + "@adobe/spectrum-css-workflow-icons": "npm:^4.0.0" "@babel/core": "npm:^7.26.0" "@chromatic-com/storybook": "npm:^3.2.3" "@etchteam/storybook-addon-status": "npm:^5.0.0" @@ -5592,7 +5592,6 @@ __metadata: resolution: "@spectrum-css/ui-icons@workspace:ui-icons" dependencies: fast-glob: "npm:^3.3.3" - svgcombiner: "npm:^1.0.1" svgo: "npm:^3.3.2" svgstore: "npm:^3.0.1" languageName: unknown @@ -8206,35 +8205,6 @@ __metadata: languageName: node linkType: hard -"cheerio-select@npm:^2.1.0": - version: 2.1.0 - resolution: "cheerio-select@npm:2.1.0" - dependencies: - boolbase: "npm:^1.0.0" - css-select: "npm:^5.1.0" - css-what: "npm:^6.1.0" - domelementtype: "npm:^2.3.0" - domhandler: "npm:^5.0.3" - domutils: "npm:^3.0.1" - checksum: 10c0/2242097e593919dba4aacb97d7b8275def8b9ec70b00aa1f43335456870cfc9e284eae2080bdc832ed232dabb9eefcf56c722d152da4a154813fb8814a55d282 - languageName: node - linkType: hard - -"cheerio@npm:^1.0.0-rc.2": - version: 1.0.0-rc.12 - resolution: "cheerio@npm:1.0.0-rc.12" - dependencies: - cheerio-select: "npm:^2.1.0" - dom-serializer: "npm:^2.0.0" - domhandler: "npm:^5.0.3" - domutils: "npm:^3.0.1" - htmlparser2: "npm:^8.0.1" - parse5: "npm:^7.0.0" - parse5-htmlparser2-tree-adapter: "npm:^7.0.0" - checksum: 10c0/c85d2f2461e3f024345b78e0bb16ad8e41492356210470dd1e7d5a91391da9fcf6c0a7cb48a9ba8820330153f0cedb4d0a60c7af15d96ecdb3092299b9d9c0cc - languageName: node - linkType: hard - "cheerio@npm:v1.0.0-rc.10": version: 1.0.0-rc.10 resolution: "cheerio@npm:1.0.0-rc.10" @@ -9960,7 +9930,7 @@ __metadata: languageName: node linkType: hard -"entities@npm:^4.2.0, entities@npm:^4.4.0": +"entities@npm:^4.2.0": version: 4.5.0 resolution: "entities@npm:4.5.0" checksum: 10c0/5b039739f7621f5d1ad996715e53d964035f75ad3b9a4d38c6b3804bb226e282ffeae2443624d8fdd9c47d8e926ae9ac009c54671243f0c3294c26af7cc85250 @@ -11958,18 +11928,6 @@ __metadata: languageName: node linkType: hard -"htmlparser2@npm:^8.0.1": - version: 8.0.2 - resolution: "htmlparser2@npm:8.0.2" - dependencies: - domelementtype: "npm:^2.3.0" - domhandler: "npm:^5.0.3" - domutils: "npm:^3.0.1" - entities: "npm:^4.4.0" - checksum: 10c0/609cca85886d0bf2c9a5db8c6926a89f3764596877492e2caa7a25a789af4065bc6ee2cdc81807fe6b1d03a87bf8a373b5a754528a4cc05146b713c20575aab4 - languageName: node - linkType: hard - "http-cache-semantics@npm:^4.1.1": version: 4.1.1 resolution: "http-cache-semantics@npm:4.1.1" @@ -16064,16 +16022,6 @@ __metadata: languageName: node linkType: hard -"parse5-htmlparser2-tree-adapter@npm:^7.0.0": - version: 7.0.0 - resolution: "parse5-htmlparser2-tree-adapter@npm:7.0.0" - dependencies: - domhandler: "npm:^5.0.2" - parse5: "npm:^7.0.0" - checksum: 10c0/e820cacb8486e6f7ede403327d18480df086d70e32ede2f6654d8c3a8b4b8dc4a4d5c21c03c18a92ba2466c513b93ca63be4a138dd73cd0995f384eb3b9edf11 - languageName: node - linkType: hard - "parse5@npm:^6.0.1": version: 6.0.1 resolution: "parse5@npm:6.0.1" @@ -16081,15 +16029,6 @@ __metadata: languageName: node linkType: hard -"parse5@npm:^7.0.0": - version: 7.1.2 - resolution: "parse5@npm:7.1.2" - dependencies: - entities: "npm:^4.4.0" - checksum: 10c0/297d7af8224f4b5cb7f6617ecdae98eeaed7f8cbd78956c42785e230505d5a4f07cef352af10d3006fa5c1544b76b57784d3a22d861ae071bbc460c649482bf4 - languageName: node - linkType: hard - "pascal-case@npm:^3.1.2": version: 3.1.2 resolution: "pascal-case@npm:3.1.2" @@ -19317,15 +19256,6 @@ __metadata: languageName: node linkType: hard -"svgcombiner@npm:^1.0.1": - version: 1.0.1 - resolution: "svgcombiner@npm:1.0.1" - dependencies: - cheerio: "npm:^1.0.0-rc.2" - checksum: 10c0/1258087f33723967aa7f74f9f2507cf0d254d9b56842bfa663f32ffe3cf6cb6ebbbd705945c938a7e01e4e1cf5753ea03ec78aedc1462220979f09955699324d - languageName: node - linkType: hard - "svgo@npm:^3.3.2": version: 3.3.2 resolution: "svgo@npm:3.3.2" From b537314e3467389b483fc67b46f41605743ab26f Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Fri, 21 Feb 2025 13:25:29 -0800 Subject: [PATCH 083/103] fix(combobox): corrects cases where open combobx stories and testing previews could overlap adjacent components (#3568) --- .storybook/decorators/context.js | 2 +- .../combobox/stories/combobox.stories.js | 10 + components/combobox/stories/combobox.test.js | 9 +- tools/bundle/package.json | 171 +++++---- tools/bundle/tasks/bundler.js | 7 +- yarn.lock | 341 +++++++++--------- 6 files changed, 278 insertions(+), 262 deletions(-) diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 7a736433855..7fa8a23062d 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,7 +1,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import tokens from "@spectrum-css/tokens/dist/index.css?inline"; +import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; /** * @type import('@storybook/csf').DecoratorFunction diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index baea4599d01..df57778d72d 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -171,6 +171,11 @@ DefaultGroup.args = Default.args; DefaultGroup.tags = ["!dev"]; DefaultGroup.parameters = { chromatic: { disableSnapshot: true }, + docs: { + story: { + height: "360px", + }, + }, }; export const QuietGroup = VariantGroup.bind({}); @@ -182,6 +187,11 @@ QuietGroup.args = { QuietGroup.tags = ["!dev"]; QuietGroup.parameters = { chromatic: { disableSnapshot: true }, + docs: { + story: { + height: "360px", + }, + }, }; /** diff --git a/components/combobox/stories/combobox.test.js b/components/combobox/stories/combobox.test.js index 5c7d94e7d44..b74a71a388b 100644 --- a/components/combobox/stories/combobox.test.js +++ b/components/combobox/stories/combobox.test.js @@ -4,9 +4,6 @@ import { Template } from "./template.js"; export const ComboBoxGroup = Variants({ Template, sizeDirection: "row", - wrapperStyles: { - "align-items": "flex-start", - }, testData: [ { testHeading: "Default", @@ -20,11 +17,17 @@ export const ComboBoxGroup = Variants({ { testHeading: "Open", isOpen: true, + wrapperStyles: { + "min-block-size": "250px", + }, }, { testHeading: "Quiet + open", isQuiet: true, isOpen: true, + wrapperStyles: { + "min-block-size": "250px", + }, }, { testHeading: "With field label top", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 069112b6bec..9c600c151ff 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -30,92 +30,91 @@ }, "main": "dist/index.css", "devDependencies": { - "@spectrum-css/accordion": "workspace:^", - "@spectrum-css/actionbar": "workspace:^", - "@spectrum-css/actionbutton": "workspace:^", - "@spectrum-css/actiongroup": "workspace:^", - "@spectrum-css/actionmenu": "workspace:^", - "@spectrum-css/alertbanner": "workspace:^", - "@spectrum-css/alertdialog": "workspace:^", - "@spectrum-css/asset": "workspace:^", - "@spectrum-css/assetcard": "workspace:^", - "@spectrum-css/assetlist": "workspace:^", - "@spectrum-css/avatar": "workspace:^", - "@spectrum-css/badge": "workspace:^", - "@spectrum-css/breadcrumb": "workspace:^", - "@spectrum-css/button": "workspace:^", - "@spectrum-css/buttongroup": "workspace:^", - "@spectrum-css/calendar": "workspace:^", - "@spectrum-css/card": "workspace:^", - "@spectrum-css/checkbox": "workspace:^", - "@spectrum-css/clearbutton": "workspace:^", - "@spectrum-css/closebutton": "workspace:^", - "@spectrum-css/coachindicator": "workspace:^", - "@spectrum-css/coachmark": "workspace:^", - "@spectrum-css/colorarea": "workspace:^", - "@spectrum-css/colorhandle": "workspace:^", - "@spectrum-css/colorloupe": "workspace:^", - "@spectrum-css/colorslider": "workspace:^", - "@spectrum-css/colorwheel": "workspace:^", - "@spectrum-css/combobox": "workspace:^", - "@spectrum-css/commons": "workspace:^", - "@spectrum-css/contextualhelp": "workspace:^", - "@spectrum-css/datepicker": "workspace:^", - "@spectrum-css/dial": "workspace:^", - "@spectrum-css/dialog": "workspace:^", - "@spectrum-css/divider": "workspace:^", - "@spectrum-css/dropindicator": "workspace:^", - "@spectrum-css/dropzone": "workspace:^", - "@spectrum-css/fieldgroup": "workspace:^", - "@spectrum-css/fieldlabel": "workspace:^", - "@spectrum-css/floatingactionbutton": "workspace:^", - "@spectrum-css/form": "workspace:^", - "@spectrum-css/helptext": "workspace:^", - "@spectrum-css/icon": "workspace:^", - "@spectrum-css/illustratedmessage": "workspace:^", - "@spectrum-css/infieldbutton": "workspace:^", - "@spectrum-css/infieldprogresscircle": "workspace:^", - "@spectrum-css/inlinealert": "workspace:^", - "@spectrum-css/link": "workspace:^", - "@spectrum-css/logicbutton": "workspace:^", - "@spectrum-css/menu": "workspace:^", - "@spectrum-css/meter": "workspace:^", - "@spectrum-css/miller": "workspace:^", - "@spectrum-css/modal": "workspace:^", - "@spectrum-css/opacitycheckerboard": "workspace:^", - "@spectrum-css/page": "workspace:^", - "@spectrum-css/pagination": "workspace:^", - "@spectrum-css/picker": "workspace:^", - "@spectrum-css/pickerbutton": "workspace:^", - "@spectrum-css/popover": "workspace:^", - "@spectrum-css/progressbar": "workspace:^", - "@spectrum-css/progresscircle": "workspace:^", - "@spectrum-css/radio": "workspace:^", - "@spectrum-css/rating": "workspace:^", - "@spectrum-css/search": "workspace:^", - "@spectrum-css/sidenav": "workspace:^", - "@spectrum-css/slider": "workspace:^", - "@spectrum-css/splitview": "workspace:^", - "@spectrum-css/statuslight": "workspace:^", - "@spectrum-css/steplist": "workspace:^", - "@spectrum-css/stepper": "workspace:^", - "@spectrum-css/swatch": "workspace:^", - "@spectrum-css/swatchgroup": "workspace:^", - "@spectrum-css/switch": "workspace:^", - "@spectrum-css/table": "workspace:^", - "@spectrum-css/tabs": "workspace:^", - "@spectrum-css/tag": "workspace:^", - "@spectrum-css/taggroup": "workspace:^", - "@spectrum-css/textfield": "workspace:^", - "@spectrum-css/thumbnail": "workspace:^", - "@spectrum-css/toast": "workspace:^", - "@spectrum-css/tokens": "workspace:^", - "@spectrum-css/tooltip": "workspace:^", - "@spectrum-css/tray": "workspace:^", - "@spectrum-css/treeview": "workspace:^", - "@spectrum-css/typography": "workspace:^", - "@spectrum-css/underlay": "workspace:^", - "@spectrum-css/well": "workspace:^", + "@spectrum-css/accordion": "7.1.0", + "@spectrum-css/actionbar": "10.1.1", + "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actiongroup": "6.1.0", + "@spectrum-css/actionmenu": "7.1.1", + "@spectrum-css/alertbanner": "3.1.0", + "@spectrum-css/alertdialog": "4.1.0", + "@spectrum-css/asset": "7.1.0", + "@spectrum-css/assetcard": "5.1.0", + "@spectrum-css/assetlist": "8.1.0", + "@spectrum-css/avatar": "9.1.0", + "@spectrum-css/badge": "6.1.0", + "@spectrum-css/breadcrumb": "11.1.0", + "@spectrum-css/button": "14.1.1", + "@spectrum-css/buttongroup": "9.1.0", + "@spectrum-css/calendar": "7.1.0", + "@spectrum-css/card": "11.1.0", + "@spectrum-css/checkbox": "10.1.0", + "@spectrum-css/clearbutton": "7.1.0", + "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/coachindicator": "4.1.0", + "@spectrum-css/coachmark": "9.1.1", + "@spectrum-css/colorarea": "7.1.0", + "@spectrum-css/colorhandle": "10.1.0", + "@spectrum-css/colorloupe": "7.1.0", + "@spectrum-css/colorslider": "8.1.0", + "@spectrum-css/colorwheel": "6.1.0", + "@spectrum-css/combobox": "4.1.1", + "@spectrum-css/commons": "11.0.0", + "@spectrum-css/contextualhelp": "5.1.2", + "@spectrum-css/datepicker": "4.1.1", + "@spectrum-css/dial": "5.1.0", + "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/divider": "5.1.0", + "@spectrum-css/dropindicator": "7.1.0", + "@spectrum-css/dropzone": "8.1.0", + "@spectrum-css/fieldgroup": "7.1.0", + "@spectrum-css/fieldlabel": "10.1.0", + "@spectrum-css/floatingactionbutton": "4.1.0", + "@spectrum-css/form": "1.1.0", + "@spectrum-css/helptext": "7.1.0", + "@spectrum-css/icon": "9.1.0", + "@spectrum-css/illustratedmessage": "9.1.0", + "@spectrum-css/infieldbutton": "6.1.0", + "@spectrum-css/infieldprogresscircle": "0.0.0", + "@spectrum-css/inlinealert": "10.1.0", + "@spectrum-css/link": "7.1.0", + "@spectrum-css/logicbutton": "6.1.0", + "@spectrum-css/menu": "9.1.0", + "@spectrum-css/meter": "1.1.0", + "@spectrum-css/miller": "8.1.0", + "@spectrum-css/modal": "7.1.0", + "@spectrum-css/opacitycheckerboard": "4.1.0", + "@spectrum-css/page": "9.1.0", + "@spectrum-css/pagination": "10.1.0", + "@spectrum-css/picker": "9.1.1", + "@spectrum-css/pickerbutton": "6.1.1", + "@spectrum-css/popover": "8.2.0", + "@spectrum-css/progressbar": "6.1.0", + "@spectrum-css/progresscircle": "5.1.0", + "@spectrum-css/radio": "10.1.0", + "@spectrum-css/rating": "6.1.0", + "@spectrum-css/search": "8.1.0", + "@spectrum-css/sidenav": "7.1.0", + "@spectrum-css/slider": "6.1.0", + "@spectrum-css/splitview": "7.1.0", + "@spectrum-css/statuslight": "9.1.0", + "@spectrum-css/steplist": "7.1.0", + "@spectrum-css/stepper": "7.1.0", + "@spectrum-css/swatch": "8.1.0", + "@spectrum-css/swatchgroup": "5.1.0", + "@spectrum-css/switch": "6.1.0", + "@spectrum-css/table": "8.1.0", + "@spectrum-css/tabs": "6.1.1", + "@spectrum-css/tag": "10.1.0", + "@spectrum-css/taggroup": "7.1.0", + "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/thumbnail": "8.1.0", + "@spectrum-css/toast": "11.1.0", + "@spectrum-css/tooltip": "7.1.0", + "@spectrum-css/tray": "5.1.0", + "@spectrum-css/treeview": "12.1.0", + "@spectrum-css/typography": "8.1.0", + "@spectrum-css/underlay": "6.1.0", + "@spectrum-css/well": "7.1.0", "colors": "^1.4.0", "postcss": "^8.5.3", "postcss-licensing": "^2.0.0" diff --git a/tools/bundle/tasks/bundler.js b/tools/bundle/tasks/bundler.js index 5f2786a5a29..0ae22936d59 100644 --- a/tools/bundle/tasks/bundler.js +++ b/tools/bundle/tasks/bundler.js @@ -29,7 +29,9 @@ const bundleRoot = path.resolve(dirs.root, "tools", "bundle"); * @returns {Promise} */ async function validateDependencies(components) { + // This is the bundle's package.json const localPackage = path.join(bundleRoot, "package.json"); + // Confirm the dependencies listed in this package.json match the components in the components directory const packageJSON = JSON.parse(fs.readFileSync(localPackage, "utf8")); @@ -51,8 +53,11 @@ async function validateDependencies(components) { // Update the package.json dependencies missing.forEach((dependency) => { + // Fetch the package.json for the component to get the version + const componentPackage = JSON.parse(fs.readFileSync(path.join(dirs.components, dependency, "package.json"), "utf8")); + reports.push(`${"+".green} ${`@spectrum-css/${dependency} to package.json`.gray}`); - packageJSON.devDependencies[`@spectrum-css/${dependency}`] = "workspace:^"; + packageJSON.devDependencies[`@spectrum-css/${dependency}`] = componentPackage?.version ?? "workspace:^"; }); } diff --git a/yarn.lock b/yarn.lock index edf9c075510..31b331e0fc6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3704,7 +3704,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/accordion@workspace:^, @spectrum-css/accordion@workspace:components/accordion": +"@spectrum-css/accordion@npm:7.1.0, @spectrum-css/accordion@workspace:components/accordion": version: 0.0.0-use.local resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: @@ -3721,7 +3721,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionbar@workspace:^, @spectrum-css/actionbar@workspace:components/actionbar": +"@spectrum-css/actionbar@npm:10.1.1, @spectrum-css/actionbar@workspace:components/actionbar": version: 0.0.0-use.local resolution: "@spectrum-css/actionbar@workspace:components/actionbar" dependencies: @@ -3750,7 +3750,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionbutton@npm:7.1.1, @spectrum-css/actionbutton@workspace:^, @spectrum-css/actionbutton@workspace:components/actionbutton": +"@spectrum-css/actionbutton@npm:7.1.1, @spectrum-css/actionbutton@workspace:components/actionbutton": version: 0.0.0-use.local resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton" dependencies: @@ -3768,7 +3768,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actiongroup@npm:6.1.0, @spectrum-css/actiongroup@workspace:^, @spectrum-css/actiongroup@workspace:components/actiongroup": +"@spectrum-css/actiongroup@npm:6.1.0, @spectrum-css/actiongroup@workspace:components/actiongroup": version: 0.0.0-use.local resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: @@ -3785,7 +3785,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionmenu@npm:7.1.1, @spectrum-css/actionmenu@workspace:^, @spectrum-css/actionmenu@workspace:components/actionmenu": +"@spectrum-css/actionmenu@npm:7.1.1, @spectrum-css/actionmenu@workspace:components/actionmenu": version: 0.0.0-use.local resolution: "@spectrum-css/actionmenu@workspace:components/actionmenu" dependencies: @@ -3814,7 +3814,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertbanner@workspace:^, @spectrum-css/alertbanner@workspace:components/alertbanner": +"@spectrum-css/alertbanner@npm:3.1.0, @spectrum-css/alertbanner@workspace:components/alertbanner": version: 0.0.0-use.local resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: @@ -3843,7 +3843,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertdialog@npm:4.1.0, @spectrum-css/alertdialog@workspace:^, @spectrum-css/alertdialog@workspace:components/alertdialog": +"@spectrum-css/alertdialog@npm:4.1.0, @spectrum-css/alertdialog@workspace:components/alertdialog": version: 0.0.0-use.local resolution: "@spectrum-css/alertdialog@workspace:components/alertdialog" dependencies: @@ -3876,7 +3876,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/asset@npm:7.1.0, @spectrum-css/asset@workspace:^, @spectrum-css/asset@workspace:components/asset": +"@spectrum-css/asset@npm:7.1.0, @spectrum-css/asset@workspace:components/asset": version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" dependencies: @@ -3889,7 +3889,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetcard@workspace:^, @spectrum-css/assetcard@workspace:components/assetcard": +"@spectrum-css/assetcard@npm:5.1.0, @spectrum-css/assetcard@workspace:components/assetcard": version: 0.0.0-use.local resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: @@ -3906,7 +3906,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetlist@npm:8.1.0, @spectrum-css/assetlist@workspace:^, @spectrum-css/assetlist@workspace:components/assetlist": +"@spectrum-css/assetlist@npm:8.1.0, @spectrum-css/assetlist@workspace:components/assetlist": version: 0.0.0-use.local resolution: "@spectrum-css/assetlist@workspace:components/assetlist" dependencies: @@ -3927,7 +3927,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/avatar@npm:9.1.0, @spectrum-css/avatar@workspace:^, @spectrum-css/avatar@workspace:components/avatar": +"@spectrum-css/avatar@npm:9.1.0, @spectrum-css/avatar@workspace:components/avatar": version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" dependencies: @@ -3940,7 +3940,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/badge@workspace:^, @spectrum-css/badge@workspace:components/badge": +"@spectrum-css/badge@npm:6.1.0, @spectrum-css/badge@workspace:components/badge": version: 0.0.0-use.local resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: @@ -3957,7 +3957,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/breadcrumb@workspace:^, @spectrum-css/breadcrumb@workspace:components/breadcrumb": +"@spectrum-css/breadcrumb@npm:11.1.0, @spectrum-css/breadcrumb@workspace:components/breadcrumb": version: 0.0.0-use.local resolution: "@spectrum-css/breadcrumb@workspace:components/breadcrumb" dependencies: @@ -3982,99 +3982,98 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/bundle@workspace:tools/bundle" dependencies: - "@spectrum-css/accordion": "workspace:^" - "@spectrum-css/actionbar": "workspace:^" - "@spectrum-css/actionbutton": "workspace:^" - "@spectrum-css/actiongroup": "workspace:^" - "@spectrum-css/actionmenu": "workspace:^" - "@spectrum-css/alertbanner": "workspace:^" - "@spectrum-css/alertdialog": "workspace:^" - "@spectrum-css/asset": "workspace:^" - "@spectrum-css/assetcard": "workspace:^" - "@spectrum-css/assetlist": "workspace:^" - "@spectrum-css/avatar": "workspace:^" - "@spectrum-css/badge": "workspace:^" - "@spectrum-css/breadcrumb": "workspace:^" - "@spectrum-css/button": "workspace:^" - "@spectrum-css/buttongroup": "workspace:^" - "@spectrum-css/calendar": "workspace:^" - "@spectrum-css/card": "workspace:^" - "@spectrum-css/checkbox": "workspace:^" - "@spectrum-css/clearbutton": "workspace:^" - "@spectrum-css/closebutton": "workspace:^" - "@spectrum-css/coachindicator": "workspace:^" - "@spectrum-css/coachmark": "workspace:^" - "@spectrum-css/colorarea": "workspace:^" - "@spectrum-css/colorhandle": "workspace:^" - "@spectrum-css/colorloupe": "workspace:^" - "@spectrum-css/colorslider": "workspace:^" - "@spectrum-css/colorwheel": "workspace:^" - "@spectrum-css/combobox": "workspace:^" - "@spectrum-css/commons": "workspace:^" - "@spectrum-css/contextualhelp": "workspace:^" - "@spectrum-css/datepicker": "workspace:^" - "@spectrum-css/dial": "workspace:^" - "@spectrum-css/dialog": "workspace:^" - "@spectrum-css/divider": "workspace:^" - "@spectrum-css/dropindicator": "workspace:^" - "@spectrum-css/dropzone": "workspace:^" - "@spectrum-css/fieldgroup": "workspace:^" - "@spectrum-css/fieldlabel": "workspace:^" - "@spectrum-css/floatingactionbutton": "workspace:^" - "@spectrum-css/form": "workspace:^" - "@spectrum-css/helptext": "workspace:^" - "@spectrum-css/icon": "workspace:^" - "@spectrum-css/illustratedmessage": "workspace:^" - "@spectrum-css/infieldbutton": "workspace:^" - "@spectrum-css/infieldprogresscircle": "workspace:^" - "@spectrum-css/inlinealert": "workspace:^" - "@spectrum-css/link": "workspace:^" - "@spectrum-css/logicbutton": "workspace:^" - "@spectrum-css/menu": "workspace:^" - "@spectrum-css/meter": "workspace:^" - "@spectrum-css/miller": "workspace:^" - "@spectrum-css/modal": "workspace:^" - "@spectrum-css/opacitycheckerboard": "workspace:^" - "@spectrum-css/page": "workspace:^" - "@spectrum-css/pagination": "workspace:^" - "@spectrum-css/picker": "workspace:^" - "@spectrum-css/pickerbutton": "workspace:^" - "@spectrum-css/popover": "workspace:^" - "@spectrum-css/progressbar": "workspace:^" - "@spectrum-css/progresscircle": "workspace:^" - "@spectrum-css/radio": "workspace:^" - "@spectrum-css/rating": "workspace:^" - "@spectrum-css/search": "workspace:^" - "@spectrum-css/sidenav": "workspace:^" - "@spectrum-css/slider": "workspace:^" - "@spectrum-css/splitview": "workspace:^" - "@spectrum-css/statuslight": "workspace:^" - "@spectrum-css/steplist": "workspace:^" - "@spectrum-css/stepper": "workspace:^" - "@spectrum-css/swatch": "workspace:^" - "@spectrum-css/swatchgroup": "workspace:^" - "@spectrum-css/switch": "workspace:^" - "@spectrum-css/table": "workspace:^" - "@spectrum-css/tabs": "workspace:^" - "@spectrum-css/tag": "workspace:^" - "@spectrum-css/taggroup": "workspace:^" - "@spectrum-css/textfield": "workspace:^" - "@spectrum-css/thumbnail": "workspace:^" - "@spectrum-css/toast": "workspace:^" - "@spectrum-css/tokens": "workspace:^" - "@spectrum-css/tooltip": "workspace:^" - "@spectrum-css/tray": "workspace:^" - "@spectrum-css/treeview": "workspace:^" - "@spectrum-css/typography": "workspace:^" - "@spectrum-css/underlay": "workspace:^" - "@spectrum-css/well": "workspace:^" + "@spectrum-css/accordion": "npm:7.1.0" + "@spectrum-css/actionbar": "npm:10.1.1" + "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actiongroup": "npm:6.1.0" + "@spectrum-css/actionmenu": "npm:7.1.1" + "@spectrum-css/alertbanner": "npm:3.1.0" + "@spectrum-css/alertdialog": "npm:4.1.0" + "@spectrum-css/asset": "npm:7.1.0" + "@spectrum-css/assetcard": "npm:5.1.0" + "@spectrum-css/assetlist": "npm:8.1.0" + "@spectrum-css/avatar": "npm:9.1.0" + "@spectrum-css/badge": "npm:6.1.0" + "@spectrum-css/breadcrumb": "npm:11.1.0" + "@spectrum-css/button": "npm:14.1.1" + "@spectrum-css/buttongroup": "npm:9.1.0" + "@spectrum-css/calendar": "npm:7.1.0" + "@spectrum-css/card": "npm:11.1.0" + "@spectrum-css/checkbox": "npm:10.1.0" + "@spectrum-css/clearbutton": "npm:7.1.0" + "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/coachindicator": "npm:4.1.0" + "@spectrum-css/coachmark": "npm:9.1.1" + "@spectrum-css/colorarea": "npm:7.1.0" + "@spectrum-css/colorhandle": "npm:10.1.0" + "@spectrum-css/colorloupe": "npm:7.1.0" + "@spectrum-css/colorslider": "npm:8.1.0" + "@spectrum-css/colorwheel": "npm:6.1.0" + "@spectrum-css/combobox": "npm:4.1.1" + "@spectrum-css/commons": "npm:11.0.0" + "@spectrum-css/contextualhelp": "npm:5.1.2" + "@spectrum-css/datepicker": "npm:4.1.1" + "@spectrum-css/dial": "npm:5.1.0" + "@spectrum-css/dialog": "npm:12.1.0" + "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/dropindicator": "npm:7.1.0" + "@spectrum-css/dropzone": "npm:8.1.0" + "@spectrum-css/fieldgroup": "npm:7.1.0" + "@spectrum-css/fieldlabel": "npm:10.1.0" + "@spectrum-css/floatingactionbutton": "npm:4.1.0" + "@spectrum-css/form": "npm:1.1.0" + "@spectrum-css/helptext": "npm:7.1.0" + "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/illustratedmessage": "npm:9.1.0" + "@spectrum-css/infieldbutton": "npm:6.1.0" + "@spectrum-css/infieldprogresscircle": "npm:0.0.0" + "@spectrum-css/inlinealert": "npm:10.1.0" + "@spectrum-css/link": "npm:7.1.0" + "@spectrum-css/logicbutton": "npm:6.1.0" + "@spectrum-css/menu": "npm:9.1.0" + "@spectrum-css/meter": "npm:1.1.0" + "@spectrum-css/miller": "npm:8.1.0" + "@spectrum-css/modal": "npm:7.1.0" + "@spectrum-css/opacitycheckerboard": "npm:4.1.0" + "@spectrum-css/page": "npm:9.1.0" + "@spectrum-css/pagination": "npm:10.1.0" + "@spectrum-css/picker": "npm:9.1.1" + "@spectrum-css/pickerbutton": "npm:6.1.1" + "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/progressbar": "npm:6.1.0" + "@spectrum-css/progresscircle": "npm:5.1.0" + "@spectrum-css/radio": "npm:10.1.0" + "@spectrum-css/rating": "npm:6.1.0" + "@spectrum-css/search": "npm:8.1.0" + "@spectrum-css/sidenav": "npm:7.1.0" + "@spectrum-css/slider": "npm:6.1.0" + "@spectrum-css/splitview": "npm:7.1.0" + "@spectrum-css/statuslight": "npm:9.1.0" + "@spectrum-css/steplist": "npm:7.1.0" + "@spectrum-css/stepper": "npm:7.1.0" + "@spectrum-css/swatch": "npm:8.1.0" + "@spectrum-css/swatchgroup": "npm:5.1.0" + "@spectrum-css/switch": "npm:6.1.0" + "@spectrum-css/table": "npm:8.1.0" + "@spectrum-css/tabs": "npm:6.1.1" + "@spectrum-css/tag": "npm:10.1.0" + "@spectrum-css/taggroup": "npm:7.1.0" + "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/thumbnail": "npm:8.1.0" + "@spectrum-css/toast": "npm:11.1.0" + "@spectrum-css/tooltip": "npm:7.1.0" + "@spectrum-css/tray": "npm:5.1.0" + "@spectrum-css/treeview": "npm:12.1.0" + "@spectrum-css/typography": "npm:8.1.0" + "@spectrum-css/underlay": "npm:6.1.0" + "@spectrum-css/well": "npm:7.1.0" colors: "npm:^1.4.0" postcss: "npm:^8.5.3" postcss-licensing: "npm:^2.0.0" languageName: unknown linkType: soft -"@spectrum-css/button@npm:14.1.1, @spectrum-css/button@workspace:^, @spectrum-css/button@workspace:components/button": +"@spectrum-css/button@npm:14.1.1, @spectrum-css/button@workspace:components/button": version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" dependencies: @@ -4096,7 +4095,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/buttongroup@npm:9.1.0, @spectrum-css/buttongroup@workspace:^, @spectrum-css/buttongroup@workspace:components/buttongroup": +"@spectrum-css/buttongroup@npm:9.1.0, @spectrum-css/buttongroup@workspace:components/buttongroup": version: 0.0.0-use.local resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: @@ -4113,7 +4112,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/calendar@npm:7.1.0, @spectrum-css/calendar@workspace:^, @spectrum-css/calendar@workspace:components/calendar": +"@spectrum-css/calendar@npm:7.1.0, @spectrum-css/calendar@workspace:components/calendar": version: 0.0.0-use.local resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: @@ -4130,7 +4129,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/card@workspace:^, @spectrum-css/card@workspace:components/card": +"@spectrum-css/card@npm:11.1.0, @spectrum-css/card@workspace:components/card": version: 0.0.0-use.local resolution: "@spectrum-css/card@workspace:components/card" dependencies: @@ -4166,7 +4165,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/checkbox@npm:10.1.0, @spectrum-css/checkbox@workspace:^, @spectrum-css/checkbox@workspace:components/checkbox": +"@spectrum-css/checkbox@npm:10.1.0, @spectrum-css/checkbox@workspace:components/checkbox": version: 0.0.0-use.local resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: @@ -4183,7 +4182,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/clearbutton@npm:7.1.0, @spectrum-css/clearbutton@workspace:^, @spectrum-css/clearbutton@workspace:components/clearbutton": +"@spectrum-css/clearbutton@npm:7.1.0, @spectrum-css/clearbutton@workspace:components/clearbutton": version: 0.0.0-use.local resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: @@ -4215,7 +4214,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/closebutton@workspace:^, @spectrum-css/closebutton@workspace:components/closebutton": +"@spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: @@ -4233,7 +4232,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/coachindicator@workspace:^, @spectrum-css/coachindicator@workspace:components/coachindicator": +"@spectrum-css/coachindicator@npm:4.1.0, @spectrum-css/coachindicator@workspace:components/coachindicator": version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" dependencies: @@ -4246,7 +4245,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/coachmark@workspace:^, @spectrum-css/coachmark@workspace:components/coachmark": +"@spectrum-css/coachmark@npm:9.1.1, @spectrum-css/coachmark@workspace:components/coachmark": version: 0.0.0-use.local resolution: "@spectrum-css/coachmark@workspace:components/coachmark" dependencies: @@ -4283,7 +4282,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorarea@npm:7.1.0, @spectrum-css/colorarea@workspace:^, @spectrum-css/colorarea@workspace:components/colorarea": +"@spectrum-css/colorarea@npm:7.1.0, @spectrum-css/colorarea@workspace:components/colorarea": version: 0.0.0-use.local resolution: "@spectrum-css/colorarea@workspace:components/colorarea" dependencies: @@ -4300,7 +4299,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorhandle@npm:10.1.0, @spectrum-css/colorhandle@workspace:^, @spectrum-css/colorhandle@workspace:components/colorhandle": +"@spectrum-css/colorhandle@npm:10.1.0, @spectrum-css/colorhandle@workspace:components/colorhandle": version: 0.0.0-use.local resolution: "@spectrum-css/colorhandle@workspace:components/colorhandle" dependencies: @@ -4321,7 +4320,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorloupe@npm:7.1.0, @spectrum-css/colorloupe@workspace:^, @spectrum-css/colorloupe@workspace:components/colorloupe": +"@spectrum-css/colorloupe@npm:7.1.0, @spectrum-css/colorloupe@workspace:components/colorloupe": version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" dependencies: @@ -4334,7 +4333,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorslider@workspace:^, @spectrum-css/colorslider@workspace:components/colorslider": +"@spectrum-css/colorslider@npm:8.1.0, @spectrum-css/colorslider@workspace:components/colorslider": version: 0.0.0-use.local resolution: "@spectrum-css/colorslider@workspace:components/colorslider" dependencies: @@ -4355,7 +4354,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorwheel@workspace:^, @spectrum-css/colorwheel@workspace:components/colorwheel": +"@spectrum-css/colorwheel@npm:6.1.0, @spectrum-css/colorwheel@workspace:components/colorwheel": version: 0.0.0-use.local resolution: "@spectrum-css/colorwheel@workspace:components/colorwheel" dependencies: @@ -4380,7 +4379,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/combobox@workspace:^, @spectrum-css/combobox@workspace:components/combobox": +"@spectrum-css/combobox@npm:4.1.1, @spectrum-css/combobox@workspace:components/combobox": version: 0.0.0-use.local resolution: "@spectrum-css/combobox@workspace:components/combobox" dependencies: @@ -4413,7 +4412,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:^, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:11.0.0, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" dependencies: @@ -4423,7 +4422,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/contextualhelp@workspace:^, @spectrum-css/contextualhelp@workspace:components/contextualhelp": +"@spectrum-css/contextualhelp@npm:5.1.2, @spectrum-css/contextualhelp@workspace:components/contextualhelp": version: 0.0.0-use.local resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp" dependencies: @@ -4448,7 +4447,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/datepicker@workspace:^, @spectrum-css/datepicker@workspace:components/datepicker": +"@spectrum-css/datepicker@npm:4.1.1, @spectrum-css/datepicker@workspace:components/datepicker": version: 0.0.0-use.local resolution: "@spectrum-css/datepicker@workspace:components/datepicker" dependencies: @@ -4477,7 +4476,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dial@workspace:^, @spectrum-css/dial@workspace:components/dial": +"@spectrum-css/dial@npm:5.1.0, @spectrum-css/dial@workspace:components/dial": version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" dependencies: @@ -4514,7 +4513,7 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/dialog@workspace:^, @spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: @@ -4552,7 +4551,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/divider@npm:5.1.0, @spectrum-css/divider@workspace:^, @spectrum-css/divider@workspace:components/divider": +"@spectrum-css/divider@npm:5.1.0, @spectrum-css/divider@workspace:components/divider": version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: @@ -4565,7 +4564,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropindicator@workspace:^, @spectrum-css/dropindicator@workspace:components/dropindicator": +"@spectrum-css/dropindicator@npm:7.1.0, @spectrum-css/dropindicator@workspace:components/dropindicator": version: 0.0.0-use.local resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: @@ -4582,7 +4581,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropzone@workspace:^, @spectrum-css/dropzone@workspace:components/dropzone": +"@spectrum-css/dropzone@npm:8.1.0, @spectrum-css/dropzone@workspace:components/dropzone": version: 0.0.0-use.local resolution: "@spectrum-css/dropzone@workspace:components/dropzone" dependencies: @@ -4607,7 +4606,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/fieldgroup@workspace:^, @spectrum-css/fieldgroup@workspace:components/fieldgroup": +"@spectrum-css/fieldgroup@npm:7.1.0, @spectrum-css/fieldgroup@workspace:components/fieldgroup": version: 0.0.0-use.local resolution: "@spectrum-css/fieldgroup@workspace:components/fieldgroup" dependencies: @@ -4632,7 +4631,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/fieldlabel@npm:10.1.0, @spectrum-css/fieldlabel@workspace:^, @spectrum-css/fieldlabel@workspace:components/fieldlabel": +"@spectrum-css/fieldlabel@npm:10.1.0, @spectrum-css/fieldlabel@workspace:components/fieldlabel": version: 0.0.0-use.local resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: @@ -4649,7 +4648,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/floatingactionbutton@workspace:^, @spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton": +"@spectrum-css/floatingactionbutton@npm:4.1.0, @spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton": version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" dependencies: @@ -4662,7 +4661,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/form@workspace:^, @spectrum-css/form@workspace:components/form": +"@spectrum-css/form@npm:1.1.0, @spectrum-css/form@workspace:components/form": version: 0.0.0-use.local resolution: "@spectrum-css/form@workspace:components/form" dependencies: @@ -4686,7 +4685,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/helptext@npm:7.1.0, @spectrum-css/helptext@workspace:^, @spectrum-css/helptext@workspace:components/helptext": +"@spectrum-css/helptext@npm:7.1.0, @spectrum-css/helptext@workspace:components/helptext": version: 0.0.0-use.local resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: @@ -4703,7 +4702,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/icon@npm:9.1.0, @spectrum-css/icon@workspace:^, @spectrum-css/icon@workspace:components/icon": +"@spectrum-css/icon@npm:9.1.0, @spectrum-css/icon@workspace:components/icon": version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: @@ -4716,7 +4715,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/illustratedmessage@npm:9.1.0, @spectrum-css/illustratedmessage@workspace:^, @spectrum-css/illustratedmessage@workspace:components/illustratedmessage": +"@spectrum-css/illustratedmessage@npm:9.1.0, @spectrum-css/illustratedmessage@workspace:components/illustratedmessage": version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" dependencies: @@ -4733,7 +4732,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/infieldbutton@npm:6.1.0, @spectrum-css/infieldbutton@workspace:^, @spectrum-css/infieldbutton@workspace:components/infieldbutton": +"@spectrum-css/infieldbutton@npm:6.1.0, @spectrum-css/infieldbutton@workspace:components/infieldbutton": version: 0.0.0-use.local resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: @@ -4750,7 +4749,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/infieldprogresscircle@workspace:^, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": +"@spectrum-css/infieldprogresscircle@npm:0.0.0, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": version: 0.0.0-use.local resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle" dependencies: @@ -4763,7 +4762,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/inlinealert@workspace:^, @spectrum-css/inlinealert@workspace:components/inlinealert": +"@spectrum-css/inlinealert@npm:10.1.0, @spectrum-css/inlinealert@workspace:components/inlinealert": version: 0.0.0-use.local resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert" dependencies: @@ -4784,7 +4783,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/link@npm:7.1.0, @spectrum-css/link@workspace:^, @spectrum-css/link@workspace:components/link": +"@spectrum-css/link@npm:7.1.0, @spectrum-css/link@workspace:components/link": version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: @@ -4797,7 +4796,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/logicbutton@workspace:^, @spectrum-css/logicbutton@workspace:components/logicbutton": +"@spectrum-css/logicbutton@npm:6.1.0, @spectrum-css/logicbutton@workspace:components/logicbutton": version: 0.0.0-use.local resolution: "@spectrum-css/logicbutton@workspace:components/logicbutton" dependencies: @@ -4811,7 +4810,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/menu@npm:9.1.0, @spectrum-css/menu@workspace:^, @spectrum-css/menu@workspace:components/menu": +"@spectrum-css/menu@npm:9.1.0, @spectrum-css/menu@workspace:components/menu": version: 0.0.0-use.local resolution: "@spectrum-css/menu@workspace:components/menu" dependencies: @@ -4844,7 +4843,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/meter@workspace:^, @spectrum-css/meter@workspace:components/meter": +"@spectrum-css/meter@npm:1.1.0, @spectrum-css/meter@workspace:components/meter": version: 0.0.0-use.local resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: @@ -4861,7 +4860,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/miller@workspace:^, @spectrum-css/miller@workspace:components/miller": +"@spectrum-css/miller@npm:8.1.0, @spectrum-css/miller@workspace:components/miller": version: 0.0.0-use.local resolution: "@spectrum-css/miller@workspace:components/miller" dependencies: @@ -4886,7 +4885,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/modal@npm:7.1.0, @spectrum-css/modal@workspace:^, @spectrum-css/modal@workspace:components/modal": +"@spectrum-css/modal@npm:7.1.0, @spectrum-css/modal@workspace:components/modal": version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: @@ -4899,7 +4898,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/opacitycheckerboard@npm:4.1.0, @spectrum-css/opacitycheckerboard@workspace:^, @spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard": +"@spectrum-css/opacitycheckerboard@npm:4.1.0, @spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard": version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" dependencies: @@ -4912,7 +4911,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/page@workspace:^, @spectrum-css/page@workspace:components/page": +"@spectrum-css/page@npm:9.1.0, @spectrum-css/page@workspace:components/page": version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" dependencies: @@ -4925,7 +4924,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pagination@workspace:^, @spectrum-css/pagination@workspace:components/pagination": +"@spectrum-css/pagination@npm:10.1.0, @spectrum-css/pagination@workspace:components/pagination": version: 0.0.0-use.local resolution: "@spectrum-css/pagination@workspace:components/pagination" dependencies: @@ -4954,7 +4953,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/picker@npm:9.1.1, @spectrum-css/picker@workspace:^, @spectrum-css/picker@workspace:components/picker": +"@spectrum-css/picker@npm:9.1.1, @spectrum-css/picker@workspace:components/picker": version: 0.0.0-use.local resolution: "@spectrum-css/picker@workspace:components/picker" dependencies: @@ -4988,7 +4987,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pickerbutton@npm:6.1.1, @spectrum-css/pickerbutton@workspace:^, @spectrum-css/pickerbutton@workspace:components/pickerbutton": +"@spectrum-css/pickerbutton@npm:6.1.1, @spectrum-css/pickerbutton@workspace:components/pickerbutton": version: 0.0.0-use.local resolution: "@spectrum-css/pickerbutton@workspace:components/pickerbutton" dependencies: @@ -5013,7 +5012,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/popover@npm:8.2.0, @spectrum-css/popover@workspace:^, @spectrum-css/popover@workspace:components/popover": +"@spectrum-css/popover@npm:8.2.0, @spectrum-css/popover@workspace:components/popover": version: 0.0.0-use.local resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: @@ -5086,7 +5085,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/progressbar@npm:6.1.0, @spectrum-css/progressbar@workspace:^, @spectrum-css/progressbar@workspace:components/progressbar": +"@spectrum-css/progressbar@npm:6.1.0, @spectrum-css/progressbar@workspace:components/progressbar": version: 0.0.0-use.local resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: @@ -5103,7 +5102,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/progresscircle@npm:5.1.0, @spectrum-css/progresscircle@workspace:^, @spectrum-css/progresscircle@workspace:components/progresscircle": +"@spectrum-css/progresscircle@npm:5.1.0, @spectrum-css/progresscircle@workspace:components/progresscircle": version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" dependencies: @@ -5116,7 +5115,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/radio@npm:10.1.0, @spectrum-css/radio@workspace:^, @spectrum-css/radio@workspace:components/radio": +"@spectrum-css/radio@npm:10.1.0, @spectrum-css/radio@workspace:components/radio": version: 0.0.0-use.local resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: @@ -5133,7 +5132,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/rating@workspace:^, @spectrum-css/rating@workspace:components/rating": +"@spectrum-css/rating@npm:6.1.0, @spectrum-css/rating@workspace:components/rating": version: 0.0.0-use.local resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: @@ -5150,7 +5149,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/search@workspace:^, @spectrum-css/search@workspace:components/search": +"@spectrum-css/search@npm:8.1.0, @spectrum-css/search@workspace:components/search": version: 0.0.0-use.local resolution: "@spectrum-css/search@workspace:components/search" dependencies: @@ -5175,7 +5174,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/sidenav@workspace:^, @spectrum-css/sidenav@workspace:components/sidenav": +"@spectrum-css/sidenav@npm:7.1.0, @spectrum-css/sidenav@workspace:components/sidenav": version: 0.0.0-use.local resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: @@ -5192,7 +5191,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/slider@workspace:^, @spectrum-css/slider@workspace:components/slider": +"@spectrum-css/slider@npm:6.1.0, @spectrum-css/slider@workspace:components/slider": version: 0.0.0-use.local resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: @@ -5209,7 +5208,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/splitview@workspace:^, @spectrum-css/splitview@workspace:components/splitview": +"@spectrum-css/splitview@npm:7.1.0, @spectrum-css/splitview@workspace:components/splitview": version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" dependencies: @@ -5222,7 +5221,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/statuslight@workspace:^, @spectrum-css/statuslight@workspace:components/statuslight": +"@spectrum-css/statuslight@npm:9.1.0, @spectrum-css/statuslight@workspace:components/statuslight": version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: @@ -5235,7 +5234,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/steplist@workspace:^, @spectrum-css/steplist@workspace:components/steplist": +"@spectrum-css/steplist@npm:7.1.0, @spectrum-css/steplist@workspace:components/steplist": version: 0.0.0-use.local resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: @@ -5256,7 +5255,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/stepper@npm:7.1.0, @spectrum-css/stepper@workspace:^, @spectrum-css/stepper@workspace:components/stepper": +"@spectrum-css/stepper@npm:7.1.0, @spectrum-css/stepper@workspace:components/stepper": version: 0.0.0-use.local resolution: "@spectrum-css/stepper@workspace:components/stepper" dependencies: @@ -5285,7 +5284,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/swatch@npm:8.1.0, @spectrum-css/swatch@workspace:^, @spectrum-css/swatch@workspace:components/swatch": +"@spectrum-css/swatch@npm:8.1.0, @spectrum-css/swatch@workspace:components/swatch": version: 0.0.0-use.local resolution: "@spectrum-css/swatch@workspace:components/swatch" dependencies: @@ -5302,7 +5301,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/swatchgroup@workspace:^, @spectrum-css/swatchgroup@workspace:components/swatchgroup": +"@spectrum-css/swatchgroup@npm:5.1.0, @spectrum-css/swatchgroup@workspace:components/swatchgroup": version: 0.0.0-use.local resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" dependencies: @@ -5319,7 +5318,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/switch@npm:6.1.0, @spectrum-css/switch@workspace:^, @spectrum-css/switch@workspace:components/switch": +"@spectrum-css/switch@npm:6.1.0, @spectrum-css/switch@workspace:components/switch": version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" dependencies: @@ -5332,7 +5331,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/table@workspace:^, @spectrum-css/table@workspace:components/table": +"@spectrum-css/table@npm:8.1.0, @spectrum-css/table@workspace:components/table": version: 0.0.0-use.local resolution: "@spectrum-css/table@workspace:components/table" dependencies: @@ -5361,7 +5360,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tabs@workspace:^, @spectrum-css/tabs@workspace:components/tabs": +"@spectrum-css/tabs@npm:6.1.1, @spectrum-css/tabs@workspace:components/tabs": version: 0.0.0-use.local resolution: "@spectrum-css/tabs@workspace:components/tabs" dependencies: @@ -5386,7 +5385,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tag@npm:10.1.0, @spectrum-css/tag@workspace:^, @spectrum-css/tag@workspace:components/tag": +"@spectrum-css/tag@npm:10.1.0, @spectrum-css/tag@workspace:components/tag": version: 0.0.0-use.local resolution: "@spectrum-css/tag@workspace:components/tag" dependencies: @@ -5411,7 +5410,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/taggroup@workspace:^, @spectrum-css/taggroup@workspace:components/taggroup": +"@spectrum-css/taggroup@npm:7.1.0, @spectrum-css/taggroup@workspace:components/taggroup": version: 0.0.0-use.local resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: @@ -5428,7 +5427,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/textfield@npm:8.1.0, @spectrum-css/textfield@workspace:^, @spectrum-css/textfield@workspace:components/textfield": +"@spectrum-css/textfield@npm:8.1.0, @spectrum-css/textfield@workspace:components/textfield": version: 0.0.0-use.local resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: @@ -5445,7 +5444,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/thumbnail@npm:8.1.0, @spectrum-css/thumbnail@workspace:^, @spectrum-css/thumbnail@workspace:components/thumbnail": +"@spectrum-css/thumbnail@npm:8.1.0, @spectrum-css/thumbnail@workspace:components/thumbnail": version: 0.0.0-use.local resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" dependencies: @@ -5462,7 +5461,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/toast@workspace:^, @spectrum-css/toast@workspace:components/toast": +"@spectrum-css/toast@npm:11.1.0, @spectrum-css/toast@workspace:components/toast": version: 0.0.0-use.local resolution: "@spectrum-css/toast@workspace:components/toast" dependencies: @@ -5502,7 +5501,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tooltip@npm:7.1.0, @spectrum-css/tooltip@workspace:^, @spectrum-css/tooltip@workspace:components/tooltip": +"@spectrum-css/tooltip@npm:7.1.0, @spectrum-css/tooltip@workspace:components/tooltip": version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: @@ -5520,7 +5519,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tray@npm:5.1.0, @spectrum-css/tray@workspace:^, @spectrum-css/tray@workspace:components/tray": +"@spectrum-css/tray@npm:5.1.0, @spectrum-css/tray@workspace:components/tray": version: 0.0.0-use.local resolution: "@spectrum-css/tray@workspace:components/tray" dependencies: @@ -5553,7 +5552,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/treeview@workspace:^, @spectrum-css/treeview@workspace:components/treeview": +"@spectrum-css/treeview@npm:12.1.0, @spectrum-css/treeview@workspace:components/treeview": version: 0.0.0-use.local resolution: "@spectrum-css/treeview@workspace:components/treeview" dependencies: @@ -5574,7 +5573,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/typography@npm:8.1.0, @spectrum-css/typography@workspace:^, @spectrum-css/typography@workspace:components/typography": +"@spectrum-css/typography@npm:8.1.0, @spectrum-css/typography@workspace:components/typography": version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" dependencies: @@ -5597,7 +5596,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/underlay@npm:6.1.0, @spectrum-css/underlay@workspace:^, @spectrum-css/underlay@workspace:components/underlay": +"@spectrum-css/underlay@npm:6.1.0, @spectrum-css/underlay@workspace:components/underlay": version: 0.0.0-use.local resolution: "@spectrum-css/underlay@workspace:components/underlay" dependencies: @@ -5611,7 +5610,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/well@workspace:^, @spectrum-css/well@workspace:components/well": +"@spectrum-css/well@npm:7.1.0, @spectrum-css/well@workspace:components/well": version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" dependencies: From ad861d0c372ef2ad52fc06b9f047282941952b7a Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 24 Feb 2025 22:52:25 +0000 Subject: [PATCH 084/103] chore: release (next) (#3576) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 10 +- .storybook/package.json | 2 +- components/accordion/CHANGELOG.md | 7 + components/accordion/package.json | 6 +- components/actionbar/CHANGELOG.md | 10 + components/actionbar/package.json | 18 +- components/actionbutton/CHANGELOG.md | 7 + components/actionbutton/package.json | 6 +- components/actiongroup/CHANGELOG.md | 7 + components/actiongroup/package.json | 6 +- components/actionmenu/CHANGELOG.md | 12 +- components/actionmenu/package.json | 18 +- components/alertbanner/CHANGELOG.md | 9 + components/alertbanner/package.json | 14 +- components/alertdialog/CHANGELOG.md | 8 + components/alertdialog/package.json | 10 +- components/assetcard/CHANGELOG.md | 7 + components/assetcard/package.json | 6 +- components/assetlist/CHANGELOG.md | 8 + components/assetlist/package.json | 10 +- components/badge/CHANGELOG.md | 7 + components/badge/package.json | 6 +- components/breadcrumb/CHANGELOG.md | 10 +- components/breadcrumb/package.json | 10 +- components/button/CHANGELOG.md | 7 + components/button/package.json | 6 +- components/buttongroup/CHANGELOG.md | 12 +- components/buttongroup/package.json | 6 +- components/calendar/CHANGELOG.md | 7 + components/calendar/package.json | 6 +- components/card/CHANGELOG.md | 9 + components/card/package.json | 14 +- components/checkbox/CHANGELOG.md | 9 +- components/checkbox/package.json | 6 +- components/clearbutton/CHANGELOG.md | 7 + components/clearbutton/package.json | 6 +- components/closebutton/CHANGELOG.md | 7 + components/closebutton/package.json | 6 +- components/coachmark/CHANGELOG.md | 12 + components/coachmark/package.json | 26 +- components/combobox/CHANGELOG.md | 10 + components/combobox/package.json | 18 +- components/contextualhelp/CHANGELOG.md | 8 + components/contextualhelp/package.json | 10 +- components/datepicker/CHANGELOG.md | 12 +- components/datepicker/package.json | 18 +- components/dialog/CHANGELOG.md | 11 +- components/dialog/package.json | 14 +- components/dropindicator/CHANGELOG.md | 7 + components/dropindicator/package.json | 6 +- components/dropzone/CHANGELOG.md | 7 + components/dropzone/package.json | 6 +- components/fieldgroup/CHANGELOG.md | 9 + components/fieldgroup/package.json | 14 +- components/fieldlabel/CHANGELOG.md | 7 + components/fieldlabel/package.json | 6 +- components/helptext/CHANGELOG.md | 7 + components/helptext/package.json | 6 +- components/icon/CHANGELOG.md | 8 +- components/icon/package.json | 2 +- components/infieldbutton/CHANGELOG.md | 7 + components/infieldbutton/package.json | 6 +- components/infieldprogresscircle/CHANGELOG.md | 9 + components/infieldprogresscircle/package.json | 2 +- components/inlinealert/CHANGELOG.md | 8 + components/inlinealert/package.json | 10 +- components/menu/CHANGELOG.md | 9 + components/menu/package.json | 14 +- components/meter/CHANGELOG.md | 7 + components/meter/package.json | 6 +- components/miller/CHANGELOG.md | 11 +- components/miller/package.json | 14 +- components/pagination/CHANGELOG.md | 10 + components/pagination/package.json | 18 +- components/picker/CHANGELOG.md | 10 + components/picker/package.json | 18 +- components/pickerbutton/CHANGELOG.md | 9 + components/pickerbutton/package.json | 14 +- components/popover/CHANGELOG.md | 9 + components/popover/package.json | 14 +- components/progressbar/CHANGELOG.md | 7 + components/progressbar/package.json | 6 +- components/radio/CHANGELOG.md | 7 + components/radio/package.json | 6 +- components/rating/CHANGELOG.md | 7 + components/rating/package.json | 6 +- components/search/CHANGELOG.md | 9 + components/search/package.json | 14 +- components/sidenav/CHANGELOG.md | 7 + components/sidenav/package.json | 6 +- components/slider/CHANGELOG.md | 7 + components/slider/package.json | 6 +- components/statuslight/CHANGELOG.md | 11 + components/statuslight/package.json | 2 +- components/steplist/CHANGELOG.md | 8 + components/steplist/package.json | 10 +- components/stepper/CHANGELOG.md | 10 + components/stepper/package.json | 18 +- components/table/CHANGELOG.md | 9 + components/table/package.json | 14 +- components/tabs/CHANGELOG.md | 9 + components/tabs/package.json | 14 +- components/tag/CHANGELOG.md | 8 + components/tag/package.json | 10 +- components/taggroup/CHANGELOG.md | 7 + components/taggroup/package.json | 6 +- components/textfield/CHANGELOG.md | 7 + components/textfield/package.json | 6 +- components/toast/CHANGELOG.md | 9 + components/toast/package.json | 14 +- components/tooltip/CHANGELOG.md | 7 + components/tooltip/package.json | 6 +- components/tray/CHANGELOG.md | 9 + components/tray/package.json | 14 +- components/treeview/CHANGELOG.md | 9 +- components/treeview/package.json | 6 +- tools/bundle/package.json | 114 +- tools/bundle/tasks/bundler.js | 18 + ui-icons/CHANGELOG.md | 69 +- ui-icons/package.json | 2 +- yarn.lock | 5170 ++++++++--------- 121 files changed, 3457 insertions(+), 2978 deletions(-) create mode 100644 components/infieldprogresscircle/CHANGELOG.md diff --git a/.changeset/pre.json b/.changeset/pre.json index 9d8c525a639..07277334bed 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -95,13 +95,18 @@ "@spectrum-css/tokens": "16.0.0", "@spectrum-css/bundle": "1.0.0", "@spectrum-css/generator": "4.1.0", - "@spectrum-css/ui-icons": "1.1.2" + "@spectrum-css/ui-icons": "1.1.2", + "@spectrum-css/infieldprogresscircle": "0.0.0" }, "changesets": [ "beige-dragons-tickle", "chilly-peaches-sniff", + "clean-oranges-smell", + "early-actors-buy", + "eleven-cooks-destroy", "few-doors-smile", "few-eels-retire", + "flat-snails-admire", "fresh-crabs-deliver", "fresh-seahorses-join", "friendly-dolls-raise", @@ -113,13 +118,16 @@ "metal-fireants-switch", "modern-chairs-sit", "nine-kings-repair", + "olive-tools-hang", "pretty-parents-drum", "proud-jokes-rule", "rotten-meals-share", "serious-clouds-jam", + "small-impalas-search", "spotty-onions-study", "strange-glasses-allow", "tame-bobcats-beam", + "tame-knives-train", "tame-wasps-shake", "twenty-ravens-divide", "twenty-tables-know" diff --git a/.storybook/package.json b/.storybook/package.json index 70cf69751dc..71dbdfad1bf 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -42,7 +42,7 @@ "@adobe/spectrum-css-workflow-icons": "^4.0.0", "@spectrum-css/bundle": "1.0.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/ui-icons": "1.1.2" + "@spectrum-css/ui-icons": "2.0.0-next.0" }, "devDependencies": { "@babel/core": "^7.26.0", diff --git a/components/accordion/CHANGELOG.md b/components/accordion/CHANGELOG.md index 85b00860af6..1083f5152d2 100644 --- a/components/accordion/CHANGELOG.md +++ b/components/accordion/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/accordion/package.json b/components/accordion/package.json index 74e0e9bfd1c..0ab07524a04 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/accordion", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS accordion component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/actionbar/CHANGELOG.md b/components/actionbar/CHANGELOG.md index 1076f027e71..e47ec494c8d 100644 --- a/components/actionbar/CHANGELOG.md +++ b/components/actionbar/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/closebutton@7.0.0-next.0 + - @spectrum-css/fieldlabel@11.0.0-next.0 + - @spectrum-css/actiongroup@7.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 10.1.1 ### Patch Changes diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 6bbcd38c26f..2c198df4eec 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbar", - "version": "10.1.1", + "version": "11.0.0-next.0", "description": "The Spectrum CSS actionbar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/actiongroup": ">=7.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", + "@spectrum-css/fieldlabel": ">=11.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,10 +49,10 @@ } }, "devDependencies": { - "@spectrum-css/actiongroup": "6.1.0", - "@spectrum-css/closebutton": "6.1.0", - "@spectrum-css/fieldlabel": "10.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/actiongroup": "7.0.0-next.0", + "@spectrum-css/closebutton": "7.0.0-next.0", + "@spectrum-css/fieldlabel": "11.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md index 0cf5f7475aa..0fd83b7b5d8 100644 --- a/components/actionbutton/CHANGELOG.md +++ b/components/actionbutton/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.1 ### Patch Changes diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index 4fc5bb1d26d..17ec2653fed 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "7.1.1", + "version": "8.0.0-next.0", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md index 04ab6e0c2e4..bd7b7da548e 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 7.0.0 ### Minor Changes diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 8329a400255..25bbb81382f 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actiongroup", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS actiongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/actionmenu/CHANGELOG.md b/components/actionmenu/CHANGELOG.md index 748bbb1c5da..5ac7271d7ff 100644 --- a/components/actionmenu/CHANGELOG.md +++ b/components/actionmenu/CHANGELOG.md @@ -1,7 +1,14 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 ## 7.1.1 @@ -163,6 +170,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index fbdfcdcef55..c12c352848a 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionmenu", - "version": "7.1.1", + "version": "8.0.0-next.0", "description": "The Spectrum CSS actionmenu component", "license": "Apache-2.0", "author": "Adobe", @@ -25,17 +25,17 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md index 245b3b23526..6abad6217a3 100644 --- a/components/alertbanner/CHANGELOG.md +++ b/components/alertbanner/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 4.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/closebutton@7.0.0-next.0 + ## 3.1.0 ### Minor Changes diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 02c19c0f6d0..594f529cfca 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertbanner", - "version": "3.1.0", + "version": "4.0.0-next.0", "description": "The Spectrum CSS alertbanner component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,10 +49,10 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/closebutton": "7.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md index 2c30ad36685..2e29d4d8c5d 100644 --- a/components/alertdialog/CHANGELOG.md +++ b/components/alertdialog/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/buttongroup@10.0.0-next.0 + ## 4.1.0 ### Minor Changes diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 3b3f5f2414e..7c3cf8f1f6b 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertdialog", - "version": "4.1.0", + "version": "5.0.0-next.0", "description": "The Spectrum CSS alertdialog component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", + "@spectrum-css/buttongroup": ">=10.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" @@ -53,9 +53,9 @@ } }, "devDependencies": { - "@spectrum-css/buttongroup": "9.1.0", + "@spectrum-css/buttongroup": "10.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/underlay": "6.1.0" diff --git a/components/assetcard/CHANGELOG.md b/components/assetcard/CHANGELOG.md index 507cb22aa60..4309a65ac77 100644 --- a/components/assetcard/CHANGELOG.md +++ b/components/assetcard/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/checkbox@11.0.0-next.0 + ## 5.1.0 ### Minor Changes diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 5f6524ee91f..60d5dc6cf1e 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetcard", - "version": "5.1.0", + "version": "6.0.0-next.0", "description": "The Spectrum CSS asset card component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.0", + "@spectrum-css/checkbox": "11.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/assetlist/CHANGELOG.md b/components/assetlist/CHANGELOG.md index 10a6c01d454..9d18d1c0d86 100644 --- a/components/assetlist/CHANGELOG.md +++ b/components/assetlist/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/assetlist/package.json b/components/assetlist/package.json index c5b2ecc909d..e8d97bd5fbc 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetlist", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS assetlist component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -41,8 +41,8 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/badge/CHANGELOG.md b/components/badge/CHANGELOG.md index 25fcf08d866..b1117797a53 100644 --- a/components/badge/CHANGELOG.md +++ b/components/badge/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/badge/package.json b/components/badge/package.json index 8a59b3b72bb..8f22f15771d 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/badge", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS badge component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/breadcrumb/CHANGELOG.md b/components/breadcrumb/CHANGELOG.md index 0dd87579d9f..d8b582003ae 100644 --- a/components/breadcrumb/CHANGELOG.md +++ b/components/breadcrumb/CHANGELOG.md @@ -1,7 +1,12 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/actionbutton@8.0.0-next.0 ## 11.1.0 @@ -198,6 +203,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index e1dc521b6c9..ff30ecd997c 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/breadcrumb", - "version": "11.1.0", + "version": "12.0.0-next.0", "description": "The Spectrum CSS breadcrumb component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -41,8 +41,8 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md index 6d76957ed44..8e976e3b3c2 100644 --- a/components/button/CHANGELOG.md +++ b/components/button/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 15.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 14.1.1 ### Patch Changes diff --git a/components/button/package.json b/components/button/package.json index 039ab069117..f0413c02235 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/button", - "version": "14.1.1", + "version": "15.0.0-next.0", "description": "The Spectrum CSS button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -42,7 +42,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md index 1cbfe27c61d..5a4e46c8794 100644 --- a/components/buttongroup/CHANGELOG.md +++ b/components/buttongroup/CHANGELOG.md @@ -1,7 +1,11 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/button@15.0.0-next.0 ## 9.1.0 @@ -176,6 +180,10 @@ Output for all component CSS files is now being run through a lightweight optimi - Removes component-builder & component-builder-simple for script leveraging postcss - 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 + ## 6.2.5 diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index 4d6ce4722dc..831fdc4a37a 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/buttongroup", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS buttongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", + "@spectrum-css/button": "15.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/calendar/CHANGELOG.md b/components/calendar/CHANGELOG.md index cfdc86c5770..c48b753be03 100644 --- a/components/calendar/CHANGELOG.md +++ b/components/calendar/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/calendar/package.json b/components/calendar/package.json index 068b1a46966..401bc2f5585 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/calendar", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS calendar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/card/CHANGELOG.md b/components/card/CHANGELOG.md index 755b2029c84..1389b37da01 100644 --- a/components/card/CHANGELOG.md +++ b/components/card/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + ## 11.1.0 ### Minor Changes diff --git a/components/card/package.json b/components/card/package.json index 928e0496576..100c2a49734 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/card", - "version": "11.1.0", + "version": "12.0.0-next.0", "description": "The Spectrum CSS card component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/asset": ">=7.0.0 <8.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/quickaction": ">=3", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/typography": ">=8.0.0 <9.0.0" @@ -57,10 +57,10 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/asset": "7.1.0", - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/typography": "8.1.0" }, diff --git a/components/checkbox/CHANGELOG.md b/components/checkbox/CHANGELOG.md index f6e972b1a65..91c4a1fc30b 100644 --- a/components/checkbox/CHANGELOG.md +++ b/components/checkbox/CHANGELOG.md @@ -1,7 +1,11 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 ## 10.1.0 @@ -181,6 +185,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 66df3ef427f..ed21a333ac1 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/checkbox", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS checkbox component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/clearbutton/CHANGELOG.md b/components/clearbutton/CHANGELOG.md index 3f80a03cb79..6c559cabee7 100644 --- a/components/clearbutton/CHANGELOG.md +++ b/components/clearbutton/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 873f2fc97e1..93c1b754749 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/clearbutton", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS clearbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/closebutton/CHANGELOG.md b/components/closebutton/CHANGELOG.md index 2d1ca48004c..66991e5fc39 100644 --- a/components/closebutton/CHANGELOG.md +++ b/components/closebutton/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/closebutton/package.json b/components/closebutton/package.json index 7f5bdfed878..830c79e0ef2 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/closebutton", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS close button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/coachmark/CHANGELOG.md b/components/coachmark/CHANGELOG.md index 1485ba43809..6fa0fa91474 100644 --- a/components/coachmark/CHANGELOG.md +++ b/components/coachmark/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/actionmenu@8.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + - @spectrum-css/buttongroup@10.0.0-next.0 + ## 9.1.1 ### Patch Changes diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 96bed986f27..4d0caa19785 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachmark", - "version": "9.1.1", + "version": "10.0.0-next.0", "description": "The Spectrum CSS coachmark component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/actionmenu": ">=8.0.0-next.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/buttongroup": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -57,12 +57,12 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/actionmenu": "7.1.1", - "@spectrum-css/button": "14.1.1", - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/actionmenu": "8.0.0-next.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/buttongroup": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md index e70730117fc..8d5d4c7e50e 100644 --- a/components/combobox/CHANGELOG.md +++ b/components/combobox/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/pickerbutton@7.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 4.1.1 ### Patch Changes diff --git a/components/combobox/package.json b/components/combobox/package.json index ccf3f076282..1ad59ff364a 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/combobox", - "version": "4.1.1", + "version": "5.0.0-next.0", "description": "The Spectrum CSS combobox component", "license": "Apache-2.0", "author": "Adobe", @@ -25,11 +25,11 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/pickerbutton": ">=7.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -53,11 +53,11 @@ } }, "devDependencies": { - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/pickerbutton": "6.1.1", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/pickerbutton": "7.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md index 26ee06df74e..dadcb030642 100644 --- a/components/contextualhelp/CHANGELOG.md +++ b/components/contextualhelp/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 5.1.2 ### Patch Changes diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 5cb5641bdd1..5c53c2b4741 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/contextualhelp", - "version": "5.1.2", + "version": "6.0.0-next.0", "description": "The Spectrum CSS contextualhelp component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/datepicker/CHANGELOG.md b/components/datepicker/CHANGELOG.md index 60fa0da0d2c..ab19101188c 100644 --- a/components/datepicker/CHANGELOG.md +++ b/components/datepicker/CHANGELOG.md @@ -1,7 +1,14 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 5.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/pickerbutton@7.0.0-next.0 + - @spectrum-css/calendar@8.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 ## 4.1.1 @@ -231,6 +238,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/datepicker/package.json b/components/datepicker/package.json index fb401015bf5..c5f137d512e 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "4.1.1", + "version": "5.0.0-next.0", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/calendar": ">=7.0.0 <8.0.0", - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", + "@spectrum-css/calendar": ">=8.0.0-next.0", + "@spectrum-css/pickerbutton": ">=7.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,10 +49,10 @@ } }, "devDependencies": { - "@spectrum-css/calendar": "7.1.0", - "@spectrum-css/pickerbutton": "6.1.1", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/calendar": "8.0.0-next.0", + "@spectrum-css/pickerbutton": "7.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md index e6d0c74f0d8..f7818ee0e9e 100644 --- a/components/dialog/CHANGELOG.md +++ b/components/dialog/CHANGELOG.md @@ -1,7 +1,13 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 13.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/closebutton@7.0.0-next.0 + - @spectrum-css/buttongroup@10.0.0-next.0 ## 12.1.0 @@ -224,6 +230,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/dialog/package.json b/components/dialog/package.json index 4c7e0a411f0..0076dce5685 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dialog", - "version": "12.1.0", + "version": "13.0.0-next.0", "description": "The Spectrum CSS dialog component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", + "@spectrum-css/button": ">=15.0.0 <16.0.0", + "@spectrum-css/buttongroup": ">=10.0.0 <11.0.0", + "@spectrum-css/closebutton": ">=7.0.0 <8.0.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", @@ -57,9 +57,9 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/buttongroup": "10.0.0-next.0", + "@spectrum-css/closebutton": "7.0.0-next.0", "@spectrum-css/divider": "5.1.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", diff --git a/components/dropindicator/CHANGELOG.md b/components/dropindicator/CHANGELOG.md index ac7735b798a..ec2fa76123c 100644 --- a/components/dropindicator/CHANGELOG.md +++ b/components/dropindicator/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index f55b41f1c3e..5faca06906b 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropindicator", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS dropindicator component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md index 512711c2e45..9a10b1c86dc 100644 --- a/components/dropzone/CHANGELOG.md +++ b/components/dropzone/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/actionbutton@8.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/dropzone/package.json b/components/dropzone/package.json index 26afb9f0990..1a610b1e3c9 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropzone", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS dropzone component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0", "@spectrum-css/link": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -45,7 +45,7 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/link": "7.1.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/fieldgroup/CHANGELOG.md b/components/fieldgroup/CHANGELOG.md index a6643e0a1da..edabbc344ac 100644 --- a/components/fieldgroup/CHANGELOG.md +++ b/components/fieldgroup/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/checkbox@11.0.0-next.0 + - @spectrum-css/helptext@8.0.0-next.0 + - @spectrum-css/radio@11.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index b8af94c4092..a3fe7b7e157 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldgroup", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS fieldgroup component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/radio": ">=10.0.0 <11.0.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/helptext": ">=8.0.0-next.0", + "@spectrum-css/radio": ">=11.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/radio": "10.1.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/helptext": "8.0.0-next.0", + "@spectrum-css/radio": "11.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/fieldlabel/CHANGELOG.md b/components/fieldlabel/CHANGELOG.md index cb93ba0724f..0919762c937 100644 --- a/components/fieldlabel/CHANGELOG.md +++ b/components/fieldlabel/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index cbd75939f46..4d35441a3e2 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldlabel", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS fieldlabel component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/helptext/CHANGELOG.md b/components/helptext/CHANGELOG.md index 7e952ee686c..e6953556afa 100644 --- a/components/helptext/CHANGELOG.md +++ b/components/helptext/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/helptext/package.json b/components/helptext/package.json index 6634f970948..1b81f3f1e05 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/helptext", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS helptext component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/icon/CHANGELOG.md b/components/icon/CHANGELOG.md index d112940d0ec..b9cc986135e 100644 --- a/components/icon/CHANGELOG.md +++ b/components/icon/CHANGELOG.md @@ -1,7 +1,10 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 10.0.0-next.0 + +### Major Changes + +- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b) Thanks [@pfulton](https://github.com/pfulton)! - Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed. ## 9.1.0 @@ -158,6 +161,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/icon/package.json b/components/icon/package.json index 4a4d22b16dc..edf26ad37f2 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/icon", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS icon component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/infieldbutton/CHANGELOG.md b/components/infieldbutton/CHANGELOG.md index 690d136642e..8fd7672e587 100644 --- a/components/infieldbutton/CHANGELOG.md +++ b/components/infieldbutton/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 5a8d00cc3f6..e21c2644e1e 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/infieldbutton", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS infield button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/infieldprogresscircle/CHANGELOG.md b/components/infieldprogresscircle/CHANGELOG.md new file mode 100644 index 00000000000..7b3a7ceecaf --- /dev/null +++ b/components/infieldprogresscircle/CHANGELOG.md @@ -0,0 +1,9 @@ +# @spectrum-css/infieldprogresscircle + +## 1.0.0-next.0 + +### Major Changes + +- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`fb80825`](https://github.com/adobe/spectrum-css/commit/fb80825cc31d6b5eb46dc42e595bce253e7db805) Thanks [@pfulton](https://github.com/pfulton)! - ## Infield Progresscircle S2 Migration + + In-field progress circle is a new component created to replace progress circle (size S) in t-shirt size components. The button, textfield, combo box, and picker `template.js` files have all been updated to call for infield progress circles. This component comes in four sizes: (S, M, L, XL), has updated color variants (default, white, black), and has a unified track thickness. diff --git a/components/infieldprogresscircle/package.json b/components/infieldprogresscircle/package.json index c6fca862ee9..a6a1da3defa 100644 --- a/components/infieldprogresscircle/package.json +++ b/components/infieldprogresscircle/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/infieldprogresscircle", - "version": "0.0.0", + "version": "1.0.0-next.0", "description": "The Spectrum CSS infieldprogresscircle component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/inlinealert/CHANGELOG.md b/components/inlinealert/CHANGELOG.md index d4ec59df00e..76b8cdd050e 100644 --- a/components/inlinealert/CHANGELOG.md +++ b/components/inlinealert/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index d9d78203521..f6cc54475c0 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/inlinealert", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS in-line alert component", "license": "Apache-2.0", "author": "Adobe", @@ -25,8 +25,8 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -41,8 +41,8 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md index 791bc8f1dbc..35917006bdd 100644 --- a/components/menu/CHANGELOG.md +++ b/components/menu/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + - @spectrum-css/tray@6.0.0-next.0 + ## 10.0.0 ### Minor Changes diff --git a/components/menu/package.json b/components/menu/package.json index a210399dd99..de8a7a4c578 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/menu", - "version": "9.1.0", + "version": "10.0.0-next.0", "description": "The Spectrum CSS menu component", "license": "Apache-2.0", "author": "Adobe", @@ -25,12 +25,12 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/switch": ">=6.0.0 <7.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/tray": ">=5.0.0 <6.0.0" + "@spectrum-css/tray": ">=6.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { @@ -53,12 +53,12 @@ } }, "devDependencies": { - "@spectrum-css/checkbox": "10.1.0", + "@spectrum-css/checkbox": "11.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/switch": "6.1.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tray": "5.1.0" + "@spectrum-css/tray": "6.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/meter/CHANGELOG.md b/components/meter/CHANGELOG.md index f4dc69829d1..6cc1aff7167 100644 --- a/components/meter/CHANGELOG.md +++ b/components/meter/CHANGELOG.md @@ -1,5 +1,12 @@ # Change Log +## 2.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/progressbar@7.0.0-next.0 + ## 1.1.0 ### Minor Changes diff --git a/components/meter/package.json b/components/meter/package.json index a99280d1626..eed64636b35 100644 --- a/components/meter/package.json +++ b/components/meter/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/meter", - "version": "1.1.0", + "version": "2.0.0-next.0", "description": "The Spectrum CSS meter component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/progressbar": ">=6.0.0 <7.0.0", + "@spectrum-css/progressbar": ">=7.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/progressbar": "6.1.0", + "@spectrum-css/progressbar": "7.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/miller/CHANGELOG.md b/components/miller/CHANGELOG.md index e02905ec4fe..078a3b85e23 100644 --- a/components/miller/CHANGELOG.md +++ b/components/miller/CHANGELOG.md @@ -1,7 +1,13 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/assetlist@9.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 ## 8.1.0 @@ -190,6 +196,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/miller/package.json b/components/miller/package.json index efd37891624..635cda00a2b 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/miller", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS miller component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/assetlist": ">=8.0.0 <9.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/assetlist": ">=9.0.0-next.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/assetlist": "8.1.0", - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/assetlist": "9.0.0-next.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/pagination/CHANGELOG.md b/components/pagination/CHANGELOG.md index 4dc4dbeb33b..42e1e244cf4 100644 --- a/components/pagination/CHANGELOG.md +++ b/components/pagination/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/pagination/package.json b/components/pagination/package.json index 73915f0a91b..fa10474b1ca 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pagination", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS Pagination component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,10 +49,10 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/button": "14.1.1", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/picker/CHANGELOG.md b/components/picker/CHANGELOG.md index 994a1df9e17..5c19544776a 100644 --- a/components/picker/CHANGELOG.md +++ b/components/picker/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 10.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/helptext@8.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 9.1.1 ### Patch Changes diff --git a/components/picker/package.json b/components/picker/package.json index 43cdaf799b3..a0af0023813 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/picker", - "version": "9.1.1", + "version": "10.0.0-next.0", "description": "The Spectrum CSS picker component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/helptext": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/helptext": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -54,10 +54,10 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/helptext": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/pickerbutton/CHANGELOG.md b/components/pickerbutton/CHANGELOG.md index 4ce2d0fc195..d03b741fa4f 100644 --- a/components/pickerbutton/CHANGELOG.md +++ b/components/pickerbutton/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/popover@9.0.0-next.0 + ## 6.1.1 ### Patch Changes diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 06dcb4fc068..05f7b5f0132 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pickerbutton", - "version": "6.1.1", + "version": "7.0.0-next.0", "description": "The Spectrum CSS picker button component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/popover": ">=8.0.0 <9.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/popover": "8.2.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md index 8ed0cca5198..13c8523965a 100644 --- a/components/popover/CHANGELOG.md +++ b/components/popover/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/alertdialog@5.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/dialog@13.0.0-next.0 + ## 8.2.0 ### Minor Changes diff --git a/components/popover/package.json b/components/popover/package.json index 78062944942..e218be60bb9 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/popover", - "version": "8.2.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS popover component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0", - "@spectrum-css/dialog": ">=12.0.0 <13.0.0", + "@spectrum-css/alertdialog": ">=5.0.0-next.0", + "@spectrum-css/dialog": ">=13.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", + "@spectrum-css/menu": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/alertdialog": "4.1.0", + "@spectrum-css/alertdialog": "5.0.0-next.0", "@spectrum-css/commons": "11.0.0", - "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/dialog": "13.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/menu": "9.1.0", + "@spectrum-css/menu": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/progressbar/CHANGELOG.md b/components/progressbar/CHANGELOG.md index dff8f2ce716..3514e8fd4ed 100644 --- a/components/progressbar/CHANGELOG.md +++ b/components/progressbar/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/fieldlabel@11.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 1270fb3b86c..928315541e5 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/progressbar", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS progress bar component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0", + "@spectrum-css/fieldlabel": ">=11.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/fieldlabel": "10.1.0", + "@spectrum-css/fieldlabel": "11.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/radio/CHANGELOG.md b/components/radio/CHANGELOG.md index 5c6a19c4e2d..88a4ddf6573 100644 --- a/components/radio/CHANGELOG.md +++ b/components/radio/CHANGELOG.md @@ -250,6 +250,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - [#3350](https://github.com/adobe/spectrum-css/pull/3350) [`c091b4d`](https://github.com/adobe/spectrum-css/commit/c091b4d7ee33c870d24d731c9f377cf7ed1cb19a) Thanks [@5t3ph](https://github.com/5t3ph)! - Corrects the styles of the read-only state to show the radio inputs and allow visible focus. Also adds `aria-disabled` since `aria-readonly` isn't well supported, and story demonstrates scripting to make selection for read-only radios immutable. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/radio/package.json b/components/radio/package.json index 6d4b76d3802..dabdb76d15a 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/radio", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS radio component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/rating/CHANGELOG.md b/components/rating/CHANGELOG.md index 82f84839f79..5b7da68bc39 100644 --- a/components/rating/CHANGELOG.md +++ b/components/rating/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/rating/package.json b/components/rating/package.json index f0cce6f4f1c..ded9d7c0f77 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/rating", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS rating component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md index 53d79b0f414..dab5540497b 100644 --- a/components/search/CHANGELOG.md +++ b/components/search/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/clearbutton@8.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/search/package.json b/components/search/package.json index f2b5334b7ca..83a012a7983 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/search", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS search component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", + "@spectrum-css/clearbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/clearbutton": "7.1.0", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/clearbutton": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/sidenav/CHANGELOG.md b/components/sidenav/CHANGELOG.md index 64bd74a5963..4e2211592f9 100644 --- a/components/sidenav/CHANGELOG.md +++ b/components/sidenav/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/sidenav/package.json b/components/sidenav/package.json index f27098c5ce4..c27e5b0c498 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/sidenav", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS sidenav component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md index fa066beaa22..cb2ad77d79a 100644 --- a/components/slider/CHANGELOG.md +++ b/components/slider/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/stepper@8.0.0-next.0 + ## 6.1.0 ### Minor Changes diff --git a/components/slider/package.json b/components/slider/package.json index 34c1d08a354..d1224060bf4 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/slider", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS slider component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/stepper": ">=7.0.0 <8.0.0", + "@spectrum-css/stepper": ">=8.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/stepper": "7.1.0", + "@spectrum-css/stepper": "8.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/statuslight/CHANGELOG.md b/components/statuslight/CHANGELOG.md index 591ab01f90d..5a567f6f10b 100644 --- a/components/statuslight/CHANGELOG.md +++ b/components/statuslight/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.1.1-next.0 + +### Patch Changes + +- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`dce3669`](https://github.com/adobe/spectrum-css/commit/dce366923562d004c61e8a19da216f6ea6a11d40) Thanks [@pfulton](https://github.com/pfulton)! - Removes references to the accent variant, since the accent status light was deprecated in S2. + + Removed variant: + + `.spectrum-StatusLight--accent` + `--spectrum-statuslight-semantic-accent-color` + ## 9.1.0 ### Minor Changes diff --git a/components/statuslight/package.json b/components/statuslight/package.json index ab7f6db763a..41c5742600a 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/statuslight", - "version": "9.1.0", + "version": "9.1.1-next.0", "description": "The Spectrum CSS statuslight component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/steplist/CHANGELOG.md b/components/steplist/CHANGELOG.md index ee1e11a4df8..19fa3799c43 100644 --- a/components/steplist/CHANGELOG.md +++ b/components/steplist/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/tooltip@8.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/steplist/package.json b/components/steplist/package.json index b286e0f0367..8caecf64011 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/steplist", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS steplist component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", - "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" + "@spectrum-css/tooltip": ">=8.0.0-next.0" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -41,9 +41,9 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tooltip": "7.1.0" + "@spectrum-css/tooltip": "8.0.0-next.0" }, "keywords": [ "design-system", diff --git a/components/stepper/CHANGELOG.md b/components/stepper/CHANGELOG.md index ab1b18243d5..27c76131279 100644 --- a/components/stepper/CHANGELOG.md +++ b/components/stepper/CHANGELOG.md @@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/actionbutton@8.0.0-next.0 + - @spectrum-css/infieldbutton@7.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/stepper/package.json b/components/stepper/package.json index a2d956d094c..1bd43a57f60 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/stepper", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS stepper component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0", - "@spectrum-css/textfield": ">=8.0.0 <9.0.0", + "@spectrum-css/actionbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/infieldbutton": ">=7.0.0-next.0", + "@spectrum-css/textfield": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -49,10 +49,10 @@ } }, "devDependencies": { - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/infieldbutton": "6.1.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/infieldbutton": "7.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/table/CHANGELOG.md b/components/table/CHANGELOG.md index 1101f55c20f..6fa76e8e8a2 100644 --- a/components/table/CHANGELOG.md +++ b/components/table/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/checkbox@11.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/table/package.json b/components/table/package.json index 669e0357898..699049b5771 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/table", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS table component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/checkbox": ">=11.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -49,9 +49,9 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/thumbnail": "8.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/tabs/CHANGELOG.md b/components/tabs/CHANGELOG.md index 444c3540817..928158ef364 100644 --- a/components/tabs/CHANGELOG.md +++ b/components/tabs/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 7.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/menu@10.0.0-next.0 + - @spectrum-css/picker@10.0.0-next.0 + ## 7.0.0 ### Patch Changes diff --git a/components/tabs/package.json b/components/tabs/package.json index 4e19a32397c..d2784fdb34e 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tabs", - "version": "6.1.1", + "version": "7.0.0-next.0", "description": "The Spectrum CSS tabs component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", - "@spectrum-css/menu": ">=9.0.0 <10.0.0", - "@spectrum-css/picker": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", + "@spectrum-css/menu": ">=10.0.0-next.0", + "@spectrum-css/picker": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/picker": "9.1.1", + "@spectrum-css/icon": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/picker": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md index cce422aa8d5..b28ddb3fdd9 100644 --- a/components/tag/CHANGELOG.md +++ b/components/tag/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 11.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/clearbutton@8.0.0-next.0 + ## 10.1.0 ### Minor Changes diff --git a/components/tag/package.json b/components/tag/package.json index 4bb576e74c5..1fbf1c5afdb 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tag", - "version": "10.1.0", + "version": "11.0.0-next.0", "description": "The Spectrum CSS tags component", "license": "Apache-2.0", "author": "Adobe", @@ -26,8 +26,8 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/avatar": ">=9.0.0 <10.0.0", - "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/clearbutton": ">=8.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -46,8 +46,8 @@ }, "devDependencies": { "@spectrum-css/avatar": "9.1.0", - "@spectrum-css/clearbutton": "7.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/clearbutton": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/taggroup/CHANGELOG.md b/components/taggroup/CHANGELOG.md index 2b083a1f0ec..8ad2073d7fb 100644 --- a/components/taggroup/CHANGELOG.md +++ b/components/taggroup/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/tag@11.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/taggroup/package.json b/components/taggroup/package.json index 1db26f49132..756c6d58c11 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/taggroup", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS tag group component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tag": ">=10.0.0 <11.0.0", + "@spectrum-css/tag": ">=11.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/tag": "10.1.0", + "@spectrum-css/tag": "11.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/textfield/CHANGELOG.md b/components/textfield/CHANGELOG.md index e6f9631d055..bc4af87bbc6 100644 --- a/components/textfield/CHANGELOG.md +++ b/components/textfield/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies []: + - @spectrum-css/helptext@8.0.0-next.0 + ## 8.1.0 ### Minor Changes diff --git a/components/textfield/package.json b/components/textfield/package.json index c4cfa7bb026..76834d6a43a 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/textfield", - "version": "8.1.0", + "version": "9.0.0-next.0", "description": "The Spectrum CSS textfield component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/helptext": ">=7.0.0 <8.0.0", + "@spectrum-css/helptext": ">=8.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -37,7 +37,7 @@ } }, "devDependencies": { - "@spectrum-css/helptext": "7.1.0", + "@spectrum-css/helptext": "8.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/toast/CHANGELOG.md b/components/toast/CHANGELOG.md index 566231c117b..d22914dca3e 100644 --- a/components/toast/CHANGELOG.md +++ b/components/toast/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 12.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/closebutton@7.0.0-next.0 + ## 11.1.0 ### Minor Changes diff --git a/components/toast/package.json b/components/toast/package.json index 94a06565d64..b6c13cf0776 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/toast", - "version": "11.1.0", + "version": "12.0.0-next.0", "description": "The Spectrum CSS toast component", "license": "Apache-2.0", "author": "Adobe", @@ -25,9 +25,9 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/closebutton": ">=7.0.0-next.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -45,9 +45,9 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/closebutton": "6.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/closebutton": "7.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/tooltip/CHANGELOG.md b/components/tooltip/CHANGELOG.md index a6fbb6e1e17..7224c68b4a3 100644 --- a/components/tooltip/CHANGELOG.md +++ b/components/tooltip/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.0 ### Minor Changes diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 379ecb22fc4..5b43715d76e 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tooltip", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS tooltip component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -38,7 +38,7 @@ }, "devDependencies": { "@spectrum-css/commons": "11.0.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/tray/CHANGELOG.md b/components/tray/CHANGELOG.md index cdf490c812b..ccf3d3e74e0 100644 --- a/components/tray/CHANGELOG.md +++ b/components/tray/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 6.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/button@15.0.0-next.0 + - @spectrum-css/dialog@13.0.0-next.0 + ## 5.1.0 ### Minor Changes diff --git a/components/tray/package.json b/components/tray/package.json index 5bcf38044f1..d95e6883062 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tray", - "version": "5.1.0", + "version": "6.0.0-next.0", "description": "The Spectrum CSS tray component", "license": "Apache-2.0", "author": "Adobe", @@ -25,10 +25,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=14.0.0 <15.0.0", - "@spectrum-css/dialog": ">=12.0.0 <13.0.0", + "@spectrum-css/button": ">=15.0.0-next.0", + "@spectrum-css/dialog": ">=13.0.0-next.0", "@spectrum-css/divider": ">=5.0.0 <6.0.0", - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -53,10 +53,10 @@ } }, "devDependencies": { - "@spectrum-css/button": "14.1.1", - "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/dialog": "13.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/treeview/CHANGELOG.md b/components/treeview/CHANGELOG.md index c74b7628954..dba4f589100 100644 --- a/components/treeview/CHANGELOG.md +++ b/components/treeview/CHANGELOG.md @@ -1,7 +1,11 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## 13.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 ## 12.1.0 @@ -198,6 +202,7 @@ Output for all component CSS files is now being run through a lightweight optimi ### 🛑 BREAKING CHANGES - Removes component-builder & component-builder-simple for script leveraging postcss + - Imports added to index.css and themes/express.css diff --git a/components/treeview/package.json b/components/treeview/package.json index fb3c89534d4..d0b448f2604 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/treeview", - "version": "12.1.0", + "version": "13.0.0-next.0", "description": "The Spectrum CSS Tree view component", "license": "Apache-2.0", "author": "Adobe", @@ -25,7 +25,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/icon": ">=9.0.0 <10.0.0", + "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -41,7 +41,7 @@ } }, "devDependencies": { - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/thumbnail": "8.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 9c600c151ff..309de35687d 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -30,88 +30,88 @@ }, "main": "dist/index.css", "devDependencies": { - "@spectrum-css/accordion": "7.1.0", - "@spectrum-css/actionbar": "10.1.1", - "@spectrum-css/actionbutton": "7.1.1", - "@spectrum-css/actiongroup": "6.1.0", - "@spectrum-css/actionmenu": "7.1.1", - "@spectrum-css/alertbanner": "3.1.0", - "@spectrum-css/alertdialog": "4.1.0", + "@spectrum-css/accordion": "8.0.0-next.0", + "@spectrum-css/actionbar": "11.0.0-next.0", + "@spectrum-css/actionbutton": "8.0.0-next.0", + "@spectrum-css/actiongroup": "7.0.0-next.0", + "@spectrum-css/actionmenu": "8.0.0-next.0", + "@spectrum-css/alertbanner": "4.0.0-next.0", + "@spectrum-css/alertdialog": "5.0.0-next.0", "@spectrum-css/asset": "7.1.0", - "@spectrum-css/assetcard": "5.1.0", - "@spectrum-css/assetlist": "8.1.0", + "@spectrum-css/assetcard": "6.0.0-next.0", + "@spectrum-css/assetlist": "9.0.0-next.0", "@spectrum-css/avatar": "9.1.0", - "@spectrum-css/badge": "6.1.0", - "@spectrum-css/breadcrumb": "11.1.0", - "@spectrum-css/button": "14.1.1", - "@spectrum-css/buttongroup": "9.1.0", - "@spectrum-css/calendar": "7.1.0", - "@spectrum-css/card": "11.1.0", - "@spectrum-css/checkbox": "10.1.0", - "@spectrum-css/clearbutton": "7.1.0", - "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/badge": "7.0.0-next.0", + "@spectrum-css/breadcrumb": "12.0.0-next.0", + "@spectrum-css/button": "15.0.0-next.0", + "@spectrum-css/buttongroup": "10.0.0-next.0", + "@spectrum-css/calendar": "8.0.0-next.0", + "@spectrum-css/card": "12.0.0-next.0", + "@spectrum-css/checkbox": "11.0.0-next.0", + "@spectrum-css/clearbutton": "8.0.0-next.0", + "@spectrum-css/closebutton": "7.0.0-next.0", "@spectrum-css/coachindicator": "4.1.0", - "@spectrum-css/coachmark": "9.1.1", + "@spectrum-css/coachmark": "10.0.0-next.0", "@spectrum-css/colorarea": "7.1.0", "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/colorslider": "8.1.0", "@spectrum-css/colorwheel": "6.1.0", - "@spectrum-css/combobox": "4.1.1", + "@spectrum-css/combobox": "5.0.0-next.0", "@spectrum-css/commons": "11.0.0", - "@spectrum-css/contextualhelp": "5.1.2", - "@spectrum-css/datepicker": "4.1.1", + "@spectrum-css/contextualhelp": "6.0.0-next.0", + "@spectrum-css/datepicker": "5.0.0-next.0", "@spectrum-css/dial": "5.1.0", - "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/dialog": "13.0.0-next.0", "@spectrum-css/divider": "5.1.0", - "@spectrum-css/dropindicator": "7.1.0", - "@spectrum-css/dropzone": "8.1.0", - "@spectrum-css/fieldgroup": "7.1.0", - "@spectrum-css/fieldlabel": "10.1.0", + "@spectrum-css/dropindicator": "8.0.0-next.0", + "@spectrum-css/dropzone": "9.0.0-next.0", + "@spectrum-css/fieldgroup": "8.0.0-next.0", + "@spectrum-css/fieldlabel": "11.0.0-next.0", "@spectrum-css/floatingactionbutton": "4.1.0", "@spectrum-css/form": "1.1.0", - "@spectrum-css/helptext": "7.1.0", - "@spectrum-css/icon": "9.1.0", + "@spectrum-css/helptext": "8.0.0-next.0", + "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/illustratedmessage": "9.1.0", - "@spectrum-css/infieldbutton": "6.1.0", - "@spectrum-css/infieldprogresscircle": "0.0.0", - "@spectrum-css/inlinealert": "10.1.0", + "@spectrum-css/infieldbutton": "7.0.0-next.0", + "@spectrum-css/infieldprogresscircle": "1.0.0-next.0", + "@spectrum-css/inlinealert": "11.0.0-next.0", "@spectrum-css/link": "7.1.0", "@spectrum-css/logicbutton": "6.1.0", - "@spectrum-css/menu": "9.1.0", - "@spectrum-css/meter": "1.1.0", - "@spectrum-css/miller": "8.1.0", + "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/meter": "2.0.0-next.0", + "@spectrum-css/miller": "9.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/opacitycheckerboard": "4.1.0", "@spectrum-css/page": "9.1.0", - "@spectrum-css/pagination": "10.1.0", - "@spectrum-css/picker": "9.1.1", - "@spectrum-css/pickerbutton": "6.1.1", - "@spectrum-css/popover": "8.2.0", - "@spectrum-css/progressbar": "6.1.0", + "@spectrum-css/pagination": "11.0.0-next.0", + "@spectrum-css/picker": "10.0.0-next.0", + "@spectrum-css/pickerbutton": "7.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/progressbar": "7.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/radio": "10.1.0", - "@spectrum-css/rating": "6.1.0", - "@spectrum-css/search": "8.1.0", - "@spectrum-css/sidenav": "7.1.0", - "@spectrum-css/slider": "6.1.0", + "@spectrum-css/radio": "11.0.0-next.0", + "@spectrum-css/rating": "7.0.0-next.0", + "@spectrum-css/search": "9.0.0-next.0", + "@spectrum-css/sidenav": "8.0.0-next.0", + "@spectrum-css/slider": "7.0.0-next.0", "@spectrum-css/splitview": "7.1.0", - "@spectrum-css/statuslight": "9.1.0", - "@spectrum-css/steplist": "7.1.0", - "@spectrum-css/stepper": "7.1.0", + "@spectrum-css/statuslight": "9.1.1-next.0", + "@spectrum-css/steplist": "8.0.0-next.0", + "@spectrum-css/stepper": "8.0.0-next.0", "@spectrum-css/swatch": "8.1.0", "@spectrum-css/swatchgroup": "5.1.0", "@spectrum-css/switch": "6.1.0", - "@spectrum-css/table": "8.1.0", - "@spectrum-css/tabs": "6.1.1", - "@spectrum-css/tag": "10.1.0", - "@spectrum-css/taggroup": "7.1.0", - "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/table": "9.0.0-next.0", + "@spectrum-css/tabs": "7.0.0-next.0", + "@spectrum-css/tag": "11.0.0-next.0", + "@spectrum-css/taggroup": "8.0.0-next.0", + "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/thumbnail": "8.1.0", - "@spectrum-css/toast": "11.1.0", - "@spectrum-css/tooltip": "7.1.0", - "@spectrum-css/tray": "5.1.0", - "@spectrum-css/treeview": "12.1.0", + "@spectrum-css/toast": "12.0.0-next.0", + "@spectrum-css/tooltip": "8.0.0-next.0", + "@spectrum-css/tray": "6.0.0-next.0", + "@spectrum-css/treeview": "13.0.0-next.0", "@spectrum-css/typography": "8.1.0", "@spectrum-css/underlay": "6.1.0", "@spectrum-css/well": "7.1.0", diff --git a/tools/bundle/tasks/bundler.js b/tools/bundle/tasks/bundler.js index 0ae22936d59..75d727131d6 100644 --- a/tools/bundle/tasks/bundler.js +++ b/tools/bundle/tasks/bundler.js @@ -43,6 +43,9 @@ async function validateDependencies(components) { // Capture any components that are missing from the dependencies to add them const missing = components.filter((components) => !dependencies.includes(`@spectrum-css/${components}`)); + // List the dependencies not in outdated or missing + const remaining = dependencies.filter((dependency) => !outdated.includes(dependency) && !missing.includes(dependency.replace("@spectrum-css/", ""))); + // We don't need to update the package.json if nothing has changed let hasChanged = false; const reports = []; @@ -75,6 +78,21 @@ async function validateDependencies(components) { }); } + if (remaining.length > 0) { + // Check the versions of the remaining dependencies + remaining.forEach((dependency) => { + const componentPackage = JSON.parse(fs.readFileSync(path.join(dirs.components, dependency.replace("@spectrum-css/", ""), "package.json"), "utf8")); + + // If the version in the package.json is different from the component's package.json, update it + if (packageJSON.devDependencies[dependency] !== componentPackage.version) { + hasChanged = true; + + reports.push(`${"~".yellow} ${`${dependency} in package.json`.gray}`); + packageJSON.devDependencies[dependency] = componentPackage.version; + } + }); + } + // If changes were made to the dependencies, write the package.json file if (hasChanged) { // Sort the devDependencies alphabetically diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md index 3737c251b26..e6c8982d290 100644 --- a/ui-icons/CHANGELOG.md +++ b/ui-icons/CHANGELOG.md @@ -1,9 +1,64 @@ # Change log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. - - +## 2.0.0-next.0 + +### Major Changes + +- [#2352](https://github.com/adobe/spectrum-css/pull/2352) [`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b) Thanks [@pfulton](https://github.com/pfulton)! - # Breaking change + + Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons. + + | Icon name | Migration notes | + | ----------------- | --------------- | + | Arrow75 | Deprecated | + | Arrow100 | - | + | Arrow200 | Deprecated | + | Arrow300 | Deprecated | + | Arrow400 | - | + | Arrow500 | Deprecated | + | Arrow600 | Deprecated | + | Asterisk75 | Deprecated | + | Asterisk100 | - | + | Asterisk200 | - | + | Asterisk300 | - | + | Checkmark50 | - | + | Checkmark75 | - | + | Checkmark100 | - | + | Checkmark200 | - | + | Checkmark300 | - | + | Checkmark400 | - | + | Checkmark500 | Deprecated | + | Checkmark600 | Deprecated | + | Chevron50 | - | + | Chevron75 | - | + | Chevron100 | - | + | Chevron200 | - | + | Chevron300 | - | + | Chevron400 | - | + | Chevron500 | Deprecated | + | Chevron600 | Deprecated | + | CornerTriangle75 | - | + | CornerTriangle100 | - | + | CornerTriangle200 | - | + | CornerTriangle300 | - | + | Cross75 | - | + | Cross100 | - | + | Cross200 | - | + | Cross300 | - | + | Cross400 | - | + | Cross500 | - | + | Cross600 | - | + | Dash50 | - | + | Dash75 | - | + | Dash100 | - | + | Dash200 | - | + | Dash300 | - | + | Dash400 | Deprecated | + | Dash500 | Deprecated | + | Dash600 | Deprecated | + | SingleGripper | Deprecated | + | DoubleGripper | Deprecated | + | TripleGripper | Deprecated | ## 1.1.2 @@ -11,16 +66,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @spectrum-css/ui-icons - - ## 1.1.1 🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@1.1.0...@spectrum-css/ui-icons@1.1.1) **Note:** Version bump only for package @spectrum-css/ui-icons - - ## 1.1.0 🗓 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@0.1.0...@spectrum-css/ui-icons@1.1.0) @@ -29,8 +80,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - **ui-icons:**graduate to 1.0 release ([#2366](https://github.com/adobe/spectrum-css/issues/2366))([afd369a](https://github.com/adobe/spectrum-css/commit/afd369a)) - - ## 0.1.0 🗓 2023-12-12 diff --git a/ui-icons/package.json b/ui-icons/package.json index fd1f9ca0871..c43b1c12d91 100644 --- a/ui-icons/package.json +++ b/ui-icons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/ui-icons", - "version": "1.1.2", + "version": "2.0.0-next.0", "description": "The Spectrum CSS UI icons", "license": "Apache-2.0", "author": "Adobe", diff --git a/yarn.lock b/yarn.lock index 31b331e0fc6..4e10ae78ddd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6,8 +6,8 @@ __metadata: cacheKey: 10c0 "@actions/artifact@npm:^2.2.1": - version: 2.2.1 - resolution: "@actions/artifact@npm:2.2.1" + version: 2.2.2 + resolution: "@actions/artifact@npm:2.2.2" dependencies: "@actions/core": "npm:^1.10.0" "@actions/github": "npm:^5.1.1" @@ -20,9 +20,8 @@ __metadata: "@protobuf-ts/plugin": "npm:^2.2.3-alpha.1" archiver: "npm:^7.0.1" jwt-decode: "npm:^3.1.2" - twirp-ts: "npm:^2.5.0" unzip-stream: "npm:^0.3.1" - checksum: 10c0/ed4689b9df2f362e7fead772953f1b13bf348104174482123d7ab247fc4a5bd39fc21d093155789203755a06415811e6705110b6dc0aa4209006ae9bb1aef3d9 + checksum: 10c0/e58c3d07e1ec29ddb5b5952db369cc1afb7f6d2f063f697665a56806b50d853d42894092738ba061869a65a54d52e63dfec6639894f57377796a7dbb99aa17cc languageName: node linkType: hard @@ -90,12 +89,12 @@ __metadata: linkType: hard "@actions/http-client@npm:^2.0.1, @actions/http-client@npm:^2.1.0, @actions/http-client@npm:^2.2.0": - version: 2.2.1 - resolution: "@actions/http-client@npm:2.2.1" + version: 2.2.3 + resolution: "@actions/http-client@npm:2.2.3" dependencies: tunnel: "npm:^0.0.6" undici: "npm:^5.25.4" - checksum: 10c0/371771e68fcfe1383e59657eb5bc421aba5e1826f5e497efd826236b64fc1ff11f0bc91f936d7f1086f6bb3fd209736425a4d357b98fdfb7a8d054cbb84680e8 + checksum: 10c0/13141b66a42aa4afd8c50f7479e13a5cdb5084ccb3c73ec48894b8029743389a3d2bf8cdc18e23fb70cd33995740526dd308815613907571e897c3aa1e5eada6 languageName: node linkType: hard @@ -107,9 +106,9 @@ __metadata: linkType: hard "@adobe/css-tools@npm:^4.4.0": - version: 4.4.0 - resolution: "@adobe/css-tools@npm:4.4.0" - checksum: 10c0/d65ddc719389bf469097df80fb16a8af48a973dea4b57565789d70ac8e7ab4987e6dc0095da3ed5dc16c1b6f8960214a7590312eeda8abd543d91fd0f59e6c94 + version: 4.4.2 + resolution: "@adobe/css-tools@npm:4.4.2" + checksum: 10c0/19433666ad18536b0ed05d4b53fbb3dd6ede266996796462023ec77a90b484890ad28a3e528cdf3ab8a65cb2fcdff5d8feb04db6bc6eed6ca307c40974239c94 languageName: node linkType: hard @@ -220,16 +219,7 @@ __metadata: languageName: node linkType: hard -"@azure/abort-controller@npm:^1.0.0": - version: 1.1.0 - resolution: "@azure/abort-controller@npm:1.1.0" - dependencies: - tslib: "npm:^2.2.0" - checksum: 10c0/bb79f0faaa9e9c1ae3c4ec2523ea23ee0879cc491abb4b3ac2dd56c2cc2dfe4b7e8522ffa866d39c7145c0dd61387711368afe0d4eb6534daba7b67ed0a2a730 - languageName: node - linkType: hard - -"@azure/abort-controller@npm:^2.0.0": +"@azure/abort-controller@npm:^2.0.0, @azure/abort-controller@npm:^2.1.2": version: 2.1.2 resolution: "@azure/abort-controller@npm:2.1.2" dependencies: @@ -238,14 +228,14 @@ __metadata: languageName: node linkType: hard -"@azure/core-auth@npm:^1.4.0": - version: 1.7.2 - resolution: "@azure/core-auth@npm:1.7.2" +"@azure/core-auth@npm:^1.4.0, @azure/core-auth@npm:^1.8.0": + version: 1.9.0 + resolution: "@azure/core-auth@npm:1.9.0" dependencies: "@azure/abort-controller": "npm:^2.0.0" - "@azure/core-util": "npm:^1.1.0" + "@azure/core-util": "npm:^1.11.0" tslib: "npm:^2.6.2" - checksum: 10c0/2b4c489855308cea46363dc8f216eeb63cb85aea08f1ab7cff0a6e47604eed2b0fc46415d7f6d71da0aa7922b81c631920d05698eb14454b65be07825c5c599a + checksum: 10c0/b7d8f33b81a8c9a76531acacc7af63d888429f0d763bb1ab8e28e91ddbf1626fc19cf8ca74f79c39b0a3e5acb315bdc4c4276fb979816f315712ea1bd611273d languageName: node linkType: hard @@ -265,13 +255,13 @@ __metadata: linkType: hard "@azure/core-http-compat@npm:^2.0.0": - version: 2.1.2 - resolution: "@azure/core-http-compat@npm:2.1.2" + version: 2.2.0 + resolution: "@azure/core-http-compat@npm:2.2.0" dependencies: "@azure/abort-controller": "npm:^2.0.0" "@azure/core-client": "npm:^1.3.0" - "@azure/core-rest-pipeline": "npm:^1.3.0" - checksum: 10c0/e7b5374819d740c96c075956c756a753b7e9f6d7774bbadcc5000c3c4f808554e4d7146ccde7b94bcb21c39ed4a7e5b043b2a3b7d208b959310ea7e1440decca + "@azure/core-rest-pipeline": "npm:^1.19.0" + checksum: 10c0/0e74aeac740b289f87c11b44980959b41e9b088981587e936a0d6b0c672d59620d22461827e68930dec7f4f2daba86a727f2bc73775f59620d10c4f9f943fc99 languageName: node linkType: hard @@ -296,7 +286,7 @@ __metadata: languageName: node linkType: hard -"@azure/core-rest-pipeline@npm:^1.10.1, @azure/core-rest-pipeline@npm:^1.3.0, @azure/core-rest-pipeline@npm:^1.9.1": +"@azure/core-rest-pipeline@npm:^1.10.1, @azure/core-rest-pipeline@npm:^1.9.1": version: 1.16.2 resolution: "@azure/core-rest-pipeline@npm:1.16.2" dependencies: @@ -312,16 +302,42 @@ __metadata: languageName: node linkType: hard +"@azure/core-rest-pipeline@npm:^1.19.0": + version: 1.19.0 + resolution: "@azure/core-rest-pipeline@npm:1.19.0" + dependencies: + "@azure/abort-controller": "npm:^2.0.0" + "@azure/core-auth": "npm:^1.8.0" + "@azure/core-tracing": "npm:^1.0.1" + "@azure/core-util": "npm:^1.11.0" + "@azure/logger": "npm:^1.0.0" + http-proxy-agent: "npm:^7.0.0" + https-proxy-agent: "npm:^7.0.0" + tslib: "npm:^2.6.2" + checksum: 10c0/7ca47993c049f27b342b012262a8acdeeb19433f6d15c0f82ad177ad78ddd1640ab6b1eed810525476784f17bb0f03abd1b4e2ba4c3aec858f9b7bf81c40db66 + languageName: node + linkType: hard + "@azure/core-tracing@npm:^1.0.0, @azure/core-tracing@npm:^1.0.1, @azure/core-tracing@npm:^1.1.2": - version: 1.1.2 - resolution: "@azure/core-tracing@npm:1.1.2" + version: 1.2.0 + resolution: "@azure/core-tracing@npm:1.2.0" + dependencies: + tslib: "npm:^2.6.2" + checksum: 10c0/7cd114b3c11730a1b8b71d89b64f9d033dfe0710f2364ef65645683381e2701173c08ff8625a0b0bc65bb3c3e0de46c80fdb2735e37652425489b65a283f043d + languageName: node + linkType: hard + +"@azure/core-util@npm:^1.11.0, @azure/core-util@npm:^1.2.0, @azure/core-util@npm:^1.6.1": + version: 1.11.0 + resolution: "@azure/core-util@npm:1.11.0" dependencies: + "@azure/abort-controller": "npm:^2.0.0" tslib: "npm:^2.6.2" - checksum: 10c0/0e844d581117ae81318a503ddfc143146b847ed9152d0c84f20fdc4cb0b2187a4e9da29aed13d5b7a201f39fe601a59c4db6455005ed8e0d3b5aab0ee77a56e1 + checksum: 10c0/245c93ec7fb3f2cb3a0b2f3a3be8d02ee401acba3cdd71620aa9e4e3ca50d831849f692332327bdbe1238ab979a76218f16a5166488ee31d5b67004298d110a3 languageName: node linkType: hard -"@azure/core-util@npm:^1.1.0, @azure/core-util@npm:^1.2.0, @azure/core-util@npm:^1.6.1, @azure/core-util@npm:^1.9.0": +"@azure/core-util@npm:^1.9.0": version: 1.9.1 resolution: "@azure/core-util@npm:1.9.1" dependencies: @@ -331,30 +347,30 @@ __metadata: languageName: node linkType: hard -"@azure/core-xml@npm:^1.3.2": - version: 1.4.2 - resolution: "@azure/core-xml@npm:1.4.2" +"@azure/core-xml@npm:^1.4.3": + version: 1.4.4 + resolution: "@azure/core-xml@npm:1.4.4" dependencies: - fast-xml-parser: "npm:^4.3.2" + fast-xml-parser: "npm:^4.4.1" tslib: "npm:^2.6.2" - checksum: 10c0/621fb9f44e022e9ca2d43149444bfa12e69c6c73d4fe488c4476b55c3f203fdbddb252a94be03e88e9d42386d1697d235d72b262f2957f6b5615ec0f3d85c38f + checksum: 10c0/92c643a9b80272b27a7bf9b756627f21beec5289995f3188099f056d255de702e1f8959bfc0f14d7445a1f6da4d037957ba47d757545ade5e77f610c4124c3fa languageName: node linkType: hard "@azure/logger@npm:^1.0.0": - version: 1.1.3 - resolution: "@azure/logger@npm:1.1.3" + version: 1.1.4 + resolution: "@azure/logger@npm:1.1.4" dependencies: tslib: "npm:^2.6.2" - checksum: 10c0/fc7c9e89c92e8f075738577f017f2adb3ff99d8d94ea2face4b70cac3418dcecfb76e812e79f1cbbc2c212e1e38c728370fab071291a3ea5496a0e96855f8f64 + checksum: 10c0/5bc7792ef334e18f4893814e83cc61780a0effb927ba898095c75df1a01e1f3093dc7a63b6de549694cef76c25f43db850b82a48ec0fab5f9f1c1d2053af791d languageName: node linkType: hard "@azure/storage-blob@npm:^12.15.0": - version: 12.24.0 - resolution: "@azure/storage-blob@npm:12.24.0" + version: 12.26.0 + resolution: "@azure/storage-blob@npm:12.26.0" dependencies: - "@azure/abort-controller": "npm:^1.0.0" + "@azure/abort-controller": "npm:^2.1.2" "@azure/core-auth": "npm:^1.4.0" "@azure/core-client": "npm:^1.6.2" "@azure/core-http-compat": "npm:^2.0.0" @@ -363,25 +379,15 @@ __metadata: "@azure/core-rest-pipeline": "npm:^1.10.1" "@azure/core-tracing": "npm:^1.1.2" "@azure/core-util": "npm:^1.6.1" - "@azure/core-xml": "npm:^1.3.2" + "@azure/core-xml": "npm:^1.4.3" "@azure/logger": "npm:^1.0.0" events: "npm:^3.0.0" tslib: "npm:^2.2.0" - checksum: 10c0/d42d476ff54b6a24172d487dc7c05543a9f6402ee85bc3e7a68356159d70821d2db8f0f4e2238c6004c91c11b6ee4d8b573ac9f198dcbd0ee76f87eac13f13ff - languageName: node - linkType: hard - -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4": - version: 7.24.7 - resolution: "@babel/code-frame@npm:7.24.7" - dependencies: - "@babel/highlight": "npm:^7.24.7" - picocolors: "npm:^1.0.0" - checksum: 10c0/ab0af539473a9f5aeaac7047e377cb4f4edd255a81d84a76058595f8540784cc3fbe8acf73f1e073981104562490aabfb23008cd66dc677a456a4ed5390fdde6 + checksum: 10c0/069b7a85dddb33ee793efd74fbc1a3377c6d14dbb11094c2ebae87e324f16d23292806d5dcdf04280456dafc4d960e847968f6f01e384039b47363d61faf1017 languageName: node linkType: hard -"@babel/code-frame@npm:^7.12.13": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.26.2": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" dependencies: @@ -392,44 +398,33 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0": - version: 7.26.0 - resolution: "@babel/code-frame@npm:7.26.0" - dependencies: - "@babel/helper-validator-identifier": "npm:^7.25.9" - js-tokens: "npm:^4.0.0" - picocolors: "npm:^1.0.0" - checksum: 10c0/46f7e367714be736b52ea3c01b24f47e2102e210fb83021d1c8237d8fc511b9538909e16e2fcdbb5cb6173e0794e28624309a59014e52fcfb7bde908f5284388 - languageName: node - linkType: hard - -"@babel/compat-data@npm:^7.25.9": - version: 7.26.0 - resolution: "@babel/compat-data@npm:7.26.0" - checksum: 10c0/6325c9151a3c9b0a3a807e854a26255ef66d989bff331475a935af9bb18f160e0fffe6aed550e4e96b63f91efcd874bfbaab2a1f4a2f8d25645d712a0de590fb +"@babel/compat-data@npm:^7.26.5": + version: 7.26.8 + resolution: "@babel/compat-data@npm:7.26.8" + checksum: 10c0/66408a0388c3457fff1c2f6c3a061278dd7b3d2f0455ea29bb7b187fa52c60ae8b4054b3c0a184e21e45f0eaac63cf390737bc7504d1f4a088a6e7f652c068ca languageName: node linkType: hard "@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.9, @babel/core@npm:^7.26.0, @babel/core@npm:^7.7.5": - version: 7.26.0 - resolution: "@babel/core@npm:7.26.0" + version: 7.26.9 + resolution: "@babel/core@npm:7.26.9" dependencies: "@ampproject/remapping": "npm:^2.2.0" - "@babel/code-frame": "npm:^7.26.0" - "@babel/generator": "npm:^7.26.0" - "@babel/helper-compilation-targets": "npm:^7.25.9" + "@babel/code-frame": "npm:^7.26.2" + "@babel/generator": "npm:^7.26.9" + "@babel/helper-compilation-targets": "npm:^7.26.5" "@babel/helper-module-transforms": "npm:^7.26.0" - "@babel/helpers": "npm:^7.26.0" - "@babel/parser": "npm:^7.26.0" - "@babel/template": "npm:^7.25.9" - "@babel/traverse": "npm:^7.25.9" - "@babel/types": "npm:^7.26.0" + "@babel/helpers": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" + "@babel/template": "npm:^7.26.9" + "@babel/traverse": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" convert-source-map: "npm:^2.0.0" debug: "npm:^4.1.0" gensync: "npm:^1.0.0-beta.2" json5: "npm:^2.2.3" semver: "npm:^6.3.1" - checksum: 10c0/91de73a7ff5c4049fbc747930aa039300e4d2670c2a91f5aa622f1b4868600fc89b01b6278385fbcd46f9574186fa3d9b376a9e7538e50f8d118ec13cfbcb63e + checksum: 10c0/ed7212ff42a9453765787019b7d191b167afcacd4bd8fec10b055344ef53fa0cc648c9a80159ae4ecf870016a6318731e087042dcb68d1a2a9d34eb290dc014b languageName: node linkType: hard @@ -446,29 +441,29 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0": - version: 7.26.0 - resolution: "@babel/generator@npm:7.26.0" +"@babel/generator@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/generator@npm:7.26.9" dependencies: - "@babel/parser": "npm:^7.26.0" - "@babel/types": "npm:^7.26.0" + "@babel/parser": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" "@jridgewell/gen-mapping": "npm:^0.3.5" "@jridgewell/trace-mapping": "npm:^0.3.25" jsesc: "npm:^3.0.2" - checksum: 10c0/b6bb9185f19a97eaf58e04a6d39a13237076678e7ed16b6321dea914535d4bf6a8d7727c9dcb65539845aa0096b326eb67be4bab764bd74bcfd848e2eda68609 + checksum: 10c0/6b78872128205224a9a9761b9ea7543a9a7902a04b82fc2f6801ead4de8f59056bab3fd17b1f834ca7b049555fc4c79234b9a6230dd9531a06525306050becad languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.25.9": - version: 7.25.9 - resolution: "@babel/helper-compilation-targets@npm:7.25.9" +"@babel/helper-compilation-targets@npm:^7.26.5": + version: 7.26.5 + resolution: "@babel/helper-compilation-targets@npm:7.26.5" dependencies: - "@babel/compat-data": "npm:^7.25.9" + "@babel/compat-data": "npm:^7.26.5" "@babel/helper-validator-option": "npm:^7.25.9" browserslist: "npm:^4.24.0" lru-cache: "npm:^5.1.1" semver: "npm:^6.3.1" - checksum: 10c0/a6b26a1e4222e69ef8e62ee19374308f060b007828bc11c65025ecc9e814aba21ff2175d6d3f8bf53c863edd728ee8f94ba7870f8f90a37d39552ad9933a8aaa + checksum: 10c0/9da5c77e5722f1a2fcb3e893049a01d414124522bbf51323bb1a0c9dcd326f15279836450fc36f83c9e8a846f3c40e88be032ed939c5a9840922bed6073edfb4 languageName: node linkType: hard @@ -537,25 +532,13 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.26.0": - version: 7.26.0 - resolution: "@babel/helpers@npm:7.26.0" - dependencies: - "@babel/template": "npm:^7.25.9" - "@babel/types": "npm:^7.26.0" - checksum: 10c0/343333cced6946fe46617690a1d0789346960910225ce359021a88a60a65bc0d791f0c5d240c0ed46cf8cc63b5fd7df52734ff14e43b9c32feae2b61b1647097 - languageName: node - linkType: hard - -"@babel/highlight@npm:^7.24.7": - version: 7.24.7 - resolution: "@babel/highlight@npm:7.24.7" +"@babel/helpers@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/helpers@npm:7.26.9" dependencies: - "@babel/helper-validator-identifier": "npm:^7.24.7" - chalk: "npm:^2.4.2" - js-tokens: "npm:^4.0.0" - picocolors: "npm:^1.0.0" - checksum: 10c0/674334c571d2bb9d1c89bdd87566383f59231e16bcdcf5bb7835babdf03c9ae585ca0887a7b25bdf78f303984af028df52831c7989fecebb5101cc132da9393a + "@babel/template": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + checksum: 10c0/3d4dbc4a33fe4181ed810cac52318b578294745ceaec07e2f6ecccf6cda55d25e4bfcea8f085f333bf911c9e1fc13320248dd1d5315ab47ad82ce1077410df05 languageName: node linkType: hard @@ -579,14 +562,14 @@ __metadata: languageName: node linkType: hard -"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0": - version: 7.26.1 - resolution: "@babel/parser@npm:7.26.1" +"@babel/parser@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/parser@npm:7.26.9" dependencies: - "@babel/types": "npm:^7.26.0" + "@babel/types": "npm:^7.26.9" bin: parser: ./bin/babel-parser.js - checksum: 10c0/dc7d4e6b7eb667fa0784e7e2c3f6f92ca12ad72242f6d4311995310dae55093f02acdb595b69b0dbbf04cb61ad87156ac03186ff32eacfa35149c655bc22c14b + checksum: 10c0/4b9ef3c9a0d4c328e5e5544f50fe8932c36f8a2c851e7f14a85401487cd3da75cad72c2e1bcec1eac55599a6bbb2fdc091f274c4fcafa6bdd112d4915ff087fc languageName: node linkType: hard @@ -778,11 +761,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1": - version: 7.24.8 - resolution: "@babel/runtime@npm:7.24.8" + version: 7.26.9 + resolution: "@babel/runtime@npm:7.26.9" dependencies: regenerator-runtime: "npm:^0.14.0" - checksum: 10c0/f24b30af6b3ecae19165b3b032f9bc37b2d1769677bd63b69a6f81061967cfc847aa822518402ea6616b1d301d7eb46986b99c9f69cdb5880834fca2e6b34881 + checksum: 10c0/e8517131110a6ec3a7360881438b85060e49824e007f4a64b5dfa9192cf2bb5c01e84bfc109f02d822c7edb0db926928dd6b991e3ee460b483fb0fac43152d9b languageName: node linkType: hard @@ -795,29 +778,29 @@ __metadata: languageName: node linkType: hard -"@babel/template@npm:^7.22.5, @babel/template@npm:^7.25.9, @babel/template@npm:^7.3.3": - version: 7.25.9 - resolution: "@babel/template@npm:7.25.9" +"@babel/template@npm:^7.22.5, @babel/template@npm:^7.26.9, @babel/template@npm:^7.3.3": + version: 7.26.9 + resolution: "@babel/template@npm:7.26.9" dependencies: - "@babel/code-frame": "npm:^7.25.9" - "@babel/parser": "npm:^7.25.9" - "@babel/types": "npm:^7.25.9" - checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab + "@babel/code-frame": "npm:^7.26.2" + "@babel/parser": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + checksum: 10c0/019b1c4129cc01ad63e17529089c2c559c74709d225f595eee017af227fee11ae8a97a6ab19ae6768b8aa22d8d75dcb60a00b28f52e9fa78140672d928bc1ae9 languageName: node linkType: hard -"@babel/traverse@npm:^7.25.9": - version: 7.25.9 - resolution: "@babel/traverse@npm:7.25.9" +"@babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/traverse@npm:7.26.9" dependencies: - "@babel/code-frame": "npm:^7.25.9" - "@babel/generator": "npm:^7.25.9" - "@babel/parser": "npm:^7.25.9" - "@babel/template": "npm:^7.25.9" - "@babel/types": "npm:^7.25.9" + "@babel/code-frame": "npm:^7.26.2" + "@babel/generator": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" + "@babel/template": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 10c0/e90be586a714da4adb80e6cb6a3c5cfcaa9b28148abdafb065e34cc109676fc3db22cf98cd2b2fff66ffb9b50c0ef882cab0f466b6844be0f6c637b82719bba1 + checksum: 10c0/51dd57fa39ea34d04816806bfead04c74f37301269d24c192d1406dc6e244fea99713b3b9c5f3e926d9ef6aa9cd5c062ad4f2fc1caa9cf843d5e864484ac955e languageName: node linkType: hard @@ -842,7 +825,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0": +"@babel/types@npm:^7.25.9": version: 7.26.0 resolution: "@babel/types@npm:7.26.0" dependencies: @@ -852,6 +835,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/types@npm:7.26.9" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/999c56269ba00e5c57aa711fbe7ff071cd6990bafd1b978341ea7572cc78919986e2aa6ee51dacf4b6a7a6fa63ba4eb3f1a03cf55eee31b896a56d068b895964 + languageName: node + linkType: hard + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -860,21 +853,21 @@ __metadata: linkType: hard "@bcoe/v8-coverage@npm:^1.0.1": - version: 1.0.1 - resolution: "@bcoe/v8-coverage@npm:1.0.1" - checksum: 10c0/8a5df36b79715f54f419052966dfd7900eef13dadc31cc9214bd69b8b3eabdc5a3013612453edf547fa35cbeb5fd57a12e7910a75a845aac410d81d08511944a + version: 1.0.2 + resolution: "@bcoe/v8-coverage@npm:1.0.2" + checksum: 10c0/1eb1dc93cc17fb7abdcef21a6e7b867d6aa99a7ec88ec8207402b23d9083ab22a8011213f04b2cf26d535f1d22dc26139b7929e6c2134c254bd1e14ba5e678c3 languageName: node linkType: hard -"@changesets/apply-release-plan@npm:^7.0.7": - version: 7.0.7 - resolution: "@changesets/apply-release-plan@npm:7.0.7" +"@changesets/apply-release-plan@npm:^7.0.10": + version: 7.0.10 + resolution: "@changesets/apply-release-plan@npm:7.0.10" dependencies: - "@changesets/config": "npm:^3.0.5" + "@changesets/config": "npm:^3.1.1" "@changesets/get-version-range-type": "npm:^0.4.0" "@changesets/git": "npm:^3.0.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" detect-indent: "npm:^6.0.0" fs-extra: "npm:^7.0.1" @@ -883,62 +876,62 @@ __metadata: prettier: "npm:^2.7.1" resolve-from: "npm:^5.0.0" semver: "npm:^7.5.3" - checksum: 10c0/6ecbcccd46832b230b0c734ec2fc77648401f837dea91a7bf63be07207e4bb01cc6e1d6a05644bb85b6ee4b556bad031f43af7e8c742b873ee1313edb0a03929 + checksum: 10c0/4ee5951448c26bbf73fac5c9a0785d5bb0cc3f2e6c1ffc9337766b446fe79a7b018834be2a4723938faec0d331aa30f1d6c7ea47db48d7a7babe37862645dd57 languageName: node linkType: hard -"@changesets/assemble-release-plan@npm:^6.0.5": - version: 6.0.5 - resolution: "@changesets/assemble-release-plan@npm:6.0.5" +"@changesets/assemble-release-plan@npm:^6.0.6": + version: 6.0.6 + resolution: "@changesets/assemble-release-plan@npm:6.0.6" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" semver: "npm:^7.5.3" - checksum: 10c0/6e4b699d67c9f1e78133a33bba7bb46b3119d6497e1f1dba5033905fd60911c90239c67ad6c4823ccd44225dee40d0689083be40f8c86ea30c5535e12d8db041 + checksum: 10c0/292c6570310818f5427b97f1ddfd518ae4493f47e2674ca40bb11251808a20d7f07bff548c4277b1ad5ddfe53602b69ae6628fc45864286e34edfb5f7c2e19a0 languageName: node linkType: hard -"@changesets/changelog-git@npm:^0.2.0": - version: 0.2.0 - resolution: "@changesets/changelog-git@npm:0.2.0" +"@changesets/changelog-git@npm:^0.2.1": + version: 0.2.1 + resolution: "@changesets/changelog-git@npm:0.2.1" dependencies: - "@changesets/types": "npm:^6.0.0" - checksum: 10c0/d94df555656ac4ac9698d87a173b1955227ac0f1763d59b9b4d4f149ab3f879ca67603e48407b1dfdadaef4e7882ae7bbc7b7be160a45a55f05442004bdc61bd + "@changesets/types": "npm:^6.1.0" + checksum: 10c0/6a6fb315ffb2266fcb8f32ae9a60ccdb5436e52350a2f53beacf9822d3355f9052aba5001a718e12af472b4a8fabd69b408d0b11c02ac909ba7a183d27a9f7fd languageName: node linkType: hard "@changesets/changelog-github@npm:^0.5.0": - version: 0.5.0 - resolution: "@changesets/changelog-github@npm:0.5.0" + version: 0.5.1 + resolution: "@changesets/changelog-github@npm:0.5.1" dependencies: "@changesets/get-github-info": "npm:^0.6.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" dotenv: "npm:^8.1.0" - checksum: 10c0/fc6a6947185af6f1c7543c572ca6e46d733188586ab873c75476f389fb11c675df1c230a56394d490aa9a7f13bdf88d23541265deeda77f167d06b0cc3206923 + checksum: 10c0/0ce02d3d7d6bedf86ca2a2bf88ab304ee0f4d5e491edd912769d9420386702876c17850f739f59fe6f90da690e11803cb2047eeef3a6abf411604c7ccab375fb languageName: node linkType: hard "@changesets/cli@npm:^2.27.11": - version: 2.27.11 - resolution: "@changesets/cli@npm:2.27.11" + version: 2.28.1 + resolution: "@changesets/cli@npm:2.28.1" dependencies: - "@changesets/apply-release-plan": "npm:^7.0.7" - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/changelog-git": "npm:^0.2.0" - "@changesets/config": "npm:^3.0.5" + "@changesets/apply-release-plan": "npm:^7.0.10" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/changelog-git": "npm:^0.2.1" + "@changesets/config": "npm:^3.1.1" "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/get-release-plan": "npm:^4.0.6" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/get-release-plan": "npm:^4.0.8" "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" - "@changesets/write": "npm:^0.3.2" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" + "@changesets/write": "npm:^0.4.0" "@manypkg/get-packages": "npm:^1.1.3" ansi-colors: "npm:^4.1.3" ci-info: "npm:^3.7.0" @@ -955,22 +948,22 @@ __metadata: term-size: "npm:^2.1.0" bin: changeset: bin.js - checksum: 10c0/dcaad88c6cd671c5a37005358ed3ab51b5f6f74e2dc1747af060e7bac6918a1ad31e122ca51ef1d337cb291e10997ad4e9156878aa90bf977ed8d38456c603da + checksum: 10c0/f965b56fa533f91b5de0f5fd5b09fac46662f023dafbe474d3fc7ceb71629dce4783a37429a927d50292a7ea95c0694e5a8f0c143d9cbba95d28a4d11ab8106b languageName: node linkType: hard -"@changesets/config@npm:^3.0.5": - version: 3.0.5 - resolution: "@changesets/config@npm:3.0.5" +"@changesets/config@npm:^3.1.1": + version: 3.1.1 + resolution: "@changesets/config@npm:3.1.1" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" + "@changesets/get-dependents-graph": "npm:^2.1.3" "@changesets/logger": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" micromatch: "npm:^4.0.8" - checksum: 10c0/fead5b29b322c247c00bb6e5fbe5d580c290c1f68c4a507b83a06ea7267100c1242d7fc7aeb29f1389377ec6d8ebf39f0387ee0bdbcc338b2a5ab2487e0c8342 + checksum: 10c0/e6e529ca9525d1550cc2155a01a477c5b923e084985cb5cb15b6efc06da543c2faf623dd67d305688ffa8a8fc9d48f1ba74ad6653ce230183e40f10ffaa0c2dc languageName: node linkType: hard @@ -983,15 +976,15 @@ __metadata: languageName: node linkType: hard -"@changesets/get-dependents-graph@npm:^2.1.2": - version: 2.1.2 - resolution: "@changesets/get-dependents-graph@npm:2.1.2" +"@changesets/get-dependents-graph@npm:^2.1.3": + version: 2.1.3 + resolution: "@changesets/get-dependents-graph@npm:2.1.3" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" picocolors: "npm:^1.1.0" semver: "npm:^7.5.3" - checksum: 10c0/f2674ccb71f989b2abf2088953548b6de503e17d0b1f5b0147c4ef1672a5a2dd5201b828b419ccb67841e7812d1fbe1607d12668ea8972b3d0de5a1d2b38b61b + checksum: 10c0/b9d9992440b7e09dcaf22f57d28f1d8e0e31996e1bc44dbbfa1801e44f93fa49ebba6f9356c60f6ff0bd85cd0f0d0b8602f7e0f2addc5be647b686e6f8985f70 languageName: node linkType: hard @@ -1005,17 +998,17 @@ __metadata: languageName: node linkType: hard -"@changesets/get-release-plan@npm:^4.0.6": - version: 4.0.6 - resolution: "@changesets/get-release-plan@npm:4.0.6" +"@changesets/get-release-plan@npm:^4.0.8": + version: 4.0.8 + resolution: "@changesets/get-release-plan@npm:4.0.8" dependencies: - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/config": "npm:^3.0.5" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/types": "npm:^6.0.0" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/config": "npm:^3.1.1" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/7c35f1dc5bf6be17b0e2aabc7c2fceec68b4a9c73087d946a7a1691ce5221f16d172be3ae502d4daffdae1e567cdaf7022004d2fb745807ddc74e403c756c246 + checksum: 10c0/b638f83683264818ea6cb729a3fd10f9edf29c61c7acee15ce321287cacbe03700706a20c0b531fdb3bbb23bda8967f4c6cbef08db207189fb7289313f473a1a languageName: node linkType: hard @@ -1048,50 +1041,50 @@ __metadata: languageName: node linkType: hard -"@changesets/parse@npm:^0.4.0": - version: 0.4.0 - resolution: "@changesets/parse@npm:0.4.0" +"@changesets/parse@npm:^0.4.1": + version: 0.4.1 + resolution: "@changesets/parse@npm:0.4.1" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" js-yaml: "npm:^3.13.1" - checksum: 10c0/8e76f8540aceb2263eb76c97f027c1990fc069bf275321ad0aabf843cb51bc6711b13118eda35c701a30a36d26f48e75f7afc14e9a5c863f8a98091021fd5d61 + checksum: 10c0/8caf73b48addb1add246f0287f0dcbd47ca0444b33f251b6208dad36de9c21d2654f0ae0527e5bf14b075be23144b59f48a36e2d87850fb7c004050f07461fdc languageName: node linkType: hard -"@changesets/pre@npm:^2.0.1": - version: 2.0.1 - resolution: "@changesets/pre@npm:2.0.1" +"@changesets/pre@npm:^2.0.2": + version: 2.0.2 + resolution: "@changesets/pre@npm:2.0.2" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" - checksum: 10c0/aacd4a71cab8a511702903bee50434188f300503a1207a08b89d09dc575981c28af77b7357a610504ce48d101e67308fc6ed4427ac2a61d162de4d01a2a0f695 + checksum: 10c0/0af9396d84c47a88d79b757e9db4e3579b6620260f92c243b8349e7fcefca3c2652583f6d215c13115bed5d5cdc30c975f307fd6acbb89d205b1ba2ae403b918 languageName: node linkType: hard -"@changesets/read@npm:^0.6.2": - version: 0.6.2 - resolution: "@changesets/read@npm:0.6.2" +"@changesets/read@npm:^0.6.3": + version: 0.6.3 + resolution: "@changesets/read@npm:0.6.3" dependencies: "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/parse": "npm:^0.4.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/parse": "npm:^0.4.1" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" p-filter: "npm:^2.1.0" picocolors: "npm:^1.1.0" - checksum: 10c0/a63efb4605c56ac216734fa5749f4f4ed9f8ab0ec2cbef96530b99c244ab84b2a47514d34f8f656e517237b65a456dd274e599b9c745f351719baeb503d0d6c3 + checksum: 10c0/4c2eac60aab0a6b14ad5a2ed2f57427019fe567dd6d2c6e122bd3cbf7f69903dcec6c864a67c39544ed011369223c838e498212303404a7f884428f4366f10da languageName: node linkType: hard -"@changesets/should-skip-package@npm:^0.1.1": - version: 0.1.1 - resolution: "@changesets/should-skip-package@npm:0.1.1" +"@changesets/should-skip-package@npm:^0.1.2": + version: 0.1.2 + resolution: "@changesets/should-skip-package@npm:0.1.2" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/4fb0a17538492db15733a9514560ff1d4dfbd94882a349495a6585eb675f9414aa74020aa886f1f72542ca70d5d96a842db2f52b08fcb571705b1d9ed3632e57 + checksum: 10c0/484e339e7d6e6950e12bff4eda6e8eccb077c0fbb1f09dd95d2ae948b715226a838c71eaf50cd2d7e0e631ce3bfb1ca93ac752436e6feae5b87aece2e917b440 languageName: node linkType: hard @@ -1102,28 +1095,28 @@ __metadata: languageName: node linkType: hard -"@changesets/types@npm:^6.0.0": - version: 6.0.0 - resolution: "@changesets/types@npm:6.0.0" - checksum: 10c0/e755f208792547e3b9ece15ce4da22466267da810c6fd87d927a1b8cec4d7fb7f0eea0d1a7585747676238e3e4ba1ffdabe016ccb05cfa537b4e4b03ec399f41 +"@changesets/types@npm:^6.1.0": + version: 6.1.0 + resolution: "@changesets/types@npm:6.1.0" + checksum: 10c0/b4cea3a4465d1eaf0bbd7be1e404aca5a055a61d4cc72aadcb73bbbda1670b4022736b8d3052616cbf1f451afa0637545d077697f4b923236539af9cd5abce6c languageName: node linkType: hard -"@changesets/write@npm:^0.3.2": - version: 0.3.2 - resolution: "@changesets/write@npm:0.3.2" +"@changesets/write@npm:^0.4.0": + version: 0.4.0 + resolution: "@changesets/write@npm:0.4.0" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" - human-id: "npm:^1.0.2" + human-id: "npm:^4.1.1" prettier: "npm:^2.7.1" - checksum: 10c0/1e00af0a82a780f74e03359d672690b35b6c788891e515a37488fca756109471f0d2da4904185b758a38d26e5cc2f426de4a2201ca3b6e26cf03ab747773690f + checksum: 10c0/311f4d0e536d1b5f2d3f9053537d62b2d4cdbd51e1d2767807ac9d1e0f380367f915d2ad370e5c73902d5a54bffd282d53fff5418c8ad31df51751d652bea826 languageName: node linkType: hard "@chromatic-com/storybook@npm:^3.2.3": - version: 3.2.3 - resolution: "@chromatic-com/storybook@npm:3.2.3" + version: 3.2.4 + resolution: "@chromatic-com/storybook@npm:3.2.4" dependencies: chromatic: "npm:^11.15.0" filesize: "npm:^10.0.12" @@ -1132,16 +1125,16 @@ __metadata: strip-ansi: "npm:^7.1.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/23c59b7d225347d4af8cb6a7596da3417dc3abc2d5036c4ef5cee2852b994a16b5996a1bd1a584bb56e97266d85ce9ae7daeeac296b3060d6b80b14cad10d9d1 + checksum: 10c0/57d466644d859ca58a853cc8316d3b0a64c617216ccf30d743c5fbf24c90859271a5708f05253a3b48c9ce64bc12749dd5a5b00fd1310f5d8a2ee64da9ceebe3 languageName: node linkType: hard "@commitlint/cli@npm:^19.6.1": - version: 19.6.1 - resolution: "@commitlint/cli@npm:19.6.1" + version: 19.7.1 + resolution: "@commitlint/cli@npm:19.7.1" dependencies: "@commitlint/format": "npm:^19.5.0" - "@commitlint/lint": "npm:^19.6.0" + "@commitlint/lint": "npm:^19.7.1" "@commitlint/load": "npm:^19.6.1" "@commitlint/read": "npm:^19.5.0" "@commitlint/types": "npm:^19.5.0" @@ -1149,17 +1142,17 @@ __metadata: yargs: "npm:^17.0.0" bin: commitlint: cli.js - checksum: 10c0/fa7a344292f1d25533b195b061bcae0a80434490fae843ad28593c09668f48e9a74906b69f95d26df4152c56c71ab31a0bc169d333e22c6ca53dc54646a2ff19 + checksum: 10c0/bb5e4f004f6b16078cdc7e7d6ff1a53762cefc1265af017ccef4ab789d2c562b75fe316ccc1751da6bc1172393f2427926c863298edda2e4d00c8323f2878f5b languageName: node linkType: hard "@commitlint/config-conventional@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/config-conventional@npm:19.6.0" + version: 19.7.1 + resolution: "@commitlint/config-conventional@npm:19.7.1" dependencies: "@commitlint/types": "npm:^19.5.0" conventional-changelog-conventionalcommits: "npm:^7.0.2" - checksum: 10c0/984870138f5d4b947bc2ea8d12fcb8103ef9e6141d0fb50a6e387665495b80b35890d9dc025443a243a53d2a69d7c0bab1d77c5658a6e5a15a3dd7773557fad2 + checksum: 10c0/9de7e5f1e4ac1d995293da12a646936d477c4fc50562de015df26e0b307ebf3fd2632dc8c874ba9d9a81c9540c3189e275fb6fe0b707ae6c9159c013b7dfdb56 languageName: node linkType: hard @@ -1204,25 +1197,25 @@ __metadata: languageName: node linkType: hard -"@commitlint/is-ignored@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/is-ignored@npm:19.6.0" +"@commitlint/is-ignored@npm:^19.7.1": + version: 19.7.1 + resolution: "@commitlint/is-ignored@npm:19.7.1" dependencies: "@commitlint/types": "npm:^19.5.0" semver: "npm:^7.6.0" - checksum: 10c0/64e3522598f131aefab72e78f2b0d5d78228041fbe14fd9785611bd5a4ff7dfae38288ff87b171ab2ff722342983387b6e568ab4d758f3c97866eb924252e6c5 + checksum: 10c0/8c238002c6c7bb0a50cca2dfc001af2cec2926056e090b840e73c25f8d246ac5d8ff862d51a63900a195479869edca7889fc4c7923ffa2bb85a1475f8c469c43 languageName: node linkType: hard -"@commitlint/lint@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/lint@npm:19.6.0" +"@commitlint/lint@npm:^19.7.1": + version: 19.7.1 + resolution: "@commitlint/lint@npm:19.7.1" dependencies: - "@commitlint/is-ignored": "npm:^19.6.0" + "@commitlint/is-ignored": "npm:^19.7.1" "@commitlint/parse": "npm:^19.5.0" "@commitlint/rules": "npm:^19.6.0" "@commitlint/types": "npm:^19.5.0" - checksum: 10c0/d7e3c6a43d89b2196362dce5abef6665869844455176103f311cab7a92f6b7be60edec4f03d27b946a65ee2ceb8ff16f5955cba1da6ecdeb9efe9f215b16f47f + checksum: 10c0/578e2a955c5d16e34dade2538966b5a0fed6ba4e81fcfb477ad3a62472467f80d84d0d79ec017aa5e6815ed6c71b246d660d9febb64cabb175e39eee426b2f98 languageName: node linkType: hard @@ -1385,12 +1378,12 @@ __metadata: languageName: node linkType: hard -"@csstools/css-parser-algorithms@npm:^3.0.1": - version: 3.0.1 - resolution: "@csstools/css-parser-algorithms@npm:3.0.1" +"@csstools/css-parser-algorithms@npm:^3.0.4": + version: 3.0.4 + resolution: "@csstools/css-parser-algorithms@npm:3.0.4" peerDependencies: - "@csstools/css-tokenizer": ^3.0.1 - checksum: 10c0/064c6d519197b5af43bbf5efe8f4cdbd361b006113aa82160d637e925b50c643a52d33d512ca01c63042d952d723a2a10798231a714668356b76668fb11294e3 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10c0/d411f07765e14eede17bccc6bd4f90ff303694df09aabfede3fd104b2dfacfd4fe3697cd25ddad14684c850328f3f9420ebfa9f78380892492974db24ae47dbd languageName: node linkType: hard @@ -1401,10 +1394,10 @@ __metadata: languageName: node linkType: hard -"@csstools/css-tokenizer@npm:^3.0.1": - version: 3.0.1 - resolution: "@csstools/css-tokenizer@npm:3.0.1" - checksum: 10c0/c9ed4373e5731b5375ea9791590081019c04e95f08b46b272977e5e7b8c3d560affc62e82263cb8def1df1e57f0673140e7e16a14a5e7be04e6a234be088d1d3 +"@csstools/css-tokenizer@npm:^3.0.3": + version: 3.0.3 + resolution: "@csstools/css-tokenizer@npm:3.0.3" + checksum: 10c0/c31bf410e1244b942e71798e37c54639d040cb59e0121b21712b40015fced2b0fb1ffe588434c5f8923c9cd0017cfc1c1c8f3921abc94c96edf471aac2eba5e5 languageName: node linkType: hard @@ -1418,13 +1411,13 @@ __metadata: languageName: node linkType: hard -"@csstools/media-query-list-parser@npm:^3.0.1": - version: 3.0.1 - resolution: "@csstools/media-query-list-parser@npm:3.0.1" +"@csstools/media-query-list-parser@npm:^4.0.2": + version: 4.0.2 + resolution: "@csstools/media-query-list-parser@npm:4.0.2" peerDependencies: - "@csstools/css-parser-algorithms": ^3.0.1 - "@csstools/css-tokenizer": ^3.0.1 - checksum: 10c0/fca1935cabf9fb94128da87f72c34aa2cfce8eb0beba4c78d685c7b42aaba3521067710afc6905b7347fc41fe53947536ce15a7ef3387b48763d8f7d71778d5e + "@csstools/css-parser-algorithms": ^3.0.4 + "@csstools/css-tokenizer": ^3.0.3 + checksum: 10c0/5d008a70f5d4fd96224066a433f5cdefa76cfd78a74416a20d6d5b2bb1bc8282b140e8373015d807d4dadb91daf3deb73eb13f853ec4e0479d0cb92e80c6f20d languageName: node linkType: hard @@ -1817,12 +1810,12 @@ __metadata: languageName: node linkType: hard -"@csstools/selector-specificity@npm:^4.0.0": - version: 4.0.0 - resolution: "@csstools/selector-specificity@npm:4.0.0" +"@csstools/selector-specificity@npm:^5.0.0": + version: 5.0.0 + resolution: "@csstools/selector-specificity@npm:5.0.0" peerDependencies: - postcss-selector-parser: ^6.1.0 - checksum: 10c0/6f4d4ecfdcd37f950100de8ffe0b4c1b1cc8c004aab2c2ebaa5c3e2bca2412d15b17d4628435f47a62d2c56db41bcbf985cb9c69e74b89964d48e421e93e75ba + postcss-selector-parser: ^7.0.0 + checksum: 10c0/186b444cabcdcdeb553bfe021f80c58bfe9ef38dcc444f2b1f34a5aab9be063ab4e753022b2d5792049c041c28cfbb78e4b707ec398459300e402030d35c07eb languageName: node linkType: hard @@ -1843,21 +1836,21 @@ __metadata: linkType: hard "@emnapi/core@npm:^1.1.0": - version: 1.2.0 - resolution: "@emnapi/core@npm:1.2.0" + version: 1.3.1 + resolution: "@emnapi/core@npm:1.3.1" dependencies: "@emnapi/wasi-threads": "npm:1.0.1" tslib: "npm:^2.4.0" - checksum: 10c0/a9cf024c1982cd965f6888d1b4514926ad3675fa9d0bd792c9a0770fb592c4c4d20aa1e97a225a7682f9c7900231751434820d5558fd5a00929c2ee976ce5265 + checksum: 10c0/d3be1044ad704e2c486641bc18908523490f28c7d38bd12d9c1d4ce37d39dae6c4aecd2f2eaf44c6e3bd90eaf04e0591acc440b1b038cdf43cce078a355a0ea0 languageName: node linkType: hard "@emnapi/runtime@npm:^1.1.0": - version: 1.2.0 - resolution: "@emnapi/runtime@npm:1.2.0" + version: 1.3.1 + resolution: "@emnapi/runtime@npm:1.3.1" dependencies: tslib: "npm:^2.4.0" - checksum: 10c0/7005ff8b67724c9e61b6cd79a3decbdb2ce25d24abd4d3d187472f200ee6e573329c30264335125fb136bd813aa9cf9f4f7c9391d04b07dd1e63ce0a3427be57 + checksum: 10c0/060ffede50f1b619c15083312b80a9e62a5b0c87aa8c1b54854c49766c9d69f8d1d3d87bd963a647071263a320db41b25eaa50b74d6a80dcc763c23dbeaafd6c languageName: node linkType: hard @@ -1877,9 +1870,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/aix-ppc64@npm:0.24.0" +"@esbuild/aix-ppc64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/aix-ppc64@npm:0.25.0" conditions: os=aix & cpu=ppc64 languageName: node linkType: hard @@ -1891,9 +1884,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-arm64@npm:0.24.0" +"@esbuild/android-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/android-arm64@npm:0.25.0" conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -1905,9 +1898,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-arm@npm:0.24.0" +"@esbuild/android-arm@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/android-arm@npm:0.25.0" conditions: os=android & cpu=arm languageName: node linkType: hard @@ -1919,9 +1912,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-x64@npm:0.24.0" +"@esbuild/android-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/android-x64@npm:0.25.0" conditions: os=android & cpu=x64 languageName: node linkType: hard @@ -1933,9 +1926,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/darwin-arm64@npm:0.24.0" +"@esbuild/darwin-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/darwin-arm64@npm:0.25.0" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -1947,9 +1940,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/darwin-x64@npm:0.24.0" +"@esbuild/darwin-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/darwin-x64@npm:0.25.0" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -1961,9 +1954,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/freebsd-arm64@npm:0.24.0" +"@esbuild/freebsd-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/freebsd-arm64@npm:0.25.0" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard @@ -1975,9 +1968,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/freebsd-x64@npm:0.24.0" +"@esbuild/freebsd-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/freebsd-x64@npm:0.25.0" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -1989,9 +1982,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-arm64@npm:0.24.0" +"@esbuild/linux-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-arm64@npm:0.25.0" conditions: os=linux & cpu=arm64 languageName: node linkType: hard @@ -2003,9 +1996,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-arm@npm:0.24.0" +"@esbuild/linux-arm@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-arm@npm:0.25.0" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -2017,9 +2010,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-ia32@npm:0.24.0" +"@esbuild/linux-ia32@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-ia32@npm:0.25.0" conditions: os=linux & cpu=ia32 languageName: node linkType: hard @@ -2031,9 +2024,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-loong64@npm:0.24.0" +"@esbuild/linux-loong64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-loong64@npm:0.25.0" conditions: os=linux & cpu=loong64 languageName: node linkType: hard @@ -2045,9 +2038,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-mips64el@npm:0.24.0" +"@esbuild/linux-mips64el@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-mips64el@npm:0.25.0" conditions: os=linux & cpu=mips64el languageName: node linkType: hard @@ -2059,9 +2052,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-ppc64@npm:0.24.0" +"@esbuild/linux-ppc64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-ppc64@npm:0.25.0" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard @@ -2073,9 +2066,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-riscv64@npm:0.24.0" +"@esbuild/linux-riscv64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-riscv64@npm:0.25.0" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard @@ -2087,9 +2080,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-s390x@npm:0.24.0" +"@esbuild/linux-s390x@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-s390x@npm:0.25.0" conditions: os=linux & cpu=s390x languageName: node linkType: hard @@ -2101,13 +2094,20 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-x64@npm:0.24.0" +"@esbuild/linux-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/linux-x64@npm:0.25.0" conditions: os=linux & cpu=x64 languageName: node linkType: hard +"@esbuild/netbsd-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/netbsd-arm64@npm:0.25.0" + conditions: os=netbsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.21.5": version: 0.21.5 resolution: "@esbuild/netbsd-x64@npm:0.21.5" @@ -2115,16 +2115,16 @@ __metadata: languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/netbsd-x64@npm:0.24.0" +"@esbuild/netbsd-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/netbsd-x64@npm:0.25.0" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/openbsd-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/openbsd-arm64@npm:0.24.0" +"@esbuild/openbsd-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/openbsd-arm64@npm:0.25.0" conditions: os=openbsd & cpu=arm64 languageName: node linkType: hard @@ -2136,9 +2136,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/openbsd-x64@npm:0.24.0" +"@esbuild/openbsd-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/openbsd-x64@npm:0.25.0" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard @@ -2150,9 +2150,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/sunos-x64@npm:0.24.0" +"@esbuild/sunos-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/sunos-x64@npm:0.25.0" conditions: os=sunos & cpu=x64 languageName: node linkType: hard @@ -2164,9 +2164,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-arm64@npm:0.24.0" +"@esbuild/win32-arm64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/win32-arm64@npm:0.25.0" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -2178,9 +2178,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-ia32@npm:0.24.0" +"@esbuild/win32-ia32@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/win32-ia32@npm:0.25.0" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -2192,28 +2192,28 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-x64@npm:0.24.0" +"@esbuild/win32-x64@npm:0.25.0": + version: 0.25.0 + resolution: "@esbuild/win32-x64@npm:0.25.0" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@eslint-community/eslint-utils@npm:^4.2.0": - version: 4.4.0 - resolution: "@eslint-community/eslint-utils@npm:4.4.0" + version: 4.4.1 + resolution: "@eslint-community/eslint-utils@npm:4.4.1" dependencies: - eslint-visitor-keys: "npm:^3.3.0" + eslint-visitor-keys: "npm:^3.4.3" peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 - checksum: 10c0/7e559c4ce59cd3a06b1b5a517b593912e680a7f981ae7affab0d01d709e99cd5647019be8fafa38c350305bc32f1f7d42c7073edde2ab536c745e365f37b607e + checksum: 10c0/2aa0ac2fc50ff3f234408b10900ed4f1a0b19352f21346ad4cc3d83a1271481bdda11097baa45d484dd564c895e0762a27a8240be7a256b3ad47129e96528252 languageName: node linkType: hard "@eslint-community/regexpp@npm:^4.6.1": - version: 4.11.0 - resolution: "@eslint-community/regexpp@npm:4.11.0" - checksum: 10c0/0f6328869b2741e2794da4ad80beac55cba7de2d3b44f796a60955b0586212ec75e6b0253291fd4aad2100ad471d1480d8895f2b54f1605439ba4c875e05e523 + version: 4.12.1 + resolution: "@eslint-community/regexpp@npm:4.12.1" + checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6 languageName: node linkType: hard @@ -2234,10 +2234,10 @@ __metadata: languageName: node linkType: hard -"@eslint/js@npm:8.57.0": - version: 8.57.0 - resolution: "@eslint/js@npm:8.57.0" - checksum: 10c0/9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94 +"@eslint/js@npm:8.57.1": + version: 8.57.1 + resolution: "@eslint/js@npm:8.57.1" + checksum: 10c0/b489c474a3b5b54381c62e82b3f7f65f4b8a5eaaed126546520bf2fede5532a8ed53212919fed1e9048dcf7f37167c8561d58d0ba4492a4244004e7793805223 languageName: node linkType: hard @@ -2294,14 +2294,14 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/config-array@npm:^0.11.14": - version: 0.11.14 - resolution: "@humanwhocodes/config-array@npm:0.11.14" +"@humanwhocodes/config-array@npm:^0.13.0": + version: 0.13.0 + resolution: "@humanwhocodes/config-array@npm:0.13.0" dependencies: - "@humanwhocodes/object-schema": "npm:^2.0.2" + "@humanwhocodes/object-schema": "npm:^2.0.3" debug: "npm:^4.3.1" minimatch: "npm:^3.0.5" - checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541 + checksum: 10c0/205c99e756b759f92e1f44a3dc6292b37db199beacba8f26c2165d4051fe73a4ae52fdcfd08ffa93e7e5cb63da7c88648f0e84e197d154bbbbe137b2e0dd332e languageName: node linkType: hard @@ -2312,80 +2312,103 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/object-schema@npm:^2.0.2": +"@humanwhocodes/object-schema@npm:^2.0.3": version: 2.0.3 resolution: "@humanwhocodes/object-schema@npm:2.0.3" checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c languageName: node linkType: hard -"@inquirer/checkbox@npm:^4.0.6": - version: 4.0.6 - resolution: "@inquirer/checkbox@npm:4.0.6" +"@inquirer/checkbox@npm:^4.1.2": + version: 4.1.2 + resolution: "@inquirer/checkbox@npm:4.1.2" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/figures": "npm:^1.0.9" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/figures": "npm:^1.0.10" + "@inquirer/type": "npm:^3.0.4" ansi-escapes: "npm:^4.3.2" yoctocolors-cjs: "npm:^2.1.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/919e3c5d652f1ccd9d5e8e9678e63981a968ba4a0dffe9d9409d94a1951b398218f7dfb05e57aefcb3c3c1d61ac2333160e370b0ff4632ada7a92ebe07a2ca72 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/5edd83063cf6f828ca2400561c857f1869382d431d584b009d3cd04a5f12fb1a4887fe4c9bd4c93f7f68e07a75e00aabdf85c58f2964eff356ac55dd52d01cee languageName: node linkType: hard -"@inquirer/confirm@npm:^5.1.3": - version: 5.1.3 - resolution: "@inquirer/confirm@npm:5.1.3" +"@inquirer/confirm@npm:^5.1.6": + version: 5.1.6 + resolution: "@inquirer/confirm@npm:5.1.6" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" peerDependencies: "@types/node": ">=18" - checksum: 10c0/ddbca429ebb3a8bf1d10928f4ab0c8eedbf3f74f85ed64c6b26a830f0fbbab5fa964b9ef2eb2c57a10b9afc9ca3921a12e4659f5a83069078cd1a7ce3d0d126d + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/57b667f8096ec261504b613656e7b7718a238a73e059870a2b8e97c3127bc50085251100ed371250733b7cc5cd68122d8694d6a04a46de95d08bb590a8437b11 languageName: node linkType: hard -"@inquirer/core@npm:^10.1.4": - version: 10.1.4 - resolution: "@inquirer/core@npm:10.1.4" +"@inquirer/core@npm:^10.1.7": + version: 10.1.7 + resolution: "@inquirer/core@npm:10.1.7" dependencies: - "@inquirer/figures": "npm:^1.0.9" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/figures": "npm:^1.0.10" + "@inquirer/type": "npm:^3.0.4" ansi-escapes: "npm:^4.3.2" cli-width: "npm:^4.1.0" mute-stream: "npm:^2.0.0" signal-exit: "npm:^4.1.0" - strip-ansi: "npm:^6.0.1" wrap-ansi: "npm:^6.2.0" yoctocolors-cjs: "npm:^2.1.2" - checksum: 10c0/4e6c51713c79a0b22381a08a2d11c37f2d696597d01bdecd7b3482889e53e4ac279c55d663a365798ad52becc37052b571bc3ec85ee8a10054c681d9248b88d3 + peerDependencies: + "@types/node": ">=18" + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/13c25ced3e66b0ef9018fc9cc1bb841d20d56917e2609514f80df91f2395f18d9851c91987064e15afa36a6161b6bd2daee6ebef4a1791ffb12b816d4273ca55 languageName: node linkType: hard -"@inquirer/editor@npm:^4.2.3": - version: 4.2.3 - resolution: "@inquirer/editor@npm:4.2.3" +"@inquirer/editor@npm:^4.2.7": + version: 4.2.7 + resolution: "@inquirer/editor@npm:4.2.7" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" external-editor: "npm:^3.1.0" peerDependencies: "@types/node": ">=18" - checksum: 10c0/0194a660b33e38781c35a6ab531f76beca998e5e30ebc90bb94e2140fd943e0dfcff4f9c650f4f79f74df7dac04c82db254ff8c2d9ef0b55c491523f859a8c2b + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/8570bd5992dab031b7eea498941a728fbbada04072ce64192c46987a6d6e91669f9dd846049b5c49e87de01efd292fb2137606aafd7eee33e047864b2989d87f languageName: node linkType: hard -"@inquirer/expand@npm:^4.0.6": - version: 4.0.6 - resolution: "@inquirer/expand@npm:4.0.6" +"@inquirer/expand@npm:^4.0.9": + version: 4.0.9 + resolution: "@inquirer/expand@npm:4.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" yoctocolors-cjs: "npm:^2.1.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/2a4990744edf17528c5cf894b9a7a04f202740fb9e2123fb8ced1e623f5bf9716976b037e1b23e88cfce826a85b6052d49784ac2294644e353767b51a0a2f877 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/4267c404f0c053abc613bcf359e80d701043062e79c4f34857e612955826a133eaa83014084f8f3e371e5f2e0706674069c399301902691e54da86e442cf8ea9 + languageName: node + linkType: hard + +"@inquirer/figures@npm:^1.0.10": + version: 1.0.10 + resolution: "@inquirer/figures@npm:1.0.10" + checksum: 10c0/013b0eef03706d5ff8847c1ab1a12643edfb3d1902a5353bfe626999bc3b46653f8317d011a9dd4e831d3f2bfef3da84104a1fda4db0de0f4938122f5c70362e languageName: node linkType: hard @@ -2396,118 +2419,135 @@ __metadata: languageName: node linkType: hard -"@inquirer/figures@npm:^1.0.9": - version: 1.0.9 - resolution: "@inquirer/figures@npm:1.0.9" - checksum: 10c0/21e1a7c902b2b77f126617b501e0fe0d703fae680a9df472afdae18a3e079756aee85690cef595a14e91d18630118f4a3893aab6832b9232fefc6ab31c804a68 - languageName: node - linkType: hard - -"@inquirer/input@npm:^4.1.3": - version: 4.1.3 - resolution: "@inquirer/input@npm:4.1.3" +"@inquirer/input@npm:^4.1.6": + version: 4.1.6 + resolution: "@inquirer/input@npm:4.1.6" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" peerDependencies: "@types/node": ">=18" - checksum: 10c0/251468b9596fcbff286d0817da7408f2a78230c1f84de23361e6362a8a91e5bf4c42c04f4971a8fe751eb0afc4ab1cef0d3766742fd4e693b4b0cbcc72aa8d97 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/b1df056e4855e2617f0c4000a09978902b8c65ec757ecfb59b1ac02c303dedc6c5e2fd677ceeabe02d18b97be2011bcbcd20ac9ed55d7c3371ef3e2a00814740 languageName: node linkType: hard -"@inquirer/number@npm:^3.0.6": - version: 3.0.6 - resolution: "@inquirer/number@npm:3.0.6" +"@inquirer/number@npm:^3.0.9": + version: 3.0.9 + resolution: "@inquirer/number@npm:3.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" peerDependencies: "@types/node": ">=18" - checksum: 10c0/26c030735bdc94053dfca50db1e75c7e325b8dcc009f3f9e6f572d89b67d7b23cfb3920ed2fa6fa34c312b5ebb6b86ba5b4e77c277ce463720eba45052c0d253 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/5569d570fa539263324d3651f8fc3fe451e4a5d8d7799b8576abb3246eefbabc15a48ff4f2ef3353238aa42c01815cd761b5a148a236943b73e03e969a4a7ac7 languageName: node linkType: hard -"@inquirer/password@npm:^4.0.6": - version: 4.0.6 - resolution: "@inquirer/password@npm:4.0.6" +"@inquirer/password@npm:^4.0.9": + version: 4.0.9 + resolution: "@inquirer/password@npm:4.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" ansi-escapes: "npm:^4.3.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/c36f675d350c38156efe255d9b3a052271faff2bfcebf626f5f02092e9110ef8f87a6985e96dd0c2351fa79723d0847bacaa86ae10c1d24526434de96af5503e + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/7e2a7bc48715d933f8826112a41237905ce3ce7839b286a7d68079cda351db17c6e868727902061588f5baa75dd203e66ba1f265646bfe440da572d17d5c21eb languageName: node linkType: hard -"@inquirer/prompts@npm:^7.2.3": - version: 7.2.3 - resolution: "@inquirer/prompts@npm:7.2.3" - dependencies: - "@inquirer/checkbox": "npm:^4.0.6" - "@inquirer/confirm": "npm:^5.1.3" - "@inquirer/editor": "npm:^4.2.3" - "@inquirer/expand": "npm:^4.0.6" - "@inquirer/input": "npm:^4.1.3" - "@inquirer/number": "npm:^3.0.6" - "@inquirer/password": "npm:^4.0.6" - "@inquirer/rawlist": "npm:^4.0.6" - "@inquirer/search": "npm:^3.0.6" - "@inquirer/select": "npm:^4.0.6" +"@inquirer/prompts@npm:^7.3.2": + version: 7.3.2 + resolution: "@inquirer/prompts@npm:7.3.2" + dependencies: + "@inquirer/checkbox": "npm:^4.1.2" + "@inquirer/confirm": "npm:^5.1.6" + "@inquirer/editor": "npm:^4.2.7" + "@inquirer/expand": "npm:^4.0.9" + "@inquirer/input": "npm:^4.1.6" + "@inquirer/number": "npm:^3.0.9" + "@inquirer/password": "npm:^4.0.9" + "@inquirer/rawlist": "npm:^4.0.9" + "@inquirer/search": "npm:^3.0.9" + "@inquirer/select": "npm:^4.0.9" peerDependencies: "@types/node": ">=18" - checksum: 10c0/52c2e1fd8a4e98bc5fd6a79acf9c7d7e1ecc534013d7c018412a6ed34d15be69a2d10791b539740fed8e538485e359e1cacbec98ca3d04e24c5e9fa9480d7bc6 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/a318d7c2a963f753f4868151f2ce5673e214f3a6597430e712bc59ef9605c831b71a6b52a9c5ea2f312b23063d2ee9fd633e127cdc9e4999e95ef15a5e90c7e1 languageName: node linkType: hard -"@inquirer/rawlist@npm:^4.0.6": - version: 4.0.6 - resolution: "@inquirer/rawlist@npm:4.0.6" +"@inquirer/rawlist@npm:^4.0.9": + version: 4.0.9 + resolution: "@inquirer/rawlist@npm:4.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/type": "npm:^3.0.4" yoctocolors-cjs: "npm:^2.1.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/c79f0ddd5cf7eae8db27a7080e277c32809d7bd58619f470d8b1598d1aff36f6aac276535ef35801a1dae97bb3763fd248e1067800e6eccd49276206d6cdb945 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/6639a662a88f2ceb44b43d7303c24b49570becfa296db11902d69a76e11e3ba865f546502a9808c1e04a1a9ab387401ec6c801a34f2b6d95091e7ad1eb185c1a languageName: node linkType: hard -"@inquirer/search@npm:^3.0.6": - version: 3.0.6 - resolution: "@inquirer/search@npm:3.0.6" +"@inquirer/search@npm:^3.0.9": + version: 3.0.9 + resolution: "@inquirer/search@npm:3.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/figures": "npm:^1.0.9" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/figures": "npm:^1.0.10" + "@inquirer/type": "npm:^3.0.4" yoctocolors-cjs: "npm:^2.1.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/27afe9105b9fd26b5985847f75c82f59156158b6366e35896764cd08ee7bb76e3d9c7110c6ed50ab4d7e13466ea3f0e60492a644e0eb6a0d8c30701b07221ad9 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/5d1c1865705a79054b35b5767df21dd5e3215eccfc5a2e4c5b9a962875ae71c32541da124426f380c4264f87265f9b32f2df6562a47b77ba32b88658076178a1 languageName: node linkType: hard -"@inquirer/select@npm:^4.0.6": - version: 4.0.6 - resolution: "@inquirer/select@npm:4.0.6" +"@inquirer/select@npm:^4.0.9": + version: 4.0.9 + resolution: "@inquirer/select@npm:4.0.9" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/figures": "npm:^1.0.9" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/figures": "npm:^1.0.10" + "@inquirer/type": "npm:^3.0.4" ansi-escapes: "npm:^4.3.2" yoctocolors-cjs: "npm:^2.1.2" peerDependencies: "@types/node": ">=18" - checksum: 10c0/5346007a5f62ff88f36c219b625d6031ba12fea6849b38aab1d3ed1219387004bf1c3a44aeec47a3988c9aeb1934a8a06509fe9e00f39135fa22113a01e1cc37 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/e03e00a7e0ab1e9fd95a3cbed0eeadacc3ff89af53afd81209a17c5f991b69d9c10d031dc7b5773c4c4d88b527dfd2f560e0d7f3eb44444ebeb6293edf422adb languageName: node linkType: hard -"@inquirer/type@npm:^3.0.2": - version: 3.0.2 - resolution: "@inquirer/type@npm:3.0.2" +"@inquirer/type@npm:^3.0.4": + version: 3.0.4 + resolution: "@inquirer/type@npm:3.0.4" peerDependencies: "@types/node": ">=18" - checksum: 10c0/fe348db2977fff92cad0ade05b36ec40714326fccd4a174be31663f8923729b4276f1736d892a449627d7fb03235ff44e8aac5aa72b09036d993593b813ef313 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/d1db1833e879646ce1f31daff372e90ee099457cf7a2c09a62e8bbce47aced5f22599ef51aa8b82b5ffaeb624340c263cdd9d7a9eae8d3dfc9740efad080915e languageName: node linkType: hard @@ -2794,13 +2834,13 @@ __metadata: linkType: hard "@jridgewell/gen-mapping@npm:^0.3.5": - version: 0.3.5 - resolution: "@jridgewell/gen-mapping@npm:0.3.5" + version: 0.3.8 + resolution: "@jridgewell/gen-mapping@npm:0.3.8" dependencies: "@jridgewell/set-array": "npm:^1.2.1" "@jridgewell/sourcemap-codec": "npm:^1.4.10" "@jridgewell/trace-mapping": "npm:^0.3.24" - checksum: 10c0/1be4fd4a6b0f41337c4f5fdf4afc3bd19e39c3691924817108b82ffcb9c9e609c273f936932b9fba4b3a298ce2eb06d9bff4eb1cc3bd81c4f4ee1b4917e25feb + checksum: 10c0/c668feaf86c501d7c804904a61c23c67447b2137b813b9ce03eca82cb9d65ac7006d766c218685d76e3d72828279b6ee26c347aa1119dab23fbaf36aed51585a languageName: node linkType: hard @@ -2818,7 +2858,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15": +"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0": version: 1.5.0 resolution: "@jridgewell/sourcemap-codec@npm:1.5.0" checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18 @@ -2845,6 +2885,15 @@ __metadata: languageName: node linkType: hard +"@keyv/serialize@npm:^1.0.2": + version: 1.0.3 + resolution: "@keyv/serialize@npm:1.0.3" + dependencies: + buffer: "npm:^6.0.3" + checksum: 10c0/24a257870b0548cfe430680c2ae1641751e6a6ec90c573eaf51bfe956839b6cfa462b4d2827157363b6d620872d32d69fa2f37210a864ba488f8ec7158436398 + languageName: node + linkType: hard + "@lit-labs/react@npm:^1.0.2": version: 1.2.1 resolution: "@lit-labs/react@npm:1.2.1" @@ -2853,9 +2902,9 @@ __metadata: linkType: hard "@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0, @lit-labs/ssr-dom-shim@npm:^1.2.0": - version: 1.2.0 - resolution: "@lit-labs/ssr-dom-shim@npm:1.2.0" - checksum: 10c0/016168cf6901ab343462c13fb168dda6d549f8b42680aa394e6b7cd0af7cce51271e00dbfa5bbbe388912bf89cbb8f941a21cc3ec9bf95d6a84b6241aa9e5a72 + version: 1.3.0 + resolution: "@lit-labs/ssr-dom-shim@npm:1.3.0" + checksum: 10c0/743a9b295ef2f186712f08883da553c9990be291409615309c99aa4946cfe440a184e4213c790c24505c80beb86b9cfecf10b5fb30ce17c83698f8424f48678d languageName: node linkType: hard @@ -2913,8 +2962,8 @@ __metadata: linkType: hard "@mapbox/node-pre-gyp@npm:^2.0.0-rc.0": - version: 2.0.0-rc.0 - resolution: "@mapbox/node-pre-gyp@npm:2.0.0-rc.0" + version: 2.0.0 + resolution: "@mapbox/node-pre-gyp@npm:2.0.0" dependencies: consola: "npm:^3.2.3" detect-libc: "npm:^2.0.0" @@ -2925,19 +2974,19 @@ __metadata: tar: "npm:^7.4.0" bin: node-pre-gyp: bin/node-pre-gyp - checksum: 10c0/1e2d780758adc5ca75137416880e49c91194ee7d7d242a531c81aec9e27b85968e54ebea60b0bfe563987b936368113fe470d5deabc39225be64740b0dde5546 + checksum: 10c0/7d874c7f6f5560a87be7207f28d9a4e53b750085a82167608fd573aab8073645e95b3608f69e244df0e1d24e90a66525aeae708aba82ca73ff668ed0ab6abda6 languageName: node linkType: hard "@mdx-js/react@npm:^3.0.0": - version: 3.0.1 - resolution: "@mdx-js/react@npm:3.0.1" + version: 3.1.0 + resolution: "@mdx-js/react@npm:3.1.0" dependencies: "@types/mdx": "npm:^2.0.0" peerDependencies: "@types/react": ">=16" react: ">=16" - checksum: 10c0/d210d926ef488d39ad65f04d821936b668eadcdde3b6421e94ec4200ca7ad17f17d24c5cbc543882586af9f08b10e2eea715c728ce6277487945e05c5199f532 + checksum: 10c0/381ed1211ba2b8491bf0ad9ef0d8d1badcdd114e1931d55d44019d4b827cc2752586708f9c7d2f9c3244150ed81f1f671a6ca95fae0edd5797fb47a22e06ceca languageName: node linkType: hard @@ -3024,9 +3073,9 @@ __metadata: linkType: hard "@npmcli/redact@npm:^3.0.0": - version: 3.0.0 - resolution: "@npmcli/redact@npm:3.0.0" - checksum: 10c0/34823f0d6a3301b310921b9f849f3c9814339bb9cde9555ddd1d51167c51e8b08ca40160eeb86b54041779805502e51251e0fbe0702fb7ab10173901e5d1d28c + version: 3.1.1 + resolution: "@npmcli/redact@npm:3.1.1" + checksum: 10c0/0653d1acbad34c78a372ac581429c3a257849bc761322cad088a202dc6639f5a61912cae0a678e2f53fdf5a4b6e9353cc2d528155d3cad2c7d5e89486aed081c languageName: node linkType: hard @@ -3230,13 +3279,13 @@ __metadata: languageName: node linkType: hard -"@octokit/endpoint@npm:^9.0.1": - version: 9.0.5 - resolution: "@octokit/endpoint@npm:9.0.5" +"@octokit/endpoint@npm:^9.0.6": + version: 9.0.6 + resolution: "@octokit/endpoint@npm:9.0.6" dependencies: "@octokit/types": "npm:^13.1.0" universal-user-agent: "npm:^6.0.0" - checksum: 10c0/e9bbb2111abe691c146075abb1b6f724a9b77fa8bfefdaaa82b8ebad6c8790e949f2367bb0b79800fef93ad72807513333e83e8ffba389bc85215535f63534d9 + checksum: 10c0/8e06197b21869aeb498e0315093ca6fbee12bd1bdcfc1667fcd7d79d827d84f2c5a30702ffd28bba7879780e367d14c30df5b20d47fcaed5de5fdc05f5d4e013 languageName: node linkType: hard @@ -3252,13 +3301,13 @@ __metadata: linkType: hard "@octokit/graphql@npm:^7.1.0": - version: 7.1.0 - resolution: "@octokit/graphql@npm:7.1.0" + version: 7.1.1 + resolution: "@octokit/graphql@npm:7.1.1" dependencies: - "@octokit/request": "npm:^8.3.0" + "@octokit/request": "npm:^8.4.1" "@octokit/types": "npm:^13.0.0" universal-user-agent: "npm:^6.0.0" - checksum: 10c0/6d50a013d151f416fc837644e394e8b8872da7b17b181da119842ca569b0971e4dfacda55af6c329b51614e436945415dd5bd75eb3652055fdb754bbcd20d9d1 + checksum: 10c0/c27216200f3f4ce7ce2a694fb7ea43f8ea4a807fbee3a423c41ed137dd7948dfc0bbf6ea1656f029a7625c84b583acdef740a7032266d0eff55305c91c3a1ed6 languageName: node linkType: hard @@ -3276,10 +3325,10 @@ __metadata: languageName: node linkType: hard -"@octokit/openapi-types@npm:^22.2.0": - version: 22.2.0 - resolution: "@octokit/openapi-types@npm:22.2.0" - checksum: 10c0/a45bfc735611e836df0729f5922bbd5811d401052b972d1e3bc1278a2d2403e00f4552ce9d1f2793f77f167d212da559c5cb9f1b02c935114ad6d898779546ee +"@octokit/openapi-types@npm:^23.0.1": + version: 23.0.1 + resolution: "@octokit/openapi-types@npm:23.0.1" + checksum: 10c0/ab734ceb26343d9f051a59503b8cb5bdc7fec9ca044b60511b227179bec73141dd9144a6b2d68bcd737741881b136c1b7d5392da89ae2e35e39acc489e5eb4c1 languageName: node linkType: hard @@ -3295,13 +3344,13 @@ __metadata: linkType: hard "@octokit/plugin-paginate-rest@npm:^9.0.0": - version: 9.2.1 - resolution: "@octokit/plugin-paginate-rest@npm:9.2.1" + version: 9.2.2 + resolution: "@octokit/plugin-paginate-rest@npm:9.2.2" dependencies: "@octokit/types": "npm:^12.6.0" peerDependencies: "@octokit/core": 5 - checksum: 10c0/1dc55032a9e0c3e6440080a319975c9e4f189913fbc8870a48048d0c712473ea3d902ba247a37a46d45d502859b2728731a0d285107e4b0fa628d380f87163b4 + checksum: 10c0/e9c85b17064fe6b62f9af88dba008f3daef456b1195340ea0831990e9c4dbabe89be950b6e5dc924ebcca18ad1aaa0cf6df7d824dc8be26ce9a55f20336ff815 languageName: node linkType: hard @@ -3358,14 +3407,14 @@ __metadata: languageName: node linkType: hard -"@octokit/request-error@npm:^5.0.0, @octokit/request-error@npm:^5.1.0": - version: 5.1.0 - resolution: "@octokit/request-error@npm:5.1.0" +"@octokit/request-error@npm:^5.0.0, @octokit/request-error@npm:^5.1.0, @octokit/request-error@npm:^5.1.1": + version: 5.1.1 + resolution: "@octokit/request-error@npm:5.1.1" dependencies: "@octokit/types": "npm:^13.1.0" deprecation: "npm:^2.0.0" once: "npm:^1.4.0" - checksum: 10c0/61e688abce17dd020ea1e343470b9758f294bfe5432c5cb24bdb5b9b10f90ecec1ecaaa13b48df9288409e0da14252f6579a20f609af155bd61dc778718b7738 + checksum: 10c0/dc9fc76ea5e4199273e4665ce9ddf345fe8f25578d9999c9a16f276298e61ee6fe0e6f5a6147b91ba3b34fdf5b9e6b7af6ae13d6333175e95b30c574088f7a2d languageName: node linkType: hard @@ -3383,15 +3432,15 @@ __metadata: languageName: node linkType: hard -"@octokit/request@npm:^8.3.0, @octokit/request@npm:^8.3.1": - version: 8.4.0 - resolution: "@octokit/request@npm:8.4.0" +"@octokit/request@npm:^8.3.1, @octokit/request@npm:^8.4.1": + version: 8.4.1 + resolution: "@octokit/request@npm:8.4.1" dependencies: - "@octokit/endpoint": "npm:^9.0.1" - "@octokit/request-error": "npm:^5.1.0" + "@octokit/endpoint": "npm:^9.0.6" + "@octokit/request-error": "npm:^5.1.1" "@octokit/types": "npm:^13.1.0" universal-user-agent: "npm:^6.0.0" - checksum: 10c0/b857782ac2ff5387e9cc502759de73ea642c498c97d06ad2ecd8a395e4b9532d9f3bc3fc460e0d3d0e8f0d43c917a90c493e43766d37782b3979d3afffbf1b4b + checksum: 10c0/1a69dcb7336de708a296db9e9a58040e5b284a87495a63112f80eb0007da3fc96a9fadecb9e875fc63cf179c23a0f81031fbef2a6f610a219e45805ead03fcf3 languageName: node linkType: hard @@ -3405,11 +3454,11 @@ __metadata: linkType: hard "@octokit/types@npm:^13.0.0, @octokit/types@npm:^13.1.0": - version: 13.5.0 - resolution: "@octokit/types@npm:13.5.0" + version: 13.8.0 + resolution: "@octokit/types@npm:13.8.0" dependencies: - "@octokit/openapi-types": "npm:^22.2.0" - checksum: 10c0/355ebc6776ce23feace1b1be0927cdda758790fda83068109c4f27b354dcd43d0447d4dc24e5eafdb596465469ea1baed23f3fd63adfec508cc375ccd1dcb0a3 + "@octokit/openapi-types": "npm:^23.0.1" + checksum: 10c0/e08c2fcf10e374f18e4c9fa12a6ada33a40f112d1209012a39f0ce40ae7aa9dcf0598b6007b467f63cc4a97e7b1388d6eed34ddef61494655e08b5a95afaad97 languageName: node linkType: hard @@ -3447,7 +3496,7 @@ __metadata: languageName: node linkType: hard -"@protobuf-ts/plugin-framework@npm:^2.0.7, @protobuf-ts/plugin-framework@npm:^2.9.4": +"@protobuf-ts/plugin-framework@npm:^2.9.4": version: 2.9.4 resolution: "@protobuf-ts/plugin-framework@npm:2.9.4" dependencies: @@ -3498,23 +3547,7 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^5.0.2": - version: 5.1.0 - resolution: "@rollup/pluginutils@npm:5.1.0" - dependencies: - "@types/estree": "npm:^1.0.0" - estree-walker: "npm:^2.0.2" - picomatch: "npm:^2.3.1" - peerDependencies: - rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 - peerDependenciesMeta: - rollup: - optional: true - checksum: 10c0/c7bed15711f942d6fdd3470fef4105b73991f99a478605e13d41888963330a6f9e32be37e6ddb13f012bc7673ff5e54f06f59fd47109436c1c513986a8a7612d - languageName: node - linkType: hard - -"@rollup/pluginutils@npm:^5.1.3": +"@rollup/pluginutils@npm:^5.0.2, @rollup/pluginutils@npm:^5.1.3": version: 5.1.4 resolution: "@rollup/pluginutils@npm:5.1.4" dependencies: @@ -3530,114 +3563,135 @@ __metadata: languageName: node linkType: hard -"@rollup/rollup-android-arm-eabi@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-android-arm-eabi@npm:4.22.4" +"@rollup/rollup-android-arm-eabi@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-android-arm-eabi@npm:4.34.8" conditions: os=android & cpu=arm languageName: node linkType: hard -"@rollup/rollup-android-arm64@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-android-arm64@npm:4.22.4" +"@rollup/rollup-android-arm64@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-android-arm64@npm:4.34.8" conditions: os=android & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-arm64@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-darwin-arm64@npm:4.22.4" +"@rollup/rollup-darwin-arm64@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-darwin-arm64@npm:4.34.8" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-darwin-x64@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-darwin-x64@npm:4.22.4" +"@rollup/rollup-darwin-x64@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-darwin-x64@npm:4.34.8" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@rollup/rollup-linux-arm-gnueabihf@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.22.4" +"@rollup/rollup-freebsd-arm64@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-freebsd-arm64@npm:4.34.8" + conditions: os=freebsd & cpu=arm64 + languageName: node + linkType: hard + +"@rollup/rollup-freebsd-x64@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-freebsd-x64@npm:4.34.8" + conditions: os=freebsd & cpu=x64 + languageName: node + linkType: hard + +"@rollup/rollup-linux-arm-gnueabihf@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.34.8" conditions: os=linux & cpu=arm & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm-musleabihf@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.22.4" +"@rollup/rollup-linux-arm-musleabihf@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.34.8" conditions: os=linux & cpu=arm & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-arm64-gnu@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.22.4" +"@rollup/rollup-linux-arm64-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.34.8" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-arm64-musl@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-arm64-musl@npm:4.22.4" +"@rollup/rollup-linux-arm64-musl@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-arm64-musl@npm:4.34.8" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-linux-powerpc64le-gnu@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.22.4" +"@rollup/rollup-linux-loongarch64-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.34.8" + conditions: os=linux & cpu=loong64 & libc=glibc + languageName: node + linkType: hard + +"@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.8" conditions: os=linux & cpu=ppc64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-riscv64-gnu@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.22.4" +"@rollup/rollup-linux-riscv64-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.34.8" conditions: os=linux & cpu=riscv64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-s390x-gnu@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.22.4" +"@rollup/rollup-linux-s390x-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.34.8" conditions: os=linux & cpu=s390x & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-gnu@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-x64-gnu@npm:4.22.4" +"@rollup/rollup-linux-x64-gnu@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-x64-gnu@npm:4.34.8" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@rollup/rollup-linux-x64-musl@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-linux-x64-musl@npm:4.22.4" +"@rollup/rollup-linux-x64-musl@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-linux-x64-musl@npm:4.34.8" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@rollup/rollup-win32-arm64-msvc@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.22.4" +"@rollup/rollup-win32-arm64-msvc@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.34.8" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@rollup/rollup-win32-ia32-msvc@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.22.4" +"@rollup/rollup-win32-ia32-msvc@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.34.8" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@rollup/rollup-win32-x64-msvc@npm:4.22.4": - version: 4.22.4 - resolution: "@rollup/rollup-win32-x64-msvc@npm:4.22.4" +"@rollup/rollup-win32-x64-msvc@npm:4.34.8": + version: 4.34.8 + resolution: "@rollup/rollup-win32-x64-msvc@npm:4.34.8" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -3704,14 +3758,14 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/accordion@npm:7.1.0, @spectrum-css/accordion@workspace:components/accordion": +"@spectrum-css/accordion@npm:8.0.0-next.0, @spectrum-css/accordion@workspace:components/accordion": version: 0.0.0-use.local resolution: "@spectrum-css/accordion@workspace:components/accordion" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -3721,20 +3775,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionbar@npm:10.1.1, @spectrum-css/actionbar@workspace:components/actionbar": +"@spectrum-css/actionbar@npm:11.0.0-next.0, @spectrum-css/actionbar@workspace:components/actionbar": version: 0.0.0-use.local resolution: "@spectrum-css/actionbar@workspace:components/actionbar" dependencies: - "@spectrum-css/actiongroup": "npm:6.1.0" - "@spectrum-css/closebutton": "npm:6.1.0" - "@spectrum-css/fieldlabel": "npm:10.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/actiongroup": "npm:7.0.0-next.0" + "@spectrum-css/closebutton": "npm:7.0.0-next.0" + "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actiongroup": ">=6.0.0 <7.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/actiongroup": ">=7.0.0-next.0" + "@spectrum-css/closebutton": ">=7.0.0-next.0" + "@spectrum-css/fieldlabel": ">=11.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actiongroup": @@ -3750,15 +3804,15 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionbutton@npm:7.1.1, @spectrum-css/actionbutton@workspace:components/actionbutton": +"@spectrum-css/actionbutton@npm:8.0.0-next.0, @spectrum-css/actionbutton@workspace:components/actionbutton": version: 0.0.0-use.local resolution: "@spectrum-css/actionbutton@workspace:components/actionbutton" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -3768,14 +3822,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actiongroup@npm:6.1.0, @spectrum-css/actiongroup@workspace:components/actiongroup": +"@spectrum-css/actiongroup@npm:7.0.0-next.0, @spectrum-css/actiongroup@workspace:components/actiongroup": version: 0.0.0-use.local resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -3785,20 +3839,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/actionmenu@npm:7.1.1, @spectrum-css/actionmenu@workspace:components/actionmenu": +"@spectrum-css/actionmenu@npm:8.0.0-next.0, @spectrum-css/actionmenu@workspace:components/actionmenu": version: 0.0.0-use.local resolution: "@spectrum-css/actionmenu@workspace:components/actionmenu" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -3814,20 +3868,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertbanner@npm:3.1.0, @spectrum-css/alertbanner@workspace:components/alertbanner": +"@spectrum-css/alertbanner@npm:4.0.0-next.0, @spectrum-css/alertbanner@workspace:components/alertbanner": version: 0.0.0-use.local resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/closebutton": "npm:7.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/closebutton": ">=7.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": @@ -3843,20 +3897,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertdialog@npm:4.1.0, @spectrum-css/alertdialog@workspace:components/alertdialog": +"@spectrum-css/alertdialog@npm:5.0.0-next.0, @spectrum-css/alertdialog@workspace:components/alertdialog": version: 0.0.0-use.local resolution: "@spectrum-css/alertdialog@workspace:components/alertdialog" dependencies: - "@spectrum-css/buttongroup": "npm:9.1.0" + "@spectrum-css/buttongroup": "npm:10.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" + "@spectrum-css/buttongroup": ">=10.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" @@ -3889,14 +3943,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetcard@npm:5.1.0, @spectrum-css/assetcard@workspace:components/assetcard": +"@spectrum-css/assetcard@npm:6.0.0-next.0, @spectrum-css/assetcard@workspace:components/assetcard": version: 0.0.0-use.local resolution: "@spectrum-css/assetcard@workspace:components/assetcard" dependencies: - "@spectrum-css/checkbox": "npm:10.1.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": @@ -3906,16 +3960,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/assetlist@npm:8.1.0, @spectrum-css/assetlist@workspace:components/assetlist": +"@spectrum-css/assetlist@npm:9.0.0-next.0, @spectrum-css/assetlist@workspace:components/assetlist": version: 0.0.0-use.local resolution: "@spectrum-css/assetlist@workspace:components/assetlist" dependencies: - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": @@ -3940,14 +3994,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/badge@npm:6.1.0, @spectrum-css/badge@workspace:components/badge": +"@spectrum-css/badge@npm:7.0.0-next.0, @spectrum-css/badge@workspace:components/badge": version: 0.0.0-use.local resolution: "@spectrum-css/badge@workspace:components/badge" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -3957,16 +4011,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/breadcrumb@npm:11.1.0, @spectrum-css/breadcrumb@workspace:components/breadcrumb": +"@spectrum-css/breadcrumb@npm:12.0.0-next.0, @spectrum-css/breadcrumb@workspace:components/breadcrumb": version: 0.0.0-use.local resolution: "@spectrum-css/breadcrumb@workspace:components/breadcrumb" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -3982,88 +4036,88 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/bundle@workspace:tools/bundle" dependencies: - "@spectrum-css/accordion": "npm:7.1.0" - "@spectrum-css/actionbar": "npm:10.1.1" - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/actiongroup": "npm:6.1.0" - "@spectrum-css/actionmenu": "npm:7.1.1" - "@spectrum-css/alertbanner": "npm:3.1.0" - "@spectrum-css/alertdialog": "npm:4.1.0" + "@spectrum-css/accordion": "npm:8.0.0-next.0" + "@spectrum-css/actionbar": "npm:11.0.0-next.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/actiongroup": "npm:7.0.0-next.0" + "@spectrum-css/actionmenu": "npm:8.0.0-next.0" + "@spectrum-css/alertbanner": "npm:4.0.0-next.0" + "@spectrum-css/alertdialog": "npm:5.0.0-next.0" "@spectrum-css/asset": "npm:7.1.0" - "@spectrum-css/assetcard": "npm:5.1.0" - "@spectrum-css/assetlist": "npm:8.1.0" + "@spectrum-css/assetcard": "npm:6.0.0-next.0" + "@spectrum-css/assetlist": "npm:9.0.0-next.0" "@spectrum-css/avatar": "npm:9.1.0" - "@spectrum-css/badge": "npm:6.1.0" - "@spectrum-css/breadcrumb": "npm:11.1.0" - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/calendar": "npm:7.1.0" - "@spectrum-css/card": "npm:11.1.0" - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/clearbutton": "npm:7.1.0" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/badge": "npm:7.0.0-next.0" + "@spectrum-css/breadcrumb": "npm:12.0.0-next.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/buttongroup": "npm:10.0.0-next.0" + "@spectrum-css/calendar": "npm:8.0.0-next.0" + "@spectrum-css/card": "npm:12.0.0-next.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/clearbutton": "npm:8.0.0-next.0" + "@spectrum-css/closebutton": "npm:7.0.0-next.0" "@spectrum-css/coachindicator": "npm:4.1.0" - "@spectrum-css/coachmark": "npm:9.1.1" + "@spectrum-css/coachmark": "npm:10.0.0-next.0" "@spectrum-css/colorarea": "npm:7.1.0" "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/colorslider": "npm:8.1.0" "@spectrum-css/colorwheel": "npm:6.1.0" - "@spectrum-css/combobox": "npm:4.1.1" + "@spectrum-css/combobox": "npm:5.0.0-next.0" "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/contextualhelp": "npm:5.1.2" - "@spectrum-css/datepicker": "npm:4.1.1" + "@spectrum-css/contextualhelp": "npm:6.0.0-next.0" + "@spectrum-css/datepicker": "npm:5.0.0-next.0" "@spectrum-css/dial": "npm:5.1.0" - "@spectrum-css/dialog": "npm:12.1.0" + "@spectrum-css/dialog": "npm:13.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/dropindicator": "npm:7.1.0" - "@spectrum-css/dropzone": "npm:8.1.0" - "@spectrum-css/fieldgroup": "npm:7.1.0" - "@spectrum-css/fieldlabel": "npm:10.1.0" + "@spectrum-css/dropindicator": "npm:8.0.0-next.0" + "@spectrum-css/dropzone": "npm:9.0.0-next.0" + "@spectrum-css/fieldgroup": "npm:8.0.0-next.0" + "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" "@spectrum-css/floatingactionbutton": "npm:4.1.0" "@spectrum-css/form": "npm:1.1.0" - "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/helptext": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/illustratedmessage": "npm:9.1.0" - "@spectrum-css/infieldbutton": "npm:6.1.0" - "@spectrum-css/infieldprogresscircle": "npm:0.0.0" - "@spectrum-css/inlinealert": "npm:10.1.0" + "@spectrum-css/infieldbutton": "npm:7.0.0-next.0" + "@spectrum-css/infieldprogresscircle": "npm:1.0.0-next.0" + "@spectrum-css/inlinealert": "npm:11.0.0-next.0" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/logicbutton": "npm:6.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/meter": "npm:1.1.0" - "@spectrum-css/miller": "npm:8.1.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/meter": "npm:2.0.0-next.0" + "@spectrum-css/miller": "npm:9.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" "@spectrum-css/page": "npm:9.1.0" - "@spectrum-css/pagination": "npm:10.1.0" - "@spectrum-css/picker": "npm:9.1.1" - "@spectrum-css/pickerbutton": "npm:6.1.1" - "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/progressbar": "npm:6.1.0" + "@spectrum-css/pagination": "npm:11.0.0-next.0" + "@spectrum-css/picker": "npm:10.0.0-next.0" + "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/progressbar": "npm:7.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/radio": "npm:10.1.0" - "@spectrum-css/rating": "npm:6.1.0" - "@spectrum-css/search": "npm:8.1.0" - "@spectrum-css/sidenav": "npm:7.1.0" - "@spectrum-css/slider": "npm:6.1.0" + "@spectrum-css/radio": "npm:11.0.0-next.0" + "@spectrum-css/rating": "npm:7.0.0-next.0" + "@spectrum-css/search": "npm:9.0.0-next.0" + "@spectrum-css/sidenav": "npm:8.0.0-next.0" + "@spectrum-css/slider": "npm:7.0.0-next.0" "@spectrum-css/splitview": "npm:7.1.0" - "@spectrum-css/statuslight": "npm:9.1.0" - "@spectrum-css/steplist": "npm:7.1.0" - "@spectrum-css/stepper": "npm:7.1.0" + "@spectrum-css/statuslight": "npm:9.1.1-next.0" + "@spectrum-css/steplist": "npm:8.0.0-next.0" + "@spectrum-css/stepper": "npm:8.0.0-next.0" "@spectrum-css/swatch": "npm:8.1.0" "@spectrum-css/swatchgroup": "npm:5.1.0" "@spectrum-css/switch": "npm:6.1.0" - "@spectrum-css/table": "npm:8.1.0" - "@spectrum-css/tabs": "npm:6.1.1" - "@spectrum-css/tag": "npm:10.1.0" - "@spectrum-css/taggroup": "npm:7.1.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/table": "npm:9.0.0-next.0" + "@spectrum-css/tabs": "npm:7.0.0-next.0" + "@spectrum-css/tag": "npm:11.0.0-next.0" + "@spectrum-css/taggroup": "npm:8.0.0-next.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/thumbnail": "npm:8.1.0" - "@spectrum-css/toast": "npm:11.1.0" - "@spectrum-css/tooltip": "npm:7.1.0" - "@spectrum-css/tray": "npm:5.1.0" - "@spectrum-css/treeview": "npm:12.1.0" + "@spectrum-css/toast": "npm:12.0.0-next.0" + "@spectrum-css/tooltip": "npm:8.0.0-next.0" + "@spectrum-css/tray": "npm:6.0.0-next.0" + "@spectrum-css/treeview": "npm:13.0.0-next.0" "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" "@spectrum-css/well": "npm:7.1.0" @@ -4073,16 +4127,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/button@npm:14.1.1, @spectrum-css/button@workspace:components/button": +"@spectrum-css/button@npm:15.0.0-next.0, @spectrum-css/button@workspace:components/button": version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -4095,14 +4149,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/buttongroup@npm:9.1.0, @spectrum-css/buttongroup@workspace:components/buttongroup": +"@spectrum-css/buttongroup@npm:10.0.0-next.0, @spectrum-css/buttongroup@workspace:components/buttongroup": version: 0.0.0-use.local resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" dependencies: - "@spectrum-css/button": "npm:14.1.1" + "@spectrum-css/button": "npm:15.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": @@ -4112,14 +4166,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/calendar@npm:7.1.0, @spectrum-css/calendar@workspace:components/calendar": +"@spectrum-css/calendar@npm:8.0.0-next.0, @spectrum-css/calendar@workspace:components/calendar": version: 0.0.0-use.local resolution: "@spectrum-css/calendar@workspace:components/calendar" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4129,21 +4183,21 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/card@npm:11.1.0, @spectrum-css/card@workspace:components/card": +"@spectrum-css/card@npm:12.0.0-next.0, @spectrum-css/card@workspace:components/card": version: 0.0.0-use.local resolution: "@spectrum-css/card@workspace:components/card" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/asset": "npm:7.1.0" - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/asset": ">=7.0.0 <8.0.0" - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/quickaction": ">=3" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/typography": ">=8.0.0 <9.0.0" @@ -4165,14 +4219,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/checkbox@npm:10.1.0, @spectrum-css/checkbox@workspace:components/checkbox": +"@spectrum-css/checkbox@npm:11.0.0-next.0, @spectrum-css/checkbox@workspace:components/checkbox": version: 0.0.0-use.local resolution: "@spectrum-css/checkbox@workspace:components/checkbox" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4182,14 +4236,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/clearbutton@npm:7.1.0, @spectrum-css/clearbutton@workspace:components/clearbutton": +"@spectrum-css/clearbutton@npm:8.0.0-next.0, @spectrum-css/clearbutton@workspace:components/clearbutton": version: 0.0.0-use.local resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4199,30 +4253,15 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/closebutton@npm:6.1.0": - version: 6.1.0 - resolution: "@spectrum-css/closebutton@npm:6.1.0" - peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - peerDependenciesMeta: - "@spectrum-css/icon": - optional: true - "@spectrum-css/tokens": - optional: true - checksum: 10c0/6764236c5b36c50f9d9a5f76174b19d1300a32cc28df70f43718b11b6ecfba61ece94adbc51cc7d8e5e99861ddc644402a9daabd16ed8e8205b68ef91aa7fae0 - languageName: node - linkType: hard - -"@spectrum-css/closebutton@workspace:components/closebutton": +"@spectrum-css/closebutton@npm:7.0.0-next.0, @spectrum-css/closebutton@workspace:components/closebutton": version: 0.0.0-use.local resolution: "@spectrum-css/closebutton@workspace:components/closebutton" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4245,24 +4284,24 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/coachmark@npm:9.1.1, @spectrum-css/coachmark@workspace:components/coachmark": +"@spectrum-css/coachmark@npm:10.0.0-next.0, @spectrum-css/coachmark@workspace:components/coachmark": version: 0.0.0-use.local resolution: "@spectrum-css/coachmark@workspace:components/coachmark" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/actionmenu": "npm:7.1.1" - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/actionmenu": "npm:8.0.0-next.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/buttongroup": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/actionmenu": ">=7.0.0 <8.0.0" - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/actionmenu": ">=8.0.0-next.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/buttongroup": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4379,22 +4418,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/combobox@npm:4.1.1, @spectrum-css/combobox@workspace:components/combobox": +"@spectrum-css/combobox@npm:5.0.0-next.0, @spectrum-css/combobox@workspace:components/combobox": version: 0.0.0-use.local resolution: "@spectrum-css/combobox@workspace:components/combobox" dependencies: - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/pickerbutton": "npm:6.1.1" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/pickerbutton": ">=7.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" - "@spectrum-css/textfield": ">=8.0.0 <9.0.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/menu": @@ -4422,18 +4461,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/contextualhelp@npm:5.1.2, @spectrum-css/contextualhelp@workspace:components/contextualhelp": +"@spectrum-css/contextualhelp@npm:6.0.0-next.0, @spectrum-css/contextualhelp@workspace:components/contextualhelp": version: 0.0.0-use.local resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4447,20 +4486,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/datepicker@npm:4.1.1, @spectrum-css/datepicker@workspace:components/datepicker": +"@spectrum-css/datepicker@npm:5.0.0-next.0, @spectrum-css/datepicker@workspace:components/datepicker": version: 0.0.0-use.local resolution: "@spectrum-css/datepicker@workspace:components/datepicker" dependencies: - "@spectrum-css/calendar": "npm:7.1.0" - "@spectrum-css/pickerbutton": "npm:6.1.1" - "@spectrum-css/popover": "npm:8.2.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/calendar": "npm:8.0.0-next.0" + "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/calendar": ">=7.0.0 <8.0.0" - "@spectrum-css/pickerbutton": ">=6.0.0 <7.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" - "@spectrum-css/textfield": ">=8.0.0 <9.0.0" + "@spectrum-css/calendar": ">=8.0.0-next.0" + "@spectrum-css/pickerbutton": ">=7.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/calendar": @@ -4489,46 +4528,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dialog@npm:12.1.0": - version: 12.1.0 - resolution: "@spectrum-css/dialog@npm:12.1.0" - peerDependencies: - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/modal": ">=7.0.0 <8.0.0" - "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - "@spectrum-css/underlay": ">=6.0.0 <7.0.0" - peerDependenciesMeta: - "@spectrum-css/closebutton": - optional: true - "@spectrum-css/divider": - optional: true - "@spectrum-css/modal": - optional: true - "@spectrum-css/tokens": - optional: true - "@spectrum-css/underlay": - optional: true - checksum: 10c0/e6c761eb29e070f5b979dd6925e1b43aa727a24efa0389aa67cad25c1193a6149e1277c6270d0c44c831d6c0c0b2aa1e3c3cec6dde11677567bff756d1090e75 - languageName: node - linkType: hard - -"@spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@npm:13.0.0-next.0, @spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/buttongroup": "npm:9.1.0" - "@spectrum-css/closebutton": "npm:6.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/buttongroup": "npm:10.0.0-next.0" + "@spectrum-css/closebutton": "npm:7.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/buttongroup": ">=9.0.0 <10.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" + "@spectrum-css/button": ">=15.0.0 <16.0.0" + "@spectrum-css/buttongroup": ">=10.0.0 <11.0.0" + "@spectrum-css/closebutton": ">=7.0.0 <8.0.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4564,14 +4579,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropindicator@npm:7.1.0, @spectrum-css/dropindicator@workspace:components/dropindicator": +"@spectrum-css/dropindicator@npm:8.0.0-next.0, @spectrum-css/dropindicator@workspace:components/dropindicator": version: 0.0.0-use.local resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4581,16 +4596,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropzone@npm:8.1.0, @spectrum-css/dropzone@workspace:components/dropzone": +"@spectrum-css/dropzone@npm:9.0.0-next.0, @spectrum-css/dropzone@workspace:components/dropzone": version: 0.0.0-use.local resolution: "@spectrum-css/dropzone@workspace:components/dropzone" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" "@spectrum-css/link": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4606,18 +4621,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/fieldgroup@npm:7.1.0, @spectrum-css/fieldgroup@workspace:components/fieldgroup": +"@spectrum-css/fieldgroup@npm:8.0.0-next.0, @spectrum-css/fieldgroup@workspace:components/fieldgroup": version: 0.0.0-use.local resolution: "@spectrum-css/fieldgroup@workspace:components/fieldgroup" dependencies: - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/radio": "npm:10.1.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/helptext": "npm:8.0.0-next.0" + "@spectrum-css/radio": "npm:11.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/radio": ">=10.0.0 <11.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/helptext": ">=8.0.0-next.0" + "@spectrum-css/radio": ">=11.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/checkbox": @@ -4631,14 +4646,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/fieldlabel@npm:10.1.0, @spectrum-css/fieldlabel@workspace:components/fieldlabel": +"@spectrum-css/fieldlabel@npm:11.0.0-next.0, @spectrum-css/fieldlabel@workspace:components/fieldlabel": version: 0.0.0-use.local resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4685,14 +4700,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/helptext@npm:7.1.0, @spectrum-css/helptext@workspace:components/helptext": +"@spectrum-css/helptext@npm:8.0.0-next.0, @spectrum-css/helptext@workspace:components/helptext": version: 0.0.0-use.local resolution: "@spectrum-css/helptext@workspace:components/helptext" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4702,7 +4717,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/icon@npm:9.1.0, @spectrum-css/icon@workspace:components/icon": +"@spectrum-css/icon@npm:10.0.0-next.0, @spectrum-css/icon@workspace:components/icon": version: 0.0.0-use.local resolution: "@spectrum-css/icon@workspace:components/icon" dependencies: @@ -4732,14 +4747,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/infieldbutton@npm:6.1.0, @spectrum-css/infieldbutton@workspace:components/infieldbutton": +"@spectrum-css/infieldbutton@npm:7.0.0-next.0, @spectrum-css/infieldbutton@workspace:components/infieldbutton": version: 0.0.0-use.local resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -4749,7 +4764,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/infieldprogresscircle@npm:0.0.0, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": +"@spectrum-css/infieldprogresscircle@npm:1.0.0-next.0, @spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle": version: 0.0.0-use.local resolution: "@spectrum-css/infieldprogresscircle@workspace:components/infieldprogresscircle" dependencies: @@ -4762,16 +4777,16 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/inlinealert@npm:10.1.0, @spectrum-css/inlinealert@workspace:components/inlinealert": +"@spectrum-css/inlinealert@npm:11.0.0-next.0, @spectrum-css/inlinealert@workspace:components/inlinealert": version: 0.0.0-use.local resolution: "@spectrum-css/inlinealert@workspace:components/inlinealert" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": @@ -4810,23 +4825,23 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/menu@npm:9.1.0, @spectrum-css/menu@workspace:components/menu": +"@spectrum-css/menu@npm:10.0.0-next.0, @spectrum-css/menu@workspace:components/menu": version: 0.0.0-use.local resolution: "@spectrum-css/menu@workspace:components/menu" dependencies: - "@spectrum-css/checkbox": "npm:10.1.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/switch": "npm:6.1.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tray": "npm:5.1.0" + "@spectrum-css/tray": "npm:6.0.0-next.0" peerDependencies: - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/switch": ">=6.0.0 <7.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - "@spectrum-css/tray": ">=5.0.0 <6.0.0" + "@spectrum-css/tray": ">=6.0.0-next.0" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -4843,14 +4858,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/meter@npm:1.1.0, @spectrum-css/meter@workspace:components/meter": +"@spectrum-css/meter@npm:2.0.0-next.0, @spectrum-css/meter@workspace:components/meter": version: 0.0.0-use.local resolution: "@spectrum-css/meter@workspace:components/meter" dependencies: - "@spectrum-css/progressbar": "npm:6.1.0" + "@spectrum-css/progressbar": "npm:7.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/progressbar": ">=6.0.0 <7.0.0" + "@spectrum-css/progressbar": ">=7.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/progressbar": @@ -4860,18 +4875,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/miller@npm:8.1.0, @spectrum-css/miller@workspace:components/miller": +"@spectrum-css/miller@npm:9.0.0-next.0, @spectrum-css/miller@workspace:components/miller": version: 0.0.0-use.local resolution: "@spectrum-css/miller@workspace:components/miller" dependencies: - "@spectrum-css/assetlist": "npm:8.1.0" - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/assetlist": "npm:9.0.0-next.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/assetlist": ">=8.0.0 <9.0.0" - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/assetlist": ">=9.0.0-next.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/assetlist": @@ -4924,20 +4939,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pagination@npm:10.1.0, @spectrum-css/pagination@workspace:components/pagination": +"@spectrum-css/pagination@npm:11.0.0-next.0, @spectrum-css/pagination@workspace:components/pagination": version: 0.0.0-use.local resolution: "@spectrum-css/pagination@workspace:components/pagination" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/textfield": ">=8.0.0 <9.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4953,22 +4968,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/picker@npm:9.1.1, @spectrum-css/picker@workspace:components/picker": +"@spectrum-css/picker@npm:10.0.0-next.0, @spectrum-css/picker@workspace:components/picker": version: 0.0.0-use.local resolution: "@spectrum-css/picker@workspace:components/picker" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/helptext": "npm:7.1.0" - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/helptext": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/helptext": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/helptext": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/progresscircle": ">=5.0.0 <6.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -4987,18 +5002,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/pickerbutton@npm:6.1.1, @spectrum-css/pickerbutton@workspace:components/pickerbutton": +"@spectrum-css/pickerbutton@npm:7.0.0-next.0, @spectrum-css/pickerbutton@workspace:components/pickerbutton": version: 0.0.0-use.local resolution: "@spectrum-css/pickerbutton@workspace:components/pickerbutton" dependencies: - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/popover": "npm:8.2.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/popover": ">=8.0.0 <9.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5012,21 +5027,21 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/popover@npm:8.2.0, @spectrum-css/popover@workspace:components/popover": +"@spectrum-css/popover@npm:9.0.0-next.0, @spectrum-css/popover@workspace:components/popover": version: 0.0.0-use.local resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: - "@spectrum-css/alertdialog": "npm:4.1.0" + "@spectrum-css/alertdialog": "npm:5.0.0-next.0" "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/dialog": "npm:12.1.0" + "@spectrum-css/dialog": "npm:13.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/menu": "npm:9.1.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/alertdialog": ">=4.0.0 <5.0.0" - "@spectrum-css/dialog": ">=12.0.0 <13.0.0" + "@spectrum-css/alertdialog": ">=5.0.0-next.0" + "@spectrum-css/dialog": ">=13.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" + "@spectrum-css/menu": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/alertdialog": @@ -5052,7 +5067,7 @@ __metadata: "@etchteam/storybook-addon-status": "npm:^5.0.0" "@spectrum-css/bundle": "npm:1.0.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/ui-icons": "npm:1.1.2" + "@spectrum-css/ui-icons": "npm:2.0.0-next.0" "@storybook/addon-a11y": "npm:^8.4.7" "@storybook/addon-actions": "npm:^8.4.7" "@storybook/addon-designs": "npm:^8.0.4" @@ -5085,14 +5100,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/progressbar@npm:6.1.0, @spectrum-css/progressbar@workspace:components/progressbar": +"@spectrum-css/progressbar@npm:7.0.0-next.0, @spectrum-css/progressbar@workspace:components/progressbar": version: 0.0.0-use.local resolution: "@spectrum-css/progressbar@workspace:components/progressbar" dependencies: - "@spectrum-css/fieldlabel": "npm:10.1.0" + "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/fieldlabel": ">=10.0.0 <11.0.0" + "@spectrum-css/fieldlabel": ">=11.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/fieldlabel": @@ -5115,14 +5130,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/radio@npm:10.1.0, @spectrum-css/radio@workspace:components/radio": +"@spectrum-css/radio@npm:11.0.0-next.0, @spectrum-css/radio@workspace:components/radio": version: 0.0.0-use.local resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5132,14 +5147,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/rating@npm:6.1.0, @spectrum-css/rating@workspace:components/rating": +"@spectrum-css/rating@npm:7.0.0-next.0, @spectrum-css/rating@workspace:components/rating": version: 0.0.0-use.local resolution: "@spectrum-css/rating@workspace:components/rating" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5149,18 +5164,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/search@npm:8.1.0, @spectrum-css/search@workspace:components/search": +"@spectrum-css/search@npm:9.0.0-next.0, @spectrum-css/search@workspace:components/search": version: 0.0.0-use.local resolution: "@spectrum-css/search@workspace:components/search" dependencies: - "@spectrum-css/clearbutton": "npm:7.1.0" - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/clearbutton": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/textfield": ">=8.0.0 <9.0.0" + "@spectrum-css/clearbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/clearbutton": @@ -5174,14 +5189,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/sidenav@npm:7.1.0, @spectrum-css/sidenav@workspace:components/sidenav": +"@spectrum-css/sidenav@npm:8.0.0-next.0, @spectrum-css/sidenav@workspace:components/sidenav": version: 0.0.0-use.local resolution: "@spectrum-css/sidenav@workspace:components/sidenav" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5191,14 +5206,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/slider@npm:6.1.0, @spectrum-css/slider@workspace:components/slider": +"@spectrum-css/slider@npm:7.0.0-next.0, @spectrum-css/slider@workspace:components/slider": version: 0.0.0-use.local resolution: "@spectrum-css/slider@workspace:components/slider" dependencies: - "@spectrum-css/stepper": "npm:7.1.0" + "@spectrum-css/stepper": "npm:8.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/stepper": ">=7.0.0 <8.0.0" + "@spectrum-css/stepper": ">=8.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/stepper": @@ -5221,7 +5236,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/statuslight@npm:9.1.0, @spectrum-css/statuslight@workspace:components/statuslight": +"@spectrum-css/statuslight@npm:9.1.1-next.0, @spectrum-css/statuslight@workspace:components/statuslight": version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" dependencies: @@ -5234,17 +5249,17 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/steplist@npm:7.1.0, @spectrum-css/steplist@workspace:components/steplist": +"@spectrum-css/steplist@npm:8.0.0-next.0, @spectrum-css/steplist@workspace:components/steplist": version: 0.0.0-use.local resolution: "@spectrum-css/steplist@workspace:components/steplist" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tooltip": "npm:7.1.0" + "@spectrum-css/tooltip": "npm:8.0.0-next.0" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" - "@spectrum-css/tooltip": ">=7.0.0 <8.0.0" + "@spectrum-css/tooltip": ">=8.0.0-next.0" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5255,20 +5270,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/stepper@npm:7.1.0, @spectrum-css/stepper@workspace:components/stepper": +"@spectrum-css/stepper@npm:8.0.0-next.0, @spectrum-css/stepper@workspace:components/stepper": version: 0.0.0-use.local resolution: "@spectrum-css/stepper@workspace:components/stepper" dependencies: - "@spectrum-css/actionbutton": "npm:7.1.1" - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/infieldbutton": "npm:6.1.0" - "@spectrum-css/textfield": "npm:8.1.0" + "@spectrum-css/actionbutton": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/infieldbutton": "npm:7.0.0-next.0" + "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/actionbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/infieldbutton": ">=6.0.0 <7.0.0" - "@spectrum-css/textfield": ">=8.0.0 <9.0.0" + "@spectrum-css/actionbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/infieldbutton": ">=7.0.0-next.0" + "@spectrum-css/textfield": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -5331,19 +5346,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/table@npm:8.1.0, @spectrum-css/table@workspace:components/table": +"@spectrum-css/table@npm:9.0.0-next.0, @spectrum-css/table@workspace:components/table": version: 0.0.0-use.local resolution: "@spectrum-css/table@workspace:components/table" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/checkbox": "npm:10.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/checkbox": "npm:11.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/thumbnail": "npm:8.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/checkbox": ">=10.0.0 <11.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/checkbox": ">=11.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5360,18 +5375,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tabs@npm:6.1.1, @spectrum-css/tabs@workspace:components/tabs": +"@spectrum-css/tabs@npm:7.0.0-next.0, @spectrum-css/tabs@workspace:components/tabs": version: 0.0.0-use.local resolution: "@spectrum-css/tabs@workspace:components/tabs" dependencies: - "@spectrum-css/icon": "npm:9.1.0" - "@spectrum-css/menu": "npm:9.1.0" - "@spectrum-css/picker": "npm:9.1.1" + "@spectrum-css/icon": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/picker": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" - "@spectrum-css/menu": ">=9.0.0 <10.0.0" - "@spectrum-css/picker": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" + "@spectrum-css/menu": ">=10.0.0-next.0" + "@spectrum-css/picker": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5385,18 +5400,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tag@npm:10.1.0, @spectrum-css/tag@workspace:components/tag": +"@spectrum-css/tag@npm:11.0.0-next.0, @spectrum-css/tag@workspace:components/tag": version: 0.0.0-use.local resolution: "@spectrum-css/tag@workspace:components/tag" dependencies: "@spectrum-css/avatar": "npm:9.1.0" - "@spectrum-css/clearbutton": "npm:7.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/clearbutton": "npm:8.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/avatar": ">=9.0.0 <10.0.0" - "@spectrum-css/clearbutton": ">=7.0.0 <8.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/clearbutton": ">=8.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/avatar": @@ -5410,14 +5425,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/taggroup@npm:7.1.0, @spectrum-css/taggroup@workspace:components/taggroup": +"@spectrum-css/taggroup@npm:8.0.0-next.0, @spectrum-css/taggroup@workspace:components/taggroup": version: 0.0.0-use.local resolution: "@spectrum-css/taggroup@workspace:components/taggroup" dependencies: - "@spectrum-css/tag": "npm:10.1.0" + "@spectrum-css/tag": "npm:11.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/tag": ">=10.0.0 <11.0.0" + "@spectrum-css/tag": ">=11.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/tag": @@ -5427,14 +5442,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/textfield@npm:8.1.0, @spectrum-css/textfield@workspace:components/textfield": +"@spectrum-css/textfield@npm:9.0.0-next.0, @spectrum-css/textfield@workspace:components/textfield": version: 0.0.0-use.local resolution: "@spectrum-css/textfield@workspace:components/textfield" dependencies: - "@spectrum-css/helptext": "npm:7.1.0" + "@spectrum-css/helptext": "npm:8.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/helptext": ">=7.0.0 <8.0.0" + "@spectrum-css/helptext": ">=8.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/helptext": @@ -5461,18 +5476,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/toast@npm:11.1.0, @spectrum-css/toast@workspace:components/toast": +"@spectrum-css/toast@npm:12.0.0-next.0, @spectrum-css/toast@workspace:components/toast": version: 0.0.0-use.local resolution: "@spectrum-css/toast@workspace:components/toast" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/closebutton": "npm:6.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/closebutton": "npm:7.0.0-next.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/closebutton": ">=6.0.0 <7.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/closebutton": ">=7.0.0-next.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": @@ -5501,15 +5516,15 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tooltip@npm:7.1.0, @spectrum-css/tooltip@workspace:components/tooltip": +"@spectrum-css/tooltip@npm:8.0.0-next.0, @spectrum-css/tooltip@workspace:components/tooltip": version: 0.0.0-use.local resolution: "@spectrum-css/tooltip@workspace:components/tooltip" dependencies: "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/icon": @@ -5519,21 +5534,21 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tray@npm:5.1.0, @spectrum-css/tray@workspace:components/tray": +"@spectrum-css/tray@npm:6.0.0-next.0, @spectrum-css/tray@workspace:components/tray": version: 0.0.0-use.local resolution: "@spectrum-css/tray@workspace:components/tray" dependencies: - "@spectrum-css/button": "npm:14.1.1" - "@spectrum-css/dialog": "npm:12.1.0" + "@spectrum-css/button": "npm:15.0.0-next.0" + "@spectrum-css/dialog": "npm:13.0.0-next.0" "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/button": ">=14.0.0 <15.0.0" - "@spectrum-css/dialog": ">=12.0.0 <13.0.0" + "@spectrum-css/button": ">=15.0.0-next.0" + "@spectrum-css/dialog": ">=13.0.0-next.0" "@spectrum-css/divider": ">=5.0.0 <6.0.0" - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5552,15 +5567,15 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/treeview@npm:12.1.0, @spectrum-css/treeview@workspace:components/treeview": +"@spectrum-css/treeview@npm:13.0.0-next.0, @spectrum-css/treeview@workspace:components/treeview": version: 0.0.0-use.local resolution: "@spectrum-css/treeview@workspace:components/treeview" dependencies: - "@spectrum-css/icon": "npm:9.1.0" + "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/thumbnail": "npm:8.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: - "@spectrum-css/icon": ">=9.0.0 <10.0.0" + "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/thumbnail": ">=8.0.0 <9.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5586,7 +5601,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/ui-icons@npm:1.1.2, @spectrum-css/ui-icons@workspace:ui-icons": +"@spectrum-css/ui-icons@npm:2.0.0-next.0, @spectrum-css/ui-icons@workspace:ui-icons": version: 0.0.0-use.local resolution: "@spectrum-css/ui-icons@workspace:ui-icons" dependencies: @@ -5694,20 +5709,21 @@ __metadata: linkType: soft "@storybook/addon-a11y@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-a11y@npm:8.4.7" + version: 8.5.8 + resolution: "@storybook/addon-a11y@npm:8.5.8" dependencies: - "@storybook/addon-highlight": "npm:8.4.7" + "@storybook/addon-highlight": "npm:8.5.8" + "@storybook/test": "npm:8.5.8" axe-core: "npm:^4.2.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/d00c65b8e256dfc283774562e0ff3cabbd8b9f3fbe619eb23d2c9951d7b075cf29fe8bdb57d3f05756f649bee8b04dfbed6389e852632b40f748cb6c8bba8896 + storybook: ^8.5.8 + checksum: 10c0/909b1e00cc0f39429c6ca9395312c4fe2fc6680231640f9e8569b8dc776b8d9424ef18fd09baf2804f8be22006219d7fbd8bcd01d19ce908dba97ce67c73ccac languageName: node linkType: hard -"@storybook/addon-actions@npm:8.4.7, @storybook/addon-actions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-actions@npm:8.4.7" +"@storybook/addon-actions@npm:8.5.8, @storybook/addon-actions@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/addon-actions@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" "@types/uuid": "npm:^9.0.1" @@ -5715,40 +5731,40 @@ __metadata: polished: "npm:^4.2.2" uuid: "npm:^9.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/411be60f358101291cbd4ff8e5ddbac58fa0583c95338b82b410dc030a73632b654eaf7004b421c7e309cf0bfa709c4f93728b943e1b59dcfff5a249686501c1 + storybook: ^8.5.8 + checksum: 10c0/6d83052e7746b79efb72593c29b61d18def896216d0d4559038c7d18cd46403a88bcdd41dfa14405671203a626d37221fd91f8a45316fa6c2073e5e1de9ca9d5 languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-backgrounds@npm:8.4.7" +"@storybook/addon-backgrounds@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-backgrounds@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/d22c4acd1d99f616865dde11c70b444a0aac7fe7623904479a29a0142b504f284ddc2407eacfd1203c3b0856e5497e7902eb86e287516364c7735b90e224bbcb + storybook: ^8.5.8 + checksum: 10c0/7f852c73a4116755097a0fefd848a74d9907c4ce88bbcf18c1db8aed0254943c028626c440c75353f3102931f6f34795615a2eda3f5fd1a2bb620a7cff9fb035 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-controls@npm:8.4.7" +"@storybook/addon-controls@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-controls@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" dequal: "npm:^2.0.2" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/900c71d172e9f75a1c39a87de1d411890fcea012586be02e3293c705c500a3a62a2bdecb10c11ba9c9f6117706dfbc34aaa40d2ca8e8a9d7b8a6a739d6a73e0c + storybook: ^8.5.8 + checksum: 10c0/0d6a61148067d5015029322cb2beedc635cf9e1342357e1eda6b1b44abb9af44709772e29d144e280f7f91d3251c53abe43af711f552a08e52d2a47c9f8f2aea languageName: node linkType: hard "@storybook/addon-designs@npm:^8.0.4": - version: 8.0.4 - resolution: "@storybook/addon-designs@npm:8.0.4" + version: 8.2.0 + resolution: "@storybook/addon-designs@npm:8.2.0" dependencies: "@figspec/react": "npm:^1.0.0" peerDependencies: @@ -5768,177 +5784,177 @@ __metadata: optional: true react-dom: optional: true - checksum: 10c0/fcc2aaa901f159ac689f652f0f891170a011bcf1b9ea0a0b5106999c1d78faa093331f5a20cd4575bf87aca5faae98048e1d1c8300050270919848d7357df4af + checksum: 10c0/6a6ff46696daaea42a870cf18cb028f94d57048b88f8089addcfef7aca503146970ffdaaad1647e02b8cb6e4f9c030f06a4c373c634fac66291c9eaa25a5b507 languageName: node linkType: hard -"@storybook/addon-docs@npm:8.4.7, @storybook/addon-docs@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-docs@npm:8.4.7" +"@storybook/addon-docs@npm:8.5.8, @storybook/addon-docs@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/addon-docs@npm:8.5.8" dependencies: "@mdx-js/react": "npm:^3.0.0" - "@storybook/blocks": "npm:8.4.7" - "@storybook/csf-plugin": "npm:8.4.7" - "@storybook/react-dom-shim": "npm:8.4.7" - react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" - react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" + "@storybook/blocks": "npm:8.5.8" + "@storybook/csf-plugin": "npm:8.5.8" + "@storybook/react-dom-shim": "npm:8.5.8" + react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/0eb1854ddb6dbef1b32f89746944ee7a16db986403fe0a3712f43d39faa6335e0bce4ac21a8c20d09955ae73cccd1962f3b45037ab1144f61c1317d686e8695f + storybook: ^8.5.8 + checksum: 10c0/f480e265a450f2de6e379c480e1f470bcdd17869721d57b3e96843b365f40b9ef2e38d7c6103ce976e575bb34a5400d39758b4a2ed5846a779f2a53bdd9184ea languageName: node linkType: hard "@storybook/addon-essentials@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-essentials@npm:8.4.7" - dependencies: - "@storybook/addon-actions": "npm:8.4.7" - "@storybook/addon-backgrounds": "npm:8.4.7" - "@storybook/addon-controls": "npm:8.4.7" - "@storybook/addon-docs": "npm:8.4.7" - "@storybook/addon-highlight": "npm:8.4.7" - "@storybook/addon-measure": "npm:8.4.7" - "@storybook/addon-outline": "npm:8.4.7" - "@storybook/addon-toolbars": "npm:8.4.7" - "@storybook/addon-viewport": "npm:8.4.7" + version: 8.5.8 + resolution: "@storybook/addon-essentials@npm:8.5.8" + dependencies: + "@storybook/addon-actions": "npm:8.5.8" + "@storybook/addon-backgrounds": "npm:8.5.8" + "@storybook/addon-controls": "npm:8.5.8" + "@storybook/addon-docs": "npm:8.5.8" + "@storybook/addon-highlight": "npm:8.5.8" + "@storybook/addon-measure": "npm:8.5.8" + "@storybook/addon-outline": "npm:8.5.8" + "@storybook/addon-toolbars": "npm:8.5.8" + "@storybook/addon-viewport": "npm:8.5.8" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/82ddd8424dfd5bf0ef44cee6a320f8395c63678bc0d4566307b2c68bd83c39f6bd447fb421681e3ab581c35c9d991207b01bebf20269c083931f581bb4651d6d + storybook: ^8.5.8 + checksum: 10c0/9dd3a3d79cce807a615a238e45f62f1519308a777730f199468b859337763502a442c555234d6c54535d8aea4aee8f4561840338bd310384f3340d8499592a5d languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-highlight@npm:8.4.7" +"@storybook/addon-highlight@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-highlight@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/2256b880d1f83c86c64287988bd4f4b76a8e1990f2a2a080a322994a9a8e553013fc21b7503c218ec394a880c1b72b131975e6eeadec6accb7eb35d3cb85a6ce + storybook: ^8.5.8 + checksum: 10c0/80c4fd899cf0c11e75994617713cc69e156db64d46ea61b855356b7a2766925d2a8db470e27544664932ce96875c85e84f52d7b9e5f3d6a3e8e4c8cdb6ba393b languageName: node linkType: hard "@storybook/addon-interactions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-interactions@npm:8.4.7" + version: 8.5.8 + resolution: "@storybook/addon-interactions@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.4.7" - "@storybook/test": "npm:8.4.7" + "@storybook/instrumenter": "npm:8.5.8" + "@storybook/test": "npm:8.5.8" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/5c35d2f33122f053568a746c36eb99eb1764ee990146ea374b0fc01defd3f0b33674d2758c027c760fe2966f8683193e8c414089c07e1136ffc562e3346ce479 + storybook: ^8.5.8 + checksum: 10c0/1d48582c91cac1c676961c6dd510d570112082c52680b353ac6ff5905d7356046dc614338ed317991d15292fede2254f6e3a4f940be2d25ec48ea60fb56befee languageName: node linkType: hard -"@storybook/addon-measure@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-measure@npm:8.4.7" +"@storybook/addon-measure@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-measure@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/a9e87c91cbcade2d0059cdc471e8ba479ad6d9dee0c2558c3b706e37d58b4cb3d986924ea0ff623aa791300ee2a8d2429e8fb3ef32eeec9d49861f8677815ac2 + storybook: ^8.5.8 + checksum: 10c0/1de801b44b09402249dea38f463bc6a3ee49aeaaa1329ea2581da175b9a961316f3e01ce70311d277c99975ffe2aa19fbd39ab1565564e6569ac156542aab08f languageName: node linkType: hard -"@storybook/addon-outline@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-outline@npm:8.4.7" +"@storybook/addon-outline@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-outline@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/13e8579ad1e9c8e338a66935331764351d9681e177469c7be72bc8383d6ab0441a783b2089ac3a730979d9a97c347800a47769b1f1ab5b4dfd7fc31f29e1709f + storybook: ^8.5.8 + checksum: 10c0/15b0251ad2ca46437a52d7ace4bdcaae068c40d3f3f56046637bb106336a64635eb59883c7561f71465f7ece5b8061f0a5ae22904324e55a6f0e65596220c659 languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-toolbars@npm:8.4.7" +"@storybook/addon-toolbars@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-toolbars@npm:8.5.8" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/1c315d5ad07291f35ad780ef69fbd6570a582c008ab911cf14bff84061546b9ea1373d1127213844652d73a47c3011d28c1ad08d465fc120969c133dabfe7638 + storybook: ^8.5.8 + checksum: 10c0/961a2bf7c415b91dc0aa1703369d6350481ecc249a972a20282d275466ed92af29615516e198dd8ef001833febe36991640659cc6d852f25cf4e31fb955aac1d languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-viewport@npm:8.4.7" +"@storybook/addon-viewport@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/addon-viewport@npm:8.5.8" dependencies: memoizerific: "npm:^1.11.3" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/4dec3b59be1f3b99d3c9eaab695a7e346d975b772f6691f8286005d78a13a204c5680c6c8733ae83060c7639b56efed9f3580cee7413834ac6595b56345183ef + storybook: ^8.5.8 + checksum: 10c0/9c9fa6332e81a6e83e75468d5365b8cd5fcd9e40abeca138f8c0e3abefc1a56addc92f97bd79e317b366db0d87d80c29c775a05fc810f7fa7b387044784b4737 languageName: node linkType: hard -"@storybook/blocks@npm:8.4.7, @storybook/blocks@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/blocks@npm:8.4.7" +"@storybook/blocks@npm:8.5.8, @storybook/blocks@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/blocks@npm:8.5.8" dependencies: - "@storybook/csf": "npm:^0.1.11" + "@storybook/csf": "npm:0.1.12" "@storybook/icons": "npm:^1.2.12" ts-dedent: "npm:^2.0.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + storybook: ^8.5.8 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 10c0/1cb87811f9c7bad087dca752fb0d6483c237cb5776abea59cb555d8fce9ca14f4d5487725f5d8679a49f7e3f38bbe84189703498a31f2a9aa306f9fb3c8e65c8 + checksum: 10c0/842c8d239c34dfee2d9e6fd7eb68a9b1fb7e5656617271e1fef17064973416b13d870636bc11a0516dae490dd91774ca15043bd66740d5fb9886b9efb01b8043 languageName: node linkType: hard -"@storybook/builder-vite@npm:8.4.7, @storybook/builder-vite@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/builder-vite@npm:8.4.7" +"@storybook/builder-vite@npm:8.5.8, @storybook/builder-vite@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/builder-vite@npm:8.5.8" dependencies: - "@storybook/csf-plugin": "npm:8.4.7" + "@storybook/csf-plugin": "npm:8.5.8" browser-assert: "npm:^1.2.1" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 + storybook: ^8.5.8 vite: ^4.0.0 || ^5.0.0 || ^6.0.0 - checksum: 10c0/138651b9042356972580a121eb3116c745f9fbc8b188ae0a5e543070dc54fcb6c1f14d35bc0cd1294ee763993a5f0e3a30cbe92508e74d183fed04a4d4125591 + checksum: 10c0/93aba75aa79afbf285d073bfa76c8fc91b59928c4f0f69c99f81c0d675895470e3ac2fa2053acc1e871fd865f069c34e7abb680d709385714c4403044a87b7e0 languageName: node linkType: hard -"@storybook/components@npm:8.4.7, @storybook/components@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/components@npm:8.4.7" +"@storybook/components@npm:8.5.8, @storybook/components@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/components@npm:8.5.8" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/7c1eb12fe2310a306f3c2f77a499c3a0caeb4694d4af8dde418f3b2d2ac8a3549b3f56cdc4629b9c15d79177c72e8668dd781a71bf257948f799b0e9cba201fa + checksum: 10c0/dde5ac41f60a4561095a15fb8de99344b26f8887a93fd4947ea7f378c2be71cc0421a9a46be57c9521e5e2fc6c42d222e8138ca2b3390a4eb7c1b7fa299fd0d6 languageName: node linkType: hard "@storybook/core-events@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/core-events@npm:8.4.7" + version: 8.5.8 + resolution: "@storybook/core-events@npm:8.5.8" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/3e8267a5bb6aa8cd3fcbf81a5fead96e6e0416568518a966e90b2409b998e7c49d87cd97e928be43cc9e978784f5474d19cc71c707937adf712db390784f4f05 + checksum: 10c0/c5e6a871ce75596780b5c73cadf5fa9fd95fe2edf7feefd7f9b656c39c41bb9038043246ee7d76988b53f236b5755a0535c7dcfead44c9779dfa6a529f814685 languageName: node linkType: hard -"@storybook/core@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core@npm:8.4.7" +"@storybook/core@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/core@npm:8.5.8" dependencies: - "@storybook/csf": "npm:^0.1.11" + "@storybook/csf": "npm:0.1.12" better-opn: "npm:^3.0.2" browser-assert: "npm:^1.2.1" - esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0" + esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" esbuild-register: "npm:^3.5.0" jsdoc-type-pratt-parser: "npm:^4.0.0" process: "npm:^0.11.10" @@ -5951,27 +5967,36 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 10c0/0943ea7cd092739834ae4347cb46c66aa1c238ee9494af60345364f11568ee60d6290875a593808cd7aeb79715ae27365c2448e6ae5c644e316cd194af184755 + checksum: 10c0/bf883e32827668e50dd90bb52ee8f2b419b1beaba3213695ec21afe39f6b880feb107c96768021388222519c4bab8870bba5971415f68a426912a3cb7f5e3d80 languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/csf-plugin@npm:8.4.7" +"@storybook/csf-plugin@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/csf-plugin@npm:8.5.8" dependencies: unplugin: "npm:^1.3.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/da38e2422e474e323e237e569b3dd678af77d975a4a08fa36108e66c9228858e510246628e18b013bd859a4e674c1a3d0072952a71dac0d7058e03e7c3417b3f + storybook: ^8.5.8 + checksum: 10c0/27d51f0ba97971826bbf3276e568427a1c39c8a7b6ea308ac833e797c1e39a6b3171231513c6ff9880c4677197cb2b18b33e69fce0cfcf294e74e5b1bee6d7c3 + languageName: node + linkType: hard + +"@storybook/csf@npm:0.1.12": + version: 0.1.12 + resolution: "@storybook/csf@npm:0.1.12" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/3d96a976ada67eb683279338d1eb6aa730b228107d4c4f6616ea7b94061899c1fdc11957a756e7bc0708d18cb39af0010c865d124efd84559cd82dcb2d8bc959 languageName: node linkType: hard "@storybook/csf@npm:^0.1.11": - version: 0.1.11 - resolution: "@storybook/csf@npm:0.1.11" + version: 0.1.13 + resolution: "@storybook/csf@npm:0.1.13" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/c5329fc13e7d762049b5c91df1bc1c0e510a1a898c401b72b68f1ff64139a85ab64a92f8e681d2fcb226c0a4a55d0f23b569b2bdb517e0f067bd05ea46228356 + checksum: 10c0/7c57b531ac95ca45239f498d419483d675e58cd8d549e0bac623519cc1ef4f3c9c6b75ec3873aa51cc2872728012db5dd5e1f2c2d8085014241eb4b896480996 languageName: node linkType: hard @@ -5983,59 +6008,59 @@ __metadata: linkType: hard "@storybook/icons@npm:^1.2.12": - version: 1.2.12 - resolution: "@storybook/icons@npm:1.2.12" + version: 1.3.2 + resolution: "@storybook/icons@npm:1.3.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10c0/97f6a7b7841fb5a0d1c8a30c36173469e7b0814a674c8103c7c0fd8803f0f7c2a778545af864012d40883195a533534dbc98541deac2bafe31e6a3fe37fdfc66 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + checksum: 10c0/83f21af9c95a1431a651d2e87d9ea0a06a9981e19c00e4db61bc6d4272624ef296929c4e93b8a962ee5b7af18beab5368249a37125f6663bc7761fd89a1fd3fe languageName: node linkType: hard -"@storybook/instrumenter@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/instrumenter@npm:8.4.7" +"@storybook/instrumenter@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/instrumenter@npm:8.5.8" dependencies: "@storybook/global": "npm:^5.0.0" "@vitest/utils": "npm:^2.1.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/bc0865fed7f3c8242cd97978257e3d48f1880ad01e9794cc45122c4bcc7cf4a498c6ff8deebffcc70332b4a096e98b00e695ac152e40d0ef2c23160009c86f5d + storybook: ^8.5.8 + checksum: 10c0/d73c497aca597033ef6e1ed0b01429df4c18d522b7723fbb1b80a8e50da9e54a212da6953d5d78fa1959d3eced8e97918668a2ebc0367c2dcbf5a5a5567f89ff languageName: node linkType: hard -"@storybook/manager-api@npm:8.4.7, @storybook/manager-api@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/manager-api@npm:8.4.7" +"@storybook/manager-api@npm:8.5.8, @storybook/manager-api@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/manager-api@npm:8.5.8" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/a3aeed441a2cca1a8fac73336a853b389a00a1e7dbbbbcd54492a90f2f12f86e976235fd1272f27a606532fb7e0f82dec3f7ecd1f2b87b03ffa74b667830152a + checksum: 10c0/4045257c2169cef88508cef8087d177faea481fa6bf403ea92d531f6c27291c06107d786bf0bd7bb380631f86a2d87819e60f84598bd7eefdc6c12c85e97b4ab languageName: node linkType: hard -"@storybook/preview-api@npm:8.4.7, @storybook/preview-api@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/preview-api@npm:8.4.7" +"@storybook/preview-api@npm:8.5.8, @storybook/preview-api@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/preview-api@npm:8.5.8" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/86e8dd8e46b20a4cab99655ded093a76ae5a2b2b9ab03af57292022c8143d76e0f76a137f8768b8f6847fd1b522abf3dee8504f0ba5ff16b5779120d3875967c + checksum: 10c0/278dff2940ba93c366a2a83a347f8e17dc80d087e0aa44eb868e4fe95f76a23e12d740867f3fd8e65142c47a73e5a66a628847179ce10b5ae22c4b1645910c2c languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/react-dom-shim@npm:8.4.7" +"@storybook/react-dom-shim@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/react-dom-shim@npm:8.5.8" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 - checksum: 10c0/5db1306c844a36264587836860d17f3fd44e5981a2417e66ccb0699d2b05364736f29df2ebc605ae19a7f7b9b9d6a19845771c3052b167ce27702e20337cd334 + storybook: ^8.5.8 + checksum: 10c0/0d6a7f24bb0ae168dfb7f984e2defd16e15d65dd07b1f9c4251c23e1abe88c11fa58d716125c536199e689266eca371cd054f5514c952ab76863946406fbeedd languageName: node linkType: hard "@storybook/test-runner@npm:^0.21.0": - version: 0.21.0 - resolution: "@storybook/test-runner@npm:0.21.0" + version: 0.21.3 + resolution: "@storybook/test-runner@npm:0.21.3" dependencies: "@babel/core": "npm:^7.22.5" "@babel/generator": "npm:^7.22.5" @@ -6060,152 +6085,152 @@ __metadata: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 bin: test-storybook: dist/test-storybook.js - checksum: 10c0/376d9dee64547171407947fd0ee7042bf94152af6b45475917d3a7df2a23a89d46212afdaf946217328b2e6f1c1cf9dc921829cb64e197c50061573707cfafe8 + checksum: 10c0/aec04919852dfc5efd52bc05f74d2e1c3d0f7b207d3e54e05a351cd6727225c4010f9b1c133108460c5868430604fd0732f7200bfd431aad9ece21f0311e8e48 languageName: node linkType: hard -"@storybook/test@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/test@npm:8.4.7" +"@storybook/test@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/test@npm:8.5.8" dependencies: - "@storybook/csf": "npm:^0.1.11" + "@storybook/csf": "npm:0.1.12" "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.4.7" + "@storybook/instrumenter": "npm:8.5.8" "@testing-library/dom": "npm:10.4.0" "@testing-library/jest-dom": "npm:6.5.0" "@testing-library/user-event": "npm:14.5.2" "@vitest/expect": "npm:2.0.5" "@vitest/spy": "npm:2.0.5" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/4b100eacdca6d016a08358b1bf4c17f36450dffc9005557e0184814e546e71d200afccfb652fd2d45404fbd15e75f61fb4b93d869694249769ca919a0a2111f1 + storybook: ^8.5.8 + checksum: 10c0/5d7fb8db776bc9806f1cce9165642ee1889dbecafdf36d546d43c54a78b62e7f7813a9acff94852538f158de9c4bafd6539627d6aff77095b2418aefd7de8311 languageName: node linkType: hard -"@storybook/theming@npm:8.4.7, @storybook/theming@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/theming@npm:8.4.7" +"@storybook/theming@npm:8.5.8, @storybook/theming@npm:^8.4.7": + version: 8.5.8 + resolution: "@storybook/theming@npm:8.5.8" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/20a4975478063cea616ce6ab6b1e9ec181af1424280678ed74dc5afc15b828c043e843696a1643601331c4fd266169ec4bcc5bb43fd2f1f3c01c0e21443a658a + checksum: 10c0/6a3083fb2f3166a86fd177a24974149cea71d31e44cac1730c5c17b04f22cb17de41f65ead2984adb26a272fdf7bcab6d6ebda791c2ce5a21671e90a07a7d8a9 languageName: node linkType: hard "@storybook/web-components-vite@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/web-components-vite@npm:8.4.7" + version: 8.5.8 + resolution: "@storybook/web-components-vite@npm:8.5.8" dependencies: - "@storybook/builder-vite": "npm:8.4.7" - "@storybook/web-components": "npm:8.4.7" + "@storybook/builder-vite": "npm:8.5.8" + "@storybook/web-components": "npm:8.5.8" magic-string: "npm:^0.30.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/c3dbe86cf132cc3d6a18dc85a6679e1077a246297fc1cba22f5082401b85a359b91ef8efd6e5efc59adac2841a02508263072e40fcf7f2ff6987dec45b47711a + storybook: ^8.5.8 + checksum: 10c0/1c4a016c8957790f2b8c7d6815d9d5d434497d4f668c6b4029d34f44c01720f1cc454fdd53d2cebd4c302d571fc64a27f55716fa6402d0a876e90499a87f9d77 languageName: node linkType: hard -"@storybook/web-components@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/web-components@npm:8.4.7" +"@storybook/web-components@npm:8.5.8": + version: 8.5.8 + resolution: "@storybook/web-components@npm:8.5.8" dependencies: - "@storybook/components": "npm:8.4.7" + "@storybook/components": "npm:8.5.8" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:8.4.7" - "@storybook/preview-api": "npm:8.4.7" - "@storybook/theming": "npm:8.4.7" + "@storybook/manager-api": "npm:8.5.8" + "@storybook/preview-api": "npm:8.5.8" + "@storybook/theming": "npm:8.5.8" tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" peerDependencies: lit: ^2.0.0 || ^3.0.0 - storybook: ^8.4.7 - checksum: 10c0/a5e922a250ac142d9e265ad31a4543433af757fcdf1d3f9ccc2c9a1225eb8b80dbd23833bd7da2b30d0e2862ac0411253383d50c4adedda3c24d33c35903c4a2 + storybook: ^8.5.8 + checksum: 10c0/164903cdc3fd15737aa6a3e1bb181a81379b7ea6811e204c6c49004f8173f92f7d9f899a7c76188b353f5cffb5cbce61c19404b5725dac240ce39ec4e4cbf555 languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-darwin-arm64@npm:1.10.7" +"@swc/core-darwin-arm64@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-darwin-arm64@npm:1.10.18" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-darwin-x64@npm:1.10.7" +"@swc/core-darwin-x64@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-darwin-x64@npm:1.10.18" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.10.7" +"@swc/core-linux-arm-gnueabihf@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.10.18" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-linux-arm64-gnu@npm:1.10.7" +"@swc/core-linux-arm64-gnu@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-linux-arm64-gnu@npm:1.10.18" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-linux-arm64-musl@npm:1.10.7" +"@swc/core-linux-arm64-musl@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-linux-arm64-musl@npm:1.10.18" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-linux-x64-gnu@npm:1.10.7" +"@swc/core-linux-x64-gnu@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-linux-x64-gnu@npm:1.10.18" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-linux-x64-musl@npm:1.10.7" +"@swc/core-linux-x64-musl@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-linux-x64-musl@npm:1.10.18" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-win32-arm64-msvc@npm:1.10.7" +"@swc/core-win32-arm64-msvc@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-win32-arm64-msvc@npm:1.10.18" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-win32-ia32-msvc@npm:1.10.7" +"@swc/core-win32-ia32-msvc@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-win32-ia32-msvc@npm:1.10.18" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.10.7": - version: 1.10.7 - resolution: "@swc/core-win32-x64-msvc@npm:1.10.7" +"@swc/core-win32-x64-msvc@npm:1.10.18": + version: 1.10.18 + resolution: "@swc/core-win32-x64-msvc@npm:1.10.18" conditions: os=win32 & cpu=x64 languageName: node linkType: hard "@swc/core@npm:^1.5.22": - version: 1.10.7 - resolution: "@swc/core@npm:1.10.7" - dependencies: - "@swc/core-darwin-arm64": "npm:1.10.7" - "@swc/core-darwin-x64": "npm:1.10.7" - "@swc/core-linux-arm-gnueabihf": "npm:1.10.7" - "@swc/core-linux-arm64-gnu": "npm:1.10.7" - "@swc/core-linux-arm64-musl": "npm:1.10.7" - "@swc/core-linux-x64-gnu": "npm:1.10.7" - "@swc/core-linux-x64-musl": "npm:1.10.7" - "@swc/core-win32-arm64-msvc": "npm:1.10.7" - "@swc/core-win32-ia32-msvc": "npm:1.10.7" - "@swc/core-win32-x64-msvc": "npm:1.10.7" + version: 1.10.18 + resolution: "@swc/core@npm:1.10.18" + dependencies: + "@swc/core-darwin-arm64": "npm:1.10.18" + "@swc/core-darwin-x64": "npm:1.10.18" + "@swc/core-linux-arm-gnueabihf": "npm:1.10.18" + "@swc/core-linux-arm64-gnu": "npm:1.10.18" + "@swc/core-linux-arm64-musl": "npm:1.10.18" + "@swc/core-linux-x64-gnu": "npm:1.10.18" + "@swc/core-linux-x64-musl": "npm:1.10.18" + "@swc/core-win32-arm64-msvc": "npm:1.10.18" + "@swc/core-win32-ia32-msvc": "npm:1.10.18" + "@swc/core-win32-x64-msvc": "npm:1.10.18" "@swc/counter": "npm:^0.1.3" "@swc/types": "npm:^0.1.17" peerDependencies: @@ -6234,7 +6259,7 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: 10c0/73d3b164620590aff57512125e3cfd6dc1bb3346882fa9ad12abf8029f8be01eb71e6afc3c760c3e2cb479a2d7ff3180bf298f907768b93e3eac15fc72e0d855 + checksum: 10c0/52a3d8e26b838855bb9ece737c756058d00e3635062e436a31651aefe59d6098ecf92c967bcf4a831b99975eb9c591f123db1291e35508d030216e9b936aa1e9 languageName: node linkType: hard @@ -6259,11 +6284,11 @@ __metadata: linkType: hard "@swc/types@npm:^0.1.17": - version: 0.1.17 - resolution: "@swc/types@npm:0.1.17" + version: 0.1.18 + resolution: "@swc/types@npm:0.1.18" dependencies: "@swc/counter": "npm:^0.1.3" - checksum: 10c0/29f5c8933a16042956f1adb7383e836ed7646cbf679826e78b53fdd0c08e8572cb42152e527b6b530a9bd1052d33d0972f90f589761ccd252c12652c9b7a72fc + checksum: 10c0/0c34ed1670daeb991de87a79c859d68980def32caf02999ef906859d02a2ee13a7f998e84b40022ce970fdceea9f77005e4965038f5139b93035956118aae7ea languageName: node linkType: hard @@ -6400,11 +6425,11 @@ __metadata: linkType: hard "@types/conventional-commits-parser@npm:^5.0.0": - version: 5.0.0 - resolution: "@types/conventional-commits-parser@npm:5.0.0" + version: 5.0.1 + resolution: "@types/conventional-commits-parser@npm:5.0.1" dependencies: "@types/node": "npm:*" - checksum: 10c0/16c748ce01cb3b3ea5947950acd695569c0daa8da62cc7e0eb98b15c4d7f812f95c079fe2c853325509f8aa73cfd388390319ae4621c8dfb21eeacb63accdb25 + checksum: 10c0/4b7b561f195f779d07f973801a9f15d77cd58ceb67e817459688b11cc735288d30de050f445c91f4cd2c007fa86824e59a6e3cde602d150b828c4474f6e67be5 languageName: node linkType: hard @@ -6417,10 +6442,10 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:1.0.5, @types/estree@npm:^1.0.0": - version: 1.0.5 - resolution: "@types/estree@npm:1.0.5" - checksum: 10c0/b3b0e334288ddb407c7b3357ca67dbee75ee22db242ca7c56fe27db4e1a31989cb8af48a84dd401deb787fe10cc6b2ab1ee82dc4783be87ededbe3d53c79c70d +"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.0": + version: 1.0.6 + resolution: "@types/estree@npm:1.0.6" + checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a languageName: node linkType: hard @@ -6518,11 +6543,11 @@ __metadata: linkType: hard "@types/node@npm:*": - version: 20.14.11 - resolution: "@types/node@npm:20.14.11" + version: 22.13.5 + resolution: "@types/node@npm:22.13.5" dependencies: - undici-types: "npm:~5.26.4" - checksum: 10c0/5306becc0ff41d81b1e31524bd376e958d0741d1ce892dffd586b9ae0cb6553c62b0d62abd16da8bea6b9a2c17572d360450535d7c073794b0cef9cb4e39691e + undici-types: "npm:~6.20.0" + checksum: 10c0/a2e7ed7bb0690e439004779baedeb05159c5cc41ef6d81c7a6ebea5303fde4033669e1c0e41ff7453b45fd2fea8dbd55fddfcd052950c7fcae3167c970bca725 languageName: node linkType: hard @@ -6564,9 +6589,9 @@ __metadata: linkType: hard "@types/unist@npm:^2": - version: 2.0.10 - resolution: "@types/unist@npm:2.0.10" - checksum: 10c0/5f247dc2229944355209ad5c8e83cfe29419fa7f0a6d557421b1985a1500444719cc9efcc42c652b55aab63c931813c88033e0202c1ac684bcd4829d66e44731 + version: 2.0.11 + resolution: "@types/unist@npm:2.0.11" + checksum: 10c0/24dcdf25a168f453bb70298145eb043cfdbb82472db0bc0b56d6d51cd2e484b9ed8271d4ac93000a80da568f2402e9339723db262d0869e2bf13bc58e081768d languageName: node linkType: hard @@ -6603,9 +6628,9 @@ __metadata: linkType: hard "@ungap/structured-clone@npm:^1.2.0": - version: 1.2.0 - resolution: "@ungap/structured-clone@npm:1.2.0" - checksum: 10c0/8209c937cb39119f44eb63cf90c0b73e7c754209a6411c707be08e50e29ee81356dca1a848a405c8bdeebfe2f5e4f831ad310ae1689eeef65e7445c090c6657d + version: 1.3.0 + resolution: "@ungap/structured-clone@npm:1.3.0" + checksum: 10c0/0fc3097c2540ada1fc340ee56d58d96b5b536a2a0dab6e3ec17d4bfc8c4c86db345f61a375a8185f9da96f01c69678f836a2b57eeaa9e4b8eeafd26428e57b0a languageName: node linkType: hard @@ -6652,12 +6677,12 @@ __metadata: languageName: node linkType: hard -"@vitest/pretty-format@npm:2.1.4": - version: 2.1.4 - resolution: "@vitest/pretty-format@npm:2.1.4" +"@vitest/pretty-format@npm:2.1.9": + version: 2.1.9 + resolution: "@vitest/pretty-format@npm:2.1.9" dependencies: tinyrainbow: "npm:^1.2.0" - checksum: 10c0/dc20f04f64c95731bf9640fc53ae918d928ab93e70a56d9e03f201700098cdb041b50a8f6a5f30604d4a048c15f315537453f33054e29590a05d5b368ae6849d + checksum: 10c0/155f9ede5090eabed2a73361094bb35ed4ec6769ae3546d2a2af139166569aec41bb80e031c25ff2da22b71dd4ed51e5468e66a05e6aeda5f14b32e30bc18f00 languageName: node linkType: hard @@ -6683,13 +6708,13 @@ __metadata: linkType: hard "@vitest/utils@npm:^2.1.1": - version: 2.1.4 - resolution: "@vitest/utils@npm:2.1.4" + version: 2.1.9 + resolution: "@vitest/utils@npm:2.1.9" dependencies: - "@vitest/pretty-format": "npm:2.1.4" + "@vitest/pretty-format": "npm:2.1.9" loupe: "npm:^3.1.2" tinyrainbow: "npm:^1.2.0" - checksum: 10c0/fd632dbc2496d14bcc609230f1dad73039c9f52f4ca533d6b68fa1a04dd448e03510f2a8e4a368fd274cbb8902a6cd800140ab366dd055256beb2c0dcafcd9f2 + checksum: 10c0/81a346cd72b47941f55411f5df4cc230e5f740d1e97e0d3f771b27f007266fc1f28d0438582f6409ea571bc0030ed37f684c64c58d1947d6298d770c21026fdf languageName: node linkType: hard @@ -6773,6 +6798,13 @@ __metadata: languageName: node linkType: hard +"abbrev@npm:^3.0.0": + version: 3.0.0 + resolution: "abbrev@npm:3.0.0" + checksum: 10c0/049704186396f571650eb7b22ed3627b77a5aedf98bb83caf2eac81ca2a3e25e795394b0464cfb2d6076df3db6a5312139eac5b6a126ca296ac53c5008069c28 + languageName: node + linkType: hard + "abort-controller@npm:^3.0.0": version: 3.0.0 resolution: "abort-controller@npm:3.0.0" @@ -6818,16 +6850,7 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^8.1.1": - version: 8.3.3 - resolution: "acorn-walk@npm:8.3.3" - dependencies: - acorn: "npm:^8.11.0" - checksum: 10c0/4a9e24313e6a0a7b389e712ba69b66b455b4cb25988903506a8d247e7b126f02060b05a8a5b738a9284214e4ca95f383dd93443a4ba84f1af9b528305c7f243b - languageName: node - linkType: hard - -"acorn-walk@npm:^8.3.4": +"acorn-walk@npm:^8.1.1, acorn-walk@npm:^8.3.4": version: 8.3.4 resolution: "acorn-walk@npm:8.3.4" dependencies: @@ -6845,7 +6868,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.11.0, acorn@npm:^8.13.0": +"acorn@npm:^8.11.0, acorn@npm:^8.13.0, acorn@npm:^8.14.0": version: 8.14.0 resolution: "acorn@npm:8.14.0" bin: @@ -6854,15 +6877,6 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.12.1": - version: 8.12.1 - resolution: "acorn@npm:8.12.1" - bin: - acorn: bin/acorn - checksum: 10c0/51fb26cd678f914e13287e886da2d7021f8c2bc0ccc95e03d3e0447ee278dd3b40b9c57dc222acd5881adcf26f3edc40901a4953403232129e3876793cd17386 - languageName: node - linkType: hard - "acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.9.0": version: 8.11.3 resolution: "acorn@npm:8.11.3" @@ -6884,7 +6898,7 @@ __metadata: languageName: node linkType: hard -"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0, agent-base@npm:^7.1.1": +"agent-base@npm:^7.0.2": version: 7.1.1 resolution: "agent-base@npm:7.1.1" dependencies: @@ -6893,7 +6907,7 @@ __metadata: languageName: node linkType: hard -"agent-base@npm:^7.1.2": +"agent-base@npm:^7.1.0, agent-base@npm:^7.1.2": version: 7.1.3 resolution: "agent-base@npm:7.1.3" checksum: 10c0/6192b580c5b1d8fb399b9c62bf8343d76654c2dd62afcb9a52b2cf44a8b6ace1e3b704d3fe3547d91555c857d3df02603341ff2cb961b9cfe2b12f9f3c38ee11 @@ -7003,9 +7017,9 @@ __metadata: linkType: hard "ansi-regex@npm:^6.0.1": - version: 6.0.1 - resolution: "ansi-regex@npm:6.0.1" - checksum: 10c0/cbe16dbd2c6b2735d1df7976a7070dd277326434f0212f43abf6d87674095d247968209babdaad31bb00882fa68807256ba9be340eec2f1004de14ca75f52a08 + version: 6.1.0 + resolution: "ansi-regex@npm:6.1.0" + checksum: 10c0/a91daeddd54746338478eef88af3439a7edf30f8e23196e2d6ed182da9add559c601266dbef01c2efa46a958ad6f1f8b176799657616c702b5b02e799e7fd8dc languageName: node linkType: hard @@ -7074,7 +7088,7 @@ __metadata: languageName: node linkType: hard -"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2": +"anymatch@npm:^3.0.3": version: 3.1.3 resolution: "anymatch@npm:3.1.3" dependencies: @@ -7163,7 +7177,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:5.3.0, aria-query@npm:^5.0.0": +"aria-query@npm:5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -7172,13 +7186,20 @@ __metadata: languageName: node linkType: hard -"array-buffer-byte-length@npm:^1.0.1": - version: 1.0.1 - resolution: "array-buffer-byte-length@npm:1.0.1" +"aria-query@npm:^5.0.0": + version: 5.3.2 + resolution: "aria-query@npm:5.3.2" + checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e + languageName: node + linkType: hard + +"array-buffer-byte-length@npm:^1.0.1, array-buffer-byte-length@npm:^1.0.2": + version: 1.0.2 + resolution: "array-buffer-byte-length@npm:1.0.2" dependencies: - call-bind: "npm:^1.0.5" - is-array-buffer: "npm:^3.0.4" - checksum: 10c0/f5cdf54527cd18a3d2852ddf73df79efec03829e7373a8322ef5df2b4ef546fb365c19c71d6b42d641cb6bfe0f1a2f19bc0ece5b533295f86d7c3d522f228917 + call-bound: "npm:^1.0.3" + is-array-buffer: "npm:^3.0.5" + checksum: 10c0/74e1d2d996941c7a1badda9cabb7caab8c449db9086407cad8a1b71d2604cc8abf105db8ca4e02c04579ec58b7be40279ddb09aea4784832984485499f48432d languageName: node linkType: hard @@ -7243,19 +7264,18 @@ __metadata: languageName: node linkType: hard -"arraybuffer.prototype.slice@npm:^1.0.3": - version: 1.0.3 - resolution: "arraybuffer.prototype.slice@npm:1.0.3" +"arraybuffer.prototype.slice@npm:^1.0.4": + version: 1.0.4 + resolution: "arraybuffer.prototype.slice@npm:1.0.4" dependencies: array-buffer-byte-length: "npm:^1.0.1" - call-bind: "npm:^1.0.5" + call-bind: "npm:^1.0.8" define-properties: "npm:^1.2.1" - es-abstract: "npm:^1.22.3" - es-errors: "npm:^1.2.1" - get-intrinsic: "npm:^1.2.3" + es-abstract: "npm:^1.23.5" + es-errors: "npm:^1.3.0" + get-intrinsic: "npm:^1.2.6" is-array-buffer: "npm:^3.0.4" - is-shared-array-buffer: "npm:^1.0.2" - checksum: 10c0/d32754045bcb2294ade881d45140a5e52bda2321b9e98fa514797b7f0d252c4c5ab0d1edb34112652c62fa6a9398def568da63a4d7544672229afea283358c36 + checksum: 10c0/2f2459caa06ae0f7f615003f9104b01f6435cc803e11bd2a655107d52a1781dc040532dc44d93026b694cc18793993246237423e13a5337e86b43ed604932c06 languageName: node linkType: hard @@ -7317,6 +7337,13 @@ __metadata: languageName: node linkType: hard +"async-function@npm:^1.0.0": + version: 1.0.0 + resolution: "async-function@npm:1.0.0" + checksum: 10c0/669a32c2cb7e45091330c680e92eaeb791bc1d4132d827591e499cd1f776ff5a873e77e5f92d0ce795a8d60f10761dec9ddfe7225a5de680f5d357f67b1aac73 + languageName: node + linkType: hard + "async-sema@npm:^3.1.1": version: 3.1.1 resolution: "async-sema@npm:3.1.1" @@ -7325,9 +7352,9 @@ __metadata: linkType: hard "async@npm:^3.2.3, async@npm:^3.2.4": - version: 3.2.5 - resolution: "async@npm:3.2.5" - checksum: 10c0/1408287b26c6db67d45cb346e34892cee555b8b59e6c68e6f8c3e495cad5ca13b4f218180e871f3c2ca30df4ab52693b66f2f6ff43644760cab0b2198bda79c1 + version: 3.2.6 + resolution: "async@npm:3.2.6" + checksum: 10c0/36484bb15ceddf07078688d95e27076379cc2f87b10c03b6dd8a83e89475a3c8df5848859dd06a4c95af1e4c16fc973de0171a77f18ea00be899aca2a4f85e70 languageName: node linkType: hard @@ -7347,25 +7374,7 @@ __metadata: languageName: node linkType: hard -"autoprefixer@npm:^10.4.19": - version: 10.4.19 - resolution: "autoprefixer@npm:10.4.19" - dependencies: - browserslist: "npm:^4.23.0" - caniuse-lite: "npm:^1.0.30001599" - fraction.js: "npm:^4.3.7" - normalize-range: "npm:^0.1.2" - picocolors: "npm:^1.0.0" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.1.0 - bin: - autoprefixer: bin/autoprefixer - checksum: 10c0/fe0178eb8b1da4f15c6535cd329926609b22d1811e047371dccce50563623f8075dd06fb167daff059e4228da651b0bdff6d9b44281541eaf0ce0b79125bfd19 - languageName: node - linkType: hard - -"autoprefixer@npm:^10.4.20": +"autoprefixer@npm:^10.4.19, autoprefixer@npm:^10.4.20": version: 10.4.20 resolution: "autoprefixer@npm:10.4.20" dependencies: @@ -7448,9 +7457,9 @@ __metadata: linkType: hard "axe-core@npm:^4.2.0": - version: 4.9.1 - resolution: "axe-core@npm:4.9.1" - checksum: 10c0/ac9e5a0c6fa115a43ebffc32a1d2189e1ca6431b5a78e88cdcf94a72a25c5964185682edd94fe6bdb1cb4266c0d06301b022866e0e50dcdf6e3cefe556470110 + version: 4.10.2 + resolution: "axe-core@npm:4.10.2" + checksum: 10c0/0e20169077de96946a547fce0df39d9aeebe0077f9d3eeff4896518b96fde857f80b98f0d4279274a7178791744dd5a54bb4f322de45b4f561ffa2586ff9a09d languageName: node linkType: hard @@ -7477,9 +7486,9 @@ __metadata: linkType: hard "b4a@npm:^1.6.4": - version: 1.6.6 - resolution: "b4a@npm:1.6.6" - checksum: 10c0/56f30277666cb511a15829e38d369b114df7dc8cec4cedc09cc5d685bc0f27cb63c7bcfb58e09a19a1b3c4f2541069ab078b5328542e85d74a39620327709a38 + version: 1.6.7 + resolution: "b4a@npm:1.6.7" + checksum: 10c0/ec2f004d1daae04be8c5a1f8aeb7fea213c34025e279db4958eb0b82c1729ee25f7c6e89f92a5f65c8a9cf2d017ce27e3dda912403341d1781bd74528a4849d4 languageName: node linkType: hard @@ -7584,9 +7593,9 @@ __metadata: linkType: hard "bare-events@npm:^2.2.0": - version: 2.4.2 - resolution: "bare-events@npm:2.4.2" - checksum: 10c0/09fa923061f31f815e83504e2ed4a8ba87732a01db40a7fae703dbb7eef7f05d99264b5e186074cbe9698213990d1af564c62cca07a5ff88baea8099ad9a6303 + version: 2.5.4 + resolution: "bare-events@npm:2.5.4" + checksum: 10c0/877a9cea73d545e2588cdbd6fd01653e27dac48ad6b44985cdbae73e1f57f292d4ba52e25d1fba53674c1053c463d159f3d5c7bc36a2e6e192e389b499ddd627 languageName: node linkType: hard @@ -7622,13 +7631,6 @@ __metadata: languageName: node linkType: hard -"binary-extensions@npm:^2.0.0": - version: 2.3.0 - resolution: "binary-extensions@npm:2.3.0" - checksum: 10c0/75a59cafc10fb12a11d510e77110c6c7ae3f4ca22463d52487709ca7f18f69d886aa387557cc9864fbdb10153d0bdb4caacabf11541f55e89ed6e18d12ece2b5 - languageName: node - linkType: hard - "binary@npm:^0.3.0": version: 0.3.0 resolution: "binary@npm:0.3.0" @@ -7699,7 +7701,7 @@ __metadata: languageName: node linkType: hard -"braces@npm:^3.0.3, braces@npm:~3.0.2": +"braces@npm:^3.0.3": version: 3.0.3 resolution: "braces@npm:3.0.3" dependencies: @@ -7722,31 +7724,31 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.23.0": - version: 4.23.2 - resolution: "browserslist@npm:4.23.2" +"browserslist@npm:^4.0.0": + version: 4.24.4 + resolution: "browserslist@npm:4.24.4" dependencies: - caniuse-lite: "npm:^1.0.30001640" - electron-to-chromium: "npm:^1.4.820" - node-releases: "npm:^2.0.14" - update-browserslist-db: "npm:^1.1.0" + caniuse-lite: "npm:^1.0.30001688" + electron-to-chromium: "npm:^1.5.73" + node-releases: "npm:^2.0.19" + update-browserslist-db: "npm:^1.1.1" bin: browserslist: cli.js - checksum: 10c0/0217d23c69ed61cdd2530c7019bf7c822cd74c51f8baab18dd62457fed3129f52499f8d3a6f809ae1fb7bb3050aa70caa9a529cc36c7478427966dbf429723a5 + checksum: 10c0/db7ebc1733cf471e0b490b4f47e3e2ea2947ce417192c9246644e92c667dd56a71406cc58f62ca7587caf828364892e9952904a02b7aead752bc65b62a37cfe9 languageName: node linkType: hard -"browserslist@npm:^4.23.1, browserslist@npm:^4.24.0": - version: 4.24.2 - resolution: "browserslist@npm:4.24.2" +"browserslist@npm:^4.23.1": + version: 4.23.1 + resolution: "browserslist@npm:4.23.1" dependencies: - caniuse-lite: "npm:^1.0.30001669" - electron-to-chromium: "npm:^1.5.41" - node-releases: "npm:^2.0.18" - update-browserslist-db: "npm:^1.1.1" + caniuse-lite: "npm:^1.0.30001629" + electron-to-chromium: "npm:^1.4.796" + node-releases: "npm:^2.0.14" + update-browserslist-db: "npm:^1.0.16" bin: browserslist: cli.js - checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a + checksum: 10c0/eb47c7ab9d60db25ce2faca70efeb278faa7282a2f62b7f2fa2f92e5f5251cf65144244566c86559419ff4f6d78f59ea50e39911321ad91f3b27788901f1f5e9 languageName: node linkType: hard @@ -7764,6 +7766,20 @@ __metadata: languageName: node linkType: hard +"browserslist@npm:^4.24.0": + version: 4.24.2 + resolution: "browserslist@npm:4.24.2" + dependencies: + caniuse-lite: "npm:^1.0.30001669" + electron-to-chromium: "npm:^1.5.41" + node-releases: "npm:^2.0.18" + update-browserslist-db: "npm:^1.1.1" + bin: + browserslist: cli.js + checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a + languageName: node + linkType: hard + "bser@npm:2.1.1": version: 2.1.1 resolution: "bser@npm:2.1.1" @@ -7889,6 +7905,16 @@ __metadata: languageName: node linkType: hard +"cacheable@npm:^1.8.8": + version: 1.8.8 + resolution: "cacheable@npm:1.8.8" + dependencies: + hookified: "npm:^1.7.0" + keyv: "npm:^5.2.3" + checksum: 10c0/24e0f93782015be75b1ec9fe3fb151b2921f61c282091b873f78a0efeb141e95a21d8aa5f4c6bd99a8acb0b485deb5801aa32b4ecf4b666efa7446739368588b + languageName: node + linkType: hard + "caching-transform@npm:^4.0.0": version: 4.0.0 resolution: "caching-transform@npm:4.0.0" @@ -7901,16 +7927,35 @@ __metadata: languageName: node linkType: hard -"call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.6, call-bind@npm:^1.0.7": - version: 1.0.7 - resolution: "call-bind@npm:1.0.7" +"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2": + version: 1.0.2 + resolution: "call-bind-apply-helpers@npm:1.0.2" dependencies: - es-define-property: "npm:^1.0.0" es-errors: "npm:^1.3.0" function-bind: "npm:^1.1.2" + checksum: 10c0/47bd9901d57b857590431243fea704ff18078b16890a6b3e021e12d279bbf211d039155e27d7566b374d49ee1f8189344bac9833dec7a20cdec370506361c938 + languageName: node + linkType: hard + +"call-bind@npm:^1.0.7, call-bind@npm:^1.0.8": + version: 1.0.8 + resolution: "call-bind@npm:1.0.8" + dependencies: + call-bind-apply-helpers: "npm:^1.0.0" + es-define-property: "npm:^1.0.0" get-intrinsic: "npm:^1.2.4" - set-function-length: "npm:^1.2.1" - checksum: 10c0/a3ded2e423b8e2a265983dba81c27e125b48eefb2655e7dfab6be597088da3d47c47976c24bc51b8fd9af1061f8f87b4ab78a314f3c77784b2ae2ba535ad8b8d + set-function-length: "npm:^1.2.2" + checksum: 10c0/a13819be0681d915144467741b69875ae5f4eba8961eb0bf322aab63ec87f8250eb6d6b0dcbb2e1349876412a56129ca338592b3829ef4343527f5f18a0752d4 + languageName: node + linkType: hard + +"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3": + version: 1.0.3 + resolution: "call-bound@npm:1.0.3" + dependencies: + call-bind-apply-helpers: "npm:^1.0.1" + get-intrinsic: "npm:^1.2.6" + checksum: 10c0/45257b8e7621067304b30dbd638e856cac913d31e8e00a80d6cf172911acd057846572d0b256b45e652d515db6601e2974a1b1a040e91b4fc36fb3dd86fa69cf languageName: node linkType: hard @@ -7964,24 +8009,17 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001599, caniuse-lite@npm:^1.0.30001640": - version: 1.0.30001699 - resolution: "caniuse-lite@npm:1.0.30001699" - checksum: 10c0/e87b3a0602c3124131f6a21f1eb262378e17a2ee3089e3c472ac8b9caa85cf7d6a219655379302c29c6f10a74051f2a712639d7f98ee0444c73fefcbaf25d519 - languageName: node - linkType: hard - -"caniuse-lite@npm:^1.0.30001646": - version: 1.0.30001660 - resolution: "caniuse-lite@npm:1.0.30001660" - checksum: 10c0/d28900b56c597176d515c3175ca75c454f2d30cb2c09a44d7bdb009bb0c4d8a2557905adb77642889bbe9feb85fbfe9d974c8b8e53521fb4b50ee16ab246104e +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688": + version: 1.0.30001700 + resolution: "caniuse-lite@npm:1.0.30001700" + checksum: 10c0/3d391bcdd193208166d3ad759de240b9c18ac3759dbd57195770f0fcd2eedcd47d5e853609aba1eee5a2def44b0a14eee457796bdb3451a27de0c8b27355017c languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001669": - version: 1.0.30001673 - resolution: "caniuse-lite@npm:1.0.30001673" - checksum: 10c0/0e73a2b0f06973052e563dec9990a6fd440d510fa2ff54fa50310e736abb86e96c96b43c10e609fc22f2109f98fe76428b70441baf6b1a49f69ccf50c1879f6b +"caniuse-lite@npm:^1.0.30001629, caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001690 + resolution: "caniuse-lite@npm:1.0.30001690" + checksum: 10c0/646bd469032afa90400a84dec30a2b00a6eda62c03ead358117e3f884cda8aacec02ec058a6dbee5eaf9714f83e483b9b0eb4fb42febb8076569f5ca40f1d347 languageName: node linkType: hard @@ -8036,15 +8074,15 @@ __metadata: linkType: hard "chai@npm:^5.1.1": - version: 5.1.1 - resolution: "chai@npm:5.1.1" + version: 5.2.0 + resolution: "chai@npm:5.2.0" dependencies: assertion-error: "npm:^2.0.1" check-error: "npm:^2.1.1" deep-eql: "npm:^5.0.1" loupe: "npm:^3.1.0" pathval: "npm:^2.0.0" - checksum: 10c0/e7f00e5881e3d5224f08fe63966ed6566bd9fdde175863c7c16dd5240416de9b34c4a0dd925f4fd64ad56256ca6507d32cf6131c49e1db65c62578eb31d4566c + checksum: 10c0/dfd1cb719c7cebb051b727672d382a35338af1470065cb12adb01f4ee451bbf528e0e0f9ab2016af5fc1eea4df6e7f4504dc8443f8f00bd8fb87ad32dc516f7d languageName: node linkType: hard @@ -8101,7 +8139,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^5.2.0, chalk@npm:~5.4.1": +"chalk@npm:^5.2.0, chalk@npm:^5.4.1": version: 5.4.1 resolution: "chalk@npm:5.4.1" checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef @@ -8219,25 +8257,6 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.6.0": - version: 3.6.0 - resolution: "chokidar@npm:3.6.0" - dependencies: - anymatch: "npm:~3.1.2" - braces: "npm:~3.0.2" - fsevents: "npm:~2.3.2" - glob-parent: "npm:~5.1.2" - is-binary-path: "npm:~2.1.0" - is-glob: "npm:~4.0.1" - normalize-path: "npm:~3.0.0" - readdirp: "npm:~3.6.0" - dependenciesMeta: - fsevents: - optional: true - checksum: 10c0/8361dcd013f2ddbe260eacb1f3cb2f2c6f2b0ad118708a343a5ed8158941a39cb8fb1d272e0f389712e74ee90ce8ba864eece9e0e62b9705cb468a2f6d917462 - languageName: node - linkType: hard - "chownr@npm:^2.0.0": version: 2.0.0 resolution: "chownr@npm:2.0.0" @@ -8253,8 +8272,8 @@ __metadata: linkType: hard "chromatic@npm:^11.15.0": - version: 11.20.2 - resolution: "chromatic@npm:11.20.2" + version: 11.25.2 + resolution: "chromatic@npm:11.25.2" peerDependencies: "@chromatic-com/cypress": ^0.*.* || ^1.0.0 "@chromatic-com/playwright": ^0.*.* || ^1.0.0 @@ -8267,7 +8286,7 @@ __metadata: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: 10c0/9f60e966fc7dc22df920649e3860493dbf7c86ea34d96e9818e4450c7572e47b8554a3ecec273881184303ee9098ca15b4c85d519b37138ee0399387b1356b7d + checksum: 10c0/2cb4bb40a062005292a4cd606321f6c9bdaa31e255e66bae12c780bca9b72e883c017ebe48c5a9228db88a010f5977571ef7dfdcdd4195ad0e7b955f9966d7df languageName: node linkType: hard @@ -8305,9 +8324,9 @@ __metadata: linkType: hard "ci-info@npm:^4.0.0": - version: 4.0.0 - resolution: "ci-info@npm:4.0.0" - checksum: 10c0/ecc003e5b60580bd081d83dd61d398ddb8607537f916313e40af4667f9c92a1243bd8e8a591a5aa78e418afec245dbe8e90a0e26e39ca0825129a99b978dd3f9 + version: 4.1.0 + resolution: "ci-info@npm:4.1.0" + checksum: 10c0/0f969ce32a974c542bc8abe4454b220d9d9323bb9415054c92a900faa5fdda0bb222eda68c490127c1d78503510d46b6aca614ecaba5a60515b8ac7e170119e6 languageName: node linkType: hard @@ -8319,9 +8338,9 @@ __metadata: linkType: hard "cjs-module-lexer@npm:^1.0.0": - version: 1.4.1 - resolution: "cjs-module-lexer@npm:1.4.1" - checksum: 10c0/5a7d8279629c9ba8ccf38078c2fed75b7737973ced22b9b5a54180efa57fb2fe2bb7bec6aec55e3b8f3f5044f5d7b240347ad9bd285e7c3d0ee5b0a1d0504dfc + version: 1.4.3 + resolution: "cjs-module-lexer@npm:1.4.3" + checksum: 10c0/076b3af85adc4d65dbdab1b5b240fe5b45d44fcf0ef9d429044dd94d19be5589376805c44fb2d4b3e684e5fe6a9b7cf3e426476a6507c45283c5fc6ff95240be languageName: node linkType: hard @@ -8350,15 +8369,6 @@ __metadata: languageName: node linkType: hard -"cli-cursor@npm:^4.0.0": - version: 4.0.0 - resolution: "cli-cursor@npm:4.0.0" - dependencies: - restore-cursor: "npm:^4.0.0" - checksum: 10c0/e776e8c3c6727300d0539b0d25160b2bb56aed1a63942753ba1826b012f337a6f4b7ace3548402e4f2f13b5e16bfd751be672c44b203205e7eca8be94afec42c - languageName: node - linkType: hard - "cli-cursor@npm:^5.0.0": version: 5.0.0 resolution: "cli-cursor@npm:5.0.0" @@ -8556,7 +8566,14 @@ __metadata: languageName: node linkType: hard -"commander@npm:, commander@npm:^12.1.0, commander@npm:~12.1.0": +"commander@npm:, commander@npm:^13.1.0": + version: 13.1.0 + resolution: "commander@npm:13.1.0" + checksum: 10c0/7b8c5544bba704fbe84b7cab2e043df8586d5c114a4c5b607f83ae5060708940ed0b5bd5838cf8ce27539cde265c1cbd59ce3c8c6b017ed3eec8943e3a415164 + languageName: node + linkType: hard + +"commander@npm:^12.1.0": version: 12.1.0 resolution: "commander@npm:12.1.0" checksum: 10c0/6e1996680c083b3b897bfc1cfe1c58dfbcd9842fd43e1aaf8a795fbc237f65efcc860a3ef457b318e73f29a4f4a28f6403c3d653d021d960e4632dd45bde54a9 @@ -8591,13 +8608,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:^6.1.0": - version: 6.2.1 - resolution: "commander@npm:6.2.1" - checksum: 10c0/85748abd9d18c8bc88febed58b98f66b7c591d9b5017cad459565761d7b29ca13b7783ea2ee5ce84bf235897333706c4ce29adf1ce15c8252780e7000e2ce9ea - languageName: node - linkType: hard - "commander@npm:^7.2.0": version: 7.2.0 resolution: "commander@npm:7.2.0" @@ -8849,7 +8859,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5": +"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.1, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3, cross-spawn@npm:^7.0.5, cross-spawn@npm:^7.0.6": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" dependencies: @@ -8905,10 +8915,10 @@ __metadata: languageName: node linkType: hard -"css-functions-list@npm:^3.2.2": - version: 3.2.2 - resolution: "css-functions-list@npm:3.2.2" - checksum: 10c0/8638a63d0cf1bdc50d4a752ec1c94a57e9953c3b03eace4f5526db20bec3c061e95089f905dbb4999c44b9780ce777ba856967560f6d15119a303f6030901c10 +"css-functions-list@npm:^3.2.3": + version: 3.2.3 + resolution: "css-functions-list@npm:3.2.3" + checksum: 10c0/03f9ed34eeed310d2b1cf0e524eea02bc5f87854a4de85f8957ea432ab1036841a3fb00879590519f7bb8fda40d992ce7a72fa9b61696ca1dc53b90064858f96 languageName: node linkType: hard @@ -8970,6 +8980,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^3.1.0": + version: 3.1.0 + resolution: "css-tree@npm:3.1.0" + dependencies: + mdn-data: "npm:2.12.2" + source-map-js: "npm:^1.0.1" + checksum: 10c0/b5715852c2f397c715ca00d56ec53fc83ea596295ae112eb1ba6a1bda3b31086380e596b1d8c4b980fe6da09e7d0fc99c64d5bb7313030dd0fba9c1415f30979 + languageName: node + linkType: hard + "css-tree@npm:~2.2.0": version: 2.2.1 resolution: "css-tree@npm:2.2.1" @@ -8995,9 +9015,9 @@ __metadata: linkType: hard "cssdb@npm:^8.1.0": - version: 8.1.0 - resolution: "cssdb@npm:8.1.0" - checksum: 10c0/1fa1f1566c7e9964f5c71e443583eaba16a90933a3ef6803815c4281d084b75da948c415bade33d7085894fe0929c082fcb3135bf4400048cfff40d227ebd5dd + version: 8.2.3 + resolution: "cssdb@npm:8.2.3" + checksum: 10c0/17c3ca6432ed02431db6b44bed74649ccef7d7b7b900ccbc7297525f030722c441dd67c71f28aef3cfa0814ba7b254a24adfb0dcd5728937da179ff437cdcd0c languageName: node linkType: hard @@ -9027,46 +9047,6 @@ __metadata: languageName: node linkType: hard -"cssnano-preset-default@npm:^7.0.4": - version: 7.0.4 - resolution: "cssnano-preset-default@npm:7.0.4" - dependencies: - browserslist: "npm:^4.23.1" - css-declaration-sorter: "npm:^7.2.0" - cssnano-utils: "npm:^5.0.0" - postcss-calc: "npm:^10.0.0" - postcss-colormin: "npm:^7.0.1" - postcss-convert-values: "npm:^7.0.2" - postcss-discard-comments: "npm:^7.0.1" - postcss-discard-duplicates: "npm:^7.0.0" - postcss-discard-empty: "npm:^7.0.0" - postcss-discard-overridden: "npm:^7.0.0" - postcss-merge-longhand: "npm:^7.0.2" - postcss-merge-rules: "npm:^7.0.2" - postcss-minify-font-values: "npm:^7.0.0" - postcss-minify-gradients: "npm:^7.0.0" - postcss-minify-params: "npm:^7.0.1" - postcss-minify-selectors: "npm:^7.0.2" - postcss-normalize-charset: "npm:^7.0.0" - postcss-normalize-display-values: "npm:^7.0.0" - postcss-normalize-positions: "npm:^7.0.0" - postcss-normalize-repeat-style: "npm:^7.0.0" - postcss-normalize-string: "npm:^7.0.0" - postcss-normalize-timing-functions: "npm:^7.0.0" - postcss-normalize-unicode: "npm:^7.0.1" - postcss-normalize-url: "npm:^7.0.0" - postcss-normalize-whitespace: "npm:^7.0.0" - postcss-ordered-values: "npm:^7.0.1" - postcss-reduce-initial: "npm:^7.0.1" - postcss-reduce-transforms: "npm:^7.0.0" - postcss-svgo: "npm:^7.0.1" - postcss-unique-selectors: "npm:^7.0.1" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/0083821e778bdf7b8aa9589408a01a717be730f73584e7b81756a6fcf87af05b8f17342025e666572a8d573cc30783f2d817b0f7ad63670398bc3135b017ccad - languageName: node - linkType: hard - "cssnano-preset-default@npm:^7.0.6": version: 7.0.6 resolution: "cssnano-preset-default@npm:7.0.6" @@ -9117,14 +9097,14 @@ __metadata: linkType: hard "cssnano@npm:^7.0.3": - version: 7.0.4 - resolution: "cssnano@npm:7.0.4" + version: 7.0.6 + resolution: "cssnano@npm:7.0.6" dependencies: - cssnano-preset-default: "npm:^7.0.4" + cssnano-preset-default: "npm:^7.0.6" lilconfig: "npm:^3.1.2" peerDependencies: postcss: ^8.4.31 - checksum: 10c0/3939a0b37b11cb4bae92f7916517c7ba21257551f92517b49a640d5df32e855fb7e73321f4be44d2c2de578309c05d711cdcb1976e95607b1b7f92bd4cbd1350 + checksum: 10c0/19ff09931a1531e7c0c0d8928da554d99213aa0bb1f3b93cc6b4987727d60a8cd5537b113a5cf4f95cc1db65bba3f2b35476bd63bb57e7469d4eab73e07d736d languageName: node linkType: hard @@ -9179,36 +9159,36 @@ __metadata: languageName: node linkType: hard -"data-view-buffer@npm:^1.0.1": - version: 1.0.1 - resolution: "data-view-buffer@npm:1.0.1" +"data-view-buffer@npm:^1.0.2": + version: 1.0.2 + resolution: "data-view-buffer@npm:1.0.2" dependencies: - call-bind: "npm:^1.0.6" + call-bound: "npm:^1.0.3" es-errors: "npm:^1.3.0" - is-data-view: "npm:^1.0.1" - checksum: 10c0/8984119e59dbed906a11fcfb417d7d861936f16697a0e7216fe2c6c810f6b5e8f4a5281e73f2c28e8e9259027190ac4a33e2a65fdd7fa86ac06b76e838918583 + is-data-view: "npm:^1.0.2" + checksum: 10c0/7986d40fc7979e9e6241f85db8d17060dd9a71bd53c894fa29d126061715e322a4cd47a00b0b8c710394854183d4120462b980b8554012acc1c0fa49df7ad38c languageName: node linkType: hard -"data-view-byte-length@npm:^1.0.1": - version: 1.0.1 - resolution: "data-view-byte-length@npm:1.0.1" +"data-view-byte-length@npm:^1.0.2": + version: 1.0.2 + resolution: "data-view-byte-length@npm:1.0.2" dependencies: - call-bind: "npm:^1.0.7" + call-bound: "npm:^1.0.3" es-errors: "npm:^1.3.0" - is-data-view: "npm:^1.0.1" - checksum: 10c0/b7d9e48a0cf5aefed9ab7d123559917b2d7e0d65531f43b2fd95b9d3a6b46042dd3fca597c42bba384e66b70d7ad66ff23932f8367b241f53d93af42cfe04ec2 + is-data-view: "npm:^1.0.2" + checksum: 10c0/f8a4534b5c69384d95ac18137d381f18a5cfae1f0fc1df0ef6feef51ef0d568606d970b69e02ea186c6c0f0eac77fe4e6ad96fec2569cc86c3afcc7475068c55 languageName: node linkType: hard -"data-view-byte-offset@npm:^1.0.0": - version: 1.0.0 - resolution: "data-view-byte-offset@npm:1.0.0" +"data-view-byte-offset@npm:^1.0.1": + version: 1.0.1 + resolution: "data-view-byte-offset@npm:1.0.1" dependencies: - call-bind: "npm:^1.0.6" + call-bound: "npm:^1.0.2" es-errors: "npm:^1.3.0" is-data-view: "npm:^1.0.1" - checksum: 10c0/21b0d2e53fd6e20cc4257c873bf6d36d77bd6185624b84076c0a1ddaa757b49aaf076254006341d35568e89f52eecd1ccb1a502cfb620f2beca04f48a6a62a8f + checksum: 10c0/fa7aa40078025b7810dcffc16df02c480573b7b53ef1205aa6a61533011005c1890e5ba17018c692ce7c900212b547262d33279fde801ad9843edc0863bf78c4 languageName: node linkType: hard @@ -9270,19 +9250,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.0.0, debug@npm:^4.3.7": - version: 4.3.7 - resolution: "debug@npm:4.3.7" - dependencies: - ms: "npm:^2.1.3" - peerDependenciesMeta: - supports-color: - optional: true - checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b - languageName: node - linkType: hard - -"debug@npm:^4.1.1, debug@npm:~4.4.0": +"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:^4.4.0": version: 4.4.0 resolution: "debug@npm:4.4.0" dependencies: @@ -9294,18 +9262,6 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.3.6": - version: 4.3.6 - resolution: "debug@npm:4.3.6" - dependencies: - ms: "npm:2.1.2" - peerDependenciesMeta: - supports-color: - optional: true - checksum: 10c0/3293416bff072389c101697d4611c402a6bacd1900ac20c0492f61a9cdd6b3b29750fc7f5e299f8058469ef60ff8fb79b86395a30374fbd2490113c1c7112285 - languageName: node - linkType: hard - "decamelize@npm:^1.2.0": version: 1.2.0 resolution: "decamelize@npm:1.2.0" @@ -9429,7 +9385,7 @@ __metadata: languageName: node linkType: hard -"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1": +"define-properties@npm:^1.2.1": version: 1.2.1 resolution: "define-properties@npm:1.2.1" dependencies: @@ -9685,13 +9641,13 @@ __metadata: linkType: hard "domutils@npm:^3.0.1": - version: 3.1.0 - resolution: "domutils@npm:3.1.0" + version: 3.2.2 + resolution: "domutils@npm:3.2.2" dependencies: dom-serializer: "npm:^2.0.0" domelementtype: "npm:^2.3.0" domhandler: "npm:^5.0.3" - checksum: 10c0/342d64cf4d07b8a0573fb51e0a6312a88fb520c7fefd751870bf72fa5fc0f2e0cb9a3958a573610b1d608c6e2a69b8e9b4b40f0bfb8f87a71bce4f180cca1887 + checksum: 10c0/47938f473b987ea71cd59e59626eb8666d3aa8feba5266e45527f3b636c7883cca7e582d901531961f742c519d7514636b7973353b648762b2e3bedbf235fada languageName: node linkType: hard @@ -9705,18 +9661,6 @@ __metadata: languageName: node linkType: hard -"dot-object@npm:^2.1.4": - version: 2.1.5 - resolution: "dot-object@npm:2.1.5" - dependencies: - commander: "npm:^6.1.0" - glob: "npm:^7.1.6" - bin: - dot-object: bin/dot-object - checksum: 10c0/5a9cc1ec156bb3d1363b76946bb84ac062317ceffab52aecb6a751eb13cf2387dbf09fcbe243e4bf16dc47b7531331b25de604729daa5e6bbf105a8ce87418f2 - languageName: node - linkType: hard - "dot-prop@npm:^5.1.0": version: 5.3.0 resolution: "dot-prop@npm:5.3.0" @@ -9727,18 +9671,18 @@ __metadata: linkType: hard "dotenv-expand@npm:~11.0.6": - version: 11.0.6 - resolution: "dotenv-expand@npm:11.0.6" + version: 11.0.7 + resolution: "dotenv-expand@npm:11.0.7" dependencies: - dotenv: "npm:^16.4.4" - checksum: 10c0/e22891ec72cb926d46d9a26290ef77f9cc9ddcba92d2f83d5e6f3a803d1590887be68e25b559415d080053000441b6f63f5b36093a565bb8c5c994b992ae49f2 + dotenv: "npm:^16.4.5" + checksum: 10c0/d80b8a7be085edf351270b96ac0e794bc3ddd7f36157912939577cb4d33ba6492ebee349d59798b71b90e36f498d24a2a564fb4aa00073b2ef4c2a3a49c467b1 languageName: node linkType: hard -"dotenv@npm:^16.4.4": - version: 16.4.5 - resolution: "dotenv@npm:16.4.5" - checksum: 10c0/48d92870076832af0418b13acd6e5a5a3e83bb00df690d9812e94b24aff62b88ade955ac99a05501305b8dc8f1b0ee7638b18493deb6fe93d680e5220936292f +"dotenv@npm:^16.4.5, dotenv@npm:~16.4.5": + version: 16.4.7 + resolution: "dotenv@npm:16.4.7" + checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462 languageName: node linkType: hard @@ -9749,10 +9693,14 @@ __metadata: languageName: node linkType: hard -"dotenv@npm:~16.4.5": - version: 16.4.7 - resolution: "dotenv@npm:16.4.7" - checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462 +"dunder-proto@npm:^1.0.0, dunder-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "dunder-proto@npm:1.0.1" + dependencies: + call-bind-apply-helpers: "npm:^1.0.1" + es-errors: "npm:^1.3.0" + gopd: "npm:^1.2.0" + checksum: 10c0/199f2a0c1c16593ca0a145dbf76a962f8033ce3129f01284d48c45ed4e14fea9bbacd7b3610b6cdc33486cef20385ac054948fefc6272fcce645c09468f93031 languageName: node linkType: hard @@ -9801,10 +9749,10 @@ __metadata: languageName: node linkType: hard -"electron-to-chromium@npm:^1.4.820": - version: 1.5.0 - resolution: "electron-to-chromium@npm:1.5.0" - checksum: 10c0/b978d03009760151fcc1c24c727016161ba4ed4b0946f848f52fb6767624e5646d5ebc73399aa938bcd8c717b89007b760f737fbf473433aa17405e011d6668c +"electron-to-chromium@npm:^1.4.796": + version: 1.4.810 + resolution: "electron-to-chromium@npm:1.4.810" + checksum: 10c0/0fed53e156aab30d71f2d6fd3bcd818755cee6aab3316e497c1f92424b4ef628f9faf1cf3cc2b4bcacc91c6a58d4e610202c4aa23cf91d7fbe77f82144bdc0ba languageName: node linkType: hard @@ -9822,6 +9770,13 @@ __metadata: languageName: node linkType: hard +"electron-to-chromium@npm:^1.5.73": + version: 1.5.104 + resolution: "electron-to-chromium@npm:1.5.104" + checksum: 10c0/f58d9836607fba37b393aa86bd1bbc01721c32328b3c80e86bc39e3e636cc30ee70f97e652f611a38ab3de219cf16aca85ebda4774094bf43723e671290c344d + languageName: node + linkType: hard + "email-addresses@npm:^5.0.0": version: 5.0.0 resolution: "email-addresses@npm:5.0.0" @@ -9837,16 +9792,16 @@ __metadata: linkType: hard "emittery@npm:^1.0.3": - version: 1.0.3 - resolution: "emittery@npm:1.0.3" - checksum: 10c0/91605d044f3891dd1f8ab731aeb94b520488b21e707f7064dcbcf5303bac3b4e7133dfa23c343ede1fc970340bd78a9b1aed522b805bc15104606bba630dd71e + version: 1.1.0 + resolution: "emittery@npm:1.1.0" + checksum: 10c0/645d4d7307b52c81bb2d2f9f320aa6a3c0225f53a4bfef2d337be8086df975746f7dd619f1dd7b2ffd4f2288103f28019e7b8567718677600e47507496d3af5f languageName: node linkType: hard "emoji-regex@npm:^10.3.0": - version: 10.3.0 - resolution: "emoji-regex@npm:10.3.0" - checksum: 10c0/b4838e8dcdceb44cf47f59abe352c25ff4fe7857acaf5fb51097c427f6f75b44d052eb907a7a3b86f86bc4eae3a93f5c2b7460abe79c407307e6212d65c91163 + version: 10.4.0 + resolution: "emoji-regex@npm:10.4.0" + checksum: 10c0/a3fcedfc58bfcce21a05a5f36a529d81e88d602100145fcca3dc6f795e3c8acc4fc18fe773fbf9b6d6e9371205edb3afa2668ec3473fa2aa7fd47d2a9d46482d languageName: node linkType: hard @@ -9973,57 +9928,62 @@ __metadata: languageName: node linkType: hard -"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.2": - version: 1.23.3 - resolution: "es-abstract@npm:1.23.3" +"es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.9": + version: 1.23.9 + resolution: "es-abstract@npm:1.23.9" dependencies: - array-buffer-byte-length: "npm:^1.0.1" - arraybuffer.prototype.slice: "npm:^1.0.3" + array-buffer-byte-length: "npm:^1.0.2" + arraybuffer.prototype.slice: "npm:^1.0.4" available-typed-arrays: "npm:^1.0.7" - call-bind: "npm:^1.0.7" - data-view-buffer: "npm:^1.0.1" - data-view-byte-length: "npm:^1.0.1" - data-view-byte-offset: "npm:^1.0.0" - es-define-property: "npm:^1.0.0" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" + data-view-buffer: "npm:^1.0.2" + data-view-byte-length: "npm:^1.0.2" + data-view-byte-offset: "npm:^1.0.1" + es-define-property: "npm:^1.0.1" es-errors: "npm:^1.3.0" es-object-atoms: "npm:^1.0.0" - es-set-tostringtag: "npm:^2.0.3" - es-to-primitive: "npm:^1.2.1" - function.prototype.name: "npm:^1.1.6" - get-intrinsic: "npm:^1.2.4" - get-symbol-description: "npm:^1.0.2" - globalthis: "npm:^1.0.3" - gopd: "npm:^1.0.1" + es-set-tostringtag: "npm:^2.1.0" + es-to-primitive: "npm:^1.3.0" + function.prototype.name: "npm:^1.1.8" + get-intrinsic: "npm:^1.2.7" + get-proto: "npm:^1.0.0" + get-symbol-description: "npm:^1.1.0" + globalthis: "npm:^1.0.4" + gopd: "npm:^1.2.0" has-property-descriptors: "npm:^1.0.2" - has-proto: "npm:^1.0.3" - has-symbols: "npm:^1.0.3" + has-proto: "npm:^1.2.0" + has-symbols: "npm:^1.1.0" hasown: "npm:^2.0.2" - internal-slot: "npm:^1.0.7" - is-array-buffer: "npm:^3.0.4" + internal-slot: "npm:^1.1.0" + is-array-buffer: "npm:^3.0.5" is-callable: "npm:^1.2.7" - is-data-view: "npm:^1.0.1" - is-negative-zero: "npm:^2.0.3" - is-regex: "npm:^1.1.4" - is-shared-array-buffer: "npm:^1.0.3" - is-string: "npm:^1.0.7" - is-typed-array: "npm:^1.1.13" - is-weakref: "npm:^1.0.2" - object-inspect: "npm:^1.13.1" + is-data-view: "npm:^1.0.2" + is-regex: "npm:^1.2.1" + is-shared-array-buffer: "npm:^1.0.4" + is-string: "npm:^1.1.1" + is-typed-array: "npm:^1.1.15" + is-weakref: "npm:^1.1.0" + math-intrinsics: "npm:^1.1.0" + object-inspect: "npm:^1.13.3" object-keys: "npm:^1.1.1" - object.assign: "npm:^4.1.5" - regexp.prototype.flags: "npm:^1.5.2" - safe-array-concat: "npm:^1.1.2" - safe-regex-test: "npm:^1.0.3" - string.prototype.trim: "npm:^1.2.9" - string.prototype.trimend: "npm:^1.0.8" + object.assign: "npm:^4.1.7" + own-keys: "npm:^1.0.1" + regexp.prototype.flags: "npm:^1.5.3" + safe-array-concat: "npm:^1.1.3" + safe-push-apply: "npm:^1.0.0" + safe-regex-test: "npm:^1.1.0" + set-proto: "npm:^1.0.0" + string.prototype.trim: "npm:^1.2.10" + string.prototype.trimend: "npm:^1.0.9" string.prototype.trimstart: "npm:^1.0.8" - typed-array-buffer: "npm:^1.0.2" - typed-array-byte-length: "npm:^1.0.1" - typed-array-byte-offset: "npm:^1.0.2" - typed-array-length: "npm:^1.0.6" - unbox-primitive: "npm:^1.0.2" - which-typed-array: "npm:^1.1.15" - checksum: 10c0/d27e9afafb225c6924bee9971a7f25f20c314f2d6cb93a63cada4ac11dcf42040896a6c22e5fb8f2a10767055ed4ddf400be3b1eb12297d281726de470b75666 + typed-array-buffer: "npm:^1.0.3" + typed-array-byte-length: "npm:^1.0.3" + typed-array-byte-offset: "npm:^1.0.4" + typed-array-length: "npm:^1.0.7" + unbox-primitive: "npm:^1.1.0" + which-typed-array: "npm:^1.1.18" + checksum: 10c0/1de229c9e08fe13c17fe5abaec8221545dfcd57e51f64909599a6ae896df84b8fd2f7d16c60cb00d7bf495b9298ca3581aded19939d4b7276854a4b066f8422b languageName: node linkType: hard @@ -10034,50 +9994,49 @@ __metadata: languageName: node linkType: hard -"es-define-property@npm:^1.0.0": - version: 1.0.0 - resolution: "es-define-property@npm:1.0.0" - dependencies: - get-intrinsic: "npm:^1.2.4" - checksum: 10c0/6bf3191feb7ea2ebda48b577f69bdfac7a2b3c9bcf97307f55fd6ef1bbca0b49f0c219a935aca506c993d8c5d8bddd937766cb760cd5e5a1071351f2df9f9aa4 +"es-define-property@npm:^1.0.0, es-define-property@npm:^1.0.1": + version: 1.0.1 + resolution: "es-define-property@npm:1.0.1" + checksum: 10c0/3f54eb49c16c18707949ff25a1456728c883e81259f045003499efba399c08bad00deebf65cccde8c0e07908c1a225c9d472b7107e558f2a48e28d530e34527c languageName: node linkType: hard -"es-errors@npm:^1.2.1, es-errors@npm:^1.3.0": +"es-errors@npm:^1.3.0": version: 1.3.0 resolution: "es-errors@npm:1.3.0" checksum: 10c0/0a61325670072f98d8ae3b914edab3559b6caa980f08054a3b872052640d91da01d38df55df797fcc916389d77fc92b8d5906cf028f4db46d7e3003abecbca85 languageName: node linkType: hard -"es-object-atoms@npm:^1.0.0": - version: 1.0.0 - resolution: "es-object-atoms@npm:1.0.0" +"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1": + version: 1.1.1 + resolution: "es-object-atoms@npm:1.1.1" dependencies: es-errors: "npm:^1.3.0" - checksum: 10c0/1fed3d102eb27ab8d983337bb7c8b159dd2a1e63ff833ec54eea1311c96d5b08223b433060ba240541ca8adba9eee6b0a60cdbf2f80634b784febc9cc8b687b4 + checksum: 10c0/65364812ca4daf48eb76e2a3b7a89b3f6a2e62a1c420766ce9f692665a29d94fe41fe88b65f24106f449859549711e4b40d9fb8002d862dfd7eb1c512d10be0c languageName: node linkType: hard -"es-set-tostringtag@npm:^2.0.3": - version: 2.0.3 - resolution: "es-set-tostringtag@npm:2.0.3" +"es-set-tostringtag@npm:^2.1.0": + version: 2.1.0 + resolution: "es-set-tostringtag@npm:2.1.0" dependencies: - get-intrinsic: "npm:^1.2.4" + es-errors: "npm:^1.3.0" + get-intrinsic: "npm:^1.2.6" has-tostringtag: "npm:^1.0.2" - hasown: "npm:^2.0.1" - checksum: 10c0/f22aff1585eb33569c326323f0b0d175844a1f11618b86e193b386f8be0ea9474cfbe46df39c45d959f7aa8f6c06985dc51dd6bce5401645ec5a74c4ceaa836a + hasown: "npm:^2.0.2" + checksum: 10c0/ef2ca9ce49afe3931cb32e35da4dcb6d86ab02592cfc2ce3e49ced199d9d0bb5085fc7e73e06312213765f5efa47cc1df553a6a5154584b21448e9fb8355b1af languageName: node linkType: hard -"es-to-primitive@npm:^1.2.1": - version: 1.2.1 - resolution: "es-to-primitive@npm:1.2.1" +"es-to-primitive@npm:^1.3.0": + version: 1.3.0 + resolution: "es-to-primitive@npm:1.3.0" dependencies: - is-callable: "npm:^1.1.4" - is-date-object: "npm:^1.0.1" - is-symbol: "npm:^1.0.2" - checksum: 10c0/0886572b8dc075cb10e50c0af62a03d03a68e1e69c388bd4f10c0649ee41b1fbb24840a1b7e590b393011b5cdbe0144b776da316762653685432df37d6de60f1 + is-callable: "npm:^1.2.7" + is-date-object: "npm:^1.0.5" + is-symbol: "npm:^1.0.4" + checksum: 10c0/c7e87467abb0b438639baa8139f701a06537d2b9bc758f23e8622c3b42fd0fdb5bde0f535686119e446dd9d5e4c0f238af4e14960f4771877cf818d023f6730b languageName: node linkType: hard @@ -10089,44 +10048,45 @@ __metadata: linkType: hard "esbuild-register@npm:^3.5.0": - version: 3.5.0 - resolution: "esbuild-register@npm:3.5.0" + version: 3.6.0 + resolution: "esbuild-register@npm:3.6.0" dependencies: debug: "npm:^4.3.4" peerDependencies: esbuild: ">=0.12 <1" - checksum: 10c0/9ccd0573cb66018e4cce3c1416eed0f5f3794c7026ce469a94e2f8761335abed8e363fc8e8bb036ab9ad7e579bb4296b8568a04ae5626596c123576b0d9c9bde - languageName: node - linkType: hard - -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0": - version: 0.24.0 - resolution: "esbuild@npm:0.24.0" - dependencies: - "@esbuild/aix-ppc64": "npm:0.24.0" - "@esbuild/android-arm": "npm:0.24.0" - "@esbuild/android-arm64": "npm:0.24.0" - "@esbuild/android-x64": "npm:0.24.0" - "@esbuild/darwin-arm64": "npm:0.24.0" - "@esbuild/darwin-x64": "npm:0.24.0" - "@esbuild/freebsd-arm64": "npm:0.24.0" - "@esbuild/freebsd-x64": "npm:0.24.0" - "@esbuild/linux-arm": "npm:0.24.0" - "@esbuild/linux-arm64": "npm:0.24.0" - "@esbuild/linux-ia32": "npm:0.24.0" - "@esbuild/linux-loong64": "npm:0.24.0" - "@esbuild/linux-mips64el": "npm:0.24.0" - "@esbuild/linux-ppc64": "npm:0.24.0" - "@esbuild/linux-riscv64": "npm:0.24.0" - "@esbuild/linux-s390x": "npm:0.24.0" - "@esbuild/linux-x64": "npm:0.24.0" - "@esbuild/netbsd-x64": "npm:0.24.0" - "@esbuild/openbsd-arm64": "npm:0.24.0" - "@esbuild/openbsd-x64": "npm:0.24.0" - "@esbuild/sunos-x64": "npm:0.24.0" - "@esbuild/win32-arm64": "npm:0.24.0" - "@esbuild/win32-ia32": "npm:0.24.0" - "@esbuild/win32-x64": "npm:0.24.0" + checksum: 10c0/77193b7ca32ba9f81b35ddf3d3d0138efb0b1429d71b39480cfee932e1189dd2e492bd32bf04a4d0bc3adfbc7ec7381ceb5ffd06efe35f3e70904f1f686566d5 + languageName: node + linkType: hard + +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0": + version: 0.25.0 + resolution: "esbuild@npm:0.25.0" + dependencies: + "@esbuild/aix-ppc64": "npm:0.25.0" + "@esbuild/android-arm": "npm:0.25.0" + "@esbuild/android-arm64": "npm:0.25.0" + "@esbuild/android-x64": "npm:0.25.0" + "@esbuild/darwin-arm64": "npm:0.25.0" + "@esbuild/darwin-x64": "npm:0.25.0" + "@esbuild/freebsd-arm64": "npm:0.25.0" + "@esbuild/freebsd-x64": "npm:0.25.0" + "@esbuild/linux-arm": "npm:0.25.0" + "@esbuild/linux-arm64": "npm:0.25.0" + "@esbuild/linux-ia32": "npm:0.25.0" + "@esbuild/linux-loong64": "npm:0.25.0" + "@esbuild/linux-mips64el": "npm:0.25.0" + "@esbuild/linux-ppc64": "npm:0.25.0" + "@esbuild/linux-riscv64": "npm:0.25.0" + "@esbuild/linux-s390x": "npm:0.25.0" + "@esbuild/linux-x64": "npm:0.25.0" + "@esbuild/netbsd-arm64": "npm:0.25.0" + "@esbuild/netbsd-x64": "npm:0.25.0" + "@esbuild/openbsd-arm64": "npm:0.25.0" + "@esbuild/openbsd-x64": "npm:0.25.0" + "@esbuild/sunos-x64": "npm:0.25.0" + "@esbuild/win32-arm64": "npm:0.25.0" + "@esbuild/win32-ia32": "npm:0.25.0" + "@esbuild/win32-x64": "npm:0.25.0" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -10162,6 +10122,8 @@ __metadata: optional: true "@esbuild/linux-x64": optional: true + "@esbuild/netbsd-arm64": + optional: true "@esbuild/netbsd-x64": optional: true "@esbuild/openbsd-arm64": @@ -10178,7 +10140,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10c0/9f1aadd8d64f3bff422ae78387e66e51a5e09de6935a6f987b6e4e189ed00fdc2d1bc03d2e33633b094008529c8b6e06c7ad1a9782fb09fec223bf95998c0683 + checksum: 10c0/5767b72da46da3cfec51661647ec850ddbf8a8d0662771139f10ef0692a8831396a0004b2be7966cecdb08264fb16bdc16290dcecd92396fac5f12d722fa013d languageName: node linkType: hard @@ -10262,20 +10224,20 @@ __metadata: languageName: node linkType: hard -"escalade@npm:^3.1.1, escalade@npm:^3.1.2": - version: 3.1.2 - resolution: "escalade@npm:3.1.2" - checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287 - languageName: node - linkType: hard - -"escalade@npm:^3.2.0": +"escalade@npm:^3.1.1, escalade@npm:^3.2.0": version: 3.2.0 resolution: "escalade@npm:3.2.0" checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65 languageName: node linkType: hard +"escalade@npm:^3.1.2": + version: 3.1.2 + resolution: "escalade@npm:3.1.2" + checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287 + languageName: node + linkType: hard + "escape-string-regexp@npm:5.0.0, escape-string-regexp@npm:^5.0.0": version: 5.0.0 resolution: "escape-string-regexp@npm:5.0.0" @@ -10331,8 +10293,8 @@ __metadata: linkType: hard "eslint-plugin-jsonc@npm:^2.18.2": - version: 2.18.2 - resolution: "eslint-plugin-jsonc@npm:2.18.2" + version: 2.19.1 + resolution: "eslint-plugin-jsonc@npm:2.19.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" eslint-compat-utils: "npm:^0.6.0" @@ -10344,13 +10306,13 @@ __metadata: synckit: "npm:^0.6.0" peerDependencies: eslint: ">=6.0.0" - checksum: 10c0/5ba6fa7f5320838066e0a55d6b5b4e1fa5f244b76593be76e60a5e7153bc6c7b05c8faa38873a663acdc7efc892589f1285f367765b4c8934a941324c14dc107 + checksum: 10c0/256751242bbd1518871cd50a10daa0cf205498b509c3bf99f887a444cbab93adaa3dbf89c8d6e2aeb0707400365d8c7c59bbdb2fa3e53e586b1f4bc583d01473 languageName: node linkType: hard "eslint-plugin-prettier@npm:^5.1.3": - version: 5.2.1 - resolution: "eslint-plugin-prettier@npm:5.2.1" + version: 5.2.3 + resolution: "eslint-plugin-prettier@npm:5.2.3" dependencies: prettier-linter-helpers: "npm:^1.0.0" synckit: "npm:^0.9.1" @@ -10364,7 +10326,7 @@ __metadata: optional: true eslint-config-prettier: optional: true - checksum: 10c0/4bc8bbaf5bb556c9c501dcdff369137763c49ccaf544f9fa91400360ed5e3a3f1234ab59690e06beca5b1b7e6f6356978cdd3b02af6aba3edea2ffe69ca6e8b2 + checksum: 10c0/60d9c03491ec6080ac1d71d0bee1361539ff6beb9b91ac98cfa7176c9ed52b7dbe7119ebee5b441b479d447d17d802a4a492ee06095ef2f22c460e3dd6459302 languageName: node linkType: hard @@ -10378,7 +10340,7 @@ __metadata: languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": +"eslint-visitor-keys@npm:^3.0.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" checksum: 10c0/92708e882c0a5ffd88c23c0b404ac1628cf20104a108c745f240a13c332a11aac54f49a22d5762efbffc18ecbc9a580d1b7ad034bf5f3cc3307e5cbff2ec9820 @@ -10386,14 +10348,14 @@ __metadata: linkType: hard "eslint@npm:^8.57.0": - version: 8.57.0 - resolution: "eslint@npm:8.57.0" + version: 8.57.1 + resolution: "eslint@npm:8.57.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" "@eslint-community/regexpp": "npm:^4.6.1" "@eslint/eslintrc": "npm:^2.1.4" - "@eslint/js": "npm:8.57.0" - "@humanwhocodes/config-array": "npm:^0.11.14" + "@eslint/js": "npm:8.57.1" + "@humanwhocodes/config-array": "npm:^0.13.0" "@humanwhocodes/module-importer": "npm:^1.0.1" "@nodelib/fs.walk": "npm:^1.2.8" "@ungap/structured-clone": "npm:^1.2.0" @@ -10429,7 +10391,7 @@ __metadata: text-table: "npm:^0.2.0" bin: eslint: bin/eslint.js - checksum: 10c0/00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529 + checksum: 10c0/1fd31533086c1b72f86770a4d9d7058ee8b4643fd1cfd10c7aac1ecb8725698e88352a87805cf4b2ce890aa35947df4b4da9655fb7fdfa60dbb448a43f6ebcf1 languageName: node linkType: hard @@ -10540,7 +10502,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:~8.0.1": +"execa@npm:^8.0.1": version: 8.0.1 resolution: "execa@npm:8.0.1" dependencies: @@ -10610,9 +10572,9 @@ __metadata: linkType: hard "exponential-backoff@npm:^3.1.1": - version: 3.1.1 - resolution: "exponential-backoff@npm:3.1.1" - checksum: 10c0/160456d2d647e6019640bd07111634d8c353038d9fa40176afb7cd49b0548bdae83b56d05e907c2cce2300b81cae35d800ef92fefb9d0208e190fa3b7d6bb579 + version: 3.1.2 + resolution: "exponential-backoff@npm:3.1.2" + checksum: 10c0/d9d3e1eafa21b78464297df91f1776f7fbaa3d5e3f7f0995648ca5b89c069d17055033817348d9f4a43d1c20b0eab84f75af6991751e839df53e4dfd6f22e844 languageName: node linkType: hard @@ -10711,20 +10673,7 @@ __metadata: languageName: node linkType: hard -"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2": - version: 3.3.2 - resolution: "fast-glob@npm:3.3.2" - dependencies: - "@nodelib/fs.stat": "npm:^2.0.2" - "@nodelib/fs.walk": "npm:^1.2.3" - glob-parent: "npm:^5.1.2" - merge2: "npm:^1.3.0" - micromatch: "npm:^4.0.4" - checksum: 10c0/42baad7b9cd40b63e42039132bde27ca2cb3a4950d0a0f9abe4639ea1aa9d3e3b40f98b1fe31cbc0cc17b664c9ea7447d911a152fa34ec5b72977b125a6fc845 - languageName: node - linkType: hard - -"fast-glob@npm:^3.3.3": +"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.3": version: 3.3.3 resolution: "fast-glob@npm:3.3.3" dependencies: @@ -10759,20 +10708,20 @@ __metadata: linkType: hard "fast-uri@npm:^3.0.1": - version: 3.0.1 - resolution: "fast-uri@npm:3.0.1" - checksum: 10c0/3cd46d6006083b14ca61ffe9a05b8eef75ef87e9574b6f68f2e17ecf4daa7aaadeff44e3f0f7a0ef4e0f7e7c20fc07beec49ff14dc72d0b500f00386592f2d10 + version: 3.0.6 + resolution: "fast-uri@npm:3.0.6" + checksum: 10c0/74a513c2af0584448aee71ce56005185f81239eab7a2343110e5bad50c39ad4fb19c5a6f99783ead1cac7ccaf3461a6034fda89fffa2b30b6d99b9f21c2f9d29 languageName: node linkType: hard -"fast-xml-parser@npm:^4.3.2": - version: 4.4.1 - resolution: "fast-xml-parser@npm:4.4.1" +"fast-xml-parser@npm:^4.4.1": + version: 4.5.3 + resolution: "fast-xml-parser@npm:4.5.3" dependencies: - strnum: "npm:^1.0.5" + strnum: "npm:^1.1.1" bin: fxparser: src/cli/cli.js - checksum: 10c0/7f334841fe41bfb0bf5d920904ccad09cefc4b5e61eaf4c225bf1e1bb69ee77ef2147d8942f783ee8249e154d1ca8a858e10bda78a5d78b8bed3f48dcee9bf33 + checksum: 10c0/bf9ccadacfadc95f6e3f0e7882a380a7f219cf0a6f96575149f02cb62bf44c3b7f0daee75b8ff3847bcfd7fbcb201e402c71045936c265cf6d94b141ec4e9327 languageName: node linkType: hard @@ -10784,11 +10733,11 @@ __metadata: linkType: hard "fastq@npm:^1.6.0": - version: 1.17.1 - resolution: "fastq@npm:1.17.1" + version: 1.19.0 + resolution: "fastq@npm:1.19.0" dependencies: reusify: "npm:^1.0.4" - checksum: 10c0/1095f16cea45fb3beff558bb3afa74ca7a9250f5a670b65db7ed585f92b4b48381445cd328b3d87323da81e43232b5d5978a8201bde84e0cd514310f1ea6da34 + checksum: 10c0/d6a001638f1574a696660fcbba5300d017760432372c801632c325ca7c16819604841c92fd3ccadcdacec0966ca336363a5ff57bc5f0be335d8ea7ac6087b98f languageName: node linkType: hard @@ -10838,6 +10787,15 @@ __metadata: languageName: node linkType: hard +"file-entry-cache@npm:^10.0.5": + version: 10.0.6 + resolution: "file-entry-cache@npm:10.0.6" + dependencies: + flat-cache: "npm:^6.1.6" + checksum: 10c0/4e7226a5dbe7b5130c848c5fd3a352bb16e4ddb1de10cb4b3ea8375f6ab6085ed10da4db2db8119c61fc7e56fc59a40eeb837a4ae1a3a7c8357a17e69004f113 + languageName: node + linkType: hard + "file-entry-cache@npm:^6.0.1": version: 6.0.1 resolution: "file-entry-cache@npm:6.0.1" @@ -10847,15 +10805,6 @@ __metadata: languageName: node linkType: hard -"file-entry-cache@npm:^9.0.0": - version: 9.0.0 - resolution: "file-entry-cache@npm:9.0.0" - dependencies: - flat-cache: "npm:^5.0.0" - checksum: 10c0/07b0a4f062dc0aa258f3e1b06ac083ea25313f5e289943e146fafdaf3315dcc031635545eea7fe98fe5598b91d6c7f48dba7a251dd7ac20108a6ebf7d00b0b1c - languageName: node - linkType: hard - "file-uri-to-path@npm:1.0.0": version: 1.0.0 resolution: "file-uri-to-path@npm:1.0.0" @@ -10891,9 +10840,9 @@ __metadata: linkType: hard "filesize@npm:^10.0.12": - version: 10.1.4 - resolution: "filesize@npm:10.1.4" - checksum: 10c0/b02a792da0da66fce5525566691369db6f0fadf5407b3626ca14821998dfaec65cf4a69fc3ca3ae999bf963e4afa19a8a787996f935c508506cccff3cc075faf + version: 10.1.6 + resolution: "filesize@npm:10.1.6" + checksum: 10c0/9a196d64da4e947b8c0d294be09a3dfa7a634434a1fc5fb3465f1c9acc1237ea0363f245ba6e24477ea612754d942bc964d86e0e500905a72e9e0e17ae1bbdbc languageName: node linkType: hard @@ -11030,13 +10979,14 @@ __metadata: languageName: node linkType: hard -"flat-cache@npm:^5.0.0": - version: 5.0.0 - resolution: "flat-cache@npm:5.0.0" +"flat-cache@npm:^6.1.6": + version: 6.1.6 + resolution: "flat-cache@npm:6.1.6" dependencies: - flatted: "npm:^3.3.1" - keyv: "npm:^4.5.4" - checksum: 10c0/847f25eefec5d6614fdce76dc6097ee98f63fd4dfbcb908718905ac56610f939f4c28b1f908d6e8857d49286fe73235095d2e7ac9df096c35a3e8a15204c361b + cacheable: "npm:^1.8.8" + flatted: "npm:^3.3.2" + hookified: "npm:^1.7.0" + checksum: 10c0/2aeba555b61d32d7f0803e6b6b3ba959610cdc0e5b591ed0f80a3ad70c4e80e81afb6853c495cafdcbc3a02386d76a1522babcf04e50c4a1e81df2decfd02e9f languageName: node linkType: hard @@ -11049,36 +10999,29 @@ __metadata: languageName: node linkType: hard -"flatted@npm:^3.2.9": - version: 3.3.1 - resolution: "flatted@npm:3.3.1" - checksum: 10c0/324166b125ee07d4ca9bcf3a5f98d915d5db4f39d711fba640a3178b959919aae1f7cfd8aabcfef5826ed8aa8a2aa14cc85b2d7d18ff638ddf4ae3df39573eaf - languageName: node - linkType: hard - -"flatted@npm:^3.3.1": - version: 3.3.2 - resolution: "flatted@npm:3.3.2" - checksum: 10c0/24cc735e74d593b6c767fe04f2ef369abe15b62f6906158079b9874bdb3ee5ae7110bb75042e70cd3f99d409d766f357caf78d5ecee9780206f5fdc5edbad334 +"flatted@npm:^3.2.9, flatted@npm:^3.3.2": + version: 3.3.3 + resolution: "flatted@npm:3.3.3" + checksum: 10c0/e957a1c6b0254aa15b8cce8533e24165abd98fadc98575db082b786b5da1b7d72062b81bfdcd1da2f4d46b6ed93bec2434e62333e9b4261d79ef2e75a10dd538 languageName: node linkType: hard "follow-redirects@npm:^1.15.6": - version: 1.15.6 - resolution: "follow-redirects@npm:1.15.6" + version: 1.15.9 + resolution: "follow-redirects@npm:1.15.9" peerDependenciesMeta: debug: optional: true - checksum: 10c0/9ff767f0d7be6aa6870c82ac79cf0368cd73e01bbc00e9eb1c2a16fbb198ec105e3c9b6628bb98e9f3ac66fe29a957b9645bcb9a490bb7aa0d35f908b6b85071 + checksum: 10c0/5829165bd112c3c0e82be6c15b1a58fa9dcfaede3b3c54697a82fe4a62dd5ae5e8222956b448d2f98e331525f05d00404aba7d696de9e761ef6e42fdc780244f languageName: node linkType: hard "for-each@npm:^0.3.3": - version: 0.3.3 - resolution: "for-each@npm:0.3.3" + version: 0.3.5 + resolution: "for-each@npm:0.3.5" dependencies: - is-callable: "npm:^1.1.3" - checksum: 10c0/22330d8a2db728dbf003ec9182c2d421fbcd2969b02b4f97ec288721cda63eb28f2c08585ddccd0f77cb2930af8d958005c9e72f47141dc51816127a118f39aa + is-callable: "npm:^1.2.7" + checksum: 10c0/0e0b50f6a843a282637d43674d1fb278dda1dd85f4f99b640024cfb10b85058aac0cc781bf689d5fe50b4b7f638e91e548560723a4e76e04fe96ae35ef039cee languageName: node linkType: hard @@ -11109,23 +11052,24 @@ __metadata: linkType: hard "foreground-child@npm:^3.1.0, foreground-child@npm:^3.1.1": - version: 3.2.1 - resolution: "foreground-child@npm:3.2.1" + version: 3.3.1 + resolution: "foreground-child@npm:3.3.1" dependencies: - cross-spawn: "npm:^7.0.0" + cross-spawn: "npm:^7.0.6" signal-exit: "npm:^4.0.1" - checksum: 10c0/9a53a33dbd87090e9576bef65fb4a71de60f6863a8062a7b11bc1cbe3cc86d428677d7c0b9ef61cdac11007ac580006f78bd5638618d564cfd5e6fd713d6878f + checksum: 10c0/8986e4af2430896e65bc2788d6679067294d6aee9545daefc84923a0a4b399ad9c7a3ea7bd8c0b2b80fdf4a92de4c69df3f628233ff3224260e9c1541a9e9ed3 languageName: node linkType: hard "form-data@npm:^4.0.0": - version: 4.0.0 - resolution: "form-data@npm:4.0.0" + version: 4.0.2 + resolution: "form-data@npm:4.0.2" dependencies: asynckit: "npm:^0.4.0" combined-stream: "npm:^1.0.8" + es-set-tostringtag: "npm:^2.1.0" mime-types: "npm:^2.1.12" - checksum: 10c0/cb6f3ac49180be03ff07ba3ff125f9eba2ff0b277fb33c7fc47569fc5e616882c5b1c69b9904c4c4187e97dd0419dd03b134174756f296dec62041e6527e2c6e + checksum: 10c0/e534b0cf025c831a0929bf4b9bbe1a9a6b03e273a8161f9947286b9b13bf8fb279c6944aae0070c4c311100c6d6dbb815cd955dc217728caf73fad8dc5b8ee9c languageName: node linkType: hard @@ -11206,13 +11150,13 @@ __metadata: linkType: hard "fs-extra@npm:^11.1.1, fs-extra@npm:^11.2.0": - version: 11.2.0 - resolution: "fs-extra@npm:11.2.0" + version: 11.3.0 + resolution: "fs-extra@npm:11.3.0" dependencies: graceful-fs: "npm:^4.2.0" jsonfile: "npm:^6.0.1" universalify: "npm:^2.0.0" - checksum: 10c0/d77a9a9efe60532d2e790e938c81a02c1b24904ef7a3efb3990b835514465ba720e99a6ea56fd5e2db53b4695319b644d76d5a0e9988a2beef80aa7b1da63398 + checksum: 10c0/5f95e996186ff45463059feb115a22fb048bdaf7e487ecee8a8646c78ed8fdca63630e3077d4c16ce677051f5e60d3355a06f3cd61f3ca43f48cc58822a44d0a languageName: node linkType: hard @@ -11308,15 +11252,17 @@ __metadata: languageName: node linkType: hard -"function.prototype.name@npm:^1.1.6": - version: 1.1.6 - resolution: "function.prototype.name@npm:1.1.6" +"function.prototype.name@npm:^1.1.6, function.prototype.name@npm:^1.1.8": + version: 1.1.8 + resolution: "function.prototype.name@npm:1.1.8" dependencies: - call-bind: "npm:^1.0.2" - define-properties: "npm:^1.2.0" - es-abstract: "npm:^1.22.1" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" + define-properties: "npm:^1.2.1" functions-have-names: "npm:^1.2.3" - checksum: 10c0/9eae11294905b62cb16874adb4fc687927cda3162285e0ad9612e6a1d04934005d46907362ea9cdb7428edce05a2f2c3dabc3b2d21e9fd343e9bb278230ad94b + hasown: "npm:^2.0.2" + is-callable: "npm:^1.2.7" + checksum: 10c0/e920a2ab52663005f3cbe7ee3373e3c71c1fb5558b0b0548648cdf3e51961085032458e26c71ff1a8c8c20e7ee7caeb03d43a5d1fa8610c459333323a2e71253 languageName: node linkType: hard @@ -11358,22 +11304,27 @@ __metadata: linkType: hard "get-east-asian-width@npm:^1.0.0": - version: 1.2.0 - resolution: "get-east-asian-width@npm:1.2.0" - checksum: 10c0/914b1e217cf38436c24b4c60b4c45289e39a45bf9e65ef9fd343c2815a1a02b8a0215aeec8bf9c07c516089004b6e3826332481f40a09529fcadbf6e579f286b + version: 1.3.0 + resolution: "get-east-asian-width@npm:1.3.0" + checksum: 10c0/1a049ba697e0f9a4d5514c4623781c5246982bdb61082da6b5ae6c33d838e52ce6726407df285cdbb27ec1908b333cf2820989bd3e986e37bb20979437fdf34b languageName: node linkType: hard -"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4": - version: 1.2.4 - resolution: "get-intrinsic@npm:1.2.4" +"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7": + version: 1.3.0 + resolution: "get-intrinsic@npm:1.3.0" dependencies: + call-bind-apply-helpers: "npm:^1.0.2" + es-define-property: "npm:^1.0.1" es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.1.1" function-bind: "npm:^1.1.2" - has-proto: "npm:^1.0.1" - has-symbols: "npm:^1.0.3" - hasown: "npm:^2.0.0" - checksum: 10c0/0a9b82c16696ed6da5e39b1267104475c47e3a9bdbe8b509dfe1710946e38a87be70d759f4bb3cda042d76a41ef47fe769660f3b7c0d1f68750299344ffb15b7 + get-proto: "npm:^1.0.1" + gopd: "npm:^1.2.0" + has-symbols: "npm:^1.1.0" + hasown: "npm:^2.0.2" + math-intrinsics: "npm:^1.1.0" + checksum: 10c0/52c81808af9a8130f581e6a6a83e1ba4a9f703359e7a438d1369a5267a25412322f03dcbd7c549edaef0b6214a0630a28511d7df0130c93cfd380f4fa0b5b66a languageName: node linkType: hard @@ -11384,6 +11335,16 @@ __metadata: languageName: node linkType: hard +"get-proto@npm:^1.0.0, get-proto@npm:^1.0.1": + version: 1.0.1 + resolution: "get-proto@npm:1.0.1" + dependencies: + dunder-proto: "npm:^1.0.1" + es-object-atoms: "npm:^1.0.0" + checksum: 10c0/9224acb44603c5526955e83510b9da41baf6ae73f7398875fba50edc5e944223a89c4a72b070fcd78beb5f7bdda58ecb6294adc28f7acfc0da05f76a2399643c + languageName: node + linkType: hard + "get-stream@npm:^6.0.0": version: 6.0.1 resolution: "get-stream@npm:6.0.1" @@ -11398,14 +11359,14 @@ __metadata: languageName: node linkType: hard -"get-symbol-description@npm:^1.0.2": - version: 1.0.2 - resolution: "get-symbol-description@npm:1.0.2" +"get-symbol-description@npm:^1.1.0": + version: 1.1.0 + resolution: "get-symbol-description@npm:1.1.0" dependencies: - call-bind: "npm:^1.0.5" + call-bound: "npm:^1.0.3" es-errors: "npm:^1.3.0" - get-intrinsic: "npm:^1.2.4" - checksum: 10c0/867be6d63f5e0eb026cb3b0ef695ec9ecf9310febb041072d2e142f260bd91ced9eeb426b3af98791d1064e324e653424afa6fd1af17dee373bea48ae03162bc + get-intrinsic: "npm:^1.2.6" + checksum: 10c0/d6a7d6afca375779a4b307738c9e80dbf7afc0bdbe5948768d54ab9653c865523d8920e670991a925936eb524b7cb6a6361d199a760b21d0ca7620194455aa4b languageName: node linkType: hard @@ -11440,7 +11401,7 @@ __metadata: languageName: node linkType: hard -"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2": +"glob-parent@npm:^5.1.2": version: 5.1.2 resolution: "glob-parent@npm:5.1.2" dependencies: @@ -11458,7 +11419,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.0.0, glob@npm:^10.4.1": +"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.1": version: 10.4.5 resolution: "glob@npm:10.4.5" dependencies: @@ -11474,24 +11435,9 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7": - version: 10.3.12 - resolution: "glob@npm:10.3.12" - dependencies: - foreground-child: "npm:^3.1.0" - jackspeak: "npm:^2.3.6" - minimatch: "npm:^9.0.1" - minipass: "npm:^7.0.4" - path-scurry: "npm:^1.10.2" - bin: - glob: dist/esm/bin.mjs - checksum: 10c0/f60cefdc1cf3f958b2bb5823e1b233727f04916d489dc4641d76914f016e6704421e06a83cbb68b0cb1cb9382298b7a88075b844ad2127fc9727ea22b18b0711 - languageName: node - linkType: hard - "glob@npm:^11.0.0": - version: 11.0.0 - resolution: "glob@npm:11.0.0" + version: 11.0.1 + resolution: "glob@npm:11.0.1" dependencies: foreground-child: "npm:^3.1.0" jackspeak: "npm:^4.0.1" @@ -11501,7 +11447,7 @@ __metadata: path-scurry: "npm:^2.0.0" bin: glob: dist/esm/bin.mjs - checksum: 10c0/419866015d8795258a8ac51de5b9d1a99c72634fc3ead93338e4da388e89773ab21681e494eac0fbc4250b003451ca3110bb4f1c9393d15d14466270094fdb4e + checksum: 10c0/2b32588be52e9e90f914c7d8dec32f3144b81b84054b0f70e9adfebf37cd7014570489f2a79d21f7801b9a4bd4cca94f426966bfd00fb64a5b705cfe10da3a03 languageName: node linkType: hard @@ -11610,7 +11556,7 @@ __metadata: languageName: node linkType: hard -"globalthis@npm:^1.0.3": +"globalthis@npm:^1.0.4": version: 1.0.4 resolution: "globalthis@npm:1.0.4" dependencies: @@ -11648,16 +11594,16 @@ __metadata: linkType: hard "globby@npm:^14.0.2": - version: 14.0.2 - resolution: "globby@npm:14.0.2" + version: 14.1.0 + resolution: "globby@npm:14.1.0" dependencies: "@sindresorhus/merge-streams": "npm:^2.1.0" - fast-glob: "npm:^3.3.2" - ignore: "npm:^5.2.4" - path-type: "npm:^5.0.0" + fast-glob: "npm:^3.3.3" + ignore: "npm:^7.0.3" + path-type: "npm:^6.0.0" slash: "npm:^5.1.0" - unicorn-magic: "npm:^0.1.0" - checksum: 10c0/3f771cd683b8794db1e7ebc8b6b888d43496d93a82aad4e9d974620f578581210b6c5a6e75ea29573ed16a1345222fab6e9b877a8d1ed56eeb147e09f69c6f78 + unicorn-magic: "npm:^0.3.0" + checksum: 10c0/527a1063c5958255969620c6fa4444a2b2e9278caddd571d46dfbfa307cb15977afb746e84d682ba5b6c94fc081e8997f80ff05dd235441ba1cb16f86153e58e languageName: node linkType: hard @@ -11668,12 +11614,10 @@ __metadata: languageName: node linkType: hard -"gopd@npm:^1.0.1": - version: 1.0.1 - resolution: "gopd@npm:1.0.1" - dependencies: - get-intrinsic: "npm:^1.1.3" - checksum: 10c0/505c05487f7944c552cee72087bf1567debb470d4355b1335f2c262d218ebbff805cd3715448fe29b4b380bae6912561d0467233e4165830efd28da241418c63 +"gopd@npm:^1.0.1, gopd@npm:^1.2.0": + version: 1.2.0 + resolution: "gopd@npm:1.2.0" + checksum: 10c0/50fff1e04ba2b7737c097358534eacadad1e68d24cccee3272e04e007bed008e68d2614f3987788428fd192a5ae3889d08fb2331417e4fc4a9ab366b2043cead languageName: node linkType: hard @@ -11718,10 +11662,10 @@ __metadata: languageName: node linkType: hard -"has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2": - version: 1.0.2 - resolution: "has-bigints@npm:1.0.2" - checksum: 10c0/724eb1485bfa3cdff6f18d95130aa190561f00b3fcf9f19dc640baf8176b5917c143b81ec2123f8cddb6c05164a198c94b13e1377c497705ccc8e1a80306e83b +"has-bigints@npm:^1.0.2": + version: 1.1.0 + resolution: "has-bigints@npm:1.1.0" + checksum: 10c0/2de0cdc4a1ccf7a1e75ffede1876994525ac03cc6f5ae7392d3415dd475cd9eee5bceec63669ab61aa997ff6cceebb50ef75561c7002bed8988de2b9d1b40788 languageName: node linkType: hard @@ -11755,17 +11699,19 @@ __metadata: languageName: node linkType: hard -"has-proto@npm:^1.0.1, has-proto@npm:^1.0.3": - version: 1.0.3 - resolution: "has-proto@npm:1.0.3" - checksum: 10c0/35a6989f81e9f8022c2f4027f8b48a552de714938765d019dbea6bb547bd49ce5010a3c7c32ec6ddac6e48fc546166a3583b128f5a7add8b058a6d8b4afec205 +"has-proto@npm:^1.2.0": + version: 1.2.0 + resolution: "has-proto@npm:1.2.0" + dependencies: + dunder-proto: "npm:^1.0.0" + checksum: 10c0/46538dddab297ec2f43923c3d35237df45d8c55a6fc1067031e04c13ed8a9a8f94954460632fd4da84c31a1721eefee16d901cbb1ae9602bab93bb6e08f93b95 languageName: node linkType: hard -"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3": - version: 1.0.3 - resolution: "has-symbols@npm:1.0.3" - checksum: 10c0/e6922b4345a3f37069cdfe8600febbca791c94988c01af3394d86ca3360b4b93928bbf395859158f88099cb10b19d98e3bbab7c9ff2c1bd09cf665ee90afa2c3 +"has-symbols@npm:^1.0.3, has-symbols@npm:^1.1.0": + version: 1.1.0 + resolution: "has-symbols@npm:1.1.0" + checksum: 10c0/dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e languageName: node linkType: hard @@ -11788,7 +11734,7 @@ __metadata: languageName: node linkType: hard -"hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2": +"hasown@npm:^2.0.2": version: 2.0.2 resolution: "hasown@npm:2.0.2" dependencies: @@ -11878,12 +11824,19 @@ __metadata: languageName: node linkType: hard +"hookified@npm:^1.7.0": + version: 1.7.1 + resolution: "hookified@npm:1.7.1" + checksum: 10c0/779cb2f912d19f9cf00ec081d2fb07068553093e8cfaab7fb536b45a04b5743ac836e7fd4d09f1473f82c105338aa2539a104e5fb28e55f4ec1ce0be28ea9acc + languageName: node + linkType: hard + "hosted-git-info@npm:^8.0.0": - version: 8.0.0 - resolution: "hosted-git-info@npm:8.0.0" + version: 8.0.2 + resolution: "hosted-git-info@npm:8.0.2" dependencies: lru-cache: "npm:^10.0.1" - checksum: 10c0/3eb932a99e8a3c7f3a4513a5a61b81d0789741abf41ebb2d9679644e4b4c730c68e1925fbaeae2c6b35eb0bab57a59027b89c21ab588981c8b0989c454adde46 + checksum: 10c0/e64f6c1b6db625869934b35c4959aacc365799d9cb1856e0224b5557ee5ecfe224bb8aa850479179a8f3968063ea0f92b8fbb67fe009d46859431dcde7fdc36d languageName: node linkType: hard @@ -11944,13 +11897,13 @@ __metadata: languageName: node linkType: hard -"https-proxy-agent@npm:^7.0.0": - version: 7.0.5 - resolution: "https-proxy-agent@npm:7.0.5" +"https-proxy-agent@npm:^7.0.0, https-proxy-agent@npm:^7.0.5": + version: 7.0.6 + resolution: "https-proxy-agent@npm:7.0.6" dependencies: - agent-base: "npm:^7.0.2" + agent-base: "npm:^7.1.2" debug: "npm:4" - checksum: 10c0/2490e3acec397abeb88807db52cac59102d5ed758feee6df6112ab3ccd8325e8a1ce8bce6f4b66e5470eca102d31e425ace904242e4fa28dbe0c59c4bafa7b2c + checksum: 10c0/f729219bc735edb621fa30e6e84e60ee5d00802b8247aac0d7b79b0bd6d4b3294737a337b93b86a0bd9e68099d031858a39260c976dc14cdbba238ba1f8779ac languageName: node linkType: hard @@ -11964,20 +11917,12 @@ __metadata: languageName: node linkType: hard -"https-proxy-agent@npm:^7.0.5": - version: 7.0.6 - resolution: "https-proxy-agent@npm:7.0.6" - dependencies: - agent-base: "npm:^7.1.2" - debug: "npm:4" - checksum: 10c0/f729219bc735edb621fa30e6e84e60ee5d00802b8247aac0d7b79b0bd6d4b3294737a337b93b86a0bd9e68099d031858a39260c976dc14cdbba238ba1f8779ac - languageName: node - linkType: hard - -"human-id@npm:^1.0.2": - version: 1.0.2 - resolution: "human-id@npm:1.0.2" - checksum: 10c0/e4c3be49b3927ff8ac54ae4a95ed77ad94fd793b57be51aff39aa81931c6efe56303ce1ec76a70c74f85748644207c89ccfa63d828def1313eff7526a14c3b3b +"human-id@npm:^4.1.1": + version: 4.1.1 + resolution: "human-id@npm:4.1.1" + bin: + human-id: dist/cli.js + checksum: 10c0/9a9a18130fb7d6bc707054bacc32cb328289be0de47ba5669fd04995435e7e59931b87c644a223d68473c450221d104175a5fefe93d77f3522822ead8945def8 languageName: node linkType: hard @@ -12046,26 +11991,26 @@ __metadata: linkType: hard "ignore@npm:^5.0.4, ignore@npm:^5.2.0, ignore@npm:^5.2.4": - version: 5.3.1 - resolution: "ignore@npm:5.3.1" - checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd - languageName: node - linkType: hard - -"ignore@npm:^5.3.2": version: 5.3.2 resolution: "ignore@npm:5.3.2" checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 languageName: node linkType: hard +"ignore@npm:^7.0.3": + version: 7.0.3 + resolution: "ignore@npm:7.0.3" + checksum: 10c0/8e21637513cbcd888a4873d34d5c651a2e24b3c4c9a6b159335a26bed348c3c386c51d6fab23577f59140e1b226323138fbd50e63882d4568fd12aa6c822029e + languageName: node + linkType: hard + "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": - version: 3.3.0 - resolution: "import-fresh@npm:3.3.0" + version: 3.3.1 + resolution: "import-fresh@npm:3.3.1" dependencies: parent-module: "npm:^1.0.0" resolve-from: "npm:^4.0.0" - checksum: 10c0/7f882953aa6b740d1f0e384d0547158bc86efbf2eea0f1483b8900a6f65c5a5123c2cf09b0d542cc419d0b98a759ecaeb394237e97ea427f2da221dc3cd80cc3 + checksum: 10c0/bf8cc494872fef783249709385ae883b447e3eb09db0ebd15dcead7d9afe7224dad7bd7591c6b73b0b19b3c0f9640eb8ee884f01cfaf2887ab995b0b36a0cbec languageName: node linkType: hard @@ -12156,25 +12101,28 @@ __metadata: linkType: hard "inquirer@npm:^12.0.0": - version: 12.3.2 - resolution: "inquirer@npm:12.3.2" + version: 12.4.2 + resolution: "inquirer@npm:12.4.2" dependencies: - "@inquirer/core": "npm:^10.1.4" - "@inquirer/prompts": "npm:^7.2.3" - "@inquirer/type": "npm:^3.0.2" + "@inquirer/core": "npm:^10.1.7" + "@inquirer/prompts": "npm:^7.3.2" + "@inquirer/type": "npm:^3.0.4" ansi-escapes: "npm:^4.3.2" mute-stream: "npm:^2.0.0" run-async: "npm:^3.0.0" rxjs: "npm:^7.8.1" peerDependencies: "@types/node": ">=18" - checksum: 10c0/cdded52fa440f2622aec2972eb5775789c9c36cea7d31f3f83d5ef692e328a4c52ae1e039960f41d2d5c8a0e6e728b3fb502c1b552dcb6c422dd0f7adc3906a5 + peerDependenciesMeta: + "@types/node": + optional: true + checksum: 10c0/5abaa0d02259c98ee7baa7c307b8d23970af46b2dbe6288b633b6675865f5d9c3c0cf924f4765a6ae130cbb8723d5b6d96d872dbdd195f8a917aff7bd1e28e30 languageName: node linkType: hard "inquirer@npm:^9.2.10": - version: 9.3.6 - resolution: "inquirer@npm:9.3.6" + version: 9.3.7 + resolution: "inquirer@npm:9.3.7" dependencies: "@inquirer/figures": "npm:^1.0.3" ansi-escapes: "npm:^4.3.2" @@ -12188,7 +12136,7 @@ __metadata: strip-ansi: "npm:^6.0.1" wrap-ansi: "npm:^6.2.0" yoctocolors-cjs: "npm:^2.1.2" - checksum: 10c0/29625ffc98979a862d3db1d006464526e1dd9f62f0aae68ab0231af56a193cbdc7f90d6222541e1dcf1ff1d3c1d36e33883f314b67bb731fd68a7b18999ef6e3 + checksum: 10c0/7a5b70312a734b579846648365cbf354e8b23ec73f379d46ada30bc2cf3961dc33b7ca59a3c2beed8a8e03744e3d6c12d4998a34b2d3904774aed238d77328b4 languageName: node linkType: hard @@ -12215,14 +12163,14 @@ __metadata: languageName: node linkType: hard -"internal-slot@npm:^1.0.7": - version: 1.0.7 - resolution: "internal-slot@npm:1.0.7" +"internal-slot@npm:^1.1.0": + version: 1.1.0 + resolution: "internal-slot@npm:1.1.0" dependencies: es-errors: "npm:^1.3.0" - hasown: "npm:^2.0.0" - side-channel: "npm:^1.0.4" - checksum: 10c0/f8b294a4e6ea3855fc59551bbf35f2b832cf01fd5e6e2a97f5c201a071cc09b49048f856e484b67a6c721da5e55736c5b6ddafaf19e2dbeb4a3ff1821680de6c + hasown: "npm:^2.0.2" + side-channel: "npm:^1.1.0" + checksum: 10c0/03966f5e259b009a9bf1a78d60da920df198af4318ec004f57b8aef1dd3fe377fbc8cce63a96e8c810010302654de89f9e19de1cd8ad0061d15be28a695465c7 languageName: node linkType: hard @@ -12278,22 +12226,23 @@ __metadata: linkType: hard "is-arguments@npm:^1.0.4": - version: 1.1.1 - resolution: "is-arguments@npm:1.1.1" + version: 1.2.0 + resolution: "is-arguments@npm:1.2.0" dependencies: - call-bind: "npm:^1.0.2" - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/5ff1f341ee4475350adfc14b2328b38962564b7c2076be2f5bac7bd9b61779efba99b9f844a7b82ba7654adccf8e8eb19d1bb0cc6d1c1a085e498f6793d4328f + call-bound: "npm:^1.0.2" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/6377344b31e9fcb707c6751ee89b11f132f32338e6a782ec2eac9393b0cbd32235dad93052998cda778ee058754860738341d8114910d50ada5615912bb929fc languageName: node linkType: hard -"is-array-buffer@npm:^3.0.4": - version: 3.0.4 - resolution: "is-array-buffer@npm:3.0.4" +"is-array-buffer@npm:^3.0.4, is-array-buffer@npm:^3.0.5": + version: 3.0.5 + resolution: "is-array-buffer@npm:3.0.5" dependencies: - call-bind: "npm:^1.0.2" - get-intrinsic: "npm:^1.2.1" - checksum: 10c0/42a49d006cc6130bc5424eae113e948c146f31f9d24460fc0958f855d9d810e6fd2e4519bf19aab75179af9c298ea6092459d8cafdec523cd19e529b26eab860 + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" + get-intrinsic: "npm:^1.2.6" + checksum: 10c0/c5c9f25606e86dbb12e756694afbbff64bc8b348d1bc989324c037e1068695131930199d6ad381952715dad3a9569333817f0b1a72ce5af7f883ce802e49c83d languageName: node linkType: hard @@ -12304,31 +12253,35 @@ __metadata: languageName: node linkType: hard -"is-bigint@npm:^1.0.1": - version: 1.0.4 - resolution: "is-bigint@npm:1.0.4" +"is-async-function@npm:^2.0.0": + version: 2.1.1 + resolution: "is-async-function@npm:2.1.1" dependencies: - has-bigints: "npm:^1.0.1" - checksum: 10c0/eb9c88e418a0d195ca545aff2b715c9903d9b0a5033bc5922fec600eb0c3d7b1ee7f882dbf2e0d5a6e694e42391be3683e4368737bd3c4a77f8ac293e7773696 + async-function: "npm:^1.0.0" + call-bound: "npm:^1.0.3" + get-proto: "npm:^1.0.1" + has-tostringtag: "npm:^1.0.2" + safe-regex-test: "npm:^1.1.0" + checksum: 10c0/d70c236a5e82de6fc4d44368ffd0c2fee2b088b893511ce21e679da275a5ecc6015ff59a7d7e1bdd7ca39f71a8dbdd253cf8cce5c6b3c91cdd5b42b5ce677298 languageName: node linkType: hard -"is-binary-path@npm:~2.1.0": - version: 2.1.0 - resolution: "is-binary-path@npm:2.1.0" +"is-bigint@npm:^1.1.0": + version: 1.1.0 + resolution: "is-bigint@npm:1.1.0" dependencies: - binary-extensions: "npm:^2.0.0" - checksum: 10c0/a16eaee59ae2b315ba36fad5c5dcaf8e49c3e27318f8ab8fa3cdb8772bf559c8d1ba750a589c2ccb096113bb64497084361a25960899cb6172a6925ab6123d38 + has-bigints: "npm:^1.0.2" + checksum: 10c0/f4f4b905ceb195be90a6ea7f34323bf1c18e3793f18922e3e9a73c684c29eeeeff5175605c3a3a74cc38185fe27758f07efba3dbae812e5c5afbc0d2316b40e4 languageName: node linkType: hard -"is-boolean-object@npm:^1.1.0": - version: 1.1.2 - resolution: "is-boolean-object@npm:1.1.2" +"is-boolean-object@npm:^1.2.1": + version: 1.2.2 + resolution: "is-boolean-object@npm:1.2.2" dependencies: - call-bind: "npm:^1.0.2" - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/6090587f8a8a8534c0f816da868bc94f32810f08807aa72fa7e79f7e11c466d281486ffe7a788178809c2aa71fe3e700b167fe80dd96dad68026bfff8ebf39f7 + call-bound: "npm:^1.0.3" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/36ff6baf6bd18b3130186990026f5a95c709345c39cd368468e6c1b6ab52201e9fd26d8e1f4c066357b4938b0f0401e1a5000e08257787c1a02f3a719457001e languageName: node linkType: hard @@ -12339,37 +12292,40 @@ __metadata: languageName: node linkType: hard -"is-callable@npm:^1.1.3, is-callable@npm:^1.1.4, is-callable@npm:^1.2.7": +"is-callable@npm:^1.2.7": version: 1.2.7 resolution: "is-callable@npm:1.2.7" checksum: 10c0/ceebaeb9d92e8adee604076971dd6000d38d6afc40bb843ea8e45c5579b57671c3f3b50d7f04869618242c6cee08d1b67806a8cb8edaaaf7c0748b3720d6066f languageName: node linkType: hard -"is-core-module@npm:^2.13.0": - version: 2.15.0 - resolution: "is-core-module@npm:2.15.0" +"is-core-module@npm:^2.16.0": + version: 2.16.1 + resolution: "is-core-module@npm:2.16.1" dependencies: hasown: "npm:^2.0.2" - checksum: 10c0/da161f3d9906f459486da65609b2f1a2dfdc60887c689c234d04e88a062cb7920fa5be5fb7ab08dc43b732929653c4135ef05bf77888ae2a9040ce76815eb7b1 + checksum: 10c0/898443c14780a577e807618aaae2b6f745c8538eca5c7bc11388a3f2dc6de82b9902bcc7eb74f07be672b11bbe82dd6a6edded44a00cb3d8f933d0459905eedd languageName: node linkType: hard -"is-data-view@npm:^1.0.1": - version: 1.0.1 - resolution: "is-data-view@npm:1.0.1" +"is-data-view@npm:^1.0.1, is-data-view@npm:^1.0.2": + version: 1.0.2 + resolution: "is-data-view@npm:1.0.2" dependencies: + call-bound: "npm:^1.0.2" + get-intrinsic: "npm:^1.2.6" is-typed-array: "npm:^1.1.13" - checksum: 10c0/a3e6ec84efe303da859107aed9b970e018e2bee7ffcb48e2f8096921a493608134240e672a2072577e5f23a729846241d9634806e8a0e51d9129c56d5f65442d + checksum: 10c0/ef3548a99d7e7f1370ce21006baca6d40c73e9f15c941f89f0049c79714c873d03b02dae1c64b3f861f55163ecc16da06506c5b8a1d4f16650b3d9351c380153 languageName: node linkType: hard -"is-date-object@npm:^1.0.1": - version: 1.0.5 - resolution: "is-date-object@npm:1.0.5" +"is-date-object@npm:^1.0.5, is-date-object@npm:^1.1.0": + version: 1.1.0 + resolution: "is-date-object@npm:1.1.0" dependencies: - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/eed21e5dcc619c48ccef804dfc83a739dbb2abee6ca202838ee1bd5f760fe8d8a93444f0d49012ad19bb7c006186e2884a1b92f6e1c056da7fd23d0a9ad5992e + call-bound: "npm:^1.0.2" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/1a4d199c8e9e9cac5128d32e6626fa7805175af9df015620ac0d5d45854ccf348ba494679d872d37301032e35a54fc7978fba1687e8721b2139aea7870cafa2f languageName: node linkType: hard @@ -12414,6 +12370,15 @@ __metadata: languageName: node linkType: hard +"is-finalizationregistry@npm:^1.1.0": + version: 1.1.1 + resolution: "is-finalizationregistry@npm:1.1.1" + dependencies: + call-bound: "npm:^1.0.3" + checksum: 10c0/818dff679b64f19e228a8205a1e2d09989a98e98def3a817f889208cfcbf918d321b251aadf2c05918194803ebd2eb01b14fc9d0b2bea53d984f4137bfca5e97 + languageName: node + linkType: hard + "is-fullwidth-code-point@npm:^3.0.0": version: 3.0.0 resolution: "is-fullwidth-code-point@npm:3.0.0" @@ -12444,6 +12409,18 @@ __metadata: languageName: node linkType: hard +"is-generator-function@npm:^1.0.10": + version: 1.1.0 + resolution: "is-generator-function@npm:1.1.0" + dependencies: + call-bound: "npm:^1.0.3" + get-proto: "npm:^1.0.0" + has-tostringtag: "npm:^1.0.2" + safe-regex-test: "npm:^1.1.0" + checksum: 10c0/fdfa96c8087bf36fc4cd514b474ba2ff404219a4dd4cfa6cf5426404a1eed259bdcdb98f082a71029a48d01f27733e3436ecc6690129a7ec09cb0434bee03a2a + languageName: node + linkType: hard + "is-generator-function@npm:^1.0.7": version: 1.0.10 resolution: "is-generator-function@npm:1.0.10" @@ -12453,7 +12430,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1": +"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3": version: 4.0.3 resolution: "is-glob@npm:4.0.3" dependencies: @@ -12501,19 +12478,20 @@ __metadata: languageName: node linkType: hard -"is-negative-zero@npm:^2.0.3": +"is-map@npm:^2.0.3": version: 2.0.3 - resolution: "is-negative-zero@npm:2.0.3" - checksum: 10c0/bcdcf6b8b9714063ffcfa9929c575ac69bfdabb8f4574ff557dfc086df2836cf07e3906f5bbc4f2a5c12f8f3ba56af640c843cdfc74da8caed86c7c7d66fd08e + resolution: "is-map@npm:2.0.3" + checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc languageName: node linkType: hard -"is-number-object@npm:^1.0.4": - version: 1.0.7 - resolution: "is-number-object@npm:1.0.7" +"is-number-object@npm:^1.1.1": + version: 1.1.1 + resolution: "is-number-object@npm:1.1.1" dependencies: - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/aad266da1e530f1804a2b7bd2e874b4869f71c98590b3964f9d06cc9869b18f8d1f4778f838ecd2a11011bce20aeecb53cb269ba916209b79c24580416b74b1b + call-bound: "npm:^1.0.3" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/97b451b41f25135ff021d85c436ff0100d84a039bb87ffd799cbcdbea81ef30c464ced38258cdd34f080be08fc3b076ca1f472086286d2aa43521d6ec6a79f53 languageName: node linkType: hard @@ -12573,13 +12551,15 @@ __metadata: languageName: node linkType: hard -"is-regex@npm:^1.1.4": - version: 1.1.4 - resolution: "is-regex@npm:1.1.4" +"is-regex@npm:^1.2.1": + version: 1.2.1 + resolution: "is-regex@npm:1.2.1" dependencies: - call-bind: "npm:^1.0.2" - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/bb72aae604a69eafd4a82a93002058c416ace8cde95873589a97fc5dac96a6c6c78a9977d487b7b95426a8f5073969124dd228f043f9f604f041f32fcc465fc1 + call-bound: "npm:^1.0.2" + gopd: "npm:^1.2.0" + has-tostringtag: "npm:^1.0.2" + hasown: "npm:^2.0.2" + checksum: 10c0/1d3715d2b7889932349241680032e85d0b492cfcb045acb75ffc2c3085e8d561184f1f7e84b6f8321935b4aea39bc9c6ba74ed595b57ce4881a51dfdbc214e04 languageName: node linkType: hard @@ -12592,12 +12572,19 @@ __metadata: languageName: node linkType: hard -"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3": - version: 1.0.3 - resolution: "is-shared-array-buffer@npm:1.0.3" +"is-set@npm:^2.0.3": + version: 2.0.3 + resolution: "is-set@npm:2.0.3" + checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7 + languageName: node + linkType: hard + +"is-shared-array-buffer@npm:^1.0.4": + version: 1.0.4 + resolution: "is-shared-array-buffer@npm:1.0.4" dependencies: - call-bind: "npm:^1.0.7" - checksum: 10c0/adc11ab0acbc934a7b9e5e9d6c588d4ec6682f6fea8cda5180721704fa32927582ede5b123349e32517fdadd07958973d24716c80e7ab198970c47acc09e59c7 + call-bound: "npm:^1.0.3" + checksum: 10c0/65158c2feb41ff1edd6bbd6fd8403a69861cf273ff36077982b5d4d68e1d59278c71691216a4a64632bd76d4792d4d1d2553901b6666d84ade13bba5ea7bc7db languageName: node linkType: hard @@ -12615,12 +12602,13 @@ __metadata: languageName: node linkType: hard -"is-string@npm:^1.0.5, is-string@npm:^1.0.7": - version: 1.0.7 - resolution: "is-string@npm:1.0.7" +"is-string@npm:^1.0.7, is-string@npm:^1.1.1": + version: 1.1.1 + resolution: "is-string@npm:1.1.1" dependencies: - has-tostringtag: "npm:^1.0.0" - checksum: 10c0/905f805cbc6eedfa678aaa103ab7f626aac9ebbdc8737abb5243acaa61d9820f8edc5819106b8fcd1839e33db21de9f0116ae20de380c8382d16dc2a601921f6 + call-bound: "npm:^1.0.3" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/2f518b4e47886bb81567faba6ffd0d8a8333cf84336e2e78bf160693972e32ad00fe84b0926491cc598dee576fdc55642c92e62d0cbe96bf36f643b6f956f94d languageName: node linkType: hard @@ -12633,12 +12621,14 @@ __metadata: languageName: node linkType: hard -"is-symbol@npm:^1.0.2, is-symbol@npm:^1.0.3": - version: 1.0.4 - resolution: "is-symbol@npm:1.0.4" +"is-symbol@npm:^1.0.4, is-symbol@npm:^1.1.1": + version: 1.1.1 + resolution: "is-symbol@npm:1.1.1" dependencies: - has-symbols: "npm:^1.0.2" - checksum: 10c0/9381dd015f7c8906154dbcbf93fad769de16b4b961edc94f88d26eb8c555935caa23af88bda0c93a18e65560f6d7cca0fd5a3f8a8e1df6f1abbb9bead4502ef7 + call-bound: "npm:^1.0.2" + has-symbols: "npm:^1.1.0" + safe-regex-test: "npm:^1.1.0" + checksum: 10c0/f08f3e255c12442e833f75a9e2b84b2d4882fdfd920513cf2a4a2324f0a5b076c8fd913778e3ea5d258d5183e9d92c0cd20e04b03ab3df05316b049b2670af1e languageName: node linkType: hard @@ -12660,6 +12650,15 @@ __metadata: languageName: node linkType: hard +"is-typed-array@npm:^1.1.14, is-typed-array@npm:^1.1.15": + version: 1.1.15 + resolution: "is-typed-array@npm:1.1.15" + dependencies: + which-typed-array: "npm:^1.1.16" + checksum: 10c0/415511da3669e36e002820584e264997ffe277ff136643a3126cc949197e6ca3334d0f12d084e83b1994af2e9c8141275c741cf2b7da5a2ff62dd0cac26f76c4 + languageName: node + linkType: hard + "is-typedarray@npm:^1.0.0": version: 1.0.0 resolution: "is-typedarray@npm:1.0.0" @@ -12691,9 +12690,9 @@ __metadata: linkType: hard "is-unicode-supported@npm:^2.0.0": - version: 2.0.0 - resolution: "is-unicode-supported@npm:2.0.0" - checksum: 10c0/3013dfb8265fe9f9a0d1e9433fc4e766595631a8d85d60876c457b4bedc066768dab1477c553d02e2f626d88a4e019162706e04263c94d74994ef636a33b5f94 + version: 2.1.0 + resolution: "is-unicode-supported@npm:2.1.0" + checksum: 10c0/a0f53e9a7c1fdbcf2d2ef6e40d4736fdffff1c9f8944c75e15425118ff3610172c87bf7bc6c34d3903b04be59790bb2212ddbe21ee65b5a97030fc50370545a5 languageName: node linkType: hard @@ -12704,12 +12703,29 @@ __metadata: languageName: node linkType: hard -"is-weakref@npm:^1.0.2": - version: 1.0.2 - resolution: "is-weakref@npm:1.0.2" +"is-weakmap@npm:^2.0.2": + version: 2.0.2 + resolution: "is-weakmap@npm:2.0.2" + checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299 + languageName: node + linkType: hard + +"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.0": + version: 1.1.1 + resolution: "is-weakref@npm:1.1.1" + dependencies: + call-bound: "npm:^1.0.3" + checksum: 10c0/8e0a9c07b0c780949a100e2cab2b5560a48ecd4c61726923c1a9b77b6ab0aa0046c9e7fb2206042296817045376dee2c8ab1dabe08c7c3dfbf195b01275a085b + languageName: node + linkType: hard + +"is-weakset@npm:^2.0.3": + version: 2.0.4 + resolution: "is-weakset@npm:2.0.4" dependencies: - call-bind: "npm:^1.0.2" - checksum: 10c0/1545c5d172cb690c392f2136c23eec07d8d78a7f57d0e41f10078aa4f5daf5d7f57b6513a67514ab4f073275ad00c9822fc8935e00229d0a2089e1c02685d4b1 + call-bound: "npm:^1.0.3" + get-intrinsic: "npm:^1.2.6" + checksum: 10c0/6491eba08acb8dc9532da23cb226b7d0192ede0b88f16199e592e4769db0a077119c1f5d2283d1e0d16d739115f70046e887e477eb0e66cd90e1bb29f28ba647 languageName: node linkType: hard @@ -12760,9 +12776,9 @@ __metadata: linkType: hard "isbinaryfile@npm:^5.0.0": - version: 5.0.2 - resolution: "isbinaryfile@npm:5.0.2" - checksum: 10c0/9696f20cf995e375ba8bfdba3ff7d1c0435346f6fc5dd9c049a55514c56e9f49342bbf8c240dc9f56e104bd3a69176c0421922bcb34d72b3c943f4117ade3f53 + version: 5.0.4 + resolution: "isbinaryfile@npm:5.0.4" + checksum: 10c0/fea255bfae67ff4827e8dd2238d6700d4803d02b4d892b72eeac4541487284e901251a3427966af5018d4eb29fa155b036dcb75dd217634146a072991afbc2c2 languageName: node linkType: hard @@ -12887,19 +12903,6 @@ __metadata: languageName: node linkType: hard -"jackspeak@npm:^2.3.6": - version: 2.3.6 - resolution: "jackspeak@npm:2.3.6" - dependencies: - "@isaacs/cliui": "npm:^8.0.2" - "@pkgjs/parseargs": "npm:^0.11.0" - dependenciesMeta: - "@pkgjs/parseargs": - optional: true - checksum: 10c0/f01d8f972d894cd7638bc338e9ef5ddb86f7b208ce177a36d718eac96ec86638a6efa17d0221b10073e64b45edc2ce15340db9380b1f5d5c5d000cbc517dc111 - languageName: node - linkType: hard - "jackspeak@npm:^3.1.2": version: 3.4.3 resolution: "jackspeak@npm:3.4.3" @@ -12914,15 +12917,11 @@ __metadata: linkType: hard "jackspeak@npm:^4.0.1": - version: 4.0.1 - resolution: "jackspeak@npm:4.0.1" + version: 4.1.0 + resolution: "jackspeak@npm:4.1.0" dependencies: "@isaacs/cliui": "npm:^8.0.2" - "@pkgjs/parseargs": "npm:^0.11.0" - dependenciesMeta: - "@pkgjs/parseargs": - optional: true - checksum: 10c0/c87997d9c9c5b7366259b1f2a444ef148692f8eedad5307caca939babbb60af2b47d306e5c63bf9d5fefbab2ab48d4da275188c3de525d0e716cc21b784bbccb + checksum: 10c0/08a6a24a366c90b83aef3ad6ec41dcaaa65428ffab8d80bc7172add0fbb8b134a34f415ad288b2a6fbd406526e9a62abdb40ed4f399fbe00cb45c44056d4dce0 languageName: node linkType: hard @@ -13455,11 +13454,11 @@ __metadata: linkType: hard "jiti@npm:^2.4.1": - version: 2.4.1 - resolution: "jiti@npm:2.4.1" + version: 2.4.2 + resolution: "jiti@npm:2.4.2" bin: jiti: lib/jiti-cli.mjs - checksum: 10c0/3cf67d1b952a9e8cffbb4f96527880da6cdb58a1eae2a6d2deb4645621dfc8b766d21549f71c6153a2094a40bb635ffafed4cd0dd42f3b3263b187d1ee846225 + checksum: 10c0/4ceac133a08c8faff7eac84aabb917e85e8257f5ad659e843004ce76e981c457c390a220881748ac67ba1b940b9b729b30fb85cbaf6e7989f04b6002c94da331 languageName: node linkType: hard @@ -13535,11 +13534,11 @@ __metadata: linkType: hard "jsesc@npm:^3.0.2": - version: 3.0.2 - resolution: "jsesc@npm:3.0.2" + version: 3.1.0 + resolution: "jsesc@npm:3.1.0" bin: jsesc: bin/jsesc - checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1 + checksum: 10c0/531779df5ec94f47e462da26b4cbf05eb88a83d9f08aac2ba04206508fc598527a153d08bd462bae82fc78b3eaa1a908e1a4a79f886e9238641c4cdefaf118b1 languageName: node linkType: hard @@ -13668,7 +13667,7 @@ __metadata: languageName: node linkType: hard -"keyv@npm:^4.5.3, keyv@npm:^4.5.4": +"keyv@npm:^4.5.3": version: 4.5.4 resolution: "keyv@npm:4.5.4" dependencies: @@ -13677,6 +13676,15 @@ __metadata: languageName: node linkType: hard +"keyv@npm:^5.2.3": + version: 5.2.3 + resolution: "keyv@npm:5.2.3" + dependencies: + "@keyv/serialize": "npm:^1.0.2" + checksum: 10c0/76b87dd2c21a4c1c5c05e9ff3b85670beab98f153429aaa9aee544b72b65411a7d80d96c29f3fef3e9dcebb672c8268e7209d6f80beb5da939b4e019722948b4 + languageName: node + linkType: hard + "kind-of@npm:^6.0.2": version: 6.0.3 resolution: "kind-of@npm:6.0.3" @@ -13691,10 +13699,10 @@ __metadata: languageName: node linkType: hard -"known-css-properties@npm:^0.34.0": - version: 0.34.0 - resolution: "known-css-properties@npm:0.34.0" - checksum: 10c0/8549969f02b1858554e89faf4548ece37625d0d21b42e8d54fa53184e68e1512ef2531bb15941575ad816361ab7447b598c1b18c1b96ce0a868333d1a68f2e2c +"known-css-properties@npm:^0.35.0": + version: 0.35.0 + resolution: "known-css-properties@npm:0.35.0" + checksum: 10c0/04a4a2859d62670bb25b5b28091a1f03f6f0d3298a5ed3e7476397c5287b98c434f6dd9c004a0c67a53b7f21acc93f83c972e98c122f568d4d0bd21fd2b90fb6 languageName: node linkType: hard @@ -13740,14 +13748,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:^3.1.1": - version: 3.1.2 - resolution: "lilconfig@npm:3.1.2" - checksum: 10c0/f059630b1a9bddaeba83059db00c672b64dc14074e9f232adce32b38ca1b5686ab737eb665c5ba3c32f147f0002b4bee7311ad0386a9b98547b5623e87071fbe - languageName: node - linkType: hard - -"lilconfig@npm:^3.1.2, lilconfig@npm:~3.1.3": +"lilconfig@npm:^3.1.1, lilconfig@npm:^3.1.2, lilconfig@npm:^3.1.3": version: 3.1.3 resolution: "lilconfig@npm:3.1.3" checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc @@ -13769,26 +13770,26 @@ __metadata: linkType: hard "lint-staged@npm:^15.3.0": - version: 15.3.0 - resolution: "lint-staged@npm:15.3.0" - dependencies: - chalk: "npm:~5.4.1" - commander: "npm:~12.1.0" - debug: "npm:~4.4.0" - execa: "npm:~8.0.1" - lilconfig: "npm:~3.1.3" - listr2: "npm:~8.2.5" - micromatch: "npm:~4.0.8" - pidtree: "npm:~0.6.0" - string-argv: "npm:~0.3.2" - yaml: "npm:~2.6.1" + version: 15.4.3 + resolution: "lint-staged@npm:15.4.3" + dependencies: + chalk: "npm:^5.4.1" + commander: "npm:^13.1.0" + debug: "npm:^4.4.0" + execa: "npm:^8.0.1" + lilconfig: "npm:^3.1.3" + listr2: "npm:^8.2.5" + micromatch: "npm:^4.0.8" + pidtree: "npm:^0.6.0" + string-argv: "npm:^0.3.2" + yaml: "npm:^2.7.0" bin: lint-staged: bin/lint-staged.js - checksum: 10c0/1ddf9488c523c0b65c85b755428d4ad74fac3aa6ccb2e28e9bff5b8d86503158fe241d20d5433a11146872050b43580644901a5ef4c924b1ad7017c224a07339 + checksum: 10c0/c1f71f2273bcbd992af929620f5acc6b9f6899da4b395e780e0b3ab33a0d725c239eb961873067c8c842e057c585c71dd4d44c0dc8b25539d3c2e97a3bdd6f30 languageName: node linkType: hard -"listr2@npm:~8.2.5": +"listr2@npm:^8.2.5": version: 8.2.5 resolution: "listr2@npm:8.2.5" dependencies: @@ -13814,13 +13815,13 @@ __metadata: linkType: hard "lit-element@npm:^4.1.0": - version: 4.1.0 - resolution: "lit-element@npm:4.1.0" + version: 4.1.1 + resolution: "lit-element@npm:4.1.1" dependencies: "@lit-labs/ssr-dom-shim": "npm:^1.2.0" "@lit/reactive-element": "npm:^2.0.4" lit-html: "npm:^3.2.0" - checksum: 10c0/0394b1fda00495754d505fc63993221bd65195dab8fb2888ce3e088ad97b5ba457a0993b871a92bfafe17c0d8cfb7c190bce22ea191e1d0b47b6ee9991cc617d + checksum: 10c0/b3c6c77d60a8239134d7c7e7c002be48414074f5b42f9ad026216749101a4f948266a4db9110a536fb23914044d584dbe4185c87064a4fa98baa4045ba2bbb46 languageName: node linkType: hard @@ -13834,11 +13835,11 @@ __metadata: linkType: hard "lit-html@npm:^3.2.0": - version: 3.2.0 - resolution: "lit-html@npm:3.2.0" + version: 3.2.1 + resolution: "lit-html@npm:3.2.1" dependencies: "@types/trusted-types": "npm:^2.0.2" - checksum: 10c0/cc0d58fc581d0d838361b3e46a34113ec458822c6600e6eb8dac9a671e4d983c0d34af07a1b3b60cc257e91b7e87760044779328f14d46742915d2c46fe68688 + checksum: 10c0/31c02df2148bf9a73545570cbe57aae01c4de1d9b44060b6ff13641837d38e39e6b1abcf92e13882cc84f5fee37605ed79602b91ad479728549014462808118e languageName: node linkType: hard @@ -14068,7 +14069,14 @@ __metadata: languageName: node linkType: hard -"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2": +"loupe@npm:^3.1.0, loupe@npm:^3.1.1": + version: 3.1.3 + resolution: "loupe@npm:3.1.3" + checksum: 10c0/f5dab4144254677de83a35285be1b8aba58b3861439ce4ba65875d0d5f3445a4a496daef63100ccf02b2dbc25bf58c6db84c9cb0b96d6435331e9d0a33b48541 + languageName: node + linkType: hard + +"loupe@npm:^3.1.2": version: 3.1.2 resolution: "loupe@npm:3.1.2" checksum: 10c0/b13c02e3ddd6a9d5f8bf84133b3242de556512d824dddeea71cce2dbd6579c8f4d672381c4e742d45cf4423d0701765b4a6e5fbc24701def16bc2b40f8daa96a @@ -14102,9 +14110,9 @@ __metadata: linkType: hard "lru-cache@npm:^11.0.0": - version: 11.0.0 - resolution: "lru-cache@npm:11.0.0" - checksum: 10c0/827ff0e0739f9b0f30f92f5a5fc97c6a2bd3ae32c0452bc58cb7411d6c589d49536073027293f2d1f02d0c2e72b63b162f238df7e9ff6f4cc0345f92afec4d1d + version: 11.0.2 + resolution: "lru-cache@npm:11.0.2" + checksum: 10c0/c993b8e06ead0b24b969c1dbb5b301716aed66e320e9014a80012f5febe280b438f28ff50046b2c55ff404e889351ccb332ff91f8dd175a21f5eae80e3fb155f languageName: node linkType: hard @@ -14136,11 +14144,11 @@ __metadata: linkType: hard "magic-string@npm:^0.30.0": - version: 0.30.10 - resolution: "magic-string@npm:0.30.10" + version: 0.30.17 + resolution: "magic-string@npm:0.30.17" dependencies: - "@jridgewell/sourcemap-codec": "npm:^1.4.15" - checksum: 10c0/aa9ca17eae571a19bce92c8221193b6f93ee8511abb10f085e55ffd398db8e4c089a208d9eac559deee96a08b7b24d636ea4ab92f09c6cf42a7d1af51f7fd62b + "@jridgewell/sourcemap-codec": "npm:^1.5.0" + checksum: 10c0/16826e415d04b88378f200fe022b53e638e3838b9e496edda6c0e086d7753a44a6ed187adc72d19f3623810589bf139af1a315541cd6a26ae0771a0193eaf7b8 languageName: node linkType: hard @@ -14189,9 +14197,9 @@ __metadata: languageName: node linkType: hard -"make-fetch-happen@npm:^14.0.0": - version: 14.0.1 - resolution: "make-fetch-happen@npm:14.0.1" +"make-fetch-happen@npm:^14.0.0, make-fetch-happen@npm:^14.0.3": + version: 14.0.3 + resolution: "make-fetch-happen@npm:14.0.3" dependencies: "@npmcli/agent": "npm:^3.0.0" cacache: "npm:^19.0.1" @@ -14200,11 +14208,11 @@ __metadata: minipass-fetch: "npm:^4.0.0" minipass-flush: "npm:^1.0.5" minipass-pipeline: "npm:^1.2.4" - negotiator: "npm:^0.6.3" + negotiator: "npm:^1.0.0" proc-log: "npm:^5.0.0" promise-retry: "npm:^2.0.1" ssri: "npm:^12.0.0" - checksum: 10c0/b12fc945abf8be6467eb7f9328a0ec6a861d44c2a4362c86af1aa176c005666d8c4c66362eae7e7d2f8409b09bb13c034b539ade2c0dede5c1152bd766bcebdd + checksum: 10c0/c40efb5e5296e7feb8e37155bde8eb70bc57d731b1f7d90e35a092fde403d7697c56fb49334d92d330d6f1ca29a98142036d6480a12681133a0a1453164cb2f0 languageName: node linkType: hard @@ -14256,6 +14264,13 @@ __metadata: languageName: node linkType: hard +"math-intrinsics@npm:^1.1.0": + version: 1.1.0 + resolution: "math-intrinsics@npm:1.1.0" + checksum: 10c0/7579ff94e899e2f76ab64491d76cf606274c874d8f2af4a442c016bd85688927fcfca157ba6bf74b08e9439dc010b248ce05b96cc7c126a354c3bae7fcb48b7f + languageName: node + linkType: hard + "mathml-tag-names@npm:^2.1.3": version: 2.1.3 resolution: "mathml-tag-names@npm:2.1.3" @@ -14318,15 +14333,15 @@ __metadata: linkType: hard "mdast-util-gfm-footnote@npm:^2.0.0": - version: 2.0.0 - resolution: "mdast-util-gfm-footnote@npm:2.0.0" + version: 2.1.0 + resolution: "mdast-util-gfm-footnote@npm:2.1.0" dependencies: "@types/mdast": "npm:^4.0.0" devlop: "npm:^1.1.0" mdast-util-from-markdown: "npm:^2.0.0" mdast-util-to-markdown: "npm:^2.0.0" micromark-util-normalize-identifier: "npm:^2.0.0" - checksum: 10c0/c673b22bea24740235e74cfd66765b41a2fa540334f7043fa934b94938b06b7d3c93f2d3b33671910c5492b922c0cc98be833be3b04cfed540e0679650a6d2de + checksum: 10c0/8ab965ee6be3670d76ec0e95b2ba3101fc7444eec47564943ab483d96ac17d29da2a4e6146a2a288be30c21b48c4f3938a1e54b9a46fbdd321d49a5bc0077ed0 languageName: node linkType: hard @@ -14367,8 +14382,8 @@ __metadata: linkType: hard "mdast-util-gfm@npm:^3.0.0": - version: 3.0.0 - resolution: "mdast-util-gfm@npm:3.0.0" + version: 3.1.0 + resolution: "mdast-util-gfm@npm:3.1.0" dependencies: mdast-util-from-markdown: "npm:^2.0.0" mdast-util-gfm-autolink-literal: "npm:^2.0.0" @@ -14377,7 +14392,7 @@ __metadata: mdast-util-gfm-table: "npm:^2.0.0" mdast-util-gfm-task-list-item: "npm:^2.0.0" mdast-util-to-markdown: "npm:^2.0.0" - checksum: 10c0/91596fe9bf3e4a0c546d0c57f88106c17956d9afbe88ceb08308e4da2388aff64489d649ddad599caecfdf755fc3ae4c9b82c219b85281bc0586b67599881fca + checksum: 10c0/4bedcfb6a20e39901c8772f0d2bb2d7a64ae87a54c13cbd92eec062cf470fbb68c2ad754e149af5b30794e2de61c978ab1de1ace03c0c40f443ca9b9b8044f81 languageName: node linkType: hard @@ -14431,12 +14446,19 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.12.2": + version: 2.12.2 + resolution: "mdn-data@npm:2.12.2" + checksum: 10c0/b22443b71d70f72ccc3c6ba1608035431a8fc18c3c8fc53523f06d20e05c2ac10f9b53092759a2ca85cf02f0d37036f310b581ce03e7b99ac74d388ef8152ade + languageName: node + linkType: hard + "memoize@npm:^10.0.0": - version: 10.0.0 - resolution: "memoize@npm:10.0.0" + version: 10.1.0 + resolution: "memoize@npm:10.1.0" dependencies: - mimic-function: "npm:^5.0.0" - checksum: 10c0/1584351834564be66b21d47b7afe495851f622669ad49e2f4fa4f35d5633471b93176cf602130a95f71fa0aee65a20179817ffac2dd11fa354aa19a8109a14e8 + mimic-function: "npm:^5.0.1" + checksum: 10c0/6cf71f673b89778b05cd1131f573ba858627daa8fec60f2197328386acf7ab184a89e52527abbd5a605b5ccf5ee12dc0cb96efb651d9a30dcfcc89e9baacc84d languageName: node linkType: hard @@ -14815,7 +14837,7 @@ __metadata: languageName: node linkType: hard -"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8, micromatch@npm:~4.0.8": +"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8": version: 4.0.8 resolution: "micromatch@npm:4.0.8" dependencies: @@ -14855,7 +14877,7 @@ __metadata: languageName: node linkType: hard -"mimic-function@npm:^5.0.0": +"mimic-function@npm:^5.0.0, mimic-function@npm:^5.0.1": version: 5.0.1 resolution: "mimic-function@npm:5.0.1" checksum: 10c0/f3d9464dd1816ecf6bdf2aec6ba32c0728022039d992f178237d8e289b48764fee4131319e72eedd4f7f094e22ded0af836c3187a7edc4595d28dd74368fd81d @@ -14905,15 +14927,6 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^9.0.1": - version: 9.0.4 - resolution: "minimatch@npm:9.0.4" - dependencies: - brace-expansion: "npm:^2.0.1" - checksum: 10c0/2c16f21f50e64922864e560ff97c587d15fd491f65d92a677a344e970fe62aafdbeafe648965fa96d33c061b4d0eabfe0213466203dd793367e7f28658cf6414 - languageName: node - linkType: hard - "minimatch@npm:^9.0.4": version: 9.0.5 resolution: "minimatch@npm:9.0.5" @@ -15151,9 +15164,16 @@ __metadata: linkType: hard "negotiator@npm:^0.6.3": - version: 0.6.3 - resolution: "negotiator@npm:0.6.3" - checksum: 10c0/3ec9fd413e7bf071c937ae60d572bc67155262068ed522cf4b3be5edbe6ddf67d095ec03a3a14ebf8fc8e95f8e1d61be4869db0dbb0de696f6b837358bd43fc2 + version: 0.6.4 + resolution: "negotiator@npm:0.6.4" + checksum: 10c0/3e677139c7fb7628a6f36335bf11a885a62c21d5390204590a1a214a5631fcbe5ea74ef6a610b60afe84b4d975cbe0566a23f20ee17c77c73e74b80032108dea + languageName: node + linkType: hard + +"negotiator@npm:^1.0.0": + version: 1.0.0 + resolution: "negotiator@npm:1.0.0" + checksum: 10c0/4c559dd52669ea48e1914f9d634227c561221dd54734070791f999c52ed0ff36e437b2e07d5c1f6e32909fc625fe46491c16e4a8f0572567d4dd15c3a4fda04b languageName: node linkType: hard @@ -15221,17 +15241,17 @@ __metadata: linkType: hard "node-gyp-build@npm:^4.2.2": - version: 4.8.1 - resolution: "node-gyp-build@npm:4.8.1" + version: 4.8.4 + resolution: "node-gyp-build@npm:4.8.4" bin: node-gyp-build: bin.js node-gyp-build-optional: optional.js node-gyp-build-test: build-test.js - checksum: 10c0/e36ca3d2adf2b9cca316695d7687207c19ac6ed326d6d7c68d7112cebe0de4f82d6733dff139132539fcc01cf5761f6c9082a21864ab9172edf84282bc849ce7 + checksum: 10c0/444e189907ece2081fe60e75368784f7782cfddb554b60123743dfb89509df89f1f29c03bbfa16b3a3e0be3f48799a4783f487da6203245fa5bed239ba7407e1 languageName: node linkType: hard -"node-gyp@npm:^10.1.0, node-gyp@npm:latest": +"node-gyp@npm:^10.1.0": version: 10.2.0 resolution: "node-gyp@npm:10.2.0" dependencies: @@ -15251,6 +15271,26 @@ __metadata: languageName: node linkType: hard +"node-gyp@npm:latest": + version: 11.1.0 + resolution: "node-gyp@npm:11.1.0" + dependencies: + env-paths: "npm:^2.2.0" + exponential-backoff: "npm:^3.1.1" + glob: "npm:^10.3.10" + graceful-fs: "npm:^4.2.6" + make-fetch-happen: "npm:^14.0.3" + nopt: "npm:^8.0.0" + proc-log: "npm:^5.0.0" + semver: "npm:^7.3.5" + tar: "npm:^7.4.3" + which: "npm:^5.0.0" + bin: + node-gyp: bin/node-gyp.js + checksum: 10c0/c38977ce502f1ea41ba2b8721bd5b49bc3d5b3f813eabfac8414082faf0620ccb5211e15c4daecc23ed9f5e3e9cc4da00e575a0bcfc2a95a069294f2afa1e0cd + languageName: node + linkType: hard + "node-int64@npm:^0.4.0": version: 0.4.0 resolution: "node-int64@npm:0.4.0" @@ -15302,6 +15342,13 @@ __metadata: languageName: node linkType: hard +"node-releases@npm:^2.0.19": + version: 2.0.19 + resolution: "node-releases@npm:2.0.19" + checksum: 10c0/52a0dbd25ccf545892670d1551690fe0facb6a471e15f2cfa1b20142a5b255b3aa254af5f59d6ecb69c2bec7390bc643c43aa63b13bf5e64b6075952e716b1aa + languageName: node + linkType: hard + "nofilter@npm:^3.1.0": version: 3.1.0 resolution: "nofilter@npm:3.1.0" @@ -15332,17 +15379,17 @@ __metadata: linkType: hard "nopt@npm:^8.0.0": - version: 8.0.0 - resolution: "nopt@npm:8.0.0" + version: 8.1.0 + resolution: "nopt@npm:8.1.0" dependencies: - abbrev: "npm:^2.0.0" + abbrev: "npm:^3.0.0" bin: nopt: bin/nopt.js - checksum: 10c0/19cb986f79abaca2d0f0b560021da7b32ee6fcc3de48f3eaeb0c324d36755c17754f886a754c091f01f740c17caf7d6aea8237b7fbaf39f476ae5e30a249f18f + checksum: 10c0/62e9ea70c7a3eb91d162d2c706b6606c041e4e7b547cbbb48f8b3695af457dd6479904d7ace600856bf923dd8d1ed0696f06195c8c20f02ac87c1da0e1d315ef languageName: node linkType: hard -"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0": +"normalize-path@npm:^3.0.0": version: 3.0.0 resolution: "normalize-path@npm:3.0.0" checksum: 10c0/e008c8142bcc335b5e38cf0d63cfd39d6cf2d97480af9abdbe9a439221fd4d749763bab492a8ee708ce7a194bb00c9da6d0a115018672310850489137b3da046 @@ -15357,14 +15404,14 @@ __metadata: linkType: hard "npm-package-arg@npm:^12.0.0": - version: 12.0.0 - resolution: "npm-package-arg@npm:12.0.0" + version: 12.0.2 + resolution: "npm-package-arg@npm:12.0.2" dependencies: hosted-git-info: "npm:^8.0.0" proc-log: "npm:^5.0.0" semver: "npm:^7.3.5" validate-npm-package-name: "npm:^6.0.0" - checksum: 10c0/a2e4e60b16b52715786ba854ef93c4f489b4379c54aa9179b6dac3f4e44fb6fad0a1d937e25cf04b3496bd61b90fc356b44ecd02ce98a6fe0f348e1563b7b00c + checksum: 10c0/a507046ca0999862d6f1a4878d2e22d47a728062b49d670ea7a965b0b555fc84ba4473daf34eb72c711b68aeb02e4f567fdb410d54385535cb7e4d85aaf49544 languageName: node linkType: hard @@ -15561,10 +15608,10 @@ __metadata: languageName: node linkType: hard -"object-inspect@npm:^1.13.1": - version: 1.13.2 - resolution: "object-inspect@npm:1.13.2" - checksum: 10c0/b97835b4c91ec37b5fd71add84f21c3f1047d1d155d00c0fcd6699516c256d4fcc6ff17a1aced873197fe447f91a3964178fd2a67a1ee2120cdaf60e81a050b4 +"object-inspect@npm:^1.13.3": + version: 1.13.4 + resolution: "object-inspect@npm:1.13.4" + checksum: 10c0/d7f8711e803b96ea3191c745d6f8056ce1f2496e530e6a19a0e92d89b0fa3c76d910c31f0aa270432db6bd3b2f85500a376a83aaba849a8d518c8845b3211692 languageName: node linkType: hard @@ -15575,15 +15622,17 @@ __metadata: languageName: node linkType: hard -"object.assign@npm:^4.1.5": - version: 4.1.5 - resolution: "object.assign@npm:4.1.5" +"object.assign@npm:^4.1.7": + version: 4.1.7 + resolution: "object.assign@npm:4.1.7" dependencies: - call-bind: "npm:^1.0.5" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" define-properties: "npm:^1.2.1" - has-symbols: "npm:^1.0.3" + es-object-atoms: "npm:^1.0.0" + has-symbols: "npm:^1.1.0" object-keys: "npm:^1.1.1" - checksum: 10c0/60108e1fa2706f22554a4648299b0955236c62b3685c52abf4988d14fffb0e7731e00aa8c6448397e3eb63d087dcc124a9f21e1980f36d0b2667f3c18bacd469 + checksum: 10c0/3b2732bd860567ea2579d1567525168de925a8d852638612846bd8082b3a1602b7b89b67b09913cbb5b9bd6e95923b2ae73580baa9d99cb4e990564e8cbf5ddc languageName: node linkType: hard @@ -15599,7 +15648,7 @@ __metadata: languageName: node linkType: hard -"object.getownpropertydescriptors@npm:^2.1.6": +"object.getownpropertydescriptors@npm:^2.1.8": version: 2.1.8 resolution: "object.getownpropertydescriptors@npm:2.1.8" dependencies: @@ -15740,19 +15789,19 @@ __metadata: linkType: hard "ora@npm:^8.0.0": - version: 8.0.1 - resolution: "ora@npm:8.0.1" + version: 8.2.0 + resolution: "ora@npm:8.2.0" dependencies: chalk: "npm:^5.3.0" - cli-cursor: "npm:^4.0.0" + cli-cursor: "npm:^5.0.0" cli-spinners: "npm:^2.9.2" is-interactive: "npm:^2.0.0" is-unicode-supported: "npm:^2.0.0" log-symbols: "npm:^6.0.0" - stdin-discarder: "npm:^0.2.1" - string-width: "npm:^7.0.0" + stdin-discarder: "npm:^0.2.2" + string-width: "npm:^7.2.0" strip-ansi: "npm:^7.1.0" - checksum: 10c0/7a94c075a7f182a6ace80c3505b945520ab16e05ebe536a714a3d61e51dd8f777c75c8be920e157e0c60ada6fe89bca37376897fb4d486bea5771229be992097 + checksum: 10c0/7d9291255db22e293ea164f520b6042a3e906576ab06c9cf408bf9ef5664ba0a9f3bd258baa4ada058cfcc2163ef9b6696d51237a866682ce33295349ba02c3a languageName: node linkType: hard @@ -15777,6 +15826,17 @@ __metadata: languageName: node linkType: hard +"own-keys@npm:^1.0.1": + version: 1.0.1 + resolution: "own-keys@npm:1.0.1" + dependencies: + get-intrinsic: "npm:^1.2.6" + object-keys: "npm:^1.1.1" + safe-push-apply: "npm:^1.0.0" + checksum: 10c0/6dfeb3455bff92ec3f16a982d4e3e65676345f6902d9f5ded1d8265a6318d0200ce461956d6d1c70053c7fe9f9fe65e552faac03f8140d37ef0fdd108e67013a + languageName: node + linkType: hard + "p-filter@npm:^2.1.0": version: 2.1.0 resolution: "p-filter@npm:2.1.0" @@ -15875,9 +15935,9 @@ __metadata: linkType: hard "p-map@npm:^7.0.2": - version: 7.0.2 - resolution: "p-map@npm:7.0.2" - checksum: 10c0/e10548036648d1c043153f9997112fe5a7de54a319210238628f8ea22ee36587fd6ee740811f88b60bbf29d932e23ae35df7fced40df477116c84c18e797047e + version: 7.0.3 + resolution: "p-map@npm:7.0.3" + checksum: 10c0/46091610da2b38ce47bcd1d8b4835a6fa4e832848a6682cf1652bc93915770f4617afc844c10a77d1b3e56d2472bb2d5622353fa3ead01a7f42b04fc8e744a5c languageName: node linkType: hard @@ -15911,16 +15971,16 @@ __metadata: linkType: hard "package-json-from-dist@npm:^1.0.0": - version: 1.0.0 - resolution: "package-json-from-dist@npm:1.0.0" - checksum: 10c0/e3ffaf6ac1040ab6082a658230c041ad14e72fabe99076a2081bb1d5d41210f11872403fc09082daf4387fc0baa6577f96c9c0e94c90c394fd57794b66aa4033 + version: 1.0.1 + resolution: "package-json-from-dist@npm:1.0.1" + checksum: 10c0/62ba2785eb655fec084a257af34dbe24292ab74516d6aecef97ef72d4897310bc6898f6c85b5cd22770eaa1ce60d55a0230e150fb6a966e3ecd6c511e23d164b languageName: node linkType: hard "package-manager-detector@npm:^0.2.0": - version: 0.2.0 - resolution: "package-manager-detector@npm:0.2.0" - checksum: 10c0/1ad699098018f9425b0f0a197537e085420ebcb7b6c49ef5a8dcff198f50d8de206f52ed10867624b7cb01bebac76396f5ac020dcff96f44154d59e6a5dcf36a + version: 0.2.9 + resolution: "package-manager-detector@npm:0.2.9" + checksum: 10c0/5fe1e80743fd110954f1904be4be32f34fc46c17b05e9e47a81e2f5777e474366cb570ed3b697a5ae8290860b53ac4b309898b24919dc1ddeb6d4097429113e1 languageName: node linkType: hard @@ -16106,16 +16166,6 @@ __metadata: languageName: node linkType: hard -"path-scurry@npm:^1.10.2": - version: 1.10.2 - resolution: "path-scurry@npm:1.10.2" - dependencies: - lru-cache: "npm:^10.2.0" - minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0" - checksum: 10c0/d723777fbf9627f201e64656680f66ebd940957eebacf780e6cce1c2919c29c116678b2d7dbf8821b3a2caa758d125f4444005ccec886a25c8f324504e48e601 - languageName: node - linkType: hard - "path-scurry@npm:^1.11.1": version: 1.11.1 resolution: "path-scurry@npm:1.11.1" @@ -16136,13 +16186,6 @@ __metadata: languageName: node linkType: hard -"path-to-regexp@npm:^6.2.0": - version: 6.3.0 - resolution: "path-to-regexp@npm:6.3.0" - checksum: 10c0/73b67f4638b41cde56254e6354e46ae3a2ebc08279583f6af3d96fe4664fc75788f74ed0d18ca44fa4a98491b69434f9eee73b97bb5314bd1b5adb700f5c18d6 - languageName: node - linkType: hard - "path-type@npm:^4.0.0": version: 4.0.0 resolution: "path-type@npm:4.0.0" @@ -16150,10 +16193,10 @@ __metadata: languageName: node linkType: hard -"path-type@npm:^5.0.0": - version: 5.0.0 - resolution: "path-type@npm:5.0.0" - checksum: 10c0/e8f4b15111bf483900c75609e5e74e3fcb79f2ddb73e41470028fcd3e4b5162ec65da9907be077ee5012c18801ff7fffb35f9f37a077f3f81d85a0b7d6578efd +"path-type@npm:^6.0.0": + version: 6.0.0 + resolution: "path-type@npm:6.0.0" + checksum: 10c0/55baa8b1187d6dc683d5a9cfcc866168d6adff58e5db91126795376d818eee46391e00b2a4d53e44d844c7524a7d96aa68cc68f4f3e500d3d069a39e6535481c languageName: node linkType: hard @@ -16164,14 +16207,7 @@ __metadata: languageName: node linkType: hard -"picocolors@npm:^1.0.0": - version: 1.0.1 - resolution: "picocolors@npm:1.0.1" - checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400 - languageName: node - linkType: hard - -"picocolors@npm:^1.0.1, picocolors@npm:^1.1.1": +"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.1": version: 1.1.1 resolution: "picocolors@npm:1.1.1" checksum: 10c0/e2e3e8170ab9d7c7421969adaa7e1b31434f789afb9b3f115f6b96d91945041ac3ceb02e9ec6fe6510ff036bcc0bf91e69a1772edc0b707e12b19c0f2d6bcf58 @@ -16185,7 +16221,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 10c0/26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be @@ -16199,7 +16235,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:~0.6.0": +"pidtree@npm:^0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -16238,27 +16274,27 @@ __metadata: languageName: node linkType: hard -"playwright-core@npm:1.49.1, playwright-core@npm:>=1.2.0": - version: 1.49.1 - resolution: "playwright-core@npm:1.49.1" +"playwright-core@npm:1.50.1, playwright-core@npm:>=1.2.0": + version: 1.50.1 + resolution: "playwright-core@npm:1.50.1" bin: playwright-core: cli.js - checksum: 10c0/990b619c75715cd98b2c10c1180a126e3a454b247063b8352bc67792fe01183ec07f31d30c8714c3768cefed12886d1d64ac06da701f2baafc2cad9b439e3919 + checksum: 10c0/c158764257d870897c31807a830ddcc3f5aaf4376719e05aeada3489a01f751650b2dc43e027201a40405a1b075084e89f58cd3730a985a229efe9d8cecfe360 languageName: node linkType: hard "playwright@npm:^1.14.0": - version: 1.49.1 - resolution: "playwright@npm:1.49.1" + version: 1.50.1 + resolution: "playwright@npm:1.50.1" dependencies: fsevents: "npm:2.3.2" - playwright-core: "npm:1.49.1" + playwright-core: "npm:1.50.1" dependenciesMeta: fsevents: optional: true bin: playwright: cli.js - checksum: 10c0/2368762c898920d4a0a5788b153dead45f9c36c3f5cf4d2af5228d0b8ea65823e3bbe998877950a2b9bb23a211e4633996f854c6188769dc81a25543ac818ab5 + checksum: 10c0/b292ee6e0d122748a3d024b85ace86a0d9c848fc4121685d90ffc5d43d6bcf13ed7dc7488b1055f69040599c420052306ccba6fabfe2f69a15fc109c55171207 languageName: node linkType: hard @@ -16299,9 +16335,9 @@ __metadata: linkType: hard "possible-typed-array-names@npm:^1.0.0": - version: 1.0.0 - resolution: "possible-typed-array-names@npm:1.0.0" - checksum: 10c0/d9aa22d31f4f7680e20269db76791b41c3a32c01a373e25f8a4813b4d45f7456bfc2b6d68f752dc4aab0e0bb0721cb3d76fb678c9101cb7a16316664bc2c73fd + version: 1.1.0 + resolution: "possible-typed-array-names@npm:1.1.0" + checksum: 10c0/c810983414142071da1d644662ce4caebce890203eb2bc7bf119f37f3fe5796226e117e6cca146b521921fa6531072674174a3325066ac66fce089a53e1e5196 languageName: node linkType: hard @@ -16328,27 +16364,15 @@ __metadata: languageName: node linkType: hard -"postcss-calc@npm:^10.0.0": - version: 10.0.0 - resolution: "postcss-calc@npm:10.0.0" - dependencies: - postcss-selector-parser: "npm:^6.0.16" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.4.38 - checksum: 10c0/d4d529f2f71b49f17441eed74a7564ccd2779c72ed8648d4bb2530261a27c0ca01fe6a07260e7bf57e55f46dd68dea07e52fd1a6b538db7bc13015124be258a5 - languageName: node - linkType: hard - "postcss-calc@npm:^10.0.2": - version: 10.0.2 - resolution: "postcss-calc@npm:10.0.2" + version: 10.1.1 + resolution: "postcss-calc@npm:10.1.1" dependencies: - postcss-selector-parser: "npm:^6.1.2" + postcss-selector-parser: "npm:^7.0.0" postcss-value-parser: "npm:^4.2.0" peerDependencies: postcss: ^8.4.38 - checksum: 10c0/f57c9db7a7a2f3a0cdf45990089c051248d995bb2b9d1bd1fcd1634507851e92ea85bbc71a3594e359e9e9287ba0a820c90d6d292126a4b735cda364a86ce9cf + checksum: 10c0/616d3b7b15a524fa86ff1b2be7d9f2369c7794fd44c946f117380e519b064e9ac8d1414ea29de0238b130f2b2a5eb2fb59758cc5478af40b04a012992fb1075b languageName: node linkType: hard @@ -16402,20 +16426,6 @@ __metadata: languageName: node linkType: hard -"postcss-colormin@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-colormin@npm:7.0.1" - dependencies: - browserslist: "npm:^4.23.1" - caniuse-api: "npm:^3.0.0" - colord: "npm:^2.9.3" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/e01e9e129ce39320cf10bb09ee2a3ab5b44b77805d3f7827eea07297644838b85c33b78996eeae0a1aba327ffd72a6ab1d24949ebc831523e310e916d5500371 - languageName: node - linkType: hard - "postcss-colormin@npm:^7.0.2": version: 7.0.2 resolution: "postcss-colormin@npm:7.0.2" @@ -16430,18 +16440,6 @@ __metadata: languageName: node linkType: hard -"postcss-convert-values@npm:^7.0.2": - version: 7.0.2 - resolution: "postcss-convert-values@npm:7.0.2" - dependencies: - browserslist: "npm:^4.23.1" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/beb59faf6aae97e6d3c233c5e6ed06cc60d65c49eec576036e3d0da1a831a1e827e3d41f5e81d016440b4f0bdf1406268ae069c4d5b38a6667b310c3da079d22 - languageName: node - linkType: hard - "postcss-convert-values@npm:^7.0.4": version: 7.0.4 resolution: "postcss-convert-values@npm:7.0.4" @@ -16508,17 +16506,6 @@ __metadata: languageName: node linkType: hard -"postcss-discard-comments@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-discard-comments@npm:7.0.1" - dependencies: - postcss-selector-parser: "npm:^6.1.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/64de3fced7e0e49dfea6aede8a5ca495b81dcd01c3c47734a5fbc86a3cb2b1ae39e1958e34e9bea64ecabd5fb4d8c287ec1d6189cf175c2434c6b6582da79948 - languageName: node - linkType: hard - "postcss-discard-comments@npm:^7.0.3": version: 7.0.3 resolution: "postcss-discard-comments@npm:7.0.3" @@ -16530,15 +16517,6 @@ __metadata: languageName: node linkType: hard -"postcss-discard-duplicates@npm:^7.0.0": - version: 7.0.0 - resolution: "postcss-discard-duplicates@npm:7.0.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/37d568dc18d47b8b9f0fd6d5115b1faf96c2bf429fc4586508a773533479e18627d6260cad6a3ca7d3bfc2f220fd9448410aee40e07f2ec6c6f96bbe3595dbc8 - languageName: node - linkType: hard - "postcss-discard-duplicates@npm:^7.0.1": version: 7.0.1 resolution: "postcss-discard-duplicates@npm:7.0.1" @@ -16743,18 +16721,6 @@ __metadata: languageName: node linkType: hard -"postcss-merge-longhand@npm:^7.0.2": - version: 7.0.2 - resolution: "postcss-merge-longhand@npm:7.0.2" - dependencies: - postcss-value-parser: "npm:^4.2.0" - stylehacks: "npm:^7.0.2" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/71d22418e5850e134bfcf2038acb1c91eeb48d9b6f9e4c0252fee757e11dc4ae351097a855c327fbc38dc7658fa6edc7cc7f458c08bb4044b82c6005dc565fcb - languageName: node - linkType: hard - "postcss-merge-longhand@npm:^7.0.4": version: 7.0.4 resolution: "postcss-merge-longhand@npm:7.0.4" @@ -16767,20 +16733,6 @@ __metadata: languageName: node linkType: hard -"postcss-merge-rules@npm:^7.0.2": - version: 7.0.2 - resolution: "postcss-merge-rules@npm:7.0.2" - dependencies: - browserslist: "npm:^4.23.1" - caniuse-api: "npm:^3.0.0" - cssnano-utils: "npm:^5.0.0" - postcss-selector-parser: "npm:^6.1.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/fbad20382ca45f1b3b5ff704c075f899cc9ba8418ae6effbdeb9e7c1f9b5c24996d1941ad36cd0936d60cbf127a72f235b2cbb0c44d9239a8a61042406d95b4a - languageName: node - linkType: hard - "postcss-merge-rules@npm:^7.0.4": version: 7.0.4 resolution: "postcss-merge-rules@npm:7.0.4" @@ -16819,19 +16771,6 @@ __metadata: languageName: node linkType: hard -"postcss-minify-params@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-minify-params@npm:7.0.1" - dependencies: - browserslist: "npm:^4.23.1" - cssnano-utils: "npm:^5.0.0" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/84e1c4de5af47178c1f48e10ce16341560f32bb2becf5ec9b014103f6c706174bc70885e2e13ced4de9b4f1959fb970193261cbd4751c8b87d5159e859e8c5ec - languageName: node - linkType: hard - "postcss-minify-params@npm:^7.0.2": version: 7.0.2 resolution: "postcss-minify-params@npm:7.0.2" @@ -16845,18 +16784,6 @@ __metadata: languageName: node linkType: hard -"postcss-minify-selectors@npm:^7.0.2": - version: 7.0.2 - resolution: "postcss-minify-selectors@npm:7.0.2" - dependencies: - cssesc: "npm:^3.0.0" - postcss-selector-parser: "npm:^6.1.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/87e0c21a0135b6c61b58d62c4c1e0cbd3cfb516ff8105db714c6a33a5edc477846ae220399d368e4ef6518529c711aa2dee9ff49e9befd93e83d5c939f3084a1 - languageName: node - linkType: hard - "postcss-minify-selectors@npm:^7.0.4": version: 7.0.4 resolution: "postcss-minify-selectors@npm:7.0.4" @@ -17008,18 +16935,6 @@ __metadata: languageName: node linkType: hard -"postcss-normalize-unicode@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-normalize-unicode@npm:7.0.1" - dependencies: - browserslist: "npm:^4.23.1" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/fcabac738765f608cb211ac01a19f9a7d784f99d223ef6f31352f37b9bcf008e0ca7849414c9e77116be8660d78b01dba6fc4a87cee7c9a977d3c2741d6a222d - languageName: node - linkType: hard - "postcss-normalize-unicode@npm:^7.0.2": version: 7.0.2 resolution: "postcss-normalize-unicode@npm:7.0.2" @@ -17208,18 +17123,6 @@ __metadata: languageName: node linkType: hard -"postcss-reduce-initial@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-reduce-initial@npm:7.0.1" - dependencies: - browserslist: "npm:^4.23.1" - caniuse-api: "npm:^3.0.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/3e7c6c1d0cc4ace38f44971f02d0dd98131af678cf114aa05cfa0c066420019d5329c221ef8507644b8a79d0e76534303f747c97860ac777fe17f57110edefe1 - languageName: node - linkType: hard - "postcss-reduce-initial@npm:^7.0.2": version: 7.0.2 resolution: "postcss-reduce-initial@npm:7.0.2" @@ -17264,26 +17167,19 @@ __metadata: languageName: node linkType: hard -"postcss-resolve-nested-selector@npm:^0.1.1": - version: 0.1.4 - resolution: "postcss-resolve-nested-selector@npm:0.1.4" - checksum: 10c0/c265c35ddd474968bc4efbe4027e33f28910ef3931ffae9c448878d7c02735aeeea6d33aa6f89902e4c111e6fe87f2cc2aa72dcb3ac242d58809f1f932baa2b6 - languageName: node - linkType: hard - -"postcss-resolve-nested-selector@npm:^0.1.6": +"postcss-resolve-nested-selector@npm:^0.1.1, postcss-resolve-nested-selector@npm:^0.1.6": version: 0.1.6 resolution: "postcss-resolve-nested-selector@npm:0.1.6" checksum: 10c0/84213a2bccce481b1569c595a3c547b25c6ef1cca839fbd6c82c12ab407559966e968613c7454b573aa54f38cfd7e900c1fd603f0efc9f51939ab9f93f115455 languageName: node linkType: hard -"postcss-safe-parser@npm:^7.0.0": - version: 7.0.0 - resolution: "postcss-safe-parser@npm:7.0.0" +"postcss-safe-parser@npm:^7.0.1": + version: 7.0.1 + resolution: "postcss-safe-parser@npm:7.0.1" peerDependencies: postcss: ^8.4.31 - checksum: 10c0/4217afd8ce2809e959dc365e4675f499303cc6b91f94db06c8164422822db2d3b3124df701ee2234db4127ad05619b016bfb9c2bccae9bf9cf898a396f1632c9 + checksum: 10c0/6957b10b818bd8d4664ec0e548af967f7549abedfb37f844d389571d36af681340f41f9477b9ccf34bcc7599bdef222d1d72e79c64373001fae77089fba6d965 languageName: node linkType: hard @@ -17298,43 +17194,33 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.4": - version: 6.0.16 - resolution: "postcss-selector-parser@npm:6.0.16" - dependencies: - cssesc: "npm:^3.0.0" - util-deprecate: "npm:^1.0.2" - checksum: 10c0/0e11657cb3181aaf9ff67c2e59427c4df496b4a1b6a17063fae579813f80af79d444bf38f82eeb8b15b4679653fd3089e66ef0283f9aab01874d885e6cf1d2cf - languageName: node - linkType: hard - -"postcss-selector-parser@npm:^6.0.16": - version: 6.1.1 - resolution: "postcss-selector-parser@npm:6.1.1" +"postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.1.2": + version: 6.1.2 + resolution: "postcss-selector-parser@npm:6.1.2" dependencies: cssesc: "npm:^3.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10c0/5608765e033fee35d448e1f607ffbaa750eb86901824a8bc4a911ea8bc137cb82f29239330787427c5d3695afd90d8721e190f211dbbf733e25033d8b3100763 + checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e languageName: node linkType: hard -"postcss-selector-parser@npm:^6.1.0, postcss-selector-parser@npm:^6.1.2": - version: 6.1.2 - resolution: "postcss-selector-parser@npm:6.1.2" +"postcss-selector-parser@npm:^6.1.0": + version: 6.1.0 + resolution: "postcss-selector-parser@npm:6.1.0" dependencies: cssesc: "npm:^3.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10c0/523196a6bd8cf660bdf537ad95abd79e546d54180f9afb165a4ab3e651ac705d0f8b8ce6b3164fb9e3279ce482c5f751a69eb2d3a1e8eb0fd5e82294fb3ef13e + checksum: 10c0/91e9c6434772506bc7f318699dd9d19d32178b52dfa05bed24cb0babbdab54f8fb765d9920f01ac548be0a642aab56bce493811406ceb00ae182bbb53754c473 languageName: node linkType: hard "postcss-selector-parser@npm:^7.0.0": - version: 7.0.0 - resolution: "postcss-selector-parser@npm:7.0.0" + version: 7.1.0 + resolution: "postcss-selector-parser@npm:7.1.0" dependencies: cssesc: "npm:^3.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10c0/e96e096afcce70bf5c97789f5ea09d7415ae5eb701d82b05b5e8532885d31363b484fcb1ca9488c9a331f30508d9e5bb6c3109eb2eb5067ef3d3919f9928cd9d + checksum: 10c0/0fef257cfd1c0fe93c18a3f8a6e739b4438b527054fd77e9a62730a89b2d0ded1b59314a7e4aaa55bc256204f40830fecd2eb50f20f8cb7ab3a10b52aa06c8aa languageName: node linkType: hard @@ -17377,17 +17263,6 @@ __metadata: languageName: node linkType: hard -"postcss-unique-selectors@npm:^7.0.1": - version: 7.0.1 - resolution: "postcss-unique-selectors@npm:7.0.1" - dependencies: - postcss-selector-parser: "npm:^6.1.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/6352d71ce2f65265f545831c2ce3686bd71961d08a2247c545d717d93d23b1eb08bb986efc11194d31970eea4cb42207b9aa9a3f4666d75492a6cbf1493cf466 - languageName: node - linkType: hard - "postcss-unique-selectors@npm:^7.0.3": version: 7.0.3 resolution: "postcss-unique-selectors@npm:7.0.3" @@ -17451,18 +17326,18 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.24": - version: 8.4.38 - resolution: "postcss@npm:8.4.38" +"postcss@npm:^8.4.24, postcss@npm:^8.5.1, postcss@npm:^8.5.3": + version: 8.5.3 + resolution: "postcss@npm:8.5.3" dependencies: - nanoid: "npm:^3.3.7" - picocolors: "npm:^1.0.0" - source-map-js: "npm:^1.2.0" - checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06 + nanoid: "npm:^3.3.8" + picocolors: "npm:^1.1.1" + source-map-js: "npm:^1.2.1" + checksum: 10c0/b75510d7b28c3ab728c8733dd01538314a18c52af426f199a3c9177e63eb08602a3938bfb66b62dc01350b9aed62087eabbf229af97a1659eb8d3513cec823b3 languageName: node linkType: hard -"postcss@npm:^8.4.32, postcss@npm:^8.4.41": +"postcss@npm:^8.4.32": version: 8.4.41 resolution: "postcss@npm:8.4.41" dependencies: @@ -17484,17 +17359,6 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.5.3": - version: 8.5.3 - resolution: "postcss@npm:8.5.3" - dependencies: - nanoid: "npm:^3.3.8" - picocolors: "npm:^1.1.1" - source-map-js: "npm:^1.2.1" - checksum: 10c0/b75510d7b28c3ab728c8733dd01538314a18c52af426f199a3c9177e63eb08602a3938bfb66b62dc01350b9aed62087eabbf229af97a1659eb8d3513cec823b3 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -17511,7 +17375,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^2.5.1, prettier@npm:^2.7.1": +"prettier@npm:^2.7.1": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: @@ -17521,11 +17385,11 @@ __metadata: linkType: hard "prettier@npm:^3.4.2": - version: 3.4.2 - resolution: "prettier@npm:3.4.2" + version: 3.5.2 + resolution: "prettier@npm:3.5.2" bin: prettier: bin/prettier.cjs - checksum: 10c0/99e076a26ed0aba4ebc043880d0f08bbb8c59a4c6641cdee6cdadf2205bdd87aa1d7823f50c3aea41e015e99878d37c58d7b5f0e663bba0ef047f94e36b96446 + checksum: 10c0/d7b597ed33f39c32ace675896ad187f06a3e48dc8a1e80051b5c5f0dae3586d53981704b8fda5ac3b080e6c2e0e197d239131b953702674f044351621ca5e1ac languageName: node linkType: hard @@ -17684,7 +17548,7 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.0, queue-tick@npm:^1.0.1": +"queue-tick@npm:^1.0.0": version: 1.0.1 resolution: "queue-tick@npm:1.0.1" checksum: 10c0/0db998e2c9b15215317dbcf801e9b23e6bcde4044e115155dae34f8e7454b9a783f737c9a725528d677b7a66c775eb7a955cf144fe0b87f62b575ce5bfd515a9 @@ -17699,17 +17563,28 @@ __metadata: linkType: hard "react-confetti@npm:^6.1.0": - version: 6.1.0 - resolution: "react-confetti@npm:6.1.0" + version: 6.2.3 + resolution: "react-confetti@npm:6.2.3" dependencies: tween-functions: "npm:^1.2.0" peerDependencies: - react: ^16.3.0 || ^17.0.1 || ^18.0.0 - checksum: 10c0/5b4eb23eef564695f6db1d25b294ed31d5fa21ff4092c6a38e641f85cd10e3e0b50014366e3ac0f7cf772e73faaecd14614e5b11a5531336fa769dda8068ab59 + react: ^16.3.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 + checksum: 10c0/44d286c6c3d553a9b6fd92e9bdb9b0e0d0e0663b1097a95c5d6931d93185912d4bc660f78cbe5be94f97855f6d78f3a533ad025ce578cd657f7256a264b28a8b + languageName: node + linkType: hard + +"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" + dependencies: + scheduler: "npm:^0.25.0" + peerDependencies: + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 languageName: node linkType: hard -"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.3.1": +"react-dom@npm:^18.3.1": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -17751,7 +17626,14 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1": +"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 + languageName: node + linkType: hard + +"react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -17808,15 +17690,15 @@ __metadata: linkType: hard "readable-stream@npm:^4.0.0": - version: 4.5.2 - resolution: "readable-stream@npm:4.5.2" + version: 4.7.0 + resolution: "readable-stream@npm:4.7.0" dependencies: abort-controller: "npm:^3.0.0" buffer: "npm:^6.0.3" events: "npm:^3.3.0" process: "npm:^0.11.10" string_decoder: "npm:^1.3.0" - checksum: 10c0/a2c80e0e53aabd91d7df0330929e32d0a73219f9477dbbb18472f6fdd6a11a699fc5d172a1beff98d50eae4f1496c950ffa85b7cc2c4c196963f289a5f39275d + checksum: 10c0/fd86d068da21cfdb10f7a4479f2e47d9c0a9b0c862fc0c840a7e5360201580a55ac399c764b12a4f6fa291f8cee74d9c4b7562e0d53b3c4b2769f2c98155d957 languageName: node linkType: hard @@ -17829,15 +17711,6 @@ __metadata: languageName: node linkType: hard -"readdirp@npm:~3.6.0": - version: 3.6.0 - resolution: "readdirp@npm:3.6.0" - dependencies: - picomatch: "npm:^2.2.1" - checksum: 10c0/6fa848cf63d1b82ab4e985f4cf72bd55b7dcfd8e0a376905804e48c3634b7e749170940ba77b32804d5fe93b3cc521aa95a8d7e7d725f830da6d93f3669ce66b - languageName: node - linkType: hard - "recast@npm:^0.23.5": version: 0.23.9 resolution: "recast@npm:0.23.9" @@ -17870,6 +17743,22 @@ __metadata: languageName: node linkType: hard +"reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9": + version: 1.0.10 + resolution: "reflect.getprototypeof@npm:1.0.10" + dependencies: + call-bind: "npm:^1.0.8" + define-properties: "npm:^1.2.1" + es-abstract: "npm:^1.23.9" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.0.0" + get-intrinsic: "npm:^1.2.7" + get-proto: "npm:^1.0.1" + which-builtin-type: "npm:^1.2.1" + checksum: 10c0/7facec28c8008876f8ab98e80b7b9cb4b1e9224353fd4756dda5f2a4ab0d30fa0a5074777c6df24e1e0af463a2697513b0a11e548d99cf52f21f7bc6ba48d3ac + languageName: node + linkType: hard + "refractor@npm:^3.6.0": version: 3.6.0 resolution: "refractor@npm:3.6.0" @@ -17888,15 +17777,17 @@ __metadata: languageName: node linkType: hard -"regexp.prototype.flags@npm:^1.5.2": - version: 1.5.2 - resolution: "regexp.prototype.flags@npm:1.5.2" +"regexp.prototype.flags@npm:^1.5.3": + version: 1.5.4 + resolution: "regexp.prototype.flags@npm:1.5.4" dependencies: - call-bind: "npm:^1.0.6" + call-bind: "npm:^1.0.8" define-properties: "npm:^1.2.1" es-errors: "npm:^1.3.0" - set-function-name: "npm:^2.0.1" - checksum: 10c0/0f3fc4f580d9c349f8b560b012725eb9c002f36daa0041b3fbf6f4238cb05932191a4d7d5db3b5e2caa336d5150ad0402ed2be81f711f9308fe7e1a9bf9bd552 + get-proto: "npm:^1.0.1" + gopd: "npm:^1.2.0" + set-function-name: "npm:^2.0.2" + checksum: 10c0/83b88e6115b4af1c537f8dabf5c3744032cb875d63bc05c288b1b8c0ef37cbe55353f95d8ca817e8843806e3e150b118bc624e4279b24b4776b4198232735a77 languageName: node linkType: hard @@ -17910,8 +17801,8 @@ __metadata: linkType: hard "remark-gfm@npm:^4.0.0": - version: 4.0.0 - resolution: "remark-gfm@npm:4.0.0" + version: 4.0.1 + resolution: "remark-gfm@npm:4.0.1" dependencies: "@types/mdast": "npm:^4.0.0" mdast-util-gfm: "npm:^3.0.0" @@ -17919,7 +17810,7 @@ __metadata: remark-parse: "npm:^11.0.0" remark-stringify: "npm:^11.0.0" unified: "npm:^11.0.0" - checksum: 10c0/db0aa85ab718d475c2596e27c95be9255d3b0fc730a4eda9af076b919f7dd812f7be3ac020611a8dbe5253fd29671d7b12750b56e529fdc32dfebad6dbf77403 + checksum: 10c0/427ecc6af3e76222662061a5f670a3e4e33ec5fffe2cabf04034da6a3f9a1bda1fc023e838a636385ba314e66e2bebbf017ca61ebea357eb0f5200fe0625a4b7 languageName: node linkType: hard @@ -18027,28 +17918,28 @@ __metadata: linkType: hard "resolve@npm:^1.1.7, resolve@npm:^1.20.0, resolve@npm:^1.22.4": - version: 1.22.8 - resolution: "resolve@npm:1.22.8" + version: 1.22.10 + resolution: "resolve@npm:1.22.10" dependencies: - is-core-module: "npm:^2.13.0" + is-core-module: "npm:^2.16.0" path-parse: "npm:^1.0.7" supports-preserve-symlinks-flag: "npm:^1.0.0" bin: resolve: bin/resolve - checksum: 10c0/07e179f4375e1fd072cfb72ad66d78547f86e6196c4014b31cb0b8bb1db5f7ca871f922d08da0fbc05b94e9fd42206f819648fa3b5b873ebbc8e1dc68fec433a + checksum: 10c0/8967e1f4e2cc40f79b7e080b4582b9a8c5ee36ffb46041dccb20e6461161adf69f843b43067b4a375de926a2cd669157e29a29578191def399dd5ef89a1b5203 languageName: node linkType: hard "resolve@patch:resolve@npm%3A^1.1.7#optional!builtin, resolve@patch:resolve@npm%3A^1.20.0#optional!builtin, resolve@patch:resolve@npm%3A^1.22.4#optional!builtin": - version: 1.22.8 - resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin::version=1.22.8&hash=c3c19d" + version: 1.22.10 + resolution: "resolve@patch:resolve@npm%3A1.22.10#optional!builtin::version=1.22.10&hash=c3c19d" dependencies: - is-core-module: "npm:^2.13.0" + is-core-module: "npm:^2.16.0" path-parse: "npm:^1.0.7" supports-preserve-symlinks-flag: "npm:^1.0.0" bin: resolve: bin/resolve - checksum: 10c0/0446f024439cd2e50c6c8fa8ba77eaa8370b4180f401a96abf3d1ebc770ac51c1955e12764cde449fde3fff480a61f84388e3505ecdbab778f4bef5f8212c729 + checksum: 10c0/52a4e505bbfc7925ac8f4cd91fd8c4e096b6a89728b9f46861d3b405ac9a1ccf4dcbf8befb4e89a2e11370dacd0160918163885cbc669369590f2f31f4c58939 languageName: node linkType: hard @@ -18062,16 +17953,6 @@ __metadata: languageName: node linkType: hard -"restore-cursor@npm:^4.0.0": - version: 4.0.0 - resolution: "restore-cursor@npm:4.0.0" - dependencies: - onetime: "npm:^5.1.0" - signal-exit: "npm:^3.0.2" - checksum: 10c0/6f7da8c5e422ac26aa38354870b1afac09963572cf2879443540449068cb43476e9cbccf6f8de3e0171e0d6f7f533c2bc1a0a008003c9a525bbc098e89041318 - languageName: node - linkType: hard - "restore-cursor@npm:^5.0.0": version: 5.1.0 resolution: "restore-cursor@npm:5.1.0" @@ -18115,13 +17996,13 @@ __metadata: linkType: hard "rimraf@npm:^5.0.5": - version: 5.0.9 - resolution: "rimraf@npm:5.0.9" + version: 5.0.10 + resolution: "rimraf@npm:5.0.10" dependencies: glob: "npm:^10.3.7" bin: rimraf: dist/esm/bin.mjs - checksum: 10c0/87374682492b9e64de9c6fcbf2c8f209c7a2cd0e9749b3732eef8a62c6f859a9ed996d46f662d9ad5dd38c2c469f8e88de56b6c509026070ee3f06369cac1bc8 + checksum: 10c0/7da4fd0e15118ee05b918359462cfa1e7fe4b1228c7765195a45b55576e8c15b95db513b8466ec89129666f4af45ad978a3057a02139afba1a63512a2d9644cc languageName: node linkType: hard @@ -18148,26 +18029,29 @@ __metadata: linkType: hard "rollup@npm:^4.20.0": - version: 4.22.4 - resolution: "rollup@npm:4.22.4" - dependencies: - "@rollup/rollup-android-arm-eabi": "npm:4.22.4" - "@rollup/rollup-android-arm64": "npm:4.22.4" - "@rollup/rollup-darwin-arm64": "npm:4.22.4" - "@rollup/rollup-darwin-x64": "npm:4.22.4" - "@rollup/rollup-linux-arm-gnueabihf": "npm:4.22.4" - "@rollup/rollup-linux-arm-musleabihf": "npm:4.22.4" - "@rollup/rollup-linux-arm64-gnu": "npm:4.22.4" - "@rollup/rollup-linux-arm64-musl": "npm:4.22.4" - "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.22.4" - "@rollup/rollup-linux-riscv64-gnu": "npm:4.22.4" - "@rollup/rollup-linux-s390x-gnu": "npm:4.22.4" - "@rollup/rollup-linux-x64-gnu": "npm:4.22.4" - "@rollup/rollup-linux-x64-musl": "npm:4.22.4" - "@rollup/rollup-win32-arm64-msvc": "npm:4.22.4" - "@rollup/rollup-win32-ia32-msvc": "npm:4.22.4" - "@rollup/rollup-win32-x64-msvc": "npm:4.22.4" - "@types/estree": "npm:1.0.5" + version: 4.34.8 + resolution: "rollup@npm:4.34.8" + dependencies: + "@rollup/rollup-android-arm-eabi": "npm:4.34.8" + "@rollup/rollup-android-arm64": "npm:4.34.8" + "@rollup/rollup-darwin-arm64": "npm:4.34.8" + "@rollup/rollup-darwin-x64": "npm:4.34.8" + "@rollup/rollup-freebsd-arm64": "npm:4.34.8" + "@rollup/rollup-freebsd-x64": "npm:4.34.8" + "@rollup/rollup-linux-arm-gnueabihf": "npm:4.34.8" + "@rollup/rollup-linux-arm-musleabihf": "npm:4.34.8" + "@rollup/rollup-linux-arm64-gnu": "npm:4.34.8" + "@rollup/rollup-linux-arm64-musl": "npm:4.34.8" + "@rollup/rollup-linux-loongarch64-gnu": "npm:4.34.8" + "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.34.8" + "@rollup/rollup-linux-riscv64-gnu": "npm:4.34.8" + "@rollup/rollup-linux-s390x-gnu": "npm:4.34.8" + "@rollup/rollup-linux-x64-gnu": "npm:4.34.8" + "@rollup/rollup-linux-x64-musl": "npm:4.34.8" + "@rollup/rollup-win32-arm64-msvc": "npm:4.34.8" + "@rollup/rollup-win32-ia32-msvc": "npm:4.34.8" + "@rollup/rollup-win32-x64-msvc": "npm:4.34.8" + "@types/estree": "npm:1.0.6" fsevents: "npm:~2.3.2" dependenciesMeta: "@rollup/rollup-android-arm-eabi": @@ -18178,6 +18062,10 @@ __metadata: optional: true "@rollup/rollup-darwin-x64": optional: true + "@rollup/rollup-freebsd-arm64": + optional: true + "@rollup/rollup-freebsd-x64": + optional: true "@rollup/rollup-linux-arm-gnueabihf": optional: true "@rollup/rollup-linux-arm-musleabihf": @@ -18186,6 +18074,8 @@ __metadata: optional: true "@rollup/rollup-linux-arm64-musl": optional: true + "@rollup/rollup-linux-loongarch64-gnu": + optional: true "@rollup/rollup-linux-powerpc64le-gnu": optional: true "@rollup/rollup-linux-riscv64-gnu": @@ -18206,7 +18096,7 @@ __metadata: optional: true bin: rollup: dist/bin/rollup - checksum: 10c0/4c96b6e2e0c5dbe73b4ba899cea894a05115ab8c65ccff631fbbb944e2b3a9f2eb3b99c2dce3dd91b179647df1892ffc44ecee29381ccf155ba8000b22712a32 + checksum: 10c0/b9e711e33413112fbb761107c3fddc4561dfc74335c393542a829a85ccfb2763bfd17bf2422d84a2e9bee7646e5367018973e97005fdf64e49c2e209612f0eb6 languageName: node linkType: hard @@ -18241,23 +18131,24 @@ __metadata: linkType: hard "rxjs@npm:^7.2.0, rxjs@npm:^7.5.6, rxjs@npm:^7.8.1": - version: 7.8.1 - resolution: "rxjs@npm:7.8.1" + version: 7.8.2 + resolution: "rxjs@npm:7.8.2" dependencies: tslib: "npm:^2.1.0" - checksum: 10c0/3c49c1ecd66170b175c9cacf5cef67f8914dcbc7cd0162855538d365c83fea631167cacb644b3ce533b2ea0e9a4d0b12175186985f89d75abe73dbd8f7f06f68 + checksum: 10c0/1fcd33d2066ada98ba8f21fcbbcaee9f0b271de1d38dc7f4e256bfbc6ffcdde68c8bfb69093de7eeb46f24b1fb820620bf0223706cff26b4ab99a7ff7b2e2c45 languageName: node linkType: hard -"safe-array-concat@npm:^1.0.0, safe-array-concat@npm:^1.1.2": - version: 1.1.2 - resolution: "safe-array-concat@npm:1.1.2" +"safe-array-concat@npm:^1.1.2, safe-array-concat@npm:^1.1.3": + version: 1.1.3 + resolution: "safe-array-concat@npm:1.1.3" dependencies: - call-bind: "npm:^1.0.7" - get-intrinsic: "npm:^1.2.4" - has-symbols: "npm:^1.0.3" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.2" + get-intrinsic: "npm:^1.2.6" + has-symbols: "npm:^1.1.0" isarray: "npm:^2.0.5" - checksum: 10c0/12f9fdb01c8585e199a347eacc3bae7b5164ae805cdc8c6707199dbad5b9e30001a50a43c4ee24dc9ea32dbb7279397850e9208a7e217f4d8b1cf5d90129dec9 + checksum: 10c0/43c86ffdddc461fb17ff8a17c5324f392f4868f3c7dd2c6a5d9f5971713bc5fd755667212c80eab9567595f9a7509cc2f83e590ddaebd1bd19b780f9c79f9a8d languageName: node linkType: hard @@ -18275,14 +18166,24 @@ __metadata: languageName: node linkType: hard -"safe-regex-test@npm:^1.0.3": - version: 1.0.3 - resolution: "safe-regex-test@npm:1.0.3" +"safe-push-apply@npm:^1.0.0": + version: 1.0.0 + resolution: "safe-push-apply@npm:1.0.0" + dependencies: + es-errors: "npm:^1.3.0" + isarray: "npm:^2.0.5" + checksum: 10c0/831f1c9aae7436429e7862c7e46f847dfe490afac20d0ee61bae06108dbf5c745a0de3568ada30ccdd3eeb0864ca8331b2eef703abd69bfea0745b21fd320750 + languageName: node + linkType: hard + +"safe-regex-test@npm:^1.1.0": + version: 1.1.0 + resolution: "safe-regex-test@npm:1.1.0" dependencies: - call-bind: "npm:^1.0.6" + call-bound: "npm:^1.0.2" es-errors: "npm:^1.3.0" - is-regex: "npm:^1.1.4" - checksum: 10c0/900bf7c98dc58f08d8523b7012b468e4eb757afa624f198902c0643d7008ba777b0bdc35810ba0b758671ce887617295fb742b3f3968991b178ceca54cb07603 + is-regex: "npm:^1.2.1" + checksum: 10c0/f2c25281bbe5d39cddbbce7f86fca5ea9b3ce3354ea6cd7c81c31b006a5a9fff4286acc5450a3b9122c56c33eba69c56b9131ad751457b2b4a585825e6a10665 languageName: node linkType: hard @@ -18319,6 +18220,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe + languageName: node + linkType: hard + "semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1": version: 6.3.1 resolution: "semver@npm:6.3.1" @@ -18328,16 +18236,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2": - version: 7.6.3 - resolution: "semver@npm:7.6.3" - bin: - semver: bin/semver.js - checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf - languageName: node - linkType: hard - -"semver@npm:^7.7.1": +"semver@npm:^7.3.2, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.7.1": version: 7.7.1 resolution: "semver@npm:7.7.1" bin: @@ -18373,7 +18272,7 @@ __metadata: languageName: node linkType: hard -"set-function-length@npm:^1.2.1": +"set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" dependencies: @@ -18387,7 +18286,7 @@ __metadata: languageName: node linkType: hard -"set-function-name@npm:^2.0.1": +"set-function-name@npm:^2.0.2": version: 2.0.2 resolution: "set-function-name@npm:2.0.2" dependencies: @@ -18399,6 +18298,17 @@ __metadata: languageName: node linkType: hard +"set-proto@npm:^1.0.0": + version: 1.0.0 + resolution: "set-proto@npm:1.0.0" + dependencies: + dunder-proto: "npm:^1.0.1" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.0.0" + checksum: 10c0/ca5c3ccbba479d07c30460e367e66337cec825560b11e8ba9c5ebe13a2a0d6021ae34eddf94ff3dfe17a3104dc1f191519cb6c48378b503e5c3f36393938776a + languageName: node + linkType: hard + "shebang-command@npm:^2.0.0": version: 2.0.0 resolution: "shebang-command@npm:2.0.0" @@ -18422,15 +18332,51 @@ __metadata: languageName: node linkType: hard -"side-channel@npm:^1.0.4": - version: 1.0.6 - resolution: "side-channel@npm:1.0.6" +"side-channel-list@npm:^1.0.0": + version: 1.0.0 + resolution: "side-channel-list@npm:1.0.0" dependencies: - call-bind: "npm:^1.0.7" es-errors: "npm:^1.3.0" - get-intrinsic: "npm:^1.2.4" - object-inspect: "npm:^1.13.1" - checksum: 10c0/d2afd163dc733cc0a39aa6f7e39bf0c436293510dbccbff446733daeaf295857dbccf94297092ec8c53e2503acac30f0b78830876f0485991d62a90e9cad305f + object-inspect: "npm:^1.13.3" + checksum: 10c0/644f4ac893456c9490ff388bf78aea9d333d5e5bfc64cfb84be8f04bf31ddc111a8d4b83b85d7e7e8a7b845bc185a9ad02c052d20e086983cf59f0be517d9b3d + languageName: node + linkType: hard + +"side-channel-map@npm:^1.0.1": + version: 1.0.1 + resolution: "side-channel-map@npm:1.0.1" + dependencies: + call-bound: "npm:^1.0.2" + es-errors: "npm:^1.3.0" + get-intrinsic: "npm:^1.2.5" + object-inspect: "npm:^1.13.3" + checksum: 10c0/010584e6444dd8a20b85bc926d934424bd809e1a3af941cace229f7fdcb751aada0fb7164f60c2e22292b7fa3c0ff0bce237081fd4cdbc80de1dc68e95430672 + languageName: node + linkType: hard + +"side-channel-weakmap@npm:^1.0.2": + version: 1.0.2 + resolution: "side-channel-weakmap@npm:1.0.2" + dependencies: + call-bound: "npm:^1.0.2" + es-errors: "npm:^1.3.0" + get-intrinsic: "npm:^1.2.5" + object-inspect: "npm:^1.13.3" + side-channel-map: "npm:^1.0.1" + checksum: 10c0/71362709ac233e08807ccd980101c3e2d7efe849edc51455030327b059f6c4d292c237f94dc0685031dd11c07dd17a68afde235d6cf2102d949567f98ab58185 + languageName: node + linkType: hard + +"side-channel@npm:^1.1.0": + version: 1.1.0 + resolution: "side-channel@npm:1.1.0" + dependencies: + es-errors: "npm:^1.3.0" + object-inspect: "npm:^1.13.3" + side-channel-list: "npm:^1.0.0" + side-channel-map: "npm:^1.0.1" + side-channel-weakmap: "npm:^1.0.2" + checksum: 10c0/cb20dad41eb032e6c24c0982e1e5a24963a28aa6122b4f05b3f3d6bf8ae7fd5474ef382c8f54a6a3ab86e0cac4d41a23bd64ede3970e5bfb50326ba02a7996e6 languageName: node linkType: hard @@ -18534,40 +18480,40 @@ __metadata: linkType: hard "socks-proxy-agent@npm:^8.0.3": - version: 8.0.4 - resolution: "socks-proxy-agent@npm:8.0.4" + version: 8.0.5 + resolution: "socks-proxy-agent@npm:8.0.5" dependencies: - agent-base: "npm:^7.1.1" + agent-base: "npm:^7.1.2" debug: "npm:^4.3.4" socks: "npm:^2.8.3" - checksum: 10c0/345593bb21b95b0508e63e703c84da11549f0a2657d6b4e3ee3612c312cb3a907eac10e53b23ede3557c6601d63252103494caa306b66560f43af7b98f53957a + checksum: 10c0/5d2c6cecba6821389aabf18728325730504bf9bb1d9e342e7987a5d13badd7a98838cc9a55b8ed3cb866ad37cc23e1086f09c4d72d93105ce9dfe76330e9d2a6 languageName: node linkType: hard "socks@npm:^2.8.3": - version: 2.8.3 - resolution: "socks@npm:2.8.3" + version: 2.8.4 + resolution: "socks@npm:2.8.4" dependencies: ip-address: "npm:^9.0.5" smart-buffer: "npm:^4.2.0" - checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7 - languageName: node - linkType: hard - -"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.0": - version: 1.2.0 - resolution: "source-map-js@npm:1.2.0" - checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4 + checksum: 10c0/00c3271e233ccf1fb83a3dd2060b94cc37817e0f797a93c560b9a7a86c4a0ec2961fb31263bdd24a3c28945e24868b5f063cd98744171d9e942c513454b50ae5 languageName: node linkType: hard -"source-map-js@npm:^1.2.1": +"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf languageName: node linkType: hard +"source-map-js@npm:^1.2.0": + version: 1.2.0 + resolution: "source-map-js@npm:1.2.0" + checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4 + languageName: node + linkType: hard + "source-map-support@npm:0.5.13": version: 0.5.13 resolution: "source-map-support@npm:0.5.13" @@ -18714,7 +18660,7 @@ __metadata: languageName: node linkType: hard -"stdin-discarder@npm:^0.2.1": +"stdin-discarder@npm:^0.2.2": version: 0.2.2 resolution: "stdin-discarder@npm:0.2.2" checksum: 10c0/c78375e82e956d7a64be6e63c809c7f058f5303efcaf62ea48350af072bacdb99c06cba39209b45a071c1acbd49116af30df1df9abb448df78a6005b72f10537 @@ -18722,10 +18668,10 @@ __metadata: linkType: hard "storybook@npm:^8.4.7": - version: 8.4.7 - resolution: "storybook@npm:8.4.7" + version: 8.5.8 + resolution: "storybook@npm:8.5.8" dependencies: - "@storybook/core": "npm:8.4.7" + "@storybook/core": "npm:8.5.8" peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: @@ -18735,26 +18681,25 @@ __metadata: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 10c0/795b79950b88b41ee0158fe2e2583a8ce97ff843c054f91e3c55310967b9e5c4e4d72814773380b543c33bd6d57ce6b5f377ce93ce73962e803b250a751be37c + checksum: 10c0/a02ccf3132c05341139deb23dd7731191b4542b80d0d4ed772d06f483373be5713e3db1003fddb8823da417c5c9353273032d30d61cfa6084a04b9b33dc764cc languageName: node linkType: hard "streamx@npm:^2.15.0": - version: 2.18.0 - resolution: "streamx@npm:2.18.0" + version: 2.22.0 + resolution: "streamx@npm:2.22.0" dependencies: bare-events: "npm:^2.2.0" fast-fifo: "npm:^1.3.2" - queue-tick: "npm:^1.0.1" text-decoder: "npm:^1.1.0" dependenciesMeta: bare-events: optional: true - checksum: 10c0/ef50f419252a73dd35abcde72329eafbf5ad9cd2e27f0cc3abebeff6e0dbea124ac6d3e16acbdf081cce41b4125393ac22f9848fcfa19e640830734883e622ba + checksum: 10c0/f5017998a5b6360ba652599d20ef308c8c8ab0e26c8e5f624f0706f0ea12624e94fdf1ec18318124498529a1b106a1ab1c94a1b1e1ad6c2eec7cb9c8ac1b9198 languageName: node linkType: hard -"string-argv@npm:~0.3.2": +"string-argv@npm:^0.3.2": version: 0.3.2 resolution: "string-argv@npm:0.3.2" checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82 @@ -18829,7 +18774,7 @@ __metadata: languageName: node linkType: hard -"string-width@npm:^7.0.0": +"string-width@npm:^7.0.0, string-width@npm:^7.2.0": version: 7.2.0 resolution: "string-width@npm:7.2.0" dependencies: @@ -18840,26 +18785,30 @@ __metadata: languageName: node linkType: hard -"string.prototype.trim@npm:^1.2.9": - version: 1.2.9 - resolution: "string.prototype.trim@npm:1.2.9" +"string.prototype.trim@npm:^1.2.10": + version: 1.2.10 + resolution: "string.prototype.trim@npm:1.2.10" dependencies: - call-bind: "npm:^1.0.7" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.2" + define-data-property: "npm:^1.1.4" define-properties: "npm:^1.2.1" - es-abstract: "npm:^1.23.0" + es-abstract: "npm:^1.23.5" es-object-atoms: "npm:^1.0.0" - checksum: 10c0/dcef1a0fb61d255778155006b372dff8cc6c4394bc39869117e4241f41a2c52899c0d263ffc7738a1f9e61488c490b05c0427faa15151efad721e1a9fb2663c2 + has-property-descriptors: "npm:^1.0.2" + checksum: 10c0/8a8854241c4b54a948e992eb7dd6b8b3a97185112deb0037a134f5ba57541d8248dd610c966311887b6c2fd1181a3877bffb14d873ce937a344535dabcc648f8 languageName: node linkType: hard -"string.prototype.trimend@npm:^1.0.8": - version: 1.0.8 - resolution: "string.prototype.trimend@npm:1.0.8" +"string.prototype.trimend@npm:^1.0.9": + version: 1.0.9 + resolution: "string.prototype.trimend@npm:1.0.9" dependencies: - call-bind: "npm:^1.0.7" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.2" define-properties: "npm:^1.2.1" es-object-atoms: "npm:^1.0.0" - checksum: 10c0/0a0b54c17c070551b38e756ae271865ac6cc5f60dabf2e7e343cceae7d9b02e1a1120a824e090e79da1b041a74464e8477e2da43e2775c85392be30a6f60963c + checksum: 10c0/59e1a70bf9414cb4c536a6e31bef5553c8ceb0cf44d8b4d0ed65c9653358d1c64dd0ec203b100df83d0413bbcde38b8c5d49e14bc4b86737d74adc593a0d35b6 languageName: node linkType: hard @@ -18979,10 +18928,10 @@ __metadata: languageName: node linkType: hard -"strnum@npm:^1.0.5": - version: 1.0.5 - resolution: "strnum@npm:1.0.5" - checksum: 10c0/64fb8cc2effbd585a6821faa73ad97d4b553c8927e49086a162ffd2cc818787643390b89d567460a8e74300148d11ac052e21c921ef2049f2987f4b1b89a7ff1 +"strnum@npm:^1.1.1": + version: 1.1.1 + resolution: "strnum@npm:1.1.1" + checksum: 10c0/c016034f9896ea99c4a22a8a8142d1ec72dba8d514ddec399f96998d5d2ab9f9e5b6c75c761d9730c3244b794022b1a63ec293f0da41ab0a994e3584020ba1ad languageName: node linkType: hard @@ -19027,18 +18976,6 @@ __metadata: languageName: node linkType: hard -"stylehacks@npm:^7.0.2": - version: 7.0.2 - resolution: "stylehacks@npm:7.0.2" - dependencies: - browserslist: "npm:^4.23.1" - postcss-selector-parser: "npm:^6.1.0" - peerDependencies: - postcss: ^8.4.31 - checksum: 10c0/552299e869ac430e1076c025ace6c80bdfd5b672632435625eb1bd45ff5611aad7f3ee810e72edc04dc0fc3761e08dec40d27b72c50b95690eea2de43238b8d8 - languageName: node - linkType: hard - "stylehacks@npm:^7.0.4": version: 7.0.4 resolution: "stylehacks@npm:7.0.4" @@ -19072,24 +19009,25 @@ __metadata: linkType: hard "stylelint-header@npm:^2.0.1": - version: 2.0.1 - resolution: "stylelint-header@npm:2.0.1" + version: 2.1.0 + resolution: "stylelint-header@npm:2.1.0" dependencies: + lodash-es: "npm:^4.17.21" string-similarity: "npm:^4.0.4" peerDependencies: stylelint: ^15.0.0 || ^16.0.0 - checksum: 10c0/ed06484ec0484ad02878c8e1512b34926e87532db7287c315c015532f7cfd3d202df5aa2603a06bb1569dc0ac93cefa94bd952b75d71dc8035608578a3fa64d4 + checksum: 10c0/e2fb17dcc0142ac48b88d31d7f6ede23bb2d3df77cc18f69ae9638814de656680808f8edb8efd8f0e60a7c6dbec0399b85fdc644b8ebf6e1ebc3f2eb80496a80 languageName: node linkType: hard "stylelint-high-performance-animation@npm:^1.10.0": - version: 1.10.0 - resolution: "stylelint-high-performance-animation@npm:1.10.0" + version: 1.11.0 + resolution: "stylelint-high-performance-animation@npm:1.11.0" dependencies: postcss-value-parser: "npm:^4.2.0" peerDependencies: stylelint: ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 - checksum: 10c0/2a942ca8e825c1b6ed7c410b5125ca5c58fee375cc206d05bce8890eff2197b26aa40709f4cbd127da9d47e38e329e8c808c937818db389bbab2cd7c888ae20f + checksum: 10c0/de590bc4788c9ae0db9439688949ceea4e839fea273f534e70100bf4c5d7cf81cd2dcc87fe89325997db05f0f69a7e06c368da1c3ae0adc82fd5f8243d554758 languageName: node linkType: hard @@ -19128,51 +19066,50 @@ __metadata: linkType: hard "stylelint@npm:^16.9.0": - version: 16.9.0 - resolution: "stylelint@npm:16.9.0" + version: 16.14.1 + resolution: "stylelint@npm:16.14.1" dependencies: - "@csstools/css-parser-algorithms": "npm:^3.0.1" - "@csstools/css-tokenizer": "npm:^3.0.1" - "@csstools/media-query-list-parser": "npm:^3.0.1" - "@csstools/selector-specificity": "npm:^4.0.0" + "@csstools/css-parser-algorithms": "npm:^3.0.4" + "@csstools/css-tokenizer": "npm:^3.0.3" + "@csstools/media-query-list-parser": "npm:^4.0.2" + "@csstools/selector-specificity": "npm:^5.0.0" "@dual-bundle/import-meta-resolve": "npm:^4.1.0" balanced-match: "npm:^2.0.0" colord: "npm:^2.9.3" cosmiconfig: "npm:^9.0.0" - css-functions-list: "npm:^3.2.2" - css-tree: "npm:^2.3.1" - debug: "npm:^4.3.6" - fast-glob: "npm:^3.3.2" + css-functions-list: "npm:^3.2.3" + css-tree: "npm:^3.1.0" + debug: "npm:^4.3.7" + fast-glob: "npm:^3.3.3" fastest-levenshtein: "npm:^1.0.16" - file-entry-cache: "npm:^9.0.0" + file-entry-cache: "npm:^10.0.5" global-modules: "npm:^2.0.0" globby: "npm:^11.1.0" globjoin: "npm:^0.1.4" html-tags: "npm:^3.3.1" - ignore: "npm:^5.3.2" + ignore: "npm:^7.0.3" imurmurhash: "npm:^0.1.4" is-plain-object: "npm:^5.0.0" - known-css-properties: "npm:^0.34.0" + known-css-properties: "npm:^0.35.0" mathml-tag-names: "npm:^2.1.3" meow: "npm:^13.2.0" micromatch: "npm:^4.0.8" normalize-path: "npm:^3.0.0" - picocolors: "npm:^1.0.1" - postcss: "npm:^8.4.41" + picocolors: "npm:^1.1.1" + postcss: "npm:^8.5.1" postcss-resolve-nested-selector: "npm:^0.1.6" - postcss-safe-parser: "npm:^7.0.0" - postcss-selector-parser: "npm:^6.1.2" + postcss-safe-parser: "npm:^7.0.1" + postcss-selector-parser: "npm:^7.0.0" postcss-value-parser: "npm:^4.2.0" resolve-from: "npm:^5.0.0" string-width: "npm:^4.2.3" - strip-ansi: "npm:^7.1.0" supports-hyperlinks: "npm:^3.1.0" svg-tags: "npm:^1.0.0" - table: "npm:^6.8.2" + table: "npm:^6.9.0" write-file-atomic: "npm:^5.0.1" bin: stylelint: bin/stylelint.mjs - checksum: 10c0/d3ff9c8945c56b04a2fa16ec33d163325496d5db94b6fcb5adf74c76f7f794ac992888273f9a3317652ba8b6195168b2ffff382ca2a667a241e2ace8c9505ae2 + checksum: 10c0/cce94374dc721d491d955f548ee81ba835d4955fa37d58a11323454f9f3721e5644fa89a04c14f85bdfa12790bdd043a41be2001a99cb0bfe23b38eb933199d7 languageName: node linkType: hard @@ -19232,12 +19169,12 @@ __metadata: linkType: hard "supports-hyperlinks@npm:^3.1.0": - version: 3.1.0 - resolution: "supports-hyperlinks@npm:3.1.0" + version: 3.2.0 + resolution: "supports-hyperlinks@npm:3.2.0" dependencies: has-flag: "npm:^4.0.0" supports-color: "npm:^7.0.0" - checksum: 10c0/78cc3e17eb27e6846fa355a8ebf343befe36272899cd409e45317a06c1997e95c23ff99d91080a517bd8c96508d4fa456e6ceb338c02ba5d7544277dbec0f10f + checksum: 10c0/bca527f38d4c45bc95d6a24225944675746c515ddb91e2456d00ae0b5c537658e9dd8155b996b191941b0c19036195a098251304b9082bbe00cd1781f3cd838e languageName: node linkType: hard @@ -19291,25 +19228,25 @@ __metadata: linkType: hard "synckit@npm:^0.9.1": - version: 0.9.1 - resolution: "synckit@npm:0.9.1" + version: 0.9.2 + resolution: "synckit@npm:0.9.2" dependencies: "@pkgr/core": "npm:^0.1.0" tslib: "npm:^2.6.2" - checksum: 10c0/d8b89e1bf30ba3ffb469d8418c836ad9c0c062bf47028406b4d06548bc66af97155ea2303b96c93bf5c7c0f0d66153a6fbd6924c76521b434e6a9898982abc2e + checksum: 10c0/e0c262817444e5b872708adb6f5ad37951ba33f6b2d1d4477d45db1f57573a784618ceed5e6614e0225db330632b1f6b95bb74d21e4d013e45ad4bde03d0cb59 languageName: node linkType: hard -"table@npm:^6.8.2": - version: 6.8.2 - resolution: "table@npm:6.8.2" +"table@npm:^6.9.0": + version: 6.9.0 + resolution: "table@npm:6.9.0" dependencies: ajv: "npm:^8.0.1" lodash.truncate: "npm:^4.4.2" slice-ansi: "npm:^4.0.0" string-width: "npm:^4.2.3" strip-ansi: "npm:^6.0.1" - checksum: 10c0/f8b348af38ee34e419d8ce7306ba00671ce6f20e861ccff22555f491ba264e8416086063ce278a8d81abfa8d23b736ec2cca7ac4029b5472f63daa4b4688b803 + checksum: 10c0/35646185712bb65985fbae5975dda46696325844b78735f95faefae83e86df0a265277819a3e67d189de6e858c509b54e66ca3958ffd51bde56ef1118d455bf4 languageName: node linkType: hard @@ -19402,11 +19339,11 @@ __metadata: linkType: hard "text-decoder@npm:^1.1.0": - version: 1.1.1 - resolution: "text-decoder@npm:1.1.1" + version: 1.2.3 + resolution: "text-decoder@npm:1.2.3" dependencies: b4a: "npm:^1.6.4" - checksum: 10c0/e527d05454b59c0fa77456495de68c88e560a122de3dd28b3ebdbf81828aabeaa7e9bb8054b9eb52bc5029ccb5899ad04f466cbba3c53b2685270599d1710cee + checksum: 10c0/569d776b9250158681c83656ef2c3e0a5d5c660c27ca69f87eedef921749a4fbf02095e5f9a0f862a25cf35258379b06e31dee9c125c9f72e273b7ca1a6d1977 languageName: node linkType: hard @@ -19460,9 +19397,9 @@ __metadata: linkType: hard "tinyexec@npm:^0.3.0": - version: 0.3.0 - resolution: "tinyexec@npm:0.3.0" - checksum: 10c0/138a4f4241aea6b6312559508468ab275a31955e66e2f57ed206e0aaabecee622624f208c5740345f0a66e33478fd065e359ed1eb1269eb6fd4fa25d44d0ba3b + version: 0.3.2 + resolution: "tinyexec@npm:0.3.2" + checksum: 10c0/3efbf791a911be0bf0821eab37a3445c2ba07acc1522b1fa84ae1e55f10425076f1290f680286345ed919549ad67527d07281f1c19d584df3b74326909eb1f90 languageName: node linkType: hard @@ -19650,16 +19587,6 @@ __metadata: languageName: node linkType: hard -"ts-poet@npm:^4.5.0": - version: 4.15.0 - resolution: "ts-poet@npm:4.15.0" - dependencies: - lodash: "npm:^4.17.15" - prettier: "npm:^2.5.1" - checksum: 10c0/87ce3589f071a66a9701c88ee830ce778f2e4c43bcfdee9308a8f38bb53b8fb36e7b5900749389b4bb8aaddf67e87043d51c2fbf36ec25aa98bcfff90bf6d742 - languageName: node - linkType: hard - "tsconfig-paths@npm:^4.1.2": version: 4.2.0 resolution: "tsconfig-paths@npm:4.2.0" @@ -19671,14 +19598,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2": - version: 2.6.3 - resolution: "tslib@npm:2.6.3" - checksum: 10c0/2598aef53d9dbe711af75522464b2104724d6467b26a60f2bdac8297d2b5f1f6b86a71f61717384aa8fd897240467aaa7bcc36a0700a0faf751293d1331db39a - languageName: node - linkType: hard - -"tslib@npm:^2.8.1": +"tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.3.1, tslib@npm:^2.4.0, tslib@npm:^2.6.2, tslib@npm:^2.8.1": version: 2.8.1 resolution: "tslib@npm:2.8.1" checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62 @@ -19699,30 +19619,6 @@ __metadata: languageName: node linkType: hard -"twirp-ts@npm:^2.5.0": - version: 2.5.0 - resolution: "twirp-ts@npm:2.5.0" - dependencies: - "@protobuf-ts/plugin-framework": "npm:^2.0.7" - camel-case: "npm:^4.1.2" - dot-object: "npm:^2.1.4" - path-to-regexp: "npm:^6.2.0" - ts-poet: "npm:^4.5.0" - yaml: "npm:^1.10.2" - peerDependencies: - "@protobuf-ts/plugin": ^2.5.0 - ts-proto: ^1.81.3 - peerDependenciesMeta: - "@protobuf-ts/plugin": - optional: true - ts-proto: - optional: true - bin: - protoc-gen-twirp_ts: protoc-gen-twirp_ts - checksum: 10c0/046ef483420105e92bb8429931e754d7046516fd4fc4f5eeeacbf57dd26ec06ab9c69eba934e587e525f24f49177b03667d18dea78741c408b3e69e1c9774bbd - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -19783,55 +19679,56 @@ __metadata: languageName: node linkType: hard -"typed-array-buffer@npm:^1.0.2": - version: 1.0.2 - resolution: "typed-array-buffer@npm:1.0.2" +"typed-array-buffer@npm:^1.0.3": + version: 1.0.3 + resolution: "typed-array-buffer@npm:1.0.3" dependencies: - call-bind: "npm:^1.0.7" + call-bound: "npm:^1.0.3" es-errors: "npm:^1.3.0" - is-typed-array: "npm:^1.1.13" - checksum: 10c0/9e043eb38e1b4df4ddf9dde1aa64919ae8bb909571c1cc4490ba777d55d23a0c74c7d73afcdd29ec98616d91bb3ae0f705fad4421ea147e1daf9528200b562da + is-typed-array: "npm:^1.1.14" + checksum: 10c0/1105071756eb248774bc71646bfe45b682efcad93b55532c6ffa4518969fb6241354e4aa62af679ae83899ec296d69ef88f1f3763657cdb3a4d29321f7b83079 languageName: node linkType: hard -"typed-array-byte-length@npm:^1.0.1": - version: 1.0.1 - resolution: "typed-array-byte-length@npm:1.0.1" +"typed-array-byte-length@npm:^1.0.3": + version: 1.0.3 + resolution: "typed-array-byte-length@npm:1.0.3" dependencies: - call-bind: "npm:^1.0.7" + call-bind: "npm:^1.0.8" for-each: "npm:^0.3.3" - gopd: "npm:^1.0.1" - has-proto: "npm:^1.0.3" - is-typed-array: "npm:^1.1.13" - checksum: 10c0/fcebeffb2436c9f355e91bd19e2368273b88c11d1acc0948a2a306792f1ab672bce4cfe524ab9f51a0505c9d7cd1c98eff4235c4f6bfef6a198f6cfc4ff3d4f3 + gopd: "npm:^1.2.0" + has-proto: "npm:^1.2.0" + is-typed-array: "npm:^1.1.14" + checksum: 10c0/6ae083c6f0354f1fce18b90b243343b9982affd8d839c57bbd2c174a5d5dc71be9eb7019ffd12628a96a4815e7afa85d718d6f1e758615151d5f35df841ffb3e languageName: node linkType: hard -"typed-array-byte-offset@npm:^1.0.2": - version: 1.0.2 - resolution: "typed-array-byte-offset@npm:1.0.2" +"typed-array-byte-offset@npm:^1.0.4": + version: 1.0.4 + resolution: "typed-array-byte-offset@npm:1.0.4" dependencies: available-typed-arrays: "npm:^1.0.7" - call-bind: "npm:^1.0.7" + call-bind: "npm:^1.0.8" for-each: "npm:^0.3.3" - gopd: "npm:^1.0.1" - has-proto: "npm:^1.0.3" - is-typed-array: "npm:^1.1.13" - checksum: 10c0/d2628bc739732072e39269389a758025f75339de2ed40c4f91357023c5512d237f255b633e3106c461ced41907c1bf9a533c7e8578066b0163690ca8bc61b22f + gopd: "npm:^1.2.0" + has-proto: "npm:^1.2.0" + is-typed-array: "npm:^1.1.15" + reflect.getprototypeof: "npm:^1.0.9" + checksum: 10c0/3d805b050c0c33b51719ee52de17c1cd8e6a571abdf0fffb110e45e8dd87a657e8b56eee94b776b13006d3d347a0c18a730b903cf05293ab6d92e99ff8f77e53 languageName: node linkType: hard -"typed-array-length@npm:^1.0.6": - version: 1.0.6 - resolution: "typed-array-length@npm:1.0.6" +"typed-array-length@npm:^1.0.7": + version: 1.0.7 + resolution: "typed-array-length@npm:1.0.7" dependencies: call-bind: "npm:^1.0.7" for-each: "npm:^0.3.3" gopd: "npm:^1.0.1" - has-proto: "npm:^1.0.3" is-typed-array: "npm:^1.1.13" possible-typed-array-names: "npm:^1.0.0" - checksum: 10c0/74253d7dc488eb28b6b2711cf31f5a9dcefc9c41b0681fd1c178ed0a1681b4468581a3626d39cd4df7aee3d3927ab62be06aa9ca74e5baf81827f61641445b77 + reflect.getprototypeof: "npm:^1.0.6" + checksum: 10c0/e38f2ae3779584c138a2d8adfa8ecf749f494af3cd3cdafe4e688ce51418c7d2c5c88df1bd6be2bbea099c3f7cea58c02ca02ed438119e91f162a9de23f61295 languageName: node linkType: hard @@ -19885,23 +19782,23 @@ __metadata: linkType: hard "uglify-js@npm:^3.1.4": - version: 3.19.0 - resolution: "uglify-js@npm:3.19.0" + version: 3.19.3 + resolution: "uglify-js@npm:3.19.3" bin: uglifyjs: bin/uglifyjs - checksum: 10c0/c27d7a4734a59c5e2c08a6efd68bc534d559619f80ad437b1009ed56a7b1a8f6d6cbd5892a15879e0413d724e785b7227487ccca8d3e07261ba92d469c1447d3 + checksum: 10c0/83b0a90eca35f778e07cad9622b80c448b6aad457c9ff8e568afed978212b42930a95f9e1be943a1ffa4258a3340fbb899f41461131c05bb1d0a9c303aed8479 languageName: node linkType: hard -"unbox-primitive@npm:^1.0.2": - version: 1.0.2 - resolution: "unbox-primitive@npm:1.0.2" +"unbox-primitive@npm:^1.1.0": + version: 1.1.0 + resolution: "unbox-primitive@npm:1.1.0" dependencies: - call-bind: "npm:^1.0.2" + call-bound: "npm:^1.0.3" has-bigints: "npm:^1.0.2" - has-symbols: "npm:^1.0.3" - which-boxed-primitive: "npm:^1.0.2" - checksum: 10c0/81ca2e81134167cc8f75fa79fbcc8a94379d6c61de67090986a2273850989dd3bae8440c163121b77434b68263e34787a675cbdcb34bb2f764c6b9c843a11b66 + has-symbols: "npm:^1.1.0" + which-boxed-primitive: "npm:^1.1.1" + checksum: 10c0/7dbd35ab02b0e05fe07136c72cb9355091242455473ec15057c11430129bab38b7b3624019b8778d02a881c13de44d63cd02d122ee782fb519e1de7775b5b982 languageName: node linkType: hard @@ -19912,10 +19809,10 @@ __metadata: languageName: node linkType: hard -"undici-types@npm:~5.26.4": - version: 5.26.5 - resolution: "undici-types@npm:5.26.5" - checksum: 10c0/bb673d7876c2d411b6eb6c560e0c571eef4a01c1c19925175d16e3a30c4c428181fb8d7ae802a261f283e4166a0ac435e2f505743aa9e45d893f9a3df017b501 +"undici-types@npm:~6.20.0": + version: 6.20.0 + resolution: "undici-types@npm:6.20.0" + checksum: 10c0/68e659a98898d6a836a9a59e6adf14a5d799707f5ea629433e025ac90d239f75e408e2e5ff086afc3cace26f8b26ee52155293564593fbb4a2f666af57fc59bf languageName: node linkType: hard @@ -19942,6 +19839,13 @@ __metadata: languageName: node linkType: hard +"unicorn-magic@npm:^0.3.0": + version: 0.3.0 + resolution: "unicorn-magic@npm:0.3.0" + checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271 + languageName: node + linkType: hard + "unified@npm:^11.0.0": version: 11.0.5 resolution: "unified@npm:11.0.5" @@ -20054,14 +19958,12 @@ __metadata: linkType: hard "unplugin@npm:^1.3.1": - version: 1.12.0 - resolution: "unplugin@npm:1.12.0" + version: 1.16.1 + resolution: "unplugin@npm:1.16.1" dependencies: - acorn: "npm:^8.12.1" - chokidar: "npm:^3.6.0" - webpack-sources: "npm:^3.2.3" + acorn: "npm:^8.14.0" webpack-virtual-modules: "npm:^0.6.2" - checksum: 10c0/d4ca9508adbc3724fbafe0eec50e346b3772d3bca7881f20b29d403c576fae5ac2f1224cc84481913396e9c52cba5e934d2815d1b2a206c439fdc52ec39889b8 + checksum: 10c0/dd5f8c5727d0135847da73cf03fb199107f1acf458167034886fda3405737dab871ad3926431b4f70e1e82cdac482ac1383cea4019d782a68515c8e3e611b6cc languageName: node linkType: hard @@ -20075,6 +19977,20 @@ __metadata: languageName: node linkType: hard +"update-browserslist-db@npm:^1.0.16": + version: 1.0.16 + resolution: "update-browserslist-db@npm:1.0.16" + dependencies: + escalade: "npm:^3.1.2" + picocolors: "npm:^1.0.1" + peerDependencies: + browserslist: ">= 4.21.0" + bin: + update-browserslist-db: cli.js + checksum: 10c0/5995399fc202adbb51567e4810e146cdf7af630a92cc969365a099150cb00597e425cc14987ca7080b09a4d0cfd2a3de53fbe72eebff171aed7f9bb81f9bf405 + languageName: node + linkType: hard + "update-browserslist-db@npm:^1.1.0": version: 1.1.0 resolution: "update-browserslist-db@npm:1.1.0" @@ -20090,16 +20006,16 @@ __metadata: linkType: hard "update-browserslist-db@npm:^1.1.1": - version: 1.1.1 - resolution: "update-browserslist-db@npm:1.1.1" + version: 1.1.2 + resolution: "update-browserslist-db@npm:1.1.2" dependencies: escalade: "npm:^3.2.0" - picocolors: "npm:^1.1.0" + picocolors: "npm:^1.1.1" peerDependencies: browserslist: ">= 4.21.0" bin: update-browserslist-db: cli.js - checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80 + checksum: 10c0/9cb353998d6d7d6ba1e46b8fa3db888822dd972212da4eda609d185eb5c3557a93fd59780ceb757afd4d84240518df08542736969e6a5d6d6ce2d58e9363aac6 languageName: node linkType: hard @@ -20138,17 +20054,22 @@ __metadata: linkType: hard "util.promisify@npm:^1.0.0": - version: 1.1.2 - resolution: "util.promisify@npm:1.1.2" + version: 1.1.3 + resolution: "util.promisify@npm:1.1.3" dependencies: - call-bind: "npm:^1.0.2" - define-properties: "npm:^1.2.0" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" + define-data-property: "npm:^1.1.4" + define-properties: "npm:^1.2.1" + es-errors: "npm:^1.3.0" + es-object-atoms: "npm:^1.0.0" for-each: "npm:^0.3.3" - has-proto: "npm:^1.0.1" - has-symbols: "npm:^1.0.3" - object.getownpropertydescriptors: "npm:^2.1.6" - safe-array-concat: "npm:^1.0.0" - checksum: 10c0/cc9bf4912b89ea8e095b5746d945607884b4635d219cb1935c028259e86be6af92d7b7b1e702776805d81f7d387ffa436037299e9bf01ce076267e217b54ae3e + get-intrinsic: "npm:^1.2.6" + has-proto: "npm:^1.2.0" + has-symbols: "npm:^1.1.0" + object.getownpropertydescriptors: "npm:^2.1.8" + safe-array-concat: "npm:^1.1.3" + checksum: 10c0/b7a2f721222ffc26f8a12a1cdc44a81b16a614b81f2d6f71f50c8b214a20afe8324d5f0700f04759d6ea33446ba0730e4ef0b4e2c4f4ef5adca16dabd502fa2b languageName: node linkType: hard @@ -20236,8 +20157,8 @@ __metadata: linkType: hard "vite@npm:^5.4.11": - version: 5.4.11 - resolution: "vite@npm:5.4.11" + version: 5.4.14 + resolution: "vite@npm:5.4.14" dependencies: esbuild: "npm:^0.21.3" fsevents: "npm:~2.3.3" @@ -20274,7 +20195,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10c0/d536bb7af57dd0eca2a808f95f5ff1d7b7ffb8d86e17c6893087680a0448bd0d15e07475270c8a6de65cb5115592d037130a1dd979dc76bcef8c1dda202a1874 + checksum: 10c0/8842933bd70ca6a98489a0bb9c8464bec373de00f9a97c8c7a4e64b24d15c88bfaa8c1acb38a68c3e5eb49072ffbccb146842c2d4edcdd036a9802964cffe3d1 languageName: node linkType: hard @@ -20340,13 +20261,6 @@ __metadata: languageName: node linkType: hard -"webpack-sources@npm:^3.2.3": - version: 3.2.3 - resolution: "webpack-sources@npm:3.2.3" - checksum: 10c0/2ef63d77c4fad39de4a6db17323d75eb92897b32674e97d76f0a1e87c003882fc038571266ad0ef581ac734cbe20952912aaa26155f1905e96ce251adbb1eb4e - languageName: node - linkType: hard - "webpack-virtual-modules@npm:^0.6.2": version: 0.6.2 resolution: "webpack-virtual-modules@npm:0.6.2" @@ -20371,16 +20285,49 @@ __metadata: languageName: node linkType: hard -"which-boxed-primitive@npm:^1.0.2": +"which-boxed-primitive@npm:^1.1.0, which-boxed-primitive@npm:^1.1.1": + version: 1.1.1 + resolution: "which-boxed-primitive@npm:1.1.1" + dependencies: + is-bigint: "npm:^1.1.0" + is-boolean-object: "npm:^1.2.1" + is-number-object: "npm:^1.1.1" + is-string: "npm:^1.1.1" + is-symbol: "npm:^1.1.1" + checksum: 10c0/aceea8ede3b08dede7dce168f3883323f7c62272b49801716e8332ff750e7ae59a511ae088840bc6874f16c1b7fd296c05c949b0e5b357bfe3c431b98c417abe + languageName: node + linkType: hard + +"which-builtin-type@npm:^1.2.1": + version: 1.2.1 + resolution: "which-builtin-type@npm:1.2.1" + dependencies: + call-bound: "npm:^1.0.2" + function.prototype.name: "npm:^1.1.6" + has-tostringtag: "npm:^1.0.2" + is-async-function: "npm:^2.0.0" + is-date-object: "npm:^1.1.0" + is-finalizationregistry: "npm:^1.1.0" + is-generator-function: "npm:^1.0.10" + is-regex: "npm:^1.2.1" + is-weakref: "npm:^1.0.2" + isarray: "npm:^2.0.5" + which-boxed-primitive: "npm:^1.1.0" + which-collection: "npm:^1.0.2" + which-typed-array: "npm:^1.1.16" + checksum: 10c0/8dcf323c45e5c27887800df42fbe0431d0b66b1163849bb7d46b5a730ad6a96ee8bfe827d078303f825537844ebf20c02459de41239a0a9805e2fcb3cae0d471 + languageName: node + linkType: hard + +"which-collection@npm:^1.0.2": version: 1.0.2 - resolution: "which-boxed-primitive@npm:1.0.2" + resolution: "which-collection@npm:1.0.2" dependencies: - is-bigint: "npm:^1.0.1" - is-boolean-object: "npm:^1.1.0" - is-number-object: "npm:^1.0.4" - is-string: "npm:^1.0.5" - is-symbol: "npm:^1.0.3" - checksum: 10c0/0a62a03c00c91dd4fb1035b2f0733c341d805753b027eebd3a304b9cb70e8ce33e25317add2fe9b5fea6f53a175c0633ae701ff812e604410ddd049777cd435e + is-map: "npm:^2.0.3" + is-set: "npm:^2.0.3" + is-weakmap: "npm:^2.0.2" + is-weakset: "npm:^2.0.3" + checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2 languageName: node linkType: hard @@ -20391,7 +20338,7 @@ __metadata: languageName: node linkType: hard -"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2": +"which-typed-array@npm:^1.1.14": version: 1.1.15 resolution: "which-typed-array@npm:1.1.15" dependencies: @@ -20404,6 +20351,20 @@ __metadata: languageName: node linkType: hard +"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18, which-typed-array@npm:^1.1.2": + version: 1.1.18 + resolution: "which-typed-array@npm:1.1.18" + dependencies: + available-typed-arrays: "npm:^1.0.7" + call-bind: "npm:^1.0.8" + call-bound: "npm:^1.0.3" + for-each: "npm:^0.3.3" + gopd: "npm:^1.2.0" + has-tostringtag: "npm:^1.0.2" + checksum: 10c0/0412f4a91880ca1a2a63056187c2e3de6b129b2b5b6c17bc3729f0f7041047ae48fb7424813e51506addb2c97320003ee18b8c57469d2cde37983ef62126143c + languageName: node + linkType: hard + "which@npm:^1.2.12, which@npm:^1.2.14, which@npm:^1.3.1": version: 1.3.1 resolution: "which@npm:1.3.1" @@ -20437,6 +20398,17 @@ __metadata: languageName: node linkType: hard +"which@npm:^5.0.0": + version: 5.0.0 + resolution: "which@npm:5.0.0" + dependencies: + isexe: "npm:^3.1.1" + bin: + node-which: bin/which.js + checksum: 10c0/e556e4cd8b7dbf5df52408c9a9dd5ac6518c8c5267c8953f5b0564073c66ed5bf9503b14d876d0e9c7844d4db9725fb0dcf45d6e911e17e26ab363dc3965ae7b + languageName: node + linkType: hard + "word-wrap@npm:^1.2.5": version: 1.2.5 resolution: "word-wrap@npm:1.2.5" @@ -20545,8 +20517,8 @@ __metadata: linkType: hard "ws@npm:^8.2.3": - version: 8.18.0 - resolution: "ws@npm:8.18.0" + version: 8.18.1 + resolution: "ws@npm:8.18.1" peerDependencies: bufferutil: ^4.0.1 utf-8-validate: ">=5.0.2" @@ -20555,7 +20527,7 @@ __metadata: optional: true utf-8-validate: optional: true - checksum: 10c0/25eb33aff17edcb90721ed6b0eb250976328533ad3cd1a28a274bd263682e7296a6591ff1436d6cbc50fa67463158b062f9d1122013b361cec99a05f84680e06 + checksum: 10c0/e498965d6938c63058c4310ffb6967f07d4fa06789d3364829028af380d299fe05762961742971c764973dce3d1f6a2633fe8b2d9410c9b52e534b4b882a99fa languageName: node linkType: hard @@ -20659,28 +20631,12 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.2": - version: 1.10.2 - resolution: "yaml@npm:1.10.2" - checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f - languageName: node - linkType: hard - -"yaml@npm:^2.4.2": - version: 2.4.5 - resolution: "yaml@npm:2.4.5" - bin: - yaml: bin.mjs - checksum: 10c0/e1ee78b381e5c710f715cc4082fd10fc82f7f5c92bd6f075771d20559e175616f56abf1c411f545ea0e9e16e4f84a83a50b42764af5f16ec006328ba9476bb31 - languageName: node - linkType: hard - -"yaml@npm:~2.6.1": - version: 2.6.1 - resolution: "yaml@npm:2.6.1" +"yaml@npm:^2.4.2, yaml@npm:^2.7.0": + version: 2.7.0 + resolution: "yaml@npm:2.7.0" bin: yaml: bin.mjs - checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7 + checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9 languageName: node linkType: hard From 0f34bffe94735fad7b30aa38bdb2357131c650fe Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 26 Feb 2025 17:06:10 -0500 Subject: [PATCH 085/103] chore(storybook): bug fix for rendering error --- .storybook/blocks/utilities.js | 11 +++-------- .storybook/main.js | 2 +- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index 220a2acdd27..40c67f4d4cc 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -49,15 +49,10 @@ function parseData(data, { key, color, platform }) { * @param {string} context.context - The theme context set globally for the page * @returns {{ color: string, scale: string, context: string, platform: "desktop"|"mobile" }} - An object containing the calculated theme context */ -function fetchTheme({ color, scale, context } = {}) { +function fetchTheme({ color, scale } = {}) { // Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider const theme = useTheme() ?? {}; - // If the context is not provided, use the theme value or a fallback - if (typeof context !== "string" && typeof theme.context == "string") - context = theme.context; - else if (!context) context = "spectrum"; - // If the color or scale is not provided, use the theme values or a fallback if (typeof color !== "string" && typeof theme.color == "string") color = theme.color; @@ -70,7 +65,7 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - return { color, scale, context, platform, tokens: spectrum }; + return { color, scale, platform, tokens: (spectrum ?? {}) }; } /** @@ -108,7 +103,7 @@ export function fetchTokenSet(key, presets = {}) { } // Fetch the theme if it exists; this data exists if wrapped in a ThemeProvider - const { color, platform, tokens } = fetchTheme(presets); + const { color, platform, tokens = {} } = fetchTheme(presets); // Check the token data for a set of tokens matching the provided regex const tokenSet = Object.keys(tokens) diff --git a/.storybook/main.js b/.storybook/main.js index b954fa71535..31498a3e3ce 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -22,7 +22,7 @@ export default { }, { directory: "./foundations", - files: "*/*.mdx", + files: "**/*.@(stories.js|mdx)", titlePrefix: "Foundations", }, { From c6836fb132effcfb09e4ca6d0d8923564bfe2914 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Wed, 26 Feb 2025 14:56:04 -0800 Subject: [PATCH 086/103] feat(divider): s2 migration (#3557) --- .changeset/slow-eyes-lay.md | 38 +++++++++++++ components/divider/dist/metadata.json | 21 ++++---- components/divider/index.css | 53 +++++++------------ components/divider/stories/divider.stories.js | 28 +++++----- components/divider/stories/divider.test.js | 3 -- components/divider/stories/template.js | 13 +---- 6 files changed, 84 insertions(+), 72 deletions(-) create mode 100644 .changeset/slow-eyes-lay.md diff --git a/.changeset/slow-eyes-lay.md b/.changeset/slow-eyes-lay.md new file mode 100644 index 00000000000..f9db30ddad7 --- /dev/null +++ b/.changeset/slow-eyes-lay.md @@ -0,0 +1,38 @@ +--- +"@spectrum-css/divider": major +--- + +# S2 divider migration + +This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design spec. + +### New properties + +```css +--spectrum-divider-horizontal-minimum-width +--spectrum-divider-vertical-minimum-height +``` + +### New mods + +```css +--mod-divider-inline-minimum-size +--mod-divider-block-minimum-size +``` + +### Removed mods + +```css +--mod-divider-background-color-large-static-black +--mod-divider-background-color-large-static-white +--mod-divider-background-color-medium-static-black +--mod-divider-background-color-medium-static-white +--mod-divider-background-color-small-static-black +--mod-divider-background-color-small-static-white +``` + +### Additions + +This adds new minimum width and height tokens for the divider and the `minDimensionValues` arg has been removed in favor of these tokens and the rules with which they're applied. + +The default size for the Storybook control has been changed to `medium` (the new default size for the component). All sizes are now displayed for the static color variants in the docs. diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index 15fa0043a7b..94ce19f83fd 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -6,20 +6,15 @@ ".spectrum-Divider--sizeS", ".spectrum-Divider--staticBlack", ".spectrum-Divider--staticBlack.spectrum-Divider--sizeL", - ".spectrum-Divider--staticBlack.spectrum-Divider--sizeS", ".spectrum-Divider--staticWhite", ".spectrum-Divider--staticWhite.spectrum-Divider--sizeL", - ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", - ".spectrum-Divider--vertical" + ".spectrum-Divider--vertical", + ".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)" ], "modifiers": [ "--mod-divider-background-color", - "--mod-divider-background-color-large-static-black", - "--mod-divider-background-color-large-static-white", - "--mod-divider-background-color-medium-static-black", - "--mod-divider-background-color-medium-static-white", - "--mod-divider-background-color-small-static-black", - "--mod-divider-background-color-small-static-white", + "--mod-divider-block-minimum-size", + "--mod-divider-inline-minimum-size", "--mod-divider-thickness", "--mod-divider-vertical-align", "--mod-divider-vertical-height", @@ -27,12 +22,14 @@ ], "component": [ "--spectrum-divider-background-color", - "--spectrum-divider-background-color-static-black", - "--spectrum-divider-background-color-static-white", + "--spectrum-divider-block-minimum-size", + "--spectrum-divider-horizontal-minimum-width", + "--spectrum-divider-inline-minimum-size", "--spectrum-divider-thickness", "--spectrum-divider-thickness-large", "--spectrum-divider-thickness-medium", - "--spectrum-divider-thickness-small" + "--spectrum-divider-thickness-small", + "--spectrum-divider-vertical-minimum-height" ], "global": [ "--spectrum-gray-200", diff --git a/components/divider/index.css b/components/divider/index.css index c1095df1c09..b793b6c86a1 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,24 +11,13 @@ * governing permissions and limitations under the License. */ -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Divider { - --highcontrast-divider-background-color: CanvasText; - } -} - .spectrum-Divider { - /* background colors */ --spectrum-divider-background-color: var(--spectrum-gray-200); - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); + + --spectrum-divider-inline-minimum-size: var(--spectrum-divider-horizontal-minimum-width); + --spectrum-divider-block-minimum-size: var(--spectrum-divider-vertical-minimum-height); } .spectrum-Divider--sizeS { @@ -42,33 +31,19 @@ /* static white variant colors */ .spectrum-Divider--staticWhite { - /** @deprecated --mod-divider-background-color-medium-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-white, var(--spectrum-divider-background-color-static-white)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-white, var(--spectrum-divider-background-color-static-white)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-white-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-white, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-white, var(--spectrum-transparent-white-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-white-800); } } /* static black variant colors */ .spectrum-Divider--staticBlack { - /** @deprecated --mod-divider-background-color-medium-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-medium-static-black, var(--spectrum-divider-background-color-static-black)); - - &.spectrum-Divider--sizeS { - /** @deprecated --mod-divider-background-color-small-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-small-static-black, var(--spectrum-divider-background-color-static-black)); - } + --spectrum-divider-background-color: var(--spectrum-transparent-black-200); &.spectrum-Divider--sizeL { - /** @deprecated --mod-divider-background-color-large-static-black, use --mod-divider-background-color instead */ - --mod-divider-background-color: var(--mod-divider-background-color-large-static-black, var(--spectrum-transparent-black-800)); + --spectrum-divider-background-color: var(--spectrum-transparent-black-800); } } @@ -84,12 +59,24 @@ border-radius: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); background-color: var(--highcontrast-divider-background-color, var(--mod-divider-background-color, var(--spectrum-divider-background-color))); + + &:not(&.spectrum-Divider--vertical) { + min-inline-size: var(--mod-divider-inline-minimum-size, var(--spectrum-divider-inline-minimum-size)); + } } /* vertical dividers */ .spectrum-Divider--vertical { inline-size: var(--mod-divider-thickness, var(--spectrum-divider-thickness)); + min-block-size: var(--mod-divider-block-minimum-size, var(--spectrum-divider-block-minimum-size)); margin-block: var(--mod-divider-vertical-margin, 0); block-size: var(--mod-divider-vertical-height, 100%); align-self: var(--mod-divider-vertical-align, flex-start); } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Divider { + --highcontrast-divider-background-color: CanvasText; + } +} diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 306e5c0c453..84f65e83bd4 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -25,13 +25,11 @@ export default { control: "boolean", }, tag: { table: { disable: true } }, - minDimensionValues: {table: { disable: true }}, }, args: { rootClass: "spectrum-Divider", - size: "s", + size: "m", vertical: false, - minDimensionValues: true, }, parameters: { design: { @@ -44,16 +42,14 @@ export default { }; /** - * By default, dividers are horizontal and should be used for separating content vertically. The small divider is the default size. + * By default, dividers are horizontal and should be used for separating content vertically. The medium divider is the default size. */ export const Default = DividerGroup.bind({}); Default.args = {}; // ********* DOCS ONLY ********* // /** - * To divide similar components such as table rows, action button groups, and components within a panel, use the default, small divider. - * - * The medium divider is used for dividing subsections on a page, or to separate different groupings of components such as panels, rails, etc. + * To divide similar components such as table rows, action button groups, and components within a panel, use the default, medium divider. * * Only use the large divider for page titles or section titles. */ @@ -63,9 +59,6 @@ export const Sizing = (args, context) => Sizes({ withBorder: false, ...args, }, context); -Sizing.args = { - minDimensionValues: true, -}; Sizing.tags = ["!dev"]; Sizing.parameters = { chromatic: { disableSnapshot: true }, @@ -84,13 +77,17 @@ VerticalSizing.storyName = "Vertical"; VerticalSizing.tags = ["!dev"]; VerticalSizing.args = { vertical: true, - minDimensionValues: true, }; VerticalSizing.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticWhiteGroup = Default.bind({}); +export const StaticWhiteGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticWhiteGroup.storyName = "Static white"; StaticWhiteGroup.tags = ["!dev"]; StaticWhiteGroup.args = { @@ -100,7 +97,12 @@ StaticWhiteGroup.parameters = { chromatic: { disableSnapshot: true }, }; -export const StaticBlackGroup = Default.bind({}); +export const StaticBlackGroup = (args, context) => Sizes({ + Template, + withHeading: false, + withBorder: false, + ...args, +}, context); StaticBlackGroup.storyName = "Static black"; StaticBlackGroup.tags = ["!dev"]; StaticBlackGroup.args = { diff --git a/components/divider/stories/divider.test.js b/components/divider/stories/divider.test.js index a670bfd6872..c4b708206db 100644 --- a/components/divider/stories/divider.test.js +++ b/components/divider/stories/divider.test.js @@ -7,18 +7,15 @@ export const DividerGroup = Variants({ { testHeading: "Default", vertical: false, - minDimensionValues: true, }, { testHeading: "Non-HR", tag: "div", vertical: false, - minDimensionValues: true, }, { testHeading: "Vertical", vertical: true, - minDimensionValues: true, }, { testHeading: "Static black", diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index cd3d9bc1a64..149a9626674 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -11,7 +11,6 @@ export const Template = ({ tag = "hr", staticColor, vertical = false, - minDimensionValues, customClasses = [], customStyles = {}, } = {}) => { @@ -25,11 +24,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" />`; } @@ -43,11 +38,7 @@ export const Template = ({ typeof staticColor !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} - style=${styleMap({ - "min-inline-size": minDimensionValues && !vertical ? "200px": undefined, - "min-block-size": minDimensionValues && vertical ? "20px": undefined, - ...customStyles, - })} + style=${styleMap({...customStyles})} role="separator" >`; }; From b9f61e42486c3619de95423e0575e10ccc9be167 Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Thu, 27 Feb 2025 10:04:21 -0800 Subject: [PATCH 087/103] feat(colorwheel): s2 migration (#3390) - chore(colorwheel): update property name - chore(colorwheel): wip inset borders - chore(colorwheel): fix lint violations - chore(colorwheel): move mod declarations - chore(colorwheel): drop unused property + update metadata - chore(colorwheel): remove underlying border node + class - chore(colorwheel): remove unused property - fix(colorwheel): add missing mod - fix(colorwheel): comments for updated before spacing/positioning - fix(colorwheel): adopt proper token for border opacity - fix(colorwheel): remove inset border on disabled state - fix(colorwheel): remove global token reference - chore(colorwheel): highlight removed/added mods - chore(colorwheel): update copyright year - chore(colorwheel): add color loupe to default story - fix(colorwheel): correct WHC disabled background color value - chore(colorwheel): update test heading - fix(colorwheel): typos - chore(colorwheel): update token usage - chore(colorwheel): add without loupe test - chore(colorwheel): restore WHC styles - chore(colorwheel): move isWithColorLoupe property - fix(colorwheel): whc disabled background - fix(colorwheel): improve interior border styles - fix(colorwheel): token/classnames in story; remove unnecessary margin - chore(colorwheel): fix inset borders + improve comments - chore(colorwheel): update changeset - chore(colorwheel): add note re --spectrum-color-wheel-color-area-margin token - chore(colorwheel): restore missing mods; naming consistency - chore(colorwheel): add sizing stories - chore(colorwheel): restore comment - chore(colorwheel): inset shorthand - chore(colorwheel): remove unnecessary colorwheel template + story - chore(colorwheel): remove unnecessary custom sizing story from sidebar - chore(colorwheel): add custom sizing test - chore(colorwheel): move comment to docs - fix(colorwheel): after pseudo selector disabled state - fix(colorwheel): remove problematic border width mod - fix(colorwheel): typos + drop sentence --- .changeset/giant-windows-smoke.md | 26 +++++ components/colorwheel/dist/metadata.json | 32 +++--- components/colorwheel/index.css | 105 ++++++++++++------ .../colorwheel/stories/colorwheel.stories.js | 40 ++++++- .../colorwheel/stories/colorwheel.test.js | 13 +++ components/colorwheel/stories/template.js | 28 ++--- 6 files changed, 177 insertions(+), 67 deletions(-) create mode 100644 .changeset/giant-windows-smoke.md diff --git a/.changeset/giant-windows-smoke.md b/.changeset/giant-windows-smoke.md new file mode 100644 index 00000000000..7ae3bdf3b4c --- /dev/null +++ b/.changeset/giant-windows-smoke.md @@ -0,0 +1,26 @@ +--- +"@spectrum-css/colorwheel": major +--- + +# colorwheel S2 migration + +This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function. + +This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel. + +Support is provided for the `240px` and `192px` sizes outlined in the design requirements. + +The `forced-colors` media query has been moved to the bottom of the file consistent with our other component implementations. + +Stories, tests and documentation have been updated to be consistent with these changes. + +The following mods have been removed: + +```css +--mod-colorwheel-height +--mod-colorwheel-width +--mod-colorwheel-min-width +--mod-colorwheel-path-borders +--mod-colorwheel-colorarea-margin +--mod-colorwheel-border-width +``` diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 07c9f09723f..3876b601d64 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -4,8 +4,6 @@ ".spectrum-ColorWheel", ".spectrum-ColorWheel-ColorArea-handle", ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)", - ".spectrum-ColorWheel-border", - ".spectrum-ColorWheel-border.is-disabled", ".spectrum-ColorWheel-colorarea-container", ".spectrum-ColorWheel-handle", ".spectrum-ColorWheel-inner", @@ -13,42 +11,46 @@ ".spectrum-ColorWheel-wheel", ".spectrum-ColorWheel-wheel.is-disabled", ".spectrum-ColorWheel.is-disabled", + ".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before", + ".spectrum-ColorWheel.is-disabled:after", + ".spectrum-ColorWheel.is-disabled:before", ".spectrum-ColorWheel.is-dragged", ".spectrum-ColorWheel.is-focused", + ".spectrum-ColorWheel:after", + ".spectrum-ColorWheel:before", "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" ], "modifiers": [ + "--mod-colorwheel-block-size", "--mod-colorwheel-border-color", - "--mod-colorwheel-border-width", "--mod-colorwheel-colorarea-container-size", - "--mod-colorwheel-colorarea-margin", "--mod-colorwheel-fill-color-disabled", - "--mod-colorwheel-height", - "--mod-colorwheel-min-width", + "--mod-colorwheel-inline-size", + "--mod-colorwheel-min-inline-size", "--mod-colorwheel-path", - "--mod-colorwheel-path-borders", - "--mod-colorwheel-track-width", - "--mod-colorwheel-width" + "--mod-colorwheel-track-width" ], "component": [ - "--spectrum-color-wheel-color-area-margin", + "--spectrum-color-wheel-border-opacity", "--spectrum-color-wheel-minimum-width", "--spectrum-color-wheel-width", + "--spectrum-colorwheel-block-size", "--spectrum-colorwheel-border-color", + "--spectrum-colorwheel-border-color-rgb", + "--spectrum-colorwheel-border-opacity", "--spectrum-colorwheel-border-width", "--spectrum-colorwheel-colorarea-container-size", "--spectrum-colorwheel-fill-color-disabled", - "--spectrum-colorwheel-height", + "--spectrum-colorwheel-inline-size", + "--spectrum-colorwheel-min-inline-size", "--spectrum-colorwheel-path", - "--spectrum-colorwheel-path-borders", - "--spectrum-colorwheel-track-width", - "--spectrum-colorwheel-width" + "--spectrum-colorwheel-track-width" ], "global": [ "--spectrum-border-width-100", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-transparent-black-300" + "--spectrum-gray-1000-rgb" ], "passthroughs": [], "high-contrast": [ diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index fe4b7865baf..3be6579b960 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -1,5 +1,5 @@ /*! - * Copyright 2024 Adobe. All rights reserved. + * Copyright 2025 Adobe. All rights reserved. * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy @@ -11,46 +11,81 @@ * governing permissions and limitations under the License. */ -/* Windows High Contrast Mode */ -@media (forced-colors: active) { - .spectrum-ColorWheel { - --highcontrast-colorwheel-border-color-disabled: GrayText; - --highcontrast-colorwheel-fill-color-disabled: Canvas; +.spectrum-ColorWheel { + --spectrum-colorwheel-inline-size: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width); + --spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width); - forced-color-adjust: none; - } -} + /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ + --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); -.spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity); + --spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); - --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); - --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); + --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); - --spectrum-colorwheel-border-width: var(--mod-colorwheel-border-width, var(--spectrum-border-width-100)); - --spectrum-colorwheel-track-width: var(--mod-colorwheel-track-width, var(--spectrum-color-control-track-width)); + --spectrum-colorwheel-fill-color-disabled: var(--spectrum-disabled-background-color); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ - --_track-width: var(--spectrum-colorwheel-track-width); + --_track-width: var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)); /* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- used with JS in calculating the clip-path paths and colorarea-container-size */ --_border-width: var(--spectrum-colorwheel-border-width); position: relative; display: block; - min-inline-size: var(--mod-colorwheel-min-width, var(--spectrum-color-wheel-minimum-width)); - inline-size: var(--spectrum-colorwheel-width); - block-size: var(--spectrum-colorwheel-height); + min-inline-size: var(--mod-colorwheel-min-inline-size, var(--spectrum-colorwheel-min-inline-size)); + inline-size: var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)); + block-size: var(--mod-colorwheel-block-size, var(--spectrum-colorwheel-block-size)); user-select: none; cursor: default; + /** + * Color wheel exterior border + * - Calcs for `inline-size` and `block-size` subtract 4 times the component's border width + * (to account for the inset width of the exterior border) from the component's width. + */ + &::before { + inline-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width))); + block-size: calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) - calc(4 * var(--spectrum-colorwheel-border-width))); + inset: var(--spectrum-colorwheel-border-width); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } + + /** + * Color wheel interior border + * - Calcs for `inset` 2 times the component's border width from the + * track width (to account for the inset width of the interior border) + */ + &::after { + inset: calc(var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width)) - (calc(2 * var(--spectrum-colorwheel-border-width)))); + content: ""; + position: absolute; + border-width: var(--spectrum-colorwheel-border-width); + border-style: solid; + border-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); + border-radius: 100%; + z-index: 1; + } + &.is-focused { z-index: 2; } &.is-disabled { pointer-events: none; + + &::before, + &::after, + .spectrum-ColorWheel-inner::before { + border-color: var(--highcontrast-colorwheel-border-color-disabled, transparent); + } } &.is-dragged { @@ -77,7 +112,6 @@ display: flex; align-items: center; justify-content: center; - margin: var(--mod-colorwheel-colorarea-margin, var(--spectrum-color-wheel-color-area-margin)); } .spectrum-ColorWheel-slider { @@ -93,7 +127,7 @@ } .spectrum-ColorWheel-handle { - transform: translate(calc(var(--spectrum-colorwheel-width) / 2 - var(--spectrum-colorwheel-track-width) / 2), 0); + transform: translate(calc(var(--mod-colorwheel-inline-size, var(--spectrum-colorwheel-inline-size)) / 2 - var(--mod-colorwheel-track-width, var(--mod-colorwheel-track-width, var(--spectrum-colorwheel-track-width))) / 2), 0); inset-block-start: 50%; inset-inline: 50%; } @@ -107,19 +141,6 @@ } } -/* a clip-path set border-width wider than than spectrum-colorwheel-wheel to create the appreance of a border */ -.spectrum-ColorWheel-border { - position: relative; - background-color: var(--mod-colorwheel-border-color, var(--spectrum-colorwheel-border-color)); - inline-size: var(--spectrum-colorwheel-width); - block-size: var(--spectrum-colorwheel-height); - clip-path: path(evenodd, var(--mod-colorwheel-path-borders, var(--spectrum-colorwheel-path-borders))); - - &.is-disabled { - background-color: var(--highcontrast-colorwheel-border-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); - } -} - .spectrum-ColorWheel-wheel { position: absolute; background: conic-gradient(from 90deg, red, rgb(255 128 0), rgb(255 255 0), rgb(128 255 0), rgb(0 255 0), rgb(0 255 128), rgb(0 255 255), rgb(0 128 255), rgb(0 0 255), rgb(128 0 255), rgb(255 0 255), rgb(255 0 128), red); @@ -129,6 +150,16 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled)); + background: var(--highcontrast-colorwheel-fill-color-disabled, var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))); + } +} + +/* Windows High Contrast Mode */ +@media (forced-colors: active) { + .spectrum-ColorWheel { + --highcontrast-colorwheel-border-color-disabled: GrayText; + --highcontrast-colorwheel-fill-color-disabled: Canvas; + + forced-color-adjust: none; } } diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 15bba48a20a..c8332ea4ceb 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -23,7 +23,16 @@ export default { if: { arg: "isDisabled", truthy: false }, }, isWithColorArea: { - name: "With Color Area", + name: "With color area", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "State", + }, + control: "boolean", + }, + isWithColorLoupe: { + name: "With color loupe", type: { name: "boolean" }, table: { type: { summary: "boolean" }, @@ -44,6 +53,7 @@ export default { isDisabled: false, isFocused: false, isWithColorArea: false, + isWithColorLoupe: true, selectedColor: "rgba(255, 0, 0, 50%)", }, parameters: { @@ -59,6 +69,30 @@ export default { export const Default = ColorWheelGroup.bind({}); Default.args = {}; +/** + * By default, the color wheel has both a fixed size and a minimum size. The color wheel may be displayed at custom sizes by setting some of its modifiable custom properties. Below, the wheel is displayed at `300px` with the following mod values: + * ``` + * "--mod-colorwheel-inline-size": "300px", + * "--mod-colorwheel-block-size": "300px", + * "--mod-colorwheel-track-width": "30px", + * "--mod-colorwheel-path": '"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0"', + * ``` + */ +export const CustomSizing = Template.bind({}); +CustomSizing.tags = ["!dev"]; +CustomSizing.args = { + customStyles: { + "--mod-colorwheel-inline-size": "300px", + "--mod-colorwheel-block-size": "300px", + "--mod-colorwheel-track-width": "30px", + "--mod-colorwheel-path": "\"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0\"", + } +}; +CustomSizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + + // ********* DOCS ONLY ********* // export const Disabled = Template.bind({}); Disabled.tags = ["!dev"]; @@ -76,7 +110,9 @@ Disabled.parameters = { * * The `.spectrum-colorwheel-colorarea-container-size` is hard coded to position the color area within the color wheel using `.spectrum-color-wheel-color-area-margin`. Implementations using JS can calculate the container size with `Math.sqrt(2 * R * R)`, where `R` is the inner radius as calculated for the clip paths. * - * `.spectrum-colorwheel-path`, `.spectrum-colorwheel-path-borders` and `.spectrum-colorwheel-colorarea-container` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider: +* Implementations should factor in the value of `--spectrum-color-wheel-color-area-margin`, as illustrated in the token specs, when calculating the size of the color area relative to the color wheel that contains it. + * + * `--spectrum-colorwheel-path` and `--spectrum-colorwheel-colorarea-container-size` are hard coded in CSS, and include token values as custom CSS variables so they can be accessed with JS. To use and calculate these values, implementations should consider: * ``` * const wheel = document.querySelector(".spectrum-ColorWheel-wheel") * getComputedStyle(wheel).getPropertyValue('--track-width') diff --git a/components/colorwheel/stories/colorwheel.test.js b/components/colorwheel/stories/colorwheel.test.js index 7271a8d0808..9bea3ef333c 100644 --- a/components/colorwheel/stories/colorwheel.test.js +++ b/components/colorwheel/stories/colorwheel.test.js @@ -11,6 +11,19 @@ export const ColorWheelGroup = Variants({ testHeading: "With color area", isWithColorArea: true, }, + { + testHeading: "Without color loupe", + isWithColorLoupe: false, + }, + { + testHeading: "Custom sizing", + customStyles: { + "--mod-colorwheel-inline-size": "300px", + "--mod-colorwheel-block-size": "300px", + "--mod-colorwheel-track-width": "30px", + "--mod-colorwheel-path": "\"M 149 149 m -149 0 a 149 149 0 1 0 298 0 a 149 149 0 1 0 -298 0 M 149 149 m -121 0 a 121 121 0 1 0 242 0 a 121 121 0 1 0 -242 0\"", + }, + } ], stateData: [ { diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 1d02f5e7823..fe46f3ef157 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -2,6 +2,7 @@ import { Template as ColorArea } from "@spectrum-css/colorarea/stories/template. import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; @@ -12,16 +13,21 @@ export const Template = ({ isDisabled = false, isFocused = false, isWithColorArea = false, + isWithColorLoupe = true, colorHandleStyle = {}, selectedColor = "rgba(255, 0, 0, 50%)", + customStyles = {}, } = {}, context = {}) => { return html` -
({ ...a, [c]: true }), {}), - })}> +
({ ...a, [c]: true }), {}), + })} + style=${styleMap(customStyles)} + >
${when(isWithColorArea, () => html` @@ -37,20 +43,16 @@ export const Template = ({
-
-
+ })}>
${ColorHandle({ isDisabled, isFocused, customClasses: [`${rootClass}-handle`], selectedColor, customStyles: colorHandleStyle, + isWithColorLoupe, }, context)}
From f229c2cb334b14307eea98c2a1e065ef8e7dd979 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 27 Feb 2025 18:32:29 +0000 Subject: [PATCH 088/103] chore: release (next) (#3583) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 7 +- components/actionbar/package.json | 2 +- components/actionmenu/package.json | 4 +- components/alertbanner/CHANGELOG.md | 7 ++ components/alertbanner/package.json | 6 +- components/alertdialog/CHANGELOG.md | 7 ++ components/alertdialog/package.json | 6 +- components/coachmark/package.json | 4 +- components/colorwheel/CHANGELOG.md | 27 ++++++++ components/colorwheel/package.json | 2 +- components/combobox/package.json | 4 +- components/contextualhelp/package.json | 2 +- components/datepicker/package.json | 2 +- components/dialog/CHANGELOG.md | 7 ++ components/dialog/package.json | 6 +- components/divider/CHANGELOG.md | 39 +++++++++++ components/divider/package.json | 2 +- components/menu/CHANGELOG.md | 7 ++ components/menu/package.json | 8 +-- components/picker/package.json | 4 +- components/pickerbutton/package.json | 4 +- components/popover/CHANGELOG.md | 7 ++ components/popover/package.json | 12 ++-- components/tabs/package.json | 2 +- components/tray/CHANGELOG.md | 7 ++ components/tray/package.json | 8 +-- tools/bundle/package.json | 16 ++--- yarn.lock | 94 +++++++++++++------------- 28 files changed, 204 insertions(+), 99 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 07277334bed..6373c998e4b 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -102,14 +102,12 @@ "beige-dragons-tickle", "chilly-peaches-sniff", "clean-oranges-smell", - "early-actors-buy", - "eleven-cooks-destroy", "few-doors-smile", - "few-eels-retire", "flat-snails-admire", "fresh-crabs-deliver", "fresh-seahorses-join", "friendly-dolls-raise", + "giant-windows-smoke", "hot-books-fail", "itchy-kids-travel", "itchy-shrimps-help", @@ -119,16 +117,15 @@ "modern-chairs-sit", "nine-kings-repair", "olive-tools-hang", - "pretty-parents-drum", "proud-jokes-rule", "rotten-meals-share", "serious-clouds-jam", + "slow-eyes-lay", "small-impalas-search", "spotty-onions-study", "strange-glasses-allow", "tame-bobcats-beam", "tame-knives-train", - "tame-wasps-shake", "twenty-ravens-divide", "twenty-tables-know" ] diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 2c198df4eec..2a8a23b37dc 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -52,7 +52,7 @@ "@spectrum-css/actiongroup": "7.0.0-next.0", "@spectrum-css/closebutton": "7.0.0-next.0", "@spectrum-css/fieldlabel": "11.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/actionmenu/package.json b/components/actionmenu/package.json index c12c352848a..81997bf0c9b 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -34,8 +34,8 @@ "devDependencies": { "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/menu": "10.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md index 6abad6217a3..e523efc21e6 100644 --- a/components/alertbanner/CHANGELOG.md +++ b/components/alertbanner/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 4.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + 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/alertbanner/package.json b/components/alertbanner/package.json index 594f529cfca..0f0a805da11 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertbanner", - "version": "4.0.0-next.0", + "version": "4.0.0-next.1", "description": "The Spectrum CSS alertbanner component", "license": "Apache-2.0", "author": "Adobe", @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/button": ">=15.0.0-next.0", "@spectrum-css/closebutton": ">=7.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -51,7 +51,7 @@ "devDependencies": { "@spectrum-css/button": "15.0.0-next.0", "@spectrum-css/closebutton": "7.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md index 2e29d4d8c5d..82717913f05 100644 --- a/components/alertdialog/CHANGELOG.md +++ b/components/alertdialog/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 5.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + 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/alertdialog/package.json b/components/alertdialog/package.json index 7c3cf8f1f6b..91aea1a450f 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertdialog", - "version": "5.0.0-next.0", + "version": "5.0.0-next.1", "description": "The Spectrum CSS alertdialog component", "license": "Apache-2.0", "author": "Adobe", @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/buttongroup": ">=10.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", @@ -54,7 +54,7 @@ }, "devDependencies": { "@spectrum-css/buttongroup": "10.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 4d0caa19785..89aaf16e2ed 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -61,8 +61,8 @@ "@spectrum-css/actionmenu": "8.0.0-next.0", "@spectrum-css/button": "15.0.0-next.0", "@spectrum-css/buttongroup": "10.0.0-next.0", - "@spectrum-css/menu": "10.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/colorwheel/CHANGELOG.md b/components/colorwheel/CHANGELOG.md index 2a0a662cfc9..b74d55e2fec 100644 --- a/components/colorwheel/CHANGELOG.md +++ b/components/colorwheel/CHANGELOG.md @@ -1,5 +1,32 @@ # Change log +## 7.0.0-next.0 + +### Major Changes + +- [#3390](https://github.com/adobe/spectrum-css/pull/3390) [`b9f61e4`](https://github.com/adobe/spectrum-css/commit/b9f61e42486c3619de95423e0575e10ccc9be167) Thanks [@cdransf](https://github.com/cdransf)! - # colorwheel S2 migration + + This change migrates the colorwheel component to S2. It adds the `--spectrum-colorwheel-border-color-rgb` and `--spectrum-colorwheel-border-opacity` custom properties. It updates `--spectrum-colorwheel-border-color` to leverage these tokens in an `rgba(...)` function. + + This removes the `spectrum-ColorWheel-border` and associated template DOM node as the outside/underlying border are no longer present in the S2 designs. `::before` and `::after` pseudo elements are now used to draw the exterior and interior borders that overlay the exterior and interior edges of the color wheel. + + Support is provided for the `240px` and `192px` sizes outlined in the design requirements. + + The `forced-colors` media query has been moved to the bottom of the file consistent with our other component implementations. + + Stories, tests and documentation have been updated to be consistent with these changes. + + The following mods have been removed: + + ```css + --mod-colorwheel-height + --mod-colorwheel-width + --mod-colorwheel-min-width + --mod-colorwheel-path-borders + --mod-colorwheel-colorarea-margin + --mod-colorwheel-border-width + ``` + 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/colorwheel/package.json b/components/colorwheel/package.json index 4f11e9e3bd4..44e9eca628c 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorwheel", - "version": "6.1.0", + "version": "7.0.0-next.0", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/combobox/package.json b/components/combobox/package.json index 1ad59ff364a..6c59c3c84e4 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -53,9 +53,9 @@ } }, "devDependencies": { - "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/pickerbutton": "7.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 5c53c2b4741..2b5dc22b25c 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/link": "7.1.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/datepicker/package.json b/components/datepicker/package.json index c5f137d512e..93763a55bc0 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -51,7 +51,7 @@ "devDependencies": { "@spectrum-css/calendar": "8.0.0-next.0", "@spectrum-css/pickerbutton": "7.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/textfield": "9.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md index f7818ee0e9e..8fafe1d7170 100644 --- a/components/dialog/CHANGELOG.md +++ b/components/dialog/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 13.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + ## 13.0.0-next.0 ### Patch Changes diff --git a/components/dialog/package.json b/components/dialog/package.json index 326aedda3e9..ef70a6c4c59 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dialog", - "version": "13.0.0-next.0", + "version": "13.0.0-next.1", "description": "The Spectrum CSS dialog component", "license": "Apache-2.0", "author": "Adobe", @@ -28,7 +28,7 @@ "@spectrum-css/button": ">=15.0.0-next.0", "@spectrum-css/buttongroup": ">=10.0.0-next.0", "@spectrum-css/closebutton": ">=7.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" @@ -60,7 +60,7 @@ "@spectrum-css/button": "15.0.0-next.0", "@spectrum-css/buttongroup": "10.0.0-next.0", "@spectrum-css/closebutton": "7.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/typography": "8.1.0", diff --git a/components/divider/CHANGELOG.md b/components/divider/CHANGELOG.md index 99121a052a4..967f2e52a20 100644 --- a/components/divider/CHANGELOG.md +++ b/components/divider/CHANGELOG.md @@ -1,5 +1,44 @@ # Change log +## 6.0.0-next.0 + +### Major Changes + +- [#3557](https://github.com/adobe/spectrum-css/pull/3557) [`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914) Thanks [@cdransf](https://github.com/cdransf)! - # S2 divider migration + + This migrates the `divider` component to S2. Custom properties have been remapped and updated per the design spec. + + ### New properties + + ```css + --spectrum-divider-horizontal-minimum-width + --spectrum-divider-vertical-minimum-height + ``` + + ### New mods + + ```css + --mod-divider-inline-minimum-size + --mod-divider-block-minimum-size + ``` + + ### Removed mods + + ```css + --mod-divider-background-color-large-static-black + --mod-divider-background-color-large-static-white + --mod-divider-background-color-medium-static-black + --mod-divider-background-color-medium-static-white + --mod-divider-background-color-small-static-black + --mod-divider-background-color-small-static-white + ``` + + ### Additions + + This adds new minimum width and height tokens for the divider and the `minDimensionValues` arg has been removed in favor of these tokens and the rules with which they're applied. + + The default size for the Storybook control has been changed to `medium` (the new default size for the component). All sizes are now displayed for the static color variants in the docs. + 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/divider/package.json b/components/divider/package.json index 00e5d767fad..6d35daa5477 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/divider", - "version": "5.1.0", + "version": "6.0.0-next.0", "description": "The Spectrum CSS divider component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/menu/CHANGELOG.md b/components/menu/CHANGELOG.md index 35917006bdd..0d6ca6ec95d 100644 --- a/components/menu/CHANGELOG.md +++ b/components/menu/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 10.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + 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/menu/package.json b/components/menu/package.json index de8a7a4c578..ee8739eb280 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/menu", - "version": "10.0.0-next.0", + "version": "10.0.0-next.1", "description": "The Spectrum CSS menu component", "license": "Apache-2.0", "author": "Adobe", @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/checkbox": ">=11.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/switch": ">=6.0.0 <7.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", @@ -54,11 +54,11 @@ }, "devDependencies": { "@spectrum-css/checkbox": "11.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/switch": "6.1.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tray": "6.0.0-next.0" + "@spectrum-css/tray": "6.0.0-next.1" }, "keywords": [ "design-system", diff --git a/components/picker/package.json b/components/picker/package.json index a0af0023813..accba5c7e54 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -56,8 +56,8 @@ "@spectrum-css/commons": "11.0.0", "@spectrum-css/helptext": "8.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/menu": "10.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 05f7b5f0132..cf60aeb598e 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -46,8 +46,8 @@ }, "devDependencies": { "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/menu": "10.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/popover/CHANGELOG.md b/components/popover/CHANGELOG.md index 13c8523965a..b769f781e14 100644 --- a/components/popover/CHANGELOG.md +++ b/components/popover/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 9.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + 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/popover/package.json b/components/popover/package.json index e218be60bb9..8cd15bc655f 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/popover", - "version": "9.0.0-next.0", + "version": "9.0.0-next.1", "description": "The Spectrum CSS popover component", "license": "Apache-2.0", "author": "Adobe", @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/alertdialog": ">=5.0.0-next.0", "@spectrum-css/dialog": ">=13.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/menu": ">=10.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -49,11 +49,11 @@ } }, "devDependencies": { - "@spectrum-css/alertdialog": "5.0.0-next.0", + "@spectrum-css/alertdialog": "5.0.0-next.1", "@spectrum-css/commons": "11.0.0", - "@spectrum-css/dialog": "13.0.0-next.0", - "@spectrum-css/divider": "5.1.0", - "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/tabs/package.json b/components/tabs/package.json index d2784fdb34e..f9b2025cbdd 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -46,7 +46,7 @@ }, "devDependencies": { "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/picker": "10.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/tray/CHANGELOG.md b/components/tray/CHANGELOG.md index ccf3d3e74e0..e1a1f154624 100644 --- a/components/tray/CHANGELOG.md +++ b/components/tray/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 6.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c6836fb`](https://github.com/adobe/spectrum-css/commit/c6836fb132effcfb09e4ca6d0d8923564bfe2914)]: + - @spectrum-css/divider@6.0.0-next.0 + 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/tray/package.json b/components/tray/package.json index d95e6883062..fb27c90c695 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tray", - "version": "6.0.0-next.0", + "version": "6.0.0-next.1", "description": "The Spectrum CSS tray component", "license": "Apache-2.0", "author": "Adobe", @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/button": ">=15.0.0-next.0", "@spectrum-css/dialog": ">=13.0.0-next.0", - "@spectrum-css/divider": ">=5.0.0 <6.0.0", + "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", "@spectrum-css/modal": ">=7.0.0 <8.0.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -54,8 +54,8 @@ }, "devDependencies": { "@spectrum-css/button": "15.0.0-next.0", - "@spectrum-css/dialog": "13.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/modal": "7.1.0", "@spectrum-css/tokens": "16.0.1" diff --git a/tools/bundle/package.json b/tools/bundle/package.json index ad23b382ab5..52de8f90005 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -35,8 +35,8 @@ "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/actiongroup": "7.0.0-next.0", "@spectrum-css/actionmenu": "8.0.0-next.0", - "@spectrum-css/alertbanner": "4.0.0-next.0", - "@spectrum-css/alertdialog": "5.0.0-next.0", + "@spectrum-css/alertbanner": "4.0.0-next.1", + "@spectrum-css/alertdialog": "5.0.0-next.1", "@spectrum-css/asset": "7.1.0", "@spectrum-css/assetcard": "6.0.0-next.0", "@spectrum-css/assetlist": "9.0.0-next.0", @@ -56,14 +56,14 @@ "@spectrum-css/colorhandle": "10.1.0", "@spectrum-css/colorloupe": "7.1.0", "@spectrum-css/colorslider": "8.1.0", - "@spectrum-css/colorwheel": "6.1.0", + "@spectrum-css/colorwheel": "7.0.0-next.0", "@spectrum-css/combobox": "5.0.0-next.0", "@spectrum-css/commons": "11.0.0", "@spectrum-css/contextualhelp": "6.0.0-next.0", "@spectrum-css/datepicker": "5.0.0-next.0", "@spectrum-css/dial": "5.1.0", - "@spectrum-css/dialog": "13.0.0-next.0", - "@spectrum-css/divider": "5.1.0", + "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/dropindicator": "8.0.0-next.0", "@spectrum-css/dropzone": "9.0.0-next.0", "@spectrum-css/fieldgroup": "8.0.0-next.0", @@ -77,7 +77,7 @@ "@spectrum-css/inlinealert": "11.0.0-next.0", "@spectrum-css/link": "7.1.0", "@spectrum-css/logicbutton": "6.1.0", - "@spectrum-css/menu": "10.0.0-next.0", + "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/meter": "2.0.0-next.0", "@spectrum-css/miller": "9.0.0-next.0", "@spectrum-css/modal": "7.1.0", @@ -86,7 +86,7 @@ "@spectrum-css/pagination": "11.0.0-next.0", "@spectrum-css/picker": "10.0.0-next.0", "@spectrum-css/pickerbutton": "7.0.0-next.0", - "@spectrum-css/popover": "9.0.0-next.0", + "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/progressbar": "7.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", "@spectrum-css/radio": "11.0.0-next.0", @@ -110,7 +110,7 @@ "@spectrum-css/toast": "12.0.0-next.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/tooltip": "8.0.0-next.0", - "@spectrum-css/tray": "6.0.0-next.0", + "@spectrum-css/tray": "6.0.0-next.1", "@spectrum-css/treeview": "13.0.0-next.0", "@spectrum-css/typography": "8.1.0", "@spectrum-css/underlay": "6.1.0", diff --git a/yarn.lock b/yarn.lock index 6a7acc1a7c0..c6597c7711f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3782,7 +3782,7 @@ __metadata: "@spectrum-css/actiongroup": "npm:7.0.0-next.0" "@spectrum-css/closebutton": "npm:7.0.0-next.0" "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actiongroup": ">=7.0.0-next.0" @@ -3845,8 +3845,8 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=8.0.0-next.0" @@ -3868,19 +3868,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertbanner@npm:4.0.0-next.0, @spectrum-css/alertbanner@workspace:components/alertbanner": +"@spectrum-css/alertbanner@npm:4.0.0-next.1, @spectrum-css/alertbanner@workspace:components/alertbanner": version: 0.0.0-use.local resolution: "@spectrum-css/alertbanner@workspace:components/alertbanner" dependencies: "@spectrum-css/button": "npm:15.0.0-next.0" "@spectrum-css/closebutton": "npm:7.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=15.0.0-next.0" "@spectrum-css/closebutton": ">=7.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -3897,19 +3897,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertdialog@npm:5.0.0-next.0, @spectrum-css/alertdialog@workspace:components/alertdialog": +"@spectrum-css/alertdialog@npm:5.0.0-next.1, @spectrum-css/alertdialog@workspace:components/alertdialog": version: 0.0.0-use.local resolution: "@spectrum-css/alertdialog@workspace:components/alertdialog" dependencies: "@spectrum-css/buttongroup": "npm:10.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=10.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4041,8 +4041,8 @@ __metadata: "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/actiongroup": "npm:7.0.0-next.0" "@spectrum-css/actionmenu": "npm:8.0.0-next.0" - "@spectrum-css/alertbanner": "npm:4.0.0-next.0" - "@spectrum-css/alertdialog": "npm:5.0.0-next.0" + "@spectrum-css/alertbanner": "npm:4.0.0-next.1" + "@spectrum-css/alertdialog": "npm:5.0.0-next.1" "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/assetcard": "npm:6.0.0-next.0" "@spectrum-css/assetlist": "npm:9.0.0-next.0" @@ -4062,14 +4062,14 @@ __metadata: "@spectrum-css/colorhandle": "npm:10.1.0" "@spectrum-css/colorloupe": "npm:7.1.0" "@spectrum-css/colorslider": "npm:8.1.0" - "@spectrum-css/colorwheel": "npm:6.1.0" + "@spectrum-css/colorwheel": "npm:7.0.0-next.0" "@spectrum-css/combobox": "npm:5.0.0-next.0" "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/contextualhelp": "npm:6.0.0-next.0" "@spectrum-css/datepicker": "npm:5.0.0-next.0" "@spectrum-css/dial": "npm:5.1.0" - "@spectrum-css/dialog": "npm:13.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/dropindicator": "npm:8.0.0-next.0" "@spectrum-css/dropzone": "npm:9.0.0-next.0" "@spectrum-css/fieldgroup": "npm:8.0.0-next.0" @@ -4083,7 +4083,7 @@ __metadata: "@spectrum-css/inlinealert": "npm:11.0.0-next.0" "@spectrum-css/link": "npm:7.1.0" "@spectrum-css/logicbutton": "npm:6.1.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/meter": "npm:2.0.0-next.0" "@spectrum-css/miller": "npm:9.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" @@ -4092,7 +4092,7 @@ __metadata: "@spectrum-css/pagination": "npm:11.0.0-next.0" "@spectrum-css/picker": "npm:10.0.0-next.0" "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/progressbar": "npm:7.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/radio": "npm:11.0.0-next.0" @@ -4116,7 +4116,7 @@ __metadata: "@spectrum-css/toast": "npm:12.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/tooltip": "npm:8.0.0-next.0" - "@spectrum-css/tray": "npm:6.0.0-next.0" + "@spectrum-css/tray": "npm:6.0.0-next.1" "@spectrum-css/treeview": "npm:13.0.0-next.0" "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" @@ -4292,8 +4292,8 @@ __metadata: "@spectrum-css/actionmenu": "npm:8.0.0-next.0" "@spectrum-css/button": "npm:15.0.0-next.0" "@spectrum-css/buttongroup": "npm:10.0.0-next.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=8.0.0-next.0" @@ -4393,7 +4393,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/colorwheel@npm:6.1.0, @spectrum-css/colorwheel@workspace:components/colorwheel": +"@spectrum-css/colorwheel@npm:7.0.0-next.0, @spectrum-css/colorwheel@workspace:components/colorwheel": version: 0.0.0-use.local resolution: "@spectrum-css/colorwheel@workspace:components/colorwheel" dependencies: @@ -4422,9 +4422,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/combobox@workspace:components/combobox" dependencies: - "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" @@ -4467,7 +4467,7 @@ __metadata: dependencies: "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/link": "npm:7.1.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=8.0.0-next.0" @@ -4492,7 +4492,7 @@ __metadata: dependencies: "@spectrum-css/calendar": "npm:8.0.0-next.0" "@spectrum-css/pickerbutton": "npm:7.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/textfield": "npm:9.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -4528,14 +4528,14 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dialog@npm:13.0.0-next.0, @spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@npm:13.0.0-next.1, @spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: "@spectrum-css/button": "npm:15.0.0-next.0" "@spectrum-css/buttongroup": "npm:10.0.0-next.0" "@spectrum-css/closebutton": "npm:7.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" @@ -4544,7 +4544,7 @@ __metadata: "@spectrum-css/button": ">=15.0.0-next.0" "@spectrum-css/buttongroup": ">=10.0.0-next.0" "@spectrum-css/closebutton": ">=7.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" @@ -4566,7 +4566,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/divider@npm:5.1.0, @spectrum-css/divider@workspace:components/divider": +"@spectrum-css/divider@npm:6.0.0-next.0, @spectrum-css/divider@workspace:components/divider": version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" dependencies: @@ -4825,19 +4825,19 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/menu@npm:10.0.0-next.0, @spectrum-css/menu@workspace:components/menu": +"@spectrum-css/menu@npm:10.0.0-next.1, @spectrum-css/menu@workspace:components/menu": version: 0.0.0-use.local resolution: "@spectrum-css/menu@workspace:components/menu" dependencies: "@spectrum-css/checkbox": "npm:11.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/switch": "npm:6.1.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tray": "npm:6.0.0-next.0" + "@spectrum-css/tray": "npm:6.0.0-next.1" peerDependencies: "@spectrum-css/checkbox": ">=11.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/switch": ">=6.0.0 <7.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" @@ -4975,8 +4975,8 @@ __metadata: "@spectrum-css/commons": "npm:11.0.0" "@spectrum-css/helptext": "npm:8.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/progresscircle": "npm:5.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -5007,8 +5007,8 @@ __metadata: resolution: "@spectrum-css/pickerbutton@workspace:components/pickerbutton" dependencies: "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" - "@spectrum-css/popover": "npm:9.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" + "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/icon": ">=10.0.0-next.0" @@ -5027,20 +5027,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/popover@npm:9.0.0-next.0, @spectrum-css/popover@workspace:components/popover": +"@spectrum-css/popover@npm:9.0.0-next.1, @spectrum-css/popover@workspace:components/popover": version: 0.0.0-use.local resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: - "@spectrum-css/alertdialog": "npm:5.0.0-next.0" + "@spectrum-css/alertdialog": "npm:5.0.0-next.1" "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/dialog": "npm:13.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/divider": "npm:6.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/alertdialog": ">=5.0.0-next.0" "@spectrum-css/dialog": ">=13.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/menu": ">=10.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -5380,7 +5380,7 @@ __metadata: resolution: "@spectrum-css/tabs@workspace:components/tabs" dependencies: "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/menu": "npm:10.0.0-next.0" + "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/picker": "npm:10.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: @@ -5534,20 +5534,20 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tray@npm:6.0.0-next.0, @spectrum-css/tray@workspace:components/tray": +"@spectrum-css/tray@npm:6.0.0-next.1, @spectrum-css/tray@workspace:components/tray": version: 0.0.0-use.local resolution: "@spectrum-css/tray@workspace:components/tray" dependencies: "@spectrum-css/button": "npm:15.0.0-next.0" - "@spectrum-css/dialog": "npm:13.0.0-next.0" - "@spectrum-css/divider": "npm:5.1.0" + "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/modal": "npm:7.1.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=15.0.0-next.0" "@spectrum-css/dialog": ">=13.0.0-next.0" - "@spectrum-css/divider": ">=5.0.0 <6.0.0" + "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" "@spectrum-css/modal": ">=7.0.0 <8.0.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" From 9ee29fdc75765e3df9fa7a4224ab2f3e7def3dbb Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Tue, 4 Mar 2025 07:20:34 -0800 Subject: [PATCH 089/103] fix(readme): corrects path to css illutration png in readme (#3596) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dab6d831ec3..fd3c0dd4b76 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@

Spectrum CSS

A CSS-implementation of the Spectrum design language

- + ## Features From 023efe3ea01909a26e1a41465b78d22854b69282 Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Tue, 4 Mar 2025 12:25:06 -0500 Subject: [PATCH 090/103] feat: simplify fallback of ui icon size numbers (#3571) * feat(icon): simplify fallback of ui icon size numbers If a UI icon was not provided with its full name including sizing number (e.g. Dash100), the template would try and guess at a sizing number based on t-shirt size. This has been extracted out to a utility function and simplified, as this had gotten too complex, with too many exceptions. It no longer strips out any sizing numbers that were specifically provided. This also improves the logging of missing icons. * feat(icon): display placeholder icon when workflow icon is missing Display the design recommended "Circle" icon as a placeholder icon when the workflow icon cannot be found.This helps with identifying missing icons in VRTs, so the icon continues to take up the space it should, rather than disappearing entirely in some cases. This change also updates the templates of a few components to make sure they are rendering the correct UI icon: - fix(menu): update ui icon sizes used in template - docs(button): replace deprecated ui icon size in test - feat(swatch): use spec defined ui icon size number for dash - fix: icon set arg was missing a value in a few places - fix(actionbutton): define specific sizing for corner triangle - fix(menu): add missing context to menu templates to fix warning --- components/actionbutton/stories/template.js | 8 +- components/button/stories/button.test.js | 4 +- components/icon/stories/icon.mdx | 8 ++ components/icon/stories/icon.stories.js | 17 +++ components/icon/stories/template.js | 142 ++++++-------------- components/icon/stories/utilities.js | 24 ++++ components/menu/stories/template.js | 53 +++----- components/search/stories/template.js | 1 + components/swatch/stories/template.js | 7 +- components/textfield/stories/template.js | 2 +- components/treeview/stories/template.js | 2 +- 11 files changed, 127 insertions(+), 141 deletions(-) diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 9c1fd980055..3b3cb8930c2 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -109,7 +109,13 @@ export const Template = ({ ${when(hasPopup && hasPopup !== "false", () => Icon({ size, - iconName: "CornerTriangle", + iconName: "CornerTriangle" + ({ + xs: "75", + s: "75", + m: "100", + l: "200", + xl: "300", + }[size] || "100"), setName: "ui", customClasses: [`${rootClass}-hold`], }, context) diff --git a/components/button/stories/button.test.js b/components/button/stories/button.test.js index bdc6ee37996..ad83defdf1e 100644 --- a/components/button/stories/button.test.js +++ b/components/button/stories/button.test.js @@ -60,8 +60,8 @@ const ButtonIconGroup = (args, context) => Container({ testHeading: "UI icon (larger)", content: Template({ ...args, - // UI icon that is larger than workflow sizing: - iconName: "ArrowDown600", + // Largest UI icon from UI icon set: + iconName: "Cross600", iconSet: "ui", }, context), }, diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx index de5d3711be7..8aa57f0b338 100644 --- a/components/icon/stories/icon.mdx +++ b/components/icon/stories/icon.mdx @@ -67,6 +67,14 @@ with: +## Missing workflow icon placeholder + +In Storybook documentation, if a workflow icon name does not exist in the set, the placeholder "Circle" icon +will be shown. Missing ui icons will render nothing. The following example purposefully uses an +icon name that does not exist to demonstrate this behavior. + + + ## Repositories for the icon SVG files The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM: diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index d418250a69d..8fefeb451e1 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -193,3 +193,20 @@ UIArrows.tags = ["!dev"]; UIArrows.parameters = { chromatic: { disableSnapshot: true }, }; + +/** + * In Storybook documentation, if a workflow icon name does not exist in the set, the + * placeholder "Circle" icon will be shown. Missing ui icons will render + * nothing. The following example purposefully uses an icon name that does + * not exist to demonstrate this behavior. + */ +export const MissingWorkflowIcon = Default.bind({}); +MissingWorkflowIcon.storyName = "Missing workflow icon placeholder"; +MissingWorkflowIcon.tags = ["!dev"]; +MissingWorkflowIcon.args = { + setName: "workflow", + iconName: "ThisIconNameDoesNotExist", +}; +MissingWorkflowIcon.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js index b6deef70de5..75826ee6d40 100644 --- a/components/icon/stories/template.js +++ b/components/icon/stories/template.js @@ -6,7 +6,7 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { unsafeSVG } from "lit/directives/unsafe-svg.js"; import { when } from "lit/directives/when.js"; -import { getSpriteSheetName, uiIconsCleaned, uiIconsWithDirections, workflowIconsCleaned } from "./utilities.js"; +import { appendUiIconDefaultSizing, getSpriteSheetName, uiIconsWithDirections, workflowIconsCleaned } from "./utilities.js"; import "../index.css"; @@ -33,7 +33,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-Icon", size = "m", - setName, + setName = "workflow", iconName, uiIconName, fill, @@ -50,113 +50,53 @@ export const Template = ({ iconName = uiIconName; } - // Make sure icon name is provided. - if (!iconName) { + // Make sure icon set is provided. + if (!["ui","workflow"].includes(setName)) { console.warn( - "Icon: Could not render a result because no icon name was provided to the icon template." + `Icon "${iconName}" is missing its icon set. Make sure you are explicitly setting either the workflow or ui icon set.` ); return html``; } - // Name of icon that corresponds with SVG file. This may differ from the icon name, such as with - // directional icons that use a single icon. - let idKey = iconName; - - // If a descriptor like "Right", "Left", "Down", or "Up" is present for the UI icons Chevron or - // Arrow, use that only for the class name and not the icon fetch. This is because these use a - // single icon file that is rotated in CSS. - if ( - ["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c)) && - setName === "ui" - ) { - idKey = idKey.replace(/(Right|Left|Down|Up)/, ""); - } - - // Make sure icon set is provided. - if (!setName) { - console.warn( - `Icon "${idKey}" is missing its icon set. Make sure you are explicitly setting either the workflow or ui icon set.` - ); + // Make sure icon name is provided. + if (!iconName) { + console.warn("Icon: Could not render a result because no icon name was provided to the icon template."); return html``; } /** - * Fallback UI Icon sizing number. - * - * If the icon name includes its scale, we want to leave that scale. This is preferred, - * as UI icons do not use workflow icon sizing. + * Append approximate sizing number to UI icons passed in without a sizing number. * - * If the UI icon name does not include scale, or the scale does not exist in the current - * list of UI icons, reformat it to approximate the provided sizing for the component. + * Note: It's preferred for components to provide the specific UI sizing numbers in the UI icon + * name, rather than relying on this approximation, as UI icons do not use t-shirt sizing. */ - if ( - setName === "ui" && - ( - // Does not already have size number at the end. - !idKey.match(/\d{2,3}$/) || - // If the provided icon name includes the sizing number, make sure it's a supported sizing number; - // if not, strip it from the key. - ( - idKey.match(/\d{2,3}$/) && - !uiIconsCleaned.includes(idKey) - ) - ) - ) { - let sizeVal; - switch (size) { - case "xs": - if (["CornerTriangle", "Cross"].some(c => idKey.startsWith(c))) { - sizeVal = "75"; - } - else if (["Arrow", "Asterisk", "LinkOut"].some(c => idKey.startsWith(c))) { - sizeVal = "100"; - } - else { - sizeVal = "50"; - } - break; - case "s": - if (["Arrow", "Asterisk", "LinkOut"].some(c => idKey.startsWith(c))) { - sizeVal = "100"; - } - else { - sizeVal = "75"; - } - break; - case "l": - if (["Arrow"].some(c => idKey.startsWith(c))) { - sizeVal = "400"; - } - else { - sizeVal = "200"; - } - break; - case "xl": - case "xxl": - if (["Arrow"].some(c => idKey.startsWith(c))) { - sizeVal = "400"; - } - else { - sizeVal = "300"; - } - break; - default: - sizeVal = "100"; - break; - } + if (setName === "ui") { + iconName = appendUiIconDefaultSizing(iconName, size); + } - console.warn(`Using fallback UI Icon sizing number "${sizeVal}" for "${idKey}". UI icon size was not provided or does not exist in the list of available UI icons.`); + // Make sure icon exists in the set. + if (setName == "ui" && !uiIconsWithDirections.includes(iconName)) { + console.warn(`Icon: Could not render an icon with the name "${iconName}" because it does not exist in the "ui" icon set.`); + return html``; + } - // Replace sizing number on idKey and iconName with new fallback size. - idKey = idKey.replace(/\d{2,3}$/, ""); - idKey += sizeVal; + if (setName == "workflow" && !workflowIconsCleaned.includes(iconName)) { + console.warn(`Icon: Could not render the correct icon with the name "${iconName}" because it does not exist in the "workflow" icon set. Rendering the placeholder icon instead.`); + iconName = "Circle"; + } - iconName = iconName.replace(/\d{2,3}$/, ""); - iconName += sizeVal; + // Name of icon that corresponds with SVG file. This may differ from the icon name, such as with + // directional icons that use a single icon. + let iconNameToLoad = iconName; - if (!uiIconsCleaned.includes(idKey)) { - console.error(`The UI icon "${idKey}" does not exist in the list of available UI icons.`); - } + // If a descriptor like "Right", "Left", "Down", or "Up" is present for the UI icons Chevron or + // Arrow, use that only for the class name and not the icon fetch. This is because these use a + // single icon file that is rotated in CSS. + if ( + ["Right", "Left", "Down", "Up"].some((c) => iconNameToLoad.includes(c)) && + setName === "ui" + ) { + iconNameToLoad = iconNameToLoad.replace(/(Right|Left|Down|Up)/, ""); } /** @@ -178,8 +118,8 @@ export const Template = ({ */ if (!useRef) { let svgString; - if (loaded?.icons && loaded?.icons[setName]?.[idKey]) { - svgString = loaded.icons[setName][idKey]; + if (loaded?.icons && loaded?.icons[setName]?.[iconNameToLoad]) { + svgString = loaded.icons[setName][iconNameToLoad]; } // Return the individual SVG's entire markup. @@ -194,12 +134,12 @@ export const Template = ({ )}`; } else { - console.warn(`Could not find SVG markup for "${idKey}" in context.loaded.icons. Did you pass through context? Falling back to using the sprite sheet reference instead.`); + console.warn(`Could not find SVG markup for "${iconNameToLoad}" in context.loaded.icons. Was context passed through in the template? Falling back to using the sprite sheet reference instead.`); } } // ID of the icon within the sprite sheet for its icon set. - const iconID = getSpriteSheetName(idKey, setName); + const iconID = getSpriteSheetName(iconNameToLoad, setName); // Return SVG markup with a reference to the icon ID within the sprite sheet. return html` - ${idKey.replace(/([A-Z])/g, " $1").trim()} + ${iconNameToLoad.replace(/([A-Z])/g, " $1").trim()} `; }; @@ -304,7 +244,7 @@ export const WorkflowDefaultTemplate = (args, context) => html` }, context, [ - "AlertCircle", + "AlertTriangle", "Bell", "Camera", "Color", @@ -315,7 +255,7 @@ export const WorkflowDefaultTemplate = (args, context) => html` "Files", "Hand", "Lightbulb", - "Paragraph", + "InfoCircle", ] )} `; diff --git a/components/icon/stories/utilities.js b/components/icon/stories/utilities.js index 2ba609a3416..16faf30eaa3 100644 --- a/components/icon/stories/utilities.js +++ b/components/icon/stories/utilities.js @@ -190,3 +190,27 @@ export const getUiIconSizes = (uiIcons) => { }; export const uiIconSizes = getUiIconSizes(uiIconsWithDirections); + +/** + * If UI icon name does not have a sizing number appended, add one to approximate the provided + * t-shirt sizing for the component, based on the most common mapping. + * + * @param {string} uiIconName + * @param {string} size t-shirt sizing + * @returns {string} uiIconName with appended default sizing number, if one is not already present. + */ +export const appendUiIconDefaultSizing = (uiIconName, size = "m") => { + // If icon name already has a size number on the end, no change is needed. + if (uiIconName.match(/\d{2,3}$/)) { + return uiIconName; + } + + return uiIconName + ({ + xs: "50", + s: "75", + m: "100", + l: "200", + xl: "300", + xxl: "400", + }[size] || "100"); +}; diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index 79c4136fdad..98b765fc520 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -14,22 +14,6 @@ import { when } from "lit/directives/when.js"; import "../index.css"; -/** - * Get the tray submenu back arrow name with scale number (defined in design spec). - */ -const iconWithScale = (size = "m", iconName = "ArrowLeft") => { - switch (size) { - case "s": - return `${iconName}200`; - case "l": - return `${iconName}400`; - case "xl": - return `${iconName}500`; - default: - return `${iconName}300`; - } -}; - export const MenuItem = ( { rootClass = "spectrum-Menu-item", @@ -84,10 +68,7 @@ export const MenuItem = ( ${when(isCollapsible || (selectionMode == "single" && isSelected), () => Icon( { - iconName: iconWithScale( - size, - isCollapsible ? "ChevronRight" : "Checkmark", - ), + iconName: isCollapsible ? "ChevronRight" : "Checkmark", setName: "ui", useRef: false, size, @@ -196,7 +177,7 @@ export const MenuItem = ( ${when(isDrillIn, () => Icon( { - iconName: iconWithScale(size, "ChevronRight"), + iconName: "ChevronRight", setName: "ui", useRef: false, size, @@ -266,7 +247,12 @@ export const MenuGroup = ( > ${Icon( { - iconName: iconWithScale(size), + iconName: "ArrowRight" + ({ + s: "100", + m: "100", + l: "400", + xl: "400", + }[size] || "100"), setName: "ui", size, customClasses: ["spectrum-Menu-backIcon"], @@ -473,7 +459,7 @@ export const DisabledItemGroup = (args, context) => { context, shouldTruncate: group.shouldTruncate || false, items: group.items, - })} + }, context)} ` }, context)} `) @@ -582,11 +568,11 @@ export const OverflowGroup = (args, context) => { context, shouldTruncate: group.shouldTruncate || false, items: group.items, - })} + }, context)} ` - })} + }, context)} `) - }); + }, context); }; export const SelectionGroup = (args, context) => { @@ -700,12 +686,12 @@ export const SelectionGroup = (args, context) => { selectionMode: group.selectionMode || "none", hasActions: group.hasActions || false, items: group.items, - }) + }, context) }, context)) }); }; -export const SubmenuInPopover = (context) => Popover({ +export const SubmenuInPopover = (args, context) => Popover({ isOpen: true, position: "end-top", customStyles: { @@ -717,7 +703,8 @@ export const SubmenuInPopover = (context) => Popover({ ...args, }, context), content: [ - (args, context) => Template({ + Template({ + ...args, items: [ { label: "Language", @@ -732,9 +719,8 @@ export const SubmenuInPopover = (context) => Popover({ label: "Show grid", } ], - ...args }, context), - (args, context) => Popover({ + Popover({ isOpen: true, position: "end-top", customStyles: { @@ -742,7 +728,8 @@ export const SubmenuInPopover = (context) => Popover({ "inline-size": "120px", }, content: [ - (args, context) => Template({ + Template({ + ...args, selectionMode: "single", items: [ { @@ -765,10 +752,8 @@ export const SubmenuInPopover = (context) => Popover({ label: "日本語", } ], - ...args, }, context) ], - ...args, }, context) ], }, context); diff --git a/components/search/stories/template.js b/components/search/stories/template.js index 09570d33581..d017e28981f 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -34,6 +34,7 @@ export const Template = ({ size, customClasses: [`${rootClass}-textfield`], iconName: "Magnify", + setName: "workflow", type: "search", placeholder: "Search", name: "search", diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index c1ff884c4c6..bcf81178f6d 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -106,7 +106,12 @@ export const Template = ({ ...(isMixedValue ? [Icon({ customClasses: [`${rootClass}-mixedValueIcon`], setName: "ui", - iconName: "Dash", + iconName: "Dash" + ({ + xs: "75", + s: "75", + m: "100", + l: "200", + }[size] || "100"), useRef: false, }, context)] : []), ] diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 9413a7504e3..e255eeae0ee 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -75,7 +75,7 @@ export const Template = ({ labelText, characterCount, iconName, - iconSet, + iconSet = "workflow", pattern, placeholder, name, diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js index 6c15ccdacd7..7114a75a1ac 100644 --- a/components/treeview/stories/template.js +++ b/components/treeview/stories/template.js @@ -22,7 +22,7 @@ export const TreeViewItem = ({ isOpen, isDropTarget, icon, - iconSet, + iconSet = "workflow", thumbnail, items, variant, From 924fc7f040b84731c06fd3c59dbb1aca9001b642 Mon Sep 17 00:00:00 2001 From: aramos-adobe Date: Wed, 5 Mar 2025 16:04:15 -0500 Subject: [PATCH 091/103] feat(dropzone): migrating new S2 tokens, more spaced out dashed lines, more illustrations (#3429) * feat(dropzone): adding dropzone migration feat(dropzone): s2 migrations feat(dropzone): rebuilding css and cleaning up index chore(dropzone): updating package files feat(dropzone): modify layout and color tokens chore(dropzone): add metadata file chore(dropzone): update files chore(dropzone): restoring image, story and template files * chore(dropzone): update test data * chore(dropzone): storybook build fix and s2 updates * chore(dropzone): adding metadata files * feat(dropzone): adjusting template and css files * chore(dropzone): adding icons * feat(dropzone): fixing svg box, border fallback, whcm fix * chore(dropzone): removing icon dist files * feat(dropzone): updating changeset and modifiers * feat(dropzone): removing illustration mod token using im color * chore(dropzone): restoring s2 files * feat(dropzone): updating whcm mode * feat(dropzone): adding metadata * feat(dropzone): adding filled story desc * feat(dropzone): update changeset, cleaning up template and css files * chore(dropzone): restoring base s2 files * chore(dropzone): restoring global vars and changelog * chore(dropzone): update with new revisions * chore(dropzone): fixing lint error * chore(dropzone): reverting files * chore(dropzone): fixing weird changes * chore(dropzone): fixing weird changes again --- .changeset/big-beds-care.md | 39 ++++ .../assets/images/dropzone-illustration.png | Bin 0 -> 123661 bytes components/dropzone/dist/metadata.json | 112 +++------- components/dropzone/index.css | 204 +++++++++--------- .../dropzone/stories/dropzone.stories.js | 49 +++-- components/dropzone/stories/dropzone.test.js | 13 -- components/dropzone/stories/template.js | 75 +++++-- 7 files changed, 264 insertions(+), 228 deletions(-) create mode 100644 .changeset/big-beds-care.md create mode 100644 .storybook/assets/images/dropzone-illustration.png diff --git a/.changeset/big-beds-care.md b/.changeset/big-beds-care.md new file mode 100644 index 00000000000..4ec2dc05693 --- /dev/null +++ b/.changeset/big-beds-care.md @@ -0,0 +1,39 @@ +--- +"@spectrum-css/dropzone": major +--- + +## Dropzone S2 Migration + +Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed. + +The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap. + +### SVG Border + +To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property. + +### New mods + +`--mod-drop-zone-content-height` +`--mod-drop-zone-edge-to-text` +`--mod-drop-zone-title-line-height` +`--mod-drop-zone-border-dash-length` +`--mod-drop-zone-border-dash-gap` + +### Removed mods + +`--mod-drop-zone-body-color` +`--mod-drop-zone-body-font-family` +`--mod-drop-zone-body-font-style` +`--mod-drop-zone-body-font-weight` +`--mod-drop-zone-body-line-height` +`--mod-drop-zone-content-color` +`--mod-drop-zone-content-edge-to-text` +`--mod-drop-zone-content-font-size` +`--mod-drop-zone-heading-color` +`--mod-drop-zone-heading-font-family` +`--mod-drop-zone-heading-font-size` +`--mod-drop-zone-heading-font-style` +`--mod-drop-zone-heading-font-weight` +`--mod-drop-zone-heading-line-height` +`--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title` diff --git a/.storybook/assets/images/dropzone-illustration.png b/.storybook/assets/images/dropzone-illustration.png new file mode 100644 index 0000000000000000000000000000000000000000..dcc34b9f97bb4813f0e85cefef35e06d63f9af6e GIT binary patch literal 123661 zcmV)JK)b(*P)w}00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP|F9d3bOa!t5BeY z?wR|a_q)02O>&baX$s|+_jv+sn%w!_?|kQ+_q<0U#tG5q8FassaUzRe8a|uyvkR%^1Dz?hS)%Uew#-;X>1&RXfw$A? zh07@@Dwtg1z%M&#-w)fw&#C>JQ0=Q4lD}|jV;XIGXC<|NvIm9NjPmNcmXcCh{rn%4 zdo+tWJkyK9sz;D7*!lSeI{L?c@pH>De9f99y8ZmoKljs~uQyZ2XM0mnObDG1oY`}l z)=l}7h=)!L-{V$%uYJWO$%&L063mafLPpl6&2&4gQNPzE;7SbEL%QsHg<*2#=!Z_{YiGJ=OXX{Wm#K7AP5GVKj zu_B+1(>2vh)I7>ag{3lmc%V=ir&_@hzpotg>_bH!8>dh{-<}C(aU&L;D5mm`C^gJL zQ2_=j}_xr6>T3AX&+4}p;I+)3Zb1Chew~ZNuGi)Rd`dT?@TBhI}?o!1|qv zaRN@9COURf>?Mld>LSb1Px8)Q{S7<|kJtNhy-))^*EE>A#F@ne{4r1dGY=M%C+B`0 z8;v&X(ZFcT*zau6Ongk^*zkq&54*BU=)0pHS`Y`s1xR#jN&p%8B7Mh3Zb!C7Z2Rsy zfn?%|_zb&dzaIB|+gGzui)Dk8#ztiE$&zwE-y>d`WY?c5DR;ZT-=|8%wbVoRI1`2N z!RPRVxjNI{ApLdP_4YA9YIUn4eh!WgrSc$`TBzVmzT3|PM3#A1@LI^lJwLlYgU;^D z5R<;A2#yP-@LEw699#aeY9W_cC}Zmh+wYRWw+92)Dx16Bdv~0Wgaf}5SW%n#7&iUFEo-LqF@2;fmBWHED zjjPonE{1A^hdNCvvZa9JjJa%_9^?(}p^Lciuw<2mn%&4Duz^Ga*oYJrSB{Yye5HXl zeo3@;jzoPr8K@%Y(h|q09A|QZOf?c5#wAJPO+0cNYu_~TXRb=(&>K(um@rQkSm^aV z1+*p0GY_XBdlk3U3?v--mq&_dTeki8a0n093#95CAIs&*`0c%gRN#a2gzZdd6eL1l zThEpmxl3Y<)H2E>LVGXlEbw^S?CeqBM8%NIPb(5(M|X(f(A%Z4MzNn+2VJk`W7&vy zh%u3cCz&~ii(G7r=#E-}Vj`NczrbnV2wfJiu@5rpPs)kSlgJQYq|$uX#@H01oEzrj z@>V@^NtuBx$t&i8!b64Zzf;2dLZ}Yg>hjVR%E0jer9~xFqkAfO3ryZ6`HG>2aSDnK zCSPF+F7qHQ#jd^6Vm|l06N<4g@^{SPfli+}vSc4wij-}5vOsW!T;9)ysee;pW!V_CA#sl-*l+pjzaxQCj!fa$!i#e4iT+ZEN>;Y^6zTG}VocblR_6$evmH8$|h= z=_1Yz@SJbnEz|5@cz)npGW>dp|M%S!0j7Ok7J6H>l4!$DnL0G9*fw1u!0eyxPI*Y8 zW_4vcks;F^*YGnP=(OF&JkllGs7>Gxj7$xrRva>eUE9c>!Rs8-%ka<|NAVmuu}KgG z@?^Ctql9x$&J$*jcq4UXZvk7JzOR4|RBt|*ngygW8?@34`BXA;B40NxV@ z0KA$V*`8az{>h5>bet{P?;dzh?b#59uyH(=U+OY!2egPZPykP;XW8nc7rMwjv0=nw zAgkCyf1PrkFxmdnE)JEph|~|wg~x?a&CBaiOjFmn6zxPTm9y|Mg_TXjlF|9YxW0#% z?4{zYLXp!FVLKyvgs8f)YT_Ws>ZMnk94aY=i4}j-q z4hwMl3_M5`G0hTOZmYDgL@Xj)Ee_KDIw*{j*jGZB{pV!+`xoGF9LHB3v3Yrt!$JYS zHDJTkAjTozCtFC){g=P|DsMcCF5=vwh;LQ*dw5RBQSMdRNejL4XvHS|=m?tEx*1tPiL|+{#KM!Nu8P8)ca!4?gC#;if zE#BHwNRHwC6wVEet`{W87K=_4(Xvye>y8)#69Vu;>k@9s!}tQf5tW{PGbbCxIi z*VwRnia@K^h?(FUKJWZ;4hvIuA8W2^ak^_`hB^D{B;|9zrR#e)iM(^<;_#VI4{ENN zg|ED!%s9Z{yE0H_laW%dYeMc|n}~TomJ;`OH83*B_OqB6aZH+VRGd>p2j=fkHfQ_C zf55eH3PY8a9W%Tc$>e)@L4*gbn-5ENO|&?{6Tga>#__twrHDgoDgs>)Px4Ra()w5b zqUQH^r0^7dVo2WcvanucJqIJs*Q4lc*?2aX%2op~vZptfg%;ylRz=x92pJ^EUxK`jqgj8z<_0?T$2ej1+>U%YlJEJfgGJjI zgzY%fU(6FL7X-&yK!{~yK)Fuc<`#AckpcpJ4L&nx4E%X)Y10JZ)jz*4)#_2Z}s8t}Bz2&u=ek!p6|WeDeYvH&1`~^ezPv5u zr#{?Ywn7ftet?1wq*3s$vK9PkH|!LH2P?t=HEd_GUyTC=8F^HyF+^&p2`J&vl-4)^ z`6qL=JNMg)6gi(&&n=--n~qc3%0qU4(;ky4$SC&fE96ooIUAA`M&{4}{m<|@mll*= z6Xb;)k$w2A2;BhzY*h5Zjyq;=5XK2G2DzR%qUy)leh#Z?pDV)k)p}LhV*!Z;9<2)1 z;Kl_73dWxH-pDdv!~J*ur;HQu=3EPXvCv3+*ofRUNuqzZ_|N74X*rCOa*cEO@;>@T z`NSJ|aofJ(9L$3jn)$4SCXR4FmWy~XcqaS5;psX;1d&#pE}*XP^w=}Qv5B0S0Uk;zt<5a|z+$YV2aqGaI^vof5zTYeW$_9*;`2lLpS!t6 z0GWBB-H}yFYtEDn!0;7Y#rX#9Ei+Krd}A_PSWi#pYIPz7PH#V9_qSbNZlY};uC|5h zv}AyyGX-|xH9$-84vr7=nNjD6U2`|sjAv0+q08eB2oI`|QB=d732m#pJoc>p88+`R zEG1I6{^`t)blWux;IOD;J`2Z;?WhQ?<~p1h6r*^HQ4QjpKgWk?u;!M)Kr{uF8A1!j zgl53QP==UH)S+4;88sndxrC2n{~f&I@SSOhT;prAOR4U4G7WshLiq)i!xZy3{@J88 z(h{Ye@}J8eDR?pJ_9UtnTmCh{*o}=c(Ae9J?9CY|Fu?Wk{I;@`5_=I<>%)uLkrpa0 zsn|9DXQPD{{9P)%%JT5(PZnx4z(QAzDy70g@Aix1{9}!Uman&PXw~!Yp2?DF&M&33 z?}+jp!^4~N=%t+nbjEY1LqIi7eXYg`G<5AGtA6IbRK>e0=85_h-p_F#2lWlr%_2`$ z#3%bQZzs!oyuA~Q)Hd2ARxO{gAvod1g>1;7x+Ws8Bhid~h2)9dytbN&^K=qzVWYC& z4Z-7b_R5ftJDg{s%{mN7upK+&eE6aN#DN7Eq!a{D;E|KIa2t$qTD~g-RsI8~Wtf#} z!bR|$viE1w>8lpt5^nD zgedtGqBUNNBXW+G<%EJ0LUj#Ua@RVxTv%+=1Sg}J!ycAweKi zrn@gSM2jL_tsyMV)#RqwdkWxt)wy~i1#0tDMQKC_NAiiErHWwFE}6!^X`lngB>H}- zf!_P(!dTTmHmvODq*x1eYEFJbpH32u8f2mB@fPaQ-a=1}ko=nCdhsKPvT`N%q9po# zl|*Z|`);5fdeuVRhf8$Lg9hsNknGme+j+o3_r4&}?!yLJxY9s(PO^AaPBLh`Oug@u zsOLQr4SCwL?;Sg7p}PGzjqG-1hbgSK0jPUKczWa zxZ7)*MfeQQ=qGHzR%QC&Ix%|08R_N}B^2}7;X>MQR(UX@IAn<8R@6bQI9*JOya?@u zh$3Vqzw>)~5$*M$P#B(8w>Tvv_luj{6IhtIHUN%E?+Qaf1MI$KCyO~Oso8f)2}xF( zw;`{9q@rSy1C?{%!^havnJFxer#xuGPX-Oa;Mnp5RCq=)OoeCi1wjI#uYia^;l+SX z4uhnfH1kiDh4?}$K&^H}ac&RBYdOVR%sOnn<*2wuO$ROVp;ZM9J~~Ga&GOULQyF!YKZk zFT2U)UjjzBrY0MYZJ6)X6|``LM5Pwx`2N|%k(4ts#YO8MZ+a%!hGm}N=G~IuZF$1h zE#(RS?~RfeD;Ocm){;lqu#-KgY-OJXMH0>X!$MwDp&;+`NP|H3T+AXI_$jac^#}l< zfe%PlCf09{7Sa6UUb<*jw2v}!ekn*y`oE+V)4XHWS{OndR3L@(T|?;WBhDXr$|qqZ`CiM6GC-t8Xk6;2}lSj<$P0Bq`h$Rck>VrD3UTF9UPz?9%$ENs z`2#H)NR$|(+#{nwromTLtWfh@0oS8#V*_1#nMBnS{A)k}5H3Q4CBGXdV9FSxj?FAo zBSEIe@06)=s_*-#o>2CD#YV{#?q+S-te!-T>sWKAe6JrHCTmH>Zh_CmMwaa>G1jwr zAX)H`%0Anq4jX0i0?>tfqEQfs#*BiQHl4#_dWs9T)G*UcH5B9YJsYRb5BsJRQ9DGU z2kHlk8lg2A#q`m^A{*oR7B+wl!i<8L0ZMzi7ooixK@tsOj|`s2dwdRA9@tKdy}pUc zIn6ufI#-8dgZvU6iY4jJly%(WA+-X8(#3CSMReGakOG#Ss!GJ3l%y$|&2T}KDD}V) zppGY|Ndg^Rw%=~mEonxbnp=Xmgh~1Ao(u|%4svEZX?}&Of#akK=^rRCz$i8z(uO>R z)}U$gU_ve9iUxFQy<$v_!TQ4%Ot*EfE~nNHb#Y04P`77vBln~Yfg0FQYLzGKK8M8v z8={(5)OYfZkbgpmPeo9i=Nf*(AoF4&iw#^%;{o_gfH#cGk1N-vN5eAX zB=h8Qat1F&w~)V3EsjG>pUa%Xuu#heM6Db7e?qygroYw` z4ZV(Y&{s%gF2|@fsAZtPK9)JB18=Qj3xanZ<3;^D7Ruph`NOxn-(GY$&tKCy0<^+H zwKzD?wY4(7cOQ~z%U+_!wPk8pTR)tM_hvlFshF7-;c-p4i#!61;=~a$=iOv#QJ?4d zD-E6*C>#Q))lW7KW{*V@bw*Qn70~*#_N!-{?j5zv)Zgkk{cx;^W*sW_iB4XfjmV^? z!4%11i!EnM=+)hYq~_XMMH)Edr%Yg9ama7&8P7w9$Vc8=H&BGvwzFkga?&%;Za}h$ zJuZoka2{x-8}F%8jFIZH;Y4BXe4Q}h)k!9*!EPuh>R-E{p39P=+h8$sZcQ`sopF)a zw0P*LL^X^P2Fi{`UgUf(m>^YVSXhlHr(#{LH{(dHM%ZiJ%YOIvC^Wvc zb9fJoM0Mb!c-9+fC+P0&n!8Edn4-R|PNw(0Xt;@fb zSRe)lP=x_w_w_5De?B2bqT8-6JHF$mE!1|f#DNu^_J3u$e~uA#;U=tvG>l0NjCk~d2G`=HNxDv%oX zX+&S++a$YW`US^_P`e4;b-lH-drsSa4y_*P((BVh=8jXgg@a_J@z)#JT=%?9{5J!8 z!O`*I6cnobT`pnI?bJu)_X_HZaKdDEQn&3h(5bTqdUdve&gQsI7HCMh0teFQg2MMp zEy6ef`Gpewu!JfdZVglCB{(ePA-Ot6_f8PrJ~b710`MWJp0U0p3eJQ85j%|7J2 zaeBW^sG>+wP)bj4%cpGXd6A1fWpm6&dhDCmTI8*+)PV}yH^!& z7#=|ueipj+Z^hvhgW?^hzson-zbf<>p^rRGH3ZVJ`ECSkuIvIYL8-wDG+U^f=h5#f zfu?m4PF5dMnQA9frNia2u6w+Z?qkCQN;PVJph~__hmi)OF}X=FhqVl1CI7;Xd|H+1 z8~qf-g4fw|g0ezBdkg5tq~?e4c#q`JTyn4?(28Q;EH8K$@CP7L3!T8N{6#(1p&nqQ z`z4!2oF6&2LN}*&Zylvr_{U?=FSP#~uG3Z40^fJ{7P?ou&=yx}RRdgn+*2DJW?ji^ z!+Kg>H;c8_NQBy~*1}+NmK@4GX3eeepB%jhZSKev;&tB(_DOSKqI7d40tT z19&kP5ky_CYboB7iw?1?y`26ZfN_X?$(rp%^-^S^mQd9&Y7mF(*2sb#*R8coi7~Dh zB3)WZwEt($;p_pkkn=nd7gngWD-)qj2B*i+NiW(}-vrY^Bc zy%Q+w-iplL&Edy-$PJ17nPMO;i zdviIFUrx@fBrKSWIm#;Dd_02+>(vlHyNX&BmwM>u+!qxjIkn30WJzp@wcQ- zHSIQmVoi%0YLpeF2`#iWQ?eIM46Y5d>>zp?*F4F|`%(>Ie9I*L#H>Tksyw|xR|tqM z(;ep(82bifvd@SW>=Fyn922qfD zy`W4k`$kHtYWRMsOhcZQD6c@FbI+P&p@F@tmXW%)8_$soNE9uDzV6Ob#^3On2b+OHT@Wmp7mTzwWZVCuqu6*zz8H9#HN^s4pTZI&Z%u;JOvny6c86qs`--(ImuD5gZ>|Yh0rUXLReL~{)N1Ddg}|B4HQ)=V0%01+P&S6PJ8LioLwk!vw*K(;8nsHuC#)9r_;d~FjKrz=+sI_``1*a6{ z2FD2+;WrpHP@r*f97A!UehFWZ$?J(3BmmSOh3d3&4~z;DFTIu*fFtWqGWfRAw&@h| z=As+YjOkclDlv?A$sNM1wP=2`YMM)U+ zrE3iA;aKSPhxHkSXR>9Q{;f>8{D=>~f&3CW#X@=VhhQm6R9b4F?(Hn}GY`j#8Y$D; ztwMz70)Q2Vrh4l$OLg-dHLdM38gRY|UI2&&UmqzZUz#^!kAqUobVKz3F^R7{T|(3L z6xiiv;K3j?hB~N&xuv3UqBr}(yzq3RAVEyno~4|dr(eG!(L}Y_twdK|cgpMWYyfYu zdUx;aD{#^o>=0w5`r%4Z?z{Uu3oRBU$Ch=t(A-}=GFb^vOeGGnKf#FO{psau&}#?` zH~bxap|qdTPNaowtUxb!q?p6#gw==;21@+h!GM7hz5nMO!obCHsLmT8v?cL&^+IB3 zoY>^<_Ab>J9Oalw3W@~<+#3|<6^ZulKuVu_KKGo0hY1e~;neWj(S8Yqz%W${3!z3a z(G;S$gthQOCf{|<)1l)sb-h!fqii?ZH<9V5Y2;Expeg{@?8VUr4qsd7U>YddM2`>i z?s#_{BzkqWqG)g=U7|3yRDJS}iysAIa0^SLFPpK`_AsghV1OdVX7<*`gae_mLFYjW{ z%1crNL~84VD*d5e-(65{pC=W_huvB;P^1 ze@rX#c>l%mQHnJ}L%lO)EH1t0s#wQ^g2?Hb7yh6Yqb_k`p<&X7*Q3&~;SGtVgPgOm zXl_72WFUVxM3-W%PTYYyU2TQoGb;LgaV@~u5n(9!^!*s~3+$zt(B4AnC{0xk zvwoK8p63)PqLvLTwE8oUc|AYSu5Ap|q>fD6_M=8grkncce-3lepPK$thmK1^n#gFZ z*hRr3->8;MCo`3$wdjrI2NHInw*Y|$bXmMvOx`c;D4^pWDovP0Jy)PD za*R*Hkl8VvrL0n{&wX3sw>pPBP~nAai8Q&QsVCkWAgXu=Zq*=5s+DW=eE2Q1A@0 z4=OCaP#y785d!3}Av_*GYdNs5yC_Dik zT+vra1`{!WLK4ErR}`Gi7uT)cjm=%wP~lx@<|VOLloA$7p#f$=O7g`h$}$_K%rD%2 z#vvjox~~4eqj4&y5ZYVluMJ9J>E!$T*9XcIU`*{hs(3dIY7x~)a2-nf`Zu!a zP6L0ZPIb?Z6`{1>-?z}Oe_N<|eMQXfNgy9szie)$dt*` z!_y;VN{Xv^=+Ly(#RQCrx(9nrBY3ig2Zh?6nFkAL!SNEG>YH#08iX6@g{HwGp9HoW zhzI{Vs4~Dfz1}iJ7$+!~gF(0_*SkHojWW=^oc9qut_~K_Rxf&~KsCL&DCAYt*Ifa} z31S5HvHVmqopzWHs|6{Ya$(eG9V+s!Z)t#uWNQw^2*KEbLeaP|Qb!gguh@RojNVTB zzE=uObB<-}Za$)Rj7{pt6s)LdQ=t+@vw`nX?JFBNeHX?|wi?9<7Zhk1v4~nxWYXlI zU^usZv_>@TL-?)XEv=ls7gaw-crLyG=M$V1MmdKR<7p}KUi(-00A0He{jbo!J!XNSgKxro5ymYr80VNpi6ONry=+HgdS8eaf9|+-RaN#?| zVKbRxqa+Fo@qEHmRZS`q4qUfgrpty)lwW9|xG0%6eA##u-U;T`{sg*cvfalIAzXPZvJY;3kZ=a?R85F}Rrm|)SE59EbH zUn~Z$=kv_Ae6NfPkQxHLz+lCdJyk;A zAM@OEY03r^8iGpub@yH(K9|JDd5XiG)Al&8))5Yc7q*c-&ZQ^4oGifrvxV(=Rb8ws z3SxBAYZC3=0ULrg2e}7!ulY!H*%znLZMnK)Ce zk*|TA657TCPj1O$9D8Vp-*3w*rK!6;Z(fL28spd~qqzP3Kt;lKl7#UaFzeDnUSvVe5yhg@|mc2RaLa1U!V?^3z_chcj2}j@Ar^o>ymrx1PiU0Nj{-YvW@B_6d0Pik%x?pl<2#u%I!4# zch(Q(LOjKwnuE&SKE@;n3~ZO^%cF(#Q(Cc4-ERS0V+f<7?-3~2V6nZ;lQp~=N27tB zfoKU|GgMKDc%H+0-Wn%#utjbQg}w*#6p18nw(tZS=GXvLKdF>zXdhBCI5)d%DB&tnU0xtxO2d7?fEp)`;xK=*dVlG87w)vyK4{$CwppYZz5 z>{9w373X-jFgUzqpHObE*10D6iXfwr;^RZ9dY$Tm297!}~87Wm@RBRYZgP5_NCue%y<(a?v>1!8E#V0CkQvi<}Ck+QsQ5 z^!3pqN~=ISXAmn!aek&*q~eL~%q|fvG4yJH&|m4vMnRMsrckk`vd88vI}ir;DfZH8 z@JSpmC>0ugMP5V(hq4iE8D$g{b`U_a-9+S|%Li{TEx(jL*zY_E-o~L!{2jD-Z^Da? z&|WEXdM23~R2MXVElMpG&OzDlqd-&3Wb}|Gjk==(_PpTPz#t*ShY4OaPVkmc>8EISh$+E9~8 zP`&X2(+-9yi2nxzPwOe+{w!R)mfo511Fc@Si%#;)XK`Q`PXBm5g>VMHU7H5<(zAC{ zM>beqT^Dr8wdB(I#vkhxSU&&BfO6C(8 z6d9;ckhK6oqR3HmPTNYO*s}vj>0OUbZ?@*HtP`lVr3Ugc>f~Q)ZB`hT;+;laP)vwI zXJ_{uh7XDq-iXP10<8{U?$K0Si!b2z~C`epu7#?^*@B&PdLHuv< zz<3n#efj>!zi7&|uV~%I-Q|8hkHffs{=J!cUh@b&^Z4!b@B=q_J}DNTq^f{U%{bgG zmC?FUs2OOkygW)}V$KVa=!1k?eZ?geGXhv_nEVv&L|xI~2}GOsNYtpdOv^r0h#>w1 zdR9I6p-j6EOEj>TOgCR~e(#~_kMts%$DzEvxxRZ$IE7X`c@M7>B-&x%rhuaTF;C*V zTuk^)!VUB&=X_!U6&f~jU7Nhr@e@L|O@l@MC3LTSen-AXN)0MnMDj7PfyAo!=VL{} zdvpbOX`|`}i8`=vjug^r2lgR;1F-}}#eZ`SYfWYatP`WKMgqy`_=*@S8;vFr&I9FS zeu2|s!cMio!%G2DgV5-+8V^7#`Ga~Vb-O~ym48m@CuM< z(azn6X~MIg=zhPTpok_+{FuT*gK6YF{m3H}9iXa!8+uDLm-8%(Rua`uAsRWz;1~L` zuh_Pi7stQLR5OX_j%&R0Hqdx*VDGBuoqWCk#k|TquxTq{g;X0PRedgzp^ z==i;`GoSW(X&_;op0gS!w6A!Hx3S*~Ex=SBgcGdBX6g zZp#sploXXF4dJlOgl_ghN=vj!-6l@X( z1O`fN^`Pw;C5)2QxF8IO_T_p-y6%8&z#tW|ae`i-ukA2)%-JAnxtiV6!O8e&+pZ&L z=81ud4-TSsT~kDet|BPn(C3Gr&ZqHDe@MBx_T>qQ2~qU(*UwWX=M;ZivexZ(z?z-# z?8nr*M;mI0nZ7&}?4qgwc$YW!!Hdp2PH+gU_kH*u6RS*n4$1Vw=nFp_=2(>wTnXXR z&AV}(lxqc%-hGFa1xIB9l2mhkk?Ff7GIeVs(U@B$+v3LOr!tm9c-L}h48^F>xr3s? zx-&|y$yFN+3>P#EyvN#>0>ZE$L>%)n-xbAk^^0Kq1uIfSleT+j;Nay=Y^=2PIKpu_ zs8qOXLU>zEGkY*bQM>i#o&u+ECCGJZtBqNQ3M!Pp(?Yh!2I5SzkbQE*SseqURq-w@ z^vomGwpz!;jusQzT$Xl{M;NXCP0fAFA8Ga@JhcR`zD@ajY+3s=MV%G;KLtiQJfWJ) z4&A=;H1HBRLDHdGqEKk42(q&C=>CV^pwGY3@8D); z>dJI&H!sJn#1_sJ&l54{k4rPyGMsYyNdF#0zps)xOf3l(V#nrG>DaiF=&nhSq%zRY z%VkQ4wb1QW&(LcF#WsPi<~+mx!io=uW*Qr&-EQ(Xko&v4b^seFrOs#vTd|4T z3*7fb(gC#ZUTz*NyqTP0bob4pG%pBSiB>9lBpcXtp1>d6;J)c$OAZ6xXszFRLx<>r zAp&YXR*+y1{&vFq0#R2e4Og1s)ukfA8q}hMb5r>x&im4ezZyKu0YEhZIT(0H7Hdum zEyl~XQx--*9?4+xt-w^v-t$`NffqoV-}~1_gNIh2qk#&D3R1#|Ppa87pXy!8QLm;%;UOH&$x~Q4U0Txr1>&P6&O4P6QM`gNhF9j3 zND6K!ewB0A6CHij>0@{GH&E+F7TUC{l&)a|7!~f_^HIzZB#T8UHuiK8yJ@#9jFSRh zP%I@jP|9x}8z>>}TEk2OA?|8@=pjP{>iEiXhz(&TrN*gdh*3=ROHP*1+dSEO8|10Q z;lx*4gb2e3nIv@g^+s|j&T8CZ*ji>3qUV%*;{+vi)Nlbma>!DTz=1XzP@VuLZDUW& zKhBdt0SC~-Ht*AAq@Ci#x}J);+NvG!hH8!8M|o-4BFqOw)GE`ygK(-pfbe7CX~i=u zI-Bp+cR~07(@q6)OpXX;;|%>kunZBZG`Jud#0CXYm+DDw2@iRBg|uh?QTBMw2&M3t z=m<)!l|(TyWwl@Vd=Hwmzl+jO+IO#w;DyDj&yS!XgD5)}wNX(kz~7a_A!LQLCDPCvpot^S(^&8q4(L@C&yl%P)wyf}<4= zawJ5PCNRai{CJy22J!M1r_ajNez1koGYz7^`Sz9e9#_mG;zQ+$PnPA^X_mNR5qa<_*#Wj3sVGNUEEuEPM22KZ+f_E&k=fJ;zzXL_cc^l$T>-i z#jdTCfxWGuKr?l@q$$1d%w6miJtD$!TJ*cRGtFV+1Mls<4}YRhW-k!q!^Gj*Z$Ep6 z($X{N-Up`9SKlwAx2FH#M5a)I{gjL1<8%@FXxYF(KTM_nHY6THHK(&XQ^R?@8@$UQ zmj~pLy4_`=gU1zu#qdc)m$d~+rF%5IHIk8J_2m-tJuQJDv8cW}-W4DLtXKo-Lv0 zIB(^RacUoBq_J#BLQP8E3w2Uw-PlNkBOh-RM6rPeVGPG_$#+t|fU#Cv$YYzHwvhJ* zqFJFR-g9oJky)tk9f7{B0xd7lG|=Dy&o!!H935YA$QD9F?New{IOV11IJI^66$llI z2pl1-=-oCQ)yefjcX$ZHYedoMO(*O^lq#U?&^bBL>0v!^@Hh=0^&0)PVyh^qbp;qK zP{My(vW}K4+d!o{ZRO9L&EZ_sVtV|UkLYwp*&<@$4=;(L+$*ntLj3;Kcgw_a+;M9k z`gPH2Q6r^AeQOtGwi6SaBd7dM2xkV1Wvk`~uIui{}6ug;#bVa$Jep z8K`K^%k)h&32&)-uu^o09Mg8r7eRF#Ezdp4yCXFA5KrDv`$iaLZDxt^xK4TLVPFor zuTB8=JruCyvAQ=P{gy^FEtJ7=@=eVXJ=8Z~tU7 zHH|?1mQ2rXD+P70c}Vh<|Gxw~w7UcPhvlNH*w6halkMHmaYrX8Pcpn3zEP(VbG z5)RXL&=sxSEuyolA;3Q&5-2qw*9F7rt6h>Ph9Ia4%g%)xn7jqDNkbeyK81KlGY~=DqG&LHeKTVB8F%j_fcy#*e*ep=l2r zd?O|Owx-`xx zCfrc#gO9@5e=|yG(TQT(k!|rf_RQIIMFV?8}RJwLDwV_PIq z`kJG5_6dum)(LSGYPJuXy)x}fdgl30Ih^NNBGYU((aiTBpCk7iPN6jJL!a6CTeK@-6{(TC4 zkcz!hWPs4@F!ofs$D722a5TS^X6!4X^=G}WcWG=b;zfuJ9txTUqLsR*W&pZ;D5{0F zASUbu$BRTm#PYm9s9^N39w72+*yn1UVq4^Sj?_B@B+{ z#0xlNcc#$wjX^hB7!~AtEQKW^#OD~vMZ1g5(^rY@p5Ag?)Fqiv6f7(Ao{IQZ$>b{n zp-UGWNbw=Tln@d^!6v1aYF|t^m1N{okJJ=OFD|4***TP3?7=m3h(@?-NEp*NUWEU& zxud#~;iB)77SrDOmY$mQ39t6_$0y{6qN2j+SXvoN4hE-j!wrcf`S6*hq=#E z&&yiVO?OPDAAbH@yg%-N8|jW)`mmRFmWJIoMQr<>89&koGw0KhqxMwau&`iy{iXXU zILLk8PXD+C6N@1yo-gFt(8R0(%9Q%k+<{& z-P=mks)2;fr+;8bcoU1CL z94~DXazEE5nd!D#0mAD!WNq{Ajmia#+r#X6#dCrmwOKRS(ERK{539=)Ov2*=<{T=b z1v+$b3>Wl(f;1Df_}<)8SSg`Bbo50pDGboKWX`FiDU2={tF5Oq-0lC|_?=R)Ka9#&^QS5=uks}h_iwEY0JJ=p3VN5qCwwskUw_jEYhUKkXf1Ze15 zrk!Z>E|vY=3EH=;p93on1-cahR2f<)I)~Do$=3ttm7S}EBuWbP2S!BQ7?Ga}wu;#{VdJDN#6_X(^|ws487K4$LinRt(CC687eLqMlH4{}C-iNnBf+cG1%Xi^9ReM@^ zPCyBJ`rpp`%kCo}aC|yv5q06kk8ROv_B}%4Dc}V^_=-%^zmq5`oM_2(iwOUD>K&SV zF;197udQaLn^OX8DiZ&kMk{#lYnw3KIz$_3OnpWA2zjfyhl_-8t*3yp#JKuF)G|tG zOTRO_l%CmM;E`Bs$7qG&hvR@e(<~RQ+3Rz-?G`>?T-MJHDTEP!1OCP{jTK2H74g*- z4+=*6po5oz_fD)nLc71-OzofOE(BSD08zlI6s*cR$$UxkjEgoH{81FWHn_#Nibh2&WMbx%Kf{pI`V%-LL; zIcI@e0~Hq=LEp}qNL@R7Shf!%o?H1V-}4QOiwAEt(oKCVR8XYUH=WCt?H2@)bE@$Q zNkR2(Z<#rq9u?`Fr2m# z6QNTw$AJoV(ticj*lR*p+l$7@0j30^I-l7YCl$z*Is!S+RqHh4#+*o%4N30}FK(m9 z)shf}g_lyBJqb)i`8;8MyuV1OLKOQDA?(C4*85X~gyawm3zWpsU&&JnIT{C|L7_@z zKUo05SkLRMZmez=%@l!!$BSwDe*JtB@?s#8K;r2{fufw@@4OT4*D%hzUCH@3N7uJm z=emN0cPuy0X}`O_+$5NBfVQ;;wg8W)=uClr^FW8UinEK9u%Hg0f4A=CWz=wRD~fAb z&FQ$i)<_cVDf|V5<1R}{rj49@0D(e_@Y-bnt3Xu0AxLQP=>ZZ*@S@_YMNwp+J<;He z_rA0H{g#2<1t|dqwdDbmV`6+XrGZPVL1aWI)vB3DYu4K{>UQorEM9sDW>4|{;nxZB zL}Eg;_sQ^#uZhU}F#7*H5Kb}~eIOTTuzX!9?L0u#s}r>7^cPZSU}!K@Y(EtP?>F)) z4zJwL$DkihuUEIa?)wXWUrm?yR6>DdjNpl)F+Vhwr{~zTo<#Qzw9tFs7$}nSa^G;c z&)~&%E7yan!G`IDra|;Z%Mj625YdJ2I8Sr;+B{mA?!9pWeH_~x-!NE^Dl&>>dSXky znD{+0PB>uHHqB}uN-ZK4Z{wRIMKqedI8TfdzJF&e#W>+I{cx;EbkNnKufxN8s*w_M z15F-Xdi|Yuf_L^n-9SNy*BkI=bg<>galejo1PqJqbDFv$gzXyK+)|8Vy`E5@lZRFd zxBXs}rSFYEFn0CiC4#PgWZ6EuzhRJ}=ruMt*#C_O`RPY4t8t8dPE4C;!!haQ*Mee0 zgn?>OJHf7-Yer@keLQ=C-Dgv(C(z-;>2&OP29<}~2KA<`t3TpIb1eA+^mjt%+@HUG zj*jmBl3w9Zi!WVt<-!9**^B8S?9uNb3&r*1`RYodRa<-uzt8)llzQD~pb;+^sm(1C zZQEzR9eCEaK5n6y9_-ciA^L5l|HJ&{!pw#z<#m#TbWwmy4tq-Vc-{A*`&eXcaw;L# zA9E{tgA$%7pLp9seeSi;cT37Yf8^xec$6K8#WEdU0M!ViS7Y9#2US1JKsT|M(TYQ7 zLKK#7&eHT^QIB-AK=#^;fX9R4R&%3|Z{}Tj=l^HctLhDOZ6WQ|KWDL+kFQ z6>;w5jE-`IR*z0wpbMD86&9eZM>;^)S52X7alU@Y^6b70O}$as@!_WyaWRw->Ynij zbp#}47cO2yM~E+q<>YHD24$1laAx#t-5=3XS6jI9OZTm&+9-$L0 z^}L|4h_Z9^*>u=O_e)#SokOmqOF21REh*OL?yLf+0XXp{tQ1ugm|UNDTVcvgx}WIk zORF~dz#WdJTWH}5rK2xy1=Jiqd(Nv(i09!8}4Ivgkdf2-!jYHZ;s9BRb${Qgq z_#b#-o~11&e_)}PXDV_=e{YiM?~g6ix*Xj;EEHoR$tTzuDBPOXQAR<4K-@$VzRMs~RR;2Qc=o65VrUdXK%kZQ1@^Ej48$t5Vj>LjfoC z^)wH)#z(6-4nQ5k7;IuMOJ_3U6O3t+KskpM`g&oe{)2-Mp$ct__xjP1g4Ey&V7a~g z`WH0o^WW^`epH}o-yh32((7-3BWg2Vo;+OC7C8b&sy-X396o=9`_P&m21vH5T8BLKf_7Cyuwaz&k2*To}hc{jsNqu^>p;nzo2zjIIY~>n-I`l9H4L$voGpq0B zfj#K?XYLdR*k8F5`P57v4E|y7jhiab)_uxxJ^rRlS9X>!*c^}J+Rm3&=vd4R>}8?F z|6=it28S{=O?B9gkQ~$K#CekFH*yr9+C+XJIXs@XiC=3uZqEM~r%|~wLkQmmHR07~ zZ=$fyY?va*Q-F9QcF*^;-!)yRe!c3{v{7xEFzI9Q?5PGyG6a(xcNZt9%Fnj~tGAUU zkqV0>+P)tKiu?++wO_kk7OX#EpwRpeM&zob0BR7fE^o%zN)dqywU@V{r@yWqLI^a!n!Vsl4sz!*?(+Nepzq#q2 zdliQeQHup2e7Gpxe{sEFLs>y^kcSUav5prcCTP`aN#xX+&lF@5tv4j=ioKY`G?Kw*2Av-6ZKKX1R{rcN# zn)}HFp|0R0X~e%bWpC|7ULNHYmfDOm@^X632=RW8(Ot>xV6a!L_Abu;{g2CO#GO}* z{1VuF$Bv(((c|8tKmWFuF>=gFsX(5oPOT*J2V|MY-xkemhZN5{E)w+v)kxn#8>XOt9c zp{{NGyQqP2>T{ok{@P#=3jotCH55-F!mM!9b9f?xcHTEfi|JsVZ-yx;P@?NOJlHG2 zECgO*?EcLtrjHL6iJVh;5Fw;Ujs@3Ij0z^DG!Ey@JzPl3PL+BUUTnu6A((=Ya6)Yq z)YRRnTU?P~qPsbah#|53R0+*F>>tJ+wx^s^5G4m2Jd!_AVbmi!uyNB0rs{?A&@uy_ z6#jN-(QZ1i>IijwrWY9lO`L}+8}!)+_3L_qG{gziTA6tUYZ)KwvWLa^KXCnofq&A81^mkDSdvalvcOplG_n?TOr|DNS z$=-mX=4mU3=)A#_KR3`%zpSu%Sor^)4}SFc`^VEWJ^GxCNePYPijFC(>QdYb>q;Ff zX7qf@Ud|KQ4)Q0i?l*z(>y*Xv!E1g$6^#K{I~f!Gv|?Rd`3f zj!WI`+6Yo{`mZ%_}I221slPlAj_v@+gl7_wqq7;tA1EypVYeajq-TzvG7OC>tkb zaf#YD(=9avMUDlnB9^5W(f8~z<@iVtLa{BpgUb^Y!&Jf{mP8Q{_rh};UPm!bD^HgQ>U>23qD4JEm!Y)+ zMOR*55MnZkbFeF7#gEqc9-f4rcxufn8wg?nTEHLvZLc6qfSMlNFrI=FG>r`d6iFpV z!(a?7J6@Sx-e&B{ga_)2yl&jQmu?>NoKyP=6>I-`UxfX>{PquukBg$)Z|*JFb2+(6 z=nTf|itEPHwlyD7Y8~eSLew*b2AU}neXC9=>^{i_Uo|Yi{uuEvI))lC*-V-+l-`*! zPuB}V&UL`86UiH(Fc&0>-SP6~A-O2N>b*zWBXD8*15@z$)e)NFQT=KIdiTuv_fmsuO)EXxs?f7Zh zuxSr<=~SjF0YfVDwW5i0hsZGJv4KX0*L0&w0S6v9Y9iY-4Gp`pOKH;f z0>R3geb{^Bgw4eAie)4ll^Jb9=;~?#LdgLJ0mOo*w-uCYoUje3Qasr>kfyc_p@!i` zVT=}^D587U<`(;=5`^P6QM>fmxSK_6 zzC3`~G2^YVlv=xtX5XwyZAwnEXY>uZ^>UiKg747$20aWh7BH8tIbO$iqYQ0NR;sa&I34rIqhJ(y0RB1q4_3AI#R2>|F z^8v92iY8~y8pNT|tCBqUV_-r05%{G-3b^pDa_#l|&8t%d~m-xn(NGvcvoK zcneieun28J!^4~NY26v$TqZQ^d$LgwebO$JuHY~s20DsuCv3^5ksIzJum|@d^tM zg|m8dl-8pPj|kQ+u*Lm?D){~b_RaG?e0wbYxu~pT+%-2oNi#m4Pmew{i1zF~N>}t7 zPj%T-8ZpeiqvE;^dxXHH9+E;sI8F+$oA)tJh5LcgDugf+G0;ed_!!oHZt%QNR||Ls z!#GbRJa1j2zM>L@hs0E0q@-kMcP@9rz4qxs&`*bz#* zyLNyGFXEU$hIp0@({?um4@|%Jv0>_ys3@@ieX3Z-b1F(JP+^$Vx(e*D=2n*Yu7qP4`xvC1ePIqofb=<)Z2!C0|s8&#`+lWt!n zbhYhwRcDHix1U6?@8r}t+M)d7(kMG}C-f#bp|i)HRcf7TbntMxcrP+C)F~VS47$EM zeLHVCt=+I&{Eh^4bW{ZW@bf=*pPTg3Y}>?OlatXv&fm^)el#qs90mOU7rZ!ArZwA? z@%YqxG7Y+1rn;W=7K$3cA-&=Dt<7~HnPW*#;W2r1g8vo@5ME85#LrT+%a6c|?|t1P zq9#uT2u1DMG@u6MG^oV$jzwT_NT8GFt_O87*|}p=TJ+<~V)3+U%?|qR$G_;uU;d#T zyAF$OIxaeu=Nqre@$9^X#~Cg-0?6sS*E)orZ5m8ro2ggL>QpB(TnWpl z`;n-u(Vz~rr(_BXux&4)jgsprWv@i9pckJ}NeIn4*3msLu=a9w@-4{2JURIj>d~!L z*>SL;cxdDe)Vifm#1zI21`46TH>ZpgZ72Xp1I?QI8|k54yHqkl%g;h~EJGCt?>Qc) zUKnN1zGKv=?VYszpDp5dct_h-e?)zIw|Dw%MrJn6p8LD)_oj_&i3fhkAM5Qthi<&c zcLAxj?HPO`=XCs)|9b^;f8bcUy_)fv91p$})!!rIWZNoe-!)(7Rmn9}At2WkH$r%2 z?u-)vGSHsA_Fa$>?n4B^U8oO#yNUC=P1@f@4O$Hms`%v|mi2#lO1-XrnBIKvJMk>O zGj%jAU-&v@b2uKIq#e?R>(e(VIo)mgj9^86RFdnFj0?QA1A=NX;V=J`q zgwmr4-cETQ2Xayngav`39ve0o5v*!goL0yWyK^i)c`Z1;yVz?2TM)&>U<=MYTp-%7 zyUSUjch&d?LDVc#IsGpW7jh`D{5%(KIwYS^kA>?}Eyy6qAmjMTyA)oAZO z2ZRMG&2!B*)DkEPPnQ`JQ?OYu0m15%bVwFZ8gJ5~2CY7}jY1-v<%~cicxBpGx(f;z zo|mV7NpHOSz1{l*uI)m%@dME3+DC2Vgi!WK?z{V1USSr|_@_S*@4f%gPvX50hq|M1 z$s|@)77>MzbdTBbU019_?E{Je+VJoY-k)F@Zx_s;(-hF&MpSHH=kAhvD|3pJ`;&NCL?hbaCYm$E;uAQ>Y`P8dZLaRskJ zJ|oKg*YhtMBG@Qi$CJsGRw{V;^FX!>;tUo)cMrLWIysIRD`40bELtTL_wkxJXCaLr zdoy_g^gH{PJ*QP`cM4Jx6ehsl%Vewn$6p(r2uT>@AG|Y;UVd)4=t&kH#?M1O$1G0I zu&<$%&?DYVy*Y$d zGgx8e6_qNA6kz6Id%hSZ424#a2D%$GbnA9^bKYvkekH`{4s|#zIkrBBCqtEfQJ)?x z6b8-JWk=l-!gi?TYQaV+DNqS(o=@O>p)=QaKwElmyFF7(Qw$ z{q*(oH1Eqv)S>$*@m|{TQ}p4?Uuo36{piKl=F*w7Ikb0w8ZG^E16|$Megzj56H1{` z!BlJ@VOSku_OX};)OfHASFdv}=tY6!^50&k!FRnVsON7_pGPx3nQ!|$2p1?mRwtmq zKr^*!QP1{wx%ebe&T_g4&(O2IM4P^p>DWn`+BT5{rQ0O}YIAaOEDt-MvK9P2UUdgI zA~_j^m4k|rLP0HlF3nMB*Z7PfNKtb@;VcLcoM)0y=j27SL}jcx0!9bp{=3g7>Mo|R zfWyKm&-yGyMU~G@cMNNbQk~-&;-vyzp6|T=+YR|>NSCzV-@-b}?p6n2M)l0wMGbZ5haBHKu7tpMoa z$nii4{8$AfgAzD4cXJAFJ3%33Kvm-Bv_krtJ)rz@tX=0=qv$z>4#FrJerInX{gdGw z+KS_SKu)P08|b!dl%fKvW{pU0R)O$h(7vKay%fsl`*tKdhfWt1+ELQYVP$zItvr&^ zY$PLlQF?u#&~z}7AB=-1&WboS`ZzfP(nWcBW#ofT-hYHno;pi|hPc+5*|c>(8`j4J z3+}ZSMu^qjSKlq8i7$LAq>oZ+#0vujeD~wuP6i5q0Wd}e2u(pp1eu&eeE57QKj67} zuFD3%AbkFn&uzaaB}UVU^fTfa=-smorKM%iU;ij74yeRefroj)4=>T^hu`Le_Y(15 zY)k~ztfA3DJN2Yb)u)5g-y+zv ze`WGL^w#^|3orlG=SNU^aMz4e1?0axhGbA`xiF!sN$-2TXu=k`u&fS@RmwF5^+WN4-C3%s|5&8!)W!oj^$%JCG^Yj;tC0^23b`l zpzsi8GKloUUOvXR*vRZFMZ1?uIfi8AqV9WN-QS9cZCE~~c%uMwmTcuMdb8*?}_ z&{zR42~=Wi8Z0x66HvfQtv}0}7j^;Lhj|wJgJ*_=F<6Vo%Xt_Yv`L|0cEL+Hmt*EH zByiZTW<(ep?NU0HlS^qid7?eMwvBswsCfeFHm^Y)`ZN}e6CL5G zVFzk3^yXmDkbqUutZ{A1%`dPq{h-XSd+$+t>Djx5#1RbCiIZnUuO_^&Vmarx@Sr&{ zlKA=tM(DRh4>dVYRso#53l4T~ptJ}KFw?Uc%=c6CELH{5&yG@TT;LPvt=}MRI7fw|L1Gp41EXu~+qv5&{J2r1UKL3#Mz> zpx_`u=RTZQLW@q6h~|U&9vCIesqi+s@uUu_c7)Z_K-0kkyg|qstvFp;p~e8%2imxU zZI@zImB?nV?wg~9H1AkRxgkQ(*dK2gM2#bqPQBaMO1`+WfO1O|qXeaiYm);6;lXQi zgKCIie4vm4N-Sk;Rl;s1h4u#(%wfLZxH8e#XkKA<EcdiQ8; z`&rK4a?yLL3?T0lukT5G`@?d2Yx)mP@6Y*a35^`l-znGg;jCXd52TQC#y|A|U3O^; z>d@BD0&_&RPRz)6q8-Kw&MjSiMMoi=y>7#9`iH~i2)k*CMV?@xP;hyk^4V*A?fHA? z{(Jg4b%NHzS&meIkQ5*1qmnCOAn4K+VKLhtr52 zyp^v>P3QU7v@Wwmw4B&<*7JN27;vq4VjpZ3fCVu5gQNiCHtSF!oi3sZ0f(B%Mq^yP zKx!DFtauQ%TE+RVsk;lQ(1U|*$hovJg~*30^EIa=wq9XM7u?9$FiJ>?q5SLu3J%rxDA2kh zHm)pYZO$&CSWbRs78VKzFMvG}wa-&ra1dRRoM_h~-5b0;V;=SC*^X}L*Ue_2urj=5 z$n&&)-N)3jSt_kuy)-f~8FQ(s zPX5OI}K)8qgwd?vs08Mz|GeK_+M>e#N4-D1?SZ`a9_`qEz&g{q7X1G#wqt2F7w z*+TCTJ;BiOrE!~K!a)A}$J<^lmhXG$4coRS@-_!^C^OfZ@4|LcYQ%{lC_>hxcuZK_ zBB!-`&yfllC?^=qB!zOAvUWR?vlj8ioX!uFKAGt8w}=gtwPn&`c53F!_A*rr6N*?p zMg34o)IUKLL0w^EAROi}-iP}OX~S9nR2`$nc4Ffosvll9+3d+K6`s#Y548N?$URs$ zkh;bztR4_E<{l}eUi|wt$zkL*pwxg|RT^8}-19Wq;L_q4)SMaL3z_dlNO)kmEgbA9 ztOX_1EhSmJcZ$PqG5rGh`jm=7;Ob$a-t}s62)$uqzxJjloj$kkU>enKa;r_B?x$~` zqtl$Lx_$V|BHx6N#=w4E>6>|fifsVBy0@V=ts2n0pZ})2hS(=^5AHZY)h?;#v>!xB zqk^0#Eu2%WnhCT;qsP~$XIq;0T)j~**uJkt?vTGprfwq|j>fXUxN z7vX0ZIs6=bz3!jjO}NXg{Ic+0(RKxmDpicQ^BVeq4HtlLZATYux{5;epg=4NidDw+ z3$K1|_nCDY_lSBsy)MnJpj|{Ew2t3Z^?l?|7ku}k@X+A3;ry_=#X_;`RDQ zn%{w(Rb*e1!@9767{`Jazy6G!6rH7P$a~B0!k<;?pN7w&wM=I6aIB8vMOF%~`>Fz{tz^ z*6@Ppl)Z*txY_K|`_sx40Yz3t4ObqV9{OL?MbvB6Z#6^|8|&f5>n|(&rQ{4Kd~^|h zM%bmIO@to4C~igS?&sTd1-sT=7mZ+ zHLRaPp`pHYhz0}n_Pbvci>#UNKk78`pYT9H7zPGj)Z(9~kf%T{_s;uY6*=Ltqi^Iq zR5+c=Q1U=amu;Xnm)HM-ml5lf&%0U^lXAxR^-8c;B4K+9tB7a+S(+LB0Q~Cl8dcjJG}B`|5)8hMpQ%? zrBr7ZenURVeBUUAle?j=4TodsqasDc80apWBD%p3KmAR^IT;P9qwTv6iKMnTHq9#F zuYb0%5xYb;_Y)c(L^Uk|bT}thFcyI@Hcpo$yKZmcXrR__+%3Gfg!m}h#bFM3p`-5U zPoICiSTGUwfa8VCkt^ebV&B^a^(uQK523#cU=UqM0CO*Tpe}(3llwpaZl$+g9YsS1 zUoMCdmvm?%@{cnAEv3<|g6h3v_aQq2g)y9%5G7u&0P)|CX8$T4pxbWlBbb_6z$?4y zj!AUzkP>>n{`AQaqD{t z7Q8MDRG0~MMMjaEfl-QKqojHpASA5HEEW`T(9CoElyAY-+gO_;HnTQI#6$;?S?K41 zT;V}9Pi&_*dPecYoT!si@?`#%aZ<;5(t#%71*SsNvs+7!+gghi2f~QDO6%+?!62Q^S3=aW{5`YLwP8kICoNEDTfgNHp%MW^^JFmTsUdWb zAJ`u_tf&W2$1^isGqK=3L8)B;Mmy_bYj#H*K4GCBmJ&6t!_RF;A99^RjY%@=FGN6C zLAds@r$3~3X8cIob{-UMUa*h?)H)<6?_YmiSMn6Qb|0qR*FDPHR>t{@uYEyFIEMuF zdKFL+K`DZY)2Gi0k48062)ltGgt5J4)rX?^76rPH#4?*qbmC;D7}J+t(o85zJU``g z(a6)&1!RJQESR?IvpXC=QNCA)1tettfS|O1`eJ5VFy%&tOOugK1&-7%Y zKx)kH2aJ@ubM#Hxbhd>4%_yPGXG<$Y4|fFi(}fKoH1kq<0#)hgJ2`oe;@yAPFnOw6 zjz)w-YX^vy>E0?bi*Bsw3x%$_S)~_j9vhAE?11w)s~9SZ<;k55l{v^r)l%bxff66_ zfm*5u6B`7`{-_2D^%{tCud`~_Y4P@JqiOLU>*#y-p0LtItX%~jUNvuke8A%m-$E@q z4j17VKOYkG^N<)wbVd z)Xx;|qKha)+9{bXyNh#($N9N8$n@3ArPRNNmtxB3>*QkW{=0gIkk2~F#sM!I9E5_` zYsOxAz_arD+uz!Z6M%5xQOH^xw4pby7{lZ)W+cgAd`S)+$Ab%-$wn&Xjt7^PBSl%Qc(=*P$ehF~2I6wIdw2tDm_-=UTd5(NVLHklQ_lZ+_=Sxb%x#EmnJ@O2i0qFhoH}1c|`}h?XDMv0qWYh8Fjg&sZe4l zal?$8{l)L};Qa&mv(1D+D;fo2wHX~%vCeKuymECHj)dCz+^?3{1YrRfD~m=k{p;`l zbh-U2dbOoiE$WuN0cyF$6A`)p4%Ti{j1y35k!Z>+16|i$_HJ<*(%j{rmhprSA>UhW z>_LZ)q|?@I2Y7s5A_}WP-G&GA*_VrH{ieO*=U@-=kEnh7O6R`+{Oby_54CGDh(0K> zxS@YHu>eD8QCrVc%J0E=BIE{2yGmjmF$}y-iC~*_TYe^TKoLTi*yH z)~iPwdhwY%d7sX8laQj4t3AnaMJUL4HusvoI$TJ9a?a(j4wH2m(q(9@1jRJ>HEbue~7vwD3qf>5Gzl-5Ne4C z52hKPC@d;GJZ&z$&!#4Uhs|AB%~K$RhwzH4&=D+R3tLNLNs#sAc!+AiHcjsS8L8nO*nq+PV7(rKBW?o?|;WEI0k* zpK0vqfmACckp{Biz-0U*FOV<>@T!}dT<$LSbJ$R?z!n;JTej}E87KhZXoTqWfH73! zMR*akRk>9fQBWf?&>3Ho?f zCziQf?>+yIN%B1UfrFO3k!CQinl$nPUROLQ&pkDamhvihw>2!0;b4#sAF23ckJWPP7WF)i%_qb~ih8DJ zUz{y+7hpyqjHk!MYTLR#b?f5L1E|0~J1Q$zrseBpLi(^<8_B8uKSOx^A?)+ zxlBz`WqSG^gLmG%DS;$IsLMa&-e7`k*k+jRyW`DL<9f~MdYl#SrA7Dsp zK1kQm2rYb5SabkvP_!A1{{lpBr4Xw)DGW&-TcUqYm(b_zxtu8U&PM~OqX&ls@2njt z+E}Q?z>7{4(-}5UC=_<*J&AA*!gxCh{9jD#D{#eCsiSl0$nmv6jtKjeb{3M{Fi9At8(e}J%wHyC$#36 z-9D5?)m4lWR3v_7!!&GduE>wwR-SRfh1*vsYK5wdaRQPN_Y5ZDYesGPRm-~;0loqr zK#gi~%0qxo$LsSI&$5C*SnDQD?GM5S4eQq^_j{kSN0pV6N6&E1>ZUs;i~dZmptj|x zD4-zVh&HY2)6VrXsa5k-yZ67F_ZRiL<`EHcM6$a}r=}v8fd{UAn})W})uH^Zw>_(rJtyypaY$3aE4qwBgTdC`QwRoN!qD+TRC}X%mE%`qY;;S%>t|fU+ojU6zUTpVOUP!gzMF^yQu;4&T zn7zCxYEaH%3f=`&MbH%*V-b;njhprf5&|gNM~|Ko%+>M$?+c7ns7O?Aa5FV(m?FaN zdpJ6P`Z^ddEQX)~*t$i1_NYqelQ|1GJhz&Up~x%doOT?S57{ZtGWNQ@X8Pt^}s;5otfbD)e4cQM*@myjg%B*uxn?IaND}G z#iDT`lpZpRd?Q*k4L8sY)y>pIs8uN2&MCIgH%Aqvii~1eq*Bq+-K}wgR9;4j;yG0% zuSo@;BXI~+(t6Y9@HmkmJ*=%+!U7WEzNAv6z}LqR6Ix^-Y=MU!6MM0T$>15B#8z8W z06n_4q(A>wT3UR~D@wFtM~wS~2elfW0232rh_s67`*?zYK}|d1Iyd#((zVpA!`+;N zGSc`lgXo(d6iFuZ%<0^*iSrkVkCQu~ztNA=WSabeg+c;ldVZ8d0p`jzQ1F~*&qw}8 zA|3|x!BZeDRLwRrF5#vjVODmo%_G8n!r}%ImL8Y2693Qn=n0DED8fs8uW!Gl4?X?d zOj@*LP5B0jjUKL@)?1kJMwz+^)FV7GP{{crOo(vQ>IiDK* z@PK)T))T2=M$Rosb`AQ{3oNuIvzT9{v?sSz$Q=0sC_i-P{1W;`p^2c$TBv)3U9Wkf z9;!rmOyXP!Aw4r)UCp&|5}~Ujd@$_6RoR**_An`k&ojm-I@t=8oV$aqms-uajt9F> zD-pu9avk?76s~}K0+!TkoKGqbAS$$N-9W^}VaT+Eh~NKMPd5$dCMFV8>K{6ycp;}V zJyRhs511hCAATJ@^w@j0_i*}Zp3D`nir&5V2zyK81-o#}_;T3#tmx-9uq)CSMeg0Neq&A(TvDe1p(~2{@At20R?(ys)5xl0$ib5pY*X zuEMdwC+O+$L?9^Z2_PB^nJ|p?kv!Is=R!LhS7AKd{Q$Ff5frFTppP4X>(jUYMS&@%(Di(=Qjp!CEqeITG>gmt(qMZ|Mx%sB@`v_@YlA6m>jNa14RiNm$Z7a{jV?p+TcLuf|j4#64sLg`Wy6n=HqNcDq z=c3>L_$Q%cfv8Ea7kZSy$Db_}*H#5Qy(P;wh{FBbZ|x)6)c}zZt{Io4(`2%kZOyx1 z$@I)|uuSFK71XbvZ|@4Uc=k-iL?%fUq^WoZbcuBf zT*4zI;#$geI5&mk^w3UKPmU8cAiw^$+V)FfVTsKh{?Zo%lhOF24SFl%k^&9 zxQA{T=o$5K&03|r0S2UL`@5)XmllFy3MnL9BN(r=w9~??1YkJLUU*PA_c^@S)Wah7 zE*EJ+d~xpDc<30YEqi1dJ5?Ez|7;@a)Z9X*(}fl~#)e`S8=^IAkoK}+DySg+8MRPo z8{dwNQm+IPC2NclTEBxtv5>u;4eXJ*tA~Q;bW?f8X=j1LN-Ga&`p5YnVKF&;DAXj* zhr4fZ0X%Gf|GR~*)Mhx&BRBGJUq zoq^H<*{x!)}Hz(7f2-?&7I(5z&msKbjxD|&b`@J68c0E31aD6C__jP;bx zj+~hGco#bm7aZZOS2z8mpZGaeSb{j5)Y{2x#PgM2QyQ8)n2&BfC>-YTS01AWncn4i$p;KK#jEr_TYm z-Q3IdYB;Crh4)kh@iW<@y>DSAM{M0=p)NxuDlC>LELf(0X3EsGZY3M2V%Pd|Xmt)x z0E>s423$s|b*j+=kGw^-4p*_-cvM_aZZ5aB&|NpABc zxCiPmRA#$T4l$yq6l*t05u{?YrGC zem}$uHiQv%^PL)Cd)m&RL2`tIyr<5^tajiG3m@f1{$3Ff(=l15aSE6kqEcrhMtn|g}S&EnClyJ?&_K(v*_WZ>f*sDA@_fbjnenW zisJVAO%qKDp*mnRC=4cbn`oEu$e2NF2-{PaK4ZjtFlvrr zqWY=TUG11-AXP8CR~eYX-WZG%kdrUbPs?GTsB%$sq%1V<0Eo3>qP+9=zVs;HL$qtb zB4z5E-v~W9c;&4-JGY3(LgbU#3tW;V!mVP&SSZ6A13S=&T2J(u<8dK!n>@xhY}zXp zKdyjrhOq-d;er zt;(ebHs;fklinF87`w+B2Dvv*y9&KCPC$&q#qyVZ3YNUr<6r|NYPA4_8qZWkPP_xM zmEvA_RPKO~85ANsfo!GIYJpY>m-Ku|E?oG2q{f^=`)H+89-Ow@VL1DOP6n;-(}# zUb&yr4}43%eE%Y49R5MP9(ibx_!|u2yC3{W?tu9$D99{~8uGD!{j*urL@nq4k;_7> z5U5)~stMw(_*szPyQDA@Xm^Y|f--mc1 znM13Wy~~C)f|?-a>k9endFbeOau4BDOqZ4t8z*J{cRRI4vcYZ=Zlun!Cec|pD!?F8 zIa;}k+>Wh<4}IFxcHEnK|DBlg{xk=Ki={6RyW6AvmLb~TQUhxz9PD}`Vtj0vc%SC^yij3h8t zqk6)eXqlj;@gl@nqv0)fH7PUaETo;g6|WC$BqW%-b#6hc*OtZh5fbWi-J`U9t$qGX zwxGnpy9vS*VBG(^MW*x&nJ&M?AVPKL8-uSh(B2~!TC~DIxAwKrb(fukh=k>gBEoCb z&uxGeiu{PDM3@E~N<%?76d}+D45G4*P#JC*hiD12h{rX;*bpC{WmO~xFy28ucSnQ> z3iPdY27s0}I9_*9y9xl$P8dRiZs<ZX=o z!-dcuyuQ4A{Rsun8W@qSJKrnF7#X~fZ0VrPVuv#e$y3;_CR7~I5~EF&VvJCf8_pA5 zfP+Cw6LnA}v^KMp4sbptyF{*VDG!GB@HzoP_1xgjI31_}l^jN`7Wo%2cD1aUc6ddx z>mN|0bmJ`#c!tvWAI{fNxB*;y@)@{*b*yfM7XISX@4-FhnlBj(XnU>7pby3jyHBu%XXOr$T(zEv>?CPJqmPaT&K(Z;3$GLN8 zs!@X!T2W38280RJ0wVX=re!^m<3aOGjL9Frob2>@wQa;A&E)^lr@uOV4kE-e=PaVT zhg?OjP!R)_R*uLq7G7vKq5=Z1@TTDDgJBD~Fyz1f{&$^TsDV0NB>T0t6du{gx=O2d*9sB5!$TFUbK)EsXGr0<%292Ih@wSzK(czzKKmFv3=3Lkqluy@qsZ}2 z^bX$G=B@jMV)^sW+$jtbT8U#w-p8R0)Ix<=SJ{#jK(fK?S4JkBfsekIgmD5^Z59>69l1vhXhN)mF5m*}U}ttz5lLY$xsbXLc<--_11VP$BIS-cc!Ko8(KZufo-OT7PPUw7lw1RE` z!jwUt)$(`+Tr9`qKUWvfai@@qVy{LD)SM#-9L1GTc<3HAvu4J&IHG{*!oa$gXF#qlAp1ceL8wfwPslg+5A!0H+`FbHD|y1u)u z81(rmpNnk>#*!$!#)Rg%nsj+EvPb^uB#B17EK_E-OpguaP-*N1R$%K-l%y-YwnADu z{i#mvWYI1ir46sWcrR_@#SOx7joJ(oIi~U&PofC>kq2+G>%SClEjGQ5y|Bqo4dJ}y zVd}^R2!xEZ^b9fnk)wgq$j`s7qz5=u_&0~KjXIR`l450IM)CT+cU>zK!n1gMLdSCH zpX)_*0m={PObhX1uu3nxa;(tmJM6}T%I1(Zh!@e;X931GKfnA0bRru-S1J<7%MKec z#U(Kb3&QQY4pEoh4~nLU^S+!!DV)y*pvtZbF!yr)B5z>&^2oWB{KjqT8E>R}Qv)f$ z=z($a$MJFa3q_~i%J;YhoIZGEj=6yIQO=ZWWj68xO>Pk^!g~TRo>}MUfDRQ4vWM&t zss*d>-Kh`KeGg5uO%SfA=PDqMIbq_*)Xmz)0!q**>fN|yuUI8Q0s7uC)9BSVzoK`h zK0v)VX{|D`&{kyEhM7VS3_5A(s(J~pR?(adiV~PeK*E6WLiq0E_Z}88dJrZaf94~) z^`>5;WjJc6P+Jof8NyzbBL0eY;rQFf?>-{Je%p2)q@~L?2-zDmu(*$fHCpHt8-~88#lG42}QN|86=4g-A1xk zvES`B;6)r~LxVBp2z7yk@Z#%le=Ei+h#8l#L52P#ij1>!^60ZK77NWsXi=`)ph$CJ zo38LakNw`=+tAxnM~i1~-~KfE{-?jmWHN}7k6!#Y>>JEj5E|47Kz$da3oO=#-TR77 z77RV1a2;R-9gRG;H{yY5LYV`ALQMU-&fAq`)KtDto=lJ``xfWomxhI&B8Df>huCXs z5ovVaE<@y;iWL%pKM-ON3_CeoQ^QkHZwlLl%0hsHku5zhE|e0!M6W3<($pvuen+wG zxjLl1MM|Den+xOXJbc(yLTq*F+uwN9J{|br(_h33K>lF$pYMv62VeiNjFvB)M%N6S zASkXdGMoOLAq)k8l`|$P7#skr&qi(U6hC9q_;caw^y(X5iEs}R>W!^`15WXT2HNjY zYtC!xizDcY-tEN-93q?mR>>e?JoVUZbjz^kMI8(}tJ(}yz`5XC|HqNH7L-Z!ZE*V2 z_j1#?F%Z-#b9$*53VKo@haXX9O})sv*I%0pkTcc>ndH2;bo# zc~QZ+=xlw7B<;Cu+b`3I$x3MZ%}3>PqXdUJs~3AsXlmFp%H-ZSsf`BH{OH*oQ}pHR z!(A1ewXv;yoz=j3vQJ{aI7bbGMFJi9T(iCQ6q2k{_y$%Vl*E0J_6NOp_T1m-{Wr!? z^`tmTt`V^|^lhn1q<1O>yhYRwMn!;_faaUd*$aG$DdF=g6U zVwDT^broP4LW>NdoGN}>s;RRvCDKJyGK!9n?4qT~byr_#b@sl3{*54e2w#+ z_#1MkX*wQ{w>3&yU~D4Sr3EH*jP=7u(#10X_9@0Llvui6{tz{6J&Y#5{28_AG@Lqg zA1U&@I5z-A!~L)AVz)ii0}i?8Wue@n1;{{s2RtTPlYBArNjkdgOPbElB1jUBxc9DW zoZgesAML~xDi5&VJ?|k}vDrY&H}LU|JqJ>yonzQAwF#jI>IK=9CR{;i>uoDwSFjQa zSC5w{-h_&ZvfE0n2Fh_VKA-t(D3Y^bmtj2Biu|7Yk@ViQ2gSpo z2jr{t*gtp>M~-_-2we8Pyge;gw3==j&|R!hL7mO88YAoyM2bcYYVs;hzhh_L>mL^n zuP2_|)*S~$$fb!x(={kmJg(7XTga=;5^J$91=ggCsBEA;%pbacK@JDGL_MJ9?&`iB z1$hU|KD2!A#d%1C*tCE*fH0d1kRC8*5&rFQSxX8D4iZKXp<>8pEnl%&^k7=De1lDS zV(MG=t!FTX^DAJWV4R8_bOy1_o9>t-yd-adPSDzBg4ou8Tb`k>zyH(ev-sQZya>B$ zz!Q|x=oV4Te)GT{v}XBxwvGcpM-HWH^LNUZc}_a{fk*n3u)mNwQgQ55C58A<4|^3S z%zGx7DS?yr22bQ^@=HbYJSsRxE=WZU3C7ytVxb5jrD|N-^C_u^O9$zBSz&w$oR5A# zXE~gDyqKhF_Dmj(1B40?KDlA=v$jy0if&z62$>pfza{{BVW_QY)OMJlq6Y^BQh0c< z2$LiwMB5eGKEkWSm#2Oq632RQq?zA!$Cdp3O!|pKcY64A&Tq7Cqdi^MafHH~LW>X~ z0&3#igCWeVu<1qk0r{JC-&SemppV1rfrJq>?lAdcQihaJkE<_OY;FKEY60ac0!+wR=^LC$w6p+;O2uo)LGTSvbxDhu@?oQ*oc zi7(Eg`HTLg@8(Pt9@Ar-yG2-i_6LtSEk5O}rM#H<&7)(2ZNIUPg}(kxIj$RfTm0ie zVG69qhUofa6TR3hh^BKW4~h^d_AS>qfeeveEY!0r)i~jti~MXouyAoaX3IG;u&!WL zrNF{P981A@vY7DXN}TtN38YQS`XWr{2&hZnbLZ8;8I=hO=?Q zLyr0tHH3oXvbHx3SawcL8C?K$SR|J9+ES~4xAadr9ZHc@RttV57$;K#T|_0rjd1KO z1AB64E|6NasHc<}1Ssq9ho6`(l*h4{z&(R!pfwuWsR~3Lh|Piopvv~ZP?UIRWI!25 zdlwbhPC=o($|0;Fv(1iAH`Hc2&n?w7z&Y{mgnPA(V z_E>T3vP%SFglBUiv@vH+G|ec^%5Z;ZO%y#sAFl; zsFsqr4{6QkzmG1$-$1c_thLt6M6QHm(b@%zo3DTPliGB-m&eZm-L0Yh2AcSN@acS7 z{L>WSse^Q*s+=tReKox_buQg^_jQ7f?Fn^T3$XQu4!)dH+50c#1PcUT0hB0;`b#{LP}NN5X;#3p(JpA72rRI?%qaz41w5 zd?!ABhtSU}=0#%H&dq4<*Goie5g;lujIO$(1BWMf(M>}p3tGDtFopweohTZOZe00+ z2(8bX|2Mt(+81{Emg=#g&(x=!)6+tRTKVx;c@ckxyg?8f~iRH^Au`v_5rW4lo?B}W{(ZoK&U zndfIx?;fpb2tVM@y)uU$edDIVm$H_%0R35jDr zQT;e~(3@AuNj&$Mcs?m~8NSBcbPs#rb2-_+#lbk$sg)#{o^c$Gt;zY5Ql5;z{B|jg zf9eBK;JbcfS;u8eS)iSxcUfEZ`u|$FMTC|I_Uk6Rg=b%yEyg4W7Z@v`hGX)_f+{e` zEV}JNM0N^$aq#Ss&jh}mheB|r82s;lw>lmFkH4&NdJj3MB5SS*g|p8*|EcX6>Nn^q z5ypfeL^L6Q^J8cw1LbiPo!@+85AnN-&YhZyoYJU=-=;HX^h43uAJ~4P7OQJZdUnE4 z5$;5JhhxtzX#UmGYFMmj_NHS z&68Csyb8(S2jc`l92Q2lj@3w2rM4N_N(=Y%3V4?=j`8-6x=O1>LGA1h#?#PyUl9$@ zw1DVmyKeW38Y2KJP&6Lwa!E7#=$(fJD@lD&9Aoo{_uqc^OX7k0^}847&ih~0WmVmH z`y?A#;uP=ap~uS%5r7sBsOaCfzpU^UeQqH0;)qP`gKoY^HTN5goOG}8GS4Hm?F^D6 z1-tzk8fCU?(?EoxTD7Q4?@t@Uq1vrNFAudkkmi9fFpLT&<8>Otqy?CF53omb-IbS6 zz&aCcUiqQWlmum4ZIB2iU07(4V0gk{L4_YAij$lh{r;!F=uXaa!UOY#%%B2aLd=>lgO?MLGTU;%^sWRb19eCIj;R26Z&$jLyd?WSwh zOc0dsWKJY&4HUvNXtBORC--yn(C28#t(V&#E<7k^9R+DnzY};O>D{BP2m|VAJ760K z>jBc-thpn+-&0Sda+aA)MCx+DFU%{xy9&QA9)tea>Mq5Np0* zFAMnivjz11yuWDkw*9uxj(hxlx7$LPaO~(CZNE2bQb#C^W3ors5B;AIjzgXbHAJYh zgBPe(Z(h09R0cxco>k+-{H@I+Blr2^l(XY}hrk_^SY z>d1z@gz^R!nkt0WUiv%aE{t?A%|h3Wktnx765E*boP`Emq3>5#VYiXXjbTjDue<#`5ulF%n&wsH3G^!C;JvT7XjqSqA{CfEn38+ zgjK8f*`hQcG&{7N9(8YjisXm(l3owk!Wd}jU65ZSnxSpjRL1gytV=?izDhJGz^I2p z5$&!$Wl42y6T*+*eOT!4A!MS5FTVZ5?)N{IZ=f-czT@;cyF8eILsG^Veh%C#Q2&>K zajs(g-+n`p(tuUCc@Mx zm|bNRvo*27g~x^(D-_EDSll60`8$WHb2xmcDzD?(BKHMD2P*uE#c$Enx4v;|SFZ)a zdFY{rTE)SfcLmKJMoo(sUz=<9d+#1?gyfhCS>}oU@HkMi$sLxgwy<$BS-&IEpX($x zQ2L)W(ds-!A_qmCNG>6-g3hx@)flb)g)p~BR7TCVSYI%1Mb;PS&8Wl4uc9+F!iqTl z8rI1S=Y(tIYiR;b^H>SVoXe7u1Ipg3LQy`y0=j+)CZ&HBYRYmfo*83&2Km4EGA%^) zVMljSBxDhaTczo@^x>z!(5&g>1+^Tc2uK}m_-8t8=GE_YgPs;%54xw~0YsuUJVL)e z5W*fwb#Jsk4gTKdRUgom1D+5oLxeT%=Fp)lfB|;(6`knkg)2qq10ti2Mhnmu{z|;^ zm(7V64U`+8Y;5F9B#aYqFwMXdmrOVIv3>wVh`2j+zpItPaR*G;Z%i2}dX2dPypp!9 z>I*OVk6&M>j_n!=FY9t^za)#L;t6FehMwlo8Gw2@wD(W}R$;9ajwJMIOYeR7lL#rJ zi~>e$;k=irdi_Cy4v#SpB92;uArxBJm|b&aC)&F0fY72GKJ;qwH{{Xk*Gm>O@(!1c zqJB3&W!KM41!}giuu>Om&?1D$>zh+XaSpc&U3vWzF3$;G)6DnB+i2xN$_U1(w0s6_ z_qGP!526+*L6WIm6W5SFDhra;C>K@0pyK(^DmDDSYj{GU zD#WO;13|Cf=wa&$P|i8bC)PN8;nnsO5R8pU>F-ow|JAq4M4Jw^W(lmm)2Fkj4jU}Q z;@^68lt|1%rU;CvXb)Q=0A`*5QfnuRJOYx)Xy1M8xNAcKRrLq%8zA=OPSY(sG^Feo z46XoPF&DU}r~j9MOXMhcZ5OHK+>_)$*N3ry)YR-Reivkg0oPnAR`IR`PXV+;f#9o} z%hUo&5}(c(FT!fAyWC4trhUQp_yq0Pb;y>7!B~azK3H&$~Ut}8%n8_(9WFU%J2pUut{3qw3>_`ceJQw!vd z4(*sL@?}limF19Le*Ftt^5+Ix{PPsL{pQ}{TI=D%x5sj1!djGz1;gntc)WYo=c#tG zL`!GLH0!5Q>fggaJ=?opX#BTiks%suZTTxCl`6_?Q@sN0PtJw=z z5ni?Cy2Qtq)og%)=NM0S?AwIju|lj{yP60GBFysqD|3Vr^s(a^BIylW)3+my=J239 zNE#Ox$?cw3Jt8{wx&p**m;JTL&NzL4XcaIp-+uOt?ROMY zKlAwQVo?L{9V#F#JKaOuwjbm$*9zf1sfGwD2@oEB=e5yPv%2frHW-fJKV7QYR2(Rd3X(lJiFbscfL%l$L3OAH5kp8t)Y~8|48E zI;cFT%q8TA&u zP$Tv7>tEV_$7&sdq;*rP*?rDQ;>F@!V?=L|S74zdCoCK;s;t$Jq^MySdEzqjd75h~ z9-;aIOVLzK`MUvz*!yV&lT@>M2HN=@(S|Q9^wS##3Jun_ifLi@c{Jo(vTTD;GtdHI zUi__7_tDhrnn!3Uul}`RIqU~Tq-{8ihlz0Q@^@+M=z)TmgZ@po-1&l&x<1;yz|cJL z@U6m|zoh2_LP1{z!f;PKd<*^dY zN!}$k*=p z3*@hr`A>hAQse7oYI1{2zpb>KTQ&3ZjzCHDloRj=>kh^UO$(uH?hke#=2eh6g!+1^ z@c2aGZB;;KiD+prBps+BEIJP95rk`R0yALXM=P=XMDiBy7tOT zINxKW0oPqhV>#b5Yp%0Q&lSDe(_>?A5v)LrvwI(WUF0T_=RwULifn;7UoIwp11b;q z-F+!TYWky|a+>1yE<$ zywh+yfm(zGKmX*3G9!onPHE5c#m^&uAdk}q!=8~SGg}!CL!XiVV+IP(l-kq}hQ+(W zaA(9D6;g?8t@}FUyBMTEG;goEwdo({dE`Vs#tr#Zqwp69(Xj2TbCkz`cNuFE-lp0+ zMg{UgOMiWhT6G>FR-XXcyrZETQ~_Y1RKR=r=Ch~i?om@|*5|)b=Gh#5f}37i~J+g*yPSmu?zx8FlMBR{S2%;hN-Rg$k?%3L8PHP+JxNxLq~u z!X&(}V)x1uzG4bTQuZ8Cj0NgQ7Og0y0X;peWt4)HepNwD6%Qq-J}=l}b=y|B-iFGS zGKdbs%2X1jXb=Y0vj425Kv5lsZXTKp7VK6GSUD^&v@DSv+LrWWV}l7&tGfu)Oi7># z?CJF4T+~&u{rkl3{<}X}H4O$PO<0lk(s~>*Wgx)GTr<4OQ`FgSe#`QqS48|>blR?QGMy6%+ zRMFHE4G&>lwd_>%mV)v*yua%Q?-G#%$UdRP$e8-{Mp>#tDVU3x9Zt zYSvIfowCfv@8on|i0mbQ0WA3Jyt2g#AKHH`#20Sm(_Yc&4P{IW06E z)P!v$l?s2p5h^L3oum4OH_ly_MbQUjpnZi&LoLUu573e&(5q?MJKs79%0kq2<*FSV zPPs{VJ;+sICE2oBT@kW_G?JRrLc_xW*L4vg8vt`FWM9w{!4W93L=6ZgEZ~VpZlymL zOjQJ6#W5Pi{*br$oD=5AO{svcAT$AOfKY6S>kgw?duN=yg&~L+gSAPDx|XD*he@jSK2aT>Fq0>-H+};f$!7fg zIB31WbBi77bX>TH1N(Qg{SNIp$m^_J@)q6DzbpN|WUXBfBN!p%4w0v7dC3UD484t$ z{#WwEtpW_rZL2?`7bo5&#u3IFyatRtt#LwF7x!CjFM;u;8YgdnyqD2fvFnY67KE1T zwH!iyt{qPqnK>N7Y$C4BhqHdAx2Dgd57-le(fRuOWp>|1=nkqAPnR`>JN9;&f&!G+BmA>uSy6!)66Tc%s~3T= z6bfkw;9P1%J6lj6P*EC4k=DIxJjTFK(@Gz>EwN00ctsd0*&TG{U zASuygm$Vi-iW|Jlv$P2o$|6YOqDPGyPQZhE^1!zuZjVl*u7G4T9?(|J>x!XFHi@KPR!VcMOrC9H0h2n|=A!haH^=s*=jFW*m3PWpuJ<$NcVdH|u`6DKom9#bqYB5q|P_338|Meb@k zPtu8;I~+3NWjdQ>AEv^+Y}>lN(1fhTUc>$O^b^IZP@ixFCUo=-LyH&WOwm^f6mNKZ zpsl0W7lq*4*M1^A7^qNSoMAk|DB##jE$43D1OxWDr|%R6xoX4$faq+UTGhnyslc=O z{oH3orvVjm9(%+`A452b{0)S052ndts;QZTb{iEbc*mrb9AML0lhJ!|S8$pl9gmd3r*9xPE9z%9DIh7RN1F9z&XqBy2)KPhX$4?M@cJb^X1=XbsqA1T0 zs2C&{MoA0M#XouX5xVBa31ZUUuxXE7{hStkd$$+;#RlK?qE-8j=yYZ_y~Un|3bZPB z1agc|KXyAUUbdd*eKA=Sao>3Rv!Y(f726Yv6`1hR9s?mW)a}9eKx zO$XZy_~9cb#Y+VY{BJ+KV&6BaB%2raFI9?h0`MGxhOWXyF-Ap($QM9O7WGpqyUSET zb%t{R950k{CCNX>DMDZT|GEn1iqMkYny0bNb!xc(eDfrr*9haHwV%GseJJj=YCm4l zs~t`MSdkXOLwLh&lSHl{%c_u!;>CkjNhAO?<8OcbOFZCEan`b`unK(m!JC|R2R%Qu ze6MAVnC^!)rHp^Bc9qo^-Hy##f3+I$y`99}A}<8T`!mG&JtMm;a% z`$r*y0*^%#^d+mM-b5K^vR&@i=CQjuK7`K=)_N!{ma&)g(xl;3KQ&n>W;g;u%PW_@ zB_xpSaC8DcjOlc)AX)M`>9N5_uLs7cF|UBaRoM!V=nE7P)v5{*8zAm_m{$O4e#k@B z=2<(KFT}|br6#JPV6Rl-kQ%I%oL#E4&Zr8AF^JX~s`#%@A-)Lq5*r7Jb3?MbUW?o9 zG{01!c4Xnam#BTW`$Ym+1#&=;hCu>cTQrFr(B^+X5ULT5%q4hUTB({IU0c%IQy-w# zT}Ifp(WYfR;l*LK4DYT%y%gHA&ECj>J#|^v7NR#4bly%M`kr2TZLSd4L;h8yH9Uxq0UYLZlr^Gp&$S9IRf~g|1YPg>;APCKAYv^ED7R`H^>hh$! zioKSruYZEFa>_z?nE0P(PX~IAjxs(fe)?)MP2}(!`Xjjm)Void$Pny8e*)tS-WTT5 zEQh9>@F0KW*B)Bo|e^pG)Nc7`@>`t`w``IG!}Ntole8Efw<7r+AUJk}4IZ zBwnVE6GQ_^@{EkDw7kjZ<72O2=Pr^@rh}HKF-Wq~q8p#9Ea77qF1&(xp%N2AQfew0 znsRtAHrA^aKA5&vtlCOFuYN?(ssZEy>(ox7t8bVxJlpt4IMg^PMvx^ zz^Cl}vx<<{lkCA`p;9X)Q8YCCc=iH1m%w67^rp%yq>xahlXp6Y1mi_xK}mRC2s5f- za^y?5uKtMHcD>JTu?Iv)g^OoLZMF$K_tY@aCrwYCL*9F%*ZrNmgHa*QL|o3!WJ~@v zO5tV6Sg~j3dlyQ=XRV<@nI{}6)XK_&H&KD;B>ga#CQ`!85|WL7NCIpf3lCG*m=}-9N?7 zIK{Zewxr+M7;yQZ_EWb)E%+Q?z$rOP%reLj}AhXodtzY*p` zt_R*0dOZ0fpM?CU9vrdHDI72?PkJ2SCeg;uAvzP5j?K-lkr>vfiu7Qvs(l z&I*b-JSnK00}bn^&<*`Ar76?C5)^W1^$7`?!XhCyI%-6JYTu@z2p`=t?0Ki-L_wz$ zknqp_i~J5e%!vxAP{kHHREY1GlG2xxL z1STV>i`=5p@gz*LvauBQ z$jMe38vl(PH$y1L&cVH&9~Tfi|^=4?q1?6#d4_t=x?U98UVR0M7!?srs9J!vg)X}A#L#Zx^y#xgo9(l?ztNo>%0p-e za!RNhL4hQ4U@&Ir(UVd`N24w3Y9*1Jvs_VEs4xsl*du;Kxn7f;l}(ma|B}3VH44kf zpD5u8_09#m>4&|_1ifJY8Jd4X6AG+gZI2z0FL+i`hYn<5VH$wGpIgz>a+XchE%$(o-<3wSL$ zv};7w*?^$fwt8}`=mdZ;Ba9&OqQ^Bx^QrN-iBL937yyhiigFzZ4+!Hu{J=o|{Oxvi zi7ru%w|8PHFHTX&t4_{FrM-+HScK$+0Wt)Y86&*R38E9S(hWJ#tNf$H$x+4e+*{~- zk{{y}$^DuER%<7d>}_5P#|#1kRIkHLim2-W-bQv6@E*=3taViq2VX^D>)yhup)il} zTPuL1c%>dnhIElH9eY8iZyID9q4jSApbkwk8~c3iViN)Vp$ z@?IKwQc1XvPq3TY9E}L&vA1OT^;d=LPzlH?ETL-eucBg2c=ymf?IL(E2z5KbL3MoG6Yqcr?r zlpazT1KP2MiNA>Rbuexq#=uMOerXF4@yv6RjD1~UqFIyL!aLN~H+ck0G08;-6;Dd&HAX05IT)!55MNwDvJ{resBaOI z;kJB5&A?lPTKh<$pi}9opd`_E6ngFjVFF~&OG+wp_e6X6edjS=em;OuYZI%1!d$ki zK&UXBcVH3HfF}xgQ3&atvEE-_w$nOTgo6RZrxBy4(O0vdqQ{^9kap}otmF~u)(|UHE!}q32jgk> z=f6=sP9)Fc2VZTwfw0Wb!F_nu{EHo#;@Yb&;R)|4YS!Uy!T3YF0#Af*l@qn_gMFCq zC3|jp?A;WnTVwiq_m&p{CSHMt_u{bcEgS-I)7~75!R%}*{r-D?R`yY4qL@QQy}sT; zE7O!*P2-p#T6t?r3O0KvwNz1XxX;k14@u3NlN9K>#Rh8FAV>B4AL~SM?r|OO2t}z- zp#Y7%$5rEO?;qxS`qlT#bi3rDARFToMVap&@V0_dLe~!&Z;K8>=x; zY5e7b|1krV#MiKzSz!mFE^2QTIDgCqscf7gHB2=~MeX#F2H7~Mj0nO&yX%D1fnpW; z{KnsCfD;@oT`})(D-!2oLmx#5KWUIozibHpwy!VJ$eHLp-5(sS^ z+CE1#JA_Ud0QOS)zHeyEWAD+-&+Lui$l?9yt=C3TOv(UT_g~=sH^xv0UUj#*^gf{y zaD4CAC{oO4Fb`K+rrR5)hj^+IeIeV7myuBw3WaqAZKM9m%m1J{W|i8H4^DjI=S zH3)4#Xjqo!u}@RNPqk6BtWl(nIOie782RtA61MS`H3ph=T_{Viu{&O*(5}6)cQw#L zy=-M9?=Mt{82>fEMmG%>qPFtxDiY$uF*Oe^tAheLX19+93UW><_7fY}MNpd70)&R0 z>!2F3oBFYFam1u2hf55;`lv)_a!1<^6#c?DA&>FG#JlX8 zszEdqUe@`9WOZH-pBU63sSEKN~7py1vQ+P9wx@k&gp?J-rHek+_FoRz^$86J3!|a2^|9 z9&g$(A3_kbrjMsS{l?qnePCF|aLgPvO#l3ApLYT^ymrkbo*a~6jNAaiIuG1CfEN9} z#?Gdq2ITr{FBM^$&%RtNWR7Y#z0DRn)B^Ne7%&{u`_snI9!@MP54W<#&O9+7gmS(h zXJ(S+tFItKP5*fm@q+lb->7usMl$s8PloE%oj!v5*u85@+O_^udi#TUB1Ef}830c{ zdK*3c*lmJraNtmxjv^K_-_4mwqaJ?CuH-=l$Ox}YzDI=n?iz9>ea_=*+=S_3Y++#o zQUkmfuu{QJ1-SwZ0I}E^bp2&Q@#6l6-lVWlCC9j9_aUWCyC$au5#vEao)aumlt+|s z7<}1Z8>wdFTXmU-0D6<5sUQ|)QIX}>%AG5SMMNHl@G>$;X7684OXGL>*{ZvN=K^Pf ziJWJspqjZWV7@>t6v}{4deDXfp9MoKNV6K8|L9V1r`ZLTLo04+uGf;Pc@-;)+oQ={3)d;1hi~k9)oE+r^#gbx8*gTN)O_v_ykiWCn z3KDGP7$|Q6g9asUcu{I7h4W!D+E@I?Smu5Q@`5~B3Xd$W0v8hwL-Phw31T$7V#8NtcKFOM?PlC1%RIe7t;o}DO4GOJ5C=q!r zt;)V5pg01?A3Uhbd$tn>Z0_lJDNgBuep|u@Md4P9_FgI!ldv|Xw7^r>)o^_$O zSS;%5gaLw~feHxz&(0RV%i@3bf(i>1&)(DaA;waYdL1Dt*_q@cmq=B_KmoW%AXvmH z3C}7elE-X@v zOg19jCwl4A7P%2lW3yJHLS3y~m!)pCshMG^>%NDv&*2L5~* zDx=Z_QJn~77%E>46o@RMUe1~m^T#>y^^prX7Zqr~%0<5EkL4Rh^}g6OuQcx-dXS9?*}=wC8JT=NF4h-9JyxTLs%UgVcfL zC)-g|_ee(qCRw0NyeP!%C!5EJx( zws>Le{lu`bsTCebE#gDz^4d|*A_9d6bYX+XYHU799nv{vP{?DoY#y|F5cWq)73h|*pmAwzi+P+%eS6KP%HF!KYd(h)6x+};u zMO#~C7|UYHv?;&*)pccoL#7mGDvNPfq_|ey9zs-5gx~2W1{rK<%U~xj3cy6sk&O}b z^8mEx4h{*R0|)K%Nl=gg<+gsSAwqKu_~-XGX!aMs3+59P#~ZdDDnvdT)~_L2Z=>Zr z!hkhv#EWK!=!~n9Fs|v_kvg<%Ov8s>ExM^`_aQOk$5pisF^K+2r!NL(yT*S4%_}<$e2(aYU>{ctv6C71d*J zsBK~xUBQN^PGqp~j{a}KVL0k^oTSujXDA=g>{D{J*jg ztU4h+4t+?;qCJ}Odub(4>bTHRJUFXawdHcH+H$@|7GdDnW3fwwgNmJh9_@dg#r^Nz z0@n=Z=g)-$4rx!JC`@()rx#+{3& zQ6#1XCHEpK3^ZX}vqro`U#g@eGBj#LQjHp*c`ENAPs54+!2Em~S~r}Aj_X7DX(ygG#PH$VvW2i`<-i z(KG1gA3TswGNg$`o_;o&g-SiZbt?E*4@K|E2yfr%+LOTlNNL_$(m|s~sR- zGMv1IXsqZkNmTS|U~^h8rQkeGD(EW(DItx)mtib(Dri`Wt&?a(B@CM#1quPf0ifif z5g`gGwP@F-A^r00^P*ZF5V<1F-;py&OUt0HoS#wwV?FVD-o z`eo57(PClfZC5z;$`RpPPjwp!+N6(R#?e_nO z0FHb#Jw?>_Ako#FbFJrLZ>K!7A||c_`DiFrCaQ*kQlXuoD*MRbP54{m4g#;*rheyR zoMZRMJMoI$F5HMbTScN#I2Ww`g$xtGDYUxZ4VBw(+!tEM*cS&&xC$(G9jJFHhgH<_c&C}&q(u(#Fdd=uxH1v!5_}y`I`^~+@@94*L>E&bSg;(dg+}tfi3=v|><21(Z(AVW+3pC?i&1WhjadI$c8bq6Z~(8H7R#2D003&OaBdqQ^N1=gAb zl5-nUWnv_CeOrn0vKWS0f(UwC+B-hhtw4r7N^l|jW`R0c|X(JmcEkKfhw*>_W;4l6k zQZ`-K0726XMZIg*@1jpWTVQKY2OKHQUTuv z=U3+}Q8j)BL-;~TrDnI!vqx_p}G~Tw}~9m)qOkCYj1u{6JMA`cisP*-8P}K)}Yl8Dk-(UMvsrXMKm+i zLhSFb7qL>#b)s#G9rTPF?w8(>$TBam0gjr;*miv5t=uj2?Nhm@choV@f`V zDE5duoM7XWUnX*KlE-*vpziiPGlO`*l6lr`5?DDVO*K#k>pGmNCKyI#J&%gtQxHg1d zvIq$R3l^;s#kg~!a?S<}nrX;6bzpBxYXBXM6Y8hNKQzd>$kLnKC31i{rOv0J$56#4 z^-ee6x4uN^e!Kr{0qs9iK*g2|1hXJg?diZ^qvAi8Ovv>7Krs50R=!;4*h#XZ2- zLLp^MwEH$GiVyw<#^crkMRfrOo>a*zrBWS_!XHsNr~rUKf4_UPQ4+TtLaHavQ_LL3 zNXsBZ{^>$vDevY`pBu_Q4AUF0jHH(*4YvumW^#zGWA{QBJhX zhNd4{Bdl2bCN*hTQ+L}4>7iwIXsCT+Sn-~`$UWgc?6DT|TCJ4WhO0S2$B@WHzI9X{ z`^SE2`0+Yw_{lnYaPeNcAP|Ogb#Z-67tjK$qR7@~&58HY9mom^>~Z!uLWWc}PyzPW zNIq>X9%he}j5^oPjNINi)H~$`h*T;$Pqn3zQlP8%6)F#GpzK5~AwF6e3mIHLt9`2U z=orK^_7p1Z5mZ>@itiVjV`Cs8Tm!22`C9PdB5GTgoVfs#%eWV)D=UYpKX&v$`u(R@ zYpcjEoad$-fwCiM22G^*wN2jm!i z>6@lKhhjIy+d7-}rO8|&dr#l(K5hGb-rfwlAdnTLtoC(IS&C#MAM_vTuFW14ZHpFa z-dc#Ea5m8Svw<$gq#vEgbVq{ku+3?y%1mK2dv6;RB+AP~gYw}pP26*-5`q3Ayn;!|03pVueL=k>@k zuQpl!N+Qcv&MDtK>t4FuyQd~f`L+VHn?a}=V%~m71Im+CP?_MCYSts0Z zq{z3@2Wyzp<_WnQ7JBz7IGDTzLX_|Hs!NSxf~g6=-tSYFE(jnW5$a+Qfa_-X4~6;2 z%9Mi$YbJY^d)PRwNpe;W$7eRjIORFT?@%1aHA4*(*m^pbPf9FMa#;QV=4>bbS^mDD{Qy%hk66}=~;zOY(CZvE$b~~|obcc3E6_S{8fWIp_nYTr+tYkL$jNNYV=jnkqO~A(z$i z6iM~Yig2U6Ihtr)0@=m#WVGvXvmb-6AwKLQ)Zt^5B}0VB9$FWaCr0WeJJJcVvLCym z&~p`vt!!YD(|Q|O=gCm|8@N|n@=4}AknE;#6}3{MM)aq}^QVYb-YU!Q?dkLA(o33A zYV9Pa@4(}j`1l=kL%*(0e-k0neHCcVh+HIIs&R6+9i3ubDLjmPMF5|>-;EPi$C!xP zr1PY7k|@NF{i)bnkk7gZX-4qm5bWn16c}v5#fk?Jc>y*@RRJ#w-qrHzL>uFYj)q%3 zCe6KPFHBBzApPWV=y_e7OO*(ZfI{DHN6FAElNXN`WtdxBOr`}Ur}6<6QZjo`iO%|% z?nf`kbd3U)x}mB9wLN^xAmIgxRt3I1gGgL!b5Q>;)%sXW1ZdPOvj2~&?=e5^Dik?N zx!AqM=+L$i{q@^4`uUsZMVs~=yAII@pUkJvKbc@hJb-a}`mx*Tkuigu2nizZw5vdg zBKQh0IkhQOceQq4fI6NQLVQ)BpHLuQ{3fSKy7CYiE=?mtiwrWfI!)9d)4x>ZH2s22 zaS8kx;)7vA3yJIZk>T2dM3)~{LRA0HSW%5+s6U(tBFpMHrSNu3T*ZoRQ?tmB;t-xg zaj{+~k8@>~Ez!DDEm9Iv#}oXI{R80s$gIU(j6CNFGS5E~9&uK@2e>_kuhSaChUH-P1oCSu_!aKTx zy>==J7=~I|BsD*6ue~PZ!ixRNx;^EhuaYP~@vSDz2>~S}ak$IS@T{%*p7>v`U|0ry zlVbT8lXA-_^Hm9jCK2kBf33|Sb2d!Hen@fbiDXaA{@F34X1mC1NeVkL-^F|#=4{y9 zA0ZYLSk*y>NV|#)IFAMkt7y=s6Dwf#F?LWJ6s4KSFZ2)}?rR3$tLkN^A|~(3F49y- zki~io=jxe6UJ6XfNCU~W0!0gTSCs6)zyKQ9zngdg&pmx7-7>Hz)vB35VPWbdx>Gs`C5ZylE9BM58XwlEuQEB;n87Qu& zO`FuVGfw!9@R}e3yUEYSDc`zKz;Tr~R!^5Y9lz9~#rX~M<@58F?P9_S_45EjYlkfw zkI{PBWDqFMdQZ96MN>8;b#m-xKOwtw+Q+WAn5Y|N+KiI`hzIe0V#ifgR7ackY-cNi z;alv+wCrXt>R7OHUoA@8c=@N=M2l-Wu@v2#ci1I7u(7-vs2fyPuzS8dSL_~La7_+< zj(nm2!svobptc$>JYOf}M}!&d3-WUPwBmFH_F8ZqB`c*K{f=b5Ka_qRV)?>Q6(|o& zB(IRsDH(m3JXm;$Ix8?p5jynuB|{w)7FL)55pF$R&V&y3Ck$Fh*>OwJ(MqVV&=ck9 zN&tsmq$n3;h`dVh5Oze91&Mo1{A{qGtRVjPM^P!ld(ATVf1Mi*L+q{hgs@(R6C_30 zUmpnsI?MkH^GXNE71het^>pRj@@m%jx-3p1IWbR&&{C0sTwQn1Mpp(OObvboTX%ZC z(i(`*qjo7$bJ#^b3d>>=Gb^$iGCYmk^L0{wM2=NsFu=obQbmAWB$%D4`i1BDI%4JDpa3Q-t5O&$Y5Bpio#OtdF zDjPd>bu9%+RjD(UZ@}@Vn3YMGA*U5pEySVf_5+3td}U!00`0I ze`qDb>nf^5;^mnA>U)Ye!>4I#gzVxT!D-O zg9C*TPjXvWbe(Vr83l2Oy-5=~FF=2$O|drH3U5Qs=Lp1E&KK>Bbe#~dia3p8Z=E?q zqz}9dq2jtA^cd)3dzEFNK7gfz{mqRo3=|iPE zck-m@C%UyaI2J~hZ>^F^IDUk8ie2Xpsw}Yb4|Xw;d)mBD3$yH+zhbVWhaj?0(B$pd zbDSrXcW|intdArm)VYDij}RzimC94?K!^{yNmtTErT$r{dbSm`3plB%;6GoCH<;5> zhXLVBxDhM<9g0%61X0z93tWT}iwDlBNo=^qJ<2Mz56M<0;29KHY?CgM!f&zxoC_=w-0Scb8cy)i44IEFRMgHRO z`+%52eY=WVbIb=>seKV7w?3s`BbLhNEAn0bGUU9E#u;R&@2vbSIw&0V_V{IMKdEDU zzcdS4pTYxi3AGBahv%*@OwQ<|pC%*@Qp%*>FsY12@{%*?#Z z%xix-8hc}yvB$7U^M9Y-&#zg-;GKJ}q@yD=YJ~R|YGJ9J$as&TfH4tnQ-VOO&0>ilo zgR|FR=u$%FtqCeQI1uhL6@)43UkRtUo8*yOr9n_b>?}q*QP7(4l*Aixw1c>Zu&YNpss!Q3{|fsR4W!AZF;>myG-} zvp3cFBQi?CBc5| zcwzcNd?;$QJ$LH^d#o3g*e~jCthGL7B^=|G)mR2L#BkSFH~)khZc)LovfMyufaj52 z@1J%UoP!bqNm=8u2PdmZo00zmfDaEU&r*v7l_JhlN0asi>=Iz_b^xJRzOn69E3g@u~eZY=|s_2wWJi@(tZ!CL|zj(=;ls0}pxxwK)ICN;?Zp+s$@Sacx z0LIy_oi_6k!-Jr*;-o9Wq; z0$R5w)4%_cdE-X%%DNPj0qqhT=Qm8QAuY*x!4#5EUPy@Bka}HR1HJv>40`3wpC~u4 zm~r#yHCw-FFa0%p6%88Dg=YTr3?;-zD_&KP9z1Eslj-ZPl^m5Gi{eRsGJ7FWN{G-5 z$sGWx9&pi^cnvKo*}*b+&pbb!%x%h*yj^a%LO+)pA(d_Ase5TsEF9@(Ld%Ze z?-e+M8+&7BNGl!jfGiNwK*lr;Ii_MgHFtb&hZ#%3pwL9<4wqjFSlmkB;5hKy&OMFF?m!a1Z-Jjr>GEJv6o zy|PKw+iu$tec8jgiHu#lN*$Iva9X!vHw_+p6W#sb2b7&tWCu=G!+WdN?4;onZl&7V zqm!|b!-d8RFXU$+oZMPG=gP)sHi45It9V2@pC8WmnAM^d5G(ao(Y%0u9a>YlUPfRQgLA$H z;CCn^iuJ9}R={IdKlr%YZvh87hbpLTu;e<96^+@^5YlWJtb|+k)itjes;`#Do?d#e z+Xq{K3L&IKzR=Z;-W3g_M;4O$g~#c>cx$*ce2okdin6@op_{$$VCzpqeiPoDQ0dLb zAN;E=l>S&}jX?n_p4^S?+mm77K+XYlV&IQcKCB0`Qe$Nv+$dxrLz>EjWM&|Uoy6OA zy(&kJ>DwRY(|MOZCEbgy*0pmhDk-g01*)Rra@w$IH=TFRSWatMv>c;((oRey^R{g+ z_eY#7GPEzZXU@U%DC6TS(INO+$O{M3sT9UHBl!pAHR0yFbpKrhs6BHYnPxN&{79D*_h-yI)y5sM^BpMnJmS|Cu02( zPBX9GUZLJw#$2$4MQ9~yKq4ItFX!>PO)31LlRsHSXbJoxn&QJC0)9L83b50E;3iE~y+B?k)=gFNxCgkYN z#p2lnPK8GLWz`23;hkrOU}rxiNX zv_mmU(XtxBBhUjD9z4SGKs%52=yrTt)#(E$Ot#jC0R)BO*`wMxINLfuX6@1QNAS$Z6&42)Uv~3dj;8a-BZ|bsr@R z4c<8v`ld956GANn3FM#t3q-AI^MA8N2A+{FJQ?_)S17+t_hL17qD{mIYodI?QOUy_ zfQkxGYOxUdwJM&RfDWZ@!!-hNqM%+^|0^vs1At7W>K`JsXV3MPRc6m!L&e1oD|i5D_a5p$2y0;PP$NI`e_5Q>(dw-=Q$7rG zY-2~9`e(S5H6DP<{unZ`S7$pEQLlv#x^88YT$sLJf^xgxlAuLs?L=FtA1g!OA26-L z-QQTOD9bCVsjgn#8#SZ_Nq?vR(}uxZ)kx$x!Pa;IP|(ZUUn3#8rmey24>*BP3PQ+e z_y|^}p1A=I#@;%mNSni%-T;-s$SbPolhr?L$l*yWQ~e_zzh|HSD3zAk$3Jhq{%i^k z3Z&h8Gw9HfT&k(9qp_pcJMbka7hx1Dk0_44Hpv&tuaI+P;nHp8=65M&G1Rqi+CZuz8*6hI7D;j5A6% zSwr_wUUa&@I0Z#zG<4j}6w~4i>O1UO%F8cS*|tGZ5IDhQ0$m!22S@6i+jV%m5C&l= z?v$$UqBKluf8Ld*6M+$uN*ZE8TQXxF9U8tCrB8S0EMKPSaB|*X&Y#|Iw#E zr``MP!K*|27Ie?;=h3%6{wpE7A|B^Eb{?k7FP_Xn814J8VDTpBV@gg|ih>;tIhT5k zZH4`p8B;C{>g0yw_zYtX&h@`|z}ztCW=i{;fh#QyIdeB6EbHGq?n19&n4 z!%i?2IR8Zc%iWDs|8yocC6%^dwxf#_R!Iov2?es z_u*lMS78nF;T3g)AUwQf&Yv|Y3t%jH(z*nf3>u7E6cJ>PEGUJ&%|!Ljs-4LSwRQFM z+B?5Ey?^cHr&3vYmE@%2<07fJw1R&4Wg!jh-O<5XJ;pw7hsVl;q0s|G`J&&J66nrPe3Lw4^iU$u=xCJhuA=x{r5 zJV^S(bIoqX)gk6V6v<*=A=YbQaYQiJRWvH0r21x9_!K-JmT} z@$pe~)nzBqpMS5EuwHCTBxPk4(Dy$tpvNA(l!g!ONe2(-s_uW+-Xm05RYQ>xM_Fhf zOBgzKBy(1l{g;DGWJuJgtvOy^h_^O0n-{mG3IowfnmguZP>O%6jiUZw_X&p1;CwQR zvc>U=6kA>KI@5T7G!z9r8}aB^9)H zUlw)k(%R|!08KOK>h;Y4hflBLkcufufEq~!Y@q}saVU!jnesAmuhG<)xP?kSV z5yNu_dlCTM6HQs&AI}5M9}60&%tPoI6n-}?atzT^$XtPz@{kd0!^hEyqkbH!32JHg zz0%T3`ry;QoPK}Gq`?##8bZ&#@}1Dk0|EjlC$E@}WaiUh2BryP`bw>on&lUiQVBl; zwg4r^l$7K=XM_H%rSxDrK9i{D#%DD?gA6Szn-n1gqz2|I%)*Le95ty9A~Waj458J| z^I=52@~Uj+W5VL1Umh=#Yj`Yj*neY!6g}&I8bECg@q=n+d82(`(R_?2kZ7ZX=!D2{ z9L954Scp8pwuXdrW_F?GZ)6qRE<|Y5elw^yz{|iYTSs`(fZQW;V*XxFpspv+W;O1w zds3_9x0y}u357)m&-g{`4R-`d>ND8=mNP3%$aW56zI;QWnA^_epm!^zn4C4Rk3 z#^hVb7;_Sjiw^w0eID$e`D>gOSg;GHPoVW1_Xs({I=*vqi{!uS`2A5MdQot&_Ifz4 zpv3vjXqBQ<6tjkF5R1|)`TtIk`wfBFTKk8|0BU#eafl|t7N)EBc7n1-L^C&ZP2|w* zgd-xi1?eS2gr#{Rq?mMXq+AIdcpWmqxpxY-UoFFqWvg{~f1S0740|}~d&$+$QO7=) z(izhqp#ulA$=?Q#C@ImoKrdhI0k!=dK&n-cA_Ela!z_+aEpJ2eW?}mCW^xSBEll+z zNa8j?JtNU(;xeCL9*@7R&a9~P!|Kic0c?PEextDcB>V~QGPhm?dMlvpU}OIL2Cdd{&9AJSdMmYN+rV}LdEDRMqc$@d<|&alhVl-BW)>}f+Rc1yg{r>Z%x zXK({AmP?%3%D5J_0mrzaiNhD>f(CoR%VQzW6VGSgNgJFHV!QB)XPdyuY6lMGP;=NN z=TCGZWE2(aXUkwhH?-i;T%Rz7RhVF@ox#`+u)OeZyqCm(bZ3tV^;tF$HV_PK8Zp9Z+ndr?rYBL0ZFMn90JVI z7sA=NWuNN%lg1Aa;5nS3JU`JY%(MaZe zbx9vXYPCh8=RaRN*>B;&Dp6GH@qEBrkz4uvYEd6ZZ54}=iHsNQ%CKPgfBLJY(Gj( zwy)sc?@c%nKou8A27oVWX9h$_{fxZuZ@kxmKa1A4LSC|LGd=dq7g9V4tE{Y{Ctvv5 zi2^Ju?gT&4w~S>Tk8pAgc58fWoy!MSeG)miG=h zf1ULDw8k-d5UD*cn9Yt=4krv+byd=r%437t!rWHsFc9!Rwm?Ip%xI0Vmr&zj4$2>f zmA7plCy@p6vc?B_6;NnVj2UWCvNl-oU*{zK=~w@#=6~Ar!!&uqAZjkV=JHddh|y}* zHOIHnASRQ!Dl25jF`1-WtAodcg+>paY_|D$+;J8vI6PeBH*=1K%kclr$;w?%?2t5q zbdjTt9oa_~fNR(9Zh8+jP_U}%qhn*krhQT?)wWHlY90zybBwjPSQ}!5)-znk-bWcP zJY!YH3YrG$X}RHzalV9x=O}DJtK1R_UH@+F**?LH>z}8dEdxWbJ$q66y;M3s(G2ZP z8aOnp){iWv?l^c*NbHx}P+h$_0u&*l1vc_3=p_^#K!#wWlAH0sgFvz21CM>I`q`D2 zOrgNQ=DR$jNA#A?qE@S_KE4XP+jkt4Ny5>>!$X^trfp5GGgy7?eDtI$k2Z`ngM9J- z@#**&hgO{=r)&%?)9PyH#mK+`ohd83P;yLGOG#3~*S4PbHXdJa&TYrMt)UjMtXyYb zle$1{0n&Ki8sur4SronvN!6kS*fh zZ$#;tbNyAPHGQwD%CiUS(BWK~yI?)9O!tWNjIXw8?M~JAQ<7pO&!A><{Y8PohkO+J zUhRTB4+B+VkZ*NA{xY1dm2BdN(!UeJFejF215{qVdTyjkr&hFM*C9L6sSBJOrT8qLwDu3Q!(A{a~fF_N)n@E1NNM zndz4Pj=)Tu){oqgI!dicrDq&;?3 zwfj(6V`C%DoVAi(eEkOrnLttoATfRFSo-$U2gw)9)2PE5Kc=6{g@7ns;C|-&5c@~C z5bVH$hUV{(EbJhQFe?gSp?8SCaSRxX)~?akQx^3TOE+C>nMIxD1!4hS&=agTA1A3A zKU!&nefZtR3Jc3r-v`-e=Im8=@1>+zJ*cB&0)!i|{5p1ML0YCNnyh8J=b(Hg|D4^;y4&WEO$QeK7I3py<7~oX&YYg*2>D%g*H*U z;?AHlVYYU$^~P{ZafwPB{Xfa$xFB+jRwxiWMtk!hPl+UMzRUO548TGWJ90VrFEsIv zN6jU?KICMr-G$+i=IE@Kb3srkDRU0Lp&&OtE}9M;v@gdB`+1a{97q1L31j=y zN1y*~_g-#Zu_#si`P0)vmU!>uKRAr0JqaSIeBPx`sV0}Zb!kl>ym<%tYEDc&wgApO zb?MyN{f`4IlcBdI15!BJs7N`XuamD6J0=pSgM&a5r{pJ_)sXuHNhj2@PdHN`en4aw z@yjUI3!*kMLq-S5eA{Q&Lk~EB;T)LIb>dlQWswq z572pImDk-rt7Mie<$t-A{{j&PG`I`jNDNq%5RcY^`Ja7IgW=Q^=oo^5j9H$lz!w z%$W6(pc<289bXa2h+R4=w!r6#*$~oWXH84M z6*TE0?^%Q9HOZ>^7cqn@eGM34x}C(iv*e>WZev2N@}92-U>=lX2Trp6Ud5Vvi7qXZ z=bG$D3venYu03+GBJ7I3NBnTL4)WiFg;h2K6PT6~QYg_mBf04=i`AOrip`aks)Q_F zd;Ug>iH;zDT2y2>&G`NaevqA4D+tY9cl&E}=BdM}u&9i-Y};@5`MQm}1)PwhaG}4N*YpzZ7QYZ~v{X zg)7X*=8!j&4#k#5pRG3=tFsHXw0uxUsfvnfr}tX6ND@G@eU|WdBm)psBpeI8F~(5? z2w+pQ+&m9Le8<#yFlC3Ue}bM#Q9h8ADuWdbJcr9}O?&#>#-2gMjAM7)OpUM4D{nBh zLTP>CFt*IKe7!3DGanc=-)$94299MzP!zH{)WJ_r6ds(NwMwiWD?7c41TLDlRa92f z*%v%U6HmWa3jXvM+6LI#IQB+PnlzA_!yuBmX~l<5D&{cs&jHIXEHs$jd~Zh6L%o;J zW76sOiKpji58QbH&E)W4XsG`rhq`oZ<@8>U9&I%ld`<>{Iu6bX1auAk8JJT2N1nm# zU~XV9q$Gz-xd)V2!4Wc76tmaw8;b*qCgR!k4ObdpHb)l&s8I02&uj%L3_HD@g*DcT z6)G%Kuw7wQRYw#3XtRORgtGE#Cl4wkvp^Khlatg#=(&z8zWF^Vdq45A3{gr{3*UK#Yg`v-j?$=~Kt3)+YI4 zeR_4E5Z->R&2>5Jv=O?g{LncxBL`EZ-;4Fh5H4#ItlG!Q69eFw^A3_}*Ge)MW)L;h z!5t@AAzJ@yHG@U{J%AsZ0G?1{63Lj-o($<-*h5NY@bO^P2(KzKfXo0YT(iBk{#EwR z;8lG-pIfI8B}b?y2ZmL9y;)PU($SLHdk5LbHa~@D3E|?B(sCycs-Un`#uL=f*Q|GL zB@ZGHe$zDO{!0Lb;^541zSs6-B6B5#o5RT`gOd1c4%2g$g*9mG5E&2%7lAPkkn>1BMOhM!$ahgr;1JE5k#VmKsmn z)_zRWE_sr@rcF(sAsEEs3)0x=6y~gtw=nBR55r!S85Jx*)ow*Qxl}V3Wka1 zl*vQ%ZveL^_80&ZhGXXtsipI#4o)V`sxmU|TT7u#^fE5-+#Sk-mw+S-nhhk<_5ISdG98_=(ls=7EB zMK|2>I{oq2il&v|ocZf$=dQ!lzi%h<)Hx&m0(M;TAdyI1qE#*iVo9T__fBtt?gw_qjZ6LHp7Ds_rbtiP^f zgXI|Ym^yunD04YrVk`ZmVj}IJTb? zr(n^gYIrzM;xPNRKd8zZRXj995QoUo`XtNuT2l3^-6lw({Mw$G$M@2obNwBd- zT3dho_FeSs<5$_`c;K@`e=UQR{8Z#|Na|@sxkH21SHv|A0A=l(o0;WYn+IVF4D`JaP~E*?H(%O-+uHG5 z%vdF7Gz=ciOJ$)TTL^PB5rGt$c-mB@~qeu24kIm9hk*fSGsF%#)JhZ&`1ehA?IfS>3 zOgomc$J9K1y>we~Hkt6+wusN8FBv-yBqQgnG|$JHpX$c&WS8pe21P=<9sp3J^*K@wAwqBDd3$UxUA!C>uo1xM9;~n%TdQa&)(80Pp~2Jvs@hT+A3{e% z6T!!kw`(M~3KCB~d^ydYx0VhbwpU!f_^M}V>*`PV{vWL{M=}<5MNd6)dDDCFw4Q$H z8+z*buT|;lK|ulXeNVg!(8#A<{3NZi^qRt@ykOdRdhw}iCCmX3nm%i;sbG+?-y*oO6r&o{mln@^+suq`CFqynE zcsf~r1Sk)|$;|m7Q`TNGZJMKm^8QO!S54+!E2weLYBII!N5*a=$QYfdd2Z6fjJ+u{ z7?S&H6$*KCnx%eA&4N@IsKGpuqIZ~WlmX8P{w^$1_ZIQ&S^Gt)S(S~dzoE|00?O&- zWEh-Bh8UaiIVzjXzlQrpyS9Q5Kqs2PEax(Q@RP33*XDDU&<24nMh#IBwUQx)$& z_j%{v#F)r<<8+?*V#!=uio#Gbm$27gUJh9qP%{y8h1;tDpPDxd1&_77(2CAbzzFId zr3_kyp^7GAqwnXdepkS(!+{~x7j5~ z?;emy;6d8vM$qb@chB}xk2Q2qH`V>2mgV=qmJ9fv!r{k({W{xyZV2Z=iZEZbA12d8 z{orKgu$s9vpBh*E!s9oK{?o=FYUW&6BZmM@orh9D&(S=AMX2Yg;7vsYh;qOAP@U2Z zpt*2LA{FY_Ixt8Dpg5doHrX%0k@H1}+OdqoY8XEqU4*OAVZdtUIzM~jk-WVyhw!eP zu7?*C-VMB<#6&W*X+wrioyd@s#8Ic_C~ou33_&gV>~QZKy-~gnVYTedCCRa?8WtZ| zB$So&v&8^*_%NAsI2ut@q<|MbtKjE-Mh9vx(_S_}Pb|OTC_o)giwe*+Nu6=(FuITP zQO~~ot=;=~-2X0}#^JdXi-ZyM@zPS_giVAA{z>+lo^kt{*M=Y%qV>aOL~z+RPcz$p^?GX!d|p8!;C zLpb@&*LF{B^K_yP(Ow0rk&OhPa1La)`yLj2WfkfGRZ*d?`DnG88k=!b=f@stoDVVd zEszAh^Ji|ZCCX0#NG)2Bv44MFG_~Vg=&=dA`)q-6C`{t9=6v1F6{{GadTRd`V-BF3 z#NJ;Ld-@&iqb?GHWpB%zm&c2zLuAg*R=^A4#fAn6KYATL3{)7i+USFM!L}~LKu1MA zkF~|=uTOg9zKiLv*{f*NmVHg{A)oXe=bUc8X)0g02BD7k?%6>mw;z99hJ!~8GVYYcWt9||bJi7A6 zm+idM>gqaCxd7eR&QPP|3qXOT*IuXRl(U~27k{JFFP*SvCeymV$h3Va1&qIhjIpVj z-$e1e8PZ9pn=0~ij>bhXd|;sSRAEpFt3dh)gQAe0b#PIAHAHu{P2GA)^5Au z9I0Q@vcG4qrcb_{)%15fhuH9dY5`OcgUU%~-A{wY+~@>OwpOkpOM^n;(@q*{_ueaS z{cP7I72t&4QnvXz7`hH$bIYqvj7SKDrmIngp%4=4!(izg;R zaI&%LQfi#_9yP4_(*1X7X;`nv54+L;?5TPXRaGqZ+&;wP78|H=Uo`tw>ND)xrj;D(n*N!)MtamhBB*cg4s_bN z52@17(VF_p5AGAaJ6{wVTBaw_uiri{;XFrSS{Q)n`B%TE^Uob80-Avw9%*PWseTW= ztHAbi*E0usq&Hr?$tfHOz`gCpb0mLcHH2brzxQ4G`Rm7;7+GLaMOgp}`vukh=DXff zJ${5f)zmknM^u8BVLs^8xe+%7Bd&4jj~rg`z0Jsf&XAwly^0$04pPAIX=IF3_on3j zCa^aZ!S`xUjqd~sY15(ooT&#hpFIMwMdPp=U@3=Ro;Kn_yP3R%QvekOL$`-JIwm^IXd~A2UI8deeBJB z`R!b~;p)@*KGj%Osz=WmH6~BL_>BOWZM}(_ff@MiXAd=Lq&eD%p*=*H))u7xoVAix ztlCbaM)Z=&qm}{6IvMTWn?aXc^So-Sg;dVrz4-LCq-n8Ug!ypKc@^*KL22B-kxXm< z)UW=~47Mk~j&A-XpI$m6k=n!sQgo=%{||RbE;Y{kgv@;=Qb1=7MGt@jKOg2EVG12R z(}()5V1rARnVQ#Q;)&DfFtJ(nAx#=}lXwOKTDa%j)%h6rWO)WJeQW&G*EdpziJz)ieJ?X7_|&Mc-1ukj7;+VMziue@5@oc zEHA|jgivd~EHLoGBOk=~I5?1B{NGR>58<3+3=d{_3*}c>AVr1*P-u|y9lwlsj9)8g zf$hkkWvY&1Z{o?OuV@1lLM*nqZvt(e&!V!KiyW~dv`k13)~yMqx*0xsC?hOpPwJGZ z57Lp0d|J3<6W<7`C3N8k>LrlRxRYD^C@M zQz(bctgd%2dmu&pZt{O z|M{YHJuNM-q}HvHrGeo@_WUYUL_z_gFF$*|>#oD_f^Zo%8kdJ5V5Zi*_YS)AcPtCl6LrRnO@fdR)l8WX!ziMS#cO4!RCrCidKoJa9k)c?e z1yD?Q5XD6VQ4E6^04zYlzT}k|Lc8+({|K2&erK-3QRkQ;Qr;% zPTOv~{OaGYGd*zE`QjPr5xZ^QE=@oRVLPjV$gz}PZCaahm4?OlUWo8$uZsV%U zPNoYuEa~!`F=-|R>Gz@_lcW*aGlQkK>NheU-bUWq(*4!+;(`*oet0w$S2fbTH1U)mah$j~1y^NAZo_tIUe)Y`*P%uz^4{W5yied^F!C|Nf^_-@xXk!A& z+>^(^LG~^SJs?nEASJnG>#Bw28r3|gkYIZ+$iWZ=aMhgCjy>wHIw)S98wPQ>zF$8w zSH91l*&2s0fTia}VLB-bJa{|sf(k3@`Bg{x<@G$q>cu1SRe&d+C;qN!5!AIs1drE1 z-gX@WR5l$C!`z^FcRYtO&{C=W{lRSwWsfU1JdhG1gZbD4`QJeTU}3>V@zC6v0qupu zdNNS;Aam_rH(j0>q|7<>WJn8Aih`S?D=5N-$${cE`LiLRt+i>LN^{vmIF~_c!4gHJ z6)gcKjOiy{6SVFCOmDsa8@>GIPvULa8p3`MY7N%g8%f3R5Q9FxXqMv9*%lO|693h= zev(imLXgM}U3%>cn&1R4uvgCxbkA+m*mD}`5qRP_u4aIN`a5!RRs&(eTDZK2!;bH< zSEpuECJv-mpSwYyi=Ut~%*U72&|bY=1~l{AM5_@4siHIM+tKsmp!V`w)rMDpjst#xe@-ZR2*#q1U3l-AObq8ch-P^xvh z&Sr`ZR2Fy*<{+wSj3K>-yisy=5cO{pLv0d6<$3`KOBwXGXOxpaEP?@}V@d>t^TKQ8 z-V(o%v*8fJJH#uq*rwnb`(sZlF*1l+#D-F0R1ign1&J4i{Fi3^UuY*CZ3v~=nL&Y1 zKYBLel_8YZB3P-IZ)QU{3f{wV_KqM~^xP9yOP&fhe$BdFbm5iH(Efw!k~nk!T}RpM zO~AwO)w(hmE}s1wO*!j+@tmxN+APH9M-T5s_p$c^QiP*HB4)^-ZUQ6&`gT?=$kk(* z1b+VNQ6Z7+JD{w_X3twg6UX(Jf4|0HrDiDJ{r>ZZ^@l()UQi-X>|!;KQve%HbBchSBY+L&1*h43MWQ1hZItE_?c7SwqRP}!vo6c%KVL(Q*Hf+Lp?;&GMG z98H~6tg?g}=X^*s;R-UurfM$|@NjeF!;EXcug-l_(6m6elzyWsKs6{N38OtgnO(RI z^$o6R<{`HAd&$YX&;txECMvE=pkFg?q#BcJ@l;IK>2aYnvU8k-%wQlu^T`? zorfXrSL4=265jH~9+(hE*Zi2vo>VQhhzX!043-5PmTRBj`RcrH%TQW)Q%lM$t*5>D z^|UslmaZPAe`RcI$Un^5QAxjVt)%BpO<>?OQQP<+_nv8O6@%2r6fp4$j{l^){Jw$n z0U#Qgu|PoGl-fOjT8EBnVKg{Dt9WFL4m5Mr;F(-JObw#i@5+NZIu;DATYI*$2eo;? z05VRRONbHt9Eh&qPPtS{XT|uMGfL zpLcB$Ny9tFN{CFxK5y`FVKptYN%*Nl_tg016B`m6|c>qTBAN zmRcZ$^oCEom9}fBJ=j_x5BwIX3FJ=$K+K-;Jl*-g`x08T+RrnV$baD>-Osrt)Gn#D zi}!~`M}^ahf8V4*qi>SyVbub3w2$Api@|Y!D-3<8k+cC zrjRz?I6H|3wboH{)4*ZRxt~w~JgFo%p(%Jc9D+0twB)ApY$iMQoD8jf^Zpc)gbmFc z0OewtZ!nO{LiA9Zu?{^uij8$&;K|`T!zrhbv2S0cc+^V+u zB42}=s2w%lt4Uz&0h~OjE!wZ1oJy+wjgv{HnC%;R`My63sgzg6Ib{l1 z)bL!$i$&U&U8@hEU}z(<=xa`pUacsjyD_;3&^2sBO0odg%SwLo(h!n1NFCJC_W)3k zKhiRzC7+^Yb~z}3-?i70>En+T2_0L5w*<+dF=IGKo~D457v};{%4QE~)xHwSEw7W1 znjRa>-iU4}rz4HRy=b!+79K)7XSdGayaOxSR+j9b#oN?a6w06TDJ2`(C>U6OB@6xH26pLPX z-gpsR6Esy6@4CIPCVGcx%V9 zSP;3T58u3lF2DXIVP;Jj+m9Z9;8Fo|wE|6VOu$H|B0lm?RO4FaCX~JUr{@%j=kfN` zBwq2Fs8yW0r+G$?NIJP|q|C{I#|fCMh8X*!Q{w5;Z*qk8o*HH3iP1zAoErlP!y`ku z@82)TFy%Tjgu8DUA!7=+(@)nRE4#pn#fL_ht~{tCnfWe5fVKn*0Y4PZ-f#n%3knoZ z3LX+zd8nH~s|qil6RgxXA1>pZQl*5@^iFH76GCO;2RjY>25WD{?raLF+f2zR>N)J) z<^8CnE?MZ=gWASWxAaH>5CM(KIw2{5I_?i(0^4+GhZt&~96=#L%3>g&b6Cqbl!uUI zV>1dZv`q|?Fk)gQR49leeh-hPIlyVx-XpY)ujiotU8t3Vb{_VJHX!SGG4S;d z^XRXipV90@+}vi$J4oiN-EO~!Rbe7~PFu3;XlGtME!$sBcZ`iw{VvWg_&=a|Y_-@h zBTelcNgu8#mAa~u>N>h=NEG!-^CG`kRZ0yDzM#O9Zs5h=u|3IpOFqeoX6|AZ?B1n~ zCW!)SDiIORp;zRS3@uuSSgWrFn)b#+Wpsc&mD&dVvo(rUM|F;qa2_UKo;CO=oaYKio#Cd;6}#bofXv9X#Z|c^$Oq9=`V?y7T69{pLZqGDr+9U$vcja`>`2 z_V@YMv+34*-l2-hYGDFCWH~q6oRY!9#=`!O7dXKh*Z(7OKU!AGp@QWHYiMM

EC( zRhj6A4P~^ipg|L${%eM~{H24U>5QHc;sGu@P(wXZgT43epgOVmTM8I+5#Ph+8Lw(# zxrX{iC#fSaJl!dtXodLj+t5(|=UcJAoYFela7Y0JPrL|(j(fI@q(ST%ga!qO_lJph z&4E(!!eFh!4)SV$v+D0Fg2vI{o)alHLJ`r0$F=^T;<@<>8llDt8kR7VxOuMqm<@}1Pydz$)D@5h>@stpv%+va2 zBIKe#R}Jyv0cydq;bhMyJd>9a?eMHtuGt|kC~V($Gcxte64m)rH0M_x51U;WWqt2xeY&Jy=O5 zDF{3f3?5)Ygz{XB_mJ+cX7D;qTNjeC*Eqf>{=WulUXjquRqCL;1}OfmW1ARX4Eqs^ zHiHRrJDyq^PrUG&;2B_B*(Ei!ba%0U-BB}9VsIA4hp6j9#>Dj{;&349rq&-U6_3jw z-b`e$i6*E2OQ`|to%99SxudOlNzDRISVOfHk12*yqJ!n$Ll6kq8~XR9_y+4Jqk5j278={g}OtBc4@S0PX>8w zXlHTPgCB^F-Q_&-muNIlvl{g4;5A)&$w@wW5GYbCE~${BUU*`9CU7V=p!$CD#DU~* zgWjN{as}px_dfoEMh@#KIXvqz*45VwyU@{g?>R!(-ufCXUbdy_z4t!)gFbohZo25a z3FI#`ZC&KjdxEu&3#62&Kn{lmQ+{QmJe<4p>#2Q0AeGmiH~`fgX4m z{GetHD(dP8@dY!e*n0hVcIz8l*S%>iK(Q@f6kBW!8g~GMEgWj{bfQL{Z~%v_K!U(R z0*VkDI4rpSkTbI`CFC&mk6Wa%r2wil#nWaEvu!$D?o%kw_Sm|nh11~n(G*-*%qvjm z@0iR1QXK40gU8e|K9q)cjFUoJD=;0%ujCwBsmM6#G1OrpOp1^oq>-%Ki48N;u;^dx zzzNoTu^dkRswt6Ubp;k3RK?TNlkBy(Z0w&I&(pB+x2OubdSU>J*WUg`^)o!fi3u?R zU=QDO5k*D$wvt7t?ur{;qMv?UOwlpnbmP@$NXw0c1lI}d-3-JCNA~F2MsvGp*`CQs zX{?UHV1#P99`Hk5i6Vhy9}9*TblJ7f)98`Cn_81VUMV8%C_rJ=xNPM%I`!O#sJz^M z;Gl-={zpIdD?sTf$i<5Nkx6lM`FD9#T4N%l8|!UUp8wa)wB&m-o_dQe(u5~gU+)Y$ zh*;qHwFM{uOoI!6Ldk}f2L+8sUzw{2Gl43;Xjc*Em^>d3sWHJcrB|XT9pD)`$etG{ z*;RGwalwS(910Co_s$O045GPfL#VdVcgi@zza7|f8NnVMB#&?nt3t+6Xw7yBi`iO$ zp`OA5DyY`vyZ9}p?^O06$99dU_(%nqK!rbCP$k}EnJNLo%*W6`A;v0xRdYV6hH*5V zdbUoY-mRl0Y$_5_^(H!0SWPP!;G$_4g$FpRWHb*zNsUXWlR^XpN-^1iQ3pHw^bz#k zXAh~anxKofea$Cy)&-BrB-!XA{R9QC$w_e{Cj<|vABXVnxaC|rjYC!b3R6Av(zo>8 zPfG1hQBk>gZy$U*lji;TqU4vf_OoQg7E!uzybgHK=Pz7Ox7_`<^sqX5E`cs9SKj!EUV7$Q*$%>gVU|K*44_qOchI;~?$W&WjeevAL2r-h z^@(71NeK~8s*pXXqN+yDMHv)*u)6;bP!O1HT=y3RjF|3GIfpw_3)`vT3>HLH)hzp^~JrkP<7C5$*`%2h5OsDf&B~x4w7OrN?5dp4@6d#;RCH1L3?H6)O z6T1ddtZ^q_pakA`cfPh&G=E#6CSb#c#Qj6vV^&jmpiR^&q!Ss^o|J#qa10VTyv>}; zvkrwSLpv&Oh~-eJeG^6h0~CsTdxSYDkt6hV`SmY0ffMYvKbJ|rp=lguQZsazoj>zs zAvV17)=%{P&kH4Aqt~$79zVLDcplP;cEyJ>a1f#o;AFD5QbAhw<8KR{-a~k8*!WvT z3vk%r?oOZM!Jj*S9d+w!UvP<>)amCvBI*~8D^C38yi1>?eVe~>YT52+Sdk8AAp7B$ zg{q&w^}!6f{pNE-t)i&7g1U84hz8j2sL6M@1R><0{AEz=b{F2WwF(aBL49F#hcNnk zM>U7}d4-wKJO#}snn6_8)OIHYwCYa&GK7B}EkNb@3DW3k*7SL>HbBKhd0+UPS6WNI zZ^)yXde0Y45M(`jKr)Ai17xALH@A}h-CpR{1B(gea8+EHszS%X$}Y5}bR_v=ap8e< zQtw0&UbT`Cz#Ie%QNcYU{dnYd_Hr7VyeR1e#S6AZAEx#s4&hDc#$ZwN5gCeB5>Bwe z975k`JW8dtuAi~+fD(#kz%-Kmvuv*2N5y%|X~E$Rl*>6h$03j$a)eri?{(Uqe*r2b zP+{z;4BQ<%4@-M>NBe8eDoucbVS??@z6HJW>a9XvsI01$wiKCJ`4axa1X@v1Mb(_d zM|cWUa&&nGl{z{)Lh3TQ4!AZGU#UtCSq;f#qt0*$dQG8ahuXvdu>0e$<#hd3r&C#ZCB?@@3xQ(9#M@kg z6WWu!{mL!mFVjOUx3zW*MyMm&nOjdhuTW3UNd^Azrk|Y5wB}DTCbc0$sP~h;t<|YW zeFdmoa6Dr!J*Z%9G1-_H&yN+0H{^y;OXO*a2h-GuPO;Rhm6B^hE@bA0Tq$IAwJFSQ zW4pysm-rkC$UUU`on7Sv$W_B~SB4fA@R&f(z#Rg9H%J|LKcw=eVr4hrRRK zZJPNzM;kG;Crz0+h-S@Mt@`-~pZ+DeBpf4HSZGp+aG#dpp?T)9D}}P|55u{di`~=z zZ4IKWz|X@a4Kn14L|NSb^;;1u$Q)z&(P_|O^#>`vR96Y^2DE*4fw zh)*4$teu?o8YXUdIytU-893pk|b&I1EcU;x zZcfv8f{gXlD`pvODjlPG+ymQ1Q)kYRg%*dZ_J9Len>64i&`?WlBX_7mhwlId#bkI* zq1vkjFo1shbE)cQzLFsH7%0|`jr>sHd+jZ+O3`j)R5< zk^3$dia0>X(Y7;4Z{2ZF@>KAqY+He-?f;(J&XblMezgYAbiq0$1yOu>08Qx{M*r-r zqH!HPC%DYqRza!Jfz;ok;Nb6&@9{SC-nC@vFo2A)zN_%7wQvVZ6>>**0L5di%0;^k zS2?JtNd5N^;jV={yaT6REhA|tgjqQ+UBmgD#k-1WH*d$)k`N68M|O^K0Vd5KnpyntssZ>lwd;!mHloNihdWS@|rXA%g1bZs&h_Cra$fk~qgS zxLvH&GX+>YHC%^~if<^%uv~FGEQaSk&jEDN_o-j&XzG|6F4xj*sv>i}x}IlsqxRy% z%ppmG#)91Ypa`I?EwA7^g}4MKSb13$?b@qO8TXYr=gzRg!=!90_PT84RyyUJ2WcCF z6D|uFYIi^IzG@i56T^z~nMbd1$wd0`x5cz{h0=Hrp2MPLo2hH(*3#1bv#(r(6DH7G zZ#akUyW@Oa%?WJ{4HNIab(-pD@Z9DuST9QIuD}WVzxVd(0+4=J*YME$xpr7A&A2L! z?wb%#4^N7xle&5C&HcEsf^PXGpY|2j)0XVx*FwJ8tbt?wTmB_~SdEHT1VF*0X6x-6 zEEAoU1z1`=?`u*&h_UtXVe?BqdJEum_d4p4FNQW2-58+9*A+HIXUlG&xSSK1k3aFXSi5@*B^#DeXn->_vARKFhNAunBDuIGJzGVI zo?tHL0OxJ5qN)bWm^-ZmUbxRi^m*PlMwi?)a&1vw^ z(1XTG_1=FVi>6)jlv4<6%l3n!=xrN*^Tw{Yyg*jhn{iW}(7b37LW-jY=-Z8D-l|CqIuH!*C5B;B@plmAnoy_G6$Y{1_AfjytUjC?{fXCC9J)UkYBE-|hxgRX3qSgCL zg}4ARM6c+*3>MBT$Ocm&g-4{)@U{s8*Z~%;y{zIIQI3E@2M)1wixdhEcfL1Z6>3>R zL?h>sokN%=v?(FIhH(|66y6%Z)bn7)>nds5zMXFmjyr=mC2BaZ+CwM;?JaV0omW1{ zz4&9|1$eyo#_hu1)9Q%3eAPBlyTC(_+N0$RXs#Y=9Q*T6UM*w?Uo1K*f`0n?F&Z%P zdZ`byHK@jGShI*=FoZ$Q79#L_`|T<9RVapT8&yY!9Ovj&QC*T7fWi)-Kn;&6 zEl6pA=7ph4CX%OW1$-Uad7e!4#H?Th4`3dLvHqO3QuTWs+NOCF19xR0FCeD{^@VSK zn6Ju)`|{hllxiuEZE(Ss1B3C)5ARc@sC#2=Tc^;B@1K-ZzTv9@rB@Oh@q&TYPr248uHPU<# zHnmR_{pT$AAepMl$mm1yE|{{81|})O=eEibm@>>R0%n0OsFvpHAaTUBj}rgbF~`89z;jg?eu zf)}Vlzvny?0Ad(>O@T%QBr^DT_8eGB-6A$qbf`(~XEZ10LaH-+*Siel1$a#T+D3^= zJf88qvRYcQ3oSRCL$;uj1Dpbl&Yu|#W}c_&=x}}`E!(5r~byK(qc$i*(^G8i~+$mFr z_*JMC6Z&WG-9r<`_NVI^s2nNdpnaqENXy{OL3RmxdER!>MffEvt59P5Se;r~Zli|x zqCb9kN{Xh{z!TSD%!pp}<5!PL0r9agV_X_F1_a59zc~#L$bIAE=%f#_I5ZbX1(l8B z4JAeDzxVxGgwW>98hYtp4j)_Q=C9Y4i~Q1m5}RPl#u3xVTPsru(L>l39)NY> zX)st?dbj`(cuXW^zXIfNEb{FYpvq47ZtN|&~MqJ5Rm2gD9rm5VTmXu%D ziaa%p@m{SM3_Hfj*v3A~*mIo6o@1sP&oMSQPqq7Ry(yf&T2{adGWU2;XO5u4I{UCY zj-yjbm@F8qU4yYEK9pZY+Yi*xlq3URi=)>W=U-5l!T{CNIqojgm>(&-XcOM2R|hA6 z!X)g9E{@4_`ejc^e#Gi!;5QI|z3Y~9>CRiG*|msPvl0$vVgK899<)@fAoMb4}D>lopZtCLM;#D^Plz0 zvovB@&!*2NjUPbYfA$bvaOJah6U?cThtQiZ-%PDrB{zGU5j(@a!gz&WQAo{g3A`x7 zWRz9fND(0hDycTnn2!2asYBa_(gS}L(8@z~JP~r(sM;*6a^1}absFk&g8fw7rAJ1} zm8k+$a4^+#h|hkJV{lm_fe=$kiF&cUs}LW$!0yU%rRs3h(Eb5+L_vJ*YI$tWSeMJ5 zgX@J4LV9QPPj1SsAPne^JmJpZ!65II9v>>I?{y6dV-Vp&>m}+Nvyj?Fs8g&L<)6*o zqW;JQHqq0F@f>XiV~N6dk1KhSr;cXlcRO43@{Bb_DyFdd5hnI-DNe z+BSu`)C|3we*MFqo{onBg}M(u@hQFf_Rqp9Lmw!uw&=*UzG%)>45myNKu^Dlpz)+~Ov z>3ZY1&N*`w{lYn^^RIYD@?qCpeyS8iYvtn5gA1LFkyGs6wXM{n`O}P@hmdLg-_+a& zK#H;eQ(>i99-=WF^gnpGcDP?LVJ7Os-qf1Iwerv#*`LmfhL1~Rx^*J5miXegGu@}QRODRD_?uo@cXVKM~JfLZnz zdn)L@ta&_q?;(JSUQM{hXdw94#(XNN^1ki}mjJ9h=+0qM#!+w0C>JlT+NRDb$WTq) zqSs0I%+XLcR9c@%daX-pI1TO)+a$mWfm?*~pyKXMq!t};A@dZ=`8F!#Ia0;R%BgKb zbte4_Fe||XEJbT`M)c6aHQ1Y1Wmj*8b3I($jlMb5S#7i)XM&jS>vDaW1MAi z(5=?hMEvU?OURWK6qeDwk94Qb)I32k{kD7Gp&!0@ zr0G2jn$u4iM!)~?B%Q|LzJ7f=I)M`w1SlMS>-`zDcYh{TT9V}er>ibKnO=PQTJo0} zI}KE5(e<8dsd-{hL%(Kd3>8&3(t~%rT7C3M=R!rWwc^(;3uJO2_8Keib!fmw2 z$jq|QPP2sgTx}oEyVmDg0ELMS`6E{bExl9vBvI?cFad~7yh2~jpyq0Fj^)W5p*Jw< zU>gpWiN>8Ts^jq9Ms|*q&?3$gRQ4t8H5F7idvLvDma@m7PWU)f*;#TzZugfQMnf5x zAlGCCCdeV}&aGsRP5V3ymfsGs`7Ou~d6h|&rt#sbGo_+i(X?$iitH-6K4+ii;817i95FiE*AP5f&r87<$PCtJ6 zNE1jSRz82>2Ksx>Dj_IbdFe@B)9_J5X>_PbnK^5vC|3X|?Y7`T3TjKso2 zJ;=3!sdrlU2+AsJ5bvoju#qkw5-njBU#)v;Fuk+1gjOG}k=|DrwfD~~ke2p$kB^tc zzdJ(#1ifB)+z7V3Cfx-=7LeVS2d6l&d zw3LBqAA1X0hYliv*0i&~vWH8lr1ZED8phy~!l6m*59hG)P&sYQESFLWEyM2G@wpFZ z7tO$|{1(83W{%r3D=5YgL8r9{;5?Rnv?)5UP*{d0jbloR45ESTF`>s3LaR#utXh$w zI#O8UHRuP<|6wiRm6#SogC}>RanlA+%MQt^dV0PX2JMSaUCRJM+jtZj^tL4X@`GVg5V1`TjJHQ_v?27qs`Ym4-(039wWbWh}>S^;a@5~!e0Z802 zHdZFU0uI5g%c!N!N&acHmlhpJh!2?pT2`IiEE<;(=? zm>7JN`p)2FF3u)HQfuOH>LPS*SKnwEDy{$uVfIK3%}Ol~YL^SO2;`1VX3q&i zuT=~RbG8=BN?prv1^cy$63+qou>7(*nzyY$)x*(aVCO*r9a29i{+0a7kuq9+pwuN$ z$gzj1mv$7?rqaPmb=GcjR4@%{A5Cr1dfw9dVhe*3bo$C`T#GHYVo>YP;m?+qoETKm zQS6KbK!xSEfkEmdpL!K<4%adzCYbuSQI1E{D0uQZkY6SJuh44V?7cIp9FO%M1=*$a z_ZKT^&bMo5#A&_g^s7fwdWR&xdKNvpwP7!6AcNFe4iBB=wsQO>4j-ZA!^X|~NUuRH zeexOi(H}oPC4#Z8y7Tt!-9hAujistoxl*9ME*}`(GB&19x3W zo*HQN?b@c&mTd>@-e0(Mle8SMW#>Uzqeu6)vS`@L-Y8V((Slx&;n)FU{^CbjO6s1Zh2_tc}4 zi)qhlG96u2F~&Ch48E_FyS{PVUd&ogwTf1;vgZG%%_z`fVev z_-7kUzkLEtzF@H5LVpNv-F)qt0#G+xeTLKLSY07xfE5kL4VKal+WfxAOjU4_v{oIEsD@Q+*4xNwvtzl>E zGL+2OyZN=3{uixJi(uN25hSg%fnLhpfZbU$*~dw=LS*(n)l(X zvPx>`&-Hl%A)0>P7EJ!E0)AJT032 zD!uUP_w>qJKdZ8d)a=laJnB2*I_lM}tt|QZ|CkK5?(~B_erPUD@;AThKKXH$FKG~9UYDK0*0MS4gb8y z7umZ>n>?O0fPte;A5ZA%WwT8g8;ySZnd2|wj_7< zI|Gv~IKj~K3Uqq3tcNs^BS_()k}%rEQ$!%v6}zxkk9KtS>E1Uz!$k4GofpuJcf4V@ zvdhTKr~LA2uTqEQi}!YCfLHg)zmcw5?&5tu%gJLmhf72OBi3!xjedIvxOv~ zJx?eArT%%XgIF^>|NQc!;UcWyPwkT|t81l4QYo$4?|K0PKsk*)C!>Yo_T%bouO`$m zzP_h&t_u@13|(RW=8&Sh!dER*D~5$Z1-)Z(1Wo9XC^c}no)ru#^S5iOSy&BT@=(y* zTSY4bDgJGKSuG!DK~s)NkF6`3K!>ZkP;zJnMTJFBw>BN9U1%pV1cnOO?a!@{dakNE zAG@6M@%Bdkj=|J=t^g(!NH4U2zOLBa-c1?w;&tE9eIH)zb2z7}O1Yud?I0I(_W6%F zv4PZDl*dFzN}bT74_rbe>`5(MzC{3G-G<$wxu@1j!qyP(Lp{>TlLyP+8042;^E`cP zY10k^ZT6xopQTj`-*)R6!23`$#O2YT@S9H_6e5JJ<>VC$xFUn`!fQWhZaaj5^sA5V zw__xFW7k}93jI7|G0k7Jq3JzL5>Gz=C4K(>z4YflE1TZ)#5#9sN&o)!vhMF=F;QMo z#pe}FVLH8WLvmX(_CJa9QM2g(n`;9GJvt?UF8Vr0LSlHl;K-nrK|;8_$6^MXkFTv> zL(Wpopq5fpbX1)|@t{y#tUaxOu%tDI*h+7aY>VtBR(L|K5<;5_X?MD5wb8p}B#nXw zAA?gtSsnenHpe9!P|MJs1L4FV3$U)Y0HZH-^qiVD)IM^%lNZ%8eFU|RQF8wXMgF_J zK-h)ub_JpW(g&{R=dGLb&7xyBqp6~>-4ywg}po@EXHr=OR|D)O71HcFm3?7uP zhHZWM(S0;z+|BGc9j#eG1IeuH0#*4bcQ&3q+n>LAOeCz_8CG$ha!B!k$3GE?8!Qs; zxOu85qq{RHi0wR>%sKmxiID7xZ1P+%4#kBT1*~$)O_UbJdE5|#Q)_l}{$Zl7!*y@F zs7M{4Ko_?zIIY&mp`UTgqt<6!H3+Yrzqs@!!G99yB0sK6Q%POo2uQ=a{p|7&A#G z=r#LGq`22z+j$h|4(%8xVLj_HE@JPazG@eZj{lt!lXHaJu)Dku&CfeuI`FzOECO)t z(qcoUOaY7dT?|a9WAZhW7Z(x8+m09Mr$7rZLA)2+K2%t(N>0Gym0OD9iKytY|$6*Uc4 z!0^Qf_tL20y**-DAyk=PP{N=QCgc)Z!!iE&<)d`!)CZeX%#qxF@QKe<>BCxv(9DB( zUr6`eIbA61?hIq%%Wvk;b+^6VR7ZvVA+(A6(o=_eharGNR71|BhQHrs)c3qO-T#uI zr&U>vi3YUf2_T?BbOurI>uBbZTr!&)IoGF8`9du(8OhHYJR#dM1{fBLu1FFf6&W={ ze2yNJ^MsXA zLJa|&7fZQ`0umd@(3ndmVcC9w9{Dc~PMb?X z#-rCWDI}9(gYr4QrQSUv)vRhjIopRd+QFCQc<@0gtNAlZftalEg- z{flOgDwrNITF|n;{qzB$wbyINC?VW;`E@VRrWGHE%+UIcdo;I)YxLaXSJ4I2#(5M< z#d%zD!%H;x-*o~`=o@w0jZ^KmfqdA{Uq41uFM3?UqgWYz^__n8aF8|7jB)hHKDv($ zH2ItEeAB7O7vANXb-Q!{6wDAFLjj{Nq{g`)k*D_imU8-TeFa@REJj#fle>ifpX;0p z!!>RnA0*+JqG}UmmoPPvnFc_N17$(G+M0Q1KxJ(hkHCpx}7{ zJkTi^;DLEzZ*HaZcyer|;fdi9LqTvK&W8b*j24YUY#YalB3?aMuR04~^VFHtzNaGM z+PZTp-9GvCrq6zQ>t7mrN>2)lI9gkQRq?%#e%K_3f|dNjC3tP3r(gV*PMSE7?zw%s zOp@@7FcG5&b;qv5cKgMEf9A0(UF!3BYN;u40yYIUv2x^@-uw7Z&EMc+wr-hBdTjKF z-ZXFKOTy+;3su5!J>b2pTlzj7Je;HY9X!-eJa{SHecLpT!TCoHRa!L*0f_fJ{2{e& zl_L2sTQ3ZxlR3Y?K&MT6ShFp?t>Jz^`5Y}bPT{+gC{A%65hvzkjCw>(123pvDt0l}wRgd8YU=rW5`eVBF?zicOUl*#9H8yV9FRZ^xmBw$FtRK4PLVDnC&kJ&4 z2uIo)RzdKn#*XSEUY@ND?B9jv{rM6N<(!mS@g=D5IQOxm`qEXGoJ@WDbnvQ>IXADE zzWH&!>SxGZ4CvR1JTb{f^_@hfgPVC!mAU=?U)!tb_pM5+l`x*8i>uATAl;qsdl8{8 zhE*ge;gJlM{`BPFIXyf%fdQ(J!%_yyC~2UP?LxKb=^nH-0g=hkqAVU%d6}~ZIeEJUQiX?IQ)Z9G&)6}8^w zuT%jFwNGQt=_d)s9cvCceZJ(6jns2^`=*Ht6YMAN-c6%Vx8`K4T`N4gDS9QQc6cG_dyDXD9@=IU332hA=&_#DGl-1BG;B(F$fe--?2AX%a zGX!d_Bv?CX8lw&S2v0^Mq(NA{-9ojmVzgPe)6-xM+}|HxT030nYCQ5+F(L)AF$rV7M(=8#ol7^n*5b%LdX!!`B3KrKNkRs5Elx2U3q4B{L*7XXSdkwCh8rjkAfW+d&l4=o2~ltL8~?tp(Lc}xFBXh7kTn#_ID7BxErF)(j%X3hpgXZ=q7WghA+pu` zOGV$#)i2RIs%^v$4p%zUz>UF4G+cV`1yDHyIe>Uqw)Y`bcK*8laxLrM00xK)7q9c3rsB>TYRd6ha z)BgPNX&HErKl25B^u;Vyi4#-3-)hYQPDL|p4TbHA3M1)Zued=>* zB@eb`bD35?;iO4}d@k-awCPP|9l5B>2gk_kzhD&%O1J!$FYUe|FpCEm1+^go23ci> z2OneNhDl#73l^Gc9dNB<$1$9Zzg>CX<(#Ju3=E{0XlH*9RMOzwxxs6y+=fNkbtz~7_}U9MQc1=P+RI+mtIypa z1c~Tq`<_dneXm{oZjjaDMJ=MM&>ZrB@StK;ItV!SoPv`btx{73 z@8|rX3OFIp@$teVy1)qqqL4g7+i{G2YN%**N$x|UIp%HF-MucTbV^a zvuEZGoFI&P^_Z5_r*%}5@a!jxj?mm~g}RH2t4)zqP^;eg;Bf5_`gmzMZS)eHa7Q6U zbltdCqQwVrLP&KMhg3gan4t@tU`MJtQ&ppK?*URF0d>?Xb|szH`Yq}l>D*?=>zM*! zKC_F-)LNg^zHJ)ae$zR$bnfevwdY65+4qwG5{gh4{qw35IBm8Fy`FL2BTY3sz8VTk z@lfp8eVBG>s6W6^t2FJbG30Nrg5j-MWd$NE^6;Mw~No8p!$6%ZCF7MVZB%1`k7j`NZ?RpAK5?h0H1yJ z4|VKwDNQ-+KAJs$t>_qT-+73pUi<`yM)$ZpHyqEbxohY$4(%epV70cbox_eOly2MF zyZ%;o7QtgCJc>>077+gFoD?WdOq=*X3i4kgUcXyONu?^Wrw!jn0E#1v4<47R z5Fbh$@H`}|EJ_{KW3U+{+-(gxkFy4(NLUY{s_#~0lOD$j0C3sJbZJ+C=V0NELYlEY z*KJD-J(d;|EZ!X2%!lyJgj)DNoAVi*vN_M=nv4Ra@#zejI`tuu976NMhoAh+$pZu6mzGrsn-Spr^Y2UOk^3$Z zaDq2=)r~LH`b~ROJvRX54?i!Uf&Ds@mhEKFKl}VgWuofXA)U8MM4yw4SL4fLsDe-QFV4KBsip4^0M9n}Vs;sCH z)fQWm+_Q`GLC7EXPpyo@(SySGpu2a(rZ^W{hG$h$RZlb4<+}BpFlmqL7DpXZlw43= zS*^$Mm(fG)*QeW>>#SBH+de`Q}q z{bLtU|F{Lx9C35WP|B%MKnpok(EYolMtBcU_3T<7*p{Umpsa?mi#|y2fBdIVPQfCB zVfB5fkQb$jIf5*0Ma+! z{)SVG-_;O$_oF}Tm{ZusOK<#0pTB<(O_?yLNvXnW$OQq^08pQPHA|AyH(qllz0ALP z;<>L>speM0ah`MLD9z8|Jw5our%kJ9cwJUQP7!$uob$A^M@vtufB^rw3Wl(#6HY=l zF*1-ozaT|a%E2(qt7xF^X}-6K_r?r5L!^f^>h>^>Fm4^a{VEFpX_jOago;?$+r)u1Q09rzf=^96I5y7$m19+frsNP2+1VV+NQ}^IpmbFPCaz&tx zyXr>;!=sPdBed%X=R6vYWKT||)LeO^*w8T<47wOm0mpT(E{~#Mv-27uHaK7C=kD6b zgZ$7lJyKeHM29Kt!Q#q#sgK%|Q{^`$4G=ok6i=e8>UK0Jeje?w?8A$84r z7Y0}DHuTu;4M%9e_^uxP20KO3=WB2OBE_OsfO_xaKj`2g`-h=_pN`}&gA&3=U#K_1 zgLv$9SDx;7io2s3CEs9d+Ry9n{6f3-*w-*Yu1QNK3V9;blQ|mtOMxMH?;X>f01Afu zTNH;FKl^GnjpfkZ9rwLUUwuE1TplYQ=lyq1ry&Ei?=OJqUz;44?PRrV#Wo2Q!gGQ= zk}GuquPnf`w&nj7YZLz;Ic}XS%8V>^Nv^1DavX$0A(dzsCiIo#pCE{gh}0Y zUUV1wLRbpnsQwHh_-%PL)W8euJTY$!+rs3DT#VvXC^bZ@7+f-RY#UAfhINdSjOc8Iz3jd9Ff3y1zCi0;^^g?npF!SDc?^mZ#R?8NNqSI%UV8X?LPF`VA8Fk{2 zRalt+R=7z?F|=iesc9c-Y8DrqJI+Z^*J_Q8jZ|3dOs~eVA{RArY=1iQ)Zs#Lw>1=6 zE@AHxEU66}5$4P#SB6~Kb5C4F=bbaw<@ZqYV%t&GssI9};8QPrE$uuWyyrrf+H78% zxmli=6Us`e8|jh13#oH*Fx@aBhQmr`iU`q}R@NzVl%b)H0tvCT>z#>G3P6#jftH@1 zU&_xytmh_oKB0l5DDicTeR;0 zE^DBDms{mlk_qPkz=XO2q7n%Iq0RdGgQetQG*1*DpjwX5n^o#)8&BkGI6PQWj{}LJ z9}nM7EyDLxWMC-;8>*y3?*7W2q}IG5h_}(6y)e{*ffd5X~>A)N4VU`zO6PSLW zexG*IP@4JAN+*ix`P0Vo_gse$F)^c+#FAxOq?JQTa-67^gE@zM2qsLZNZ{lL_U}wB z(h}_+IMiJ&o%@Cy3k<;V%@6bGdJelGVLNz07n;xc9X+budJGzcwY-7^NPhm!Y&m{g z6ERkv&|R%SwTd7YFWoF8kJp~Rf&QMe+OB=Zw(SR{NE#24D{#W~yJ-3Z@p|+WD%U$y z{#ywU=!dm*#TI(^wcDBpoM5%y*KnNZhVWovWup}4Zp`AG%ARWKlo%w93U3%0qc5kW z6QD9RM2+DQV`1rNHEw9;Sk#o1mfPiFt%e#Zyuw0{E(#^g!;_i2&=U5Dd=40TAS$3H z2U>hPvV9X6jtL8t5E|;4 zHlky51BVNPsm_FZrJrkuoFFv%&`>c(JT+X?M(K40v0Hd;cE@S^#|_V)O(Re5BmZ9d z=Vp5Q?w?)m3?zxXjAClhE|EMn5GDSZx0arG=yDEQt+4wH6ZKm!-{MjV26WZF!>^^x zENxYAcmj9baxP6fXAC98$I$R0-G$W#gWS$1@7zVLTOAEGpvA_Gcf8reCR)927d`s) z=k&_6*ONc2MOu7Q+}_d4f%WOtUQ`^k4D}7J!qSqW5Tqqa@Fh2j<_p(s9(xw0z;Ym>rFeoj-eGR9Y ztMzyOZEpK&Z5bs;2GFD~N*P6SlOC4tuco(`lu$bk7nawWWulz7yGkhRR}PJ)upk}# z*ST=W%~S7Ii-l5do^wd97Bq7==f7uPCiU&z!RdX3|7vUO0SXquD|=V@CQPEp*YY~DO$LNM?C}h-P{!enK`(FimI7TQ1~ia7saKMCUNBIyQO~qL-!s() zT*(ynFu)Luv4q}0RzL$oZ<;0I)}*o*2-aY{MRo}U4TJ~RxKX$06|;o;#4M$lVCB9; z-)~jnWLjS`!R>y*zUI^ zqR1&(0qSD@d)nFdl=253|HP^0<0t;UzW}OZhnC7JDkG0}Itb+k@v86p&mVTFumHe5 z&fDqqS#G{^EigHto%>tw|Hh#`#Y0mACp49tHgya=^~e=oQ@&)Uo!Izx1vr3p(Xtx33RF@XY5d)+9To@J< z*%}@c?k!sDI2t^tAUFBO{ReVr%*Z}Y?}PD)Ix0s)@?5J2Q*>AWT{x^oQ!_z$Hp}>f1ISDU%Mgo|Y6sbN95q$&$0OHZWYi zr&tPYy|HNa;->UUpww6;B80Fh+H(Nx+;JaThV7zOVf!d5=;(8YW{XjQuIFH-%WteO z46O?{gz_NS1aHmVe(eCNlEEk@Q3-cdlvGnqrF(=vusw^tuHNLSoy*|x*fU?!kH0Lm z3l&V6Fp#dj;?$;9*p6L?gv~doe;2!aP`fs15_;3CfDBTAbwWi5@V(b>v-=!*lNGC- zC6H?C{3o;DL292ADtWns7U77YJ*D8*ogtU@2zzyoxwOp80(lST2(M_#?ANK^$m{JS zrvM=5Pa7xg<~y`alj|wnEZOV9_Ym^*#Ip%>=$slB9wG`NAh-PS_j0=WrdK5N>UgXG z=sEM((!yDDX^@m@W?rb%<&z5-=>JidFhV>G7a)@(NYU zIj}esjZTO4QpUjRzd{ilahtlfoo7uUPp7b7I@s?5YrS|VDxJfEuI`~JLj1Iyx!Dpg)!2N?iMc| zW`Ly?JeoKH?A#Gf_}i2gx}Q!>`$8HYI^NojQJZOH;mK5Mws$C?kvNh;x-Ezgmga;Y zt1Q}8L`Mp1bh82NM#=Nnd_`A1b{ZLYgI_&ATbHWAp`EUY5~Zb;G9h6Vk9-iC_aVWG zReSq(sr1f=zc*>sK@H*8Z=Yxy;LpACEj|A1m(nI0;jb0*-)d@sj!78bJ@woN-L`tS zn)Q5?VnO={8H5cr)n+Y&i;DIdx$MOu2M2J8ax=lBXc@;nW2U`Kj|k1af3GfZ05As! z1v#xWF_B1YpYwLuPM6ND=$_lA(NiycLz5>A;Be;MLjAT9FmTO(`F$}x|H}6gazWU! zAA`l8KRzXtbUhYoL*|H!jpTdvh2$)~ z=Y5ewv0(;^MfXv&qI?h06d7!wobpCOsu%aL(yEVuNp#9I4kQN2hIEB-bqbtxQwD| znzgyWE$v*(00QVD3vD@>!1+e5K2Rb=0fl(r+JY><@0=Q`i*v(J}@@gkC-6s@MTk-jQN@?&`0|6U#eXEC=B@x&Aq8B|Z1@x6<>; zx{AhELOH&ScI|@(bfK7-NZP(r33Xxe{QdhUn*a!TpjY1fS-=UlY0G{N1@4m87FHWS zrY|j-^E%!8@Q1W$>1MaGJW%mI=ZsN8Y5$Y+UT7I_we_3!sRFWEsBzwc^>q7v?}`wt zwQ?T)aZnvUjPqRAum=cQyJNTx#kY94SFYY+_x=Ub#@pq>Tp3oLXjS2;?T7l4qT&iW zVo4i|ngeLwP%ekTTl(_5IrP%&KQS<6*o7UI^ES~M$MCCe|QQY8erV-%dMm(d`zCU zM+X^WWan6Flc;z(AbBiiZ)0CxmB%0lz?6oFoI?w<^qoTEMRXPhSa@=+jD|)Up7<99 z8=bF5RYN2#EjUx8tkpO6KD{lU@>w>athkcOi>oL){^&%G zx}5Vbd&)_QAA=p96b3$CR>OdP;i;=dz|?9pW-fPXHH}7tjs}&3e`Y*St2r<8$6w27 z*{W?qB7j!~1W#b#LoLsgiGyh3*nSe$LL?05kOe)C>T(d)Uf0%UItMtLj$|;l;ucNvJ z3UATl>!Bw;Rh7eWWoMi^jBdN}9P-pm1xIxCgE|&AxoZT?zcEB6&eex&q-}=F78icB zSkArNHBM11KeLxfDCU7WHT?`x`Wk|wWsK^+V8`o|MPo(a8~AP@^ML4IcQ;d1uiN<9we;r2@{Q`?v(z(kmF<=$dC#OLJ= zNJIq|QDTUCl&q0Lc%gt}j}eX<#n_@@iorjGeDv3M&`bJJAiue^&d1l zsj3-rLYJIB$?iRbe;iGVIDydN$YDL@C9>~e191opY%vtRI)?M^xOpnweCL~@d|(w> ztsR2G#Zhwg#|RzG}O?UU~B;AuUX0pn~^=(55XwU3tkAVdgp7?|&_$ zJMVvAJf6=u{AVjHi$Z5y3&-$_Re1x~;FsT*h==#ZhxbWACBknXeg3x{{oK)p4(dw7 zITvO%c$BCed+g~i*s~3imhtEyY-=E!fa%z%W0@DuIjY`0+S7Gco<`@psP}SZjqCsM zycc*gT3WR72(^kkeg(K7MTB{>`*3{0iimT{H)}lj7o@4%aAw5GYJpc z5d_Q1ox_IM7wE~>5FXfh3wL@aa|K{QXWCvZmHZAo6@>CO94gnH7eW6c(6dpjiwSuL z=ZBW)u>46Sn_g|IlY0Ku@9Y2y(oIl; zcl3nHEP#b@+Z}v<{rhy1!2Oshx6=+6BDpYxC|`N@1_67kq3IyPr#M#t_-}tMwF4*s z*sR&B@01DxIc=Ww_VTzhLTT`p8f&~Tm7B+=<(a{1d z5g~!%sqD?IqNN^$;{a~>y|u>^yso9Yi|Am1XVC*JCvnjS-r2+FTJf$@1$ymUE35XN*6(PbrMKp= zpJ0DzkPAXi2w}1AgRT@p#J8V5)U=H{ z2jT+~_pNm1Y1|p=e(t{QJlQ8ER6KBML<>yXJ-W5Adk+l>QCs!)hrerfj8!vK-47ab zlT6Z0+ZxqJmEw(d?Y2d{2pc-)`4Hwi@6xC2@;x;*_3}6B%5riGX&QsZgwyYF+1?%o z&*tlo?iYX{?y+fN=853#w-Y-*&&Mc;bX3AUm^ z>MN2X10|GlJlb0P7tIhFsq1?=8eoA12duu{`I*7E!8lDw&@QqE6&)oaV@CC*7heC- z>Gx^|-8%AeWe!=ONj(!qWdfF8Rx9khoKk&J9t;~W;3o7)5IQ@+Z7X{wph|n9O$R1C zwgch4aD=}1@rn7ONs^2DyZ^d#vxd;P7i(f40Gtg011r)1( zzoDGoUQ$MryM)oH-NI>n=LiwQ{4bj@$T**cT$Z)q*6$jTf%@`fWo7Cr3|2yqmB3_c zR)9%P*6!#F4;#7M`1mNNhJ=+Gi@xw+&lO4FsSNKFOWo5IRw`)YEB7jj;d)^OMZ)8| z$5Y$Ha2bacya@b#eLfXcdIpwYcLF3^#Dyx`scoRyn+qt*!yFnw4tju4%)kT=G6EFZ z=WZ?VN^I8MzT%_Rd-YY;hti@$b<#e=S3`agtUqWArdmRjCb`xP{sE|xf{LaZ9IGM5 zEGw;6?tg#H<)=!n=D{aEp|5x)4>LOqq0Sxst27R!?I$0;j2?XaQvp)+YjU&;rfFA5 zqu&u~sqn&pL&6xnlMtFjTZ@dWf+pes8Z|=muN&vPx_4Xg4j zNY62k27&^*@qYW`zfJE&Muba0r=lW#g?#94i@cI!I27me^h@8^y$3lctM>;{-=X7f z7QxUBD?X6pYgVhTrN+hI>i+tttIFt?%@q_CVvyDE>|NDTNPF9u2D)xo^ESuy)$k0> z++IoVEG?x^&QFni3);l{)pWMnC@NMTM*}SFR~j0%0V>r6Kq0&bX*0|Z7}vI5x)$>< zGSst)5Q^NOeg{~n&LA($-BREY%^BVf3R}U(#WoOvgNNd&L5B~;szwXD4Y?uYtUNW) z?N92RNKuxABQ*VHZuG78OUn>mgE~i8a5|aGui?cZq8CROEMV}N$+v|Q0I+YXXd2Ky zMskcWt5EFxZH1IqUgsZxLP2lN!9r@$-g89>7{Xk)-*hg$_tEcCSCoOHqlr=NaXY!?=}{oZ%To%Q6f*!?#ff;njFcE#I7dKAuRS;^ zp4Mg5(5}3CiVHJPVU?K@!i{uBcmH|d{tIO!+ zGn2?~78;>ThYxw8I*lTAuwx4gOQ}(%W~t8NRiz}mUI;*81kW6ZOtt`}MOKOl(>GNi zoHw~=62(OXHsy&Rd*q47gM8OXy%MQ)VwlV=P?GqIx8Z5>KQS_h0WPtr6$a{n{$Y^R zUxTC=yvIo#UPRrO(Wr>3T0KF3wZE_$X!9f3>x8V5(IViwv2Y-*KhOdCViXsYOYtFj zlwFO~hj+#3=%WP&W$T16xz-{U&|sqNnH99|P$}o+OyZuj2;Ji!fNF%6(~{j@0~8MM z=IhR+4?q2rF1hx3n)CY$PLulR5l8Ev;9-nC=?fAWCjT3WZV z&jo=T0j~iQ)2jhVWL;}cB0x~l|K6X>)D#(o-lZ!&pmz>oy0l7uuyGa*|=q&UAPiqPI$RsJ)U{~ zqf+;1bFiA)1ns;(BcCk049jy zCPV}`sidzvTq+=_w5!KiMNm#{dwF?kI2RB(`nQXgeOMJT3M=Yp{lPLiR8Z}dhf57T zM1G4MtY5H;PPuG2d20xPz4pRQbj{7L(A@d!?224d*`pFhn#Jb+yS7Qc4O~1qB{pkHlXIMOhD^?$^ zIr`z3g>?Ik=g{DRp7p`9JJ<9?>fN(FZ)*`iQQ5{74*&e3aa3wGaM0kPpA0V>oY_r$^yfkfgqt) zDq=JkB^O*$R-wvdMcA*Vrk0WtTzgQ5EnNkWyR_Ac)FSkRXz2Ul(GjvhYo#a^;JEp4 z83Rk1Wn$H5Sji(t1od$|SC}}V6z*xARqKRM$q%8p7|$L^5Reoq^8iqAceQKJ;+HY{Q0*hMrB3gL14{K~e2_XOE^!FPg&P(T*b0s>h%` zhy{Sv(C84Z{?rSfpfL<^AH9920DNLnIjf_+TPPJ4;tTlVV4&)jw?Mu*( z;cVGH9*_lsC@UscSPp{;z#!8@P{DS_bc^TEQ;>Km8+d|VbD+$l*6U!^4eJm`-O?lE zc|ij~hEjLBeYa4GxfT07ZB7nA*u+ZK+0>lY@%XIdVOQwBhj8AaC@{OW)F`U;RTbKXaYDhlkq{pum2#0+^cNoYBMS zrPqIy9MQ<(y=W?Xg{Pf7O#XHZGeW};su>_QAg|~6IV$^Ydq$x^_qBI^p$qwVAGrGh z3H_i@IVd<#LZG1RhxnN!VQy@o#+5TT&Xh_2ONKiE4b{#`!4l>R4>pJ>tzY*Mt*=z$ zh(@DADVpWboLWIGOrii)wbD;alm#>Zs=xwJj-h6)(hY=!WP28G8k%pX^-GrbP;9&Q z0EeS^a`j{qM_3Te|Dfc6#{jvZ1v?5wO+v5Xp0#1GYjoE*0XR&=0F%W+_trnrgK-Eo z3A8*%SP-=FZ44M|_Losjga2sbX)z%*h&?8B;x$@;X?Kp&uHM(MA-q}inCipVvt@jU zM8T{qLwIDn_`2w69BDEeg~kq9FT2MhBJ^CkmM(!tiSUs;84(`aN zj=lA>?SyX0Nl_?!SM$Kc$-w1*`jN}UyMTcWgf`{2rnZ8wv?O(Jxb1aa;G|_(A=<9$ z@IYR2!DRaN&t*;Tp;d-s=TA=!6Z<)5jucrWgcEJ$jBE|zM|aHwp=}6Yoj>y>>f5`c z=J$|80)r4CPn_q@b)VVEOThs4wxkQJbTNs{`F9=sQEs z3@>v1KV;6>PXB8LH41o5M)sPDt4%^PN1rMG8P6a(i*y|uh*~Yck~7+|OTF+LU7ztR zVmuo}s8IE5O`3b~^libgN~6dhleTRc8)SeA%j*PG{^d}dr$Vt<;g4spDJeQc7UIy2 zgYvj1SOBjH?7Z%rBf_EKSeETBQdM5pGHGfEJ-^OMSP*j{!g)~2D6aIMB11w%kN^{y ziPpNQ{RLGLHuRLV;b>A+%YcXNqmD^P54`=%!fIhG9`XS2!vo5xckFTsG$>$c2T&or z@r&=BB7LAzTPM(^_n$=1UiGD}4P&7+_q#RJp;x-gx(zEREm^*mKKNuNEnl_GWf%@Q zBFFltP7eBba_qc{-+wTN7A)CB-dfA_B#ED+P+0*J1|&qI zy*37Xr3H8qwu9<7ihdm#Z;<@?^vi$fqtE`9!do>PKc*kKGPEavBK*md2Dt<$s6tFU z{obZZed+bXo{%FzL3hv5;AvLZILkW;eV3En_dfCwAHyHCeEu6gh5xWU)0Th9yn7}6 zFIpCRO_=`=7d1++rwE<^`?d5>H)kQM%vW&svDa8^!%>gO2mh;Ts0$Q8S` z!4e@sEtIWk(acd~trS`-D{y!x->-7rNkPr92~f~SbdHl1KD;kz@Ilwl6GI4Ya*qV* zlxy2s-V;Iw@=FuCCyKWLL){MqU3X;p)&3x%nujY4?Q zN*mvvRUxuVjed&eA!LZ{BV>qciMcncq(+DzMLu|DxB~!IbjF3`6OLc|6?VGXMxd5ewm9%Gr;<{snJ@5Oq(&@DJ&^4_)K zGupNOGtq9FbjH1O@bJ;qk|QM?VL&KSVB){|+B3-$L-=aO_fOD*zh9M{4Lp`NUc8C^ z`ezkg$)1$epnYdGg!YUo{dE5Ldj)kJaHTN)9Fx5WmA(D`@6@&b71U?gwX|;IZW%cD z-9BB^*I#+_N4fj94`$Eq?W7B@mSG?8LN7dTJax4>K1aLp&NuDCo><*(S@m&~`ojVC zJO_=vkP!FM3V!oEDI2^E~>$VweyP7S(YwSpQ;ixft82jL{1CGi4flRE3@gBwYffl6LkNk4^E{^`8sxO5h=$HukX)|dGzVx zOwI$A`FsvWgZ;gCT24K8^_LWz6iIcwW3s1&miCP@ROgp-3Him z^Jl&&`3zj#1%JIvV^6-5Moqe%{^fszb(iSS_5t3BHQD;YQ`gYQ;XUd8$3CIG`_z-{ zn3%_m=uP+CIh}?N=^^bJKvDbs_yK3 z_6|>)IEXwoXzZER%_7tPv9Mk-1JlVLWJ@Ccw$U-d z3hut=IdoGX6$!jtsSE*7+#2s79I)=9ky`?fBugM+Mq9jddCYD7r1o_P*cF zpPw$H3Fi+KmY1!~_;abtMs^se58Qb^-FeG2X^~;IRxOih4(Ef;zThz$HRTRr`Jrhc zXz10|inj)@#|khQ*bt(fIBo!?v_IFb*zlQ0ub^|z93`ZJnAk|o6&^xdcieogbbSR~ z9gMfjFPcnuKKQ=G*8xtB5712ZxJt|P$BwZ|T)cF%cvEMbI-E*4DSh?LuQYv*3VSuJ zKC7X|>$9(C(``4LBSZx)d+Nn+6m@Y@bPs3#^t4P4=Uw_F{XKiNur6PE`Wgn{$@00? zkkgw!bqt*{WiYK-zmtCbeW?H$LOaMIiXbTG5Bm4*%wfH=M0UwjHlMk!h8masMCL5t zS&{!0TXvwD7VN2_=um|gT~%+UU$<1sgmiA7NU5SfZWe^FlwN>xU2juXp-lvU5G*Xf z1wbJ})6mf1lwZaIubT6~(JH!|o+`$G=?6uKcuPBrjfYBU)qc;4Zb8Eaz*+k%p-^@y zPt2ZpUZ7hePXiToYq9O}z5Ww*?T{QMWDTogMJ4BcP^7#szq+Z1mZyfrK#%k&sV|GQ zw6KTgiPrNQ50?vp!_OiXJTf^46>Lv%^Lm+<(mGz+!^b8^(Y){0(423T+N8qlQp(RL zaZ;5)xJu2C$2ouMSRo0(ds2%%qn-NSzdlPBT>cE5bJ62;-yPFw$iQyWcn~(Qe;23U z000~-;aj97QkPCT!~sbGx`*$*NLF+AKl+h`E!wn7mJYz-;h|2)3GqvB43+aBN??1? z;j`LVr;lh7&Q-I!A9`QHAvbYIQ;U>>hkd!l>jUBA(fcl@_dofQexJEqz!&XJZoBbp zxt77f&O<>YocMPW#`KpLR<|H!NcczEngmOols96grt(5+T>1kq#q|lmo+t*Xq9vR^ z`hG)&0;}x`a?92%|5N7 zsWXQ{t;+GxAO!INa#7XweqwJp7(lR7YPd*DC7`4tCz+G$M+rDy15`xJ(ZP-|QCLI> z6_YYB*D_d@6qHk3^3hxolpx-E`DS|Jq03~FLJuZ)bwmgQfO!UrG-$5~9bjMGIWM%8 z--DsJH@$_k24JvC3>($$?)Ha$Y~OW=_U+4}jI4YPy;TS`Gd>=zEtJqjOtf?I8eM_W z!usIhT=Lcc3IMo-ged7et7cf)-t*8$k~>3JS}lXX?Z;otY647Gtw4Z{AaOt;18V39 z*ZubGK&SUS{zA2eApJ$Z zTKOZZa(!*Bwg+VmbqBdB+BYlhIvhPHj76F1PtfEri*MpWTltL_uY5+efWiIWx27IiU|wWi~nd$L-1jP5X**5c6$P+CgoFl%>e zR|V$qD&a+`J(F5(K1>=pYylR|m7udMgknL2n7_Tyqh3o8hqWq(!!n9$=wIGOsm>x+ zcy0sQMT?38yc*PLt=d~c+p;Ri?Bg5{YJ2wFqH<(>qBVJvO7utNdUWrjb;^A4T z;-dIaS}Qd1y?IrB&o3dT70)40^s?%f9@*rjfntySqK*vpUy7$Tn${JMreI^`QGkky z3#UFDvMVdDk{0d_Ze%)^&)h;=m+hmd_z226P~dbE{`hDKjXI+bCAW+ty@o*#iuO%+ zz9~5pR|e1N$1fj|CWntc^Eu7s|a##_Dn~?0#wnCc2t=mb{ zFMX1ZWEPMfyW#57#mhn`Ssd#JZ`~n%ZSdd^8{C7I&3#=&Rk7cC9ral7EGLfbFMXu| zQm0HALUZP=rHih7mR2ozi`utS3TZLPZ{5CM`d3|k@f2YI9z74m(-hgHH-DlkzIG_U z{o#v;>8#U6(6W_V>4rPrpxwJOG#_$D+q7jr`Dzlj5#}FB+kRaeSA?M|5SPW5Ccw`7!qWuM)CxqS5$#+k# zXAEmOR)gX(0m$1}T8Ur|gdzvJ`g*EisK;=BaD4%;Rn`bLm$%HAGq%V z3$eUqC~Cd@`WLBl-^=O#JI|+w?zvDvv1{knv})noA}jRP`@e}q5WoWz zd<=NeGUM-c?2s<{b^sgHUs(;GFZ}0K>eBCWn$E|*aMmlLK#maH$Dhxldv2R1v~p?m z#=r!T*hilFjK29{zWf#n?H@5{cH!f&UiUF0`_Pt^AJb32Eu#A#`A9q}SB1D>UtM+S zN#v~wFg4VXY3Fh>ZAL@I<4zCw{{{>6B*dqYg9>&Zbg@P)qEwoIS`A|p5e}%LJ6e&3 zvW#PX7fKtKj7V2H%kpRND3IsTYseLi>KrE_E{xeKo-}`6lcT$K4f=ox=OI*u--Dzu zXIlY-q<%7nmZ2E-jDE>7sVm_x6NmCjXyc)BkDn&oN%Y5pY6UviS{ZqupD)~5NcrXd zlT?!ZN$d7NVHUPa3U4arMMx4vk!5_JGK*_E~h&sC388W4ZE`V}p3w~Nh zBTnm0J%+S%``wkRx6?Zxx(BDzPZ>tve)^zY+X$@GzW(?Ddh+4R=|c8APCxGv=@a$& z`}ay13~WAlC$^nqSFGMamtOM%={5WwT6fl%`Kc!jp@ZAMp~s*3f}Vcy8+!fSU+I-+ zuA|E@nIg*J5O{s}wcBJM01V*eAgqDGfz>HMKr4(Q0Ql3>H1_1X#FP5`gL~<$3m&Bb zeLIP&2DX8m+)JPv-%Wio+JIQ8zPP{arhiP?H`@FvVU!(H$| ze*5lmyM!*bg&6xw3`*#1d)EW+OBf9@N4MT^Hr;j0xfVJ)2nt4mHfCj&iOMQWoDXWG z+Io(`o0Q&hAwdTIu90FQ4GgwM-mX#FYJdFBU3BTSFHoCq7fRClm1nP~88esDoA3Qb zd-i8iOjHED@zRa-(^rp5Sks-SYF)J=Bze~@)98+yrb?n3#0#u$u%d()7#QezNXk@@ zL5=HYDGKC`%|k^!9+p?pKvO@EeM=)FL`isJO?=o}F7nb9YzKC+8>2B;U>x zwQ~

T;Mvl<<_OsfawiZu&{Z+KWJhxnWUN-MnI;NbOVa2{sH+8oL*t@B6&uYa2; zQF1_X9+T&+&H1vT*JE%jPwksTtrC5;osvJd@)S!nArQbjpq44X-|<+SVQx7 z6nfSE0%0{!++!`kgn1Bbyp>*QD&>WPw_FPW zD749VZ2HGE`Qjl|m|fCT)8r4!J5o%~UG*hB^5qp25v?7Q?$f)2>ibyvUvv2>^vHb| zYYLGfk95-=Z_(y$`|arEwsCT3@;x#DHKw+VM>5|JHruv#p zYQfRWH{Y8fjK(1YyU>eIUn_a2$cRv{>X2k#jE;)nt#{OMQGsAj$+T+)QF+n-DQ2F@ z!YV>Td%9BeS%To|;`m9g~9S_Azl1>e6M6`X?qWJx!~s z2-M0e-2h3di>|tm3JVVpp;DC)UwOHD+Q9Kq#q;DzO%d2*Xu)m;mjn4#(q0237CqJ> zDNN|+;lWC`UF1)Yuky7W2DXd7R@Q>pBAaH3p3dt~D@XlSLX-kbjf@PNG8GECKRqUp zO5iPl9v;PBsMT8n0}$5)Bolv7)0_PGBYX4clgIz0<}kG3c>40s>4A?gq3C#xwh{xn z2vOiM4w<3Q4|y2~sorwk+0t-ND;)OsoYkC1dd{UB&zYwVm&7Z`7tg-@EloXh6kUDU zDYRtH>-6qNf6$6m+okpbxuMprlWFA8o}%I~n2#w!gNf9@lT}VZ1MS>fM~5;SD6bH0 z2BN52uQQsyQ&Q%|4dVM89%>X|D=aoq*RI{ErnWn8yMfZ%528_H!)QRCSnA#>gd)QY zUW1b_hJH<^0~^V-eJRf-`p6~CWdM?`*|kz{)H6+~TQU0Kn!L57l>XUKDe4bU7RMa4 zKBJb>nnQxfjX@3Iitloz{RTW;EMnFisii#y^?W=*bmfp}eH*IxJvU;lQ9>R#J4anG z7UAqF_O#Mm02K1xc%~~<)XTL1$`^x20Y!*N&h6kDE@Mvu?acMGU`L`KZQwhlD$NK% zR6sZ{!^eVK5Ee#uj^$%hZDJ^yb4=DgPdl>8{R&JN zcj&;|gL7`sGz_*V+rtZmcZPmX1%8!2@}UlD(Fw^0zdfK+Tj`kd^r{Yo*wM+}3 ztlUOPn8rl%16K_R7xLN?VvQWT51`%q8)(#^P+7gBBxUJZGo>WO$wawec{R;mR7E|z zgiyDR!PK#Bka%3j!c4_E)VOvgyT%9UzhHP6{@7YYKX0m_H_u6=Oc!-!ak<@;hc zkBp&x`L*=x=87gyJg=gWTErZCfWp|iVMGi)!{I%6Pa%8=(l-j>V^3D^_4+5&mT8Hq z?;~G{r~|qSY}m9{^*hM9=H?brTaG|zS&+p;Yfw4<+X(yjiMl1G|c$`bIHF$D3CXh3%%)xC(D#Y{fq|g?Z0|m+bZGZ_y z!8^0dX)^;;iJyQ8MZ9RMftDRsFAu<;#Ua+6*%h=eui9(n3N^#CixwoHz1UJVRsuzo#4C^p*24_iH@BnHsFL-iENp$ktvr?60kA<{wU!PZsi%|2g;O+xV_ZxC$Mu^pKVr(>ON~o^ zts}t_Sr@*3PvMhK1UNX9BH#~f%W+=e0t`aNxB?=!c|x4fIJSt;-c8G;oFPgip0@ z%FJn`{f9XOml{Atyu!uB_M|uup}Nv?CL6NGJra$;ZW3wwWwjhTgol1rEPp2 z;4wA&&sh?645+1JAz%etrB14m4s#yMD}aLL-qw`|q_7w2=S%+Zyo)VOC|0UACLeE2JRki?O0xwuaWi72*mrZ~D zTfv^9@{rmNpx|JV{1669UO^*au@}l74suchdxeM>h45dk&UqXYY<`i&D>LHZG&9fz zGB}wO2_nvIl~r)ee0_}oU%&3bl$F;=Jv;FOI4WF3H}@Z|r#e2S5d%ZzcfZcAps_>3 zC_XlTy)oZG3OT37RWo#h6Xa1oU0EvZ#0&aIONcDY&#p%}do{0}okTbPoKK7Q*NA6> zXi;WKgU{hTt6^S6%k`)bUJz6_Qe3!^2DSFD{F5hk?eG|y+%=4nA_M6_VI8&g5QNRO z`Xzf@X*{9>G(zXC(vxWC9`)Am8#eBt?$g^yuBlN)!>(nzvUpUJHL|MjJ6gC7G6viYn`9=7v07wM_`6qIO4`{PExA3?fjZI8x-j*MxD8BGq0NPYhs*i5?P4 zdhrg!8G^6?xFjnu@pkqxxGmXTa%4`>@p9aF=b7G?0tj7qW&D_#6kj#80-&uxBQA)+HkN;ig+<otf5RZ%1TJgb^AvZENB z)K|(K+XPWoPJ@8ZBnAlNrB-gJp-Cgdsf1VXdk^UYrtTRIM;fSYt03CS zp~T8+1LxNiPigevFxt3XVe_1OawP5L{dVmTz^@?j^5!kAq9fT2blUg`TF741o&!9P z3}#v#YUFSq(Xf7DoLBRWOkvJoPqn|g8Yz{%sO`M3tg=S-sQjbc5E~vqe_X97d0-U@;0*~peiU<9+jxa4 z-ZRY$psXrWTzeg30pU4>x2siT#&+yJEMl=2oHvdhd*(~k-|yO!NwF~zmXZ)>!0FT> z-4fPzp7^ws)Zu-&QY6P&o!LJ{)WapD#}oLREd{zf6nGBPhop&=5PrKauZrevEA(26 z4#(0lC7i}}i*KThBWE*fvu6qun8+vfNTkH*V9O+K5-FmEoJaFjCr|On!e}&yL8B}o zHS7b_dDJZ-jOQ=H1Fi=atbJR@h<6rjS+JTcsuEi{2M57h$K0Mz8DCJy{c3z{o0sjQ zo5s9CQ*RneXJ0?sWz#d*h38EmUk%Ufk25O-987M;&d$9`AC%+-Bh6V-B{`_JErSF^ z5SFWVvCzQ0(2hfcRW&9K3pPlI4g(GzSf}>Ev~CM0_%Dv;Ri%lN5&~pD2#JnjZwS8y z7-E$H2NR@-Kj&4_uKo4mIsLP!iU#)PkWW&8fZs}ZT>QU}e<-7q#)MPHwjR{WI9Q|3 zHtcH-*U(8dw-u|^od(YOOxQ}uU(aTi%J(`N5 zNViS}ptN#Ool_!c^}bTgP#f|_sKr4@5iGl%+4^#&Xum$x(%}}**Q`x>bkK)fQv`e5 zr}s^!#3&_X1%-;a40iBF^v?GnBb?k@>1EYa$HXB@Gzs*TzK!dIuDi(fAdhKXyk>Gf zZ1JvQDy*#cSwGNfcx2ioh0)NCu@uW8Q|lrXc}nQ-t%1-jd#YOdQ=c)g4S!Jud0S^) zH=4$r-B(BwFJ1pFhxc5&+mHo<+!C07x4t^ftNfH6!%bhixt8WK&{S2sXr>rK;^`>A z0XUG5B@l}(;{Vn$D%IDCP6VYSDXcy@ zoZgX=ABqh#(ySd-bj9FkzlHez&l&2}q*l$nhY9b=m8{Y2_r6P8SAQ&}AYXq!&*^jY zN5do}g2oQR2jTcZ{kqWJ{h6wIm0AFW#5wX6`!#wpVdDOCV=e=NNte1eyav=orN$@) z#a0ies?NJYRyfxqI>m_?YM_M4I8VM$kzdjqhKmggq_OOE!CSNrW3>BN$-rFZBP$PK zLI6`*Oo%9Oz(n=^V2R}Cpx*AUX&(y(06&U&0f<)bEU&CqKnW~LJ!BQT5jbvYf0};h zL|Lu>^7cZ%6zq2H+lr>$I$jEHQ`;oaWe=T1pFZ)IuHUYmzmvXrc9t|obmvKVY6Zm& z^wVDz9L{q;7;S}{!@~^Jtz!_Cm9xv9i|(Ih8Hmb4(`*M$IApNv@S99f(JfbdXunVa z5|AK388;Xe(1Z6=#DKJZYpsOv)@-T~#-3=d)+nA+y=9l8$t+bNy`?pH!wfGjGi z`Qd~|2d}J<^Dzh&0?Yt>xeR0%o*Csi(@&=|L@(diZkDrF8V76urkr9*54}Y*b_zwQrY3FTD1Hs+x<|!UXRR+X)&iYf#X5`$CoC707`Vl?QUs6XjLwUw}e(CCo`Im<(>(R&v6B0Noq63TTKMaFs`HVu7@ZK&)cRQleY$5=`2YU6PPF`n zpW2K3VOZ6HEd|JSQDl_h+2OO&@5Y8*epn(5?SBD&7VFno@+yfM>WqLAg-F{H>^V{xuhnCEJU6fv4 zdgDjC&x(r5h4B{^<$T|glj6jSnmKEQ>ULd8ZGq|4n{yawJMOLZWDf^<7mS(gk{VjD zy-31Z-dJ3?Qf%AWq7DvX1sH>_K-AU%8t`h+d@$G|db`)c%JW6U72>dHKnP_C=mlCk zxVJ|;i}Uoqh$*Obkm0dPXz3RLl8&K)Hu2GHbDVdC+WSDNHK6yM@#uT~g;JNMO5ZoWcuZ;=uxiTy1MrT{{#LGj`f&P!c2Jw|{`mqB~UgJ9s)w%dY409w>7TjUQ51B@hJ@I?cTA^0{$5VI_GH+74sFa9X^FIb z=V80|yLW9Z0?yFiR5Moqh2tLFK9(oFI?68fPRRiwJcP4$W>wG{_97a*m^`uIK(fCd zhp|F~0+g<{8H)6go>m`VB%&WvPu>QIH`X>CASZaMP+_f)>cIevb{bYs3?jNaGAl&s zp|aL@9X<>lgz!*E3vhzqE)3^@`?7<9=|El;Rn~czE5o%-jR{uHAt)q}bEk@n@cTzg zgq(muF!R%8>^=ETEvzW5rpGV(ggW(ZNqL#Ylyj)a<85RgD3q4+qtEP1-WqC_5Yo%Z zcYlN6{osWHS>$oB66(<@m_3ks4o?`Ved|E#-Z_N5lX}{7ph2kJc-)QrTmjG^{F+-> zPrLR(aiW2GbqSVY+6Bw27=#*W+^{eSw}Bp>%rW(?yK1G-w{!a-VF2dj)d}$-ln3$r zWmN)P2oo+{T_a!vFsx+o!%o5E%P(q_R}On`$a5hK*q?Jw3szKfbk6x50dcY+=sbr<4l>xnJy!8P$hgeEmn4-?{6-_i5Ddw?)YK z%<~_$YvY1?ruHiJRFDxvos?GFcy}#5P!Dxd??n1zL!MXkXXLOB6=ZrXV2U11qr1cl z2?79+!(lRbO?nDfk&i+5T7)V?E$qIW5{1fr(91R**e2-O@R*V;wM1B)B8<2BNCls- ze;N=XgopifX8=rz4rywmQC3|qeYoJ6dF%CsGDzdtA=w0P68n-u-MHkaCN>^wk`~X{ zD7g%HJN~ljidx#de4qO-8WeHZMiu#!m9w^b1yDjaJy1{I|5@&q{tYrjI(r_O>>0&I z1xR8OUQ`-~^5C5y7lqZ<ClQHbx1%q0lxe!bt5}1qrDkG_;QTbPeYH zS4e>`7_46+3G|{Q!BP3tdi+?kVy*=cMK&A*3(NYt&Zxu+P z{N8*9JM0hS3B17YLtYCxE9^Iiw+SX722nVlM^TA#P2rXG>>MmW{nx*hblQXn2}8QP zE%E7OF7dvVyY)BzgeqQAs$E8cUS|(K`5Arm&RwE!`N5|%n?B3T zDxkpwx=I<3fUQWB$i<*Z*uE=K(c56nt9KSaJ2w+8LU&tr{lmOT;r7)hi&wwA8pJ|^2 zt*O)pOp&o+k{hZltC5!PP(=5|qT|EqnkUbs)?HHQPxjvCeYeK$^ZnbhsJ^a&f`awu z8E~SjHrCKz^W9%SL=^xU`wlCJQyFMtk0w}v$keC+5C{h#A3z5W9u`7(Ef~D^9IB@- z?ERcHHeA>-P<^Q7{1(E3AU>e5HkR{7@Wueb*bm%f9Mir-4U&h#e-Rq|;M+1vW{`vT zgKZ+8b&!t%d8RQ#!sPw3N~J~$-W&`b6OvpztuLZM2Bj+SV??gV}hf z%xBUAMnyy@gI`L7fN?~KC4|QlR!LR8ghsb8FnP+%g&~}o933Qp2jSTO8`?SQp}?es z*Jo974>WrLeHhmde||Z&?WU~4<}#T0s)Pj@B_$mQ+(| zVFe|o=}Yk9gy-_ay?BlL)fLXime~q&Lp1};M$Y$ukO29jf?|_^68?+H9=Rrf(BbR` zy6DU(&Lag%xDEPw0EaUtM{+)>L2^Q{UHj|gf+xoXP*|8Us19W+pCN>YZO&d?C7@Ad z$-|(=386{c#L^0r=mEkrgGU&g5x(UxH!3Rt1{qD1$H#$Bzi3R_tk^ zkQl&eotmJEafCyaty^e|Z(pOgXbjYVPemh z?{zGPeQz71Z|pX=nbAzL=UC;Qy0Hmk`@01w*gX$@NaM%!qhG&yjCu{dM${niJJ8S} zYh-QXK5S4oDzB)f+4I(DZY#xw3c90V%tFKz`H=mb_gJ;RR6G+?Gpwbs&99ba%3`is zM}8%ly#q8gw06aXce8eX39UcmIl%+-IOy;Ix+F`{E>02QwZ+f~EU58$`6!ANypLh* zyNf+)3TZWfG(v&{+sBAhlXadkS=1^(C|S?BK(%nKSG1>uv=~Zn zpVahskD=|zS4&8ZvHLqRF2W9=>iLP+>)j!Y^81_$TDQgh_d)Ll5uvhL35`Kd4cDW@rgJjY4%bucTbKj&tete2fI_m*iuy}*W z*d!;%HUZQ{(yV;^icrW~TG>E3WwpW}D^_9X0cTU0C zHH84-8VbOgJGD;|rSK$gw6s^>e59OK>@D`H<8C(&Tj;)CdbTwBYy&?a^t41^L0_pW1a4-|A)oAwHzO4+>y z`2qPWSbjzc`DzP)+aMkk>YYmR%SHak(F{6b_s9|b@^=Mo-su{g089wifzVLG9#X5c zfF@16qy(dc$&gP1pdeoZP(kPo7ZZ7>0~vK9d$gKEh{FejN?vK|$q|yj0v#ONM}7xh zPb~w?yiL_Kg+qV{34+kDbak~%!lA*6*epmBupJCcVEIAY4->SNfrsx}6<|PesNoxn z5FYY0ptf5L9$!suqW~X{9mf&Fz#9`CAe3`}Hu6yLtdbG~rBJyGgCaWlf?T21wj-eX zXlgjP`IxkEx20sCsOk-vn9!yG77^kdFqN|>{rK!c=}9%TjrWZy)y%YQF&SEQCu2;q z%kOpR)RKk|=|M}DZy|TKZo?kB@`jh_%a88kaNkw*_;X)TbxkdG?cADn?m9wkTc^;N zQN8IA&RJ<0!hu5vcPDQR*9hYW(m;4YgjCJM12HQLASJX^OWQegl~-2h^@NW^|Cp}v z)Q%JVftJp)V9%{$ugTM{xHtzi9z;mdN*F+E`|X+KlJf$c-4|fO+yZ5e-mRmh2FuzB z7xeJ$S!EI~1o(N1OOR$lE0Og05Rr|tvUjl<04QzCtQ6qWOFQ=pppXlC@%nG*jH^co zSpELdV)E5CF4|4^oc<2QCPmW0?b$pJ+TYNS@L-CJah*H`IQ=oVQWcy)>yBhFI+)QQ zWCgUY0Ba5sKw!GT3)#6(nS3*|Ii$y617iHAAlCAZ}_Z?d6|OsoGO!??@H5U9<#gm5$Job&(`?1x_$N)hhk4_-=p_GM8~ zQ5lUH(Oc-~r%o9np}#M`o2U7E6bES(V zR^XHN@^&;u(bpRxbEpuLJPMR1H%AH2)lyb4&e7j)YdS)^CQil`SydQcSxd_ zXWp#oMPY)OIj>TRVjT@$M6@L&1|}ZJ4UindgpSD>IUo=qpj3{F8ytjM41+M=P<-2- zJ*CZ@R|07QH1UWqqp*NdIXng-*7lqi0%HyX9yc6733(z&5g~_!Z9)|S0*PP)swue$ z=_1ZZ9T-eNh*-bXeRwj7K^FjqumL}D3gG$GZ{;+&PY8RC zf%H3rI=~F8s*BH#lJitEQ~qIUobwSK3$nzqG(4bhFDaqFcT~~)=Oy#R)JT2OkDqG! z&A;SPUU`G`qq^shLTPY!Rg32pgX0?!iD^@7G3=1`4v&F9F;{*_*-67sYbaTtRoQ6MIbY?BQ6|%Asf#a%6f5`=aErl^UkZSbxZ%4#Q!E{t^H)c_~Nc)?_|1t-)n zVNymO2I8wN7-(|xKw(uV;7|pJ%n`rnlk!kU71XBU}bH{sHI+MAvBcyYsf1$)>bn}okoT*bH-eURXtOP6d-E=+YQ(*!FpodXTx2 zQw9N8B?i0n?wZp85@5-}(||X%o;?^>VJQ^Xez`1DJRH3W4Vcd0DfMa9h91062(p7?rnk!;J|PU4hFFP>yFnUtB$PO_Ulb9OSDvM1S;nKOw~CW+%D zj(d@-EZedzt9Qxj5-Ex*6va*gAOUdi?>;<|l0cE5NLo&Ga~RPi`0xO{_y7Liz2E&V zjIp!i{Fs6$phUBAun(u}zGoQJSAX(Bxq8L)3x3YU@aD#5U1)>nTp08((HF#`jEDiZ z1=z`8UDOc`tbDauZdn>IS$L!Fm`4opNO7TK+=^-s*9Ll!R=w41sXk*Wy2&W3aNNVo zDk7Gin>NvFf(Inur1#$560&q2sWujTzyKg2)pz)qGm3+{5x;L~aexX1Agt}c(a1U0 zN}YoNq@A78IUf{w1hq73O2}WUsymz*7ArU*ea9y0txX}BKFMpWj>k=%;FF*Jrq-CKdiHNu7SZq>h|s-=AOaGSKp+ja9w1DQMs^ zZ-!4+uML{}0|u*SbU^?dXqshnfSnLha%xQvX-bSm>^fb{jU^pzwYt^>tzl88@_QW< zMg$Ca=TW12=U|Hr)mm3kf!?Sa9S3GiV5t%DJg_Q&iasfvB4BHP2X(TG1u05E&JjVR z$ntA5WY7Mv9MZZLKj#>W=lSH;>oYA)`RH>E#?VM{@>-^h_u8m<*dxzPV=?FIiY);2 zf4V=<(wyf z;cJJ2$~IEux%-Dnadtm1%&8s|PuN#(k)-%CbvKo6JE^nPjk55DFG>0FN&^+{5q8nA zAY=H_CmC>Qf!dU&{T(no(s$H@ zdgEh9{Sc>wg=6z<(r-$<+4rcX*l?1l5B9FU1c=~Ki1iZFa9xK7*wXQukV&|c8PCpT z&*wQo0SPN6*8tagxU?RIYXq#aruou*T6+@xcD3ggX34D|Untd;4f6V9Tcsu3`xi6s z#>ol6skT09bDTQYbc(btM2(1)!H4e5R%XzowHCjn&PW5YAp5*dvn;HEKpeqWz@K6O zvQN`yuF)z=zMuWRR_?n!+j^Xiorp-e)^d=fXJ@9FA`X?@qt7+Tjf?#}u z#<7#$!(xdGnl##hBO(n76sY;$w<1&C*bp)&2;}Ndyx4e7b8Vu4{f*YtB6XrSHU#Cv z`Wm-seGK&=zZ*XqSBVs5hne=iJhHOE1R*>>uI4-!ViElO-rgLN#ztqnJfP_Y-@m;z zWWy5Aj}%>~(xxw!=&OGj09BZkrbXT~Y1W$=tEFwnTV!}{>bnL`M62$2S#(J4tt$-) zOYavJ=i2P6evep0+RAp?S9@rxO}u`|)wJ7||20#}%THUwCF;aMnTgZE{TAfK8_r7G zzO@q7FWZ3@442f&izIc(csmGeQJaOH&vx(e z23dckw%10g0N&)GnI@`m#TlgRYMWY3@UXk0A*u1~Tyw)Tb+^z)%6E)khutC9-xwd0 zF_6(CfXdDb$fS9rq~g#SIa${IWL2)2Z$JDwDK2pu?q*ywPJZ~sKS^)n>J`&2_*q2X zw4eRH&O{HaB{uYLbh-kGqe26SzVjc|GHghi)s>j%)-YmGYFj*Hif;x`#L5R_LR0q!y(=5jcE%A7Kc z9lfmJjEZl>kaS~oq$Xj7I9(uhC*3z*-?P>N-Xt(ST-6gT)G5VdMe>J;)SQy{ zdYslx4!td5eZTgeYPEi)ufEF-wS}1;`Md(smg6BgqIEF}N$RX+k~(yvF~9zJ&t{b5nAH+COOe>cCn7AJm~T>d zm(^fYyXkPP>^$CcZ_CbM4ZAr$xkisWB+qGJ=eUSE7y-WyM~x&>cn(`iGvMvazRbM3 zsYTWwskQT zR=k0ghFCUTq}})#X+7Q)cf5u>C7WyUW=*FtQvJlKsMUpNkOh=*C11BKY>(x9Nc#bX zq}E_4uJ9p0H$`gdoaejP^j=ba)X+$`p%erVv$GiM(H3VzPF)R_1juCu9NFxL?{Zu% z03-%6!U8$Yr|!$Ka{-)?;o~}CJzkX&>zPUvpSdqv#&t1?H+p=Z#MV3{@Aa^;;}K_4 zF+&!g+0!JSyE^AxAMNfs1@M0ep-BC|o2>3V7u2W*j}y<_TQpT!EPWk(K2;4Z^5mA& zUAmXk6ZE00hgv!mE27u-o;Be^Z++|V+?zH$+k7frb^}{_>tL;vR|k_~OY~_WtDiS2 zM*^f9#kszanC~jDw;_w6me{+d*CjO!lk1j2jno3CKR)InMJeEtyJvL^Pz}{ha;Bn2 zN+t}p|30|mxb!xzy?3@gf5#$ed0KWTl~`0%W5c4kJ~^(y!*~lEB>?2g>XlVU@J8AB5D9U zkf>9;Iee^ReiVv80F#tjePh&=an!YrRYVM&i0($qQ_CWK$fE%ho(n}{eS=eH0!VA? zopXRWlA0_#;fO3qXVMP_sD0qJOslW)e2n_2)Ezm$2cR!D4~xJ|_Di2iPw3N^T0BZ( z9=$Fi155e)I=CqVs4&x=39Em<@#r%pHGo8nS19Ck*5@-67>!tB6wlP8DqewG({Ha1u~5;3>YxczvNEAwPxCidSzh^ z*0+_+VR3gLB{($Ce-6+gHFxcXdYf{*)F@^O@0c7Jp5HNrx7$yv`gFZ5)UL#vCfe?T zh5CE<|6Z>TOkK^omT*g3!^Mh;K6zMdU>!w#`CL zdW`9_yAQO;`)|#%^cShEx3@TpGz&f~XXEy8`z{1`2S7+nB^a`WA4??H72MvNI!6&_ zUQ=58s?pzFceTG=Ik2kf+ zx?plMCi&!%=Njy_@cO91F`9$-kFg!~4G1@!L1o>66LChL2jEXQ+%Vm5dH>k%*X2rF ziOV+PHLKYACnUCOwWN%hBWaTtONy^=(v$$lowJMN2?eP{_jXs~=`R+f+?axk1RaA} z?%$X-(*~`!R8f;$Gc9d1Gn9ED56{o+=!2s739&LLeVHYv$bDB59D^f{b02F6W@yX5CWwZl3EN-=?J-LBkfx#rE6I`!=yL?GT z!t@gTDv_stAXnl_TyDVv{Ku^ga_CH}{L6}hbAK7odfvFJByHkCNeNuKQ$Ekd$cdMB zRrNY0M#_yIBl?zL5N?kVsX^S@k%z->dU|~BRt#UKYZ?#Na8lN;l@V+SM{))}CbMDg ztH4u`(IXRwWEjAE(mI$SJzz`}MtunL?3O{np4L3E&AtXYZvXV+c5q?`@rts5^TEma zo%1iu;6!D_`ilruZKU}~-;E#TF&TDoVX7|X0Lz6Si?D&w>3|mswynEEa=OZKF-MAy z=)vUa(|sn(ruM`Psh9#47X*@XzzGvsE(WZWa50BJNne$sc0*`Tio zbzWt4wB7TLrI}h40BE8Lt>Jj|@h8tXX+V^Eq}~89%x-4F{IEOH zj|?^>wTbc&aY^U#?>&jIzU2rjh7G>35Q05U>XaoC+q_b)#FaQd8pAO;c&0_B5B16B z@{oLYb&WLW&%W5tbv~~1)D%ZtLgwV#tEwfS_sOz}fq1W5Ji<-Vw(C`i9NH|Yvu|>0 zRH?lKPk>;?h-|Y*>TZA{Y=+V7GfT3~k-=5Y)it-8cipbzjb=mCpCjkiJ&f;lc{+|~8qj95rCV~LKT$cvY zci0xeK(I_gAxFCJSlo5NuiujroHW)elgFpqb0b>dd3U@Mmb02t1%=lGr|L~LMBe{*TK?OvnvAd7R>gWD1-Cjy+Sfw7H=j-^~c|y zs*1?AoxMxVGH4O;Nuo4g>ZlnK+w#1V>%S5g1Pr#kHX?&E)5M#WVrsn9zY;axt`lMT z*O#m1D@$|b(H%_&7+6Z}Jsp-QgZpR37mMBheEzJ=FY(K%2In4a*8AaTb*r4#8tlmY z1d5Yjy~Nf%F0lg}ByHinj%!6PJ|pTUx6Ue(-@RFp(1Q*U&J0btO;aFq7i&gOkZRkh zwV-52vjYGC9HIv#=c(~p6>i}NG$pvByuMdM1urFRpkju{7$KwKT~^3_z-SFjbhjU? zm+GdT0q|uDP#^jF&64JEb^<8xNVQ!oNMrKhmc$(sZde>Jiysn)BW%Iq$;ljpr2NPr+cbMJ3X%G6@7eBqiLTf`RivEl3G8YA=5Wq59ytlHnK z3@R-2^RfZ^)%tq*;oU{j9{~ukC_l5iQN|2P7y4Jrsv}aOHQYm0t#(db#@XW%eg5Ai zb=J+2I$6_x9&ggm4?DVfMuDu{cIF($!oq#e+`(o))D|DqckooRY&=|RP2$Nu2aII# zguHg3qfO#WW7uX+l~)g}vX;9Ew~*0=ewjZe&j89zEn*&fs;)&g9jR3y?zx)e!Uh$Rjy+hBorgNe7eJ-o3o zXcFv4RyJuG&}WQl@4;5TJ45Ow>0i{6{zz%ryNU$rCF`)1Gi?%UXNkW`~PAb*~EoIkd8|$l#Yu9Ay9YNM_y_Q9L4FzWc-%te>i}wn@Hx(~l+G z+;zHX!A(=e6SwZb{--qwmn3A_FqS_)(_pf1(rFi@25Gomnjr@cx0;D6v3{H56hZG% zO`RiF;8?H}{+x!_2On=RRyDZLaY)C#0oU-brqv#LqQOKF)XAv-&;vyyFVkyR=yR0} zPm>4!aN($D_q7etW0DHwi_sZ2`F3rKF+7~hk+GA$qfwZ2;#LLOt-BOxgE3`FZB}zj z*OibO)6Gj27?r&tyRTFx1zY5te0qUXKLdDc>XO^F;oX-Apty+ACS0Wj=M9pqLD}9@ zVcB!KMedrGB|9}8G_S+h0+71XGpm~0rQ;~^Q2xO- zU_!{bd3#aEAuF$m3o8I8rq9lu?vs6*M!V&@3=>5BS;27jG_O5o+^96G*T8-_&it7^ zt5=bR>m0etXsE|>Yq-b9xtgv?*Uz`5=awk! zB%gh!Nq)V)K_1`Us5OF!{O5f|ea3D${udrSV`-&nL!8|m6KX589<)Ihu4NN5r9Wft z2%r4<6GP;q51p2f-mLVR0}Lbc(oOL4ZU*nkX&T5i^|pA7UnVPP=V$c2vW_|oBN`;` ziczhbt}#Q>W!m86Q)fv>o6{mPXSh#R9S8~TKjVv%WNxvD4Rvg*ES0pY?@dZTk>PX9 zR^K_%yVN)L?(C5{CKJc3m5nRcH0nM)@v4-e3?wj-I%Qtf*y0Smmebms_c6QOeY`>T zooqC-+n(0YaswPM*CgSJA?=K048HgtXLf+0D^xG1XOahI%XFm;l)I1?H=I9+B=_UZzy1zSyTQQJW! z=ZX}9x^N>OH&6<Ls!Y*Sos8vC_XID2_>g>3( z9BM|4i65gip@O_LV>YDPU@XYNN!4`@%$KP*q22?~s5b#5G`dqSBQ?oq_JP~7WZl-F zffF;Sh7V0MlUQ)#^x3EhKL95l&+DphYBl!92cDx0@Yuuzy=n3FWAkRAfmF)dghKFeqe$0=j`$rc%t?~w;L)%O`dvD5sb?$m#>rdHOK25nJp zY-zIw$HCeC&t7=`afMz}jj@|###EJF3v-nv=K9|qYlvett-7FSow7i$XT3hjwr@Tb zGWPoU#eJ`=+k7mn%q3>RCA^}CWT(n^Z!b*fOw!kJ?br-?^-xew)JH9~H$_1)FVKtk zy-m;m=yr)V)=1j*ACnYs&+CValx5JUn@m$Jv$5un0SGcJrDwfMdSmY{a~5ryYX>Tk zhcp~BS_BUT@j-{qXppEJJ{7cHDw~wsL$>4&P8_cw$KXV_|EY!EtW(a6DoklRAJ4pO$IIxc!{p%ha(QQS zX_v>l`D4yVHYU(^c5Ub`kc*?J%ofCg!0;g$-~@i8t!bQihhP3)_nd+OAUsV8P%->TB$# zQk~7JH4kIAw0mExEV;_BOsv& zHOVkdDGtvanAGM8O`|sJ{d`;*vx$(Rv38e&-bCA(GKswSGx6N0b*ZeLrA1*;NWZt0 zHFWz}W-iUNaTx)dxx{^d>J8@zQf5uzf$3dB891uIZ}Xpq5At`ChR19yJRrhw!seEq ztsjUTMi&HRk^Bici{P0T;Tly|~krBXIng(3{q4~~)+&7c6 z2!TB`>q5>=mlgN0BW?Ho+cM?ZSDK8)!~xqbSb&1X+y$p`%C6{ZBKrd9jMDnegfSi& zUEYi-jM-aR*G zno|X1E%5$h;2|vS`bB=LWBu)ioav^>-cckX;6S1dTjHECgFRaAxTWK^j;#|T>+7^0 z#lL_g;*RZm!UotGftcg2aVl!>j~m>xnCy}k?T(%Ux+8}rPLrezpVVWa1b%m-Lc z8mcAo(l5kw^Zm}?#2&<4O^e|Ik!V5Z-gEn*N(!9%3u(NQwISK1z(k+WK&0_F55{Z2 zl*VaVGAll-ihiXk&2}BG4BBhxX>XQUzvVdnPaH4P*C91OQy(_h4M4Xi$FskD>VY@q zji+{)+@<=F?AII9hyxblIrvsV81>=LZWc=`Gy5gPKKT z^adj^c*F3o>m2TMT3859;HdwYEQ^g0%%)CL1At_4fnz#LOc?Eva4S;wGR|S?kmuK4RFH`12 z3K0b#O2C`04aoD#paywT44~+@;_qFi*&N?jxS)&JqOQ?tTBKJCMn|~ga>k7Cm>Q8+ z0K39$_F^Ws$4_;AL8ayokr-pTquuvfu{bUrr@N}+blI=FcR-4{OcRRw7C6|2jvC~V zwMRqxoKah#t{QpiDMW6xR}M5A>-)&u99#6e3QR9Y4|3k{lDv0kLa!U>j!@9Oav*5w zRjvz+auKIo3cKh@40P|;@Z5Cy_HBjs{rDoU6lV5OjV;t5kyXExw3|LBso4eHJ{%Us zxDDz?orA%J^T*_x)emb34DWbV$c78zn!G>U~l%3^xjdG?TxoN@eXo4whZ{nqgHps-eBPF0!;C-8qNo{5K zbT(1IuI~Q)QUjOgUhUod5d;y8+kla~YR`_zr;O-k&wqYsZJ} z{CQ=ArQrzbVl>(2=cd^>492n_Q1%6=mg;jYQ}*=u3r+fAx7i#h0L)EU;`0~n#Eh-S zCso>ihJRmx*Cmd+5oUK(Ul%}0?F(kc>&0n((=Mkjcrim;>QF4siE0Qb{w$kpD$RA$ zlb|;9zgHBPvp|3K1#yEc8S9tBRjqc;C+k`@?RV)Wp&YA5YdHV5s@7D3WI=A3oZ0V- z{G|r($D&aId1Zf4?wpn>FYIl$8qK@O>INeE44m8uHc0f9|B{sDpY0KonxP9esXDh7 zMY?yz%pwDA`k`>2*m$JYL;?LB)Pd+P!i*M|2Y2IuI046X=2X#4+f%VaAbvaq9i8V> z@mg`OfC-k@gnBiBn7HICbI*pO^7q&OP??lZ8ftn!*lP6Dp)z*bFq36Rd+|9rVuLhO z?5(&iLr$KK%Fg{AW{8&7OLNkGTQ%*4aA1VijTqbqz~Hz5s{tSp5lo+yZhc0um)md5 zFaV-oYQ|)*Ia5$C!a@o5wOJSUDm@NBLthp4LY<}YJU3QJye>cyyCNJaQ1~GkrzS)S z5n%->InrpMtHw!dT9giQP5yC=2 ztF@Fg6I>8KT2pK3u?f0M=j(C~77oA^_VnhFpv}LUIwW1*H}ldBQ~&Bhuk*<34~plO z&vz@FFn>I)>9AN6xLx4%08?Sqdw-9&AY;MgV@6qwF3NDyyV#-W)7EN<2S@XFDjItX zN^D|bTysa~SPIXR>P!h{{luO1%E(M&38{Rk97WI{@dnd~z zt##}KjjPR8bLkwcoh-hHAchpC$(-q4WdbR3xU|Kw9|Tt!8_!g8Wol;GbUAY>Pj@fD|032U2Turg__qY7uWNyC$Huux0~E zSQfr|8#I-P>jQFj#>fxWlp)NEbQ@;0gS4>EIl19Z{yjh3lpVf&FdW{;iCRCyY?k4T zJRcwk1LD1CU|7obcgIM8s*m%>t8m5>bIz`lIUBHNZR!u z?{>`mU#YBO=VczImnWgN@ zm)@}kVEBsP-)2o?w)8RBc6()}=?lB@zPVB|afsHc)@UlQcPYG!MSgL%0YVi34ZF^b_XqGPU$Bo+SXV&T23c^@E@tT>HHKrupMs)zd%*;A=qE+7Ba$!3FU(=gW$pSD3X6L0t#1N>97I(|ZIdzB{I8$6<1H{eOi1hzK;J3<;hOH*z+S_ksPGX}65M#66^tCO=$ z5&Q3+1ZxE5Zd}aBMrLivg zAzT-WC3nq~^ng!OXFW>~T`Zd70Ee@J%cQ6Y0WQeSaVp<;sKr2J))cP+7LP?lfqf9F zJQQ)%Wf*ONBLxfuWgmTB$gE))fCr)oSPQ8yH?_t_1^+w7e!#q}_R|xa z5vxm~w1ZK>Ztxnctq&XU(Gx{#k?|Nj7hr{OBTG|rp;XQ9CTJt$LP9dnYt7So)}DhQ zbF#?OnwR6n7qk8pxh0A-XS>e7Vhc0yW-9|5 zr~y$1lHyxD+9&HuHC?R#jhy_w5TsV~0?zLD<8g)EmAJHMJFr1wgU3kfh$&q@1_pz9 z>bgUHKbi&z8d>0|0hs~ii%+8^?RG-zKikXd&2}l6L_Zc_G)Gf-qXzjU!`C4OtJF1W zhaT^kNyGbJV%RM};R4}CW==qI3p4u^pwe{G7YylF)(cxkmC7C|1tQFUZ|Oqee(E=P4WR{6Zr2PE^9GC1y=)JeGQEc zXaHJnijM%;P|NXrcmm=;zE5jZj;lk|z=?1-9IzVFj4&X2l}IsS_)0piw8D9iTVSkj zYPU~(E(W8}8I>qqL1EpE~C!+GN) zcV%0O6&H%G)O@^#t|BF;dsWkWJxF2D@L3bYks>Tv`uTowNv;*X`#QEA56Rb`sgi%V zHc!SDrpwg9-pgKy@mCqKs6;nDBPj(VBqfmD<-_Q4>PvvaB4}nwj+7`kxzcbzsahG$ zZmlUXUnv>JhU*6)IziKsgEGDClXt0=?XGCBSyDC4t-TgJBoo+DO&*%nJwR<RZ?9+1E{!A)^ZA_fPgs>X3yV)d4{fa0Y$nhmH(PqCPz)I+L` zV??!rLb3i1Clf%-9G4%iw_~l{9J0C)-g@*f(XWIc0^s3qQTW*)#DY`<8dw?vilui3 ztmgI1swM@FR0E`gM>{0gup@*SIA0)`z}S|t?Znm1)ZhYUS$+lI5Y<>~PKc?5{cUD!)Cl+K&mcHj>3NAmU zwq1dgOLO)xU%$FU)HFx?#geJJICQ4Pw~)g< z7ls+q+)Q5>fY~iTz3{vBhN3t{y#DyMK2Pt_m`nYJR90^TAaR>vNs*yai|Eaas*f5D zbCDSTe(eIkHPF(mI&!G~P8kcJK}rrr0T`j41K6mA!M;$mk+y?X5CDP`&Ibk~L5_}u zn;H_SL|7E|NpEfn*)D|Vc7s|I>BPoP>BnoY3RoJhbA-Bcnu;S7btzsy=TLDvYOE0T z%;LFzQvu@DM;*=UO)-FFbjY4VA#O=i6d*@xs&-BRHq6{0hh#@Y~W^=6~ z-2+r>OGKXi)mrIIc=U~3@$p46ebE@%w&tL`{D%$au!2#Ohscx#V`SCZ&?V7E7J1yd zIRxNBy@&t4YNpQ?TqNA2xb_`sH5D3BS`pQYC~7Ibt$SLm`LcBUK#YDS>O0hKm;;4$8}%Mjd0l%Yj>X@Qg2T8LAOQ%mDxxMfv?x_h zo{1?qILg5z#}eTLipbtYy%(L4;R1C(GuFeMn>!J{owRNyhzNQw>?^wGPs z#B*=lo){s`N~tO_K-pZVzi@yWi1@~`eA%bW>~*apX5i5n zm$VOi7ah>gkMf#U`R?j!xo3Ko>^t3RZsmX6+90*TsQmceB3;P)=3I~0wwfHC2IFdF zP}?h7WX|vg+iibxLI1g;?>*HbUw^hrzPvO~Uf9=cUV=YeQ!CASfBozO#fe=h^yY|d ze%7f)`4UUdX=LpQKyiE+k~_ZL@9mgITh-8FZVaT|f=SeYNSjfkq6Z4LgpVgcfZ;2R zxjW12)@y8I)6THc7r1ZH7TBV&w&;L zBiL2ppoq`)AL96f8SV7gIP~(urT;7t%=x9m=Pm=EoNlM;J06{mRl!h zXj(O5sVjQ8aKGhGwk;!IHL?GL1I5^^!iUNtzOzJ38B(EeO^aW;W6P zgkwZx04$YIx+1mat|uET!hpjfO=nS8LS#^_X)G4s*VZ-5Lr*o>!p_1CgQ8Itfdnc&zzMcQ zy$Y3{3kb-r&8{dK7cZnZ!wJhzIN*kx1lJwH3P2D8RX}k544=Hb$zg)jl>iZB<}eyk zY?HM1HB685wAQ3j*olbNsM1Y@!Ki8S*PP$U(~iSAX-eKlY?gTX&c?c( z!2l44d~6WiN=_rb3$lgu2yYQP}+gn0*tj_07ZH*Krib0qVJxj1H z&AiI$war%FA~gvBnWSAA)7%+eS-T}@H#Bpo82|C`vklhk^vo-bmWsUZj%)?6MiYG? z^eAXcF_s7GYio-d>zk@9Y2~X;2JD@q;bI#KU*FpnF;~cTlKOhQ<{|f&uVnk~?FDlG z)j2XG+av$-;#v8`RXOjP3wl@Ki~ISF)^snUI}R$_89S(NfrEwij;Wbe11ipBK8@o> zpBL!=_o7l66B~uW*|ZfzWpc4cN|ZTfdb@w_=%$sDa?@unU{QRA$idGCC`17+IMoMR zWy7I5*>@^=K^k=~7|OiSIp;Lf);4L`VSlX+I2?$eb~k%ew%I)SJDmq0dAPFKM$fV%3YDe{#ceb7d^-};F~^0gH|k*X6NfOBMbg?#OnpUCiW#d2)_sdm3V#(9wb zJEJt+9mW)8Q!0x*qc7-Nf_=bn_G`_B z`+m+;uWWm##hP7DS20TCLh1lhVQ3$K0rR8zl?LCvhg$55ph(xg&r> zfcV3c4GDK%G~mKsg7GHY@cHGN_{?fEd{wry`(RklGwd|-YRZo3zSk`b7#JdWxbr5j zStb4Z?`mY~c(3ikA6e-zNz!+uA90viqaY11W8K6^62u?NmjslNwd!Lc=GHz_uPd6B zQS)_H5CXnkMt0vy&G9E&@xTe&oqu3frtCi1A`gCaNWZyn6E;Tsbc-#z(}#NPbL-FN zOB5;bc~Zm=?k)A%(OsTZhRwiUo4x>4DBZ?>iKfIczh%|;HJ+>Wkqc|sB z7LRw>k~`%V16tfGurg|DiT1lZ+^1{Jv=LeQmF)~!Op*4DB}%|eN9xQhHW@|WB>~j< znZpg72xdynSUg@{du+=&kEuLfYhRt?wofh66kmp{S>2Sh@18#{V*1=ia!oeAV{h0B z`ix$Og#h!%q7UbY$6si)#hv<(+tkZsT_)}>n(MQA6*Zaj1K`50 zh`)JQfvHK^#_Xv+$Dgi~h=Lxew>O6@t@g*K8^z~y)PafI*{Ne;9=rR1gGxxfQ47M9 zNJCOL1AqaUCa=~YX8Fv$0x;s|%dbhd1p;OStHbye@MPfP)w2V3{70W}wAoVB>4@BH zF;ye!&1>fS?V>%Rf5&_9(wd-+U_e{}lN(axv3eGc7c>t8=7>6AgHh}MN?;n>N6oq$ zb@BVvx;n|#G-?wIlYS(B+UC@@XgKtG`d4m@k?I5M>g6AnxFT@pYY*?qFz-8!P%&3#)+yZsvg?e6=R+QNupEScbQ z&efD0CacF!wwf)EFWp(hk#!%di0bj38W0QeT1}Z$B17iTC) zIZetoOtHDm)PS&2gdP`sM!Ch(7coPb%N^4)O`y(``IEENO-^6-H(FJdWfY^&9mZ zMz5c3Y)zVhB@@)k5IKx1(hOFvw>^aiIKq&a{CiBnwyqb`e*q;1CNkh~C~QzJAvUgh zM}GQ`kI01CC9;2WnVdY@y#XT56j^!Bmbb8#JG;M z)R-|PK#;~=>QbG-31Fhe#TRcp{ZNyYoxp&eTitBulc7Lx$Bh}*XiQxRu?5OJWbDsr zJ&56m2s1YC3R&6>#)ZhktzFeC$>3ZYo1Al@P6Z<)^;n`n%$Rtec?A09k>?sMwV12# z>7M;9c3i-X_mNpw%$h)SMhPqcNV? z*(As7T4g??;PvUga&4Z~p!y?SK~Wq=@V!@S;;K-s6^3aOh}nM+L;MjTprxD3M(VmH6oeO z^2r7%yRpRq>sMm9p}Ro<2pQ9kdpX{GHBGHagA%L@$@%!fPM;UA)s0I6s5U*j^)KwP zubza*nf8|qrT2eEk165zu4dRP>eO)$G7$6BmT$M8hN5sZ%Cp`Z)P zdShcySyZaMzpy-1k{rt&Pcmn^&*bh2!<(TmGEb|rm#*Xkq<;OOViSA#24Kfb?w-cm z2RAp^DD+8M6yL9#AyO%`hFv}q?@Nh;XIkX{Dgb|SL5{go&m8Kr9r2aupNJjaCaEa; z($BqqhUYuAqR2(44rxs$)8eea;_ZqakemZ<$ivSxTw04xSHYTv>je{kY3MaJ6PJY} zQOA=HP^2FVv)E)KU0)nb5c?-U4@o@%3q#$< zlx?;=o!u3Z3D^r@z!xLgNmC)8W)Vk_0Ar!P0*l~HrY6-{c;JEt$BF3QFfL=sRetLM zIv<<}QfDaI>Xhxgtf@jkg63Z8LZLH`f(~$j+0h@wZXhGa5iqcoV5dW^2Vnsq2ms(3 zF;$rp^*6@2JH#9H7ipKz7E5I6z36(ni>e1LE{3 zao&3lI=+LvRvL$APxD$TkN4zN1!WX`HUdQdcIK3r6e?@N{TvB9uZ7g(SUq0@r=jU~ zjy$LJg>`jJ>Vr}S4c7wkY3Yj~73xcMjh*^GShR1Nm?1k)w3t$o|6VdiZ_>i_0Xv8O z2-4PM0J8O3*-#cTsrH>yGfZ^yxvQ_3#`aq@*GgMusiX{_bk2`qAbw1T6G*+e-0{Pk zGcs2Sv(ww%!_U;WSPF0NiKcVvSA7*cFH>=0Gf2Ww6}o-KXyC?mqSN8)GnyeDE5yZ<*`K#RoYlhogJskJ>rkH5Tb>t6VeTIu^PfD zqSU7Grr3O^L&sXpcklF>m>Jam_OW_f_|L{29SG8C6Eu~`L|xQ?jH#zjiPwVBD}&@m z3{JC@AkT}K0@jG2gPK?qqvZ9mNZ08pduwyBJ)H>S;d@kz)U0;y4O>c)=09plBa{Kg zqRto%da;=1i!yPcg4FL}ZDlEzszhi)%8>5?MbwbP1}C=pNhumFu_IgMy&9idkgc@` zpE4+~)*f1IRQr29yZ56t)$-E5pw;lA`q_syeZ1jV$m(udO_VFqe-SO;D=EV!Uhwll z%1|0Z7Yee5DlptM%~3;QXT-w2{&1a~u1~HPswV*eVKh6sFhiz~$dtTJqu-;tXx8cV zakQ#gc9l08vq?5!iGbcjT`Q(&TGLJ6Ij#{A1KnNm6y=2@JKE}iu)X?qwfm#L`TEV~ zT23s!eTF>wvo&(E^wNiGVQVyI+AtGUtbVI^!wp+Hfi~=e8WW&^AmW6k)@DxiSAL9B#WYAS+h~tqB*<;6pAAi{&QQU=G-?HWU`nX|sDt5u=kJt0=bmrW=SS#3 zZ42>5vf+T9#|9;uO;ab&M6+sYY!QYV^4c#tN2;xDuSc)c@9VcuwjZDqbz}jGbt4BM z?K6CAkp!Ey$bPb}%g21^tIO?s7Io@Gml~v*s^Ya5YAheUH%AxjMpMI~Tx-(e{=w3S zroY5`k~oL;TSHP%>bNctk3DzsMmQIo+@Q9@sB}PKnAUU{*Z%kmO}1cv^1d8dr71uc z#Hj1Qt^h<*dzjRoAMQJgbQ?wEoM{-mrdi(-EXkARG~dF2w!afHV0z@a23dAZhO*GG zrQrzbNkmb8nq>N!N0lxm!_rM4(OD7b1^{jKsk5zeQURWGgH<7l$W~HRUyrG5)Mj9n zooF>+Z;Ut9RT-lUn|P!vfHGI}!DFSZ;(%O<%OmIr_`7Rz<;^1@b46#(qql5ciLdL= z@k;bbv^CU7too#+6bwJ-=c5b#vhHBp1&X@{1*hM=SuTAY`0rtNG(10Wj^R3=Kgz#N zM{A{2Yg@e?)s9>Hg0Z=#@bh%Cf{MjpftndQj3Y+RrSy7Q-}gLn;NPCQZ~Ql}PnERK zik3+J>t9#q{EuIMQnK?iW!0ZH%IUJM*;9&c#lHEgPssFzWAsHu<DYGwsGDnV-x5_X6Sa%MfA-yjtNwpdiDZWss6YzKX zf38j}>~`)A$*z4NtEr6`mMS5fDfEBCho;FcP0OLQ1Edzr^2w`jH|p;%Jjc*&9-bl@pD*&Ug`y7mGh69FAUe zVM`e^SE5${>avRZF#SX^3245$qCO(US!uFtVn7DKhV8FDxEIm}4Lj#&%n)NCC*9f~ zLGR+!;q)kFnFt|0-oVS+Lp`!W8O-+b2B&$pwJqs1HisIL>ow3aN@9==9|$okJ=Noo7_Ki)QB&Ho4NjWlONe|jwd0000 { - return html`${Link({ url: "#", text: "Select a file" })} from your computer.`; - }, - ], - label: "Drop file to replace", - customStyles: { - width: "300px", - }, +Default.args = {}; + +export const Dragged = Template.bind({}); +Dragged.args = { + isDragged: true, +}; +Dragged.tags = ["!dev"]; +Dragged.parameters = { + chromatic: { disableSnapshot: true }, +}; + +/** + * The filled state of a drop zone is used to indicate that a file has been dropped into the drop zone. Since the type size doesn't change in this state, the dropzone size would be identical in all size variants. +*/ +export const Filled = Template.bind({}); +Filled.args = { + isDragged: true, + isFilled: true, +}; +Filled.tags = ["!dev"]; +Filled.parameters = { + chromatic: { disableSnapshot: true }, }; // ********* VRT ONLY ********* // @@ -71,3 +84,15 @@ WithForcedColors.parameters = { modes: disableDefaultModes }, }; + +export const Sizing = (args, context) => Sizes({ + Template, + withBorder: false, + withHeader: false, + ...args +}, context); +Sizing.args = {}; +Sizing.tags = ["!dev"]; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; diff --git a/components/dropzone/stories/dropzone.test.js b/components/dropzone/stories/dropzone.test.js index 52303b56d69..258da1cd653 100644 --- a/components/dropzone/stories/dropzone.test.js +++ b/components/dropzone/stories/dropzone.test.js @@ -1,22 +1,10 @@ -import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { Variants } from "@spectrum-css/preview/decorators"; -import { html } from "lit"; import { Template } from "./template.js"; export const DropzoneGroup = Variants({ Template, testData: [ {}, - { - testHeading: "Verbose example", - heading: "Drag and drop your file to upload", - description: [ - () => { - return html`You can also ${Link({ url: "#", text: "select a file" })} from your computer.`; - }, - ], - label: "Drag and drop to replace file upload", - }, ], stateData: [ { @@ -29,5 +17,4 @@ export const DropzoneGroup = Variants({ isDragged: true, }, ], - withSizes: false, }); diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index b9d6013a0b0..77e260501c2 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -1,4 +1,4 @@ -import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; +import { Template as Button } from "@spectrum-css/button/stories/template.js"; import { Template as IllustratedMessage } from "@spectrum-css/illustratedmessage/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; @@ -18,31 +18,66 @@ export const Template = ({ description, label, id = getRandomId("dropzone"), + size = "m", + image = "dropzone-illustration.png", } = {}, context = {}) => { return html` -
({ ...a, [c]: true }), {}), - })} - id=${ifDefined(id)} - role="region" - tabindex="0" - style=${styleMap(customStyles)} - > - ${IllustratedMessage({ title, description }, context)} - -
- ${ActionButton( - { - label, - customClasses: [`${rootClass}-button`], - }, - context - )} + })} + id=${ifDefined(id)} + role="region" + tabindex="0" + style=${styleMap(customStyles), [isDragged && isFilled ? `background-image:url(${image});` : null].filter(Boolean).join(" ")} + > + + + +
+ ${IllustratedMessage({ + title: title, + description: description, + customIllustration: customSvg, + size: size + }, context )} +
+ ${isDragged && isFilled + ? Button({ + label: label, + customClasses: [`${rootClass}-button`], + variant: "accent", + }) + : Button({ + label: label, + size: size + })}
- `; +
`; }; + +const customSvg = () => html` + + + +`; From ba1d868bfd86e486e024c43d92e8c40b97827505 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 7 Mar 2025 13:43:21 +0000 Subject: [PATCH 092/103] chore: release (next) (#3605) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 1 + components/dropzone/CHANGELOG.md | 40 ++++++++++++++++++++++++++++++++ components/dropzone/package.json | 2 +- tools/bundle/package.json | 2 +- yarn.lock | 4 ++-- 5 files changed, 45 insertions(+), 4 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 6373c998e4b..f1f664f72e8 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -100,6 +100,7 @@ }, "changesets": [ "beige-dragons-tickle", + "big-beds-care", "chilly-peaches-sniff", "clean-oranges-smell", "few-doors-smile", diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md index 9a10b1c86dc..cfe209eedb2 100644 --- a/components/dropzone/CHANGELOG.md +++ b/components/dropzone/CHANGELOG.md @@ -1,5 +1,45 @@ # Change log +## 9.0.0-next.1 + +### Major Changes + +- [#3429](https://github.com/adobe/spectrum-css/pull/3429) [`924fc7f`](https://github.com/adobe/spectrum-css/commit/924fc7f040b84731c06fd3c59dbb1aca9001b642) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - ## Dropzone S2 Migration + + Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed. + + The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap. + + ### SVG Border + + To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property. + + ### New mods + + `--mod-drop-zone-content-height` + `--mod-drop-zone-edge-to-text` + `--mod-drop-zone-title-line-height` + `--mod-drop-zone-border-dash-length` + `--mod-drop-zone-border-dash-gap` + + ### Removed mods + + `--mod-drop-zone-body-color` + `--mod-drop-zone-body-font-family` + `--mod-drop-zone-body-font-style` + `--mod-drop-zone-body-font-weight` + `--mod-drop-zone-body-line-height` + `--mod-drop-zone-content-color` + `--mod-drop-zone-content-edge-to-text` + `--mod-drop-zone-content-font-size` + `--mod-drop-zone-heading-color` + `--mod-drop-zone-heading-font-family` + `--mod-drop-zone-heading-font-size` + `--mod-drop-zone-heading-font-style` + `--mod-drop-zone-heading-font-weight` + `--mod-drop-zone-heading-line-height` + `--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title` + 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/dropzone/package.json b/components/dropzone/package.json index 1a610b1e3c9..769560cf59b 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropzone", - "version": "9.0.0-next.0", + "version": "9.0.0-next.1", "description": "The Spectrum CSS dropzone component", "license": "Apache-2.0", "author": "Adobe", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index c96017cc095..11f92714805 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -65,7 +65,7 @@ "@spectrum-css/dialog": "13.0.0-next.1", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/dropindicator": "8.0.0-next.0", - "@spectrum-css/dropzone": "9.0.0-next.0", + "@spectrum-css/dropzone": "9.0.0-next.1", "@spectrum-css/fieldgroup": "8.0.0-next.0", "@spectrum-css/fieldlabel": "11.0.0-next.0", "@spectrum-css/floatingactionbutton": "4.1.0", diff --git a/yarn.lock b/yarn.lock index 5975bf19c0f..2cda5c97239 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4071,7 +4071,7 @@ __metadata: "@spectrum-css/dialog": "npm:13.0.0-next.1" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/dropindicator": "npm:8.0.0-next.0" - "@spectrum-css/dropzone": "npm:9.0.0-next.0" + "@spectrum-css/dropzone": "npm:9.0.0-next.1" "@spectrum-css/fieldgroup": "npm:8.0.0-next.0" "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" "@spectrum-css/floatingactionbutton": "npm:4.1.0" @@ -4596,7 +4596,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropzone@npm:9.0.0-next.0, @spectrum-css/dropzone@workspace:components/dropzone": +"@spectrum-css/dropzone@npm:9.0.0-next.1, @spectrum-css/dropzone@workspace:components/dropzone": version: 0.0.0-use.local resolution: "@spectrum-css/dropzone@workspace:components/dropzone" dependencies: From 0d5bdfb86c98548d214a10ab7ddbeedbe6cf35c8 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 11 Mar 2025 13:51:28 +0000 Subject: [PATCH 093/103] chore(deps): bump axios from 1.7.4 to 1.8.2 in the npm_and_yarn group (#3610) Bumps the npm_and_yarn group with 1 update: [axios](https://github.com/axios/axios). Updates `axios` from 1.7.4 to 1.8.2 - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.7.4...v1.8.2) --- updated-dependencies: - dependency-name: axios dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/development.yml | 2 +- yarn.lock | 19 ++++--------------- 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index b0784dedb69..fbdfbe2ca61 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -105,7 +105,7 @@ jobs: eslint: - components/*/stories/*.js mdlint: - - *.md + - '*.md' - .storybook/*.md - .storybook/*/*.md - .storybook/*/*.mdx diff --git a/yarn.lock b/yarn.lock index ce8ebb79ee0..d77444424e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7462,25 +7462,14 @@ __metadata: languageName: node linkType: hard -"axios@npm:^1.6.1": - version: 1.7.9 - resolution: "axios@npm:1.7.9" - dependencies: - follow-redirects: "npm:^1.15.6" - form-data: "npm:^4.0.0" - proxy-from-env: "npm:^1.1.0" - checksum: 10c0/b7a41e24b59fee5f0f26c1fc844b45b17442832eb3a0fb42dd4f1430eb4abc571fe168e67913e8a1d91c993232bd1d1ab03e20e4d1fee8c6147649b576fc1b0b - languageName: node - linkType: hard - -"axios@npm:^1.7.4": - version: 1.7.4 - resolution: "axios@npm:1.7.4" +"axios@npm:^1.6.1, axios@npm:^1.7.4": + version: 1.8.2 + resolution: "axios@npm:1.8.2" dependencies: follow-redirects: "npm:^1.15.6" form-data: "npm:^4.0.0" proxy-from-env: "npm:^1.1.0" - checksum: 10c0/5ea1a93140ca1d49db25ef8e1bd8cfc59da6f9220159a944168860ad15a2743ea21c5df2967795acb15cbe81362f5b157fdebbea39d53117ca27658bab9f7f17 + checksum: 10c0/d8c2969e4642dc6d39555ac58effe06c051ba7aac2bd40cad7a9011c019fb2f16ee011c5a6906cb25b8a4f87258c359314eb981f852e60ad445ecaeb793c7aa2 languageName: node linkType: hard From cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf Mon Sep 17 00:00:00 2001 From: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Date: Tue, 11 Mar 2025 12:13:31 -0400 Subject: [PATCH 094/103] fix(modal): change modal background color to transparent (#3604) * refactor(modal): update modal background color to transparent - adds documentation to modal docs page - updates metadata.json * docs(dialog): remove custom modal style - removes the customStyles object that was setting --mod-modal- background-color in the dialog template - removes the custom wrapper styles in the dialog tests that were intending to set the dialog apart from the modal - remove a duplicate isOpen control in dialog.stories.js * chore(modal): create changeset --- .changeset/polite-moments-stay.md | 5 +++++ components/dialog/stories/dialog.stories.js | 1 - components/dialog/stories/dialog.test.js | 8 -------- components/dialog/stories/template.js | 3 --- components/modal/dist/metadata.json | 1 - components/modal/index.css | 2 +- components/modal/stories/modal.stories.js | 3 +++ components/picker/dist/metadata.json | 2 ++ 8 files changed, 11 insertions(+), 14 deletions(-) create mode 100644 .changeset/polite-moments-stay.md diff --git a/.changeset/polite-moments-stay.md b/.changeset/polite-moments-stay.md new file mode 100644 index 00000000000..38fb80afbed --- /dev/null +++ b/.changeset/polite-moments-stay.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/modal": patch +--- + +In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers. diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 091098a0068..9e862c31749 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -90,7 +90,6 @@ export default { options: ["default", "fullscreen", "fullscreenTakeover"], control: "select", }, - isOpen, isDismissible: { name: "Dismissible", type: { name: "boolean" }, diff --git a/components/dialog/stories/dialog.test.js b/components/dialog/stories/dialog.test.js index a6b6b177114..d5a9a5f076d 100644 --- a/components/dialog/stories/dialog.test.js +++ b/components/dialog/stories/dialog.test.js @@ -16,10 +16,6 @@ export const DialogGroup = Variants({ // TODO: The dialog's heading arg is getting passed as the "Sizing" heading arg (instead of the // TODO: word "Sizing"). We should be able to remove this arg once that no longers happens. heading: showTestingGrid ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit" : args.heading, - customStyles: { - ...(args.customStyles ?? {}), - "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, - }, }, context); }, sizeDirection: "column", @@ -66,7 +62,6 @@ export const DialogFullscreen = Variants({ */ customStyles: { margin: showTestingGrid ? "16px" : undefined, - "background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined, }, }, context); }, @@ -85,9 +80,6 @@ export const DialogFullscreen = Variants({ export const DialogFullscreenTakeover = Variants({ Template, withSizes: false, - wrapperStyles: { - "background-color": "var(--spectrum-gray-50)" - }, testData: [ { showModal: false, diff --git a/components/dialog/stories/template.js b/components/dialog/stories/template.js index 1f20f54109c..b8c84b04a92 100644 --- a/components/dialog/stories/template.js +++ b/components/dialog/stories/template.js @@ -171,9 +171,6 @@ export const Template = ({ isOpen, content: Dialog, variant: layout, - customStyles: { - "--mod-modal-background-color": "transparent" - }, }, context); } else { diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 43de95295b1..c27c44872d7 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -45,7 +45,6 @@ "--spectrum-animation-ease-out", "--spectrum-corner-radius-extra-large-default", "--spectrum-dialog-confirm-entry-animation-distance", - "--spectrum-gray-75", "--spectrum-window-to-edge" ], "passthroughs": [], diff --git a/components/modal/index.css b/components/modal/index.css index 2829b930d18..4dad9fccf32 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -24,7 +24,7 @@ --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75)); + --spectrum-modal-background-color: var(--mod-modal-background-color, transparent); --spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default)); --spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100)); diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index a4ce483de5f..560f5663e43 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -57,6 +57,9 @@ export default { ], }; +/** + * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class. + */ export const Default = ModalGroup.bind({}); Default.args = { content: [ diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index cc449eab846..9a7aa93bbac 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -152,6 +152,7 @@ "--spectrum-picker-border-color-active", "--spectrum-picker-border-color-default", "--spectrum-picker-border-color-default-open", + "--spectrum-picker-border-color-disabled", "--spectrum-picker-border-color-error-active", "--spectrum-picker-border-color-error-default", "--spectrum-picker-border-color-error-default-open", @@ -277,6 +278,7 @@ "--spectrum-font-size-75", "--spectrum-gray-100", "--spectrum-gray-200", + "--spectrum-gray-300", "--spectrum-gray-500", "--spectrum-gray-600", "--spectrum-gray-700", From 89f987c410c50eb168d68f3f5350f174ead3d71b Mon Sep 17 00:00:00 2001 From: castastrophe Date: Wed, 12 Mar 2025 19:35:44 -0400 Subject: [PATCH 095/103] chore: merge rremote-tracking branch 'origin' into spectrum-two --- .github/workflows/release.yml | 6 +++--- components/actionbutton/CHANGELOG.md | 10 ++++++++++ components/button/CHANGELOG.md | 15 +++++++++++++++ components/search/CHANGELOG.md | 10 ++++++++++ components/search/dist/metadata.json | 1 - components/search/index.css | 4 +--- components/slider/stories/template.js | 4 ++-- lint-staged.config.js | 17 +++++++++-------- package.json | 2 +- yarn.lock | 6 +++--- 10 files changed, 54 insertions(+), 21 deletions(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 1fbf634b22b..44b8ff6a45e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -29,12 +29,12 @@ jobs: id: changesets uses: changesets/action@v1 with: - version: yarn version:packages - - # This expects you to have a script called release which does a build for your packages and calls changeset publish title: "chore: release" commit: "chore: release" + # This expects you to have a script called release / version:packages + # which does a build for your packages and calls changeset publish publish: yarn release + version: yarn version:packages env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md index 0b00d1e8857..f7b4081cf30 100644 --- a/components/actionbutton/CHANGELOG.md +++ b/components/actionbutton/CHANGELOG.md @@ -1,5 +1,15 @@ # Change log +## 7.1.2 + +### Patch Changes + +📝 [#3606](https://github.com/adobe/spectrum-css/pull/3606) [`3ec3b46`](https://github.com/adobe/spectrum-css/commit/3ec3b468313cbeb19298b35a2bd80860b83f4734) Thanks [@jawinn](https://github.com/jawinn)! + +This updates the colors used in action button for the spectrum two theme, so they are closer aligned with the spectrum 2 spec, per the request in SWC-597. This removes the border by making it transparent and updates the background color tokens that are used. + +This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors. + ## 8.0.0-next.0 ### Patch Changes diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md index c78654fddf3..5682265368f 100644 --- a/components/button/CHANGELOG.md +++ b/components/button/CHANGELOG.md @@ -1,5 +1,20 @@ # Change log +## 14.1.3 + +### Patch Changes + +📝 [`d2272ea`](https://github.com/adobe/spectrum-css/commit/d2272eaedcc3a2a957028fe3d1ed6a3ce96a49f6) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! + +Adjusts static color buttons to more closely resemble the S2 specifications. There are no expected changes to non-static button variants in S2, and no expected changes to other themes. + +This PR includes changes to: + +- Static white primary button (outline variant), static white secondary button (fill variant), static black primary button (outline variant), static black secondary button (fill variant) +- Static white secondary button (outline variant) and static black secondary button (outline variant) border and background colors +- Static color buttons' content color +- Static white primary button (fill variant) and static black primary button (fill variant) background colors + ## 14.1.2 ### Patch Changes diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md index d68f7e71a51..137cff9b91c 100644 --- a/components/search/CHANGELOG.md +++ b/components/search/CHANGELOG.md @@ -1,5 +1,15 @@ # Change log +## 8.1.1 + +### Patch Changes + +📝 [#3593](https://github.com/adobe/spectrum-css/pull/3593) [`d829abb`](https://github.com/adobe/spectrum-css/commit/d829abb44f1eaa1874090e52caee553d776684e7) Thanks [@TarunAdobe](https://github.com/TarunAdobe)! + +Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` and `--spectrum-search-border-color-disabled` to `--spectrum-gray-300` for the S2 foundations contexts. + +Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling. + ## 9.0.0-next.0 ### Patch Changes diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index 6222364ff13..6c410a0d293 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -117,7 +117,6 @@ "--spectrum-component-top-to-text-100", "--spectrum-corner-radius-100", "--spectrum-default-font-style", - "--spectrum-disabled-background-color", "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", "--spectrum-field-edge-to-visual-quiet", diff --git a/components/search/index.css b/components/search/index.css index 18a8de66124..0a7011d997a 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -11,7 +11,7 @@ * governing permissions and limitations under the License. */ - .spectrum-Search { +.spectrum-Search { --spectrum-search-border-color-default: var(--spectrum-gray-500); --spectrum-search-border-color-hover: var(--spectrum-gray-600); --spectrum-search-border-color-focus: var(--spectrum-gray-800); @@ -80,8 +80,6 @@ /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); /* @passthrough start -- settings for nested Textfield component */ --mod-textfield-font-family: var(--mod-search-font-family, var(--spectrum-search-font-family)); diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index bc625452855..905fe770b40 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -18,7 +18,7 @@ export const Template = ({ values = [], variant, labelPosition, - fillColor = "rgb(213, 213, 213)", + fillColor, showTicks = false, showTickLabels = false, isDisabled = false, @@ -124,8 +124,8 @@ export const Template = ({ })} id=${ifDefined(id)} style=${styleMap({ + "--spectrum-slider-track-color": fillColor ? fillColor : undefined, "inline-size": "240px", - ["--spectrum-slider-track-color"]: fillColor, ...customStyles, })} role=${ifDefined(values.length > 1 ? "group" : undefined)} diff --git a/lint-staged.config.js b/lint-staged.config.js index 6d5b3ac62c6..157ea03380d 100644 --- a/lint-staged.config.js +++ b/lint-staged.config.js @@ -6,10 +6,15 @@ module.exports = { "*.{js,json}": [ "eslint --fix --cache --no-error-on-unmatched-pattern --quiet" ], - "package.json": (files) => [ - "yarn constraints --fix", - `eslint --fix --cache --no-error-on-unmatched-pattern --quiet ${files.join(" ")}`, + "*.{md,mdx}": [ + "prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc", + "markdownlint --config .markdownlint.json --fix" ], + "package.json": () => ([ + "yarn constraints --fix", + "yarn install --refresh-lockfile", + "git add yarn.lock" + ]), "dist/*.css": [ "prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc" ], @@ -17,9 +22,5 @@ module.exports = { return [ ...(files.map(file => `pajv test --valid -s ./schemas/metadata.schema.json -d "${file}"`) ?? []), ]; - }, - "*.{md,mdx}": [ - "prettier --no-error-on-unmatched-pattern --ignore-unknown --log-level silent --write --config .prettierrc", - "markdownlint --config .markdownlint.json --fix" - ] + } }; diff --git a/package.json b/package.json index 4915a8a4b1e..1001f9fd409 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "tester": "cross-env NODE_ENV=development nx run storybook:test:scope", "validate": "yarn validator tag:component", "validator": "nx run-many --target validate --verbose --projects", - "version:packages": "changeset version && yarn constraints --fix && yarn install" + "version:packages": "yarn config set -H enableImmutableInstalls false && changeset version && git add . && yarn lint-staged" }, "workspaces": [ "components/*", diff --git a/yarn.lock b/yarn.lock index bd91c1a0600..e91ca53074f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -764,11 +764,11 @@ __metadata: linkType: hard "@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1": - version: 7.26.9 - resolution: "@babel/runtime@npm:7.26.9" + version: 7.26.10 + resolution: "@babel/runtime@npm:7.26.10" dependencies: regenerator-runtime: "npm:^0.14.0" - checksum: 10c0/e8517131110a6ec3a7360881438b85060e49824e007f4a64b5dfa9192cf2bb5c01e84bfc109f02d822c7edb0db926928dd6b991e3ee460b483fb0fac43152d9b + checksum: 10c0/6dc6d88c7908f505c4f7770fb4677dfa61f68f659b943c2be1f2a99cb6680343462867abf2d49822adc435932919b36c77ac60125793e719ea8745f2073d3745 languageName: node linkType: hard From 923bef2ea345f169da48428006e881ebef59a286 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 13 Mar 2025 10:54:39 -0400 Subject: [PATCH 096/103] chore: release (next) (#3620) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/pre.json | 1 + components/alertdialog/CHANGELOG.md | 7 ++++++ components/alertdialog/package.json | 6 ++--- components/dialog/CHANGELOG.md | 7 ++++++ components/dialog/package.json | 6 ++--- components/menu/package.json | 2 +- components/modal/CHANGELOG.md | 10 +++++++- components/modal/package.json | 2 +- components/popover/package.json | 4 ++-- components/tray/CHANGELOG.md | 7 ++++++ components/tray/package.json | 8 +++---- tools/bundle/package.json | 8 +++---- yarn.lock | 36 ++++++++++++++--------------- 13 files changed, 67 insertions(+), 37 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index f1f664f72e8..4cb2fc5295e 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -118,6 +118,7 @@ "modern-chairs-sit", "nine-kings-repair", "olive-tools-hang", + "polite-moments-stay", "proud-jokes-rule", "rotten-meals-share", "serious-clouds-jam", diff --git a/components/alertdialog/CHANGELOG.md b/components/alertdialog/CHANGELOG.md index e6f55082321..43d7dd9b8b6 100644 --- a/components/alertdialog/CHANGELOG.md +++ b/components/alertdialog/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 5.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]: + - @spectrum-css/modal@7.1.1-next.0 + ## 5.0.0-next.1 ### Patch Changes diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 91aea1a450f..3ed7f9765ca 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertdialog", - "version": "5.0.0-next.1", + "version": "5.0.0-next.2", "description": "The Spectrum CSS alertdialog component", "license": "Apache-2.0", "author": "Adobe", @@ -28,7 +28,7 @@ "@spectrum-css/buttongroup": ">=10.0.0-next.0", "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", + "@spectrum-css/modal": ">=7.1.1-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, @@ -56,7 +56,7 @@ "@spectrum-css/buttongroup": "10.0.0-next.0", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/modal": "7.1.0", + "@spectrum-css/modal": "7.1.1-next.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/underlay": "6.1.0" }, diff --git a/components/dialog/CHANGELOG.md b/components/dialog/CHANGELOG.md index 4e03f9f7aaa..d402c3ccdf4 100644 --- a/components/dialog/CHANGELOG.md +++ b/components/dialog/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 13.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]: + - @spectrum-css/modal@7.1.1-next.0 + ## 13.0.0-next.1 ### Patch Changes diff --git a/components/dialog/package.json b/components/dialog/package.json index ef70a6c4c59..bd22e48410e 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dialog", - "version": "13.0.0-next.1", + "version": "13.0.0-next.2", "description": "The Spectrum CSS dialog component", "license": "Apache-2.0", "author": "Adobe", @@ -29,7 +29,7 @@ "@spectrum-css/buttongroup": ">=10.0.0-next.0", "@spectrum-css/closebutton": ">=7.0.0-next.0", "@spectrum-css/divider": ">=6.0.0-next.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", + "@spectrum-css/modal": ">=7.1.1-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0", "@spectrum-css/underlay": ">=6.0.0 <7.0.0" }, @@ -61,7 +61,7 @@ "@spectrum-css/buttongroup": "10.0.0-next.0", "@spectrum-css/closebutton": "7.0.0-next.0", "@spectrum-css/divider": "6.0.0-next.0", - "@spectrum-css/modal": "7.1.0", + "@spectrum-css/modal": "7.1.1-next.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/typography": "8.1.0", "@spectrum-css/underlay": "6.1.0" diff --git a/components/menu/package.json b/components/menu/package.json index ee8739eb280..fd3dba7b72c 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -58,7 +58,7 @@ "@spectrum-css/icon": "10.0.0-next.0", "@spectrum-css/switch": "6.1.0", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tray": "6.0.0-next.1" + "@spectrum-css/tray": "6.0.0-next.2" }, "keywords": [ "design-system", diff --git a/components/modal/CHANGELOG.md b/components/modal/CHANGELOG.md index 4d31ed47ae8..fb3515d8050 100644 --- a/components/modal/CHANGELOG.md +++ b/components/modal/CHANGELOG.md @@ -1,12 +1,20 @@ # Change log +## 7.1.1-next.0 + +### Patch Changes + +📝 [#3604](https://github.com/adobe/spectrum-css/pull/3604) [`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! + +In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers. + ## 7.1.0 ### Minor Changes 📝 [`205182b`](https://github.com/adobe/spectrum-css/commit/205182bebcbe82813457aa098d8799b0a23423ee) Thanks [@castastrophe](https://github.com/castastrophe)! -## New feature +### New feature Minified and gzipped outputs available for all compiled CSS assets. diff --git a/components/modal/package.json b/components/modal/package.json index 3808a7b2625..86d4fabd856 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/modal", - "version": "7.1.0", + "version": "7.1.1-next.0", "description": "The Spectrum CSS modal component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/popover/package.json b/components/popover/package.json index 8cd15bc655f..b2d561502a4 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -49,9 +49,9 @@ } }, "devDependencies": { - "@spectrum-css/alertdialog": "5.0.0-next.1", + "@spectrum-css/alertdialog": "5.0.0-next.2", "@spectrum-css/commons": "11.0.0", - "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/dialog": "13.0.0-next.2", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/tokens": "16.0.1" diff --git a/components/tray/CHANGELOG.md b/components/tray/CHANGELOG.md index 3cb1c8b1894..c47c91ac961 100644 --- a/components/tray/CHANGELOG.md +++ b/components/tray/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 6.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`cb1b957`](https://github.com/adobe/spectrum-css/commit/cb1b957c05ecf02d3f473de09a8bfd5f2b5d42bf)]: + - @spectrum-css/modal@7.1.1-next.0 + ## 6.0.0-next.1 ### Patch Changes diff --git a/components/tray/package.json b/components/tray/package.json index fb27c90c695..7bc62cc5102 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tray", - "version": "6.0.0-next.1", + "version": "6.0.0-next.2", "description": "The Spectrum CSS tray component", "license": "Apache-2.0", "author": "Adobe", @@ -29,7 +29,7 @@ "@spectrum-css/dialog": ">=13.0.0-next.0", "@spectrum-css/divider": ">=6.0.0-next.0", "@spectrum-css/icon": ">=10.0.0-next.0", - "@spectrum-css/modal": ">=7.0.0 <8.0.0", + "@spectrum-css/modal": ">=7.1.1-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -54,10 +54,10 @@ }, "devDependencies": { "@spectrum-css/button": "15.0.0-next.0", - "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/dialog": "13.0.0-next.2", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/icon": "10.0.0-next.0", - "@spectrum-css/modal": "7.1.0", + "@spectrum-css/modal": "7.1.1-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 11f92714805..88c09f9d5ed 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -36,7 +36,7 @@ "@spectrum-css/actiongroup": "7.0.0-next.0", "@spectrum-css/actionmenu": "8.0.0-next.0", "@spectrum-css/alertbanner": "4.0.0-next.1", - "@spectrum-css/alertdialog": "5.0.0-next.1", + "@spectrum-css/alertdialog": "5.0.0-next.2", "@spectrum-css/asset": "7.1.0", "@spectrum-css/assetcard": "6.0.0-next.0", "@spectrum-css/assetlist": "9.0.0-next.0", @@ -62,7 +62,7 @@ "@spectrum-css/contextualhelp": "6.0.0-next.0", "@spectrum-css/datepicker": "5.0.0-next.0", "@spectrum-css/dial": "5.1.0", - "@spectrum-css/dialog": "13.0.0-next.1", + "@spectrum-css/dialog": "13.0.0-next.2", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/dropindicator": "8.0.0-next.0", "@spectrum-css/dropzone": "9.0.0-next.1", @@ -80,7 +80,7 @@ "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/meter": "2.0.0-next.0", "@spectrum-css/miller": "9.0.0-next.0", - "@spectrum-css/modal": "7.1.0", + "@spectrum-css/modal": "7.1.1-next.0", "@spectrum-css/opacitycheckerboard": "4.1.0", "@spectrum-css/page": "9.1.0", "@spectrum-css/pagination": "11.0.0-next.0", @@ -110,7 +110,7 @@ "@spectrum-css/toast": "12.0.0-next.0", "@spectrum-css/tokens": "16.0.1", "@spectrum-css/tooltip": "8.0.0-next.0", - "@spectrum-css/tray": "6.0.0-next.1", + "@spectrum-css/tray": "6.0.0-next.2", "@spectrum-css/treeview": "13.0.0-next.0", "@spectrum-css/typography": "8.1.0", "@spectrum-css/underlay": "6.1.0", diff --git a/yarn.lock b/yarn.lock index e91ca53074f..db4cd87357c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3900,21 +3900,21 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/alertdialog@npm:5.0.0-next.1, @spectrum-css/alertdialog@workspace:components/alertdialog": +"@spectrum-css/alertdialog@npm:5.0.0-next.2, @spectrum-css/alertdialog@workspace:components/alertdialog": version: 0.0.0-use.local resolution: "@spectrum-css/alertdialog@workspace:components/alertdialog" dependencies: "@spectrum-css/buttongroup": "npm:10.0.0-next.0" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/modal": "npm:7.1.0" + "@spectrum-css/modal": "npm:7.1.1-next.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/underlay": "npm:6.1.0" peerDependencies: "@spectrum-css/buttongroup": ">=10.0.0-next.0" "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" - "@spectrum-css/modal": ">=7.0.0 <8.0.0" + "@spectrum-css/modal": ">=7.1.1-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: @@ -4045,7 +4045,7 @@ __metadata: "@spectrum-css/actiongroup": "npm:7.0.0-next.0" "@spectrum-css/actionmenu": "npm:8.0.0-next.0" "@spectrum-css/alertbanner": "npm:4.0.0-next.1" - "@spectrum-css/alertdialog": "npm:5.0.0-next.1" + "@spectrum-css/alertdialog": "npm:5.0.0-next.2" "@spectrum-css/asset": "npm:7.1.0" "@spectrum-css/assetcard": "npm:6.0.0-next.0" "@spectrum-css/assetlist": "npm:9.0.0-next.0" @@ -4071,7 +4071,7 @@ __metadata: "@spectrum-css/contextualhelp": "npm:6.0.0-next.0" "@spectrum-css/datepicker": "npm:5.0.0-next.0" "@spectrum-css/dial": "npm:5.1.0" - "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/dialog": "npm:13.0.0-next.2" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/dropindicator": "npm:8.0.0-next.0" "@spectrum-css/dropzone": "npm:9.0.0-next.1" @@ -4089,7 +4089,7 @@ __metadata: "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/meter": "npm:2.0.0-next.0" "@spectrum-css/miller": "npm:9.0.0-next.0" - "@spectrum-css/modal": "npm:7.1.0" + "@spectrum-css/modal": "npm:7.1.1-next.0" "@spectrum-css/opacitycheckerboard": "npm:4.1.0" "@spectrum-css/page": "npm:9.1.0" "@spectrum-css/pagination": "npm:11.0.0-next.0" @@ -4119,7 +4119,7 @@ __metadata: "@spectrum-css/toast": "npm:12.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/tooltip": "npm:8.0.0-next.0" - "@spectrum-css/tray": "npm:6.0.0-next.1" + "@spectrum-css/tray": "npm:6.0.0-next.2" "@spectrum-css/treeview": "npm:13.0.0-next.0" "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" @@ -4531,7 +4531,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dialog@npm:13.0.0-next.1, @spectrum-css/dialog@workspace:components/dialog": +"@spectrum-css/dialog@npm:13.0.0-next.2, @spectrum-css/dialog@workspace:components/dialog": version: 0.0.0-use.local resolution: "@spectrum-css/dialog@workspace:components/dialog" dependencies: @@ -4539,7 +4539,7 @@ __metadata: "@spectrum-css/buttongroup": "npm:10.0.0-next.0" "@spectrum-css/closebutton": "npm:7.0.0-next.0" "@spectrum-css/divider": "npm:6.0.0-next.0" - "@spectrum-css/modal": "npm:7.1.0" + "@spectrum-css/modal": "npm:7.1.1-next.0" "@spectrum-css/tokens": "npm:16.0.1" "@spectrum-css/typography": "npm:8.1.0" "@spectrum-css/underlay": "npm:6.1.0" @@ -4548,7 +4548,7 @@ __metadata: "@spectrum-css/buttongroup": ">=10.0.0-next.0" "@spectrum-css/closebutton": ">=7.0.0-next.0" "@spectrum-css/divider": ">=6.0.0-next.0" - "@spectrum-css/modal": ">=7.0.0 <8.0.0" + "@spectrum-css/modal": ">=7.1.1-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" "@spectrum-css/underlay": ">=6.0.0 <7.0.0" peerDependenciesMeta: @@ -4837,7 +4837,7 @@ __metadata: "@spectrum-css/icon": "npm:10.0.0-next.0" "@spectrum-css/switch": "npm:6.1.0" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tray": "npm:6.0.0-next.1" + "@spectrum-css/tray": "npm:6.0.0-next.2" peerDependencies: "@spectrum-css/checkbox": ">=11.0.0-next.0" "@spectrum-css/divider": ">=6.0.0-next.0" @@ -4903,7 +4903,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/modal@npm:7.1.0, @spectrum-css/modal@workspace:components/modal": +"@spectrum-css/modal@npm:7.1.1-next.0, @spectrum-css/modal@workspace:components/modal": version: 0.0.0-use.local resolution: "@spectrum-css/modal@workspace:components/modal" dependencies: @@ -5034,9 +5034,9 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/popover@workspace:components/popover" dependencies: - "@spectrum-css/alertdialog": "npm:5.0.0-next.1" + "@spectrum-css/alertdialog": "npm:5.0.0-next.2" "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/dialog": "npm:13.0.0-next.2" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" @@ -5537,22 +5537,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tray@npm:6.0.0-next.1, @spectrum-css/tray@workspace:components/tray": +"@spectrum-css/tray@npm:6.0.0-next.2, @spectrum-css/tray@workspace:components/tray": version: 0.0.0-use.local resolution: "@spectrum-css/tray@workspace:components/tray" dependencies: "@spectrum-css/button": "npm:15.0.0-next.0" - "@spectrum-css/dialog": "npm:13.0.0-next.1" + "@spectrum-css/dialog": "npm:13.0.0-next.2" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/icon": "npm:10.0.0-next.0" - "@spectrum-css/modal": "npm:7.1.0" + "@spectrum-css/modal": "npm:7.1.1-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/button": ">=15.0.0-next.0" "@spectrum-css/dialog": ">=13.0.0-next.0" "@spectrum-css/divider": ">=6.0.0-next.0" "@spectrum-css/icon": ">=10.0.0-next.0" - "@spectrum-css/modal": ">=7.0.0 <8.0.0" + "@spectrum-css/modal": ">=7.1.1-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/button": From c88fcdcfa4866f4b3ff7a1027e4253b8f2114351 Mon Sep 17 00:00:00 2001 From: aramos-adobe Date: Thu, 13 Mar 2025 17:09:10 -0400 Subject: [PATCH 097/103] feat(link): new typography tokens, focus color and design, WHCM focus state (#3570) * chore(link): adding yarn file * feat(link): add new migration and changeset * chore(link): add changeset and revert template file * chore(link): updating lock file * chore(link): adding missing metadata files * feat(link): update inline story, template, inline style * feat(link): updating changeset, inline docs, stories * chore(link): update template layout and story * chore(link): adding search metadata * chore(link): adding reason for non quiet inline --- .changeset/tasty-eagles-draw.md | 31 +++++++ components/link/dist/metadata.json | 46 ++++++++-- components/link/index.css | 83 +++++++++++++------ components/link/stories/link.stories.js | 106 +++++++++++------------- components/link/stories/link.test.js | 11 ++- components/link/stories/template.js | 47 ++++++++++- 6 files changed, 231 insertions(+), 93 deletions(-) create mode 100644 .changeset/tasty-eagles-draw.md diff --git a/.changeset/tasty-eagles-draw.md b/.changeset/tasty-eagles-draw.md new file mode 100644 index 00000000000..95a768f410e --- /dev/null +++ b/.changeset/tasty-eagles-draw.md @@ -0,0 +1,31 @@ +--- +"@spectrum-css/link": major +--- + +### Link S2 migration + +The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant. + +#### Note + +- Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear +- `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply. + +## New tokens + +### Color + +`spectrum-link-focus-indicator-color` +`spectrum-link-focus-indicator-thickness` +`spectrum-link-focus-indicator-gap` +`spectrum-link-corner-radius` + +### Typography + +`spectrum-link-line-height` +`spectrum-link-line-height-cjk-100` +`spectrum-link-font-size` +`spectrum-link-font-style` +`spectrum-link-font-weight` +`spectrum-link-text-underline-thickness` +`spectrum-link-text-underline-gap` diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index ad90df33840..5bebb76f6d0 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -2,6 +2,7 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Link", + ".spectrum-Link--inline", ".spectrum-Link--quiet", ".spectrum-Link--quiet:hover", ".spectrum-Link--secondary", @@ -9,26 +10,41 @@ ".spectrum-Link--staticWhite", ".spectrum-Link:active", ".spectrum-Link:focus-visible", - ".spectrum-Link:hover" + ".spectrum-Link:hover", + ".spectrum-Link:lang(ja)", + ".spectrum-Link:lang(ko)", + ".spectrum-Link:lang(zh)" ], "modifiers": [ "--mod-link-animation-duration", + "--mod-link-inline-font-weight", + "--mod-link-line-height-cjk", "--mod-link-text-color", "--mod-link-text-color-active", "--mod-link-text-color-black", "--mod-link-text-color-focus", "--mod-link-text-color-hover", - "--mod-link-text-color-primary-active", - "--mod-link-text-color-primary-default", - "--mod-link-text-color-primary-focus", - "--mod-link-text-color-primary-hover", "--mod-link-text-color-secondary-active", "--mod-link-text-color-secondary-default", "--mod-link-text-color-secondary-focus", "--mod-link-text-color-secondary-hover", "--mod-link-text-color-white" ], - "component": [], + "component": [ + "--spectrum-link-corner-radius", + "--spectrum-link-default-font-family", + "--spectrum-link-focus-indicator-color", + "--spectrum-link-focus-indicator-gap", + "--spectrum-link-focus-indicator-thickness", + "--spectrum-link-font-size", + "--spectrum-link-font-style", + "--spectrum-link-font-weight", + "--spectrum-link-inline-font-weight", + "--spectrum-link-line-height", + "--spectrum-link-line-height-cjk", + "--spectrum-link-text-underline-gap", + "--spectrum-link-text-underline-thickness" + ], "global": [ "--spectrum-accent-content-color-default", "--spectrum-accent-content-color-down", @@ -36,12 +52,28 @@ "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", "--spectrum-black", + "--spectrum-cjk-line-height-100", + "--spectrum-corner-radius-100", + "--spectrum-default-font-style", + "--spectrum-focus-indicator-color", + "--spectrum-focus-indicator-gap", + "--spectrum-focus-indicator-thickness", + "--spectrum-font-size-100", + "--spectrum-line-height-100", + "--spectrum-medium-font-weight", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-regular-font-weight", + "--spectrum-sans-font-family-stack", + "--spectrum-text-underline-gap", + "--spectrum-text-underline-thickness", "--spectrum-white" ], "passthroughs": [], - "high-contrast": ["--highcontrast-link-text-color"] + "high-contrast": [ + "--highcontrast-link-focus-indicator-color", + "--highcontrast-link-text-color" + ] } diff --git a/components/link/index.css b/components/link/index.css index 97a5f291228..0cd89349e43 100644 --- a/components/link/index.css +++ b/components/link/index.css @@ -11,21 +11,28 @@ * governing permissions and limitations under the License. */ -/* Windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Link { - --highcontrast-link-text-color: LinkText; - } -} +.spectrum-Link { + /* Focus state */ + --spectrum-link-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-link-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-link-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-link-corner-radius: var(--spectrum-corner-radius-100); -.spectrum-Link--secondary { - --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)); - --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)); - --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)); - --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)); -} + /* Typography */ + --spectrum-link-default-font-family: var(--spectrum-sans-font-family-stack); + + /* Standalone */ + --spectrum-link-line-height: var(--spectrum-line-height-100); + --spectrum-link-line-height-cjk: var(--spectrum-cjk-line-height-100); + --spectrum-link-font-size: var(--spectrum-font-size-100); + --spectrum-link-font-style: var(--spectrum-default-font-style); + --spectrum-link-font-weight: var(--spectrum-medium-font-weight); + --spectrum-link-text-underline-thickness: var(--spectrum-text-underline-thickness); + --spectrum-link-text-underline-gap: var(--spectrum-text-underline-gap); + + /* Inline */ + --spectrum-link-inline-font-weight: var(--spectrum-regular-font-weight); -.spectrum-Link { /* Remove the gray background on active links in IE 10. */ background-color: transparent; @@ -36,29 +43,45 @@ outline: none; cursor: pointer; - /* @deprecated --mod-link-text-color-primary-default in favor of --mod-link-text-color */ - color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))); + color: var(--highcontrast-link-text-color, var(--mod-link-text-color, var(--spectrum-accent-content-color-default))); + font-family: var(--spectrum-link-default-font-family); + font-weight: var(--spectrum-link-font-weight); + font-size: var(--spectrum-link-font-size); + font-style: var(--spectrum-link-font-style); + line-height: var(--spectrum-link-line-height); + text-decoration-thickness: var(--spectrum-link-text-underline-thickness); + text-underline-offset: var(--spectrum-link-text-underline-gap); &:hover { - /* @deprecated --mod-link-text-color-primary-hover in favor of --mod-link-text-color-hover */ - --mod-link-text-color: var(--mod-link-text-color-hover, var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))); + --mod-link-text-color: var(--mod-link-text-color-hover, var(--spectrum-accent-content-color-hover)); } &:active { - /* @deprecated --mod-link-text-color-primary-active in favor of --mod-link-text-color-active */ - --mod-link-text-color: var(--mod-link-text-color-active, var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))); + --mod-link-text-color: var(--mod-link-text-color-active, var(--spectrum-accent-content-color-down)); } &:focus-visible { - /* @deprecated --mod-link-text-color-primary-focus in favor of --mod-link-text-color-focus */ - --mod-link-text-color: var(--mod-link-text-color-focus, var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))); + --mod-link-text-color: var(--mod-link-text-color-focus, var(--spectrum-accent-content-color-key-focus)); - text-decoration: underline; - text-decoration-style: double; - text-decoration-color: inherit; + outline: var(--spectrum-link-focus-indicator-thickness) solid var(--highcontrast-link-focus-indicator-color, var(--spectrum-link-focus-indicator-color)); + padding: var(--spectrum-link-focus-indicator-gap); + border-radius: var(--spectrum-link-corner-radius); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-link-line-height-cjk, var(--spectrum-link-line-height-cjk)); } } +.spectrum-Link--secondary { + --mod-link-text-color: var(--mod-link-text-color-secondary-default, var(--spectrum-neutral-content-color-default)); + --mod-link-text-color-hover: var(--mod-link-text-color-secondary-hover, var(--spectrum-neutral-content-color-hover)); + --mod-link-text-color-active: var(--mod-link-text-color-secondary-active, var(--spectrum-neutral-content-color-down)); + --mod-link-text-color-focus: var(--mod-link-text-color-secondary-focus, var(--spectrum-neutral-content-color-key-focus)); +} + .spectrum-Link--quiet { text-decoration: none; @@ -67,6 +90,10 @@ } } +.spectrum-Link--inline { + --spectrum-link-font-weight: var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight)); +} + .spectrum-Link--staticWhite { --mod-link-text-color: var(--mod-link-text-color-white, var(--spectrum-white)); --mod-link-text-color-hover: var(--mod-link-text-color-white, var(--spectrum-white)); @@ -80,3 +107,11 @@ --mod-link-text-color-active: var(--mod-link-text-color-black, var(--spectrum-black)); --mod-link-text-color-focus: var(--mod-link-text-color-black, var(--spectrum-black)); } + +/* Windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Link { + --highcontrast-link-text-color: LinkText; + --highcontrast-link-focus-indicator-color: LinkText; + } +} diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 53c71bfacb2..bdb276051ce 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -3,7 +3,7 @@ import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum- import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { LinkGroup } from "./link.test.js"; -import { TemplateWithFillerText } from "./template.js"; +import { LinkGroupText, MultilineText, TemplateWithFillerText } from "./template.js"; /** * A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text. @@ -54,8 +54,20 @@ export default { }, control: "boolean", }, + isInline: { + name: "Inline", + type: { name: "boolean" }, + table: { + type: { summary: "boolean" }, + category: "Component", + }, + control: "boolean", + }, staticColor, - isQuiet, + isQuiet: { + ...isQuiet, + if: { arg: "isInline", neq: true }, + }, }, args: { rootClass: "spectrum-Link", @@ -65,6 +77,7 @@ export default { isActive: false, isFocused: false, isVisited: false, + isInline: false, }, parameters: { actions: { @@ -76,7 +89,7 @@ export default { }, packageJson, metadata, - }, + } }; export const Default = LinkGroup.bind({}); @@ -88,106 +101,83 @@ Default.tags = ["!autodocs"]; // ********* DOCS ONLY ********* // /** - * The primary link is the default variant and is blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience. + * The standalone link is the default variant with the primary style which appears blue. This should be used to call attention to the link and for when the blue color won’t feel too overwhelming in the experience. + * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary. */ -export const Primary = TemplateWithFillerText.bind({}); -Primary.args = { - ...Default.args, - text: "link using spectrum-Link" -}; +export const Primary = LinkGroupText.bind({}); +Primary.args = {}; Primary.tags = ["!dev"]; Primary.parameters = { chromatic: { disableSnapshot: true }, }; +Primary.storyName = "Standalone, primary"; /** * The secondary variant is the same gray color as the paragraph text. Its subdued appearance is optimal for when the primary variant is too overwhelming, such as in blocks of text with several references linked throughout. + * Link is using the class `spectrum-Link--secondary`. */ -export const Secondary = TemplateWithFillerText.bind({}); +export const Secondary = LinkGroupText.bind({}); Secondary.args = { variant: "secondary", - text: "link using spectrum-Link--secondary", }; Secondary.parameters = { chromatic: { disableSnapshot: true }, }; Secondary.tags = ["!dev"]; - -/** - * All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn’t necessary. - */ -export const QuietPrimary = TemplateWithFillerText.bind({}); -QuietPrimary.storyName = "Primary (quiet)"; -QuietPrimary.args = { - isQuiet: true, - text: "link using spectrum-Link--quiet", -}; -QuietPrimary.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietPrimary.tags = ["!dev"]; - -export const QuietSecondary = TemplateWithFillerText.bind({}); -QuietSecondary.storyName = "Secondary (quiet)"; -QuietSecondary.args = { - isQuiet: true, - variant: "secondary", - text: "link using spectrum-Link--quiet and spectrum-Link--secondary", -}; -QuietSecondary.parameters = { - chromatic: { disableSnapshot: true }, -}; -QuietSecondary.tags = ["!dev"]; +Secondary.storyName = "Standalone, secondary"; /** * Use static white on dark color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + * Link is using the class `spectrum-Link--staticWhite`. */ -export const StaticWhite = Default.bind({}); +export const StaticWhite = LinkGroupText.bind({}); StaticWhite.storyName = "Static white"; StaticWhite.args = { staticColor: "white", - text: "Link using spectrum-Link--staticWhite", }; StaticWhite.tags = ["!dev"]; StaticWhite.parameters = { chromatic: { disableSnapshot: true }, }; +StaticWhite.storyName = "Standalone, static white"; /** * Use static black on light color or image backgrounds, regardless of color theme. Make sure that the background and the link color meet the minimum color contrast ratio. + * Link using is the class `spectrum-Link--staticBlack`. */ -export const StaticBlack = Default.bind({}); +export const StaticBlack = LinkGroupText.bind({}); StaticBlack.storyName = "Static black"; StaticBlack.args = { staticColor: "black", - text: "Link using spectrum-Link--staticBlack", }; StaticBlack.tags = ["!dev"]; StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; +StaticBlack.storyName = "Standalone, static black"; -export const QuietStaticWhite = Default.bind({}); -QuietStaticWhite.storyName = "Static white (quiet)"; -QuietStaticWhite.args = { - isQuiet: true, - staticColor: "white", - text: "Link using spectrum-Link--staticWhite and spectrum-Link--quiet", -}; -QuietStaticWhite.tags = ["!dev"]; -QuietStaticWhite.parameters = { +/** + * The focus ring wraps when the link component breaks on multiple rows. + */ +export const Multiline = MultilineText.bind({}); +Multiline.args = {}; +Multiline.tags = ["!dev"]; +Multiline.parameters = { chromatic: { disableSnapshot: true }, }; +Multiline.storyName = "Multiline, focused"; -export const QuietStaticBlack = Default.bind({}); -QuietStaticBlack.storyName = "Static black (quiet)"; -QuietStaticBlack.args = { - isQuiet: true, - staticColor: "black", - text: "Link using spectrum-Link--staticBlack and spectrum-Link--quiet", +/** + * Inline links are used within a paragraph of text. They are styled differently from standalone links in which the font weight is lighter and can be adjusted to match the paragraph text. + * Inline links do not have a quiet variant style so that it is distinguishable from the surrounding text and the underline indicator is clear. + */ +export const Inline = TemplateWithFillerText.bind({}); +Inline.args = { + isInline: true, + text: "Inline link", }; -QuietStaticBlack.tags = ["!dev"]; -QuietStaticBlack.parameters = { +Inline.tags = ["!dev"]; +Inline.parameters = { chromatic: { disableSnapshot: true }, }; diff --git a/components/link/stories/link.test.js b/components/link/stories/link.test.js index 04b33e7abe7..3fdfa9576fe 100644 --- a/components/link/stories/link.test.js +++ b/components/link/stories/link.test.js @@ -11,6 +11,15 @@ export const LinkGroup = Variants({ testHeading: "Secondary", variant: "secondary", }, + { + testHeading: "Inline", + isInline: true, + }, + { + testHeading: "Inline - secondary", + isInline: true, + variant: "secondary", + }, { testHeading: "Quiet", isQuiet: true, @@ -47,7 +56,7 @@ export const LinkGroup = Variants({ testHeading: "Static white - quiet", staticColor: "white", isQuiet: true, - }, + } ], stateData: [ { diff --git a/components/link/stories/template.js b/components/link/stories/template.js index a4faba05967..798f0da7323 100644 --- a/components/link/stories/template.js +++ b/components/link/stories/template.js @@ -1,4 +1,4 @@ -import { getRandomId } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -17,6 +17,7 @@ export const Template = ({ isActive = false, isFocused = false, isVisited = false, + isInline = false, id = getRandomId("link"), customClasses = [], } = {}) => { @@ -25,6 +26,7 @@ export const Template = ({ class=${classMap({ [rootClass]: true, [`${rootClass}--quiet`]: isQuiet, + [`${rootClass}--inline`]: isInline, [`${rootClass}--${variant}`]: typeof variant !== "undefined", [`${rootClass}--static${capitalize(staticColor)}`]: typeof staticColor !== "undefined", @@ -43,9 +45,48 @@ export const Template = ({ }; export const TemplateWithFillerText = (args, context) => html` -
+

Hello, this is a ${Template(args, context)} . This is just filler text, but if you keep reading maybe something good will happen. -

+

`; + +export const MultilineText = (args, context) => html` +

+ I like focus styles. They are very important for accessibility. They help users know where they are on the page. + ${Template({ + ...args, + text: "This is a link that spans multiple lines", + isFocused: true, + isInline: true, + }, context)} + They are also very pretty. +

+`; + +export const LinkGroupText = (args, context) => Container({ + withBorder: false, + direction: "row", + content: [ + Container({ + withBorder: false, + direction: "column", + heading: "Default", + content: Template({ + ...args, + text: "Learn more", + }, context) + }, context), + Container({ + withBorder: false, + direction: "column", + heading: "Quiet", + content: Template({ + ...args, + text: "Learn more", + isQuiet: true, + }, context) + }, context) + ], +}, context); From 48ae9d790b4528e8e55240dddd16253188957178 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sun, 16 Mar 2025 12:18:30 +0000 Subject: [PATCH 098/103] chore: release (next) (#3622) The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant. --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: [ Cassondra ] --- .changeset/pre.json | 1 + components/contextualhelp/CHANGELOG.md | 7 ++++++ components/contextualhelp/package.json | 6 ++--- components/dropzone/CHANGELOG.md | 7 ++++++ components/dropzone/package.json | 6 ++--- components/link/CHANGELOG.md | 34 ++++++++++++++++++++++++++ components/link/package.json | 2 +- tools/bundle/package.json | 6 ++--- yarn.lock | 20 +++++++-------- 9 files changed, 69 insertions(+), 20 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index 4cb2fc5295e..c315e083cec 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -128,6 +128,7 @@ "strange-glasses-allow", "tame-bobcats-beam", "tame-knives-train", + "tasty-eagles-draw", "twenty-ravens-divide", "twenty-tables-know" ] diff --git a/components/contextualhelp/CHANGELOG.md b/components/contextualhelp/CHANGELOG.md index 37adf6a3f82..586beab78ff 100644 --- a/components/contextualhelp/CHANGELOG.md +++ b/components/contextualhelp/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 6.0.0-next.1 + +### Patch Changes + +- Updated dependencies [[`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351)]: + - @spectrum-css/link@8.0.0-next.0 + ## 6.0.0-next.0 ### Patch Changes diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 2b5dc22b25c..a858ea8c92c 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/contextualhelp", - "version": "6.0.0-next.0", + "version": "6.0.0-next.1", "description": "The Spectrum CSS contextualhelp component", "license": "Apache-2.0", "author": "Adobe", @@ -26,7 +26,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=8.0.0-next.0", - "@spectrum-css/link": ">=7.0.0 <8.0.0", + "@spectrum-css/link": ">=8.0.0-next.0", "@spectrum-css/popover": ">=9.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, @@ -46,7 +46,7 @@ }, "devDependencies": { "@spectrum-css/actionbutton": "8.0.0-next.0", - "@spectrum-css/link": "7.1.0", + "@spectrum-css/link": "8.0.0-next.0", "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, diff --git a/components/dropzone/CHANGELOG.md b/components/dropzone/CHANGELOG.md index 9604969db70..0ba416a347a 100644 --- a/components/dropzone/CHANGELOG.md +++ b/components/dropzone/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 9.0.0-next.2 + +### Patch Changes + +- Updated dependencies [[`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351)]: + - @spectrum-css/link@8.0.0-next.0 + ## 9.0.0-next.1 ### Major Changes diff --git a/components/dropzone/package.json b/components/dropzone/package.json index 769560cf59b..93609a7bc09 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropzone", - "version": "9.0.0-next.1", + "version": "9.0.0-next.2", "description": "The Spectrum CSS dropzone component", "license": "Apache-2.0", "author": "Adobe", @@ -27,7 +27,7 @@ "peerDependencies": { "@spectrum-css/actionbutton": ">=8.0.0-next.0", "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0", - "@spectrum-css/link": ">=7.0.0 <8.0.0", + "@spectrum-css/link": ">=8.0.0-next.0", "@spectrum-css/tokens": ">=16.0.0 <17.0.0" }, "peerDependenciesMeta": { @@ -47,7 +47,7 @@ "devDependencies": { "@spectrum-css/actionbutton": "8.0.0-next.0", "@spectrum-css/illustratedmessage": "9.1.0", - "@spectrum-css/link": "7.1.0", + "@spectrum-css/link": "8.0.0-next.0", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/link/CHANGELOG.md b/components/link/CHANGELOG.md index 82f09e93090..3f4feed99b5 100644 --- a/components/link/CHANGELOG.md +++ b/components/link/CHANGELOG.md @@ -1,5 +1,39 @@ # Change log +## 8.0.0-next.0 + +### Major Changes + +- [#3570](https://github.com/adobe/spectrum-css/pull/3570) [`c88fcdc`](https://github.com/adobe/spectrum-css/commit/c88fcdcfa4866f4b3ff7a1027e4253b8f2114351) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! + +#### Link S2 migration + + The link component is updated with S2 specifications, colors, and typography. There is a new inline variant which uses the `.spectrum-Link--inline` modifier class and the default is the standalone variant. + + ##### Note + + - Quiet styling does not apply to the inline variant so that it is distinguishable from the surrounding text and the underline indicator is clear + - `--mod-spectrum-link-font-weight` can be used to adjust inline variant to match surrounding text. Apply font weights to this mod `inherit` does not apply. + + #### New tokens + + ##### Color + + `spectrum-link-focus-indicator-color` + `spectrum-link-focus-indicator-thickness` + `spectrum-link-focus-indicator-gap` + `spectrum-link-corner-radius` + + ##### Typography + + `spectrum-link-line-height` + `spectrum-link-line-height-cjk-100` + `spectrum-link-font-size` + `spectrum-link-font-style` + `spectrum-link-font-weight` + `spectrum-link-text-underline-thickness` + `spectrum-link-text-underline-gap` + ## 7.1.0 ### Minor Changes diff --git a/components/link/package.json b/components/link/package.json index 4c24ea2c74f..dc42e02731e 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/link", - "version": "7.1.0", + "version": "8.0.0-next.0", "description": "The Spectrum CSS link component", "license": "Apache-2.0", "author": "Adobe", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 88c09f9d5ed..65a85701161 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -59,13 +59,13 @@ "@spectrum-css/colorwheel": "7.0.0-next.0", "@spectrum-css/combobox": "5.0.0-next.0", "@spectrum-css/commons": "11.0.0", - "@spectrum-css/contextualhelp": "6.0.0-next.0", + "@spectrum-css/contextualhelp": "6.0.0-next.1", "@spectrum-css/datepicker": "5.0.0-next.0", "@spectrum-css/dial": "5.1.0", "@spectrum-css/dialog": "13.0.0-next.2", "@spectrum-css/divider": "6.0.0-next.0", "@spectrum-css/dropindicator": "8.0.0-next.0", - "@spectrum-css/dropzone": "9.0.0-next.1", + "@spectrum-css/dropzone": "9.0.0-next.2", "@spectrum-css/fieldgroup": "8.0.0-next.0", "@spectrum-css/fieldlabel": "11.0.0-next.0", "@spectrum-css/floatingactionbutton": "4.1.0", @@ -75,7 +75,7 @@ "@spectrum-css/illustratedmessage": "9.1.0", "@spectrum-css/infieldbutton": "7.0.0-next.0", "@spectrum-css/inlinealert": "11.0.0-next.0", - "@spectrum-css/link": "7.1.0", + "@spectrum-css/link": "8.0.0-next.0", "@spectrum-css/logicbutton": "6.1.0", "@spectrum-css/menu": "10.0.0-next.1", "@spectrum-css/meter": "2.0.0-next.0", diff --git a/yarn.lock b/yarn.lock index db4cd87357c..962762e541c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4068,13 +4068,13 @@ __metadata: "@spectrum-css/colorwheel": "npm:7.0.0-next.0" "@spectrum-css/combobox": "npm:5.0.0-next.0" "@spectrum-css/commons": "npm:11.0.0" - "@spectrum-css/contextualhelp": "npm:6.0.0-next.0" + "@spectrum-css/contextualhelp": "npm:6.0.0-next.1" "@spectrum-css/datepicker": "npm:5.0.0-next.0" "@spectrum-css/dial": "npm:5.1.0" "@spectrum-css/dialog": "npm:13.0.0-next.2" "@spectrum-css/divider": "npm:6.0.0-next.0" "@spectrum-css/dropindicator": "npm:8.0.0-next.0" - "@spectrum-css/dropzone": "npm:9.0.0-next.1" + "@spectrum-css/dropzone": "npm:9.0.0-next.2" "@spectrum-css/fieldgroup": "npm:8.0.0-next.0" "@spectrum-css/fieldlabel": "npm:11.0.0-next.0" "@spectrum-css/floatingactionbutton": "npm:4.1.0" @@ -4084,7 +4084,7 @@ __metadata: "@spectrum-css/illustratedmessage": "npm:9.1.0" "@spectrum-css/infieldbutton": "npm:7.0.0-next.0" "@spectrum-css/inlinealert": "npm:11.0.0-next.0" - "@spectrum-css/link": "npm:7.1.0" + "@spectrum-css/link": "npm:8.0.0-next.0" "@spectrum-css/logicbutton": "npm:6.1.0" "@spectrum-css/menu": "npm:10.0.0-next.1" "@spectrum-css/meter": "npm:2.0.0-next.0" @@ -4464,17 +4464,17 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/contextualhelp@npm:6.0.0-next.0, @spectrum-css/contextualhelp@workspace:components/contextualhelp": +"@spectrum-css/contextualhelp@npm:6.0.0-next.1, @spectrum-css/contextualhelp@workspace:components/contextualhelp": version: 0.0.0-use.local resolution: "@spectrum-css/contextualhelp@workspace:components/contextualhelp" dependencies: "@spectrum-css/actionbutton": "npm:8.0.0-next.0" - "@spectrum-css/link": "npm:7.1.0" + "@spectrum-css/link": "npm:8.0.0-next.0" "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=8.0.0-next.0" - "@spectrum-css/link": ">=7.0.0 <8.0.0" + "@spectrum-css/link": ">=8.0.0-next.0" "@spectrum-css/popover": ">=9.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: @@ -4599,18 +4599,18 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/dropzone@npm:9.0.0-next.1, @spectrum-css/dropzone@workspace:components/dropzone": +"@spectrum-css/dropzone@npm:9.0.0-next.2, @spectrum-css/dropzone@workspace:components/dropzone": version: 0.0.0-use.local resolution: "@spectrum-css/dropzone@workspace:components/dropzone" dependencies: "@spectrum-css/actionbutton": "npm:8.0.0-next.0" "@spectrum-css/illustratedmessage": "npm:9.1.0" - "@spectrum-css/link": "npm:7.1.0" + "@spectrum-css/link": "npm:8.0.0-next.0" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/actionbutton": ">=8.0.0-next.0" "@spectrum-css/illustratedmessage": ">=9.0.0 <10.0.0" - "@spectrum-css/link": ">=7.0.0 <8.0.0" + "@spectrum-css/link": ">=8.0.0-next.0" "@spectrum-css/tokens": ">=16.0.0 <17.0.0" peerDependenciesMeta: "@spectrum-css/actionbutton": @@ -4801,7 +4801,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/link@npm:7.1.0, @spectrum-css/link@workspace:components/link": +"@spectrum-css/link@npm:8.0.0-next.0, @spectrum-css/link@workspace:components/link": version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" dependencies: From 9d0ab177e24938e30fdc72f9af35eb52c9c070ae Mon Sep 17 00:00:00 2001 From: Josh Winn <965114+jawinn@users.noreply.github.com> Date: Thu, 20 Mar 2025 09:25:49 -0400 Subject: [PATCH 099/103] chore: merge branch 'main' into spectrum-two (#3633) * feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] Co-authored-by: TaraT Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: aramos-adobe --- .github/workflows/development.yml | 2 +- components/actionbutton/CHANGELOG.md | 14 +-- components/alertbanner/CHANGELOG.md | 6 ++ components/checkbox/CHANGELOG.md | 8 ++ components/checkbox/dist/metadata.json | 2 +- components/checkbox/index.css | 3 +- .../checkbox/stories/checkbox.stories.js | 4 +- components/checkbox/stories/checkbox.test.js | 22 +++++ components/checkbox/stories/template.js | 2 + components/combobox/CHANGELOG.md | 10 +++ components/combobox/dist/metadata.json | 3 + components/combobox/index.css | 19 ++-- components/form/stories/form.stories.js | 12 +-- components/search/CHANGELOG.md | 18 ++-- components/slider/CHANGELOG.md | 10 +++ components/slider/dist/metadata.json | 4 +- components/slider/index.css | 86 ++++++------------- components/stepper/CHANGELOG.md | 7 ++ 18 files changed, 132 insertions(+), 100 deletions(-) diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index cc0a69c26ed..34cc8ee981b 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -95,7 +95,7 @@ jobs: steps: - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v45 + uses: step-security/changed-files@v45 with: files_yaml: | styles: diff --git a/components/actionbutton/CHANGELOG.md b/components/actionbutton/CHANGELOG.md index f7b4081cf30..9d49290a12d 100644 --- a/components/actionbutton/CHANGELOG.md +++ b/components/actionbutton/CHANGELOG.md @@ -1,5 +1,12 @@ # Change log +## 8.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + ## 7.1.2 ### Patch Changes @@ -10,13 +17,6 @@ This updates the colors used in action button for the spectrum two theme, so the This also includes a forced-colors/high contrast mode fix for the selected + disabled state. This now shows the disabled colors. -## 8.0.0-next.0 - -### Patch Changes - -- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: - - @spectrum-css/icon@10.0.0-next.0 - ## 7.1.1 ### Patch Changes diff --git a/components/alertbanner/CHANGELOG.md b/components/alertbanner/CHANGELOG.md index 696bf9ec5b9..20f8875ca17 100644 --- a/components/alertbanner/CHANGELOG.md +++ b/components/alertbanner/CHANGELOG.md @@ -16,6 +16,12 @@ - @spectrum-css/button@15.0.0-next.0 - @spectrum-css/closebutton@7.0.0-next.0 +## 3.1.1 + +### Patch Changes + +- [#3624](https://github.com/adobe/spectrum-css/pull/3624) [`754f99a`](https://github.com/adobe/spectrum-css/commit/754f99afc3c1918cdc0d173150989bcc1e6a7d2f) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - In the alert banner spectrum.css (the S1 stylesheet), --system: legacy was corrected in the container query. + ## 3.1.0 ### Minor Changes diff --git a/components/checkbox/CHANGELOG.md b/components/checkbox/CHANGELOG.md index c9e08acab28..e33a4762bc4 100644 --- a/components/checkbox/CHANGELOG.md +++ b/components/checkbox/CHANGELOG.md @@ -7,6 +7,14 @@ - Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: - @spectrum-css/icon@10.0.0-next.0 +## 10.1.2 + +### Patch Changes + +📝 [#3617](https://github.com/adobe/spectrum-css/pull/3617) [`a02f1d1`](https://github.com/adobe/spectrum-css/commit/a02f1d13d07106465a3236c5bfe3d029f3e64426) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! + +Adds a `::before` pseudo element to properly target the `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box` element. The selector update, specifically in the invalid+checked+hover state should now get the proper error background color, as opposed to the default background color. + ## 10.1.1 ### Patch Changes diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 0381817b915..5f2d712964c 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -65,7 +65,7 @@ ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index acc65c76985..32779ee084c 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -175,7 +175,7 @@ } &:hover { - .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, + .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box::before, .spectrum-Checkbox-box::before { border-color: var(--highcontrast-checkbox-color-hover, var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))); } @@ -297,6 +297,7 @@ } } + /* TODO: Because this selector was moved to the default variant's styles, this selector block can be deleted when it is safe to make changes to selectors. */ /* Invalid Hover States */ &.is-invalid:hover { &.is-indeterminate .spectrum-Checkbox-box, diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index ecee4a4b383..cbcad99494f 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isChecked, isDisabled, isEmphasized, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { CheckboxGroup } from "./checkbox.test.js"; @@ -30,6 +30,7 @@ export default { control: { type: "text" }, }, isEmphasized, + isHovered, isInvalid, isDisabled, isChecked, @@ -43,6 +44,7 @@ export default { isChecked: false, isDisabled: false, isEmphasized: false, + isHovered: false, isIndeterminate: false, isInvalid: false, isReadOnly: false, diff --git a/components/checkbox/stories/checkbox.test.js b/components/checkbox/stories/checkbox.test.js index 4de9e4eed46..a7c3efcaaf3 100644 --- a/components/checkbox/stories/checkbox.test.js +++ b/components/checkbox/stories/checkbox.test.js @@ -27,6 +27,11 @@ export const CheckboxGroup = Variants({ testHeading: "Checked", isChecked: true, }, + { + testHeading: "Checked, hovered", + isChecked: true, + isHovered: true, + }, { testHeading: "Indeterminate", isIndeterminate: true, @@ -40,6 +45,12 @@ export const CheckboxGroup = Variants({ isInvalid: true, isChecked: true, }, + { + testHeading: "Invalid, checked, hovered", + isInvalid: true, + isChecked: true, + isHovered: true, + }, { testHeading: "Invalid, indeterminate", isInvalid: true, @@ -54,6 +65,11 @@ export const CheckboxGroup = Variants({ isDisabled: true, isChecked: true, }, + { + testHeading: "Disabled, checked, hovered", + isDisabled: true, + isChecked: true, + }, { testHeading: "Disabled, indeterminate", isDisabled: true, @@ -68,6 +84,12 @@ export const CheckboxGroup = Variants({ isReadOnly: true, isChecked: true, }, + { + testHeading: "Read-only, checked, hovered", + isReadOnly: true, + isChecked: true, + isHovered: true, + }, { testHeading: "Read-only, indeterminate", isReadOnly: true, diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index 920b1f98b56..989fdf7e7f5 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -14,6 +14,7 @@ export const Template = ({ label, isChecked = false, isEmphasized = false, + isHovered = false, isIndeterminate = false, isDisabled = false, isInvalid = false, @@ -52,6 +53,7 @@ export const Template = ({ ["is-indeterminate"]: isIndeterminate, ["is-disabled"]: isDisabled, ["is-invalid"]: isInvalid, + ["is-hover"]: isHovered && !isDisabled, ["is-readOnly"]: isReadOnly, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} diff --git a/components/combobox/CHANGELOG.md b/components/combobox/CHANGELOG.md index 542c364a437..2f2f0831555 100644 --- a/components/combobox/CHANGELOG.md +++ b/components/combobox/CHANGELOG.md @@ -10,6 +10,16 @@ - @spectrum-css/popover@9.0.0-next.0 - @spectrum-css/textfield@9.0.0-next.0 +## 4.1.2 + +### Patch Changes + +- [#3609](https://github.com/adobe/spectrum-css/pull/3609) [`851be13`](https://github.com/adobe/spectrum-css/commit/851be13295f9d42d548894fee6626009f053de61) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Fast follow fixes for combobox + + - corrects container query for the `--system` reference to "legacy" in the combobox/themes/spectrum.css file + - corrects the border colors for several combobox states including focus, keyboardFocus, focus+hover, disabled, read-only for all themes + - adds `--spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400);` to express.css theme so that the default border and read-only border colors are the same + ## 4.1.1 ### Patch Changes diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 9670d6e6997..c0626f6390e 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -124,6 +124,7 @@ "--mod-combobox-inline-size", "--mod-combobox-line-height", "--mod-combobox-min-inline-size", + "--mod-combobox-readonly-border-color-disabled", "--mod-combobox-readonly-input-border-color", "--mod-combobox-spacing-block-end-edge-to-text", "--mod-combobox-spacing-block-start-edge-to-text", @@ -170,6 +171,7 @@ "--spectrum-combobox-line-height", "--spectrum-combobox-min-inline-size", "--spectrum-combobox-readonly-background-color-disabled", + "--spectrum-combobox-readonly-border-color-disabled", "--spectrum-combobox-readonly-border-color-invalid-default", "--spectrum-combobox-readonly-input-background-color", "--spectrum-combobox-readonly-input-border-color", @@ -253,6 +255,7 @@ "--mod-picker-button-background-color-disabled", "--mod-picker-button-background-color-quiet", "--mod-picker-button-border-color", + "--mod-picker-button-border-color-disabled", "--mod-picker-button-border-color-quiet", "--mod-picker-button-border-width", "--mod-picker-button-font-color-disabled", diff --git a/components/combobox/index.css b/components/combobox/index.css index 1c791073855..a1e1797971b 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -12,14 +12,6 @@ */ .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); - - --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - --spectrum-combobox-block-size: var(--spectrum-component-height-100); --spectrum-combobox-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-combobox-font-size: var(--spectrum-font-size-100); @@ -56,6 +48,7 @@ --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); --spectrum-combobox-border-color-invalid-default: var(--spectrum-negative-border-color-default); --spectrum-combobox-border-color-invalid-hover: var(--spectrum-negative-border-color-hover); @@ -83,7 +76,7 @@ --mod-textfield-border-width: var(--mod-combobox-border-width, var(--spectrum-combobox-border-width)); --mod-textfield-border-color: var(--mod-combobox-border-color-default, var(--spectrum-combobox-border-color-default)); - --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, transparent); + --mod-textfield-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled)); --mod-textfield-border-color-focus: var(--mod-combobox-border-color-focus, var(--spectrum-combobox-border-color-focus)); --mod-textfield-border-color-focus-hover: var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover)); --mod-textfield-border-color-hover: var(--mod-combobox-border-color-hover, var(--spectrum-combobox-border-color-hover)); @@ -104,15 +97,15 @@ --mod-picker-button-background-color: var(--mod-combobox-background-color-default); --mod-picker-button-background-color-disabled: var(--mod-combobox-background-color-disabled); --mod-picker-button-font-color-disabled: var(--mod-combobox-font-color-disabled); + --mod-picker-button-border-color-disabled: var(--mod-combobox-border-color-disabled, var(--spectrum-combobox-border-color-disabled)); /* @passthroughs end -- settings for nested Picker Button component */ /*** Read-only Colors ***/ --spectrum-combobox-readonly-input-background-color: var(--spectrum-gray-50); - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); --spectrum-combobox-readonly-border-color-invalid-default: var(--spectrum-negative-border-color-default); --spectrum-combobox-readonly-background-color-disabled: var(--spectrum-disabled-background-color); --spectrum-combobox-readonly-text-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-combobox-readonly-border-color-disabled: var(--spectrum-disabled-border-color); } .spectrum-Combobox--sizeS { @@ -248,7 +241,7 @@ &.is-disabled .spectrum-Combobox-input:read-only { background-color: var(--mod-textfield-background-color-disabled, var(--spectrum-combobox-readonly-background-color-disabled)); - border-color: transparent; + border-color: var(--mod-combobox-readonly-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled, transparent)); color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))); &:hover { @@ -435,7 +428,7 @@ &.is-disabled .spectrum-Combobox-input:read-only { color: var(--highcontrast-textfield-text-color-disabled, var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))); - border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-border-color-disabled)); + border-color: var(--mod-textfield-border-color-disabled, var(--spectrum-combobox-readonly-border-color-disabled)); } } } diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index faeef1c8a02..5677a09d8ab 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -1,4 +1,3 @@ -import { Template as Checkbox } from "@spectrum-css/checkbox/stories/template.js"; import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js"; import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; @@ -80,18 +79,19 @@ export default { content: [ (passthroughs, context) => Fieldgroup({ layout: "horizontal", + inputType: "checkbox", items: [ - Checkbox({ + { ...passthroughs, label: "Kittens", customClasses: ["spectrum-FieldGroup-item"], - }, context), - Checkbox({ + }, + { ...passthroughs, label: "Puppies", customClasses: ["spectrum-FieldGroup-item"], - }, context),] - }), + }] + }, context), ], },{ label: "Age", diff --git a/components/search/CHANGELOG.md b/components/search/CHANGELOG.md index 137cff9b91c..5f6054130fd 100644 --- a/components/search/CHANGELOG.md +++ b/components/search/CHANGELOG.md @@ -1,5 +1,14 @@ # Change log +## 9.0.0-next.0 + +### Patch Changes + +- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: + - @spectrum-css/icon@10.0.0-next.0 + - @spectrum-css/clearbutton@8.0.0-next.0 + - @spectrum-css/textfield@9.0.0-next.0 + ## 8.1.1 ### Patch Changes @@ -10,15 +19,6 @@ Updated `--spectrum-search-background-color-disabled` to `--spectrum-gray-25` an Also defines disabled quiet border and background colors (`--system-search-quiet-background-color-disabled` and `--system-search-quiet-border-color-disabled`) in order to maintain disabled quiet styling. -## 9.0.0-next.0 - -### Patch Changes - -- Updated dependencies [[`a25e0a9`](https://github.com/adobe/spectrum-css/commit/a25e0a99e5a4736ab4e607e00739343101a2633b)]: - - @spectrum-css/icon@10.0.0-next.0 - - @spectrum-css/clearbutton@8.0.0-next.0 - - @spectrum-css/textfield@9.0.0-next.0 - ## 8.1.0 ### Minor Changes diff --git a/components/slider/CHANGELOG.md b/components/slider/CHANGELOG.md index 5edf5fcfe87..529cf80e503 100644 --- a/components/slider/CHANGELOG.md +++ b/components/slider/CHANGELOG.md @@ -7,6 +7,16 @@ - Updated dependencies []: - @spectrum-css/stepper@8.0.0-next.0 +## 6.2.0 + +### Minor Changes + +- [#3611](https://github.com/adobe/spectrum-css/pull/3611) [`8cb98c6`](https://github.com/adobe/spectrum-css/commit/8cb98c6127a91f902f305faeb800e3c787e97e66) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Slider: offset variant track fix + + The border radius styles were not being applied to the second instance of the `spectrum-Slider-track` when the offset variant is activated. The reason for this bug is because when the `offset` is selected, the template structure changes as `spectrum-Slider-fill` gets added to the slider. + + Adding a sibling combinator `&~.spectrum-Slider-track` to `spectrum-Slider-track` when offset is activated resolved the issue. + ## 6.1.0 ### Minor Changes diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 78f17a358a4..dde1bda1a99 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -62,6 +62,7 @@ ".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle", ".spectrum-Slider-track", ".spectrum-Slider-track ~ .spectrum-Slider-track", + ".spectrum-Slider-track ~ .spectrum-Slider-track:before", ".spectrum-Slider-track:before", ".spectrum-Slider-track:first-of-type:before", ".spectrum-Slider-track:last-of-type:before", @@ -83,9 +84,6 @@ ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", - ".spectrum-Slider.spectrum-Slider--sizeL", - ".spectrum-Slider.spectrum-Slider--sizeS", - ".spectrum-Slider.spectrum-Slider--sizeXL", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", diff --git a/components/slider/index.css b/components/slider/index.css index 7d78b6adb38..71f3d14163c 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -12,42 +12,6 @@ */ .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - - --spectrum-slider-track-corner-radius: 2px; - - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - - /* default sizing, matches t-shirt size M */ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); --spectrum-slider-control-height: var(--spectrum-component-height-100); @@ -96,7 +60,6 @@ --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); @@ -105,30 +68,9 @@ /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); --spectrum-slider-track-handleoffset: var(--spectrum-slider-handle-gap); - --spectrum-slider-range-track-reset: 0; - --spectrum-slider-track-corner-radius: 2px; - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - - position: relative; - - /* Don't let z-index'd child elements float above other things on the page */ - z-index: 0; - display: block; - min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); - - user-select: none; - - &:dir(rtl), - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - - &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) { - margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); - } } .spectrum-Slider--sizeS { @@ -170,6 +112,26 @@ --spectrum-slider-value-inline-size: 22px; } +.spectrum-Slider { + position: relative; + + /* Don't let z-index'd child elements float above other things on the page */ + z-index: 0; + display: block; + min-inline-size: var(--mod-slider-min-size, var(--spectrum-slider-min-size)); + + user-select: none; + + &:dir(rtl), + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + + &:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp) { + margin-block-start: calc(var(--mod-slider-ramp-track-height, var(--spectrum-slider-ramp-track-height)) / 2); + } +} + .spectrum-Slider--sideLabel { display: flex; align-items: center; @@ -594,6 +556,12 @@ &::before { background: var(--highcontrast-slider-track-color-static, var(--mod-slider-track-color, var(--spectrum-slider-track-color))); } + + /* Styles below are applied to the sibling spectrum-Slider-track when filled-offset variant is activated */ + & ~ .spectrum-Slider-track::before { + border-start-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + border-end-end-radius: var(--mod-slider-track-corner-radius, var(--spectrum-slider-track-corner-radius)); + } } /* All variants other than filled-offset get a new track color for highcontrast mode */ @@ -678,6 +646,8 @@ .spectrum-Slider-track { &:not(:first-of-type, :last-of-type)::before { background: var(--highcontrast-slider-filled-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + border-start-end-radius: 0; + border-end-end-radius: 0; } } } diff --git a/components/stepper/CHANGELOG.md b/components/stepper/CHANGELOG.md index a66cfe0bb49..1886f8ecabc 100644 --- a/components/stepper/CHANGELOG.md +++ b/components/stepper/CHANGELOG.md @@ -10,6 +10,13 @@ - @spectrum-css/infieldbutton@7.0.0-next.0 - @spectrum-css/textfield@9.0.0-next.0 +## 7.1.3 + +### Patch Changes + +- [#3621](https://github.com/adobe/spectrum-css/pull/3621) [`3aec28a`](https://github.com/adobe/spectrum-css/commit/3aec28aac60bdf32a585fa8ff38559d80b57ff86) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - - Updates `--spectrum-stepper-border-color-focus-hover` from `gray-800` to `gray-900`. + - Updates `--spectrum-stepper-buttons-border-color-keyboard-focus` from `gray-900` to `gray-800` to match the rest of the border color on keyboardFocus. + ## 7.1.2 ### Patch Changes From 0af646180cd61e1872cde39bed5436f97d378cc9 Mon Sep 17 00:00:00 2001 From: aramos-adobe Date: Thu, 20 Mar 2025 10:08:12 -0400 Subject: [PATCH 100/103] feat(radio): adding new colors, type, and size tokens, invalid state, WHCM (#3555) * feat(radio): adding radio options * chore(radio): update metadata * feat(radio): removing unused hcm token * chore(radio): adding changeset * feat(radio): updating emphasized hcm selected color * feat(radio): adding more tests and helptext ecample * feat(radio): restoring helptext css and removing changeset * feat(radio): removing dupe tokens, test, stories * feat(radio): updating template docs * feat(radio): updating invalid template and story * feat(radio): removing invalid state * feat(radio): cleaning up templates * feat(radio): adding active control and test state * chore(radio): rebuilding metadata files --- .changeset/angry-needles-behave.md | 23 ++++ components/helptext/stories/template.js | 2 +- components/radio/dist/metadata.json | 34 ++--- components/radio/index.css | 155 ++++++++++++---------- components/radio/stories/radio.stories.js | 8 +- components/radio/stories/radio.test.js | 39 +++++- components/radio/stories/template.js | 11 +- 7 files changed, 180 insertions(+), 92 deletions(-) create mode 100644 .changeset/angry-needles-behave.md diff --git a/.changeset/angry-needles-behave.md b/.changeset/angry-needles-behave.md new file mode 100644 index 00000000000..04a4512d138 --- /dev/null +++ b/.changeset/angry-needles-behave.md @@ -0,0 +1,23 @@ +--- +"@spectrum-css/radio": major +--- + +# Radio S2 Migration + +Updates: + +- High contrast tokens have been modified +- Typography tokens modified + +## New tokens + +`--spectrum-radio-border-width` +`--spectrum-radio-text-font-weight` +`--spectrum-radio-text-font-style` + +## Modified tokens + +`--spectrum-radio-emphasized-accent-color` +`--spectrum-radio-emphasized-accent-color-hover` +`--spectrum-radio-emphasized-accent-color-down` +`--spectrum-radio-emphasized-accent-color-focus` diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 74fa628ae2a..0b19659c9de 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -34,7 +34,7 @@ export const Template = ({ ${when(!hideIcon && variant == "negative", () => Icon( { - iconName: "Alert", + iconName: "AlertTriangle", setName: "workflow", size, customClasses: [`${rootClass}-validationIcon`], diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index fdeccc96e85..7863677a763 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -25,10 +25,15 @@ ".spectrum-Radio-label:lang(ja)", ".spectrum-Radio-label:lang(ko)", ".spectrum-Radio-label:lang(zh)", + ".spectrum-Radio.is-active .spectrum-Radio-button:before", + ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", + ".spectrum-Radio.is-active .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input", + ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", ".spectrum-Radio.is-readOnly .spectrum-Radio-label", + ".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-label", @@ -43,6 +48,7 @@ ".spectrum-Radio:lang(ja)", ".spectrum-Radio:lang(ko)", ".spectrum-Radio:lang(zh)", + ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button", "[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after" ], "modifiers": [ @@ -85,10 +91,6 @@ "--spectrum-radio-button-border-color-down", "--spectrum-radio-button-border-color-focus", "--spectrum-radio-button-border-color-hover", - "--spectrum-radio-button-checked-border-color-default", - "--spectrum-radio-button-checked-border-color-down", - "--spectrum-radio-button-checked-border-color-focus", - "--spectrum-radio-button-checked-border-color-hover", "--spectrum-radio-button-control-size", "--spectrum-radio-button-control-size-extra-large", "--spectrum-radio-button-control-size-large", @@ -119,13 +121,17 @@ "--spectrum-radio-neutral-content-color-down", "--spectrum-radio-neutral-content-color-focus", "--spectrum-radio-neutral-content-color-hover", + "--spectrum-radio-text-font-style", + "--spectrum-radio-text-font-weight", "--spectrum-radio-text-to-control" ], "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", + "--spectrum-accent-content-color-default", + "--spectrum-accent-content-color-down", + "--spectrum-accent-content-color-hover", + "--spectrum-accent-content-color-key-focus", "--spectrum-animation-duration-100", + "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", "--spectrum-component-bottom-to-text-200", @@ -135,10 +141,13 @@ "--spectrum-component-height-200", "--spectrum-component-height-300", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", "--spectrum-component-top-to-text-100", "--spectrum-component-top-to-text-200", "--spectrum-component-top-to-text-300", "--spectrum-component-top-to-text-75", + "--spectrum-default-font-style", "--spectrum-disabled-content-color", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", @@ -147,19 +156,13 @@ "--spectrum-font-size-200", "--spectrum-font-size-300", "--spectrum-font-size-75", - "--spectrum-gray-50", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", + "--spectrum-gray-25", "--spectrum-line-height-100", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", "--spectrum-neutral-content-color-default", "--spectrum-neutral-content-color-down", "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus", + "--spectrum-regular-font-weight", "--spectrum-text-to-control-100", "--spectrum-text-to-control-200", "--spectrum-text-to-control-300", @@ -167,7 +170,6 @@ ], "passthroughs": [], "high-contrast": [ - "--highcontrast-radio-button-background-color", "--highcontrast-radio-button-border-color-default", "--highcontrast-radio-button-border-color-down", "--highcontrast-radio-button-border-color-focus", diff --git a/components/radio/index.css b/components/radio/index.css index 36b03e7bdca..c3878f77634 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -18,7 +18,7 @@ */ .spectrum-Radio { - --spectrum-radio-button-background-color: var(--spectrum-gray-50); + --spectrum-radio-button-background-color: var(--spectrum-gray-25); /* state colors for all themes */ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); @@ -36,22 +36,16 @@ --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); /* emphasized state colors selection indicator all themes */ - --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); - --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); - --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); - --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - - /* unchecked selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - - /* checked selection indicator */ - --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-content-color-default); + --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-content-color-down); + --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-content-color-key-focus); + + /* radio checked/unchecked selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-radio-button-border-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-radio-button-border-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-radio-button-border-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-radio-line-height: var(--spectrum-line-height-100); @@ -67,6 +61,9 @@ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --spectrum-radio-font-size: var(--spectrum-font-size-100); + --spectrum-radio-border-width: var(--spectrum-border-width-200); + --spectrum-radio-text-font-weight: var(--spectrum-regular-font-weight); + --spectrum-radio-text-font-style: var(--spectrum-default-font-style); /* CJK language support all themes */ &:lang(ja), @@ -112,53 +109,6 @@ --spectrum-radio-font-size: var(--spectrum-font-size-300); } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-Radio { - --highcontrast-radio-button-background-color: ButtonFace; - - /* high contrast text */ - --highcontrast-radio-neutral-content-color: CanvasText; - --highcontrast-radio-neutral-content-color-hover: CanvasText; - --highcontrast-radio-neutral-content-color-down: CanvasText; - --highcontrast-radio-neutral-content-color-focus: CanvasText; - - /* high contrast selector */ - --highcontrast-radio-button-border-color-default: ButtonText; - --highcontrast-radio-button-border-color-hover: Highlight; - --highcontrast-radio-button-border-color-down: ButtonText; - --highcontrast-radio-button-border-color-focus: Highlight; - - /* high contrast emphasized selector */ - --highcontrast-radio-emphasized-accent-color: ButtonText; - --highcontrast-radio-emphasized-accent-color-hover: Highlight; - --highcontrast-radio-emphasized-accent-color-down: ButtonText; - --highcontrast-radio-emphasized-accent-color-focus: Highlight; - - /* high contrast checked selector */ - --highcontrast-radio-button-checked-border-color-default: Highlight; - --highcontrast-radio-button-checked-border-color-hover: Highlight; - --highcontrast-radio-button-checked-border-color-down: Highlight; - --highcontrast-radio-button-checked-border-color-focus: Highlight; - - /* high contrast disabled text */ - --highcontrast-radio-disabled-content-color: GrayText; - - /* high contrast disabled selector */ - --highcontrast-radio-disabled-border-color: GrayText; - - /* high contrast focus ring */ - --highcontrast-radio-focus-indicator-color: CanvasText; - - /* ensure focus ring is visible if user agent has non-accessible system overrides */ - .spectrum-Radio-button { - &::after { - forced-color-adjust: none; - } - } - } -} - .spectrum-Radio { display: inline-flex; align-items: flex-start; @@ -176,7 +126,7 @@ /* checked selection indicator hover */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))); + border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover))); } .spectrum-Radio-label { @@ -184,7 +134,14 @@ } } - &:active { + &:not(.is-readOnly):active { + .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button { + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + } + } + + &:active, + &.is-active { /* selection indicator active */ .spectrum-Radio-button::before { border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))); @@ -192,7 +149,7 @@ /* checked selection indicator active */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))); + border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))); } .spectrum-Radio-label { @@ -218,7 +175,7 @@ /* selected selection indicator is focused state */ .spectrum-Radio-input:checked + .spectrum-Radio-button::before { - border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))); + border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus))); } .spectrum-Radio-label { @@ -311,7 +268,7 @@ &::before { /* half of element width minus half of indicator width is checked border width */ border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2)); - border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))); + border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default))); } } @@ -336,9 +293,8 @@ font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size)); - /* TODO: font weight and style tokens */ - /* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/ - /* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/ + font-weight: var(--spectrum-radio-text-font-weight); + font-style: var(--spectrum-radio-text-font-style); color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))); line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height)); @@ -405,3 +361,58 @@ } } } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-Radio { + /* high contrast text */ + --highcontrast-radio-neutral-content-color: CanvasText; + --highcontrast-radio-neutral-content-color-hover: CanvasText; + --highcontrast-radio-neutral-content-color-down: CanvasText; + --highcontrast-radio-neutral-content-color-focus: CanvasText; + + /* high contrast selector */ + --highcontrast-radio-button-border-color-default: ButtonText; + --highcontrast-radio-button-border-color-hover: Highlight; + --highcontrast-radio-button-border-color-down: ButtonText; + --highcontrast-radio-button-border-color-focus: Highlight; + + /* high contrast emphasized selector */ + --highcontrast-radio-emphasized-accent-color: Highlight; + --highcontrast-radio-emphasized-accent-color-hover: Highlight; + --highcontrast-radio-emphasized-accent-color-down: ButtonText; + --highcontrast-radio-emphasized-accent-color-focus: Highlight; + + /* high contrast checked selector */ + --highcontrast-radio-button-checked-border-color-default: Highlight; + --highcontrast-radio-button-checked-border-color-hover: Highlight; + --highcontrast-radio-button-checked-border-color-down: Highlight; + --highcontrast-radio-button-checked-border-color-focus: Highlight; + + /* high contrast disabled text */ + --highcontrast-radio-disabled-content-color: GrayText; + + /* high contrast disabled selector */ + --highcontrast-radio-disabled-border-color: GrayText; + + /* high contrast focus ring */ + --highcontrast-radio-focus-indicator-color: CanvasText; + + /* ensure focus ring is visible if user agent has non-accessible system overrides */ + .spectrum-Radio-button { + &::after { + forced-color-adjust: none; + } + } + + &.is-readOnly { + .spectrum-Radio-input + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-border-color-default); + } + + &:hover .spectrum-Radio-input + .spectrum-Radio-button::before { + border-color: var(--highcontrast-radio-button-border-color-default); + } + } + } +} diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index 1d6ff3d9b16..2a63ba40c3e 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -1,6 +1,6 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types"; +import { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { RadioGroup } from "./radio.test.js"; @@ -40,6 +40,9 @@ export default { isChecked, isDisabled, isReadOnly, + isHovered, + isFocused, + isActive, }, args: { rootClass: "spectrum-Radio", @@ -49,6 +52,9 @@ export default { isChecked: false, isDisabled: false, isReadOnly: false, + isHovered: false, + isFocused: false, + isActive: false, }, parameters: { actions: { diff --git a/components/radio/stories/radio.test.js b/components/radio/stories/radio.test.js index 13b743d62b3..a14b5daa761 100644 --- a/components/radio/stories/radio.test.js +++ b/components/radio/stories/radio.test.js @@ -18,7 +18,6 @@ export const RadioGroup = Variants({ customStyles: { "max-width": "220px", } - } ], stateData: [ @@ -26,13 +25,51 @@ export const RadioGroup = Variants({ testHeading: "Checked", isChecked: true, }, + { + testHeading: "Checked + hovered", + isChecked: true, + }, + { + testHeading: "Hover", + isHovered: true, + }, { testHeading: "Disabled", isDisabled: true, }, + { + testHeading: "Disabled + checked", + isDisabled: true, + isChecked: true, + }, + { + testHeading: "Disabled + checked + hovered", + isDisabled: true, + isChecked: true, + isHovered: true, + }, { testHeading: "Read-only", isReadOnly: true, }, + { + testHeading: "Read-only + checked", + isReadOnly: true, + isChecked: true, + }, + { + testHeading: "Read-only + checked + hovered", + isHovered: true, + isReadOnly: true, + isChecked: true, + }, + { + testHeading: "Active", + isActive: true + }, + { + testHeading: "Focus-visible", + isFocused: true, + }, ] }); diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index 50ba8484b2f..3a1f613bc08 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -15,6 +15,9 @@ export const Template = ({ isChecked = false, isDisabled = false, isReadOnly = false, + isFocused = false, + isActive = false, + isHovered, id = getRandomId("radio"), customClasses = [], customStyles = {}, @@ -34,7 +37,9 @@ export const Template = ({ [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--emphasized`]: isEmphasized, + "is-hover": isHovered, "is-readOnly" : isReadOnly, + "is-active" : isActive, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} @@ -42,7 +47,11 @@ export const Template = ({ Date: Thu, 20 Mar 2025 17:31:48 +0000 Subject: [PATCH 101/103] chore: release (next) (#3635) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .changeset/pre.json | 1 + components/fieldgroup/package.json | 2 +- components/radio/CHANGELOG.md | 24 ++++++++++++++++++++++++ components/radio/package.json | 2 +- tools/bundle/package.json | 2 +- yarn.lock | 6 +++--- 6 files changed, 31 insertions(+), 6 deletions(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index c315e083cec..a1c8f058913 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -99,6 +99,7 @@ "@spectrum-css/infieldprogresscircle": "0.0.0" }, "changesets": [ + "angry-needles-behave", "beige-dragons-tickle", "big-beds-care", "chilly-peaches-sniff", diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index a3fe7b7e157..65742e31386 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -47,7 +47,7 @@ "devDependencies": { "@spectrum-css/checkbox": "11.0.0-next.0", "@spectrum-css/helptext": "8.0.0-next.0", - "@spectrum-css/radio": "11.0.0-next.0", + "@spectrum-css/radio": "11.0.0-next.1", "@spectrum-css/tokens": "16.0.1" }, "keywords": [ diff --git a/components/radio/CHANGELOG.md b/components/radio/CHANGELOG.md index 9f660046ec8..1e94ef08198 100644 --- a/components/radio/CHANGELOG.md +++ b/components/radio/CHANGELOG.md @@ -1,5 +1,29 @@ # Change log +## 11.0.0-next.1 + +### Major Changes + +- [#3555](https://github.com/adobe/spectrum-css/pull/3555) [`0af6461`](https://github.com/adobe/spectrum-css/commit/0af646180cd61e1872cde39bed5436f97d378cc9) Thanks [@aramos-adobe](https://github.com/aramos-adobe)! - # Radio S2 Migration + + Updates: + + - High contrast tokens have been modified + - Typography tokens modified + + ## New tokens + + `--spectrum-radio-border-width` + `--spectrum-radio-text-font-weight` + `--spectrum-radio-text-font-style` + + ## Modified tokens + + `--spectrum-radio-emphasized-accent-color` + `--spectrum-radio-emphasized-accent-color-hover` + `--spectrum-radio-emphasized-accent-color-down` + `--spectrum-radio-emphasized-accent-color-focus` + ## 11.0.0-next.0 ### Patch Changes diff --git a/components/radio/package.json b/components/radio/package.json index dabdb76d15a..51af9b26191 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/radio", - "version": "11.0.0-next.0", + "version": "11.0.0-next.1", "description": "The Spectrum CSS radio component", "license": "Apache-2.0", "author": "Adobe", diff --git a/tools/bundle/package.json b/tools/bundle/package.json index 65a85701161..2b1ea79e099 100644 --- a/tools/bundle/package.json +++ b/tools/bundle/package.json @@ -89,7 +89,7 @@ "@spectrum-css/popover": "9.0.0-next.1", "@spectrum-css/progressbar": "7.0.0-next.0", "@spectrum-css/progresscircle": "5.1.0", - "@spectrum-css/radio": "11.0.0-next.0", + "@spectrum-css/radio": "11.0.0-next.1", "@spectrum-css/rating": "7.0.0-next.0", "@spectrum-css/search": "9.0.0-next.0", "@spectrum-css/sidenav": "8.0.0-next.0", diff --git a/yarn.lock b/yarn.lock index 962762e541c..788b81f5ac9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4098,7 +4098,7 @@ __metadata: "@spectrum-css/popover": "npm:9.0.0-next.1" "@spectrum-css/progressbar": "npm:7.0.0-next.0" "@spectrum-css/progresscircle": "npm:5.1.0" - "@spectrum-css/radio": "npm:11.0.0-next.0" + "@spectrum-css/radio": "npm:11.0.0-next.1" "@spectrum-css/rating": "npm:7.0.0-next.0" "@spectrum-css/search": "npm:9.0.0-next.0" "@spectrum-css/sidenav": "npm:8.0.0-next.0" @@ -4630,7 +4630,7 @@ __metadata: dependencies: "@spectrum-css/checkbox": "npm:11.0.0-next.0" "@spectrum-css/helptext": "npm:8.0.0-next.0" - "@spectrum-css/radio": "npm:11.0.0-next.0" + "@spectrum-css/radio": "npm:11.0.0-next.1" "@spectrum-css/tokens": "npm:16.0.1" peerDependencies: "@spectrum-css/checkbox": ">=11.0.0-next.0" @@ -5133,7 +5133,7 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/radio@npm:11.0.0-next.0, @spectrum-css/radio@workspace:components/radio": +"@spectrum-css/radio@npm:11.0.0-next.1, @spectrum-css/radio@workspace:components/radio": version: 0.0.0-use.local resolution: "@spectrum-css/radio@workspace:components/radio" dependencies: From b2c6357c542737fb996cf8378354f525adde1fc2 Mon Sep 17 00:00:00 2001 From: Melissa Thompson Date: Fri, 21 Mar 2025 10:19:44 -0400 Subject: [PATCH 102/103] feat(actionbutton): s2 migration (#2669) * feat(actionbutton): s2 migration Migrates the action button component to spectrum 2, using updated and new design token specs. Includes down state transform, removal of medium class, changes to mod custom properties, and storybook updates. * docs(actionbutton): remove problematic click and focus events - The click event was treating all action buttons as toggles, not allowing testing of the active/down state on click on the default button. It also does not work well when multiple buttons are present. - The focus events were inaccurately showing the focus indicator on click; the styles for this work differently because they are for focus-visible. The focused control/arg is for the storybook only class used for testing, which applies in a different manner. * docs(actionbutton): update docs, selected state toggle Some small documentation improvements, especially around the selected state. Adds additional notes about the selected state being optional and for toggles (per SWC docs and guidelines). * fix(actionbutton): selected + disabled + quiet background color This combination of states should continue to have the background color rather than the quiet transparent background. Per design feedback, the quiet + disabled + selected should display the same as the default disabled + selected. * chore(actionbutton): generate new metadata * chore(actionbutton): add stylelint exception for downstate variables * feat(actionbutton): add font-style property and token * fix(actionbutton): static variants do not support emphasized Update tests to remove static black + emphasized and static white + emphasized, as these are not on the design spec and not supported. Updates some Docs page descriptions to make this clear. * feat(actionbutton): add cjk line-height support Use design spec defined CJK line-height in action button. Replaces line-height declaration coming from the extended BaseButton, along with a mod name appropriate for the component. * fix(actionbutton): high contrast adjustments - Fix for high contrast border styles not being solid. - Quiet variants no longer show a border and blend into background with Canvas and CanvasText color pair. - Focus indicator color changed from ButtonText to CanvasText, because this indicator appears outside of the element (it does not appear on top of a ButtonFace background). * docs(actionbutton): disable static color control if emphasized * docs(actionbutton): add docs link to popover * fix(actionbutton): static + quiet + disabled + selected background Fixes the issue where the static black and white, quiet, selected, and disabled state in the testing grid was showing the static quiet background color instead of the static disabled background color. * fix(actionbutton): set default system colors for high contrast The noted readability backplate issue was present on more than just the selected state; it was just difficult to see without contrasting colors. So this has been moved to the default, along with setting default system color values. * refactor(actionbutton): simplify high contrast styles Refactors high contrast styles and custom properties to remove unnecessary variables, and adds some documentation. * fix(actionbutton): use full line-height to prevent cut off diacritics Keep the previous S1 behavior of setting the line-height to the full component height. This prevents Thai diacritics from being cut off (see existing Storybook test). Note: this line-height is taller than both line-height-100 and cjk-line-height-100 listed on the design spec. Using those had resulted in the diacritics cutting off again. * chore(actionbutton): update changeset description and rebuild metadata * feat(actionbutton): refactor using "has" to reduce complexity Adjust some selectors to use :has in order to remove some overly complex calc functions, and to use the inline spacing tokens more like they are defined on the token specs. Now that :has is supported and used in our library, this simplifies this usage and removes some requirements for the source order of action button's child elements. * docs(actionbutton): remove outdated docs and add static docs Usage notes about using a mod for static colors no longer applies; the --mod-actionbutton-content-color-default-selected mod and similar selected state mods work correctly to change the content color for static. Adds some basic intro docs for static colors, pulled from the guidelines. * docs(actionbutton): add docs story for text overflow behavior * docs(actionbutton): clarify text overflow docs description * docs(actionbutton): remove size medium class from appearing in markup The .spectrum-ActionButton--sizeM class is no longer used but was still appearing in the examples markup. * chore(actionbutton): update copyright year * fix(actionbutton): disable css transitions in high contrast In Windows High Contrast, the border color briefly was flashing orange (ButtonBorder) after hover, before it switched back to the correct color as defined by the styles. This fixes that issue. This removes CSS transitions in high contrast to avoid some of these rendering issues and previously noticed sluggishness in the system color transitions. * chore(actionbutton): rebuild metadata * chore: update changeset * chore(actionbutton): storybook template update --------- Co-authored-by: Melissa Thompson Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: [ Cassondra ] --- .changeset/chilled-peaches-enjoy.md | 27 + components/actionbutton/dist/metadata.json | 114 ++-- components/actionbutton/index.css | 585 ++++++++---------- .../stories/actionbutton.stories.js | 80 ++- .../actionbutton/stories/actionbutton.test.js | 10 - components/actionbutton/stories/template.js | 58 +- 6 files changed, 452 insertions(+), 422 deletions(-) create mode 100644 .changeset/chilled-peaches-enjoy.md diff --git a/.changeset/chilled-peaches-enjoy.md b/.changeset/chilled-peaches-enjoy.md new file mode 100644 index 00000000000..f7a8def296a --- /dev/null +++ b/.changeset/chilled-peaches-enjoy.md @@ -0,0 +1,27 @@ +--- +"@spectrum-css/actionbutton": major +--- + +Action button now uses Spectrum 2 tokens and design specifications. A few notable changes: + +- Medium is now the default size and `.spectrum-ActionButton--sizeM` has been removed. +- Includes the Spectrum 2 down state transform. +- The component border was not removed and its color was changed to `transparent` in order to continue support for Windows High Contrast / forced colors, which still shows a border. The mod custom properties for border were removed to avoid interference with Windows High Contrast / forced colors accessibility. +- Some selectors to target the icon + text button and the icon-only button have been simplified using `:has`. This removes some overly complex `calc()` functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order. +- Background and content colors were updated. +- Mod custom properties have been adjusted: + - Renamed: + - `--mod-line-height-100` renamed to `--mod-actionbutton-line-height`. + - `--mod-sans-font-family-stack` renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` renamed to `--mod-button-animation-duration`. + - Removed: + - `--mod-actionbutton-border-color-default` + - `--mod-actionbutton-border-color-disabled` + - `--mod-actionbutton-border-color-down` + - `--mod-actionbutton-border-color-focus` + - `--mod-actionbutton-border-color-hover` + - `--mod-actionbutton-border-width` + - `--mod-actionbutton-static-content-color` + - New: + - `--mod-actionbutton-font-weight` + - `--mod-actionbutton-font-style` diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 06487511be1..655e8bdff1f 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -2,37 +2,29 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ActionButton", + ".spectrum-ActionButton .spectrum-ActionButton-hold", + ".spectrum-ActionButton .spectrum-ActionButton-icon", + ".spectrum-ActionButton .spectrum-ActionButton-label", ".spectrum-ActionButton--sizeL", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", ".spectrum-ActionButton-hold", - ".spectrum-ActionButton-hold + .spectrum-ActionButton-icon", ".spectrum-ActionButton-icon", - ".spectrum-ActionButton-icon:only-child", ".spectrum-ActionButton-label", ".spectrum-ActionButton-label:empty", ".spectrum-ActionButton.is-disabled", ".spectrum-ActionButton.is-selected", - ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticBlack", - ".spectrum-ActionButton.is-selected .is-disabled.spectrum-ActionButton--staticWhite", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-icon", - ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack:disabled", - ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite:disabled", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack", + ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-disabled:not(.is-selected)", + ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected", ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", - ".spectrum-ActionButton.spectrum-ActionButton--staticBlack .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", - ".spectrum-ActionButton.spectrum-ActionButton--staticWhite .is-disabled", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:disabled", ".spectrum-ActionButton::-moz-focus-inner", ".spectrum-ActionButton:active", ".spectrum-ActionButton:after", @@ -41,29 +33,41 @@ ".spectrum-ActionButton:focus", ".spectrum-ActionButton:focus-visible", ".spectrum-ActionButton:focus-visible:after", + ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)", ".spectrum-ActionButton:hover", + ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))", "[dir=\"rtl\"] .spectrum-ActionButton", "a.spectrum-ActionButton" ], "modifiers": [ "--mod-actionbutton-animation-duration", "--mod-actionbutton-background-color-default", + "--mod-actionbutton-background-color-default-selected", + "--mod-actionbutton-background-color-default-selected-emphasized", "--mod-actionbutton-background-color-disabled", "--mod-actionbutton-background-color-down", + "--mod-actionbutton-background-color-down-selected", + "--mod-actionbutton-background-color-down-selected-emphasized", "--mod-actionbutton-background-color-focus", + "--mod-actionbutton-background-color-focus-selected", + "--mod-actionbutton-background-color-focus-selected-emphasized", "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-border-color-default", - "--mod-actionbutton-border-color-disabled", - "--mod-actionbutton-border-color-down", - "--mod-actionbutton-border-color-focus", - "--mod-actionbutton-border-color-hover", + "--mod-actionbutton-background-color-hover-selected", + "--mod-actionbutton-background-color-hover-selected-emphasized", "--mod-actionbutton-border-radius", - "--mod-actionbutton-border-width", "--mod-actionbutton-content-color-default", + "--mod-actionbutton-content-color-default-selected", + "--mod-actionbutton-content-color-default-selected-emphasized", "--mod-actionbutton-content-color-disabled", "--mod-actionbutton-content-color-down", + "--mod-actionbutton-content-color-down-selected", + "--mod-actionbutton-content-color-down-selected-emphasized", "--mod-actionbutton-content-color-focus", + "--mod-actionbutton-content-color-focus-selected", + "--mod-actionbutton-content-color-focus-selected-emphasized", "--mod-actionbutton-content-color-hover", + "--mod-actionbutton-content-color-hover-selected", + "--mod-actionbutton-content-color-hover-selected-emphasized", "--mod-actionbutton-edge-to-hold-icon", "--mod-actionbutton-edge-to-text", "--mod-actionbutton-edge-to-visual", @@ -71,13 +75,16 @@ "--mod-actionbutton-focus-indicator-border-radius", "--mod-actionbutton-focus-indicator-color", "--mod-actionbutton-focus-indicator-gap", + "--mod-actionbutton-focus-indicator-thickness", + "--mod-actionbutton-font-size", + "--mod-actionbutton-font-style", + "--mod-actionbutton-font-weight", "--mod-actionbutton-height", "--mod-actionbutton-icon-size", "--mod-actionbutton-label-color", + "--mod-actionbutton-line-height", "--mod-actionbutton-min-width", - "--mod-actionbutton-text-to-visual", - "--mod-disabled-background-color", - "--mod-disabled-content-color" + "--mod-actionbutton-text-to-visual" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -91,16 +98,7 @@ "--spectrum-actionbutton-background-color-down", "--spectrum-actionbutton-background-color-focus", "--spectrum-actionbutton-background-color-hover", - "--spectrum-actionbutton-background-color-selected", - "--spectrum-actionbutton-background-color-selected-disabled", - "--spectrum-actionbutton-background-color-selected-down", - "--spectrum-actionbutton-background-color-selected-focus", - "--spectrum-actionbutton-background-color-selected-hover", - "--spectrum-actionbutton-border-color-default", - "--spectrum-actionbutton-border-color-disabled", - "--spectrum-actionbutton-border-color-down", - "--spectrum-actionbutton-border-color-focus", - "--spectrum-actionbutton-border-color-hover", + "--spectrum-actionbutton-border-color", "--spectrum-actionbutton-border-radius", "--spectrum-actionbutton-border-width", "--spectrum-actionbutton-content-color-default", @@ -108,7 +106,7 @@ "--spectrum-actionbutton-content-color-down", "--spectrum-actionbutton-content-color-focus", "--spectrum-actionbutton-content-color-hover", - "--spectrum-actionbutton-content-color-selected", + "--spectrum-actionbutton-downstate-perspective", "--spectrum-actionbutton-edge-to-hold-icon", "--spectrum-actionbutton-edge-to-text", "--spectrum-actionbutton-edge-to-visual", @@ -118,8 +116,11 @@ "--spectrum-actionbutton-focus-indicator-gap", "--spectrum-actionbutton-focus-indicator-thickness", "--spectrum-actionbutton-font-size", + "--spectrum-actionbutton-font-style", + "--spectrum-actionbutton-font-weight", "--spectrum-actionbutton-height", "--spectrum-actionbutton-icon-size", + "--spectrum-actionbutton-line-height", "--spectrum-actionbutton-min-width", "--spectrum-actionbutton-text-to-visual" ], @@ -129,6 +130,7 @@ "--spectrum-accent-background-color-hover", "--spectrum-accent-background-color-key-focus", "--spectrum-animation-duration-100", + "--spectrum-black", "--spectrum-border-width-100", "--spectrum-component-edge-to-text-100", "--spectrum-component-edge-to-text-200", @@ -150,14 +152,23 @@ "--spectrum-component-height-300", "--spectrum-component-height-50", "--spectrum-component-height-75", + "--spectrum-component-size-difference-down", + "--spectrum-component-size-minimum-perspective-down", + "--spectrum-component-size-width-ratio-down", "--spectrum-corner-radius-medium-size-extra-large", "--spectrum-corner-radius-medium-size-extra-small", "--spectrum-corner-radius-medium-size-large", "--spectrum-corner-radius-medium-size-medium", "--spectrum-corner-radius-medium-size-small", + "--spectrum-default-font-style", "--spectrum-disabled-background-color", - "--spectrum-disabled-border-color", "--spectrum-disabled-content-color", + "--spectrum-disabled-static-black-background-color", + "--spectrum-disabled-static-black-content-color", + "--spectrum-disabled-static-white-background-color", + "--spectrum-disabled-static-white-content-color", + "--spectrum-downstate-height", + "--spectrum-downstate-width", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -169,12 +180,9 @@ "--spectrum-gray-100", "--spectrum-gray-200", "--spectrum-gray-25", - "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", "--spectrum-line-height-100", "--spectrum-logical-rotation", + "--spectrum-medium-font-weight", "--spectrum-neutral-background-color-selected-default", "--spectrum-neutral-background-color-selected-down", "--spectrum-neutral-background-color-selected-hover", @@ -193,14 +201,14 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-500", - "--spectrum-transparent-black-600", - "--spectrum-transparent-black-700", + "--spectrum-transparent-black-25", + "--spectrum-transparent-black-800", + "--spectrum-transparent-black-900", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-500", - "--spectrum-transparent-white-600", - "--spectrum-transparent-white-700", + "--spectrum-transparent-white-25", + "--spectrum-transparent-white-800", + "--spectrum-transparent-white-900", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", @@ -214,20 +222,12 @@ "--mod-button-line-height" ], "high-contrast": [ + "--highcontrast-actionbutton-animation-duration", "--highcontrast-actionbutton-background-color-default", "--highcontrast-actionbutton-background-color-disabled", - "--highcontrast-actionbutton-background-color-down", - "--highcontrast-actionbutton-background-color-focus", - "--highcontrast-actionbutton-background-color-hover", - "--highcontrast-actionbutton-border-color-default", - "--highcontrast-actionbutton-border-color-disabled", - "--highcontrast-actionbutton-border-color-down", - "--highcontrast-actionbutton-border-color-focus", - "--highcontrast-actionbutton-border-color-hover", + "--highcontrast-actionbutton-border-color", "--highcontrast-actionbutton-content-color-default", "--highcontrast-actionbutton-content-color-disabled", - "--highcontrast-actionbutton-content-color-down", - "--highcontrast-actionbutton-content-color-focus", - "--highcontrast-actionbutton-content-color-hover" + "--highcontrast-actionbutton-focus-indicator-color" ] } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index bcf9af21804..e08737894eb 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -1,461 +1,416 @@ /*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at 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/commons/basebutton.css"; .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-gray-50))); - --spectrum-actionbutton-background-color-hover: var(--highcontrast-actionbutton-background-color-hover, var(--mod-actionbutton-background-color-hover, var(--spectrum-gray-100))); - --spectrum-actionbutton-background-color-down: var(--highcontrast-actionbutton-background-color-down, var(--mod-actionbutton-background-color-down, var(--spectrum-gray-200))); - --spectrum-actionbutton-background-color-focus: var(--highcontrast-actionbutton-background-color-focus, var(--mod-actionbutton-background-color-focus, var(--spectrum-gray-100))); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-actionbutton-border-color-default: var(--highcontrast-actionbutton-border-color-default, var(--mod-actionbutton-border-color-default, var(--spectrum-gray-400))); - --spectrum-actionbutton-border-color-hover: var(--highcontrast-actionbutton-border-color-hover, var(--mod-actionbutton-border-color-hover, var(--spectrum-gray-500))); - --spectrum-actionbutton-border-color-down: var(--highcontrast-actionbutton-border-color-down, var(--mod-actionbutton-border-color-down, var(--spectrum-gray-600))); - --spectrum-actionbutton-border-color-focus: var(--highcontrast-actionbutton-border-color-focus, var(--mod-actionbutton-border-color-focus, var(--spectrum-gray-500))); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-25); - --spectrum-actionbutton-content-color-disabled: var(--mod-disabled-content-color, var(--spectrum-disabled-content-color)); - --spectrum-actionbutton-background-color-disabled: var(--mod-disabled-background-color, var(--spectrum-disabled-background-color)); - - --spectrum-actionbutton-animation-duration: var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)); - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium)); - --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); - - --spectrum-actionbutton-content-color-default: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - --spectrum-actionbutton-content-color-hover: var(--highcontrast-actionbutton-content-color-hover, var(--mod-actionbutton-content-color-hover, var(--spectrum-neutral-content-color-hover))); - --spectrum-actionbutton-content-color-down: var(--highcontrast-actionbutton-content-color-down, var(--mod-actionbutton-content-color-down, var(--spectrum-neutral-content-color-down))); - --spectrum-actionbutton-content-color-focus: var(--highcontrast-actionbutton-content-color-focus, var(--mod-actionbutton-content-color-focus, var(--spectrum-neutral-content-color-key-focus))); - - --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); + --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); + --spectrum-actionbutton-border-color: transparent; + + --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + + --spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); - --spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100))); + --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); --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); --spectrum-actionbutton-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-font-weight: var(--spectrum-medium-font-weight); + --spectrum-actionbutton-font-style: var(--spectrum-default-font-style); + + /* Take up full component height for line-height, in order to help prevent characters from being cut off in some languages (e.g. Thai). */ + --spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height); + --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium)); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-100) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-100) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-100) - var(--spectrum-actionbutton-border-width))); + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-actionbutton-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; - - --mod-actionbutton-background-color-default: transparent; - --mod-actionbutton-background-color-hover: var(--spectrum-gray-100); - --mod-actionbutton-background-color-down: var(--spectrum-gray-200); - --mod-actionbutton-background-color-focus: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: transparent; - &:disabled:not(.is-selected), - &.is-disabled:not(.is-selected) { - --mod-actionbutton-border-color-disabled: transparent; - --mod-actionbutton-background-color-disabled: transparent; + &.is-selected { + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); } } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --mod-actionbutton-border-color-default: var(--spectrum-transparent-black-500); - --mod-actionbutton-border-color-hover: var(--spectrum-transparent-black-600); - --mod-actionbutton-border-color-down: var(--spectrum-transparent-black-700); - --mod-actionbutton-border-color-focus: var(--spectrum-transparent-black-600); + --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200); - - &:disabled, - .is-disabled { - --mod-disabled-content-color: var(--spectrum-transparent-black-500); - --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-black-500); - } + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-black-25); } } &.spectrum-ActionButton--staticWhite { - --mod-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --mod-actionbutton-border-color-default: var(--spectrum-transparent-white-500); - --mod-actionbutton-border-color-hover: var(--spectrum-transparent-white-600); - --mod-actionbutton-border-color-down: var(--spectrum-transparent-white-700); - --mod-actionbutton-border-color-focus: var(--spectrum-transparent-white-600); + --spectrum-actionbutton-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-focus: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200); - - &:disabled, - .is-disabled { - --mod-disabled-content-color: var(--spectrum-transparent-white-500); - --mod-actionbutton-border-color-disabled: var(--spectrum-transparent-white-500); - } + --spectrum-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); &.spectrum-ActionButton--quiet { - --mod-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-transparent-white-25); } } &.is-selected { - --mod-actionbutton-background-color-default: var(--spectrum-actionbutton-background-color-selected); - --mod-actionbutton-background-color-hover: var(--spectrum-actionbutton-background-color-selected-hover); - --mod-actionbutton-background-color-down: var(--spectrum-actionbutton-background-color-selected-down); - --mod-actionbutton-background-color-focus: var(--spectrum-actionbutton-background-color-selected-focus); - --mod-actionbutton-background-color-disabled: var(--spectrum-actionbutton-background-color-selected-disabled); - - --mod-actionbutton-border-color-default: transparent; - --mod-actionbutton-border-color-hover: transparent; - --mod-actionbutton-border-color-down: transparent; - --mod-actionbutton-border-color-focus: transparent; - --mod-actionbutton-border-color-disabled: transparent; - - --mod-actionbutton-content-color-default: var(--spectrum-actionbutton-content-color-selected); - --mod-actionbutton-content-color-hover: var(--spectrum-actionbutton-content-color-selected); - --mod-actionbutton-content-color-down: var(--spectrum-actionbutton-content-color-selected); - --mod-actionbutton-content-color-focus: var(--spectrum-actionbutton-content-color-selected); - - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default: var(--spectrum-accent-background-color-default); - --mod-actionbutton-background-color-hover: var(--spectrum-accent-background-color-hover); - --mod-actionbutton-background-color-down: var(--spectrum-accent-background-color-down); - --mod-actionbutton-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --mod-actionbutton-content-color-default: var(--spectrum-white); - --mod-actionbutton-content-color-hover: var(--spectrum-white); - --mod-actionbutton-content-color-down: var(--spectrum-white); - --mod-actionbutton-content-color-focus: var(--spectrum-white); + --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); + --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-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)); + --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); } - &:disabled, - .is-disabled { - &.spectrum-ActionButton--staticBlack { - --mod-disabled-content-color: var(--spectrum-transparent-black-500); - --mod-disabled-background-color: var(--spectrum-transparent-black-100); - } + &.spectrum-ActionButton--staticWhite { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-black); + --spectrum-actionbutton-content-color-hover: var(--spectrum-black); + --spectrum-actionbutton-content-color-down: var(--spectrum-black); + --spectrum-actionbutton-content-color-focus: var(--spectrum-black); + } - &.spectrum-ActionButton--staticWhite { - --mod-disabled-content-color: var(--spectrum-transparent-white-500); - --mod-disabled-background-color: var(--spectrum-transparent-white-100); - } + &.spectrum-ActionButton--staticBlack { + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-content-color-default: var(--spectrum-white); + --spectrum-actionbutton-content-color-hover: var(--spectrum-white); + --spectrum-actionbutton-content-color-down: var(--spectrum-white); + --spectrum-actionbutton-content-color-focus: var(--spectrum-white); } } } .spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small)); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small); - --spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50))); + --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); --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50); --spectrum-actionbutton-font-size: var(--spectrum-font-size-50); --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small)); - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-50) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-50) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-50) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50); + + --spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } .spectrum-ActionButton--sizeS { - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-small)); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small); - --spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75))); + --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); --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-actionbutton-font-size: var(--spectrum-font-size-75); --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small)); - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-75) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-75) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-75) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75); + + --spectrum-actionbutton-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); } .spectrum-ActionButton--sizeL { - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-large)); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large); - --spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200))); + --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); --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-actionbutton-font-size: var(--spectrum-font-size-200); --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large)); - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-200) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-200) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-200) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200); } .spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); - --spectrum-actionbutton-min-width: var(--mod-actionbutton-min-width, calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300))); + --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); --spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-actionbutton-font-size: var(--spectrum-font-size-300); --spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large)); - --spectrum-actionbutton-edge-to-visual: var(--mod-actionbutton-edge-to-visual, calc(var(--spectrum-component-edge-to-visual-300) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-text: var(--mod-actionbutton-edge-to-text, calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-actionbutton-border-width))); - --spectrum-actionbutton-edge-to-visual-only: var(--mod-actionbutton-edge-to-visual-only, calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width))); + --spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large); + --spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300); + --spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300); } .spectrum-ActionButton { - --spectrum-actionbutton-focus-indicator-border-radius: var(--mod-actionbutton-focus-indicator-border-radius, calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))); - - cursor: pointer; - user-select: none; - - /* Contain halo */ + @extend %spectrum-BaseButton; position: relative; - /* Show the button overflow in Edge. */ - overflow: visible; - display: inline-flex; - align-items: center; - justify-content: center; - - box-sizing: border-box; - - /* Remove button the margin in Firefox and Safari. */ - margin: 0; - - font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); - - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - - -webkit-font-smoothing: antialiased; - - /* Font smoothing for Firefox */ - -moz-osx-font-smoothing: grayscale; - - 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; - - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ - -webkit-appearance: button; - - border-style: solid; - - transition: - background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, - border-color var(--mod-actionbutton-animation-duration, var(--spectrum-animation-duration-100)) ease-in-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; - - min-inline-size: var(--spectrum-actionbutton-min-width); + min-inline-size: var(--mod-actionbutton-min-width, var(--spectrum-actionbutton-min-width)); block-size: var(--mod-actionbutton-height, var(--spectrum-actionbutton-height)); + line-height: var(--mod-actionbutton-line-height, var(--spectrum-actionbutton-line-height)); - border-radius: var(--spectrum-actionbutton-border-radius); + border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius)); border-width: var(--spectrum-actionbutton-border-width); + border-color: var(--highcontrast-actionbutton-border-color, var(--spectrum-actionbutton-border-color)); + border-style: solid; - gap: calc(var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)) + (var(--spectrum-actionbutton-edge-to-text) - var(--spectrum-actionbutton-edge-to-visual-only))); - - /* Start with text-only padding */ - padding-inline: var(--spectrum-actionbutton-edge-to-text); - - background: var(--spectrum-actionbutton-background-color-default); - border-color: var(--spectrum-actionbutton-border-color-default); - color: var(--spectrum-actionbutton-content-color-default); - - &::after { - position: absolute; - inset: 0; - - margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1); - - border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius); + gap: var(--mod-actionbutton-text-to-visual, var(--spectrum-actionbutton-text-to-visual)); + padding-inline: calc(var(--mod-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--spectrum-actionbutton-border-width)); - transition: box-shadow var(--spectrum-actionbutton-animation-duration) ease-in-out; - - pointer-events: none; - content: ""; - } + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default))); &:hover { - background: var(--spectrum-actionbutton-background-color-hover); - border-color: var(--spectrum-actionbutton-border-color-hover); - color: var(--spectrum-actionbutton-content-color-hover); - } - - /* Fix Firefox */ - &::-moz-focus-inner { - margin-block-start: -2px; - margin-block-end: -2px; - padding: 0; - border: 0; - - /* Remove the inner border and padding for button in Firefox. */ - border-style: none; + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover))); } - &:focus, &:focus-visible { - /* kill the default ring */ - box-shadow: none; - outline: none; - } - - &:focus-visible { - background: var(--spectrum-actionbutton-background-color-focus); - border-color: var(--spectrum-actionbutton-border-color-focus); - color: var(--spectrum-actionbutton-content-color-focus); - - &::after { - box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--spectrum-actionbutton-focus-indicator-color); - } + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus))); } &:active { - background: var(--spectrum-actionbutton-background-color-down); - border-color: var(--spectrum-actionbutton-border-color-down); - color: var(--spectrum-actionbutton-content-color-down); + background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))); + color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))); + transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:disabled, &.is-disabled { - cursor: default; - - background: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); - border-color: var(--highcontrast-actionbutton-border-color-disabled, var(--mod-actionbutton-border-color-disabled, var(--spectrum-actionbutton-border-color-disabled))); + background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))); color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))); } } a.spectrum-ActionButton { - /* Make link text not selectable */ - user-select: none; - - /* stylelint-disable-next-line property-no-vendor-prefix -- Remove appearance for clickable types in iOS and Safari. */ - -webkit-appearance: none; + @extend %spectrum-AnchorButton; } -/* Nested sub-component: Icon */ .spectrum-ActionButton-icon { - flex-shrink: 0; + @extend %spectrum-ButtonIcon; inline-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); block-size: var(--mod-actionbutton-icon-size, var(--spectrum-actionbutton-icon-size)); - max-block-size: 100%; - - /* adjust icon positioning to match UI kit */ - margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual) - var(--spectrum-actionbutton-edge-to-text)); - margin-inline-end: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); - color: inherit; - - /* Augment the margin correction for the icon only scenario */ - .spectrum-ActionButton-hold + &, - &:only-child { - margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); - } } -.spectrum-ActionButton-label { - align-self: center; - justify-self: center; +/* Icon and label text */ +.spectrum-ActionButton:has(.spectrum-ActionButton-icon) { + padding-inline-start: calc(var(--mod-actionbutton-edge-to-visual, var(--spectrum-actionbutton-edge-to-visual)) - var(--spectrum-actionbutton-border-width)); +} - /* Fixes horizontal alignment of text in anchor buttons */ - text-align: center; +/* Icon only */ +.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label)) { + padding-inline: calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only)) - var(--spectrum-actionbutton-border-width)); +} +.spectrum-ActionButton-label { + @extend %spectrum-ButtonLabel; pointer-events: none; - line-height: var(--spectrum-actionbutton-height); - font-size: var(--spectrum-actionbutton-font-size); + font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size)); + font-weight: var(--mod-actionbutton-font-weight, var(--spectrum-actionbutton-font-weight)); + font-style: var(--mod-actionbutton-font-style, var(--spectrum-actionbutton-font-style)); white-space: nowrap; color: var(--mod-actionbutton-label-color, inherit); text-overflow: ellipsis; overflow: hidden; - - &:empty { - display: none; - } } .spectrum-ActionButton-hold { position: absolute; - inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); - inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width)); - + inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); + inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width)); color: inherit; - - transform: var(--spectrum-logical-rotation,); + transform: var(--spectrum-logical-rotation); } -.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, -.spectrum-ActionButton-icon:only-child { - /* Augment the margin correction for the icon only scenario */ - margin-inline-start: calc(var(--spectrum-actionbutton-edge-to-visual-only) - var(--spectrum-actionbutton-edge-to-text)); +/* Focus indicator */ +.spectrum-ActionButton { + transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + + &::after { + position: absolute; + inset: 0; + margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1); + border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius)); + transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out; + pointer-events: none; + content: ""; + } + + &:focus-visible { + box-shadow: none; + outline: none; + + &::after { + box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))); + } + } } @media (forced-colors: active) { .spectrum-ActionButton { + /** + * Default + * - Uses "Button*" system color pairings. + * - Focus indicator is outside the element and should contrast with its background (default of Canvas). + */ + --highcontrast-actionbutton-border-color: ButtonBorder; + --highcontrast-actionbutton-background-color-default: ButtonFace; + --highcontrast-actionbutton-content-color-default: ButtonText; + + --highcontrast-actionbutton-background-color-disabled: ButtonFace; + --highcontrast-actionbutton-content-color-disabled: GrayText; + + --highcontrast-actionbutton-focus-indicator-color: CanvasText; + + /** + * Avoid performance and rendering issues with transitions between system colors. + * Fixes bug in Windows High Contrast where border flashes the wrong color after hover (quiet). + */ + --highcontrast-actionbutton-animation-duration: 0; + &::after { - /* make sure focus indicator renders */ + /* Make sure the box-shadow for the focus indicator renders. */ forced-color-adjust: none; } - &.is-selected { - --highcontrast-actionbutton-background-color-default: Highlight; - --highcontrast-actionbutton-background-color-hover: Highlight; - --highcontrast-actionbutton-background-color-focus: Highlight; - --highcontrast-actionbutton-background-color-down: Highlight; - --highcontrast-actionbutton-background-color-disabled: ButtonFace; + .spectrum-ActionButton-icon, + .spectrum-ActionButton-hold, + .spectrum-ActionButton-label { + /* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */ + forced-color-adjust: none; + } - --highcontrast-actionbutton-border-color-default: HighlightText; - --highcontrast-actionbutton-border-color-hover: HighlightText; - --highcontrast-actionbutton-border-color-focus: HighlightText; - --highcontrast-actionbutton-border-color-down: HighlightText; - --highcontrast-actionbutton-border-color-disabled: GrayText; + /** + * Quiet + * - Default blends in with background and has no border. + * - Quiet + disabled does not show border unless selected. + */ + &.spectrum-ActionButton--quiet { + --highcontrast-actionbutton-border-color: Canvas; + --highcontrast-actionbutton-background-color-default: Canvas; + --highcontrast-actionbutton-background-color-disabled: Canvas; + --highcontrast-actionbutton-content-color-default: CanvasText; - --highcontrast-actionbutton-content-color-default: HighlightText; - --highcontrast-actionbutton-content-color-hover: HighlightText; - --highcontrast-actionbutton-content-color-focus: HighlightText; - --highcontrast-actionbutton-content-color-down: HighlightText; - --highcontrast-actionbutton-content-color-disabled: GrayText; - - .spectrum-ActionButton-icon, - .spectrum-ActionButton-hold, - .spectrum-ActionButton-label { - /* ensure custom text colors from above get applied */ - /* it seems like this shouldn't have to be done, but colors are wrong without it */ - forced-color-adjust: none; + &:disabled:not(.is-selected) { + --highcontrast-actionbutton-border-color: Canvas; } } + + /* Interaction shows a change in border color. */ + &:hover, + &:active, + &:focus-visible { + --highcontrast-actionbutton-border-color: Highlight; + } + + /* Selected always shows as a solid highlighted color. */ + &.is-selected { + --highcontrast-actionbutton-border-color: Highlight; + --highcontrast-actionbutton-background-color-default: Highlight; + --highcontrast-actionbutton-content-color-default: HighlightText; + } + + /* Disabled has a GrayText border and content color. */ + &:disabled { + --highcontrast-actionbutton-border-color: GrayText; + } } } diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index a08f0f7bbfc..e1bd38463d7 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -1,22 +1,18 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; -import { Sizes } from "@spectrum-css/preview/decorators"; +import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { ActionButtonGroup } from "./actionbutton.test.js"; -import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js"; +import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js"; /** * The action button component represents an action a user can take. * * ## Usage notes * - * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup. If an icon and a label are both used, ensure that the element with the `.spectrum-ActionButton-label` class comes after the `.spectrum-Icon` element. - * - * If the hold icon is used, ensure that the element with the `.spectrum-ActionButton-hold` class comes before the `.spectrum-Icon` element. - * - * When using `.spectrum-ActionButton--staticWhite` or `.spectrum-ActionButton--staticBlack`, use the `--mod-actionbutton-content-color-default` custom property to set the text color when selected. + * For action buttons that only contain an icon with no label, do not include the element with the `.spectrum-ActionButton-label` class in the markup. */ export default { title: "Action button", @@ -25,6 +21,7 @@ export default { size: size(["xs", "s", "m", "l", "xl"]), iconName: { ...(IconStories?.argTypes?.iconName ?? {}), + name: "Workflow icon", if: false, }, label: { @@ -37,9 +34,15 @@ export default { control: { type: "text" }, }, isQuiet, - isEmphasized, + isEmphasized: { + ...isEmphasized, + if: { arg: "staticColor", truthy: false }, + }, isDisabled, - isSelected, + isSelected: { + ...isSelected, + description: "An optional state used when treating the action button as a toggle.", + }, isHovered, isFocused, isActive, @@ -63,7 +66,10 @@ export default { control: "select", options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"], }, - staticColor, + staticColor: { + ...staticColor, + if: { arg: "isEmphasized", truthy: false }, + }, }, args: { rootClass: "spectrum-ActionButton", @@ -88,6 +94,9 @@ export default { type: "figma", url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=702-2877", }, + downState: { + selectors: [".spectrum-ActionButton:not(:disabled)"], + }, packageJson, metadata, docs: { @@ -96,6 +105,9 @@ export default { }, } }, + decorators: [ + withDownStateDimensionCapture, + ], }; export const Default = ActionButtonGroup.bind({}); @@ -106,7 +118,9 @@ Default.tags = ["!autodocs"]; /** * Action buttons should always have a label, unless they are only using an icon that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text. * - * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the label will appear in a tooltip on hover. + * The label can be hidden to create an icon-only action button. If the label is hidden, an icon is required, and the implementation should show the label with a tooltip on hover. + * + * Action buttons can be used as toggles instead of for taking direct action. The optional "selected" state displayed below is used for when the action button is toggleable. */ export const Standard = TreatmentTemplate.bind({}); Standard.args = Default.args; @@ -117,7 +131,9 @@ Standard.parameters = { Standard.storyName = "Default"; /** - * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. This is optimal for when the selection should call attention, such as within a tool bar. + * The emphasized action button has a blue background for its selected state in order to provide a visual prominence. + * This is optimal for when the selection should call attention, such as within a tool bar. + * For this variant, the `.spectrum-ActionButton--emphasized` class is applied to `.spectrum-ActionButton`. */ export const Emphasized = TreatmentTemplate.bind({}); Emphasized.tags = ["!dev"]; @@ -130,9 +146,6 @@ Emphasized.parameters = { }, }; -/** - * Adding the `.spectrum-ActionButton--emphasized` class to a quiet action button can be effective in calling attention. - */ export const EmphasizedQuiet = TreatmentTemplate.bind({}); EmphasizedQuiet.tags = ["!dev"]; EmphasizedQuiet.args = { @@ -144,7 +157,7 @@ EmphasizedQuiet.parameters = { disableSnapshot: true, }, }; -EmphasizedQuiet.storyName = "Emphasized (quiet)"; +EmphasizedQuiet.storyName = "Quiet, emphasized"; /** * Quiet action buttons have no visible background until they’re interacted with. This style works best when a clear layout (vertical stack, table, grid) makes it easy to parse the buttons. Too many quiet components in a small space can be hard to read. @@ -161,7 +174,10 @@ Quiet.parameters = { }; /** - * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a short amount of time can reveal a popover menu, which can be used, for example, to switch between related actions. Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup. + * An action button can have a hold icon (a small corner triangle). This icon indicates that holding down the action button for a + * short amount of time can reveal a [popover](/docs/components-popover--docs) menu, which can be used, for example, to switch + * between related actions. Note that this popover menu is not demonstrated here—this would be handled by the implementation. + * Because of the way padding is calculated, the hold icon must be placed before the workflow icon in the markup. */ export const HoldIcon = IconOnlyOption.bind({}); HoldIcon.tags = ["!dev"]; @@ -190,6 +206,14 @@ StaticWhiteQuiet.parameters = { chromatic: { disableSnapshot: true } }; +/** + * When an action button needs to be placed on top of a color background or a visual, use the static color + * option. Use static black on light color or image backgrounds, and static white on dark color or image + * backgrounds, regardless of the color theme. For more info, see the + * [design guidelines](https://spectrum.adobe.com/page/action-button/#Static-color). + * + * Emphasized is not supported for the static black and static white variants. + */ export const StaticBlackDocs = TreatmentTemplate.bind({}); StaticBlackDocs.tags = ["!dev"]; StaticBlackDocs.args = { @@ -226,6 +250,28 @@ Sizing.parameters = { chromatic: { disableSnapshot: true }, }; +/** + * When the action button text is too long for the available horizontal space, it truncates at the end. + * To demonstrate what this looks like, this example sets a maximum width on the button. + * + * Implementations should also reveal the full text on hover, per this component's + * [design guidelines on text overflow](https://spectrum.adobe.com/page/action-button/#Text-overflow). + * This is not demonstrated here. + */ +export const TextOverflowBehavior = Template.bind({}); +TextOverflowBehavior.tags = ["!dev"]; +TextOverflowBehavior.args = { + label: "This is extra long text that will cause text truncation", + customStyles: { + "max-inline-size": "120px", + }, +}; +TextOverflowBehavior.parameters = { + chromatic: { + disableSnapshot: true, + }, +}; + // ********* VRT ONLY ********* // export const WithForcedColors = ActionButtonGroup.bind({}); WithForcedColors.args = Default.args; diff --git a/components/actionbutton/stories/actionbutton.test.js b/components/actionbutton/stories/actionbutton.test.js index fb37fdc910f..4a26724f80b 100644 --- a/components/actionbutton/stories/actionbutton.test.js +++ b/components/actionbutton/stories/actionbutton.test.js @@ -62,11 +62,6 @@ export const ActionButtonGroup = Variants({ testHeading: "Static black", staticColor: "black", }, - { - testHeading: "Static black - emphasized", - staticColor: "black", - isEmphasized: true, - }, { testHeading: "Static black - quiet", staticColor: "black", @@ -76,11 +71,6 @@ export const ActionButtonGroup = Variants({ testHeading: "Static white", staticColor: "white", }, - { - testHeading: "Static white - emphasized", - staticColor: "white", - isEmphasized: true, - }, { testHeading: "Static white - quiet", staticColor: "white", diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 3b3cb8930c2..942c3bccefa 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -67,7 +67,6 @@ export const Template = ({ role = "button", } = {}, context = {}) => { const { updateArgs } = context; - return html`