rappel-ui 1.0.13 → 1.0.14

package/theme-chalk/src/button.scss

@@ -0,0 +1,133 @@
+@use 'mixins/index' as *;
+@use 'mixins/_button' as *;
+@use 'function/index' as *;
+@use 'css-vars/_button' as *;
+@use 'sass:map';
+
+@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:
+    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;
+  vertical-align: middle;
+  height: 32px;
+  line-height: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  padding: deepGet($sizes, '', 'padding');
+  border-radius: deepGet($sizes, '', 'radius');
+  border-width: 1px;
+  border-style: solid;
+  background-color: getCssVar('button', 'bgcolor');
+  color: getCssVar('button', 'color');
+  border-color: getCssVar('button', 'border-color');
+
+  &__content {
+    display: inline-flex;
+    align-items: center;
+  }
+  &__loading {
+    @keyframes rotating {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+    animation: rotating 2s linear infinite;
+    & + * {
+      margin-left: 4px;
+    }
+  }
+  &__icon {
+    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;
+    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 {
+      @include set-bordercolor-custom(getCssVar('color', 'primary', 'base'));
+      @include set-bgcolor-custom(getCssVar('color', 'fill', 'blank'));
+    }
+  }
+
+  @include is('round') {
+    border-radius: getNamespace('round');
+  }
+
+  @include is('circle') {
+    width: 32px;
+    border-radius: 50%;
+    padding: 8px;
+  }
+
+  & + & {
+    margin-left: 10px;
+  }
+
+  @each $type in $button-types {
+    @include button-modifier-style($button, $type);
+  }
+
+  @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

@@ -0,0 +1,85 @@
+@use 'mixins/index' as *;
+
+@include buildRootCls('colors') {
+  &--primary {
+    width: 60rem;
+    border-radius: 4px;
+    overflow: hidden;
+    color: #ffffff;
+  }
+  &--secondary {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+  &--neutral {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+  }
+  &__panel {
+    border-radius: 4px;
+    overflow: hidden;
+    color: #ffffff;
+  }
+  &__base {
+    color: #ffffff;
+    height: 6rem;
+    box-shadow: 10px 10px;
+    padding: 1rem;
+  }
+  &__shades {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+  &__shade {
+    flex: 1;
+    height: 3.2rem;
+    padding: 0.2rem;
+  }
+  &__collects {
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    height: 7rem;
+    padding: 1rem;
+  }
+  &__borders {
+    display: flex;
+    justify-content: space-between;
+  }
+  &__border-content {
+    border-radius: 50%;
+    margin-left: 1rem;
+    background-color: #fff;
+    height: 5rem;
+    width: 5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+  }
+  &__grids {
+    background-color: #ffffff; /* 轻灰色背景 */
+    background-image:
+      linear-gradient(45deg, #ededf0 25%, transparent 25%),
+      linear-gradient(-45deg, #ededf0 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, #ededf0 75%),
+      linear-gradient(-45deg, transparent 75%, #ededf0 75%);
+    background-size: 22px 22px;
+    background-position:
+      0 0,
+      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

@@ -0,0 +1,88 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$button: () !default;
+$button: map.deep-merge(
+  (
+    '': (
+      'bgcolor': getCssVar('color', 'fill', 'blank'),
+      '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'),
+      'active-color': getCssVar('color', 'primary', 'base'),
+      'active-bgcolor': getCssVar('color', 'primary', 'shade-2'),
+      'active-border-color': getCssVar('color', 'primary', 'shade-5')
+    )
+  ),
+  $button
+);
+
+$button-types: ('', 'primary', 'success', 'danger', 'warning', 'info');
+@each $type in $button-types {
+  @if $type {
+    $button: map.deep-merge(
+      (
+        $type: (
+            'bgcolor': getCssVar('color', $type, 'base'),
+            'color': getCssVar('color', 'text', 'lightest'),
+            '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'),
+            'active-color': getCssVar('color', 'text', 'lightest'),
+            'active-bgcolor': getCssVar('color', $type, 'active'),
+            'active-border-color': getCssVar('color', $type, 'active')
+          )
+      ),
+      $button
+    );
+  }
+}
+
+$button-padding: () !default;
+$button-padding: map.deep-merge(
+  (
+    'large': 12px 20px,
+    '': 8px 16px,
+    'small': 6px 12px,
+    'mini': 4px 8px
+  ),
+  $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

@@ -0,0 +1,125 @@
+@use 'sass:map';
+@use '../function/index.scss' as *;
+
+$colors: () !default;
+
+$colors: map.deep-merge(
+  (
+    text: (
+      darkest: #000000,
+      darker: #303131,
+      base: #606062,
+      dark: #909093,
+      light: #b2b2b6,
+      lighter: #cdcdd1,
+      lightest: #ffffff
+    ),
+    border: (
+      darker: #c3c3cb,
+      dark: #d0d0d8,
+      base: #dbdbe0,
+      light: #e4e4e8,
+      lighter: #ededef,
+      lightest: #efeff3
+    ),
+    fill: (
+      darker: #d7d7dc,
+      dark: #e8e8ec,
+      base: #ededf0,
+      light: #f1f1f4,
+      lighter: #f6f6f7,
+      lightest: #f8f8f9,
+      blank: #ffffff,
+      transparent: transparent
+    )
+  ),
+  $colors
+);
+
+$state-types: (
+  primary: (
+    #9e88ff
+  ),
+  success: (
+    #06b56d
+  ),
+  danger: (
+    #ee6979
+  ),
+  warning: (
+    #e2a01d
+  ),
+  info: (
+    #8e8e91
+  )
+);
+
+/**
+ * 生成不同(0.9-0.1)透明度对应的等值颜色：
+         primary: (
+            base: #9e88ff,
+            active:#8d7ae6,
+            hover: #8d7ae6,
+            shade-9: #9e88ff,
+            shade-8: #a995ff,
+            shade-7: #b3a3ff,
+            shade-6: #beb0ff,
+            shade-5: #c9bdff,
+            shade-4: #d4caff,
+            shade-3: #ded7ff,
+            shade-2: #e9e5ff,
+            shade-1: #f4f2ff
+        ),
+ */
+@each $type, $color in $state-types {
+  $colors: map.merge(
+    $colors,
+    (
+      $type: create-colors($color)
+    )
+  );
+}
+
+$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

@@ -0,0 +1,14 @@
+@use 'sass:map';
+
+$namespace: () !default;
+$namespace: map.deep-merge(
+  (
+    prefix: 're',
+    statePrefix: 'is',
+    fontSizeRoot: 16px,
+    fontSizeBase: 14px,
+    radius: 4px,
+    round: 20px
+  ),
+  $namespace
+);

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

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$popconfirm: () !default;
+$popconfirm: map.deep-merge(
+  (
+    'icon': (
+      'color': getCssVar('color', 'warning', 'base')
+    )
+  ),
+  $popconfirm
+);

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

@@ -0,0 +1,21 @@
+@use 'mixins/index' as *;
+
+@include buildRootCls(filter-panel) {
+  display: flex;
+  align-items: start;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  border-radius: 4px;
+
+  @include sub(inner) {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  @include sub(extra) {
+    margin-top: 1em;
+  }
+}

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

@@ -0,0 +1,2 @@
+@use '../css-vars/_namespace.scss' as *;
+@use './index';

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

@@ -0,0 +1,163 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:string';
+@use '../css-vars/_namespace' as *;
+
+//('color','text','base') => $obj.color.text.base
+@function deepGet($obj, $keys...) {
+  $current: $obj;
+  @each $key in $keys {
+    $current: map.get($current, $key);
+  }
+  @return $current;
+}
+
+//('color','text','base') => 'color-text-base'
+@function joinStr($args...) {
+  $str: list.nth($args, 1);
+  @for $i from 1 through list.length($args) {
+    @if $i > 1 {
+      $str: $str + '-' + list.nth($args, $i);
+    }
+  }
+  @return $str;
+}
+// 'button' => 're-button'
+@function namespaceJoinStr($args...) {
+  @return deepGet($namespace, 'prefix') + '-' + joinStr($args...);
+}
+
+//#{$obj.color.text.base}
+@function getScssVar($obj, $keys...) {
+  @return #{deepGet($obj, $keys...)};
+}
+// $namespace.prefix's value
+@function getNamespace($name) {
+  @return deepGet($namespace, $name);
+}
+
+//('color','text','base') => '--re-color-text-base'
+@function getCssVarStr($args...) {
+  @return '--' + namespaceJoinStr($args...);
+}
+
+// ('color','text','base') => var(--re-color-text-base)
+@function getCssVar($args...) {
+  @return var(#{getCssVarStr($args...)});
+}
+
+@function hex-to-rgb($hex) {
+  @return color.channel($hex, 'red', $space: rgb) color.channel($hex, 'green', $space: rgb)
+    color.channel($hex, 'blue', $space: rgb);
+}
+
+@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};
+}
+
+@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));
+  $b-hex: color-to-hex(color.channel($color, 'blue', $space: rgb));
+
+  @return string.unquote('#' + $r-hex + $g-hex + $b-hex);
+}
+
+/**
+ * craete same white opacity color
+ */
+@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: if($is-dark, 48, 255);
+  $white-g: if($is-dark, 49, 255);
+  $white-b: if($is-dark, 49, 255);
+
+  $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($equiv-r, $equiv-g, $equiv-b);
+}
+
+/**
+ * create a darken color
+ */
+@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);
+
+  $new-r: math.round($r * (1 - $factor));
+  $new-g: math.round($g * (1 - $factor));
+  $new-b: math.round($b * (1 - $factor));
+
+  @return rgb($new-r, $new-g, $new-b);
+}
+
+/**
+ * create shape color
+ */
+@function create-colors($base-color, $darkness: 0.16) {
+  $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));
+    $result: map.merge(
+      $result,
+      (
+        'shade-#{$i}': $color-with-opacity
+      )
+    );
+  }
+  @return $result;
+}
+
+/**
+ * create dark shape color
+ */
+@function create-dark-colors($base-color, $darkness: 0.16) {
+  $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

@@ -0,0 +1,9 @@
+@forward './base';
+@forward './button';
+@forward './button-group';
+@forward './colors';
+@forward './filter-panel';
+@forward './svg-icon';
+@forward './popover';
+@forward './tooltip';
+@forward './popconfirm';