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/spacings.styl',
'styles/imports/variables.styl',
'styles/imports/theming.styl',
'styles/imports/theme-tide.styl',
'styles/imports/theme-tigerlilly.styl'
], 'client', {
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
$uiYellow = #E29E4A
$uiSkyBlue = #6FBDE2

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

@ -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
// Transitions
$transitionDuration: 0.3s
$transitionEffect: ease
$sidebarTransition: all $transitionDuration $transitionEffect
$studiesSidebarMenuWidth: 307px
$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)

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

@ -1,2 +1,7 @@
//@import "./theme-tigerlilly.styl"
@import "./theme-tide.styl"
$themes = {}
$defaultTheme = 'tide'
@import "./theming.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
.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