feat: unify 8081 dashboard design system and views

This commit is contained in:
hyunho
2026-04-01 14:02:05 +09:00
parent 637b390024
commit fb5b0f00c2
27 changed files with 12596 additions and 818 deletions

View File

@@ -1,38 +1,41 @@
@import url("/design-tokens.css?v=20260401-01");
@import url("/design-patterns.css?v=20260401-01");
:root {
--font-sans: "Pretendard", sans-serif;
--font-sans: var(--ds-font-sans);
--color-bg: #f1f5f9;
--color-bg-soft: #eef2ff;
--color-surface: #ffffff;
--color-surface-soft: rgba(255, 255, 255, 0.88);
--color-surface-strong: #e2e8f0;
--color-text: #1e293b;
--color-text-soft: #475569;
--color-text-muted: #64748b;
--color-border: #cbd5e1;
--color-border-soft: rgba(148, 163, 184, 0.3);
--color-header: #1e293b;
--color-header-soft: #334155;
--color-accent: #4f46e5;
--color-accent-soft: #e0e7ff;
--color-accent-strong: #4338ca;
--color-bg: var(--ds-bg);
--color-bg-soft: var(--ds-bg-soft);
--color-surface: var(--ds-panel);
--color-surface-soft: var(--ds-panel-soft);
--color-surface-strong: var(--ds-panel-strong);
--color-text: var(--ds-ink);
--color-text-soft: var(--ds-text-soft);
--color-text-muted: var(--ds-text-muted);
--color-border: var(--ds-line);
--color-border-soft: var(--ds-line-soft);
--color-header: var(--ds-brand);
--color-header-soft: var(--ds-brand-soft);
--color-accent: var(--ds-accent);
--color-accent-soft: var(--ds-accent-soft);
--color-accent-strong: var(--ds-accent-strong);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
--radius-pill: 999px;
--radius-sm: var(--ds-radius-sm);
--radius-md: var(--ds-radius-md);
--radius-lg: var(--ds-radius-lg);
--radius-xl: var(--ds-radius-xl);
--radius-pill: var(--ds-radius-pill);
--shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08);
--shadow-card: 0 18px 44px rgba(15, 23, 42, 0.12);
--shadow-float: 0 18px 36px rgba(79, 70, 229, 0.16);
--shadow-soft: var(--ds-shadow-soft);
--shadow-card: var(--ds-shadow-card);
--shadow-float: var(--ds-shadow-float);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-1: var(--ds-space-1);
--space-2: var(--ds-space-2);
--space-3: var(--ds-space-3);
--space-4: var(--ds-space-4);
--space-5: var(--ds-space-5);
--space-6: var(--ds-space-6);
}
* {
@@ -46,15 +49,13 @@ body {
min-height: 100%;
font-family: var(--font-sans);
color: var(--color-text);
background:
radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 22%),
radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.18), transparent 28%),
var(--color-bg);
background: var(--ds-bg-gradient);
}
body {
min-height: 100vh;
overflow: hidden;
background: var(--ds-bg-gradient);
}
button,
@@ -92,18 +93,18 @@ a {
.ui-button-secondary {
border: 1px solid var(--color-border-soft);
color: var(--color-text);
background: rgba(255, 255, 255, 0.72);
background: var(--ds-surface-tint);
}
.ui-input {
border: 1px solid var(--color-border-soft);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.88);
background: var(--ds-surface-tint-strong);
color: var(--color-text);
outline: none;
}
.ui-input:focus {
border-color: rgba(79, 70, 229, 0.45);
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
border-color: rgba(47, 153, 115, 0.45);
box-shadow: 0 0 0 4px rgba(47, 153, 115, 0.1);
}