V13-FE-005: Complete KBX v60 frontend components, T01-T12 screen recipes, and WBS progress tracker
This commit is contained in:
@@ -1,63 +1,100 @@
|
||||
:root {
|
||||
--ks-color-action: #174a7e;
|
||||
--ks-color-action-hover: #123b65;
|
||||
--ks-color-info: #2563eb;
|
||||
--ks-color-success: #137333;
|
||||
--ks-color-warning: #9a6700;
|
||||
--ks-color-danger: #b42318;
|
||||
--ks-color-neutral-950: #111827;
|
||||
--ks-color-neutral-800: #1f2937;
|
||||
--ks-color-neutral-700: #374151;
|
||||
--ks-color-neutral-600: #4b5563;
|
||||
--ks-color-neutral-500: #6b7280;
|
||||
--ks-color-neutral-300: #d1d5db;
|
||||
--ks-color-neutral-200: #e5e7eb;
|
||||
--ks-color-neutral-100: #f3f4f6;
|
||||
/* KBX v60 Semantic & Financial Palette */
|
||||
--ks-color-action: #2563eb;
|
||||
--ks-color-action-hover: #1d4ed8;
|
||||
--ks-color-info: #0284c7;
|
||||
--ks-color-success: #16a34a;
|
||||
--ks-color-warning: #d97706;
|
||||
--ks-color-danger: #dc2626;
|
||||
--ks-color-up: #e11d48; /* KRX 상승 Red */
|
||||
--ks-color-down: #2563eb; /* KRX 하락 Blue */
|
||||
|
||||
/* KBX v60 Neutral Color Scale */
|
||||
--ks-color-neutral-950: #0f172a;
|
||||
--ks-color-neutral-900: #1e293b;
|
||||
--ks-color-neutral-800: #334155;
|
||||
--ks-color-neutral-700: #475569;
|
||||
--ks-color-neutral-600: #64748b;
|
||||
--ks-color-neutral-500: #94a3b8;
|
||||
--ks-color-neutral-300: #cbd5e1;
|
||||
--ks-color-neutral-200: #e2e8f0;
|
||||
--ks-color-neutral-100: #f1f5f9;
|
||||
--ks-color-neutral-50: #f8fafc;
|
||||
|
||||
/* KBX v60 Surface & Canvas */
|
||||
--ks-color-surface: #ffffff;
|
||||
--ks-color-canvas: #f7f8fa;
|
||||
--ks-color-surface-raised: #ffffff;
|
||||
--ks-color-canvas: #f8fafc;
|
||||
--ks-color-focus: #2563eb;
|
||||
--ks-color-text: var(--ks-color-neutral-950);
|
||||
--ks-color-text-muted: var(--ks-color-neutral-600);
|
||||
--ks-color-text-on-dark: var(--ks-color-surface);
|
||||
--ks-color-surface-raised: var(--ks-color-surface);
|
||||
--ks-color-text-on-dark: #ffffff;
|
||||
--ks-color-border: var(--ks-color-neutral-200);
|
||||
--ks-color-border-strong: var(--ks-color-neutral-300);
|
||||
--ks-color-warning-border: var(--ks-color-warning);
|
||||
--ks-space-1: 0.25rem;
|
||||
--ks-space-2: 0.5rem;
|
||||
--ks-space-3: 0.75rem;
|
||||
--ks-space-4: 1rem;
|
||||
--ks-space-6: 1.5rem;
|
||||
--ks-space-8: 2rem;
|
||||
--ks-radius-sm: 0.25rem;
|
||||
--ks-radius-md: 0.5rem;
|
||||
--ks-radius-lg: 0.75rem;
|
||||
--ks-shadow-sm: 0 1px 2px rgb(0 0 0 / 8%);
|
||||
--ks-shadow-md: 0 8px 24px rgb(0 0 0 / 10%);
|
||||
--ks-shadow-lg: 0 16px 48px rgb(0 0 0 / 16%);
|
||||
--ks-font-page: 1.5rem;
|
||||
--ks-line-page: 2rem;
|
||||
--ks-font-section: 1.125rem;
|
||||
--ks-line-section: 1.625rem;
|
||||
--ks-font-body: 0.875rem;
|
||||
--ks-line-body: 1.375rem;
|
||||
--ks-font-caption: 0.75rem;
|
||||
--ks-line-caption: 1.125rem;
|
||||
--ks-control-height: 2.75rem;
|
||||
--ks-grid-density: 2.25rem;
|
||||
--ks-content-max: 100rem;
|
||||
--ks-focus-ring-width: 3px;
|
||||
--ks-focus-ring-offset: 2px;
|
||||
--ks-shell-sidebar-width: 16rem;
|
||||
--ks-shell-header-height: 3.5rem;
|
||||
--ks-shell-sidenav-width: 13.75rem;
|
||||
--ks-shell-sidenav-collapsed: 3.5rem;
|
||||
--ks-shell-tabs-height: 2.5rem;
|
||||
--ks-shell-pageheader-height: 3rem;
|
||||
--ks-shell-commandbar-height: 2.75rem;
|
||||
|
||||
/* KBX v60 Dense Spacing & Radius Standards */
|
||||
--ks-space-1: 4px;
|
||||
--ks-space-2: 8px; /* KBX 기본 간격 8px */
|
||||
--ks-space-3: 12px;
|
||||
--ks-space-4: 16px;
|
||||
--ks-space-6: 24px;
|
||||
--ks-space-8: 32px;
|
||||
|
||||
--ks-radius-sm: 4px; /* KBX v60 기본 Radius 4px */
|
||||
--ks-radius-md: 4px;
|
||||
--ks-radius-lg: 6px;
|
||||
|
||||
/* KBX v60 Typography Scale (§8) */
|
||||
--ks-font-page: 20px; /* Page Title 20px */
|
||||
--ks-line-page: 28px;
|
||||
--ks-font-section: 16px; /* Section Heading 16px */
|
||||
--ks-line-section: 24px;
|
||||
--ks-font-body: 14px; /* Form / Body 14px */
|
||||
--ks-line-body: 20px;
|
||||
--ks-font-grid: 13px; /* Grid Data 13px */
|
||||
--ks-line-grid: 18px;
|
||||
--ks-font-caption: 12px; /* Caption / Helper 12px */
|
||||
--ks-line-caption: 16px;
|
||||
|
||||
/* KBX v60 Control & Layout Heights (§4, §10, Shell §3) */
|
||||
--ks-control-height: 34px; /* KBX v60 Control Base 34px */
|
||||
--ks-grid-row-height: 34px; /* Grid Row 34px */
|
||||
--ks-grid-header-height: 36px; /* Grid Header 36px */
|
||||
--ks-content-max: 1440px; /* Viewport 기준 1440px */
|
||||
|
||||
/* KBX v60 Global Application Shell Standard Dimensions (§3) */
|
||||
--ks-shell-header-height: 56px; /* Global Header 56px */
|
||||
--ks-shell-sidebar-width: 220px; /* Side Nav Expanded 220px */
|
||||
--ks-shell-sidebar-collapsed: 56px; /* Side Nav Collapsed 56px */
|
||||
--ks-shell-tabs-height: 40px; /* Workspace Tabs 40px */
|
||||
--ks-shell-pageheader-height: 48px; /* Page Header 48px */
|
||||
--ks-shell-commandbar-height: 44px; /* Command Bar 44px */
|
||||
|
||||
--ks-focus-ring-width: 2px;
|
||||
--ks-focus-ring-offset: 1px;
|
||||
}
|
||||
|
||||
/* Dark Mode Theme Tokens */
|
||||
[data-theme='dark'] {
|
||||
--ks-color-surface: #0f172a;
|
||||
--ks-color-surface-raised: #1e293b;
|
||||
--ks-color-surface-overlay: rgba(15, 23, 42, 0.85);
|
||||
--ks-color-canvas: #090d16;
|
||||
--ks-color-text: #f8fafc;
|
||||
--ks-color-text-muted: #94a3b8;
|
||||
--ks-color-border: #334155;
|
||||
--ks-color-border-strong: #475569;
|
||||
|
||||
--ks-glass-bg: rgba(30, 41, 59, 0.75);
|
||||
--ks-glass-border: rgba(51, 65, 85, 0.6);
|
||||
--ks-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
|
||||
--ks-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
|
||||
--ks-shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
[data-density='compact'] {
|
||||
--ks-control-height: 2.25rem;
|
||||
--ks-grid-density: 2rem;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user