From 2cffb8d70c397accfef4f9c793253ec52b1e91d0 Mon Sep 17 00:00:00 2001 From: Jason Baker Date: Thu, 13 Aug 2026 16:55:27 -0700 Subject: [PATCH 01/15] feat(type): add data-attribute theme scoping for type custom properties AB#1612078 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add data-attribute theme scoping for WCSS type custom properties, mirroring AuroDesignTokens' `[data-aag-theme="aag-theme-"]` convention (additive; `:root` output retained, so existing typography rendering is unchanged). - Generate `$wcss-theme-codes` at build time from design-tokens' THEME_DEFINITIONS via scripts/theme-codes.build.mjs (git-ignored partial), keeping codes drift-free. - Add `wcss-type-scope-selector()` and `generate-multi-theme-type-css-vars` so each bundle emits its namesake theme under `:root` + attributes and every other theme under attributes only, enabling runtime theme switching within one stylesheet. - Emit per-theme bundles to dist/bundled/type/themes/*.css and make each *.global.css multi-theme; add sass-true spec tests/typeThemeScoping.spec.scss. - Remove the Auro 2 theme entirely via a shared scripts/excluded-themes.mjs filter and deletion of its source, and override Auro 1's emitted code to `atm`. See post-mortem docs/post-mortem/1612078.md (lines 27–66) for the root cause and the fix. Co-authored-by AI: Claude Opus 4.8 --- .gitignore | 3 + docs/index.html | 6 +- docs/post-mortem/1612078.md | 201 +++++ package-lock.json | 769 ++++++++++-------- package.json | 26 +- scripts/excluded-themes.mjs | 23 + scripts/theme-codes.build.mjs | 69 ++ scripts/theme.global.css.config.mjs | 3 +- scripts/type.classes.css.build.mjs | 32 +- src/bundled/themes/theme.global.template.scss | 9 +- .../type/themes/_all-theme-configs.scss | 48 ++ src/bundled/type/themes/alaska-classic.scss | 14 + .../type/themes/alaska-classic/accent.scss | 8 - .../type/themes/alaska-classic/body.scss | 8 - .../type/themes/alaska-classic/display.scss | 8 - .../type/themes/alaska-classic/heading.scss | 8 - src/bundled/type/themes/alaska.scss | 14 + src/bundled/type/themes/alaska/accent.scss | 8 - src/bundled/type/themes/alaska/body.scss | 8 - src/bundled/type/themes/alaska/display.scss | 8 - src/bundled/type/themes/alaska/heading.scss | 8 - src/bundled/type/themes/atmos.scss | 14 + src/bundled/type/themes/auro-1/accent.scss | 8 - src/bundled/type/themes/auro-1/body.scss | 8 - src/bundled/type/themes/auro-1/display.scss | 8 - src/bundled/type/themes/auro-1/heading.scss | 8 - src/bundled/type/themes/auro-2/accent.scss | 8 - src/bundled/type/themes/auro-2/body.scss | 8 - src/bundled/type/themes/auro-2/display.scss | 8 - src/bundled/type/themes/auro-2/heading.scss | 8 - src/bundled/type/themes/hawaiian.scss | 14 + src/bundled/type/themes/hawaiian/accent.scss | 8 - src/bundled/type/themes/hawaiian/body.scss | 8 - src/bundled/type/themes/hawaiian/display.scss | 8 - src/bundled/type/themes/hawaiian/heading.scss | 8 - src/config/_index.scss | 3 +- src/config/atmos/base/index.scss | 5 + src/config/{auro-1 => atmos}/index.scss | 0 src/config/{auro-1 => atmos}/type/accent.scss | 2 +- src/config/{auro-2 => atmos}/type/body.scss | 2 +- .../{auro-2 => atmos}/type/display.scss | 2 +- .../{auro-2 => atmos}/type/heading.scss | 2 +- src/config/{auro-1 => atmos}/type/index.scss | 2 +- src/config/auro-1/base/index.scss | 5 - src/config/auro-1/type/body.scss | 58 -- src/config/auro-1/type/display.scss | 52 -- src/config/auro-1/type/heading.scss | 57 -- src/config/auro-2/base/index.scss | 4 - src/config/auro-2/index.scss | 6 - src/config/auro-2/type/accent.scss | 77 -- src/config/auro-2/type/index.scss | 7 - src/essentials/themes/_auro-2.scss | 2 - src/fonts/themes/_auro-1.scss | 2 +- src/fonts/themes/_auro-2.scss | 17 - src/type/mixins/_theme-generator.scss | 2 +- src/type/mixins/_type-generator.scss | 52 +- src/type/themes/auro-1/index.scss | 12 +- src/type/themes/auro-2/index.scss | 10 - tests/typeThemeScoping.spec.scss | 37 + 59 files changed, 973 insertions(+), 850 deletions(-) create mode 100644 docs/post-mortem/1612078.md create mode 100644 scripts/excluded-themes.mjs create mode 100644 scripts/theme-codes.build.mjs create mode 100644 src/bundled/type/themes/_all-theme-configs.scss create mode 100644 src/bundled/type/themes/alaska-classic.scss delete mode 100644 src/bundled/type/themes/alaska-classic/accent.scss delete mode 100644 src/bundled/type/themes/alaska-classic/body.scss delete mode 100644 src/bundled/type/themes/alaska-classic/display.scss delete mode 100644 src/bundled/type/themes/alaska-classic/heading.scss create mode 100644 src/bundled/type/themes/alaska.scss delete mode 100644 src/bundled/type/themes/alaska/accent.scss delete mode 100644 src/bundled/type/themes/alaska/body.scss delete mode 100644 src/bundled/type/themes/alaska/display.scss delete mode 100644 src/bundled/type/themes/alaska/heading.scss create mode 100644 src/bundled/type/themes/atmos.scss delete mode 100644 src/bundled/type/themes/auro-1/accent.scss delete mode 100644 src/bundled/type/themes/auro-1/body.scss delete mode 100644 src/bundled/type/themes/auro-1/display.scss delete mode 100644 src/bundled/type/themes/auro-1/heading.scss delete mode 100644 src/bundled/type/themes/auro-2/accent.scss delete mode 100644 src/bundled/type/themes/auro-2/body.scss delete mode 100644 src/bundled/type/themes/auro-2/display.scss delete mode 100644 src/bundled/type/themes/auro-2/heading.scss create mode 100644 src/bundled/type/themes/hawaiian.scss delete mode 100644 src/bundled/type/themes/hawaiian/accent.scss delete mode 100644 src/bundled/type/themes/hawaiian/body.scss delete mode 100644 src/bundled/type/themes/hawaiian/display.scss delete mode 100644 src/bundled/type/themes/hawaiian/heading.scss create mode 100644 src/config/atmos/base/index.scss rename src/config/{auro-1 => atmos}/index.scss (100%) rename src/config/{auro-1 => atmos}/type/accent.scss (98%) rename src/config/{auro-2 => atmos}/type/body.scss (98%) rename src/config/{auro-2 => atmos}/type/display.scss (97%) rename src/config/{auro-2 => atmos}/type/heading.scss (97%) rename src/config/{auro-1 => atmos}/type/index.scss (53%) delete mode 100644 src/config/auro-1/base/index.scss delete mode 100644 src/config/auro-1/type/body.scss delete mode 100644 src/config/auro-1/type/display.scss delete mode 100644 src/config/auro-1/type/heading.scss delete mode 100644 src/config/auro-2/base/index.scss delete mode 100644 src/config/auro-2/index.scss delete mode 100644 src/config/auro-2/type/accent.scss delete mode 100644 src/config/auro-2/type/index.scss delete mode 100644 src/essentials/themes/_auro-2.scss delete mode 100644 src/fonts/themes/_auro-2.scss delete mode 100644 src/type/themes/auro-2/index.scss create mode 100644 tests/typeThemeScoping.spec.scss diff --git a/.gitignore b/.gitignore index 39d4bd69..0ddc066d 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,6 @@ example/prodBuild/ example/tokensBuild/ sass-lint.html sassdoc + +# Generated by scripts/theme-codes.build.mjs +src/type/mixins/_theme-codes.scss diff --git a/docs/index.html b/docs/index.html index 5bfa514e..ef804fcc 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,5 +1,5 @@ -@aurodesignsystem/webcorestylesheets - v11.1.2