@zendeskgarden/react-buttons 9.0.0-next.10 → 9.0.0-next.12

package/dist/esm/styled/StyledAnchor.js

@@ -11,7 +11,7 @@ import { StyledButton } from './StyledButton.js';
 const COMPONENT_ID = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10',
+  'data-garden-version': '9.0.0-next.12',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -19,7 +19,7 @@ const StyledAnchor = styled(StyledButton).attrs(props => ({
 })).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => retrieveComponentStyles(props['data-garden-id'], props));
 StyledAnchor.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/StyledButton.js

@@ -5,8 +5,8 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { rgba, math, em } from 'polished';
-import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
+import { math, em } from 'polished';
+import { SELECTOR_FOCUS_VISIBLE, retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getFocusBoxShadow } from '@zendeskgarden/react-theming';
 import { StyledSplitButton } from './StyledSplitButton.js';
 import { StyledIcon } from './StyledIcon.js';
 
@@ -17,9 +17,6 @@ const getBorderRadius = props => {
   }
   return props.theme.borderRadii.md;
 };
-const getDisabledBackgroundColor = props => {
-  return getColorV8('neutralHue', 200, props.theme);
-};
 const getHeight = props => {
   if (props.size === 'small') {
     return `${props.theme.space.base * 8}px`;
@@ -28,65 +25,223 @@ const getHeight = props => {
   }
   return `${props.theme.space.base * 10}px`;
 };
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    isLink,
+    isBasic,
+    isDanger,
+    isNeutral,
+    isPrimary,
+    focusInset
+  } = _ref;
   let retVal;
-  let hue;
-  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
-    hue = 'neutralHue';
-  } else if (props.isDanger) {
-    hue = 'dangerHue';
-  } else {
-    hue = 'primaryHue';
-  }
-  const shade = 600;
-  const baseColor = getColorV8(hue, shade, props.theme);
-  const hoverColor = getColorV8(hue, shade + 100, props.theme);
-  const activeColor = getColorV8(hue, shade + 200, props.theme);
-  const focusColor = getColorV8('primaryHue', shade, props.theme);
-  const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  const disabledForegroundColor = getColorV8(hue, shade - 200, props.theme);
-  if (props.isLink) {
-    retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, focusStyles({
-      theme: props.theme,
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  if (isLink) {
+    const options = {
+      theme,
+      variable: isDanger ? 'foreground.danger' : 'foreground.primary'
+    };
+    const foregroundColor = getColor(options);
+    const hoverForegroundColor = getColor({
+      ...options,
+      ...offset100
+    });
+    const activeForegroundColor = getColor({
+      ...options,
+      ...offset200
+    });
+    const focusOutlineColor = getColor({
+      theme,
+      variable: 'border.primaryEmphasis'
+    });
+    retVal = css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], foregroundColor, focusStyles({
+      theme,
       condition: false,
       styles: {
-        color: baseColor,
-        outlineColor: focusColor
+        color: foregroundColor ,
+        outlineColor: focusOutlineColor
       }
-    }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary) {
-    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      shadowWidth: props.focusInset ? 'sm' : 'md',
-      spacerWidth: props.focusInset ? 'sm' : 'xs',
-      styles: props.isDanger && props.focusInset ? {
-        borderColor: focusColor
+    }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
+  } else if (isPrimary) {
+    let backgroundVariable;
+    if (isDanger) {
+      backgroundVariable = 'background.dangerEmphasis';
+    } else if (isNeutral) {
+      backgroundVariable = 'background.emphasis';
+    } else {
+      backgroundVariable = 'background.primaryEmphasis';
+    }
+    const options = {
+      theme,
+      variable: backgroundVariable
+    };
+    const backgroundColor = getColor(options);
+    const hoverBackgroundColor = getColor({
+      ...options,
+      ...offset100
+    });
+    const activeBackgroundColor = getColor({
+      ...options,
+      ...offset200
+    });
+    const foregroundColor = getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    retVal = css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, focusStyles({
+      theme,
+      inset: focusInset,
+      shadowWidth: focusInset ? 'sm' : 'md',
+      spacerWidth: focusInset ? 'sm' : 'xs',
+      styles: (isDanger || isNeutral) && focusInset ? {
+        borderColor: getColor({
+          theme,
+          variable: 'border.primaryEmphasis'
+        })
       } : undefined
-    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+    }), activeBackgroundColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? getColorV8('foreground', 600 , props.theme) : baseColor;
-    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
-    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      styles: props.isNeutral ? {
-        borderColor: baseColor
-      } : undefined
-    }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    let borderColor;
+    let hoverBorderColor;
+    let activeBorderColor;
+    let focusBorderColor;
+    let backgroundVariable;
+    let foregroundVariable;
+    if (isDanger) {
+      if (!isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.dangerEmphasis'
+        };
+        borderColor = getColor(borderOptions);
+        hoverBorderColor = getColor({
+          ...borderOptions,
+          ...offset100
+        });
+        activeBorderColor = getColor({
+          ...borderOptions,
+          ...offset200
+        });
+        if (isNeutral) {
+          focusBorderColor = getColor(borderOptions);
+        }
+      }
+      backgroundVariable = 'background.dangerEmphasis';
+      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
+    } else {
+      if (!isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.primaryEmphasis'
+        };
+        if (isNeutral) {
+          borderColor = getColor({
+            theme,
+            variable: 'border.default',
+            ...offset100
+          });
+          focusBorderColor = getColor(borderOptions);
+        } else {
+          borderColor = getColor(borderOptions);
+        }
+        hoverBorderColor = getColor({
+          ...borderOptions,
+          ...offset100
+        });
+        activeBorderColor = getColor({
+          ...borderOptions,
+          ...offset200
+        });
+      }
+      backgroundVariable = 'background.primaryEmphasis';
+      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
+    }
+    const hoverBackgroundColor = getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[100]
+    });
+    const activeBackgroundColor = getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[200]
+    });
+    const foregroundOptions = {
+      theme,
+      variable: foregroundVariable
+    };
+    const foregroundColor = getColor(foregroundOptions);
+    let hoverForegroundColor;
+    let activeForegroundColor;
+    let iconForegroundColor;
+    let hoverIconForegroundColor;
+    let activeIconForegroundColor;
+    if (isNeutral) {
+      const iconOptions = {
+        theme,
+        variable: 'foreground.subtle'
+      };
+      iconForegroundColor = getColor(iconOptions);
+      hoverIconForegroundColor = getColor({
+        ...iconOptions,
+        ...offset100
+      });
+      activeIconForegroundColor = getColor({
+        ...iconOptions,
+        ...offset200
+      });
+    } else {
+      hoverForegroundColor = getColor({
+        ...foregroundOptions,
+        ...offset100
+      });
+      activeForegroundColor = getColor({
+        ...foregroundOptions,
+        ...offset200
+      });
+    }
+    retVal = css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+      theme,
+      inset: focusInset,
+      styles: {
+        borderColor: focusBorderColor
+      }
+    }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, iconForegroundColor, StyledIcon, StyledIcon, hoverIconForegroundColor, StyledIcon, activeIconForegroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
-const groupStyles = props => {
-  const {
+const groupStyles = _ref2 => {
+  let {
     theme,
     isPrimary,
     isBasic,
     isPill,
     focusInset
-  } = props;
+  } = _ref2;
   const {
     rtl,
     borderWidths,
@@ -97,9 +252,15 @@ const groupStyles = props => {
   const marginOffset = borderWidths.sm;
   const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
   const iconMarginDisplacement = isPill && '-2px';
-  const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
+  const disabledBackgroundColor = !isPrimary && getColor({
+    theme,
+    variable: 'background.disabled'
+  });
   const borderColor = isBasic ? 'transparent' : 'revert';
-  const focusColor = getColorV8('primaryHue', 600, theme);
+  const focusColor = getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
   const focusBoxShadow = isBasic && !isPrimary && getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -141,8 +302,8 @@ const sizeStyles = props => {
   return retVal;
 };
 const StyledButton = styled.button.attrs(props => ({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.12',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -152,4 +313,4 @@ StyledButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledButton, getHeight };
+export { COMPONENT_ID, StyledButton, getHeight };

package/dist/esm/styled/StyledExternalIcon.js

@@ -11,7 +11,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"

package/dist/esm/styled/StyledIcon.js

@@ -19,7 +19,7 @@ const sizeStyles = props => {
 };
 const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"

package/dist/esm/styled/StyledIconButton.js

@@ -5,16 +5,38 @@
 * 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, DEFAULT_THEME, 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 => {
@@ -25,15 +47,18 @@ 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.10'
+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.0.0-next.12'
+  };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => retrieveComponentStyles(props['data-garden-id'], props));
 StyledIconButton.defaultProps = {
   theme: DEFAULT_THEME
 };
 
-export { StyledIconButton };
+export { COMPONENT_ID, StyledIconButton };

package/dist/esm/styled/StyledSplitButton.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"

package/dist/index.cjs.js

@@ -41,7 +41,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -62,7 +62,7 @@ const sizeStyles$1 = props => {
 };
 const StyledIcon = styled__default.default(reactTheming.StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -78,9 +78,6 @@ const getBorderRadius = props => {
   }
   return props.theme.borderRadii.md;
 };
-const getDisabledBackgroundColor = props => {
-  return reactTheming.getColorV8('neutralHue', 200, props.theme);
-};
 const getHeight = props => {
   if (props.size === 'small') {
     return `${props.theme.space.base * 8}px`;
@@ -89,65 +86,223 @@ const getHeight = props => {
   }
   return `${props.theme.space.base * 10}px`;
 };
-const colorStyles = props => {
+const colorStyles = _ref => {
+  let {
+    theme,
+    isLink,
+    isBasic,
+    isDanger,
+    isNeutral,
+    isPrimary,
+    focusInset
+  } = _ref;
   let retVal;
-  let hue;
-  if (props.disabled || props.isNeutral && props.isPrimary && !props.isDanger) {
-    hue = 'neutralHue';
-  } else if (props.isDanger) {
-    hue = 'dangerHue';
-  } else {
-    hue = 'primaryHue';
-  }
-  const shade = 600;
-  const baseColor = reactTheming.getColorV8(hue, shade, props.theme);
-  const hoverColor = reactTheming.getColorV8(hue, shade + 100, props.theme);
-  const activeColor = reactTheming.getColorV8(hue, shade + 200, props.theme);
-  const focusColor = reactTheming.getColorV8('primaryHue', shade, props.theme);
-  const disabledBackgroundColor = getDisabledBackgroundColor(props);
-  const disabledForegroundColor = reactTheming.getColorV8(hue, shade - 200, props.theme);
-  if (props.isLink) {
-    retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], baseColor, reactTheming.focusStyles({
-      theme: props.theme,
+  const disabledBackgroundColor = reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = reactTheming.getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  if (isLink) {
+    const options = {
+      theme,
+      variable: isDanger ? 'foreground.danger' : 'foreground.primary'
+    };
+    const foregroundColor = reactTheming.getColor(options);
+    const hoverForegroundColor = reactTheming.getColor({
+      ...options,
+      ...offset100
+    });
+    const activeForegroundColor = reactTheming.getColor({
+      ...options,
+      ...offset200
+    });
+    const focusOutlineColor = reactTheming.getColor({
+      theme,
+      variable: 'border.primaryEmphasis'
+    });
+    retVal = styled.css(["outline-color:transparent;background-color:transparent;color:", ";", " &:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}&:disabled{color:", ";}"], foregroundColor, reactTheming.focusStyles({
+      theme,
       condition: false,
       styles: {
-        color: baseColor,
-        outlineColor: focusColor
+        color: foregroundColor ,
+        outlineColor: focusOutlineColor
       }
-    }), hoverColor, activeColor, disabledForegroundColor);
-  } else if (props.isPrimary) {
-    retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active{background-color:", ";}&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], baseColor, props.theme.palette.white, hoverColor, reactTheming.focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      shadowWidth: props.focusInset ? 'sm' : 'md',
-      spacerWidth: props.focusInset ? 'sm' : 'xs',
-      styles: props.isDanger && props.focusInset ? {
-        borderColor: focusColor
+    }), hoverForegroundColor, activeForegroundColor, disabledForegroundColor);
+  } else if (isPrimary) {
+    let backgroundVariable;
+    if (isDanger) {
+      backgroundVariable = 'background.dangerEmphasis';
+    } else if (isNeutral) {
+      backgroundVariable = 'background.emphasis';
+    } else {
+      backgroundVariable = 'background.primaryEmphasis';
+    }
+    const options = {
+      theme,
+      variable: backgroundVariable
+    };
+    const backgroundColor = reactTheming.getColor(options);
+    const hoverBackgroundColor = reactTheming.getColor({
+      ...options,
+      ...offset100
+    });
+    const activeBackgroundColor = reactTheming.getColor({
+      ...options,
+      ...offset200
+    });
+    const foregroundColor = reactTheming.getColor({
+      theme,
+      variable: 'foreground.onEmphasis'
+    });
+    retVal = styled.css(["outline-color:transparent;background-color:", ";color:", ";&:hover{background-color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{background-color:", ";}&:disabled{background-color:", ";color:", ";}"], backgroundColor, foregroundColor, hoverBackgroundColor, reactTheming.focusStyles({
+      theme,
+      inset: focusInset,
+      shadowWidth: focusInset ? 'sm' : 'md',
+      spacerWidth: focusInset ? 'sm' : 'xs',
+      styles: (isDanger || isNeutral) && focusInset ? {
+        borderColor: reactTheming.getColor({
+          theme,
+          variable: 'border.primaryEmphasis'
+        })
       } : undefined
-    }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
+    }), activeBackgroundColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColorV8('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? reactTheming.getColorV8('foreground', 600 , props.theme) : baseColor;
-    const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
-    const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
-    retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
-      theme: props.theme,
-      inset: props.focusInset,
-      styles: props.isNeutral ? {
-        borderColor: baseColor
-      } : undefined
-    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    let borderColor;
+    let hoverBorderColor;
+    let activeBorderColor;
+    let focusBorderColor;
+    let backgroundVariable;
+    let foregroundVariable;
+    if (isDanger) {
+      if (!isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.dangerEmphasis'
+        };
+        borderColor = reactTheming.getColor(borderOptions);
+        hoverBorderColor = reactTheming.getColor({
+          ...borderOptions,
+          ...offset100
+        });
+        activeBorderColor = reactTheming.getColor({
+          ...borderOptions,
+          ...offset200
+        });
+        if (isNeutral) {
+          focusBorderColor = reactTheming.getColor(borderOptions);
+        }
+      }
+      backgroundVariable = 'background.dangerEmphasis';
+      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.danger';
+    } else {
+      if (!isBasic) {
+        const borderOptions = {
+          theme,
+          variable: 'border.primaryEmphasis'
+        };
+        if (isNeutral) {
+          borderColor = reactTheming.getColor({
+            theme,
+            variable: 'border.default',
+            ...offset100
+          });
+          focusBorderColor = reactTheming.getColor(borderOptions);
+        } else {
+          borderColor = reactTheming.getColor(borderOptions);
+        }
+        hoverBorderColor = reactTheming.getColor({
+          ...borderOptions,
+          ...offset100
+        });
+        activeBorderColor = reactTheming.getColor({
+          ...borderOptions,
+          ...offset200
+        });
+      }
+      backgroundVariable = 'background.primaryEmphasis';
+      foregroundVariable = isNeutral ? 'foreground.default' : 'foreground.primary';
+    }
+    const hoverBackgroundColor = reactTheming.getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[100]
+    });
+    const activeBackgroundColor = reactTheming.getColor({
+      theme,
+      variable: backgroundVariable,
+      transparency: theme.opacity[200]
+    });
+    const foregroundOptions = {
+      theme,
+      variable: foregroundVariable
+    };
+    const foregroundColor = reactTheming.getColor(foregroundOptions);
+    let hoverForegroundColor;
+    let activeForegroundColor;
+    let iconForegroundColor;
+    let hoverIconForegroundColor;
+    let activeIconForegroundColor;
+    if (isNeutral) {
+      const iconOptions = {
+        theme,
+        variable: 'foreground.subtle'
+      };
+      iconForegroundColor = reactTheming.getColor(iconOptions);
+      hoverIconForegroundColor = reactTheming.getColor({
+        ...iconOptions,
+        ...offset100
+      });
+      activeIconForegroundColor = reactTheming.getColor({
+        ...iconOptions,
+        ...offset200
+      });
+    } else {
+      hoverForegroundColor = reactTheming.getColor({
+        ...foregroundOptions,
+        ...offset100
+      });
+      activeForegroundColor = reactTheming.getColor({
+        ...foregroundOptions,
+        ...offset200
+      });
+    }
+    retVal = styled.css(["outline-color:transparent;border-color:", ";background-color:transparent;color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active,&[aria-pressed='true'],&[aria-pressed='mixed']{border-color:", ";background-color:", ";color:", ";}&:disabled{border-color:transparent;background-color:", ";color:", ";}& ", "{color:", ";}&:hover ", ",&:focus-visible ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], borderColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, reactTheming.focusStyles({
+      theme,
+      inset: focusInset,
+      styles: {
+        borderColor: focusBorderColor
+      }
+    }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, iconForegroundColor, StyledIcon, StyledIcon, hoverIconForegroundColor, StyledIcon, activeIconForegroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
-const groupStyles = props => {
-  const {
+const groupStyles = _ref2 => {
+  let {
     theme,
     isPrimary,
     isBasic,
     isPill,
     focusInset
-  } = props;
+  } = _ref2;
   const {
     rtl,
     borderWidths,
@@ -158,9 +313,15 @@ const groupStyles = props => {
   const marginOffset = borderWidths.sm;
   const marginDisplacement = `${isPrimary || isBasic ? '' : '-'}${marginOffset}`;
   const iconMarginDisplacement = isPill && '-2px';
-  const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
+  const disabledBackgroundColor = !isPrimary && reactTheming.getColor({
+    theme,
+    variable: 'background.disabled'
+  });
   const borderColor = isBasic ? 'transparent' : 'revert';
-  const focusColor = reactTheming.getColorV8('primaryHue', 600, theme);
+  const focusColor = reactTheming.getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
   const focusBoxShadow = isBasic && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -202,8 +363,8 @@ const sizeStyles = props => {
   return retVal;
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
-  'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.10',
+  'data-garden-id': props['data-garden-id'] || COMPONENT_ID$3,
+  'data-garden-version': '9.0.0-next.12',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -216,7 +377,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.10',
+  'data-garden-version': '9.0.0-next.12',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -224,7 +385,7 @@ const StyledAnchor = styled__default.default(StyledButton).attrs(props => ({
 })).withConfig({
   displayName: "StyledAnchor",
   componentId: "sc-xshgmo-0"
-})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
+})(["direction:", ";", ";"], props => props.theme.rtl && 'rtl', props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
 StyledAnchor.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -250,7 +411,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default.default(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '9.0.0-next.10'
+  'data-garden-version': '9.0.0-next.12'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -260,11 +421,33 @@ StyledExternalIcon.defaultProps = {
 };
 
 const COMPONENT_ID = 'buttons.icon_button';
-const iconColorStyles = props => {
-  const shade = 600;
-  const baseColor = reactTheming.getColorV8('neutralHue', shade, props.theme);
-  const hoverColor = reactTheming.getColorV8('neutralHue', shade + 100, props.theme);
-  const activeColor = reactTheming.getColorV8('neutralHue', shade + 200, props.theme);
+const iconColorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const baseColor = reactTheming.getColor(options);
+  const hoverColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = reactTheming.getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
   return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
 const iconButtonStyles = props => {
@@ -275,13 +458,16 @@ const iconStyles = props => {
   const size = props.theme.iconSizes.md;
   return styled.css(["width:", ";height:", ";& > svg{transition:opacity 0.15s ease-in-out;}"], size, size);
 };
-const StyledIconButton = styled__default.default(StyledButton).attrs({
-  'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.10'
+const StyledIconButton = styled__default.default(StyledButton).attrs(props => {
+  const externalId = props['data-garden-id'];
+  return {
+    'data-garden-id': externalId && externalId !== COMPONENT_ID$3 ? externalId : COMPONENT_ID,
+    'data-garden-version': '9.0.0-next.12'
+  };
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
-})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
+})(["", ";& ", "{", "}", ";"], props => iconButtonStyles(props), StyledIcon, props => iconStyles(props), props => reactTheming.retrieveComponentStyles(props['data-garden-id'], props));
 StyledIconButton.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };

package/dist/typings/styled/StyledAnchor.d.ts

@@ -7,11 +7,4 @@
 /**
  * Accepts all `<a>` props
  */
-export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").IButtonProps & {
-    'data-garden-id': string;
-    'data-garden-version': string;
-    as: string;
-    dir: "rtl" | undefined;
-    isLink: boolean;
-    type: undefined;
-}, "type" | "dir" | "as" | "data-garden-id" | "data-garden-version" | "isLink">;
+export declare const StyledAnchor: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./../types").IButtonProps, never>;

package/dist/typings/styled/StyledButton.d.ts

@@ -6,6 +6,7 @@
  */
 import { DefaultTheme, ThemeProps } from 'styled-components';
 import { IButtonProps } from '../types';
+export declare const COMPONENT_ID = "buttons.button";
 export declare const getHeight: (props: IButtonProps & ThemeProps<DefaultTheme>) => string;
 /**
  * 1. FF <input type="submit"> fix

package/dist/typings/styled/StyledIconButton.d.ts

@@ -6,7 +6,5 @@
  */
 import { DefaultTheme } from 'styled-components';
 import { IButtonProps } from '../types';
-export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, {
-    'data-garden-id': string;
-    'data-garden-version': string;
-} & IButtonProps, "data-garden-id" | "data-garden-version">;
+export declare const COMPONENT_ID = "buttons.icon_button";
+export declare const StyledIconButton: import("styled-components").StyledComponent<"button", DefaultTheme, IButtonProps, never>;

package/dist/typings/styled/index.d.ts

@@ -5,8 +5,8 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 export * from './StyledAnchor';
-export * from './StyledButton';
+export { StyledButton } from './StyledButton';
 export * from './StyledSplitButton';
 export * from './StyledExternalIcon';
 export * from './StyledIcon';
-export * from './StyledIconButton';
+export { StyledIconButton } from './StyledIconButton';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.10",
+  "version": "9.0.0-next.12",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.10",
+    "@zendeskgarden/react-theming": "^9.0.0-next.12",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "818e6100aa6676af7e972198b82516d330307d60"
+  "gitHead": "7925ff78236795111e2953efbce549839df3a86d"
 }