feat(ColorModes): Base ColorMode support and serialization of color variables [GM-177]

package.json

@@ -59,8 +59,8 @@
     "@babel/core": "7.13.10",
     "@babel/preset-typescript": "^7.13.0",
     "@emotion/babel-plugin": "^11.1.2",
-    "@emotion/react": "^11.1.4",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
     "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^11.0.4",
     "@testing-library/react-hooks": "^5.1.0",

packages/gamut-styles/package.json

@@ -21,14 +21,16 @@
     "@codecademy/variance": "^0.6.0"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.1.4",
-    "@emotion/styled": "^11.0.0",
+    "@emotion/react": "^11.15",
+    "@emotion/styled": "^11.1.5",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {
-    "@emotion/react": "^11.1.4",
-    "@emotion/styled": "^11.0.0",
-    "@types/react-helmet": "^6.1.0"
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "@emotion/jest": "11.2.1",
+    "@types/react-helmet": "^6.1.0",
+    "component-test-setup": "^0.1.1"
   },
   "license": "MIT",
   "publishConfig": {

packages/gamut-styles/src/AssetProvider.tsx

@@ -3,24 +3,19 @@ import { Helmet } from 'react-helmet';
 
 import { webFonts } from './remoteAssets/fonts';
 
-export const createFontLinks = () => {
-  const links: React.ReactNode[] = [];
-  webFonts.forEach(({ filePath, extensions }) =>
-    extensions.forEach((ext) =>
-      links.push(
-        <link
-          key={`${filePath}-${ext}`}
-          rel="preload"
-          href={`${filePath}.${ext}`}
-          crossOrigin="anonymous"
-          as="font"
-          type={`font/${ext}`}
-        />
-      )
-    )
+export const createFontLinks = () =>
+  webFonts.flatMap(({ filePath, extensions }) =>
+    extensions.map((ext) => (
+      <link
+        key={`${filePath}-${ext}`}
+        rel="preload"
+        href={`${filePath}.${ext}`}
+        crossOrigin="anonymous"
+        as="font"
+        type={`font/${ext}`}
+      />
+    ))
   );
-  return links;
-};
 
 export const AssetProvider = () => {
   return <Helmet>{createFontLinks()}</Helmet>;

packages/gamut-styles/src/Background.tsx

@@ -0,0 +1,67 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { getContrast, meetsContrastGuidelines } from 'polished';
+import React, { useMemo } from 'react';
+
+import { ColorMode } from './ColorMode';
+import { properties } from './props';
+import { colors } from './variables';
+
+const Reset = styled.div(properties.backgroundColor);
+
+export type BackgroundProps = {
+  initialBackground: keyof typeof colors;
+  className?: string;
+};
+
+export const Background: React.FC<BackgroundProps> = ({
+  children,
+  className,
+  initialBackground,
+}) => {
+  const {
+    colorModes: { active, modes },
+  } = useTheme();
+  const accessibleMode = useMemo(() => {
+    const { light, dark } = modes;
+
+    const lightModeContrast = getContrast(
+      light.text,
+      colors[initialBackground]
+    );
+    const darkModeContrast = getContrast(dark.text, colors[initialBackground]);
+
+    // Minimum Contrast Requirement is 4.5 for AA (this will not be a perfect metric since there are multiple standards but should meet most of our needs)
+    const highestContrastMode =
+      lightModeContrast > darkModeContrast ? 'light' : 'dark';
+    const { AA } = meetsContrastGuidelines(
+      modes[highestContrastMode].text,
+      colors[initialBackground]
+    );
+    if (!AA) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `You are using an inaccessible background color ${initialBackground} (${colors[initialBackground]}) for color contrast`
+      );
+    }
+    return highestContrastMode;
+  }, [initialBackground, modes]);
+
+  if (accessibleMode === active) {
+    return (
+      <Reset className={className} backgroundColor={initialBackground}>
+        {children}
+      </Reset>
+    );
+  }
+
+  return (
+    <ColorMode
+      className={className}
+      mode={accessibleMode}
+      initialBackground={initialBackground}
+    >
+      {children}
+    </ColorMode>
+  );
+};

packages/gamut-styles/src/ColorMode.tsx

@@ -0,0 +1,47 @@
+import { compose, HandlerProps } from '@codecademy/gamut-system';
+import { Theme, ThemeProvider, useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+
+import { properties } from './props';
+import { createVariables } from './utilities';
+import { colors } from './variables';
+
+export type ColorModeProps = {
+  mode: keyof Theme['colorModes']['modes'];
+  initialBackground?: keyof typeof colors;
+  className?: string;
+};
+
+const colorProps = compose(properties.backgroundColor, properties.textColor);
+
+export interface VariableProviderProps extends HandlerProps<typeof colorProps> {
+  variables: Parameters<typeof createVariables>[0];
+}
+
+export const VariableProvider = styled.div<VariableProviderProps>(
+  compose(properties.backgroundColor, properties.textColor),
+  ({ variables }) => createVariables(variables, 'colors')
+);
+
+export const ColorMode: React.FC<ColorModeProps> = ({
+  mode,
+  initialBackground,
+  children,
+  className,
+}) => {
+  const { colorModes } = useTheme();
+
+  return (
+    <ThemeProvider theme={{ colorModes: { ...colorModes, active: mode } }}>
+      <VariableProvider
+        variables={colorModes.modes[mode]}
+        backgroundColor={initialBackground}
+        textColor="text"
+        className={className}
+      >
+        {children}
+      </VariableProvider>
+    </ThemeProvider>
+  );
+};

packages/gamut-styles/src/GamutProvider.tsx

@@ -1,19 +1,23 @@
 import {
   CacheProvider,
   css,
+  CSSObject,
   EmotionCache,
   Global,
+  Theme,
   ThemeProvider,
 } from '@emotion/react';
-import React, { useContext, useRef } from 'react';
+import React, { useContext, useMemo, useRef } from 'react';
 
 import { createEmotionCache } from './cache';
 import { Reboot, Typography } from './globals';
 import { theme, themeCssVariables } from './theme';
+import { createVariables } from './utilities';
 
 export interface GamutProviderProps {
   useGlobals?: boolean;
   useCache?: boolean;
+  mode?: keyof Theme['colorModes']['modes'];
   cache?: EmotionCache;
 }
 
@@ -27,12 +31,25 @@ GamutContext.displayName = 'GamutContext';
 export const GamutProvider: React.FC<GamutProviderProps> = ({
   children,
   cache,
+  mode = 'light',
   useGlobals = true,
   useCache = true,
 }) => {
   const { hasGlobals, hasCache } = useContext(GamutContext);
   const shouldCreateCache = useCache && !hasCache;
   const shouldInsertGlobals = useGlobals && !hasGlobals;
+  const rootVariables = useMemo(() => {
+    const vars: CSSObject = {
+      ...themeCssVariables,
+      ...createVariables(theme.colorModes.modes[mode], 'colors'),
+    };
+    return vars;
+  }, [mode]);
+
+  const rootTheme = useMemo(
+    () => ({ ...theme, colorModes: { ...theme.colorModes, active: mode } }),
+    [mode]
+  );
 
   // Do not initialize a new cache if one has been provided as props
   const activeCache = useRef<EmotionCache | false>(
@@ -43,7 +60,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
     <>
       <Typography />
       <Reboot />
-      <Global styles={css({ ':root': themeCssVariables })} />
+      <Global styles={css({ ':root': rootVariables })} />
     </>
   );
 
@@ -57,7 +74,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
       >
         <CacheProvider value={activeCache.current}>
           {globals}
-          <ThemeProvider theme={theme}>{children}</ThemeProvider>
+          <ThemeProvider theme={rootTheme}>{children}</ThemeProvider>
         </CacheProvider>
       </GamutContext.Provider>
     );
@@ -71,7 +88,7 @@ export const GamutProvider: React.FC<GamutProviderProps> = ({
       }}
     >
       {globals}
-      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+      <ThemeProvider theme={rootTheme}>{children}</ThemeProvider>
     </GamutContext.Provider>
   );
 };

packages/gamut-styles/src/__tests__/Background-test.tsx

@@ -0,0 +1,105 @@
+import { matchers } from '@emotion/jest';
+import { ThemeProvider, useTheme } from '@emotion/react';
+import { setupRtl as setupRtlBase } from 'component-test-setup';
+import { overArgs } from 'lodash';
+import React from 'react';
+
+import { Background } from '../Background';
+import { theme } from '../theme';
+
+expect.extend(matchers);
+
+function withThemeProvider<Props>(
+  WrappedComponent: React.ComponentType<Props>
+) {
+  const WithBoundaryComponent: React.FC<Props> = (props) => (
+    <ThemeProvider theme={theme}>
+      <WrappedComponent {...props} />
+    </ThemeProvider>
+  );
+
+  return WithBoundaryComponent;
+}
+
+const setupRtl = overArgs(
+  setupRtlBase,
+  withThemeProvider
+) as typeof setupRtlBase;
+
+const renderView = setupRtl(Background, {
+  children: <div data-testid="content" />,
+});
+
+const ActiveMode = () => {
+  const {
+    colorModes: { active },
+  } = useTheme();
+  return <div>{active}</div>;
+};
+
+describe('Background', () => {
+  it('switches the default colormode when contrast standards are not met', () => {
+    const { view } = renderView({ initialBackground: 'navy' });
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule(
+      'background-color',
+      theme.colors.navy
+    );
+  });
+
+  it('allows for changing the color mode while nested', () => {
+    const { view } = renderView({
+      initialBackground: 'navy',
+      children: (
+        <div data-testid="content">
+          <Background initialBackground="beige">
+            <div data-testid="nested-content" />
+          </Background>
+        </div>
+      ),
+    });
+    expect(view.getByTestId('content').parentElement).toHaveStyleRule(
+      'background-color',
+      theme.colors.navy
+    );
+
+    expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule(
+      'background-color',
+      theme.colors.beige
+    );
+
+    /** text color reset should be on the variable provisioner if needed */
+    expect(view.getByTestId('nested-content').parentElement).toHaveStyleRule(
+      'color',
+      theme.colors.text
+    );
+  });
+
+  it('does not change the color mode when contrasts do not conflict', () => {
+    const { view } = renderView({
+      initialBackground: 'white',
+    });
+
+    // Grand parent
+    expect(
+      view.getByTestId('content').parentElement?.parentElement
+    ).not.toHaveStyleRule('color', theme.colors.text);
+  });
+
+  it('updates the theme context to the current mode', () => {
+    const { view } = renderView({
+      initialBackground: 'navy',
+      children: <ActiveMode />,
+    });
+
+    view.getByText('dark');
+  });
+
+  it('does not update the theme context when the color mode has not changed', () => {
+    const { view } = renderView({
+      initialBackground: 'white',
+      children: <ActiveMode />,
+    });
+
+    view.getByText('light');
+  });
+});

packages/gamut-styles/src/index.ts

@@ -3,6 +3,8 @@ import '@emotion/react';
 import { theme } from './theme';
 
 export * from './GamutProvider';
+export * from './ColorMode';
+export * from './Background';
 
 export * from './cache';
 export * from './variables';