UPDATE

packages/styles/utils/bem.styl

@@ -0,0 +1,67 @@
+// -----------------------------------------------------------------------------
+// bem-sugar.styl --- Bem mixins for stylus language
+//
+// Copyright (c) 2017 Ilya Obuhov
+//
+// Author: Ilya Obuhov <iobuhov.mail@gmail.com>
+// URL: https://github.com/iobuhov/stylus-bem-sugar
+
+
+e-prefix    ?= '__'
+m-prefix    ?= '--'
+m-delimiter ?= '_'
+group-store = ()
+
+str()
+  join('', arguments)
+
+b(name)
+  .{name}
+    {block}
+
+group()
+  caller = called-from[0]
+  level = length(called-from) + 1
+  elements = group-store[level]
+  selector = ()
+  parent = null
+  {join(',', elements)}
+    {block}
+  group-store[level] = null
+
+m(mod, val=null)
+  val    = val && m-delimiter + val
+  mod    = m-prefix + mod
+  mod    = val ? mod + val : mod
+  caller = called-from[0]
+  if caller in ('group')
+    level = length(called-from)
+    mod = str('&', mod)
+    if group-store[level] == null
+      group-store[level] = mod
+    else
+      push(group-store[level], mod)
+  &{mod}
+    {block}
+
+e(element)
+  element = e-prefix + element
+  caller  = called-from[0]
+  gcaller = called-from[1]
+  if caller in ('group')
+    level = length(called-from)
+    if gcaller in ('e' 'm')
+      element = str('& ^[0]', element)
+    else
+      element = str('^[0]', element)
+    if group-store[level] == null
+      group-store[level] = element
+    else
+      push(group-store[level], element)
+  else
+    if caller in ('e' 'm')
+      & ^[0]{element}
+        {block}
+    else
+      &{element}
+        {block}

packages/styles/utils/functional.styl

@@ -0,0 +1,47 @@
+flex-column()
+  display flex
+  flex-direction column
+  
+scrollbar-theme($color=#1f252d, $background=#6d6d6d)
+  &::-webkit-scrollbar
+    width 5px
+    height 5px
+  
+  &::-webkit-scrollbar-track-piece
+    background-color $background
+  
+  &::-webkit-scrollbar-thumb:vertical
+    height 5px
+    background-color $color
+  
+  &::-webkit-scrollbar-thumb:horizontal 
+    width 5px
+    background-color $background
+
+scrollbar-dark() 
+  scrollbar-theme()
+
+scrollbar-light() 
+  scrollbar-theme(#aaa, transparent)
+
+
+vertical-center()
+  &::after
+    display inline-block
+    content ''
+    height 100%
+    vertical-align middle
+
+position-center($type fixed) 
+  position $type
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+ellipsis()
+  text-overflow ellipsis
+  overflow hidden
+  white-space nowrap
+word-break()
+  word-break break-all
+  word-wrap break-word
+  white-space pre-wrap

packages/styles/utils/index.scss

@@ -1,2 +0,0 @@
-@import './mixins';
-@import './var';

packages/styles/utils/index.styl

@@ -0,0 +1,5 @@
+@import './functional';
+@import './bem';
+@import './var';
+
+

packages/styles/utils/mixins.scss

@@ -1,94 +0,0 @@
-//BEM
-$fi-namespace: 'lemon';
-
-@mixin b($block) {
-  $selector: $fi-namespace + '-' + $block;
-  .#{$selector} {
-    @content;
-  }
-}
-@mixin e($element) {
-  $selector: '__' + $element;
-  &#{$selector} {
-    @content;
-  }
-}
-@mixin m($modifier) {
-  $selector: '--' + $modifier;
-  &#{$selector} {
-    @content;
-  }
-}
-
-@mixin bem($block, $element: false, $modifier: false) {
-  $selector: '.';
-  @if $block {
-    $selector: $fi-namespace + '-' + $block;
-  }
-  @if $element {
-    $selector: $selector + '__' + $element;
-  }
-  @if $modifier {
-    $selector: $selector + '--' + $modifier;
-  }
-  & .#{$selector} {
-    @content;
-  }
-}
-
-@mixin user-select($value) {
-  -moz-user-select: $value;
-  -webkit-user-select: $value;
-  -ms-user-select: $value;
-}
-
-@mixin scrollbar-theme($color: #1f252d, $background: #6d6d6d) {
-  &::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-  &::-webkit-scrollbar-track-piece {
-    background-color: $background;
-  }
-  &::-webkit-scrollbar-thumb:vertical {
-    height: 5px;
-    background-color: $color;
-  }
-  &::-webkit-scrollbar-thumb:horizontal {
-    width: 5px;
-    background-color: $background;
-  }
-}
-@mixin scrollbar-dark() {
-  @include scrollbar-theme();
-}
-@mixin scrollbar-light() {
-  @include scrollbar-theme(#aaa, #fff);
-}
-
-@mixin vertical-center {
-  $selector: &;
-  @at-root {
-    #{$selector}::after {
-      display: inline-block;
-      content: '';
-      height: 100%;
-      vertical-align: middle;
-    }
-  }
-}
-@mixin position-center($type: fixed) {
-  position: $type;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin arrow {
-}

packages/styles/utils/var.scss

@@ -1,30 +0,0 @@
-//$color-primary: #2977fa;
-$color-primary: #1bc213;
-$color-light: #fff;
-/* 头像 */
-$avatar-size: 45px;
-$avatar-radius: 50%;
-
-/** 标题 */
-$title-background: $color-primary;
-$title-color: $color-light;
-$title-height: 44px;
-/* 气泡 */
-$bubble-background: $color-primary;
-$bubble-color: $color-light;
-$bubble-radius: 12px;
-
-$bubble-self-background: #e7ebef;
-$bubble-self-color: #606d84;
-
-/* 输入框 */
-$editor-textarea-height: 40px;
-$editor-textarea-radius: 5px;
-
-$editor-submit-disable-color: #bcbcbc;
-$editor-submit-disable-background: #ebebeb;
-$editor-submit-radius: $editor-textarea-radius;
-/*
-$bubble-self-background: #e7ebef;
-$bubble-self-color: #3a465d;
-*/

packages/styles/utils/var.styl

@@ -0,0 +1,26 @@
+//color-primary #2977fa
+color-primary = #1bc213
+color-light = #fff
+/* 头像 */
+avatar-size = 45px
+avatar-radius = 50%
+
+/** 标题 */
+title-background = color-primary
+title-color = color-light
+title-height = 44px
+/* 气泡 */
+bubble-background = color-primary
+bubble-color = color-light
+bubble-radius = 12px
+
+bubble-self-background = #e7ebef
+bubble-self-color = #606d84
+
+/* 输入框 */
+editor-textarea-height = 40px
+editor-textarea-radius = 5px
+
+editor-submit-disable-color = #bcbcbc
+editor-submit-disable-background = #ebebeb
+editor-submit-radius = editor-textarea-radius