@kayak-sj/design 1.0.0

package/src/styles/tokens/_css-vars.scss

@@ -0,0 +1,232 @@
+/// 运行时 CSS 自定义属性 — 所有组件样式通过 var(--k-*) 消费，支持 data-theme 切换
+@use 'colors' as c;
+@use 'typography' as typo;
+@use 'layout' as layout;
+@use 'semantic' as sem;
+
+/// 依赖 --k-color-primary / --k-color-bg-surface 的派生色。
+/// 每个 data-theme 块在改完基础色后必须再 emit 一次：
+/// wujie 会把 :root 改写成 :host，派生色若只在 :host 上算一次，子树切主题后不会重算（斑马纹等会残留默认浅色）。
+@mixin emit-derived-primary-vars {
+  --k-color-primary-alpha-04: color-mix(in srgb, var(--k-color-primary) 4%, transparent);
+  --k-color-primary-alpha-06: color-mix(in srgb, var(--k-color-primary) 6%, transparent);
+  --k-color-primary-alpha-08: color-mix(in srgb, var(--k-color-primary) 8%, transparent);
+  --k-color-primary-alpha-12: color-mix(in srgb, var(--k-color-primary) 12%, transparent);
+  --k-color-primary-alpha-15: color-mix(in srgb, var(--k-color-primary) 15%, transparent);
+  --k-color-primary-alpha-30-shadow: color-mix(in srgb, var(--k-color-primary) 30%, transparent);
+  --k-color-primary-solid-1: color-mix(in srgb, var(--k-color-primary) 10%, var(--k-color-bg-surface));
+  --k-color-primary-solid-dot-4: color-mix(in srgb, var(--k-color-primary) 4%, var(--k-color-bg-surface));
+  --k-color-primary-solid-3: color-mix(in srgb, var(--k-color-primary) 30%, var(--k-color-bg-surface));
+  --k-color-primary-gradient-end: color-mix(in srgb, var(--k-color-primary) 80%, var(--k-color-bg-surface));
+
+  --k-layout-menu-hover-bg: var(--k-color-primary-alpha-08);
+  --k-layout-menu-active-bg: var(--k-color-primary-alpha-12);
+  --k-layout-header-menu-hover-bg: var(--k-color-primary-alpha-08);
+  --k-layout-header-menu-active-shadow: var(--k-color-primary-alpha-15);
+  --k-form-focus-ring: 0 0 0 2px var(--k-color-primary-alpha-10);
+}
+
+/// 将 SCSS 令牌写入 CSS 变量
+@mixin emit-theme-vars {
+  // ── 色板 ──
+  --k-color-primary: #{c.$color-primary};
+  --k-color-primary-hover: #{c.$link-hover-color};
+  --k-color-primary-active: color-mix(in srgb, var(--k-color-primary) 85%, black);
+  --k-color-primary-light: #{c.$color-primary-solid-1};
+  --k-color-primary-alpha-10: #{c.$color-primary-opacity-1};
+  --k-color-primary-alpha-30: #{c.$color-primary-opacity-3};
+
+  --k-color-text: #{c.$color-text};
+  --k-color-text-regular: #{c.$color-text-regular};
+  --k-color-text-secondary: #{c.$color-text-secondary};
+  --k-color-text-placeholder: #{sem.$color-text-placeholder};
+
+  --k-color-border: #{c.$color-border};
+  --k-color-border-light: #{c.$color-border-light};
+
+  --k-color-bg-page: #{sem.$color-bg-page};
+  --k-color-bg-surface: #{sem.$color-bg-surface};
+  --k-color-bg-muted: #{sem.$color-bg-muted};
+  --k-color-bg-hover: #{sem.$color-bg-hover};
+  @include emit-derived-primary-vars;
+
+  --k-color-success-hover: #{c.$color-success-hover};
+  --k-color-warning-hover: #{c.$color-warning-hover};
+  --k-color-danger-hover: #{c.$color-danger-hover};
+  --k-color-info-hover: #{c.$color-info-hover};
+
+  // ── 字体 ──
+  --k-font-family: #{typo.$font-family-base};
+  --k-font-size-base: #{typo.$font-size-base};
+  --k-font-size-md: #{typo.$font-size-medium};
+  --k-font-size-lg: #{typo.$font-size-large};
+  --k-font-weight-normal: 400;
+  --k-font-weight-medium: 500;
+
+  // ── 圆角 & 阴影 ──
+  --k-radius-sm: #{sem.$radius-sm};
+  --k-radius-md: #{sem.$radius-md};
+  --k-radius-lg: #{sem.$radius-lg};
+  --k-shadow-sm: #{sem.$shadow-sm};
+  --k-shadow-md: #{sem.$shadow-md};
+  --k-shadow-lg: #{sem.$shadow-lg};
+
+  // ── 布局 ──
+  --k-page-padding-x: #{layout.$page-content-padding-x};
+  --k-page-padding-y: #{layout.$page-content-padding-y};
+  --k-panel-radius: #{layout.$panel-radius};
+  --k-dialog-radius: #{layout.$dialog-radius};
+
+  // ── 表单 ──
+  --k-form-bg: var(--k-color-bg-surface);
+  --k-form-padding-x: #{sem.$form-padding-x};
+  --k-form-padding-y: #{sem.$form-padding-y};
+  --k-form-grid-gap-x: #{sem.$form-grid-gap-x};
+  --k-form-item-margin-bottom: #{sem.$form-item-margin-bottom};
+  --k-form-label-width: #{sem.$form-label-width};
+  --k-form-label-width-query: #{sem.$form-label-width-query};
+  --k-form-label-color: var(--k-color-text-regular);
+  --k-form-control-height: #{sem.$form-control-height};
+  --k-form-control-font-size: #{sem.$form-control-font-size};
+  --k-form-control-radius: var(--k-radius-sm);
+  --k-form-control-border: var(--k-color-border);
+  --k-form-control-bg: var(--k-color-bg-surface);
+  --k-form-control-max-width: #{sem.$form-control-max-width};
+  --k-form-textarea-max-width: #{sem.$form-textarea-max-width};
+
+  --k-form-query-col-width: #{sem.$form-query-col-width};
+  --k-form-query-range-col-width: #{sem.$form-query-range-col-width};
+  --k-form-query-daterange-col-width: #{sem.$form-query-daterange-col-width};
+  --k-form-query-range-min-width: #{sem.$form-query-range-min-width};
+  --k-form-query-daterange-min-width: #{sem.$form-query-daterange-min-width};
+  --k-form-datetime-range-min-width: #{sem.$form-datetime-range-min-width};
+  --k-form-datetime-min-width: #{sem.$form-datetime-min-width};
+  --k-form-query-gap: #{sem.$form-query-gap};
+  --k-form-query-row-gap: #{sem.$form-query-row-gap};
+
+  // ── 面板 ──
+  --k-panel-bg: var(--k-color-bg-surface);
+  --k-panel-shadow-hover: #{sem.$shadow-md};
+  --k-panel-header-height: #{sem.$panel-header-height};
+  --k-panel-header-font-size: #{sem.$panel-header-font-size};
+  --k-panel-header-color: var(--k-color-text-regular);
+  --k-panel-header-border: var(--k-color-border-light);
+  --k-panel-content-padding-x: #{sem.$panel-content-padding-x};
+  --k-panel-content-padding-y: #{sem.$panel-content-padding-y};
+  --k-panel-gap: #{sem.$panel-gap};
+
+  // ── 查询面板 ──
+  --k-panel-query-footer-gap: #{sem.$panel-query-footer-gap};
+  --k-panel-query-footer-padding-y: #{sem.$panel-query-footer-padding-y};
+  --k-panel-query-footer-padding-bottom: #{sem.$panel-query-footer-padding-bottom};
+  --k-panel-query-reset-color: var(--k-color-primary);
+  --k-panel-query-reset-border: var(--k-color-primary);
+
+  // ── 管理台壳层（cms-base AdminLayout）──
+  --k-layout-header-bg: var(--k-color-bg-surface);
+  --k-layout-sidebar-bg: var(--k-color-bg-surface);
+  --k-layout-sidebar-border: var(--k-color-border-light);
+  --k-layout-sidebar-shadow: var(--k-shadow-sm);
+  --k-layout-tags-bg: var(--k-color-bg-surface);
+  --k-layout-tags-item-color: var(--k-color-text-regular);
+  --k-layout-tags-item-bg: var(--k-color-bg-page);
+  --k-layout-tags-item-active-bg: var(--k-color-primary);
+  --k-layout-tags-item-active-color: #fff;
+  --k-layout-tags-item-max-width: 100px; // 页签最大宽度
+  --k-layout-logo-gradient-start: var(--k-color-bg-surface);
+  --k-layout-logo-gradient-end: var(--k-color-bg-muted);
+  --k-layout-menu-sub-bg: color-mix(in srgb, var(--k-color-bg-muted) 50%, transparent);
+
+  --k-handle-page-footer-reserve: 20px;
+
+  // ── 滚动条（中性灰、细滑块、无轨道；不用主题色）──
+  --k-scrollbar-size: 7px;
+  --k-scrollbar-thumb: color-mix(in srgb, var(--k-color-text-secondary) 22%, transparent);
+  --k-scrollbar-thumb-hover: color-mix(in srgb, var(--k-color-text-secondary) 42%, transparent);
+  --k-scrollbar-thumb-active: color-mix(in srgb, var(--k-color-text-secondary) 58%, transparent);
+
+  // ── 动效 ──
+  --k-transition-fast: #{sem.$transition-fast};
+  --k-transition-base: #{sem.$transition-base};
+}
+
+/// 默认主题（kayak_02）— 与 [data-theme='kayak'] 共用同一套变量
+:root,
+[data-theme='kayak'] {
+  @include emit-theme-vars;
+}
+
+/// 可选主题：专业蓝（Analytics Dashboard 色板）
+[data-theme='blue-pro'] {
+  --k-color-primary: #1e40af;
+  --k-color-primary-hover: #3b82f6;
+  --k-color-primary-active: #1e3a8a;
+  --k-color-primary-light: #dbeafe;
+  --k-color-primary-alpha-10: rgba(30, 64, 175, 0.1);
+  --k-color-primary-alpha-30: rgba(30, 64, 175, 0.3);
+
+  --k-color-text: #1e3a8a;
+  --k-color-text-regular: #334155;
+  --k-color-text-secondary: #64748b;
+
+  --k-color-bg-page: #f8fafc;
+  --k-color-bg-muted: #f1f5f9;
+
+  --k-panel-query-reset-color: var(--k-color-primary);
+  --k-panel-query-reset-border: var(--k-color-primary);
+
+  @include emit-derived-primary-vars;
+}
+
+/// 可选主题：深色模式 — 深海军蓝色板（带品牌蓝色相，避免死黑与高对比灰线）
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --k-color-primary: #45a8ff;
+  --k-color-primary-hover: #6fbcff;
+  --k-color-primary-active: #2b90ec;
+  --k-color-primary-light: rgba(69, 168, 255, 0.16);
+  --k-color-primary-alpha-10: rgba(69, 168, 255, 0.12);
+  --k-color-primary-alpha-30: rgba(69, 168, 255, 0.32);
+
+  --k-color-text: #e6edf6;
+  --k-color-text-regular: #b9c6d8;
+  --k-color-text-secondary: #7e90a8;
+  --k-color-text-placeholder: #566a84;
+
+  --k-color-border: #2b3a52;
+  --k-color-border-light: #223045;
+
+  --k-color-bg-page: #0c1322;
+  --k-color-bg-surface: #141d30;
+  --k-color-bg-muted: #1b2740;
+  --k-color-bg-hover: #24334e;
+
+  // 深色底影子要更重才有层次
+  --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --k-shadow-md: 0 2px 10px rgba(0, 0, 0, 0.45);
+  --k-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
+
+  --k-form-bg: var(--k-color-bg-surface);
+  --k-form-control-bg: color-mix(in srgb, var(--k-color-bg-muted) 72%, var(--k-color-bg-surface));
+  --k-form-control-border: var(--k-color-border);
+
+  --k-panel-bg: var(--k-color-bg-surface);
+  --k-panel-header-border: var(--k-color-border-light);
+
+  --k-layout-header-bg: #101828;
+  --k-layout-sidebar-bg: #101828;
+  --k-layout-sidebar-border: var(--k-color-border-light);
+  --k-layout-tags-bg: #101828;
+  --k-layout-tags-item-bg: var(--k-color-bg-muted);
+  --k-layout-tags-item-color: var(--k-color-text-regular);
+  --k-layout-logo-gradient-start: #101828;
+  --k-layout-logo-gradient-end: var(--k-color-bg-muted);
+  --k-layout-menu-sub-bg: rgba(8, 13, 24, 0.4);
+
+  --k-scrollbar-thumb: rgba(126, 144, 168, 0.28);
+  --k-scrollbar-thumb-hover: rgba(126, 144, 168, 0.45);
+  --k-scrollbar-thumb-active: rgba(126, 144, 168, 0.6);
+
+  @include emit-derived-primary-vars;
+}

package/src/styles/tokens/_index.scss

@@ -0,0 +1,5 @@
+/// @kayak-sj/design 设计令牌入口（kayak_02）
+@forward 'colors';
+@forward 'typography';
+@forward 'layout';
+@forward 'semantic';

package/src/styles/tokens/_layout.scss

@@ -0,0 +1,9 @@
+/// kayak_02 布局相关 token
+$layout-bg: #f4f9fe !default;
+$panel-radius: 6px !default;
+$dialog-radius: 12px !default;
+/// AdminLayout 内容区默认内边距
+$page-content-padding-x: 16px !default;
+$page-content-padding-y: 16px !default;
+/// KHandlePage 底部操作栏预留高度
+$handle-page-footer-reserve: 64px !default;

package/src/styles/tokens/_semantic.scss

@@ -0,0 +1,61 @@
+/// 语义化设计令牌（SCSS 层，供 _css-vars 与少量编译期场景使用）
+@use 'colors' as c;
+@use 'typography' as typo;
+@use 'layout' as layout;
+
+// ── 颜色语义 ──────────────────────────────────────────
+$color-bg-page: layout.$layout-bg !default;
+$color-bg-surface: c.$color-white !default;
+$color-bg-muted: #f5f7fa !default;
+$color-bg-hover: #f0f2f5 !default;
+$color-text-placeholder: #a8abb2 !default;
+
+// ── 圆角 ──────────────────────────────────────────────
+$radius-sm: 4px !default;
+$radius-md: 6px !default;
+$radius-lg: 8px !default;
+
+// ── 阴影 ──────────────────────────────────────────────
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04) !default;
+$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06) !default;
+$shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08) !default;
+
+// ── 表单 ──────────────────────────────────────────────
+$form-padding-x: 24px !default;
+$form-padding-y: 20px !default;
+$form-grid-gap-x: 24px !default;
+$form-item-margin-bottom: 20px !default;
+$form-label-width: 110px !default;
+$form-label-width-query: 120px !default;
+$form-control-height: 32px !default;
+$form-control-font-size: typo.$font-size-medium !default;
+$form-control-max-width: 300px !default;
+$form-textarea-max-width: 500px !default;
+
+$form-query-col-width: 320px !default;
+$form-query-range-col-width: 480px !default;
+// 日期区间（不含时分秒）无需完整宽度，比含时间的区间窄一些
+$form-query-daterange-col-width: 400px !default;
+$form-query-range-min-width: 350px !default;
+$form-query-daterange-min-width: 260px !default;
+/** 含时分秒区间：兜底宽度（实际以 fit-content + 输入框宽度为准） */
+$form-datetime-range-min-width: 320px !default;
+$form-datetime-min-width: 196px !default;
+$form-query-gap: 16px !default;
+$form-query-row-gap: 12px !default;
+
+// ── 面板 ──────────────────────────────────────────────
+$panel-header-height: 44px !default;
+$panel-header-font-size: typo.$font-size-medium !default;
+$panel-content-padding-x: 20px !default;
+$panel-content-padding-y: 16px !default;
+$panel-gap: 15px !default;
+
+// ── 查询面板 ──────────────────────────────────────────
+$panel-query-footer-gap: 12px !default;
+$panel-query-footer-padding-y: 16px !default;
+$panel-query-footer-padding-bottom: 20px !default;
+
+// ── 动效 ──────────────────────────────────────────────
+$transition-fast: 150ms ease !default;
+$transition-base: 200ms ease !default;

package/src/styles/tokens/_typography.scss

@@ -0,0 +1,6 @@
+/// kayak_02 字体与字号
+$font-family-base:
+  'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !default;
+$font-size-base: 12px !default;
+$font-size-medium: 14px !default;
+$font-size-large: 16px !default;

package/src/types/design-subpaths.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @kayak-sj/design 子路径垫片。
+ * package.json exports 指向 .scss，需在此声明副作用导入的类型。
+ */
+declare module '@kayak-sj/design/styles'
+
+declare module '@kayak-sj/design/styles/tokens'