115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
/**
|
|
* 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;
|
|
|