@zhang_jifan/fanui 2.1.0

package/src/_tokens.scss

@@ -0,0 +1,180 @@
+// =============================================================================
+// fanUI · 设计令牌输出层 · CSS 自定义属性 (Custom Properties)
+// -----------------------------------------------------------------------------
+// 将 SCSS 设计变量统一输出为 `--fanui-*`，运行时可通过 JS / 覆盖 :root 动态换肤。
+// 令牌分层（命名规范）：
+//   --fanui-<色系>-<色阶>      原始调色板        --fanui-primary-600
+//   --fanui-<语义色>[-变体]    语义色角色        --fanui-primary-hover
+//   --fanui-color-<语义>       主题语义色        --fanui-color-text
+//   --fanui-glass-*            液态玻璃          --fanui-glass-intensity
+//   --fanui-<类别>-<名>        功能令牌          --fanui-radius-lg
+//   --fanui-z-<名>             层级              --fanui-z-modal
+//
+// 说明：语义色角色（--fanui-primary / --fanui-success …）由 themes/_accents.scss
+// 统一输出，那里同时处理 12 套主题色 × 深浅模式 × 局部作用域的组合，
+// 本文件只负责「与主题色无关」的令牌。
+// =============================================================================
+
+@use "sass:map";
+@use "functions" as fn;
+@use "variables" as v;
+@use "mixins" as mx;
+@use "glass/tokens" as gt;
+
+:root {
+  // ---- 原始调色板 -----------------------------------------------------------
+  @include mx.fanui-emit-palette(v.$fanui-palette);
+
+  // ---- 主题语义令牌（浅色）--------------------------------------------------
+  @include mx.fanui-emit-theme(v.$fanui-theme-light);
+
+  // ---- 液态玻璃令牌 --------------------------------------------------------
+  @if v.$fanui-enable-glass {
+    @include gt.fanui-emit-glass-tokens("light");
+  }
+
+  // ---- 字体 ----------------------------------------------------------------
+  --fanui-font-sans: #{v.$fanui-font-family-sans};
+  --fanui-font-serif: #{v.$fanui-font-family-serif};
+  --fanui-font-mono: #{v.$fanui-font-family-mono};
+  --fanui-font-base: #{v.$fanui-font-family-base};
+
+  // ---- 字号 ----------------------------------------------------------------
+  @each $name, $size in v.$fanui-font-sizes {
+    @if v.$fanui-font-size-root == 0px {
+      --fanui-font-size-#{$name}: #{$size};
+    } @else {
+      --fanui-font-size-#{$name}: #{fn.fanui-px2rem($size, v.$fanui-font-size-root)};
+    }
+    --fanui-font-size-#{$name}-px: #{$size};
+  }
+
+  // ---- 行高 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-line-heights {
+    --fanui-line-height-#{$name}: #{$value};
+  }
+
+  // ---- 字重 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-font-weights {
+    --fanui-font-weight-#{$name}: #{$value};
+  }
+
+  // ---- 字距 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-letter-spacings {
+    --fanui-tracking-#{$name}: #{$value};
+  }
+
+  // ---- 间距标尺 ------------------------------------------------------------
+  @each $name, $value in v.$fanui-spacers {
+    --fanui-space-#{$name}: #{$value};
+  }
+
+  // ---- 圆角 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-radii {
+    --fanui-radius-#{$name}: #{$value};
+  }
+  --fanui-radius: #{v.$fanui-radius-base};
+
+  // ---- 阴影 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-shadows {
+    --fanui-shadow-#{$name}: #{$value};
+  }
+
+  // ---- 层级 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-zindexes {
+    --fanui-z-#{$name}: #{$value};
+  }
+
+  // ---- 动效 ----------------------------------------------------------------
+  @each $name, $value in v.$fanui-durations {
+    --fanui-duration-#{$name}: #{$value};
+  }
+  --fanui-ease-linear: #{v.$fanui-ease-linear};
+  --fanui-ease-in: #{v.$fanui-ease-in};
+  --fanui-ease-out: #{v.$fanui-ease-out};
+  --fanui-ease-in-out: #{v.$fanui-ease-in-out};
+  --fanui-ease-spring: #{v.$fanui-ease-spring};
+  --fanui-ease-base: #{v.$fanui-ease-base};
+
+  // ---- 控件尺寸 ------------------------------------------------------------
+  @each $name, $value in v.$fanui-control-heights {
+    --fanui-control-h-#{$name}: #{$value};
+  }
+  --fanui-control-h: #{v.$fanui-control-height-base};
+  --fanui-control-px: #{v.$fanui-control-padding-x};
+  --fanui-control-font-size: #{v.$fanui-control-font-size};
+  --fanui-control-radius: #{v.$fanui-control-radius};
+  --fanui-border-width: #{v.$fanui-border-width};
+  --fanui-border-width-thick: #{v.$fanui-border-width-thick};
+
+  // ---- 栅格 ----------------------------------------------------------------
+  --fanui-grid-columns: #{v.$fanui-grid-columns};
+  --fanui-grid-gutter-x: #{v.$fanui-grid-gutter-x};
+  --fanui-grid-gutter-y: #{v.$fanui-grid-gutter-y};
+  --fanui-gutter-x: #{v.$fanui-grid-gutter-x};
+  --fanui-gutter-y: #{v.$fanui-grid-gutter-y};
+
+  // ---- 遮罩 ----------------------------------------------------------------
+  --fanui-backdrop-bg: #{v.$fanui-backdrop-bg};
+  --fanui-backdrop-blur: #{v.$fanui-backdrop-blur};
+
+  // ---- 焦点环（C3 无障碍）：运行时可覆盖，键盘策略见 :focus-visible 全局规则 ----
+  --fanui-focus-ring-color: #{fn.fanui-var("primary-ring")};
+  --fanui-focus-ring-width: #{v.$fanui-focus-ring-width};
+  --fanui-focus-ring-offset: #{v.$fanui-focus-ring-offset};
+
+  // ---- 断点参考（供 JS 读取，保持 CSS/JS 一致）-----------------------------
+  @each $name, $value in v.$fanui-breakpoints {
+    --fanui-bp-#{$name}: #{$value};
+  }
+  @each $name, $value in v.$fanui-container-max-widths {
+    --fanui-container-max-#{$name}: #{$value};
+  }
+  --fanui-container-px: #{v.$fanui-container-padding-x};
+}
+
+// =============================================================================
+// 暗色主题
+// =============================================================================
+
+@if v.$fanui-enable-dark-mode {
+  // 1) 显式指定暗色
+  //    注意：这里只输出「与主题色无关」的中性令牌；
+  //    主题色角色由 themes/_accents.scss 输出，避免选择器权重互相覆盖。
+  [data-fanui-theme="dark"],
+  :root[data-fanui-theme="dark"] {
+    @include mx.fanui-emit-theme(v.$fanui-theme-dark);
+
+    --fanui-backdrop-bg: #{fn.fanui-alpha(#020617, 0.68)};
+
+    @if v.$fanui-enable-glass {
+      @include gt.fanui-emit-glass-tokens("dark");
+    }
+  }
+
+  // 2) 跟随系统：需显式声明 <html data-fanui-theme="auto">
+  @media (prefers-color-scheme: dark) {
+    [data-fanui-theme="auto"],
+    :root[data-fanui-theme="auto"] {
+      @include mx.fanui-emit-theme(v.$fanui-theme-dark);
+
+      --fanui-backdrop-bg: #{fn.fanui-alpha(#020617, 0.68)};
+
+      @if v.$fanui-enable-glass {
+        @include gt.fanui-emit-glass-tokens("dark");
+      }
+    }
+  }
+}
+
+// =============================================================================
+// 便捷工具：显式锁定浅色（覆盖系统偏好）
+// =============================================================================
+
+:root[data-fanui-theme="light"] {
+  @include mx.fanui-emit-theme(v.$fanui-theme-light);
+
+  @if v.$fanui-enable-glass {
+    @include gt.fanui-emit-glass-tokens("light");
+  }
+}

package/src/_variables.scss

@@ -0,0 +1,491 @@
+// =============================================================================
+// fanUI · 设计变量层 (Design Tokens · SCSS)
+// -----------------------------------------------------------------------------
+// 全部变量以 `$fanui-` 为前缀，均带 `!default`，可在引入时按需覆盖：
+//
+//   @use "@zhang_jifan/fanui" with (
+//     $fanui-primary: #7c3aed,
+//     $fanui-radius-base: 8px
+//   );
+// =============================================================================
+
+@use "sass:map";
+@use "functions" as fn;
+@use "themes/palettes" as pal;
+
+// -----------------------------------------------------------------------------
+// 0. 运行时主题能力开关
+// -----------------------------------------------------------------------------
+
+/// 是否输出 12 套主题色（关闭可显著减小产物体积）
+$fanui-enable-accent-themes: true !default;
+
+/// 主题色切换属性名：<html data-fanui-accent="cyan">
+$fanui-accent-attribute: "data-fanui-accent" !default;
+
+/// 是否输出液态玻璃令牌与组件
+$fanui-enable-glass: true !default;
+
+/// 液态玻璃关闭属性：<html data-fanui-glass="off">
+$fanui-glass-attribute: "data-fanui-glass" !default;
+
+/// 默认主题色（见 themes/_palettes.scss，默认 cyan 青）
+$fanui-accent-default: pal.$fanui-accent-default !default;
+
+// -----------------------------------------------------------------------------
+// 1. 调色板 (Palette) —— 每个色系 50 / 100 … 900 / 950 共 11 阶
+// -----------------------------------------------------------------------------
+
+$fanui-palette: (
+  // 主题主色（默认 = cyan，运行时可通过 data-fanui-accent 换成另外 11 套）
+  "primary": pal.fanui-accent-palette($fanui-accent-default),
+  // 和声副色（cyan 的推荐配对：violet）
+  "accent": pal.fanui-accent-palette("violet"),
+  // 成功 · 绿
+  "success": (
+    50: #ecfdf5, 100: #d1fae5, 200: #a7f3d0, 300: #6ee7b7, 400: #34d399,
+    500: #10b981, 600: #059669, 700: #047857, 800: #065f46, 900: #064e3b, 950: #022c22
+  ),
+  // 警告 · 琥珀
+  "warning": (
+    50: #fffbeb, 100: #fef3c7, 200: #fde68a, 300: #fcd34d, 400: #fbbf24,
+    500: #f59e0b, 600: #d97706, 700: #b45309, 800: #92400e, 900: #78350f, 950: #451a03
+  ),
+  // 危险 · 红
+  "danger": (
+    50: #fef2f2, 100: #fee2e2, 200: #fecaca, 300: #fca5a5, 400: #f87171,
+    500: #ef4444, 600: #dc2626, 700: #b91c1c, 800: #991b1b, 900: #7f1d1d, 950: #450a0a
+  ),
+  // 信息 · 天蓝
+  "info": (
+    50: #f0f9ff, 100: #e0f2fe, 200: #bae6fd, 300: #7dd3fc, 400: #38bdf8,
+    500: #0ea5e9, 600: #0284c7, 700: #0369a1, 800: #075985, 900: #0c4a6e, 950: #082f49
+  ),
+  // 中性 · 石板灰
+  "neutral": (
+    0:   #ffffff, 50: #f8fafc, 100: #f1f5f9, 200: #e2e8f0, 300: #cbd5e1,
+    400: #94a3b8, 500: #64748b, 600: #475569, 700: #334155, 800: #1e293b,
+    900: #0f172a, 950: #020617
+  )
+) !default;
+
+/// 语义色主阶。
+///
+/// v2 变化：语义实心色统一采用 700 阶 —— 因为 600 阶（如 #059669 / #d97706）
+/// 与白色文字对比度不足 4.5:1。改用 700 阶后：
+///   · 实心按钮/徽标上的白字全部达到 WCAG AA
+///   · 语义文字色（.fanui-text-success 等）落在白底上也达到 4.5:1
+/// 500/600 阶仍然保留为 `-vivid`，供渐变、光晕、图表等装饰场景使用。
+$fanui-primary:      fn.fanui-palette($fanui-palette, "primary", 700) !default;
+$fanui-accent:       fn.fanui-palette($fanui-palette, "accent", 600) !default;
+$fanui-success:      fn.fanui-palette($fanui-palette, "success", 700) !default;
+$fanui-warning:      fn.fanui-palette($fanui-palette, "warning", 700) !default;
+$fanui-danger:       fn.fanui-palette($fanui-palette, "danger", 700) !default;
+$fanui-info:         fn.fanui-palette($fanui-palette, "info", 700) !default;
+
+/// 鲜亮色（装饰用途，不承担白字可读性义务）
+$fanui-primary-vivid: fn.fanui-palette($fanui-palette, "primary", 500) !default;
+$fanui-accent-vivid:  fn.fanui-palette($fanui-palette, "accent", 500) !default;
+$fanui-success-vivid: fn.fanui-palette($fanui-palette, "success", 500) !default;
+$fanui-warning-vivid: fn.fanui-palette($fanui-palette, "warning", 500) !default;
+$fanui-danger-vivid:  fn.fanui-palette($fanui-palette, "danger", 500) !default;
+$fanui-info-vivid:    fn.fanui-palette($fanui-palette, "info", 500) !default;
+
+/// 语义色集合，供按钮/徽标/警告框等变体批量生成
+$fanui-theme-colors: (
+  "primary": $fanui-primary,
+  "accent":  $fanui-accent,
+  "success": $fanui-success,
+  "warning": $fanui-warning,
+  "danger":  $fanui-danger,
+  "info":    $fanui-info
+) !default;
+
+/// 语义色对应的鲜亮色
+$fanui-theme-colors-vivid: (
+  "primary": $fanui-primary-vivid,
+  "accent":  $fanui-accent-vivid,
+  "success": $fanui-success-vivid,
+  "warning": $fanui-warning-vivid,
+  "danger":  $fanui-danger-vivid,
+  "info":    $fanui-info-vivid
+) !default;
+
+// -----------------------------------------------------------------------------
+// 2. 断点 (Breakpoints) —— 移动优先
+// -----------------------------------------------------------------------------
+
+$fanui-breakpoints: (
+  "xs":  0,
+  "sm":  576px,
+  "md":  768px,
+  "lg":  992px,
+  "xl":  1200px,
+  "xxl": 1400px
+) !default;
+
+/// 容器在各断点下的最大宽度
+$fanui-container-max-widths: (
+  "sm":  540px,
+  "md":  720px,
+  "lg":  960px,
+  "xl":  1140px,
+  "xxl": 1320px
+) !default;
+
+$fanui-container-padding-x: 16px !default;
+$fanui-container-fluid-max: 100% !default;
+
+/// 栅格
+$fanui-grid-columns: 12 !default;
+$fanui-grid-gutter-x: 24px !default;
+$fanui-grid-gutter-y: 0 !default;
+
+// -----------------------------------------------------------------------------
+// 3. 间距标尺 (Spacing) —— 4px 基准栅格
+// -----------------------------------------------------------------------------
+
+$fanui-spacer: 4px !default;
+
+$fanui-spacers: (
+  0:  0,
+  1:  4px,
+  2:  8px,
+  3:  12px,
+  4:  16px,
+  5:  20px,
+  6:  24px,
+  7:  28px,
+  8:  32px,
+  10: 40px,
+  12: 48px,
+  16: 64px,
+  20: 80px,
+  24: 96px,
+  "auto": auto
+) !default;
+
+/// 供间距工具类生成的子集（不含 auto）
+$fanui-spacers-utilities: (
+  0: 0, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 20px, 6: 24px,
+  8: 32px, 10: 40px, 12: 48px, 16: 64px, 20: 80px, 24: 96px
+) !default;
+
+// -----------------------------------------------------------------------------
+// 4. 字体排版 (Typography)
+// -----------------------------------------------------------------------------
+
+$fanui-font-family-sans: (
+  -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+  "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
+  sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
+) !default;
+
+$fanui-font-family-serif: (
+  Georgia, Cambria, "Times New Roman", "Songti SC", "SimSun", serif
+) !default;
+
+$fanui-font-family-mono: (
+  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+  "Liberation Mono", "Courier New", monospace
+) !default;
+
+$fanui-font-family-base: $fanui-font-family-sans !default;
+
+/// 字号标尺（推荐：配合 token 以 rem 输出）
+$fanui-font-sizes: (
+  "xs":   12px,
+  "sm":   13px,
+  "base": 14px,
+  "md":   16px,
+  "lg":   18px,
+  "xl":   20px,
+  "2xl":  24px,
+  "3xl":  30px,
+  "4xl":  36px,
+  "5xl":  48px,
+  "6xl":  60px
+) !default;
+
+$fanui-font-size-root: 16px !default;
+$fanui-line-height-base: 1.5715 !default;
+
+/// 行高标尺
+$fanui-line-heights: (
+  "none":    1,
+  "tight":   1.25,
+  "snug":    1.375,
+  "normal":  1.5,
+  "base":    1.5715,
+  "relaxed": 1.625,
+  "loose":   2
+) !default;
+
+/// 字重标尺
+$fanui-font-weights: (
+  "light":     300,
+  "normal":    400,
+  "medium":    500,
+  "semibold":  600,
+  "bold":      700,
+  "extrabold": 800
+) !default;
+
+/// 字距
+$fanui-letter-spacings: (
+  "tighter": -0.05em,
+  "tight":   -0.025em,
+  "normal":  0,
+  "wide":    0.025em,
+  "wider":   0.05em,
+  "widest":  0.1em
+) !default;
+
+$fanui-heading-margin-bottom: 0.5em !default;
+$fanui-heading-font-weight: map.get($fanui-font-weights, "semibold") !default;
+$fanui-heading-line-height: 1.25 !default;
+$fanui-paragraph-margin-bottom: 1em !default;
+
+// -----------------------------------------------------------------------------
+// 5. 圆角 (Radius)
+// -----------------------------------------------------------------------------
+
+$fanui-radius-none: 0 !default;
+$fanui-radius-sm:   2px !default;
+$fanui-radius-base: 6px !default;
+$fanui-radius-md:   8px !default;
+$fanui-radius-lg:   12px !default;
+$fanui-radius-xl:   16px !default;
+$fanui-radius-2xl:  24px !default;
+$fanui-radius-full: 9999px !default;
+
+$fanui-radii: (
+  "none": $fanui-radius-none,
+  "sm":   $fanui-radius-sm,
+  "base": $fanui-radius-base,
+  "md":   $fanui-radius-md,
+  "lg":   $fanui-radius-lg,
+  "xl":   $fanui-radius-xl,
+  "2xl":  $fanui-radius-2xl,
+  "full": $fanui-radius-full
+) !default;
+
+// -----------------------------------------------------------------------------
+// 6. 阴影 (Elevation)
+// -----------------------------------------------------------------------------
+
+$fanui-shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.05) !default;
+$fanui-shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.10) !default;
+$fanui-shadow-base: 0 4px 6px -1px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06) !default;
+$fanui-shadow-md:  0 6px 12px -2px rgba(15, 23, 42, 0.12), 0 3px 6px -3px rgba(15, 23, 42, 0.08) !default;
+$fanui-shadow-lg:  0 12px 20px -4px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.08) !default;
+$fanui-shadow-xl:  0 20px 32px -8px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.10) !default;
+$fanui-shadow-2xl: 0 32px 64px -16px rgba(15, 23, 42, 0.24) !default;
+$fanui-shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.06) !default;
+
+$fanui-shadows: (
+  "none":  none,
+  "xs":    $fanui-shadow-xs,
+  "sm":    $fanui-shadow-sm,
+  "base":  $fanui-shadow-base,
+  "md":    $fanui-shadow-md,
+  "lg":    $fanui-shadow-lg,
+  "xl":    $fanui-shadow-xl,
+  "2xl":   $fanui-shadow-2xl,
+  "inner": $fanui-shadow-inner
+) !default;
+
+// -----------------------------------------------------------------------------
+// 7. 层级 (z-index)
+// -----------------------------------------------------------------------------
+
+$fanui-zindex-dropdown:   1000 !default;
+$fanui-zindex-sticky:     1020 !default;
+$fanui-zindex-fixed:      1030 !default;
+$fanui-zindex-backdrop:   1040 !default;
+$fanui-zindex-offcanvas:  1050 !default;
+$fanui-zindex-modal:      1060 !default;
+$fanui-zindex-popover:    1070 !default;
+$fanui-zindex-tooltip:    1080 !default;
+$fanui-zindex-toast:      1090 !default;
+
+$fanui-zindexes: (
+  "dropdown":  $fanui-zindex-dropdown,
+  "sticky":    $fanui-zindex-sticky,
+  "fixed":     $fanui-zindex-fixed,
+  "backdrop":  $fanui-zindex-backdrop,
+  "offcanvas": $fanui-zindex-offcanvas,
+  "modal":     $fanui-zindex-modal,
+  "popover":   $fanui-zindex-popover,
+  "tooltip":   $fanui-zindex-tooltip,
+  "toast":     $fanui-zindex-toast
+) !default;
+
+// -----------------------------------------------------------------------------
+// 8. 动效 (Motion)
+// -----------------------------------------------------------------------------
+
+$fanui-duration-instant: 100ms !default;
+$fanui-duration-fast:    150ms !default;
+$fanui-duration-base:    200ms !default;
+$fanui-duration-slow:    300ms !default;
+$fanui-duration-slower:  500ms !default;
+
+$fanui-ease-linear:  linear !default;
+$fanui-ease-in:      cubic-bezier(0.4, 0, 1, 1) !default;
+$fanui-ease-out:     cubic-bezier(0, 0, 0.2, 1) !default;
+$fanui-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1) !default;
+$fanui-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1) !default;
+$fanui-ease-base:    $fanui-ease-in-out !default;
+
+$fanui-durations: (
+  "instant": $fanui-duration-instant,
+  "fast":    $fanui-duration-fast,
+  "base":    $fanui-duration-base,
+  "slow":    $fanui-duration-slow,
+  "slower":  $fanui-duration-slower
+) !default;
+
+// -----------------------------------------------------------------------------
+// 9. 组件级尺寸与外观
+// -----------------------------------------------------------------------------
+
+/// 控件高度标尺
+$fanui-control-heights: (
+  "xs": 24px,
+  "sm": 28px,
+  "md": 32px,
+  "base": 36px,
+  "lg": 40px,
+  "xl": 48px
+) !default;
+
+$fanui-control-height-base: 36px !default;
+$fanui-control-padding-x:   14px !default;
+$fanui-control-font-size:   map.get($fanui-font-sizes, "base") !default;
+$fanui-control-line-height: 1.5 !default;
+$fanui-control-radius:      $fanui-radius-base !default;
+$fanui-control-border-width: 1px !default;
+
+/// 焦点环
+$fanui-focus-ring-width:  3px !default;
+$fanui-focus-ring-offset: 1px !default;
+$fanui-focus-ring-alpha:  0.30 !default;
+
+/// 边框
+$fanui-border-width: 1px !default;
+$fanui-border-width-thick: 2px !default;
+
+/// 遮罩
+$fanui-backdrop-bg: rgba(15, 23, 42, 0.55) !default;
+$fanui-backdrop-blur: 2px !default;
+
+/// 模态框
+$fanui-modal-widths: (
+  "sm":   380px,
+  "base": 520px,
+  "lg":   720px,
+  "xl":   960px,
+  "full": 100%
+) !default;
+
+/// 表格
+$fanui-table-cell-padding-y: 10px !default;
+$fanui-table-cell-padding-x: 14px !default;
+
+/// 字体渲染
+$fanui-body-font-smoothing: true !default;
+$fanui-enable-transitions: true !default;
+$fanui-enable-dark-mode: true !default;
+
+/// 暗色模式选择器（可换成 `.dark`、`.theme-dark` 等）
+$fanui-dark-selector: '[data-fanui-theme="dark"]' !default;
+
+// -----------------------------------------------------------------------------
+// 10. 浅色 / 暗色主题语义令牌
+// -----------------------------------------------------------------------------
+
+/// 浅色主题（默认）
+///
+/// v2.1 无障碍修正（C1）：`color-text-subtle` / `color-disabled-text` 原先取 neutral 400
+/// (#94a3b8)，落在最常见的浅色底（--color-bg #f1f5f9 / --color-bg-subtle #f8fafc /
+/// 白底 #ffffff）上只有 2.4 ~ 2.6 : 1，正文级（< 18.66px）达不到 WCAG AA 4.5:1。
+/// 现改用中性阶 500 与 600 之间的 #5b6b80：白底 5.44、#f8fafc 5.20、#f1f5f9 4.97，
+/// 三档底色全部达标，同时仍明显轻于 `color-text-muted`（#475569），保留层级。
+$fanui-theme-light: (
+  "color-bg":              fn.fanui-palette($fanui-palette, "neutral", 100),
+  "color-bg-subtle":       fn.fanui-palette($fanui-palette, "neutral", 50),
+  "color-surface":         fn.fanui-palette($fanui-palette, "neutral", 0),
+  "color-surface-raised":  fn.fanui-palette($fanui-palette, "neutral", 0),
+  "color-surface-sunken":  fn.fanui-palette($fanui-palette, "neutral", 100),
+  "color-overlay":         fn.fanui-palette($fanui-palette, "neutral", 0),
+  "color-text":            fn.fanui-palette($fanui-palette, "neutral", 900),
+  "color-text-strong":     fn.fanui-palette($fanui-palette, "neutral", 950),
+  "color-text-muted":      fn.fanui-palette($fanui-palette, "neutral", 600),
+  "color-text-subtle":     #5b6b80,
+  "color-text-inverse":    fn.fanui-palette($fanui-palette, "neutral", 0),
+  "color-border":          fn.fanui-palette($fanui-palette, "neutral", 200),
+  "color-border-subtle":   fn.fanui-palette($fanui-palette, "neutral", 100),
+  "color-border-strong":   fn.fanui-palette($fanui-palette, "neutral", 300),
+  "color-hover":           fn.fanui-palette($fanui-palette, "neutral", 100),
+  "color-active":          fn.fanui-palette($fanui-palette, "neutral", 200),
+  "color-disabled-bg":     fn.fanui-palette($fanui-palette, "neutral", 100),
+  "color-disabled-text":   #5b6b80
+) !default;
+
+/// 暗色主题
+///
+/// v2.1 无障碍修正（C1）：`color-text-subtle` 原先取 neutral 500 (#64748b)，
+/// 在 --color-bg #020617 / --color-surface #0f172a 上只有 4.23 / 3.75 : 1。
+/// 现改用 #8592a6：两档底色分别 5.99 / 5.66，达标且仍轻于 muted (#94a3b8)。
+/// `color-disabled-text` 同理从 neutral 600 (#475569) 提亮到 #8592a6，
+/// 在 --color-disabled-bg #1a2332 上由 2.08 提升到 5.01。
+$fanui-theme-dark: (
+  "color-bg":              fn.fanui-palette($fanui-palette, "neutral", 950),
+  "color-bg-subtle":       fn.fanui-palette($fanui-palette, "neutral", 900),
+  "color-surface":         fn.fanui-palette($fanui-palette, "neutral", 900),
+  "color-surface-raised":  fn.fanui-palette($fanui-palette, "neutral", 800),
+  "color-surface-sunken":  fn.fanui-palette($fanui-palette, "neutral", 950),
+  "color-overlay":         fn.fanui-palette($fanui-palette, "neutral", 800),
+  "color-text":            #e8edf5,
+  "color-text-strong":     #ffffff,
+  "color-text-muted":      fn.fanui-palette($fanui-palette, "neutral", 400),
+  "color-text-subtle":     #8592a6,
+  "color-text-inverse":    fn.fanui-palette($fanui-palette, "neutral", 950),
+  "color-border":          #2b3648,
+  "color-border-subtle":   #222c3c,
+  "color-border-strong":   #3d4a60,
+  "color-hover":           #1d2736,
+  "color-active":          #26313f,
+  "color-disabled-bg":     #1a2332,
+  "color-disabled-text":   #8592a6
+) !default;
+
+/// 暗色主题下的语义色（提亮，保证暗背景可读）
+$fanui-theme-dark-colors: (
+  "primary": fn.fanui-palette($fanui-palette, "primary", 400),
+  "accent":  fn.fanui-palette($fanui-palette, "accent", 400),
+  "success": fn.fanui-palette($fanui-palette, "success", 400),
+  "warning": fn.fanui-palette($fanui-palette, "warning", 400),
+  "danger":  fn.fanui-palette($fanui-palette, "danger", 400),
+  "info":    fn.fanui-palette($fanui-palette, "info", 400)
+) !default;
+
+/// 参与「全套角色令牌」输出的语义色名单（primary / accent 由主题色系统驱动，不在此列）
+$fanui-semantic-names: ("success", "warning", "danger", "info") !default;
+
+// -----------------------------------------------------------------------------
+// 11. 液态玻璃 (Liquid Glass) 配置
+// -----------------------------------------------------------------------------
+
+/// 开启了玻璃材质的组件默认预设：thin | regular | thick | ultra | lens
+$fanui-glass-default-preset: "regular" !default;
+
+/// 玻璃是否启用镜面高光跟随指针（需要 data-fanui-glass-track 属性，由 JS 驱动）
+$fanui-glass-enable-tracking: true !default;
+
+/// 玻璃是否启用「液体流动」动画（.fanui-glass--flow）
+$fanui-glass-enable-flow: true !default;
+
+/// 玻璃材质的圆角（与全局圆角保持同一标尺）
+$fanui-glass-radius: $fanui-radius-lg !default;