From 3176761d9cf1a941114df1ac38d8a79ef4179c23 Mon Sep 17 00:00:00 2001 From: A Charlwood Date: Fri, 13 Feb 2026 17:00:44 +0000 Subject: [PATCH] Task 1: Update design tokens for GP System Dashboard - 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 --- src/index.css | 65 ++++++++++++++++++++++++++++++++++------------ tailwind.config.js | 52 +++++++++++++++++++++++-------------- 2 files changed, 81 insertions(+), 36 deletions(-) diff --git a/src/index.css b/src/index.css index 9523455..2c89741 100644 --- a/src/index.css +++ b/src/index.css @@ -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); } } diff --git a/tailwind.config.js b/tailwind.config.js index 53c9026..f823b15 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -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', }, },