51 lines
1.6 KiB
JavaScript
51 lines
1.6 KiB
JavaScript
const spacing = require("../../config/design-tokens/spacing.json");
|
|
const { helperClassesToCss } = require("./helper-classes");
|
|
|
|
const spacingToCss = (variant, value) =>
|
|
`--spacing-${variant.replace(".", "\\.")}: ${value}px;`;
|
|
|
|
const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
|
|
return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
|
|
const variant = spacingVariant.replace(".", "\\.");
|
|
return (
|
|
css +
|
|
helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
|
|
);
|
|
}, ``);
|
|
};
|
|
|
|
const helperClasses = [
|
|
["m", ["margin"]],
|
|
["my", ["margin-block-start", "margin-block-end"]],
|
|
["mx", ["margin-inline-start", "margin-inline-end"]],
|
|
["ml", ["margin-inline-start"]],
|
|
["mr", ["margin-inline-start"]],
|
|
["mt", ["margin-block-start"]],
|
|
["mb", ["margin-block-end"]],
|
|
["p", ["padding"]],
|
|
["py", ["padding-block-start", "padding-block-end"]],
|
|
["px", ["padding-inline-start", "padding-inline-end"]],
|
|
["pl", ["padding-inline-start"]],
|
|
["pr", ["padding-inline-start"]],
|
|
["pt", ["padding-block-start"]],
|
|
["pb", ["padding-block-end"]],
|
|
["w", ["width"]],
|
|
["h", ["height"]],
|
|
["size", ["width", "height"]],
|
|
["radius", ["border-radius"]],
|
|
["gap", ["gap"]],
|
|
["row-gap", ["row-gap"]],
|
|
["column-gap", ["column-gap"]],
|
|
["flow-space", ["--flow-space"]],
|
|
];
|
|
|
|
const spacingVariablesCss = Object.entries(spacing).reduce(
|
|
(css, [variant, value]) => css + spacingToCss(variant, value),
|
|
``,
|
|
);
|
|
|
|
const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
|
|
|
|
const css = `:root{${spacingVariablesCss}}${helperCss}`;
|
|
|
|
module.exports = css;
|