@zendeskgarden/react-buttons 9.0.0-next.4 → 9.0.0-next.5

package/dist/index.cjs.js

@@ -57,7 +57,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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -86,7 +86,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': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -103,7 +103,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') {
@@ -124,12 +124,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,
@@ -150,7 +150,7 @@ 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 borderColor = props.isNeutral && !props.isDanger ? reactTheming.getColorV8('neutralHue', 300, props.theme) : baseColor;
     const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
@@ -160,7 +160,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;
 };
@@ -184,7 +184,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 && !isPrimary && reactTheming.getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -223,7 +223,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default.default.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -236,7 +236,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.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -270,7 +270,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.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -282,9 +282,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 => {
@@ -297,7 +297,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default.default(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { Children, createContext, useContext, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } 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';
 
 function _extends$2() {
@@ -32,7 +32,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledSplitButton = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledSplitButton",
   componentId: "sc-1u4v04v-0"
@@ -61,7 +61,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -78,7 +78,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') {
@@ -99,12 +99,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,
@@ -125,7 +125,7 @@ const colorStyles = props => {
       } : undefined
     }), activeColor, props.isPrimary && activeColor, disabledBackgroundColor, disabledForegroundColor);
   } else {
-    const borderColor = props.isNeutral && !props.isDanger ? getColor('neutralHue', 300, props.theme) : baseColor;
+    const borderColor = props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
     const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;
@@ -135,7 +135,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;
 };
@@ -159,7 +159,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 && !isPrimary && getFocusBoxShadow({
     theme,
     inset: focusInset,
@@ -198,7 +198,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -211,7 +211,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '9.0.0-next.4',
+  'data-garden-version': '9.0.0-next.5',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -245,7 +245,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': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -257,9 +257,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 => {
@@ -272,7 +272,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.4'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "9.0.0-next.4",
+  "version": "9.0.0-next.5",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -30,10 +30,10 @@
     "@zendeskgarden/react-theming": "^8.67.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.4",
+    "@zendeskgarden/react-theming": "^9.0.0-next.5",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "749220247e3a22d2d502dcb3691d81e6a3d52b02"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }