feat(pmr): configure design system foundation
Task 1: Design system foundation and font setup - Add Geist Mono font to Google Fonts import for PMR coded entries and timestamps - Extend PMR color tokens in Tailwind config (card, text variants, borders, alert colors) - Update border-radius defaults: 4px for cards/inputs, 12px for login card - Add PMR-specific CSS custom properties in index.css - Add .pmr-theme, .font-inter, .font-geist-mono utility classes - Add pmr shadow token (minimal clinical system shadow) All PMR color tokens now match ref-design-system.md spec exactly.
This commit is contained in:
+1
-1
@@ -7,7 +7,7 @@
|
|||||||
<title>Andy Charlwood — MPharm | CV</title>
|
<title>Andy Charlwood — MPharm | CV</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600&family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
/* Original design system tokens (for boot/ECG phases) */
|
||||||
--bg: #FFFFFF;
|
--bg: #FFFFFF;
|
||||||
--text: #334155;
|
--text: #334155;
|
||||||
--heading: #0F172A;
|
--heading: #0F172A;
|
||||||
@@ -20,6 +21,28 @@
|
|||||||
--radius: 16px;
|
--radius: 16px;
|
||||||
--font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
|
--font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||||||
--font-secondary: 'Inter Tight', system-ui, sans-serif;
|
--font-secondary: 'Inter Tight', system-ui, sans-serif;
|
||||||
|
|
||||||
|
/* PMR-specific tokens */
|
||||||
|
--pmr-content: #F5F7FA;
|
||||||
|
--pmr-card: #FFFFFF;
|
||||||
|
--pmr-sidebar: #1E293B;
|
||||||
|
--pmr-banner: #334155;
|
||||||
|
--pmr-nhs-blue: #005EB8;
|
||||||
|
--pmr-green: #22C55E;
|
||||||
|
--pmr-amber: #F59E0B;
|
||||||
|
--pmr-red: #EF4444;
|
||||||
|
--pmr-text-primary: #111827;
|
||||||
|
--pmr-text-secondary: #6B7280;
|
||||||
|
--pmr-border: #E5E7EB;
|
||||||
|
--pmr-border-dark: #D1D5DB;
|
||||||
|
--pmr-selected: #EFF6FF;
|
||||||
|
--pmr-alert-bg: #FEF3C7;
|
||||||
|
--pmr-alert-border: #F59E0B;
|
||||||
|
--pmr-alert-text: #92400E;
|
||||||
|
--pmr-radius: 4px;
|
||||||
|
--pmr-radius-login: 12px;
|
||||||
|
--font-inter: 'Inter', system-ui, sans-serif;
|
||||||
|
--font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -46,6 +69,17 @@ body {
|
|||||||
.font-mono {
|
.font-mono {
|
||||||
font-family: 'Fira Code', monospace;
|
font-family: 'Fira Code', monospace;
|
||||||
}
|
}
|
||||||
|
.font-inter {
|
||||||
|
font-family: var(--font-inter);
|
||||||
|
}
|
||||||
|
.font-geist-mono {
|
||||||
|
font-family: var(--font-geist-mono);
|
||||||
|
}
|
||||||
|
.pmr-theme {
|
||||||
|
background-color: var(--pmr-content);
|
||||||
|
color: var(--pmr-text-primary);
|
||||||
|
font-family: var(--font-inter);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes blink {
|
@keyframes blink {
|
||||||
|
|||||||
+14
-1
@@ -37,10 +37,21 @@ export default {
|
|||||||
sidebar: '#1E293B',
|
sidebar: '#1E293B',
|
||||||
banner: '#334155',
|
banner: '#334155',
|
||||||
content: '#F5F7FA',
|
content: '#F5F7FA',
|
||||||
|
card: '#FFFFFF',
|
||||||
nhsblue: '#005EB8',
|
nhsblue: '#005EB8',
|
||||||
green: '#22C55E',
|
green: '#22C55E',
|
||||||
amber: '#F59E0B',
|
amber: '#F59E0B',
|
||||||
red: '#EF4444',
|
red: '#EF4444',
|
||||||
|
'text-primary': '#111827',
|
||||||
|
'text-secondary': '#6B7280',
|
||||||
|
'text-on-dark': '#FFFFFF',
|
||||||
|
'text-on-dark-secondary': '#94A3B8',
|
||||||
|
'border': '#E5E7EB',
|
||||||
|
'border-dark': '#D1D5DB',
|
||||||
|
'selected-row': '#EFF6FF',
|
||||||
|
'alert-bg': '#FEF3C7',
|
||||||
|
'alert-border': '#F59E0B',
|
||||||
|
'alert-text': '#92400E',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
@@ -54,9 +65,11 @@ export default {
|
|||||||
'sm': '0 1px 3px rgba(0,0,0,0.06)',
|
'sm': '0 1px 3px rgba(0,0,0,0.06)',
|
||||||
'md': '0 4px 12px rgba(0,0,0,0.08)',
|
'md': '0 4px 12px rgba(0,0,0,0.08)',
|
||||||
'lg': '0 8px 24px rgba(0,0,0,0.1)',
|
'lg': '0 8px 24px rgba(0,0,0,0.1)',
|
||||||
|
'pmr': '0 1px 2px rgba(0,0,0,0.03)',
|
||||||
},
|
},
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
'card': '16px',
|
'card': '4px',
|
||||||
|
'login': '12px',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user