hamed
55ab2f5dfc
- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes. - Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`. - Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors. - Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system. - Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes. - Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.
50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
type StatTone = 'amber' | 'violet' | 'green' | 'pink';
|
|
|
|
const TONE: Record<StatTone, { bg: string; fg: string }> = {
|
|
amber: { bg: 'var(--stat-amber-bg)', fg: 'var(--stat-amber-fg)' },
|
|
violet: { bg: 'var(--stat-violet-bg)', fg: 'var(--stat-violet-fg)' },
|
|
green: { bg: 'var(--stat-green-bg)', fg: 'var(--stat-green-fg)' },
|
|
pink: { bg: 'var(--stat-pink-bg)', fg: 'var(--stat-pink-fg)' },
|
|
};
|
|
|
|
interface Props {
|
|
tone: StatTone;
|
|
label: string;
|
|
value: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export default function StatCard({ tone, label, value, icon }: Props) {
|
|
const c = TONE[tone];
|
|
return (
|
|
<div
|
|
style={{
|
|
background: c.bg,
|
|
borderRadius: 'var(--r-lg)',
|
|
padding: '18px 20px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 14,
|
|
}}
|
|
>
|
|
{icon && (
|
|
<div
|
|
style={{
|
|
width: 44, height: 44, borderRadius: 12, flexShrink: 0,
|
|
background: c.fg, color: 'var(--on-primary)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
}}
|
|
>
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div style={{ flex: 1, minWidth: 0, textAlign: 'right' }}>
|
|
<div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)' }}>{value}</div>
|
|
<div style={{ fontSize: 12.5, color: 'var(--text-2)', marginTop: 3 }}>{label}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|