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