V13-FE-006: consolidate approved UI and contract hardening
This commit is contained in:
+312
@@ -0,0 +1,312 @@
|
||||
:root {
|
||||
/* Primitive tokens */
|
||||
--kbx-font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
|
||||
--kbx-font-xs: 12px;
|
||||
--kbx-font-sm: 13px;
|
||||
--kbx-font-md: 14px;
|
||||
--kbx-font-lg: 16px;
|
||||
--kbx-font-xl: 18px;
|
||||
--kbx-font-2xl: 20px;
|
||||
--kbx-white: #ffffff;
|
||||
--kbx-gray-25: #fcfcfd;
|
||||
--kbx-gray-50: #f9fafb;
|
||||
--kbx-gray-100: #f2f4f7;
|
||||
--kbx-gray-200: #e4e7ec;
|
||||
--kbx-gray-300: #d0d5dd;
|
||||
--kbx-gray-400: #98a2b3;
|
||||
--kbx-gray-500: #667085;
|
||||
--kbx-gray-700: #344054;
|
||||
--kbx-gray-900: #101828;
|
||||
--kbx-blue-600: #175cd3;
|
||||
--kbx-green-600: #039855;
|
||||
--kbx-orange-500: #f79009;
|
||||
--kbx-red-600: #d92d20;
|
||||
--kbx-space-0: 0;
|
||||
--kbx-space-1: 4px;
|
||||
--kbx-space-2: 8px;
|
||||
--kbx-space-3: 12px;
|
||||
--kbx-space-4: 16px;
|
||||
--kbx-space-5: 20px;
|
||||
--kbx-space-6: 24px;
|
||||
--kbx-space-8: 32px;
|
||||
--kbx-space-10: 40px;
|
||||
--kbx-space-12: 48px;
|
||||
--kbx-radius-sm: 4px;
|
||||
--kbx-radius-md: 6px;
|
||||
--kbx-radius-lg: 8px;
|
||||
--kbx-border-width: 1px;
|
||||
--kbx-accent-border-width: 4px;
|
||||
--kbx-radius-pill: 999px;
|
||||
|
||||
/* Semantic tokens */
|
||||
--kbx-color-surface: var(--kbx-white);
|
||||
--kbx-color-surface-muted: var(--kbx-gray-50);
|
||||
--kbx-color-surface-subtle: var(--kbx-gray-100);
|
||||
--kbx-color-surface-hover: #f3f7fd;
|
||||
--kbx-color-text: #1d2939;
|
||||
--kbx-color-text-muted: var(--kbx-gray-500);
|
||||
--kbx-color-border: var(--kbx-gray-200);
|
||||
--kbx-color-border-strong: var(--kbx-gray-400);
|
||||
--kbx-color-primary: var(--kbx-blue-600);
|
||||
--kbx-color-success: var(--kbx-green-600);
|
||||
--kbx-color-warning: var(--kbx-orange-500);
|
||||
--kbx-color-danger: var(--kbx-red-600);
|
||||
--kbx-color-focus: #1570ef;
|
||||
--kbx-color-overlay: rgba(16, 24, 40, .38);
|
||||
--kbx-color-workspace: #f5f7fa;
|
||||
--kbx-color-shell-chrome: #ffffff;
|
||||
--kbx-color-navigation-surface: #fbfcfe;
|
||||
--kbx-color-section-heading: #f7f9fc;
|
||||
--kbx-color-module-accent: var(--kbx-blue-600);
|
||||
--kbx-color-module-accent-surface: #eff8ff;
|
||||
--kbx-color-module-accent-border: #b2ddff;
|
||||
--kbx-shadow-shell: 0 1px 2px rgba(16,24,40,.05);
|
||||
--kbx-color-info-surface: #eff8ff;
|
||||
--kbx-color-info-border: #b2ddff;
|
||||
--kbx-color-success-surface: #ecfdf3;
|
||||
--kbx-color-success-border: #abefc6;
|
||||
--kbx-color-warning-surface: #fffaeb;
|
||||
--kbx-color-warning-border: #fedf89;
|
||||
--kbx-color-warning-text: #b54708;
|
||||
--kbx-color-danger-surface: #fef3f2;
|
||||
--kbx-color-danger-border: #fecdca;
|
||||
--kbx-color-changed-surface: var(--kbx-color-info-surface);
|
||||
--kbx-color-changed-border: #84adff;
|
||||
--kbx-color-ai-surface: #f4f3ff;
|
||||
--kbx-color-ai-border: #c3b5fd;
|
||||
--kbx-color-ai-text: #5925dc;
|
||||
--kbx-shadow-overlay: 0 16px 40px rgba(16,24,40,.18);
|
||||
--kbx-z-runtime-panel: 120;
|
||||
--kbx-visually-hidden-size: 1px;
|
||||
|
||||
/* Component tokens */
|
||||
--kbx-control-height: 34px;
|
||||
--kbx-grid-row-height: 34px;
|
||||
--kbx-grid-header-height: 36px;
|
||||
--kbx-page-header-height: 48px;
|
||||
--kbx-command-bar-height: 44px;
|
||||
--kbx-label-width: 96px;
|
||||
--kbx-control-touch: 52px;
|
||||
--kbx-control-xs: 28px;
|
||||
--kbx-control-sm: 32px;
|
||||
--kbx-control-md: 36px;
|
||||
--kbx-control-lg: 40px;
|
||||
--kbx-textarea-min-height: 96px;
|
||||
--kbx-checkbox-size: 16px;
|
||||
--kbx-checkbox-track: 24px;
|
||||
--kbx-screen-inline-padding: 12px;
|
||||
--kbx-screen-section-gap: 8px;
|
||||
--kbx-content-min-height: 240px;
|
||||
--kbx-master-list-min-width: 240px;
|
||||
--kbx-master-list-compact-width: 280px;
|
||||
--kbx-master-width: 42%;
|
||||
--kbx-master-detail-min-height: 360px;
|
||||
--kbx-master-detail-bottom-min-height: 160px;
|
||||
--kbx-master-detail-master-min-sm: 320px;
|
||||
--kbx-master-detail-master-min-md: 380px;
|
||||
--kbx-master-detail-master-min-lg: 460px;
|
||||
--kbx-side-nav-width: 220px;
|
||||
--kbx-side-nav-collapsed-width: 56px;
|
||||
--kbx-home-max-width: 1280px;
|
||||
--kbx-home-search-max-width: 520px;
|
||||
--kbx-home-header-min-height: 72px;
|
||||
--kbx-home-attention-height: 44px;
|
||||
--kbx-home-link-height: 36px;
|
||||
--kbx-home-module-column: 56px;
|
||||
--kbx-home-module-header-height: 44px;
|
||||
--kbx-tooltip-max-width: 320px;
|
||||
--kbx-access-max-width: 480px;
|
||||
--kbx-wms-mobile-max-width: 520px;
|
||||
--kbx-wms-header-min-height: 64px;
|
||||
--kbx-data-state-min-height: 160px;
|
||||
--kbx-grid-toolbar-height: 36px;
|
||||
--kbx-grid-min-height: 320px;
|
||||
--kbx-lookup-code-width: 110px;
|
||||
--kbx-lookup-name-min-width: 120px;
|
||||
--kbx-lookup-button-width: 54px;
|
||||
--kbx-search-control-min-width: 130px;
|
||||
--kbx-search-control-sm-width: 130px;
|
||||
--kbx-search-control-lg-width: 240px;
|
||||
--kbx-command-separator-height: 20px;
|
||||
--kbx-template-context-min-height: 34px;
|
||||
--kbx-progress-step-height: 40px;
|
||||
--kbx-progress-step-number-size: 22px;
|
||||
--kbx-menu-search-top: 80px;
|
||||
--kbx-menu-search-width: 620px;
|
||||
--kbx-menu-search-result-height: 46px;
|
||||
--kbx-app-shell-min-height: 600px;
|
||||
--kbx-runtime-panel-top: 60px;
|
||||
--kbx-runtime-panel-width: 420px;
|
||||
--kbx-workspace-tabs-height: 40px;
|
||||
--kbx-workspace-tab-height: 36px;
|
||||
--kbx-workspace-tab-max-width: 220px;
|
||||
--kbx-workspace-overflow-width: 180px;
|
||||
--kbx-template-refresh-height: 30px;
|
||||
--kbx-home-quick-start-min-height: 36px;
|
||||
--kbx-shell-notice-height: 34px;
|
||||
--kbx-home-module-label-width: 56px;
|
||||
--kbx-utility-panel-width: 420px;
|
||||
--kbx-form-section-gap: 16px;
|
||||
--kbx-form-section-heading-gap: 8px;
|
||||
--kbx-form-section-heading-padding: 6px;
|
||||
--kbx-form-grid-column-gap: 18px;
|
||||
--kbx-form-grid-row-gap: 10px;
|
||||
--kbx-home-workbench-row-height: 40px;
|
||||
--kbx-home-source-label-width: 68px;
|
||||
--kbx-navigation-security-notice-height: 36px;
|
||||
--kbx-global-header-module-selector-width: 92px;
|
||||
--kbx-import-drop-min-height: 250px;
|
||||
--kbx-import-source-column-min-width: 160px;
|
||||
--kbx-import-target-column-min-width: 220px;
|
||||
--kbx-import-reason-column-min-width: 130px;
|
||||
--kbx-import-mapping-name-width: 200px;
|
||||
--kbx-summary-item-min-width: 120px;
|
||||
--kbx-import-error-row-width: 70px;
|
||||
--kbx-import-error-field-width: 160px;
|
||||
--kbx-wms-scan-box-min-height: 84px;
|
||||
--kbx-wms-manual-button-width: 72px;
|
||||
|
||||
}
|
||||
|
||||
[data-kbx-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--kbx-color-surface: #111827;
|
||||
--kbx-color-surface-muted: #0b1220;
|
||||
--kbx-color-surface-subtle: #172033;
|
||||
--kbx-color-surface-hover: #182943;
|
||||
--kbx-color-text: #e5e7eb;
|
||||
--kbx-color-text-muted: #94a3b8;
|
||||
--kbx-color-border: #334155;
|
||||
--kbx-color-border-strong: #64748b;
|
||||
--kbx-color-primary: #60a5fa;
|
||||
--kbx-color-success: #34d399;
|
||||
--kbx-color-warning: #fbbf24;
|
||||
--kbx-color-danger: #fb7185;
|
||||
--kbx-color-focus: #93c5fd;
|
||||
--kbx-color-overlay: rgba(2, 6, 23, .68);
|
||||
--kbx-color-info-surface: #102a43;
|
||||
--kbx-color-info-border: #285b8f;
|
||||
--kbx-color-success-surface: #062e24;
|
||||
--kbx-color-success-border: #166534;
|
||||
--kbx-color-warning-surface: #33270b;
|
||||
--kbx-color-warning-border: #854d0e;
|
||||
--kbx-color-warning-text: #fcd34d;
|
||||
--kbx-color-danger-surface: #3b1118;
|
||||
--kbx-color-danger-border: #9f1239;
|
||||
--kbx-color-changed-surface: #102a43;
|
||||
--kbx-color-changed-border: #3b82f6;
|
||||
--kbx-color-ai-surface: #241b45;
|
||||
--kbx-color-ai-border: #6d5bd0;
|
||||
--kbx-color-ai-text: #c4b5fd;
|
||||
--kbx-shadow-overlay: 0 18px 48px rgba(0,0,0,.42);
|
||||
--kbx-color-workspace: #0a1020;
|
||||
--kbx-color-shell-chrome: #111827;
|
||||
--kbx-color-navigation-surface: #0d1524;
|
||||
--kbx-color-section-heading: #151f31;
|
||||
--kbx-color-module-accent: #84adff;
|
||||
--kbx-color-module-accent-surface: #102a43;
|
||||
--kbx-color-module-accent-border: #285b8f;
|
||||
--kbx-shadow-shell: 0 1px 2px rgba(0,0,0,.42);
|
||||
}
|
||||
|
||||
[data-kbx-module="OMS"] {
|
||||
--kbx-color-module-accent: #175cd3;
|
||||
--kbx-color-module-accent-surface: #eff8ff;
|
||||
--kbx-color-module-accent-border: #b2ddff;
|
||||
}
|
||||
|
||||
[data-kbx-theme="dark"] [data-kbx-module="OMS"] {
|
||||
--kbx-color-module-accent: #84adff;
|
||||
--kbx-color-module-accent-surface: #102a43;
|
||||
--kbx-color-module-accent-border: #285b8f;
|
||||
}
|
||||
|
||||
[data-kbx-module="ERP"] {
|
||||
--kbx-color-module-accent: #6938ef;
|
||||
--kbx-color-module-accent-surface: #f4f3ff;
|
||||
--kbx-color-module-accent-border: #d9d6fe;
|
||||
}
|
||||
|
||||
[data-kbx-theme="dark"] [data-kbx-module="ERP"] {
|
||||
--kbx-color-module-accent: #b9a2ff;
|
||||
--kbx-color-module-accent-surface: #241b45;
|
||||
--kbx-color-module-accent-border: #6d5bd0;
|
||||
}
|
||||
|
||||
[data-kbx-module="WMS"] {
|
||||
--kbx-color-module-accent: #087e8b;
|
||||
--kbx-color-module-accent-surface: #ecfdff;
|
||||
--kbx-color-module-accent-border: #a5f0fc;
|
||||
}
|
||||
|
||||
[data-kbx-theme="dark"] [data-kbx-module="WMS"] {
|
||||
--kbx-color-module-accent: #63c5da;
|
||||
--kbx-color-module-accent-surface: #0d2f36;
|
||||
--kbx-color-module-accent-border: #1f6672;
|
||||
}
|
||||
|
||||
[data-kbx-module="COMMON"] {
|
||||
--kbx-color-module-accent: #475467;
|
||||
--kbx-color-module-accent-surface: #f2f4f7;
|
||||
--kbx-color-module-accent-border: #d0d5dd;
|
||||
}
|
||||
|
||||
[data-kbx-theme="dark"] [data-kbx-module="COMMON"] {
|
||||
--kbx-color-module-accent: #b3b8c4;
|
||||
--kbx-color-module-accent-surface: #172033;
|
||||
--kbx-color-module-accent-border: #475467;
|
||||
}
|
||||
|
||||
html, body, button, input, select, textarea {
|
||||
font-family: var(--kbx-font-family);
|
||||
}
|
||||
|
||||
[data-kbx-density="comfortable"] {
|
||||
--kbx-control-height: 38px;
|
||||
--kbx-grid-row-height: 40px;
|
||||
--kbx-grid-header-height: 40px;
|
||||
}
|
||||
|
||||
[data-kbx-density="touch"] {
|
||||
--kbx-control-height: 52px;
|
||||
--kbx-grid-row-height: 52px;
|
||||
--kbx-grid-header-height: 48px;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--kbx-color-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
:root, [data-kbx-theme="light"], [data-kbx-theme="dark"] {
|
||||
--kbx-color-surface: Canvas;
|
||||
--kbx-color-surface-muted: Canvas;
|
||||
--kbx-color-surface-subtle: Canvas;
|
||||
--kbx-color-surface-hover: Highlight;
|
||||
--kbx-color-text: CanvasText;
|
||||
--kbx-color-text-muted: CanvasText;
|
||||
--kbx-color-border: ButtonBorder;
|
||||
--kbx-color-border-strong: CanvasText;
|
||||
--kbx-color-primary: LinkText;
|
||||
--kbx-color-success: CanvasText;
|
||||
--kbx-color-warning: CanvasText;
|
||||
--kbx-color-danger: CanvasText;
|
||||
--kbx-color-focus: Highlight;
|
||||
--kbx-color-info-surface: Canvas;
|
||||
--kbx-color-success-surface: Canvas;
|
||||
--kbx-color-warning-surface: Canvas;
|
||||
--kbx-color-danger-surface: Canvas;
|
||||
--kbx-color-ai-surface: Canvas;
|
||||
--kbx-color-module-accent: Highlight;
|
||||
--kbx-color-module-accent-surface: Canvas;
|
||||
--kbx-color-module-accent-border: Highlight;
|
||||
--kbx-color-workspace: Canvas;
|
||||
--kbx-color-shell-chrome: Canvas;
|
||||
--kbx-color-navigation-surface: Canvas;
|
||||
--kbx-color-section-heading: Canvas;
|
||||
--kbx-shadow-shell: none;
|
||||
--kbx-shadow-overlay: none;
|
||||
}
|
||||
:focus-visible { outline-color: Highlight; }
|
||||
}
|
||||
+1291
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user