kjh2064/KArtSell.Aegis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(fe): optimize global design system tokens for ERP/OMS/WMS high-density workstation standard

Browse Source
This commit is contained in:
김재현
2026-08-15 21:04:09 +09:00
parent 81ff8da086
commit c819eb81d8
2 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/design-system/tokens.css
+33 -33
View File
@@ -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;
frontend/src/shared/shell/KsTabs.vue
+6 -6
View File
@@ -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);