Two Column

Pattern · 双栏

概念 ⟷ 示例

左栏 · 概念

一个主题 = 一组 CSS 变量。把颜色、字体、圆角、阴影全部收到 :root 里。

— tokens 定义语义，不写具体色值
— base.css 用 tokens 排版
— 每个主题只改变量

右栏 · 示例

:root {
  --bg: #fff;
  --text-1: #0c0d10;
  --accent: #3b6cff;
  --radius: 18px;
}
.card {
  background: var(--bg);
  color: var(--text-1);
  border-radius: var(--radius);
}