- Splits themes from variables

- Adds globalVars for less-loader to resolve the themeFile

Info: Not working atm since there is some bug in webpack-contrib/less-loader#93

build/utils.js

@@ -43,12 +43,18 @@ exports.cssLoaders = function (options) {
       return ['vue-style-loader'].concat(loaders)
     }
   }
+  const defaultTheme  =  `../src/styles/themes/variables/default.less`
+  const themePath = path.resolve(__dirname, defaultTheme)
 
   // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    less: generateLoaders('less'),
+    less: generateLoaders('less', {
+      globalVars: {
+        theme: `'${themePath}'`
+      }
+    }),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass'),
     stylus: generateLoaders('stylus'),

src/styles/import.less

@@ -1,2 +1,2 @@
-@import "./vars.less";
+@import "@{theme}";
 @import "./mixins.less";

src/styles/themes/carbon.less

@@ -1,35 +1,2 @@
-@import "../vars.less";
-
-@primaryColor: #474a4f;
-@darkerPrimaryColor: #7e848c;
-@lighterPrimaryColor: #bbbfc4;
-@accentColor: #ff5252;
-
-@textColor: #474a4f;
-@secondaryTextColor: #7e848c;
-@borderColor: #edeff2;
-@disabledColor: #d3d6db;
-
-@import "../../../less/theme-vars.less";
-// components vars
-@badgePrimaryColor: @darkerPrimaryColor;
-@checkboxCheckedColor: @accentColor;
-@checkboxColor: @secondaryTextColor;
-@datePickerSelectColor: @accentColor;
-@flatButtonPrimaryTextColor: @accentColor;
-@circleColor: @accentColor;
-@linearProgressFillColor: @accentColor;
-@radioColor: @darkerPrimaryColor;
-@radioCheckedColor: @accentColor;
-@raisedButtonPrimaryColor: @darkerPrimaryColor;
-@refreshControlColor: @accentColor;
-@sliderSelectionColor: @accentColor;
-@snackbarColor: @darkBlack;
-@stepperIconColor: @accentColor;
-@switchThumbOnColor: @accentColor;
-@switchTrackOnColor: fade(@accentColor, 50%);
-@textFieldFocusTextColor: @accentColor;
-@textFieldFocusLineColor: @accentColor;
-@timePickerSelectColor: @accentColor;
-@toastColor: @darkBlack;
+@import "./variables/carbon.less";
 @import "../../../less/theme.less";

src/styles/themes/dark.less

@@ -1,40 +1,2 @@
-@import "../vars.less";
-
-@primaryColor: @blue700;
-@darkerPrimaryColor: @blue700;
-@lighterPrimaryColor: @grey600;
-@accentColor: @pinkA200;
-@darkerAccentColor: @pinkA400;
-@lighterAccentColor: @pinkA100;
-
-@textColor: @fullWhite;
-@secondaryTextColor: fade(@fullWhite, 70%);
-@alternateTextColor: #303030;
-@borderColor: fade(@fullWhite, 30%);
-@disabledColor: fade(@fullWhite, 30%);
-
-// background
-@backgroundColor: #303030;
-@statusBarBackgroundColor: @fullBlack;
-@appbarBackgroundColor: @grey900;
-@dialogBackgroundColor: #424242; // dialogs or cards
-
-// icon
-@activeIconColor: fade(@fullWhite, 100%);
-@inActiveIconColor: fade(@fullWhite, 50%);
-
-@import "../../../less/theme-vars.less";
-// components vars
-@avatarBackgroundColor: lighten(@alternateTextColor, 26%);
-@datePickerHeaderColor: fade(@fullWhite, 12%);
-@timePickerHeaderColor: fade(@fullWhite, 12%);
-@timePickerClockCircleColor: fade(@fullWhite, 12%);
-@avatarBackgroundColor: lighten(@alternateTextColor, 26%);
-@chipColor: lighten(@alternateTextColor, 12%);
-@floatButtonDisabledColor: lighten(@alternateTextColor, 12%);
-
-@tableRowHoverBackgroundColor: fade(@textColor, 10%);
-@tableRowSelectedBackgroundColor: fade(@textColor, 5%);
-@datePickerTextColor: @textColor;
-@timePickerColor: @textColor;
+@import "./variables/dark.less";
 @import "../../../less/theme.less";

src/styles/themes/default.less

@@ -1,3 +1,2 @@
-@import "../vars.less";
-@import "../../../less/theme-vars.less";
+@import "./variables/default.less";
 @import "../../../less/theme.less";

src/styles/themes/light.less

@@ -1,7 +1,2 @@
-@import "../vars.less";
-
-@primaryColor: @blue;
-@darkerPrimaryColor: @blue700;
-
-@import "../../../less/theme-vars.less";
+@import "./variables/light.less";
 @import "../../../less/theme.less";

src/styles/themes/teal.less

@@ -1,7 +1,2 @@
-@import "../vars.less";
-
-@primaryColor: @teal;
-@darkerPrimaryColor: @teal700;
-
-@import "../../../less/theme-vars.less";
+@import "./variables/teal.less";
 @import "../../../less/theme.less";

src/styles/themes/variables/carbon.less

@@ -0,0 +1,36 @@
+@import "../../variables-base.less";
+
+// base overrides
+@primaryColor: #474a4f;
+@darkerPrimaryColor: #7e848c;
+@lighterPrimaryColor: #bbbfc4;
+@accentColor: #ff5252;
+
+@textColor: #474a4f;
+@secondaryTextColor: #7e848c;
+@borderColor: #edeff2;
+@disabledColor: #d3d6db;
+
+@import "../../variables-theme.less";
+
+// component overrides
+@badgePrimaryColor: @darkerPrimaryColor;
+@checkboxCheckedColor: @accentColor;
+@checkboxColor: @secondaryTextColor;
+@datePickerSelectColor: @accentColor;
+@flatButtonPrimaryTextColor: @accentColor;
+@circleColor: @accentColor;
+@linearProgressFillColor: @accentColor;
+@radioColor: @darkerPrimaryColor;
+@radioCheckedColor: @accentColor;
+@raisedButtonPrimaryColor: @darkerPrimaryColor;
+@refreshControlColor: @accentColor;
+@sliderSelectionColor: @accentColor;
+@snackbarColor: @darkBlack;
+@stepperIconColor: @accentColor;
+@switchThumbOnColor: @accentColor;
+@switchTrackOnColor: fade(@accentColor, 50%);
+@textFieldFocusTextColor: @accentColor;
+@textFieldFocusLineColor: @accentColor;
+@timePickerSelectColor: @accentColor;
+@toastColor: @darkBlack;

src/styles/themes/variables/dark.less

@@ -0,0 +1,41 @@
+@import "../../variables-base.less";
+
+// base overrides
+@primaryColor: @blue700;
+@darkerPrimaryColor: @blue700;
+@lighterPrimaryColor: @grey600;
+@accentColor: @pinkA200;
+@darkerAccentColor: @pinkA400;
+@lighterAccentColor: @pinkA100;
+
+@textColor: @fullWhite;
+@secondaryTextColor: fade(@fullWhite, 70%);
+@alternateTextColor: #303030;
+@borderColor: fade(@fullWhite, 30%);
+@disabledColor: fade(@fullWhite, 30%);
+
+// background
+@backgroundColor: #303030;
+@statusBarBackgroundColor: @fullBlack;
+@appbarBackgroundColor: @grey900;
+@dialogBackgroundColor: #424242; // dialogs or cards
+
+// icon
+@activeIconColor: fade(@fullWhite, 100%);
+@inActiveIconColor: fade(@fullWhite, 50%);
+
+@import "../../variables-theme.less";
+
+// component overrides
+@avatarBackgroundColor: lighten(@alternateTextColor, 26%);
+@datePickerHeaderColor: fade(@fullWhite, 12%);
+@timePickerHeaderColor: fade(@fullWhite, 12%);
+@timePickerClockCircleColor: fade(@fullWhite, 12%);
+@avatarBackgroundColor: lighten(@alternateTextColor, 26%);
+@chipColor: lighten(@alternateTextColor, 12%);
+@floatButtonDisabledColor: lighten(@alternateTextColor, 12%);
+
+@tableRowHoverBackgroundColor: fade(@textColor, 10%);
+@tableRowSelectedBackgroundColor: fade(@textColor, 5%);
+@datePickerTextColor: @textColor;
+@timePickerColor: @textColor;

src/styles/themes/variables/default.less

@@ -0,0 +1,2 @@
+@import "../../variables-base.less";
+@import "../../variables-theme.less";

src/styles/themes/variables/light.less

@@ -0,0 +1,7 @@
+@import "../../variables-base.less";
+
+// base overrides
+@primaryColor: @blue;
+@darkerPrimaryColor: @blue700;
+
+@import "../../variables-theme.less";

src/styles/themes/variables/teal.less

@@ -0,0 +1,7 @@
+@import "../../variables-base.less";
+
+// base overrides
+@primaryColor: @teal;
+@darkerPrimaryColor: @teal700;
+
+@import "../../variables-theme.less";

src/styles/variables-base.less

@@ -0,0 +1,46 @@
+@import "./colors.less";
+@fontFamily: Roboto, Lato, sans-serif;
+
+// primary and accent
+@primaryColor: @deepPurple400;  // 主色
+@darkerPrimaryColor: @deepPurple600;
+// @primaryColor: @deepPurple400;  // 主色
+// @darkerPrimaryColor: @deepPurple600;
+@lighterPrimaryColor: @grey400;
+@accentColor: @pinkA200;
+@darkerAccentColor: @grey100;
+@lighterAccentColor: @grey500;
+
+// textColor or borderColor
+@textColor: @darkBlack;
+@secondaryTextColor: fade(@fullBlack, 54%);
+@alternateTextColor: @white;
+@borderColor: fade(@fullBlack, 12%);
+@disabledColor: fade(@fullBlack, 38%);
+
+// background
+@backgroundColor: @white;
+@statusBarBackgroundColor: @grey300;
+@appbarBackgroundColor: @grey100;
+@dialogBackgroundColor: @white; // dialogs or cards
+
+// icon color
+@activeIconColor: fade(@fullBlack, 54%);
+@inActiveIconColor: fade(@fullBlack, 38%);
+
+// spacing
+@iconSize: 24px;
+@desktopGutter: 24px;
+@desktopGutterMore: 32px;
+@desktopGutterLess: 16px;
+@desktopGutterMini: 8px;
+@desktopKeylineIncrement: 64px;
+@desktopDropDownMenuItemHeight: 32px;
+@desktopDropDownMenuFontSize: 15px;
+@desktopDrawerMenuItemHeight: 48px;
+@desktopSubheaderHeight: 48px;
+@desktopToolbarHeight: 56px;
+
+// animate
+@easeOutFunction: cubic-bezier(0.23, 1, 0.32, 1);
+@easeInOutFunction: cubic-bezier(0.445, 0.05, 0.55, 0.95);