fix(theming)!: remove background.primary color variable (#1938)

Author: ze-flo

packages/avatars/demo/~patterns/stories/MenuStory.tsx

@@ -5,11 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
+import { useTheme } from 'styled-components';
 import React, { useCallback, useState } from 'react';
 import { StoryFn } from '@storybook/react';
 import { Grid } from '@zendeskgarden/react-grid';
 import { Menu, Item } from '@zendeskgarden/react-dropdowns';
 import { Avatar, IAvatarProps } from '@zendeskgarden/react-avatars';
+import { getColor } from '@zendeskgarden/react-theming';
 
 const items: {
   value: string;
@@ -49,6 +51,8 @@ export const MenuStory: StoryFn = ({ isCompact }) => {
     focusedValue !== undefined && setHighlightedValue(focusedValue);
   }, []);
 
+  const theme = useTheme();
+
   return (
     <Grid>
       <Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
@@ -64,7 +68,14 @@ export const MenuStory: StoryFn = ({ isCompact }) => {
                     status={item.avatarProps.status}
                     badge={item.avatarProps.badge}
                     surfaceColor={
-                      highlightedValue === item.value ? 'background.primary' : 'background.raised'
+                      highlightedValue === item.value
+                        ? getColor({
+                            theme,
+                            hue: 'primaryHue',
+                            light: { shade: 100 },
+                            dark: { shade: 900 }
+                          })
+                        : 'background.raised'
                     }
                   >
                     <img alt={item.label} src={`images/avatars/${item.value}.png`} />

packages/avatars/src/styled/StyledAvatar.spec.tsx

@@ -52,14 +52,14 @@ describe('StyledAvatar', () => {
 
     it('renders surface color variable key as expected', () => {
       const { container, rerender } = render(
-        <StyledAvatar $status="away" $surfaceColor="background.primary" />
+        <StyledAvatar $status="away" $surfaceColor="background.primaryEmphasis" />
       );
 
-      expect(container.firstChild).toHaveStyleRule('color', PALETTE.blue[100], {
+      expect(container.firstChild).toHaveStyleRule('color', PALETTE.blue[700], {
         modifier: '&&'
       });
 
-      rerender(<StyledAvatar $surfaceColor="background.primary" />);
+      rerender(<StyledAvatar $surfaceColor="background.primaryEmphasis" />);
 
       expect(container.firstChild).toHaveStyleRule('color', 'transparent', {
         modifier: '&&'

packages/avatars/src/types/index.ts

@@ -29,7 +29,7 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
   /**
    * Provides surface color for an avatar placed on a non-default background.
    * Accepts a [color variable](/components/theme-object#colors) key (i.e.
-   * `background.primary`) to render based on light/dark mode, or any hex value.
+   * `background.subtle`) to render based on light/dark mode, or any hex value.
    */
   surfaceColor?: string;
   /** Applies system styling for representing objects, brands, or products */

packages/theming/demo/stories/ArrowStylesStory.tsx

@@ -22,15 +22,15 @@ interface IArgs {
 const StyledDiv = styled.div<Omit<IArgs, 'isAnimated'>>`
   border: ${p =>
     p.hasBorder &&
-    `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'border.primaryEmphasis' })}`};
+    `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'border.default' })}`};
   box-shadow: ${p =>
     p.hasBoxShadow &&
     p.theme.shadows.lg(
       `${p.theme.space.base * (p.theme.colors.base === 'dark' ? 4 : 5)}px`,
       `${p.theme.space.base * (p.theme.colors.base === 'dark' ? 5 : 6)}px`,
       getColor({ variable: 'shadow.medium', theme: p.theme })
     )};
-  background-color: ${p => getColor({ theme: p.theme, variable: 'background.primary' })};
+  background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
   padding: ${p => p.theme.space.xxl};
 
   ${p =>

packages/theming/src/elements/theme/__snapshots__/index.spec.ts.snap

@@ -39,7 +39,6 @@ exports[`DEFAULT_THEME matches snapshot 1`] = `
           "default": "neutralHue.1100",
           "disabled": "rgba(neutralHue.500, 100)",
           "emphasis": "neutralHue.600",
-          "primary": "primaryHue.900",
           "primaryEmphasis": "primaryHue.600",
           "raised": "neutralHue.1000",
           "recessed": "neutralHue.1200",
@@ -88,7 +87,6 @@ exports[`DEFAULT_THEME matches snapshot 1`] = `
           "default": "palette.white",
           "disabled": "rgba(neutralHue.700, 100)",
           "emphasis": "neutralHue.700",
-          "primary": "primaryHue.100",
           "primaryEmphasis": "primaryHue.700",
           "raised": "palette.white",
           "recessed": "neutralHue.100",

packages/theming/src/elements/theme/index.ts

@@ -52,7 +52,6 @@ const colors = {
         recessed: 'neutralHue.1200',
         subtle: 'neutralHue.1000',
         emphasis: 'neutralHue.600',
-        primary: 'primaryHue.900',
         success: 'successHue.1000',
         warning: 'warningHue.1000',
         danger: 'dangerHue.1000',
@@ -101,7 +100,6 @@ const colors = {
         recessed: 'neutralHue.100',
         subtle: 'neutralHue.100',
         emphasis: 'neutralHue.700',
-        primary: 'primaryHue.100',
         success: 'successHue.100',
         warning: 'warningHue.100',
         danger: 'dangerHue.100',