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

2025-04-15 15:52:13 +01:00
parent 1450d36a63
commit 884ca29046
7 changed files with 765 additions and 3 deletions
--- a/frontend/vite-template-master/src/theme.ts
+++ b/frontend/vite-template-master/src/theme.ts
@@ -1,5 +1,140 @@
-import { createTheme } from '@mantine/core';
+import { createTheme, rem } from '@mantine/core';

 export const theme = createTheme({
-  /** Put your mantine theme override here */
+  /** Color system for the application */
+  colors: {
+    // Primary brand color (blue shades from inventory with consistent gradation)
+    'brand-primary': [
+      '#EAF4FF', // 0: Lightest shade
+      '#D5E9FF', // 1
+      '#B0D3FF', // 2
+      '#8BBDFF', // 3
+      '#66A7FF', // 4: Base blue shade
+      '#4191FF', // 5
+      '#1C7BFF', // 6
+      '#0065F2', // 7: Original blue-7 shade
+      '#0055CC', // 8
+      '#004099', // 9: Darkest shade
+    ],
+
+    // Secondary brand color - a complementary shade to the primary
+    'brand-secondary': [
+      '#F0F4F9', // 0
+      '#E1E9F4', // 1
+      '#C3D4E9', // 2
+      '#A5BFDE', // 3
+      '#87AAD3', // 4
+      '#6995C8', // 5
+      '#4B80BD', // 6
+      '#2D6BB2', // 7
+      '#1F5A99', // 8
+      '#114480', // 9
+    ],
+
+    // Accent color for highlights, call to actions, important elements
+    'brand-accent': [
+      '#FFF0EA', // 0
+      '#FFE1D5', // 1
+      '#FFC3AD', // 2
+      '#FFA584', // 3
+      '#FF875B', // 4
+      '#FF6932', // 5
+      '#FF4A09', // 6
+      '#D93A00', // 7
+      '#B02F00', // 8
+      '#882400', // 9
+    ],
+
+    // Standardized gray shades for consistency
+    'brand-gray': [
+      '#F8F9FA', // 0
+      '#F1F3F5', // 1
+      '#E9ECEF', // 2
+      '#DEE2E6', // 3
+      '#CED4DA', // 4
+      '#ADB5BD', // 5
+      '#868E96', // 6
+      '#495057', // 7
+      '#343A40', // 8
+      '#212529', // 9
+    ],
+
+    // Semantic colors for state indications
+    success: [
+      '#EAFAF1', // 0
+      '#D5F5E3', // 1
+      '#ABEBC6', // 2
+      '#82E0AA', // 3
+      '#58D68D', // 4
+      '#2ECC71', // 5
+      '#27AE60', // 6
+      '#229954', // 7
+      '#1E8449', // 8
+      '#196F3D', // 9
+    ],
+
+    warning: [
+      '#FEF9E7', // 0
+      '#FCF3CF', // 1
+      '#F9E79F', // 2
+      '#F7DC6F', // 3
+      '#F4D03F', // 4
+      '#F1C40F', // 5
+      '#D4AC0D', // 6
+      '#B7950B', // 7
+      '#9A7D0A', // 8
+      '#7D6608', // 9
+    ],
+
+    error: [
+      '#FDEDEC', // 0
+      '#FADBD8', // 1
+      '#F5B7B1', // 2
+      '#F1948A', // 3
+      '#EC7063', // 4
+      '#E74C3C', // 5
+      '#CB4335', // 6
+      '#B03A2E', // 7
+      '#943126', // 8
+      '#78281F', // 9
+    ],
+  },
+
+  // Set the primary color to our brand-primary
+  primaryColor: 'brand-primary',
+
+  // Add consistent spacing values
+  spacing: {
+    xs: rem(4),
+    sm: rem(8),
+    md: rem(16),
+    lg: rem(24),
+    xl: rem(32),
+    '2xl': rem(40),
+    '3xl': rem(64),
+  },
+
+  // Add consistent border radius values
+  radius: {
+    xs: rem(2),
+    sm: rem(4),
+    md: rem(8),
+    lg: rem(16),
+    xl: rem(24),
+  },
+
+  // Other theme customizations
+  fontFamily:
+    '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+
+  // Add semantic tokens for common elements
+  other: {
+    headerBgColor: 'var(--mantine-color-body)',
+    headerBorderColor: 'var(--mantine-color-brand-gray-3)',
+    navigationActiveColor: 'var(--mantine-color-brand-primary-6)',
+    navigationHoverColor: 'var(--mantine-color-brand-primary-0)',
+    buttonPrimaryBg: 'var(--mantine-color-brand-primary-6)',
+    buttonSecondaryBg: 'var(--mantine-color-brand-secondary-6)',
+    buttonAccentBg: 'var(--mantine-color-brand-accent-6)',
+  },
 });