mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: build carbon themes using sass

Browse source
This commit is contained in:
Eric Liu 2020-07-23 19:58:54 -07:00
commit e2c8ea6d76
10 changed files with 808 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

55
docs/scripts/carbon-theme.js Normal file
View file

@ -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();