docs: build carbon themes using sass

docs/.gitignore

@@ -5,3 +5,4 @@
 yarn-error.log
 /cypress/screenshots/
 /__sapper__/
+static/style.css

docs/README.md

@@ -29,6 +29,14 @@ yarn link "carbon-components-svelte"
 yarn install
 ```
 
+Before starting development, you will need to build the Carbon-themed CSS StyleSheet once.
+
+```sh
+node scripts/carbon-theme
+```
+
+A file containing the four Carbon themes will be outputted to `static/style.css`. Do not check this file into source control.
+
 ## Available Scripts
 
 ### `yarn dev`

docs/package.json

@@ -13,9 +13,13 @@
     "sirv": "^1.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^9.8.5",
+    "carbon-components": "^10.16.0",
     "carbon-components-svelte": "../",
     "cypress": "^4.10.0",
+    "node-sass": "^4.14.1",
     "npm-run-all": "^4.1.5",
+    "postcss": "^7.0.32",
     "sapper": "^0.27.16",
     "shx": "^0.3.2",
     "svelte": "^3.24.0",

docs/scripts/carbon-theme.js

@@ -0,0 +1,55 @@
+const fs = require("fs");
+const sass = require("node-sass");
+const autoprefixer = require("autoprefixer");
+const postcss = require("postcss");
+const { promisify } = require("util");
+
+const writeFile = promisify(fs.writeFile);
+const outFile = "./static/style.css";
+
+async function generateCss() {
+  sass.render(
+    {
+      outFile,
+      omitSourceMapUrl: true,
+      data: `
+        $feature-flags: (
+          enable-css-custom-properties: true,
+          grid-columns-16: true,
+        );
+        
+        @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
+        @import "node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss";
+        
+        :root[carbon-theme="white"] { @include carbon--theme($carbon--theme--white, true); }
+        :root { @include carbon--theme($carbon--theme--g10, true); }
+        :root[carbon-theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
+        :root[carbon-theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }
+        
+        $css--font-face: true;
+        $css--helpers: true;
+        $css--body: true;
+        $css--use-layer: true;
+        $css--reset: true;
+        $css--default-type: true;
+        $css--plex: true;
+        
+        @import "node_modules/carbon-components/scss/globals/scss/_css--reset.scss";
+        @import "node_modules/carbon-components/scss/globals/scss/_css--font-face.scss";
+        @import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
+        @import "node_modules/carbon-components/scss/globals/scss/_css--body.scss";
+        @import "node_modules/carbon-components/scss/globals/grid/_grid.scss";
+        @import "node_modules/carbon-components/scss/globals/scss/styles.scss";`,
+    },
+    async (error, result) => {
+      if (!error) {
+        const prefixed = await postcss([autoprefixer]).process(result.css, {
+          from: undefined,
+        });
+        await writeFile(outFile, prefixed.css);
+      }
+    }
+  );
+}
+
+generateCss();

docs/src/components/GlobalHeader.svelte

@@ -7,8 +7,9 @@
     HeaderNav,
     HeaderNavItem,
     HeaderUtilities,
-    HeaderActionLink
+    HeaderActionLink,
   } from "carbon-components-svelte";
+  import Theme from "./Theme.svelte";
 </script>
 
 <Header

docs/src/components/Theme.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { onMount } from "svelte";
+  import { Select, SelectItem } from "carbon-components-svelte";
+
+  let theme = undefined;
+
+  onMount(() => {
+    theme = localStorage.getItem("theme") || "g10";
+  });
+
+  $: if (theme) {
+    localStorage.setItem("theme", theme);
+    document.documentElement.setAttribute("carbon-theme", theme);
+  }
+</script>
+
+<style>
+  :global(.bx--select-input) {
+    width: auto;
+    min-width: 0;
+  }
+</style>
+
+<Select inline labelText="Theme" bind:selected={theme}>
+  <SelectItem value="white" text="White" />
+  <SelectItem value="g10" text="Gray 10" />
+  <SelectItem value="g90" text="Gray 90" />
+  <SelectItem value="g100" text="Gray 100" />
+</Select>

docs/src/routes/_layout.svelte

@@ -29,6 +29,10 @@
 </script>
 
 <style>
+  :global(#sapper) {
+    min-height: 100vh;
+  }
+
   :global(.bx--content) {
     padding: 0;
   }

docs/src/routes/index.svelte

@@ -1,10 +1,7 @@
 <script>
-  import components from "./components/_components";
+  import Theme from "../components/Theme.svelte";
-  import { Link } from "carbon-components-svelte";
 </script>
 
 <h1>Welcome</h1>
 
-{#each components as component}
+<Theme />
-  <Link href="examples/{component.title}">{component.title}</Link>
-{/each}

docs/src/template.html

@@ -9,10 +9,7 @@
 
     <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
     <link rel="icon" type="image/png" href="favicon.png" />
-    <link
+    <link rel="stylesheet" href="style.css" />
-      rel="stylesheet"
-      href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
-    />
     <title>Carbon Components Svelte</title>
 
     %sapper.styles% %sapper.head%