@devoinc/genesys-tokens
Version:
Design tokens generator
1,096 lines (1,015 loc) • 31 kB
JavaScript
// ../node_modules/tsup/assets/esm_shims.js
import { fileURLToPath } from "url";
import path from "path";
var getFilename = () => fileURLToPath(import.meta.url);
var getDirname = () => path.dirname(getFilename());
var __dirname = /* @__PURE__ */ getDirname();
// src/generator.ts
import StyleDictionary from "style-dictionary";
// src/Scheme.ts
var Scheme = /* @__PURE__ */ ((Scheme2) => {
Scheme2["Light"] = "light";
Scheme2["Dark"] = "dark";
return Scheme2;
})(Scheme || {});
// src/formats/json/flat/format.ts
var format = ({ dictionary }) => JSON.stringify(dictionary.allTokens, null, 2);
// src/formats/json/flat/index.ts
var flat = {
name: "json/flat",
format
};
// src/formats/json/index.ts
var json = {
flat
};
// src/formats/eval.ts
var evalNode = (token, formatter) => token.hasOwnProperty("value") ? formatter(token) : Object.entries(token).map(([key, value]) => ({ [key]: evalNode(value, formatter) })).reduce((acc, cur) => ({ ...acc, ...cur }), {});
// src/formats/javascript/moduleReduced/format.ts
var format2 = ({ dictionary }) => `module.exports = ${JSON.stringify(
evalNode(dictionary.tokens, (token) => token.value),
null,
2
)};`;
// src/formats/javascript/moduleReduced/index.ts
var moduleReduced = {
name: "javascript/module-reduced",
format: format2
};
// src/formats/javascript/moduleReducedMin/format.ts
var format3 = ({ dictionary }) => `module.exports = ${JSON.stringify(
evalNode(dictionary.tokens, (node) => node.value)
)};`;
// src/formats/javascript/moduleReducedMin/index.ts
var moduleReducedMin = {
name: "javascript/module-reduced-min",
format: format3
};
// src/formats/javascript/esmReducedMin/format.ts
var format4 = ({ dictionary }) => `export default ${JSON.stringify(
evalNode(dictionary.tokens, (node) => node.value)
)};`;
// src/formats/javascript/esmReducedMin/index.ts
var esmReducedMin = {
name: "javascript/esm-reduced-min",
format: format4
};
// src/formats/javascript/index.ts
var javascript = {
moduleReduced,
moduleReducedMin,
esmReducedMin
};
// src/formats/serialization.ts
var stringify = (prefix) => (token) => {
var _a;
return `${prefix}${token.name}: ${((_a = token.attributes) == null ? void 0 : _a.category) === "asset" ? '"' + token.value + '"' : token.value};`;
};
var addComment = (commentStyle) => (comment) => comment ? comment.concat(
commentStyle === "short" ? " // " + comment : " /* " + comment + " */"
) : comment;
// src/formats/text/flat/format.ts
var format5 = ({ dictionary }) => dictionary.allTokens.map((prop) => addComment("short")(stringify("")(prop))).join("\n");
// src/formats/text/flat/index.ts
var flat2 = {
name: "text/flat",
format: format5
};
// src/formats/text/index.ts
var text = {
flat: flat2
};
// src/formats/typescript/moduleReducedDeclarations/format.ts
import {
InputData,
quicktypeMultiFileSync,
jsonInputForTargetLanguage
} from "quicktype-core";
var quicktypeJSON = (targetLanguage, typeName, jsonString) => {
const jsonInput = jsonInputForTargetLanguage(targetLanguage);
jsonInput.addSourceSync({
name: typeName,
samples: [jsonString]
});
const inputData = new InputData();
inputData.addInput(jsonInput);
return quicktypeMultiFileSync({
inputData,
lang: targetLanguage,
rendererOptions: { "just-types": "true" }
});
};
var format6 = ({ dictionary }) => {
var _a;
const resMap = quicktypeJSON(
"typescript",
"Brand",
JSON.stringify(evalNode(dictionary.tokens, (token) => token.value))
);
const declarationsLines = ((_a = resMap.get("stdout")) == null ? void 0 : _a.lines) || [];
const declarations = JSON.parse(JSON.stringify(declarationsLines.join("\n")));
return declarations;
};
// src/formats/typescript/moduleReducedDeclarations/index.ts
var moduleReducedDeclarations = {
name: "typescript/module-reduced-declarations",
format: format6
};
// src/formats/typescript/index.ts
var typescript = {
moduleReducedDeclarations
};
// src/constants.ts
var TOKENS_TIER = {
ALIAS: "alias",
BRAND: "brand",
CMP: "cmp",
FIGMA: "figma",
GLOBAL: "global",
META: "meta"
};
var TOKENS_CAT = {
BREAKPOINTS: "breakpoints",
COLOR: "color",
ELEVATION: "elevation",
MUTATION: "mutation",
SHAPE: "shape",
SIZE: "size",
SPACE: "space",
TYPO: "typo"
};
var TOKENS_CAT_VALUES = [
"breakpoints",
"color",
"elevation",
"mutation",
"shape",
"size",
"space",
"typo"
];
var TOKENS_CAT_PROP = {
BREAKPOINTS: {
NAME: TOKENS_CAT.BREAKPOINTS,
PROPS: {
MEDIA_QUERY: "mediaQuery"
}
},
COLOR: {
NAME: TOKENS_CAT.COLOR,
PROPS: {
BACKGROUND: "background",
TEXT: "text",
BORDER: "border",
FILL: "fill",
SHADOW: "shadow"
}
},
ELEVATION: {
NAME: TOKENS_CAT.ELEVATION,
PROPS: {
BOX_SHADOW: "boxShadow",
TEXT_SHADOW: "textShadow",
Z_INDEX: "zIndex"
}
},
MUTATION: {
NAME: TOKENS_CAT.MUTATION,
PROPS: {
TRANSITION: "transition",
TRANSITION_PROPERTY: "transitionProperty",
TRANSITION_DURATION: "transitionDuration",
TRANSITION_TIMING_FUNCTION: "transitionTimingFunction",
TRANSITION_TYPE: "transitionType",
TRANSITION_DELAY: "transitionDelay",
TRANSFORM: "transform"
}
},
SHAPE: {
NAME: TOKENS_CAT.SHAPE,
PROPS: {
BORDER_RADIUS: "borderRadius",
BORDER: "border",
BORDER_SIZE: "borderSize",
BORDER_STYLE: "borderStyle",
STROKE: "stroke",
OUTLINE: "outline",
OPACITY: "opacity",
CONTENT: "content"
}
},
SIZE: {
NAME: TOKENS_CAT.SIZE,
PROPS: {
WIDTH: "width",
MIN_WIDTH: "minWidth",
MAX_WIDTH: "maxWidth",
HEIGHT: "height",
MIN_HEIGHT: "minHeight",
MAX_HEIGHT: "maxHeight",
SQUARE: "square"
}
},
TYPO: {
NAME: TOKENS_CAT.TYPO,
PROPS: {
FONT_SIZE: "fontSize",
FONT_WEIGHT: "fontWeight",
FONT_FAMILY: "fontFamily",
LINE_HEIGHT: "lineHeight",
LETTER_SPACING: "letterSpacing",
TEXT_TRANSFORM: "textTransform",
TEXT_DECORATION: "textDecoration"
}
},
SPACE: {
NAME: TOKENS_CAT.SPACE,
PROPS: {
PADDING: "padding",
PADDING_TOP: "paddingTop",
PADDING_RIGHT: "paddingRight",
PADDING_BOTTOM: "paddingBottom",
PADDING_LEFT: "paddingLeft",
PADDING_VER: "paddingVer",
PADDING_HOR: "paddingHor",
MARGIN: "margin",
MARGIN_TOP: "marginTop",
MARGIN_RIGHT: "marginRight",
MARGIN_BOTTOM: "marginBottom",
MARGIN_LEFT: "marginLeft",
MARGIN_VER: "marginVer",
MARGIN_HOR: "marginHor",
GAP: "gap",
ROW_GAP: "rowGap",
COLUMN_GAP: "columnGap"
}
}
};
var FIGMA_TOKENS_CAT = {
COLOR: "color",
BORDER_RADIUS: "borderRadius",
SIZE: "sizing",
SPACE: "spacing",
BORDER_SIZE: "borderWidth",
BOX_SHADOW: "boxShadow",
OPACITY: "opacity",
TYPO: "typography",
FONT_SIZE: "fontSizes",
FONT_WEIGHT: "fontWeights",
FONT_FAMILY: "fontFamilies",
LINE_HEIGHT: "lineHeights",
LETTER_SPACING: "letterSpacing",
TEXT_TRANSFORM: "case",
OTHER: "other"
};
// src/formats/figma/figmatokens/format.ts
var format7 = ({ dictionary }) => {
const tree = evalNode(
dictionary.tokens,
(node) => {
var _a;
return {
value: node.value,
type: (_a = node.attributes) == null ? void 0 : _a.figmaType
};
}
);
if ("figma" in tree && FIGMA_TOKENS_CAT.TYPO in tree.figma) {
tree[FIGMA_TOKENS_CAT.TYPO] = tree.figma[FIGMA_TOKENS_CAT.TYPO];
delete tree.figma;
}
return JSON.stringify(tree, null, 2);
};
// src/formats/figma/figmatokens/index.ts
var figmatokens = {
name: "figma/figmatokens",
format: format7
};
// src/formats/figma/index.ts
var figma = {
figmatokens
};
// src/transforms/alias/cti/path.ts
var getFigmaTokenType = (path2) => path2.includes(TOKENS_CAT_PROP.COLOR.NAME) ? FIGMA_TOKENS_CAT.COLOR : path2.includes(TOKENS_CAT_PROP.SHAPE.PROPS.BORDER_RADIUS) ? FIGMA_TOKENS_CAT.BORDER_RADIUS : path2.includes(TOKENS_CAT_PROP.SIZE.NAME) ? FIGMA_TOKENS_CAT.SIZE : path2.includes(TOKENS_CAT_PROP.SPACE.NAME) ? FIGMA_TOKENS_CAT.SPACE : path2.includes(TOKENS_CAT_PROP.SHAPE.PROPS.BORDER_SIZE) ? FIGMA_TOKENS_CAT.BORDER_SIZE : path2.includes(TOKENS_CAT_PROP.SHAPE.NAME) && path2.includes(TOKENS_CAT_PROP.SHAPE.PROPS.OPACITY) ? FIGMA_TOKENS_CAT.OPACITY : path2.includes(TOKENS_CAT_PROP.ELEVATION.PROPS.BOX_SHADOW) ? FIGMA_TOKENS_CAT.BOX_SHADOW : path2.includes(FIGMA_TOKENS_CAT.TYPO) ? FIGMA_TOKENS_CAT.TYPO : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.FONT_SIZE) ? FIGMA_TOKENS_CAT.FONT_SIZE : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.FONT_WEIGHT) ? FIGMA_TOKENS_CAT.FONT_WEIGHT : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.LINE_HEIGHT) ? FIGMA_TOKENS_CAT.LINE_HEIGHT : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.LETTER_SPACING) ? FIGMA_TOKENS_CAT.LETTER_SPACING : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.FONT_FAMILY) ? FIGMA_TOKENS_CAT.FONT_FAMILY : path2.includes(TOKENS_CAT_PROP.TYPO.PROPS.TEXT_TRANSFORM) ? FIGMA_TOKENS_CAT.TEXT_TRANSFORM : FIGMA_TOKENS_CAT.OTHER;
var parsePath = (token, paths) => paths.reduce((acc, cur, idx) => ({ ...acc, [cur]: token.path[idx] }), {
figmaType: getFigmaTokenType(token.path)
});
var getPaths = (token) => {
const isCmp2 = token.path[0] === TOKENS_TIER.CMP;
const isAlias2 = token.path[0] === TOKENS_TIER.ALIAS;
const isExportable = isCmp2 || isAlias2;
const hasElement = isExportable && TOKENS_CAT_VALUES.includes(token.path[3]);
const hasGroup = isAlias2 && !TOKENS_CAT_VALUES.includes(token.path[1]);
return [
"tier",
...isCmp2 ? ["component"] : [],
...hasGroup ? ["group"] : [],
...hasElement ? ["element"] : [],
"category",
"property",
...isAlias2 && !hasGroup ? ["concept"] : [],
"variant",
"modifier"
];
};
// src/transforms/alias/cti/index.ts
var cti = {
name: "alias-cti",
type: "attribute",
transform: (token) => parsePath(token, getPaths(token))
};
// src/transforms/alias/group/transform.ts
var transform = (token) => String(token.path.shift());
// src/transforms/alias/group/index.ts
var group = {
name: "name/token-group",
type: "name",
transform
};
// src/transforms/alias/jsonComponent/transform.ts
var transform2 = (token) => token.path.join("-");
// src/transforms/alias/jsonComponent/index.ts
var jsonComponent = {
name: "name/token-json-component",
type: "name",
transform: transform2
};
// src/transforms/alias/index.ts
var alias = {
cti,
group,
jsonComponent
};
// src/transforms/shadow/boxShadowToFigma/errors.ts
var getValidFormatMessage = (token) => `
There is an error on the next boxShadow format:
${JSON.stringify(token, null, 2)}
The accepted values are:
- 'inset? x y color',
- 'inset? x y blur color',
- 'inset? x y blur spread color',
Fix, drop and roll...
`;
// src/transforms/shadow/boxShadowToFigma/normalization.ts
var unitToIntegerBase10 = (value) => {
const mult = value.endsWith("rem") ? 10 : 1;
const numberValue = Number(value.replace(/rem/, "").replace(/px/, ""));
return parseFloat((numberValue * mult).toFixed(4));
};
// src/transforms/shadow/boxShadowToFigma/split.ts
var breakExpressions = (text2) => text2.split(/\s*,(?![^(]*\))\s*/);
// src/transforms/shadow/boxShadowToFigma/variations.ts
var InsetXYColor = /(inset)?\s*([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+(#[\da-fA-F]{6}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:\s*,\s*[\d.]+)?\)\s*)/;
var InsetXYBlurColor = /(inset)?\s*([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+(#[\da-fA-F]{6}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:\s*,\s*[\d.]+)?\)\s*)/;
var InsetXYBlurSpreadColor = /(inset)?\s*([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+([\d.-]+(?:rem|px)?)\s+(#[\da-fA-F]{6}|rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:\s*,\s*[\d.]+)?\)\s*)/;
// src/transforms/shadow/boxShadowToFigma/transform.ts
var transform3 = (token) => Array.isArray(token.value) ? token.value : breakExpressions(token.value).map((item) => {
let captured;
if ([
"none",
"inherit",
"initial",
"revert",
"revert-layer",
"unset"
].includes(item)) {
return {
type: "dropShadow",
x: 0,
y: 0,
blur: 0,
spread: 0,
color: "rgba(0,0,0,0)"
};
} else if (captured = InsetXYBlurSpreadColor.exec(item)) {
return {
type: captured[1] ? "innerShadow" : "dropShadow",
x: unitToIntegerBase10(captured[2]),
y: unitToIntegerBase10(captured[3]),
blur: unitToIntegerBase10(captured[4]),
spread: unitToIntegerBase10(captured[5]),
color: captured[6]
};
} else if (captured = InsetXYBlurColor.exec(item)) {
return {
type: captured[1] ? "innerShadow" : "dropShadow",
x: unitToIntegerBase10(captured[2]),
y: unitToIntegerBase10(captured[3]),
blur: unitToIntegerBase10(captured[4]),
spread: 0,
color: captured[5]
};
} else if (captured = InsetXYColor.exec(item)) {
return {
type: captured[1] ? "innerShadow" : "dropShadow",
x: unitToIntegerBase10(captured[2]),
y: unitToIntegerBase10(captured[3]),
blur: 0,
spread: 0,
color: captured[4]
};
} else {
throw new Error(getValidFormatMessage(token));
}
});
// src/transforms/shadow/boxShadowToFigma/index.ts
var boxShadowToFigma = {
name: "shadow/boxShadowToFigma",
transitive: true,
type: "value",
filter: (token) => token.path.includes("boxShadow"),
transform: transform3
};
// src/transforms/shadow/index.ts
var shadow = {
boxShadowToFigma
};
// src/transforms/size/filter.ts
var filterPx = (token) => !!token.value.match(/^[\d.]+px$/);
var filterRem = (token) => typeof token.value === "string" && !!token.value.match(/^-*[\d.]+rem$/);
// src/transforms/size/pxToDp/transform.ts
var transform4 = (token) => token.value.replace(/px$/, "dp");
// src/transforms/size/pxToDp/index.ts
var pxToDp = {
name: "size/pxToDp",
type: "value",
filter: filterPx,
transform: transform4
};
// src/transforms/size/pxToPt/transform.ts
var transform5 = (token) => token.value.replace(/px$/, "pt");
// src/transforms/size/pxToPt/index.ts
var pxToPt = {
name: "size/pxToPt",
type: "value",
filter: filterPx,
transform: transform5
};
// src/transforms/size/remToIntegerBase10/transform.ts
var transform6 = (token) => parseFloat((Number(token.value.replace(/rem$/, "")) * 10).toFixed(4));
// src/transforms/size/remToPxBase10/transform.ts
var transform7 = (token) => `${transform6(token)}px`;
// src/transforms/size/remToPxBase10/index.ts
var remToPxBase10 = {
name: "size/remToPxBase10",
type: "value",
filter: filterRem,
transform: transform7
};
// src/transforms/size/remToIntegerBase10/index.ts
var remToIntegerBase10 = {
name: "size/remToIntegerBase10",
type: "value",
filter: filterRem,
transform: transform6
};
// src/transforms/size/index.ts
var size = {
pxToDp,
pxToPt,
remToPxBase10,
remToIntegerBase10
};
// src/filters/isAlias/filter.ts
var filter = (token) => {
var _a;
return ((_a = token.attributes) == null ? void 0 : _a.tier) === TOKENS_TIER.ALIAS;
};
// src/filters/isAlias/index.ts
var isAlias = {
name: "isAlias",
filter
};
// src/filters/isBrand/filter.ts
var filter2 = (token) => {
var _a;
return ((_a = token.attributes) == null ? void 0 : _a.tier) === TOKENS_TIER.BRAND;
};
// src/filters/isBrand/index.ts
var isBrand = {
name: "isBrand",
filter: filter2
};
// src/filters/isCmp/filter.ts
var filter3 = (token) => {
var _a;
return ((_a = token.attributes) == null ? void 0 : _a.tier) === TOKENS_TIER.CMP;
};
// src/filters/isCmp/index.ts
var isCmp = {
name: "isCmp",
filter: filter3
};
// src/token.ts
var isFigmaProp = (token) => {
var _a, _b, _c;
return (((_a = token.attributes) == null ? void 0 : _a.tier) === TOKENS_TIER.FIGMA || ((_b = token.attributes) == null ? void 0 : _b.tier) === TOKENS_TIER.ALIAS || ((_c = token.attributes) == null ? void 0 : _c.tier) === TOKENS_TIER.CMP) && token.attributes.figmaType !== FIGMA_TOKENS_CAT.OTHER;
};
var evalHasScheme = (token) => {
var _a, _b;
return ((_a = token.attributes) == null ? void 0 : _a.category) === TOKENS_CAT_PROP.COLOR.NAME || ((_b = token.attributes) == null ? void 0 : _b.category) === TOKENS_CAT_PROP.ELEVATION.NAME && (token.attributes.property === TOKENS_CAT_PROP.ELEVATION.PROPS.BOX_SHADOW || token.attributes.property === TOKENS_CAT_PROP.ELEVATION.PROPS.TEXT_SHADOW);
};
// src/filters/isFigmaBase/filter.ts
var filter4 = (token) => isFigmaProp(token) && !evalHasScheme(token);
// src/filters/isFigmaBase/index.ts
var isFigmaBase = {
name: "isFigmaBase",
filter: filter4
};
// src/filters/isFigmaScheme/filter.ts
var filter5 = (token) => isFigmaProp(token) && evalHasScheme(token);
// src/filters/isFigmaScheme/index.ts
var isFigmaScheme = {
name: "isFigmaScheme",
filter: filter5
};
// src/filters/isGlobal/filter.ts
var filter6 = (token) => {
var _a;
return ((_a = token.attributes) == null ? void 0 : _a.tier) === TOKENS_TIER.GLOBAL;
};
// src/filters/isGlobal/index.ts
var isGlobal = {
name: "isGlobal",
filter: filter6
};
// src/filters/isGroup/filter.ts
var filter7 = (token) => {
var _a;
return !!((_a = token.attributes) == null ? void 0 : _a.group);
};
// src/filters/isGroup/index.ts
var isGroup = {
name: "isGroup",
filter: filter7
};
// src/filters/isNotFigma/filter.ts
var filter8 = (token) => {
var _a;
return ((_a = token.attributes) == null ? void 0 : _a.tier) !== TOKENS_TIER.FIGMA;
};
// src/filters/isNotFigma/index.ts
var isNotFigma = {
name: "isNotFigma",
filter: filter8
};
// src/filters/isCmpAlias/filter.ts
var filter9 = (token) => {
var _a;
return [TOKENS_TIER.CMP, TOKENS_TIER.ALIAS, TOKENS_TIER.META].includes(
(_a = token.attributes) == null ? void 0 : _a.tier
);
};
// src/filters/isCmpAlias/index.ts
var isCmpAlias = {
name: "isCmpAlias",
filter: filter9
};
// src/transformGroups/figma.ts
var figma2 = {
name: "figma-alias",
transforms: [
"alias-cti",
"name/kebab",
"time/seconds",
"color/css",
"size/remToIntegerBase10",
"shadow/boxShadowToFigma"
]
};
// src/transformGroups/styleguide.ts
var styleguide = {
name: "styleguide",
transforms: ["attribute/cti", "name/kebab", "color/css"]
};
// src/transformGroups/styleguidejs.ts
var styleguidejs = {
name: "styleguideJs",
transforms: ["attribute/cti", "name/snake", "color/css"]
};
// src/transformGroups/tokensJs.ts
var tokensJs = {
name: "tokens-js",
transforms: ["alias-cti", "color/css", "name/constant"]
};
// src/transformGroups/tokensJson.ts
var tokensJson = {
name: "tokens-json",
transforms: [
"alias-cti",
"name/kebab",
"name/token-json-component",
"color/css"
]
};
// src/transformGroups/tokensScss.ts
var tokensScss = {
name: "tokens-scss",
// to see the pre-defined "scss" transformation use:
// console.log(StyleDictionaryPackage.transformGroup['scss']);
transforms: [
"alias-cti",
//'name/token-group',
"time/seconds",
"color/css",
"name/kebab"
]
};
// src/transformGroups/tokensCss.ts
var tokensCss = {
name: "tokens-css",
// to see the pre-defined "scss" transformation use:
// console.log(StyleDictionaryPackage.transformGroup['scss']);
transforms: ["alias-cti", "time/seconds", "color/css", "name/kebab"]
};
// src/transformGroups/tokensAndroid.ts
var tokensAndroid = {
name: "tokens-android",
// to see the pre-defined "android" transformation use:
// console.log(StyleDictionaryPackage.transformGroup['android']);
transforms: ["attribute/cti", "name/camel", "size/pxToDp"]
};
// src/styleDictionary.ts
import { resolve } from "node:path";
var tokensPath = resolve(__dirname, "tokens");
var getStyleDictionaryConfig = (scheme, menuScheme, source, output) => ({
source: [
/* --------------------- COMMON TOKENS -------------------- */
// global.x
`${tokensPath}/global/**/*.json`,
// theme.x
`${tokensPath}/schemes/${scheme}/*.json`,
// alias.x
`${tokensPath}/alias/**/*.json`,
// figma.x
`${tokensPath}/figma/**/*.json`,
/* --------------- COMMON COMPONENTS TOKENS --------------- */
// cmp.x
`${tokensPath}/component/**/*.json`,
/* --------------- COMMON MENU SCHEME TOKENS -------------- */
// theme.mainMenu.x
`${tokensPath}/schemes/${menuScheme}/component/theme-main-menu.json`,
/* --------------- CUSTOM BRAND SCHEME TOKENS --------------- */
// Overrides for brand.x in include property if brand is specified
// brand.x
...source ? [`${source}/*.json`] : []
],
include: [
/* --------------- BASE BRAND SCHEME TOKENS --------------- */
// brand.x
`${tokensPath}/brand-defaults/**/*.json`
],
platforms: {
"web/js": {
transformGroup: "tokens-js",
buildPath: output,
files: [
// MODULE
{
destination: "js/dev/tokens.module.all.js",
format: "javascript/module",
filter: "isNotFigma"
},
{
destination: "js/dev/tokens.module.alias.js",
format: "javascript/module",
filter: "isAlias"
},
{
destination: "js/dev/tokens.module.cmp.js",
format: "javascript/module",
filter: "isCmp"
},
// MODULE REDUCED
// dev
{
destination: "js/dev/tokens.module.reduced.global.js",
format: "javascript/module-reduced",
filter: "isGlobal"
},
{
destination: "js/dev/tokens.module.reduced.alias.js",
format: "javascript/module-reduced",
filter: "isAlias"
},
{
destination: "js/dev/tokens.module.reduced.cmp.js",
format: "javascript/module-reduced",
filter: "isCmp"
},
{
destination: "js/dev/tokens.module.reduced.group.js",
format: "javascript/module-reduced",
filter: "isGroup"
},
{
destination: "js/dev/tokens.module.reduced.brand.js",
format: "javascript/module-reduced",
filter: "isBrand"
},
// root
{
destination: "js/tokens.module.reduced.alias.js",
format: "javascript/module-reduced",
filter: "isAlias"
},
{
destination: "js/tokens.module.reduced.meta.js",
format: "javascript/module-reduced",
filter: {
attributes: {
tier: "meta"
}
}
},
{
destination: "js/tokens.module.reduced.cmp.js",
format: "javascript/module-reduced",
filter: "isCmp"
},
// MODULE REDUCED MIN
{
destination: "js/tokens.module.reduced.alias.min.js",
format: "javascript/module-reduced-min",
filter: "isAlias"
},
{
destination: "js/tokens.module.reduced.cmp.min.js",
format: "javascript/module-reduced-min",
filter: "isCmp"
},
// ESM
{
destination: "js/tokens.esm.alias.js",
format: "javascript/esm-reduced-min",
filter: "isAlias"
},
{
destination: "js/tokens.esm.meta.js",
format: "javascript/esm-reduced-min",
filter: {
attributes: {
tier: "meta"
}
}
},
{
destination: "js/tokens.esm.cmp.js",
format: "javascript/esm-reduced-min",
filter: "isCmp"
}
]
},
"web/ts": {
transformGroup: "tokens-js",
buildPath: output,
files: [
{
destination: "brand.d.ts",
format: "typescript/module-reduced-declarations",
filter: "isCmpAlias"
}
]
},
"web/html": {
transformGroup: "tokens-js",
buildPath: output,
files: [
{
destination: "html/preview/tokens.alias.html",
format: "html/preview",
filter: "isAlias"
},
{
destination: "html/preview/tokens.cmp.html",
format: "html/preview",
filter: "isCmp"
},
{
destination: "html/preview/tokens.all.html",
format: "html/preview",
filter: "isCmpAlias"
}
]
},
"web/json": {
transformGroup: "tokens-json",
buildPath: output,
files: [
{
destination: "json/tokens.json.all.json",
format: "json/flat",
filter: "isNotFigma"
},
{
destination: "json/tokens.json.global.json",
format: "json/flat",
filter: "isGlobal"
},
{
destination: "json/tokens.json.alias.json",
format: "json/flat",
filter: "isAlias"
},
{
destination: "json/tokens.json.cmp.json",
format: "json/flat",
filter: "isCmp"
},
{
destination: "json/tokens.json.group.json",
format: "json/flat",
filter: "isGroup"
},
{
destination: "json/tokens.json.brand.json",
format: "json/flat",
filter: "isBrand"
}
]
},
"web/scss": {
transformGroup: "tokens-scss",
buildPath: output,
files: [
{
destination: "scss/dev/tokens.sass.all.scss",
format: "scss/variables",
filter: "isNotFigma"
},
{
destination: "scss/dev/tokens.sass.global.scss",
format: "scss/variables",
filter: "isGlobal"
},
{
destination: "scss/dev/tokens.sass.alias.scss",
format: "scss/variables",
filter: "isAlias"
},
{
destination: "scss/tokens.sass.alias.scss",
format: "scss/variables",
filter: "isAlias"
},
{
destination: "scss/dev/tokens.sass.cmp.scss",
format: "scss/variables",
filter: "isCmp"
},
{
destination: "scss/tokens.sass.cmp.scss",
format: "scss/variables",
filter: "isCmp"
},
{
destination: "scss/dev/tokens.sass.group.scss",
format: "scss/variables",
filter: "isGroup"
},
{
destination: "scss/dev/tokens.sass.brand.scss",
format: "scss/variables",
filter: "isBrand"
}
]
},
"web/css": {
transformGroup: "tokens-css",
buildPath: output,
files: [
{
destination: "css/dev/tokens.css.all.css",
format: "css/variables",
filter: "isNotFigma"
},
{
destination: "css/dev/tokens.css.global.css",
format: "css/variables",
filter: "isGlobal"
},
{
destination: "css/dev/tokens.css.alias.css",
format: "css/variables",
filter: "isAlias"
},
{
destination: "css/tokens.css.alias.css",
format: "css/variables",
filter: "isAlias"
},
{
destination: "css/dev/tokens.css.cmp.css",
format: "css/variables",
filter: "isCmp"
},
{
destination: "css/tokens.css.cmp.css",
format: "css/variables",
filter: "isCmp"
},
{
destination: "css/dev/tokens.css.group.css",
format: "css/variables",
filter: "isGroup"
},
{
destination: "css/dev/tokens.css.brand.css",
format: "css/variables",
filter: "isBrand"
}
]
},
figma: {
transformGroup: "figma-alias",
buildPath: output,
files: [
// new Figma plugin format:
// https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens
{
destination: "figma/figma_base.json",
format: "figma/figmatokens",
filter: "isFigmaBase"
},
{
destination: "figma/figma_scheme.json",
format: "figma/figmatokens",
filter: "isFigmaScheme"
}
]
}
}
});
// src/generator.ts
StyleDictionary.registerFormat(json.flat);
StyleDictionary.registerFormat(figma.figmatokens);
StyleDictionary.registerFormat(text.flat);
StyleDictionary.registerFormat(javascript.moduleReduced);
StyleDictionary.registerFormat(javascript.moduleReducedMin);
StyleDictionary.registerFormat(javascript.esmReducedMin);
StyleDictionary.registerFormat(typescript.moduleReducedDeclarations);
StyleDictionary.registerTransform(size.pxToPt);
StyleDictionary.registerTransform(alias.cti);
StyleDictionary.registerTransform(alias.group);
StyleDictionary.registerTransform(alias.jsonComponent);
StyleDictionary.registerTransform(size.pxToDp);
StyleDictionary.registerTransform(size.remToPxBase10);
StyleDictionary.registerTransform(size.remToIntegerBase10);
StyleDictionary.registerTransform(shadow.boxShadowToFigma);
StyleDictionary.registerFilter(isGlobal);
StyleDictionary.registerFilter(isAlias);
StyleDictionary.registerFilter(isFigmaBase);
StyleDictionary.registerFilter(isFigmaScheme);
StyleDictionary.registerFilter(isBrand);
StyleDictionary.registerFilter(isCmp);
StyleDictionary.registerFilter(isGroup);
StyleDictionary.registerFilter(isNotFigma);
StyleDictionary.registerFilter(isCmpAlias);
StyleDictionary.registerTransformGroup(figma2);
StyleDictionary.registerTransformGroup(styleguide);
StyleDictionary.registerTransformGroup(styleguidejs);
StyleDictionary.registerTransformGroup(tokensJs);
StyleDictionary.registerTransformGroup(tokensJson);
StyleDictionary.registerTransformGroup(tokensScss);
StyleDictionary.registerTransformGroup(tokensCss);
StyleDictionary.registerTransformGroup(tokensAndroid);
var generate = async ({
scheme = "light" /* Light */,
menuScheme = "light" /* Light */,
source,
output
}) => {
const config = getStyleDictionaryConfig(scheme, menuScheme, source, output);
const sd = new StyleDictionary(config);
await sd.hasInitialized;
await sd.buildPlatform("web/js");
await sd.buildPlatform("web/json");
await sd.buildPlatform("web/scss");
await sd.buildPlatform("web/css");
await sd.buildPlatform("figma");
return true;
};
var generateTypes = async ({ output }) => {
const config = getStyleDictionaryConfig(
"light" /* Light */,
"light" /* Light */,
null,
output
);
const sd = new StyleDictionary(config);
await sd.hasInitialized;
await sd.buildPlatform("web/ts");
return true;
};
// src/validations/json.ts
var validate = (tokens) => tokens.reduce(
(acc, cur) => typeof cur.value !== "string" && typeof cur.value !== "number" && typeof cur.value !== "object" ? [...acc, cur.name] : acc,
[]
);
export {
Scheme,
generate,
generateTypes,
validate as validateJson
};
//# sourceMappingURL=index.js.map