@commercetools-uikit/design-system 16.1.0 → 16.2.0

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