@kayak-sj/design 1.0.0

package/src/styles/element-plus/_overrides.scss

@@ -0,0 +1,451 @@
+/// Element Plus 全局组件补丁
+/// 裸 el-table 使用默认灰表头；KTable 内由 _k-table.scss 覆盖为 kayak 主题
+
+// ── 表格 ──────────────────────────────────────────────
+.el-table {
+  font-size: var(--k-font-size-base);
+  color: var(--k-color-text-regular);
+  border-radius: var(--k-radius-md) var(--k-radius-md) 0 0;
+  overflow: hidden;
+
+  thead {
+    color: var(--k-color-text-regular);
+
+    th.el-table__cell {
+      background-color: var(--k-color-bg-muted);
+    }
+  }
+
+  td.el-table__cell {
+    color: var(--k-color-text-regular);
+  }
+}
+
+.el-table__fixed::before,
+.el-table__fixed-right::before {
+  background-color: transparent;
+}
+
+// ── 按钮 ──────────────────────────────────────────────
+.el-button {
+  --el-button-text-color: var(--k-color-text-regular);
+  --el-button-bg-color: var(--k-color-bg-surface);
+  --el-button-border-color: var(--k-color-border);
+  --el-button-hover-text-color: var(--k-color-primary);
+  --el-button-hover-bg-color: var(--k-color-primary-alpha-08);
+  --el-button-hover-border-color: var(--k-color-primary-hover);
+  --el-button-active-text-color: var(--k-color-primary);
+  --el-button-active-border-color: var(--k-color-primary);
+  --el-button-active-bg-color: var(--k-color-primary-alpha-12);
+  --el-button-outline-color: var(--k-color-primary-alpha-30);
+
+  border-radius: var(--k-radius-sm);
+  font-size: var(--k-font-size-md);
+  transition:
+    background-color var(--k-transition-fast),
+    border-color var(--k-transition-fast),
+    color var(--k-transition-fast);
+
+  &:hover,
+  &:focus {
+    color: var(--el-button-hover-text-color);
+    border-color: var(--el-button-hover-border-color);
+    background-color: var(--el-button-hover-bg-color);
+  }
+
+  &:active {
+    color: var(--el-button-active-text-color);
+    border-color: var(--el-button-active-border-color);
+    background-color: var(--el-button-active-bg-color);
+  }
+
+  &--primary {
+    --el-button-text-color: #fff;
+    --el-button-bg-color: var(--k-color-primary);
+    --el-button-border-color: var(--k-color-primary);
+    --el-button-hover-text-color: #fff;
+    --el-button-hover-bg-color: var(--k-color-primary-hover);
+    --el-button-hover-border-color: var(--k-color-primary-hover);
+    --el-button-active-text-color: #fff;
+    --el-button-active-bg-color: var(--el-color-primary-dark-2);
+    --el-button-active-border-color: var(--el-color-primary-dark-2);
+    --el-button-disabled-text-color: #fff;
+    --el-button-disabled-bg-color: color-mix(in srgb, var(--k-color-primary) 45%, var(--k-color-bg-surface));
+    --el-button-disabled-border-color: color-mix(in srgb, var(--k-color-primary) 45%, var(--k-color-bg-surface));
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      background-color: var(--k-color-primary-hover);
+      border-color: var(--k-color-primary-hover);
+    }
+
+    &:active {
+      color: #fff;
+      background-color: var(--el-color-primary-dark-2);
+      border-color: var(--el-color-primary-dark-2);
+    }
+  }
+
+  &--success {
+    --el-button-hover-bg-color: var(--k-color-success-hover);
+    --el-button-hover-border-color: var(--k-color-success-hover);
+  }
+
+  &--warning {
+    --el-button-hover-bg-color: var(--k-color-warning-hover);
+    --el-button-hover-border-color: var(--k-color-warning-hover);
+  }
+
+  &--danger {
+    --el-button-hover-bg-color: var(--k-color-danger-hover);
+    --el-button-hover-border-color: var(--k-color-danger-hover);
+    --el-button-hover-text-color: var(--k-color-primary-light);
+  }
+
+  &--info {
+    --el-button-hover-bg-color: var(--k-color-info-hover);
+    --el-button-hover-border-color: var(--k-color-info-hover);
+  }
+
+  &.is-text,
+  &.is-link {
+    --el-button-hover-text-color: var(--k-color-primary-hover);
+    --el-button-hover-bg-color: transparent;
+  }
+}
+
+// ── 表单控件 ──────────────────────────────────────────
+.el-input,
+.el-select,
+.el-textarea,
+.el-date-editor,
+.el-cascader,
+.el-tree-select,
+.el-autocomplete {
+  font-size: var(--k-form-control-font-size);
+}
+
+// 同步 EP 字体变量，避免后置样式把 inherit / var(--el-font-size-base) 解析回 12px
+.el-input,
+.el-textarea,
+.el-date-editor {
+  --el-font-size-base: var(--k-form-control-font-size);
+}
+
+// Select 触发器与弹出层解耦（teleport 到 body），需在两侧同步 EP 字体变量
+.el-select {
+  --el-font-size-base: var(--k-form-control-font-size);
+  --el-select-font-size: var(--k-form-control-font-size);
+  --el-select-input-font-size: var(--k-form-control-font-size);
+  --el-input-text-color: var(--k-color-text);
+}
+
+// 日期范围内部 input 直接用 var(--el-font-size-base)，需与表单字号对齐
+.el-date-editor .el-range-input,
+.el-date-editor .el-range-separator {
+  font-size: var(--k-form-control-font-size);
+}
+
+.el-input__wrapper,
+.el-select__wrapper,
+.el-textarea__inner {
+  border-radius: var(--k-form-control-radius);
+  background-color: var(--k-form-control-bg);
+  box-shadow: 0 0 0 1px var(--k-form-control-border) inset;
+  font-size: var(--k-form-control-font-size);
+  transition: box-shadow var(--k-transition-fast);
+
+  &:hover {
+    box-shadow: 0 0 0 1px var(--k-color-text-secondary) inset;
+  }
+
+  &.is-focus,
+  &.is-focused {
+    box-shadow:
+      0 0 0 1px var(--k-color-primary) inset,
+      var(--k-form-focus-ring);
+  }
+}
+
+.el-input__inner,
+.el-select__input,
+.el-textarea .el-textarea__inner,
+.el-select__placeholder,
+.el-select__selected-item {
+  font-size: var(--k-form-control-font-size);
+  color: var(--k-color-text);
+}
+
+// EP 单选选中值也渲染在 .el-select__placeholder，仅 is-transparent 时为占位符态
+.el-select__placeholder.is-transparent {
+  color: var(--k-color-text-placeholder);
+}
+
+.el-input__inner::placeholder,
+.el-textarea__inner::placeholder {
+  color: var(--k-color-text-placeholder);
+}
+
+// 下拉 / 级联 / 日期等弹出层（teleport 到 body，需全局覆盖）
+// 覆写 --el-font-size-base，使 EP 内置 font-size: var(--el-font-size-base) 也解析为表单字号
+.el-popper.el-select__popper,
+.el-select-dropdown,
+.el-cascader__dropdown,
+.el-picker-panel,
+.el-autocomplete-suggestion,
+.el-tree-select__popper {
+  --el-font-size-base: var(--k-form-control-font-size);
+  --el-select-font-size: var(--k-form-control-font-size);
+  font-size: var(--k-form-control-font-size);
+}
+
+.el-popper.el-select__popper .el-select-dropdown__item,
+.el-select-dropdown .el-select-dropdown__item,
+.el-cascader-node__label,
+.el-autocomplete-suggestion__wrap li {
+  font-size: var(--k-form-control-font-size);
+}
+
+.el-select-dropdown__item {
+  height: 34px;
+  line-height: 34px;
+}
+
+.k-form-scroll-select__dropdown {
+  font-size: var(--k-form-control-font-size);
+
+  .el-select-dropdown__item {
+    font-size: var(--k-form-control-font-size);
+  }
+}
+
+.el-form-item__label {
+  color: var(--k-form-label-color);
+  font-size: var(--k-form-control-font-size);
+}
+
+// ── 树（权限树 / TreeSelect 下拉内嵌树）────────────────
+.el-tree,
+.el-tree-select {
+  --el-font-size-base: var(--k-form-control-font-size);
+  --el-tree-node-content-height: var(--k-form-control-height);
+  font-size: var(--k-form-control-font-size);
+  color: var(--k-color-text-regular);
+
+  .el-tree-node__label,
+  .el-checkbox,
+  .el-checkbox__label {
+    font-size: var(--k-form-control-font-size);
+  }
+
+  .el-checkbox {
+    --el-font-size-base: var(--k-form-control-font-size);
+    --el-checkbox-font-size: var(--k-form-control-font-size);
+  }
+}
+
+.el-form-item.is-error {
+  .el-input__wrapper,
+  .el-select__wrapper,
+  .el-textarea__inner {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+  }
+}
+
+// ── 单选 / 复选 ──────────────────────────────────────
+.el-radio__input.is-checked .el-radio__inner,
+.el-checkbox__input.is-checked .el-checkbox__inner {
+  background-color: var(--k-color-primary);
+  border-color: var(--k-color-primary);
+}
+
+.el-radio__input.is-checked + .el-radio__label,
+.el-checkbox__input.is-checked + .el-checkbox__label {
+  color: var(--k-color-primary);
+}
+
+.el-radio__label,
+.el-checkbox__label {
+  font-size: var(--k-form-control-font-size);
+}
+
+.el-radio {
+  margin-right: 20px;
+}
+
+// ── 卡片 ──────────────────────────────────────────────
+.el-card {
+  border-radius: var(--k-radius-md);
+  border-color: var(--k-color-border-light);
+  background: var(--k-color-bg-surface);
+
+  &__header {
+    font-size: var(--k-font-size-md);
+    font-weight: var(--k-font-weight-medium);
+    color: var(--k-color-text);
+    border-bottom-color: var(--k-color-border-light);
+    padding: 14px var(--k-form-padding-x);
+  }
+
+  &__body {
+    padding: var(--k-form-padding-y) var(--k-form-padding-x);
+  }
+}
+
+// ── 折叠面板 ──────────────────────────────────────────
+.el-collapse {
+  border-color: var(--k-color-border-light);
+
+  &-item__header {
+    color: var(--k-panel-header-color);
+    background: var(--k-panel-bg);
+  }
+
+  &-item__wrap {
+    background: var(--k-panel-bg);
+    border-color: var(--k-color-border-light);
+  }
+}
+
+// ── 菜单（侧栏 / 顶栏）──────────────────────────────────
+.el-menu {
+  --el-menu-active-color: var(--k-color-primary);
+  --el-menu-hover-bg-color: var(--k-color-primary-alpha-08);
+  --el-menu-bg-color: transparent;
+  --el-menu-text-color: var(--k-color-text-regular);
+}
+
+// ── 分页 ──────────────────────────────────────────────
+.el-pagination {
+  --el-pagination-hover-color: var(--k-color-primary);
+}
+
+.el-pagination.is-background .el-pager li.is-active {
+  background-color: var(--k-color-primary);
+}
+
+// ── 滚动条（el-scrollbar 覆盖层，对齐 legacy Element UI 滚动体验）────
+.el-scrollbar__bar {
+  // z-index: 20;
+
+  &.is-vertical {
+    width: var(--k-scrollbar-size);
+    right: 2px;
+  }
+
+  &.is-horizontal {
+    height: var(--k-scrollbar-size);
+    bottom: 2px;
+  }
+}
+
+.el-scrollbar__thumb {
+  border-radius: 100px;
+  background-color: var(--k-scrollbar-thumb);
+  opacity: 1;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--k-scrollbar-thumb-hover);
+  }
+
+  &:active {
+    background-color: var(--k-scrollbar-thumb-active);
+  }
+}
+
+// ── 消息 ──────────────────────────────────────────────
+.el-message {
+  z-index: 3000;
+}
+
+.el-message-box {
+  --el-messagebox-content-font-size: var(--k-form-control-font-size);
+}
+
+// ── Tab（页内分段导航）────────────────
+.el-tabs {
+  --el-tabs-header-height: 44px;
+
+  background-color: var(--k-color-bg-surface);
+
+  .el-tabs__header {
+    margin: 0;
+    padding: 0px 20px 0;
+    background-color: var(--k-color-bg-surface);
+    // border-bottom: 1px solid var(--k-color-border-light);
+  }
+
+  // 隐藏 EP 默认底部分割线，改由 header border 承担
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+
+  .el-tabs__nav {
+    margin-left: 0;
+  }
+
+  .el-tabs__item {
+    position: relative;
+    height: var(--el-tabs-header-height);
+    line-height: var(--el-tabs-header-height);
+    padding: 0 2px;
+    margin-right: 32px;
+    font-size: 15px;
+    font-weight: var(--k-font-weight-medium);
+    color: var(--k-color-text-secondary);
+    transition: color var(--k-transition-fast);
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &:hover {
+      color: var(--k-color-primary);
+    }
+
+    &.is-active {
+      color: var(--k-color-text);
+      font-weight: 600;
+    }
+  }
+
+  // 复用 EP active-bar 的位移动画，内部 ::after 绘制固定宽度短指示条
+  .el-tabs__active-bar {
+    height: 3px;
+    background-color: transparent;
+    border-radius: 0;
+    transition:
+      transform var(--k-transition-base),
+      width var(--k-transition-base);
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+      width: 38px;
+      height: 3px;
+      border-radius: 3px 3px 0 0;
+      background-color: var(--k-color-primary);
+    }
+  }
+
+  .el-tabs__content {
+    overflow: visible;
+  }
+}
+
+.el-dialog {
+  --el-dialog-padding-primary: 0px !important;
+  .el-dialog__header {
+    padding: 16px 16px 6px 16px;
+    // border-bottom: 1px solid var(--k-color-border-light);
+  }
+  .el-dialog__footer {
+    padding: 10px 16px;
+    border-top: 1px solid var(--k-color-border-light);
+  }
+}

package/src/styles/element-plus/_theme.scss

@@ -0,0 +1,127 @@
+/// Element Plus CSS 变量覆盖 — 桥接 kayak 设计令牌
+:root,
+[data-theme='kayak'] {
+  --el-color-primary: var(--k-color-primary);
+  --el-color-primary-light-3: var(--k-color-primary-hover);
+  --el-color-primary-light-5: color-mix(in srgb, var(--k-color-primary) 50%, var(--k-color-bg-surface));
+  --el-color-primary-light-7: color-mix(in srgb, var(--k-color-primary) 30%, var(--k-color-bg-surface));
+  --el-color-primary-light-8: color-mix(in srgb, var(--k-color-primary) 20%, var(--k-color-bg-surface));
+  --el-color-primary-light-9: color-mix(in srgb, var(--k-color-primary) 10%, var(--k-color-bg-surface));
+  --el-color-primary-dark-2: color-mix(in srgb, var(--k-color-primary) 85%, black);
+
+  --el-font-size-base: var(--k-font-size-base);
+  --el-font-size-small: var(--k-font-size-base);
+  --el-font-family: var(--k-font-family);
+  --el-text-color-primary: var(--k-color-text);
+  --el-text-color-regular: var(--k-color-text-regular);
+  --el-text-color-secondary: var(--k-color-text-secondary);
+  --el-text-color-placeholder: var(--k-color-text-placeholder);
+  --el-border-color: var(--k-color-border);
+  --el-border-color-light: var(--k-color-border-light);
+  --el-border-radius-base: var(--k-radius-sm);
+  --el-border-radius-round: 20px;
+  --el-fill-color-blank: var(--k-color-bg-surface);
+  --el-bg-color: var(--k-color-bg-surface);
+  --el-bg-color-page: var(--k-color-bg-page);
+}
+
+[data-theme='blue-pro'] {
+  --el-color-primary-rgb: 30, 64, 175;
+  --el-color-primary-light-3: var(--k-color-primary-hover);
+  --el-color-primary-light-5: color-mix(in srgb, var(--k-color-primary) 50%, var(--k-color-bg-surface));
+  --el-color-primary-light-7: color-mix(in srgb, var(--k-color-primary) 30%, var(--k-color-bg-surface));
+  --el-color-primary-light-8: color-mix(in srgb, var(--k-color-primary) 20%, var(--k-color-bg-surface));
+  --el-color-primary-light-9: color-mix(in srgb, var(--k-color-primary) 10%, var(--k-color-bg-surface));
+  --el-color-primary-dark-2: color-mix(in srgb, var(--k-color-primary) 85%, black);
+}
+
+// 深色模式：应用只引入 EP 浅色 CSS，这里把 EP 内部消费的填充 / 边框 / 遮罩 / 禁用态
+// 等变量整体桥接到深色令牌，否则悬停行、下拉、禁用控件等会残留浅色底。
+[data-theme='dark'] {
+  --el-color-primary-rgb: 69, 168, 255;
+  --el-color-primary-light-3: var(--k-color-primary-hover);
+  --el-color-primary-light-5: color-mix(in srgb, var(--k-color-primary) 50%, var(--k-color-bg-surface));
+  --el-color-primary-light-7: color-mix(in srgb, var(--k-color-primary) 30%, var(--k-color-bg-surface));
+  --el-color-primary-light-8: color-mix(in srgb, var(--k-color-primary) 20%, var(--k-color-bg-surface));
+  --el-color-primary-light-9: color-mix(in srgb, var(--k-color-primary) 10%, var(--k-color-bg-surface));
+  --el-color-primary-dark-2: color-mix(in srgb, var(--k-color-primary) 85%, white);
+
+  // 功能色的浅色阶（tag / alert / message 的底与边框）在深色底改为向深色混合
+  --el-color-success-light-9: color-mix(in srgb, var(--el-color-success) 12%, var(--k-color-bg-surface));
+  --el-color-success-light-8: color-mix(in srgb, var(--el-color-success) 22%, var(--k-color-bg-surface));
+  --el-color-success-light-7: color-mix(in srgb, var(--el-color-success) 32%, var(--k-color-bg-surface));
+  --el-color-success-light-5: color-mix(in srgb, var(--el-color-success) 50%, var(--k-color-bg-surface));
+  --el-color-success-light-3: color-mix(in srgb, var(--el-color-success) 70%, var(--k-color-bg-surface));
+  --el-color-warning-light-9: color-mix(in srgb, var(--el-color-warning) 12%, var(--k-color-bg-surface));
+  --el-color-warning-light-8: color-mix(in srgb, var(--el-color-warning) 22%, var(--k-color-bg-surface));
+  --el-color-warning-light-7: color-mix(in srgb, var(--el-color-warning) 32%, var(--k-color-bg-surface));
+  --el-color-warning-light-5: color-mix(in srgb, var(--el-color-warning) 50%, var(--k-color-bg-surface));
+  --el-color-warning-light-3: color-mix(in srgb, var(--el-color-warning) 70%, var(--k-color-bg-surface));
+  --el-color-danger-light-9: color-mix(in srgb, var(--el-color-danger) 12%, var(--k-color-bg-surface));
+  --el-color-danger-light-8: color-mix(in srgb, var(--el-color-danger) 22%, var(--k-color-bg-surface));
+  --el-color-danger-light-7: color-mix(in srgb, var(--el-color-danger) 32%, var(--k-color-bg-surface));
+  --el-color-danger-light-5: color-mix(in srgb, var(--el-color-danger) 50%, var(--k-color-bg-surface));
+  --el-color-danger-light-3: color-mix(in srgb, var(--el-color-danger) 70%, var(--k-color-bg-surface));
+  --el-color-error-light-9: var(--el-color-danger-light-9);
+  --el-color-error-light-8: var(--el-color-danger-light-8);
+  --el-color-info-light-9: color-mix(in srgb, var(--el-color-info) 12%, var(--k-color-bg-surface));
+  --el-color-info-light-8: color-mix(in srgb, var(--el-color-info) 22%, var(--k-color-bg-surface));
+  --el-color-info-light-7: color-mix(in srgb, var(--el-color-info) 32%, var(--k-color-bg-surface));
+  --el-color-info-light-5: color-mix(in srgb, var(--el-color-info) 50%, var(--k-color-bg-surface));
+  --el-color-info-light-3: color-mix(in srgb, var(--el-color-info) 70%, var(--k-color-bg-surface));
+
+  // 背景 / 填充
+  --el-bg-color: var(--k-color-bg-surface);
+  --el-bg-color-page: var(--k-color-bg-page);
+  --el-bg-color-overlay: #1a2539;
+  --el-fill-color-blank: var(--k-color-bg-surface);
+  --el-fill-color: var(--k-color-bg-muted);
+  --el-fill-color-light: var(--k-color-bg-muted);
+  --el-fill-color-lighter: color-mix(in srgb, var(--k-color-bg-muted) 60%, var(--k-color-bg-surface));
+  --el-fill-color-extra-light: color-mix(in srgb, var(--k-color-bg-muted) 35%, var(--k-color-bg-surface));
+  --el-fill-color-dark: var(--k-color-bg-hover);
+  --el-fill-color-darker: color-mix(in srgb, var(--k-color-bg-hover) 80%, white);
+
+  // 边框
+  --el-border-color: var(--k-color-border);
+  --el-border-color-light: var(--k-color-border-light);
+  --el-border-color-lighter: var(--k-color-border-light);
+  --el-border-color-extra-light: color-mix(in srgb, var(--k-color-border-light) 60%, transparent);
+  --el-border-color-dark: color-mix(in srgb, var(--k-color-border) 80%, white);
+  --el-border-color-darker: color-mix(in srgb, var(--k-color-border) 65%, white);
+  --el-border-color-hover: var(--k-color-text-secondary);
+
+  // 文本 / 禁用态
+  --el-text-color-primary: var(--k-color-text);
+  --el-text-color-regular: var(--k-color-text-regular);
+  --el-text-color-secondary: var(--k-color-text-secondary);
+  --el-text-color-placeholder: var(--k-color-text-placeholder);
+  --el-text-color-disabled: var(--k-color-text-placeholder);
+  --el-disabled-bg-color: color-mix(in srgb, var(--k-color-bg-muted) 55%, var(--k-color-bg-surface));
+  --el-disabled-text-color: var(--k-color-text-placeholder);
+  --el-disabled-border-color: var(--k-color-border-light);
+
+  // 遮罩 / 阴影
+  --el-mask-color: rgba(4, 8, 16, 0.65);
+  --el-mask-color-extra-light: rgba(4, 8, 16, 0.35);
+  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.36), 0 8px 20px rgba(0, 0, 0, 0.32);
+  --el-box-shadow-light: 0 0 12px rgba(0, 0, 0, 0.4);
+  --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.4);
+  --el-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.48), 0 12px 32px rgba(0, 0, 0, 0.4);
+
+  // 表格
+  --el-table-border-color: var(--k-color-border-light);
+  --el-table-header-bg-color: var(--k-color-bg-muted);
+  --el-table-tr-bg-color: var(--k-color-bg-surface);
+  --el-table-row-hover-bg-color: var(--k-color-bg-hover);
+  --el-table-current-row-bg-color: var(--k-color-primary-alpha-12);
+  --el-table-expanded-cell-bg-color: var(--k-color-bg-surface);
+  --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.5);
+  --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.5);
+}
+
+/// 默认主题 RGB（供 Element Plus 透明度计算）
+:root,
+[data-theme='kayak'] {
+  --el-color-primary-rgb: 0, 160, 233;
+}

package/src/styles/index.scss

@@ -0,0 +1,16 @@
+/**
+ * @kayak-sj/design 全局样式入口（kayak_02 主题）
+ *
+ * 使用方式（在 element-plus/dist/index.css 之后引入）：
+ *   import '@kayak-sj/design/styles'
+ *
+ * 主题切换：在 <html> 或 <body> 上设置 data-theme
+ *   - 默认 kayak_02（:root）
+ *   - data-theme="blue-pro"  专业蓝
+ *   - data-theme="dark"      深色模式
+ */
+@use './tokens/css-vars';
+@use './element-plus/theme';
+@use './element-plus/overrides';
+@use './base/utilities';
+@use './components';

package/src/styles/tokens/_colors.scss

@@ -0,0 +1,39 @@
+@use 'sass:color';
+
+/// kayak_02 主题色板（对齐 legacy themes/kayak_02/var.scss）
+$color-primary: #00a0e9 !default;
+$color-white: #fff !default;
+$color-text: #303133 !default;
+$color-text-regular: #606266 !default;
+$color-text-secondary: #909399 !default;
+$color-border: #dcdfe6 !default;
+$color-border-light: #e9e9e9 !default;
+
+$link-color: $color-primary !default;
+$link-hover-color: color.mix($color-white, $link-color, 20%) !default;
+
+$color-success-hover: color.mix($color-white, #67c23a, 20%) !default;
+$color-warning-hover: color.mix($color-white, #e6a23c, 20%) !default;
+$color-danger-hover: color.mix($color-white, #f56c6c, 20%) !default;
+$color-info-hover: color.mix($color-white, #909399, 20%) !default;
+
+@function primary-alpha($opacity) {
+  @return color.change($color-primary, $alpha: $opacity);
+}
+
+/// 主色按透明度叠在白色上的实色等价（fixed 列等场景无法用 rgba 时使用）
+@function primary-solid($opacity) {
+  @return color.mix($color-primary, $color-white, $opacity * 100%);
+}
+
+$color-primary-opacity-dot-4: primary-alpha(0.04) !default;
+$color-primary-opacity-1: primary-alpha(0.1) !default;
+$color-primary-opacity-3: primary-alpha(0.3) !default;
+
+$color-primary-solid-dot-4: primary-solid(0.04) !default;
+$color-primary-solid-1: primary-solid(0.1) !default;
+$color-primary-solid-3: primary-solid(0.3) !default;
+
+/// 登录页局部强调色（legacy login.vue 独立配置，非全局主色）
+$login-accent: #3591ff !default;
+$login-accent-hover: color.mix($color-white, $login-accent, 10%) !default;