admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Task 1: Update design tokens for GP System Dashboard

Browse Source 
- Replace old dark PMR palette with light teal GP System tokens
- Add three-tier shadow system (sm/md/lg) with warm green-gray tints
- Update border-radius: cards now 8px, inner elements 6px
- Add layout vars (sidebar-width 272px, topbar-height 48px)
- Fix font-ui/font-ui-alt swap: Elvaro Grotesque is now primary
- Add status color tokens (success, amber, alert, purple) with light/border variants
- Keep legacy --pmr-* aliases for backward compat during transition
- Update pmr Tailwind colors to new palette values

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
A Charlwood
2026-02-13 17:00:44 +00:00
parent e13a073a6f
commit 3176761d9c
2 changed files with 81 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+49 -16
View File
@@ -87,37 +87,70 @@
--coral: #FF6B6B;
--coral-light: rgba(255, 107, 107, 0.08);
--muted: #94A3B8;
--border: #E2E8F0;
--card-bg: #FFFFFF;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
--radius: 16px;
--font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
--font-secondary: 'Inter Tight', system-ui, sans-serif;
/* PMR-specific tokens */
--pmr-content: #F5F7FA;
/* Typography — Elvaro Grotesque primary, Blumir alternative */
--font-ui: 'Elvaro Grotesque', system-ui, sans-serif;
--font-ui-alt: 'Blumir', system-ui, sans-serif;
--font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
/* GP System Dashboard tokens */
--bg-dashboard: #F0F5F4;
--surface: #FFFFFF;
--sidebar-bg: #F7FAFA;
--text-primary: #1A2B2A;
--text-secondary: #5B7A78;
--text-tertiary: #8DA8A5;
--accent: #0D6E6E;
--accent-hover: #0A8080;
--accent-light: rgba(10,128,128,0.08);
--accent-border: rgba(10,128,128,0.18);
--amber: #D97706;
--amber-light: rgba(217,119,6,0.08);
--amber-border: rgba(217,119,6,0.18);
--success: #059669;
--success-light: rgba(5,150,105,0.08);
--success-border: rgba(5,150,105,0.18);
--alert: #DC2626;
--alert-light: rgba(220,38,38,0.08);
--alert-border: rgba(220,38,38,0.18);
--purple: #7C3AED;
--purple-light: rgba(124,58,237,0.08);
--purple-border: rgba(124,58,237,0.18);
--border: #D4E0DE;
--border-light: #E4EDEB;
--sidebar-width: 272px;
--topbar-height: 48px;
--radius-card: 8px;
--radius-sm: 6px;
--shadow-sm: 0 1px 2px rgba(26,43,42,0.05);
--shadow-md: 0 2px 8px rgba(26,43,42,0.08);
--shadow-lg: 0 8px 32px rgba(26,43,42,0.12);
--font-body: var(--font-ui);
--font-mono-dashboard: 'Geist Mono', 'Fira Code', monospace;
/* Legacy PMR tokens — kept for backward compat during transition (cleaned up in Task 21) */
--pmr-content: #F0F5F4;
--pmr-card: #FFFFFF;
--pmr-sidebar: #1E293B;
--pmr-sidebar: #F7FAFA;
--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-text-primary: #1A2B2A;
--pmr-text-secondary: #5B7A78;
--pmr-border: #D4E0DE;
--pmr-border-dark: #D1D5DB;
--pmr-selected: #EFF6FF;
--pmr-alert-bg: #FEF3C7;
--pmr-alert-border: #F59E0B;
--pmr-alert-text: #92400E;
--pmr-radius: 4px;
--pmr-radius: 8px;
--pmr-radius-login: 12px;
--font-ui: 'Blumir', system-ui, sans-serif;
--font-ui-alt: 'Elvaro Grotesque', system-ui, sans-serif;
--font-geist-mono: 'Geist Mono', 'Fira Code', monospace;
}
* {
@@ -154,8 +187,8 @@ body {
font-family: var(--font-geist-mono);
}
.pmr-theme {
background-color: var(--pmr-content);
color: var(--pmr-text-primary);
background-color: var(--bg-dashboard);
color: var(--text-primary);
font-family: var(--font-ui);
}
}
tailwind.config.js
+32 -20
View File
@@ -34,19 +34,30 @@ export default {
grey: '#666666',
},
pmr: {
sidebar: '#1E293B',
banner: '#334155',
content: '#F5F7FA',
card: '#FFFFFF',
nhsblue: '#005EB8',
green: '#22C55E',
amber: '#F59E0B',
red: '#EF4444',
'text-primary': '#111827',
'text-secondary': '#6B7280',
// GP System Dashboard palette
'bg': '#F0F5F4',
'surface': '#FFFFFF',
'sidebar': '#F7FAFA',
'accent': '#0D6E6E',
'accent-hover': '#0A8080',
'text-primary': '#1A2B2A',
'text-secondary': '#5B7A78',
'text-tertiary': '#8DA8A5',
'border': '#D4E0DE',
'border-light': '#E4EDEB',
'success': '#059669',
'amber': '#D97706',
'alert': '#DC2626',
'purple': '#7C3AED',
// Legacy tokens kept for transition (Task 21 cleanup)
'nhsblue': '#005EB8',
'content': '#F0F5F4',
'card': '#FFFFFF',
'banner': '#334155',
'green': '#22C55E',
'red': '#EF4444',
'text-on-dark': '#FFFFFF',
'text-on-dark-secondary': '#94A3B8',
'border': '#E5E7EB',
'border-dark': '#D1D5DB',
'selected-row': '#EFF6FF',
'alert-bg': '#FEF3C7',
@@ -58,20 +69,21 @@ export default {
primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
ui: ['Blumir', 'system-ui', 'sans-serif'],
'ui-alt': ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
ui: ['Elvaro Grotesque', 'system-ui', 'sans-serif'],
'ui-alt': ['Blumir', 'system-ui', 'sans-serif'],
geist: ['Geist Mono', 'Fira Code', 'monospace'],
},
boxShadow: {
'sm': '0 1px 3px rgba(0,0,0,0.06)',
'md': '0 4px 12px rgba(0,0,0,0.08)',
'lg': '0 8px 24px rgba(0,0,0,0.1)',
'pmr': '0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03)',
'pmr-hover': '0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.04)',
'pmr-banner': '0 2px 8px rgba(0,0,0,0.12)',
// GP System three-tier shadow system
'pmr-sm': '0 1px 2px rgba(26,43,42,0.05)',
'pmr-md': '0 2px 8px rgba(26,43,42,0.08)',
'pmr-lg': '0 8px 32px rgba(26,43,42,0.12)',
// Legacy alias
'pmr': '0 1px 2px rgba(26,43,42,0.05)',
},
borderRadius: {
'card': '4px',
'card': '8px',
'card-sm': '6px',
'login': '12px',
},
},