@digdir/designsystemet 1.0.8 → 1.1.1
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.d.ts +3 -3
- package/dist/bin/config.d.ts.map +1 -1
- package/dist/bin/config.js +45 -45
- package/dist/bin/designsystemet.js +827 -748
- package/dist/config.schema.json +4 -4
- 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 +6 -21
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +43 -40
- package/dist/src/index.js +418 -430
- package/dist/src/scripts/createJsonSchema.js +23 -24
- package/dist/src/scripts/update-template.d.ts.map +1 -1
- package/dist/src/tokens/build.d.ts +1 -1
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +359 -280
- package/dist/src/tokens/create/generators/$designsystemet.js +16 -15
- package/dist/src/tokens/create/generators/color.js +21 -21
- package/dist/src/tokens/create/write.js +17 -16
- 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 +931 -944
- 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 +295 -307
- 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/declarations.d.ts +4 -0
- package/dist/src/tokens/process/output/declarations.d.ts.map +1 -0
- package/dist/src/tokens/process/output/declarations.js +860 -0
- 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} +20 -19
- package/dist/src/tokens/process/platform.d.ts +8 -4
- package/dist/src/tokens/process/platform.d.ts.map +1 -1
- package/dist/src/tokens/process/platform.js +27 -56
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts +1 -0
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -1
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +12 -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 +16 -15
- package/dist/src/tokens/process/theme.d.ts.map +0 -1
|
@@ -1,36 +1,367 @@
|
|
|
1
1
|
// src/tokens/format.ts
|
|
2
2
|
import * as R20 from "ramda";
|
|
3
3
|
|
|
4
|
-
//
|
|
5
|
-
|
|
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 = {}));
|
|
6
10
|
|
|
7
|
-
//
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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"
|
|
13
201
|
},
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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"
|
|
17
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"
|
|
18
237
|
},
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
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
|
+
|
|
335
|
+
// src/tokens/create/defaults.ts
|
|
336
|
+
import * as R from "ramda";
|
|
337
|
+
|
|
338
|
+
// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
|
|
339
|
+
var globals_default = {
|
|
340
|
+
"border-width": {
|
|
341
|
+
"1": {
|
|
342
|
+
$type: "borderWidth",
|
|
343
|
+
$value: "1px"
|
|
344
|
+
},
|
|
345
|
+
"3": {
|
|
346
|
+
$type: "borderWidth",
|
|
347
|
+
$value: "3px"
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
shadow: {
|
|
351
|
+
"100": {
|
|
352
|
+
$type: "boxShadow",
|
|
353
|
+
$value: [
|
|
354
|
+
{
|
|
355
|
+
color: "rgba(0,0,0,0.16)",
|
|
356
|
+
x: "0",
|
|
357
|
+
y: "0",
|
|
358
|
+
blur: "1",
|
|
359
|
+
spread: "0"
|
|
360
|
+
},
|
|
361
|
+
{
|
|
362
|
+
x: "0",
|
|
363
|
+
y: "1",
|
|
364
|
+
blur: "2",
|
|
34
365
|
spread: "0",
|
|
35
366
|
color: "rgba(0,0,0,0.12)"
|
|
36
367
|
}
|
|
@@ -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;
|
|
@@ -1776,639 +2107,477 @@ var color_template_default2 = {
|
|
|
1776
2107
|
"base-hover": {
|
|
1777
2108
|
$type: "color",
|
|
1778
2109
|
$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}"
|
|
1961
|
-
},
|
|
1962
|
-
"14": {
|
|
1963
|
-
$type: "color",
|
|
1964
|
-
$value: "{<theme>.<color>.14}"
|
|
1965
|
-
},
|
|
1966
|
-
"15": {
|
|
1967
|
-
$type: "color",
|
|
1968
|
-
$value: "{<theme>.<color>.15}"
|
|
1969
|
-
},
|
|
1970
|
-
"16": {
|
|
1971
|
-
$type: "color",
|
|
1972
|
-
$value: "{<theme>.<color>.16}"
|
|
1973
|
-
}
|
|
1974
|
-
};
|
|
1975
|
-
|
|
1976
|
-
// src/tokens/create/generators/theme.ts
|
|
1977
|
-
var generateTheme = (colors, themeName, borderRadius) => {
|
|
1978
|
-
const mainColorNames = Object.keys(colors.main);
|
|
1979
|
-
const supportColorNames = Object.keys(colors.support);
|
|
1980
|
-
const customColors = [...mainColorNames, "neutral", ...supportColorNames];
|
|
1981
|
-
const themeColorTokens = Object.fromEntries(
|
|
1982
|
-
customColors.map(
|
|
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 = {}));
|
|
2214
|
-
|
|
2215
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
2216
|
-
var BoxShadowValues;
|
|
2217
|
-
(function(BoxShadowValues2) {
|
|
2218
|
-
BoxShadowValues2["TYPE"] = "type";
|
|
2219
|
-
BoxShadowValues2["COLOR"] = "color";
|
|
2220
|
-
BoxShadowValues2["X"] = "x";
|
|
2221
|
-
BoxShadowValues2["Y"] = "y";
|
|
2222
|
-
BoxShadowValues2["BLUR"] = "blur";
|
|
2223
|
-
BoxShadowValues2["SPREAD"] = "spread";
|
|
2224
|
-
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
2225
|
-
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
2226
|
-
|
|
2227
|
-
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
2228
|
-
var TypographyValues;
|
|
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 = {}));
|
|
2110
|
+
},
|
|
2111
|
+
"base-active": {
|
|
2112
|
+
$type: "color",
|
|
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
|
+
};
|
|
2240
2124
|
|
|
2241
|
-
// src/tokens/create/generators
|
|
2242
|
-
var
|
|
2243
|
-
|
|
2244
|
-
const
|
|
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)
|
|
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]
|
|
2259
2136
|
];
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
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
|
+
};
|
|
2178
|
+
|
|
2179
|
+
// src/tokens/create/generators/theme.ts
|
|
2180
|
+
import * as R6 from "ramda";
|
|
2181
|
+
|
|
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}"
|
|
2292
|
+
},
|
|
2293
|
+
"14": {
|
|
2294
|
+
$type: "color",
|
|
2295
|
+
$value: "{<theme>.<color>.14}"
|
|
2296
|
+
},
|
|
2297
|
+
"15": {
|
|
2298
|
+
$type: "color",
|
|
2299
|
+
$value: "{<theme>.<color>.15}"
|
|
2318
2300
|
},
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
|
|
2322
|
-
id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
|
|
2323
|
-
$figmaCollectionId: "VariableCollectionId:34811:5472",
|
|
2324
|
-
$figmaModeId: "34811:2"
|
|
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.1",
|
|
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
|
+
"designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
|
|
2452
|
+
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
2453
|
+
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
2454
|
+
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
2455
|
+
types: "tsc --noEmit",
|
|
2456
|
+
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
|
|
2457
|
+
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
|
|
2458
|
+
"test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
|
|
2459
|
+
"test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
|
|
2460
|
+
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2461
|
+
"test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
|
|
2462
|
+
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2463
|
+
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2464
|
+
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2465
|
+
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
2466
|
+
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2467
|
+
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2468
|
+
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2469
|
+
"update:theme-digdir": "pnpm digdir:tokens-create && tsx ./src/scripts/update-design-tokens.ts && pnpm digdir:tokens-build",
|
|
2470
|
+
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2471
|
+
},
|
|
2472
|
+
dependencies: {
|
|
2473
|
+
"@commander-js/extra-typings": "^14.0.0",
|
|
2474
|
+
"@tokens-studio/sd-transforms": "1.3.0",
|
|
2475
|
+
"apca-w3": "^0.1.9",
|
|
2476
|
+
chalk: "^5.4.1",
|
|
2477
|
+
"change-case": "^5.4.4",
|
|
2478
|
+
"chroma-js": "^3.1.2",
|
|
2479
|
+
"colorjs.io": "^0.6.0-alpha.1",
|
|
2480
|
+
commander: "^14.0.0",
|
|
2481
|
+
"fast-glob": "^3.3.3",
|
|
2482
|
+
hsluv: "^1.0.1",
|
|
2483
|
+
"object-hash": "^3.0.0",
|
|
2484
|
+
postcss: "^8.5.6",
|
|
2485
|
+
ramda: "^0.30.1",
|
|
2486
|
+
"style-dictionary": "^5.0.0",
|
|
2487
|
+
zod: "^3.25.67",
|
|
2488
|
+
"zod-validation-error": "^3.5.2"
|
|
2489
|
+
},
|
|
2490
|
+
devDependencies: {
|
|
2491
|
+
"@tokens-studio/types": "0.5.2",
|
|
2492
|
+
"@types/apca-w3": "^0.1.3",
|
|
2493
|
+
"@types/chroma-js": "^3.1.1",
|
|
2494
|
+
"@types/fs-extra": "^11.0.4",
|
|
2495
|
+
"@types/glob": "^8.1.0",
|
|
2496
|
+
"@types/node": "^22.15.32",
|
|
2497
|
+
"@types/object-hash": "^3.0.6",
|
|
2498
|
+
"@types/ramda": "^0.30.2",
|
|
2499
|
+
"fs-extra": "^11.3.0",
|
|
2500
|
+
tslib: "^2.8.1",
|
|
2501
|
+
tsup: "^8.5.0",
|
|
2502
|
+
tsx: "^4.20.3",
|
|
2503
|
+
typescript: "^5.8.3"
|
|
2504
|
+
}
|
|
2505
|
+
};
|
|
2506
|
+
|
|
2507
|
+
// src/tokens/process/output/theme.ts
|
|
2508
|
+
var defaultFileHeader = `build: v${package_default.version}`;
|
|
2509
|
+
var createThemeCSSFiles = ({
|
|
2510
|
+
processedBuilds,
|
|
2511
|
+
fileHeader: fileHeader2 = defaultFileHeader
|
|
2512
|
+
}) => {
|
|
2513
|
+
const groupedByTheme = {};
|
|
2514
|
+
for (const [_, buildResults] of Object.entries(processedBuilds)) {
|
|
2515
|
+
for (const buildResult of buildResults) {
|
|
2516
|
+
const themeName = buildResult.permutation.theme;
|
|
2517
|
+
const newOutputs = buildResult.formatted;
|
|
2518
|
+
if (R7.isNotEmpty(newOutputs)) {
|
|
2519
|
+
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
2520
|
+
groupedByTheme[themeName] = R7.concat(currentOutputs, newOutputs);
|
|
2521
|
+
}
|
|
2405
2522
|
}
|
|
2523
|
+
}
|
|
2524
|
+
const sortOrder = [
|
|
2525
|
+
"color-scheme/light",
|
|
2526
|
+
"typography/secondary",
|
|
2527
|
+
"semantic",
|
|
2528
|
+
"color-scheme/dark",
|
|
2529
|
+
"color-scheme/contrast",
|
|
2530
|
+
"typography/primary",
|
|
2531
|
+
"color/"
|
|
2406
2532
|
];
|
|
2407
|
-
|
|
2533
|
+
const sortByDefinedOrder = R7.sortBy((file) => {
|
|
2534
|
+
const filePath = file.destination || "";
|
|
2535
|
+
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
2536
|
+
if (sortElement.endsWith("/")) {
|
|
2537
|
+
return filePath.includes(sortElement);
|
|
2538
|
+
}
|
|
2539
|
+
return filePath.includes(`${sortElement}.css`);
|
|
2540
|
+
});
|
|
2541
|
+
if (sortIndex === -1) {
|
|
2542
|
+
console.error(
|
|
2543
|
+
chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
2544
|
+
);
|
|
2545
|
+
console.log(
|
|
2546
|
+
chalk.dim(
|
|
2547
|
+
`
|
|
2548
|
+
The section will currently be added to the end of the entry file, but the exact
|
|
2549
|
+
order may change due to nondeterminism.`.trim()
|
|
2550
|
+
)
|
|
2551
|
+
);
|
|
2552
|
+
return Infinity;
|
|
2553
|
+
}
|
|
2554
|
+
return sortIndex;
|
|
2555
|
+
});
|
|
2556
|
+
const header = `@charset "UTF-8";
|
|
2557
|
+
/*
|
|
2558
|
+
${fileHeader2}
|
|
2559
|
+
*/
|
|
2560
|
+
|
|
2561
|
+
`;
|
|
2562
|
+
const sortAlphabetically = R7.sort(R7.ascend((x) => x.destination || ""));
|
|
2563
|
+
const pickOutputs = R7.map(R7.view(R7.lensProp("output")));
|
|
2564
|
+
const themeCSSFile = R7.pipe(
|
|
2565
|
+
sortAlphabetically,
|
|
2566
|
+
sortByDefinedOrder,
|
|
2567
|
+
pickOutputs,
|
|
2568
|
+
R7.join("\n"),
|
|
2569
|
+
(content) => header + content
|
|
2570
|
+
);
|
|
2571
|
+
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
2572
|
+
destination: `${theme}.css`,
|
|
2573
|
+
output: themeCSSFile(files)
|
|
2574
|
+
}));
|
|
2575
|
+
return themeCSSFiles;
|
|
2576
|
+
};
|
|
2408
2577
|
|
|
2409
2578
|
// src/tokens/process/platform.ts
|
|
2410
|
-
import
|
|
2411
|
-
import * as
|
|
2579
|
+
import chalk3 from "chalk";
|
|
2580
|
+
import * as R19 from "ramda";
|
|
2412
2581
|
import StyleDictionary2 from "style-dictionary";
|
|
2413
2582
|
|
|
2414
2583
|
// src/tokens/types.ts
|
|
@@ -2419,30 +2588,30 @@ var colorCategories = {
|
|
|
2419
2588
|
|
|
2420
2589
|
// src/tokens/process/configs.ts
|
|
2421
2590
|
import { register } from "@tokens-studio/sd-transforms";
|
|
2422
|
-
import * as
|
|
2591
|
+
import * as R18 from "ramda";
|
|
2423
2592
|
import StyleDictionary from "style-dictionary";
|
|
2424
2593
|
|
|
2425
2594
|
// src/tokens/utils.ts
|
|
2426
|
-
import * as
|
|
2427
|
-
var mapToLowerCase =
|
|
2428
|
-
var hasAnyTruth =
|
|
2595
|
+
import * as R8 from "ramda";
|
|
2596
|
+
var mapToLowerCase = R8.map(R8.toLower);
|
|
2597
|
+
var hasAnyTruth = R8.any(R8.equals(true));
|
|
2429
2598
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
2430
2599
|
var getValue = (token) => token.$value ?? token.value;
|
|
2431
|
-
var typeEquals =
|
|
2600
|
+
var typeEquals = R8.curry(
|
|
2432
2601
|
(types, token) => {
|
|
2433
|
-
if (
|
|
2602
|
+
if (R8.isNil(token)) {
|
|
2434
2603
|
return false;
|
|
2435
2604
|
}
|
|
2436
|
-
return
|
|
2605
|
+
return R8.includes(R8.toLower(getType(token)), R8.map(R8.toLower, Array.isArray(types) ? types : [types]));
|
|
2437
2606
|
}
|
|
2438
2607
|
);
|
|
2439
|
-
var pathStartsWithOneOf =
|
|
2608
|
+
var pathStartsWithOneOf = R8.curry(
|
|
2440
2609
|
(paths, token) => {
|
|
2441
|
-
if (
|
|
2610
|
+
if (R8.isNil(token)) {
|
|
2442
2611
|
return false;
|
|
2443
2612
|
}
|
|
2444
2613
|
const tokenPath = mapToLowerCase(token.path);
|
|
2445
|
-
const matchPathsStartingWith =
|
|
2614
|
+
const matchPathsStartingWith = R8.map((path) => R8.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
2446
2615
|
return hasAnyTruth(matchPathsStartingWith);
|
|
2447
2616
|
}
|
|
2448
2617
|
);
|
|
@@ -2450,7 +2619,7 @@ function isSemanticToken(token) {
|
|
|
2450
2619
|
return token.filePath.includes("semantic/");
|
|
2451
2620
|
}
|
|
2452
2621
|
function isSemanticColorToken(token, color) {
|
|
2453
|
-
return token.filePath.includes("semantic/") &&
|
|
2622
|
+
return token.filePath.includes("semantic/") && R8.startsWith(["color", color], token.path);
|
|
2454
2623
|
}
|
|
2455
2624
|
function isGlobalColorToken(token) {
|
|
2456
2625
|
return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
|
|
@@ -2461,7 +2630,7 @@ function isColorCategoryToken(token, category) {
|
|
|
2461
2630
|
(colorCategory2) => isColorCategoryToken(token, colorCategory2)
|
|
2462
2631
|
);
|
|
2463
2632
|
}
|
|
2464
|
-
return
|
|
2633
|
+
return R8.startsWith(["color", category], token.path);
|
|
2465
2634
|
}
|
|
2466
2635
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
2467
2636
|
function traverseObj(obj, fn) {
|
|
@@ -2477,7 +2646,7 @@ function traverseObj(obj, fn) {
|
|
|
2477
2646
|
return obj;
|
|
2478
2647
|
}
|
|
2479
2648
|
function inlineTokens(shouldInline, tokens) {
|
|
2480
|
-
const [inlineableTokens, otherTokens] =
|
|
2649
|
+
const [inlineableTokens, otherTokens] = R8.partition(shouldInline, tokens);
|
|
2481
2650
|
return otherTokens.map((token) => {
|
|
2482
2651
|
let transformed = getValue(token.original);
|
|
2483
2652
|
for (const ref of inlineableTokens) {
|
|
@@ -2486,16 +2655,16 @@ function inlineTokens(shouldInline, tokens) {
|
|
|
2486
2655
|
transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
|
|
2487
2656
|
}
|
|
2488
2657
|
}
|
|
2489
|
-
const tokenWithInlinedRefs =
|
|
2658
|
+
const tokenWithInlinedRefs = R8.set(R8.lensPath(["original", "$value"]), transformed, token);
|
|
2490
2659
|
return tokenWithInlinedRefs;
|
|
2491
2660
|
});
|
|
2492
2661
|
}
|
|
2493
2662
|
|
|
2494
2663
|
// src/tokens/process/configs/color.ts
|
|
2495
|
-
import * as
|
|
2664
|
+
import * as R13 from "ramda";
|
|
2496
2665
|
|
|
2497
2666
|
// src/tokens/process/formats/css/color.ts
|
|
2498
|
-
import * as
|
|
2667
|
+
import * as R9 from "ramda";
|
|
2499
2668
|
import { createPropertyFormatter } from "style-dictionary/utils";
|
|
2500
2669
|
var prefersColorScheme = (colorScheme2, content) => `
|
|
2501
2670
|
@media (prefers-color-scheme: ${colorScheme2}) {
|
|
@@ -2504,7 +2673,7 @@ var prefersColorScheme = (colorScheme2, content) => `
|
|
|
2504
2673
|
`;
|
|
2505
2674
|
var colorScheme = {
|
|
2506
2675
|
name: "ds/css-colorscheme",
|
|
2507
|
-
format: async ({ dictionary,
|
|
2676
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2508
2677
|
const { allTokens } = dictionary;
|
|
2509
2678
|
const { outputReferences, usesDtcg } = options;
|
|
2510
2679
|
const { selector, colorScheme: colorScheme2, layer } = platform;
|
|
@@ -2519,8 +2688,8 @@ var colorScheme = {
|
|
|
2519
2688
|
color-scheme: ${colorScheme_};
|
|
2520
2689
|
` : "";
|
|
2521
2690
|
const filteredAllTokens = allTokens.filter(
|
|
2522
|
-
|
|
2523
|
-
|
|
2691
|
+
R9.allPass([
|
|
2692
|
+
R9.anyPass([
|
|
2524
2693
|
// Include semantic tokens in the output
|
|
2525
2694
|
isSemanticToken,
|
|
2526
2695
|
// Include global color tokens
|
|
@@ -2536,7 +2705,7 @@ ${formattedTokens}
|
|
|
2536
2705
|
${colorSchemeProperty}}
|
|
2537
2706
|
`;
|
|
2538
2707
|
const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
|
|
2539
|
-
const body =
|
|
2708
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2540
2709
|
${selector} ${content} ${autoSelectorContent}
|
|
2541
2710
|
}
|
|
2542
2711
|
` : `${selector} ${content} ${autoSelectorContent}
|
|
@@ -2546,10 +2715,10 @@ ${selector} ${content} ${autoSelectorContent}
|
|
|
2546
2715
|
};
|
|
2547
2716
|
var colorCategory = {
|
|
2548
2717
|
name: "ds/css-colorcategory",
|
|
2549
|
-
format: async ({ dictionary,
|
|
2718
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2550
2719
|
const { outputReferences, usesDtcg } = options;
|
|
2551
2720
|
const { selector, layer } = platform;
|
|
2552
|
-
const format =
|
|
2721
|
+
const format = R9.compose(
|
|
2553
2722
|
createPropertyFormatter({
|
|
2554
2723
|
outputReferences,
|
|
2555
2724
|
dictionary,
|
|
@@ -2570,7 +2739,7 @@ var colorCategory = {
|
|
|
2570
2739
|
${formattedTokens}
|
|
2571
2740
|
}
|
|
2572
2741
|
`;
|
|
2573
|
-
const body =
|
|
2742
|
+
const body = R9.isNotNil(layer) ? `@layer ${layer} {
|
|
2574
2743
|
${selector} ${content}
|
|
2575
2744
|
}
|
|
2576
2745
|
` : `${selector} ${content}
|
|
@@ -2580,16 +2749,16 @@ ${selector} ${content}
|
|
|
2580
2749
|
};
|
|
2581
2750
|
|
|
2582
2751
|
// src/tokens/process/formats/css/semantic.ts
|
|
2583
|
-
import * as
|
|
2752
|
+
import * as R10 from "ramda";
|
|
2584
2753
|
import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
|
|
2585
2754
|
var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
|
|
2586
2755
|
var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
|
|
2587
2756
|
var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
|
|
2588
|
-
var isInlineTokens =
|
|
2757
|
+
var isInlineTokens = R10.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
|
|
2589
2758
|
var overrideSizingFormula = (format, token) => {
|
|
2590
2759
|
const [name, value] = format(token).split(":");
|
|
2591
2760
|
const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
|
|
2592
|
-
const round = `round(down, ${calc},
|
|
2761
|
+
const round = `round(down, ${calc}, 1px)`;
|
|
2593
2762
|
return {
|
|
2594
2763
|
name,
|
|
2595
2764
|
round,
|
|
@@ -2597,7 +2766,7 @@ var overrideSizingFormula = (format, token) => {
|
|
|
2597
2766
|
};
|
|
2598
2767
|
};
|
|
2599
2768
|
var formatSizingTokens = (format, tokens) => {
|
|
2600
|
-
const { round, calc } =
|
|
2769
|
+
const { round, calc } = R10.reduce(
|
|
2601
2770
|
(acc, token) => {
|
|
2602
2771
|
const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
|
|
2603
2772
|
return {
|
|
@@ -2617,7 +2786,7 @@ ${round.join("\n")}
|
|
|
2617
2786
|
};
|
|
2618
2787
|
var semantic = {
|
|
2619
2788
|
name: "ds/css-semantic",
|
|
2620
|
-
format: async ({ dictionary,
|
|
2789
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2621
2790
|
const { outputReferences, usesDtcg } = options;
|
|
2622
2791
|
const { selector, layer } = platform;
|
|
2623
2792
|
const format = createPropertyFormatter2({
|
|
@@ -2627,17 +2796,17 @@ var semantic = {
|
|
|
2627
2796
|
usesDtcg
|
|
2628
2797
|
});
|
|
2629
2798
|
const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
|
|
2630
|
-
const filteredTokens =
|
|
2631
|
-
const [sizingTokens, restTokens] =
|
|
2799
|
+
const filteredTokens = R10.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
|
|
2800
|
+
const [sizingTokens, restTokens] = R10.partition(
|
|
2632
2801
|
(t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
|
|
2633
2802
|
filteredTokens
|
|
2634
2803
|
);
|
|
2635
|
-
const formattedTokens = [
|
|
2804
|
+
const formattedTokens = [R10.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
|
|
2636
2805
|
const content = `{
|
|
2637
2806
|
${formattedTokens.join("\n")}
|
|
2638
2807
|
}
|
|
2639
2808
|
`;
|
|
2640
|
-
const body =
|
|
2809
|
+
const body = R10.isNotNil(layer) ? `@layer ${layer} {
|
|
2641
2810
|
${selector} ${content}
|
|
2642
2811
|
}
|
|
2643
2812
|
` : `${selector} ${content}
|
|
@@ -2647,15 +2816,15 @@ ${selector} ${content}
|
|
|
2647
2816
|
};
|
|
2648
2817
|
|
|
2649
2818
|
// src/tokens/process/formats/css/typography.ts
|
|
2650
|
-
import * as
|
|
2819
|
+
import * as R11 from "ramda";
|
|
2651
2820
|
import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
|
|
2652
|
-
var typographyFontFamilyPredicate =
|
|
2653
|
-
|
|
2654
|
-
|
|
2821
|
+
var typographyFontFamilyPredicate = R11.allPass([
|
|
2822
|
+
R11.pathSatisfies(R11.includes("typography"), ["path"]),
|
|
2823
|
+
R11.pathSatisfies(R11.includes("fontFamily"), ["path"])
|
|
2655
2824
|
]);
|
|
2656
2825
|
var typography = {
|
|
2657
2826
|
name: "ds/css-typography",
|
|
2658
|
-
format: async ({ dictionary,
|
|
2827
|
+
format: async ({ dictionary, options, platform }) => {
|
|
2659
2828
|
const { outputReferences, usesDtcg } = options;
|
|
2660
2829
|
const { selector, layer } = platform;
|
|
2661
2830
|
const format = createPropertyFormatter3({
|
|
@@ -2664,12 +2833,12 @@ var typography = {
|
|
|
2664
2833
|
format: "css",
|
|
2665
2834
|
usesDtcg
|
|
2666
2835
|
});
|
|
2667
|
-
const filteredTokens =
|
|
2668
|
-
const formattedTokens =
|
|
2836
|
+
const filteredTokens = R11.reject(typographyFontFamilyPredicate, dictionary.allTokens);
|
|
2837
|
+
const formattedTokens = R11.pipe(R11.map(format), R11.join("\n"))(filteredTokens);
|
|
2669
2838
|
const content = selector ? `${selector} {
|
|
2670
2839
|
${formattedTokens}
|
|
2671
2840
|
}` : formattedTokens;
|
|
2672
|
-
const body =
|
|
2841
|
+
const body = R11.isNotNil(layer) ? `@layer ${layer} {
|
|
2673
2842
|
${content}
|
|
2674
2843
|
}` : content;
|
|
2675
2844
|
return body;
|
|
@@ -2686,8 +2855,8 @@ var formats = {
|
|
|
2686
2855
|
|
|
2687
2856
|
// src/tokens/process/transformers.ts
|
|
2688
2857
|
import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
|
|
2689
|
-
import * as
|
|
2690
|
-
var isPx =
|
|
2858
|
+
import * as R12 from "ramda";
|
|
2859
|
+
var isPx = R12.test(/\b\d+px\b/g);
|
|
2691
2860
|
var sizeRem = {
|
|
2692
2861
|
name: "ds/size/toRem",
|
|
2693
2862
|
type: "value",
|
|
@@ -2777,7 +2946,7 @@ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) =
|
|
|
2777
2946
|
{
|
|
2778
2947
|
destination: `color-scheme/${colorScheme2}.css`,
|
|
2779
2948
|
format: formats.colorScheme.name,
|
|
2780
|
-
filter: (token) => typeEquals("color", token) && !
|
|
2949
|
+
filter: (token) => typeEquals("color", token) && !R13.startsWith(["global"], token.path)
|
|
2781
2950
|
}
|
|
2782
2951
|
],
|
|
2783
2952
|
options: {
|
|
@@ -2828,7 +2997,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
|
|
|
2828
2997
|
};
|
|
2829
2998
|
|
|
2830
2999
|
// src/tokens/process/configs/semantic.ts
|
|
2831
|
-
import * as
|
|
3000
|
+
import * as R14 from "ramda";
|
|
2832
3001
|
import { outputReferencesFilter } from "style-dictionary/utils";
|
|
2833
3002
|
var semanticVariables = ({ theme }) => {
|
|
2834
3003
|
const selector = `:root`;
|
|
@@ -2851,8 +3020,8 @@ var semanticVariables = ({ theme }) => {
|
|
|
2851
3020
|
destination: `semantic.css`,
|
|
2852
3021
|
format: formats.semantic.name,
|
|
2853
3022
|
filter: (token) => {
|
|
2854
|
-
const isUwantedToken =
|
|
2855
|
-
const isPrivateToken =
|
|
3023
|
+
const isUwantedToken = R14.anyPass([R14.includes("primitives/global")])(token.filePath);
|
|
3024
|
+
const isPrivateToken = R14.includes("_", token.path);
|
|
2856
3025
|
const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
|
|
2857
3026
|
const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
|
|
2858
3027
|
const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
|
|
@@ -2873,20 +3042,20 @@ var semanticVariables = ({ theme }) => {
|
|
|
2873
3042
|
};
|
|
2874
3043
|
|
|
2875
3044
|
// src/tokens/process/configs/storefront.ts
|
|
2876
|
-
import * as
|
|
3045
|
+
import * as R16 from "ramda";
|
|
2877
3046
|
import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
|
|
2878
3047
|
|
|
2879
3048
|
// src/tokens/process/formats/js-tokens.ts
|
|
2880
|
-
import * as
|
|
3049
|
+
import * as R15 from "ramda";
|
|
2881
3050
|
import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
|
|
2882
|
-
var groupByType =
|
|
2883
|
-
var removeUnwatedTokens =
|
|
2884
|
-
|
|
2885
|
-
|
|
3051
|
+
var groupByType = R15.groupBy((token) => getType(token));
|
|
3052
|
+
var removeUnwatedTokens = R15.pipe(
|
|
3053
|
+
R15.reject((token) => isColorCategoryToken(token)),
|
|
3054
|
+
R15.reject((token) => R15.any((path) => path.startsWith("_"))(token.path))
|
|
2886
3055
|
);
|
|
2887
|
-
var dissocExtensions =
|
|
2888
|
-
var removeUnwatedProps =
|
|
2889
|
-
var toCssVarName =
|
|
3056
|
+
var dissocExtensions = R15.pipe(R15.dissoc("$extensions"), R15.dissocPath(["original", "$extensions"]));
|
|
3057
|
+
var removeUnwatedProps = R15.map((token) => dissocExtensions(token));
|
|
3058
|
+
var toCssVarName = R15.pipe(R15.split(":"), R15.head, R15.trim);
|
|
2890
3059
|
var jsTokens = {
|
|
2891
3060
|
name: "ds/js-tokens",
|
|
2892
3061
|
format: async ({ dictionary, file, options }) => {
|
|
@@ -2897,7 +3066,7 @@ var jsTokens = {
|
|
|
2897
3066
|
format: "css",
|
|
2898
3067
|
usesDtcg
|
|
2899
3068
|
});
|
|
2900
|
-
const formatTokens2 =
|
|
3069
|
+
const formatTokens2 = R15.map((token) => {
|
|
2901
3070
|
if (pathStartsWithOneOf(["size", "_size"], token)) {
|
|
2902
3071
|
const { calc, name } = overrideSizingFormula(format, token);
|
|
2903
3072
|
return {
|
|
@@ -2911,7 +3080,7 @@ var jsTokens = {
|
|
|
2911
3080
|
name: toCssVarName(format(token))
|
|
2912
3081
|
};
|
|
2913
3082
|
});
|
|
2914
|
-
const processTokens =
|
|
3083
|
+
const processTokens = R15.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
|
|
2915
3084
|
const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
|
|
2916
3085
|
const content = Object.entries(tokens).map(
|
|
2917
3086
|
([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
|
|
@@ -2936,9 +3105,9 @@ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
|
|
|
2936
3105
|
destination: `${colorScheme2}.ts`,
|
|
2937
3106
|
format: jsTokens.name,
|
|
2938
3107
|
filter: (token) => {
|
|
2939
|
-
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !
|
|
3108
|
+
if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R16.includes("semantic", token.filePath))
|
|
2940
3109
|
return false;
|
|
2941
|
-
const isSemanticColor =
|
|
3110
|
+
const isSemanticColor = R16.includes("semantic", token.filePath) && typeEquals(["color"], token);
|
|
2942
3111
|
const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
|
|
2943
3112
|
return isSemanticColor || wantedTypes;
|
|
2944
3113
|
}
|
|
@@ -3004,19 +3173,19 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3004
3173
|
};
|
|
3005
3174
|
|
|
3006
3175
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3007
|
-
import
|
|
3176
|
+
import chalk2 from "chalk";
|
|
3008
3177
|
import { kebabCase } from "change-case";
|
|
3009
|
-
import * as
|
|
3178
|
+
import * as R17 from "ramda";
|
|
3010
3179
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3011
3180
|
const verboseLogging = buildOptions?.verbose;
|
|
3012
3181
|
const grouped$themes = groupThemes(processed$themes);
|
|
3013
3182
|
const permutations = permutateThemes(grouped$themes);
|
|
3014
3183
|
const ALL_DEPENDENT_ON = ["theme"];
|
|
3015
|
-
const keys2 =
|
|
3184
|
+
const keys2 = R17.keys(grouped$themes);
|
|
3016
3185
|
const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
|
|
3017
3186
|
if (verboseLogging) {
|
|
3018
|
-
console.log(
|
|
3019
|
-
console.log(
|
|
3187
|
+
console.log(chalk2.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
|
|
3188
|
+
console.log(chalk2.cyan(` (ignoring permutations for ${nonDependentKeys})`));
|
|
3020
3189
|
}
|
|
3021
3190
|
return permutations.filter((val) => {
|
|
3022
3191
|
const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
|
|
@@ -3052,7 +3221,7 @@ function groupThemes(themes) {
|
|
|
3052
3221
|
}
|
|
3053
3222
|
return groups;
|
|
3054
3223
|
}
|
|
3055
|
-
var hasUnknownProps =
|
|
3224
|
+
var hasUnknownProps = R17.pipe(R17.values, R17.none(R17.equals("unknown")), R17.not);
|
|
3056
3225
|
function permutateThemes(groups) {
|
|
3057
3226
|
const separator = "_";
|
|
3058
3227
|
const permutations = cartesian(Object.values(groups));
|
|
@@ -3062,8 +3231,8 @@ function permutateThemes(groups) {
|
|
|
3062
3231
|
const { group, name, selectedTokenSets } = theme;
|
|
3063
3232
|
let updatedPermutation = acc.permutation;
|
|
3064
3233
|
if (group) {
|
|
3065
|
-
const groupProp =
|
|
3066
|
-
updatedPermutation =
|
|
3234
|
+
const groupProp = R17.lensProp(group);
|
|
3235
|
+
updatedPermutation = R17.set(groupProp, name, updatedPermutation);
|
|
3067
3236
|
}
|
|
3068
3237
|
const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
|
|
3069
3238
|
const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
|
|
@@ -3109,6 +3278,12 @@ function filterTokenSets(tokensets) {
|
|
|
3109
3278
|
function cartesian(a) {
|
|
3110
3279
|
return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
|
|
3111
3280
|
}
|
|
3281
|
+
var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
|
|
3282
|
+
if (!x.group) {
|
|
3283
|
+
return false;
|
|
3284
|
+
}
|
|
3285
|
+
return colorGroups.includes(x.group);
|
|
3286
|
+
}).map((x) => x.name);
|
|
3112
3287
|
|
|
3113
3288
|
// src/tokens/process/configs.ts
|
|
3114
3289
|
void register(StyleDictionary, { withSDBuiltins: false });
|
|
@@ -3147,7 +3322,7 @@ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, opt
|
|
|
3147
3322
|
obj.filePath = tokenSet;
|
|
3148
3323
|
}
|
|
3149
3324
|
});
|
|
3150
|
-
tokenSource.tokens =
|
|
3325
|
+
tokenSource.tokens = R18.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
|
|
3151
3326
|
}
|
|
3152
3327
|
}
|
|
3153
3328
|
} else {
|
|
@@ -3191,12 +3366,6 @@ var initResult = {
|
|
|
3191
3366
|
};
|
|
3192
3367
|
var buildOptions;
|
|
3193
3368
|
var sd = new StyleDictionary2();
|
|
3194
|
-
var getCustomColors = (processed$themes, colorGroups) => processed$themes.filter((x) => {
|
|
3195
|
-
if (!x.group) {
|
|
3196
|
-
return false;
|
|
3197
|
-
}
|
|
3198
|
-
return colorGroups.includes(x.group);
|
|
3199
|
-
}).map((x) => x.name);
|
|
3200
3369
|
var buildConfigs = {
|
|
3201
3370
|
typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
|
|
3202
3371
|
"color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
|
|
@@ -3237,46 +3406,54 @@ var buildConfigs = {
|
|
|
3237
3406
|
// },
|
|
3238
3407
|
};
|
|
3239
3408
|
async function processPlatform(options) {
|
|
3240
|
-
const { type, $themes } = options;
|
|
3409
|
+
const { type, processed$themes } = options;
|
|
3241
3410
|
const platform = "css";
|
|
3242
3411
|
const tokenSets = type === "format" ? options.tokenSets : void 0;
|
|
3243
3412
|
const tokensDir = type === "build" ? options.tokensDir : void 0;
|
|
3244
3413
|
const UNSAFE_DEFAULT_COLOR = process.env.UNSAFE_DEFAULT_COLOR ?? "";
|
|
3245
3414
|
if (UNSAFE_DEFAULT_COLOR) {
|
|
3246
3415
|
console.warn(
|
|
3247
|
-
|
|
3416
|
+
chalk3.yellow(
|
|
3248
3417
|
`
|
|
3249
|
-
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${
|
|
3418
|
+
\u26A0\uFE0F UNSAFE_DEFAULT_COLOR is set to ${chalk3.blue(UNSAFE_DEFAULT_COLOR)}. This will override the default color.`
|
|
3250
3419
|
)
|
|
3251
3420
|
);
|
|
3252
3421
|
}
|
|
3253
3422
|
const UNSAFE_COLOR_GROUPS = Array.from(process.env.UNSAFE_COLOR_GROUPS?.split(",") ?? []);
|
|
3254
3423
|
if (UNSAFE_COLOR_GROUPS.length > 0) {
|
|
3255
3424
|
console.warn(
|
|
3256
|
-
|
|
3425
|
+
chalk3.yellow(
|
|
3257
3426
|
`
|
|
3258
|
-
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${
|
|
3427
|
+
\u26A0\uFE0F UNSAFE_COLOR_GROUPS is set to ${chalk3.blue(`[${UNSAFE_COLOR_GROUPS.join(", ")}]`)}. This will override the default color groups.`
|
|
3259
3428
|
)
|
|
3260
3429
|
);
|
|
3261
3430
|
}
|
|
3262
3431
|
const colorGroups = UNSAFE_COLOR_GROUPS.length > 0 ? UNSAFE_COLOR_GROUPS : [colorCategories.main, colorCategories.support].map((c) => `${c}-color`);
|
|
3263
3432
|
buildOptions = options;
|
|
3264
3433
|
buildOptions.defaultColor = UNSAFE_DEFAULT_COLOR;
|
|
3265
|
-
|
|
3266
|
-
const
|
|
3434
|
+
buildOptions.colorGroups = colorGroups;
|
|
3435
|
+
const filteredProcessed$themes = processed$themes.filter(
|
|
3436
|
+
(theme) => R19.not(theme.group === "size" && theme.name !== "medium")
|
|
3437
|
+
);
|
|
3438
|
+
const customColors = getCustomColors(filteredProcessed$themes, colorGroups);
|
|
3267
3439
|
if (!buildOptions.defaultColor) {
|
|
3268
|
-
const firstMainColor =
|
|
3440
|
+
const firstMainColor = R19.head(customColors);
|
|
3269
3441
|
buildOptions.defaultColor = firstMainColor;
|
|
3270
3442
|
}
|
|
3271
3443
|
if (buildOptions.defaultColor) {
|
|
3272
3444
|
console.log(`
|
|
3273
|
-
\u{1F3A8} Using ${
|
|
3445
|
+
\u{1F3A8} Using ${chalk3.blue(buildOptions.defaultColor)} as default color`);
|
|
3274
3446
|
}
|
|
3275
|
-
const buildAndSdConfigs =
|
|
3276
|
-
const sdConfigs = getConfigsForThemeDimensions(
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3447
|
+
const buildAndSdConfigs = R19.map((buildConfig) => {
|
|
3448
|
+
const sdConfigs = getConfigsForThemeDimensions(
|
|
3449
|
+
buildConfig.getConfig,
|
|
3450
|
+
filteredProcessed$themes,
|
|
3451
|
+
buildConfig.dimensions,
|
|
3452
|
+
{
|
|
3453
|
+
tokensDir,
|
|
3454
|
+
tokenSets
|
|
3455
|
+
}
|
|
3456
|
+
);
|
|
3280
3457
|
const unknownConfigs = buildConfig.dimensions.map(
|
|
3281
3458
|
(dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
|
|
3282
3459
|
);
|
|
@@ -3300,23 +3477,22 @@ async function processPlatform(options) {
|
|
|
3300
3477
|
"warning-color": [initResult],
|
|
3301
3478
|
"info-color": [initResult],
|
|
3302
3479
|
semantic: [initResult],
|
|
3303
|
-
typography: [initResult]
|
|
3304
|
-
types: [initResult]
|
|
3480
|
+
typography: [initResult]
|
|
3305
3481
|
};
|
|
3306
3482
|
try {
|
|
3307
|
-
for (const [buildName, { buildConfig, sdConfigs }] of
|
|
3483
|
+
for (const [buildName, { buildConfig, sdConfigs }] of R19.toPairs(buildAndSdConfigs)) {
|
|
3308
3484
|
if (!(buildConfig.enabled?.() ?? true)) {
|
|
3309
3485
|
continue;
|
|
3310
3486
|
}
|
|
3311
3487
|
if (sdConfigs.length > 0) {
|
|
3312
3488
|
console.log(`
|
|
3313
|
-
\u{1F371} Building ${
|
|
3489
|
+
\u{1F371} Building ${chalk3.green(buildConfig.name ?? buildName)}`);
|
|
3314
3490
|
const results = await Promise.all(
|
|
3315
3491
|
sdConfigs.map(async (sdConfig) => {
|
|
3316
3492
|
const { config, permutation } = sdConfig;
|
|
3317
3493
|
const modes = ["theme", ...buildConfig.dimensions];
|
|
3318
3494
|
const modeMessage = modes.map((x) => permutation[x]).join(" - ");
|
|
3319
|
-
const logMessage =
|
|
3495
|
+
const logMessage = R19.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
|
|
3320
3496
|
console.log(logMessage);
|
|
3321
3497
|
const sdOptions = { cache: true };
|
|
3322
3498
|
const sdExtended = await sd.extend(config);
|
|
@@ -3336,198 +3512,8 @@ async function processPlatform(options) {
|
|
|
3336
3512
|
}
|
|
3337
3513
|
throw err;
|
|
3338
3514
|
}
|
|
3339
|
-
const colorsFileName = "colors.d.ts";
|
|
3340
|
-
const reactColorTypes = await createColorTypeDeclaration(customColors);
|
|
3341
|
-
processedBuilds.types = [
|
|
3342
|
-
{
|
|
3343
|
-
...initResult,
|
|
3344
|
-
formatted: [{ output: reactColorTypes, destination: colorsFileName }]
|
|
3345
|
-
}
|
|
3346
|
-
];
|
|
3347
3515
|
return processedBuilds;
|
|
3348
3516
|
}
|
|
3349
|
-
async function createColorTypeDeclaration(colors) {
|
|
3350
|
-
console.log(`
|
|
3351
|
-
\u{1F371} Building ${chalk2.green("type declarations")}`);
|
|
3352
|
-
const typeDeclaration = `
|
|
3353
|
-
import type {} from '@digdir/designsystemet-react/colors';
|
|
3354
|
-
|
|
3355
|
-
declare module '@digdir/designsystemet-react/colors' {
|
|
3356
|
-
export interface MainAndSupportColors {
|
|
3357
|
-
${colors.map((color) => ` ${color}: never;`).join("\n")}
|
|
3358
|
-
}
|
|
3359
|
-
}
|
|
3360
|
-
`.trimStart();
|
|
3361
|
-
return typeDeclaration;
|
|
3362
|
-
}
|
|
3363
|
-
|
|
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
3517
|
|
|
3532
3518
|
// src/tokens/format.ts
|
|
3533
3519
|
var formatTokens = async (options) => {
|
|
@@ -3540,9 +3526,10 @@ var formatTokens = async (options) => {
|
|
|
3540
3526
|
var formatTheme = async (themeConfig) => {
|
|
3541
3527
|
const { tokenSets } = await createTokens(themeConfig);
|
|
3542
3528
|
const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors);
|
|
3529
|
+
const processed$themes = $themes.map(processThemeObject);
|
|
3543
3530
|
const processedBuilds = await formatTokens({
|
|
3544
3531
|
tokenSets,
|
|
3545
|
-
$themes,
|
|
3532
|
+
processed$themes,
|
|
3546
3533
|
verbose: false,
|
|
3547
3534
|
preview: false
|
|
3548
3535
|
});
|