Centralised theme management
This commit is contained in:
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@@ -1,9 +1,5 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
@import "./theme.css";
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
@@ -13,8 +9,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #090d16;
|
background-color: var(--color-brand-canvas, #090d16);
|
||||||
color: #e2e8f0;
|
color: var(--color-brand-text-body, #e2e8f0);
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
@@ -36,7 +32,7 @@
|
|||||||
/* Custom dark scrollbar styling - auto-appearing with transparent tracks */
|
/* Custom dark scrollbar styling - auto-appearing with transparent tracks */
|
||||||
* {
|
* {
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: #262626 transparent;
|
scrollbar-color: var(--app-scrollbar-thumb, #262626) transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
@@ -47,11 +43,11 @@
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: #262626;
|
background: var(--app-scrollbar-thumb, #262626);
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: #3f3f46;
|
background: var(--app-scrollbar-hover, #3f3f46);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table responsive containment and smooth auto-scrolling */
|
/* Table responsive containment and smooth auto-scrolling */
|
||||||
@@ -69,7 +65,7 @@
|
|||||||
|
|
||||||
/* High Contrast Dark Theme Adaptations for existing utility classes */
|
/* High Contrast Dark Theme Adaptations for existing utility classes */
|
||||||
.bg-white {
|
.bg-white {
|
||||||
background-color: #111111 !important;
|
background-color: var(--color-brand-card, #111111) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-slate-50,
|
.bg-slate-50,
|
||||||
@@ -78,34 +74,34 @@
|
|||||||
.bg-slate-50\/75,
|
.bg-slate-50\/75,
|
||||||
.bg-slate-50\/80,
|
.bg-slate-50\/80,
|
||||||
.bg-slate-50\/90 {
|
.bg-slate-50\/90 {
|
||||||
background-color: #161616 !important;
|
background-color: var(--color-brand-elevated, #161616) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bg-slate-100,
|
.bg-slate-100,
|
||||||
.bg-slate-200 {
|
.bg-slate-200 {
|
||||||
background-color: #202020 !important;
|
background-color: var(--color-brand-active, #202020) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-slate-100 {
|
.border-slate-100 {
|
||||||
border-color: #222222 !important;
|
border-color: var(--color-brand-border-subtle, #222222) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-slate-200 {
|
.border-slate-200 {
|
||||||
border-color: #2d2d2d !important;
|
border-color: var(--color-brand-border-default, #2d2d2d) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-slate-300 {
|
.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-100 > :not([hidden]) ~ :not([hidden]),
|
||||||
.divide-slate-200 > :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 contrast enhancements */
|
||||||
.text-slate-900 {
|
.text-slate-900 {
|
||||||
color: #ffffff !important;
|
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-slate-800 {
|
.text-slate-800 {
|
||||||
@@ -117,19 +113,19 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-slate-600 {
|
.text-slate-600 {
|
||||||
color: #e2e8f0 !important;
|
color: var(--color-brand-text-body, #e2e8f0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-slate-500 {
|
.text-slate-500 {
|
||||||
color: #cbd5e1 !important;
|
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-slate-400 {
|
.text-slate-400 {
|
||||||
color: #94a3b8 !important;
|
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-900 {
|
.text-gray-900 {
|
||||||
color: #ffffff !important;
|
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-800 {
|
.text-gray-800 {
|
||||||
@@ -141,15 +137,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-600 {
|
.text-gray-600 {
|
||||||
color: #e2e8f0 !important;
|
color: var(--color-brand-text-body, #e2e8f0) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-500 {
|
.text-gray-500 {
|
||||||
color: #cbd5e1 !important;
|
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-gray-400 {
|
.text-gray-400 {
|
||||||
color: #94a3b8 !important;
|
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* High-contrast status badges and notification banners */
|
/* High-contrast status badges and notification banners */
|
||||||
@@ -246,43 +242,42 @@
|
|||||||
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
|
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
background-color: #141414 !important;
|
background-color: var(--color-brand-input, #141414) !important;
|
||||||
color: #ffffff !important;
|
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||||
border-color: #383838 !important;
|
border-color: var(--color-brand-border-input, #383838) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
input::placeholder,
|
input::placeholder,
|
||||||
textarea::placeholder {
|
textarea::placeholder {
|
||||||
color: #94a3b8 !important;
|
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Table header text high contrast */
|
/* Table header text high contrast */
|
||||||
th {
|
th {
|
||||||
color: #cbd5e1 !important;
|
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover\:bg-slate-50:hover,
|
.hover\:bg-slate-50:hover,
|
||||||
.hover\:bg-slate-50\/80:hover,
|
.hover\:bg-slate-50\/80:hover,
|
||||||
.hover\:bg-slate-100: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-800:hover,
|
||||||
.hover\:text-slate-900: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 {
|
.bg-emerald-600 {
|
||||||
background-color: #2563eb !important;
|
background-color: var(--color-primary-600, #2563eb) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hover\:bg-emerald-500:hover,
|
.hover\:bg-emerald-500:hover,
|
||||||
.hover\:bg-emerald-700:hover {
|
.hover\:bg-emerald-700:hover {
|
||||||
background-color: #1d4ed8 !important;
|
background-color: var(--color-primary-700, #1d4ed8) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-emerald-600 {
|
.border-emerald-600 {
|
||||||
border-color: #3b82f6 !important;
|
border-color: var(--color-primary-500, #3b82f6) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -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 "tailwindcss";
|
||||||
|
@import "./theme.css";
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
color-scheme: dark;
|
color-scheme: dark;
|
||||||
@@ -6,12 +7,12 @@
|
|||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
html, body {
|
html, body {
|
||||||
background-color: #020617; /* slate-950 */
|
background-color: var(--partner-canvas-bg, #020617);
|
||||||
color: #f8fafc; /* slate-100 */
|
color: var(--partner-text-body, #f8fafc);
|
||||||
font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
font-family: var(--font-sans);
|
||||||
}
|
}
|
||||||
|
|
||||||
code, pre, .font-mono {
|
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