@solexllc/usx-theme 0.2.0 → 0.2.1

package/README.md

@@ -17,7 +17,7 @@ This package stores platform-agnostic tokens in JSON source files and compiles t
 - `dist/tokens.js`: generated JS export
 - `dist/theme-manifest.json`: generated theme manifest
 - `dist/theme.css`: every `--usx-*` token at its default, on `:root`
-- `dist/themes/<slug>.css`, `dist/themes.css`: each prebuilt theme as a `[data-theme="<slug>"]` block (and all of them together)
+- `dist/themes/<slug>.css`, `dist/themes/all.css`: each prebuilt theme as a `[data-theme="<slug>"]` block (and all of them together)
 - `dist/_themes-registry.scss`: generated data behind `src/_themes.scss`
 
 ## Build
@@ -128,7 +128,7 @@ wiring in this form):
 
 ```js
 import '@solexllc/usx-theme/theme.css';
-import '@solexllc/usx-theme/themes/forest.css';   // or .../themes.css for all
+import '@solexllc/usx-theme/themes/forest.css';   // or .../themes/all.css for all
 ```
 
 ### Notes

package/build.js

@@ -96,7 +96,10 @@ function resolvePresets(themeManifest, derive, PRESETS) {
 
 // themes/<slug>.css — one `[data-theme="<slug>"]` block per prebuilt theme,
 // changed tokens only (theme.css's :root supplies the rest). "Default" has
-// nothing to change and is skipped.
+// nothing to change and is skipped. The bundle of all of them lives at
+// themes/all.css rather than themes.css: Sass's pkg: importer tries
+// `themes.css` when resolving `pkg:.../themes` and would find both it and the
+// Sass module, then fail as ambiguous.
 function buildThemeFileCss(theme) {
   const lines = [`  color-scheme: ${theme.colorScheme};`, ...theme.entries.map(([cssVar, value]) => `  ${cssVar}: ${value};`)];
   return `${GENERATED_CSS}[data-theme="${theme.slug}"] {\n${lines.join('\n')}\n}\n`;
@@ -131,7 +134,7 @@ function writeThemes(themeManifest, derive, PRESETS) {
     fs.writeFileSync(path.join(themesDistDir, `${theme.slug}.css`), css, 'utf8');
     return css.replace(GENERATED_CSS, '');
   });
-  fs.writeFileSync(path.join(distDir, 'themes.css'), GENERATED_CSS + files.join('\n'), 'utf8');
+  fs.writeFileSync(path.join(themesDistDir, 'all.css'), GENERATED_CSS + files.join('\n'), 'utf8');
   fs.writeFileSync(path.join(distDir, '_themes-registry.scss'), buildThemesRegistryScss(themeManifest, themes, derive), 'utf8');
   return withTokens.map((t) => t.slug);
 }
@@ -155,7 +158,7 @@ async function build() {
   );
   const slugs = writeThemes(themeManifest, derive, PRESETS);
 
-  console.log(`[${new Date().toLocaleTimeString()}] Built tokens to dist/ (tokens.css, theme.css, _hooks.scss, tokens.js, theme-manifest.json, themes.css, _themes-registry.scss, themes/{${slugs.join(',')}}.css)`);
+  console.log(`[${new Date().toLocaleTimeString()}] Built tokens to dist/ (tokens.css, theme.css, _hooks.scss, tokens.js, theme-manifest.json, _themes-registry.scss, themes/{all,${slugs.join(',')}}.css)`);
 }
 
 // `node build.js --watch` rebuilds on every change under src/ (primitives

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solexllc/usx-theme",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Design tokens package for USX.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
     "./themes": {
       "sass": "./src/_themes.scss"
     },
-    "./themes.css": "./dist/themes.css",
+    "./themes/all.css": "./dist/themes/all.css",
     "./themes/*.css": "./dist/themes/*.css",
     "./theme.css": "./dist/theme.css",
     "./theme-manifest": {

package/src/presets.js

@@ -2,7 +2,7 @@
 //
 // Single source for: the Storybook toolbar theme toggle and Theme Playground
 // preset buttons, and build.js, which resolves each preset (derive.js) and
-// bakes it into dist/themes/<slug>.css, dist/themes.css and the Sass registry
+// bakes it into dist/themes/<slug>.css, dist/themes/all.css and the Sass registry
 // behind `pkg:@solexllc/usx-theme/themes`. Keys are manifest token names;
 // values are CSS values (hex, `var(--usx-*)`, lengths, keywords).