feat(enterpriseTheme): Add Enterprise Theme

packages/gamut-styles/src/themes/enterprise.ts

@@ -0,0 +1,78 @@
+import { createTheme } from '@codecademy/variance';
+
+import { enterprisePalette } from '../variables';
+import { coreTheme } from './core';
+
+export const enterpriseTheme = createTheme(coreTheme)
+  .addColors(enterprisePalette)
+  .addColorModes('light', {
+    light: {
+      text: {
+        _: 'gray-900',
+        accent: 'blue',
+        disabled: 'gray-500',
+        secondary: 'gray-500',
+      },
+
+      background: {
+        _: 'white',
+        contrast: 'white',
+        current: 'white',
+        primary: 'beige',
+        selected: 'blue-50',
+        disabled: 'gray-100',
+        hover: 'gray-200',
+      },
+      primary: {
+        _: 'blue',
+        hover: 'blue-400',
+        inverse: 'white',
+      },
+      secondary: {
+        _: 'gray-900',
+        hover: 'gray-800',
+      },
+      interface: {
+        _: 'blue',
+        hover: 'blue-400',
+      },
+      danger: {
+        _: 'red',
+        hover: 'red-600',
+      },
+    },
+    dark: {
+      text: {
+        _: 'white',
+        accent: 'blue',
+        disabled: 'gray-100',
+        secondary: 'gray-200',
+      },
+      background: {
+        _: 'gray-900',
+        current: 'gray-800',
+        primary: 'gray-900',
+        selected: 'gray-700',
+        disabled: 'gray-500',
+        hover: 'gray-600',
+      },
+      primary: {
+        _: 'skyBlue',
+        hover: 'skyBlue-100',
+        inverse: 'blue',
+      },
+      secondary: {
+        _: 'white',
+        hover: 'blue-50',
+      },
+      interface: {
+        _: 'white',
+        hover: 'blue-50',
+      },
+    },
+  })
+  .build();
+
+export type EnterpriseThemeShape = typeof enterpriseTheme;
+
+export interface EnterpriseTheme extends EnterpriseThemeShape {}

packages/gamut-styles/src/themes/index.ts

@@ -1,3 +1,4 @@
 export * from './core';
 export * from './platform';
 export * from './admin';
+export * from './enterprise';

packages/gamut-styles/src/variables/colors.ts

@@ -154,3 +154,80 @@ export const platformPalette = {
   ...flattenScale(platformSwatches),
   ...truePlatformColors,
 } as const;
+
+/**
+ * Enterprise Colors
+ */
+
+const enterpriseBlack = '#000C14';
+
+export const enterpriseSwatches = {
+  blue: {
+    '50': '#F0F8FE',
+    '100': '#E0F2FE',
+    '200': '#B7DDF8',
+    '300': '#78BAE9',
+    '400': '#3498DF',
+    '500': '#0073C4',
+    '600': '#005998',
+    '700': '#00406C',
+    '800': '#002640',
+    '900': '#001626',
+  },
+  gray: {
+    '50': '#F3F5F7',
+    '100': '#E1E6EA',
+    '200': '#CAD4DC',
+    '300': '#AAB8C1',
+    '400': '#80919C',
+    '500': '#6B7B85',
+    '600': '#56646E',
+    '700': '#404E58',
+    '800': '#2B3841',
+    '900': '#15222B',
+  },
+  skyBlue: {
+    '100': '#E6FAFF',
+    '500': '#21B9E8',
+  },
+  green: {
+    '0': '#EBF6E4',
+    '400': '#6EAB49',
+    '500': '#42811A',
+    '700': '#1D4C12',
+  },
+  pink: {
+    '100': '#FEE7F2',
+    '400': '#DF659E',
+    '500': '#CD397E',
+  },
+  yellow: {
+    '0': '#FEFAE8',
+    '500': '#E8C427',
+  },
+  orange: {
+    '500': '#F2A036',
+  },
+  red: {
+    '0': '#FBE8E8',
+    '100': '#F4C7C7',
+    '500': '#BE3636',
+    '600': '#932729',
+  },
+} as const;
+
+const trueEnterpriseColors = {
+  mulberryPink: enterpriseSwatches.pink[500],
+  blue: enterpriseSwatches.blue[400],
+  green: enterpriseSwatches.green[500],
+  skyBlue: enterpriseSwatches.skyBlue[500],
+  yellow: enterpriseSwatches.yellow[500],
+  red: enterpriseSwatches.red[500],
+  gray: enterpriseSwatches.gray[500],
+  black: enterpriseBlack,
+} as const;
+
+export const enterprisePalette = {
+  ...flattenScale(enterpriseSwatches),
+  ...trueEnterpriseColors,
+} as const;

packages/gamut/src/Tabs/TabNav.tsx

@@ -2,7 +2,7 @@ import { styledOptions } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
-import { tabElementBaseProps, TabElementStyleProps } from "./props";
+import { tabElementBaseProps, TabElementStyleProps } from './props';
 import { tabContainerStates, tabContainerVariants } from './styles';
 
 export interface TabNavProps