@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.22

package/{dist/theme-chalk/bak → theme-chalk}/common/transition.scss

@@ -1,118 +1,142 @@
-@use '../mixins/config' as *;
-@use '../mixins/mixins' as *;
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-    transition: getCssVar('transition-fade', 'linear');
-}
-
-.fade-in-linear-enter-from,
-.fade-in-linear-leave-to {
-    opacity: 0;
-}
-
-.#{$namespace}-fade-in-linear-enter-active,
-.#{$namespace}-fade-in-linear-leave-active {
-    transition: getCssVar('transition-fade', 'linear');
-}
-.#{$namespace}-fade-in-linear-enter-from,
-.#{$namespace}-fade-in-linear-leave-to {
-    opacity: 0;
-}
-
-.#{$namespace}-fade-in-enter-active,
-.#{$namespace}-fade-in-leave-active {
-    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-fade-in-enter-from,
-.#{$namespace}-fade-in-leave-active {
-    opacity: 0;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-    opacity: 0;
-    transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: center top;
-
-    &[data-popper-placement^='top'] {
-        transform-origin: center bottom;
-    }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 1;
-    transform: scale(1, 1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 0;
-    transform: scale(0.45, 0.45);
-}
-
-.collapse-transition {
-    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
-        getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.#{$namespace}-collapse-transition-leave-active,
-.#{$namespace}-collapse-transition-enter-active {
-    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
-        getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.horizontal-collapse-transition {
-    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
-        getCssVar('transition-duration') padding-right ease-in-out;
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-    transition: all 1s;
-}
-
-.#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-}
-
-.#{$namespace}-list-leave-active {
-    position: absolute !important;
-}
-
-.#{$namespace}-opacity-transition {
-    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+    opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center top;
+
+    &[data-popper-placement^='top'] {
+        transform-origin: center bottom;
+    }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-menu-collapse-enter-active,
+.#{$namespace}-menu-collapse-leave-active {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+
+.#{$namespace}-menu-collapse-enter-from {
+    // opacity: 0;
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    animation-name: rSlideUpIn;
+    animation-play-state: running;
+}
+
+.#{$namespace}-menu-collapse-leave-active {
+    animation-name: treeNodeLeave;
+    animation-play-state: running;
+    pointer-events: none;
+}
+
+.#{$namespace}-menu-collapse-leave-to {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.horizontal-collapse-transition {
+    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
+        getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+    transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+    position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}

package/{dist/theme-chalk/bak → theme-chalk}/common/var.scss

@@ -1,6 +1,7 @@
 /* Element Chalk Variables */
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:color';
 
 @use '../mixins/function.scss' as *;
 
@@ -8,6 +9,9 @@
 // type|skipAutoTranslation|Category|Order
 // skipAutoTranslation 1
 
+$fa-font-family: 'el-icon' !default;
+$fa-font-path: './fonts' !default;
+
 // types
 $types: primary, success, warning, danger, error, info;
 
@@ -54,7 +58,7 @@ $color-info: map.get($colors, 'info', 'base') !default;
     $colors: map.deep-merge(
         (
             $type: (
-                '#{$mode}-#{$number}': mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10))),
+                '#{$mode}-#{$number}': roundColor(color.mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))),
             ),
         ),
         $colors
@@ -389,6 +393,7 @@ $select: () !default;
 $select: map.merge(
     (
         'border-color-hover': getCssVar('border-color-hover'),
+        'disabled-color': getCssVar('disabled-text-color'),
         'disabled-border': getCssVar('disabled-border-color'),
         'font-size': getCssVar('font-size-base'),
         'close-hover-color': getCssVar('text-color-secondary'),
@@ -417,7 +422,7 @@ $select-group: () !default;
 $select-group: map.merge(
     (
         'text-color': getCssVar('color-info'),
-        'height': 30px,
+        'height': 34px,
         'font-size': 12px,
     ),
     $select-group
@@ -487,10 +492,11 @@ $alert: map.merge(
     (
         'padding': 8px 16px,
         'border-radius-base': getCssVar('border-radius-base'),
-        'title-font-size': 13px,
-        'description-font-size': 12px,
-        'close-font-size': 12px,
-        'close-customed-font-size': 13px,
+        'title-font-size': 14px,
+        'title-with-description-font-size': 16px,
+        'description-font-size': 14px,
+        'close-font-size': 16px,
+        'close-customed-font-size': 14px,
         'icon-size': 16px,
         'icon-large-size': 28px,
     ),
@@ -523,7 +529,7 @@ $message: map.merge(
     (
         'bg-color': getCssVar('color', 'info', 'light-9'),
         'border-color': getCssVar('border-color-lighter'),
-        'padding': 15px 19px,
+        'padding': 11px 15px,
         'close-size': 16px,
         'close-icon-color': getCssVar('text-color-placeholder'),
         'close-hover-color': getCssVar('text-color-secondary'),
@@ -558,7 +564,6 @@ $notification: map.merge(
 // Input
 // css3 var in packages/theme-chalk/src/input.scss
 $input: () !default;
-
 $input: map.merge(
     (
         'text-color': getCssVar('text-color-regular'),
@@ -574,7 +579,6 @@ $input: map.merge(
         'hover-border-color': getCssVar('border-color-hover'),
         'clear-hover-color': getCssVar('text-color-secondary'),
         'focus-border-color': getCssVar('color-primary'),
-        'focus-color': getCssVar('color-primary'),
         'width': 100%,
     ),
     $input
@@ -646,6 +650,47 @@ $cascader: map.merge(
     ),
     $cascader
 );
+
+$cascader-item-gap: () !default;
+$cascader-item-gap: map.merge(
+    (
+        'large': 6px,
+        'default': 6px,
+        'small': 4px,
+    ),
+    $cascader-item-gap
+);
+
+$cascader-wrapper-padding: () !default;
+$cascader-wrapper-padding: map.merge(
+    (
+        'large': 8px,
+        'default': 4px,
+        'small': 2px,
+    ),
+    $cascader-wrapper-padding
+);
+
+$cascader-item-height: () !default;
+$cascader-item-height: map.merge(
+    (
+        'large': 24px,
+        'default': 24px,
+        'small': 20px,
+    ),
+    $cascader-item-height
+);
+
+$cascader-search-input-margin-left: () !default;
+$cascader-search-input-margin-left: map.merge(
+    (
+        'large': 7px,
+        'default': 7px,
+        'small': 5px,
+    ),
+    $cascader-search-input-margin-left
+);
+
 //statistic
 // css3 var in packages/theme-chalk/src/statistic.scss
 $statistic: () !default;
@@ -666,6 +711,7 @@ $button: () !default;
 $button: map.merge(
     (
         'font-weight': getCssVar('font-weight-primary'),
+        'border-style': solid,
         'border-color': getCssVar('border-color'),
         'bg-color': getCssVar('fill-color', 'blank'),
         'text-color': getCssVar('text-color', 'regular'),
@@ -680,7 +726,7 @@ $button: map.merge(
         'active-border-color': getCssVar('color-primary'),
         'active-bg-color': getCssVar('button', 'hover-bg-color'),
         'outline-color': getCssVar('color-primary', 'light-5'),
-        'hover-link-text-color': getCssVar('color-info'),
+        'hover-link-text-color': getCssVar('text-color', 'secondary'),
         'active-color': getCssVar('text-color', 'primary'),
     ),
     $button
@@ -776,7 +822,7 @@ $dialog: map.merge(
         'content-font-size': 14px,
         'font-line-height': getCssVar('font-line-height-primary'),
         'padding-primary': 16px,
-        'border-radius': getCssVar('border-radius-small'),
+        'border-radius': getCssVar('border-radius-base'),
     ),
     $dialog
 );
@@ -801,6 +847,114 @@ $tour: map.merge(
     $tour
 );
 
+// Anchor
+// css3 var in packages/theme-chalk/src/anchor.scss
+$anchor: () !default;
+$anchor: map.merge(
+    (
+        'bg-color': getCssVar('bg-color'),
+        'padding-indent': 14px,
+        'line-height': 22px,
+        'font-size': 12px,
+        'color': getCssVar('text-color-secondary'),
+        'active-color': getCssVar('color-primary'),
+        'marker-bg-color': getCssVar('color-primary'),
+    ),
+    $anchor
+);
+
+// Segmented
+// css3 var in packages/theme-chalk/src/segmented.scss
+$segmented: () !default;
+$segmented: map.merge(
+    (
+        'color': getCssVar('text-color', 'regular'),
+        'bg-color': getCssVar('fill-color', 'light'),
+        'padding': 2px,
+        'item-selected-color': getCssVar('color-white'),
+        'item-selected-bg-color': getCssVar('color-primary'),
+        'item-selected-disabled-bg-color': getCssVar('color-primary', 'light-5'),
+        'item-hover-color': getCssVar('text-color', 'primary'),
+        'item-hover-bg-color': getCssVar('fill-color', 'dark'),
+        'item-active-bg-color': getCssVar('fill-color', 'darker'),
+        'item-disabled-color': getCssVar('text-color', 'placeholder'),
+    ),
+    $segmented
+);
+
+// Mention
+// css3 var in packages/theme-chalk/src/mention.scss
+$mention: () !default;
+$mention: map.merge(
+    (
+        'font-size': getCssVar('font-size-base'),
+        'bg-color': getCssVar('bg-color', 'overlay'),
+        'shadow': getCssVar('box-shadow-light'),
+        'border': 1px solid getCssVar('border-color-light'),
+        'option-color': getCssVar('text-color-regular'),
+        'option-height': 34px,
+        'option-min-width': 100px,
+        'option-hover-background': getCssVar('fill-color', 'light'),
+        'option-selected-color': getCssVar('color-primary'),
+        'option-disabled-color': getCssVar('text-color-placeholder'),
+        'option-loading-color': getCssVar('text-color-secondary'),
+        'option-loading-padding': 10px 0,
+        'max-height': 174px,
+        'padding': 6px 0,
+        'header-padding': 10px,
+        'footer-padding': 10px,
+    ),
+    $mention
+);
+
+// InputTag
+// css3 var in packages/theme-chalk/src/input-tag.scss
+$input-tag: () !default;
+$input-tag: map.merge(
+    (
+        'border-color-hover': getCssVar('border-color-hover'),
+        'placeholder-color': getCssVar('text-color-placeholder'),
+        'disabled-color': getCssVar('disabled-text-color'),
+        'disabled-border': getCssVar('disabled-border-color'),
+        'font-size': getCssVar('font-size-base'),
+        'close-hover-color': getCssVar('text-color-secondary'),
+        'text-color': getCssVar('text-color-regular'),
+        'input-focus-border-color': getCssVar('color-primary'),
+        'width': 100%,
+    ),
+    $input-tag
+);
+
+$input-tag-padding: () !default;
+$input-tag-padding: map.merge(
+    (
+        'large': 8px,
+        'default': 4px,
+        'small': 2px,
+    ),
+    $input-tag-padding
+);
+
+$input-tag-inner-padding: () !default;
+$input-tag-inner-padding: map.merge(
+    (
+        'large': 8px,
+        'default': 8px,
+        'small': 6px,
+    ),
+    $input-tag-inner-padding
+);
+
+$input-tag-gap: () !default;
+$input-tag-gap: map.merge(
+    (
+        'large': 6px,
+        'default': 6px,
+        'small': 4px,
+    ),
+    $input-tag-gap
+);
+
 // Table
 // css3 var in packages/theme-chalk/src/table.scss
 $table: () !default;
@@ -828,8 +982,8 @@ $table-font-size: () !default;
 $table-font-size: map.merge(
     (
         'large': getCssVar('font-size', 'base'),
-        'default': 14px,
-        'small': 12px,
+        'default': getCssVar('font-size', 'base'),
+        'small': getCssVar('font-size', 'extra-small'),
     ),
     $table-font-size
 );
@@ -873,6 +1027,8 @@ $pagination: map.merge(
         'font-size-small': 12px,
         'button-width-small': 24px,
         'button-height-small': 24px,
+        'button-width-large': 40px,
+        'button-height-large': 40px,
         'item-gap': 16px,
     ),
     $pagination
@@ -1055,7 +1211,7 @@ $card: map.merge(
 $slider: () !default;
 $slider: map.merge(
     (
-        '#{$namespace}-bg-color-primary': getCssVar('color-primary'),
+        'main-bg-color': getCssVar('color-primary'),
         'runway-bg-color': getCssVar('border-color-light'),
         'stop-bg-color': getCssVar('color-white'),
         'disabled-color': getCssVar('text-color-placeholder'),
@@ -1448,29 +1604,29 @@ $footer: map.merge(
 );
 
 // Break-point
-$small: 768px !default;
+$sm: 768px !default;
 $md: 992px !default;
-$large: 1200px !default;
+$lg: 1200px !default;
 $xl: 1920px !default;
 
 $breakpoints: (
-    'xs': '(max-width: #{$small - 1})',
-    'small': '(min-width: #{$small})',
+    'xs': '(max-width: #{$sm - 1})',
+    'sm': '(min-width: #{$sm})',
     'md': '(min-width: #{$md})',
-    'large': '(min-width: #{$large})',
+    'lg': '(min-width: #{$lg})',
     'xl': '(min-width: #{$xl})',
 ) !default;
 
 $breakpoints-spec: (
-    'xs-only': '(max-width: #{$small - 1})',
-    'small-and-up': '(min-width: #{$small})',
-    'small-only': '(min-width: #{$small}) and (max-width: #{$md - 1})',
-    'small-and-down': '(max-width: #{$md - 1})',
+    'xs-only': '(max-width: #{$sm - 1})',
+    'sm-and-up': '(min-width: #{$sm})',
+    'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+    'sm-and-down': '(max-width: #{$md - 1})',
     'md-and-up': '(min-width: #{$md})',
-    'md-only': '(min-width: #{$md}) and (max-width: #{$large - 1})',
-    'md-and-down': '(max-width: #{$large - 1})',
-    'large-and-up': '(min-width: #{$large})',
-    'large-only': '(min-width: #{$large}) and (max-width: #{$xl - 1})',
-    'large-and-down': '(max-width: #{$xl - 1})',
+    'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+    'md-and-down': '(max-width: #{$lg - 1})',
+    'lg-and-up': '(min-width: #{$lg})',
+    'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+    'lg-and-down': '(max-width: #{$xl - 1})',
     'xl-only': '(min-width: #{$xl})',
 ) !default;

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

@@ -0,0 +1,39 @@
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // color-scheme
+  // Background --el-bg-color-#{$type}
+  @include set-component-css-var('bg-color', $bg-color);
+  // --el-text-color-#{$type}
+  @include set-component-css-var('text-color', $text-color);
+  // --el-border-color-#{$type}
+  @include set-component-css-var('border-color', $border-color);
+  // Fill --el-fill-color-#{$type}
+  @include set-component-css-var('fill-color', $fill-color);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}