Consolidate theme stylesheets into one

Since they're all defined by a mixin, it didn't provide any benefit to
have them in separate files.

This also adds variables defining the basic color of each theme so we
can re-use them in the previews.

app/assets/stylesheets/application.scss

@@ -35,26 +35,26 @@
  */
 @import "font-awesome";
 
+/**
+ * UI themes:
+ */
+@import "themes/**/*";
+
 /**
  * Generic css (forms, nav etc):
  */
-@import "generic/*";
+@import "generic/**/*";
 
 /**
  * Page specific styles (issues, projects etc):
  */
 
-@import "pages/*";
+@import "pages/**/*";
 
 /**
  * Code highlight
  */
-@import "highlight/*";
-
-/**
- * UI themes:
- */
-@import "themes/*";
+@import "highlight/**/*";
 
 /**
  * Styles for JS behaviors.

app/assets/stylesheets/pages/profile.scss

@@ -17,67 +17,6 @@
   }
 }
 
-/*
- * Appearance settings
- *
- */
-.themes_opts {
-  label {
-    margin-right: 20px;
-    text-align: center;
-
-    .prev {
-      height: 80px;
-      width: 160px;
-      margin-bottom: 10px;
-      @include border-radius(4px);
-
-      &.classic {
-        background: #31363e;
-      }
-
-      &.default {
-        background: #888888;
-      }
-
-      &.modern {
-        background: #009871;
-      }
-
-      &.gray {
-        background: #373737;
-      }
-
-      &.violet {
-        background: #548;
-      }
-
-      &.blue {
-        background: #2980b9;
-      }
-    }
-  }
-}
-
-.code_highlight_opts {
-  margin-top: 10px;
-
-  label {
-    margin-right: 20px;
-    text-align: center;
-
-    .prev {
-      width: 160px;
-      margin-bottom: 10px;
-
-      img {
-        max-width: 100%;
-        @include border-radius(4px);
-      }
-    }
-  }
-}
-
 .oauth-buttons {
   .btn-group {
     margin-right: 10px;

app/assets/stylesheets/pages/profiles/preferences.scss

+.application-theme {
+  label {
+    margin-right: 20px;
+    text-align: center;
+
+    .application-theme-preview {
+      height: 80px;
+      width: 160px;
+      margin-bottom: 10px;
+      @include border-radius(4px);
+
+      &.ui_blue {
+        background: $theme-blue;
+      }
+
+      &.ui_charcoal {
+        background: $theme-charcoal;
+      }
+
+      &.ui_graphite {
+        background: $theme-graphite;
+      }
+
+      &.ui_gray {
+        background: $theme-gray;
+      }
+
+      &.ui_green {
+        background: $theme-green;
+      }
+
+      &.ui_violet {
+        background: $theme-violet;
+      }
+    }
+  }
+}
+
+.code_highlight_opts {
+  margin-top: 10px;
+
+  label {
+    margin-right: 20px;
+    text-align: center;
+
+    .prev {
+      width: 160px;
+      margin-bottom: 10px;
+
+      img {
+        max-width: 100%;
+        @include border-radius(4px);
+      }
+    }
+  }
+}
+

app/assets/stylesheets/themes/gitlab-theme.scss

+/**
+ * Styles the GitLab application with a specific color theme
+ *
+ * $color-light  -
+ * $color        -
+ * $color-darker -
+ * $color-dark   -
+ */
 @mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
   header {
     &.navbar-gitlab {
@@ -77,3 +85,36 @@
     }
   }
 }
+
+$theme-blue: #2980B9;
+$theme-charcoal: #474D57;
+$theme-graphite: #888888;
+$theme-gray: #373737;
+$theme-green: #019875;
+$theme-violet: #554488;
+
+body {
+  &.ui_blue {
+    @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099);
+  }
+
+  &.ui_charcoal {
+    @include gitlab-theme(#979DA7, $theme-charcoal, #373D47, #24272D);
+  }
+
+  &.ui_graphite {
+    @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666);
+  }
+
+  &.ui_gray {
+    @include gitlab-theme(#979797, $theme-gray, #272727, #222222);
+  }
+
+  &.ui_green {
+    @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855);
+  }
+
+  &.ui_violet {
+    @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255);
+  }
+}

app/assets/stylesheets/themes/ui_basic.scss

-/**
- * This file represent some UI that can be changed
- * during web app restyle or theme select.
- *
- */
-.ui_basic {
-  @include gitlab-theme(#CCCCCC, #888888, #777777, #666666);
-}

app/assets/stylesheets/themes/ui_blue.scss

-/**
- * Blue GitLab UI theme
- */
-.ui_blue {
-  @include gitlab-theme(#BECDE9, #2980b9, #1970a9, #096099);
-}

app/assets/stylesheets/themes/ui_color.scss

-/**
- * Violet GitLab UI theme
- */
-.ui_color {
-  @include gitlab-theme(#98C, #548, #436, #325);
-}

app/assets/stylesheets/themes/ui_gray.scss

-/**
- * Gray GitLab UI theme
- */
-.ui_gray {
-  @include gitlab-theme(#979797, #373737, #272727, #222222);
-}

app/assets/stylesheets/themes/ui_mars.scss

-/**
- * Classic GitLab UI theme
- */
-.ui_mars {
-  @include gitlab-theme(#979DA7, #474D57, #373D47, #24272D);
-}

app/assets/stylesheets/themes/ui_modern.scss

-/**
- * Modern GitLab UI theme
- */
-.ui_modern {
-  @include gitlab-theme(#ADC, #019875, #018865, #017855);
-}