fix: 优化主题变量

AntmJS · Aug 19, 2021 · 83be1bf · 83be1bf
1 parent d9dd104
commit 83be1bf
Show file tree

Hide file tree

Showing 16 changed files with 248 additions and 304 deletions.
diff --git a/packages/weui-demo/src/app.less b/packages/weui-demo/src/app.less
@@ -1,4 +1,6 @@
 /* stylelint-disable */
+@import '@antmjs/antmui/dist/style/index.less';
+
 page {
   background-color: #f7f7f7;
 }
diff --git a/packages/weui-demo/src/pages/ui/index.tsx b/packages/weui-demo/src/pages/ui/index.tsx
@@ -40,7 +40,6 @@ import {
   IMessageRef,
   ImagePicker,
 } from '@antmjs/antmui'
-import '@antmjs/antmui/dist/style/index.less'
 
 export default function Index() {
   const [value, setValue] = useState(1)
@@ -179,15 +178,17 @@ export default function Index() {
         />
       </List>
       <Rate value={rateValue} onChange={setRateValue} />
-      <InputNumber
-        type="number"
-        min={0}
-        max={10}
-        step={1}
-        width={200}
-        value={value}
-        onChange={setValue}
-      />
+      <View>
+        <InputNumber
+          type="number"
+          min={0}
+          max={10}
+          step={1}
+          width={200}
+          value={value}
+          onChange={setValue}
+        />
+      </View>
       <SearchBar
         cref={searchRef}
         onInput={() => {

diff --git a/packages/weui/src/components/tabBar/index.tsx b/packages/weui/src/components/tabBar/index.tsx
@@ -72,17 +72,14 @@ export default class TabBar extends Component<TabBarProps> {
           {
             'antmui-tab-bar': true,
             'antmui-tab-bar--fixed': fixed,
+            'antmui-tab-bar_border_top': border && fixed,
+            'antmui-tab-bar_border_bottom': border && !fixed,
             // 'antmui-tab-bar--ipx': isIPhoneX
           },
           className,
         )}
         style={mergeStyle(rootStyle, style || '')}
       >
-        {border && (
-          <View
-            className={'antmui-tab-bar_border' + (fixed ? '_top' : '_bottom')}
-          />
-        )}
         {tabList.map((item: TabItem, i: number) => (
           <View
             className={classNames('antmui-tab-bar__item', {

diff --git a/packages/weui/src/style/components/actionSheet.less b/packages/weui/src/style/components/actionSheet.less
@@ -1,8 +1,6 @@
 /* stylelint-disable declaration-block-no-duplicate-properties */
 @import '../variables.less';
 
-@antmuiActionSheetAndroidBorderRadius: (2px * @hd);
-
 .antmui-actionsheet {
   z-index: @antmuiZIndexActionSheet;
   background-color: @antmuiActionSheetBgColor;

diff --git a/packages/weui/src/style/components/button.less b/packages/weui/src/style/components/button.less
@@ -96,6 +96,7 @@
   height: auto;
   outline: 0;
   border-width: 0;
+  border-radius: 0;
   appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   position: relative;
@@ -170,6 +171,8 @@
 }
 
 .antmui-btn_disabled {
+  .setDisabled();
+
   color: @antmuiBtnDisabledColor;
   background-color: @antmuiBtnDisabledBgColor;
   .setDefaultButton(@antmuiBtnDisabledColor, @antmuiBtnDisabledBgColor);

diff --git a/packages/weui/src/style/components/calendar.less b/packages/weui/src/style/components/calendar.less
@@ -2,6 +2,8 @@
 
 .antmui-calendar {
   overflow: hidden;
+  background-color: @antmuiCalendarFgColor;
+  padding: (8px * @hd) 0;
 
   /* elements */
   &__header {
@@ -10,7 +12,7 @@
       align-items: center;
       justify-content: center;
       height: 36px * @hd;
-      color: #b8bfc6;
+      color: @antmuiCalendarWeekColor;
       text-align: center;
 
       &-item {
@@ -24,7 +26,7 @@
     &.flex {
       display: flex;
       flex-wrap: wrap;
-      color: #7c86a2;
+      color: @antmuiCalendarEffectiveDayColor;
 
       .flex__item {
         flex: 0 0 calc(100% / 7);
@@ -102,7 +104,7 @@
 
           /* stylelint-disable-next-line */
           .extra-marks .mark {
-            background-color: #ffffff;
+            background-color: @antmuiCalendarMarkPointColor;
           }
 
           &-head.flex__item--selected-tail {
@@ -135,7 +137,7 @@
       display: inline-block;
       background-size: (8px * @hd) (12px * @hd);
       background-position: center;
-      background-color: #f7f8fc;
+      background-color: @antmuiCalendarArrowBgColor;
       background-repeat: no-repeat;
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAAXNSR0IArs4c6QAAAnFJREFUOBGVVF1rE0EUnXt3tzFtWmqjKYKfqIhVa1L8FQVRWtwnXwRhidXGDwQf81oCUQMioZRCHwNSgiD4lD9QSYVKsA8KbaW1jbamX8adnWsmMnESbYz7cs6ee8/ZnZm7y9h/Xk/Gs70TE9lOZQNFWsGx1IvDJoozxNDttNpmHOfyTssBj59PHxceP6keREDlYPvBGUMJzTD5LHuKhHtC70EEQe72atMAIoLu0MWzRPxInZnEdxZib2I37L2XEI/HsSvYd44AQrqZIW5b3J8fHR0sS/2ve5DJZIzFFexnSD262QAs+c1js45zyVU6KqIwnU5bS58x0mhGhusbaz153Sw9dW+QSr3yCdwJe4wCKlCigbAWiw7PAYDQdclrAclkxk8+iDBifr3JMq3lO86VQsVMuq549RQSU687mOcNANE+VfiFxuLd6NX3e5llD8qjskqb54E8n24mk5Yf3B6ab2auBsgGC8Q7QOJ1AS6ExrSZ12s6r57CyIi99cNgswywtkkIzDB2eSSdftmuGxp57RgfOfY38HlvRWVNqgmYsDb57sDkZK5hb1RHZQ9+U8bu37S/MtOc0zUg8G2U1yOV4WrTdcXrAqT4MDq0yokXVINEwb32pS9WOJfLmboueW0OGgtP05mj3IXTum6iuXHogDtr27an9D/eQBVijr2AiB/VvUQuePenNXZBfmhKrxEl6Hjv1vAHA2lJ1wRBcH9vf5+cH6k3DZANsei1eWCwIrm6uOf1Jsenq8v7Z4ActFJxrsBMo6gC0GAebPHq/Z6bqJoVyn/EQpGFK08MmF2B/Oj1wZKqtYzxeM5MJKY6dMNPQnnePR8FubkAAAAASUVORK5CYII=');
 
@@ -153,6 +155,7 @@
       font-size: 15px * @hd;
       margin-left: 20px * @hd;
       margin-right: 20px * @hd;
+      color: @antmuiCalendarYearMonthColor;
     }
   }
 }

diff --git a/packages/weui/src/style/components/checkbox.less b/packages/weui/src/style/components/checkbox.less
@@ -87,7 +87,7 @@
     &--disabled {
       .antmui-checkbox__option-cnt,
       .antmui-checkbox__desc {
-        opacity: 0.3;
+        .setDisabled();
       }
 
       &:active {

diff --git a/packages/weui/src/style/components/inputNumber.less b/packages/weui/src/style/components/inputNumber.less
@@ -9,7 +9,7 @@
   border: 2px solid @antmuiInputNumberBorderColor;
   font-size: @antmuiFontSizeBase;
   border-radius: 4px * @hd;
-  background-color: #ffffff;
+  background-color: @antmuiInputNumberFgColor;
   overflow: hidden;
 
   /* elements */
@@ -19,11 +19,13 @@
     align-items: center;
     justify-content: center;
     padding: @antmui-input-number-btn-padding;
-    color: @antmuiInputNumberBtnColor;
     font-size: 0;
     text-align: center;
     line-height: 1;
     overflow: hidden;
+    .antmui-icon {
+      color: @antmuiInputNumberBtnColor;
+    }
 
     &-subtract,
     &-add {
@@ -48,8 +50,7 @@
 
   /* modifiers */
   &--disabled {
-    color: @antmuiInputNumberDisableColor;
-
+    .setDisabled();
     &:active {
       background-color: inherit;
     }

diff --git a/packages/weui/src/style/components/listItem.less b/packages/weui/src/style/components/listItem.less
@@ -18,6 +18,7 @@
     }
   }
   .antmui-icon {
+    line-height: 1;
     color: @antmuiListItemIconColor;
   }
 }

diff --git a/packages/weui/src/style/components/message.less b/packages/weui/src/style/components/message.less
@@ -15,6 +15,7 @@
   z-index: @antmuiZIndexToast;
   .text_wrap();
   .antmui-round-close {
+    font-size: @antmuiFontSizeXxl;
     position: absolute;
     right: (8px * @hd);
     top: 50%;

diff --git a/packages/weui/src/style/components/radio.less b/packages/weui/src/style/components/radio.less
@@ -83,7 +83,7 @@
     &--disabled {
       .antmui-radio__option-container,
       .antmui-radio__desc {
-        opacity: 0.3;
+        .setDisabled();
       }
 
       &:active {

diff --git a/packages/weui/src/style/components/searchBar.less b/packages/weui/src/style/components/searchBar.less
@@ -1,7 +1,7 @@
 /* stylelint-disable no-descending-specificity, selector-max-type */
 @import './icon.less';
 
-@antmuiSearchInputHeight: (32px * @hd);
+@antmuiSearchInputHeight: (24px * @hd);
 
 .antmui-search-bar {
   position: relative;

diff --git a/packages/weui/src/style/components/tabBar.less b/packages/weui/src/style/components/tabBar.less
@@ -18,23 +18,15 @@
   background-color: @antmuiTabbarBgColor;
 
   &_border_bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: (2px * @hd);
-    transform: scaleY(0.4);
-    background-color: @antmuiTabBarBorderLine;
+    &::after {
+      .setBottomLine(@antmuiTabBarBorderLine);
+    }
   }
 
   &_border_top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: (2px * @hd);
-    transform: scaleY(0.4);
-    background-color: @antmuiTabBarBorderLine;
+    &::before {
+      .setTopLine(@antmuiTabBarBorderLine);
+    }
   }
 
   /* elements */
@@ -44,6 +36,11 @@
     color: @antmuiTabBarColor;
     font-size: 0;
     transition: all 0.2s;
+    .antmui-tab-bar__icon {
+      .antmui-icon {
+        color: @antmuiTabBarColor;
+      }
+    }
 
     &--active {
       color: @antmuiTabBarActiveColor;