build: remove theme processing, site package; add reporter

Author: castastrophe

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

.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,11 +1,13 @@
+
 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");
 
@@ -64,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",
 	},
 };

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": []
 }

components/actionbar/dist/metadata.json

@@ -88,7 +88,6 @@
     "--spectrum-spacing-75",
     "--spectrum-white"
   ],
-  "system-theme": [],
   "passthroughs": [],
   "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
 }

components/actionbar/index.css

@@ -27,6 +27,10 @@
 	--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
 	--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
 
+	/* colors - applied to popover */
+	--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
+	--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
+
 	/* spacing of action bar bottom and horizontal outer edge */
 	--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
 

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,41 +60,32 @@
     "--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",
     "--mod-actionbutton-edge-to-visual-only",
     "--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",
     "--spectrum-action-button-edge-to-hold-icon-extra-small",
     "--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,34 +96,31 @@
     "--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",
     "--spectrum-actionbutton-border-color-focus",
     "--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,13 +150,14 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-50",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--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",
@@ -178,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",
@@ -202,36 +193,41 @@
     "--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",
     "--spectrum-workflow-icon-size-300",
     "--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"
   ]
 }