/* ========================================================================= * td-tokens.css * * tdesign-vue-next 全局 token 桥接层。 * * 加载顺序（HTML 中固定，与 inject-shell.js 输出一致）： * vendor/tdesign-vue-next/tdesign.min.css ← tdesign 官方默认 token * css/td-tokens.css ← 本文件，覆盖品牌色 / 圆角 / 阴影 * css/shell-modern.css ← shell-modern 作用域骨架 * css/shell-tdesign.css ← sidebar/topbar 专用主题桥接 * * 设计原则： * - 仅声明、不渲染；不出现具体选择器（.btn/.modal 等留给 tdesign 与 * shell-modern.css 处理） * - 与 admin-style.css L1276+ 的 `--erp-*` 标准对齐：色板、圆角、阴影同源 * - 主品牌色 #123C8F 与 sidebar active / topbar chip hover 三处一致 * - 不在此文件覆盖 sidebar/topbar 的暗色 token —— 那由 shell-tdesign.css * 负责，作用域更小 * ======================================================================= */ :root { /* ---------------------------------------------------------------------- * 1. 品牌主色 — #123C8F（项目深蓝） * * tdesign 默认按 8 级（1 浅 → 10 深）派生品牌色阶。这里基于 #123C8F 反推： * 1 #EAF1FB 2 #EAF1FB 3 #EAF1FB 4 #2F67C7 5 #2F67C7 * 6 #1A4CAA 7 #123C8F 8 #0E3278 9 #0A275E 10 #0A275E * -------------------------------------------------------------------- */ --td-brand-color-1: #EAF1FB; --td-brand-color-2: #EAF1FB; --td-brand-color-3: #EAF1FB; --td-brand-color-4: #2F67C7; --td-brand-color-5: #2F67C7; --td-brand-color-6: #1A4CAA; --td-brand-color-7: #123C8F; /* === 主品牌色 === */ --td-brand-color-8: #0E3278; --td-brand-color-9: #0A275E; --td-brand-color-10: #0A275E; /* tdesign 语义级（直接被组件消费） */ --td-brand-color: var(--td-brand-color-7); --td-brand-color-hover: var(--td-brand-color-6); /* hover 提亮一档 */ --td-brand-color-focus: var(--td-brand-color-2); /* focus ring 浅底 */ --td-brand-color-active: var(--td-brand-color-8); /* active 加深一档 */ --td-brand-color-disabled: var(--td-brand-color-3); --td-brand-color-light: var(--td-brand-color-1); --td-brand-color-light-active: var(--td-brand-color-2); /* ---------------------------------------------------------------------- * 2. 文字色 — 与 admin-style.css L1276 ERP standard 对齐 * -------------------------------------------------------------------- */ --td-text-color-primary: #0F172A; /* 标题、关键字段 */ --td-text-color-secondary: #334155; /* 正文 */ --td-text-color-placeholder: #64748B; /* 占位、辅助 */ --td-text-color-disabled: #64748B; --td-text-color-anti: #F8FAFC; /* 反色文字（深底用） */ --td-text-color-brand: var(--td-brand-color); /* ---------------------------------------------------------------------- * 3. 背景色 — 页面/容器/分组层 * -------------------------------------------------------------------- */ --td-bg-color-page: #F8FAFC; /* 页面背景 = --erp-bg */ --td-bg-color-container: #F8FAFC; /* 卡片/Modal 容器 */ --td-bg-color-container-hover: #F8FAFC; --td-bg-color-container-active: #EAF1FB; --td-bg-color-container-select: var(--td-brand-color-1); --td-bg-color-secondarycontainer: #F8FAFC; /* 次级容器 = --erp-surface-soft */ --td-bg-color-secondarycontainer-hover: #EAF1FB; --td-bg-color-secondarycontainer-active: #EAF1FB; --td-bg-color-component: #F8FAFC; /* 默认按钮、tag 默认底 */ --td-bg-color-component-hover: #CBD5E1; --td-bg-color-component-active: #CBD5E1; --td-bg-color-component-disabled: #F8FAFC; --td-bg-color-specialcomponent: #F8FAFC; /* ---------------------------------------------------------------------- * 4. 边框 / 分割线 * -------------------------------------------------------------------- */ --td-border-level-1-color: #CBD5E1; /* 极淡 */ --td-border-level-2-color: #CBD5E1; /* 标准 = --erp-line */ --td-component-stroke: #CBD5E1; /* 组件描边 */ --td-component-border: #CBD5E1; /* input/select border */ /* ---------------------------------------------------------------------- * 5. 状态色 * -------------------------------------------------------------------- */ --td-success-color: #22C55E; --td-success-color-hover: #22C55E; --td-success-color-active: #22C55E; --td-success-color-disabled: #22C55E; --td-success-color-light: #F8FAFC; --td-success-color-light-active: #EAF1FB; --td-warning-color: #F59E0B; --td-warning-color-hover: #F59E0B; --td-warning-color-active: #F59E0B; --td-warning-color-disabled: #F59E0B; --td-warning-color-light: #F8FAFC; --td-warning-color-light-active: #EAF1FB; --td-error-color: #EF4444; --td-error-color-hover: #EF4444; --td-error-color-active: #EF4444; --td-error-color-disabled: #EF4444; --td-error-color-light: #F8FAFC; --td-error-color-light-active: #EAF1FB; /* ---------------------------------------------------------------------- * 6. 圆角 — 项目统一 8px 标准；大圆角 12px 用于卡片/Modal * -------------------------------------------------------------------- */ --td-radius-small: 4px; --td-radius-default: 8px; /* = --erp-radius，input/button/tag */ --td-radius-medium: 8px; --td-radius-large: 12px; /* 卡片、Dialog */ --td-radius-extraLarge: 16px; --td-radius-round: 9999px; --td-radius-circle: 50%; /* ---------------------------------------------------------------------- * 7. 阴影 — 与 admin-style.css L1290 --erp-shadow 对齐 * -------------------------------------------------------------------- */ --td-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02); --td-shadow-2: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04); --td-shadow-3: 0 12px 32px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04); --td-shadow-inset-top: inset 0 .5px 0 #CBD5E1; --td-shadow-inset-right: inset -.5px 0 0 #CBD5E1; --td-shadow-inset-bottom: inset 0 -.5px 0 #CBD5E1; --td-shadow-inset-left: inset .5px 0 0 #CBD5E1; /* ---------------------------------------------------------------------- * 8. 字体 — 系统字体栈（保留 admin-style.css 的字体偏好） * -------------------------------------------------------------------- */ --td-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --td-font-family-medium: var(--td-font-family); --td-font-family-navigation: var(--td-font-family); /* 产品界面字重角色：正文保持常规，强调只留给标题与关键数据。 */ --td-font-weight-light: 300; --td-font-weight-regular: 400; --td-font-weight-medium: 500; --td-font-weight-semibold: 600; --td-font-weight-bold: 700; /* ---------------------------------------------------------------------- * 9. 字号 — tdesign 1.x 默认字阶（与 medium size 对齐） * -------------------------------------------------------------------- */ --td-font-size-link-small: 12px; --td-font-size-link-medium: 14px; --td-font-size-link-large: 16px; --td-font-size-mark-small: 12px; --td-font-size-mark-medium: 14px; --td-font-size-mark-large: 16px; --td-font-size-base-small: 12px; --td-font-size-base-medium: 14px; /* 正文标准 */ --td-font-size-base-large: 16px; --td-font-size-headline-small: 16px; --td-font-size-headline-medium: 18px; --td-font-size-headline-large: 20px; --td-font-size-title-small: 14px; --td-font-size-title-medium: 16px; --td-font-size-title-large: 18px; --td-font-size-body-small: 12px; --td-font-size-body-medium: 14px; --td-font-size-body-large: 16px; /* 行高 */ --td-line-height-link-small: 20px; --td-line-height-link-medium: 22px; --td-line-height-link-large: 24px; --td-line-height-mark-small: 20px; --td-line-height-mark-medium: 22px; --td-line-height-mark-large: 24px; --td-line-height-base-small: 20px; --td-line-height-base-medium: 22px; --td-line-height-base-large: 24px; --td-line-height-headline-small: 24px; --td-line-height-headline-medium: 26px; --td-line-height-headline-large: 28px; --td-line-height-title-small: 22px; --td-line-height-title-medium: 24px; --td-line-height-title-large: 26px; --td-line-height-body-small: 20px; --td-line-height-body-medium: 22px; --td-line-height-body-large: 24px; /* ---------------------------------------------------------------------- * 10. 尺寸（控件高度）— tdesign 1.x medium 标准 * small 24 / medium 32 / large 40 * -------------------------------------------------------------------- */ --td-comp-size-xxxs: 16px; --td-comp-size-xxs: 20px; --td-comp-size-xs: 24px; --td-comp-size-s: 32px; --td-comp-size-m: 40px; --td-comp-size-l: 48px; --td-comp-size-xl: 56px; --td-comp-size-xxl: 64px; --td-comp-size-xxxl: 72px; --td-comp-size-xxxxl: 96px; /* 控件内边距 */ --td-comp-paddingLR-xs: 8px; --td-comp-paddingLR-s: 12px; --td-comp-paddingLR-m: 16px; --td-comp-paddingLR-l: 24px; --td-comp-paddingTB-xs: 4px; --td-comp-paddingTB-s: 8px; --td-comp-paddingTB-m: 12px; --td-comp-paddingTB-l: 16px; --td-comp-margin-xs: 4px; --td-comp-margin-s: 8px; --td-comp-margin-m: 12px; --td-comp-margin-l: 16px; --td-comp-margin-xl: 24px; --td-comp-margin-xxl: 32px; /* 弹窗层级 */ --td-pop-padding-s: 8px; --td-pop-padding-m: 16px; --td-pop-padding-l: 24px; /* 滑动 ease */ --td-anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1); --td-anim-time-fn-easing-in: cubic-bezier(.38, 0, .24, 1); --td-anim-time-fn-easing-out: cubic-bezier(.38, 0, .24, 1); --td-anim-duration-base: .2s; --td-anim-duration-moderate: .24s; --td-anim-duration-slow: .32s; } /* Approved client theme. The admin server aliases this file too, so its root * defaults above remain unchanged; only the client shell receives this theme. */ body.shell-modern { --td-brand-color: #2F67C7; --td-brand-color-hover: #1A4CAA; --td-brand-color-active: #123C8F; --td-brand-color-disabled: #CBD5E1; --td-brand-color-light-hover: #EAF1FB; --td-bg-color-container: var(--td-font-white-1); --td-bg-color-specialcomponent: var(--td-font-white-1); --td-text-color-anti: var(--td-font-white-1); --td-radius-default: 3px; --td-radius-medium: 6px; --td-radius-large: 8px; --td-radius-extraLarge: 12px; --td-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; /* Restore native size scale; each TDesign component selects its own role. */ --td-comp-size-xxxs:var(--td-size-6); --td-comp-size-xxs:var(--td-size-7); --td-comp-size-xs:var(--td-size-8); --td-comp-size-s:var(--td-size-9); --td-comp-size-m:var(--td-size-10); --td-comp-size-l:var(--td-size-11); --td-comp-size-xl:var(--td-size-12); --td-comp-size-xxl:var(--td-size-13); --td-comp-size-xxxl:var(--td-size-14); --td-comp-size-xxxxl:var(--td-size-15); --td-comp-size-xxxxxl:var(--td-size-16); }