SHUANGZ 设计系统

设计系统分为四层：令牌（tokens）决定颜色、间距、圆角、动效；组件由令牌组合而成；主题整套替换令牌值；页面只组合组件，不写颜色。

六套主题，切换时整套令牌同时替换。点击卡片可实时预览。

核心色板。所有颜色通过 CSS 变量引用，禁止硬编码。

/* 引用方式 */
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);

字阶取自 Material 3 Type Scale，中文字体回退到苹方 / 微软雅黑。

M3 形状阶梯。同一页面内圆角必须来自这套阶梯，不写任意值。

三级升降序。低层级用 1，浮层用 2–3。悬停不靠加阴影，靠状态层。

Material 的交互反馈规范：鼠标悬停叠加 5.5% 的 on-surface，按下叠加 9%。深色主题用白色叠加。

统一使用 Material Symbols 风格：24×24 网格、2px 描边、圆头端点。用 M3.icon(name) 生成，不引入字体文件。

M3.icon('calendar-check')          // 24px 线稿
M3.icon('calendar-check', 'ic-20') // 20px
// 色调圆底
<span class="ic-tonal"><?></span>

所有页面共用这些组件。新增页面只组合组件，不改样式。

新页面只需两行引用，然后组合组件。

<link rel="stylesheet" href="https://shuangz.online/assets/m3.css?v=1">
...
<script src="https://shuangz.online/assets/m3.js?v=1"></script>
<script>
  // 图标
  document.getElementById('btn').innerHTML = M3.icon('palette','ic-20');

  // 主题切换（图标按钮 + 二级菜单）
  M3.theme.init({
    mount:   document.getElementById('themeMenu'),
    trigger: document.getElementById('themeBtn')
  });

  // 提示
  M3.toast('已保存', 'success');
</script>

/* 换主题 */
M3.applyTheme('night');

/* 监听变化 */
M3.onThemeChange(function(id){ console.log(id); });