feat(ui-kit): design tokens + StatCard + button variants (foundation)

Add accent (orange) + pastel stat-card tokens (light/dark), button accent/outline/lg/block variants, and a pastel StatCard primitive, aligning the admin design system with the clinic-pro-tauri reference. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-23 17:34:34 +03:30
parent 2206f02396
commit 0bd18d74b7
3 changed files with 186 additions and 0 deletions
@@ -0,0 +1,49 @@
+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: '#fff',
+            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>
+  );
+}