@commercetools-uikit/design-system 15.6.0 → 15.7.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 +58 -9
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +58 -9
  3. package/dist/commercetools-uikit-design-system.esm.js +58 -9
  4. package/dist/declarations/src/design-tokens.d.ts +48 -6
  5. package/dist/declarations/src/theme-provider.d.ts +5 -3
  6. package/materials/custom-properties.css +16 -2
  7. package/materials/custom-properties.json +16 -2
  8. package/materials/internals/definition.yaml +78 -6
  9. package/package.json +1 -1
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -73,6 +73,8 @@ var themes = {
73
73
  borderRadius4: '4px',
74
74
  borderRadius6: '6px',
75
75
  borderRadius20: '20px',
76
+ borderWidth1: '1px',
77
+ borderWidth2: '2px',
76
78
  fontFamily: "'Open Sans', sans-serif",
77
79
  fontSize10: '0.75rem',
78
80
  fontSize20: '0.875rem',
@@ -165,11 +167,13 @@ var themes = {
165
167
  backgroundColorForInput: '#fff',
166
168
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
167
169
  backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
168
- backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
170
+ backgroundColorForInputWhenHovered: 'unset',
171
+ backgroundColorForInputWhenFocused: 'unset',
169
172
  backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 90%)',
170
173
  backgroundColorForTableHeader: '#213c45',
171
174
  backgroundColorForTag: 'hsl(0, 0%, 95%)',
172
175
  backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
176
+ backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)',
173
177
  borderForButtonAsSecondary: 'none',
174
178
  borderForButtonAsSecondaryWhenHovered: 'none',
175
179
  borderForButtonAsSecondaryWhenActive: 'none',
@@ -180,6 +184,7 @@ var themes = {
180
184
  borderColorForInputWhenReadonly: '#ccc',
181
185
  borderColorForInputWhenError: '#e60050',
182
186
  borderColorForInputWhenWarning: '#f16d0e',
187
+ borderColorForInputWhenHovered: '#00b39e',
183
188
  borderColorForTag: 'hsl(0, 0%, 60%)',
184
189
  borderColorForTagWarning: '#f16d0e',
185
190
  borderColorForTagWhenFocused: '#00b39e',
@@ -188,7 +193,6 @@ var themes = {
188
193
  borderColorForButtonAsIconAsPrimary: '#00b39e',
189
194
  borderColorForButtonAsIconWhenDisabled: '#ccc',
190
195
  borderColorForTableHeader: '#ccc',
191
- borderColorForTableHeaderWhenHovered: '#ccc',
192
196
  borderColorForTableHeaderAsBottom: '#213c45',
193
197
  borderRadiusForButtonAsBig: '6px',
194
198
  borderRadiusForButtonAsSmall: '4px',
@@ -198,6 +202,10 @@ var themes = {
198
202
  borderRadiusForInput: '6px',
199
203
  borderRadiusForTag: '2px',
200
204
  borderRadiusForCard: '6px',
205
+ borderWidthForInput: '1px',
206
+ borderWidthForInputWhenWarning: '1px',
207
+ borderWidthForInputWhenError: '1px',
208
+ borderWidthForInputWhenFocused: '1px',
201
209
  fontColorForText: '#1a1a1a',
202
210
  fontColorForInput: '#1a1a1a',
203
211
  fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
@@ -213,6 +221,7 @@ var themes = {
213
221
  heightForButtonAsIconAsBig: '32px',
214
222
  heightForButtonAsIconAsMedium: '24px',
215
223
  heightForButtonAsIconAsSmall: '16px',
224
+ heightForInput: '32px',
216
225
  placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
217
226
  fontSizeForButton: '1rem',
218
227
  fontSizeForInput: '1rem',
@@ -252,6 +261,7 @@ var themes = {
252
261
  paddingForTableHeaderAsCondensed: '8px',
253
262
  paddingForTableCell: '16px',
254
263
  paddingForTableCellAsCondensed: '8px',
264
+ paddingForInput: '8px',
255
265
  shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
256
266
  shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
257
267
  shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
@@ -259,6 +269,10 @@ var themes = {
259
269
  shadowForButtonWhenDisabled: '0 0 0 1px var(--color-neutral) inset',
260
270
  shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
261
271
  shadowForCardWhenRaised: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
272
+ shadowForInput: 'none',
273
+ shadowForInputWhenFocused: 'inset 0 0 0 2px var(--color-primary)',
274
+ shadowForInputWhenError: 'none',
275
+ shadowForInputWhenWarning: 'none',
262
276
  fontSizeM: '1rem',
263
277
  bigButtonHeight: '32px',
264
278
  smallButtonHeight: '24px',
@@ -286,17 +300,23 @@ var themes = {
286
300
  backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)',
287
301
  backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 95%)',
288
302
  backgroundColorForTableHeader: '#fff',
303
+ backgroundColorForInputWhenHovered: 'hsl(0, 0%, 95%)',
304
+ backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
289
305
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
290
306
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
291
307
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
292
308
  borderForCardWhenRaised: '1px solid var(--color-neutral-90)',
309
+ borderColorForInput: '#ccc',
310
+ borderColorForInputWhenDisabled: '#ccc',
311
+ borderColorForInputWhenHovered: '#ccc',
312
+ borderColorForInputWhenReadonly: 'hsl(0, 0%, 90%)',
313
+ borderColorForInputWhenFocused: '#00b39e',
293
314
  borderColorForButtonAsIcon: '#ccc',
294
315
  borderColorForButtonAsIconAsInfo: '#ccc',
295
316
  borderColorForButtonAsIconAsPrimary: '#ccc',
296
317
  borderColorForButtonAsIconWhenDisabled: '#fff',
297
318
  borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)',
298
319
  borderColorForTableHeader: '#fff',
299
- borderColorForTableHeaderWhenHovered: 'hsl(0, 0%, 90%)',
300
320
  borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)',
301
321
  borderRadiusForButtonAsBig: '4px',
302
322
  borderRadiusForButtonAsSmall: '4px',
@@ -304,7 +324,9 @@ var themes = {
304
324
  borderRadiusForButtonAsIconAsMedium: '4px',
305
325
  borderRadiusForButtonAsIconAsSmall: '2px',
306
326
  borderRadiusForCard: '4px',
327
+ borderRadiusForInput: '4px',
307
328
  fontColorForTableHeader: 'hsl(0, 0%, 40%)',
329
+ fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
308
330
  fontSizeForInput: '1rem',
309
331
  fontSizeForTextAsH1: '1.5rem',
310
332
  fontSizeForTextAsH2: '1.5rem',
@@ -339,6 +361,7 @@ var themes = {
339
361
  heightForButtonAsIconAsBig: '40px',
340
362
  heightForButtonAsIconAsMedium: '32px',
341
363
  heightForButtonAsIconAsSmall: '16px',
364
+ heightForInput: '40px',
342
365
  marginForTableHeader: '16px',
343
366
  marginForTableCellAsCondensed: '8px',
344
367
  paddingForStamp: '4px 12px',
@@ -348,12 +371,17 @@ var themes = {
348
371
  paddingForTableHeaderAsCondensed: '24px',
349
372
  paddingForTableCell: 'var(--spacing-30) var(--spacing-40)',
350
373
  paddingForTableCellAsCondensed: 'var(--spacing-20) var(--spacing-40)',
374
+ paddingForInput: '16px',
351
375
  shadowForButton: 'none',
352
376
  shadowForButtonWhenFocused: 'none',
353
377
  shadowForButtonWhenHovered: 'none',
354
378
  shadowForButtonWhenActive: 'none',
355
379
  shadowForButtonWhenDisabled: 'none',
356
- shadowForCardWhenRaised: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
380
+ shadowForCardWhenRaised: 'none',
381
+ shadowForInput: 'none',
382
+ shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)',
383
+ shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
384
+ shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)'
357
385
  }
358
386
  };
359
387
  var designTokens = {
@@ -391,6 +419,8 @@ var designTokens = {
391
419
  borderRadius4: 'var(--border-radius-4, 4px)',
392
420
  borderRadius6: 'var(--border-radius-6, 6px)',
393
421
  borderRadius20: 'var(--border-radius-20, 20px)',
422
+ borderWidth1: 'var(--border-width-1, 1px)',
423
+ borderWidth2: 'var(--border-width-2, 2px)',
394
424
  fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
395
425
  fontSize10: 'var(--font-size-10, 0.75rem)',
396
426
  fontSize20: 'var(--font-size-20, 0.875rem)',
@@ -483,11 +513,13 @@ var designTokens = {
483
513
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
484
514
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
485
515
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
486
- backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 90%))',
516
+ backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, unset)',
517
+ backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, unset)',
487
518
  backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 90%))',
488
519
  backgroundColorForTableHeader: 'var(--background-color-for-table-header, #213c45)',
489
520
  backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
490
521
  backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
522
+ backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))',
491
523
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
492
524
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
493
525
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
@@ -498,6 +530,7 @@ var designTokens = {
498
530
  borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #ccc)',
499
531
  borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
500
532
  borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
533
+ borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, #00b39e)',
501
534
  borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))',
502
535
  borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)',
503
536
  borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #00b39e)',
@@ -506,7 +539,6 @@ var designTokens = {
506
539
  borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #00b39e)',
507
540
  borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #ccc)',
508
541
  borderColorForTableHeader: 'var(--border-color-for-table-header, #ccc)',
509
- borderColorForTableHeaderWhenHovered: 'var(--border-color-for-table-header-when-hovered, #ccc)',
510
542
  borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, #213c45)',
511
543
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
512
544
  borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
@@ -516,6 +548,10 @@ var designTokens = {
516
548
  borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
517
549
  borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
518
550
  borderRadiusForCard: 'var(--border-radius-for-card, 6px)',
551
+ borderWidthForInput: 'var(--border-width-for-input, 1px)',
552
+ borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
553
+ borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
554
+ borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
519
555
  fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
520
556
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
521
557
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
@@ -531,6 +567,7 @@ var designTokens = {
531
567
  heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
532
568
  heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
533
569
  heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
570
+ heightForInput: 'var(--height-for-input, 32px)',
534
571
  placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
535
572
  fontSizeForButton: 'var(--font-size-for-button, 1rem)',
536
573
  fontSizeForInput: 'var(--font-size-for-input, 1rem)',
@@ -570,6 +607,7 @@ var designTokens = {
570
607
  paddingForTableHeaderAsCondensed: 'var(--padding-for-table-header-as-condensed, 8px)',
571
608
  paddingForTableCell: 'var(--padding-for-table-cell, 16px)',
572
609
  paddingForTableCellAsCondensed: 'var(--padding-for-table-cell-as-condensed, 8px)',
610
+ paddingForInput: 'var(--padding-for-input, 8px)',
573
611
  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))',
574
612
  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))',
575
613
  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))',
@@ -577,6 +615,10 @@ var designTokens = {
577
615
  shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)',
578
616
  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))',
579
617
  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))',
618
+ shadowForInput: 'var(--shadow-for-input, none)',
619
+ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 2px var(--color-primary))',
620
+ shadowForInputWhenError: 'var(--shadow-for-input-when-error, none)',
621
+ shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
580
622
  fontSizeM: 'var(--font-size-m, 1rem)',
581
623
  bigButtonHeight: 'var(--big-button-height, 32px)',
582
624
  smallButtonHeight: 'var(--small-button-height, 24px)',
@@ -733,9 +775,14 @@ var useTheme = function useTheme() {
733
775
  // `data-theme` attribute (configured below when calling `observe` function),
734
776
  // we will receive a single element in the list
735
777
  setTheme(mutationList[0].target.dataset.theme);
736
- })); // If we use 'useLayoutEffect' here, we would be trying to read the
778
+ }));
779
+
780
+ var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
781
+ return theme === 'default' ? defaultThemeValue : newThemeValue;
782
+ }; // If we use 'useLayoutEffect' here, we would be trying to read the
737
783
  // data attribute before it gets set from the effect in the ThemeProvider
738
784
 
785
+
739
786
  react.useEffect(function () {
740
787
  var themeDomNode = parentSelectorRef.current();
741
788
  var observer = observerRef.current;
@@ -763,12 +810,14 @@ var useTheme = function useTheme() {
763
810
  };
764
811
  }, []);
765
812
  return {
766
- theme: theme
813
+ theme: theme,
814
+ themedValue: themedValue,
815
+ isNewTheme: theme === 'test'
767
816
  };
768
817
  };
769
818
 
770
819
  // NOTE: This string will be replaced on build time with the package version.
771
- var version = "15.6.0";
820
+ var version = "15.7.0";
772
821
 
773
822
  exports.ThemeProvider = ThemeProvider;
774
823
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.cjs.prod.js CHANGED
@@ -73,6 +73,8 @@ var themes = {
73
73
  borderRadius4: '4px',
74
74
  borderRadius6: '6px',
75
75
  borderRadius20: '20px',
76
+ borderWidth1: '1px',
77
+ borderWidth2: '2px',
76
78
  fontFamily: "'Open Sans', sans-serif",
77
79
  fontSize10: '0.75rem',
78
80
  fontSize20: '0.875rem',
@@ -165,11 +167,13 @@ var themes = {
165
167
  backgroundColorForInput: '#fff',
166
168
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
167
169
  backgroundColorForInputWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
168
- backgroundColorForInputWhenHovered: 'hsl(0, 0%, 90%)',
170
+ backgroundColorForInputWhenHovered: 'unset',
171
+ backgroundColorForInputWhenFocused: 'unset',
169
172
  backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 90%)',
170
173
  backgroundColorForTableHeader: '#213c45',
171
174
  backgroundColorForTag: 'hsl(0, 0%, 95%)',
172
175
  backgroundColorForTagWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
176
+ backgroundColorForSelectInputOptionWhenHovered: 'hsl(0, 0%, 90%)',
173
177
  borderForButtonAsSecondary: 'none',
174
178
  borderForButtonAsSecondaryWhenHovered: 'none',
175
179
  borderForButtonAsSecondaryWhenActive: 'none',
@@ -180,6 +184,7 @@ var themes = {
180
184
  borderColorForInputWhenReadonly: '#ccc',
181
185
  borderColorForInputWhenError: '#e60050',
182
186
  borderColorForInputWhenWarning: '#f16d0e',
187
+ borderColorForInputWhenHovered: '#00b39e',
183
188
  borderColorForTag: 'hsl(0, 0%, 60%)',
184
189
  borderColorForTagWarning: '#f16d0e',
185
190
  borderColorForTagWhenFocused: '#00b39e',
@@ -188,7 +193,6 @@ var themes = {
188
193
  borderColorForButtonAsIconAsPrimary: '#00b39e',
189
194
  borderColorForButtonAsIconWhenDisabled: '#ccc',
190
195
  borderColorForTableHeader: '#ccc',
191
- borderColorForTableHeaderWhenHovered: '#ccc',
192
196
  borderColorForTableHeaderAsBottom: '#213c45',
193
197
  borderRadiusForButtonAsBig: '6px',
194
198
  borderRadiusForButtonAsSmall: '4px',
@@ -198,6 +202,10 @@ var themes = {
198
202
  borderRadiusForInput: '6px',
199
203
  borderRadiusForTag: '2px',
200
204
  borderRadiusForCard: '6px',
205
+ borderWidthForInput: '1px',
206
+ borderWidthForInputWhenWarning: '1px',
207
+ borderWidthForInputWhenError: '1px',
208
+ borderWidthForInputWhenFocused: '1px',
201
209
  fontColorForText: '#1a1a1a',
202
210
  fontColorForInput: '#1a1a1a',
203
211
  fontColorForInputWhenDisabled: 'hsl(0, 0%, 60%)',
@@ -213,6 +221,7 @@ var themes = {
213
221
  heightForButtonAsIconAsBig: '32px',
214
222
  heightForButtonAsIconAsMedium: '24px',
215
223
  heightForButtonAsIconAsSmall: '16px',
224
+ heightForInput: '32px',
216
225
  placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
217
226
  fontSizeForButton: '1rem',
218
227
  fontSizeForInput: '1rem',
@@ -252,6 +261,7 @@ var themes = {
252
261
  paddingForTableHeaderAsCondensed: '8px',
253
262
  paddingForTableCell: '16px',
254
263
  paddingForTableCellAsCondensed: '8px',
264
+ paddingForInput: '8px',
255
265
  shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
256
266
  shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
257
267
  shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
@@ -259,6 +269,10 @@ var themes = {
259
269
  shadowForButtonWhenDisabled: '0 0 0 1px var(--color-neutral) inset',
260
270
  shadowBoxTagWhenHovered: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
261
271
  shadowForCardWhenRaised: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
272
+ shadowForInput: 'none',
273
+ shadowForInputWhenFocused: 'inset 0 0 0 2px var(--color-primary)',
274
+ shadowForInputWhenError: 'none',
275
+ shadowForInputWhenWarning: 'none',
262
276
  fontSizeM: '1rem',
263
277
  bigButtonHeight: '32px',
264
278
  smallButtonHeight: '24px',
@@ -286,17 +300,23 @@ var themes = {
286
300
  backgroundColorForButtonWhenDisabled: 'hsl(0, 0%, 95%)',
287
301
  backgroundColorForTableCellWhenHovered: 'hsl(0, 0%, 95%)',
288
302
  backgroundColorForTableHeader: '#fff',
303
+ backgroundColorForInputWhenHovered: 'hsl(0, 0%, 95%)',
304
+ backgroundColorForInputWhenDisabled: 'hsl(0, 0%, 95%)',
289
305
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
290
306
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
291
307
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
292
308
  borderForCardWhenRaised: '1px solid var(--color-neutral-90)',
309
+ borderColorForInput: '#ccc',
310
+ borderColorForInputWhenDisabled: '#ccc',
311
+ borderColorForInputWhenHovered: '#ccc',
312
+ borderColorForInputWhenReadonly: 'hsl(0, 0%, 90%)',
313
+ borderColorForInputWhenFocused: '#00b39e',
293
314
  borderColorForButtonAsIcon: '#ccc',
294
315
  borderColorForButtonAsIconAsInfo: '#ccc',
295
316
  borderColorForButtonAsIconAsPrimary: '#ccc',
296
317
  borderColorForButtonAsIconWhenDisabled: '#fff',
297
318
  borderColorForCardWhenRaised: 'hsl(0, 0%, 90%)',
298
319
  borderColorForTableHeader: '#fff',
299
- borderColorForTableHeaderWhenHovered: 'hsl(0, 0%, 90%)',
300
320
  borderColorForTableHeaderAsBottom: 'hsl(0, 0%, 90%)',
301
321
  borderRadiusForButtonAsBig: '4px',
302
322
  borderRadiusForButtonAsSmall: '4px',
@@ -304,7 +324,9 @@ var themes = {
304
324
  borderRadiusForButtonAsIconAsMedium: '4px',
305
325
  borderRadiusForButtonAsIconAsSmall: '2px',
306
326
  borderRadiusForCard: '4px',
327
+ borderRadiusForInput: '4px',
307
328
  fontColorForTableHeader: 'hsl(0, 0%, 40%)',
329
+ fontColorForInputWhenReadonly: 'hsl(0, 0%, 40%)',
308
330
  fontSizeForInput: '1rem',
309
331
  fontSizeForTextAsH1: '1.5rem',
310
332
  fontSizeForTextAsH2: '1.5rem',
@@ -339,6 +361,7 @@ var themes = {
339
361
  heightForButtonAsIconAsBig: '40px',
340
362
  heightForButtonAsIconAsMedium: '32px',
341
363
  heightForButtonAsIconAsSmall: '16px',
364
+ heightForInput: '40px',
342
365
  marginForTableHeader: '16px',
343
366
  marginForTableCellAsCondensed: '8px',
344
367
  paddingForStamp: '4px 12px',
@@ -348,12 +371,17 @@ var themes = {
348
371
  paddingForTableHeaderAsCondensed: '24px',
349
372
  paddingForTableCell: 'var(--spacing-30) var(--spacing-40)',
350
373
  paddingForTableCellAsCondensed: 'var(--spacing-20) var(--spacing-40)',
374
+ paddingForInput: '16px',
351
375
  shadowForButton: 'none',
352
376
  shadowForButtonWhenFocused: 'none',
353
377
  shadowForButtonWhenHovered: 'none',
354
378
  shadowForButtonWhenActive: 'none',
355
379
  shadowForButtonWhenDisabled: 'none',
356
- shadowForCardWhenRaised: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
380
+ shadowForCardWhenRaised: 'none',
381
+ shadowForInput: 'none',
382
+ shadowForInputWhenFocused: 'inset 0 0 0 1px var(--color-primary)',
383
+ shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
384
+ shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)'
357
385
  }
358
386
  };
359
387
  var designTokens = {
@@ -391,6 +419,8 @@ var designTokens = {
391
419
  borderRadius4: 'var(--border-radius-4, 4px)',
392
420
  borderRadius6: 'var(--border-radius-6, 6px)',
393
421
  borderRadius20: 'var(--border-radius-20, 20px)',
422
+ borderWidth1: 'var(--border-width-1, 1px)',
423
+ borderWidth2: 'var(--border-width-2, 2px)',
394
424
  fontFamily: "var(--font-family, 'Open Sans', sans-serif)",
395
425
  fontSize10: 'var(--font-size-10, 0.75rem)',
396
426
  fontSize20: 'var(--font-size-20, 0.875rem)',
@@ -483,11 +513,13 @@ var designTokens = {
483
513
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
484
514
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
485
515
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(195, 35.2941176471%, 98%))',
486
- backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, hsl(0, 0%, 90%))',
516
+ backgroundColorForInputWhenHovered: 'var(--background-color-for-input-when-hovered, unset)',
517
+ backgroundColorForInputWhenFocused: 'var(--background-color-for-input-when-focused, unset)',
487
518
  backgroundColorForTableCellWhenHovered: 'var(--background-color-for-table-cell-when-hovered, hsl(0, 0%, 90%))',
488
519
  backgroundColorForTableHeader: 'var(--background-color-for-table-header, #213c45)',
489
520
  backgroundColorForTag: 'var(--background-color-for-tag, hsl(0, 0%, 95%))',
490
521
  backgroundColorForTagWarning: 'var(--background-color-for-tag-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
522
+ backgroundColorForSelectInputOptionWhenHovered: 'var(--background-color-for-select-input-option-when-hovered, hsl(0, 0%, 90%))',
491
523
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
492
524
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
493
525
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
@@ -498,6 +530,7 @@ var designTokens = {
498
530
  borderColorForInputWhenReadonly: 'var(--border-color-for-input-when-readonly, #ccc)',
499
531
  borderColorForInputWhenError: 'var(--border-color-for-input-when-error, #e60050)',
500
532
  borderColorForInputWhenWarning: 'var(--border-color-for-input-when-warning, #f16d0e)',
533
+ borderColorForInputWhenHovered: 'var(--border-color-for-input-when-hovered, #00b39e)',
501
534
  borderColorForTag: 'var(--border-color-for-tag, hsl(0, 0%, 60%))',
502
535
  borderColorForTagWarning: 'var(--border-color-for-tag-warning, #f16d0e)',
503
536
  borderColorForTagWhenFocused: 'var(--border-color-for-tag-when-focused, #00b39e)',
@@ -506,7 +539,6 @@ var designTokens = {
506
539
  borderColorForButtonAsIconAsPrimary: 'var(--border-color-for-button-as-icon-as-primary, #00b39e)',
507
540
  borderColorForButtonAsIconWhenDisabled: 'var(--border-color-for-button-as-icon-when-disabled, #ccc)',
508
541
  borderColorForTableHeader: 'var(--border-color-for-table-header, #ccc)',
509
- borderColorForTableHeaderWhenHovered: 'var(--border-color-for-table-header-when-hovered, #ccc)',
510
542
  borderColorForTableHeaderAsBottom: 'var(--border-color-for-table-header-as-bottom, #213c45)',
511
543
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
512
544
  borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
@@ -516,6 +548,10 @@ var designTokens = {
516
548
  borderRadiusForInput: 'var(--border-radius-for-input, 6px)',
517
549
  borderRadiusForTag: 'var(--border-radius-for-tag, 2px)',
518
550
  borderRadiusForCard: 'var(--border-radius-for-card, 6px)',
551
+ borderWidthForInput: 'var(--border-width-for-input, 1px)',
552
+ borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
553
+ borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
554
+ borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
519
555
  fontColorForText: 'var(--font-color-for-text, #1a1a1a)',
520
556
  fontColorForInput: 'var(--font-color-for-input, #1a1a1a)',
521
557
  fontColorForInputWhenDisabled: 'var(--font-color-for-input-when-disabled, hsl(0, 0%, 60%))',
@@ -531,6 +567,7 @@ var designTokens = {
531
567
  heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
532
568
  heightForButtonAsIconAsMedium: 'var(--height-for-button-as-icon-as-medium, 24px)',
533
569
  heightForButtonAsIconAsSmall: 'var(--height-for-button-as-icon-as-small, 16px)',
570
+ heightForInput: 'var(--height-for-input, 32px)',
534
571
  placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
535
572
  fontSizeForButton: 'var(--font-size-for-button, 1rem)',
536
573
  fontSizeForInput: 'var(--font-size-for-input, 1rem)',
@@ -570,6 +607,7 @@ var designTokens = {
570
607
  paddingForTableHeaderAsCondensed: 'var(--padding-for-table-header-as-condensed, 8px)',
571
608
  paddingForTableCell: 'var(--padding-for-table-cell, 16px)',
572
609
  paddingForTableCellAsCondensed: 'var(--padding-for-table-cell-as-condensed, 8px)',
610
+ paddingForInput: 'var(--padding-for-input, 8px)',
573
611
  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))',
574
612
  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))',
575
613
  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))',
@@ -577,6 +615,10 @@ var designTokens = {
577
615
  shadowForButtonWhenDisabled: 'var(--shadow-for-button-when-disabled, 0 0 0 1px var(--color-neutral) inset)',
578
616
  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))',
579
617
  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))',
618
+ shadowForInput: 'var(--shadow-for-input, none)',
619
+ shadowForInputWhenFocused: 'var(--shadow-for-input-when-focused, inset 0 0 0 2px var(--color-primary))',
620
+ shadowForInputWhenError: 'var(--shadow-for-input-when-error, none)',
621
+ shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
580
622
  fontSizeM: 'var(--font-size-m, 1rem)',
581
623
  bigButtonHeight: 'var(--big-button-height, 32px)',
582
624
  smallButtonHeight: 'var(--small-button-height, 24px)',
@@ -733,9 +775,14 @@ var useTheme = function useTheme() {
733
775
  // `data-theme` attribute (configured below when calling `observe` function),
734
776
  // we will receive a single element in the list
735
777
  setTheme(mutationList[0].target.dataset.theme);
736
- })); // If we use 'useLayoutEffect' here, we would be trying to read the
778
+ }));
779
+
780
+ var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
781
+ return theme === 'default' ? defaultThemeValue : newThemeValue;
782
+ }; // If we use 'useLayoutEffect' here, we would be trying to read the
737
783
  // data attribute before it gets set from the effect in the ThemeProvider
738
784
 
785
+
739
786
  react.useEffect(function () {
740
787
  var themeDomNode = parentSelectorRef.current();
741
788
  var observer = observerRef.current;
@@ -763,12 +810,14 @@ var useTheme = function useTheme() {
763
810
  };
764
811
  }, []);
765
812
  return {
766
- theme: theme
813
+ theme: theme,
814
+ themedValue: themedValue,
815
+ isNewTheme: theme === 'test'
767
816
  };
768
817
  };
769
818
 
770
819
  // NOTE: This string will be replaced on build time with the package version.
771
- var version = "15.6.0";
820
+ var version = "15.7.0";
772
821
 
773
822
  exports.ThemeProvider = ThemeProvider;
774
823
  exports.customProperties = designTokens$1;