kjh2064
b12fc7411d
- Create useFormFieldNavigation composable for Tab-like Enter behavior - KsTextField: Enter -> next field - KsTextArea: Ctrl+Enter for newline, Enter -> next field - KsSelect: Enter -> next field after selection - Implements standard form navigation pattern across input components
361 lines
13 KiB
CSS
361 lines
13 KiB
CSS
:root {
|
|
/* 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-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: #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);
|
|
|
|
/* KBX v60 ERP/OMS/WMS Ultra-Dense Spacing & Radius Standards */
|
|
--ks-space-1: 2px;
|
|
--ks-space-2: 6px; /* KBX 기본 간격 6px */
|
|
--ks-space-3: 8px;
|
|
--ks-space-4: 12px;
|
|
--ks-space-6: 16px;
|
|
--ks-space-8: 24px;
|
|
|
|
--ks-radius-sm: 3px; /* KBX Ultra-Dense Radius 3px */
|
|
--ks-radius-md: 3px;
|
|
--ks-radius-lg: 4px;
|
|
|
|
/* KBX v60 ERP/OMS/WMS Compact Typography Scale */
|
|
--ks-font-page: 16px; /* Page Title 16px */
|
|
--ks-line-page: 22px;
|
|
--ks-font-section: 14px; /* Section Heading 14px */
|
|
--ks-line-section: 18px;
|
|
--ks-font-body: 12px; /* Form / Body 12px */
|
|
--ks-line-body: 16px;
|
|
--ks-font-grid: 12px; /* Grid Data 12px */
|
|
--ks-line-grid: 16px;
|
|
--ks-font-caption: 11px; /* Caption / Helper 11px */
|
|
--ks-line-caption: 14px;
|
|
|
|
/* KBX v60 ERP/OMS/WMS Ultra-Dense Control & Layout Heights & Default Widths */
|
|
--ks-control-height: 28px; /* ERP/OMS Input Control 28px */
|
|
--ks-field-label-width: 72px; /* Standardized Inline Field Label Fixed Width 72px */
|
|
--ks-set-width-sm: 200px; /* Standardized Compact Field Set Width 200px */
|
|
--ks-set-width-md: 260px; /* Standardized Default Field Set Width 260px */
|
|
--ks-set-width-lg: 340px; /* Standardized Wide Field Set Width 340px */
|
|
--ks-control-width-select: 160px; /* Standard Select/Dropdown Default Width 160px */
|
|
--ks-control-width-search: 220px; /* Standard Search Input Default Width 220px */
|
|
--ks-control-width-date: 140px; /* Standard Date Field Default Width 140px */
|
|
|
|
--ks-grid-row-height: 28px; /* Ultra-Dense Grid Row 28px */
|
|
--ks-grid-header-height: 30px; /* Grid Header 30px */
|
|
--ks-content-max: 100%; /* Full Screen Utilization */
|
|
|
|
/* KBX v60 Shell Compact Dimensions */
|
|
--ks-shell-header-height: 38px; /* Global Header 38px */
|
|
--ks-shell-sidebar-width: 220px; /* Side Nav Expanded 220px (§5) */
|
|
--ks-shell-sidebar-collapsed: 56px; /* Side Nav Collapsed 56px (§5) */
|
|
--ks-shell-tabs-height: 32px; /* Workspace Tabs 32px */
|
|
--ks-shell-pageheader-height: 36px; /* Page Header 36px */
|
|
--ks-shell-commandbar-height: 34px; /* Command Bar 34px */
|
|
|
|
--ks-focus-ring-width: 2px;
|
|
--ks-focus-ring-offset: 1px;
|
|
|
|
/* Legacy & Shell Compatible Token Aliases */
|
|
--color-background-primary: var(--ks-color-canvas);
|
|
--color-background-secondary: var(--ks-color-surface);
|
|
--color-background-hover: var(--ks-color-neutral-100);
|
|
--color-background-active: var(--ks-color-neutral-200);
|
|
--color-text-primary: var(--ks-color-text);
|
|
--color-text-secondary: var(--ks-color-text-muted);
|
|
--color-border-primary: var(--ks-color-border);
|
|
--color-border-secondary: var(--ks-color-border-strong);
|
|
--color-primary-100: rgba(37, 99, 235, 0.1);
|
|
--color-primary-500: var(--ks-color-action);
|
|
--color-primary-600: var(--ks-color-action-hover);
|
|
--color-primary-700: #1e40af;
|
|
--color-danger-500: var(--ks-color-danger);
|
|
--color-danger-600: #b91c1c;
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
--spacing-1: var(--ks-space-1);
|
|
--spacing-2: var(--ks-space-2);
|
|
--spacing-3: var(--ks-space-3);
|
|
--spacing-4: var(--ks-space-4);
|
|
--spacing-5: 20px;
|
|
--spacing-6: var(--ks-space-6);
|
|
--border-radius-sm: var(--ks-radius-sm);
|
|
--border-radius-base: var(--ks-radius-md);
|
|
--border-radius-lg: var(--ks-radius-lg);
|
|
--font-size-xs: var(--ks-font-caption);
|
|
--font-size-sm: var(--ks-font-grid);
|
|
--font-size-base: var(--ks-font-body);
|
|
--font-size: var(--ks-font-body);
|
|
--input-height: var(--ks-control-height);
|
|
--transition-fast: var(--ks-transition-fast);
|
|
--transition-base: var(--ks-transition-smooth);
|
|
--transition-normal: var(--ks-transition-smooth);
|
|
--shadow-sm: var(--ks-shadow-sm);
|
|
--shadow-md: var(--ks-shadow-md);
|
|
--shadow-lg: var(--ks-shadow-lg);
|
|
|
|
/* KBX v60 High-End Elevation & Glassmorphism System */
|
|
--ks-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
|
|
--ks-shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
|
|
--ks-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
|
|
--ks-shadow-glow: 0 0 16px rgba(37, 99, 235, 0.25);
|
|
--ks-shadow-danger-glow: 0 0 16px rgba(220, 38, 38, 0.25);
|
|
|
|
--ks-glass-bg: rgba(255, 255, 255, 0.85);
|
|
--ks-glass-border: rgba(226, 232, 240, 0.8);
|
|
--ks-glass-backdrop: blur(12px);
|
|
|
|
/* Micro-animation Cubic Bezier Curves */
|
|
--ks-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
--ks-transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
/* 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);
|
|
--ks-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.35);
|
|
}
|
|
|
|
[data-density='compact'] {
|
|
--ks-control-height: 2.25rem;
|
|
--ks-grid-density: 2rem;
|
|
}
|
|
|
|
/* User Age-Tier Font Accessibility Scales (사용자 연령대별 폰트 크기 표준) */
|
|
/* 1) 청년/청장년층 (20~40대): 고밀도 정보 습득용 초고밀도 미세 폰트 */
|
|
[data-font-scale='compact'] {
|
|
--ks-font-page: 15px;
|
|
--ks-font-section: 13px;
|
|
--ks-font-body: 11px;
|
|
--ks-font-grid: 11px;
|
|
--ks-font-caption: 10px;
|
|
}
|
|
|
|
/* 2) 중장년층 (50대): 시인성 및 판독성이 확보된 표준 ERP 폰트 */
|
|
[data-font-scale='standard'] {
|
|
--ks-font-page: 17px;
|
|
--ks-font-section: 15px;
|
|
--ks-font-body: 13px;
|
|
--ks-font-grid: 13px;
|
|
--ks-font-caption: 11.5px;
|
|
}
|
|
|
|
/* 3) 시니어/고령층 (60대 이상): 가독성 최우선 대형 폰트 */
|
|
[data-font-scale='senior'] {
|
|
--ks-font-page: 20px;
|
|
--ks-font-section: 17px;
|
|
--ks-font-body: 15px;
|
|
--ks-font-grid: 15px;
|
|
--ks-font-caption: 13px;
|
|
}
|
|
|
|
/* AG Grid Global Theme & Density Standardization Rule (AG Grid 통일 규격) */
|
|
.ag-theme-quartz, .ag-theme-alpine, [class*="ag-theme-"], .ag-root-wrapper {
|
|
--ag-grid-size: 3px !important;
|
|
--ag-list-item-height: 28px !important;
|
|
--ag-header-height: 30px !important;
|
|
--ag-row-height: 28px !important;
|
|
--ag-font-size: var(--ks-font-grid) !important;
|
|
--ag-font-family: Inter, Pretendard, system-ui, -apple-system, sans-serif !important;
|
|
--ag-border-color: var(--ks-color-neutral-200) !important;
|
|
--ag-header-background-color: #f1f5f9 !important;
|
|
--ag-header-foreground-color: var(--ks-color-neutral-800) !important;
|
|
--ag-row-hover-color: #e0f2fe !important; /* Premium Sky Light Blue Hover */
|
|
--ag-selected-row-background-color: #dbeafe !important; /* Premium Active Selected Row Sky Blue (#dbeafe) */
|
|
--ag-odd-row-background-color: #f8fafc !important; /* KBX Odd Row Zebra Stripe Background (#f8fafc) */
|
|
--ag-background-color: #ffffff !important; /* Even Row Background (#ffffff) */
|
|
--ag-range-selection-border-color: #2563eb !important;
|
|
font-size: var(--ks-font-grid) !important;
|
|
}
|
|
|
|
/* AG Grid Dark Mode Theme Tokens Overrides */
|
|
[data-theme='dark'] .ag-theme-quartz,
|
|
[data-theme='dark'] .ag-theme-alpine,
|
|
[data-theme='dark'] [class*="ag-theme-"],
|
|
[data-theme='dark'] .ag-root-wrapper {
|
|
--ag-border-color: #334155 !important;
|
|
--ag-header-background-color: #1e293b !important;
|
|
--ag-header-foreground-color: #f8fafc !important;
|
|
--ag-row-hover-color: #334155 !important;
|
|
--ag-selected-row-background-color: #1e3a8a !important;
|
|
--ag-odd-row-background-color: #0f172a !important;
|
|
--ag-background-color: #090d16 !important;
|
|
}
|
|
|
|
.ag-header, .ag-header-row, .ag-header-cell {
|
|
background-color: #f1f5f9 !important; /* KBX Standard Premium Header Gray (#f1f5f9) */
|
|
color: var(--ks-color-neutral-800) !important;
|
|
font-weight: 700 !important;
|
|
font-size: var(--ks-font-grid) !important;
|
|
}
|
|
|
|
[data-theme='dark'] .ag-header,
|
|
[data-theme='dark'] .ag-header-row,
|
|
[data-theme='dark'] .ag-header-cell {
|
|
background-color: #1e293b !important;
|
|
color: #f8fafc !important;
|
|
}
|
|
|
|
.ag-header-cell {
|
|
border-right: 1px solid var(--ks-color-neutral-200) !important;
|
|
}
|
|
|
|
.ag-header {
|
|
border-bottom: 1px solid var(--ks-color-neutral-300) !important;
|
|
}
|
|
|
|
/* Odd row zebra stripe override for legacy/custom grid cells */
|
|
.ag-row-odd,
|
|
.ag-row-odd .ag-cell {
|
|
background-color: #f8fafc !important; /* Subtle Elegance Demarcation (#f8fafc) */
|
|
}
|
|
.ag-row-even,
|
|
.ag-row-even .ag-cell {
|
|
background-color: #ffffff !important;
|
|
}
|
|
.ag-row-selected,
|
|
.ag-row-selected .ag-cell,
|
|
.ag-row-selected .ag-cell-value {
|
|
background-color: #eff6ff !important; /* Soft Soft Tint Blue #eff6ff */
|
|
color: #0f172a !important; /* Ultra-High Contrast Dark Text #0f172a */
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
[data-theme='dark'] .ag-row-selected,
|
|
[data-theme='dark'] .ag-row-selected .ag-cell,
|
|
[data-theme='dark'] .ag-row-selected .ag-cell-value {
|
|
background-color: #1e3a8a !important;
|
|
color: #ffffff !important;
|
|
font-weight: 700 !important;
|
|
}
|
|
|
|
/* Raw Table Standard Grid Class for legacy fallback tables */
|
|
.grid-table, .kbx-grid-table, .models-table, .shadow-runs-table, .ks-grid-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--ks-font-grid);
|
|
background: var(--ks-color-surface);
|
|
border: 1px solid var(--ks-color-border-strong);
|
|
border-radius: var(--ks-radius-sm);
|
|
}
|
|
|
|
.grid-table th, .kbx-grid-table th, .models-table th, .shadow-runs-table th, .ks-grid-table th {
|
|
height: var(--ks-grid-header-height, 30px);
|
|
padding: 0 10px;
|
|
background-color: #f1f5f9;
|
|
border-bottom: 2px solid var(--ks-color-border-strong);
|
|
font-weight: 700;
|
|
text-align: left;
|
|
color: var(--ks-color-neutral-900);
|
|
}
|
|
|
|
[data-theme='dark'] .grid-table th,
|
|
[data-theme='dark'] .kbx-grid-table th,
|
|
[data-theme='dark'] .models-table th,
|
|
[data-theme='dark'] .shadow-runs-table th,
|
|
[data-theme='dark'] .ks-grid-table th {
|
|
background-color: #1e293b;
|
|
color: #f8fafc;
|
|
border-bottom: 2px solid #475569;
|
|
}
|
|
|
|
.grid-table td, .kbx-grid-table td, .models-table td, .shadow-runs-table td, .ks-grid-table td {
|
|
height: var(--ks-grid-row-height, 28px);
|
|
padding: 0 10px;
|
|
border-bottom: 1px solid var(--ks-color-border);
|
|
color: var(--ks-color-neutral-950);
|
|
box-sizing: border-border-box;
|
|
}
|
|
|
|
[data-theme='dark'] .grid-table td,
|
|
[data-theme='dark'] .kbx-grid-table td,
|
|
[data-theme='dark'] .models-table td,
|
|
[data-theme='dark'] .shadow-runs-table td,
|
|
[data-theme='dark'] .ks-grid-table td {
|
|
color: #f8fafc;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
|
|
/* Zebra Stripes & Hover & Selection Rules */
|
|
.grid-table tr:nth-child(even), .kbx-grid-table tr:nth-child(even), .ks-grid-table tr:nth-child(even) {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.grid-table tr:nth-child(odd), .kbx-grid-table tr:nth-child(odd), .ks-grid-table tr:nth-child(odd) {
|
|
background-color: #f8fafc;
|
|
}
|
|
|
|
[data-theme='dark'] .grid-table tr:nth-child(even),
|
|
[data-theme='dark'] .kbx-grid-table tr:nth-child(even),
|
|
[data-theme='dark'] .ks-grid-table tr:nth-child(even) {
|
|
background-color: #0f172a;
|
|
}
|
|
|
|
[data-theme='dark'] .grid-table tr:nth-child(odd),
|
|
[data-theme='dark'] .kbx-grid-table tr:nth-child(odd),
|
|
[data-theme='dark'] .ks-grid-table tr:nth-child(odd) {
|
|
background-color: #090d16;
|
|
}
|
|
|
|
.grid-table tr:hover, .kbx-grid-table tr:hover, .models-table tr:hover, .shadow-runs-table tr:hover, .ks-grid-table tr:hover, .ks-grid-row:hover {
|
|
background-color: #e0f2fe !important;
|
|
}
|
|
|
|
[data-theme='dark'] .grid-table tr:hover,
|
|
[data-theme='dark'] .kbx-grid-table tr:hover,
|
|
[data-theme='dark'] .models-table tr:hover,
|
|
[data-theme='dark'] .shadow-runs-table tr:hover,
|
|
[data-theme='dark'] .ks-grid-table tr:hover,
|
|
[data-theme='dark'] .ks-grid-row:hover {
|
|
background-color: #334155 !important;
|
|
}
|
|
|
|
.grid-table tr.selected, .ks-grid-table tr.selected, .ks-grid-row.selected {
|
|
background-color: #dbeafe !important;
|
|
color: #1e3a8a !important;
|
|
font-weight: 700;
|
|
}
|
|
|
|
|