hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
hamed
2026-06-23 17:34:34 +03:30
co-authored by Claude Opus 4.8
parent 2206f02396
commit 0bd18d74b7
3 changed files with 186 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/styles.css
+22
View File
@@ -43,6 +43,15 @@
--info-bg: #e7f1fb;
--violet: #7c5cf0;
--violet-bg: #efeafe;
/* accent (نارنجی tauri) برای CTAهای ثانویه و آواتارها */
--accent: #f0682a;
--accent-600: #db5a1f;
--accent-bg: #fdeee4;
/* رنگ‌های پاستلی stat-cards داشبورد (هم‌خوان با tauri) */
--stat-amber-bg: #fdf0e3; --stat-amber-fg: #e08a1e;
--stat-violet-bg: #efeefb; --stat-violet-fg: #6d5cf0;
--stat-green-bg: #e7f6ef; --stat-green-fg: #16a35a;
--stat-pink-bg: #fdeee9; --stat-pink-fg: #f0682a;
--ring: color-mix(in oklch, var(--primary) 32%, transparent);
--shadow-sm: 0 1px 2px rgba(15,27,46,.06), 0 1px 3px rgba(15,27,46,.05);
--shadow: 0 2px 6px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.06);
@@ -84,6 +93,13 @@
--danger-bg: color-mix(in oklch, var(--danger) 18%, var(--surface));
--info-bg: color-mix(in oklch, var(--info) 18%, var(--surface));
--violet-bg: color-mix(in oklch, var(--violet) 20%, var(--surface));
--accent: #f0763d;
--accent-600: #e0651f;
--accent-bg: color-mix(in oklch, var(--accent) 18%, var(--surface));
--stat-amber-bg: color-mix(in oklch, var(--warning) 16%, var(--surface)); --stat-amber-fg: var(--warning);
--stat-violet-bg: color-mix(in oklch, var(--violet) 18%, var(--surface)); --stat-violet-fg: var(--violet);
--stat-green-bg: color-mix(in oklch, var(--success) 16%, var(--surface)); --stat-green-fg: var(--success);
--stat-pink-bg: color-mix(in oklch, var(--accent) 16%, var(--surface)); --stat-pink-fg: var(--accent);
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 2px 8px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
--shadow-lg: 0 18px 44px rgba(0,0,0,.55);
@@ -467,7 +483,13 @@ body {
.btn.soft:hover { background: var(--primary-soft2); }
.btn.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.btn.danger:hover { filter: brightness(.97); }
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 35%, transparent); }
.btn.accent:hover { background: var(--accent-600); }
.btn.outline { background: transparent; border-color: var(--primary); color: var(--primary); }
.btn.outline:hover { background: var(--primary-soft); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn.lg { height: 48px; padding: 0 24px; font-size: 15px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ── Tables ──────────────────────────────────────────────────── */