feat: migration of tokens to spectrum 2

Expanding the existing themes system to support the new S2 mappings.

---
Co-authored-by: castastrophe <[email protected]>
Co-authored-by: Patrick Fulton <[email protected]>
Co-authored-by: Cory Dransfeldt <[email protected]>
Co-authored-by: Aziz Ramos <[email protected]>
Co-authored-by: Josh Winn <[email protected]>
Co-authored-by: Rise Erpelding <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: TarunAdobe <[email protected]>
Co-authored-by: Dragan Eror<[email protected]>

.changeset/honest-bulldogs-flow.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+Update Storybook to leverage the new CSS bundled assets.

.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 |
+| ------------- | ------- | ----- |
+|               |         |       |

.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.

.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.

.github/workflows/lint.yml

@@ -76,23 +76,29 @@ jobs:
               shell: bash
               run: yarn install --immutable
 
+              # Components must be built before linting so that the custom properties are available
+              # in the dependencies for passthrough and token verification
+            - name: Build components & ui-icons
+              shell: bash
+              run: yarn build
+
             - name: Lint component styles
               if: ${{ inputs.styles_added_files != '' || inputs.styles_modified_files != '' }}
-              uses: reviewdog/action-stylelint@v1.28.0
+              uses: reviewdog/action-stylelint@v1.30.0
               with:
-                  fail_on_error: true
+                  fail_level: error
+                  filter_mode: diff_context
                   level: error
                   reporter: github-pr-review
-                  filter_mode: diff_context
                 #   stylelint_input: "components/*/index.css components/*/themes/*.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
                   stylelint_config: stylelint.config.js
 
             - name: Run eslint on packages and stories
-              uses: reviewdog/action-eslint@v1.31.0
+              uses: reviewdog/action-eslint@v1.33.0
               if: ${{ inputs.eslint_added_files != '' || inputs.eslint_modified_files != '' }}
               with:
-                  fail_on_error: true
+                  fail_level: error
                   level: error
                   reporter: github-pr-review
                   filter_mode: diff_context

.github/workflows/release-snapshot.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
       - name: Install Dependencies
         run: yarn install --frozen-lockfile

.github/workflows/release.yml

@@ -5,7 +5,6 @@ on:
     branches:
       - main
       - spectrum-two
-      - s2-foundations-redux
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -20,9 +19,9 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
-      
+
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
 

.gitignore

@@ -1,8 +1,7 @@
 dist
+!dist/metadata.json
 !tokens/dist/index.css
 !tokens/dist/css/*.css
-!tokens/dist/css/express/*.css
-!tokens/dist/css/spectrum/*.css
 
 # Not committing the map assets, these are dev-only
 *.map

.storybook/assets/base.css

@@ -30,10 +30,14 @@ body {
 
 .spectrum {
 	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-1-color);
+	background-color: var(--spectrum-background-base-color);
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
+.spectrum.spectrum--legacy {
+	background-color: var(--spectrum-background-layer-1-color);
+}
+
 /* Hide the SVG elements that only include references */
 svg:has(symbol):not(:has(use)) {
 	display: none;

.storybook/assets/index.css

@@ -26,9 +26,6 @@ body {
 	font-family: var(--spectrum-font-family);
 	font-size: var(--spectrum-font-size);
 	font-style: var(--spectrum-font-style);
-
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-2-color);
 }
 
 body:lang(ar) {
@@ -72,15 +69,9 @@ div.sb-bar > div > div > span:first-child {
 	display: none;
 }
 
-div.sb-bar > div > div > div > button {
-	background-color: white !important;
-}
-
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
-	color: rgb(34, 34, 34);
-	background-color: rgb(255, 255, 255);
 }
 
 .docblock-argstable-body td > span:has(select),
@@ -128,5 +119,4 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
-
 /* stylelint-enable selector-class-pattern */

.storybook/decorators/context.js

@@ -1,6 +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/index.css?inline";
 
 /**
@@ -18,7 +19,7 @@ export const withContextWrapper = makeDecorator({
 			} = {},
 			globals: {
 				color = "light",
-				context = "legacy",
+				context = "spectrum",
 				scale = "medium",
 				testingPreview = false,
 			} = {},
@@ -44,8 +45,8 @@ export const withContextWrapper = makeDecorator({
 		};
 
 		useEffect(() => {
-			const isDocs = viewMode === "docs";
 			const isTesting = testingPreview;
+			const isDocs = viewMode === "docs";
 			const isRaw = Boolean(context === "raw");
 			const isModern = Boolean(context === "spectrum");
 			const isExpress = Boolean(context === "express");
@@ -58,6 +59,9 @@ export const withContextWrapper = makeDecorator({
 				document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 			}
 
+			// Start by attaching the appropriate tokens to the container
+			toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw);
+
 			for (const container of fetchContainers(id, isDocs, isTesting)) {
 				// Reset the context to the original values
 				color = original.color;
@@ -120,7 +124,7 @@ export const withContextWrapper = makeDecorator({
 				}
 			}
 
-		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
+		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, legacyTokens, staticColorSettings, testingPreview]);
 
 		return StoryFn(data);
 	},