stash-ui/site/sections/Overview.tsx

import { Section } from '../components/Section'

/** 令牌总览：所有组件只消费这些变量，换主题即改这一处 */
const SEMANTIC_COLORS = [
  { name: '--su-color-primary', value: '#3858f6', use: '主色：链接、选中、色条' },
  { name: '--su-color-primary-soft', value: 'rgba(56,88,246,.1)', use: '主色浅底' },
  { name: '--su-color-danger', value: '#ff3e3e', use: '错误、数量角标' },
  { name: '--su-color-warning', value: '#ffba3a', use: '提醒、强调' },
  { name: '--su-color-success', value: '#4abd86', use: '在线、成功' },
  { name: '--su-bg-card', value: '#ffffff', use: '卡片、输入框底色' },
]

const GRAYS = [
  { name: '--su-gray-1', value: '#f7f8fa' },
  { name: '--su-gray-2', value: '#f6f6f6' },
  { name: '--su-gray-3', value: '#eeeeee' },
  { name: '--su-gray-4', value: '#c9cdd4' },
  { name: '--su-gray-5', value: '#86909c' },
  { name: '--su-gray-6', value: '#4e5969' },
  { name: '--su-gray-7', value: '#2c343c' },
  { name: '--su-gray-8', value: '#1d2129' },
]

const RADII = [
  { name: '--su-radius-xs', value: '4px', use: '标签、角标' },
  { name: '--su-radius-sm', value: '6px', use: '按钮、输入框' },
  { name: '--su-radius-md', value: '12px', use: '卡片、面板' },
  { name: '--su-radius-pill', value: '999px', use: '胶囊、头像' },
]

const TYPE_SCALE = [
  { token: 'xl', size: '24 / 32', cls: 'type-sample-xl', sample: '页面大标题' },
  { token: 'lg', size: '16 / 24', cls: 'type-sample-lg', sample: '分区标题、条目标题' },
  { token: 'md', size: '14 / 20', cls: 'type-sample-md', sample: '正文、按钮、导航' },
  { token: 'sm', size: '12 / 16', cls: 'type-sample-sm', sample: '描述、元信息、标签' },
]

const SPACES = [
  { name: '--su-space-1', value: 4 },
  { name: '--su-space-2', value: 8 },
  { name: '--su-space-3', value: 12 },
  { name: '--su-space-4', value: 16 },
  { name: '--su-space-5', value: 20 },
  { name: '--su-space-6', value: 24 },
  { name: '--su-space-8', value: 32 },
]

export function Overview() {
  return (
    <Section
      id="overview"
      title="设计令牌"
      api="src/theme/tokens.css"
      desc="组件的颜色、间距、字号、圆角、动效全部来自 CSS 变量，前缀统一是 --su-。换主题只需要覆盖同名变量，不用改组件。"
    >
      <div className="demo">
        <h3 className="demo-title">语义色</h3>
        <div className="token-grid">
          {SEMANTIC_COLORS.map((color) => (
            <div className="token-swatch" key={color.name}>
              <div
                className="token-swatch-color"
                style={{ backgroundColor: `var(${color.name})` }}
              />
              <div className="token-swatch-meta">
                <code className="token-swatch-name">{color.name}</code>
                <span className="token-swatch-value">{color.value}</span>
                <span className="token-swatch-value">{color.use}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="demo">
        <h3 className="demo-title">中性色</h3>
        <div className="token-grid">
          {GRAYS.map((gray) => (
            <div className="token-swatch" key={gray.name}>
              <div className="token-swatch-color" style={{ backgroundColor: `var(${gray.name})` }} />
              <div className="token-swatch-meta">
                <code className="token-swatch-name">{gray.name}</code>
                <span className="token-swatch-value">{gray.value}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="demo">
        <h3 className="demo-title">圆角与阴影</h3>
        <div className="token-list">
          {RADII.map((radius) => (
            <div className="token-row" key={radius.name}>
              <code className="token-row-label">{radius.name}</code>
              <div className="token-row-demo">
                <span className="radius-sample" style={{ borderRadius: `var(${radius.name})` }} />
                <span className="token-swatch-value">{radius.use}</span>
              </div>
              <span className="token-row-note">{radius.value}</span>
            </div>
          ))}
          <div className="token-row">
            <code className="token-row-label">--su-shadow-card</code>
            <div className="token-row-demo">
              <span className="shadow-sample" style={{ boxShadow: 'var(--su-shadow-card)' }}>
                常态
              </span>
              <span className="shadow-sample" style={{ boxShadow: 'var(--su-shadow-hover)' }}>
                悬停
              </span>
            </div>
            <span className="token-row-note">两层，都很克制</span>
          </div>
        </div>
      </div>

      <div className="demo">
        <h3 className="demo-title">字号阶梯</h3>
        <div className="token-list">
          {TYPE_SCALE.map((type) => (
            <div className="token-row" key={type.token}>
              <code className="token-row-label">{`--su-font-size-${type.token}`}</code>
              <div className="token-row-demo">
                <span className={type.cls}>{type.sample}</span>
              </div>
              <span className="token-row-note">{type.size} px</span>
            </div>
          ))}
          <div className="token-row">
            <code className="token-row-label">--su-font-weight-bold</code>
            <div className="token-row-demo">
              <span className="type-sample-md" style={{ fontWeight: 500 }}>
                主题的「加粗」是 500，不是 700
              </span>
            </div>
            <span className="token-row-note">500</span>
          </div>
        </div>
      </div>

      <div className="demo">
        <h3 className="demo-title">间距</h3>
        <div className="token-list">
          {SPACES.map((space) => (
            <div className="token-row" key={space.name}>
              <code className="token-row-label">{space.name}</code>
              <div className="token-row-demo">
                <span className="token-bar" style={{ width: `${space.value * 4}px` }} />
              </div>
              <span className="token-row-note">{space.value}px</span>
            </div>
          ))}
        </div>
      </div>

      <div className="demo">
        <h3 className="demo-title">动效</h3>
        <div className="token-list">
          <div className="token-row">
            <code className="token-row-label">--su-duration-fast</code>
            <div className="token-row-demo">
              <span className="token-swatch-value">0.2s：颜色、背景变化</span>
            </div>
          </div>
          <div className="token-row">
            <code className="token-row-label">--su-duration-base</code>
            <div className="token-row-demo">
              <span className="token-swatch-value">0.3s：展开收起、淡入淡出</span>
            </div>
          </div>
        </div>
      </div>

      <pre className="demo-code">
        <code>{`/* 使用方覆盖主题：只需重写变量 */
:root[data-theme='dark'] {
  --su-bg-page: #17171a;
  --su-bg-card: #232324;
  --su-text-main: #f2f3f5;
}`}</code>
      </pre>
    </Section>
  )
}