tcon/src/var.styl

简化版 tachyons

color = {
  '000': #000000,
  '333': #262A30,
  '666': #5C626B,
  '999': #959BA3,
  fff: #ffffff,
  aaa: #aaaaaa,
  ccc: #cbcfd6,
  eee: #eeeeee,
  f2: #f2f2f2,
  f7: #f7f8f9,

  // 主色
  main: #ff4400,

  link: #488ff9,
  success: #2dc888,
  warning: #ffa400,
  error: #f53939
}

placeholder = color.aaa

font-size = 10 12 13 14 15 16 17 18 20 24 28 32 40
width-size = 30 40 50 60 70 80 90 100 200
height-size = 30 35 40 45 50 55 60 65 70 80 90 100
margin-size = 5 10 15 20 30 40 45 50 55 60
padding-size = 5 10 15 20 25 30 35 40 45 50
position-size = 0 10 20 30 40 50

// 宽度百分比
width-percent = 20 25 33 50 100

// 高度百分比
height-percent = 50 100

// 方向
direction = {
  t: top,
  r: right,
  b: bottom,
  l: left,
  tb: top bottom,
  tr: top right,
  lt: left top,
  lr: left right,
  lb: left bottom
}

// 层级，不支持 vw
index-size = 1 2 3 4 5 6 7 8 9 1000 1001 1002 1003 9999 10000

// 圆角，不支持 vw
radius-size = 1 2 3 4 5 6 7 8 10 15 20

// padding 来控制按钮的大小
btn-size = {
  large: {
    padding: 7 30,
    border-radius: 4,
    font-size: 16
  },
  '': {
    padding: 5 17,
    border-radius: 3,
    font-size: 14
  },
  mini: {
    padding: 3 12,
    border-radius: 2,
    font-size: 12
  }
}

btn-skin = {
  main: {
    color: color['fff'],
    background-color: color['main'],
    border-color: color['main'],
    hover: {
      color: #fff,
      background-color: lightness(color['main'], 60%),
      border-color: lightness(color['main'], 60%)
    }
  },
  default: {
    color: color['666'],
    background-color: color['fff'],
    border-color: color['999'],
    hover: {
      color: color['main'],
      border-color: color['main'],
      background-color: #f2f2f2
    }
  }
}