feat(style): update theme variables to 2.0

build/rollup/build-component.rollup.js

@@ -33,7 +33,8 @@ function compileVueStylus (content, cb, compiler, filePath) {
     .set('filename', filePath)
     .define('url', stylus.url())
     .import(path.join(__dirname, '../../components/_style/mixin/util.styl'))
-    .import(path.join(__dirname, '../../components/_style/mixin/theme.styl'))
+    .import(path.join(__dirname, '../../components/_style/mixin/theme.components.styl'))
+    .import(path.join(__dirname, '../../components/_style/mixin/theme.basic.styl'))
     .import(path.join(__dirname, '../../node_modules/nib/lib/nib/vendor'))
     .import(path.join(__dirname, '../../node_modules/nib/lib/nib/gradients'))
     .render((err, css) => {

build/stylus-mixin.js

@@ -10,7 +10,8 @@ module.exports = function useMixin(style) {
       .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
   } else {
     return style
-      .import(path.join(__dirname, '../components/_style/mixin/theme.styl'))
+      .import(path.join(__dirname, '../components/_style/mixin/theme.components.styl'))
+      .import(path.join(__dirname, '../components/_style/mixin/theme.basic.styl'))
       .import(path.join(__dirname, '../components/_style/mixin/util.styl'))
       .import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
       .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))

build/webpack/utils.js

@@ -56,7 +56,8 @@ exports.cssLoaders = function (options) {
   if (isProd) {
     stylusMixins.push(resolve('../../components/_style/mixin/theme.variable.styl'))
   } else {
-    stylusMixins.push(resolve('../../components/_style/mixin/theme.styl'))
+    stylusMixins.push(resolve('../../components/_style/mixin/theme.components.styl'))
+    stylusMixins.push(resolve('../../components/_style/mixin/theme.basic.styl'))
     stylusMixins.push(resolve('../../examples/theme.custom.styl'))
   }
 

components/_style/global.styl

@@ -5,3 +5,9 @@ body
   -moz-osx-font-smoothing grayscale
 ol, li
   list-style none
+@font-face
+  font-family DINPro-Medium
+  /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
+  src url("//manhattan.didistatic.com/static/manhattan/mand-mobile/DINPro-Medium.ttf") format("truetype")
+  font-style normal
+  font-weight normal

components/_style/mixin/theme.basic.styl

@@ -0,0 +1,74 @@
+/*
+ * GLOBAL COLOR
+ */
+
+// brand color
+color-primary           = #2F86F6 // 品牌色
+
+// text color
+color-text-base         = #111A34 // 重要信息，如一级标题
+color-text-base-inverse = #FFF
+color-text-body         = #41485D // 普通信息，如正文主要内容
+color-text-minor        = #666f83 // 次要信息，如利益点、摘要
+color-text-caption      = #858B9C // 辅助信息，如列表内容描述
+color-text-disabled     = #C5CAD5 // 禁用状态
+color-text-placeholder  = #C5CAD5 // 默认提示输入
+color-text-highlight    = color-primary // 高亮状态
+color-text-warn         = #FF7D41 // 利益点，警告提示
+color-text-error        = #FF5257 // 强提示报错
+color-text-link         = #5878B4 // 文字链接
+
+// border & bg
+color-border-base       = #E2E4EA // 条目边框
+color-border-element    = #C5CAD5 // 元素边框，如按钮
+color-bg                = #F9FAFB // 元素，容器背景
+color-mask              = rgba(37, 38, 45, .6) // 弹窗蒙层
+
+/*
+ * GLOBAL SIZE
+ */
+
+// text size
+font-heading-large  = 60px
+font-heading-medium = 52px
+font-heading-normal = 44px
+font-caption-large  = 36px
+font-caption-normal = 32px
+font-body-large     = 28px
+font-body-normal    = 26px
+font-minor-large    = 24px
+font-minor-normal   = 20px
+
+font-weight-light    = 300
+font-weight-normal   = 400
+font-weight-medium   = 600
+font-weight-semibold = 700
+
+// radius size
+radius-normal = 4px
+radius-circle = 50%
+
+// border size
+border-width-base = 2px
+
+// gap size
+h-gap-sm = 12px
+h-gap-md = 20px
+h-gap-lg = 32px
+v-gap-sm = 12px
+v-gap-md = 20px
+v-gap-lg = 32px
+
+/*
+ * GLOBAL OTHER
+ */
+
+// animate
+ease-in-out-quint = cubic-bezier(.86, 0, .07, 1)
+
+// opacity
+opacity-disabled = .3 // opacity of disabled button, switch, agree
+
+// font family
+font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif
+font-family-number = DINPro-Medium

components/_style/mixin/theme.styl → components/_style/mixin/theme.components.styl

@@ -320,81 +320,3 @@ cashier-choose-channel-icon-color = color-primary
 cashier-choose-more-font-size = font-minor-large // 更多支付方式
 cashier-choose-more-color = color-text-minor
 
-/*
- * global color
- */
-
-// brand color
-color-primary = #fc9153 // 1st main color for buttons & highlight text which is not clickable
-color-primary-tap = #3ca0e6 // 2nd main color for links and selected element
-color-primary-background = #f3f4f5 // 3rd main color for background
-
-// text color
-color-text-base = #333 // default text color
-color-text-base-inverse = #fff // default inverse text color
-color-text-minor = #666 // auxiliary text color
-color-text-caption = #999 // subtitle and describe text  color
-color-text-disabled = #ccc // input placeholder
-color-text-placeholder = #ccc // input placeholder
-color-text-highlight = color-primary // hight text color
-color-text-link = color-primary-tap // link text color
-
-// border color
-color-border-base = #d9d9d9 // defalut gap color of items
-color-border-minor = #ebebeb // gap color of items
-color-border-element = #999 // border color of element such as button
-
-// background color
-color-bg-base = #fff // default background color
-color-bg-disabled = #ccc // background color for disabeld element
-color-bg-mask = rgba(0, 0, 0, .4) // background color for mask layer
-color-bg-tap = rgba(0, 0, 0, .08) // background color for element click state
-color-bg-tap-highlight = rgba(252, 145, 83, .08) // background color for highlight element click state
-
-// opacity
-opacity-disabled = .4 // opacity of disabled button, switch, agree
-
-/*
- * global size
- */
-
-// text size
-font-heading-large  = 42px
-font-heading-medium = 36px
-font-heading-normal = 32px
-font-body-large     = 30px
-font-body-normal    = 28px
-font-minor-large    = 24px
-font-minor-normal   = 20px
-
-font-weight-normal = 400
-font-weight-medium = 500
-font-weight-bold   = 600
-
-// radius size
-radius-normal = 4px
-radius-circle = 50%
-
-// border size
-border-width-base = 2px
-
-// gap size
-h-gap-sm = 12px
-h-gap-md = 20px
-h-gap-lg = 32px
-v-gap-sm = 12px
-v-gap-md = 20px
-v-gap-lg = 32px
-
-/*
- * global other
- */
-
-// box shadow
-shadow-bottom    = 0 2px 4px rgba(0, 0, 0, .12)
-shadow-top = 0 -2px 4px rgba(0, 0, 0, .12)
-
-// animate
-ease-in-out-quint = cubic-bezier(.86, 0, .07, 1)
-
-font-family-normal = "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif

components/_style/mixin/util.styl

@@ -11,10 +11,6 @@ clearfix()
     content ""
     display table
     clear both
-// normalize()
-//   margin 0
-//   padding 0
-//   list-style none
 
 word-break()
   word-break break-all
@@ -47,7 +43,7 @@ hairline-common(direction, color)
     @media (min-resolution: 3dppx)
       transform scaleX(0.33) translateX(100%)
 
-hairline(direction = all, color = color-line-1, radius = 0)
+hairline(direction = all, color = color-border-base, radius = 0)
   position relative
   if direction == top
     &::after

site/build/utils.js

@@ -39,7 +39,8 @@ exports.cssLoaders = function(options) {
 
   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
   const stylusMixins = [
-    resolve('../components/_style/mixin/theme.styl'),
+    resolve('../components/_style/mixin/theme.components.styl'),
+    resolve('../components/_style/mixin/theme.basic.styl'),
     resolve('../components/_style/mixin/util.styl'),
     resolve('theme/default/assets/css/mixin.styl')
   ]