@digdir/designsystemet 1.13.1 → 1.13.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/bin/config.js +50 -658
  2. package/dist/bin/designsystemet.js +131 -4623
  3. package/dist/bin/options.js +22 -14
  4. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  5. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  6. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  7. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  8. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  9. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  10. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  11. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  12. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  13. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  15. package/dist/package.js +5 -0
  16. package/dist/src/colors/colorMetadata.js +255 -261
  17. package/dist/src/colors/index.js +5 -522
  18. package/dist/src/colors/theme.js +104 -343
  19. package/dist/src/colors/types.js +22 -25
  20. package/dist/src/colors/utils.js +241 -154
  21. package/dist/src/config.js +103 -444
  22. package/dist/src/index.js +10 -3588
  23. package/dist/src/migrations/beta-to-v1.js +339 -537
  24. package/dist/src/migrations/codemods/css/plugins.js +31 -42
  25. package/dist/src/migrations/codemods/css/run.js +20 -151
  26. package/dist/src/migrations/color-rename-next49.js +44 -220
  27. package/dist/src/migrations/index.js +7 -577
  28. package/dist/src/tokens/build.js +39 -1816
  29. package/dist/src/tokens/create/files.js +43 -602
  30. package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
  31. package/dist/src/tokens/create/generators/$metadata.js +17 -20
  32. package/dist/src/tokens/create/generators/$themes.js +137 -311
  33. package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
  34. package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
  35. package/dist/src/tokens/create/generators/primitives/size.js +146 -156
  36. package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
  37. package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
  38. package/dist/src/tokens/create/generators/semantic/color.js +42 -326
  39. package/dist/src/tokens/create/generators/semantic/style.js +379 -382
  40. package/dist/src/tokens/create/generators/themes/theme.js +108 -392
  41. package/dist/src/tokens/create.js +47 -1591
  42. package/dist/src/tokens/format.js +38 -3324
  43. package/dist/src/tokens/generate-config.js +155 -298
  44. package/dist/src/tokens/index.js +3 -3344
  45. package/dist/src/tokens/process/configs/color.js +50 -1086
  46. package/dist/src/tokens/process/configs/semantic.js +45 -1084
  47. package/dist/src/tokens/process/configs/shared.js +18 -109
  48. package/dist/src/tokens/process/configs/size-mode.js +27 -1083
  49. package/dist/src/tokens/process/configs/size.js +32 -1084
  50. package/dist/src/tokens/process/configs/type-scale.js +49 -1084
  51. package/dist/src/tokens/process/configs/typography.js +63 -1085
  52. package/dist/src/tokens/process/configs.js +88 -1225
  53. package/dist/src/tokens/process/formats/css/color.js +58 -1080
  54. package/dist/src/tokens/process/formats/css/semantic.js +27 -1082
  55. package/dist/src/tokens/process/formats/css/size-mode.js +43 -1078
  56. package/dist/src/tokens/process/formats/css/size.js +86 -1080
  57. package/dist/src/tokens/process/formats/css/type-scale.js +53 -1084
  58. package/dist/src/tokens/process/formats/css/typography.js +27 -1082
  59. package/dist/src/tokens/process/formats/css.js +18 -1082
  60. package/dist/src/tokens/process/output/declarations.js +18 -1202
  61. package/dist/src/tokens/process/output/tailwind.js +26 -40
  62. package/dist/src/tokens/process/output/theme.js +73 -206
  63. package/dist/src/tokens/process/platform.js +165 -1356
  64. package/dist/src/tokens/process/transformers.js +49 -89
  65. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
  66. package/dist/src/tokens/process/utils/kebab-case.js +7 -5
  67. package/dist/src/tokens/types.js +6 -7
  68. package/dist/src/tokens/utils.js +102 -93
  69. package/dist/src/types.js +1 -5
  70. package/dist/src/utils/filesystem.js +112 -124
  71. package/package.json +18 -21
  72. package/configs/test-tokens.config.json +0 -82
  73. package/dist/src/scripts/createJsonSchema.js +0 -409
  74. package/dist/src/scripts/update-preview-tokens.js +0 -3353
@@ -1,1227 +1,90 @@
1
- // src/tokens/process/configs.ts
2
- import { register } from "@tokens-studio/sd-transforms";
3
- import * as R15 from "ramda";
4
- import StyleDictionary2 from "style-dictionary";
5
-
6
- // src/tokens/utils.ts
1
+ import { traverseObj } from "../utils.js";
2
+ import { resolveMath, sizeRem, typographyName, unitless } from "./transformers.js";
3
+ import { formats } from "./formats/css.js";
4
+ import { colorCategoryVariables, colorSchemeVariables } from "./configs/color.js";
5
+ import { semanticVariables } from "./configs/semantic.js";
6
+ import { sizeVariables } from "./configs/size.js";
7
+ import { sizeModeVariables } from "./configs/size-mode.js";
8
+ import { typeScaleVariables } from "./configs/type-scale.js";
9
+ import { typographyVariables } from "./configs/typography.js";
10
+ import { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
11
+ import { buildOptions } from "./platform.js";
7
12
  import * as R from "ramda";
8
-
9
- // src/tokens/types.ts
10
- var colorCategories = {
11
- main: "main",
12
- support: "support"
13
- };
14
-
15
- // src/tokens/utils.ts
16
- var mapToLowerCase = R.map(R.toLower);
17
- var hasAnyTruth = R.any(R.equals(true));
18
- var getType = (token) => (token.$type ?? token.type) || "";
19
- var getValue = (token) => token.$value ?? token.value;
20
- var typeEquals = R.curry(
21
- (types, token) => {
22
- if (R.isNil(token)) {
23
- return false;
24
- }
25
- return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
26
- }
27
- );
28
- var pathStartsWithOneOf = R.curry(
29
- (paths, token) => {
30
- if (R.isNil(token)) {
31
- return false;
32
- }
33
- const tokenPath = mapToLowerCase(token.path);
34
- const matchPathsStartingWith = R.map((pathOrString) => {
35
- const path = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
36
- return R.startsWith(mapToLowerCase(path), tokenPath);
37
- }, paths);
38
- return hasAnyTruth(matchPathsStartingWith);
39
- }
40
- );
41
- function isSemanticToken(token) {
42
- return token.filePath.includes("semantic/");
43
- }
44
- function isSemanticColorToken(token, color) {
45
- return token.filePath.includes("semantic/") && R.startsWith(["color", color], token.path);
46
- }
47
- function isGlobalColorToken(token) {
48
- return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
49
- }
50
- function isColorCategoryToken(token, category) {
51
- if (!category) {
52
- return Object.keys(colorCategories).some(
53
- (colorCategory2) => isColorCategoryToken(token, colorCategory2)
54
- );
55
- }
56
- return R.startsWith(["color", category], token.path);
57
- }
58
- var isDigit = (s) => /^\d+$/.test(s);
59
- function traverseObj(obj, fn) {
60
- for (const key in obj) {
61
- const prop3 = obj[key];
62
- if (prop3 != null) {
63
- fn.apply(null, [obj, key, prop3]);
64
- if (typeof prop3 === "object") {
65
- traverseObj(prop3, fn);
66
- }
67
- }
68
- }
69
- return obj;
70
- }
71
- function inlineTokens(shouldInline, tokens) {
72
- const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
73
- return otherTokens.map((token) => {
74
- let transformed = getValue(token.original);
75
- for (const ref of inlineableTokens) {
76
- const refName = ref.path.join(".");
77
- if (typeof transformed === "string") {
78
- transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
79
- }
80
- }
81
- const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
82
- return tokenWithInlinedRefs;
83
- });
84
- }
85
- var sizeMap = {
86
- xsmall: "xs",
87
- small: "sm",
88
- medium: "md",
89
- large: "lg",
90
- xlarge: "xl"
91
- };
92
- function shortSizeName(size2) {
93
- return sizeMap[size2] ?? size2;
94
- }
95
- var sizeComparator = (size2) => {
96
- const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
97
- return sortIndex ?? 0;
98
- };
99
- function orderBySize(sizes) {
100
- return R.sortBy(sizeComparator, sizes);
101
- }
102
-
103
- // src/tokens/process/configs/color.ts
104
- import * as R11 from "ramda";
105
-
106
- // src/tokens/process/formats/css/color.ts
107
- import * as R4 from "ramda";
108
- import { createPropertyFormatter } from "style-dictionary/utils";
109
-
110
- // src/tokens/process/platform.ts
111
- import pc2 from "picocolors";
112
- import * as R3 from "ramda";
113
13
  import StyleDictionary from "style-dictionary";
114
-
115
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
116
- var BoxShadowTypes;
117
- (function(BoxShadowTypes2) {
118
- BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
119
- BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
120
- })(BoxShadowTypes || (BoxShadowTypes = {}));
121
-
122
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
123
- var ColorModifierTypes;
124
- (function(ColorModifierTypes2) {
125
- ColorModifierTypes2["LIGHTEN"] = "lighten";
126
- ColorModifierTypes2["DARKEN"] = "darken";
127
- ColorModifierTypes2["MIX"] = "mix";
128
- ColorModifierTypes2["ALPHA"] = "alpha";
129
- })(ColorModifierTypes || (ColorModifierTypes = {}));
130
-
131
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
132
- var ColorSpaceTypes;
133
- (function(ColorSpaceTypes2) {
134
- ColorSpaceTypes2["LCH"] = "lch";
135
- ColorSpaceTypes2["SRGB"] = "srgb";
136
- ColorSpaceTypes2["P3"] = "p3";
137
- ColorSpaceTypes2["HSL"] = "hsl";
138
- })(ColorSpaceTypes || (ColorSpaceTypes = {}));
139
-
140
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
141
- var Properties;
142
- (function(Properties2) {
143
- Properties2["sizing"] = "sizing";
144
- Properties2["height"] = "height";
145
- Properties2["width"] = "width";
146
- Properties2["spacing"] = "spacing";
147
- Properties2["verticalPadding"] = "verticalPadding";
148
- Properties2["horizontalPadding"] = "horizontalPadding";
149
- Properties2["paddingTop"] = "paddingTop";
150
- Properties2["paddingRight"] = "paddingRight";
151
- Properties2["paddingBottom"] = "paddingBottom";
152
- Properties2["paddingLeft"] = "paddingLeft";
153
- Properties2["itemSpacing"] = "itemSpacing";
154
- Properties2["fill"] = "fill";
155
- Properties2["backgroundBlur"] = "backgroundBlur";
156
- Properties2["border"] = "border";
157
- Properties2["borderTop"] = "borderTop";
158
- Properties2["borderRight"] = "borderRight";
159
- Properties2["borderBottom"] = "borderBottom";
160
- Properties2["borderLeft"] = "borderLeft";
161
- Properties2["borderColor"] = "borderColor";
162
- Properties2["borderRadius"] = "borderRadius";
163
- Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
164
- Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
165
- Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
166
- Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
167
- Properties2["borderWidth"] = "borderWidth";
168
- Properties2["borderWidthTop"] = "borderWidthTop";
169
- Properties2["borderWidthRight"] = "borderWidthRight";
170
- Properties2["borderWidthBottom"] = "borderWidthBottom";
171
- Properties2["borderWidthLeft"] = "borderWidthLeft";
172
- Properties2["boxShadow"] = "boxShadow";
173
- Properties2["opacity"] = "opacity";
174
- Properties2["fontFamilies"] = "fontFamilies";
175
- Properties2["fontWeights"] = "fontWeights";
176
- Properties2["fontSizes"] = "fontSizes";
177
- Properties2["lineHeights"] = "lineHeights";
178
- Properties2["typography"] = "typography";
179
- Properties2["composition"] = "composition";
180
- Properties2["letterSpacing"] = "letterSpacing";
181
- Properties2["paragraphSpacing"] = "paragraphSpacing";
182
- Properties2["textCase"] = "textCase";
183
- Properties2["dimension"] = "dimension";
184
- Properties2["textDecoration"] = "textDecoration";
185
- Properties2["asset"] = "asset";
186
- Properties2["tokenValue"] = "tokenValue";
187
- Properties2["value"] = "value";
188
- Properties2["tokenName"] = "tokenName";
189
- Properties2["description"] = "description";
190
- })(Properties || (Properties = {}));
191
-
192
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
193
- var TokenSetStatus;
194
- (function(TokenSetStatus2) {
195
- TokenSetStatus2["DISABLED"] = "disabled";
196
- TokenSetStatus2["SOURCE"] = "source";
197
- TokenSetStatus2["ENABLED"] = "enabled";
198
- })(TokenSetStatus || (TokenSetStatus = {}));
199
-
200
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
201
- var TokenTypes;
202
- (function(TokenTypes2) {
203
- TokenTypes2["OTHER"] = "other";
204
- TokenTypes2["COLOR"] = "color";
205
- TokenTypes2["BORDER_RADIUS"] = "borderRadius";
206
- TokenTypes2["SIZING"] = "sizing";
207
- TokenTypes2["SPACING"] = "spacing";
208
- TokenTypes2["TEXT"] = "text";
209
- TokenTypes2["TYPOGRAPHY"] = "typography";
210
- TokenTypes2["OPACITY"] = "opacity";
211
- TokenTypes2["BORDER_WIDTH"] = "borderWidth";
212
- TokenTypes2["STROKE_STYLE"] = "strokeStyle";
213
- TokenTypes2["BOX_SHADOW"] = "boxShadow";
214
- TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
215
- TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
216
- TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
217
- TokenTypes2["FONT_SIZES"] = "fontSizes";
218
- TokenTypes2["LETTER_SPACING"] = "letterSpacing";
219
- TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
220
- TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
221
- TokenTypes2["TEXT_DECORATION"] = "textDecoration";
222
- TokenTypes2["TEXT_CASE"] = "textCase";
223
- TokenTypes2["COMPOSITION"] = "composition";
224
- TokenTypes2["DIMENSION"] = "dimension";
225
- TokenTypes2["BORDER"] = "border";
226
- TokenTypes2["ASSET"] = "asset";
227
- TokenTypes2["BOOLEAN"] = "boolean";
228
- TokenTypes2["NUMBER"] = "number";
229
- })(TokenTypes || (TokenTypes = {}));
230
-
231
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
232
- var BorderValues;
233
- (function(BorderValues2) {
234
- BorderValues2["BORDER_COLOR"] = "color";
235
- BorderValues2["BORDER_WIDTH"] = "width";
236
- BorderValues2["BORDER_STYLE"] = "style";
237
- })(BorderValues || (BorderValues = {}));
238
-
239
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
240
- var StrokeStyleValues;
241
- (function(StrokeStyleValues2) {
242
- StrokeStyleValues2["SOLID"] = "solid";
243
- StrokeStyleValues2["DASHED"] = "dashed";
244
- StrokeStyleValues2["DOTTED"] = "dotted";
245
- StrokeStyleValues2["DOUBLE"] = "double";
246
- StrokeStyleValues2["GROOVE"] = "groove";
247
- StrokeStyleValues2["RIDGE"] = "ridge";
248
- StrokeStyleValues2["OUTSET"] = "outset";
249
- StrokeStyleValues2["INSET"] = "inset";
250
- })(StrokeStyleValues || (StrokeStyleValues = {}));
251
-
252
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
253
- var BoxShadowValues;
254
- (function(BoxShadowValues2) {
255
- BoxShadowValues2["TYPE"] = "type";
256
- BoxShadowValues2["COLOR"] = "color";
257
- BoxShadowValues2["X"] = "x";
258
- BoxShadowValues2["Y"] = "y";
259
- BoxShadowValues2["BLUR"] = "blur";
260
- BoxShadowValues2["SPREAD"] = "spread";
261
- BoxShadowValues2["BLEND_MODE"] = "blendMode";
262
- })(BoxShadowValues || (BoxShadowValues = {}));
263
-
264
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
265
- var TypographyValues;
266
- (function(TypographyValues2) {
267
- TypographyValues2["FONT_FAMILY"] = "fontFamily";
268
- TypographyValues2["FONT_WEIGHT"] = "fontWeight";
269
- TypographyValues2["LINE_HEIGHT"] = "lineHeight";
270
- TypographyValues2["FONT_SIZE"] = "fontSize";
271
- TypographyValues2["LETTER_SPACING"] = "letterSpacing";
272
- TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
273
- TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
274
- TypographyValues2["TEXT_DECORATION"] = "textDecoration";
275
- TypographyValues2["TEXT_CASE"] = "textCase";
276
- })(TypographyValues || (TypographyValues = {}));
277
-
278
- // src/tokens/process/utils/getMultidimensionalThemes.ts
279
- import pc from "picocolors";
280
- import * as R2 from "ramda";
281
- var getMultidimensionalThemes = (processed$themes, dimensions) => {
282
- const verboseLogging = buildOptions?.verbose;
283
- const grouped$themes = groupThemes(processed$themes);
284
- const permutations = permutateThemes(grouped$themes);
285
- const ALL_DEPENDENT_ON = ["theme"];
286
- const keys2 = R2.keys(grouped$themes);
287
- const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
288
- if (verboseLogging) {
289
- console.log(pc.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
290
- console.log(pc.cyan(` (ignoring permutations for ${nonDependentKeys})`));
291
- }
292
- return permutations.filter((val) => {
293
- const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
294
- return filters.every((x) => x);
295
- });
296
- };
297
- var processed = Symbol("Type brand for ProcessedThemeObject");
298
- function groupThemes(themes) {
299
- const groups = {};
300
- for (const theme of themes) {
301
- if (theme.group) {
302
- const groupKey = theme.group;
303
- groups[groupKey] = [...groups[groupKey] ?? [], theme];
304
- } else {
305
- throw new Error(
306
- `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
307
- );
308
- }
309
- }
310
- return groups;
311
- }
312
- var hasUnknownProps = R2.pipe(R2.values, R2.none(R2.equals("unknown")), R2.not);
313
- function permutateThemes(groups) {
314
- const separator = "_";
315
- const permutations = cartesian(Object.values(groups));
316
- const permutatedThemes = permutations.map((perm) => {
317
- const permutatedTheme = perm.reduce(
318
- (acc, theme) => {
319
- const { group, name, selectedTokenSets } = theme;
320
- let updatedPermutation = acc.permutation;
321
- if (group) {
322
- const groupProp = R2.lensProp(group);
323
- updatedPermutation = R2.set(groupProp, name, updatedPermutation);
324
- }
325
- const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
326
- const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
327
- return {
328
- permutation: updatedPermutation,
329
- name: updatedName,
330
- selectedTokenSets: sets
331
- };
332
- },
333
- {
334
- name: "",
335
- selectedTokenSets: [],
336
- permutation: {
337
- "color-scheme": "unknown",
338
- "main-color": "unknown",
339
- "support-color": "unknown",
340
- theme: "unknown",
341
- semantic: "unknown",
342
- size: "unknown",
343
- typography: "unknown"
344
- }
345
- }
346
- );
347
- if (hasUnknownProps(permutatedTheme)) {
348
- throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
349
- }
350
- const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
351
- return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
352
- });
353
- return permutatedThemes;
354
- }
355
- function filterTokenSets(tokensets) {
356
- return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
357
- if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
358
- return -1;
359
- }
360
- if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
361
- return 1;
362
- }
363
- return 0;
364
- }).map((entry) => entry[0]);
365
- }
366
- function cartesian(a) {
367
- return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
368
- }
369
-
370
- // src/tokens/process/platform.ts
371
- var buildOptions = {
372
- verbose: false,
373
- processed$themes: [],
374
- buildTokenFormats: {}
375
- };
376
- var sd = new StyleDictionary();
377
- var buildConfigs = {
378
- typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
379
- sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
380
- size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
381
- typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
382
- "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
383
- "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
384
- "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
385
- "neutral-color": {
386
- getConfig: configs.neutralColorVariables,
387
- dimensions: ["semantic"],
388
- log: ({ permutation: { theme } }) => `${theme} - neutral`
389
- },
390
- "success-color": {
391
- getConfig: configs.successColorVariables,
392
- dimensions: ["semantic"],
393
- log: ({ permutation: { theme } }) => `${theme} - success`
394
- },
395
- "danger-color": {
396
- getConfig: configs.dangerColorVariables,
397
- dimensions: ["semantic"],
398
- log: ({ permutation: { theme } }) => `${theme} - danger`
399
- },
400
- "warning-color": {
401
- getConfig: configs.warningColorVariables,
402
- dimensions: ["semantic"],
403
- log: ({ permutation: { theme } }) => `${theme} - warning`
404
- },
405
- "info-color": {
406
- getConfig: configs.infoColorVariables,
407
- dimensions: ["semantic"],
408
- log: ({ permutation: { theme } }) => `${theme} - info`
409
- },
410
- semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
411
- };
412
-
413
- // src/tokens/process/formats/css/color.ts
414
- var prefersColorScheme = (colorScheme2, content) => `
415
- @media (prefers-color-scheme: ${colorScheme2}) {
416
- [data-color-scheme="auto"] ${content}
417
- }
418
- `;
419
- var colorScheme = {
420
- name: "ds/css-colorscheme",
421
- format: async ({ dictionary, options, platform }) => {
422
- const { allTokens } = dictionary;
423
- const { outputReferences, usesDtcg } = options;
424
- const { selector, colorScheme: colorScheme2, layer } = platform;
425
- const colorScheme_ = colorScheme2;
426
- const format = createPropertyFormatter({
427
- outputReferences,
428
- dictionary,
429
- format: "css",
430
- usesDtcg
431
- });
432
- const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
433
- color-scheme: ${colorScheme_};
434
- ` : "";
435
- const filteredAllTokens = allTokens.filter(
436
- R4.allPass([
437
- R4.anyPass([
438
- // Include semantic tokens in the output
439
- isSemanticToken,
440
- // Include global color tokens
441
- isGlobalColorToken
442
- ]),
443
- // Don't include color category tokens -- they are exported separately
444
- (t) => !isColorCategoryToken(t)
445
- ])
446
- );
447
- const formattedMap = filteredAllTokens.map((token) => ({
448
- token,
449
- formatted: format(token)
450
- }));
451
- const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
452
- const content = `{
453
- ${formattedTokens}
454
- ${colorSchemeProperty}}
455
- `;
456
- const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
457
- const body = R4.isNotNil(layer) ? `@layer ${layer} {
458
- ${selector} ${content} ${autoSelectorContent}
459
- }
460
- ` : `${selector} ${content} ${autoSelectorContent}
461
- `;
462
- return body;
463
- }
464
- };
465
- var colorCategory = {
466
- name: "ds/css-colorcategory",
467
- format: async ({ dictionary, file, options, platform }) => {
468
- const { outputReferences, usesDtcg } = options;
469
- const { selector, layer } = platform;
470
- const destination = file.destination;
471
- const format = R4.compose(
472
- createPropertyFormatter({
473
- outputReferences,
474
- dictionary,
475
- format: "css",
476
- usesDtcg
477
- }),
478
- (token) => ({
479
- ...token,
480
- name: token.name.replace(/color-\w+-/, "color-"),
481
- original: {
482
- ...token.original,
483
- $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
484
- }
485
- })
486
- );
487
- const formattedMap = dictionary.allTokens.map((token) => ({
488
- token,
489
- formatted: format(token)
490
- }));
491
- buildOptions.buildTokenFormats[destination] = formattedMap;
492
- const formattedTokens = formattedMap.map(R4.view(R4.lensProp("formatted"))).join("\n");
493
- const content = `{
494
- ${formattedTokens}
495
- }
496
- `;
497
- const body = R4.isNotNil(layer) ? `@layer ${layer} {
498
- ${selector} ${content}
499
- }
500
- ` : `${selector} ${content}
501
- `;
502
- return body;
503
- }
504
- };
505
-
506
- // src/tokens/process/formats/css/semantic.ts
507
- import * as R6 from "ramda";
508
- import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
509
-
510
- // src/tokens/process/formats/css/size.ts
511
- import * as R5 from "ramda";
512
- import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
513
- var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
514
- var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
515
- var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
516
- var isInlineTokens = R5.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
517
- var overrideSizingFormula = (format, token) => {
518
- const [name, value] = format(token).replace(/;$/, "").split(": ");
519
- let calc;
520
- let round;
521
- if (token.path[1] === "unit") {
522
- calc = `calc(1rem * ${value})`;
523
- } else if (value.startsWith("floor")) {
524
- calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
525
- round = `round(down, ${calc}, 1px)`;
526
- } else {
527
- calc = value.includes("*") ? `calc(${value})` : value;
528
- }
529
- return {
530
- name,
531
- round: round ?? calc,
532
- calc
533
- };
534
- };
535
- var formatSizingTokens = (format, tokens) => R5.reduce(
536
- (acc, token) => {
537
- const { round, calc, name } = overrideSizingFormula(format, token);
538
- return {
539
- tokens: [...acc.tokens, token],
540
- round: [...acc.round, `${name}: ${round};`],
541
- calc: [...acc.calc, `${name}: ${calc};`]
542
- };
543
- },
544
- { tokens: [], round: [], calc: [] },
545
- tokens
546
- );
547
- var sizingTemplate = ({ round, calc }) => {
548
- const usesRounding = round.filter((val, i) => val !== calc[i]);
549
- return `
550
- ${calc.join("\n")}
551
-
552
- @supports (width: round(down, .1em, 1px)) {
553
- ${usesRounding.join("\n ")}
554
- }`;
555
- };
556
- var size = {
557
- name: "ds/css-size",
558
- format: async ({ dictionary, file, options, platform }) => {
559
- const { outputReferences, usesDtcg } = options;
560
- const { selector, layer } = platform;
561
- const destination = file.destination;
562
- const format = createPropertyFormatter2({
563
- outputReferences,
564
- dictionary,
565
- format: "css",
566
- usesDtcg
567
- });
568
- const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
569
- const filteredTokens = R5.reject((token) => R5.equals(["_size", "mode-font-size"], token.path), tokens);
570
- const [sizingTokens, restTokens] = R5.partition(
571
- (t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
572
- filteredTokens
573
- );
574
- const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
575
- const formattedMap = restTokens.map((token) => ({
576
- token,
577
- formatted: format(token)
578
- }));
579
- const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
580
- token: formattedSizingTokens.tokens[i],
581
- formatted: t
582
- }));
583
- buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
584
- const formattedTokens = [formattedMap.map(R5.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
585
- const content = `${selector} {
586
- ${formattedTokens.join("\n")}
587
- }
588
- `;
589
- const body = R5.isNotNil(layer) ? `@layer ${layer} {
590
- ${content}
591
- }
592
- ` : `${content}
593
- `;
594
- return body;
595
- }
596
- };
597
-
598
- // src/tokens/process/formats/css/semantic.ts
599
- var semantic = {
600
- name: "ds/css-semantic",
601
- format: async ({ dictionary, file, options, platform }) => {
602
- const { outputReferences, usesDtcg } = options;
603
- const { selector, layer } = platform;
604
- const destination = file.destination;
605
- const format = createPropertyFormatter3({
606
- outputReferences,
607
- dictionary,
608
- format: "css",
609
- usesDtcg
610
- });
611
- const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
612
- const formattedMap = tokens.map((token) => ({
613
- token,
614
- formatted: format(token)
615
- }));
616
- buildOptions.buildTokenFormats[destination] = formattedMap;
617
- const formattedTokens = formattedMap.map(R6.prop("formatted")).join("\n");
618
- const content = `${selector} {
619
- ${formattedTokens}
620
- }
621
- `;
622
- const body = R6.isNotNil(layer) ? `@layer ${layer} {
623
- ${content}
624
- }
625
- ` : `${content}
626
- `;
627
- return body;
628
- }
629
- };
630
-
631
- // src/tokens/process/formats/css/size-mode.ts
632
- import * as R8 from "ramda";
633
- import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
634
-
635
- // src/tokens/process/transformers.ts
636
- import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
637
- import * as R7 from "ramda";
638
- var isPx = R7.test(/\b\d+px\b/g);
639
- var sizeRem = {
640
- name: "ds/size/toRem",
641
- type: "value",
642
- transitive: true,
643
- filter: (token) => {
644
- const hasWantedType = typeEquals(["dimension", "fontsize"], token);
645
- const hasWantedPath = pathStartsWithOneOf([
646
- "border-radius",
647
- "font-size"
648
- /*, ['_size', 'mode-font-size']*/
649
- ], token);
650
- return hasWantedType && hasWantedPath;
651
- },
652
- transform: (token, config) => {
653
- const value = getValue(token);
654
- if (isPx(value)) {
655
- const baseFont = config.basePxFontSize || 16;
656
- const size2 = parseInt(value, 10);
657
- if (size2 === 0) {
658
- return "0";
659
- }
660
- return `${size2 / baseFont}rem`;
661
- }
662
- return value;
663
- }
664
- };
665
- var typographyName = {
666
- name: "name/typography",
667
- type: "name",
668
- transitive: true,
669
- // expanded tokens have different type so we match on path instead
670
- filter: (token) => pathStartsWithOneOf(["typography"], token),
671
- transform: (token) => {
672
- return token.name.replace("-typography", "");
673
- }
674
- };
675
- var resolveMath = {
676
- name: "ds/resolveMath",
677
- type: "value",
678
- transitive: true,
679
- filter: (token) => {
680
- const isValidValue = ["string", "object"].includes(typeof getValue(token));
681
- const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
682
- return isValidValue && isTokenOfInterest;
683
- },
684
- transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
685
- };
686
- var unitless = {
687
- name: "ds/unitless",
688
- type: "value",
689
- transitive: true,
690
- filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
691
- transform: (token) => parseInt(getValue(token), 10)
692
- };
693
-
694
- // src/tokens/process/configs/shared.ts
695
- var prefix = "ds";
696
- var basePxFontSize = 16;
697
- var dsTransformers = [
698
- "name/kebab",
699
- resolveMath.name,
700
- "ts/size/px",
701
- sizeRem.name,
702
- unitless.name,
703
- "ts/typography/fontWeight",
704
- typographyName.name,
705
- "ts/color/modifiers",
706
- "ts/color/css/hexrgba",
707
- "ts/size/lineheight",
708
- "shadow/css/shorthand"
709
- ];
710
-
711
- // src/tokens/process/formats/css/size-mode.ts
712
- var formatBaseSizeToken = (size2) => (token) => ({
713
- ...token,
714
- originalName: token.name,
715
- name: `${token.name}--${shortSizeName(size2)}`,
716
- $value: token.$value / basePxFontSize
717
- });
718
- var sizeMode = {
719
- name: "ds/css-size-mode",
720
- format: async ({ dictionary, file, options, platform }) => {
721
- const { outputReferences, usesDtcg } = options;
722
- const { selector, layer, size: size2 } = platform;
723
- const destination = file.destination;
724
- const format = createPropertyFormatter4({
725
- outputReferences,
726
- dictionary,
727
- format: "css",
728
- usesDtcg
729
- });
730
- const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
731
- const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
732
- const formattedMap = sizeSpecificTokens.map((token) => ({
733
- token,
734
- formatted: format({
735
- ...token,
736
- // Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
737
- name: token.originalName
738
- })
739
- }));
740
- buildOptions.buildTokenFormats[destination] = formattedMap;
741
- const content = `${selector} /* ${size2} */ {
742
- ${sizeSpecificVariables}
743
- }`;
744
- const body = wrapInLayer(content, layer);
745
- const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
746
- const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
747
- const sizingToggles = `:root, [data-size] {
748
- --ds-size: var(--ds-size--${defaultSize});
749
- ${sizes.map((size3) => ` --ds-size--${size3}: var(--ds-size,);`).join("\n")}
750
- --ds-size-mode-font-size:
751
- ${sizes.map((size3) => ` var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
752
- }`;
753
- const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
754
- const sharedContent = `${sizingToggles}
755
-
756
- ${sizingHelpers}`;
757
- const sharedBody = shortSizeName(size2) === R8.last(sizes) ? `
758
- ${wrapInLayer(sharedContent, layer)}` : "";
759
- return body + sharedBody;
760
- }
761
- };
762
- function wrapInLayer(content, layer) {
763
- return R8.isNotNil(layer) ? `@layer ${layer} {
764
- ${content}
765
- }
766
- ` : `${content}
767
- `;
768
- }
769
-
770
- // src/tokens/process/formats/css/typography.ts
771
- import * as R9 from "ramda";
772
- import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
773
- var typographyFontFamilyPredicate = R9.allPass([
774
- R9.pathSatisfies(R9.includes("typography"), ["path"]),
775
- R9.pathSatisfies(R9.includes("fontFamily"), ["path"])
776
- ]);
777
- var typography = {
778
- name: "ds/css-typography",
779
- format: async ({ dictionary, file, options, platform }) => {
780
- const { outputReferences, usesDtcg } = options;
781
- const { selector, layer } = platform;
782
- const destination = file.destination;
783
- const format = createPropertyFormatter5({
784
- outputReferences,
785
- dictionary,
786
- format: "css",
787
- usesDtcg
788
- });
789
- const filteredTokens = R9.reject(typographyFontFamilyPredicate, dictionary.allTokens);
790
- const formattedMap = filteredTokens.map((token) => ({
791
- token,
792
- formatted: format(token)
793
- }));
794
- buildOptions.buildTokenFormats[destination] = formattedMap;
795
- const formattedTokens = formattedMap.map(R9.view(R9.lensProp("formatted"))).join("\n");
796
- const content = selector ? `${selector} {
797
- ${formattedTokens}
798
- }` : formattedTokens;
799
- const body = R9.isNotNil(layer) ? `@layer ${layer} {
800
- ${content}
801
- }` : content;
802
- return body;
803
- }
804
- };
805
-
806
- // src/tokens/process/formats/css/type-scale.ts
807
- import * as R10 from "ramda";
808
- import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
809
- var isTypographyFontFamilyToken = R10.allPass([
810
- R10.pathSatisfies(R10.includes("typography"), ["path"]),
811
- R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
812
- ]);
813
- var formatTypographySizeToken = (format, token) => {
814
- const [name, value] = format(token).replace(/;$/, "").split(": ");
815
- let calc;
816
- let round;
817
- if (R10.startsWith(["font-size"], token.path)) {
818
- calc = `calc(${value} * var(--_ds-font-size-factor))`;
819
- round = `round(${calc}, 1px)`;
820
- } else {
821
- calc = value;
822
- }
823
- return { name, calc, round: round ?? calc };
824
- };
825
- var formatTypographySizeTokens = (format, tokens) => R10.reduce(
826
- (acc, token) => {
827
- const { name, calc, round } = formatTypographySizeToken(format, token);
828
- acc.tokens.push(token);
829
- acc.calc.push(`${name}: ${calc};`);
830
- acc.round.push(`${name}: ${round};`);
831
- return acc;
832
- },
833
- { tokens: [], calc: [], round: [] },
834
- tokens
835
- );
836
- var typeScale = {
837
- name: "ds/css-type-scale",
838
- format: async ({ dictionary, file, options, platform }) => {
839
- const { outputReferences, usesDtcg } = options;
840
- const { selector, layer } = platform;
841
- const destination = file.destination;
842
- const format = createPropertyFormatter6({
843
- outputReferences,
844
- dictionary,
845
- format: "css",
846
- usesDtcg
847
- });
848
- const filteredTokens = R10.reject(R10.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
849
- const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
850
- const formattedMap = formattedTokens.round.map((t, i) => ({
851
- token: formattedTokens.tokens[i],
852
- formatted: t
853
- }));
854
- buildOptions.buildTokenFormats[destination] = formattedMap;
855
- const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
856
- const content = `${selector} {
857
- ${sizeFactor}${sizingTemplate(formattedTokens)}
858
- }`;
859
- const body = R10.isNotNil(layer) ? `@layer ${layer} {
860
- ${content}
861
- }` : content;
862
- return body;
863
- }
864
- };
865
-
866
- // src/tokens/process/formats/css.ts
867
- var formats = {
868
- colorScheme,
869
- colorCategory,
870
- semantic,
871
- sizeMode,
872
- size,
873
- typography,
874
- typeScale
875
- };
876
-
877
- // src/tokens/process/configs/color.ts
878
- var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
879
- const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
880
- const layer = `ds.theme.color-scheme.${colorScheme2}`;
881
- return {
882
- preprocessors: ["tokens-studio"],
883
- platforms: {
884
- css: {
885
- // custom
886
- colorScheme: colorScheme2,
887
- theme,
888
- selector,
889
- layer,
890
- //
891
- prefix,
892
- buildPath: `${theme}/`,
893
- transforms: dsTransformers,
894
- files: [
895
- {
896
- destination: `color-scheme/${colorScheme2}.css`,
897
- format: formats.colorScheme.name,
898
- filter: (token) => typeEquals("color", token) && !R11.startsWith(["global"], token.path)
899
- }
900
- ],
901
- options: {
902
- outputReferences: false
903
- }
904
- }
905
- }
906
- };
907
- };
908
- var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
909
- const category = opts.category;
910
- const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
911
- if (!color) {
912
- throw new Error(
913
- category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
914
- );
915
- }
916
- const layer = `ds.theme.color`;
917
- const isRootColor = color === buildOptions?.defaultColor;
918
- const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
919
- const config = {
920
- preprocessors: ["tokens-studio"],
921
- platforms: {
922
- css: {
923
- // custom
924
- colorScheme: colorScheme2,
925
- theme,
926
- selector,
927
- layer,
928
- //
929
- prefix,
930
- buildPath: `${theme}/`,
931
- transforms: dsTransformers,
932
- files: [
933
- {
934
- destination: `color/${color}.css`,
935
- format: formats.colorCategory.name,
936
- filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
937
- }
938
- ],
939
- options: {
940
- outputReferences: true
941
- }
942
- }
943
- }
944
- };
945
- return config;
946
- };
947
-
948
- // src/tokens/process/configs/semantic.ts
949
- import * as R12 from "ramda";
950
- import { outputReferencesFilter } from "style-dictionary/utils";
951
- var semanticVariables = ({ theme }) => {
952
- const selector = `:root`;
953
- const layer = `ds.theme.semantic`;
954
- return {
955
- preprocessors: ["tokens-studio"],
956
- platforms: {
957
- css: {
958
- // custom
959
- theme,
960
- basePxFontSize,
961
- selector,
962
- layer,
963
- //
964
- prefix,
965
- buildPath: `${theme}/`,
966
- transforms: dsTransformers,
967
- files: [
968
- {
969
- destination: `semantic.css`,
970
- format: formats.semantic.name,
971
- filter: (token) => {
972
- const isUwantedToken = R12.anyPass([R12.includes("primitives/global")])(token.filePath);
973
- const isPrivateToken = R12.includes("_", token.path);
974
- const unwantedPaths = pathStartsWithOneOf(
975
- ["size", "_size", "font-size", "line-height", "letter-spacing"],
976
- token
977
- );
978
- const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
979
- const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
980
- return unwantedTokens;
981
- }
982
- }
983
- ],
984
- options: {
985
- outputReferences: (token, options) => {
986
- const include = pathStartsWithOneOf(["border-radius"], token);
987
- return include && outputReferencesFilter(token, options);
988
- }
989
- }
990
- }
991
- }
992
- };
993
- };
994
-
995
- // src/tokens/process/configs/size.ts
996
- import * as R13 from "ramda";
997
- import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
998
- var sizeVariables = ({ theme }) => {
999
- const selector = `:root, [data-size]`;
1000
- const layer = `ds.theme.size`;
1001
- return {
1002
- preprocessors: ["tokens-studio"],
1003
- platforms: {
1004
- css: {
1005
- // custom
1006
- theme,
1007
- basePxFontSize,
1008
- selector,
1009
- layer,
1010
- //
1011
- prefix,
1012
- buildPath: `${theme}/`,
1013
- transforms: dsTransformers,
1014
- files: [
1015
- {
1016
- destination: `size.css`,
1017
- format: formats.size.name,
1018
- filter: (token) => {
1019
- const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
1020
- const isPrivateToken = R13.includes("_", token.path);
1021
- return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
1022
- }
1023
- }
1024
- ],
1025
- options: {
1026
- outputReferences: (token, options) => {
1027
- const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
1028
- return isWantedSize && outputReferencesFilter2(token, options);
1029
- }
1030
- }
1031
- }
1032
- }
1033
- };
1034
- };
1035
-
1036
- // src/tokens/process/configs/size-mode.ts
1037
- import * as R14 from "ramda";
1038
- var sizeModeVariables = ({ theme, size: size2 }) => {
1039
- const selector = `:root`;
1040
- const layer = `ds.theme.size-mode`;
1041
- return {
1042
- preprocessors: ["tokens-studio"],
1043
- platforms: {
1044
- css: {
1045
- // custom
1046
- size: size2,
1047
- theme,
1048
- basePxFontSize,
1049
- selector,
1050
- layer,
1051
- //
1052
- prefix,
1053
- buildPath: `${theme}/`,
1054
- transforms: dsTransformers,
1055
- files: [
1056
- {
1057
- destination: `size-mode/${size2}.css`,
1058
- format: formats.sizeMode.name,
1059
- filter: (token) => {
1060
- return R14.equals(["_size", "mode-font-size"], token.path);
1061
- }
1062
- }
1063
- ]
1064
- }
1065
- }
1066
- };
1067
- };
1068
-
1069
- // src/tokens/process/configs/type-scale.ts
1070
- var typeScaleVariables = ({ theme }) => {
1071
- const selector = ":root, [data-size]";
1072
- const layer = `ds.theme.type-scale`;
1073
- return {
1074
- usesDtcg: true,
1075
- preprocessors: ["tokens-studio"],
1076
- expand: {
1077
- include: ["typography"]
1078
- },
1079
- platforms: {
1080
- css: {
1081
- prefix,
1082
- selector,
1083
- layer,
1084
- buildPath: `${theme}/`,
1085
- basePxFontSize,
1086
- transforms: [
1087
- "name/kebab",
1088
- "ts/size/px",
1089
- sizeRem.name,
1090
- "ts/size/lineheight",
1091
- "ts/typography/fontWeight",
1092
- typographyName.name
1093
- ],
1094
- files: [
1095
- {
1096
- destination: `type-scale.css`,
1097
- format: formats.typeScale.name,
1098
- filter: (token) => {
1099
- const included = typeEquals(["typography", "dimension", "fontsize"], token);
1100
- if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
1101
- return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
1102
- }
1103
- }
1104
- ],
1105
- options: {
1106
- outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
1107
- }
1108
- }
1109
- }
1110
- };
1111
- };
1112
-
1113
- // src/tokens/process/configs/typography.ts
1114
- import { expandTypesMap } from "@tokens-studio/sd-transforms";
1115
- var typographyVariables = ({ theme, typography: typography2 }) => {
1116
- const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
1117
- const layer = `ds.theme.typography.${typography2}`;
1118
- return {
1119
- usesDtcg: true,
1120
- preprocessors: ["tokens-studio"],
1121
- expand: {
1122
- include: ["typography"],
1123
- typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
1124
- },
1125
- platforms: {
1126
- css: {
1127
- prefix,
1128
- typography: typography2,
1129
- selector,
1130
- layer,
1131
- buildPath: `${theme}/`,
1132
- basePxFontSize,
1133
- transforms: [
1134
- "name/kebab",
1135
- "ts/size/px",
1136
- sizeRem.name,
1137
- "ts/size/lineheight",
1138
- "ts/typography/fontWeight",
1139
- "ts/size/css/letterspacing",
1140
- typographyName.name
1141
- ],
1142
- files: [
1143
- {
1144
- destination: `typography/${typography2}.css`,
1145
- format: formats.typography.name,
1146
- filter: (token) => {
1147
- const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
1148
- if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
1149
- return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
1150
- }
1151
- }
1152
- ]
1153
- }
1154
- }
1155
- };
1156
- };
1157
-
1158
- // src/tokens/process/configs.ts
1159
- void register(StyleDictionary2, { withSDBuiltins: false });
1160
- StyleDictionary2.registerTransform(sizeRem);
1161
- StyleDictionary2.registerTransform(typographyName);
1162
- StyleDictionary2.registerTransform(resolveMath);
1163
- StyleDictionary2.registerTransform(unitless);
1164
- for (const format of Object.values(formats)) {
1165
- StyleDictionary2.registerFormat(format);
1166
- }
1167
- var configs = {
1168
- colorSchemeVariables,
1169
- mainColorVariables: colorCategoryVariables({ category: "main" }),
1170
- supportColorVariables: colorCategoryVariables({ category: "support" }),
1171
- neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
1172
- successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
1173
- dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
1174
- warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
1175
- infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
1176
- sizeModeVariables,
1177
- sizeVariables,
1178
- typographyVariables,
1179
- typeScaleVariables,
1180
- semanticVariables
1181
- };
1182
- var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
1183
- const { tokensDir, tokenSets } = options;
1184
- const permutations = getMultidimensionalThemes(processed$themes, dimensions);
1185
- return permutations.flatMap(({ selectedTokenSets, permutation }) => {
1186
- const tokenSource = { source: void 0, tokens: {} };
1187
- if (tokenSets) {
1188
- for (const tokenSet of selectedTokenSets) {
1189
- const tokens = tokenSets.get(tokenSet);
1190
- if (tokens) {
1191
- const tokensWithFilePath = traverseObj(tokens, (obj) => {
1192
- if (Object.hasOwn(obj, `$value`) && !obj.filePath) {
1193
- obj.filePath = tokenSet;
1194
- }
1195
- });
1196
- tokenSource.tokens = R15.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
1197
- }
1198
- }
1199
- } else {
1200
- tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
1201
- }
1202
- const configOrConfigs = getConfig(permutation);
1203
- const configs_ = Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }];
1204
- const configs2 = configs_.map(({ config, permutationOverrides }) => {
1205
- return {
1206
- permutation: { ...permutation, ...permutationOverrides },
1207
- config: {
1208
- ...config,
1209
- /** Use official W3C design token format
1210
- @see https://v4.styledictionary.com/info/dtcg/
1211
- @see https://design-tokens.github.io/community-group/format/ */
1212
- usesDtcg: true,
1213
- log: {
1214
- ...config?.log,
1215
- verbosity: buildOptions?.verbose ? "verbose" : "silent"
1216
- },
1217
- ...tokenSource
1218
- }
1219
- };
1220
- });
1221
- return configs2;
1222
- }).sort();
1223
- };
1224
- export {
1225
- configs,
1226
- getConfigsForThemeDimensions
1227
- };
14
+ import { register } from "@tokens-studio/sd-transforms";
15
+ //#region src/tokens/process/configs.ts
16
+ register(StyleDictionary, { withSDBuiltins: false });
17
+ StyleDictionary.registerTransform(sizeRem);
18
+ StyleDictionary.registerTransform(typographyName);
19
+ StyleDictionary.registerTransform(resolveMath);
20
+ StyleDictionary.registerTransform(unitless);
21
+ for (const format of Object.values(formats)) StyleDictionary.registerFormat(format);
22
+ const configs = {
23
+ colorSchemeVariables,
24
+ mainColorVariables: colorCategoryVariables({ category: "main" }),
25
+ supportColorVariables: colorCategoryVariables({ category: "support" }),
26
+ neutralColorVariables: colorCategoryVariables({
27
+ category: "builtin",
28
+ color: "neutral"
29
+ }),
30
+ successColorVariables: colorCategoryVariables({
31
+ category: "builtin",
32
+ color: "success"
33
+ }),
34
+ dangerColorVariables: colorCategoryVariables({
35
+ category: "builtin",
36
+ color: "danger"
37
+ }),
38
+ warningColorVariables: colorCategoryVariables({
39
+ category: "builtin",
40
+ color: "warning"
41
+ }),
42
+ infoColorVariables: colorCategoryVariables({
43
+ category: "builtin",
44
+ color: "info"
45
+ }),
46
+ sizeModeVariables,
47
+ sizeVariables,
48
+ typographyVariables,
49
+ typeScaleVariables,
50
+ semanticVariables
51
+ };
52
+ const getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
53
+ const { tokensDir, tokenSets } = options;
54
+ return getMultidimensionalThemes(processed$themes, dimensions).flatMap(({ selectedTokenSets, permutation }) => {
55
+ const tokenSource = {
56
+ source: void 0,
57
+ tokens: {}
58
+ };
59
+ if (tokenSets) for (const tokenSet of selectedTokenSets) {
60
+ const tokens = tokenSets.get(tokenSet);
61
+ if (tokens) {
62
+ const tokensWithFilePath = traverseObj(tokens, (obj) => {
63
+ if (Object.hasOwn(obj, `$value`) && !obj.filePath) obj.filePath = tokenSet;
64
+ });
65
+ tokenSource.tokens = R.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
66
+ }
67
+ }
68
+ else tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
69
+ const configOrConfigs = getConfig(permutation);
70
+ return (Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }]).map(({ config, permutationOverrides }) => {
71
+ return {
72
+ permutation: {
73
+ ...permutation,
74
+ ...permutationOverrides
75
+ },
76
+ config: {
77
+ ...config,
78
+ usesDtcg: true,
79
+ log: {
80
+ ...config?.log,
81
+ verbosity: buildOptions?.verbose ? "verbose" : "silent"
82
+ },
83
+ ...tokenSource
84
+ }
85
+ };
86
+ });
87
+ }).sort();
88
+ };
89
+ //#endregion
90
+ export { configs, getConfigsForThemeDimensions };