@zendeskgarden/react-forms 9.0.0-next.12 → 9.0.0-next.14

package/dist/esm/styled/common/StyledLabel.js

@@ -6,16 +6,19 @@
 */
 import styled from 'styled-components';
 import { hideVisually } from 'polished';
-import { getLineHeight, getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getLineHeight, getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.input_label';
 const StyledLabel = styled.label.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.12'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.14'
 })).withConfig({
   displayName: "StyledLabel",
   componentId: "sc-2utmsz-0"
-})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColorV8('foreground', 600 , props.theme), props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";vertical-align:middle;line-height:", ";color:", ";font-size:", ";font-weight:", ";&[hidden]{display:", ";vertical-align:", ";text-indent:", ";font-size:", ";", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md), props => getColor({
+  theme: props.theme,
+  variable: 'foreground.default'
+}), props => props.theme.fontSizes.md, props => props.isRegular ? props.theme.fontWeights.regular : props.theme.fontWeights.semibold, props => props.isRadio ? 'inline-block' : 'inline', props => props.isRadio && 'top', props => props.isRadio && '-100%', props => props.isRadio && '0', props => !props.isRadio && hideVisually(), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledLabel.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/common/StyledLegend.js

@@ -12,7 +12,7 @@ const COMPONENT_ID = 'forms.fieldset_legend';
 const StyledLegend = styled(StyledLabel).attrs({
   as: 'legend',
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledLegend",
   componentId: "sc-6s0zwq-0"

package/dist/esm/styled/common/StyledMessage.js

@@ -6,33 +6,50 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { getLineHeight, retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledMessageIcon } from './StyledMessageIcon.js';
 import { StyledLabel } from './StyledLabel.js';
 
-const validationStyles = props => {
-  const rtl = props.theme.rtl;
-  const padding = math(`${props.theme.space.base} * 2px + ${props.theme.iconSizes.md}`);
-  let color;
-  if (props.validation === 'error') {
-    color = getColorV8('dangerHue', 600, props.theme);
-  } else if (props.validation === 'success') {
-    color = getColorV8('successHue', 600, props.theme);
-  } else if (props.validation === 'warning') {
-    color = getColorV8('warningHue', 700, props.theme);
+const COMPONENT_ID = 'forms.input_message';
+const colorStyles = _ref => {
+  let {
+    theme,
+    validation
+  } = _ref;
+  let variable;
+  if (validation === 'error') {
+    variable = 'foreground.danger';
+  } else if (validation === 'success') {
+    variable = 'foreground.success';
+  } else if (validation === 'warning') {
+    variable = 'foreground.warning';
   } else {
-    color = getColorV8('neutralHue', 700, props.theme);
+    variable = 'foreground.subtle';
   }
-  return css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
+  const foregroundColor = getColor({
+    theme,
+    variable
+  });
+  return css(["color:", ";"], foregroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    validation
+  } = _ref2;
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = getLineHeight(theme.iconSizes.md, theme.fontSizes.sm);
+  const marginTop = `${theme.space.base}px`;
+  const paddingHorizontal = validation ? math(`${theme.space.base * 2} + ${theme.iconSizes.md}`) : undefined;
+  return css(["padding-", ":", ";line-height:", ";font-size:", ";", ":not([hidden]) + &{margin-top:", ";}"], theme.rtl ? 'right' : 'left', paddingHorizontal, lineHeight, fontSize, StyledLabel, marginTop);
 };
-const COMPONENT_ID = 'forms.input_message';
 const StyledMessage = styled.div.attrs(props => ({
   'data-garden-id': props['data-garden-id'] || COMPONENT_ID,
-  'data-garden-version': props['data-garden-version'] || '9.0.0-next.12'
+  'data-garden-version': props['data-garden-version'] || '9.0.0-next.14'
 })).withConfig({
   displayName: "StyledMessage",
   componentId: "sc-30hgg7-0"
-})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;line-height:", ";font-size:", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;margin-top:", ";}", ";"], props => props.theme.rtl && 'rtl', props => getLineHeight(props.theme.iconSizes.md, props.theme.fontSizes.sm), props => props.theme.fontSizes.sm, props => validationStyles(props), StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => math(`${props.theme.space.base} * 1px`), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["direction:", ";display:inline-block;position:relative;vertical-align:middle;", ";", ";& ", "{position:absolute;top:-1px;", ":0;}", ":not([hidden]) + &{display:block;}", ";"], props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, StyledMessageIcon, props => props.theme.rtl ? 'right' : 'left', StyledLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledMessage.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/common/StyledMessageIcon.js

@@ -32,7 +32,7 @@ const MessageIcon = _ref => {
 const COMPONENT_ID = 'forms.input_message_icon';
 const StyledMessageIcon = styled(MessageIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   'aria-hidden': null
 }).withConfig({
   displayName: "StyledMessageIcon",

package/dist/esm/styled/file-list/StyledFile.js

@@ -5,47 +5,68 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledFileClose } from './StyledFileClose.js';
 
 const COMPONENT_ID = 'forms.file';
-const colorStyles = props => {
-  let borderColor;
-  let focusBorderColor;
-  let foregroundColor;
-  if (props.validation === 'success') {
-    borderColor = getColorV8('successHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
-  } else if (props.validation === 'error') {
-    borderColor = getColorV8('dangerHue', 600, props.theme);
-    focusBorderColor = borderColor;
-    foregroundColor = borderColor;
+const colorStyles = _ref => {
+  let {
+    theme,
+    focusInset,
+    validation
+  } = _ref;
+  let borderVariable;
+  let focusBorderVariable;
+  let foregroundVariable;
+  if (validation === 'success') {
+    borderVariable = 'border.successEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.success';
+  } else if (validation === 'error') {
+    borderVariable = 'border.dangerEmphasis';
+    focusBorderVariable = borderVariable;
+    foregroundVariable = 'foreground.danger';
   } else {
-    borderColor = getColorV8('neutralHue', 300, props.theme);
-    focusBorderColor = getColorV8('primaryHue', 600, props.theme);
-    foregroundColor = getColorV8('foreground', 600 , props.theme);
+    borderVariable = 'border.default';
+    focusBorderVariable = 'border.primaryEmphasis';
+    foregroundVariable = 'foreground.default';
   }
+  const borderColor = getColor({
+    theme,
+    variable: borderVariable
+  });
+  const focusBorderColor = getColor({
+    theme,
+    variable: focusBorderVariable
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: foregroundVariable
+  });
   return css(["border-color:", ";color:", ";", ""], borderColor, foregroundColor, focusStyles({
-    theme: props.theme,
-    inset: props.focusInset,
+    theme,
+    inset: focusInset,
     color: {
-      hue: focusBorderColor
+      variable: focusBorderVariable
     },
     styles: {
       borderColor: focusBorderColor
     }
   }));
 };
-const sizeStyles = props => {
-  const size = `${props.theme.space.base * (props.isCompact ? 7 : 10)}px`;
-  const spacing = `${props.theme.space.base * (props.isCompact ? 2 : 3)}px`;
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const size = `${theme.space.base * (isCompact ? 7 : 10)}px`;
+  const spacing = `${theme.space.base * (isCompact ? 2 : 3)}px`;
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return `
     box-sizing: border-box;
-    border: ${props.theme.borders.sm};
-    border-radius: ${props.theme.borderRadii.md};
+    border: ${theme.borders.sm};
+    border-radius: ${theme.borderRadii.md};
     padding: 0 ${spacing};
     height: ${size};
     line-height: ${lineHeight};
@@ -58,13 +79,13 @@ const sizeStyles = props => {
     & > ${StyledFileClose} {
       width: ${size};
       height: ${size};
-      margin-${props.theme.rtl ? 'left' : 'right'}: -${spacing};
+      margin-${theme.rtl ? 'left' : 'right'}: -${spacing};
     }
   `;
 };
 const StyledFile = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFile",
   componentId: "sc-195lzp1-0"

package/dist/esm/styled/file-list/StyledFileClose.js

@@ -5,16 +5,19 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.file.close';
 const StyledFileClose = styled.button.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileClose",
   componentId: "sc-1m31jbf-0"
-})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => getColorV8('foreground', 600 , props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["display:flex;flex-shrink:0;align-items:center;justify-content:center;transition:opacity 0.25s ease-in-out;opacity:0.8;border:none;background:transparent;cursor:pointer;color:", ";appearance:none;&:hover{opacity:0.9;}&:focus{outline:none;}", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'foreground.subtle'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFileClose.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/file-list/StyledFileDelete.js

@@ -5,17 +5,20 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { StyledFileClose } from './StyledFileClose.js';
 
 const COMPONENT_ID = 'forms.file.delete';
 const StyledFileDelete = styled(StyledFileClose).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileDelete",
   componentId: "sc-a8nnhx-0"
-})(["color:", ";", ";"], props => getColorV8('dangerHue', 600, props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["color:", ";", ";"], props => getColor({
+  theme: props.theme,
+  variable: 'foreground.danger'
+}), props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFileDelete.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/file-list/StyledFileIcon.js

@@ -4,17 +4,37 @@
 * Use of this source code is governed under the Apache License, Version 2.0
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
-import styled from 'styled-components';
-import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'forms.file.icon';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $validation
+  } = _ref;
+  const color = $validation ? undefined : getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  return css(["color:", ";"], color);
+};
+const sizeStyles = _ref2 => {
+  let {
+    $isCompact,
+    theme
+  } = _ref2;
+  const width = $isCompact ? theme.iconSizes.sm : theme.iconSizes.md;
+  const margin = `${theme.space.base * 2}px`;
+  return css(["width:", ";margin-", ":", ";"], width, theme.rtl ? 'left' : 'right', margin);
+};
 const StyledFileIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileIcon",
   componentId: "sc-7b3q0c-0"
-})(["flex-shrink:0;width:", ";margin-", ":", "px;", ";"], props => props.$isCompact ? props.theme.iconSizes.sm : props.theme.iconSizes.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["flex-shrink:0;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledFileIcon.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/file-list/StyledFileList.js

@@ -10,7 +10,7 @@ import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-the
 const COMPONENT_ID = 'forms.file_list';
 const StyledFileList = styled.ul.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileList",
   componentId: "sc-gbahjg-0"

package/dist/esm/styled/file-list/StyledFileListItem.js

@@ -12,7 +12,7 @@ import { StyledFileUpload } from '../file-upload/StyledFileUpload.js';
 const COMPONENT_ID = 'forms.file_list.item';
 const StyledFileListItem = styled.li.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileListItem",
   componentId: "sc-1ova3lo-0"

package/dist/esm/styled/file-upload/StyledFileUpload.js

@@ -5,37 +5,106 @@
 * found at http://www.apache.org/licenses/LICENSE-2.0.
 */
 import styled, { css } from 'styled-components';
-import { rgba, math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
 import { StyledLabel } from '../common/StyledLabel.js';
 import { StyledHint } from '../common/StyledHint.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
 const COMPONENT_ID = 'forms.file_upload';
-const colorStyles = props => {
-  const baseColor = getColorV8('primaryHue', 600, props.theme);
-  const hoverColor = getColorV8('primaryHue', 700, props.theme);
-  const activeColor = getColorV8('primaryHue', 800, props.theme);
-  const disabledBackgroundColor = getColorV8('neutralHue', 200, props.theme);
-  const disabledForegroundColor = getColorV8('neutralHue', 400, props.theme);
-  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], props.isDragging ? activeColor : getColorV8('neutralHue', 600, props.theme), props.isDragging && rgba(baseColor, 0.2), props.isDragging ? activeColor : baseColor, hoverColor, rgba(baseColor, 0.08), hoverColor, focusStyles({
-    theme: props.theme,
-    color: {
-      hue: baseColor
+const colorStyles = _ref => {
+  let {
+    theme,
+    isDragging
+  } = _ref;
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const foregroundOptions = {
+    theme,
+    variable: 'foreground.primary'
+  };
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
     }
-  }), activeColor, rgba(baseColor, 0.2), activeColor, disabledForegroundColor, disabledBackgroundColor, disabledForegroundColor);
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const foregroundColor = getColor(foregroundOptions);
+  const hoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset100
+  });
+  const activeBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const activeForegroundColor = getColor({
+    ...foregroundOptions,
+    ...offset200
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";color:", ";}", " &:active{border-color:", ";background-color:", ";color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isDragging ? activeBorderColor : borderColor, isDragging ? activeBackgroundColor : undefined, isDragging ? activeForegroundColor : foregroundColor, hoverBorderColor, hoverBackgroundColor, hoverForegroundColor, focusStyles({
+    theme
+  }), activeBorderColor, activeBackgroundColor, activeForegroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
 };
-const sizeStyles = props => {
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  const paddingHorizontal = `${props.isCompact ? 2 : 4}em`;
-  const paddingVertical = math(`${props.theme.space.base * (props.isCompact ? 2.5 : 5)} - ${props.theme.borderWidths.sm}`);
-  const fontSize = props.theme.fontSizes.md;
-  const lineHeight = getLineHeight(props.theme.space.base * 5, fontSize);
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  const paddingHorizontal = `${isCompact ? 2 : 4}em`;
+  const paddingVertical = math(`${theme.space.base * (isCompact ? 2.5 : 5)} - ${theme.borderWidths.sm}`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
   return css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
 };
 const StyledFileUpload = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledFileUpload",
   componentId: "sc-1rodjgn-0"

package/dist/esm/styled/input-group/StyledInputGroup.js

@@ -23,7 +23,7 @@ const itemStyles = props => {
 };
 const StyledInputGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledInputGroup",
   componentId: "sc-kjh1f0-0"

package/dist/esm/styled/radio/StyledRadioHint.js

@@ -12,7 +12,7 @@ import { StyledHint } from '../common/StyledHint.js';
 const COMPONENT_ID = 'forms.radio_hint';
 const StyledRadioHint = styled(StyledHint).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12'
+  'data-garden-version': '9.0.0-next.14'
 }).withConfig({
   displayName: "StyledRadioHint",
   componentId: "sc-eo8twg-0"

package/dist/esm/styled/radio/StyledRadioInput.js

@@ -6,54 +6,115 @@
 */
 import styled, { css } from 'styled-components';
 import { math } from 'polished';
-import { retrieveComponentStyles, DEFAULT_THEME, getColorV8, focusStyles } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
 import { StyledRadioLabel } from './StyledRadioLabel.js';
 import { StyledMessage } from '../common/StyledMessage.js';
 
 const COMPONENT_ID = 'forms.radio';
-const colorStyles = props => {
-  const SHADE = 600;
-  const borderColor = getColorV8('neutralHue', SHADE - 300, props.theme);
-  const backgroundColor = getColorV8('background', 600 , props.theme);
-  const iconColor = backgroundColor;
-  const hoverBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.08);
-  const hoverBorderColor = getColorV8('primaryHue', SHADE, props.theme);
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const borderColor = getColor({
+    theme,
+    variable: 'border.emphasis'
+  });
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const iconColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const borderOptions = {
+    theme,
+    variable: 'border.primaryEmphasis'
+  };
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = getColor(borderOptions);
   const focusBorderColor = hoverBorderColor;
-  const activeBackgroundColor = getColorV8('primaryHue', SHADE, props.theme, 0.2);
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
   const activeBorderColor = focusBorderColor;
+  const checkedBackgroundColor = getColor(backgroundOptions);
   const checkedBorderColor = focusBorderColor;
-  const checkedBackgroundColor = checkedBorderColor;
-  const checkedHoverBorderColor = getColorV8('primaryHue', SHADE + 100, props.theme);
-  const checkedHoverBackgroundColor = checkedHoverBorderColor;
-  const checkedActiveBorderColor = getColorV8('primaryHue', SHADE + 200, props.theme);
-  const checkedActiveBackgroundColor = checkedActiveBorderColor;
-  const disabledBackgroundColor = getColorV8('neutralHue', SHADE - 400, props.theme);
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const checkedHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedHoverBorderColor = getColor({
+    ...borderOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const checkedActiveBorderColor = getColor({
+    ...borderOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled',
+    transparency: theme.opacity[300]
+  });
   return css(["& ~ ", "::before{border-color:", ";background-color:", ";}& ~ ", " > svg{color:", ";}& ~ ", ":hover::before{border-color:", ";background-color:", ";}", " & ~ ", ":active::before{border-color:", ";background-color:", ";}&:checked ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":hover::before{border-color:", ";background-color:", ";}&:enabled:checked ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledRadioLabel, borderColor, backgroundColor, StyledRadioLabel, iconColor, StyledRadioLabel, hoverBorderColor, hoverBackgroundColor, focusStyles({
-    theme: props.theme,
+    theme,
     styles: {
       borderColor: focusBorderColor
     },
     selector: `&:focus-visible ~ ${StyledRadioLabel}::before`
   }), StyledRadioLabel, activeBorderColor, activeBackgroundColor, StyledRadioLabel, checkedBorderColor, checkedBackgroundColor, StyledRadioLabel, checkedHoverBorderColor, checkedHoverBackgroundColor, StyledRadioLabel, checkedActiveBorderColor, checkedActiveBackgroundColor, StyledRadioLabel, disabledBackgroundColor);
 };
-const sizeStyles = props => {
-  const lineHeight = `${props.theme.space.base * 5}px`;
-  const size = `${props.theme.space.base * 4}px`;
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCompact
+  } = _ref2;
+  const lineHeight = `${theme.space.base * 5}px`;
+  const size = `${theme.space.base * 4}px`;
   const top = math(`(${lineHeight} - ${size}) / 2`);
-  const iconSize = props.theme.iconSizes.sm;
+  const iconSize = theme.iconSizes.sm;
   const iconPosition = math(`(${size} - ${iconSize}) / 2`);
   const iconTop = math(`${iconPosition} + ${top}`);
-  const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
-  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
+  const marginTop = `${theme.space.base * (isCompact ? 1 : 2)}px`;
+  return css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";border:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, theme.borders.sm, theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
 };
 const StyledRadioInput = styled.input.attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   type: 'radio'
 }).withConfig({
   displayName: "StyledRadioInput",
   componentId: "sc-qsavpv-0"
-})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border:", ";border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', props => props.theme.borders.sm, StyledRadioLabel, props => sizeStyles(props), StyledRadioLabel, StyledRadioLabel, props => colorStyles(props), StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
+})(["position:absolute;opacity:0;margin:0;& ~ ", "::before{position:absolute;", ":0;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:50%;background-repeat:no-repeat;background-position:center;content:'';}& ~ ", " > svg{position:absolute;}", ";&:focus ~ ", "::before{outline:none;}& ~ ", ":active::before{transition:border-color 0.1s ease-in-out,background-color 0.1s ease-in-out,color 0.1s ease-in-out;}", ";&:disabled ~ ", "{cursor:default;}", ";"], StyledRadioLabel, props => props.theme.rtl ? 'right' : 'left', StyledRadioLabel, sizeStyles, StyledRadioLabel, StyledRadioLabel, colorStyles, StyledRadioLabel, props => retrieveComponentStyles(COMPONENT_ID, props));
 StyledRadioInput.defaultProps = {
   theme: DEFAULT_THEME
 };

package/dist/esm/styled/radio/StyledRadioLabel.js

@@ -17,7 +17,7 @@ const sizeStyles = props => {
 };
 const StyledRadioLabel = styled(StyledLabel).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '9.0.0-next.12',
+  'data-garden-version': '9.0.0-next.14',
   isRadio: true
 }).withConfig({
   displayName: "StyledRadioLabel",