Centralised theme management
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user