Merge pull request #926 from Tencent/develop

feat: v2.5.15

CHANGELOG.md

@@ -1,3 +1,15 @@
+### v2.5.15 (2022-12-26)
+
+#### Features
+* feat: 加入色板less变量
+* feat: 色板新增红橙色
+
+#### Bugfixes
+* fix: 弹窗标题缺少默认字体颜色
+* fix: weui-animate的keyframe名增加weui前缀
+
+
+
 ### v2.5.14 (2022-09-16)
 
 #### Bugfixes

gulpfile.js

@@ -97,6 +97,7 @@ function buildExampleStyle() {
     .pipe(nano({
       zindex: false,
       autoprefixer: false,
+      reduceIdents: false,
     }))
     .pipe(gulp.dest(dist))
     .pipe(browserSync.reload({ stream: true }));

package.json

@@ -1,6 +1,6 @@
 {
     "name": "weui",
-    "version": "2.5.14",
+    "version": "2.5.15",
     "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
     "keywords": [
         "weui",

src/style/base/a11y.less

@@ -23,6 +23,9 @@
     height: 1px;
     overflow: hidden;
 }
+.weui-a11y_ref{
+  display:none;
+}
 .weui-hidden-space:empty {
     &:before {
         content: "\00A0";
@@ -64,6 +67,7 @@
 
     // 如果是合法的点击嵌套，例如label[for]里的出现链接，需要把层级提高
     a ,
+    button,
     navigator {
         position: relative;
         z-index: 1;
@@ -72,6 +76,7 @@
 .weui-wa-hotarea_before:before,
 .weui-wa-hotarea:after {
     content: "";
+    pointer-events:auto;
     .weui-wa-hotarea-el;
 }
 

src/style/base/mixin/setLoading.less

@@ -53,8 +53,8 @@
         margin-left: -@wide/2;
         width: @wide;
         height: @wide;
-        border-top-right-radius: @wide;
-        border-bottom-right-radius: @wide;
+        border-top-right-radius: 100%;
+        border-bottom-right-radius: 100%;
         background: currentColor;
     }
 

src/style/base/theme/fn.less

@@ -1,3 +1,7 @@
+@import 'less-vars/light';
+@import 'less-vars/dark';
+@import 'less-vars/care-light';
+@import 'less-vars/care-dark';
 @import 'vars/light';
 @import 'vars/dark';
 @import 'vars/care-light';

src/style/base/theme/less-vars/care-dark.less

@@ -0,0 +1,35 @@
+@CARE_DARK_BG_0: #111111;
+@CARE_DARK_BG_1: #1e1e1e;
+@CARE_DARK_BG_2: #191919;
+@CARE_DARK_BG_3: #202020;
+@CARE_DARK_BG_4: #404040;
+@CARE_DARK_BG_5: #2c2c2c;
+@CARE_DARK_FG_0: rgba(255, 255, 255, 0.85);
+@CARE_DARK_FG_HALF: rgba(255, 255, 255, 0.65);
+@CARE_DARK_FG_1: rgba(255, 255, 255, 0.55);
+@CARE_DARK_FG_2: rgba(255, 255, 255, 0.35);
+@CARE_DARK_FG_3: rgba(255, 255, 255, 0.1);
+@CARE_DARK_FG_4: rgba(255, 255, 255, 0.15);
+@CARE_DARK_RED: #fa5151;
+@CARE_DARK_REDORANGE: #ff6146;
+@CARE_DARK_ORANGE: #c87d2f;
+@CARE_DARK_YELLOW: #cc9c00;
+@CARE_DARK_GREEN: #74a800;
+@CARE_DARK_LIGHTGREEN: #3eb575;
+@CARE_DARK_BRAND: #07c160;
+@CARE_DARK_BLUE: #10aeff;
+@CARE_DARK_INDIGO: #1196ff;
+@CARE_DARK_PURPLE: #8183ff;
+@CARE_DARK_WHITE: rgba(255, 255, 255, 0.8);
+@CARE_DARK_LINK: #7d90a9;
+@CARE_DARK_TEXTGREEN: #259c5c;
+@CARE_DARK_FG: #ffffff;
+@CARE_DARK_BG: #000000;
+@CARE_DARK_TAG_TEXT_ORANGE: rgba(250, 157, 59, 0.6);
+@CARE_DARK_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1);
+@CARE_DARK_TAG_TEXT_GREEN: rgba(6, 174, 86, 0.6);
+@CARE_DARK_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1);
+@CARE_DARK_TAG_TEXT_BLUE: rgba(16, 174, 255, 0.6);
+@CARE_DARK_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1);
+@CARE_DARK_TAG_TEXT_BLACK: rgba(255, 255, 255, 0.5);
+@CARE_DARK_TAG_BACKGROUND_BLACK: rgba(255, 255, 255, 0.05);

src/style/base/theme/less-vars/care-light.less

@@ -0,0 +1,35 @@
+@CARE_LIGHT_BG_0: #ededed;
+@CARE_LIGHT_BG_1: #f7f7f7;
+@CARE_LIGHT_BG_2: #ffffff;
+@CARE_LIGHT_BG_3: #f7f7f7;
+@CARE_LIGHT_BG_4: #4c4c4c;
+@CARE_LIGHT_BG_5: #ffffff;
+@CARE_LIGHT_FG_0: rgba(0, 0, 0, 1);
+@CARE_LIGHT_FG_HALF: rgba(0, 0, 0, 1);
+@CARE_LIGHT_FG_1: rgba(0, 0, 0, 0.6);
+@CARE_LIGHT_FG_2: rgba(0, 0, 0, 0.42);
+@CARE_LIGHT_FG_3: rgba(0, 0, 0, 0.1);
+@CARE_LIGHT_FG_4: rgba(0, 0, 0, 0.15);
+@CARE_LIGHT_RED: #DC3636;
+@CARE_LIGHT_REDORANGE: #ff6146;
+@CARE_LIGHT_ORANGE: #E17719;
+@CARE_LIGHT_YELLOW: #BB8E00;
+@CARE_LIGHT_GREEN: #4F8400;
+@CARE_LIGHT_LIGHTGREEN: #2E8800;
+@CARE_LIGHT_BRAND: #018942;
+@CARE_LIGHT_BLUE: #007DBB;
+@CARE_LIGHT_INDIGO: #0075E2;
+@CARE_LIGHT_PURPLE: #6265F1;
+@CARE_LIGHT_WHITE: #ffffff;
+@CARE_LIGHT_LINK: #576b95;
+@CARE_LIGHT_TEXTGREEN: #06ae56;
+@CARE_LIGHT_FG: #000000;
+@CARE_LIGHT_BG: #ffffff;
+@CARE_LIGHT_TAG_TEXT_ORANGE: #E17719;
+@CARE_LIGHT_TAG_BACKGROUND_ORANGE: rgba(225, 119, 25, 0.1);
+@CARE_LIGHT_TAG_TEXT_GREEN: #06ae56;
+@CARE_LIGHT_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1);
+@CARE_LIGHT_TAG_TEXT_BLUE: #007DBB;
+@CARE_LIGHT_TAG_BACKGROUND_BLUE: rgba(0, 125, 187, 0.1);
+@CARE_LIGHT_TAG_TEXT_BLACK: rgba(0, 0, 0, 0.5);
+@CARE_LIGHT_TAG_BACKGROUND_BLACK: rgba(0, 0, 0, 0.05);

src/style/base/theme/less-vars/dark.less

@@ -0,0 +1,35 @@
+@DARK_BG_0: #111111;
+@DARK_BG_1: #1e1e1e;
+@DARK_BG_2: #191919;
+@DARK_BG_3: #202020;
+@DARK_BG_4: #404040;
+@DARK_BG_5: #2c2c2c;
+@DARK_FG_0: rgba(255, 255, 255, 0.8);
+@DARK_FG_HALF: rgba(255, 255, 255, 0.6);
+@DARK_FG_1: rgba(255, 255, 255, 0.5);
+@DARK_FG_2: rgba(255, 255, 255, 0.3);
+@DARK_FG_3: rgba(255, 255, 255, 0.1);
+@DARK_FG_4: rgba(255, 255, 255, 0.15);
+@DARK_RED: #fa5151;
+@DARK_REDORANGE: #ff6146;
+@DARK_ORANGE: #c87d2f;
+@DARK_YELLOW: #cc9c00;
+@DARK_GREEN: #74a800;
+@DARK_LIGHTGREEN: #3eb575;
+@DARK_BRAND: #07c160;
+@DARK_BLUE: #10aeff;
+@DARK_INDIGO: #1196ff;
+@DARK_PURPLE: #8183ff;
+@DARK_WHITE: rgba(255, 255, 255, 0.8);
+@DARK_LINK: #7d90a9;
+@DARK_TEXTGREEN: #259c5c;
+@DARK_FG: #ffffff;
+@DARK_BG: #000000;
+@DARK_TAG_TEXT_ORANGE: rgba(250, 157, 59, 0.6);
+@DARK_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1);
+@DARK_TAG_TEXT_GREEN: rgba(6, 174, 86, 0.6);
+@DARK_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1);
+@DARK_TAG_TEXT_BLUE: rgba(16, 174, 255, 0.6);
+@DARK_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1);
+@DARK_TAG_TEXT_BLACK: rgba(255, 255, 255, 0.5);
+@DARK_TAG_BACKGROUND_BLACK: rgba(255, 255, 255, 0.05);

src/style/base/theme/less-vars/light.less

@@ -0,0 +1,35 @@
+@LIGHT_BG_0: #ededed;
+@LIGHT_BG_1: #f7f7f7;
+@LIGHT_BG_2: #ffffff;
+@LIGHT_BG_3: #f7f7f7;
+@LIGHT_BG_4: #4c4c4c;
+@LIGHT_BG_5: #ffffff;
+@LIGHT_FG_0: rgba(0, 0, 0, 0.9);
+@LIGHT_FG_HALF: rgba(0, 0, 0, 0.9);
+@LIGHT_FG_1: rgba(0, 0, 0, 0.5);
+@LIGHT_FG_2: rgba(0, 0, 0, 0.3);
+@LIGHT_FG_3: rgba(0, 0, 0, 0.1);
+@LIGHT_FG_4: rgba(0, 0, 0, 0.15);
+@LIGHT_RED: #fa5151;
+@LIGHT_REDORANGE: #ff6146;
+@LIGHT_ORANGE: #fa9d3b;
+@LIGHT_YELLOW: #ffc300;
+@LIGHT_GREEN: #91d300;
+@LIGHT_LIGHTGREEN: #95ec69;
+@LIGHT_BRAND: #07c160;
+@LIGHT_BLUE: #10aeff;
+@LIGHT_INDIGO: #1485ee;
+@LIGHT_PURPLE: #6467f0;
+@LIGHT_WHITE: #ffffff;
+@LIGHT_LINK: #576b95;
+@LIGHT_TEXTGREEN: #06ae56;
+@LIGHT_FG: #000000;
+@LIGHT_BG: #ffffff;
+@LIGHT_TAG_TEXT_ORANGE: #fa9d3b;
+@LIGHT_TAG_BACKGROUND_ORANGE: rgba(250, 157, 59, 0.1);
+@LIGHT_TAG_TEXT_GREEN: #06ae56;
+@LIGHT_TAG_BACKGROUND_GREEN: rgba(6, 174, 86, 0.1);
+@LIGHT_TAG_TEXT_BLUE: #10aeff;
+@LIGHT_TAG_BACKGROUND_BLUE: rgba(16, 174, 255, 0.1);
+@LIGHT_TAG_TEXT_BLACK: rgba(0, 0, 0, 0.5);
+@LIGHT_TAG_BACKGROUND_BLACK: rgba(0, 0, 0, 0.05);

src/style/base/theme/vars/care-dark.less

@@ -12,6 +12,7 @@
     --weui-FG-3: rgba(255, 255, 255, 0.1);
     --weui-FG-4: rgba(255, 255, 255, 0.15);
     --weui-RED: #fa5151;
+    --weui-REDORANGE: #ff6146;
     --weui-ORANGE: #c87d2f;
     --weui-YELLOW: #cc9c00;
     --weui-GREEN: #74a800;

src/style/base/theme/vars/care-light.less

@@ -12,6 +12,7 @@
     --weui-FG-3: rgba(0, 0, 0, 0.1);
     --weui-FG-4: rgba(0, 0, 0, 0.15);
     --weui-RED: #dc3636;
+    --weui-REDORANGE: #ff6146;
     --weui-ORANGE: #e17719;
     --weui-YELLOW: #bb8e00;
     --weui-GREEN: #4f8400;

src/style/base/theme/vars/dark.less

@@ -12,6 +12,7 @@
     --weui-FG-3: rgba(255, 255, 255, 0.1);
     --weui-FG-4: rgba(255, 255, 255, 0.15);
     --weui-RED: #fa5151;
+    --weui-REDORANGE: #ff6146;
     --weui-ORANGE: #c87d2f;
     --weui-YELLOW: #cc9c00;
     --weui-GREEN: #74a800;

src/style/base/theme/vars/light.less

@@ -12,6 +12,7 @@
     --weui-FG-3: rgba(0, 0, 0, 0.1);
     --weui-FG-4: rgba(0, 0, 0, 0.15);
     --weui-RED: #fa5151;
+    --weui-REDORANGE: #ff6146;
     --weui-ORANGE: #fa9d3b;
     --weui-YELLOW: #ffc300;
     --weui-GREEN: #91d300;

src/style/widget/weui-animate/weui-animate.less

@@ -16,7 +16,7 @@
 
 @import "../../base/fn";
 
-@keyframes slideUp {
+@keyframes weuiSlideUp {
     from {
         transform: translate3d(0, 100%, 0);
     }
@@ -28,10 +28,10 @@
 
 .weui-animate_slide-up ,
 .weui-animate-slide-up {
-    animation: slideUp ease 0.3s forwards;
+    animation: weuiSlideUp ease 0.3s forwards;
 }
 
-@keyframes slideDown {
+@keyframes weuiSlideDown {
     from {
         transform: translate3d(0, 0, 0);
     }
@@ -43,10 +43,10 @@
 
 .weui-animate_slide-down ,
 .weui-animate-slide-down {
-    animation: slideDown ease 0.3s forwards;
+    animation: weuiSlideDown ease 0.3s forwards;
 }
 
-@keyframes fadeIn {
+@keyframes weuiFadeIn {
     from {
         opacity: 0;
     }
@@ -57,10 +57,10 @@
 
 .weui-animate_fade-in ,
 .weui-animate-fade-in {
-    animation: fadeIn ease 0.3s forwards;
+    animation: weuiFadeIn ease 0.3s forwards;
 }
 
-@keyframes fadeOut {
+@keyframes weuiFadeOut {
     from {
         opacity: 1;
     }
@@ -71,7 +71,7 @@
 
 .weui-animate_fade-out ,
 .weui-animate-fade-out {
-    animation: fadeOut ease 0.3s forwards;
+    animation: weuiFadeOut ease 0.3s forwards;
 }
 
 

src/style/widget/weui-button/weui-button.less

@@ -99,6 +99,7 @@ input {
     border: 0;
     padding: 0;
     outline: 0;
+    font-size:inherit;
 }
 .weui-btn_icon {
     background: transparent;

src/style/widget/weui-loading/weui-primary-loading.less

@@ -18,8 +18,8 @@
 
 // 默认色
 .weui-primary-loading {
-    font-size: 16px;
-    .setCircleLoading(#606060,1em,0.125em);
+  font-size: 16px;
+  .setCircleLoading(#606060,1em,.0875em);
 }
 
 // 跟随系统切换的品牌色

src/style/widget/weui-tips/weui-dialog.less

@@ -42,6 +42,7 @@
     font-weight: 700;
     font-size: 17px;
     line-height: 1.4;
+    color:var(--weui-FG-0);
 }
 .weui-dialog__bd {
     overflow-y: auto;

src/style/widget/weui-tips/weui-toast.less

@@ -68,7 +68,7 @@
         height: 3.6em;
     }
     &.weui-primary-loading {
-        // 重置权重
+        display:flex;
         width:1em;
         height:1em;