@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.
- package/dist/commercetools-uikit-design-system.cjs.dev.js +6 -1
- package/dist/commercetools-uikit-design-system.cjs.prod.js +6 -1
- package/dist/commercetools-uikit-design-system.esm.js +6 -1
- package/dist/declarations/src/design-tokens.d.ts +5 -0
- package/materials/custom-properties.css +6 -0
- package/materials/custom-properties.json +2 -0
- package/materials/custom-properties_default.css +6 -0
- package/materials/custom-properties_recolouring.css +2 -0
- package/materials/internals/definition.yaml +7 -0
- package/package.json +2 -2
|
@@ -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 = "
|
|
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 = "
|
|
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 = "
|
|
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": "
|
|
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": "
|
|
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",
|