@commercetools-uikit/design-system 16.0.0 → 16.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +389 -749
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +389 -749
  3. package/dist/commercetools-uikit-design-system.esm.js +390 -750
  4. package/dist/declarations/src/design-tokens.d.ts +369 -670
  5. package/dist/declarations/src/theme-provider.d.ts +1 -1
  6. package/materials/custom-properties.css +357 -340
  7. package/materials/custom-properties.json +276 -276
  8. package/materials/internals/definition.yaml +261 -1026
  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%)',
@@ -580,7 +232,6 @@ const themes = {
580
232
  backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
581
233
  backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
582
234
  backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
583
- backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 98%)',
584
235
  backgroundColorForCheckboxInputIcon: '#00b39e',
585
236
  backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
586
237
  backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -595,7 +246,6 @@ const themes = {
595
246
  backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
596
247
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
597
248
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
598
- backgroundColorForTagWhenHovered: 'hsl(0, 0%, 90%)',
599
249
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
600
250
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
601
251
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -606,15 +256,20 @@ const themes = {
606
256
  borderForRadioInputOption: '2px',
607
257
  borderForCalendarMenuWhenFocused: 'none',
608
258
  borderColorForInput: '#ccc',
259
+ borderColorForInputWhenFocused: '#00b39e',
609
260
  borderColorForInputWhenDisabled: '#ccc',
610
- borderColorForInputWhenHovered: '#ccc',
611
261
  borderColorForInputWhenReadonly: '#fff',
612
- borderColorForInputWhenFocused: '#00b39e',
262
+ borderColorForInputWhenError: '#e60050',
263
+ borderColorForInputWhenWarning: '#f16d0e',
264
+ borderColorForInputWhenHovered: '#ccc',
265
+ borderColorForTag: '#ccc',
266
+ borderColorForTagWarning: '#f16d0e',
267
+ borderColorForTagWhenFocused: '#ccc',
268
+ borderColorForTagWhenHovered: '#ccc',
613
269
  borderColorForButtonAsIcon: '#ccc',
614
270
  borderColorForButtonAsIconAsInfo: '#ccc',
615
271
  borderColorForButtonAsIconAsPrimary: '#ccc',
616
272
  borderColorForButtonAsIconWhenDisabled: '#fff',
617
- borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)',
618
273
  borderColorForTableHeader: '#fff',
619
274
  borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)',
620
275
  borderColorForTableManagerDroppableList: '#ccc',
@@ -625,10 +280,8 @@ const themes = {
625
280
  borderColorForStampAsInformation: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
626
281
  borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)',
627
282
  borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)',
283
+ borderColorForLocalizedInputLabel: '#ccc',
628
284
  borderColorForLocalizedInputLabelWhenReadonly: '#fff',
629
- borderColorForTag: '#ccc',
630
- borderColorForTagWhenFocused: '#ccc',
631
- borderColorForTagWhenHovered: '#ccc',
632
285
  borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)',
633
286
  borderColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
634
287
  borderColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 85%)',
@@ -653,9 +306,10 @@ const themes = {
653
306
  borderRadiusForButtonAsIconAsBig: '4px',
654
307
  borderRadiusForButtonAsIconAsMedium: '4px',
655
308
  borderRadiusForButtonAsIconAsSmall: '2px',
309
+ borderRadiusForInput: '4px',
310
+ borderRadiusForTag: '2px',
656
311
  borderRadiusForCard: '4px',
657
312
  borderRadiusForTableManagerDroppableList: '4px',
658
- borderRadiusForInput: '4px',
659
313
  borderRadiusForStamp: '20px',
660
314
  borderRadiusForViewSwitcher: '4px',
661
315
  borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
@@ -663,10 +317,14 @@ const themes = {
663
317
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
664
318
  borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
665
319
  borderRadiusForPrimaryActionDropdownMenu: '4px',
320
+ borderWidthForInput: '1px',
321
+ borderWidthForInputWhenWarning: '1px',
322
+ borderWidthForInputWhenError: '1px',
323
+ borderWidthForInputWhenFocused: '1px',
666
324
  borderWidthForTag: '1px 1px 1px 0',
325
+ borderWidthForSelectInput: '2px',
667
326
  borderWidthForContentNotificationIcon: '1px',
668
327
  borderLeftWidthForContentNotification: '0px',
669
- borderWidthForSelectInput: '2px',
670
328
  borderWidthForCheckboxInputIcon: '2px',
671
329
  borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
672
330
  boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
@@ -674,36 +332,78 @@ const themes = {
674
332
  boxShadowForViewSwitcherWhenSelected: 'none',
675
333
  boxShadowForSelectInputWhenFocused: 'inset 0 0 0 1px',
676
334
  boxShadowForCalendarMenuWhenFocused: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
335
+ fontColorForText: '#1a1a1a',
677
336
  fontColorForTextWhenDisabled: 'hsl(0, 0%, 60%)',
678
- fontColorForTableHeader: '#1a1a1a',
337
+ fontColorForInput: '#1a1a1a',
338
+ fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
339
+ fontColorForInputWhenError: '#e60050',
679
340
  fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
341
+ fontColorForInputWhenWarning: '#f16d0e',
342
+ fontColorForTag: '#1a1a1a',
680
343
  fontColorForTagRemoveIcon: 'hsl(0, 0%, 40%)',
681
344
  fontColorForTagDragIcon: 'hsl(0, 0%, 40%)',
682
345
  fontColorForTagRemoveIconWhenHovered: '#e60050',
346
+ fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
347
+ fontColorForTextWhenInverted: '#fff',
348
+ fontColorForLinkAsInverted: '#fff',
349
+ fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
350
+ fontColorForLinkAsSecondary: '#1a1a1a',
351
+ fontColorForLinkAsPrimaryWhenActive: '#00b39e',
352
+ fontColorForLinkAsSecondaryWhenActive: '#00b39e',
353
+ fontColorForTableHeader: '#1a1a1a',
354
+ fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)',
683
355
  fontColorForViewSwitcher: 'hsl(0, 0%, 40%)',
356
+ fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
357
+ fontColorForViewSwitcherWhenSelected: '#1a1a1a',
358
+ fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
359
+ fontColorForClearInputIconWhenHovered: '#e60050',
360
+ fontColorForContentNotification: '#1a1a1a',
684
361
  fontColorForContentNotificationIconWhenError: '#e60050',
685
362
  fontColorForContentNotificationIconWhenWarning: '#f16d0e',
686
363
  fontColorForContentNotificationIconWhenSuccess: '#00b39e',
687
364
  fontColorForContentNotificationIconWhenInfo: '#078cdf',
688
- fontColorForClearInputIconWhenHovered: '#e60050',
689
- fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
690
365
  fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)',
366
+ fontColorForSearchInputIconWhenHovered: '#00b39e',
691
367
  fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)',
692
368
  fontColorForSelectInputWhenError: '#e60050',
693
369
  fontColorForSelectInputWhenWarning: '#f16d0e',
694
370
  fontColorForSelectInputIconWhenError: '#e60050',
695
371
  fontColorForSelectInputIconWhenWarning: '#f16d0e',
696
372
  fontColorForMoneyInputCurrencyDropdownIndicator: 'hsl(0, 0%, 40%)',
373
+ fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
697
374
  fontColorForCheckboxInputLabel: '#1a1a1a',
698
375
  fontColorForCheckboxInputLabelWhenError: '#e60050',
699
376
  fontColorForCheckboxInputLabelWhenDisabled: 'hsl(0, 0%, 60%)',
700
377
  fontColorForCheckboxInputLabelWhenReadonly: 'hsl(0, 0%, 40%)',
378
+ fontColorForRadioInputWhenDisabled: 'hsl(0, 0%, 60%)',
379
+ fontColorForRadioInputWhenError: '#e60050',
380
+ fontColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
381
+ fontColorForRadioInputWhenWarning: '#f16d0e',
701
382
  fontColorForFlatButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
702
383
  fontColorForFlatButtonAsPrimaryWhenHovered: '#00b39e',
703
- fontColorForLinkAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
704
- fontColorForLinkAsPrimaryWhenActive: '#00b39e',
384
+ fontColorForFlatButtonAsCritical: '#e60050',
385
+ fontColorForFlatButtonAsCriticalWhenHovered: 'hsl(339.1304347826087, 100%, 25%)',
386
+ fontColorForFlatButtonAsSecondary: '#1a1a1a',
387
+ fontColorForFlatButtonAsInverted: '#fff',
388
+ fontColorForFlatButtonIconWhenDisabled: 'hsl(0, 0%, 60%)',
705
389
  fontColorForSecondaryIconButtonAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
706
390
  fontColorForSecondaryIconButtonAsPrimaryWhenHovered: '#00b39e',
391
+ heightForButtonAsBig: '40px',
392
+ heightForButtonAsMedium: '32px',
393
+ heightForButtonAsIconAsBig: '40px',
394
+ heightForButtonAsIconAsMedium: '32px',
395
+ heightForButtonAsIconAsSmall: '16px',
396
+ heightForInput: '40px',
397
+ heightForViewSwitcher: '40px',
398
+ heightForViewSwitcherWhenCondensed: '32px',
399
+ heightForSelectInputTag: '32px',
400
+ heightForRadioInputOption: '18px',
401
+ heightForRadioInputOptionWhenChecked: '10px',
402
+ heightForPrimaryActionDropdown: '40px',
403
+ widthForAvatarAsMedium: '40px',
404
+ minWidthForMoneyInputCurrencyDropdown: '80px',
405
+ placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
406
+ fontSizeForButton: '0.875rem',
707
407
  fontSizeForInput: '1rem',
708
408
  fontSizeForTextAsH1: '1.5rem',
709
409
  fontSizeForTextAsH2: '1.25rem',
@@ -713,7 +413,7 @@ const themes = {
713
413
  fontSizeForTextAsBody: '1rem',
714
414
  fontSizeForTextAsDetail: '0.875rem',
715
415
  fontSizeForBody: '16px',
716
- fontSizeForButton: '0.875rem',
416
+ fontSizeForLink: '1rem',
717
417
  fontSizeForStamp: '0.875rem',
718
418
  fontSizeForViewSwitcher: '0.875rem',
719
419
  fontSizeForTable: '0.875rem',
@@ -721,7 +421,10 @@ const themes = {
721
421
  fontSizeForAvatarAsMedium: '1rem',
722
422
  fontSizeForAvatarAsBig: '2.5rem',
723
423
  fontSizeForLocalizedInputLabel: '1rem',
424
+ fontSizeForContentNotification: '1rem',
724
425
  fontSizeForSelectInputTag: '1rem',
426
+ iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
427
+ iconColorForDatetimeInputIconWhenHovered: '#e60050',
725
428
  lineHeightForTextAsH1: '2.125rem',
726
429
  lineHeightForTextAsH2: '1.75rem',
727
430
  lineHeightForTextAsH3: '1.5rem',
@@ -741,22 +444,6 @@ const themes = {
741
444
  fontWeightForButton: '500',
742
445
  fontWeightForTableHeader: '600',
743
446
  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
447
  marginForTableHeader: '16px',
761
448
  marginForTableCellAsCondensed: '8px',
762
449
  marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
@@ -795,11 +482,12 @@ const themes = {
795
482
  paddingForLocalizedRichTextDropdownButton: '5px var(--spacing-20)',
796
483
  paddingForLocalizedRichTextDropdownItem: 'var(--spacing-20) var(--spacing-30)',
797
484
  paddingForLocalizedRichTextBodyButton: 'var(--spacing-20)',
485
+ paddingForLocalizedInputLabel: '0 12px',
798
486
  paddingForRichTextInput: 'var(--spacing-20) var(--spacing-30)',
799
487
  paddingForRichTextToolbar: 'none',
800
488
  paddingLeftForRichTextToolbar: 'none',
801
489
  paddingForRichTextEditorContainer: 'var(--spacing-20) 0 0',
802
- paddingForLocalizedInputLabel: '0 12px',
490
+ paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
803
491
  paddingForTagRemoveIcon: '0 12px',
804
492
  paddingForTooltip: 'var(--spacing-20) 12px',
805
493
  paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
@@ -818,6 +506,7 @@ const themes = {
818
506
  paddingForPrimaryActionDropdownIcon: '0 var(--spacing-20)',
819
507
  paddingForButtonAsMedium: '0 var(--spacing-30)',
820
508
  paddingForButtonAsBig: '0 var(--spacing-30)',
509
+ shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
821
510
  shadowForButton: 'none',
822
511
  shadowForButtonWhenFocused: 'none',
823
512
  shadowForButtonWhenHovered: 'none',
@@ -835,7 +524,16 @@ const themes = {
835
524
  shadowForPrimaryActionDropdownWhenActive: 'none',
836
525
  shadowForPrimaryActionDropdownMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
837
526
  shadowForToggleInputThumb: '0px 1px 5px rgba(0, 0, 0, 0.2)',
838
- shadowForTagWhenHovered: 'none'
527
+ shadowForTagWhenHovered: 'none',
528
+ fontSizeM: '1rem',
529
+ bigButtonHeight: '32px',
530
+ smallButtonHeight: '24px',
531
+ sizeHeightInput: '32px',
532
+ fontFamilyDefault: "'Open Sans', sans-serif",
533
+ fontSizeDefault: '1rem',
534
+ fontSizeSmall: '0.9231rem',
535
+ shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
536
+ sizeHeightTag: '26px'
839
537
  }
840
538
  };
841
539
  const designTokens = {
@@ -887,7 +585,7 @@ const designTokens = {
887
585
  borderRadius20: 'var(--border-radius-20, 20px)',
888
586
  borderWidth1: 'var(--border-width-1, 1px)',
889
587
  borderWidth2: 'var(--border-width-2, 2px)',
890
- fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
588
+ fontFamily: "var(--font-family, 'Inter', system-ui)",
891
589
  fontSize10: 'var(--font-size-10, 0.75rem)',
892
590
  fontSize20: 'var(--font-size-20, 0.875rem)',
893
591
  fontSize30: 'var(--font-size-30, 1rem)',
@@ -968,349 +666,349 @@ const designTokens = {
968
666
  breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
969
667
  breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
970
668
  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)',
669
+ alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, center)',
670
+ backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(0deg 0% 10% / 10%))',
671
+ backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(0deg 0% 10% / 5%))',
672
+ backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #15A390)',
673
+ backgroundColorForButtonAsPrimaryWhenHovered: 'var(--background-color-for-button-as-primary-when-hovered, #17AB97)',
674
+ backgroundColorForButtonAsIconAsPrimaryWhenActive: 'var(--background-color-for-button-as-icon-as-primary-when-active, #15A390)',
977
675
  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)',
676
+ backgroundColorForButtonAsIconAsInfoWhenActive: 'var(--background-color-for-button-as-icon-as-info-when-active, #057FCC)',
979
677
  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%))',
678
+ backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #DC630A)',
679
+ backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)',
680
+ backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
983
681
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
984
682
  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)',
683
+ backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(0, 0%, 95%))',
684
+ backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 98%))',
987
685
  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)',
686
+ backgroundColorForInputWhenReadonly: 'var(--background-color-for-input-when-readonly, hsl(0, 0%, 95%))',
687
+ backgroundColorForInputWhenActive: 'var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))',
688
+ backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 98%))',
689
+ backgroundColorForTableHeader: 'var(--background-color-for-table-header, hsl(0, 0%, 95%))',
992
690
  backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
993
691
  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)',
692
+ backgroundColorForTagWhenHovered: 'var(--background-color-for-tag-when-hovered, hsl(0, 0%, 90%))',
693
+ backgroundColorForCollapsiblePanelHeaderIconWhenDisabled: 'var(--background-color-for-collapsible-panel-header-icon-when-disabled, #fff)',
694
+ backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 98%))',
695
+ backgroundColorForAvatar: 'var(--background-color-for-avatar, #213c45)',
696
+ backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, hsl(195, 35.2941176471%, 30%))',
697
+ backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 95%))',
698
+ backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, #fff)',
699
+ backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(0, 0%, 95%))',
700
+ backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(0, 0%, 95%))',
701
+ backgroundColorForLocalizedRichTextBodyButtonWhenActive: 'var(--background-color-for-localized-rich-text-body-button-when-active, hsl(195, 35.2941176471%, 20%))',
702
+ backgroundColorForLocalizedRichTextBodyButton: 'var(--background-color-for-localized-rich-text-body-button, hsl(0, 0%, 95%))',
703
+ backgroundColorForRichTextDropdownWhenHovered: 'var(--background-color-for-rich-text-dropdown-when-hovered, hsl(0, 0%, 95%))',
704
+ backgroundColorForRichTextMoreStylesDropdownWhenHovered: 'var(--background-color-for-rich-text-more-styles-dropdown-when-hovered, hsl(203.05555555555554, 93.9130434783%, 95%))',
705
+ backgroundColorForRichTextButton: 'var(--background-color-for-rich-text-button, hsl(195, 35.2941176471%, 20%))',
706
+ backgroundColorForTooltip: 'var(--background-color-for-tooltip, hsl(195, 35.2941176471%, 10%))',
1009
707
  backgroundColorForViewSwitcher: 'var(--background-color-for-view-switcher, #fff)',
1010
- backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))',
708
+ backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, #fff)',
1011
709
  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%))',
710
+ backgroundColorForViewSwitcherWhenHovered: 'var(--background-color-for-view-switcher-when-hovered, hsl(0, 0%, 95%))',
711
+ backgroundColorForContentNotificationWhenError: 'var(--background-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 95%))',
712
+ backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
713
+ backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
714
+ backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
715
+ backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))',
716
+ backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
717
+ backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
718
+ backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))',
719
+ backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #00b39e)',
720
+ backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)',
721
+ backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
722
+ backgroundColorForCheckboxInputIconWhenError: 'var(--background-color-for-checkbox-input-icon-when-error, #e60050)',
723
+ backgroundColorForCheckboxInputIconWhenHovered: 'var(--background-color-for-checkbox-input-icon-when-hovered, hsl(0, 0%, 90%))',
724
+ backgroundColorForPrimaryActionDropdownWhenActive: 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 90%))',
725
+ backgroundColorForPrimaryActionDropdownWhenDisabled: 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(0, 0%, 95%))',
726
+ backgroundColorForToggleInputTrack: 'var(--background-color-for-toggle-input-track, #ccc)',
727
+ backgroundColorForToggleInputTrackWhenDisabled: 'var(--background-color-for-toggle-input-track-when-disabled, hsl(0, 0%, 90%))',
728
+ backgroundColorForToggleInputThumbWhenDisabled: 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(0, 0%, 60%))',
729
+ backgroundColorForToggleInputTrackWhenChecked: 'var(--background-color-for-toggle-input-track-when-checked, hsl(172.9608938547486, 100%, 40%))',
730
+ backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))',
731
+ backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))',
732
+ backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))',
733
+ borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))',
734
+ borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))',
735
+ borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))',
736
+ borderForCardWhenRaised: 'var(--border-for-card-when-raised, 1px solid var(--color-neutral-90))',
737
+ borderForCollapsiblePanelHeaderIconWhenDisabled: 'var(--border-for-collapsible-panel-header-icon-when-disabled, none)',
738
+ borderForViewSwitcher: 'var(--border-for-view-switcher, 1px solid var(--color-neutral))',
739
+ borderForSelectInputTag: 'var(--border-for-select-input-tag, 1px solid var(--color-neutral-85))',
740
+ borderForRadioInputOption: 'var(--border-for-radio-input-option, 2px)',
741
+ borderForCalendarMenuWhenFocused: 'var(--border-for-calendar-menu-when-focused, none)',
742
+ borderColorForInput: 'var(--border-color-for-input, #ccc)',
1045
743
  borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
1046
744
  borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
1047
- borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #ccc)',
745
+ borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #fff)',
1048
746
  borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
1049
747
  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%))',
748
+ borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, #ccc)',
749
+ borderColorForTag: 'var(--border-color-for-tag, #ccc)',
1052
750
  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%))',
751
+ borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #ccc)',
752
+ borderColorForTagWhenHovered: 'var(--border-color-for-tag-when-hovered, #ccc)',
753
+ borderColorForButtonAsIcon: 'var(--border-color-for-button-as-icon, #ccc)',
754
+ borderColorForButtonAsIconAsInfo: 'var(--border-color-for-button-as-icon-as-info, #ccc)',
755
+ borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #ccc)',
756
+ borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #fff)',
757
+ borderColorForTableHeader: 'var(--border-color-for-table-header, #fff)',
758
+ borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, hsl(0, 0%, 90%))',
759
+ borderColorForTableManagerDroppableList: 'var(--border-color-for-table-manager-droppable-list, #ccc)',
760
+ borderColorForCollapsiblePanelHeader: 'var(--border-color-for-collapsible-panel-header, hsl(0, 0%, 90%))',
761
+ borderColorForStampWhenError: 'var(--border-color-for-stamp-when-error, hsl(339.1304347826087, 100%, 85%))',
762
+ borderColorForStampWhenWarning: 'var(--border-color-for-stamp-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))',
763
+ borderColorForStampAsPositive: 'var(--border-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
764
+ borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, hsl(203.05555555555554, 93.9130434783%, 85%))',
765
+ borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 85%))',
766
+ borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 85%))',
1069
767
  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%))',
768
+ borderColorForLocalizedInputLabelWhenReadonly: 'var(--border-color-for-localized-input-label-when-readonly, #fff)',
769
+ borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, hsl(339.1304347826087, 100%, 85%))',
770
+ borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))',
771
+ borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 85%))',
772
+ borderColorForContentNotificationWhenSuccess: 'var(--border-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 85%))',
773
+ borderColorForGroupHeadingSelectInputOptions: 'var(--border-color-for-group-heading-select-input-options, hsl(0, 0%, 90%))',
774
+ borderColorForSelectInputMenu: 'var(--border-color-for-select-input-menu, #fff)',
775
+ borderColorForSelectInputWhenReadonly: 'var(--border-color-for-select-input-when-readonly, hsl(0, 0%, 95%))',
776
+ borderColorForSelectInputMenuWhenWarning: 'var(--border-color-for-select-input-menu-when-warning, #fff)',
777
+ borderColorForSelectInputMenuWhenError: 'var(--border-color-for-select-input-menu-when-error, #fff)',
778
+ borderColorForCheckboxInputIcon: 'var(--border-color-for-checkbox-input-icon, #00b39e)',
1081
779
  borderColorForCheckboxInputIconWhenDisabled: 'var(--border-color-for-checkbox-input-icon-when-disabled, #ccc)',
1082
- borderColorForCheckboxInputIconWhenReadonly: 'var(--border-color-for-checkbox-input-icon-when-readonly, #ccc)',
780
+ borderColorForCheckboxInputIconWhenReadonly: 'var(--border-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
1083
781
  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)',
782
+ borderColorForRadioInput: 'var(--border-color-for-radio-input, hsl(0, 0%, 60%))',
783
+ borderColorForRadioInputWhenDisabled: 'var(--border-color-for-radio-input-when-disabled, #ccc)',
784
+ borderColorForRadioInputWhenReadonly: 'var(--border-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))',
785
+ borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #00b39e)',
786
+ borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))',
787
+ borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #fff)',
788
+ borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
1091
789
  borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
1092
- borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
790
+ borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 4px)',
1093
791
  borderRadiusForButtonAsIconAsMedium: 'var(--border-radius-for-button-as-icon-as-medium, 4px)',
1094
792
  borderRadiusForButtonAsIconAsSmall: 'var(--border-radius-for-button-as-icon-as-small, 2px)',
1095
- borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
793
+ borderRadiusForInput: 'var(--border-radius-for-input, 4px)',
1096
794
  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)',
795
+ borderRadiusForCard: 'var(--border-radius-for-card, 4px)',
796
+ borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 4px)',
797
+ borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
798
+ borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
799
+ borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)',
800
+ borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))',
801
+ borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
802
+ borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)',
803
+ borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 4px)',
1106
804
  borderWidthForInput: 'var(--border-width-for-input, 1px)',
1107
805
  borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
1108
806
  borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
1109
807
  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)',
808
+ borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
809
+ borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
810
+ borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 1px)',
811
+ borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 0px)',
812
+ borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 2px)',
813
+ borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)',
814
+ boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 1px)',
815
+ boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, none)',
816
+ boxShadowForViewSwitcherWhenSelected: 'var(--box-shadow-for-view-switcher-when-selected, none)',
817
+ boxShadowForSelectInputWhenFocused: 'var(--box-shadow-for-select-input-when-focused, inset 0 0 0 1px)',
818
+ boxShadowForCalendarMenuWhenFocused: 'var(--box-shadow-for-calendar-menu-when-focused, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
1121
819
  fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
1122
- fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, #ccc)',
820
+ fontColorForTextWhenDisabled: 'var(--font-color-for-text-when-disabled, hsl(0, 0%, 60%))',
1123
821
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
1124
822
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
1125
823
  fontColorForInputWhenError: 'var(--font-color-for-input-when-error, #e60050)',
1126
- fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 60%))',
824
+ fontColorForInputWhenReadonly: 'var(--font-color-for-input-when-readonly, hsl(0, 0%, 40%))',
1127
825
  fontColorForInputWhenWarning: 'var(--font-color-for-input-when-warning, #f16d0e)',
1128
826
  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)',
827
+ fontColorForTagRemoveIcon: 'var(--font-color-for-tag-remove-icon, hsl(0, 0%, 40%))',
828
+ fontColorForTagDragIcon: 'var(--font-color-for-tag-drag-icon, hsl(0, 0%, 40%))',
829
+ fontColorForTagRemoveIconWhenHovered: 'var(--font-color-for-tag-remove-icon-when-hovered, #e60050)',
1132
830
  fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
1133
831
  fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
1134
832
  fontColorForLinkAsInverted: 'var(--font-color-for-link-as-inverted, #fff)',
1135
- fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, #00b39e)',
833
+ fontColorForLinkAsPrimary: 'var(--font-color-for-link-as-primary, hsl(172.9608938547486, 100%, 25%))',
1136
834
  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%))',
835
+ fontColorForLinkAsPrimaryWhenActive: 'var(--font-color-for-link-as-primary-when-active, #00b39e)',
1138
836
  fontColorForLinkAsSecondaryWhenActive: 'var(--font-color-for-link-as-secondary-when-active, #00b39e)',
1139
- fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)',
837
+ fontColorForTableHeader: 'var(--font-color-for-table-header, #1a1a1a)',
1140
838
  fontColorForLocalizedInputLabel: 'var(--font-color-for-localized-input-label, hsl(0, 0%, 60%))',
1141
- fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)',
839
+ fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, hsl(0, 0%, 40%))',
1142
840
  fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))',
1143
841
  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)',
842
+ fontColorForClearInputIcon: 'var(--font-color-for-clear-input-icon, hsl(0, 0%, 40%))',
843
+ fontColorForClearInputIconWhenHovered: 'var(--font-color-for-clear-input-icon-when-hovered, #e60050)',
1146
844
  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)',
845
+ fontColorForContentNotificationIconWhenError: 'var(--font-color-for-content-notification-icon-when-error, #e60050)',
846
+ fontColorForContentNotificationIconWhenWarning: 'var(--font-color-for-content-notification-icon-when-warning, #f16d0e)',
847
+ fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #00b39e)',
848
+ fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #078cdf)',
849
+ fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, hsl(0, 0%, 60%))',
1152
850
  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)',
851
+ fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, hsl(0, 0%, 60%))',
852
+ fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #e60050)',
853
+ fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #f16d0e)',
854
+ fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #e60050)',
855
+ fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #f16d0e)',
856
+ fontColorForMoneyInputCurrencyDropdownIndicator: 'var(--font-color-for-money-input-currency-dropdown-indicator, hsl(0, 0%, 40%))',
1159
857
  fontColorForSearchInputIconWhenReadonly: 'var(--font-color-for-search-input-icon-when-readonly, hsl(0, 0%, 60%))',
1160
858
  fontColorForCheckboxInputLabel: 'var(--font-color-for-checkbox-input-label, #1a1a1a)',
1161
859
  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%))',
860
+ fontColorForCheckboxInputLabelWhenDisabled: 'var(--font-color-for-checkbox-input-label-when-disabled, hsl(0, 0%, 60%))',
1163
861
  fontColorForCheckboxInputLabelWhenReadonly: 'var(--font-color-for-checkbox-input-label-when-readonly, hsl(0, 0%, 40%))',
1164
862
  fontColorForRadioInputWhenDisabled: 'var(--font-color-for-radio-input-when-disabled, hsl(0, 0%, 60%))',
1165
863
  fontColorForRadioInputWhenError: 'var(--font-color-for-radio-input-when-error, #e60050)',
1166
864
  fontColorForRadioInputWhenReadonly: 'var(--font-color-for-radio-input-when-readonly, hsl(0, 0%, 60%))',
1167
865
  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%))',
866
+ fontColorForFlatButtonAsPrimary: 'var(--font-color-for-flat-button-as-primary, hsl(172.9608938547486, 100%, 25%))',
867
+ fontColorForFlatButtonAsPrimaryWhenHovered: 'var(--font-color-for-flat-button-as-primary-when-hovered, #00b39e)',
1170
868
  fontColorForFlatButtonAsCritical: 'var(--font-color-for-flat-button-as-critical, #e60050)',
1171
869
  fontColorForFlatButtonAsCriticalWhenHovered: 'var(--font-color-for-flat-button-as-critical-when-hovered, hsl(339.1304347826087, 100%, 25%))',
1172
870
  fontColorForFlatButtonAsSecondary: 'var(--font-color-for-flat-button-as-secondary, #1a1a1a)',
1173
871
  fontColorForFlatButtonAsInverted: 'var(--font-color-for-flat-button-as-inverted, #fff)',
1174
872
  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)',
873
+ fontColorForSecondaryIconButtonAsPrimary: 'var(--font-color-for-secondary-icon-button-as-primary, hsl(172.9608938547486, 100%, 25%))',
874
+ fontColorForSecondaryIconButtonAsPrimaryWhenHovered: 'var(--font-color-for-secondary-icon-button-as-primary-when-hovered, #00b39e)',
875
+ heightForButtonAsBig: 'var(--height-for-button-as-big, 40px)',
876
+ heightForButtonAsMedium: 'var(--height-for-button-as-medium, 32px)',
877
+ heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 40px)',
878
+ heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 32px)',
1181
879
  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)',
880
+ heightForInput: 'var(--height-for-input, 40px)',
881
+ heightForViewSwitcher: 'var(--height-for-view-switcher, 40px)',
882
+ heightForViewSwitcherWhenCondensed: 'var(--height-for-view-switcher-when-condensed, 32px)',
883
+ heightForSelectInputTag: 'var(--height-for-select-input-tag, 32px)',
884
+ heightForRadioInputOption: 'var(--height-for-radio-input-option, 18px)',
885
+ heightForRadioInputOptionWhenChecked: 'var(--height-for-radio-input-option-when-checked, 10px)',
886
+ heightForPrimaryActionDropdown: 'var(--height-for-primary-action-dropdown, 40px)',
887
+ widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 40px)',
888
+ minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 80px)',
1191
889
  placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
1192
- fontSizeForButton: 'var(--font-size-for-button, 1rem)',
890
+ fontSizeForButton: 'var(--font-size-for-button, 0.875rem)',
1193
891
  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)',
892
+ fontSizeForTextAsH1: 'var(--font-size-for-text-as-h-1, 1.5rem)',
893
+ fontSizeForTextAsH2: 'var(--font-size-for-text-as-h-2, 1.25rem)',
894
+ fontSizeForTextAsH3: 'var(--font-size-for-text-as-h-3, 1.125rem)',
895
+ fontSizeForTextAsH4: 'var(--font-size-for-text-as-h-4, 1rem)',
896
+ fontSizeForTextAsH5: 'var(--font-size-for-text-as-h-5, 1rem)',
1199
897
  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)',
898
+ fontSizeForTextAsDetail: 'var(--font-size-for-text-as-detail, 0.875rem)',
899
+ fontSizeForBody: 'var(--font-size-for-body, 16px)',
1202
900
  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)',
901
+ fontSizeForStamp: 'var(--font-size-for-stamp, 0.875rem)',
902
+ fontSizeForViewSwitcher: 'var(--font-size-for-view-switcher, 0.875rem)',
903
+ fontSizeForTable: 'var(--font-size-for-table, 0.875rem)',
904
+ fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 0.875rem)',
905
+ fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1rem)',
906
+ fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 2.5rem)',
1209
907
  fontSizeForLocalizedInputLabel: 'var(--font-size-for-localized-input-label, 1rem)',
1210
908
  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)',
909
+ fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 1rem)',
910
+ iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, hsl(0, 0%, 40%))',
911
+ iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #e60050)',
912
+ lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, 2.125rem)',
913
+ lineHeightForTextAsH2: 'var(--line-height-for-text-as-h-2, 1.75rem)',
914
+ lineHeightForTextAsH3: 'var(--line-height-for-text-as-h-3, 1.5rem)',
915
+ lineHeightForTextAsH4: 'var(--line-height-for-text-as-h-4, 1.375rem)',
916
+ lineHeightForTextAsH5: 'var(--line-height-for-text-as-h-5, 1.375rem)',
917
+ lineHeightForTextAsBody: 'var(--line-height-for-text-as-body, 1.625rem)',
918
+ lineHeightForTextAsDetail: 'var(--line-height-for-text-as-detail, 1.375rem)',
919
+ lineHeightForSelectInputOptions: 'var(--line-height-for-select-input-options, 1.625rem)',
920
+ lineHeightForTableHeader: 'var(--line-height-for-table-header, 26px)',
921
+ fontWeightForTextAsH1: 'var(--font-weight-for-text-as-h-1, 600)',
922
+ fontWeightForTextAsH2: 'var(--font-weight-for-text-as-h-2, 500)',
923
+ fontWeightForTextAsH3: 'var(--font-weight-for-text-as-h-3, 500)',
924
+ fontWeightForTextAsH4: 'var(--font-weight-for-text-as-h-4, 500)',
925
+ fontWeightForTextAsH5: 'var(--font-weight-for-text-as-h-5, 500)',
1228
926
  fontWeightForTextAsBody: 'var(--font-weight-for-text-as-body, 400)',
1229
927
  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))',
928
+ fontWeightForButton: 'var(--font-weight-for-button, 500)',
929
+ fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
930
+ fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
931
+ marginForTableHeader: 'var(--margin-for-table-header, 16px)',
932
+ marginForTableCellAsCondensed: 'var(--margin-for-table-cell-as-condensed, 8px)',
933
+ marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)',
934
+ marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 8px)',
935
+ marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 8px)',
936
+ marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, 8px)',
937
+ marginRightForMoneyInputPrecisionBadge: 'var(--margin-right-for-money-input-precision-badge, 12px)',
938
+ marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 12px)',
939
+ marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 8px)',
940
+ marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 4px)',
941
+ marginRightForPrimaryActionDropdown: 'var(--margin-right-for-primary-action-dropdown, 8px)',
942
+ marginTopForPrimaryActionDropdown: 'var(--margin-top-for-primary-action-dropdown, 8px)',
943
+ marginForLocalizedRichTextBodyButton: 'var(--margin-for-localized-rich-text-body-button, 0 2px var(--spacing-20) 2px)',
944
+ marginForRichTextDivider: 'var(--margin-for-rich-text-divider, var(--spacing-10) 2px)',
945
+ marginForRichTextDropdownItemLabel: 'var(--margin-for-rich-text-dropdown-item-label, 0 0 0 var(--spacing-20))',
946
+ marginForTagList: 'var(--margin-for-tag-list, 0 var(--spacing-20) var(--spacing-20) 0)',
947
+ paddingForStamp: 'var(--padding-for-stamp, 4px 12px)',
948
+ paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 0 var(--spacing-20))',
949
+ paddingForTag: 'var(--padding-for-tag, 2px 12px)',
950
+ paddingForTableHeader: 'var(--padding-for-table-header, 24px)',
951
+ paddingForTableHeaderAsCondensed: 'var(--padding-for-table-header-as-condensed, 24px)',
952
+ paddingForTableCell: 'var(--padding-for-table-cell, var(--spacing-30) var(--spacing-40))',
953
+ paddingForTableCellAsCondensed: 'var(--padding-for-table-cell-as-condensed, var(--spacing-20) var(--spacing-40))',
954
+ paddingForTableManagerDroppableList: 'var(--padding-for-table-manager-droppable-list, 16px)',
955
+ paddingForTableManagerSettingsPanel: 'var(--padding-for-table-manager-settings-panel, var(--spacing-40) var(--spacing-50))',
956
+ paddingForTableManagerDraggableTag: 'var(--padding-for-table-manager-draggable-tag, var(--spacing-10) 0)',
957
+ paddingForCollapsiblePanelHeader: 'var(--padding-for-collapsible-panel-header, var(--spacing-30) 0)',
958
+ paddingForCollapsiblePanelHeaderAsCondensed: 'var(--padding-for-collapsible-panel-header-as-condensed, var(--spacing-20) 0)',
959
+ paddingForCollapsiblePanelSectionWrapper: 'var(--padding-for-collapsible-panel-section-wrapper, var(--spacing-50) 0 0 calc(var(--spacing-30) + var(--spacing-10)))',
960
+ paddingForCollapsiblePanelSectionWrapperAsCondensed: 'var(--padding-for-collapsible-panel-section-wrapper-as-condensed, var(--spacing-40) 0 0 calc(var(--spacing-30) + var(--spacing-10)))',
961
+ paddingForCollapsiblePanelSectionDescription: 'var(--padding-for-collapsible-panel-section-description, 0 0 var(--spacing-40))',
962
+ paddingForCollapsiblePanelSectionDescriptionAsCondensed: 'var(--padding-for-collapsible-panel-section-description-as-condensed, 0 0 var(--spacing-40))',
963
+ paddingForInput: 'var(--padding-for-input, 16px)',
964
+ paddingForMultilineInput: 'var(--padding-for-multiline-input, 8px)',
965
+ paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, var(--spacing-20) 12px)',
966
+ paddingForLocalizedRichTextDropdownButton: 'var(--padding-for-localized-rich-text-dropdown-button, 5px var(--spacing-20))',
967
+ paddingForLocalizedRichTextDropdownItem: 'var(--padding-for-localized-rich-text-dropdown-item, var(--spacing-20) var(--spacing-30))',
968
+ paddingForLocalizedRichTextBodyButton: 'var(--padding-for-localized-rich-text-body-button, var(--spacing-20))',
969
+ paddingForLocalizedInputLabel: 'var(--padding-for-localized-input-label, 0 12px)',
970
+ paddingForRichTextInput: 'var(--padding-for-rich-text-input, var(--spacing-20) var(--spacing-30))',
971
+ paddingForRichTextToolbar: 'var(--padding-for-rich-text-toolbar, none)',
972
+ paddingLeftForRichTextToolbar: 'var(--padding-left-for-rich-text-toolbar, none)',
973
+ paddingForRichTextEditorContainer: 'var(--padding-for-rich-text-editor-container, var(--spacing-20) 0 0)',
1276
974
  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))',
975
+ paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 12px)',
976
+ paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)',
1279
977
  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))',
978
+ paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
979
+ paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))',
980
+ paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))',
981
+ paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 16px)',
982
+ paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 16px)',
983
+ paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 8px)',
984
+ paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 8px)',
985
+ paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 16px)',
986
+ paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, var(--spacing-10) 0)',
987
+ paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 12px)',
988
+ paddingForSelectableSearchInputDropdown: 'var(--padding-for-selectable-search-input-dropdown, 0 12px)',
989
+ paddingForPrimaryActionDropdown: 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-30))',
990
+ paddingForPrimaryActionDropdownIcon: 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-20))',
991
+ paddingForButtonAsMedium: 'var(--padding-for-button-as-medium, 0 var(--spacing-30))',
1294
992
  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
993
  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))',
994
+ shadowForButton: 'var(--shadow-for-button, none)',
995
+ shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, none)',
996
+ shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, none)',
997
+ shadowForButtonWhenActive: 'var(--shadow-for-button-when-active, none)',
998
+ shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, none)',
999
+ shadowForCardWhenRaised: 'var(--shadow-for-card-when-raised, 0 1px 5px 0 rgba(0, 0, 0, 0.05))',
1302
1000
  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))',
1001
+ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 1px var(--color-primary))',
1002
+ shadowForInputWhenError: 'var(--shadow-for-input-when-error, inset 0 0 0 1px var(--color-error))',
1003
+ shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, inset 0 0 0 1px var(--color-warning))',
1004
+ shadowForTooltip: 'var(--shadow-for-tooltip, 0px 1px 2px 0px rgba(0, 0, 0, 0.25))',
1005
+ shadowForSelectInputMenu: 'var(--shadow-for-select-input-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
1006
+ shadowForPrimaryActionDropdown: 'var(--shadow-for-primary-action-dropdown, none)',
1007
+ shadowForPrimaryActionDropdownWhenHovered: 'var(--shadow-for-primary-action-dropdown-when-hovered, none)',
1008
+ shadowForPrimaryActionDropdownWhenActive: 'var(--shadow-for-primary-action-dropdown-when-active, none)',
1009
+ shadowForPrimaryActionDropdownMenu: 'var(--shadow-for-primary-action-dropdown-menu, 0 2px 5px 0px rgba(0, 0, 0, 0.15))',
1010
+ shadowForToggleInputThumb: 'var(--shadow-for-toggle-input-thumb, 0px 1px 5px rgba(0, 0, 0, 0.2))',
1011
+ shadowForTagWhenHovered: 'var(--shadow-for-tag-when-hovered, none)',
1314
1012
  fontSizeM: 'var(--font-size-m, 1rem)',
1315
1013
  bigButtonHeight: 'var(--big-button-height, 32px)',
1316
1014
  smallButtonHeight: 'var(--small-button-height, 24px)',
@@ -1336,18 +1034,16 @@ var designTokens$1 = designTokens;
1336
1034
  '--border-radius-4': '4px',
1337
1035
  }
1338
1036
  */
1339
-
1340
1037
  function transformTokensToCssVarsValues(tokens) {
1341
1038
  var _context;
1342
-
1343
1039
  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context = _Object$entries__default["default"](tokens)).call(_context, _ref => {
1344
1040
  let _ref2 = _slicedToArray(_ref, 2),
1345
- key = _ref2[0],
1346
- value = _ref2[1];
1347
-
1041
+ key = _ref2[0],
1042
+ value = _ref2[1];
1348
1043
  return ["--".concat(kebabCase__default["default"](key)), value];
1349
1044
  }));
1350
1045
  }
1046
+
1351
1047
  /*
1352
1048
  This will transform a map of tokens names/values to
1353
1049
  a map of token names/css var definitions.
@@ -1362,67 +1058,50 @@ function transformTokensToCssVarsValues(tokens) {
1362
1058
  borderRadius4: 'var(--border-radius-4, 4px)',
1363
1059
  }
1364
1060
  */
1365
-
1366
-
1367
1061
  function transformTokensToCssVarsReferences(tokens) {
1368
1062
  var _context2;
1369
-
1370
1063
  let _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
1371
- includeDefaultValue: true
1372
- },
1373
- includeDefaultValue = _ref3.includeDefaultValue;
1374
-
1064
+ includeDefaultValue: true
1065
+ },
1066
+ includeDefaultValue = _ref3.includeDefaultValue;
1375
1067
  return _Object$fromEntries__default["default"](_mapInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](tokens)).call(_context2, _ref4 => {
1376
1068
  var _context3;
1377
-
1378
1069
  let _ref5 = _slicedToArray(_ref4, 2),
1379
- key = _ref5[0],
1380
- value = _ref5[1];
1381
-
1070
+ key = _ref5[0],
1071
+ value = _ref5[1];
1382
1072
  return [key, _concatInstanceProperty__default["default"](_context3 = "var(--".concat(kebabCase__default["default"](key))).call(_context3, includeDefaultValue ? ', ' + value : '', ")")];
1383
1073
  }));
1384
1074
  }
1385
1075
 
1386
1076
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
1387
-
1388
1077
  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
1389
-
1390
1078
  const allThemesNames = _Object$keys__default["default"](themes);
1391
-
1392
1079
  // used to cover SSR builds (for instance in Gatsby)
1393
1080
  const isBrowser = typeof window !== 'undefined';
1394
-
1395
1081
  const defaultParentSelector = () => isBrowser ? document.querySelector(':root') : null;
1396
-
1397
1082
  const applyTheme = _ref => {
1398
1083
  var _context;
1399
-
1400
1084
  let newTheme = _ref.newTheme,
1401
- _ref$parentSelector = _ref.parentSelector,
1402
- parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
1403
- themeOverrides = _ref.themeOverrides;
1404
- const target = parentSelector(); // With no target we can't change themes
1085
+ _ref$parentSelector = _ref.parentSelector,
1086
+ parentSelector = _ref$parentSelector === void 0 ? defaultParentSelector : _ref$parentSelector,
1087
+ themeOverrides = _ref.themeOverrides;
1088
+ const target = parentSelector();
1405
1089
 
1090
+ // With no target we can't change themes
1406
1091
  if (!target) return;
1407
1092
  const validTheme = _includesInstanceProperty__default["default"](allThemesNames).call(allThemesNames, newTheme || '') ? newTheme : 'default';
1408
-
1409
1093
  if (newTheme && newTheme !== validTheme) {
1410
1094
  console.warn("ThemeProvider: the specified theme '".concat(newTheme, "' is not supported."));
1411
1095
  }
1412
-
1413
1096
  const vars = transformTokensToCssVarsValues(merge__default["default"]({}, themes.default, themes[validTheme], isObject__default["default"](themeOverrides) ? themeOverrides : {}));
1414
-
1415
1097
  _forEachInstanceProperty__default["default"](_context = _Object$entries__default["default"](vars)).call(_context, _ref2 => {
1416
1098
  let _ref3 = _slicedToArray(_ref2, 2),
1417
- key = _ref3[0],
1418
- value = _ref3[1];
1419
-
1099
+ key = _ref3[0],
1100
+ value = _ref3[1];
1420
1101
  target.style.setProperty(key, value);
1421
1102
  });
1422
-
1423
1103
  target.setAttribute('data-theme', validTheme);
1424
1104
  };
1425
-
1426
1105
  const ThemeProvider = props => {
1427
1106
  const parentSelectorRef = react.useRef(props.parentSelector);
1428
1107
  const themeNameRef = react.useRef();
@@ -1443,7 +1122,6 @@ const ThemeProvider = props => {
1443
1122
  }, [props.theme, props.themeOverrides]);
1444
1123
  return null;
1445
1124
  };
1446
-
1447
1125
  ThemeProvider.propTypes = {
1448
1126
  parentSelector: _pt__default["default"].any,
1449
1127
  theme: _pt__default["default"].string,
@@ -1453,52 +1131,14 @@ ThemeProvider.defaultProps = {
1453
1131
  parentSelector: defaultParentSelector,
1454
1132
  theme: 'default'
1455
1133
  };
1456
-
1457
1134
  const useTheme = function () {
1458
- let parentSelector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultParentSelector;
1459
-
1460
- const _useState = react.useState('default'),
1461
- _useState2 = _slicedToArray(_useState, 2),
1462
- theme = _useState2[0],
1463
- setTheme = _useState2[1];
1464
-
1465
- const parentSelectorRef = react.useRef(parentSelector);
1466
- const mutationChangeCallback = react.useCallback(mutationList => {
1467
- // We expect only a single element in the mutation list as we configured the
1468
- // observer to only listen to `data-theme` changes.
1469
- const _mutationList = _slicedToArray(mutationList, 1),
1470
- mutationEvent = _mutationList[0];
1471
-
1472
- setTheme(mutationEvent.target.dataset.theme);
1473
- }, []);
1474
- hooks.useMutationObserver(parentSelector(), mutationChangeCallback, {
1475
- attributes: true,
1476
- attributeFilter: ['data-theme']
1477
- });
1478
-
1479
- const themedValue = (defaultThemeValue, newThemeValue) => theme === 'default' ? defaultThemeValue : newThemeValue; // If we use 'useLayoutEffect' here, we would be trying to read the
1480
- // data attribute before it gets set from the effect in the ThemeProvider
1481
-
1482
-
1483
- react.useEffect(() => {
1484
- var _parentSelectorRef$cu;
1485
-
1486
- // We need to read the current theme after the provider is rendered
1487
- // to have the actual selected theme (calculated client-side) in the
1488
- // hook local state
1489
- const nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
1490
-
1491
- if (nextTheme) {
1492
- setTheme(nextTheme);
1493
- }
1494
- }, []);
1135
+ const themedValue = react.useCallback((_defaultThemeValue, newThemeValue) => newThemeValue, []);
1495
1136
  return {
1496
- theme,
1137
+ theme: 'default',
1497
1138
  themedValue,
1498
- isNewTheme: theme === 'test'
1139
+ isNewTheme: true
1499
1140
  };
1500
1141
  };
1501
-
1502
1142
  const withThemeContext = WrappedComponent => {
1503
1143
  // eslint-disable-next-line react/display-name
1504
1144
  return props => {
@@ -1508,7 +1148,7 @@ const withThemeContext = WrappedComponent => {
1508
1148
  };
1509
1149
 
1510
1150
  // NOTE: This string will be replaced on build time with the package version.
1511
- var version = "16.0.0";
1151
+ var version = "16.1.1";
1512
1152
 
1513
1153
  exports.ThemeProvider = ThemeProvider;
1514
1154
  exports.customProperties = designTokens$1;