build: remove theme processing, site package; add reporter

adobe · Dec 27, 2024 · e393c32 · e393c32
1 parent c1701e9
commit e393c32
Show file tree

Hide file tree

Showing 281 changed files with 588 additions and 3,400 deletions.
diff --git a/.changeset/pre.json b/.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",

diff --git a/.github/workflows/lint.yml b/.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
 

diff --git a/.storybook/guides/develop.mdx b/.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.
 

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

diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -63,8 +63,5 @@ addons.setConfig({
 	}),
 	sidebar: {
 		showRoots: false,
-		filters: {
-			patterns: (item) => !item.id.includes('forced-colors') && ['is-hidden-story'].every((tag) => !item.tags.includes(tag)),
-		},
 	},
 });
diff --git a/.storybook/modes/index.js b/.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",
 	},
 };

diff --git a/.storybook/package.json b/.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:^",

diff --git a/components/accordion/metadata/metadata.json b/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": []
 }
diff --git a/components/accordion/metadata/mods.md b/components/accordion/metadata/mods.md
diff --git a/components/accordion/package.json b/components/accordion/package.json
@@ -28,6 +28,7 @@
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actionbar/index.css b/components/actionbar/index.css
@@ -24,9 +24,9 @@
 	--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);
+	/* 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);

diff --git a/components/actionbar/metadata/metadata.json b/components/actionbar/metadata/metadata.json
@@ -88,7 +88,6 @@
     "--spectrum-spacing-75",
     "--spectrum-white"
   ],
-  "system-theme": [],
   "passthroughs": [],
   "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
 }
diff --git a/components/actionbar/metadata/mods.md b/components/actionbar/metadata/mods.md
diff --git a/components/actionbar/package.json b/components/actionbar/package.json
@@ -28,6 +28,7 @@
 		"dist/*",
 		"*.md",
 		"package.json",
+		"stories/*",
 		"metadata/*"
 	],
 	"peerDependencies": {

diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css
@@ -13,7 +13,66 @@
 
 @import "@spectrum-css/commons/basebutton.css";
 
+@media (forced-colors: active) {
+	.spectrum-ActionButton {
+		/* force a more visible focus indicator color */
+		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
+
+		&::after {
+			/* make sure focus indicator renders */
+			forced-color-adjust: none;
+		}
+
+		&.is-selected {
+			--highcontrast-actionbutton-background-color-default: Highlight;
+			--highcontrast-actionbutton-background-color-hover: Highlight;
+			--highcontrast-actionbutton-background-color-focus: Highlight;
+			--highcontrast-actionbutton-background-color-down: Highlight;
+			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
+
+			--highcontrast-actionbutton-border-color-default: HighlightText;
+			--highcontrast-actionbutton-border-color-hover: HighlightText;
+			--highcontrast-actionbutton-border-color-focus: HighlightText;
+			--highcontrast-actionbutton-border-color-down: HighlightText;
+			--highcontrast-actionbutton-border-color-disabled: GrayText;
+
+			--highcontrast-actionbutton-content-color-default: HighlightText;
+			--highcontrast-actionbutton-content-color-hover: HighlightText;
+			--highcontrast-actionbutton-content-color-focus: HighlightText;
+			--highcontrast-actionbutton-content-color-down: HighlightText;
+			--highcontrast-actionbutton-content-color-disabled: GrayText;
+
+			.spectrum-ActionButton-icon,
+			.spectrum-ActionButton-hold,
+			.spectrum-ActionButton-label {
+				/* ensure custom text colors from above get applied */
+				/* it seems like this shouldn't have to be done, but colors are wrong without it */
+				forced-color-adjust: none;
+			}
+		}
+	}
+}
+
 .spectrum-ActionButton {
+	--spectrum-actionbutton-background-color-default: var(--spectrum-gray-50);
+	--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+	--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+	--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+	--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100);
+
+	--spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
+	--spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
+	--spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down);
+	--spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
+
+	--spectrum-actionbutton-border-color-default: var(--spectrum-gray-400);
+	--spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500);
+	--spectrum-actionbutton-border-color-down: var(--spectrum-gray-600);
+	--spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500);
+	--spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color);
+
+	--spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50);
+
 	--spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100);
 	--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium);
 	--spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
@@ -45,6 +104,49 @@
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 	}
 
+	&.spectrum-ActionButton--quiet {
+		--spectrum-actionbutton-background-color-default: transparent;
+		--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-actionbutton-background-color-down: var(--spectrum-gray-200);
+		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100);
+	}
+
+	&.spectrum-ActionButton--staticBlack {
+		--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-500);
+		--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-600);
+		--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-700);
+		--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-600);
+
+		--spectrum-actionbutton-background-color-disabled: transparent;
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-200);
+
+		&,
+		&.spectrum-ActionButton--quiet {
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-400);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-500);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-400);
+		}
+	}
+
+	&.spectrum-ActionButton--staticWhite {
+		--spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-500);
+		--spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-600);
+		--spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-700);
+		--spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-600);
+
+		--spectrum-actionbutton-background-color-disabled: transparent;
+		--spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-white-200);
+
+		&,
+		&.spectrum-ActionButton--quiet {
+			--spectrum-actionbutton-background-color-default: transparent;
+			--spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-400);
+			--spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-500);
+			--spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-400);
+		}
+	}
+
 	&.is-selected {
 		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
 		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
@@ -130,46 +232,6 @@
 	--spectrum-actionbutton-edge-to-visual-only: calc(var(--spectrum-component-edge-to-visual-only-300) - var(--spectrum-actionbutton-border-width));
 }
 
-@media (forced-colors: active) {
-	.spectrum-ActionButton {
-		&::after {
-			/* make sure focus indicator renders */
-			forced-color-adjust: none;
-		}
-
-		/* force a more visible focus indicator color */
-		--highcontrast-actionbutton-focus-indicator-color: ButtonText;
-
-		&.is-selected {
-			--highcontrast-actionbutton-background-color-default: Highlight;
-			--highcontrast-actionbutton-background-color-hover: Highlight;
-			--highcontrast-actionbutton-background-color-focus: Highlight;
-			--highcontrast-actionbutton-background-color-down: Highlight;
-			--highcontrast-actionbutton-background-color-disabled: ButtonFace;
-
-			--highcontrast-actionbutton-border-color-default: HighlightText;
-			--highcontrast-actionbutton-border-color-hover: HighlightText;
-			--highcontrast-actionbutton-border-color-focus: HighlightText;
-			--highcontrast-actionbutton-border-color-down: HighlightText;
-			--highcontrast-actionbutton-border-color-disabled: GrayText;
-
-			--highcontrast-actionbutton-content-color-default: HighlightText;
-			--highcontrast-actionbutton-content-color-hover: HighlightText;
-			--highcontrast-actionbutton-content-color-focus: HighlightText;
-			--highcontrast-actionbutton-content-color-down: HighlightText;
-			--highcontrast-actionbutton-content-color-disabled: GrayText;
-
-			.spectrum-ActionButton-icon,
-			.spectrum-ActionButton-hold,
-			.spectrum-ActionButton-label {
-				/* ensure custom text colors from above get applied */
-				/* it seems like this shouldn't have to be done, but colors are wrong without it */
-				forced-color-adjust: none;
-			}
-		}
-	}
-}
-
 .spectrum-ActionButton {
 	@extend %spectrum-BaseButton;
 	position: relative;