@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,18 +1,4260 @@
1
1
  #!/usr/bin/env node
2
- import fs from "node:fs/promises";
3
- import path from "node:path";
2
+
3
+ // bin/designsystemet.ts
4
+ import path4 from "node:path";
4
5
  import { Argument, createCommand, program } from "@commander-js/extra-typings";
5
- import chalk from "chalk";
6
- import * as R from "ramda";
6
+ import chalk8 from "chalk";
7
+ import * as R25 from "ramda";
7
8
  import { fromError } from "zod-validation-error";
8
- import { convertToHex } from "../src/colors/index.js";
9
- import migrations from "../src/migrations/index.js";
10
- import { buildTokens } from "../src/tokens/build.js";
11
- import { cliOptions, createTokens } from "../src/tokens/create.js";
12
- import { cleanDir } from "../src/tokens/utils.js";
13
- import { writeTokens } from "../src/tokens/write.js";
14
- import { combinedConfigSchema, configFileSchema, mapPathToOptionName } from "./config.js";
15
- import { getCliOption, getDefaultCliOption, getSuppliedCliOption } from "./options.js";
9
+
10
+ // src/colors/utils.ts
11
+ import chroma from "chroma-js";
12
+ import { Hsluv } from "hsluv";
13
+ var getLuminanceFromLightness = (lightness) => {
14
+ const conv = new Hsluv();
15
+ conv.hsluv_l = lightness;
16
+ conv.hsluvToHex();
17
+ return chroma(conv.hex).luminance();
18
+ };
19
+ var getLightnessFromHex = (hex) => {
20
+ const conv = new Hsluv();
21
+ conv.hex = hex;
22
+ conv.hexToHsluv();
23
+ return conv.hsluv_l;
24
+ };
25
+ var convertToHex = (color) => {
26
+ if (!color) {
27
+ return "#000000";
28
+ }
29
+ if (/^#[0-9A-Fa-f]{6}$/.test(color)) {
30
+ return color;
31
+ }
32
+ return chroma(color).hex();
33
+ };
34
+
35
+ // src/colors/theme.ts
36
+ import chroma2 from "chroma-js";
37
+ import * as R2 from "ramda";
38
+
39
+ // src/colors/colorMetadata.ts
40
+ import * as R from "ramda";
41
+ var baseColors = {
42
+ blue: "#0A71C0",
43
+ green: "#068718",
44
+ orange: "#EA9B1B",
45
+ purple: "#663299",
46
+ red: "#C01B1B"
47
+ };
48
+ var colorMetadata = {
49
+ "background-default": {
50
+ number: 1,
51
+ name: "background-default",
52
+ group: "background",
53
+ displayName: "Background Default",
54
+ description: {
55
+ long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
56
+ short: "Standard bakgrunnsfarge."
57
+ },
58
+ luminance: {
59
+ light: 1,
60
+ dark: 9e-3,
61
+ contrast: 1e-3
62
+ }
63
+ },
64
+ "background-tinted": {
65
+ number: 2,
66
+ name: "background-tinted",
67
+ group: "background",
68
+ displayName: "Background Tinted",
69
+ description: {
70
+ long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
71
+ short: "Bakgrunn med et hint av farge i seg."
72
+ },
73
+ luminance: {
74
+ light: 0.9,
75
+ dark: 0.014,
76
+ contrast: 65e-4
77
+ }
78
+ },
79
+ "surface-default": {
80
+ number: 3,
81
+ name: "surface-default",
82
+ group: "surface",
83
+ displayName: "Surface Default",
84
+ description: {
85
+ long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
86
+ short: "Standardfarge for overflater / komponenter."
87
+ },
88
+ luminance: {
89
+ light: 1,
90
+ dark: 0.021,
91
+ contrast: 0.015
92
+ }
93
+ },
94
+ "surface-tinted": {
95
+ number: 4,
96
+ name: "surface-tinted",
97
+ group: "surface",
98
+ displayName: "Surface Tinted",
99
+ description: {
100
+ long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
101
+ short: "Overflater / komponenter med et hint av farge i seg."
102
+ },
103
+ luminance: {
104
+ light: 0.81,
105
+ dark: 0.027,
106
+ contrast: 0.015
107
+ }
108
+ },
109
+ "surface-hover": {
110
+ number: 5,
111
+ name: "surface-hover",
112
+ group: "surface",
113
+ displayName: "Surface Hover",
114
+ description: {
115
+ long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
116
+ short: "Hover-farge til overflater / komponenter."
117
+ },
118
+ luminance: {
119
+ light: 0.7,
120
+ dark: 0.036,
121
+ contrast: 0.028
122
+ }
123
+ },
124
+ "surface-active": {
125
+ number: 6,
126
+ name: "surface-active",
127
+ group: "surface",
128
+ displayName: "Surface Active",
129
+ description: {
130
+ long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
131
+ short: "Active-farge til overflater / komponenter."
132
+ },
133
+ luminance: {
134
+ light: 0.59,
135
+ dark: 0.056,
136
+ contrast: 0.045
137
+ }
138
+ },
139
+ "border-subtle": {
140
+ number: 7,
141
+ name: "border-subtle",
142
+ group: "border",
143
+ displayName: "Border Subtle",
144
+ description: {
145
+ long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
146
+ short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
147
+ },
148
+ luminance: {
149
+ light: 0.5,
150
+ dark: 0.08,
151
+ contrast: 0.26
152
+ }
153
+ },
154
+ "border-default": {
155
+ number: 8,
156
+ name: "border-default",
157
+ group: "border",
158
+ displayName: "Border Default",
159
+ description: {
160
+ long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
161
+ short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
162
+ },
163
+ luminance: {
164
+ light: 0.19,
165
+ dark: 0.22,
166
+ contrast: 0.4
167
+ }
168
+ },
169
+ "border-strong": {
170
+ number: 9,
171
+ name: "border-strong",
172
+ group: "border",
173
+ displayName: "Border Strong",
174
+ description: {
175
+ long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
176
+ short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
177
+ },
178
+ luminance: {
179
+ light: 0.11,
180
+ dark: 0.39,
181
+ contrast: 0.6
182
+ }
183
+ },
184
+ "text-subtle": {
185
+ number: 10,
186
+ name: "text-subtle",
187
+ group: "text",
188
+ displayName: "Text Subtle",
189
+ description: {
190
+ 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.",
191
+ short: "Tekst- og ikonfarge med lavere kontrast."
192
+ },
193
+ luminance: {
194
+ light: 0.11,
195
+ dark: 0.39,
196
+ contrast: 0.57
197
+ }
198
+ },
199
+ "text-default": {
200
+ number: 11,
201
+ name: "text-default",
202
+ group: "text",
203
+ displayName: "Text Default",
204
+ description: {
205
+ 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.",
206
+ short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
207
+ },
208
+ luminance: {
209
+ light: 0.0245,
210
+ dark: 0.84,
211
+ contrast: 0.86
212
+ }
213
+ },
214
+ "base-default": {
215
+ number: 12,
216
+ name: "base-default",
217
+ group: "base",
218
+ displayName: "Base Default",
219
+ description: {
220
+ 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.",
221
+ short: "Standardfarge for solide bakgrunner."
222
+ },
223
+ luminance: {
224
+ light: 1,
225
+ dark: 1,
226
+ contrast: 1
227
+ }
228
+ },
229
+ "base-hover": {
230
+ number: 13,
231
+ name: "base-hover",
232
+ group: "base",
233
+ displayName: "Base Hover",
234
+ description: {
235
+ long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
236
+ short: "Hover-farge for solide bakgrunner."
237
+ },
238
+ luminance: {
239
+ light: 1,
240
+ dark: 1,
241
+ contrast: 1
242
+ }
243
+ },
244
+ "base-active": {
245
+ number: 14,
246
+ name: "base-active",
247
+ group: "base",
248
+ displayName: "Base Active",
249
+ description: {
250
+ long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
251
+ short: "Active-farge for solide bakgrunner."
252
+ },
253
+ luminance: {
254
+ light: 1,
255
+ dark: 1,
256
+ contrast: 1
257
+ }
258
+ },
259
+ "base-contrast-subtle": {
260
+ number: 15,
261
+ name: "base-contrast-subtle",
262
+ group: "base",
263
+ displayName: "Contrast Subtle",
264
+ description: {
265
+ long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
266
+ short: "Farge med god kontrast mot Base-default."
267
+ },
268
+ luminance: {
269
+ light: 1,
270
+ dark: 1,
271
+ contrast: 1
272
+ }
273
+ },
274
+ "base-contrast-default": {
275
+ number: 16,
276
+ name: "base-contrast-default",
277
+ group: "base",
278
+ displayName: "Contrast Default",
279
+ description: {
280
+ long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
281
+ short: "Farge med god kontrast mot Base-default og Base-hover."
282
+ },
283
+ luminance: {
284
+ light: 1,
285
+ dark: 1,
286
+ contrast: 1
287
+ }
288
+ }
289
+ };
290
+ var colorMetadataByNumber = R.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
291
+
292
+ // src/colors/theme.ts
293
+ var RESERVED_COLORS = [
294
+ "neutral",
295
+ "success",
296
+ "warning",
297
+ "danger",
298
+ "info",
299
+ "blue",
300
+ "green",
301
+ "orange",
302
+ "purple",
303
+ "red"
304
+ ];
305
+ var generateColorScale = (color, colorScheme2) => {
306
+ let interpolationColor = color;
307
+ if (colorScheme2 === "dark") {
308
+ const [L, C, H] = chroma2(color).oklch();
309
+ const chromaModifier = 0.7;
310
+ interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
311
+ }
312
+ const colors2 = R2.mapObjIndexed((colorData) => {
313
+ const luminance = colorData.luminance[colorScheme2];
314
+ return {
315
+ ...colorData,
316
+ hex: chroma2(interpolationColor).luminance(luminance).hex()
317
+ };
318
+ }, colorMetadata);
319
+ const baseColors2 = generateBaseColors(color, colorScheme2);
320
+ colors2["base-default"] = { ...colors2["base-default"], hex: baseColors2.default };
321
+ colors2["base-hover"] = { ...colors2["base-hover"], hex: baseColors2.hover };
322
+ colors2["base-active"] = { ...colors2["base-active"], hex: baseColors2.active };
323
+ colors2["base-contrast-subtle"] = {
324
+ ...colors2["base-contrast-subtle"],
325
+ hex: generateColorContrast(baseColors2.default, "subtle")
326
+ };
327
+ colors2["base-contrast-default"] = {
328
+ ...colors2["base-contrast-default"],
329
+ hex: generateColorContrast(baseColors2.default, "default")
330
+ };
331
+ return Object.values(colors2);
332
+ };
333
+ var generateBaseColors = (color, colorScheme2) => {
334
+ let colorLightness = getLightnessFromHex(color);
335
+ if (colorScheme2 !== "light") {
336
+ colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
337
+ }
338
+ const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
339
+ const calculateLightness = (base, mod) => base - mod;
340
+ return {
341
+ default: colorScheme2 === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
342
+ hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
343
+ active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
344
+ };
345
+ };
346
+ var generateColorContrast = (color, type) => {
347
+ if (type === "default") {
348
+ return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
349
+ }
350
+ if (type === "subtle") {
351
+ const contrastWhite = chroma2.contrast(color, "#ffffff");
352
+ const contrastBlack = chroma2.contrast(color, "#000000");
353
+ const lightness = getLightnessFromHex(color);
354
+ const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
355
+ const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
356
+ return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
357
+ }
358
+ return color;
359
+ };
360
+
361
+ // src/config.ts
362
+ import * as R7 from "ramda";
363
+ import { z } from "zod";
364
+
365
+ // src/tokens/create/defaults.ts
366
+ import * as R3 from "ramda";
367
+
368
+ // src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
369
+ var globals_default = {
370
+ "border-width": {
371
+ "1": {
372
+ $type: "borderWidth",
373
+ $value: "1px"
374
+ },
375
+ "3": {
376
+ $type: "borderWidth",
377
+ $value: "3px"
378
+ }
379
+ },
380
+ shadow: {
381
+ "100": {
382
+ $type: "boxShadow",
383
+ $value: [
384
+ {
385
+ color: "rgba(0,0,0,0.16)",
386
+ x: "0",
387
+ y: "0",
388
+ blur: "1",
389
+ spread: "0"
390
+ },
391
+ {
392
+ x: "0",
393
+ y: "1",
394
+ blur: "2",
395
+ spread: "0",
396
+ color: "rgba(0,0,0,0.12)"
397
+ }
398
+ ]
399
+ },
400
+ "200": {
401
+ $type: "boxShadow",
402
+ $value: [
403
+ {
404
+ color: "rgba(0,0,0,0.15)",
405
+ x: "0",
406
+ y: "0",
407
+ blur: "1",
408
+ spread: "0"
409
+ },
410
+ {
411
+ color: "rgba(0,0,0,0.12)",
412
+ x: "0",
413
+ y: "1",
414
+ blur: "2",
415
+ spread: "0"
416
+ },
417
+ {
418
+ x: "0",
419
+ y: "2",
420
+ blur: "4",
421
+ spread: "0",
422
+ color: "rgba(0,0,0,0.1)"
423
+ }
424
+ ]
425
+ },
426
+ "300": {
427
+ $type: "boxShadow",
428
+ $value: [
429
+ {
430
+ color: "rgba(0,0,0,0.14)",
431
+ x: "0",
432
+ y: "0",
433
+ blur: "1",
434
+ spread: "0"
435
+ },
436
+ {
437
+ color: "rgba(0,0,0,0.12)",
438
+ x: "0",
439
+ y: "2",
440
+ blur: "4",
441
+ spread: "0"
442
+ },
443
+ {
444
+ x: "0",
445
+ y: "4",
446
+ blur: "8",
447
+ spread: "0",
448
+ color: "rgba(0,0,0,0.12)"
449
+ }
450
+ ]
451
+ },
452
+ "400": {
453
+ $type: "boxShadow",
454
+ $value: [
455
+ {
456
+ color: "rgba(0,0,0,0.13)",
457
+ x: "0",
458
+ y: "0",
459
+ blur: "1",
460
+ spread: "0"
461
+ },
462
+ {
463
+ color: "rgba(0,0,0,0.13)",
464
+ x: "0",
465
+ y: "3",
466
+ blur: "5",
467
+ spread: "0"
468
+ },
469
+ {
470
+ x: "0",
471
+ y: "6",
472
+ blur: "12",
473
+ spread: "0",
474
+ color: "rgba(0,0,0,0.14)"
475
+ }
476
+ ]
477
+ },
478
+ "500": {
479
+ $type: "boxShadow",
480
+ $value: [
481
+ {
482
+ color: "rgba(0,0,0,0.12)",
483
+ x: "0",
484
+ y: "0",
485
+ blur: "1",
486
+ spread: "0"
487
+ },
488
+ {
489
+ color: "rgba(0,0,0,0.16)",
490
+ x: "0",
491
+ y: "4",
492
+ blur: "8",
493
+ spread: "0"
494
+ },
495
+ {
496
+ x: "0",
497
+ y: "12",
498
+ blur: "24",
499
+ spread: "0",
500
+ color: "rgba(0,0,0,0.16)"
501
+ }
502
+ ]
503
+ }
504
+ },
505
+ opacity: {
506
+ "30": {
507
+ $type: "opacity",
508
+ $value: "30%"
509
+ }
510
+ }
511
+ };
512
+
513
+ // src/tokens/template/design-tokens/primitives/modes/size/global.json with { type: 'json' }
514
+ var global_default = {
515
+ _size: {
516
+ "0": {
517
+ $type: "dimension",
518
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *0)"
519
+ },
520
+ "1": {
521
+ $type: "dimension",
522
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *1)"
523
+ },
524
+ "2": {
525
+ $type: "dimension",
526
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *2)"
527
+ },
528
+ "3": {
529
+ $type: "dimension",
530
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *3)"
531
+ },
532
+ "4": {
533
+ $type: "dimension",
534
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *4)"
535
+ },
536
+ "5": {
537
+ $type: "dimension",
538
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *5)"
539
+ },
540
+ "6": {
541
+ $type: "dimension",
542
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *6)"
543
+ },
544
+ "7": {
545
+ $type: "dimension",
546
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *7)"
547
+ },
548
+ "8": {
549
+ $type: "dimension",
550
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *8)"
551
+ },
552
+ "9": {
553
+ $type: "dimension",
554
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *9)"
555
+ },
556
+ "10": {
557
+ $type: "dimension",
558
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *10)"
559
+ },
560
+ "11": {
561
+ $type: "dimension",
562
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *11)"
563
+ },
564
+ "12": {
565
+ $type: "dimension",
566
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *12)"
567
+ },
568
+ "13": {
569
+ $type: "dimension",
570
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *13)"
571
+ },
572
+ "14": {
573
+ $type: "dimension",
574
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *14)"
575
+ },
576
+ "15": {
577
+ $type: "dimension",
578
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *15)"
579
+ },
580
+ "18": {
581
+ $type: "dimension",
582
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *18)"
583
+ },
584
+ "22": {
585
+ $type: "dimension",
586
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *22)"
587
+ },
588
+ "26": {
589
+ $type: "dimension",
590
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *26)"
591
+ },
592
+ "30": {
593
+ $type: "dimension",
594
+ $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *30)"
595
+ },
596
+ "mode-font-size": {
597
+ $type: "dimension",
598
+ $value: "{size._mode-font-size}"
599
+ },
600
+ base: {
601
+ $type: "dimension",
602
+ $value: "{size._base}"
603
+ },
604
+ step: {
605
+ $type: "dimension",
606
+ $value: "{size._step}"
607
+ }
608
+ }
609
+ };
610
+
611
+ // src/tokens/template/design-tokens/primitives/modes/size/large.json with { type: 'json' }
612
+ var large_default = {
613
+ size: {
614
+ "_mode-font-size": {
615
+ $type: "dimension",
616
+ $value: "21"
617
+ },
618
+ _base: {
619
+ $type: "dimension",
620
+ $value: "18"
621
+ },
622
+ _step: {
623
+ $type: "dimension",
624
+ $value: "4"
625
+ }
626
+ }
627
+ };
628
+
629
+ // src/tokens/template/design-tokens/primitives/modes/size/medium.json with { type: 'json' }
630
+ var medium_default = {
631
+ size: {
632
+ "_mode-font-size": {
633
+ $type: "dimension",
634
+ $value: "18"
635
+ },
636
+ _base: {
637
+ $type: "dimension",
638
+ $value: "18"
639
+ },
640
+ _step: {
641
+ $type: "dimension",
642
+ $value: "4"
643
+ }
644
+ }
645
+ };
646
+
647
+ // src/tokens/template/design-tokens/primitives/modes/size/small.json with { type: 'json' }
648
+ var small_default = {
649
+ size: {
650
+ "_mode-font-size": {
651
+ $type: "dimension",
652
+ $value: "16"
653
+ },
654
+ _base: {
655
+ $type: "dimension",
656
+ $value: "18"
657
+ },
658
+ _step: {
659
+ $type: "dimension",
660
+ $value: "4"
661
+ }
662
+ }
663
+ };
664
+
665
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/large.json with { type: 'json' }
666
+ var large_default2 = {
667
+ "line-height": {
668
+ sm: {
669
+ $type: "lineHeights",
670
+ $value: "130%"
671
+ },
672
+ md: {
673
+ $type: "lineHeights",
674
+ $value: "150%"
675
+ },
676
+ lg: {
677
+ $type: "lineHeights",
678
+ $value: "170%"
679
+ }
680
+ },
681
+ "font-size": {
682
+ "1": {
683
+ $type: "fontSizes",
684
+ $value: "13"
685
+ },
686
+ "2": {
687
+ $type: "fontSizes",
688
+ $value: "16"
689
+ },
690
+ "3": {
691
+ $type: "fontSizes",
692
+ $value: "18"
693
+ },
694
+ "4": {
695
+ $type: "fontSizes",
696
+ $value: "21"
697
+ },
698
+ "5": {
699
+ $type: "fontSizes",
700
+ $value: "24"
701
+ },
702
+ "6": {
703
+ $type: "fontSizes",
704
+ $value: "30"
705
+ },
706
+ "7": {
707
+ $type: "fontSizes",
708
+ $value: "36"
709
+ },
710
+ "8": {
711
+ $type: "fontSizes",
712
+ $value: "48"
713
+ },
714
+ "9": {
715
+ $type: "fontSizes",
716
+ $value: "60"
717
+ },
718
+ "10": {
719
+ $type: "fontSizes",
720
+ $value: "72"
721
+ }
722
+ },
723
+ "letter-spacing": {
724
+ "1": {
725
+ $type: "letterSpacing",
726
+ $value: "-1%"
727
+ },
728
+ "2": {
729
+ $type: "letterSpacing",
730
+ $value: "-0.5%"
731
+ },
732
+ "3": {
733
+ $type: "letterSpacing",
734
+ $value: "-0.25%"
735
+ },
736
+ "4": {
737
+ $type: "letterSpacing",
738
+ $value: "-0.15%"
739
+ },
740
+ "5": {
741
+ $type: "letterSpacing",
742
+ $value: "0%"
743
+ },
744
+ "6": {
745
+ $type: "letterSpacing",
746
+ $value: "0.15%"
747
+ },
748
+ "7": {
749
+ $type: "letterSpacing",
750
+ $value: "0.25%"
751
+ },
752
+ "8": {
753
+ $type: "letterSpacing",
754
+ $value: "0.5%"
755
+ },
756
+ "9": {
757
+ $type: "letterSpacing",
758
+ $value: "1.5%"
759
+ }
760
+ }
761
+ };
762
+
763
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json with { type: 'json' }
764
+ var medium_default2 = {
765
+ "line-height": {
766
+ sm: {
767
+ $type: "lineHeights",
768
+ $value: "130%"
769
+ },
770
+ md: {
771
+ $type: "lineHeights",
772
+ $value: "150%"
773
+ },
774
+ lg: {
775
+ $type: "lineHeights",
776
+ $value: "170%"
777
+ }
778
+ },
779
+ "font-size": {
780
+ "1": {
781
+ $type: "fontSizes",
782
+ $value: "12"
783
+ },
784
+ "2": {
785
+ $type: "fontSizes",
786
+ $value: "14"
787
+ },
788
+ "3": {
789
+ $type: "fontSizes",
790
+ $value: "16"
791
+ },
792
+ "4": {
793
+ $type: "fontSizes",
794
+ $value: "18"
795
+ },
796
+ "5": {
797
+ $type: "fontSizes",
798
+ $value: "21"
799
+ },
800
+ "6": {
801
+ $type: "fontSizes",
802
+ $value: "24"
803
+ },
804
+ "7": {
805
+ $type: "fontSizes",
806
+ $value: "30"
807
+ },
808
+ "8": {
809
+ $type: "fontSizes",
810
+ $value: "36"
811
+ },
812
+ "9": {
813
+ $type: "fontSizes",
814
+ $value: "48"
815
+ },
816
+ "10": {
817
+ $type: "fontSizes",
818
+ $value: "60"
819
+ }
820
+ },
821
+ "letter-spacing": {
822
+ "1": {
823
+ $type: "letterSpacing",
824
+ $value: "-1%"
825
+ },
826
+ "2": {
827
+ $type: "letterSpacing",
828
+ $value: "-0.5%"
829
+ },
830
+ "3": {
831
+ $type: "letterSpacing",
832
+ $value: "-0.25%"
833
+ },
834
+ "4": {
835
+ $type: "letterSpacing",
836
+ $value: "-0.15%"
837
+ },
838
+ "5": {
839
+ $type: "letterSpacing",
840
+ $value: "0%"
841
+ },
842
+ "6": {
843
+ $type: "letterSpacing",
844
+ $value: "0.15%"
845
+ },
846
+ "7": {
847
+ $type: "letterSpacing",
848
+ $value: "0.25%"
849
+ },
850
+ "8": {
851
+ $type: "letterSpacing",
852
+ $value: "0.5%"
853
+ },
854
+ "9": {
855
+ $type: "letterSpacing",
856
+ $value: "1.5%"
857
+ }
858
+ }
859
+ };
860
+
861
+ // src/tokens/template/design-tokens/primitives/modes/typography/size/small.json with { type: 'json' }
862
+ var small_default2 = {
863
+ "line-height": {
864
+ sm: {
865
+ $type: "lineHeights",
866
+ $value: "130%"
867
+ },
868
+ md: {
869
+ $type: "lineHeights",
870
+ $value: "150%"
871
+ },
872
+ lg: {
873
+ $type: "lineHeights",
874
+ $value: "170%"
875
+ }
876
+ },
877
+ "font-size": {
878
+ "1": {
879
+ $type: "fontSizes",
880
+ $value: "11"
881
+ },
882
+ "2": {
883
+ $type: "fontSizes",
884
+ $value: "13"
885
+ },
886
+ "3": {
887
+ $type: "fontSizes",
888
+ $value: "14"
889
+ },
890
+ "4": {
891
+ $type: "fontSizes",
892
+ $value: "16"
893
+ },
894
+ "5": {
895
+ $type: "fontSizes",
896
+ $value: "18"
897
+ },
898
+ "6": {
899
+ $type: "fontSizes",
900
+ $value: "21"
901
+ },
902
+ "7": {
903
+ $type: "fontSizes",
904
+ $value: "24"
905
+ },
906
+ "8": {
907
+ $type: "fontSizes",
908
+ $value: "30"
909
+ },
910
+ "9": {
911
+ $type: "fontSizes",
912
+ $value: "36"
913
+ },
914
+ "10": {
915
+ $type: "fontSizes",
916
+ $value: "48"
917
+ }
918
+ },
919
+ "letter-spacing": {
920
+ "1": {
921
+ $type: "letterSpacing",
922
+ $value: "-1%"
923
+ },
924
+ "2": {
925
+ $type: "letterSpacing",
926
+ $value: "-0.5%"
927
+ },
928
+ "3": {
929
+ $type: "letterSpacing",
930
+ $value: "-0.25%"
931
+ },
932
+ "4": {
933
+ $type: "letterSpacing",
934
+ $value: "-0.15%"
935
+ },
936
+ "5": {
937
+ $type: "letterSpacing",
938
+ $value: "0%"
939
+ },
940
+ "6": {
941
+ $type: "letterSpacing",
942
+ $value: "0.15%"
943
+ },
944
+ "7": {
945
+ $type: "letterSpacing",
946
+ $value: "0.25%"
947
+ },
948
+ "8": {
949
+ $type: "letterSpacing",
950
+ $value: "0.5%"
951
+ },
952
+ "9": {
953
+ $type: "letterSpacing",
954
+ $value: "1.5%"
955
+ }
956
+ }
957
+ };
958
+
959
+ // src/tokens/template/design-tokens/semantic/style.json with { type: 'json' }
960
+ var style_default = {
961
+ typography: {
962
+ heading: {
963
+ "2xl": {
964
+ $type: "typography",
965
+ $value: {
966
+ fontFamily: "{font-family}",
967
+ fontWeight: "{font-weight.medium}",
968
+ lineHeight: "{line-height.sm}",
969
+ fontSize: "{font-size.10}",
970
+ letterSpacing: "{letter-spacing.1}"
971
+ }
972
+ },
973
+ xl: {
974
+ $type: "typography",
975
+ $value: {
976
+ fontFamily: "{font-family}",
977
+ fontWeight: "{font-weight.medium}",
978
+ lineHeight: "{line-height.sm}",
979
+ fontSize: "{font-size.9}",
980
+ letterSpacing: "{letter-spacing.1}"
981
+ }
982
+ },
983
+ lg: {
984
+ $type: "typography",
985
+ $value: {
986
+ fontFamily: "{font-family}",
987
+ fontWeight: "{font-weight.medium}",
988
+ lineHeight: "{line-height.sm}",
989
+ fontSize: "{font-size.8}",
990
+ letterSpacing: "{letter-spacing.2}"
991
+ }
992
+ },
993
+ md: {
994
+ $type: "typography",
995
+ $value: {
996
+ fontFamily: "{font-family}",
997
+ fontWeight: "{font-weight.medium}",
998
+ lineHeight: "{line-height.sm}",
999
+ fontSize: "{font-size.7}",
1000
+ letterSpacing: "{letter-spacing.3}"
1001
+ }
1002
+ },
1003
+ sm: {
1004
+ $type: "typography",
1005
+ $value: {
1006
+ fontFamily: "{font-family}",
1007
+ fontWeight: "{font-weight.medium}",
1008
+ lineHeight: "{line-height.sm}",
1009
+ fontSize: "{font-size.6}",
1010
+ letterSpacing: "{letter-spacing.5}"
1011
+ }
1012
+ },
1013
+ xs: {
1014
+ $type: "typography",
1015
+ $value: {
1016
+ fontFamily: "{font-family}",
1017
+ fontWeight: "{font-weight.medium}",
1018
+ lineHeight: "{line-height.sm}",
1019
+ fontSize: "{font-size.5}",
1020
+ letterSpacing: "{letter-spacing.6}"
1021
+ }
1022
+ },
1023
+ "2xs": {
1024
+ $type: "typography",
1025
+ $value: {
1026
+ fontFamily: "{font-family}",
1027
+ fontWeight: "{font-weight.medium}",
1028
+ lineHeight: "{line-height.sm}",
1029
+ fontSize: "{font-size.4}",
1030
+ letterSpacing: "{letter-spacing.6}"
1031
+ }
1032
+ }
1033
+ },
1034
+ body: {
1035
+ xl: {
1036
+ $type: "typography",
1037
+ $value: {
1038
+ fontFamily: "{font-family}",
1039
+ fontWeight: "{font-weight.regular}",
1040
+ lineHeight: "{line-height.md}",
1041
+ fontSize: "{font-size.6}",
1042
+ letterSpacing: "{letter-spacing.8}"
1043
+ }
1044
+ },
1045
+ lg: {
1046
+ $type: "typography",
1047
+ $value: {
1048
+ fontFamily: "{font-family}",
1049
+ fontWeight: "{font-weight.regular}",
1050
+ lineHeight: "{line-height.md}",
1051
+ fontSize: "{font-size.5}",
1052
+ letterSpacing: "{letter-spacing.8}"
1053
+ }
1054
+ },
1055
+ md: {
1056
+ $type: "typography",
1057
+ $value: {
1058
+ fontFamily: "{font-family}",
1059
+ fontWeight: "{font-weight.regular}",
1060
+ lineHeight: "{line-height.md}",
1061
+ fontSize: "{font-size.4}",
1062
+ letterSpacing: "{letter-spacing.8}"
1063
+ }
1064
+ },
1065
+ sm: {
1066
+ $type: "typography",
1067
+ $value: {
1068
+ fontFamily: "{font-family}",
1069
+ fontWeight: "{font-weight.regular}",
1070
+ lineHeight: "{line-height.md}",
1071
+ fontSize: "{font-size.3}",
1072
+ letterSpacing: "{letter-spacing.7}"
1073
+ }
1074
+ },
1075
+ xs: {
1076
+ $type: "typography",
1077
+ $value: {
1078
+ fontFamily: "{font-family}",
1079
+ fontWeight: "{font-weight.regular}",
1080
+ lineHeight: "{line-height.md}",
1081
+ fontSize: "{font-size.2}",
1082
+ letterSpacing: "{letter-spacing.6}"
1083
+ }
1084
+ },
1085
+ short: {
1086
+ xl: {
1087
+ $type: "typography",
1088
+ $value: {
1089
+ fontFamily: "{font-family}",
1090
+ fontWeight: "{font-weight.regular}",
1091
+ lineHeight: "{line-height.sm}",
1092
+ fontSize: "{font-size.6}",
1093
+ letterSpacing: "{letter-spacing.8}"
1094
+ }
1095
+ },
1096
+ lg: {
1097
+ $type: "typography",
1098
+ $value: {
1099
+ fontFamily: "{font-family}",
1100
+ fontWeight: "{font-weight.regular}",
1101
+ lineHeight: "{line-height.sm}",
1102
+ fontSize: "{font-size.5}",
1103
+ letterSpacing: "{letter-spacing.8}"
1104
+ }
1105
+ },
1106
+ md: {
1107
+ $type: "typography",
1108
+ $value: {
1109
+ fontFamily: "{font-family}",
1110
+ fontWeight: "{font-weight.regular}",
1111
+ lineHeight: "{line-height.sm}",
1112
+ fontSize: "{font-size.4}",
1113
+ letterSpacing: "{letter-spacing.8}"
1114
+ }
1115
+ },
1116
+ sm: {
1117
+ $type: "typography",
1118
+ $value: {
1119
+ fontFamily: "{font-family}",
1120
+ fontWeight: "{font-weight.regular}",
1121
+ lineHeight: "{line-height.sm}",
1122
+ fontSize: "{font-size.3}",
1123
+ letterSpacing: "{letter-spacing.7}"
1124
+ }
1125
+ },
1126
+ xs: {
1127
+ $type: "typography",
1128
+ $value: {
1129
+ fontFamily: "{font-family}",
1130
+ fontWeight: "{font-weight.regular}",
1131
+ lineHeight: "{line-height.sm}",
1132
+ fontSize: "{font-size.2}",
1133
+ letterSpacing: "{letter-spacing.6}"
1134
+ }
1135
+ }
1136
+ },
1137
+ long: {
1138
+ xl: {
1139
+ $type: "typography",
1140
+ $value: {
1141
+ fontFamily: "{font-family}",
1142
+ fontWeight: "{font-weight.regular}",
1143
+ lineHeight: "{line-height.lg}",
1144
+ fontSize: "{font-size.6}",
1145
+ letterSpacing: "{letter-spacing.8}"
1146
+ }
1147
+ },
1148
+ lg: {
1149
+ $type: "typography",
1150
+ $value: {
1151
+ fontFamily: "{font-family}",
1152
+ fontWeight: "{font-weight.regular}",
1153
+ lineHeight: "{line-height.lg}",
1154
+ fontSize: "{font-size.5}",
1155
+ letterSpacing: "{letter-spacing.8}"
1156
+ }
1157
+ },
1158
+ md: {
1159
+ $type: "typography",
1160
+ $value: {
1161
+ fontFamily: "{font-family}",
1162
+ fontWeight: "{font-weight.regular}",
1163
+ lineHeight: "{line-height.lg}",
1164
+ fontSize: "{font-size.4}",
1165
+ letterSpacing: "{letter-spacing.8}"
1166
+ }
1167
+ },
1168
+ sm: {
1169
+ $type: "typography",
1170
+ $value: {
1171
+ fontFamily: "{font-family}",
1172
+ fontWeight: "{font-weight.regular}",
1173
+ lineHeight: "{line-height.lg}",
1174
+ fontSize: "{font-size.3}",
1175
+ letterSpacing: "{letter-spacing.7}"
1176
+ }
1177
+ },
1178
+ xs: {
1179
+ $type: "typography",
1180
+ $value: {
1181
+ fontFamily: "{font-family}",
1182
+ fontWeight: "{font-weight.regular}",
1183
+ lineHeight: "{line-height.lg}",
1184
+ fontSize: "{font-size.2}",
1185
+ letterSpacing: "{letter-spacing.6}"
1186
+ }
1187
+ }
1188
+ }
1189
+ }
1190
+ },
1191
+ opacity: {
1192
+ disabled: {
1193
+ $type: "opacity",
1194
+ $value: "{opacity.30}"
1195
+ }
1196
+ },
1197
+ "border-width": {
1198
+ default: {
1199
+ $type: "borderWidth",
1200
+ $value: "{border-width.1}"
1201
+ },
1202
+ focus: {
1203
+ $type: "borderWidth",
1204
+ $value: "{border-width.3}"
1205
+ }
1206
+ },
1207
+ shadow: {
1208
+ xs: {
1209
+ $type: "boxShadow",
1210
+ $value: "{shadow.100}"
1211
+ },
1212
+ sm: {
1213
+ $type: "boxShadow",
1214
+ $value: "{shadow.200}"
1215
+ },
1216
+ md: {
1217
+ $type: "boxShadow",
1218
+ $value: "{shadow.300}"
1219
+ },
1220
+ lg: {
1221
+ $type: "boxShadow",
1222
+ $value: "{shadow.400}"
1223
+ },
1224
+ xl: {
1225
+ $type: "boxShadow",
1226
+ $value: "{shadow.500}"
1227
+ }
1228
+ },
1229
+ "border-radius": {
1230
+ sm: {
1231
+ $type: "dimension",
1232
+ $value: "{border-radius.1}"
1233
+ },
1234
+ md: {
1235
+ $type: "dimension",
1236
+ $value: "{border-radius.2}"
1237
+ },
1238
+ lg: {
1239
+ $type: "dimension",
1240
+ $value: "{border-radius.3}"
1241
+ },
1242
+ xl: {
1243
+ $type: "dimension",
1244
+ $value: "{border-radius.4}"
1245
+ },
1246
+ default: {
1247
+ $type: "dimension",
1248
+ $value: "{border-radius.5}"
1249
+ },
1250
+ full: {
1251
+ $type: "dimension",
1252
+ $value: "{border-radius.6}"
1253
+ }
1254
+ },
1255
+ size: {
1256
+ "0": {
1257
+ $type: "dimension",
1258
+ $value: "{_size.0}"
1259
+ },
1260
+ "1": {
1261
+ $type: "dimension",
1262
+ $value: "{_size.1}"
1263
+ },
1264
+ "2": {
1265
+ $type: "dimension",
1266
+ $value: "{_size.2}"
1267
+ },
1268
+ "3": {
1269
+ $type: "dimension",
1270
+ $value: "{_size.3}"
1271
+ },
1272
+ "4": {
1273
+ $type: "dimension",
1274
+ $value: "{_size.4}"
1275
+ },
1276
+ "5": {
1277
+ $type: "dimension",
1278
+ $value: "{_size.5}"
1279
+ },
1280
+ "6": {
1281
+ $type: "dimension",
1282
+ $value: "{_size.6}"
1283
+ },
1284
+ "7": {
1285
+ $type: "dimension",
1286
+ $value: "{_size.7}"
1287
+ },
1288
+ "8": {
1289
+ $type: "dimension",
1290
+ $value: "{_size.8}"
1291
+ },
1292
+ "9": {
1293
+ $type: "dimension",
1294
+ $value: "{_size.9}"
1295
+ },
1296
+ "10": {
1297
+ $type: "dimension",
1298
+ $value: "{_size.10}"
1299
+ },
1300
+ "11": {
1301
+ $type: "dimension",
1302
+ $value: "{_size.11}"
1303
+ },
1304
+ "12": {
1305
+ $type: "dimension",
1306
+ $value: "{_size.12}"
1307
+ },
1308
+ "13": {
1309
+ $type: "dimension",
1310
+ $value: "{_size.13}"
1311
+ },
1312
+ "14": {
1313
+ $type: "dimension",
1314
+ $value: "{_size.14}"
1315
+ },
1316
+ "15": {
1317
+ $type: "dimension",
1318
+ $value: "{_size.15}"
1319
+ },
1320
+ "18": {
1321
+ $type: "dimension",
1322
+ $value: "{_size.18}"
1323
+ },
1324
+ "22": {
1325
+ $type: "dimension",
1326
+ $value: "{_size.22}"
1327
+ },
1328
+ "26": {
1329
+ $type: "dimension",
1330
+ $value: "{_size.26}"
1331
+ },
1332
+ "30": {
1333
+ $type: "dimension",
1334
+ $value: "{_size.30}"
1335
+ }
1336
+ }
1337
+ };
1338
+
1339
+ // src/tokens/create/defaults.ts
1340
+ var defaultTokens = {
1341
+ "primitives/globals": globals_default,
1342
+ "primitives/modes/size/small": small_default,
1343
+ "primitives/modes/size/medium": medium_default,
1344
+ "primitives/modes/size/large": large_default,
1345
+ "primitives/modes/size/global": global_default,
1346
+ "primitives/modes/typography/size/small": small_default2,
1347
+ "primitives/modes/typography/size/medium": medium_default2,
1348
+ "primitives/modes/typography/size/large": large_default2,
1349
+ "semantic/style": style_default
1350
+ };
1351
+ var getDefaultTokens = (tokenSets) => Object.entries(R3.pick(tokenSets, defaultTokens));
1352
+ var getDefaultToken = (tokenPath) => {
1353
+ return [tokenPath, defaultTokens[tokenPath]];
1354
+ };
1355
+
1356
+ // src/tokens/create/generators/color.ts
1357
+ import * as R4 from "ramda";
1358
+ var generateColor = (colorArray) => {
1359
+ const obj = {};
1360
+ const $type = "color";
1361
+ for (const index in colorArray) {
1362
+ obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
1363
+ }
1364
+ return obj;
1365
+ };
1366
+ var generateColorScheme = (themeName, colorScheme2, colors2) => {
1367
+ const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.main);
1368
+ const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme2)), colors2.support);
1369
+ const neutral = generateColor(generateColorScale(colors2.neutral, colorScheme2));
1370
+ return {
1371
+ [themeName]: {
1372
+ ...main,
1373
+ ...support,
1374
+ neutral
1375
+ }
1376
+ };
1377
+ };
1378
+ var generateColorGlobal = (colorScheme2) => {
1379
+ const blueScale = generateColorScale(baseColors.blue, colorScheme2);
1380
+ const greenScale = generateColorScale(baseColors.green, colorScheme2);
1381
+ const orangeScale = generateColorScale(baseColors.orange, colorScheme2);
1382
+ const purpleScale = generateColorScale(baseColors.purple, colorScheme2);
1383
+ const redScale = generateColorScale(baseColors.red, colorScheme2);
1384
+ return {
1385
+ global: {
1386
+ blue: generateColor(blueScale),
1387
+ green: generateColor(greenScale),
1388
+ orange: generateColor(orangeScale),
1389
+ purple: generateColor(purpleScale),
1390
+ red: generateColor(redScale)
1391
+ }
1392
+ };
1393
+ };
1394
+
1395
+ // src/tokens/create/generators/semantic.ts
1396
+ import * as R5 from "ramda";
1397
+
1398
+ // src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
1399
+ var color_base_template_default = {
1400
+ color: {
1401
+ success: {
1402
+ "background-default": {
1403
+ $type: "color",
1404
+ $value: "{global.green.1}"
1405
+ },
1406
+ "background-tinted": {
1407
+ $type: "color",
1408
+ $value: "{global.green.2}"
1409
+ },
1410
+ "surface-default": {
1411
+ $type: "color",
1412
+ $value: "{global.green.3}"
1413
+ },
1414
+ "surface-tinted": {
1415
+ $type: "color",
1416
+ $value: "{global.green.4}"
1417
+ },
1418
+ "surface-hover": {
1419
+ $type: "color",
1420
+ $value: "{global.green.5}"
1421
+ },
1422
+ "surface-active": {
1423
+ $type: "color",
1424
+ $value: "{global.green.6}"
1425
+ },
1426
+ "border-subtle": {
1427
+ $type: "color",
1428
+ $value: "{global.green.7}"
1429
+ },
1430
+ "border-default": {
1431
+ $type: "color",
1432
+ $value: "{global.green.8}"
1433
+ },
1434
+ "border-strong": {
1435
+ $type: "color",
1436
+ $value: "{global.green.9}"
1437
+ },
1438
+ "text-subtle": {
1439
+ $type: "color",
1440
+ $value: "{global.green.10}"
1441
+ },
1442
+ "text-default": {
1443
+ $type: "color",
1444
+ $value: "{global.green.11}"
1445
+ },
1446
+ "base-default": {
1447
+ $type: "color",
1448
+ $value: "{global.green.12}"
1449
+ },
1450
+ "base-hover": {
1451
+ $type: "color",
1452
+ $value: "{global.green.13}"
1453
+ },
1454
+ "base-active": {
1455
+ $type: "color",
1456
+ $value: "{global.green.14}"
1457
+ },
1458
+ "base-contrast-subtle": {
1459
+ $type: "color",
1460
+ $value: "{global.green.15}"
1461
+ },
1462
+ "base-contrast-default": {
1463
+ $type: "color",
1464
+ $value: "{global.green.16}"
1465
+ }
1466
+ },
1467
+ danger: {
1468
+ "background-default": {
1469
+ $type: "color",
1470
+ $value: "{global.red.1}"
1471
+ },
1472
+ "background-tinted": {
1473
+ $type: "color",
1474
+ $value: "{global.red.2}"
1475
+ },
1476
+ "surface-default": {
1477
+ $type: "color",
1478
+ $value: "{global.red.3}"
1479
+ },
1480
+ "surface-tinted": {
1481
+ $type: "color",
1482
+ $value: "{global.red.4}"
1483
+ },
1484
+ "surface-hover": {
1485
+ $type: "color",
1486
+ $value: "{global.red.5}"
1487
+ },
1488
+ "surface-active": {
1489
+ $type: "color",
1490
+ $value: "{global.red.6}"
1491
+ },
1492
+ "border-subtle": {
1493
+ $type: "color",
1494
+ $value: "{global.red.7}"
1495
+ },
1496
+ "border-default": {
1497
+ $type: "color",
1498
+ $value: "{global.red.8}"
1499
+ },
1500
+ "border-strong": {
1501
+ $type: "color",
1502
+ $value: "{global.red.9}"
1503
+ },
1504
+ "text-subtle": {
1505
+ $type: "color",
1506
+ $value: "{global.red.10}"
1507
+ },
1508
+ "text-default": {
1509
+ $type: "color",
1510
+ $value: "{global.red.11}"
1511
+ },
1512
+ "base-default": {
1513
+ $type: "color",
1514
+ $value: "{global.red.12}"
1515
+ },
1516
+ "base-hover": {
1517
+ $type: "color",
1518
+ $value: "{global.red.13}"
1519
+ },
1520
+ "base-active": {
1521
+ $type: "color",
1522
+ $value: "{global.red.14}"
1523
+ },
1524
+ "base-contrast-subtle": {
1525
+ $type: "color",
1526
+ $value: "{global.red.15}"
1527
+ },
1528
+ "base-contrast-default": {
1529
+ $type: "color",
1530
+ $value: "{global.red.16}"
1531
+ }
1532
+ },
1533
+ info: {
1534
+ "background-default": {
1535
+ $type: "color",
1536
+ $value: "{global.blue.1}"
1537
+ },
1538
+ "background-tinted": {
1539
+ $type: "color",
1540
+ $value: "{global.blue.2}"
1541
+ },
1542
+ "surface-default": {
1543
+ $type: "color",
1544
+ $value: "{global.blue.3}"
1545
+ },
1546
+ "surface-tinted": {
1547
+ $type: "color",
1548
+ $value: "{global.blue.4}"
1549
+ },
1550
+ "surface-hover": {
1551
+ $type: "color",
1552
+ $value: "{global.blue.5}"
1553
+ },
1554
+ "surface-active": {
1555
+ $type: "color",
1556
+ $value: "{global.blue.6}"
1557
+ },
1558
+ "border-subtle": {
1559
+ $type: "color",
1560
+ $value: "{global.blue.7}"
1561
+ },
1562
+ "border-default": {
1563
+ $type: "color",
1564
+ $value: "{global.blue.8}"
1565
+ },
1566
+ "border-strong": {
1567
+ $type: "color",
1568
+ $value: "{global.blue.9}"
1569
+ },
1570
+ "text-subtle": {
1571
+ $type: "color",
1572
+ $value: "{global.blue.10}"
1573
+ },
1574
+ "text-default": {
1575
+ $type: "color",
1576
+ $value: "{global.blue.11}"
1577
+ },
1578
+ "base-default": {
1579
+ $type: "color",
1580
+ $value: "{global.blue.12}"
1581
+ },
1582
+ "base-hover": {
1583
+ $type: "color",
1584
+ $value: "{global.blue.13}"
1585
+ },
1586
+ "base-active": {
1587
+ $type: "color",
1588
+ $value: "{global.blue.14}"
1589
+ },
1590
+ "base-contrast-subtle": {
1591
+ $type: "color",
1592
+ $value: "{global.blue.15}"
1593
+ },
1594
+ "base-contrast-default": {
1595
+ $type: "color",
1596
+ $value: "{global.blue.16}"
1597
+ }
1598
+ },
1599
+ warning: {
1600
+ "background-default": {
1601
+ $type: "color",
1602
+ $value: "{global.orange.1}"
1603
+ },
1604
+ "background-tinted": {
1605
+ $type: "color",
1606
+ $value: "{global.orange.2}"
1607
+ },
1608
+ "surface-default": {
1609
+ $type: "color",
1610
+ $value: "{global.orange.3}"
1611
+ },
1612
+ "surface-tinted": {
1613
+ $type: "color",
1614
+ $value: "{global.orange.4}"
1615
+ },
1616
+ "surface-hover": {
1617
+ $type: "color",
1618
+ $value: "{global.orange.5}"
1619
+ },
1620
+ "surface-active": {
1621
+ $type: "color",
1622
+ $value: "{global.orange.6}"
1623
+ },
1624
+ "border-subtle": {
1625
+ $type: "color",
1626
+ $value: "{global.orange.7}"
1627
+ },
1628
+ "border-default": {
1629
+ $type: "color",
1630
+ $value: "{global.orange.8}"
1631
+ },
1632
+ "border-strong": {
1633
+ $type: "color",
1634
+ $value: "{global.orange.9}"
1635
+ },
1636
+ "text-subtle": {
1637
+ $type: "color",
1638
+ $value: "{global.orange.10}"
1639
+ },
1640
+ "text-default": {
1641
+ $type: "color",
1642
+ $value: "{global.orange.11}"
1643
+ },
1644
+ "base-default": {
1645
+ $type: "color",
1646
+ $value: "{global.orange.12}"
1647
+ },
1648
+ "base-hover": {
1649
+ $type: "color",
1650
+ $value: "{global.orange.13}"
1651
+ },
1652
+ "base-active": {
1653
+ $type: "color",
1654
+ $value: "{global.orange.14}"
1655
+ },
1656
+ "base-contrast-subtle": {
1657
+ $type: "color",
1658
+ $value: "{global.orange.15}"
1659
+ },
1660
+ "base-contrast-default": {
1661
+ $type: "color",
1662
+ $value: "{global.orange.16}"
1663
+ }
1664
+ },
1665
+ focus: {
1666
+ inner: {
1667
+ $type: "color",
1668
+ $value: "{color.neutral.background-default}"
1669
+ },
1670
+ outer: {
1671
+ $type: "color",
1672
+ $value: "{color.neutral.text-default}"
1673
+ }
1674
+ }
1675
+ },
1676
+ link: {
1677
+ color: {
1678
+ visited: {
1679
+ $type: "color",
1680
+ $value: "{global.purple.12}"
1681
+ }
1682
+ }
1683
+ }
1684
+ };
1685
+
1686
+ // src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
1687
+ var color_template_default = {
1688
+ "background-default": {
1689
+ $type: "color",
1690
+ $value: "{color.<color>.1}"
1691
+ },
1692
+ "background-tinted": {
1693
+ $type: "color",
1694
+ $value: "{color.<color>.2}"
1695
+ },
1696
+ "surface-default": {
1697
+ $type: "color",
1698
+ $value: "{color.<color>.3}"
1699
+ },
1700
+ "surface-tinted": {
1701
+ $type: "color",
1702
+ $value: "{color.<color>.4}"
1703
+ },
1704
+ "surface-hover": {
1705
+ $type: "color",
1706
+ $value: "{color.<color>.5}"
1707
+ },
1708
+ "surface-active": {
1709
+ $type: "color",
1710
+ $value: "{color.<color>.6}"
1711
+ },
1712
+ "border-subtle": {
1713
+ $type: "color",
1714
+ $value: "{color.<color>.7}"
1715
+ },
1716
+ "border-default": {
1717
+ $type: "color",
1718
+ $value: "{color.<color>.8}"
1719
+ },
1720
+ "border-strong": {
1721
+ $type: "color",
1722
+ $value: "{color.<color>.9}"
1723
+ },
1724
+ "text-subtle": {
1725
+ $type: "color",
1726
+ $value: "{color.<color>.10}"
1727
+ },
1728
+ "text-default": {
1729
+ $type: "color",
1730
+ $value: "{color.<color>.11}"
1731
+ },
1732
+ "base-default": {
1733
+ $type: "color",
1734
+ $value: "{color.<color>.12}"
1735
+ },
1736
+ "base-hover": {
1737
+ $type: "color",
1738
+ $value: "{color.<color>.13}"
1739
+ },
1740
+ "base-active": {
1741
+ $type: "color",
1742
+ $value: "{color.<color>.14}"
1743
+ },
1744
+ "base-contrast-subtle": {
1745
+ $type: "color",
1746
+ $value: "{color.<color>.15}"
1747
+ },
1748
+ "base-contrast-default": {
1749
+ $type: "color",
1750
+ $value: "{color.<color>.16}"
1751
+ }
1752
+ };
1753
+
1754
+ // src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
1755
+ var color_template_default2 = {
1756
+ "background-default": {
1757
+ $type: "color",
1758
+ $value: "{color.<color>.background-default}"
1759
+ },
1760
+ "background-tinted": {
1761
+ $type: "color",
1762
+ $value: "{color.<color>.background-tinted}"
1763
+ },
1764
+ "surface-default": {
1765
+ $type: "color",
1766
+ $value: "{color.<color>.surface-default}"
1767
+ },
1768
+ "surface-tinted": {
1769
+ $type: "color",
1770
+ $value: "{color.<color>.surface-tinted}"
1771
+ },
1772
+ "surface-hover": {
1773
+ $type: "color",
1774
+ $value: "{color.<color>.surface-hover}"
1775
+ },
1776
+ "surface-active": {
1777
+ $type: "color",
1778
+ $value: "{color.<color>.surface-active}"
1779
+ },
1780
+ "border-subtle": {
1781
+ $type: "color",
1782
+ $value: "{color.<color>.border-subtle}"
1783
+ },
1784
+ "border-default": {
1785
+ $type: "color",
1786
+ $value: "{color.<color>.border-default}"
1787
+ },
1788
+ "border-strong": {
1789
+ $type: "color",
1790
+ $value: "{color.<color>.border-strong}"
1791
+ },
1792
+ "text-subtle": {
1793
+ $type: "color",
1794
+ $value: "{color.<color>.text-subtle}"
1795
+ },
1796
+ "text-default": {
1797
+ $type: "color",
1798
+ $value: "{color.<color>.text-default}"
1799
+ },
1800
+ "base-default": {
1801
+ $type: "color",
1802
+ $value: "{color.<color>.base-default}"
1803
+ },
1804
+ "base-hover": {
1805
+ $type: "color",
1806
+ $value: "{color.<color>.base-hover}"
1807
+ },
1808
+ "base-active": {
1809
+ $type: "color",
1810
+ $value: "{color.<color>.base-active}"
1811
+ },
1812
+ "base-contrast-subtle": {
1813
+ $type: "color",
1814
+ $value: "{color.<color>.base-contrast-subtle}"
1815
+ },
1816
+ "base-contrast-default": {
1817
+ $type: "color",
1818
+ $value: "{color.<color>.base-contrast-default}"
1819
+ }
1820
+ };
1821
+
1822
+ // src/tokens/create/generators/semantic.ts
1823
+ var generateSemantic = (colors2) => {
1824
+ const mainColorNames = Object.keys(colors2.main);
1825
+ const supportColorNames = Object.keys(colors2.support);
1826
+ const modes = {
1827
+ "main-color": {},
1828
+ "support-color": {}
1829
+ };
1830
+ const categories = [
1831
+ ["main-color", mainColorNames],
1832
+ ["support-color", supportColorNames]
1833
+ ];
1834
+ for (const [colorCategory2, colorNames] of categories) {
1835
+ for (const colorName of colorNames) {
1836
+ const category = colorCategory2.replace("-color", "");
1837
+ const customColorTokens = {
1838
+ color: {
1839
+ [category]: JSON.parse(
1840
+ JSON.stringify(
1841
+ color_template_default2,
1842
+ (key, value) => {
1843
+ if (key === "$value") {
1844
+ return value.replace("<color>", colorName);
1845
+ }
1846
+ return value;
1847
+ },
1848
+ 2
1849
+ )
1850
+ )
1851
+ }
1852
+ };
1853
+ modes[colorCategory2][colorName] = customColorTokens;
1854
+ }
1855
+ }
1856
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
1857
+ const semanticColorTokens = customColors.map(
1858
+ (colorName) => [
1859
+ colorName,
1860
+ R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
1861
+ ]
1862
+ );
1863
+ const color = {
1864
+ ...color_base_template_default,
1865
+ color: {
1866
+ ...Object.fromEntries(semanticColorTokens),
1867
+ ...color_base_template_default.color
1868
+ }
1869
+ };
1870
+ return {
1871
+ modes,
1872
+ color
1873
+ };
1874
+ };
1875
+
1876
+ // src/tokens/create/generators/theme.ts
1877
+ import * as R6 from "ramda";
1878
+
1879
+ // src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
1880
+ var theme_base_template_default = {
1881
+ color: {},
1882
+ "font-family": {
1883
+ $type: "fontFamilies",
1884
+ $value: "{<theme>.font-family}"
1885
+ },
1886
+ "font-weight": {
1887
+ medium: {
1888
+ $type: "fontWeights",
1889
+ $value: "{<theme>.font-weight.medium}"
1890
+ },
1891
+ semibold: {
1892
+ $type: "fontWeights",
1893
+ $value: "{<theme>.font-weight.semibold}"
1894
+ },
1895
+ regular: {
1896
+ $type: "fontWeights",
1897
+ $value: "{<theme>.font-weight.regular}"
1898
+ }
1899
+ },
1900
+ "border-radius": {
1901
+ "1": {
1902
+ $type: "dimension",
1903
+ $value: "min({border-radius.base}*0.5,{border-radius.scale})"
1904
+ },
1905
+ "2": {
1906
+ $type: "dimension",
1907
+ $value: "min({border-radius.base},{border-radius.scale}*2)"
1908
+ },
1909
+ "3": {
1910
+ $type: "dimension",
1911
+ $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
1912
+ },
1913
+ "4": {
1914
+ $type: "dimension",
1915
+ $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
1916
+ },
1917
+ "5": {
1918
+ $type: "dimension",
1919
+ $value: "{border-radius.base}"
1920
+ },
1921
+ "6": {
1922
+ $type: "dimension",
1923
+ $value: "9999"
1924
+ },
1925
+ base: {
1926
+ $type: "dimension",
1927
+ $value: "4"
1928
+ },
1929
+ scale: {
1930
+ $type: "dimension",
1931
+ $value: "4"
1932
+ }
1933
+ }
1934
+ };
1935
+
1936
+ // src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
1937
+ var theme_template_default = {
1938
+ "1": {
1939
+ $type: "color",
1940
+ $value: "{<theme>.<color>.1}"
1941
+ },
1942
+ "2": {
1943
+ $type: "color",
1944
+ $value: "{<theme>.<color>.2}"
1945
+ },
1946
+ "3": {
1947
+ $type: "color",
1948
+ $value: "{<theme>.<color>.3}"
1949
+ },
1950
+ "4": {
1951
+ $type: "color",
1952
+ $value: "{<theme>.<color>.4}"
1953
+ },
1954
+ "5": {
1955
+ $type: "color",
1956
+ $value: "{<theme>.<color>.5}"
1957
+ },
1958
+ "6": {
1959
+ $type: "color",
1960
+ $value: "{<theme>.<color>.6}"
1961
+ },
1962
+ "7": {
1963
+ $type: "color",
1964
+ $value: "{<theme>.<color>.7}"
1965
+ },
1966
+ "8": {
1967
+ $type: "color",
1968
+ $value: "{<theme>.<color>.8}"
1969
+ },
1970
+ "9": {
1971
+ $type: "color",
1972
+ $value: "{<theme>.<color>.9}"
1973
+ },
1974
+ "10": {
1975
+ $type: "color",
1976
+ $value: "{<theme>.<color>.10}"
1977
+ },
1978
+ "11": {
1979
+ $type: "color",
1980
+ $value: "{<theme>.<color>.11}"
1981
+ },
1982
+ "12": {
1983
+ $type: "color",
1984
+ $value: "{<theme>.<color>.12}"
1985
+ },
1986
+ "13": {
1987
+ $type: "color",
1988
+ $value: "{<theme>.<color>.13}"
1989
+ },
1990
+ "14": {
1991
+ $type: "color",
1992
+ $value: "{<theme>.<color>.14}"
1993
+ },
1994
+ "15": {
1995
+ $type: "color",
1996
+ $value: "{<theme>.<color>.15}"
1997
+ },
1998
+ "16": {
1999
+ $type: "color",
2000
+ $value: "{<theme>.<color>.16}"
2001
+ }
2002
+ };
2003
+
2004
+ // src/tokens/create/generators/theme.ts
2005
+ var generateTheme = (colors2, themeName, borderRadius) => {
2006
+ const mainColorNames = Object.keys(colors2.main);
2007
+ const supportColorNames = Object.keys(colors2.support);
2008
+ const customColors = [...mainColorNames, "neutral", ...supportColorNames];
2009
+ const themeColorTokens = Object.fromEntries(
2010
+ customColors.map(
2011
+ (colorName) => [
2012
+ colorName,
2013
+ R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
2014
+ ]
2015
+ )
2016
+ );
2017
+ const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
2018
+ const themeFile = {
2019
+ color: {
2020
+ ...themeColorTokens,
2021
+ ...themeBaseFileColor
2022
+ },
2023
+ ...remainingThemeFile
2024
+ };
2025
+ const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
2026
+ const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
2027
+ const token = JSON.parse(
2028
+ JSON.stringify(
2029
+ updatedThemeFile,
2030
+ (key, value) => {
2031
+ if (key === "$value") {
2032
+ return value.replace("<theme>", themeName);
2033
+ }
2034
+ return value;
2035
+ },
2036
+ 2
2037
+ )
2038
+ );
2039
+ return token;
2040
+ };
2041
+
2042
+ // src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
2043
+ var typography_template_default = {
2044
+ "<theme>": {
2045
+ "font-family": {
2046
+ $type: "fontFamilies",
2047
+ $value: "<font-family>"
2048
+ },
2049
+ "font-weight": {
2050
+ medium: {
2051
+ $type: "fontWeights",
2052
+ $value: "Medium"
2053
+ },
2054
+ semibold: {
2055
+ $type: "fontWeights",
2056
+ $value: "Semi bold"
2057
+ },
2058
+ regular: {
2059
+ $type: "fontWeights",
2060
+ $value: "Regular"
2061
+ }
2062
+ }
2063
+ }
2064
+ };
2065
+
2066
+ // src/tokens/create/generators/typography.ts
2067
+ var generateTypography = (themeName, { fontFamily }) => {
2068
+ return JSON.parse(
2069
+ JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
2070
+ );
2071
+ };
2072
+
2073
+ // src/tokens/create.ts
2074
+ var cliOptions = {
2075
+ outDir: "out-dir",
2076
+ clean: "clean",
2077
+ theme: {
2078
+ colors: {
2079
+ main: "main-colors",
2080
+ support: "support-colors",
2081
+ neutral: "neutral-color"
2082
+ },
2083
+ typography: {
2084
+ fontFamily: "font-family"
2085
+ },
2086
+ borderRadius: "border-radius"
2087
+ }
2088
+ };
2089
+ var createTokens = async (opts) => {
2090
+ const { colors: colors2, typography: typography2, name, borderRadius } = opts;
2091
+ const colorSchemes = ["light", "dark"];
2092
+ const semantic2 = generateSemantic(colors2);
2093
+ const tokenSets = new Map([
2094
+ ...getDefaultTokens([
2095
+ "primitives/globals",
2096
+ "primitives/modes/size/small",
2097
+ "primitives/modes/size/medium",
2098
+ "primitives/modes/size/large",
2099
+ "primitives/modes/size/global",
2100
+ "primitives/modes/typography/size/small",
2101
+ "primitives/modes/typography/size/medium",
2102
+ "primitives/modes/typography/size/large"
2103
+ ]),
2104
+ [`primitives/modes/typography/primary/${name}`, generateTypography(name, typography2)],
2105
+ [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography2)],
2106
+ ...colorSchemes.flatMap((scheme) => [
2107
+ [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
2108
+ [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors2)]
2109
+ ]),
2110
+ [`themes/${name}`, generateTheme(colors2, name, borderRadius)],
2111
+ ["semantic/color", semantic2.color],
2112
+ // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
2113
+ ...Object.entries(semantic2.modes).flatMap(
2114
+ ([mode, colors3]) => Object.entries(colors3).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
2115
+ ),
2116
+ getDefaultToken("semantic/style")
2117
+ ]);
2118
+ return { tokenSets };
2119
+ };
2120
+
2121
+ // src/config.ts
2122
+ function mapPathToOptionName(path5) {
2123
+ const normalisedPath = path5[0] === "themes" ? ["theme", ...R7.drop(2, path5)] : path5;
2124
+ const option = R7.path(normalisedPath, cliOptions);
2125
+ if (typeof option !== "string") {
2126
+ return;
2127
+ }
2128
+ return option;
2129
+ }
2130
+ var hexPatterns = [
2131
+ // Hex colors: #000, #0000, #000000, #00000000
2132
+ `#[0-9a-fA-F]{3}`,
2133
+ `#[0-9a-fA-F]{4}`,
2134
+ `#[0-9a-fA-F]{6}`,
2135
+ `#[0-9a-fA-F]{8}`
2136
+ ];
2137
+ var reservedColorsPattern = `^(?!(?:${RESERVED_COLORS.join("|")})$)`;
2138
+ var colorRegex = new RegExp(`^${hexPatterns.join("|")}$`);
2139
+ var colorSchema = z.string({
2140
+ description: `A hex color, which is used for creating a color scale. Invalid color names: ${RESERVED_COLORS.join(", ")}`
2141
+ }).regex(colorRegex).transform(convertToHex);
2142
+ var colorCategorySchema = z.record(
2143
+ z.string().regex(new RegExp(reservedColorsPattern, "i"), {
2144
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
2145
+ }),
2146
+ colorSchema,
2147
+ {
2148
+ description: "One or more color definitions",
2149
+ invalid_type_error: "Color definitions must be hex color values"
2150
+ }
2151
+ ).refine((colors2) => !Object.keys(colors2).some((key) => RESERVED_COLORS.includes(key.toLowerCase())), {
2152
+ message: `Color names cannot include reserved names: ${RESERVED_COLORS.join(", ")}`
2153
+ });
2154
+ var themeSchema = z.object(
2155
+ {
2156
+ colors: z.object(
2157
+ {
2158
+ main: colorCategorySchema,
2159
+ support: colorCategorySchema.optional().default({}),
2160
+ neutral: colorSchema
2161
+ },
2162
+ { description: "Defines the colors for this theme" }
2163
+ ),
2164
+ typography: z.object(
2165
+ {
2166
+ fontFamily: z.string({ description: "Sets the font-family for this theme" })
2167
+ },
2168
+ { description: "Defines the typography for a given theme" }
2169
+ ).optional(),
2170
+ borderRadius: z.number({ description: "Defines the border-radius for this theme" }).optional()
2171
+ },
2172
+ { description: "An object defining a theme. The property name holding the object becomes the theme name." }
2173
+ );
2174
+ var configFileSchema = z.object({
2175
+ outDir: z.string({ description: "Path to the output directory for the created design tokens" }).optional(),
2176
+ clean: z.boolean({ description: "Delete the output directory before building or creating tokens" }).optional(),
2177
+ themes: z.record(themeSchema, {
2178
+ description: "An object with one or more themes. Each property defines a theme, and the property name is used as the theme name."
2179
+ })
2180
+ });
2181
+ var combinedConfigSchema = configFileSchema.required();
2182
+
2183
+ // src/migrations/codemods/css/plugins.ts
2184
+ import chalk from "chalk";
2185
+ import hash from "object-hash";
2186
+ import * as R8 from "ramda";
2187
+ var printDelete = (text) => console.log(`${chalk.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
2188
+ var deleteMsg = (decl, from) => `${chalk.yellow(from)} @ ${chalk.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
2189
+ var cssClassRename = (dictionary) => ({
2190
+ postcssPlugin: `Renames CSS classes ${hash(dictionary)}`,
2191
+ Rule(rule) {
2192
+ const selector = rule.selector;
2193
+ if (!selector) return;
2194
+ for (const [from, to] of Object.entries(dictionary)) {
2195
+ if (!selector.includes(from)) return;
2196
+ const newSelector = selector.replace(new RegExp(from, "g"), to);
2197
+ rule.selector = newSelector;
2198
+ }
2199
+ }
2200
+ });
2201
+ var cssVarRename = (dictionary) => ({
2202
+ postcssPlugin: `Replaces CSS variables ${hash(dictionary)}`,
2203
+ Declaration(decl) {
2204
+ const { value, prop: prop2 } = decl;
2205
+ const deleted = /* @__PURE__ */ new Set();
2206
+ for (const [from, to] of Object.entries(dictionary)) {
2207
+ if (R8.isNotEmpty(to)) {
2208
+ if (to === "[delete]") {
2209
+ deleted.add(deleteMsg(decl, from));
2210
+ }
2211
+ if (R8.includes(from, value)) {
2212
+ decl.value = value.replace(from, to);
2213
+ continue;
2214
+ }
2215
+ if (R8.includes(from, prop2) && decl.variable) {
2216
+ decl.prop = prop2.replace(from, to);
2217
+ }
2218
+ }
2219
+ }
2220
+ if (deleted.size > 0) {
2221
+ Array.from(deleted).forEach(printDelete);
2222
+ }
2223
+ }
2224
+ });
2225
+
2226
+ // src/migrations/codemods/css/run.ts
2227
+ import fs2 from "node:fs";
2228
+ import glob from "fast-glob";
2229
+ import postcss from "postcss";
2230
+
2231
+ // src/utils.ts
2232
+ import fs from "node:fs/promises";
2233
+ import chalk2 from "chalk";
2234
+ var mkdir = async (dir, dry) => {
2235
+ if (dry) {
2236
+ console.log(`${chalk2.blue("mkdir")} ${dir}`);
2237
+ return Promise.resolve();
2238
+ }
2239
+ const exists = await fs.access(dir, fs.constants.F_OK).then(() => true).catch(() => false);
2240
+ if (exists) {
2241
+ return Promise.resolve();
2242
+ }
2243
+ return fs.mkdir(dir, { recursive: true });
2244
+ };
2245
+ var writeFile = async (path5, data, dry) => {
2246
+ if (dry) {
2247
+ console.log(`${chalk2.blue("writeFile")} ${path5}`);
2248
+ return Promise.resolve();
2249
+ }
2250
+ return fs.writeFile(path5, data, { encoding: "utf-8" }).catch((error) => {
2251
+ console.error(chalk2.red(`Error writing file: ${path5}`));
2252
+ console.error(chalk2.red(error));
2253
+ throw error;
2254
+ });
2255
+ };
2256
+ var cleanDir = async (dir, dry) => {
2257
+ if (dry) {
2258
+ console.log(`${chalk2.blue("cleanDir")} ${dir}`);
2259
+ return Promise.resolve();
2260
+ }
2261
+ console.log(`
2262
+ \u{1F525} Cleaning dir ${chalk2.red(`${dir.trim()}`)} `);
2263
+ return fs.rm(dir, { recursive: true, force: true });
2264
+ };
2265
+ var readFile = async (path5, dry) => {
2266
+ if (dry) {
2267
+ console.log(`${chalk2.blue("readFile")} ${path5}`);
2268
+ return Promise.resolve("");
2269
+ }
2270
+ return fs.readFile(path5, "utf-8");
2271
+ };
2272
+
2273
+ // src/migrations/codemods/css/run.ts
2274
+ var runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
2275
+ const processor = postcss(plugins);
2276
+ const transform = async () => {
2277
+ console.log(`Running migration in ${globPattern}`);
2278
+ const files = await glob([globPattern], {
2279
+ ignore: ["**/node_modules/**", "**/dist/**"],
2280
+ // TODO: Not working as expected
2281
+ absolute: true
2282
+ });
2283
+ const filePromises = files.map(async (file) => {
2284
+ if (file.includes("node_modules") || file.includes("dist")) {
2285
+ return;
2286
+ }
2287
+ const contents = readFile(file).toString();
2288
+ const result = await processor.process(contents, { from: file });
2289
+ fs2.writeFileSync(file, result.css);
2290
+ });
2291
+ await Promise.all(filePromises);
2292
+ };
2293
+ return transform();
2294
+ };
2295
+
2296
+ // src/migrations/beta-to-v1.ts
2297
+ var beta_to_v1_default = (glob2) => runCssCodemod({
2298
+ globPattern: glob2,
2299
+ plugins: [
2300
+ cssClassRename({
2301
+ ".fds-": ".ds-"
2302
+ }),
2303
+ // New component token prefixes
2304
+ cssVarRename({
2305
+ "--fds-accordion": "--dsc-accordion",
2306
+ "--fds-alert": "--dsc-alert",
2307
+ "--fds-btn": "--dsc-btn",
2308
+ "--fds-checkbox": "--dsc-checkbox",
2309
+ "--fdsc-chip": "--dsc-chip",
2310
+ "--fdsc-gap": "--dsc-chip-group-gap",
2311
+ "--fdsc-removable": "--dsc-removable",
2312
+ "--fdsc-bottom": "--dsc-bottom",
2313
+ "--fds-pagination": "--dsc-pagination",
2314
+ "--fds-popover": "--dsc-popover",
2315
+ "--fds-radio": "--dsc-radio",
2316
+ "--f-search": "--dsc-search",
2317
+ "--fds-skeleton": "--dsc-skeleton",
2318
+ "--fds-switch--transition": "--dsc-switch-transition",
2319
+ "--fds-switch": "--dsc-switch",
2320
+ "--table-padding": "--dsc-table-padding",
2321
+ "--border-radius": "--dsc-table-border-radius",
2322
+ "--fds-tabs": "--dsc-tabs",
2323
+ "--fds-tag": "--dsc-tag",
2324
+ "--fds-focus-border-width": "--ds-border-width-focus"
2325
+ }),
2326
+ // New tokens
2327
+ cssVarRename({
2328
+ "--fds-semantic-surface-first-light": "--ds-color-brand1-surface-default",
2329
+ "--fds-semantic-surface-first-light-hover": "--ds-color-brand1-surface-hover",
2330
+ "--fds-semantic-surface-first-light-active": "--ds-color-brand1-surface-active",
2331
+ "--fds-semantic-surface-first-dark": "[delete]",
2332
+ "--fds-semantic-surface-second-light": "--ds-color-brand2-surface-default",
2333
+ "--fds-semantic-surface-second-light-hover": "--ds-color-brand2-surface-hover",
2334
+ "--fds-semantic-surface-second-light-active": "--ds-color-brand2-surface-active",
2335
+ "--fds-semantic-surface-second-dark": "[delete]",
2336
+ "--fds-semantic-surface-third-light": "--ds-color-brand3-surface-default",
2337
+ "--fds-semantic-surface-third-light-hover": "--ds-color-brand3-surface-hover",
2338
+ "--fds-semantic-surface-third-light-active": "--ds-color-brand3-surface-active",
2339
+ "--fds-semantic-surface-third-dark": "[delete]",
2340
+ "--fds-semantic-surface-action-first-subtle": "--ds-color-accent-surface-default",
2341
+ "--fds-semantic-surface-action-first-subtle-hover": "--ds-color-accent-surface-hover",
2342
+ "--fds-semantic-surface-action-first-default": "--ds-color-accent-base-default",
2343
+ "--fds-semantic-surface-action-first-hover": "--ds-color-accent-base-hover",
2344
+ "--fds-semantic-surface-action-first-active": "--ds-color-accent-base-active",
2345
+ "--fds-semantic-surface-action-first-no_fill": "--ds-color-accent-background-default",
2346
+ "--fds-semantic-surface-action-first-no_fill-hover": "--ds-color-accent-surface-default",
2347
+ "--fds-semantic-surface-action-first-no_fill-active": "--ds-color-accent-surface-hover",
2348
+ "--fds-semantic-surface-action-second-subtle": "--ds-color-neutral-surface-default",
2349
+ "--fds-semantic-surface-action-second-subtle-hover": "--ds-color-neutral-surface-hover",
2350
+ "--fds-semantic-surface-action-second-default": "--ds-color-neutral-base-default",
2351
+ "--fds-semantic-surface-action-second-hover": "--ds-color-neutral-base-hover",
2352
+ "--fds-semantic-surface-action-second-active": "--ds-color-neutral-base-active",
2353
+ "--fds-semantic-surface-action-second-no_fill": "--ds-color-neutral-background-default",
2354
+ "--fds-semantic-surface-action-second-no_fill-hover": "--ds-color-neutral-surface-default",
2355
+ "--fds-semantic-surface-action-second-no_fill-active": "--ds-color-neutral-surface-hover",
2356
+ "--fds-semantic-surface-action-subtle": "--ds-color-accent-surface-default",
2357
+ "--fds-semantic-surface-action-subtle-hover": "--ds-color-accent-surface-hover",
2358
+ "--fds-semantic-surface-action-default": "--ds-color-accent-base-default",
2359
+ "--fds-semantic-surface-action-hover": "--ds-color-accent-base-hover",
2360
+ "--fds-semantic-surface-action-active": "--ds-color-accent-base-active",
2361
+ "--fds-semantic-surface-action-no_fill": "--ds-color-accent-background-default",
2362
+ "--fds-semantic-surface-action-no_fill-hover": "--ds-color-accent-surface-default",
2363
+ "--fds-semantic-surface-action-no_fill-active": "--ds-color-accent-surface-hover",
2364
+ "--fds-semantic-surface-action-checked": "--ds-color-accent-base-default",
2365
+ "--fds-semantic-surface-neutral-default": "--ds-color-neutral-background-default",
2366
+ "--fds-semantic-surface-neutral-selected": "[delete]",
2367
+ "--fds-semantic-surface-neutral-subtle": "--ds-color-neutral-background-subtle",
2368
+ "--fds-semantic-surface-neutral-subtle-hover": "--ds-color-neutral-surface-default",
2369
+ "--fds-semantic-surface-neutral-dark": "[delete]",
2370
+ "--fds-semantic-surface-neutral-dark-hover": "[delete]",
2371
+ "--fds-semantic-surface-neutral-inverted": "[delete]",
2372
+ "--fds-semantic-surface-success-subtle": "--ds-color-success-surface-default",
2373
+ "--fds-semantic-surface-success-subtle-hover": "--ds-color-success-surface-hover",
2374
+ "--fds-semantic-surface-success-default": "--ds-color-success-base-default",
2375
+ "--fds-semantic-surface-success-hover": "--ds-color-success-base-hover",
2376
+ "--fds-semantic-surface-success-active": "--ds-color-success-base-active",
2377
+ "--fds-semantic-surface-success-no_fill": "--ds-color-success-background-default",
2378
+ "--fds-semantic-surface-success-no_fill-hover": "--ds-color-success-surface-default",
2379
+ "--fds-semantic-surface-success-no_fill-active": "--ds-color-success-surface-hover",
2380
+ "--fds-semantic-surface-warning-subtle": "--ds-color-warning-surface-default",
2381
+ "--fds-semantic-surface-warning-subtle-hover": "--ds-color-warning-surface-default",
2382
+ "--fds-semantic-surface-warning-default": "--ds-color-warning-surface-default",
2383
+ "--fds-semantic-surface-warning-default-hover": "--ds-color-warning-surface-hover",
2384
+ "--fds-semantic-surface-danger-subtle": "--ds-color-danger-surface-default",
2385
+ "--fds-semantic-surface-danger-subtle-hover": "--ds-color-danger-surface-hover",
2386
+ "--fds-semantic-surface-danger-default": "--ds-color-danger-base-default",
2387
+ "--fds-semantic-surface-danger-hover": "--ds-color-danger-base-hover",
2388
+ "--fds-semantic-surface-danger-active": "--ds-color-danger-base-active",
2389
+ "--fds-semantic-surface-danger-no_fill": "--ds-color-danger-background-default",
2390
+ "--fds-semantic-surface-danger-no_fill-hover": "--ds-color-danger-surface-default",
2391
+ "--fds-semantic-surface-danger-no_fill-active": "--ds-color-danger-surface-hover",
2392
+ "--fds-semantic-surface-info-subtle": "--ds-color-info-surface-default",
2393
+ "--fds-semantic-surface-info-subtle-hover": "[delete]",
2394
+ "--fds-semantic-surface-on_inverted-default": "[delete]",
2395
+ "--fds-semantic-surface-on_inverted-hover": "[delete]",
2396
+ "--fds-semantic-surface-on_inverted-active": "[delete]",
2397
+ "--fds-semantic-surface-on_inverted-no_fill": "[delete]",
2398
+ "--fds-semantic-surface-on_inverted-no_fill-hover": "[delete]",
2399
+ "--fds-semantic-surface-on_inverted-no_fill-active": "[delete]",
2400
+ "--fds-semantic-surface-focus-default": "[delete]",
2401
+ "--fds-semantic-border-first-default": "--ds-color-brand1-base-default",
2402
+ "--fds-semantic-border-first-hover": "--ds-color-brand1-base-hover",
2403
+ "--fds-semantic-border-first-active": "--ds-color-brand1-base-active",
2404
+ "--fds-semantic-border-second-default": "--ds-color-brand2-base-default",
2405
+ "--fds-semantic-border-second-hover": "--ds-color-brand2-base-hover",
2406
+ "--fds-semantic-border-second-active": "--ds-color-brand2-base-active",
2407
+ "--fds-semantic-border-third-default": "--ds-color-brand3-base-default",
2408
+ "--fds-semantic-border-third-hover": "--ds-color-brand3-base-hover",
2409
+ "--fds-semantic-border-third-active": "--ds-color-brand3-base-active",
2410
+ "--fds-semantic-border-action-first-subtle": "--ds-color-accent-border-subtle",
2411
+ "--fds-semantic-border-action-first-subtle-hover": "--ds-color-accent-border-default",
2412
+ "--fds-semantic-border-action-first-default": "--ds-color-accent-base-default",
2413
+ "--fds-semantic-border-action-first-hover": "--ds-color-accent-base-hover",
2414
+ "--fds-semantic-border-action-first-active": "--ds-color-accent-base-active",
2415
+ "--fds-semantic-border-action-second-subtle": "--ds-color-neutral-border-subtle",
2416
+ "--fds-semantic-border-action-second-subtle-hover": "--ds-color-neutral-border-default",
2417
+ "--fds-semantic-border-action-second-default": "--ds-color-neutral-base-default",
2418
+ "--fds-semantic-border-action-second-hover": "--ds-color-neutral-base-hover",
2419
+ "--fds-semantic-border-action-second-active": "--ds-color-neutral-base-active",
2420
+ "--fds-semantic-border-action-subtle": "--ds-color-accent-border-subtle",
2421
+ "--fds-semantic-border-action-subtle-hover": "--ds-color-accent-border-default",
2422
+ "--fds-semantic-border-action-default": "--ds-color-accent-base-default",
2423
+ "--fds-semantic-border-action-hover": "--ds-color-accent-base-hover",
2424
+ "--fds-semantic-border-action-active": "--ds-color-accent-base-active",
2425
+ "--fds-semantic-border-action-dark": "[delete]",
2426
+ "--fds-semantic-border-action-dark-hover": "[delete]",
2427
+ "--fds-semantic-border-info-default": "--ds-color-info-border-strong",
2428
+ "--fds-semantic-border-neutral-default": "--ds-color-neutral-border-strong",
2429
+ "--fds-semantic-border-neutral-subtle": "--ds-color-neutral-border-subtle",
2430
+ "--fds-semantic-border-neutral-strong": "--ds-color-neutral-base-default",
2431
+ "--fds-semantic-border-success-default": "--ds-color-success-border-default",
2432
+ "--fds-semantic-border-success-hover": "[delete]",
2433
+ "--fds-semantic-border-success-active": "[delete]",
2434
+ "--fds-semantic-border-warning-default": "--ds-color-warning-border-default",
2435
+ "--fds-semantic-border-warning-hover": "[delete]",
2436
+ "--fds-semantic-border-warning-active": "[delete]",
2437
+ "--fds-semantic-border-danger-default": "--ds-color-danger-border-default",
2438
+ "--fds-semantic-border-danger-hover": "--ds-color-danger-border-strong",
2439
+ "--fds-semantic-border-danger-active": "--ds-color-danger-border-strong",
2440
+ "--fds-semantic-border-focus-outline": "--ds-color-neutral-text-default",
2441
+ "--fds-semantic-border-focus-boxshadow": "--ds-color-neutral-background-default",
2442
+ "--fds-semantic-border-on_inverted-default": "[delete]",
2443
+ "--fds-semantic-border-input-default": "--ds-color-neutral-border-default",
2444
+ "--fds-semantic-border-input-hover": "--ds-color-accent-border-strong",
2445
+ "--fds-semantic-border-divider-default": "--ds-color-neutral-border-subtle",
2446
+ "--fds-semantic-border-divider-subtle": "--ds-color-neutral-border-subtle",
2447
+ "--fds-semantic-border-divider-strong": "--ds-color-neutral-border-default",
2448
+ "--fds-semantic-text-action-first-default": "--ds-color-accent-base-default",
2449
+ "--fds-semantic-text-action-first-hover": "--ds-color-accent-base-hover",
2450
+ "--fds-semantic-text-action-first-active": "--ds-color-accent-base-active",
2451
+ "--fds-semantic-text-action-first-on_action": "--ds-color-accent-contrast-default",
2452
+ "--fds-semantic-text-action-second-default": "--ds-color-neutral-base-default",
2453
+ "--fds-semantic-text-action-second-hover": "--ds-color-neutral-base-hover",
2454
+ "--fds-semantic-text-action-second-active": "--ds-color-neutral-base-active",
2455
+ "--fds-semantic-text-action-second-on_action": "--ds-color-neutral-contrast-default",
2456
+ "--fds-semantic-text-action-default": "--ds-color-accent-base-default",
2457
+ "--fds-semantic-text-action-hover": "--ds-color-accent-base-hover",
2458
+ "--fds-semantic-text-action-active": "--ds-color-accent-base-active",
2459
+ "--fds-semantic-text-action-on_action": "--ds-color-accent-contrast-default",
2460
+ "--fds-semantic-text-success-default": "--ds-color-success-base-default",
2461
+ "--fds-semantic-text-success-hover": "--ds-color-success-base-default",
2462
+ "--fds-semantic-text-success-active": "--ds-color-success-base-default",
2463
+ "--fds-semantic-text-success-on_success": "--ds-color-success-contrast-default",
2464
+ "--fds-semantic-text-success-on_success_subtle": "--ds-color-success-text-default",
2465
+ "--fds-semantic-text-neutral-default": "--ds-color-neutral-text-default",
2466
+ "--fds-semantic-text-neutral-subtle": "--ds-color-neutral-text-subtle",
2467
+ "--fds-semantic-text-neutral-on_inverted": "--ds-color-neutral-contrast-default",
2468
+ "--fds-semantic-text-warning-default": "[delete]",
2469
+ "--fds-semantic-text-warning-icon_warning": "--ds-color-warning-base-default",
2470
+ "--fds-semantic-text-warning-on_warning": "--ds-color-neutral-text-default",
2471
+ "--fds-semantic-text-danger-default": "--ds-color-danger-text-default",
2472
+ "--fds-semantic-text-danger-hover": "--ds-color-danger-text-default",
2473
+ "--fds-semantic-text-danger-active": "--ds-color-danger-text-default",
2474
+ "--fds-semantic-text-danger-on_danger": "--ds-color-danger-contrast-default",
2475
+ "--fds-semantic-text-danger-on_danger_subtle": "--ds-color-danger-text-default",
2476
+ "--fds-semantic-text-visited-default": "--ds-global-purple-13",
2477
+ "--fds-semantic-background-default": "--ds-color-neutral-background-default",
2478
+ "--fds-semantic-background-subtle": "--ds-color-neutral-background-subtle",
2479
+ "--fds-typography-heading-3xlarge": "[delete]",
2480
+ "--fds-typography-heading-2xlarge": "--ds-typography-heading-2xl",
2481
+ "--fds-typography-heading-xlarge": "--ds-typography-heading-xl",
2482
+ "--fds-typography-heading-large": "--ds-typography-heading-lg",
2483
+ "--fds-typography-heading-medium": "--ds-typography-heading-md",
2484
+ "--fds-typography-heading-small": "--ds-typography-heading-sm",
2485
+ "--fds-typography-heading-xsmall": "--ds-typography-heading-xs",
2486
+ "--fds-typography-heading-xxsmall": "--ds-typography-heading-2xs",
2487
+ "--fds-typography-ingress-large": "--ds-typography-ingress-lg",
2488
+ "--fds-typography-ingress-medium": "--ds-typography-ingress-md",
2489
+ "--fds-typography-ingress-small": "--ds-typography-ingress-sm",
2490
+ "--fds-typography-ingress-xsmall": "--ds-typography-ingress-xs",
2491
+ "--fds-typography-paragraph-large": "--ds-typography-paragraph-lg",
2492
+ "--fds-typography-paragraph-medium": "--ds-typography-paragraph-md",
2493
+ "--fds-typography-paragraph-small": "--ds-typography-paragraph-sm",
2494
+ "--fds-typography-paragraph-xsmall": "--ds-typography-paragraph-xs",
2495
+ "--fds-typography-paragraph-short-large": "--ds-typography-paragraph-short-lg",
2496
+ "--fds-typography-paragraph-short-medium": "--ds-typography-paragraph-short-md",
2497
+ "--fds-typography-paragraph-short-small": "--ds-typography-paragraph-short-sm",
2498
+ "--fds-typography-paragraph-short-xsmall": "--ds-typography-paragraph-short-xs",
2499
+ "--fds-typography-paragraph-long-large": "--ds-typography-paragraph-long-lg",
2500
+ "--fds-typography-paragraph-long-medium": "--ds-typography-paragraph-long-md",
2501
+ "--fds-typography-paragraph-long-small": "--ds-typography-paragraph-long-sm",
2502
+ "--fds-typography-paragraph-long-xsmall": "--ds-typography-paragraph-long-xs",
2503
+ "--fds-typography-label-large": "--ds-typography-label-lg",
2504
+ "--fds-typography-label-medium": "--ds-typography-label-md",
2505
+ "--fds-typography-label-small": "--ds-typography-label-sm",
2506
+ "--fds-typography-label-xsmall": "--ds-typography-label-xs",
2507
+ "--fds-typography-error_message-large": "--ds-typography-error_message-lg",
2508
+ "--fds-typography-error_message-medium": "--ds-typography-error_message-md",
2509
+ "--fds-typography-error_message-small": "--ds-typography-error_message-sm",
2510
+ "--fds-typography-error_message-xsmall": "--ds-typography-error_message-xs",
2511
+ "--fds-typography-interactive-large": "--ds-typography-paragraph-short-lg",
2512
+ "--fds-typography-interactive-medium": "--ds-typography-paragraph-short-md",
2513
+ "--fds-typography-interactive-small": "--ds-typography-paragraph-short-sm",
2514
+ "--fds-border_radius-interactive": "--ds-border-radius-md",
2515
+ "--fds-border_radius-small": "--ds-border-radius-sm",
2516
+ "--fds-border_radius-medium": "--ds-border-radius-md",
2517
+ "--fds-border_radius-large": "--ds-border-radius-lg",
2518
+ "--fds-border_radius-xlarge": "--ds-border-radius-lg",
2519
+ "--fds-border_radius-xxlarge": "--ds-border-radius-lg",
2520
+ "--fds-border_radius-xxxlarge": "--ds-border-radius-lg",
2521
+ "--fds-border_radius-xxxxlarge": "--ds-border-radius-lg",
2522
+ "--fds-border_radius-full": "--ds-border-radius-full",
2523
+ "--fds-base_spacing": "[delete]",
2524
+ "--fds-base_sizing": "[delete]",
2525
+ "--fds-border_width-default": "--ds-border-width-default",
2526
+ "--fds-border_width-active": "--ds-border-width-highlight",
2527
+ "--fds-border_width-tab_focus": "--ds-border-width-highlight",
2528
+ "--fds-shadow-xsmall": "--ds-shadow-xs",
2529
+ "--fds-shadow-small": "--ds-shadow-sm",
2530
+ "--fds-shadow-medium": "--ds-shadow-md",
2531
+ "--fds-shadow-large": "--ds-shadow-lg",
2532
+ "--fds-shadow-xlarge": "--ds-shadow-xl",
2533
+ "--fds-spacing-0": "--ds-size-0",
2534
+ "--fds-spacing-1": "--ds-size-1",
2535
+ "--fds-spacing-2": "--ds-size-2",
2536
+ "--fds-spacing-3": "--ds-size-3",
2537
+ "--fds-spacing-4": "--ds-size-4",
2538
+ "--fds-spacing-5": "--ds-size-5",
2539
+ "--fds-spacing-6": "--ds-size-6",
2540
+ "--fds-spacing-7": "--ds-size-7",
2541
+ "--fds-spacing-8": "--ds-size-8",
2542
+ "--fds-spacing-9": "--ds-size-9",
2543
+ "--fds-spacing-10": "--ds-size-10",
2544
+ "--fds-spacing-11": "--ds-size-11",
2545
+ "--fds-spacing-12": "--ds-size-12",
2546
+ "--fds-spacing-13": "--ds-size-13",
2547
+ "--fds-spacing-14": "--ds-size-14",
2548
+ "--fds-spacing-15": "--ds-size-15",
2549
+ "--fds-spacing-18": "--ds-size-18",
2550
+ "--fds-spacing-22": "--ds-size-22",
2551
+ "--fds-spacing-26": "--ds-size-26",
2552
+ "--fds-spacing-30": "--ds-size-30",
2553
+ "--fds-sizing-0": "--ds-size-0",
2554
+ "--fds-sizing-1": "--ds-size-1",
2555
+ "--fds-sizing-2": "--ds-size-2",
2556
+ "--fds-sizing-3": "--ds-size-3",
2557
+ "--fds-sizing-4": "--ds-size-4",
2558
+ "--fds-sizing-5": "--ds-size-5",
2559
+ "--fds-sizing-6": "--ds-size-6",
2560
+ "--fds-sizing-7": "--ds-size-7",
2561
+ "--fds-sizing-8": "--ds-size-8",
2562
+ "--fds-sizing-9": "--ds-size-9",
2563
+ "--fds-sizing-10": "--ds-size-10",
2564
+ "--fds-sizing-11": "--ds-size-11",
2565
+ "--fds-sizing-12": "--ds-size-12",
2566
+ "--fds-sizing-13": "--ds-size-13",
2567
+ "--fds-sizing-14": "--ds-size-14",
2568
+ "--fds-sizing-15": "--ds-size-15",
2569
+ "--fds-sizing-18": "--ds-size-18",
2570
+ "--fds-sizing-22": "--ds-size-22",
2571
+ "--fds-sizing-26": "--ds-size-26",
2572
+ "--fds-sizing-30": "--ds-size-30",
2573
+ "--fds-opacity-disabled": "--ds-opacity-disabled",
2574
+ "--fds-colors-blue-100": "--ds-global-blue-1",
2575
+ "--fds-colors-blue-200": "--ds-global-blue-2",
2576
+ "--fds-colors-blue-700": "--ds-global-blue-7",
2577
+ "--fds-colors-blue-800": "--ds-global-blue-8",
2578
+ "--fds-colors-blue-900": "--ds-global-blue-9",
2579
+ "--fds-colors-grey-100": "--ds-color-neutral-1",
2580
+ "--fds-colors-grey-200": "--ds-color-neutral-2",
2581
+ "--fds-colors-grey-400": "--ds-color-neutral-4",
2582
+ "--fds-colors-grey-600": "--ds-color-neutral-6",
2583
+ "--fds-colors-grey-700": "--ds-color-neutral-7",
2584
+ "--fds-colors-grey-800": "--ds-color-neutral-8",
2585
+ "--fds-colors-green-200": "--ds-global-green-2",
2586
+ "--fds-colors-green-300": "--ds-global-green-3",
2587
+ "--fds-colors-green-700": "--ds-global-green-7",
2588
+ "--fds-colors-green-800": "--ds-global-green-8",
2589
+ "--fds-colors-green-900": "--ds-global-green-9",
2590
+ "--fds-colors-yellow-100": "--ds-global-yellow-1",
2591
+ "--fds-colors-yellow-200": "--ds-global-yellow-2",
2592
+ "--fds-colors-yellow-300": "--ds-global-yellow-3",
2593
+ "--fds-colors-yellow-500": "--ds-global-yellow-5",
2594
+ "--fds-colors-blue-400": "--ds-global-blue-4",
2595
+ "--fds-colors-grey-300": "--ds-global-grey-3",
2596
+ "--fds-colors-orange-600": "--ds-global-orange-6",
2597
+ "--fds-colors-orange-700": "--ds-global-orange-7",
2598
+ "--fds-colors-orange-800": "--ds-global-orange-8",
2599
+ "--fds-colors-red-800": "--ds-global-red-8",
2600
+ "--fds-colors-purple-700": "--ds-global-purple-7",
2601
+ "--fds-colors-red-100": "--ds-global-red-1",
2602
+ "--fds-colors-red-200": "--ds-global-red-2",
2603
+ "--fds-colors-red-500": "--ds-global-red-5",
2604
+ "--fds-colors-red-600": "--ds-global-red-6",
2605
+ "--fds-colors-red-700": "--ds-global-red-7",
2606
+ "--fds-brand-alt1-100": "--ds-color-brand1-1",
2607
+ "--fds-brand-alt1-200": "--ds-color-brand1-2",
2608
+ "--fds-brand-alt1-300": "--ds-color-brand1-3",
2609
+ "--fds-brand-alt1-400": "--ds-color-brand1-4",
2610
+ "--fds-brand-alt1-500": "--ds-color-brand1-5",
2611
+ "--fds-brand-alt1-600": "--ds-color-brand1-6",
2612
+ "--fds-brand-alt1-700": "--ds-color-brand1-7",
2613
+ "--fds-brand-alt1-800": "--ds-color-brand1-8",
2614
+ "--fds-brand-alt1-900": "--ds-color-brand1-9",
2615
+ "--fds-brand-alt2-100": "--ds-color-brand2-1",
2616
+ "--fds-brand-alt2-200": "--ds-color-brand2-2",
2617
+ "--fds-brand-alt2-300": "--ds-color-brand2-3",
2618
+ "--fds-brand-alt2-400": "--ds-color-brand2-4",
2619
+ "--fds-brand-alt2-500": "--ds-color-brand2-5",
2620
+ "--fds-brand-alt2-600": "--ds-color-brand2-6",
2621
+ "--fds-brand-alt2-700": "--ds-color-brand2-7",
2622
+ "--fds-brand-alt2-800": "--ds-color-brand2-8",
2623
+ "--fds-brand-alt2-900": "--ds-color-brand2-9",
2624
+ "--fds-brand-alt3-100": "--ds-color-brand3-1",
2625
+ "--fds-brand-alt3-200": "--ds-color-brand3-2",
2626
+ "--fds-brand-alt3-300": "--ds-color-brand3-3",
2627
+ "--fds-brand-alt3-400": "--ds-color-brand3-4",
2628
+ "--fds-brand-alt3-500": "--ds-color-brand3-5",
2629
+ "--fds-brand-alt3-600": "--ds-color-brand3-6",
2630
+ "--fds-brand-alt3-700": "--ds-color-brand3-7",
2631
+ "--fds-brand-alt3-800": "--ds-color-brand3-8",
2632
+ "--fds-brand-alt3-900": "--ds-color-brand3-9"
2633
+ })
2634
+ ]
2635
+ });
2636
+
2637
+ // src/migrations/color-rename-next49.ts
2638
+ import * as R9 from "ramda";
2639
+ var replace = (oldTemplate, newTemplate, colors2, placeholder = "[color]") => R9.reduce(
2640
+ (acc, color) => {
2641
+ acc[oldTemplate.replace(placeholder, color)] = newTemplate.replace(placeholder, color);
2642
+ return acc;
2643
+ },
2644
+ {},
2645
+ colors2
2646
+ );
2647
+ var colors = ["neutral", "accent", "brand1", "brand2", "brand3", "danger", "warning", "success", "info"];
2648
+ var color_rename_next49_default = (glob2) => {
2649
+ const renames = {
2650
+ // Background
2651
+ "--ds-color-background-subtle": "--ds-color-background-tinted",
2652
+ ...replace("--ds-color-[color]-background-subtle", "--ds-color-[color]-background-tinted", colors),
2653
+ // Surface
2654
+ "--ds-color-surface-default": "--ds-color-surface-tinted",
2655
+ ...replace("--ds-color-[color]-surface-default", "--ds-color-[color]-surface-tinted", colors),
2656
+ // Contrast
2657
+ "--ds-color-contrast-default": "--ds-color-base-contrast-default",
2658
+ "--ds-color-contrast-subtle": "--ds-color-base-contrast-subtle",
2659
+ ...replace("--ds-color-[color]-contrast-default", "--ds-color-[color]-base-contrast-default", colors),
2660
+ ...replace("--ds-color-[color]-contrast-subtle", "--ds-color-[color]-base-contrast-subtle", colors)
2661
+ };
2662
+ console.log(`Renaming ${Object.keys(renames).length} variables`, renames);
2663
+ return runCssCodemod({
2664
+ globPattern: glob2,
2665
+ plugins: [
2666
+ // https://github.com/digdir/designsystemet/issues/3046
2667
+ cssVarRename(renames)
2668
+ ]
2669
+ });
2670
+ };
2671
+
2672
+ // src/migrations/index.ts
2673
+ var migrations_default = {
2674
+ "css-beta-to-v1": beta_to_v1_default,
2675
+ "css-renames-next48-to-next49": color_rename_next49_default
2676
+ };
2677
+
2678
+ // src/tokens/build.ts
2679
+ import path2 from "node:path";
2680
+ import chalk6 from "chalk";
2681
+ import * as R23 from "ramda";
2682
+
2683
+ // src/tokens/process/theme.ts
2684
+ import * as R10 from "ramda";
2685
+ import chalk3 from "chalk";
2686
+
2687
+ // package.json
2688
+ var package_default = {
2689
+ name: "@digdir/designsystemet",
2690
+ version: "1.0.5",
2691
+ description: "CLI for Designsystemet",
2692
+ author: "Designsystemet team",
2693
+ engines: {
2694
+ node: ">=22.14.0"
2695
+ },
2696
+ repository: {
2697
+ type: "git",
2698
+ url: "git+https://github.com/digdir/designsystemet.git"
2699
+ },
2700
+ homepage: "https://github.com/digdir/designsystemet/tree/main/scripts/cli",
2701
+ license: "MIT",
2702
+ type: "module",
2703
+ main: "./dist/src/index.js",
2704
+ files: [
2705
+ "./dist/**"
2706
+ ],
2707
+ bin: "dist/bin/designsystemet.js",
2708
+ exports: {
2709
+ ".": {
2710
+ import: "./dist/src/index.js"
2711
+ },
2712
+ "./color": {
2713
+ import: "./dist/src/colors/index.js"
2714
+ },
2715
+ "./tokens": {
2716
+ import: "./dist/src/tokens/index.js"
2717
+ }
2718
+ },
2719
+ publishConfig: {
2720
+ access: "public"
2721
+ },
2722
+ scripts: {
2723
+ designsystemet: "tsx ./bin/designsystemet.ts",
2724
+ "build:tokens": "yarn designsystemet tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
2725
+ "build:tokens:debug": "tsx --inspect-brk ./bin/designsystemet.ts tokens build -p -t ../../design-tokens -o ../../packages/theme/brand --clean",
2726
+ build: "tsup && yarn build:types && yarn build:json-schema",
2727
+ "build:types": "tsc --emitDeclarationOnly --declaration",
2728
+ "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
2729
+ types: "tsc --noEmit",
2730
+ "test:tokens-create-options": "yarn designsystemet tokens create -m dominant:#007682 -n #003333 -b 99 -o ./test-tokens/options --theme options --clean",
2731
+ "test:tokens-create-config": "yarn designsystemet tokens create --config ./test/test-tokens.config.json",
2732
+ "test:tokens-build": "yarn designsystemet tokens build -t ./test-tokens/options -o ./test-tokens/options-build --clean",
2733
+ "test:tokens-build-config": "yarn designsystemet tokens build -t ./test-tokens/config -o ./test-tokens/config-build --clean",
2734
+ "test:tokens-create-and-build-options": "yarn test:tokens-create-options && yarn test:tokens-build",
2735
+ "test:tokens-create-and-build-config": "yarn test:tokens-create-config && yarn test:tokens-build-config",
2736
+ test: "yarn test:tokens-create-and-build-options && yarn test:tokens-create-and-build-config",
2737
+ "internal:tokens-create": "yarn designsystemet tokens create --config ./internal.config.json",
2738
+ "update:template": "tsx ./src/scripts/update-template.ts",
2739
+ "update:design-tokens": "yarn internal:tokens-create && tsx ./src/scripts/update-design-tokens.ts",
2740
+ verify: "yarn test && yarn update:template && yarn update:design-tokens"
2741
+ },
2742
+ dependencies: {
2743
+ "@commander-js/extra-typings": "^13.1.0",
2744
+ "@tokens-studio/sd-transforms": "1.2.12",
2745
+ "apca-w3": "^0.1.9",
2746
+ chalk: "^5.4.1",
2747
+ "change-case": "^5.4.4",
2748
+ "chroma-js": "^3.1.2",
2749
+ commander: "^13.1.0",
2750
+ "fast-glob": "^3.3.3",
2751
+ hsluv: "^1.0.1",
2752
+ "object-hash": "^3.0.0",
2753
+ postcss: "^8.5.3",
2754
+ ramda: "^0.30.1",
2755
+ "style-dictionary": "^4.3.3",
2756
+ zod: "^3.24.2",
2757
+ "zod-validation-error": "^3.4.0"
2758
+ },
2759
+ devDependencies: {
2760
+ "@types/apca-w3": "^0.1.3",
2761
+ "@types/chroma-js": "^3.1.1",
2762
+ "@types/fs-extra": "^11.0.4",
2763
+ "@types/glob": "^8.1.0",
2764
+ "@types/jscodeshift": "^0.12.0",
2765
+ "@types/node": "^22.14.0",
2766
+ "@types/object-hash": "^3.0.6",
2767
+ "@types/ramda": "^0.30.2",
2768
+ "fs-extra": "^11.3.0",
2769
+ "ts-toolbelt": "^9.6.0",
2770
+ tslib: "^2.8.1",
2771
+ tsup: "^8.4.0",
2772
+ tsx: "^4.19.3",
2773
+ typescript: "^5.8.2",
2774
+ "zod-to-json-schema": "^3.24.5"
2775
+ }
2776
+ };
2777
+
2778
+ // src/tokens/process/theme.ts
2779
+ var defaultFileHeader = `build: v${package_default.version}`;
2780
+ var createThemeCSSFiles = ({
2781
+ processedBuilds,
2782
+ fileHeader: fileHeader2 = defaultFileHeader
2783
+ }) => {
2784
+ const groupedByTheme = {};
2785
+ for (const [_, buildResults] of Object.entries(R10.dissoc("types", processedBuilds))) {
2786
+ for (const buildResult of buildResults) {
2787
+ const themeName = buildResult.permutation.theme;
2788
+ const newOutputs = buildResult.formatted;
2789
+ if (R10.isNotEmpty(newOutputs)) {
2790
+ const currentOutputs = groupedByTheme[themeName] ?? [];
2791
+ groupedByTheme[themeName] = R10.concat(currentOutputs, newOutputs);
2792
+ }
2793
+ }
2794
+ }
2795
+ const sortOrder = [
2796
+ "color-scheme/light",
2797
+ "typography/secondary",
2798
+ "semantic",
2799
+ "color-scheme/dark",
2800
+ "color-scheme/contrast",
2801
+ "typography/primary",
2802
+ "color/"
2803
+ ];
2804
+ const sortByDefinedOrder = R10.sortBy((file) => {
2805
+ const filePath = file.destination || "";
2806
+ const sortIndex = sortOrder.findIndex((sortElement) => {
2807
+ if (sortElement.endsWith("/")) {
2808
+ return filePath.includes(sortElement);
2809
+ }
2810
+ return filePath.includes(`${sortElement}.css`);
2811
+ });
2812
+ if (sortIndex === -1) {
2813
+ console.error(
2814
+ chalk3.yellow("WARNING: CSS section does not have a defined sort order:", filePath.replace(".css", ""))
2815
+ );
2816
+ console.log(
2817
+ chalk3.dim(
2818
+ `
2819
+ The section will currently be added to the end of the entry file, but the exact
2820
+ order may change due to nondeterminism.`.trim()
2821
+ )
2822
+ );
2823
+ return Infinity;
2824
+ }
2825
+ return sortIndex;
2826
+ });
2827
+ const header = `@charset "UTF-8";
2828
+
2829
+ @layer ds.theme, ds.base, ds.utilities, ds.components;
2830
+
2831
+ /*
2832
+ ${fileHeader2}
2833
+ */
2834
+
2835
+ `;
2836
+ const sortAlphabetically = R10.sort(R10.ascend((x) => x.destination || ""));
2837
+ const pickOutputs = R10.map(R10.view(R10.lensProp("output")));
2838
+ const themeCSSFile = R10.pipe(
2839
+ sortAlphabetically,
2840
+ sortByDefinedOrder,
2841
+ pickOutputs,
2842
+ R10.join("\n"),
2843
+ (content) => header + content
2844
+ );
2845
+ const themeCSSFiles = Object.entries(groupedByTheme).map(([theme, files]) => ({
2846
+ destination: `${theme}.css`,
2847
+ output: themeCSSFile(files)
2848
+ }));
2849
+ return themeCSSFiles;
2850
+ };
2851
+
2852
+ // src/tokens/process/platform.ts
2853
+ import chalk5 from "chalk";
2854
+ import * as R22 from "ramda";
2855
+ import StyleDictionary2 from "style-dictionary";
2856
+
2857
+ // src/tokens/types.ts
2858
+ var colorCategories = {
2859
+ main: "main",
2860
+ support: "support"
2861
+ };
2862
+
2863
+ // src/tokens/process/configs.ts
2864
+ import { register } from "@tokens-studio/sd-transforms";
2865
+ import * as R21 from "ramda";
2866
+ import StyleDictionary from "style-dictionary";
2867
+
2868
+ // src/tokens/utils.ts
2869
+ import * as R11 from "ramda";
2870
+ var mapToLowerCase = R11.map(R11.toLower);
2871
+ var hasAnyTruth = R11.any(R11.equals(true));
2872
+ var getType = (token) => (token.$type ?? token.type) || "";
2873
+ var getValue = (token) => token.$value ?? token.value;
2874
+ var typeEquals = R11.curry((types, token) => {
2875
+ if (R11.isNil(token)) {
2876
+ return false;
2877
+ }
2878
+ return R11.includes(R11.toLower(getType(token)), R11.map(R11.toLower, Array.isArray(types) ? types : [types]));
2879
+ });
2880
+ var pathStartsWithOneOf = R11.curry((paths, token) => {
2881
+ if (R11.isNil(token)) {
2882
+ return false;
2883
+ }
2884
+ const tokenPath = mapToLowerCase(token.path);
2885
+ const matchPathsStartingWith = R11.map((path5) => R11.startsWith([path5], tokenPath), mapToLowerCase(paths));
2886
+ return hasAnyTruth(matchPathsStartingWith);
2887
+ });
2888
+ function isSemanticToken(token) {
2889
+ return token.filePath.includes("semantic/");
2890
+ }
2891
+ function isSemanticColorToken(token, color) {
2892
+ return token.filePath.includes("semantic/") && R11.startsWith(["color", color], token.path);
2893
+ }
2894
+ function isGlobalColorToken(token) {
2895
+ return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
2896
+ }
2897
+ function isColorCategoryToken(token, category) {
2898
+ if (!category) {
2899
+ return ["main", "support"].some((c) => isColorCategoryToken(token, c));
2900
+ }
2901
+ return R11.startsWith(["color", category], token.path);
2902
+ }
2903
+ var isDigit = (s) => /^\d+$/.test(s);
2904
+ function traverseObj(obj, fn) {
2905
+ for (const key in obj) {
2906
+ const prop2 = obj[key];
2907
+ if (prop2 != null) {
2908
+ fn.apply(null, [obj, key, prop2]);
2909
+ if (typeof prop2 === "object") {
2910
+ traverseObj(prop2, fn);
2911
+ }
2912
+ }
2913
+ }
2914
+ return obj;
2915
+ }
2916
+ function inlineTokens(shouldInline, tokens) {
2917
+ const [inlineableTokens, otherTokens] = R11.partition(shouldInline, tokens);
2918
+ return otherTokens.map((token) => {
2919
+ let transformed = getValue(token.original);
2920
+ for (const ref of inlineableTokens) {
2921
+ const refName = ref.path.join(".");
2922
+ if (typeof transformed === "string") {
2923
+ transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
2924
+ }
2925
+ }
2926
+ const tokenWithInlinedRefs = R11.set(R11.lensPath(["original", "$value"]), transformed, token);
2927
+ return tokenWithInlinedRefs;
2928
+ });
2929
+ }
2930
+
2931
+ // src/tokens/process/configs/color.ts
2932
+ import * as R16 from "ramda";
2933
+
2934
+ // src/tokens/process/formats/css/color.ts
2935
+ import * as R12 from "ramda";
2936
+ import { createPropertyFormatter } from "style-dictionary/utils";
2937
+ var prefersColorScheme = (colorScheme2, content) => `
2938
+ @media (prefers-color-scheme: ${colorScheme2}) {
2939
+ [data-color-scheme="auto"] ${content}
2940
+ }
2941
+ `;
2942
+ var colorScheme = {
2943
+ name: "ds/css-colorscheme",
2944
+ format: async ({ dictionary, file, options, platform }) => {
2945
+ const { allTokens } = dictionary;
2946
+ const { outputReferences, usesDtcg } = options;
2947
+ const { selector, colorScheme: colorScheme2, layer } = platform;
2948
+ const colorScheme_ = colorScheme2;
2949
+ const format = createPropertyFormatter({
2950
+ outputReferences,
2951
+ dictionary,
2952
+ format: "css",
2953
+ usesDtcg
2954
+ });
2955
+ const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
2956
+ color-scheme: ${colorScheme_};
2957
+ ` : "";
2958
+ const filteredAllTokens = allTokens.filter(
2959
+ R12.allPass([
2960
+ R12.anyPass([
2961
+ // Include semantic tokens in the output
2962
+ isSemanticToken,
2963
+ // Include global color tokens
2964
+ isGlobalColorToken
2965
+ ]),
2966
+ // Don't include color category tokens -- they are exported separately
2967
+ (t) => !isColorCategoryToken(t)
2968
+ ])
2969
+ );
2970
+ const formattedTokens = filteredAllTokens.map(format).join("\n");
2971
+ const content = `{
2972
+ ${formattedTokens}
2973
+ ${colorSchemeProperty}}
2974
+ `;
2975
+ const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
2976
+ const body = R12.isNotNil(layer) ? `@layer ${layer} {
2977
+ ${selector} ${content} ${autoSelectorContent}
2978
+ }
2979
+ ` : `${selector} ${content} ${autoSelectorContent}
2980
+ `;
2981
+ return body;
2982
+ }
2983
+ };
2984
+ var colorCategory = {
2985
+ name: "ds/css-colorcategory",
2986
+ format: async ({ dictionary, file, options, platform }) => {
2987
+ const { outputReferences, usesDtcg } = options;
2988
+ const { selector, layer } = platform;
2989
+ const format = R12.compose(
2990
+ createPropertyFormatter({
2991
+ outputReferences,
2992
+ dictionary,
2993
+ format: "css",
2994
+ usesDtcg
2995
+ }),
2996
+ (token) => ({
2997
+ ...token,
2998
+ name: token.name.replace(/color-\w+-/, "color-"),
2999
+ original: {
3000
+ ...token.original,
3001
+ $value: new RegExp(`color-(${colorCategories.main}|${colorCategories.support})-`).test(token.name) ? token.original.$value : `{${token.path.join(".")}}`
3002
+ }
3003
+ })
3004
+ );
3005
+ const formattedTokens = dictionary.allTokens.map(format).join("\n");
3006
+ const content = `{
3007
+ ${formattedTokens}
3008
+ }
3009
+ `;
3010
+ const body = R12.isNotNil(layer) ? `@layer ${layer} {
3011
+ ${selector} ${content}
3012
+ }
3013
+ ` : `${selector} ${content}
3014
+ `;
3015
+ return body;
3016
+ }
3017
+ };
3018
+
3019
+ // src/tokens/process/formats/css/semantic.ts
3020
+ import * as R13 from "ramda";
3021
+ import { createPropertyFormatter as createPropertyFormatter2 } from "style-dictionary/utils";
3022
+ var isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
3023
+ var isNumericSizeToken = (t) => pathStartsWithOneOf(["size"], t) && isDigit(t.path[1]);
3024
+ var isSizeToken = (t) => pathStartsWithOneOf(["size"], t);
3025
+ var isInlineTokens = R13.anyPass([isNumericBorderRadiusToken, isNumericSizeToken, isSizeToken]);
3026
+ var overrideSizingFormula = (format, token) => {
3027
+ const [name, value] = format(token).split(":");
3028
+ const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
3029
+ const round = `round(down, ${calc}, 0.0625rem)`;
3030
+ return {
3031
+ name,
3032
+ round,
3033
+ calc
3034
+ };
3035
+ };
3036
+ var formatSizingTokens = (format, tokens) => {
3037
+ const { round, calc } = R13.reduce(
3038
+ (acc, token) => {
3039
+ const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
3040
+ return {
3041
+ round: [...acc.round, `${name}: ${round2};`],
3042
+ calc: [...acc.calc, `${name}: ${calc2};`]
3043
+ };
3044
+ },
3045
+ { round: [], calc: [] },
3046
+ tokens
3047
+ );
3048
+ return `
3049
+ ${calc.join("\n")}
3050
+
3051
+ @supports (width: round(down, .1em, 1px)) {
3052
+ ${round.join("\n")}
3053
+ }`;
3054
+ };
3055
+ var semantic = {
3056
+ name: "ds/css-semantic",
3057
+ format: async ({ dictionary, file, options, platform }) => {
3058
+ const { outputReferences, usesDtcg } = options;
3059
+ const { selector, layer } = platform;
3060
+ const format = createPropertyFormatter2({
3061
+ outputReferences,
3062
+ dictionary,
3063
+ format: "css",
3064
+ usesDtcg
3065
+ });
3066
+ const tokens = inlineTokens(isInlineTokens, dictionary.allTokens);
3067
+ const filteredTokens = R13.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
3068
+ const [sizingTokens, restTokens] = R13.partition(
3069
+ (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]),
3070
+ filteredTokens
3071
+ );
3072
+ const formattedTokens = [R13.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
3073
+ const content = `{
3074
+ ${formattedTokens.join("\n")}
3075
+ }
3076
+ `;
3077
+ const body = R13.isNotNil(layer) ? `@layer ${layer} {
3078
+ ${selector} ${content}
3079
+ }
3080
+ ` : `${selector} ${content}
3081
+ `;
3082
+ return body;
3083
+ }
3084
+ };
3085
+
3086
+ // src/tokens/process/formats/css/typography.ts
3087
+ import * as R14 from "ramda";
3088
+ import { createPropertyFormatter as createPropertyFormatter3 } from "style-dictionary/utils";
3089
+ var typographyFontFamilyPredicate = R14.allPass([
3090
+ R14.pathSatisfies(R14.includes("typography"), ["path"]),
3091
+ R14.pathSatisfies(R14.includes("fontFamily"), ["path"])
3092
+ ]);
3093
+ var typography = {
3094
+ name: "ds/css-typography",
3095
+ format: async ({ dictionary, file, options, platform }) => {
3096
+ const { outputReferences, usesDtcg } = options;
3097
+ const { selector, layer } = platform;
3098
+ const format = createPropertyFormatter3({
3099
+ outputReferences,
3100
+ dictionary,
3101
+ format: "css",
3102
+ usesDtcg
3103
+ });
3104
+ const filteredTokens = R14.reject(typographyFontFamilyPredicate, dictionary.allTokens);
3105
+ const formattedTokens = R14.pipe(R14.map(format), R14.join("\n"))(filteredTokens);
3106
+ const content = selector ? `${selector} {
3107
+ ${formattedTokens}
3108
+ }` : formattedTokens;
3109
+ const body = R14.isNotNil(layer) ? `@layer ${layer} {
3110
+ ${content}
3111
+ }` : content;
3112
+ return body;
3113
+ }
3114
+ };
3115
+
3116
+ // src/tokens/process/formats/css.ts
3117
+ var formats = {
3118
+ colorScheme,
3119
+ colorCategory,
3120
+ semantic,
3121
+ typography
3122
+ };
3123
+
3124
+ // src/tokens/process/transformers.ts
3125
+ import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
3126
+ import * as R15 from "ramda";
3127
+ var isPx = R15.test(/\b\d+px\b/g);
3128
+ var sizeRem = {
3129
+ name: "ds/size/toRem",
3130
+ type: "value",
3131
+ transitive: true,
3132
+ filter: (token) => {
3133
+ const hasWantedType = typeEquals(["dimension", "fontsize"], token);
3134
+ const hasWantedPath = pathStartsWithOneOf(["spacing", "sizing", "border-radius", "font-size"], token);
3135
+ return hasWantedType && hasWantedPath;
3136
+ },
3137
+ transform: (token, config) => {
3138
+ const value = getValue(token);
3139
+ if (isPx(value)) {
3140
+ const baseFont = config.basePxFontSize || 16;
3141
+ const size = parseInt(value);
3142
+ if (size === 0) {
3143
+ return "0";
3144
+ }
3145
+ return `${size / baseFont}rem`;
3146
+ }
3147
+ return value;
3148
+ }
3149
+ };
3150
+ var typographyName = {
3151
+ name: "name/typography",
3152
+ type: "name",
3153
+ transitive: true,
3154
+ // expanded tokens have different type so we match on path instead
3155
+ filter: (token) => pathStartsWithOneOf(["typography"], token),
3156
+ transform: (token) => {
3157
+ return token.name.replace("-typography", "");
3158
+ }
3159
+ };
3160
+ var resolveMath = {
3161
+ name: "ds/resolveMath",
3162
+ type: "value",
3163
+ transitive: true,
3164
+ filter: (token) => {
3165
+ const isValidValue = ["string", "object"].includes(typeof getValue(token));
3166
+ const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
3167
+ return isValidValue && isTokenOfInterest;
3168
+ },
3169
+ transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
3170
+ };
3171
+ var unitless = {
3172
+ name: "ds/unitless",
3173
+ type: "value",
3174
+ transitive: true,
3175
+ filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
3176
+ transform: (token) => parseInt(getValue(token))
3177
+ };
3178
+
3179
+ // src/tokens/process/configs/shared.ts
3180
+ var prefix = "ds";
3181
+ var basePxFontSize = 16;
3182
+ var dsTransformers = [
3183
+ "name/kebab",
3184
+ resolveMath.name,
3185
+ "ts/size/px",
3186
+ sizeRem.name,
3187
+ unitless.name,
3188
+ "ts/typography/fontWeight",
3189
+ typographyName.name,
3190
+ "ts/color/modifiers",
3191
+ "ts/color/css/hexrgba",
3192
+ "ts/size/lineheight",
3193
+ "shadow/css/shorthand"
3194
+ ];
3195
+
3196
+ // src/tokens/process/configs/color.ts
3197
+ var colorSchemeVariables = ({ "color-scheme": colorScheme2 = "light", theme }) => {
3198
+ const selector = `${colorScheme2 === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme2}"]`;
3199
+ const layer = `ds.theme.color-scheme.${colorScheme2}`;
3200
+ return {
3201
+ preprocessors: ["tokens-studio"],
3202
+ platforms: {
3203
+ css: {
3204
+ // custom
3205
+ colorScheme: colorScheme2,
3206
+ theme,
3207
+ selector,
3208
+ layer,
3209
+ //
3210
+ prefix,
3211
+ buildPath: `${theme}/`,
3212
+ transforms: dsTransformers,
3213
+ files: [
3214
+ {
3215
+ destination: `color-scheme/${colorScheme2}.css`,
3216
+ format: formats.colorScheme.name,
3217
+ filter: (token) => typeEquals("color", token) && !R16.startsWith(["global"], token.path)
3218
+ }
3219
+ ],
3220
+ options: {
3221
+ outputReferences: false
3222
+ }
3223
+ }
3224
+ }
3225
+ };
3226
+ };
3227
+ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, ...permutation }) => {
3228
+ const category = opts.category;
3229
+ const color = category === "builtin" ? opts.color : permutation[`${category}-color`];
3230
+ if (!color) {
3231
+ throw new Error(
3232
+ category === "builtin" ? `Missing color for built-in color ${opts.color}` : `Missing color for category ${category}`
3233
+ );
3234
+ }
3235
+ const layer = `ds.theme.color`;
3236
+ const isRootColor = color === buildOptions?.rootColor;
3237
+ const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
3238
+ const config = {
3239
+ preprocessors: ["tokens-studio"],
3240
+ platforms: {
3241
+ css: {
3242
+ // custom
3243
+ colorScheme: colorScheme2,
3244
+ theme,
3245
+ selector,
3246
+ layer,
3247
+ //
3248
+ prefix,
3249
+ buildPath: `${theme}/`,
3250
+ transforms: dsTransformers,
3251
+ files: [
3252
+ {
3253
+ destination: `color/${color}.css`,
3254
+ format: formats.colorCategory.name,
3255
+ filter: (token) => category === "builtin" ? isSemanticColorToken(token, color) : isColorCategoryToken(token, category)
3256
+ }
3257
+ ],
3258
+ options: {
3259
+ outputReferences: true
3260
+ }
3261
+ }
3262
+ }
3263
+ };
3264
+ return config;
3265
+ };
3266
+
3267
+ // src/tokens/process/configs/semantic.ts
3268
+ import * as R17 from "ramda";
3269
+ import { outputReferencesFilter } from "style-dictionary/utils";
3270
+ var semanticVariables = ({ theme }) => {
3271
+ const selector = `:root`;
3272
+ const layer = `ds.theme.semantic`;
3273
+ return {
3274
+ preprocessors: ["tokens-studio"],
3275
+ platforms: {
3276
+ css: {
3277
+ // custom
3278
+ theme,
3279
+ basePxFontSize,
3280
+ selector,
3281
+ layer,
3282
+ //
3283
+ prefix,
3284
+ buildPath: `${theme}/`,
3285
+ transforms: dsTransformers,
3286
+ files: [
3287
+ {
3288
+ destination: `semantic.css`,
3289
+ format: formats.semantic.name,
3290
+ filter: (token) => {
3291
+ const isUwantedToken = R17.anyPass([R17.includes("primitives/global")])(token.filePath);
3292
+ const isPrivateToken = R17.includes("_", token.path);
3293
+ const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
3294
+ const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
3295
+ const unwantedTokens = !(unwantedPaths || unwantedTypes || isPrivateToken || isUwantedToken);
3296
+ return unwantedTokens;
3297
+ }
3298
+ }
3299
+ ],
3300
+ options: {
3301
+ outputReferences: (token, options) => {
3302
+ const include = pathStartsWithOneOf(["border-radius"], token);
3303
+ const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
3304
+ return (include || isWantedSize) && outputReferencesFilter(token, options);
3305
+ }
3306
+ }
3307
+ }
3308
+ }
3309
+ };
3310
+ };
3311
+
3312
+ // src/tokens/process/configs/storefront.ts
3313
+ import * as R19 from "ramda";
3314
+ import { outputReferencesFilter as outputReferencesFilter2 } from "style-dictionary/utils";
3315
+
3316
+ // src/tokens/process/formats/js-tokens.ts
3317
+ import * as R18 from "ramda";
3318
+ import { createPropertyFormatter as createPropertyFormatter4, fileHeader } from "style-dictionary/utils";
3319
+ var groupByType = R18.groupBy((token) => getType(token));
3320
+ var removeUnwatedTokens = R18.pipe(
3321
+ R18.reject((token) => isColorCategoryToken(token)),
3322
+ R18.reject((token) => R18.any((path5) => path5.startsWith("_"))(token.path))
3323
+ );
3324
+ var dissocExtensions = R18.pipe(R18.dissoc("$extensions"), R18.dissocPath(["original", "$extensions"]));
3325
+ var removeUnwatedProps = R18.map((token) => dissocExtensions(token));
3326
+ var toCssVarName = R18.pipe(R18.split(":"), R18.head, R18.trim);
3327
+ var jsTokens = {
3328
+ name: "ds/js-tokens",
3329
+ format: async ({ dictionary, file, options }) => {
3330
+ const { usesDtcg, outputReferences } = options;
3331
+ const format = createPropertyFormatter4({
3332
+ outputReferences,
3333
+ dictionary,
3334
+ format: "css",
3335
+ usesDtcg
3336
+ });
3337
+ const formatTokens = R18.map((token) => {
3338
+ if (pathStartsWithOneOf(["size", "_size"], token)) {
3339
+ const { calc, name } = overrideSizingFormula(format, token);
3340
+ return {
3341
+ ...token,
3342
+ name: name.trim(),
3343
+ $value: calc.trim()
3344
+ };
3345
+ }
3346
+ return {
3347
+ ...token,
3348
+ name: toCssVarName(format(token))
3349
+ };
3350
+ });
3351
+ const processTokens = R18.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
3352
+ const tokens = processTokens(inlineTokens(isInlineTokens, dictionary.allTokens));
3353
+ const content = Object.entries(tokens).map(
3354
+ ([name, token]) => `export const ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")}
3355
+ `
3356
+ ).join("\n");
3357
+ return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
3358
+ }
3359
+ };
3360
+
3361
+ // src/tokens/process/configs/storefront.ts
3362
+ var typescriptTokens = ({ "color-scheme": colorScheme2, theme }) => {
3363
+ return {
3364
+ preprocessors: ["tokens-studio"],
3365
+ platforms: {
3366
+ ts: {
3367
+ prefix,
3368
+ basePxFontSize,
3369
+ transforms: dsTransformers,
3370
+ buildPath: `${theme}/`,
3371
+ files: [
3372
+ {
3373
+ destination: `${colorScheme2}.ts`,
3374
+ format: jsTokens.name,
3375
+ filter: (token) => {
3376
+ if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R19.includes("semantic", token.filePath))
3377
+ return false;
3378
+ const isSemanticColor = R19.includes("semantic", token.filePath) && typeEquals(["color"], token);
3379
+ const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
3380
+ return isSemanticColor || wantedTypes;
3381
+ }
3382
+ }
3383
+ ],
3384
+ options: {
3385
+ outputReferences: (token, options) => {
3386
+ const include = pathStartsWithOneOf(["border-radius"], token);
3387
+ const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
3388
+ return (include || isWantedSize) && outputReferencesFilter2(token, options);
3389
+ }
3390
+ }
3391
+ }
3392
+ }
3393
+ };
3394
+ };
3395
+
3396
+ // src/tokens/process/configs/typography.ts
3397
+ import { expandTypesMap } from "@tokens-studio/sd-transforms";
3398
+ var typographyVariables = ({ theme, typography: typography2 }) => {
3399
+ const selector = `${typography2 === "primary" ? ":root, " : ""}[data-typography="${typography2}"]`;
3400
+ const layer = `ds.theme.typography.${typography2}`;
3401
+ return {
3402
+ usesDtcg: true,
3403
+ preprocessors: ["tokens-studio"],
3404
+ expand: {
3405
+ include: ["typography"],
3406
+ typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
3407
+ },
3408
+ platforms: {
3409
+ css: {
3410
+ prefix,
3411
+ typography: typography2,
3412
+ selector,
3413
+ layer,
3414
+ buildPath: `${theme}/`,
3415
+ basePxFontSize,
3416
+ transforms: [
3417
+ "name/kebab",
3418
+ "ts/size/px",
3419
+ sizeRem.name,
3420
+ "ts/size/lineheight",
3421
+ "ts/typography/fontWeight",
3422
+ typographyName.name
3423
+ ],
3424
+ files: [
3425
+ {
3426
+ destination: `typography/${typography2}.css`,
3427
+ format: formats.typography.name,
3428
+ filter: (token) => {
3429
+ const included = typeEquals(
3430
+ ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
3431
+ token
3432
+ );
3433
+ if (/primitives\/modes\/typography\/(primary|secondary)/.test(token.filePath)) return false;
3434
+ return included && !pathStartsWithOneOf(["spacing", "sizing", "size", "_size", "border-width", "border-radius"], token);
3435
+ }
3436
+ }
3437
+ ]
3438
+ }
3439
+ }
3440
+ };
3441
+ };
3442
+
3443
+ // ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
3444
+ var BoxShadowTypes;
3445
+ (function(BoxShadowTypes2) {
3446
+ BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
3447
+ BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
3448
+ })(BoxShadowTypes || (BoxShadowTypes = {}));
3449
+
3450
+ // ../../node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
3451
+ var ColorModifierTypes;
3452
+ (function(ColorModifierTypes2) {
3453
+ ColorModifierTypes2["LIGHTEN"] = "lighten";
3454
+ ColorModifierTypes2["DARKEN"] = "darken";
3455
+ ColorModifierTypes2["MIX"] = "mix";
3456
+ ColorModifierTypes2["ALPHA"] = "alpha";
3457
+ })(ColorModifierTypes || (ColorModifierTypes = {}));
3458
+
3459
+ // ../../node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
3460
+ var ColorSpaceTypes;
3461
+ (function(ColorSpaceTypes2) {
3462
+ ColorSpaceTypes2["LCH"] = "lch";
3463
+ ColorSpaceTypes2["SRGB"] = "srgb";
3464
+ ColorSpaceTypes2["P3"] = "p3";
3465
+ ColorSpaceTypes2["HSL"] = "hsl";
3466
+ })(ColorSpaceTypes || (ColorSpaceTypes = {}));
3467
+
3468
+ // ../../node_modules/@tokens-studio/types/dist/constants/Properties.js
3469
+ var Properties;
3470
+ (function(Properties2) {
3471
+ Properties2["sizing"] = "sizing";
3472
+ Properties2["height"] = "height";
3473
+ Properties2["width"] = "width";
3474
+ Properties2["spacing"] = "spacing";
3475
+ Properties2["verticalPadding"] = "verticalPadding";
3476
+ Properties2["horizontalPadding"] = "horizontalPadding";
3477
+ Properties2["paddingTop"] = "paddingTop";
3478
+ Properties2["paddingRight"] = "paddingRight";
3479
+ Properties2["paddingBottom"] = "paddingBottom";
3480
+ Properties2["paddingLeft"] = "paddingLeft";
3481
+ Properties2["itemSpacing"] = "itemSpacing";
3482
+ Properties2["fill"] = "fill";
3483
+ Properties2["backgroundBlur"] = "backgroundBlur";
3484
+ Properties2["border"] = "border";
3485
+ Properties2["borderTop"] = "borderTop";
3486
+ Properties2["borderRight"] = "borderRight";
3487
+ Properties2["borderBottom"] = "borderBottom";
3488
+ Properties2["borderLeft"] = "borderLeft";
3489
+ Properties2["borderColor"] = "borderColor";
3490
+ Properties2["borderRadius"] = "borderRadius";
3491
+ Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
3492
+ Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
3493
+ Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
3494
+ Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
3495
+ Properties2["borderWidth"] = "borderWidth";
3496
+ Properties2["borderWidthTop"] = "borderWidthTop";
3497
+ Properties2["borderWidthRight"] = "borderWidthRight";
3498
+ Properties2["borderWidthBottom"] = "borderWidthBottom";
3499
+ Properties2["borderWidthLeft"] = "borderWidthLeft";
3500
+ Properties2["boxShadow"] = "boxShadow";
3501
+ Properties2["opacity"] = "opacity";
3502
+ Properties2["fontFamilies"] = "fontFamilies";
3503
+ Properties2["fontWeights"] = "fontWeights";
3504
+ Properties2["fontSizes"] = "fontSizes";
3505
+ Properties2["lineHeights"] = "lineHeights";
3506
+ Properties2["typography"] = "typography";
3507
+ Properties2["composition"] = "composition";
3508
+ Properties2["letterSpacing"] = "letterSpacing";
3509
+ Properties2["paragraphSpacing"] = "paragraphSpacing";
3510
+ Properties2["textCase"] = "textCase";
3511
+ Properties2["dimension"] = "dimension";
3512
+ Properties2["textDecoration"] = "textDecoration";
3513
+ Properties2["asset"] = "asset";
3514
+ Properties2["tokenValue"] = "tokenValue";
3515
+ Properties2["value"] = "value";
3516
+ Properties2["tokenName"] = "tokenName";
3517
+ Properties2["description"] = "description";
3518
+ })(Properties || (Properties = {}));
3519
+
3520
+ // ../../node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
3521
+ var TokenSetStatus;
3522
+ (function(TokenSetStatus2) {
3523
+ TokenSetStatus2["DISABLED"] = "disabled";
3524
+ TokenSetStatus2["SOURCE"] = "source";
3525
+ TokenSetStatus2["ENABLED"] = "enabled";
3526
+ })(TokenSetStatus || (TokenSetStatus = {}));
3527
+
3528
+ // ../../node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
3529
+ var TokenTypes;
3530
+ (function(TokenTypes2) {
3531
+ TokenTypes2["OTHER"] = "other";
3532
+ TokenTypes2["COLOR"] = "color";
3533
+ TokenTypes2["BORDER_RADIUS"] = "borderRadius";
3534
+ TokenTypes2["SIZING"] = "sizing";
3535
+ TokenTypes2["SPACING"] = "spacing";
3536
+ TokenTypes2["TEXT"] = "text";
3537
+ TokenTypes2["TYPOGRAPHY"] = "typography";
3538
+ TokenTypes2["OPACITY"] = "opacity";
3539
+ TokenTypes2["BORDER_WIDTH"] = "borderWidth";
3540
+ TokenTypes2["STROKE_STYLE"] = "strokeStyle";
3541
+ TokenTypes2["BOX_SHADOW"] = "boxShadow";
3542
+ TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
3543
+ TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
3544
+ TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
3545
+ TokenTypes2["FONT_SIZES"] = "fontSizes";
3546
+ TokenTypes2["LETTER_SPACING"] = "letterSpacing";
3547
+ TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
3548
+ TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
3549
+ TokenTypes2["TEXT_DECORATION"] = "textDecoration";
3550
+ TokenTypes2["TEXT_CASE"] = "textCase";
3551
+ TokenTypes2["COMPOSITION"] = "composition";
3552
+ TokenTypes2["DIMENSION"] = "dimension";
3553
+ TokenTypes2["BORDER"] = "border";
3554
+ TokenTypes2["ASSET"] = "asset";
3555
+ TokenTypes2["BOOLEAN"] = "boolean";
3556
+ TokenTypes2["NUMBER"] = "number";
3557
+ })(TokenTypes || (TokenTypes = {}));
3558
+
3559
+ // ../../node_modules/@tokens-studio/types/dist/constants/BorderValues.js
3560
+ var BorderValues;
3561
+ (function(BorderValues2) {
3562
+ BorderValues2["BORDER_COLOR"] = "color";
3563
+ BorderValues2["BORDER_WIDTH"] = "width";
3564
+ BorderValues2["BORDER_STYLE"] = "style";
3565
+ })(BorderValues || (BorderValues = {}));
3566
+
3567
+ // ../../node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
3568
+ var StrokeStyleValues;
3569
+ (function(StrokeStyleValues2) {
3570
+ StrokeStyleValues2["SOLID"] = "solid";
3571
+ StrokeStyleValues2["DASHED"] = "dashed";
3572
+ StrokeStyleValues2["DOTTED"] = "dotted";
3573
+ StrokeStyleValues2["DOUBLE"] = "double";
3574
+ StrokeStyleValues2["GROOVE"] = "groove";
3575
+ StrokeStyleValues2["RIDGE"] = "ridge";
3576
+ StrokeStyleValues2["OUTSET"] = "outset";
3577
+ StrokeStyleValues2["INSET"] = "inset";
3578
+ })(StrokeStyleValues || (StrokeStyleValues = {}));
3579
+
3580
+ // ../../node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
3581
+ var BoxShadowValues;
3582
+ (function(BoxShadowValues2) {
3583
+ BoxShadowValues2["TYPE"] = "type";
3584
+ BoxShadowValues2["COLOR"] = "color";
3585
+ BoxShadowValues2["X"] = "x";
3586
+ BoxShadowValues2["Y"] = "y";
3587
+ BoxShadowValues2["BLUR"] = "blur";
3588
+ BoxShadowValues2["SPREAD"] = "spread";
3589
+ BoxShadowValues2["BLEND_MODE"] = "blendMode";
3590
+ })(BoxShadowValues || (BoxShadowValues = {}));
3591
+
3592
+ // ../../node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
3593
+ var TypographyValues;
3594
+ (function(TypographyValues2) {
3595
+ TypographyValues2["FONT_FAMILY"] = "fontFamily";
3596
+ TypographyValues2["FONT_WEIGHT"] = "fontWeight";
3597
+ TypographyValues2["LINE_HEIGHT"] = "lineHeight";
3598
+ TypographyValues2["FONT_SIZE"] = "fontSize";
3599
+ TypographyValues2["LETTER_SPACING"] = "letterSpacing";
3600
+ TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
3601
+ TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
3602
+ TypographyValues2["TEXT_DECORATION"] = "textDecoration";
3603
+ TypographyValues2["TEXT_CASE"] = "textCase";
3604
+ })(TypographyValues || (TypographyValues = {}));
3605
+
3606
+ // src/tokens/process/utils/getMultidimensionalThemes.ts
3607
+ import chalk4 from "chalk";
3608
+ import { kebabCase } from "change-case";
3609
+ import * as R20 from "ramda";
3610
+ var getMultidimensionalThemes = (processed$themes, dimensions) => {
3611
+ const verboseLogging = buildOptions?.verbose;
3612
+ const grouped$themes = groupThemes(processed$themes);
3613
+ const permutations = permutateThemes(grouped$themes);
3614
+ const ALL_DEPENDENT_ON = ["theme"];
3615
+ const keys3 = R20.keys(grouped$themes);
3616
+ const nonDependentKeys = keys3.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
3617
+ if (verboseLogging) {
3618
+ console.log(chalk4.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
3619
+ console.log(chalk4.cyan(` (ignoring permutations for ${nonDependentKeys})`));
3620
+ }
3621
+ return permutations.filter((val) => {
3622
+ const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
3623
+ return filters.every((x) => x);
3624
+ });
3625
+ };
3626
+ var processed = Symbol("Type brand for ProcessedThemeObject");
3627
+ function isProcessed(theme) {
3628
+ return Boolean(theme[processed]);
3629
+ }
3630
+ function processThemeObject(theme) {
3631
+ if (isProcessed(theme)) {
3632
+ return theme;
3633
+ }
3634
+ const result = { ...theme, [processed]: true };
3635
+ if (result.group) {
3636
+ result.group = kebabCase(result.group);
3637
+ }
3638
+ result.name = kebabCase(result.name);
3639
+ return result;
3640
+ }
3641
+ function groupThemes(themes) {
3642
+ const groups = {};
3643
+ for (const rawTheme of themes) {
3644
+ const theme = processThemeObject(rawTheme);
3645
+ if (theme.group) {
3646
+ const groupKey = theme.group;
3647
+ groups[groupKey] = [...groups[groupKey] ?? [], theme];
3648
+ } else {
3649
+ throw new Error(
3650
+ `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
3651
+ );
3652
+ }
3653
+ }
3654
+ return groups;
3655
+ }
3656
+ var hasUnknownProps = R20.pipe(R20.values, R20.none(R20.equals("unknown")), R20.not);
3657
+ function permutateThemes(groups) {
3658
+ const separator = "_";
3659
+ const permutations = cartesian(Object.values(groups));
3660
+ const permutatedThemes = permutations.map((perm) => {
3661
+ const permutatedTheme = perm.reduce(
3662
+ (acc, theme) => {
3663
+ const { group, name, selectedTokenSets } = theme;
3664
+ let updatedPermutation = acc.permutation;
3665
+ if (group) {
3666
+ const groupProp = R20.lensProp(group);
3667
+ updatedPermutation = R20.set(groupProp, name, updatedPermutation);
3668
+ }
3669
+ const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
3670
+ const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
3671
+ return {
3672
+ permutation: updatedPermutation,
3673
+ name: updatedName,
3674
+ selectedTokenSets: sets
3675
+ };
3676
+ },
3677
+ {
3678
+ name: "",
3679
+ selectedTokenSets: [],
3680
+ permutation: {
3681
+ "color-scheme": "unknown",
3682
+ "main-color": "unknown",
3683
+ "support-color": "unknown",
3684
+ theme: "unknown",
3685
+ semantic: "unknown",
3686
+ size: "unknown",
3687
+ typography: "unknown"
3688
+ }
3689
+ }
3690
+ );
3691
+ if (hasUnknownProps(permutatedTheme)) {
3692
+ throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
3693
+ }
3694
+ const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
3695
+ return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
3696
+ });
3697
+ return permutatedThemes;
3698
+ }
3699
+ function filterTokenSets(tokensets) {
3700
+ return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
3701
+ if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
3702
+ return -1;
3703
+ }
3704
+ if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
3705
+ return 1;
3706
+ }
3707
+ return 0;
3708
+ }).map((entry) => entry[0]);
3709
+ }
3710
+ function cartesian(a) {
3711
+ return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
3712
+ }
3713
+
3714
+ // src/tokens/process/configs.ts
3715
+ void register(StyleDictionary, { withSDBuiltins: false });
3716
+ StyleDictionary.registerTransform(sizeRem);
3717
+ StyleDictionary.registerTransform(typographyName);
3718
+ StyleDictionary.registerTransform(resolveMath);
3719
+ StyleDictionary.registerTransform(unitless);
3720
+ StyleDictionary.registerFormat(jsTokens);
3721
+ for (const format of Object.values(formats)) {
3722
+ StyleDictionary.registerFormat(format);
3723
+ }
3724
+ var configs = {
3725
+ colorSchemeVariables,
3726
+ mainColorVariables: colorCategoryVariables({ category: "main" }),
3727
+ supportColorVariables: colorCategoryVariables({ category: "support" }),
3728
+ neutralColorVariables: colorCategoryVariables({ category: "builtin", color: "neutral" }),
3729
+ successColorVariables: colorCategoryVariables({ category: "builtin", color: "success" }),
3730
+ dangerColorVariables: colorCategoryVariables({ category: "builtin", color: "danger" }),
3731
+ warningColorVariables: colorCategoryVariables({ category: "builtin", color: "warning" }),
3732
+ infoColorVariables: colorCategoryVariables({ category: "builtin", color: "info" }),
3733
+ typographyVariables,
3734
+ semanticVariables,
3735
+ typescriptTokens
3736
+ };
3737
+ var getConfigsForThemeDimensions = (getConfig, processed$themes, dimensions, options) => {
3738
+ const { tokensDir, tokenSets } = options;
3739
+ const permutations = getMultidimensionalThemes(processed$themes, dimensions);
3740
+ return permutations.flatMap(({ selectedTokenSets, permutation }) => {
3741
+ const tokenSource = { source: void 0, tokens: {} };
3742
+ if (tokenSets) {
3743
+ for (const tokenSet of selectedTokenSets) {
3744
+ const tokens = tokenSets.get(tokenSet);
3745
+ if (tokens) {
3746
+ const tokensWithFilePath = traverseObj(tokens, (obj) => {
3747
+ if (Object.hasOwn(obj, `$value`) && !obj.filePath) {
3748
+ obj.filePath = tokenSet;
3749
+ }
3750
+ });
3751
+ tokenSource.tokens = R21.mergeDeepRight(tokenSource.tokens, tokensWithFilePath);
3752
+ }
3753
+ }
3754
+ } else {
3755
+ tokenSource.source = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
3756
+ }
3757
+ const configOrConfigs = getConfig(permutation);
3758
+ const configs_ = Array.isArray(configOrConfigs) ? configOrConfigs : [{ config: configOrConfigs }];
3759
+ const configs2 = configs_.map(({ config, permutationOverrides }) => {
3760
+ return {
3761
+ permutation: { ...permutation, ...permutationOverrides },
3762
+ config: {
3763
+ ...config,
3764
+ /** Use official W3C design token format
3765
+ @see https://v4.styledictionary.com/info/dtcg/
3766
+ @see https://design-tokens.github.io/community-group/format/ */
3767
+ usesDtcg: true,
3768
+ log: {
3769
+ ...config?.log,
3770
+ verbosity: buildOptions?.verbose ? "verbose" : "silent"
3771
+ },
3772
+ ...tokenSource
3773
+ }
3774
+ };
3775
+ });
3776
+ return configs2;
3777
+ }).sort();
3778
+ };
3779
+
3780
+ // src/tokens/process/platform.ts
3781
+ var initResult = {
3782
+ formatted: [],
3783
+ permutation: {
3784
+ "color-scheme": "",
3785
+ "main-color": "",
3786
+ "support-color": "",
3787
+ semantic: "",
3788
+ size: "",
3789
+ theme: "",
3790
+ typography: ""
3791
+ }
3792
+ };
3793
+ var buildOptions;
3794
+ var sd = new StyleDictionary2();
3795
+ var getCustomColors = (processed$themes) => processed$themes.filter(
3796
+ (x) => x.group && [colorCategories.main, colorCategories.support].map((c) => `${c}-color`).includes(x.group)
3797
+ ).map((x) => x.name);
3798
+ var buildConfigs = {
3799
+ typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
3800
+ "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
3801
+ "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
3802
+ "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
3803
+ "neutral-color": {
3804
+ getConfig: configs.neutralColorVariables,
3805
+ dimensions: ["semantic"],
3806
+ log: ({ permutation: { theme } }) => `${theme} - neutral`
3807
+ },
3808
+ "success-color": {
3809
+ getConfig: configs.successColorVariables,
3810
+ dimensions: ["semantic"],
3811
+ log: ({ permutation: { theme } }) => `${theme} - success`
3812
+ },
3813
+ "danger-color": {
3814
+ getConfig: configs.dangerColorVariables,
3815
+ dimensions: ["semantic"],
3816
+ log: ({ permutation: { theme } }) => `${theme} - danger`
3817
+ },
3818
+ "warning-color": {
3819
+ getConfig: configs.warningColorVariables,
3820
+ dimensions: ["semantic"],
3821
+ log: ({ permutation: { theme } }) => `${theme} - warning`
3822
+ },
3823
+ "info-color": {
3824
+ getConfig: configs.infoColorVariables,
3825
+ dimensions: ["semantic"],
3826
+ log: ({ permutation: { theme } }) => `${theme} - info`
3827
+ },
3828
+ semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] }
3829
+ // storefront: {
3830
+ // name: 'Storefront preview tokens',
3831
+ // getConfig: configs.typescriptTokens,
3832
+ // dimensions: ['color-scheme'],
3833
+ // options: { outPath: path.resolve('../../apps/storefront/tokens') },
3834
+ // enabled: () => buildOptions?.preview ?? false,
3835
+ // },
3836
+ };
3837
+ async function processPlatform(options) {
3838
+ const { process: process2, $themes } = options;
3839
+ const platform = "css";
3840
+ const tokenSets = process2 === "format" ? options.tokenSets : void 0;
3841
+ const tokensDir = process2 === "build" ? options.tokensDir : void 0;
3842
+ buildOptions = options;
3843
+ const processed$themes = $themes.map(processThemeObject).filter((theme) => R22.not(theme.group === "size" && theme.name !== "medium"));
3844
+ const customColors = getCustomColors(processed$themes);
3845
+ if (!buildOptions.rootColor) {
3846
+ const firstMainColor = R22.head(customColors);
3847
+ buildOptions.rootColor = firstMainColor;
3848
+ console.log(`Using first main color; ${chalk5.blue(firstMainColor)}, as ${chalk5.green(`":root"`)} color`);
3849
+ }
3850
+ const buildAndSdConfigs = R22.map((buildConfig) => {
3851
+ const sdConfigs = getConfigsForThemeDimensions(buildConfig.getConfig, processed$themes, buildConfig.dimensions, {
3852
+ tokensDir,
3853
+ tokenSets
3854
+ });
3855
+ const unknownConfigs = buildConfig.dimensions.map(
3856
+ (dimension) => sdConfigs.filter((x) => x.permutation[dimension] === "unknown")
3857
+ );
3858
+ for (const unknowns of unknownConfigs) {
3859
+ if (unknowns.length === sdConfigs.length) {
3860
+ buildConfig.enabled = () => false;
3861
+ }
3862
+ }
3863
+ return {
3864
+ buildConfig,
3865
+ sdConfigs
3866
+ };
3867
+ }, buildConfigs);
3868
+ const processedBuilds = {
3869
+ "color-scheme": [initResult],
3870
+ "main-color": [initResult],
3871
+ "support-color": [initResult],
3872
+ "neutral-color": [initResult],
3873
+ "success-color": [initResult],
3874
+ "danger-color": [initResult],
3875
+ "warning-color": [initResult],
3876
+ "info-color": [initResult],
3877
+ semantic: [initResult],
3878
+ typography: [initResult],
3879
+ types: [initResult]
3880
+ };
3881
+ try {
3882
+ for (const [buildName, { buildConfig, sdConfigs }] of R22.toPairs(buildAndSdConfigs)) {
3883
+ if (!(buildConfig.enabled?.() ?? true)) {
3884
+ continue;
3885
+ }
3886
+ if (sdConfigs.length > 0) {
3887
+ console.log(`
3888
+ \u{1F371} Building ${chalk5.green(buildConfig.name ?? buildName)}`);
3889
+ const results = await Promise.all(
3890
+ sdConfigs.map(async (sdConfig) => {
3891
+ const { config, permutation } = sdConfig;
3892
+ const modes = ["theme", ...buildConfig.dimensions];
3893
+ const modeMessage = modes.map((x) => permutation[x]).join(" - ");
3894
+ const logMessage = R22.isNil(buildConfig.log) ? modeMessage : buildConfig?.log(sdConfig);
3895
+ console.log(logMessage);
3896
+ const sdOptions = { cache: true };
3897
+ const sdExtended = await sd.extend(config);
3898
+ const result = {
3899
+ permutation,
3900
+ formatted: await sdExtended.formatPlatform(platform, sdOptions)
3901
+ };
3902
+ return Promise.resolve(result);
3903
+ })
3904
+ );
3905
+ processedBuilds[buildName] = results;
3906
+ }
3907
+ }
3908
+ } catch (err) {
3909
+ if (err instanceof Error) {
3910
+ err.message = err.message.replace('log.verbosity "verbose" or use ', "");
3911
+ }
3912
+ throw err;
3913
+ }
3914
+ const colorsFileName = "colors.d.ts";
3915
+ const reactColorTypes = await createColorTypeDeclaration(customColors);
3916
+ processedBuilds.types = [
3917
+ {
3918
+ ...initResult,
3919
+ formatted: [{ output: reactColorTypes, destination: colorsFileName }]
3920
+ }
3921
+ ];
3922
+ return processedBuilds;
3923
+ }
3924
+ async function createColorTypeDeclaration(colors2) {
3925
+ console.log(`
3926
+ \u{1F371} Building ${chalk5.green("type declarations")}`);
3927
+ const typeDeclaration = `
3928
+ import type {} from '@digdir/designsystemet-react/colors';
3929
+
3930
+ declare module '@digdir/designsystemet-react/colors' {
3931
+ export interface MainAndSupportColors {
3932
+ ${colors2.map((color) => ` ${color}: never;`).join("\n")}
3933
+ }
3934
+ }
3935
+ `.trimStart();
3936
+ return typeDeclaration;
3937
+ }
3938
+
3939
+ // src/tokens/build.ts
3940
+ async function write(files, outDir, dry) {
3941
+ for (const { destination, output } of files) {
3942
+ if (destination) {
3943
+ const filePath = path2.join(outDir, destination);
3944
+ const fileDir = path2.dirname(filePath);
3945
+ console.log(destination);
3946
+ await mkdir(fileDir, dry);
3947
+ await writeFile(filePath, output, dry);
3948
+ }
3949
+ }
3950
+ }
3951
+ var buildTokens = async (options) => {
3952
+ const outDir = path2.resolve(options.outDir);
3953
+ const tokensDir = path2.resolve(options.tokensDir);
3954
+ const $themes = JSON.parse(await readFile(`${tokensDir}/$themes.json`));
3955
+ let $designsystemet;
3956
+ try {
3957
+ const $designsystemetContent = await readFile(`${tokensDir}/$designsystemet.json`);
3958
+ $designsystemet = JSON.parse($designsystemetContent);
3959
+ } catch (error) {
3960
+ }
3961
+ console.log(`
3962
+ \u{1F3D7}\uFE0F Start building tokens in ${chalk6.green(tokensDir)}`);
3963
+ const processedBuilds = await processPlatform({
3964
+ ...options,
3965
+ outDir,
3966
+ tokensDir,
3967
+ process: "build",
3968
+ $themes
3969
+ });
3970
+ if (options.clean) {
3971
+ await cleanDir(outDir, options.dry);
3972
+ }
3973
+ console.log(`
3974
+ \u{1F4BE} Writing build to ${chalk6.green(outDir)}`);
3975
+ for (const { formatted } of processedBuilds.types) {
3976
+ await write(formatted, outDir, options.dry);
3977
+ }
3978
+ const fileHeader2 = R23.join("")([
3979
+ defaultFileHeader,
3980
+ $designsystemet ? `
3981
+ design-tokens: v${$designsystemet.version} ` : ""
3982
+ ]);
3983
+ await write(createThemeCSSFiles({ processedBuilds, fileHeader: fileHeader2 }), outDir, options.dry);
3984
+ console.log(`
3985
+ \u2705 Finished building tokens!`);
3986
+ return processedBuilds;
3987
+ };
3988
+
3989
+ // src/tokens/create/write.ts
3990
+ import path3 from "node:path";
3991
+ import chalk7 from "chalk";
3992
+ import * as R24 from "ramda";
3993
+
3994
+ // src/tokens/create/generators/$designsystemet.ts
3995
+ function generate$Designsystemet() {
3996
+ return {
3997
+ name: package_default.name,
3998
+ version: package_default.version
3999
+ };
4000
+ }
4001
+
4002
+ // src/tokens/create/generators/$metadata.ts
4003
+ function generate$Metadata(schemes, themes, colors2) {
4004
+ return {
4005
+ tokenSetOrder: [
4006
+ "primitives/globals",
4007
+ "primitives/modes/size/small",
4008
+ "primitives/modes/size/medium",
4009
+ "primitives/modes/size/large",
4010
+ "primitives/modes/size/global",
4011
+ "primitives/modes/typography/size/small",
4012
+ "primitives/modes/typography/size/medium",
4013
+ "primitives/modes/typography/size/large",
4014
+ ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
4015
+ ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
4016
+ ...schemes.flatMap((scheme) => [
4017
+ `primitives/modes/color-scheme/${scheme}/global`,
4018
+ ...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)
4019
+ ]),
4020
+ ...themes.map((theme) => `themes/${theme}`),
4021
+ "semantic/color",
4022
+ ...Object.entries(colors2.main).map(([color]) => `semantic/modes/main-color/${color}`),
4023
+ ...Object.entries(colors2.support).map(([color]) => `semantic/modes/support-color/${color}`),
4024
+ "semantic/style"
4025
+ ]
4026
+ };
4027
+ }
4028
+
4029
+ // src/tokens/create/generators/$themes.ts
4030
+ var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
4031
+ async function createHash(text, algo = "SHA-1") {
4032
+ const crypto = globalThis.crypto;
4033
+ return Array.from(
4034
+ new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
4035
+ (byte) => byte.toString(16).padStart(2, "0")
4036
+ ).join("");
4037
+ }
4038
+ async function generate$Themes(colorSchemes, themes, colors2) {
4039
+ return [
4040
+ ...generateSizeGroup(),
4041
+ ...await generateThemesGroup(themes),
4042
+ ...generateTypographyGroup(themes),
4043
+ ...generateColorSchemesGroup(colorSchemes, themes),
4044
+ generateSemanticGroup(),
4045
+ ...await generateColorGroup("main", colors2),
4046
+ ...await generateColorGroup("support", colors2)
4047
+ ];
4048
+ }
4049
+ function generateSizeGroup() {
4050
+ return [
4051
+ {
4052
+ id: "8b2c8cc86611a34b135cb22948666779361fd729",
4053
+ name: "medium",
4054
+ $figmaStyleReferences: {},
4055
+ selectedTokenSets: {
4056
+ "primitives/modes/size/medium": TokenSetStatus.SOURCE,
4057
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
4058
+ "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
4059
+ },
4060
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
4061
+ $figmaModeId: "41630:1",
4062
+ group: "Size"
4063
+ },
4064
+ {
4065
+ id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
4066
+ name: "large",
4067
+ $figmaStyleReferences: {},
4068
+ selectedTokenSets: {
4069
+ "primitives/modes/size/large": TokenSetStatus.SOURCE,
4070
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
4071
+ "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
4072
+ },
4073
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
4074
+ $figmaModeId: "41630:2",
4075
+ group: "Size"
4076
+ },
4077
+ {
4078
+ id: "fb11567729c298ca37c9da4e3a27716a23480824",
4079
+ name: "small",
4080
+ $figmaStyleReferences: {},
4081
+ selectedTokenSets: {
4082
+ "primitives/modes/size/small": TokenSetStatus.SOURCE,
4083
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
4084
+ "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
4085
+ },
4086
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
4087
+ $figmaModeId: "41630:3",
4088
+ group: "Size"
4089
+ }
4090
+ ];
4091
+ }
4092
+ var colorSchemeDefaults = {
4093
+ light: {
4094
+ name: "Light",
4095
+ selectedTokenSets: {},
4096
+ id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
4097
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
4098
+ $figmaModeId: "34811:0"
4099
+ },
4100
+ dark: {
4101
+ name: "Dark",
4102
+ selectedTokenSets: {},
4103
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
4104
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
4105
+ $figmaModeId: "34811:1"
4106
+ },
4107
+ contrast: {
4108
+ name: "Contrast",
4109
+ selectedTokenSets: {},
4110
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
4111
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
4112
+ $figmaModeId: "34811:2"
4113
+ }
4114
+ };
4115
+ function generateColorSchemesGroup(colorSchemes, themes) {
4116
+ return colorSchemes.map(
4117
+ (scheme) => ({
4118
+ ...colorSchemeDefaults[scheme],
4119
+ selectedTokenSets: Object.fromEntries([
4120
+ [`primitives/modes/color-scheme/${scheme}/global`, TokenSetStatus.ENABLED],
4121
+ ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
4122
+ ]),
4123
+ group: "Color scheme"
4124
+ })
4125
+ );
4126
+ }
4127
+ async function generateThemesGroup(themes) {
4128
+ return Promise.all(
4129
+ themes.map(
4130
+ async (theme, index) => ({
4131
+ id: await createHash(theme),
4132
+ $figmaCollectionId: "VariableCollectionId:36528:61712",
4133
+ $figmaModeId: `40960:${index + 6}`,
4134
+ // Start on 6 in Token Studio and Community file for some reason
4135
+ name: theme,
4136
+ selectedTokenSets: {
4137
+ [`themes/${theme}`]: TokenSetStatus.ENABLED
4138
+ },
4139
+ group: "Theme"
4140
+ })
4141
+ )
4142
+ );
4143
+ }
4144
+ function generateSemanticGroup() {
4145
+ return {
4146
+ id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
4147
+ name: "Semantic",
4148
+ selectedTokenSets: {
4149
+ "semantic/style": TokenSetStatus.ENABLED,
4150
+ "semantic/color": TokenSetStatus.ENABLED,
4151
+ "primitives/globals": TokenSetStatus.SOURCE
4152
+ },
4153
+ $figmaCollectionId: "VariableCollectionId:34811:5976",
4154
+ $figmaModeId: "34811:5",
4155
+ group: "Semantic"
4156
+ };
4157
+ }
4158
+ async function generateColorGroup(group, colors2) {
4159
+ return Promise.all(
4160
+ Object.entries(colors2[group]).map(
4161
+ async ([color]) => ({
4162
+ id: await createHash(`${group}-${color}`),
4163
+ name: color,
4164
+ selectedTokenSets: {
4165
+ [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
4166
+ },
4167
+ group: `${capitalize(group)} color`
4168
+ })
4169
+ )
4170
+ );
4171
+ }
4172
+ function generateTypographyGroup(themes) {
4173
+ return [
4174
+ {
4175
+ id: "368d753fcac4455f289500eaa42e70dc0a03522f",
4176
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
4177
+ $figmaModeId: "36248:2",
4178
+ name: "Primary",
4179
+ selectedTokenSets: Object.fromEntries(
4180
+ themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
4181
+ ),
4182
+ group: "Typography"
4183
+ },
4184
+ {
4185
+ id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
4186
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
4187
+ $figmaModeId: "36248:3",
4188
+ name: "Secondary",
4189
+ selectedTokenSets: Object.fromEntries(
4190
+ themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
4191
+ ),
4192
+ group: "Typography"
4193
+ }
4194
+ ];
4195
+ }
4196
+
4197
+ // src/tokens/create/write.ts
4198
+ var stringify = (data) => JSON.stringify(data, null, 2);
4199
+ var writeTokens = async (options) => {
4200
+ const {
4201
+ outDir,
4202
+ tokenSets,
4203
+ theme: { name: themeName, colors: colors2 },
4204
+ dry
4205
+ } = options;
4206
+ const targetDir = path3.resolve(process.cwd(), String(outDir));
4207
+ const $themesPath = path3.join(targetDir, "$themes.json");
4208
+ const $metadataPath = path3.join(targetDir, "$metadata.json");
4209
+ const $designsystemetPath = path3.join(targetDir, "$designsystemet.json");
4210
+ let themeObjects = [];
4211
+ await mkdir(targetDir, dry);
4212
+ try {
4213
+ const $themes2 = await readFile($themesPath);
4214
+ if ($themes2) {
4215
+ themeObjects = JSON.parse($themes2);
4216
+ }
4217
+ } catch (error) {
4218
+ }
4219
+ const concatThemeNames = R24.pipe(
4220
+ R24.filter((obj) => R24.toLower(obj.group || "") === "theme"),
4221
+ R24.map(R24.prop("name")),
4222
+ // New theme is added to the end of the list so we keep the same order from config and Token Studio
4223
+ R24.append(themeName),
4224
+ R24.uniq
4225
+ );
4226
+ const themes = concatThemeNames(themeObjects);
4227
+ console.log(`
4228
+ Themes: ${chalk7.blue(themes.join(", "))}`);
4229
+ const $themes = await generate$Themes(["dark", "light"], themes, colors2);
4230
+ const $metadata = generate$Metadata(["dark", "light"], themes, colors2);
4231
+ const $designsystemet = generate$Designsystemet();
4232
+ await writeFile($themesPath, stringify($themes), dry);
4233
+ await writeFile($metadataPath, stringify($metadata), dry);
4234
+ await writeFile($designsystemetPath, stringify($designsystemet), dry);
4235
+ for (const [set4, tokens] of tokenSets) {
4236
+ const fileDir = path3.join(targetDir, path3.dirname(set4));
4237
+ await mkdir(fileDir, dry);
4238
+ const filePath = path3.join(targetDir, `${set4}.json`);
4239
+ await writeFile(filePath, stringify(tokens), dry);
4240
+ }
4241
+ console.log(
4242
+ `Finished creating Designsystem design tokens in ${chalk7.green(outDir)} for theme ${chalk7.blue(themeName)}`
4243
+ );
4244
+ };
4245
+
4246
+ // bin/options.ts
4247
+ var getOptionIfMatchingSource = (...sources) => (command, option) => {
4248
+ const source = command.getOptionValueSource(option);
4249
+ if (sources.includes(source)) {
4250
+ return command.getOptionValue(option);
4251
+ }
4252
+ };
4253
+ var getSuppliedCliOption = getOptionIfMatchingSource("cli");
4254
+ var getDefaultCliOption = getOptionIfMatchingSource("default");
4255
+ var getCliOption = getOptionIfMatchingSource("cli", "default");
4256
+
4257
+ // bin/designsystemet.ts
16
4258
  program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
17
4259
  function makeTokenCommands() {
18
4260
  const tokenCmd = createCommand("tokens");
@@ -21,25 +4263,25 @@ function makeTokenCommands() {
21
4263
  const DEFAULT_FONT = "Inter";
22
4264
  const DEFAULT_THEME_NAME = "theme";
23
4265
  const DEFAULT_CONFIG_FILE = "designsystemet.config.json";
24
- tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
4266
+ tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk8.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(
25
4267
  "-o, --out-dir <string>",
26
- `Output directory for built ${chalk.blue("design-tokens")}`,
4268
+ `Output directory for built ${chalk8.blue("design-tokens")}`,
27
4269
  DEFAULT_TOKENS_BUILD_DIR
28
- ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk.blue("design-tokens")}`, parseBoolean, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
4270
+ ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${chalk8.blue("design-tokens")}`, parseBoolean, false).option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action(async (opts) => {
29
4271
  const { preview, verbose, clean, dry } = opts;
30
- const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
4272
+ const tokensDir = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENS_CREATE_DIR;
31
4273
  const outDir = typeof opts.outDir === "string" ? opts.outDir : "./dist/tokens";
32
- console.log(`Building tokens in ${chalk.green(tokens)}`);
33
4274
  if (dry) {
34
4275
  console.log(`Performing dry run, no files will be written`);
35
4276
  }
36
- return buildTokens({ tokens, outDir, preview, verbose, dry, clean });
4277
+ await buildTokens({ tokensDir, outDir, preview, verbose, dry, clean });
4278
+ return Promise.resolve();
37
4279
  });
38
4280
  tokenCmd.command("create").description("Create Designsystemet tokens").option(`-m, --${cliOptions.theme.colors.main} <name:hex...>`, `Main colors`, parseColorValues).option(`-s, --${cliOptions.theme.colors.support} <name:hex...>`, `Support colors`, parseColorValues).option(`-n, --${cliOptions.theme.colors.neutral} <hex>`, `Neutral hex color`, convertToHex).option(
39
4281
  `-o, --${cliOptions.outDir} <string>`,
40
- `Output directory for created ${chalk.blue("design-tokens")}`,
4282
+ `Output directory for created ${chalk8.blue("design-tokens")}`,
41
4283
  DEFAULT_TOKENS_CREATE_DIR
42
- ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
4284
+ ).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${chalk8.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(
43
4285
  `-b, --${cliOptions.theme.borderRadius} <number>`,
44
4286
  `Unitless base border-radius in px`,
45
4287
  (radiusAsString) => Number(radiusAsString),
@@ -56,24 +4298,24 @@ function makeTokenCommands() {
56
4298
  const propsFromJson = configFile?.config;
57
4299
  if (propsFromJson) {
58
4300
  const themeColors = Object.values(propsFromJson?.themes ?? {}).map(
59
- (x) => /* @__PURE__ */ new Set([...R.keys(x.colors.main), ...R.keys(x.colors.support)])
4301
+ (x) => /* @__PURE__ */ new Set([...R25.keys(x.colors.main), ...R25.keys(x.colors.support)])
60
4302
  );
61
- if (!R.all(R.equals(R.__, themeColors[0]), themeColors)) {
4303
+ if (!R25.all(R25.equals(R25.__, themeColors[0]), themeColors)) {
62
4304
  console.error(
63
- chalk.redBright(
4305
+ chalk8.redBright(
64
4306
  `In config ${configFile.path}, all themes must have the same custom color names, but we found:`
65
4307
  )
66
4308
  );
67
- const themeNames = R.keys(propsFromJson.themes ?? {});
68
- themeColors.forEach((colors, index) => {
69
- const colorNames = Array.from(colors);
4309
+ const themeNames = R25.keys(propsFromJson.themes ?? {});
4310
+ themeColors.forEach((colors2, index) => {
4311
+ const colorNames = Array.from(colors2);
70
4312
  console.log(` - ${themeNames[index]}: ${colorNames.join(", ")}`);
71
4313
  });
72
4314
  console.log();
73
4315
  process.exit(1);
74
4316
  }
75
4317
  }
76
- const noUndefined = R.reject(R.isNil);
4318
+ const noUndefined = R25.reject(R25.isNil);
77
4319
  const getThemeOptions = (optionGetter) => noUndefined({
78
4320
  colors: noUndefined({
79
4321
  main: optionGetter(cmd, "mainColors"),
@@ -88,10 +4330,10 @@ function makeTokenCommands() {
88
4330
  const unvalidatedConfig = noUndefined({
89
4331
  outDir: propsFromJson?.outDir ?? getCliOption(cmd, "outDir"),
90
4332
  clean: propsFromJson?.clean ?? getCliOption(cmd, "clean"),
91
- themes: propsFromJson?.themes ? R.map((jsonThemeValues) => {
4333
+ themes: propsFromJson?.themes ? R25.map((jsonThemeValues) => {
92
4334
  const defaultThemeValues = getThemeOptions(getDefaultCliOption);
93
4335
  const cliThemeValues = getThemeOptions(getSuppliedCliOption);
94
- return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
4336
+ return R25.mergeDeepRight(defaultThemeValues, R25.mergeDeepRight(jsonThemeValues, cliThemeValues));
95
4337
  }, propsFromJson.themes) : (
96
4338
  // If there are no themes specified in the JSON config, we use both explicit
97
4339
  // and default theme options from the CLI.
@@ -104,49 +4346,49 @@ function makeTokenCommands() {
104
4346
  try {
105
4347
  config = combinedConfigSchema.parse(unvalidatedConfig);
106
4348
  } catch (err) {
107
- console.error(chalk.redBright("Invalid config after combining config file and CLI options"));
4349
+ console.error(chalk8.redBright("Invalid config after combining config file and CLI options"));
108
4350
  const validationError = makeFriendlyError(err);
109
4351
  console.error(validationError.toString());
110
4352
  process.exit(1);
111
4353
  }
112
- console.log(`Creating tokens with configuration ${chalk.green(JSON.stringify(config, null, 2))}`);
4354
+ console.log(`Creating tokens with configuration ${chalk8.green(JSON.stringify(config, null, 2))}`);
113
4355
  if (config.clean) {
114
4356
  await cleanDir(config.outDir, opts.dry);
115
4357
  }
116
4358
  for (const [name, themeWithoutName] of Object.entries(config.themes)) {
117
4359
  const theme = { name, ...themeWithoutName };
118
- const tokens = createTokens(theme);
119
- await writeTokens({ outDir: config.outDir, tokens, theme, dry: opts.dry });
4360
+ const { tokenSets } = await createTokens(theme);
4361
+ await writeTokens({ outDir: config.outDir, theme, dry: opts.dry, tokenSets });
120
4362
  }
121
4363
  });
122
4364
  return tokenCmd;
123
4365
  }
124
4366
  program.addCommand(makeTokenCommands());
125
- program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
126
- const { glob, list } = opts;
4367
+ program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations_default))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
4368
+ const { glob: glob2, list } = opts;
127
4369
  if (list) {
128
- for (const key of Object.keys(migrations)) {
4370
+ for (const key of Object.keys(migrations_default)) {
129
4371
  console.log(key);
130
4372
  }
131
4373
  } else if (migrationKey) {
132
- const migration = migrations[migrationKey];
4374
+ const migration = migrations_default[migrationKey];
133
4375
  if (!migration) {
134
4376
  console.error("Migration not found!");
135
4377
  throw "Aborting";
136
4378
  }
137
- console.log(`Applying migration ${chalk.blue(migrationKey)} with glob: ${chalk.green(glob)}`);
138
- migration?.(glob).then(() => console.log(`Migration ${chalk.blue(migrationKey)} finished`)).catch((error) => console.log(error));
4379
+ console.log(`Applying migration ${chalk8.blue(migrationKey)} with glob: ${chalk8.green(glob2)}`);
4380
+ migration?.(glob2).then(() => console.log(`Migration ${chalk8.blue(migrationKey)} finished`)).catch((error) => console.log(error));
139
4381
  } else {
140
4382
  console.log("Migrate: please specify a migration name or --list");
141
4383
  }
142
4384
  });
143
4385
  await program.parseAsync(process.argv);
144
4386
  async function parseConfig(configPath, options) {
145
- const resolvedPath = path.resolve(process.cwd(), configPath);
4387
+ const resolvedPath = path4.resolve(process.cwd(), configPath);
146
4388
  let configFile;
147
4389
  try {
148
- configFile = await fs.readFile(resolvedPath, { encoding: "utf-8" });
149
- console.log(`Found config file: ${chalk.green(resolvedPath)}`);
4390
+ configFile = await readFile(resolvedPath);
4391
+ console.log(`Found config file: ${chalk8.green(resolvedPath)}`);
150
4392
  } catch (err) {
151
4393
  if (err instanceof Error) {
152
4394
  const nodeErr = err;
@@ -162,7 +4404,7 @@ async function parseConfig(configPath, options) {
162
4404
  config: await configFileSchema.parseAsync(JSON.parse(configFile))
163
4405
  };
164
4406
  } catch (err) {
165
- console.error(chalk.redBright(`Invalid config in ${configPath}`));
4407
+ console.error(chalk8.redBright(`Invalid config in ${configPath}`));
166
4408
  const validationError = makeFriendlyError(err);
167
4409
  console.error(validationError.toString());
168
4410
  process.exit(1);
@@ -175,8 +4417,8 @@ function makeFriendlyError(err) {
175
4417
  const optionName = mapPathToOptionName(issue.path);
176
4418
  const errorCode = `(error code: ${issue.code})`;
177
4419
  const optionMessage = optionName ? ` or CLI option --${optionName}` : "";
178
- return ` - Error in JSON value ${chalk.red(issuePath)}${optionMessage}:
179
- ${issue.message} ${chalk.dim(errorCode)}`;
4420
+ return ` - Error in JSON value ${chalk8.red(issuePath)}${optionMessage}:
4421
+ ${issue.message} ${chalk8.dim(errorCode)}`;
180
4422
  }).join("\n")
181
4423
  });
182
4424
  }