From 77f635e2066160938494e1d3bd9cf29c4ff86c11 Mon Sep 17 00:00:00 2001 From: Laurin Quast Date: Mon, 22 May 2017 22:43:04 +0200 Subject: [PATCH] - 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 | 8 +- src/styles/import.less | 2 +- src/styles/themes/carbon.less | 35 +--- src/styles/themes/dark.less | 40 +---- src/styles/themes/default.less | 3 +- src/styles/themes/light.less | 7 +- src/styles/themes/teal.less | 7 +- src/styles/themes/variables/carbon.less | 36 ++++ src/styles/themes/variables/dark.less | 41 +++++ src/styles/themes/variables/default.less | 2 + src/styles/themes/variables/light.less | 7 + src/styles/themes/variables/teal.less | 7 + src/styles/variables-base.less | 46 +++++ src/styles/variables-theme.less | 204 +++++++++++++++++++++++ 14 files changed, 356 insertions(+), 89 deletions(-) create mode 100644 src/styles/themes/variables/carbon.less create mode 100644 src/styles/themes/variables/dark.less create mode 100644 src/styles/themes/variables/default.less create mode 100644 src/styles/themes/variables/light.less create mode 100644 src/styles/themes/variables/teal.less create mode 100644 src/styles/variables-base.less create mode 100644 src/styles/variables-theme.less diff --git a/build/utils.js b/build/utils.js index 1140d048..d9e3d75c 100644 --- a/build/utils.js +++ b/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'), diff --git a/src/styles/import.less b/src/styles/import.less index 2e4349b8..17bba2b7 100644 --- a/src/styles/import.less +++ b/src/styles/import.less @@ -1,2 +1,2 @@ -@import "./vars.less"; +@import "@{theme}"; @import "./mixins.less"; diff --git a/src/styles/themes/carbon.less b/src/styles/themes/carbon.less index b5605940..efa62de8 100644 --- a/src/styles/themes/carbon.less +++ b/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"; diff --git a/src/styles/themes/dark.less b/src/styles/themes/dark.less index 9a454d9a..821de75b 100644 --- a/src/styles/themes/dark.less +++ b/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"; diff --git a/src/styles/themes/default.less b/src/styles/themes/default.less index 15e8a158..41565a88 100644 --- a/src/styles/themes/default.less +++ b/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"; diff --git a/src/styles/themes/light.less b/src/styles/themes/light.less index f9ef008a..9583443b 100644 --- a/src/styles/themes/light.less +++ b/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"; diff --git a/src/styles/themes/teal.less b/src/styles/themes/teal.less index 11b0764e..b5b32781 100644 --- a/src/styles/themes/teal.less +++ b/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"; diff --git a/src/styles/themes/variables/carbon.less b/src/styles/themes/variables/carbon.less new file mode 100644 index 00000000..3386f0ed --- /dev/null +++ b/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; diff --git a/src/styles/themes/variables/dark.less b/src/styles/themes/variables/dark.less new file mode 100644 index 00000000..a2329f85 --- /dev/null +++ b/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; diff --git a/src/styles/themes/variables/default.less b/src/styles/themes/variables/default.less new file mode 100644 index 00000000..850b48c4 --- /dev/null +++ b/src/styles/themes/variables/default.less @@ -0,0 +1,2 @@ +@import "../../variables-base.less"; +@import "../../variables-theme.less"; diff --git a/src/styles/themes/variables/light.less b/src/styles/themes/variables/light.less new file mode 100644 index 00000000..6cdfb24b --- /dev/null +++ b/src/styles/themes/variables/light.less @@ -0,0 +1,7 @@ +@import "../../variables-base.less"; + +// base overrides +@primaryColor: @blue; +@darkerPrimaryColor: @blue700; + +@import "../../variables-theme.less"; diff --git a/src/styles/themes/variables/teal.less b/src/styles/themes/variables/teal.less new file mode 100644 index 00000000..583dab71 --- /dev/null +++ b/src/styles/themes/variables/teal.less @@ -0,0 +1,7 @@ +@import "../../variables-base.less"; + +// base overrides +@primaryColor: @teal; +@darkerPrimaryColor: @teal700; + +@import "../../variables-theme.less"; diff --git a/src/styles/variables-base.less b/src/styles/variables-base.less new file mode 100644 index 00000000..eaad6136 --- /dev/null +++ b/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); diff --git a/src/styles/variables-theme.less b/src/styles/variables-theme.less new file mode 100644 index 00000000..6b420072 --- /dev/null +++ b/src/styles/variables-theme.less @@ -0,0 +1,204 @@ +@appbarColor: @primaryColor; +@appbarTextColor: @alternateTextColor; + +@avatarColor: @alternateTextColor; +@avatarBackgroundColor: darken(@alternateTextColor, 26%); + +@badgeColor: @lighterPrimaryColor; +@badgeTextColor: @alternateTextColor; +@badgePrimaryColor: @primaryColor; +@badgePrimaryTextColor: @alternateTextColor; +@badgeSecondaryColor: @accentColor; +@badgeSecondaryTextColor: @alternateTextColor; + +@baseFontFamily: @fontFamily; +@baseTextColor: @textColor; +@baseBackgroundColor: @backgroundColor; +@baseLinkColor: @accentColor; + +@bottomNavBackgroundColor: @dialogBackgroundColor; +@bottomNavShiftBackgroundColor: @primaryColor; +@bottomNavUnselectedColor: @secondaryTextColor; +@bottomNavShiftUnselectedColor: fade(@alternateTextColor, 70%); +@bottomNavSelectedColor: @primaryColor; +@bottomNavShiftSelectedColor: @alternateTextColor; + +@bottomSheetColor: @dialogBackgroundColor; + +@cardBackgroudColor: @backgroundColor; +@cardTitleColor: fade(@textColor, 87%); +@cardSubtitleColor: fade(@textColor, 54%); +@cardMediaColor: @darkWhite; +@cardMediaOverlayContentBackground: @lightBlack; +@cardMediaTitleColor: @darkWhite; +@cardMediaSubtitleColor: @lightWhite; +@cardTextColor: @textColor; + +@checkboxColor: @textColor; +@checkboxTextColor: @textColor; +@checkboxDisabledColor: @disabledColor; +@checkboxCheckedColor: @primaryColor; + +@chipColor: darken(@alternateTextColor, 12%); +@chipHoverColor: rgb(206, 206, 206); +@chipTextColor: fade(@textColor, 87%); +@chipDeleteColor: fade(@textColor, 26%); +@chipHoverDeleteColor: fade(fade(@textColor, 26%), 40%); + +@circularProgressColor: @primaryColor; + +@datePickerColor: @primaryColor; +@datePickerTextColor: @alternateTextColor; +@datePickerCalendarTextColor: @textColor; +@datePickerSelectColor: @primaryColor; +@datePickerSelectTextColor: @alternateTextColor; +@datePickerCalendarYearBackgroundColor: @dialogBackgroundColor; +@datePickerHeaderColor: @primaryColor; + +@dialogBorderColor: @borderColor; +@dialogTitleColor: @textColor; +@dialogBodyColor: fade(@textColor, 60%);; +@dialogColor: @dialogBackgroundColor; + +@dropDownMenuTextColor: @textColor; +@dropDownMenuIconColor: @borderColor; +@dropDownMenuLineColor: @borderColor; + +// flatButton +@flatButtonColor: transparent; +@flatButtonTextColor: @textColor; +@flatButtonPrimaryTextColor: @primaryColor; +@flatButtonSecondaryTextColor: @accentColor; + +// floatButton +@floatButtonColor: @primaryColor; +@floatButtonIconColor: @alternateTextColor; +@floatButtonSecondaryColor: @accentColor; +@floatButtonSecondaryIconColor: @alternateTextColor; +@floatButtonDisabledColor: darken(@alternateTextColor, 12%); +@floatButtonDisabledIconColor: fade(@textColor, 30%); + +@gridListTextColor: @white; +@gridListTitlebarColor: rgba(0, 0, 0, 0.4); + +// circle +@circleColor: @primaryColor; +@circleSecondaryColor: @accentColor; + +@linearProgressColor: @lighterPrimaryColor; +@linearProgressFillColor: @primaryColor; + +// listItem +@listTextColor: @textColor; +@listHoverColor: fade(@listTextColor, 10%); +@listSecondaryTextColor: @secondaryTextColor; +@listLeftIconColor: @grey600; +@listRightIconColor: @grey600; +@listSelectedColor: @primaryColor; + +@menuTextColor: @textColor; +@menuSelectColor: @accentColor; +@menuHoverColor: rgba(0, 0, 0, .1); +@menuDisabledColor: @disabledColor; +@menuLeftIconColor: @grey600; +@menuRightIconColor: @grey600; + +@paginationTextColor: @textColor; +@paginationHoverBackgroundColor: rgba(0, 0, 0, .1); +@paginationActiveBackgroundColor: @primaryColor; +@paginationActiveColor: @white; +@paginationDisabledColor: @disabledColor; + +@paperColor: @textColor; +@paperBackgroundColor: @dialogBackgroundColor; + +@pickerColor: @dialogBackgroundColor; +@pickerTextColor: @secondaryTextColor; +@pickerSelectedTextColor: @textColor; +@pickerBorderColor: @borderColor; + +@popoverColor: @dialogBackgroundColor; + +@popupColor: @dialogBackgroundColor; + +@radioColor: @textColor; +@radioTextColor: @textColor; +@radioDisabledColor: @disabledColor; +@radioCheckedColor: @primaryColor; + +// raisedButton +@raisedButtonColor: @alternateTextColor; +@raisedButtonTextColor: @textColor; +@raisedButtonPrimaryColor: @primaryColor; +@raisedButtonSecondaryColor: @accentColor; +@raisedButtonDisabledColor: darken(@alternateTextColor, 10%); +@raisedButtonDisabledTextColor: fade(@textColor, 30%); + +@refreshControlColor: @primaryColor; + +@sliderTrackColor: @lighterPrimaryColor; +@sliderSelectionColor: @primaryColor; +@sliderDisabledColor: @lighterPrimaryColor; +@sliderZeroColor: @alternateTextColor; + +@snackbarColor: @textColor; +@snackbarTextColor: @alternateTextColor; + +@stepperBackgroundColor: transparent; +@stepperHoverBackgroundColor: fade(@textColor, 6%); +@stepperIconColor: @primaryColor; +@stepperHoveredIconColor: @grey700; +@stepperInactiveIconColor: @grey500; +@stepperTextColor: @textColor; +@stepperNumTextColor: @alternateTextColor; +@stepperDisabledTextColor: @disabledColor; +@stepperConnectorLineColor: @grey400; + +// subHeader +@subHeaderColor: @secondaryTextColor; + +@switchThumbOnColor: @primaryColor; +@switchThumbOffColor: @darkerAccentColor; +@switchThumbDisabledColor: @grey300; +@switchTrackOnColor: fade(@primaryColor, 50%); +@switchTrackOffColor: @lighterPrimaryColor; +@switchTrackDisabledColor: @lighterPrimaryColor; +@switchTextColor: @textColor; +@switchTextDisabledColor: @disabledColor; + +@tableBackgroundColor: @alternateTextColor; +@tableBorderColor: @borderColor; +@tableTextColor: @textColor; +@tableRowSelectedBackgroundColor: @grey100; +@tableRowHoverBackgroundColor: @grey200; +@tableRowStripeBackgroundColor: fade(lighten(@primaryColor, 50%), 40%); +@tableTheadTextColor: @secondaryTextColor; + +@tabsBackgroundColor: @primaryColor; +@tabsLineColor: @accentColor; +@tabsTextColor: fade(@alternateTextColor, 70%); +@tabsSelectedTextColor: @alternateTextColor; + +@textFieldTextColor: @secondaryTextColor; +@textFieldInputColor: @textColor; +@textFieldHintColor: @disabledColor; +@textFieldFocusTextColor: @primaryColor; +@textFieldDisabledTextColor: @disabledColor; +@textFieldErrorTextColor: @red; +@textFieldLineColor: @borderColor; +@textFieldFocusLineColor: @primaryColor; +@textFieldErrorLineColor: @red; +@textFieldDisabledLineColor: @disabledColor; + +@timePickerColor: @alternateTextColor; +@timePickerClockColor: @textColor; +@timePickerClockCircleColor: fade(@darkBlack, 7%); +@timePickerSelectColor: @primaryColor; +@timePickerSelectTextColor: @alternateTextColor; +@timePickerHeaderColor: @primaryColor; + +@toastTextColor: @alternateTextColor; +@toastColor: @textColor; + +@tooltipTextColor: @alternateTextColor; +@tooltipRippleColor: @grey700;