@digdir/designsystemet 1.0.4 → 1.0.6
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/LICENSE +7 -0
- package/dist/bin/designsystemet.js +623 -593
- package/dist/src/colors/index.js +32 -0
- package/dist/src/colors/theme.js +1 -0
- package/dist/src/colors/utils.d.ts +13 -0
- package/dist/src/colors/utils.d.ts.map +1 -1
- package/dist/src/colors/utils.js +32 -0
- package/dist/src/config.js +1 -0
- package/dist/src/index.js +196 -142
- package/dist/src/scripts/createJsonSchema.js +39 -38
- package/dist/src/scripts/update-design-tokens.js +1 -0
- package/dist/src/tokens/build.d.ts.map +1 -1
- package/dist/src/tokens/build.js +353 -590
- package/dist/src/tokens/create/generators/$designsystemet.js +22 -19
- package/dist/src/tokens/create/generators/$themes.js +10 -10
- package/dist/src/tokens/create/generators/color.js +1 -0
- package/dist/src/tokens/create/write.js +32 -29
- package/dist/src/tokens/create.js +1 -0
- package/dist/src/tokens/format.d.ts +4 -5
- package/dist/src/tokens/format.d.ts.map +1 -1
- package/dist/src/tokens/format.js +165 -143
- package/dist/src/tokens/index.js +165 -142
- package/dist/src/tokens/process/configs/color.js +26 -22
- package/dist/src/tokens/process/configs/semantic.js +16 -12
- package/dist/src/tokens/process/configs/shared.js +16 -12
- package/dist/src/tokens/process/configs/storefront.js +16 -12
- package/dist/src/tokens/process/configs/typography.js +16 -12
- package/dist/src/tokens/process/configs.js +26 -22
- package/dist/src/tokens/process/formats/css/color.js +16 -12
- package/dist/src/tokens/process/formats/css/semantic.js +16 -12
- package/dist/src/tokens/process/formats/css.js +16 -12
- package/dist/src/tokens/process/formats/js-tokens.js +16 -12
- package/dist/src/tokens/process/platform.js +27 -23
- package/dist/src/tokens/process/theme.d.ts +27 -0
- package/dist/src/tokens/process/theme.d.ts.map +1 -0
- package/dist/src/tokens/process/theme.js +174 -0
- package/dist/src/tokens/process/transformers.js +16 -12
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +26 -22
- package/dist/src/tokens/types.d.ts +4 -0
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/dist/src/tokens/utils.d.ts +2 -2
- package/dist/src/tokens/utils.d.ts.map +1 -1
- package/dist/src/tokens/utils.js +16 -12
- package/package.json +31 -28
|
@@ -7,20 +7,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
7
7
|
var hasAnyTruth = R.any(R.equals(true));
|
|
8
8
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
9
9
|
var getValue = (token) => token.$value ?? token.value;
|
|
10
|
-
var typeEquals = R.curry(
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
var typeEquals = R.curry(
|
|
11
|
+
(types, token) => {
|
|
12
|
+
if (R.isNil(token)) {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
13
16
|
}
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
);
|
|
18
|
+
var pathStartsWithOneOf = R.curry(
|
|
19
|
+
(paths, token) => {
|
|
20
|
+
if (R.isNil(token)) {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
24
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
25
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
19
26
|
}
|
|
20
|
-
|
|
21
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
22
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
23
|
-
});
|
|
27
|
+
);
|
|
24
28
|
function isSemanticToken(token) {
|
|
25
29
|
return token.filePath.includes("semantic/");
|
|
26
30
|
}
|
|
@@ -9,20 +9,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
9
9
|
var hasAnyTruth = R.any(R.equals(true));
|
|
10
10
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
11
11
|
var getValue = (token) => token.$value ?? token.value;
|
|
12
|
-
var typeEquals = R.curry(
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
var typeEquals = R.curry(
|
|
13
|
+
(types, token) => {
|
|
14
|
+
if (R.isNil(token)) {
|
|
15
|
+
return false;
|
|
16
|
+
}
|
|
17
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
15
18
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
);
|
|
20
|
+
var pathStartsWithOneOf = R.curry(
|
|
21
|
+
(paths, token) => {
|
|
22
|
+
if (R.isNil(token)) {
|
|
23
|
+
return false;
|
|
24
|
+
}
|
|
25
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
26
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
27
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
21
28
|
}
|
|
22
|
-
|
|
23
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
24
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
25
|
-
});
|
|
29
|
+
);
|
|
26
30
|
function isSemanticToken(token) {
|
|
27
31
|
return token.filePath.includes("semantic/");
|
|
28
32
|
}
|
|
@@ -272,14 +276,14 @@ import chalk2 from "chalk";
|
|
|
272
276
|
import * as R6 from "ramda";
|
|
273
277
|
import StyleDictionary from "style-dictionary";
|
|
274
278
|
|
|
275
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
279
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
276
280
|
var BoxShadowTypes;
|
|
277
281
|
(function(BoxShadowTypes2) {
|
|
278
282
|
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
279
283
|
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
280
284
|
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
281
285
|
|
|
282
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
286
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
283
287
|
var ColorModifierTypes;
|
|
284
288
|
(function(ColorModifierTypes2) {
|
|
285
289
|
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
@@ -288,7 +292,7 @@ var ColorModifierTypes;
|
|
|
288
292
|
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
289
293
|
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
290
294
|
|
|
291
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
295
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
292
296
|
var ColorSpaceTypes;
|
|
293
297
|
(function(ColorSpaceTypes2) {
|
|
294
298
|
ColorSpaceTypes2["LCH"] = "lch";
|
|
@@ -297,7 +301,7 @@ var ColorSpaceTypes;
|
|
|
297
301
|
ColorSpaceTypes2["HSL"] = "hsl";
|
|
298
302
|
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
299
303
|
|
|
300
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
304
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
301
305
|
var Properties;
|
|
302
306
|
(function(Properties2) {
|
|
303
307
|
Properties2["sizing"] = "sizing";
|
|
@@ -349,7 +353,7 @@ var Properties;
|
|
|
349
353
|
Properties2["description"] = "description";
|
|
350
354
|
})(Properties || (Properties = {}));
|
|
351
355
|
|
|
352
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
356
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
353
357
|
var TokenSetStatus;
|
|
354
358
|
(function(TokenSetStatus2) {
|
|
355
359
|
TokenSetStatus2["DISABLED"] = "disabled";
|
|
@@ -357,7 +361,7 @@ var TokenSetStatus;
|
|
|
357
361
|
TokenSetStatus2["ENABLED"] = "enabled";
|
|
358
362
|
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
359
363
|
|
|
360
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
364
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
361
365
|
var TokenTypes;
|
|
362
366
|
(function(TokenTypes2) {
|
|
363
367
|
TokenTypes2["OTHER"] = "other";
|
|
@@ -388,7 +392,7 @@ var TokenTypes;
|
|
|
388
392
|
TokenTypes2["NUMBER"] = "number";
|
|
389
393
|
})(TokenTypes || (TokenTypes = {}));
|
|
390
394
|
|
|
391
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
395
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
392
396
|
var BorderValues;
|
|
393
397
|
(function(BorderValues2) {
|
|
394
398
|
BorderValues2["BORDER_COLOR"] = "color";
|
|
@@ -396,7 +400,7 @@ var BorderValues;
|
|
|
396
400
|
BorderValues2["BORDER_STYLE"] = "style";
|
|
397
401
|
})(BorderValues || (BorderValues = {}));
|
|
398
402
|
|
|
399
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
403
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
400
404
|
var StrokeStyleValues;
|
|
401
405
|
(function(StrokeStyleValues2) {
|
|
402
406
|
StrokeStyleValues2["SOLID"] = "solid";
|
|
@@ -409,7 +413,7 @@ var StrokeStyleValues;
|
|
|
409
413
|
StrokeStyleValues2["INSET"] = "inset";
|
|
410
414
|
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
411
415
|
|
|
412
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
416
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
413
417
|
var BoxShadowValues;
|
|
414
418
|
(function(BoxShadowValues2) {
|
|
415
419
|
BoxShadowValues2["TYPE"] = "type";
|
|
@@ -421,7 +425,7 @@ var BoxShadowValues;
|
|
|
421
425
|
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
422
426
|
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
423
427
|
|
|
424
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
428
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
425
429
|
var TypographyValues;
|
|
426
430
|
(function(TypographyValues2) {
|
|
427
431
|
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
@@ -13,20 +13,24 @@ import * as R from "ramda";
|
|
|
13
13
|
var mapToLowerCase = R.map(R.toLower);
|
|
14
14
|
var hasAnyTruth = R.any(R.equals(true));
|
|
15
15
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
16
|
-
var typeEquals = R.curry(
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
var typeEquals = R.curry(
|
|
17
|
+
(types, token) => {
|
|
18
|
+
if (R.isNil(token)) {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
19
22
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
);
|
|
24
|
+
var pathStartsWithOneOf = R.curry(
|
|
25
|
+
(paths, token) => {
|
|
26
|
+
if (R.isNil(token)) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
30
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
31
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
25
32
|
}
|
|
26
|
-
|
|
27
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
28
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
29
|
-
});
|
|
33
|
+
);
|
|
30
34
|
function isSemanticToken(token) {
|
|
31
35
|
return token.filePath.includes("semantic/");
|
|
32
36
|
}
|
|
@@ -8,20 +8,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
8
8
|
var hasAnyTruth = R.any(R.equals(true));
|
|
9
9
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
10
10
|
var getValue = (token) => token.$value ?? token.value;
|
|
11
|
-
var typeEquals = R.curry(
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
var typeEquals = R.curry(
|
|
12
|
+
(types, token) => {
|
|
13
|
+
if (R.isNil(token)) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
14
17
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
);
|
|
19
|
+
var pathStartsWithOneOf = R.curry(
|
|
20
|
+
(paths, token) => {
|
|
21
|
+
if (R.isNil(token)) {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
25
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
26
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
20
27
|
}
|
|
21
|
-
|
|
22
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
23
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
24
|
-
});
|
|
28
|
+
);
|
|
25
29
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
26
30
|
function inlineTokens(shouldInline, tokens) {
|
|
27
31
|
const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
|
|
@@ -14,20 +14,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
14
14
|
var hasAnyTruth = R.any(R.equals(true));
|
|
15
15
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
16
16
|
var getValue = (token) => token.$value ?? token.value;
|
|
17
|
-
var typeEquals = R.curry(
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
var typeEquals = R.curry(
|
|
18
|
+
(types, token) => {
|
|
19
|
+
if (R.isNil(token)) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
20
23
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
);
|
|
25
|
+
var pathStartsWithOneOf = R.curry(
|
|
26
|
+
(paths, token) => {
|
|
27
|
+
if (R.isNil(token)) {
|
|
28
|
+
return false;
|
|
29
|
+
}
|
|
30
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
31
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
32
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
26
33
|
}
|
|
27
|
-
|
|
28
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
29
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
30
|
-
});
|
|
34
|
+
);
|
|
31
35
|
function isSemanticToken(token) {
|
|
32
36
|
return token.filePath.includes("semantic/");
|
|
33
37
|
}
|
|
@@ -8,20 +8,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
8
8
|
var hasAnyTruth = R.any(R.equals(true));
|
|
9
9
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
10
10
|
var getValue = (token) => token.$value ?? token.value;
|
|
11
|
-
var typeEquals = R.curry(
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
var typeEquals = R.curry(
|
|
12
|
+
(types, token) => {
|
|
13
|
+
if (R.isNil(token)) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
14
17
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
);
|
|
19
|
+
var pathStartsWithOneOf = R.curry(
|
|
20
|
+
(paths, token) => {
|
|
21
|
+
if (R.isNil(token)) {
|
|
22
|
+
return false;
|
|
23
|
+
}
|
|
24
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
25
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
26
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
20
27
|
}
|
|
21
|
-
|
|
22
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
23
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
24
|
-
});
|
|
28
|
+
);
|
|
25
29
|
function isColorCategoryToken(token, category) {
|
|
26
30
|
if (!category) {
|
|
27
31
|
return ["main", "support"].some((c) => isColorCategoryToken(token, c));
|
|
@@ -20,20 +20,24 @@ var mapToLowerCase = R.map(R.toLower);
|
|
|
20
20
|
var hasAnyTruth = R.any(R.equals(true));
|
|
21
21
|
var getType = (token) => (token.$type ?? token.type) || "";
|
|
22
22
|
var getValue = (token) => token.$value ?? token.value;
|
|
23
|
-
var typeEquals = R.curry(
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
var typeEquals = R.curry(
|
|
24
|
+
(types, token) => {
|
|
25
|
+
if (R.isNil(token)) {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
|
|
26
29
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
);
|
|
31
|
+
var pathStartsWithOneOf = R.curry(
|
|
32
|
+
(paths, token) => {
|
|
33
|
+
if (R.isNil(token)) {
|
|
34
|
+
return false;
|
|
35
|
+
}
|
|
36
|
+
const tokenPath = mapToLowerCase(token.path);
|
|
37
|
+
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
38
|
+
return hasAnyTruth(matchPathsStartingWith);
|
|
32
39
|
}
|
|
33
|
-
|
|
34
|
-
const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
|
|
35
|
-
return hasAnyTruth(matchPathsStartingWith);
|
|
36
|
-
});
|
|
40
|
+
);
|
|
37
41
|
function isSemanticToken(token) {
|
|
38
42
|
return token.filePath.includes("semantic/");
|
|
39
43
|
}
|
|
@@ -589,14 +593,14 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
589
593
|
};
|
|
590
594
|
};
|
|
591
595
|
|
|
592
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
596
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
|
|
593
597
|
var BoxShadowTypes;
|
|
594
598
|
(function(BoxShadowTypes2) {
|
|
595
599
|
BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
|
|
596
600
|
BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
|
|
597
601
|
})(BoxShadowTypes || (BoxShadowTypes = {}));
|
|
598
602
|
|
|
599
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
603
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
|
|
600
604
|
var ColorModifierTypes;
|
|
601
605
|
(function(ColorModifierTypes2) {
|
|
602
606
|
ColorModifierTypes2["LIGHTEN"] = "lighten";
|
|
@@ -605,7 +609,7 @@ var ColorModifierTypes;
|
|
|
605
609
|
ColorModifierTypes2["ALPHA"] = "alpha";
|
|
606
610
|
})(ColorModifierTypes || (ColorModifierTypes = {}));
|
|
607
611
|
|
|
608
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
612
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
|
|
609
613
|
var ColorSpaceTypes;
|
|
610
614
|
(function(ColorSpaceTypes2) {
|
|
611
615
|
ColorSpaceTypes2["LCH"] = "lch";
|
|
@@ -614,7 +618,7 @@ var ColorSpaceTypes;
|
|
|
614
618
|
ColorSpaceTypes2["HSL"] = "hsl";
|
|
615
619
|
})(ColorSpaceTypes || (ColorSpaceTypes = {}));
|
|
616
620
|
|
|
617
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
621
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
|
|
618
622
|
var Properties;
|
|
619
623
|
(function(Properties2) {
|
|
620
624
|
Properties2["sizing"] = "sizing";
|
|
@@ -666,7 +670,7 @@ var Properties;
|
|
|
666
670
|
Properties2["description"] = "description";
|
|
667
671
|
})(Properties || (Properties = {}));
|
|
668
672
|
|
|
669
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
673
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
|
|
670
674
|
var TokenSetStatus;
|
|
671
675
|
(function(TokenSetStatus2) {
|
|
672
676
|
TokenSetStatus2["DISABLED"] = "disabled";
|
|
@@ -674,7 +678,7 @@ var TokenSetStatus;
|
|
|
674
678
|
TokenSetStatus2["ENABLED"] = "enabled";
|
|
675
679
|
})(TokenSetStatus || (TokenSetStatus = {}));
|
|
676
680
|
|
|
677
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
681
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
|
|
678
682
|
var TokenTypes;
|
|
679
683
|
(function(TokenTypes2) {
|
|
680
684
|
TokenTypes2["OTHER"] = "other";
|
|
@@ -705,7 +709,7 @@ var TokenTypes;
|
|
|
705
709
|
TokenTypes2["NUMBER"] = "number";
|
|
706
710
|
})(TokenTypes || (TokenTypes = {}));
|
|
707
711
|
|
|
708
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
712
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
|
|
709
713
|
var BorderValues;
|
|
710
714
|
(function(BorderValues2) {
|
|
711
715
|
BorderValues2["BORDER_COLOR"] = "color";
|
|
@@ -713,7 +717,7 @@ var BorderValues;
|
|
|
713
717
|
BorderValues2["BORDER_STYLE"] = "style";
|
|
714
718
|
})(BorderValues || (BorderValues = {}));
|
|
715
719
|
|
|
716
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
720
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
|
|
717
721
|
var StrokeStyleValues;
|
|
718
722
|
(function(StrokeStyleValues2) {
|
|
719
723
|
StrokeStyleValues2["SOLID"] = "solid";
|
|
@@ -726,7 +730,7 @@ var StrokeStyleValues;
|
|
|
726
730
|
StrokeStyleValues2["INSET"] = "inset";
|
|
727
731
|
})(StrokeStyleValues || (StrokeStyleValues = {}));
|
|
728
732
|
|
|
729
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
733
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
|
|
730
734
|
var BoxShadowValues;
|
|
731
735
|
(function(BoxShadowValues2) {
|
|
732
736
|
BoxShadowValues2["TYPE"] = "type";
|
|
@@ -738,7 +742,7 @@ var BoxShadowValues;
|
|
|
738
742
|
BoxShadowValues2["BLEND_MODE"] = "blendMode";
|
|
739
743
|
})(BoxShadowValues || (BoxShadowValues = {}));
|
|
740
744
|
|
|
741
|
-
// ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
745
|
+
// ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
|
|
742
746
|
var TypographyValues;
|
|
743
747
|
(function(TypographyValues2) {
|
|
744
748
|
TypographyValues2["FONT_FAMILY"] = "fontFamily";
|
|
@@ -984,7 +988,7 @@ var buildConfigs = {
|
|
|
984
988
|
// },
|
|
985
989
|
};
|
|
986
990
|
async function processPlatform(options) {
|
|
987
|
-
const {
|
|
991
|
+
const { process, $themes } = options;
|
|
988
992
|
const platform = "css";
|
|
989
993
|
const tokenSets = process === "format" ? options.tokenSets : void 0;
|
|
990
994
|
const tokensDir = process === "build" ? options.tokensDir : void 0;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { OutputFile } from '../types.js';
|
|
2
|
+
import type { ProcessReturn } from './platform.js';
|
|
3
|
+
export declare const defaultFileHeader: string;
|
|
4
|
+
type CreateThemeCSSFiles = {
|
|
5
|
+
/** The processed build results containing formatted CSS outputs grouped by themes and other permutations. */
|
|
6
|
+
processedBuilds: ProcessReturn;
|
|
7
|
+
/** Optional header to be included in the generated CSS files. */
|
|
8
|
+
fileHeader?: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Generates theme-specific CSS files from Style Dictionary build results.
|
|
12
|
+
*
|
|
13
|
+
* @param processedBuilds - The processed build results containing formatted CSS outputs
|
|
14
|
+
* grouped by themes and other permutations.
|
|
15
|
+
* @param fileHeader - Optional header to be included in the generated CSS files.
|
|
16
|
+
* @returns An array of `OutputFile` objects, each representing a theme-specific CSS file
|
|
17
|
+
* with its destination and content.
|
|
18
|
+
*
|
|
19
|
+
* @remarks
|
|
20
|
+
* - The function groups the build results by theme and ensures a deterministic order
|
|
21
|
+
* for the sections of the entry CSS file using a predefined sort order.
|
|
22
|
+
* - If a CSS section does not have a defined sort order the section is added to the end of the entry file.
|
|
23
|
+
* - The generated CSS files include a header with metadata and layer definitions.
|
|
24
|
+
*/
|
|
25
|
+
export declare const createThemeCSSFiles: ({ processedBuilds, fileHeader, }: CreateThemeCSSFiles) => OutputFile[];
|
|
26
|
+
export {};
|
|
27
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/theme.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,eAAO,MAAM,iBAAiB,QAA2B,CAAC;AAE1D,KAAK,mBAAmB,GAAG;IACzB,6GAA6G;IAC7G,eAAe,EAAE,aAAa,CAAC;IAC/B,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,kCAGjC,mBAAmB,KAAG,UAAU,EAiFlC,CAAC"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
// src/tokens/process/theme.ts
|
|
2
|
+
import * as R from "ramda";
|
|
3
|
+
import chalk from "chalk";
|
|
4
|
+
|
|
5
|
+
// package.json
|
|
6
|
+
var package_default = {
|
|
7
|
+
name: "@digdir/designsystemet",
|
|
8
|
+
version: "1.0.6",
|
|
9
|
+
description: "CLI for Designsystemet",
|
|
10
|
+
author: "Designsystemet team",
|
|
11
|
+
engines: {
|
|
12
|
+
node: ">=22.15.0"
|
|
13
|
+
},
|
|
14
|
+
repository: {
|
|
15
|
+
type: "git",
|
|
16
|
+
url: "git+https://github.com/digdir/designsystemet.git"
|
|
17
|
+
},
|
|
18
|
+
homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
|
|
19
|
+
license: "MIT",
|
|
20
|
+
type: "module",
|
|
21
|
+
main: "./dist/src/index.js",
|
|
22
|
+
files: [
|
|
23
|
+
"./dist/**"
|
|
24
|
+
],
|
|
25
|
+
bin: "dist/bin/designsystemet.js",
|
|
26
|
+
exports: {
|
|
27
|
+
".": {
|
|
28
|
+
import: "./dist/src/index.js"
|
|
29
|
+
},
|
|
30
|
+
"./color": {
|
|
31
|
+
import: "./dist/src/colors/index.js"
|
|
32
|
+
},
|
|
33
|
+
"./tokens": {
|
|
34
|
+
import: "./dist/src/tokens/index.js"
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
publishConfig: {
|
|
38
|
+
access: "public"
|
|
39
|
+
},
|
|
40
|
+
scripts: {
|
|
41
|
+
designsystemet: "tsx ./bin/designsystemet.ts",
|
|
42
|
+
"build:tokens": "pnpm run designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
|
|
43
|
+
"build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
|
|
44
|
+
build: "tsup && pnpm build:types && pnpm build:json-schema",
|
|
45
|
+
"build:types": "tsc --emitDeclarationOnly --declaration",
|
|
46
|
+
"build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
|
|
47
|
+
types: "tsc --noEmit",
|
|
48
|
+
"test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./test-tokens/options --theme options --clean',
|
|
49
|
+
"test:tokens-create-config": "pnpm run designsystemet tokens create --config ./test/test-tokens.config.json",
|
|
50
|
+
"test:tokens-build": "pnpm run designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
|
|
51
|
+
"test:tokens-build-config": "pnpm run designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
|
|
52
|
+
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
53
|
+
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
54
|
+
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
55
|
+
"internal:tokens-create": "pnpm run designsystemet tokens create --config ./internal.config.json",
|
|
56
|
+
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
57
|
+
"update:design-tokens": "pnpm internal:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
|
|
58
|
+
verify: "pnpm test && pnpm update:template && pnpm update:design-tokens"
|
|
59
|
+
},
|
|
60
|
+
dependencies: {
|
|
61
|
+
"@commander-js/extra-typings": "^13.1.0",
|
|
62
|
+
"@tokens-studio/sd-transforms": "1.3.0",
|
|
63
|
+
"apca-w3": "^0.1.9",
|
|
64
|
+
chalk: "^5.4.1",
|
|
65
|
+
"change-case": "^5.4.4",
|
|
66
|
+
"chroma-js": "^3.1.2",
|
|
67
|
+
"colorjs.io": "^0.6.0-alpha.1",
|
|
68
|
+
commander: "^13.1.0",
|
|
69
|
+
"fast-glob": "^3.3.3",
|
|
70
|
+
hsluv: "^1.0.1",
|
|
71
|
+
"object-hash": "^3.0.0",
|
|
72
|
+
postcss: "^8.5.3",
|
|
73
|
+
ramda: "^0.30.1",
|
|
74
|
+
"style-dictionary": "^4.4.0",
|
|
75
|
+
zod: "^3.24.4",
|
|
76
|
+
"zod-validation-error": "^3.4.0"
|
|
77
|
+
},
|
|
78
|
+
devDependencies: {
|
|
79
|
+
"@tokens-studio/types": "0.5.2",
|
|
80
|
+
"@types/apca-w3": "^0.1.3",
|
|
81
|
+
"@types/chroma-js": "^3.1.1",
|
|
82
|
+
"@types/fs-extra": "^11.0.4",
|
|
83
|
+
"@types/glob": "^8.1.0",
|
|
84
|
+
"@types/jscodeshift": "^0.12.0",
|
|
85
|
+
"@types/node": "^22.15.3",
|
|
86
|
+
"@types/object-hash": "^3.0.6",
|
|
87
|
+
"@types/ramda": "^0.30.2",
|
|
88
|
+
"fs-extra": "^11.3.0",
|
|
89
|
+
"ts-toolbelt": "^9.6.0",
|
|
90
|
+
tslib: "^2.8.1",
|
|
91
|
+
tsup: "^8.4.0",
|
|
92
|
+
tsx: "^4.19.4",
|
|
93
|
+
typescript: "^5.8.3",
|
|
94
|
+
"zod-to-json-schema": "^3.24.5"
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
// src/tokens/process/theme.ts
|
|
99
|
+
var defaultFileHeader = `build: v${package_default.version}`;
|
|
100
|
+
var createThemeCSSFiles = ({
|
|
101
|
+
processedBuilds,
|
|
102
|
+
fileHeader = defaultFileHeader
|
|
103
|
+
}) => {
|
|
104
|
+
const groupedByTheme = {};
|
|
105
|
+
for (const [_, buildResults] of Object.entries(R.dissoc("types", processedBuilds))) {
|
|
106
|
+
for (const buildResult of buildResults) {
|
|
107
|
+
const themeName = buildResult.permutation.theme;
|
|
108
|
+
const newOutputs = buildResult.formatted;
|
|
109
|
+
if (R.isNotEmpty(newOutputs)) {
|
|
110
|
+
const currentOutputs = groupedByTheme[themeName] ?? [];
|
|
111
|
+
groupedByTheme[themeName] = R.concat(currentOutputs, newOutputs);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
const sortOrder = [
|
|
116
|
+
"color-scheme/light",
|
|
117
|
+
"typography/secondary",
|
|
118
|
+
"semantic",
|
|
119
|
+
"color-scheme/dark",
|
|
120
|
+
"color-scheme/contrast",
|
|
121
|
+
"typography/primary",
|
|
122
|
+
"color/"
|
|
123
|
+
];
|
|
124
|
+
const sortByDefinedOrder = R.sortBy((file) => {
|
|
125
|
+
const filePath = file.destination || "";
|
|
126
|
+
const sortIndex = sortOrder.findIndex((sortElement) => {
|
|
127
|
+
if (sortElement.endsWith("/")) {
|
|
128
|
+
return filePath.includes(sortElement);
|
|
129
|
+
}
|
|
130
|
+
return filePath.includes(`${sortElement}.css`);
|
|
131
|
+
});
|
|
132
|
+
if (sortIndex === -1) {
|
|
133
|
+
console.error(
|
|
134
|
+
chalk.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
|
|
135
|
+
);
|
|
136
|
+
console.log(
|
|
137
|
+
chalk.dim(
|
|
138
|
+
`
|
|
139
|
+
The section will currently be added to the end of the entry file, but the exact
|
|
140
|
+
order may change due to nondeterminism.`.trim()
|
|
141
|
+
)
|
|
142
|
+
);
|
|
143
|
+
return Infinity;
|
|
144
|
+
}
|
|
145
|
+
return sortIndex;
|
|
146
|
+
});
|
|
147
|
+
const header = `@charset "UTF-8";
|
|
148
|
+
|
|
149
|
+
@layer ds.theme, ds.base, ds.utilities, ds.components;
|
|
150
|
+
|
|
151
|
+
/*
|
|
152
|
+
${fileHeader}
|
|
153
|
+
*/
|
|
154
|
+
|
|
155
|
+
`;
|
|
156
|
+
const sortAlphabetically = R.sort(R.ascend((x) => x.destination || ""));
|
|
157
|
+
const pickOutputs = R.map(R.view(R.lensProp("output")));
|
|
158
|
+
const themeCSSFile = R.pipe(
|
|
159
|
+
sortAlphabetically,
|
|
160
|
+
sortByDefinedOrder,
|
|
161
|
+
pickOutputs,
|
|
162
|
+
R.join("\n"),
|
|
163
|
+
(content) => header + content
|
|
164
|
+
);
|
|
165
|
+
const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
|
|
166
|
+
destination: `${theme}.css`,
|
|
167
|
+
output: themeCSSFile(files)
|
|
168
|
+
}));
|
|
169
|
+
return themeCSSFiles;
|
|
170
|
+
};
|
|
171
|
+
export {
|
|
172
|
+
createThemeCSSFiles,
|
|
173
|
+
defaultFileHeader
|
|
174
|
+
};
|