Centralised theme management
This commit is contained in:
@@ -0,0 +1,315 @@
|
||||
{
|
||||
"$name": "Post Fund Management Partner Portal — Design Tokens",
|
||||
"$description": "Standard W3C DTCG Design Token specification for PFM PartnerUI (External Grantee & Recipient Portal). Compatible with Figma Variables and Tokens Studio.",
|
||||
"$version": "1.0.0",
|
||||
"color": {
|
||||
"primary": {
|
||||
"50": {
|
||||
"$type": "color",
|
||||
"$value": "#ecfdf5",
|
||||
"$description": "Emerald tint 50"
|
||||
},
|
||||
"100": {
|
||||
"$type": "color",
|
||||
"$value": "#d1fae5",
|
||||
"$description": "Emerald light surface 100"
|
||||
},
|
||||
"200": {
|
||||
"$type": "color",
|
||||
"$value": "#a7f3d0",
|
||||
"$description": "Emerald subtle border 200"
|
||||
},
|
||||
"300": {
|
||||
"$type": "color",
|
||||
"$value": "#6ee7b7",
|
||||
"$description": "Emerald text & glowing highlight 300"
|
||||
},
|
||||
"400": {
|
||||
"$type": "color",
|
||||
"$value": "#34d399",
|
||||
"$description": "Emerald vibrant accent 400"
|
||||
},
|
||||
"500": {
|
||||
"$type": "color",
|
||||
"$value": "#10b981",
|
||||
"$description": "Primary Brand Action & Laser Accent 500"
|
||||
},
|
||||
"600": {
|
||||
"$type": "color",
|
||||
"$value": "#059669",
|
||||
"$description": "Primary action button hover 600"
|
||||
},
|
||||
"700": {
|
||||
"$type": "color",
|
||||
"$value": "#047857",
|
||||
"$description": "Primary deep accent 700"
|
||||
},
|
||||
"800": {
|
||||
"$type": "color",
|
||||
"$value": "#065f46",
|
||||
"$description": "Primary dark container 800"
|
||||
},
|
||||
"900": {
|
||||
"$type": "color",
|
||||
"$value": "#064e3b",
|
||||
"$description": "Primary dark container 900"
|
||||
},
|
||||
"950": {
|
||||
"$type": "color",
|
||||
"$value": "#022c22",
|
||||
"$description": "Primary deepest container 950"
|
||||
}
|
||||
},
|
||||
"secondary": {
|
||||
"300": {
|
||||
"$type": "color",
|
||||
"$value": "#67e8f9",
|
||||
"$description": "Cyan highlight for glow gradients"
|
||||
},
|
||||
"400": {
|
||||
"$type": "color",
|
||||
"$value": "#22d3ee",
|
||||
"$description": "Cyan vibrant secondary"
|
||||
},
|
||||
"500": {
|
||||
"$type": "color",
|
||||
"$value": "#06b6d4",
|
||||
"$description": "Cyan secondary action"
|
||||
}
|
||||
},
|
||||
"surface": {
|
||||
"canvas": {
|
||||
"$type": "color",
|
||||
"$value": "#020617",
|
||||
"$description": "Deep obsidian slate-950 viewport background"
|
||||
},
|
||||
"glassCard": {
|
||||
"$type": "color",
|
||||
"$value": "#0f172a66",
|
||||
"$description": "Frosted glassmorphic card backdrop (slate-900 with 40% opacity)"
|
||||
},
|
||||
"solidCard": {
|
||||
"$type": "color",
|
||||
"$value": "#0b1120",
|
||||
"$description": "Solid container card surface"
|
||||
},
|
||||
"cardHover": {
|
||||
"$type": "color",
|
||||
"$value": "#1e293b80",
|
||||
"$description": "Card and interactive row hover background"
|
||||
},
|
||||
"input": {
|
||||
"$type": "color",
|
||||
"$value": "#090e1a",
|
||||
"$description": "Form input and dropdown background"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"primary": {
|
||||
"$type": "color",
|
||||
"$value": "#f8fafc",
|
||||
"$description": "High-emphasis text and titles (slate-100)"
|
||||
},
|
||||
"secondary": {
|
||||
"$type": "color",
|
||||
"$value": "#cbd5e1",
|
||||
"$description": "Secondary labels and table headings (slate-300)"
|
||||
},
|
||||
"muted": {
|
||||
"$type": "color",
|
||||
"$value": "#94a3b8",
|
||||
"$description": "Captions and placeholder copy (slate-400)"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "#6ee7b7",
|
||||
"$description": "Vibrant emerald highlighted text"
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"glass": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff1f",
|
||||
"$description": "Glass card boundary (white 12% opacity)"
|
||||
},
|
||||
"glassHighlight": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff40",
|
||||
"$description": "Glass card top-edge specular highlight (white 25% opacity)"
|
||||
},
|
||||
"subtle": {
|
||||
"$type": "color",
|
||||
"$value": "#ffffff0f",
|
||||
"$description": "Subtle container rule (white 6% opacity)"
|
||||
},
|
||||
"accent": {
|
||||
"$type": "color",
|
||||
"$value": "#10b98140",
|
||||
"$description": "Emerald glowing border"
|
||||
}
|
||||
},
|
||||
"status": {
|
||||
"verified": {
|
||||
"bg": {
|
||||
"$type": "color",
|
||||
"$value": "#10b98129",
|
||||
"$description": "Verified milestone / KYC badge tint"
|
||||
},
|
||||
"text": {
|
||||
"$type": "color",
|
||||
"$value": "#6ee7b7",
|
||||
"$description": "Verified milestone text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "#6ee7b759",
|
||||
"$description": "Verified milestone border"
|
||||
}
|
||||
},
|
||||
"inProgress": {
|
||||
"bg": {
|
||||
"$type": "color",
|
||||
"$value": "#06b6d429",
|
||||
"$description": "In-progress activity badge tint"
|
||||
},
|
||||
"text": {
|
||||
"$type": "color",
|
||||
"$value": "#67e8f9",
|
||||
"$description": "In-progress activity text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "#67e8f959",
|
||||
"$description": "In-progress activity border"
|
||||
}
|
||||
},
|
||||
"pendingAction": {
|
||||
"bg": {
|
||||
"$type": "color",
|
||||
"$value": "#f59e0b29",
|
||||
"$description": "Action required / drawdown pending tint"
|
||||
},
|
||||
"text": {
|
||||
"$type": "color",
|
||||
"$value": "#fcd34d",
|
||||
"$description": "Action required text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "#fcd34d59",
|
||||
"$description": "Action required border"
|
||||
}
|
||||
},
|
||||
"rejected": {
|
||||
"bg": {
|
||||
"$type": "color",
|
||||
"$value": "#f43f5e29",
|
||||
"$description": "Evidence revision / rejected request tint"
|
||||
},
|
||||
"text": {
|
||||
"$type": "color",
|
||||
"$value": "#fda4af",
|
||||
"$description": "Evidence revision text"
|
||||
},
|
||||
"border": {
|
||||
"$type": "color",
|
||||
"$value": "#fda4af59",
|
||||
"$description": "Evidence revision border"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"typography": {
|
||||
"fontFamily": {
|
||||
"sans": {
|
||||
"$type": "fontFamily",
|
||||
"$value": ["Plus Jakarta Sans", "system-ui", "-apple-system", "sans-serif"],
|
||||
"$description": "Primary UI font family"
|
||||
},
|
||||
"mono": {
|
||||
"$type": "fontFamily",
|
||||
"$value": ["JetBrains Mono", "ui-monospace", "monospace"],
|
||||
"$description": "Monospace font family for award codes, hash IDs, and currency amounts"
|
||||
}
|
||||
},
|
||||
"fontWeight": {
|
||||
"light": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 300
|
||||
},
|
||||
"regular": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 400
|
||||
},
|
||||
"medium": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 500
|
||||
},
|
||||
"semibold": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 600
|
||||
},
|
||||
"bold": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 700
|
||||
},
|
||||
"extrabold": {
|
||||
"$type": "fontWeight",
|
||||
"$value": 800
|
||||
}
|
||||
},
|
||||
"fontSize": {
|
||||
"xs": {
|
||||
"$type": "dimension",
|
||||
"$value": "12px"
|
||||
},
|
||||
"sm": {
|
||||
"$type": "dimension",
|
||||
"$value": "14px"
|
||||
},
|
||||
"base": {
|
||||
"$type": "dimension",
|
||||
"$value": "16px"
|
||||
},
|
||||
"lg": {
|
||||
"$type": "dimension",
|
||||
"$value": "18px"
|
||||
},
|
||||
"xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "20px"
|
||||
},
|
||||
"2xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "24px"
|
||||
},
|
||||
"3xl": {
|
||||
"$type": "dimension",
|
||||
"$value": "30px"
|
||||
}
|
||||
}
|
||||
},
|
||||
"borderRadius": {
|
||||
"button": {
|
||||
"$type": "dimension",
|
||||
"$value": "18px",
|
||||
"$description": "Specular glow button border radius"
|
||||
},
|
||||
"card": {
|
||||
"$type": "dimension",
|
||||
"$value": "28px",
|
||||
"$description": "Border glow card container radius"
|
||||
},
|
||||
"modal": {
|
||||
"$type": "dimension",
|
||||
"$value": "24px",
|
||||
"$description": "Evidence upload and dialog modal radius"
|
||||
},
|
||||
"full": {
|
||||
"$type": "dimension",
|
||||
"$value": "9999px",
|
||||
"$description": "Full pill badges"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user