From b2422b9de4447b12b10fef846796826aabe4b0b0 Mon Sep 17 00:00:00 2001
From: Nicholas Barnett <n-barnett@hotmail.com>
Date: Tue, 15 Oct 2024 17:48:02 -0500
Subject: [PATCH] feat: added new dsign sys colors

---
 src/stories/Colors.stories.tsx | 53 ++++++++++++++++++++++
 src/ui/theme/new-colors.ts     | 83 ++++++++++++++++++++++++++++++++++
 src/ui/theme/theme.ts          |  3 +-
 3 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 src/stories/Colors.stories.tsx
 create mode 100644 src/ui/theme/new-colors.ts

diff --git a/src/stories/Colors.stories.tsx b/src/stories/Colors.stories.tsx
new file mode 100644
index 000000000..f45f2a25c
--- /dev/null
+++ b/src/stories/Colors.stories.tsx
@@ -0,0 +1,53 @@
+import { Box } from '@/ui/Box';
+import { Flex } from '@/ui/Flex';
+import { Heading } from '@/ui/Heading';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { NEW_COLORS } from '../ui/theme/new-colors';
+
+const ColorSwatch = ({ colorName, colorValue }: { colorName: string; colorValue: string }) => (
+  <Stack align="start" spacing={1}>
+    <Box w="100px" h="100px" bg={colorValue} borderRadius="md" border="1px solid black" />
+    <Text fontSize="sm" fontWeight="bold">
+      {colorName}
+    </Text>
+    <Text fontSize="xs">{colorValue}</Text>
+  </Stack>
+);
+
+const ColorSection = ({ title, colors }: { title: string; colors: Record<string, string> }) => (
+  <Box mb={8}>
+    <Heading size="md" mb={4}>
+      {title}
+    </Heading>
+    <Flex gap={4} flexWrap="wrap">
+      {Object.entries(colors).map(([name, value]) => (
+        <ColorSwatch key={name} colorName={name} colorValue={value} />
+      ))}
+    </Flex>
+  </Box>
+);
+
+const ColorPalette = () => (
+  <Stack align="stretch" spacing={8}>
+    {Object.entries(NEW_COLORS).map(([section, colors]) => (
+      <ColorSection key={section} title={section} colors={colors} />
+    ))}
+  </Stack>
+);
+
+const meta = {
+  title: 'Theme/Colors',
+  component: ColorPalette,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorPalette>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllColors: Story = {};
diff --git a/src/ui/theme/new-colors.ts b/src/ui/theme/new-colors.ts
new file mode 100644
index 000000000..30fbd4e33
--- /dev/null
+++ b/src/ui/theme/new-colors.ts
@@ -0,0 +1,83 @@
+export const NEW_COLORS = {
+  neutral: {
+    white: '#ffffff',
+    'sand-50': '#f7f6f5',
+    'sand-100': '#f3f2f0',
+    'sand-150': '#eae8e6',
+    'sand-200': '#d5d3d1',
+    'sand-300': '#bfbdba',
+    'sand-400': '#95918c',
+    'sand-500': '#777470',
+    'sand-600': '#595754',
+    'sand-700': '#3c3a38',
+    'sand-800': '#2d2c2a',
+    'sand-900': '#211f1f',
+    'sand-950': '#181716',
+    'sand-1000': '#0f0f0e',
+    black: '#000000',
+  },
+  accent: {
+    'stacks-100': '#FFDFD1',
+    'stacks-200': '#FFC2A8',
+    'stacks-300': '#FFA57F',
+    'stacks-400': '#FF8761',
+    'stacks-500': '#FC6432',
+    'stacks-600': '#CC4900',
+    'stacks-700': '#9C310D',
+    'bitcoin-100': '#FFDFC1',
+    'bitcoin-200': '#FFD1A7',
+    'bitcoin-300': '#FFC288',
+    'bitcoin-400': '#FFAD65',
+    'bitcoin-500': '#FF9835',
+    'bitcoin-600': '#E17C18',
+    'bitcoin-700': '#FF8B00',
+    'testnet-100': '#E7E5FF',
+    'testnet-200': '#DDD9FF',
+    'testnet-300': '#BBADFF',
+    'testnet-400': '#9985FF',
+    'testnet-500': '#765BFF',
+    'testnet-600': '#593FE0',
+  },
+  contract: {
+    call: '#BDC2A6',
+    deploy: '#D4E523',
+  },
+  alpha: {
+    'sand-alpha-50': 'rgba(243, 242, 240, 0.04)',
+    'sand-alpha-100': 'rgba(243, 242, 240, 0.06)',
+    'sand-alpha-200': 'rgba(243, 242, 240, 0.08)',
+    'sand-alpha-300': 'rgba(243, 242, 240, 0.16)',
+    'sand-alpha-400': 'rgba(243, 242, 240, 0.24)',
+    'sand-alpha-500': 'rgba(243, 242, 240, 0.36)',
+    'sand-alpha-600': 'rgba(243, 242, 240, 0.48)',
+    'sand-alpha-700': 'rgba(243, 242, 240, 0.64)',
+    'sand-alpha-800': 'rgba(243, 242, 240, 0.80)',
+    'sand-alpha-900': 'rgba(243, 242, 240, 0.92)',
+  },
+  status: {
+    'green-100': '#0070dd',
+    'green-200': '#adddc0',
+    'green-300': '#8ECEAA',
+    'green-400': '#5bb98b',
+    'green-500': '#30a46c',
+    'green-600': '#218358',
+    'blue-100': '#e9f3ff',
+    'blue-200': '#dbecff',
+    'blue-300': '#b5d5ff',
+    'blue-400': '#75acf3',
+    'blue-500': '#2c8dff',
+    'blue-600': '#0070dd',
+    'red-100': '#ffe9e9',
+    'red-200': '#ffcaca',
+    'red-300': '#ff9da0',
+    'red-400': '#f06e76',
+    'red-500': '#e32a35',
+    'red-600': '#b01425',
+    'yellow-100': '#fefce9',
+    'yellow-200': '#fff9b7',
+    'yellow-300': '#fff394',
+    'yellow-400': '#f9e972',
+    'yellow-500': '#f3dc00',
+    'yellow-600': '#dbc600',
+  },
+};
diff --git a/src/ui/theme/theme.ts b/src/ui/theme/theme.ts
index d322f46bb..7e4811f95 100644
--- a/src/ui/theme/theme.ts
+++ b/src/ui/theme/theme.ts
@@ -13,6 +13,7 @@ import { switchTheme } from './componentTheme/Switch';
 import { tabTheme } from './componentTheme/Tab';
 import { tagTheme } from './componentTheme/Tag';
 import { inter, openSauce } from './fonts';
+import { NEW_COLORS } from './new-colors';
 
 export const theme = extendTheme({
   config: {
@@ -20,7 +21,7 @@ export const theme = extendTheme({
     useSystemColorMode: false,
     cssVarPrefix: 'stacks',
   },
-  colors: COLORS,
+  colors: { ...COLORS, ...NEW_COLORS },
   semanticTokens: {
     colors: {
       brand: '#FC6432',