@digdir/designsystemet 1.0.8 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bin/config.js +20 -19
- package/dist/bin/designsystemet.js +421 -359
- package/dist/src/colors/index.d.ts +2 -2
- package/dist/src/colors/index.d.ts.map +1 -1
- package/dist/src/colors/index.js +143 -143
- package/dist/src/colors/theme.d.ts +1 -2
- package/dist/src/colors/theme.d.ts.map +1 -1
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +20 -19
- package/dist/src/index.js +394 -394
- package/dist/src/scripts/createJsonSchema.js +19 -19
- package/dist/src/scripts/update-template.d.ts.map +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +89 -28
- package/dist/src/tokens/create/generators/$designsystemet.js +12 -13
- package/dist/src/tokens/create/generators/color.js +21 -21
- package/dist/src/tokens/create/write.js +13 -14
- package/dist/src/tokens/create.d.ts +1 -0
- package/dist/src/tokens/create.d.ts.map +1 -1
- package/dist/src/tokens/create.js +22 -21
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +883 -884
- package/dist/src/tokens/index.d.ts +2 -2
- package/dist/src/tokens/index.d.ts.map +1 -1
- package/dist/src/tokens/index.js +271 -271
- package/dist/src/tokens/process/configs/color.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/color.js +5 -5
- package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/semantic.js +5 -5
- package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/storefront.js +1 -1
- package/dist/src/tokens/process/configs/typography.d.ts.map +1 -1
- package/dist/src/tokens/process/configs/typography.js +5 -5
- package/dist/src/tokens/process/configs.d.ts.map +1 -1
- package/dist/src/tokens/process/configs.js +5 -5
- package/dist/src/tokens/process/formats/css/color.js +2 -2
- package/dist/src/tokens/process/formats/css/semantic.js +2 -2
- package/dist/src/tokens/process/formats/css/typography.js +1 -1
- package/dist/src/tokens/process/formats/css.js +5 -5
- package/dist/src/tokens/process/formats/js-tokens.js +1 -1
- package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
- package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
- package/dist/src/tokens/process/output/tailwind.js +59 -0
- package/dist/src/tokens/process/{theme.d.ts → output/theme.d.ts} +2 -2
- package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
- package/dist/src/tokens/process/{theme.js → output/theme.js} +15 -16
- package/dist/src/tokens/process/platform.d.ts +3 -1
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +5 -5
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +5 -5
- package/dist/src/tokens/types.d.ts +1 -1
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/package.json +12 -13
- package/dist/src/tokens/process/theme.d.ts.map +0 -1
|
@@ -1,6 +1,337 @@
|
|
|
1
1
|
// src/tokens/format.ts
|
|
2
2
|
import * as R20 from "ramda";
|
|
3
3
|
|
|
4
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
5
|
+
var BoxShadowTypes;
|
|
6
|
+
(function(BoxShadowTypes2) {
|
|
7
|
+
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
8
|
+
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
9
|
+
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
10
|
+
|
|
11
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
12
|
+
var ColorModifierTypes;
|
|
13
|
+
(function(ColorModifierTypes2) {
|
|
14
|
+
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
15
|
+
ColorModifierTypes2["DARKEN"] = "darken";
|
|
16
|
+
ColorModifierTypes2["MIX"] = "mix";
|
|
17
|
+
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
18
|
+
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
19
|
+
|
|
20
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
21
|
+
var ColorSpaceTypes;
|
|
22
|
+
(function(ColorSpaceTypes2) {
|
|
23
|
+
ColorSpaceTypes2["LCH"] = "lch";
|
|
24
|
+
ColorSpaceTypes2["SRGB"] = "srgb";
|
|
25
|
+
ColorSpaceTypes2["P3"] = "p3";
|
|
26
|
+
ColorSpaceTypes2["HSL"] = "hsl";
|
|
27
|
+
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
28
|
+
|
|
29
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
30
|
+
var Properties;
|
|
31
|
+
(function(Properties2) {
|
|
32
|
+
Properties2["sizing"] = "sizing";
|
|
33
|
+
Properties2["height"] = "height";
|
|
34
|
+
Properties2["width"] = "width";
|
|
35
|
+
Properties2["spacing"] = "spacing";
|
|
36
|
+
Properties2["verticalPadding"] = "verticalPadding";
|
|
37
|
+
Properties2["horizontalPadding"] = "horizontalPadding";
|
|
38
|
+
Properties2["paddingTop"] = "paddingTop";
|
|
39
|
+
Properties2["paddingRight"] = "paddingRight";
|
|
40
|
+
Properties2["paddingBottom"] = "paddingBottom";
|
|
41
|
+
Properties2["paddingLeft"] = "paddingLeft";
|
|
42
|
+
Properties2["itemSpacing"] = "itemSpacing";
|
|
43
|
+
Properties2["fill"] = "fill";
|
|
44
|
+
Properties2["backgroundBlur"] = "backgroundBlur";
|
|
45
|
+
Properties2["border"] = "border";
|
|
46
|
+
Properties2["borderTop"] = "borderTop";
|
|
47
|
+
Properties2["borderRight"] = "borderRight";
|
|
48
|
+
Properties2["borderBottom"] = "borderBottom";
|
|
49
|
+
Properties2["borderLeft"] = "borderLeft";
|
|
50
|
+
Properties2["borderColor"] = "borderColor";
|
|
51
|
+
Properties2["borderRadius"] = "borderRadius";
|
|
52
|
+
Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
|
|
53
|
+
Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
|
|
54
|
+
Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
|
|
55
|
+
Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
|
|
56
|
+
Properties2["borderWidth"] = "borderWidth";
|
|
57
|
+
Properties2["borderWidthTop"] = "borderWidthTop";
|
|
58
|
+
Properties2["borderWidthRight"] = "borderWidthRight";
|
|
59
|
+
Properties2["borderWidthBottom"] = "borderWidthBottom";
|
|
60
|
+
Properties2["borderWidthLeft"] = "borderWidthLeft";
|
|
61
|
+
Properties2["boxShadow"] = "boxShadow";
|
|
62
|
+
Properties2["opacity"] = "opacity";
|
|
63
|
+
Properties2["fontFamilies"] = "fontFamilies";
|
|
64
|
+
Properties2["fontWeights"] = "fontWeights";
|
|
65
|
+
Properties2["fontSizes"] = "fontSizes";
|
|
66
|
+
Properties2["lineHeights"] = "lineHeights";
|
|
67
|
+
Properties2["typography"] = "typography";
|
|
68
|
+
Properties2["composition"] = "composition";
|
|
69
|
+
Properties2["letterSpacing"] = "letterSpacing";
|
|
70
|
+
Properties2["paragraphSpacing"] = "paragraphSpacing";
|
|
71
|
+
Properties2["textCase"] = "textCase";
|
|
72
|
+
Properties2["dimension"] = "dimension";
|
|
73
|
+
Properties2["textDecoration"] = "textDecoration";
|
|
74
|
+
Properties2["asset"] = "asset";
|
|
75
|
+
Properties2["tokenValue"] = "tokenValue";
|
|
76
|
+
Properties2["value"] = "value";
|
|
77
|
+
Properties2["tokenName"] = "tokenName";
|
|
78
|
+
Properties2["description"] = "description";
|
|
79
|
+
})(Properties || (Properties = {}));
|
|
80
|
+
|
|
81
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
82
|
+
var TokenSetStatus;
|
|
83
|
+
(function(TokenSetStatus2) {
|
|
84
|
+
TokenSetStatus2["DISABLED"] = "disabled";
|
|
85
|
+
TokenSetStatus2["SOURCE"] = "source";
|
|
86
|
+
TokenSetStatus2["ENABLED"] = "enabled";
|
|
87
|
+
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
88
|
+
|
|
89
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
90
|
+
var TokenTypes;
|
|
91
|
+
(function(TokenTypes2) {
|
|
92
|
+
TokenTypes2["OTHER"] = "other";
|
|
93
|
+
TokenTypes2["COLOR"] = "color";
|
|
94
|
+
TokenTypes2["BORDER_RADIUS"] = "borderRadius";
|
|
95
|
+
TokenTypes2["SIZING"] = "sizing";
|
|
96
|
+
TokenTypes2["SPACING"] = "spacing";
|
|
97
|
+
TokenTypes2["TEXT"] = "text";
|
|
98
|
+
TokenTypes2["TYPOGRAPHY"] = "typography";
|
|
99
|
+
TokenTypes2["OPACITY"] = "opacity";
|
|
100
|
+
TokenTypes2["BORDER_WIDTH"] = "borderWidth";
|
|
101
|
+
TokenTypes2["STROKE_STYLE"] = "strokeStyle";
|
|
102
|
+
TokenTypes2["BOX_SHADOW"] = "boxShadow";
|
|
103
|
+
TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
|
|
104
|
+
TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
|
|
105
|
+
TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
|
|
106
|
+
TokenTypes2["FONT_SIZES"] = "fontSizes";
|
|
107
|
+
TokenTypes2["LETTER_SPACING"] = "letterSpacing";
|
|
108
|
+
TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
109
|
+
TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
110
|
+
TokenTypes2["TEXT_DECORATION"] = "textDecoration";
|
|
111
|
+
TokenTypes2["TEXT_CASE"] = "textCase";
|
|
112
|
+
TokenTypes2["COMPOSITION"] = "composition";
|
|
113
|
+
TokenTypes2["DIMENSION"] = "dimension";
|
|
114
|
+
TokenTypes2["BORDER"] = "border";
|
|
115
|
+
TokenTypes2["ASSET"] = "asset";
|
|
116
|
+
TokenTypes2["BOOLEAN"] = "boolean";
|
|
117
|
+
TokenTypes2["NUMBER"] = "number";
|
|
118
|
+
})(TokenTypes || (TokenTypes = {}));
|
|
119
|
+
|
|
120
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
121
|
+
var BorderValues;
|
|
122
|
+
(function(BorderValues2) {
|
|
123
|
+
BorderValues2["BORDER_COLOR"] = "color";
|
|
124
|
+
BorderValues2["BORDER_WIDTH"] = "width";
|
|
125
|
+
BorderValues2["BORDER_STYLE"] = "style";
|
|
126
|
+
})(BorderValues || (BorderValues = {}));
|
|
127
|
+
|
|
128
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
129
|
+
var StrokeStyleValues;
|
|
130
|
+
(function(StrokeStyleValues2) {
|
|
131
|
+
StrokeStyleValues2["SOLID"] = "solid";
|
|
132
|
+
StrokeStyleValues2["DASHED"] = "dashed";
|
|
133
|
+
StrokeStyleValues2["DOTTED"] = "dotted";
|
|
134
|
+
StrokeStyleValues2["DOUBLE"] = "double";
|
|
135
|
+
StrokeStyleValues2["GROOVE"] = "groove";
|
|
136
|
+
StrokeStyleValues2["RIDGE"] = "ridge";
|
|
137
|
+
StrokeStyleValues2["OUTSET"] = "outset";
|
|
138
|
+
StrokeStyleValues2["INSET"] = "inset";
|
|
139
|
+
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
140
|
+
|
|
141
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
142
|
+
var BoxShadowValues;
|
|
143
|
+
(function(BoxShadowValues2) {
|
|
144
|
+
BoxShadowValues2["TYPE"] = "type";
|
|
145
|
+
BoxShadowValues2["COLOR"] = "color";
|
|
146
|
+
BoxShadowValues2["X"] = "x";
|
|
147
|
+
BoxShadowValues2["Y"] = "y";
|
|
148
|
+
BoxShadowValues2["BLUR"] = "blur";
|
|
149
|
+
BoxShadowValues2["SPREAD"] = "spread";
|
|
150
|
+
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
151
|
+
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
152
|
+
|
|
153
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
154
|
+
var TypographyValues;
|
|
155
|
+
(function(TypographyValues2) {
|
|
156
|
+
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
157
|
+
TypographyValues2["FONT_WEIGHT"] = "fontWeight";
|
|
158
|
+
TypographyValues2["LINE_HEIGHT"] = "lineHeight";
|
|
159
|
+
TypographyValues2["FONT_SIZE"] = "fontSize";
|
|
160
|
+
TypographyValues2["LETTER_SPACING"] = "letterSpacing";
|
|
161
|
+
TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
162
|
+
TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
163
|
+
TypographyValues2["TEXT_DECORATION"] = "textDecoration";
|
|
164
|
+
TypographyValues2["TEXT_CASE"] = "textCase";
|
|
165
|
+
})(TypographyValues || (TypographyValues = {}));
|
|
166
|
+
|
|
167
|
+
// src/tokens/create/generators/$themes.ts
|
|
168
|
+
var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
|
|
169
|
+
async function createHash(text, algo = "SHA-1") {
|
|
170
|
+
const crypto = globalThis.crypto;
|
|
171
|
+
return Array.from(
|
|
172
|
+
new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
|
|
173
|
+
(byte) => byte.toString(16).padStart(2, "0")
|
|
174
|
+
).join("");
|
|
175
|
+
}
|
|
176
|
+
async function generate$Themes(colorSchemes, themes, colors) {
|
|
177
|
+
return [
|
|
178
|
+
...generateSizeGroup(),
|
|
179
|
+
...await generateThemesGroup(themes),
|
|
180
|
+
...generateTypographyGroup(themes),
|
|
181
|
+
...generateColorSchemesGroup(colorSchemes, themes),
|
|
182
|
+
generateSemanticGroup(),
|
|
183
|
+
...await generateColorGroup("main", colors),
|
|
184
|
+
...await generateColorGroup("support", colors)
|
|
185
|
+
];
|
|
186
|
+
}
|
|
187
|
+
function generateSizeGroup() {
|
|
188
|
+
return [
|
|
189
|
+
{
|
|
190
|
+
id: "8b2c8cc86611a34b135cb22948666779361fd729",
|
|
191
|
+
name: "medium",
|
|
192
|
+
$figmaStyleReferences: {},
|
|
193
|
+
selectedTokenSets: {
|
|
194
|
+
"primitives/modes/size/medium": TokenSetStatus.SOURCE,
|
|
195
|
+
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
196
|
+
"primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
|
|
197
|
+
},
|
|
198
|
+
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
199
|
+
$figmaModeId: "41630:1",
|
|
200
|
+
group: "Size"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
|
|
204
|
+
name: "large",
|
|
205
|
+
$figmaStyleReferences: {},
|
|
206
|
+
selectedTokenSets: {
|
|
207
|
+
"primitives/modes/size/large": TokenSetStatus.SOURCE,
|
|
208
|
+
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
209
|
+
"primitives/modes/typography/size/large": TokenSetStatus.ENABLED
|
|
210
|
+
},
|
|
211
|
+
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
212
|
+
$figmaModeId: "41630:2",
|
|
213
|
+
group: "Size"
|
|
214
|
+
},
|
|
215
|
+
{
|
|
216
|
+
id: "fb11567729c298ca37c9da4e3a27716a23480824",
|
|
217
|
+
name: "small",
|
|
218
|
+
$figmaStyleReferences: {},
|
|
219
|
+
selectedTokenSets: {
|
|
220
|
+
"primitives/modes/size/small": TokenSetStatus.SOURCE,
|
|
221
|
+
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
222
|
+
"primitives/modes/typography/size/small": TokenSetStatus.ENABLED
|
|
223
|
+
},
|
|
224
|
+
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
225
|
+
$figmaModeId: "41630:3",
|
|
226
|
+
group: "Size"
|
|
227
|
+
}
|
|
228
|
+
];
|
|
229
|
+
}
|
|
230
|
+
var colorSchemeDefaults = {
|
|
231
|
+
light: {
|
|
232
|
+
name: "Light",
|
|
233
|
+
selectedTokenSets: {},
|
|
234
|
+
id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
|
|
235
|
+
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
236
|
+
$figmaModeId: "34811:0"
|
|
237
|
+
},
|
|
238
|
+
dark: {
|
|
239
|
+
name: "Dark",
|
|
240
|
+
selectedTokenSets: {},
|
|
241
|
+
id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
|
|
242
|
+
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
243
|
+
$figmaModeId: "34811:1"
|
|
244
|
+
},
|
|
245
|
+
contrast: {
|
|
246
|
+
name: "Contrast",
|
|
247
|
+
selectedTokenSets: {},
|
|
248
|
+
id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
|
|
249
|
+
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
250
|
+
$figmaModeId: "34811:2"
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
function generateColorSchemesGroup(colorSchemes, themes) {
|
|
254
|
+
return colorSchemes.map(
|
|
255
|
+
(scheme) => ({
|
|
256
|
+
...colorSchemeDefaults[scheme],
|
|
257
|
+
selectedTokenSets: Object.fromEntries([
|
|
258
|
+
[`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
|
|
259
|
+
...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
|
|
260
|
+
]),
|
|
261
|
+
group: "Color scheme"
|
|
262
|
+
})
|
|
263
|
+
);
|
|
264
|
+
}
|
|
265
|
+
async function generateThemesGroup(themes) {
|
|
266
|
+
return Promise.all(
|
|
267
|
+
themes.map(
|
|
268
|
+
async (theme, index) => ({
|
|
269
|
+
id: await createHash(theme),
|
|
270
|
+
$figmaCollectionId: "VariableCollectionId:36528:61712",
|
|
271
|
+
$figmaModeId: `40960:${index + 6}`,
|
|
272
|
+
// Start on 6 in Token Studio and Community file for some reason
|
|
273
|
+
name: theme,
|
|
274
|
+
selectedTokenSets: {
|
|
275
|
+
[`themes/${theme}`]: TokenSetStatus.ENABLED
|
|
276
|
+
},
|
|
277
|
+
group: "Theme"
|
|
278
|
+
})
|
|
279
|
+
)
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
function generateSemanticGroup() {
|
|
283
|
+
return {
|
|
284
|
+
id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
|
|
285
|
+
name: "Semantic",
|
|
286
|
+
selectedTokenSets: {
|
|
287
|
+
"semantic/style": TokenSetStatus.ENABLED,
|
|
288
|
+
"semantic/color": TokenSetStatus.ENABLED,
|
|
289
|
+
"primitives/globals": TokenSetStatus.SOURCE
|
|
290
|
+
},
|
|
291
|
+
$figmaCollectionId: "VariableCollectionId:34811:5976",
|
|
292
|
+
$figmaModeId: "34811:5",
|
|
293
|
+
group: "Semantic"
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
async function generateColorGroup(group, colors) {
|
|
297
|
+
return Promise.all(
|
|
298
|
+
Object.entries(colors[group]).map(
|
|
299
|
+
async ([color]) => ({
|
|
300
|
+
id: await createHash(`${group}-${color}`),
|
|
301
|
+
name: color,
|
|
302
|
+
selectedTokenSets: {
|
|
303
|
+
[`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
|
|
304
|
+
},
|
|
305
|
+
group: `${capitalize(group)} color`
|
|
306
|
+
})
|
|
307
|
+
)
|
|
308
|
+
);
|
|
309
|
+
}
|
|
310
|
+
function generateTypographyGroup(themes) {
|
|
311
|
+
return [
|
|
312
|
+
{
|
|
313
|
+
id: "368d753fcac4455f289500eaa42e70dc0a03522f",
|
|
314
|
+
$figmaCollectionId: "VariableCollectionId:36248:20769",
|
|
315
|
+
$figmaModeId: "36248:2",
|
|
316
|
+
name: "Primary",
|
|
317
|
+
selectedTokenSets: Object.fromEntries(
|
|
318
|
+
themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
|
|
319
|
+
),
|
|
320
|
+
group: "Typography"
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
|
|
324
|
+
$figmaCollectionId: "VariableCollectionId:36248:20769",
|
|
325
|
+
$figmaModeId: "36248:3",
|
|
326
|
+
name: "Secondary",
|
|
327
|
+
selectedTokenSets: Object.fromEntries(
|
|
328
|
+
themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
|
|
329
|
+
),
|
|
330
|
+
group: "Typography"
|
|
331
|
+
}
|
|
332
|
+
];
|
|
333
|
+
}
|
|
334
|
+
|
|
4
335
|
// src/tokens/create/defaults.ts
|
|
5
336
|
import * as R from "ramda";
|
|
6
337
|
|
|
@@ -995,27 +1326,6 @@ var getDefaultToken = (tokenPath) => {
|
|
|
995
1326
|
// src/tokens/create/generators/color.ts
|
|
996
1327
|
import * as R4 from "ramda";
|
|
997
1328
|
|
|
998
|
-
// src/colors/utils.ts
|
|
999
|
-
import chroma from "chroma-js";
|
|
1000
|
-
import Colorjs from "colorjs.io";
|
|
1001
|
-
import { Hsluv } from "hsluv";
|
|
1002
|
-
var getLuminanceFromLightness = (lightness) => {
|
|
1003
|
-
const conv = new Hsluv();
|
|
1004
|
-
conv.hsluv_l = lightness;
|
|
1005
|
-
conv.hsluvToHex();
|
|
1006
|
-
return chroma(conv.hex).luminance();
|
|
1007
|
-
};
|
|
1008
|
-
var getLightnessFromHex = (hex) => {
|
|
1009
|
-
const conv = new Hsluv();
|
|
1010
|
-
conv.hex = hex;
|
|
1011
|
-
conv.hexToHsluv();
|
|
1012
|
-
return conv.hsluv_l;
|
|
1013
|
-
};
|
|
1014
|
-
|
|
1015
|
-
// src/colors/theme.ts
|
|
1016
|
-
import chroma2 from "chroma-js";
|
|
1017
|
-
import * as R3 from "ramda";
|
|
1018
|
-
|
|
1019
1329
|
// src/colors/colorMetadata.ts
|
|
1020
1330
|
import * as R2 from "ramda";
|
|
1021
1331
|
var baseColors = {
|
|
@@ -1269,6 +1579,27 @@ var colorMetadata = {
|
|
|
1269
1579
|
};
|
|
1270
1580
|
var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
|
|
1271
1581
|
|
|
1582
|
+
// src/colors/theme.ts
|
|
1583
|
+
import chroma2 from "chroma-js";
|
|
1584
|
+
import * as R3 from "ramda";
|
|
1585
|
+
|
|
1586
|
+
// src/colors/utils.ts
|
|
1587
|
+
import chroma from "chroma-js";
|
|
1588
|
+
import Colorjs from "colorjs.io";
|
|
1589
|
+
import { Hsluv } from "hsluv";
|
|
1590
|
+
var getLuminanceFromLightness = (lightness) => {
|
|
1591
|
+
const conv = new Hsluv();
|
|
1592
|
+
conv.hsluv_l = lightness;
|
|
1593
|
+
conv.hsluvToHex();
|
|
1594
|
+
return chroma(conv.hex).luminance();
|
|
1595
|
+
};
|
|
1596
|
+
var getLightnessFromHex = (hex) => {
|
|
1597
|
+
const conv = new Hsluv();
|
|
1598
|
+
conv.hex = hex;
|
|
1599
|
+
conv.hexToHsluv();
|
|
1600
|
+
return conv.hsluv_l;
|
|
1601
|
+
};
|
|
1602
|
+
|
|
1272
1603
|
// src/colors/theme.ts
|
|
1273
1604
|
var generateColorScale = (color, colorScheme2) => {
|
|
1274
1605
|
let interpolationColor = color;
|
|
@@ -1767,648 +2098,484 @@ var color_template_default2 = {
|
|
|
1767
2098
|
},
|
|
1768
2099
|
"text-default": {
|
|
1769
2100
|
$type: "color",
|
|
1770
|
-
$value: "{color.<color>.text-default}"
|
|
1771
|
-
},
|
|
1772
|
-
"base-default": {
|
|
1773
|
-
$type: "color",
|
|
1774
|
-
$value: "{color.<color>.base-default}"
|
|
1775
|
-
},
|
|
1776
|
-
"base-hover": {
|
|
1777
|
-
$type: "color",
|
|
1778
|
-
$value: "{color.<color>.base-hover}"
|
|
1779
|
-
},
|
|
1780
|
-
"base-active": {
|
|
1781
|
-
$type: "color",
|
|
1782
|
-
$value: "{color.<color>.base-active}"
|
|
1783
|
-
},
|
|
1784
|
-
"base-contrast-subtle": {
|
|
1785
|
-
$type: "color",
|
|
1786
|
-
$value: "{color.<color>.base-contrast-subtle}"
|
|
1787
|
-
},
|
|
1788
|
-
"base-contrast-default": {
|
|
1789
|
-
$type: "color",
|
|
1790
|
-
$value: "{color.<color>.base-contrast-default}"
|
|
1791
|
-
}
|
|
1792
|
-
};
|
|
1793
|
-
|
|
1794
|
-
// src/tokens/create/generators/semantic.ts
|
|
1795
|
-
var generateSemantic = (colors) => {
|
|
1796
|
-
const mainColorNames = Object.keys(colors.main);
|
|
1797
|
-
const supportColorNames = Object.keys(colors.support);
|
|
1798
|
-
const modes = {
|
|
1799
|
-
"main-color": {},
|
|
1800
|
-
"support-color": {}
|
|
1801
|
-
};
|
|
1802
|
-
const categories = [
|
|
1803
|
-
["main-color", mainColorNames],
|
|
1804
|
-
["support-color", supportColorNames]
|
|
1805
|
-
];
|
|
1806
|
-
for (const [colorCategory2, colorNames] of categories) {
|
|
1807
|
-
for (const colorName of colorNames) {
|
|
1808
|
-
const category = colorCategory2.replace("-color", "");
|
|
1809
|
-
const customColorTokens = {
|
|
1810
|
-
color: {
|
|
1811
|
-
[category]: JSON.parse(
|
|
1812
|
-
JSON.stringify(
|
|
1813
|
-
color_template_default2,
|
|
1814
|
-
(key, value) => {
|
|
1815
|
-
if (key === "$value") {
|
|
1816
|
-
return value.replace("<color>", colorName);
|
|
1817
|
-
}
|
|
1818
|
-
return value;
|
|
1819
|
-
},
|
|
1820
|
-
2
|
|
1821
|
-
)
|
|
1822
|
-
)
|
|
1823
|
-
}
|
|
1824
|
-
};
|
|
1825
|
-
modes[colorCategory2][colorName] = customColorTokens;
|
|
1826
|
-
}
|
|
1827
|
-
}
|
|
1828
|
-
const customColors = [...mainColorNames, "neutral", ...supportColorNames];
|
|
1829
|
-
const semanticColorTokens = customColors.map(
|
|
1830
|
-
(colorName) => [
|
|
1831
|
-
colorName,
|
|
1832
|
-
R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
|
|
1833
|
-
]
|
|
1834
|
-
);
|
|
1835
|
-
const color = {
|
|
1836
|
-
...color_base_template_default,
|
|
1837
|
-
color: {
|
|
1838
|
-
...Object.fromEntries(semanticColorTokens),
|
|
1839
|
-
...color_base_template_default.color
|
|
1840
|
-
}
|
|
1841
|
-
};
|
|
1842
|
-
return {
|
|
1843
|
-
modes,
|
|
1844
|
-
color
|
|
1845
|
-
};
|
|
1846
|
-
};
|
|
1847
|
-
|
|
1848
|
-
// src/tokens/create/generators/theme.ts
|
|
1849
|
-
import * as R6 from "ramda";
|
|
1850
|
-
|
|
1851
|
-
// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
|
|
1852
|
-
var theme_base_template_default = {
|
|
1853
|
-
color: {},
|
|
1854
|
-
"font-family": {
|
|
1855
|
-
$type: "fontFamilies",
|
|
1856
|
-
$value: "{<theme>.font-family}"
|
|
1857
|
-
},
|
|
1858
|
-
"font-weight": {
|
|
1859
|
-
medium: {
|
|
1860
|
-
$type: "fontWeights",
|
|
1861
|
-
$value: "{<theme>.font-weight.medium}"
|
|
1862
|
-
},
|
|
1863
|
-
semibold: {
|
|
1864
|
-
$type: "fontWeights",
|
|
1865
|
-
$value: "{<theme>.font-weight.semibold}"
|
|
1866
|
-
},
|
|
1867
|
-
regular: {
|
|
1868
|
-
$type: "fontWeights",
|
|
1869
|
-
$value: "{<theme>.font-weight.regular}"
|
|
1870
|
-
}
|
|
1871
|
-
},
|
|
1872
|
-
"border-radius": {
|
|
1873
|
-
"1": {
|
|
1874
|
-
$type: "dimension",
|
|
1875
|
-
$value: "min({border-radius.base}*0.5,{border-radius.scale})"
|
|
1876
|
-
},
|
|
1877
|
-
"2": {
|
|
1878
|
-
$type: "dimension",
|
|
1879
|
-
$value: "min({border-radius.base},{border-radius.scale}*2)"
|
|
1880
|
-
},
|
|
1881
|
-
"3": {
|
|
1882
|
-
$type: "dimension",
|
|
1883
|
-
$value: "min({border-radius.base}*2,{border-radius.scale}*5)"
|
|
1884
|
-
},
|
|
1885
|
-
"4": {
|
|
1886
|
-
$type: "dimension",
|
|
1887
|
-
$value: "min({border-radius.base}*3,{border-radius.scale}*7)"
|
|
1888
|
-
},
|
|
1889
|
-
"5": {
|
|
1890
|
-
$type: "dimension",
|
|
1891
|
-
$value: "{border-radius.base}"
|
|
1892
|
-
},
|
|
1893
|
-
"6": {
|
|
1894
|
-
$type: "dimension",
|
|
1895
|
-
$value: "9999"
|
|
1896
|
-
},
|
|
1897
|
-
base: {
|
|
1898
|
-
$type: "dimension",
|
|
1899
|
-
$value: "4"
|
|
1900
|
-
},
|
|
1901
|
-
scale: {
|
|
1902
|
-
$type: "dimension",
|
|
1903
|
-
$value: "4"
|
|
1904
|
-
}
|
|
1905
|
-
}
|
|
1906
|
-
};
|
|
1907
|
-
|
|
1908
|
-
// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
|
|
1909
|
-
var theme_template_default = {
|
|
1910
|
-
"1": {
|
|
1911
|
-
$type: "color",
|
|
1912
|
-
$value: "{<theme>.<color>.1}"
|
|
1913
|
-
},
|
|
1914
|
-
"2": {
|
|
1915
|
-
$type: "color",
|
|
1916
|
-
$value: "{<theme>.<color>.2}"
|
|
1917
|
-
},
|
|
1918
|
-
"3": {
|
|
1919
|
-
$type: "color",
|
|
1920
|
-
$value: "{<theme>.<color>.3}"
|
|
1921
|
-
},
|
|
1922
|
-
"4": {
|
|
1923
|
-
$type: "color",
|
|
1924
|
-
$value: "{<theme>.<color>.4}"
|
|
1925
|
-
},
|
|
1926
|
-
"5": {
|
|
1927
|
-
$type: "color",
|
|
1928
|
-
$value: "{<theme>.<color>.5}"
|
|
1929
|
-
},
|
|
1930
|
-
"6": {
|
|
1931
|
-
$type: "color",
|
|
1932
|
-
$value: "{<theme>.<color>.6}"
|
|
1933
|
-
},
|
|
1934
|
-
"7": {
|
|
1935
|
-
$type: "color",
|
|
1936
|
-
$value: "{<theme>.<color>.7}"
|
|
1937
|
-
},
|
|
1938
|
-
"8": {
|
|
1939
|
-
$type: "color",
|
|
1940
|
-
$value: "{<theme>.<color>.8}"
|
|
1941
|
-
},
|
|
1942
|
-
"9": {
|
|
1943
|
-
$type: "color",
|
|
1944
|
-
$value: "{<theme>.<color>.9}"
|
|
1945
|
-
},
|
|
1946
|
-
"10": {
|
|
1947
|
-
$type: "color",
|
|
1948
|
-
$value: "{<theme>.<color>.10}"
|
|
1949
|
-
},
|
|
1950
|
-
"11": {
|
|
1951
|
-
$type: "color",
|
|
1952
|
-
$value: "{<theme>.<color>.11}"
|
|
1953
|
-
},
|
|
1954
|
-
"12": {
|
|
1955
|
-
$type: "color",
|
|
1956
|
-
$value: "{<theme>.<color>.12}"
|
|
1957
|
-
},
|
|
1958
|
-
"13": {
|
|
1959
|
-
$type: "color",
|
|
1960
|
-
$value: "{<theme>.<color>.13}"
|
|
2101
|
+
$value: "{color.<color>.text-default}"
|
|
1961
2102
|
},
|
|
1962
|
-
"
|
|
2103
|
+
"base-default": {
|
|
1963
2104
|
$type: "color",
|
|
1964
|
-
$value: "{
|
|
2105
|
+
$value: "{color.<color>.base-default}"
|
|
1965
2106
|
},
|
|
1966
|
-
"
|
|
2107
|
+
"base-hover": {
|
|
1967
2108
|
$type: "color",
|
|
1968
|
-
$value: "{
|
|
2109
|
+
$value: "{color.<color>.base-hover}"
|
|
1969
2110
|
},
|
|
1970
|
-
"
|
|
2111
|
+
"base-active": {
|
|
1971
2112
|
$type: "color",
|
|
1972
|
-
$value: "{
|
|
1973
|
-
}
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
|
|
1983
|
-
(colorName) => [
|
|
1984
|
-
colorName,
|
|
1985
|
-
R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
|
|
1986
|
-
]
|
|
1987
|
-
)
|
|
1988
|
-
);
|
|
1989
|
-
const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
|
|
1990
|
-
const themeFile = {
|
|
1991
|
-
color: {
|
|
1992
|
-
...themeColorTokens,
|
|
1993
|
-
...themeBaseFileColor
|
|
1994
|
-
},
|
|
1995
|
-
...remainingThemeFile
|
|
1996
|
-
};
|
|
1997
|
-
const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
|
|
1998
|
-
const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
|
|
1999
|
-
const token = JSON.parse(
|
|
2000
|
-
JSON.stringify(
|
|
2001
|
-
updatedThemeFile,
|
|
2002
|
-
(key, value) => {
|
|
2003
|
-
if (key === "$value") {
|
|
2004
|
-
return value.replace("<theme>", themeName);
|
|
2005
|
-
}
|
|
2006
|
-
return value;
|
|
2007
|
-
},
|
|
2008
|
-
2
|
|
2009
|
-
)
|
|
2010
|
-
);
|
|
2011
|
-
return token;
|
|
2012
|
-
};
|
|
2013
|
-
|
|
2014
|
-
// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
|
|
2015
|
-
var typography_template_default = {
|
|
2016
|
-
"<theme>": {
|
|
2017
|
-
"font-family": {
|
|
2018
|
-
$type: "fontFamilies",
|
|
2019
|
-
$value: "<font-family>"
|
|
2020
|
-
},
|
|
2021
|
-
"font-weight": {
|
|
2022
|
-
medium: {
|
|
2023
|
-
$type: "fontWeights",
|
|
2024
|
-
$value: "Medium"
|
|
2025
|
-
},
|
|
2026
|
-
semibold: {
|
|
2027
|
-
$type: "fontWeights",
|
|
2028
|
-
$value: "Semi bold"
|
|
2029
|
-
},
|
|
2030
|
-
regular: {
|
|
2031
|
-
$type: "fontWeights",
|
|
2032
|
-
$value: "Regular"
|
|
2033
|
-
}
|
|
2034
|
-
}
|
|
2035
|
-
}
|
|
2036
|
-
};
|
|
2037
|
-
|
|
2038
|
-
// src/tokens/create/generators/typography.ts
|
|
2039
|
-
var generateTypography = (themeName, { fontFamily }) => {
|
|
2040
|
-
return JSON.parse(
|
|
2041
|
-
JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
|
|
2042
|
-
);
|
|
2043
|
-
};
|
|
2044
|
-
|
|
2045
|
-
// src/tokens/create.ts
|
|
2046
|
-
var createTokens = async (opts) => {
|
|
2047
|
-
const { colors, typography: typography2, name, borderRadius } = opts;
|
|
2048
|
-
const colorSchemes = ["light", "dark"];
|
|
2049
|
-
const semantic2 = generateSemantic(colors);
|
|
2050
|
-
const tokenSets = new Map([
|
|
2051
|
-
...getDefaultTokens([
|
|
2052
|
-
"primitives/globals",
|
|
2053
|
-
"primitives/modes/size/small",
|
|
2054
|
-
"primitives/modes/size/medium",
|
|
2055
|
-
"primitives/modes/size/large",
|
|
2056
|
-
"primitives/modes/size/global",
|
|
2057
|
-
"primitives/modes/typography/size/small",
|
|
2058
|
-
"primitives/modes/typography/size/medium",
|
|
2059
|
-
"primitives/modes/typography/size/large"
|
|
2060
|
-
]),
|
|
2061
|
-
[`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
|
|
2062
|
-
[`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
|
|
2063
|
-
...colorSchemes.flatMap((scheme) => [
|
|
2064
|
-
[`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
|
|
2065
|
-
[`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
|
|
2066
|
-
]),
|
|
2067
|
-
[`themes/${name}`, generateTheme(colors, name, borderRadius)],
|
|
2068
|
-
["semantic/color", semantic2.color],
|
|
2069
|
-
// maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
|
|
2070
|
-
...Object.entries(semantic2.modes).flatMap(
|
|
2071
|
-
([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
|
|
2072
|
-
),
|
|
2073
|
-
getDefaultToken("semantic/style")
|
|
2074
|
-
]);
|
|
2075
|
-
return { tokenSets };
|
|
2076
|
-
};
|
|
2077
|
-
|
|
2078
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
2079
|
-
var BoxShadowTypes;
|
|
2080
|
-
(function(BoxShadowTypes2) {
|
|
2081
|
-
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
2082
|
-
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
2083
|
-
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
2084
|
-
|
|
2085
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
2086
|
-
var ColorModifierTypes;
|
|
2087
|
-
(function(ColorModifierTypes2) {
|
|
2088
|
-
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
2089
|
-
ColorModifierTypes2["DARKEN"] = "darken";
|
|
2090
|
-
ColorModifierTypes2["MIX"] = "mix";
|
|
2091
|
-
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
2092
|
-
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
2093
|
-
|
|
2094
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
2095
|
-
var ColorSpaceTypes;
|
|
2096
|
-
(function(ColorSpaceTypes2) {
|
|
2097
|
-
ColorSpaceTypes2["LCH"] = "lch";
|
|
2098
|
-
ColorSpaceTypes2["SRGB"] = "srgb";
|
|
2099
|
-
ColorSpaceTypes2["P3"] = "p3";
|
|
2100
|
-
ColorSpaceTypes2["HSL"] = "hsl";
|
|
2101
|
-
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
2102
|
-
|
|
2103
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
2104
|
-
var Properties;
|
|
2105
|
-
(function(Properties2) {
|
|
2106
|
-
Properties2["sizing"] = "sizing";
|
|
2107
|
-
Properties2["height"] = "height";
|
|
2108
|
-
Properties2["width"] = "width";
|
|
2109
|
-
Properties2["spacing"] = "spacing";
|
|
2110
|
-
Properties2["verticalPadding"] = "verticalPadding";
|
|
2111
|
-
Properties2["horizontalPadding"] = "horizontalPadding";
|
|
2112
|
-
Properties2["paddingTop"] = "paddingTop";
|
|
2113
|
-
Properties2["paddingRight"] = "paddingRight";
|
|
2114
|
-
Properties2["paddingBottom"] = "paddingBottom";
|
|
2115
|
-
Properties2["paddingLeft"] = "paddingLeft";
|
|
2116
|
-
Properties2["itemSpacing"] = "itemSpacing";
|
|
2117
|
-
Properties2["fill"] = "fill";
|
|
2118
|
-
Properties2["backgroundBlur"] = "backgroundBlur";
|
|
2119
|
-
Properties2["border"] = "border";
|
|
2120
|
-
Properties2["borderTop"] = "borderTop";
|
|
2121
|
-
Properties2["borderRight"] = "borderRight";
|
|
2122
|
-
Properties2["borderBottom"] = "borderBottom";
|
|
2123
|
-
Properties2["borderLeft"] = "borderLeft";
|
|
2124
|
-
Properties2["borderColor"] = "borderColor";
|
|
2125
|
-
Properties2["borderRadius"] = "borderRadius";
|
|
2126
|
-
Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
|
|
2127
|
-
Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
|
|
2128
|
-
Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
|
|
2129
|
-
Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
|
|
2130
|
-
Properties2["borderWidth"] = "borderWidth";
|
|
2131
|
-
Properties2["borderWidthTop"] = "borderWidthTop";
|
|
2132
|
-
Properties2["borderWidthRight"] = "borderWidthRight";
|
|
2133
|
-
Properties2["borderWidthBottom"] = "borderWidthBottom";
|
|
2134
|
-
Properties2["borderWidthLeft"] = "borderWidthLeft";
|
|
2135
|
-
Properties2["boxShadow"] = "boxShadow";
|
|
2136
|
-
Properties2["opacity"] = "opacity";
|
|
2137
|
-
Properties2["fontFamilies"] = "fontFamilies";
|
|
2138
|
-
Properties2["fontWeights"] = "fontWeights";
|
|
2139
|
-
Properties2["fontSizes"] = "fontSizes";
|
|
2140
|
-
Properties2["lineHeights"] = "lineHeights";
|
|
2141
|
-
Properties2["typography"] = "typography";
|
|
2142
|
-
Properties2["composition"] = "composition";
|
|
2143
|
-
Properties2["letterSpacing"] = "letterSpacing";
|
|
2144
|
-
Properties2["paragraphSpacing"] = "paragraphSpacing";
|
|
2145
|
-
Properties2["textCase"] = "textCase";
|
|
2146
|
-
Properties2["dimension"] = "dimension";
|
|
2147
|
-
Properties2["textDecoration"] = "textDecoration";
|
|
2148
|
-
Properties2["asset"] = "asset";
|
|
2149
|
-
Properties2["tokenValue"] = "tokenValue";
|
|
2150
|
-
Properties2["value"] = "value";
|
|
2151
|
-
Properties2["tokenName"] = "tokenName";
|
|
2152
|
-
Properties2["description"] = "description";
|
|
2153
|
-
})(Properties || (Properties = {}));
|
|
2154
|
-
|
|
2155
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
2156
|
-
var TokenSetStatus;
|
|
2157
|
-
(function(TokenSetStatus2) {
|
|
2158
|
-
TokenSetStatus2["DISABLED"] = "disabled";
|
|
2159
|
-
TokenSetStatus2["SOURCE"] = "source";
|
|
2160
|
-
TokenSetStatus2["ENABLED"] = "enabled";
|
|
2161
|
-
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
2162
|
-
|
|
2163
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
2164
|
-
var TokenTypes;
|
|
2165
|
-
(function(TokenTypes2) {
|
|
2166
|
-
TokenTypes2["OTHER"] = "other";
|
|
2167
|
-
TokenTypes2["COLOR"] = "color";
|
|
2168
|
-
TokenTypes2["BORDER_RADIUS"] = "borderRadius";
|
|
2169
|
-
TokenTypes2["SIZING"] = "sizing";
|
|
2170
|
-
TokenTypes2["SPACING"] = "spacing";
|
|
2171
|
-
TokenTypes2["TEXT"] = "text";
|
|
2172
|
-
TokenTypes2["TYPOGRAPHY"] = "typography";
|
|
2173
|
-
TokenTypes2["OPACITY"] = "opacity";
|
|
2174
|
-
TokenTypes2["BORDER_WIDTH"] = "borderWidth";
|
|
2175
|
-
TokenTypes2["STROKE_STYLE"] = "strokeStyle";
|
|
2176
|
-
TokenTypes2["BOX_SHADOW"] = "boxShadow";
|
|
2177
|
-
TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
|
|
2178
|
-
TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
|
|
2179
|
-
TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
|
|
2180
|
-
TokenTypes2["FONT_SIZES"] = "fontSizes";
|
|
2181
|
-
TokenTypes2["LETTER_SPACING"] = "letterSpacing";
|
|
2182
|
-
TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
2183
|
-
TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
2184
|
-
TokenTypes2["TEXT_DECORATION"] = "textDecoration";
|
|
2185
|
-
TokenTypes2["TEXT_CASE"] = "textCase";
|
|
2186
|
-
TokenTypes2["COMPOSITION"] = "composition";
|
|
2187
|
-
TokenTypes2["DIMENSION"] = "dimension";
|
|
2188
|
-
TokenTypes2["BORDER"] = "border";
|
|
2189
|
-
TokenTypes2["ASSET"] = "asset";
|
|
2190
|
-
TokenTypes2["BOOLEAN"] = "boolean";
|
|
2191
|
-
TokenTypes2["NUMBER"] = "number";
|
|
2192
|
-
})(TokenTypes || (TokenTypes = {}));
|
|
2193
|
-
|
|
2194
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
2195
|
-
var BorderValues;
|
|
2196
|
-
(function(BorderValues2) {
|
|
2197
|
-
BorderValues2["BORDER_COLOR"] = "color";
|
|
2198
|
-
BorderValues2["BORDER_WIDTH"] = "width";
|
|
2199
|
-
BorderValues2["BORDER_STYLE"] = "style";
|
|
2200
|
-
})(BorderValues || (BorderValues = {}));
|
|
2201
|
-
|
|
2202
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
2203
|
-
var StrokeStyleValues;
|
|
2204
|
-
(function(StrokeStyleValues2) {
|
|
2205
|
-
StrokeStyleValues2["SOLID"] = "solid";
|
|
2206
|
-
StrokeStyleValues2["DASHED"] = "dashed";
|
|
2207
|
-
StrokeStyleValues2["DOTTED"] = "dotted";
|
|
2208
|
-
StrokeStyleValues2["DOUBLE"] = "double";
|
|
2209
|
-
StrokeStyleValues2["GROOVE"] = "groove";
|
|
2210
|
-
StrokeStyleValues2["RIDGE"] = "ridge";
|
|
2211
|
-
StrokeStyleValues2["OUTSET"] = "outset";
|
|
2212
|
-
StrokeStyleValues2["INSET"] = "inset";
|
|
2213
|
-
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
2113
|
+
$value: "{color.<color>.base-active}"
|
|
2114
|
+
},
|
|
2115
|
+
"base-contrast-subtle": {
|
|
2116
|
+
$type: "color",
|
|
2117
|
+
$value: "{color.<color>.base-contrast-subtle}"
|
|
2118
|
+
},
|
|
2119
|
+
"base-contrast-default": {
|
|
2120
|
+
$type: "color",
|
|
2121
|
+
$value: "{color.<color>.base-contrast-default}"
|
|
2122
|
+
}
|
|
2123
|
+
};
|
|
2214
2124
|
|
|
2215
|
-
//
|
|
2216
|
-
var
|
|
2217
|
-
(
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2125
|
+
// src/tokens/create/generators/semantic.ts
|
|
2126
|
+
var generateSemantic = (colors) => {
|
|
2127
|
+
const mainColorNames = Object.keys(colors.main);
|
|
2128
|
+
const supportColorNames = Object.keys(colors.support);
|
|
2129
|
+
const modes = {
|
|
2130
|
+
"main-color": {},
|
|
2131
|
+
"support-color": {}
|
|
2132
|
+
};
|
|
2133
|
+
const categories = [
|
|
2134
|
+
["main-color", mainColorNames],
|
|
2135
|
+
["support-color", supportColorNames]
|
|
2136
|
+
];
|
|
2137
|
+
for (const [colorCategory2, colorNames] of categories) {
|
|
2138
|
+
for (const colorName of colorNames) {
|
|
2139
|
+
const category = colorCategory2.replace("-color", "");
|
|
2140
|
+
const customColorTokens = {
|
|
2141
|
+
color: {
|
|
2142
|
+
[category]: JSON.parse(
|
|
2143
|
+
JSON.stringify(
|
|
2144
|
+
color_template_default2,
|
|
2145
|
+
(key, value) => {
|
|
2146
|
+
if (key === "$value") {
|
|
2147
|
+
return value.replace("<color>", colorName);
|
|
2148
|
+
}
|
|
2149
|
+
return value;
|
|
2150
|
+
},
|
|
2151
|
+
2
|
|
2152
|
+
)
|
|
2153
|
+
)
|
|
2154
|
+
}
|
|
2155
|
+
};
|
|
2156
|
+
modes[colorCategory2][colorName] = customColorTokens;
|
|
2157
|
+
}
|
|
2158
|
+
}
|
|
2159
|
+
const customColors = [...mainColorNames, "neutral", ...supportColorNames];
|
|
2160
|
+
const semanticColorTokens = customColors.map(
|
|
2161
|
+
(colorName) => [
|
|
2162
|
+
colorName,
|
|
2163
|
+
R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
|
|
2164
|
+
]
|
|
2165
|
+
);
|
|
2166
|
+
const color = {
|
|
2167
|
+
...color_base_template_default,
|
|
2168
|
+
color: {
|
|
2169
|
+
...Object.fromEntries(semanticColorTokens),
|
|
2170
|
+
...color_base_template_default.color
|
|
2171
|
+
}
|
|
2172
|
+
};
|
|
2173
|
+
return {
|
|
2174
|
+
modes,
|
|
2175
|
+
color
|
|
2176
|
+
};
|
|
2177
|
+
};
|
|
2226
2178
|
|
|
2227
|
-
//
|
|
2228
|
-
|
|
2229
|
-
(function(TypographyValues2) {
|
|
2230
|
-
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
2231
|
-
TypographyValues2["FONT_WEIGHT"] = "fontWeight";
|
|
2232
|
-
TypographyValues2["LINE_HEIGHT"] = "lineHeight";
|
|
2233
|
-
TypographyValues2["FONT_SIZE"] = "fontSize";
|
|
2234
|
-
TypographyValues2["LETTER_SPACING"] = "letterSpacing";
|
|
2235
|
-
TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
|
|
2236
|
-
TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
|
|
2237
|
-
TypographyValues2["TEXT_DECORATION"] = "textDecoration";
|
|
2238
|
-
TypographyValues2["TEXT_CASE"] = "textCase";
|
|
2239
|
-
})(TypographyValues || (TypographyValues = {}));
|
|
2179
|
+
// src/tokens/create/generators/theme.ts
|
|
2180
|
+
import * as R6 from "ramda";
|
|
2240
2181
|
|
|
2241
|
-
// src/tokens/
|
|
2242
|
-
var
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
|
|
2251
|
-
|
|
2252
|
-
...generateSizeGroup(),
|
|
2253
|
-
...await generateThemesGroup(themes),
|
|
2254
|
-
...generateTypographyGroup(themes),
|
|
2255
|
-
...generateColorSchemesGroup(colorSchemes, themes),
|
|
2256
|
-
generateSemanticGroup(),
|
|
2257
|
-
...await generateColorGroup("main", colors),
|
|
2258
|
-
...await generateColorGroup("support", colors)
|
|
2259
|
-
];
|
|
2260
|
-
}
|
|
2261
|
-
function generateSizeGroup() {
|
|
2262
|
-
return [
|
|
2263
|
-
{
|
|
2264
|
-
id: "8b2c8cc86611a34b135cb22948666779361fd729",
|
|
2265
|
-
name: "medium",
|
|
2266
|
-
$figmaStyleReferences: {},
|
|
2267
|
-
selectedTokenSets: {
|
|
2268
|
-
"primitives/modes/size/medium": TokenSetStatus.SOURCE,
|
|
2269
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
2270
|
-
"primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
|
|
2271
|
-
},
|
|
2272
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
2273
|
-
$figmaModeId: "41630:1",
|
|
2274
|
-
group: "Size"
|
|
2182
|
+
// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
|
|
2183
|
+
var theme_base_template_default = {
|
|
2184
|
+
color: {},
|
|
2185
|
+
"font-family": {
|
|
2186
|
+
$type: "fontFamilies",
|
|
2187
|
+
$value: "{<theme>.font-family}"
|
|
2188
|
+
},
|
|
2189
|
+
"font-weight": {
|
|
2190
|
+
medium: {
|
|
2191
|
+
$type: "fontWeights",
|
|
2192
|
+
$value: "{<theme>.font-weight.medium}"
|
|
2275
2193
|
},
|
|
2276
|
-
{
|
|
2277
|
-
|
|
2278
|
-
|
|
2279
|
-
$figmaStyleReferences: {},
|
|
2280
|
-
selectedTokenSets: {
|
|
2281
|
-
"primitives/modes/size/large": TokenSetStatus.SOURCE,
|
|
2282
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
2283
|
-
"primitives/modes/typography/size/large": TokenSetStatus.ENABLED
|
|
2284
|
-
},
|
|
2285
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
2286
|
-
$figmaModeId: "41630:2",
|
|
2287
|
-
group: "Size"
|
|
2194
|
+
semibold: {
|
|
2195
|
+
$type: "fontWeights",
|
|
2196
|
+
$value: "{<theme>.font-weight.semibold}"
|
|
2288
2197
|
},
|
|
2289
|
-
{
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
$figmaStyleReferences: {},
|
|
2293
|
-
selectedTokenSets: {
|
|
2294
|
-
"primitives/modes/size/small": TokenSetStatus.SOURCE,
|
|
2295
|
-
"primitives/modes/size/global": TokenSetStatus.ENABLED,
|
|
2296
|
-
"primitives/modes/typography/size/small": TokenSetStatus.ENABLED
|
|
2297
|
-
},
|
|
2298
|
-
$figmaCollectionId: "VariableCollectionId:36248:20757",
|
|
2299
|
-
$figmaModeId: "41630:3",
|
|
2300
|
-
group: "Size"
|
|
2198
|
+
regular: {
|
|
2199
|
+
$type: "fontWeights",
|
|
2200
|
+
$value: "{<theme>.font-weight.regular}"
|
|
2301
2201
|
}
|
|
2302
|
-
];
|
|
2303
|
-
}
|
|
2304
|
-
var colorSchemeDefaults = {
|
|
2305
|
-
light: {
|
|
2306
|
-
name: "Light",
|
|
2307
|
-
selectedTokenSets: {},
|
|
2308
|
-
id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
|
|
2309
|
-
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
2310
|
-
$figmaModeId: "34811:0"
|
|
2311
2202
|
},
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2203
|
+
"border-radius": {
|
|
2204
|
+
"1": {
|
|
2205
|
+
$type: "dimension",
|
|
2206
|
+
$value: "min({border-radius.base}*0.5,{border-radius.scale})"
|
|
2207
|
+
},
|
|
2208
|
+
"2": {
|
|
2209
|
+
$type: "dimension",
|
|
2210
|
+
$value: "min({border-radius.base},{border-radius.scale}*2)"
|
|
2211
|
+
},
|
|
2212
|
+
"3": {
|
|
2213
|
+
$type: "dimension",
|
|
2214
|
+
$value: "min({border-radius.base}*2,{border-radius.scale}*5)"
|
|
2215
|
+
},
|
|
2216
|
+
"4": {
|
|
2217
|
+
$type: "dimension",
|
|
2218
|
+
$value: "min({border-radius.base}*3,{border-radius.scale}*7)"
|
|
2219
|
+
},
|
|
2220
|
+
"5": {
|
|
2221
|
+
$type: "dimension",
|
|
2222
|
+
$value: "{border-radius.base}"
|
|
2223
|
+
},
|
|
2224
|
+
"6": {
|
|
2225
|
+
$type: "dimension",
|
|
2226
|
+
$value: "9999"
|
|
2227
|
+
},
|
|
2228
|
+
base: {
|
|
2229
|
+
$type: "dimension",
|
|
2230
|
+
$value: "4"
|
|
2231
|
+
},
|
|
2232
|
+
scale: {
|
|
2233
|
+
$type: "dimension",
|
|
2234
|
+
$value: "4"
|
|
2235
|
+
}
|
|
2236
|
+
}
|
|
2237
|
+
};
|
|
2238
|
+
|
|
2239
|
+
// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
|
|
2240
|
+
var theme_template_default = {
|
|
2241
|
+
"1": {
|
|
2242
|
+
$type: "color",
|
|
2243
|
+
$value: "{<theme>.<color>.1}"
|
|
2244
|
+
},
|
|
2245
|
+
"2": {
|
|
2246
|
+
$type: "color",
|
|
2247
|
+
$value: "{<theme>.<color>.2}"
|
|
2248
|
+
},
|
|
2249
|
+
"3": {
|
|
2250
|
+
$type: "color",
|
|
2251
|
+
$value: "{<theme>.<color>.3}"
|
|
2252
|
+
},
|
|
2253
|
+
"4": {
|
|
2254
|
+
$type: "color",
|
|
2255
|
+
$value: "{<theme>.<color>.4}"
|
|
2256
|
+
},
|
|
2257
|
+
"5": {
|
|
2258
|
+
$type: "color",
|
|
2259
|
+
$value: "{<theme>.<color>.5}"
|
|
2260
|
+
},
|
|
2261
|
+
"6": {
|
|
2262
|
+
$type: "color",
|
|
2263
|
+
$value: "{<theme>.<color>.6}"
|
|
2264
|
+
},
|
|
2265
|
+
"7": {
|
|
2266
|
+
$type: "color",
|
|
2267
|
+
$value: "{<theme>.<color>.7}"
|
|
2268
|
+
},
|
|
2269
|
+
"8": {
|
|
2270
|
+
$type: "color",
|
|
2271
|
+
$value: "{<theme>.<color>.8}"
|
|
2272
|
+
},
|
|
2273
|
+
"9": {
|
|
2274
|
+
$type: "color",
|
|
2275
|
+
$value: "{<theme>.<color>.9}"
|
|
2276
|
+
},
|
|
2277
|
+
"10": {
|
|
2278
|
+
$type: "color",
|
|
2279
|
+
$value: "{<theme>.<color>.10}"
|
|
2280
|
+
},
|
|
2281
|
+
"11": {
|
|
2282
|
+
$type: "color",
|
|
2283
|
+
$value: "{<theme>.<color>.11}"
|
|
2284
|
+
},
|
|
2285
|
+
"12": {
|
|
2286
|
+
$type: "color",
|
|
2287
|
+
$value: "{<theme>.<color>.12}"
|
|
2288
|
+
},
|
|
2289
|
+
"13": {
|
|
2290
|
+
$type: "color",
|
|
2291
|
+
$value: "{<theme>.<color>.13}"
|
|
2318
2292
|
},
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
$
|
|
2293
|
+
"14": {
|
|
2294
|
+
$type: "color",
|
|
2295
|
+
$value: "{<theme>.<color>.14}"
|
|
2296
|
+
},
|
|
2297
|
+
"15": {
|
|
2298
|
+
$type: "color",
|
|
2299
|
+
$value: "{<theme>.<color>.15}"
|
|
2300
|
+
},
|
|
2301
|
+
"16": {
|
|
2302
|
+
$type: "color",
|
|
2303
|
+
$value: "{<theme>.<color>.16}"
|
|
2325
2304
|
}
|
|
2326
2305
|
};
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
async function generateThemesGroup(themes) {
|
|
2340
|
-
return Promise.all(
|
|
2341
|
-
themes.map(
|
|
2342
|
-
async (theme, index) => ({
|
|
2343
|
-
id: await createHash(theme),
|
|
2344
|
-
$figmaCollectionId: "VariableCollectionId:36528:61712",
|
|
2345
|
-
$figmaModeId: `40960:${index + 6}`,
|
|
2346
|
-
// Start on 6 in Token Studio and Community file for some reason
|
|
2347
|
-
name: theme,
|
|
2348
|
-
selectedTokenSets: {
|
|
2349
|
-
[`themes/${theme}`]: TokenSetStatus.ENABLED
|
|
2350
|
-
},
|
|
2351
|
-
group: "Theme"
|
|
2352
|
-
})
|
|
2306
|
+
|
|
2307
|
+
// src/tokens/create/generators/theme.ts
|
|
2308
|
+
var generateTheme = (colors, themeName, borderRadius) => {
|
|
2309
|
+
const mainColorNames = Object.keys(colors.main);
|
|
2310
|
+
const supportColorNames = Object.keys(colors.support);
|
|
2311
|
+
const customColors = [...mainColorNames, "neutral", ...supportColorNames];
|
|
2312
|
+
const themeColorTokens = Object.fromEntries(
|
|
2313
|
+
customColors.map(
|
|
2314
|
+
(colorName) => [
|
|
2315
|
+
colorName,
|
|
2316
|
+
R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
|
|
2317
|
+
]
|
|
2353
2318
|
)
|
|
2354
2319
|
);
|
|
2355
|
-
}
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
selectedTokenSets: {
|
|
2361
|
-
"semantic/style": TokenSetStatus.ENABLED,
|
|
2362
|
-
"semantic/color": TokenSetStatus.ENABLED,
|
|
2363
|
-
"primitives/globals": TokenSetStatus.SOURCE
|
|
2320
|
+
const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
|
|
2321
|
+
const themeFile = {
|
|
2322
|
+
color: {
|
|
2323
|
+
...themeColorTokens,
|
|
2324
|
+
...themeBaseFileColor
|
|
2364
2325
|
},
|
|
2365
|
-
|
|
2366
|
-
$figmaModeId: "34811:5",
|
|
2367
|
-
group: "Semantic"
|
|
2326
|
+
...remainingThemeFile
|
|
2368
2327
|
};
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2328
|
+
const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
|
|
2329
|
+
const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
|
|
2330
|
+
const token = JSON.parse(
|
|
2331
|
+
JSON.stringify(
|
|
2332
|
+
updatedThemeFile,
|
|
2333
|
+
(key, value) => {
|
|
2334
|
+
if (key === "$value") {
|
|
2335
|
+
return value.replace("<theme>", themeName);
|
|
2336
|
+
}
|
|
2337
|
+
return value;
|
|
2338
|
+
},
|
|
2339
|
+
2
|
|
2381
2340
|
)
|
|
2382
2341
|
);
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
|
|
2393
|
-
),
|
|
2394
|
-
group: "Typography"
|
|
2342
|
+
return token;
|
|
2343
|
+
};
|
|
2344
|
+
|
|
2345
|
+
// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
|
|
2346
|
+
var typography_template_default = {
|
|
2347
|
+
"<theme>": {
|
|
2348
|
+
"font-family": {
|
|
2349
|
+
$type: "fontFamilies",
|
|
2350
|
+
$value: "<font-family>"
|
|
2395
2351
|
},
|
|
2396
|
-
{
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2352
|
+
"font-weight": {
|
|
2353
|
+
medium: {
|
|
2354
|
+
$type: "fontWeights",
|
|
2355
|
+
$value: "Medium"
|
|
2356
|
+
},
|
|
2357
|
+
semibold: {
|
|
2358
|
+
$type: "fontWeights",
|
|
2359
|
+
$value: "Semi bold"
|
|
2360
|
+
},
|
|
2361
|
+
regular: {
|
|
2362
|
+
$type: "fontWeights",
|
|
2363
|
+
$value: "Regular"
|
|
2364
|
+
}
|
|
2365
|
+
}
|
|
2366
|
+
}
|
|
2367
|
+
};
|
|
2368
|
+
|
|
2369
|
+
// src/tokens/create/generators/typography.ts
|
|
2370
|
+
var generateTypography = (themeName, { fontFamily }) => {
|
|
2371
|
+
return JSON.parse(
|
|
2372
|
+
JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
|
|
2373
|
+
);
|
|
2374
|
+
};
|
|
2375
|
+
|
|
2376
|
+
// src/tokens/create.ts
|
|
2377
|
+
var createTokens = async (opts) => {
|
|
2378
|
+
const { colors, typography: typography2, name, borderRadius } = opts;
|
|
2379
|
+
const colorSchemes = ["light", "dark"];
|
|
2380
|
+
const semantic2 = generateSemantic(colors);
|
|
2381
|
+
const tokenSets = new Map([
|
|
2382
|
+
...getDefaultTokens([
|
|
2383
|
+
"primitives/globals",
|
|
2384
|
+
"primitives/modes/size/small",
|
|
2385
|
+
"primitives/modes/size/medium",
|
|
2386
|
+
"primitives/modes/size/large",
|
|
2387
|
+
"primitives/modes/size/global",
|
|
2388
|
+
"primitives/modes/typography/size/small",
|
|
2389
|
+
"primitives/modes/typography/size/medium",
|
|
2390
|
+
"primitives/modes/typography/size/large"
|
|
2391
|
+
]),
|
|
2392
|
+
[`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
|
|
2393
|
+
[`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
|
|
2394
|
+
...colorSchemes.flatMap((scheme) => [
|
|
2395
|
+
[`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
|
|
2396
|
+
[`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
|
|
2397
|
+
]),
|
|
2398
|
+
[`themes/${name}`, generateTheme(colors, name, borderRadius)],
|
|
2399
|
+
["semantic/color", semantic2.color],
|
|
2400
|
+
// maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
|
|
2401
|
+
...Object.entries(semantic2.modes).flatMap(
|
|
2402
|
+
([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
|
|
2403
|
+
),
|
|
2404
|
+
getDefaultToken("semantic/style")
|
|
2405
|
+
]);
|
|
2406
|
+
return { tokenSets };
|
|
2407
|
+
};
|
|
2408
|
+
|
|
2409
|
+
// src/tokens/process/output/theme.ts
|
|
2410
|
+
import chalk from "chalk";
|
|
2411
|
+
import * as R7 from "ramda";
|
|
2412
|
+
|
|
2413
|
+
// package.json
|
|
2414
|
+
var package_default = {
|
|
2415
|
+
name: "@digdir/designsystemet",
|
|
2416
|
+
version: "1.1.0",
|
|
2417
|
+
description: "CLI for Designsystemet",
|
|
2418
|
+
author: "Designsystemet team",
|
|
2419
|
+
engines: {
|
|
2420
|
+
node: ">=22.16.0"
|
|
2421
|
+
},
|
|
2422
|
+
repository: {
|
|
2423
|
+
type: "git",
|
|
2424
|
+
url: "git+https://github.com/digdir/designsystemet.git"
|
|
2425
|
+
},
|
|
2426
|
+
homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
|
|
2427
|
+
license: "MIT",
|
|
2428
|
+
type: "module",
|
|
2429
|
+
main: "./dist/src/index.js",
|
|
2430
|
+
files: [
|
|
2431
|
+
"./dist/**",
|
|
2432
|
+
"./configs/**"
|
|
2433
|
+
],
|
|
2434
|
+
bin: "dist/bin/designsystemet.js",
|
|
2435
|
+
exports: {
|
|
2436
|
+
".": {
|
|
2437
|
+
import: "./dist/src/index.js"
|
|
2438
|
+
},
|
|
2439
|
+
"./color": {
|
|
2440
|
+
import: "./dist/src/colors/index.js"
|
|
2441
|
+
},
|
|
2442
|
+
"./tokens": {
|
|
2443
|
+
import: "./dist/src/tokens/index.js"
|
|
2444
|
+
}
|
|
2445
|
+
},
|
|
2446
|
+
publishConfig: {
|
|
2447
|
+
access: "public"
|
|
2448
|
+
},
|
|
2449
|
+
scripts: {
|
|
2450
|
+
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
2451
|
+
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
2452
|
+
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
2453
|
+
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
2454
|
+
types: "tsc --noEmit",
|
|
2455
|
+
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
2456
|
+
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
2457
|
+
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
2458
|
+
"test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
|
|
2459
|
+
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2460
|
+
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2461
|
+
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2462
|
+
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2463
|
+
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
2464
|
+
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2465
|
+
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2466
|
+
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2467
|
+
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
|
|
2468
|
+
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2469
|
+
},
|
|
2470
|
+
dependencies: {
|
|
2471
|
+
"@commander-js/extra-typings": "^14.0.0",
|
|
2472
|
+
"@tokens-studio/sd-transforms": "1.3.0",
|
|
2473
|
+
"apca-w3": "^0.1.9",
|
|
2474
|
+
chalk: "^5.4.1",
|
|
2475
|
+
"change-case": "^5.4.4",
|
|
2476
|
+
"chroma-js": "^3.1.2",
|
|
2477
|
+
"colorjs.io": "^0.6.0-alpha.1",
|
|
2478
|
+
commander: "^13.1.0",
|
|
2479
|
+
"fast-glob": "^3.3.3",
|
|
2480
|
+
hsluv: "^1.0.1",
|
|
2481
|
+
"object-hash": "^3.0.0",
|
|
2482
|
+
postcss: "^8.5.5",
|
|
2483
|
+
ramda: "^0.30.1",
|
|
2484
|
+
"style-dictionary": "^4.4.0",
|
|
2485
|
+
zod: "^3.25.64",
|
|
2486
|
+
"zod-validation-error": "^3.5.0"
|
|
2487
|
+
},
|
|
2488
|
+
devDependencies: {
|
|
2489
|
+
"@tokens-studio/types": "0.5.2",
|
|
2490
|
+
"@types/apca-w3": "^0.1.3",
|
|
2491
|
+
"@types/chroma-js": "^3.1.1",
|
|
2492
|
+
"@types/fs-extra": "^11.0.4",
|
|
2493
|
+
"@types/glob": "^8.1.0",
|
|
2494
|
+
"@types/node": "^22.15.31",
|
|
2495
|
+
"@types/object-hash": "^3.0.6",
|
|
2496
|
+
"@types/ramda": "^0.30.2",
|
|
2497
|
+
"fs-extra": "^11.3.0",
|
|
2498
|
+
tslib: "^2.8.1",
|
|
2499
|
+
tsup: "^8.5.0",
|
|
2500
|
+
tsx: "^4.20.3",
|
|
2501
|
+
typescript: "^5.8.3"
|
|
2502
|
+
}
|
|
2503
|
+
};
|
|
2504
|
+
|
|
2505
|
+
// src/tokens/process/output/theme.ts
|
|
2506
|
+
var defaultFileHeader = `build: v${package_default.version}`;
|
|
2507
|
+
var createThemeCSSFiles = ({
|
|
2508
|
+
processedBuilds,
|
|
2509
|
+
fileHeader: fileHeader2 = defaultFileHeader
|
|
2510
|
+
}) => {
|
|
2511
|
+
const groupedByTheme = {};
|
|
2512
|
+
for (const [_, buildResults] of Object.entries(R7.dissoc("types", processedBuilds))) {
|
|
2513
|
+
for (const buildResult of buildResults) {
|
|
2514
|
+
const themeName = buildResult.permutation.theme;
|
|
2515
|
+
const newOutputs = buildResult.formatted;
|
|
2516
|
+
if (R7.isNotEmpty(newOutputs)) {
|
|
2517
|
+
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
2518
|
+
groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
|
|
2519
|
+
}
|
|
2405
2520
|
}
|
|
2521
|
+
}
|
|
2522
|
+
const sortOrder = [
|
|
2523
|
+
"color-scheme/light",
|
|
2524
|
+
"typography/secondary",
|
|
2525
|
+
"semantic",
|
|
2526
|
+
"color-scheme/dark",
|
|
2527
|
+
"color-scheme/contrast",
|
|
2528
|
+
"typography/primary",
|
|
2529
|
+
"color/"
|
|
2406
2530
|
];
|
|
2407
|
-
|
|
2531
|
+
const sortByDefinedOrder = R7.sortBy((file) => {
|
|
2532
|
+
const filePath = file.destination || "";
|
|
2533
|
+
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
2534
|
+
if (sortElement.endsWith("/")) {
|
|
2535
|
+
return filePath.includes(sortElement);
|
|
2536
|
+
}
|
|
2537
|
+
return filePath.includes(`${sortElement}.css`);
|
|
2538
|
+
});
|
|
2539
|
+
if (sortIndex === -1) {
|
|
2540
|
+
console.error(
|
|
2541
|
+
chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
2542
|
+
);
|
|
2543
|
+
console.log(
|
|
2544
|
+
chalk.dim(
|
|
2545
|
+
`
|
|
2546
|
+
The section will currently be added to the end of the entry file, but the exact
|
|
2547
|
+
order may change due to nondeterminism.`.trim()
|
|
2548
|
+
)
|
|
2549
|
+
);
|
|
2550
|
+
return Infinity;
|
|
2551
|
+
}
|
|
2552
|
+
return sortIndex;
|
|
2553
|
+
});
|
|
2554
|
+
const header = `@charset "UTF-8";
|
|
2555
|
+
/*
|
|
2556
|
+
${fileHeader2}
|
|
2557
|
+
*/
|
|
2558
|
+
|
|
2559
|
+
`;
|
|
2560
|
+
const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
|
|
2561
|
+
const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
|
|
2562
|
+
const themeCSSFile = R7.pipe(
|
|
2563
|
+
sortAlphabetically,
|
|
2564
|
+
sortByDefinedOrder,
|
|
2565
|
+
pickOutputs,
|
|
2566
|
+
R7.join("\n"),
|
|
2567
|
+
(content) => header + content
|
|
2568
|
+
);
|
|
2569
|
+
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
2570
|
+
destination: `${theme}.css`,
|
|
2571
|
+
output: themeCSSFile(files)
|
|
2572
|
+
}));
|
|
2573
|
+
return themeCSSFiles;
|
|
2574
|
+
};
|
|
2408
2575
|
|
|
2409
2576
|
// src/tokens/process/platform.ts
|
|
2410
|
-
import
|
|
2411
|
-
import * as
|
|
2577
|
+
import chalk3 from "chalk";
|
|
2578
|
+
import * as R19 from "ramda";
|
|
2412
2579
|
import StyleDictionary2 from "style-dictionary";
|
|
2413
2580
|
|
|
2414
2581
|
// src/tokens/types.ts
|
|
@@ -2419,30 +2586,30 @@ var colorCategories = {
|
|
|
2419
2586
|
|
|
2420
2587
|
// src/tokens/process/configs.ts
|
|
2421
2588
|
import { register } from "@tokens-studio/sd-transforms";
|
|
2422
|
-
import * as
|
|
2589
|
+
import * as R18 from "ramda";
|
|
2423
2590
|
import StyleDictionary from "style-dictionary";
|
|
2424
2591
|
|
|
2425
2592
|
// src/tokens/utils.ts
|
|
2426
|
-
import * as
|
|
2427
|
-
var mapToLowerCase =
|
|
2428
|
-
var hasAnyTruth =
|
|
2593
|
+
import * as R8 from "ramda";
|
|
2594
|
+
var mapToLowerCase = R8.map(R8.toLower);
|
|
2595
|
+
var hasAnyTruth = R8.any(R8.equals(true));
|
|
2429
2596
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
2430
2597
|
var getValue = (token) => token.$value ?? token.value;
|
|
2431
|
-
var typeEquals =
|
|
2598
|
+
var typeEquals = R8.curry(
|
|
2432
2599
|
(types, token) => {
|
|
2433
|
-
if (
|
|
2600
|
+
if (R8.isNil(token)) {
|
|
2434
2601
|
return false;
|
|
2435
2602
|
}
|
|
2436
|
-
return
|
|
2603
|
+
return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
|
|
2437
2604
|
}
|
|
2438
2605
|
);
|
|
2439
|
-
var pathStartsWithOneOf =
|
|
2606
|
+
var pathStartsWithOneOf = R8.curry(
|
|
2440
2607
|
(paths, token) => {
|
|
2441
|
-
if (
|
|
2608
|
+
if (R8.isNil(token)) {
|
|
2442
2609
|
return false;
|
|
2443
2610
|
}
|
|
2444
2611
|
const tokenPath = mapToLowerCase(token.path);
|
|
2445
|
-
const matchPathsStartingWith =
|
|
2612
|
+
const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
2446
2613
|
return hasAnyTruth(matchPathsStartingWith);
|
|
2447
2614
|
}
|
|
2448
2615
|
);
|
|
@@ -2450,7 +2617,7 @@ function isSemanticToken(token) {
|
|
|
2450
2617
|
return token.filePath.includes("semantic/");
|
|
2451
2618
|
}
|
|
2452
2619
|
function isSemanticColorToken(token, color) {
|
|
2453
|
-
return token.filePath.includes("semantic/") &&
|
|
2620
|
+
return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
|
|
2454
2621
|
}
|
|
2455
2622
|
function isGlobalColorToken(token) {
|
|
2456
2623
|
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
@@ -2461,7 +2628,7 @@ function isColorCategoryToken(token, category) {
|
|
|
2461
2628
|
(colorCategory2) => isColorCategoryToken(token, colorCategory2)
|
|
2462
2629
|
);
|
|
2463
2630
|
}
|
|
2464
|
-
return
|
|
2631
|
+
return R8.startsWith(["color", category], token.path);
|
|
2465
2632
|
}
|
|
2466
2633
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
2467
2634
|
function traverseObj(obj, fn) {
|
|
@@ -2477,7 +2644,7 @@ function traverseObj(obj, fn) {
|
|
|
2477
2644
|
return obj;
|
|
2478
2645
|
}
|
|
2479
2646
|
function inlineTokens(shouldInline, tokens) {
|
|
2480
|
-
const [inlineableTokens, otherTokens] =
|
|
2647
|
+
const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
|
|
2481
2648
|
return otherTokens.map((token) => {
|
|
2482
2649
|
let transformed = getValue(token.original);
|
|
2483
2650
|
for (const ref of inlineableTokens) {
|
|
@@ -2486,16 +2653,16 @@ function inlineTokens(shouldInline, tokens) {
|
|
|
2486
2653
|
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
2487
2654
|
}
|
|
2488
2655
|
}
|
|
2489
|
-
const tokenWithInlinedRefs =
|
|
2656
|
+
const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
|
|
2490
2657
|
return tokenWithInlinedRefs;
|
|
2491
2658
|
});
|
|
2492
2659
|
}
|
|
2493
2660
|
|
|
2494
2661
|
// src/tokens/process/configs/color.ts
|
|
2495
|
-
import * as
|
|
2662
|
+
import * as R13 from "ramda";
|
|
2496
2663
|
|
|
2497
2664
|
// src/tokens/process/formats/css/color.ts
|
|
2498
|
-
import * as
|
|
2665
|
+
import * as R9 from "ramda";
|
|
2499
2666
|
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
2500
2667
|
var prefersColorScheme = (colorScheme2, content) => `
|
|
2501
2668
|
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
@@ -2504,7 +2671,7 @@ var prefersColorScheme = (colorScheme2, content) => `
|
|
|
2504
2671
|
`;
|
|
2505
2672
|
var colorScheme = {
|
|
2506
2673
|
name: "ds/css-colorscheme",
|
|
2507
|
-
format: async ({ dictionary,
|
|
2674
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2508
2675
|
const { allTokens } = dictionary;
|
|
2509
2676
|
const { outputReferences, usesDtcg } = options;
|
|
2510
2677
|
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
@@ -2519,8 +2686,8 @@ var colorScheme = {
|
|
|
2519
2686
|
color-scheme: ${colorScheme_};
|
|
2520
2687
|
` : "";
|
|
2521
2688
|
const filteredAllTokens = allTokens.filter(
|
|
2522
|
-
|
|
2523
|
-
|
|
2689
|
+
R9.allPass([
|
|
2690
|
+
R9.anyPass([
|
|
2524
2691
|
// Include semantic tokens in the output
|
|
2525
2692
|
isSemanticToken,
|
|
2526
2693
|
// Include global color tokens
|
|
@@ -2536,7 +2703,7 @@ ${formattedTokens}
|
|
|
2536
2703
|
${colorSchemeProperty}}
|
|
2537
2704
|
`;
|
|
2538
2705
|
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
2539
|
-
const body =
|
|
2706
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2540
2707
|
${selector} ${content} ${autoSelectorContent}
|
|
2541
2708
|
}
|
|
2542
2709
|
` : `${selector} ${content} ${autoSelectorContent}
|
|
@@ -2546,10 +2713,10 @@ ${selector} ${content} ${autoSelectorContent}
|
|
|
2546
2713
|
};
|
|
2547
2714
|
var colorCategory = {
|
|
2548
2715
|
name: "ds/css-colorcategory",
|
|
2549
|
-
format: async ({ dictionary,
|
|
2716
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2550
2717
|
const { outputReferences, usesDtcg } = options;
|
|
2551
2718
|
const { selector, layer } = platform;
|
|
2552
|
-
const format =
|
|
2719
|
+
const format = R9.compose(
|
|
2553
2720
|
createPropertyFormatter({
|
|
2554
2721
|
outputReferences,
|
|
2555
2722
|
dictionary,
|
|
@@ -2570,7 +2737,7 @@ var colorCategory = {
|
|
|
2570
2737
|
${formattedTokens}
|
|
2571
2738
|
}
|
|
2572
2739
|
`;
|
|
2573
|
-
const body =
|
|
2740
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2574
2741
|
${selector} ${content}
|
|
2575
2742
|
}
|
|
2576
2743
|
` : `${selector} ${content}
|
|
@@ -2580,16 +2747,16 @@ ${selector} ${content}
|
|
|
2580
2747
|
};
|
|
2581
2748
|
|
|
2582
2749
|
// src/tokens/process/formats/css/semantic.ts
|
|
2583
|
-
import * as
|
|
2750
|
+
import * as R10 from "ramda";
|
|
2584
2751
|
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
2585
2752
|
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
2586
2753
|
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
2587
2754
|
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
2588
|
-
var isInlineTokens =
|
|
2755
|
+
var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
2589
2756
|
var overrideSizingFormula = (format, token) => {
|
|
2590
2757
|
const [name, value] = format(token).split(":");
|
|
2591
2758
|
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
2592
|
-
const round = `round(down, ${calc},
|
|
2759
|
+
const round = `round(down, ${calc}, 1px)`;
|
|
2593
2760
|
return {
|
|
2594
2761
|
name,
|
|
2595
2762
|
round,
|
|
@@ -2597,7 +2764,7 @@ var overrideSizingFormula = (format, token) => {
|
|
|
2597
2764
|
};
|
|
2598
2765
|
};
|
|
2599
2766
|
var formatSizingTokens = (format, tokens) => {
|
|
2600
|
-
const { round, calc } =
|
|
2767
|
+
const { round, calc } = R10.reduce(
|
|
2601
2768
|
(acc, token) => {
|
|
2602
2769
|
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
2603
2770
|
return {
|
|
@@ -2617,7 +2784,7 @@ ${round.join("\n")}
|
|
|
2617
2784
|
};
|
|
2618
2785
|
var semantic = {
|
|
2619
2786
|
name: "ds/css-semantic",
|
|
2620
|
-
format: async ({ dictionary,
|
|
2787
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2621
2788
|
const { outputReferences, usesDtcg } = options;
|
|
2622
2789
|
const { selector, layer } = platform;
|
|
2623
2790
|
const format = createPropertyFormatter2({
|
|
@@ -2627,17 +2794,17 @@ var semantic = {
|
|
|
2627
2794
|
usesDtcg
|
|
2628
2795
|
});
|
|
2629
2796
|
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
2630
|
-
const filteredTokens =
|
|
2631
|
-
const [sizingTokens, restTokens] =
|
|
2797
|
+
const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
2798
|
+
const [sizingTokens, restTokens] = R10.partition(
|
|
2632
2799
|
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
2633
2800
|
filteredTokens
|
|
2634
2801
|
);
|
|
2635
|
-
const formattedTokens = [
|
|
2802
|
+
const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
2636
2803
|
const content = `{
|
|
2637
2804
|
${formattedTokens.join("\n")}
|
|
2638
2805
|
}
|
|
2639
2806
|
`;
|
|
2640
|
-
const body =
|
|
2807
|
+
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
2641
2808
|
${selector} ${content}
|
|
2642
2809
|
}
|
|
2643
2810
|
` : `${selector} ${content}
|
|
@@ -2647,15 +2814,15 @@ ${selector} ${content}
|
|
|
2647
2814
|
};
|
|
2648
2815
|
|
|
2649
2816
|
// src/tokens/process/formats/css/typography.ts
|
|
2650
|
-
import * as
|
|
2817
|
+
import * as R11 from "ramda";
|
|
2651
2818
|
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
2652
|
-
var typographyFontFamilyPredicate =
|
|
2653
|
-
|
|
2654
|
-
|
|
2819
|
+
var typographyFontFamilyPredicate = R11.allPass([
|
|
2820
|
+
R11.pathSatisfies(R11.includes("typography"), ["path"]),
|
|
2821
|
+
R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
|
|
2655
2822
|
]);
|
|
2656
2823
|
var typography = {
|
|
2657
2824
|
name: "ds/css-typography",
|
|
2658
|
-
format: async ({ dictionary,
|
|
2825
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2659
2826
|
const { outputReferences, usesDtcg } = options;
|
|
2660
2827
|
const { selector, layer } = platform;
|
|
2661
2828
|
const format = createPropertyFormatter3({
|
|
@@ -2664,12 +2831,12 @@ var typography = {
|
|
|
2664
2831
|
format: "css",
|
|
2665
2832
|
usesDtcg
|
|
2666
2833
|
});
|
|
2667
|
-
const filteredTokens =
|
|
2668
|
-
const formattedTokens =
|
|
2834
|
+
const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
2835
|
+
const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
|
|
2669
2836
|
const content = selector ? `${selector} {
|
|
2670
2837
|
${formattedTokens}
|
|
2671
2838
|
}` : formattedTokens;
|
|
2672
|
-
const body =
|
|
2839
|
+
const body = R11.isNotNil(layer) ? `@layer ${layer} {
|
|
2673
2840
|
${content}
|
|
2674
2841
|
}` : content;
|
|
2675
2842
|
return body;
|
|
@@ -2686,8 +2853,8 @@ var formats = {
|
|
|
2686
2853
|
|
|
2687
2854
|
// src/tokens/process/transformers.ts
|
|
2688
2855
|
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
2689
|
-
import * as
|
|
2690
|
-
var isPx =
|
|
2856
|
+
import * as R12 from "ramda";
|
|
2857
|
+
var isPx = R12.test(/\b\d+px\b/g);
|
|
2691
2858
|
var sizeRem = {
|
|
2692
2859
|
name: "ds/size/toRem",
|
|
2693
2860
|
type: "value",
|
|
@@ -2777,7 +2944,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
|
|
|
2777
2944
|
{
|
|
2778
2945
|
destination: `color-scheme/${colorScheme2}.css`,
|
|
2779
2946
|
format: formats.colorScheme.name,
|
|
2780
|
-
filter: (token) => typeEquals("color", token) && !
|
|
2947
|
+
filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
|
|
2781
2948
|
}
|
|
2782
2949
|
],
|
|
2783
2950
|
options: {
|
|
@@ -2828,7 +2995,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
|
|
|
2828
2995
|
};
|
|
2829
2996
|
|
|
2830
2997
|
// src/tokens/process/configs/semantic.ts
|
|
2831
|
-
import * as
|
|
2998
|
+
import * as R14 from "ramda";
|
|
2832
2999
|
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
2833
3000
|
var semanticVariables = ({ theme }) => {
|
|
2834
3001
|
const selector = `:root`;
|
|
@@ -2851,8 +3018,8 @@ var semanticVariables = ({ theme }) => {
|
|
|
2851
3018
|
destination: `semantic.css`,
|
|
2852
3019
|
format: formats.semantic.name,
|
|
2853
3020
|
filter: (token) => {
|
|
2854
|
-
const isUwantedToken =
|
|
2855
|
-
const isPrivateToken =
|
|
3021
|
+
const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
|
|
3022
|
+
const isPrivateToken = R14.includes("_", token.path);
|
|
2856
3023
|
const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
|
|
2857
3024
|
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
2858
3025
|
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
@@ -2873,20 +3040,20 @@ var semanticVariables = ({ theme }) => {
|
|
|
2873
3040
|
};
|
|
2874
3041
|
|
|
2875
3042
|
// src/tokens/process/configs/storefront.ts
|
|
2876
|
-
import * as
|
|
3043
|
+
import * as R16 from "ramda";
|
|
2877
3044
|
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
2878
3045
|
|
|
2879
3046
|
// src/tokens/process/formats/js-tokens.ts
|
|
2880
|
-
import * as
|
|
3047
|
+
import * as R15 from "ramda";
|
|
2881
3048
|
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
2882
|
-
var groupByType =
|
|
2883
|
-
var removeUnwatedTokens =
|
|
2884
|
-
|
|
2885
|
-
|
|
3049
|
+
var groupByType = R15.groupBy((token) => getType(token));
|
|
3050
|
+
var removeUnwatedTokens = R15.pipe(
|
|
3051
|
+
R15.reject((token) => isColorCategoryToken(token)),
|
|
3052
|
+
R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
|
|
2886
3053
|
);
|
|
2887
|
-
var dissocExtensions =
|
|
2888
|
-
var removeUnwatedProps =
|
|
2889
|
-
var toCssVarName =
|
|
3054
|
+
var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
|
|
3055
|
+
var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
|
|
3056
|
+
var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
|
|
2890
3057
|
var jsTokens = {
|
|
2891
3058
|
name: "ds/js-tokens",
|
|
2892
3059
|
format: async ({ dictionary, file, options }) => {
|
|
@@ -2897,7 +3064,7 @@ var jsTokens = {
|
|
|
2897
3064
|
format: "css",
|
|
2898
3065
|
usesDtcg
|
|
2899
3066
|
});
|
|
2900
|
-
const formatTokens2 =
|
|
3067
|
+
const formatTokens2 = R15.map((token) => {
|
|
2901
3068
|
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
2902
3069
|
const { calc, name } = overrideSizingFormula(format, token);
|
|
2903
3070
|
return {
|
|
@@ -2911,7 +3078,7 @@ var jsTokens = {
|
|
|
2911
3078
|
name: toCssVarName(format(token))
|
|
2912
3079
|
};
|
|
2913
3080
|
});
|
|
2914
|
-
const processTokens =
|
|
3081
|
+
const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
|
|
2915
3082
|
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
2916
3083
|
const content = Object.entries(tokens).map(
|
|
2917
3084
|
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
@@ -2936,9 +3103,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
|
2936
3103
|
destination: `${colorScheme2}.ts`,
|
|
2937
3104
|
format: jsTokens.name,
|
|
2938
3105
|
filter: (token) => {
|
|
2939
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !
|
|
3106
|
+
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
|
|
2940
3107
|
return false;
|
|
2941
|
-
const isSemanticColor =
|
|
3108
|
+
const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
2942
3109
|
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
2943
3110
|
return isSemanticColor || wantedTypes;
|
|
2944
3111
|
}
|
|
@@ -3004,19 +3171,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3004
3171
|
};
|
|
3005
3172
|
|
|
3006
3173
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3007
|
-
import
|
|
3174
|
+
import chalk2 from "chalk";
|
|
3008
3175
|
import { kebabCase } from "change-case";
|
|
3009
|
-
import * as
|
|
3176
|
+
import * as R17 from "ramda";
|
|
3010
3177
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3011
3178
|
const verboseLogging = buildOptions?.verbose;
|
|
3012
3179
|
const grouped$themes = groupThemes(processed$themes);
|
|
3013
3180
|
const permutations = permutateThemes(grouped$themes);
|
|
3014
3181
|
const ALL_DEPENDENT_ON = ["theme"];
|
|
3015
|
-
const keys2 =
|
|
3182
|
+
const keys2 = R17.keys(grouped$themes);
|
|
3016
3183
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
3017
3184
|
if (verboseLogging) {
|
|
3018
|
-
console.log(
|
|
3019
|
-
console.log(
|
|
3185
|
+
console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
3186
|
+
console.log(chalk2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
3020
3187
|
}
|
|
3021
3188
|
return permutations.filter((val) => {
|
|
3022
3189
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -3052,7 +3219,7 @@ function groupThemes(themes) {
|
|
|
3052
3219
|
}
|
|
3053
3220
|
return groups;
|
|
3054
3221
|
}
|
|
3055
|
-
var hasUnknownProps =
|
|
3222
|
+
var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
|
|
3056
3223
|
function permutateThemes(groups) {
|
|
3057
3224
|
const separator = "_";
|
|
3058
3225
|
const permutations = cartesian(Object.values(groups));
|
|
@@ -3062,8 +3229,8 @@ function permutateThemes(groups) {
|
|
|
3062
3229
|
const { group, name, selectedTokenSets } = theme;
|
|
3063
3230
|
let updatedPermutation = acc.permutation;
|
|
3064
3231
|
if (group) {
|
|
3065
|
-
const groupProp =
|
|
3066
|
-
updatedPermutation =
|
|
3232
|
+
const groupProp = R17.lensProp(group);
|
|
3233
|
+
updatedPermutation = R17.set(groupProp, name, updatedPermutation);
|
|
3067
3234
|
}
|
|
3068
3235
|
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
3069
3236
|
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
|
@@ -3147,7 +3314,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
3147
3314
|
obj.filePath = tokenSet;
|
|
3148
3315
|
}
|
|
3149
3316
|
});
|
|
3150
|
-
tokenSource.tokens =
|
|
3317
|
+
tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
3151
3318
|
}
|
|
3152
3319
|
}
|
|
3153
3320
|
} else {
|
|
@@ -3244,35 +3411,35 @@ async function processPlatform(options) {
|
|
|
3244
3411
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
3245
3412
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
3246
3413
|
console.warn(
|
|
3247
|
-
|
|
3414
|
+
chalk3.yellow(
|
|
3248
3415
|
`
|
|
3249
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
3416
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
3250
3417
|
)
|
|
3251
3418
|
);
|
|
3252
3419
|
}
|
|
3253
3420
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
3254
3421
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
3255
3422
|
console.warn(
|
|
3256
|
-
|
|
3423
|
+
chalk3.yellow(
|
|
3257
3424
|
`
|
|
3258
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
3425
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
3259
3426
|
)
|
|
3260
3427
|
);
|
|
3261
3428
|
}
|
|
3262
3429
|
const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
|
|
3263
3430
|
buildOptions = options;
|
|
3264
3431
|
buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
|
|
3265
|
-
const processed$themes = $themes.map(processThemeObject).filter((theme) =>
|
|
3432
|
+
const processed$themes = $themes.map(processThemeObject).filter((theme) => R19.not(theme.group === "size" && theme.name !== "medium"));
|
|
3266
3433
|
const customColors = getCustomColors(processed$themes, colorGroups);
|
|
3267
3434
|
if (!buildOptions.defaultColor) {
|
|
3268
|
-
const firstMainColor =
|
|
3435
|
+
const firstMainColor = R19.head(customColors);
|
|
3269
3436
|
buildOptions.defaultColor = firstMainColor;
|
|
3270
3437
|
}
|
|
3271
3438
|
if (buildOptions.defaultColor) {
|
|
3272
3439
|
console.log(`
|
|
3273
|
-
\u{1F3A8} Using ${
|
|
3440
|
+
\u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
|
|
3274
3441
|
}
|
|
3275
|
-
const buildAndSdConfigs =
|
|
3442
|
+
const buildAndSdConfigs = R19.map((buildConfig) => {
|
|
3276
3443
|
const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
|
|
3277
3444
|
tokensDir,
|
|
3278
3445
|
tokenSets
|
|
@@ -3304,19 +3471,19 @@ async function processPlatform(options) {
|
|
|
3304
3471
|
types: [initResult]
|
|
3305
3472
|
};
|
|
3306
3473
|
try {
|
|
3307
|
-
for (const [buildName, { buildConfig, sdConfigs }] of
|
|
3474
|
+
for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
|
|
3308
3475
|
if (!(buildConfig.enabled?.() ?? true)) {
|
|
3309
3476
|
continue;
|
|
3310
3477
|
}
|
|
3311
3478
|
if (sdConfigs.length > 0) {
|
|
3312
3479
|
console.log(`
|
|
3313
|
-
\u{1F371} Building ${
|
|
3480
|
+
\u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
|
|
3314
3481
|
const results = await Promise.all(
|
|
3315
3482
|
sdConfigs.map(async (sdConfig) => {
|
|
3316
3483
|
const { config, permutation } = sdConfig;
|
|
3317
3484
|
const modes = ["theme", ...buildConfig.dimensions];
|
|
3318
3485
|
const modeMessage = modes.map((x) => permutation[x]).join(" - ");
|
|
3319
|
-
const logMessage =
|
|
3486
|
+
const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
|
|
3320
3487
|
console.log(logMessage);
|
|
3321
3488
|
const sdOptions = { cache: true };
|
|
3322
3489
|
const sdExtended = await sd.extend(config);
|
|
@@ -3348,7 +3515,7 @@ async function processPlatform(options) {
|
|
|
3348
3515
|
}
|
|
3349
3516
|
async function createColorTypeDeclaration(colors) {
|
|
3350
3517
|
console.log(`
|
|
3351
|
-
\u{1F371} Building ${
|
|
3518
|
+
\u{1F371} Building ${chalk3.green("type declarations")}`);
|
|
3352
3519
|
const typeDeclaration = `
|
|
3353
3520
|
import type {} from '@digdir/designsystemet-react/colors';
|
|
3354
3521
|
|
|
@@ -3361,174 +3528,6 @@ ${colors.map((color) => ` ${color}: never;`).join("\n")}
|
|
|
3361
3528
|
return typeDeclaration;
|
|
3362
3529
|
}
|
|
3363
3530
|
|
|
3364
|
-
// src/tokens/process/theme.ts
|
|
3365
|
-
import * as R19 from "ramda";
|
|
3366
|
-
import chalk3 from "chalk";
|
|
3367
|
-
|
|
3368
|
-
// package.json
|
|
3369
|
-
var package_default = {
|
|
3370
|
-
name: "@digdir/designsystemet",
|
|
3371
|
-
version: "1.0.8",
|
|
3372
|
-
description: "CLI for Designsystemet",
|
|
3373
|
-
author: "Designsystemet team",
|
|
3374
|
-
engines: {
|
|
3375
|
-
node: ">=22.16.0"
|
|
3376
|
-
},
|
|
3377
|
-
repository: {
|
|
3378
|
-
type: "git",
|
|
3379
|
-
url: "git+https://github.com/digdir/designsystemet.git"
|
|
3380
|
-
},
|
|
3381
|
-
homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
|
|
3382
|
-
license: "MIT",
|
|
3383
|
-
type: "module",
|
|
3384
|
-
main: "./dist/src/index.js",
|
|
3385
|
-
files: [
|
|
3386
|
-
"./dist/**",
|
|
3387
|
-
"./configs/**"
|
|
3388
|
-
],
|
|
3389
|
-
bin: "dist/bin/designsystemet.js",
|
|
3390
|
-
exports: {
|
|
3391
|
-
".": {
|
|
3392
|
-
import: "./dist/src/index.js"
|
|
3393
|
-
},
|
|
3394
|
-
"./color": {
|
|
3395
|
-
import: "./dist/src/colors/index.js"
|
|
3396
|
-
},
|
|
3397
|
-
"./tokens": {
|
|
3398
|
-
import: "./dist/src/tokens/index.js"
|
|
3399
|
-
}
|
|
3400
|
-
},
|
|
3401
|
-
publishConfig: {
|
|
3402
|
-
access: "public"
|
|
3403
|
-
},
|
|
3404
|
-
scripts: {
|
|
3405
|
-
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
3406
|
-
"build:tokens": "pnpm run designsystemet tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
|
|
3407
|
-
"build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../internal/design-tokens -o ../../packages/theme/brand --clean",
|
|
3408
|
-
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
3409
|
-
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
3410
|
-
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
3411
|
-
types: "tsc --noEmit",
|
|
3412
|
-
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
3413
|
-
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
3414
|
-
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
3415
|
-
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
3416
|
-
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
3417
|
-
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
3418
|
-
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
3419
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
3420
|
-
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
3421
|
-
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
|
|
3422
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
3423
|
-
},
|
|
3424
|
-
dependencies: {
|
|
3425
|
-
"@commander-js/extra-typings": "^13.1.0",
|
|
3426
|
-
"@tokens-studio/sd-transforms": "1.3.0",
|
|
3427
|
-
"apca-w3": "^0.1.9",
|
|
3428
|
-
chalk: "^5.4.1",
|
|
3429
|
-
"change-case": "^5.4.4",
|
|
3430
|
-
"chroma-js": "^3.1.2",
|
|
3431
|
-
"colorjs.io": "^0.6.0-alpha.1",
|
|
3432
|
-
commander: "^13.1.0",
|
|
3433
|
-
"fast-glob": "^3.3.3",
|
|
3434
|
-
hsluv: "^1.0.1",
|
|
3435
|
-
"object-hash": "^3.0.0",
|
|
3436
|
-
postcss: "^8.5.3",
|
|
3437
|
-
ramda: "^0.30.1",
|
|
3438
|
-
"style-dictionary": "^4.4.0",
|
|
3439
|
-
zod: "^3.25.30",
|
|
3440
|
-
"zod-validation-error": "^3.4.1"
|
|
3441
|
-
},
|
|
3442
|
-
devDependencies: {
|
|
3443
|
-
"@tokens-studio/types": "0.5.2",
|
|
3444
|
-
"@types/apca-w3": "^0.1.3",
|
|
3445
|
-
"@types/chroma-js": "^3.1.1",
|
|
3446
|
-
"@types/fs-extra": "^11.0.4",
|
|
3447
|
-
"@types/glob": "^8.1.0",
|
|
3448
|
-
"@types/jscodeshift": "^0.12.0",
|
|
3449
|
-
"@types/node": "^22.15.21",
|
|
3450
|
-
"@types/object-hash": "^3.0.6",
|
|
3451
|
-
"@types/ramda": "^0.30.2",
|
|
3452
|
-
"fs-extra": "^11.3.0",
|
|
3453
|
-
"ts-toolbelt": "^9.6.0",
|
|
3454
|
-
tslib: "^2.8.1",
|
|
3455
|
-
tsup: "^8.5.0",
|
|
3456
|
-
tsx: "^4.19.4",
|
|
3457
|
-
typescript: "^5.8.3"
|
|
3458
|
-
}
|
|
3459
|
-
};
|
|
3460
|
-
|
|
3461
|
-
// src/tokens/process/theme.ts
|
|
3462
|
-
var defaultFileHeader = `build: v${package_default.version}`;
|
|
3463
|
-
var createThemeCSSFiles = ({
|
|
3464
|
-
processedBuilds,
|
|
3465
|
-
fileHeader: fileHeader2 = defaultFileHeader
|
|
3466
|
-
}) => {
|
|
3467
|
-
const groupedByTheme = {};
|
|
3468
|
-
for (const [_, buildResults] of Object.entries(R19.dissoc("types", processedBuilds))) {
|
|
3469
|
-
for (const buildResult of buildResults) {
|
|
3470
|
-
const themeName = buildResult.permutation.theme;
|
|
3471
|
-
const newOutputs = buildResult.formatted;
|
|
3472
|
-
if (R19.isNotEmpty(newOutputs)) {
|
|
3473
|
-
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
3474
|
-
groupedByTheme[themeName] = R19.concat(currentOutputs, newOutputs);
|
|
3475
|
-
}
|
|
3476
|
-
}
|
|
3477
|
-
}
|
|
3478
|
-
const sortOrder = [
|
|
3479
|
-
"color-scheme/light",
|
|
3480
|
-
"typography/secondary",
|
|
3481
|
-
"semantic",
|
|
3482
|
-
"color-scheme/dark",
|
|
3483
|
-
"color-scheme/contrast",
|
|
3484
|
-
"typography/primary",
|
|
3485
|
-
"color/"
|
|
3486
|
-
];
|
|
3487
|
-
const sortByDefinedOrder = R19.sortBy((file) => {
|
|
3488
|
-
const filePath = file.destination || "";
|
|
3489
|
-
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
3490
|
-
if (sortElement.endsWith("/")) {
|
|
3491
|
-
return filePath.includes(sortElement);
|
|
3492
|
-
}
|
|
3493
|
-
return filePath.includes(`${sortElement}.css`);
|
|
3494
|
-
});
|
|
3495
|
-
if (sortIndex === -1) {
|
|
3496
|
-
console.error(
|
|
3497
|
-
chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
3498
|
-
);
|
|
3499
|
-
console.log(
|
|
3500
|
-
chalk3.dim(
|
|
3501
|
-
`
|
|
3502
|
-
The section will currently be added to the end of the entry file, but the exact
|
|
3503
|
-
order may change due to nondeterminism.`.trim()
|
|
3504
|
-
)
|
|
3505
|
-
);
|
|
3506
|
-
return Infinity;
|
|
3507
|
-
}
|
|
3508
|
-
return sortIndex;
|
|
3509
|
-
});
|
|
3510
|
-
const header = `@charset "UTF-8";
|
|
3511
|
-
/*
|
|
3512
|
-
${fileHeader2}
|
|
3513
|
-
*/
|
|
3514
|
-
|
|
3515
|
-
`;
|
|
3516
|
-
const sortAlphabetically = R19.sort(R19.ascend((x) => x.destination || ""));
|
|
3517
|
-
const pickOutputs = R19.map(R19.view(R19.lensProp("output")));
|
|
3518
|
-
const themeCSSFile = R19.pipe(
|
|
3519
|
-
sortAlphabetically,
|
|
3520
|
-
sortByDefinedOrder,
|
|
3521
|
-
pickOutputs,
|
|
3522
|
-
R19.join("\n"),
|
|
3523
|
-
(content) => header + content
|
|
3524
|
-
);
|
|
3525
|
-
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
3526
|
-
destination: `${theme}.css`,
|
|
3527
|
-
output: themeCSSFile(files)
|
|
3528
|
-
}));
|
|
3529
|
-
return themeCSSFiles;
|
|
3530
|
-
};
|
|
3531
|
-
|
|
3532
3531
|
// src/tokens/format.ts
|
|
3533
3532
|
var formatTokens = async (options) => {
|
|
3534
3533
|
const processedBuilds = await processPlatform({
|