@commercetools-uikit/design-system 16.2.0 → 16.3.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 -3
  2. package/dist/commercetools-uikit-design-system.cjs.prod.js +7 -3
  3. package/dist/commercetools-uikit-design-system.esm.js +7 -3
  4. package/dist/declarations/src/design-tokens.d.ts +6 -2
  5. package/materials/custom-properties.css +3 -1
  6. package/materials/custom-properties.json +3 -1
  7. package/materials/internals/definition.yaml +5 -1
  8. package/package.json +2 -2
package/dist/commercetools-uikit-design-system.cjs.dev.js CHANGED
@@ -193,6 +193,8 @@ const themes = {
193
193
  backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
194
194
  backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
195
195
  backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
196
+ backgroundColorForButtonAsCriticalWhenActive: '#B3003E',
197
+ backgroundColorForButtonAsCriticalWhenHovered: '#CC0047',
196
198
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
197
199
  backgroundColorForInput: '#fff',
198
200
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
@@ -438,7 +440,7 @@ const themes = {
438
440
  fontWeightForButton: '500',
439
441
  fontWeightForTableHeader: '600',
440
442
  fontWeightForTextAsBold: '600',
441
- marginForTableHeader: '16px',
443
+ marginForTableHeader: '8px',
442
444
  marginForTableCellAsCondensed: '8px',
443
445
  marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
444
446
  marginForGroupHeadingSelectInputOptions: '8px',
@@ -671,6 +673,8 @@ const designTokens = {
671
673
  backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)',
672
674
  backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #DC630A)',
673
675
  backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)',
676
+ backgroundColorForButtonAsCriticalWhenActive: 'var(--background-color-for-button-as-critical-when-active, #B3003E)',
677
+ backgroundColorForButtonAsCriticalWhenHovered: 'var(--background-color-for-button-as-critical-when-hovered, #CC0047)',
674
678
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
675
679
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
676
680
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
@@ -916,7 +920,7 @@ const designTokens = {
916
920
  fontWeightForButton: 'var(--font-weight-for-button, 500)',
917
921
  fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
918
922
  fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
919
- marginForTableHeader: 'var(--margin-for-table-header, 16px)',
923
+ marginForTableHeader: 'var(--margin-for-table-header, 8px)',
920
924
  marginForTableCellAsCondensed: 'var(--margin-for-table-cell-as-condensed, 8px)',
921
925
  marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)',
922
926
  marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 8px)',
@@ -1136,7 +1140,7 @@ const withThemeContext = WrappedComponent => {
1136
1140
  };
1137
1141
 
1138
1142
  // NOTE: This string will be replaced on build time with the package version.
1139
- var version = "16.2.0";
1143
+ var version = "16.3.0";
1140
1144
 
1141
1145
  exports.ThemeProvider = ThemeProvider;
1142
1146
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.cjs.prod.js CHANGED
@@ -193,6 +193,8 @@ const themes = {
193
193
  backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
194
194
  backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
195
195
  backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
196
+ backgroundColorForButtonAsCriticalWhenActive: '#B3003E',
197
+ backgroundColorForButtonAsCriticalWhenHovered: '#CC0047',
196
198
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
197
199
  backgroundColorForInput: '#fff',
198
200
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
@@ -438,7 +440,7 @@ const themes = {
438
440
  fontWeightForButton: '500',
439
441
  fontWeightForTableHeader: '600',
440
442
  fontWeightForTextAsBold: '600',
441
- marginForTableHeader: '16px',
443
+ marginForTableHeader: '8px',
442
444
  marginForTableCellAsCondensed: '8px',
443
445
  marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
444
446
  marginForGroupHeadingSelectInputOptions: '8px',
@@ -671,6 +673,8 @@ const designTokens = {
671
673
  backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)',
672
674
  backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #DC630A)',
673
675
  backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)',
676
+ backgroundColorForButtonAsCriticalWhenActive: 'var(--background-color-for-button-as-critical-when-active, #B3003E)',
677
+ backgroundColorForButtonAsCriticalWhenHovered: 'var(--background-color-for-button-as-critical-when-hovered, #CC0047)',
674
678
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
675
679
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
676
680
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
@@ -916,7 +920,7 @@ const designTokens = {
916
920
  fontWeightForButton: 'var(--font-weight-for-button, 500)',
917
921
  fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
918
922
  fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
919
- marginForTableHeader: 'var(--margin-for-table-header, 16px)',
923
+ marginForTableHeader: 'var(--margin-for-table-header, 8px)',
920
924
  marginForTableCellAsCondensed: 'var(--margin-for-table-cell-as-condensed, 8px)',
921
925
  marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)',
922
926
  marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 8px)',
@@ -1136,7 +1140,7 @@ const withThemeContext = WrappedComponent => {
1136
1140
  };
1137
1141
 
1138
1142
  // NOTE: This string will be replaced on build time with the package version.
1139
- var version = "16.2.0";
1143
+ var version = "16.3.0";
1140
1144
 
1141
1145
  exports.ThemeProvider = ThemeProvider;
1142
1146
  exports.customProperties = designTokens$1;
package/dist/commercetools-uikit-design-system.esm.js CHANGED
@@ -168,6 +168,8 @@ const themes = {
168
168
  backgroundColorForButtonAsIconAsInfoWhenHovered: '#078cdf',
169
169
  backgroundColorForButtonAsUrgentWhenActive: '#DC630A',
170
170
  backgroundColorForButtonAsUrgentWhenHovered: '#E7680D',
171
+ backgroundColorForButtonAsCriticalWhenActive: '#B3003E',
172
+ backgroundColorForButtonAsCriticalWhenHovered: '#CC0047',
171
173
  backgroundColorForButtonWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
172
174
  backgroundColorForInput: '#fff',
173
175
  backgroundColorForInputWhenSelected: 'hsl(195, 35.2941176471%, 95%)',
@@ -413,7 +415,7 @@ const themes = {
413
415
  fontWeightForButton: '500',
414
416
  fontWeightForTableHeader: '600',
415
417
  fontWeightForTextAsBold: '600',
416
- marginForTableHeader: '16px',
418
+ marginForTableHeader: '8px',
417
419
  marginForTableCellAsCondensed: '8px',
418
420
  marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
419
421
  marginForGroupHeadingSelectInputOptions: '8px',
@@ -646,6 +648,8 @@ const designTokens = {
646
648
  backgroundColorForButtonAsIconAsInfoWhenHovered: 'var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)',
647
649
  backgroundColorForButtonAsUrgentWhenActive: 'var(--background-color-for-button-as-urgent-when-active, #DC630A)',
648
650
  backgroundColorForButtonAsUrgentWhenHovered: 'var(--background-color-for-button-as-urgent-when-hovered, #E7680D)',
651
+ backgroundColorForButtonAsCriticalWhenActive: 'var(--background-color-for-button-as-critical-when-active, #B3003E)',
652
+ backgroundColorForButtonAsCriticalWhenHovered: 'var(--background-color-for-button-as-critical-when-hovered, #CC0047)',
649
653
  backgroundColorForButtonWhenDisabled: 'var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))',
650
654
  backgroundColorForInput: 'var(--background-color-for-input, #fff)',
651
655
  backgroundColorForInputWhenSelected: 'var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))',
@@ -891,7 +895,7 @@ const designTokens = {
891
895
  fontWeightForButton: 'var(--font-weight-for-button, 500)',
892
896
  fontWeightForTableHeader: 'var(--font-weight-for-table-header, 600)',
893
897
  fontWeightForTextAsBold: 'var(--font-weight-for-text-as-bold, 600)',
894
- marginForTableHeader: 'var(--margin-for-table-header, 16px)',
898
+ marginForTableHeader: 'var(--margin-for-table-header, 8px)',
895
899
  marginForTableCellAsCondensed: 'var(--margin-for-table-cell-as-condensed, 8px)',
896
900
  marginForViewSwitcherIcon: 'var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)',
897
901
  marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 8px)',
@@ -1111,6 +1115,6 @@ const withThemeContext = WrappedComponent => {
1111
1115
  };
1112
1116
 
1113
1117
  // NOTE: This string will be replaced on build time with the package version.
1114
- var version = "16.2.0";
1118
+ var version = "16.3.0";
1115
1119
 
1116
1120
  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
@@ -140,6 +140,8 @@ export declare const themes: {
140
140
  readonly backgroundColorForButtonAsIconAsInfoWhenHovered: "#078cdf";
141
141
  readonly backgroundColorForButtonAsUrgentWhenActive: "#DC630A";
142
142
  readonly backgroundColorForButtonAsUrgentWhenHovered: "#E7680D";
143
+ readonly backgroundColorForButtonAsCriticalWhenActive: "#B3003E";
144
+ readonly backgroundColorForButtonAsCriticalWhenHovered: "#CC0047";
143
145
  readonly backgroundColorForButtonWhenDisabled: "hsl(195, 35.2941176471%, 95%)";
144
146
  readonly backgroundColorForInput: "#fff";
145
147
  readonly backgroundColorForInputWhenSelected: "hsl(195, 35.2941176471%, 95%)";
@@ -385,7 +387,7 @@ export declare const themes: {
385
387
  readonly fontWeightForButton: "500";
386
388
  readonly fontWeightForTableHeader: "600";
387
389
  readonly fontWeightForTextAsBold: "600";
388
- readonly marginForTableHeader: "16px";
390
+ readonly marginForTableHeader: "8px";
389
391
  readonly marginForTableCellAsCondensed: "8px";
390
392
  readonly marginForViewSwitcherIcon: "0 var(--spacing-20) 0 0";
391
393
  readonly marginForGroupHeadingSelectInputOptions: "8px";
@@ -618,6 +620,8 @@ declare const designTokens: {
618
620
  readonly backgroundColorForButtonAsIconAsInfoWhenHovered: "var(--background-color-for-button-as-icon-as-info-when-hovered, #078cdf)";
619
621
  readonly backgroundColorForButtonAsUrgentWhenActive: "var(--background-color-for-button-as-urgent-when-active, #DC630A)";
620
622
  readonly backgroundColorForButtonAsUrgentWhenHovered: "var(--background-color-for-button-as-urgent-when-hovered, #E7680D)";
623
+ readonly backgroundColorForButtonAsCriticalWhenActive: "var(--background-color-for-button-as-critical-when-active, #B3003E)";
624
+ readonly backgroundColorForButtonAsCriticalWhenHovered: "var(--background-color-for-button-as-critical-when-hovered, #CC0047)";
621
625
  readonly backgroundColorForButtonWhenDisabled: "var(--background-color-for-button-when-disabled, hsl(195, 35.2941176471%, 95%))";
622
626
  readonly backgroundColorForInput: "var(--background-color-for-input, #fff)";
623
627
  readonly backgroundColorForInputWhenSelected: "var(--background-color-for-input-when-selected, hsl(195, 35.2941176471%, 95%))";
@@ -863,7 +867,7 @@ declare const designTokens: {
863
867
  readonly fontWeightForButton: "var(--font-weight-for-button, 500)";
864
868
  readonly fontWeightForTableHeader: "var(--font-weight-for-table-header, 600)";
865
869
  readonly fontWeightForTextAsBold: "var(--font-weight-for-text-as-bold, 600)";
866
- readonly marginForTableHeader: "var(--margin-for-table-header, 16px)";
870
+ readonly marginForTableHeader: "var(--margin-for-table-header, 8px)";
867
871
  readonly marginForTableCellAsCondensed: "var(--margin-for-table-cell-as-condensed, 8px)";
868
872
  readonly marginForViewSwitcherIcon: "var(--margin-for-view-switcher-icon, 0 var(--spacing-20) 0 0)";
869
873
  readonly marginForGroupHeadingSelectInputOptions: "var(--margin-for-group-heading-select-input-options, 8px)";
package/materials/custom-properties.css CHANGED
@@ -151,6 +151,8 @@
151
151
  --background-color-for-button-as-icon-as-info-when-hovered: #078cdf;
152
152
  --background-color-for-button-as-urgent-when-active: #dc630a;
153
153
  --background-color-for-button-as-urgent-when-hovered: #e7680d;
154
+ --background-color-for-button-as-critical-when-active: #b3003e;
155
+ --background-color-for-button-as-critical-when-hovered: #cc0047;
154
156
  --background-color-for-button-when-disabled: hsl(195, 35.2941176471%, 95%);
155
157
  --background-color-for-input: #fff;
156
158
  --background-color-for-input-when-selected: hsl(195, 35.2941176471%, 95%);
@@ -478,7 +480,7 @@
478
480
  --font-weight-for-button: 500;
479
481
  --font-weight-for-table-header: 600;
480
482
  --font-weight-for-text-as-bold: 600;
481
- --margin-for-table-header: 16px;
483
+ --margin-for-table-header: 8px;
482
484
  --margin-for-table-cell-as-condensed: 8px;
483
485
  --margin-for-view-switcher-icon: 0 var(--spacing-20) 0 0;
484
486
  --margin-for-group-heading-select-input-options: 8px;
package/materials/custom-properties.json CHANGED
@@ -139,6 +139,8 @@
139
139
  "--background-color-for-button-as-icon-as-info-when-hovered": "#078cdf",
140
140
  "--background-color-for-button-as-urgent-when-active": "#DC630A",
141
141
  "--background-color-for-button-as-urgent-when-hovered": "#E7680D",
142
+ "--background-color-for-button-as-critical-when-active": "#B3003E",
143
+ "--background-color-for-button-as-critical-when-hovered": "#CC0047",
142
144
  "--background-color-for-button-when-disabled": "hsl(195, 35.2941176471%, 95%)",
143
145
  "--background-color-for-input": "#fff",
144
146
  "--background-color-for-input-when-selected": "hsl(195, 35.2941176471%, 95%)",
@@ -384,7 +386,7 @@
384
386
  "--font-weight-for-button": "500",
385
387
  "--font-weight-for-table-header": "600",
386
388
  "--font-weight-for-text-as-bold": "600",
387
- "--margin-for-table-header": "16px",
389
+ "--margin-for-table-header": "8px",
388
390
  "--margin-for-table-cell-as-condensed": "8px",
389
391
  "--margin-for-view-switcher-icon": "0 var(--spacing-20) 0 0",
390
392
  "--margin-for-group-heading-select-input-options": "8px",
package/materials/internals/definition.yaml CHANGED
@@ -482,6 +482,10 @@ decisionGroupsByTheme:
482
482
  choice: '#DC630A' # color-warning with 10% black opacity
483
483
  background-color-for-button-as-urgent-when-hovered:
484
484
  choice: '#E7680D' # color-warning with 5% black opacity
485
+ background-color-for-button-as-critical-when-active:
486
+ choice: '#B3003E' # color-error with 10% black opacity
487
+ background-color-for-button-as-critical-when-hovered:
488
+ choice: '#CC0047' # color-error with 5% black opacity
485
489
  background-color-for-button-when-disabled:
486
490
  choice: color-accent-95
487
491
  background-color-for-input:
@@ -1049,7 +1053,7 @@ decisionGroupsByTheme:
1049
1053
  prefix: margin
1050
1054
  decisions:
1051
1055
  margin-for-table-header:
1052
- choice: spacing-30
1056
+ choice: spacing-20
1053
1057
  margin-for-table-cell-as-condensed:
1054
1058
  choice: spacing-20
1055
1059
  margin-for-view-switcher-icon:
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.2.0",
4
+ "version": "16.3.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.2.0",
28
+ "@commercetools-uikit/hooks": "16.3.0",
29
29
  "@emotion/react": "^11.10.5",
30
30
  "lodash": "4.17.21",
31
31
  "prop-types": "15.8.1",