/* * bt-tokens.css — 业务模板设计令牌 * --------------------------------------------------------------------------- * 定义 bt-* 组件体系使用的非颜色类 CSS 变量（间距、字号、字重、圆角等）。 * 所有使用 bt-* 组件体系的业务 HTML 页面都应引入此文件。 * * 颜色相关样式直接使用 foundation HSL 变量（hsl(var(--card)) 等）， * 与源码项目保持一致，深色模式通过 html.dark [data-theme=default] 自动生效。 * * 引入方式（在中，bt-page-common.css 之前）： * * --------------------------------------------------------------------------- */ :root { /* ===================== 页面级 ===================== */ /* * --bt-page-bg 是唯一需要显式深色覆盖的颜色令牌。 * Layout JS 将 --g-main-area-bg 通过 document.body.style.setProperty() * 设置在上，而此变量定义在 :root（）上。 * CSS 自定义属性只能从父向子继承，:root 无法读取 body 上的变量。 * * 浅色：hsl(0 0% 95%) — 浅灰底 + 白卡片形成层次对比 * 深色：hsl(var(--background)) — 通过下方 html.dark 覆盖 */ --bt-page-bg: hsl(0 0% 95%); /* ===================== 组件令牌 — 圆角 ===================== */ --bt-card-radius: var(--radius, 0.5rem); --bt-surface-radius: var(--radius, 0.5rem); --bt-surface-inner-radius: calc(var(--radius, 0.5rem) - 2px); --bt-control-radius: calc(var(--radius, 0.5rem) - 2px); --bt-control-radius-sm: calc(var(--radius, 0.5rem) - 4px); --bt-pill-radius: 999px; /* ===================== 组件令牌 — AG Grid（非颜色） ===================== */ --bt-grid-font-size: 0.8125rem; --bt-grid-size: 0.25rem; --bt-grid-cell-padding: 12px; --bt-grid-header-font-size: 0.75rem; --bt-grid-header-height: 2.5rem; --bt-grid-row-height: 2rem; /* ===================== 组件令牌 — 模态框（非颜色） ===================== */ --bt-modal-surface-radius: var(--bt-surface-radius); --bt-modal-spread-gap: 20px; --bt-dialog-body-height: calc(100vh - 10rem); --bt-dialog-scroll-height: calc(100vh - 14rem); /* ===================== 组件令牌 — 附件列表 ===================== */ --bt-attachment-list-max-height: 240px; /* ===================== 字体大小 ===================== */ --bt-text-xs: 0.75rem; /* 12px — 微标签、计数器、时间戳 */ --bt-text-sm: 0.8125rem; /* 13px — 次要文本、表格内容、标签 */ --bt-text-base: 0.875rem; /* 14px — 正文、按钮、section title */ --bt-text-md: 0.9375rem; /* 15px — 小节标题 */ --bt-text-lg: 1rem; /* 16px — 标题 */ --bt-text-xl: 1.25rem; /* 20px — modal title */ --bt-text-2xl: 1.5rem; /* 24px — 状态卡数值 */ --bt-text-3xl: 1.75rem; /* 28px — 总计数值 */ /* ===================== 行高 ===================== */ --bt-leading-tight: 1; --bt-leading-snug: 1.25rem; --bt-leading-normal: 1.375rem; --bt-leading-relaxed: 1.5rem; /* ===================== 字重 ===================== */ --bt-weight-normal: 400; --bt-weight-medium: 500; --bt-weight-semibold: 600; --bt-weight-bold: 700; --bt-weight-extrabold: 800; /* ===================== 间距（4px 基数） ===================== */ --bt-space-1: 4px; --bt-space-2: 6px; --bt-space-3: 8px; --bt-space-4: 10px; --bt-space-5: 12px; --bt-space-6: 14px; --bt-space-7: 16px; --bt-space-8: 18px; --bt-space-9: 20px; --bt-space-10: 22px; --bt-space-11: 24px; --bt-space-12: 28px; /* ===================== 卡片 padding 规范 ===================== */ /* 层级 top/bottom left/right 说明 * page-card 12px 14px 页面级卡片（工具栏/表格/树面板/状态卡） * dialog-card 16px 20px 弹框/抽屉内卡片（表单/筛选/明细） */ --bt-card-px: 14px; --bt-card-py: 12px; --bt-dialog-card-px: 20px; --bt-dialog-card-py: 16px; /* ===================== 按钮最小宽度 ===================== */ --bt-btn-min-w-sm: 84px; --bt-btn-min-w: 96px; --bt-btn-min-w-md: 104px; --bt-btn-min-w-lg: 112px; --bt-btn-min-w-xl: 120px; /* ===================== z-index ===================== */ --bt-z-base: 1000; /* 弹层起始值，运行时 +1 递增 */ /* ===================== 遮罩层 ===================== */ --bt-overlay-bg: rgb(0 0 0 / 50%); --bt-overlay-blur: 0px; --bt-overlay-nested-bg: rgb(0 0 0 / 30%); } /* ===================== 深色主题变量覆盖 ===================== */ html.dark { --bt-page-bg: hsl(var(--background)); }