@digdir/designsystemet 1.0.0-next.35 → 1.0.0-next.37

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 (153) hide show
  1. package/README.md +16 -0
  2. package/dist/{types/bin → bin}/designsystemet.d.ts.map +1 -1
  3. package/dist/bin/designsystemet.js +14 -15
  4. package/dist/src/colors/index.d.ts.map +1 -0
  5. package/dist/{types/src → src}/colors/theme.d.ts +10 -5
  6. package/dist/src/colors/theme.d.ts.map +1 -0
  7. package/dist/src/colors/theme.js +28 -29
  8. package/dist/{types/src → src}/colors/types.d.ts +0 -1
  9. package/dist/src/colors/types.d.ts.map +1 -0
  10. package/dist/{types/src → src}/colors/utils.d.ts +7 -1
  11. package/dist/src/colors/utils.d.ts.map +1 -0
  12. package/dist/src/colors/utils.js +13 -6
  13. package/dist/src/index.d.ts +3 -0
  14. package/dist/src/index.d.ts.map +1 -0
  15. package/dist/src/index.js +2 -0
  16. package/dist/src/init/createTokensPackage.d.ts.map +1 -0
  17. package/dist/src/init/createTokensPackage.js +4 -4
  18. package/dist/src/init/generateMetadataJson.d.ts.map +1 -0
  19. package/dist/src/init/generateMetadataJson.js +2 -2
  20. package/dist/src/init/generateThemesJson.d.ts.map +1 -0
  21. package/dist/src/init/generateThemesJson.js +2 -2
  22. package/dist/src/init/index.d.ts.map +1 -0
  23. package/dist/src/init/nextStepsMarkdown.d.ts.map +1 -0
  24. package/dist/src/init/nextStepsMarkdown.js +2 -2
  25. package/dist/src/init/utils.d.ts.map +1 -0
  26. package/dist/src/migrations/beta-to-v1.d.ts.map +1 -0
  27. package/dist/src/migrations/beta-to-v1.js +4 -4
  28. package/dist/src/migrations/codemods/css/plugins.d.ts.map +1 -0
  29. package/dist/src/migrations/codemods/css/run.d.ts.map +1 -0
  30. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map +1 -0
  31. package/dist/src/migrations/codemods/jsx/run.d.ts.map +1 -0
  32. package/dist/src/migrations/index.d.ts.map +1 -0
  33. package/dist/src/migrations/react-beta-to-v1.d.ts.map +1 -0
  34. package/dist/src/tokens/build/actions.d.ts.map +1 -0
  35. package/dist/src/tokens/build/builtin-colors.css +87 -0
  36. package/dist/src/tokens/build/configs.d.ts +21 -0
  37. package/dist/src/tokens/build/configs.d.ts.map +1 -0
  38. package/dist/src/tokens/build/configs.js +120 -67
  39. package/dist/src/tokens/build/formats/css.d.ts +13 -0
  40. package/dist/src/tokens/build/formats/css.d.ts.map +1 -0
  41. package/dist/src/tokens/build/formats/css.js +66 -14
  42. package/dist/src/tokens/build/formats/js-tokens.d.ts.map +1 -0
  43. package/dist/src/tokens/build/formats/js-tokens.js +2 -2
  44. package/dist/{types/src → src}/tokens/build/transformers.d.ts +1 -0
  45. package/dist/src/tokens/build/transformers.d.ts.map +1 -0
  46. package/dist/src/tokens/build/transformers.js +13 -0
  47. package/dist/src/tokens/build/types.d.ts +44 -0
  48. package/dist/src/tokens/build/types.d.ts.map +1 -0
  49. package/dist/src/tokens/build/types.js +7 -0
  50. package/dist/src/tokens/build/utils/entryfile.d.ts.map +1 -0
  51. package/dist/src/tokens/build/utils/entryfile.js +14 -6
  52. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts +35 -0
  53. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map +1 -0
  54. package/dist/src/tokens/build/utils/getMultidimensionalThemes.js +112 -0
  55. package/dist/src/tokens/build/utils/noCase.d.ts.map +1 -0
  56. package/dist/{types/src → src}/tokens/build/utils/utils.d.ts +3 -0
  57. package/dist/src/tokens/build/utils/utils.d.ts.map +1 -0
  58. package/dist/src/tokens/build/utils/utils.js +15 -0
  59. package/dist/src/tokens/build.d.ts +17 -0
  60. package/dist/src/tokens/build.d.ts.map +1 -0
  61. package/dist/src/tokens/build.js +97 -77
  62. package/dist/{types/src → src}/tokens/create.d.ts +5 -0
  63. package/dist/src/tokens/create.d.ts.map +1 -0
  64. package/dist/src/tokens/create.js +13 -10
  65. package/dist/src/tokens/design-tokens/default/primitives/globals.json +2 -8
  66. package/dist/src/tokens/design-tokens/default/semantic/style.json +86 -182
  67. package/dist/src/tokens/design-tokens/template/$metadata.json +8 -4
  68. package/dist/src/tokens/design-tokens/template/$themes.json +141 -25
  69. package/dist/src/tokens/design-tokens/template/semantic/color-base-file.json +262 -0
  70. package/dist/src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json +62 -0
  71. package/dist/src/tokens/design-tokens/template/semantic/semantic-color-template.json +62 -0
  72. package/dist/src/tokens/design-tokens/template/themes/theme-base-file.json +53 -0
  73. package/dist/src/tokens/design-tokens/template/themes/theme-color-template.json +62 -0
  74. package/dist/src/tokens/index.d.ts +2 -0
  75. package/dist/src/tokens/index.d.ts.map +1 -0
  76. package/dist/src/tokens/index.js +5 -0
  77. package/dist/src/tokens/template.d.ts.map +1 -0
  78. package/dist/src/tokens/template.js +36 -4
  79. package/dist/{types/src → src}/tokens/types.d.ts +5 -2
  80. package/dist/src/tokens/types.d.ts.map +1 -0
  81. package/dist/{types/src → src}/tokens/write/generate$metadata.d.ts +2 -1
  82. package/dist/src/tokens/write/generate$metadata.d.ts.map +1 -0
  83. package/dist/src/tokens/write/generate$metadata.js +5 -3
  84. package/dist/{types/src → src}/tokens/write/generate$themes.d.ts +2 -1
  85. package/dist/src/tokens/write/generate$themes.d.ts.map +1 -0
  86. package/dist/src/tokens/write/generate$themes.js +20 -6
  87. package/dist/{types/src → src}/tokens/write.d.ts +2 -1
  88. package/dist/src/tokens/write.d.ts.map +1 -0
  89. package/dist/src/tokens/write.js +101 -13
  90. package/package.json +9 -8
  91. package/dist/src/init/template/prettier.config.js +0 -5
  92. package/dist/src/tokens/build/utils/permutateThemes.js +0 -64
  93. package/dist/src/tokens/design-tokens/default/semantic/color.json +0 -572
  94. package/dist/src/tokens/design-tokens/template/themes/theme.json +0 -334
  95. package/dist/types/src/colors/index.d.ts.map +0 -1
  96. package/dist/types/src/colors/theme.d.ts.map +0 -1
  97. package/dist/types/src/colors/types.d.ts.map +0 -1
  98. package/dist/types/src/colors/utils.d.ts.map +0 -1
  99. package/dist/types/src/init/createTokensPackage.d.ts.map +0 -1
  100. package/dist/types/src/init/generateMetadataJson.d.ts.map +0 -1
  101. package/dist/types/src/init/generateThemesJson.d.ts.map +0 -1
  102. package/dist/types/src/init/index.d.ts.map +0 -1
  103. package/dist/types/src/init/nextStepsMarkdown.d.ts.map +0 -1
  104. package/dist/types/src/init/template/prettier.config.d.mts +0 -9
  105. package/dist/types/src/init/template/prettier.config.d.mts.map +0 -1
  106. package/dist/types/src/init/utils.d.ts.map +0 -1
  107. package/dist/types/src/migrations/beta-to-v1.d.ts.map +0 -1
  108. package/dist/types/src/migrations/codemods/css/plugins.d.ts.map +0 -1
  109. package/dist/types/src/migrations/codemods/css/run.d.ts.map +0 -1
  110. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts.map +0 -1
  111. package/dist/types/src/migrations/codemods/jsx/run.d.ts.map +0 -1
  112. package/dist/types/src/migrations/index.d.ts.map +0 -1
  113. package/dist/types/src/migrations/react-beta-to-v1.d.ts.map +0 -1
  114. package/dist/types/src/tokens/build/actions.d.ts.map +0 -1
  115. package/dist/types/src/tokens/build/configs.d.ts +0 -31
  116. package/dist/types/src/tokens/build/configs.d.ts.map +0 -1
  117. package/dist/types/src/tokens/build/formats/css.d.ts +0 -5
  118. package/dist/types/src/tokens/build/formats/css.d.ts.map +0 -1
  119. package/dist/types/src/tokens/build/formats/js-tokens.d.ts.map +0 -1
  120. package/dist/types/src/tokens/build/transformers.d.ts.map +0 -1
  121. package/dist/types/src/tokens/build/utils/entryfile.d.ts.map +0 -1
  122. package/dist/types/src/tokens/build/utils/noCase.d.ts.map +0 -1
  123. package/dist/types/src/tokens/build/utils/permutateThemes.d.ts +0 -17
  124. package/dist/types/src/tokens/build/utils/permutateThemes.d.ts.map +0 -1
  125. package/dist/types/src/tokens/build/utils/utils.d.ts.map +0 -1
  126. package/dist/types/src/tokens/build.d.ts +0 -13
  127. package/dist/types/src/tokens/build.d.ts.map +0 -1
  128. package/dist/types/src/tokens/create.d.ts.map +0 -1
  129. package/dist/types/src/tokens/template.d.ts.map +0 -1
  130. package/dist/types/src/tokens/types.d.ts.map +0 -1
  131. package/dist/types/src/tokens/write/generate$metadata.d.ts.map +0 -1
  132. package/dist/types/src/tokens/write/generate$themes.d.ts.map +0 -1
  133. package/dist/types/src/tokens/write.d.ts.map +0 -1
  134. /package/dist/{types/bin → bin}/designsystemet.d.ts +0 -0
  135. /package/dist/{types/src → src}/colors/index.d.ts +0 -0
  136. /package/dist/{types/src → src}/init/createTokensPackage.d.ts +0 -0
  137. /package/dist/{types/src → src}/init/generateMetadataJson.d.ts +0 -0
  138. /package/dist/{types/src → src}/init/generateThemesJson.d.ts +0 -0
  139. /package/dist/{types/src → src}/init/index.d.ts +0 -0
  140. /package/dist/{types/src → src}/init/nextStepsMarkdown.d.ts +0 -0
  141. /package/dist/{types/src → src}/init/utils.d.ts +0 -0
  142. /package/dist/{types/src → src}/migrations/beta-to-v1.d.ts +0 -0
  143. /package/dist/{types/src → src}/migrations/codemods/css/plugins.d.ts +0 -0
  144. /package/dist/{types/src → src}/migrations/codemods/css/run.d.ts +0 -0
  145. /package/dist/{types/src → src}/migrations/codemods/jsx/classname-prefix.d.ts +0 -0
  146. /package/dist/{types/src → src}/migrations/codemods/jsx/run.d.ts +0 -0
  147. /package/dist/{types/src → src}/migrations/index.d.ts +0 -0
  148. /package/dist/{types/src → src}/migrations/react-beta-to-v1.d.ts +0 -0
  149. /package/dist/{types/src → src}/tokens/build/actions.d.ts +0 -0
  150. /package/dist/{types/src → src}/tokens/build/formats/js-tokens.d.ts +0 -0
  151. /package/dist/{types/src → src}/tokens/build/utils/entryfile.d.ts +0 -0
  152. /package/dist/{types/src → src}/tokens/build/utils/noCase.d.ts +0 -0
  153. /package/dist/{types/src → src}/tokens/template.d.ts +0 -0
@@ -0,0 +1,262 @@
1
+ {
2
+ "color": {
3
+ "success": {
4
+ "background-default": {
5
+ "$type": "color",
6
+ "$value": "{global.green.1}"
7
+ },
8
+ "background-subtle": {
9
+ "$type": "color",
10
+ "$value": "{global.green.2}"
11
+ },
12
+ "surface-default": {
13
+ "$type": "color",
14
+ "$value": "{global.green.3}"
15
+ },
16
+ "surface-hover": {
17
+ "$type": "color",
18
+ "$value": "{global.green.4}"
19
+ },
20
+ "surface-active": {
21
+ "$type": "color",
22
+ "$value": "{global.green.5}"
23
+ },
24
+ "border-subtle": {
25
+ "$type": "color",
26
+ "$value": "{global.green.6}"
27
+ },
28
+ "border-default": {
29
+ "$type": "color",
30
+ "$value": "{global.green.7}"
31
+ },
32
+ "border-strong": {
33
+ "$type": "color",
34
+ "$value": "{global.green.8}"
35
+ },
36
+ "base-default": {
37
+ "$type": "color",
38
+ "$value": "{global.green.9}"
39
+ },
40
+ "base-hover": {
41
+ "$type": "color",
42
+ "$value": "{global.green.10}"
43
+ },
44
+ "base-active": {
45
+ "$type": "color",
46
+ "$value": "{global.green.11}"
47
+ },
48
+ "text-subtle": {
49
+ "$type": "color",
50
+ "$value": "{global.green.12}"
51
+ },
52
+ "text-default": {
53
+ "$type": "color",
54
+ "$value": "{global.green.13}"
55
+ },
56
+ "contrast-default": {
57
+ "$type": "color",
58
+ "$value": "{global.green.contrast-1}"
59
+ },
60
+ "contrast-subtle": {
61
+ "$type": "color",
62
+ "$value": "{global.green.contrast-2}"
63
+ }
64
+ },
65
+ "danger": {
66
+ "background-default": {
67
+ "$type": "color",
68
+ "$value": "{global.red.1}"
69
+ },
70
+ "background-subtle": {
71
+ "$type": "color",
72
+ "$value": "{global.red.2}"
73
+ },
74
+ "surface-default": {
75
+ "$type": "color",
76
+ "$value": "{global.red.3}"
77
+ },
78
+ "surface-hover": {
79
+ "$type": "color",
80
+ "$value": "{global.red.4}"
81
+ },
82
+ "surface-active": {
83
+ "$type": "color",
84
+ "$value": "{global.red.5}"
85
+ },
86
+ "border-subtle": {
87
+ "$type": "color",
88
+ "$value": "{global.red.6}"
89
+ },
90
+ "border-default": {
91
+ "$type": "color",
92
+ "$value": "{global.red.7}"
93
+ },
94
+ "border-strong": {
95
+ "$type": "color",
96
+ "$value": "{global.red.8}"
97
+ },
98
+ "base-default": {
99
+ "$type": "color",
100
+ "$value": "{global.red.9}"
101
+ },
102
+ "base-hover": {
103
+ "$type": "color",
104
+ "$value": "{global.red.10}"
105
+ },
106
+ "base-active": {
107
+ "$type": "color",
108
+ "$value": "{global.red.11}"
109
+ },
110
+ "text-subtle": {
111
+ "$type": "color",
112
+ "$value": "{global.red.12}"
113
+ },
114
+ "text-default": {
115
+ "$type": "color",
116
+ "$value": "{global.red.13}"
117
+ },
118
+ "contrast-default": {
119
+ "$type": "color",
120
+ "$value": "{global.red.contrast-1}"
121
+ },
122
+ "contrast-subtle": {
123
+ "$type": "color",
124
+ "$value": "{global.red.contrast-2}"
125
+ }
126
+ },
127
+ "info": {
128
+ "background-default": {
129
+ "$type": "color",
130
+ "$value": "{global.blue.1}"
131
+ },
132
+ "background-subtle": {
133
+ "$type": "color",
134
+ "$value": "{global.blue.2}"
135
+ },
136
+ "surface-default": {
137
+ "$type": "color",
138
+ "$value": "{global.blue.3}"
139
+ },
140
+ "surface-hover": {
141
+ "$type": "color",
142
+ "$value": "{global.blue.4}"
143
+ },
144
+ "surface-active": {
145
+ "$type": "color",
146
+ "$value": "{global.blue.5}"
147
+ },
148
+ "border-subtle": {
149
+ "$type": "color",
150
+ "$value": "{global.blue.6}"
151
+ },
152
+ "border-default": {
153
+ "$type": "color",
154
+ "$value": "{global.blue.7}"
155
+ },
156
+ "border-strong": {
157
+ "$type": "color",
158
+ "$value": "{global.blue.8}"
159
+ },
160
+ "base-default": {
161
+ "$type": "color",
162
+ "$value": "{global.blue.9}"
163
+ },
164
+ "base-hover": {
165
+ "$type": "color",
166
+ "$value": "{global.blue.10}"
167
+ },
168
+ "base-active": {
169
+ "$type": "color",
170
+ "$value": "{global.blue.11}"
171
+ },
172
+ "text-subtle": {
173
+ "$type": "color",
174
+ "$value": "{global.blue.12}"
175
+ },
176
+ "text-default": {
177
+ "$type": "color",
178
+ "$value": "{global.blue.13}"
179
+ },
180
+ "contrast-default": {
181
+ "$type": "color",
182
+ "$value": "{global.blue.contrast-1}"
183
+ },
184
+ "contrast-subtle": {
185
+ "$type": "color",
186
+ "$value": "{global.blue.contrast-2}"
187
+ }
188
+ },
189
+ "warning": {
190
+ "background-default": {
191
+ "$type": "color",
192
+ "$value": "{global.yellow.1}"
193
+ },
194
+ "background-subtle": {
195
+ "$type": "color",
196
+ "$value": "{global.yellow.2}"
197
+ },
198
+ "surface-default": {
199
+ "$type": "color",
200
+ "$value": "{global.yellow.3}"
201
+ },
202
+ "surface-hover": {
203
+ "$type": "color",
204
+ "$value": "{global.yellow.4}"
205
+ },
206
+ "surface-active": {
207
+ "$type": "color",
208
+ "$value": "{global.yellow.5}"
209
+ },
210
+ "border-subtle": {
211
+ "$type": "color",
212
+ "$value": "{global.yellow.6}"
213
+ },
214
+ "border-default": {
215
+ "$type": "color",
216
+ "$value": "{global.yellow.7}"
217
+ },
218
+ "border-strong": {
219
+ "$type": "color",
220
+ "$value": "{global.yellow.8}"
221
+ },
222
+ "base-default": {
223
+ "$type": "color",
224
+ "$value": "{global.orange.9}"
225
+ },
226
+ "base-hover": {
227
+ "$type": "color",
228
+ "$value": "{global.orange.10}"
229
+ },
230
+ "base-active": {
231
+ "$type": "color",
232
+ "$value": "{global.orange.11}"
233
+ },
234
+ "text-subtle": {
235
+ "$type": "color",
236
+ "$value": "{global.orange.12}"
237
+ },
238
+ "text-default": {
239
+ "$type": "color",
240
+ "$value": "{global.orange.13}"
241
+ },
242
+ "contrast-default": {
243
+ "$type": "color",
244
+ "$value": "{global.orange.contrast-1}"
245
+ },
246
+ "contrast-subtle": {
247
+ "$type": "color",
248
+ "$value": "{global.orange.contrast-2}"
249
+ }
250
+ },
251
+ "focus": {
252
+ "inner": {
253
+ "$type": "color",
254
+ "$value": "{color.neutral.background-default}"
255
+ },
256
+ "outer": {
257
+ "$type": "color",
258
+ "$value": "{color.<accent-color>.text-default}"
259
+ }
260
+ }
261
+ }
262
+ }
@@ -0,0 +1,62 @@
1
+ {
2
+ "background-default": {
3
+ "$type": "color",
4
+ "$value": "{color.<color>.background-default}"
5
+ },
6
+ "background-subtle": {
7
+ "$type": "color",
8
+ "$value": "{color.<color>.background-subtle}"
9
+ },
10
+ "surface-default": {
11
+ "$type": "color",
12
+ "$value": "{color.<color>.surface-default}"
13
+ },
14
+ "surface-hover": {
15
+ "$type": "color",
16
+ "$value": "{color.<color>.surface-hover}"
17
+ },
18
+ "surface-active": {
19
+ "$type": "color",
20
+ "$value": "{color.<color>.surface-active}"
21
+ },
22
+ "border-subtle": {
23
+ "$type": "color",
24
+ "$value": "{color.<color>.border-subtle}"
25
+ },
26
+ "border-default": {
27
+ "$type": "color",
28
+ "$value": "{color.<color>.border-default}"
29
+ },
30
+ "border-strong": {
31
+ "$type": "color",
32
+ "$value": "{color.<color>.border-strong}"
33
+ },
34
+ "base-default": {
35
+ "$type": "color",
36
+ "$value": "{color.<color>.base-default}"
37
+ },
38
+ "base-hover": {
39
+ "$type": "color",
40
+ "$value": "{color.<color>.base-hover}"
41
+ },
42
+ "base-active": {
43
+ "$type": "color",
44
+ "$value": "{color.<color>.base-active}"
45
+ },
46
+ "text-subtle": {
47
+ "$type": "color",
48
+ "$value": "{color.<color>.text-subtle}"
49
+ },
50
+ "text-default": {
51
+ "$type": "color",
52
+ "$value": "{color.<color>.text-default}"
53
+ },
54
+ "contrast-default": {
55
+ "$type": "color",
56
+ "$value": "{color.<color>.contrast-default}"
57
+ },
58
+ "contrast-subtle": {
59
+ "$type": "color",
60
+ "$value": "{color.<color>.contrast-subtle}"
61
+ }
62
+ }
@@ -0,0 +1,62 @@
1
+ {
2
+ "background-default": {
3
+ "$type": "color",
4
+ "$value": "{color.<color>.1}"
5
+ },
6
+ "background-subtle": {
7
+ "$type": "color",
8
+ "$value": "{color.<color>.2}"
9
+ },
10
+ "surface-default": {
11
+ "$type": "color",
12
+ "$value": "{color.<color>.3}"
13
+ },
14
+ "surface-hover": {
15
+ "$type": "color",
16
+ "$value": "{color.<color>.4}"
17
+ },
18
+ "surface-active": {
19
+ "$type": "color",
20
+ "$value": "{color.<color>.5}"
21
+ },
22
+ "border-subtle": {
23
+ "$type": "color",
24
+ "$value": "{color.<color>.6}"
25
+ },
26
+ "border-default": {
27
+ "$type": "color",
28
+ "$value": "{color.<color>.7}"
29
+ },
30
+ "border-strong": {
31
+ "$type": "color",
32
+ "$value": "{color.<color>.8}"
33
+ },
34
+ "base-default": {
35
+ "$type": "color",
36
+ "$value": "{color.<color>.9}"
37
+ },
38
+ "base-hover": {
39
+ "$type": "color",
40
+ "$value": "{color.<color>.10}"
41
+ },
42
+ "base-active": {
43
+ "$type": "color",
44
+ "$value": "{color.<color>.11}"
45
+ },
46
+ "text-subtle": {
47
+ "$type": "color",
48
+ "$value": "{color.<color>.12}"
49
+ },
50
+ "text-default": {
51
+ "$type": "color",
52
+ "$value": "{color.<color>.13}"
53
+ },
54
+ "contrast-default": {
55
+ "$type": "color",
56
+ "$value": "{color.<color>.contrast-1}"
57
+ },
58
+ "contrast-subtle": {
59
+ "$type": "color",
60
+ "$value": "{color.<color>.contrast-2}"
61
+ }
62
+ }
@@ -0,0 +1,53 @@
1
+ {
2
+ "color": {},
3
+ "font": {
4
+ "family": {
5
+ "$type": "fontFamilies",
6
+ "$value": "{<theme>.main}"
7
+ }
8
+ },
9
+ "font-weight": {
10
+ "medium": {
11
+ "$type": "fontWeights",
12
+ "$value": "{<theme>.bold}"
13
+ },
14
+ "semibold": {
15
+ "$type": "fontWeights",
16
+ "$value": "{<theme>.extra-bold}"
17
+ },
18
+ "regular": {
19
+ "$type": "fontWeights",
20
+ "$value": "{<theme>.regular}"
21
+ }
22
+ },
23
+ "border-radius": {
24
+ "1": {
25
+ "$type": "borderRadius",
26
+ "$value": "min( {border-radius.base} , {border-radius.scale} *1)"
27
+ },
28
+ "2": {
29
+ "$type": "borderRadius",
30
+ "$value": "min( {border-radius.base} , {border-radius.scale} *2)"
31
+ },
32
+ "3": {
33
+ "$type": "borderRadius",
34
+ "$value": "min( {border-radius.base} , {border-radius.scale} *5)"
35
+ },
36
+ "4": {
37
+ "$type": "borderRadius",
38
+ "$value": "{border-radius.base}"
39
+ },
40
+ "5": {
41
+ "$type": "borderRadius",
42
+ "$value": "9999"
43
+ },
44
+ "base": {
45
+ "$type": "borderRadius",
46
+ "$value": "4"
47
+ },
48
+ "scale": {
49
+ "$type": "borderRadius",
50
+ "$value": "4"
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,62 @@
1
+ {
2
+ "1": {
3
+ "$type": "color",
4
+ "$value": "{<theme>.<color>.1}"
5
+ },
6
+ "2": {
7
+ "$type": "color",
8
+ "$value": "{<theme>.<color>.2}"
9
+ },
10
+ "3": {
11
+ "$type": "color",
12
+ "$value": "{<theme>.<color>.3}"
13
+ },
14
+ "4": {
15
+ "$type": "color",
16
+ "$value": "{<theme>.<color>.4}"
17
+ },
18
+ "5": {
19
+ "$type": "color",
20
+ "$value": "{<theme>.<color>.5}"
21
+ },
22
+ "6": {
23
+ "$type": "color",
24
+ "$value": "{<theme>.<color>.6}"
25
+ },
26
+ "7": {
27
+ "$type": "color",
28
+ "$value": "{<theme>.<color>.7}"
29
+ },
30
+ "8": {
31
+ "$type": "color",
32
+ "$value": "{<theme>.<color>.8}"
33
+ },
34
+ "9": {
35
+ "$type": "color",
36
+ "$value": "{<theme>.<color>.9}"
37
+ },
38
+ "10": {
39
+ "$type": "color",
40
+ "$value": "{<theme>.<color>.10}"
41
+ },
42
+ "11": {
43
+ "$type": "color",
44
+ "$value": "{<theme>.<color>.11}"
45
+ },
46
+ "12": {
47
+ "$type": "color",
48
+ "$value": "{<theme>.<color>.12}"
49
+ },
50
+ "13": {
51
+ "$type": "color",
52
+ "$value": "{<theme>.<color>.13}"
53
+ },
54
+ "contrast-1": {
55
+ "$type": "color",
56
+ "$value": "{<theme>.<color>.contrast-1}"
57
+ },
58
+ "contrast-2": {
59
+ "$type": "color",
60
+ "$value": "{<theme>.<color>.contrast-2}"
61
+ }
62
+ }
@@ -0,0 +1,2 @@
1
+ export { type CreateTokensOptions, createTokens, colorCliOptions } from './create';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,mBAAmB,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC"}
@@ -0,0 +1,5 @@
1
+ import { createTokens, colorCliOptions } from "./create";
2
+ export {
3
+ colorCliOptions,
4
+ createTokens
5
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../../src/tokens/template.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qBAwG3B,CAAC"}
@@ -1,6 +1,9 @@
1
1
  import fs from "node:fs/promises";
2
2
  import path from "node:path";
3
3
  import * as R from "ramda";
4
+ import originalColorJson from "../../../../design-tokens/semantic/color.json" with { type: "json" };
5
+ import originalColorCategoryJson from "../../../../design-tokens/semantic/modes/main-color/accent.json" with { type: "json" };
6
+ import originalThemeJson from "../../../../design-tokens/themes/theme.json" with { type: "json" };
4
7
  import { stringify } from "./write";
5
8
  const DIRNAME = import.meta.dirname || __dirname;
6
9
  const SOURCE_FILES_PATH = path.join(DIRNAME, "../../../../design-tokens");
@@ -16,11 +19,40 @@ const updateTemplates = async () => {
16
19
  await fs.cp(...argsFromToPaths("Figma"), options);
17
20
  await fs.cp(...argsFromToPaths("primitives/globals.json"), options);
18
21
  await fs.cp(...argsFromToPaths("primitives/size/default.json"), options);
19
- await fs.cp(...argsFromToPaths("semantic"), options);
20
- const themeFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "themes/theme.json"), "utf-8");
21
- const themeTemplate = themeFile.replaceAll("theme", "<theme>");
22
+ await fs.cp(...argsFromToPaths("semantic/style.json"), options);
23
+ const categoryColorTemplate = originalColorCategoryJson.color.main;
24
+ const categoryDir = path.join(TEMPLATE_FILES_PATH, "semantic/modes/category-color");
25
+ await fs.mkdir(categoryDir, options);
26
+ await fs.writeFile(
27
+ path.join(categoryDir, "category-color-template.json"),
28
+ JSON.stringify(categoryColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
29
+ );
30
+ const colorBaseFile = {
31
+ color: R.omit(["accent", "neutral", "brand1", "brand2", "brand3"], originalColorJson.color)
32
+ };
33
+ await fs.writeFile(
34
+ path.join(TEMPLATE_FILES_PATH, `semantic/color-base-file.json`),
35
+ JSON.stringify(colorBaseFile, null, 2).replaceAll("color.accent", "color.<accent-color>")
36
+ );
37
+ const semanticColorTemplate = originalColorJson.color.accent;
38
+ await fs.writeFile(
39
+ path.join(TEMPLATE_FILES_PATH, `semantic/semantic-color-template.json`),
40
+ JSON.stringify(semanticColorTemplate, null, 2).replaceAll("color.accent", "color.<color>")
41
+ );
42
+ const themeBaseFile = {
43
+ color: {},
44
+ ...R.omit(["color"], originalThemeJson)
45
+ };
22
46
  await fs.mkdir(path.join(TEMPLATE_FILES_PATH, "themes"), options);
23
- await fs.writeFile(path.join(TEMPLATE_FILES_PATH, `themes/theme.json`), themeTemplate);
47
+ await fs.writeFile(
48
+ path.join(TEMPLATE_FILES_PATH, `themes/theme-base-file.json`),
49
+ JSON.stringify(themeBaseFile, null, 2).replaceAll("theme", "<theme>")
50
+ );
51
+ const themeColorTemplate = originalThemeJson.color.accent;
52
+ await fs.writeFile(
53
+ path.join(TEMPLATE_FILES_PATH, `themes/theme-color-template.json`),
54
+ JSON.stringify(themeColorTemplate, null, 2).replaceAll("theme.accent", "<theme>.<color>")
55
+ );
24
56
  const themesFile = await fs.readFile(path.join(SOURCE_FILES_PATH, "$themes.json"), "utf-8");
25
57
  const themesTemplate = JSON.parse(themesFile).filter((themeobj) => {
26
58
  if (R.toLower(themeobj.name) === "compact" && R.toLower(themeobj.group || "") === "size") {
@@ -1,5 +1,4 @@
1
1
  import type { CssColor } from '@adobe/leonardo-contrast-colors';
2
- import type { ThemeColors } from '../colors/types.js';
3
2
  export type Token = {
4
3
  $value: string;
5
4
  $type: string;
@@ -23,7 +22,11 @@ export type Tokens = {
23
22
  primary: TokensSet;
24
23
  };
25
24
  };
26
- export type Colors = Record<ThemeColors, CssColor>;
25
+ export type Colors = {
26
+ main: Record<string, CssColor>;
27
+ support: Record<string, CssColor>;
28
+ neutral: CssColor;
29
+ };
27
30
  export type Typography = {
28
31
  fontFamily?: string;
29
32
  };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,MAAM,KAAK,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AACtD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAC/C,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;AAE7D,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B,CAAC;AAGF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AAGzC,MAAM,MAAM,MAAM,GAAG;IACnB,MAAM,EAAE;QACN,KAAK,EAAE,eAAe,CAAC;QACvB,IAAI,EAAE,eAAe,CAAC;QACtB,QAAQ,EAAE,eAAe,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE;QACV,OAAO,EAAE,SAAS,CAAC;KACpB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,QAAQ,CAAC;CACnB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG;IAAE,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACjD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,CAAC;AAEtD,MAAM,MAAM,IAAI,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC"}
@@ -1,8 +1,9 @@
1
1
  import type { ColorMode } from '../../colors/types.js';
2
+ import type { Colors } from '../types.js';
2
3
  type ColorModes = Array<ColorMode>;
3
4
  type Metadata = {
4
5
  tokenSetOrder: string[];
5
6
  };
6
- export declare function generateMetadataJson(modes: ColorModes, themes: string[]): Metadata;
7
+ export declare function generateMetadataJson(modes: ColorModes, themes: string[], colors: Colors): Metadata;
7
8
  export {};
8
9
  //# sourceMappingURL=generate$metadata.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate$metadata.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$metadata.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAEnC,KAAK,QAAQ,GAAG;IACd,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,QAAQ,CAmBlG"}
@@ -1,4 +1,4 @@
1
- function generateMetadataJson(modes, themes) {
1
+ function generateMetadataJson(modes, themes, colors) {
2
2
  return {
3
3
  tokenSetOrder: [
4
4
  "primitives/globals",
@@ -6,11 +6,13 @@ function generateMetadataJson(modes, themes) {
6
6
  ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
7
7
  ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
8
8
  ...modes.flatMap((mode) => [
9
- `primitives/modes/colors/${mode}/global`,
10
- ...themes.map((theme) => `primitives/modes/colors/${mode}/${theme}`)
9
+ `primitives/modes/color-scheme/${mode}/global`,
10
+ ...themes.map((theme) => `primitives/modes/color-scheme/${mode}/${theme}`)
11
11
  ]),
12
12
  ...themes.map((theme) => `themes/${theme}`),
13
13
  "semantic/color",
14
+ ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
15
+ ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
14
16
  "semantic/style",
15
17
  "Figma/components"
16
18
  ]
@@ -1,10 +1,11 @@
1
1
  import { type ThemeObject } from '@tokens-studio/types';
2
2
  import type { ColorMode } from '../../colors/types.js';
3
+ import type { Colors } from '../types.js';
3
4
  type ColorModes = Array<ColorMode>;
4
5
  type ThemeObject_ = ThemeObject & {
5
6
  $figmaCollectionId?: string;
6
7
  $figmaModeId?: string;
7
8
  };
8
- export declare function generateThemesJson(modes: ColorModes, themes: string[]): ThemeObject_[];
9
+ export declare function generateThemesJson(modes: ColorModes, themes: string[], colors: Colors): ThemeObject_[];
9
10
  export {};
10
11
  //# sourceMappingURL=generate$themes.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"generate$themes.d.ts","sourceRoot":"","sources":["../../../../src/tokens/write/generate$themes.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAExE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAM1C,KAAK,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AAEnC,KAAK,YAAY,GAAG,WAAW,GAAG;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,YAAY,EAAE,CAUtG"}