rappel-ui 1.0.1 → 1.0.2

package/theme-chalk/src/common/_function.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use 'sass:list';
+@use '../css-vars/_namespace.scss' 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' => 'pu-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') => '--pu-color-text-base'
+@function getCssVarStr($args...) {
+    @return '--' + namespaceJoinStr($args...);
+}
+
+// ('color','text','base') => var(--pu-color-text-base)
+@function getCssVar($args...) {
+    @return var(#{getCssVarStr($args...)});
+}

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

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use '../function/index' as *;
+
+$button: () !default;
+$button: map.deep-merge(
+  (
+    '': (
+      'bgcolor': getCssVar('color', 'fill', 'blank'),
+      'color': getCssVar('color', 'text', 'secondary'),
+      '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')
+    )
+  ),
+  $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')
+          )
+      ),
+      $button
+    );
+  }
+}
+
+$button-padding: () !default;
+$button-padding: map.deep-merge(
+  (
+    'large': 12px 20px,
+    '': 8px 16px,
+    'small': 6px 12px,
+    'mini': 4px 8px
+  ),
+  $button-padding
+);

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

@@ -0,0 +1,82 @@
+@use 'sass:map';
+@use '../function/index.scss' as *;
+
+$colors: () !default;
+
+$colors: map.deep-merge(
+  (
+    text: (
+      darkest: #000000,
+      base: #303131,
+      secondary: #606062,
+      neutral: #909093,
+      placeholder: #b2b2b6,
+      disabled: #cdcdd1,
+      lightest: #ffffff
+    ),
+    border: (
+      darker: #c3c3cb,
+      dark: #d0d0d8,
+      base: #dbdbe0,
+      light: #e4e4e8,
+      lighter: #ededef,
+      extra-light: #efeff3,
+      theme: #d4caff
+    ),
+    fill: (
+      darker: #d7d7dc,
+      dark: #e8e8ec,
+      base: #ededf0,
+      light: #f1f1f4,
+      lighter: #f6f6f7,
+      extra-light: #f8f8f9,
+      theme: #f7f7fb,
+      blank: #ffffff,
+      transparent: transparent
+    )
+  ),
+  $colors
+);
+
+$state-types: (
+  primary: (
+    #937bff
+  ),
+  success: (
+    #06b56d
+  ),
+  danger: (
+    #ee6979
+  ),
+  warning: (
+    #cd9a0a
+  ),
+  info: (
+    #8e8e91
+  )
+);
+
+/**
+ * 生成不同(0.9-0.1)透明度对应的等值颜色：
+         primary: (
+            base: #937bff,
+            hover: #7e69dc,
+            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)
+    )
+  );
+}

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

@@ -0,0 +1,12 @@
+@use 'sass:map';
+
+$namespace: () !default;
+$namespace: map.deep-merge(
+  (
+    prefix: 're',
+    statePrefix: 'is',
+    font-size: 16px,
+    round: 20px
+  ),
+  $namespace
+);

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,155 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:string';
+@use '../css-vars/_namespace.scss' 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...)});
+}
+
+/**
+ * 将十六进制颜色转换为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));
+  $b-hex: color-to-hex(color.channel($color, 'blue', $space: rgb));
+
+  @return string.unquote('#' + $r-hex + $g-hex + $b-hex);
+}
+
+/**
+ * 创建一个等效的透明度颜色，并返回一个等效的透明度颜色
+ * @param $color 颜色
+ * @param $opacity 透明度，默认值为1
+ * @returns 一个等效的透明度颜色
+ */
+@function get-equal-opacity-color($color, $opacity: 1) {
+  // 获取颜色的 RGB 值
+  $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;
+
+  // 计算等效颜色值：前景 × 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));
+}
+
+/**
+ * 创建一个变暗的颜色，并返回一个变暗的颜色
+ * @param $color 颜色
+ * @param $factor 颜色变暗的度量，默认为0.15
+ * @returns 一个变暗的颜色
+ */
+@function darken-color($color, $factor: 0.15) {
+  $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));
+}
+
+/**
+ * 创建层级颜色
+ * @param $base-color 基础颜色
+ * @param $darkness 变暗的度量，默认为0.15
+ * @returns 主题色映射
+ */
+@function create-colors($base-color, $darkness: 0.15) {
+  $result: (
+    base: $base-color,
+    hover: darken-color($base-color, $darkness)
+  );
+
+  // 添加不同透明度的等值颜色，映射为 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);
+    $result: map.merge(
+      $result,
+      (
+        'shade-#{$i}': $color-with-opacity
+      )
+    );
+  }
+
+  @return $result;
+}

package/theme-chalk/src/index.scss

@@ -0,0 +1,2 @@
+@forward './base.scss';
+@forward './button.scss';

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

@@ -0,0 +1,140 @@
+@use 'sass:map';
+@use '../css-vars/_button' as *;
+@use './index' as *;
+@use '../function/index' as *;
+
+@mixin set-bgcolor-var($type, $value) {
+  #{getCssVarStr('button', 'bgcolor')}: #{map.get($button, $type, $value)};
+}
+
+@mixin set-bgcolor-custom($value) {
+  #{getCssVarStr('button', 'bgcolor')}: #{$value};
+}
+
+@mixin set-color-var($type, $value) {
+  #{getCssVarStr('button', 'color')}: #{map.get($button, $type, $value)};
+}
+
+@mixin set-color-custom($value) {
+  #{getCssVarStr('button', 'color')}: #{$value};
+}
+
+@mixin set-bordercolor-var($type, $value) {
+  #{getCssVarStr('button', 'border-color')}: #{map.get($button, $type, $value)};
+}
+
+@mixin set-bordercolor-custom($value) {
+  #{getCssVarStr('button', 'border-color')}: #{$value};
+}
+
+@mixin set-bbc-color-vars($type) {
+  @include set-bgcolor-var($type, 'bgcolor');
+  @include set-color-var($type, 'color');
+  @include set-bordercolor-var($type, 'border-color');
+}
+
+@mixin set-bbc-hover-color-vars($type) {
+  @include set-bgcolor-var($type, 'hover-bgcolor');
+  @include set-color-var($type, 'hover-color');
+  @include set-bordercolor-var($type, 'hover-border-color');
+}
+
+@mixin button-modifier($button, $type) {
+  @include set-bbc-color-vars($type);
+  @include hover() {
+    @include set-bbc-hover-color-vars($type);
+  }
+
+  @include is('disabled') {
+    cursor: not-allowed;
+    background-color: if(
+      $type != '',
+      getCssVar('color', $type, 'shade-4'),
+      getCssVar('color', 'fill', 'blank')
+    );
+    border-color: if(
+      $type != '',
+      getCssVar('color', $type, 'shade-4'),
+      getCssVar('color', 'border', 'base')
+    );
+    color: if(
+      $type != '',
+      getCssVar('color', 'fill', 'blank'),
+      getCssVar('color', 'text', 'disabled')
+    );
+  }
+
+  @include is('link') {
+    @include set-color-var($type, if($type != '', 'bgcolor', 'color'));
+    @include hover {
+      @include set-color-var($type, if($type != '', 'hover-bgcolor', 'hover-color'));
+      @include set-bgcolor-custom('transparent');
+      @include set-bordercolor-custom('transparent');
+    }
+
+    @include is('disabled') {
+      background-color: getCssVar('color', 'fill', 'blank');
+      border-color: getCssVar('color', 'fill', 'blank');
+      color: if(
+        $type != '',
+        getCssVar('color', $type, 'shade-4'),
+        getCssVar('color', 'text', 'disabled')
+      );
+    }
+  }
+
+  @include is('plain') {
+    @if $type != '' {
+      background-color: getCssVar('color', $type, 'shade-1');
+      color: getCssVar('color', $type, 'base');
+      border-color: getCssVar('color', $type, 'shade-6');
+      @include hover {
+        color: getCssVar('color', 'fill', 'blank');
+        background-color: getCssVar('color', $type, 'base');
+        border-color: getCssVar('color', $type, 'base');
+      }
+      @include is('disabled') {
+        background-color: if(
+          $type != '',
+          getCssVar('color', $type, 'shade-1'),
+          getCssVar('color', 'fill', 'blank')
+        );
+        color: if(
+          $type != '',
+          getCssVar('color', $type, 'shade-4'),
+          getCssVar('color', 'text', 'disabled')
+        );
+        border-color: if(
+          $type != '',
+          getCssVar('color', $type, 'shade-4'),
+          getCssVar('color', 'border', 'shade-4')
+        );
+      }
+    }
+  }
+
+  @include is('loading') {
+    &:before {
+      z-index: 1;
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      pointer-events: none;
+      border-radius: inherit;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+
+@mixin button-modifier-style($button, $type) {
+  @if $type != '' {
+    &--#{$type} {
+      @include button-modifier($button, $type);
+    }
+  } @else {
+    @include button-modifier($button, $type);
+  }
+}

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

@@ -0,0 +1,25 @@
+@use '../function/index' as *;
+
+@mixin buildCls($name) {
+  @at-root {
+    .#{getNamespace('prefix') + '-' + $name} {
+      @content;
+    }
+  }
+}
+
+@mixin is($state) {
+  &.#{getNamespace('statePrefix') + '-' + $state} {
+    @content;
+  }
+}
+
+@mixin hover() {
+  &:hover:not(.is-disabled) {
+    @content;
+  }
+}
+
+@mixin set-css-var($name, $value) {
+  #{getCssVarStr($name)}: #{$value};
+}

package/theme-chalk/src/root-vars.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use 'css-vars/_colors' as *;
+@use 'function/index' as *;
+
+:root {
+  #{getCssVarStr('color', 'primary')}: #{map.get($colors, 'primary', 'base')};
+
+  @each $color-name, $shades in $colors {
+    @each $shade-name, $shade-value in $shades {
+      #{getCssVarStr('color')}-#{$color-name}-#{''+$shade-name}: #{$shade-value};
+    }
+  }
+}