@digdir/designsystemet 1.8.0 → 1.10.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 +10 -0
- package/dist/bin/config.js +12 -1
- package/dist/bin/designsystemet.js +56 -22
- package/dist/{color.base.template-QGZJKXMN.json → color.base.template-Z7YWN2TF.json} +2 -2
- package/dist/config.schema.json +63 -30
- package/dist/src/config.d.ts +30 -0
- package/dist/src/config.d.ts.map +1 -1
- package/dist/src/config.js +12 -1
- package/dist/src/index.js +56 -22
- package/dist/src/scripts/createJsonSchema.js +12 -1
- package/dist/src/scripts/update-preview-tokens.js +50 -58
- package/dist/src/scripts/update-template.js +12 -2
- package/dist/src/tokens/build.js +14 -17
- package/dist/src/tokens/create/generators/$designsystemet.js +7 -16
- package/dist/src/tokens/create/generators/color.d.ts.map +1 -1
- package/dist/src/tokens/create/generators/color.js +18 -2
- package/dist/src/tokens/create/generators/semantic.js +2 -2
- package/dist/src/tokens/create/generators/theme.d.ts.map +1 -1
- package/dist/src/tokens/create/generators/theme.js +10 -0
- package/dist/src/tokens/create/write.js +7 -16
- package/dist/src/tokens/create.js +30 -4
- package/dist/src/tokens/format.js +44 -21
- package/dist/src/tokens/index.js +44 -21
- package/dist/src/tokens/process/configs/color.js +0 -1
- package/dist/src/tokens/process/configs/semantic.js +0 -1
- package/dist/src/tokens/process/configs/size-mode.js +0 -1
- package/dist/src/tokens/process/configs/size.js +0 -1
- package/dist/src/tokens/process/configs/type-scale.js +0 -1
- package/dist/src/tokens/process/configs/typography.js +0 -1
- package/dist/src/tokens/process/configs.js +0 -1
- package/dist/src/tokens/process/formats/css/color.js +0 -1
- package/dist/src/tokens/process/formats/css/semantic.js +0 -1
- package/dist/src/tokens/process/formats/css/size-mode.js +0 -1
- package/dist/src/tokens/process/formats/css/size.js +0 -1
- package/dist/src/tokens/process/formats/css/type-scale.js +0 -1
- package/dist/src/tokens/process/formats/css/typography.js +0 -1
- package/dist/src/tokens/process/formats/css.js +0 -1
- package/dist/src/tokens/process/output/declarations.js +7 -17
- package/dist/src/tokens/process/output/theme.js +7 -16
- package/dist/src/tokens/process/platform.js +0 -1
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -1
- package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +5 -1
- package/dist/src/tokens/process/utils/kebab-case.d.ts +5 -0
- package/dist/src/tokens/process/utils/kebab-case.d.ts.map +1 -0
- package/dist/src/tokens/process/utils/kebab-case.js +7 -0
- package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +1 -1
- package/package.json +8 -17
- package/configs/digdir.config.json +0 -63
- package/dist/src/scripts/update-design-tokens.d.ts +0 -2
- package/dist/src/scripts/update-design-tokens.d.ts.map +0 -1
- package/dist/src/scripts/update-design-tokens.js +0 -37
|
@@ -46,7 +46,7 @@ var readFile = async (path2, dry, allowFileNotFound) => {
|
|
|
46
46
|
// package.json
|
|
47
47
|
var package_default = {
|
|
48
48
|
name: "@digdir/designsystemet",
|
|
49
|
-
version: "1.
|
|
49
|
+
version: "1.10.0",
|
|
50
50
|
description: "CLI for Designsystemet",
|
|
51
51
|
author: "Designsystemet team",
|
|
52
52
|
engines: {
|
|
@@ -98,23 +98,18 @@ var package_default = {
|
|
|
98
98
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
99
99
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
100
100
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
101
|
-
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/design-tokens --dry",
|
|
101
|
+
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry",
|
|
102
102
|
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|
|
103
|
-
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
104
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
105
103
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
106
104
|
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
107
|
-
|
|
108
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
105
|
+
verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
|
|
109
106
|
},
|
|
110
107
|
dependencies: {
|
|
111
108
|
"@commander-js/extra-typings": "^14.0.0",
|
|
112
109
|
"@digdir/designsystemet-types": "workspace:^",
|
|
113
|
-
"@tokens-studio/sd-transforms": "2.0.
|
|
114
|
-
"apca-w3": "^0.1.9",
|
|
115
|
-
"change-case": "^5.4.4",
|
|
110
|
+
"@tokens-studio/sd-transforms": "2.0.3",
|
|
116
111
|
"chroma-js": "^3.2.0",
|
|
117
|
-
"colorjs.io": "^0.6.0
|
|
112
|
+
"colorjs.io": "^0.6.0",
|
|
118
113
|
commander: "^14.0.2",
|
|
119
114
|
"fast-glob": "^3.3.3",
|
|
120
115
|
hsluv: "^1.0.1",
|
|
@@ -123,19 +118,15 @@ var package_default = {
|
|
|
123
118
|
postcss: "^8.5.6",
|
|
124
119
|
ramda: "^0.32.0",
|
|
125
120
|
"style-dictionary": "^5.1.1",
|
|
126
|
-
zod: "^4.
|
|
121
|
+
zod: "^4.3.5",
|
|
127
122
|
"zod-validation-error": "^4.0.2"
|
|
128
123
|
},
|
|
129
124
|
devDependencies: {
|
|
130
125
|
"@tokens-studio/types": "0.5.2",
|
|
131
|
-
"@types/apca-w3": "^0.1.3",
|
|
132
126
|
"@types/chroma-js": "^3.1.2",
|
|
133
|
-
"@types/
|
|
134
|
-
"@types/node": "^22.19.1",
|
|
127
|
+
"@types/node": "^22.19.3",
|
|
135
128
|
"@types/object-hash": "^3.0.6",
|
|
136
129
|
"@types/ramda": "^0.31.1",
|
|
137
|
-
"fs-extra": "^11.3.2",
|
|
138
|
-
tslib: "^2.8.1",
|
|
139
130
|
tsup: "^8.5.1",
|
|
140
131
|
tsx: "^4.21.0",
|
|
141
132
|
typescript: "^5.9.3"
|
|
@@ -1374,7 +1374,8 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
|
|
|
1374
1374
|
(color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
|
|
1375
1375
|
colors.support
|
|
1376
1376
|
);
|
|
1377
|
-
const
|
|
1377
|
+
const neutralColorScale = generateColorScale(colors.neutral, colorScheme);
|
|
1378
|
+
const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
|
|
1378
1379
|
const baseColorsWithOverrides = {
|
|
1379
1380
|
...baseColors,
|
|
1380
1381
|
...overrides?.severity
|
|
@@ -1384,7 +1385,12 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
|
|
|
1384
1385
|
baseColorsWithOverrides
|
|
1385
1386
|
);
|
|
1386
1387
|
const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme));
|
|
1388
|
+
const defaultLinkVisited = linkColor[12];
|
|
1387
1389
|
const linkOverride = overrides?.linkVisited?.[colorScheme] ? { $type: "color", $value: overrides.linkVisited[colorScheme] } : void 0;
|
|
1390
|
+
const defaultFocusInner = neutralColorScale[0].hex;
|
|
1391
|
+
const defaultFocusOuter = neutralColorScale[10].hex;
|
|
1392
|
+
const focusInnerOverride = overrides?.focus?.inner?.[colorScheme];
|
|
1393
|
+
const focusOuterOverride = overrides?.focus?.outer?.[colorScheme];
|
|
1388
1394
|
return {
|
|
1389
1395
|
[themeName]: {
|
|
1390
1396
|
...main,
|
|
@@ -1392,7 +1398,17 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
|
|
|
1392
1398
|
neutral,
|
|
1393
1399
|
...globalColors,
|
|
1394
1400
|
link: {
|
|
1395
|
-
visited: linkOverride ||
|
|
1401
|
+
visited: linkOverride || defaultLinkVisited
|
|
1402
|
+
},
|
|
1403
|
+
focus: {
|
|
1404
|
+
inner: {
|
|
1405
|
+
$type: "color",
|
|
1406
|
+
$value: focusInnerOverride || defaultFocusInner
|
|
1407
|
+
},
|
|
1408
|
+
outer: {
|
|
1409
|
+
$type: "color",
|
|
1410
|
+
$value: focusOuterOverride || defaultFocusOuter
|
|
1411
|
+
}
|
|
1396
1412
|
}
|
|
1397
1413
|
}
|
|
1398
1414
|
};
|
|
@@ -1407,11 +1423,11 @@ var color_base_template_default = {
|
|
|
1407
1423
|
focus: {
|
|
1408
1424
|
inner: {
|
|
1409
1425
|
$type: "color",
|
|
1410
|
-
$value: "{color.
|
|
1426
|
+
$value: "{color.focus.inner-color}"
|
|
1411
1427
|
},
|
|
1412
1428
|
outer: {
|
|
1413
1429
|
$type: "color",
|
|
1414
|
-
$value: "{color.
|
|
1430
|
+
$value: "{color.focus.outer-color}"
|
|
1415
1431
|
}
|
|
1416
1432
|
}
|
|
1417
1433
|
},
|
|
@@ -1767,6 +1783,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
|
|
|
1767
1783
|
$type: "color",
|
|
1768
1784
|
$value: `{${themeName}.link.visited}`
|
|
1769
1785
|
}
|
|
1786
|
+
},
|
|
1787
|
+
focus: {
|
|
1788
|
+
"inner-color": {
|
|
1789
|
+
$type: "color",
|
|
1790
|
+
$value: `{${themeName}.focus.inner}`
|
|
1791
|
+
},
|
|
1792
|
+
"outer-color": {
|
|
1793
|
+
$type: "color",
|
|
1794
|
+
$value: `{${themeName}.focus.outer}`
|
|
1795
|
+
}
|
|
1770
1796
|
}
|
|
1771
1797
|
},
|
|
1772
1798
|
...remainingThemeFile
|
|
@@ -1707,7 +1707,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1707
1707
|
(color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
|
|
1708
1708
|
colors.support
|
|
1709
1709
|
);
|
|
1710
|
-
const
|
|
1710
|
+
const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
|
|
1711
|
+
const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
|
|
1711
1712
|
const baseColorsWithOverrides = {
|
|
1712
1713
|
...baseColors,
|
|
1713
1714
|
...overrides?.severity
|
|
@@ -1717,7 +1718,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1717
1718
|
baseColorsWithOverrides
|
|
1718
1719
|
);
|
|
1719
1720
|
const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
|
|
1721
|
+
const defaultLinkVisited = linkColor[12];
|
|
1720
1722
|
const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
|
|
1723
|
+
const defaultFocusInner = neutralColorScale[0].hex;
|
|
1724
|
+
const defaultFocusOuter = neutralColorScale[10].hex;
|
|
1725
|
+
const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
|
|
1726
|
+
const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
|
|
1721
1727
|
return {
|
|
1722
1728
|
[themeName]: {
|
|
1723
1729
|
...main,
|
|
@@ -1725,7 +1731,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1725
1731
|
neutral,
|
|
1726
1732
|
...globalColors,
|
|
1727
1733
|
link: {
|
|
1728
|
-
visited: linkOverride ||
|
|
1734
|
+
visited: linkOverride || defaultLinkVisited
|
|
1735
|
+
},
|
|
1736
|
+
focus: {
|
|
1737
|
+
inner: {
|
|
1738
|
+
$type: "color",
|
|
1739
|
+
$value: focusInnerOverride || defaultFocusInner
|
|
1740
|
+
},
|
|
1741
|
+
outer: {
|
|
1742
|
+
$type: "color",
|
|
1743
|
+
$value: focusOuterOverride || defaultFocusOuter
|
|
1744
|
+
}
|
|
1729
1745
|
}
|
|
1730
1746
|
}
|
|
1731
1747
|
};
|
|
@@ -1740,11 +1756,11 @@ var color_base_template_default = {
|
|
|
1740
1756
|
focus: {
|
|
1741
1757
|
inner: {
|
|
1742
1758
|
$type: "color",
|
|
1743
|
-
$value: "{color.
|
|
1759
|
+
$value: "{color.focus.inner-color}"
|
|
1744
1760
|
},
|
|
1745
1761
|
outer: {
|
|
1746
1762
|
$type: "color",
|
|
1747
|
-
$value: "{color.
|
|
1763
|
+
$value: "{color.focus.outer-color}"
|
|
1748
1764
|
}
|
|
1749
1765
|
}
|
|
1750
1766
|
},
|
|
@@ -2100,6 +2116,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
|
|
|
2100
2116
|
$type: "color",
|
|
2101
2117
|
$value: `{${themeName}.link.visited}`
|
|
2102
2118
|
}
|
|
2119
|
+
},
|
|
2120
|
+
focus: {
|
|
2121
|
+
"inner-color": {
|
|
2122
|
+
$type: "color",
|
|
2123
|
+
$value: `{${themeName}.focus.inner}`
|
|
2124
|
+
},
|
|
2125
|
+
"outer-color": {
|
|
2126
|
+
$type: "color",
|
|
2127
|
+
$value: `{${themeName}.focus.outer}`
|
|
2128
|
+
}
|
|
2103
2129
|
}
|
|
2104
2130
|
},
|
|
2105
2131
|
...remainingThemeFile
|
|
@@ -2191,7 +2217,7 @@ import * as R8 from "ramda";
|
|
|
2191
2217
|
// package.json
|
|
2192
2218
|
var package_default = {
|
|
2193
2219
|
name: "@digdir/designsystemet",
|
|
2194
|
-
version: "1.
|
|
2220
|
+
version: "1.10.0",
|
|
2195
2221
|
description: "CLI for Designsystemet",
|
|
2196
2222
|
author: "Designsystemet team",
|
|
2197
2223
|
engines: {
|
|
@@ -2243,23 +2269,18 @@ var package_default = {
|
|
|
2243
2269
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2244
2270
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2245
2271
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2246
|
-
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/design-tokens --dry",
|
|
2272
|
+
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry",
|
|
2247
2273
|
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|
|
2248
|
-
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2249
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2250
2274
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2251
2275
|
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
2252
|
-
|
|
2253
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2276
|
+
verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
|
|
2254
2277
|
},
|
|
2255
2278
|
dependencies: {
|
|
2256
2279
|
"@commander-js/extra-typings": "^14.0.0",
|
|
2257
2280
|
"@digdir/designsystemet-types": "workspace:^",
|
|
2258
|
-
"@tokens-studio/sd-transforms": "2.0.
|
|
2259
|
-
"apca-w3": "^0.1.9",
|
|
2260
|
-
"change-case": "^5.4.4",
|
|
2281
|
+
"@tokens-studio/sd-transforms": "2.0.3",
|
|
2261
2282
|
"chroma-js": "^3.2.0",
|
|
2262
|
-
"colorjs.io": "^0.6.0
|
|
2283
|
+
"colorjs.io": "^0.6.0",
|
|
2263
2284
|
commander: "^14.0.2",
|
|
2264
2285
|
"fast-glob": "^3.3.3",
|
|
2265
2286
|
hsluv: "^1.0.1",
|
|
@@ -2268,19 +2289,15 @@ var package_default = {
|
|
|
2268
2289
|
postcss: "^8.5.6",
|
|
2269
2290
|
ramda: "^0.32.0",
|
|
2270
2291
|
"style-dictionary": "^5.1.1",
|
|
2271
|
-
zod: "^4.
|
|
2292
|
+
zod: "^4.3.5",
|
|
2272
2293
|
"zod-validation-error": "^4.0.2"
|
|
2273
2294
|
},
|
|
2274
2295
|
devDependencies: {
|
|
2275
2296
|
"@tokens-studio/types": "0.5.2",
|
|
2276
|
-
"@types/apca-w3": "^0.1.3",
|
|
2277
2297
|
"@types/chroma-js": "^3.1.2",
|
|
2278
|
-
"@types/
|
|
2279
|
-
"@types/node": "^22.19.1",
|
|
2298
|
+
"@types/node": "^22.19.3",
|
|
2280
2299
|
"@types/object-hash": "^3.0.6",
|
|
2281
2300
|
"@types/ramda": "^0.31.1",
|
|
2282
|
-
"fs-extra": "^11.3.2",
|
|
2283
|
-
tslib: "^2.8.1",
|
|
2284
2301
|
tsup: "^8.5.1",
|
|
2285
2302
|
tsx: "^4.21.0",
|
|
2286
2303
|
typescript: "^5.9.3"
|
|
@@ -3227,9 +3244,15 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3227
3244
|
};
|
|
3228
3245
|
|
|
3229
3246
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3230
|
-
import { kebabCase } from "change-case";
|
|
3231
3247
|
import pc2 from "picocolors";
|
|
3232
3248
|
import * as R20 from "ramda";
|
|
3249
|
+
|
|
3250
|
+
// src/tokens/process/utils/kebab-case.ts
|
|
3251
|
+
function kebabCase(str) {
|
|
3252
|
+
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
3253
|
+
}
|
|
3254
|
+
|
|
3255
|
+
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3233
3256
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3234
3257
|
const verboseLogging = buildOptions?.verbose;
|
|
3235
3258
|
const grouped$themes = groupThemes(processed$themes);
|
package/dist/src/tokens/index.js
CHANGED
|
@@ -1374,7 +1374,8 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1374
1374
|
(color, colorName) => generateColor(generateColorScale(color, colorScheme2), createColorOverrides(colorName)),
|
|
1375
1375
|
colors.support
|
|
1376
1376
|
);
|
|
1377
|
-
const
|
|
1377
|
+
const neutralColorScale = generateColorScale(colors.neutral, colorScheme2);
|
|
1378
|
+
const neutral = generateColor(neutralColorScale, createColorOverrides("neutral"));
|
|
1378
1379
|
const baseColorsWithOverrides = {
|
|
1379
1380
|
...baseColors,
|
|
1380
1381
|
...overrides?.severity
|
|
@@ -1384,7 +1385,12 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1384
1385
|
baseColorsWithOverrides
|
|
1385
1386
|
);
|
|
1386
1387
|
const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme2));
|
|
1388
|
+
const defaultLinkVisited = linkColor[12];
|
|
1387
1389
|
const linkOverride = overrides?.linkVisited?.[colorScheme2] ? { $type: "color", $value: overrides.linkVisited[colorScheme2] } : void 0;
|
|
1390
|
+
const defaultFocusInner = neutralColorScale[0].hex;
|
|
1391
|
+
const defaultFocusOuter = neutralColorScale[10].hex;
|
|
1392
|
+
const focusInnerOverride = overrides?.focus?.inner?.[colorScheme2];
|
|
1393
|
+
const focusOuterOverride = overrides?.focus?.outer?.[colorScheme2];
|
|
1388
1394
|
return {
|
|
1389
1395
|
[themeName]: {
|
|
1390
1396
|
...main,
|
|
@@ -1392,7 +1398,17 @@ var generateColorScheme = (themeName, colorScheme2, colors, overrides) => {
|
|
|
1392
1398
|
neutral,
|
|
1393
1399
|
...globalColors,
|
|
1394
1400
|
link: {
|
|
1395
|
-
visited: linkOverride ||
|
|
1401
|
+
visited: linkOverride || defaultLinkVisited
|
|
1402
|
+
},
|
|
1403
|
+
focus: {
|
|
1404
|
+
inner: {
|
|
1405
|
+
$type: "color",
|
|
1406
|
+
$value: focusInnerOverride || defaultFocusInner
|
|
1407
|
+
},
|
|
1408
|
+
outer: {
|
|
1409
|
+
$type: "color",
|
|
1410
|
+
$value: focusOuterOverride || defaultFocusOuter
|
|
1411
|
+
}
|
|
1396
1412
|
}
|
|
1397
1413
|
}
|
|
1398
1414
|
};
|
|
@@ -1407,11 +1423,11 @@ var color_base_template_default = {
|
|
|
1407
1423
|
focus: {
|
|
1408
1424
|
inner: {
|
|
1409
1425
|
$type: "color",
|
|
1410
|
-
$value: "{color.
|
|
1426
|
+
$value: "{color.focus.inner-color}"
|
|
1411
1427
|
},
|
|
1412
1428
|
outer: {
|
|
1413
1429
|
$type: "color",
|
|
1414
|
-
$value: "{color.
|
|
1430
|
+
$value: "{color.focus.outer-color}"
|
|
1415
1431
|
}
|
|
1416
1432
|
}
|
|
1417
1433
|
},
|
|
@@ -1767,6 +1783,16 @@ var generateTheme = (colors, themeName, borderRadius) => {
|
|
|
1767
1783
|
$type: "color",
|
|
1768
1784
|
$value: `{${themeName}.link.visited}`
|
|
1769
1785
|
}
|
|
1786
|
+
},
|
|
1787
|
+
focus: {
|
|
1788
|
+
"inner-color": {
|
|
1789
|
+
$type: "color",
|
|
1790
|
+
$value: `{${themeName}.focus.inner}`
|
|
1791
|
+
},
|
|
1792
|
+
"outer-color": {
|
|
1793
|
+
$type: "color",
|
|
1794
|
+
$value: `{${themeName}.focus.outer}`
|
|
1795
|
+
}
|
|
1770
1796
|
}
|
|
1771
1797
|
},
|
|
1772
1798
|
...remainingThemeFile
|
|
@@ -2207,7 +2233,7 @@ import * as R8 from "ramda";
|
|
|
2207
2233
|
// package.json
|
|
2208
2234
|
var package_default = {
|
|
2209
2235
|
name: "@digdir/designsystemet",
|
|
2210
|
-
version: "1.
|
|
2236
|
+
version: "1.10.0",
|
|
2211
2237
|
description: "CLI for Designsystemet",
|
|
2212
2238
|
author: "Designsystemet team",
|
|
2213
2239
|
engines: {
|
|
@@ -2259,23 +2285,18 @@ var package_default = {
|
|
|
2259
2285
|
"test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
|
|
2260
2286
|
"test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
|
|
2261
2287
|
"test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
|
|
2262
|
-
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/design-tokens --dry",
|
|
2288
|
+
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry",
|
|
2263
2289
|
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|
|
2264
|
-
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
2265
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
2266
2290
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
2267
2291
|
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
2268
|
-
|
|
2269
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
2292
|
+
verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
|
|
2270
2293
|
},
|
|
2271
2294
|
dependencies: {
|
|
2272
2295
|
"@commander-js/extra-typings": "^14.0.0",
|
|
2273
2296
|
"@digdir/designsystemet-types": "workspace:^",
|
|
2274
|
-
"@tokens-studio/sd-transforms": "2.0.
|
|
2275
|
-
"apca-w3": "^0.1.9",
|
|
2276
|
-
"change-case": "^5.4.4",
|
|
2297
|
+
"@tokens-studio/sd-transforms": "2.0.3",
|
|
2277
2298
|
"chroma-js": "^3.2.0",
|
|
2278
|
-
"colorjs.io": "^0.6.0
|
|
2299
|
+
"colorjs.io": "^0.6.0",
|
|
2279
2300
|
commander: "^14.0.2",
|
|
2280
2301
|
"fast-glob": "^3.3.3",
|
|
2281
2302
|
hsluv: "^1.0.1",
|
|
@@ -2284,19 +2305,15 @@ var package_default = {
|
|
|
2284
2305
|
postcss: "^8.5.6",
|
|
2285
2306
|
ramda: "^0.32.0",
|
|
2286
2307
|
"style-dictionary": "^5.1.1",
|
|
2287
|
-
zod: "^4.
|
|
2308
|
+
zod: "^4.3.5",
|
|
2288
2309
|
"zod-validation-error": "^4.0.2"
|
|
2289
2310
|
},
|
|
2290
2311
|
devDependencies: {
|
|
2291
2312
|
"@tokens-studio/types": "0.5.2",
|
|
2292
|
-
"@types/apca-w3": "^0.1.3",
|
|
2293
2313
|
"@types/chroma-js": "^3.1.2",
|
|
2294
|
-
"@types/
|
|
2295
|
-
"@types/node": "^22.19.1",
|
|
2314
|
+
"@types/node": "^22.19.3",
|
|
2296
2315
|
"@types/object-hash": "^3.0.6",
|
|
2297
2316
|
"@types/ramda": "^0.31.1",
|
|
2298
|
-
"fs-extra": "^11.3.2",
|
|
2299
|
-
tslib: "^2.8.1",
|
|
2300
2317
|
tsup: "^8.5.1",
|
|
2301
2318
|
tsx: "^4.21.0",
|
|
2302
2319
|
typescript: "^5.9.3"
|
|
@@ -3243,9 +3260,15 @@ var typographyVariables = ({ theme, typography: typography2 }) => {
|
|
|
3243
3260
|
};
|
|
3244
3261
|
|
|
3245
3262
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3246
|
-
import { kebabCase } from "change-case";
|
|
3247
3263
|
import pc2 from "picocolors";
|
|
3248
3264
|
import * as R20 from "ramda";
|
|
3265
|
+
|
|
3266
|
+
// src/tokens/process/utils/kebab-case.ts
|
|
3267
|
+
function kebabCase(str) {
|
|
3268
|
+
return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
|
|
3269
|
+
}
|
|
3270
|
+
|
|
3271
|
+
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
3249
3272
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
3250
3273
|
const verboseLogging = buildOptions?.verbose;
|
|
3251
3274
|
const grouped$themes = groupThemes(processed$themes);
|
|
@@ -552,7 +552,6 @@ var TypographyValues;
|
|
|
552
552
|
})(TypographyValues || (TypographyValues = {}));
|
|
553
553
|
|
|
554
554
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
555
|
-
import { kebabCase } from "change-case";
|
|
556
555
|
import pc from "picocolors";
|
|
557
556
|
import * as R6 from "ramda";
|
|
558
557
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -578,7 +578,6 @@ var TypographyValues;
|
|
|
578
578
|
})(TypographyValues || (TypographyValues = {}));
|
|
579
579
|
|
|
580
580
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
581
|
-
import { kebabCase } from "change-case";
|
|
582
581
|
import pc from "picocolors";
|
|
583
582
|
import * as R6 from "ramda";
|
|
584
583
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -589,7 +589,6 @@ var TypographyValues;
|
|
|
589
589
|
})(TypographyValues || (TypographyValues = {}));
|
|
590
590
|
|
|
591
591
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
592
|
-
import { kebabCase } from "change-case";
|
|
593
592
|
import pc from "picocolors";
|
|
594
593
|
import * as R6 from "ramda";
|
|
595
594
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -584,7 +584,6 @@ var TypographyValues;
|
|
|
584
584
|
})(TypographyValues || (TypographyValues = {}));
|
|
585
585
|
|
|
586
586
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
587
|
-
import { kebabCase } from "change-case";
|
|
588
587
|
import pc from "picocolors";
|
|
589
588
|
import * as R6 from "ramda";
|
|
590
589
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -577,7 +577,6 @@ var TypographyValues;
|
|
|
577
577
|
})(TypographyValues || (TypographyValues = {}));
|
|
578
578
|
|
|
579
579
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
580
|
-
import { kebabCase } from "change-case";
|
|
581
580
|
import pc from "picocolors";
|
|
582
581
|
import * as R7 from "ramda";
|
|
583
582
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -579,7 +579,6 @@ var TypographyValues;
|
|
|
579
579
|
})(TypographyValues || (TypographyValues = {}));
|
|
580
580
|
|
|
581
581
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
582
|
-
import { kebabCase } from "change-case";
|
|
583
582
|
import pc from "picocolors";
|
|
584
583
|
import * as R7 from "ramda";
|
|
585
584
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -276,7 +276,6 @@ var TypographyValues;
|
|
|
276
276
|
})(TypographyValues || (TypographyValues = {}));
|
|
277
277
|
|
|
278
278
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
279
|
-
import { kebabCase } from "change-case";
|
|
280
279
|
import pc from "picocolors";
|
|
281
280
|
import * as R2 from "ramda";
|
|
282
281
|
var getMultidimensionalThemes = (processed$themes, dimensions) => {
|
|
@@ -914,7 +914,6 @@ var TypographyValues;
|
|
|
914
914
|
})(TypographyValues || (TypographyValues = {}));
|
|
915
915
|
|
|
916
916
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
917
|
-
import { kebabCase } from "change-case";
|
|
918
917
|
import pc from "picocolors";
|
|
919
918
|
import * as R12 from "ramda";
|
|
920
919
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -974,7 +974,6 @@ var TypographyValues;
|
|
|
974
974
|
})(TypographyValues || (TypographyValues = {}));
|
|
975
975
|
|
|
976
976
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
977
|
-
import { kebabCase } from "change-case";
|
|
978
977
|
import pc from "picocolors";
|
|
979
978
|
import * as R12 from "ramda";
|
|
980
979
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -948,7 +948,6 @@ var TypographyValues;
|
|
|
948
948
|
})(TypographyValues || (TypographyValues = {}));
|
|
949
949
|
|
|
950
950
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
951
|
-
import { kebabCase } from "change-case";
|
|
952
951
|
import pc from "picocolors";
|
|
953
952
|
import * as R12 from "ramda";
|
|
954
953
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -921,7 +921,6 @@ var TypographyValues;
|
|
|
921
921
|
})(TypographyValues || (TypographyValues = {}));
|
|
922
922
|
|
|
923
923
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
924
|
-
import { kebabCase } from "change-case";
|
|
925
924
|
import pc from "picocolors";
|
|
926
925
|
import * as R12 from "ramda";
|
|
927
926
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -951,7 +951,6 @@ var TypographyValues;
|
|
|
951
951
|
})(TypographyValues || (TypographyValues = {}));
|
|
952
952
|
|
|
953
953
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
954
|
-
import { kebabCase } from "change-case";
|
|
955
954
|
import pc from "picocolors";
|
|
956
955
|
import * as R12 from "ramda";
|
|
957
956
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -973,7 +973,6 @@ var TypographyValues;
|
|
|
973
973
|
})(TypographyValues || (TypographyValues = {}));
|
|
974
974
|
|
|
975
975
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
976
|
-
import { kebabCase } from "change-case";
|
|
977
976
|
import pc from "picocolors";
|
|
978
977
|
import * as R12 from "ramda";
|
|
979
978
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -619,7 +619,6 @@ var TypographyValues;
|
|
|
619
619
|
})(TypographyValues || (TypographyValues = {}));
|
|
620
620
|
|
|
621
621
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
622
|
-
import { kebabCase } from "change-case";
|
|
623
622
|
import pc from "picocolors";
|
|
624
623
|
import * as R7 from "ramda";
|
|
625
624
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|
|
@@ -4,7 +4,7 @@ import pc3 from "picocolors";
|
|
|
4
4
|
// package.json
|
|
5
5
|
var package_default = {
|
|
6
6
|
name: "@digdir/designsystemet",
|
|
7
|
-
version: "1.
|
|
7
|
+
version: "1.10.0",
|
|
8
8
|
description: "CLI for Designsystemet",
|
|
9
9
|
author: "Designsystemet team",
|
|
10
10
|
engines: {
|
|
@@ -56,23 +56,18 @@ 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:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/design-tokens --dry",
|
|
59
|
+
"test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../internal/digdir/design-tokens --dry",
|
|
60
60
|
test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
|
|
61
|
-
"digdir:tokens-build": "pnpm run designsystemet tokens build -t ../../internal/design-tokens -o ../../packages/theme/brand --clean --experimental-tailwind",
|
|
62
|
-
"digdir:tokens-create": "pnpm run designsystemet tokens create --config ./configs/digdir.config.json",
|
|
63
61
|
"update:template": "tsx ./src/scripts/update-template.ts",
|
|
64
62
|
"update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
|
|
65
|
-
|
|
66
|
-
verify: "pnpm test && pnpm update:template && pnpm update:theme-digdir && pnpm build:tokens"
|
|
63
|
+
verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
|
|
67
64
|
},
|
|
68
65
|
dependencies: {
|
|
69
66
|
"@commander-js/extra-typings": "^14.0.0",
|
|
70
67
|
"@digdir/designsystemet-types": "workspace:^",
|
|
71
|
-
"@tokens-studio/sd-transforms": "2.0.
|
|
72
|
-
"apca-w3": "^0.1.9",
|
|
73
|
-
"change-case": "^5.4.4",
|
|
68
|
+
"@tokens-studio/sd-transforms": "2.0.3",
|
|
74
69
|
"chroma-js": "^3.2.0",
|
|
75
|
-
"colorjs.io": "^0.6.0
|
|
70
|
+
"colorjs.io": "^0.6.0",
|
|
76
71
|
commander: "^14.0.2",
|
|
77
72
|
"fast-glob": "^3.3.3",
|
|
78
73
|
hsluv: "^1.0.1",
|
|
@@ -81,19 +76,15 @@ var package_default = {
|
|
|
81
76
|
postcss: "^8.5.6",
|
|
82
77
|
ramda: "^0.32.0",
|
|
83
78
|
"style-dictionary": "^5.1.1",
|
|
84
|
-
zod: "^4.
|
|
79
|
+
zod: "^4.3.5",
|
|
85
80
|
"zod-validation-error": "^4.0.2"
|
|
86
81
|
},
|
|
87
82
|
devDependencies: {
|
|
88
83
|
"@tokens-studio/types": "0.5.2",
|
|
89
|
-
"@types/apca-w3": "^0.1.3",
|
|
90
84
|
"@types/chroma-js": "^3.1.2",
|
|
91
|
-
"@types/
|
|
92
|
-
"@types/node": "^22.19.1",
|
|
85
|
+
"@types/node": "^22.19.3",
|
|
93
86
|
"@types/object-hash": "^3.0.6",
|
|
94
87
|
"@types/ramda": "^0.31.1",
|
|
95
|
-
"fs-extra": "^11.3.2",
|
|
96
|
-
tslib: "^2.8.1",
|
|
97
88
|
tsup: "^8.5.1",
|
|
98
89
|
tsx: "^4.21.0",
|
|
99
90
|
typescript: "^5.9.3"
|
|
@@ -1107,7 +1098,6 @@ var TypographyValues;
|
|
|
1107
1098
|
})(TypographyValues || (TypographyValues = {}));
|
|
1108
1099
|
|
|
1109
1100
|
// src/tokens/process/utils/getMultidimensionalThemes.ts
|
|
1110
|
-
import { kebabCase } from "change-case";
|
|
1111
1101
|
import pc from "picocolors";
|
|
1112
1102
|
import * as R13 from "ramda";
|
|
1113
1103
|
var processed = Symbol("Type brand for ProcessedThemeObject");
|