diff --git a/docs/.gitignore b/docs/.gitignore index 6089ea11..f3d44b2a 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -5,3 +5,4 @@ yarn-error.log /cypress/screenshots/ /__sapper__/ +static/style.css \ No newline at end of file diff --git a/docs/README.md b/docs/README.md index a888f86c..db0e8dec 100644 --- a/docs/README.md +++ b/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` diff --git a/docs/package.json b/docs/package.json index 7e911591..bdfe8a61 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/scripts/carbon-theme.js b/docs/scripts/carbon-theme.js new file mode 100644 index 00000000..b594c2ed --- /dev/null +++ b/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(); diff --git a/docs/src/components/GlobalHeader.svelte b/docs/src/components/GlobalHeader.svelte index a730ce28..a40f9a8d 100644 --- a/docs/src/components/GlobalHeader.svelte +++ b/docs/src/components/GlobalHeader.svelte @@ -7,8 +7,9 @@ HeaderNav, HeaderNavItem, HeaderUtilities, - HeaderActionLink + HeaderActionLink, } from "carbon-components-svelte"; + import Theme from "./Theme.svelte";
+ 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); + } + + + + + diff --git a/docs/src/routes/_layout.svelte b/docs/src/routes/_layout.svelte index 966b9f39..98a615b4 100644 --- a/docs/src/routes/_layout.svelte +++ b/docs/src/routes/_layout.svelte @@ -29,6 +29,10 @@