@digdir/designsystemet 1.6.0 → 1.7.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.
Files changed (47) hide show
  1. package/README.md +1 -1
  2. package/configs/test-tokens.config.json +9 -0
  3. package/dist/bin/config.js +12 -14
  4. package/dist/bin/designsystemet.js +46 -319
  5. package/dist/color.base.template-QGZJKXMN.json +22 -0
  6. package/dist/config.schema.json +23 -7
  7. package/dist/src/colors/colorMetadata.d.ts +2 -0
  8. package/dist/src/colors/colorMetadata.d.ts.map +1 -1
  9. package/dist/src/colors/colorMetadata.js +8 -5
  10. package/dist/src/colors/index.js +9 -17
  11. package/dist/src/colors/theme.d.ts.map +1 -1
  12. package/dist/src/colors/theme.js +14 -18
  13. package/dist/src/colors/types.d.ts +1 -1
  14. package/dist/src/colors/types.d.ts.map +1 -1
  15. package/dist/src/config.d.ts +18 -0
  16. package/dist/src/config.d.ts.map +1 -1
  17. package/dist/src/config.js +12 -14
  18. package/dist/src/index.d.ts +1 -0
  19. package/dist/src/index.d.ts.map +1 -1
  20. package/dist/src/index.js +213 -418
  21. package/dist/src/scripts/createJsonSchema.js +12 -14
  22. package/dist/src/scripts/update-preview-tokens.js +33 -294
  23. package/dist/src/scripts/update-template.d.ts.map +1 -1
  24. package/dist/src/scripts/update-template.js +349 -71
  25. package/dist/src/tokens/build.js +7 -7
  26. package/dist/src/tokens/create/generators/$designsystemet.js +7 -7
  27. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -1
  28. package/dist/src/tokens/create/generators/$metadata.js +1 -4
  29. package/dist/src/tokens/create/generators/$themes.js +0 -1
  30. package/dist/src/tokens/create/generators/color.d.ts +0 -1
  31. package/dist/src/tokens/create/generators/color.d.ts.map +1 -1
  32. package/dist/src/tokens/create/generators/color.js +20 -23
  33. package/dist/src/tokens/create/generators/semantic.d.ts +1 -265
  34. package/dist/src/tokens/create/generators/semantic.d.ts.map +1 -1
  35. package/dist/src/tokens/create/generators/semantic.js +261 -270
  36. package/dist/src/tokens/create/generators/theme.d.ts.map +1 -1
  37. package/dist/src/tokens/create/generators/theme.js +265 -5
  38. package/dist/src/tokens/create/write.js +8 -12
  39. package/dist/src/tokens/create.d.ts.map +1 -1
  40. package/dist/src/tokens/create.js +33 -293
  41. package/dist/src/tokens/format.js +40 -301
  42. package/dist/src/tokens/index.js +40 -301
  43. package/dist/src/tokens/process/output/declarations.js +7 -7
  44. package/dist/src/tokens/process/output/theme.js +7 -7
  45. package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +1 -1
  46. package/package.json +7 -7
  47. package/dist/color.base.template-M7BHS4OV.json +0 -286
package/dist/src/tokens/create/generators/$designsystemet.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // package.json
2
2
  var package_default = {
3
3
  name: "@digdir/designsystemet",
4
- version: "1.6.0",
4
+ version: "1.7.0",
5
5
  description: "CLI for Designsystemet",
6
6
  author: "Designsystemet team",
7
7
  engines: {
@@ -74,9 +74,9 @@ var package_default = {
74
74
  "object-hash": "^3.0.0",
75
75
  picocolors: "^1.1.1",
76
76
  postcss: "^8.5.6",
77
- ramda: "^0.31.3",
78
- "style-dictionary": "^5.0.4",
79
- zod: "^4.1.11",
77
+ ramda: "^0.32.0",
78
+ "style-dictionary": "^5.1.1",
79
+ zod: "^4.1.12",
80
80
  "zod-validation-error": "^4.0.2"
81
81
  },
82
82
  devDependencies: {
@@ -84,14 +84,14 @@ var package_default = {
84
84
  "@types/apca-w3": "^0.1.3",
85
85
  "@types/chroma-js": "^3.1.1",
86
86
  "@types/fs-extra": "^11.0.4",
87
- "@types/node": "^22.18.6",
87
+ "@types/node": "^22.18.11",
88
88
  "@types/object-hash": "^3.0.6",
89
89
  "@types/ramda": "^0.31.1",
90
90
  "fs-extra": "^11.3.2",
91
91
  tslib: "^2.8.1",
92
92
  tsup: "^8.5.0",
93
- tsx: "^4.20.5",
94
- typescript: "^5.9.2"
93
+ tsx: "^4.20.6",
94
+ typescript: "^5.9.3"
95
95
  }
96
96
  };
97
97
 
package/dist/src/tokens/create/generators/$metadata.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"$metadata.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAwBpG"}
1
+ {"version":3,"file":"$metadata.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAqBpG"}
package/dist/src/tokens/create/generators/$metadata.js CHANGED
@@ -12,10 +12,7 @@ function generate$Metadata(schemes, themes, colors) {
12
12
  "primitives/modes/typography/size/large",
13
13
  ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
14
14
  ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
15
- ...schemes.flatMap((scheme) => [
16
- `primitives/modes/color-scheme/${scheme}/global`,
17
- ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)
18
- ]),
15
+ ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
19
16
  ...themes.map((theme) => `themes/${theme}`),
20
17
  "semantic/color",
21
18
  ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
package/dist/src/tokens/create/generators/$themes.js CHANGED
@@ -252,7 +252,6 @@ function generateColorSchemesGroup(colorSchemes, themes) {
252
252
  (scheme) => ({
253
253
  ...colorSchemeDefaults[scheme],
254
254
  selectedTokenSets: Object.fromEntries([
255
- [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
256
255
  ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
257
256
  ]),
258
257
  group: "Color scheme"
package/dist/src/tokens/create/generators/color.d.ts CHANGED
@@ -2,5 +2,4 @@ import type { ColorScheme } from '../../../colors/types.js';
2
2
  import type { ColorOverrideSchema } from '../../../config.js';
3
3
  import type { Colors, TokenSet } from '../../types.js';
4
4
  export declare const generateColorScheme: (themeName: string, colorScheme: ColorScheme, colors: Colors, overrides?: ColorOverrideSchema) => TokenSet;
5
- export declare const generateColorGlobal: (colorScheme: ColorScheme) => TokenSet;
6
5
  //# sourceMappingURL=color.d.ts.map
package/dist/src/tokens/create/generators/color.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAkDF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,aAAa,WAAW,KAAG,QAgB9D,CAAC"}
1
+ {"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAS,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,eAAO,MAAM,mBAAmB,GAC9B,WAAW,MAAM,EACjB,aAAa,WAAW,EACxB,QAAQ,MAAM,EACd,YAAY,mBAAmB,KAC9B,QAkEF,CAAC"}
package/dist/src/tokens/create/generators/color.js CHANGED
@@ -4,12 +4,12 @@ import * as R3 from "ramda";
4
4
  // src/colors/colorMetadata.ts
5
5
  import * as R from "ramda";
6
6
  var baseColors = {
7
- blue: "#0A71C0",
8
- green: "#068718",
9
- orange: "#EA9B1B",
10
- purple: "#663299",
11
- red: "#C01B1B"
7
+ info: "#0A71C0",
8
+ success: "#068718",
9
+ warning: "#EA9B1B",
10
+ danger: "#C01B1B"
12
11
  };
12
+ var dsLinkColor = "#663299";
13
13
  var colorMetadata = {
14
14
  "background-default": {
15
15
  number: 1,
@@ -254,6 +254,7 @@ var colorMetadata = {
254
254
  };
255
255
  var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
256
256
  var colorNames = Object.keys(colorMetadata);
257
+ var baseColorNames = Object.keys(baseColors);
257
258
 
258
259
  // src/colors/theme.ts
259
260
  import chroma2 from "chroma-js";
@@ -379,31 +380,27 @@ var generateColorScheme = (themeName, colorScheme, colors, overrides) => {
379
380
  colors.support
380
381
  );
381
382
  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme), createColorOverrides("neutral"));
383
+ const baseColorsWithOverrides = {
384
+ ...baseColors,
385
+ ...overrides?.severity
386
+ };
387
+ const globalColors = R3.mapObjIndexed(
388
+ (color, colorName) => generateColor(generateColorScale(color, colorScheme), createColorOverrides(colorName)),
389
+ baseColorsWithOverrides
390
+ );
391
+ const linkColor = generateColor(generateColorScale(dsLinkColor, colorScheme));
382
392
  return {
383
393
  [themeName]: {
384
394
  ...main,
385
395
  ...support,
386
- neutral
387
- }
388
- };
389
- };
390
- var generateColorGlobal = (colorScheme) => {
391
- const blueScale = generateColorScale(baseColors.blue, colorScheme);
392
- const greenScale = generateColorScale(baseColors.green, colorScheme);
393
- const orangeScale = generateColorScale(baseColors.orange, colorScheme);
394
- const purpleScale = generateColorScale(baseColors.purple, colorScheme);
395
- const redScale = generateColorScale(baseColors.red, colorScheme);
396
- return {
397
- global: {
398
- blue: generateColor(blueScale),
399
- green: generateColor(greenScale),
400
- orange: generateColor(orangeScale),
401
- purple: generateColor(purpleScale),
402
- red: generateColor(redScale)
396
+ neutral,
397
+ ...globalColors,
398
+ link: {
399
+ visited: linkColor[12]
400
+ }
403
401
  }
404
402
  };
405
403
  };
406
404
  export {
407
- generateColorGlobal,
408
405
  generateColorScheme
409
406
  };
package/dist/src/tokens/create/generators/semantic.d.ts CHANGED
@@ -3,274 +3,10 @@ type SemanticModes = {
3
3
  'main-color': Record<string, TokenSet>;
4
4
  'support-color': Record<string, TokenSet>;
5
5
  };
6
- export declare const generateSemantic: (colors: Colors) => {
6
+ export declare const generateSemantic: (colors: Colors, _themeName: string) => {
7
7
  modes: SemanticModes;
8
8
  color: {
9
9
  color: {
10
- success: {
11
- "background-default": {
12
- $type: string;
13
- $value: string;
14
- };
15
- "background-tinted": {
16
- $type: string;
17
- $value: string;
18
- };
19
- "surface-default": {
20
- $type: string;
21
- $value: string;
22
- };
23
- "surface-tinted": {
24
- $type: string;
25
- $value: string;
26
- };
27
- "surface-hover": {
28
- $type: string;
29
- $value: string;
30
- };
31
- "surface-active": {
32
- $type: string;
33
- $value: string;
34
- };
35
- "border-subtle": {
36
- $type: string;
37
- $value: string;
38
- };
39
- "border-default": {
40
- $type: string;
41
- $value: string;
42
- };
43
- "border-strong": {
44
- $type: string;
45
- $value: string;
46
- };
47
- "text-subtle": {
48
- $type: string;
49
- $value: string;
50
- };
51
- "text-default": {
52
- $type: string;
53
- $value: string;
54
- };
55
- "base-default": {
56
- $type: string;
57
- $value: string;
58
- };
59
- "base-hover": {
60
- $type: string;
61
- $value: string;
62
- };
63
- "base-active": {
64
- $type: string;
65
- $value: string;
66
- };
67
- "base-contrast-subtle": {
68
- $type: string;
69
- $value: string;
70
- };
71
- "base-contrast-default": {
72
- $type: string;
73
- $value: string;
74
- };
75
- };
76
- danger: {
77
- "background-default": {
78
- $type: string;
79
- $value: string;
80
- };
81
- "background-tinted": {
82
- $type: string;
83
- $value: string;
84
- };
85
- "surface-default": {
86
- $type: string;
87
- $value: string;
88
- };
89
- "surface-tinted": {
90
- $type: string;
91
- $value: string;
92
- };
93
- "surface-hover": {
94
- $type: string;
95
- $value: string;
96
- };
97
- "surface-active": {
98
- $type: string;
99
- $value: string;
100
- };
101
- "border-subtle": {
102
- $type: string;
103
- $value: string;
104
- };
105
- "border-default": {
106
- $type: string;
107
- $value: string;
108
- };
109
- "border-strong": {
110
- $type: string;
111
- $value: string;
112
- };
113
- "text-subtle": {
114
- $type: string;
115
- $value: string;
116
- };
117
- "text-default": {
118
- $type: string;
119
- $value: string;
120
- };
121
- "base-default": {
122
- $type: string;
123
- $value: string;
124
- };
125
- "base-hover": {
126
- $type: string;
127
- $value: string;
128
- };
129
- "base-active": {
130
- $type: string;
131
- $value: string;
132
- };
133
- "base-contrast-subtle": {
134
- $type: string;
135
- $value: string;
136
- };
137
- "base-contrast-default": {
138
- $type: string;
139
- $value: string;
140
- };
141
- };
142
- info: {
143
- "background-default": {
144
- $type: string;
145
- $value: string;
146
- };
147
- "background-tinted": {
148
- $type: string;
149
- $value: string;
150
- };
151
- "surface-default": {
152
- $type: string;
153
- $value: string;
154
- };
155
- "surface-tinted": {
156
- $type: string;
157
- $value: string;
158
- };
159
- "surface-hover": {
160
- $type: string;
161
- $value: string;
162
- };
163
- "surface-active": {
164
- $type: string;
165
- $value: string;
166
- };
167
- "border-subtle": {
168
- $type: string;
169
- $value: string;
170
- };
171
- "border-default": {
172
- $type: string;
173
- $value: string;
174
- };
175
- "border-strong": {
176
- $type: string;
177
- $value: string;
178
- };
179
- "text-subtle": {
180
- $type: string;
181
- $value: string;
182
- };
183
- "text-default": {
184
- $type: string;
185
- $value: string;
186
- };
187
- "base-default": {
188
- $type: string;
189
- $value: string;
190
- };
191
- "base-hover": {
192
- $type: string;
193
- $value: string;
194
- };
195
- "base-active": {
196
- $type: string;
197
- $value: string;
198
- };
199
- "base-contrast-subtle": {
200
- $type: string;
201
- $value: string;
202
- };
203
- "base-contrast-default": {
204
- $type: string;
205
- $value: string;
206
- };
207
- };
208
- warning: {
209
- "background-default": {
210
- $type: string;
211
- $value: string;
212
- };
213
- "background-tinted": {
214
- $type: string;
215
- $value: string;
216
- };
217
- "surface-default": {
218
- $type: string;
219
- $value: string;
220
- };
221
- "surface-tinted": {
222
- $type: string;
223
- $value: string;
224
- };
225
- "surface-hover": {
226
- $type: string;
227
- $value: string;
228
- };
229
- "surface-active": {
230
- $type: string;
231
- $value: string;
232
- };
233
- "border-subtle": {
234
- $type: string;
235
- $value: string;
236
- };
237
- "border-default": {
238
- $type: string;
239
- $value: string;
240
- };
241
- "border-strong": {
242
- $type: string;
243
- $value: string;
244
- };
245
- "text-subtle": {
246
- $type: string;
247
- $value: string;
248
- };
249
- "text-default": {
250
- $type: string;
251
- $value: string;
252
- };
253
- "base-default": {
254
- $type: string;
255
- $value: string;
256
- };
257
- "base-hover": {
258
- $type: string;
259
- $value: string;
260
- };
261
- "base-active": {
262
- $type: string;
263
- $value: string;
264
- };
265
- "base-contrast-subtle": {
266
- $type: string;
267
- $value: string;
268
- };
269
- "base-contrast-default": {
270
- $type: string;
271
- $value: string;
272
- };
273
- };
274
10
  focus: {
275
11
  inner: {
276
12
  $type: string;
package/dist/src/tokens/create/generators/semantic.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/semantic.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4D9C,CAAC"}
1
+ {"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/create/generators/semantic.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEvD,KAAK,aAAa,GAAG;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACvC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,QAAQ,MAAM,EAAE,YAAY,MAAM;;;;;;;;;;;;;;;;;;;;;;;;CA8DlE,CAAC"}