@digdir/designsystemet 1.13.2 → 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.
- package/dist/bin/config.js +50 -658
- package/dist/bin/designsystemet.js +131 -4623
- package/dist/bin/options.js +22 -14
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
- package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
- package/dist/package.js +5 -0
- package/dist/src/colors/colorMetadata.js +255 -261
- package/dist/src/colors/index.js +5 -522
- package/dist/src/colors/theme.js +104 -343
- package/dist/src/colors/types.js +22 -25
- package/dist/src/colors/utils.js +241 -154
- package/dist/src/config.js +103 -444
- package/dist/src/index.js +10 -3588
- package/dist/src/migrations/beta-to-v1.js +339 -537
- package/dist/src/migrations/codemods/css/plugins.js +31 -42
- package/dist/src/migrations/codemods/css/run.js +20 -151
- package/dist/src/migrations/color-rename-next49.js +44 -220
- package/dist/src/migrations/index.js +7 -577
- package/dist/src/tokens/build.js +39 -1816
- package/dist/src/tokens/create/files.js +43 -602
- package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
- package/dist/src/tokens/create/generators/$metadata.js +17 -20
- package/dist/src/tokens/create/generators/$themes.js +137 -311
- package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
- package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
- package/dist/src/tokens/create/generators/primitives/size.js +146 -156
- package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
- package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
- package/dist/src/tokens/create/generators/semantic/color.js +42 -326
- package/dist/src/tokens/create/generators/semantic/style.js +379 -382
- package/dist/src/tokens/create/generators/themes/theme.js +108 -392
- package/dist/src/tokens/create.js +47 -1591
- package/dist/src/tokens/format.js +38 -3324
- package/dist/src/tokens/generate-config.js +155 -298
- package/dist/src/tokens/index.js +3 -3344
- package/dist/src/tokens/process/configs/color.js +50 -1085
- package/dist/src/tokens/process/configs/semantic.js +45 -1083
- package/dist/src/tokens/process/configs/shared.js +18 -109
- package/dist/src/tokens/process/configs/size-mode.js +27 -1082
- package/dist/src/tokens/process/configs/size.js +32 -1083
- package/dist/src/tokens/process/configs/type-scale.js +49 -1083
- package/dist/src/tokens/process/configs/typography.js +63 -1084
- package/dist/src/tokens/process/configs.js +88 -1224
- package/dist/src/tokens/process/formats/css/color.js +58 -1079
- package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
- package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
- package/dist/src/tokens/process/formats/css/size.js +86 -1079
- package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
- package/dist/src/tokens/process/formats/css/typography.js +27 -1081
- package/dist/src/tokens/process/formats/css.js +18 -1081
- package/dist/src/tokens/process/output/declarations.js +18 -1201
- package/dist/src/tokens/process/output/tailwind.js +26 -40
- package/dist/src/tokens/process/output/theme.js +73 -206
- package/dist/src/tokens/process/platform.js +165 -1355
- package/dist/src/tokens/process/transformers.js +49 -89
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
- package/dist/src/tokens/process/utils/kebab-case.js +7 -5
- package/dist/src/tokens/types.js +6 -7
- package/dist/src/tokens/utils.js +102 -93
- package/dist/src/types.js +1 -5
- package/dist/src/utils/filesystem.js +112 -124
- package/package.json +10 -13
- package/configs/test-tokens.config.json +0 -82
- package/dist/src/scripts/createJsonSchema.js +0 -409
- package/dist/src/scripts/update-preview-tokens.js +0 -3353
package/dist/src/index.js
CHANGED
|
@@ -1,3588 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"background-default": {
|
|
12
|
-
number: 1,
|
|
13
|
-
name: "background-default",
|
|
14
|
-
group: "background",
|
|
15
|
-
displayName: "Background Default",
|
|
16
|
-
description: {
|
|
17
|
-
long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
|
|
18
|
-
short: "Standard bakgrunnsfarge."
|
|
19
|
-
},
|
|
20
|
-
luminance: {
|
|
21
|
-
light: 1,
|
|
22
|
-
dark: 9e-3,
|
|
23
|
-
contrast: 1e-3
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"background-tinted": {
|
|
27
|
-
number: 2,
|
|
28
|
-
name: "background-tinted",
|
|
29
|
-
group: "background",
|
|
30
|
-
displayName: "Background Tinted",
|
|
31
|
-
description: {
|
|
32
|
-
long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
|
|
33
|
-
short: "Bakgrunn med et hint av farge i seg."
|
|
34
|
-
},
|
|
35
|
-
luminance: {
|
|
36
|
-
light: 0.9,
|
|
37
|
-
dark: 0.014,
|
|
38
|
-
contrast: 65e-4
|
|
39
|
-
}
|
|
40
|
-
},
|
|
41
|
-
"surface-default": {
|
|
42
|
-
number: 3,
|
|
43
|
-
name: "surface-default",
|
|
44
|
-
group: "surface",
|
|
45
|
-
displayName: "Surface Default",
|
|
46
|
-
description: {
|
|
47
|
-
long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
|
|
48
|
-
short: "Standardfarge for overflater / komponenter."
|
|
49
|
-
},
|
|
50
|
-
luminance: {
|
|
51
|
-
light: 1,
|
|
52
|
-
dark: 0.021,
|
|
53
|
-
contrast: 0.015
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
"surface-tinted": {
|
|
57
|
-
number: 4,
|
|
58
|
-
name: "surface-tinted",
|
|
59
|
-
group: "surface",
|
|
60
|
-
displayName: "Surface Tinted",
|
|
61
|
-
description: {
|
|
62
|
-
long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
|
|
63
|
-
short: "Overflater / komponenter med et hint av farge i seg."
|
|
64
|
-
},
|
|
65
|
-
luminance: {
|
|
66
|
-
light: 0.81,
|
|
67
|
-
dark: 0.027,
|
|
68
|
-
contrast: 0.015
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
"surface-hover": {
|
|
72
|
-
number: 5,
|
|
73
|
-
name: "surface-hover",
|
|
74
|
-
group: "surface",
|
|
75
|
-
displayName: "Surface Hover",
|
|
76
|
-
description: {
|
|
77
|
-
long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
|
|
78
|
-
short: "Hover-farge til overflater / komponenter."
|
|
79
|
-
},
|
|
80
|
-
luminance: {
|
|
81
|
-
light: 0.7,
|
|
82
|
-
dark: 0.036,
|
|
83
|
-
contrast: 0.028
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
"surface-active": {
|
|
87
|
-
number: 6,
|
|
88
|
-
name: "surface-active",
|
|
89
|
-
group: "surface",
|
|
90
|
-
displayName: "Surface Active",
|
|
91
|
-
description: {
|
|
92
|
-
long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
|
|
93
|
-
short: "Active-farge til overflater / komponenter."
|
|
94
|
-
},
|
|
95
|
-
luminance: {
|
|
96
|
-
light: 0.59,
|
|
97
|
-
dark: 0.056,
|
|
98
|
-
contrast: 0.045
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
"border-subtle": {
|
|
102
|
-
number: 7,
|
|
103
|
-
name: "border-subtle",
|
|
104
|
-
group: "border",
|
|
105
|
-
displayName: "Border Subtle",
|
|
106
|
-
description: {
|
|
107
|
-
long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
|
|
108
|
-
short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
|
|
109
|
-
},
|
|
110
|
-
luminance: {
|
|
111
|
-
light: 0.5,
|
|
112
|
-
dark: 0.08,
|
|
113
|
-
contrast: 0.26
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
"border-default": {
|
|
117
|
-
number: 8,
|
|
118
|
-
name: "border-default",
|
|
119
|
-
group: "border",
|
|
120
|
-
displayName: "Border Default",
|
|
121
|
-
description: {
|
|
122
|
-
long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
|
|
123
|
-
short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
|
|
124
|
-
},
|
|
125
|
-
luminance: {
|
|
126
|
-
light: 0.19,
|
|
127
|
-
dark: 0.22,
|
|
128
|
-
contrast: 0.4
|
|
129
|
-
}
|
|
130
|
-
},
|
|
131
|
-
"border-strong": {
|
|
132
|
-
number: 9,
|
|
133
|
-
name: "border-strong",
|
|
134
|
-
group: "border",
|
|
135
|
-
displayName: "Border Strong",
|
|
136
|
-
description: {
|
|
137
|
-
long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
|
|
138
|
-
short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
|
|
139
|
-
},
|
|
140
|
-
luminance: {
|
|
141
|
-
light: 0.11,
|
|
142
|
-
dark: 0.39,
|
|
143
|
-
contrast: 0.6
|
|
144
|
-
}
|
|
145
|
-
},
|
|
146
|
-
"text-subtle": {
|
|
147
|
-
number: 10,
|
|
148
|
-
name: "text-subtle",
|
|
149
|
-
group: "text",
|
|
150
|
-
displayName: "Text Subtle",
|
|
151
|
-
description: {
|
|
152
|
-
long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
|
|
153
|
-
short: "Tekst- og ikonfarge med lavere kontrast."
|
|
154
|
-
},
|
|
155
|
-
luminance: {
|
|
156
|
-
light: 0.11,
|
|
157
|
-
dark: 0.39,
|
|
158
|
-
contrast: 0.57
|
|
159
|
-
}
|
|
160
|
-
},
|
|
161
|
-
"text-default": {
|
|
162
|
-
number: 11,
|
|
163
|
-
name: "text-default",
|
|
164
|
-
group: "text",
|
|
165
|
-
displayName: "Text Default",
|
|
166
|
-
description: {
|
|
167
|
-
long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
|
|
168
|
-
short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
|
|
169
|
-
},
|
|
170
|
-
luminance: {
|
|
171
|
-
light: 0.0245,
|
|
172
|
-
dark: 0.84,
|
|
173
|
-
contrast: 0.86
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
"base-default": {
|
|
177
|
-
number: 12,
|
|
178
|
-
name: "base-default",
|
|
179
|
-
group: "base",
|
|
180
|
-
displayName: "Base Default",
|
|
181
|
-
description: {
|
|
182
|
-
long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
|
|
183
|
-
short: "Standardfarge for solide bakgrunner."
|
|
184
|
-
},
|
|
185
|
-
luminance: {
|
|
186
|
-
light: 1,
|
|
187
|
-
dark: 1,
|
|
188
|
-
contrast: 1
|
|
189
|
-
}
|
|
190
|
-
},
|
|
191
|
-
"base-hover": {
|
|
192
|
-
number: 13,
|
|
193
|
-
name: "base-hover",
|
|
194
|
-
group: "base",
|
|
195
|
-
displayName: "Base Hover",
|
|
196
|
-
description: {
|
|
197
|
-
long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
|
|
198
|
-
short: "Hover-farge for solide bakgrunner."
|
|
199
|
-
},
|
|
200
|
-
luminance: {
|
|
201
|
-
light: 1,
|
|
202
|
-
dark: 1,
|
|
203
|
-
contrast: 1
|
|
204
|
-
}
|
|
205
|
-
},
|
|
206
|
-
"base-active": {
|
|
207
|
-
number: 14,
|
|
208
|
-
name: "base-active",
|
|
209
|
-
group: "base",
|
|
210
|
-
displayName: "Base Active",
|
|
211
|
-
description: {
|
|
212
|
-
long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
|
|
213
|
-
short: "Active-farge for solide bakgrunner."
|
|
214
|
-
},
|
|
215
|
-
luminance: {
|
|
216
|
-
light: 1,
|
|
217
|
-
dark: 1,
|
|
218
|
-
contrast: 1
|
|
219
|
-
}
|
|
220
|
-
},
|
|
221
|
-
"base-contrast-subtle": {
|
|
222
|
-
number: 15,
|
|
223
|
-
name: "base-contrast-subtle",
|
|
224
|
-
group: "base",
|
|
225
|
-
displayName: "Contrast Subtle",
|
|
226
|
-
description: {
|
|
227
|
-
long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
|
|
228
|
-
short: "Farge med god kontrast mot Base-default."
|
|
229
|
-
},
|
|
230
|
-
luminance: {
|
|
231
|
-
light: 1,
|
|
232
|
-
dark: 1,
|
|
233
|
-
contrast: 1
|
|
234
|
-
}
|
|
235
|
-
},
|
|
236
|
-
"base-contrast-default": {
|
|
237
|
-
number: 16,
|
|
238
|
-
name: "base-contrast-default",
|
|
239
|
-
group: "base",
|
|
240
|
-
displayName: "Contrast Default",
|
|
241
|
-
description: {
|
|
242
|
-
long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
|
|
243
|
-
short: "Farge med god kontrast mot Base-default og Base-hover."
|
|
244
|
-
},
|
|
245
|
-
luminance: {
|
|
246
|
-
light: 1,
|
|
247
|
-
dark: 1,
|
|
248
|
-
contrast: 1
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
|
|
253
|
-
var getColorMetadataByNumber = (number) => {
|
|
254
|
-
return colorMetadataByNumber[number];
|
|
255
|
-
};
|
|
256
|
-
var colorNames = Object.keys(colorMetadata);
|
|
257
|
-
var baseColorNames = Object.keys(baseColors);
|
|
258
|
-
|
|
259
|
-
// src/colors/theme.ts
|
|
260
|
-
import chroma2 from "chroma-js";
|
|
261
|
-
import * as R2 from "ramda";
|
|
262
|
-
|
|
263
|
-
// src/colors/utils.ts
|
|
264
|
-
import chroma from "chroma-js";
|
|
265
|
-
import Colorjs from "colorjs.io";
|
|
266
|
-
import { Hsluv } from "hsluv";
|
|
267
|
-
var hexToCssHsl = (hex, valuesOnly = false) => {
|
|
268
|
-
const [h, s, l] = chroma(hex).hsl();
|
|
269
|
-
const hRounded = Math.round(h);
|
|
270
|
-
const sRounded = Math.round(s * 100);
|
|
271
|
-
const lRounded = Math.round(l * 100);
|
|
272
|
-
const cssString = `${hRounded},${sRounded}%,${lRounded}%`;
|
|
273
|
-
return valuesOnly ? cssString : `hsl(${cssString})`;
|
|
274
|
-
};
|
|
275
|
-
var hexToHSL = (hex) => {
|
|
276
|
-
const [h, s, l] = chroma(hex).hsl();
|
|
277
|
-
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
|
|
278
|
-
};
|
|
279
|
-
var hexToHsluv = (hex) => {
|
|
280
|
-
const conv = new Hsluv();
|
|
281
|
-
conv.hex = hex;
|
|
282
|
-
conv.hexToHsluv();
|
|
283
|
-
return [conv.hsluv_h, conv.hsluv_s, conv.hsluv_l];
|
|
284
|
-
};
|
|
285
|
-
var hslArrToCss = (HSL) => {
|
|
286
|
-
return "hsl(" + HSL[0] + "," + HSL[1] + "%," + HSL[2] + "%)";
|
|
287
|
-
};
|
|
288
|
-
var HSLToHex = (h, s, l) => {
|
|
289
|
-
return chroma.hsl(h, s / 100, l / 100).hex();
|
|
290
|
-
};
|
|
291
|
-
var hexToRgb = (hex, type = "255") => {
|
|
292
|
-
const rgb = chroma(hex).rgb();
|
|
293
|
-
return {
|
|
294
|
-
r: type === "255" ? rgb[0] : rgb[0] / 255,
|
|
295
|
-
g: type === "255" ? rgb[1] : rgb[1] / 255,
|
|
296
|
-
b: type === "255" ? rgb[2] : rgb[2] / 255
|
|
297
|
-
};
|
|
298
|
-
};
|
|
299
|
-
var getContrastFromHex = (color1, color2) => {
|
|
300
|
-
const lum1 = chroma(color1).luminance();
|
|
301
|
-
const lum2 = chroma(color2).luminance();
|
|
302
|
-
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
303
|
-
};
|
|
304
|
-
var getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
|
|
305
|
-
const conv = new Hsluv();
|
|
306
|
-
conv.hex = mainColor;
|
|
307
|
-
conv.hexToHsluv();
|
|
308
|
-
conv.hsluv_l = lightness;
|
|
309
|
-
conv.hsluvToHex();
|
|
310
|
-
const lightMainColor = conv.hex;
|
|
311
|
-
const lum1 = chroma(lightMainColor).luminance();
|
|
312
|
-
const lum2 = chroma(backgroundColor).luminance();
|
|
313
|
-
const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
|
|
314
|
-
return ratio;
|
|
315
|
-
};
|
|
316
|
-
var areColorsContrasting = (color1, color2, type = "aa") => {
|
|
317
|
-
const contrast = getContrastFromHex(color1, color2);
|
|
318
|
-
if (contrast !== null) {
|
|
319
|
-
if (type === "aaa") {
|
|
320
|
-
return contrast >= 7;
|
|
321
|
-
}
|
|
322
|
-
if (type === "aa") {
|
|
323
|
-
return contrast >= 4.5;
|
|
324
|
-
}
|
|
325
|
-
return contrast >= 3;
|
|
326
|
-
}
|
|
327
|
-
return false;
|
|
328
|
-
};
|
|
329
|
-
var isHexColor = (hex) => {
|
|
330
|
-
return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
|
|
331
|
-
};
|
|
332
|
-
var getLuminanceFromLightness = (lightness) => {
|
|
333
|
-
const conv = new Hsluv();
|
|
334
|
-
conv.hsluv_l = lightness;
|
|
335
|
-
conv.hsluvToHex();
|
|
336
|
-
return chroma(conv.hex).luminance();
|
|
337
|
-
};
|
|
338
|
-
var getLuminanceFromColor = (color) => {
|
|
339
|
-
return chroma(color).luminance();
|
|
340
|
-
};
|
|
341
|
-
var getLightnessFromHex = (hex) => {
|
|
342
|
-
const conv = new Hsluv();
|
|
343
|
-
conv.hex = hex;
|
|
344
|
-
conv.hexToHsluv();
|
|
345
|
-
return conv.hsluv_l;
|
|
346
|
-
};
|
|
347
|
-
var canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
|
|
348
|
-
const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, "#ffffff");
|
|
349
|
-
const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, "#000000");
|
|
350
|
-
const activeAgainstWhite = getContrastFromHex(baseActiveColor, "#ffffff");
|
|
351
|
-
const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
|
|
352
|
-
if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
|
|
353
|
-
return true;
|
|
354
|
-
}
|
|
355
|
-
if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
|
|
356
|
-
return true;
|
|
357
|
-
}
|
|
358
|
-
return false;
|
|
359
|
-
};
|
|
360
|
-
var convertToHex = (color) => {
|
|
361
|
-
if (!color) {
|
|
362
|
-
return "#000000";
|
|
363
|
-
}
|
|
364
|
-
if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
|
|
365
|
-
return color;
|
|
366
|
-
}
|
|
367
|
-
return chroma(color).hex();
|
|
368
|
-
};
|
|
369
|
-
var rgbToHex = (rgb) => {
|
|
370
|
-
return `#${[rgb.r, rgb.g, rgb.b].map((x) => {
|
|
371
|
-
const hex = Math.round(x * 255).toString(16);
|
|
372
|
-
return hex.length === 1 ? "0" + hex : hex;
|
|
373
|
-
}).join("")}`;
|
|
374
|
-
};
|
|
375
|
-
var convertColor = (cssColor, format) => {
|
|
376
|
-
const color = new Colorjs(cssColor);
|
|
377
|
-
switch (format) {
|
|
378
|
-
case "rgb":
|
|
379
|
-
case "rgba":
|
|
380
|
-
return color.toString({
|
|
381
|
-
format: {
|
|
382
|
-
name: format,
|
|
383
|
-
coords: ["<number>[0, 255]", "<number>[0, 255]", "<number>[0, 255]"]
|
|
384
|
-
},
|
|
385
|
-
precision: 3
|
|
386
|
-
});
|
|
387
|
-
case "hex":
|
|
388
|
-
return color.toString({ format, precision: 3 });
|
|
389
|
-
case "hct":
|
|
390
|
-
return color.to(format).toString({
|
|
391
|
-
format: {
|
|
392
|
-
name: format,
|
|
393
|
-
coords: ["<number>", "<number>", "<number>"]
|
|
394
|
-
},
|
|
395
|
-
precision: 3
|
|
396
|
-
});
|
|
397
|
-
default:
|
|
398
|
-
return color.to(format).toString({ precision: 3 });
|
|
399
|
-
}
|
|
400
|
-
};
|
|
401
|
-
|
|
402
|
-
// src/colors/theme.ts
|
|
403
|
-
var RESERVED_COLORS = ["neutral", "success", "warning", "danger", "info"];
|
|
404
|
-
var generateColorScale = (color, colorScheme2) => {
|
|
405
|
-
let interpolationColor = color;
|
|
406
|
-
if (colorScheme2 === "dark") {
|
|
407
|
-
const [L, C, H] = chroma2(color).oklch();
|
|
408
|
-
const chromaModifier = 0.7;
|
|
409
|
-
interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
|
|
410
|
-
}
|
|
411
|
-
const colors = R2.mapObjIndexed((colorData) => {
|
|
412
|
-
const luminance = colorData.luminance[colorScheme2];
|
|
413
|
-
return {
|
|
414
|
-
...colorData,
|
|
415
|
-
hex: chroma2(interpolationColor).luminance(luminance).hex()
|
|
416
|
-
};
|
|
417
|
-
}, colorMetadata);
|
|
418
|
-
const baseColors2 = generateBaseColors(color, colorScheme2);
|
|
419
|
-
colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
|
|
420
|
-
colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
|
|
421
|
-
colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
|
|
422
|
-
colors["base-contrast-subtle"] = {
|
|
423
|
-
...colors["base-contrast-subtle"],
|
|
424
|
-
hex: generateColorContrast(baseColors2.default, "subtle")
|
|
425
|
-
};
|
|
426
|
-
colors["base-contrast-default"] = {
|
|
427
|
-
...colors["base-contrast-default"],
|
|
428
|
-
hex: generateColorContrast(baseColors2.default, "default")
|
|
429
|
-
};
|
|
430
|
-
return Object.values(colors);
|
|
431
|
-
};
|
|
432
|
-
var generateColorSchemes = (color) => ({
|
|
433
|
-
light: generateColorScale(color, "light"),
|
|
434
|
-
dark: generateColorScale(color, "dark"),
|
|
435
|
-
contrast: generateColorScale(color, "contrast")
|
|
436
|
-
});
|
|
437
|
-
var generateBaseColors = (color, colorScheme2) => {
|
|
438
|
-
let colorLightness = getLightnessFromHex(color);
|
|
439
|
-
if (colorScheme2 !== "light") {
|
|
440
|
-
colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
|
|
441
|
-
}
|
|
442
|
-
const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
|
|
443
|
-
const calculateLightness = (base, mod) => base - mod;
|
|
444
|
-
return {
|
|
445
|
-
default: colorScheme2 === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
|
|
446
|
-
hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
|
|
447
|
-
active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
|
|
448
|
-
};
|
|
449
|
-
};
|
|
450
|
-
var generateColorContrast = (color, type) => {
|
|
451
|
-
if (type === "default") {
|
|
452
|
-
return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
|
|
453
|
-
}
|
|
454
|
-
if (type === "subtle") {
|
|
455
|
-
const contrastWhite = chroma2.contrast(color, "#ffffff");
|
|
456
|
-
const contrastBlack = chroma2.contrast(color, "#000000");
|
|
457
|
-
const lightness = getLightnessFromHex(color);
|
|
458
|
-
const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
|
|
459
|
-
const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
|
|
460
|
-
return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
|
|
461
|
-
}
|
|
462
|
-
return color;
|
|
463
|
-
};
|
|
464
|
-
var getCssVariable = (colorType, colorNumber) => {
|
|
465
|
-
return `--ds-color-${colorType}-${getColorMetadataByNumber(colorNumber).displayName.toLowerCase().replace(/\s/g, "-")}`;
|
|
466
|
-
};
|
|
467
|
-
|
|
468
|
-
// src/colors/types.ts
|
|
469
|
-
import * as R3 from "ramda";
|
|
470
|
-
var semanticColorMap = {
|
|
471
|
-
"background-default": 1,
|
|
472
|
-
"background-tinted": 2,
|
|
473
|
-
"surface-default": 3,
|
|
474
|
-
"surface-tinted": 4,
|
|
475
|
-
"surface-hover": 5,
|
|
476
|
-
"surface-active": 6,
|
|
477
|
-
"border-subtle": 7,
|
|
478
|
-
"border-default": 8,
|
|
479
|
-
"border-strong": 9,
|
|
480
|
-
"text-subtle": 10,
|
|
481
|
-
"text-default": 11,
|
|
482
|
-
"base-default": 12,
|
|
483
|
-
"base-hover": 13,
|
|
484
|
-
"base-active": 14,
|
|
485
|
-
"base-contrast-subtle": 15,
|
|
486
|
-
"base-contrast-default": 16
|
|
487
|
-
};
|
|
488
|
-
var semanticColorNames = R3.keys(semanticColorMap);
|
|
489
|
-
var semanticColorNumbers = R3.values(semanticColorMap);
|
|
490
|
-
|
|
491
|
-
// src/config.ts
|
|
492
|
-
import pc from "picocolors";
|
|
493
|
-
import * as R7 from "ramda";
|
|
494
|
-
import { z } from "zod";
|
|
495
|
-
import { fromError } from "zod-validation-error";
|
|
496
|
-
|
|
497
|
-
// src/tokens/create/generators/primitives/color-scheme.ts
|
|
498
|
-
import * as R4 from "ramda";
|
|
499
|
-
var generateColor = (colorArray, overrides) => {
|
|
500
|
-
const obj = {};
|
|
501
|
-
const $type = "color";
|
|
502
|
-
for (const index in colorArray) {
|
|
503
|
-
const position = Number(index) + 1;
|
|
504
|
-
const overrideValue = overrides?.[position];
|
|
505
|
-
obj[position] = {
|
|
506
|
-
$type,
|
|
507
|
-
$value: overrideValue || colorArray[index].hex
|
|
508
|
-
};
|
|
509
|
-
}
|
|
510
|
-
return obj;
|
|
511
|
-
};
|
|
512
|
-
var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
513
|
-
const createColorOverrides = (colorName) => {
|
|
514
|
-
if (!overrides?.colors || !(colorName in overrides.colors)) {
|
|
515
|
-
return void 0;
|
|
516
|
-
}
|
|
517
|
-
const colorOverrides = overrides.colors[colorName];
|
|
518
|
-
const positionOverrides = {};
|
|
519
|
-
Object.entries(colorOverrides).forEach(([semanticTokenName, modeOverrides]) => {
|
|
520
|
-
const position = colorMetadata[semanticTokenName].number;
|
|
521
|
-
if (position) {
|
|
522
|
-
let overrideValue;
|
|
523
|
-
if (colorScheme2 === "light" && modeOverrides.light) {
|
|
524
|
-
overrideValue = modeOverrides.light;
|
|
525
|
-
} else if (colorScheme2 === "dark" && modeOverrides.dark) {
|
|
526
|
-
overrideValue = modeOverrides.dark;
|
|
527
|
-
}
|
|
528
|
-
if (overrideValue) {
|
|
529
|
-
positionOverrides[position] = overrideValue;
|
|
530
|
-
}
|
|
531
|
-
}
|
|
532
|
-
});
|
|
533
|
-
return Object.keys(positionOverrides).length > 0 ? positionOverrides : void 0;
|
|
534
|
-
};
|
|
535
|
-
const main = R4.mapObjIndexed(
|
|
536
|
-
(color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
|
|
537
|
-
colors.main
|
|
538
|
-
);
|
|
539
|
-
const support = R4.mapObjIndexed(
|
|
540
|
-
(color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
|
|
541
|
-
colors.support
|
|
542
|
-
);
|
|
543
|
-
const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
|
|
544
|
-
const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
|
|
545
|
-
const baseColorsWithOverrides = {
|
|
546
|
-
...baseColors,
|
|
547
|
-
...overrides?.severity
|
|
548
|
-
};
|
|
549
|
-
const globalColors = R4.mapObjIndexed(
|
|
550
|
-
(color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
|
|
551
|
-
baseColorsWithOverrides
|
|
552
|
-
);
|
|
553
|
-
const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
|
|
554
|
-
const defaultLinkVisited = linkColor[12];
|
|
555
|
-
const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
|
|
556
|
-
const defaultFocusInner = neutralColorScale[0].hex;
|
|
557
|
-
const defaultFocusOuter = neutralColorScale[10].hex;
|
|
558
|
-
const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
|
|
559
|
-
const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
|
|
560
|
-
return {
|
|
561
|
-
[themeName]: {
|
|
562
|
-
...main,
|
|
563
|
-
...support,
|
|
564
|
-
neutral,
|
|
565
|
-
...globalColors,
|
|
566
|
-
link: {
|
|
567
|
-
visited: linkOverride || defaultLinkVisited
|
|
568
|
-
},
|
|
569
|
-
focus: {
|
|
570
|
-
inner: {
|
|
571
|
-
$type: "color",
|
|
572
|
-
$value: focusInnerOverride || defaultFocusInner
|
|
573
|
-
},
|
|
574
|
-
outer: {
|
|
575
|
-
$type: "color",
|
|
576
|
-
$value: focusOuterOverride || defaultFocusOuter
|
|
577
|
-
}
|
|
578
|
-
}
|
|
579
|
-
}
|
|
580
|
-
};
|
|
581
|
-
};
|
|
582
|
-
|
|
583
|
-
// src/tokens/create/generators/primitives/globals.ts
|
|
584
|
-
var globals = {
|
|
585
|
-
"border-width": {
|
|
586
|
-
"1": {
|
|
587
|
-
$type: "borderWidth",
|
|
588
|
-
$value: "1px"
|
|
589
|
-
},
|
|
590
|
-
"3": {
|
|
591
|
-
$type: "borderWidth",
|
|
592
|
-
$value: "3px"
|
|
593
|
-
}
|
|
594
|
-
},
|
|
595
|
-
shadow: {
|
|
596
|
-
"100": {
|
|
597
|
-
$type: "boxShadow",
|
|
598
|
-
$value: [
|
|
599
|
-
{
|
|
600
|
-
color: "rgba(0,0,0,0.16)",
|
|
601
|
-
x: "0",
|
|
602
|
-
y: "0",
|
|
603
|
-
blur: "1",
|
|
604
|
-
spread: "0"
|
|
605
|
-
},
|
|
606
|
-
{
|
|
607
|
-
x: "0",
|
|
608
|
-
y: "1",
|
|
609
|
-
blur: "2",
|
|
610
|
-
spread: "0",
|
|
611
|
-
color: "rgba(0,0,0,0.12)"
|
|
612
|
-
}
|
|
613
|
-
]
|
|
614
|
-
},
|
|
615
|
-
"200": {
|
|
616
|
-
$type: "boxShadow",
|
|
617
|
-
$value: [
|
|
618
|
-
{
|
|
619
|
-
color: "rgba(0,0,0,0.15)",
|
|
620
|
-
x: "0",
|
|
621
|
-
y: "0",
|
|
622
|
-
blur: "1",
|
|
623
|
-
spread: "0"
|
|
624
|
-
},
|
|
625
|
-
{
|
|
626
|
-
color: "rgba(0,0,0,0.12)",
|
|
627
|
-
x: "0",
|
|
628
|
-
y: "1",
|
|
629
|
-
blur: "2",
|
|
630
|
-
spread: "0"
|
|
631
|
-
},
|
|
632
|
-
{
|
|
633
|
-
x: "0",
|
|
634
|
-
y: "2",
|
|
635
|
-
blur: "4",
|
|
636
|
-
spread: "0",
|
|
637
|
-
color: "rgba(0,0,0,0.1)"
|
|
638
|
-
}
|
|
639
|
-
]
|
|
640
|
-
},
|
|
641
|
-
"300": {
|
|
642
|
-
$type: "boxShadow",
|
|
643
|
-
$value: [
|
|
644
|
-
{
|
|
645
|
-
color: "rgba(0,0,0,0.14)",
|
|
646
|
-
x: "0",
|
|
647
|
-
y: "0",
|
|
648
|
-
blur: "1",
|
|
649
|
-
spread: "0"
|
|
650
|
-
},
|
|
651
|
-
{
|
|
652
|
-
color: "rgba(0,0,0,0.12)",
|
|
653
|
-
x: "0",
|
|
654
|
-
y: "2",
|
|
655
|
-
blur: "4",
|
|
656
|
-
spread: "0"
|
|
657
|
-
},
|
|
658
|
-
{
|
|
659
|
-
x: "0",
|
|
660
|
-
y: "4",
|
|
661
|
-
blur: "8",
|
|
662
|
-
spread: "0",
|
|
663
|
-
color: "rgba(0,0,0,0.12)"
|
|
664
|
-
}
|
|
665
|
-
]
|
|
666
|
-
},
|
|
667
|
-
"400": {
|
|
668
|
-
$type: "boxShadow",
|
|
669
|
-
$value: [
|
|
670
|
-
{
|
|
671
|
-
color: "rgba(0,0,0,0.13)",
|
|
672
|
-
x: "0",
|
|
673
|
-
y: "0",
|
|
674
|
-
blur: "1",
|
|
675
|
-
spread: "0"
|
|
676
|
-
},
|
|
677
|
-
{
|
|
678
|
-
color: "rgba(0,0,0,0.13)",
|
|
679
|
-
x: "0",
|
|
680
|
-
y: "3",
|
|
681
|
-
blur: "5",
|
|
682
|
-
spread: "0"
|
|
683
|
-
},
|
|
684
|
-
{
|
|
685
|
-
x: "0",
|
|
686
|
-
y: "6",
|
|
687
|
-
blur: "12",
|
|
688
|
-
spread: "0",
|
|
689
|
-
color: "rgba(0,0,0,0.14)"
|
|
690
|
-
}
|
|
691
|
-
]
|
|
692
|
-
},
|
|
693
|
-
"500": {
|
|
694
|
-
$type: "boxShadow",
|
|
695
|
-
$value: [
|
|
696
|
-
{
|
|
697
|
-
color: "rgba(0,0,0,0.12)",
|
|
698
|
-
x: "0",
|
|
699
|
-
y: "0",
|
|
700
|
-
blur: "1",
|
|
701
|
-
spread: "0"
|
|
702
|
-
},
|
|
703
|
-
{
|
|
704
|
-
color: "rgba(0,0,0,0.16)",
|
|
705
|
-
x: "0",
|
|
706
|
-
y: "4",
|
|
707
|
-
blur: "8",
|
|
708
|
-
spread: "0"
|
|
709
|
-
},
|
|
710
|
-
{
|
|
711
|
-
x: "0",
|
|
712
|
-
y: "12",
|
|
713
|
-
blur: "24",
|
|
714
|
-
spread: "0",
|
|
715
|
-
color: "rgba(0,0,0,0.16)"
|
|
716
|
-
}
|
|
717
|
-
]
|
|
718
|
-
}
|
|
719
|
-
},
|
|
720
|
-
opacity: {
|
|
721
|
-
"30": {
|
|
722
|
-
$type: "opacity",
|
|
723
|
-
$value: "30%"
|
|
724
|
-
}
|
|
725
|
-
}
|
|
726
|
-
};
|
|
727
|
-
var generateGlobals = () => globals;
|
|
728
|
-
|
|
729
|
-
// src/tokens/create/generators/primitives/size.ts
|
|
730
|
-
var global = {
|
|
731
|
-
_size: {
|
|
732
|
-
"0": {
|
|
733
|
-
$type: "dimension",
|
|
734
|
-
$value: "floor({_size.unit} * 0)"
|
|
735
|
-
},
|
|
736
|
-
"1": {
|
|
737
|
-
$type: "dimension",
|
|
738
|
-
$value: "floor({_size.unit} * 1)"
|
|
739
|
-
},
|
|
740
|
-
"2": {
|
|
741
|
-
$type: "dimension",
|
|
742
|
-
$value: "floor({_size.unit} * 2)"
|
|
743
|
-
},
|
|
744
|
-
"3": {
|
|
745
|
-
$type: "dimension",
|
|
746
|
-
$value: "floor({_size.unit} * 3)"
|
|
747
|
-
},
|
|
748
|
-
"4": {
|
|
749
|
-
$type: "dimension",
|
|
750
|
-
$value: "floor({_size.unit} * 4)"
|
|
751
|
-
},
|
|
752
|
-
"5": {
|
|
753
|
-
$type: "dimension",
|
|
754
|
-
$value: "floor({_size.unit} * 5)"
|
|
755
|
-
},
|
|
756
|
-
"6": {
|
|
757
|
-
$type: "dimension",
|
|
758
|
-
$value: "floor({_size.unit} * 6)"
|
|
759
|
-
},
|
|
760
|
-
"7": {
|
|
761
|
-
$type: "dimension",
|
|
762
|
-
$value: "floor({_size.unit} * 7)"
|
|
763
|
-
},
|
|
764
|
-
"8": {
|
|
765
|
-
$type: "dimension",
|
|
766
|
-
$value: "floor({_size.unit} * 8)"
|
|
767
|
-
},
|
|
768
|
-
"9": {
|
|
769
|
-
$type: "dimension",
|
|
770
|
-
$value: "floor({_size.unit} * 9)"
|
|
771
|
-
},
|
|
772
|
-
"10": {
|
|
773
|
-
$type: "dimension",
|
|
774
|
-
$value: "floor({_size.unit} * 10)"
|
|
775
|
-
},
|
|
776
|
-
"11": {
|
|
777
|
-
$type: "dimension",
|
|
778
|
-
$value: "floor({_size.unit} * 11)"
|
|
779
|
-
},
|
|
780
|
-
"12": {
|
|
781
|
-
$type: "dimension",
|
|
782
|
-
$value: "floor({_size.unit} * 12)"
|
|
783
|
-
},
|
|
784
|
-
"13": {
|
|
785
|
-
$type: "dimension",
|
|
786
|
-
$value: "floor({_size.unit} * 13)"
|
|
787
|
-
},
|
|
788
|
-
"14": {
|
|
789
|
-
$type: "dimension",
|
|
790
|
-
$value: "floor({_size.unit} * 14)"
|
|
791
|
-
},
|
|
792
|
-
"15": {
|
|
793
|
-
$type: "dimension",
|
|
794
|
-
$value: "floor({_size.unit} * 15)"
|
|
795
|
-
},
|
|
796
|
-
"18": {
|
|
797
|
-
$type: "dimension",
|
|
798
|
-
$value: "floor({_size.unit} * 18)"
|
|
799
|
-
},
|
|
800
|
-
"22": {
|
|
801
|
-
$type: "dimension",
|
|
802
|
-
$value: "floor({_size.unit} * 22)"
|
|
803
|
-
},
|
|
804
|
-
"26": {
|
|
805
|
-
$type: "dimension",
|
|
806
|
-
$value: "floor({_size.unit} * 26)"
|
|
807
|
-
},
|
|
808
|
-
"30": {
|
|
809
|
-
$type: "dimension",
|
|
810
|
-
$value: "floor({_size.unit} * 30)"
|
|
811
|
-
},
|
|
812
|
-
"mode-font-size": {
|
|
813
|
-
$type: "number",
|
|
814
|
-
$value: "{size._mode-font-size}"
|
|
815
|
-
},
|
|
816
|
-
base: {
|
|
817
|
-
$type: "number",
|
|
818
|
-
$value: "{size._base}"
|
|
819
|
-
},
|
|
820
|
-
step: {
|
|
821
|
-
$type: "number",
|
|
822
|
-
$value: "{size._step}"
|
|
823
|
-
},
|
|
824
|
-
unit: {
|
|
825
|
-
$type: "number",
|
|
826
|
-
$value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
|
|
827
|
-
}
|
|
828
|
-
}
|
|
829
|
-
};
|
|
830
|
-
var sizeModes = {
|
|
831
|
-
large: {
|
|
832
|
-
size: {
|
|
833
|
-
"_mode-font-size": {
|
|
834
|
-
$type: "dimension",
|
|
835
|
-
$value: "21"
|
|
836
|
-
},
|
|
837
|
-
_base: {
|
|
838
|
-
$type: "dimension",
|
|
839
|
-
$value: "18"
|
|
840
|
-
},
|
|
841
|
-
_step: {
|
|
842
|
-
$type: "dimension",
|
|
843
|
-
$value: "4"
|
|
844
|
-
}
|
|
845
|
-
}
|
|
846
|
-
},
|
|
847
|
-
medium: {
|
|
848
|
-
size: {
|
|
849
|
-
"_mode-font-size": {
|
|
850
|
-
$type: "dimension",
|
|
851
|
-
$value: "18"
|
|
852
|
-
},
|
|
853
|
-
_base: {
|
|
854
|
-
$type: "dimension",
|
|
855
|
-
$value: "18"
|
|
856
|
-
},
|
|
857
|
-
_step: {
|
|
858
|
-
$type: "dimension",
|
|
859
|
-
$value: "4"
|
|
860
|
-
}
|
|
861
|
-
}
|
|
862
|
-
},
|
|
863
|
-
small: {
|
|
864
|
-
size: {
|
|
865
|
-
"_mode-font-size": {
|
|
866
|
-
$type: "dimension",
|
|
867
|
-
$value: "16"
|
|
868
|
-
},
|
|
869
|
-
_base: {
|
|
870
|
-
$type: "dimension",
|
|
871
|
-
$value: "18"
|
|
872
|
-
},
|
|
873
|
-
_step: {
|
|
874
|
-
$type: "dimension",
|
|
875
|
-
$value: "4"
|
|
876
|
-
}
|
|
877
|
-
}
|
|
878
|
-
}
|
|
879
|
-
};
|
|
880
|
-
var generateSize = (size2) => sizeModes[size2];
|
|
881
|
-
var generateSizeGlobal = () => global;
|
|
882
|
-
|
|
883
|
-
// src/tokens/create/generators/primitives/typography.ts
|
|
884
|
-
var generateTypography = (themeName, { fontFamily }) => ({
|
|
885
|
-
[themeName]: {
|
|
886
|
-
"font-family": {
|
|
887
|
-
$type: "fontFamilies",
|
|
888
|
-
$value: fontFamily
|
|
889
|
-
},
|
|
890
|
-
"font-weight": {
|
|
891
|
-
medium: {
|
|
892
|
-
$type: "fontWeights",
|
|
893
|
-
$value: "Medium"
|
|
894
|
-
},
|
|
895
|
-
semibold: {
|
|
896
|
-
$type: "fontWeights",
|
|
897
|
-
$value: "Semi bold"
|
|
898
|
-
},
|
|
899
|
-
regular: {
|
|
900
|
-
$type: "fontWeights",
|
|
901
|
-
$value: "Regular"
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
}
|
|
905
|
-
});
|
|
906
|
-
var generateFontSizes = (size2) => fontSizes[size2];
|
|
907
|
-
var lineHeights = {
|
|
908
|
-
sm: {
|
|
909
|
-
$type: "lineHeights",
|
|
910
|
-
$value: "130%"
|
|
911
|
-
},
|
|
912
|
-
md: {
|
|
913
|
-
$type: "lineHeights",
|
|
914
|
-
$value: "150%"
|
|
915
|
-
},
|
|
916
|
-
lg: {
|
|
917
|
-
$type: "lineHeights",
|
|
918
|
-
$value: "170%"
|
|
919
|
-
}
|
|
920
|
-
};
|
|
921
|
-
var letterSpacings = {
|
|
922
|
-
"1": {
|
|
923
|
-
$type: "letterSpacing",
|
|
924
|
-
$value: "-1%"
|
|
925
|
-
},
|
|
926
|
-
"2": {
|
|
927
|
-
$type: "letterSpacing",
|
|
928
|
-
$value: "-0.5%"
|
|
929
|
-
},
|
|
930
|
-
"3": {
|
|
931
|
-
$type: "letterSpacing",
|
|
932
|
-
$value: "-0.25%"
|
|
933
|
-
},
|
|
934
|
-
"4": {
|
|
935
|
-
$type: "letterSpacing",
|
|
936
|
-
$value: "-0.15%"
|
|
937
|
-
},
|
|
938
|
-
"5": {
|
|
939
|
-
$type: "letterSpacing",
|
|
940
|
-
$value: "0%"
|
|
941
|
-
},
|
|
942
|
-
"6": {
|
|
943
|
-
$type: "letterSpacing",
|
|
944
|
-
$value: "0.15%"
|
|
945
|
-
},
|
|
946
|
-
"7": {
|
|
947
|
-
$type: "letterSpacing",
|
|
948
|
-
$value: "0.25%"
|
|
949
|
-
},
|
|
950
|
-
"8": {
|
|
951
|
-
$type: "letterSpacing",
|
|
952
|
-
$value: "0.5%"
|
|
953
|
-
},
|
|
954
|
-
"9": {
|
|
955
|
-
$type: "letterSpacing",
|
|
956
|
-
$value: "1.5%"
|
|
957
|
-
}
|
|
958
|
-
};
|
|
959
|
-
var fontSizes = {
|
|
960
|
-
large: {
|
|
961
|
-
"line-height": lineHeights,
|
|
962
|
-
"font-size": {
|
|
963
|
-
"1": {
|
|
964
|
-
$type: "fontSizes",
|
|
965
|
-
$value: "13"
|
|
966
|
-
},
|
|
967
|
-
"2": {
|
|
968
|
-
$type: "fontSizes",
|
|
969
|
-
$value: "16"
|
|
970
|
-
},
|
|
971
|
-
"3": {
|
|
972
|
-
$type: "fontSizes",
|
|
973
|
-
$value: "18"
|
|
974
|
-
},
|
|
975
|
-
"4": {
|
|
976
|
-
$type: "fontSizes",
|
|
977
|
-
$value: "21"
|
|
978
|
-
},
|
|
979
|
-
"5": {
|
|
980
|
-
$type: "fontSizes",
|
|
981
|
-
$value: "24"
|
|
982
|
-
},
|
|
983
|
-
"6": {
|
|
984
|
-
$type: "fontSizes",
|
|
985
|
-
$value: "30"
|
|
986
|
-
},
|
|
987
|
-
"7": {
|
|
988
|
-
$type: "fontSizes",
|
|
989
|
-
$value: "36"
|
|
990
|
-
},
|
|
991
|
-
"8": {
|
|
992
|
-
$type: "fontSizes",
|
|
993
|
-
$value: "48"
|
|
994
|
-
},
|
|
995
|
-
"9": {
|
|
996
|
-
$type: "fontSizes",
|
|
997
|
-
$value: "60"
|
|
998
|
-
},
|
|
999
|
-
"10": {
|
|
1000
|
-
$type: "fontSizes",
|
|
1001
|
-
$value: "72"
|
|
1002
|
-
}
|
|
1003
|
-
},
|
|
1004
|
-
"letter-spacing": letterSpacings
|
|
1005
|
-
},
|
|
1006
|
-
medium: {
|
|
1007
|
-
"line-height": lineHeights,
|
|
1008
|
-
"font-size": {
|
|
1009
|
-
"1": {
|
|
1010
|
-
$type: "fontSizes",
|
|
1011
|
-
$value: "12"
|
|
1012
|
-
},
|
|
1013
|
-
"2": {
|
|
1014
|
-
$type: "fontSizes",
|
|
1015
|
-
$value: "14"
|
|
1016
|
-
},
|
|
1017
|
-
"3": {
|
|
1018
|
-
$type: "fontSizes",
|
|
1019
|
-
$value: "16"
|
|
1020
|
-
},
|
|
1021
|
-
"4": {
|
|
1022
|
-
$type: "fontSizes",
|
|
1023
|
-
$value: "18"
|
|
1024
|
-
},
|
|
1025
|
-
"5": {
|
|
1026
|
-
$type: "fontSizes",
|
|
1027
|
-
$value: "21"
|
|
1028
|
-
},
|
|
1029
|
-
"6": {
|
|
1030
|
-
$type: "fontSizes",
|
|
1031
|
-
$value: "24"
|
|
1032
|
-
},
|
|
1033
|
-
"7": {
|
|
1034
|
-
$type: "fontSizes",
|
|
1035
|
-
$value: "30"
|
|
1036
|
-
},
|
|
1037
|
-
"8": {
|
|
1038
|
-
$type: "fontSizes",
|
|
1039
|
-
$value: "36"
|
|
1040
|
-
},
|
|
1041
|
-
"9": {
|
|
1042
|
-
$type: "fontSizes",
|
|
1043
|
-
$value: "48"
|
|
1044
|
-
},
|
|
1045
|
-
"10": {
|
|
1046
|
-
$type: "fontSizes",
|
|
1047
|
-
$value: "60"
|
|
1048
|
-
}
|
|
1049
|
-
},
|
|
1050
|
-
"letter-spacing": letterSpacings
|
|
1051
|
-
},
|
|
1052
|
-
small: {
|
|
1053
|
-
"line-height": lineHeights,
|
|
1054
|
-
"font-size": {
|
|
1055
|
-
"1": {
|
|
1056
|
-
$type: "fontSizes",
|
|
1057
|
-
$value: "11"
|
|
1058
|
-
},
|
|
1059
|
-
"2": {
|
|
1060
|
-
$type: "fontSizes",
|
|
1061
|
-
$value: "13"
|
|
1062
|
-
},
|
|
1063
|
-
"3": {
|
|
1064
|
-
$type: "fontSizes",
|
|
1065
|
-
$value: "14"
|
|
1066
|
-
},
|
|
1067
|
-
"4": {
|
|
1068
|
-
$type: "fontSizes",
|
|
1069
|
-
$value: "16"
|
|
1070
|
-
},
|
|
1071
|
-
"5": {
|
|
1072
|
-
$type: "fontSizes",
|
|
1073
|
-
$value: "18"
|
|
1074
|
-
},
|
|
1075
|
-
"6": {
|
|
1076
|
-
$type: "fontSizes",
|
|
1077
|
-
$value: "21"
|
|
1078
|
-
},
|
|
1079
|
-
"7": {
|
|
1080
|
-
$type: "fontSizes",
|
|
1081
|
-
$value: "24"
|
|
1082
|
-
},
|
|
1083
|
-
"8": {
|
|
1084
|
-
$type: "fontSizes",
|
|
1085
|
-
$value: "30"
|
|
1086
|
-
},
|
|
1087
|
-
"9": {
|
|
1088
|
-
$type: "fontSizes",
|
|
1089
|
-
$value: "36"
|
|
1090
|
-
},
|
|
1091
|
-
"10": {
|
|
1092
|
-
$type: "fontSizes",
|
|
1093
|
-
$value: "48"
|
|
1094
|
-
}
|
|
1095
|
-
},
|
|
1096
|
-
"letter-spacing": letterSpacings
|
|
1097
|
-
}
|
|
1098
|
-
};
|
|
1099
|
-
|
|
1100
|
-
// src/tokens/create/generators/semantic/color.ts
|
|
1101
|
-
import * as R5 from "ramda";
|
|
1102
|
-
var generateSemanticColors = (colors, _themeName) => {
|
|
1103
|
-
const mainColorNames = Object.keys(colors.main);
|
|
1104
|
-
const supportColorNames = Object.keys(colors.support);
|
|
1105
|
-
const customColors = [...mainColorNames, "neutral", ...supportColorNames];
|
|
1106
|
-
const allColors = [...customColors, ...baseColorNames];
|
|
1107
|
-
const semanticColorTokens = allColors.map((colorName) => [colorName, generateColorScaleTokens(colorName)]);
|
|
1108
|
-
return {
|
|
1109
|
-
...baseColorTemplate,
|
|
1110
|
-
color: {
|
|
1111
|
-
...Object.fromEntries(semanticColorTokens),
|
|
1112
|
-
...baseColorTemplate.color
|
|
1113
|
-
}
|
|
1114
|
-
};
|
|
1115
|
-
};
|
|
1116
|
-
var baseColorTemplate = {
|
|
1117
|
-
color: {
|
|
1118
|
-
focus: {
|
|
1119
|
-
inner: {
|
|
1120
|
-
$type: "color",
|
|
1121
|
-
$value: "{color.focus.inner-color}"
|
|
1122
|
-
},
|
|
1123
|
-
outer: {
|
|
1124
|
-
$type: "color",
|
|
1125
|
-
$value: "{color.focus.outer-color}"
|
|
1126
|
-
}
|
|
1127
|
-
}
|
|
1128
|
-
},
|
|
1129
|
-
link: {
|
|
1130
|
-
color: {
|
|
1131
|
-
visited: {
|
|
1132
|
-
$type: "color",
|
|
1133
|
-
$value: "{color.link.visited}"
|
|
1134
|
-
}
|
|
1135
|
-
}
|
|
1136
|
-
}
|
|
1137
|
-
};
|
|
1138
|
-
var generateColorScaleTokens = (colorName) => {
|
|
1139
|
-
const colorScale = {};
|
|
1140
|
-
for (const [colorSemantic, colorNumber] of R5.toPairs(semanticColorMap)) {
|
|
1141
|
-
colorScale[colorSemantic] = {
|
|
1142
|
-
$type: "color",
|
|
1143
|
-
$value: `{color.${colorName}.${colorNumber}}`
|
|
1144
|
-
};
|
|
1145
|
-
}
|
|
1146
|
-
return colorScale;
|
|
1147
|
-
};
|
|
1148
|
-
|
|
1149
|
-
// src/tokens/create/generators/semantic/color-modes.ts
|
|
1150
|
-
var generateColorModes = (colors, _themeName) => {
|
|
1151
|
-
const mainColorNames = Object.keys(colors.main);
|
|
1152
|
-
const supportColorNames = Object.keys(colors.support);
|
|
1153
|
-
const modes = {
|
|
1154
|
-
"main-color": {},
|
|
1155
|
-
"support-color": {}
|
|
1156
|
-
};
|
|
1157
|
-
const categories = [
|
|
1158
|
-
["main-color", mainColorNames],
|
|
1159
|
-
["support-color", supportColorNames]
|
|
1160
|
-
];
|
|
1161
|
-
for (const [colorCategory2, colorNames2] of categories) {
|
|
1162
|
-
for (const colorName of colorNames2) {
|
|
1163
|
-
const category = colorCategory2.replace("-color", "");
|
|
1164
|
-
const customColorTokens = {
|
|
1165
|
-
color: {
|
|
1166
|
-
[category]: generateColorScaleTokens2(colorName)
|
|
1167
|
-
}
|
|
1168
|
-
};
|
|
1169
|
-
modes[colorCategory2][colorName] = customColorTokens;
|
|
1170
|
-
}
|
|
1171
|
-
}
|
|
1172
|
-
return modes;
|
|
1173
|
-
};
|
|
1174
|
-
var generateColorScaleTokens2 = (colorName) => {
|
|
1175
|
-
const colorScale = {};
|
|
1176
|
-
for (const colorSemantic of semanticColorNames) {
|
|
1177
|
-
colorScale[colorSemantic] = {
|
|
1178
|
-
$type: "color",
|
|
1179
|
-
$value: `{color.${colorName}.${colorSemantic}}`
|
|
1180
|
-
};
|
|
1181
|
-
}
|
|
1182
|
-
return colorScale;
|
|
1183
|
-
};
|
|
1184
|
-
|
|
1185
|
-
// src/tokens/create/generators/semantic/style.ts
|
|
1186
|
-
function generateSemanticStyle() {
|
|
1187
|
-
return {
|
|
1188
|
-
typography: {
|
|
1189
|
-
heading: {
|
|
1190
|
-
"2xl": {
|
|
1191
|
-
$type: "typography",
|
|
1192
|
-
$value: {
|
|
1193
|
-
fontFamily: "{font-family}",
|
|
1194
|
-
fontWeight: "{font-weight.medium}",
|
|
1195
|
-
lineHeight: "{line-height.sm}",
|
|
1196
|
-
fontSize: "{font-size.10}",
|
|
1197
|
-
letterSpacing: "{letter-spacing.1}"
|
|
1198
|
-
}
|
|
1199
|
-
},
|
|
1200
|
-
xl: {
|
|
1201
|
-
$type: "typography",
|
|
1202
|
-
$value: {
|
|
1203
|
-
fontFamily: "{font-family}",
|
|
1204
|
-
fontWeight: "{font-weight.medium}",
|
|
1205
|
-
lineHeight: "{line-height.sm}",
|
|
1206
|
-
fontSize: "{font-size.9}",
|
|
1207
|
-
letterSpacing: "{letter-spacing.1}"
|
|
1208
|
-
}
|
|
1209
|
-
},
|
|
1210
|
-
lg: {
|
|
1211
|
-
$type: "typography",
|
|
1212
|
-
$value: {
|
|
1213
|
-
fontFamily: "{font-family}",
|
|
1214
|
-
fontWeight: "{font-weight.medium}",
|
|
1215
|
-
lineHeight: "{line-height.sm}",
|
|
1216
|
-
fontSize: "{font-size.8}",
|
|
1217
|
-
letterSpacing: "{letter-spacing.2}"
|
|
1218
|
-
}
|
|
1219
|
-
},
|
|
1220
|
-
md: {
|
|
1221
|
-
$type: "typography",
|
|
1222
|
-
$value: {
|
|
1223
|
-
fontFamily: "{font-family}",
|
|
1224
|
-
fontWeight: "{font-weight.medium}",
|
|
1225
|
-
lineHeight: "{line-height.sm}",
|
|
1226
|
-
fontSize: "{font-size.7}",
|
|
1227
|
-
letterSpacing: "{letter-spacing.3}"
|
|
1228
|
-
}
|
|
1229
|
-
},
|
|
1230
|
-
sm: {
|
|
1231
|
-
$type: "typography",
|
|
1232
|
-
$value: {
|
|
1233
|
-
fontFamily: "{font-family}",
|
|
1234
|
-
fontWeight: "{font-weight.medium}",
|
|
1235
|
-
lineHeight: "{line-height.sm}",
|
|
1236
|
-
fontSize: "{font-size.6}",
|
|
1237
|
-
letterSpacing: "{letter-spacing.5}"
|
|
1238
|
-
}
|
|
1239
|
-
},
|
|
1240
|
-
xs: {
|
|
1241
|
-
$type: "typography",
|
|
1242
|
-
$value: {
|
|
1243
|
-
fontFamily: "{font-family}",
|
|
1244
|
-
fontWeight: "{font-weight.medium}",
|
|
1245
|
-
lineHeight: "{line-height.sm}",
|
|
1246
|
-
fontSize: "{font-size.5}",
|
|
1247
|
-
letterSpacing: "{letter-spacing.6}"
|
|
1248
|
-
}
|
|
1249
|
-
},
|
|
1250
|
-
"2xs": {
|
|
1251
|
-
$type: "typography",
|
|
1252
|
-
$value: {
|
|
1253
|
-
fontFamily: "{font-family}",
|
|
1254
|
-
fontWeight: "{font-weight.medium}",
|
|
1255
|
-
lineHeight: "{line-height.sm}",
|
|
1256
|
-
fontSize: "{font-size.4}",
|
|
1257
|
-
letterSpacing: "{letter-spacing.6}"
|
|
1258
|
-
}
|
|
1259
|
-
}
|
|
1260
|
-
},
|
|
1261
|
-
body: {
|
|
1262
|
-
xl: {
|
|
1263
|
-
$type: "typography",
|
|
1264
|
-
$value: {
|
|
1265
|
-
fontFamily: "{font-family}",
|
|
1266
|
-
fontWeight: "{font-weight.regular}",
|
|
1267
|
-
lineHeight: "{line-height.md}",
|
|
1268
|
-
fontSize: "{font-size.6}",
|
|
1269
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1270
|
-
}
|
|
1271
|
-
},
|
|
1272
|
-
lg: {
|
|
1273
|
-
$type: "typography",
|
|
1274
|
-
$value: {
|
|
1275
|
-
fontFamily: "{font-family}",
|
|
1276
|
-
fontWeight: "{font-weight.regular}",
|
|
1277
|
-
lineHeight: "{line-height.md}",
|
|
1278
|
-
fontSize: "{font-size.5}",
|
|
1279
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1280
|
-
}
|
|
1281
|
-
},
|
|
1282
|
-
md: {
|
|
1283
|
-
$type: "typography",
|
|
1284
|
-
$value: {
|
|
1285
|
-
fontFamily: "{font-family}",
|
|
1286
|
-
fontWeight: "{font-weight.regular}",
|
|
1287
|
-
lineHeight: "{line-height.md}",
|
|
1288
|
-
fontSize: "{font-size.4}",
|
|
1289
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1290
|
-
}
|
|
1291
|
-
},
|
|
1292
|
-
sm: {
|
|
1293
|
-
$type: "typography",
|
|
1294
|
-
$value: {
|
|
1295
|
-
fontFamily: "{font-family}",
|
|
1296
|
-
fontWeight: "{font-weight.regular}",
|
|
1297
|
-
lineHeight: "{line-height.md}",
|
|
1298
|
-
fontSize: "{font-size.3}",
|
|
1299
|
-
letterSpacing: "{letter-spacing.7}"
|
|
1300
|
-
}
|
|
1301
|
-
},
|
|
1302
|
-
xs: {
|
|
1303
|
-
$type: "typography",
|
|
1304
|
-
$value: {
|
|
1305
|
-
fontFamily: "{font-family}",
|
|
1306
|
-
fontWeight: "{font-weight.regular}",
|
|
1307
|
-
lineHeight: "{line-height.md}",
|
|
1308
|
-
fontSize: "{font-size.2}",
|
|
1309
|
-
letterSpacing: "{letter-spacing.6}"
|
|
1310
|
-
}
|
|
1311
|
-
},
|
|
1312
|
-
short: {
|
|
1313
|
-
xl: {
|
|
1314
|
-
$type: "typography",
|
|
1315
|
-
$value: {
|
|
1316
|
-
fontFamily: "{font-family}",
|
|
1317
|
-
fontWeight: "{font-weight.regular}",
|
|
1318
|
-
lineHeight: "{line-height.sm}",
|
|
1319
|
-
fontSize: "{font-size.6}",
|
|
1320
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1321
|
-
}
|
|
1322
|
-
},
|
|
1323
|
-
lg: {
|
|
1324
|
-
$type: "typography",
|
|
1325
|
-
$value: {
|
|
1326
|
-
fontFamily: "{font-family}",
|
|
1327
|
-
fontWeight: "{font-weight.regular}",
|
|
1328
|
-
lineHeight: "{line-height.sm}",
|
|
1329
|
-
fontSize: "{font-size.5}",
|
|
1330
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1331
|
-
}
|
|
1332
|
-
},
|
|
1333
|
-
md: {
|
|
1334
|
-
$type: "typography",
|
|
1335
|
-
$value: {
|
|
1336
|
-
fontFamily: "{font-family}",
|
|
1337
|
-
fontWeight: "{font-weight.regular}",
|
|
1338
|
-
lineHeight: "{line-height.sm}",
|
|
1339
|
-
fontSize: "{font-size.4}",
|
|
1340
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1341
|
-
}
|
|
1342
|
-
},
|
|
1343
|
-
sm: {
|
|
1344
|
-
$type: "typography",
|
|
1345
|
-
$value: {
|
|
1346
|
-
fontFamily: "{font-family}",
|
|
1347
|
-
fontWeight: "{font-weight.regular}",
|
|
1348
|
-
lineHeight: "{line-height.sm}",
|
|
1349
|
-
fontSize: "{font-size.3}",
|
|
1350
|
-
letterSpacing: "{letter-spacing.7}"
|
|
1351
|
-
}
|
|
1352
|
-
},
|
|
1353
|
-
xs: {
|
|
1354
|
-
$type: "typography",
|
|
1355
|
-
$value: {
|
|
1356
|
-
fontFamily: "{font-family}",
|
|
1357
|
-
fontWeight: "{font-weight.regular}",
|
|
1358
|
-
lineHeight: "{line-height.sm}",
|
|
1359
|
-
fontSize: "{font-size.2}",
|
|
1360
|
-
letterSpacing: "{letter-spacing.6}"
|
|
1361
|
-
}
|
|
1362
|
-
}
|
|
1363
|
-
},
|
|
1364
|
-
long: {
|
|
1365
|
-
xl: {
|
|
1366
|
-
$type: "typography",
|
|
1367
|
-
$value: {
|
|
1368
|
-
fontFamily: "{font-family}",
|
|
1369
|
-
fontWeight: "{font-weight.regular}",
|
|
1370
|
-
lineHeight: "{line-height.lg}",
|
|
1371
|
-
fontSize: "{font-size.6}",
|
|
1372
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1373
|
-
}
|
|
1374
|
-
},
|
|
1375
|
-
lg: {
|
|
1376
|
-
$type: "typography",
|
|
1377
|
-
$value: {
|
|
1378
|
-
fontFamily: "{font-family}",
|
|
1379
|
-
fontWeight: "{font-weight.regular}",
|
|
1380
|
-
lineHeight: "{line-height.lg}",
|
|
1381
|
-
fontSize: "{font-size.5}",
|
|
1382
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1383
|
-
}
|
|
1384
|
-
},
|
|
1385
|
-
md: {
|
|
1386
|
-
$type: "typography",
|
|
1387
|
-
$value: {
|
|
1388
|
-
fontFamily: "{font-family}",
|
|
1389
|
-
fontWeight: "{font-weight.regular}",
|
|
1390
|
-
lineHeight: "{line-height.lg}",
|
|
1391
|
-
fontSize: "{font-size.4}",
|
|
1392
|
-
letterSpacing: "{letter-spacing.8}"
|
|
1393
|
-
}
|
|
1394
|
-
},
|
|
1395
|
-
sm: {
|
|
1396
|
-
$type: "typography",
|
|
1397
|
-
$value: {
|
|
1398
|
-
fontFamily: "{font-family}",
|
|
1399
|
-
fontWeight: "{font-weight.regular}",
|
|
1400
|
-
lineHeight: "{line-height.lg}",
|
|
1401
|
-
fontSize: "{font-size.3}",
|
|
1402
|
-
letterSpacing: "{letter-spacing.7}"
|
|
1403
|
-
}
|
|
1404
|
-
},
|
|
1405
|
-
xs: {
|
|
1406
|
-
$type: "typography",
|
|
1407
|
-
$value: {
|
|
1408
|
-
fontFamily: "{font-family}",
|
|
1409
|
-
fontWeight: "{font-weight.regular}",
|
|
1410
|
-
lineHeight: "{line-height.lg}",
|
|
1411
|
-
fontSize: "{font-size.2}",
|
|
1412
|
-
letterSpacing: "{letter-spacing.6}"
|
|
1413
|
-
}
|
|
1414
|
-
}
|
|
1415
|
-
}
|
|
1416
|
-
}
|
|
1417
|
-
},
|
|
1418
|
-
opacity: {
|
|
1419
|
-
disabled: {
|
|
1420
|
-
$type: "opacity",
|
|
1421
|
-
$value: "{opacity.30}"
|
|
1422
|
-
}
|
|
1423
|
-
},
|
|
1424
|
-
"border-width": {
|
|
1425
|
-
default: {
|
|
1426
|
-
$type: "borderWidth",
|
|
1427
|
-
$value: "{border-width.1}"
|
|
1428
|
-
},
|
|
1429
|
-
focus: {
|
|
1430
|
-
$type: "borderWidth",
|
|
1431
|
-
$value: "{border-width.3}"
|
|
1432
|
-
}
|
|
1433
|
-
},
|
|
1434
|
-
shadow: {
|
|
1435
|
-
xs: {
|
|
1436
|
-
$type: "boxShadow",
|
|
1437
|
-
$value: "{shadow.100}"
|
|
1438
|
-
},
|
|
1439
|
-
sm: {
|
|
1440
|
-
$type: "boxShadow",
|
|
1441
|
-
$value: "{shadow.200}"
|
|
1442
|
-
},
|
|
1443
|
-
md: {
|
|
1444
|
-
$type: "boxShadow",
|
|
1445
|
-
$value: "{shadow.300}"
|
|
1446
|
-
},
|
|
1447
|
-
lg: {
|
|
1448
|
-
$type: "boxShadow",
|
|
1449
|
-
$value: "{shadow.400}"
|
|
1450
|
-
},
|
|
1451
|
-
xl: {
|
|
1452
|
-
$type: "boxShadow",
|
|
1453
|
-
$value: "{shadow.500}"
|
|
1454
|
-
}
|
|
1455
|
-
},
|
|
1456
|
-
"border-radius": {
|
|
1457
|
-
sm: {
|
|
1458
|
-
$type: "dimension",
|
|
1459
|
-
$value: "{border-radius.1}"
|
|
1460
|
-
},
|
|
1461
|
-
md: {
|
|
1462
|
-
$type: "dimension",
|
|
1463
|
-
$value: "{border-radius.2}"
|
|
1464
|
-
},
|
|
1465
|
-
lg: {
|
|
1466
|
-
$type: "dimension",
|
|
1467
|
-
$value: "{border-radius.3}"
|
|
1468
|
-
},
|
|
1469
|
-
xl: {
|
|
1470
|
-
$type: "dimension",
|
|
1471
|
-
$value: "{border-radius.4}"
|
|
1472
|
-
},
|
|
1473
|
-
default: {
|
|
1474
|
-
$type: "dimension",
|
|
1475
|
-
$value: "{border-radius.5}"
|
|
1476
|
-
},
|
|
1477
|
-
full: {
|
|
1478
|
-
$type: "dimension",
|
|
1479
|
-
$value: "{border-radius.6}"
|
|
1480
|
-
}
|
|
1481
|
-
},
|
|
1482
|
-
size: {
|
|
1483
|
-
"0": {
|
|
1484
|
-
$type: "dimension",
|
|
1485
|
-
$value: "{_size.0}"
|
|
1486
|
-
},
|
|
1487
|
-
"1": {
|
|
1488
|
-
$type: "dimension",
|
|
1489
|
-
$value: "{_size.1}"
|
|
1490
|
-
},
|
|
1491
|
-
"2": {
|
|
1492
|
-
$type: "dimension",
|
|
1493
|
-
$value: "{_size.2}"
|
|
1494
|
-
},
|
|
1495
|
-
"3": {
|
|
1496
|
-
$type: "dimension",
|
|
1497
|
-
$value: "{_size.3}"
|
|
1498
|
-
},
|
|
1499
|
-
"4": {
|
|
1500
|
-
$type: "dimension",
|
|
1501
|
-
$value: "{_size.4}"
|
|
1502
|
-
},
|
|
1503
|
-
"5": {
|
|
1504
|
-
$type: "dimension",
|
|
1505
|
-
$value: "{_size.5}"
|
|
1506
|
-
},
|
|
1507
|
-
"6": {
|
|
1508
|
-
$type: "dimension",
|
|
1509
|
-
$value: "{_size.6}"
|
|
1510
|
-
},
|
|
1511
|
-
"7": {
|
|
1512
|
-
$type: "dimension",
|
|
1513
|
-
$value: "{_size.7}"
|
|
1514
|
-
},
|
|
1515
|
-
"8": {
|
|
1516
|
-
$type: "dimension",
|
|
1517
|
-
$value: "{_size.8}"
|
|
1518
|
-
},
|
|
1519
|
-
"9": {
|
|
1520
|
-
$type: "dimension",
|
|
1521
|
-
$value: "{_size.9}"
|
|
1522
|
-
},
|
|
1523
|
-
"10": {
|
|
1524
|
-
$type: "dimension",
|
|
1525
|
-
$value: "{_size.10}"
|
|
1526
|
-
},
|
|
1527
|
-
"11": {
|
|
1528
|
-
$type: "dimension",
|
|
1529
|
-
$value: "{_size.11}"
|
|
1530
|
-
},
|
|
1531
|
-
"12": {
|
|
1532
|
-
$type: "dimension",
|
|
1533
|
-
$value: "{_size.12}"
|
|
1534
|
-
},
|
|
1535
|
-
"13": {
|
|
1536
|
-
$type: "dimension",
|
|
1537
|
-
$value: "{_size.13}"
|
|
1538
|
-
},
|
|
1539
|
-
"14": {
|
|
1540
|
-
$type: "dimension",
|
|
1541
|
-
$value: "{_size.14}"
|
|
1542
|
-
},
|
|
1543
|
-
"15": {
|
|
1544
|
-
$type: "dimension",
|
|
1545
|
-
$value: "{_size.15}"
|
|
1546
|
-
},
|
|
1547
|
-
"18": {
|
|
1548
|
-
$type: "dimension",
|
|
1549
|
-
$value: "{_size.18}"
|
|
1550
|
-
},
|
|
1551
|
-
"22": {
|
|
1552
|
-
$type: "dimension",
|
|
1553
|
-
$value: "{_size.22}"
|
|
1554
|
-
},
|
|
1555
|
-
"26": {
|
|
1556
|
-
$type: "dimension",
|
|
1557
|
-
$value: "{_size.26}"
|
|
1558
|
-
},
|
|
1559
|
-
"30": {
|
|
1560
|
-
$type: "dimension",
|
|
1561
|
-
$value: "{_size.30}"
|
|
1562
|
-
}
|
|
1563
|
-
}
|
|
1564
|
-
};
|
|
1565
|
-
}
|
|
1566
|
-
|
|
1567
|
-
// src/tokens/create/generators/themes/theme.ts
|
|
1568
|
-
import * as R6 from "ramda";
|
|
1569
|
-
var generateTheme = (colors, themeName, borderRadius) => {
|
|
1570
|
-
const mainColorNames = Object.keys(colors.main);
|
|
1571
|
-
const supportColorNames = Object.keys(colors.support);
|
|
1572
|
-
const customColors = [...mainColorNames, "neutral", ...supportColorNames, ...baseColorNames];
|
|
1573
|
-
const themeColorTokens = Object.fromEntries(
|
|
1574
|
-
customColors.map((colorName) => [colorName, generateColorScaleTokens3(colorName, themeName)])
|
|
1575
|
-
);
|
|
1576
|
-
const { color: themeBaseFileColor, ...remainingThemeFile } = generateBase(themeName);
|
|
1577
|
-
const themeFile = {
|
|
1578
|
-
color: {
|
|
1579
|
-
...themeColorTokens,
|
|
1580
|
-
...themeBaseFileColor,
|
|
1581
|
-
link: {
|
|
1582
|
-
visited: {
|
|
1583
|
-
$type: "color",
|
|
1584
|
-
$value: `{${themeName}.link.visited}`
|
|
1585
|
-
}
|
|
1586
|
-
},
|
|
1587
|
-
focus: {
|
|
1588
|
-
"inner-color": {
|
|
1589
|
-
$type: "color",
|
|
1590
|
-
$value: `{${themeName}.focus.inner}`
|
|
1591
|
-
},
|
|
1592
|
-
"outer-color": {
|
|
1593
|
-
$type: "color",
|
|
1594
|
-
$value: `{${themeName}.focus.outer}`
|
|
1595
|
-
}
|
|
1596
|
-
}
|
|
1597
|
-
},
|
|
1598
|
-
...remainingThemeFile
|
|
1599
|
-
};
|
|
1600
|
-
const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
|
|
1601
|
-
const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
|
|
1602
|
-
const token = JSON.parse(
|
|
1603
|
-
JSON.stringify(
|
|
1604
|
-
updatedThemeFile,
|
|
1605
|
-
(key, value) => {
|
|
1606
|
-
if (key === "$value") {
|
|
1607
|
-
return value.replace("<theme>", themeName);
|
|
1608
|
-
}
|
|
1609
|
-
return value;
|
|
1610
|
-
},
|
|
1611
|
-
2
|
|
1612
|
-
)
|
|
1613
|
-
);
|
|
1614
|
-
return token;
|
|
1615
|
-
};
|
|
1616
|
-
var generateBase = (themeName) => ({
|
|
1617
|
-
color: {},
|
|
1618
|
-
"font-family": {
|
|
1619
|
-
$type: "fontFamilies",
|
|
1620
|
-
$value: `{${themeName}.font-family}`
|
|
1621
|
-
},
|
|
1622
|
-
"font-weight": {
|
|
1623
|
-
medium: {
|
|
1624
|
-
$type: "fontWeights",
|
|
1625
|
-
$value: `{${themeName}.font-weight.medium}`
|
|
1626
|
-
},
|
|
1627
|
-
semibold: {
|
|
1628
|
-
$type: "fontWeights",
|
|
1629
|
-
$value: `{${themeName}.font-weight.semibold}`
|
|
1630
|
-
},
|
|
1631
|
-
regular: {
|
|
1632
|
-
$type: "fontWeights",
|
|
1633
|
-
$value: `{${themeName}.font-weight.regular}`
|
|
1634
|
-
}
|
|
1635
|
-
},
|
|
1636
|
-
"border-radius": {
|
|
1637
|
-
"1": {
|
|
1638
|
-
$type: "dimension",
|
|
1639
|
-
$value: "min({border-radius.base}*0.5,{border-radius.scale})"
|
|
1640
|
-
},
|
|
1641
|
-
"2": {
|
|
1642
|
-
$type: "dimension",
|
|
1643
|
-
$value: "min({border-radius.base},{border-radius.scale}*2)"
|
|
1644
|
-
},
|
|
1645
|
-
"3": {
|
|
1646
|
-
$type: "dimension",
|
|
1647
|
-
$value: "min({border-radius.base}*2,{border-radius.scale}*5)"
|
|
1648
|
-
},
|
|
1649
|
-
"4": {
|
|
1650
|
-
$type: "dimension",
|
|
1651
|
-
$value: "min({border-radius.base}*3,{border-radius.scale}*7)"
|
|
1652
|
-
},
|
|
1653
|
-
"5": {
|
|
1654
|
-
$type: "dimension",
|
|
1655
|
-
$value: "{border-radius.base}"
|
|
1656
|
-
},
|
|
1657
|
-
"6": {
|
|
1658
|
-
$type: "dimension",
|
|
1659
|
-
$value: "9999"
|
|
1660
|
-
},
|
|
1661
|
-
base: {
|
|
1662
|
-
$type: "dimension",
|
|
1663
|
-
$value: "4"
|
|
1664
|
-
},
|
|
1665
|
-
scale: {
|
|
1666
|
-
$type: "dimension",
|
|
1667
|
-
$value: "4"
|
|
1668
|
-
}
|
|
1669
|
-
}
|
|
1670
|
-
});
|
|
1671
|
-
var generateColorScaleTokens3 = (colorName, themeName) => {
|
|
1672
|
-
const colorScale = {};
|
|
1673
|
-
for (const [_, colorNumber] of R6.toPairs(semanticColorMap)) {
|
|
1674
|
-
colorScale[colorNumber] = {
|
|
1675
|
-
$type: "color",
|
|
1676
|
-
$value: `{${themeName}.${colorName}.${colorNumber}}`
|
|
1677
|
-
};
|
|
1678
|
-
}
|
|
1679
|
-
return colorScale;
|
|
1680
|
-
};
|
|
1681
|
-
|
|
1682
|
-
// src/tokens/create.ts
|
|
1683
|
-
var cliOptions = {
|
|
1684
|
-
outDir: "out-dir",
|
|
1685
|
-
clean: "clean",
|
|
1686
|
-
tailwind: "tailwind",
|
|
1687
|
-
theme: {
|
|
1688
|
-
colors: {
|
|
1689
|
-
main: "main-colors",
|
|
1690
|
-
support: "support-colors",
|
|
1691
|
-
neutral: "neutral-color"
|
|
1692
|
-
},
|
|
1693
|
-
typography: {
|
|
1694
|
-
fontFamily: "font-family"
|
|
1695
|
-
},
|
|
1696
|
-
borderRadius: "border-radius"
|
|
1697
|
-
}
|
|
1698
|
-
};
|
|
1699
|
-
var createTokens = async (theme) => {
|
|
1700
|
-
const { colors, typography: typography2, name, borderRadius, overrides } = theme;
|
|
1701
|
-
const colorSchemes = ["light", "dark"];
|
|
1702
|
-
const sizeModes2 = ["small", "medium", "large"];
|
|
1703
|
-
const tokenSets = new Map([
|
|
1704
|
-
["primitives/globals", generateGlobals()],
|
|
1705
|
-
...sizeModes2.map((size2) => [`primitives/modes/size/${size2}`, generateSize(size2)]),
|
|
1706
|
-
["primitives/modes/size/global", generateSizeGlobal()],
|
|
1707
|
-
...sizeModes2.map((size2) => [
|
|
1708
|
-
`primitives/modes/typography/size/${size2}`,
|
|
1709
|
-
generateFontSizes(size2)
|
|
1710
|
-
]),
|
|
1711
|
-
[`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
|
|
1712
|
-
[`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
|
|
1713
|
-
...colorSchemes.flatMap((scheme) => [
|
|
1714
|
-
[`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors, overrides)]
|
|
1715
|
-
]),
|
|
1716
|
-
[`themes/${name}`, generateTheme(colors, name, borderRadius)],
|
|
1717
|
-
["semantic/color", generateSemanticColors(colors, name)],
|
|
1718
|
-
// maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
|
|
1719
|
-
...Object.entries(generateColorModes(colors, name)).flatMap(
|
|
1720
|
-
([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
|
|
1721
|
-
),
|
|
1722
|
-
[`semantic/style`, generateSemanticStyle()]
|
|
1723
|
-
]);
|
|
1724
|
-
return { tokenSets };
|
|
1725
|
-
};
|
|
1726
|
-
|
|
1727
|
-
// src/config.ts
|
|
1728
|
-
var hexPatterns = [
|
|
1729
|
-
// Hex colors: #000, #0000, #000000, #00000000
|
|
1730
|
-
`#[0-9a-fA-F]{3}`,
|
|
1731
|
-
`#[0-9a-fA-F]{4}`,
|
|
1732
|
-
`#[0-9a-fA-F]{6}`,
|
|
1733
|
-
`#[0-9a-fA-F]{8}`
|
|
1734
|
-
];
|
|
1735
|
-
var reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
|
|
1736
|
-
var colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
|
|
1737
|
-
var colorSchema = z.string().regex(colorRegex).transform(convertToHex).describe(
|
|
1738
|
-
`A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
|
|
1739
|
-
);
|
|
1740
|
-
var colorCategorySchema = z.record(
|
|
1741
|
-
z.string().regex(new RegExp(reservedColorsPattern, "i"), {
|
|
1742
|
-
error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
|
|
1743
|
-
}),
|
|
1744
|
-
colorSchema,
|
|
1745
|
-
{
|
|
1746
|
-
error: "Color definitions must be hex color values"
|
|
1747
|
-
}
|
|
1748
|
-
).refine((colors) => !Object.keys(colors).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
|
|
1749
|
-
error: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
|
|
1750
|
-
}).describe("An object with one or more color definitions. The property name is used as the color name.");
|
|
1751
|
-
var colorModeOverrideSchema = z.object({
|
|
1752
|
-
light: colorSchema.optional().describe("A hex color that overrides light mode"),
|
|
1753
|
-
dark: colorSchema.optional().describe("A hex color that overrides dark mode")
|
|
1754
|
-
}).describe('Override values for semantic color tokens like "background-subtle", "border-default", etc.');
|
|
1755
|
-
var colorWeightOverrideSchema = z.partialRecord(z.enum([...colorNames]), colorModeOverrideSchema).describe('The name of the color to add overrides for, e.g. "accent"');
|
|
1756
|
-
var semanticColorOverrideSchema = z.record(z.string(), colorWeightOverrideSchema).describe("An object with color names as keys");
|
|
1757
|
-
var severityColorOverrideSchema = z.partialRecord(z.enum(baseColorNames), colorSchema.describe("A hex color, which is used for creating a color scale")).optional().describe("An object with severity color names as keys");
|
|
1758
|
-
var linkVisitedOverrideSchema = z.object({
|
|
1759
|
-
light: colorSchema.optional().describe("A hex color that overrides light mode"),
|
|
1760
|
-
dark: colorSchema.optional().describe("A hex color that overrides dark mode")
|
|
1761
|
-
}).describe('Overrides for the "link-visited" color');
|
|
1762
|
-
var focusOverrideSchema = z.object({
|
|
1763
|
-
inner: z.object({
|
|
1764
|
-
light: colorSchema.optional().describe("A hex color that overrides light mode"),
|
|
1765
|
-
dark: colorSchema.optional().describe("A hex color that overrides dark mode")
|
|
1766
|
-
}).optional().describe('Overrides for the "focus-inner" color'),
|
|
1767
|
-
outer: z.object({
|
|
1768
|
-
light: colorSchema.optional().describe("A hex color that overrides light mode"),
|
|
1769
|
-
dark: colorSchema.optional().describe("A hex color that overrides dark mode")
|
|
1770
|
-
}).optional().describe('Overrides for the "focus-outer" color')
|
|
1771
|
-
}).describe("Overrides for the focus colors");
|
|
1772
|
-
var overridesSchema = z.object({
|
|
1773
|
-
colors: semanticColorOverrideSchema.optional(),
|
|
1774
|
-
severity: severityColorOverrideSchema.optional(),
|
|
1775
|
-
linkVisited: linkVisitedOverrideSchema.optional(),
|
|
1776
|
-
focus: focusOverrideSchema.optional()
|
|
1777
|
-
}).describe("Overrides for generated design tokens. Currently only supports colors defined in your theme").optional();
|
|
1778
|
-
var themeSchema = z.object({
|
|
1779
|
-
colors: z.object({
|
|
1780
|
-
main: colorCategorySchema,
|
|
1781
|
-
support: colorCategorySchema.optional().default({}),
|
|
1782
|
-
neutral: colorSchema.describe("A hex color, which is used for creating a color scale.")
|
|
1783
|
-
}).meta({ description: "Defines the colors for this theme" }),
|
|
1784
|
-
typography: z.object({
|
|
1785
|
-
fontFamily: z.string().meta({ description: "Sets the font-family for this theme" })
|
|
1786
|
-
}).describe("Defines the typography for a given theme").optional(),
|
|
1787
|
-
borderRadius: z.number().meta({ description: "Defines the border-radius for this theme" }).optional(),
|
|
1788
|
-
overrides: overridesSchema
|
|
1789
|
-
}).meta({ description: "An object defining a theme. The property name holding the object becomes the theme name." });
|
|
1790
|
-
var commonConfig = z.object({
|
|
1791
|
-
clean: z.boolean().meta({ description: "Delete the output directory before building or creating tokens" }).optional()
|
|
1792
|
-
});
|
|
1793
|
-
var _configFileCreateSchema = z.object({
|
|
1794
|
-
outDir: z.string().meta({ description: "Path to the output directory for the created design tokens" }),
|
|
1795
|
-
themes: z.record(z.string(), themeSchema).meta({
|
|
1796
|
-
description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
|
|
1797
|
-
})
|
|
1798
|
-
}).required();
|
|
1799
|
-
var configFileCreateSchema = _configFileCreateSchema.extend(commonConfig.shape);
|
|
1800
|
-
|
|
1801
|
-
// src/tokens/format.ts
|
|
1802
|
-
import * as R24 from "ramda";
|
|
1803
|
-
|
|
1804
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
1805
|
-
var BoxShadowTypes;
|
|
1806
|
-
(function(BoxShadowTypes2) {
|
|
1807
|
-
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
1808
|
-
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
1809
|
-
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
1810
|
-
|
|
1811
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
1812
|
-
var ColorModifierTypes;
|
|
1813
|
-
(function(ColorModifierTypes2) {
|
|
1814
|
-
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
1815
|
-
ColorModifierTypes2["DARKEN"] = "darken";
|
|
1816
|
-
ColorModifierTypes2["MIX"] = "mix";
|
|
1817
|
-
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
1818
|
-
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
1819
|
-
|
|
1820
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
1821
|
-
var ColorSpaceTypes;
|
|
1822
|
-
(function(ColorSpaceTypes2) {
|
|
1823
|
-
ColorSpaceTypes2["LCH"] = "lch";
|
|
1824
|
-
ColorSpaceTypes2["SRGB"] = "srgb";
|
|
1825
|
-
ColorSpaceTypes2["P3"] = "p3";
|
|
1826
|
-
ColorSpaceTypes2["HSL"] = "hsl";
|
|
1827
|
-
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
1828
|
-
|
|
1829
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
1830
|
-
var Properties;
|
|
1831
|
-
(function(Properties2) {
|
|
1832
|
-
Properties2["sizing"] = "sizing";
|
|
1833
|
-
Properties2["height"] = "height";
|
|
1834
|
-
Properties2["width"] = "width";
|
|
1835
|
-
Properties2["spacing"] = "spacing";
|
|
1836
|
-
Properties2["verticalPadding"] = "verticalPadding";
|
|
1837
|
-
Properties2["horizontalPadding"] = "horizontalPadding";
|
|
1838
|
-
Properties2["paddingTop"] = "paddingTop";
|
|
1839
|
-
Properties2["paddingRight"] = "paddingRight";
|
|
1840
|
-
Properties2["paddingBottom"] = "paddingBottom";
|
|
1841
|
-
Properties2["paddingLeft"] = "paddingLeft";
|
|
1842
|
-
Properties2["itemSpacing"] = "itemSpacing";
|
|
1843
|
-
Properties2["fill"] = "fill";
|
|
1844
|
-
Properties2["backgroundBlur"] = "backgroundBlur";
|
|
1845
|
-
Properties2["border"] = "border";
|
|
1846
|
-
Properties2["borderTop"] = "borderTop";
|
|
1847
|
-
Properties2["borderRight"] = "borderRight";
|
|
1848
|
-
Properties2["borderBottom"] = "borderBottom";
|
|
1849
|
-
Properties2["borderLeft"] = "borderLeft";
|
|
1850
|
-
Properties2["borderColor"] = "borderColor";
|
|
1851
|
-
Properties2["borderRadius"] = "borderRadius";
|
|
1852
|
-
Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
|
|
1853
|
-
Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
|
|
1854
|
-
Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
|
|
1855
|
-
Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
|
|
1856
|
-
Properties2["borderWidth"] = "borderWidth";
|
|
1857
|
-
Properties2["borderWidthTop"] = "borderWidthTop";
|
|
1858
|
-
Properties2["borderWidthRight"] = "borderWidthRight";
|
|
1859
|
-
Properties2["borderWidthBottom"] = "borderWidthBottom";
|
|
1860
|
-
Properties2["borderWidthLeft"] = "borderWidthLeft";
|
|
1861
|
-
Properties2["boxShadow"] = "boxShadow";
|
|
1862
|
-
Properties2["opacity"] = "opacity";
|
|
1863
|
-
Properties2["fontFamilies"] = "fontFamilies";
|
|
1864
|
-
Properties2["fontWeights"] = "fontWeights";
|
|
1865
|
-
Properties2["fontSizes"] = "fontSizes";
|
|
1866
|
-
Properties2["lineHeights"] = "lineHeights";
|
|
1867
|
-
Properties2["typography"] = "typography";
|
|
1868
|
-
Properties2["composition"] = "composition";
|
|
1869
|
-
Properties2["letterSpacing"] = "letterSpacing";
|
|
1870
|
-
Properties2["paragraphSpacing"] = "paragraphSpacing";
|
|
1871
|
-
Properties2["textCase"] = "textCase";
|
|
1872
|
-
Properties2["dimension"] = "dimension";
|
|
1873
|
-
Properties2["textDecoration"] = "textDecoration";
|
|
1874
|
-
Properties2["asset"] = "asset";
|
|
1875
|
-
Properties2["tokenValue"] = "tokenValue";
|
|
1876
|
-
Properties2["value"] = "value";
|
|
1877
|
-
Properties2["tokenName"] = "tokenName";
|
|
1878
|
-
Properties2["description"] = "description";
|
|
1879
|
-
})(Properties || (Properties = {}));
|
|
1880
|
-
|
|
1881
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
1882
|
-
var TokenSetStatus;
|
|
1883
|
-
(function(TokenSetStatus2) {
|
|
1884
|
-
TokenSetStatus2["DISABLED"] = "disabled";
|
|
1885
|
-
TokenSetStatus2["SOURCE"] = "source";
|
|
1886
|
-
TokenSetStatus2["ENABLED"] = "enabled";
|
|
1887
|
-
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
1888
|
-
|
|
1889
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
1890
|
-
var TokenTypes;
|
|
1891
|
-
(function(TokenTypes2) {
|
|
1892
|
-
TokenTypes2["OTHER"] = "other";
|
|
1893
|
-
TokenTypes2["COLOR"] = "color";
|
|
1894
|
-
TokenTypes2["BORDER_RADIUS"] = "borderRadius";
|
|
1895
|
-
TokenTypes2["SIZING"] = "sizing";
|
|
1896
|
-
TokenTypes2["SPACING"] = "spacing";
|
|
1897
|
-
TokenTypes2["TEXT"] = "text";
|
|
1898
|
-
TokenTypes2["TYPOGRAPHY"] = "typography";
|
|
1899
|
-
TokenTypes2["OPACITY"] = "opacity";
|
|
1900
|
-
TokenTypes2["BORDER_WIDTH"] = "borderWidth";
|
|
1901
|
-
TokenTypes2["STROKE_STYLE"] = "strokeStyle";
|
|
1902
|
-
TokenTypes2["BOX_SHADOW"] = "boxShadow";
|
|
1903
|
-
TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
|
|
1904
|
-
TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
|
|
1905
|
-
TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
|
|
1906
|
-
TokenTypes2["FONT_SIZES"] = "fontSizes";
|
|
1907
|
-
TokenTypes2["LETTER_SPACING"] = "letterSpacing";
|
|
1908
|
-
TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
1909
|
-
TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
1910
|
-
TokenTypes2["TEXT_DECORATION"] = "textDecoration";
|
|
1911
|
-
TokenTypes2["TEXT_CASE"] = "textCase";
|
|
1912
|
-
TokenTypes2["COMPOSITION"] = "composition";
|
|
1913
|
-
TokenTypes2["DIMENSION"] = "dimension";
|
|
1914
|
-
TokenTypes2["BORDER"] = "border";
|
|
1915
|
-
TokenTypes2["ASSET"] = "asset";
|
|
1916
|
-
TokenTypes2["BOOLEAN"] = "boolean";
|
|
1917
|
-
TokenTypes2["NUMBER"] = "number";
|
|
1918
|
-
})(TokenTypes || (TokenTypes = {}));
|
|
1919
|
-
|
|
1920
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
1921
|
-
var BorderValues;
|
|
1922
|
-
(function(BorderValues2) {
|
|
1923
|
-
BorderValues2["BORDER_COLOR"] = "color";
|
|
1924
|
-
BorderValues2["BORDER_WIDTH"] = "width";
|
|
1925
|
-
BorderValues2["BORDER_STYLE"] = "style";
|
|
1926
|
-
})(BorderValues || (BorderValues = {}));
|
|
1927
|
-
|
|
1928
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
1929
|
-
var StrokeStyleValues;
|
|
1930
|
-
(function(StrokeStyleValues2) {
|
|
1931
|
-
StrokeStyleValues2["SOLID"] = "solid";
|
|
1932
|
-
StrokeStyleValues2["DASHED"] = "dashed";
|
|
1933
|
-
StrokeStyleValues2["DOTTED"] = "dotted";
|
|
1934
|
-
StrokeStyleValues2["DOUBLE"] = "double";
|
|
1935
|
-
StrokeStyleValues2["GROOVE"] = "groove";
|
|
1936
|
-
StrokeStyleValues2["RIDGE"] = "ridge";
|
|
1937
|
-
StrokeStyleValues2["OUTSET"] = "outset";
|
|
1938
|
-
StrokeStyleValues2["INSET"] = "inset";
|
|
1939
|
-
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
1940
|
-
|
|
1941
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
1942
|
-
var BoxShadowValues;
|
|
1943
|
-
(function(BoxShadowValues2) {
|
|
1944
|
-
BoxShadowValues2["TYPE"] = "type";
|
|
1945
|
-
BoxShadowValues2["COLOR"] = "color";
|
|
1946
|
-
BoxShadowValues2["X"] = "x";
|
|
1947
|
-
BoxShadowValues2["Y"] = "y";
|
|
1948
|
-
BoxShadowValues2["BLUR"] = "blur";
|
|
1949
|
-
BoxShadowValues2["SPREAD"] = "spread";
|
|
1950
|
-
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
1951
|
-
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
1952
|
-
|
|
1953
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
1954
|
-
var TypographyValues;
|
|
1955
|
-
(function(TypographyValues2) {
|
|
1956
|
-
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
1957
|
-
TypographyValues2["FONT_WEIGHT"] = "fontWeight";
|
|
1958
|
-
TypographyValues2["LINE_HEIGHT"] = "lineHeight";
|
|
1959
|
-
TypographyValues2["FONT_SIZE"] = "fontSize";
|
|
1960
|
-
TypographyValues2["LETTER_SPACING"] = "letterSpacing";
|
|
1961
|
-
TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
1962
|
-
TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
1963
|
-
TypographyValues2["TEXT_DECORATION"] = "textDecoration";
|
|
1964
|
-
TypographyValues2["TEXT_CASE"] = "textCase";
|
|
1965
|
-
})(TypographyValues || (TypographyValues = {}));
|
|
1966
|
-
|
|
1967
|
-
// src/tokens/create/generators/$themes.ts
|
|
1968
|
-
var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
|
|
1969
|
-
async function createHash(text, algo = "SHA-1") {
|
|
1970
|
-
const crypto = globalThis.crypto;
|
|
1971
|
-
return Array.from(
|
|
1972
|
-
new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
|
|
1973
|
-
(byte) => byte.toString(16).padStart(2, "0")
|
|
1974
|
-
).join("");
|
|
1975
|
-
}
|
|
1976
|
-
async function generate$Themes(colorSchemes, themes, colors, sizeModes2) {
|
|
1977
|
-
return [
|
|
1978
|
-
...generateSizeGroup(sizeModes2),
|
|
1979
|
-
...await generateThemesGroup(themes),
|
|
1980
|
-
...generateTypographyGroup(themes),
|
|
1981
|
-
...generateColorSchemesGroup(colorSchemes, themes),
|
|
1982
|
-
generateSemanticGroup(),
|
|
1983
|
-
...await generateColorGroup("main", colors),
|
|
1984
|
-
...await generateColorGroup("support", colors)
|
|
1985
|
-
];
|
|
1986
|
-
}
|
|
1987
|
-
function generateSizeGroup(_sizes) {
|
|
1988
|
-
return [
|
|
1989
|
-
{
|
|
1990
|
-
id: "8b2c8cc86611a34b135cb22948666779361fd729",
|
|
1991
|
-
name: "medium",
|
|
1992
|
-
$figmaStyleReferences: {},
|
|
1993
|
-
selectedTokenSets: {
|
|
1994
|
-
"primitives/modes/size/medium": TokenSetStatus.SOURCE,
|
|
1995
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
1996
|
-
"primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
|
|
1997
|
-
},
|
|
1998
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
1999
|
-
$figmaModeId: "41630:1",
|
|
2000
|
-
group: "Size"
|
|
2001
|
-
},
|
|
2002
|
-
{
|
|
2003
|
-
id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
|
|
2004
|
-
name: "large",
|
|
2005
|
-
$figmaStyleReferences: {},
|
|
2006
|
-
selectedTokenSets: {
|
|
2007
|
-
"primitives/modes/size/large": TokenSetStatus.SOURCE,
|
|
2008
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
2009
|
-
"primitives/modes/typography/size/large": TokenSetStatus.ENABLED
|
|
2010
|
-
},
|
|
2011
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
2012
|
-
$figmaModeId: "41630:2",
|
|
2013
|
-
group: "Size"
|
|
2014
|
-
},
|
|
2015
|
-
{
|
|
2016
|
-
id: "fb11567729c298ca37c9da4e3a27716a23480824",
|
|
2017
|
-
name: "small",
|
|
2018
|
-
$figmaStyleReferences: {},
|
|
2019
|
-
selectedTokenSets: {
|
|
2020
|
-
"primitives/modes/size/small": TokenSetStatus.SOURCE,
|
|
2021
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
2022
|
-
"primitives/modes/typography/size/small": TokenSetStatus.ENABLED
|
|
2023
|
-
},
|
|
2024
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
2025
|
-
$figmaModeId: "41630:3",
|
|
2026
|
-
group: "Size"
|
|
2027
|
-
}
|
|
2028
|
-
];
|
|
2029
|
-
}
|
|
2030
|
-
var colorSchemeDefaults = {
|
|
2031
|
-
light: {
|
|
2032
|
-
name: "Light",
|
|
2033
|
-
selectedTokenSets: {},
|
|
2034
|
-
id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
|
|
2035
|
-
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
2036
|
-
$figmaModeId: "34811:0"
|
|
2037
|
-
},
|
|
2038
|
-
dark: {
|
|
2039
|
-
name: "Dark",
|
|
2040
|
-
selectedTokenSets: {},
|
|
2041
|
-
id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
|
|
2042
|
-
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
2043
|
-
$figmaModeId: "34811:1"
|
|
2044
|
-
},
|
|
2045
|
-
contrast: {
|
|
2046
|
-
name: "Contrast",
|
|
2047
|
-
selectedTokenSets: {},
|
|
2048
|
-
id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
|
|
2049
|
-
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
2050
|
-
$figmaModeId: "34811:2"
|
|
2051
|
-
}
|
|
2052
|
-
};
|
|
2053
|
-
function generateColorSchemesGroup(colorSchemes, themes) {
|
|
2054
|
-
return colorSchemes.map(
|
|
2055
|
-
(scheme) => ({
|
|
2056
|
-
...colorSchemeDefaults[scheme],
|
|
2057
|
-
selectedTokenSets: Object.fromEntries([
|
|
2058
|
-
...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
|
|
2059
|
-
]),
|
|
2060
|
-
group: "Color scheme"
|
|
2061
|
-
})
|
|
2062
|
-
);
|
|
2063
|
-
}
|
|
2064
|
-
async function generateThemesGroup(themes) {
|
|
2065
|
-
return Promise.all(
|
|
2066
|
-
themes.map(
|
|
2067
|
-
async (theme, index) => ({
|
|
2068
|
-
id: await createHash(theme),
|
|
2069
|
-
$figmaCollectionId: "VariableCollectionId:36528:61712",
|
|
2070
|
-
$figmaModeId: `40960:${index + 6}`,
|
|
2071
|
-
// Start on 6 in Token Studio and Community file for some reason
|
|
2072
|
-
name: theme,
|
|
2073
|
-
selectedTokenSets: {
|
|
2074
|
-
[`themes/${theme}`]: TokenSetStatus.ENABLED
|
|
2075
|
-
},
|
|
2076
|
-
group: "Theme"
|
|
2077
|
-
})
|
|
2078
|
-
)
|
|
2079
|
-
);
|
|
2080
|
-
}
|
|
2081
|
-
function generateSemanticGroup() {
|
|
2082
|
-
return {
|
|
2083
|
-
id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
|
|
2084
|
-
name: "Semantic",
|
|
2085
|
-
selectedTokenSets: {
|
|
2086
|
-
"semantic/style": TokenSetStatus.ENABLED,
|
|
2087
|
-
"semantic/color": TokenSetStatus.ENABLED,
|
|
2088
|
-
"primitives/globals": TokenSetStatus.SOURCE
|
|
2089
|
-
},
|
|
2090
|
-
$figmaCollectionId: "VariableCollectionId:34811:5976",
|
|
2091
|
-
$figmaModeId: "34811:5",
|
|
2092
|
-
group: "Semantic"
|
|
2093
|
-
};
|
|
2094
|
-
}
|
|
2095
|
-
async function generateColorGroup(group, colors) {
|
|
2096
|
-
return Promise.all(
|
|
2097
|
-
Object.entries(colors[group]).map(
|
|
2098
|
-
async ([color]) => ({
|
|
2099
|
-
id: await createHash(`${group}-${color}`),
|
|
2100
|
-
name: color,
|
|
2101
|
-
selectedTokenSets: {
|
|
2102
|
-
[`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
|
|
2103
|
-
},
|
|
2104
|
-
group: `${capitalize(group)} color`
|
|
2105
|
-
})
|
|
2106
|
-
)
|
|
2107
|
-
);
|
|
2108
|
-
}
|
|
2109
|
-
function generateTypographyGroup(themes) {
|
|
2110
|
-
return [
|
|
2111
|
-
{
|
|
2112
|
-
id: "368d753fcac4455f289500eaa42e70dc0a03522f",
|
|
2113
|
-
$figmaCollectionId: "VariableCollectionId:36248:20769",
|
|
2114
|
-
$figmaModeId: "36248:2",
|
|
2115
|
-
name: "Primary",
|
|
2116
|
-
selectedTokenSets: Object.fromEntries(
|
|
2117
|
-
themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
|
|
2118
|
-
),
|
|
2119
|
-
group: "Typography"
|
|
2120
|
-
},
|
|
2121
|
-
{
|
|
2122
|
-
id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
|
|
2123
|
-
$figmaCollectionId: "VariableCollectionId:36248:20769",
|
|
2124
|
-
$figmaModeId: "36248:3",
|
|
2125
|
-
name: "Secondary",
|
|
2126
|
-
selectedTokenSets: Object.fromEntries(
|
|
2127
|
-
themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
|
|
2128
|
-
),
|
|
2129
|
-
group: "Typography"
|
|
2130
|
-
}
|
|
2131
|
-
];
|
|
2132
|
-
}
|
|
2133
|
-
|
|
2134
|
-
// src/tokens/process/output/theme.ts
|
|
2135
|
-
import pc2 from "picocolors";
|
|
2136
|
-
import * as R9 from "ramda";
|
|
2137
|
-
|
|
2138
|
-
// package.json
|
|
2139
|
-
var package_default = {
|
|
2140
|
-
name: "@digdir/designsystemet",
|
|
2141
|
-
version: "1.13.2",
|
|
2142
|
-
description: "CLI for Designsystemet",
|
|
2143
|
-
author: "Designsystemet team",
|
|
2144
|
-
engines: {
|
|
2145
|
-
node: ">=20.20.2"
|
|
2146
|
-
},
|
|
2147
|
-
repository: {
|
|
2148
|
-
type: "git",
|
|
2149
|
-
url: "git+https://github.com/digdir/designsystemet.git"
|
|
2150
|
-
},
|
|
2151
|
-
homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
|
|
2152
|
-
license: "MIT",
|
|
2153
|
-
type: "module",
|
|
2154
|
-
main: "./dist/src/index.js",
|
|
2155
|
-
files: [
|
|
2156
|
-
"./dist/**",
|
|
2157
|
-
"./configs/**"
|
|
2158
|
-
],
|
|
2159
|
-
bin: "dist/bin/designsystemet.js",
|
|
2160
|
-
exports: {
|
|
2161
|
-
".": {
|
|
2162
|
-
import: "./dist/src/index.js"
|
|
2163
|
-
},
|
|
2164
|
-
"./color": {
|
|
2165
|
-
import: "./dist/src/colors/index.js"
|
|
2166
|
-
},
|
|
2167
|
-
"./tokens": {
|
|
2168
|
-
import: "./dist/src/tokens/index.js"
|
|
2169
|
-
},
|
|
2170
|
-
"./types": {
|
|
2171
|
-
import: "./dist/src/types.js"
|
|
2172
|
-
}
|
|
2173
|
-
},
|
|
2174
|
-
publishConfig: {
|
|
2175
|
-
access: "public"
|
|
2176
|
-
},
|
|
2177
|
-
scripts: {
|
|
2178
|
-
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
2179
|
-
"designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
|
|
2180
|
-
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
2181
|
-
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
2182
|
-
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
2183
|
-
types: "tsc --noEmit",
|
|
2184
|
-
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
2185
|
-
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
2186
|
-
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
2187
|
-
"test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
|
|
2188
|
-
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2189
|
-
"test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2190
|
-
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2191
|
-
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2192
|
-
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2193
|
-
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
|
|
2194
|
-
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|
|
2195
|
-
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
2196
|
-
verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
|
|
2197
|
-
},
|
|
2198
|
-
dependencies: {
|
|
2199
|
-
"@commander-js/extra-typings": "^14.0.0",
|
|
2200
|
-
"@digdir/designsystemet-types": "workspace:",
|
|
2201
|
-
"@tokens-studio/sd-transforms": "2.0.3",
|
|
2202
|
-
"chroma-js": "^3.2.0",
|
|
2203
|
-
"colorjs.io": "^0.6.1",
|
|
2204
|
-
commander: "^14.0.3",
|
|
2205
|
-
"fast-glob": "^3.3.3",
|
|
2206
|
-
hsluv: "^1.0.1",
|
|
2207
|
-
"object-hash": "^3.0.0",
|
|
2208
|
-
picocolors: "^1.1.1",
|
|
2209
|
-
postcss: "^8.5.8",
|
|
2210
|
-
ramda: "^0.32.0",
|
|
2211
|
-
"style-dictionary": "^5.4.0",
|
|
2212
|
-
zod: "^4.3.6",
|
|
2213
|
-
"zod-validation-error": "^5.0.0"
|
|
2214
|
-
},
|
|
2215
|
-
devDependencies: {
|
|
2216
|
-
"@tokens-studio/types": "0.5.2",
|
|
2217
|
-
"@types/chroma-js": "3.1.2",
|
|
2218
|
-
"@types/node": "24.12.2",
|
|
2219
|
-
"@types/object-hash": "3.0.6",
|
|
2220
|
-
"@types/ramda": "0.31.1",
|
|
2221
|
-
tsup: "8.5.1",
|
|
2222
|
-
tsx: "4.21.0",
|
|
2223
|
-
typescript: "5.9.3"
|
|
2224
|
-
}
|
|
2225
|
-
};
|
|
2226
|
-
|
|
2227
|
-
// src/tokens/utils.ts
|
|
2228
|
-
import * as R8 from "ramda";
|
|
2229
|
-
|
|
2230
|
-
// src/tokens/types.ts
|
|
2231
|
-
var colorCategories = {
|
|
2232
|
-
main: "main",
|
|
2233
|
-
support: "support"
|
|
2234
|
-
};
|
|
2235
|
-
|
|
2236
|
-
// src/tokens/utils.ts
|
|
2237
|
-
var mapToLowerCase = R8.map(R8.toLower);
|
|
2238
|
-
var hasAnyTruth = R8.any(R8.equals(true));
|
|
2239
|
-
var getType = (token) => (token.$type ?? token.type) || "";
|
|
2240
|
-
var getValue = (token) => token.$value ?? token.value;
|
|
2241
|
-
var typeEquals = R8.curry(
|
|
2242
|
-
(types, token) => {
|
|
2243
|
-
if (R8.isNil(token)) {
|
|
2244
|
-
return false;
|
|
2245
|
-
}
|
|
2246
|
-
return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
|
|
2247
|
-
}
|
|
2248
|
-
);
|
|
2249
|
-
var pathStartsWithOneOf = R8.curry(
|
|
2250
|
-
(paths, token) => {
|
|
2251
|
-
if (R8.isNil(token)) {
|
|
2252
|
-
return false;
|
|
2253
|
-
}
|
|
2254
|
-
const tokenPath = mapToLowerCase(token.path);
|
|
2255
|
-
const matchPathsStartingWith = R8.map((pathOrString) => {
|
|
2256
|
-
const path2 = typeof pathOrString === "string" ? [pathOrString] : pathOrString;
|
|
2257
|
-
return R8.startsWith(mapToLowerCase(path2), tokenPath);
|
|
2258
|
-
}, paths);
|
|
2259
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
2260
|
-
}
|
|
2261
|
-
);
|
|
2262
|
-
function isSemanticToken(token) {
|
|
2263
|
-
return token.filePath.includes("semantic/");
|
|
2264
|
-
}
|
|
2265
|
-
function isSemanticColorToken(token, color) {
|
|
2266
|
-
return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
|
|
2267
|
-
}
|
|
2268
|
-
function isGlobalColorToken(token) {
|
|
2269
|
-
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
2270
|
-
}
|
|
2271
|
-
function isColorCategoryToken(token, category) {
|
|
2272
|
-
if (!category) {
|
|
2273
|
-
return Object.keys(colorCategories).some(
|
|
2274
|
-
(colorCategory2) => isColorCategoryToken(token, colorCategory2)
|
|
2275
|
-
);
|
|
2276
|
-
}
|
|
2277
|
-
return R8.startsWith(["color", category], token.path);
|
|
2278
|
-
}
|
|
2279
|
-
var isDigit = (s) => /^\d+$/.test(s);
|
|
2280
|
-
function traverseObj(obj, fn) {
|
|
2281
|
-
for (const key in obj) {
|
|
2282
|
-
const prop3 = obj[key];
|
|
2283
|
-
if (prop3 != null) {
|
|
2284
|
-
fn.apply(null, [obj, key, prop3]);
|
|
2285
|
-
if (typeof prop3 === "object") {
|
|
2286
|
-
traverseObj(prop3, fn);
|
|
2287
|
-
}
|
|
2288
|
-
}
|
|
2289
|
-
}
|
|
2290
|
-
return obj;
|
|
2291
|
-
}
|
|
2292
|
-
function inlineTokens(shouldInline, tokens) {
|
|
2293
|
-
const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
|
|
2294
|
-
return otherTokens.map((token) => {
|
|
2295
|
-
let transformed = getValue(token.original);
|
|
2296
|
-
for (const ref of inlineableTokens) {
|
|
2297
|
-
const refName = ref.path.join(".");
|
|
2298
|
-
if (typeof transformed === "string") {
|
|
2299
|
-
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
2300
|
-
}
|
|
2301
|
-
}
|
|
2302
|
-
const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
|
|
2303
|
-
return tokenWithInlinedRefs;
|
|
2304
|
-
});
|
|
2305
|
-
}
|
|
2306
|
-
var sizeMap = {
|
|
2307
|
-
xsmall: "xs",
|
|
2308
|
-
small: "sm",
|
|
2309
|
-
medium: "md",
|
|
2310
|
-
large: "lg",
|
|
2311
|
-
xlarge: "xl"
|
|
2312
|
-
};
|
|
2313
|
-
function shortSizeName(size2) {
|
|
2314
|
-
return sizeMap[size2] ?? size2;
|
|
2315
|
-
}
|
|
2316
|
-
var sizeComparator = (size2) => {
|
|
2317
|
-
const sortIndex = Object.entries(sizeMap).findIndex(([key, val]) => key === size2 || val === size2);
|
|
2318
|
-
return sortIndex ?? 0;
|
|
2319
|
-
};
|
|
2320
|
-
function orderBySize(sizes) {
|
|
2321
|
-
return R8.sortBy(sizeComparator, sizes);
|
|
2322
|
-
}
|
|
2323
|
-
|
|
2324
|
-
// src/tokens/process/output/theme.ts
|
|
2325
|
-
var defaultFileHeader = `build: v${package_default.version}`;
|
|
2326
|
-
var getFileNameWithoutExtension = (path2) => {
|
|
2327
|
-
const pathSegments = path2.split("/");
|
|
2328
|
-
return pathSegments[pathSegments.length - 1].split(".").slice(0, -1).join(".");
|
|
2329
|
-
};
|
|
2330
|
-
var createThemeCSSFiles = ({
|
|
2331
|
-
processedBuilds,
|
|
2332
|
-
fileHeader = defaultFileHeader
|
|
2333
|
-
}) => {
|
|
2334
|
-
const groupedByTheme = {};
|
|
2335
|
-
for (const [_, buildResults] of Object.entries(processedBuilds)) {
|
|
2336
|
-
for (const buildResult of buildResults) {
|
|
2337
|
-
const themeName = buildResult.permutation.theme;
|
|
2338
|
-
const newOutputs = buildResult.formatted;
|
|
2339
|
-
if (R9.isNotEmpty(newOutputs)) {
|
|
2340
|
-
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
2341
|
-
groupedByTheme[themeName] = R9.concat(currentOutputs, newOutputs);
|
|
2342
|
-
}
|
|
2343
|
-
}
|
|
2344
|
-
}
|
|
2345
|
-
const sortOrder = [
|
|
2346
|
-
"size-mode/",
|
|
2347
|
-
"type-scale",
|
|
2348
|
-
"color-scheme/light",
|
|
2349
|
-
"typography/secondary",
|
|
2350
|
-
"size",
|
|
2351
|
-
"semantic",
|
|
2352
|
-
"color-scheme/dark",
|
|
2353
|
-
"color-scheme/contrast",
|
|
2354
|
-
"typography/primary",
|
|
2355
|
-
"color/"
|
|
2356
|
-
];
|
|
2357
|
-
const sortByDefinedOrder = R9.sortBy((file) => {
|
|
2358
|
-
const filePath = file.destination || "";
|
|
2359
|
-
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
2360
|
-
if (sortElement.endsWith("/")) {
|
|
2361
|
-
return filePath.includes(sortElement);
|
|
2362
|
-
}
|
|
2363
|
-
return filePath.includes(`${sortElement}.css`);
|
|
2364
|
-
});
|
|
2365
|
-
if (sortIndex === -1) {
|
|
2366
|
-
console.error(
|
|
2367
|
-
pc2.yellow(`WARNING: CSS section does not have a defined sort order: ${filePath.replace(".css", "")}`)
|
|
2368
|
-
);
|
|
2369
|
-
console.log(
|
|
2370
|
-
pc2.dim(
|
|
2371
|
-
`
|
|
2372
|
-
The section will currently be added to the end of the entry file, but the exact
|
|
2373
|
-
order may change due to nondeterminism.`.trim()
|
|
2374
|
-
)
|
|
2375
|
-
);
|
|
2376
|
-
return Infinity;
|
|
2377
|
-
}
|
|
2378
|
-
return sortIndex;
|
|
2379
|
-
});
|
|
2380
|
-
const header = `@charset "UTF-8";
|
|
2381
|
-
/*
|
|
2382
|
-
${fileHeader}
|
|
2383
|
-
*/
|
|
2384
|
-
|
|
2385
|
-
`;
|
|
2386
|
-
const sortAlphabetically = R9.sort(R9.ascend((x) => x.destination || ""));
|
|
2387
|
-
const sortBySize = R9.sortBy(
|
|
2388
|
-
R9.pipe((s) => getFileNameWithoutExtension(s.destination ?? ""), sizeComparator)
|
|
2389
|
-
);
|
|
2390
|
-
const pickOutputs = R9.map(R9.view(R9.lensProp("output")));
|
|
2391
|
-
const themeCSSFile = R9.pipe(
|
|
2392
|
-
sortAlphabetically,
|
|
2393
|
-
sortBySize,
|
|
2394
|
-
sortByDefinedOrder,
|
|
2395
|
-
pickOutputs,
|
|
2396
|
-
R9.join("\n"),
|
|
2397
|
-
(content) => header + content
|
|
2398
|
-
);
|
|
2399
|
-
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
2400
|
-
destination: `${theme}.css`,
|
|
2401
|
-
output: themeCSSFile(files)
|
|
2402
|
-
}));
|
|
2403
|
-
return themeCSSFiles;
|
|
2404
|
-
};
|
|
2405
|
-
|
|
2406
|
-
// src/tokens/process/platform.ts
|
|
2407
|
-
import pc4 from "picocolors";
|
|
2408
|
-
import * as R23 from "ramda";
|
|
2409
|
-
import StyleDictionary2 from "style-dictionary";
|
|
2410
|
-
|
|
2411
|
-
// src/tokens/process/configs.ts
|
|
2412
|
-
import { register } from "@tokens-studio/sd-transforms";
|
|
2413
|
-
import * as R22 from "ramda";
|
|
2414
|
-
import StyleDictionary from "style-dictionary";
|
|
2415
|
-
|
|
2416
|
-
// src/tokens/process/configs/color.ts
|
|
2417
|
-
import * as R17 from "ramda";
|
|
2418
|
-
|
|
2419
|
-
// src/tokens/process/formats/css/color.ts
|
|
2420
|
-
import * as R10 from "ramda";
|
|
2421
|
-
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
2422
|
-
var prefersColorScheme = (colorScheme2, content) => `
|
|
2423
|
-
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
2424
|
-
[data-color-scheme="auto"] ${content}
|
|
2425
|
-
}
|
|
2426
|
-
`;
|
|
2427
|
-
var colorScheme = {
|
|
2428
|
-
name: "ds/css-colorscheme",
|
|
2429
|
-
format: async ({ dictionary, options, platform }) => {
|
|
2430
|
-
const { allTokens } = dictionary;
|
|
2431
|
-
const { outputReferences, usesDtcg } = options;
|
|
2432
|
-
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
2433
|
-
const colorScheme_ = colorScheme2;
|
|
2434
|
-
const format = createPropertyFormatter({
|
|
2435
|
-
outputReferences,
|
|
2436
|
-
dictionary,
|
|
2437
|
-
format: "css",
|
|
2438
|
-
usesDtcg
|
|
2439
|
-
});
|
|
2440
|
-
const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
|
|
2441
|
-
color-scheme: ${colorScheme_};
|
|
2442
|
-
` : "";
|
|
2443
|
-
const filteredAllTokens = allTokens.filter(
|
|
2444
|
-
R10.allPass([
|
|
2445
|
-
R10.anyPass([
|
|
2446
|
-
// Include semantic tokens in the output
|
|
2447
|
-
isSemanticToken,
|
|
2448
|
-
// Include global color tokens
|
|
2449
|
-
isGlobalColorToken
|
|
2450
|
-
]),
|
|
2451
|
-
// Don't include color category tokens -- they are exported separately
|
|
2452
|
-
(t) => !isColorCategoryToken(t)
|
|
2453
|
-
])
|
|
2454
|
-
);
|
|
2455
|
-
const formattedMap = filteredAllTokens.map((token) => ({
|
|
2456
|
-
token,
|
|
2457
|
-
formatted: format(token)
|
|
2458
|
-
}));
|
|
2459
|
-
const formattedTokens = formattedMap.map(R10.view(R10.lensProp("formatted"))).join("\n");
|
|
2460
|
-
const content = `{
|
|
2461
|
-
${formattedTokens}
|
|
2462
|
-
${colorSchemeProperty}}
|
|
2463
|
-
`;
|
|
2464
|
-
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
2465
|
-
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
2466
|
-
${selector} ${content} ${autoSelectorContent}
|
|
2467
|
-
}
|
|
2468
|
-
` : `${selector} ${content} ${autoSelectorContent}
|
|
2469
|
-
`;
|
|
2470
|
-
return body;
|
|
2471
|
-
}
|
|
2472
|
-
};
|
|
2473
|
-
var colorCategory = {
|
|
2474
|
-
name: "ds/css-colorcategory",
|
|
2475
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2476
|
-
const { outputReferences, usesDtcg } = options;
|
|
2477
|
-
const { selector, layer } = platform;
|
|
2478
|
-
const destination = file.destination;
|
|
2479
|
-
const format = R10.compose(
|
|
2480
|
-
createPropertyFormatter({
|
|
2481
|
-
outputReferences,
|
|
2482
|
-
dictionary,
|
|
2483
|
-
format: "css",
|
|
2484
|
-
usesDtcg
|
|
2485
|
-
}),
|
|
2486
|
-
(token) => ({
|
|
2487
|
-
...token,
|
|
2488
|
-
name: token.name.replace(/color-\w+-/, "color-"),
|
|
2489
|
-
original: {
|
|
2490
|
-
...token.original,
|
|
2491
|
-
$value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
|
|
2492
|
-
}
|
|
2493
|
-
})
|
|
2494
|
-
);
|
|
2495
|
-
const formattedMap = dictionary.allTokens.map((token) => ({
|
|
2496
|
-
token,
|
|
2497
|
-
formatted: format(token)
|
|
2498
|
-
}));
|
|
2499
|
-
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
2500
|
-
const formattedTokens = formattedMap.map(R10.view(R10.lensProp("formatted"))).join("\n");
|
|
2501
|
-
const content = `{
|
|
2502
|
-
${formattedTokens}
|
|
2503
|
-
}
|
|
2504
|
-
`;
|
|
2505
|
-
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
2506
|
-
${selector} ${content}
|
|
2507
|
-
}
|
|
2508
|
-
` : `${selector} ${content}
|
|
2509
|
-
`;
|
|
2510
|
-
return body;
|
|
2511
|
-
}
|
|
2512
|
-
};
|
|
2513
|
-
|
|
2514
|
-
// src/tokens/process/formats/css/semantic.ts
|
|
2515
|
-
import * as R12 from "ramda";
|
|
2516
|
-
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
2517
|
-
|
|
2518
|
-
// src/tokens/process/formats/css/size.ts
|
|
2519
|
-
import * as R11 from "ramda";
|
|
2520
|
-
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
2521
|
-
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
2522
|
-
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
2523
|
-
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
2524
|
-
var isInlineTokens = R11.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
2525
|
-
var overrideSizingFormula = (format, token) => {
|
|
2526
|
-
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
2527
|
-
let calc;
|
|
2528
|
-
let round;
|
|
2529
|
-
if (token.path[1] === "unit") {
|
|
2530
|
-
calc = `calc(1rem * ${value})`;
|
|
2531
|
-
} else if (value.startsWith("floor")) {
|
|
2532
|
-
calc = value.replace(/^floor\((.*)\)$/, "calc($1)");
|
|
2533
|
-
round = `round(down, ${calc}, 1px)`;
|
|
2534
|
-
} else {
|
|
2535
|
-
calc = value.includes("*") ? `calc(${value})` : value;
|
|
2536
|
-
}
|
|
2537
|
-
return {
|
|
2538
|
-
name,
|
|
2539
|
-
round: round ?? calc,
|
|
2540
|
-
calc
|
|
2541
|
-
};
|
|
2542
|
-
};
|
|
2543
|
-
var formatSizingTokens = (format, tokens) => R11.reduce(
|
|
2544
|
-
(acc, token) => {
|
|
2545
|
-
const { round, calc, name } = overrideSizingFormula(format, token);
|
|
2546
|
-
return {
|
|
2547
|
-
tokens: [...acc.tokens, token],
|
|
2548
|
-
round: [...acc.round, `${name}: ${round};`],
|
|
2549
|
-
calc: [...acc.calc, `${name}: ${calc};`]
|
|
2550
|
-
};
|
|
2551
|
-
},
|
|
2552
|
-
{ tokens: [], round: [], calc: [] },
|
|
2553
|
-
tokens
|
|
2554
|
-
);
|
|
2555
|
-
var sizingTemplate = ({ round, calc }) => {
|
|
2556
|
-
const usesRounding = round.filter((val, i) => val !== calc[i]);
|
|
2557
|
-
return `
|
|
2558
|
-
${calc.join("\n")}
|
|
2559
|
-
|
|
2560
|
-
@supports (width: round(down, .1em, 1px)) {
|
|
2561
|
-
${usesRounding.join("\n ")}
|
|
2562
|
-
}`;
|
|
2563
|
-
};
|
|
2564
|
-
var size = {
|
|
2565
|
-
name: "ds/css-size",
|
|
2566
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2567
|
-
const { outputReferences, usesDtcg } = options;
|
|
2568
|
-
const { selector, layer } = platform;
|
|
2569
|
-
const destination = file.destination;
|
|
2570
|
-
const format = createPropertyFormatter2({
|
|
2571
|
-
outputReferences,
|
|
2572
|
-
dictionary,
|
|
2573
|
-
format: "css",
|
|
2574
|
-
usesDtcg
|
|
2575
|
-
});
|
|
2576
|
-
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
2577
|
-
const filteredTokens = R11.reject((token) => R11.equals(["_size", "mode-font-size"], token.path), tokens);
|
|
2578
|
-
const [sizingTokens, restTokens] = R11.partition(
|
|
2579
|
-
(t) => pathStartsWithOneOf(["_size"], t) && (isDigit(t.path[1]) || t.path[1] === "unit"),
|
|
2580
|
-
filteredTokens
|
|
2581
|
-
);
|
|
2582
|
-
const formattedSizingTokens = formatSizingTokens(format, sizingTokens);
|
|
2583
|
-
const formattedMap = restTokens.map((token) => ({
|
|
2584
|
-
token,
|
|
2585
|
-
formatted: format(token)
|
|
2586
|
-
}));
|
|
2587
|
-
const formattedSizingMap = formattedSizingTokens.round.map((t, i) => ({
|
|
2588
|
-
token: formattedSizingTokens.tokens[i],
|
|
2589
|
-
formatted: t
|
|
2590
|
-
}));
|
|
2591
|
-
buildOptions.buildTokenFormats[destination] = [...formattedMap, ...formattedSizingMap];
|
|
2592
|
-
const formattedTokens = [formattedMap.map(R11.prop("formatted")).join("\n"), sizingTemplate(formattedSizingTokens)];
|
|
2593
|
-
const content = `${selector} {
|
|
2594
|
-
${formattedTokens.join("\n")}
|
|
2595
|
-
}
|
|
2596
|
-
`;
|
|
2597
|
-
const body = R11.isNotNil(layer) ? `@layer ${layer} {
|
|
2598
|
-
${content}
|
|
2599
|
-
}
|
|
2600
|
-
` : `${content}
|
|
2601
|
-
`;
|
|
2602
|
-
return body;
|
|
2603
|
-
}
|
|
2604
|
-
};
|
|
2605
|
-
|
|
2606
|
-
// src/tokens/process/formats/css/semantic.ts
|
|
2607
|
-
var semantic = {
|
|
2608
|
-
name: "ds/css-semantic",
|
|
2609
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2610
|
-
const { outputReferences, usesDtcg } = options;
|
|
2611
|
-
const { selector, layer } = platform;
|
|
2612
|
-
const destination = file.destination;
|
|
2613
|
-
const format = createPropertyFormatter3({
|
|
2614
|
-
outputReferences,
|
|
2615
|
-
dictionary,
|
|
2616
|
-
format: "css",
|
|
2617
|
-
usesDtcg
|
|
2618
|
-
});
|
|
2619
|
-
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
2620
|
-
const formattedMap = tokens.map((token) => ({
|
|
2621
|
-
token,
|
|
2622
|
-
formatted: format(token)
|
|
2623
|
-
}));
|
|
2624
|
-
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
2625
|
-
const formattedTokens = formattedMap.map(R12.prop("formatted")).join("\n");
|
|
2626
|
-
const content = `${selector} {
|
|
2627
|
-
${formattedTokens}
|
|
2628
|
-
}
|
|
2629
|
-
`;
|
|
2630
|
-
const body = R12.isNotNil(layer) ? `@layer ${layer} {
|
|
2631
|
-
${content}
|
|
2632
|
-
}
|
|
2633
|
-
` : `${content}
|
|
2634
|
-
`;
|
|
2635
|
-
return body;
|
|
2636
|
-
}
|
|
2637
|
-
};
|
|
2638
|
-
|
|
2639
|
-
// src/tokens/process/formats/css/size-mode.ts
|
|
2640
|
-
import * as R14 from "ramda";
|
|
2641
|
-
import { createPropertyFormatter as createPropertyFormatter4 } from "style-dictionary/utils";
|
|
2642
|
-
|
|
2643
|
-
// src/tokens/process/transformers.ts
|
|
2644
|
-
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
2645
|
-
import * as R13 from "ramda";
|
|
2646
|
-
var isPx = R13.test(/\b\d+px\b/g);
|
|
2647
|
-
var sizeRem = {
|
|
2648
|
-
name: "ds/size/toRem",
|
|
2649
|
-
type: "value",
|
|
2650
|
-
transitive: true,
|
|
2651
|
-
filter: (token) => {
|
|
2652
|
-
const hasWantedType = typeEquals(["dimension", "fontsize"], token);
|
|
2653
|
-
const hasWantedPath = pathStartsWithOneOf([
|
|
2654
|
-
"border-radius",
|
|
2655
|
-
"font-size"
|
|
2656
|
-
/*, ['_size', 'mode-font-size']*/
|
|
2657
|
-
], token);
|
|
2658
|
-
return hasWantedType && hasWantedPath;
|
|
2659
|
-
},
|
|
2660
|
-
transform: (token, config) => {
|
|
2661
|
-
const value = getValue(token);
|
|
2662
|
-
if (isPx(value)) {
|
|
2663
|
-
const baseFont = config.basePxFontSize || 16;
|
|
2664
|
-
const size2 = parseInt(value, 10);
|
|
2665
|
-
if (size2 === 0) {
|
|
2666
|
-
return "0";
|
|
2667
|
-
}
|
|
2668
|
-
return `${size2 / baseFont}rem`;
|
|
2669
|
-
}
|
|
2670
|
-
return value;
|
|
2671
|
-
}
|
|
2672
|
-
};
|
|
2673
|
-
var typographyName = {
|
|
2674
|
-
name: "name/typography",
|
|
2675
|
-
type: "name",
|
|
2676
|
-
transitive: true,
|
|
2677
|
-
// expanded tokens have different type so we match on path instead
|
|
2678
|
-
filter: (token) => pathStartsWithOneOf(["typography"], token),
|
|
2679
|
-
transform: (token) => {
|
|
2680
|
-
return token.name.replace("-typography", "");
|
|
2681
|
-
}
|
|
2682
|
-
};
|
|
2683
|
-
var resolveMath = {
|
|
2684
|
-
name: "ds/resolveMath",
|
|
2685
|
-
type: "value",
|
|
2686
|
-
transitive: true,
|
|
2687
|
-
filter: (token) => {
|
|
2688
|
-
const isValidValue = ["string", "object"].includes(typeof getValue(token));
|
|
2689
|
-
const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
|
|
2690
|
-
return isValidValue && isTokenOfInterest;
|
|
2691
|
-
},
|
|
2692
|
-
transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
|
|
2693
|
-
};
|
|
2694
|
-
var unitless = {
|
|
2695
|
-
name: "ds/unitless",
|
|
2696
|
-
type: "value",
|
|
2697
|
-
transitive: true,
|
|
2698
|
-
filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
|
|
2699
|
-
transform: (token) => parseInt(getValue(token), 10)
|
|
2700
|
-
};
|
|
2701
|
-
|
|
2702
|
-
// src/tokens/process/configs/shared.ts
|
|
2703
|
-
var prefix = "ds";
|
|
2704
|
-
var basePxFontSize = 16;
|
|
2705
|
-
var dsTransformers = [
|
|
2706
|
-
"name/kebab",
|
|
2707
|
-
resolveMath.name,
|
|
2708
|
-
"ts/size/px",
|
|
2709
|
-
sizeRem.name,
|
|
2710
|
-
unitless.name,
|
|
2711
|
-
"ts/typography/fontWeight",
|
|
2712
|
-
typographyName.name,
|
|
2713
|
-
"ts/color/modifiers",
|
|
2714
|
-
"ts/color/css/hexrgba",
|
|
2715
|
-
"ts/size/lineheight",
|
|
2716
|
-
"shadow/css/shorthand"
|
|
2717
|
-
];
|
|
2718
|
-
|
|
2719
|
-
// src/tokens/process/formats/css/size-mode.ts
|
|
2720
|
-
var formatBaseSizeToken = (size2) => (token) => ({
|
|
2721
|
-
...token,
|
|
2722
|
-
originalName: token.name,
|
|
2723
|
-
name: `${token.name}--${shortSizeName(size2)}`,
|
|
2724
|
-
$value: token.$value / basePxFontSize
|
|
2725
|
-
});
|
|
2726
|
-
var sizeMode = {
|
|
2727
|
-
name: "ds/css-size-mode",
|
|
2728
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2729
|
-
const { outputReferences, usesDtcg } = options;
|
|
2730
|
-
const { selector, layer, size: size2 } = platform;
|
|
2731
|
-
const destination = file.destination;
|
|
2732
|
-
const format = createPropertyFormatter4({
|
|
2733
|
-
outputReferences,
|
|
2734
|
-
dictionary,
|
|
2735
|
-
format: "css",
|
|
2736
|
-
usesDtcg
|
|
2737
|
-
});
|
|
2738
|
-
const sizeSpecificTokens = dictionary.allTokens.map(formatBaseSizeToken(size2));
|
|
2739
|
-
const sizeSpecificVariables = sizeSpecificTokens.map(format).join("\n");
|
|
2740
|
-
const formattedMap = sizeSpecificTokens.map((token) => ({
|
|
2741
|
-
token,
|
|
2742
|
-
formatted: format({
|
|
2743
|
-
...token,
|
|
2744
|
-
// Remove the `--<size>` suffix for the token listing, since that is the only token we actually use
|
|
2745
|
-
name: token.originalName
|
|
2746
|
-
})
|
|
2747
|
-
}));
|
|
2748
|
-
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
2749
|
-
const content = `${selector} /* ${size2} */ {
|
|
2750
|
-
${sizeSpecificVariables}
|
|
2751
|
-
}`;
|
|
2752
|
-
const body = wrapInLayer(content, layer);
|
|
2753
|
-
const sizes = orderBySize(buildOptions?.sizeModes ?? []).map(shortSizeName);
|
|
2754
|
-
const defaultSize = shortSizeName(buildOptions?.defaultSize ?? "");
|
|
2755
|
-
const sizingToggles = `:root, [data-size] {
|
|
2756
|
-
--ds-size: var(--ds-size--${defaultSize});
|
|
2757
|
-
${sizes.map((size3) => ` --ds-size--${size3}: var(--ds-size,);`).join("\n")}
|
|
2758
|
-
--ds-size-mode-font-size:
|
|
2759
|
-
${sizes.map((size3) => ` var(--ds-size--${size3}, var(--ds-size-mode-font-size--${size3}))`).join("\n")};
|
|
2760
|
-
}`;
|
|
2761
|
-
const sizingHelpers = sizes.map((size3) => `[data-size='${size3}'] { --ds-size: var(--ds-size--${size3}); }`).join("\n");
|
|
2762
|
-
const sharedContent = `${sizingToggles}
|
|
2763
|
-
|
|
2764
|
-
${sizingHelpers}`;
|
|
2765
|
-
const sharedBody = shortSizeName(size2) === R14.last(sizes) ? `
|
|
2766
|
-
${wrapInLayer(sharedContent, layer)}` : "";
|
|
2767
|
-
return body + sharedBody;
|
|
2768
|
-
}
|
|
2769
|
-
};
|
|
2770
|
-
function wrapInLayer(content, layer) {
|
|
2771
|
-
return R14.isNotNil(layer) ? `@layer ${layer} {
|
|
2772
|
-
${content}
|
|
2773
|
-
}
|
|
2774
|
-
` : `${content}
|
|
2775
|
-
`;
|
|
2776
|
-
}
|
|
2777
|
-
|
|
2778
|
-
// src/tokens/process/formats/css/typography.ts
|
|
2779
|
-
import * as R15 from "ramda";
|
|
2780
|
-
import { createPropertyFormatter as createPropertyFormatter5 } from "style-dictionary/utils";
|
|
2781
|
-
var typographyFontFamilyPredicate = R15.allPass([
|
|
2782
|
-
R15.pathSatisfies(R15.includes("typography"), ["path"]),
|
|
2783
|
-
R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
|
|
2784
|
-
]);
|
|
2785
|
-
var typography = {
|
|
2786
|
-
name: "ds/css-typography",
|
|
2787
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2788
|
-
const { outputReferences, usesDtcg } = options;
|
|
2789
|
-
const { selector, layer } = platform;
|
|
2790
|
-
const destination = file.destination;
|
|
2791
|
-
const format = createPropertyFormatter5({
|
|
2792
|
-
outputReferences,
|
|
2793
|
-
dictionary,
|
|
2794
|
-
format: "css",
|
|
2795
|
-
usesDtcg
|
|
2796
|
-
});
|
|
2797
|
-
const filteredTokens = R15.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
2798
|
-
const formattedMap = filteredTokens.map((token) => ({
|
|
2799
|
-
token,
|
|
2800
|
-
formatted: format(token)
|
|
2801
|
-
}));
|
|
2802
|
-
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
2803
|
-
const formattedTokens = formattedMap.map(R15.view(R15.lensProp("formatted"))).join("\n");
|
|
2804
|
-
const content = selector ? `${selector} {
|
|
2805
|
-
${formattedTokens}
|
|
2806
|
-
}` : formattedTokens;
|
|
2807
|
-
const body = R15.isNotNil(layer) ? `@layer ${layer} {
|
|
2808
|
-
${content}
|
|
2809
|
-
}` : content;
|
|
2810
|
-
return body;
|
|
2811
|
-
}
|
|
2812
|
-
};
|
|
2813
|
-
|
|
2814
|
-
// src/tokens/process/formats/css/type-scale.ts
|
|
2815
|
-
import * as R16 from "ramda";
|
|
2816
|
-
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
2817
|
-
var isTypographyFontFamilyToken = R16.allPass([
|
|
2818
|
-
R16.pathSatisfies(R16.includes("typography"), ["path"]),
|
|
2819
|
-
R16.pathSatisfies(R16.includes("fontFamily"), ["path"])
|
|
2820
|
-
]);
|
|
2821
|
-
var formatTypographySizeToken = (format, token) => {
|
|
2822
|
-
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
2823
|
-
let calc;
|
|
2824
|
-
let round;
|
|
2825
|
-
if (R16.startsWith(["font-size"], token.path)) {
|
|
2826
|
-
calc = `calc(${value} * var(--_ds-font-size-factor))`;
|
|
2827
|
-
round = `round(${calc}, 1px)`;
|
|
2828
|
-
} else {
|
|
2829
|
-
calc = value;
|
|
2830
|
-
}
|
|
2831
|
-
return { name, calc, round: round ?? calc };
|
|
2832
|
-
};
|
|
2833
|
-
var formatTypographySizeTokens = (format, tokens) => R16.reduce(
|
|
2834
|
-
(acc, token) => {
|
|
2835
|
-
const { name, calc, round } = formatTypographySizeToken(format, token);
|
|
2836
|
-
acc.tokens.push(token);
|
|
2837
|
-
acc.calc.push(`${name}: ${calc};`);
|
|
2838
|
-
acc.round.push(`${name}: ${round};`);
|
|
2839
|
-
return acc;
|
|
2840
|
-
},
|
|
2841
|
-
{ tokens: [], calc: [], round: [] },
|
|
2842
|
-
tokens
|
|
2843
|
-
);
|
|
2844
|
-
var typeScale = {
|
|
2845
|
-
name: "ds/css-type-scale",
|
|
2846
|
-
format: async ({ dictionary, file, options, platform }) => {
|
|
2847
|
-
const { outputReferences, usesDtcg } = options;
|
|
2848
|
-
const { selector, layer } = platform;
|
|
2849
|
-
const destination = file.destination;
|
|
2850
|
-
const format = createPropertyFormatter6({
|
|
2851
|
-
outputReferences,
|
|
2852
|
-
dictionary,
|
|
2853
|
-
format: "css",
|
|
2854
|
-
usesDtcg
|
|
2855
|
-
});
|
|
2856
|
-
const filteredTokens = R16.reject(R16.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
|
|
2857
|
-
const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
|
|
2858
|
-
const formattedMap = formattedTokens.round.map((t, i) => ({
|
|
2859
|
-
token: formattedTokens.tokens[i],
|
|
2860
|
-
formatted: t
|
|
2861
|
-
}));
|
|
2862
|
-
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
2863
|
-
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
2864
|
-
const content = `${selector} {
|
|
2865
|
-
${sizeFactor}${sizingTemplate(formattedTokens)}
|
|
2866
|
-
}`;
|
|
2867
|
-
const body = R16.isNotNil(layer) ? `@layer ${layer} {
|
|
2868
|
-
${content}
|
|
2869
|
-
}` : content;
|
|
2870
|
-
return body;
|
|
2871
|
-
}
|
|
2872
|
-
};
|
|
2873
|
-
|
|
2874
|
-
// src/tokens/process/formats/css.ts
|
|
2875
|
-
var formats = {
|
|
2876
|
-
colorScheme,
|
|
2877
|
-
colorCategory,
|
|
2878
|
-
semantic,
|
|
2879
|
-
sizeMode,
|
|
2880
|
-
size,
|
|
2881
|
-
typography,
|
|
2882
|
-
typeScale
|
|
2883
|
-
};
|
|
2884
|
-
|
|
2885
|
-
// src/tokens/process/configs/color.ts
|
|
2886
|
-
var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
|
|
2887
|
-
const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
|
|
2888
|
-
const layer = `ds.theme.color-scheme.${colorScheme2}`;
|
|
2889
|
-
return {
|
|
2890
|
-
preprocessors: ["tokens-studio"],
|
|
2891
|
-
platforms: {
|
|
2892
|
-
css: {
|
|
2893
|
-
// custom
|
|
2894
|
-
colorScheme: colorScheme2,
|
|
2895
|
-
theme,
|
|
2896
|
-
selector,
|
|
2897
|
-
layer,
|
|
2898
|
-
//
|
|
2899
|
-
prefix,
|
|
2900
|
-
buildPath: `${theme}/`,
|
|
2901
|
-
transforms: dsTransformers,
|
|
2902
|
-
files: [
|
|
2903
|
-
{
|
|
2904
|
-
destination: `color-scheme/${colorScheme2}.css`,
|
|
2905
|
-
format: formats.colorScheme.name,
|
|
2906
|
-
filter: (token) => typeEquals("color", token) && !R17.startsWith(["global"], token.path)
|
|
2907
|
-
}
|
|
2908
|
-
],
|
|
2909
|
-
options: {
|
|
2910
|
-
outputReferences: false
|
|
2911
|
-
}
|
|
2912
|
-
}
|
|
2913
|
-
}
|
|
2914
|
-
};
|
|
2915
|
-
};
|
|
2916
|
-
var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
|
|
2917
|
-
const category = opts.category;
|
|
2918
|
-
const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
|
|
2919
|
-
if (!color) {
|
|
2920
|
-
throw new Error(
|
|
2921
|
-
category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
|
|
2922
|
-
);
|
|
2923
|
-
}
|
|
2924
|
-
const layer = `ds.theme.color`;
|
|
2925
|
-
const isRootColor = color === buildOptions?.defaultColor;
|
|
2926
|
-
const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
|
|
2927
|
-
const config = {
|
|
2928
|
-
preprocessors: ["tokens-studio"],
|
|
2929
|
-
platforms: {
|
|
2930
|
-
css: {
|
|
2931
|
-
// custom
|
|
2932
|
-
colorScheme: colorScheme2,
|
|
2933
|
-
theme,
|
|
2934
|
-
selector,
|
|
2935
|
-
layer,
|
|
2936
|
-
//
|
|
2937
|
-
prefix,
|
|
2938
|
-
buildPath: `${theme}/`,
|
|
2939
|
-
transforms: dsTransformers,
|
|
2940
|
-
files: [
|
|
2941
|
-
{
|
|
2942
|
-
destination: `color/${color}.css`,
|
|
2943
|
-
format: formats.colorCategory.name,
|
|
2944
|
-
filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
|
|
2945
|
-
}
|
|
2946
|
-
],
|
|
2947
|
-
options: {
|
|
2948
|
-
outputReferences: true
|
|
2949
|
-
}
|
|
2950
|
-
}
|
|
2951
|
-
}
|
|
2952
|
-
};
|
|
2953
|
-
return config;
|
|
2954
|
-
};
|
|
2955
|
-
|
|
2956
|
-
// src/tokens/process/configs/semantic.ts
|
|
2957
|
-
import * as R18 from "ramda";
|
|
2958
|
-
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
2959
|
-
var semanticVariables = ({ theme }) => {
|
|
2960
|
-
const selector = `:root`;
|
|
2961
|
-
const layer = `ds.theme.semantic`;
|
|
2962
|
-
return {
|
|
2963
|
-
preprocessors: ["tokens-studio"],
|
|
2964
|
-
platforms: {
|
|
2965
|
-
css: {
|
|
2966
|
-
// custom
|
|
2967
|
-
theme,
|
|
2968
|
-
basePxFontSize,
|
|
2969
|
-
selector,
|
|
2970
|
-
layer,
|
|
2971
|
-
//
|
|
2972
|
-
prefix,
|
|
2973
|
-
buildPath: `${theme}/`,
|
|
2974
|
-
transforms: dsTransformers,
|
|
2975
|
-
files: [
|
|
2976
|
-
{
|
|
2977
|
-
destination: `semantic.css`,
|
|
2978
|
-
format: formats.semantic.name,
|
|
2979
|
-
filter: (token) => {
|
|
2980
|
-
const isUwantedToken = R18.anyPass([R18.includes("primitives/global")])(token.filePath);
|
|
2981
|
-
const isPrivateToken = R18.includes("_", token.path);
|
|
2982
|
-
const unwantedPaths = pathStartsWithOneOf(
|
|
2983
|
-
["size", "_size", "font-size", "line-height", "letter-spacing"],
|
|
2984
|
-
token
|
|
2985
|
-
);
|
|
2986
|
-
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
2987
|
-
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
2988
|
-
return unwantedTokens;
|
|
2989
|
-
}
|
|
2990
|
-
}
|
|
2991
|
-
],
|
|
2992
|
-
options: {
|
|
2993
|
-
outputReferences: (token, options) => {
|
|
2994
|
-
const include = pathStartsWithOneOf(["border-radius"], token);
|
|
2995
|
-
return include && outputReferencesFilter(token, options);
|
|
2996
|
-
}
|
|
2997
|
-
}
|
|
2998
|
-
}
|
|
2999
|
-
}
|
|
3000
|
-
};
|
|
3001
|
-
};
|
|
3002
|
-
|
|
3003
|
-
// src/tokens/process/configs/size.ts
|
|
3004
|
-
import * as R19 from "ramda";
|
|
3005
|
-
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
3006
|
-
var sizeVariables = ({ theme }) => {
|
|
3007
|
-
const selector = `:root, [data-size]`;
|
|
3008
|
-
const layer = `ds.theme.size`;
|
|
3009
|
-
return {
|
|
3010
|
-
preprocessors: ["tokens-studio"],
|
|
3011
|
-
platforms: {
|
|
3012
|
-
css: {
|
|
3013
|
-
// custom
|
|
3014
|
-
theme,
|
|
3015
|
-
basePxFontSize,
|
|
3016
|
-
selector,
|
|
3017
|
-
layer,
|
|
3018
|
-
//
|
|
3019
|
-
prefix,
|
|
3020
|
-
buildPath: `${theme}/`,
|
|
3021
|
-
transforms: dsTransformers,
|
|
3022
|
-
files: [
|
|
3023
|
-
{
|
|
3024
|
-
destination: `size.css`,
|
|
3025
|
-
format: formats.size.name,
|
|
3026
|
-
filter: (token) => {
|
|
3027
|
-
const isUwantedToken = R19.anyPass([R19.includes("primitives/global")])(token.filePath);
|
|
3028
|
-
const isPrivateToken = R19.includes("_", token.path);
|
|
3029
|
-
return pathStartsWithOneOf(["size", "_size"], token) && !(isUwantedToken || isPrivateToken);
|
|
3030
|
-
}
|
|
3031
|
-
}
|
|
3032
|
-
],
|
|
3033
|
-
options: {
|
|
3034
|
-
outputReferences: (token, options) => {
|
|
3035
|
-
const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && (isDigit(token.path[1]) || token.path[1] === "unit");
|
|
3036
|
-
return isWantedSize && outputReferencesFilter2(token, options);
|
|
3037
|
-
}
|
|
3038
|
-
}
|
|
3039
|
-
}
|
|
3040
|
-
}
|
|
3041
|
-
};
|
|
3042
|
-
};
|
|
3043
|
-
|
|
3044
|
-
// src/tokens/process/configs/size-mode.ts
|
|
3045
|
-
import * as R20 from "ramda";
|
|
3046
|
-
var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
3047
|
-
const selector = `:root`;
|
|
3048
|
-
const layer = `ds.theme.size-mode`;
|
|
3049
|
-
return {
|
|
3050
|
-
preprocessors: ["tokens-studio"],
|
|
3051
|
-
platforms: {
|
|
3052
|
-
css: {
|
|
3053
|
-
// custom
|
|
3054
|
-
size: size2,
|
|
3055
|
-
theme,
|
|
3056
|
-
basePxFontSize,
|
|
3057
|
-
selector,
|
|
3058
|
-
layer,
|
|
3059
|
-
//
|
|
3060
|
-
prefix,
|
|
3061
|
-
buildPath: `${theme}/`,
|
|
3062
|
-
transforms: dsTransformers,
|
|
3063
|
-
files: [
|
|
3064
|
-
{
|
|
3065
|
-
destination: `size-mode/${size2}.css`,
|
|
3066
|
-
format: formats.sizeMode.name,
|
|
3067
|
-
filter: (token) => {
|
|
3068
|
-
return R20.equals(["_size", "mode-font-size"], token.path);
|
|
3069
|
-
}
|
|
3070
|
-
}
|
|
3071
|
-
]
|
|
3072
|
-
}
|
|
3073
|
-
}
|
|
3074
|
-
};
|
|
3075
|
-
};
|
|
3076
|
-
|
|
3077
|
-
// src/tokens/process/configs/type-scale.ts
|
|
3078
|
-
var typeScaleVariables = ({ theme }) => {
|
|
3079
|
-
const selector = ":root, [data-size]";
|
|
3080
|
-
const layer = `ds.theme.type-scale`;
|
|
3081
|
-
return {
|
|
3082
|
-
usesDtcg: true,
|
|
3083
|
-
preprocessors: ["tokens-studio"],
|
|
3084
|
-
expand: {
|
|
3085
|
-
include: ["typography"]
|
|
3086
|
-
},
|
|
3087
|
-
platforms: {
|
|
3088
|
-
css: {
|
|
3089
|
-
prefix,
|
|
3090
|
-
selector,
|
|
3091
|
-
layer,
|
|
3092
|
-
buildPath: `${theme}/`,
|
|
3093
|
-
basePxFontSize,
|
|
3094
|
-
transforms: [
|
|
3095
|
-
"name/kebab",
|
|
3096
|
-
"ts/size/px",
|
|
3097
|
-
sizeRem.name,
|
|
3098
|
-
"ts/size/lineheight",
|
|
3099
|
-
"ts/typography/fontWeight",
|
|
3100
|
-
typographyName.name
|
|
3101
|
-
],
|
|
3102
|
-
files: [
|
|
3103
|
-
{
|
|
3104
|
-
destination: `type-scale.css`,
|
|
3105
|
-
format: formats.typeScale.name,
|
|
3106
|
-
filter: (token) => {
|
|
3107
|
-
const included = typeEquals(["typography", "dimension", "fontsize"], token);
|
|
3108
|
-
if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
|
|
3109
|
-
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "border-width", "border-radius"], token) && (pathStartsWithOneOf(["font-size"], token) || token.path.includes("fontSize"));
|
|
3110
|
-
}
|
|
3111
|
-
}
|
|
3112
|
-
],
|
|
3113
|
-
options: {
|
|
3114
|
-
outputReferences: (token) => pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize")
|
|
3115
|
-
}
|
|
3116
|
-
}
|
|
3117
|
-
}
|
|
3118
|
-
};
|
|
3119
|
-
};
|
|
3120
|
-
|
|
3121
|
-
// src/tokens/process/configs/typography.ts
|
|
3122
|
-
import { expandTypesMap } from "@tokens-studio/sd-transforms";
|
|
3123
|
-
var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
3124
|
-
const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
|
|
3125
|
-
const layer = `ds.theme.typography.${typography2}`;
|
|
3126
|
-
return {
|
|
3127
|
-
usesDtcg: true,
|
|
3128
|
-
preprocessors: ["tokens-studio"],
|
|
3129
|
-
expand: {
|
|
3130
|
-
include: ["typography"],
|
|
3131
|
-
typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
|
|
3132
|
-
},
|
|
3133
|
-
platforms: {
|
|
3134
|
-
css: {
|
|
3135
|
-
prefix,
|
|
3136
|
-
typography: typography2,
|
|
3137
|
-
selector,
|
|
3138
|
-
layer,
|
|
3139
|
-
buildPath: `${theme}/`,
|
|
3140
|
-
basePxFontSize,
|
|
3141
|
-
transforms: [
|
|
3142
|
-
"name/kebab",
|
|
3143
|
-
"ts/size/px",
|
|
3144
|
-
sizeRem.name,
|
|
3145
|
-
"ts/size/lineheight",
|
|
3146
|
-
"ts/typography/fontWeight",
|
|
3147
|
-
"ts/size/css/letterspacing",
|
|
3148
|
-
typographyName.name
|
|
3149
|
-
],
|
|
3150
|
-
files: [
|
|
3151
|
-
{
|
|
3152
|
-
destination: `typography/${typography2}.css`,
|
|
3153
|
-
format: formats.typography.name,
|
|
3154
|
-
filter: (token) => {
|
|
3155
|
-
const included = typeEquals(["fontweight", "fontFamily", "lineHeight", "dimension"], token);
|
|
3156
|
-
if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
|
|
3157
|
-
return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token) && !(pathStartsWithOneOf(["typography"], token) && token.path.includes("fontSize"));
|
|
3158
|
-
}
|
|
3159
|
-
}
|
|
3160
|
-
]
|
|
3161
|
-
}
|
|
3162
|
-
}
|
|
3163
|
-
};
|
|
3164
|
-
};
|
|
3165
|
-
|
|
3166
|
-
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3167
|
-
import pc3 from "picocolors";
|
|
3168
|
-
import * as R21 from "ramda";
|
|
3169
|
-
|
|
3170
|
-
// src/tokens/process/utils/kebab-case.ts
|
|
3171
|
-
function kebabCase(str) {
|
|
3172
|
-
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
3173
|
-
}
|
|
3174
|
-
|
|
3175
|
-
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3176
|
-
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3177
|
-
const verboseLogging = buildOptions?.verbose;
|
|
3178
|
-
const grouped$themes = groupThemes(processed$themes);
|
|
3179
|
-
const permutations = permutateThemes(grouped$themes);
|
|
3180
|
-
const ALL_DEPENDENT_ON = ["theme"];
|
|
3181
|
-
const keys3 = R21.keys(grouped$themes);
|
|
3182
|
-
const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
3183
|
-
if (verboseLogging) {
|
|
3184
|
-
console.log(pc3.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
3185
|
-
console.log(pc3.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
3186
|
-
}
|
|
3187
|
-
return permutations.filter((val) => {
|
|
3188
|
-
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
3189
|
-
return filters.every((x) => x);
|
|
3190
|
-
});
|
|
3191
|
-
};
|
|
3192
|
-
var processed = /* @__PURE__ */ Symbol("Type brand for ProcessedThemeObject");
|
|
3193
|
-
function isProcessed(theme) {
|
|
3194
|
-
return Boolean(theme[processed]);
|
|
3195
|
-
}
|
|
3196
|
-
function processThemeObject(theme) {
|
|
3197
|
-
if (isProcessed(theme)) {
|
|
3198
|
-
return theme;
|
|
3199
|
-
}
|
|
3200
|
-
const result = { ...theme, [processed]: true };
|
|
3201
|
-
if (result.group) {
|
|
3202
|
-
result.group = kebabCase(result.group);
|
|
3203
|
-
}
|
|
3204
|
-
result.name = kebabCase(result.name);
|
|
3205
|
-
return result;
|
|
3206
|
-
}
|
|
3207
|
-
function groupThemes(themes) {
|
|
3208
|
-
const groups = {};
|
|
3209
|
-
for (const theme of themes) {
|
|
3210
|
-
if (theme.group) {
|
|
3211
|
-
const groupKey = theme.group;
|
|
3212
|
-
groups[groupKey] = [...groups[groupKey] ?? [], theme];
|
|
3213
|
-
} else {
|
|
3214
|
-
throw new Error(
|
|
3215
|
-
`Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
|
|
3216
|
-
);
|
|
3217
|
-
}
|
|
3218
|
-
}
|
|
3219
|
-
return groups;
|
|
3220
|
-
}
|
|
3221
|
-
var hasUnknownProps = R21.pipe(R21.values, R21.none(R21.equals("unknown")), R21.not);
|
|
3222
|
-
function permutateThemes(groups) {
|
|
3223
|
-
const separator = "_";
|
|
3224
|
-
const permutations = cartesian(Object.values(groups));
|
|
3225
|
-
const permutatedThemes = permutations.map((perm) => {
|
|
3226
|
-
const permutatedTheme = perm.reduce(
|
|
3227
|
-
(acc, theme) => {
|
|
3228
|
-
const { group, name, selectedTokenSets } = theme;
|
|
3229
|
-
let updatedPermutation = acc.permutation;
|
|
3230
|
-
if (group) {
|
|
3231
|
-
const groupProp = R21.lensProp(group);
|
|
3232
|
-
updatedPermutation = R21.set(groupProp, name, updatedPermutation);
|
|
3233
|
-
}
|
|
3234
|
-
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
3235
|
-
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
|
3236
|
-
return {
|
|
3237
|
-
permutation: updatedPermutation,
|
|
3238
|
-
name: updatedName,
|
|
3239
|
-
selectedTokenSets: sets
|
|
3240
|
-
};
|
|
3241
|
-
},
|
|
3242
|
-
{
|
|
3243
|
-
name: "",
|
|
3244
|
-
selectedTokenSets: [],
|
|
3245
|
-
permutation: {
|
|
3246
|
-
"color-scheme": "unknown",
|
|
3247
|
-
"main-color": "unknown",
|
|
3248
|
-
"support-color": "unknown",
|
|
3249
|
-
theme: "unknown",
|
|
3250
|
-
semantic: "unknown",
|
|
3251
|
-
size: "unknown",
|
|
3252
|
-
typography: "unknown"
|
|
3253
|
-
}
|
|
3254
|
-
}
|
|
3255
|
-
);
|
|
3256
|
-
if (hasUnknownProps(permutatedTheme)) {
|
|
3257
|
-
throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
|
|
3258
|
-
}
|
|
3259
|
-
const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
|
|
3260
|
-
return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
|
|
3261
|
-
});
|
|
3262
|
-
return permutatedThemes;
|
|
3263
|
-
}
|
|
3264
|
-
function filterTokenSets(tokensets) {
|
|
3265
|
-
return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
|
|
3266
|
-
if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
|
|
3267
|
-
return -1;
|
|
3268
|
-
}
|
|
3269
|
-
if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
|
|
3270
|
-
return 1;
|
|
3271
|
-
}
|
|
3272
|
-
return 0;
|
|
3273
|
-
}).map((entry) => entry[0]);
|
|
3274
|
-
}
|
|
3275
|
-
function cartesian(a) {
|
|
3276
|
-
return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
|
|
3277
|
-
}
|
|
3278
|
-
var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
|
|
3279
|
-
if (!x.group) {
|
|
3280
|
-
return false;
|
|
3281
|
-
}
|
|
3282
|
-
return colorGroups.includes(x.group);
|
|
3283
|
-
}).map((x) => x.name);
|
|
3284
|
-
|
|
3285
|
-
// src/tokens/process/configs.ts
|
|
3286
|
-
void register(StyleDictionary, { withSDBuiltins: false });
|
|
3287
|
-
StyleDictionary.registerTransform(sizeRem);
|
|
3288
|
-
StyleDictionary.registerTransform(typographyName);
|
|
3289
|
-
StyleDictionary.registerTransform(resolveMath);
|
|
3290
|
-
StyleDictionary.registerTransform(unitless);
|
|
3291
|
-
for (const format of Object.values(formats)) {
|
|
3292
|
-
StyleDictionary.registerFormat(format);
|
|
3293
|
-
}
|
|
3294
|
-
var configs = {
|
|
3295
|
-
colorSchemeVariables,
|
|
3296
|
-
mainColorVariables: colorCategoryVariables({ category: "main" }),
|
|
3297
|
-
supportColorVariables: colorCategoryVariables({ category: "support" }),
|
|
3298
|
-
neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
|
|
3299
|
-
successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
|
|
3300
|
-
dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
|
|
3301
|
-
warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
|
|
3302
|
-
infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
|
|
3303
|
-
sizeModeVariables,
|
|
3304
|
-
sizeVariables,
|
|
3305
|
-
typographyVariables,
|
|
3306
|
-
typeScaleVariables,
|
|
3307
|
-
semanticVariables
|
|
3308
|
-
};
|
|
3309
|
-
var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
|
|
3310
|
-
const { tokensDir, tokenSets } = options;
|
|
3311
|
-
const permutations = getMultidimensionalThemes(processed$themes, dimensions);
|
|
3312
|
-
return permutations.flatMap(({ selectedTokenSets, permutation }) => {
|
|
3313
|
-
const tokenSource = { source: void 0, tokens: {} };
|
|
3314
|
-
if (tokenSets) {
|
|
3315
|
-
for (const tokenSet of selectedTokenSets) {
|
|
3316
|
-
const tokens = tokenSets.get(tokenSet);
|
|
3317
|
-
if (tokens) {
|
|
3318
|
-
const tokensWithFilePath = traverseObj(tokens, (obj) => {
|
|
3319
|
-
if (Object.hasOwn(obj, `$value`) && !obj.filePath) {
|
|
3320
|
-
obj.filePath = tokenSet;
|
|
3321
|
-
}
|
|
3322
|
-
});
|
|
3323
|
-
tokenSource.tokens = R22.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
3324
|
-
}
|
|
3325
|
-
}
|
|
3326
|
-
} else {
|
|
3327
|
-
tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
|
|
3328
|
-
}
|
|
3329
|
-
const configOrConfigs = getConfig(permutation);
|
|
3330
|
-
const configs_ = Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }];
|
|
3331
|
-
const configs2 = configs_.map(({ config, permutationOverrides }) => {
|
|
3332
|
-
return {
|
|
3333
|
-
permutation: { ...permutation, ...permutationOverrides },
|
|
3334
|
-
config: {
|
|
3335
|
-
...config,
|
|
3336
|
-
/** Use official W3C design token format
|
|
3337
|
-
@see https://v4.styledictionary.com/info/dtcg/
|
|
3338
|
-
@see https://design-tokens.github.io/community-group/format/ */
|
|
3339
|
-
usesDtcg: true,
|
|
3340
|
-
log: {
|
|
3341
|
-
...config?.log,
|
|
3342
|
-
verbosity: buildOptions?.verbose ? "verbose" : "silent"
|
|
3343
|
-
},
|
|
3344
|
-
...tokenSource
|
|
3345
|
-
}
|
|
3346
|
-
};
|
|
3347
|
-
});
|
|
3348
|
-
return configs2;
|
|
3349
|
-
}).sort();
|
|
3350
|
-
};
|
|
3351
|
-
|
|
3352
|
-
// src/tokens/process/platform.ts
|
|
3353
|
-
var initResult = {
|
|
3354
|
-
formatted: [],
|
|
3355
|
-
tokens: [],
|
|
3356
|
-
permutation: {
|
|
3357
|
-
"color-scheme": "",
|
|
3358
|
-
"main-color": "",
|
|
3359
|
-
"support-color": "",
|
|
3360
|
-
semantic: "",
|
|
3361
|
-
size: "",
|
|
3362
|
-
theme: "",
|
|
3363
|
-
typography: ""
|
|
3364
|
-
}
|
|
3365
|
-
};
|
|
3366
|
-
var buildOptions = {
|
|
3367
|
-
verbose: false,
|
|
3368
|
-
processed$themes: [],
|
|
3369
|
-
buildTokenFormats: {}
|
|
3370
|
-
};
|
|
3371
|
-
var sd = new StyleDictionary2();
|
|
3372
|
-
var buildConfigs = {
|
|
3373
|
-
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
3374
|
-
sizeMode: { getConfig: configs.sizeModeVariables, dimensions: ["size"] },
|
|
3375
|
-
size: { getConfig: configs.sizeVariables, dimensions: ["semantic"] },
|
|
3376
|
-
typeScale: { getConfig: configs.typeScaleVariables, dimensions: ["semantic"] },
|
|
3377
|
-
"color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
|
|
3378
|
-
"main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
|
|
3379
|
-
"support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
|
|
3380
|
-
"neutral-color": {
|
|
3381
|
-
getConfig: configs.neutralColorVariables,
|
|
3382
|
-
dimensions: ["semantic"],
|
|
3383
|
-
log: ({ permutation: { theme } }) => `${theme} - neutral`
|
|
3384
|
-
},
|
|
3385
|
-
"success-color": {
|
|
3386
|
-
getConfig: configs.successColorVariables,
|
|
3387
|
-
dimensions: ["semantic"],
|
|
3388
|
-
log: ({ permutation: { theme } }) => `${theme} - success`
|
|
3389
|
-
},
|
|
3390
|
-
"danger-color": {
|
|
3391
|
-
getConfig: configs.dangerColorVariables,
|
|
3392
|
-
dimensions: ["semantic"],
|
|
3393
|
-
log: ({ permutation: { theme } }) => `${theme} - danger`
|
|
3394
|
-
},
|
|
3395
|
-
"warning-color": {
|
|
3396
|
-
getConfig: configs.warningColorVariables,
|
|
3397
|
-
dimensions: ["semantic"],
|
|
3398
|
-
log: ({ permutation: { theme } }) => `${theme} - warning`
|
|
3399
|
-
},
|
|
3400
|
-
"info-color": {
|
|
3401
|
-
getConfig: configs.infoColorVariables,
|
|
3402
|
-
dimensions: ["semantic"],
|
|
3403
|
-
log: ({ permutation: { theme } }) => `${theme} - info`
|
|
3404
|
-
},
|
|
3405
|
-
semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
|
|
3406
|
-
};
|
|
3407
|
-
async function processPlatform(options) {
|
|
3408
|
-
const { type, processed$themes } = options;
|
|
3409
|
-
const platform = "css";
|
|
3410
|
-
const tokenSets = type === "format" ? options.tokenSets : void 0;
|
|
3411
|
-
const tokensDir = type === "build" ? options.tokensDir : void 0;
|
|
3412
|
-
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
3413
|
-
if (UNSAFE_DEFAULT_COLOR) {
|
|
3414
|
-
console.warn(
|
|
3415
|
-
pc4.yellow(
|
|
3416
|
-
`
|
|
3417
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${pc4.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
3418
|
-
)
|
|
3419
|
-
);
|
|
3420
|
-
}
|
|
3421
|
-
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
3422
|
-
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
3423
|
-
console.warn(
|
|
3424
|
-
pc4.yellow(
|
|
3425
|
-
`
|
|
3426
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${pc4.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
3427
|
-
)
|
|
3428
|
-
);
|
|
3429
|
-
}
|
|
3430
|
-
const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
|
|
3431
|
-
buildOptions = options;
|
|
3432
|
-
buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
|
|
3433
|
-
buildOptions.colorGroups = colorGroups;
|
|
3434
|
-
if (!buildOptions.defaultColor) {
|
|
3435
|
-
const customColors = getCustomColors(processed$themes, colorGroups);
|
|
3436
|
-
const firstMainColor = R23.head(customColors);
|
|
3437
|
-
buildOptions.defaultColor = firstMainColor;
|
|
3438
|
-
}
|
|
3439
|
-
if (buildOptions.defaultColor) {
|
|
3440
|
-
console.log(`
|
|
3441
|
-
\u{1F3A8} Using ${pc4.blue(buildOptions.defaultColor)} as default color`);
|
|
3442
|
-
}
|
|
3443
|
-
const sizeModes2 = processed$themes.filter((x) => x.group === "size").map((x) => x.name);
|
|
3444
|
-
buildOptions.sizeModes = sizeModes2;
|
|
3445
|
-
if (!buildOptions.defaultSize) {
|
|
3446
|
-
const defaultSize = R23.head(sizeModes2);
|
|
3447
|
-
buildOptions.defaultSize = defaultSize;
|
|
3448
|
-
}
|
|
3449
|
-
if (buildOptions.defaultSize) {
|
|
3450
|
-
console.log(`
|
|
3451
|
-
\u{1F4CF} Using ${pc4.blue(buildOptions.defaultSize)} as default size`);
|
|
3452
|
-
}
|
|
3453
|
-
const buildAndSdConfigs = R23.map((buildConfig) => {
|
|
3454
|
-
const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
|
|
3455
|
-
tokensDir,
|
|
3456
|
-
tokenSets
|
|
3457
|
-
});
|
|
3458
|
-
const unknownConfigs = buildConfig.dimensions.map(
|
|
3459
|
-
(dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
|
|
3460
|
-
);
|
|
3461
|
-
for (const unknowns of unknownConfigs) {
|
|
3462
|
-
if (unknowns.length === sdConfigs.length) {
|
|
3463
|
-
buildConfig.enabled = () => false;
|
|
3464
|
-
}
|
|
3465
|
-
}
|
|
3466
|
-
return {
|
|
3467
|
-
buildConfig,
|
|
3468
|
-
sdConfigs
|
|
3469
|
-
};
|
|
3470
|
-
}, buildConfigs);
|
|
3471
|
-
const processedBuilds = {
|
|
3472
|
-
"color-scheme": [initResult],
|
|
3473
|
-
"main-color": [initResult],
|
|
3474
|
-
"support-color": [initResult],
|
|
3475
|
-
"neutral-color": [initResult],
|
|
3476
|
-
"success-color": [initResult],
|
|
3477
|
-
"danger-color": [initResult],
|
|
3478
|
-
"warning-color": [initResult],
|
|
3479
|
-
"info-color": [initResult],
|
|
3480
|
-
semantic: [initResult],
|
|
3481
|
-
typography: [initResult],
|
|
3482
|
-
sizeMode: [initResult],
|
|
3483
|
-
size: [initResult],
|
|
3484
|
-
typeScale: [initResult]
|
|
3485
|
-
};
|
|
3486
|
-
try {
|
|
3487
|
-
for (const [buildName, { buildConfig, sdConfigs }] of R23.toPairs(buildAndSdConfigs)) {
|
|
3488
|
-
if (!(buildConfig.enabled?.() ?? true)) {
|
|
3489
|
-
continue;
|
|
3490
|
-
}
|
|
3491
|
-
if (sdConfigs.length > 0) {
|
|
3492
|
-
console.log(`
|
|
3493
|
-
\u{1F371} Building ${pc4.green(buildConfig.name ?? buildName)}`);
|
|
3494
|
-
const results = await Promise.all(
|
|
3495
|
-
sdConfigs.map(async (sdConfig) => {
|
|
3496
|
-
const { config, permutation } = sdConfig;
|
|
3497
|
-
const modes = ["theme", ...buildConfig.dimensions];
|
|
3498
|
-
const modeMessage = modes.map((x) => permutation[x]).join(" - ");
|
|
3499
|
-
const logMessage = R23.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
|
|
3500
|
-
console.log(logMessage);
|
|
3501
|
-
const sdOptions = { cache: true };
|
|
3502
|
-
const sdExtended = await sd.extend(config);
|
|
3503
|
-
const formatted = await sdExtended.formatPlatform(platform, sdOptions);
|
|
3504
|
-
const tokens = (await sdExtended.getPlatformTokens(platform, sdOptions)).allTokens;
|
|
3505
|
-
const result = {
|
|
3506
|
-
permutation,
|
|
3507
|
-
formatted,
|
|
3508
|
-
tokens
|
|
3509
|
-
};
|
|
3510
|
-
return Promise.resolve(result);
|
|
3511
|
-
})
|
|
3512
|
-
);
|
|
3513
|
-
processedBuilds[buildName] = results;
|
|
3514
|
-
}
|
|
3515
|
-
}
|
|
3516
|
-
} catch (err) {
|
|
3517
|
-
if (err instanceof Error) {
|
|
3518
|
-
err.message = err.message.replace('log.verbosity "verbose" or use ', "");
|
|
3519
|
-
}
|
|
3520
|
-
throw err;
|
|
3521
|
-
}
|
|
3522
|
-
return processedBuilds;
|
|
3523
|
-
}
|
|
3524
|
-
|
|
3525
|
-
// src/tokens/format.ts
|
|
3526
|
-
var formatTokens = async (options) => {
|
|
3527
|
-
const processedBuilds = await processPlatform({
|
|
3528
|
-
type: "format",
|
|
3529
|
-
buildTokenFormats: {},
|
|
3530
|
-
...options
|
|
3531
|
-
});
|
|
3532
|
-
return processedBuilds;
|
|
3533
|
-
};
|
|
3534
|
-
var formatTheme = async (themeConfig) => {
|
|
3535
|
-
const { tokenSets } = await createTokens(themeConfig);
|
|
3536
|
-
const sizeModes2 = ["small", "medium", "large"];
|
|
3537
|
-
const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors, sizeModes2);
|
|
3538
|
-
const processed$themes = $themes.map(processThemeObject);
|
|
3539
|
-
const processedBuilds = await formatTokens({
|
|
3540
|
-
tokenSets,
|
|
3541
|
-
processed$themes,
|
|
3542
|
-
verbose: false
|
|
3543
|
-
});
|
|
3544
|
-
return processedBuilds;
|
|
3545
|
-
};
|
|
3546
|
-
var formatThemeCSS = async (themeConfig) => {
|
|
3547
|
-
const processedBuilds = await formatTheme(themeConfig);
|
|
3548
|
-
const themeCSSFiles = createThemeCSSFiles({ processedBuilds });
|
|
3549
|
-
return R24.head(themeCSSFiles)?.output ?? "";
|
|
3550
|
-
};
|
|
3551
|
-
export {
|
|
3552
|
-
HSLToHex,
|
|
3553
|
-
RESERVED_COLORS,
|
|
3554
|
-
areColorsContrasting,
|
|
3555
|
-
baseColorNames,
|
|
3556
|
-
baseColors,
|
|
3557
|
-
canTextBeUsedOnColors,
|
|
3558
|
-
cliOptions,
|
|
3559
|
-
colorMetadata,
|
|
3560
|
-
colorNames,
|
|
3561
|
-
configFileCreateSchema as configSchema,
|
|
3562
|
-
convertColor,
|
|
3563
|
-
convertToHex,
|
|
3564
|
-
createTokens,
|
|
3565
|
-
dsLinkColor,
|
|
3566
|
-
formatThemeCSS,
|
|
3567
|
-
formatTokens,
|
|
3568
|
-
generateColorContrast,
|
|
3569
|
-
generateColorScale,
|
|
3570
|
-
generateColorSchemes,
|
|
3571
|
-
getColorMetadataByNumber,
|
|
3572
|
-
getContrastFromHex,
|
|
3573
|
-
getContrastFromLightness,
|
|
3574
|
-
getCssVariable,
|
|
3575
|
-
getLightnessFromHex,
|
|
3576
|
-
getLuminanceFromColor,
|
|
3577
|
-
getLuminanceFromLightness,
|
|
3578
|
-
hexToCssHsl,
|
|
3579
|
-
hexToHSL,
|
|
3580
|
-
hexToHsluv,
|
|
3581
|
-
hexToRgb,
|
|
3582
|
-
hslArrToCss,
|
|
3583
|
-
isHexColor,
|
|
3584
|
-
rgbToHex,
|
|
3585
|
-
semanticColorMap,
|
|
3586
|
-
semanticColorNames,
|
|
3587
|
-
semanticColorNumbers
|
|
3588
|
-
};
|
|
1
|
+
import { baseColorNames, baseColors, colorMetadata, colorNames, dsLinkColor, getColorMetadataByNumber } from "./colors/colorMetadata.js";
|
|
2
|
+
import { HSLToHex, areColorsContrasting, canTextBeUsedOnColors, convertColor, convertToHex, getContrastFromHex, getContrastFromLightness, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex } from "./colors/utils.js";
|
|
3
|
+
import { RESERVED_COLORS, generateColorContrast, generateColorScale, generateColorSchemes, getCssVariable } from "./colors/theme.js";
|
|
4
|
+
import { semanticColorMap, semanticColorNames, semanticColorNumbers } from "./colors/types.js";
|
|
5
|
+
import "./colors/index.js";
|
|
6
|
+
import { cliOptions, createTokens } from "./tokens/create.js";
|
|
7
|
+
import { configFileCreateSchema } from "./config.js";
|
|
8
|
+
import { formatThemeCSS, formatTokens } from "./tokens/format.js";
|
|
9
|
+
import "./tokens/index.js";
|
|
10
|
+
export { HSLToHex, RESERVED_COLORS, areColorsContrasting, baseColorNames, baseColors, canTextBeUsedOnColors, cliOptions, colorMetadata, colorNames, configFileCreateSchema as configSchema, convertColor, convertToHex, createTokens, dsLinkColor, formatThemeCSS, formatTokens, generateColorContrast, generateColorScale, generateColorSchemes, getColorMetadataByNumber, getContrastFromHex, getContrastFromLightness, getCssVariable, getLightnessFromHex, getLuminanceFromColor, getLuminanceFromLightness, hexToCssHsl, hexToHSL, hexToHsluv, hexToRgb, hslArrToCss, isHexColor, rgbToHex, semanticColorMap, semanticColorNames, semanticColorNumbers };
|