@digdir/designsystemet 0.1.0-next.21 → 0.1.0-next.23

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 (96) hide show
  1. package/dist/bin/designsystemet.js +2 -2
  2. package/dist/src/colors/colorUtils.js +10 -10
  3. package/dist/src/init/createTokensPackage.js +27 -4
  4. package/dist/src/init/generateMetadataJson.js +6 -4
  5. package/dist/src/init/generateThemesJson.js +56 -5
  6. package/dist/src/init/nextStepsMarkdown.js +2 -2
  7. package/dist/src/init/template/default-files/design-tokens/primitives/globals.json +32 -68
  8. package/dist/src/init/template/default-files/design-tokens/primitives/size/default.json +175 -0
  9. package/dist/src/init/template/default-files/design-tokens/semantic/color.json +280 -270
  10. package/dist/src/init/template/default-files/design-tokens/semantic/style.json +307 -286
  11. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/contrast/theme-template.json +314 -0
  12. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/global.json +376 -0
  13. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/dark/theme-template.json +314 -0
  14. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/light/global.json +376 -0
  15. package/dist/src/init/template/template-files/design-tokens/primitives/modes/colors/light/theme-template.json +314 -0
  16. package/dist/src/init/template/template-files/design-tokens/primitives/modes/typography/primary/theme-template.json +30 -0
  17. package/dist/src/init/template/template-files/design-tokens/primitives/modes/typography/secondary/theme-template.json +30 -0
  18. package/dist/src/init/template/template-files/design-tokens/themes/theme-template.json +170 -150
  19. package/dist/src/init/template/template-files/package.json +1 -1
  20. package/dist/src/migrations/codemods/css/plugins.js +14 -15
  21. package/dist/src/migrations/codemods/jsx/classname-prefix.js +8 -7
  22. package/dist/src/tokens/actions.js +1 -1
  23. package/dist/src/tokens/build.js +26 -15
  24. package/dist/src/tokens/configs.js +20 -16
  25. package/dist/src/tokens/formats/css.js +42 -31
  26. package/dist/src/tokens/formats/js-tokens.js +8 -4
  27. package/dist/src/tokens/transformers.js +7 -3
  28. package/dist/src/tokens/utils/entryfile.js +31 -0
  29. package/dist/src/tokens/utils/permutateThemes.js +2 -2
  30. package/dist/src/tokens/utils/utils.js +11 -0
  31. package/dist/types/bin/designsystemet.d.ts +3 -0
  32. package/dist/types/bin/designsystemet.d.ts.map +1 -0
  33. package/dist/types/src/colors/colorUtils.d.ts +126 -0
  34. package/dist/types/src/colors/colorUtils.d.ts.map +1 -0
  35. package/dist/types/src/colors/index.d.ts +4 -0
  36. package/dist/types/src/colors/index.d.ts.map +1 -0
  37. package/dist/types/src/colors/themeUtils.d.ts +102 -0
  38. package/dist/types/src/colors/themeUtils.d.ts.map +1 -0
  39. package/dist/types/src/colors/types.d.ts +16 -0
  40. package/dist/types/src/colors/types.d.ts.map +1 -0
  41. package/dist/types/src/init/createTokensPackage.d.ts +5 -0
  42. package/dist/types/src/init/createTokensPackage.d.ts.map +1 -0
  43. package/dist/types/src/init/generateMetadataJson.d.ts +6 -0
  44. package/dist/types/src/init/generateMetadataJson.d.ts.map +1 -0
  45. package/dist/types/src/init/generateThemesJson.d.ts +3 -0
  46. package/dist/types/src/init/generateThemesJson.d.ts.map +1 -0
  47. package/dist/types/src/init/index.d.ts +3 -0
  48. package/dist/types/src/init/index.d.ts.map +1 -0
  49. package/dist/types/src/init/nextStepsMarkdown.d.ts +3 -0
  50. package/dist/types/src/init/nextStepsMarkdown.d.ts.map +1 -0
  51. package/dist/types/src/init/template/prettier.config.d.mts +9 -0
  52. package/dist/types/src/init/template/prettier.config.d.mts.map +1 -0
  53. package/dist/types/src/init/utils.d.ts +4 -0
  54. package/dist/types/src/init/utils.d.ts.map +1 -0
  55. package/dist/types/src/migrations/beta-to-v1.d.ts +3 -0
  56. package/dist/types/src/migrations/beta-to-v1.d.ts.map +1 -0
  57. package/dist/types/src/migrations/codemods/css/plugins.d.ts +6 -0
  58. package/dist/types/src/migrations/codemods/css/plugins.d.ts.map +1 -0
  59. package/dist/types/src/migrations/codemods/css/run.d.ts +8 -0
  60. package/dist/types/src/migrations/codemods/css/run.d.ts.map +1 -0
  61. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts +10 -0
  62. package/dist/types/src/migrations/codemods/jsx/classname-prefix.d.ts.map +1 -0
  63. package/dist/types/src/migrations/codemods/jsx/run.d.ts +7 -0
  64. package/dist/types/src/migrations/codemods/jsx/run.d.ts.map +1 -0
  65. package/dist/types/src/migrations/index.d.ts +6 -0
  66. package/dist/types/src/migrations/index.d.ts.map +1 -0
  67. package/dist/types/src/migrations/react-beta-to-v1.d.ts +3 -0
  68. package/dist/types/src/migrations/react-beta-to-v1.d.ts.map +1 -0
  69. package/dist/types/src/tokens/actions.d.ts +6 -0
  70. package/dist/types/src/tokens/actions.d.ts.map +1 -0
  71. package/dist/types/src/tokens/build.d.ts +11 -0
  72. package/dist/types/src/tokens/build.d.ts.map +1 -0
  73. package/dist/types/src/tokens/configs.d.ts +31 -0
  74. package/dist/types/src/tokens/configs.d.ts.map +1 -0
  75. package/dist/types/src/tokens/formats/css.d.ts +5 -0
  76. package/dist/types/src/tokens/formats/css.d.ts.map +1 -0
  77. package/dist/types/src/tokens/formats/js-tokens.d.ts +6 -0
  78. package/dist/types/src/tokens/formats/js-tokens.d.ts.map +1 -0
  79. package/dist/types/src/tokens/transformers.d.ts +5 -0
  80. package/dist/types/src/tokens/transformers.d.ts.map +1 -0
  81. package/dist/types/src/tokens/utils/entryfile.d.ts +11 -0
  82. package/dist/types/src/tokens/utils/entryfile.d.ts.map +1 -0
  83. package/dist/types/src/tokens/utils/noCase.d.ts +11 -0
  84. package/dist/types/src/tokens/utils/noCase.d.ts.map +1 -0
  85. package/dist/types/src/tokens/utils/permutateThemes.d.ts +17 -0
  86. package/dist/types/src/tokens/utils/permutateThemes.d.ts.map +1 -0
  87. package/dist/types/src/tokens/utils/utils.d.ts +25 -0
  88. package/dist/types/src/tokens/utils/utils.d.ts.map +1 -0
  89. package/package.json +24 -22
  90. package/dist/src/init/template/default-files/design-tokens/primitives/typography/default.json +0 -86
  91. package/dist/src/init/template/template-files/design-tokens/primitives/colors/contrast/theme-template.json +0 -314
  92. package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/global.json +0 -376
  93. package/dist/src/init/template/template-files/design-tokens/primitives/colors/dark/theme-template.json +0 -314
  94. package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/global.json +0 -376
  95. package/dist/src/init/template/template-files/design-tokens/primitives/colors/light/theme-template.json +0 -314
  96. /package/dist/src/init/template/template-files/design-tokens/primitives/{colors → modes/colors}/contrast/global.json +0 -0
package/dist/src/init/template/default-files/design-tokens/semantic/style.json CHANGED
@@ -2,542 +2,563 @@
2
2
  "typography": {
3
3
  "heading": {
4
4
  "2xl": {
5
- "type": "typography",
6
- "value": {
7
- "fontFamily": "{font-family.main}",
5
+ "$type": "typography",
6
+ "$value": {
7
+ "fontFamily": "{font.family}",
8
8
  "fontWeight": "{font-weight.medium}",
9
- "lineHeight": "{line-height.300}",
10
- "fontSize": "{font-size.f7}"
9
+ "lineHeight": "{line-height.sm}",
10
+ "fontSize": "{font-size.11}",
11
+ "letterSpacing": "{letter-spacing.1}"
11
12
  }
12
13
  },
13
14
  "xl": {
14
- "type": "typography",
15
- "value": {
16
- "fontFamily": "{font-family.main}",
15
+ "$type": "typography",
16
+ "$value": {
17
+ "fontFamily": "{font.family}",
17
18
  "fontWeight": "{font-weight.medium}",
18
- "lineHeight": "{line-height.300}",
19
- "fontSize": "{font-size.f6}"
20
- },
21
- "description": "H1"
19
+ "lineHeight": "{line-height.sm}",
20
+ "fontSize": "{font-size.10}",
21
+ "letterSpacing": "{letter-spacing.1}"
22
+ }
22
23
  },
23
24
  "lg": {
24
- "type": "typography",
25
- "value": {
26
- "fontFamily": "{font-family.main}",
25
+ "$type": "typography",
26
+ "$value": {
27
+ "fontFamily": "{font.family}",
27
28
  "fontWeight": "{font-weight.medium}",
28
- "lineHeight": "{line-height.300}",
29
- "fontSize": "{font-size.f5}"
30
- },
31
- "description": "H2"
29
+ "lineHeight": "{line-height.sm}",
30
+ "fontSize": "{font-size.9}",
31
+ "letterSpacing": "{letter-spacing.2}"
32
+ }
32
33
  },
33
34
  "md": {
34
- "type": "typography",
35
- "value": {
36
- "fontFamily": "{font-family.main}",
35
+ "$type": "typography",
36
+ "$value": {
37
+ "fontFamily": "{font.family}",
37
38
  "fontWeight": "{font-weight.medium}",
38
- "lineHeight": "{line-height.300}",
39
- "fontSize": "{font-size.f4}"
40
- },
41
- "description": "H3"
39
+ "lineHeight": "{line-height.sm}",
40
+ "fontSize": "{font-size.8}",
41
+ "letterSpacing": "{letter-spacing.3}"
42
+ }
42
43
  },
43
44
  "sm": {
44
- "type": "typography",
45
- "value": {
46
- "fontFamily": "{font-family.main}",
45
+ "$type": "typography",
46
+ "$value": {
47
+ "fontFamily": "{font.family}",
47
48
  "fontWeight": "{font-weight.medium}",
48
- "lineHeight": "{line-height.300}",
49
- "fontSize": "{font-size.f3}"
50
- },
51
- "description": "H4"
49
+ "lineHeight": "{line-height.sm}",
50
+ "fontSize": "{font-size.7}",
51
+ "letterSpacing": "{letter-spacing.5}"
52
+ }
52
53
  },
53
54
  "xs": {
54
- "type": "typography",
55
- "value": {
56
- "fontFamily": "{font-family.main}",
55
+ "$type": "typography",
56
+ "$value": {
57
+ "fontFamily": "{font.family}",
57
58
  "fontWeight": "{font-weight.medium}",
58
- "lineHeight": "{line-height.300}",
59
- "fontSize": "{font-size.f2}"
60
- },
61
- "description": "H5"
59
+ "lineHeight": "{line-height.sm}",
60
+ "fontSize": "{font-size.6}",
61
+ "letterSpacing": "{letter-spacing.6}"
62
+ }
62
63
  },
63
64
  "2xs": {
64
- "type": "typography",
65
- "value": {
66
- "fontFamily": "{font-family.main}",
65
+ "$type": "typography",
66
+ "$value": {
67
+ "fontFamily": "{font.family}",
67
68
  "fontWeight": "{font-weight.medium}",
68
- "lineHeight": "{line-height.300}",
69
- "fontSize": "{font-size.f1}"
70
- },
71
- "description": "H6"
69
+ "lineHeight": "{line-height.sm}",
70
+ "fontSize": "{font-size.5}",
71
+ "letterSpacing": "{letter-spacing.6}"
72
+ }
72
73
  }
73
74
  },
74
75
  "ingress": {
75
76
  "lg": {
76
- "type": "typography",
77
- "value": {
78
- "fontFamily": "{font-family.main}",
77
+ "$type": "typography",
78
+ "$value": {
79
+ "fontFamily": "{font.family}",
79
80
  "fontWeight": "{font-weight.regular}",
80
- "lineHeight": "{line-height.700}",
81
- "fontSize": "{font-size.f4}"
81
+ "lineHeight": "{line-height.lg}",
82
+ "fontSize": "{font-size.8}",
83
+ "letterSpacing": "{letter-spacing.8}"
82
84
  }
83
85
  },
84
86
  "md": {
85
- "type": "typography",
86
- "value": {
87
- "fontFamily": "{font-family.main}",
87
+ "$type": "typography",
88
+ "$value": {
89
+ "fontFamily": "{font.family}",
88
90
  "fontWeight": "{font-weight.regular}",
89
- "lineHeight": "{line-height.700}",
90
- "fontSize": "{font-size.f3}"
91
+ "lineHeight": "{line-height.lg}",
92
+ "fontSize": "{font-size.7}",
93
+ "letterSpacing": "{letter-spacing.8}"
91
94
  }
92
95
  },
93
96
  "sm": {
94
- "type": "typography",
95
- "value": {
96
- "fontFamily": "{font-family.main}",
97
+ "$type": "typography",
98
+ "$value": {
99
+ "fontFamily": "{font.family}",
97
100
  "fontWeight": "{font-weight.regular}",
98
- "lineHeight": "{line-height.700}",
99
- "fontSize": "{font-size.f2}"
101
+ "lineHeight": "{line-height.lg}",
102
+ "fontSize": "{font-size.6}",
103
+ "letterSpacing": "{letter-spacing.7}"
100
104
  }
101
105
  },
102
106
  "xs": {
103
- "type": "typography",
104
- "value": {
105
- "fontFamily": "{font-family.main}",
107
+ "$type": "typography",
108
+ "$value": {
109
+ "fontFamily": "{font.family}",
106
110
  "fontWeight": "{font-weight.regular}",
107
- "lineHeight": "{line-height.700}",
108
- "fontSize": "{font-size.f1}"
111
+ "lineHeight": "{line-height.lg}",
112
+ "fontSize": "{font-size.5}",
113
+ "letterSpacing": "{letter-spacing.6}"
109
114
  }
110
115
  }
111
116
  },
112
117
  "paragraph": {
113
118
  "lg": {
114
- "type": "typography",
115
- "value": {
116
- "fontFamily": "{font-family.main}",
119
+ "$type": "typography",
120
+ "$value": {
121
+ "fontFamily": "{font.family}",
117
122
  "fontWeight": "{font-weight.regular}",
118
- "lineHeight": "{line-height.500}",
119
- "fontSize": "{font-size.f2}"
123
+ "lineHeight": "{line-height.md}",
124
+ "fontSize": "{font-size.6}",
125
+ "letterSpacing": "{letter-spacing.8}"
120
126
  }
121
127
  },
122
128
  "md": {
123
- "type": "typography",
124
- "value": {
125
- "fontFamily": "{font-family.main}",
129
+ "$type": "typography",
130
+ "$value": {
131
+ "fontFamily": "{font.family}",
126
132
  "fontWeight": "{font-weight.regular}",
127
- "lineHeight": "{line-height.500}",
128
- "fontSize": "{font-size.f1}"
133
+ "lineHeight": "{line-height.md}",
134
+ "fontSize": "{font-size.5}",
135
+ "letterSpacing": "{letter-spacing.8}"
129
136
  }
130
137
  },
131
138
  "sm": {
132
- "type": "typography",
133
- "value": {
134
- "fontFamily": "{font-family.main}",
139
+ "$type": "typography",
140
+ "$value": {
141
+ "fontFamily": "{font.family}",
135
142
  "fontWeight": "{font-weight.regular}",
136
- "lineHeight": "{line-height.500}",
137
- "fontSize": "{font-size.f0}"
143
+ "lineHeight": "{line-height.md}",
144
+ "fontSize": "{font-size.4}",
145
+ "letterSpacing": "{letter-spacing.7}"
138
146
  }
139
147
  },
140
148
  "xs": {
141
- "type": "typography",
142
- "value": {
143
- "fontFamily": "{font-family.main}",
149
+ "$type": "typography",
150
+ "$value": {
151
+ "fontFamily": "{font.family}",
144
152
  "fontWeight": "{font-weight.regular}",
145
- "lineHeight": "{line-height.500}",
146
- "fontSize": "{font-size.f-1}"
153
+ "lineHeight": "{line-height.md}",
154
+ "fontSize": "{font-size.3}",
155
+ "letterSpacing": "{letter-spacing.6}"
147
156
  }
148
157
  },
149
158
  "short": {
150
159
  "lg": {
151
- "type": "typography",
152
- "value": {
153
- "fontFamily": "{font-family.main}",
160
+ "$type": "typography",
161
+ "$value": {
162
+ "fontFamily": "{font.family}",
154
163
  "fontWeight": "{font-weight.regular}",
155
- "lineHeight": "{line-height.300}",
156
- "fontSize": "{font-size.f2}"
164
+ "lineHeight": "{line-height.sm}",
165
+ "fontSize": "{font-size.6}",
166
+ "letterSpacing": "{letter-spacing.8}"
157
167
  }
158
168
  },
159
169
  "md": {
160
- "type": "typography",
161
- "value": {
162
- "fontFamily": "{font-family.main}",
170
+ "$type": "typography",
171
+ "$value": {
172
+ "fontFamily": "{font.family}",
163
173
  "fontWeight": "{font-weight.regular}",
164
- "lineHeight": "{line-height.300}",
165
- "fontSize": "{font-size.f1}"
174
+ "lineHeight": "{line-height.sm}",
175
+ "fontSize": "{font-size.5}",
176
+ "letterSpacing": "{letter-spacing.8}"
166
177
  }
167
178
  },
168
179
  "sm": {
169
- "type": "typography",
170
- "value": {
171
- "fontFamily": "{font-family.main}",
180
+ "$type": "typography",
181
+ "$value": {
182
+ "fontFamily": "{font.family}",
172
183
  "fontWeight": "{font-weight.regular}",
173
- "lineHeight": "{line-height.300}",
174
- "fontSize": "{font-size.f0}"
184
+ "lineHeight": "{line-height.sm}",
185
+ "fontSize": "{font-size.4}",
186
+ "letterSpacing": "{letter-spacing.7}"
175
187
  }
176
188
  },
177
189
  "xs": {
178
- "type": "typography",
179
- "value": {
180
- "fontFamily": "{font-family.main}",
190
+ "$type": "typography",
191
+ "$value": {
192
+ "fontFamily": "{font.family}",
181
193
  "fontWeight": "{font-weight.regular}",
182
- "lineHeight": "{line-height.300}",
183
- "fontSize": "{font-size.f-1}"
194
+ "lineHeight": "{line-height.sm}",
195
+ "fontSize": "{font-size.3}",
196
+ "letterSpacing": "{letter-spacing.6}"
184
197
  }
185
198
  }
186
199
  },
187
200
  "long": {
188
201
  "lg": {
189
- "type": "typography",
190
- "value": {
191
- "fontFamily": "{font-family.main}",
202
+ "$type": "typography",
203
+ "$value": {
204
+ "fontFamily": "{font.family}",
192
205
  "fontWeight": "{font-weight.regular}",
193
- "lineHeight": "{line-height.700}",
194
- "fontSize": "{font-size.f1}"
206
+ "lineHeight": "{line-height.lg}",
207
+ "fontSize": "{font-size.6}",
208
+ "letterSpacing": "{letter-spacing.8}"
195
209
  }
196
210
  },
197
211
  "md": {
198
- "type": "typography",
199
- "value": {
200
- "fontFamily": "{font-family.main}",
212
+ "$type": "typography",
213
+ "$value": {
214
+ "fontFamily": "{font.family}",
201
215
  "fontWeight": "{font-weight.regular}",
202
- "lineHeight": "{line-height.700}",
203
- "fontSize": "{font-size.f0}"
216
+ "lineHeight": "{line-height.lg}",
217
+ "fontSize": "{font-size.5}",
218
+ "letterSpacing": "{letter-spacing.8}"
204
219
  }
205
220
  },
206
221
  "sm": {
207
- "type": "typography",
208
- "value": {
209
- "fontFamily": "{font-family.main}",
222
+ "$type": "typography",
223
+ "$value": {
224
+ "fontFamily": "{font.family}",
210
225
  "fontWeight": "{font-weight.regular}",
211
- "lineHeight": "{line-height.700}",
212
- "fontSize": "{font-size.f-1}"
226
+ "lineHeight": "{line-height.lg}",
227
+ "fontSize": "{font-size.4}",
228
+ "letterSpacing": "{letter-spacing.7}"
213
229
  }
214
230
  },
215
231
  "xs": {
216
- "type": "typography",
217
- "value": {
218
- "fontFamily": "{font-family.main}",
232
+ "$type": "typography",
233
+ "$value": {
234
+ "fontFamily": "{font.family}",
219
235
  "fontWeight": "{font-weight.regular}",
220
- "lineHeight": "{line-height.700}",
221
- "fontSize": "{font-size.f-2}"
236
+ "lineHeight": "{line-height.lg}",
237
+ "fontSize": "{font-size.3}",
238
+ "letterSpacing": "{letter-spacing.6}"
222
239
  }
223
240
  }
224
241
  }
225
242
  },
226
243
  "label": {
227
244
  "lg": {
228
- "type": "typography",
229
- "value": {
230
- "fontFamily": "{font-family.main}",
245
+ "$type": "typography",
246
+ "$value": {
247
+ "fontFamily": "{font.family}",
231
248
  "fontWeight": "{font-weight.medium}",
232
- "lineHeight": "{line-height.300}",
233
- "fontSize": "{font-size.f2}"
249
+ "lineHeight": "{line-height.sm}",
250
+ "fontSize": "{font-size.6}",
251
+ "letterSpacing": "{letter-spacing.8}"
234
252
  }
235
253
  },
236
254
  "md": {
237
- "type": "typography",
238
- "value": {
239
- "fontFamily": "{font-family.main}",
255
+ "$type": "typography",
256
+ "$value": {
257
+ "fontFamily": "{font.family}",
240
258
  "fontWeight": "{font-weight.medium}",
241
- "lineHeight": "{line-height.300}",
242
- "fontSize": "{font-size.f1}"
259
+ "lineHeight": "{line-height.sm}",
260
+ "fontSize": "{font-size.5}",
261
+ "letterSpacing": "{letter-spacing.8}"
243
262
  }
244
263
  },
245
264
  "sm": {
246
- "type": "typography",
247
- "value": {
248
- "fontFamily": "{font-family.main}",
265
+ "$type": "typography",
266
+ "$value": {
267
+ "fontFamily": "{font.family}",
249
268
  "fontWeight": "{font-weight.medium}",
250
- "lineHeight": "{line-height.300}",
251
- "fontSize": "{font-size.f0}"
269
+ "lineHeight": "{line-height.sm}",
270
+ "fontSize": "{font-size.4}",
271
+ "letterSpacing": "{letter-spacing.7}"
252
272
  }
253
273
  },
254
274
  "xs": {
255
- "type": "typography",
256
- "value": {
257
- "fontFamily": "{font-family.main}",
275
+ "$type": "typography",
276
+ "$value": {
277
+ "fontFamily": "{font.family}",
258
278
  "fontWeight": "{font-weight.medium}",
259
- "lineHeight": "{line-height.300}",
260
- "fontSize": "{font-size.f-1}"
279
+ "lineHeight": "{line-height.sm}",
280
+ "fontSize": "{font-size.3}",
281
+ "letterSpacing": "{letter-spacing.6}"
261
282
  }
262
283
  }
263
284
  },
264
285
  "error_message": {
265
286
  "lg": {
266
- "type": "typography",
267
- "value": {
268
- "fontFamily": "{font-family.main}",
287
+ "$type": "typography",
288
+ "$value": {
289
+ "fontFamily": "{font.family}",
269
290
  "fontWeight": "{font-weight.regular}",
270
- "lineHeight": "{line-height.300}",
271
- "fontSize": "{font-size.f2}"
291
+ "lineHeight": "{line-height.sm}",
292
+ "fontSize": "{font-size.6}",
293
+ "letterSpacing": "{letter-spacing.8}"
272
294
  }
273
295
  },
274
296
  "md": {
275
- "type": "typography",
276
- "value": {
277
- "fontFamily": "{font-family.main}",
297
+ "$type": "typography",
298
+ "$value": {
299
+ "fontFamily": "{font.family}",
278
300
  "fontWeight": "{font-weight.regular}",
279
- "lineHeight": "{line-height.300}",
280
- "fontSize": "{font-size.f1}"
301
+ "lineHeight": "{line-height.sm}",
302
+ "fontSize": "{font-size.5}",
303
+ "letterSpacing": "{letter-spacing.8}"
281
304
  }
282
305
  },
283
306
  "sm": {
284
- "type": "typography",
285
- "value": {
286
- "fontFamily": "{font-family.main}",
307
+ "$type": "typography",
308
+ "$value": {
309
+ "fontFamily": "{font.family}",
287
310
  "fontWeight": "{font-weight.regular}",
288
- "lineHeight": "{line-height.300}",
289
- "fontSize": "{font-size.f0}"
311
+ "lineHeight": "{line-height.sm}",
312
+ "fontSize": "{font-size.4}",
313
+ "letterSpacing": "{letter-spacing.7}"
290
314
  }
291
315
  },
292
316
  "xs": {
293
- "type": "typography",
294
- "value": {
295
- "fontFamily": "{font-family.main}",
317
+ "$type": "typography",
318
+ "$value": {
319
+ "fontFamily": "{font.family}",
296
320
  "fontWeight": "{font-weight.regular}",
297
- "lineHeight": "{line-height.300}",
298
- "fontSize": "{font-size.f-1}"
321
+ "lineHeight": "{line-height.sm}",
322
+ "fontSize": "{font-size.3}",
323
+ "letterSpacing": "{letter-spacing.6}"
299
324
  }
300
325
  }
301
326
  }
302
327
  },
303
- "opacity": {
304
- "disabled": {
305
- "type": "opacity",
306
- "value": "{opacity.30}"
328
+ "disabled": {
329
+ "opacity": {
330
+ "$type": "opacity",
331
+ "$value": "{opacity.30}"
307
332
  }
308
333
  },
309
334
  "border-radius": {
310
335
  "sm": {
311
- "type": "borderRadius",
312
- "value": "{border-radius.2}"
336
+ "$type": "borderRadius",
337
+ "$value": "{border-radius.base}*0.5"
313
338
  },
314
339
  "md": {
315
- "type": "borderRadius",
316
- "value": "{border-radius.4}"
340
+ "$type": "borderRadius",
341
+ "$value": "{border-radius.base}*1"
317
342
  },
318
343
  "lg": {
319
- "type": "borderRadius",
320
- "value": "{border-radius.8}"
344
+ "$type": "borderRadius",
345
+ "$value": "{border-radius.base}*2"
321
346
  },
322
347
  "xl": {
323
- "type": "borderRadius",
324
- "value": "{border-radius.12}"
348
+ "$type": "borderRadius",
349
+ "$value": "{border-radius.base}*3"
325
350
  },
326
351
  "2xl": {
327
- "type": "borderRadius",
328
- "value": "{border-radius.16}"
352
+ "$type": "borderRadius",
353
+ "$value": "{border-radius.base}*4"
329
354
  },
330
355
  "3xl": {
331
- "type": "borderRadius",
332
- "value": "{border-radius.24}"
356
+ "$type": "borderRadius",
357
+ "$value": "{border-radius.base}*6"
333
358
  },
334
359
  "4xl": {
335
- "type": "borderRadius",
336
- "value": "{border-radius.32}"
360
+ "$type": "borderRadius",
361
+ "$value": "{border-radius.base}*8"
337
362
  },
338
363
  "full": {
339
- "type": "borderRadius",
340
- "value": "{border-radius.9999}"
364
+ "$type": "borderRadius",
365
+ "$value": "9999"
341
366
  }
342
367
  },
343
368
  "spacing": {
344
369
  "0": {
345
- "type": "spacing",
346
- "value": "{sizing.base}*0"
370
+ "$type": "spacing",
371
+ "$value": "{spacing.base}*0"
347
372
  },
348
373
  "1": {
349
- "type": "spacing",
350
- "value": "{sizing.base}*1"
374
+ "$type": "spacing",
375
+ "$value": "{spacing.base}*1"
351
376
  },
352
377
  "2": {
353
- "type": "spacing",
354
- "value": "{sizing.base}*2"
378
+ "$type": "spacing",
379
+ "$value": "{spacing.base}*2"
355
380
  },
356
381
  "3": {
357
- "type": "spacing",
358
- "value": "{sizing.base}*3"
382
+ "$type": "spacing",
383
+ "$value": "{spacing.base}*3"
359
384
  },
360
385
  "4": {
361
- "type": "spacing",
362
- "value": "{sizing.base}*4"
386
+ "$type": "spacing",
387
+ "$value": "{spacing.base}*4"
363
388
  },
364
389
  "5": {
365
- "type": "spacing",
366
- "value": "{sizing.base}*5"
390
+ "$type": "spacing",
391
+ "$value": "{spacing.base}*5"
367
392
  },
368
393
  "6": {
369
- "type": "spacing",
370
- "value": "{sizing.base}*6"
394
+ "$type": "spacing",
395
+ "$value": "{spacing.base}*6"
371
396
  },
372
397
  "7": {
373
- "type": "spacing",
374
- "value": "{sizing.base}*7"
398
+ "$type": "spacing",
399
+ "$value": "{spacing.base}*7"
375
400
  },
376
401
  "8": {
377
- "type": "spacing",
378
- "value": "{sizing.base}*8"
402
+ "$type": "spacing",
403
+ "$value": "{spacing.base}*8"
379
404
  },
380
405
  "9": {
381
- "type": "spacing",
382
- "value": "{sizing.base}*9"
406
+ "$type": "spacing",
407
+ "$value": "{spacing.base}*9"
383
408
  },
384
409
  "10": {
385
- "type": "spacing",
386
- "value": "{sizing.base}*10"
410
+ "$type": "spacing",
411
+ "$value": "{spacing.base}*10"
387
412
  },
388
413
  "11": {
389
- "type": "spacing",
390
- "value": "{sizing.base}*11"
414
+ "$type": "spacing",
415
+ "$value": "{spacing.base}*11"
391
416
  },
392
417
  "12": {
393
- "type": "spacing",
394
- "value": "{sizing.base}*12"
418
+ "$type": "spacing",
419
+ "$value": "{spacing.base}*12"
395
420
  },
396
421
  "13": {
397
- "type": "spacing",
398
- "value": "{sizing.base}*13"
422
+ "$type": "spacing",
423
+ "$value": "{spacing.base}*13"
399
424
  },
400
425
  "14": {
401
- "type": "spacing",
402
- "value": "{sizing.base}*14"
426
+ "$type": "spacing",
427
+ "$value": "{spacing.base}*14"
403
428
  },
404
429
  "15": {
405
- "type": "spacing",
406
- "value": "{sizing.base}*15"
430
+ "$type": "spacing",
431
+ "$value": "{spacing.base}*15"
407
432
  },
408
433
  "18": {
409
- "type": "spacing",
410
- "value": "{sizing.base}*18"
434
+ "$type": "spacing",
435
+ "$value": "{spacing.base}*18"
411
436
  },
412
437
  "22": {
413
- "type": "spacing",
414
- "value": "{sizing.base}*22"
438
+ "$type": "spacing",
439
+ "$value": "{spacing.base}*22"
415
440
  },
416
441
  "26": {
417
- "type": "spacing",
418
- "value": "{sizing.base}*26"
442
+ "$type": "spacing",
443
+ "$value": "{spacing.base}*26"
419
444
  },
420
445
  "30": {
421
- "type": "spacing",
422
- "value": "{sizing.base}*30"
446
+ "$type": "spacing",
447
+ "$value": "{spacing.base}*30"
423
448
  }
424
449
  },
425
450
  "sizing": {
426
451
  "0": {
427
- "type": "sizing",
428
- "value": "{sizing.base}*0"
452
+ "$type": "sizing",
453
+ "$value": "{sizing.base}*0"
429
454
  },
430
455
  "1": {
431
- "type": "sizing",
432
- "value": "{sizing.base}*1"
456
+ "$type": "sizing",
457
+ "$value": "{sizing.base}*1"
433
458
  },
434
459
  "2": {
435
- "type": "sizing",
436
- "value": "{sizing.base}*2"
460
+ "$type": "sizing",
461
+ "$value": "{sizing.base}*2"
437
462
  },
438
463
  "3": {
439
- "type": "sizing",
440
- "value": "{sizing.base}*3"
464
+ "$type": "sizing",
465
+ "$value": "{sizing.base}*3"
441
466
  },
442
467
  "4": {
443
- "type": "sizing",
444
- "value": "{sizing.base}*4"
468
+ "$type": "sizing",
469
+ "$value": "{sizing.base}*4"
445
470
  },
446
471
  "5": {
447
- "type": "sizing",
448
- "value": "{sizing.base}*5"
472
+ "$type": "sizing",
473
+ "$value": "{sizing.base}*5"
449
474
  },
450
475
  "6": {
451
- "type": "sizing",
452
- "value": "{sizing.base}*6"
476
+ "$type": "sizing",
477
+ "$value": "{sizing.base}*6"
453
478
  },
454
479
  "7": {
455
- "type": "sizing",
456
- "value": "{sizing.base}*7"
480
+ "$type": "sizing",
481
+ "$value": "{sizing.base}*7"
457
482
  },
458
483
  "8": {
459
- "type": "sizing",
460
- "value": "{sizing.base}*8"
484
+ "$type": "sizing",
485
+ "$value": "{sizing.base}*8"
461
486
  },
462
487
  "9": {
463
- "type": "sizing",
464
- "value": "{sizing.base}*9"
488
+ "$type": "sizing",
489
+ "$value": "{sizing.base}*9"
465
490
  },
466
491
  "10": {
467
- "type": "sizing",
468
- "value": "{sizing.base}*10"
492
+ "$type": "sizing",
493
+ "$value": "{sizing.base}*10"
469
494
  },
470
495
  "11": {
471
- "type": "sizing",
472
- "value": "{sizing.base}*11"
496
+ "$type": "sizing",
497
+ "$value": "{sizing.base}*11"
473
498
  },
474
499
  "12": {
475
- "type": "sizing",
476
- "value": "{sizing.base}*12"
500
+ "$type": "sizing",
501
+ "$value": "{sizing.base}*12"
477
502
  },
478
503
  "13": {
479
- "type": "sizing",
480
- "value": "{sizing.base}*13"
504
+ "$type": "sizing",
505
+ "$value": "{sizing.base}*13"
481
506
  },
482
507
  "14": {
483
- "type": "sizing",
484
- "value": "{sizing.base}*14"
508
+ "$type": "sizing",
509
+ "$value": "{sizing.base}*14"
485
510
  },
486
511
  "15": {
487
- "type": "sizing",
488
- "value": "{sizing.base}*15"
512
+ "$type": "sizing",
513
+ "$value": "{sizing.base}*15"
489
514
  },
490
515
  "18": {
491
- "type": "sizing",
492
- "value": "{sizing.base}*18"
516
+ "$type": "sizing",
517
+ "$value": "{sizing.base}*18"
493
518
  },
494
519
  "22": {
495
- "type": "sizing",
496
- "value": "{sizing.base}*22"
520
+ "$type": "sizing",
521
+ "$value": "{sizing.base}*22"
497
522
  },
498
523
  "26": {
499
- "type": "sizing",
500
- "value": "{sizing.base}*26"
524
+ "$type": "sizing",
525
+ "$value": "{sizing.base}*26"
501
526
  },
502
527
  "30": {
503
- "type": "sizing",
504
- "value": "{sizing.base}*30"
528
+ "$type": "sizing",
529
+ "$value": "{sizing.base}*30"
505
530
  }
506
531
  },
507
532
  "border-width": {
508
533
  "default": {
509
- "type": "borderWidth",
510
- "value": "{border-width.1}"
511
- },
512
- "active": {
513
- "type": "borderWidth",
514
- "value": "{border-width.2}"
534
+ "$type": "borderWidth",
535
+ "$value": "{border-width.1}"
515
536
  },
516
- "tab_focus": {
517
- "type": "borderWidth",
518
- "value": "{border-width.2}"
537
+ "highlight": {
538
+ "$type": "borderWidth",
539
+ "$value": "{border-width.2}"
519
540
  }
520
541
  },
521
542
  "shadow": {
522
543
  "xs": {
523
- "type": "boxShadow",
524
- "value": "{shadow.100}"
544
+ "$type": "boxShadow",
545
+ "$value": "{shadow.100}"
525
546
  },
526
547
  "sm": {
527
- "type": "boxShadow",
528
- "value": "{shadow.200}"
548
+ "$type": "boxShadow",
549
+ "$value": "{shadow.200}"
529
550
  },
530
551
  "md": {
531
- "type": "boxShadow",
532
- "value": "{shadow.300}"
552
+ "$type": "boxShadow",
553
+ "$value": "{shadow.300}"
533
554
  },
534
555
  "lg": {
535
- "type": "boxShadow",
536
- "value": "{shadow.400}"
556
+ "$type": "boxShadow",
557
+ "$value": "{shadow.400}"
537
558
  },
538
559
  "xl": {
539
- "type": "boxShadow",
540
- "value": "{shadow.500}"
560
+ "$type": "boxShadow",
561
+ "$value": "{shadow.500}"
541
562
  }
542
563
  }
543
564
  }