chore: remove all colors.background and colors.foreground theme references in prep for v9 (#1756)

Author: jzempel

.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

@@ -17,7 +17,7 @@ export interface IStyled{{capitalize component}}Props extends ThemeProps<Default
 const colorStyles = (props: IStyled{{capitalize component}}Props) => {
   const backgroundColor = getColorV8('primaryHue', 600, props.theme, 0.08);
   const borderColor = getColorV8('primaryHue', 600, props.theme);
-  const foregroundColor = props.theme.colors.foreground;
+  const foregroundColor = getColorV8('foreground', 600 /* default shade */, props.theme);
   const hoverBackgroundColor = getColorV8('primaryHue', 600, props.theme, 0.2);
   const focusBoxShadow = props.theme.shadows.md(
     getColorV8('primaryHue', 600, props.theme, 0.35) as string

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] */