@digdir/designsystemet 1.13.2 → 1.13.3

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 (74) hide show
  1. package/dist/bin/config.js +50 -658
  2. package/dist/bin/designsystemet.js +131 -4623
  3. package/dist/bin/options.js +22 -14
  4. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  5. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  6. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  7. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  8. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  9. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  10. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  11. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  12. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  13. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  15. package/dist/package.js +5 -0
  16. package/dist/src/colors/colorMetadata.js +255 -261
  17. package/dist/src/colors/index.js +5 -522
  18. package/dist/src/colors/theme.js +104 -343
  19. package/dist/src/colors/types.js +22 -25
  20. package/dist/src/colors/utils.js +241 -154
  21. package/dist/src/config.js +103 -444
  22. package/dist/src/index.js +10 -3588
  23. package/dist/src/migrations/beta-to-v1.js +339 -537
  24. package/dist/src/migrations/codemods/css/plugins.js +31 -42
  25. package/dist/src/migrations/codemods/css/run.js +20 -151
  26. package/dist/src/migrations/color-rename-next49.js +44 -220
  27. package/dist/src/migrations/index.js +7 -577
  28. package/dist/src/tokens/build.js +39 -1816
  29. package/dist/src/tokens/create/files.js +43 -602
  30. package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
  31. package/dist/src/tokens/create/generators/$metadata.js +17 -20
  32. package/dist/src/tokens/create/generators/$themes.js +137 -311
  33. package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
  34. package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
  35. package/dist/src/tokens/create/generators/primitives/size.js +146 -156
  36. package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
  37. package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
  38. package/dist/src/tokens/create/generators/semantic/color.js +42 -326
  39. package/dist/src/tokens/create/generators/semantic/style.js +379 -382
  40. package/dist/src/tokens/create/generators/themes/theme.js +108 -392
  41. package/dist/src/tokens/create.js +47 -1591
  42. package/dist/src/tokens/format.js +38 -3324
  43. package/dist/src/tokens/generate-config.js +155 -298
  44. package/dist/src/tokens/index.js +3 -3344
  45. package/dist/src/tokens/process/configs/color.js +50 -1085
  46. package/dist/src/tokens/process/configs/semantic.js +45 -1083
  47. package/dist/src/tokens/process/configs/shared.js +18 -109
  48. package/dist/src/tokens/process/configs/size-mode.js +27 -1082
  49. package/dist/src/tokens/process/configs/size.js +32 -1083
  50. package/dist/src/tokens/process/configs/type-scale.js +49 -1083
  51. package/dist/src/tokens/process/configs/typography.js +63 -1084
  52. package/dist/src/tokens/process/configs.js +88 -1224
  53. package/dist/src/tokens/process/formats/css/color.js +58 -1079
  54. package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
  55. package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
  56. package/dist/src/tokens/process/formats/css/size.js +86 -1079
  57. package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
  58. package/dist/src/tokens/process/formats/css/typography.js +27 -1081
  59. package/dist/src/tokens/process/formats/css.js +18 -1081
  60. package/dist/src/tokens/process/output/declarations.js +18 -1201
  61. package/dist/src/tokens/process/output/tailwind.js +26 -40
  62. package/dist/src/tokens/process/output/theme.js +73 -206
  63. package/dist/src/tokens/process/platform.js +165 -1355
  64. package/dist/src/tokens/process/transformers.js +49 -89
  65. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
  66. package/dist/src/tokens/process/utils/kebab-case.js +7 -5
  67. package/dist/src/tokens/types.js +6 -7
  68. package/dist/src/tokens/utils.js +102 -93
  69. package/dist/src/types.js +1 -5
  70. package/dist/src/utils/filesystem.js +112 -124
  71. package/package.json +10 -13
  72. package/configs/test-tokens.config.json +0 -82
  73. package/dist/src/scripts/createJsonSchema.js +0 -409
  74. package/dist/src/scripts/update-preview-tokens.js +0 -3353
package/dist/src/tokens/create/generators/primitives/globals.js CHANGED
@@ -1,148 +1,142 @@
1
- // src/tokens/create/generators/primitives/globals.ts
2
- var globals = {
3
- "border-width": {
4
- "1": {
5
- $type: "borderWidth",
6
- $value: "1px"
7
- },
8
- "3": {
9
- $type: "borderWidth",
10
- $value: "3px"
11
- }
12
- },
13
- shadow: {
14
- "100": {
15
- $type: "boxShadow",
16
- $value: [
17
- {
18
- color: "rgba(0,0,0,0.16)",
19
- x: "0",
20
- y: "0",
21
- blur: "1",
22
- spread: "0"
23
- },
24
- {
25
- x: "0",
26
- y: "1",
27
- blur: "2",
28
- spread: "0",
29
- color: "rgba(0,0,0,0.12)"
30
- }
31
- ]
32
- },
33
- "200": {
34
- $type: "boxShadow",
35
- $value: [
36
- {
37
- color: "rgba(0,0,0,0.15)",
38
- x: "0",
39
- y: "0",
40
- blur: "1",
41
- spread: "0"
42
- },
43
- {
44
- color: "rgba(0,0,0,0.12)",
45
- x: "0",
46
- y: "1",
47
- blur: "2",
48
- spread: "0"
49
- },
50
- {
51
- x: "0",
52
- y: "2",
53
- blur: "4",
54
- spread: "0",
55
- color: "rgba(0,0,0,0.1)"
56
- }
57
- ]
58
- },
59
- "300": {
60
- $type: "boxShadow",
61
- $value: [
62
- {
63
- color: "rgba(0,0,0,0.14)",
64
- x: "0",
65
- y: "0",
66
- blur: "1",
67
- spread: "0"
68
- },
69
- {
70
- color: "rgba(0,0,0,0.12)",
71
- x: "0",
72
- y: "2",
73
- blur: "4",
74
- spread: "0"
75
- },
76
- {
77
- x: "0",
78
- y: "4",
79
- blur: "8",
80
- spread: "0",
81
- color: "rgba(0,0,0,0.12)"
82
- }
83
- ]
84
- },
85
- "400": {
86
- $type: "boxShadow",
87
- $value: [
88
- {
89
- color: "rgba(0,0,0,0.13)",
90
- x: "0",
91
- y: "0",
92
- blur: "1",
93
- spread: "0"
94
- },
95
- {
96
- color: "rgba(0,0,0,0.13)",
97
- x: "0",
98
- y: "3",
99
- blur: "5",
100
- spread: "0"
101
- },
102
- {
103
- x: "0",
104
- y: "6",
105
- blur: "12",
106
- spread: "0",
107
- color: "rgba(0,0,0,0.14)"
108
- }
109
- ]
110
- },
111
- "500": {
112
- $type: "boxShadow",
113
- $value: [
114
- {
115
- color: "rgba(0,0,0,0.12)",
116
- x: "0",
117
- y: "0",
118
- blur: "1",
119
- spread: "0"
120
- },
121
- {
122
- color: "rgba(0,0,0,0.16)",
123
- x: "0",
124
- y: "4",
125
- blur: "8",
126
- spread: "0"
127
- },
128
- {
129
- x: "0",
130
- y: "12",
131
- blur: "24",
132
- spread: "0",
133
- color: "rgba(0,0,0,0.16)"
134
- }
135
- ]
136
- }
137
- },
138
- opacity: {
139
- "30": {
140
- $type: "opacity",
141
- $value: "30%"
142
- }
143
- }
144
- };
145
- var generateGlobals = () => globals;
146
- export {
147
- generateGlobals
1
+ //#region src/tokens/create/generators/primitives/globals.ts
2
+ const globals = {
3
+ "border-width": {
4
+ "1": {
5
+ $type: "borderWidth",
6
+ $value: "1px"
7
+ },
8
+ "3": {
9
+ $type: "borderWidth",
10
+ $value: "3px"
11
+ }
12
+ },
13
+ shadow: {
14
+ "100": {
15
+ $type: "boxShadow",
16
+ $value: [{
17
+ color: "rgba(0,0,0,0.16)",
18
+ x: "0",
19
+ y: "0",
20
+ blur: "1",
21
+ spread: "0"
22
+ }, {
23
+ x: "0",
24
+ y: "1",
25
+ blur: "2",
26
+ spread: "0",
27
+ color: "rgba(0,0,0,0.12)"
28
+ }]
29
+ },
30
+ "200": {
31
+ $type: "boxShadow",
32
+ $value: [
33
+ {
34
+ color: "rgba(0,0,0,0.15)",
35
+ x: "0",
36
+ y: "0",
37
+ blur: "1",
38
+ spread: "0"
39
+ },
40
+ {
41
+ color: "rgba(0,0,0,0.12)",
42
+ x: "0",
43
+ y: "1",
44
+ blur: "2",
45
+ spread: "0"
46
+ },
47
+ {
48
+ x: "0",
49
+ y: "2",
50
+ blur: "4",
51
+ spread: "0",
52
+ color: "rgba(0,0,0,0.1)"
53
+ }
54
+ ]
55
+ },
56
+ "300": {
57
+ $type: "boxShadow",
58
+ $value: [
59
+ {
60
+ color: "rgba(0,0,0,0.14)",
61
+ x: "0",
62
+ y: "0",
63
+ blur: "1",
64
+ spread: "0"
65
+ },
66
+ {
67
+ color: "rgba(0,0,0,0.12)",
68
+ x: "0",
69
+ y: "2",
70
+ blur: "4",
71
+ spread: "0"
72
+ },
73
+ {
74
+ x: "0",
75
+ y: "4",
76
+ blur: "8",
77
+ spread: "0",
78
+ color: "rgba(0,0,0,0.12)"
79
+ }
80
+ ]
81
+ },
82
+ "400": {
83
+ $type: "boxShadow",
84
+ $value: [
85
+ {
86
+ color: "rgba(0,0,0,0.13)",
87
+ x: "0",
88
+ y: "0",
89
+ blur: "1",
90
+ spread: "0"
91
+ },
92
+ {
93
+ color: "rgba(0,0,0,0.13)",
94
+ x: "0",
95
+ y: "3",
96
+ blur: "5",
97
+ spread: "0"
98
+ },
99
+ {
100
+ x: "0",
101
+ y: "6",
102
+ blur: "12",
103
+ spread: "0",
104
+ color: "rgba(0,0,0,0.14)"
105
+ }
106
+ ]
107
+ },
108
+ "500": {
109
+ $type: "boxShadow",
110
+ $value: [
111
+ {
112
+ color: "rgba(0,0,0,0.12)",
113
+ x: "0",
114
+ y: "0",
115
+ blur: "1",
116
+ spread: "0"
117
+ },
118
+ {
119
+ color: "rgba(0,0,0,0.16)",
120
+ x: "0",
121
+ y: "4",
122
+ blur: "8",
123
+ spread: "0"
124
+ },
125
+ {
126
+ x: "0",
127
+ y: "12",
128
+ blur: "24",
129
+ spread: "0",
130
+ color: "rgba(0,0,0,0.16)"
131
+ }
132
+ ]
133
+ }
134
+ },
135
+ opacity: { "30": {
136
+ $type: "opacity",
137
+ $value: "30%"
138
+ } }
148
139
  };
140
+ const generateGlobals = () => globals;
141
+ //#endregion
142
+ export { generateGlobals };
package/dist/src/tokens/create/generators/primitives/size.js CHANGED
@@ -1,157 +1,147 @@
1
- // src/tokens/create/generators/primitives/size.ts
2
- var global = {
3
- _size: {
4
- "0": {
5
- $type: "dimension",
6
- $value: "floor({_size.unit} * 0)"
7
- },
8
- "1": {
9
- $type: "dimension",
10
- $value: "floor({_size.unit} * 1)"
11
- },
12
- "2": {
13
- $type: "dimension",
14
- $value: "floor({_size.unit} * 2)"
15
- },
16
- "3": {
17
- $type: "dimension",
18
- $value: "floor({_size.unit} * 3)"
19
- },
20
- "4": {
21
- $type: "dimension",
22
- $value: "floor({_size.unit} * 4)"
23
- },
24
- "5": {
25
- $type: "dimension",
26
- $value: "floor({_size.unit} * 5)"
27
- },
28
- "6": {
29
- $type: "dimension",
30
- $value: "floor({_size.unit} * 6)"
31
- },
32
- "7": {
33
- $type: "dimension",
34
- $value: "floor({_size.unit} * 7)"
35
- },
36
- "8": {
37
- $type: "dimension",
38
- $value: "floor({_size.unit} * 8)"
39
- },
40
- "9": {
41
- $type: "dimension",
42
- $value: "floor({_size.unit} * 9)"
43
- },
44
- "10": {
45
- $type: "dimension",
46
- $value: "floor({_size.unit} * 10)"
47
- },
48
- "11": {
49
- $type: "dimension",
50
- $value: "floor({_size.unit} * 11)"
51
- },
52
- "12": {
53
- $type: "dimension",
54
- $value: "floor({_size.unit} * 12)"
55
- },
56
- "13": {
57
- $type: "dimension",
58
- $value: "floor({_size.unit} * 13)"
59
- },
60
- "14": {
61
- $type: "dimension",
62
- $value: "floor({_size.unit} * 14)"
63
- },
64
- "15": {
65
- $type: "dimension",
66
- $value: "floor({_size.unit} * 15)"
67
- },
68
- "18": {
69
- $type: "dimension",
70
- $value: "floor({_size.unit} * 18)"
71
- },
72
- "22": {
73
- $type: "dimension",
74
- $value: "floor({_size.unit} * 22)"
75
- },
76
- "26": {
77
- $type: "dimension",
78
- $value: "floor({_size.unit} * 26)"
79
- },
80
- "30": {
81
- $type: "dimension",
82
- $value: "floor({_size.unit} * 30)"
83
- },
84
- "mode-font-size": {
85
- $type: "number",
86
- $value: "{size._mode-font-size}"
87
- },
88
- base: {
89
- $type: "number",
90
- $value: "{size._base}"
91
- },
92
- step: {
93
- $type: "number",
94
- $value: "{size._step}"
95
- },
96
- unit: {
97
- $type: "number",
98
- $value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
99
- }
100
- }
101
- };
102
- var sizeModes = {
103
- large: {
104
- size: {
105
- "_mode-font-size": {
106
- $type: "dimension",
107
- $value: "21"
108
- },
109
- _base: {
110
- $type: "dimension",
111
- $value: "18"
112
- },
113
- _step: {
114
- $type: "dimension",
115
- $value: "4"
116
- }
117
- }
118
- },
119
- medium: {
120
- size: {
121
- "_mode-font-size": {
122
- $type: "dimension",
123
- $value: "18"
124
- },
125
- _base: {
126
- $type: "dimension",
127
- $value: "18"
128
- },
129
- _step: {
130
- $type: "dimension",
131
- $value: "4"
132
- }
133
- }
134
- },
135
- small: {
136
- size: {
137
- "_mode-font-size": {
138
- $type: "dimension",
139
- $value: "16"
140
- },
141
- _base: {
142
- $type: "dimension",
143
- $value: "18"
144
- },
145
- _step: {
146
- $type: "dimension",
147
- $value: "4"
148
- }
149
- }
150
- }
151
- };
152
- var generateSize = (size) => sizeModes[size];
153
- var generateSizeGlobal = () => global;
154
- export {
155
- generateSize,
156
- generateSizeGlobal
1
+ //#region src/tokens/create/generators/primitives/size.ts
2
+ const global = { _size: {
3
+ "0": {
4
+ $type: "dimension",
5
+ $value: "floor({_size.unit} * 0)"
6
+ },
7
+ "1": {
8
+ $type: "dimension",
9
+ $value: "floor({_size.unit} * 1)"
10
+ },
11
+ "2": {
12
+ $type: "dimension",
13
+ $value: "floor({_size.unit} * 2)"
14
+ },
15
+ "3": {
16
+ $type: "dimension",
17
+ $value: "floor({_size.unit} * 3)"
18
+ },
19
+ "4": {
20
+ $type: "dimension",
21
+ $value: "floor({_size.unit} * 4)"
22
+ },
23
+ "5": {
24
+ $type: "dimension",
25
+ $value: "floor({_size.unit} * 5)"
26
+ },
27
+ "6": {
28
+ $type: "dimension",
29
+ $value: "floor({_size.unit} * 6)"
30
+ },
31
+ "7": {
32
+ $type: "dimension",
33
+ $value: "floor({_size.unit} * 7)"
34
+ },
35
+ "8": {
36
+ $type: "dimension",
37
+ $value: "floor({_size.unit} * 8)"
38
+ },
39
+ "9": {
40
+ $type: "dimension",
41
+ $value: "floor({_size.unit} * 9)"
42
+ },
43
+ "10": {
44
+ $type: "dimension",
45
+ $value: "floor({_size.unit} * 10)"
46
+ },
47
+ "11": {
48
+ $type: "dimension",
49
+ $value: "floor({_size.unit} * 11)"
50
+ },
51
+ "12": {
52
+ $type: "dimension",
53
+ $value: "floor({_size.unit} * 12)"
54
+ },
55
+ "13": {
56
+ $type: "dimension",
57
+ $value: "floor({_size.unit} * 13)"
58
+ },
59
+ "14": {
60
+ $type: "dimension",
61
+ $value: "floor({_size.unit} * 14)"
62
+ },
63
+ "15": {
64
+ $type: "dimension",
65
+ $value: "floor({_size.unit} * 15)"
66
+ },
67
+ "18": {
68
+ $type: "dimension",
69
+ $value: "floor({_size.unit} * 18)"
70
+ },
71
+ "22": {
72
+ $type: "dimension",
73
+ $value: "floor({_size.unit} * 22)"
74
+ },
75
+ "26": {
76
+ $type: "dimension",
77
+ $value: "floor({_size.unit} * 26)"
78
+ },
79
+ "30": {
80
+ $type: "dimension",
81
+ $value: "floor({_size.unit} * 30)"
82
+ },
83
+ "mode-font-size": {
84
+ $type: "number",
85
+ $value: "{size._mode-font-size}"
86
+ },
87
+ base: {
88
+ $type: "number",
89
+ $value: "{size._base}"
90
+ },
91
+ step: {
92
+ $type: "number",
93
+ $value: "{size._step}"
94
+ },
95
+ unit: {
96
+ $type: "number",
97
+ $value: "{_size.step} / {_size.base} * {_size.mode-font-size}"
98
+ }
99
+ } };
100
+ const sizeModes = {
101
+ large: { size: {
102
+ "_mode-font-size": {
103
+ $type: "dimension",
104
+ $value: "21"
105
+ },
106
+ _base: {
107
+ $type: "dimension",
108
+ $value: "18"
109
+ },
110
+ _step: {
111
+ $type: "dimension",
112
+ $value: "4"
113
+ }
114
+ } },
115
+ medium: { size: {
116
+ "_mode-font-size": {
117
+ $type: "dimension",
118
+ $value: "18"
119
+ },
120
+ _base: {
121
+ $type: "dimension",
122
+ $value: "18"
123
+ },
124
+ _step: {
125
+ $type: "dimension",
126
+ $value: "4"
127
+ }
128
+ } },
129
+ small: { size: {
130
+ "_mode-font-size": {
131
+ $type: "dimension",
132
+ $value: "16"
133
+ },
134
+ _base: {
135
+ $type: "dimension",
136
+ $value: "18"
137
+ },
138
+ _step: {
139
+ $type: "dimension",
140
+ $value: "4"
141
+ }
142
+ } }
157
143
  };
144
+ const generateSize = (size) => sizeModes[size];
145
+ const generateSizeGlobal = () => global;
146
+ //#endregion
147
+ export { generateSize, generateSizeGlobal };