@commercetools-uikit/design-system 16.1.0 → 16.2.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 (9) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +371 -715
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +371 -715
  3. package/dist/commercetools-uikit-design-system.esm.js +372 -716
  4. package/dist/declarations/src/design-tokens.d.ts +366 -679
  5. package/dist/declarations/src/theme-provider.d.ts +1 -1
  6. package/materials/custom-properties.css +332 -340
  7. package/materials/custom-properties.json +270 -276
  8. package/materials/internals/definition.yaml +257 -1032
  9. package/package.json +2 -2
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -19,7 +19,6 @@ var react = require('react');
19
19
  var isObject = require('lodash/isObject');
20
20
  var merge = require('lodash/merge');
21
21
  var isEqual = require('lodash/isEqual');
22
- var hooks = require('@commercetools-uikit/hooks');
23
22
  var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
24
23
  var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
25
24
  var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -102,7 +101,7 @@ const themes = {
102
101
  borderRadius20: '20px',
103
102
  borderWidth1: '1px',
104
103
  borderWidth2: '2px',
105
- fontFamily: "'Open Sans', sans-serif",
104
+ fontFamily: "'Inter', system-ui",
106
105
  fontSize10: '0.75rem',
107
106
  fontSize20: '0.875rem',
108
107
  fontSize30: '1rem',
@@ -183,361 +182,6 @@ const themes = {
183
182
  breakPointBiggerdesktop: '1280px',
184
183
  breakPointGiantdesktop: '1680px',
185
184
  breakPointJumbodesktop: '1920px',
186
- alignItemsForSelectInputTag: 'unset',
187
- backgroundColorForButtonWhenActive: '#fff',
188
- backgroundColorForButtonWhenHovered: '#fff',
189
- backgroundColorForButtonAsPrimaryWhenActive: '#00b39e',
190
- backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
191
- backgroundColorForButtonAsIconAsPrimaryWhenActive: '#00b39e',
192
- backgroundColorForButtonAsIconAsPrimaryWhenHovered: '#00b39e',
193
- backgroundColorForButtonAsIconAsInfoWhenActive: '#078cdf',
194
- backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
195
- backgroundColorForButtonAsUrgentWhenActive: '#f16d0e',
196
- backgroundColorForButtonAsUrgentWhenHovered: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
197
- backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
198
- backgroundColorForInput: '#fff',
199
- backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
200
- backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
201
- backgroundColorForInputWhenHovered: '#fff',
202
- backgroundColorForInputWhenFocused: '#fff',
203
- backgroundColorForInputWhenReadonly: '#fff',
204
- backgroundColorForInputWhenActive: 'hsl(195, 35.2941176471%, 95%)',
205
- backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 90%)',
206
- backgroundColorForTableHeader: '#213c45',
207
- backgroundColorForTag: 'hsl(0, 0%, 95%)',
208
- backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
209
- backgroundColorForTagWhenHovered: 'hsl(0, 0%, 95%)',
210
- backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
211
- backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)',
212
- backgroundColorForAvatar: 'hsl(0, 0%, 60%)',
213
- backgroundColorForAvatarWhenHighlighted: '#ccc',
214
- backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)',
215
- backgroundColorForLocalizedInputLabel: 'hsl(195, 35.2941176471%, 98%)',
216
- backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(195, 35.2941176471%, 95%)',
217
- backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
218
- backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'hsl(195, 35.2941176471%, 30%)',
219
- backgroundColorForLocalizedRichTextBodyButton: 'hsl(0, 0%, 90%)',
220
- backgroundColorForRichTextDropdownWhenHovered: 'hsl(0, 0%, 90%)',
221
- backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'hsl(0, 0%, 90%)',
222
- backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 30%)',
223
- backgroundColorForTooltip: '#213c45',
224
- backgroundColorForViewSwitcher: '#fff',
225
- backgroundColorForViewSwitcherWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
226
- backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
227
- backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 90%)',
228
- backgroundColorForContentNotificationWhenError: '#fff',
229
- backgroundColorForContentNotificationWhenInfo: '#fff',
230
- backgroundColorForContentNotificationWhenWarning: '#fff',
231
- backgroundColorForContentNotificationWhenSuccess: '#fff',
232
- backgroundColorForContentNotificationIconWhenError: '#e60050',
233
- backgroundColorForContentNotificationIconWhenInfo: '#078cdf',
234
- backgroundColorForContentNotificationIconWhenWarning: '#f16d0e',
235
- backgroundColorForContentNotificationIconWhenSuccess: '#00b39e',
236
- backgroundColorForCheckboxInputIcon: '#fff',
237
- backgroundColorForCheckboxInputIconWhenDisabled: '#fff',
238
- backgroundColorForCheckboxInputIconWhenReadonly: '#fff',
239
- backgroundColorForCheckboxInputIconWhenError: '#fff',
240
- backgroundColorForCheckboxInputIconWhenHovered: '#fff',
241
- backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 95%)',
242
- backgroundColorForPrimaryActionDropdownWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
243
- backgroundColorForToggleInputTrack: 'hsl(0, 0%, 60%)',
244
- backgroundColorForToggleInputTrackWhenDisabled: '#ccc',
245
- backgroundColorForToggleInputThumbWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
246
- backgroundColorForToggleInputTrackWhenChecked: '#00b39e',
247
- backgroundColorForToggleInputThumbWhenChecked: '#fff',
248
- backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(172.9608938547486, 100%, 25%)',
249
- backgroundColorForToggleInputThumbWhenCheckedAndDisabled: '#ccc',
250
- borderForButtonAsSecondary: 'none',
251
- borderForButtonAsSecondaryWhenHovered: 'none',
252
- borderForButtonAsSecondaryWhenActive: 'none',
253
- borderForCardWhenRaised: 'none',
254
- borderForCollapsiblePanelHeaderIconWhenDisabled: '1px solid var(--color-neutral)',
255
- borderForViewSwitcher: 'none',
256
- borderForSelectInputTag: 'none',
257
- borderForRadioInputOption: '1px',
258
- borderForCalendarMenuWhenFocused: '1px solid var(--color-primary)',
259
- borderColorForInput: 'hsl(0, 0%, 60%)',
260
- borderColorForInputWhenFocused: '#00b39e',
261
- borderColorForInputWhenDisabled: '#ccc',
262
- borderColorForInputWhenReadonly: '#ccc',
263
- borderColorForInputWhenError: '#e60050',
264
- borderColorForInputWhenWarning: '#f16d0e',
265
- borderColorForInputWhenHovered: '#00b39e',
266
- borderColorForTag: 'hsl(0, 0%, 60%)',
267
- borderColorForTagWarning: '#f16d0e',
268
- borderColorForTagWhenFocused: '#00b39e',
269
- borderColorForTagWhenHovered: '#f16d0e',
270
- borderColorForButtonAsIcon: '#fff',
271
- borderColorForButtonAsIconAsInfo: '#078cdf',
272
- borderColorForButtonAsIconAsPrimary: '#00b39e',
273
- borderColorForButtonAsIconWhenDisabled: '#ccc',
274
- borderColorForTableHeader: '#ccc',
275
- borderColorForTableHeaderAsBottom: '#213c45',
276
- borderColorForTableManagerDroppableList: 'hsl(0, 0%, 60%)',
277
- borderColorForCollapsiblePanelHeader: 'hsl(0, 0%, 60%)',
278
- borderColorForStampWhenError: '#e60050',
279
- borderColorForStampWhenWarning: '#f16d0e',
280
- borderColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 40%)',
281
- borderColorForStampAsInformation: '#078cdf',
282
- borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
283
- borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)',
284
- borderColorForLocalizedInputLabel: '#ccc',
285
- borderColorForLocalizedInputLabelWhenReadonly: '#ccc',
286
- borderColorForContentNotificationWhenError: '#e60050',
287
- borderColorForContentNotificationWhenInfo: '#078cdf',
288
- borderColorForContentNotificationWhenWarning: '#f16d0e',
289
- borderColorForContentNotificationWhenSuccess: '#00b39e',
290
- borderColorForGroupHeadingSelectInputOptions: '#ccc',
291
- borderColorForSelectInputMenu: '#00b39e',
292
- borderColorForSelectInputWhenReadonly: '#ccc',
293
- borderColorForSelectInputMenuWhenWarning: '#f16d0e',
294
- borderColorForSelectInputMenuWhenError: '#e60050',
295
- borderColorForCheckboxInputIcon: 'hsl(0, 0%, 60%)',
296
- borderColorForCheckboxInputIconWhenDisabled: '#ccc',
297
- borderColorForCheckboxInputIconWhenReadonly: '#ccc',
298
- borderColorForCheckboxInputIconWhenError: '#e60050',
299
- borderColorForRadioInput: '#ccc',
300
- borderColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)',
301
- borderColorForRadioInputWhenReadonly: '#ccc',
302
- borderColorForRadioInputWhenChecked: '#ccc',
303
- borderColorForRadioInputWhenFocused: '#00b39e',
304
- borderColorForPrimaryActionDropdownMenu: '#ccc',
305
- borderRadiusForButtonAsBig: '6px',
306
- borderRadiusForButtonAsMedium: '4px',
307
- borderRadiusForButtonAsIconAsBig: '6px',
308
- borderRadiusForButtonAsIconAsMedium: '4px',
309
- borderRadiusForButtonAsIconAsSmall: '2px',
310
- borderRadiusForInput: '6px',
311
- borderRadiusForTag: '2px',
312
- borderRadiusForCard: '6px',
313
- borderRadiusForTableManagerDroppableList: '6px',
314
- borderRadiusForStamp: '2px',
315
- borderRadiusForViewSwitcher: '6px',
316
- borderRadiusForContentNotification: '0 var(--border-radius-6) var(--border-radius-6) 0',
317
- borderRadiusForContentNotificationIcon: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
318
- borderRadiusForPrimaryActionDropdown: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
319
- borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-6) var(--border-radius-6) 0',
320
- borderRadiusForPrimaryActionDropdownMenu: '6px',
321
- borderWidthForInput: '1px',
322
- borderWidthForInputWhenWarning: '1px',
323
- borderWidthForInputWhenError: '1px',
324
- borderWidthForInputWhenFocused: '1px',
325
- borderWidthForTag: '1px',
326
- borderWidthForSelectInput: '1px',
327
- borderWidthForContentNotificationIcon: '0px',
328
- borderLeftWidthForContentNotification: '1px',
329
- borderWidthForCheckboxInputIcon: '1px',
330
- borderForPrimaryActionDropdownIcon: '0px 0px 0px 1px',
331
- boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px',
332
- boxShadowForViewSwitcher: '0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)',
333
- boxShadowForViewSwitcherWhenSelected: '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)',
334
- boxShadowForSelectInputWhenFocused: 'inset 0 0 0 2px',
335
- boxShadowForCalendarMenuWhenFocused: 'none',
336
- fontColorForText: '#1a1a1a',
337
- fontColorForTextWhenDisabled: '#ccc',
338
- fontColorForInput: '#1a1a1a',
339
- fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
340
- fontColorForInputWhenError: '#e60050',
341
- fontColorForInputWhenReadonly: 'hsl(0, 0%, 60%)',
342
- fontColorForInputWhenWarning: '#f16d0e',
343
- fontColorForTag: '#1a1a1a',
344
- fontColorForTagRemoveIcon: '#1a1a1a',
345
- fontColorForTagDragIcon: '#1a1a1a',
346
- fontColorForTagRemoveIconWhenHovered: '#f16d0e',
347
- fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
348
- fontColorForTextWhenInverted: '#fff',
349
- fontColorForLinkAsInverted: '#fff',
350
- fontColorForLinkAsPrimary: '#00b39e',
351
- fontColorForLinkAsSecondary: '#1a1a1a',
352
- fontColorForLinkAsPrimaryWhenActive: 'hsl(172.9608938547486, 100%, 25%)',
353
- fontColorForLinkAsSecondaryWhenActive: '#00b39e',
354
- fontColorForTableHeader: '#fff',
355
- fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)',
356
- fontColorForViewSwitcher: '#1a1a1a',
357
- fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
358
- fontColorForViewSwitcherWhenSelected: '#1a1a1a',
359
- fontColorForClearInputIcon: '#1a1a1a',
360
- fontColorForClearInputIconWhenHovered: '#f16d0e',
361
- fontColorForContentNotification: '#1a1a1a',
362
- fontColorForContentNotificationIconWhenError: '#fff',
363
- fontColorForContentNotificationIconWhenWarning: '#fff',
364
- fontColorForContentNotificationIconWhenSuccess: '#fff',
365
- fontColorForContentNotificationIconWhenInfo: '#fff',
366
- fontColorForSearchInputIcon: '#1a1a1a',
367
- fontColorForSearchInputIconWhenHovered: '#00b39e',
368
- fontColorForSelectInputIcon: '#1a1a1a',
369
- fontColorForSelectInputWhenError: '#1a1a1a',
370
- fontColorForSelectInputWhenWarning: '#1a1a1a',
371
- fontColorForSelectInputIconWhenError: '#1a1a1a',
372
- fontColorForSelectInputIconWhenWarning: '#1a1a1a',
373
- fontColorForMoneyInputCurrencyDropdownIndicator: '#1a1a1a',
374
- fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
375
- fontColorForCheckboxInputLabel: '#1a1a1a',
376
- fontColorForCheckboxInputLabelWhenError: '#e60050',
377
- fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 40%)',
378
- fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)',
379
- fontColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)',
380
- fontColorForRadioInputWhenError: '#e60050',
381
- fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
382
- fontColorForRadioInputWhenWarning: '#f16d0e',
383
- fontColorForFlatButtonAsPrimary: '#00b39e',
384
- fontColorForFlatButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
385
- fontColorForFlatButtonAsCritical: '#e60050',
386
- fontColorForFlatButtonAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
387
- fontColorForFlatButtonAsSecondary: '#1a1a1a',
388
- fontColorForFlatButtonAsInverted: '#fff',
389
- fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)',
390
- fontColorForSecondaryIconButtonAsPrimary: '#00b39e',
391
- fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'hsl(172.9608938547486, 100%, 25%)',
392
- heightForButtonAsBig: '32px',
393
- heightForButtonAsMedium: '24px',
394
- heightForButtonAsIconAsBig: '32px',
395
- heightForButtonAsIconAsMedium: '24px',
396
- heightForButtonAsIconAsSmall: '16px',
397
- heightForInput: '32px',
398
- heightForViewSwitcher: '32px',
399
- heightForViewSwitcherWhenCondensed: '24px',
400
- heightForSelectInputTag: '26px',
401
- heightForRadioInputOption: '16px',
402
- heightForRadioInputOptionWhenChecked: '8px',
403
- heightForPrimaryActionDropdown: '32px',
404
- widthForAvatarAsMedium: '48px',
405
- minWidthForMoneyInputCurrencyDropdown: '72px',
406
- placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
407
- fontSizeForButton: '1rem',
408
- fontSizeForInput: '1rem',
409
- fontSizeForTextAsH1: '2.4615rem',
410
- fontSizeForTextAsH2: '1.8462rem',
411
- fontSizeForTextAsH3: '1.5385rem',
412
- fontSizeForTextAsH4: '1.2308rem',
413
- fontSizeForTextAsH5: '1.0769rem',
414
- fontSizeForTextAsBody: '1rem',
415
- fontSizeForTextAsDetail: '0.9231rem',
416
- fontSizeForBody: '13px',
417
- fontSizeForLink: '1rem',
418
- fontSizeForStamp: '1rem',
419
- fontSizeForViewSwitcher: '1rem',
420
- fontSizeForTable: '1rem',
421
- fontSizeForAvatarAsSmall: '1rem',
422
- fontSizeForAvatarAsMedium: '1.5rem',
423
- fontSizeForAvatarAsBig: '3rem',
424
- fontSizeForLocalizedInputLabel: '1rem',
425
- fontSizeForContentNotification: '1rem',
426
- fontSizeForSelectInputTag: '0.9231rem',
427
- iconColorForDatetimeInputIcon: '#1a1a1a',
428
- iconColorForDatetimeInputIconWhenHovered: '#f16d0e',
429
- lineHeightForTextAsH1: 'inherit',
430
- lineHeightForTextAsH2: 'inherit',
431
- lineHeightForTextAsH3: 'inherit',
432
- lineHeightForTextAsH4: 'inherit',
433
- lineHeightForTextAsH5: 'inherit',
434
- lineHeightForTextAsBody: 'inherit',
435
- lineHeightForTextAsDetail: 'inherit',
436
- lineHeightForSelectInputOptions: 'inherit',
437
- lineHeightForTableHeader: 'inherit',
438
- fontWeightForTextAsH1: '300',
439
- fontWeightForTextAsH2: '300',
440
- fontWeightForTextAsH3: '300',
441
- fontWeightForTextAsH4: '400',
442
- fontWeightForTextAsH5: '400',
443
- fontWeightForTextAsBody: '400',
444
- fontWeightForTextAsDetail: '400',
445
- fontWeightForButton: '400',
446
- fontWeightForTableHeader: '400',
447
- fontWeightForTextAsBold: '700',
448
- marginForTableHeader: '8px',
449
- marginForTableAsCondensed: '8px',
450
- marginForViewSwitcherIcon: '0 var(--spacing-10) 0 0',
451
- marginForGroupHeadingSelectInputOptions: '4px',
452
- marginForSelectInputIcon: '4px',
453
- marginLeftForSelectInputIcon: 'inherit',
454
- marginRightForMoneyInputPrecisionBadge: '4px',
455
- marginRightForSearchInputIcon: '8px',
456
- marginRightForClearInputIcon: '4px',
457
- marginLeftForRadioInputLabel: '8px',
458
- marginRightForPrimaryActionDropdown: '4px',
459
- marginTopForPrimaryActionDropdown: 'none',
460
- marginForLocalizedRichTextBodyButton: 'none',
461
- marginForRichTextDivider: '0 var(--spacing-10)',
462
- marginForRichTextDropdownItemLabel: '0 0 0 var(--spacing-10)',
463
- marginForTagList: '0 var(--spacing-10) var(--spacing-10) 0',
464
- paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
465
- paddingForStampAsCondensed: '1px var(--spacing-10)',
466
- paddingForTag: '5px var(--spacing-20)',
467
- paddingForTableHeader: '16px',
468
- paddingForTableHeaderAsCondensed: '8px',
469
- paddingForTableCell: '16px',
470
- paddingForTableCellAsCondensed: '8px',
471
- paddingForTableManagerDroppableList: '8px',
472
- paddingForTableManagerSettingsPanel: '16px',
473
- paddingForTableManagerDraggableTag: '4px',
474
- paddingForCollapsiblePanelHeader: 'var(--spacing-20) var(--spacing-30)',
475
- paddingForCollapsiblePanelHeaderAsCondensed: '8px',
476
- paddingForCollapsiblePanelSectionWrapper: '16px',
477
- paddingForCollapsiblePanelSectionWrapperAsCondensed: '8px',
478
- paddingForCollapsiblePanelSectionDescription: '0 0 var(--spacing-50)',
479
- paddingForCollapsiblePanelSectionDescriptionAsCondensed: '0 0 var(--spacing-30)',
480
- paddingForInput: '8px',
481
- paddingForMultilineInput: 'var(--spacing-10) var(--spacing-20)',
482
- paddingForLocalizedRichTextInputLabel: '0 var(--spacing-20)',
483
- paddingForLocalizedRichTextDropdownButton: '3px var(--spacing-20)',
484
- paddingForLocalizedRichTextDropdownItem: 'var(--spacing-10) var(--spacing-20)',
485
- paddingForLocalizedRichTextBodyButton: 'var(--spacing-10)',
486
- paddingForLocalizedInputLabel: '0 var(--spacing-20)',
487
- paddingForRichTextInput: 'none',
488
- paddingForRichTextToolbar: 'var(--spacing-10) 7px',
489
- paddingLeftForRichTextToolbar: '3px',
490
- paddingForRichTextEditorContainer: '6px var(--spacing-20) var(--spacing-10)',
491
- paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
492
- paddingForTagRemoveIcon: '0 var(--spacing-10)',
493
- paddingForTooltip: 'var(--spacing-10) var(--spacing-20)',
494
- paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
495
- paddingForViewSwitcherWhenCondensed: '0 var(--spacing-20) 0 var(--spacing-20)',
496
- paddingForContentNotification: 'var(--spacing-20)',
497
- paddingForContentNotificationIcon: 'var(--spacing-20) var(--spacing-30)',
498
- paddingLeftForSelectInputOptions: '8px',
499
- paddingRightForSelectInputOptions: '8px',
500
- paddingTopForSelectInputOptions: '4px',
501
- paddingBottomForSelectInputOptions: '4px',
502
- paddingForGroupHeadingSelectInputOptions: '8px',
503
- paddingForSelectInputMenu: 'inherit',
504
- paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)',
505
- paddingForSelectableSearchInputDropdown: '0 var(--spacing-20)',
506
- paddingForPrimaryActionDropdown: '0 var(--spacing-20)',
507
- paddingForPrimaryActionDropdownIcon: '0 var(--spacing-10)',
508
- paddingForButtonAsMedium: '0 var(--spacing-20)',
509
- paddingForButtonAsBig: '0 var(--spacing-30)',
510
- shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
511
- shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
512
- shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
513
- shadowForButtonWhenActive: '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)',
514
- shadowForButtonWhenDisabled: '0 0 0 1px var(--color-neutral) inset',
515
- shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
516
- shadowForCardWhenRaised: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
517
- shadowForInput: 'none',
518
- shadowForInputWhenFocused: 'inset 0 0 0 2px var(--color-primary)',
519
- shadowForInputWhenError: 'none',
520
- shadowForInputWhenWarning: 'none',
521
- shadowForTooltip: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
522
- shadowForSelectInputMenu: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
523
- shadowForPrimaryActionDropdown: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
524
- shadowForPrimaryActionDropdownWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
525
- shadowForPrimaryActionDropdownWhenActive: '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)',
526
- shadowForPrimaryActionDropdownMenu: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
527
- shadowForToggleInputThumb: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
528
- shadowForTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
529
- fontSizeM: '1rem',
530
- bigButtonHeight: '32px',
531
- smallButtonHeight: '24px',
532
- sizeHeightInput: '32px',
533
- fontFamilyDefault: "'Open Sans', sans-serif",
534
- fontSizeDefault: '1rem',
535
- fontSizeSmall: '0.9231rem',
536
- shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
537
- sizeHeightTag: '26px'
538
- },
539
- test: {
540
- fontFamily: "'Inter', system-ui",
541
185
  alignItemsForSelectInputTag: 'center',
542
186
  backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
543
187
  backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)',
@@ -549,14 +193,21 @@ const themes = {
549
193
  backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
550
194
  backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
551
195
  backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
552
- backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)',
196
+ backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
197
+ backgroundColorForInput: '#fff',
198
+ backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
199
+ backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
200
+ backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)',
201
+ backgroundColorForInputWhenFocused: '#fff',
202
+ backgroundColorForInputWhenReadonly: 'hsl(0, 0%, 95%)',
203
+ backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
553
204
  backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 98%)',
554
205
  backgroundColorForTableHeader: 'hsl(0, 0%, 95%)',
206
+ backgroundColorForTag: 'hsl(0, 0%, 95%)',
207
+ backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
208
+ backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)',
555
209
  backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: '#fff',
556
- backgroundColorForInputWhenHovered: 'hsl(0, 0%, 98%)',
557
- backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
558
- backgroundColorForInputWhenActive: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
559
- backgroundColorForInputWhenReadonly: 'hsl(0, 0%, 95%)',
210
+ backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)',
560
211
  backgroundColorForAvatar: '#213c45',
561
212
  backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)',
562
213
  backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)',
@@ -569,6 +220,7 @@ const themes = {
569
220
  backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
570
221
  backgroundColorForRichTextButton: 'hsl(195, 35.2941176471%, 20%)',
571
222
  backgroundColorForTooltip: 'hsl(195, 35.2941176471%, 10%)',
223
+ backgroundColorForViewSwitcher: '#fff',
572
224
  backgroundColorForViewSwitcherWhenDisabled: '#fff',
573
225
  backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
574
226
  backgroundColorForViewSwitcherWhenHovered: 'hsl(0, 0%, 95%)',
@@ -576,11 +228,6 @@ const themes = {
576
228
  backgroundColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
577
229
  backgroundColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
578
230
  backgroundColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
579
- backgroundColorForContentNotificationIconWhenError: 'hsl(339.1304347826087, 100%, 95%)',
580
- backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
581
- backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
582
- backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
583
- backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)',
584
231
  backgroundColorForCheckboxInputIcon: '#00b39e',
585
232
  backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
586
233
  backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -595,7 +242,6 @@ const themes = {
595
242
  backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
596
243
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
597
244
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
598
- backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)',
599
245
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
600
246
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
601
247
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -606,15 +252,20 @@ const themes = {
606
252
  borderForRadioInputOption: '2px',
607
253
  borderForCalendarMenuWhenFocused: 'none',
608
254
  borderColorForInput: '#ccc',
255
+ borderColorForInputWhenFocused: '#00b39e',
609
256
  borderColorForInputWhenDisabled: '#ccc',
610
- borderColorForInputWhenHovered: '#ccc',
611
257
  borderColorForInputWhenReadonly: '#fff',
612
- borderColorForInputWhenFocused: '#00b39e',
258
+ borderColorForInputWhenError: '#e60050',
259
+ borderColorForInputWhenWarning: '#f16d0e',
260
+ borderColorForInputWhenHovered: '#ccc',
261
+ borderColorForTag: '#ccc',
262
+ borderColorForTagWarning: '#f16d0e',
263
+ borderColorForTagWhenFocused: '#ccc',
264
+ borderColorForTagWhenHovered: '#ccc',
613
265
  borderColorForButtonAsIcon: '#ccc',
614
266
  borderColorForButtonAsIconAsInfo: '#ccc',
615
267
  borderColorForButtonAsIconAsPrimary: '#ccc',
616
268
  borderColorForButtonAsIconWhenDisabled: '#fff',
617
- borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)',
618
269
  borderColorForTableHeader: '#fff',
619
270
  borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)',
620
271
  borderColorForTableManagerDroppableList: '#ccc',
@@ -625,10 +276,8 @@ const themes = {
625
276
  borderColorForStampAsInformation: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
626
277
  borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)',
627
278
  borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)',
279
+ borderColorForLocalizedInputLabel: '#ccc',
628
280
  borderColorForLocalizedInputLabelWhenReadonly: '#fff',
629
- borderColorForTag: '#ccc',
630
- borderColorForTagWhenFocused: '#ccc',
631
- borderColorForTagWhenHovered: '#ccc',
632
281
  borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)',
633
282
  borderColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
634
283
  borderColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
@@ -653,20 +302,23 @@ const themes = {
653
302
  borderRadiusForButtonAsIconAsBig: '4px',
654
303
  borderRadiusForButtonAsIconAsMedium: '4px',
655
304
  borderRadiusForButtonAsIconAsSmall: '2px',
305
+ borderRadiusForInput: '4px',
306
+ borderRadiusForTag: '2px',
656
307
  borderRadiusForCard: '4px',
657
308
  borderRadiusForTableManagerDroppableList: '4px',
658
- borderRadiusForInput: '4px',
659
309
  borderRadiusForStamp: '20px',
660
310
  borderRadiusForViewSwitcher: '4px',
661
- borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
662
- borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
311
+ borderRadiusForContentNotification: '4px',
663
312
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
664
313
  borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
665
314
  borderRadiusForPrimaryActionDropdownMenu: '4px',
315
+ borderWidthForInput: '1px',
316
+ borderWidthForInputWhenWarning: '1px',
317
+ borderWidthForInputWhenError: '1px',
318
+ borderWidthForInputWhenFocused: '1px',
666
319
  borderWidthForTag: '1px 1px 1px 0',
667
- borderWidthForContentNotificationIcon: '1px',
668
- borderLeftWidthForContentNotification: '0px',
669
320
  borderWidthForSelectInput: '2px',
321
+ borderLeftWidthForContentNotification: '0px',
670
322
  borderWidthForCheckboxInputIcon: '2px',
671
323
  borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
672
324
  boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
@@ -674,36 +326,78 @@ const themes = {
674
326
  boxShadowForViewSwitcherWhenSelected: 'none',
675
327
  boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px',
676
328
  boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
329
+ fontColorForText: '#1a1a1a',
677
330
  fontColorForTextWhenDisabled: 'hsl(0, 0%, 60%)',
678
- fontColorForTableHeader: '#1a1a1a',
331
+ fontColorForInput: '#1a1a1a',
332
+ fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
333
+ fontColorForInputWhenError: '#e60050',
679
334
  fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
335
+ fontColorForInputWhenWarning: '#f16d0e',
336
+ fontColorForTag: '#1a1a1a',
680
337
  fontColorForTagRemoveIcon: 'hsl(0, 0%, 40%)',
681
338
  fontColorForTagDragIcon: 'hsl(0, 0%, 40%)',
682
339
  fontColorForTagRemoveIconWhenHovered: '#e60050',
340
+ fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
341
+ fontColorForTextWhenInverted: '#fff',
342
+ fontColorForLinkAsInverted: '#fff',
343
+ fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
344
+ fontColorForLinkAsSecondary: '#1a1a1a',
345
+ fontColorForLinkAsPrimaryWhenActive: '#00b39e',
346
+ fontColorForLinkAsSecondaryWhenActive: '#00b39e',
347
+ fontColorForTableHeader: '#1a1a1a',
348
+ fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)',
683
349
  fontColorForViewSwitcher: 'hsl(0, 0%, 40%)',
350
+ fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
351
+ fontColorForViewSwitcherWhenSelected: '#1a1a1a',
352
+ fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
353
+ fontColorForClearInputIconWhenHovered: '#e60050',
354
+ fontColorForContentNotification: '#1a1a1a',
684
355
  fontColorForContentNotificationIconWhenError: '#e60050',
685
356
  fontColorForContentNotificationIconWhenWarning: '#f16d0e',
686
357
  fontColorForContentNotificationIconWhenSuccess: '#00b39e',
687
358
  fontColorForContentNotificationIconWhenInfo: '#078cdf',
688
- fontColorForClearInputIconWhenHovered: '#e60050',
689
- fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
690
359
  fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)',
360
+ fontColorForSearchInputIconWhenHovered: '#00b39e',
691
361
  fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)',
692
362
  fontColorForSelectInputWhenError: '#e60050',
693
363
  fontColorForSelectInputWhenWarning: '#f16d0e',
694
364
  fontColorForSelectInputIconWhenError: '#e60050',
695
365
  fontColorForSelectInputIconWhenWarning: '#f16d0e',
696
366
  fontColorForMoneyInputCurrencyDropdownIndicator: 'hsl(0, 0%, 40%)',
367
+ fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
697
368
  fontColorForCheckboxInputLabel: '#1a1a1a',
698
369
  fontColorForCheckboxInputLabelWhenError: '#e60050',
699
370
  fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 60%)',
700
371
  fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)',
372
+ fontColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)',
373
+ fontColorForRadioInputWhenError: '#e60050',
374
+ fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
375
+ fontColorForRadioInputWhenWarning: '#f16d0e',
701
376
  fontColorForFlatButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
702
377
  fontColorForFlatButtonAsPrimaryWhenHovered: '#00b39e',
703
- fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
704
- fontColorForLinkAsPrimaryWhenActive: '#00b39e',
378
+ fontColorForFlatButtonAsCritical: '#e60050',
379
+ fontColorForFlatButtonAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
380
+ fontColorForFlatButtonAsSecondary: '#1a1a1a',
381
+ fontColorForFlatButtonAsInverted: '#fff',
382
+ fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)',
705
383
  fontColorForSecondaryIconButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
706
384
  fontColorForSecondaryIconButtonAsPrimaryWhenHovered: '#00b39e',
385
+ heightForButtonAsBig: '40px',
386
+ heightForButtonAsMedium: '32px',
387
+ heightForButtonAsIconAsBig: '40px',
388
+ heightForButtonAsIconAsMedium: '32px',
389
+ heightForButtonAsIconAsSmall: '16px',
390
+ heightForInput: '40px',
391
+ heightForViewSwitcher: '40px',
392
+ heightForViewSwitcherWhenCondensed: '32px',
393
+ heightForSelectInputTag: '32px',
394
+ heightForRadioInputOption: '18px',
395
+ heightForRadioInputOptionWhenChecked: '10px',
396
+ heightForPrimaryActionDropdown: '40px',
397
+ widthForAvatarAsMedium: '40px',
398
+ minWidthForMoneyInputCurrencyDropdown: '80px',
399
+ placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
400
+ fontSizeForButton: '0.875rem',
707
401
  fontSizeForInput: '1rem',
708
402
  fontSizeForTextAsH1: '1.5rem',
709
403
  fontSizeForTextAsH2: '1.25rem',
@@ -713,7 +407,7 @@ const themes = {
713
407
  fontSizeForTextAsBody: '1rem',
714
408
  fontSizeForTextAsDetail: '0.875rem',
715
409
  fontSizeForBody: '16px',
716
- fontSizeForButton: '0.875rem',
410
+ fontSizeForLink: '1rem',
717
411
  fontSizeForStamp: '0.875rem',
718
412
  fontSizeForViewSwitcher: '0.875rem',
719
413
  fontSizeForTable: '0.875rem',
@@ -721,7 +415,10 @@ const themes = {
721
415
  fontSizeForAvatarAsMedium: '1rem',
722
416
  fontSizeForAvatarAsBig: '2.5rem',
723
417
  fontSizeForLocalizedInputLabel: '1rem',
418
+ fontSizeForContentNotification: '1rem',
724
419
  fontSizeForSelectInputTag: '1rem',
420
+ iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
421
+ iconColorForDatetimeInputIconWhenHovered: '#e60050',
725
422
  lineHeightForTextAsH1: '2.125rem',
726
423
  lineHeightForTextAsH2: '1.75rem',
727
424
  lineHeightForTextAsH3: '1.5rem',
@@ -741,22 +438,6 @@ const themes = {
741
438
  fontWeightForButton: '500',
742
439
  fontWeightForTableHeader: '600',
743
440
  fontWeightForTextAsBold: '600',
744
- heightForButtonAsBig: '40px',
745
- heightForButtonAsMedium: '32px',
746
- heightForButtonAsIconAsBig: '40px',
747
- heightForButtonAsIconAsMedium: '32px',
748
- heightForButtonAsIconAsSmall: '16px',
749
- heightForInput: '40px',
750
- heightForViewSwitcher: '40px',
751
- heightForViewSwitcherWhenCondensed: '32px',
752
- heightForSelectInputTag: '32px',
753
- heightForRadioInputOption: '18px',
754
- heightForRadioInputOptionWhenChecked: '10px',
755
- heightForPrimaryActionDropdown: '40px',
756
- iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
757
- iconColorForDatetimeInputIconWhenHovered: '#e60050',
758
- widthForAvatarAsMedium: '40px',
759
- minWidthForMoneyInputCurrencyDropdown: '80px',
760
441
  marginForTableHeader: '16px',
761
442
  marginForTableCellAsCondensed: '8px',
762
443
  marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
@@ -795,17 +476,18 @@ const themes = {
795
476
  paddingForLocalizedRichTextDropdownButton: '5px var(--spacing-20)',
796
477
  paddingForLocalizedRichTextDropdownItem: 'var(--spacing-20) var(--spacing-30)',
797
478
  paddingForLocalizedRichTextBodyButton: 'var(--spacing-20)',
479
+ paddingForLocalizedInputLabel: '0 12px',
798
480
  paddingForRichTextInput: 'var(--spacing-20) var(--spacing-30)',
799
481
  paddingForRichTextToolbar: 'none',
800
482
  paddingLeftForRichTextToolbar: 'none',
801
483
  paddingForRichTextEditorContainer: 'var(--spacing-20) 0 0',
802
- paddingForLocalizedInputLabel: '0 12px',
484
+ paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
803
485
  paddingForTagRemoveIcon: '0 12px',
804
486
  paddingForTooltip: 'var(--spacing-20) 12px',
805
487
  paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
806
488
  paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
807
- paddingForContentNotification: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
808
- paddingForContentNotificationIcon: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
489
+ paddingForContentNotification: 'var(--spacing-20) var(--spacing-30)',
490
+ paddingForContentNotificationMessage: '0 var(--spacing-30) 0 var(--spacing-20)',
809
491
  paddingLeftForSelectInputOptions: '16px',
810
492
  paddingRightForSelectInputOptions: '16px',
811
493
  paddingTopForSelectInputOptions: '8px',
@@ -818,6 +500,7 @@ const themes = {
818
500
  paddingForPrimaryActionDropdownIcon: '0 var(--spacing-20)',
819
501
  paddingForButtonAsMedium: '0 var(--spacing-30)',
820
502
  paddingForButtonAsBig: '0 var(--spacing-30)',
503
+ shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
821
504
  shadowForButton: 'none',
822
505
  shadowForButtonWhenFocused: 'none',
823
506
  shadowForButtonWhenHovered: 'none',
@@ -835,7 +518,16 @@ const themes = {
835
518
  shadowForPrimaryActionDropdownWhenActive: 'none',
836
519
  shadowForPrimaryActionDropdownMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
837
520
  shadowForToggleInputThumb: '0px 1px 5px rgba(0, 0, 0, 0.2)',
838
- shadowForTagWhenHovered: 'none'
521
+ shadowForTagWhenHovered: 'none',
522
+ fontSizeM: '1rem',
523
+ bigButtonHeight: '32px',
524
+ smallButtonHeight: '24px',
525
+ sizeHeightInput: '32px',
526
+ fontFamilyDefault: "'Open Sans', sans-serif",
527
+ fontSizeDefault: '1rem',
528
+ fontSizeSmall: '0.9231rem',
529
+ shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
530
+ sizeHeightTag: '26px'
839
531
  }
840
532
  };
841
533
  const designTokens = {
@@ -887,7 +579,7 @@ const designTokens = {
887
579
  borderRadius20: 'var(--border-radius-20, 20px)',
888
580
  borderWidth1: 'var(--border-width-1, 1px)',
889
581
  borderWidth2: 'var(--border-width-2, 2px)',
890
- fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
582
+ fontFamily: "var(--font-family, 'Inter', system-ui)",
891
583
  fontSize10: 'var(--font-size-10, 0.75rem)',
892
584
  fontSize20: 'var(--font-size-20, 0.875rem)',
893
585
  fontSize30: 'var(--font-size-30, 1rem)',
@@ -968,349 +660,343 @@ const designTokens = {
968
660
  breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
969
661
  breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
970
662
  breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
971
- alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, unset)',
972
- backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, #fff)',
973
- backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, #fff)',
974
- backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #00b39e)',
975
- backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
976
- backgroundColorForButtonAsIconAsPrimaryWhenActive: 'var(--background-color-for-button-as-icon-as-primary-when-active, #00b39e)',
663
+ alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, center)',
664
+ backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(0deg 0% 10% / 10%))',
665
+ backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(0deg 0% 10% / 5%))',
666
+ backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #15A390)',
667
+ backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, #17AB97)',
668
+ backgroundColorForButtonAsIconAsPrimaryWhenActive: 'var(--background-color-for-button-as-icon-as-primary-when-active, #15A390)',
977
669
  backgroundColorForButtonAsIconAsPrimaryWhenHovered: 'var(--background-color-for-button-as-icon-as-primary-when-hovered, #00b39e)',
978
- backgroundColorForButtonAsIconAsInfoWhenActive: 'var(--background-color-for-button-as-icon-as-info-when-active, #078cdf)',
670
+ backgroundColorForButtonAsIconAsInfoWhenActive: 'var(--background-color-for-button-as-icon-as-info-when-active, #057FCC)',
979
671
  backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)',
980
- backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #f16d0e)',
981
- backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, hsl(25.110132158590307, 89.0196078431%, 25%))',
982
- backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 98%))',
672
+ backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #DC630A)',
673
+ backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)',
674
+ backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
983
675
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
984
676
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
985
- backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
986
- backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, #fff)',
677
+ backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))',
678
+ backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))',
987
679
  backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, #fff)',
988
- backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, #fff)',
989
- backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(195, 35.2941176471%, 95%))',
990
- backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 90%))',
991
- backgroundColorForTableHeader: 'var(--background-color-for-table-header, #213c45)',
680
+ backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))',
681
+ backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))',
682
+ backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 98%))',
683
+ backgroundColorForTableHeader: 'var(--background-color-for-table-header, hsl(0, 0%, 95%))',
992
684
  backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
993
685
  backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
994
- backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 95%))',
995
- backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, hsl(195, 35.2941176471%, 98%))',
996
- backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))',
997
- backgroundColorForAvatar: 'var(--background-color-for-avatar, hsl(0, 0%, 60%))',
998
- backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, #ccc)',
999
- backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
1000
- backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, hsl(195, 35.2941176471%, 98%))',
1001
- backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(195, 35.2941176471%, 95%))',
1002
- backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))',
1003
- backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 30%))',
1004
- backgroundColorForLocalizedRichTextBodyButton: 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 90%))',
1005
- backgroundColorForRichTextDropdownWhenHovered: 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 90%))',
1006
- backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(0, 0%, 90%))',
1007
- backgroundColorForRichTextButton: 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 30%))',
1008
- backgroundColorForTooltip: 'var(--background-color-for-tooltip, #213c45)',
686
+ backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 90%))',
687
+ backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, #fff)',
688
+ backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 98%))',
689
+ backgroundColorForAvatar: 'var(--background-color-for-avatar, #213c45)',
690
+ backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, hsl(195, 35.2941176471%, 30%))',
691
+ backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 95%))',
692
+ backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
693
+ backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(0, 0%, 95%))',
694
+ backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(0, 0%, 95%))',
695
+ backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 20%))',
696
+ backgroundColorForLocalizedRichTextBodyButton: 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 95%))',
697
+ backgroundColorForRichTextDropdownWhenHovered: 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 95%))',
698
+ backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(203.05555555555554, 93.9130434783%, 95%))',
699
+ backgroundColorForRichTextButton: 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 20%))',
700
+ backgroundColorForTooltip: 'var(--background-color-for-tooltip, hsl(195, 35.2941176471%, 10%))',
1009
701
  backgroundColorForViewSwitcher: 'var(--background-color-for-view-switcher, #fff)',
1010
- backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))',
702
+ backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, #fff)',
1011
703
  backgroundColorForViewSwitcherWhenSelected: 'var(--background-color-for-view-switcher-when-selected, hsl(0, 0%, 95%))',
1012
- backgroundColorForViewSwitcherWhenHovered: 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 90%))',
1013
- backgroundColorForContentNotificationWhenError: 'var(--background-color-for-content-notification-when-error, #fff)',
1014
- backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, #fff)',
1015
- backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, #fff)',
1016
- backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, #fff)',
1017
- backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, #e60050)',
1018
- backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, #078cdf)',
1019
- backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, #f16d0e)',
1020
- backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, #00b39e)',
1021
- backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #fff)',
1022
- backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #fff)',
1023
- backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, #fff)',
1024
- backgroundColorForCheckboxInputIconWhenError: 'var(--background-color-for-checkbox-input-icon-when-error, #fff)',
1025
- backgroundColorForCheckboxInputIconWhenHovered: 'var(--background-color-for-checkbox-input-icon-when-hovered, #fff)',
1026
- backgroundColorForPrimaryActionDropdownWhenActive: 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 95%))',
1027
- backgroundColorForPrimaryActionDropdownWhenDisabled: 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(195, 35.2941176471%, 98%))',
1028
- backgroundColorForToggleInputTrack: 'var(--background-color-for-toggle-input-track, hsl(0, 0%, 60%))',
1029
- backgroundColorForToggleInputTrackWhenDisabled: 'var(--background-color-for-toggle-input-track-when-disabled, #ccc)',
1030
- backgroundColorForToggleInputThumbWhenDisabled: 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(195, 35.2941176471%, 95%))',
1031
- backgroundColorForToggleInputTrackWhenChecked: 'var(--background-color-for-toggle-input-track-when-checked, #00b39e)',
1032
- backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, #fff)',
1033
- backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(172.9608938547486, 100%, 25%))',
1034
- backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, #ccc)',
1035
- borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
1036
- borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
1037
- borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
1038
- borderForCardWhenRaised: 'var(--border-for-card-when-raised, none)',
1039
- borderForCollapsiblePanelHeaderIconWhenDisabled: 'var(--border-for-collapsible-panel-header-icon-when-disabled, 1px solid var(--color-neutral))',
1040
- borderForViewSwitcher: 'var(--border-for-view-switcher, none)',
1041
- borderForSelectInputTag: 'var(--border-for-select-input-tag, none)',
1042
- borderForRadioInputOption: 'var(--border-for-radio-input-option, 1px)',
1043
- borderForCalendarMenuWhenFocused: 'var(--border-for-calendar-menu-when-focused, 1px solid var(--color-primary))',
1044
- borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
704
+ backgroundColorForViewSwitcherWhenHovered: 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 95%))',
705
+ backgroundColorForContentNotificationWhenError: 'var(--background-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 95%))',
706
+ backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
707
+ backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
708
+ backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
709
+ backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #00b39e)',
710
+ backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)',
711
+ backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
712
+ backgroundColorForCheckboxInputIconWhenError: 'var(--background-color-for-checkbox-input-icon-when-error, #e60050)',
713
+ backgroundColorForCheckboxInputIconWhenHovered: 'var(--background-color-for-checkbox-input-icon-when-hovered, hsl(0, 0%, 90%))',
714
+ backgroundColorForPrimaryActionDropdownWhenActive: 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 90%))',
715
+ backgroundColorForPrimaryActionDropdownWhenDisabled: 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(0, 0%, 95%))',
716
+ backgroundColorForToggleInputTrack: 'var(--background-color-for-toggle-input-track, #ccc)',
717
+ backgroundColorForToggleInputTrackWhenDisabled: 'var(--background-color-for-toggle-input-track-when-disabled, hsl(0, 0%, 90%))',
718
+ backgroundColorForToggleInputThumbWhenDisabled: 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(0, 0%, 60%))',
719
+ backgroundColorForToggleInputTrackWhenChecked: 'var(--background-color-for-toggle-input-track-when-checked, hsl(172.9608938547486, 100%, 40%))',
720
+ backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))',
721
+ backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))',
722
+ backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))',
723
+ borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))',
724
+ borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))',
725
+ borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))',
726
+ borderForCardWhenRaised: 'var(--border-for-card-when-raised, 1px solid var(--color-neutral-90))',
727
+ borderForCollapsiblePanelHeaderIconWhenDisabled: 'var(--border-for-collapsible-panel-header-icon-when-disabled, none)',
728
+ borderForViewSwitcher: 'var(--border-for-view-switcher, 1px solid var(--color-neutral))',
729
+ borderForSelectInputTag: 'var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))',
730
+ borderForRadioInputOption: 'var(--border-for-radio-input-option, 2px)',
731
+ borderForCalendarMenuWhenFocused: 'var(--border-for-calendar-menu-when-focused, none)',
732
+ borderColorForInput: 'var(--border-color-for-input, #ccc)',
1045
733
  borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
1046
734
  borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
1047
- borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #ccc)',
735
+ borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)',
1048
736
  borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
1049
737
  borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
1050
- borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, #00b39e)',
1051
- borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))',
738
+ borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, #ccc)',
739
+ borderColorForTag: 'var(--border-color-for-tag, #ccc)',
1052
740
  borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)',
1053
- borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #00b39e)',
1054
- borderColorForTagWhenHovered: 'var(--border-color-for-tag-when-hovered, #f16d0e)',
1055
- borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #fff)',
1056
- borderColorForButtonAsIconAsInfo: 'var(--border-color-for-button-as-icon-as-info, #078cdf)',
1057
- borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #00b39e)',
1058
- borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #ccc)',
1059
- borderColorForTableHeader: 'var(--border-color-for-table-header, #ccc)',
1060
- borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, #213c45)',
1061
- borderColorForTableManagerDroppableList: 'var(--border-color-for-table-manager-droppable-list, hsl(0, 0%, 60%))',
1062
- borderColorForCollapsiblePanelHeader: 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 60%))',
1063
- borderColorForStampWhenError: 'var(--border-color-for-stamp-when-error, #e60050)',
1064
- borderColorForStampWhenWarning: 'var(--border-color-for-stamp-when-warning, #f16d0e)',
1065
- borderColorForStampAsPositive: 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 40%))',
1066
- borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, #078cdf)',
1067
- borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 25%))',
1068
- borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))',
741
+ borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #ccc)',
742
+ borderColorForTagWhenHovered: 'var(--border-color-for-tag-when-hovered, #ccc)',
743
+ borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #ccc)',
744
+ borderColorForButtonAsIconAsInfo: 'var(--border-color-for-button-as-icon-as-info, #ccc)',
745
+ borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #ccc)',
746
+ borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #fff)',
747
+ borderColorForTableHeader: 'var(--border-color-for-table-header, #fff)',
748
+ borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, hsl(0, 0%, 90%))',
749
+ borderColorForTableManagerDroppableList: 'var(--border-color-for-table-manager-droppable-list, #ccc)',
750
+ borderColorForCollapsiblePanelHeader: 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 90%))',
751
+ borderColorForStampWhenError: 'var(--border-color-for-stamp-when-error, hsl(339.1304347826087, 100%, 85%))',
752
+ borderColorForStampWhenWarning: 'var(--border-color-for-stamp-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))',
753
+ borderColorForStampAsPositive: 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
754
+ borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, hsl(203.05555555555554, 93.9130434783%, 85%))',
755
+ borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 85%))',
756
+ borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 85%))',
1069
757
  borderColorForLocalizedInputLabel: 'var(--border-color-for-localized-input-label, #ccc)',
1070
- borderColorForLocalizedInputLabelWhenReadonly: 'var(--border-color-for-localized-input-label-when-readonly, #ccc)',
1071
- borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, #e60050)',
1072
- borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, #078cdf)',
1073
- borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, #f16d0e)',
1074
- borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, #00b39e)',
1075
- borderColorForGroupHeadingSelectInputOptions: 'var(--border-color-for-group-heading-select-input-options, #ccc)',
1076
- borderColorForSelectInputMenu: 'var(--border-color-for-select-input-menu, #00b39e)',
1077
- borderColorForSelectInputWhenReadonly: 'var(--border-color-for-select-input-when-readonly, #ccc)',
1078
- borderColorForSelectInputMenuWhenWarning: 'var(--border-color-for-select-input-menu-when-warning, #f16d0e)',
1079
- borderColorForSelectInputMenuWhenError: 'var(--border-color-for-select-input-menu-when-error, #e60050)',
1080
- borderColorForCheckboxInputIcon: 'var(--border-color-for-checkbox-input-icon, hsl(0, 0%, 60%))',
758
+ borderColorForLocalizedInputLabelWhenReadonly: 'var(--border-color-for-localized-input-label-when-readonly, #fff)',
759
+ borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 85%))',
760
+ borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))',
761
+ borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))',
762
+ borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 85%))',
763
+ borderColorForGroupHeadingSelectInputOptions: 'var(--border-color-for-group-heading-select-input-options, hsl(0, 0%, 90%))',
764
+ borderColorForSelectInputMenu: 'var(--border-color-for-select-input-menu, #fff)',
765
+ borderColorForSelectInputWhenReadonly: 'var(--border-color-for-select-input-when-readonly, hsl(0, 0%, 95%))',
766
+ borderColorForSelectInputMenuWhenWarning: 'var(--border-color-for-select-input-menu-when-warning, #fff)',
767
+ borderColorForSelectInputMenuWhenError: 'var(--border-color-for-select-input-menu-when-error, #fff)',
768
+ borderColorForCheckboxInputIcon: 'var(--border-color-for-checkbox-input-icon, #00b39e)',
1081
769
  borderColorForCheckboxInputIconWhenDisabled: 'var(--border-color-for-checkbox-input-icon-when-disabled, #ccc)',
1082
- borderColorForCheckboxInputIconWhenReadonly: 'var(--border-color-for-checkbox-input-icon-when-readonly, #ccc)',
770
+ borderColorForCheckboxInputIconWhenReadonly: 'var(--border-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
1083
771
  borderColorForCheckboxInputIconWhenError: 'var(--border-color-for-checkbox-input-icon-when-error, #e60050)',
1084
- borderColorForRadioInput: 'var(--border-color-for-radio-input, #ccc)',
1085
- borderColorForRadioInputWhenDisabled: 'var(--border-color-for-radio-input-when-disabled, hsl(0, 0%, 60%))',
1086
- borderColorForRadioInputWhenReadonly: 'var(--border-color-for-radio-input-when-readonly, #ccc)',
1087
- borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #ccc)',
1088
- borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, #00b39e)',
1089
- borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #ccc)',
1090
- borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
772
+ borderColorForRadioInput: 'var(--border-color-for-radio-input, hsl(0, 0%, 60%))',
773
+ borderColorForRadioInputWhenDisabled: 'var(--border-color-for-radio-input-when-disabled, #ccc)',
774
+ borderColorForRadioInputWhenReadonly: 'var(--border-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))',
775
+ borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #00b39e)',
776
+ borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))',
777
+ borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #fff)',
778
+ borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
1091
779
  borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
1092
- borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
780
+ borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 4px)',
1093
781
  borderRadiusForButtonAsIconAsMedium: 'var(--border-radius-for-button-as-icon-as-medium, 4px)',
1094
782
  borderRadiusForButtonAsIconAsSmall: 'var(--border-radius-for-button-as-icon-as-small, 2px)',
1095
- borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
783
+ borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
1096
784
  borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
1097
- borderRadiusForCard: 'var(--border-radius-for-card, 6px)',
1098
- borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 6px)',
1099
- borderRadiusForStamp: 'var(--border-radius-for-stamp, 2px)',
1100
- borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 6px)',
1101
- borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-6) var(--border-radius-6) 0)',
1102
- borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-6) 0 0 var(--border-radius-6))',
1103
- borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-6) 0 0 var(--border-radius-6))',
1104
- borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-6) var(--border-radius-6) 0)',
1105
- borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 6px)',
785
+ borderRadiusForCard: 'var(--border-radius-for-card, 4px)',
786
+ borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 4px)',
787
+ borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
788
+ borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
789
+ borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 4px)',
790
+ borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
791
+ borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)',
792
+ borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 4px)',
1106
793
  borderWidthForInput: 'var(--border-width-for-input, 1px)',
1107
794
  borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
1108
795
  borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
1109
796
  borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
1110
- borderWidthForTag: 'var(--border-width-for-tag, 1px)',
1111
- borderWidthForSelectInput: 'var(--border-width-for-select-input, 1px)',
1112
- borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 0px)',
1113
- borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 1px)',
1114
- borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 1px)',
1115
- borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 0px 0px 0px 1px)',
1116
- boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)',
1117
- boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12))',
1118
- boxShadowForViewSwitcherWhenSelected: 'var(--box-shadow-for-view-switcher-when-selected, 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))',
1119
- boxShadowForSelectInputWhenFocused: 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 2px)',
1120
- boxShadowForCalendarMenuWhenFocused: 'var(--box-shadow-for-calendar-menu-when-focused, none)',
797
+ borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
798
+ borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
799
+ borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 0px)',
800
+ borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 2px)',
801
+ borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)',
802
+ boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 1px)',
803
+ boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, none)',
804
+ boxShadowForViewSwitcherWhenSelected: 'var(--box-shadow-for-view-switcher-when-selected, none)',
805
+ boxShadowForSelectInputWhenFocused: 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)',
806
+ boxShadowForCalendarMenuWhenFocused: 'var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
1121
807
  fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
1122
- fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, #ccc)',
808
+ fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, hsl(0, 0%, 60%))',
1123
809
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
1124
810
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
1125
811
  fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
1126
- fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))',
812
+ fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))',
1127
813
  fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
1128
814
  fontColorForTag: 'var(--font-color-for-tag, #1a1a1a)',
1129
- fontColorForTagRemoveIcon: 'var(--font-color-for-tag-remove-icon, #1a1a1a)',
1130
- fontColorForTagDragIcon: 'var(--font-color-for-tag-drag-icon, #1a1a1a)',
1131
- fontColorForTagRemoveIconWhenHovered: 'var(--font-color-for-tag-remove-icon-when-hovered, #f16d0e)',
815
+ fontColorForTagRemoveIcon: 'var(--font-color-for-tag-remove-icon, hsl(0, 0%, 40%))',
816
+ fontColorForTagDragIcon: 'var(--font-color-for-tag-drag-icon, hsl(0, 0%, 40%))',
817
+ fontColorForTagRemoveIconWhenHovered: 'var(--font-color-for-tag-remove-icon-when-hovered, #e60050)',
1132
818
  fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
1133
819
  fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
1134
820
  fontColorForLinkAsInverted: 'var(--font-color-for-link-as-inverted, #fff)',
1135
- fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, #00b39e)',
821
+ fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, hsl(172.9608938547486, 100%, 25%))',
1136
822
  fontColorForLinkAsSecondary: 'var(--font-color-for-link-as-secondary, #1a1a1a)',
1137
- fontColorForLinkAsPrimaryWhenActive: 'var(--font-color-for-link-as-primary-when-active, hsl(172.9608938547486, 100%, 25%))',
823
+ fontColorForLinkAsPrimaryWhenActive: 'var(--font-color-for-link-as-primary-when-active, #00b39e)',
1138
824
  fontColorForLinkAsSecondaryWhenActive: 'var(--font-color-for-link-as-secondary-when-active, #00b39e)',
1139
- fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)',
825
+ fontColorForTableHeader: 'var(--font-color-for-table-header, #1a1a1a)',
1140
826
  fontColorForLocalizedInputLabel: 'var(--font-color-for-localized-input-label, hsl(0, 0%, 60%))',
1141
- fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)',
827
+ fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, hsl(0, 0%, 40%))',
1142
828
  fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))',
1143
829
  fontColorForViewSwitcherWhenSelected: 'var(--font-color-for-view-switcher-when-selected, #1a1a1a)',
1144
- fontColorForClearInputIcon: 'var(--font-color-for-clear-input-icon, #1a1a1a)',
1145
- fontColorForClearInputIconWhenHovered: 'var(--font-color-for-clear-input-icon-when-hovered, #f16d0e)',
830
+ fontColorForClearInputIcon: 'var(--font-color-for-clear-input-icon, hsl(0, 0%, 40%))',
831
+ fontColorForClearInputIconWhenHovered: 'var(--font-color-for-clear-input-icon-when-hovered, #e60050)',
1146
832
  fontColorForContentNotification: 'var(--font-color-for-content-notification, #1a1a1a)',
1147
- fontColorForContentNotificationIconWhenError: 'var(--font-color-for-content-notification-icon-when-error, #fff)',
1148
- fontColorForContentNotificationIconWhenWarning: 'var(--font-color-for-content-notification-icon-when-warning, #fff)',
1149
- fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #fff)',
1150
- fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #fff)',
1151
- fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, #1a1a1a)',
833
+ fontColorForContentNotificationIconWhenError: 'var(--font-color-for-content-notification-icon-when-error, #e60050)',
834
+ fontColorForContentNotificationIconWhenWarning: 'var(--font-color-for-content-notification-icon-when-warning, #f16d0e)',
835
+ fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #00b39e)',
836
+ fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #078cdf)',
837
+ fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, hsl(0, 0%, 60%))',
1152
838
  fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #00b39e)',
1153
- fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, #1a1a1a)',
1154
- fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #1a1a1a)',
1155
- fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #1a1a1a)',
1156
- fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #1a1a1a)',
1157
- fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #1a1a1a)',
1158
- fontColorForMoneyInputCurrencyDropdownIndicator: 'var(--font-color-for-money-input-currency-dropdown-indicator, #1a1a1a)',
839
+ fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))',
840
+ fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #e60050)',
841
+ fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #f16d0e)',
842
+ fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #e60050)',
843
+ fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #f16d0e)',
844
+ fontColorForMoneyInputCurrencyDropdownIndicator: 'var(--font-color-for-money-input-currency-dropdown-indicator, hsl(0, 0%, 40%))',
1159
845
  fontColorForSearchInputIconWhenReadonly: 'var(--font-color-for-search-input-icon-when-readonly, hsl(0, 0%, 60%))',
1160
846
  fontColorForCheckboxInputLabel: 'var(--font-color-for-checkbox-input-label, #1a1a1a)',
1161
847
  fontColorForCheckboxInputLabelWhenError: 'var(--font-color-for-checkbox-input-label-when-error, #e60050)',
1162
- fontColorForCheckboxInputLabelWhenDisabled: 'var(--font-color-for-checkbox-input-label-when-disabled, hsl(0, 0%, 40%))',
848
+ fontColorForCheckboxInputLabelWhenDisabled: 'var(--font-color-for-checkbox-input-label-when-disabled, hsl(0, 0%, 60%))',
1163
849
  fontColorForCheckboxInputLabelWhenReadonly: 'var(--font-color-for-checkbox-input-label-when-readonly, hsl(0, 0%, 40%))',
1164
850
  fontColorForRadioInputWhenDisabled: 'var(--font-color-for-radio-input-when-disabled, hsl(0, 0%, 60%))',
1165
851
  fontColorForRadioInputWhenError: 'var(--font-color-for-radio-input-when-error, #e60050)',
1166
852
  fontColorForRadioInputWhenReadonly: 'var(--font-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))',
1167
853
  fontColorForRadioInputWhenWarning: 'var(--font-color-for-radio-input-when-warning, #f16d0e)',
1168
- fontColorForFlatButtonAsPrimary: 'var(--font-color-for-flat-button-as-primary, #00b39e)',
1169
- fontColorForFlatButtonAsPrimaryWhenHovered: 'var(--font-color-for-flat-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
854
+ fontColorForFlatButtonAsPrimary: 'var(--font-color-for-flat-button-as-primary, hsl(172.9608938547486, 100%, 25%))',
855
+ fontColorForFlatButtonAsPrimaryWhenHovered: 'var(--font-color-for-flat-button-as-primary-when-hovered, #00b39e)',
1170
856
  fontColorForFlatButtonAsCritical: 'var(--font-color-for-flat-button-as-critical, #e60050)',
1171
857
  fontColorForFlatButtonAsCriticalWhenHovered: 'var(--font-color-for-flat-button-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
1172
858
  fontColorForFlatButtonAsSecondary: 'var(--font-color-for-flat-button-as-secondary, #1a1a1a)',
1173
859
  fontColorForFlatButtonAsInverted: 'var(--font-color-for-flat-button-as-inverted, #fff)',
1174
860
  fontColorForFlatButtonIconWhenDisabled: 'var(--font-color-for-flat-button-icon-when-disabled, hsl(0, 0%, 60%))',
1175
- fontColorForSecondaryIconButtonAsPrimary: 'var(--font-color-for-secondary-icon-button-as-primary, #00b39e)',
1176
- fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, hsl(172.9608938547486, 100%, 25%))',
1177
- heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
1178
- heightForButtonAsMedium: 'var(--height-for-button-as-medium, 24px)',
1179
- heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
1180
- heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
861
+ fontColorForSecondaryIconButtonAsPrimary: 'var(--font-color-for-secondary-icon-button-as-primary, hsl(172.9608938547486, 100%, 25%))',
862
+ fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, #00b39e)',
863
+ heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
864
+ heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
865
+ heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 40px)',
866
+ heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 32px)',
1181
867
  heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
1182
- heightForInput: 'var(--height-for-input, 32px)',
1183
- heightForViewSwitcher: 'var(--height-for-view-switcher, 32px)',
1184
- heightForViewSwitcherWhenCondensed: 'var(--height-for-view-switcher-when-condensed, 24px)',
1185
- heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)',
1186
- heightForRadioInputOption: 'var(--height-for-radio-input-option, 16px)',
1187
- heightForRadioInputOptionWhenChecked: 'var(--height-for-radio-input-option-when-checked, 8px)',
1188
- heightForPrimaryActionDropdown: 'var(--height-for-primary-action-dropdown, 32px)',
1189
- widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)',
1190
- minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 72px)',
868
+ heightForInput: 'var(--height-for-input, 40px)',
869
+ heightForViewSwitcher: 'var(--height-for-view-switcher, 40px)',
870
+ heightForViewSwitcherWhenCondensed: 'var(--height-for-view-switcher-when-condensed, 32px)',
871
+ heightForSelectInputTag: 'var(--height-for-select-input-tag, 32px)',
872
+ heightForRadioInputOption: 'var(--height-for-radio-input-option, 18px)',
873
+ heightForRadioInputOptionWhenChecked: 'var(--height-for-radio-input-option-when-checked, 10px)',
874
+ heightForPrimaryActionDropdown: 'var(--height-for-primary-action-dropdown, 40px)',
875
+ widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 40px)',
876
+ minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 80px)',
1191
877
  placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
1192
- fontSizeForButton: 'var(--font-size-for-button, 1rem)',
878
+ fontSizeForButton: 'var(--font-size-for-button, 0.875rem)',
1193
879
  fontSizeForInput: 'var(--font-size-for-input, 1rem)',
1194
- fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 2.4615rem)',
1195
- fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.8462rem)',
1196
- fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.5385rem)',
1197
- fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1.2308rem)',
1198
- fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1.0769rem)',
880
+ fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 1.5rem)',
881
+ fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.25rem)',
882
+ fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.125rem)',
883
+ fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1rem)',
884
+ fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1rem)',
1199
885
  fontSizeForTextAsBody: 'var(--font-size-for-text-as-body, 1rem)',
1200
- fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.9231rem)',
1201
- fontSizeForBody: 'var(--font-size-for-body, 13px)',
886
+ fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.875rem)',
887
+ fontSizeForBody: 'var(--font-size-for-body, 16px)',
1202
888
  fontSizeForLink: 'var(--font-size-for-link, 1rem)',
1203
- fontSizeForStamp: 'var(--font-size-for-stamp, 1rem)',
1204
- fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 1rem)',
1205
- fontSizeForTable: 'var(--font-size-for-table, 1rem)',
1206
- fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 1rem)',
1207
- fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)',
1208
- fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
889
+ fontSizeForStamp: 'var(--font-size-for-stamp, 0.875rem)',
890
+ fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 0.875rem)',
891
+ fontSizeForTable: 'var(--font-size-for-table, 0.875rem)',
892
+ fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 0.875rem)',
893
+ fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1rem)',
894
+ fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 2.5rem)',
1209
895
  fontSizeForLocalizedInputLabel: 'var(--font-size-for-localized-input-label, 1rem)',
1210
896
  fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)',
1211
- fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 0.9231rem)',
1212
- iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
1213
- iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)',
1214
- lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
1215
- lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, inherit)',
1216
- lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, inherit)',
1217
- lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, inherit)',
1218
- lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, inherit)',
1219
- lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, inherit)',
1220
- lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, inherit)',
1221
- lineHeightForSelectInputOptions: 'var(--line-height-for-select-input-options, inherit)',
1222
- lineHeightForTableHeader: 'var(--line-height-for-table-header, inherit)',
1223
- fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 300)',
1224
- fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 300)',
1225
- fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 300)',
1226
- fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 400)',
1227
- fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 400)',
897
+ fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 1rem)',
898
+ iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, hsl(0, 0%, 40%))',
899
+ iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #e60050)',
900
+ lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, 2.125rem)',
901
+ lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, 1.75rem)',
902
+ lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, 1.5rem)',
903
+ lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, 1.375rem)',
904
+ lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, 1.375rem)',
905
+ lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, 1.625rem)',
906
+ lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, 1.375rem)',
907
+ lineHeightForSelectInputOptions: 'var(--line-height-for-select-input-options, 1.625rem)',
908
+ lineHeightForTableHeader: 'var(--line-height-for-table-header, 26px)',
909
+ fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 600)',
910
+ fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 500)',
911
+ fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 500)',
912
+ fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 500)',
913
+ fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 500)',
1228
914
  fontWeightForTextAsBody: 'var(--font-weight-for-text-as-body, 400)',
1229
915
  fontWeightForTextAsDetail: 'var(--font-weight-for-text-as-detail, 400)',
1230
- fontWeightForButton: 'var(--font-weight-for-button, 400)',
1231
- fontWeightForTableHeader: 'var(--font-weight-for-table-header, 400)',
1232
- fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 700)',
1233
- marginForTableHeader: 'var(--margin-for-table-header, 8px)',
1234
- marginForTableAsCondensed: 'var(--margin-for-table-as-condensed, 8px)',
1235
- marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-10) 0 0)',
1236
- marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 4px)',
1237
- marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 4px)',
1238
- marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, inherit)',
1239
- marginRightForMoneyInputPrecisionBadge: 'var(--margin-right-for-money-input-precision-badge, 4px)',
1240
- marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 8px)',
1241
- marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)',
1242
- marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 8px)',
1243
- marginRightForPrimaryActionDropdown: 'var(--margin-right-for-primary-action-dropdown, 4px)',
1244
- marginTopForPrimaryActionDropdown: 'var(--margin-top-for-primary-action-dropdown, none)',
1245
- marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, none)',
1246
- marginForRichTextDivider: 'var(--margin-for-rich-text-divider, 0 var(--spacing-10))',
1247
- marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-10))',
1248
- marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-10) var(--spacing-10) 0)',
1249
- paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
1250
- paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
1251
- paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
1252
- paddingForTableHeader: 'var(--padding-for-table-header, 16px)',
1253
- paddingForTableHeaderAsCondensed: 'var(--padding-for-table-header-as-condensed, 8px)',
1254
- paddingForTableCell: 'var(--padding-for-table-cell, 16px)',
1255
- paddingForTableCellAsCondensed: 'var(--padding-for-table-cell-as-condensed, 8px)',
1256
- paddingForTableManagerDroppableList: 'var(--padding-for-table-manager-droppable-list, 8px)',
1257
- paddingForTableManagerSettingsPanel: 'var(--padding-for-table-manager-settings-panel, 16px)',
1258
- paddingForTableManagerDraggableTag: 'var(--padding-for-table-manager-draggable-tag, 4px)',
1259
- paddingForCollapsiblePanelHeader: 'var(--padding-for-collapsible-panel-header, var(--spacing-20) var(--spacing-30))',
1260
- paddingForCollapsiblePanelHeaderAsCondensed: 'var(--padding-for-collapsible-panel-header-as-condensed, 8px)',
1261
- paddingForCollapsiblePanelSectionWrapper: 'var(--padding-for-collapsible-panel-section-wrapper, 16px)',
1262
- paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--padding-for-collapsible-panel-section-wrapper-as-condensed, 8px)',
1263
- paddingForCollapsiblePanelSectionDescription: 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-50))',
1264
- paddingForCollapsiblePanelSectionDescriptionAsCondensed: 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-30))',
1265
- paddingForInput: 'var(--padding-for-input, 8px)',
1266
- paddingForMultilineInput: 'var(--padding-for-multiline-input, var(--spacing-10) var(--spacing-20))',
1267
- paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, 0 var(--spacing-20))',
1268
- paddingForLocalizedRichTextDropdownButton: 'var(--padding-for-localized-rich-text-dropdown-button, 3px var(--spacing-20))',
1269
- paddingForLocalizedRichTextDropdownItem: 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-10) var(--spacing-20))',
1270
- paddingForLocalizedRichTextBodyButton: 'var(--padding-for-localized-rich-text-body-button, var(--spacing-10))',
1271
- paddingForLocalizedInputLabel: 'var(--padding-for-localized-input-label, 0 var(--spacing-20))',
1272
- paddingForRichTextInput: 'var(--padding-for-rich-text-input, none)',
1273
- paddingForRichTextToolbar: 'var(--padding-for-rich-text-toolbar, var(--spacing-10) 7px)',
1274
- paddingLeftForRichTextToolbar: 'var(--padding-left-for-rich-text-toolbar, 3px)',
1275
- paddingForRichTextEditorContainer: 'var(--padding-for-rich-text-editor-container, 6px var(--spacing-20) var(--spacing-10))',
916
+ fontWeightForButton: 'var(--font-weight-for-button, 500)',
917
+ fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
918
+ fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
919
+ marginForTableHeader: 'var(--margin-for-table-header, 16px)',
920
+ marginForTableCellAsCondensed: 'var(--margin-for-table-cell-as-condensed, 8px)',
921
+ marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)',
922
+ marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 8px)',
923
+ marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 8px)',
924
+ marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, 8px)',
925
+ marginRightForMoneyInputPrecisionBadge: 'var(--margin-right-for-money-input-precision-badge, 12px)',
926
+ marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 12px)',
927
+ marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 8px)',
928
+ marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 4px)',
929
+ marginRightForPrimaryActionDropdown: 'var(--margin-right-for-primary-action-dropdown, 8px)',
930
+ marginTopForPrimaryActionDropdown: 'var(--margin-top-for-primary-action-dropdown, 8px)',
931
+ marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, 0 2px var(--spacing-20) 2px)',
932
+ marginForRichTextDivider: 'var(--margin-for-rich-text-divider, var(--spacing-10) 2px)',
933
+ marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-20))',
934
+ marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-20) var(--spacing-20) 0)',
935
+ paddingForStamp: 'var(--padding-for-stamp, 4px 12px)',
936
+ paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 0 var(--spacing-20))',
937
+ paddingForTag: 'var(--padding-for-tag, 2px 12px)',
938
+ paddingForTableHeader: 'var(--padding-for-table-header, 24px)',
939
+ paddingForTableHeaderAsCondensed: 'var(--padding-for-table-header-as-condensed, 24px)',
940
+ paddingForTableCell: 'var(--padding-for-table-cell, var(--spacing-30) var(--spacing-40))',
941
+ paddingForTableCellAsCondensed: 'var(--padding-for-table-cell-as-condensed, var(--spacing-20) var(--spacing-40))',
942
+ paddingForTableManagerDroppableList: 'var(--padding-for-table-manager-droppable-list, 16px)',
943
+ paddingForTableManagerSettingsPanel: 'var(--padding-for-table-manager-settings-panel, var(--spacing-40) var(--spacing-50))',
944
+ paddingForTableManagerDraggableTag: 'var(--padding-for-table-manager-draggable-tag, var(--spacing-10) 0)',
945
+ paddingForCollapsiblePanelHeader: 'var(--padding-for-collapsible-panel-header, var(--spacing-30) 0)',
946
+ paddingForCollapsiblePanelHeaderAsCondensed: 'var(--padding-for-collapsible-panel-header-as-condensed, var(--spacing-20) 0)',
947
+ paddingForCollapsiblePanelSectionWrapper: 'var(--padding-for-collapsible-panel-section-wrapper, var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10)))',
948
+ paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--padding-for-collapsible-panel-section-wrapper-as-condensed, var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10)))',
949
+ paddingForCollapsiblePanelSectionDescription: 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-40))',
950
+ paddingForCollapsiblePanelSectionDescriptionAsCondensed: 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-40))',
951
+ paddingForInput: 'var(--padding-for-input, 16px)',
952
+ paddingForMultilineInput: 'var(--padding-for-multiline-input, 8px)',
953
+ paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, var(--spacing-20) 12px)',
954
+ paddingForLocalizedRichTextDropdownButton: 'var(--padding-for-localized-rich-text-dropdown-button, 5px var(--spacing-20))',
955
+ paddingForLocalizedRichTextDropdownItem: 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-20) var(--spacing-30))',
956
+ paddingForLocalizedRichTextBodyButton: 'var(--padding-for-localized-rich-text-body-button, var(--spacing-20))',
957
+ paddingForLocalizedInputLabel: 'var(--padding-for-localized-input-label, 0 12px)',
958
+ paddingForRichTextInput: 'var(--padding-for-rich-text-input, var(--spacing-20) var(--spacing-30))',
959
+ paddingForRichTextToolbar: 'var(--padding-for-rich-text-toolbar, none)',
960
+ paddingLeftForRichTextToolbar: 'var(--padding-left-for-rich-text-toolbar, none)',
961
+ paddingForRichTextEditorContainer: 'var(--padding-for-rich-text-editor-container, var(--spacing-20) 0 0)',
1276
962
  paddingForLocalizedMultilineTextInputLabel: 'var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))',
1277
- paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 var(--spacing-10))',
1278
- paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-10) var(--spacing-20))',
963
+ paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 12px)',
964
+ paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)',
1279
965
  paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
1280
- paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 var(--spacing-20) 0 var(--spacing-20))',
1281
- paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20))',
1282
- paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) var(--spacing-30))',
1283
- paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 8px)',
1284
- paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 8px)',
1285
- paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 4px)',
1286
- paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 4px)',
1287
- paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 8px)',
1288
- paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
1289
- paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))',
1290
- paddingForSelectableSearchInputDropdown: 'var(--padding-for-selectable-search-input-dropdown, 0 var(--spacing-20))',
1291
- paddingForPrimaryActionDropdown: 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-20))',
1292
- paddingForPrimaryActionDropdownIcon: 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-10))',
1293
- paddingForButtonAsMedium: 'var(--padding-for-button-as-medium, 0 var(--spacing-20))',
966
+ paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
967
+ paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))',
968
+ paddingForContentNotificationMessage: 'var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))',
969
+ paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 16px)',
970
+ paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 16px)',
971
+ paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 8px)',
972
+ paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 8px)',
973
+ paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 16px)',
974
+ paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, var(--spacing-10) 0)',
975
+ paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 12px)',
976
+ paddingForSelectableSearchInputDropdown: 'var(--padding-for-selectable-search-input-dropdown, 0 12px)',
977
+ paddingForPrimaryActionDropdown: 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-30))',
978
+ paddingForPrimaryActionDropdownIcon: 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-20))',
979
+ paddingForButtonAsMedium: 'var(--padding-for-button-as-medium, 0 var(--spacing-30))',
1294
980
  paddingForButtonAsBig: 'var(--padding-for-button-as-big, 0 var(--spacing-30))',
1295
- 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))',
1296
- 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))',
1297
- 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))',
1298
- shadowForButtonWhenActive: 'var(--shadow-for-button-when-active, 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))',
1299
- shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)',
1300
981
  shadowBoxTagWhenHovered: 'var(--shadow-box-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
1301
- shadowForCardWhenRaised: 'var(--shadow-for-card-when-raised, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
982
+ shadowForButton: 'var(--shadow-for-button, none)',
983
+ shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, none)',
984
+ shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, none)',
985
+ shadowForButtonWhenActive: 'var(--shadow-for-button-when-active, none)',
986
+ shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, none)',
987
+ shadowForCardWhenRaised: 'var(--shadow-for-card-when-raised, 0 1px 5px 0 rgba(0, 0, 0, 0.05))',
1302
988
  shadowForInput: 'var(--shadow-for-input, none)',
1303
- shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 2px var(--color-primary))',
1304
- shadowForInputWhenError: 'var(--shadow-for-input-when-error, none)',
1305
- shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
1306
- shadowForTooltip: 'var(--shadow-for-tooltip, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
1307
- shadowForSelectInputMenu: 'var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
1308
- shadowForPrimaryActionDropdown: 'var(--shadow-for-primary-action-dropdown, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
1309
- shadowForPrimaryActionDropdownWhenHovered: 'var(--shadow-for-primary-action-dropdown-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
1310
- shadowForPrimaryActionDropdownWhenActive: 'var(--shadow-for-primary-action-dropdown-when-active, 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))',
1311
- shadowForPrimaryActionDropdownMenu: 'var(--shadow-for-primary-action-dropdown-menu, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
1312
- shadowForToggleInputThumb: 'var(--shadow-for-toggle-input-thumb, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
1313
- shadowForTagWhenHovered: 'var(--shadow-for-tag-when-hovered, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
989
+ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))',
990
+ shadowForInputWhenError: 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))',
991
+ shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))',
992
+ shadowForTooltip: 'var(--shadow-for-tooltip, 0px 1px 2px 0px rgba(0, 0, 0, 0.25))',
993
+ shadowForSelectInputMenu: 'var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
994
+ shadowForPrimaryActionDropdown: 'var(--shadow-for-primary-action-dropdown, none)',
995
+ shadowForPrimaryActionDropdownWhenHovered: 'var(--shadow-for-primary-action-dropdown-when-hovered, none)',
996
+ shadowForPrimaryActionDropdownWhenActive: 'var(--shadow-for-primary-action-dropdown-when-active, none)',
997
+ shadowForPrimaryActionDropdownMenu: 'var(--shadow-for-primary-action-dropdown-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
998
+ shadowForToggleInputThumb: 'var(--shadow-for-toggle-input-thumb, 0px 1px 5px rgba(0, 0, 0, 0.2))',
999
+ shadowForTagWhenHovered: 'var(--shadow-for-tag-when-hovered, none)',
1314
1000
  fontSizeM: 'var(--font-size-m, 1rem)',
1315
1001
  bigButtonHeight: 'var(--big-button-height, 32px)',
1316
1002
  smallButtonHeight: 'var(--small-button-height, 24px)',
@@ -1434,41 +1120,11 @@ ThemeProvider.defaultProps = {
1434
1120
  theme: 'default'
1435
1121
  };
1436
1122
  const useTheme = function () {
1437
- let parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
1438
- const _useState = react.useState('default'),
1439
- _useState2 = _slicedToArray(_useState, 2),
1440
- theme = _useState2[0],
1441
- setTheme = _useState2[1];
1442
- const parentSelectorRef = react.useRef(parentSelector);
1443
- const mutationChangeCallback = react.useCallback(mutationList => {
1444
- // We expect only a single element in the mutation list as we configured the
1445
- // observer to only listen to `data-theme` changes.
1446
- const _mutationList = _slicedToArray(mutationList, 1),
1447
- mutationEvent = _mutationList[0];
1448
- setTheme(mutationEvent.target.dataset.theme);
1449
- }, []);
1450
- hooks.useMutationObserver(parentSelector(), mutationChangeCallback, {
1451
- attributes: true,
1452
- attributeFilter: ['data-theme']
1453
- });
1454
- const themedValue = react.useCallback((defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue, [theme]);
1455
-
1456
- // If we use 'useLayoutEffect' here, we would be trying to read the
1457
- // data attribute before it gets set from the effect in the ThemeProvider
1458
- react.useEffect(() => {
1459
- var _parentSelectorRef$cu;
1460
- // We need to read the current theme after the provider is rendered
1461
- // to have the actual selected theme (calculated client-side) in the
1462
- // hook local state
1463
- const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
1464
- if (nextTheme) {
1465
- setTheme(nextTheme);
1466
- }
1467
- }, []);
1123
+ const themedValue = react.useCallback((_defaultThemeValue, newThemeValue) => newThemeValue, []);
1468
1124
  return {
1469
- theme,
1125
+ theme: 'default',
1470
1126
  themedValue,
1471
- isNewTheme: theme === 'test'
1127
+ isNewTheme: true
1472
1128
  };
1473
1129
  };
1474
1130
  const withThemeContext = WrappedComponent => {
@@ -1480,7 +1136,7 @@ const withThemeContext = WrappedComponent => {
1480
1136
  };
1481
1137
 
1482
1138
  // NOTE: This string will be replaced on build time with the package version.
1483
- var version = "16.1.0";
1139
+ var version = "16.2.0";
1484
1140
 
1485
1141
  exports.ThemeProvider = ThemeProvider;
1486
1142
  exports.customProperties = designTokens$1;