@fox-js/foxui 4.0.1-94 → 4.0.1-95

package/dist/theme/index.scss

@@ -0,0 +1,248 @@
+@use 'sass:map';
+@use './common/color' as *;
+@use './common/typography' as *;
+@use './common/border' as *;
+@use './common/fill' as *;
+@use './common/shadow' as *;
+@use './common/base' as *;
+@use './mixins/css-var' as *;
+@use './components/actionsheet' as *;
+@use './components/avatar' as *;
+@use './components/backtop' as *;
+@use './components/badge' as *;
+@use './components/button' as *;
+@use './components/buttons-item' as *;
+@use './components/calendar' as *;
+@use './components/card' as *;
+@use './components/cascader' as *;
+@use './components/cell' as *;
+@use './components/checkbox' as *;
+@use './components/circleprogress' as *;
+@use './components/collapse' as *;
+@use './components/content' as *;
+@use './components/countdown' as *;
+@use './components/dialog' as *;
+@use './components/divider' as *;
+@use './components/elevator' as *;
+@use './components/ellipsis' as *;
+@use './components/empty' as *;
+@use './components/fixednav' as *;
+@use './components/floating-button' as *;
+@use './components/footer' as *;
+@use './components/footer-bar' as *;
+@use './components/form' as *;
+@use './components/grid' as *;
+@use './components/group' as *;
+@use './components/header-bar' as *;
+@use './components/hint-text' as *;
+@use './components/icon' as *;
+@use './components/indicator' as *;
+@use './components/infiniteloading' as *;
+@use './components/input' as *;
+@use './components/input-number' as *;
+@use './components/link-item' as *;
+@use './components/list' as *;
+@use './components/menu' as *;
+@use './components/messagebox' as *;
+@use './components/navbar' as *;
+@use './components/noticebar' as *;
+@use './components/notify' as *;
+@use './components/numberkeyboard' as *;
+@use './components/pagination' as *;
+@use './components/picker' as *;
+@use './components/popover' as *;
+@use './components/popover-dialog' as *;
+@use './components/popup' as *;
+@use './components/popup-wrapper' as *;
+@use './components/price' as *;
+@use './components/progress' as *;
+@use './components/radio' as *;
+@use './components/range' as *;
+@use './components/rate' as *;
+@use './components/row-item' as *;
+@use './components/searchbar' as *;
+@use './components/shortpassword' as *;
+@use './components/sidenavbar' as *;
+@use './components/skeleton' as *;
+@use './components/slot-item' as *;
+@use './components/steps' as *;
+@use './components/steps-bar' as *;
+@use './components/swiper' as *;
+@use './components/switch' as *;
+@use './components/switch-item' as *;
+@use './components/tabbar' as *;
+@use './components/table' as *;
+@use './components/tabs-bar' as *;
+@use './components/tabs-frame' as *;
+@use './components/tag' as *;
+@use './components/text' as *;
+@use './components/textarea' as *;
+@use './components/toast' as *;
+@use './components/trendarrow' as *;
+@use './components/uploader' as *;
+@use './components/watermark' as *;
+
+:root {
+  // colors
+  @include gen-color-css-vars($colors);
+  // 补充不生成的变量
+  --fox-color-primary: #{$color-primary};
+  --fox-color-success: #{$color-success};
+  --fox-color-warning: #{$color-warning};
+  --fox-color-danger: #{$color-danger};
+  --fox-color-info: #{$color-info};
+
+  // text-color
+  @each $type, $value in $text-color {
+    --fox-text-color-#{$type}: #{$value};
+  }
+
+  // border color
+  @each $type, $value in $border-color {
+    --fox-border-color-#{$type}: #{$value};
+  }
+
+  // fill color
+  @each $type, $value in $fill-color {
+    --fox-fill-color-#{$type}: #{$value};
+  }
+
+  // white color
+  --fox-white: #{$white};
+  // back color
+  --fox-black: #{$black};
+  // 填充色
+  --fox-fill-color-base: #{$fill-color-base};
+  // 背景色
+  --fox-background-color: #{$background-color};
+  // 标题常规文字色
+  --fox-title-color: #{$title-color};
+  // 副标题色
+  --fox-title-color-secondary: #{$title-color-secondary};
+  // 常规文字色
+  --fox-text-color-regular: #{$text-color-regular};
+  // 次要文字色
+  --fox-text-color-secondary: #{$text-color-secondary};
+  // 特殊禁用色
+  --fox-disabled-color: #{$disabled-color};
+  // 只读颜色
+  --fox-readonly-color: #{$readonly-color};
+  // 必输颜色
+  --fox-required-colo: #{$required-color};
+
+  // font size
+  --fox-font-size-extra-small: #{$font-size-extra-small};
+  --fox-font-size-small: #{$font-size-small};
+  --fox-font-size-base: #{$font-size-base};
+  --fox-font-size-medium: #{$font-size-medium};
+  --fox-font-size-large: #{$font-size-large};
+  --fox-font-size-extra-large: #{$font-size-extra-large};
+  --fox-font-weight-bold: #{$font-weight-bold};
+  --fox-line-height-base: #{$line-height-base};
+
+  // 动画
+  --fox-animation-duration: #{$animation-duration};
+  --fox-animation-timing-fun: #{$animation-timing-fun};
+
+  // font family
+  --fox-font-family: #{$font-family};
+
+  // box shadow
+  --fox-box-shadow-light: #{$box-shadow-light};
+  --fox-box-shadow-lighter: #{$box-shadow-lighter};
+  --fox-box-shadow: #{$box-shadow};
+  --fox-fooer-bar-box-shadow: none;
+
+  // 暗黑风格
+  --fox-dark-background: #{$dark-background};
+  --fox-dark-background-2: #{$dark-background-2};
+  --fox-dark-background-3: #{$dark-background-3};
+  --fox-dark-background-4: #{$dark-background-4};
+  --fox-dark-background-5: #{$dark-background-5};
+  --fox-dark-color: #{$dark-color};
+  --fox-dark-color-2: #{$dark-color-2};
+  --fox-dark-color-gray: #{$dark-color-gray};
+  --fox-dark-calendar-choose-color: #{$dark-calendar-choose-color};
+
+  // overlay
+  --fox-overlay-bg-color: #{$overlay-bg-color};
+  --fox-overlay-text-bg-color: #{$overlay-text-bg-color};
+
+  @include gen-component-css-vars('actionsheet', $actionsheet);
+  @include gen-component-css-vars('avatar', $avatar);
+  @include gen-component-css-vars('backtop', $backtop);
+  @include gen-component-css-vars('badge', $badge);
+  @include gen-component-css-vars('button', $button);
+  @include gen-component-css-vars('buttons-item', $buttons-item);
+  @include gen-component-css-vars('calendar', $calendar);
+  @include gen-component-css-vars('card', $card);
+  @include gen-component-css-vars('cascader', $cascader);
+  @include gen-component-css-vars('cell', $cell);
+  @include gen-component-css-vars('cell-group', $cell-group);
+  @include gen-component-css-vars('checkbox', $checkbox);
+  @include gen-component-css-vars('circleprogress', $circleprogress);
+  @include gen-component-css-vars('collapse', $collapse);
+  @include gen-component-css-vars('content', $content);
+  @include gen-component-css-vars('countdown', $countdown);
+  @include gen-component-css-vars('dialog', $dialog);
+  @include gen-component-css-vars('divider', $divider);
+  @include gen-component-css-vars('elevator', $elevator);
+  @include gen-component-css-vars('ellipsis', $ellipsis);
+  @include gen-component-css-vars('empty', $empty);
+  @include gen-component-css-vars('fixednav', $fixednav);
+  @include gen-component-css-vars('floating-button', $floating-button);
+  @include gen-component-css-vars('footer', $footer);
+  @include gen-component-css-vars('footer-bar', $footer-bar);
+  @include gen-component-css-vars('form', $form);
+  @include gen-component-css-vars('grid', $grid);
+  @include gen-component-css-vars('group', $group);
+  @include gen-component-css-vars('header-bar', $header-bar);
+  @include gen-component-css-vars('hint-text', $hint-text);
+  @include gen-component-css-vars('icon', $icon);
+  @include gen-component-css-vars('indicator', $indicator);
+  @include gen-component-css-vars('infiniteloading', $infiniteloading);
+  @include gen-component-css-vars('input', $input);
+  @include gen-component-css-vars('input-item', $input-item);
+  @include gen-component-css-vars('input-number', $input-number);
+  @include gen-component-css-vars('link-item', $link-item);
+  @include gen-component-css-vars('list', $list);
+  @include gen-component-css-vars('menu', $menu);
+  @include gen-component-css-vars('messagebox', $messagebox);
+  @include gen-component-css-vars('navbar', $navbar);
+  @include gen-component-css-vars('noticebar', $noticebar);
+  @include gen-component-css-vars('notify', $notify);
+  @include gen-component-css-vars('numberkeyboard', $numberkeyboard);
+  @include gen-component-css-vars('pagination', $pagination);
+  @include gen-component-css-vars('picker', $picker);
+  @include gen-component-css-vars('popover', $popover);
+  @include gen-component-css-vars('popover-dialog', $popover-dialog);
+  @include gen-component-css-vars('popup', $popup);
+  @include gen-component-css-vars('popup-wrapper', $popup-wrapper);
+  @include gen-component-css-vars('price', $price);
+  @include gen-component-css-vars('progress', $progress);
+  @include gen-component-css-vars('radio', $radio);
+  @include gen-component-css-vars('range', $range);
+  @include gen-component-css-vars('rate', $rate);
+  @include gen-component-css-vars('row-item', $row-item);
+  @include gen-component-css-vars('searchbar', $searchbar);
+  @include gen-component-css-vars('shortpassword', $shortpassword);
+  @include gen-component-css-vars('sidenavbar', $sidenavbar);
+  @include gen-component-css-vars('skeleton', $skeleton);
+  @include gen-component-css-vars('slot-item', $slot-item);
+  @include gen-component-css-vars('steps', $steps);
+  @include gen-component-css-vars('steps-bar', $steps-bar);
+  @include gen-component-css-vars('swiper', $swiper);
+  @include gen-component-css-vars('switch', $switch);
+  @include gen-component-css-vars('switch-item', $switch-item);
+  @include gen-component-css-vars('tabbar', $tabbar);
+  @include gen-component-css-vars('table', $table);
+  @include gen-component-css-vars('tabs-bar', $tabs-bar);
+  @include gen-component-css-vars('tabs-frame', $tabs-frame);
+  @include gen-component-css-vars('tag', $tag);
+  @include gen-component-css-vars('text', $text);
+  @include gen-component-css-vars('textarea', $textarea);
+  @include gen-component-css-vars('toast', $toast);
+  @include gen-component-css-vars('trendarrow', $trendarrow);
+  @include gen-component-css-vars('uploader', $uploader);
+  @include gen-component-css-vars('watermark', $watermark);
+}

package/dist/theme/mixins/_css-var.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+@mixin gen-color-css-vars($colors-map, $prefix: 'fox') {
+  @each $type, $variants in $colors-map {
+    @if meta.type-of($variants) == 'map' {
+      @each $level, $value in $variants {
+        --#{$prefix}-color-#{$type}-#{$level}: #{$value};
+      }
+    } @else {
+      --#{$prefix}-color-#{$type}: #{$variants};
+    }
+  }
+}
+
+@mixin gen-css-vars($map, $prefix: 'fox') {
+  @each $key, $value in $map {
+    @if meta.type-of($value) == 'map' {
+      @each $sub-key, $sub-value in $value {
+        --#{$prefix}-#{$key}-#{$sub-key}: #{$sub-value};
+      }
+    } @else {
+      --#{$prefix}-#{$key}: #{$value};
+    }
+  }
+}
+
+@mixin gen-component-css-vars($component-name, $map, $prefix: 'fox') {
+  @each $key, $value in $map {
+    @if meta.type-of($value) == 'map' {
+      @each $sub-key, $sub-value in $value {
+        --#{$prefix}-#{$component-name}-#{$key}-#{$sub-key}: #{$sub-value};
+      }
+    } @else {
+      --#{$prefix}-#{$component-name}-#{$key}: #{$value};
+    }
+  }
+}

package/dist/theme/mixins/index.scss

@@ -0,0 +1 @@
+@forward 'css-var';

package/dist/theme/readme.md

@@ -0,0 +1,359 @@
+<!--
+ * @Author: 江成
+ * @Date: 2026-06-22 13:47:37
+ * @LastEditors: 江成
+ * @LastEditTime: 2026-06-22 23:32:46
+-->
+
+# Fox Theme Design 系统
+
+Fox 主题 Design 系统用于替代 `ui/foxui/src/styles/variables.scss`，采用 Design Token 架构，将变量从扁平的 Sass 变量重构为结构化的 Map 体系，并自动生成 CSS 自定义属性（CSS Custom Properties），实现运行时主题切换能力。
+
+## 目录结构
+
+```
+theme/
+├── index.scss              # 主入口，生成 :root 下的 CSS 自定义属性
+├── readme.md
+├── common/                 # 基础 Design Token
+│   ├── var.scss            # 基础变量统一导出
+│   ├── color.scss          # 颜色系统（主色、语义色、色阶）
+│   ├── typography.scss     # 排版系统（文字颜色、字号、字重）
+│   ├── border.scss         # 边框系统
+│   ├── fill.scss           # 填充色系统
+│   ├── shadow.scss         # 阴影系统
+│   └── base.scss           # 其他基础快捷变量（动画、遮罩、暗黑、字体等）
+├── components/             # 组件 Design Token
+│   ├── index.scss          # 组件变量统一导出
+│   ├── button.scss         # 按钮组件变量
+│   ├── cell.scss           # 单元格组件变量（含 cell-group）
+│   ├── input.scss          # 输入框组件变量（含 input-item）
+│   ├── steps.scss          # 步骤条组件变量
+│   ├── steps-bar.scss      # 步骤条栏组件变量
+│   ├── tabs-bar.scss       # 标签栏组件变量
+│   ├── tabs-frame.scss     # 标签框架组件变量
+│   ├── ...                 # 其他 70+ 组件变量文件
+│   └── watermark.scss      # 水印组件变量
+├── dark/                   # 暗黑模式
+│   ├── var.scss            # 暗黑模式变量定义
+│   └── css-vars.scss       # 暗黑模式 CSS 自定义属性生成
+└── mixins/                 # 混入工具
+    ├── index.scss          # 混入统一导出
+    └── _css-var.scss       # CSS 变量生成混入
+```
+
+## 核心设计
+
+### 1. Map 结构替代扁平变量
+
+**旧方式（variables.scss）：**
+```scss
+$button-default-height: 38px !default;
+$button-default-color: rgba(102, 102, 102, 1) !default;
+$button-default-bg-color: $white !default;
+$button-primary-color: $white !default;
+$button-primary-bg-color: $color-primary !default;
+// ... 每个属性一个变量，数百个扁平变量
+```
+
+**新方式（theme 系统）：**
+```scss
+$button: () !default;
+$button: map.deep-merge(
+  (
+    'border-radius': 25px,
+    'default': (
+      'height': 38px,
+      'color': rgba(102, 102, 102, 1),
+      'bg-color': $white
+    ),
+    'primary': (
+      'color': $white,
+      'bg-color': $color-primary
+    )
+  ),
+  $button
+);
+```
+
+### 2. 自动生成 CSS 自定义属性
+
+通过 `gen-component-css-vars` 混入，将 Map 结构自动展开为 CSS 自定义属性：
+
+```scss
+@include gen-component-css-vars('button', $button);
+// 生成：
+// --fox-button-border-radius: 25px;
+// --fox-button-default-height: 38px;
+// --fox-button-default-color: rgba(102, 102, 102, 1);
+// --fox-button-default-bg-color: #fff;
+// --fox-button-primary-color: #fff;
+// --fox-button-primary-bg-color: #fa2c19;
+```
+
+### 3. CSS 变量生成规则
+
+| Map 结构 | 生成的 CSS 变量 |
+|---|---|
+| `'key': value` | `--fox-{component}-key: value` |
+| `'key': ('sub': value)` | `--fox-{component}-key-sub: value` |
+
+**注意**：Map key 不应包含组件名前缀。例如 `tabs-bar` 组件的 key 应为 `'icon-size'` 而非 `'bar-icon-size'`，否则会生成重复的 `--fox-tabs-bar-bar-icon-size`。
+
+### 4. 颜色系统
+
+颜色系统基于 Map 自动计算色阶（light-1 ~ light-9, dark-2），通过 `gen-color-css-vars` 混入生成 CSS 变量：
+
+```scss
+// 生成 --fox-color-primary-base, --fox-color-primary-light-1 ~ light-9, --fox-color-primary-dark-2
+@include gen-color-css-vars($colors);
+```
+
+同时补充了简写形式的颜色基础变量，供 `variables.scss` 中的 `var(--fox-color-primary)` 等引用：
+
+```scss
+--fox-color-primary: #{$color-primary};
+--fox-color-success: #{$color-success};
+--fox-color-warning: #{$color-warning};
+--fox-color-danger: #{$color-danger};
+--fox-color-info: #{$color-info};
+```
+
+## 使用方式
+
+### 基本使用
+
+```scss
+// 在项目入口引入
+@use '@fox-js/foxui/theme/index.scss' as *;
+```
+
+### 自定义主题
+
+通过 `@forward ... with` 覆盖 Design Token：
+
+#### 自定义主色
+
+```scss
+@forward '@fox-js/foxui/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #1890ff
+    )
+  )
+);
+
+// 然后引入主题
+@use '@fox-js/foxui/theme/index.scss' as *;
+```
+
+#### 自定义语义色
+
+```scss
+@forward '@fox-js/foxui/common/var.scss' with (
+  $colors: (
+    'success': (
+      'base': #52c41a
+    ),
+    'warning': (
+      'base': #faad14
+    ),
+    'danger': (
+      'base': #f5222d
+    ),
+    'info': (
+      'base': #909399
+    )
+  )
+);
+
+// 然后引入主题
+@use '@fox-js/foxui/theme/index.scss' as *;
+```
+
+#### 自定义字号
+
+```scss
+@forward '@fox-js/foxui/common/base.scss' with (
+  $font-size-extra-small: 11px,
+  $font-size-small: 13px,
+  $font-size-base: 15px,
+  $font-size-medium: 17px,
+  $font-size-large: 19px,
+  $font-size-extra-large: 22px
+);
+
+// 然后引入主题
+@use '@fox-js/foxui/theme/index.scss' as *;
+```
+
+#### 同时自定义颜色和字号
+
+```scss
+@forward '@fox-js/foxui/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #1890ff
+    ),
+    'success': (
+      'base': #52c41a
+    ),
+    'warning': (
+      'base': #faad14
+    ),
+    'danger': (
+      'base': #f5222d
+    ),
+    'info': (
+      'base': #909399
+    )
+  ),
+  $font-size-extra-small: 10px,
+  $font-size-small: 12px,
+  $font-size-base: 14px,
+  $font-size-medium: 16px,
+  $font-size-large: 18px,
+  $font-size-extra-large: 20px
+);
+
+
+// 然后引入主题
+@use '@fox-js/foxui/theme/index.scss' as *;
+```
+
+### 自定义组件变量
+
+```scss
+@forward '@fox-js/foxui/components/button.scss' with (
+  $button: (
+    'border-radius': 8px,
+    'default': (
+      'height': 40px
+    )
+  )
+);
+```
+
+### 暗黑模式
+
+```scss
+// 引入暗黑模式变量
+@use '@fox-js/foxui/theme/dark/css-vars.scss' as *;
+```
+
+暗黑模式会在 `html.dark` 选择器下覆盖 CSS 自定义属性，实现运行时切换。
+
+### 在组件中使用变量
+
+```scss
+// 通过 CSS 变量引用（推荐，支持运行时切换）
+.button {
+  height: var(--fox-button-default-height);
+  color: var(--fox-button-default-color);
+}
+
+// 通过 Sass 变量引用（编译时确定）
+@use '@fox-js/foxui/common/var' as *;
+
+.button {
+  height: map.get($button, 'default', 'height');
+}
+```
+
+## 与 variables.scss 的对比
+
+| 特性 | variables.scss | theme 系统 |
+|---|---|---|
+| 变量结构 | 扁平变量（1000+） | 结构化 Map |
+| CSS 变量生成 | 手动 var() 声明 | 自动生成 |
+| 运行时切换 | 不支持 | 支持 |
+| 主题定制 | 逐个覆盖变量 | Map 合并覆盖 |
+| 暗黑模式 | 需手动定义 | 内置支持 |
+| CSS 变量覆盖率 | - | 100% |
+| 组件变量数 | 75 个组件 | 75 个组件 |
+
+## 基础变量速查
+
+### 颜色
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$color-primary` | 主色 | #fa2c19 |
+| `$color-success` | 成功色 | #67c23a |
+| `$color-warning` | 警告色 | #ffaa08 |
+| `$color-danger` | 危险色 | #dd412c |
+| `$color-info` | 信息色 | #666666 |
+| `$white` | 白色 | #ffffff |
+| `$black` | 黑色 | #000000 |
+
+### 文字颜色
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$title-color` | 标题色 | #1a1a1a |
+| `$title-color-secondary` | 二级标题色 | #666666 |
+| `$text-color-regular` | 正文色 | #808080 |
+| `$text-color-secondary` | 次级文字色 | #909399 |
+| `$disabled-color` | 禁用色 | #cccccc |
+| `$readonly-color` | 只读色 | #808080 |
+| `$required-color` | 必填标识色 | #fa2c19 |
+
+### 字体
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$font-size-extra-small` | 极小字号 | 10px |
+| `$font-size-small` | 小字号 | 12px |
+| `$font-size-base` | 基础字号 | 14px |
+| `$font-size-medium` | 中等字号 | 16px |
+| `$font-size-large` | 大字号 | 18px |
+| `$font-size-extra-large` | 极大字号 | 20px |
+| `$font-weight-bold` | 粗体字重 | 400 |
+| `$line-height-base` | 基础行高 | 1.5 |
+| `$font-family` | 字体族 | PingFang SC, ... |
+
+### 边框
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$border-color-base` | 基础边框色 | #dcdfe6 |
+| `$border-color-light` | 浅边框色 | #e4e7ed |
+| `$border-color-lighter` | 更浅边框色 | #ebeef5 |
+
+### 填充
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$fill-color-base` | 基础填充色 | #f5f5f5 |
+| `$background-color` | 背景色 | #fafafa |
+
+### 阴影
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$box-shadow` | 基础阴影 | 0px 12px 32px 4px ... |
+| `$box-shadow-light` | 轻阴影 | 0px 0px 12px ... |
+| `$box-shadow-lighter` | 更轻阴影 | 0px 0px 8px ... |
+
+### 动画
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$animation-duration` | 动画时长 | 0.25s |
+| `$animation-timing-fun` | 动画缓动 | cubic-bezier(0.55, 0.085, 0.68, 0.53) |
+
+### 遮罩
+
+| 变量 | 说明 | 默认值 |
+|---|---|---|
+| `$overlay-bg-color` | 遮罩背景色 | rgba(0, 0, 0, 0.7) |
+| `$overlay-text-bg-color` | 文字遮罩背景色 | rgba(0, 0, 0, 0.8) |
+
+## 迁移指南
+
+从 `variables.scss` 迁移到 theme 系统：
+
+1. **替换入口引用**：将 `@use '@/styles/variables.scss'` 替换为 `@use '@/theme/common/var'`
+2. **组件变量访问**：将 `$button-default-height` 替换为 `map.get($button, 'default', 'height')`
+3. **CSS 变量使用**：推荐直接使用 `var(--fox-button-default-height)`，无需修改
+4. **主题定制**：使用 `@forward ... with` 覆盖 Map 变量