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

package/dist/theme/components/swiper.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+$swiper: () !default;
+$swiper: map.deep-merge(
+  (
+    'pagination-item-border-radius': 2px,
+    'pagination-item-height': 3px,
+    'pagination-item-margin-right': 7px,
+    'pagination-item-width': 8px,
+  ),
+  $swiper
+);

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

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+$switch-item: () !default;
+$switch-item: map.deep-merge(
+  (
+    'padding': 0 29px 0 0,
+  ),
+  $switch-item
+);

package/dist/theme/components/switch.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../common/border' as *;
+@use '../common/fill' as *;
+
+$switch: () !default;
+$switch: map.deep-merge(
+  (
+    'border-radius': 21px,
+    'close-bg-color': $border-color-lighter,
+    'close-cline-bg-color': $fill-color-base,
+    'height': 21px,
+    'inside-close-transform': translateX(30%),
+    'inside-height': 13px,
+    'inside-open-transform': translateX(146%),
+    'inside-width': 13px,
+    'line-height': 21px,
+    'width': 36px,
+  ),
+  $switch
+);

package/dist/theme/components/tabbar.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$tabbar: () !default;
+$tabbar: map.deep-merge(
+  (
+    'active-color': $color-primary,
+    'border-bottom': 1px solid $border-color-lighter,
+    'border-top': 1px solid $border-color-lighter,
+    'box-shadow': none,
+    'height': 50px,
+    'item-text-font-size': $font-size-extra-small,
+    'item-text-line-height': initial,
+    'unactive-color': $color-primary,
+    'word-margin-top': auto,
+  ),
+  $tabbar
+);

package/dist/theme/components/table.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+
+$table: () !default;
+$table: map.deep-merge(
+  (
+    'border-color': $border-color-base,
+    'cols-padding': 10px,
+    'tr-even-bg-color': $fill-color-base,
+    'tr-odd-bg-color': $white,
+  ),
+  $table
+);

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

@@ -0,0 +1,110 @@
+@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-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-gutter-button': 8px,
+    'item-radius-button': 4px,
+    'item-border-button': 1px solid transparent,
+    'item-border-active-button': 1px solid transparent,
+    'item-padding-button': 6px 12px,
+    'item-width-button': auto,
+    'item-height-button': auto,
+    'item-font-size-button': $font-size-small,
+    'item-font-size-active-button': $font-size-small,
+    'item-font-weight-button': $font-weight-bold,
+    'item-font-weight-active-button': $font-weight-bold,
+    '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': $font-weight-bold,
+    'item-font-weight-active-button-group': $font-weight-bold,
+    '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': $font-weight-bold,
+    'item-font-weight-active-capsule': $font-weight-bold,
+    '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,9 @@
+@use 'sass:map';
+
+$tabs-frame: () !default;
+$tabs-frame: map.deep-merge(
+  (
+    'bar-margin': 0,
+  ),
+  $tabs-frame
+);

package/dist/theme/components/tag.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$tag: () !default;
+$tag: map.deep-merge(
+  (
+    'border-width': 1px,
+    'close-icon-size': $font-size-extra-small,
+    'danger-background-color': $color-danger,
+    'danger-background-color-light': $color-danger-light-9,
+    'danger-background-color-plain': $color-danger,
+    'danger-color': $white,
+    'danger-color-light': $color-danger,
+    'default-background-color': $black,
+    'default-background-color-light': $fill-color-base,
+    'default-border-radius': 4px,
+    'default-color': $white,
+    'default-color-light': $text-color-secondary,
+    'font-size': $font-size-small,
+    'height': auto,
+    'padding': 0 4px,
+    'plain-background-color': $white,
+    'primary-background-color': $color-primary,
+    'primary-background-color-light': $color-primary-light-9,
+    'primary-color': $white,
+    'primary-color-light': $color-primary,
+    'round-border-radius': 8px,
+    'success-background-color': $color-success,
+    'success-background-color-light': $color-success-light-9,
+    'success-color': $white,
+    'success-color-light': $color-success,
+    'warning-background-color': $color-warning,
+    'warning-background-color-light': $color-warning-light-9,
+    'warning-color': $white,
+    'warning-color-light': $color-warning,
+  ),
+  $tag
+);

package/dist/theme/components/text.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$text: () !default;
+$text: map.deep-merge(
+  (
+    'color': $black,
+    'danger-color': $color-danger,
+    'default-color': $black,
+    'info-color': $color-info,
+    'divide-color': $border-color-light,
+    'divide-height': 12px,
+    'divide-margin': 0 0,
+    'divide-width': 1px,
+    'font-size': $font-size-base,
+    'font-size-large': $font-size-large,
+    'font-size-small': $font-size-small,
+    'font-weight': $font-weight-bold,
+    'highlight-background-color': $color-danger,
+    'highlight-color': $white,
+    'margin': 0,
+    'mark-icon-height': 1em,
+    'mark-icon-width': 1em,
+    'mark-size': 4px,
+    'mark-text-gutter': 4px,
+    'padding': 0,
+    'primary-color': $color-primary,
+    'success-color': $color-success,
+    'text-color': $black,
+    'warning-color': $color-warning,
+  ),
+  $text
+);

package/dist/theme/components/textarea.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$textarea: () !default;
+$textarea: map.deep-merge(
+  (
+    'background': $white,
+    'disabled-color': $disabled-color,
+    'font': $font-size-base,
+    'height': 60px,
+    'limit-color': $text-color-regular,
+    'padding': 10px 25px,
+    'text-color': $title-color
+  ),
+  $textarea
+);

package/dist/theme/components/toast.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$toast: () !default;
+$toast: map.deep-merge(
+  (
+    'cover-bg-color': transparent,
+    'font-color': $white,
+    'inner-bg-color': $overlay-text-bg-color,
+    'inner-border-radius': 12px,
+    'inner-padding': 24px 30px,
+    'text-font-size': $font-size-base,
+    'title-font-size': $font-size-medium,
+  ),
+  $toast
+);

package/dist/theme/components/trendarrow.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$trendarrow: () !default;
+$trendarrow: map.deep-merge(
+  (
+    'before-icon-margin': 4px,
+    'font-size': $font-size-base,
+  ),
+  $trendarrow
+);

package/dist/theme/components/uploader.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../common/fill' as *;
+
+$uploader: () !default;
+$uploader: map.deep-merge(
+  (
+    'background': $fill-color-base,
+    'picture-height': 100px,
+    'picture-width': 100px,
+  ),
+  $uploader
+);

package/dist/theme/components/watermark.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+$watermark: () !default;
+$watermark: map.deep-merge(
+  (
+    'z-index': 2000,
+  ),
+  $watermark
+);

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

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'var' as *;
+@use '../mixins/css-var' as *;
+
+html.dark {
+  @include gen-color-css-vars($dark-colors);
+
+  @each $type, $value in $dark-text-color {
+    --fox-text-color-#{$type}: #{$value};
+  }
+
+  @each $type, $value in $dark-border-color {
+    --fox-border-color-#{$type}: #{$value};
+  }
+
+  @each $type, $value in $dark-fill-color {
+    --fox-fill-color-#{$type}: #{$value};
+  }
+
+  @each $type, $value in $dark-bg-color {
+    --fox-bg-color-#{$type}: #{$value};
+  }
+
+  --fox-title-color: #{map.get($dark-text-color, 'primary')};
+  --fox-title-color2: #{map.get($dark-text-color, 'regular')};
+  --fox-color-primary-end: #f2270c;
+}

package/dist/theme/dark/var.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+@use 'sass:color';
+
+$dark-colors: () !default;
+
+$dark-colors: map.deep-merge(
+  (
+    'primary': (
+      'base': #f2270c,
+      'light-1': #f43e26,
+      'light-2': #f65533,
+      'light-3': #f86c40,
+      'light-4': #fa834d,
+      'light-5': #fb9a5f,
+      'light-6': #fcb171,
+      'light-7': #fdc88a,
+      'light-8': '#fddfa3',
+      'light-9': '#fef6bc',
+      'dark-2': #c91f0a,
+    ),
+    'success': (
+      'base': #55d87a,
+    ),
+    'warning': (
+      'base': #ffbf3c,
+    ),
+    'danger': (
+      'base': #e6594e,
+    ),
+    'info': (
+      'base': #8a8a8a,
+    ),
+  ),
+  $dark-colors
+);
+
+$dark-text-color: () !default;
+$dark-text-color: map.deep-merge(
+  (
+    'primary': #e5eaf3,
+    'regular': #cfd3dc,
+    'secondary': #a3a6ad,
+    'disabled': #636569,
+    'placeholder': #5a5e66,
+  ),
+  $dark-text-color
+);
+
+$dark-border-color: () !default;
+$dark-border-color: map.deep-merge(
+  (
+    'base': #4c4d4f,
+    'light': #414243,
+    'lighter': #363637,
+  ),
+  $dark-border-color
+);
+
+$dark-fill-color: () !default;
+$dark-fill-color: map.deep-merge(
+  (
+    'base': #303030,
+    'light': #262727,
+    'lighter': #1d1d1d,
+  ),
+  $dark-fill-color
+);
+
+$dark-bg-color: () !default;
+$dark-bg-color: map.deep-merge(
+  (
+    'base': #141414,
+    'page': #0a0a0a,
+    'overlay': #1d1e1f,
+  ),
+  $dark-bg-color
+);