@aleph-alpha/config-css 0.13.0 → 0.14.1

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 (5) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/index.js +140 -104
  3. package/package.json +3 -3
  4. package/sd.config.js +1 -50
  5. package/tokens.json +272 -46
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aleph-alpha/config-css",
3
3
  "license": "Apache-2.0",
4
- "version": "0.13.0",
4
+ "version": "0.14.1",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
7
7
  "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -15,7 +15,7 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@tokens-studio/sd-transforms": "1.3.0",
18
- "@unocss/preset-legacy-compat": "66.1.1",
18
+ "@unocss/preset-legacy-compat": "66.1.2",
19
19
  "token-transformer": "0.0.33",
20
20
  "unocss": "^66.0.0",
21
21
  "unocss-preset-animations": "1.2.1",
@@ -26,7 +26,7 @@
26
26
  "vite-plugin-dts": "^4.0.0"
27
27
  },
28
28
  "scripts": {
29
- "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",
29
+ "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\",\"Spark Text/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",
30
30
  "transform:dark-mode": "npx token-transformer ./tokens.json ./transformed-tokens/dark-mode.json \"Spark Colors/Dark mode\" --throwErrorWhenNotResolved",
31
31
  "transform:light-mode": "npx token-transformer ./tokens.json ./transformed-tokens/light-mode.json \"Spark Colors/Light mode\" --throwErrorWhenNotResolved",
32
32
  "transform:all": "pnpm run transform:global && pnpm run transform:dark-mode && pnpm run transform:light-mode",
package/sd.config.js CHANGED
@@ -97,54 +97,7 @@ StyleDictionary.registerTransform({
97
97
  });
98
98
 
99
99
  /**
100
- * This transform will convert the line-height value of a typography token to 'normal' if it is 'AUTO' and set numbers without units to pixels
101
- * This is because 'normal' is the default value for line-height in css and AUTO can not be interpreted by CSS
102
- */
103
- StyleDictionary.registerTransform({
104
- name: 'custom/typography/line-height',
105
- type: `value`,
106
- transitive: true,
107
- filter: function (token) {
108
- return token.type === 'typography';
109
- },
110
- transform: ({ value }) => {
111
- if (!value) return;
112
-
113
- if (value['line-height'] === 'AUTO') {
114
- value['line-height'] = 'normal';
115
- } else if (!isNaN(Number(value['line-height']))) {
116
- value['line-height'] = `${value['line-height']}px`;
117
- }
118
-
119
- return value;
120
- },
121
- });
122
-
123
- /**
124
- * This transform will convert the font-size value of a typography token to rem
125
- */
126
- StyleDictionary.registerTransform({
127
- name: 'custom/typography/font-size',
128
- type: `value`,
129
- transitive: true,
130
- filter: function (token) {
131
- return token.type === 'typography';
132
- },
133
- transform: ({ value }) => {
134
- if (!value) return;
135
-
136
- if (value['font-size']) {
137
- const fontSizeInPx = parseInt(value['font-size'].split('px')[0]);
138
- const fontSizeInRem = fontSizeInPx / BASE_PX_FONT_SIZE;
139
- value['font-size'] = `${fontSizeInRem}rem`;
140
- }
141
-
142
- return value;
143
- },
144
- });
145
-
146
- /**
147
- * This transform will convert the font-family value of a typography token to rem
100
+ * This transform will convert the font-family value to use the custom font-family variable
148
101
  */
149
102
  StyleDictionary.registerTransform({
150
103
  name: 'custom/typography/font-family',
@@ -181,8 +134,6 @@ function getStyleDictionaryConfig(theme) {
181
134
  'custom/typography/keys/css',
182
135
  'custom/name/typography',
183
136
  'custom/shadow/css',
184
- 'custom/typography/line-height',
185
- 'custom/typography/font-size',
186
137
  'custom/typography/font-family',
187
138
  ],
188
139
  buildPath: `./sd-output/`,
package/tokens.json CHANGED
@@ -77,15 +77,23 @@
77
77
  "type": "lineHeights"
78
78
  },
79
79
  "1": {
80
- "value": "24",
80
+ "value": "AUTO",
81
81
  "type": "lineHeights"
82
82
  },
83
83
  "2": {
84
- "value": "16",
84
+ "value": "AUTO",
85
85
  "type": "lineHeights"
86
86
  },
87
- "3": {
88
- "value": "20",
87
+ "8": {
88
+ "value": "AUTO",
89
+ "type": "lineHeights"
90
+ },
91
+ "10": {
92
+ "value": "AUTO",
93
+ "type": "lineHeights"
94
+ },
95
+ "11": {
96
+ "value": "AUTO",
89
97
  "type": "lineHeights"
90
98
  }
91
99
  },
@@ -103,34 +111,52 @@
103
111
  "type": "fontWeights"
104
112
  }
105
113
  },
106
- "fontSize": {
114
+ "letterSpacing": {
107
115
  "0": {
108
- "value": "12",
109
- "type": "fontSizes"
116
+ "value": "0%",
117
+ "type": "letterSpacing"
110
118
  },
111
119
  "1": {
112
- "value": "14",
113
- "type": "fontSizes"
120
+ "value": "0%",
121
+ "type": "letterSpacing"
114
122
  },
115
123
  "2": {
116
- "value": "16",
117
- "type": "fontSizes"
124
+ "value": "0%",
125
+ "type": "letterSpacing"
118
126
  },
119
127
  "3": {
120
- "value": "18",
121
- "type": "fontSizes"
128
+ "value": "0%",
129
+ "type": "letterSpacing"
122
130
  },
123
131
  "4": {
124
- "value": "20",
125
- "type": "fontSizes"
132
+ "value": "0%",
133
+ "type": "letterSpacing"
126
134
  },
127
135
  "5": {
128
- "value": "30",
129
- "type": "fontSizes"
130
- }
131
- },
132
- "letterSpacing": {
133
- "0": {
136
+ "value": "0%",
137
+ "type": "letterSpacing"
138
+ },
139
+ "6": {
140
+ "value": "0%",
141
+ "type": "letterSpacing"
142
+ },
143
+ "7": {
144
+ "value": "0%",
145
+ "type": "letterSpacing"
146
+ },
147
+ "8": {
148
+ "value": "0%",
149
+ "type": "letterSpacing"
150
+ },
151
+ "9": {
152
+ "value": "0%",
153
+ "type": "letterSpacing"
154
+ },
155
+ "10": {
156
+ "value": "0%",
157
+ "type": "letterSpacing"
158
+ },
159
+ "11": {
134
160
  "value": "0%",
135
161
  "type": "letterSpacing"
136
162
  }
@@ -139,6 +165,50 @@
139
165
  "0": {
140
166
  "value": "0",
141
167
  "type": "paragraphSpacing"
168
+ },
169
+ "1": {
170
+ "value": "0",
171
+ "type": "paragraphSpacing"
172
+ },
173
+ "2": {
174
+ "value": "0",
175
+ "type": "paragraphSpacing"
176
+ },
177
+ "3": {
178
+ "value": "0",
179
+ "type": "paragraphSpacing"
180
+ },
181
+ "4": {
182
+ "value": "0",
183
+ "type": "paragraphSpacing"
184
+ },
185
+ "5": {
186
+ "value": "0",
187
+ "type": "paragraphSpacing"
188
+ },
189
+ "6": {
190
+ "value": "0",
191
+ "type": "paragraphSpacing"
192
+ },
193
+ "7": {
194
+ "value": "0",
195
+ "type": "paragraphSpacing"
196
+ },
197
+ "8": {
198
+ "value": "0",
199
+ "type": "paragraphSpacing"
200
+ },
201
+ "9": {
202
+ "value": "0",
203
+ "type": "paragraphSpacing"
204
+ },
205
+ "10": {
206
+ "value": "0",
207
+ "type": "paragraphSpacing"
208
+ },
209
+ "11": {
210
+ "value": "0",
211
+ "type": "paragraphSpacing"
142
212
  }
143
213
  },
144
214
  "Heading": {
@@ -146,8 +216,8 @@
146
216
  "value": {
147
217
  "fontFamily": "{fontFamilies.raleway}",
148
218
  "fontWeight": "{fontWeights.raleway-0}",
149
- "lineHeight": "{lineHeights.0}",
150
- "fontSize": "{fontSize.5}",
219
+ "lineHeight": "{lineHeight.2XL}",
220
+ "fontSize": "{fontSize.2XL}",
151
221
  "letterSpacing": "{letterSpacing.0}",
152
222
  "paragraphSpacing": "{paragraphSpacing.0}",
153
223
  "paragraphIndent": "{paragraphIndent.0}",
@@ -160,8 +230,8 @@
160
230
  "value": {
161
231
  "fontFamily": "{fontFamilies.raleway}",
162
232
  "fontWeight": "{fontWeights.raleway-0}",
163
- "lineHeight": "{lineHeights.0}",
164
- "fontSize": "{fontSize.4}",
233
+ "lineHeight": "{lineHeight.L}",
234
+ "fontSize": "{fontSize.L}",
165
235
  "letterSpacing": "{letterSpacing.0}",
166
236
  "paragraphSpacing": "{paragraphSpacing.0}",
167
237
  "paragraphIndent": "{paragraphIndent.0}",
@@ -174,8 +244,8 @@
174
244
  "value": {
175
245
  "fontFamily": "{fontFamilies.raleway}",
176
246
  "fontWeight": "{fontWeights.raleway-0}",
177
- "lineHeight": "{lineHeights.0}",
178
- "fontSize": "{fontSize.3}",
247
+ "lineHeight": "{lineHeight.M}",
248
+ "fontSize": "{fontSize.M}",
179
249
  "letterSpacing": "{letterSpacing.0}",
180
250
  "paragraphSpacing": "{paragraphSpacing.0}",
181
251
  "paragraphIndent": "{paragraphIndent.0}",
@@ -188,8 +258,8 @@
188
258
  "value": {
189
259
  "fontFamily": "{fontFamilies.raleway}",
190
260
  "fontWeight": "{fontWeights.raleway-0}",
191
- "lineHeight": "{lineHeights.1}",
192
- "fontSize": "{fontSize.2}",
261
+ "lineHeight": "{lineHeight.M}",
262
+ "fontSize": "{fontSize.S}",
193
263
  "letterSpacing": "{letterSpacing.0}",
194
264
  "paragraphSpacing": "{paragraphSpacing.0}",
195
265
  "paragraphIndent": "{paragraphIndent.0}",
@@ -202,8 +272,8 @@
202
272
  "value": {
203
273
  "fontFamily": "{fontFamilies.raleway}",
204
274
  "fontWeight": "{fontWeights.raleway-1}",
205
- "lineHeight": "{lineHeights.2}",
206
- "fontSize": "{fontSize.1}",
275
+ "lineHeight": "{lineHeight.XS}",
276
+ "fontSize": "{fontSize.XS}",
207
277
  "letterSpacing": "{letterSpacing.0}",
208
278
  "paragraphSpacing": "{paragraphSpacing.0}",
209
279
  "paragraphIndent": "{paragraphIndent.0}",
@@ -218,8 +288,8 @@
218
288
  "value": {
219
289
  "fontFamily": "{fontFamilies.raleway}",
220
290
  "fontWeight": "{fontWeights.raleway-0}",
221
- "lineHeight": "{lineHeights.1}",
222
- "fontSize": "{fontSize.2}",
291
+ "lineHeight": "{lineHeight.M}",
292
+ "fontSize": "{fontSize.S}",
223
293
  "letterSpacing": "{letterSpacing.0}",
224
294
  "paragraphSpacing": "{paragraphSpacing.0}",
225
295
  "paragraphIndent": "{paragraphIndent.0}",
@@ -232,8 +302,8 @@
232
302
  "value": {
233
303
  "fontFamily": "{fontFamilies.raleway}",
234
304
  "fontWeight": "{fontWeights.raleway-2}",
235
- "lineHeight": "{lineHeights.1}",
236
- "fontSize": "{fontSize.2}",
305
+ "lineHeight": "{lineHeight.M}",
306
+ "fontSize": "{fontSize.S}",
237
307
  "letterSpacing": "{letterSpacing.0}",
238
308
  "paragraphSpacing": "{paragraphSpacing.0}",
239
309
  "paragraphIndent": "{paragraphIndent.0}",
@@ -246,8 +316,8 @@
246
316
  "value": {
247
317
  "fontFamily": "{fontFamilies.raleway}",
248
318
  "fontWeight": "{fontWeights.raleway-2}",
249
- "lineHeight": "{lineHeights.3}",
250
- "fontSize": "{fontSize.2}",
319
+ "lineHeight": "{lineHeight.S}",
320
+ "fontSize": "{fontSize.S}",
251
321
  "letterSpacing": "{letterSpacing.0}",
252
322
  "paragraphSpacing": "{paragraphSpacing.0}",
253
323
  "paragraphIndent": "{paragraphIndent.0}",
@@ -263,8 +333,8 @@
263
333
  "value": {
264
334
  "fontFamily": "{fontFamilies.raleway}",
265
335
  "fontWeight": "{fontWeights.raleway-0}",
266
- "lineHeight": "{lineHeights.0}",
267
- "fontSize": "{fontSize.1}",
336
+ "lineHeight": "{lineHeight.XS}",
337
+ "fontSize": "{fontSize.XS}",
268
338
  "letterSpacing": "{letterSpacing.0}",
269
339
  "paragraphSpacing": "{paragraphSpacing.0}",
270
340
  "paragraphIndent": "{paragraphIndent.0}",
@@ -277,8 +347,8 @@
277
347
  "value": {
278
348
  "fontFamily": "{fontFamilies.raleway}",
279
349
  "fontWeight": "{fontWeights.raleway-2}",
280
- "lineHeight": "{lineHeights.2}",
281
- "fontSize": "{fontSize.1}",
350
+ "lineHeight": "{lineHeight.XS}",
351
+ "fontSize": "{fontSize.XS}",
282
352
  "letterSpacing": "{letterSpacing.0}",
283
353
  "paragraphSpacing": "{paragraphSpacing.0}",
284
354
  "paragraphIndent": "{paragraphIndent.0}",
@@ -291,8 +361,8 @@
291
361
  "value": {
292
362
  "fontFamily": "{fontFamilies.raleway}",
293
363
  "fontWeight": "{fontWeights.raleway-0}",
294
- "lineHeight": "{lineHeights.0}",
295
- "fontSize": "{fontSize.0}",
364
+ "lineHeight": "{lineHeight.2XS}",
365
+ "fontSize": "{fontSize.2XS}",
296
366
  "letterSpacing": "{letterSpacing.0}",
297
367
  "paragraphSpacing": "{paragraphSpacing.0}",
298
368
  "paragraphIndent": "{paragraphIndent.0}",
@@ -305,8 +375,8 @@
305
375
  "value": {
306
376
  "fontFamily": "{fontFamilies.raleway}",
307
377
  "fontWeight": "{fontWeights.raleway-2}",
308
- "lineHeight": "{lineHeights.0}",
309
- "fontSize": "{fontSize.0}",
378
+ "lineHeight": "{lineHeight.2XS}",
379
+ "fontSize": "{fontSize.2XS}",
310
380
  "letterSpacing": "{letterSpacing.0}",
311
381
  "paragraphSpacing": "{paragraphSpacing.0}",
312
382
  "paragraphIndent": "{paragraphIndent.0}",
@@ -1801,6 +1871,158 @@
1801
1871
  "type": "dimension"
1802
1872
  }
1803
1873
  },
1874
+ "Spark Text Sizes/Mode 1": {
1875
+ "2XS": {
1876
+ "value": "0.75rem",
1877
+ "type": "dimension"
1878
+ },
1879
+ "XS": {
1880
+ "value": "0.875rem",
1881
+ "type": "dimension"
1882
+ },
1883
+ "S": {
1884
+ "value": "1rem",
1885
+ "type": "dimension"
1886
+ },
1887
+ "M": {
1888
+ "value": "1.125rem",
1889
+ "type": "dimension"
1890
+ },
1891
+ "L": {
1892
+ "value": "1.25rem",
1893
+ "type": "dimension"
1894
+ },
1895
+ "2XL": {
1896
+ "value": "1.875rem",
1897
+ "type": "dimension"
1898
+ },
1899
+ "XL": {
1900
+ "value": "1.5rem",
1901
+ "type": "dimension"
1902
+ }
1903
+ },
1904
+ "Spark Font Sizes/Mode 1": {
1905
+ "2XS": {
1906
+ "value": "0.75rem",
1907
+ "type": "dimension"
1908
+ },
1909
+ "XS": {
1910
+ "value": "0.875rem",
1911
+ "type": "dimension"
1912
+ },
1913
+ "S": {
1914
+ "value": "1rem",
1915
+ "type": "dimension"
1916
+ },
1917
+ "M": {
1918
+ "value": "1.125rem",
1919
+ "type": "dimension"
1920
+ },
1921
+ "L": {
1922
+ "value": "1.25rem",
1923
+ "type": "dimension"
1924
+ },
1925
+ "2XL": {
1926
+ "value": "1.875rem",
1927
+ "type": "dimension"
1928
+ },
1929
+ "XL": {
1930
+ "value": "1.5rem",
1931
+ "type": "dimension"
1932
+ }
1933
+ },
1934
+ "Spark Line Heights/Mode 1": {
1935
+ "L": {
1936
+ "value": "1.625rem",
1937
+ "type": "dimension"
1938
+ },
1939
+ "M": {
1940
+ "value": "1.5rem",
1941
+ "type": "dimension"
1942
+ },
1943
+ "2XL": {
1944
+ "value": "2.25rem",
1945
+ "type": "dimension"
1946
+ },
1947
+ "XS": {
1948
+ "value": "1rem",
1949
+ "type": "dimension"
1950
+ },
1951
+ "2XS": {
1952
+ "value": "0.875rem",
1953
+ "type": "dimension"
1954
+ },
1955
+ "S": {
1956
+ "value": "1.25rem",
1957
+ "type": "dimension"
1958
+ },
1959
+ "XL": {
1960
+ "value": "1.75rem",
1961
+ "type": "dimension"
1962
+ }
1963
+ },
1964
+ "Spark Text/Mode 1": {
1965
+ "lineHeight": {
1966
+ "XL": {
1967
+ "value": "1.75rem",
1968
+ "type": "dimension"
1969
+ },
1970
+ "2XL": {
1971
+ "value": "2.25rem",
1972
+ "type": "dimension"
1973
+ },
1974
+ "M": {
1975
+ "value": "1.5rem",
1976
+ "type": "dimension"
1977
+ },
1978
+ "L": {
1979
+ "value": "1.625rem",
1980
+ "type": "dimension"
1981
+ },
1982
+ "S": {
1983
+ "value": "1.25rem",
1984
+ "type": "dimension"
1985
+ },
1986
+ "XS": {
1987
+ "value": "1rem",
1988
+ "type": "dimension"
1989
+ },
1990
+ "2XS": {
1991
+ "value": "0.875rem",
1992
+ "type": "dimension"
1993
+ }
1994
+ },
1995
+ "fontSize": {
1996
+ "2XL": {
1997
+ "value": "1.875rem",
1998
+ "type": "dimension"
1999
+ },
2000
+ "XL": {
2001
+ "value": "1.5rem",
2002
+ "type": "dimension"
2003
+ },
2004
+ "L": {
2005
+ "value": "1.25rem",
2006
+ "type": "dimension"
2007
+ },
2008
+ "S": {
2009
+ "value": "1rem",
2010
+ "type": "dimension"
2011
+ },
2012
+ "XS": {
2013
+ "value": "0.875rem",
2014
+ "type": "dimension"
2015
+ },
2016
+ "M": {
2017
+ "value": "1.125rem",
2018
+ "type": "dimension"
2019
+ },
2020
+ "2XS": {
2021
+ "value": "0.75rem",
2022
+ "type": "dimension"
2023
+ }
2024
+ }
2025
+ },
1804
2026
  "$themes": [],
1805
2027
  "$metadata": {
1806
2028
  "tokenSetOrder": [
@@ -1808,7 +2030,11 @@
1808
2030
  "Spark Colors/Dark mode",
1809
2031
  "Spark Colors/Light mode",
1810
2032
  "Spark Spacings/Mode 1",
1811
- "Spark Border Radius/Mode 1"
2033
+ "Spark Border Radius/Mode 1",
2034
+ "Spark Text Sizes/Mode 1",
2035
+ "Spark Font Sizes/Mode 1",
2036
+ "Spark Line Heights/Mode 1",
2037
+ "Spark Text/Mode 1"
1812
2038
  ]
1813
2039
  }
1814
2040
  }