build: remove theme processing, site package; add reporter

Author: castastrophe

.changeset/pre.json

@@ -89,18 +89,13 @@
     "@spectrum-css/well": "4.1.5-next.2",
     "@spectrum-css/generator": "3.0.0",
     "conventional-changelog-spectrum": "1.0.2",
-    "postcss-combininator": "2.0.0",
-    "postcss-custom-properties-mapping": "2.0.0",
     "@spectrum-tools/stylelint-no-missing-var": "1.3.1",
     "@spectrum-tools/stylelint-no-unknown-custom-properties": "1.3.2",
     "@spectrum-tools/stylelint-no-unused-custom-properties": "1.3.1",
     "@spectrum-tools/documentation": "1.0.0",
     "@spectrum-css/tokens": "14.0.0-next.6",
     "@spectrum-css/ui-icons": "1.1.2",
-    "@spectrum-tools/postcss-add-theming-layer": "0.0.0",
-    "@spectrum-tools/postcss-property-rollup": "0.0.0",
-    "@spectrum-tools/postcss-rgb-mapping": "3.0.0-s2-foundations.0",
-    "@spectrum-tools/theme-alignment": "1.1.0"
+    "@spectrum-tools/postcss-rgb-mapping": "3.0.0-s2-foundations.0"
   },
   "changesets": [
     "chilly-peaches-sniff",

.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: stylelint.config.js
 

.gitignore

@@ -1,6 +1,5 @@
 dist
 !tokens/dist/index.css
-!tokens/dist/css/*.css
 
 # Not committing the map assets, these are dev-only
 *.map

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

.storybook/main.js

@@ -22,7 +22,7 @@ export default {
 		},
 		{
 			directory: "./foundations",
-			files: "*/*.mdx",
+			files: "*/*.@(stories.js|mdx)",
 			titlePrefix: "Foundations",
 		},
 		{

.storybook/manager.js

@@ -1,10 +1,13 @@
 import "@spectrum-css/tokens/dist/index.css";
+
 import { addons } from "@storybook/manager-api";
 import { create } from "@storybook/theming";
-import "./assets/index.css";
+
 import logo from "./assets/logo.svg";
 import pkg from "./package.json";
 
+import "./assets/index.css";
+
 const root = document.body ?? document.documentElement;
 if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 
@@ -63,8 +66,5 @@ addons.setConfig({
 	}),
 	sidebar: {
 		showRoots: false,
-		filters: {
-			patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)),
-		},
 	},
 });

.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",
 	},
 };

.storybook/package.json

@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
-		"@adobe/spectrum-tokens": "13.0.0-beta.52",
+		"@adobe/spectrum-tokens": "13.0.0-beta.55",
 		"@spectrum-css/actionbutton": "workspace:^",
 		"@spectrum-css/button": "workspace:^",
 		"@spectrum-css/table": "workspace:^",

components/accordion/metadata/metadata.json

@@ -198,7 +198,6 @@
     "--spectrum-neutral-content-color-key-focus",
     "--spectrum-sans-font-family-stack"
   ],
-  "system-theme": [],
   "passthroughs": [],
   "high-contrast": []
 }