build: foundational setup for S2 development

.changeset/pre.json

@@ -0,0 +1,101 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@spectrum-tools/gh-action-file-diff": "2.2.0",
+    "@spectrum-css/preview": "12.0.3",
+    "@spectrum-css/accordion": "7.1.0",
+    "@spectrum-css/actionbar": "10.1.1",
+    "@spectrum-css/actionbutton": "7.1.1",
+    "@spectrum-css/actiongroup": "6.1.0",
+    "@spectrum-css/actionmenu": "7.1.1",
+    "@spectrum-css/alertbanner": "3.1.0",
+    "@spectrum-css/alertdialog": "4.1.0",
+    "@spectrum-css/asset": "7.1.0",
+    "@spectrum-css/assetcard": "5.1.0",
+    "@spectrum-css/assetlist": "8.1.0",
+    "@spectrum-css/avatar": "9.1.0",
+    "@spectrum-css/badge": "6.1.0",
+    "@spectrum-css/breadcrumb": "11.1.0",
+    "@spectrum-css/button": "14.1.1",
+    "@spectrum-css/buttongroup": "9.1.0",
+    "@spectrum-css/calendar": "7.1.0",
+    "@spectrum-css/card": "11.1.0",
+    "@spectrum-css/checkbox": "10.1.0",
+    "@spectrum-css/clearbutton": "7.1.0",
+    "@spectrum-css/closebutton": "6.1.0",
+    "@spectrum-css/coachindicator": "4.1.0",
+    "@spectrum-css/coachmark": "9.1.1",
+    "@spectrum-css/colorarea": "7.1.0",
+    "@spectrum-css/colorhandle": "10.1.0",
+    "@spectrum-css/colorloupe": "7.1.0",
+    "@spectrum-css/colorslider": "8.1.0",
+    "@spectrum-css/colorwheel": "6.1.0",
+    "@spectrum-css/combobox": "4.1.1",
+    "@spectrum-css/commons": "11.0.0",
+    "@spectrum-css/contextualhelp": "5.1.2",
+    "@spectrum-css/datepicker": "4.1.1",
+    "@spectrum-css/dial": "5.1.0",
+    "@spectrum-css/dialog": "12.1.0",
+    "@spectrum-css/divider": "5.1.0",
+    "@spectrum-css/dropindicator": "7.1.0",
+    "@spectrum-css/dropzone": "8.1.0",
+    "@spectrum-css/fieldgroup": "7.1.0",
+    "@spectrum-css/fieldlabel": "10.1.0",
+    "@spectrum-css/floatingactionbutton": "4.1.0",
+    "@spectrum-css/form": "1.1.0",
+    "@spectrum-css/helptext": "7.1.0",
+    "@spectrum-css/icon": "9.1.0",
+    "@spectrum-css/illustratedmessage": "9.1.0",
+    "@spectrum-css/infieldbutton": "6.1.1",
+    "@spectrum-css/inlinealert": "10.1.0",
+    "@spectrum-css/link": "7.1.0",
+    "@spectrum-css/logicbutton": "6.1.0",
+    "@spectrum-css/menu": "9.1.0",
+    "@spectrum-css/meter": "1.1.0",
+    "@spectrum-css/miller": "8.1.0",
+    "@spectrum-css/modal": "7.1.0",
+    "@spectrum-css/opacitycheckerboard": "4.1.0",
+    "@spectrum-css/page": "9.1.0",
+    "@spectrum-css/pagination": "10.1.0",
+    "@spectrum-css/picker": "9.1.2",
+    "@spectrum-css/pickerbutton": "6.1.1",
+    "@spectrum-css/popover": "8.2.0",
+    "@spectrum-css/progressbar": "6.1.0",
+    "@spectrum-css/progresscircle": "5.1.0",
+    "@spectrum-css/radio": "10.1.0",
+    "@spectrum-css/rating": "6.1.0",
+    "@spectrum-css/search": "8.1.0",
+    "@spectrum-css/sidenav": "7.1.0",
+    "@spectrum-css/slider": "6.1.0",
+    "@spectrum-css/splitview": "7.1.0",
+    "@spectrum-css/statuslight": "9.1.0",
+    "@spectrum-css/steplist": "7.1.0",
+    "@spectrum-css/stepper": "7.1.1",
+    "@spectrum-css/swatch": "8.1.1",
+    "@spectrum-css/swatchgroup": "5.1.0",
+    "@spectrum-css/switch": "6.1.0",
+    "@spectrum-css/table": "8.1.0",
+    "@spectrum-css/tabs": "6.1.1",
+    "@spectrum-css/tag": "10.1.0",
+    "@spectrum-css/taggroup": "7.1.0",
+    "@spectrum-css/textfield": "8.1.0",
+    "@spectrum-css/thumbnail": "8.1.0",
+    "@spectrum-css/toast": "11.1.0",
+    "@spectrum-css/tooltip": "7.1.0",
+    "@spectrum-css/tray": "5.1.0",
+    "@spectrum-css/treeview": "12.1.0",
+    "@spectrum-css/typography": "8.1.0",
+    "@spectrum-css/underlay": "6.1.0",
+    "@spectrum-css/well": "7.1.0",
+    "@spectrum-tools/postcss-rgb-mapping": "1.0.0",
+    "@spectrum-tools/stylelint-no-missing-var": "2.0.1",
+    "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2",
+    "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.4",
+    "@spectrum-css/tokens": "16.0.1",
+    "@spectrum-css/bundle": "1.0.0",
+    "@spectrum-css/generator": "4.1.0",
+    "@spectrum-css/ui-icons": "1.1.2"
+  },
+  "changesets": []
+}

.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,45 +13,61 @@ 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:
+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>
-  <!-- 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>
 ```
 
 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.

.github/actions/file-diff/package.json

@@ -22,7 +22,7 @@
     "package.json"
   ],
   "dependencies": {
-    "@actions/artifact": "^2.2.1",
+    "@actions/artifact": "^2.3.1",
     "@actions/core": "^1.11.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.5.0",

.github/workflows/development.yml

@@ -13,7 +13,7 @@ on:
     pull_request:
         branches:
             - main
-            - spectrum-two
+            - spectrum-2
             # Allow us to run tests for PRs updating github actions
             - chore-*ci*
             - chore-*github-actions*
@@ -100,8 +100,6 @@ jobs:
                   files_yaml: |
                       styles:
                         - components/*/index.css
-                        - components/*/themes/spectrum.css
-                        - components/*/themes/express.css
                       eslint:
                         - components/*/stories/*.js
                       mdlint:
@@ -193,7 +191,7 @@ jobs:
         if: contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true)
         uses: ./.github/workflows/vrt.yml
         with:
-            skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
+            skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
         secrets: inherit
 
     # -------------------------------------------------------------

.github/workflows/lint.yml

@@ -102,7 +102,7 @@ jobs:
                   filter_mode: diff_context
                   level: error
                   reporter: github-pr-review
-                #   stylelint_input: "components/*/index.css components/*/themes/*.css"
+                #   stylelint_input: "components/*/index.css"
                   stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}"
                   stylelint_config: "${{ github.workspace }}/stylelint.config.js"
 

.github/workflows/production.yml

@@ -9,7 +9,7 @@ name: Build and verify production
 
 on:
     push:
-        branches: [main, spectrum-two]
+        branches: [main, spectrum-2]
 
 permissions:
     contents: read

.github/workflows/release.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - spectrum-two
+      - spectrum-2
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 

.github/workflows/vrt.yml

@@ -4,6 +4,7 @@ on:
     push:
       branches:
         - main
+        - spectrum-2
         - "!changeset-release/**"
         - "!dependabot/**"
     workflow_dispatch:

.storybook/assets/base.css

@@ -34,9 +34,12 @@ body {
 	-webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
 }
 
-.spectrum.spectrum--legacy {
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-1-color);
+.spectrum .spectrum-examples-static-black {
+	background: var(--spectrum-examples-gradient-static-black);
+}
+
+.spectrum .spectrum-examples-static-white {
+	background: var(--spectrum-examples-gradient-static-white);
 }
 
 /* Hide the SVG elements that only include references */

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

.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 };
 }
 
 /**