@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/dark/var.scss

@@ -1,225 +1,225 @@
-@use 'sass:map';
-@use 'sass:math';
-@use 'sass:color';
-
-@use '../common/var.scss' as common;
-@use '../mixins/mixins.scss' as *;
-@use '../color/index.scss' as *;
-@use '../mixins/function.scss' as *;
-
-$colors: () !default;
-@each $type in common.$types {
-  $colors: map.deep-merge(
-    (
-      $type: (
-        'base': map.get(common.$colors, $type, 'base'),
-      ),
-    ),
-    $colors
-  ) !global;
-}
-
-// https://sass-lang.com/documentation/values/maps#immutability
-// mix colors with white/black to generate light/dark level
-@mixin set-color-mix-level(
-  $type,
-  $number,
-  $mode: 'light',
-  $mix-color: $color-white
-) {
-  // hex mix color
-  $colors: map.deep-merge(
-    (
-      $type: (
-        '#{$mode}-#{$number}':
-          roundColor(
-            color.mix(
-              $mix-color,
-              map.get($colors, $type, 'base'),
-              math.percentage(math.div($number, 10))
-            )
-          ),
-      ),
-    ),
-    $colors
-  ) !global;
-
-  // for designer to view transparent
-  // $colors: map.deep-merge(
-  //   (
-  //     $type: (
-  //       '#{$mode}-#{$number}':
-  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
-  //     ),
-  //   ),
-  //   $colors
-  // ) !global;
-}
-
-// Background
-$bg-color: () !default;
-$bg-color: map.merge(
-  (
-    'page': #0a0a0a,
-    '': #141414,
-    'overlay': #1d1e1f,
-  ),
-  $bg-color
-);
-
-// dark-mode
-@each $type in common.$types {
-  @for $i from 1 through 9 {
-    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
-  }
-}
-@each $type in common.$types {
-  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
-}
-
-// border
-$border-color-base: #f5f8ff;
-$border-color: () !default;
-$border-color: map.merge(
-  (
-    'darker': rgba($border-color-base, 0.35),
-    'dark': rgba($border-color-base, 0.3),
-    '': rgba($border-color-base, 0.25),
-    'light': rgba($border-color-base, 0.2),
-    'lighter': rgba($border-color-base, 0.15),
-    'extra-light': rgba($border-color-base, 0.1),
-  ),
-  $border-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $border-color {
-  $border-color: map.merge(
-    $border-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, '')),
-    )
-  ) !global;
-}
-
-// Box-shadow
-$box-shadow: () !default;
-$box-shadow: map.merge(
-  (
-    '': (
-      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
-      0px 8px 20px rgba(0, 0, 0, 0.72),
-    ),
-    'light': (
-      0px 0px 12px rgba(0, 0, 0, 0.72),
-    ),
-    'lighter': (
-      0px 0px 6px rgba(0, 0, 0, 0.72),
-    ),
-    'dark': (
-      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
-      0px 12px 32px #000000,
-      0px 8px 16px -8px #000000,
-    ),
-  ),
-  $box-shadow
-);
-
-// fill
-$fill-color-base: #fafcff;
-$fill-color: () !default;
-$fill-color: map.merge(
-  (
-    'darker': rgba($fill-color-base, 0.2),
-    'dark': rgba($fill-color-base, 0.16),
-    '': rgba($fill-color-base, 0.12),
-    'light': rgba($fill-color-base, 0.08),
-    'lighter': rgba($fill-color-base, 0.04),
-    'extra-light': rgba($fill-color-base, 0.02),
-    'blank': transparent,
-  ),
-  $fill-color
-);
-
-// mix to hex to avoid overlay issues
-@each $key, $val in $fill-color {
-  @if ($key != 'blank') {
-    $fill-color: map.merge(
-      $fill-color,
-      (
-        $key: mix-overlay-color($val, map.get($bg-color, '')),
-      )
-    ) !global;
-  }
-}
-
-// text
-$text-color-base: #f0f5ff;
-$text-color: () !default;
-$text-color: map.merge(
-  (
-    'primary': rgba($text-color-base, 0.95),
-    'regular': rgba($text-color-base, 0.85),
-    'secondary': rgba($text-color-base, 0.65),
-    'placeholder': rgba($text-color-base, 0.55),
-    'disabled': rgba($text-color-base, 0.4),
-  ),
-  $text-color
-);
-// mix to hex to avoid overlay issues
-@each $key, $val in $text-color {
-  $text-color: map.merge(
-    $text-color,
-    (
-      $key: mix-overlay-color($val, map.get($bg-color, '')),
-    )
-  ) !global;
-}
-
-// mask
-$mask-color: () !default;
-$mask-color: map.merge(
-  (
-    '': rgba(0, 0, 0, 0.8),
-    'extra-light': rgba(0, 0, 0, 0.3),
-  ),
-  $mask-color
-);
-
-// Button
-// css3 var in packages/theme-chalk/src/button.scss
-$button: () !default;
-$button: map.merge(
-  (
-    'disabled-text-color': rgba(255, 255, 255, 0.5),
-  ),
-  $button
-);
-
-// card
-$card: () !default;
-$card: map.merge(
-  (
-    'bg-color': getCssVar('bg-color', 'overlay'),
-  ),
-  $card
-);
-
-// Empty
-// css3 var in packages/theme-chalk/src/empty.scss
-$empty: () !default;
-$empty: map.merge(
-  (
-    'fill-color-0': getCssVar('color-black'),
-    'fill-color-1': #4b4b52,
-    'fill-color-2': #36383d,
-    'fill-color-3': #1e1e20,
-    'fill-color-4': #262629,
-    'fill-color-5': #202124,
-    'fill-color-6': #212224,
-    'fill-color-7': #1b1c1f,
-    'fill-color-8': #1c1d1f,
-    'fill-color-9': #18181a,
-  ),
-  $empty
-);
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+
+@use '../common/var.scss' as common;
+@use '../mixins/mixins.scss' as *;
+@use '../color/index.scss' as *;
+@use '../mixins/function.scss' as *;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base'),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          roundColor(
+            color.mix(
+              $mix-color,
+              map.get($colors, $type, 'base'),
+              math.percentage(math.div($number, 10))
+            )
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f,
+  ),
+  $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1),
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000,
+    ),
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent,
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, '')),
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4),
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3),
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5),
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay'),
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a,
+  ),
+  $empty
+);

package/theme-chalk/date-picker.scss

@@ -48,19 +48,19 @@ $input-font-size: map.merge(
 }
 
 .#{$namespace}-date-editor {
-    // --#{$namespace}-input-text-color: var(--#{$namespace}-text-color-regular);
-    // --#{$namespace}-input-border: var(--#{$namespace}-border);
-    // --#{$namespace}-input-hover-border: var(--#{$namespace}-border-color-hover);
-    // --#{$namespace}-input-focus-border: var(--#{$namespace}-color-primary);
-    // --#{$namespace}-input-transparent-border: 0 0 0 1px transparent inset;
-    // --#{$namespace}-input-border-color: var(--#{$namespace}-border-color);
-    // --#{$namespace}-input-border-radius: var(--#{$namespace}-border-radius-base);
-    // --#{$namespace}-input-bg-color: var(--#{$namespace}-fill-color-blank);
-    // --#{$namespace}-input-icon-color: var(--#{$namespace}-text-color-placeholder);
-    // --#{$namespace}-input-placeholder-color: var(--#{$namespace}-text-color-placeholder);
+    --#{$namespace}-input-text-color: var(--#{$namespace}-text-color-regular);
+    --#{$namespace}-input-border: var(--#{$namespace}-border);
+    --#{$namespace}-input-hover-border: var(--#{$namespace}-border-color-hover);
+    --#{$namespace}-input-focus-border: var(--#{$namespace}-color-primary);
+    --#{$namespace}-input-transparent-border: 0 0 0 1px transparent inset;
+    --#{$namespace}-input-border-color: var(--#{$namespace}-border-color);
+    --#{$namespace}-input-border-radius: var(--#{$namespace}-border-radius-base);
+    --#{$namespace}-input-bg-color: var(--#{$namespace}-fill-color-blank);
+    --#{$namespace}-input-icon-color: var(--#{$namespace}-text-color-placeholder);
+    --#{$namespace}-input-placeholder-color: var(--#{$namespace}-text-color-placeholder);
     --#{$namespace}-input-hover-border-color: var(--#{$namespace}-border-color-hover);
-    // --#{$namespace}-input-clear-hover-color: var(--#{$namespace}-text-color-secondary);
-    // --#{$namespace}-input-focus-border-color: var(--#{$namespace}-color-primary);
+    --#{$namespace}-input-clear-hover-color: var(--#{$namespace}-text-color-secondary);
+    --#{$namespace}-input-focus-border-color: var(--#{$namespace}-color-primary);
 }
 
 .#{$namespace}-date-editor {