@commercetools-uikit/icon-button 18.0.0 → 18.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 (5) hide show
  1. package/dist/commercetools-uikit-icon-button.cjs.dev.js +18 -18
  2. package/dist/commercetools-uikit-icon-button.cjs.prod.js +4 -4
  3. package/dist/commercetools-uikit-icon-button.esm.js +18 -18
  4. package/dist/declarations/src/icon-button.d.ts +1 -1
  5. package/package.json +6 -6
package/dist/commercetools-uikit-icon-button.cjs.prod.js CHANGED
@@ -88,7 +88,7 @@ const getBaseStyles = (theme, isDisabled, isActive) => {
88
88
  return /*#__PURE__*/react.css("&,&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenDisabled, ";border-color:", designSystem.designTokens.colorSurface, ";color:", designSystem.designTokens.colorNeutral60, ";box-shadow:none;}" + ("" ), "" );
89
89
  }
90
90
  if (!theme || theme === 'default') {
91
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadow0, ";border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
91
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonWhenActive, ";box-shadow:", designSystem.designTokens.shadow0, ";border-color:", designSystem.designTokens.borderColorForButtonAsSecondary, ";}" + ("" ), "" );
92
92
  }
93
93
  switch (theme) {
94
94
  // TODO: These custom colors where itroduced in the Merchant Center redign 2023
@@ -96,7 +96,7 @@ const getBaseStyles = (theme, isDisabled, isActive) => {
96
96
  // #15A390 -> color-primary with 10% black opacity
97
97
  // #057FCC -> color-info with 10% black opacity
98
98
  case 'primary':
99
- return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorPrimary, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:#15a390;box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
99
+ return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimaryWhenHovered, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:", designSystem.designTokens.backgroundColorForButtonAsPrimary, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
100
100
  case 'info':
101
101
  return /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.colorInfo, ";box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:active{background-color:#057fcc;box-shadow:", designSystem.designTokens.shadow0, ";}", isActive ? '&,' : '', " &:hover,&:active{border-color:", designSystem.designTokens.colorNeutral, ";}" + ("" ), "" );
102
102
  default:
@@ -133,7 +133,7 @@ const IconButton = props => {
133
133
  isToggleButton: props.isToggleButton,
134
134
  isToggled: props.isToggled,
135
135
  isDisabled: props.isDisabled,
136
- css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.designTokens.colorNeutral, ";background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.colorSolid, ";transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getBaseStyles(props.theme, props.isDisabled, isActive), getShapeStyles('square', props.size), getSizeStyles(props.size), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
136
+ css: [/*#__PURE__*/react.css("width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:1px solid ", designSystem.designTokens.borderColorForButtonAsSecondary, ";background-color:", designSystem.designTokens.colorSurface, ";box-shadow:", designSystem.designTokens.shadow0, ";color:", designSystem.designTokens.fontColorForButtonAsSecondary, ";*{fill:", designSystem.designTokens.fontColorForButtonAsSecondary, ";}transition:background-color ", designSystem.designTokens.transitionLinear80Ms, ",box-shadow 150ms ease-in-out;" + ("" ), "" ), getBaseStyles(props.theme, props.isDisabled, isActive), getShapeStyles('square', props.size), getSizeStyles(props.size), getHoverStyles(props.isDisabled, props.theme), "" , "" ],
137
137
  children: props.icon && /*#__PURE__*/react$1.cloneElement(props.icon, {
138
138
  size: props.size,
139
139
  color: getIconThemeColor(props)
@@ -146,7 +146,7 @@ IconButton.displayName = 'IconButton';
146
146
  var IconButton$1 = IconButton;
147
147
 
148
148
  // NOTE: This string will be replaced on build time with the package version.
149
- var version = "18.0.0";
149
+ var version = "18.2.0";
150
150
 
151
151
  exports["default"] = IconButton$1;
152
152
  exports.version = version;