@commercetools-uikit/design-system 16.5.0 → 16.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +13 -1
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +13 -1
  3. package/dist/commercetools-uikit-design-system.esm.js +13 -1
  4. package/dist/declarations/src/design-tokens.d.ts +12 -0
  5. package/materials/custom-properties.css +18 -0
  6. package/materials/custom-properties.json +6 -0
  7. package/materials/internals/definition.yaml +14 -0
  8. package/package.json +3 -3
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -55,6 +55,7 @@ const themes = {
55
55
  default: {
56
56
  colorPrimary: '#00b39e',
57
57
  colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
58
+ colorPrimary30: 'hsl(172.9608938547486, 100%, 30%)',
58
59
  colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
59
60
  colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
60
61
  colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
@@ -79,6 +80,7 @@ const themes = {
79
80
  colorInfo: '#078cdf',
80
81
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
81
82
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
83
+ colorInfo90: '#CEEBFD',
82
84
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
83
85
  colorWarning: '#f16d0e',
84
86
  colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
@@ -244,6 +246,9 @@ const themes = {
244
246
  backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
245
247
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
246
248
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
249
+ backgroundColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
250
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: '#CEEBFD',
251
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
247
252
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
248
253
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
249
254
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -299,6 +304,7 @@ const themes = {
299
304
  borderColorForRadioInputWhenChecked: '#00b39e',
300
305
  borderColorForRadioInputWhenFocused: 'hsl(0, 0%, 60%)',
301
306
  borderColorForPrimaryActionDropdownMenu: '#fff',
307
+ borderColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
302
308
  borderRadiusForButtonAsBig: '4px',
303
309
  borderRadiusForButtonAsMedium: '4px',
304
310
  borderRadiusForButtonAsIconAsBig: '4px',
@@ -535,6 +541,7 @@ const themes = {
535
541
  const designTokens = {
536
542
  colorPrimary: 'var(--color-primary, #00b39e)',
537
543
  colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
544
+ colorPrimary30: 'var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))',
538
545
  colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
539
546
  colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
540
547
  colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',
@@ -559,6 +566,7 @@ const designTokens = {
559
566
  colorInfo: 'var(--color-info, #078cdf)',
560
567
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
561
568
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
569
+ colorInfo90: 'var(--color-info-90, #CEEBFD)',
562
570
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
563
571
  colorWarning: 'var(--color-warning, #f16d0e)',
564
572
  colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
@@ -724,6 +732,9 @@ const designTokens = {
724
732
  backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))',
725
733
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))',
726
734
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))',
735
+ backgroundColorForButtonAsSecondaryWhenInfo: 'var(--background-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
736
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: 'var(--background-color-for-button-as-secondary-when-info-and-hovered, #CEEBFD)',
737
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'var(--background-color-for-button-as-secondary-when-info-and-active, hsl(203.05555555555554, 93.9130434783%, 85%))',
727
738
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))',
728
739
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))',
729
740
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))',
@@ -779,6 +790,7 @@ const designTokens = {
779
790
  borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #00b39e)',
780
791
  borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))',
781
792
  borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #fff)',
793
+ borderColorForButtonAsSecondaryWhenInfo: 'var(--border-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))',
782
794
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
783
795
  borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
784
796
  borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 4px)',
@@ -1140,7 +1152,7 @@ const withThemeContext = WrappedComponent => {
1140
1152
  };
1141
1153
 
1142
1154
  // NOTE: This string will be replaced on build time with the package version.
1143
- var version = "16.5.0";
1155
+ var version = "16.6.1";
1144
1156
 
1145
1157
  exports.ThemeProvider = ThemeProvider;
1146
1158
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.cjs.prod.js CHANGED
@@ -55,6 +55,7 @@ const themes = {
55
55
  default: {
56
56
  colorPrimary: '#00b39e',
57
57
  colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
58
+ colorPrimary30: 'hsl(172.9608938547486, 100%, 30%)',
58
59
  colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
59
60
  colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
60
61
  colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
@@ -79,6 +80,7 @@ const themes = {
79
80
  colorInfo: '#078cdf',
80
81
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
81
82
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
83
+ colorInfo90: '#CEEBFD',
82
84
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
83
85
  colorWarning: '#f16d0e',
84
86
  colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
@@ -244,6 +246,9 @@ const themes = {
244
246
  backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
245
247
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
246
248
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
249
+ backgroundColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
250
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: '#CEEBFD',
251
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
247
252
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
248
253
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
249
254
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -299,6 +304,7 @@ const themes = {
299
304
  borderColorForRadioInputWhenChecked: '#00b39e',
300
305
  borderColorForRadioInputWhenFocused: 'hsl(0, 0%, 60%)',
301
306
  borderColorForPrimaryActionDropdownMenu: '#fff',
307
+ borderColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
302
308
  borderRadiusForButtonAsBig: '4px',
303
309
  borderRadiusForButtonAsMedium: '4px',
304
310
  borderRadiusForButtonAsIconAsBig: '4px',
@@ -535,6 +541,7 @@ const themes = {
535
541
  const designTokens = {
536
542
  colorPrimary: 'var(--color-primary, #00b39e)',
537
543
  colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
544
+ colorPrimary30: 'var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))',
538
545
  colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
539
546
  colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
540
547
  colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',
@@ -559,6 +566,7 @@ const designTokens = {
559
566
  colorInfo: 'var(--color-info, #078cdf)',
560
567
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
561
568
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
569
+ colorInfo90: 'var(--color-info-90, #CEEBFD)',
562
570
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
563
571
  colorWarning: 'var(--color-warning, #f16d0e)',
564
572
  colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
@@ -724,6 +732,9 @@ const designTokens = {
724
732
  backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))',
725
733
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))',
726
734
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))',
735
+ backgroundColorForButtonAsSecondaryWhenInfo: 'var(--background-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
736
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: 'var(--background-color-for-button-as-secondary-when-info-and-hovered, #CEEBFD)',
737
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'var(--background-color-for-button-as-secondary-when-info-and-active, hsl(203.05555555555554, 93.9130434783%, 85%))',
727
738
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))',
728
739
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))',
729
740
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))',
@@ -779,6 +790,7 @@ const designTokens = {
779
790
  borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #00b39e)',
780
791
  borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))',
781
792
  borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #fff)',
793
+ borderColorForButtonAsSecondaryWhenInfo: 'var(--border-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))',
782
794
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
783
795
  borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
784
796
  borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 4px)',
@@ -1140,7 +1152,7 @@ const withThemeContext = WrappedComponent => {
1140
1152
  };
1141
1153
 
1142
1154
  // NOTE: This string will be replaced on build time with the package version.
1143
- var version = "16.5.0";
1155
+ var version = "16.6.1";
1144
1156
 
1145
1157
  exports.ThemeProvider = ThemeProvider;
1146
1158
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.esm.js CHANGED
@@ -30,6 +30,7 @@ const themes = {
30
30
  default: {
31
31
  colorPrimary: '#00b39e',
32
32
  colorPrimary25: 'hsl(172.9608938547486, 100%, 25%)',
33
+ colorPrimary30: 'hsl(172.9608938547486, 100%, 30%)',
33
34
  colorPrimary40: 'hsl(172.9608938547486, 100%, 40%)',
34
35
  colorPrimary85: 'hsl(172.9608938547486, 100%, 85%)',
35
36
  colorPrimary95: 'hsl(172.9608938547486, 100%, 95%)',
@@ -54,6 +55,7 @@ const themes = {
54
55
  colorInfo: '#078cdf',
55
56
  colorInfo40: 'hsl(203.05555555555554, 93.9130434783%, 40%)',
56
57
  colorInfo85: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
58
+ colorInfo90: '#CEEBFD',
57
59
  colorInfo95: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
58
60
  colorWarning: '#f16d0e',
59
61
  colorWarning25: 'hsl(25.110132158590307, 89.0196078431%, 25%)',
@@ -219,6 +221,9 @@ const themes = {
219
221
  backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
220
222
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
221
223
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
224
+ backgroundColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
225
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: '#CEEBFD',
226
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
222
227
  borderForButtonAsSecondary: '1px solid var(--color-neutral)',
223
228
  borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
224
229
  borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -274,6 +279,7 @@ const themes = {
274
279
  borderColorForRadioInputWhenChecked: '#00b39e',
275
280
  borderColorForRadioInputWhenFocused: 'hsl(0, 0%, 60%)',
276
281
  borderColorForPrimaryActionDropdownMenu: '#fff',
282
+ borderColorForButtonAsSecondaryWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
277
283
  borderRadiusForButtonAsBig: '4px',
278
284
  borderRadiusForButtonAsMedium: '4px',
279
285
  borderRadiusForButtonAsIconAsBig: '4px',
@@ -510,6 +516,7 @@ const themes = {
510
516
  const designTokens = {
511
517
  colorPrimary: 'var(--color-primary, #00b39e)',
512
518
  colorPrimary25: 'var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))',
519
+ colorPrimary30: 'var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))',
513
520
  colorPrimary40: 'var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))',
514
521
  colorPrimary85: 'var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))',
515
522
  colorPrimary95: 'var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))',
@@ -534,6 +541,7 @@ const designTokens = {
534
541
  colorInfo: 'var(--color-info, #078cdf)',
535
542
  colorInfo40: 'var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))',
536
543
  colorInfo85: 'var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))',
544
+ colorInfo90: 'var(--color-info-90, #CEEBFD)',
537
545
  colorInfo95: 'var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))',
538
546
  colorWarning: 'var(--color-warning, #f16d0e)',
539
547
  colorWarning25: 'var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))',
@@ -699,6 +707,9 @@ const designTokens = {
699
707
  backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))',
700
708
  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))',
701
709
  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))',
710
+ backgroundColorForButtonAsSecondaryWhenInfo: 'var(--background-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
711
+ backgroundColorForButtonAsSecondaryWhenInfoAndHovered: 'var(--background-color-for-button-as-secondary-when-info-and-hovered, #CEEBFD)',
712
+ backgroundColorForButtonAsSecondaryWhenInfoAndActive: 'var(--background-color-for-button-as-secondary-when-info-and-active, hsl(203.05555555555554, 93.9130434783%, 85%))',
702
713
  borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, 1px solid var(--color-neutral))',
703
714
  borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))',
704
715
  borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))',
@@ -754,6 +765,7 @@ const designTokens = {
754
765
  borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #00b39e)',
755
766
  borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))',
756
767
  borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #fff)',
768
+ borderColorForButtonAsSecondaryWhenInfo: 'var(--border-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))',
757
769
  borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 4px)',
758
770
  borderRadiusForButtonAsMedium: 'var(--border-radius-for-button-as-medium, 4px)',
759
771
  borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 4px)',
@@ -1115,6 +1127,6 @@ const withThemeContext = WrappedComponent => {
1115
1127
  };
1116
1128
 
1117
1129
  // NOTE: This string will be replaced on build time with the package version.
1118
- var version = "16.5.0";
1130
+ var version = "16.6.1";
1119
1131
 
1120
1132
  export { ThemeProvider, designTokens$1 as customProperties, designTokens$1 as designTokens, themes, transformTokensToCssVarsReferences, transformTokensToCssVarsValues, useTheme, version, withThemeContext };
package/dist/declarations/src/design-tokens.d.ts CHANGED
@@ -2,6 +2,7 @@ export declare const themes: {
2
2
  readonly default: {
3
3
  readonly colorPrimary: "#00b39e";
4
4
  readonly colorPrimary25: "hsl(172.9608938547486, 100%, 25%)";
5
+ readonly colorPrimary30: "hsl(172.9608938547486, 100%, 30%)";
5
6
  readonly colorPrimary40: "hsl(172.9608938547486, 100%, 40%)";
6
7
  readonly colorPrimary85: "hsl(172.9608938547486, 100%, 85%)";
7
8
  readonly colorPrimary95: "hsl(172.9608938547486, 100%, 95%)";
@@ -26,6 +27,7 @@ export declare const themes: {
26
27
  readonly colorInfo: "#078cdf";
27
28
  readonly colorInfo40: "hsl(203.05555555555554, 93.9130434783%, 40%)";
28
29
  readonly colorInfo85: "hsl(203.05555555555554, 93.9130434783%, 85%)";
30
+ readonly colorInfo90: "#CEEBFD";
29
31
  readonly colorInfo95: "hsl(203.05555555555554, 93.9130434783%, 95%)";
30
32
  readonly colorWarning: "#f16d0e";
31
33
  readonly colorWarning25: "hsl(25.110132158590307, 89.0196078431%, 25%)";
@@ -191,6 +193,9 @@ export declare const themes: {
191
193
  readonly backgroundColorForToggleInputThumbWhenChecked: "hsl(172.9608938547486, 100%, 25%)";
192
194
  readonly backgroundColorForToggleInputTrackWhenCheckedAndDisabled: "hsl(195, 35.2941176471%, 90%)";
193
195
  readonly backgroundColorForToggleInputThumbWhenCheckedAndDisabled: "hsl(195, 35.2941176471%, 60%)";
196
+ readonly backgroundColorForButtonAsSecondaryWhenInfo: "hsl(203.05555555555554, 93.9130434783%, 95%)";
197
+ readonly backgroundColorForButtonAsSecondaryWhenInfoAndHovered: "#CEEBFD";
198
+ readonly backgroundColorForButtonAsSecondaryWhenInfoAndActive: "hsl(203.05555555555554, 93.9130434783%, 85%)";
194
199
  readonly borderForButtonAsSecondary: "1px solid var(--color-neutral)";
195
200
  readonly borderForButtonAsSecondaryWhenHovered: "1px solid var(--color-neutral)";
196
201
  readonly borderForButtonAsSecondaryWhenActive: "1px solid var(--color-neutral)";
@@ -246,6 +251,7 @@ export declare const themes: {
246
251
  readonly borderColorForRadioInputWhenChecked: "#00b39e";
247
252
  readonly borderColorForRadioInputWhenFocused: "hsl(0, 0%, 60%)";
248
253
  readonly borderColorForPrimaryActionDropdownMenu: "#fff";
254
+ readonly borderColorForButtonAsSecondaryWhenInfo: "hsl(203.05555555555554, 93.9130434783%, 85%)";
249
255
  readonly borderRadiusForButtonAsBig: "4px";
250
256
  readonly borderRadiusForButtonAsMedium: "4px";
251
257
  readonly borderRadiusForButtonAsIconAsBig: "4px";
@@ -482,6 +488,7 @@ export declare const themes: {
482
488
  declare const designTokens: {
483
489
  readonly colorPrimary: "var(--color-primary, #00b39e)";
484
490
  readonly colorPrimary25: "var(--color-primary-25, hsl(172.9608938547486, 100%, 25%))";
491
+ readonly colorPrimary30: "var(--color-primary-30, hsl(172.9608938547486, 100%, 30%))";
485
492
  readonly colorPrimary40: "var(--color-primary-40, hsl(172.9608938547486, 100%, 40%))";
486
493
  readonly colorPrimary85: "var(--color-primary-85, hsl(172.9608938547486, 100%, 85%))";
487
494
  readonly colorPrimary95: "var(--color-primary-95, hsl(172.9608938547486, 100%, 95%))";
@@ -506,6 +513,7 @@ declare const designTokens: {
506
513
  readonly colorInfo: "var(--color-info, #078cdf)";
507
514
  readonly colorInfo40: "var(--color-info-40, hsl(203.05555555555554, 93.9130434783%, 40%))";
508
515
  readonly colorInfo85: "var(--color-info-85, hsl(203.05555555555554, 93.9130434783%, 85%))";
516
+ readonly colorInfo90: "var(--color-info-90, #CEEBFD)";
509
517
  readonly colorInfo95: "var(--color-info-95, hsl(203.05555555555554, 93.9130434783%, 95%))";
510
518
  readonly colorWarning: "var(--color-warning, #f16d0e)";
511
519
  readonly colorWarning25: "var(--color-warning-25, hsl(25.110132158590307, 89.0196078431%, 25%))";
@@ -671,6 +679,9 @@ declare const designTokens: {
671
679
  readonly backgroundColorForToggleInputThumbWhenChecked: "var(--background-color-for-toggle-input-thumb-when-checked, hsl(172.9608938547486, 100%, 25%))";
672
680
  readonly backgroundColorForToggleInputTrackWhenCheckedAndDisabled: "var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(195, 35.2941176471%, 90%))";
673
681
  readonly backgroundColorForToggleInputThumbWhenCheckedAndDisabled: "var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, hsl(195, 35.2941176471%, 60%))";
682
+ readonly backgroundColorForButtonAsSecondaryWhenInfo: "var(--background-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))";
683
+ readonly backgroundColorForButtonAsSecondaryWhenInfoAndHovered: "var(--background-color-for-button-as-secondary-when-info-and-hovered, #CEEBFD)";
684
+ readonly backgroundColorForButtonAsSecondaryWhenInfoAndActive: "var(--background-color-for-button-as-secondary-when-info-and-active, hsl(203.05555555555554, 93.9130434783%, 85%))";
674
685
  readonly borderForButtonAsSecondary: "var(--border-for-button-as-secondary, 1px solid var(--color-neutral))";
675
686
  readonly borderForButtonAsSecondaryWhenHovered: "var(--border-for-button-as-secondary-when-hovered, 1px solid var(--color-neutral))";
676
687
  readonly borderForButtonAsSecondaryWhenActive: "var(--border-for-button-as-secondary-when-active, 1px solid var(--color-neutral))";
@@ -726,6 +737,7 @@ declare const designTokens: {
726
737
  readonly borderColorForRadioInputWhenChecked: "var(--border-color-for-radio-input-when-checked, #00b39e)";
727
738
  readonly borderColorForRadioInputWhenFocused: "var(--border-color-for-radio-input-when-focused, hsl(0, 0%, 60%))";
728
739
  readonly borderColorForPrimaryActionDropdownMenu: "var(--border-color-for-primary-action-dropdown-menu, #fff)";
740
+ readonly borderColorForButtonAsSecondaryWhenInfo: "var(--border-color-for-button-as-secondary-when-info, hsl(203.05555555555554, 93.9130434783%, 85%))";
729
741
  readonly borderRadiusForButtonAsBig: "var(--border-radius-for-button-as-big, 4px)";
730
742
  readonly borderRadiusForButtonAsMedium: "var(--border-radius-for-button-as-medium, 4px)";
731
743
  readonly borderRadiusForButtonAsIconAsBig: "var(--border-radius-for-button-as-icon-as-big, 4px)";
package/materials/custom-properties.css CHANGED
@@ -8,6 +8,7 @@
8
8
  :root {
9
9
  --color-primary: #00b39e;
10
10
  --color-primary-25: hsl(172.9608938547486, 100%, 25%);
11
+ --color-primary-30: hsl(172.9608938547486, 100%, 30%);
11
12
  --color-primary-40: hsl(172.9608938547486, 100%, 40%);
12
13
  --color-primary-85: hsl(172.9608938547486, 100%, 85%);
13
14
  --color-primary-95: hsl(172.9608938547486, 100%, 95%);
@@ -32,6 +33,7 @@
32
33
  --color-info: #078cdf;
33
34
  --color-info-40: hsl(203.05555555555554, 93.9130434783%, 40%);
34
35
  --color-info-85: hsl(203.05555555555554, 93.9130434783%, 85%);
36
+ --color-info-90: #ceebfd;
35
37
  --color-info-95: hsl(203.05555555555554, 93.9130434783%, 95%);
36
38
  --color-warning: #f16d0e;
37
39
  --color-warning-25: hsl(25.110132158590307, 89.0196078431%, 25%);
@@ -250,6 +252,17 @@
250
252
  35.2941176471%,
251
253
  60%
252
254
  );
255
+ --background-color-for-button-as-secondary-when-info: hsl(
256
+ 203.05555555555554,
257
+ 93.9130434783%,
258
+ 95%
259
+ );
260
+ --background-color-for-button-as-secondary-when-info-and-hovered: #ceebfd;
261
+ --background-color-for-button-as-secondary-when-info-and-active: hsl(
262
+ 203.05555555555554,
263
+ 93.9130434783%,
264
+ 85%
265
+ );
253
266
  --border-for-button-as-secondary: 1px solid var(--color-neutral);
254
267
  --border-for-button-as-secondary-when-hovered: 1px solid var(--color-neutral);
255
268
  --border-for-button-as-secondary-when-active: 1px solid var(--color-neutral);
@@ -329,6 +342,11 @@
329
342
  --border-color-for-radio-input-when-checked: #00b39e;
330
343
  --border-color-for-radio-input-when-focused: hsl(0, 0%, 60%);
331
344
  --border-color-for-primary-action-dropdown-menu: #fff;
345
+ --border-color-for-button-as-secondary-when-info: hsl(
346
+ 203.05555555555554,
347
+ 93.9130434783%,
348
+ 85%
349
+ );
332
350
  --border-radius-for-button-as-big: 4px;
333
351
  --border-radius-for-button-as-medium: 4px;
334
352
  --border-radius-for-button-as-icon-as-big: 4px;
package/materials/custom-properties.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "--color-primary": "#00b39e",
3
3
  "--color-primary-25": "hsl(172.9608938547486, 100%, 25%)",
4
+ "--color-primary-30": "hsl(172.9608938547486, 100%, 30%)",
4
5
  "--color-primary-40": "hsl(172.9608938547486, 100%, 40%)",
5
6
  "--color-primary-85": "hsl(172.9608938547486, 100%, 85%)",
6
7
  "--color-primary-95": "hsl(172.9608938547486, 100%, 95%)",
@@ -25,6 +26,7 @@
25
26
  "--color-info": "#078cdf",
26
27
  "--color-info-40": "hsl(203.05555555555554, 93.9130434783%, 40%)",
27
28
  "--color-info-85": "hsl(203.05555555555554, 93.9130434783%, 85%)",
29
+ "--color-info-90": "#CEEBFD",
28
30
  "--color-info-95": "hsl(203.05555555555554, 93.9130434783%, 95%)",
29
31
  "--color-warning": "#f16d0e",
30
32
  "--color-warning-25": "hsl(25.110132158590307, 89.0196078431%, 25%)",
@@ -190,6 +192,9 @@
190
192
  "--background-color-for-toggle-input-thumb-when-checked": "hsl(172.9608938547486, 100%, 25%)",
191
193
  "--background-color-for-toggle-input-track-when-checked-and-disabled": "hsl(195, 35.2941176471%, 90%)",
192
194
  "--background-color-for-toggle-input-thumb-when-checked-and-disabled": "hsl(195, 35.2941176471%, 60%)",
195
+ "--background-color-for-button-as-secondary-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
196
+ "--background-color-for-button-as-secondary-when-info-and-hovered": "#CEEBFD",
197
+ "--background-color-for-button-as-secondary-when-info-and-active": "hsl(203.05555555555554, 93.9130434783%, 85%)",
193
198
  "--border-for-button-as-secondary": "1px solid var(--color-neutral)",
194
199
  "--border-for-button-as-secondary-when-hovered": "1px solid var(--color-neutral)",
195
200
  "--border-for-button-as-secondary-when-active": "1px solid var(--color-neutral)",
@@ -245,6 +250,7 @@
245
250
  "--border-color-for-radio-input-when-checked": "#00b39e",
246
251
  "--border-color-for-radio-input-when-focused": "hsl(0, 0%, 60%)",
247
252
  "--border-color-for-primary-action-dropdown-menu": "#fff",
253
+ "--border-color-for-button-as-secondary-when-info": "hsl(203.05555555555554, 93.9130434783%, 85%)",
248
254
  "--border-radius-for-button-as-big": "4px",
249
255
  "--border-radius-for-button-as-medium": "4px",
250
256
  "--border-radius-for-button-as-icon-as-big": "4px",
package/materials/internals/definition.yaml CHANGED
@@ -38,6 +38,7 @@ choiceGroupsByTheme:
38
38
  choices:
39
39
  color-primary: '#00b39e'
40
40
  color-primary-25: 'hsl(172.9608938547486, 100%, 25%)'
41
+ color-primary-30: 'hsl(172.9608938547486, 100%, 30%)'
41
42
  color-primary-40: 'hsl(172.9608938547486, 100%, 40%)'
42
43
  color-primary-85: 'hsl(172.9608938547486, 100%, 85%)'
43
44
  color-primary-95: 'hsl(172.9608938547486, 100%, 95%)'
@@ -62,6 +63,7 @@ choiceGroupsByTheme:
62
63
  color-info: '#078cdf'
63
64
  color-info-40: 'hsl(203.05555555555554, 93.9130434783%, 40%)'
64
65
  color-info-85: 'hsl(203.05555555555554, 93.9130434783%, 85%)'
66
+ color-info-90: '#CEEBFD'
65
67
  color-info-95: 'hsl(203.05555555555554, 93.9130434783%, 95%)'
66
68
  color-warning: '#f16d0e'
67
69
  color-warning-25: 'hsl(25.110132158590307, 89.0196078431%, 25%)'
@@ -252,6 +254,10 @@ states:
252
254
  description: 'When the element is checked'
253
255
  checked-and-disabled:
254
256
  description: 'When the element is checked and disabled'
257
+ info-and-hovered:
258
+ description: "When the element's tone is info and hovered"
259
+ info-and-active:
260
+ description: "When the element's tone is info and active"
255
261
 
256
262
  variants:
257
263
  h1:
@@ -584,6 +590,12 @@ decisionGroupsByTheme:
584
590
  choice: color-accent-90
585
591
  background-color-for-toggle-input-thumb-when-checked-and-disabled:
586
592
  choice: color-accent-60
593
+ background-color-for-button-as-secondary-when-info:
594
+ choice: color-info-95
595
+ background-color-for-button-as-secondary-when-info-and-hovered:
596
+ choice: color-info-90
597
+ background-color-for-button-as-secondary-when-info-and-active:
598
+ choice: color-info-85
587
599
 
588
600
  borders:
589
601
  label: Borders
@@ -704,6 +716,8 @@ decisionGroupsByTheme:
704
716
  choice: color-neutral-60
705
717
  border-color-for-primary-action-dropdown-menu:
706
718
  choice: color-surface
719
+ border-color-for-button-as-secondary-when-info:
720
+ choice: color-info-85
707
721
 
708
722
  borderRadiuses:
709
723
  label: Border Radius
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": "16.5.0",
4
+ "version": "16.6.1",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -25,13 +25,13 @@
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.20.13",
27
27
  "@babel/runtime-corejs3": "^7.20.13",
28
- "@commercetools-uikit/hooks": "16.5.0",
28
+ "@commercetools-uikit/hooks": "16.6.1",
29
29
  "@emotion/react": "^11.10.5",
30
30
  "lodash": "4.17.21",
31
31
  "prop-types": "15.8.1",
32
32
  "react": "17.0.2"
33
33
  },
34
34
  "devDependencies": {
35
- "nodemon": "^2.0.20"
35
+ "nodemon": "^3.0.0"
36
36
  }
37
37
  }