refactor build config

src/browser/shared/styles/_vars.styl

@@ -0,0 +1,86 @@
+// Basic Vars(MUST BE CAMELCASED ATOM VARS)
+$textColor= #99B2B8
+$textColorHighlight= #D5DFE2
+$textColorSelected = #FFFFFF
+
+$textColorInfo= #6494ED
+$textColorSuccess= #73C990
+$textColorWarning= #E2C08D
+$textColorError= #FF6347
+
+$backgroundColorHighlight= #003B4A
+$backgroundColorSelected= #004B5F
+$appBackgroundColor= #001F27
+
+$baseBackgroundColor= #002B36
+$baseBorderColor= #001A20
+
+$inputBackgroundColor= #00222B
+$inputBorderColor= #001A20
+
+$buttonBackgroundColor= #004355
+$buttonBackgroundColorHover= #004B5F
+$buttonBackgroundColorSelected= #52DCFF
+$buttonBorderColor= $baseBorderColor
+
+$block= #00222B
+
+//buttons
+$btnPrimary= #088CFF
+$btnInfo= #5BDEFF
+$btnSuccess= #22BD89
+$btnWarning= #CD8737
+$btnError= #DA2828
+
+
+// Bootstrap Overrides(MUST BE BUILT WITH BASIC VALUE ONLY)
+$brand-primary= $btnPrimary
+$brand-info= $btnInfo
+$brand-success= $btnSuccess
+$brand-warning= $btnWarning
+$brand-danger= $btnError
+
+$btn-default-bg= $buttonBackgroundColor
+$btn-default-color= $textColor
+$btn-default-border= $baseBorderColor
+
+$link-color= $textColorHighlight
+
+$nav-link-active-link-hover-bg= $backgroundColorHighlight
+$nav-pills-active-link-hover-color= $textColorHighlight
+$nav-link-hover-bg= $backgroundColorHighlight
+
+$input-bg= $backgroundColorHighlight
+$input-border= $baseBorderColor
+$input-border-focus= $buttonBackgroundColorSelected
+$input-color= $textColorSelected
+
+$dropdown-bg= $baseBackgroundColor
+$dropdown-border= $baseBorderColor
+$dropdown-link-color= $textColor
+$dropdown-link-hover-bg= $backgroundColorSelected
+$dropdown-link-hover-color= $textColorSelected
+
+$modal-content-bg= $baseBackgroundColor
+$modal-content-border-color= $modal-header-border-color= $modal-footer-border-color= $baseBorderColor
+
+$jumbotron-bg= $backgroundColorHighlight
+
+$alert-danger-bg= $textColorError
+$alert-danger-border= dark($alert-danger-bg) ? darken($alert-danger-bg, 5%) : lighten($alert-danger-bg, 5%)
+$alert-danger-text= $textColorSelected
+
+$alert-info-bg= $textColorInfo
+$alert-info-border= dark($alert-info-bg) ? darken($alert-info-bg, 5%) : lighten($alert-info-bg, 5%)
+$alert-info-text= $textColorSelected
+
+$alert-success-bg= $textColorSuccess
+$alert-success-border= dark($alert-success-bg) ? darken($alert-success-bg, 5%) : lighten($alert-success-bg, 5%)
+$alert-success-text= $textColorSelected
+
+$alert-warning-bg= $textColorWarning
+$alert-warning-border= dark($alert-warning-bg) ? darken($alert-warning-bg, 5%) : lighten($alert-warning-bg, 5%)
+$alert-warning-text= $textColorSelected
+
+$panel-bg= $baseBackgroundColor
+$panel-default-border= $baseBorderColor