aura-design-tokens

用途

aura-design-tokens 用于在 Vue 项目中同步 PrimeVue Aura、Quasar 与自定义 CSS 的设计令牌，覆盖主题、颜色、表面层级、边框圆角和深色模式。该技能明确不使用 Tailwind 工具类。

将 PrimeVue Aura 令牌（--p-）桥接到 Quasar 令牌（--q-）与应用角色变量（--app-*）。
统一管理浅色与深色模式下的背景、卡片表面、边框、主文本与次要文本颜色。
在自定义 CSS 中复用 Aura 的圆角与阴影变量（如 var(--p-border-radius-md)、var(--p-content-border-radius)），避免各组件重复定义数值尺度。
替换 Vue 或 CSS 中的原始十六进制色值与内联颜色。

将令牌桥接样式添加至主样式表 src/assets/design-tokens.css。
在 src/main.js 中于 PrimeVue 设置之后导入该样式表，确保 --p-* 变量在读桥接前已存在；同时需在 Quasar 与 PrimeVue 之后导入。
桥接内容在 :root 中定义浅色模式的 --app-bg、--app-surface-card、--app-border、--app-text-main、--app-text-muted，并将 --q-primary、--q-secondary 映射到 PrimeVue 变量；在 .dark-mode 中定义深色模式对应值，并同步 --q-dark 与 --q-dark-page。
深色模式通过在祖先元素上添加或移除 .dark-mode 切换，与 PrimeVue 的 darkModeSelector: '.dark-mode' 保持一致。
组件统一引用 var(--app-bg)、var(--app-surface-card)、var(--app-border)、var(--app-text-main)、var(--app-text-muted)。
回退值仅存在于该样式文件内，因此缺失 Aura 变量时仍可正常绘制。

适用于以 PrimeVue Aura 和 Quasar 为基础、需要统一主题与深色模式、并希望以 CSS 自定义属性集中管理颜色与表面层级的 Vue 项目。若任务涉及新增或修改颜色、表面、边框、圆角或深色模式，或需要将原始色值替换为令牌引用，适合启用该技能。