build: improving theming approach

adobe · Jul 31, 2024 · 0c73b2c · 0c73b2c
1 parent 8e772ef
commit 0c73b2c
Show file tree

Hide file tree

Showing 428 changed files with 1,180 additions and 20,295 deletions.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -88,9 +88,9 @@
     "@spectrum-css/tokens": "14.2.0",
     "@spectrum-css/ui-icons": "1.1.2",
     "@spectrum-tools/gh-action-file-diff": "2.0.6",
-    "postcss-add-theming-layer": "2.1.1-s2-foundations.0",
-    "postcss-property-rollup": "2.0.1",
-    "postcss-rgb-mapping": "2.0.0",
+    "@spectrum-tools/postcss-add-theming-layer": "2.1.1-s2-foundations.0",
+    "@spectrum-tools/postcss-property-rollup": "2.0.1",
+    "@spectrum-tools/postcss-rgb-mapping": "2.0.0",
     "@spectrum-tools/stylelint-no-missing-var": "2.0.0",
     "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.0",
     "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.0",

diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,8 @@
 dist
 dist-site
 
-tokens/dist/**
+## Keep the tokens rollup file as a sanity check for PRs
 !tokens/dist/index.css
-!tokens/dist/css/*.css
-!tokens/dist/css/components/**/*.css
 
 # Not committing the map assets, these are dev-only
 *.map

diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js
@@ -7,6 +7,8 @@ import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
+import "../themes/express.css";
+import "../themes/spectrum.css";
 
 export const AccordionItem = ({
 	heading,

diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css
@@ -11,148 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./spectrum-two.css";
+
 @container style(--system: legacy) {
 	.spectrum-Accordion {
-		--spectrum-accordion-item-height: var(--spectrum-component-height-200);
-		--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width);
-		--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100);
-		--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text);
-		--spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-accordion-edge-to-disclosure-indicator);
-		--spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text);
-		--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-medium);
-		--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-medium);
-		--spectrum-accordion-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-		--spectrum-accordion-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
-		--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100);
-		--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
-		--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
-		--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-75);
-
-		/* Text header */
-		--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
-		--spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight);
-		--spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style);
-		--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300);
-		--spectrum-accordion-item-header-line-height: 1.25;
-
-		/* Text body */
-		--spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack);
-		--spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
-		--spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style);
-		--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s);
-		--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
-
-		/* Colors */
-		--spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
-		--spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
-		--spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
-		--spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
-
-		/* Label */
-		--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
-		--spectrum-accordion-item-header-color-hover: var(--spectrum-neutral-content-color-hover);
-		--spectrum-accordion-item-header-color-down: var(--spectrum-neutral-content-color-down);
-		--spectrum-accordion-item-header-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
-
-		--spectrum-accordion-item-header-disabled-color: var(--spectrum-disabled-content-color);
-		--spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color);
-
-		/* Body */
-		--spectrum-accordion-item-content-color: var(--spectrum-body-color);
-
-		/* Focus indicator */
-		--spectrum-accordion-focus-indicator-color: var(--spectrum-focus-indicator-color);
-
 		/* Divider */
 		--spectrum-accordion-divider-color: var(--spectrum-gray-200);
-
-		&:dir(rtl) {
-			--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-		}
-
-		&:lang(ja),
-		&:lang(zh),
-		&:lang(ko) {
-			--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
-			--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
-		}
-
-		&.spectrum-Accordion--compact {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-100);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
-
-			&.spectrum-Accordion--sizeS {
-				--spectrum-accordion-item-height: var(--spectrum-component-height-75);
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
-			}
-
-			&.spectrum-Accordion--sizeL {
-				--spectrum-accordion-item-height: var(--spectrum-component-height-200);
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
-			}
-
-			&.spectrum-Accordion--sizeXL {
-				--spectrum-accordion-item-height: var(--spectrum-component-height-300);
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
-			}
-		}
-
-		&.spectrum-Accordion--spacious {
-			--spectrum-accordion-item-header-line-height: 1.278;
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
-
-			&.spectrum-Accordion--sizeS {
-				--spectrum-accordion-item-header-line-height: 1.25;
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-small-top-to-text-spacious);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
-			}
-
-			&.spectrum-Accordion--sizeL {
-				--spectrum-accordion-item-header-line-height: 1.273;
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
-			}
-
-			&.spectrum-Accordion--sizeXL {
-				--spectrum-accordion-item-header-line-height: 1.25;
-				--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
-				--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
-			}
-		}
-
-		&.spectrum-Accordion--sizeS {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-100);
-			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-75);
-			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-50);
-			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200);
-			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-small);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-small);
-		}
-
-		&.spectrum-Accordion--sizeL {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-300);
-			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-200);
-			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-100);
-			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500);
-			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-large);
-		}
-
-		&.spectrum-Accordion--sizeXL {
-			--spectrum-accordion-item-height: var(--spectrum-component-height-400);
-			--spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-300);
-			--spectrum-accordion-component-edge-to-text: var(--spectrum-component-edge-to-text-200);
-			--spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700);
-			--spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l);
-			--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-regular-extra-large);
-			--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-regular-extra-large);
-		}
 	}
 }
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
@@ -7,6 +7,8 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 
 import "../index.css";
+import "../themes/express.css";
+import "../themes/spectrum.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionBar",

diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css
@@ -11,47 +11,11 @@
  * governing permissions and limitations under the License.
  */
 
+@import "./spectrum-two.css";
+
 @container style(--system: legacy) {
 	.spectrum-ActionBar {
-		--spectrum-actionbar-height: var(--spectrum-action-bar-height);
-		--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
-
-		/* item counter field label */
-		--spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100);
-		--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
-		--spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);
-
-		/* cjk language support for item counter */
-		--spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
-		/* colors - applied to popover */
 		--spectrum-actionbar-popover-background-color: var(--spectrum-gray-50);
 		--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);
-
-		/* emphasized variation colors */
-		--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
-		--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
-
-		/* spacing of action bar bottom and horizontal outer edge */
-		--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);
-
-		/* spacing of close button */
-		--spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
-		--spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
-		--spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);
-
-		/* spacing of item counter field label */
-		--spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
-		--spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);
-
-		/* spacing of action group */
-		--spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
-		--spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);
-
-		/* drop shadow */
-		--spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
-		--spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
-		--spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
-		--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
 	}
 }
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
@@ -7,6 +7,8 @@ import { when } from "lit/directives/when.js";
 import { capitalize, lowerCase } from "lodash-es";
 
 import "../index.css";
+import "../themes/express.css";
+import "../themes/spectrum.css";
 
 /**
  * @todo load order should not influence the icon size but it is; fix this

diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css
@@ -51,7 +51,6 @@
 		--spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
 		--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
 
-
 		&.spectrum-ActionButton--quiet {
 			--spectrum-actionbutton-background-color-default: transparent;
 			--spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100);