richie/FuneralArranger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Storybook font loading and resolve token color conflicts

Browse Source 
- Add preview-head.html to load Montserrat and Noto Serif SC in Storybook
- Document DS equivalents for all 7 flagged production color conflicts
- Strategy: keep both values, production names for backward compat, DS names go-forward

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Richie
2026-05-22 14:18:38 +10:00
parent d7796e53a8
commit 16dcc4de2e
3 changed files with 39 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
tailwind.config.js
View File

@@ -61,25 +61,26 @@ module.exports = {
// Production's colour tokens (preserved for backward compatibility)
// plus design system semantic palettes
colors: {
// --- Production tokens (unchanged) ---
'grey-1': '#f4f3ef',
'grey-2': '#D7E1E2',
'grey-3': '#b9c7c9',
'grey-4': '#4c5459',
'grey-5': '#4c5b6b',
'grey-6': '#D9D9D9',
'grey-7': '#EEEEEE',
'warning-red': '#A41623',
'color-1': '#B0610F',
'color-1H': '#9e6f42',
'color-2': '#DCC1A6',
'color-2H': '#d1b79e',
'color-3': '#BA834E',
'color-4': '#D0A070',
'color-5': '#F4F3EF',
'color-6': '#51301B',
'action-orange': '#F89E53',
'success-green': '#76B041',
// --- Production tokens (preserved for backward compatibility) ---
// DS equivalent noted where applicable; new components should use DS names.
'grey-1': '#f4f3ef', // ≈ brand-50 (#fef9f5)
'grey-2': '#D7E1E2', // = sage-200
'grey-3': '#b9c7c9', // = sage-400
'grey-4': '#4c5459', // = sage-800
'grey-5': '#4c5b6b', // = sage-700
'grey-6': '#D9D9D9', // ≈ neutral-300 (#d4d4d4)
'grey-7': '#EEEEEE', // ≈ neutral-100 (#f5f5f5)
'warning-red': '#A41623', // ≈ red-600 (#BC2F2F) — darker crimson vs DS warm red
'color-1': '#B0610F', // = brand-600
'color-1H': '#9e6f42', // No DS match — between brand-500 and brand-600
'color-2': '#DCC1A6', // ≈ brand-200 (#EBDAC8) — warmer/darker than DS
'color-2H': '#d1b79e', // No DS match — production hover state
'color-3': '#BA834E', // = brand-500
'color-4': '#D0A070', // = brand-400
'color-5': '#F4F3EF', // = grey-1
'color-6': '#51301B', // = brand-900
'action-orange': '#F89E53', // ≈ amber-400 (#ffb833) — production only
'success-green': '#76B041', // ≈ green-500 (#4a8f4a) — lime vs DS forest green
// --- Design system palettes (from tokens) ---
...dsTokens.colors,