@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, ";
|
|
43
|
+
return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsMedium, ";" + ("" ), "" );
|
|
44
44
|
case 'big':
|
|
45
|
-
return /*#__PURE__*/react.css("height:", designSystem.designTokens.heightForButtonAsBig, ";
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
158
|
+
var version = "19.2.0";
|
|
159
159
|
|
|
160
160
|
exports["default"] = PrimaryButton$1;
|
|
161
161
|
exports.version = version;
|