eoss 0.1.0-alpha.4 → 0.1.0-alpha.5

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

@@ -1,9 +1,10 @@
 @use '../common/var' as *;
+@use '../mixins/function' as func;
 
 @mixin button-plain($color) {
   color: $color;
-  background: mix($color-white, $color, 90%);
-  border-color: mix($color-white, $color, 60%);
+  background: func.custom-mix($color-white, $color, 90%);
+  border-color: func.custom-mix($color-white, $color, 60%);
 
   &:hover,
   &:focus {
@@ -13,8 +14,16 @@
   }
 
   &:active {
-    background: mix($color-black, $color, $button-active-shade-percent);
-    border-color: mix($color-black, $color, $button-active-shade-percent);
+    background: func.custom-mix(
+      $color-black,
+      $color,
+      $button-active-shade-percent
+    );
+    border-color: func.custom-mix(
+      $color-black,
+      $color,
+      $button-active-shade-percent
+    );
     color: $color-white;
     outline: none;
   }
@@ -24,9 +33,9 @@
     &:hover,
     &:focus,
     &:active {
-      color: mix($color-white, $color, 40%);
-      background-color: mix($color-white, $color, 90%);
-      border-color: mix($color-white, $color, 80%);
+      color: func.custom-mix($color-white, $color, 40%);
+      background-color: func.custom-mix($color-white, $color, 90%);
+      border-color: func.custom-mix($color-white, $color, 80%);
     }
   }
 }
@@ -38,22 +47,26 @@
 
   &:hover,
   &:focus {
-    background: mix(
+    background: func.custom-mix(
       $color-white,
       $background-color,
       $button-hover-tint-percent
     );
-    border-color: mix($color-white, $border-color, $button-hover-tint-percent);
+    border-color: func.custom-mix(
+      $color-white,
+      $border-color,
+      $button-hover-tint-percent
+    );
     color: $color;
   }
 
   &:active {
-    background: mix(
+    background: func.custom-mix(
       $color-black,
       $background-color,
       $button-active-shade-percent
     );
-    border-color: mix(
+    border-color: func.custom-mix(
       $color-black,
       $border-color,
       $button-active-shade-percent
@@ -63,12 +76,12 @@
   }
 
   &.is-active {
-    background: mix(
+    background: func.custom-mix(
       $color-black,
       $background-color,
       $button-active-shade-percent
     );
-    border-color: mix(
+    border-color: func.custom-mix(
       $color-black,
       $border-color,
       $button-active-shade-percent
@@ -82,8 +95,8 @@
     &:focus,
     &:active {
       color: $color-white;
-      background-color: mix($background-color, $color-white);
-      border-color: mix($border-color, $color-white);
+      background-color: func.custom-mix($background-color, $color-white);
+      border-color: func.custom-mix($border-color, $color-white);
     }
   }
 

package/packages/theme-chalk/src/mixins/color.scss

@@ -1,6 +1,7 @@
 @use 'sass:math';
 @use 'sass:list';
 @use 'sass:string';
+@use 'sass:color';
 // rgb 颜色转 hex
 @function rgbToHex($rgbColor) {
   $ieHexStr: ie-hex-str($rgbColor);
@@ -9,14 +10,14 @@
 // rgba 颜色转 hex ,该函数是根据背景颜色来计算的。默认背景色是白色
 @function rgbaToHex($rgbaColor, $background: rgb(255, 255, 255)) {
   @if ($rgbaColor) {
-    $bgR: red($background);
-    $bgG: green($background);
-    $bgB: blue($background);
+    $bgR: color.red($background);
+    $bgG: color.green($background);
+    $bgB: color.blue($background);
 
-    $colorRed: red($rgbaColor);
-    $colorGreen: green($rgbaColor);
-    $colorBlue: blue($rgbaColor);
-    $colorAlpha: opacity($rgbaColor);
+    $colorRed: color.red($rgbaColor);
+    $colorGreen: color.green($rgbaColor);
+    $colorBlue: color.blue($rgbaColor);
+    $colorAlpha: color.opacity($rgbaColor);
 
     $rgbColor: rgb(
       (1 - $colorAlpha) * $bgR + $colorAlpha * $colorRed,
@@ -29,10 +30,10 @@
 }
 // 根据颜色获取对应的hsv，在tinycolor中首先进行了归一化处理，这里没有
 // 返回的结果h是0~360，代表的是色相的角度， sv的范围0-1
-@function rbgToHsv($color) {
-  $red: red($color);
-  $green: green($color);
-  $blue: blue($color);
+@function rgbToHsv($color) {
+  $red: color.red($color);
+  $green: color.green($color);
+  $blue: color.blue($color);
   $max: max($red, $green, $blue);
   $min: min($red, $green, $blue);
   $diff: $max - $min;
@@ -114,10 +115,12 @@
 }
 // 转换明度
 @function getValue($v, $i, $isLight) {
-  $value: min(
-    if($isLight, $v + $brightnessStep1 * $i, $v - $brightnessStep2 * $i),
-    1
+  $tempValue: if(
+    $isLight,
+    $v + $brightnessStep1 * $i,
+    $v - $brightnessStep2 * $i
   );
+  $value: min($tempValue, 1);
   @return toFixed($value, 2);
 }
 $hueStep: 2;
@@ -131,7 +134,7 @@ $darkColorCount: 4;
 // 根据颜色和对应的色板位置，计算出对应的色板颜色
 @function getColor($color, $index) {
   $isLight: if($index <= 6, true, false);
-  $hsv: rbgToHsv($color);
+  $hsv: rgbToHsv($color);
   //这里将i转换成以主色为中心，两侧的i值逐渐增大
   $i: if(
     $isLight,
@@ -139,8 +142,8 @@ $darkColorCount: 4;
     $index - $lightColorCount - 1
   );
   @return hsvTorgb(
-    getHue(nth($hsv, 1), $i, $isLight),
-    getSaturation(nth($hsv, 2), $i, $isLight),
-    getValue(nth($hsv, 3), $i, $isLight)
+    getHue(list.nth($hsv, 1), $i, $isLight),
+    getSaturation(list.nth($hsv, 2), $i, $isLight),
+    getValue(list.nth($hsv, 3), $i, $isLight)
   );
 }

package/packages/theme-chalk/src/mixins/function.scss

@@ -1,44 +1,88 @@
-@use 'config' as *;
-
-/* BEM support Func
- -------------------------- */
-@function selectorToString($selector) {
-  $selector: inspect($selector);
-  $selector: str-slice($selector, 2, -2);
-  @return $selector;
-}
-
-@function containsModifier($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, $modifier-separator) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containWhenFlag($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, '.' + $state-prefix) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containPseudoClass($selector) {
-  $selector: selectorToString($selector);
-
-  @if str-index($selector, ':') {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function hitAllSpecialNestRule($selector) {
-  @return containsModifier($selector) or containWhenFlag($selector) or
-    containPseudoClass($selector);
-}
+@use 'config' as *;
+@use 'sass:color';
+@use 'sass:string';
+
+/* BEM support Func
+ -------------------------- */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: string.slice($selector, 2, -2);
+  @return $selector;
+}
+
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, $modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, '.' + $state-prefix) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, ':') {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector);
+}
+
+/* Helper function to extract default color from CSS variables
+ -------------------------- */
+@function extract-default-color($color) {
+  @if type-of($color) == 'string' and string.index($color, 'var(') != null {
+    // 提取默认颜色值 (var(--name, default) 中的 default 部分)
+    $start: string.index($color, ',') + 1;
+    $end: string.index($color, ')') - 1;
+    @if $start and $end {
+      $default-color: string.slice($color, $start, $end);
+      // 去除前后空格
+      $default-color: string.unquote(string.trim($default-color));
+      @return $default-color;
+    }
+  }
+  @return $color;
+}
+
+/* Custom mix function for CSS variables
+ -------------------------- */
+@function custom-mix($color1, $color2, $weight: 50%) {
+  // 提取默认颜色
+  $color1-extracted: extract-default-color($color1);
+  $color2-extracted: extract-default-color($color2);
+
+  // 如果提取后仍然是字符串（非CSS颜色值），直接返回
+  @if type-of($color1-extracted) ==
+    'string' or
+    type-of($color2-extracted) ==
+    'string'
+  {
+    // 如果第二个颜色是CSS变量，返回第二个颜色
+    @if type-of($color2) == 'string' and string.index($color2, 'var(') != null {
+      @return $color2;
+    }
+    // 否则返回第一个颜色
+    @return $color1;
+  }
+
+  // 使用原生mix函数混合颜色
+  @return color.mix($color1-extracted, $color2-extracted, $weight);
+}

package/packages/theme-chalk/src/tag.scss

@@ -1,4 +1,5 @@
 @use 'mixins/mixins' as *;
+@use 'mixins/function' as func;
 @use 'common/var' as *;
 
 @mixin genTheme(
@@ -12,45 +13,61 @@
   }
 
   &.es-tag--info {
-    background-color: mix(
+    background-color: func.custom-mix(
       $tag-info-color,
       $color-white,
       $backgroundColorWeight
     );
-    border-color: mix($tag-info-color, $color-white, $borderColorWeight);
-    color: mix($tag-info-color, $color-white, $fontColorWeight);
+    border-color: func.custom-mix(
+      $tag-info-color,
+      $color-white,
+      $borderColorWeight
+    );
+    color: func.custom-mix($tag-info-color, $color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $tag-info-color;
     }
 
     .es-tag__close {
-      color: mix($tag-info-color, $color-white, $fontColorWeight);
+      color: func.custom-mix($tag-info-color, $color-white, $fontColorWeight);
       &:hover {
         color: $color-white;
-        background-color: mix($tag-info-color, $color-white, $hoverColorWeight);
+        background-color: func.custom-mix(
+          $tag-info-color,
+          $color-white,
+          $hoverColorWeight
+        );
       }
     }
   }
 
   &.es-tag--success {
-    background-color: mix(
+    background-color: func.custom-mix(
       $tag-success-color,
       $color-white,
       $backgroundColorWeight
     );
-    border-color: mix($tag-success-color, $color-white, $borderColorWeight);
-    color: mix($tag-success-color, $color-white, $fontColorWeight);
+    border-color: func.custom-mix(
+      $tag-success-color,
+      $color-white,
+      $borderColorWeight
+    );
+    color: func.custom-mix($tag-success-color, $color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $tag-success-color;
     }
 
     .es-tag__close {
-      color: mix($tag-success-color, $color-white, $fontColorWeight);
+      color: func.custom-mix(
+        $tag-success-color,
+        $color-white,
+        $fontColorWeight
+      );
       &:hover {
         color: $color-white;
-        background-color: mix(
+        background-color: func.custom-mix(
           $tag-success-color,
           $color-white,
           $hoverColorWeight
@@ -60,23 +77,31 @@
   }
 
   &.es-tag--warning {
-    background-color: mix(
+    background-color: func.custom-mix(
       $tag-warning-color,
       $color-white,
       $backgroundColorWeight
     );
-    border-color: mix($tag-warning-color, $color-white, $borderColorWeight);
-    color: mix($tag-warning-color, $color-white, $fontColorWeight);
+    border-color: func.custom-mix(
+      $tag-warning-color,
+      $color-white,
+      $borderColorWeight
+    );
+    color: func.custom-mix($tag-warning-color, $color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $tag-warning-color;
     }
 
     .es-tag__close {
-      color: mix($tag-warning-color, $color-white, $fontColorWeight);
+      color: func.custom-mix(
+        $tag-warning-color,
+        $color-white,
+        $fontColorWeight
+      );
       &:hover {
         color: $color-white;
-        background-color: mix(
+        background-color: func.custom-mix(
           $tag-warning-color,
           $color-white,
           $hoverColorWeight
@@ -86,23 +111,27 @@
   }
 
   &.es-tag--danger {
-    background-color: mix(
+    background-color: func.custom-mix(
       $tag-danger-color,
       $color-white,
       $backgroundColorWeight
     );
-    border-color: mix($tag-danger-color, $color-white, $borderColorWeight);
-    color: mix($tag-danger-color, $color-white, $fontColorWeight);
+    border-color: func.custom-mix(
+      $tag-danger-color,
+      $color-white,
+      $borderColorWeight
+    );
+    color: func.custom-mix($tag-danger-color, $color-white, $fontColorWeight);
 
     @include when(hit) {
       border-color: $tag-danger-color;
     }
 
     .es-tag__close {
-      color: mix($tag-danger-color, $color-white, $fontColorWeight);
+      color: func.custom-mix($tag-danger-color, $color-white, $fontColorWeight);
       &:hover {
         color: $color-white;
-        background-color: mix(
+        background-color: func.custom-mix(
           $tag-danger-color,
           $color-white,
           $hoverColorWeight

package/src/index.js

@@ -223,7 +223,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '0.1.0-alpha.4',
+  version: '0.1.0-alpha.5',
   install,
   CollapseTransition,
   Loading,