From c819eb81d824dbc59ad6af1e44581c5afb4d9999 Mon Sep 17 00:00:00 2001 From: kjh2064 Date: Sat, 15 Aug 2026 21:04:09 +0900 Subject: [PATCH] style(fe): optimize global design system tokens for ERP/OMS/WMS high-density workstation standard --- frontend/src/design-system/tokens.css | 66 +++++++++++++-------------- frontend/src/shared/shell/KsTabs.vue | 12 ++--- 2 files changed, 39 insertions(+), 39 deletions(-) diff --git a/frontend/src/design-system/tokens.css b/frontend/src/design-system/tokens.css index 4963fcbb..c2c2e9ab 100644 --- a/frontend/src/design-system/tokens.css +++ b/frontend/src/design-system/tokens.css @@ -33,43 +33,43 @@ --ks-color-border-strong: var(--ks-color-neutral-300); --ks-color-warning-border: var(--ks-color-warning); - /* 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; + /* 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: 4px; /* KBX v60 기본 Radius 4px */ - --ks-radius-md: 4px; - --ks-radius-lg: 6px; + --ks-radius-sm: 3px; /* KBX Ultra-Dense Radius 3px */ + --ks-radius-md: 3px; + --ks-radius-lg: 4px; - /* 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 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 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 ERP/OMS/WMS Ultra-Dense Control & Layout Heights */ + --ks-control-height: 28px; /* ERP/OMS Input Control 28px */ + --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 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 */ + /* KBX v60 Shell Compact Dimensions */ + --ks-shell-header-height: 38px; /* Global Header 38px */ + --ks-shell-sidebar-width: 200px; /* Side Nav Expanded 200px */ + --ks-shell-sidebar-collapsed: 44px; /* Side Nav Collapsed 44px */ + --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; diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue index f87a642d..e56f1f36 100644 --- a/frontend/src/shared/shell/KsTabs.vue +++ b/frontend/src/shared/shell/KsTabs.vue @@ -123,12 +123,12 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId .ks-tabs__tab { display: flex; align-items: center; - gap: var(--ks-space-2); - padding: 0 var(--ks-space-3); - height: 32px; - width: 160px; - min-width: 160px; - max-width: 160px; + gap: var(--ks-space-1); + padding: 0 var(--ks-space-2); + height: 26px; + width: 150px; + min-width: 150px; + max-width: 150px; background-color: var(--ks-color-neutral-100); border: 1px solid var(--ks-color-border); border-radius: var(--ks-radius-sm);