rappel-ui 1.0.11 → 1.0.13

package/theme-chalk/src/colors.scss

@@ -1,85 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-@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

@@ -1,88 +0,0 @@
-@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

@@ -1,125 +0,0 @@
-@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: (
-    #9d87ff
-  ),
-  success: (
-    #06b56d
-  ),
-  danger: (
-    #ee6979
-  ),
-  warning: (
-    #cd9a0a
-  ),
-  info: (
-    #8e8e91
-  )
-);
-
-/**
- * 生成不同(0.9-0.1)透明度对应的等值颜色：
-         primary: (
-            base: #9d87ff,
-            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

@@ -1,14 +0,0 @@
-@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/_tooltip.scss

@@ -1,23 +0,0 @@
-@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,21 +0,0 @@
-@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

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

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

@@ -1,163 +0,0 @@
-@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.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));
-    $result: map.merge(
-      $result,
-      (
-        'shade-#{$i}': $color-with-opacity
-      )
-    );
-  }
-  @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,8 +0,0 @@
-@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

@@ -1,14 +0,0 @@
-@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')};
-}