From 0fe6f40b2ad8866fcb489b24ed9f2b4699efb708 Mon Sep 17 00:00:00 2001 From: Hermes Agent Date: Thu, 29 Oct 2026 16:38:03 +0200 Subject: [PATCH] Centralised theme management --- .../design-tokens.tokens.json | 437 ++++++++++++++++++ .../src/design-tokens.tokens.json | 437 ++++++++++++++++++ PostFundManagement.ConsoleUI/src/index.css | 69 ++- .../src/theme.config.ts | 156 +++++++ PostFundManagement.ConsoleUI/src/theme.css | 56 +++ .../design-tokens.tokens.json | 315 +++++++++++++ .../src/design-tokens.tokens.json | 315 +++++++++++++ PostFundManagement.PartnerUI/src/index.css | 9 +- .../src/theme.config.ts | 114 +++++ PostFundManagement.PartnerUI/src/theme.css | 45 ++ 10 files changed, 1912 insertions(+), 41 deletions(-) create mode 100644 PostFundManagement.ConsoleUI/design-tokens.tokens.json create mode 100644 PostFundManagement.ConsoleUI/src/design-tokens.tokens.json create mode 100644 PostFundManagement.ConsoleUI/src/theme.config.ts create mode 100644 PostFundManagement.ConsoleUI/src/theme.css create mode 100644 PostFundManagement.PartnerUI/design-tokens.tokens.json create mode 100644 PostFundManagement.PartnerUI/src/design-tokens.tokens.json create mode 100644 PostFundManagement.PartnerUI/src/theme.config.ts create mode 100644 PostFundManagement.PartnerUI/src/theme.css diff --git a/PostFundManagement.ConsoleUI/design-tokens.tokens.json b/PostFundManagement.ConsoleUI/design-tokens.tokens.json new file mode 100644 index 0000000..5a9e8be --- /dev/null +++ b/PostFundManagement.ConsoleUI/design-tokens.tokens.json @@ -0,0 +1,437 @@ +{ + "$name": "Post Fund Management Console — Design Tokens", + "$description": "Standard W3C DTCG Design Token specification for PFM ConsoleUI (Funder Backoffice & Portfolio Governance Portal). Compatible with Figma Variables and Tokens Studio.", + "$version": "1.0.0", + "color": { + "primary": { + "50": { + "$type": "color", + "$value": "#eff6ff", + "$description": "Primary accent background tint" + }, + "100": { + "$type": "color", + "$value": "#dbeafe", + "$description": "Primary accent light surface" + }, + "200": { + "$type": "color", + "$value": "#bfdbfe", + "$description": "Primary accent subtle border" + }, + "300": { + "$type": "color", + "$value": "#93c5fd", + "$description": "Primary accent muted indicator" + }, + "400": { + "$type": "color", + "$value": "#60a5fa", + "$description": "Primary accent light text / icon" + }, + "500": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Primary accent interactive default" + }, + "600": { + "$type": "color", + "$value": "#2563eb", + "$description": "Primary action button and brand accent" + }, + "700": { + "$type": "color", + "$value": "#1d4ed8", + "$description": "Primary action button hover state" + }, + "800": { + "$type": "color", + "$value": "#1e40af", + "$description": "Primary action button active state" + }, + "900": { + "$type": "color", + "$value": "#1e3a8a", + "$description": "Primary dark container" + }, + "950": { + "$type": "color", + "$value": "#172554", + "$description": "Primary deepest container" + } + }, + "surface": { + "canvas": { + "$type": "color", + "$value": "#090d16", + "$description": "Main application body and viewport background" + }, + "card": { + "$type": "color", + "$value": "#111111", + "$description": "Standard container card and panel surface" + }, + "cardElevated": { + "$type": "color", + "$value": "#161616", + "$description": "Elevated cards, dropdowns, and modal dialogs" + }, + "rowHighlight": { + "$type": "color", + "$value": "#202020", + "$description": "Active or selected list and table items" + }, + "hover": { + "$type": "color", + "$value": "#1f1f1f", + "$description": "Table row and clickable surface hover background" + }, + "input": { + "$type": "color", + "$value": "#141414", + "$description": "Form inputs, select boxes, and textareas" + } + }, + "text": { + "primary": { + "$type": "color", + "$value": "#ffffff", + "$description": "High-emphasis headings, titles, and active labels" + }, + "body": { + "$type": "color", + "$value": "#e2e8f0", + "$description": "Standard readable body copy" + }, + "secondary": { + "$type": "color", + "$value": "#cbd5e1", + "$description": "Table headers, field labels, and secondary text" + }, + "muted": { + "$type": "color", + "$value": "#94a3b8", + "$description": "Captions, metadata, and placeholder text" + }, + "disabled": { + "$type": "color", + "$value": "#64748b", + "$description": "Disabled controls and inactive hints" + } + }, + "border": { + "subtle": { + "$type": "color", + "$value": "#222222", + "$description": "Subtle card inner dividers" + }, + "default": { + "$type": "color", + "$value": "#2d2d2d", + "$description": "Standard structural card and section border" + }, + "strong": { + "$type": "color", + "$value": "#3d3d3d", + "$description": "Prominent borders and group dividers" + }, + "input": { + "$type": "color", + "$value": "#383838", + "$description": "Form control border outline" + }, + "divider": { + "$type": "color", + "$value": "#242424", + "$description": "Table row dividers and separator rules" + }, + "focusRing": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Keyboard accessibility focus outline" + } + }, + "status": { + "success": { + "bg": { + "$type": "color", + "$value": "#10b98129", + "$description": "Success badge background tint" + }, + "text": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Success badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#6ee7b759", + "$description": "Success badge border" + }, + "solid": { + "$type": "color", + "$value": "#10b981", + "$description": "Success solid accent indicator" + } + }, + "warning": { + "bg": { + "$type": "color", + "$value": "#f59e0b29", + "$description": "Warning badge background tint" + }, + "text": { + "$type": "color", + "$value": "#fcd34d", + "$description": "Warning badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#fcd34d59", + "$description": "Warning badge border" + }, + "solid": { + "$type": "color", + "$value": "#f59e0b", + "$description": "Warning solid accent indicator" + } + }, + "danger": { + "bg": { + "$type": "color", + "$value": "#f43f5e29", + "$description": "Danger/Error badge background tint" + }, + "text": { + "$type": "color", + "$value": "#fda4af", + "$description": "Danger/Error badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#fda4af59", + "$description": "Danger/Error badge border" + }, + "solid": { + "$type": "color", + "$value": "#f43f5e", + "$description": "Danger solid accent indicator" + } + }, + "info": { + "bg": { + "$type": "color", + "$value": "#3b82f629", + "$description": "Info badge background tint" + }, + "text": { + "$type": "color", + "$value": "#93c5fd", + "$description": "Info badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#93c5fd59", + "$description": "Info badge border" + }, + "solid": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Info solid accent indicator" + } + }, + "purple": { + "bg": { + "$type": "color", + "$value": "#8b5cf629", + "$description": "Governance badge background tint" + }, + "text": { + "$type": "color", + "$value": "#d8b4fe", + "$description": "Governance badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#d8b4fe59", + "$description": "Governance badge border" + }, + "solid": { + "$type": "color", + "$value": "#8b5cf6", + "$description": "Governance solid accent indicator" + } + } + } + }, + "typography": { + "fontFamily": { + "sans": { + "$type": "fontFamily", + "$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"], + "$description": "Primary UI font family" + }, + "mono": { + "$type": "fontFamily", + "$value": ["JetBrains Mono", "ui-monospace", "monospace"], + "$description": "Monospace font family for code, identifiers, amounts, and dates" + } + }, + "fontWeight": { + "light": { + "$type": "fontWeight", + "$value": 300, + "$description": "Light weight font" + }, + "regular": { + "$type": "fontWeight", + "$value": 400, + "$description": "Regular weight font" + }, + "medium": { + "$type": "fontWeight", + "$value": 500, + "$description": "Medium weight font" + }, + "semibold": { + "$type": "fontWeight", + "$value": 600, + "$description": "Semibold weight font" + }, + "bold": { + "$type": "fontWeight", + "$value": 700, + "$description": "Bold weight font" + }, + "extrabold": { + "$type": "fontWeight", + "$value": 800, + "$description": "Extrabold weight font" + } + }, + "fontSize": { + "xs": { + "$type": "dimension", + "$value": "12px", + "$description": "Extra small caption text" + }, + "sm": { + "$type": "dimension", + "$value": "14px", + "$description": "Small table and label text" + }, + "base": { + "$type": "dimension", + "$value": "16px", + "$description": "Standard body font size" + }, + "lg": { + "$type": "dimension", + "$value": "18px", + "$description": "Large text / subheadings" + }, + "xl": { + "$type": "dimension", + "$value": "20px", + "$description": "Section headings" + }, + "2xl": { + "$type": "dimension", + "$value": "24px", + "$description": "Page and modal titles" + }, + "3xl": { + "$type": "dimension", + "$value": "30px", + "$description": "Dashboard KPI summary values" + } + }, + "lineHeight": { + "tight": { + "$type": "number", + "$value": 1.25, + "$description": "Tight line height for headings" + }, + "normal": { + "$type": "number", + "$value": 1.5, + "$description": "Standard body line height" + }, + "relaxed": { + "$type": "number", + "$value": 1.75, + "$description": "Relaxed paragraph line height" + } + } + }, + "borderRadius": { + "none": { + "$type": "dimension", + "$value": "0px" + }, + "sm": { + "$type": "dimension", + "$value": "4px", + "$description": "Small tags and tooltips" + }, + "md": { + "$type": "dimension", + "$value": "8px", + "$description": "Form inputs and buttons" + }, + "lg": { + "$type": "dimension", + "$value": "12px", + "$description": "Standard cards and panels" + }, + "xl": { + "$type": "dimension", + "$value": "16px", + "$description": "Modal dialogs and popovers" + }, + "full": { + "$type": "dimension", + "$value": "9999px", + "$description": "Pill badges and circular avatars" + } + }, + "spacing": { + "1": { + "$type": "dimension", + "$value": "4px" + }, + "2": { + "$type": "dimension", + "$value": "8px" + }, + "3": { + "$type": "dimension", + "$value": "12px" + }, + "4": { + "$type": "dimension", + "$value": "16px" + }, + "5": { + "$type": "dimension", + "$value": "20px" + }, + "6": { + "$type": "dimension", + "$value": "24px" + }, + "8": { + "$type": "dimension", + "$value": "32px" + }, + "10": { + "$type": "dimension", + "$value": "40px" + }, + "12": { + "$type": "dimension", + "$value": "48px" + } + } +} + diff --git a/PostFundManagement.ConsoleUI/src/design-tokens.tokens.json b/PostFundManagement.ConsoleUI/src/design-tokens.tokens.json new file mode 100644 index 0000000..5a9e8be --- /dev/null +++ b/PostFundManagement.ConsoleUI/src/design-tokens.tokens.json @@ -0,0 +1,437 @@ +{ + "$name": "Post Fund Management Console — Design Tokens", + "$description": "Standard W3C DTCG Design Token specification for PFM ConsoleUI (Funder Backoffice & Portfolio Governance Portal). Compatible with Figma Variables and Tokens Studio.", + "$version": "1.0.0", + "color": { + "primary": { + "50": { + "$type": "color", + "$value": "#eff6ff", + "$description": "Primary accent background tint" + }, + "100": { + "$type": "color", + "$value": "#dbeafe", + "$description": "Primary accent light surface" + }, + "200": { + "$type": "color", + "$value": "#bfdbfe", + "$description": "Primary accent subtle border" + }, + "300": { + "$type": "color", + "$value": "#93c5fd", + "$description": "Primary accent muted indicator" + }, + "400": { + "$type": "color", + "$value": "#60a5fa", + "$description": "Primary accent light text / icon" + }, + "500": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Primary accent interactive default" + }, + "600": { + "$type": "color", + "$value": "#2563eb", + "$description": "Primary action button and brand accent" + }, + "700": { + "$type": "color", + "$value": "#1d4ed8", + "$description": "Primary action button hover state" + }, + "800": { + "$type": "color", + "$value": "#1e40af", + "$description": "Primary action button active state" + }, + "900": { + "$type": "color", + "$value": "#1e3a8a", + "$description": "Primary dark container" + }, + "950": { + "$type": "color", + "$value": "#172554", + "$description": "Primary deepest container" + } + }, + "surface": { + "canvas": { + "$type": "color", + "$value": "#090d16", + "$description": "Main application body and viewport background" + }, + "card": { + "$type": "color", + "$value": "#111111", + "$description": "Standard container card and panel surface" + }, + "cardElevated": { + "$type": "color", + "$value": "#161616", + "$description": "Elevated cards, dropdowns, and modal dialogs" + }, + "rowHighlight": { + "$type": "color", + "$value": "#202020", + "$description": "Active or selected list and table items" + }, + "hover": { + "$type": "color", + "$value": "#1f1f1f", + "$description": "Table row and clickable surface hover background" + }, + "input": { + "$type": "color", + "$value": "#141414", + "$description": "Form inputs, select boxes, and textareas" + } + }, + "text": { + "primary": { + "$type": "color", + "$value": "#ffffff", + "$description": "High-emphasis headings, titles, and active labels" + }, + "body": { + "$type": "color", + "$value": "#e2e8f0", + "$description": "Standard readable body copy" + }, + "secondary": { + "$type": "color", + "$value": "#cbd5e1", + "$description": "Table headers, field labels, and secondary text" + }, + "muted": { + "$type": "color", + "$value": "#94a3b8", + "$description": "Captions, metadata, and placeholder text" + }, + "disabled": { + "$type": "color", + "$value": "#64748b", + "$description": "Disabled controls and inactive hints" + } + }, + "border": { + "subtle": { + "$type": "color", + "$value": "#222222", + "$description": "Subtle card inner dividers" + }, + "default": { + "$type": "color", + "$value": "#2d2d2d", + "$description": "Standard structural card and section border" + }, + "strong": { + "$type": "color", + "$value": "#3d3d3d", + "$description": "Prominent borders and group dividers" + }, + "input": { + "$type": "color", + "$value": "#383838", + "$description": "Form control border outline" + }, + "divider": { + "$type": "color", + "$value": "#242424", + "$description": "Table row dividers and separator rules" + }, + "focusRing": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Keyboard accessibility focus outline" + } + }, + "status": { + "success": { + "bg": { + "$type": "color", + "$value": "#10b98129", + "$description": "Success badge background tint" + }, + "text": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Success badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#6ee7b759", + "$description": "Success badge border" + }, + "solid": { + "$type": "color", + "$value": "#10b981", + "$description": "Success solid accent indicator" + } + }, + "warning": { + "bg": { + "$type": "color", + "$value": "#f59e0b29", + "$description": "Warning badge background tint" + }, + "text": { + "$type": "color", + "$value": "#fcd34d", + "$description": "Warning badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#fcd34d59", + "$description": "Warning badge border" + }, + "solid": { + "$type": "color", + "$value": "#f59e0b", + "$description": "Warning solid accent indicator" + } + }, + "danger": { + "bg": { + "$type": "color", + "$value": "#f43f5e29", + "$description": "Danger/Error badge background tint" + }, + "text": { + "$type": "color", + "$value": "#fda4af", + "$description": "Danger/Error badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#fda4af59", + "$description": "Danger/Error badge border" + }, + "solid": { + "$type": "color", + "$value": "#f43f5e", + "$description": "Danger solid accent indicator" + } + }, + "info": { + "bg": { + "$type": "color", + "$value": "#3b82f629", + "$description": "Info badge background tint" + }, + "text": { + "$type": "color", + "$value": "#93c5fd", + "$description": "Info badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#93c5fd59", + "$description": "Info badge border" + }, + "solid": { + "$type": "color", + "$value": "#3b82f6", + "$description": "Info solid accent indicator" + } + }, + "purple": { + "bg": { + "$type": "color", + "$value": "#8b5cf629", + "$description": "Governance badge background tint" + }, + "text": { + "$type": "color", + "$value": "#d8b4fe", + "$description": "Governance badge high-contrast text" + }, + "border": { + "$type": "color", + "$value": "#d8b4fe59", + "$description": "Governance badge border" + }, + "solid": { + "$type": "color", + "$value": "#8b5cf6", + "$description": "Governance solid accent indicator" + } + } + } + }, + "typography": { + "fontFamily": { + "sans": { + "$type": "fontFamily", + "$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"], + "$description": "Primary UI font family" + }, + "mono": { + "$type": "fontFamily", + "$value": ["JetBrains Mono", "ui-monospace", "monospace"], + "$description": "Monospace font family for code, identifiers, amounts, and dates" + } + }, + "fontWeight": { + "light": { + "$type": "fontWeight", + "$value": 300, + "$description": "Light weight font" + }, + "regular": { + "$type": "fontWeight", + "$value": 400, + "$description": "Regular weight font" + }, + "medium": { + "$type": "fontWeight", + "$value": 500, + "$description": "Medium weight font" + }, + "semibold": { + "$type": "fontWeight", + "$value": 600, + "$description": "Semibold weight font" + }, + "bold": { + "$type": "fontWeight", + "$value": 700, + "$description": "Bold weight font" + }, + "extrabold": { + "$type": "fontWeight", + "$value": 800, + "$description": "Extrabold weight font" + } + }, + "fontSize": { + "xs": { + "$type": "dimension", + "$value": "12px", + "$description": "Extra small caption text" + }, + "sm": { + "$type": "dimension", + "$value": "14px", + "$description": "Small table and label text" + }, + "base": { + "$type": "dimension", + "$value": "16px", + "$description": "Standard body font size" + }, + "lg": { + "$type": "dimension", + "$value": "18px", + "$description": "Large text / subheadings" + }, + "xl": { + "$type": "dimension", + "$value": "20px", + "$description": "Section headings" + }, + "2xl": { + "$type": "dimension", + "$value": "24px", + "$description": "Page and modal titles" + }, + "3xl": { + "$type": "dimension", + "$value": "30px", + "$description": "Dashboard KPI summary values" + } + }, + "lineHeight": { + "tight": { + "$type": "number", + "$value": 1.25, + "$description": "Tight line height for headings" + }, + "normal": { + "$type": "number", + "$value": 1.5, + "$description": "Standard body line height" + }, + "relaxed": { + "$type": "number", + "$value": 1.75, + "$description": "Relaxed paragraph line height" + } + } + }, + "borderRadius": { + "none": { + "$type": "dimension", + "$value": "0px" + }, + "sm": { + "$type": "dimension", + "$value": "4px", + "$description": "Small tags and tooltips" + }, + "md": { + "$type": "dimension", + "$value": "8px", + "$description": "Form inputs and buttons" + }, + "lg": { + "$type": "dimension", + "$value": "12px", + "$description": "Standard cards and panels" + }, + "xl": { + "$type": "dimension", + "$value": "16px", + "$description": "Modal dialogs and popovers" + }, + "full": { + "$type": "dimension", + "$value": "9999px", + "$description": "Pill badges and circular avatars" + } + }, + "spacing": { + "1": { + "$type": "dimension", + "$value": "4px" + }, + "2": { + "$type": "dimension", + "$value": "8px" + }, + "3": { + "$type": "dimension", + "$value": "12px" + }, + "4": { + "$type": "dimension", + "$value": "16px" + }, + "5": { + "$type": "dimension", + "$value": "20px" + }, + "6": { + "$type": "dimension", + "$value": "24px" + }, + "8": { + "$type": "dimension", + "$value": "32px" + }, + "10": { + "$type": "dimension", + "$value": "40px" + }, + "12": { + "$type": "dimension", + "$value": "48px" + } + } +} + diff --git a/PostFundManagement.ConsoleUI/src/index.css b/PostFundManagement.ConsoleUI/src/index.css index 548ae0a..7accc1d 100644 --- a/PostFundManagement.ConsoleUI/src/index.css +++ b/PostFundManagement.ConsoleUI/src/index.css @@ -1,9 +1,5 @@ @import "tailwindcss"; - -@theme { - --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; - --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; -} +@import "./theme.css"; @layer base { :root { @@ -13,8 +9,8 @@ } body { - background-color: #090d16; - color: #e2e8f0; + background-color: var(--color-brand-canvas, #090d16); + color: var(--color-brand-text-body, #e2e8f0); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -36,7 +32,7 @@ /* Custom dark scrollbar styling - auto-appearing with transparent tracks */ * { scrollbar-width: thin; - scrollbar-color: #262626 transparent; + scrollbar-color: var(--app-scrollbar-thumb, #262626) transparent; } ::-webkit-scrollbar { @@ -47,11 +43,11 @@ background: transparent; } ::-webkit-scrollbar-thumb { - background: #262626; + background: var(--app-scrollbar-thumb, #262626); border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { - background: #3f3f46; + background: var(--app-scrollbar-hover, #3f3f46); } /* Table responsive containment and smooth auto-scrolling */ @@ -69,7 +65,7 @@ /* High Contrast Dark Theme Adaptations for existing utility classes */ .bg-white { - background-color: #111111 !important; + background-color: var(--color-brand-card, #111111) !important; } .bg-slate-50, @@ -78,34 +74,34 @@ .bg-slate-50\/75, .bg-slate-50\/80, .bg-slate-50\/90 { - background-color: #161616 !important; + background-color: var(--color-brand-elevated, #161616) !important; } .bg-slate-100, .bg-slate-200 { - background-color: #202020 !important; + background-color: var(--color-brand-active, #202020) !important; } .border-slate-100 { - border-color: #222222 !important; + border-color: var(--color-brand-border-subtle, #222222) !important; } .border-slate-200 { - border-color: #2d2d2d !important; + border-color: var(--color-brand-border-default, #2d2d2d) !important; } .border-slate-300 { - border-color: #3d3d3d !important; + border-color: var(--color-brand-border-strong, #3d3d3d) !important; } .divide-slate-100 > :not([hidden]) ~ :not([hidden]), .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { - border-color: #242424 !important; + border-color: var(--color-brand-border-divider, #242424) !important; } /* Text contrast enhancements */ .text-slate-900 { - color: #ffffff !important; + color: var(--color-brand-text-primary, #ffffff) !important; } .text-slate-800 { @@ -117,19 +113,19 @@ } .text-slate-600 { - color: #e2e8f0 !important; + color: var(--color-brand-text-body, #e2e8f0) !important; } .text-slate-500 { - color: #cbd5e1 !important; + color: var(--color-brand-text-secondary, #cbd5e1) !important; } .text-slate-400 { - color: #94a3b8 !important; + color: var(--color-brand-text-muted, #94a3b8) !important; } .text-gray-900 { - color: #ffffff !important; + color: var(--color-brand-text-primary, #ffffff) !important; } .text-gray-800 { @@ -141,15 +137,15 @@ } .text-gray-600 { - color: #e2e8f0 !important; + color: var(--color-brand-text-body, #e2e8f0) !important; } .text-gray-500 { - color: #cbd5e1 !important; + color: var(--color-brand-text-secondary, #cbd5e1) !important; } .text-gray-400 { - color: #94a3b8 !important; + color: var(--color-brand-text-muted, #94a3b8) !important; } /* High-contrast status badges and notification banners */ @@ -246,43 +242,42 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea { - background-color: #141414 !important; - color: #ffffff !important; - border-color: #383838 !important; + background-color: var(--color-brand-input, #141414) !important; + color: var(--color-brand-text-primary, #ffffff) !important; + border-color: var(--color-brand-border-input, #383838) !important; } input::placeholder, textarea::placeholder { - color: #94a3b8 !important; + color: var(--color-brand-text-muted, #94a3b8) !important; } /* Table header text high contrast */ th { - color: #cbd5e1 !important; + color: var(--color-brand-text-secondary, #cbd5e1) !important; } .hover\:bg-slate-50:hover, .hover\:bg-slate-50\/80:hover, .hover\:bg-slate-100:hover { - background-color: #1f1f1f !important; + background-color: var(--color-brand-hover, #1f1f1f) !important; } .hover\:text-slate-800:hover, .hover\:text-slate-900:hover { - color: #ffffff !important; + color: var(--color-brand-text-primary, #ffffff) !important; } -/* Primary actions matching the clean blue/indigo accent */ +/* Primary actions matching the brand accent */ .bg-emerald-600 { - background-color: #2563eb !important; + background-color: var(--color-primary-600, #2563eb) !important; } .hover\:bg-emerald-500:hover, .hover\:bg-emerald-700:hover { - background-color: #1d4ed8 !important; + background-color: var(--color-primary-700, #1d4ed8) !important; } .border-emerald-600 { - border-color: #3b82f6 !important; + border-color: var(--color-primary-500, #3b82f6) !important; } - diff --git a/PostFundManagement.ConsoleUI/src/theme.config.ts b/PostFundManagement.ConsoleUI/src/theme.config.ts new file mode 100644 index 0000000..b2031ba --- /dev/null +++ b/PostFundManagement.ConsoleUI/src/theme.config.ts @@ -0,0 +1,156 @@ +/** + * Post Fund Management Console — UI Design System & Theme Specification + * + * Centralized configuration for all colors, typography, layout, and component tokens. + * This file is compiled along with the application and provides typed tokens for + * React components, export utilities (PDF/Excel), and data visualizers. + * + * To customize the ConsoleUI theme, adjust the values below and the matching CSS + * variables in `src/theme.css`. + */ + +export const ThemeConfig = { + metadata: { + appId: 'ConsoleUI', + appName: 'Post Fund Management Console', + description: 'Enterprise backoffice portal for Funders, Programme Managers, and Administrators', + colorScheme: 'dark' as const, + version: '1.0.0', + }, + + /* ========================================================================== + 1. TYPOGRAPHY & FONT SPECIFICATIONS + ========================================================================== */ + typography: { + fonts: { + sans: "'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", + mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", + }, + googleFontsUrl: + 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap', + weights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + }, + lineHeights: { + tight: 1.25, + normal: 1.5, + relaxed: 1.75, + }, + }, + + /* ========================================================================== + 2. COLOR PALETTE SPECIFICATIONS + ========================================================================== */ + colors: { + // Primary Brand Accent (Funder Royal Blue / Indigo) + primary: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', // Default Brand Button & Active Element + 700: '#1d4ed8', // Hover state + 800: '#1e40af', + 900: '#1e3a8a', + 950: '#172554', + contrastText: '#ffffff', + }, + + // Canvas & Surface Hierarchy + surfaces: { + canvas: '#090d16', // Page body background + card: '#111111', // Default card & panel surface + cardElevated: '#161616',// Elevated cards, modals, flyouts + rowHighlight: '#202020',// Active or selected list/table items + hover: '#1f1f1f', // Table row hover state + input: '#141414', // Text inputs, selects, textareas + }, + + // Text & Content Contrast + text: { + primary: '#ffffff', // Headings, titles, high-emphasis text + body: '#e2e8f0', // Standard body copy + secondary: '#cbd5e1', // Subheadings, labels, table headers + muted: '#94a3b8', // Captions, helper text, placeholders + disabled: '#64748b', // Inactive or disabled text + }, + + // Borders & Structural Dividers + borders: { + subtle: '#222222', // Light inner card borders + default: '#2d2d2d', // Standard card & section borders + strong: '#3d3d3d', // Prominent boundaries & group headers + input: '#383838', // Form input outline + divider: '#242424', // Horizontal table & list rules + focusRing: '#3b82f6', // Accessible keyboard focus indicator + }, + + // Status Badges & Lifecycle Indicators + semantic: { + success: { + bg: 'rgba(16, 185, 129, 0.16)', + text: '#6ee7b7', + border: 'rgba(110, 231, 183, 0.35)', + solid: '#10b981', + }, + warning: { + bg: 'rgba(245, 158, 11, 0.16)', + text: '#fcd34d', + border: 'rgba(252, 211, 77, 0.35)', + solid: '#f59e0b', + }, + danger: { + bg: 'rgba(244, 63, 94, 0.16)', + text: '#fda4af', + border: 'rgba(253, 164, 175, 0.35)', + solid: '#f43f5e', + }, + info: { + bg: 'rgba(59, 130, 246, 0.16)', + text: '#93c5fd', + border: 'rgba(147, 197, 253, 0.35)', + solid: '#3b82f6', + }, + purple: { + bg: 'rgba(139, 92, 246, 0.16)', + text: '#d8b4fe', + border: 'rgba(216, 180, 254, 0.35)', + solid: '#8b5cf6', + }, + }, + }, + + /* ========================================================================== + 3. FORM INPUTS & CONTROL SPECIFICATIONS + ========================================================================== */ + inputs: { + height: '2.5rem', // 40px standard control height + borderRadius: '0.5rem', // 8px rounded corners + backgroundColor: '#141414', + borderColor: '#383838', + placeholderColor: '#94a3b8', + focusRingColor: '#3b82f6', + }, + + /* ========================================================================== + 4. DATA GRIDS, SCROLLBARS & LAYOUT SPECIFICATIONS + ========================================================================== */ + layout: { + tableMinWidth: '780px', // Minimum readable width before horizontal scrolling + scrollbarWidth: '6px', + scrollbarColor: '#262626', + scrollbarHoverColor: '#3f3f46', + sidebarWidthExpanded: '16rem', // 256px + sidebarWidthCollapsed: '4.5rem', // 72px + }, +} as const; + +export type AppTheme = typeof ThemeConfig; + diff --git a/PostFundManagement.ConsoleUI/src/theme.css b/PostFundManagement.ConsoleUI/src/theme.css new file mode 100644 index 0000000..b656ae2 --- /dev/null +++ b/PostFundManagement.ConsoleUI/src/theme.css @@ -0,0 +1,56 @@ +/** + * Post Fund Management Console — CSS Theme & Design Tokens + * + * Defines the Tailwind CSS v4 @theme design tokens and CSS variables. + * Edit this file to customize colors, fonts, and elevations across ConsoleUI. + */ + +@theme { + /* Fonts */ + --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; + + /* Primary Accent Scale (Default: Royal Blue / Indigo) */ + --color-primary-50: #eff6ff; + --color-primary-100: #dbeafe; + --color-primary-200: #bfdbfe; + --color-primary-300: #93c5fd; + --color-primary-400: #60a5fa; + --color-primary-500: #3b82f6; + --color-primary-600: #2563eb; + --color-primary-700: #1d4ed8; + --color-primary-800: #1e40af; + --color-primary-900: #1e3a8a; + --color-primary-950: #172554; + + /* Surfaces & Canvas Hierarchy */ + --color-brand-canvas: #090d16; + --color-brand-card: #111111; + --color-brand-elevated: #161616; + --color-brand-hover: #1f1f1f; + --color-brand-active: #202020; + --color-brand-input: #141414; + + /* Borders */ + --color-brand-border-subtle: #222222; + --color-brand-border-default: #2d2d2d; + --color-brand-border-strong: #3d3d3d; + --color-brand-border-input: #383838; + --color-brand-border-divider: #242424; + + /* Text Hierarchy */ + --color-brand-text-primary: #ffffff; + --color-brand-text-body: #e2e8f0; + --color-brand-text-secondary: #cbd5e1; + --color-brand-text-muted: #94a3b8; + --color-brand-text-disabled: #64748b; +} + +:root { + color-scheme: dark; + --app-bg-canvas: #090d16; + --app-text-body: #e2e8f0; + --app-scrollbar-thumb: #262626; + --app-scrollbar-hover: #3f3f46; +} + diff --git a/PostFundManagement.PartnerUI/design-tokens.tokens.json b/PostFundManagement.PartnerUI/design-tokens.tokens.json new file mode 100644 index 0000000..e4feecc --- /dev/null +++ b/PostFundManagement.PartnerUI/design-tokens.tokens.json @@ -0,0 +1,315 @@ +{ + "$name": "Post Fund Management Partner Portal — Design Tokens", + "$description": "Standard W3C DTCG Design Token specification for PFM PartnerUI (External Grantee & Recipient Portal). Compatible with Figma Variables and Tokens Studio.", + "$version": "1.0.0", + "color": { + "primary": { + "50": { + "$type": "color", + "$value": "#ecfdf5", + "$description": "Emerald tint 50" + }, + "100": { + "$type": "color", + "$value": "#d1fae5", + "$description": "Emerald light surface 100" + }, + "200": { + "$type": "color", + "$value": "#a7f3d0", + "$description": "Emerald subtle border 200" + }, + "300": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Emerald text & glowing highlight 300" + }, + "400": { + "$type": "color", + "$value": "#34d399", + "$description": "Emerald vibrant accent 400" + }, + "500": { + "$type": "color", + "$value": "#10b981", + "$description": "Primary Brand Action & Laser Accent 500" + }, + "600": { + "$type": "color", + "$value": "#059669", + "$description": "Primary action button hover 600" + }, + "700": { + "$type": "color", + "$value": "#047857", + "$description": "Primary deep accent 700" + }, + "800": { + "$type": "color", + "$value": "#065f46", + "$description": "Primary dark container 800" + }, + "900": { + "$type": "color", + "$value": "#064e3b", + "$description": "Primary dark container 900" + }, + "950": { + "$type": "color", + "$value": "#022c22", + "$description": "Primary deepest container 950" + } + }, + "secondary": { + "300": { + "$type": "color", + "$value": "#67e8f9", + "$description": "Cyan highlight for glow gradients" + }, + "400": { + "$type": "color", + "$value": "#22d3ee", + "$description": "Cyan vibrant secondary" + }, + "500": { + "$type": "color", + "$value": "#06b6d4", + "$description": "Cyan secondary action" + } + }, + "surface": { + "canvas": { + "$type": "color", + "$value": "#020617", + "$description": "Deep obsidian slate-950 viewport background" + }, + "glassCard": { + "$type": "color", + "$value": "#0f172a66", + "$description": "Frosted glassmorphic card backdrop (slate-900 with 40% opacity)" + }, + "solidCard": { + "$type": "color", + "$value": "#0b1120", + "$description": "Solid container card surface" + }, + "cardHover": { + "$type": "color", + "$value": "#1e293b80", + "$description": "Card and interactive row hover background" + }, + "input": { + "$type": "color", + "$value": "#090e1a", + "$description": "Form input and dropdown background" + } + }, + "text": { + "primary": { + "$type": "color", + "$value": "#f8fafc", + "$description": "High-emphasis text and titles (slate-100)" + }, + "secondary": { + "$type": "color", + "$value": "#cbd5e1", + "$description": "Secondary labels and table headings (slate-300)" + }, + "muted": { + "$type": "color", + "$value": "#94a3b8", + "$description": "Captions and placeholder copy (slate-400)" + }, + "accent": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Vibrant emerald highlighted text" + } + }, + "border": { + "glass": { + "$type": "color", + "$value": "#ffffff1f", + "$description": "Glass card boundary (white 12% opacity)" + }, + "glassHighlight": { + "$type": "color", + "$value": "#ffffff40", + "$description": "Glass card top-edge specular highlight (white 25% opacity)" + }, + "subtle": { + "$type": "color", + "$value": "#ffffff0f", + "$description": "Subtle container rule (white 6% opacity)" + }, + "accent": { + "$type": "color", + "$value": "#10b98140", + "$description": "Emerald glowing border" + } + }, + "status": { + "verified": { + "bg": { + "$type": "color", + "$value": "#10b98129", + "$description": "Verified milestone / KYC badge tint" + }, + "text": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Verified milestone text" + }, + "border": { + "$type": "color", + "$value": "#6ee7b759", + "$description": "Verified milestone border" + } + }, + "inProgress": { + "bg": { + "$type": "color", + "$value": "#06b6d429", + "$description": "In-progress activity badge tint" + }, + "text": { + "$type": "color", + "$value": "#67e8f9", + "$description": "In-progress activity text" + }, + "border": { + "$type": "color", + "$value": "#67e8f959", + "$description": "In-progress activity border" + } + }, + "pendingAction": { + "bg": { + "$type": "color", + "$value": "#f59e0b29", + "$description": "Action required / drawdown pending tint" + }, + "text": { + "$type": "color", + "$value": "#fcd34d", + "$description": "Action required text" + }, + "border": { + "$type": "color", + "$value": "#fcd34d59", + "$description": "Action required border" + } + }, + "rejected": { + "bg": { + "$type": "color", + "$value": "#f43f5e29", + "$description": "Evidence revision / rejected request tint" + }, + "text": { + "$type": "color", + "$value": "#fda4af", + "$description": "Evidence revision text" + }, + "border": { + "$type": "color", + "$value": "#fda4af59", + "$description": "Evidence revision border" + } + } + } + }, + "typography": { + "fontFamily": { + "sans": { + "$type": "fontFamily", + "$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"], + "$description": "Primary UI font family" + }, + "mono": { + "$type": "fontFamily", + "$value": ["JetBrains Mono", "ui-monospace", "monospace"], + "$description": "Monospace font family for award codes, hash IDs, and currency amounts" + } + }, + "fontWeight": { + "light": { + "$type": "fontWeight", + "$value": 300 + }, + "regular": { + "$type": "fontWeight", + "$value": 400 + }, + "medium": { + "$type": "fontWeight", + "$value": 500 + }, + "semibold": { + "$type": "fontWeight", + "$value": 600 + }, + "bold": { + "$type": "fontWeight", + "$value": 700 + }, + "extrabold": { + "$type": "fontWeight", + "$value": 800 + } + }, + "fontSize": { + "xs": { + "$type": "dimension", + "$value": "12px" + }, + "sm": { + "$type": "dimension", + "$value": "14px" + }, + "base": { + "$type": "dimension", + "$value": "16px" + }, + "lg": { + "$type": "dimension", + "$value": "18px" + }, + "xl": { + "$type": "dimension", + "$value": "20px" + }, + "2xl": { + "$type": "dimension", + "$value": "24px" + }, + "3xl": { + "$type": "dimension", + "$value": "30px" + } + } + }, + "borderRadius": { + "button": { + "$type": "dimension", + "$value": "18px", + "$description": "Specular glow button border radius" + }, + "card": { + "$type": "dimension", + "$value": "28px", + "$description": "Border glow card container radius" + }, + "modal": { + "$type": "dimension", + "$value": "24px", + "$description": "Evidence upload and dialog modal radius" + }, + "full": { + "$type": "dimension", + "$value": "9999px", + "$description": "Full pill badges" + } + } +} + diff --git a/PostFundManagement.PartnerUI/src/design-tokens.tokens.json b/PostFundManagement.PartnerUI/src/design-tokens.tokens.json new file mode 100644 index 0000000..e4feecc --- /dev/null +++ b/PostFundManagement.PartnerUI/src/design-tokens.tokens.json @@ -0,0 +1,315 @@ +{ + "$name": "Post Fund Management Partner Portal — Design Tokens", + "$description": "Standard W3C DTCG Design Token specification for PFM PartnerUI (External Grantee & Recipient Portal). Compatible with Figma Variables and Tokens Studio.", + "$version": "1.0.0", + "color": { + "primary": { + "50": { + "$type": "color", + "$value": "#ecfdf5", + "$description": "Emerald tint 50" + }, + "100": { + "$type": "color", + "$value": "#d1fae5", + "$description": "Emerald light surface 100" + }, + "200": { + "$type": "color", + "$value": "#a7f3d0", + "$description": "Emerald subtle border 200" + }, + "300": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Emerald text & glowing highlight 300" + }, + "400": { + "$type": "color", + "$value": "#34d399", + "$description": "Emerald vibrant accent 400" + }, + "500": { + "$type": "color", + "$value": "#10b981", + "$description": "Primary Brand Action & Laser Accent 500" + }, + "600": { + "$type": "color", + "$value": "#059669", + "$description": "Primary action button hover 600" + }, + "700": { + "$type": "color", + "$value": "#047857", + "$description": "Primary deep accent 700" + }, + "800": { + "$type": "color", + "$value": "#065f46", + "$description": "Primary dark container 800" + }, + "900": { + "$type": "color", + "$value": "#064e3b", + "$description": "Primary dark container 900" + }, + "950": { + "$type": "color", + "$value": "#022c22", + "$description": "Primary deepest container 950" + } + }, + "secondary": { + "300": { + "$type": "color", + "$value": "#67e8f9", + "$description": "Cyan highlight for glow gradients" + }, + "400": { + "$type": "color", + "$value": "#22d3ee", + "$description": "Cyan vibrant secondary" + }, + "500": { + "$type": "color", + "$value": "#06b6d4", + "$description": "Cyan secondary action" + } + }, + "surface": { + "canvas": { + "$type": "color", + "$value": "#020617", + "$description": "Deep obsidian slate-950 viewport background" + }, + "glassCard": { + "$type": "color", + "$value": "#0f172a66", + "$description": "Frosted glassmorphic card backdrop (slate-900 with 40% opacity)" + }, + "solidCard": { + "$type": "color", + "$value": "#0b1120", + "$description": "Solid container card surface" + }, + "cardHover": { + "$type": "color", + "$value": "#1e293b80", + "$description": "Card and interactive row hover background" + }, + "input": { + "$type": "color", + "$value": "#090e1a", + "$description": "Form input and dropdown background" + } + }, + "text": { + "primary": { + "$type": "color", + "$value": "#f8fafc", + "$description": "High-emphasis text and titles (slate-100)" + }, + "secondary": { + "$type": "color", + "$value": "#cbd5e1", + "$description": "Secondary labels and table headings (slate-300)" + }, + "muted": { + "$type": "color", + "$value": "#94a3b8", + "$description": "Captions and placeholder copy (slate-400)" + }, + "accent": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Vibrant emerald highlighted text" + } + }, + "border": { + "glass": { + "$type": "color", + "$value": "#ffffff1f", + "$description": "Glass card boundary (white 12% opacity)" + }, + "glassHighlight": { + "$type": "color", + "$value": "#ffffff40", + "$description": "Glass card top-edge specular highlight (white 25% opacity)" + }, + "subtle": { + "$type": "color", + "$value": "#ffffff0f", + "$description": "Subtle container rule (white 6% opacity)" + }, + "accent": { + "$type": "color", + "$value": "#10b98140", + "$description": "Emerald glowing border" + } + }, + "status": { + "verified": { + "bg": { + "$type": "color", + "$value": "#10b98129", + "$description": "Verified milestone / KYC badge tint" + }, + "text": { + "$type": "color", + "$value": "#6ee7b7", + "$description": "Verified milestone text" + }, + "border": { + "$type": "color", + "$value": "#6ee7b759", + "$description": "Verified milestone border" + } + }, + "inProgress": { + "bg": { + "$type": "color", + "$value": "#06b6d429", + "$description": "In-progress activity badge tint" + }, + "text": { + "$type": "color", + "$value": "#67e8f9", + "$description": "In-progress activity text" + }, + "border": { + "$type": "color", + "$value": "#67e8f959", + "$description": "In-progress activity border" + } + }, + "pendingAction": { + "bg": { + "$type": "color", + "$value": "#f59e0b29", + "$description": "Action required / drawdown pending tint" + }, + "text": { + "$type": "color", + "$value": "#fcd34d", + "$description": "Action required text" + }, + "border": { + "$type": "color", + "$value": "#fcd34d59", + "$description": "Action required border" + } + }, + "rejected": { + "bg": { + "$type": "color", + "$value": "#f43f5e29", + "$description": "Evidence revision / rejected request tint" + }, + "text": { + "$type": "color", + "$value": "#fda4af", + "$description": "Evidence revision text" + }, + "border": { + "$type": "color", + "$value": "#fda4af59", + "$description": "Evidence revision border" + } + } + } + }, + "typography": { + "fontFamily": { + "sans": { + "$type": "fontFamily", + "$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"], + "$description": "Primary UI font family" + }, + "mono": { + "$type": "fontFamily", + "$value": ["JetBrains Mono", "ui-monospace", "monospace"], + "$description": "Monospace font family for award codes, hash IDs, and currency amounts" + } + }, + "fontWeight": { + "light": { + "$type": "fontWeight", + "$value": 300 + }, + "regular": { + "$type": "fontWeight", + "$value": 400 + }, + "medium": { + "$type": "fontWeight", + "$value": 500 + }, + "semibold": { + "$type": "fontWeight", + "$value": 600 + }, + "bold": { + "$type": "fontWeight", + "$value": 700 + }, + "extrabold": { + "$type": "fontWeight", + "$value": 800 + } + }, + "fontSize": { + "xs": { + "$type": "dimension", + "$value": "12px" + }, + "sm": { + "$type": "dimension", + "$value": "14px" + }, + "base": { + "$type": "dimension", + "$value": "16px" + }, + "lg": { + "$type": "dimension", + "$value": "18px" + }, + "xl": { + "$type": "dimension", + "$value": "20px" + }, + "2xl": { + "$type": "dimension", + "$value": "24px" + }, + "3xl": { + "$type": "dimension", + "$value": "30px" + } + } + }, + "borderRadius": { + "button": { + "$type": "dimension", + "$value": "18px", + "$description": "Specular glow button border radius" + }, + "card": { + "$type": "dimension", + "$value": "28px", + "$description": "Border glow card container radius" + }, + "modal": { + "$type": "dimension", + "$value": "24px", + "$description": "Evidence upload and dialog modal radius" + }, + "full": { + "$type": "dimension", + "$value": "9999px", + "$description": "Full pill badges" + } + } +} + diff --git a/PostFundManagement.PartnerUI/src/index.css b/PostFundManagement.PartnerUI/src/index.css index 87916d6..aa78f75 100644 --- a/PostFundManagement.PartnerUI/src/index.css +++ b/PostFundManagement.PartnerUI/src/index.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import "./theme.css"; :root { color-scheme: dark; @@ -6,12 +7,12 @@ @layer base { html, body { - background-color: #020617; /* slate-950 */ - color: #f8fafc; /* slate-100 */ - font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + background-color: var(--partner-canvas-bg, #020617); + color: var(--partner-text-body, #f8fafc); + font-family: var(--font-sans); } code, pre, .font-mono { - font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: var(--font-mono); } } diff --git a/PostFundManagement.PartnerUI/src/theme.config.ts b/PostFundManagement.PartnerUI/src/theme.config.ts new file mode 100644 index 0000000..c6ac599 --- /dev/null +++ b/PostFundManagement.PartnerUI/src/theme.config.ts @@ -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; + diff --git a/PostFundManagement.PartnerUI/src/theme.css b/PostFundManagement.PartnerUI/src/theme.css new file mode 100644 index 0000000..cb34356 --- /dev/null +++ b/PostFundManagement.PartnerUI/src/theme.css @@ -0,0 +1,45 @@ +/** + * Post Fund Management Partner Portal — CSS Theme & Design Tokens + * + * Defines the Tailwind CSS v4 @theme tokens and CSS custom properties. + * Edit this file to customize colors, typography, and visual tokens across PartnerUI. + */ + +@theme { + /* Fonts */ + --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + + /* Primary Brand Scale (Emerald / Teal) */ + --color-partner-primary-50: #ecfdf5; + --color-partner-primary-100: #d1fae5; + --color-partner-primary-200: #a7f3d0; + --color-partner-primary-300: #6ee7b7; + --color-partner-primary-400: #34d399; + --color-partner-primary-500: #10b981; + --color-partner-primary-600: #059669; + --color-partner-primary-700: #047857; + --color-partner-primary-800: #065f46; + --color-partner-primary-900: #064e3b; + --color-partner-primary-950: #022c22; + + /* Surfaces & Canvas */ + --color-partner-canvas: #020617; + --color-partner-card-solid: #0b1120; + --color-partner-input: #090e1a; + + /* Text Hierarchy */ + --color-partner-text-primary: #f8fafc; + --color-partner-text-secondary: #cbd5e1; + --color-partner-text-muted: #94a3b8; + --color-partner-text-accent: #6ee7b7; +} + +:root { + color-scheme: dark; + --partner-canvas-bg: #020617; + --partner-text-body: #f8fafc; + --partner-glow-primary: #10b981; + --partner-glow-secondary: #06b6d4; +} +