dd38aeaf38
All checks were successful
Build and Deploy (tool.xpcool.com) / build-and-deploy (push) Successful in 1m10s
主色青玉改宝石蓝，字号整体放大一档（正文 16px）， 通过 --td-comp-* 与 --td-font-* 接管 TDesign 控件高度与文字， 修复 theme-mode 选择器权重不足导致深色变量被 UI 库覆盖的问题。
34 lines
1.7 KiB
TypeScript
34 lines
1.7 KiB
TypeScript
import { defineConfig, presetUno, transformerDirectives } from 'unocss'
|
||
|
||
/**
|
||
* UnoCSS 配置：仅使用 presetUno（类 Tailwind 原子类）。
|
||
*
|
||
* 颜色一律走设计令牌 CSS 变量（--tk-* / --td-*），不要写死色值，
|
||
* 这样昼夜主题切换与品牌改色都只需改 tokens.scss 一处。
|
||
* 颜色写法用 arbitrary value，例如：bg-[var(--tk-surface)]
|
||
*
|
||
* 尺寸同理：字号用 text-13px / text-16px 这种「与令牌同一档位」的值，
|
||
* 不要在这里写回 12px，那是上一版「字太小」的根因。
|
||
*/
|
||
export default defineConfig({
|
||
presets: [presetUno()],
|
||
transformers: [transformerDirectives()],
|
||
shortcuts: {
|
||
// 工具页通用容器（内容型页面统一版心）
|
||
'page-wrap': 'mx-auto w-full max-w-[var(--tk-content-max)]',
|
||
// 表单行：标签 + 控件 的通用栅格（响应式，移动端自动竖排）
|
||
'form-row': 'flex flex-col gap-2 md:flex-row md:items-center md:gap-4',
|
||
// 结果代码块：等宽字体 + 面板块底色
|
||
'code-block':
|
||
'rounded-[var(--tk-radius-md)] bg-[var(--tk-surface-sunken)] px-4 py-3.5 font-mono text-14px leading-relaxed break-all whitespace-pre-wrap',
|
||
// 通用面板（自定义区块的轻量容器）
|
||
// 自带内边距，直接写 class="panel tool-section" 即可，不必每处再补 padding。
|
||
// 本版容器重新「有形」：白底 + 实描边，与页面底（--tk-bg）拉开层次。
|
||
// 注意：页面 scoped 样式（如 .block[data-v-*]）权重高于本类，需要单独覆盖时照常写即可。
|
||
'panel':
|
||
'rounded-[var(--tk-radius-xl)] border border-[var(--tk-border)] bg-[var(--tk-surface)] p-5 md:p-7',
|
||
// 说明性小字
|
||
'hint-text': 'text-13px text-[var(--tk-text-placeholder)]',
|
||
},
|
||
})
|