othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LT-281: Creating architectural mechanism to allow theme switching

Browse Source
This commit is contained in:
Bruno Alves de Faria 2016-08-22 19:13:38 -03:00
parent 8f98efc7ea
commit 3b993dadc0
6 changed files with 147 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Packages/design/package.js
View File

@ -18,7 +18,9 @@ Package.onUse(function(api) {
'styles/imports/mixins.styl', 'styles/imports/mixins.styl',
'styles/imports/spacings.styl', 'styles/imports/spacings.styl',
'styles/imports/variables.styl', 'styles/imports/variables.styl',
'styles/imports/theming.styl',
'styles/imports/theme-tide.styl', 'styles/imports/theme-tide.styl',
'styles/imports/theme-tigerlilly.styl'
], 'client', { ], 'client', {
isImport: true isImport: true
}); });

57
Packages/design/styles/imports/theme-tide.styl
View File

@ -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 // Common pallete
$uiYellow = #E29E4A $uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2 $uiSkyBlue = #6FBDE2

74
Packages/design/styles/imports/theme-tigerlilly.styl
View File

@ -1,54 +1,56 @@
$themes['tigerlilly'] = {
// Common pallete // Common pallete
$uiYellow = #E29E4A $uiYellow: #E29E4A
$uiSkyBlue = #6FBDE2 $uiSkyBlue: #6FBDE2
$uiLightGray = #516873 $uiLightGray: #516873
$uiGray = #263340 $uiGray: #263340
$uiGrayDark = #16202B $uiGrayDark: #16202B
$uiGrayDarker = #151A1F $uiGrayDarker: #151A1F
$uiGrayDarkest = #14191E $uiGrayDarkest: #14191E
// Interface UI Colors // Interface UI Colors
$defaultColor = #98ceff $defaultColor: #98ceff
$hoverColor = #ffffff $hoverColor: #ffffff
$activeColor = #ff8a3d $activeColor: #ff8a3d
$uiBorderColor = #744b71 $uiBorderColor: #744b71
$uiBorderColorDark = #744b71 $uiBorderColorDark: #744b71
$uiBorderColorActive = #ff8a3d $uiBorderColorActive: #ff8a3d
$primaryBackgroundColor = #000000 $primaryBackgroundColor: #000000
$boxBackgroundColor = #5b3a59 $boxBackgroundColor: #5b3a59
$boxBackgroundColorDark = #4b2f40 $boxBackgroundColorDark: #4b2f40
// Text Colors // Text Colors
$textColorActive = #ff8a3d $textColorActive: black
$textPrimaryColor = #ffffff $textPrimaryColor: #ffffff
$textSecondaryColor = #6a8fb1 $textSecondaryColor: #6a8fb1
// Other Colors // Other Colors
$menuBackgroundColor = #F2F2F2 $menuBackgroundColor: #F2F2F2
$imageSliderColor = #4b2c3c //#163239 $imageSliderColor: #4b2c3c //#163239
// Viewport Settings // Viewport Settings
$viewportBorderThickness = 1px $viewportBorderThickness: 1px
$viewportBorderColor = $uiBorderColorDark $viewportBorderColor: $uiBorderColorDark
$viewportBorderColorHover = $uiBorderColor $viewportBorderColorHover: $uiBorderColor
$viewportBorderColorActive = $uiBorderColorActive $viewportBorderColorActive: $uiBorderColorActive
// Sizes // Sizes
$topBarHeight = 40px $topBarHeight: 40px
$toolbarHeight = 78px $toolbarHeight: 78px
$toolbarDrawerHeight = 62px $toolbarDrawerHeight: 62px
// Thicknesses // Thicknesses
$uiBorderThickness = 1px $uiBorderThickness: 1px
// Fonts // Fonts
$logoFontFamily = "Sanchez" $logoFontFamily: "Sanchez"
$logoFontWeight = 300 $logoFontWeight: 300
// Transitions // Transitions
$transitionDuration = 0.3s $transitionDuration: 0.3s
$transitionEffect = ease $transitionEffect: ease
$sidebarTransition = all $transitionDuration $transitionEffect $sidebarTransition: all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth = 307px $studiesSidebarMenuWidth: 307px
$lesionsSidebarMenuWidth = 323px $lesionsSidebarMenuWidth: 323px
}

25
Packages/design/styles/imports/theming.styl Normal file
View File

@ -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)

7
Packages/design/styles/imports/variables.styl
View File

@ -1,2 +1,7 @@
//@import "./theme-tigerlilly.styl" $themes = {}
$defaultTheme = 'tide'
@import "./theming.styl"
@import "./theme-tide.styl" @import "./theme-tide.styl"
@import "./theme-tigerlilly.styl"

12
Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
View File

@ -10,10 +10,13 @@
opacity: 0 opacity: 0
.btn-add .btn-add
background-color: $activeColor // color: $textColorActive
border: 2px solid $uiBorderColor // background-color: $activeColor
// border: 2px solid $uiBorderColor
theme('color', '$textColorActive')
theme('background-color', '$activeColor')
theme('border', '2px solid $uiBorderColor')
border-radius: 14px border-radius: 14px
color: $textColorActive
cursor: pointer cursor: pointer
font-weight: bold font-weight: bold
height: 24px height: 24px
@ -26,6 +29,9 @@
transition(opacity 0.3s ease) transition(opacity 0.3s ease)
white-space: nowrap white-space: nowrap
// / {selector()}
// color: $themes['tide']['uiYellow'] !important
.select-tree-root>.tree-content .select-tree-root>.tree-content
width: 213px width: 213px