From 3b993dadc057977f7cd0401aa580300b3902fad5 Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Mon, 22 Aug 2016 19:13:38 -0300 Subject: [PATCH] LT-281: Creating architectural mechanism to allow theme switching --- Packages/design/package.js | 2 + .../design/styles/imports/theme-tide.styl | 57 ++++++++++++ .../styles/imports/theme-tigerlilly.styl | 92 ++++++++++--------- Packages/design/styles/imports/theming.styl | 25 +++++ Packages/design/styles/imports/variables.styl | 9 +- .../components/measureFlow/measureFlow.styl | 12 ++- 6 files changed, 147 insertions(+), 50 deletions(-) create mode 100644 Packages/design/styles/imports/theming.styl diff --git a/Packages/design/package.js b/Packages/design/package.js index 41de0594b..8b624df74 100644 --- a/Packages/design/package.js +++ b/Packages/design/package.js @@ -18,7 +18,9 @@ Package.onUse(function(api) { 'styles/imports/mixins.styl', 'styles/imports/spacings.styl', 'styles/imports/variables.styl', + 'styles/imports/theming.styl', 'styles/imports/theme-tide.styl', + 'styles/imports/theme-tigerlilly.styl' ], 'client', { isImport: true }); diff --git a/Packages/design/styles/imports/theme-tide.styl b/Packages/design/styles/imports/theme-tide.styl index 7aa395feb..b27ce8a43 100644 --- a/Packages/design/styles/imports/theme-tide.styl +++ b/Packages/design/styles/imports/theme-tide.styl @@ -1,3 +1,60 @@ +$themes['tide'] = { + // Common pallete + $uiYellow: #E29E4A + $uiSkyBlue: #6FBDE2 + + $uiLightGray: #516873 + $uiGray: #263340 + $uiGrayDark: #16202B + $uiGrayDarker: #151A1F + $uiGrayDarkest: #14191E + + // Interface UI Colors + $defaultColor: #9cd0fe + $hoverColor: #ffffff + $activeColor: #00a4d9 + $uiBorderColor: #436270 + $uiBorderColorDark: #3C5D80 + $uiBorderColorActive: #00a4d9 + $primaryBackgroundColor: #000000 + $boxBackgroundColor: #344a61 + $boxBackgroundColorDark: #22374D + + // Text Colors + $textColorActive: black //#89bae5 + $textPrimaryColor: #ffffff + $textSecondaryColor: #6a8fb1 + + // Other Colors + $menuBackgroundColor: #F2F2F2 + $imageSliderColor: #163239 + + // Viewport Settings + $viewportBorderThickness: 1px + $viewportBorderColor: $uiBorderColorDark + $viewportBorderColorHover: $uiBorderColor + $viewportBorderColorActive: $uiBorderColorActive + + // Sizes + $topBarHeight: 40px + $toolbarHeight: 78px + $toolbarDrawerHeight: 62px + + // Thicknesses + $uiBorderThickness: 1px + + // Fonts + $logoFontFamily: "Sanchez" + $logoFontWeight: 300 + + // Transitions + $transitionDuration: 0.3s + $transitionEffect: ease + $sidebarTransition: all $transitionDuration $transitionEffect + $studiesSidebarMenuWidth: 307px + $lesionsSidebarMenuWidth: 323px +} + // Common pallete $uiYellow = #E29E4A $uiSkyBlue = #6FBDE2 diff --git a/Packages/design/styles/imports/theme-tigerlilly.styl b/Packages/design/styles/imports/theme-tigerlilly.styl index e305a9878..ba473d261 100644 --- a/Packages/design/styles/imports/theme-tigerlilly.styl +++ b/Packages/design/styles/imports/theme-tigerlilly.styl @@ -1,54 +1,56 @@ -// Common pallete -$uiYellow = #E29E4A -$uiSkyBlue = #6FBDE2 +$themes['tigerlilly'] = { + // Common pallete + $uiYellow: #E29E4A + $uiSkyBlue: #6FBDE2 -$uiLightGray = #516873 -$uiGray = #263340 -$uiGrayDark = #16202B -$uiGrayDarker = #151A1F -$uiGrayDarkest = #14191E + $uiLightGray: #516873 + $uiGray: #263340 + $uiGrayDark: #16202B + $uiGrayDarker: #151A1F + $uiGrayDarkest: #14191E -// Interface UI Colors -$defaultColor = #98ceff -$hoverColor = #ffffff -$activeColor = #ff8a3d -$uiBorderColor = #744b71 -$uiBorderColorDark = #744b71 -$uiBorderColorActive = #ff8a3d -$primaryBackgroundColor = #000000 -$boxBackgroundColor = #5b3a59 -$boxBackgroundColorDark = #4b2f40 + // Interface UI Colors + $defaultColor: #98ceff + $hoverColor: #ffffff + $activeColor: #ff8a3d + $uiBorderColor: #744b71 + $uiBorderColorDark: #744b71 + $uiBorderColorActive: #ff8a3d + $primaryBackgroundColor: #000000 + $boxBackgroundColor: #5b3a59 + $boxBackgroundColorDark: #4b2f40 -// Text Colors -$textColorActive = #ff8a3d -$textPrimaryColor = #ffffff -$textSecondaryColor = #6a8fb1 + // Text Colors + $textColorActive: black + $textPrimaryColor: #ffffff + $textSecondaryColor: #6a8fb1 -// Other Colors -$menuBackgroundColor = #F2F2F2 -$imageSliderColor = #4b2c3c //#163239 + // Other Colors + $menuBackgroundColor: #F2F2F2 + $imageSliderColor: #4b2c3c //#163239 -// Viewport Settings -$viewportBorderThickness = 1px -$viewportBorderColor = $uiBorderColorDark -$viewportBorderColorHover = $uiBorderColor -$viewportBorderColorActive = $uiBorderColorActive + // Viewport Settings + $viewportBorderThickness: 1px + $viewportBorderColor: $uiBorderColorDark + $viewportBorderColorHover: $uiBorderColor + $viewportBorderColorActive: $uiBorderColorActive -// Sizes -$topBarHeight = 40px -$toolbarHeight = 78px -$toolbarDrawerHeight = 62px + // Sizes + $topBarHeight: 40px + $toolbarHeight: 78px + $toolbarDrawerHeight: 62px -// Thicknesses -$uiBorderThickness = 1px + // Thicknesses + $uiBorderThickness: 1px -// Fonts -$logoFontFamily = "Sanchez" -$logoFontWeight = 300 + // Fonts + $logoFontFamily: "Sanchez" + $logoFontWeight: 300 -// Transitions -$transitionDuration = 0.3s -$transitionEffect = ease -$sidebarTransition = all $transitionDuration $transitionEffect -$studiesSidebarMenuWidth = 307px -$lesionsSidebarMenuWidth = 323px \ No newline at end of file + // Transitions + $transitionDuration: 0.3s + $transitionEffect: ease + $sidebarTransition: all $transitionDuration $transitionEffect + $studiesSidebarMenuWidth: 307px + $lesionsSidebarMenuWidth: 323px +} diff --git a/Packages/design/styles/imports/theming.styl b/Packages/design/styles/imports/theming.styl new file mode 100644 index 000000000..528ac4e43 --- /dev/null +++ b/Packages/design/styles/imports/theming.styl @@ -0,0 +1,25 @@ +parseSpaceVars($theme, $value) + $valueSplit = split(' ', $value) + $list = '' + pop($list) + for $property in $valueSplit + if ($theme[$property]) + push($list, $theme[$property]) + else + push($list, $property) + join(' ', $list) + +parseCommaVars($theme, $value) + $valueSplit = split(',', $value) + $list = '' + pop($list) + for $sentence in $valueSplit + push($list, parseSpaceVars($theme, $sentence)) + unquote(join(',', $list)) + +theme($property, $value) + / {selector()} + {$property}: parseCommaVars($themes[$defaultTheme], $value) + for $themeName, $theme in $themes + / body.theme-{$themeName} {selector()} + {$property}: parseCommaVars($theme, $value) diff --git a/Packages/design/styles/imports/variables.styl b/Packages/design/styles/imports/variables.styl index 621d56a85..362c5a1b8 100644 --- a/Packages/design/styles/imports/variables.styl +++ b/Packages/design/styles/imports/variables.styl @@ -1,2 +1,7 @@ -//@import "./theme-tigerlilly.styl" -@import "./theme-tide.styl" \ No newline at end of file +$themes = {} +$defaultTheme = 'tide' + +@import "./theming.styl" + +@import "./theme-tide.styl" +@import "./theme-tigerlilly.styl" diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl index 06851eb56..bfbf89da1 100644 --- a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl +++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl @@ -10,10 +10,13 @@ opacity: 0 .btn-add - background-color: $activeColor - border: 2px solid $uiBorderColor + // color: $textColorActive + // background-color: $activeColor + // border: 2px solid $uiBorderColor + theme('color', '$textColorActive') + theme('background-color', '$activeColor') + theme('border', '2px solid $uiBorderColor') border-radius: 14px - color: $textColorActive cursor: pointer font-weight: bold height: 24px @@ -26,6 +29,9 @@ transition(opacity 0.3s ease) white-space: nowrap + // / {selector()} + // color: $themes['tide']['uiYellow'] !important + .select-tree-root>.tree-content width: 213px