kjh2064
889212d643
Add KbxQuantityField (increment/decrement spinner) + update index exports for all Phase 3.5–4 components (wrapper, form, specialized fields). Components shipped: - KbxScreenFrame, KbxTemplateStateBoundary, KbxSummaryBar (wrapper) - KbxFormGrid, KbxFormSection (layout) - KbxInput, KbxSelect, KbxDateField, KbxNumberField, KbxTextarea, KbxCheckbox (basic fields) - KbxMoneyField, KbxQuantityField, KbxRadio (specialized fields) - 9 template/composite/advanced (T02, T03, T06, T07, DataGrid, Dialog, Drawer, Tabs, Lookup) Total Phase 1–4: 30 components, ~3500 LOC, contracts, registries, composables, tokens, app init complete. Ready for page implementation using KbxScreenFrame wrapper pattern. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
193 lines
4.7 KiB
CSS
193 lines
4.7 KiB
CSS
/**
|
|
* @kbx Design Tokens — v60
|
|
* Color, spacing, typography, density
|
|
*/
|
|
|
|
:root {
|
|
/* Colors */
|
|
--kbx-color-primary: #3b82f6;
|
|
--kbx-color-success: #10b981;
|
|
--kbx-color-warning: #f59e0b;
|
|
--kbx-color-danger: #ef4444;
|
|
--kbx-color-info: #06b6d4;
|
|
|
|
/* Base Colors */
|
|
--kbx-color-surface: #ffffff;
|
|
--kbx-color-background: #f9fafb;
|
|
--kbx-color-border: #e5e7eb;
|
|
--kbx-color-text: #000000;
|
|
--kbx-color-text-muted: #6b7280;
|
|
--kbx-color-section-heading: #f9fafb;
|
|
|
|
/* Module Colors */
|
|
--kbx-color-module-accent: #3b82f6;
|
|
--kbx-module-oms: #3b82f6;
|
|
--kbx-module-erp: #a78bfa;
|
|
--kbx-module-wms: #14b8a6;
|
|
--kbx-module-common: #6b7280;
|
|
|
|
/* Light Tones (for backgrounds) */
|
|
--kbx-color-danger-light: #fee2e2;
|
|
--kbx-color-warning-light: #fef3c7;
|
|
--kbx-color-success-light: #dcfce7;
|
|
--kbx-color-info-light: #cffafe;
|
|
|
|
/* Spacing */
|
|
--kbx-space-1: 4px;
|
|
--kbx-space-2: 8px;
|
|
--kbx-space-3: 12px;
|
|
--kbx-space-4: 16px;
|
|
--kbx-space-5: 20px;
|
|
--kbx-space-6: 24px;
|
|
|
|
/* Typography */
|
|
--kbx-font-family: system-ui, -apple-system, sans-serif;
|
|
--kbx-font-xs: 12px;
|
|
--kbx-font-sm: 13px;
|
|
--kbx-font-base: 14px;
|
|
--kbx-font-lg: 16px;
|
|
--kbx-font-xl: 18px;
|
|
--kbx-font-2xl: 20px;
|
|
|
|
/* Line Heights */
|
|
--kbx-line-height-tight: 1.4;
|
|
--kbx-line-height-normal: 1.5;
|
|
--kbx-line-height-relaxed: 1.6;
|
|
|
|
/* Component Heights (compact density) */
|
|
--kbx-control-xs: 28px;
|
|
--kbx-control-sm: 32px;
|
|
--kbx-control-md: 36px;
|
|
--kbx-control-lg: 44px;
|
|
|
|
/* Grid Row Height */
|
|
--kbx-grid-row-height: 34px;
|
|
--kbx-grid-header-height: 36px;
|
|
|
|
/* Master/Detail Grid */
|
|
--kbx-master-list-min-width: 280px;
|
|
--kbx-master-list-compact-width: 32%;
|
|
|
|
/* Borders */
|
|
--kbx-border-width: 1px;
|
|
--kbx-border-radius: 4px;
|
|
|
|
/* Shadows */
|
|
--kbx-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--kbx-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--kbx-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
--kbx-shadow-shell: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
/* Transitions */
|
|
--kbx-transition-fast: 0.15s ease;
|
|
--kbx-transition-base: 0.2s ease;
|
|
--kbx-transition-slow: 0.3s ease;
|
|
|
|
/* Density: compact (default) */
|
|
--kbx-density: compact;
|
|
--kbx-input-height: 34px;
|
|
--kbx-input-padding: 8px 12px;
|
|
--kbx-touch-target: 44px;
|
|
--kbx-font-size: 14px;
|
|
}
|
|
|
|
/* Comfortable Density */
|
|
:root[data-density="comfortable"] {
|
|
--kbx-input-height: 36px;
|
|
--kbx-input-padding: 10px 12px;
|
|
--kbx-control-md: 40px;
|
|
--kbx-grid-row-height: 36px;
|
|
--kbx-touch-target: 48px;
|
|
--kbx-font-size: 14px;
|
|
}
|
|
|
|
/* Touch Density (WMS/Mobile) */
|
|
:root[data-density="touch"] {
|
|
--kbx-input-height: 48px;
|
|
--kbx-input-padding: 12px 16px;
|
|
--kbx-control-md: 52px;
|
|
--kbx-grid-row-height: 48px;
|
|
--kbx-touch-target: 52px;
|
|
--kbx-font-size: 16px;
|
|
}
|
|
|
|
/* Dark Mode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--kbx-color-surface: #1f2937;
|
|
--kbx-color-background: #111827;
|
|
--kbx-color-border: #374151;
|
|
--kbx-color-text: #f9fafb;
|
|
--kbx-color-text-muted: #d1d5db;
|
|
--kbx-color-section-heading: #111827;
|
|
|
|
--kbx-color-danger-light: #7f1d1d;
|
|
--kbx-color-warning-light: #92400e;
|
|
--kbx-color-success-light: #15803d;
|
|
--kbx-color-info-light: #0c4a6e;
|
|
}
|
|
}
|
|
|
|
/* Explicit Dark Theme Override */
|
|
:root[data-theme="dark"] {
|
|
--kbx-color-surface: #1f2937;
|
|
--kbx-color-background: #111827;
|
|
--kbx-color-border: #374151;
|
|
--kbx-color-text: #f9fafb;
|
|
--kbx-color-text-muted: #d1d5db;
|
|
--kbx-color-section-heading: #111827;
|
|
|
|
--kbx-color-danger-light: #7f1d1d;
|
|
--kbx-color-warning-light: #92400e;
|
|
--kbx-color-success-light: #15803d;
|
|
--kbx-color-info-light: #0c4a6e;
|
|
}
|
|
|
|
/* Light Theme Override */
|
|
:root[data-theme="light"] {
|
|
--kbx-color-surface: #ffffff;
|
|
--kbx-color-background: #f9fafb;
|
|
--kbx-color-border: #e5e7eb;
|
|
--kbx-color-text: #000000;
|
|
--kbx-color-text-muted: #6b7280;
|
|
--kbx-color-section-heading: #f9fafb;
|
|
|
|
--kbx-color-danger-light: #fee2e2;
|
|
--kbx-color-warning-light: #fef3c7;
|
|
--kbx-color-success-light: #dcfce7;
|
|
--kbx-color-info-light: #cffafe;
|
|
}
|
|
|
|
/* Global Base Styles */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--kbx-font-family);
|
|
font-size: var(--kbx-font-size);
|
|
line-height: var(--kbx-line-height-normal);
|
|
color: var(--kbx-color-text);
|
|
background: var(--kbx-color-background);
|
|
transition: color var(--kbx-transition-fast), background var(--kbx-transition-fast);
|
|
}
|
|
|
|
/* Focus Visible (Accessibility) */
|
|
:focus-visible {
|
|
outline: 2px solid var(--kbx-color-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Forced Colors Mode (High Contrast) */
|
|
@media (forced-colors: active) {
|
|
:root {
|
|
--kbx-color-primary: CanvasText;
|
|
--kbx-color-text: CanvasText;
|
|
--kbx-color-border: CanvasText;
|
|
}
|
|
|
|
button {
|
|
border: 1px solid CanvasText;
|
|
}
|
|
}
|