mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
f2a3f8d2e1* chore(deps-dev): bump devDependencies * docs: update number of available carbon icons * feat(notification): distinguish dispatched close event between click/timeout * fix(notification): prevent class from being overriden by $$restProps * docs(notification): improve example body copy * fix(notification): remove notificationType prop * refactor(notification): resolve svelte file in imports * fix(notification): prevent class from being overridden by $$restProps * feat(notification): update TS signature for dispatched close event * docs: update contributing * fix(loading): adjust spinner styles * feat(tag): support custom icon variant * feat(tile): add optional expand/collapse icon labels to ExpandableTile * feat(code-snippet): support disabled state for single and multi-line types * fix(code-snippet): remove impossible class directive * fix(code-snippet): showMoreLess button size should be "field", not "small" * fix(password-input): disable visibility button - set default values for tooltipAlignment, tooltipPosition * fix(text-input): add missing warning field wrapper class * feat(button): infer hasIconOnly using $$slots API - requires Svelte version >=3.25 * docs(button): add danger tertiary, icon-only example * feat(button): set default values for tooltip alignment, position * docs: document dynamic theming * fix(modal): correctly set class props #482 * fix(form): forward submit event in FluidForm #487 * feat(dropdown): support warning state * feat(multi-select): support warning state * fix(multi-select): prevent dropdown from opening if disabled * feat(number-input): support warning state * chore(deps-dev): upgrade devDependencies * docs: bump @carbon/themes, carbon-components * refactor(data-table): co-locate DataTableSkeleton with DataTable * docs: update number of pictograms * fix(password-input): add missing "bx--btn" class to visibility toggle * docs: increase z-index for component preview
108 lines
2.8 KiB
JavaScript
108 lines
2.8 KiB
JavaScript
const fs = require("fs");
|
|
const sass = require("node-sass");
|
|
const autoprefixer = require("autoprefixer");
|
|
const postcss = require("postcss");
|
|
const path = require("path");
|
|
const { promisify } = require("util");
|
|
|
|
const writeFile = promisify(fs.writeFile);
|
|
const sassRender = promisify(sass.render);
|
|
|
|
const shared = {
|
|
globals: `
|
|
$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-10.27/scss/globals/scss/_css--reset.scss";
|
|
@import "node_modules/carbon-components-10.27/scss/globals/scss/_css--font-face.scss";
|
|
@import "node_modules/carbon-components-10.27/scss/globals/scss/_css--helpers.scss";
|
|
@import "node_modules/carbon-components-10.27/scss/globals/scss/_css--body.scss";
|
|
@import "node_modules/carbon-components-10.27/scss/globals/grid/_grid.scss";
|
|
@import "node_modules/carbon-components-10.27/scss/globals/scss/styles.scss";
|
|
`,
|
|
components: ``,
|
|
};
|
|
|
|
const themes = {
|
|
white: `
|
|
$carbon--theme: $carbon--theme--white;
|
|
@include carbon--theme();
|
|
`,
|
|
g10: `
|
|
$carbon--theme: $carbon--theme--g10;
|
|
@include carbon--theme();
|
|
`,
|
|
g90: `
|
|
$carbon--theme: $carbon--theme--g90;
|
|
@include carbon--theme();
|
|
`,
|
|
g100: `
|
|
$carbon--theme: $carbon--theme--g100;
|
|
@include carbon--theme();
|
|
`,
|
|
all: `
|
|
:root {
|
|
@include carbon--theme($carbon--theme--white, true);
|
|
}
|
|
|
|
:root[theme="g10"] {
|
|
@include carbon--theme($carbon--theme--g10, true);
|
|
}
|
|
|
|
:root[theme="g90"] {
|
|
@include carbon--theme($carbon--theme--g90, true);
|
|
}
|
|
|
|
:root[theme="g100"] {
|
|
@include carbon--theme($carbon--theme--g100, true);
|
|
}
|
|
`,
|
|
};
|
|
|
|
/**
|
|
* Generate pre-compiled CSS for each Carbon theme.
|
|
*/
|
|
async function buildCss() {
|
|
fs.rmdirSync(path.resolve("css"), { recursive: true });
|
|
fs.mkdirSync(path.resolve("css"));
|
|
|
|
Object.keys(themes).forEach(async (theme) => {
|
|
try {
|
|
const outFile = path.resolve("css", theme + ".css");
|
|
const { css } = await sassRender({
|
|
data: `
|
|
@import "node_modules/@carbon/themes/scss/themes";
|
|
|
|
$feature-flags: (
|
|
enable-css-custom-properties: ${theme === "all"},
|
|
grid-columns-16: true,
|
|
);
|
|
|
|
${themes[theme]}
|
|
${shared.globals}
|
|
${shared.components}
|
|
`,
|
|
outFile,
|
|
outputStyle: "compact",
|
|
omitSourceMapUrl: true,
|
|
});
|
|
|
|
const prefixed = await postcss([
|
|
autoprefixer({
|
|
overrideBrowserslist: ["last 1 version", "ie >= 11", "Firefox ESR"],
|
|
}),
|
|
]).process(css, { from: undefined });
|
|
|
|
await writeFile(outFile, prefixed.css);
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
}
|
|
|
|
buildCss();
|