@commercetools-frontend/ui-kit 15.2.4 → 15.4.0

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 (11) hide show
  1. package/dist/commercetools-frontend-ui-kit.cjs.dev.js +5 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +5 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +2 -2
  4. package/dist/declarations/src/index.d.ts +1 -1
  5. package/materials/custom-properties.css +109 -4
  6. package/materials/custom-properties.json +94 -3
  7. package/materials/internals/TOKENS.md +26 -13
  8. package/materials/internals/definition.yaml +709 -238
  9. package/materials/internals/tokens.story.js +173 -37
  10. package/materials/resets.css +41 -0
  11. package/package.json +36 -36
package/materials/internals/definition.yaml CHANGED
@@ -18,127 +18,187 @@
18
18
  # Storybook at uikit.commercetools.com.
19
19
  #
20
20
  #
21
- # Run "node scripts/generate-custom-properties" to generate `materials/custom-properties`
21
+ # Run "node scripts/generate-design-tokens" to generate `materials/design-tokens`
22
22
  # files in different format (css, json, js, ...).
23
23
  #
24
24
  # The names of decisions in this file need to follow this format:
25
+ # <attribute>-for-<component-group>
26
+ # <attribute>-for-<component-group>-as-<variant>
25
27
  # <attribute>-for-<component-group>-when-<state>-
28
+ # <attribute>-for-<component-group>-as-<variant>-when-<state>
29
+ # <attribute>-for-<component-group>-as-<variant>-as-<variant>-
30
+ # <attribute>-for-<component-group>-as-<variant>-as-<variant>-when-<state>-
26
31
 
27
- choiceGroups:
28
- colors:
29
- label: Colors
30
- prefix: color
31
- description: All colors in the system
32
- choices:
33
- color-primary: '#00b39e'
34
- color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
35
- color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
36
- color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
37
- color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
38
- color-accent: '#213c45'
39
- color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
40
- color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
41
- color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
42
- color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
43
- color-neutral: '#ccc'
44
- color-neutral-60: 'hsl(0, 0%, 60%)'
45
- color-neutral-90: 'hsl(0, 0%, 90%)'
46
- color-neutral-95: 'hsl(0, 0%, 95%)'
47
- color-info: '#078cdf'
48
- color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
49
- color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
50
- color-warning: '#f16d0e'
51
- color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
52
- color-error: '#e60050'
53
- color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
54
- color-solid: '#1a1a1a'
55
- color-surface: '#fff'
32
+ choiceGroupsByTheme:
33
+ default:
34
+ colors:
35
+ label: Colors
36
+ prefix: color
37
+ description: All colors in the system
38
+ choices:
39
+ color-primary: '#00b39e'
40
+ color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
41
+ color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
42
+ color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
43
+ color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
44
+ color-accent: '#213c45'
45
+ color-accent-30: 'hsl(195, 35.2941176471%, 30%)'
46
+ color-accent-40: 'hsl(195, 35.2941176471%, 40%)'
47
+ color-accent-95: 'hsl(195, 35.2941176471%, 95%)'
48
+ color-accent-98: 'hsl(195, 35.2941176471%, 98%)'
49
+ color-neutral: '#ccc'
50
+ color-neutral-05: 'hsl(0deg 0% 80% / 5%)'
51
+ color-neutral-10: 'hsl(0deg 0% 80% / 10%)'
52
+ color-neutral-40: 'hsl(0, 0%, 40%)'
53
+ color-neutral-60: 'hsl(0, 0%, 60%)'
54
+ color-neutral-90: 'hsl(0, 0%, 90%)'
55
+ color-neutral-95: 'hsl(0, 0%, 95%)'
56
+ color-info: '#078cdf'
57
+ color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
58
+ color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
59
+ color-warning: '#f16d0e'
60
+ color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
61
+ color-warning-95: 'hsl(25.110132158590307, 89.0196078431%, 95%)'
62
+ color-error: '#e60050'
63
+ color-error-95: 'hsl(339.1304347826087, 100%, 95%)'
64
+ color-solid: '#1a1a1a'
65
+ color-solid-05: 'hsl(0deg 0% 10% / 5%)'
66
+ color-solid-10: 'hsl(0deg 0% 10% / 10%)'
67
+ color-surface: '#fff'
56
68
 
57
- borderRadiuses:
58
- label: Border Radiuses
59
- prefix: border-radius
60
- choices:
61
- border-radius-1: 1px
62
- border-radius-2: 2px
63
- border-radius-4: 4px
64
- border-radius-6: 6px
65
- border-radius-20: 20px
66
- fontFamilies:
67
- label: Font families
68
- prefix: font-family
69
- choices:
70
- font-family-body: "'Open Sans', sans-serif"
71
- fontSizes:
72
- label: Font sizes
73
- prefix: font-size
74
- choices:
75
- font-size-m: '1rem'
76
- shadows:
77
- label: Shadows
78
- prefix: shadow
79
- choices:
80
- shadow-1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
81
- shadow-2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
82
- shadow-3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)'
83
- shadow-4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)'
84
- shadow-5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)'
85
- shadow-6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
86
- shadow-7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)'
87
- shadow-8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)'
88
- shadow-9: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)'
89
- shadow-10: '0 0 0 1px rgba(224, 230, 237, 0.5)'
90
- shadow-11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)'
91
- shadow-12: '0 0 1px rgba(0, 0, 0, 0.25)'
92
- shadow-13: '0 0 1px rgba(0, 0, 0, 0.25)'
93
- shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
94
- shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
95
- shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
96
- constraints:
97
- label: Constraints
98
- prefix: constraint
99
- choices:
100
- constraint-scale: 100%
101
- constraint-1: 42px
102
- constraint-2: 84px
103
- constraint-3: 142px
104
- constraint-4: 184px
105
- constraint-5: 242px
106
- constraint-6: 284px
107
- constraint-7: 342px
108
- constraint-8: 384px
109
- constraint-9: 442px
110
- constraint-10: 484px
111
- constraint-11: 542px
112
- constraint-12: 584px
113
- constraint-13: 642px
114
- constraint-14: 684px
115
- constraint-15: 742px
116
- constraint-16: 784px
117
- spacings:
118
- label: Spacings
119
- prefix: spacing
120
- choices:
121
- spacing-xs: 4px
122
- spacing-s: 8px
123
- spacing-m: 16px
124
- spacing-l: 24px
125
- spacing-xl: 32px
126
- transitions:
127
- label: Transitions
128
- prefix: transition
129
- choices:
130
- transition-linear-80ms: '80ms linear'
131
- transition-easeinout-150ms: '150ms ease-in-out'
132
- transition-standard: '200ms ease'
133
- breakpoints:
134
- label: Breakpoints
135
- prefix: break-point
136
- choices:
137
- break-point-mobile: 768px
138
- break-point-desktop: 1024px
139
- break-point-biggerdesktop: 1280px
140
- break-point-giantdesktop: 1680px
141
- break-point-jumbodesktop: 1920px
69
+ borderRadiuses:
70
+ label: Border Radiuses
71
+ prefix: border-radius
72
+ choices:
73
+ border-radius-1: 1px
74
+ border-radius-2: 2px
75
+ border-radius-4: 4px
76
+ border-radius-6: 6px
77
+ border-radius-20: 20px
78
+ fontFamilies:
79
+ label: Font families
80
+ prefix: font-family
81
+ choices:
82
+ font-family: "'Open Sans', sans-serif"
83
+ fontSizes:
84
+ label: Font sizes
85
+ prefix: font-size
86
+ choices:
87
+ font-size-10: '0.75rem'
88
+ font-size-20: '0.875rem'
89
+ font-size-30: '1rem'
90
+ font-size-40: '1.125rem'
91
+ font-size-50: '1.25rem'
92
+ font-size-60: '1.5rem'
93
+ # These font sizes are in rems based on a root font-size of 13px and they will be removed when we replace the default theme.
94
+ font-size-15: '0.9231rem'
95
+ font-size-35: '1.0769rem'
96
+ font-size-45: '1.2308rem'
97
+ font-size-63: '1.5385rem'
98
+ font-size-66: '1.8462rem'
99
+ font-size-70: '2.4615rem'
100
+
101
+ fontWeights:
102
+ label: Font weights
103
+ prefix: font-weight
104
+ choices:
105
+ font-weight-300: '300'
106
+ font-weight-400: '400'
107
+ font-weight-500: '500'
108
+ font-weight-600: '600'
109
+ font-weight-700: '700'
110
+
111
+ lineHeights:
112
+ label: Line heights
113
+ prefix: line-height
114
+ choices:
115
+ line-height-10: '1.25rem'
116
+ line-height-20: '1.375rem'
117
+ line-height-30: '1.5rem'
118
+ line-height-40: '1.625rem'
119
+ line-height-50: '1.75rem'
120
+ line-height-60: '2.125rem'
121
+
122
+ shadows:
123
+ label: Shadows
124
+ prefix: shadow
125
+ choices:
126
+ shadow-0: 'none'
127
+ shadow-1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)'
128
+ shadow-2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)'
129
+ shadow-3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)'
130
+ shadow-4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)'
131
+ shadow-5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)'
132
+ shadow-6: '0 -1px 2px 0 rgba(0, 0, 0, 0.2)'
133
+ shadow-7: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)'
134
+ shadow-8: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)'
135
+ shadow-9: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)'
136
+ shadow-10: '0 0 0 1px rgba(224, 230, 237, 0.5)'
137
+ shadow-11: '0 1px 0.5px rgba(0, 0, 0, 0.24), 0 -1px 0.75px rgba(0, 0, 0, 0.12)'
138
+ shadow-12: '0 0 1px rgba(0, 0, 0, 0.25)'
139
+ shadow-13: '0 0 1px rgba(0, 0, 0, 0.25)'
140
+ shadow-14: '0 0 0.5px rgba(0, 0, 0, 0.1)'
141
+ shadow-15: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)'
142
+ shadow-16: '0.5px 1.5px 4px 1px rgba(0, 0, 0, 0.25), -0.5px -0.5px 4px 1px rgba(0, 0, 0, 0.25)'
143
+ constraints:
144
+ label: Constraints
145
+ prefix: constraint
146
+ choices:
147
+ constraint-scale: 100%
148
+ constraint-1: 42px
149
+ constraint-2: 84px
150
+ constraint-3: 142px
151
+ constraint-4: 184px
152
+ constraint-5: 242px
153
+ constraint-6: 284px
154
+ constraint-7: 342px
155
+ constraint-8: 384px
156
+ constraint-9: 442px
157
+ constraint-10: 484px
158
+ constraint-11: 542px
159
+ constraint-12: 584px
160
+ constraint-13: 642px
161
+ constraint-14: 684px
162
+ constraint-15: 742px
163
+ constraint-16: 784px
164
+ spacings:
165
+ label: Spacings
166
+ prefix: spacing
167
+ choices:
168
+ spacing-xs: 4px
169
+ spacing-s: 8px
170
+ spacing-m: 16px
171
+ spacing-l: 24px
172
+ spacing-xl: 32px
173
+ transitions:
174
+ label: Transitions
175
+ prefix: transition
176
+ choices:
177
+ transition-linear-80ms: '80ms linear'
178
+ transition-easeinout-150ms: '150ms ease-in-out'
179
+ transition-standard: '200ms ease'
180
+ breakpoints:
181
+ label: Breakpoints
182
+ prefix: break-point
183
+ choices:
184
+ break-point-mobile: 768px
185
+ break-point-desktop: 1024px
186
+ break-point-biggerdesktop: 1280px
187
+ break-point-giantdesktop: 1680px
188
+ break-point-jumbodesktop: 1920px
189
+
190
+ test:
191
+ colors:
192
+ label: Colors
193
+ prefix: color
194
+ description: Dark theme colors overwrite
195
+ choices:
196
+ color-primary: '#00b39e'
197
+ fontFamilies:
198
+ label: Font families
199
+ prefix: font-family
200
+ choices:
201
+ font-family: "'Inter', system-ui"
142
202
 
143
203
  states:
144
204
  active: 'Trigged while the user is currently interacting with the element'
@@ -158,7 +218,44 @@ states:
158
218
  description: 'When the element is selected'
159
219
  inverted:
160
220
  description: 'When the element has inverted colors'
221
+ raised:
222
+ description: 'When the element is raised'
223
+
224
+ variants:
225
+ h1:
226
+ description: 'H1 text element'
227
+ h2:
228
+ description: 'H2 text element'
229
+ h3:
230
+ description: 'H3 text element'
231
+ h4:
232
+ description: 'H4 text element'
233
+ h5:
234
+ description: 'H5 text element'
235
+ body:
236
+ description: 'Body text element'
237
+ detail:
238
+ description: 'Detail text element'
239
+ icon:
240
+ description: 'Icon'
241
+ small:
242
+ description: 'To differentiate component small size'
243
+ medium:
244
+ description: 'To differentiate component medium size'
245
+ big:
246
+ description: 'To differentiate component big size'
247
+ primary:
248
+ description: 'To differentiate component primary type'
249
+ secondary:
250
+ description: 'To differentiate component secondary type'
251
+ urgent:
252
+ description: 'To differentiate component urgent type'
253
+ info:
254
+ description: 'To differentiate component info type'
255
+
161
256
  componentGroups:
257
+ button:
258
+ description: 'Button elements'
162
259
  input:
163
260
  description: 'Input elements'
164
261
  tag:
@@ -167,135 +264,508 @@ componentGroups:
167
264
  description: 'Tag elements with type warning'
168
265
  text:
169
266
  description: 'Text elements'
267
+ body:
268
+ description: 'Document body element'
269
+ card:
270
+ description: 'Card element'
271
+ link:
272
+ description: 'Link elements'
273
+
274
+ decisionGroupsByTheme:
275
+ default:
276
+ backgroundColors:
277
+ label: Background Colors
278
+ prefix: background-color
279
+ decisions:
280
+ background-color-for-button-when-active:
281
+ choice: color-surface
282
+ background-color-for-button-when-hovered:
283
+ choice: color-surface
284
+ background-color-for-button-as-primary-when-active:
285
+ choice: color-primary
286
+ background-color-for-button-as-primary-when-hovered:
287
+ choice: color-primary-25
288
+ background-color-for-button-as-icon-as-primary-when-active:
289
+ choice: color-primary
290
+ background-color-for-button-as-icon-as-primary-when-hovered:
291
+ choice: color-primary
292
+ background-color-for-button-as-icon-as-info-when-active:
293
+ choice: color-info
294
+ background-color-for-button-as-icon-as-info-when-hovered:
295
+ choice: color-info
296
+ background-color-for-button-as-urgent-when-active:
297
+ choice: color-warning
298
+ background-color-for-button-as-urgent-when-hovered:
299
+ choice: color-warning-25
300
+ background-color-for-button-when-disabled:
301
+ choice: color-accent-98
302
+ background-color-for-input:
303
+ description: ''
304
+ choice: color-surface
305
+ background-color-for-input-when-selected:
306
+ description: ''
307
+ choice: color-accent-95
308
+ background-color-for-input-when-disabled:
309
+ description: ''
310
+ choice: color-accent-98
311
+ background-color-for-input-when-hovered:
312
+ description: ''
313
+ choice: color-neutral-90
314
+ background-color-for-tag:
315
+ description: ''
316
+ choice: color-neutral-95
317
+ background-color-for-tag-warning:
318
+ description: ''
319
+ choice: color-warning-95
320
+
321
+ borders:
322
+ label: Borders
323
+ prefix: border
324
+ decisions:
325
+ border-for-button-as-secondary:
326
+ choice: 'none'
327
+ border-for-button-as-secondary-when-hovered:
328
+ choice: 'none'
329
+ border-for-button-as-secondary-when-active:
330
+ choice: 'none'
331
+ border-for-card-when-raised:
332
+ choice: 'none'
333
+
334
+ borderColors:
335
+ label: Border Colors
336
+ prefix: border-color
337
+ decisions:
338
+ border-color-for-input:
339
+ description: ''
340
+ choice: color-neutral-60
341
+ border-color-for-input-when-focused:
342
+ description: ''
343
+ choice: color-primary
344
+ border-color-for-input-when-disabled:
345
+ description: ''
346
+ choice: color-neutral
347
+ border-color-for-input-when-readonly:
348
+ description: ''
349
+ choice: color-neutral
350
+ border-color-for-input-when-error:
351
+ description: ''
352
+ choice: color-error
353
+ border-color-for-input-when-warning:
354
+ description: ''
355
+ choice: color-warning
356
+ border-color-for-tag:
357
+ description: ''
358
+ choice: color-neutral-60
359
+ border-color-for-tag-warning:
360
+ description: ''
361
+ choice: color-warning
362
+ border-color-for-tag-when-focused:
363
+ description: ''
364
+ choice: color-primary
365
+ border-color-for-button-as-icon:
366
+ choice: color-surface
367
+ border-color-for-button-as-icon-as-info:
368
+ choice: color-info
369
+ border-color-for-button-as-icon-as-primary:
370
+ choice: color-primary
371
+ border-color-for-button-as-icon-when-disabled:
372
+ choice: color-neutral
373
+
374
+ borderRadiuses:
375
+ label: Border Radius
376
+ prefix: border-radius
377
+ decisions:
378
+ border-radius-for-button-as-big:
379
+ choice: border-radius-6
380
+ border-radius-for-button-as-small:
381
+ choice: border-radius-4
382
+ border-radius-for-button-as-icon-as-big:
383
+ choice: border-radius-6
384
+ border-radius-for-button-as-icon-as-medium:
385
+ choice: border-radius-4
386
+ border-radius-for-button-as-icon-as-small:
387
+ choice: border-radius-2
388
+ border-radius-for-input:
389
+ description: ''
390
+ choice: border-radius-6
391
+ border-radius-for-tag:
392
+ description: ''
393
+ choice: border-radius-2
394
+ border-radius-for-card:
395
+ choice: border-radius-6
396
+ # We don't have font families in choices yet, so we can't have decisions for
397
+ # them
398
+
399
+ fontColors:
400
+ label: Font Colors
401
+ prefix: font-color
402
+ decisions:
403
+ font-color-for-text:
404
+ description: ''
405
+ choice: color-solid
406
+ font-color-for-input:
407
+ description: ''
408
+ choice: color-solid
409
+ font-color-for-input-when-disabled:
410
+ description: ''
411
+ choice: color-neutral-60
412
+ font-color-for-input-when-error:
413
+ description: ''
414
+ choice: color-error
415
+ font-color-for-input-when-readonly:
416
+ description: ''
417
+ choice: color-neutral-60
418
+ font-color-for-input-when-warning:
419
+ description: ''
420
+ choice: color-warning
421
+ font-color-for-tag:
422
+ description: ''
423
+ choice: color-solid
424
+ font-color-for-tag-when-disabled:
425
+ description: ''
426
+ choice: color-neutral-60
427
+ font-color-for-text-when-inverted:
428
+ description: ''
429
+ choice: color-surface
430
+
431
+ heights:
432
+ label: Height
433
+ prefix: height
434
+ decisions:
435
+ height-for-button-as-big:
436
+ choice: '32px'
437
+ height-for-button-as-small:
438
+ choice: '24px'
439
+ height-for-button-as-icon-as-big:
440
+ choice: '32px'
441
+ height-for-button-as-icon-as-medium:
442
+ choice: '24px'
443
+ height-for-button-as-icon-as-small:
444
+ choice: '16px'
445
+
446
+ placeholderFontColors:
447
+ label: Placeholder font colors
448
+ prefix: placeholder-font-color
449
+ decisions:
450
+ placeholder-font-color-for-input:
451
+ description: ''
452
+ choice: color-neutral-60
453
+
454
+ fontSizes:
455
+ label: Font Sizes
456
+ prefix: font-size
457
+ decisions:
458
+ font-size-for-button:
459
+ description: ''
460
+ choice: font-size-30
461
+ font-size-for-input:
462
+ description: ''
463
+ choice: font-size-30
464
+ font-size-for-text-as-h1:
465
+ description: ''
466
+ choice: font-size-70
467
+ font-size-for-text-as-h2:
468
+ description: ''
469
+ choice: font-size-66
470
+ font-size-for-text-as-h3:
471
+ description: ''
472
+ choice: font-size-63
473
+ font-size-for-text-as-h4:
474
+ description: ''
475
+ choice: font-size-45
476
+ font-size-for-text-as-h5:
477
+ description: ''
478
+ choice: font-size-35
479
+ font-size-for-text-as-body:
480
+ description: ''
481
+ choice: font-size-30
482
+ font-size-for-text-as-detail:
483
+ description: ''
484
+ choice: font-size-15
485
+ font-size-for-body:
486
+ description: ''
487
+ choice: '13px'
488
+ font-size-for-link:
489
+ description: ''
490
+ choice: font-size-30
491
+
492
+ lineHeights:
493
+ label: Line Heights
494
+ prefix: line-height
495
+ decisions:
496
+ line-height-for-text-as-h1:
497
+ description: ''
498
+ choice: 'inherit'
499
+ line-height-for-text-as-h2:
500
+ description: ''
501
+ choice: 'inherit'
502
+ line-height-for-text-as-h3:
503
+ description: ''
504
+ choice: 'inherit'
505
+ line-height-for-text-as-h4:
506
+ description: ''
507
+ choice: 'inherit'
508
+ line-height-for-text-as-h5:
509
+ description: ''
510
+ choice: 'inherit'
511
+ line-height-for-text-as-body:
512
+ description: ''
513
+ choice: 'inherit'
514
+ line-height-for-text-as-detail:
515
+ description: ''
516
+ choice: 'inherit'
517
+
518
+ fontWeights:
519
+ label: Font Weights
520
+ prefix: font-weight
521
+ decisions:
522
+ font-weight-for-text-as-h1:
523
+ description: ''
524
+ choice: font-weight-300
525
+ font-weight-for-text-as-h2:
526
+ description: ''
527
+ choice: font-weight-300
528
+ font-weight-for-text-as-h3:
529
+ description: ''
530
+ choice: font-weight-300
531
+ font-weight-for-text-as-h4:
532
+ description: ''
533
+ choice: font-weight-400
534
+ font-weight-for-text-as-h5:
535
+ description: ''
536
+ choice: font-weight-400
537
+ font-weight-for-text-as-body:
538
+ description: ''
539
+ choice: font-weight-400
540
+ font-weight-for-text-as-detail:
541
+ description: ''
542
+ choice: font-weight-400
543
+ font-weight-for-button:
544
+ choice: font-weight-400
545
+
546
+ shadows:
547
+ label: Shadows
548
+ prefix: shadow
549
+ decisions:
550
+ shadow-for-button:
551
+ choice: shadow-7
552
+ shadow-for-button-when-focused:
553
+ choice: shadow-8
554
+ shadow-for-button-when-hovered:
555
+ choice: shadow-8
556
+ shadow-for-button-when-active:
557
+ choice: shadow-9
558
+ shadow-for-button-when-disabled:
559
+ choice: '0 0 0 1px var(--color-neutral) inset'
560
+ shadow-box-tag-when-hovered:
561
+ description: ''
562
+ deprecated: true
563
+ choice: shadow-1
564
+ shadow-for-card-when-raised:
565
+ choice: shadow-1
566
+
567
+ test:
568
+ backgroundColors:
569
+ label: Background Colors
570
+ prefix: background-color
571
+ decisions:
572
+ background-color-for-button-when-active:
573
+ choice: color-solid-10
574
+ background-color-for-button-when-hovered:
575
+ choice: color-solid-05
576
+ background-color-for-button-as-primary-when-active:
577
+ choice: '#15A390' # color-primary with 10% black opacity
578
+ background-color-for-button-as-primary-when-hovered:
579
+ choice: '#17AB97' # color-primary with 5% black opacity
580
+ background-color-for-button-as-icon-as-primary-when-active:
581
+ choice: '#15A390'
582
+ background-color-for-button-as-icon-as-primary-when-hovered:
583
+ choice: color-primary
584
+ background-color-for-button-as-icon-as-info-when-active:
585
+ choice: '#057FCC' # color-info with 10% black opacity
586
+ background-color-for-button-as-icon-as-info-when-hovered:
587
+ choice: color-info
588
+ background-color-for-button-as-urgent-when-active:
589
+ choice: '#DC630A' # color-warning with 10% black opacity
590
+ background-color-for-button-as-urgent-when-hovered:
591
+ choice: '#E7680D' # color-warning with 5% black opacity
592
+ background-color-for-button-when-disabled:
593
+ choice: color-neutral-95
594
+ background-color-for-tag:
595
+ description: ''
596
+ choice: color-warning-95
597
+ background-color-for-tag-warning:
598
+ description: ''
599
+ choice: color-neutral-95
600
+
601
+ borders:
602
+ label: Borders
603
+ prefix: border
604
+ decisions:
605
+ border-for-button-as-secondary:
606
+ choice: '1px solid var(--color-neutral)'
607
+ border-for-button-as-secondary-when-hovered:
608
+ choice: '1px solid var(--color-neutral)'
609
+ border-for-button-as-secondary-when-active:
610
+ choice: '1px solid var(--color-neutral)'
611
+ border-for-card-when-raised:
612
+ choice: '1px solid var(--color-neutral-90)'
613
+
614
+ borderColors:
615
+ label: Border Colors
616
+ prefix: border-color
617
+ decisions:
618
+ border-color-for-button-as-icon:
619
+ choice: color-neutral
620
+ border-color-for-button-as-icon-as-info:
621
+ choice: color-neutral
622
+ border-color-for-button-as-icon-as-primary:
623
+ choice: color-neutral
624
+ border-color-for-button-as-icon-when-disabled:
625
+ choice: color-surface
626
+ border-color-for-card-when-raised:
627
+ choice: color-neutral-90
170
628
 
171
- decisionGroups:
172
- backgroundColors:
173
- label: Background Colors
174
- prefix: background-color
175
- decisions:
176
- background-color-for-input:
177
- description: ''
178
- choice: color-surface
179
- background-color-for-input-when-selected:
180
- description: ''
181
- choice: color-accent-95
182
- background-color-for-input-when-disabled:
183
- description: ''
184
- choice: color-accent-98
185
- background-color-for-input-when-hovered:
186
- description: ''
187
- choice: color-neutral-90
188
- background-color-for-tag:
189
- description: ''
190
- choice: color-neutral-95
191
- background-color-for-tag-warning:
192
- description: ''
193
- choice: color-warning-95
629
+ borderRadiuses:
630
+ label: Border radiuses
631
+ prefix: border-radius
632
+ decisions:
633
+ border-radius-for-button-as-big:
634
+ choice: border-radius-4
635
+ border-radius-for-button-as-small:
636
+ choice: border-radius-4
637
+ border-radius-for-button-as-icon-as-big:
638
+ choice: border-radius-4
639
+ border-radius-for-button-as-icon-as-medium:
640
+ choice: border-radius-4
641
+ border-radius-for-button-as-icon-as-small:
642
+ choice: border-radius-2
643
+ border-radius-for-card:
644
+ choice: border-radius-4
194
645
 
195
- borderColors:
196
- label: Border Colors
197
- prefix: border-color
198
- decisions:
199
- border-color-for-input:
200
- description: ''
201
- choice: color-neutral-60
202
- border-color-for-input-when-focused:
203
- description: ''
204
- choice: color-primary
205
- border-color-for-input-when-disabled:
206
- description: ''
207
- choice: color-neutral
208
- border-color-for-input-when-readonly:
209
- description: ''
210
- choice: color-neutral
211
- border-color-for-input-when-error:
212
- description: ''
213
- choice: color-error
214
- border-color-for-input-when-warning:
215
- description: ''
216
- choice: color-warning
217
- border-color-for-tag:
218
- description: ''
219
- choice: color-neutral-60
220
- border-color-for-tag-warning:
221
- description: ''
222
- choice: color-warning
223
- border-color-for-tag-when-focused:
224
- description: ''
225
- choice: color-primary
646
+ fontSizes:
647
+ label: Font Sizes
648
+ prefix: font-size
649
+ decisions:
650
+ font-size-for-input:
651
+ description: ''
652
+ choice: font-size-30
653
+ font-size-for-text-as-h1:
654
+ description: ''
655
+ choice: font-size-60
656
+ font-size-for-text-as-h2:
657
+ description: ''
658
+ choice: font-size-60
659
+ font-size-for-text-as-h3:
660
+ description: ''
661
+ choice: font-size-40
662
+ font-size-for-text-as-h4:
663
+ description: ''
664
+ choice: font-size-30
665
+ font-size-for-text-as-h5:
666
+ description: ''
667
+ choice: font-size-30
668
+ font-size-for-text-as-body:
669
+ description: ''
670
+ choice: font-size-30
671
+ font-size-for-text-as-detail:
672
+ description: ''
673
+ choice: font-size-20
674
+ font-size-for-body:
675
+ description: ''
676
+ choice: '16px'
677
+ font-size-for-button:
678
+ description: ''
679
+ choice: font-size-20
680
+ font-size-for-link:
681
+ description: ''
682
+ choice: 'inherit'
226
683
 
227
- borderRadiuses:
228
- label: Border Radius
229
- prefix: border-radius
230
- decisions:
231
- border-radius-for-input:
232
- description: ''
233
- choice: border-radius-6
234
- border-radius-for-tag:
235
- description: ''
236
- choice: border-radius-2
237
- # We don't have font families in choices yet, so we can't have decisions for
238
- # them
684
+ lineHeights:
685
+ label: Line Heights
686
+ prefix: line-height
687
+ decisions:
688
+ line-height-for-text-as-h1:
689
+ description: ''
690
+ choice: line-height-50
691
+ line-height-for-text-as-h2:
692
+ description: ''
693
+ choice: line-height-50
694
+ line-height-for-text-as-h3:
695
+ description: ''
696
+ choice: line-height-30
697
+ line-height-for-text-as-h4:
698
+ description: ''
699
+ choice: line-height-20
700
+ line-height-for-text-as-h5:
701
+ description: ''
702
+ choice: line-height-20
703
+ line-height-for-text-as-body:
704
+ description: ''
705
+ choice: line-height-40
706
+ line-height-for-text-as-detail:
707
+ description: ''
708
+ choice: line-height-20
239
709
 
240
- fontColors:
241
- label: Font Colors
242
- prefix: font-color
243
- decisions:
244
- font-color-for-input:
245
- description: ''
246
- choice: color-solid
247
- font-color-for-input-when-disabled:
248
- description: ''
249
- choice: color-neutral-60
250
- font-color-for-input-when-error:
251
- description: ''
252
- choice: color-error
253
- font-color-for-input-when-readonly:
254
- description: ''
255
- choice: color-neutral-60
256
- font-color-for-input-when-warning:
257
- description: ''
258
- choice: color-warning
259
- font-color-for-tag:
260
- description: ''
261
- choice: color-solid
262
- font-color-for-tag-when-disabled:
263
- description: ''
264
- choice: color-neutral-60
265
- font-color-for-text-when-inverted:
266
- description: ''
267
- choice: color-surface
710
+ fontWeights:
711
+ label: Font Weights
712
+ prefix: font-weight
713
+ decisions:
714
+ font-weight-for-text-as-h1:
715
+ description: ''
716
+ choice: font-weight-500
717
+ font-weight-for-text-as-h2:
718
+ description: ''
719
+ choice: font-weight-500
720
+ font-weight-for-text-as-h3:
721
+ description: ''
722
+ choice: font-weight-500
723
+ font-weight-for-text-as-h4:
724
+ description: ''
725
+ choice: font-weight-500
726
+ font-weight-for-text-as-h5:
727
+ description: ''
728
+ choice: font-weight-500
729
+ font-weight-for-text-as-body:
730
+ description: ''
731
+ choice: font-weight-400
732
+ font-weight-for-text-as-detail:
733
+ description: ''
734
+ choice: font-weight-400
735
+ font-weight-for-button:
736
+ choice: font-weight-500
268
737
 
269
- fontFamily:
270
- label: Font family
271
- prefix: font-family
272
- decisions:
273
- font-family:
274
- description: ''
275
- choice: font-family-body
276
- placeholderFontColors:
277
- label: Placeholder font colors
278
- prefix: placeholder-font-color
279
- decisions:
280
- placeholder-font-color-for-input:
281
- description: ''
282
- choice: color-neutral-60
738
+ heights:
739
+ label: Heights
740
+ prefix: height
741
+ decisions:
742
+ height-for-button-as-big:
743
+ choice: '40px'
744
+ height-for-button-as-small:
745
+ choice: '32px'
746
+ height-for-button-as-icon-as-big:
747
+ choice: '40px'
748
+ height-for-button-as-icon-as-medium:
749
+ choice: '32px'
750
+ height-for-button-as-icon-as-small:
751
+ choice: '16px'
283
752
 
284
- fontSizes:
285
- label: Font Sizes
286
- prefix: font-size
287
- decisions:
288
- font-size-for-input:
289
- description: ''
290
- choice: font-size-m
291
- shadows:
292
- label: Shadows
293
- prefix: shadow
294
- decisions:
295
- shadow-box-tag-when-hovered:
296
- description: ''
297
- deprecated: true
298
- choice: shadow-1
753
+ shadows:
754
+ label: Shadows
755
+ prefix: shadow
756
+ decisions:
757
+ shadow-for-button:
758
+ choice: shadow-0
759
+ shadow-for-button-when-focused:
760
+ choice: shadow-0
761
+ shadow-for-button-when-hovered:
762
+ choice: shadow-0
763
+ shadow-for-button-when-active:
764
+ choice: shadow-0
765
+ shadow-for-button-when-disabled:
766
+ choice: shadow-0
767
+ shadow-for-card-when-raised:
768
+ choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
299
769
 
300
770
  # These tokens are deprecated as they don't follow our naming patterns.
301
771
  # Ideally they should be replaced with new tokens and not be used anymore.
@@ -309,6 +779,7 @@ decisionGroups:
309
779
  # break. Upgrading those parts is not something the ui-kit teams can do on their
310
780
  # own so we kept the old tokens around even though proper shadow tokens exist).
311
781
  plainTokens:
782
+ font-size-m: '1rem'
312
783
  big-button-height: 32px
313
784
  small-button-height: 24px
314
785
  size-height-input: 32px