Files
portfolio/tailwind.config.js
T
admin b8c1aedb5a Task 2: Set up premium font system (Elvaro Grotesque + Blumir)
Added @font-face declarations for both premium font candidates:
- Elvaro Grotesque: 7 weights (Light 300 → Black 900) from WOFF2/WOFF files
- Blumir: Variable font (100-700 weight range) from WOFF2/WOFF files

Updated Tailwind config:
- Added font-ui (Elvaro Grotesque) and font-ui-alt (Blumir) families
- Removed font-inter references (replaced with font-ui)
- Enhanced shadow tokens: pmr, pmr-hover, pmr-banner for Clinical Luxury depth
- Kept font-geist (Geist Mono) for data/timestamps, font-mono (Fira Code) for boot/ECG

Updated CSS variables and utility classes:
- --font-ui: Elvaro Grotesque
- --font-ui-alt: Blumir
- .pmr-theme now uses var(--font-ui) instead of var(--font-inter)

Fixed ESLint errors in ECGAnimation.tsx (viewOff/headSX should be const).

Quality checks: All passed (typecheck, lint, build). Font files bundled correctly.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-02-12 23:40:32 +00:00

81 lines
2.2 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
},
extend: {
colors: {
teal: {
DEFAULT: '#00897B',
light: 'rgba(0, 137, 123, 0.08)',
medium: 'rgba(0, 137, 123, 0.15)',
},
coral: {
DEFAULT: '#FF6B6B',
light: 'rgba(255, 107, 107, 0.08)',
},
heading: '#0F172A',
text: '#334155',
muted: '#94A3B8',
border: '#E2E8F0',
ecg: {
green: '#00ff41',
cyan: '#00e5ff',
dim: '#3a6b45',
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',
'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: {
primary: ['Plus Jakarta Sans', 'system-ui', 'sans-serif'],
secondary: ['Inter Tight', 'system-ui', 'sans-serif'],
mono: ['Fira Code', 'monospace'],
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)',
},
borderRadius: {
'card': '4px',
'login': '12px',
},
},
},
plugins: [],
}