From 12b3411ee29128abce1fe4bf8a8b95d50e585a80 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Fri, 12 Oct 2018 17:06:54 -0400 Subject: [PATCH] change colors and add command to process scss --- embark-ui/package.json | 4 +- embark-ui/src/dark-theme/_variables.scss | 23 +++--- embark-ui/src/dark-theme/bootstrap.scss | 2 +- .../src/dark-theme/bootstrap/_variables.scss | 76 +++++++++---------- .../src/dark-theme/coreui-standalone.scss | 8 +- embark-ui/src/dark-theme/coreui.scss | 2 +- .../src/dark-theme/variables/_colors.scss | 5 ++ .../variables/bootstrap/_variables.scss | 30 ++++---- embark-ui/src/index.js | 4 +- lib/core/logger.js | 2 +- 10 files changed, 83 insertions(+), 73 deletions(-) diff --git a/embark-ui/package.json b/embark-ui/package.json index 194a3d3c4..6b1c9c4af 100644 --- a/embark-ui/package.json +++ b/embark-ui/package.json @@ -40,6 +40,7 @@ "keccakjs": "0.2.1", "monaco-editor": "^0.14.3", "monaco-editor-webpack-plugin": "^1.5.4", + "node-sass": "^4.9.3", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", @@ -73,7 +74,8 @@ "scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", - "test": "node scripts/test.js --env=jsdom" + "test": "node scripts/test.js --env=jsdom", + "css-compile": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/dark-theme/coreui.scss src/coreui.css" }, "homepage": "http://localhost:8000/embark", "jest": { diff --git a/embark-ui/src/dark-theme/_variables.scss b/embark-ui/src/dark-theme/_variables.scss index d7e35bba8..6d4682dfe 100644 --- a/embark-ui/src/dark-theme/_variables.scss +++ b/embark-ui/src/dark-theme/_variables.scss @@ -5,8 +5,8 @@ @import "variables/bootstrap/variables"; // Import Bootstrap variables after customization for use below -@import "node_modules/bootstrap/scss/functions"; // from bootstrap node_modules -@import "node_modules/bootstrap/scss/variables"; // from bootstrap node_modules +@import "../../node_modules/bootstrap/scss/functions"; // from bootstrap node_modules +@import "../../node_modules/bootstrap/scss/variables"; // from bootstrap node_modules // CoreUI Variables @@ -17,7 +17,7 @@ $layout-transition-speed: .25s !default; // Navbar $navbar-height: 55px !default; -$navbar-bg: #fff !default; +$navbar-bg: $dark-border-color !default; $navbar-border: ( bottom: ( size: 1px, @@ -33,9 +33,9 @@ $navbar-brand-minimized-width: 50px !default; $navbar-brand-minimized-bg: $navbar-brand-bg !default; $navbar-brand-minimized-border: $navbar-brand-border !default; -$navbar-color: $gray-600 !default; -$navbar-hover-color: $gray-800 !default; -$navbar-active-color: $gray-800 !default; +$navbar-color: $gray-300 !default; +$navbar-hover-color: $gray-200 !default; +$navbar-active-color: $gray-200 !default; $navbar-disabled-color: $gray-300 !default; $navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; @@ -49,8 +49,8 @@ $sidebar-minimized-width: 50px !default; $sidebar-minimized-height: $sidebar-minimized-width !default; $sidebar-compact-width: 150px !default; $sidebar-compact-height: $sidebar-compact-width !default; -$sidebar-color: #fff !default; -$sidebar-bg: $gray-800 !default; +$sidebar-color: #f3f4f5 !default; +$sidebar-bg: $dark-border-color !default; $sidebar-borders: none !default; $mobile-sidebar-width: 220px !default; @@ -70,6 +70,7 @@ $sidebar-form-placeholder-color: rgba(255,255,255,.7) !default; // Sidebar Navigation +// Not used $sidebar-nav-color: #fff !default; $sidebar-nav-title-padding-y: .75rem !default; $sidebar-nav-title-padding-x: 1rem !default; @@ -130,8 +131,8 @@ $breadcrumb-borders: ( // Aside $aside-menu-width: 250px !default; -$aside-menu-color: $gray-800 !default; -$aside-menu-bg: #fff !default; +$aside-menu-color: #f3f4f5 !default; +$aside-menu-bg: $dark-border-color !default; $aside-menu-borders: ( left: ( size: 1px, @@ -146,7 +147,7 @@ $aside-menu-nav-padding-x: 1rem !default; // Footer $footer-height: 50px !default; -$footer-bg: $gray-100 !default; +$footer-bg: $dark-border-color !default; $footer-color: $body-color !default; $footer-borders: ( top: ( diff --git a/embark-ui/src/dark-theme/bootstrap.scss b/embark-ui/src/dark-theme/bootstrap.scss index 8b642cd45..34564e7be 100644 --- a/embark-ui/src/dark-theme/bootstrap.scss +++ b/embark-ui/src/dark-theme/bootstrap.scss @@ -1,4 +1,4 @@ // Override Boostrap variables @import "variables"; // Import Bootstrap source files -@import "node_modules/bootstrap/scss/bootstrap"; +@import "../../node_modules/bootstrap/scss/bootstrap"; diff --git a/embark-ui/src/dark-theme/bootstrap/_variables.scss b/embark-ui/src/dark-theme/bootstrap/_variables.scss index 5cf118f03..c89079c58 100644 --- a/embark-ui/src/dark-theme/bootstrap/_variables.scss +++ b/embark-ui/src/dark-theme/bootstrap/_variables.scss @@ -158,8 +158,8 @@ $sizes: map-merge( // // Settings for the `` element. -$body-bg: $white !default; -$body-color: $gray-900 !default; +$body-bg: $gray-800 !default; +$body-color: $gray-200 !default; // Links // @@ -223,7 +223,7 @@ $line-height-lg: 1.5 !default; $line-height-sm: 1.5 !default; $border-width: 1px !default; -$border-color: $gray-300 !default; +$border-color: $gray-900 !default; $border-radius: .25rem !default; $border-radius-lg: .3rem !default; @@ -583,16 +583,16 @@ $form-feedback-invalid-color: theme-color("danger") !default; $dropdown-min-width: 10rem !default; $dropdown-padding-y: .5rem !default; $dropdown-spacer: .125rem !default; -$dropdown-bg: $white !default; -$dropdown-border-color: rgba($black, .15) !default; +$dropdown-bg: $dark-border-color !default; +$dropdown-border-color: $gray-900 !default; $dropdown-border-radius: $border-radius !default; $dropdown-border-width: $border-width !default; $dropdown-divider-bg: $gray-200 !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; -$dropdown-link-color: $gray-900 !default; -$dropdown-link-hover-color: darken($gray-900, 5%) !default; -$dropdown-link-hover-bg: $gray-100 !default; +$dropdown-link-color: $gray-200 !default; +$dropdown-link-hover-color: lighten($gray-200, 5%) !default; +$dropdown-link-hover-bg: $gray-800 !default; $dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-bg: $component-active-bg !default; @@ -602,7 +602,7 @@ $dropdown-link-disabled-color: $gray-600 !default; $dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-x: 1.5rem !default; -$dropdown-header-color: $gray-600 !default; +$dropdown-header-color: $gray-200 !default; // Z-index master list @@ -624,13 +624,13 @@ $nav-link-padding-y: .5rem !default; $nav-link-padding-x: 1rem !default; $nav-link-disabled-color: $gray-600 !default; -$nav-tabs-border-color: $gray-300 !default; +$nav-tabs-border-color: $gray-900 !default; $nav-tabs-border-width: $border-width !default; $nav-tabs-border-radius: $border-radius !default; -$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default; -$nav-tabs-link-active-color: $gray-700 !default; +$nav-tabs-link-hover-border-color: $gray-900 $gray-900 $nav-tabs-border-color !default; +$nav-tabs-link-active-color: $blue !default; $nav-tabs-link-active-bg: $body-bg !default; -$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default; +$nav-tabs-link-active-border-color: $gray-900 $gray-900 $nav-tabs-link-active-bg !default; $nav-pills-border-radius: $border-radius !default; $nav-pills-link-active-color: $component-active-color !default; @@ -684,28 +684,28 @@ $pagination-line-height: 1.25 !default; $pagination-color: $link-color !default; $pagination-bg: $white !default; $pagination-border-width: $border-width !default; -$pagination-border-color: $gray-300 !default; +$pagination-border-color: $gray-900 !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; $pagination-focus-outline: 0 !default; $pagination-hover-color: $link-hover-color !default; -$pagination-hover-bg: $gray-200 !default; -$pagination-hover-border-color: $gray-300 !default; +$pagination-hover-bg: $gray-800 !default; +$pagination-hover-border-color: $gray-900 !default; $pagination-active-color: $component-active-color !default; $pagination-active-bg: $component-active-bg !default; $pagination-active-border-color: $pagination-active-bg !default; $pagination-disabled-color: $gray-600 !default; -$pagination-disabled-bg: $white !default; -$pagination-disabled-border-color: $gray-300 !default; +$pagination-disabled-bg: $gray-900 !default; +$pagination-disabled-border-color: $gray-900 !default; // Jumbotron $jumbotron-padding: 2rem !default; -$jumbotron-bg: $gray-200 !default; +$jumbotron-bg: $gray-600 !default; // Cards @@ -714,10 +714,10 @@ $card-spacer-y: .75rem !default; $card-spacer-x: 1.25rem !default; $card-border-width: $border-width !default; $card-border-radius: $border-radius !default; -$card-border-color: rgba($black, .125) !default; +$card-border-color: $gray-900 !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; -$card-cap-bg: rgba($black, .03) !default; -$card-bg: $white !default; +$card-cap-bg: $dark-accent !default; +$card-bg: $dark-border-color !important; $card-img-overlay-padding: 1.25rem !default; @@ -749,10 +749,10 @@ $tooltip-arrow-color: $tooltip-bg !default; // Popovers $popover-font-size: $font-size-sm !default; -$popover-bg: $white !default; +$popover-bg: $dark-border-color !default; $popover-max-width: 276px !default; $popover-border-width: $border-width !default; -$popover-border-color: rgba($black, .2) !default; +$popover-border-color: $gray-900 !default; $popover-border-radius: $border-radius-lg !default; $popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default; @@ -796,8 +796,8 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default; $modal-title-line-height: $line-height-base !default; -$modal-content-bg: $white !default; -$modal-content-border-color: rgba($black, .2) !default; +$modal-content-bg: $dark-border-color !default; +$modal-content-border-color: $gray-900 !default; $modal-content-border-width: $border-width !default; $modal-content-border-radius: $border-radius-lg !default; $modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default; @@ -805,7 +805,7 @@ $modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default; $modal-backdrop-bg: $black !default; $modal-backdrop-opacity: .5 !default; -$modal-header-border-color: $gray-200 !default; +$modal-header-border-color: $dark-accent !default; $modal-footer-border-color: $modal-header-border-color !default; $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; @@ -838,7 +838,7 @@ $alert-color-level: 6 !default; $progress-height: 1rem !default; $progress-font-size: ($font-size-base * .75) !default; -$progress-bg: $gray-200 !default; +$progress-bg: $dark-progress-bg !default; $progress-border-radius: $border-radius !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; $progress-bar-color: $white !default; @@ -848,15 +848,15 @@ $progress-bar-transition: width .6s ease !default; // List group -$list-group-bg: $white !default; -$list-group-border-color: rgba($black, .125) !default; +$list-group-bg: $dark-accent !default; +$list-group-border-color: $gray-900 !default; $list-group-border-width: $border-width !default; $list-group-border-radius: $border-radius !default; $list-group-item-padding-y: .75rem !default; $list-group-item-padding-x: 1.25rem !default; -$list-group-hover-bg: $gray-100 !default; +$list-group-hover-bg: $gray-800 !default; $list-group-active-color: $component-active-color !default; $list-group-active-bg: $component-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default; @@ -864,11 +864,11 @@ $list-group-active-border-color: $list-group-active-bg !default; $list-group-disabled-color: $gray-600 !default; $list-group-disabled-bg: $list-group-bg !default; -$list-group-action-color: $gray-700 !default; +$list-group-action-color: $gray-200 !default; $list-group-action-hover-color: $list-group-action-color !default; $list-group-action-active-color: $body-color !default; -$list-group-action-active-bg: $gray-200 !default; +$list-group-action-active-bg: $gray-400 !default; // Image thumbnails @@ -876,7 +876,7 @@ $list-group-action-active-bg: $gray-200 !default; $thumbnail-padding: .25rem !default; $thumbnail-bg: $body-bg !default; $thumbnail-border-width: $border-width !default; -$thumbnail-border-color: $gray-300 !default; +$thumbnail-border-color: $gray-500 !default; $thumbnail-border-radius: $border-radius !default; $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; @@ -884,7 +884,7 @@ $thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default; // Figures $figure-caption-font-size: 90% !default; -$figure-caption-color: $gray-600 !default; +$figure-caption-color: $gray-400 !default; // Breadcrumbs @@ -895,9 +895,9 @@ $breadcrumb-item-padding: .5rem !default; $breadcrumb-margin-bottom: 1rem !default; -$breadcrumb-bg: $gray-200 !default; -$breadcrumb-divider-color: $gray-600 !default; -$breadcrumb-active-color: $gray-600 !default; +$breadcrumb-bg: $dark-border-color !default; +$breadcrumb-divider-color: #f3f4f5 !default; +$breadcrumb-active-color: $gray-200 !default; $breadcrumb-divider: quote("/") !default; $breadcrumb-border-radius: $border-radius !default; diff --git a/embark-ui/src/dark-theme/coreui-standalone.scss b/embark-ui/src/dark-theme/coreui-standalone.scss index 816b8d5eb..076fd556e 100644 --- a/embark-ui/src/dark-theme/coreui-standalone.scss +++ b/embark-ui/src/dark-theme/coreui-standalone.scss @@ -10,9 +10,9 @@ @import "variables"; // Import Bootstrap source files -@import "node_modules/bootstrap/scss/functions"; -@import "node_modules/bootstrap/scss/variables"; -@import "node_modules/bootstrap/scss/mixins"; +@import "../../node_modules/bootstrap/scss/functions"; +@import "../../node_modules/bootstrap/scss/variables"; +@import "../../node_modules/bootstrap/scss/mixins"; // Import core styles @import "mixins"; @@ -62,4 +62,4 @@ @import "rtl"; // Custom Properties support for Internet Explorer -@import "ie-custom-properties" +@import "ie-custom-properties"; diff --git a/embark-ui/src/dark-theme/coreui.scss b/embark-ui/src/dark-theme/coreui.scss index f9ea761c8..559061069 100644 --- a/embark-ui/src/dark-theme/coreui.scss +++ b/embark-ui/src/dark-theme/coreui.scss @@ -10,7 +10,7 @@ @import "variables"; // Import Bootstrap source files -@import "node_modules/bootstrap/scss/bootstrap"; // from bootstrap node_modules +@import "../../node_modules/bootstrap/scss/bootstrap"; // from bootstrap node_modules // Mixins @import "mixins"; diff --git a/embark-ui/src/dark-theme/variables/_colors.scss b/embark-ui/src/dark-theme/variables/_colors.scss index 6b9b26f53..d39d68e8f 100644 --- a/embark-ui/src/dark-theme/variables/_colors.scss +++ b/embark-ui/src/dark-theme/variables/_colors.scss @@ -14,6 +14,11 @@ $gray-800: #2f353a !default; // lighten($gray-base, 10%); $gray-900: #23282c !default; // lighten($gray-base, 5%); $black: #000 !default; +$dark-border-color: #3a4149; +$dark-bg-color: #30353b; +$dark-progress-bg: #515b65; +$dark-accent: #343b41; + $grays: () !default; $grays: map-merge( ( diff --git a/embark-ui/src/dark-theme/variables/bootstrap/_variables.scss b/embark-ui/src/dark-theme/variables/bootstrap/_variables.scss index 29b1ffb13..6ac96995c 100644 --- a/embark-ui/src/dark-theme/variables/bootstrap/_variables.scss +++ b/embark-ui/src/dark-theme/variables/bootstrap/_variables.scss @@ -11,13 +11,13 @@ $enable-transitions: true !default; // // Settings for the `` element. -$body-bg: #e4e5e6 !default; +$body-bg: $gray-800 !default; // Components // // Define common padding and border radius sizes and more. -$border-color: $gray-300 !default; +$border-color: $gray-900 !default; // Typography // @@ -27,36 +27,36 @@ $font-size-base: .875rem !default; // Breadcrumbs -$breadcrumb-bg: #fff !default; +$breadcrumb-bg: $dark-border-color !default; $breadcrumb-margin-bottom: 1.5rem !default; $breadcrumb-border-radius: 0 !default; // Cards -$card-border-color: $gray-300 !default; -$card-cap-bg: $gray-100 !default; +$card-border-color: $gray-900 !default; +$card-cap-bg: #343b41 !default; // Dropdowns $dropdown-padding-y: 0 !default; -$dropdown-border-color: $gray-300 !default; -$dropdown-divider-bg: $gray-200 !default; +$dropdown-border-color: $dark-border-color !default; +$dropdown-divider-bg: $dark-border-color !default; // Buttons -$btn-secondary-border: $gray-300 !default; +$btn-secondary-border: $gray-600 !default; // Progress bars -$progress-bg: $gray-100 !default; +$progress-bg: $dark-progress-bg !default; // Tables - -$table-bg-accent: $gray-100 !default; -$table-bg-hover: $gray-100 !default; +// Not used right now +$table-bg-accent: $dark-accent !default; +$table-bg-hover: $dark-accent !default; // Forms -$input-group-addon-bg: $gray-100 !default; -$input-border-color: $gray-200 !default; -$input-group-addon-border-color: $gray-200 !default; +$input-group-addon-bg: $dark-accent !default; +$input-border-color: $gray-900 !default; +$input-group-addon-border-color: $gray-900 !default; diff --git a/embark-ui/src/index.js b/embark-ui/src/index.js index 9e9dd9219..65addd9a1 100644 --- a/embark-ui/src/index.js +++ b/embark-ui/src/index.js @@ -4,7 +4,9 @@ import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import 'font-awesome/css/font-awesome.min.css'; -import '@coreui/coreui/dist/css/coreui.min.css'; +import './coreui.css'; +// import './dark-theme/coreui-standalone.scss'; +// import '@coreui/coreui/dist/css/coreui.min.css'; import './index.css'; import AppContainer from './containers/AppContainer'; diff --git a/lib/core/logger.js b/lib/core/logger.js index 6e8981c95..0f6a1eba3 100644 --- a/lib/core/logger.js +++ b/lib/core/logger.js @@ -59,7 +59,7 @@ class Logger { logs.slice(limit * -1); } return logs; - }; + } } Logger.logLevels = {