mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-09-13 16:23:08 +00:00
cef675825b
The #FFB800 (23 hits) and #FF3B5C (11 hits) raw hex literals across Subscription / SubscriptionPurchase / TrialOfferCard / useTrafficZone all represent the same semantic: 'expiring soon' and 'expired'. Distinct from warning-500 (#f59e0b) and error-500 (#ef4444) — the subscription timeline needs a sharper, hotter signal than the system-wide warning/error roles. Add two semantic tokens: --color-urgent-400: 255, 184, 0 (#FFB800) --color-critical-500: 255, 59, 92 (#FF3B5C) Exposed via Tailwind as urgent.400 / critical.500. Sweep all single-and double-quoted hex literals to rgb(var(--color-...)) form so style attrs, SVG stroke=, and ternary string values all resolve through CSS vars (auto-respects future light-theme variants). Left as-is: 4 hex appearances inside gradient pair strings — linear-gradient(135deg, #FFB800, #FF8C00) — where the partner color (#FF8C00 / #FF6B35) isn't in the token set. Partial-replace inside gradient strings would just add noise; full extraction of the orange-ramp companion is out of scope for this pass.
28 lines
846 B
TypeScript
28 lines
846 B
TypeScript
import { useMemo } from 'react';
|
|
import { getTrafficZone, TrafficColorKey } from '../utils/trafficZone';
|
|
import { useThemeColors } from './useThemeColors';
|
|
import type { ThemeColors } from '../types/theme';
|
|
|
|
const FALLBACKS: Record<TrafficColorKey, string> = {
|
|
accent: '#3b82f6',
|
|
warning: 'rgb(var(--color-urgent-400))',
|
|
error: 'rgb(var(--color-critical-500))',
|
|
};
|
|
|
|
const COLOR_MAP: Record<TrafficColorKey, keyof ThemeColors> = {
|
|
accent: 'accent',
|
|
warning: 'warning',
|
|
error: 'error',
|
|
};
|
|
|
|
export function useTrafficZone(percent: number) {
|
|
const { colors } = useThemeColors();
|
|
const zone = useMemo(() => getTrafficZone(percent), [percent]);
|
|
const mainHex = useMemo(() => {
|
|
const key = zone.colorKey;
|
|
return colors[COLOR_MAP[key]] || FALLBACKS[key];
|
|
}, [zone.colorKey, colors]);
|
|
|
|
return { ...zone, mainHex, colors };
|
|
}
|