change colors and add command to process scss

This commit is contained in:
Jonathan Rainville 2018-10-12 17:06:54 -04:00 committed by Pascal Precht
parent f41e9ad1ce
commit 12b3411ee2
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
10 changed files with 83 additions and 73 deletions

View File

@ -40,6 +40,7 @@
"keccakjs": "0.2.1", "keccakjs": "0.2.1",
"monaco-editor": "^0.14.3", "monaco-editor": "^0.14.3",
"monaco-editor-webpack-plugin": "^1.5.4", "monaco-editor-webpack-plugin": "^1.5.4",
"node-sass": "^4.9.3",
"object-assign": "4.1.1", "object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0", "postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8", "postcss-loader": "2.0.8",
@ -73,7 +74,8 @@
"scripts": { "scripts": {
"start": "node scripts/start.js", "start": "node scripts/start.js",
"build": "node scripts/build.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", "homepage": "http://localhost:8000/embark",
"jest": { "jest": {

View File

@ -5,8 +5,8 @@
@import "variables/bootstrap/variables"; @import "variables/bootstrap/variables";
// Import Bootstrap variables after customization for use below // Import Bootstrap variables after customization for use below
@import "node_modules/bootstrap/scss/functions"; // from bootstrap node_modules @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/variables"; // from bootstrap node_modules
// CoreUI Variables // CoreUI Variables
@ -17,7 +17,7 @@ $layout-transition-speed: .25s !default;
// Navbar // Navbar
$navbar-height: 55px !default; $navbar-height: 55px !default;
$navbar-bg: #fff !default; $navbar-bg: $dark-border-color !default;
$navbar-border: ( $navbar-border: (
bottom: ( bottom: (
size: 1px, size: 1px,
@ -33,9 +33,9 @@ $navbar-brand-minimized-width: 50px !default;
$navbar-brand-minimized-bg: $navbar-brand-bg !default; $navbar-brand-minimized-bg: $navbar-brand-bg !default;
$navbar-brand-minimized-border: $navbar-brand-border !default; $navbar-brand-minimized-border: $navbar-brand-border !default;
$navbar-color: $gray-600 !default; $navbar-color: $gray-300 !default;
$navbar-hover-color: $gray-800 !default; $navbar-hover-color: $gray-200 !default;
$navbar-active-color: $gray-800 !default; $navbar-active-color: $gray-200 !default;
$navbar-disabled-color: $gray-300 !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; $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-minimized-height: $sidebar-minimized-width !default;
$sidebar-compact-width: 150px !default; $sidebar-compact-width: 150px !default;
$sidebar-compact-height: $sidebar-compact-width !default; $sidebar-compact-height: $sidebar-compact-width !default;
$sidebar-color: #fff !default; $sidebar-color: #f3f4f5 !default;
$sidebar-bg: $gray-800 !default; $sidebar-bg: $dark-border-color !default;
$sidebar-borders: none !default; $sidebar-borders: none !default;
$mobile-sidebar-width: 220px !default; $mobile-sidebar-width: 220px !default;
@ -70,6 +70,7 @@ $sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
// Sidebar Navigation // Sidebar Navigation
// Not used
$sidebar-nav-color: #fff !default; $sidebar-nav-color: #fff !default;
$sidebar-nav-title-padding-y: .75rem !default; $sidebar-nav-title-padding-y: .75rem !default;
$sidebar-nav-title-padding-x: 1rem !default; $sidebar-nav-title-padding-x: 1rem !default;
@ -130,8 +131,8 @@ $breadcrumb-borders: (
// Aside // Aside
$aside-menu-width: 250px !default; $aside-menu-width: 250px !default;
$aside-menu-color: $gray-800 !default; $aside-menu-color: #f3f4f5 !default;
$aside-menu-bg: #fff !default; $aside-menu-bg: $dark-border-color !default;
$aside-menu-borders: ( $aside-menu-borders: (
left: ( left: (
size: 1px, size: 1px,
@ -146,7 +147,7 @@ $aside-menu-nav-padding-x: 1rem !default;
// Footer // Footer
$footer-height: 50px !default; $footer-height: 50px !default;
$footer-bg: $gray-100 !default; $footer-bg: $dark-border-color !default;
$footer-color: $body-color !default; $footer-color: $body-color !default;
$footer-borders: ( $footer-borders: (
top: ( top: (

View File

@ -1,4 +1,4 @@
// Override Boostrap variables // Override Boostrap variables
@import "variables"; @import "variables";
// Import Bootstrap source files // Import Bootstrap source files
@import "node_modules/bootstrap/scss/bootstrap"; @import "../../node_modules/bootstrap/scss/bootstrap";

View File

@ -158,8 +158,8 @@ $sizes: map-merge(
// //
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-bg: $white !default; $body-bg: $gray-800 !default;
$body-color: $gray-900 !default; $body-color: $gray-200 !default;
// Links // Links
// //
@ -223,7 +223,7 @@ $line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default; $line-height-sm: 1.5 !default;
$border-width: 1px !default; $border-width: 1px !default;
$border-color: $gray-300 !default; $border-color: $gray-900 !default;
$border-radius: .25rem !default; $border-radius: .25rem !default;
$border-radius-lg: .3rem !default; $border-radius-lg: .3rem !default;
@ -583,16 +583,16 @@ $form-feedback-invalid-color: theme-color("danger") !default;
$dropdown-min-width: 10rem !default; $dropdown-min-width: 10rem !default;
$dropdown-padding-y: .5rem !default; $dropdown-padding-y: .5rem !default;
$dropdown-spacer: .125rem !default; $dropdown-spacer: .125rem !default;
$dropdown-bg: $white !default; $dropdown-bg: $dark-border-color !default;
$dropdown-border-color: rgba($black, .15) !default; $dropdown-border-color: $gray-900 !default;
$dropdown-border-radius: $border-radius !default; $dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default; $dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-200 !default; $dropdown-divider-bg: $gray-200 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
$dropdown-link-color: $gray-900 !default; $dropdown-link-color: $gray-200 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default; $dropdown-link-hover-color: lighten($gray-200, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default; $dropdown-link-hover-bg: $gray-800 !default;
$dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !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-y: .25rem !default;
$dropdown-item-padding-x: 1.5rem !default; $dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-600 !default; $dropdown-header-color: $gray-200 !default;
// Z-index master list // Z-index master list
@ -624,13 +624,13 @@ $nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default; $nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-600 !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-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !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-hover-border-color: $gray-900 $gray-900 $nav-tabs-border-color !default;
$nav-tabs-link-active-color: $gray-700 !default; $nav-tabs-link-active-color: $blue !default;
$nav-tabs-link-active-bg: $body-bg !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-border-radius: $border-radius !default;
$nav-pills-link-active-color: $component-active-color !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-color: $link-color !default;
$pagination-bg: $white !default; $pagination-bg: $white !default;
$pagination-border-width: $border-width !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-box-shadow: $input-btn-focus-box-shadow !default;
$pagination-focus-outline: 0 !default; $pagination-focus-outline: 0 !default;
$pagination-hover-color: $link-hover-color !default; $pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-200 !default; $pagination-hover-bg: $gray-800 !default;
$pagination-hover-border-color: $gray-300 !default; $pagination-hover-border-color: $gray-900 !default;
$pagination-active-color: $component-active-color !default; $pagination-active-color: $component-active-color !default;
$pagination-active-bg: $component-active-bg !default; $pagination-active-bg: $component-active-bg !default;
$pagination-active-border-color: $pagination-active-bg !default; $pagination-active-border-color: $pagination-active-bg !default;
$pagination-disabled-color: $gray-600 !default; $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default; $pagination-disabled-bg: $gray-900 !default;
$pagination-disabled-border-color: $gray-300 !default; $pagination-disabled-border-color: $gray-900 !default;
// Jumbotron // Jumbotron
$jumbotron-padding: 2rem !default; $jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-200 !default; $jumbotron-bg: $gray-600 !default;
// Cards // Cards
@ -714,10 +714,10 @@ $card-spacer-y: .75rem !default;
$card-spacer-x: 1.25rem !default; $card-spacer-x: 1.25rem !default;
$card-border-width: $border-width !default; $card-border-width: $border-width !default;
$card-border-radius: $border-radius !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-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: rgba($black, .03) !default; $card-cap-bg: $dark-accent !default;
$card-bg: $white !default; $card-bg: $dark-border-color !important;
$card-img-overlay-padding: 1.25rem !default; $card-img-overlay-padding: 1.25rem !default;
@ -749,10 +749,10 @@ $tooltip-arrow-color: $tooltip-bg !default;
// Popovers // Popovers
$popover-font-size: $font-size-sm !default; $popover-font-size: $font-size-sm !default;
$popover-bg: $white !default; $popover-bg: $dark-border-color !default;
$popover-max-width: 276px !default; $popover-max-width: 276px !default;
$popover-border-width: $border-width !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-border-radius: $border-radius-lg !default;
$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !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-title-line-height: $line-height-base !default;
$modal-content-bg: $white !default; $modal-content-bg: $dark-border-color !default;
$modal-content-border-color: rgba($black, .2) !default; $modal-content-border-color: $gray-900 !default;
$modal-content-border-width: $border-width !default; $modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default; $modal-content-border-radius: $border-radius-lg !default;
$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !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-bg: $black !default;
$modal-backdrop-opacity: .5 !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-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default; $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-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-height: 1rem !default;
$progress-font-size: ($font-size-base * .75) !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-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
$progress-bar-color: $white !default; $progress-bar-color: $white !default;
@ -848,15 +848,15 @@ $progress-bar-transition: width .6s ease !default;
// List group // List group
$list-group-bg: $white !default; $list-group-bg: $dark-accent !default;
$list-group-border-color: rgba($black, .125) !default; $list-group-border-color: $gray-900 !default;
$list-group-border-width: $border-width !default; $list-group-border-width: $border-width !default;
$list-group-border-radius: $border-radius !default; $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default; $list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !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-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default; $list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-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-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !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-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $body-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 // Image thumbnails
@ -876,7 +876,7 @@ $list-group-action-active-bg: $gray-200 !default;
$thumbnail-padding: .25rem !default; $thumbnail-padding: .25rem !default;
$thumbnail-bg: $body-bg !default; $thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !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-border-radius: $border-radius !default;
$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !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 // Figures
$figure-caption-font-size: 90% !default; $figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-600 !default; $figure-caption-color: $gray-400 !default;
// Breadcrumbs // Breadcrumbs
@ -895,9 +895,9 @@ $breadcrumb-item-padding: .5rem !default;
$breadcrumb-margin-bottom: 1rem !default; $breadcrumb-margin-bottom: 1rem !default;
$breadcrumb-bg: $gray-200 !default; $breadcrumb-bg: $dark-border-color !default;
$breadcrumb-divider-color: $gray-600 !default; $breadcrumb-divider-color: #f3f4f5 !default;
$breadcrumb-active-color: $gray-600 !default; $breadcrumb-active-color: $gray-200 !default;
$breadcrumb-divider: quote("/") !default; $breadcrumb-divider: quote("/") !default;
$breadcrumb-border-radius: $border-radius !default; $breadcrumb-border-radius: $border-radius !default;

View File

@ -10,9 +10,9 @@
@import "variables"; @import "variables";
// Import Bootstrap source files // Import Bootstrap source files
@import "node_modules/bootstrap/scss/functions"; @import "../../node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables"; @import "../../node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins"; @import "../../node_modules/bootstrap/scss/mixins";
// Import core styles // Import core styles
@import "mixins"; @import "mixins";
@ -62,4 +62,4 @@
@import "rtl"; @import "rtl";
// Custom Properties support for Internet Explorer // Custom Properties support for Internet Explorer
@import "ie-custom-properties" @import "ie-custom-properties";

View File

@ -10,7 +10,7 @@
@import "variables"; @import "variables";
// Import Bootstrap source files // 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 // Mixins
@import "mixins"; @import "mixins";

View File

@ -14,6 +14,11 @@ $gray-800: #2f353a !default; // lighten($gray-base, 10%);
$gray-900: #23282c !default; // lighten($gray-base, 5%); $gray-900: #23282c !default; // lighten($gray-base, 5%);
$black: #000 !default; $black: #000 !default;
$dark-border-color: #3a4149;
$dark-bg-color: #30353b;
$dark-progress-bg: #515b65;
$dark-accent: #343b41;
$grays: () !default; $grays: () !default;
$grays: map-merge( $grays: map-merge(
( (

View File

@ -11,13 +11,13 @@ $enable-transitions: true !default;
// //
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-bg: #e4e5e6 !default; $body-bg: $gray-800 !default;
// Components // Components
// //
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
$border-color: $gray-300 !default; $border-color: $gray-900 !default;
// Typography // Typography
// //
@ -27,36 +27,36 @@ $font-size-base: .875rem !default;
// Breadcrumbs // Breadcrumbs
$breadcrumb-bg: #fff !default; $breadcrumb-bg: $dark-border-color !default;
$breadcrumb-margin-bottom: 1.5rem !default; $breadcrumb-margin-bottom: 1.5rem !default;
$breadcrumb-border-radius: 0 !default; $breadcrumb-border-radius: 0 !default;
// Cards // Cards
$card-border-color: $gray-300 !default; $card-border-color: $gray-900 !default;
$card-cap-bg: $gray-100 !default; $card-cap-bg: #343b41 !default;
// Dropdowns // Dropdowns
$dropdown-padding-y: 0 !default; $dropdown-padding-y: 0 !default;
$dropdown-border-color: $gray-300 !default; $dropdown-border-color: $dark-border-color !default;
$dropdown-divider-bg: $gray-200 !default; $dropdown-divider-bg: $dark-border-color !default;
// Buttons // Buttons
$btn-secondary-border: $gray-300 !default; $btn-secondary-border: $gray-600 !default;
// Progress bars // Progress bars
$progress-bg: $gray-100 !default; $progress-bg: $dark-progress-bg !default;
// Tables // Tables
// Not used right now
$table-bg-accent: $gray-100 !default; $table-bg-accent: $dark-accent !default;
$table-bg-hover: $gray-100 !default; $table-bg-hover: $dark-accent !default;
// Forms // Forms
$input-group-addon-bg: $gray-100 !default; $input-group-addon-bg: $dark-accent !default;
$input-border-color: $gray-200 !default; $input-border-color: $gray-900 !default;
$input-group-addon-border-color: $gray-200 !default; $input-group-addon-border-color: $gray-900 !default;

View File

@ -4,7 +4,9 @@ import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'; import {Provider} from 'react-redux';
import 'font-awesome/css/font-awesome.min.css'; 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 './index.css';
import AppContainer from './containers/AppContainer'; import AppContainer from './containers/AppContainer';

View File

@ -59,7 +59,7 @@ class Logger {
logs.slice(limit * -1); logs.slice(limit * -1);
} }
return logs; return logs;
}; }
} }
Logger.logLevels = { Logger.logLevels = {