chore(next): updates from main

.storybook/preview.js

@@ -32,7 +32,7 @@ export const parameters = {
 
 const GlobalPreviewStyling = createGlobalStyle`
   body {
-    background-color: ${p => p.theme.colors.background};
+    background-color: ${p => getColorV8('background', 600 /* default shade */, p.theme)};
     /* stylelint-disable-next-line declaration-no-important */
     padding: 0 !important;
     font-family: ${p => p.theme.fonts.system};

packages/.template/src/styled/Styled{{capitalize component}}.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { ThemeProps, DefaultTheme, css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = '{{pluralize (lowercase component)}}.{{lowercase component}}';
 
@@ -15,12 +15,12 @@ export interface IStyled{{capitalize component}}Props extends ThemeProps<Default
 }
 
 const colorStyles = (props: IStyled{{capitalize component}}Props) => {
-  const backgroundColor = getColor('primaryHue', 600, props.theme, 0.08);
-  const borderColor = getColor('primaryHue', 600, props.theme);
-  const foregroundColor = props.theme.colors.foreground;
-  const hoverBackgroundColor = getColor('primaryHue', 600, props.theme, 0.2);
+  const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
+  const borderColor = getColorV8('primaryHue', 600, props.theme);
+  const foregroundColor = getColorV8('foreground', 600 /* default shade */, props.theme);
+  const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
   const focusBoxShadow = props.theme.shadows.md(
-    getColor('primaryHue', 600, props.theme, 0.35) as string
+    getColorV8('primaryHue', 600, props.theme, 0.35) as string
   );
 
   return css`

packages/accordions/src/styled/accordion/StyledButton.ts

@@ -24,7 +24,7 @@ interface IStyledButton {
 
 const colorStyles = (props: ThemeProps<DefaultTheme> & IStyledButton) => {
   const showColor = props.isCollapsible || !props.isExpanded;
-  let color = props.theme.colors.foreground;
+  let color = getColorV8('foreground', 600 /* default shade */, props.theme);
 
   if (showColor && props.isHovered) {
     color = getColorV8('primaryHue', 600, props.theme)!;

packages/accordions/src/styled/stepper/StyledIcon.spec.tsx

@@ -8,13 +8,13 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { StyledIcon } from './StyledIcon';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledIcon', () => {
   it('renders default styles', () => {
     const { container } = render(<StyledIcon />);
 
-    expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.foreground);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
     expect(container.firstChild).toHaveStyleRule(
       'background',
       getColorV8('neutralHue', 200, DEFAULT_THEME)
@@ -25,7 +25,7 @@ describe('StyledIcon', () => {
   it('renders active color styles', () => {
     const { container } = render(<StyledIcon isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.background);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.white);
     expect(container.firstChild).toHaveStyleRule(
       'background',
       getColorV8('neutralHue', 600, DEFAULT_THEME)

packages/accordions/src/styled/stepper/StyledIcon.ts

@@ -51,7 +51,9 @@ const colorStyles = (props: IStyledIcon & ThemeProps<DefaultTheme>) => {
     background: ${props.isActive
       ? getColorV8('neutralHue', 600, props.theme)
       : getColorV8('neutralHue', 200, props.theme)};
-    color: ${props.isActive ? props.theme.colors.background : props.theme.colors.foreground};
+    color: ${props.isActive
+      ? getColorV8('background', 600 /* default shade */, props.theme)
+      : getColorV8('foreground', 600 /* default shade */, props.theme)};
   `;
 };
 

packages/accordions/src/styled/stepper/StyledInnerContent.ts

@@ -9,7 +9,8 @@ import styled, { ThemeProps, DefaultTheme } from 'styled-components';
 import {
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColorV8
 } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.step_inner_content';
@@ -20,7 +21,7 @@ export const StyledInnerContent = styled.div.attrs<ThemeProps<DefaultTheme>>({
 })`
   overflow: hidden;
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => props.theme.colors.foreground};
+  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
   font-size: ${props => props.theme.fontSizes.md};
 
   ${props => retrieveComponentStyles(COMPONENT_ID, props)};

packages/accordions/src/styled/stepper/StyledLabel.spec.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { StyledLabel } from './StyledLabel';
-import { getColorV8, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { getColorV8, DEFAULT_THEME, PALETTE } from '@zendeskgarden/react-theming';
 
 describe('StyledLabel', () => {
   it('renders default styles', () => {
@@ -36,7 +36,7 @@ describe('StyledLabel', () => {
   it('renders styles for active label', () => {
     const { container } = render(<StyledLabel isActive />);
 
-    expect(container.firstChild).toHaveStyleRule('color', DEFAULT_THEME.colors.foreground);
+    expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[800]);
     expect(container.firstChild).toHaveStyleRule('font-weight', '600');
   });
 });

packages/accordions/src/styled/stepper/StyledLabel.ts

@@ -32,7 +32,9 @@ export const StyledLabel = styled.div.attrs<IStyledLabelProps>({
   text-align: ${props => props.isHorizontal && 'center'};
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
   color: ${props =>
-    props.isActive ? props.theme.colors.foreground : getColorV8('neutralHue', 600, props.theme)};
+    props.isActive
+      ? getColorV8('foreground', 600 /* default shade */, props.theme)
+      : getColorV8('neutralHue', 600, props.theme)};
   font-size: ${props => props.theme.fontSizes.md};
   font-weight: ${props => props.isActive && 600};
 

packages/accordions/src/styled/timeline/StyledItem.ts

@@ -9,7 +9,8 @@ import styled, { css } from 'styled-components';
 import {
   getLineHeight,
   retrieveComponentStyles,
-  DEFAULT_THEME
+  DEFAULT_THEME,
+  getColorV8
 } from '@zendeskgarden/react-theming';
 import { StyledSeparator } from './StyledSeparator';
 import { StyledTimelineContent } from './StyledContent';
@@ -30,7 +31,7 @@ export const StyledTimelineItem = styled.li.attrs({
   display: flex;
   position: relative;
   line-height: ${props => getLineHeight(props.theme.space.base * 5, props.theme.fontSizes.md)};
-  color: ${props => props.theme.colors.foreground};
+  color: ${props => getColorV8('foreground', 600 /* default shade */, props.theme)};
   font-size: ${props => props.theme.fontSizes.md};
 
   &:last-of-type ${StyledSeparator}::after {

packages/accordions/src/styled/timeline/StyledItemIcon.ts

@@ -28,7 +28,8 @@ export const StyledItemIcon = styled(({ surfaceColor, children, ...props }) =>
 })<IStyledItemIcon>`
   z-index: 1;
   box-sizing: content-box;
-  background-color: ${props => props.surfaceColor || props.theme.colors.background};
+  background-color: ${props =>
+    props.surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
   padding: ${props => props.theme.space.base}px 0;
   width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
   height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */

packages/avatars/src/styled/StyledAvatar.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, keyframes, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -57,7 +57,7 @@ const colorStyles = (props: IStyledAvatarProps & ThemeProps<DefaultTheme>) => {
   const backgroundColor = props.backgroundColor || 'transparent';
   const foregroundColor = props.foregroundColor || props.theme.palette.white;
   const surfaceColor = props.status
-    ? props.surfaceColor || props.theme.colors.background
+    ? props.surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)
     : 'transparent';
 
   return css`

packages/avatars/src/styled/StyledStatusIndicator.ts

@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColorV8 } from '@zendeskgarden/react-theming';
 import { math } from 'polished';
 
 import { IAvatarProps, SIZE } from '../types';
@@ -64,7 +64,10 @@ const colorStyles = (props: IStatusIndicatorProps & ThemeProps<DefaultTheme>) =>
   const { theme, type, size, borderColor, surfaceColor } = props;
 
   let boxShadow = theme.shadows.sm(
-    surfaceColor || (type ? theme.colors.background : (theme.palette.white as string))
+    surfaceColor ||
+      (type
+        ? getColorV8('background', 600 /* default shade */, theme)!
+        : (theme.palette.white as string))
   );
 
   if (size === xxs) {

packages/buttons/src/styled/StyledButton.ts

@@ -141,7 +141,9 @@ const colorStyles = (props: IButtonProps & ThemeProps<DefaultTheme>) => {
   } else {
     const borderColor =
       props.isNeutral && !props.isDanger ? getColorV8('neutralHue', 300, props.theme) : baseColor;
-    const foregroundColor = props.isNeutral ? props.theme.colors.foreground : baseColor;
+    const foregroundColor = props.isNeutral
+      ? getColorV8('foreground', 600 /* default shade */, props.theme)
+      : baseColor;
     const hoverBorderColor = props.isNeutral && !props.isDanger ? baseColor : hoverColor;
     const hoverForegroundColor = props.isNeutral ? foregroundColor : hoverColor;