@digdir/designsystemet 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/configs/test-tokens.config.json +15 -1
- package/dist/bin/config.js +14 -3
- package/dist/bin/designsystemet.js +105 -43
- package/dist/config.schema.json +52 -0
- package/dist/src/colors/colorMetadata.d.ts +1 -0
- package/dist/src/colors/colorMetadata.d.ts.map +1 -1
- package/dist/src/colors/colorMetadata.js +2 -0
- package/dist/src/colors/index.js +2 -0
- package/dist/src/colors/theme.js +1 -0
- package/dist/src/config.d.ts +70 -0
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +12 -1
- package/dist/src/index.js +90 -37
- package/dist/src/scripts/createJsonSchema.js +12 -1
- package/dist/src/scripts/update-preview-tokens.js +80 -28
- package/dist/src/tokens/build.js +45 -27
- package/dist/src/tokens/create/generators/$designsystemet.js +9 -9
- package/dist/src/tokens/create/generators/color.d.ts +2 -1
- package/dist/src/tokens/create/generators/color.d.ts.map +1 -1
- package/dist/src/tokens/create/generators/color.js +40 -6
- package/dist/src/tokens/create/write.js +9 -9
- package/dist/src/tokens/create.js +44 -10
- package/dist/src/tokens/format.js +89 -37
- package/dist/src/tokens/index.js +89 -37
- package/dist/src/tokens/process/configs/color.js +31 -13
- package/dist/src/tokens/process/configs/semantic.js +31 -13
- package/dist/src/tokens/process/configs/size-mode.js +31 -13
- package/dist/src/tokens/process/configs/size.js +31 -13
- package/dist/src/tokens/process/configs/type-scale.js +31 -13
- package/dist/src/tokens/process/configs/typography.js +31 -13
- package/dist/src/tokens/process/configs.js +36 -18
- package/dist/src/tokens/process/formats/css/color.js +31 -13
- package/dist/src/tokens/process/formats/css/semantic.js +31 -13
- package/dist/src/tokens/process/formats/css/size-mode.js +31 -13
- package/dist/src/tokens/process/formats/css/size.d.ts +4 -0
- package/dist/src/tokens/process/formats/css/size.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/size.js +33 -14
- package/dist/src/tokens/process/formats/css/type-scale.d.ts.map +1 -1
- package/dist/src/tokens/process/formats/css/type-scale.js +31 -13
- package/dist/src/tokens/process/formats/css/typography.js +33 -15
- package/dist/src/tokens/process/formats/css.js +31 -13
- package/dist/src/tokens/process/output/declarations.js +40 -22
- package/dist/src/tokens/process/output/theme.js +9 -9
- package/dist/src/tokens/process/platform.js +36 -18
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +31 -13
- package/dist/src/tokens/types.d.ts +1 -1
- package/dist/src/tokens/types.d.ts.map +1 -1
- package/package.json +9 -9
|
@@ -367,7 +367,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
|
367
367
|
};
|
|
368
368
|
|
|
369
369
|
// src/tokens/process/configs/type-scale.ts
|
|
370
|
-
var typeScaleVariables = ({ theme
|
|
370
|
+
var typeScaleVariables = ({ theme }) => {
|
|
371
371
|
const selector = ":root, [data-size]";
|
|
372
372
|
const layer = `ds.theme.type-scale`;
|
|
373
373
|
return {
|
|
@@ -1011,13 +1011,33 @@ ${content}
|
|
|
1011
1011
|
// src/tokens/process/formats/css/type-scale.ts
|
|
1012
1012
|
import * as R15 from "ramda";
|
|
1013
1013
|
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
1014
|
-
var
|
|
1014
|
+
var isTypographyFontFamilyToken = R15.allPass([
|
|
1015
1015
|
R15.pathSatisfies(R15.includes("typography"), ["path"]),
|
|
1016
1016
|
R15.pathSatisfies(R15.includes("fontFamily"), ["path"])
|
|
1017
1017
|
]);
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1018
|
+
var formatTypographySizeToken = (format, token) => {
|
|
1019
|
+
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
1020
|
+
let calc;
|
|
1021
|
+
let round;
|
|
1022
|
+
if (R15.startsWith(["font-size"], token.path)) {
|
|
1023
|
+
calc = `calc(${value} * var(--_ds-font-size-factor))`;
|
|
1024
|
+
round = `round(${calc}, 1px)`;
|
|
1025
|
+
} else {
|
|
1026
|
+
calc = value;
|
|
1027
|
+
}
|
|
1028
|
+
return { name, calc, round: round ?? calc };
|
|
1029
|
+
};
|
|
1030
|
+
var formatTypographySizeTokens = (format, tokens) => R15.reduce(
|
|
1031
|
+
(acc, token) => {
|
|
1032
|
+
const { name, calc, round } = formatTypographySizeToken(format, token);
|
|
1033
|
+
acc.tokens.push(token);
|
|
1034
|
+
acc.calc.push(`${name}: ${calc};`);
|
|
1035
|
+
acc.round.push(`${name}: ${round};`);
|
|
1036
|
+
return acc;
|
|
1037
|
+
},
|
|
1038
|
+
{ tokens: [], calc: [], round: [] },
|
|
1039
|
+
tokens
|
|
1040
|
+
);
|
|
1021
1041
|
var typeScale = {
|
|
1022
1042
|
name: "ds/css-type-scale",
|
|
1023
1043
|
format: async ({ dictionary, file, options, platform }) => {
|
|
@@ -1030,18 +1050,16 @@ var typeScale = {
|
|
|
1030
1050
|
format: "css",
|
|
1031
1051
|
usesDtcg
|
|
1032
1052
|
});
|
|
1033
|
-
const filteredTokens = R15.reject(
|
|
1034
|
-
const
|
|
1035
|
-
const formattedMap =
|
|
1036
|
-
token,
|
|
1037
|
-
formatted:
|
|
1053
|
+
const filteredTokens = R15.reject(R15.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
|
|
1054
|
+
const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
|
|
1055
|
+
const formattedMap = formattedTokens.round.map((t, i) => ({
|
|
1056
|
+
token: formattedTokens.tokens[i],
|
|
1057
|
+
formatted: t
|
|
1038
1058
|
}));
|
|
1039
1059
|
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
1040
|
-
const formattedTokens = formattedMap.map(R15.prop("formatted")).join("\n");
|
|
1041
1060
|
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
1042
1061
|
const content = `${selector} {
|
|
1043
|
-
${sizeFactor}
|
|
1044
|
-
${formattedTokens}
|
|
1062
|
+
${sizeFactor}${sizingTemplate(formattedTokens)}
|
|
1045
1063
|
}`;
|
|
1046
1064
|
const body = R15.isNotNil(layer) ? `@layer ${layer} {
|
|
1047
1065
|
${content}
|
|
@@ -4,11 +4,11 @@ import pc3 from "picocolors";
|
|
|
4
4
|
// package.json
|
|
5
5
|
var package_default = {
|
|
6
6
|
name: "@digdir/designsystemet",
|
|
7
|
-
version: "1.
|
|
7
|
+
version: "1.6.0",
|
|
8
8
|
description: "CLI for Designsystemet",
|
|
9
9
|
author: "Designsystemet team",
|
|
10
10
|
engines: {
|
|
11
|
-
node: ">=
|
|
11
|
+
node: ">=20 <25"
|
|
12
12
|
},
|
|
13
13
|
repository: {
|
|
14
14
|
type: "git",
|
|
@@ -56,7 +56,7 @@ var package_default = {
|
|
|
56
56
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
57
57
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
58
58
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
59
|
-
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
59
|
+
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
60
60
|
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
61
61
|
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
62
62
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
@@ -71,7 +71,7 @@ var package_default = {
|
|
|
71
71
|
"change-case": "^5.4.4",
|
|
72
72
|
"chroma-js": "^3.1.2",
|
|
73
73
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
74
|
-
commander: "^14.0.
|
|
74
|
+
commander: "^14.0.1",
|
|
75
75
|
"fast-glob": "^3.3.3",
|
|
76
76
|
hsluv: "^1.0.1",
|
|
77
77
|
"object-hash": "^3.0.0",
|
|
@@ -79,18 +79,18 @@ var package_default = {
|
|
|
79
79
|
postcss: "^8.5.6",
|
|
80
80
|
ramda: "^0.31.3",
|
|
81
81
|
"style-dictionary": "^5.0.4",
|
|
82
|
-
zod: "^4.1.
|
|
83
|
-
"zod-validation-error": "^4.0.
|
|
82
|
+
zod: "^4.1.11",
|
|
83
|
+
"zod-validation-error": "^4.0.2"
|
|
84
84
|
},
|
|
85
85
|
devDependencies: {
|
|
86
86
|
"@tokens-studio/types": "0.5.2",
|
|
87
87
|
"@types/apca-w3": "^0.1.3",
|
|
88
88
|
"@types/chroma-js": "^3.1.1",
|
|
89
89
|
"@types/fs-extra": "^11.0.4",
|
|
90
|
-
"@types/node": "^22.18.
|
|
90
|
+
"@types/node": "^22.18.6",
|
|
91
91
|
"@types/object-hash": "^3.0.6",
|
|
92
|
-
"@types/ramda": "^0.31.
|
|
93
|
-
"fs-extra": "^11.3.
|
|
92
|
+
"@types/ramda": "^0.31.1",
|
|
93
|
+
"fs-extra": "^11.3.2",
|
|
94
94
|
tslib: "^2.8.1",
|
|
95
95
|
tsup: "^8.5.0",
|
|
96
96
|
tsx: "^4.20.5",
|
|
@@ -592,13 +592,33 @@ ${content}
|
|
|
592
592
|
// src/tokens/process/formats/css/type-scale.ts
|
|
593
593
|
import * as R8 from "ramda";
|
|
594
594
|
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
595
|
-
var
|
|
595
|
+
var isTypographyFontFamilyToken = R8.allPass([
|
|
596
596
|
R8.pathSatisfies(R8.includes("typography"), ["path"]),
|
|
597
597
|
R8.pathSatisfies(R8.includes("fontFamily"), ["path"])
|
|
598
598
|
]);
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
599
|
+
var formatTypographySizeToken = (format, token) => {
|
|
600
|
+
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
601
|
+
let calc;
|
|
602
|
+
let round;
|
|
603
|
+
if (R8.startsWith(["font-size"], token.path)) {
|
|
604
|
+
calc = `calc(${value} * var(--_ds-font-size-factor))`;
|
|
605
|
+
round = `round(${calc}, 1px)`;
|
|
606
|
+
} else {
|
|
607
|
+
calc = value;
|
|
608
|
+
}
|
|
609
|
+
return { name, calc, round: round ?? calc };
|
|
610
|
+
};
|
|
611
|
+
var formatTypographySizeTokens = (format, tokens) => R8.reduce(
|
|
612
|
+
(acc, token) => {
|
|
613
|
+
const { name, calc, round } = formatTypographySizeToken(format, token);
|
|
614
|
+
acc.tokens.push(token);
|
|
615
|
+
acc.calc.push(`${name}: ${calc};`);
|
|
616
|
+
acc.round.push(`${name}: ${round};`);
|
|
617
|
+
return acc;
|
|
618
|
+
},
|
|
619
|
+
{ tokens: [], calc: [], round: [] },
|
|
620
|
+
tokens
|
|
621
|
+
);
|
|
602
622
|
var typeScale = {
|
|
603
623
|
name: "ds/css-type-scale",
|
|
604
624
|
format: async ({ dictionary, file, options, platform }) => {
|
|
@@ -611,18 +631,16 @@ var typeScale = {
|
|
|
611
631
|
format: "css",
|
|
612
632
|
usesDtcg
|
|
613
633
|
});
|
|
614
|
-
const filteredTokens = R8.reject(
|
|
615
|
-
const
|
|
616
|
-
const formattedMap =
|
|
617
|
-
token,
|
|
618
|
-
formatted:
|
|
634
|
+
const filteredTokens = R8.reject(R8.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
|
|
635
|
+
const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
|
|
636
|
+
const formattedMap = formattedTokens.round.map((t, i) => ({
|
|
637
|
+
token: formattedTokens.tokens[i],
|
|
638
|
+
formatted: t
|
|
619
639
|
}));
|
|
620
640
|
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
621
|
-
const formattedTokens = formattedMap.map(R8.prop("formatted")).join("\n");
|
|
622
641
|
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
623
642
|
const content = `${selector} {
|
|
624
|
-
${sizeFactor}
|
|
625
|
-
${formattedTokens}
|
|
643
|
+
${sizeFactor}${sizingTemplate(formattedTokens)}
|
|
626
644
|
}`;
|
|
627
645
|
const body = R8.isNotNil(layer) ? `@layer ${layer} {
|
|
628
646
|
${content}
|
|
@@ -835,7 +853,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
|
835
853
|
};
|
|
836
854
|
|
|
837
855
|
// src/tokens/process/configs/type-scale.ts
|
|
838
|
-
var typeScaleVariables = ({ theme
|
|
856
|
+
var typeScaleVariables = ({ theme }) => {
|
|
839
857
|
const selector = ":root, [data-size]";
|
|
840
858
|
const layer = `ds.theme.type-scale`;
|
|
841
859
|
return {
|
|
@@ -5,11 +5,11 @@ import * as R2 from "ramda";
|
|
|
5
5
|
// package.json
|
|
6
6
|
var package_default = {
|
|
7
7
|
name: "@digdir/designsystemet",
|
|
8
|
-
version: "1.
|
|
8
|
+
version: "1.6.0",
|
|
9
9
|
description: "CLI for Designsystemet",
|
|
10
10
|
author: "Designsystemet team",
|
|
11
11
|
engines: {
|
|
12
|
-
node: ">=
|
|
12
|
+
node: ">=20 <25"
|
|
13
13
|
},
|
|
14
14
|
repository: {
|
|
15
15
|
type: "git",
|
|
@@ -57,7 +57,7 @@ var package_default = {
|
|
|
57
57
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
58
58
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
59
59
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
60
|
-
test: "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
60
|
+
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
61
61
|
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
62
62
|
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
63
63
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
@@ -72,7 +72,7 @@ var package_default = {
|
|
|
72
72
|
"change-case": "^5.4.4",
|
|
73
73
|
"chroma-js": "^3.1.2",
|
|
74
74
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
75
|
-
commander: "^14.0.
|
|
75
|
+
commander: "^14.0.1",
|
|
76
76
|
"fast-glob": "^3.3.3",
|
|
77
77
|
hsluv: "^1.0.1",
|
|
78
78
|
"object-hash": "^3.0.0",
|
|
@@ -80,18 +80,18 @@ var package_default = {
|
|
|
80
80
|
postcss: "^8.5.6",
|
|
81
81
|
ramda: "^0.31.3",
|
|
82
82
|
"style-dictionary": "^5.0.4",
|
|
83
|
-
zod: "^4.1.
|
|
84
|
-
"zod-validation-error": "^4.0.
|
|
83
|
+
zod: "^4.1.11",
|
|
84
|
+
"zod-validation-error": "^4.0.2"
|
|
85
85
|
},
|
|
86
86
|
devDependencies: {
|
|
87
87
|
"@tokens-studio/types": "0.5.2",
|
|
88
88
|
"@types/apca-w3": "^0.1.3",
|
|
89
89
|
"@types/chroma-js": "^3.1.1",
|
|
90
90
|
"@types/fs-extra": "^11.0.4",
|
|
91
|
-
"@types/node": "^22.18.
|
|
91
|
+
"@types/node": "^22.18.6",
|
|
92
92
|
"@types/object-hash": "^3.0.6",
|
|
93
|
-
"@types/ramda": "^0.31.
|
|
94
|
-
"fs-extra": "^11.3.
|
|
93
|
+
"@types/ramda": "^0.31.1",
|
|
94
|
+
"fs-extra": "^11.3.2",
|
|
95
95
|
tslib: "^2.8.1",
|
|
96
96
|
tsup: "^8.5.0",
|
|
97
97
|
tsx: "^4.20.5",
|
|
@@ -61,11 +61,11 @@ function isColorCategoryToken(token, category) {
|
|
|
61
61
|
var isDigit = (s) => /^\d+$/.test(s);
|
|
62
62
|
function traverseObj(obj, fn) {
|
|
63
63
|
for (const key in obj) {
|
|
64
|
-
const
|
|
65
|
-
if (
|
|
66
|
-
fn.apply(null, [obj, key,
|
|
67
|
-
if (typeof
|
|
68
|
-
traverseObj(
|
|
64
|
+
const prop3 = obj[key];
|
|
65
|
+
if (prop3 != null) {
|
|
66
|
+
fn.apply(null, [obj, key, prop3]);
|
|
67
|
+
if (typeof prop3 === "object") {
|
|
68
|
+
traverseObj(prop3, fn);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
}
|
|
@@ -504,13 +504,33 @@ ${content}
|
|
|
504
504
|
// src/tokens/process/formats/css/type-scale.ts
|
|
505
505
|
import * as R8 from "ramda";
|
|
506
506
|
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
507
|
-
var
|
|
507
|
+
var isTypographyFontFamilyToken = R8.allPass([
|
|
508
508
|
R8.pathSatisfies(R8.includes("typography"), ["path"]),
|
|
509
509
|
R8.pathSatisfies(R8.includes("fontFamily"), ["path"])
|
|
510
510
|
]);
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
511
|
+
var formatTypographySizeToken = (format, token) => {
|
|
512
|
+
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
513
|
+
let calc;
|
|
514
|
+
let round;
|
|
515
|
+
if (R8.startsWith(["font-size"], token.path)) {
|
|
516
|
+
calc = `calc(${value} * var(--_ds-font-size-factor))`;
|
|
517
|
+
round = `round(${calc}, 1px)`;
|
|
518
|
+
} else {
|
|
519
|
+
calc = value;
|
|
520
|
+
}
|
|
521
|
+
return { name, calc, round: round ?? calc };
|
|
522
|
+
};
|
|
523
|
+
var formatTypographySizeTokens = (format, tokens) => R8.reduce(
|
|
524
|
+
(acc, token) => {
|
|
525
|
+
const { name, calc, round } = formatTypographySizeToken(format, token);
|
|
526
|
+
acc.tokens.push(token);
|
|
527
|
+
acc.calc.push(`${name}: ${calc};`);
|
|
528
|
+
acc.round.push(`${name}: ${round};`);
|
|
529
|
+
return acc;
|
|
530
|
+
},
|
|
531
|
+
{ tokens: [], calc: [], round: [] },
|
|
532
|
+
tokens
|
|
533
|
+
);
|
|
514
534
|
var typeScale = {
|
|
515
535
|
name: "ds/css-type-scale",
|
|
516
536
|
format: async ({ dictionary, file, options, platform }) => {
|
|
@@ -523,18 +543,16 @@ var typeScale = {
|
|
|
523
543
|
format: "css",
|
|
524
544
|
usesDtcg
|
|
525
545
|
});
|
|
526
|
-
const filteredTokens = R8.reject(
|
|
527
|
-
const
|
|
528
|
-
const formattedMap =
|
|
529
|
-
token,
|
|
530
|
-
formatted:
|
|
546
|
+
const filteredTokens = R8.reject(R8.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
|
|
547
|
+
const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
|
|
548
|
+
const formattedMap = formattedTokens.round.map((t, i) => ({
|
|
549
|
+
token: formattedTokens.tokens[i],
|
|
550
|
+
formatted: t
|
|
531
551
|
}));
|
|
532
552
|
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
533
|
-
const formattedTokens = formattedMap.map(R8.prop("formatted")).join("\n");
|
|
534
553
|
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
535
554
|
const content = `${selector} {
|
|
536
|
-
${sizeFactor}
|
|
537
|
-
${formattedTokens}
|
|
555
|
+
${sizeFactor}${sizingTemplate(formattedTokens)}
|
|
538
556
|
}`;
|
|
539
557
|
const body = R8.isNotNil(layer) ? `@layer ${layer} {
|
|
540
558
|
${content}
|
|
@@ -747,7 +765,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
|
747
765
|
};
|
|
748
766
|
|
|
749
767
|
// src/tokens/process/configs/type-scale.ts
|
|
750
|
-
var typeScaleVariables = ({ theme
|
|
768
|
+
var typeScaleVariables = ({ theme }) => {
|
|
751
769
|
const selector = ":root, [data-size]";
|
|
752
770
|
const layer = `ds.theme.type-scale`;
|
|
753
771
|
return {
|
|
@@ -660,13 +660,33 @@ ${content}
|
|
|
660
660
|
// src/tokens/process/formats/css/type-scale.ts
|
|
661
661
|
import * as R8 from "ramda";
|
|
662
662
|
import { createPropertyFormatter as createPropertyFormatter6 } from "style-dictionary/utils";
|
|
663
|
-
var
|
|
663
|
+
var isTypographyFontFamilyToken = R8.allPass([
|
|
664
664
|
R8.pathSatisfies(R8.includes("typography"), ["path"]),
|
|
665
665
|
R8.pathSatisfies(R8.includes("fontFamily"), ["path"])
|
|
666
666
|
]);
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
667
|
+
var formatTypographySizeToken = (format, token) => {
|
|
668
|
+
const [name, value] = format(token).replace(/;$/, "").split(": ");
|
|
669
|
+
let calc;
|
|
670
|
+
let round;
|
|
671
|
+
if (R8.startsWith(["font-size"], token.path)) {
|
|
672
|
+
calc = `calc(${value} * var(--_ds-font-size-factor))`;
|
|
673
|
+
round = `round(${calc}, 1px)`;
|
|
674
|
+
} else {
|
|
675
|
+
calc = value;
|
|
676
|
+
}
|
|
677
|
+
return { name, calc, round: round ?? calc };
|
|
678
|
+
};
|
|
679
|
+
var formatTypographySizeTokens = (format, tokens) => R8.reduce(
|
|
680
|
+
(acc, token) => {
|
|
681
|
+
const { name, calc, round } = formatTypographySizeToken(format, token);
|
|
682
|
+
acc.tokens.push(token);
|
|
683
|
+
acc.calc.push(`${name}: ${calc};`);
|
|
684
|
+
acc.round.push(`${name}: ${round};`);
|
|
685
|
+
return acc;
|
|
686
|
+
},
|
|
687
|
+
{ tokens: [], calc: [], round: [] },
|
|
688
|
+
tokens
|
|
689
|
+
);
|
|
670
690
|
var typeScale = {
|
|
671
691
|
name: "ds/css-type-scale",
|
|
672
692
|
format: async ({ dictionary, file, options, platform }) => {
|
|
@@ -679,18 +699,16 @@ var typeScale = {
|
|
|
679
699
|
format: "css",
|
|
680
700
|
usesDtcg
|
|
681
701
|
});
|
|
682
|
-
const filteredTokens = R8.reject(
|
|
683
|
-
const
|
|
684
|
-
const formattedMap =
|
|
685
|
-
token,
|
|
686
|
-
formatted:
|
|
702
|
+
const filteredTokens = R8.reject(R8.anyPass([isTypographyFontFamilyToken]), dictionary.allTokens);
|
|
703
|
+
const formattedTokens = formatTypographySizeTokens(format, filteredTokens);
|
|
704
|
+
const formattedMap = formattedTokens.round.map((t, i) => ({
|
|
705
|
+
token: formattedTokens.tokens[i],
|
|
706
|
+
formatted: t
|
|
687
707
|
}));
|
|
688
708
|
buildOptions.buildTokenFormats[destination] = formattedMap;
|
|
689
|
-
const formattedTokens = formattedMap.map(R8.prop("formatted")).join("\n");
|
|
690
709
|
const sizeFactor = ` --_ds-font-size-factor: calc(var(--ds-size-mode-font-size) / (var(--ds-size-base) / ${basePxFontSize}));`;
|
|
691
710
|
const content = `${selector} {
|
|
692
|
-
${sizeFactor}
|
|
693
|
-
${formattedTokens}
|
|
711
|
+
${sizeFactor}${sizingTemplate(formattedTokens)}
|
|
694
712
|
}`;
|
|
695
713
|
const body = R8.isNotNil(layer) ? `@layer ${layer} {
|
|
696
714
|
${content}
|
|
@@ -903,7 +921,7 @@ var sizeModeVariables = ({ theme, size: size2 }) => {
|
|
|
903
921
|
};
|
|
904
922
|
|
|
905
923
|
// src/tokens/process/configs/type-scale.ts
|
|
906
|
-
var typeScaleVariables = ({ theme
|
|
924
|
+
var typeScaleVariables = ({ theme }) => {
|
|
907
925
|
const selector = ":root, [data-size]";
|
|
908
926
|
const layer = `ds.theme.type-scale`;
|
|
909
927
|
return {
|
|
@@ -13,7 +13,7 @@ export type Colors = Theme['colors'];
|
|
|
13
13
|
export type Typography = Theme['typography'];
|
|
14
14
|
export type Theme = {
|
|
15
15
|
name: string;
|
|
16
|
-
} & Required<ConfigSchemaTheme>;
|
|
16
|
+
} & Required<Omit<ConfigSchemaTheme, 'overrides'>> & Pick<ConfigSchemaTheme, 'overrides'>;
|
|
17
17
|
export declare const colorCategories: {
|
|
18
18
|
readonly main: "main";
|
|
19
19
|
readonly support: "support";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACjF,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAE5E,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACjF,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CACjC,CAAC;AACF,MAAM,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AAE9C,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAE7C,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC,GAChD,IAAI,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAEvC,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,MAAM,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE9F,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@digdir/designsystemet",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "CLI for Designsystemet",
|
|
5
5
|
"author": "Designsystemet team",
|
|
6
6
|
"engines": {
|
|
7
|
-
"node": ">=
|
|
7
|
+
"node": ">=20 <25"
|
|
8
8
|
},
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"change-case": "^5.4.4",
|
|
44
44
|
"chroma-js": "^3.1.2",
|
|
45
45
|
"colorjs.io": "^0.6.0-alpha.1",
|
|
46
|
-
"commander": "^14.0.
|
|
46
|
+
"commander": "^14.0.1",
|
|
47
47
|
"fast-glob": "^3.3.3",
|
|
48
48
|
"hsluv": "^1.0.1",
|
|
49
49
|
"object-hash": "^3.0.0",
|
|
@@ -51,18 +51,18 @@
|
|
|
51
51
|
"postcss": "^8.5.6",
|
|
52
52
|
"ramda": "^0.31.3",
|
|
53
53
|
"style-dictionary": "^5.0.4",
|
|
54
|
-
"zod": "^4.1.
|
|
55
|
-
"zod-validation-error": "^4.0.
|
|
54
|
+
"zod": "^4.1.11",
|
|
55
|
+
"zod-validation-error": "^4.0.2"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@tokens-studio/types": "0.5.2",
|
|
59
59
|
"@types/apca-w3": "^0.1.3",
|
|
60
60
|
"@types/chroma-js": "^3.1.1",
|
|
61
61
|
"@types/fs-extra": "^11.0.4",
|
|
62
|
-
"@types/node": "^22.18.
|
|
62
|
+
"@types/node": "^22.18.6",
|
|
63
63
|
"@types/object-hash": "^3.0.6",
|
|
64
|
-
"@types/ramda": "^0.31.
|
|
65
|
-
"fs-extra": "^11.3.
|
|
64
|
+
"@types/ramda": "^0.31.1",
|
|
65
|
+
"fs-extra": "^11.3.2",
|
|
66
66
|
"tslib": "^2.8.1",
|
|
67
67
|
"tsup": "^8.5.0",
|
|
68
68
|
"tsx": "^4.20.5",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
85
85
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
86
86
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
87
|
-
"test": "pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
87
|
+
"test": "node -v && pnpm test:tokens-create-and-build-options && pnpm test:tokens-create-and-build-config",
|
|
88
88
|
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
89
89
|
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
90
90
|
"update:template": "tsx ./src/scripts/update-template.ts",
|