@digdir/designsystemet 1.0.3 → 1.0.5

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 (189) hide show
  1. package/dist/bin/designsystemet.js +4287 -45
  2. package/dist/bin/options.js +5 -4
  3. package/dist/src/colors/colorMetadata.js +5 -4
  4. package/dist/src/colors/index.js +470 -4
  5. package/dist/src/colors/theme.js +286 -20
  6. package/dist/src/colors/utils.js +16 -15
  7. package/dist/{bin → src}/config.d.ts +46 -1
  8. package/dist/src/config.d.ts.map +1 -0
  9. package/dist/src/config.js +377 -0
  10. package/dist/src/index.js +3682 -2
  11. package/dist/src/migrations/beta-to-v1.js +85 -4
  12. package/dist/src/migrations/codemods/css/plugins.js +5 -4
  13. package/dist/src/migrations/codemods/css/run.d.ts.map +1 -1
  14. package/dist/src/migrations/codemods/css/run.js +18 -4
  15. package/dist/src/migrations/color-rename-next49.js +77 -6
  16. package/dist/src/migrations/index.d.ts +0 -1
  17. package/dist/src/migrations/index.d.ts.map +1 -1
  18. package/dist/src/migrations/index.js +461 -6
  19. package/dist/src/scripts/createJsonSchema.js +1608 -4
  20. package/dist/src/scripts/update-design-tokens.d.ts +2 -0
  21. package/dist/src/scripts/update-design-tokens.d.ts.map +1 -0
  22. package/dist/src/scripts/update-design-tokens.js +37 -0
  23. package/dist/src/{tokens/template.d.ts → scripts/update-template.d.ts} +1 -1
  24. package/dist/src/scripts/update-template.d.ts.map +1 -0
  25. package/dist/src/scripts/update-template.js +1200 -0
  26. package/dist/src/tokens/build.d.ts +2 -19
  27. package/dist/src/tokens/build.d.ts.map +1 -1
  28. package/dist/src/tokens/build.js +1268 -70
  29. package/dist/src/tokens/create/defaults.d.ts +7 -0
  30. package/dist/src/tokens/create/defaults.d.ts.map +1 -0
  31. package/dist/src/tokens/create/defaults.js +994 -0
  32. package/dist/src/tokens/create/generators/$designsystemet.d.ts +5 -0
  33. package/dist/src/tokens/create/generators/$designsystemet.d.ts.map +1 -0
  34. package/dist/src/tokens/create/generators/$designsystemet.js +101 -0
  35. package/dist/src/tokens/create/generators/$metadata.d.ts +8 -0
  36. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -0
  37. package/dist/src/tokens/{write/generate$metadata.js → create/generators/$metadata.js} +3 -2
  38. package/dist/src/tokens/create/generators/$themes.d.ts +12 -0
  39. package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -0
  40. package/dist/src/tokens/create/generators/$themes.js +333 -0
  41. package/dist/src/tokens/create/generators/color.d.ts +5 -0
  42. package/dist/src/tokens/create/generators/color.d.ts.map +1 -0
  43. package/dist/src/tokens/create/generators/color.js +374 -0
  44. package/dist/src/tokens/create/generators/semantic.d.ts +296 -0
  45. package/dist/src/tokens/create/generators/semantic.d.ts.map +1 -0
  46. package/dist/src/tokens/create/generators/semantic.js +483 -0
  47. package/dist/src/tokens/create/generators/theme.d.ts +3 -0
  48. package/dist/src/tokens/create/generators/theme.d.ts.map +1 -0
  49. package/dist/src/tokens/create/generators/theme.js +168 -0
  50. package/dist/src/tokens/create/generators/typography.d.ts +3 -0
  51. package/dist/src/tokens/create/generators/typography.d.ts.map +1 -0
  52. package/dist/src/tokens/create/generators/typography.js +33 -0
  53. package/dist/src/tokens/{write.d.ts → create/write.d.ts} +2 -2
  54. package/dist/src/tokens/create/write.d.ts.map +1 -0
  55. package/dist/src/tokens/create/write.js +547 -0
  56. package/dist/src/tokens/create.d.ts +4 -2
  57. package/dist/src/tokens/create.d.ts.map +1 -1
  58. package/dist/src/tokens/create.js +2049 -59
  59. package/dist/src/tokens/format.d.ts +15 -0
  60. package/dist/src/tokens/format.d.ts.map +1 -0
  61. package/dist/src/tokens/format.js +3529 -0
  62. package/dist/src/tokens/index.d.ts +1 -0
  63. package/dist/src/tokens/index.d.ts.map +1 -1
  64. package/dist/src/tokens/index.js +3542 -2
  65. package/dist/src/tokens/process/configs/color.d.ts +12 -0
  66. package/dist/src/tokens/process/configs/color.d.ts.map +1 -0
  67. package/dist/src/tokens/process/configs/color.js +823 -0
  68. package/dist/src/tokens/process/configs/semantic.d.ts +3 -0
  69. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -0
  70. package/dist/src/tokens/process/configs/semantic.js +367 -0
  71. package/dist/src/tokens/process/configs/shared.d.ts +10 -0
  72. package/dist/src/tokens/process/configs/shared.d.ts.map +1 -0
  73. package/dist/src/tokens/process/configs/shared.js +99 -0
  74. package/dist/src/tokens/process/configs/storefront.d.ts +3 -0
  75. package/dist/src/tokens/process/configs/storefront.d.ts.map +1 -0
  76. package/dist/src/tokens/process/configs/storefront.js +220 -0
  77. package/dist/src/tokens/process/configs/typography.d.ts +3 -0
  78. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -0
  79. package/dist/src/tokens/process/configs/typography.js +369 -0
  80. package/dist/src/tokens/{build → process}/configs.d.ts +3 -11
  81. package/dist/src/tokens/process/configs.d.ts.map +1 -0
  82. package/dist/src/tokens/process/configs.js +976 -0
  83. package/dist/src/tokens/process/formats/css/color.d.ts +4 -0
  84. package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -0
  85. package/dist/src/tokens/process/formats/css/color.js +128 -0
  86. package/dist/src/tokens/process/formats/css/semantic.d.ts +17 -0
  87. package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -0
  88. package/dist/src/tokens/process/formats/css/semantic.js +109 -0
  89. package/dist/src/tokens/process/formats/css/typography.d.ts +3 -0
  90. package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -0
  91. package/dist/src/tokens/process/formats/css/typography.js +32 -0
  92. package/dist/src/tokens/process/formats/css.d.ts +8 -0
  93. package/dist/src/tokens/process/formats/css.d.ts.map +1 -0
  94. package/dist/src/tokens/{build → process}/formats/css.js +94 -57
  95. package/dist/src/tokens/process/formats/js-tokens.d.ts.map +1 -0
  96. package/dist/src/tokens/process/formats/js-tokens.js +109 -0
  97. package/dist/src/tokens/process/platform.d.ts +87 -0
  98. package/dist/src/tokens/process/platform.d.ts.map +1 -0
  99. package/dist/src/tokens/process/platform.js +1090 -0
  100. package/dist/src/tokens/process/theme.d.ts +27 -0
  101. package/dist/src/tokens/process/theme.d.ts.map +1 -0
  102. package/dist/src/tokens/process/theme.js +172 -0
  103. package/dist/src/tokens/process/transformers.d.ts.map +1 -0
  104. package/dist/src/tokens/{build → process}/transformers.js +29 -6
  105. package/dist/src/tokens/{build → process}/utils/getMultidimensionalThemes.d.ts +3 -3
  106. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -0
  107. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +922 -0
  108. package/dist/src/tokens/template/design-tokens/primitives/globals.js +5 -0
  109. package/dist/src/tokens/template/design-tokens/primitives/modes/size/global.js +5 -0
  110. package/dist/src/tokens/template/design-tokens/primitives/modes/size/large.js +5 -0
  111. package/dist/src/tokens/template/design-tokens/primitives/modes/size/medium.js +5 -0
  112. package/dist/src/tokens/template/design-tokens/primitives/modes/size/small.js +5 -0
  113. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/large.js +5 -0
  114. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/medium.js +5 -0
  115. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/size/small.js +5 -0
  116. package/dist/src/tokens/template/design-tokens/primitives/modes/typography/typography.template.js +5 -0
  117. package/dist/src/tokens/template/design-tokens/semantic/color.base.template.js +5 -0
  118. package/dist/src/tokens/template/design-tokens/semantic/color.template.js +5 -0
  119. package/dist/src/tokens/template/design-tokens/semantic/modes/color.template.js +5 -0
  120. package/dist/src/tokens/template/design-tokens/semantic/style.js +5 -0
  121. package/dist/src/tokens/template/design-tokens/themes/theme.base.template.js +5 -0
  122. package/dist/src/tokens/template/design-tokens/themes/theme.template.js +5 -0
  123. package/dist/src/tokens/types.d.ts +58 -38
  124. package/dist/src/tokens/types.d.ts.map +1 -1
  125. package/dist/src/tokens/types.js +8 -0
  126. package/dist/src/tokens/utils.d.ts +30 -5
  127. package/dist/src/tokens/utils.d.ts.map +1 -1
  128. package/dist/src/tokens/utils.js +36 -50
  129. package/dist/src/utils.d.ts +18 -0
  130. package/dist/src/utils.d.ts.map +1 -0
  131. package/dist/src/utils.js +63 -0
  132. package/dist/typography.template-4N5YLH7F.json +22 -0
  133. package/package.json +22 -20
  134. package/dist/bin/config.d.ts.map +0 -1
  135. package/dist/bin/config.js +0 -71
  136. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts +0 -10
  137. package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map +0 -1
  138. package/dist/src/migrations/codemods/jsx/classname-prefix.js +0 -64
  139. package/dist/src/migrations/codemods/jsx/run.d.ts +0 -7
  140. package/dist/src/migrations/codemods/jsx/run.d.ts.map +0 -1
  141. package/dist/src/migrations/codemods/jsx/run.js +0 -22
  142. package/dist/src/migrations/react-beta-to-v1.d.ts +0 -3
  143. package/dist/src/migrations/react-beta-to-v1.d.ts.map +0 -1
  144. package/dist/src/migrations/react-beta-to-v1.js +0 -5
  145. package/dist/src/scripts/copy-internal-tokens.d.ts +0 -2
  146. package/dist/src/scripts/copy-internal-tokens.d.ts.map +0 -1
  147. package/dist/src/scripts/copy-internal-tokens.js +0 -28
  148. package/dist/src/tokens/build/configs.d.ts.map +0 -1
  149. package/dist/src/tokens/build/configs.js +0 -280
  150. package/dist/src/tokens/build/formats/css.d.ts +0 -53
  151. package/dist/src/tokens/build/formats/css.d.ts.map +0 -1
  152. package/dist/src/tokens/build/formats/js-tokens.d.ts.map +0 -1
  153. package/dist/src/tokens/build/formats/js-tokens.js +0 -48
  154. package/dist/src/tokens/build/transformers.d.ts.map +0 -1
  155. package/dist/src/tokens/build/types.d.ts +0 -48
  156. package/dist/src/tokens/build/types.d.ts.map +0 -1
  157. package/dist/src/tokens/build/types.js +0 -7
  158. package/dist/src/tokens/build/utils/entryfile.d.ts +0 -12
  159. package/dist/src/tokens/build/utils/entryfile.d.ts.map +0 -1
  160. package/dist/src/tokens/build/utils/entryfile.js +0 -67
  161. package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map +0 -1
  162. package/dist/src/tokens/build/utils/getMultidimensionalThemes.js +0 -112
  163. package/dist/src/tokens/design-tokens/template/$metadata.json +0 -25
  164. package/dist/src/tokens/design-tokens/template/$themes.json +0 -1498
  165. package/dist/src/tokens/template.d.ts.map +0 -1
  166. package/dist/src/tokens/template.js +0 -99
  167. package/dist/src/tokens/write/generate$metadata.d.ts +0 -9
  168. package/dist/src/tokens/write/generate$metadata.d.ts.map +0 -1
  169. package/dist/src/tokens/write/generate$themes.d.ts +0 -12
  170. package/dist/src/tokens/write/generate$themes.d.ts.map +0 -1
  171. package/dist/src/tokens/write/generate$themes.js +0 -161
  172. package/dist/src/tokens/write.d.ts.map +0 -1
  173. package/dist/src/tokens/write.js +0 -177
  174. /package/dist/{src/tokens/design-tokens/template/semantic/color-base-file.json → color.base.template-M7BHS4OV.json} +0 -0
  175. /package/dist/{src/tokens/design-tokens/template/semantic/modes/category-color/category-color-template.json → color.template-LMPUQ72A.json} +0 -0
  176. /package/dist/{src/tokens/design-tokens/template/semantic/semantic-color-template.json → color.template-XQNSHLTU.json} +0 -0
  177. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/global.json → global-XVXVBKM6.json} +0 -0
  178. /package/dist/{src/tokens/design-tokens/default/primitives/globals.json → globals-76VAFMDF.json} +0 -0
  179. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/large.json → large-CIIHO7AY.json} +0 -0
  180. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/large.json → large-UUOZ6DYI.json} +0 -0
  181. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/medium.json → medium-OQ7S7P4P.json} +0 -0
  182. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/medium.json → medium-VSB2S4X3.json} +0 -0
  183. /package/dist/{src/tokens/design-tokens/default/primitives/modes/typography/size/small.json → small-AEXJ6U7Z.json} +0 -0
  184. /package/dist/{src/tokens/design-tokens/default/primitives/modes/size/small.json → small-ZY4KOJWX.json} +0 -0
  185. /package/dist/src/tokens/{build → process}/formats/js-tokens.d.ts +0 -0
  186. /package/dist/src/tokens/{build → process}/transformers.d.ts +0 -0
  187. /package/dist/{src/tokens/design-tokens/default/semantic/style.json → style-FP5XVCUD.json} +0 -0
  188. /package/dist/{src/tokens/design-tokens/template/themes/theme-base-file.json → theme.base.template-Y4RMFBQY.json} +0 -0
  189. /package/dist/{src/tokens/design-tokens/template/themes/theme-color-template.json → theme.template-CTQRNOMO.json} +0 -0
@@ -1,5 +1,3545 @@
1
- import { createTokens, cliOptions } from "./create.js";
1
+ // src/tokens/create/defaults.ts
2
+ import * as R from "ramda";
3
+
4
+ // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
5
+ var globals_default = {
6
+ "border-width": {
7
+ "1": {
8
+ $type: "borderWidth",
9
+ $value: "1px"
10
+ },
11
+ "3": {
12
+ $type: "borderWidth",
13
+ $value: "3px"
14
+ }
15
+ },
16
+ shadow: {
17
+ "100": {
18
+ $type: "boxShadow",
19
+ $value: [
20
+ {
21
+ color: "rgba(0,0,0,0.16)",
22
+ x: "0",
23
+ y: "0",
24
+ blur: "1",
25
+ spread: "0"
26
+ },
27
+ {
28
+ x: "0",
29
+ y: "1",
30
+ blur: "2",
31
+ spread: "0",
32
+ color: "rgba(0,0,0,0.12)"
33
+ }
34
+ ]
35
+ },
36
+ "200": {
37
+ $type: "boxShadow",
38
+ $value: [
39
+ {
40
+ color: "rgba(0,0,0,0.15)",
41
+ x: "0",
42
+ y: "0",
43
+ blur: "1",
44
+ spread: "0"
45
+ },
46
+ {
47
+ color: "rgba(0,0,0,0.12)",
48
+ x: "0",
49
+ y: "1",
50
+ blur: "2",
51
+ spread: "0"
52
+ },
53
+ {
54
+ x: "0",
55
+ y: "2",
56
+ blur: "4",
57
+ spread: "0",
58
+ color: "rgba(0,0,0,0.1)"
59
+ }
60
+ ]
61
+ },
62
+ "300": {
63
+ $type: "boxShadow",
64
+ $value: [
65
+ {
66
+ color: "rgba(0,0,0,0.14)",
67
+ x: "0",
68
+ y: "0",
69
+ blur: "1",
70
+ spread: "0"
71
+ },
72
+ {
73
+ color: "rgba(0,0,0,0.12)",
74
+ x: "0",
75
+ y: "2",
76
+ blur: "4",
77
+ spread: "0"
78
+ },
79
+ {
80
+ x: "0",
81
+ y: "4",
82
+ blur: "8",
83
+ spread: "0",
84
+ color: "rgba(0,0,0,0.12)"
85
+ }
86
+ ]
87
+ },
88
+ "400": {
89
+ $type: "boxShadow",
90
+ $value: [
91
+ {
92
+ color: "rgba(0,0,0,0.13)",
93
+ x: "0",
94
+ y: "0",
95
+ blur: "1",
96
+ spread: "0"
97
+ },
98
+ {
99
+ color: "rgba(0,0,0,0.13)",
100
+ x: "0",
101
+ y: "3",
102
+ blur: "5",
103
+ spread: "0"
104
+ },
105
+ {
106
+ x: "0",
107
+ y: "6",
108
+ blur: "12",
109
+ spread: "0",
110
+ color: "rgba(0,0,0,0.14)"
111
+ }
112
+ ]
113
+ },
114
+ "500": {
115
+ $type: "boxShadow",
116
+ $value: [
117
+ {
118
+ color: "rgba(0,0,0,0.12)",
119
+ x: "0",
120
+ y: "0",
121
+ blur: "1",
122
+ spread: "0"
123
+ },
124
+ {
125
+ color: "rgba(0,0,0,0.16)",
126
+ x: "0",
127
+ y: "4",
128
+ blur: "8",
129
+ spread: "0"
130
+ },
131
+ {
132
+ x: "0",
133
+ y: "12",
134
+ blur: "24",
135
+ spread: "0",
136
+ color: "rgba(0,0,0,0.16)"
137
+ }
138
+ ]
139
+ }
140
+ },
141
+ opacity: {
142
+ "30": {
143
+ $type: "opacity",
144
+ $value: "30%"
145
+ }
146
+ }
147
+ };
148
+
149
+ // src/tokens/template/design-tokens/primitives/modes/size/global.json with { type: 'json' }
150
+ var global_default = {
151
+ _size: {
152
+ "0": {
153
+ $type: "dimension",
154
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *0)"
155
+ },
156
+ "1": {
157
+ $type: "dimension",
158
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *1)"
159
+ },
160
+ "2": {
161
+ $type: "dimension",
162
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *2)"
163
+ },
164
+ "3": {
165
+ $type: "dimension",
166
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *3)"
167
+ },
168
+ "4": {
169
+ $type: "dimension",
170
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *4)"
171
+ },
172
+ "5": {
173
+ $type: "dimension",
174
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *5)"
175
+ },
176
+ "6": {
177
+ $type: "dimension",
178
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *6)"
179
+ },
180
+ "7": {
181
+ $type: "dimension",
182
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *7)"
183
+ },
184
+ "8": {
185
+ $type: "dimension",
186
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *8)"
187
+ },
188
+ "9": {
189
+ $type: "dimension",
190
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *9)"
191
+ },
192
+ "10": {
193
+ $type: "dimension",
194
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *10)"
195
+ },
196
+ "11": {
197
+ $type: "dimension",
198
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *11)"
199
+ },
200
+ "12": {
201
+ $type: "dimension",
202
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *12)"
203
+ },
204
+ "13": {
205
+ $type: "dimension",
206
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *13)"
207
+ },
208
+ "14": {
209
+ $type: "dimension",
210
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *14)"
211
+ },
212
+ "15": {
213
+ $type: "dimension",
214
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *15)"
215
+ },
216
+ "18": {
217
+ $type: "dimension",
218
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *18)"
219
+ },
220
+ "22": {
221
+ $type: "dimension",
222
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *22)"
223
+ },
224
+ "26": {
225
+ $type: "dimension",
226
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *26)"
227
+ },
228
+ "30": {
229
+ $type: "dimension",
230
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *30)"
231
+ },
232
+ "mode-font-size": {
233
+ $type: "dimension",
234
+ $value: "{size._mode-font-size}"
235
+ },
236
+ base: {
237
+ $type: "dimension",
238
+ $value: "{size._base}"
239
+ },
240
+ step: {
241
+ $type: "dimension",
242
+ $value: "{size._step}"
243
+ }
244
+ }
245
+ };
246
+
247
+ // src/tokens/template/design-tokens/primitives/modes/size/large.json with { type: 'json' }
248
+ var large_default = {
249
+ size: {
250
+ "_mode-font-size": {
251
+ $type: "dimension",
252
+ $value: "21"
253
+ },
254
+ _base: {
255
+ $type: "dimension",
256
+ $value: "18"
257
+ },
258
+ _step: {
259
+ $type: "dimension",
260
+ $value: "4"
261
+ }
262
+ }
263
+ };
264
+
265
+ // src/tokens/template/design-tokens/primitives/modes/size/medium.json with { type: 'json' }
266
+ var medium_default = {
267
+ size: {
268
+ "_mode-font-size": {
269
+ $type: "dimension",
270
+ $value: "18"
271
+ },
272
+ _base: {
273
+ $type: "dimension",
274
+ $value: "18"
275
+ },
276
+ _step: {
277
+ $type: "dimension",
278
+ $value: "4"
279
+ }
280
+ }
281
+ };
282
+
283
+ // src/tokens/template/design-tokens/primitives/modes/size/small.json with { type: 'json' }
284
+ var small_default = {
285
+ size: {
286
+ "_mode-font-size": {
287
+ $type: "dimension",
288
+ $value: "16"
289
+ },
290
+ _base: {
291
+ $type: "dimension",
292
+ $value: "18"
293
+ },
294
+ _step: {
295
+ $type: "dimension",
296
+ $value: "4"
297
+ }
298
+ }
299
+ };
300
+
301
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/large.json with { type: 'json' }
302
+ var large_default2 = {
303
+ "line-height": {
304
+ sm: {
305
+ $type: "lineHeights",
306
+ $value: "130%"
307
+ },
308
+ md: {
309
+ $type: "lineHeights",
310
+ $value: "150%"
311
+ },
312
+ lg: {
313
+ $type: "lineHeights",
314
+ $value: "170%"
315
+ }
316
+ },
317
+ "font-size": {
318
+ "1": {
319
+ $type: "fontSizes",
320
+ $value: "13"
321
+ },
322
+ "2": {
323
+ $type: "fontSizes",
324
+ $value: "16"
325
+ },
326
+ "3": {
327
+ $type: "fontSizes",
328
+ $value: "18"
329
+ },
330
+ "4": {
331
+ $type: "fontSizes",
332
+ $value: "21"
333
+ },
334
+ "5": {
335
+ $type: "fontSizes",
336
+ $value: "24"
337
+ },
338
+ "6": {
339
+ $type: "fontSizes",
340
+ $value: "30"
341
+ },
342
+ "7": {
343
+ $type: "fontSizes",
344
+ $value: "36"
345
+ },
346
+ "8": {
347
+ $type: "fontSizes",
348
+ $value: "48"
349
+ },
350
+ "9": {
351
+ $type: "fontSizes",
352
+ $value: "60"
353
+ },
354
+ "10": {
355
+ $type: "fontSizes",
356
+ $value: "72"
357
+ }
358
+ },
359
+ "letter-spacing": {
360
+ "1": {
361
+ $type: "letterSpacing",
362
+ $value: "-1%"
363
+ },
364
+ "2": {
365
+ $type: "letterSpacing",
366
+ $value: "-0.5%"
367
+ },
368
+ "3": {
369
+ $type: "letterSpacing",
370
+ $value: "-0.25%"
371
+ },
372
+ "4": {
373
+ $type: "letterSpacing",
374
+ $value: "-0.15%"
375
+ },
376
+ "5": {
377
+ $type: "letterSpacing",
378
+ $value: "0%"
379
+ },
380
+ "6": {
381
+ $type: "letterSpacing",
382
+ $value: "0.15%"
383
+ },
384
+ "7": {
385
+ $type: "letterSpacing",
386
+ $value: "0.25%"
387
+ },
388
+ "8": {
389
+ $type: "letterSpacing",
390
+ $value: "0.5%"
391
+ },
392
+ "9": {
393
+ $type: "letterSpacing",
394
+ $value: "1.5%"
395
+ }
396
+ }
397
+ };
398
+
399
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json with { type: 'json' }
400
+ var medium_default2 = {
401
+ "line-height": {
402
+ sm: {
403
+ $type: "lineHeights",
404
+ $value: "130%"
405
+ },
406
+ md: {
407
+ $type: "lineHeights",
408
+ $value: "150%"
409
+ },
410
+ lg: {
411
+ $type: "lineHeights",
412
+ $value: "170%"
413
+ }
414
+ },
415
+ "font-size": {
416
+ "1": {
417
+ $type: "fontSizes",
418
+ $value: "12"
419
+ },
420
+ "2": {
421
+ $type: "fontSizes",
422
+ $value: "14"
423
+ },
424
+ "3": {
425
+ $type: "fontSizes",
426
+ $value: "16"
427
+ },
428
+ "4": {
429
+ $type: "fontSizes",
430
+ $value: "18"
431
+ },
432
+ "5": {
433
+ $type: "fontSizes",
434
+ $value: "21"
435
+ },
436
+ "6": {
437
+ $type: "fontSizes",
438
+ $value: "24"
439
+ },
440
+ "7": {
441
+ $type: "fontSizes",
442
+ $value: "30"
443
+ },
444
+ "8": {
445
+ $type: "fontSizes",
446
+ $value: "36"
447
+ },
448
+ "9": {
449
+ $type: "fontSizes",
450
+ $value: "48"
451
+ },
452
+ "10": {
453
+ $type: "fontSizes",
454
+ $value: "60"
455
+ }
456
+ },
457
+ "letter-spacing": {
458
+ "1": {
459
+ $type: "letterSpacing",
460
+ $value: "-1%"
461
+ },
462
+ "2": {
463
+ $type: "letterSpacing",
464
+ $value: "-0.5%"
465
+ },
466
+ "3": {
467
+ $type: "letterSpacing",
468
+ $value: "-0.25%"
469
+ },
470
+ "4": {
471
+ $type: "letterSpacing",
472
+ $value: "-0.15%"
473
+ },
474
+ "5": {
475
+ $type: "letterSpacing",
476
+ $value: "0%"
477
+ },
478
+ "6": {
479
+ $type: "letterSpacing",
480
+ $value: "0.15%"
481
+ },
482
+ "7": {
483
+ $type: "letterSpacing",
484
+ $value: "0.25%"
485
+ },
486
+ "8": {
487
+ $type: "letterSpacing",
488
+ $value: "0.5%"
489
+ },
490
+ "9": {
491
+ $type: "letterSpacing",
492
+ $value: "1.5%"
493
+ }
494
+ }
495
+ };
496
+
497
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/small.json with { type: 'json' }
498
+ var small_default2 = {
499
+ "line-height": {
500
+ sm: {
501
+ $type: "lineHeights",
502
+ $value: "130%"
503
+ },
504
+ md: {
505
+ $type: "lineHeights",
506
+ $value: "150%"
507
+ },
508
+ lg: {
509
+ $type: "lineHeights",
510
+ $value: "170%"
511
+ }
512
+ },
513
+ "font-size": {
514
+ "1": {
515
+ $type: "fontSizes",
516
+ $value: "11"
517
+ },
518
+ "2": {
519
+ $type: "fontSizes",
520
+ $value: "13"
521
+ },
522
+ "3": {
523
+ $type: "fontSizes",
524
+ $value: "14"
525
+ },
526
+ "4": {
527
+ $type: "fontSizes",
528
+ $value: "16"
529
+ },
530
+ "5": {
531
+ $type: "fontSizes",
532
+ $value: "18"
533
+ },
534
+ "6": {
535
+ $type: "fontSizes",
536
+ $value: "21"
537
+ },
538
+ "7": {
539
+ $type: "fontSizes",
540
+ $value: "24"
541
+ },
542
+ "8": {
543
+ $type: "fontSizes",
544
+ $value: "30"
545
+ },
546
+ "9": {
547
+ $type: "fontSizes",
548
+ $value: "36"
549
+ },
550
+ "10": {
551
+ $type: "fontSizes",
552
+ $value: "48"
553
+ }
554
+ },
555
+ "letter-spacing": {
556
+ "1": {
557
+ $type: "letterSpacing",
558
+ $value: "-1%"
559
+ },
560
+ "2": {
561
+ $type: "letterSpacing",
562
+ $value: "-0.5%"
563
+ },
564
+ "3": {
565
+ $type: "letterSpacing",
566
+ $value: "-0.25%"
567
+ },
568
+ "4": {
569
+ $type: "letterSpacing",
570
+ $value: "-0.15%"
571
+ },
572
+ "5": {
573
+ $type: "letterSpacing",
574
+ $value: "0%"
575
+ },
576
+ "6": {
577
+ $type: "letterSpacing",
578
+ $value: "0.15%"
579
+ },
580
+ "7": {
581
+ $type: "letterSpacing",
582
+ $value: "0.25%"
583
+ },
584
+ "8": {
585
+ $type: "letterSpacing",
586
+ $value: "0.5%"
587
+ },
588
+ "9": {
589
+ $type: "letterSpacing",
590
+ $value: "1.5%"
591
+ }
592
+ }
593
+ };
594
+
595
+ // src/tokens/template/design-tokens/semantic/style.json with { type: 'json' }
596
+ var style_default = {
597
+ typography: {
598
+ heading: {
599
+ "2xl": {
600
+ $type: "typography",
601
+ $value: {
602
+ fontFamily: "{font-family}",
603
+ fontWeight: "{font-weight.medium}",
604
+ lineHeight: "{line-height.sm}",
605
+ fontSize: "{font-size.10}",
606
+ letterSpacing: "{letter-spacing.1}"
607
+ }
608
+ },
609
+ xl: {
610
+ $type: "typography",
611
+ $value: {
612
+ fontFamily: "{font-family}",
613
+ fontWeight: "{font-weight.medium}",
614
+ lineHeight: "{line-height.sm}",
615
+ fontSize: "{font-size.9}",
616
+ letterSpacing: "{letter-spacing.1}"
617
+ }
618
+ },
619
+ lg: {
620
+ $type: "typography",
621
+ $value: {
622
+ fontFamily: "{font-family}",
623
+ fontWeight: "{font-weight.medium}",
624
+ lineHeight: "{line-height.sm}",
625
+ fontSize: "{font-size.8}",
626
+ letterSpacing: "{letter-spacing.2}"
627
+ }
628
+ },
629
+ md: {
630
+ $type: "typography",
631
+ $value: {
632
+ fontFamily: "{font-family}",
633
+ fontWeight: "{font-weight.medium}",
634
+ lineHeight: "{line-height.sm}",
635
+ fontSize: "{font-size.7}",
636
+ letterSpacing: "{letter-spacing.3}"
637
+ }
638
+ },
639
+ sm: {
640
+ $type: "typography",
641
+ $value: {
642
+ fontFamily: "{font-family}",
643
+ fontWeight: "{font-weight.medium}",
644
+ lineHeight: "{line-height.sm}",
645
+ fontSize: "{font-size.6}",
646
+ letterSpacing: "{letter-spacing.5}"
647
+ }
648
+ },
649
+ xs: {
650
+ $type: "typography",
651
+ $value: {
652
+ fontFamily: "{font-family}",
653
+ fontWeight: "{font-weight.medium}",
654
+ lineHeight: "{line-height.sm}",
655
+ fontSize: "{font-size.5}",
656
+ letterSpacing: "{letter-spacing.6}"
657
+ }
658
+ },
659
+ "2xs": {
660
+ $type: "typography",
661
+ $value: {
662
+ fontFamily: "{font-family}",
663
+ fontWeight: "{font-weight.medium}",
664
+ lineHeight: "{line-height.sm}",
665
+ fontSize: "{font-size.4}",
666
+ letterSpacing: "{letter-spacing.6}"
667
+ }
668
+ }
669
+ },
670
+ body: {
671
+ xl: {
672
+ $type: "typography",
673
+ $value: {
674
+ fontFamily: "{font-family}",
675
+ fontWeight: "{font-weight.regular}",
676
+ lineHeight: "{line-height.md}",
677
+ fontSize: "{font-size.6}",
678
+ letterSpacing: "{letter-spacing.8}"
679
+ }
680
+ },
681
+ lg: {
682
+ $type: "typography",
683
+ $value: {
684
+ fontFamily: "{font-family}",
685
+ fontWeight: "{font-weight.regular}",
686
+ lineHeight: "{line-height.md}",
687
+ fontSize: "{font-size.5}",
688
+ letterSpacing: "{letter-spacing.8}"
689
+ }
690
+ },
691
+ md: {
692
+ $type: "typography",
693
+ $value: {
694
+ fontFamily: "{font-family}",
695
+ fontWeight: "{font-weight.regular}",
696
+ lineHeight: "{line-height.md}",
697
+ fontSize: "{font-size.4}",
698
+ letterSpacing: "{letter-spacing.8}"
699
+ }
700
+ },
701
+ sm: {
702
+ $type: "typography",
703
+ $value: {
704
+ fontFamily: "{font-family}",
705
+ fontWeight: "{font-weight.regular}",
706
+ lineHeight: "{line-height.md}",
707
+ fontSize: "{font-size.3}",
708
+ letterSpacing: "{letter-spacing.7}"
709
+ }
710
+ },
711
+ xs: {
712
+ $type: "typography",
713
+ $value: {
714
+ fontFamily: "{font-family}",
715
+ fontWeight: "{font-weight.regular}",
716
+ lineHeight: "{line-height.md}",
717
+ fontSize: "{font-size.2}",
718
+ letterSpacing: "{letter-spacing.6}"
719
+ }
720
+ },
721
+ short: {
722
+ xl: {
723
+ $type: "typography",
724
+ $value: {
725
+ fontFamily: "{font-family}",
726
+ fontWeight: "{font-weight.regular}",
727
+ lineHeight: "{line-height.sm}",
728
+ fontSize: "{font-size.6}",
729
+ letterSpacing: "{letter-spacing.8}"
730
+ }
731
+ },
732
+ lg: {
733
+ $type: "typography",
734
+ $value: {
735
+ fontFamily: "{font-family}",
736
+ fontWeight: "{font-weight.regular}",
737
+ lineHeight: "{line-height.sm}",
738
+ fontSize: "{font-size.5}",
739
+ letterSpacing: "{letter-spacing.8}"
740
+ }
741
+ },
742
+ md: {
743
+ $type: "typography",
744
+ $value: {
745
+ fontFamily: "{font-family}",
746
+ fontWeight: "{font-weight.regular}",
747
+ lineHeight: "{line-height.sm}",
748
+ fontSize: "{font-size.4}",
749
+ letterSpacing: "{letter-spacing.8}"
750
+ }
751
+ },
752
+ sm: {
753
+ $type: "typography",
754
+ $value: {
755
+ fontFamily: "{font-family}",
756
+ fontWeight: "{font-weight.regular}",
757
+ lineHeight: "{line-height.sm}",
758
+ fontSize: "{font-size.3}",
759
+ letterSpacing: "{letter-spacing.7}"
760
+ }
761
+ },
762
+ xs: {
763
+ $type: "typography",
764
+ $value: {
765
+ fontFamily: "{font-family}",
766
+ fontWeight: "{font-weight.regular}",
767
+ lineHeight: "{line-height.sm}",
768
+ fontSize: "{font-size.2}",
769
+ letterSpacing: "{letter-spacing.6}"
770
+ }
771
+ }
772
+ },
773
+ long: {
774
+ xl: {
775
+ $type: "typography",
776
+ $value: {
777
+ fontFamily: "{font-family}",
778
+ fontWeight: "{font-weight.regular}",
779
+ lineHeight: "{line-height.lg}",
780
+ fontSize: "{font-size.6}",
781
+ letterSpacing: "{letter-spacing.8}"
782
+ }
783
+ },
784
+ lg: {
785
+ $type: "typography",
786
+ $value: {
787
+ fontFamily: "{font-family}",
788
+ fontWeight: "{font-weight.regular}",
789
+ lineHeight: "{line-height.lg}",
790
+ fontSize: "{font-size.5}",
791
+ letterSpacing: "{letter-spacing.8}"
792
+ }
793
+ },
794
+ md: {
795
+ $type: "typography",
796
+ $value: {
797
+ fontFamily: "{font-family}",
798
+ fontWeight: "{font-weight.regular}",
799
+ lineHeight: "{line-height.lg}",
800
+ fontSize: "{font-size.4}",
801
+ letterSpacing: "{letter-spacing.8}"
802
+ }
803
+ },
804
+ sm: {
805
+ $type: "typography",
806
+ $value: {
807
+ fontFamily: "{font-family}",
808
+ fontWeight: "{font-weight.regular}",
809
+ lineHeight: "{line-height.lg}",
810
+ fontSize: "{font-size.3}",
811
+ letterSpacing: "{letter-spacing.7}"
812
+ }
813
+ },
814
+ xs: {
815
+ $type: "typography",
816
+ $value: {
817
+ fontFamily: "{font-family}",
818
+ fontWeight: "{font-weight.regular}",
819
+ lineHeight: "{line-height.lg}",
820
+ fontSize: "{font-size.2}",
821
+ letterSpacing: "{letter-spacing.6}"
822
+ }
823
+ }
824
+ }
825
+ }
826
+ },
827
+ opacity: {
828
+ disabled: {
829
+ $type: "opacity",
830
+ $value: "{opacity.30}"
831
+ }
832
+ },
833
+ "border-width": {
834
+ default: {
835
+ $type: "borderWidth",
836
+ $value: "{border-width.1}"
837
+ },
838
+ focus: {
839
+ $type: "borderWidth",
840
+ $value: "{border-width.3}"
841
+ }
842
+ },
843
+ shadow: {
844
+ xs: {
845
+ $type: "boxShadow",
846
+ $value: "{shadow.100}"
847
+ },
848
+ sm: {
849
+ $type: "boxShadow",
850
+ $value: "{shadow.200}"
851
+ },
852
+ md: {
853
+ $type: "boxShadow",
854
+ $value: "{shadow.300}"
855
+ },
856
+ lg: {
857
+ $type: "boxShadow",
858
+ $value: "{shadow.400}"
859
+ },
860
+ xl: {
861
+ $type: "boxShadow",
862
+ $value: "{shadow.500}"
863
+ }
864
+ },
865
+ "border-radius": {
866
+ sm: {
867
+ $type: "dimension",
868
+ $value: "{border-radius.1}"
869
+ },
870
+ md: {
871
+ $type: "dimension",
872
+ $value: "{border-radius.2}"
873
+ },
874
+ lg: {
875
+ $type: "dimension",
876
+ $value: "{border-radius.3}"
877
+ },
878
+ xl: {
879
+ $type: "dimension",
880
+ $value: "{border-radius.4}"
881
+ },
882
+ default: {
883
+ $type: "dimension",
884
+ $value: "{border-radius.5}"
885
+ },
886
+ full: {
887
+ $type: "dimension",
888
+ $value: "{border-radius.6}"
889
+ }
890
+ },
891
+ size: {
892
+ "0": {
893
+ $type: "dimension",
894
+ $value: "{_size.0}"
895
+ },
896
+ "1": {
897
+ $type: "dimension",
898
+ $value: "{_size.1}"
899
+ },
900
+ "2": {
901
+ $type: "dimension",
902
+ $value: "{_size.2}"
903
+ },
904
+ "3": {
905
+ $type: "dimension",
906
+ $value: "{_size.3}"
907
+ },
908
+ "4": {
909
+ $type: "dimension",
910
+ $value: "{_size.4}"
911
+ },
912
+ "5": {
913
+ $type: "dimension",
914
+ $value: "{_size.5}"
915
+ },
916
+ "6": {
917
+ $type: "dimension",
918
+ $value: "{_size.6}"
919
+ },
920
+ "7": {
921
+ $type: "dimension",
922
+ $value: "{_size.7}"
923
+ },
924
+ "8": {
925
+ $type: "dimension",
926
+ $value: "{_size.8}"
927
+ },
928
+ "9": {
929
+ $type: "dimension",
930
+ $value: "{_size.9}"
931
+ },
932
+ "10": {
933
+ $type: "dimension",
934
+ $value: "{_size.10}"
935
+ },
936
+ "11": {
937
+ $type: "dimension",
938
+ $value: "{_size.11}"
939
+ },
940
+ "12": {
941
+ $type: "dimension",
942
+ $value: "{_size.12}"
943
+ },
944
+ "13": {
945
+ $type: "dimension",
946
+ $value: "{_size.13}"
947
+ },
948
+ "14": {
949
+ $type: "dimension",
950
+ $value: "{_size.14}"
951
+ },
952
+ "15": {
953
+ $type: "dimension",
954
+ $value: "{_size.15}"
955
+ },
956
+ "18": {
957
+ $type: "dimension",
958
+ $value: "{_size.18}"
959
+ },
960
+ "22": {
961
+ $type: "dimension",
962
+ $value: "{_size.22}"
963
+ },
964
+ "26": {
965
+ $type: "dimension",
966
+ $value: "{_size.26}"
967
+ },
968
+ "30": {
969
+ $type: "dimension",
970
+ $value: "{_size.30}"
971
+ }
972
+ }
973
+ };
974
+
975
+ // src/tokens/create/defaults.ts
976
+ var defaultTokens = {
977
+ "primitives/globals": globals_default,
978
+ "primitives/modes/size/small": small_default,
979
+ "primitives/modes/size/medium": medium_default,
980
+ "primitives/modes/size/large": large_default,
981
+ "primitives/modes/size/global": global_default,
982
+ "primitives/modes/typography/size/small": small_default2,
983
+ "primitives/modes/typography/size/medium": medium_default2,
984
+ "primitives/modes/typography/size/large": large_default2,
985
+ "semantic/style": style_default
986
+ };
987
+ var getDefaultTokens = (tokenSets) => Object.entries(R.pick(tokenSets, defaultTokens));
988
+ var getDefaultToken = (tokenPath) => {
989
+ return [tokenPath, defaultTokens[tokenPath]];
990
+ };
991
+
992
+ // src/tokens/create/generators/color.ts
993
+ import * as R4 from "ramda";
994
+
995
+ // src/colors/utils.ts
996
+ import chroma from "chroma-js";
997
+ import { Hsluv } from "hsluv";
998
+ var getLuminanceFromLightness = (lightness) => {
999
+ const conv = new Hsluv();
1000
+ conv.hsluv_l = lightness;
1001
+ conv.hsluvToHex();
1002
+ return chroma(conv.hex).luminance();
1003
+ };
1004
+ var getLightnessFromHex = (hex) => {
1005
+ const conv = new Hsluv();
1006
+ conv.hex = hex;
1007
+ conv.hexToHsluv();
1008
+ return conv.hsluv_l;
1009
+ };
1010
+
1011
+ // src/colors/theme.ts
1012
+ import chroma2 from "chroma-js";
1013
+ import * as R3 from "ramda";
1014
+
1015
+ // src/colors/colorMetadata.ts
1016
+ import * as R2 from "ramda";
1017
+ var baseColors = {
1018
+ blue: "#0A71C0",
1019
+ green: "#068718",
1020
+ orange: "#EA9B1B",
1021
+ purple: "#663299",
1022
+ red: "#C01B1B"
1023
+ };
1024
+ var colorMetadata = {
1025
+ "background-default": {
1026
+ number: 1,
1027
+ name: "background-default",
1028
+ group: "background",
1029
+ displayName: "Background Default",
1030
+ description: {
1031
+ long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
1032
+ short: "Standard bakgrunnsfarge."
1033
+ },
1034
+ luminance: {
1035
+ light: 1,
1036
+ dark: 9e-3,
1037
+ contrast: 1e-3
1038
+ }
1039
+ },
1040
+ "background-tinted": {
1041
+ number: 2,
1042
+ name: "background-tinted",
1043
+ group: "background",
1044
+ displayName: "Background Tinted",
1045
+ description: {
1046
+ long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
1047
+ short: "Bakgrunn med et hint av farge i seg."
1048
+ },
1049
+ luminance: {
1050
+ light: 0.9,
1051
+ dark: 0.014,
1052
+ contrast: 65e-4
1053
+ }
1054
+ },
1055
+ "surface-default": {
1056
+ number: 3,
1057
+ name: "surface-default",
1058
+ group: "surface",
1059
+ displayName: "Surface Default",
1060
+ description: {
1061
+ long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
1062
+ short: "Standardfarge for overflater / komponenter."
1063
+ },
1064
+ luminance: {
1065
+ light: 1,
1066
+ dark: 0.021,
1067
+ contrast: 0.015
1068
+ }
1069
+ },
1070
+ "surface-tinted": {
1071
+ number: 4,
1072
+ name: "surface-tinted",
1073
+ group: "surface",
1074
+ displayName: "Surface Tinted",
1075
+ description: {
1076
+ long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
1077
+ short: "Overflater / komponenter med et hint av farge i seg."
1078
+ },
1079
+ luminance: {
1080
+ light: 0.81,
1081
+ dark: 0.027,
1082
+ contrast: 0.015
1083
+ }
1084
+ },
1085
+ "surface-hover": {
1086
+ number: 5,
1087
+ name: "surface-hover",
1088
+ group: "surface",
1089
+ displayName: "Surface Hover",
1090
+ description: {
1091
+ long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
1092
+ short: "Hover-farge til overflater / komponenter."
1093
+ },
1094
+ luminance: {
1095
+ light: 0.7,
1096
+ dark: 0.036,
1097
+ contrast: 0.028
1098
+ }
1099
+ },
1100
+ "surface-active": {
1101
+ number: 6,
1102
+ name: "surface-active",
1103
+ group: "surface",
1104
+ displayName: "Surface Active",
1105
+ description: {
1106
+ long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
1107
+ short: "Active-farge til overflater / komponenter."
1108
+ },
1109
+ luminance: {
1110
+ light: 0.59,
1111
+ dark: 0.056,
1112
+ contrast: 0.045
1113
+ }
1114
+ },
1115
+ "border-subtle": {
1116
+ number: 7,
1117
+ name: "border-subtle",
1118
+ group: "border",
1119
+ displayName: "Border Subtle",
1120
+ description: {
1121
+ long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
1122
+ short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
1123
+ },
1124
+ luminance: {
1125
+ light: 0.5,
1126
+ dark: 0.08,
1127
+ contrast: 0.26
1128
+ }
1129
+ },
1130
+ "border-default": {
1131
+ number: 8,
1132
+ name: "border-default",
1133
+ group: "border",
1134
+ displayName: "Border Default",
1135
+ description: {
1136
+ long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
1137
+ short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
1138
+ },
1139
+ luminance: {
1140
+ light: 0.19,
1141
+ dark: 0.22,
1142
+ contrast: 0.4
1143
+ }
1144
+ },
1145
+ "border-strong": {
1146
+ number: 9,
1147
+ name: "border-strong",
1148
+ group: "border",
1149
+ displayName: "Border Strong",
1150
+ description: {
1151
+ long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
1152
+ short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
1153
+ },
1154
+ luminance: {
1155
+ light: 0.11,
1156
+ dark: 0.39,
1157
+ contrast: 0.6
1158
+ }
1159
+ },
1160
+ "text-subtle": {
1161
+ number: 10,
1162
+ name: "text-subtle",
1163
+ group: "text",
1164
+ displayName: "Text Subtle",
1165
+ description: {
1166
+ long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
1167
+ short: "Tekst- og ikonfarge med lavere kontrast."
1168
+ },
1169
+ luminance: {
1170
+ light: 0.11,
1171
+ dark: 0.39,
1172
+ contrast: 0.57
1173
+ }
1174
+ },
1175
+ "text-default": {
1176
+ number: 11,
1177
+ name: "text-default",
1178
+ group: "text",
1179
+ displayName: "Text Default",
1180
+ description: {
1181
+ long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
1182
+ short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
1183
+ },
1184
+ luminance: {
1185
+ light: 0.0245,
1186
+ dark: 0.84,
1187
+ contrast: 0.86
1188
+ }
1189
+ },
1190
+ "base-default": {
1191
+ number: 12,
1192
+ name: "base-default",
1193
+ group: "base",
1194
+ displayName: "Base Default",
1195
+ description: {
1196
+ long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
1197
+ short: "Standardfarge for solide bakgrunner."
1198
+ },
1199
+ luminance: {
1200
+ light: 1,
1201
+ dark: 1,
1202
+ contrast: 1
1203
+ }
1204
+ },
1205
+ "base-hover": {
1206
+ number: 13,
1207
+ name: "base-hover",
1208
+ group: "base",
1209
+ displayName: "Base Hover",
1210
+ description: {
1211
+ long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
1212
+ short: "Hover-farge for solide bakgrunner."
1213
+ },
1214
+ luminance: {
1215
+ light: 1,
1216
+ dark: 1,
1217
+ contrast: 1
1218
+ }
1219
+ },
1220
+ "base-active": {
1221
+ number: 14,
1222
+ name: "base-active",
1223
+ group: "base",
1224
+ displayName: "Base Active",
1225
+ description: {
1226
+ long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
1227
+ short: "Active-farge for solide bakgrunner."
1228
+ },
1229
+ luminance: {
1230
+ light: 1,
1231
+ dark: 1,
1232
+ contrast: 1
1233
+ }
1234
+ },
1235
+ "base-contrast-subtle": {
1236
+ number: 15,
1237
+ name: "base-contrast-subtle",
1238
+ group: "base",
1239
+ displayName: "Contrast Subtle",
1240
+ description: {
1241
+ long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
1242
+ short: "Farge med god kontrast mot Base-default."
1243
+ },
1244
+ luminance: {
1245
+ light: 1,
1246
+ dark: 1,
1247
+ contrast: 1
1248
+ }
1249
+ },
1250
+ "base-contrast-default": {
1251
+ number: 16,
1252
+ name: "base-contrast-default",
1253
+ group: "base",
1254
+ displayName: "Contrast Default",
1255
+ description: {
1256
+ long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
1257
+ short: "Farge med god kontrast mot Base-default og Base-hover."
1258
+ },
1259
+ luminance: {
1260
+ light: 1,
1261
+ dark: 1,
1262
+ contrast: 1
1263
+ }
1264
+ }
1265
+ };
1266
+ var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
1267
+
1268
+ // src/colors/theme.ts
1269
+ var generateColorScale = (color, colorScheme2) => {
1270
+ let interpolationColor = color;
1271
+ if (colorScheme2 === "dark") {
1272
+ const [L, C, H] = chroma2(color).oklch();
1273
+ const chromaModifier = 0.7;
1274
+ interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
1275
+ }
1276
+ const colors = R3.mapObjIndexed((colorData) => {
1277
+ const luminance = colorData.luminance[colorScheme2];
1278
+ return {
1279
+ ...colorData,
1280
+ hex: chroma2(interpolationColor).luminance(luminance).hex()
1281
+ };
1282
+ }, colorMetadata);
1283
+ const baseColors2 = generateBaseColors(color, colorScheme2);
1284
+ colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
1285
+ colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
1286
+ colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
1287
+ colors["base-contrast-subtle"] = {
1288
+ ...colors["base-contrast-subtle"],
1289
+ hex: generateColorContrast(baseColors2.default, "subtle")
1290
+ };
1291
+ colors["base-contrast-default"] = {
1292
+ ...colors["base-contrast-default"],
1293
+ hex: generateColorContrast(baseColors2.default, "default")
1294
+ };
1295
+ return Object.values(colors);
1296
+ };
1297
+ var generateBaseColors = (color, colorScheme2) => {
1298
+ let colorLightness = getLightnessFromHex(color);
1299
+ if (colorScheme2 !== "light") {
1300
+ colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
1301
+ }
1302
+ const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
1303
+ const calculateLightness = (base, mod) => base - mod;
1304
+ return {
1305
+ default: colorScheme2 === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
1306
+ hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
1307
+ active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
1308
+ };
1309
+ };
1310
+ var generateColorContrast = (color, type) => {
1311
+ if (type === "default") {
1312
+ return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
1313
+ }
1314
+ if (type === "subtle") {
1315
+ const contrastWhite = chroma2.contrast(color, "#ffffff");
1316
+ const contrastBlack = chroma2.contrast(color, "#000000");
1317
+ const lightness = getLightnessFromHex(color);
1318
+ const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
1319
+ const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
1320
+ return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
1321
+ }
1322
+ return color;
1323
+ };
1324
+
1325
+ // src/tokens/create/generators/color.ts
1326
+ var generateColor = (colorArray) => {
1327
+ const obj = {};
1328
+ const $type = "color";
1329
+ for (const index in colorArray) {
1330
+ obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
1331
+ }
1332
+ return obj;
1333
+ };
1334
+ var generateColorScheme = (themeName, colorScheme2, colors) => {
1335
+ const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.main);
1336
+ const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors.support);
1337
+ const neutral = generateColor(generateColorScale(colors.neutral, colorScheme2));
1338
+ return {
1339
+ [themeName]: {
1340
+ ...main,
1341
+ ...support,
1342
+ neutral
1343
+ }
1344
+ };
1345
+ };
1346
+ var generateColorGlobal = (colorScheme2) => {
1347
+ const blueScale = generateColorScale(baseColors.blue, colorScheme2);
1348
+ const greenScale = generateColorScale(baseColors.green, colorScheme2);
1349
+ const orangeScale = generateColorScale(baseColors.orange, colorScheme2);
1350
+ const purpleScale = generateColorScale(baseColors.purple, colorScheme2);
1351
+ const redScale = generateColorScale(baseColors.red, colorScheme2);
1352
+ return {
1353
+ global: {
1354
+ blue: generateColor(blueScale),
1355
+ green: generateColor(greenScale),
1356
+ orange: generateColor(orangeScale),
1357
+ purple: generateColor(purpleScale),
1358
+ red: generateColor(redScale)
1359
+ }
1360
+ };
1361
+ };
1362
+
1363
+ // src/tokens/create/generators/semantic.ts
1364
+ import * as R5 from "ramda";
1365
+
1366
+ // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
1367
+ var color_base_template_default = {
1368
+ color: {
1369
+ success: {
1370
+ "background-default": {
1371
+ $type: "color",
1372
+ $value: "{global.green.1}"
1373
+ },
1374
+ "background-tinted": {
1375
+ $type: "color",
1376
+ $value: "{global.green.2}"
1377
+ },
1378
+ "surface-default": {
1379
+ $type: "color",
1380
+ $value: "{global.green.3}"
1381
+ },
1382
+ "surface-tinted": {
1383
+ $type: "color",
1384
+ $value: "{global.green.4}"
1385
+ },
1386
+ "surface-hover": {
1387
+ $type: "color",
1388
+ $value: "{global.green.5}"
1389
+ },
1390
+ "surface-active": {
1391
+ $type: "color",
1392
+ $value: "{global.green.6}"
1393
+ },
1394
+ "border-subtle": {
1395
+ $type: "color",
1396
+ $value: "{global.green.7}"
1397
+ },
1398
+ "border-default": {
1399
+ $type: "color",
1400
+ $value: "{global.green.8}"
1401
+ },
1402
+ "border-strong": {
1403
+ $type: "color",
1404
+ $value: "{global.green.9}"
1405
+ },
1406
+ "text-subtle": {
1407
+ $type: "color",
1408
+ $value: "{global.green.10}"
1409
+ },
1410
+ "text-default": {
1411
+ $type: "color",
1412
+ $value: "{global.green.11}"
1413
+ },
1414
+ "base-default": {
1415
+ $type: "color",
1416
+ $value: "{global.green.12}"
1417
+ },
1418
+ "base-hover": {
1419
+ $type: "color",
1420
+ $value: "{global.green.13}"
1421
+ },
1422
+ "base-active": {
1423
+ $type: "color",
1424
+ $value: "{global.green.14}"
1425
+ },
1426
+ "base-contrast-subtle": {
1427
+ $type: "color",
1428
+ $value: "{global.green.15}"
1429
+ },
1430
+ "base-contrast-default": {
1431
+ $type: "color",
1432
+ $value: "{global.green.16}"
1433
+ }
1434
+ },
1435
+ danger: {
1436
+ "background-default": {
1437
+ $type: "color",
1438
+ $value: "{global.red.1}"
1439
+ },
1440
+ "background-tinted": {
1441
+ $type: "color",
1442
+ $value: "{global.red.2}"
1443
+ },
1444
+ "surface-default": {
1445
+ $type: "color",
1446
+ $value: "{global.red.3}"
1447
+ },
1448
+ "surface-tinted": {
1449
+ $type: "color",
1450
+ $value: "{global.red.4}"
1451
+ },
1452
+ "surface-hover": {
1453
+ $type: "color",
1454
+ $value: "{global.red.5}"
1455
+ },
1456
+ "surface-active": {
1457
+ $type: "color",
1458
+ $value: "{global.red.6}"
1459
+ },
1460
+ "border-subtle": {
1461
+ $type: "color",
1462
+ $value: "{global.red.7}"
1463
+ },
1464
+ "border-default": {
1465
+ $type: "color",
1466
+ $value: "{global.red.8}"
1467
+ },
1468
+ "border-strong": {
1469
+ $type: "color",
1470
+ $value: "{global.red.9}"
1471
+ },
1472
+ "text-subtle": {
1473
+ $type: "color",
1474
+ $value: "{global.red.10}"
1475
+ },
1476
+ "text-default": {
1477
+ $type: "color",
1478
+ $value: "{global.red.11}"
1479
+ },
1480
+ "base-default": {
1481
+ $type: "color",
1482
+ $value: "{global.red.12}"
1483
+ },
1484
+ "base-hover": {
1485
+ $type: "color",
1486
+ $value: "{global.red.13}"
1487
+ },
1488
+ "base-active": {
1489
+ $type: "color",
1490
+ $value: "{global.red.14}"
1491
+ },
1492
+ "base-contrast-subtle": {
1493
+ $type: "color",
1494
+ $value: "{global.red.15}"
1495
+ },
1496
+ "base-contrast-default": {
1497
+ $type: "color",
1498
+ $value: "{global.red.16}"
1499
+ }
1500
+ },
1501
+ info: {
1502
+ "background-default": {
1503
+ $type: "color",
1504
+ $value: "{global.blue.1}"
1505
+ },
1506
+ "background-tinted": {
1507
+ $type: "color",
1508
+ $value: "{global.blue.2}"
1509
+ },
1510
+ "surface-default": {
1511
+ $type: "color",
1512
+ $value: "{global.blue.3}"
1513
+ },
1514
+ "surface-tinted": {
1515
+ $type: "color",
1516
+ $value: "{global.blue.4}"
1517
+ },
1518
+ "surface-hover": {
1519
+ $type: "color",
1520
+ $value: "{global.blue.5}"
1521
+ },
1522
+ "surface-active": {
1523
+ $type: "color",
1524
+ $value: "{global.blue.6}"
1525
+ },
1526
+ "border-subtle": {
1527
+ $type: "color",
1528
+ $value: "{global.blue.7}"
1529
+ },
1530
+ "border-default": {
1531
+ $type: "color",
1532
+ $value: "{global.blue.8}"
1533
+ },
1534
+ "border-strong": {
1535
+ $type: "color",
1536
+ $value: "{global.blue.9}"
1537
+ },
1538
+ "text-subtle": {
1539
+ $type: "color",
1540
+ $value: "{global.blue.10}"
1541
+ },
1542
+ "text-default": {
1543
+ $type: "color",
1544
+ $value: "{global.blue.11}"
1545
+ },
1546
+ "base-default": {
1547
+ $type: "color",
1548
+ $value: "{global.blue.12}"
1549
+ },
1550
+ "base-hover": {
1551
+ $type: "color",
1552
+ $value: "{global.blue.13}"
1553
+ },
1554
+ "base-active": {
1555
+ $type: "color",
1556
+ $value: "{global.blue.14}"
1557
+ },
1558
+ "base-contrast-subtle": {
1559
+ $type: "color",
1560
+ $value: "{global.blue.15}"
1561
+ },
1562
+ "base-contrast-default": {
1563
+ $type: "color",
1564
+ $value: "{global.blue.16}"
1565
+ }
1566
+ },
1567
+ warning: {
1568
+ "background-default": {
1569
+ $type: "color",
1570
+ $value: "{global.orange.1}"
1571
+ },
1572
+ "background-tinted": {
1573
+ $type: "color",
1574
+ $value: "{global.orange.2}"
1575
+ },
1576
+ "surface-default": {
1577
+ $type: "color",
1578
+ $value: "{global.orange.3}"
1579
+ },
1580
+ "surface-tinted": {
1581
+ $type: "color",
1582
+ $value: "{global.orange.4}"
1583
+ },
1584
+ "surface-hover": {
1585
+ $type: "color",
1586
+ $value: "{global.orange.5}"
1587
+ },
1588
+ "surface-active": {
1589
+ $type: "color",
1590
+ $value: "{global.orange.6}"
1591
+ },
1592
+ "border-subtle": {
1593
+ $type: "color",
1594
+ $value: "{global.orange.7}"
1595
+ },
1596
+ "border-default": {
1597
+ $type: "color",
1598
+ $value: "{global.orange.8}"
1599
+ },
1600
+ "border-strong": {
1601
+ $type: "color",
1602
+ $value: "{global.orange.9}"
1603
+ },
1604
+ "text-subtle": {
1605
+ $type: "color",
1606
+ $value: "{global.orange.10}"
1607
+ },
1608
+ "text-default": {
1609
+ $type: "color",
1610
+ $value: "{global.orange.11}"
1611
+ },
1612
+ "base-default": {
1613
+ $type: "color",
1614
+ $value: "{global.orange.12}"
1615
+ },
1616
+ "base-hover": {
1617
+ $type: "color",
1618
+ $value: "{global.orange.13}"
1619
+ },
1620
+ "base-active": {
1621
+ $type: "color",
1622
+ $value: "{global.orange.14}"
1623
+ },
1624
+ "base-contrast-subtle": {
1625
+ $type: "color",
1626
+ $value: "{global.orange.15}"
1627
+ },
1628
+ "base-contrast-default": {
1629
+ $type: "color",
1630
+ $value: "{global.orange.16}"
1631
+ }
1632
+ },
1633
+ focus: {
1634
+ inner: {
1635
+ $type: "color",
1636
+ $value: "{color.neutral.background-default}"
1637
+ },
1638
+ outer: {
1639
+ $type: "color",
1640
+ $value: "{color.neutral.text-default}"
1641
+ }
1642
+ }
1643
+ },
1644
+ link: {
1645
+ color: {
1646
+ visited: {
1647
+ $type: "color",
1648
+ $value: "{global.purple.12}"
1649
+ }
1650
+ }
1651
+ }
1652
+ };
1653
+
1654
+ // src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
1655
+ var color_template_default = {
1656
+ "background-default": {
1657
+ $type: "color",
1658
+ $value: "{color.<color>.1}"
1659
+ },
1660
+ "background-tinted": {
1661
+ $type: "color",
1662
+ $value: "{color.<color>.2}"
1663
+ },
1664
+ "surface-default": {
1665
+ $type: "color",
1666
+ $value: "{color.<color>.3}"
1667
+ },
1668
+ "surface-tinted": {
1669
+ $type: "color",
1670
+ $value: "{color.<color>.4}"
1671
+ },
1672
+ "surface-hover": {
1673
+ $type: "color",
1674
+ $value: "{color.<color>.5}"
1675
+ },
1676
+ "surface-active": {
1677
+ $type: "color",
1678
+ $value: "{color.<color>.6}"
1679
+ },
1680
+ "border-subtle": {
1681
+ $type: "color",
1682
+ $value: "{color.<color>.7}"
1683
+ },
1684
+ "border-default": {
1685
+ $type: "color",
1686
+ $value: "{color.<color>.8}"
1687
+ },
1688
+ "border-strong": {
1689
+ $type: "color",
1690
+ $value: "{color.<color>.9}"
1691
+ },
1692
+ "text-subtle": {
1693
+ $type: "color",
1694
+ $value: "{color.<color>.10}"
1695
+ },
1696
+ "text-default": {
1697
+ $type: "color",
1698
+ $value: "{color.<color>.11}"
1699
+ },
1700
+ "base-default": {
1701
+ $type: "color",
1702
+ $value: "{color.<color>.12}"
1703
+ },
1704
+ "base-hover": {
1705
+ $type: "color",
1706
+ $value: "{color.<color>.13}"
1707
+ },
1708
+ "base-active": {
1709
+ $type: "color",
1710
+ $value: "{color.<color>.14}"
1711
+ },
1712
+ "base-contrast-subtle": {
1713
+ $type: "color",
1714
+ $value: "{color.<color>.15}"
1715
+ },
1716
+ "base-contrast-default": {
1717
+ $type: "color",
1718
+ $value: "{color.<color>.16}"
1719
+ }
1720
+ };
1721
+
1722
+ // src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
1723
+ var color_template_default2 = {
1724
+ "background-default": {
1725
+ $type: "color",
1726
+ $value: "{color.<color>.background-default}"
1727
+ },
1728
+ "background-tinted": {
1729
+ $type: "color",
1730
+ $value: "{color.<color>.background-tinted}"
1731
+ },
1732
+ "surface-default": {
1733
+ $type: "color",
1734
+ $value: "{color.<color>.surface-default}"
1735
+ },
1736
+ "surface-tinted": {
1737
+ $type: "color",
1738
+ $value: "{color.<color>.surface-tinted}"
1739
+ },
1740
+ "surface-hover": {
1741
+ $type: "color",
1742
+ $value: "{color.<color>.surface-hover}"
1743
+ },
1744
+ "surface-active": {
1745
+ $type: "color",
1746
+ $value: "{color.<color>.surface-active}"
1747
+ },
1748
+ "border-subtle": {
1749
+ $type: "color",
1750
+ $value: "{color.<color>.border-subtle}"
1751
+ },
1752
+ "border-default": {
1753
+ $type: "color",
1754
+ $value: "{color.<color>.border-default}"
1755
+ },
1756
+ "border-strong": {
1757
+ $type: "color",
1758
+ $value: "{color.<color>.border-strong}"
1759
+ },
1760
+ "text-subtle": {
1761
+ $type: "color",
1762
+ $value: "{color.<color>.text-subtle}"
1763
+ },
1764
+ "text-default": {
1765
+ $type: "color",
1766
+ $value: "{color.<color>.text-default}"
1767
+ },
1768
+ "base-default": {
1769
+ $type: "color",
1770
+ $value: "{color.<color>.base-default}"
1771
+ },
1772
+ "base-hover": {
1773
+ $type: "color",
1774
+ $value: "{color.<color>.base-hover}"
1775
+ },
1776
+ "base-active": {
1777
+ $type: "color",
1778
+ $value: "{color.<color>.base-active}"
1779
+ },
1780
+ "base-contrast-subtle": {
1781
+ $type: "color",
1782
+ $value: "{color.<color>.base-contrast-subtle}"
1783
+ },
1784
+ "base-contrast-default": {
1785
+ $type: "color",
1786
+ $value: "{color.<color>.base-contrast-default}"
1787
+ }
1788
+ };
1789
+
1790
+ // src/tokens/create/generators/semantic.ts
1791
+ var generateSemantic = (colors) => {
1792
+ const mainColorNames = Object.keys(colors.main);
1793
+ const supportColorNames = Object.keys(colors.support);
1794
+ const modes = {
1795
+ "main-color": {},
1796
+ "support-color": {}
1797
+ };
1798
+ const categories = [
1799
+ ["main-color", mainColorNames],
1800
+ ["support-color", supportColorNames]
1801
+ ];
1802
+ for (const [colorCategory2, colorNames] of categories) {
1803
+ for (const colorName of colorNames) {
1804
+ const category = colorCategory2.replace("-color", "");
1805
+ const customColorTokens = {
1806
+ color: {
1807
+ [category]: JSON.parse(
1808
+ JSON.stringify(
1809
+ color_template_default2,
1810
+ (key, value) => {
1811
+ if (key === "$value") {
1812
+ return value.replace("<color>", colorName);
1813
+ }
1814
+ return value;
1815
+ },
1816
+ 2
1817
+ )
1818
+ )
1819
+ }
1820
+ };
1821
+ modes[colorCategory2][colorName] = customColorTokens;
1822
+ }
1823
+ }
1824
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
1825
+ const semanticColorTokens = customColors.map(
1826
+ (colorName) => [
1827
+ colorName,
1828
+ R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
1829
+ ]
1830
+ );
1831
+ const color = {
1832
+ ...color_base_template_default,
1833
+ color: {
1834
+ ...Object.fromEntries(semanticColorTokens),
1835
+ ...color_base_template_default.color
1836
+ }
1837
+ };
1838
+ return {
1839
+ modes,
1840
+ color
1841
+ };
1842
+ };
1843
+
1844
+ // src/tokens/create/generators/theme.ts
1845
+ import * as R6 from "ramda";
1846
+
1847
+ // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
1848
+ var theme_base_template_default = {
1849
+ color: {},
1850
+ "font-family": {
1851
+ $type: "fontFamilies",
1852
+ $value: "{<theme>.font-family}"
1853
+ },
1854
+ "font-weight": {
1855
+ medium: {
1856
+ $type: "fontWeights",
1857
+ $value: "{<theme>.font-weight.medium}"
1858
+ },
1859
+ semibold: {
1860
+ $type: "fontWeights",
1861
+ $value: "{<theme>.font-weight.semibold}"
1862
+ },
1863
+ regular: {
1864
+ $type: "fontWeights",
1865
+ $value: "{<theme>.font-weight.regular}"
1866
+ }
1867
+ },
1868
+ "border-radius": {
1869
+ "1": {
1870
+ $type: "dimension",
1871
+ $value: "min({border-radius.base}*0.5,{border-radius.scale})"
1872
+ },
1873
+ "2": {
1874
+ $type: "dimension",
1875
+ $value: "min({border-radius.base},{border-radius.scale}*2)"
1876
+ },
1877
+ "3": {
1878
+ $type: "dimension",
1879
+ $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
1880
+ },
1881
+ "4": {
1882
+ $type: "dimension",
1883
+ $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
1884
+ },
1885
+ "5": {
1886
+ $type: "dimension",
1887
+ $value: "{border-radius.base}"
1888
+ },
1889
+ "6": {
1890
+ $type: "dimension",
1891
+ $value: "9999"
1892
+ },
1893
+ base: {
1894
+ $type: "dimension",
1895
+ $value: "4"
1896
+ },
1897
+ scale: {
1898
+ $type: "dimension",
1899
+ $value: "4"
1900
+ }
1901
+ }
1902
+ };
1903
+
1904
+ // src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
1905
+ var theme_template_default = {
1906
+ "1": {
1907
+ $type: "color",
1908
+ $value: "{<theme>.<color>.1}"
1909
+ },
1910
+ "2": {
1911
+ $type: "color",
1912
+ $value: "{<theme>.<color>.2}"
1913
+ },
1914
+ "3": {
1915
+ $type: "color",
1916
+ $value: "{<theme>.<color>.3}"
1917
+ },
1918
+ "4": {
1919
+ $type: "color",
1920
+ $value: "{<theme>.<color>.4}"
1921
+ },
1922
+ "5": {
1923
+ $type: "color",
1924
+ $value: "{<theme>.<color>.5}"
1925
+ },
1926
+ "6": {
1927
+ $type: "color",
1928
+ $value: "{<theme>.<color>.6}"
1929
+ },
1930
+ "7": {
1931
+ $type: "color",
1932
+ $value: "{<theme>.<color>.7}"
1933
+ },
1934
+ "8": {
1935
+ $type: "color",
1936
+ $value: "{<theme>.<color>.8}"
1937
+ },
1938
+ "9": {
1939
+ $type: "color",
1940
+ $value: "{<theme>.<color>.9}"
1941
+ },
1942
+ "10": {
1943
+ $type: "color",
1944
+ $value: "{<theme>.<color>.10}"
1945
+ },
1946
+ "11": {
1947
+ $type: "color",
1948
+ $value: "{<theme>.<color>.11}"
1949
+ },
1950
+ "12": {
1951
+ $type: "color",
1952
+ $value: "{<theme>.<color>.12}"
1953
+ },
1954
+ "13": {
1955
+ $type: "color",
1956
+ $value: "{<theme>.<color>.13}"
1957
+ },
1958
+ "14": {
1959
+ $type: "color",
1960
+ $value: "{<theme>.<color>.14}"
1961
+ },
1962
+ "15": {
1963
+ $type: "color",
1964
+ $value: "{<theme>.<color>.15}"
1965
+ },
1966
+ "16": {
1967
+ $type: "color",
1968
+ $value: "{<theme>.<color>.16}"
1969
+ }
1970
+ };
1971
+
1972
+ // src/tokens/create/generators/theme.ts
1973
+ var generateTheme = (colors, themeName, borderRadius) => {
1974
+ const mainColorNames = Object.keys(colors.main);
1975
+ const supportColorNames = Object.keys(colors.support);
1976
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
1977
+ const themeColorTokens = Object.fromEntries(
1978
+ customColors.map(
1979
+ (colorName) => [
1980
+ colorName,
1981
+ R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
1982
+ ]
1983
+ )
1984
+ );
1985
+ const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
1986
+ const themeFile = {
1987
+ color: {
1988
+ ...themeColorTokens,
1989
+ ...themeBaseFileColor
1990
+ },
1991
+ ...remainingThemeFile
1992
+ };
1993
+ const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
1994
+ const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
1995
+ const token = JSON.parse(
1996
+ JSON.stringify(
1997
+ updatedThemeFile,
1998
+ (key, value) => {
1999
+ if (key === "$value") {
2000
+ return value.replace("<theme>", themeName);
2001
+ }
2002
+ return value;
2003
+ },
2004
+ 2
2005
+ )
2006
+ );
2007
+ return token;
2008
+ };
2009
+
2010
+ // src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
2011
+ var typography_template_default = {
2012
+ "<theme>": {
2013
+ "font-family": {
2014
+ $type: "fontFamilies",
2015
+ $value: "<font-family>"
2016
+ },
2017
+ "font-weight": {
2018
+ medium: {
2019
+ $type: "fontWeights",
2020
+ $value: "Medium"
2021
+ },
2022
+ semibold: {
2023
+ $type: "fontWeights",
2024
+ $value: "Semi bold"
2025
+ },
2026
+ regular: {
2027
+ $type: "fontWeights",
2028
+ $value: "Regular"
2029
+ }
2030
+ }
2031
+ }
2032
+ };
2033
+
2034
+ // src/tokens/create/generators/typography.ts
2035
+ var generateTypography = (themeName, { fontFamily }) => {
2036
+ return JSON.parse(
2037
+ JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
2038
+ );
2039
+ };
2040
+
2041
+ // src/tokens/create.ts
2042
+ var cliOptions = {
2043
+ outDir: "out-dir",
2044
+ clean: "clean",
2045
+ theme: {
2046
+ colors: {
2047
+ main: "main-colors",
2048
+ support: "support-colors",
2049
+ neutral: "neutral-color"
2050
+ },
2051
+ typography: {
2052
+ fontFamily: "font-family"
2053
+ },
2054
+ borderRadius: "border-radius"
2055
+ }
2056
+ };
2057
+ var createTokens = async (opts) => {
2058
+ const { colors, typography: typography2, name, borderRadius } = opts;
2059
+ const colorSchemes = ["light", "dark"];
2060
+ const semantic2 = generateSemantic(colors);
2061
+ const tokenSets = new Map([
2062
+ ...getDefaultTokens([
2063
+ "primitives/globals",
2064
+ "primitives/modes/size/small",
2065
+ "primitives/modes/size/medium",
2066
+ "primitives/modes/size/large",
2067
+ "primitives/modes/size/global",
2068
+ "primitives/modes/typography/size/small",
2069
+ "primitives/modes/typography/size/medium",
2070
+ "primitives/modes/typography/size/large"
2071
+ ]),
2072
+ [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
2073
+ [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
2074
+ ...colorSchemes.flatMap((scheme) => [
2075
+ [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
2076
+ [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
2077
+ ]),
2078
+ [`themes/${name}`, generateTheme(colors, name, borderRadius)],
2079
+ ["semantic/color", semantic2.color],
2080
+ // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
2081
+ ...Object.entries(semantic2.modes).flatMap(
2082
+ ([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
2083
+ ),
2084
+ getDefaultToken("semantic/style")
2085
+ ]);
2086
+ return { tokenSets };
2087
+ };
2088
+
2089
+ // src/tokens/format.ts
2090
+ import * as R20 from "ramda";
2091
+
2092
+ // ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
2093
+ var BoxShadowTypes;
2094
+ (function(BoxShadowTypes2) {
2095
+ BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
2096
+ BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
2097
+ })(BoxShadowTypes || (BoxShadowTypes = {}));
2098
+
2099
+ // ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
2100
+ var ColorModifierTypes;
2101
+ (function(ColorModifierTypes2) {
2102
+ ColorModifierTypes2["LIGHTEN"] = "lighten";
2103
+ ColorModifierTypes2["DARKEN"] = "darken";
2104
+ ColorModifierTypes2["MIX"] = "mix";
2105
+ ColorModifierTypes2["ALPHA"] = "alpha";
2106
+ })(ColorModifierTypes || (ColorModifierTypes = {}));
2107
+
2108
+ // ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
2109
+ var ColorSpaceTypes;
2110
+ (function(ColorSpaceTypes2) {
2111
+ ColorSpaceTypes2["LCH"] = "lch";
2112
+ ColorSpaceTypes2["SRGB"] = "srgb";
2113
+ ColorSpaceTypes2["P3"] = "p3";
2114
+ ColorSpaceTypes2["HSL"] = "hsl";
2115
+ })(ColorSpaceTypes || (ColorSpaceTypes = {}));
2116
+
2117
+ // ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
2118
+ var Properties;
2119
+ (function(Properties2) {
2120
+ Properties2["sizing"] = "sizing";
2121
+ Properties2["height"] = "height";
2122
+ Properties2["width"] = "width";
2123
+ Properties2["spacing"] = "spacing";
2124
+ Properties2["verticalPadding"] = "verticalPadding";
2125
+ Properties2["horizontalPadding"] = "horizontalPadding";
2126
+ Properties2["paddingTop"] = "paddingTop";
2127
+ Properties2["paddingRight"] = "paddingRight";
2128
+ Properties2["paddingBottom"] = "paddingBottom";
2129
+ Properties2["paddingLeft"] = "paddingLeft";
2130
+ Properties2["itemSpacing"] = "itemSpacing";
2131
+ Properties2["fill"] = "fill";
2132
+ Properties2["backgroundBlur"] = "backgroundBlur";
2133
+ Properties2["border"] = "border";
2134
+ Properties2["borderTop"] = "borderTop";
2135
+ Properties2["borderRight"] = "borderRight";
2136
+ Properties2["borderBottom"] = "borderBottom";
2137
+ Properties2["borderLeft"] = "borderLeft";
2138
+ Properties2["borderColor"] = "borderColor";
2139
+ Properties2["borderRadius"] = "borderRadius";
2140
+ Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
2141
+ Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
2142
+ Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
2143
+ Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
2144
+ Properties2["borderWidth"] = "borderWidth";
2145
+ Properties2["borderWidthTop"] = "borderWidthTop";
2146
+ Properties2["borderWidthRight"] = "borderWidthRight";
2147
+ Properties2["borderWidthBottom"] = "borderWidthBottom";
2148
+ Properties2["borderWidthLeft"] = "borderWidthLeft";
2149
+ Properties2["boxShadow"] = "boxShadow";
2150
+ Properties2["opacity"] = "opacity";
2151
+ Properties2["fontFamilies"] = "fontFamilies";
2152
+ Properties2["fontWeights"] = "fontWeights";
2153
+ Properties2["fontSizes"] = "fontSizes";
2154
+ Properties2["lineHeights"] = "lineHeights";
2155
+ Properties2["typography"] = "typography";
2156
+ Properties2["composition"] = "composition";
2157
+ Properties2["letterSpacing"] = "letterSpacing";
2158
+ Properties2["paragraphSpacing"] = "paragraphSpacing";
2159
+ Properties2["textCase"] = "textCase";
2160
+ Properties2["dimension"] = "dimension";
2161
+ Properties2["textDecoration"] = "textDecoration";
2162
+ Properties2["asset"] = "asset";
2163
+ Properties2["tokenValue"] = "tokenValue";
2164
+ Properties2["value"] = "value";
2165
+ Properties2["tokenName"] = "tokenName";
2166
+ Properties2["description"] = "description";
2167
+ })(Properties || (Properties = {}));
2168
+
2169
+ // ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
2170
+ var TokenSetStatus;
2171
+ (function(TokenSetStatus2) {
2172
+ TokenSetStatus2["DISABLED"] = "disabled";
2173
+ TokenSetStatus2["SOURCE"] = "source";
2174
+ TokenSetStatus2["ENABLED"] = "enabled";
2175
+ })(TokenSetStatus || (TokenSetStatus = {}));
2176
+
2177
+ // ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
2178
+ var TokenTypes;
2179
+ (function(TokenTypes2) {
2180
+ TokenTypes2["OTHER"] = "other";
2181
+ TokenTypes2["COLOR"] = "color";
2182
+ TokenTypes2["BORDER_RADIUS"] = "borderRadius";
2183
+ TokenTypes2["SIZING"] = "sizing";
2184
+ TokenTypes2["SPACING"] = "spacing";
2185
+ TokenTypes2["TEXT"] = "text";
2186
+ TokenTypes2["TYPOGRAPHY"] = "typography";
2187
+ TokenTypes2["OPACITY"] = "opacity";
2188
+ TokenTypes2["BORDER_WIDTH"] = "borderWidth";
2189
+ TokenTypes2["STROKE_STYLE"] = "strokeStyle";
2190
+ TokenTypes2["BOX_SHADOW"] = "boxShadow";
2191
+ TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
2192
+ TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
2193
+ TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
2194
+ TokenTypes2["FONT_SIZES"] = "fontSizes";
2195
+ TokenTypes2["LETTER_SPACING"] = "letterSpacing";
2196
+ TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
2197
+ TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
2198
+ TokenTypes2["TEXT_DECORATION"] = "textDecoration";
2199
+ TokenTypes2["TEXT_CASE"] = "textCase";
2200
+ TokenTypes2["COMPOSITION"] = "composition";
2201
+ TokenTypes2["DIMENSION"] = "dimension";
2202
+ TokenTypes2["BORDER"] = "border";
2203
+ TokenTypes2["ASSET"] = "asset";
2204
+ TokenTypes2["BOOLEAN"] = "boolean";
2205
+ TokenTypes2["NUMBER"] = "number";
2206
+ })(TokenTypes || (TokenTypes = {}));
2207
+
2208
+ // ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
2209
+ var BorderValues;
2210
+ (function(BorderValues2) {
2211
+ BorderValues2["BORDER_COLOR"] = "color";
2212
+ BorderValues2["BORDER_WIDTH"] = "width";
2213
+ BorderValues2["BORDER_STYLE"] = "style";
2214
+ })(BorderValues || (BorderValues = {}));
2215
+
2216
+ // ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
2217
+ var StrokeStyleValues;
2218
+ (function(StrokeStyleValues2) {
2219
+ StrokeStyleValues2["SOLID"] = "solid";
2220
+ StrokeStyleValues2["DASHED"] = "dashed";
2221
+ StrokeStyleValues2["DOTTED"] = "dotted";
2222
+ StrokeStyleValues2["DOUBLE"] = "double";
2223
+ StrokeStyleValues2["GROOVE"] = "groove";
2224
+ StrokeStyleValues2["RIDGE"] = "ridge";
2225
+ StrokeStyleValues2["OUTSET"] = "outset";
2226
+ StrokeStyleValues2["INSET"] = "inset";
2227
+ })(StrokeStyleValues || (StrokeStyleValues = {}));
2228
+
2229
+ // ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
2230
+ var BoxShadowValues;
2231
+ (function(BoxShadowValues2) {
2232
+ BoxShadowValues2["TYPE"] = "type";
2233
+ BoxShadowValues2["COLOR"] = "color";
2234
+ BoxShadowValues2["X"] = "x";
2235
+ BoxShadowValues2["Y"] = "y";
2236
+ BoxShadowValues2["BLUR"] = "blur";
2237
+ BoxShadowValues2["SPREAD"] = "spread";
2238
+ BoxShadowValues2["BLEND_MODE"] = "blendMode";
2239
+ })(BoxShadowValues || (BoxShadowValues = {}));
2240
+
2241
+ // ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
2242
+ var TypographyValues;
2243
+ (function(TypographyValues2) {
2244
+ TypographyValues2["FONT_FAMILY"] = "fontFamily";
2245
+ TypographyValues2["FONT_WEIGHT"] = "fontWeight";
2246
+ TypographyValues2["LINE_HEIGHT"] = "lineHeight";
2247
+ TypographyValues2["FONT_SIZE"] = "fontSize";
2248
+ TypographyValues2["LETTER_SPACING"] = "letterSpacing";
2249
+ TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
2250
+ TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
2251
+ TypographyValues2["TEXT_DECORATION"] = "textDecoration";
2252
+ TypographyValues2["TEXT_CASE"] = "textCase";
2253
+ })(TypographyValues || (TypographyValues = {}));
2254
+
2255
+ // src/tokens/create/generators/$themes.ts
2256
+ var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
2257
+ async function createHash(text, algo = "SHA-1") {
2258
+ const crypto = globalThis.crypto;
2259
+ return Array.from(
2260
+ new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
2261
+ (byte) => byte.toString(16).padStart(2, "0")
2262
+ ).join("");
2263
+ }
2264
+ async function generate$Themes(colorSchemes, themes, colors) {
2265
+ return [
2266
+ ...generateSizeGroup(),
2267
+ ...await generateThemesGroup(themes),
2268
+ ...generateTypographyGroup(themes),
2269
+ ...generateColorSchemesGroup(colorSchemes, themes),
2270
+ generateSemanticGroup(),
2271
+ ...await generateColorGroup("main", colors),
2272
+ ...await generateColorGroup("support", colors)
2273
+ ];
2274
+ }
2275
+ function generateSizeGroup() {
2276
+ return [
2277
+ {
2278
+ id: "8b2c8cc86611a34b135cb22948666779361fd729",
2279
+ name: "medium",
2280
+ $figmaStyleReferences: {},
2281
+ selectedTokenSets: {
2282
+ "primitives/modes/size/medium": TokenSetStatus.SOURCE,
2283
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
2284
+ "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
2285
+ },
2286
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
2287
+ $figmaModeId: "41630:1",
2288
+ group: "Size"
2289
+ },
2290
+ {
2291
+ id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
2292
+ name: "large",
2293
+ $figmaStyleReferences: {},
2294
+ selectedTokenSets: {
2295
+ "primitives/modes/size/large": TokenSetStatus.SOURCE,
2296
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
2297
+ "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
2298
+ },
2299
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
2300
+ $figmaModeId: "41630:2",
2301
+ group: "Size"
2302
+ },
2303
+ {
2304
+ id: "fb11567729c298ca37c9da4e3a27716a23480824",
2305
+ name: "small",
2306
+ $figmaStyleReferences: {},
2307
+ selectedTokenSets: {
2308
+ "primitives/modes/size/small": TokenSetStatus.SOURCE,
2309
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
2310
+ "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
2311
+ },
2312
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
2313
+ $figmaModeId: "41630:3",
2314
+ group: "Size"
2315
+ }
2316
+ ];
2317
+ }
2318
+ var colorSchemeDefaults = {
2319
+ light: {
2320
+ name: "Light",
2321
+ selectedTokenSets: {},
2322
+ id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
2323
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
2324
+ $figmaModeId: "34811:0"
2325
+ },
2326
+ dark: {
2327
+ name: "Dark",
2328
+ selectedTokenSets: {},
2329
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
2330
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
2331
+ $figmaModeId: "34811:1"
2332
+ },
2333
+ contrast: {
2334
+ name: "Contrast",
2335
+ selectedTokenSets: {},
2336
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
2337
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
2338
+ $figmaModeId: "34811:2"
2339
+ }
2340
+ };
2341
+ function generateColorSchemesGroup(colorSchemes, themes) {
2342
+ return colorSchemes.map(
2343
+ (scheme) => ({
2344
+ ...colorSchemeDefaults[scheme],
2345
+ selectedTokenSets: Object.fromEntries([
2346
+ [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
2347
+ ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
2348
+ ]),
2349
+ group: "Color scheme"
2350
+ })
2351
+ );
2352
+ }
2353
+ async function generateThemesGroup(themes) {
2354
+ return Promise.all(
2355
+ themes.map(
2356
+ async (theme, index) => ({
2357
+ id: await createHash(theme),
2358
+ $figmaCollectionId: "VariableCollectionId:36528:61712",
2359
+ $figmaModeId: `40960:${index + 6}`,
2360
+ // Start on 6 in Token Studio and Community file for some reason
2361
+ name: theme,
2362
+ selectedTokenSets: {
2363
+ [`themes/${theme}`]: TokenSetStatus.ENABLED
2364
+ },
2365
+ group: "Theme"
2366
+ })
2367
+ )
2368
+ );
2369
+ }
2370
+ function generateSemanticGroup() {
2371
+ return {
2372
+ id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
2373
+ name: "Semantic",
2374
+ selectedTokenSets: {
2375
+ "semantic/style": TokenSetStatus.ENABLED,
2376
+ "semantic/color": TokenSetStatus.ENABLED,
2377
+ "primitives/globals": TokenSetStatus.SOURCE
2378
+ },
2379
+ $figmaCollectionId: "VariableCollectionId:34811:5976",
2380
+ $figmaModeId: "34811:5",
2381
+ group: "Semantic"
2382
+ };
2383
+ }
2384
+ async function generateColorGroup(group, colors) {
2385
+ return Promise.all(
2386
+ Object.entries(colors[group]).map(
2387
+ async ([color]) => ({
2388
+ id: await createHash(`${group}-${color}`),
2389
+ name: color,
2390
+ selectedTokenSets: {
2391
+ [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
2392
+ },
2393
+ group: `${capitalize(group)} color`
2394
+ })
2395
+ )
2396
+ );
2397
+ }
2398
+ function generateTypographyGroup(themes) {
2399
+ return [
2400
+ {
2401
+ id: "368d753fcac4455f289500eaa42e70dc0a03522f",
2402
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
2403
+ $figmaModeId: "36248:2",
2404
+ name: "Primary",
2405
+ selectedTokenSets: Object.fromEntries(
2406
+ themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
2407
+ ),
2408
+ group: "Typography"
2409
+ },
2410
+ {
2411
+ id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
2412
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
2413
+ $figmaModeId: "36248:3",
2414
+ name: "Secondary",
2415
+ selectedTokenSets: Object.fromEntries(
2416
+ themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
2417
+ ),
2418
+ group: "Typography"
2419
+ }
2420
+ ];
2421
+ }
2422
+
2423
+ // src/tokens/process/platform.ts
2424
+ import chalk2 from "chalk";
2425
+ import * as R18 from "ramda";
2426
+ import StyleDictionary2 from "style-dictionary";
2427
+
2428
+ // src/tokens/types.ts
2429
+ var colorCategories = {
2430
+ main: "main",
2431
+ support: "support"
2432
+ };
2433
+
2434
+ // src/tokens/process/configs.ts
2435
+ import { register } from "@tokens-studio/sd-transforms";
2436
+ import * as R17 from "ramda";
2437
+ import StyleDictionary from "style-dictionary";
2438
+
2439
+ // src/tokens/utils.ts
2440
+ import * as R7 from "ramda";
2441
+ var mapToLowerCase = R7.map(R7.toLower);
2442
+ var hasAnyTruth = R7.any(R7.equals(true));
2443
+ var getType = (token) => (token.$type ?? token.type) || "";
2444
+ var getValue = (token) => token.$value ?? token.value;
2445
+ var typeEquals = R7.curry((types, token) => {
2446
+ if (R7.isNil(token)) {
2447
+ return false;
2448
+ }
2449
+ return R7.includes(R7.toLower(getType(token)), R7.map(R7.toLower, Array.isArray(types) ? types : [types]));
2450
+ });
2451
+ var pathStartsWithOneOf = R7.curry((paths, token) => {
2452
+ if (R7.isNil(token)) {
2453
+ return false;
2454
+ }
2455
+ const tokenPath = mapToLowerCase(token.path);
2456
+ const matchPathsStartingWith = R7.map((path) => R7.startsWith([path], tokenPath), mapToLowerCase(paths));
2457
+ return hasAnyTruth(matchPathsStartingWith);
2458
+ });
2459
+ function isSemanticToken(token) {
2460
+ return token.filePath.includes("semantic/");
2461
+ }
2462
+ function isSemanticColorToken(token, color) {
2463
+ return token.filePath.includes("semantic/") && R7.startsWith(["color", color], token.path);
2464
+ }
2465
+ function isGlobalColorToken(token) {
2466
+ return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
2467
+ }
2468
+ function isColorCategoryToken(token, category) {
2469
+ if (!category) {
2470
+ return ["main", "support"].some((c) => isColorCategoryToken(token, c));
2471
+ }
2472
+ return R7.startsWith(["color", category], token.path);
2473
+ }
2474
+ var isDigit = (s) => /^\d+$/.test(s);
2475
+ function traverseObj(obj, fn) {
2476
+ for (const key in obj) {
2477
+ const prop = obj[key];
2478
+ if (prop != null) {
2479
+ fn.apply(null, [obj, key, prop]);
2480
+ if (typeof prop === "object") {
2481
+ traverseObj(prop, fn);
2482
+ }
2483
+ }
2484
+ }
2485
+ return obj;
2486
+ }
2487
+ function inlineTokens(shouldInline, tokens) {
2488
+ const [inlineableTokens, otherTokens] = R7.partition(shouldInline, tokens);
2489
+ return otherTokens.map((token) => {
2490
+ let transformed = getValue(token.original);
2491
+ for (const ref of inlineableTokens) {
2492
+ const refName = ref.path.join(".");
2493
+ if (typeof transformed === "string") {
2494
+ transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
2495
+ }
2496
+ }
2497
+ const tokenWithInlinedRefs = R7.set(R7.lensPath(["original", "$value"]), transformed, token);
2498
+ return tokenWithInlinedRefs;
2499
+ });
2500
+ }
2501
+
2502
+ // src/tokens/process/configs/color.ts
2503
+ import * as R12 from "ramda";
2504
+
2505
+ // src/tokens/process/formats/css/color.ts
2506
+ import * as R8 from "ramda";
2507
+ import { createPropertyFormatter } from "style-dictionary/utils";
2508
+ var prefersColorScheme = (colorScheme2, content) => `
2509
+ @media (prefers-color-scheme: ${colorScheme2}) {
2510
+ [data-color-scheme="auto"] ${content}
2511
+ }
2512
+ `;
2513
+ var colorScheme = {
2514
+ name: "ds/css-colorscheme",
2515
+ format: async ({ dictionary, file, options, platform }) => {
2516
+ const { allTokens } = dictionary;
2517
+ const { outputReferences, usesDtcg } = options;
2518
+ const { selector, colorScheme: colorScheme2, layer } = platform;
2519
+ const colorScheme_ = colorScheme2;
2520
+ const format = createPropertyFormatter({
2521
+ outputReferences,
2522
+ dictionary,
2523
+ format: "css",
2524
+ usesDtcg
2525
+ });
2526
+ const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
2527
+ color-scheme: ${colorScheme_};
2528
+ ` : "";
2529
+ const filteredAllTokens = allTokens.filter(
2530
+ R8.allPass([
2531
+ R8.anyPass([
2532
+ // Include semantic tokens in the output
2533
+ isSemanticToken,
2534
+ // Include global color tokens
2535
+ isGlobalColorToken
2536
+ ]),
2537
+ // Don't include color category tokens -- they are exported separately
2538
+ (t) => !isColorCategoryToken(t)
2539
+ ])
2540
+ );
2541
+ const formattedTokens = filteredAllTokens.map(format).join("\n");
2542
+ const content = `{
2543
+ ${formattedTokens}
2544
+ ${colorSchemeProperty}}
2545
+ `;
2546
+ const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
2547
+ const body = R8.isNotNil(layer) ? `@layer ${layer} {
2548
+ ${selector} ${content} ${autoSelectorContent}
2549
+ }
2550
+ ` : `${selector} ${content} ${autoSelectorContent}
2551
+ `;
2552
+ return body;
2553
+ }
2554
+ };
2555
+ var colorCategory = {
2556
+ name: "ds/css-colorcategory",
2557
+ format: async ({ dictionary, file, options, platform }) => {
2558
+ const { outputReferences, usesDtcg } = options;
2559
+ const { selector, layer } = platform;
2560
+ const format = R8.compose(
2561
+ createPropertyFormatter({
2562
+ outputReferences,
2563
+ dictionary,
2564
+ format: "css",
2565
+ usesDtcg
2566
+ }),
2567
+ (token) => ({
2568
+ ...token,
2569
+ name: token.name.replace(/color-\w+-/, "color-"),
2570
+ original: {
2571
+ ...token.original,
2572
+ $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
2573
+ }
2574
+ })
2575
+ );
2576
+ const formattedTokens = dictionary.allTokens.map(format).join("\n");
2577
+ const content = `{
2578
+ ${formattedTokens}
2579
+ }
2580
+ `;
2581
+ const body = R8.isNotNil(layer) ? `@layer ${layer} {
2582
+ ${selector} ${content}
2583
+ }
2584
+ ` : `${selector} ${content}
2585
+ `;
2586
+ return body;
2587
+ }
2588
+ };
2589
+
2590
+ // src/tokens/process/formats/css/semantic.ts
2591
+ import * as R9 from "ramda";
2592
+ import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
2593
+ var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
2594
+ var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
2595
+ var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
2596
+ var isInlineTokens = R9.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
2597
+ var overrideSizingFormula = (format, token) => {
2598
+ const [name, value] = format(token).split(":");
2599
+ const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
2600
+ const round = `round(down, ${calc}, 0.0625rem)`;
2601
+ return {
2602
+ name,
2603
+ round,
2604
+ calc
2605
+ };
2606
+ };
2607
+ var formatSizingTokens = (format, tokens) => {
2608
+ const { round, calc } = R9.reduce(
2609
+ (acc, token) => {
2610
+ const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
2611
+ return {
2612
+ round: [...acc.round, `${name}: ${round2};`],
2613
+ calc: [...acc.calc, `${name}: ${calc2};`]
2614
+ };
2615
+ },
2616
+ { round: [], calc: [] },
2617
+ tokens
2618
+ );
2619
+ return `
2620
+ ${calc.join("\n")}
2621
+
2622
+ @supports (width: round(down, .1em, 1px)) {
2623
+ ${round.join("\n")}
2624
+ }`;
2625
+ };
2626
+ var semantic = {
2627
+ name: "ds/css-semantic",
2628
+ format: async ({ dictionary, file, options, platform }) => {
2629
+ const { outputReferences, usesDtcg } = options;
2630
+ const { selector, layer } = platform;
2631
+ const format = createPropertyFormatter2({
2632
+ outputReferences,
2633
+ dictionary,
2634
+ format: "css",
2635
+ usesDtcg
2636
+ });
2637
+ const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
2638
+ const filteredTokens = R9.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
2639
+ const [sizingTokens, restTokens] = R9.partition(
2640
+ (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
2641
+ filteredTokens
2642
+ );
2643
+ const formattedTokens = [R9.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
2644
+ const content = `{
2645
+ ${formattedTokens.join("\n")}
2646
+ }
2647
+ `;
2648
+ const body = R9.isNotNil(layer) ? `@layer ${layer} {
2649
+ ${selector} ${content}
2650
+ }
2651
+ ` : `${selector} ${content}
2652
+ `;
2653
+ return body;
2654
+ }
2655
+ };
2656
+
2657
+ // src/tokens/process/formats/css/typography.ts
2658
+ import * as R10 from "ramda";
2659
+ import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
2660
+ var typographyFontFamilyPredicate = R10.allPass([
2661
+ R10.pathSatisfies(R10.includes("typography"), ["path"]),
2662
+ R10.pathSatisfies(R10.includes("fontFamily"), ["path"])
2663
+ ]);
2664
+ var typography = {
2665
+ name: "ds/css-typography",
2666
+ format: async ({ dictionary, file, options, platform }) => {
2667
+ const { outputReferences, usesDtcg } = options;
2668
+ const { selector, layer } = platform;
2669
+ const format = createPropertyFormatter3({
2670
+ outputReferences,
2671
+ dictionary,
2672
+ format: "css",
2673
+ usesDtcg
2674
+ });
2675
+ const filteredTokens = R10.reject(typographyFontFamilyPredicate, dictionary.allTokens);
2676
+ const formattedTokens = R10.pipe(R10.map(format), R10.join("\n"))(filteredTokens);
2677
+ const content = selector ? `${selector} {
2678
+ ${formattedTokens}
2679
+ }` : formattedTokens;
2680
+ const body = R10.isNotNil(layer) ? `@layer ${layer} {
2681
+ ${content}
2682
+ }` : content;
2683
+ return body;
2684
+ }
2685
+ };
2686
+
2687
+ // src/tokens/process/formats/css.ts
2688
+ var formats = {
2689
+ colorScheme,
2690
+ colorCategory,
2691
+ semantic,
2692
+ typography
2693
+ };
2694
+
2695
+ // src/tokens/process/transformers.ts
2696
+ import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
2697
+ import * as R11 from "ramda";
2698
+ var isPx = R11.test(/\b\d+px\b/g);
2699
+ var sizeRem = {
2700
+ name: "ds/size/toRem",
2701
+ type: "value",
2702
+ transitive: true,
2703
+ filter: (token) => {
2704
+ const hasWantedType = typeEquals(["dimension", "fontsize"], token);
2705
+ const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
2706
+ return hasWantedType && hasWantedPath;
2707
+ },
2708
+ transform: (token, config) => {
2709
+ const value = getValue(token);
2710
+ if (isPx(value)) {
2711
+ const baseFont = config.basePxFontSize || 16;
2712
+ const size = parseInt(value);
2713
+ if (size === 0) {
2714
+ return "0";
2715
+ }
2716
+ return `${size / baseFont}rem`;
2717
+ }
2718
+ return value;
2719
+ }
2720
+ };
2721
+ var typographyName = {
2722
+ name: "name/typography",
2723
+ type: "name",
2724
+ transitive: true,
2725
+ // expanded tokens have different type so we match on path instead
2726
+ filter: (token) => pathStartsWithOneOf(["typography"], token),
2727
+ transform: (token) => {
2728
+ return token.name.replace("-typography", "");
2729
+ }
2730
+ };
2731
+ var resolveMath = {
2732
+ name: "ds/resolveMath",
2733
+ type: "value",
2734
+ transitive: true,
2735
+ filter: (token) => {
2736
+ const isValidValue = ["string", "object"].includes(typeof getValue(token));
2737
+ const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
2738
+ return isValidValue && isTokenOfInterest;
2739
+ },
2740
+ transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
2741
+ };
2742
+ var unitless = {
2743
+ name: "ds/unitless",
2744
+ type: "value",
2745
+ transitive: true,
2746
+ filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
2747
+ transform: (token) => parseInt(getValue(token))
2748
+ };
2749
+
2750
+ // src/tokens/process/configs/shared.ts
2751
+ var prefix = "ds";
2752
+ var basePxFontSize = 16;
2753
+ var dsTransformers = [
2754
+ "name/kebab",
2755
+ resolveMath.name,
2756
+ "ts/size/px",
2757
+ sizeRem.name,
2758
+ unitless.name,
2759
+ "ts/typography/fontWeight",
2760
+ typographyName.name,
2761
+ "ts/color/modifiers",
2762
+ "ts/color/css/hexrgba",
2763
+ "ts/size/lineheight",
2764
+ "shadow/css/shorthand"
2765
+ ];
2766
+
2767
+ // src/tokens/process/configs/color.ts
2768
+ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
2769
+ const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
2770
+ const layer = `ds.theme.color-scheme.${colorScheme2}`;
2771
+ return {
2772
+ preprocessors: ["tokens-studio"],
2773
+ platforms: {
2774
+ css: {
2775
+ // custom
2776
+ colorScheme: colorScheme2,
2777
+ theme,
2778
+ selector,
2779
+ layer,
2780
+ //
2781
+ prefix,
2782
+ buildPath: `${theme}/`,
2783
+ transforms: dsTransformers,
2784
+ files: [
2785
+ {
2786
+ destination: `color-scheme/${colorScheme2}.css`,
2787
+ format: formats.colorScheme.name,
2788
+ filter: (token) => typeEquals("color", token) && !R12.startsWith(["global"], token.path)
2789
+ }
2790
+ ],
2791
+ options: {
2792
+ outputReferences: false
2793
+ }
2794
+ }
2795
+ }
2796
+ };
2797
+ };
2798
+ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
2799
+ const category = opts.category;
2800
+ const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
2801
+ if (!color) {
2802
+ throw new Error(
2803
+ category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
2804
+ );
2805
+ }
2806
+ const layer = `ds.theme.color`;
2807
+ const isRootColor = color === buildOptions?.rootColor;
2808
+ const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
2809
+ const config = {
2810
+ preprocessors: ["tokens-studio"],
2811
+ platforms: {
2812
+ css: {
2813
+ // custom
2814
+ colorScheme: colorScheme2,
2815
+ theme,
2816
+ selector,
2817
+ layer,
2818
+ //
2819
+ prefix,
2820
+ buildPath: `${theme}/`,
2821
+ transforms: dsTransformers,
2822
+ files: [
2823
+ {
2824
+ destination: `color/${color}.css`,
2825
+ format: formats.colorCategory.name,
2826
+ filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
2827
+ }
2828
+ ],
2829
+ options: {
2830
+ outputReferences: true
2831
+ }
2832
+ }
2833
+ }
2834
+ };
2835
+ return config;
2836
+ };
2837
+
2838
+ // src/tokens/process/configs/semantic.ts
2839
+ import * as R13 from "ramda";
2840
+ import { outputReferencesFilter } from "style-dictionary/utils";
2841
+ var semanticVariables = ({ theme }) => {
2842
+ const selector = `:root`;
2843
+ const layer = `ds.theme.semantic`;
2844
+ return {
2845
+ preprocessors: ["tokens-studio"],
2846
+ platforms: {
2847
+ css: {
2848
+ // custom
2849
+ theme,
2850
+ basePxFontSize,
2851
+ selector,
2852
+ layer,
2853
+ //
2854
+ prefix,
2855
+ buildPath: `${theme}/`,
2856
+ transforms: dsTransformers,
2857
+ files: [
2858
+ {
2859
+ destination: `semantic.css`,
2860
+ format: formats.semantic.name,
2861
+ filter: (token) => {
2862
+ const isUwantedToken = R13.anyPass([R13.includes("primitives/global")])(token.filePath);
2863
+ const isPrivateToken = R13.includes("_", token.path);
2864
+ const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
2865
+ const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
2866
+ const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
2867
+ return unwantedTokens;
2868
+ }
2869
+ }
2870
+ ],
2871
+ options: {
2872
+ outputReferences: (token, options) => {
2873
+ const include = pathStartsWithOneOf(["border-radius"], token);
2874
+ const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
2875
+ return (include || isWantedSize) && outputReferencesFilter(token, options);
2876
+ }
2877
+ }
2878
+ }
2879
+ }
2880
+ };
2881
+ };
2882
+
2883
+ // src/tokens/process/configs/storefront.ts
2884
+ import * as R15 from "ramda";
2885
+ import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
2886
+
2887
+ // src/tokens/process/formats/js-tokens.ts
2888
+ import * as R14 from "ramda";
2889
+ import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
2890
+ var groupByType = R14.groupBy((token) => getType(token));
2891
+ var removeUnwatedTokens = R14.pipe(
2892
+ R14.reject((token) => isColorCategoryToken(token)),
2893
+ R14.reject((token) => R14.any((path) => path.startsWith("_"))(token.path))
2894
+ );
2895
+ var dissocExtensions = R14.pipe(R14.dissoc("$extensions"), R14.dissocPath(["original", "$extensions"]));
2896
+ var removeUnwatedProps = R14.map((token) => dissocExtensions(token));
2897
+ var toCssVarName = R14.pipe(R14.split(":"), R14.head, R14.trim);
2898
+ var jsTokens = {
2899
+ name: "ds/js-tokens",
2900
+ format: async ({ dictionary, file, options }) => {
2901
+ const { usesDtcg, outputReferences } = options;
2902
+ const format = createPropertyFormatter4({
2903
+ outputReferences,
2904
+ dictionary,
2905
+ format: "css",
2906
+ usesDtcg
2907
+ });
2908
+ const formatTokens2 = R14.map((token) => {
2909
+ if (pathStartsWithOneOf(["size", "_size"], token)) {
2910
+ const { calc, name } = overrideSizingFormula(format, token);
2911
+ return {
2912
+ ...token,
2913
+ name: name.trim(),
2914
+ $value: calc.trim()
2915
+ };
2916
+ }
2917
+ return {
2918
+ ...token,
2919
+ name: toCssVarName(format(token))
2920
+ };
2921
+ });
2922
+ const processTokens = R14.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens2, groupByType);
2923
+ const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
2924
+ const content = Object.entries(tokens).map(
2925
+ ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
2926
+ `
2927
+ ).join("\n");
2928
+ return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
2929
+ }
2930
+ };
2931
+
2932
+ // src/tokens/process/configs/storefront.ts
2933
+ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
2934
+ return {
2935
+ preprocessors: ["tokens-studio"],
2936
+ platforms: {
2937
+ ts: {
2938
+ prefix,
2939
+ basePxFontSize,
2940
+ transforms: dsTransformers,
2941
+ buildPath: `${theme}/`,
2942
+ files: [
2943
+ {
2944
+ destination: `${colorScheme2}.ts`,
2945
+ format: jsTokens.name,
2946
+ filter: (token) => {
2947
+ if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R15.includes("semantic", token.filePath))
2948
+ return false;
2949
+ const isSemanticColor = R15.includes("semantic", token.filePath) && typeEquals(["color"], token);
2950
+ const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
2951
+ return isSemanticColor || wantedTypes;
2952
+ }
2953
+ }
2954
+ ],
2955
+ options: {
2956
+ outputReferences: (token, options) => {
2957
+ const include = pathStartsWithOneOf(["border-radius"], token);
2958
+ const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
2959
+ return (include || isWantedSize) && outputReferencesFilter2(token, options);
2960
+ }
2961
+ }
2962
+ }
2963
+ }
2964
+ };
2965
+ };
2966
+
2967
+ // src/tokens/process/configs/typography.ts
2968
+ import { expandTypesMap } from "@tokens-studio/sd-transforms";
2969
+ var typographyVariables = ({ theme, typography: typography2 }) => {
2970
+ const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
2971
+ const layer = `ds.theme.typography.${typography2}`;
2972
+ return {
2973
+ usesDtcg: true,
2974
+ preprocessors: ["tokens-studio"],
2975
+ expand: {
2976
+ include: ["typography"],
2977
+ typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
2978
+ },
2979
+ platforms: {
2980
+ css: {
2981
+ prefix,
2982
+ typography: typography2,
2983
+ selector,
2984
+ layer,
2985
+ buildPath: `${theme}/`,
2986
+ basePxFontSize,
2987
+ transforms: [
2988
+ "name/kebab",
2989
+ "ts/size/px",
2990
+ sizeRem.name,
2991
+ "ts/size/lineheight",
2992
+ "ts/typography/fontWeight",
2993
+ typographyName.name
2994
+ ],
2995
+ files: [
2996
+ {
2997
+ destination: `typography/${typography2}.css`,
2998
+ format: formats.typography.name,
2999
+ filter: (token) => {
3000
+ const included = typeEquals(
3001
+ ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
3002
+ token
3003
+ );
3004
+ if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
3005
+ return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
3006
+ }
3007
+ }
3008
+ ]
3009
+ }
3010
+ }
3011
+ };
3012
+ };
3013
+
3014
+ // src/tokens/process/utils/getMultidimensionalThemes.ts
3015
+ import chalk from "chalk";
3016
+ import { kebabCase } from "change-case";
3017
+ import * as R16 from "ramda";
3018
+ var getMultidimensionalThemes = (processed$themes, dimensions) => {
3019
+ const verboseLogging = buildOptions?.verbose;
3020
+ const grouped$themes = groupThemes(processed$themes);
3021
+ const permutations = permutateThemes(grouped$themes);
3022
+ const ALL_DEPENDENT_ON = ["theme"];
3023
+ const keys2 = R16.keys(grouped$themes);
3024
+ const nonDependentKeys = keys2.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
3025
+ if (verboseLogging) {
3026
+ console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3027
+ console.log(chalk.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3028
+ }
3029
+ return permutations.filter((val) => {
3030
+ const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
3031
+ return filters.every((x) => x);
3032
+ });
3033
+ };
3034
+ var processed = Symbol("Type brand for ProcessedThemeObject");
3035
+ function isProcessed(theme) {
3036
+ return Boolean(theme[processed]);
3037
+ }
3038
+ function processThemeObject(theme) {
3039
+ if (isProcessed(theme)) {
3040
+ return theme;
3041
+ }
3042
+ const result = { ...theme, [processed]: true };
3043
+ if (result.group) {
3044
+ result.group = kebabCase(result.group);
3045
+ }
3046
+ result.name = kebabCase(result.name);
3047
+ return result;
3048
+ }
3049
+ function groupThemes(themes) {
3050
+ const groups = {};
3051
+ for (const rawTheme of themes) {
3052
+ const theme = processThemeObject(rawTheme);
3053
+ if (theme.group) {
3054
+ const groupKey = theme.group;
3055
+ groups[groupKey] = [...groups[groupKey] ?? [], theme];
3056
+ } else {
3057
+ throw new Error(
3058
+ `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
3059
+ );
3060
+ }
3061
+ }
3062
+ return groups;
3063
+ }
3064
+ var hasUnknownProps = R16.pipe(R16.values, R16.none(R16.equals("unknown")), R16.not);
3065
+ function permutateThemes(groups) {
3066
+ const separator = "_";
3067
+ const permutations = cartesian(Object.values(groups));
3068
+ const permutatedThemes = permutations.map((perm) => {
3069
+ const permutatedTheme = perm.reduce(
3070
+ (acc, theme) => {
3071
+ const { group, name, selectedTokenSets } = theme;
3072
+ let updatedPermutation = acc.permutation;
3073
+ if (group) {
3074
+ const groupProp = R16.lensProp(group);
3075
+ updatedPermutation = R16.set(groupProp, name, updatedPermutation);
3076
+ }
3077
+ const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
3078
+ const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
3079
+ return {
3080
+ permutation: updatedPermutation,
3081
+ name: updatedName,
3082
+ selectedTokenSets: sets
3083
+ };
3084
+ },
3085
+ {
3086
+ name: "",
3087
+ selectedTokenSets: [],
3088
+ permutation: {
3089
+ "color-scheme": "unknown",
3090
+ "main-color": "unknown",
3091
+ "support-color": "unknown",
3092
+ theme: "unknown",
3093
+ semantic: "unknown",
3094
+ size: "unknown",
3095
+ typography: "unknown"
3096
+ }
3097
+ }
3098
+ );
3099
+ if (hasUnknownProps(permutatedTheme)) {
3100
+ throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
3101
+ }
3102
+ const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
3103
+ return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
3104
+ });
3105
+ return permutatedThemes;
3106
+ }
3107
+ function filterTokenSets(tokensets) {
3108
+ return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
3109
+ if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
3110
+ return -1;
3111
+ }
3112
+ if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
3113
+ return 1;
3114
+ }
3115
+ return 0;
3116
+ }).map((entry) => entry[0]);
3117
+ }
3118
+ function cartesian(a) {
3119
+ return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
3120
+ }
3121
+
3122
+ // src/tokens/process/configs.ts
3123
+ void register(StyleDictionary, { withSDBuiltins: false });
3124
+ StyleDictionary.registerTransform(sizeRem);
3125
+ StyleDictionary.registerTransform(typographyName);
3126
+ StyleDictionary.registerTransform(resolveMath);
3127
+ StyleDictionary.registerTransform(unitless);
3128
+ StyleDictionary.registerFormat(jsTokens);
3129
+ for (const format of Object.values(formats)) {
3130
+ StyleDictionary.registerFormat(format);
3131
+ }
3132
+ var configs = {
3133
+ colorSchemeVariables,
3134
+ mainColorVariables: colorCategoryVariables({ category: "main" }),
3135
+ supportColorVariables: colorCategoryVariables({ category: "support" }),
3136
+ neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
3137
+ successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
3138
+ dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
3139
+ warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
3140
+ infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
3141
+ typographyVariables,
3142
+ semanticVariables,
3143
+ typescriptTokens
3144
+ };
3145
+ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
3146
+ const { tokensDir, tokenSets } = options;
3147
+ const permutations = getMultidimensionalThemes(processed$themes, dimensions);
3148
+ return permutations.flatMap(({ selectedTokenSets, permutation }) => {
3149
+ const tokenSource = { source: void 0, tokens: {} };
3150
+ if (tokenSets) {
3151
+ for (const tokenSet of selectedTokenSets) {
3152
+ const tokens = tokenSets.get(tokenSet);
3153
+ if (tokens) {
3154
+ const tokensWithFilePath = traverseObj(tokens, (obj) => {
3155
+ if (Object.hasOwn(obj, `$value`) && !obj.filePath) {
3156
+ obj.filePath = tokenSet;
3157
+ }
3158
+ });
3159
+ tokenSource.tokens = R17.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3160
+ }
3161
+ }
3162
+ } else {
3163
+ tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
3164
+ }
3165
+ const configOrConfigs = getConfig(permutation);
3166
+ const configs_ = Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }];
3167
+ const configs2 = configs_.map(({ config, permutationOverrides }) => {
3168
+ return {
3169
+ permutation: { ...permutation, ...permutationOverrides },
3170
+ config: {
3171
+ ...config,
3172
+ /** Use official W3C design token format
3173
+ @see https://v4.styledictionary.com/info/dtcg/
3174
+ @see https://design-tokens.github.io/community-group/format/ */
3175
+ usesDtcg: true,
3176
+ log: {
3177
+ ...config?.log,
3178
+ verbosity: buildOptions?.verbose ? "verbose" : "silent"
3179
+ },
3180
+ ...tokenSource
3181
+ }
3182
+ };
3183
+ });
3184
+ return configs2;
3185
+ }).sort();
3186
+ };
3187
+
3188
+ // src/tokens/process/platform.ts
3189
+ var initResult = {
3190
+ formatted: [],
3191
+ permutation: {
3192
+ "color-scheme": "",
3193
+ "main-color": "",
3194
+ "support-color": "",
3195
+ semantic: "",
3196
+ size: "",
3197
+ theme: "",
3198
+ typography: ""
3199
+ }
3200
+ };
3201
+ var buildOptions;
3202
+ var sd = new StyleDictionary2();
3203
+ var getCustomColors = (processed$themes) => processed$themes.filter(
3204
+ (x) => x.group && [colorCategories.main, colorCategories.support].map((c) => `${c}-color`).includes(x.group)
3205
+ ).map((x) => x.name);
3206
+ var buildConfigs = {
3207
+ typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
3208
+ "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
3209
+ "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
3210
+ "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
3211
+ "neutral-color": {
3212
+ getConfig: configs.neutralColorVariables,
3213
+ dimensions: ["semantic"],
3214
+ log: ({ permutation: { theme } }) => `${theme} - neutral`
3215
+ },
3216
+ "success-color": {
3217
+ getConfig: configs.successColorVariables,
3218
+ dimensions: ["semantic"],
3219
+ log: ({ permutation: { theme } }) => `${theme} - success`
3220
+ },
3221
+ "danger-color": {
3222
+ getConfig: configs.dangerColorVariables,
3223
+ dimensions: ["semantic"],
3224
+ log: ({ permutation: { theme } }) => `${theme} - danger`
3225
+ },
3226
+ "warning-color": {
3227
+ getConfig: configs.warningColorVariables,
3228
+ dimensions: ["semantic"],
3229
+ log: ({ permutation: { theme } }) => `${theme} - warning`
3230
+ },
3231
+ "info-color": {
3232
+ getConfig: configs.infoColorVariables,
3233
+ dimensions: ["semantic"],
3234
+ log: ({ permutation: { theme } }) => `${theme} - info`
3235
+ },
3236
+ semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
3237
+ // storefront: {
3238
+ // name: 'Storefront preview tokens',
3239
+ // getConfig: configs.typescriptTokens,
3240
+ // dimensions: ['color-scheme'],
3241
+ // options: { outPath: path.resolve('../../apps/storefront/tokens') },
3242
+ // enabled: () => buildOptions?.preview ?? false,
3243
+ // },
3244
+ };
3245
+ async function processPlatform(options) {
3246
+ const { process, $themes } = options;
3247
+ const platform = "css";
3248
+ const tokenSets = process === "format" ? options.tokenSets : void 0;
3249
+ const tokensDir = process === "build" ? options.tokensDir : void 0;
3250
+ buildOptions = options;
3251
+ const processed$themes = $themes.map(processThemeObject).filter((theme) => R18.not(theme.group === "size" && theme.name !== "medium"));
3252
+ const customColors = getCustomColors(processed$themes);
3253
+ if (!buildOptions.rootColor) {
3254
+ const firstMainColor = R18.head(customColors);
3255
+ buildOptions.rootColor = firstMainColor;
3256
+ console.log(`Using first main color; ${chalk2.blue(firstMainColor)}, as ${chalk2.green(`":root"`)} color`);
3257
+ }
3258
+ const buildAndSdConfigs = R18.map((buildConfig) => {
3259
+ const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
3260
+ tokensDir,
3261
+ tokenSets
3262
+ });
3263
+ const unknownConfigs = buildConfig.dimensions.map(
3264
+ (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
3265
+ );
3266
+ for (const unknowns of unknownConfigs) {
3267
+ if (unknowns.length === sdConfigs.length) {
3268
+ buildConfig.enabled = () => false;
3269
+ }
3270
+ }
3271
+ return {
3272
+ buildConfig,
3273
+ sdConfigs
3274
+ };
3275
+ }, buildConfigs);
3276
+ const processedBuilds = {
3277
+ "color-scheme": [initResult],
3278
+ "main-color": [initResult],
3279
+ "support-color": [initResult],
3280
+ "neutral-color": [initResult],
3281
+ "success-color": [initResult],
3282
+ "danger-color": [initResult],
3283
+ "warning-color": [initResult],
3284
+ "info-color": [initResult],
3285
+ semantic: [initResult],
3286
+ typography: [initResult],
3287
+ types: [initResult]
3288
+ };
3289
+ try {
3290
+ for (const [buildName, { buildConfig, sdConfigs }] of R18.toPairs(buildAndSdConfigs)) {
3291
+ if (!(buildConfig.enabled?.() ?? true)) {
3292
+ continue;
3293
+ }
3294
+ if (sdConfigs.length > 0) {
3295
+ console.log(`
3296
+ \u{1F371} Building ${chalk2.green(buildConfig.name ?? buildName)}`);
3297
+ const results = await Promise.all(
3298
+ sdConfigs.map(async (sdConfig) => {
3299
+ const { config, permutation } = sdConfig;
3300
+ const modes = ["theme", ...buildConfig.dimensions];
3301
+ const modeMessage = modes.map((x) => permutation[x]).join(" - ");
3302
+ const logMessage = R18.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3303
+ console.log(logMessage);
3304
+ const sdOptions = { cache: true };
3305
+ const sdExtended = await sd.extend(config);
3306
+ const result = {
3307
+ permutation,
3308
+ formatted: await sdExtended.formatPlatform(platform, sdOptions)
3309
+ };
3310
+ return Promise.resolve(result);
3311
+ })
3312
+ );
3313
+ processedBuilds[buildName] = results;
3314
+ }
3315
+ }
3316
+ } catch (err) {
3317
+ if (err instanceof Error) {
3318
+ err.message = err.message.replace('log.verbosity "verbose" or use ', "");
3319
+ }
3320
+ throw err;
3321
+ }
3322
+ const colorsFileName = "colors.d.ts";
3323
+ const reactColorTypes = await createColorTypeDeclaration(customColors);
3324
+ processedBuilds.types = [
3325
+ {
3326
+ ...initResult,
3327
+ formatted: [{ output: reactColorTypes, destination: colorsFileName }]
3328
+ }
3329
+ ];
3330
+ return processedBuilds;
3331
+ }
3332
+ async function createColorTypeDeclaration(colors) {
3333
+ console.log(`
3334
+ \u{1F371} Building ${chalk2.green("type declarations")}`);
3335
+ const typeDeclaration = `
3336
+ import type {} from '@digdir/designsystemet-react/colors';
3337
+
3338
+ declare module '@digdir/designsystemet-react/colors' {
3339
+ export interface MainAndSupportColors {
3340
+ ${colors.map((color) => ` ${color}: never;`).join("\n")}
3341
+ }
3342
+ }
3343
+ `.trimStart();
3344
+ return typeDeclaration;
3345
+ }
3346
+
3347
+ // src/tokens/process/theme.ts
3348
+ import * as R19 from "ramda";
3349
+ import chalk3 from "chalk";
3350
+
3351
+ // package.json
3352
+ var package_default = {
3353
+ name: "@digdir/designsystemet",
3354
+ version: "1.0.5",
3355
+ description: "CLI for Designsystemet",
3356
+ author: "Designsystemet team",
3357
+ engines: {
3358
+ node: ">=22.14.0"
3359
+ },
3360
+ repository: {
3361
+ type: "git",
3362
+ url: "git+https://github.com/digdir/designsystemet.git"
3363
+ },
3364
+ homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
3365
+ license: "MIT",
3366
+ type: "module",
3367
+ main: "./dist/src/index.js",
3368
+ files: [
3369
+ "./dist/**"
3370
+ ],
3371
+ bin: "dist/bin/designsystemet.js",
3372
+ exports: {
3373
+ ".": {
3374
+ import: "./dist/src/index.js"
3375
+ },
3376
+ "./color": {
3377
+ import: "./dist/src/colors/index.js"
3378
+ },
3379
+ "./tokens": {
3380
+ import: "./dist/src/tokens/index.js"
3381
+ }
3382
+ },
3383
+ publishConfig: {
3384
+ access: "public"
3385
+ },
3386
+ scripts: {
3387
+ designsystemet: "tsx ./bin/designsystemet.ts",
3388
+ "build:tokens": "yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
3389
+ "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
3390
+ build: "tsup && yarn build:types && yarn build:json-schema",
3391
+ "build:types": "tsc --emitDeclarationOnly --declaration",
3392
+ "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
3393
+ types: "tsc --noEmit",
3394
+ "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682 -n #003333 -b 99 -o ./test-tokens/options --theme options --clean",
3395
+ "test:tokens-create-config": "yarn designsystemet tokens create --config ./test/test-tokens.config.json",
3396
+ "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
3397
+ "test:tokens-build-config": "yarn designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
3398
+ "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
3399
+ "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build-config",
3400
+ test: "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
3401
+ "internal:tokens-create": "yarn designsystemet tokens create --config ./internal.config.json",
3402
+ "update:template": "tsx ./src/scripts/update-template.ts",
3403
+ "update:design-tokens": "yarn internal:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
3404
+ verify: "yarn test && yarn update:template && yarn update:design-tokens"
3405
+ },
3406
+ dependencies: {
3407
+ "@commander-js/extra-typings": "^13.1.0",
3408
+ "@tokens-studio/sd-transforms": "1.2.12",
3409
+ "apca-w3": "^0.1.9",
3410
+ chalk: "^5.4.1",
3411
+ "change-case": "^5.4.4",
3412
+ "chroma-js": "^3.1.2",
3413
+ commander: "^13.1.0",
3414
+ "fast-glob": "^3.3.3",
3415
+ hsluv: "^1.0.1",
3416
+ "object-hash": "^3.0.0",
3417
+ postcss: "^8.5.3",
3418
+ ramda: "^0.30.1",
3419
+ "style-dictionary": "^4.3.3",
3420
+ zod: "^3.24.2",
3421
+ "zod-validation-error": "^3.4.0"
3422
+ },
3423
+ devDependencies: {
3424
+ "@types/apca-w3": "^0.1.3",
3425
+ "@types/chroma-js": "^3.1.1",
3426
+ "@types/fs-extra": "^11.0.4",
3427
+ "@types/glob": "^8.1.0",
3428
+ "@types/jscodeshift": "^0.12.0",
3429
+ "@types/node": "^22.14.0",
3430
+ "@types/object-hash": "^3.0.6",
3431
+ "@types/ramda": "^0.30.2",
3432
+ "fs-extra": "^11.3.0",
3433
+ "ts-toolbelt": "^9.6.0",
3434
+ tslib: "^2.8.1",
3435
+ tsup: "^8.4.0",
3436
+ tsx: "^4.19.3",
3437
+ typescript: "^5.8.2",
3438
+ "zod-to-json-schema": "^3.24.5"
3439
+ }
3440
+ };
3441
+
3442
+ // src/tokens/process/theme.ts
3443
+ var defaultFileHeader = `build: v${package_default.version}`;
3444
+ var createThemeCSSFiles = ({
3445
+ processedBuilds,
3446
+ fileHeader: fileHeader2 = defaultFileHeader
3447
+ }) => {
3448
+ const groupedByTheme = {};
3449
+ for (const [_, buildResults] of Object.entries(R19.dissoc("types", processedBuilds))) {
3450
+ for (const buildResult of buildResults) {
3451
+ const themeName = buildResult.permutation.theme;
3452
+ const newOutputs = buildResult.formatted;
3453
+ if (R19.isNotEmpty(newOutputs)) {
3454
+ const currentOutputs = groupedByTheme[themeName] ?? [];
3455
+ groupedByTheme[themeName] = R19.concat(currentOutputs, newOutputs);
3456
+ }
3457
+ }
3458
+ }
3459
+ const sortOrder = [
3460
+ "color-scheme/light",
3461
+ "typography/secondary",
3462
+ "semantic",
3463
+ "color-scheme/dark",
3464
+ "color-scheme/contrast",
3465
+ "typography/primary",
3466
+ "color/"
3467
+ ];
3468
+ const sortByDefinedOrder = R19.sortBy((file) => {
3469
+ const filePath = file.destination || "";
3470
+ const sortIndex = sortOrder.findIndex((sortElement) => {
3471
+ if (sortElement.endsWith("/")) {
3472
+ return filePath.includes(sortElement);
3473
+ }
3474
+ return filePath.includes(`${sortElement}.css`);
3475
+ });
3476
+ if (sortIndex === -1) {
3477
+ console.error(
3478
+ chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
3479
+ );
3480
+ console.log(
3481
+ chalk3.dim(
3482
+ `
3483
+ The section will currently be added to the end of the entry file, but the exact
3484
+ order may change due to nondeterminism.`.trim()
3485
+ )
3486
+ );
3487
+ return Infinity;
3488
+ }
3489
+ return sortIndex;
3490
+ });
3491
+ const header = `@charset "UTF-8";
3492
+
3493
+ @layer ds.theme, ds.base, ds.utilities, ds.components;
3494
+
3495
+ /*
3496
+ ${fileHeader2}
3497
+ */
3498
+
3499
+ `;
3500
+ const sortAlphabetically = R19.sort(R19.ascend((x) => x.destination || ""));
3501
+ const pickOutputs = R19.map(R19.view(R19.lensProp("output")));
3502
+ const themeCSSFile = R19.pipe(
3503
+ sortAlphabetically,
3504
+ sortByDefinedOrder,
3505
+ pickOutputs,
3506
+ R19.join("\n"),
3507
+ (content) => header + content
3508
+ );
3509
+ const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
3510
+ destination: `${theme}.css`,
3511
+ output: themeCSSFile(files)
3512
+ }));
3513
+ return themeCSSFiles;
3514
+ };
3515
+
3516
+ // src/tokens/format.ts
3517
+ var formatTokens = async (options) => {
3518
+ const processedBuilds = await processPlatform({
3519
+ process: "format",
3520
+ ...options
3521
+ });
3522
+ return processedBuilds;
3523
+ };
3524
+ var formatTheme = async (themeConfig) => {
3525
+ const { tokenSets } = await createTokens(themeConfig);
3526
+ const $themes = await generate$Themes(["dark", "light"], [themeConfig.name], themeConfig.colors);
3527
+ const processedBuilds = await formatTokens({
3528
+ tokenSets,
3529
+ $themes,
3530
+ verbose: false,
3531
+ preview: false
3532
+ });
3533
+ return processedBuilds;
3534
+ };
3535
+ var formatThemeCSS = async (themeConfig) => {
3536
+ const processedBuilds = await formatTheme(themeConfig);
3537
+ const themeCSSFiles = createThemeCSSFiles({ processedBuilds });
3538
+ return R20.head(themeCSSFiles)?.output ?? "";
3539
+ };
2
3540
  export {
3
3541
  cliOptions,
4
- createTokens
3542
+ createTokens,
3543
+ formatThemeCSS,
3544
+ formatTokens
5
3545
  };