Centralised theme management

2026-10-29 16:38:03 +02:00
parent c8ca8ac95b
commit 0fe6f40b2a
10 changed files with 1912 additions and 41 deletions
@@ -0,0 +1,114 @@
+/**
+ * Post Fund Management Partner Portal — UI Design System & Theme Specification
+ * 
+ * Centralized configuration for all colors, typography, layout, WebGL effects, and component tokens.
+ * This file is compiled along with the PartnerUI application.
+ * 
+ * To customize the PartnerUI theme, adjust the values below and the matching CSS
+ * variables in `src/theme.css`.
+ */
+
+export const ThemeConfig = {
+  metadata: {
+    appId: 'PartnerUI',
+    appName: 'Post Fund Management Partner Portal',
+    description: 'External grantee and partner portal for drawdown requests, evidence submission, and milestone reporting',
+    colorScheme: 'dark' as const,
+    version: '1.0.0',
+  },
+
+  /* ==========================================================================
+     1. TYPOGRAPHY & FONT SPECIFICATIONS
+     ========================================================================= */
+  typography: {
+    fonts: {
+      sans: "'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif",
+      mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    },
+    googleFontsUrl:
+      'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap',
+    weights: {
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700,
+      extrabold: 800,
+    },
+  },
+
+  /* ==========================================================================
+     2. COLOR PALETTE SPECIFICATIONS (Emerald / Teal Tech Aesthetic)
+     ========================================================================= */
+  colors: {
+    // Primary Brand Accent (Emerald / Teal)
+    primary: {
+      50: '#ecfdf5',
+      100: '#d1fae5',
+      200: '#a7f3d0',
+      300: '#6ee7b7',
+      400: '#34d399',
+      500: '#10b981', // Main Accent
+      600: '#059669', // Action button hover
+      700: '#047857',
+      800: '#065f46',
+      900: '#064e3b',
+      950: '#022c22',
+      contrastText: '#ffffff',
+    },
+
+    // Secondary Accent (Cyan / Sky for gradients & glows)
+    secondary: {
+      300: '#67e8f9',
+      400: '#22d3ee',
+      500: '#06b6d4',
+    },
+
+    // Surfaces & Canvas (Dark Obsidian Theme)
+    surfaces: {
+      canvas: '#020617',          // slate-950 body
+      glassCard: 'rgba(15, 23, 42, 0.40)', // slate-900/40 glassmorphic backdrop
+      solidCard: '#0b1120',
+      cardHover: 'rgba(30, 41, 59, 0.50)',
+      input: '#090e1a',
+    },
+
+    // Text & Content Contrast
+    text: {
+      primary: '#f8fafc',         // slate-100
+      secondary: '#cbd5e1',       // slate-300
+      muted: '#94a3b8',           // slate-400
+      accent: '#6ee7b7',          // emerald-300
+    },
+
+    // Borders & Glass Highlights
+    borders: {
+      glass: 'rgba(255, 255, 255, 0.12)',
+      glassHighlight: 'rgba(255, 255, 255, 0.25)',
+      subtle: 'rgba(255, 255, 255, 0.06)',
+      accentBorder: 'rgba(16, 185, 129, 0.25)',
+    },
+
+    // Status & Milestones
+    status: {
+      verified: { bg: 'rgba(16, 185, 129, 0.16)', text: '#6ee7b7', border: 'rgba(110, 231, 183, 0.35)' },
+      inProgress: { bg: 'rgba(6, 182, 212, 0.16)', text: '#67e8f9', border: 'rgba(103, 232, 249, 0.35)' },
+      pendingAction: { bg: 'rgba(245, 158, 11, 0.16)', text: '#fcd34d', border: 'rgba(252, 211, 77, 0.35)' },
+      rejected: { bg: 'rgba(244, 63, 94, 0.16)', text: '#fda4af', border: 'rgba(253, 164, 175, 0.35)' },
+    },
+  },
+
+  /* ==========================================================================
+     3. VISUAL EFFECTS, SHADERS & GEOMETRY
+     ========================================================================= */
+  effects: {
+    borderGlowRadius: '28px',
+    specularButtonRadius: '18px',
+    modalRadius: '24px',
+    glowColor: '#10b981',
+    glowColorSecondary: '#06b6d4',
+  },
+} as const;
+
+export type PartnerTheme = typeof ThemeConfig;
+