rappel-ui 1.0.0 → 1.0.1

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

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

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

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

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

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,155 +0,0 @@
-@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' => '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...)});
-}
-
-/**
- * 将十六进制颜色转换为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

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

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

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

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

@@ -1,13 +0,0 @@
-@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};
-    }
-  }
-}