@fox-js/foxui-pad 4.1.5 → 4.1.7

package/dist/theme/components/numberkeyboard.scss

@@ -0,0 +1,37 @@
+@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 *;
+
+// 数字键盘 组件 Design Token
+$numberkeyboard: () !default;
+$numberkeyboard: map.deep-merge(
+  (
+    'width': 100%,
+    'padding': 0 0 22px 0,
+    'background-color': $fill-color-base,
+    'header-height': 34px,
+    'header-padding': 6px 0 0 0,
+    'header-color': $title-color-secondary,
+    'header-font-size': $font-size-medium,
+    'header-close-padding': 0 16px,
+    'header-close-color': $text-color-secondary,
+    'header-close-font-size': $font-size-base,
+    'header-close-background-color': transparent,
+    'key-background-color': $white,
+    'key-active-background-color': $border-color-lighter,
+    'key-height': 48px,
+    'key-line-height': 1.5,
+    'key-border-radius': 8px,
+    'key-font-size': 28px,
+    'key-font-size-color': $title-color,
+    'key-finish-font-size': $font-size-medium,
+    'key-finish-font-size-color': $white,
+    'key-finish-background-color': $color-primary,
+    'key-activeFinsh-background-color': $color-primary-dark-2,
+  ),
+  $numberkeyboard
+);

package/dist/theme/components/picker.scss

@@ -0,0 +1,28 @@
+@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 *;
+
+// 选择器 组件 Design Token
+$picker: () !default;
+$picker: map.deep-merge(
+  (
+    'width': 40%,
+    'cancel-color': $text-color-regular,
+    'ok-color': $color-primary,
+    'bar-cancel-font-size': $font-size-base,
+    'bar-ok-font-size': $font-size-base,
+    'bar-button-padding': 0 15px,
+    'bar-title-font-size': $font-size-medium,
+    'bar-title-color': $title-color,
+    'bar-title-font-weight': normal,
+    'item-height': 36px,
+    'item-text-color': $title-color,
+    'item-text-font-size': $font-size-base,
+    'item-active-line-border': 1px solid $border-color-light
+  ),
+  $picker
+);

package/dist/theme/components/popover-dialog.scss

@@ -0,0 +1,28 @@
+@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 *;
+
+// 气泡弹层 组件 Design Token
+$popover-dialog: () !default;
+$popover-dialog: map.deep-merge(
+  (
+    'position': fixed,
+    'color': $title-color,
+    'color-dark': $white,
+    'background-color': $white,
+    'background-color-dark': $title-color,
+    'border-radius': 4px,
+    'min-width': 0px,
+    'padding': 12px,
+    'z-index': 2000,
+    'title-font-size': $font-size-medium,
+    'content-font-size': $font-size-base,
+    'arrow-size': $font-size-small,
+    'overlay-background-color': transparent
+  ),
+  $popover-dialog
+);

package/dist/theme/components/popup-wrapper.scss

@@ -0,0 +1,47 @@
+@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 *;
+
+// 弹出层容器 组件 Design Token
+$popup-wrapper: () !default;
+$popup-wrapper: map.deep-merge(
+  (
+    'popup-position': fixed,
+    'popup-width': 80%,
+    'popup-height': auto,
+    'popup-border-radius': 20px,
+    'background': transparent,
+    'min-height': 160px,
+    'padding': 0px,
+    'header-height': 20px,
+    'header-background': transparent,
+    'header-padding': 0px,
+    'header-layout': row nowrap,
+    'header-justify-content': center,
+    'header-align-items': center,
+    'header-font-size': $font-size-medium,
+    'header-font-weight': normal,
+    'header-color': $title-color,
+    'close-inset': 16px 16px auto auto,
+    'close-icon-color': $text-color-secondary,
+    'close-icon-size': $font-size-medium,
+    'footer-border-top': 1px solid $border-color-lighter,
+    'footer-height': auto,
+    'footer-background': transparent,
+    'footer-padding': 0px,
+    'footer-layout': row nowrap,
+    'footer-justify-content': space-around,
+    'footer-align-items': center,
+    'footer-button-padding': 10px,
+    'footer-button-font-size': $font-size-medium,
+    'footer-button-color': $title-color-secondary,
+    'footer-button-color-primary': $color-primary,
+    'footer-button-font-weight': 400,
+    'footer-button-border-left': 1px solid $border-color-lighter
+  ),
+  $popup-wrapper
+);

package/dist/theme/components/popup.scss

@@ -0,0 +1,21 @@
+@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 *;
+
+// 弹出层 组件 Design Token
+$popup: () !default;
+$popup: map.deep-merge(
+  (
+    'position': fixed,
+    'max-height': 100%,
+    'close-icon-margin': 16px,
+    'border-radius': 20px,
+    'close-icon-size': $font-size-small,
+    'close-icon-color': $text-color-secondary
+  ),
+  $popup
+);

package/dist/theme/components/price.scss

@@ -0,0 +1,24 @@
+@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 *;
+
+// 价格 组件 Design Token
+$price: () !default;
+$price: map.deep-merge(
+  (
+    'symbol-big-size': $font-size-large,
+    'big-size': 24px,
+    'decimal-big-size': $font-size-large,
+    'symbol-medium-size': $font-size-base,
+    'medium-size': $font-size-medium,
+    'decimal-medium-size': $font-size-base,
+    'symbol-small-size': $font-size-extra-small,
+    'small-size': $font-size-small,
+    'decimal-small-size': $font-size-extra-small
+  ),
+  $price
+);

package/dist/theme/components/radio.scss

@@ -0,0 +1,36 @@
+@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 *;
+
+// 单选按钮 组件 Design Token
+$radio: () !default;
+$radio: map.deep-merge(
+  (
+    'margin-horizontal': 0 8px 8px 0,
+    'margin-vertical': 0 0 8px 0,
+    'label-color': $title-color,
+    'label-active-color': $color-primary,
+    'label-readonly-color': $readonly-color,
+    'label-disable-color': $disabled-color,
+    'icon-readonly-color': $readonly-color,
+    'icon-disable-color': $disabled-color,
+    'icon-unchecked-color': $disabled-color,
+    'min-width': 0px,
+    'button-min-width': 100px,
+    'button-border-color': $border-color-base,
+    'button-border-color-active': $color-primary,
+    'button-background': $white,
+    'button-background-active': $color-primary-light-9,
+    'button-border-radius': 4px,
+    'button-padding': 5px 18px,
+    'button-font-size': $font-size-small,
+    'label-margin-left': 15px,
+    'label-font-size': $font-size-base,
+    'icon-font-size': $font-size-large
+  ),
+  $radio
+);

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

@@ -0,0 +1,21 @@
+@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 *;
+
+// 行单元 组件 Design Token
+$row-item: () !default;
+$row-item: map.deep-merge(
+  (
+    'column-gap': 12px,
+    'row-gap': null,
+    'divide-margin': 0 10px,
+    'divide-height': 12px,
+    'divide-width': 1px,
+    'divide-color': $border-color-light,
+  ),
+  $row-item
+);

package/dist/theme/components/searchbar.scss

@@ -0,0 +1,29 @@
+@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 *;
+
+// 搜索栏 组件 Design Token
+$searchbar: () !default;
+$searchbar: map.deep-merge(
+  (
+    'background': $white,
+    'right-out-color': $black,
+    'padding': 9px 16px,
+    'width': 100%,
+    'icon-size': $font-size-base,
+    'input-background': $fill-color-base,
+    'input-padding': 0 0 0 13px,
+    'input-height': 32px,
+    'input-width': 100%,
+    'input-border-radius': 16px,
+    'input-box-shadow': $box-shadow-lighter,
+    'input-bar-color': inherit,
+    'input-bar-placeholder-color': inherit,
+    'input-inner-padding': 0 20px 0 10px
+  ),
+  $searchbar
+);

package/dist/theme/components/shortpassword.scss

@@ -0,0 +1,19 @@
+@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 *;
+
+// 短密码 组件 Design Token
+$shortpassword: () !default;
+$shortpassword: map.deep-merge(
+  (
+    'background-color': $fill-color-base,
+    'border-color': $border-color-base,
+    'error': $color-primary,
+    'forget': $text-color-regular,
+  ),
+  $shortpassword
+);

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

@@ -0,0 +1,17 @@
+@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 *;
+
+// 插槽item 组件 Design Token
+$slot-item: () !default;
+$slot-item: map.deep-merge(
+  (
+    'padding': 0,
+    'margin': 0,
+  ),
+  $slot-item
+);

package/dist/theme/components/steps-bar.scss

@@ -0,0 +1,59 @@
+@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 *;
+
+// 步骤条 组件 Design Token
+$steps-bar: () !default;
+$steps-bar: map.deep-merge(
+  (
+    'font-size': $font-size-base,
+    'icon-size': 28px,
+    'normal-color': $white,
+    'active-color': $white,
+    'done-color': $white,
+    'error-color': $white,
+    'half-color': $white,
+    'disabled-color': $white,
+    'text-font-size': $font-size-base,
+    'text-normal-color': $disabled-color,
+    'text-active-color': $black,
+    'text-done-color': $black,
+    'text-error-color': $black,
+    'text-half-color': $black,
+    'text-disabled-color': $black,
+    'icon-font-size': $font-size-base,
+    'icon-border': none,
+    'icon-normal-color': $white,
+    'icon-active-color': $white,
+    'icon-done-color': $white,
+    'icon-error-color': $white,
+    'icon-half-color': $white,
+    'icon-disabled-color': $white,
+    'icon-bg-normal-color': $disabled-color,
+    'icon-bg-active-color': $color-primary,
+    'icon-bg-done-color': $color-success,
+    'icon-bg-error-color': $color-danger,
+    'icon-bg-half-color': $color-warning,
+    'icon-bg-disabled-color': $disabled-color,
+    'line-normal-color': $disabled-color,
+    'line-active-color': $color-primary,
+    'line-border-style': solid,
+    'line-border-width': 1px,
+    'mark-color': $color-primary,
+    'mark-width-vertical': 28px,
+    'mark-height-vertical': 28px,
+    'main-margin-vertical': 0 0 0 0,
+    'main-width-vertical': 100px,
+    'main-height-vertical': auto,
+    'main-line-height-vertical': 28px,
+    'main-margin-horizontal': 10px 0 0 0,
+    'main-width-horizontal': auto,
+    'main-height-horizontal': auto,
+    'main-line-height-horizontal': auto
+  ),
+  $steps-bar
+);

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

@@ -0,0 +1,16 @@
+@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 *;
+
+// 开关 组件 Design Token
+$switch-item: () !default;
+$switch-item: map.deep-merge(
+  (
+    'padding': 0 29px 0 0
+  ),
+  $switch-item
+);

package/dist/theme/components/tabs-bar.scss

@@ -0,0 +1,111 @@
+@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 *;
+
+// 标签栏 组件 Design Token
+$tabs-bar: () !default;
+$tabs-bar: map.deep-merge(
+  (
+    'titles-height-horizontal': 44px,
+    'titles-width-vertical': 100px,
+    'titles-border-radius': 0,
+    'titles-background': $fill-color-base,
+    'item-doit-size': 7px,
+    'item-tip-font-size': $font-size-extra-small,
+    'item-tip-color': $white,
+    'item-tip-background': $color-primary,
+    'item-tip-box-shadow': 0 0 0 1px $white,
+    'item-gutter': 10px,
+    'item-gutter-horizontal': 0px,
+    'item-gutter-vertical': 0px,
+    'item-height-vertical': 40px,
+    'item-min-width-horizontal': 50px,
+    'item-font-size-large': $font-size-medium,
+    'item-font-size-large-active': $font-size-medium,
+    'item-font-size-default': $font-size-base,
+    'item-font-size-default-active': $font-size-base,
+    'item-font-size-small': $font-size-small,
+    'item-font-size-small-active': $font-size-small,
+    'item-color': $title-color,
+    'item-color-active': $title-color,
+    'item-color-disable': $disabled-color,
+    'item-font-weight': normal,
+    'item-font-weight-active': bold,
+    'item-padding-horizontal': 0 12px,
+    'item-padding-vertical': 0px,
+    'item-line-border-radius': 0,
+    'item-line-opacity': 1,
+    'item-line-bottom': 0px,
+    'item-line-color-horizontal': $color-primary,
+    'item-line-color-vertical': $color-primary,
+    'item-line-width-horizontal': 40px,
+    'item-line-height-horizontal': 3px,
+    'item-line-width-vertical': 3px,
+    'item-line-height-vertical': 14px,
+    'item-line-color': $color-primary,
+    'navigation-width': 30px,
+    'navigation-color': $title-color-secondary,
+    'scroll-arrow-width': 20px,
+    'scroll-arrow-color': $title-color-secondary,
+    'item-padding-button': null,
+    'item-gutter-button': 8px,
+    'item-radius-button': 4px,
+    'item-border-button': 1px solid transparent,
+    'item-border-active-button': 1px solid transparent,
+    'item-width-button': 80px,
+    'item-height-button': 32px,
+    'item-font-size-button': $font-size-small,
+    'item-font-size-active-button': $font-size-small,
+    'item-font-weight-button': 400,
+    'item-font-weight-active-button': 400,
+    'item-color-button': $title-color-secondary,
+    'item-color-active-button': $color-primary,
+    'item-background-button': $white,
+    'item-background-active-button': $white,
+    'item-gutter-button-group': 0px,
+    'item-radius-button-group': 8px,
+    'item-border-width-button-group': 1px,
+    'item-width-button-group': 105px,
+    'item-height-button-group': 32px,
+    'item-font-size-button-group': $font-size-base,
+    'item-font-size-active-button-group': $font-size-base,
+    'item-font-weight-button-group': 400,
+    'item-font-weight-active-button-group': 400,
+    'item-color-button-group': $color-primary,
+    'item-color-active-button-group': $white,
+    'item-background-button-group': $white,
+    'item-background-active-button-group': $color-primary,
+    'titles-border-radius-capsule': 16px,
+    'titles-background-capsule': $fill-color-base,
+    'titles-padding-capsule': 5px 8px,
+    'item-gutter-capsule': 0px,
+    'item-radius-capsule': 12px,
+    'item-border-width-capsule': 1px,
+    'item-width-capsule': 100px,
+    'item-height-capsule': 29px,
+    'item-font-size-capsule': $font-size-base,
+    'item-font-size-active-capsule': $font-size-base,
+    'item-font-weight-capsule': 400,
+    'item-font-weight-active-capsule': 400,
+    'item-color-capsule': $title-color-secondary,
+    'item-color-active-capsule': $color-primary,
+    'item-background-capsule': transparent,
+    'item-background-active-capsule': $white,
+    'popup-background': $white,
+    'popup-max-height': 500px,
+    'popup-padding': 12px 0 0 12px,
+    'popup-box-shadow': $box-shadow,
+    'popup-item-background': $fill-color-base,
+    'popup-item-background-active': $color-primary-light-9,
+    'popup-item-color': $title-color,
+    'popup-item-color-active': $color-primary,
+    'popup-item-radius': 16px,
+    'popup-item-padding': 5px 12px 5px 12px,
+    'popup-item-margin': 0px 12px 12px 0
+  ),
+  $tabs-bar
+);

package/dist/theme/components/tabs-frame.scss

@@ -0,0 +1,16 @@
+@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 *;
+
+// Tabs框架 组件 Design Token
+$tabs-frame: () !default;
+$tabs-frame: map.deep-merge(
+  (
+    'bar-margin': 0
+  ),
+  $tabs-frame
+);

package/dist/theme/components/text.scss

@@ -0,0 +1,38 @@
+@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 *;
+
+// 文本 组件 Design Token
+$text: () !default;
+$text: map.deep-merge(
+  (
+    'margin': 0,
+    'padding': 0,
+    'font-size': $font-size-base,
+    'font-size-large': $font-size-large,
+    'font-size-small': $font-size-small,
+    'font-weight': 400,
+    'text-color': $black,
+    'highlight-color': $white,
+    'highlight-background-color': $color-danger,
+    'primary-color': $color-primary,
+    'info-color': $color-info,
+    'warning-color': $color-warning,
+    'danger-color': $color-danger,
+    'success-color': $color-success,
+    'default-color': $color-info,
+    'mark-size': 4px,
+    'mark-text-gutter': 4px,
+    'mark-icon-width': 1em,
+    'mark-icon-height': 1em,
+    'divide-margin': 0 0,
+    'divide-height': 12px,
+    'divide-width': 1px,
+    'divide-color': $border-color-light
+  ),
+  $text
+);

package/dist/theme/components/toast.scss

@@ -0,0 +1,22 @@
+@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 *;
+
+// 消息提示 组件 Design Token
+$toast: () !default;
+$toast: map.deep-merge(
+  (
+    'title-font-size': $font-size-medium,
+    'text-font-size': $font-size-base,
+    'font-color': $white,
+    'inner-padding': 24px 30px,
+    'inner-bg-color': $overlay-text-bg-color,
+    'inner-border-radius': 12px,
+    'cover-bg-color': transparent
+  ),
+  $toast
+);

package/dist/theme/dark/css-vars.scss

@@ -0,0 +1,31 @@
+@use 'var' as *;
+
+// 暗黑模式 CSS 自定义属性
+// 基础 token 已委托 element-plus, html.dark 下自动跟随,
+// 这里覆盖 fox 独有变量以及亮色下写死为白色/浅色的组件变量
+html.dark {
+  // fox 独有文字颜色
+  --fox-readonly-color: #{$dark-readonly-color};
+
+  // 亮色下使用白色背景的组件变量, 暗黑下切换为 element-plus 暗黑背景
+  --fox-searchbar-background: #{$dark-bg-overlay};
+  --fox-header-bar-background-color: #{$dark-bg-overlay};
+  --fox-footer-bar-background-color: #{$dark-bg-overlay};
+  --fox-content-background: #{$dark-bg-overlay};
+  --fox-messagebox-background: #{$dark-bg-overlay};
+  --fox-cascader-tabs-titles-background-color: #{$dark-bg-overlay};
+  --fox-radio-button-background: #{$dark-bg-overlay};
+  --fox-tabs-bar-item-background-button: #{$dark-bg-overlay};
+  --fox-tabs-bar-item-background-active-button: #{$dark-bg-overlay};
+  --fox-tabs-bar-item-background-button-group: #{$dark-bg-overlay};
+  --fox-tabs-bar-item-background-active-capsule: #{$dark-bg-overlay};
+  --fox-tabs-bar-popup-background: #{$dark-bg-overlay};
+  --fox-numberkeyboard-key-background-color: #{$dark-bg-overlay};
+  --fox-popover-dialog-background-color: #{$dark-bg-overlay};
+
+  // 亮色下白色渐变结尾的组件背景, 暗黑下改为纯色
+  --fox-messagebox-background-info: #{$dark-bg-overlay};
+  --fox-messagebox-background-success: #{$dark-bg-overlay};
+  --fox-messagebox-background-warning: #{$dark-bg-overlay};
+  --fox-messagebox-background-error: #{$dark-bg-overlay};
+}

package/dist/theme/dark/var.scss

@@ -0,0 +1,10 @@
+// 暗黑模式变量定义
+// foxui-desktop 的基础 token(颜色/文字/边框/填充/阴影)已委托 element-plus,
+// html.dark 下自动跟随 element-plus 暗黑主题, 无需重复定义,
+// 这里只定义 fox 独有变量的暗黑覆盖值
+
+// 只读颜色(fox 独有, 亮色下为 #808080)
+$dark-readonly-color: #a8abb2 !default;
+
+// 暗黑模式背景(委托 element-plus 暗黑背景变量)
+$dark-bg-overlay: var(--el-bg-color-overlay) !default;