From dc2779b9c2242f5afc9a311448d8b460917d6075 Mon Sep 17 00:00:00 2001
From: Jesse Pinho <jesse@jessepinho.com>
Date: Mon, 15 Jul 2024 13:29:24 -0700
Subject: [PATCH] Build out color palette

---
 packages/ui/src/Grid/index.stories.tsx |   2 +-
 packages/ui/src/ThemeProvider/theme.ts | 145 ++++++++++++++++++++++++-
 packages/ui/src/styled-components.d.ts |  28 ++++-
 3 files changed, 165 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/Grid/index.stories.tsx b/packages/ui/src/Grid/index.stories.tsx
index 2327e4a823..10069988ae 100644
--- a/packages/ui/src/Grid/index.stories.tsx
+++ b/packages/ui/src/Grid/index.stories.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
 `;
 
 const Item = styled.div`
-  background-color: ${props => props.theme.palette.neutral['700']};
+  background-color: ${props => props.theme.colors.neutral.main};
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/packages/ui/src/ThemeProvider/theme.ts b/packages/ui/src/ThemeProvider/theme.ts
index 003d639bb9..37920a33f6 100644
--- a/packages/ui/src/ThemeProvider/theme.ts
+++ b/packages/ui/src/ThemeProvider/theme.ts
@@ -1,5 +1,99 @@
 import { DefaultTheme } from 'styled-components';
 
+const PALETTE = {
+  green: {
+    50: '#f0fdf4',
+    100: '#DEFAE8',
+    200: '#BFF3D1',
+    300: '#8DE8AE',
+    400: '#55D383',
+    500: '#2DBA61',
+    600: '#1F9A4C',
+    700: '#1C793F',
+    800: '#1C5F36',
+    900: '#194E2E',
+    950: '#03160B',
+  },
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+  },
+  orange: {
+    50: '#FFF8ED',
+    100: '#FDEED6',
+    200: '#FBDBAD',
+    300: '#F8C079',
+    400: '#F49C43',
+    500: '#F07E1C',
+    600: '#E16615',
+    700: '#BA4D14',
+    800: '#933E19',
+    900: '#773517',
+    950: '#200B04',
+  },
+  purple: {
+    50: '#FAF7FC',
+    100: '#F5F0F7',
+    200: '#E9E0EE',
+    300: '#D8C7E0',
+    400: '#C1A6CC',
+    500: '#A582B3',
+    600: '#886693',
+    700: '#705279',
+    800: '#5F4766',
+    900: '#4F3C53',
+    950: '#180E1B',
+  },
+  red: {
+    50: '#fef2f2',
+    100: '#FCE4E4',
+    200: '#FBCDCD',
+    300: '#F8A9A9',
+    400: '#F17878',
+    500: '#E54E4E',
+    600: '#CF3333',
+    700: '#AF2626',
+    800: '#902424',
+    900: '#772525',
+    950: '#1E0606',
+  },
+  teal: {
+    50: '#f1fcfa',
+    100: '#D4F3EE',
+    200: '#92DFD5',
+    300: '#77D1C8',
+    400: '#53AEA8',
+    500: '#319B96',
+    600: '#257C79',
+    700: '#226362',
+    800: '#204F4F',
+    900: '#1F4242',
+    950: '#031516',
+  },
+  yellow: {
+    50: '#FDFCE9',
+    100: '#FBF7C6',
+    200: '#F8EB90',
+    300: '#F4DA50',
+    400: '#E8C127',
+    500: '#DDAD15',
+    600: '#C0860E',
+    700: '#99610F',
+    800: '#7E4D15',
+    900: '#6B3F18',
+    950: '#201004',
+  },
+};
+
 export const theme: DefaultTheme = {
   breakpoints: {
     mobile: 0,
@@ -28,11 +122,54 @@ export const theme: DefaultTheme = {
     textSm: '0.875rem',
     textXs: '0.75rem',
   },
-  palette: {
+  colors: {
     neutral: {
-      100: '#f5f5f5',
-      400: '#a3a3a3',
-      700: '#404040',
+      main: PALETTE.neutral['700'],
+      light: PALETTE.neutral['400'],
+      dark: PALETTE.neutral['900'],
+      contrast: PALETTE.neutral['50'],
+    },
+    primary: {
+      main: PALETTE.orange['700'],
+      light: PALETTE.orange['400'],
+      dark: PALETTE.orange['950'],
+      contrast: PALETTE.orange['50'],
+    },
+    secondary: {
+      main: PALETTE.teal['700'],
+      light: PALETTE.teal['400'],
+      dark: PALETTE.teal['950'],
+      contrast: PALETTE.teal['50'],
+    },
+    unshield: {
+      main: PALETTE.purple['700'],
+      light: PALETTE.purple['400'],
+      dark: PALETTE.purple['950'],
+      contrast: PALETTE.purple['50'],
+    },
+    destructive: {
+      main: PALETTE.red['700'],
+      light: PALETTE.red['400'],
+      dark: PALETTE.red['950'],
+      contrast: PALETTE.red['50'],
+    },
+    caution: {
+      main: PALETTE.yellow['700'],
+      light: PALETTE.yellow['400'],
+      dark: PALETTE.yellow['950'],
+      contrast: PALETTE.yellow['50'],
+    },
+    success: {
+      main: PALETTE.green['700'],
+      light: PALETTE.green['400'],
+      dark: PALETTE.green['950'],
+      contrast: PALETTE.green['50'],
+    },
+    text: {
+      primary: PALETTE.neutral['50'],
+      secondary: PALETTE.neutral['300'],
+      disabled: PALETTE.neutral['500'],
+      special: PALETTE.orange['400'],
     },
   },
   spacing: spacingUnits => `${spacingUnits * 4}px`,
diff --git a/packages/ui/src/styled-components.d.ts b/packages/ui/src/styled-components.d.ts
index ce78121182..f55027ee08 100644
--- a/packages/ui/src/styled-components.d.ts
+++ b/packages/ui/src/styled-components.d.ts
@@ -1,5 +1,12 @@
 import 'styled-components';
 
+interface Colors {
+  main: string;
+  light: string;
+  dark: string;
+  contrast: string;
+}
+
 declare module 'styled-components' {
   export interface DefaultTheme {
     breakpoints: {
@@ -29,11 +36,22 @@ declare module 'styled-components' {
       textSm: string;
       textXs: string;
     };
-    palette: {
-      neutral: {
-        100: string;
-        400: string;
-        700: string;
+    colors: {
+      neutral: Colors;
+      primary: Colors;
+      secondary: Colors;
+      unshield: Colors;
+      destructive: Colors;
+      caution: Colors;
+      success: Colors;
+
+      // Special cases
+
+      text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+        special: string;
       };
     };
     /**