fix: content background vars

Guillaume Chau · Guillaume Chau · commit 881128ab775f · 2018-10-17T01:16:10.000-07:00
diff --git a/packages/@vue/cli-ui/src/components/app/TopBar.vue b/packages/@vue/cli-ui/src/components/app/TopBar.vue
@@ -22,9 +22,9 @@
   position relative
   height 32px
   z-index 1
-  background darken($vue-ui-color-light-neutral, 12%)
+  background $content-bg-secondary-light
   .vue-ui-dark-mode &
-    background lighten($vue-ui-color-darker, 6%)
+    background $content-bg-secondary-dark
 
   &,
   .actions
diff --git a/packages/@vue/cli-ui/src/components/content/ContentView.vue b/packages/@vue/cli-ui/src/components/content/ContentView.vue
@@ -37,22 +37,22 @@ export default {
     box-sizing border-box
 
   .content
-    background darken($vue-ui-color-light-neutral, 12%)
+    background $content-bg-secondary-light
     .vue-ui-dark-mode &
-      background lighten($vue-ui-color-darker, 6%)
+      background $content-bg-secondary-dark
     .wrapper
-      background darken($vue-ui-color-light-neutral, 8%)
+      background $content-bg-primary-light
       position relative
       overflow-x hidden
       overflow-y auto
       .vue-ui-dark-mode &
-        background lighten($vue-ui-color-dark, 3%)
+        background $content-bg-primary-dark
 
   &.list
     .wrapper
-      background $vue-ui-color-light-neutral
+      background $content-bg-list-light
       .vue-ui-dark-mode &
-        background lighten($vue-ui-color-darker, 9%)
+        background $content-bg-list-dark
 
   &.limit-width
     .wrapper
diff --git a/packages/@vue/cli-ui/src/components/content/NavList.vue b/packages/@vue/cli-ui/src/components/content/NavList.vue
@@ -55,7 +55,7 @@ export default {
 .nav-list
   overflow-x hidden
   overflow-y auto
-  background $vue-ui-color-light-neutral
+  background $content-bg-list-light
   .vue-ui-dark-mode &
-    background lighten($vue-ui-color-darker, 9%)
+    background $content-bg-list-dark
 </style>
diff --git a/packages/@vue/cli-ui/src/components/content/StepWizard.vue b/packages/@vue/cli-ui/src/components/content/StepWizard.vue
@@ -82,9 +82,9 @@ export default {
 
   .header,
   >>> .tabs
-    background $vue-ui-color-light-neutral
+    background $content-bg-primary-light
     .vue-ui-dark-mode &
-      background $vue-ui-color-dark
+      background $content-bg-primary-dark
 
   >>> .tabs-content
     height 0
diff --git a/packages/@vue/cli-ui/src/style/colors.styl b/packages/@vue/cli-ui/src/style/colors.styl
@@ -1,2 +1,9 @@
 $color-background-light = lighten($vue-ui-color-light-neutral, 80%)
 $color-text-light = lighten($vue-ui-color-dark, 40%)
+
+$content-bg-primary-light = darken($vue-ui-color-light-neutral, 8%)
+$content-bg-primary-dark = lighten($vue-ui-color-dark, 3%)
+$content-bg-secondary-light = darken($vue-ui-color-light-neutral, 12%)
+$content-bg-secondary-dark = lighten($vue-ui-color-darker, 6%)
+$content-bg-list-light = $vue-ui-color-light-neutral
+$content-bg-list-dark = lighten($vue-ui-color-darker, 9%)
