@commercetools-uikit/design-system 18.5.0 → 19.1.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.
@@ -113,6 +113,7 @@ const themes = {
113
113
  colorNeutral98: 'hsl(232, 18%, 98%)',
114
114
  colorInfo: '#078cdf',
115
115
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
116
+ colorInfo60: 'hsl(203.05555555555554, 93.9130434783%, 60%)',
116
117
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
117
118
  colorInfo90: '#CEEBFD',
118
119
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
@@ -238,6 +239,7 @@ const themes = {
238
239
  backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
239
240
  backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
240
241
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
242
+ backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
241
243
  backgroundColorForInput: '#fff',
242
244
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
243
245
  backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)',
@@ -400,6 +402,7 @@ const themes = {
400
402
  borderColorForTag: 'hsl(243, 100%, 93%)',
401
403
  backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
402
404
  backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
405
+ backgroundColorForIconButtonWhenDisabled: 'transparent',
403
406
  backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
404
407
  backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
405
408
  backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
@@ -502,6 +505,7 @@ const designTokens = {
502
505
  colorNeutral98: 'var(--color-neutral-98, hsl(232, 18%, 98%))',
503
506
  colorInfo: 'var(--color-info, #078cdf)',
504
507
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
508
+ colorInfo60: 'var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))',
505
509
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
506
510
  colorInfo90: 'var(--color-info-90, #CEEBFD)',
507
511
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
@@ -627,6 +631,7 @@ const designTokens = {
627
631
  backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))',
628
632
  backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
629
633
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
634
+ backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
630
635
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
631
636
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
632
637
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))',
@@ -876,7 +881,7 @@ const withThemeContext = WrappedComponent => {
876
881
  };
877
882
 
878
883
  // NOTE: This string will be replaced on build time with the package version.
879
- var version = "18.5.0";
884
+ var version = "19.1.0";
880
885
 
881
886
  exports.ThemeProvider = ThemeProvider;
882
887
  exports.customProperties = designTokens$1;
@@ -113,6 +113,7 @@ const themes = {
113
113
  colorNeutral98: 'hsl(232, 18%, 98%)',
114
114
  colorInfo: '#078cdf',
115
115
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
116
+ colorInfo60: 'hsl(203.05555555555554, 93.9130434783%, 60%)',
116
117
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
117
118
  colorInfo90: '#CEEBFD',
118
119
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
@@ -238,6 +239,7 @@ const themes = {
238
239
  backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
239
240
  backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
240
241
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
242
+ backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
241
243
  backgroundColorForInput: '#fff',
242
244
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
243
245
  backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)',
@@ -400,6 +402,7 @@ const themes = {
400
402
  borderColorForTag: 'hsl(243, 100%, 93%)',
401
403
  backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
402
404
  backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
405
+ backgroundColorForIconButtonWhenDisabled: 'transparent',
403
406
  backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
404
407
  backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
405
408
  backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
@@ -502,6 +505,7 @@ const designTokens = {
502
505
  colorNeutral98: 'var(--color-neutral-98, hsl(232, 18%, 98%))',
503
506
  colorInfo: 'var(--color-info, #078cdf)',
504
507
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
508
+ colorInfo60: 'var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))',
505
509
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
506
510
  colorInfo90: 'var(--color-info-90, #CEEBFD)',
507
511
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
@@ -627,6 +631,7 @@ const designTokens = {
627
631
  backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))',
628
632
  backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
629
633
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
634
+ backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
630
635
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
631
636
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
632
637
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))',
@@ -876,7 +881,7 @@ const withThemeContext = WrappedComponent => {
876
881
  };
877
882
 
878
883
  // NOTE: This string will be replaced on build time with the package version.
879
- var version = "18.5.0";
884
+ var version = "19.1.0";
880
885
 
881
886
  exports.ThemeProvider = ThemeProvider;
882
887
  exports.customProperties = designTokens$1;
@@ -88,6 +88,7 @@ const themes = {
88
88
  colorNeutral98: 'hsl(232, 18%, 98%)',
89
89
  colorInfo: '#078cdf',
90
90
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
91
+ colorInfo60: 'hsl(203.05555555555554, 93.9130434783%, 60%)',
91
92
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
92
93
  colorInfo90: '#CEEBFD',
93
94
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
@@ -213,6 +214,7 @@ const themes = {
213
214
  backgroundColorForButtonWhenActive: 'hsl(232, 18%, 95%)',
214
215
  backgroundColorForButtonWhenHovered: 'hsl(232, 18%, 98%)',
215
216
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
217
+ backgroundColorForIconButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
216
218
  backgroundColorForInput: '#fff',
217
219
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
218
220
  backgroundColorForInputWhenDisabled: 'hsl(232, 18%, 95%)',
@@ -375,6 +377,7 @@ const themes = {
375
377
  borderColorForTag: 'hsl(243, 100%, 93%)',
376
378
  backgroundColorForButtonWhenActive: 'hsl(243, 100%, 93%)',
377
379
  backgroundColorForButtonWhenHovered: 'hsl(244, 100%, 97%)',
380
+ backgroundColorForIconButtonWhenDisabled: 'transparent',
378
381
  backgroundColorForButtonAsPrimary: 'hsl(240, 64%, 58%)',
379
382
  backgroundColorForButtonAsPrimaryWhenHovered: 'hsl(240, 100%, 67%)',
380
383
  backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: 'hsl(240, 100%, 67%)',
@@ -477,6 +480,7 @@ const designTokens = {
477
480
  colorNeutral98: 'var(--color-neutral-98, hsl(232, 18%, 98%))',
478
481
  colorInfo: 'var(--color-info, #078cdf)',
479
482
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
483
+ colorInfo60: 'var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))',
480
484
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
481
485
  colorInfo90: 'var(--color-info-90, #CEEBFD)',
482
486
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
@@ -602,6 +606,7 @@ const designTokens = {
602
606
  backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, hsl(232, 18%, 95%))',
603
607
  backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))',
604
608
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
609
+ backgroundColorForIconButtonWhenDisabled: 'var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
605
610
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
606
611
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
607
612
  backgroundColorForInputWhenDisabled: 'var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))',
@@ -851,6 +856,6 @@ const withThemeContext = WrappedComponent => {
851
856
  };
852
857
 
853
858
  // NOTE: This string will be replaced on build time with the package version.
854
- var version = "18.5.0";
859
+ var version = "19.1.0";
855
860
 
856
861
  export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };
@@ -59,6 +59,7 @@ export declare const themes: {
59
59
  readonly colorNeutral98: "hsl(232, 18%, 98%)";
60
60
  readonly colorInfo: "#078cdf";
61
61
  readonly colorInfo40: "hsl(203.05555555555554, 93.9130434783%, 40%)";
62
+ readonly colorInfo60: "hsl(203.05555555555554, 93.9130434783%, 60%)";
62
63
  readonly colorInfo85: "hsl(203.05555555555554, 93.9130434783%, 85%)";
63
64
  readonly colorInfo90: "#CEEBFD";
64
65
  readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)";
@@ -184,6 +185,7 @@ export declare const themes: {
184
185
  readonly backgroundColorForButtonWhenActive: "hsl(232, 18%, 95%)";
185
186
  readonly backgroundColorForButtonWhenHovered: "hsl(232, 18%, 98%)";
186
187
  readonly backgroundColorForButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)";
188
+ readonly backgroundColorForIconButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)";
187
189
  readonly backgroundColorForInput: "#fff";
188
190
  readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)";
189
191
  readonly backgroundColorForInputWhenDisabled: "hsl(232, 18%, 95%)";
@@ -346,6 +348,7 @@ export declare const themes: {
346
348
  readonly borderColorForTag: "hsl(243, 100%, 93%)";
347
349
  readonly backgroundColorForButtonWhenActive: "hsl(243, 100%, 93%)";
348
350
  readonly backgroundColorForButtonWhenHovered: "hsl(244, 100%, 97%)";
351
+ readonly backgroundColorForIconButtonWhenDisabled: "transparent";
349
352
  readonly backgroundColorForButtonAsPrimary: "hsl(240, 64%, 58%)";
350
353
  readonly backgroundColorForButtonAsPrimaryWhenHovered: "hsl(240, 100%, 67%)";
351
354
  readonly backgroundColorForButtonAsPrimaryAsDefaultWhenHovered: "hsl(240, 100%, 67%)";
@@ -448,6 +451,7 @@ declare const designTokens: {
448
451
  readonly colorNeutral98: "var(--color-neutral-98, hsl(232, 18%, 98%))";
449
452
  readonly colorInfo: "var(--color-info, #078cdf)";
450
453
  readonly colorInfo40: "var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))";
454
+ readonly colorInfo60: "var(--color-info-60, hsl(203.05555555555554, 93.9130434783%, 60%))";
451
455
  readonly colorInfo85: "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))";
452
456
  readonly colorInfo90: "var(--color-info-90, #CEEBFD)";
453
457
  readonly colorInfo95: "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))";
@@ -573,6 +577,7 @@ declare const designTokens: {
573
577
  readonly backgroundColorForButtonWhenActive: "var(--background-color-for-button-when-active, hsl(232, 18%, 95%))";
574
578
  readonly backgroundColorForButtonWhenHovered: "var(--background-color-for-button-when-hovered, hsl(232, 18%, 98%))";
575
579
  readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))";
580
+ readonly backgroundColorForIconButtonWhenDisabled: "var(--background-color-for-icon-button-when-disabled, hsl(195, 35.2941176471%, 95%))";
576
581
  readonly backgroundColorForInput: "var(--background-color-for-input, #fff)";
577
582
  readonly backgroundColorForInputWhenSelected: "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))";
578
583
  readonly backgroundColorForInputWhenDisabled: "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))";
@@ -65,6 +65,7 @@
65
65
  --color-neutral-98: hsl(232, 18%, 98%);
66
66
  --color-info: #078cdf;
67
67
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
68
+ --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
68
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
69
70
  --color-info-90: #ceebfd;
70
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
@@ -195,6 +196,11 @@
195
196
  --background-color-for-button-when-active: hsl(232, 18%, 95%);
196
197
  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
197
198
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-icon-button-when-disabled: hsl(
200
+ 195,
201
+ 35.2941176471%,
202
+ 95%
203
+ );
198
204
  --background-color-for-input: #fff;
199
205
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
200
206
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
@@ -58,6 +58,7 @@
58
58
  "--color-neutral-98": "hsl(232, 18%, 98%)",
59
59
  "--color-info": "#078cdf",
60
60
  "--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
61
+ "--color-info-60": "hsl(203.05555555555554, 93.9130434783%, 60%)",
61
62
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
62
63
  "--color-info-90": "#CEEBFD",
63
64
  "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
@@ -183,6 +184,7 @@
183
184
  "--background-color-for-button-when-active": "hsl(232, 18%, 95%)",
184
185
  "--background-color-for-button-when-hovered": "hsl(232, 18%, 98%)",
185
186
  "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
187
+ "--background-color-for-icon-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
186
188
  "--background-color-for-input": "#fff",
187
189
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
188
190
  "--background-color-for-input-when-disabled": "hsl(232, 18%, 95%)",
@@ -65,6 +65,7 @@
65
65
  --color-neutral-98: hsl(232, 18%, 98%);
66
66
  --color-info: #078cdf;
67
67
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
68
+ --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
68
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
69
70
  --color-info-90: #ceebfd;
70
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
@@ -195,6 +196,11 @@
195
196
  --background-color-for-button-when-active: hsl(232, 18%, 95%);
196
197
  --background-color-for-button-when-hovered: hsl(232, 18%, 98%);
197
198
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-icon-button-when-disabled: hsl(
200
+ 195,
201
+ 35.2941176471%,
202
+ 95%
203
+ );
198
204
  --background-color-for-input: #fff;
199
205
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
200
206
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
@@ -65,6 +65,7 @@
65
65
  --color-neutral-98: hsl(232, 18%, 98%);
66
66
  --color-info: #078cdf;
67
67
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
68
+ --color-info-60: hsl(203.05555555555554, 93.9130434783%, 60%);
68
69
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
69
70
  --color-info-90: #ceebfd;
70
71
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
@@ -195,6 +196,7 @@
195
196
  --background-color-for-button-when-active: hsl(243, 100%, 93%);
196
197
  --background-color-for-button-when-hovered: hsl(244, 100%, 97%);
197
198
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
199
+ --background-color-for-icon-button-when-disabled: transparent;
198
200
  --background-color-for-input: #fff;
199
201
  --background-color-for-input-when-selected: hsl(244, 100%, 97%);
200
202
  --background-color-for-input-when-disabled: hsl(232, 18%, 95%);
@@ -95,6 +95,7 @@ choiceGroupsByTheme:
95
95
  color-neutral-98: 'hsl(232, 18%, 98%)'
96
96
  color-info: '#078cdf'
97
97
  color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
98
+ color-info-60: 'hsl(203.05555555555554, 93.9130434783%, 60%)'
98
99
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
99
100
  color-info-90: '#CEEBFD'
100
101
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
@@ -396,6 +397,8 @@ variants:
396
397
  componentGroups:
397
398
  button:
398
399
  description: 'Button elements'
400
+ icon-button:
401
+ description: 'Icon button elements'
399
402
  input:
400
403
  description: 'Input elements'
401
404
  localized-input-label:
@@ -444,6 +447,8 @@ decisionGroupsByTheme:
444
447
  choice: color-neutral-98
445
448
  background-color-for-button-when-disabled:
446
449
  choice: color-accent-95
450
+ background-color-for-icon-button-when-disabled:
451
+ choice: color-accent-95
447
452
  background-color-for-input:
448
453
  choice: color-surface
449
454
  background-color-for-input-when-selected:
@@ -702,6 +707,8 @@ decisionGroupsByTheme:
702
707
  choice: color-primary-90
703
708
  background-color-for-button-when-hovered:
704
709
  choice: color-primary-95
710
+ background-color-for-icon-button-when-disabled:
711
+ choice: 'color-transparent'
705
712
  background-color-for-button-as-primary:
706
713
  choice: color-primary
707
714
  background-color-for-button-as-primary-when-hovered:
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/design-system",
3
3
  "description": "Core package of the commercetools design system.",
4
- "version": "18.5.0",
4
+ "version": "19.1.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -25,7 +25,7 @@
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.20.13",
27
27
  "@babel/runtime-corejs3": "^7.20.13",
28
- "@commercetools-uikit/hooks": "18.5.0",
28
+ "@commercetools-uikit/hooks": "19.1.0",
29
29
  "@emotion/react": "^11.10.5",
30
30
  "lodash": "4.17.21",
31
31
  "prop-types": "15.8.1",