@zendeskgarden/react-buttons 9.0.0-next.9 → 9.1.0

package/dist/esm/styled/StyledIconButton.js

@@ -5,35 +5,57 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
-import { StyledButton, getHeight } from './StyledButton.js';
+import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
+import { StyledButton, COMPONENT_ID as COMPONENT_ID$1, getHeight } from './StyledButton.js';
 import { StyledIcon } from './StyledIcon.js';
 
 const COMPONENT_ID = 'buttons.icon_button';
-const iconColorStyles = props => {
-  const shade = 600;
-  const baseColor = getColorV8('neutralHue', shade, props.theme);
-  const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
-  const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
+const iconColorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const baseColor = getColor(options);
+  const hoverColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
   return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
 const iconButtonStyles = props => {
   const width = getHeight(props);
-  return css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.isBasic && 'none', width, width, props.isBasic && !(props.isPrimary || props.isDanger || props.disabled) && iconColorStyles(props), !props.isPrimary && 'transparent');
+  return css(["border:", ";padding:0;width:", ";min-width:", ";", ";&:disabled{background-color:", ";}"], props.$isBasic && 'none', width, width, props.$isBasic && !(props.$isPrimary || props.$isDanger || props.disabled) && iconColorStyles(props), !props.$isPrimary && 'transparent');
 };
 const iconStyles = props => {
   const size = props.theme.iconSizes.md;
   return css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
 };
-const StyledIconButton = styled(StyledButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+const StyledIconButton = styled(StyledButton).attrs(props => {
+  const externalId = props['data-garden-id'];
+  return {
+    'data-garden-id': externalId && externalId !== COMPONENT_ID$1 ? externalId : COMPONENT_ID,
+    'data-garden-version': '9.1.0'
+  };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledIconButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
+})(["", ";& ", "{", "}", ";"], iconButtonStyles, StyledIcon, iconStyles, props => retrieveComponentStyles(props['data-garden-id'], props));
 
-export { StyledIconButton };
+export { COMPONENT_ID, StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -5,18 +5,15 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.9'
+  'data-garden-version': '9.1.0'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
 })(["display:inline-flex;position:relative;z-index:0;direction:", ";white-space:nowrap;", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
-StyledSplitButton.defaultProps = {
-  theme: DEFAULT_THEME
-};
 
 export { StyledSplitButton };