@commercetools-uikit/primary-button 19.0.0 → 19.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.
@@ -40,9 +40,9 @@ const getSizeStyles = size => {
40
40
  // rendering the same style for now to not introduce a breaking change
41
41
  case 'small':
42
42
  case 'medium':
43
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsMedium, ";" + ("" ), "" );
43
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
44
44
  case 'big':
45
- return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";border-radius:", designSystem.designTokens.borderRadiusForButtonAsBig, ";" + ("" ), "" );
45
+ return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" );
46
46
  default:
47
47
  return /*#__PURE__*/react.css("" , "" );
48
48
  }
@@ -56,7 +56,7 @@ var _ref2 = {
56
56
  styles: "background-color:#dc630a;&:focus,&:hover{background-color:#e7680d;}"
57
57
  } ;
58
58
  const getButtonStyles = (isDisabled, isActive, tone, size) => {
59
- const baseStyles = /*#__PURE__*/react.css("align-items:center;color:", designSystem.designTokens.colorSurface, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ";padding:", designSystem.designTokens.paddingForButton, ";", getSizeStyles(size), ";" + ("" ), "" );
59
+ const baseStyles = /*#__PURE__*/react.css("align-items:center;color:", designSystem.designTokens.colorSurface, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ";padding:0 ", designSystem.designTokens.spacing30, ";border-radius:", designSystem.designTokens.borderRadius4, ";", getSizeStyles(size), ";" + ("" ), "" );
60
60
  // "disabled" takes precendece over "active"
61
61
  if (isDisabled) {
62
62
  return [baseStyles, /*#__PURE__*/react.css("&,&:active,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:", designSystem.designTokens.shadow0, ";}" + ("" ), "" )];
@@ -68,7 +68,7 @@ const getButtonStyles = (isDisabled, isActive, tone, size) => {
68
68
  // TODO: This custom colors where itroduced in the Merchant Center redign 2023
69
69
  // We need to check with designers if we want to introduce them in our color palette
70
70
  // They are 'color-primary' with 10% and 5% black opacity
71
- return [baseActiveStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimary, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryAsDefaultWhenHovered, ";}" + ("" ), "" )];
71
+ return [baseActiveStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:focus,&:hover{background-color:", designSystem.designTokens.colorPrimary40, ";}" + ("" ), "" )];
72
72
  case 'urgent':
73
73
  // TODO: This custom colors where itroduced in the Merchant Center redign 2023
74
74
  // We need to check with designers if we want to introduce them in our color palette
@@ -89,12 +89,12 @@ const getButtonStyles = (isDisabled, isActive, tone, size) => {
89
89
  // TODO: This custom colors where itroduced in the Merchant Center redign 2023
90
90
  // We need to check with designers if we want to introduce them in our color palette
91
91
  // They are 'color-primary' with 10% and 5% black opacity
92
- return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryAsDefaultWhenHovered, ";}&:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryAsDefaultWhenActive, ";}" + ("" ), "" )];
92
+ return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorPrimary, ";&:focus,&:hover{background-color:", designSystem.designTokens.colorPrimary40, ";}&:active{background-color:", designSystem.designTokens.colorPrimary25, ";}" + ("" ), "" )];
93
93
  case 'urgent':
94
94
  // TODO: This custom colors where itroduced in the Merchant Center redign 2023
95
95
  // We need to check with designers if we want to introduce them in our color palette
96
96
  // They are 'color-warning' with 10% and 5% black opacity
97
- return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryAsUrgent, ";&:focus,&:hover{background-color:#e7680d;}&:active{background-color:#dc630a;}" + ("" ), "" )];
97
+ return [baseDefaultStyles, /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorWarning60, ";&:focus,&:hover{background-color:#e7680d;}&:active{background-color:#dc630a;}" + ("" ), "" )];
98
98
  case 'critical':
99
99
  // TODO: These custom colors where itroduced in the Merchant Center redign 2023
100
100
  // We need to check with designers if we want to introduce them in our color palette
@@ -155,7 +155,7 @@ PrimaryButton.displayName = 'PrimaryButton';
155
155
  var PrimaryButton$1 = PrimaryButton;
156
156
 
157
157
  // NOTE: This string will be replaced on build time with the package version.
158
- var version = "19.0.0";
158
+ var version = "19.2.0";
159
159
 
160
160
  exports["default"] = PrimaryButton$1;
161
161
  exports.version = version;