@zhang_jifan/fanui 2.1.0

package/src/layout/_grid.scss

@@ -0,0 +1,180 @@
+// =============================================================================
+// fanUI · 响应式栅格系统 (Grid System)
+// -----------------------------------------------------------------------------
+// 命名规范：
+//   .fanui-row                     行（flex 容器 + 负外边距中和列的内边距）
+//   .fanui-col                     等分列（自动均分剩余空间）
+//   .fanui-col-<n>                 占 n/12 列（n = 1..12）
+//   .fanui-col-<bp>-<n>            指定断点起生效（bp = sm|md|lg|xl|xxl）
+//   .fanui-col-<bp>-auto           内容自适应宽度
+//   .fanui-offset-<bp>-<n>         向右偏移 n 列
+//   .fanui-order-<bp>-<n>          排序（n = 0..12）
+//   .fanui-g-<n> / .fanui-gx-<n> / .fanui-gy-<n>   行/列间距
+// 断点采用移动优先：xs(0) < sm(576) < md(768) < lg(992) < xl(1200) < xxl(1400)
+// =============================================================================
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 行 Row
+// -----------------------------------------------------------------------------
+
+.fanui-row {
+  @include mx.fanui-make-row();
+}
+
+// 列数为 0 时取消内边距（常用于嵌套全宽）
+.fanui-row--no-gutters {
+  --fanui-gutter-x: 0;
+  --fanui-gutter-y: 0;
+}
+
+.fanui-row--inline {
+  display: inline-flex;
+}
+
+// -----------------------------------------------------------------------------
+// 2. 基础列 Col
+// -----------------------------------------------------------------------------
+
+.fanui-col {
+  flex: 1 0 0%;
+  min-width: 0;
+}
+
+.fanui-col-auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+// -----------------------------------------------------------------------------
+// 3. 固定列宽 .fanui-col-<n>
+// -----------------------------------------------------------------------------
+
+@for $i from 1 through v.$fanui-grid-columns {
+  .fanui-col-#{$i} {
+    flex: 0 0 auto;
+    width: fn.fanui-percentage($i, v.$fanui-grid-columns);
+    max-width: 100%;
+  }
+}
+
+// 整行独占
+.fanui-col-12 { flex: 0 0 auto; width: 100%; }
+
+// -----------------------------------------------------------------------------
+// 4. 响应式列 .fanui-col-<bp>-<n>
+// -----------------------------------------------------------------------------
+
+@each $bp, $min in v.$fanui-breakpoints {
+  @include mx.fanui-media($bp, min) {
+    $infix: fn.fanui-bp-infix($bp);
+
+    .fanui-col#{$infix} {
+      flex: 1 0 0%;
+      min-width: 0;
+    }
+
+    .fanui-col#{$infix}-auto {
+      flex: 0 0 auto;
+      width: auto;
+      max-width: 100%;
+    }
+
+    @for $i from 1 through v.$fanui-grid-columns {
+      .fanui-col#{$infix}-#{$i} {
+        flex: 0 0 auto;
+        width: fn.fanui-percentage($i, v.$fanui-grid-columns);
+        max-width: 100%;
+      }
+    }
+
+    // 偏移
+    @for $i from 0 through (v.$fanui-grid-columns - 1) {
+      @if $i == 0 {
+        .fanui-offset#{$infix}-0 { margin-inline-start: 0; }
+      } @else {
+        .fanui-offset#{$infix}-#{$i} {
+          margin-inline-start: fn.fanui-percentage($i, v.$fanui-grid-columns);
+        }
+      }
+    }
+
+    // 排序
+    @for $i from 0 through v.$fanui-grid-columns {
+      .fanui-order#{$infix}-#{$i} { order: $i; }
+    }
+    .fanui-order#{$infix}-first { order: -1; }
+    .fanui-order#{$infix}-last  { order: v.$fanui-grid-columns + 1; }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 5. 行间距 / 列间距（gutter）
+// -----------------------------------------------------------------------------
+
+$fanui-gutter-steps: (0: 0, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 20px, 6: 24px, 8: 32px, 10: 40px) !default;
+
+@each $key, $value in $fanui-gutter-steps {
+  .fanui-g#{$key}  { --fanui-gutter-x: #{$value}; --fanui-gutter-y: #{$value}; }
+  .fanui-gx#{$key} { --fanui-gutter-x: #{$value}; }
+  .fanui-gy#{$key} { --fanui-gutter-y: #{$value}; }
+}
+
+// 响应式 gutter
+@each $bp, $min in v.$fanui-breakpoints {
+  @include mx.fanui-media($bp, min) {
+    $infix: fn.fanui-bp-infix($bp);
+
+    @each $key, $value in $fanui-gutter-steps {
+      .fanui-g#{$infix}-#{$key}  { --fanui-gutter-x: #{$value}; --fanui-gutter-y: #{$value}; }
+      .fanui-gx#{$infix}-#{$key} { --fanui-gutter-x: #{$value}; }
+      .fanui-gy#{$infix}-#{$key} { --fanui-gutter-y: #{$value}; }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 6. CSS Grid 工具（独立于 12 栅格，用于卡片瀑布流等）
+// -----------------------------------------------------------------------------
+
+.fanui-grid {
+  display: grid;
+  gap: fn.fanui-var("space-4");
+}
+
+@for $i from 1 through 12 {
+  .fanui-grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+// 自适应列（auto-fit + minmax），无需媒体查询
+.fanui-grid-auto-xs  { @include mx.fanui-grid-auto(120px); }
+.fanui-grid-auto-sm  { @include mx.fanui-grid-auto(180px); }
+.fanui-grid-auto-md  { @include mx.fanui-grid-auto(240px); }
+.fanui-grid-auto-lg  { @include mx.fanui-grid-auto(300px); }
+.fanui-grid-auto-xl  { @include mx.fanui-grid-auto(380px); }
+
+@each $bp, $min in v.$fanui-breakpoints {
+  @include mx.fanui-media($bp, min) {
+    $infix: fn.fanui-bp-infix($bp);
+
+    @for $i from 1 through 12 {
+      .fanui-grid-cols#{$infix}-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+
+    .fanui-grid-span#{$infix}-full { grid-column: 1 / -1; }
+    @for $i from 1 through 12 {
+      .fanui-grid-span#{$infix}-#{$i} { grid-column: span #{$i} / span #{$i}; }
+      .fanui-grid-rows#{$infix}-#{$i} { grid-row: span #{$i} / span #{$i}; }
+    }
+  }
+}

package/src/themes/_accents.scss

@@ -0,0 +1,201 @@
+// =============================================================================
+// fanUI · 主题色令牌输出层 (Accent Roles)
+// -----------------------------------------------------------------------------
+// 本层负责把「12 套主题色」翻译成一整套 CSS 自定义属性，并处理三种作用域：
+//
+//   1. 全局默认       :root                                   → cyan（可配置）
+//   2. 全局显式切换   <html data-fanui-accent="indigo">
+//   3. 局部作用域     <section data-fanui-accent="rose">      → 子树内换色不污染全局
+//                     <div class="fanui-accent-rose">        → 等价的类名写法
+//
+// 深浅模式与主题色是正交的两条轴：
+//   浅色 + cyan / 深色 + cyan / 浅色 + purple / 深色 + purple … 24 种组合全部覆盖。
+//
+// 输出的令牌清单（每个角色 name 都完整产出，全组件统一引用这些名字）：
+//   --fanui-<name>            --fanui-<name>-fg          --fanui-<name>-hover
+//   --fanui-<name>-active     --fanui-<name>-vivid       --fanui-<name>-soft
+//   --fanui-<name>-soft-2     --fanui-<name>-border      --fanui-<name>-ink
+//   --fanui-<name>-ring       --fanui-<name>-glow        --fanui-<name>-grad-a/b
+//   --fanui-<name>-50…950      （原始色阶，随主题色一起重映射）
+// =============================================================================
+
+@use "sass:map";
+@use "sass:list";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+@use "palettes" as pal;
+
+// -----------------------------------------------------------------------------
+// 1. 主题色 → 令牌
+// -----------------------------------------------------------------------------
+
+/// 输出一套主题色（主色 + 和声副色 + 品牌渐变 + 极光色）在指定模式下的全部令牌。
+///
+/// @param $accent 主题色 key（cyan / sky / blue / …）
+/// @param $mode   light | dark
+@mixin fanui-emit-accent-theme($accent, $mode: light) {
+  $pal: pal.fanui-accent-palette($accent);
+  $secondary: pal.fanui-accent-meta($accent, "secondary");
+  $sec-pal: pal.fanui-accent-palette($secondary);
+
+  $vivid-tone: 500;
+  @if $mode == dark {
+    $vivid-tone: 400;
+  }
+
+  $p-vivid: map.get($pal, $vivid-tone);
+  $s-vivid: map.get($sec-pal, $vivid-tone);
+
+  // ---- 主色（所有组件的默认品牌色）--------------------------------------
+  @include mx.fanui-emit-accent-roles("primary", $pal, $mode);
+
+  // ---- 和声副色（图表第二序列 / 装饰 / 强调）----------------------------
+  @include mx.fanui-emit-accent-roles("accent", $sec-pal, $mode);
+
+  // ---- 品牌渐变 & 极光色（官网 Hero、卡片高光、图表渐变共用）------------
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    #{fn.fanui-alpha($p-vivid, 0.16)},
+    #{fn.fanui-alpha($s-vivid, 0.14)}
+  );
+  --fanui-brand-aura-a: #{fn.fanui-alpha($p-vivid, 0.38)};
+  --fanui-brand-aura-b: #{fn.fanui-alpha($s-vivid, 0.30)};
+  --fanui-brand-name: "#{$accent}";
+}
+
+// -----------------------------------------------------------------------------
+// 2. 全局默认（浅色）
+// -----------------------------------------------------------------------------
+
+:root {
+  @include fanui-emit-accent-theme(v.$fanui-accent-default, light);
+}
+
+// -----------------------------------------------------------------------------
+// 3. 12 套主题色 × 浅色模式
+// -----------------------------------------------------------------------------
+// 同时支持属性写法与类名写法，便于「子树局部换色」：
+//   <section data-fanui-accent="rose">…</section>
+//   <div class="fanui-accent-rose">…</div>
+
+@if v.$fanui-enable-accent-themes {
+  @each $name, $config in pal.$fanui-accents {
+    [data-fanui-accent="#{$name}"],
+    .fanui-accent-#{$name} {
+      @include fanui-emit-accent-theme($name, light);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 4. 全局默认（深色）
+// -----------------------------------------------------------------------------
+
+[data-fanui-theme="dark"],
+:root[data-fanui-theme="dark"] {
+  @include fanui-emit-accent-theme(v.$fanui-accent-default, dark);
+}
+
+// -----------------------------------------------------------------------------
+// 5. 12 套主题色 × 深色模式
+// -----------------------------------------------------------------------------
+// 选择器组合保证三层覆盖关系正确（全局默认 < 显式主题色 < 深色 + 显式主题色）：
+//   [data-fanui-theme="dark"][data-fanui-accent="x"]  同元素
+//   [data-fanui-theme="dark"] [data-fanui-accent="x"] 祖先为深色
+//   [data-fanui-theme="dark"] .fanui-accent-x          祖先为深色（类名写法）
+
+@if v.$fanui-enable-accent-themes {
+  @each $name, $config in pal.$fanui-accents {
+    [data-fanui-theme="dark"][data-fanui-accent="#{$name}"],
+    [data-fanui-theme="dark"] [data-fanui-accent="#{$name}"],
+    [data-fanui-theme="dark"] .fanui-accent-#{$name} {
+      @include fanui-emit-accent-theme($name, dark);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 6. 跟随系统（auto）
+// -----------------------------------------------------------------------------
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme="auto"],
+  :root[data-fanui-theme="auto"] {
+    @include fanui-emit-accent-theme(v.$fanui-accent-default, dark);
+  }
+
+  @if v.$fanui-enable-accent-themes {
+    @each $name, $config in pal.$fanui-accents {
+      [data-fanui-theme="auto"][data-fanui-accent="#{$name}"],
+      [data-fanui-theme="auto"] [data-fanui-accent="#{$name}"],
+      [data-fanui-theme="auto"] .fanui-accent-#{$name} {
+        @include fanui-emit-accent-theme($name, dark);
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// 7. 语义色角色（success / warning / danger / info）
+// -----------------------------------------------------------------------------
+// 它们不随主题色变化，但使用与主题色完全相同的令牌口径。
+// 实心色取 700 阶以保证白字达到 WCAG AA；500/600 阶保留为 -vivid 供装饰使用。
+
+:root {
+  @each $name in v.$fanui-semantic-names {
+    $pal: map.get(v.$fanui-palette, $name);
+    @include mx.fanui-emit-color-roles(
+      $name,
+      map.get($pal, 700),
+      map.get($pal, 500),
+      map.get($pal, 600),
+      map.get($pal, 50),
+      map.get($pal, 100),
+      map.get($pal, 200),
+      map.get($pal, 800),
+      light
+    );
+  }
+}
+
+[data-fanui-theme="dark"],
+:root[data-fanui-theme="dark"] {
+  @each $name in v.$fanui-semantic-names {
+    $pal: map.get(v.$fanui-palette, $name);
+    @include mx.fanui-emit-color-roles(
+      $name,
+      map.get($pal, 400),
+      map.get($pal, 400),
+      map.get($pal, 300),
+      null,
+      null,
+      null,
+      map.get($pal, 200),
+      dark
+    );
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme="auto"],
+  :root[data-fanui-theme="auto"] {
+    @each $name in v.$fanui-semantic-names {
+      $pal: map.get(v.$fanui-palette, $name);
+      @include mx.fanui-emit-color-roles(
+        $name,
+        map.get($pal, 400),
+        map.get($pal, 400),
+        map.get($pal, 300),
+        null,
+        null,
+        null,
+        map.get($pal, 200),
+        dark
+      );
+    }
+  }
+}

package/src/themes/_palettes.scss

@@ -0,0 +1,180 @@
+// =============================================================================
+// fanUI · 12 套主题色（Accent Themes）
+// -----------------------------------------------------------------------------
+// 每套主题包含：11 阶调色板（50 → 950）+ 元数据（名称、推荐配对副色、气质量表）
+//
+// 设计原则
+//   1. 色相覆盖完整色环：青 → 天蓝 → 蓝 → 靛 → 紫罗兰 → 紫 → 粉 → 玫红 → 赤 → 橙 → 翡翠 → 青碧
+//   2. 同一套阶差体系（50/100…900/950），保证明度节奏一致，任意主题互换后版式不塌
+//   3. 不硬编码「品牌主色阶」：由 fanui-emit-accent-roles() 按 WCAG 对比度自动择优，
+//      因此换主题、加主题都不需要人工逐个调校颜色
+//   4. 每套主题配一个「和声副色」（secondary），用于品牌渐变、图表第二序列、装饰元素，
+//      避免用户自己乱搭导致色彩失衡
+//
+// 默认主题：cyan（青）—— 理由见 docs/DESIGN-SYSTEM.md「默认主题色论证」
+// =============================================================================
+
+@use "sass:map";
+
+/// 默认主题色
+$fanui-accent-default: "cyan" !default;
+
+/// 12 套主题色定义
+/// @prop label      中文名（用于主题面板展示）
+/// @prop hue        代表色相角（用于派生极光背景、光晕等装饰色）
+/// @prop palette    11 阶调色板
+/// @prop secondary  和声副色（另一个 accent 的 key）
+/// @prop vibe       气质标签（B 端 / C 端适配建议）
+$fanui-accents: (
+  "cyan": (
+    "label": "青",
+    "en": "Cyan",
+    "hue": 189,
+    "vibe": "科技 · 清爽",
+    "secondary": "violet",
+    "palette": (
+      50: #ecfeff, 100: #cffafe, 200: #a5f3fc, 300: #67e8f9, 400: #22d3ee,
+      500: #06b6d4, 600: #0891b2, 700: #0e7490, 800: #155e75, 900: #164e63, 950: #083344
+    )
+  ),
+  "sky": (
+    "label": "天蓝",
+    "en": "Sky",
+    "hue": 199,
+    "vibe": "轻盈 · 开放",
+    "secondary": "violet",
+    "palette": (
+      50: #f0f9ff, 100: #e0f2fe, 200: #bae6fd, 300: #7dd3fc, 400: #38bdf8,
+      500: #0ea5e9, 600: #0284c7, 700: #0369a1, 800: #075985, 900: #0c4a6e, 950: #082f49
+    )
+  ),
+  "blue": (
+    "label": "经典蓝",
+    "en": "Blue",
+    "hue": 217,
+    "vibe": "稳健 · 通用",
+    "secondary": "cyan",
+    "palette": (
+      50: #eff6ff, 100: #dbeafe, 200: #bfdbfe, 300: #93c5fd, 400: #60a5fa,
+      500: #3b82f6, 600: #2563eb, 700: #1d4ed8, 800: #1e40af, 900: #1e3a8a, 950: #172554
+    )
+  ),
+  "indigo": (
+    "label": "靛蓝",
+    "en": "Indigo",
+    "hue": 239,
+    "vibe": "专业 · 前沿",
+    "secondary": "cyan",
+    "palette": (
+      50: #eef2ff, 100: #e0e7ff, 200: #c7d2fe, 300: #a5b4fc, 400: #818cf8,
+      500: #6366f1, 600: #4f46e5, 700: #4338ca, 800: #3730a3, 900: #312e81, 950: #1e1b4b
+    )
+  ),
+  "violet": (
+    "label": "紫罗兰",
+    "en": "Violet",
+    "hue": 258,
+    "vibe": "创意 · 智能",
+    "secondary": "cyan",
+    "palette": (
+      50: #f5f3ff, 100: #ede9fe, 200: #ddd6fe, 300: #c4b5fd, 400: #a78bfa,
+      500: #8b5cf6, 600: #7c3aed, 700: #6d28d9, 800: #5b21b6, 900: #4c1d95, 950: #2e1065
+    )
+  ),
+  "purple": (
+    "label": "紫",
+    "en": "Purple",
+    "hue": 272,
+    "vibe": "艺术 · 张扬",
+    "secondary": "pink",
+    "palette": (
+      50: #faf5ff, 100: #f3e8ff, 200: #e9d5ff, 300: #d8b4fe, 400: #c084fc,
+      500: #a855f7, 600: #9333ea, 700: #7e22ce, 800: #6b21a8, 900: #581c87, 950: #3b0764
+    )
+  ),
+  "pink": (
+    "label": "品粉",
+    "en": "Pink",
+    "hue": 330,
+    "vibe": "年轻 · 潮流",
+    "secondary": "violet",
+    "palette": (
+      50: #fdf2f8, 100: #fce7f3, 200: #fbcfe8, 300: #f9a8d4, 400: #f472b6,
+      500: #ec4899, 600: #db2777, 700: #be185d, 800: #9d174d, 900: #831843, 950: #500724
+    )
+  ),
+  "rose": (
+    "label": "玫红",
+    "en": "Rose",
+    "hue": 350,
+    "vibe": "浪漫 · 亲和",
+    "secondary": "orange",
+    "palette": (
+      50: #fff1f2, 100: #ffe4e6, 200: #fecdd3, 300: #fda4af, 400: #fb7185,
+      500: #f43f5e, 600: #e11d48, 700: #be123c, 800: #9f1239, 900: #881337, 950: #4c0519
+    )
+  ),
+  "red": (
+    "label": "赤红",
+    "en": "Red",
+    "hue": 0,
+    "vibe": "强烈 · 行动",
+    "secondary": "rose",
+    "palette": (
+      50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171,
+      500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a
+    )
+  ),
+  "orange": (
+    "label": "橙",
+    "en": "Orange",
+    "hue": 25,
+    "vibe": "活力 · 温暖",
+    "secondary": "pink",
+    "palette": (
+      50: #fff7ed, 100: #ffedd5, 200: #fed7aa, 300: #fdba74, 400: #fb923c,
+      500: #f97316, 600: #ea580c, 700: #c2410c, 800: #9a3412, 900: #7c2d12, 950: #431407
+    )
+  ),
+  "emerald": (
+    "label": "翡翠",
+    "en": "Emerald",
+    "hue": 160,
+    "vibe": "成长 · 健康",
+    "secondary": "cyan",
+    "palette": (
+      50: #ecfdf5, 100: #d1fae5, 200: #a7f3d0, 300: #6ee7b7, 400: #34d399,
+      500: #10b981, 600: #059669, 700: #047857, 800: #065f46, 900: #064e3b, 950: #022c22
+    )
+  ),
+  "teal": (
+    "label": "青碧",
+    "en": "Teal",
+    "hue": 173,
+    "vibe": "沉静 · 高效",
+    "secondary": "emerald",
+    "palette": (
+      50: #f0fdfa, 100: #ccfbf1, 200: #99f6e4, 300: #5eead4, 400: #2dd4bf,
+      500: #14b8a6, 600: #0d9488, 700: #0f766e, 800: #115e59, 900: #134e4a, 950: #042f2e
+    )
+  )
+) !default;
+
+/// 主题色 key 列表（顺序即主题面板展示顺序）
+$fanui-accent-names: map.keys($fanui-accents) !default;
+
+/// 取某主题色的调色板。
+@function fanui-accent-palette($name) {
+  @if not map.has-key($fanui-accents, $name) {
+    @error "fanUI: 未知主题色 `#{$name}`，可用值：#{$fanui-accent-names}。";
+  }
+  @return map.get(map.get($fanui-accents, $name), "palette");
+}
+
+/// 取某主题色的元数据字段。
+@function fanui-accent-meta($name, $key) {
+  @if not map.has-key($fanui-accents, $name) {
+    @error "fanUI: 未知主题色 `#{$name}`。";
+  }
+  @return map.get(map.get($fanui-accents, $name), $key);
+}

package/src/utilities/_borders.scss

@@ -0,0 +1,104 @@
+// =============================================================================
+// fanUI · 边框 / 圆角 工具类 (Borders)
+// =============================================================================
+
+@use "sass:map";
+@use "../functions" as fn;
+@use "../variables" as v;
+@use "../mixins" as mx;
+
+// -----------------------------------------------------------------------------
+// 1. 边框宽度
+// -----------------------------------------------------------------------------
+
+.fanui-border        { border: fn.fanui-var("border-width", 1px) solid fn.fanui-var("color-border"); }
+.fanui-border-0      { border-width: 0; }
+.fanui-border-top     { border-top: 1px solid fn.fanui-var("color-border"); }
+.fanui-border-right   { border-inline-end: 1px solid fn.fanui-var("color-border"); }
+.fanui-border-bottom  { border-bottom: 1px solid fn.fanui-var("color-border"); }
+.fanui-border-left    { border-inline-start: 1px solid fn.fanui-var("color-border"); }
+.fanui-border-top-0    { border-top-width: 0; }
+.fanui-border-right-0  { border-inline-end-width: 0; }
+.fanui-border-bottom-0 { border-bottom-width: 0; }
+.fanui-border-left-0   { border-inline-start-width: 0; }
+
+.fanui-border-thick { border-width: 2px; }
+.fanui-border-dashed { border-style: dashed; }
+.fanui-border-dotted { border-style: dotted; }
+.fanui-border-none   { border: none; }
+
+// -----------------------------------------------------------------------------
+// 2. 边框颜色
+// -----------------------------------------------------------------------------
+
+.fanui-border-default { border-color: fn.fanui-var("color-border"); }
+.fanui-border-subtle  { border-color: fn.fanui-var("color-border-subtle"); }
+.fanui-border-strong  { border-color: fn.fanui-var("color-border-strong"); }
+.fanui-border-primary { border-color: fn.fanui-var("primary"); }
+.fanui-border-current { border-color: currentColor; }
+.fanui-border-transparent { border-color: transparent; }
+
+@each $name, $color in v.$fanui-theme-colors {
+  .fanui-border-#{$name} { border-color: fn.fanui-var("#{$name}"); }
+}
+
+// -----------------------------------------------------------------------------
+// 3. 圆角
+// -----------------------------------------------------------------------------
+
+@each $name, $value in v.$fanui-radii {
+  .fanui-rounded-#{$name} {
+    border-radius: fn.fanui-var("radius-#{$name}", $value);
+  }
+}
+
+.fanui-rounded      { border-radius: fn.fanui-var("radius-base"); }
+.fanui-rounded-full { border-radius: 9999px; }
+
+.fanui-rounded-top    { border-radius: fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0 0; }
+.fanui-rounded-bottom { border-radius: 0 0 fn.fanui-var("radius-base") fn.fanui-var("radius-base"); }
+.fanui-rounded-start  { border-radius: fn.fanui-var("radius-base") 0 0 fn.fanui-var("radius-base"); }
+.fanui-rounded-end    { border-radius: 0 fn.fanui-var("radius-base") fn.fanui-var("radius-base") 0; }
+
+// -----------------------------------------------------------------------------
+// 4. 分割线 / 分隔符
+// -----------------------------------------------------------------------------
+
+.fanui-divider {
+  height: 1px;
+  margin: fn.fanui-var("space-4") 0;
+  background-color: fn.fanui-var("color-border");
+  border: 0;
+}
+
+.fanui-divider--vertical {
+  width: 1px;
+  height: auto;
+  min-height: 1em;
+  margin: 0 fn.fanui-var("space-3");
+  align-self: stretch;
+}
+
+.fanui-divider--dashed {
+  background: none;
+  border-top: 1px dashed fn.fanui-var("color-border");
+}
+
+// 带文字的分割线
+.fanui-divider-text {
+  display: flex;
+  align-items: center;
+  gap: fn.fanui-var("space-3");
+  margin: fn.fanui-var("space-4") 0;
+  font-size: fn.fanui-var("font-size-sm");
+  color: fn.fanui-var("color-text-subtle");
+  white-space: nowrap;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1 1 auto;
+    height: 1px;
+    background-color: fn.fanui-var("color-border");
+  }
+}