[improvement] update color variables (#842)

2025-04-23 18:00:33 +08:00 · 2018-11-01 17:41:43 +08:00 · 2018-11-01 17:41:43 +08:00 · f7f82ff571
commit f7f82ff571
parent 40306007a5
27 changed files with 48 additions and 39 deletions
--- a/example/pages/field/index.wxss
+++ b/example/pages/field/index.wxss
@ -3,5 +3,5 @@
 }

 .icon {
-  color: #38f;
+  color: #1989fa;
 }
--- a/example/pages/nav-bar/index.wxss
+++ b/example/pages/nav-bar/index.wxss
@ -1,3 +1,3 @@
 .icon {
-  color: #38f;
+  color: #1989fa;
 }
--- a/example/pages/notify/index.js
+++ b/example/pages/notify/index.js
@ -11,7 +11,7 @@ Page({
      duration: 1000,
      text: '通知内容',
      selector: '#custom-selector',
-      backgroundColor: '#38f'
+      backgroundColor: '#1989fa'
    });
  }
 });
--- a/example/pages/submit-bar/index.wxml
+++ b/example/pages/submit-bar/index.wxml
@ -39,7 +39,7 @@
    <van-tag type="primary" custom-class="van-tag">标签</van-tag>
    <view slot="tip">
      您的收货地址不支持同城送
-      <text class="van-edit-address" bindtap="onClickLink">修改地址</text>
+      <text class="edit-address" bindtap="onClickLink">修改地址</text>
    </view>
  </van-submit-bar>
 </demo-block>
--- a/example/pages/submit-bar/index.wxss
+++ b/example/pages/submit-bar/index.wxss
@ -2,8 +2,8 @@
  position: relative !important;
 }

-.van-edit-address {
-  color: #38f;
+.edit-address {
+  color: #1989fa;
 }

 .van-tag {
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@ -1,8 +1,8 @@
 <demo-block title="基础用法" padding>
  <van-tag class="demo-margin-right">标签</van-tag>
  <van-tag class="demo-margin-right" type="danger">标签</van-tag>
-  <van-tag class="demo-margin-right" type="success">标签</van-tag>
-  <van-tag type="primary">标签</van-tag>
+  <van-tag class="demo-margin-right" type="primary">标签</van-tag>
+  <van-tag type="success">标签</van-tag>
 </demo-block>

 <demo-block title="空心样式" padding>
--- a/example/pages/transition/index.wxss
+++ b/example/pages/transition/index.wxss
@ -5,5 +5,5 @@
  height: 100px;
  position: fixed;
  margin: -50px 0 0 -50px;
-  background-color: #38f;
+  background-color: #1989fa;
 }
--- a/packages/area/index.wxml
+++ b/packages/area/index.wxml
@ -6,7 +6,7 @@
  </view>

  <view wx:if="{{ loading }}" class="van-picker__loading">
-    <van-loading color="#38f"/>
+    <van-loading color="#1989fa"/>
  </view>

  <picker-view
--- a/packages/card/index.less
+++ b/packages/card/index.less
@ -4,10 +4,10 @@
  box-sizing: border-box;
  position: relative;
  height: 100px;
-  padding: 5px 15px 5px 115px;
-  background: #fafafa;
-  color: @text-color;
  font-size: 12px;
+  color: @text-color;
+  padding: 5px 15px 5px 115px;
+  background: @background-color-light;

  &--center {
    align-items: center;
--- a/packages/checkbox/index.less
+++ b/packages/checkbox/index.less
@ -18,7 +18,7 @@
    display: block;
    width: @van-checkbox-size;
    height: @van-checkbox-size;
-    border: 1px solid #aaa;
+    border: 1px solid @gray-light;
    color: transparent;
    font-size: 12px;
    text-align: center;
@ -28,9 +28,9 @@
    }

    &--checked {
+      color: @white;
      border-color: @green;
      background-color: @green;
-      color: #fff;
    }

    &--disabled {
--- a/packages/common/color.ts
+++ b/packages/common/color.ts
@ -0,0 +1,3 @@
+export const RED = '#f44';
+export const BLUE = '#1989fa';
+export const GREEN = '#4b0';
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@ -2,9 +2,11 @@
@black: #000;
@white: #fff;
@red: #f44;
-@blue: #38f;
+@blue: #1989fa;
@orange: #ff976a;
-@green: #06bf04;
+@orange-dark: #ed6a0c;
+@orange-light: #fffbe8;
+@green: #4b0;
@gray: #c9c9c9;
@gray-light: #e5e5e5;
@gray-darker: #666;
@ -15,14 +17,15 @@
@border-color: #eee;
@active-color: #e8e8e8;
@background-color: #f8f8f8;
+@background-color-light: #fafafa;

 /* button */
@button-default-color: @text-color;
@button-default-background-color: @white;
@button-default-border-color: @border-color;
@button-primary-color: @white;
-@button-primary-background-color: #4b0;
-@button-primary-border-color: #4b0;
+@button-primary-background-color: @green;
+@button-primary-border-color: @green;
@button-danger-color: @white;
@button-danger-background-color: @red;
@button-danger-border-color: @red;
--- a/packages/icon/index.less
+++ b/packages/icon/index.less
@ -15,7 +15,7 @@
  text-rendering: auto;

  &__info {
-    color: #fff;
+    color: @white;
    left: 100%;
    top: -.5em;
    font-size: .6em;
--- a/packages/notify/README.md
+++ b/packages/notify/README.md
@ -31,7 +31,7 @@ Notify({
  text: '通知内容',
  duration: 1000,
  selector: '#custom-selector',
-  backgroundColor: '#38f'
+  backgroundColor: '#1989fa'
 });
 ```

@ -47,7 +47,7 @@ Notify({
 | duration | 持续时间 | `Number` | `3000` |
 | selector | 自定义选择器 | `String` | `van-notify` |
 | color | 字体颜色 | `String` | `#fff` | |
-| backgroundColor | 背景色 | `String` | `#e64340` |
+| backgroundColor | 背景色 | `String` | `#f44` |

 ### 更新日志

--- a/packages/notify/index.less
+++ b/packages/notify/index.less
@ -10,5 +10,4 @@
  line-height: 2.3;
  font-size: 14px;
  text-align: center;
-  background-color: #E64340;
 }
--- a/packages/notify/index.ts
+++ b/packages/notify/index.ts
@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { RED } from '../common/color';

 VantComponent({
  props: {
@ -9,7 +10,7 @@ VantComponent({
    },
    backgroundColor: {
      type: String,
-      value: '#e64340'
+      value: RED
    },
    duration: {
      type: Number,
--- a/packages/progress/README.md
+++ b/packages/progress/README.md
@ -57,7 +57,7 @@
 | inactive | 是否置灰 | `Boolean` | `false` |
 | percentage | 进度百分比 | `Number` | `false` |
 | show-pivot | 是否显示进度文字 | `Boolean` | `true` |
-| color | 进度条颜色 | `String` | `#38f` |
+| color | 进度条颜色 | `String` | `#1989fa` |
 | text-color | 进度条文字颜色 | `String` | `#fff` |
 | pivot-text | 文字显示 | `String` | 百分比文字 |
 | pivot-color | 文字背景色 | `String` | 与进度条颜色一致 |
--- a/packages/progress/index.ts
+++ b/packages/progress/index.ts
@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { BLUE } from '../common/color';

 VantComponent({
  props: {
@ -12,7 +13,7 @@ VantComponent({
    },
    color: {
      type: String,
-      value: '#38f'
+      value: BLUE
    },
    textColor: {
      type: String,
--- a/packages/stepper/index.less
+++ b/packages/stepper/index.less
@ -39,7 +39,7 @@
      left: 0;
      right: 0;
      bottom: 0;
-      background-color: #6c6c6c;
+      background-color: @gray-darker;
    }

    &:active {
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@ -63,7 +63,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | active | 当前步骤 | `Number` | 0 |
 | direction | 显示方向，可选值为 `horizontal` `vertical` | `String` | `horizontal` |
-| active-color | 激活状态颜色 | `String` | `#06bf04` |
+| active-color | 激活状态颜色 | `String` | `#4b0` |

 ### 外部样式类

--- a/packages/steps/index.less
+++ b/packages/steps/index.less
@ -36,8 +36,8 @@
  &__circle {
    width: 5px;
    height: 5px;
-    background-color: #999;
    border-radius: 50%;
+    background-color: @gray-dark;
  }

  &--horizontal {
--- a/packages/steps/index.ts
+++ b/packages/steps/index.ts
@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { GREEN } from '../common/color';

 VantComponent({
  props: {
@ -11,7 +12,7 @@ VantComponent({
    },
    activeColor: {
      type: String,
-      value: '#06bf04'
+      value: GREEN
    }
  },

--- a/packages/switch/index.less
+++ b/packages/switch/index.less
@ -32,7 +32,7 @@
  }

  &--on {
-    background-color: #44db5e;
+    background-color: @blue;

    .van-switch__node {
      transform: translateX(.6em);
--- a/packages/tabbar-item/index.less
+++ b/packages/tabbar-item/index.less
@ -5,7 +5,7 @@
 }

 .van-tabbar-item {
-  color: #666;
+  color: @gray-darker;
  height: 100%;
  display: flex;
  line-height: 1;
@ -23,7 +23,7 @@
      display: block;

      &__info {
-        color: #fff;
+        color: @white;
        left: 100%;
        top: -.5em;
        font-size: .6em;
--- a/packages/tag/README.md
+++ b/packages/tag/README.md
@ -17,8 +17,8 @@
 ```html
 <van-tag>标签</van-tag>
 <van-tag type="danger">标签</van-tag>
-<van-tag type="success">标签</van-tag>
 <van-tag type="primary">标签</van-tag>
+<van-tag type="success">标签</van-tag>
 ```

 #### 空心样式
--- a/packages/tag/index.ts
+++ b/packages/tag/index.ts
@ -1,10 +1,11 @@
 import { VantComponent } from '../common/component';
+import { RED, BLUE, GREEN } from '../common/color';

 const DEFAULT_COLOR = '#999';
 const COLOR_MAP = {
-  danger: '#f44',
-  primary: '#38f',
-  success: '#06bf04'
+  danger: RED,
+  primary: BLUE,
+  success: GREEN
 };

 VantComponent({
--- a/packages/tree-select/index.less
+++ b/packages/tree-select/index.less
@ -12,14 +12,14 @@
    top: 0;
    bottom: 0;
    overflow: scroll;
-    background-color: #fff;
+    background-color: @white;
    -webkit-overflow-scrolling: touch;
  }

  &__nitem {
    line-height: 44px;
    padding: 0 15px;
-    background-color: #fff;
+    background-color: @white;

    &:active,
    &--active {