expose styles for js

docs/assets/plugins/code-block/code-block.css

@@ -6,7 +6,7 @@
 }
 
 .sl-theme-dark .code-block {
-  background-color: var(--sl-color-gray-100);
+  background-color: var(--sl-color-gray-200);
 }
 
 .code-block__preview {

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added a console error that appears when menu items have duplicate values in `sl-select`
 - Added new color primitives to the base set of design tokens
 - Added `--sl-color-*-1000` swatches to all color palettes
+- Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
 - Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
 - Refactored thumb position logic in `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490)
 - Reworked the dark theme to use an inverted token approach instead of light DOM selectors

package-lock.json

@@ -34,6 +34,7 @@
         "del": "^6.0.0",
         "download": "^8.0.0",
         "esbuild": "^0.12.4",
+        "esbuild-plugin-inline-import": "^1.0.1",
         "front-matter": "^4.0.2",
         "get-port": "^5.1.1",
         "husky": "^4.3.8",
@@ -3673,6 +3674,12 @@
         "esbuild": "bin/esbuild"
       }
     },
+    "node_modules/esbuild-plugin-inline-import": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/esbuild-plugin-inline-import/-/esbuild-plugin-inline-import-1.0.1.tgz",
+      "integrity": "sha512-QcBbsf7nJnD1GW2SOxgE0lLJ2GgqhGZCoPujxFaWatooNXpYwDCYuOadThKPLWcB9Sx6a7i3GU7RNBEB1dcYOQ==",
+      "dev": true
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -14185,6 +14192,12 @@
       "integrity": "sha512-HObgzMHbba5HzsHzxj1ccDIPWncCCCQjoruuLyS5geidwndqgLsjZEMt0XeSYIIbqoJFENGCEFQt4m2PtAFK2Q==",
       "dev": true
     },
+    "esbuild-plugin-inline-import": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/esbuild-plugin-inline-import/-/esbuild-plugin-inline-import-1.0.1.tgz",
+      "integrity": "sha512-QcBbsf7nJnD1GW2SOxgE0lLJ2GgqhGZCoPujxFaWatooNXpYwDCYuOadThKPLWcB9Sx6a7i3GU7RNBEB1dcYOQ==",
+      "dev": true
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",

package.json

@@ -64,6 +64,7 @@
     "del": "^6.0.0",
     "download": "^8.0.0",
     "esbuild": "^0.12.4",
+    "esbuild-plugin-inline-import": "^1.0.1",
     "front-matter": "^4.0.2",
     "get-port": "^5.1.1",
     "husky": "^4.3.8",

scripts/build.js

@@ -10,6 +10,7 @@ import esbuild from 'esbuild';
 import fs from 'fs';
 import getPort from 'get-port';
 import glob from 'globby';
+import inlineImportPlugin from 'esbuild-plugin-inline-import';
 import path from 'path';
 import { execSync } from 'child_process';
 
@@ -25,6 +26,14 @@ execSync('node scripts/make-vscode-data.js', { stdio: 'inherit' });
 execSync('node scripts/make-icons.js', { stdio: 'inherit' });
 
 (async () => {
+  async function copyFiles() {
+    // Copy CSS files from src/themes to dist/themes
+    await copy('./src/themes', './dist/themes', {
+      overwrite: true,
+      filter: /\.css$/
+    });
+  }
+
   const entryPoints = [
     // The whole shebang dist
     './src/shoelace.ts',
@@ -50,13 +59,15 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' });
       },
       bundle: true,
       splitting: true,
-      plugins: []
+      plugins: [inlineImportPlugin()]
     })
     .catch(err => {
       console.error(chalk.red(err));
       process.exit(1);
     });
 
+  await copyFiles();
+
   // Create the docs distribution by copying dist into the docs folder. This is what powers the website. It doesn't need
   // to exist in dev because Browser Sync routes it virtually.
   await del('./docs/dist');
@@ -95,7 +106,19 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' });
       buildResult
         // Rebuild and reload
         .rebuild()
-        .then(() => execSync('node scripts/make-metadata.js', { stdio: 'inherit' }))
+        .then(async () => {
+          if (/\.css$/.test(filename)) {
+            await copyFiles();
+          }
+        })
+        .then(() => {
+          // Skip metadata when styles are changed
+          if (/(\.css|\.styles\.ts)$/.test(filename)) {
+            return;
+          }
+
+          execSync('node scripts/make-metadata.js', { stdio: 'inherit' });
+        })
         .then(() => bs.reload())
         .catch(err => console.error(chalk.red(err)));
     });

src/declaration.d.ts

@@ -1,3 +1,8 @@
 declare module '@popperjs/core/dist/esm' {
   export * from '@popperjs/core/lib';
 }
+
+declare module '*.css' {
+  const styles: string;
+  export default styles;
+}

src/themes/base.css

@@ -1,7 +1,7 @@
 :root,
 :host,
 .sl-theme-light {
-  /**
+  /*
    * Color Primitives
    */
 
@@ -301,7 +301,7 @@
   --sl-color-rose-900: #881337;
   --sl-color-rose-1000: #4a0d20;
 
-  /**
+  /*
    * Theme Tokens
    */
 
@@ -370,7 +370,7 @@
   --sl-color-danger-900: var(--sl-color-red-900);
   --sl-color-danger-1000: var(--sl-color-red-1000);
 
-  /**
+  /*
    * Border radius tokens
    */
 
@@ -382,7 +382,7 @@
   --sl-border-radius-circle: 50%;
   --sl-border-radius-pill: 9999px;
 
-  /**
+  /*
    * Elevation tokens
    */
 
@@ -392,7 +392,7 @@
   --sl-shadow-large: 0 2px 8px #0d131e1a;
   --sl-shadow-x-large: 0 4px 16px #0d131e1a;
 
-  /**
+  /*
    * Spacing tokens
    */
 
@@ -407,7 +407,7 @@
   --sl-spacing-xxx-large: 3rem; /* 48px */
   --sl-spacing-xxxx-large: 4.5rem; /* 72px */
 
-  /**
+  /*
    * Transition tokens
    */
 
@@ -417,7 +417,7 @@
   --sl-transition-fast: 150ms;
   --sl-transition-x-fast: 50ms;
 
-  /**
+  /*
    * Typography tokens
    */
 
@@ -454,7 +454,7 @@
   --sl-line-height-normal: 1.8;
   --sl-line-height-loose: 2.2;
 
-  /**
+  /*
    * Form tokens
    */
 
@@ -531,20 +531,20 @@
   /* Toggles (checkboxes, radios, switches) */
   --sl-toggle-size: 1rem;
 
-  /**
+  /*
    * Overlay tokens
    */
 
   --sl-overlay-background-color: #37415180;
 
-  /**
+  /*
    * Panels
    */
 
   --sl-panel-background-color: var(--sl-color-white);
   --sl-panel-border-color: var(--sl-color-gray-200);
 
-  /**
+  /*
    * Tooltip tokens
    */
 
@@ -559,7 +559,7 @@
   --sl-tooltip-arrow-size: 5px;
   --sl-tooltip-arrow-start-end-offset: 8px;
 
-  /**
+  /*
    * Z-index tokens
    */
 

src/themes/base.ts

@@ -1 +1,6 @@
-import '../styles/base.css';
+import { css, unsafeCSS } from 'lit';
+import styles from 'inline:./base.css';
+
+export default css`
+  ${unsafeCSS(styles)}
+`;

src/themes/dark.css

@@ -1,10 +1,7 @@
-/**
- * Dark theme
- */
 :host,
 .sl-theme-dark {
   --sl-color-black: #fff;
-  --sl-color-white: var(--sl-color-gray-50);
+  --sl-color-white: var(--sl-color-gray-100);
 
   /* Blue Gray */
   --sl-color-blue-gray-1000: #f8fafc;

src/themes/dark.ts

@@ -1 +1,6 @@
-import '../styles/dark.css';
+import { css, unsafeCSS } from 'lit';
+import styles from 'inline:./dark.css';
+
+export default css`
+  ${unsafeCSS(styles)}
+`;