johannes.gasser/property-match
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: premium redesign — DM Serif, refined palette, flat score badges

Browse Source 
- Design tokens (ds.ts, theme.ts, scoreTheme.ts): new warm palette
  (#152642 navy, #f9f8f6 warm white, #e8e7e4 borders, #b8975a gold accent),
  flat score tier badges replacing CSS gradients, Inter + DM Serif Display typography
- Card components: white-background cards, DM Serif score numbers, max-2 badge
  chips with +N overflow tooltip, editorial score badge positioning
- Layout shell: gold left-accent nav active state, 64px top bar, outlined
  workspace chip, DM Serif page titles
- Shared atoms: GenericBadge (outlined/solid variants), ResultFilterBar
  (simplified chip styles), DecisionContextPanel (dot metrics, no left accent)
- Global replacement (118 files): #1e3a5f→#152642, #e2e8f0→#e8e7e4,
  #f4f6f9→#f9f8f6 — all handled via Node.js for proper UTF-8 safety

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin SutterandClaude Sonnet 4.6 committed 2026-06-09 22:26:30 +02:00
1 parent 96a2507979
commit da50f3b5ea
132 files changed
+659 -711
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/lib/ds.ts
+88 -97
View File
@@ -2,129 +2,124 @@ import type { ConfidenceLevel, DataQualityLevel } from '../domain/enums'
import { CONF_HIGH, CONF_MEDIUM, DQ_HIGH, DQ_MEDIUM } from './constants'
// ── Semantic color tokens ─────────────────────────────────────────────────────
// Single source of truth for badge/score colors. All badge components read from here.
export const DS_COLORS = {
resultType: {
VERIFIED_PORTFOLIO: { bg: 'rgba(30,58,95,0.10)', fg: '#1e3a5f' },
MAISON_WORK: { bg: 'rgba(3,105,161,0.10)', fg: '#0369a1' },
FUTURE_AVAILABILITY: { bg: 'rgba(109,40,217,0.10)', fg: '#6d28d9' },
VERIFIED_PORTFOLIO: { bg: 'rgba(21,38,66,0.10)', fg: '#152642' },
MAISON_WORK: { bg: 'rgba(45,90,138,0.10)', fg: '#2d5a8a' },
FUTURE_AVAILABILITY: { bg: 'rgba(91,63,138,0.10)', fg: '#5b3f8a' },
},
confidence: {
VERY_HIGH: { bg: 'rgba(26,122,74,0.12)', fg: '#1a7a4a' },
HIGH: { bg: 'rgba(26,122,74,0.09)', fg: '#1a7a4a' },
MEDIUM: { bg: 'rgba(30,58,95,0.10)', fg: '#1e3a5f' },
LOW: { bg: 'rgba(217,119,6,0.12)', fg: '#d97706' },
VERY_LOW: { bg: 'rgba(192,57,43,0.12)', fg: '#c0392b' },
VERY_HIGH: { bg: 'rgba(29,99,66,0.12)', fg: '#1d6342' },
HIGH: { bg: 'rgba(29,99,66,0.09)', fg: '#1d6342' },
MEDIUM: { bg: 'rgba(21,38,66,0.10)', fg: '#152642' },
LOW: { bg: 'rgba(161,98,7,0.12)', fg: '#a16207' },
VERY_LOW: { bg: 'rgba(185,28,28,0.12)', fg: '#b91c1c' },
},
risk: {
LOW: { bg: 'rgba(26,122,74,0.10)', fg: '#1a7a4a' },
MEDIUM: { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
HIGH: { bg: 'rgba(192,57,43,0.10)', fg: '#c0392b' },
CRITICAL: { bg: 'rgba(127,0,0,0.12)', fg: '#7f1d1d' },
LOW: { bg: 'rgba(29,99,66,0.10)', fg: '#1d6342' },
MEDIUM: { bg: 'rgba(161,98,7,0.10)', fg: '#a16207' },
HIGH: { bg: 'rgba(185,28,28,0.10)', fg: '#b91c1c' },
CRITICAL: { bg: 'rgba(127,0,0,0.12)', fg: '#7f1d1d' },
},
availability: {
AVAILABLE_NOW: { bg: 'rgba(26,122,74,0.10)', fg: '#1a7a4a' },
AVAILABLE_SOON: { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
FUTURE_SIGNAL: { bg: 'rgba(109,40,217,0.10)', fg: '#6d28d9' },
AVAILABLE_NOW: { bg: 'rgba(29,99,66,0.10)', fg: '#1d6342' },
AVAILABLE_SOON: { bg: 'rgba(161,98,7,0.10)', fg: '#a16207' },
FUTURE_SIGNAL: { bg: 'rgba(91,63,138,0.10)', fg: '#5b3f8a' },
OCCUPIED: { bg: 'rgba(100,116,139,0.10)', fg: '#475569' },
UNKNOWN: { bg: '#f1f5f9', fg: '#94a3b8' },
UNKNOWN: { bg: '#f4f3f0', fg: '#9a9a9a' },
},
freshness: {
FRESH: { bg: 'rgba(26,122,74,0.10)', fg: '#1a7a4a' },
STALE: { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
OUTDATED: { bg: 'rgba(192,57,43,0.10)', fg: '#c0392b' },
FRESH: { bg: 'rgba(29,99,66,0.10)', fg: '#1d6342' },
STALE: { bg: 'rgba(161,98,7,0.10)', fg: '#a16207' },
OUTDATED: { bg: 'rgba(185,28,28,0.10)', fg: '#b91c1c' },
},
dataQuality: {
HIGH: { bg: 'rgba(26,122,74,0.10)', fg: '#1a7a4a' },
MEDIUM: { bg: 'rgba(217,119,6,0.10)', fg: '#d97706' },
LOW: { bg: 'rgba(192,57,43,0.10)', fg: '#c0392b' },
INCOMPLETE: { bg: 'rgba(127,0,0,0.12)', fg: '#7f1d1d' },
HIGH: { bg: 'rgba(29,99,66,0.10)', fg: '#1d6342' },
MEDIUM: { bg: 'rgba(161,98,7,0.10)', fg: '#a16207' },
LOW: { bg: 'rgba(185,28,28,0.10)', fg: '#b91c1c' },
INCOMPLETE: { bg: 'rgba(127,0,0,0.12)', fg: '#7f1d1d' },
},
heat: {
VERY_HOT: { bg: '#fef3c7', border: '#fcd34d', icon: '#d97706', text: '#92400e' },
HOT: { bg: '#fff7ed', border: '#fed7aa', icon: '#ea580c', text: '#c2410c' },
VERY_HOT: { bg: '#fef3c7', border: '#fcd34d', icon: '#a16207', text: '#92400e' },
HOT: { bg: '#fff7ed', border: '#fed7aa', icon: '#a16207', text: '#92400e' },
},
futureCard: {
controlled: {
accent: '#7c3aed',
accentHover: '#6d28d9',
headerBg: '#faf5ff',
accent: '#5b3f8a',
accentHover: '#4a3070',
headerBg: '#faf7ff',
border: '#e9d5ff',
badgeBg: '#ede9fe',
badgeText: '#5b21b6',
},
signal: {
accent: '#1d4ed8',
accentHover: '#1e40af',
headerBg: '#eff6ff',
accent: '#2d5a8a',
accentHover: '#1e4068',
headerBg: '#f0f6ff',
border: '#bfdbfe',
badgeBg: '#dbeafe',
badgeText: '#1e40af',
indicator: '#1d4ed8',
indicator: '#2d5a8a',
},
},
} as const
// ── Text color tokens ─────────────────────────────────────────────────────────
// For sx={{ color: DS_TEXT.secondary }} instead of hardcoded '#475569'
export const DS_TEXT = {
primary: '#1e293b',
secondary: '#475569',
muted: '#64748b',
disabled: '#94a3b8',
primary: '#141414',
secondary: '#5c5c5c',
muted: '#9a9a9a',
disabled: '#c4c4c4',
inverted: '#ffffff',
success: '#1a7a4a',
warning: '#d97706',
error: '#c0392b',
danger: '#dc2626',
info: '#0369a1',
brand: '#1e3a5f',
signal: '#6d28d9',
// Dark variants — use for text on light-tinted surface boxes
success: '#1d6342',
warning: '#a16207',
error: '#b91c1c',
danger: '#b91c1c',
info: '#2d5a8a',
brand: '#152642',
signal: '#5b3f8a',
successDark: '#166534',
warningDark: '#92400e',
signalDark: '#4c1d95',
infoDark: '#0c4a6e',
brandDark: '#162d4a',
brandDark: '#0e1c30',
} as const
// ── Background tokens ─────────────────────────────────────────────────────────
export const DS_BG = {
page: '#f8fafc',
page: '#f9f8f6',
surface: '#ffffff',
subtle: '#f1f5f9',
muted: '#e2e8f0',
subtle: '#f4f3f0',
muted: '#e8e7e4',
} as const
// ── Border tokens ─────────────────────────────────────────────────────────────
export const DS_BORDER = {
default: '#e2e8f0',
muted: '#f1f5f9',
strong: '#cbd5e1',
default: '#e8e7e4',
muted: '#f2f1ee',
strong: '#c8c7c4',
} as const
// ── Surface tokens — bg + border pairs for highlighted/tinted boxes ───────────
// Use as: sx={{ bgcolor: DS_SURFACE.success.bg, border: `1px solid ${DS_SURFACE.success.border}` }}
// ── Surface tokens ────────────────────────────────────────────────────────────
export const DS_SURFACE = {
success: { bg: '#f0fdf4', border: '#bbf7d0' }, // green tint
warning: { bg: '#fffbeb', border: '#fde68a' }, // amber tint
error: { bg: '#fef2f2', border: '#fecaca' }, // red tint
info: { bg: '#f0f9ff', border: '#bae6fd' }, // sky tint
indigo: { bg: '#eef2ff', border: '#e0e7ff' }, // indigo tint (hard-criteria rows)
purple: { bg: '#faf5ff', border: '#e9d5ff' }, // purple tint (pre-market / future)
orange: { bg: '#fff7ed', border: '#fed7aa' }, // orange tint (HOT heat badge bg)
blue: { bg: '#eff6ff', border: '#bfdbfe' }, // blue tint (market signal)
neutral: { bg: '#f8fafc', border: '#e2e8f0' }, // neutral/slate tint (formula rows)
slate: { bg: '#f1f5f9', border: '#e2e8f0' }, // slightly darker neutral
success: { bg: '#f0fdf4', border: '#bbf7d0' },
warning: { bg: '#fffbeb', border: '#fde68a' },
error: { bg: '#fef2f2', border: '#fecaca' },
info: { bg: '#f0f6ff', border: '#bfdbfe' },
indigo: { bg: '#eef2ff', border: '#e0e7ff' },
purple: { bg: '#faf7ff', border: '#e9d5ff' },
orange: { bg: '#fff7ed', border: '#fed7aa' },
blue: { bg: '#f0f6ff', border: '#bfdbfe' },
neutral: { bg: '#f9f8f6', border: '#e8e7e4' },
slate: { bg: '#f4f3f0', border: '#e8e7e4' },
} as const
// ── Match tier surface — bg tint keyed by score tier ─────────────────────────
// Use with SCORE_STRONG / SCORE_MODERATE thresholds from constants.ts
// ── Match tier surface ────────────────────────────────────────────────────────
export const DS_MATCH_TIER = {
strong: DS_SURFACE.success,
@@ -132,49 +127,45 @@ export const DS_MATCH_TIER = {
weak: DS_SURFACE.error,
} as const
// ── Pre-market & market signal shorthand aliases ──────────────────────────────
// DS_COLORS.futureCard.controlled / signal are the full token sets.
// These aliases make imports more readable in supply-side components.
// ── Pre-market & market signal aliases ────────────────────────────────────────
export const DS_PRE_MARKET = DS_COLORS.futureCard.controlled
export const DS_MARKET_SIGNAL = DS_COLORS.futureCard.signal
// ── Badge color presets ───────────────────────────────────────────────────────
// Pass to GenericBadge.color instead of raw hex strings.
// BADGE_COLORS.confidenceHigh replaces '#1a7a4a' at call sites.
export const BADGE_COLORS = {
confidenceHigh: '#1a7a4a',
confidenceMedium: '#d97706',
confidenceLow: '#c0392b',
riskHigh: '#c0392b',
riskMedium: '#d97706',
riskLow: '#1a7a4a',
preMarket: '#7c3aed',
marketSignal: '#1d4ed8',
verified: '#1e3a5f',
info: '#0369a1',
muted: '#64748b',
gold: '#d97706',
silver: '#64748b',
bronze: '#b45309',
confidenceHigh: '#1d6342',
confidenceMedium: '#a16207',
confidenceLow: '#b91c1c',
riskHigh: '#b91c1c',
riskMedium: '#a16207',
riskLow: '#1d6342',
preMarket: '#5b3f8a',
marketSignal: '#2d5a8a',
verified: '#152642',
info: '#2d5a8a',
muted: '#9a9a9a',
gold: '#b8975a',
silver: '#7a8a9a',
bronze: '#7a6050',
} as const
// ── Shadow tokens ─────────────────────────────────────────────────────────────
export const DS_SHADOW = {
card: '0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.04)',
panel: '0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.04)',
dialog: '0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.06)',
card: '0 1px 3px rgba(0,0,0,0.06)',
panel: '0 3px 6px rgba(0,0,0,0.07)',
dialog: '0 16px 24px rgba(0,0,0,0.10)',
} as const
// ── Inquiry status metadata ───────────────────────────────────────────────────
export const INQUIRY_STATUS_META: Record<string, { label: string; fg: string; bg: string }> = {
new: { label: 'Neu', fg: '#dc2626', bg: '#fef2f2' },
in_progress: { label: 'Aktiv', fg: '#d97706', bg: '#fffbeb' },
answered: { label: 'Beantwortet', fg: '#1a7a4a', bg: '#f0fdf4' },
archived: { label: 'Archiviert', fg: '#64748b', bg: '#f8fafc' },
new: { label: 'Neu', fg: '#b91c1c', bg: '#fef2f2' },
in_progress: { label: 'Aktiv', fg: '#a16207', bg: '#fffbeb' },
answered: { label: 'Beantwortet', fg: '#1d6342', bg: '#f0fdf4' },
archived: { label: 'Archiviert', fg: '#9a9a9a', bg: '#f9f8f6' },
}
// ── Score → qualitative level helpers ────────────────────────────────────────
@@ -194,10 +185,10 @@ export function scoreToDataQualityLevel(score: number): DataQualityLevel {
return 'INCOMPLETE'
}
// ── Result type meta — single source for labels + colors ─────────────────────
// ── Result type meta ──────────────────────────────────────────────────────────
export const RESULT_TYPE_META: Record<string, { label: string; color: string; bg: string }> = {
VERIFIED_PORTFOLIO: { label: 'Verifiziertes Objekt', color: '#1e3a5f', bg: 'rgba(30,58,95,0.10)' },
MAISON_WORK: { label: 'Maison Work', color: '#0369a1', bg: 'rgba(3,105,161,0.10)' },
FUTURE_AVAILABILITY: { label: 'Zukunftssignal', color: '#7c3aed', bg: 'rgba(109,40,217,0.10)' },
VERIFIED_PORTFOLIO: { label: 'Verifiziertes Objekt', color: '#152642', bg: 'rgba(21,38,66,0.10)' },
MAISON_WORK: { label: 'Maison Work', color: '#2d5a8a', bg: 'rgba(45,90,138,0.10)' },
FUTURE_AVAILABILITY: { label: 'Zukunftssignal', color: '#5b3f8a', bg: 'rgba(91,63,138,0.10)' },
}