drawer theme

src/common/stylus/theme/default.styl

@@ -194,3 +194,10 @@ $form-invalid-color := #e64340
 $form-group-legend-color := $color-light-grey
 $form-group-legend-bgc := $color-background
 $form-label-required-color := #e64340
+
+// drawer
+$drawer-color := $color-dark-grey
+$drawer-title-bdc := $color-light-grey-ss
+$drawer-title-bgc := $color-white
+$drawer-panel-bgc := $color-white
+$drawer-item-active-bgc := $color-light-grey-opacity

src/components/drawer/drawer-item.vue

@@ -57,5 +57,5 @@
       &::after
         display: block
   .cube-drawer-item_active
-    background: $index-list-item-active-bgc
+    background: $drawer-item-active-bgc
 </style>

src/components/drawer/drawer-panel.vue

@@ -84,7 +84,7 @@
     height: 100%
     flex: 1
     width: 170px
-    background-color: $color-white
+    background-color: $drawer-panel-bgc
     box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
     + .cube-drawer-panel
       margin-left: -67px

src/components/drawer/drawer.vue

@@ -185,7 +185,7 @@
     bottom: 0
     left: 0
     overflow: hidden
-    color: $color-dark-grey
+    color: $drawer-color
   .cube-drawer-main
     position: absolute
     top: 0
@@ -203,9 +203,9 @@
     padding: 0 20px
     height: 50px
     line-height: 50px
-    border-bottom: 1px solid $color-light-grey-ss
+    border-bottom: 1px solid $drawer-title-bdc
     font-size: $fontsize-large
-    background-color: $color-white
+    background-color: $drawer-title-bgc
   .cube-drawer-panels
     display: flex
     flex: 1