@zendeskgarden/react-buttons 8.74.2 → 8.75.0

package/dist/index.cjs.js

@@ -61,7 +61,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -90,7 +90,7 @@ const StyledIcon = styled__default.default(_ref => {
   return React__namespace.default.cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -107,7 +107,7 @@ const getBorderRadius = props => {
   return props.theme.borderRadii.md;
 };
 const getDisabledBackgroundColor = props => {
-  return reactTheming.getColor('neutralHue', 200, props.theme);
+  return reactTheming.getColorV8('neutralHue', 200, props.theme);
 };
 const getHeight = props => {
   if (props.size === 'small') {
@@ -128,12 +128,12 @@ const colorStyles = props => {
     hue = 'primaryHue';
   }
   const shade = 600;
-  const baseColor = reactTheming.getColor(hue, shade, props.theme);
-  const hoverColor = reactTheming.getColor(hue, shade + 100, props.theme);
-  const activeColor = reactTheming.getColor(hue, shade + 200, props.theme);
-  const focusColor = reactTheming.getColor('primaryHue', shade, props.theme);
+  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.getColor(hue, shade - 200, props.theme);
+  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,
@@ -154,8 +154,8 @@ const colorStyles = props => {
       } : undefined
     }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColor('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
+    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 ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, polished.rgba(baseColor, 0.08), hoverForegroundColor, reactTheming.focusStyles({
@@ -164,7 +164,7 @@ const colorStyles = props => {
       styles: props.isNeutral ? {
         borderColor: baseColor
       } : undefined
-    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    }), !props.isBasic && activeColor, polished.rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && reactTheming.getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
@@ -189,7 +189,7 @@ const groupStyles = props => {
   const iconMarginDisplacement = isPill && '-2px';
   const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
   const borderColor = isBasic ? 'transparent' : 'revert';
-  const focusColor = reactTheming.getColor('primaryHue', 600, theme);
+  const focusColor = reactTheming.getColorV8('primaryHue', 600, theme);
   const focusBoxShadow = isBasic && !isSelected && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -228,7 +228,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -241,7 +241,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': '8.74.2',
+  'data-garden-version': '8.75.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -275,7 +275,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': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -287,9 +287,9 @@ StyledExternalIcon.defaultProps = {
 const COMPONENT_ID = 'buttons.icon_button';
 const iconColorStyles = props => {
   const shade = 600;
-  const baseColor = reactTheming.getColor('neutralHue', shade, props.theme);
-  const hoverColor = reactTheming.getColor('neutralHue', shade + 100, props.theme);
-  const activeColor = reactTheming.getColor('neutralHue', shade + 200, props.theme);
+  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);
   return styled.css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
 const iconButtonStyles = props => {
@@ -302,7 +302,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

package/dist/index.esm.js

@@ -10,7 +10,7 @@ import React__default, { Children, createContext, useContext, forwardRef, useSta
 import PropTypes from 'prop-types';
 import mergeRefs from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColor, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, SELECTOR_FOCUS_VISIBLE, getColorV8, focusStyles, getFocusBoxShadow, useText } from '@zendeskgarden/react-theming';
 import { rgba, math, em } from 'polished';
 import { useSelection } from '@zendeskgarden/container-selection';
 import { getControlledValue } from '@zendeskgarden/container-utilities';
@@ -35,7 +35,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -64,7 +64,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -81,7 +81,7 @@ const getBorderRadius = props => {
   return props.theme.borderRadii.md;
 };
 const getDisabledBackgroundColor = props => {
-  return getColor('neutralHue', 200, props.theme);
+  return getColorV8('neutralHue', 200, props.theme);
 };
 const getHeight = props => {
   if (props.size === 'small') {
@@ -102,12 +102,12 @@ const colorStyles = props => {
     hue = 'primaryHue';
   }
   const shade = 600;
-  const baseColor = getColor(hue, shade, props.theme);
-  const hoverColor = getColor(hue, shade + 100, props.theme);
-  const activeColor = getColor(hue, shade + 200, props.theme);
-  const focusColor = getColor('primaryHue', shade, props.theme);
+  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 = getColor(hue, shade - 200, props.theme);
+  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,
@@ -128,8 +128,8 @@ const colorStyles = props => {
       } : undefined
     }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
+    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 ", ",&[data-garden-focus-visible] ", "{color:", ";}&:active ", "{color:", ";}&:disabled ", "{color:", ";}"], !props.isBasic && borderColor, foregroundColor, !props.isBasic && hoverBorderColor, rgba(baseColor, 0.08), hoverForegroundColor, focusStyles({
@@ -138,7 +138,7 @@ const colorStyles = props => {
       styles: props.isNeutral ? {
         borderColor: baseColor
       } : undefined
-    }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColor('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && getColor('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
+    }), !props.isBasic && activeColor, rgba(baseColor, 0.2), !props.isNeutral && activeColor, disabledBackgroundColor, disabledForegroundColor, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade, props.theme), StyledIcon, StyledIcon, StyledIcon, props.isNeutral && getColorV8('neutralHue', shade + 100, props.theme), StyledIcon, props.isNeutral && foregroundColor, StyledIcon, disabledForegroundColor);
   }
   return retVal;
 };
@@ -163,7 +163,7 @@ const groupStyles = props => {
   const iconMarginDisplacement = isPill && '-2px';
   const disabledBackgroundColor = !isPrimary && getDisabledBackgroundColor(props);
   const borderColor = isBasic ? 'transparent' : 'revert';
-  const focusColor = getColor('primaryHue', 600, theme);
+  const focusColor = getColorV8('primaryHue', 600, theme);
   const focusBoxShadow = isBasic && !isSelected && !isPrimary && getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -202,7 +202,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -215,7 +215,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.74.2',
+  'data-garden-version': '8.75.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -249,7 +249,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -261,9 +261,9 @@ StyledExternalIcon.defaultProps = {
 const COMPONENT_ID = 'buttons.icon_button';
 const iconColorStyles = props => {
   const shade = 600;
-  const baseColor = getColor('neutralHue', shade, props.theme);
-  const hoverColor = getColor('neutralHue', shade + 100, props.theme);
-  const activeColor = getColor('neutralHue', shade + 200, props.theme);
+  const baseColor = getColorV8('neutralHue', shade, props.theme);
+  const hoverColor = getColorV8('neutralHue', shade + 100, props.theme);
+  const activeColor = getColorV8('neutralHue', shade + 200, props.theme);
   return css(["color:", ";&:hover{color:", ";}&:active,&[aria-pressed='true'],&[aria-pressed='mixed']{color:", ";}"], baseColor, hoverColor, activeColor);
 };
 const iconButtonStyles = props => {
@@ -276,7 +276,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.74.2'
+  'data-garden-version': '8.75.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

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

@@ -14,4 +14,4 @@ export declare const StyledAnchor: import("styled-components").StyledComponent<"
     dir: "rtl" | undefined;
     isLink: boolean;
     type: undefined;
-}, "type" | "dir" | "data-garden-id" | "data-garden-version" | "as" | "isLink">;
+}, "type" | "dir" | "as" | "data-garden-id" | "data-garden-version" | "isLink">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.74.2",
+  "version": "8.75.0",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -34,7 +34,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.74.2",
+    "@zendeskgarden/react-theming": "^8.75.0",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "be0e20f0b016a227ed1ab6b5b13cb04971969d3b"
+  "gitHead": "56a54793a611efc223b8e36262d428365613c853"
 }