hy-app 0.6.7 → 0.6.9

package/libs/css/_mixin.scss

@@ -151,13 +151,13 @@
 @mixin borderRadio($shape) {
   @include m($shape) {
     @if $shape == circle {
-      border-radius:  theme.$hy-border-radius-semicircle;
+      border-radius:  theme.$hy-radius-semicircle;
     }
     @else if($shape == square) {
-      border-radius: theme.$hy-border-radius-sm;
+      border-radius: theme.$hy-radius-sm;
     }
     @else {
-      border-radius: 28rpx theme.$hy-border-radius-sm;
+      border-radius: 28rpx theme.$hy-radius-sm;
     }
   }
 }

package/libs/css/common.scss

@@ -38,7 +38,7 @@
     width: 4px;
     height: 18px;
     background: $hy-primary;
-    border-radius: $hy-border-radius-semicircle;
+    border-radius: $hy-radius-semicircle;
   }
 }
 

package/libs/css/theme.scss

@@ -34,9 +34,27 @@ $hy-icon-color: var(--hy-icon-color, #606266) !default; // 一般用于icon
 $hy-text-color--grey: var(--hy-text-color--grey, #999) !default; // 辅助灰色，如加载更多的提示信息
 $hy-text-color--placeholder: var(--hy-text-color--placeholder, #909399) !default; // 输入框提示颜色
 $hy-text-color--disabled: var(--hy-text-color--disabled, #FFFFFF3F) !default; // 禁用文字颜色
-$hy-border-color: var(--hy-border-color, #c0c0c0) !default; // 边框颜色
 $hy-text-color--hover: var(--hy-text-color--hover, #58595b)!default; // 点击状态文字颜色
 
+/* 文字大小 */
+$hy-font-size-xs: var(--hy-font-size-xs, 20rpx)!default; // 超小字体
+$hy-font-size-sm: var(--hy-font-size-sm, 24rpx)!default; // 小号字体
+$hy-font-size-base: var(--hy-font-size-base, 28rpx)!default; // 基础字体
+$hy-font-size-md: var(--hy-font-size-md, 32rpx)!default; // 中等字体
+$hy-font-size-lg: var(--hy-font-size-lg, 36rpx)!default; // 大号字体
+$hy-font-size-xl: var(--hy-font-size-xl, 40rpx)!default; // 超大字体
+$hy-font-size-xxl: var(--hy-font-size-xxl, 48rpx)!default; // 特大字体
+
+/* 字体样式 */
+$hy-font-weight-normal: var(--hy-font-weight-normal, 400)!default; // 正常字重
+$hy-font-weight-medium: var(--hy-font-weight-medium, 500)!default; // 中等字重
+$hy-font-weight-bold: var(--hy-font-weight-bold, 600)!default; // 粗体
+
+/* 字体行高 */
+$hy-line-height-sm: var(--hy-line-height-sm, 1.4)!default; // 小行高
+$hy-line-height-base: var(--hy-line-height-base, 1.5)!default; // 基础行高
+$hy-line-height-lg: var(--hy-line-height-lg, 1.8)!default; // 大行高
+
 
 /* 背景色 */
 $hy-background: var(--hy-background, #f8f8f8) !default; // 页面背景色
@@ -45,7 +63,7 @@ $hy-background--3: var(--hy-background--3, rgb(238, 238, 239)) !default; // 弹
 $hy-background--container: var(--hy-background--container, #ffffff) !default; // 容器背景色
 $hy-background--disabled: var(--hy-background--disabled, rgba(0, 0, 0, 0.04)); // 禁用背景色
 $hy-background--track: var(--hy-background--track, #F6F6F6) !default; // 轨道背景色
-$hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
+$hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 空状态、搜索背景色
 $hy-background--skeleton: var(--hy-background--skeleton, #eee) !default; // 骨架屏背景色
 $hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
 $hy-background-mask: var(--hy-background-mask, rgba(0, 0, 0, 0.5)) !default; //遮罩颜色
@@ -57,17 +75,6 @@ $hy-background--table-header: var(--hy-background--table-header, #FAFAFA) !defau
 $hy-background-image--mask--two-flanks: var(--hy-background-image--mask--two-flanks, linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)),
         linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6))) !default; // 向两边形成雾霾形状
 
-/* 文字尺寸 */
-$hy-font-size-sm: 24rpx; // 提示文字大小
-$hy-font-size-base: 32rpx; // 基本文字大小
-$hy-font-size-lg: 40rpx; // 标题文字大小
-
-
-/* 边框颜色 */
-$hy-border-color-light: var(--hy-border-color-light, #c8c7cc) !default;
-$hy-border-color: var(--hy-border-color, #c2c2c4) !default;
-$hy-border-color--2: var(--hy-border-color--2, #c9cacc) !default;
-
 /* 图片尺寸 */
 $hy-img-size-sm: var(--hy-img-size-sm, 45rpx) !default;
 $hy-img-size-base: var(--hy-img-size-base, 80rpx) !default;
@@ -78,18 +85,13 @@ $hy-avatar-size-sm: var(--hy-avatar-size-sm, 80rpx) !default;
 $hy-avatar-size-base: var(--hy-avatar-size-base, 100rpx) !default;
 $hy-avatar-size-lg: var(--hy-avatar-size-lg, 120rpx) !default;
 
-/* 透明度 */
-$hy-opacity-disabled: var(--hy-opacity-disabled, 0.3) !default; // 组件禁用态的透明度
-
 /* 盒子的圆角 */
-$hy-border-radius-no: var(--hy-border-radius-no, 0) !default;
-$hy-border-radius-sm: var(--hy-border-radius-sm, 8rpx) !default;
-$hy-border-radius-base: var(--hy-border-radius-base, 20rpx) !default;
-$hy-border-radius-lg: var(--hy-border-radius-lg, 32rpx) !default;
-$hy-border-radius-circle: var(--hy-border-radius-circle, 50%) !default;
-$hy-border-radius-semicircle: var(--hy-border-radius-semicircle, 100px) !default;
-/* 盒子阴影 */
-$hy-box-shadow: var(--hy-box-shadow, 0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)) !default;
+$hy-radius-no: var(--hy-radius-no, 0) !default;
+$hy-radius-sm: var(--hy-radius-sm, 8rpx) !default;
+$hy-radius-base: var(--hy-radius-base, 20rpx) !default;
+$hy-radius-lg: var(--hy-radius-lg, 32rpx) !default;
+$hy-radius-circle: var(--hy-radius-circle, 50%) !default;
+$hy-radius-semicircle: var(--hy-radius-semicircle, 100px) !default;
 /* 盒内盒外间距 */
 $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;
@@ -97,3 +99,30 @@ $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default
 /* 底部线条 */
 /* TODO: 边框不能写1rpx否则在某些机型无法显示 */
 $hy-border-line: var(--hy-border-line, 1px solid #e8e8e8) !default;
+/* 边框颜色 */
+$hy-border-color: var(--hy-border-color, #c2c2c4) !default;
+$hy-border-color-light: var(--hy-border-color-light, #c8c7cc) !default;
+$hy-border-color--2: var(--hy-border-color--2, #c9cacc) !default;
+/* 边框宽度 */
+$hy-border-width-xs: var(--hy-border-width-xs, 1rpx) !default;
+$hy-border-width-sm: var(--hy-border-width-sm, 2rpx) !default;
+$hy-border-width-base: var(--hy-border-width-base, 4rpx) !default;
+$hy-border-width-lg: var(--hy-border-width-lg, 8rpx) !default;
+
+/* 盒子阴影 */
+$hy-border-shadow-base: var(--hy-border-box-shadow, 0 0 10rpx 4rpx rgba(0, 0, 0, 0.16)) !default;
+$hy-shadow-sm: var(--hy-shadow-sm, 0 2rpx 8rpx rgba(0, 0, 0, 0.06)) !default; // 轻微阴影
+$hy-shadow-base: var(--hy-shadow-base, 0 4rpx 16rpx rgba(0, 0, 0, 0.08)) !default; // 基础阴影
+$hy-shadow-lg: var(--hy-shadow-lg, 0 8rpx 24rpx rgba(0, 0, 0, 0.12)) !default; // 强烈阴影
+$hy-shadow-xl: var(--hy-shadow-xl, 0 12rpx 40rpx rgba(0, 0, 0, 0.16)) !default; // 极强烈阴影
+
+/* 透明度 */
+$hy-opacity-xs: var(--hy-opacity-xs, 0.1) !default; // 极低透明度
+$hy-opacity-sm: var(--hy-opacity-sm, 0.3) !default; // 低透明度
+$hy-opacity-base: var(--hy-opacity-base, 0.5) !default; // 中等透明度
+$hy-opacity-lg: var(--hy-opacity-lg, 0.7) !default; // 高透明度
+$hy-opacity-disabled: var(--hy-opacity-disabled, 0.4) !default; // 禁用态透明度
+
+/* 过渡曲线 */
+$hy-transition-ease: var(--hy-transition-ease, cubic-bezier(0.4, 0, 0.2, 1)) !default; // 标准曲线
+$hy-transition-bounce: var(--hy-transition-bounce, cubic-bezier(0.34, 1.56, 0.64, 1)) !default; // 弹跳曲线

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hy-app",
-    "version": "0.6.7",
+    "version": "0.6.9",
     "description": "📱一个基于vue3+ts构建的uni-app组件库,拥有八十多个精美组件，适配多端，支持自定义主题",
     "main": "./index.ts",
     "private": false,