V13-FE-011: finalize search list layout slice

docs/Design/kbx-foundation-v36/packages/kbx-ui/src/tokens/kbx.css

@@ -0,0 +1,182 @@
+: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-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: 1180px;
+  --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;
+
+}
+
+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;
+}