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

LT 281: Users shall be able to switch between themes (#45)

Browse Source 
* LT-281: Users shall be able to switch between themes

* Avoiding compatibility issues

* Typo fixing
This commit is contained in:
Eloízio Salgado authored and Erik Ziegler committed 2016-11-15 08:24:30 +01:00
1 parent 0ba77cd0b1
commit 20a2a8e453
21 files changed
+402 -17
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/ohif-design/app.styl
+1
View File
@@ -2,3 +2,4 @@
@import "{design}/styles/imports/mixins"
@import "{design}/styles/imports/spacings"
@import "{design}/styles/imports/variables"
@import "{design}/styles/imports/theme-icons"
Packages/ohif-design/assets/theme-icons.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

Packages/ohif-design/package.js
+10 -2
View File
@@ -12,6 +12,8 @@ Package.onUse(function(api) {
api.use('jquery');
api.use('stylus');
api.addAssets('assets/theme-icons.png', 'client');
// Importable colors / typography settings
api.addFiles([
'app.styl',
@@ -19,8 +21,14 @@ Package.onUse(function(api) {
'styles/imports/spacings.styl',
'styles/imports/variables.styl',
'styles/imports/theming.styl',
'styles/imports/theme-tide.styl',
'styles/imports/theme-tigerlilly.styl'
'styles/imports/theme-icons.styl',
'styles/imports/themes/theme-tide.styl',
'styles/imports/themes/theme-tigerlily.styl',
'styles/imports/themes/theme-crickets.styl',
'styles/imports/themes/theme-honeycomb.styl',
'styles/imports/themes/theme-mint.styl',
'styles/imports/themes/theme-overcast.styl',
'styles/imports/themes/theme-quartz.styl'
], 'client', {
isImport: true
});
Packages/ohif-design/styles/imports/theme-icons.styl
+47
View File
@@ -0,0 +1,47 @@
.theme-icon-crickets
.theme-icon-tide
.theme-icon-tigerlily
.theme-icon-quartz
.theme-icon-overcast
.theme-icon-mint
.theme-icon-honeycomb
display: inline-block
background: url('/packages/design/assets/theme-icons.png') no-repeat
overflow: hidden
text-indent: -9999px
text-align: left
.theme-icon-crickets
background-position: -0px -0px
width: 64px
height: 56px
.theme-icon-tide
background-position: -0px -56px
width: 64px
height: 54px
.theme-icon-tigerlily
background-position: -0px -110px
width: 62px
height: 61px
.theme-icon-quartz
background-position: -0px -171px
width: 59px
height: 64px
.theme-icon-overcast
background-position: -0px -235px
width: 58px
height: 37px
.theme-icon-mint
background-position: -0px -272px
width: 57px
height: 61px
.theme-icon-honeycomb
background-position: -0px -333px
width: 50px
height: 58px
Packages/ohif-design/styles/imports/themes/theme-crickets.styl
+35
View File
@@ -0,0 +1,35 @@
$themes['crickets'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #2B141B
$uiGrayDarker: #231C1E
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #92C2DA
$hoverColor: #ffffff
$activeColor: #D4C3C1
$uiBorderColor: #537B76
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #d4aaa5
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #8BE7B5
$largeNumbersColor: #D47C66
// Other Colors
$imageSliderColor: #163239
}
Packages/ohif-design/styles/imports/themes/theme-honeycomb.styl
+35
View File
@@ -0,0 +1,35 @@
$themes['honeycomb'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #252228
$uiGrayDarker: #18161A
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #B5B5B5
$hoverColor: #ffffff
$activeColor: #CDA56B
$uiBorderColor: #623337
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #ce9e59
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #FAB797
$largeNumbersColor: #D47C66
// Other Colors
$imageSliderColor: #163239
}
Packages/ohif-design/styles/imports/themes/theme-mint.styl
+35
View File
@@ -0,0 +1,35 @@
$themes['mint'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #1D232A
$uiGrayDarker: #15191E
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #A7E9B3
$hoverColor: #ffffff
$activeColor: #31B166
$uiBorderColor: #214529
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #23b15d
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #A7E9B3
$largeNumbersColor: #76D27D
// Other Colors
$imageSliderColor: #163239
}
Packages/ohif-design/styles/imports/themes/theme-overcast.styl
+35
View File
@@ -0,0 +1,35 @@
$themes['overcast'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #252228
$uiGrayDarker: #15191E
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #9CBECF
$hoverColor: #ffffff
$activeColor: #507D80
$uiBorderColor: #404040
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #467c80
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #73F2FC
$largeNumbersColor: #74F1FA
// Other Colors
$imageSliderColor: #163239
}
Packages/ohif-design/styles/imports/themes/theme-quartz.styl
+35
View File
@@ -0,0 +1,35 @@
$themes['quartz'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
// State pallete
$uiStateError: #FFCCCC
$uiStateErrorBorder: #993333
$uiStateErrorText: #661111
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #2B2E3F
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #8EA2A4
$hoverColor: #ffffff
$activeColor: #7858CE
$uiBorderColor: #885B86
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #6843cc
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #D7E8FE
$largeNumbersColor: #ABCDF6
// Other Colors
$imageSliderColor: #163239
}
Packages/ohif-design/styles/imports/theme-tide.styl → Packages/ohif-design/styles/imports/themes/theme-tide.styl
+6 -5
View File
@@ -15,19 +15,20 @@ $themes['tide'] = {
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #9cd0fe
$defaultColor: #9CCEF9
$hoverColor: #ffffff
$activeColor: #00a4d9
$uiBorderColor: #436270
$activeColor: #20A5D6
$uiBorderColor: #44626F
$uiBorderColorDark: #3C5D80
$uiBorderColorActive: #00a4d9
$primaryBackgroundColor: #000000
$boxBackgroundColor: #344a61
// Text Colors
$textColorActive: black //#89bae5
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #6a8fb1
$textSecondaryColor: #91B9CD
$largeNumbersColor: #6FBDE2
// Other Colors
$imageSliderColor: #163239
Packages/ohif-design/styles/imports/theme-tigerlilly.styl → Packages/ohif-design/styles/imports/themes/theme-tigerlily.styl
+7 -6
View File
@@ -1,4 +1,4 @@
$themes['tigerlilly'] = {
$themes['tigerlily'] = {
// Common pallete
$uiYellow: #E29E4A
$uiSkyBlue: #6FBDE2
@@ -10,15 +10,15 @@ $themes['tigerlilly'] = {
$uiGrayLight: #516873
$uiGray: #263340
$uiGrayDark: #16202B
$uiGrayDark: #26333F
$uiGrayDarker: #151A1F
$uiGrayDarkest: #14191E
// Interface UI Colors
$defaultColor: #98ceff
$defaultColor: #9ACFFD
$hoverColor: #ffffff
$activeColor: #ff8a3d
$uiBorderColor: #744b71
$activeColor: #fa8947
$uiBorderColor: #875a86
$uiBorderColorDark: #744b71
$uiBorderColorActive: #ff8a3d
$primaryBackgroundColor: #000000
@@ -27,7 +27,8 @@ $themes['tigerlilly'] = {
// Text Colors
$textColorActive: black
$textPrimaryColor: #ffffff
$textSecondaryColor: #6a8fb1
$textSecondaryColor: #9CCDF8
$largeNumbersColor: #D47C66
// Other Colors
$imageSliderColor: #4b2c3c //#163239
Packages/ohif-design/styles/imports/theming.styl
+7 -2
View File
@@ -2,8 +2,13 @@ $themes = {}
$defaultTheme = 'tide'
// Import the theme variables
@import "./theme-tide.styl"
@import "./theme-tigerlilly.styl"
@import "./themes/theme-tide.styl"
@import "./themes/theme-tigerlily.styl"
@import "./themes/theme-crickets.styl"
@import "./themes/theme-honeycomb.styl"
@import "./themes/theme-mint.styl"
@import "./themes/theme-overcast.styl"
@import "./themes/theme-quartz.styl"
/*
* Process each theme variable in the given value, splitting it by space