rappel-ui 1.0.8 → 1.0.11

package/theme-chalk/src/button.scss

@@ -4,15 +4,20 @@
 @use 'css-vars/_button' as *;
 @use 'sass:map';
 
-@include buildCls('button') {
+@include buildRootCls('button') {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-size: getCssVar('base', 'font', 'size');
   text-align: center;
   cursor: pointer;
   white-space: nowrap;
   box-sizing: border-box;
-  transition: all 0.3s ease;
+  transition:
+    width 0.05s ease,
+    height 0.05s ease,
+    background-color 0.03s ease,
+    transform 0.03s ease;
   -webkit-user-select: none;
   user-select: none;
   outline: none;
@@ -22,8 +27,8 @@
   -webkit-appearance: none;
   appearance: none;
   position: relative;
-  padding: map.get($button-padding, '');
-  border-radius: 4px;
+  padding: deepGet($sizes, '', 'padding');
+  border-radius: deepGet($sizes, '', 'radius');
   border-width: 1px;
   border-style: solid;
   background-color: getCssVar('button', 'bgcolor');
@@ -49,23 +54,46 @@
     }
   }
   &__icon {
-    margin-right: 4px;
     width: 1em;
     height: 1em;
+    & + span {
+      margin-left: 4px;
+    }
+  }
+
+  @include is('dashed') {
+    border-style: dashed;
+    @include hover {
+      @include set-bgcolor-custom(getCssVar('color', 'fill', 'blank'));
+    }
+  }
+
+  @include is('link', 'text') {
+    @include set-bordercolor-custom(getCssVar('color', 'fill', 'transparent'));
+    @include set-bgcolor-custom(getCssVar('color', 'fill', 'transparent'));
   }
 
   @include is('link') {
     padding: 2px;
     height: auto;
-    border-color: getCssVar('color', 'fill', 'transparent');
-    background-color: getCssVar('color', 'fill', 'transparent');
     text-decoration: underline;
   }
 
+  @include is('text') {
+    padding: 0;
+    height: auto;
+
+    @include is('text-padding', 'text-bg') {
+      padding: map.get($button-padding, '');
+      height: 32px;
+      border: 0 solid transparent;
+    }
+  }
+
   @include is('plain') {
     @include hover {
-      border-color: getCssVar('color', 'primary', 'base');
-      background-color: getCssVar('color', 'fill', 'blank');
+      @include set-bordercolor-custom(getCssVar('color', 'primary', 'base'));
+      @include set-bgcolor-custom(getCssVar('color', 'fill', 'blank'));
     }
   }
 
@@ -79,15 +107,6 @@
     padding: 8px;
   }
 
-  &:active:not(.is-disabled) {
-    transform: scale(0.97);
-    transition: transform 0s ease;
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-
   & + & {
     margin-left: 10px;
   }
@@ -96,9 +115,19 @@
     @include button-modifier-style($button, $type);
   }
 
-  @each $size in map.keys($button-padding) {
-    &--#{$size} {
-      padding: map.get($button-padding, $size);
+  @each $size in map.keys($sizes) {
+    @if $size != '' {
+      &--#{$size} {
+        padding: deepGet($sizes, $size, 'padding');
+        height: deepGet($sizes, $size, 'height');
+        font-size: deepGet($sizes, $size, 'size');
+        border-radius: deepGet($sizes, $size, 'radius');
+
+        @include is('circle') {
+          width: deepGet($sizes, $size, 'height');
+          padding: deepGet($sizes, $size, 'circlepadding');
+        }
+      }
     }
   }
 }

package/theme-chalk/src/colors.scss

@@ -1,6 +1,6 @@
 @use 'mixins/index' as *;
 
-@include buildCls('colors') {
+@include buildRootCls('colors') {
   &--primary {
     width: 60rem;
     border-radius: 4px;
@@ -73,5 +73,13 @@
       0 11px,
       11px -11px,
       -11px 0px;
+
+    &.is-dark {
+      background-image:
+        linear-gradient(45deg, #303131 25%, transparent 25%),
+        linear-gradient(-45deg, #303131 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #303131 75%),
+        linear-gradient(-45deg, transparent 75%, #303131 75%);
+    }
   }
 }

package/theme-chalk/src/css-vars/_button-group.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$button-group: () !default;
+$button-group: map.deep-merge(
+  (
+    'color': (
+      'divider': getCssVar('color', 'fill', 'blank')
+    )
+  ),
+  $button-group
+);

package/theme-chalk/src/css-vars/_button.scss

@@ -6,11 +6,14 @@ $button: map.deep-merge(
   (
     '': (
       'bgcolor': getCssVar('color', 'fill', 'blank'),
-      'color': getCssVar('color', 'text', 'secondary'),
+      'color': getCssVar('color', 'text', 'base'),
       'border-color': getCssVar('color', 'border', 'base'),
       'hover-color': getCssVar('color', 'primary', 'base'),
       'hover-bgcolor': getCssVar('color', 'primary', 'shade-1'),
-      'hover-border-color': getCssVar('color', 'primary', 'shade-4')
+      'hover-border-color': getCssVar('color', 'primary', 'shade-4'),
+      'active-color': getCssVar('color', 'primary', 'base'),
+      'active-bgcolor': getCssVar('color', 'primary', 'shade-2'),
+      'active-border-color': getCssVar('color', 'primary', 'shade-5')
     )
   ),
   $button
@@ -27,7 +30,10 @@ $button-types: ('', 'primary', 'success', 'danger', 'warning', 'info');
             'border-color': getCssVar('color', $type, 'base'),
             'hover-color': getCssVar('color', 'text', 'lightest'),
             'hover-bgcolor': getCssVar('color', $type, 'hover'),
-            'hover-border-color': getCssVar('color', $type, 'hover')
+            'hover-border-color': getCssVar('color', $type, 'hover'),
+            'active-color': getCssVar('color', 'text', 'lightest'),
+            'active-bgcolor': getCssVar('color', $type, 'active'),
+            'active-border-color': getCssVar('color', $type, 'active')
           )
       ),
       $button
@@ -45,3 +51,38 @@ $button-padding: map.deep-merge(
   ),
   $button-padding
 );
+
+$sizes: () !default;
+$sizes: map.deep-merge(
+  (
+    'large': (
+      padding: 12px 20px,
+      circlepadding: 12px,
+      size: 16px,
+      height: 40px,
+      radius: 4px
+    ),
+    '': (
+      padding: 8px 16px,
+      circlepadding: 8px,
+      size: 14px,
+      height: 32px,
+      radius: 4px
+    ),
+    'small': (
+      padding: 6px 12px,
+      circlepadding: 6px,
+      size: 12px,
+      height: 28px,
+      radius: 4px
+    ),
+    'mini': (
+      padding: 4px 8px,
+      circlepadding: 4px,
+      size: 12px,
+      height: 24px,
+      radius: 2px
+    )
+  ),
+  $sizes
+);

package/theme-chalk/src/css-vars/_colors.scss

@@ -7,11 +7,11 @@ $colors: map.deep-merge(
   (
     text: (
       darkest: #000000,
-      base: #303131,
-      secondary: #606062,
-      neutral: #909093,
-      placeholder: #b2b2b6,
-      disabled: #cdcdd1,
+      darker: #303131,
+      base: #606062,
+      dark: #909093,
+      light: #b2b2b6,
+      lighter: #cdcdd1,
       lightest: #ffffff
     ),
     border: (
@@ -20,8 +20,7 @@ $colors: map.deep-merge(
       base: #dbdbe0,
       light: #e4e4e8,
       lighter: #ededef,
-      extra-light: #efeff3,
-      theme: #d4caff
+      lightest: #efeff3
     ),
     fill: (
       darker: #d7d7dc,
@@ -29,8 +28,7 @@ $colors: map.deep-merge(
       base: #ededf0,
       light: #f1f1f4,
       lighter: #f6f6f7,
-      extra-light: #f8f8f9,
-      theme: #f7f7fb,
+      lightest: #f8f8f9,
       blank: #ffffff,
       transparent: transparent
     )
@@ -40,7 +38,7 @@ $colors: map.deep-merge(
 
 $state-types: (
   primary: (
-    #937bff
+    #9d87ff
   ),
   success: (
     #06b56d
@@ -59,8 +57,9 @@ $state-types: (
 /**
  * 生成不同(0.9-0.1)透明度对应的等值颜色：
          primary: (
-            base: #937bff,
-            hover: #7e69dc,
+            base: #9d87ff,
+            active:#8d7ae6,
+            hover: #8d7ae6,
             shade-9: #9e88ff,
             shade-8: #a995ff,
             shade-7: #b3a3ff,
@@ -80,3 +79,47 @@ $state-types: (
     )
   );
 }
+
+$colors-dark: () !default;
+
+$colors-dark: map.deep-merge(
+  (
+    text: (
+      darkest: #ffffff,
+      darker: #e0e0e2,
+      base: #d0d0d4,
+      dark: #b2b2b6,
+      light: #909093,
+      lighter: #606062,
+      lightest: #303131
+    ),
+    border: (
+      darker: #8e8e91,
+      dark: #6b6b6f,
+      base: #5b5b5f,
+      light: #4d4d51,
+      lighter: #3b3b3d,
+      lightest: #2c2c2e
+    ),
+    fill: (
+      darker: #6b6b6f,
+      dark: #5b5b5f,
+      base: #4d4d51,
+      light: #3b3b3d,
+      lighter: #323236,
+      lightest: #2c2c2e,
+      blank: #1b1b1f,
+      transparent: transparent
+    )
+  ),
+  $colors-dark
+);
+
+@each $type, $color in $state-types {
+  $colors-dark: map.merge(
+    $colors-dark,
+    (
+      $type: create-dark-colors($color)
+    )
+  );
+}

package/theme-chalk/src/css-vars/_namespace.scss

@@ -5,7 +5,9 @@ $namespace: map.deep-merge(
   (
     prefix: 're',
     statePrefix: 'is',
-    font-size: 16px,
+    fontSizeRoot: 16px,
+    fontSizeBase: 14px,
+    radius: 4px,
     round: 20px
   ),
   $namespace

package/theme-chalk/src/css-vars/_tooltip.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$tooltip: () !default;
+$tooltip: map.deep-merge(
+  (
+    'tooltip': (
+      'font-size': 12px,
+      'border-radius': 4px
+    ),
+    'light': (
+      'color': getCssVar('color', 'text', 'base'),
+      'bgcolor': getCssVar('color', 'fill', 'blank'),
+      'border-color': getCssVar('color', 'border', 'light')
+    ),
+    'dark': (
+      'color': getCssVar('color', 'fill', 'blank'),
+      'bgcolor': getCssVar('color', 'text', 'darker'),
+      'border-color': getCssVar('color', 'text', 'darker')
+    )
+  ),
+  $tooltip
+);

package/theme-chalk/src/filter-panel.scss

@@ -1,6 +1,6 @@
 @use 'mixins/index' as *;
 
-@include buildCls(filter-panel) {
+@include buildRootCls(filter-panel) {
   display: flex;
   align-items: start;
   overflow: hidden;

package/theme-chalk/src/function/index.scss

@@ -3,7 +3,7 @@
 @use 'sass:color';
 @use 'sass:math';
 @use 'sass:string';
-@use '../css-vars/_namespace.scss' as *;
+@use '../css-vars/_namespace' as *;
 
 //('color','text','base') => $obj.color.text.base
 @function deepGet($obj, $keys...) {
@@ -48,32 +48,18 @@
   @return var(#{getCssVarStr($args...)});
 }
 
-/**
- * 将十六进制颜色转换为RGB颜色
- * @param $hex 十六进制颜色值
- * @returns RGB颜色值
- * color.channel($color, "red", $space: rgb)
- */
 @function hex-to-rgb($hex) {
   @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb)
     color.channel($hex, 'blue', $space: rgb);
 }
-/**
- * 将RGB颜色转换为十六进制颜色
- * @param $value RGB颜色值
- * @returns 十六进制颜色值
- */
+
 @function color-to-hex($value) {
   $hex-chars: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 'a' 'b' 'c' 'd' 'e' 'f';
   $first: list.nth($hex-chars, math.floor(math.div($value, 16)) + 1);
   $second: list.nth($hex-chars, ($value % 16) + 1);
   @return #{$first}#{$second};
 }
-/**
- * 将RGB颜色转换为十六进制颜色
- * @param $color RGB颜色值
- * @returns 十六进制颜色值
- */
+
 @function rgb-to-hex($color) {
   $r-hex: color-to-hex(color.channel($color, 'red', $space: rgb));
   $g-hex: color-to-hex(color.channel($color, 'green', $space: rgb));
@@ -83,66 +69,52 @@
 }
 
 /**
- * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
- * @param $color 颜色
- * @param $opacity 透明度，默认值为1
- * @returns 一个等效的透明度颜色
+ * craete same white opacity color
  */
-@function get-equal-opacity-color($color, $opacity: 1) {
-  // 获取颜色的 RGB 值
+@function get-equal-opacity-color($color, $opacity: 1, $is-dark: false) {
   $r: color.channel($color, 'red', $space: rgb);
   $g: color.channel($color, 'green', $space: rgb);
   $b: color.channel($color, 'blue', $space: rgb);
 
-  // 白色背景值
-  $white-r: 255;
-  $white-g: 255;
-  $white-b: 255;
+  $white-r: if($is-dark, 48, 255);
+  $white-g: if($is-dark, 49, 255);
+  $white-b: if($is-dark, 49, 255);
 
-  // 计算等效颜色值：前景 × alpha + 背景 × (1 - alpha)
   $equiv-r: math.round($r * $opacity + $white-r * (1 - $opacity));
   $equiv-g: math.round($g * $opacity + $white-g * (1 - $opacity));
   $equiv-b: math.round($b * $opacity + $white-b * (1 - $opacity));
-
-  // 返回新的颜色
-  @return rgb-to-hex(rgb($equiv-r, $equiv-g, $equiv-b));
+  @return rgb($equiv-r, $equiv-g, $equiv-b);
 }
 
 /**
- * 创建一个变暗的颜色，并返回一个变暗的颜色
- * @param $color 颜色
- * @param $factor 颜色变暗的度量，默认为0.15
- * @returns 一个变暗的颜色
+ * create a darken color
  */
-@function darken-color($color, $factor: 0.15) {
+@function darken-color($color, $factor: 0.2) {
   $r: color.channel($color, 'red', $space: rgb);
   $g: color.channel($color, 'green', $space: rgb);
   $b: color.channel($color, 'blue', $space: rgb);
 
-  // 向黑色混合：newColor = originalColor * (1 - factor) + blackColor * factor
   $new-r: math.round($r * (1 - $factor));
   $new-g: math.round($g * (1 - $factor));
   $new-b: math.round($b * (1 - $factor));
 
-  @return rgb-to-hex(rgb($new-r, $new-g, $new-b));
+  @return rgb($new-r, $new-g, $new-b);
 }
 
 /**
- * 创建层级颜色
- * @param $base-color 基础颜色
- * @param $darkness 变暗的度量，默认为0.15
- * @returns 主题色映射
+ * create shape color
  */
-@function create-colors($base-color, $darkness: 0.15) {
+@function create-colors($base-color, $darkness: 0.2) {
   $result: (
     base: $base-color,
-    hover: darken-color($base-color, $darkness)
+    hover: rgb-to-hex(darken-color($base-color, math.div($darkness, 2))),
+    active: rgb-to-hex(darken-color($base-color, $darkness))
   );
 
-  // 添加不同透明度的等值颜色，映射为 shade-1 到 shade-9
+  // opacity color shade-1 ~ shade-9
   @for $i from 9 through 1 {
-    $opacity: $i * 0.1; // 从 0.9 到 0.1
-    $color-with-opacity: get-equal-opacity-color($base-color, $opacity);
+    $opacity: $i * 0.1; // 0.9 to 0.1
+    $color-with-opacity: rgb-to-hex(get-equal-opacity-color($base-color, $opacity));
     $result: map.merge(
       $result,
       (
@@ -150,6 +122,42 @@
       )
     );
   }
+  @return $result;
+}
+
+/**
+ * create dark shape color
+ */
+@function create-dark-colors($base-color, $darkness: 0.2) {
+  $result: (
+    base: $base-color,
+    hover: rgb-to-hex(darken-color($base-color, math.div($darkness, 2))),
+    active: rgb-to-hex(darken-color($base-color, $darkness))
+  );
 
+  // opacity color shade-1 ~ shade-9
+  @for $i from 9 through 1 {
+    $opacity: $i * 0.1; // 0.9 to 0.1
+    $color-with-opacity: rgb-to-hex(get-equal-opacity-color($base-color, $opacity, true));
+    $result: map.merge(
+      $result,
+      (
+        'shade-#{$i}': $color-with-opacity
+      )
+    );
+  }
   @return $result;
 }
+
+/**
+ &.re-tooltip-popover, &.re-tooltip-arrow
+*/
+@function buildSiblings($prefix, $names...) {
+  $classStr: '';
+  @each $n in $names {
+    $current: '&.#{$prefix}-#{$n}';
+    $classStr: if($classStr == '', $current, $classStr + ', ' + $current);
+  }
+
+  @return $classStr;
+}

package/theme-chalk/src/index.scss

@@ -1,5 +1,8 @@
-@forward './base.scss';
-@forward './button.scss';
-@forward './colors.scss';
-@forward './filter-panel.scss';
-@forward './svg-icon.scss';
+@forward './base';
+@forward './button';
+@forward './button-group';
+@forward './colors';
+@forward './filter-panel';
+@forward './svg-icon';
+@forward './popover';
+@forward './tooltip';

package/theme-chalk/src/mixins/_base.scss

@@ -0,0 +1,14 @@
+@use '../function/index' as *;
+@use '../css-vars/_namespace' as *;
+
+@mixin set-root-font-size-var() {
+  #{getCssVarStr('root','font', 'size')}: #{deepGet($namespace, 'fontSizeRoot')};
+}
+
+@mixin set-base-font-size-var() {
+  #{getCssVarStr('base','font', 'size')}: #{deepGet($namespace, 'fontSizeBase')};
+}
+
+@mixin set-base-radius() {
+  #{getCssVarStr('base','border', 'radius')}: #{deepGet($namespace, 'radius')};
+}