astryx-vue

Neutral（中性默认主题） ​

Neutral 是 astryx-vue 的默认主题。它的基调是中性黑白灰，适用于各类企业级后台、中台系统和工具型网页。

引入方式 ​

只需在你的前端入口文件（如 main.ts）中加入这行引入：

ts
import '@astryx-vue/themes/neutral.css'

这一行代码会完成这几件事：

  1. 自动加载字体资源： 加载西文字体 Figtree 与等宽代码字体 JetBrains Mono（包含 400 常规、500 中粗、600 半粗、700 加粗以及 400/600 斜体）。因为声明了 font-synthesis: none，所以系统严格使用真实设计的字重，不会让浏览器去硬拉变形生成伪粗体或伪斜体。
  2. 引入所有组件主题样式： 依次加载 neutral/ 目录下的所有样式，包括全局基准 base.css。
  3. 注入全局根节点： 会自动将基础变量挂载在 :root 和 [data-astryx-theme='neutral'] 上，因此无需任何额外配置，引入即全站生效。

字体回退栈（Font Stack） ​

  • 正文与标题（Body & Heading）：--astryx-font-family-body 和 --astryx-font-family-heading 优先使用 Figtree，随后按系统习惯回退： -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif。
  • 等宽代码（Code）：--astryx-font-family-code 和原版一样优先用系统等宽字体： ui-monospace, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace。

想换成自己的字体，覆盖上面三个变量即可；也可以不引入内置的 fonts.css，改用 Google Fonts 加载 Figtree，例如在 <head> 里放 <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">。

和原版设计保持一致 ​

Neutral 的每一个颜色、圆角和阴影值都和上游 v0.7.1 的 neutralTheme.ts 一致：

  • 色板： 灰阶、文字、图标、边框、背景、状态色和十种分类色都取自上游审定色板（neutralPaletteRefs.generated.ts）。
  • 直角定义 --astryx-radius-none： 和上游一样是 0px，方形头像和骨架屏保持直角。
  • 辅助文本色 --astryx-color-text-secondary： 浅色 #474747、深色 #9e9e9e，与上游一致。

组件级配色不再各写一份十六进制值，而是引用语义变量（例如 --astryx-badge-info-background 指向上游审定的状态色）。改一个语义变量，用到它的组件会一起更新。

手机上字号更大 ​

在触屏设备（粗指针）且视口窄于 lg 断点（1024px）时，正文字号基准从 14px 提升到 16px，字阶比例从 1.2 调整为 1.1736。这样正文够大好读，而 Display 1 仍保持桌面端的 42px。桌面端字号不受影响。

明暗深色模式 ​

Neutral 在定义时就声明了 color-scheme: light dark。因此只要你使用 light-dark() 变量，它会自动跟随操作系统或文档站当前的外观切换。

如果你需要在页面的某一个特定区域固定显示深色或浅色，只需在父容器元素上添加属性 data-astryx-color-mode="light" 或 "dark"。具体说明请参阅 深色模式指南。