Implement standardized color system: update theme with new color tokens, add color inventory and migration guide documentation, and create ColorPalette component for showcasing colors.

frontend/vite-template-master/src/components/ColorPalette/ColorPalette.story.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorPalette } from './ColorPalette';
+
+const meta = {
+  title: 'Design System/ColorPalette',
+  component: ColorPalette,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof ColorPalette>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {}; 

frontend/vite-template-master/src/components/ColorPalette/ColorPalette.tsx

@@ -0,0 +1,154 @@
+import { Box, Group, Stack, Text, Title, useMantineTheme } from '@mantine/core';
+
+interface ColorSwatchProps {
+  colorName: string;
+  shade: number;
+  hex: string;
+}
+
+function ColorSwatch({ colorName, shade, hex }: ColorSwatchProps) {
+  return (
+    <Box>
+      <Box
+        style={{
+          backgroundColor: hex,
+          width: '100%',
+          height: 50,
+          borderRadius: 5,
+          marginBottom: 5,
+          border: '1px solid var(--mantine-color-brand-gray-3)',
+        }}
+      />
+      <Text size="xs" fw={700}>
+        {colorName}-{shade}
+      </Text>
+      <Text size="xs" c="dimmed">
+        {hex}
+      </Text>
+    </Box>
+  );
+}
+
+interface ColorGroupProps {
+  title: string;
+  colorName: string;
+  description: string;
+  colors: readonly string[];
+}
+
+function ColorGroup({ title, colorName, description, colors }: ColorGroupProps) {
+  return (
+    <Stack gap="md">
+      <Box mb={10}>
+        <Title order={3}>{title}</Title>
+        <Text size="sm">{description}</Text>
+      </Box>
+      <Group grow>
+        {colors.map((color, index) => (
+          <ColorSwatch key={index} colorName={colorName} shade={index} hex={color} />
+        ))}
+      </Group>
+    </Stack>
+  );
+}
+
+export function ColorPalette() {
+  const theme = useMantineTheme();
+
+  return (
+    <Stack gap="xl">
+      <Title order={1}>Color Palette Documentation</Title>
+      <Text>
+        This component showcases all colors defined in our theme system. Use these colors
+        consistently throughout the application for a cohesive design.
+      </Text>
+
+      <ColorGroup
+        title="Brand Primary"
+        colorName="brand-primary"
+        description="Main brand color for primary actions, links, and brand identity elements."
+        colors={theme.colors['brand-primary']}
+      />
+
+      <ColorGroup
+        title="Brand Secondary"
+        colorName="brand-secondary"
+        description="Complementary color for secondary UI elements and visual hierarchy."
+        colors={theme.colors['brand-secondary']}
+      />
+
+      <ColorGroup
+        title="Brand Accent"
+        colorName="brand-accent"
+        description="Accent color for call-to-actions and highlighting important elements."
+        colors={theme.colors['brand-accent']}
+      />
+
+      <ColorGroup
+        title="Brand Gray"
+        colorName="brand-gray"
+        description="Neutral colors for text, backgrounds, borders, and non-emphasized UI elements."
+        colors={theme.colors['brand-gray']}
+      />
+
+      <ColorGroup
+        title="Success"
+        colorName="success"
+        description="Used for positive actions, success messages, and confirmations."
+        colors={theme.colors.success}
+      />
+
+      <ColorGroup
+        title="Warning"
+        colorName="warning"
+        description="Used for warnings and alerts that need attention but aren't critical."
+        colors={theme.colors.warning}
+      />
+
+      <ColorGroup
+        title="Error"
+        colorName="error"
+        description="Used for errors, destructive actions, and critical alerts."
+        colors={theme.colors.error}
+      />
+
+      <Box my={20}>
+        <Title order={2}>Semantic Color Usage</Title>
+        <Text mb={10}>These are recommended usages for our color system:</Text>
+
+        <Stack gap="xs">
+          <Text>
+            <b>Primary Buttons:</b> brand-primary-6
+          </Text>
+          <Text>
+            <b>Secondary Buttons:</b> brand-secondary-6
+          </Text>
+          <Text>
+            <b>Accent Buttons:</b> brand-accent-6
+          </Text>
+          <Text>
+            <b>Text on Light Backgrounds:</b> brand-gray-7
+          </Text>
+          <Text>
+            <b>Text on Dark Backgrounds:</b> brand-gray-0
+          </Text>
+          <Text>
+            <b>Borders & Dividers:</b> brand-gray-3
+          </Text>
+          <Text>
+            <b>Page Backgrounds:</b> brand-gray-0
+          </Text>
+          <Text>
+            <b>Success States:</b> success-6
+          </Text>
+          <Text>
+            <b>Warning States:</b> warning-6
+          </Text>
+          <Text>
+            <b>Error States:</b> error-6
+          </Text>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}