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

Author: pfulton

.github/actions/file-diff/CHANGELOG.md

@@ -16,65 +16,70 @@ All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 <a name="2.0.5"></a>
-##2.0.5
-🗓
-2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.4...@spectrum-tools/gh-action-file-diff@2.0.5)
+
+## 2.0.5
+
+🗓 2024-03-07 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.4...@spectrum-tools/gh-action-file-diff@2.0.5)
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="2.0.4"></a>
-##2.0.4
-🗓
-2024-02-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.3...@spectrum-tools/gh-action-file-diff@2.0.4)
+
+## 2.0.4
+
+🗓 2024-02-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.3...@spectrum-tools/gh-action-file-diff@2.0.4)
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="2.0.3"></a>
-##2.0.3
-🗓
-2024-02-06
+
+## 2.0.3
+
+🗓 2024-02-06
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="2.0.2"></a>
-##2.0.2
-🗓
-2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.1...@spectrum-tools/gh-action-file-diff@2.0.2)
+
+## 2.0.2
+
+🗓 2024-01-29 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.1...@spectrum-tools/gh-action-file-diff@2.0.2)
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="2.0.1"></a>
-##2.0.1
-🗓
-2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.0...@spectrum-tools/gh-action-file-diff@2.0.1)
+
+## 2.0.1
+
+🗓 2024-01-16 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@2.0.0...@spectrum-tools/gh-action-file-diff@2.0.1)
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="2.0.0"></a>
-#2.0.0
-🗓
-2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@1.0.2...@spectrum-tools/gh-action-file-diff@2.0.0)
 
-\*feat(icon,ui-icons)!: migrate the icon compiler to a distinct package (#2343)([d73d594](https://github.com/adobe/spectrum-css/commit/d73d594)), closes[#2343](https://github.com/adobe/spectrum-css/issues/2343)
+## 2.0.0
 
-    	###
-    	🛑 BREAKING CHANGES
+🗓 2023-12-12 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-tools/gh-action-file-diff@1.0.2...@spectrum-tools/gh-action-file-diff@2.0.0)
 
-    		*
-    		 - @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.
+- feat(icon,ui-icons)!: migrate the icon compiler to a distinct package (#2343)([d73d594](https://github.com/adobe/spectrum-css/commit/d73d594)), closes[#2343](https://github.com/adobe/spectrum-css/issues/2343)
+
+### 🛑 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="1.0.2"></a>
-##1.0.2
-🗓
-2023-11-15
+
+## 1.0.2
+
+🗓 2023-11-15
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff
 
 <a name="1.0.1"></a>
-##1.0.1
-🗓
-2023-11-13
+
+## 1.0.1
+
+🗓 2023-11-13
 
 **Note:** Version bump only for package @spectrum-tools/gh-action-file-diff

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

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

.storybook/guides/develop.mdx

@@ -31,35 +31,25 @@ 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.
 - `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 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 = (
 	{

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