@polyv/vue-components 1.6.1 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyv/vue-components",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "main": "./vue/index.es.js",
   "types": "./vue/src/index.d.ts",
   "dependencies": {
@@ -29,7 +29,7 @@
     "vue-types": "5.1.1"
   },
   "peerDependencies": {
-    "@polyv/utils": "^2.0.0"
+    "@polyv/utils": ">=2.0.0 <3.0.0 || >=2.19.0-beta.1"
   },
   "module": "./vue/index.es.js",
   "scripts": {

package/styles/function.scss

@@ -2,7 +2,10 @@
 @use 'sass:color';
 
 // 通过后缀生产 css 变量
-@function get-css-var($name) {
+@function get-css-var($name, $default: null) {
+  @if $default {
+    @return var(--pwc-#{$name}, $default);
+  }
   @return var(--pwc-#{$name});
 }
 

package/styles/root/basic.scss

@@ -2,7 +2,7 @@
 @use '../variables.scss' as *;
 
 :root {
-  // 主色
+  // 主要色/品牌色
   --pwc-primary-basic: #{$primary-basic};
   --pwc-primary-basic-rgb: #{get-rgb($primary-basic)};
   --pwc-primary-light-1: #{light-color($primary-basic, 0.1)};
@@ -13,8 +13,10 @@
   --pwc-primary-light-6: #{light-color($primary-basic, 0.6)};
   --pwc-primary-light-7: #{light-color($primary-basic, 0.7)};
   --pwc-primary-light-8: #{light-color($primary-basic, 0.8)};
+  --pwc-primary-dark-2: #{dark-color($primary-basic, 0.2)};
   --pwc-primary-dark-8: #{dark-color($primary-basic, 0.8)};
-  --pwc-primary-color: var(--pwc-primary-basic);
+  --pwc-primary-color: #{get-css-var('primary-basic')};
+  --pwc-primary-color-rgb: #{get-css-var('primary-basic-rgb')};
   --pwc-primary-color-hover: var(--pwc-primary-light-8);
   --pwc-primary-color-active: var(--pwc-primary-dark-8);
   --pwc-primary-color-disabled: var(--pwc-primary-light-6);
@@ -34,7 +36,8 @@
   --pwc-success-light-7: #{light-color($success-basic, 0.7)};
   --pwc-success-light-8: #{light-color($success-basic, 0.8)};
   --pwc-success-dark-8: #{dark-color($success-basic, 0.8)};
-  --pwc-success-color: var(--pwc-success-basic);
+  --pwc-success-color: #{get-css-var('success-basic')};
+  --pwc-success-color-rgb: #{get-css-var('success-basic-rgb')};
   --pwc-success-color-hover: var(--pwc-success-light-8);
   --pwc-success-color-active: var(--pwc-success-dark-8);
   --pwc-success-color-disabled: var(--pwc-success-light-6);
@@ -54,7 +57,8 @@
   --pwc-danger-light-7: #{light-color($danger-basic, 0.7)};
   --pwc-danger-light-8: #{light-color($danger-basic, 0.8)};
   --pwc-danger-dark-8: #{dark-color($danger-basic, 0.8)};
-  --pwc-danger-color: var(--pwc-danger-basic);
+  --pwc-danger-color: #{get-css-var('danger-basic')};
+  --pwc-danger-color-rgb: #{get-css-var('danger-basic-rgb')};
   --pwc-danger-color-hover: var(--pwc-danger-light-8);
   --pwc-danger-color-active: var(--pwc-danger-dark-8);
   --pwc-danger-color-disabled: var(--pwc-danger-light-6);
@@ -75,7 +79,8 @@
   --pwc-warning-light-7: #{light-color($warning-basic, 0.7)};
   --pwc-warning-light-8: #{light-color($warning-basic, 0.8)};
   --pwc-warning-dark-8: #{dark-color($warning-basic, 0.8)};
-  --pwc-warning-color: var(--pwc-warning-basic);
+  --pwc-warning-color: #{get-css-var('warning-basic')};
+  --pwc-warning-color-rgb: #{get-css-var('warning-basic-rgb')};
   --pwc-warning-color-hover: var(--pwc-warning-light-8);
   --pwc-warning-color-active: var(--pwc-warning-dark-8);
   --pwc-warning-color-disabled: var(--pwc-warning-light-6);
@@ -95,7 +100,8 @@
   --pwc-tips-light-7: #{light-color($tips-basic, 0.7)};
   --pwc-tips-light-8: #{light-color($tips-basic, 0.8)};
   --pwc-tips-dark-8: #{dark-color($tips-basic, 0.8)};
-  --pwc-tips-color: var(--pwc-tips-basic);
+  --pwc-tips-color: #{get-css-var('tips-basic')};
+  --pwc-tips-color-rgb: #{get-css-var('tips-basic-rgb')};
   --pwc-tips-color-hover: var(--pwc-tips-light-8);
   --pwc-tips-color-active: var(--pwc-tips-dark-8);
   --pwc-tips-color-disabled: var(--pwc-tips-light-6);
@@ -114,7 +120,8 @@
   --pwc-link-light-7: #{light-color($link-basic, 0.7)};
   --pwc-link-light-8: #{light-color($link-basic, 0.8)};
   --pwc-link-dark-8: #{dark-color($link-basic, 0.8)};
-  --pwc-link-color: var(--pwc-link-basic);
+  --pwc-link-color: #{get-css-var('link-basic')};
+  --pwc-link-color-rgb: #{get-css-var('link-basic-rgb')};
   --pwc-link-color-hover: var(--pwc-link-light-8);
   --pwc-link-color-active: var(--pwc-link-dark-8);
   --pwc-link-color-disabled: var(--pwc-link-light-6);

package/styles/root/border.scss

@@ -5,6 +5,8 @@
 :root {
   // 边框色
   --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 浅色边框
+  --pwc-border-color-light: rgba(#{$neutral-color-dark-rgb}, 0.06);
   // 一级边框色
   --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
   // 二级边框色
@@ -16,6 +18,8 @@
 .pwc-skin-color-mode--dark {
   // 边框色
   --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 浅色边框
+  --pwc-border-color-light: rgba(#{$neutral-color-dark-rgb}, 0.06);
   // 一级边框色
   --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
   // 二级边框色
@@ -27,6 +31,8 @@
 .pwc-skin-color-mode--light {
   // 边框色
   --pwc-border-color: rgba(#{$neutral-color-dark-rgb}, 0.1);
+  // 浅色边框
+  --pwc-border-color-light: rgba(#{$neutral-color-dark-rgb}, 0.06);
   // 一级边框色
   --pwc-border-color-1: rgba(#{$neutral-color-dark-rgb}, 0.1);
   // 二级边框色

package/styles/skin-color.scss

@@ -6,27 +6,53 @@ $skin-color-mode-prefix: 'pwc-skin-color-mode';
 @mixin set-skin-style($styles: ()) {
   $selector: &;
 
-  // 设置默认浅色
-  @each $prop, $val in map.get($styles, light) {
-    #{$prop}: #{$val};
-  }
+  $is-root: map.get($styles, root);
 
-  @at-root {
-    .#{$skin-color-mode-prefix}--dark {
-      #{$selector} {
+  @if $is-root {
+    // 设置全局样式变量
+    @at-root {
+      :root {
+        @each $prop, $val in map.get($styles, light) {
+          #{$prop}: #{$val};
+        }
+      }
+      .#{$skin-color-mode-prefix}--dark {
         @each $prop, $val in map.get($styles, dark) {
           #{$prop}: #{$val};
         }
       }
-    }
-    // 浅色必须在 dark 之后，ignoreSkinColor 为 true 时，浅色样式会覆盖 dark 样式
-    .#{$skin-color-mode-prefix}--light {
-      #{$selector} {
+      // 浅色必须在 dark 之后，ignoreSkinColor 为 true 时，浅色样式会覆盖 dark 样式
+      .#{$skin-color-mode-prefix}--light {
         @each $prop, $val in map.get($styles, light) {
           #{$prop}: #{$val};
         }
       }
     }
+  } @else {
+    // 设置选择器样式
+
+    // 设置默认浅色
+    @each $prop, $val in map.get($styles, light) {
+      #{$prop}: #{$val};
+    }
+
+    @at-root {
+      .#{$skin-color-mode-prefix}--dark {
+        #{$selector} {
+          @each $prop, $val in map.get($styles, dark) {
+            #{$prop}: #{$val};
+          }
+        }
+      }
+      // 浅色必须在 dark 之后，ignoreSkinColor 为 true 时，浅色样式会覆盖 dark 样式
+      .#{$skin-color-mode-prefix}--light {
+        #{$selector} {
+          @each $prop, $val in map.get($styles, light) {
+            #{$prop}: #{$val};
+          }
+        }
+      }
+    } 
   }
 }
 

package/styles/variables.scss

@@ -1,11 +1,13 @@
 @use './function.scss' as *;
 
-// 主色基础色
+// 主要色/品牌色基础色
 $primary-basic: #3F76FC !default;
 // 主要色基础色（rgb）
 $primary-basic-rgb: get-css-var('primary-basic-rgb') !default;
 // 主要色
 $primary-color: get-css-var('primary-color') !default;
+// 主要色 rgb
+$primary-color-rgb: get-css-var('primary-color-rgb') !default;
 // 主要色悬停
 $primary-color-hover: get-css-var('primary-color-hover') !default;
 // 主要色激活
@@ -25,6 +27,8 @@ $success-basic: #23AA4F !default;
 $success-basic-rgb: get-css-var('success-basic-rgb') !default;
 // 成功色
 $success-color: get-css-var('success-color') !default;
+// 成功色 rgb
+$success-color-rgb: get-css-var('success-color-rgb') !default;
 // 成功色悬停
 $success-color-hover: get-css-var('success-color-hover') !default;
 // 成功色激活
@@ -44,6 +48,8 @@ $danger-basic: #FF6264 !default;
 $danger-basic-rgb: get-css-var('danger-basic-rgb') !default;
 // 危险色
 $danger-color: get-css-var('danger-color') !default;
+// 危险色 rgb
+$danger-color-rgb: get-css-var('danger-color-rgb') !default;
 // 危险色悬停
 $danger-color-hover: get-css-var('danger-color-hover') !default;
 // 危险色激活
@@ -63,6 +69,8 @@ $warning-basic: #FF9F45 !default;
 $warning-basic-rgb: get-css-var('warning-basic-rgb') !default;
 // 警告色
 $warning-color: get-css-var('warning-color') !default;
+// 警告色 rgb
+$warning-color-rgb: get-css-var('warning-color-rgb') !default;
 // 警告色悬停
 $warning-color-hover: get-css-var('warning-color-hover') !default;
 // 警告色激活
@@ -82,6 +90,8 @@ $tips-basic: #3F76FC !default;
 $tips-basic-rgb: get-css-var('tips-basic-rgb') !default;
 // 提示色
 $tips-color: get-css-var('tips-color') !default;
+// 提示色 rgb
+$tips-color-rgb: get-css-var('tips-color-rgb') !default;
 // 提示色悬停
 $tips-color-hover: get-css-var('tips-color-hover') !default;
 // 提示色激活
@@ -99,6 +109,8 @@ $link-basic: #3F76FC !default;
 $link-basic-rgb: get-css-var('link-basic-rgb') !default;
 // 链接色
 $link-color: get-css-var('link-color') !default;
+// 链接色 rgb
+$link-color-rgb: get-css-var('link-color-rgb') !default;
 // 链接色悬停
 $link-color-hover: get-css-var('link-color-hover') !default;
 // 链接色激活
@@ -186,6 +198,8 @@ $bg-color-5: get-css-var('bg-color-5') !default;
 
 // 边框色
 $border-color: get-css-var('border-color') !default;
+// 浅色边框
+$border-color-light: get-css-var('border-color-light') !default;
 // 一级边框色
 $border-color-1: get-css-var('border-color-1') !default;
 // 二级边框色