@commercetools-uikit/design-system 16.1.1 → 16.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/commercetools-uikit-design-system.cjs.dev.js +7 -19
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +7 -19
  3. package/dist/commercetools-uikit-design-system.esm.js +7 -19
  4. package/dist/declarations/src/design-tokens.d.ts +6 -18
  5. package/materials/custom-properties.css +4 -29
  6. package/materials/custom-properties.json +3 -9
  7. package/materials/internals/definition.yaml +7 -17
  8. package/package.json +2 -2
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -228,10 +228,6 @@ const themes = {
228
228
  backgroundColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
229
229
  backgroundColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
230
230
  backgroundColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
231
- backgroundColorForContentNotificationIconWhenError: 'hsl(339.1304347826087, 100%, 95%)',
232
- backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
233
- backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
234
- backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
235
231
  backgroundColorForCheckboxInputIcon: '#00b39e',
236
232
  backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
237
233
  backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -312,8 +308,7 @@ const themes = {
312
308
  borderRadiusForTableManagerDroppableList: '4px',
313
309
  borderRadiusForStamp: '20px',
314
310
  borderRadiusForViewSwitcher: '4px',
315
- borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
316
- borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
311
+ borderRadiusForContentNotification: '4px',
317
312
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
318
313
  borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
319
314
  borderRadiusForPrimaryActionDropdownMenu: '4px',
@@ -323,7 +318,6 @@ const themes = {
323
318
  borderWidthForInputWhenFocused: '1px',
324
319
  borderWidthForTag: '1px 1px 1px 0',
325
320
  borderWidthForSelectInput: '2px',
326
- borderWidthForContentNotificationIcon: '1px',
327
321
  borderLeftWidthForContentNotification: '0px',
328
322
  borderWidthForCheckboxInputIcon: '2px',
329
323
  borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
@@ -492,8 +486,8 @@ const themes = {
492
486
  paddingForTooltip: 'var(--spacing-20) 12px',
493
487
  paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
494
488
  paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
495
- paddingForContentNotification: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
496
- paddingForContentNotificationIcon: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
489
+ paddingForContentNotification: 'var(--spacing-20) var(--spacing-30)',
490
+ paddingForContentNotificationMessage: '0 var(--spacing-30) 0 var(--spacing-20)',
497
491
  paddingLeftForSelectInputOptions: '16px',
498
492
  paddingRightForSelectInputOptions: '16px',
499
493
  paddingTopForSelectInputOptions: '8px',
@@ -712,10 +706,6 @@ const designTokens = {
712
706
  backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
713
707
  backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
714
708
  backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
715
- backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))',
716
- backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
717
- backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
718
- backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))',
719
709
  backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #00b39e)',
720
710
  backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)',
721
711
  backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
@@ -796,8 +786,7 @@ const designTokens = {
796
786
  borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 4px)',
797
787
  borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
798
788
  borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
799
- borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)',
800
- borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))',
789
+ borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 4px)',
801
790
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
802
791
  borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)',
803
792
  borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 4px)',
@@ -807,7 +796,6 @@ const designTokens = {
807
796
  borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
808
797
  borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
809
798
  borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
810
- borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 1px)',
811
799
  borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 0px)',
812
800
  borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 2px)',
813
801
  borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)',
@@ -976,8 +964,8 @@ const designTokens = {
976
964
  paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)',
977
965
  paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
978
966
  paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
979
- paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))',
980
- paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))',
967
+ paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))',
968
+ paddingForContentNotificationMessage: 'var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))',
981
969
  paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 16px)',
982
970
  paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 16px)',
983
971
  paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 8px)',
@@ -1148,7 +1136,7 @@ const withThemeContext = WrappedComponent => {
1148
1136
  };
1149
1137
 
1150
1138
  // NOTE: This string will be replaced on build time with the package version.
1151
- var version = "16.1.1";
1139
+ var version = "16.2.0";
1152
1140
 
1153
1141
  exports.ThemeProvider = ThemeProvider;
1154
1142
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.cjs.prod.js CHANGED
@@ -228,10 +228,6 @@ const themes = {
228
228
  backgroundColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
229
229
  backgroundColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
230
230
  backgroundColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
231
- backgroundColorForContentNotificationIconWhenError: 'hsl(339.1304347826087, 100%, 95%)',
232
- backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
233
- backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
234
- backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
235
231
  backgroundColorForCheckboxInputIcon: '#00b39e',
236
232
  backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
237
233
  backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -312,8 +308,7 @@ const themes = {
312
308
  borderRadiusForTableManagerDroppableList: '4px',
313
309
  borderRadiusForStamp: '20px',
314
310
  borderRadiusForViewSwitcher: '4px',
315
- borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
316
- borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
311
+ borderRadiusForContentNotification: '4px',
317
312
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
318
313
  borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
319
314
  borderRadiusForPrimaryActionDropdownMenu: '4px',
@@ -323,7 +318,6 @@ const themes = {
323
318
  borderWidthForInputWhenFocused: '1px',
324
319
  borderWidthForTag: '1px 1px 1px 0',
325
320
  borderWidthForSelectInput: '2px',
326
- borderWidthForContentNotificationIcon: '1px',
327
321
  borderLeftWidthForContentNotification: '0px',
328
322
  borderWidthForCheckboxInputIcon: '2px',
329
323
  borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
@@ -492,8 +486,8 @@ const themes = {
492
486
  paddingForTooltip: 'var(--spacing-20) 12px',
493
487
  paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
494
488
  paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
495
- paddingForContentNotification: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
496
- paddingForContentNotificationIcon: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
489
+ paddingForContentNotification: 'var(--spacing-20) var(--spacing-30)',
490
+ paddingForContentNotificationMessage: '0 var(--spacing-30) 0 var(--spacing-20)',
497
491
  paddingLeftForSelectInputOptions: '16px',
498
492
  paddingRightForSelectInputOptions: '16px',
499
493
  paddingTopForSelectInputOptions: '8px',
@@ -712,10 +706,6 @@ const designTokens = {
712
706
  backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
713
707
  backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
714
708
  backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
715
- backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))',
716
- backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
717
- backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
718
- backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))',
719
709
  backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #00b39e)',
720
710
  backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)',
721
711
  backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
@@ -796,8 +786,7 @@ const designTokens = {
796
786
  borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 4px)',
797
787
  borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
798
788
  borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
799
- borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)',
800
- borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))',
789
+ borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 4px)',
801
790
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
802
791
  borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)',
803
792
  borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 4px)',
@@ -807,7 +796,6 @@ const designTokens = {
807
796
  borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
808
797
  borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
809
798
  borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
810
- borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 1px)',
811
799
  borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 0px)',
812
800
  borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 2px)',
813
801
  borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)',
@@ -976,8 +964,8 @@ const designTokens = {
976
964
  paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)',
977
965
  paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
978
966
  paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
979
- paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))',
980
- paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))',
967
+ paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))',
968
+ paddingForContentNotificationMessage: 'var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))',
981
969
  paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 16px)',
982
970
  paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 16px)',
983
971
  paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 8px)',
@@ -1148,7 +1136,7 @@ const withThemeContext = WrappedComponent => {
1148
1136
  };
1149
1137
 
1150
1138
  // NOTE: This string will be replaced on build time with the package version.
1151
- var version = "16.1.1";
1139
+ var version = "16.2.0";
1152
1140
 
1153
1141
  exports.ThemeProvider = ThemeProvider;
1154
1142
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.esm.js CHANGED
@@ -203,10 +203,6 @@ const themes = {
203
203
  backgroundColorForContentNotificationWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
204
204
  backgroundColorForContentNotificationWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
205
205
  backgroundColorForContentNotificationWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
206
- backgroundColorForContentNotificationIconWhenError: 'hsl(339.1304347826087, 100%, 95%)',
207
- backgroundColorForContentNotificationIconWhenInfo: 'hsl(203.05555555555554, 93.9130434783%, 95%)',
208
- backgroundColorForContentNotificationIconWhenWarning: 'hsl(25.110132158590307, 89.0196078431%, 95%)',
209
- backgroundColorForContentNotificationIconWhenSuccess: 'hsl(172.9608938547486, 100%, 95%)',
210
206
  backgroundColorForCheckboxInputIcon: '#00b39e',
211
207
  backgroundColorForCheckboxInputIconWhenDisabled: '#ccc',
212
208
  backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
@@ -287,8 +283,7 @@ const themes = {
287
283
  borderRadiusForTableManagerDroppableList: '4px',
288
284
  borderRadiusForStamp: '20px',
289
285
  borderRadiusForViewSwitcher: '4px',
290
- borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
291
- borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
286
+ borderRadiusForContentNotification: '4px',
292
287
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
293
288
  borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
294
289
  borderRadiusForPrimaryActionDropdownMenu: '4px',
@@ -298,7 +293,6 @@ const themes = {
298
293
  borderWidthForInputWhenFocused: '1px',
299
294
  borderWidthForTag: '1px 1px 1px 0',
300
295
  borderWidthForSelectInput: '2px',
301
- borderWidthForContentNotificationIcon: '1px',
302
296
  borderLeftWidthForContentNotification: '0px',
303
297
  borderWidthForCheckboxInputIcon: '2px',
304
298
  borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
@@ -467,8 +461,8 @@ const themes = {
467
461
  paddingForTooltip: 'var(--spacing-20) 12px',
468
462
  paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
469
463
  paddingForViewSwitcherWhenCondensed: '0 12px 0 12px',
470
- paddingForContentNotification: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)',
471
- paddingForContentNotificationIcon: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)',
464
+ paddingForContentNotification: 'var(--spacing-20) var(--spacing-30)',
465
+ paddingForContentNotificationMessage: '0 var(--spacing-30) 0 var(--spacing-20)',
472
466
  paddingLeftForSelectInputOptions: '16px',
473
467
  paddingRightForSelectInputOptions: '16px',
474
468
  paddingTopForSelectInputOptions: '8px',
@@ -687,10 +681,6 @@ const designTokens = {
687
681
  backgroundColorForContentNotificationWhenInfo: 'var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
688
682
  backgroundColorForContentNotificationWhenWarning: 'var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
689
683
  backgroundColorForContentNotificationWhenSuccess: 'var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))',
690
- backgroundColorForContentNotificationIconWhenError: 'var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))',
691
- backgroundColorForContentNotificationIconWhenInfo: 'var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))',
692
- backgroundColorForContentNotificationIconWhenWarning: 'var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))',
693
- backgroundColorForContentNotificationIconWhenSuccess: 'var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))',
694
684
  backgroundColorForCheckboxInputIcon: 'var(--background-color-for-checkbox-input-icon, #00b39e)',
695
685
  backgroundColorForCheckboxInputIconWhenDisabled: 'var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)',
696
686
  backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))',
@@ -771,8 +761,7 @@ const designTokens = {
771
761
  borderRadiusForTableManagerDroppableList: 'var(--border-radius-for-table-manager-droppable-list, 4px)',
772
762
  borderRadiusForStamp: 'var(--border-radius-for-stamp, 20px)',
773
763
  borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 4px)',
774
- borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)',
775
- borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))',
764
+ borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 4px)',
776
765
  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))',
777
766
  borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)',
778
767
  borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 4px)',
@@ -782,7 +771,6 @@ const designTokens = {
782
771
  borderWidthForInputWhenFocused: 'var(--border-width-for-input-when-focused, 1px)',
783
772
  borderWidthForTag: 'var(--border-width-for-tag, 1px 1px 1px 0)',
784
773
  borderWidthForSelectInput: 'var(--border-width-for-select-input, 2px)',
785
- borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 1px)',
786
774
  borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 0px)',
787
775
  borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 2px)',
788
776
  borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)',
@@ -951,8 +939,8 @@ const designTokens = {
951
939
  paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-20) 12px)',
952
940
  paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
953
941
  paddingForViewSwitcherWhenCondensed: 'var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)',
954
- paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))',
955
- paddingForContentNotificationIcon: 'var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))',
942
+ paddingForContentNotification: 'var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))',
943
+ paddingForContentNotificationMessage: 'var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))',
956
944
  paddingLeftForSelectInputOptions: 'var(--padding-left-for-select-input-options, 16px)',
957
945
  paddingRightForSelectInputOptions: 'var(--padding-right-for-select-input-options, 16px)',
958
946
  paddingTopForSelectInputOptions: 'var(--padding-top-for-select-input-options, 8px)',
@@ -1123,6 +1111,6 @@ const withThemeContext = WrappedComponent => {
1123
1111
  };
1124
1112
 
1125
1113
  // NOTE: This string will be replaced on build time with the package version.
1126
- var version = "16.1.1";
1114
+ var version = "16.2.0";
1127
1115
 
1128
1116
  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
@@ -175,10 +175,6 @@ export declare const themes: {
175
175
  readonly backgroundColorForContentNotificationWhenInfo: "hsl(203.05555555555554, 93.9130434783%, 95%)";
176
176
  readonly backgroundColorForContentNotificationWhenWarning: "hsl(25.110132158590307, 89.0196078431%, 95%)";
177
177
  readonly backgroundColorForContentNotificationWhenSuccess: "hsl(172.9608938547486, 100%, 95%)";
178
- readonly backgroundColorForContentNotificationIconWhenError: "hsl(339.1304347826087, 100%, 95%)";
179
- readonly backgroundColorForContentNotificationIconWhenInfo: "hsl(203.05555555555554, 93.9130434783%, 95%)";
180
- readonly backgroundColorForContentNotificationIconWhenWarning: "hsl(25.110132158590307, 89.0196078431%, 95%)";
181
- readonly backgroundColorForContentNotificationIconWhenSuccess: "hsl(172.9608938547486, 100%, 95%)";
182
178
  readonly backgroundColorForCheckboxInputIcon: "#00b39e";
183
179
  readonly backgroundColorForCheckboxInputIconWhenDisabled: "#ccc";
184
180
  readonly backgroundColorForCheckboxInputIconWhenReadonly: "hsl(0, 0%, 60%)";
@@ -259,8 +255,7 @@ export declare const themes: {
259
255
  readonly borderRadiusForTableManagerDroppableList: "4px";
260
256
  readonly borderRadiusForStamp: "20px";
261
257
  readonly borderRadiusForViewSwitcher: "4px";
262
- readonly borderRadiusForContentNotification: "0 var(--border-radius-4) var(--border-radius-4) 0";
263
- readonly borderRadiusForContentNotificationIcon: "var(--border-radius-4) 0 0 var(--border-radius-4)";
258
+ readonly borderRadiusForContentNotification: "4px";
264
259
  readonly borderRadiusForPrimaryActionDropdown: "var(--border-radius-4) 0 0 var(--border-radius-4)";
265
260
  readonly borderRadiusForPrimaryActionDropdownIcon: "0 var(--border-radius-4) var(--border-radius-4) 0";
266
261
  readonly borderRadiusForPrimaryActionDropdownMenu: "4px";
@@ -270,7 +265,6 @@ export declare const themes: {
270
265
  readonly borderWidthForInputWhenFocused: "1px";
271
266
  readonly borderWidthForTag: "1px 1px 1px 0";
272
267
  readonly borderWidthForSelectInput: "2px";
273
- readonly borderWidthForContentNotificationIcon: "1px";
274
268
  readonly borderLeftWidthForContentNotification: "0px";
275
269
  readonly borderWidthForCheckboxInputIcon: "2px";
276
270
  readonly borderForPrimaryActionDropdownIcon: "1px 1px 1px 0px";
@@ -439,8 +433,8 @@ export declare const themes: {
439
433
  readonly paddingForTooltip: "var(--spacing-20) 12px";
440
434
  readonly paddingForViewSwitcher: "0 var(--spacing-30) 0 var(--spacing-30)";
441
435
  readonly paddingForViewSwitcherWhenCondensed: "0 12px 0 12px";
442
- readonly paddingForContentNotification: "var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)";
443
- readonly paddingForContentNotificationIcon: "var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)";
436
+ readonly paddingForContentNotification: "var(--spacing-20) var(--spacing-30)";
437
+ readonly paddingForContentNotificationMessage: "0 var(--spacing-30) 0 var(--spacing-20)";
444
438
  readonly paddingLeftForSelectInputOptions: "16px";
445
439
  readonly paddingRightForSelectInputOptions: "16px";
446
440
  readonly paddingTopForSelectInputOptions: "8px";
@@ -659,10 +653,6 @@ declare const designTokens: {
659
653
  readonly backgroundColorForContentNotificationWhenInfo: "var(--background-color-for-content-notification-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))";
660
654
  readonly backgroundColorForContentNotificationWhenWarning: "var(--background-color-for-content-notification-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))";
661
655
  readonly backgroundColorForContentNotificationWhenSuccess: "var(--background-color-for-content-notification-when-success, hsl(172.9608938547486, 100%, 95%))";
662
- readonly backgroundColorForContentNotificationIconWhenError: "var(--background-color-for-content-notification-icon-when-error, hsl(339.1304347826087, 100%, 95%))";
663
- readonly backgroundColorForContentNotificationIconWhenInfo: "var(--background-color-for-content-notification-icon-when-info, hsl(203.05555555555554, 93.9130434783%, 95%))";
664
- readonly backgroundColorForContentNotificationIconWhenWarning: "var(--background-color-for-content-notification-icon-when-warning, hsl(25.110132158590307, 89.0196078431%, 95%))";
665
- readonly backgroundColorForContentNotificationIconWhenSuccess: "var(--background-color-for-content-notification-icon-when-success, hsl(172.9608938547486, 100%, 95%))";
666
656
  readonly backgroundColorForCheckboxInputIcon: "var(--background-color-for-checkbox-input-icon, #00b39e)";
667
657
  readonly backgroundColorForCheckboxInputIconWhenDisabled: "var(--background-color-for-checkbox-input-icon-when-disabled, #ccc)";
668
658
  readonly backgroundColorForCheckboxInputIconWhenReadonly: "var(--background-color-for-checkbox-input-icon-when-readonly, hsl(0, 0%, 60%))";
@@ -743,8 +733,7 @@ declare const designTokens: {
743
733
  readonly borderRadiusForTableManagerDroppableList: "var(--border-radius-for-table-manager-droppable-list, 4px)";
744
734
  readonly borderRadiusForStamp: "var(--border-radius-for-stamp, 20px)";
745
735
  readonly borderRadiusForViewSwitcher: "var(--border-radius-for-view-switcher, 4px)";
746
- readonly borderRadiusForContentNotification: "var(--border-radius-for-content-notification, 0 var(--border-radius-4) var(--border-radius-4) 0)";
747
- readonly borderRadiusForContentNotificationIcon: "var(--border-radius-for-content-notification-icon, var(--border-radius-4) 0 0 var(--border-radius-4))";
736
+ readonly borderRadiusForContentNotification: "var(--border-radius-for-content-notification, 4px)";
748
737
  readonly borderRadiusForPrimaryActionDropdown: "var(--border-radius-for-primary-action-dropdown, var(--border-radius-4) 0 0 var(--border-radius-4))";
749
738
  readonly borderRadiusForPrimaryActionDropdownIcon: "var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-4) var(--border-radius-4) 0)";
750
739
  readonly borderRadiusForPrimaryActionDropdownMenu: "var(--border-radius-for-primary-action-dropdown-menu, 4px)";
@@ -754,7 +743,6 @@ declare const designTokens: {
754
743
  readonly borderWidthForInputWhenFocused: "var(--border-width-for-input-when-focused, 1px)";
755
744
  readonly borderWidthForTag: "var(--border-width-for-tag, 1px 1px 1px 0)";
756
745
  readonly borderWidthForSelectInput: "var(--border-width-for-select-input, 2px)";
757
- readonly borderWidthForContentNotificationIcon: "var(--border-width-for-content-notification-icon, 1px)";
758
746
  readonly borderLeftWidthForContentNotification: "var(--border-left-width-for-content-notification, 0px)";
759
747
  readonly borderWidthForCheckboxInputIcon: "var(--border-width-for-checkbox-input-icon, 2px)";
760
748
  readonly borderForPrimaryActionDropdownIcon: "var(--border-for-primary-action-dropdown-icon, 1px 1px 1px 0px)";
@@ -923,8 +911,8 @@ declare const designTokens: {
923
911
  readonly paddingForTooltip: "var(--padding-for-tooltip, var(--spacing-20) 12px)";
924
912
  readonly paddingForViewSwitcher: "var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))";
925
913
  readonly paddingForViewSwitcherWhenCondensed: "var(--padding-for-view-switcher-when-condensed, 0 12px 0 12px)";
926
- readonly paddingForContentNotification: "var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20))";
927
- readonly paddingForContentNotificationIcon: "var(--padding-for-content-notification-icon, var(--spacing-20) 0 var(--spacing-20) var(--spacing-30))";
914
+ readonly paddingForContentNotification: "var(--padding-for-content-notification, var(--spacing-20) var(--spacing-30))";
915
+ readonly paddingForContentNotificationMessage: "var(--padding-for-content-notification-message, 0 var(--spacing-30) 0 var(--spacing-20))";
928
916
  readonly paddingLeftForSelectInputOptions: "var(--padding-left-for-select-input-options, 16px)";
929
917
  readonly paddingRightForSelectInputOptions: "var(--padding-right-for-select-input-options, 16px)";
930
918
  readonly paddingTopForSelectInputOptions: "var(--padding-top-for-select-input-options, 8px)";
package/materials/custom-properties.css CHANGED
@@ -218,26 +218,6 @@
218
218
  100%,
219
219
  95%
220
220
  );
221
- --background-color-for-content-notification-icon-when-error: hsl(
222
- 339.1304347826087,
223
- 100%,
224
- 95%
225
- );
226
- --background-color-for-content-notification-icon-when-info: hsl(
227
- 203.05555555555554,
228
- 93.9130434783%,
229
- 95%
230
- );
231
- --background-color-for-content-notification-icon-when-warning: hsl(
232
- 25.110132158590307,
233
- 89.0196078431%,
234
- 95%
235
- );
236
- --background-color-for-content-notification-icon-when-success: hsl(
237
- 172.9608938547486,
238
- 100%,
239
- 95%
240
- );
241
221
  --background-color-for-checkbox-input-icon: #00b39e;
242
222
  --background-color-for-checkbox-input-icon-when-disabled: #ccc;
243
223
  --background-color-for-checkbox-input-icon-when-readonly: hsl(0, 0%, 60%);
@@ -358,10 +338,7 @@
358
338
  --border-radius-for-table-manager-droppable-list: 4px;
359
339
  --border-radius-for-stamp: 20px;
360
340
  --border-radius-for-view-switcher: 4px;
361
- --border-radius-for-content-notification: 0 var(--border-radius-4)
362
- var(--border-radius-4) 0;
363
- --border-radius-for-content-notification-icon: var(--border-radius-4) 0 0
364
- var(--border-radius-4);
341
+ --border-radius-for-content-notification: 4px;
365
342
  --border-radius-for-primary-action-dropdown: var(--border-radius-4) 0 0
366
343
  var(--border-radius-4);
367
344
  --border-radius-for-primary-action-dropdown-icon: 0 var(--border-radius-4)
@@ -373,7 +350,6 @@
373
350
  --border-width-for-input-when-focused: 1px;
374
351
  --border-width-for-tag: 1px 1px 1px 0;
375
352
  --border-width-for-select-input: 2px;
376
- --border-width-for-content-notification-icon: 1px;
377
353
  --border-left-width-for-content-notification: 0px;
378
354
  --border-width-for-checkbox-input-icon: 2px;
379
355
  --border-for-primary-action-dropdown-icon: 1px 1px 1px 0px;
@@ -557,10 +533,9 @@
557
533
  --padding-for-tooltip: var(--spacing-20) 12px;
558
534
  --padding-for-view-switcher: 0 var(--spacing-30) 0 var(--spacing-30);
559
535
  --padding-for-view-switcher-when-condensed: 0 12px 0 12px;
560
- --padding-for-content-notification: var(--spacing-20) var(--spacing-30)
561
- var(--spacing-20) var(--spacing-20);
562
- --padding-for-content-notification-icon: var(--spacing-20) 0 var(--spacing-20)
563
- var(--spacing-30);
536
+ --padding-for-content-notification: var(--spacing-20) var(--spacing-30);
537
+ --padding-for-content-notification-message: 0 var(--spacing-30) 0
538
+ var(--spacing-20);
564
539
  --padding-left-for-select-input-options: 16px;
565
540
  --padding-right-for-select-input-options: 16px;
566
541
  --padding-top-for-select-input-options: 8px;
package/materials/custom-properties.json CHANGED
@@ -174,10 +174,6 @@
174
174
  "--background-color-for-content-notification-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
175
175
  "--background-color-for-content-notification-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
176
176
  "--background-color-for-content-notification-when-success": "hsl(172.9608938547486, 100%, 95%)",
177
- "--background-color-for-content-notification-icon-when-error": "hsl(339.1304347826087, 100%, 95%)",
178
- "--background-color-for-content-notification-icon-when-info": "hsl(203.05555555555554, 93.9130434783%, 95%)",
179
- "--background-color-for-content-notification-icon-when-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
180
- "--background-color-for-content-notification-icon-when-success": "hsl(172.9608938547486, 100%, 95%)",
181
177
  "--background-color-for-checkbox-input-icon": "#00b39e",
182
178
  "--background-color-for-checkbox-input-icon-when-disabled": "#ccc",
183
179
  "--background-color-for-checkbox-input-icon-when-readonly": "hsl(0, 0%, 60%)",
@@ -258,8 +254,7 @@
258
254
  "--border-radius-for-table-manager-droppable-list": "4px",
259
255
  "--border-radius-for-stamp": "20px",
260
256
  "--border-radius-for-view-switcher": "4px",
261
- "--border-radius-for-content-notification": "0 var(--border-radius-4) var(--border-radius-4) 0",
262
- "--border-radius-for-content-notification-icon": "var(--border-radius-4) 0 0 var(--border-radius-4)",
257
+ "--border-radius-for-content-notification": "4px",
263
258
  "--border-radius-for-primary-action-dropdown": "var(--border-radius-4) 0 0 var(--border-radius-4)",
264
259
  "--border-radius-for-primary-action-dropdown-icon": "0 var(--border-radius-4) var(--border-radius-4) 0",
265
260
  "--border-radius-for-primary-action-dropdown-menu": "4px",
@@ -269,7 +264,6 @@
269
264
  "--border-width-for-input-when-focused": "1px",
270
265
  "--border-width-for-tag": "1px 1px 1px 0",
271
266
  "--border-width-for-select-input": "2px",
272
- "--border-width-for-content-notification-icon": "1px",
273
267
  "--border-left-width-for-content-notification": "0px",
274
268
  "--border-width-for-checkbox-input-icon": "2px",
275
269
  "--border-for-primary-action-dropdown-icon": "1px 1px 1px 0px",
@@ -438,8 +432,8 @@
438
432
  "--padding-for-tooltip": "var(--spacing-20) 12px",
439
433
  "--padding-for-view-switcher": "0 var(--spacing-30) 0 var(--spacing-30)",
440
434
  "--padding-for-view-switcher-when-condensed": "0 12px 0 12px",
441
- "--padding-for-content-notification": "var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)",
442
- "--padding-for-content-notification-icon": "var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)",
435
+ "--padding-for-content-notification": "var(--spacing-20) var(--spacing-30)",
436
+ "--padding-for-content-notification-message": "0 var(--spacing-30) 0 var(--spacing-20)",
443
437
  "--padding-left-for-select-input-options": "16px",
444
438
  "--padding-right-for-select-input-options": "16px",
445
439
  "--padding-top-for-select-input-options": "8px",
package/materials/internals/definition.yaml CHANGED
@@ -388,8 +388,10 @@ componentGroups:
388
388
  description: 'View switcher icon elements'
389
389
  content-notification:
390
390
  description: 'Content notification elements'
391
+ content-notification-message:
392
+ description: 'Content notification message element'
391
393
  content-notification-icon:
392
- description: 'Content notification icon elements'
394
+ description: 'Content notification icon element'
393
395
  checkbox-input-icon:
394
396
  description: 'Checkbox icon elements'
395
397
  checkbox-input-label:
@@ -550,14 +552,6 @@ decisionGroupsByTheme:
550
552
  choice: color-warning-95
551
553
  background-color-for-content-notification-when-success:
552
554
  choice: color-primary-95
553
- background-color-for-content-notification-icon-when-error:
554
- choice: color-error-95
555
- background-color-for-content-notification-icon-when-info:
556
- choice: color-info-95
557
- background-color-for-content-notification-icon-when-warning:
558
- choice: color-warning-95
559
- background-color-for-content-notification-icon-when-success:
560
- choice: color-primary-95
561
555
  background-color-for-checkbox-input-icon:
562
556
  choice: color-primary
563
557
  background-color-for-checkbox-input-icon-when-disabled:
@@ -734,9 +728,7 @@ decisionGroupsByTheme:
734
728
  border-radius-for-view-switcher:
735
729
  choice: border-radius-4
736
730
  border-radius-for-content-notification:
737
- choice: '0 var(--border-radius-4) var(--border-radius-4) 0'
738
- border-radius-for-content-notification-icon:
739
- choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
731
+ choice: border-radius-4
740
732
  border-radius-for-primary-action-dropdown:
741
733
  choice: 'var(--border-radius-4) 0 0 var(--border-radius-4)'
742
734
  border-radius-for-primary-action-dropdown-icon:
@@ -760,8 +752,6 @@ decisionGroupsByTheme:
760
752
  choice: '1px 1px 1px 0'
761
753
  border-width-for-select-input:
762
754
  choice: border-width-2
763
- border-width-for-content-notification-icon:
764
- choice: border-width-1
765
755
  border-left-width-for-content-notification:
766
756
  choice: '0px'
767
757
  border-width-for-checkbox-input-icon:
@@ -1160,9 +1150,9 @@ decisionGroupsByTheme:
1160
1150
  padding-for-view-switcher-when-condensed:
1161
1151
  choice: '0 12px 0 12px'
1162
1152
  padding-for-content-notification:
1163
- choice: 'var(--spacing-20) var(--spacing-30) var(--spacing-20) var(--spacing-20)'
1164
- padding-for-content-notification-icon:
1165
- choice: 'var(--spacing-20) 0 var(--spacing-20) var(--spacing-30)'
1153
+ choice: 'var(--spacing-20) var(--spacing-30)'
1154
+ padding-for-content-notification-message:
1155
+ choice: '0 var(--spacing-30) 0 var(--spacing-20)'
1166
1156
  padding-left-for-select-input-options:
1167
1157
  choice: spacing-30
1168
1158
  padding-right-for-select-input-options:
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.1.1",
4
+ "version": "16.2.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": "16.1.1",
28
+ "@commercetools-uikit/hooks": "16.2.0",
29
29
  "@emotion/react": "^11.10.5",
30
30
  "lodash": "4.17.21",
31
31
  "prop-types": "15.8.1",