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

refactor: replace hardcoded hex colors with design tokens across priority components

Browse Source 
- Add DS_COLORS.heat, DS_COLORS.futureCard, INQUIRY_STATUS_META tokens to ds.ts
- Eliminate 4 duplicate RESULT_TYPE_META / TYPE_META constants (now all use ds.ts)
- Eliminate 3 duplicate scoreColor / SCORE_COLOR functions (now all use matchScoreHex)
- HeatBadge: use DS_COLORS.heat.VERY_HOT / HOT tokens
- FutureAvailabilityCard: use DS_COLORS.futureCard.controlled / signal tokens
- IntelligenceMatchCard: import RESULT_TYPE_META from ds.ts, remove primary override
- MatchScoreDisplay: replace local scoreColor() with matchScoreHex()
- CompareColumnHeader: remove local TYPE_META + SCORE_COLOR, use ds.ts + utils.ts
- CompareTableBody: import RESULT_TYPE_META + matchScoreHex, fix #7c3aed → token
- compareUtils: remove TYPE_META + SCORE_COLOR, use dataQualityHex in scoreBar
- Anfragen + AnfragenInquiryItem: deduplicate STATUS_CONFIG → INQUIRY_STATUS_META
- Anfragen: #1e3a5f → 'primary.main', KI alert → futureCard.controlled tokens
- AnfragenMessageBubble: own-message bubble → 'primary.main', AI bubble → tokens
- ScoreBreakdownPanel: #1e3a5f → 'primary.main', #6d28d9 → futureCard.controlled
- ESLint: add warn rule against new hex colors in component sx props

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-24 13:02:01 +02:00
parent c972392b78
commit 7f090a48ff
13 changed files with 130 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/shared/HeatBadge.tsx
+8 -10
View File
@@ -1,6 +1,7 @@
import { Box, Tooltip, Typography } from '@mui/material'
import { Flame } from 'lucide-react'
import { getHeatLevel, heatTooltip } from '../../lib/propertyHeat'
import { DS_COLORS } from '../../lib/ds'
interface Props {
propertyId: string | undefined
@@ -13,27 +14,24 @@ export function HeatBadge({ propertyId, size = 'md' }: Props) {
const isVeryHot = level === 'VERY_HOT'
const tooltip = heatTooltip(propertyId)
const colors = isVeryHot ? DS_COLORS.heat.VERY_HOT : DS_COLORS.heat.HOT
const iconSize = size === 'sm' ? 10 : 12
const fontSize = size === 'sm' ? '0.6rem' : '0.65rem'
const label = isVeryHot ? 'Sehr gefragt' : 'Gefragt'
const bgColor = isVeryHot ? '#fef3c7' : '#fff7ed'
const border = isVeryHot ? '1px solid #fcd34d' : '1px solid #fed7aa'
const iconColor = isVeryHot ? '#d97706' : '#ea580c'
const textColor = isVeryHot ? '#92400e' : '#c2410c'
const iconSize = size === 'sm' ? 10 : 12
const fontSize = size === 'sm' ? '0.6rem' : '0.65rem'
const label = isVeryHot ? 'Sehr gefragt' : 'Gefragt'
return (
<Tooltip title={tooltip} placement="top" arrow>
<Box
sx={{
display: 'inline-flex', alignItems: 'center', gap: 0.35,
bgcolor: bgColor, border, borderRadius: 1,
bgcolor: colors.bg, border: `1px solid ${colors.border}`, borderRadius: 1,
px: size === 'sm' ? 0.6 : 0.75, py: 0.15,
cursor: 'default',
}}
>
<Flame size={iconSize} color={iconColor} fill={isVeryHot ? iconColor : 'none'} />
<Typography sx={{ fontSize, fontWeight: 700, color: textColor, lineHeight: 1.2 }}>
<Flame size={iconSize} color={colors.icon} fill={isVeryHot ? colors.icon : 'none'} />
<Typography sx={{ fontSize, fontWeight: 700, color: colors.text, lineHeight: 1.2 }}>
{label}
</Typography>
</Box>