@commercetools-uikit/design-system 15.8.0 → 15.9.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 (8) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +106 -6
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +106 -6
  3. package/dist/commercetools-uikit-design-system.esm.js +106 -6
  4. package/dist/declarations/src/design-tokens.d.ts +105 -5
  5. package/materials/custom-properties.css +47 -1
  6. package/materials/custom-properties.json +39 -1
  7. package/materials/internals/definition.yaml +173 -6
  8. package/package.json +1 -1
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -45,8 +45,11 @@ var themes = {
45
45
  colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
46
46
  colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
47
47
  colorAccent: '#213c45',
48
+ colorAccent10: 'hsl(195, 35.2941176471%, 10%)',
49
+ colorAccent20: 'hsl(195, 35.2941176471%, 20%)',
48
50
  colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
49
51
  colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
52
+ colorAccent90: 'hsl(195, 35.2941176471%, 90%)',
50
53
  colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
51
54
  colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
52
55
  colorNeutral: '#ccc',
@@ -56,13 +59,19 @@ var themes = {
56
59
  colorNeutral60: 'hsl(0, 0%, 60%)',
57
60
  colorNeutral90: 'hsl(0, 0%, 90%)',
58
61
  colorNeutral95: 'hsl(0, 0%, 95%)',
62
+ colorNeutral85: 'hsl(0, 0%, 85%)',
59
63
  colorInfo: '#078cdf',
64
+ colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
60
65
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
61
66
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
62
67
  colorWarning: '#f16d0e',
63
68
  colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
69
+ colorWarning40: 'hsl(25.110132158590307, 89.0196078431%, 40%)',
70
+ colorWarning85: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
64
71
  colorWarning95: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
65
72
  colorError: '#e60050',
73
+ colorError40: 'hsl(339.1304347826087, 100%, 40%)',
74
+ colorError85: 'hsl(339.1304347826087, 100%, 85%)',
66
75
  colorError95: 'hsl(339.1304347826087, 100%, 95%)',
67
76
  colorSolid: '#1a1a1a',
68
77
  colorSolid05: 'hsl(0deg 0% 10% / 5%)',
@@ -82,12 +91,15 @@ var themes = {
82
91
  fontSize40: '1.125rem',
83
92
  fontSize50: '1.25rem',
84
93
  fontSize60: '1.5rem',
94
+ fontSize70: '2rem',
95
+ fontSize80: '2.5rem',
85
96
  fontSize15: '0.9231rem',
86
97
  fontSize35: '1.0769rem',
87
98
  fontSize45: '1.2308rem',
88
99
  fontSize63: '1.5385rem',
89
100
  fontSize66: '1.8462rem',
90
- fontSize70: '2.4615rem',
101
+ fontSize69: '2.4615rem',
102
+ fontSize78: '3rem',
91
103
  fontWeight300: '300',
92
104
  fontWeight400: '400',
93
105
  fontWeight500: '500',
@@ -175,6 +187,11 @@ var themes = {
175
187
  backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
176
188
  backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
177
189
  backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)',
190
+ backgroundColorForAvatar: 'hsl(0, 0%, 60%)',
191
+ backgroundColorForAvatarWhenHighlighted: '#ccc',
192
+ backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)',
193
+ backgroundColorForLocalizedMultilineTextInputLabel: 'hsl(195, 35.2941176471%, 98%)',
194
+ backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
178
195
  borderForButtonAsSecondary: 'none',
179
196
  borderForButtonAsSecondaryWhenHovered: 'none',
180
197
  borderForButtonAsSecondaryWhenActive: 'none',
@@ -198,6 +215,14 @@ var themes = {
198
215
  borderColorForTableHeaderAsBottom: '#213c45',
199
216
  borderColorForTableManagerDroppableList: 'hsl(0, 0%, 60%)',
200
217
  borderColorForCollapsiblePanelHeader: 'hsl(0, 0%, 60%)',
218
+ borderColorForStampWhenError: '#e60050',
219
+ borderColorForStampWhenWarning: '#f16d0e',
220
+ borderColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 40%)',
221
+ borderColorForStampAsInformation: '#078cdf',
222
+ borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
223
+ borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)',
224
+ borderColorForLocalizedMultilineTextInputLabel: '#ccc',
225
+ borderColorForLocalizedMultilineTextInputLabelWhenReadonly: '#ccc',
201
226
  borderRadiusForButtonAsBig: '6px',
202
227
  borderRadiusForButtonAsSmall: '4px',
203
228
  borderRadiusForButtonAsIconAsBig: '6px',
@@ -207,10 +232,12 @@ var themes = {
207
232
  borderRadiusForTag: '2px',
208
233
  borderRadiusForCard: '6px',
209
234
  borderRadiusForTableManagerDroppableList: '6px',
235
+ borderRadiusForStamp: '2px',
210
236
  borderWidthForInput: '1px',
211
237
  borderWidthForInputWhenWarning: '1px',
212
238
  borderWidthForInputWhenError: '1px',
213
239
  borderWidthForInputWhenFocused: '1px',
240
+ boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px',
214
241
  fontColorForText: '#1a1a1a',
215
242
  fontColorForInput: '#1a1a1a',
216
243
  fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
@@ -221,12 +248,14 @@ var themes = {
221
248
  fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
222
249
  fontColorForTextWhenInverted: '#fff',
223
250
  fontColorForTableHeader: '#fff',
251
+ fontColorForLocalizedMultilineTextInputLabel: 'hsl(0, 0%, 60%)',
224
252
  heightForButtonAsBig: '32px',
225
253
  heightForButtonAsSmall: '24px',
226
254
  heightForButtonAsIconAsBig: '32px',
227
255
  heightForButtonAsIconAsMedium: '24px',
228
256
  heightForButtonAsIconAsSmall: '16px',
229
257
  heightForInput: '32px',
258
+ widthForAvatarAsMedium: '48px',
230
259
  placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
231
260
  fontSizeForButton: '1rem',
232
261
  fontSizeForInput: '1rem',
@@ -241,6 +270,12 @@ var themes = {
241
270
  fontSizeForLink: '1rem',
242
271
  fontSizeForStamp: '1rem',
243
272
  fontSizeForTable: '1rem',
273
+ fontSizeForAvatarAsSmall: '1rem',
274
+ fontSizeForAvatarAsMedium: '1.5rem',
275
+ fontSizeForAvatarAsBig: '3rem',
276
+ fontSizeForLocalizedMultilineTextInputLabel: '0.9231rem',
277
+ iconColorForDatetimeInputIcon: '#1a1a1a',
278
+ iconColorForDatetimeInputIconWhenHovered: '#f16d0e',
244
279
  lineHeightForTextAsH1: 'inherit',
245
280
  lineHeightForTextAsH2: 'inherit',
246
281
  lineHeightForTextAsH3: 'inherit',
@@ -276,6 +311,9 @@ var themes = {
276
311
  paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-50)',
277
312
  paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-30)',
278
313
  paddingForInput: '8px',
314
+ paddingForMultilineInput: 'var(--spacing-10) var(--spacing-20)',
315
+ paddingForLocalizedRichTextInputLabel: '0 var(--spacing-20)',
316
+ paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
279
317
  shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
280
318
  shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
281
319
  shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
@@ -317,6 +355,11 @@ var themes = {
317
355
  backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff',
318
356
  backgroundColorForInputWhenHovered: 'hsl(0, 0%, 95%)',
319
357
  backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
358
+ backgroundColorForAvatar: '#213c45',
359
+ backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)',
360
+ backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)',
361
+ backgroundColorForLocalizedMultilineTextInputLabel: '#fff',
362
+ backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'hsl(0, 0%, 95%)',
320
363
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
321
364
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
322
365
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -336,6 +379,13 @@ var themes = {
336
379
  borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)',
337
380
  borderColorForTableManagerDroppableList: '#ccc',
338
381
  borderColorForCollapsiblePanelHeader: 'hsl(0, 0%, 90%)',
382
+ borderColorForStampWhenError: 'hsl(339.1304347826087, 100%, 85%)',
383
+ borderColorForStampWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
384
+ borderColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)',
385
+ borderColorForStampAsInformation: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
386
+ borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)',
387
+ borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)',
388
+ borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'hsl(0, 0%, 90%)',
339
389
  borderRadiusForButtonAsBig: '4px',
340
390
  borderRadiusForButtonAsSmall: '4px',
341
391
  borderRadiusForButtonAsIconAsBig: '4px',
@@ -344,11 +394,13 @@ var themes = {
344
394
  borderRadiusForCard: '4px',
345
395
  borderRadiusForTableManagerDroppableList: '4px',
346
396
  borderRadiusForInput: '4px',
397
+ borderRadiusForStamp: '20px',
398
+ boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
347
399
  fontColorForTableHeader: 'hsl(0, 0%, 40%)',
348
400
  fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
349
401
  fontSizeForInput: '1rem',
350
402
  fontSizeForTextAsH1: '1.5rem',
351
- fontSizeForTextAsH2: '1.5rem',
403
+ fontSizeForTextAsH2: '1.25rem',
352
404
  fontSizeForTextAsH3: '1.125rem',
353
405
  fontSizeForTextAsH4: '1rem',
354
406
  fontSizeForTextAsH5: '1rem',
@@ -359,15 +411,19 @@ var themes = {
359
411
  fontSizeForLink: 'inherit',
360
412
  fontSizeForStamp: '0.875rem',
361
413
  fontSizeForTable: '0.875rem',
414
+ fontSizeForAvatarAsSmall: '0.875rem',
415
+ fontSizeForAvatarAsMedium: '1rem',
416
+ fontSizeForAvatarAsBig: '2.5rem',
417
+ fontSizeForLocalizedMultilineTextInputLabel: '1rem',
362
418
  lineHeightForTextAsH1: '2.125rem',
363
- lineHeightForTextAsH2: '2.125rem',
419
+ lineHeightForTextAsH2: '1.75rem',
364
420
  lineHeightForTextAsH3: '1.5rem',
365
421
  lineHeightForTextAsH4: '1.375rem',
366
422
  lineHeightForTextAsH5: '1.375rem',
367
423
  lineHeightForTextAsBody: '1.625rem',
368
424
  lineHeightForTextAsDetail: '1.375rem',
369
425
  fontWeightForTextAsH1: '600',
370
- fontWeightForTextAsH2: '600',
426
+ fontWeightForTextAsH2: '500',
371
427
  fontWeightForTextAsH3: '500',
372
428
  fontWeightForTextAsH4: '500',
373
429
  fontWeightForTextAsH5: '500',
@@ -381,6 +437,9 @@ var themes = {
381
437
  heightForButtonAsIconAsMedium: '32px',
382
438
  heightForButtonAsIconAsSmall: '16px',
383
439
  heightForInput: '40px',
440
+ iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
441
+ iconColorForDatetimeInputIconWhenHovered: '#e60050',
442
+ widthForAvatarAsMedium: '40px',
384
443
  marginForTableHeader: '16px',
385
444
  marginForTableCellAsCondensed: '8px',
386
445
  paddingForStamp: '4px 12px',
@@ -400,6 +459,9 @@ var themes = {
400
459
  paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-40)',
401
460
  paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-40)',
402
461
  paddingForInput: '16px',
462
+ paddingForMultilineInput: '8px',
463
+ paddingForLocalizedRichTextInputLabel: '8px',
464
+ paddingForLocalizedMultilineTextInputLabel: '0 12px',
403
465
  shadowForButton: 'none',
404
466
  shadowForButtonWhenFocused: 'none',
405
467
  shadowForButtonWhenHovered: 'none',
@@ -419,8 +481,11 @@ var designTokens = {
419
481
  colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
420
482
  colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',
421
483
  colorAccent: 'var(--color-accent, #213c45)',
484
+ colorAccent10: 'var(--color-accent-10, hsl(195, 35.2941176471%, 10%))',
485
+ colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))',
422
486
  colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))',
423
487
  colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))',
488
+ colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))',
424
489
  colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
425
490
  colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
426
491
  colorNeutral: 'var(--color-neutral, #ccc)',
@@ -430,13 +495,19 @@ var designTokens = {
430
495
  colorNeutral60: 'var(--color-neutral-60, hsl(0, 0%, 60%))',
431
496
  colorNeutral90: 'var(--color-neutral-90, hsl(0, 0%, 90%))',
432
497
  colorNeutral95: 'var(--color-neutral-95, hsl(0, 0%, 95%))',
498
+ colorNeutral85: 'var(--color-neutral-85, hsl(0, 0%, 85%))',
433
499
  colorInfo: 'var(--color-info, #078cdf)',
500
+ colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
434
501
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
435
502
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
436
503
  colorWarning: 'var(--color-warning, #f16d0e)',
437
504
  colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
505
+ colorWarning40: 'var(--color-warning-40, hsl(25.110132158590307, 89.0196078431%, 40%))',
506
+ colorWarning85: 'var(--color-warning-85, hsl(25.110132158590307, 89.0196078431%, 85%))',
438
507
  colorWarning95: 'var(--color-warning-95, hsl(25.110132158590307, 89.0196078431%, 95%))',
439
508
  colorError: 'var(--color-error, #e60050)',
509
+ colorError40: 'var(--color-error-40, hsl(339.1304347826087, 100%, 40%))',
510
+ colorError85: 'var(--color-error-85, hsl(339.1304347826087, 100%, 85%))',
440
511
  colorError95: 'var(--color-error-95, hsl(339.1304347826087, 100%, 95%))',
441
512
  colorSolid: 'var(--color-solid, #1a1a1a)',
442
513
  colorSolid05: 'var(--color-solid-05, hsl(0deg 0% 10% / 5%))',
@@ -456,12 +527,15 @@ var designTokens = {
456
527
  fontSize40: 'var(--font-size-40, 1.125rem)',
457
528
  fontSize50: 'var(--font-size-50, 1.25rem)',
458
529
  fontSize60: 'var(--font-size-60, 1.5rem)',
530
+ fontSize70: 'var(--font-size-70, 2rem)',
531
+ fontSize80: 'var(--font-size-80, 2.5rem)',
459
532
  fontSize15: 'var(--font-size-15, 0.9231rem)',
460
533
  fontSize35: 'var(--font-size-35, 1.0769rem)',
461
534
  fontSize45: 'var(--font-size-45, 1.2308rem)',
462
535
  fontSize63: 'var(--font-size-63, 1.5385rem)',
463
536
  fontSize66: 'var(--font-size-66, 1.8462rem)',
464
- fontSize70: 'var(--font-size-70, 2.4615rem)',
537
+ fontSize69: 'var(--font-size-69, 2.4615rem)',
538
+ fontSize78: 'var(--font-size-78, 3rem)',
465
539
  fontWeight300: 'var(--font-weight-300, 300)',
466
540
  fontWeight400: 'var(--font-weight-400, 400)',
467
541
  fontWeight500: 'var(--font-weight-500, 500)',
@@ -549,6 +623,11 @@ var designTokens = {
549
623
  backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
550
624
  backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, hsl(195, 35.2941176471%, 98%))',
551
625
  backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))',
626
+ backgroundColorForAvatar: 'var(--background-color-for-avatar, hsl(0, 0%, 60%))',
627
+ backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, #ccc)',
628
+ backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
629
+ backgroundColorForLocalizedMultilineTextInputLabel: 'var(--background-color-for-localized-multiline-text-input-label, hsl(195, 35.2941176471%, 98%))',
630
+ backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'var(--background-color-for-localized-multiline-text-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))',
552
631
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
553
632
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
554
633
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
@@ -572,6 +651,14 @@ var designTokens = {
572
651
  borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, #213c45)',
573
652
  borderColorForTableManagerDroppableList: 'var(--border-color-for-table-manager-droppable-list, hsl(0, 0%, 60%))',
574
653
  borderColorForCollapsiblePanelHeader: 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 60%))',
654
+ borderColorForStampWhenError: 'var(--border-color-for-stamp-when-error, #e60050)',
655
+ borderColorForStampWhenWarning: 'var(--border-color-for-stamp-when-warning, #f16d0e)',
656
+ borderColorForStampAsPositive: 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 40%))',
657
+ borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, #078cdf)',
658
+ borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 25%))',
659
+ borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))',
660
+ borderColorForLocalizedMultilineTextInputLabel: 'var(--border-color-for-localized-multiline-text-input-label, #ccc)',
661
+ borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'var(--border-color-for-localized-multiline-text-input-label-when-readonly, #ccc)',
575
662
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
576
663
  borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
577
664
  borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
@@ -581,10 +668,12 @@ var designTokens = {
581
668
  borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
582
669
  borderRadiusForCard: 'var(--border-radius-for-card, 6px)',
583
670
  borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 6px)',
671
+ borderRadiusForStamp: 'var(--border-radius-for-stamp, 2px)',
584
672
  borderWidthForInput: 'var(--border-width-for-input, 1px)',
585
673
  borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
586
674
  borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
587
675
  borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
676
+ boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)',
588
677
  fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
589
678
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
590
679
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
@@ -595,12 +684,14 @@ var designTokens = {
595
684
  fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
596
685
  fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
597
686
  fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)',
687
+ fontColorForLocalizedMultilineTextInputLabel: 'var(--font-color-for-localized-multiline-text-input-label, hsl(0, 0%, 60%))',
598
688
  heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
599
689
  heightForButtonAsSmall: 'var(--height-for-button-as-small, 24px)',
600
690
  heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
601
691
  heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
602
692
  heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
603
693
  heightForInput: 'var(--height-for-input, 32px)',
694
+ widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)',
604
695
  placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
605
696
  fontSizeForButton: 'var(--font-size-for-button, 1rem)',
606
697
  fontSizeForInput: 'var(--font-size-for-input, 1rem)',
@@ -615,6 +706,12 @@ var designTokens = {
615
706
  fontSizeForLink: 'var(--font-size-for-link, 1rem)',
616
707
  fontSizeForStamp: 'var(--font-size-for-stamp, 1rem)',
617
708
  fontSizeForTable: 'var(--font-size-for-table, 1rem)',
709
+ fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 1rem)',
710
+ fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)',
711
+ fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
712
+ fontSizeForLocalizedMultilineTextInputLabel: 'var(--font-size-for-localized-multiline-text-input-label, 0.9231rem)',
713
+ iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
714
+ iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)',
618
715
  lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
619
716
  lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, inherit)',
620
717
  lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, inherit)',
@@ -650,6 +747,9 @@ var designTokens = {
650
747
  paddingForCollapsiblePanelSectionDescription: 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-50))',
651
748
  paddingForCollapsiblePanelSectionDescriptionAsCondensed: 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-30))',
652
749
  paddingForInput: 'var(--padding-for-input, 8px)',
750
+ paddingForMultilineInput: 'var(--padding-for-multiline-input, var(--spacing-10) var(--spacing-20))',
751
+ paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, 0 var(--spacing-20))',
752
+ paddingForLocalizedMultilineTextInputLabel: 'var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))',
653
753
  shadowForButton: 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
654
754
  shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
655
755
  shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
@@ -859,7 +959,7 @@ var useTheme = function useTheme() {
859
959
  };
860
960
 
861
961
  // NOTE: This string will be replaced on build time with the package version.
862
- var version = "15.8.0";
962
+ var version = "15.9.0";
863
963
 
864
964
  exports.ThemeProvider = ThemeProvider;
865
965
  exports.customProperties = designTokens$1;