feat(themes): add new Dark theme!

akveo · May 20, 2019 · 43e63d3 · 43e63d3
1 parent 3b00118
commit 43e63d3
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 72 deletions.
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.scss b/docs/app/blocks/components/live-example-block/live-example-block.component.scss
@@ -8,8 +8,10 @@
   $action-fg: nb-theme(color-fg-heading-light);
   $block-bg-default: #f7f8fa;
   $block-bg-cosmic: #292766;
-  $block-bg-corporate: #f7f8fa;
   $block-fg-cosmic: #e8e9fa;
+  $block-bg-corporate: #f7f8fa;
+  $block-bg-dark: #232a39;
+  $block-fg-dark: #f7f8fa;
 
   display: flex;
   flex-direction: column;
@@ -102,8 +104,13 @@
     .title {
       color: white;
     }
-    .action-item {
-      color: $block-fg-cosmic;
+  }
+
+  &.theme-dark {
+    background-color: $block-bg-dark;
+
+    .title {
+      color: white;
     }
   }
 

diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
@@ -45,11 +45,17 @@ export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDe
     return this.currentTheme === 'corporate';
   }
 
+  @HostBinding('class.theme-dark')
+  private get isDark() {
+    return this.currentTheme === 'dark';
+  }
+
   iframeHeight = 0;
   alive: boolean = true;
 
   themes: {label: string; value: string}[] = [
     { label: 'Default', value: 'default' },
+    { label: 'Dark', value: 'dark' },
     { label: 'Cosmic', value: 'cosmic' },
     { label: 'Corporate', value: 'corporate' },
   ];

diff --git a/docs/articles/auth-install.md b/docs/articles/auth-install.md
@@ -141,7 +141,7 @@ Last but not least - install the component styles into your styles.scss ([more d
 
 ```
 
-`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, cosmic, corporate). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this:
+`@import '~@nebular/auth/styles/all'` means import auth styles for all themes (default, dark, corporate, cosmic). If you have only one or portion of themes enabled, then you need to import auth styles only for enabled themes. For example, when only default and corporate themes enabled, auth imports should look like this:
 ```scss
 @import '~@nebular/auth/styles/themes/default';
 @import '~@nebular/auth/styles/themes/corporate';

diff --git a/docs/articles/bootstrap-integration.md b/docs/articles/bootstrap-integration.md
@@ -29,9 +29,10 @@ Then if you just want to use predefined themes you have to import prebuilt style
 
 ```json
 "styles": [
-  "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css",
+  "node_modules/@nebular/bootstrap/styles/prebuilt/dark.css",
   "node_modules/@nebular/bootstrap/styles/prebuilt/default.css",
   "node_modules/@nebular/bootstrap/styles/prebuilt/corporate.css",
+  "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css"
 ]
 ```
 

diff --git a/docs/articles/concept-theme-system.md b/docs/articles/concept-theme-system.md
@@ -93,10 +93,11 @@ Depending on the currently enabled theme and the way `card-bg` inherited in your
 
 Currently, there are 3 built-in themes: 
 - `default` - clean white theme
-- `cosmic` - dark theme
+- `dark` - dark theme
+- `cosmic` - alternative dark violet theme
 - `corporate` - firm business theme
 
-Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme.
+Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `dark` theme.
 <hr>
 
 ## Magic of multiple themes with hot-reload

diff --git a/src/app/layout-theme-toggle/layout-theme-toggle.component.ts b/src/app/layout-theme-toggle/layout-theme-toggle.component.ts
@@ -6,8 +6,9 @@ import { NbThemeService } from '@nebular/theme';
   styleUrls: ['./layout-theme-toggle.component.scss'],
   template: `
     <label dir="ltr">
-      <button (click)="enable('cosmic')">Cosmic</button>
       <button (click)="enable('default')">Default</button>
+      <button (click)="enable('dark')">Dark</button>
+      <button (click)="enable('cosmic')">Cosmic</button>
       <button (click)="enable('corporate')">Corporate</button>
     </label>
   `,

diff --git a/src/framework/theme/styles/_themes.scss b/src/framework/theme/styles/_themes.scss
@@ -1,3 +1,4 @@
 @import 'themes/default';
+@import 'themes/dark';
 @import 'themes/cosmic';
 @import 'themes/corporate';
diff --git a/src/framework/theme/styles/prebuilt/dark.scss b/src/framework/theme/styles/prebuilt/dark.scss
@@ -0,0 +1,7 @@
+@import '../all';
+
+$nb-enabled-themes: (dark);
+
+@include nb-install() {
+  @include nb-theme-global();
+};
diff --git a/src/framework/theme/styles/themes/_cosmic.scss b/src/framework/theme/styles/themes/_cosmic.scss
@@ -6,7 +6,7 @@
 
 @import '../core/functions';
 @import '../core/mixins';
-@import 'default';
+@import 'dark';
 
 $theme: (
 
@@ -20,46 +20,6 @@ $theme: (
   color-primary-800: #240f7a,
   color-primary-900: #180957,
 
-  color-success-100: #edfff3,
-  color-success-200: #b3ffd6,
-  color-success-300: #8cfac7,
-  color-success-400: #51f0b0,
-  color-success-500: #00e096,
-  color-success-600: #00b383,
-  color-success-700: #008f72,
-  color-success-800: #007566,
-  color-success-900: #00524c,
-
-  color-info-100: #f2f8ff,
-  color-info-200: #c7e2ff,
-  color-info-300: #94cbff,
-  color-info-400: #42aaff,
-  color-info-500: #0095ff,
-  color-info-600: #006fd6,
-  color-info-700: #0057c2,
-  color-info-800: #0041a8,
-  color-info-900: #002885,
-
-  color-warning-100: #fffdf2,
-  color-warning-200: #fff1c2,
-  color-warning-300: #ffe59e,
-  color-warning-400: #ffc94d,
-  color-warning-500: #ffaa00,
-  color-warning-600: #db8b00,
-  color-warning-700: #b86e00,
-  color-warning-800: #945400,
-  color-warning-900: #703c00,
-
-  color-danger-100: #fff2f2,
-  color-danger-200: #ffd6d9,
-  color-danger-300: #ffa8b4,
-  color-danger-400: #ff708d,
-  color-danger-500: #ff3d71,
-  color-danger-600: #db2c66,
-  color-danger-700: #b81d5b,
-  color-danger-800: #94124e,
-  color-danger-900: #700940,
-
   color-basic-100: #e8e9fa,
   color-basic-200: #e8e9fa,
   color-basic-300: #d3d4f0,
@@ -70,15 +30,7 @@ $theme: (
   color-basic-800: #171b47,
   color-basic-900: #171b47,
   color-basic-1000: #1d2057,
-
-  color-alternate: color-basic-100,
-
-  color-primary-disabled: color-primary-700,
-  color-success-disabled: color-success-700,
-  color-info-disabled: color-info-700,
-  color-warning-disabled: color-warning-700,
-  color-danger-disabled: color-danger-700,
-  color-basic-disabled: color-basic-700,
+  color-basic-1100: #171a3b,
 
   background-primary-color-1: color-basic-500,
   background-primary-color-2: color-basic-600,
@@ -91,14 +43,7 @@ $theme: (
   border-primary-color-4: color-basic-800,
   border-primary-color-5: color-basic-900,
 
-  text-color: color-basic-200,
-  text-alternate-color: color-basic-100,
-  text-disabled-color: color-basic-400,
-  text-hint-color: color-basic-300,
-
-  shadow: 0 0.5rem 1rem 0 rgba(23, 27, 71, 0.24),
-
   outline-color: color-basic-600,
 );
 
-$nb-themes: nb-register-theme($theme, cosmic, default);
+$nb-themes: nb-register-theme($theme, cosmic, dark);
diff --git a/src/framework/theme/styles/themes/_dark.scss b/src/framework/theme/styles/themes/_dark.scss
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../core/functions';
+@import '../core/mixins';
+@import 'default';
+
+$theme: (
+
+  color-primary-disabled: color-primary-700,
+  color-success-disabled: color-success-700,
+  color-info-disabled: color-info-700,
+  color-warning-disabled: color-warning-700,
+  color-danger-disabled: color-danger-700,
+  color-basic-disabled: color-basic-700,
+
+  background-primary-color-1: color-basic-800,
+  background-primary-color-2: color-basic-900,
+  background-primary-color-3: color-basic-1000,
+  background-primary-color-4: color-basic-1100,
+
+  border-primary-color-1: color-basic-800,
+  border-primary-color-2: color-basic-900,
+  border-primary-color-3: color-basic-1000,
+  border-primary-color-4: color-basic-1100,
+  border-primary-color-5: color-basic-1100,
+
+  text-color: color-basic-100,
+  text-alternate-color: color-basic-100,
+  text-disabled-color: color-basic-700,
+  text-hint-color: color-basic-500,
+
+  shadow: 0 0.5rem 1rem 0 rgba(23, 27, 71, 0.24),
+
+  outline-color: color-basic-600,
+);
+
+// register the theme
+$nb-themes: nb-register-theme($theme, dark, default);
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -112,14 +112,15 @@ $theme: (
 
   color-basic-100: white,
   color-basic-200: #f7f8fa,
-  color-basic-300: #edf0f5,
+  color-basic-300: #edf0f4,
   color-basic-400: #dde1eb,
   color-basic-500: #c8cedb,
-  color-basic-600: #a6aebd,
-  color-basic-700: #8992a3,
-  color-basic-800: #6a7385,
-  color-basic-900: #4b5466,
-  color-basic-1000: #0d2540,
+  color-basic-600: #a7b0c1,
+  color-basic-700: #657084,
+  color-basic-800: #2e384f,
+  color-basic-900: #232a39,
+  color-basic-1000: #1a1f32,
+  color-basic-1100: #131728,
 
   color-alternate: color-basic-100,