feat: added new dsign sys colors

src/app/block/[hash]/PageClient.tsx

@@ -42,6 +42,7 @@ export default function BlockPage({ params: { hash } }: any) {
   return (
     <>
       <PageTitle>{title}</PageTitle>
+      <Text color="accent.bitcoin-700">{title}</Text>
       <TowColLayout>
         <Section title="Summary">
           <KeyValueHorizontal label={'Hash'} value={<Value>{hash}</Value>} copyValue={hash} />

src/stories/Colors.stories.tsx

@@ -0,0 +1,85 @@
+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 = ({
+  title,
+  colorName,
+  colorValue,
+}: {
+  title: string;
+  colorName: string;
+  colorValue: string;
+}) => (
+  <Stack align="start" spacing={1}>
+    <Box
+      w="100px"
+      h="100px"
+      bg={`${title}.${colorName}`}
+      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} title={title} 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',
+    docs: {
+      source: {
+        code: `
+// Example ColorSwatch for bitcoin-700
+const ColorSwatch = () => (
+    <Stack align="start" spacing={1}>
+        <Box w="100px" h="100px" bg='accent.bitcoin-700' borderRadius="md" border="1px solid black" />
+        <Text fontSize="sm" fontWeight="bold">
+            bitcoin-700
+        </Text>
+        <Text fontSize="xs">#FF8B00</Text>
+    </Stack>
+);
+            `,
+        language: 'tsx',
+        type: 'auto',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorPalette>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const AllColors: Story = {};

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',
+  },
+};

src/ui/theme/theme.ts

@@ -13,14 +13,15 @@ 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: {
     initialColorMode: 'light',
     useSystemColorMode: false,
     cssVarPrefix: 'stacks',
   },
-  colors: COLORS,
+  colors: { ...COLORS, ...NEW_COLORS },
   semanticTokens: {
     colors: {
       brand: '#FC6432',