@digdir/designsystemet 1.0.0-next.43 → 1.0.0-next.45

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 (44) hide show
  1. package/dist/bin/designsystemet.js +8 -6
  2. package/dist/src/colors/theme.d.ts.map +1 -1
  3. package/dist/src/colors/theme.js +1 -1
  4. package/dist/src/migrations/beta-to-v1.js +40 -40
  5. package/dist/src/tokens/build/configs.d.ts.map +1 -1
  6. package/dist/src/tokens/build/configs.js +25 -23
  7. package/dist/src/tokens/build/formats/css.d.ts +38 -0
  8. package/dist/src/tokens/build/formats/css.d.ts.map +1 -1
  9. package/dist/src/tokens/build/formats/css.js +60 -15
  10. package/dist/src/tokens/build/formats/js-tokens.d.ts.map +1 -1
  11. package/dist/src/tokens/build/formats/js-tokens.js +19 -9
  12. package/dist/src/tokens/build/transformers.d.ts +1 -0
  13. package/dist/src/tokens/build/transformers.d.ts.map +1 -1
  14. package/dist/src/tokens/build/transformers.js +10 -2
  15. package/dist/src/tokens/build.js +1 -1
  16. package/dist/src/tokens/create.d.ts +1 -1
  17. package/dist/src/tokens/create.d.ts.map +1 -1
  18. package/dist/src/tokens/create.js +1 -1
  19. package/dist/src/tokens/design-tokens/default/Figma/components.json +3 -3
  20. package/dist/src/tokens/design-tokens/default/primitives/globals.json +1 -13
  21. package/dist/src/tokens/design-tokens/default/primitives/modes/size/global.json +96 -0
  22. package/dist/src/tokens/design-tokens/default/primitives/modes/size/large.json +16 -0
  23. package/dist/src/tokens/design-tokens/default/primitives/modes/size/medium.json +16 -0
  24. package/dist/src/tokens/design-tokens/default/primitives/modes/size/small.json +16 -0
  25. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json +100 -0
  26. package/dist/src/tokens/design-tokens/default/primitives/{size/default.json → modes/typography/size/medium.json} +0 -75
  27. package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json +100 -0
  28. package/dist/src/tokens/design-tokens/default/semantic/style.json +6 -166
  29. package/dist/src/tokens/design-tokens/template/$metadata.json +7 -2
  30. package/dist/src/tokens/design-tokens/template/$themes.json +1319 -1196
  31. package/dist/src/tokens/design-tokens/template/themes/theme-base-file.json +8 -4
  32. package/dist/src/tokens/template.d.ts.map +1 -1
  33. package/dist/src/tokens/template.js +2 -1
  34. package/dist/src/tokens/types.d.ts +12 -0
  35. package/dist/src/tokens/types.d.ts.map +1 -1
  36. package/dist/src/tokens/write/generate$metadata.d.ts.map +1 -1
  37. package/dist/src/tokens/write/generate$metadata.js +7 -1
  38. package/dist/src/tokens/write/generate$themes.d.ts +1 -0
  39. package/dist/src/tokens/write/generate$themes.d.ts.map +1 -1
  40. package/dist/src/tokens/write/generate$themes.js +141 -3
  41. package/dist/src/tokens/write.d.ts +2 -3
  42. package/dist/src/tokens/write.d.ts.map +1 -1
  43. package/dist/src/tokens/write.js +9 -2
  44. package/package.json +2 -2
package/dist/src/tokens/design-tokens/default/primitives/modes/size/global.json ADDED
@@ -0,0 +1,96 @@
1
+ {
2
+ "size": {
3
+ "0": {
4
+ "$type": "dimension",
5
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *0)"
6
+ },
7
+ "1": {
8
+ "$type": "dimension",
9
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *1)"
10
+ },
11
+ "2": {
12
+ "$type": "dimension",
13
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *2)"
14
+ },
15
+ "3": {
16
+ "$type": "dimension",
17
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *3)"
18
+ },
19
+ "4": {
20
+ "$type": "dimension",
21
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *4)"
22
+ },
23
+ "5": {
24
+ "$type": "dimension",
25
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *5)"
26
+ },
27
+ "6": {
28
+ "$type": "dimension",
29
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *6)"
30
+ },
31
+ "7": {
32
+ "$type": "dimension",
33
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *7)"
34
+ },
35
+ "8": {
36
+ "$type": "dimension",
37
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *8)"
38
+ },
39
+ "9": {
40
+ "$type": "dimension",
41
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *9)"
42
+ },
43
+ "10": {
44
+ "$type": "dimension",
45
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *10)"
46
+ },
47
+ "11": {
48
+ "$type": "dimension",
49
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *11)"
50
+ },
51
+ "12": {
52
+ "$type": "dimension",
53
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *12)"
54
+ },
55
+ "13": {
56
+ "$type": "dimension",
57
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *13)"
58
+ },
59
+ "14": {
60
+ "$type": "dimension",
61
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *14)"
62
+ },
63
+ "15": {
64
+ "$type": "dimension",
65
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *15)"
66
+ },
67
+ "18": {
68
+ "$type": "dimension",
69
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *18)"
70
+ },
71
+ "22": {
72
+ "$type": "dimension",
73
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *22)"
74
+ },
75
+ "26": {
76
+ "$type": "dimension",
77
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *26)"
78
+ },
79
+ "30": {
80
+ "$type": "dimension",
81
+ "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *30)"
82
+ },
83
+ "mode-font-size": {
84
+ "$type": "dimension",
85
+ "$value": "{size._mode-font-size}"
86
+ },
87
+ "base": {
88
+ "$type": "dimension",
89
+ "$value": "{size._base}"
90
+ },
91
+ "step": {
92
+ "$type": "dimension",
93
+ "$value": "{size._step}"
94
+ }
95
+ }
96
+ }
package/dist/src/tokens/design-tokens/default/primitives/modes/size/large.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "size": {
3
+ "_mode-font-size": {
4
+ "$type": "dimension",
5
+ "$value": "21"
6
+ },
7
+ "_base": {
8
+ "$type": "dimension",
9
+ "$value": "18"
10
+ },
11
+ "_step": {
12
+ "$type": "dimension",
13
+ "$value": "4"
14
+ }
15
+ }
16
+ }
package/dist/src/tokens/design-tokens/default/primitives/modes/size/medium.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "size": {
3
+ "_mode-font-size": {
4
+ "$type": "dimension",
5
+ "$value": "18"
6
+ },
7
+ "_base": {
8
+ "$type": "dimension",
9
+ "$value": "18"
10
+ },
11
+ "_step": {
12
+ "$type": "dimension",
13
+ "$value": "4"
14
+ }
15
+ }
16
+ }
package/dist/src/tokens/design-tokens/default/primitives/modes/size/small.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "size": {
3
+ "_mode-font-size": {
4
+ "$type": "dimension",
5
+ "$value": "16"
6
+ },
7
+ "_base": {
8
+ "$type": "dimension",
9
+ "$value": "18"
10
+ },
11
+ "_step": {
12
+ "$type": "dimension",
13
+ "$value": "4"
14
+ }
15
+ }
16
+ }
package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/large.json ADDED
@@ -0,0 +1,100 @@
1
+ {
2
+ "line-height": {
3
+ "sm": {
4
+ "$type": "lineHeights",
5
+ "$value": "130%"
6
+ },
7
+ "md": {
8
+ "$type": "lineHeights",
9
+ "$value": "150%"
10
+ },
11
+ "lg": {
12
+ "$type": "lineHeights",
13
+ "$value": "170%"
14
+ }
15
+ },
16
+ "font-size": {
17
+ "1": {
18
+ "$type": "fontSizes",
19
+ "$value": "13"
20
+ },
21
+ "2": {
22
+ "$type": "fontSizes",
23
+ "$value": "14"
24
+ },
25
+ "3": {
26
+ "$type": "fontSizes",
27
+ "$value": "16"
28
+ },
29
+ "4": {
30
+ "$type": "fontSizes",
31
+ "$value": "18"
32
+ },
33
+ "5": {
34
+ "$type": "fontSizes",
35
+ "$value": "21"
36
+ },
37
+ "6": {
38
+ "$type": "fontSizes",
39
+ "$value": "24"
40
+ },
41
+ "7": {
42
+ "$type": "fontSizes",
43
+ "$value": "30"
44
+ },
45
+ "8": {
46
+ "$type": "fontSizes",
47
+ "$value": "36"
48
+ },
49
+ "9": {
50
+ "$type": "fontSizes",
51
+ "$value": "48"
52
+ },
53
+ "10": {
54
+ "$type": "fontSizes",
55
+ "$value": "60"
56
+ },
57
+ "11": {
58
+ "$type": "fontSizes",
59
+ "$value": "72"
60
+ }
61
+ },
62
+ "letter-spacing": {
63
+ "1": {
64
+ "$type": "letterSpacing",
65
+ "$value": "-1%"
66
+ },
67
+ "2": {
68
+ "$type": "letterSpacing",
69
+ "$value": "-0.5%"
70
+ },
71
+ "3": {
72
+ "$type": "letterSpacing",
73
+ "$value": "-0.25%"
74
+ },
75
+ "4": {
76
+ "$type": "letterSpacing",
77
+ "$value": "-0.15%"
78
+ },
79
+ "5": {
80
+ "$type": "letterSpacing",
81
+ "$value": "0%"
82
+ },
83
+ "6": {
84
+ "$type": "letterSpacing",
85
+ "$value": "0.15%"
86
+ },
87
+ "7": {
88
+ "$type": "letterSpacing",
89
+ "$value": "0.25%"
90
+ },
91
+ "8": {
92
+ "$type": "letterSpacing",
93
+ "$value": "0.5%"
94
+ },
95
+ "9": {
96
+ "$type": "letterSpacing",
97
+ "$value": "1.5%"
98
+ }
99
+ }
100
+ }
package/dist/src/tokens/design-tokens/default/primitives/{size/default.json → modes/typography/size/medium.json} RENAMED
@@ -1,130 +1,60 @@
1
1
  {
2
2
  "line-height": {
3
3
  "sm": {
4
- "$extensions": {
5
- "studio.tokens": {
6
- "modify": {}
7
- }
8
- },
9
4
  "$type": "lineHeights",
10
5
  "$value": "130%"
11
6
  },
12
7
  "md": {
13
- "$extensions": {
14
- "studio.tokens": {
15
- "modify": {}
16
- }
17
- },
18
8
  "$type": "lineHeights",
19
9
  "$value": "150%"
20
10
  },
21
11
  "lg": {
22
- "$extensions": {
23
- "studio.tokens": {
24
- "modify": {}
25
- }
26
- },
27
12
  "$type": "lineHeights",
28
13
  "$value": "170%"
29
14
  }
30
15
  },
31
16
  "font-size": {
32
17
  "1": {
33
- "$extensions": {
34
- "studio.tokens": {
35
- "modify": {}
36
- }
37
- },
38
18
  "$type": "fontSizes",
39
19
  "$value": "12"
40
20
  },
41
21
  "2": {
42
- "$extensions": {
43
- "studio.tokens": {
44
- "modify": {}
45
- }
46
- },
47
22
  "$type": "fontSizes",
48
23
  "$value": "13"
49
24
  },
50
25
  "3": {
51
- "$extensions": {
52
- "studio.tokens": {
53
- "modify": {}
54
- }
55
- },
56
26
  "$type": "fontSizes",
57
27
  "$value": "14"
58
28
  },
59
29
  "4": {
60
- "$extensions": {
61
- "studio.tokens": {
62
- "modify": {}
63
- }
64
- },
65
30
  "$type": "fontSizes",
66
31
  "$value": "16"
67
32
  },
68
33
  "5": {
69
- "$extensions": {
70
- "studio.tokens": {
71
- "modify": {}
72
- }
73
- },
74
34
  "$type": "fontSizes",
75
35
  "$value": "18"
76
36
  },
77
37
  "6": {
78
- "$extensions": {
79
- "studio.tokens": {
80
- "modify": {}
81
- }
82
- },
83
38
  "$type": "fontSizes",
84
39
  "$value": "21"
85
40
  },
86
41
  "7": {
87
- "$extensions": {
88
- "studio.tokens": {
89
- "modify": {}
90
- }
91
- },
92
42
  "$type": "fontSizes",
93
43
  "$value": "24"
94
44
  },
95
45
  "8": {
96
- "$extensions": {
97
- "studio.tokens": {
98
- "modify": {}
99
- }
100
- },
101
46
  "$type": "fontSizes",
102
47
  "$value": "30"
103
48
  },
104
49
  "9": {
105
- "$extensions": {
106
- "studio.tokens": {
107
- "modify": {}
108
- }
109
- },
110
50
  "$type": "fontSizes",
111
51
  "$value": "36"
112
52
  },
113
53
  "10": {
114
- "$extensions": {
115
- "studio.tokens": {
116
- "modify": {}
117
- }
118
- },
119
54
  "$type": "fontSizes",
120
55
  "$value": "48"
121
56
  },
122
57
  "11": {
123
- "$extensions": {
124
- "studio.tokens": {
125
- "modify": {}
126
- }
127
- },
128
58
  "$type": "fontSizes",
129
59
  "$value": "60"
130
60
  }
@@ -163,11 +93,6 @@
163
93
  "$value": "0.5%"
164
94
  },
165
95
  "9": {
166
- "$extensions": {
167
- "studio.tokens": {
168
- "modify": {}
169
- }
170
- },
171
96
  "$type": "letterSpacing",
172
97
  "$value": "1.5%"
173
98
  }
package/dist/src/tokens/design-tokens/default/primitives/modes/typography/size/small.json ADDED
@@ -0,0 +1,100 @@
1
+ {
2
+ "line-height": {
3
+ "sm": {
4
+ "$type": "lineHeights",
5
+ "$value": "130%"
6
+ },
7
+ "md": {
8
+ "$type": "lineHeights",
9
+ "$value": "150%"
10
+ },
11
+ "lg": {
12
+ "$type": "lineHeights",
13
+ "$value": "170%"
14
+ }
15
+ },
16
+ "font-size": {
17
+ "1": {
18
+ "$type": "fontSizes",
19
+ "$value": "11"
20
+ },
21
+ "2": {
22
+ "$type": "fontSizes",
23
+ "$value": "12"
24
+ },
25
+ "3": {
26
+ "$type": "fontSizes",
27
+ "$value": "13"
28
+ },
29
+ "4": {
30
+ "$type": "fontSizes",
31
+ "$value": "14"
32
+ },
33
+ "5": {
34
+ "$type": "fontSizes",
35
+ "$value": "16"
36
+ },
37
+ "6": {
38
+ "$type": "fontSizes",
39
+ "$value": "18"
40
+ },
41
+ "7": {
42
+ "$type": "fontSizes",
43
+ "$value": "21"
44
+ },
45
+ "8": {
46
+ "$type": "fontSizes",
47
+ "$value": "24"
48
+ },
49
+ "9": {
50
+ "$type": "fontSizes",
51
+ "$value": "30"
52
+ },
53
+ "10": {
54
+ "$type": "fontSizes",
55
+ "$value": "36"
56
+ },
57
+ "11": {
58
+ "$type": "fontSizes",
59
+ "$value": "48"
60
+ }
61
+ },
62
+ "letter-spacing": {
63
+ "1": {
64
+ "$type": "letterSpacing",
65
+ "$value": "-1%"
66
+ },
67
+ "2": {
68
+ "$type": "letterSpacing",
69
+ "$value": "-0.5%"
70
+ },
71
+ "3": {
72
+ "$type": "letterSpacing",
73
+ "$value": "-0.25%"
74
+ },
75
+ "4": {
76
+ "$type": "letterSpacing",
77
+ "$value": "-0.15%"
78
+ },
79
+ "5": {
80
+ "$type": "letterSpacing",
81
+ "$value": "0%"
82
+ },
83
+ "6": {
84
+ "$type": "letterSpacing",
85
+ "$value": "0.15%"
86
+ },
87
+ "7": {
88
+ "$type": "letterSpacing",
89
+ "$value": "0.25%"
90
+ },
91
+ "8": {
92
+ "$type": "letterSpacing",
93
+ "$value": "0.5%"
94
+ },
95
+ "9": {
96
+ "$type": "letterSpacing",
97
+ "$value": "1.5%"
98
+ }
99
+ }
100
+ }
package/dist/src/tokens/design-tokens/default/semantic/style.json CHANGED
@@ -248,177 +248,17 @@
248
248
  "$type": "borderRadius",
249
249
  "$value": "{border-radius.3}"
250
250
  },
251
- "default": {
251
+ "xl": {
252
252
  "$type": "borderRadius",
253
253
  "$value": "{border-radius.4}"
254
254
  },
255
- "full": {
255
+ "default": {
256
256
  "$type": "borderRadius",
257
257
  "$value": "{border-radius.5}"
258
- }
259
- },
260
- "spacing": {
261
- "0": {
262
- "$type": "dimension",
263
- "$value": "{spacing.scale}*0"
264
- },
265
- "1": {
266
- "$type": "dimension",
267
- "$value": "{spacing.scale}*1"
268
- },
269
- "2": {
270
- "$type": "dimension",
271
- "$value": "{spacing.scale}*2"
272
- },
273
- "3": {
274
- "$type": "dimension",
275
- "$value": "{spacing.scale}*3"
276
- },
277
- "4": {
278
- "$type": "dimension",
279
- "$value": "{spacing.scale}*4"
280
- },
281
- "5": {
282
- "$type": "dimension",
283
- "$value": "{spacing.scale}*5"
284
- },
285
- "6": {
286
- "$type": "dimension",
287
- "$value": "{spacing.scale}*6"
288
- },
289
- "7": {
290
- "$type": "dimension",
291
- "$value": "{spacing.scale}*7"
292
- },
293
- "8": {
294
- "$type": "dimension",
295
- "$value": "{spacing.scale}*8"
296
- },
297
- "9": {
298
- "$type": "dimension",
299
- "$value": "{spacing.scale}*9"
300
- },
301
- "10": {
302
- "$type": "dimension",
303
- "$value": "{spacing.scale}*10"
304
- },
305
- "11": {
306
- "$type": "dimension",
307
- "$value": "{spacing.scale}*11"
308
- },
309
- "12": {
310
- "$type": "dimension",
311
- "$value": "{spacing.scale}*12"
312
- },
313
- "13": {
314
- "$type": "dimension",
315
- "$value": "{spacing.scale}*13"
316
- },
317
- "14": {
318
- "$type": "dimension",
319
- "$value": "{spacing.scale}*14"
320
- },
321
- "15": {
322
- "$type": "dimension",
323
- "$value": "{spacing.scale}*15"
324
- },
325
- "18": {
326
- "$type": "dimension",
327
- "$value": "{spacing.scale}*18"
328
- },
329
- "22": {
330
- "$type": "dimension",
331
- "$value": "{spacing.scale}*22"
332
- },
333
- "26": {
334
- "$type": "dimension",
335
- "$value": "{spacing.scale}*26"
336
258
  },
337
- "30": {
338
- "$type": "dimension",
339
- "$value": "{spacing.scale}*30"
340
- }
341
- },
342
- "sizing": {
343
- "0": {
344
- "$type": "dimension",
345
- "$value": "{sizing.scale}*0"
346
- },
347
- "1": {
348
- "$type": "dimension",
349
- "$value": "{sizing.scale}*1"
350
- },
351
- "2": {
352
- "$type": "dimension",
353
- "$value": "{sizing.scale}*2"
354
- },
355
- "3": {
356
- "$type": "dimension",
357
- "$value": "{sizing.scale}*3"
358
- },
359
- "4": {
360
- "$type": "dimension",
361
- "$value": "{sizing.scale}*4"
362
- },
363
- "5": {
364
- "$type": "dimension",
365
- "$value": "{sizing.scale}*5"
366
- },
367
- "6": {
368
- "$type": "dimension",
369
- "$value": "{sizing.scale}*6"
370
- },
371
- "7": {
372
- "$type": "dimension",
373
- "$value": "{sizing.scale}*7"
374
- },
375
- "8": {
376
- "$type": "dimension",
377
- "$value": "{sizing.scale}*8"
378
- },
379
- "9": {
380
- "$type": "dimension",
381
- "$value": "{sizing.scale}*9"
382
- },
383
- "10": {
384
- "$type": "dimension",
385
- "$value": "{sizing.scale}*10"
386
- },
387
- "11": {
388
- "$type": "dimension",
389
- "$value": "{sizing.scale}*11"
390
- },
391
- "12": {
392
- "$type": "dimension",
393
- "$value": "{sizing.scale}*12"
394
- },
395
- "13": {
396
- "$type": "dimension",
397
- "$value": "{sizing.scale}*13"
398
- },
399
- "14": {
400
- "$type": "dimension",
401
- "$value": "{sizing.scale}*14"
402
- },
403
- "15": {
404
- "$type": "dimension",
405
- "$value": "{sizing.scale}*15"
406
- },
407
- "18": {
408
- "$type": "dimension",
409
- "$value": "{sizing.scale}*18"
410
- },
411
- "22": {
412
- "$type": "dimension",
413
- "$value": "{sizing.scale}*22"
414
- },
415
- "26": {
416
- "$type": "dimension",
417
- "$value": "{sizing.scale}*26"
418
- },
419
- "30": {
420
- "$type": "dimension",
421
- "$value": "{sizing.scale}*30"
259
+ "full": {
260
+ "$type": "borderRadius",
261
+ "$value": "{border-radius.6}"
422
262
  }
423
263
  },
424
264
  "border-width": {
@@ -453,4 +293,4 @@
453
293
  "$value": "{shadow.500}"
454
294
  }
455
295
  }
456
- }
296
+ }
package/dist/src/tokens/design-tokens/template/$metadata.json CHANGED
@@ -1,8 +1,13 @@
1
1
  {
2
2
  "tokenSetOrder": [
3
3
  "primitives/globals",
4
- "primitives/size/default",
5
- "primitives/size/compact",
4
+ "primitives/modes/size/small",
5
+ "primitives/modes/size/medium",
6
+ "primitives/modes/size/large",
7
+ "primitives/modes/size/global",
8
+ "primitives/modes/typography/size/small",
9
+ "primitives/modes/typography/size/medium",
10
+ "primitives/modes/typography/size/large",
6
11
  "primitives/modes/typography/primary/<theme>",
7
12
  "primitives/modes/typography/secondary/<theme>",
8
13
  "primitives/modes/color-scheme/dark/global",