@commercetools-uikit/secondary-button 19.2.0 → 19.3.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 (4) hide show
  1. package/dist/commercetools-uikit-secondary-button.cjs.dev.js +19 -19
  2. package/dist/commercetools-uikit-secondary-button.cjs.prod.js +8 -8
  3. package/dist/commercetools-uikit-secondary-button.esm.js +19 -19
  4. package/package.json +6 -6
package/dist/commercetools-uikit-secondary-button.cjs.prod.js CHANGED
@@ -34,15 +34,15 @@ var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defin
34
34
  var Inline__default = /*#__PURE__*/_interopDefault(Inline);
35
35
  var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
36
36
 
37
- const getStateStyles = (isDisabled, isActive, theme) => {
37
+ const getStateStyles = (isDisabled, isActive, tone) => {
38
38
  if (isDisabled) {
39
39
  return /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";border:none;color:", designSystem.designTokens.colorNeutral60, ";&:focus,&:hover{color:", designSystem.designTokens.colorNeutral60, ";*{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" );
40
40
  }
41
41
  if (isActive) {
42
- const baseActiveStyles = [/*#__PURE__*/react.css("color:", designSystem.designTokens.fontColorForButtonAsSecondary, ";*{fill:", designSystem.designTokens.fontColorForButtonAsSecondary, ";}border:1px solid ", designSystem.designTokens.borderColorForButtonAsSecondary, ";box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorSurface, ";&:focus,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";}" + ("" ), "" )];
43
- switch (theme) {
42
+ const baseActiveStyles = [/*#__PURE__*/react.css("color:", designSystem.designTokens.fontColorForButtonAsSecondary, ";*{fill:", designSystem.designTokens.fontColorForButtonAsSecondary, ";}border:1px solid ", designSystem.designTokens.borderColorForButtonAsSecondary, ";box-shadow:", designSystem.designTokens.shadow0, ";background-color:", designSystem.designTokens.colorPrimary90, ";&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";}" + ("" ), "" )];
43
+ switch (tone) {
44
44
  case 'info':
45
- return [baseActiveStyles, /*#__PURE__*/react.css("color:", designSystem.designTokens.colorInfo, ";" + ("" ), "" )];
45
+ return [baseActiveStyles, /*#__PURE__*/react.css("color:", designSystem.designTokens.colorSolid, ";border-color:", designSystem.designTokens.colorInfo85, ";background-color:", designSystem.designTokens.colorInfo85, ";*{fill:", designSystem.designTokens.colorSolid, ";}&:hover{background-color:", designSystem.designTokens.colorInfo85, ";}" + ("" ), "" )];
46
46
  default:
47
47
  return baseActiveStyles;
48
48
  }
@@ -71,10 +71,10 @@ const getSizeStyles = size => {
71
71
  return /*#__PURE__*/react.css("" , "" );
72
72
  }
73
73
  };
74
- const getToneStyles = (tone, isDisabled) => {
74
+ const getToneStyles = (tone, isDisabled, isActive) => {
75
75
  switch (tone) {
76
76
  case 'info':
77
- return [!isDisabled && /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorInfo95, ";border-color:", designSystem.designTokens.colorInfo85, "!important;color:", designSystem.designTokens.colorSolid, ";*{fill:", designSystem.designTokens.colorSolid, ";}&:hover{background-color:", designSystem.designTokens.colorInfo90, ";border-color:", designSystem.designTokens.colorInfo85, ";}&:focus{border-color:", designSystem.designTokens.colorInfo85, ";}&:active{background-color:", designSystem.designTokens.colorInfo85, ";border-color:", designSystem.designTokens.colorInfo85, ";}" + ("" ), "" )];
77
+ return [!isDisabled && !isActive && /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorInfo95, ";border-color:", designSystem.designTokens.colorInfo85, "!important;color:", designSystem.designTokens.colorSolid, ";*{fill:", designSystem.designTokens.colorSolid, ";}&:hover{background-color:", designSystem.designTokens.colorInfo90, ";border-color:", designSystem.designTokens.colorInfo85, ";}&:focus{border-color:", designSystem.designTokens.colorInfo85, ";}&:active{background-color:", designSystem.designTokens.colorInfo85, ";border-color:", designSystem.designTokens.colorInfo85, ";}" + ("" ), "" )];
78
78
  default:
79
79
  return /*#__PURE__*/react.css("" , "" );
80
80
  }
@@ -108,7 +108,7 @@ const SecondaryButton = props => {
108
108
  }, utils.filterInvalidAttributes(props)), shouldUseLinkTag ? {
109
109
  to: props.to
110
110
  } : {});
111
- const containerStyles = [/*#__PURE__*/react.css("display:flex;align-items:center;padding:0 ", designSystem.designTokens.spacing30, ";height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" ), /*#__PURE__*/react.css("display:inline-flex;background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow ", designSystem.designTokens.transitionEaseinout150Ms, ";" + ("" ), "" ), getThemeStyles(props.theme), getStateStyles(props.isDisabled, isActive, props.theme), getSizeStyles(props.size), getToneStyles(props.tone, props.isDisabled)];
111
+ const containerStyles = [/*#__PURE__*/react.css("display:flex;align-items:center;padding:0 ", designSystem.designTokens.spacing30, ";height:", designSystem.designTokens.heightForButtonAsBig, ";" + ("" ), "" ), /*#__PURE__*/react.css("display:inline-flex;background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorNeutral, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow ", designSystem.designTokens.transitionEaseinout150Ms, ";" + ("" ), "" ), getThemeStyles(props.theme), getStateStyles(props.isDisabled, isActive, props.tone), getSizeStyles(props.size), getToneStyles(props.tone, props.isDisabled, isActive)];
112
112
  return jsxRuntime.jsx(AccessibleButton__default["default"], {
113
113
  as: shouldUseLinkTag ? reactRouterDom.Link : props.as,
114
114
  type: props.type,
@@ -140,7 +140,7 @@ SecondaryButton.defaultProps = defaultProps;
140
140
  var SecondaryButton$1 = SecondaryButton;
141
141
 
142
142
  // NOTE: This string will be replaced on build time with the package version.
143
- var version = "19.2.0";
143
+ var version = "19.3.1";
144
144
 
145
145
  exports["default"] = SecondaryButton$1;
146
146
  exports.version = version;