test theme

Codecademy · Sep 11, 2024 · 023bd4b · 023bd4b
1 parent 0d49df6
commit 023bd4b
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 10 deletions.
diff --git a/packages/gamut-styles/src/themes/enterprise.ts b/packages/gamut-styles/src/themes/enterprise.ts
@@ -0,0 +1,48 @@
+import { createTheme } from '@codecademy/variance';
+
+import { enterprisePalette } from '../variables';
+import { coreTheme } from './core';
+
+export const enterpriseTheme = createTheme(coreTheme)
+  .addColors(enterprisePalette)
+  .addColorModes('light', {
+    light: {
+      text: 'enterpriseNavy-400',
+      primary: {
+        _: 'hotPink-100',
+        hover: 'hotPink-400',
+      },
+      secondary: {
+        _: 'enterpriseNavy-400',
+        hover: 'enterpriseNavy-100',
+      },
+      interface: {
+        _: 'hotPink-100',
+        hover: 'hotPink-400',
+      },
+      feedback: {
+        error: 'enterpriseRed-0',
+        success: 'enterpriseGreen-0',
+        warning: 'enterpriseYellow-0',
+      },
+    },
+    dark: {
+      background: {
+        _: 'enterpriseNavy-400',
+        current: 'navy-800',
+        primary: 'navy-900',
+        selected: 'navy-700',
+        disabled: 'navy-500',
+        hover: 'navy-600',
+      },
+      interface: {
+        _: 'hotPink-100',
+        hover: 'hotPink-400',
+      },
+    },
+  })
+  .build();
+
+export type EnterpriseThemeShape = typeof enterpriseTheme;
+
+export interface EnterpriseTheme extends EnterpriseThemeShape {}
diff --git a/packages/gamut-styles/src/themes/index.ts b/packages/gamut-styles/src/themes/index.ts
@@ -1,3 +1,4 @@
 export * from './core';
 export * from './platform';
 export * from './admin';
+export * from './enterprise';
diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts
@@ -154,3 +154,45 @@ export const platformPalette = {
   ...flattenScale(platformSwatches),
   ...truePlatformColors,
 } as const;
+
+/**
+ * Enterprise Colors
+ */
+
+export const enterpriseSwatches = {
+  hotPink: {
+    '100': '#e83e8c',
+    '400': '#c22c5a',
+  },
+  enterpriseNavy: {
+    '100': '#212d56',
+    '400': '#141c36',
+  },
+  enterpriseBeige: {
+    '100': '#F7F6F2',
+    '400': '#ebe9df',
+  },
+  enterpriseGreen: {
+    '0': '#48ac2c',
+  },
+  enterpriseYellow: {
+    '0': '#ffc107',
+  },
+  enterpriseRed: {
+    '0': '#dc3545',
+  },
+} as const;
+
+const trueEnterpriseColors = {
+  hotPink: enterpriseSwatches.hotPink[100],
+  enterpriseNavy: enterpriseSwatches.enterpriseNavy[400],
+  enterpriseBeige: enterpriseSwatches.enterpriseBeige[400],
+  enterpriseGreen: enterpriseSwatches.enterpriseGreen[0],
+  enterpriseYellow: enterpriseSwatches.enterpriseYellow[0],
+  enterpriseRed: enterpriseSwatches.enterpriseRed[0],
+} as const;
+
+export const enterprisePalette = {
+  ...flattenScale(enterpriseSwatches),
+  ...trueEnterpriseColors,
+} as const;
diff --git a/packages/styleguide/.storybook/components/Docs/DocsContainer.tsx b/packages/styleguide/.storybook/components/Docs/DocsContainer.tsx
@@ -21,7 +21,7 @@ import { useEffect } from 'react';
 import * as React from 'react';
 import merge from 'lodash/merge';
 import { Link } from '../Markdown/Elements';
-import { coreTheme } from '@codecademy/gamut-styles/src/themes/core';
+import { enterpriseTheme } from '@codecademy/gamut-styles/src/themes';
 
 const defaultComponents = {
   ...htmlComponents,
@@ -108,7 +108,7 @@ export const DocsContainer: React.FC<{ context: DocsContextProps }> = ({
     <DocsContext.Provider value={context}>
       <GamutProvider
         cache={createEmotionCache({ speedy: false })}
-        theme={coreTheme}
+        theme={enterpriseTheme as any}
       >
         <Helmet>
           <AssetProvider />

diff --git a/packages/styleguide/.storybook/components/Docs/DocsPage.tsx b/packages/styleguide/.storybook/components/Docs/DocsPage.tsx
@@ -83,11 +83,7 @@ export const DocsPage: React.FC = ({ children }) => {
 
   const linkIcon = <OpenIcon size={14} ml={8} />;
   return (
-    <Background
-      minHeight="100vh"
-      bg={isLocalhost ? 'beige' : 'paleBlue'}
-      py={48}
-    >
+    <Background minHeight="100vh" bg="enterpriseBeige-100" py={48}>
       <ContentContainer>
         <BreadCrumbs />
         <Title>{title}</Title>

diff --git a/packages/styleguide/.storybook/decorators/theme.tsx b/packages/styleguide/.storybook/decorators/theme.tsx
@@ -2,7 +2,7 @@ import { useLayoutEffect, useRef } from 'react';
 import {
   Background,
   corePalette,
-  coreTheme,
+  enterpriseTheme,
   ColorModes,
   GamutProvider,
 } from '@codecademy/gamut-styles/src';
@@ -38,7 +38,11 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
   // Always give iframes the full provider
   if (process.env.NODE_ENV === 'test') {
     return (
-      <GamutProvider useCache={false} useGlobals={false} theme={coreTheme}>
+      <GamutProvider
+        useCache={false}
+        useGlobals={false}
+        theme={enterpriseTheme}
+      >
         <Background bg={themeBackground[colorMode]} ref={storyRef}>
           {Story()}
         </Background>
@@ -48,7 +52,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
 
   // Wrap all stories in minimal provider
   return (
-    <GamutProvider theme={coreTheme}>
+    <GamutProvider theme={enterpriseTheme}>
       <Background bg={themeBackground[colorMode]} ref={storyRef}>
         {Story()}
       </Background>