// LIMS 设计 token —— 实验室青绿（#0d9488）体系
|
//
|
// 这里声明的 --el-color-primary 阶梯只是「首屏兜底」：
|
// 真正的运行时主色由 src/utils/theme.js 的 handleThemeStyle() 依据 src/settings.js 的 theme 值
|
// 以内联样式写到 <html> 上（内联样式优先级高于本文件），所以本文件与 settings.js 的取值必须一致，
|
// 否则挂载前会闪一下旧色。阶梯算法与 theme.js 完全一致：
|
// light-i = floor((255 - c) * i/10 + c)，dark-i = floor(c * (1 - i/10))
|
|
:root {
|
/* ---------- 主色 + 阶梯（= #0d9488） ---------- */
|
--el-color-primary: #0d9488;
|
--el-color-primary-light-1: #259e93;
|
--el-color-primary-light-2: #3da99f;
|
--el-color-primary-light-3: #55b4ab;
|
--el-color-primary-light-4: #6dbeb7;
|
--el-color-primary-light-5: #86c9c3;
|
--el-color-primary-light-6: #9ed4cf;
|
--el-color-primary-light-7: #b6dedb;
|
--el-color-primary-light-8: #cee9e7;
|
--el-color-primary-light-9: #e6f4f3;
|
--el-color-primary-dark-1: #0b857a;
|
--el-color-primary-dark-2: #0a766c;
|
--el-color-primary-dark-3: #09675f;
|
--el-color-primary-dark-4: #075851;
|
--el-color-primary-dark-5: #064a44;
|
--el-color-primary-dark-6: #053b36;
|
--el-color-primary-dark-7: #032c28;
|
--el-color-primary-dark-8: #021d1b;
|
--el-color-primary-dark-9: #010e0d;
|
|
/* ---------- 语义色（比 element-plus 默认略降饱和，贴合「素雅」） ---------- */
|
--el-color-success: #16a34a;
|
--el-color-warning: #d98b1c;
|
--el-color-danger: #e05252;
|
--el-color-error: #e05252;
|
--el-color-info: #6b7c85;
|
|
/* ---------- 表面 ---------- */
|
--lims-bg: #f6f8f8;
|
--lims-surface: #ffffff;
|
--lims-surface-2: #f3f7f6;
|
--lims-surface-hover: #f2f7f6;
|
|
/* ---------- 描边 / 分隔线 ---------- */
|
--lims-border: #e8edec;
|
--lims-divider: #f0f3f2;
|
|
/* ---------- 文字 ---------- */
|
--lims-text: #1f2d2b;
|
--lims-text-2: #5c6b69;
|
/* 比 text-2 浅一档但仍达 AA：#66777a 在白底 4.68:1（原 #93a3a1 仅 2.63:1） */
|
--lims-text-3: #66777a;
|
|
/* ---------- 圆角 / 阴影 ---------- */
|
--lims-radius-sm: 6px;
|
--lims-radius: 8px;
|
--lims-radius-lg: 12px;
|
--lims-shadow: 0 1px 2px rgba(16, 40, 38, 0.04), 0 1px 3px rgba(16, 40, 38, 0.06);
|
--lims-shadow-lg: 0 4px 12px rgba(16, 40, 38, 0.08);
|
|
/* ---------- 表格 ---------- */
|
--lims-table-head-bg: #f3f7f6;
|
--lims-table-head-text: #5c6b69;
|
|
/* ---------- 侧边栏（浅色：白底 + 青绿选中 + 左侧 3px 竖条） ---------- */
|
--sidebar-bg: #ffffff;
|
--sidebar-text: #5c6b69;
|
--sidebar-border: #eef1f1;
|
--sidebar-active-bg: #e4f2ef;
|
--sidebar-active-text: #0d9488;
|
--sidebar-sub-bg: #fafbfb;
|
--sidebar-sub-hover: #eef4f3;
|
|
/* ---------- element-plus 观感收口 ---------- */
|
--el-border-radius-base: 8px;
|
--el-border-radius-small: 6px;
|
--el-border-radius-round: 20px;
|
--el-border-color: #e8edec;
|
--el-border-color-light: #eef1f1;
|
--el-border-color-lighter: #f0f3f2;
|
--el-fill-color-light: #f3f7f6;
|
--el-fill-color-lighter: #f7fafa;
|
--el-text-color-primary: #1f2d2b;
|
--el-text-color-regular: #5c6b69;
|
--el-text-color-secondary: #66777a;
|
--el-box-shadow-light: 0 2px 8px rgba(16, 40, 38, 0.08);
|
--el-box-shadow: 0 4px 16px rgba(16, 40, 38, 0.1);
|
}
|
|
/* 暗色：只反转 LIMS 自有 token 与侧边栏，不动 element-plus 的暗色变量（EP 自带的暗色主题更完整） */
|
html.dark {
|
--lims-bg: #141414;
|
--lims-surface: #1d1e1f;
|
--lims-surface-2: #232324;
|
--lims-surface-hover: #2d2d2d;
|
|
--lims-border: #3a3a3a;
|
--lims-divider: #2c2c2c;
|
|
--lims-text: #e8e8e8;
|
--lims-text-2: #b0b0b0;
|
--lims-text-3: #8a8a8a;
|
|
--lims-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
--lims-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5);
|
|
--lims-table-head-bg: #232324;
|
--lims-table-head-text: #b0b0b0;
|
|
--sidebar-bg: #141414;
|
--sidebar-text: #d0d0d0;
|
--sidebar-border: #2c2c2c;
|
--sidebar-active-bg: #2d2d2d;
|
--sidebar-active-text: #2dd4bf;
|
--sidebar-sub-bg: #1a1a1a;
|
--sidebar-sub-hover: #2d2d2d;
|
}
|
