hy-app 0.2.0 → 0.2.1

package/components/hy-text/hy-text.vue

@@ -51,13 +51,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-text',
+  name: "hy-text",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
@@ -243,6 +243,7 @@ const toLink = () => {
 <style scoped lang="scss">
 @import "./index.scss";
 @import "../../libs/css/mixin.scss";
+/*超出出现省略号*/
 .hy-text__value--lines {
   @include multiEllipsis(v-bind(lines));
 }

package/components/hy-text/index.scss

@@ -1,23 +1,16 @@
 @use "../../libs/css/mixin.scss" as *;
 @use "../../theme.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(text) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(text) {
   @include flex(row);
   align-items: center;
   flex-wrap: nowrap;
+  color: $hy-text-color;
 
   &__price {
     font-size: 14px;
-    color: $hy-text-color-grey;
+    color: $hy-text-color--grey;
   }
 
   &__value {
@@ -34,18 +27,13 @@
       color: $hy-primary;
     }
 
-    /*超出出现省略号*/
-    &--lines {
-      @include multiEllipsis(v-bind(lines));
-    }
-
     @include themeColor(primary, "", "", $hy-primary);
     @include themeColor(warning, "", "", $hy-warning);
     @include themeColor(success, "", "", $hy-success);
     @include themeColor(info, "", "", $hy-info);
     @include themeColor(error, "", "", $hy-error);
     @include themeColor(main, "", "", $hy-light-color);
-    @include themeColor(content, "", "", $hy-text-color-grey);
+    @include themeColor(content, "", "", $hy-text-color--grey);
     @include themeColor(tips, "", "",$hy-tips-color);
     @include themeColor(light, "", "", $hy-border-color-light);
 

package/components/hy-textarea/index.scss

@@ -1,18 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(textarea) {
-      color: $hy-dark-color;
-      &--count {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
-
 @include b(textarea) {
   border-radius: $hy-border-radius-sm;
   position: relative;
@@ -29,7 +17,8 @@
   }
 
   &--disabled {
-    background-color: $hy-light-background-disabled;
+    background-color: $hy-background--disabled;
+    color: $hy-text-color--disabled;
   }
 
   &__field {
@@ -43,8 +32,8 @@
     right: 5px;
     bottom: 2px;
     font-size: 12px;
-    color: $hy-tips-color;
-    background-color: #ffffff;
+    color: $hy-text-color--2;
+    background-color: $hy-background--3;
     padding: 1px 4px;
     border-radius: $hy-border-radius-sm;
   }

package/components/hy-toast/index.scss

@@ -46,29 +46,12 @@
     }
   }
 
-  @include m(success)  {
-    color: $hy-success;
-    background-color: $hy-success-light;
-    border: 1px solid #bef5c8;
-  }
-
-  @include m(primary)  {
-    color: $hy-primary;
-    background-color: $hy-primary-light;
-    border: 1px solid rgb(215, 234, 254);
-  }
+  @include themeColor(success, $hy-success-light, #bef5c8, $hy-success);
+  @include themeColor(primary, $hy-primary-light, rgb(215, 234, 254), $hy-primary);
+  @include themeColor(error, $hy-error-light, #fde2e2, $hy-error);
+  @include themeColor(warning, $hy-warning-light, #faecd8, $hy-warning);
+  @include themeColor(info, $hy-info-light, $hy-info, $hy-info);
 
-  @include m(error)  {
-    color: $hy-error;
-    background-color: $hy-error-light;
-    border: 1px solid #fde2e2;
-  }
-
-  @include m(warning)  {
-    color: $hy-warning;
-    background-color: $hy-warning-light;
-    border: 1px solid #faecd8;
-  }
 
   @include m(default)  {
     color: #ffffff;

package/components/hy-tooltip/index.scss

@@ -31,14 +31,16 @@
         overflow: hidden;
 
         &__btn {
-          padding: $hy-border-margin-padding-base;
+          padding: $hy-border-margin-padding-sm $hy-border-margin-padding-base;
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
           &--hover {
-            background-color: $hy-text-color-hover;
+            background-color: $hy-background--hover;
           }
 
           &__text {
-            line-height: 12px;
             font-size: 13px;
             color: #ffffff;
           }

package/components/hy-upload/index.scss

@@ -4,16 +4,6 @@
 $hy-upload-image-width: 80px !default;
 $hy-upload-text-font-size: 11px !default;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(upload) {
-      &__button {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
 
 @include b(upload) {
   @include flex(column);
@@ -110,7 +100,7 @@ $hy-upload-text-font-size: 11px !default;
     justify-content: center;
     width: $hy-upload-image-width;
     height: $hy-upload-image-width;
-    background-color: rgb(244, 245, 247);
+    background-color: $hy-background--empty;
     border-radius: 2px;
     margin: 0 8px 8px 0;
     /* #ifndef APP-NVUE */
@@ -119,12 +109,12 @@ $hy-upload-text-font-size: 11px !default;
 
     &__text {
       font-size: $hy-upload-text-font-size;
-      color: $hy-tips-color;
+      color: $hy-text-color--grey;
       margin-top: 2px;
     }
 
     &--hover {
-      background-color: rgb(230, 231, 233);
+      background-color: $hy-background--hover;
     }
 
     &--disabled {
@@ -153,6 +143,6 @@ $hy-upload-text-font-size: 11px !default;
 
   .tips-text {
     font-size: 12px;
-    color: #b99c65;
+    color: $hy-primary;
   }
 }

package/index.scss

@@ -1,2 +1,3 @@
 @use "./libs/css/common.scss";
+@use "./libs/css/vars.css";
 //@use "./libs/css/mixin.scss" as HyMixin;

package/libs/css/mixin.scss

@@ -33,6 +33,12 @@ $modifier-separator: '--';
     background-color: $bg-color;
     border: 1px solid $border-color;
     color: $color;
+
+    :deep() {
+      @include b(icon) {
+        color: $color;
+      }
+    }
   }
 }
 

package/libs/css/vars.css

@@ -0,0 +1,47 @@
+.hy-theme--light {
+  --hy-warning--light: #fdf6ec;
+
+  --hy-text-color: #000000;
+  --hy-text-color--2: #67676c;
+  --hy-text-color--3: #929295;
+  --hy-text-color--4: rgba(0, 0, 0, 0.1);
+  --hy-icon-color: #606266;
+  --hy-text-color--placeholder: rgba(0, 0, 0, 0.25);
+  --hy-text-color--disabled: rgba(0, 0, 0, 0.25);
+
+  --hy-background: #f8f8f8;
+  --hy-background--2: #FFFFFF;
+  --hy-background--3: rgb(238, 238, 239);
+  --hy-background--container: #FFFFFF;
+  --hy-background--disabled: rgba(0, 0, 0, 0.04);
+  --hy-background--empty: #F3F3F3;
+  --hy-background--hover: rgba(0,0,0,0.2);
+
+  --hy-border-line: 1rpx solid #c2c2c4;
+}
+
+.hy-theme--dark {
+  --hy-warning--light: rgba(255, 153, 0, 0.3);
+  --hy-theme--light: rgba(41, 121, 255, 0.3);
+  --hy-success--light: rgba(25, 190, 107, 0.3);
+  --hy-error--light: rgba(250, 53, 52, 0.3);
+  --hy-info--light: rgba(144, 147, 153, 0.3);
+
+  --hy-text-color: #ffffff;
+  --hy-text-color-2: #98989f;
+  --hy-text-color-3: #6a6a71;
+  --hy-text-color--4: rgba(255, 255, 255, 0.1);
+  --hy-icon-color: #FFFFFF;
+  --hy-text-color--placeholder: rgba(255, 255, 255, 0.25);
+  --hy-text-color--disabled: rgba(255, 255, 255, 0.25);
+
+  --hy-background: #1b1b1f;
+  --hy-background--2: #161616;
+  --hy-background--3: #646566;
+  --hy-background--container: #242424;
+  --hy-background--disabled: rgba(255, 255, 255, 0.08);
+  --hy-background--empty: #3A3A44;
+  --hy-background--hover: rgba(255,255,255,0.2);
+
+  --hy-border-line: 1rpx solid #3c3f44;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hy-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "全局主题色配置",
   "main": "./index.ts",
   "private": false,

package/theme.scss

@@ -1,38 +1,29 @@
 /* 主题是相关颜色 */
 $hy-primary: var(--hy-theme-color, #2979ff) !default;
-$hy-primary-dark: var(--hy-theme-dark, #2b85e4) !default;
-$hy-primary-disabled: var(--hy-theme-disabled, #a0cfff) !default;
-$hy-primary-light: var(--hy-theme-color--light, #ecf5ff) !default;
+$hy-primary-dark: var(--hy-theme--dark, #2b85e4) !default;
+$hy-primary-disabled: var(--hy-theme--disabled, #a0cfff) !default;
+$hy-primary-light: var(--hy-theme--light, #ecf5ff) !default;
 
 $hy-warning: var(--hy-warning, #ff9900) !default;
-$hy-warning-dark: var(--hy-warning-dark, #f29100) !default;
-$hy-warning-disabled: var(--hy-warning-disabled, #fcbd71) !default;
-$hy-warning-light: var(--hy-warning-light, #fdf6ec) !default;
+$hy-warning-dark: var(--hy-warning--dark, #f29100) !default;
+$hy-warning-disabled: var(--hy-warning--disabled, #fcbd71) !default;
+$hy-warning-light: var(--hy-warning--light, #fdf6ec) !default;
 
 $hy-success: var(--hy-success, #19be6b) !default;
-$hy-success-dark: var(--hy-success-dark, #18b566) !default;
-$hy-success-disabled: var(--hy-success-disabled, #71d5a1) !default;
-$hy-success-light: var(--hy-success-light, #dbf1e1) !default;
+$hy-success-dark: var(--hy-success--dark, #18b566) !default;
+$hy-success-disabled: var(--hy-success--disabled, #71d5a1) !default;
+$hy-success-light: var(--hy-success--light, #dbf1e1) !default;
 
 $hy-error: var(--hy-error, #fa3534) !default;
-$hy-error-dark: var(--hy-error-dark, #dd6161) !default;
-$hy-error-disabled: var(--hy-error-disabled, #fab6b6) !default;
-$hy-error-light: var(--hy-error-light, #fef0f0) !default;
+$hy-error-dark: var(--hy-error--dark, #dd6161) !default;
+$hy-error-disabled: var(--hy-error--disabled, #fab6b6) !default;
+$hy-error-light: var(--hy-error--light, #fef0f0) !default;
 
 $hy-info: var(--hy-info, #909399) !default;
-$hy-info-dark: var(--hy-info-dark, #82848a) !default;
-$hy-info-disabled: var(--hy-info-disabled, #c8c9cc) !default;
-$hy-info-light: var(--hy-info-light, #f4f4f5) !default;
-
-/* 暗黑模式 */
-$hy-dark-background: var(--hy-dark-background, #131313) !default; // 背景色
-$hy-dark-background--2: var(--hy-dark-background--2, #161616) !default; // 弹窗背景色
-$hy-dark-background--container: var(--hy-dark-background--container, #242424) !default;
-$hy-dark-background--track: var(--hy-dark-background--track, #646566) !default;
-$hy-dark-background--empty: var(--hy-dark-background--empty, #3A3A44) !default; // 搜索背景色
-$hy-dark-background--hover: var(--hy-dark-background--hover, #707070) !default; // 点击状态
-$hy-dark-background3: #141414 !default;
-$hy-dark-background6: #380e08 !default;
+$hy-info-dark: var(--hy-info--dark, #82848a) !default;
+$hy-info-disabled: var(--hy-info--disabled, #c8c9cc) !default;
+$hy-info-light: var(--hy-info--light, #f4f4f5) !default;
+
 
 $hy-dark-bg-disabled: rgba(48, 48, 56, 0.51) !default;
 $hy-dark-color: #ffffff !default;
@@ -53,9 +44,6 @@ $hy-light-background-image: var(--hy-light-background-image, #F3F3F3) !default;
 
 /* 文字基本颜色 */
 $hy-light-color: var(--hy-light-color, #333) !default; //基本色
-$hy-text-color-grey: var(--hy-text-color-grey, #999) !default; //辅助灰色，如加载更多的提示信息
-$hy-text-color-placeholder: var(--hy-text-color-placeholder, #808080) !default; // 输入框提示颜色
-$hy-text-color-disable: var(--hy-text-color-disable, #c0c0c0) !default; // 禁用文字颜色
 $hy-text-color-hover: var(--hy-text-color-hover, #58595b)!default;
 
 $hy-tips-color: #909193FF;
@@ -89,7 +77,7 @@ $hy-img-size-lg: var(--hy-img-size-lg, 120rpx) !default;
 
 /* 头像大小 */
 $hy-avatar-size-sm: var(--hy-avatar-size-sm, 80rpx) !default;
-$hy-avatar-size-base: 100rpx var(--hy-avatar-size-base, 100rpx) !default;
+$hy-avatar-size-base: var(--hy-avatar-size-base, 100rpx) !default;
 $hy-avatar-size-lg: var(--hy-avatar-size-lg, 120rpx) !default;
 
 /* 透明度 */
@@ -109,4 +97,27 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid #dadbde) !default;
+$hy-border-line: var(--hy-border-line, 1rpx solid #dadbde) !default;
+
+
+/* 字体 */
+$hy-text-color: var(--hy-text-color, #3c3c43) !default; // 一般用于文字
+$hy-text-color--2: var(--hy-text-color--2, #67676c) !default; // 一般用于icon
+$hy-text-color--3: var(--hy-text-color--3, #929295) !default; // 一般用于icon
+$hy-text-color--4: var(--hy-text-color--4, #929295) !default; // 一般用于icon
+$hy-icon-color: var(--hy-icon-color, #606266) !default; // 一般用于icon
+$hy-text-color--grey: var(--hy-text-color-3, #999) !default; // 辅助灰色，如加载更多的提示信息
+$hy-text-color--placeholder: var(--hy-text-color--placeholder, #808080) !default; // 输入框提示颜色
+$hy-text-color--disabled: var(--hy-text-color--disabled, #c0c0c0) !default; // 禁用文字颜色
+$hy-border-color: var(--hy-border-color, #c0c0c0) !default;
+
+
+/* 背景色 */
+$hy-background: var(--hy-background, #f8f8f8) !default; // 背景色
+$hy-background--2: var(--hy-background--2, #ffffff) !default; // 弹窗背景色
+$hy-background--3: var(--hy-background--3, #646566) !default; // 弹窗背景色
+$hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
+$hy-background--disabled: var(--hy-background--disabled, #F5F5F5); // 禁用背景色
+$hy-background--track: var(--hy-background--track, #c6c7cb) !default;
+$hy-background--empty: var(--hy-background--empty, #f6f6f7) !default; // 搜索背景色
+$hy-background--hover: var(--hy-background--hover, #707070) !default; // 点击状态