@digdir/designsystemet 1.13.2 → 1.14.0

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