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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
@import "./theme.css";
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
@@ -13,8 +9,8 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #090d16;
|
||||
color: #e2e8f0;
|
||||
background-color: var(--color-brand-canvas, #090d16);
|
||||
color: var(--color-brand-text-body, #e2e8f0);
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@@ -36,7 +32,7 @@
|
||||
/* Custom dark scrollbar styling - auto-appearing with transparent tracks */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #262626 transparent;
|
||||
scrollbar-color: var(--app-scrollbar-thumb, #262626) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -47,11 +43,11 @@
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #262626;
|
||||
background: var(--app-scrollbar-thumb, #262626);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #3f3f46;
|
||||
background: var(--app-scrollbar-hover, #3f3f46);
|
||||
}
|
||||
|
||||
/* Table responsive containment and smooth auto-scrolling */
|
||||
@@ -69,7 +65,7 @@
|
||||
|
||||
/* High Contrast Dark Theme Adaptations for existing utility classes */
|
||||
.bg-white {
|
||||
background-color: #111111 !important;
|
||||
background-color: var(--color-brand-card, #111111) !important;
|
||||
}
|
||||
|
||||
.bg-slate-50,
|
||||
@@ -78,34 +74,34 @@
|
||||
.bg-slate-50\/75,
|
||||
.bg-slate-50\/80,
|
||||
.bg-slate-50\/90 {
|
||||
background-color: #161616 !important;
|
||||
background-color: var(--color-brand-elevated, #161616) !important;
|
||||
}
|
||||
|
||||
.bg-slate-100,
|
||||
.bg-slate-200 {
|
||||
background-color: #202020 !important;
|
||||
background-color: var(--color-brand-active, #202020) !important;
|
||||
}
|
||||
|
||||
.border-slate-100 {
|
||||
border-color: #222222 !important;
|
||||
border-color: var(--color-brand-border-subtle, #222222) !important;
|
||||
}
|
||||
|
||||
.border-slate-200 {
|
||||
border-color: #2d2d2d !important;
|
||||
border-color: var(--color-brand-border-default, #2d2d2d) !important;
|
||||
}
|
||||
|
||||
.border-slate-300 {
|
||||
border-color: #3d3d3d !important;
|
||||
border-color: var(--color-brand-border-strong, #3d3d3d) !important;
|
||||
}
|
||||
|
||||
.divide-slate-100 > :not([hidden]) ~ :not([hidden]),
|
||||
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: #242424 !important;
|
||||
border-color: var(--color-brand-border-divider, #242424) !important;
|
||||
}
|
||||
|
||||
/* Text contrast enhancements */
|
||||
.text-slate-900 {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||
}
|
||||
|
||||
.text-slate-800 {
|
||||
@@ -117,19 +113,19 @@
|
||||
}
|
||||
|
||||
.text-slate-600 {
|
||||
color: #e2e8f0 !important;
|
||||
color: var(--color-brand-text-body, #e2e8f0) !important;
|
||||
}
|
||||
|
||||
.text-slate-500 {
|
||||
color: #cbd5e1 !important;
|
||||
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||
}
|
||||
|
||||
.text-slate-400 {
|
||||
color: #94a3b8 !important;
|
||||
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||
}
|
||||
|
||||
.text-gray-900 {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
@@ -141,15 +137,15 @@
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
color: #e2e8f0 !important;
|
||||
color: var(--color-brand-text-body, #e2e8f0) !important;
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
color: #cbd5e1 !important;
|
||||
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||
}
|
||||
|
||||
.text-gray-400 {
|
||||
color: #94a3b8 !important;
|
||||
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||
}
|
||||
|
||||
/* High-contrast status badges and notification banners */
|
||||
@@ -246,43 +242,42 @@
|
||||
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
|
||||
select,
|
||||
textarea {
|
||||
background-color: #141414 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #383838 !important;
|
||||
background-color: var(--color-brand-input, #141414) !important;
|
||||
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||
border-color: var(--color-brand-border-input, #383838) !important;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #94a3b8 !important;
|
||||
color: var(--color-brand-text-muted, #94a3b8) !important;
|
||||
}
|
||||
|
||||
/* Table header text high contrast */
|
||||
th {
|
||||
color: #cbd5e1 !important;
|
||||
color: var(--color-brand-text-secondary, #cbd5e1) !important;
|
||||
}
|
||||
|
||||
.hover\:bg-slate-50:hover,
|
||||
.hover\:bg-slate-50\/80:hover,
|
||||
.hover\:bg-slate-100:hover {
|
||||
background-color: #1f1f1f !important;
|
||||
background-color: var(--color-brand-hover, #1f1f1f) !important;
|
||||
}
|
||||
|
||||
.hover\:text-slate-800:hover,
|
||||
.hover\:text-slate-900:hover {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-brand-text-primary, #ffffff) !important;
|
||||
}
|
||||
|
||||
/* Primary actions matching the clean blue/indigo accent */
|
||||
/* Primary actions matching the brand accent */
|
||||
.bg-emerald-600 {
|
||||
background-color: #2563eb !important;
|
||||
background-color: var(--color-primary-600, #2563eb) !important;
|
||||
}
|
||||
|
||||
.hover\:bg-emerald-500:hover,
|
||||
.hover\:bg-emerald-700:hover {
|
||||
background-color: #1d4ed8 !important;
|
||||
background-color: var(--color-primary-700, #1d4ed8) !important;
|
||||
}
|
||||
|
||||
.border-emerald-600 {
|
||||
border-color: #3b82f6 !important;
|
||||
border-color: var(--color-primary-500, #3b82f6) !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user