hy-app 0.2.0 → 0.2.1

package/components/hy-popup/index.scss

@@ -1,21 +1,12 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme) {
-  @include m(dark) {
-    @include b(popup__content) {
-      background-color: $hy-dark-background--2;
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(popup) {
   flex: 1;
 
   &__content {
-    background-color: #fff;
+    background-color: $hy-background--2;
     position: relative;
 
     &--round-top {

package/components/hy-price/index.scss

@@ -5,10 +5,4 @@
   font-size: 32rpx;
   font-weight: 500;
   margin-top: 5px;
-  //&__prefix {
-  //  font-size: 24rpx;
-  //}
-  //&__decimal {
-  //  font-size: 24rpx;
-  //}
 }

package/components/hy-qrcode/index.scss

@@ -6,7 +6,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #f7f7f7;
+    background-color: $hy-background;
     position: absolute;
     top: 0;
     bottom: 0;

package/components/hy-radio/hy-radio.vue

@@ -35,7 +35,10 @@
         >
           <slot name="label" :record="item">
             <text
-              class="hy-radio__text"
+              :class="[
+                'hy-radio__text',
+                disabled && 'hy-radio__label-wrap--disabled',
+              ]"
               :style="{
                 color: labelColor,
                 fontSize: addUnit(sizeType[size] ?? labelSize),
@@ -51,13 +54,13 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-radio',
+  name: "hy-radio",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">

package/components/hy-radio/index.scss

@@ -1,14 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(radio__label-wrap) {
-      color: $hy-dark-color;
-    }
-  }
-}
 
 @include b(radio) {
   @include flex(row);
@@ -64,28 +56,34 @@
 
     /* #endif */
 
-    &--circle {
+    @include m(circle) {
       border-radius: 50%;
     }
 
-    &--square {
+    @include m(square) {
       border-radius: 3px;
     }
 
-    &--checked {
+    @include m(checked) {
       color: #FFFFFF;
       background-color: $hy-primary;
       border-color: $hy-primary;
     }
 
-    &--disabled {
-      background-color: $hy-light-background-disabled;
+    @include m(disabled) {
+      background-color: $hy-text-color--disabled;
+      :deep(.hy-icon) {
+        display: none;
+      }
     }
 
-    &--disabled--checked {
+    @include m(disabled--checked) {
       background-color: $hy-primary;
       border-color: $hy-primary;
       opacity: 0.5;
+      :deep(.hy-icon) {
+        display: block;
+      }
     }
   }
 
@@ -93,13 +91,13 @@
     /* #ifndef APP-NVUE */
     word-wrap: break-word;
     /* #endif */
-    color:
-$hy-light-color;
+
+    color: $hy-text-color;
     font-size: $hy-font-size-base;
     margin-right: $hy-border-margin-padding-sm;
 
-    &--disabled {
-      color: $hy-text-color-disable;
+    @include m(disabled) {
+      color: $hy-text-color--disabled;
     }
   }
 }

package/components/hy-rate/index.scss

@@ -25,9 +25,4 @@
       }
     }
   }
-}
-//.hy-icon {
-//  /* #ifndef APP-NVUE */
-//  box-sizing: border-box;
-//  /* #endif */
-//}
+}

package/components/hy-read-more/index.scss

@@ -1,21 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(read-more) {
-      color: $hy-dark-color;
-      &__toggle--mask {
-        background-image:
-                linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, $hy-dark-background 80%);
-        padding-top: 100px;
-        margin-top: -100px;
-      }
-    }
-  }
-}
-
 @include b(read-more) {
   &__content {
     overflow: hidden;
@@ -31,7 +16,7 @@
 
     &--mask {
       background-image:
-              linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, #fff 80%);
+              linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, $hy-background--2 80%);
       padding-top: 100px;
       margin-top: -100px;
     }
@@ -42,10 +27,8 @@
       justify-content: center;
       margin-top: 5px;
       color: $hy-primary;
-      :deep() {
-        @include b(icon) {
-          color: $hy-primary;
-        }
+      :deep(.hy-icon) {
+        color: $hy-primary;
       }
     }
   }

package/components/hy-search/index.scss

@@ -10,24 +10,6 @@ $hy-search-close-size: 20px !default;
 }
 /* #endif */
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(search) {
-      color: $hy-dark-color;
-      &__content {
-        background-color: $hy-dark-background--empty;
-        &__input {
-          color: $hy-dark-color;
-        }
-      }
-      &__action {
-        color: $hy-dark-color;
-      }
-    }
-  }
-}
-
 @include b(search) {
   @include flex(row);
   align-items: center;
@@ -43,6 +25,7 @@ $hy-search-close-size: 20px !default;
     border-color: transparent;
     border-style: solid;
     overflow: hidden;
+    background-color: $hy-background--empty;
 
     &__icon {
       @include flex;
@@ -61,7 +44,7 @@ $hy-light-color;
       width: $hy-search-close-size;
       height: $hy-search-close-size;
       border-radius: $hy-border-radius-circle;
-      background-color: #c6c7cb;
+      background-color: $hy-background--track;
       @include flex(row);
       align-items: center;
       justify-content: center;
@@ -74,19 +57,17 @@ $hy-light-color;
       font-size: $hy-font-size-base;
       line-height: 1;
       margin: 0 $hy-border-margin-padding-sm;
-      color:
-$hy-light-color;
+      color: $hy-text-color;
 
       &--placeholder {
-        color: $hy-text-color-grey;
+        color: $hy-text-color--placeholder;
       }
     }
   }
 
   &__action {
     font-size: $hy-font-size-base;
-    color:
-$hy-light-color;
+    color: $hy-text-color;
     width: 0;
     overflow: hidden;
     transition-property: width;

package/components/hy-slider/index.scss

@@ -60,7 +60,7 @@
     height: 24px;
     border-radius: 50%;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    background-color: #fff;
+    background-color: $hy-background--3;
     transform: scale(0.9);
     /* #ifdef H5 */
     cursor: pointer;

package/components/hy-slider/props.ts

@@ -8,8 +8,8 @@ const defaultProps: IProps = {
   max: 100,
   step: 1,
   activeColor: "",
-  inactiveColor: "#c0c4cc",
-  blockColor: "#ffffff",
+  inactiveColor: "",
+  blockColor: "",
   showValue: false,
   disabled: false,
   useNative: false,

package/components/hy-steps/hy-steps.vue

@@ -8,7 +8,11 @@
         <!--	线条	-->
         <view
           v-if="i > 0"
-          :class="[`hy-steps-item__line--${direction}`, 'hy-steps-item__line', statusClass(i, item.error)]"
+          :class="[
+            `hy-steps-item__line--${direction}`,
+            'hy-steps-item__line',
+            statusClass(i, item.error),
+          ]"
           :style="lineStyle(item, i)"
         ></view>
         <!--	线条	-->
@@ -18,13 +22,16 @@
           :class="[
             `hy-steps-item__wrapper--${direction}`,
             dot ? `hy-steps-item__wrapper--dot` : statusClass(i, item.error),
-            'hy-steps-item__wrapper'
+            'hy-steps-item__wrapper',
           ]"
           :style="itemStyleInner"
         >
           <slot name="icon" :error="item?.error" :index="i">
             <view
-              :class="['hy-steps-item__wrapper--dot__item', `hy-steps-item__wrapper--dot__${statusClass(i, item.error)}`]"
+              :class="[
+                'hy-steps-item__wrapper--dot__item',
+                `hy-steps-item__wrapper--dot__${statusClass(i, item.error)}`,
+              ]"
               v-if="dot"
               :style="{
                 backgroundColor: statusColor(i, item?.error),
@@ -90,10 +97,12 @@
           <slot name="content" :record="item" :index="i">
             <slot name="title" :title="item.title" :index="i">
               <text
+                :class="[
+                  current == i && 'hy-steps-item__content__title--active',
+                ]"
                 :style="{
                   lineHeight: '20px',
                   fontSize: current == i ? '14px' : '13px',
-                  color: i == current ? '#2c405a' : '#555555',
                 }"
                 >{{ item.title }}</text
               >
@@ -113,28 +122,37 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-steps',
+  name: "hy-steps",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
-}
+    styleIsolation: "shared",
+  },
+};
 </script>
 
 <script setup lang="ts">
-import {computed, type CSSProperties, toRefs, ref, onMounted, getCurrentInstance, watch} from "vue";
+import {
+  computed,
+  type CSSProperties,
+  toRefs,
+  ref,
+  onMounted,
+  getCurrentInstance,
+  watch,
+} from "vue";
 import defaultProps from "./props";
 import type IProps from "./typing";
 import type { StepListVo } from "./typing";
-import {addUnit, getRect} from "../../utils";
+import { addUnit, getRect } from "../../utils";
 import { ColorConfig, IconConfig } from "../../config";
 
 // 组件
 import HyIcon from "../hy-icon/hy-icon.vue";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { current, list, direction, dot, inactiveColor, activeColor } = toRefs(props);
+const { current, list, direction, dot, inactiveColor, activeColor } =
+  toRefs(props);
 const emit = defineEmits(["click", "update:current"]);
 
 const size = ref<UniApp.NodeInfo>({
@@ -144,14 +162,14 @@ const size = ref<UniApp.NodeInfo>({
 const instance = getCurrentInstance();
 
 watch(
-    () => current.value,
-    (newVal: number) => {
-      if(list.value[newVal - 1]?.error) {
-        const index = list.value.findIndex(item => item.error);
-        emit("update:current", index);
-      }
+  () => current.value,
+  (newVal: number) => {
+    if (list.value[newVal - 1]?.error) {
+      const index = list.value.findIndex((item) => item.error);
+      emit("update:current", index);
     }
-)
+  },
+);
 
 /**
  * @description 线条样式
@@ -164,10 +182,10 @@ const lineStyle = computed(() => {
       style.left = addUnit(-size.value.width! / 2 + 12);
     } else {
       style.height = addUnit(size.value.height! - 30);
-      style.top = addUnit(25)
+      style.top = addUnit(25);
     }
     style.backgroundColor = temp.error
-      ? ''
+      ? ""
       : index < current.value
         ? activeColor.value
         : inactiveColor.value;

package/components/hy-steps/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(steps) {
-      //color: $hy-dark-color;
-      &__wrapper__nav__item--active {
-        .hy-tabs__wrapper__nav__item--text {
-          color: $hy-dark-color;
-        }
-      }
-    }
-  }
-}
-
 @include b(steps) {
   @include flex;
 
@@ -104,14 +90,14 @@
         flex-shrink: 0;
         /* #endif */
         border-radius: $hy-border-radius-semicircle;
-        border: 1px solid $hy-tips-color;
+        border: $hy-border-line;
         @include flex(row);
         align-items: center;
         justify-content: center;
         transition: background-color 0.3s;
 
         &__text {
-          color: $hy-tips-color;
+          color: $hy-text-color--grey;
           font-size: 11px;
           @include flex(row);
           align-items: center;
@@ -125,6 +111,9 @@
     &__content {
       @include flex;
       flex: 1;
+      &__title--active {
+        color: $hy-primary;
+      }
 
       &--row {
         flex-direction: column;
@@ -142,7 +131,7 @@
     /* 线条样式 */
     &__line {
       position: absolute;
-      background: $hy-tips-color;
+      background: $hy-border-color;
 
       &.finish {
         background-color: $hy-primary;

package/components/hy-submit-bar/index.scss

@@ -1,18 +1,10 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(submit-bar) {
-      background-color: $hy-dark-background;
-    }
-  }
-}
 
 @include b(submit-bar) {
   display: flex;
-  background-color: $hy-light-background-color;
+  background-color: $hy-background--container;
   padding: $hy-border-margin-padding-base;
   width: 100%;
   box-sizing: border-box;

package/components/hy-subsection/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(subsection) {
-      color: $hy-dark-color;
-      @include m(button) {
-        background-color: $hy-dark-background--track;
-        &__bar {
-          background-color: $hy-dark-background--container;
-        }
-      }
-    }
-  }
-}
 
 @include b(subsection) {
   @include flex;
@@ -27,13 +13,13 @@
 
   @include m(button) {
     height: 35px;
-    background-color: rgb(238, 238, 239);
+    background-color: $hy-background--3;
     padding: 3px;
     border-radius: $hy-border-radius-sm;
     align-items: stretch;
 
     &__bar {
-      background-color: #ffffff;
+      background-color: $hy-background--container !important;
       border-radius: $hy-border-radius-sm;
     }
   }

package/components/hy-swipe-action/index.scss

@@ -1,9 +0,0 @@
-
-.hy-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-}

package/components/hy-swiper/index.scss

@@ -1,16 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme) {
-  @include m(dark) {
-    @include b(swiper__wrapper) {
-      :deep(.uni-swiper-wrapper) {
-        background-color: $hy-dark-background--container;
-      }
-    }
-  }
-}
 
 @include b(swiper) {
   @include flex;

package/components/hy-switch/index.scss

@@ -2,28 +2,29 @@
 @use "../../libs/css/mixin.scss" as *;
 
 /* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(switch) {
-      color: $hy-dark-color;
-      @include m(container) {
-        background-color: $hy-dark-background--track;
-      }
-      @include m(node) {
-        background-color: $hy-dark-background--container;
-      }
-      @include m(bg) {
-        background-color: $hy-dark-background--track;
-      }
-    }
-  }
-}
+//@include b(theme){
+//  @include m(dark) {
+//    @include b(switch) {
+//      color: $hy-dark-color;
+//      @include m(container) {
+//        background-color: $hy-dark-background--track;
+//      }
+//      @include m(node) {
+//        background-color: $hy-dark-background--container;
+//      }
+//      @include m(bg) {
+//        background-color: $hy-dark-background--track;
+//      }
+//    }
+//  }
+//}
 
 @include b(switch) {
   @include flex(row);
   /* #ifndef APP-NVUE */
   box-sizing: border-box;
   /* #endif */
+  background-color: $hy-background--3;
   position: relative;
   border-radius: $hy-border-radius-semicircle;
   transition: background-color 0.4s;
@@ -41,7 +42,7 @@
     @include flex(row);
     align-items: center;
     justify-content: center;
-    background-color: #fff;
+    background-color: $hy-background--container;
     border-radius: $hy-border-radius-semicircle;
     box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
     transition-property: transform;
@@ -52,7 +53,7 @@
   @include m(bg) {
     position: absolute;
     border-radius: $hy-border-radius-semicircle;
-    background-color: #ffffff;
+    background-color: $hy-background--3;
     transition-property: transform;
     transition-duration: 0.4s;
     transition-timing-function: ease;

package/components/hy-switch/props.ts

@@ -1,5 +1,4 @@
 import type IProps from "./typing";
-import { ColorConfig } from "../../config";
 
 const defaultProps: IProps = {
   modelValue: false,

package/components/hy-tabs/index.scss

@@ -1,20 +1,6 @@
 @use "../../theme.scss" as *;
 @use "../../libs/css/mixin.scss" as *;
 
-/* 暗色主题 */
-@include b(theme){
-  @include m(dark) {
-    @include b(tabs) {
-      color: $hy-dark-color;
-      &__wrapper__nav__item--active {
-        .hy-tabs__wrapper__nav__item--text {
-          color: $hy-dark-color;
-        }
-      }
-    }
-  }
-}
-
 @include b(tabs) {
   &__wrapper {
     @include flex;
@@ -54,13 +40,13 @@
 
         &--active {
           .hy-tabs__wrapper__nav__item--text {
-            color: #303133;
+            color: $hy-text-color;
           }
         }
 
         &--text {
           font-size: 15px;
-          color: #606266;
+          color: $hy-text-color;
           white-space: nowrap !important;
 
           &--disabled {

package/components/hy-tag/index.scss

@@ -13,8 +13,8 @@
   }
 
   /*禁用*/
-  @include themeColor(disabled, $hy-light-background-disabled, $hy-color-disable-icon,
-$hy-light-background-disabled);
+  @include themeColor(disabled, $hy-background--disabled, $hy-color-disable-icon,
+$hy-background--disabled);
 
   /*圆角*/
   @include borderRadio(circle);
@@ -75,7 +75,7 @@ $hy-light-background-disabled);
   @include themeColor(info--plain, transparent, $hy-info, $hy-info);
 
   /* 主题色镂空带背景色 */
-  @include themeColor(primary--plain__fill, var(--hy-tag-plain--fill__bg, $hy-primary-light), $hy-primary, $hy-primary);
+  @include themeColor(primary--plain__fill, $hy-primary-light, $hy-primary, $hy-primary);
   @include themeColor(error--plain__fill, $hy-error-light, $hy-error, $hy-error);
   @include themeColor(warning--plain__fill, $hy-warning-light, $hy-warning, $hy-warning);
   @include themeColor(success--plain__fill, $hy-success-light, $hy-success, $hy-success);