Merge branch 'v4' of https://github.com/jdf2e/nutui into v4

src/packages/__VUE/calendar/index.scss

@@ -201,8 +201,17 @@
           }
 
           &--choose {
-            background-color: $calendar-choose-color;
             color: $calendar-choose-font-color;
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              left: 0;
+              background-color: $calendar-choose-color;
+              opacity: 0.09;
+              content: '';
+            }
           }
 
           .nut-calendar__day-value {

src/packages/__VUE/configprovider/doc.md

@@ -128,18 +128,13 @@ NutUI 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 
 - 基础变量中的主色调需要您使用十六进制色值来进行覆盖，请勿使用类似于`red`,`green`来进行覆盖
 
-- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色使用的是`rgba`属性，使用`:root 选择器`修改主色调会有部分组件变量不生效：
+- 基础变量和组件变量都能通过 `:root 选择器`和 `ConfigProvider 组件`，推荐您使用`ConfigProvider 组件`来修改主色调，因为部分组件的变量激活色的渐变色使用的是`rgba`，使用`:root 选择器`修改主色调会有部分组件变量不生效：
 ```less
-// 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下8个组件变量色
+// 如果您仍旧选择使用:root 选择器来进行修改主色调，您还需要修改以下3个组件变量色  primaryColor为设置的主色调
 
---nut-calendar-choose-color: rgba(primaryColor,0.09);
---nut-range-bg-color: rgba(primaryColor,0.5);
 --nut-address-region-tab-line: linear-gradient(90deg, primaryColor 0%, rgba(primaryColor,0.15) 100%)  ; 
---nut-radio-label-button-background: rgba(primaryColor,0.05);
---nut-timeselect-timedetail-item-cur-bg-color: rgba(primaryColor,0.15);
---nut-tabs-horizontal-tab-line-color: rgba(primaryColor,0.15);
+--nut-tabs-horizontal-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
 --nut-tabs-vertical-tab-line-color: linear-gradient(180deg, primaryColor 0%, rgba(primaryColor,0.15) 100%);
---nut-sku-item-active-bg: rgba(primaryColor,0.15);
 ```
 
 #### 变量列表

src/packages/__VUE/configprovider/index.vue

@@ -43,18 +43,15 @@ export default create({
       const primaryColor = props?.themeVars?.primaryColor;
       // 为了处理一些组件的rgba透明颜色
       if (primaryColor) {
-        cssVars[`--nut-calendar-choose-color`] = `rgba(${colorRgb(primaryColor)},0.09)`;
-        cssVars[`--nut-range-bg-color`] = `rgba(${colorRgb(primaryColor)},0.5)`;
         cssVars[`--nut-address-region-tab-line`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
           primaryColor
-        )},0.15) 100%)   `;
-        cssVars[`--nut-radio-label-button-background`] = `rgba(${colorRgb(primaryColor)},0.05)`;
-        cssVars[`--nut-timeselect-timedetail-item-cur-bg-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
-        cssVars[`--nut-tabs-horizontal-tab-line-color`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        )},0.15) 100%) `;
+        cssVars[`--nut-tabs-horizontal-tab-line-color`] = `linear-gradient(90deg, ${primaryColor} 0%, rgba(${colorRgb(
+          primaryColor
+        )},0.15)100%)`;
         cssVars[`--nut-tabs-vertical-tab-line-color`] = `linear-gradient(180deg, ${primaryColor} 0%, rgba(${colorRgb(
           primaryColor
-        )},0.15) 100%)   `;
-        cssVars[`--nut-sku-item-active-bg`] = `rgba(${colorRgb(primaryColor)},0.15)`;
+        )},0.15) 100%) `;
       }
       Object.keys(themeVars).forEach((key) => {
         cssVars[`--nut-${kebabCase(key)}`] = themeVars[key];

src/packages/__VUE/radio/index.scss

@@ -44,9 +44,22 @@
     box-sizing: border-box;
     border: 1px solid #f6f7f9;
     &--active {
-      background: $radio-label-button-background;
+      background: transparent;
       color: $radio-label-font-active-color;
       border: 1px solid $radio-label-button-border-color;
+      position: relative;
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: $radio-label-button-background;
+        opacity: 0.05;
+        content: '';
+      }
     }
     &--disabled {
       color: $radio-label-disable-color;

src/packages/__VUE/range/index.scss

@@ -106,15 +106,18 @@
   position: relative;
   width: 100%;
   height: 4px;
-  background-color: $range-bg-color;
   border-radius: 2px;
   cursor: pointer;
   &::before {
     position: absolute;
-    top: -8px;
+    top: 0;
     right: 0;
-    bottom: -8px;
+    bottom: 0;
     left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $range-bg-color;
+    opacity: 0.5;
     content: '';
   }
 

src/packages/__VUE/sku/index.scss

@@ -106,9 +106,23 @@
           border: 1px solid rgba(242, 242, 242, 1);
 
           &.active {
-            background: $sku-item-active-bg;
+            background: transparent;
             border: $sku-item-border;
             color: $primary-color;
+            position: relative;
+            &::after {
+              position: absolute;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              left: 0;
+              width: 100%;
+              height: 100%;
+              border-radius: 15px;
+              background-color: $sku-item-active-bg;
+              opacity: 0.15;
+              content: '';
+            }
           }
           &.disable {
             color: $text-color;

src/packages/__VUE/timedetail/index.scss

@@ -36,9 +36,22 @@
         border: 1px solid transparent;
         font-weight: bold;
         &--curr {
-          background-color: $timeselect-timedetail-item-cur-bg-color;
+          background-color: transparent;
           border: 1px solid $timeselect-timedetail-item-cur-border;
           color: $timeselect-timedetail-item-cur-text-color;
+          position: relative;
+          &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: $timeselect-timedetail-item-cur-bg-color;
+            opacity: 0.15;
+            content: '';
+          }
         }
       }
     }

src/packages/styles/variables.scss

@@ -332,7 +332,7 @@ $backtop-border-color: var(--nut-backtop-border-color, #e0e0e0) !default;
 
 // calendar
 $calendar-primary-color: var(--nut-calendar-primary-color, $primary-color) !default;
-$calendar-choose-color: var(--nut-calendar-choose-color, rgba(#fa2c19, 0.09)) !default;
+$calendar-choose-color: var(--nut-calendar-choose-color, $primary-color) !default;
 $calendar-choose-font-color: var(--nut-calendar-choose-font-color, $primary-color) !default;
 $calendar-base-color: var(--nut-calendar-base-color, #333333) !default;
 $calendar-disable-color: var(--nut-calendar-disable-color, #d1d0d0) !default;
@@ -406,7 +406,7 @@ $infiniteloading-bottom-color: var(--nut-infiniteloading-bottom-color, #c8c8c8)
 
 //range
 $range-tip-font-color: var(--nut-range-tip-font-color, #333333) !default;
-$range-bg-color: var(--nut-range-bg-color, rgba(#fa2c19, 0.5)) !default;
+$range-bg-color: var(--nut-range-bg-color, $primary-color) !default;
 $range-bg-color-tick: var(--nut-range-bg-color-tick, #fa958c) !default;
 $range-bar-bg-color: var(
   --nut-range-bar-bg-color,
@@ -490,7 +490,7 @@ $radio-label-font-active-color: var(--nut-radio-label-font-active-color, $primar
 $radio-label-disable-color: var(--nut-radio-label-disable-color, #999) !default;
 $radio-icon-disable-color: var(--nut-radio-icon-disable-color, #d6d6d6) !default;
 $radio-label-button-border-color: var(--nut-radio-label-button-border-color, $primary-color) !default;
-$radio-label-button-background: var(--nut-radio-label-button-background, rgba(#fa2c19, 0.05)) !default;
+$radio-label-button-background: var(--nut-radio-label-button-background, $primary-color) !default;
 $radio-label-margin-left: var(--nut-radio-label-margin-left, 15px) !default;
 $radio-button-border-radius: var(--nut-radio-button-border-radius, 15px) !default;
 $radio-label-font-size: var(--nut-radio-label-font-size, 14px) !default;
@@ -548,10 +548,7 @@ $timeselect-timedetail-item-bg-color: var(--nut-timeselect-timedetail-item-bg-co
 $timeselect-timedetail-item-border-radius: var(--nut-timeselect-timedetail-item-border-radius, 5px) !default;
 $timeselect-timedetail-item-text-color: var(--nut-timeselect-timedetail-item-text-color, #333333) !default;
 $timeselect-timedetail-item-text-font-size: var(--nut-timeselect-timedetail-item-text-font-size, $font-size-2) !default;
-$timeselect-timedetail-item-cur-bg-color: var(
-  --nut-timeselect-timedetail-item-cur-bg-color,
-  rgba(#fa2c19, 0.15)
-) !default;
+$timeselect-timedetail-item-cur-bg-color: var(--nut-timeselect-timedetail-item-cur-bg-color, $primary-color) !default;
 $timeselect-timedetail-item-cur-border: var(--nut-timeselect-timedetail-item-cur-border, $primary-color) !default;
 $timeselect-timedetail-item-cur-text-color: var(
   --nut-timeselect-timedetail-item-cur-text-color,
@@ -790,7 +787,7 @@ $sku-opetate-bg-default: var(
   --nut-sku-opetate-bg-default,
   linear-gradient(90deg, $primary-color, $primary-color-end 100%)
 ) !default;
-$sku-item-active-bg: var(--nut-sku-item-active-bg, rgba(#fa2c19, 0.15)) !default;
+$sku-item-active-bg: var(--nut-sku-item-active-bg, $primary-color) !default;
 $sku-opetate-bg-buy: var(
   --nut-sku-opetate-bg-buy,
   linear-gradient(135deg, rgba(255, 186, 13, 1) 0%, rgba(255, 195, 13, 1) 69%, rgba(255, 207, 13, 1) 100%)