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

package/dist/style.js

@@ -1,3 +1,3 @@
 /*!
-* @fox-js/foxui-base v4.0.0 2026-06-18T01:55:18.537Z
+* @fox-js/foxui-base v4.0.0 2026-06-29T00:47:31.909Z
 */

package/dist/theme/common/base.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use 'color' as *;
+@use 'typography' as *;
+@use 'border' as *;
+@use 'fill' as *;
+@use 'shadow' as *;
+
+$overlay-bg-color: rgba(0, 0, 0, 0.7) !default;
+$overlay-text-bg-color: rgba(0, 0, 0, 0.8) !default;
+
+$dark-background: #131313 !default;
+$dark-background-2: #1b1b1b !default;
+$dark-background-3: #141414 !default;
+$dark-background-4: #323233 !default;
+$dark-background-5: #646566 !default;
+$dark-color: $white !default;
+$dark-color-2: #f2270c !default;
+$dark-color-gray: $text-color-regular !default;
+$dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;
+
+$font-size-extra-small: 10px !default;
+$font-size-small: 12px !default;
+$font-size-base: 14px !default;
+$font-size-medium: 16px !default;
+$font-size-large: 18px !default;
+$font-size-extra-large: 20px !default;
+$font-weight-bold: 400 !default;
+$line-height-base: 1.5 !default;
+
+$animation-duration: 0.25s !default;
+$animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
+
+$font-family:
+  PingFang SC,
+  Microsoft YaHei,
+  Helvetica,
+  Hiragino Sans GB,
+  SimSun,
+  sans-serif !default;

package/dist/theme/common/border.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+
+$border-color: () !default;
+$border-color: map.deep-merge(
+  (
+    'base': #dcdfe6,
+    'light': #e4e7ed,
+    'lighter': #ebeef5,
+    'extra-light': #f2f6fc,
+  ),
+  $border-color
+);
+
+$border-color-base: map.get($border-color, 'base') !default;
+$border-color-light: map.get($border-color, 'light') !default;
+$border-color-lighter: map.get($border-color, 'lighter') !default;

package/dist/theme/common/color.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+@use 'sass:meta';
+@use '../mixins/css-var';
+
+$colors: () !default;
+
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #fa2c19
+    ),
+    'success': (
+      'base': #67c23a
+    ),
+    'warning': (
+      'base': #ffaa08
+    ),
+    'danger': (
+      'base': #dd412c
+    ),
+    'info': (
+      'base': #666666
+    )
+  ),
+  $colors
+);
+
+$color-types: primary, success, warning, danger, info;
+
+@function mix-color($color, $mix-color, $weight) {
+  @return color.mix($mix-color, $color, $weight);
+}
+
+@each $type in $color-types {
+  $base-color: map.get(map.get($colors, $type), 'base');
+
+  @for $i from 1 through 9 {
+    $weight: $i * 10%;
+    $light-color: mix-color($base-color, white, $weight);
+    $colors: map.deep-merge(
+      $colors,
+      (
+        $type: (
+            'light-#{$i}': $light-color
+          )
+      )
+    );
+  }
+
+  $dark-color: mix-color($base-color, black, 20%);
+  $colors: map.deep-merge(
+    $colors,
+    (
+      $type: (
+          'dark-2': $dark-color
+        )
+    )
+  );
+}
+
+$color-primary: map.get(map.get($colors, 'primary'), 'base') !default;
+$color-primary-light-1: map.get(map.get($colors, 'primary'), 'light-1') !default;
+$color-primary-light-2: map.get(map.get($colors, 'primary'), 'light-2') !default;
+$color-primary-light-3: map.get(map.get($colors, 'primary'), 'light-3') !default;
+$color-primary-light-4: map.get(map.get($colors, 'primary'), 'light-4') !default;
+$color-primary-light-5: map.get(map.get($colors, 'primary'), 'light-5') !default;
+$color-primary-light-6: map.get(map.get($colors, 'primary'), 'light-6') !default;
+$color-primary-light-7: map.get(map.get($colors, 'primary'), 'light-7') !default;
+$color-primary-light-8: map.get(map.get($colors, 'primary'), 'light-8') !default;
+$color-primary-light-9: map.get(map.get($colors, 'primary'), 'light-9') !default;
+$color-primary-dark-2: map.get(map.get($colors, 'primary'), 'dark-2') !default;
+
+$color-success: map.get(map.get($colors, 'success'), 'base') !default;
+$color-success-light-1: map.get(map.get($colors, 'success'), 'light-1') !default;
+$color-success-light-2: map.get(map.get($colors, 'success'), 'light-2') !default;
+$color-success-light-3: map.get(map.get($colors, 'success'), 'light-3') !default;
+$color-success-light-4: map.get(map.get($colors, 'success'), 'light-4') !default;
+$color-success-light-5: map.get(map.get($colors, 'success'), 'light-5') !default;
+$color-success-light-6: map.get(map.get($colors, 'success'), 'light-6') !default;
+$color-success-light-7: map.get(map.get($colors, 'success'), 'light-7') !default;
+$color-success-light-8: map.get(map.get($colors, 'success'), 'light-8') !default;
+$color-success-light-9: map.get(map.get($colors, 'success'), 'light-9') !default;
+$color-success-dark-2: map.get(map.get($colors, 'success'), 'dark-2') !default;
+
+$color-warning: map.get(map.get($colors, 'warning'), 'base') !default;
+$color-warning-light-1: map.get(map.get($colors, 'warning'), 'light-1') !default;
+$color-warning-light-2: map.get(map.get($colors, 'warning'), 'light-2') !default;
+$color-warning-light-3: map.get(map.get($colors, 'warning'), 'light-3') !default;
+$color-warning-light-4: map.get(map.get($colors, 'warning'), 'light-4') !default;
+$color-warning-light-5: map.get(map.get($colors, 'warning'), 'light-5') !default;
+$color-warning-light-6: map.get(map.get($colors, 'warning'), 'light-6') !default;
+$color-warning-light-7: map.get(map.get($colors, 'warning'), 'light-7') !default;
+$color-warning-light-8: map.get(map.get($colors, 'warning'), 'light-8') !default;
+$color-warning-light-9: map.get(map.get($colors, 'warning'), 'light-9') !default;
+$color-warning-dark-2: map.get(map.get($colors, 'warning'), 'dark-2') !default;
+
+$color-danger: map.get(map.get($colors, 'danger'), 'base') !default;
+$color-danger-light-1: map.get(map.get($colors, 'danger'), 'light-1') !default;
+$color-danger-light-2: map.get(map.get($colors, 'danger'), 'light-2') !default;
+$color-danger-light-3: map.get(map.get($colors, 'danger'), 'light-3') !default;
+$color-danger-light-4: map.get(map.get($colors, 'danger'), 'light-4') !default;
+$color-danger-light-5: map.get(map.get($colors, 'danger'), 'light-5') !default;
+$color-danger-light-6: map.get(map.get($colors, 'danger'), 'light-6') !default;
+$color-danger-light-7: map.get(map.get($colors, 'danger'), 'light-7') !default;
+$color-danger-light-8: map.get(map.get($colors, 'danger'), 'light-8') !default;
+$color-danger-light-9: map.get(map.get($colors, 'danger'), 'light-9') !default;
+$color-danger-dark-2: map.get(map.get($colors, 'danger'), 'dark-2') !default;
+
+$color-info: map.get(map.get($colors, 'info'), 'base') !default;
+$color-info-light-1: map.get(map.get($colors, 'info'), 'light-1') !default;
+$color-info-light-2: map.get(map.get($colors, 'info'), 'light-2') !default;
+$color-info-light-3: map.get(map.get($colors, 'info'), 'light-3') !default;
+$color-info-light-4: map.get(map.get($colors, 'info'), 'light-4') !default;
+$color-info-light-5: map.get(map.get($colors, 'info'), 'light-5') !default;
+$color-info-light-6: map.get(map.get($colors, 'info'), 'light-6') !default;
+$color-info-light-7: map.get(map.get($colors, 'info'), 'light-7') !default;
+$color-info-light-8: map.get(map.get($colors, 'info'), 'light-8') !default;
+$color-info-light-9: map.get(map.get($colors, 'info'), 'light-9') !default;
+$color-info-dark-2: map.get(map.get($colors, 'info'), 'dark-2') !default;
+
+$white: map.get($colors, 'white') !default;
+$black: map.get($colors, 'black') !default;

package/dist/theme/common/fill.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+
+$fill-color: () !default;
+$fill-color: map.deep-merge(
+  (
+    'base': #f5f5f5,
+    'light': #fafafa,
+    'lighter': #fafcff,
+    'extra-light': #f0f2f5,
+    'dark': #131313,
+    'darker': #646566,
+    'blank': #ffffff
+  ),
+  $fill-color
+);
+
+$fill-color-base: map.get($fill-color, 'base') !default;
+$fill-color-light: map.get($fill-color, 'light') !default;
+$fill-color-lighter: map.get($fill-color, 'lighter') !default;
+$fill-color-extra-light: map.get($fill-color, 'extra-light') !default;
+$fill-color-dark: map.get($fill-color, 'dark') !default;
+$fill-color-darker: map.get($fill-color, 'daker') !default;
+$fill-color-blank: map.get($fill-color, 'blank') !default;
+
+$background-color: map.get($fill-color, 'light') !default;

package/dist/theme/common/shadow.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+
+$shadow: () !default;
+$shadow: map.deep-merge(
+  (
+    'base': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.04),
+      0px 8px 20px rgba(0, 0, 0, 0.08)
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.12)
+    ),
+    'lighter': (
+      0px 0px 8px rgba(0, 0, 0, 0.04)
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.08),
+      0px 12px 32px rgba(0, 0, 0, 0.12),
+      0px 8px 16px -8px rgba(0, 0, 0, 0.16)
+    )
+  ),
+  $shadow
+);
+
+$box-shadow: var(--fox-box-shadow, map.get($shadow, 'base')) !default;
+$box-shadow-light: var(--fox-box-shadow-light, map.get($shadow, 'light')) !default;
+$box-shadow-lighter: var(--fox-box-shadow-lighter, map.get($shadow, 'lighter')) !default;
+$box-shadow-dark: var(--fox-box-shadow-dark, map.get($shadow, 'dark')) !default;

package/dist/theme/common/typography.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+// text color
+$text-color: () !default;
+$text-color: map.deep-merge(
+  (
+    // 标题
+    'primary': #1a1a1a,
+    // 二级标题
+    'title-secondary': #666666,
+    // 正文
+    'regular': #808080,
+    // 次级文字
+    'secondary': #909399,
+    // 占位符
+    'placeholder': #c0c4cc,
+    // 禁用
+    'disabled': #cccccc,
+    // 只读
+    'readonly': #808080,
+    // 必填标识
+    'required': #fa2c19
+  ),
+  $text-color
+);
+
+// 快捷变量
+$title-color: map.get($text-color, 'primary') !default;
+$title-color-secondary: map.get($text-color, 'title-secondary') !default;
+
+$text-color-regular: map.get($text-color, 'regular') !default;
+$text-color-secondary: map.get($text-color, 'secondary') !default;
+$text-color-placeholder: map.get($text-color, 'placeholder') !default;
+
+$disabled-color: map.get($text-color, 'disabled') !default;
+$readonly-color: map.get($text-color, 'readonly') !default;
+
+$required-color: map.get($text-color, 'required') !default;

package/dist/theme/common/var.scss

@@ -0,0 +1,6 @@
+@forward 'color';
+@forward 'typography';
+@forward 'border';
+@forward 'fill';
+@forward 'shadow';
+@forward 'base';

package/dist/theme/components/actionsheet.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$actionsheet: () !default;
+$actionsheet: map.deep-merge(
+  (
+    'footer-button-height': 36px,
+    'footer-button-min-width': 100%,
+    'footer-height': 76px,
+    'header-height': 60px,
+    'header-icon-color': $text-color-secondary,
+    'header-icon-size': $font-size-medium,
+    'header-title-color': $title-color,
+    'header-title-font-size': $font-size-medium,
+    'header-title-font-weight': 600,
+    'header-title-padding': 10px 0,
+    'item-border-bottom': none,
+    'item-font-color': $title-color,
+    'item-font-size': $font-size-base,
+    'item-line-height': 24px,
+    'item-subdesc-font-size': $font-size-small,
+    'light-color': $fill-color-base,
+    'list-height': 380px,
+    'list-inner-height': 100%,
+    'list-item-gutter': 28px,
+    'list-item-height': auto,
+    'list-item-icon-color': var(--fox-radio-icon-unchecked-color),
+    'list-item-icon-size': $font-size-medium,
+    'list-item-label-padding': 0 10px 0 0,
+    'list-item-subtext-color': $text-color-secondary,
+    'list-item-subtext-fox-size': $font-size-small,
+    'list-item-subtext-fox-wieight': 400,
+    'list-item-subtext-margin': 8px 0 0 0,
+    'list-item-text-color': $title-color,
+    'list-item-text-font-size': $font-size-medium,
+    'list-item-text-font-weight': $font-weight-bold,
+    'list-item-text-line-height': 24px,
+    'list-item-text-margin': 0,
+    'padding': 0px 16px,
+    'searchbar-background': $fill-color-base,
+    'searchbar-border': 1px solid $border-color-lighter,
+    'searchbar-height': 40px
+  ),
+  $actionsheet
+);

package/dist/theme/components/avatar.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+$avatar: () !default;
+$avatar: map.deep-merge(
+  (
+    'large-height': 60px,
+    'large-width': 60px,
+    'normal-height': 40px,
+    'normal-width': 40px,
+    'small-height': 32px,
+    'small-width': 32px,
+    'square': 5px,
+  ),
+  $avatar
+);

package/dist/theme/components/backtop.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../common/border' as *;
+
+$backtop: () !default;
+$backtop: map.deep-merge(
+  (
+    'border-color': $border-color-lighter,
+  ),
+  $backtop
+);

package/dist/theme/components/badge.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$badge: () !default;
+$badge: map.deep-merge(
+  (
+    'background-color': $color-primary,
+    'border-radius': 14px,
+    'color': $white,
+    'content-transform': translate(50%, -50%),
+    'dot-border-radius': 7px,
+    'dot-height': 7px,
+    'dot-padding': 0px,
+    'dot-width': 7px,
+    'font-size': $font-size-small,
+    'icon-padding': 4px,
+    'padding': 0 5px,
+    'z-index': 1,
+  ),
+  $badge
+);

package/dist/theme/components/button.scss

@@ -0,0 +1,97 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$button: () !default;
+$button: map.deep-merge(
+  (
+    'border-radius': 25px,
+    'border-width': 1px,
+    'disabled-opacity': 0.68,
+    'default': (
+      'height': 38px,
+      'color': rgba(102, 102, 102, 1),
+      'bg-color': $white,
+      'border-color': rgba(204, 204, 204, 1),
+      'font-size': $font-size-base,
+      'padding': 0 18px,
+      'line-height': 36px
+
+    ),
+    'primary': (
+      'color': $white,
+      'border-color': $color-primary,
+      'bg-color': linear-gradient(135deg, $color-primary 0%, $color-primary 100%),
+      'background-color': $color-primary
+    ),
+    'info': (
+      'color': $white,
+      'border-color': rgba(73, 106, 242, 1),
+      'bg-color': linear-gradient(315deg, rgba(73, 143, 242, 1) 0%, rgba(73, 101, 242, 1) 100%),
+      'background-color': $color-info
+    ),
+    'success': (
+      'color': $white,
+      'border-color': rgba(38, 191, 38, 1),
+      'bg-color': linear-gradient(
+          135deg,
+          rgba(38, 191, 38, 1) 0%,
+          rgba(39, 197, 48, 1) 45%,
+          rgba(40, 207, 63, 1) 83%,
+          rgba(41, 212, 70, 1) 100%
+        ),
+      'background-color': $color-success
+    ),
+    'danger': (
+      'color': $white,
+      'border-color': rgba(250, 44, 25, 1),
+      'bg-color': rgba(250, 44, 25, 1),
+      'background-color': $color-danger
+    ),
+    'warning': (
+      'color': $white,
+      'border-color': rgba(255, 158, 13, 1),
+      'bg-color': linear-gradient(
+          135deg,
+          rgba(255, 158, 13, 1) 0%,
+          rgba(255, 167, 13, 1) 45%,
+          rgba(255, 182, 13, 1) 83%,
+          rgba(255, 190, 13, 1) 100%
+        ),
+      'background-color': $color-warning
+    ),
+    'plain': (
+      'bg-color': $white,
+      'background-color': $white
+    ),
+    'large': (
+      'height': 48px,
+      'line-height': 46px,
+      'font-size': $font-size-base
+
+    ),
+    'small': (
+      'height': 28px,
+      'line-height': 26px,
+      'padding': 0 12px,
+      'font-size': $font-size-small,
+      'round-border-radius': 25px
+    ),
+    'mini': (
+      'height': 24px,
+      'line-height': 1.2,
+      'padding': 0 12px,
+      'font-size': $font-size-small
+
+    ),
+    'block': (
+      'height': 48px,
+      'line-height': 46px
+
+    )
+  ),
+  $button
+);

package/dist/theme/components/buttons-item.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$buttons-item: () !default;
+$buttons-item: map.deep-merge(
+  (
+    'dropdown-link-icon-color': null,
+    'dropdown-link-icon-size': $font-size-medium,
+  ),
+  $buttons-item
+);

package/dist/theme/components/calendar.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$calendar: () !default;
+$calendar: map.deep-merge(
+  (
+    'base-color': $title-color,
+    'base-font': $font-size-medium,
+    'choose-color': $color-primary,
+    'choose-font-color': $color-primary,
+    'day-active-border-radius': 0px,
+    'day-font': $font-size-medium,
+    'day-font-weight': 500,
+    'day67-font-color': $color-primary,
+    'disable-color': $disabled-color,
+    'footer-button-min-width': 100%,
+    'footer-button-height': 44px,
+    'footer-button-background-color': $color-primary,
+    'month-title-font-size': inherit,
+    'popup-height': 85vh,
+    'primary-color': $color-primary,
+    'sub-title-font': $font-size-base,
+    'text-font': $font-size-small,
+    'title-font': $font-size-large,
+    'title-font-weight': 500,
+    'width': 100%
+  ),
+  $calendar
+);

package/dist/theme/components/card.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$card: () !default;
+$card: map.deep-merge(
+  (
+    'font-size-0': $font-size-extra-small,
+    'font-size-1': $font-size-small,
+    'font-size-2': $font-size-base,
+    'font-size-3': $font-size-medium,
+    'left-background-color': inherit,
+    'left-border-radius': 0,
+  ),
+  $card
+);

package/dist/theme/components/cascader.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$cascader: () !default;
+$cascader: map.deep-merge(
+  (
+    'bar-color': $title-color,
+    'bar-font-size': $font-size-large,
+    'bar-line-height': 20px,
+    'bar-padding': 24px 20px 17px,
+    'font-size': $font-size-base,
+    'item-active-color': $color-primary,
+    'item-color': $title-color,
+    'item-font-size': $font-size-base,
+    'item-padding': 10px 20px,
+    'line-height': 22px,
+    'tabs-titles-background-color': $white,
+    'tabs-titles-item-padding': 0 10px,
+  ),
+  $cascader
+);

package/dist/theme/components/cell.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$cell: () !default;
+$cell: map.deep-merge(
+  (
+    'color': $title-color-secondary,
+    'title-font': $font-size-base,
+    'title-desc-font': $font-size-small,
+    'desc-font': $font-size-base,
+    'desc-color': $disabled-color,
+    'border-radius': 6px,
+    'padding': 13px 16px,
+    'line-height': 20px,
+    'after-right': 16px,
+    'after-border-bottom': 1px solid $border-color-lighter,
+    'default-icon-margin': 0 4px 0 0px,
+    'large-title-font': $font-size-large,
+    'large-title-desc-font': $font-size-base,
+    'large-padding': 15px 16px,
+    'background': $white
+  ),
+  $cell
+);
+
+$cell-group: () !default;
+$cell-group: map.deep-merge(
+  (
+    'title-padding': 0 10px,
+    'title-color': $text-color-secondary,
+    'title-font-size': $font-size-base,
+    'title-line-height': 20px,
+    'desc-padding': 0 10px,
+    'desc-color': $text-color-secondary,
+    'desc-font-size': $font-size-small,
+    'desc-line-height': 16px,
+    'background-color': $white
+  ),
+  $cell-group
+);

package/dist/theme/components/checkbox.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$checkbox: () !default;
+$checkbox: map.deep-merge(
+  (
+    'button-background': $white,
+    'button-background-active': $color-primary-light-9,
+    'button-border-color': $border-color-base,
+    'button-border-color-active': $color-primary,
+    'button-border-radius': 4px,
+    'button-font-color-active': $color-primary,
+    'button-font-size': $font-size-small,
+    'button-min-width': 100px,
+    'button-padding': 5px 18px,
+    'icon-color': $color-primary,
+    'icon-disable-color': $disabled-color,
+    'icon-font-size': $font-size-large,
+    'icon-readonly-color': $readonly-color,
+    'icon-unchecked-color': $disabled-color,
+    'label-active-color': $color-primary,
+    'label-color': $title-color,
+    'label-disable-color': $disabled-color,
+    'label-font-size': $font-size-base,
+    'label-margin-left': 15px,
+    'label-readonly-color': $readonly-color,
+    'margin-horizontal': 0 8px 8px 0,
+    'margin-vertical': 0 0 8px 0,
+    'min-width': 0px
+  ),
+  $checkbox
+);

package/dist/theme/components/circleprogress.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$circleprogress: () !default;
+$circleprogress: map.deep-merge(
+  (
+    'path-color': $border-color-light,
+    'primary-color': $color-primary,
+    'text-color': $black,
+    'text-size': $font-size-medium,
+  ),
+  $circleprogress
+);