feat(themes): add new Dark theme! (#1472)

BREAKING CHANGES:
- remove `disabled` status for card
- auth now uses `giant` size buttons and inputs

docs/app/@theme/components/hero/hero.component.ts

@@ -22,7 +22,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
         </div>
         <div class="hero-feature">
           <div class="feature-key">
-            3
+            4
           </div>
           <h3 class="feature-title">
             Visual themes

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;
     }
   }
 

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' },
   ];

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';

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"
 ]
 ```
 

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

docs/articles/theme-change.md

@@ -1,6 +1,6 @@
 # Change Current Theme
 
-Nebular Theme System provides 3 color schemes out of the box - `default`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime.
+Nebular Theme System provides 4 color schemes out of the box - `default`, `dark`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime.
 
 
 ## Switch from Cosmic to Default

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>
   `,

src/framework/auth/components/login/login.component.html

@@ -27,6 +27,7 @@ <h1 id="title" class="title">Login</h1>
            id="input-email"
            pattern=".+@.+\..+"
            placeholder="Email address"
+           fieldSize="giant"
            autofocus
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
@@ -51,6 +52,7 @@ <h1 id="title" class="title">Login</h1>
            type="password"
            id="input-password"
            placeholder="Password"
+           fieldSize="giant"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
@@ -77,6 +79,7 @@ <h1 id="title" class="title">Login</h1>
   <button nbButton
           fullWidth
           status="primary"
+          size="giant"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Log In

src/framework/auth/components/register/register.component.html

@@ -26,6 +26,7 @@ <h1 id="title" class="title">Register</h1>
            placeholder="Full name"
            autofocus
            fullWidth
+           fieldSize="giant"
            [status]="fullName.dirty ? (fullName.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.fullName.required')"
            [minlength]="getConfigValue('forms.validation.fullName.minLength')"
@@ -54,6 +55,7 @@ <h1 id="title" class="title">Register</h1>
            pattern=".+@.+..+"
            placeholder="Email address"
            fullWidth
+           fieldSize="giant"
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
            [attr.aria-invalid]="email.invalid && email.touched ? true : null">
@@ -77,6 +79,7 @@ <h1 id="title" class="title">Register</h1>
            name="password"
            placeholder="Password"
            fullWidth
+           fieldSize="giant"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
@@ -105,6 +108,7 @@ <h1 id="title" class="title">Register</h1>
            name="rePass"
            placeholder="Confirm Password"
            fullWidth
+           fieldSize="giant"
            [status]="rePass.dirty ? (rePass.invalid || password.value != rePass.value  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
@@ -127,6 +131,7 @@ <h1 id="title" class="title">Register</h1>
   <button nbButton
           fullWidth
           status="primary"
+          size="giant"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Register

src/framework/auth/components/request-password/request-password.component.html

@@ -28,6 +28,7 @@ <h1 id="title" class="title">Forgot Password</h1>
            placeholder="Email address"
            autofocus
            fullWidth
+           fieldSize="giant"
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
            [attr.aria-invalid]="email.invalid && email.touched ? true : null">
@@ -44,6 +45,7 @@ <h1 id="title" class="title">Forgot Password</h1>
   <button nbButton
           fullWidth
           status="primary"
+          size="giant"
           [disabled]="submitted || !requestPassForm.valid"
           [class.btn-pulse]="submitted">
     Request password

src/framework/auth/components/reset-password/reset-password.component.html

@@ -29,6 +29,7 @@ <h1 id="title" class="title">Change password</h1>
            placeholder="New Password"
            autofocus
            fullWidth
+           fieldSize="giant"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
@@ -58,6 +59,7 @@ <h1 id="title" class="title">Change password</h1>
            class="last"
            placeholder="Confirm Password"
            fullWidth
+           fieldSize="giant"
            [status]="rePass.touched
                ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
                : ''"
@@ -76,6 +78,7 @@ <h1 id="title" class="title">Change password</h1>
   <button nbButton
           status="primary"
           fullWidth
+          size="giant"
           [disabled]="submitted || !resetPassForm.valid"
           [class.btn-pulse]="submitted">
     Change password

src/framework/auth/styles/prebuilt/corporate.scss

@@ -0,0 +1,8 @@
+@import '../../../theme/styles/all';
+@import '../all';
+
+$nb-enabled-themes: (dark);
+
+@include nb-install() {
+  @include nb-auth-global();
+};

src/framework/auth/styles/prebuilt/dark.scss

@@ -0,0 +1,8 @@
+@import '../../../theme/styles/all';
+@import '../all';
+
+$nb-enabled-themes: (corporate);
+
+@include nb-install() {
+  @include nb-auth-global();
+};

src/framework/theme/components/button/_button-hero.scss

@@ -51,9 +51,8 @@
         }
 
         &[disabled] {
-          $left-disabled-color: nb-theme(button-hero-#{$status}-disabled-left-background-color);
-          $right-disabled-color: nb-theme(button-hero-#{$status}-disabled-right-background-color);
-          background-image: linear-gradient(to right, $left-disabled-color, $right-disabled-color);
+          background-color: nb-theme(button-hero-#{$status}-disabled-background-color);
+          background-image: none;
           color: nb-theme(button-hero-#{$status}-disabled-text-color);
         }
 

src/framework/theme/components/button/_button-outline.scss

@@ -6,7 +6,7 @@
 
 @mixin button-outline() {
   [nbButton].appearance-outline {
-    background-color: transparent;
+    background-color: nb-theme(button-outline-background-color);
     border-style: nb-theme(button-outline-border-style);
     border-width: nb-theme(button-outline-border-width);
     text-transform: nb-theme(button-outline-text-transform);

src/framework/theme/components/card/_card.component.theme.scss

@@ -46,13 +46,6 @@
       }
     }
 
-    &[disabled] {
-      nb-card-header {
-        background-color: nb-theme(card-header-disabled-background-color);
-        color: nb-theme(card-header-disabled-text-color);
-      }
-    }
-
     @each $status in nb-get-statuses() {
       &.status-#{$status} {
         nb-card-header {

src/framework/theme/components/card/card.component.ts

@@ -6,7 +6,6 @@
 
 import { Component, Input, HostBinding } from '@angular/core';
 
-import { convertToBoolProperty } from '../helpers';
 import { NbComponentSize } from '../component-size';
 import { NbComponentStatus } from '../component-status';
 
@@ -21,8 +20,6 @@ import { NbComponentStatus } from '../component-status';
  * card-header-text-font-size:
  * card-header-text-font-weight:
  * card-header-text-line-height:
- * card-header-disabled-background-color:
- * card-header-disabled-text-color:
  * card-header-primary-background-color:
  * card-header-primary-text-color:
  * card-header-info-background-color:
@@ -191,16 +188,6 @@ export class NbCardComponent {
   }
   _accent: '' | NbComponentStatus;
 
-  @Input()
-  @HostBinding('attr.disabled')
-  get disabled(): string | null {
-    return this._disabled;
-  }
-  set disabled(value: string | null) {
-    this._disabled = convertToBoolProperty(value) ? '' : null;
-  }
-  _disabled: string | null = null;
-
   @HostBinding('class.size-tiny')
   get tiny() {
     return this.size === 'tiny';

src/framework/theme/components/chat/chat-form.component.ts

@@ -79,7 +79,8 @@ import { NbComponentStatus } from '../component-status';
               [class.with-icon]="!buttonTitle"
               (click)="sendMessage()"
               class="send-button">
-        {{ buttonTitle }}<nb-icon *ngIf="!buttonTitle" [icon]="buttonIcon" pack="nebular-essentials"></nb-icon>
+        <nb-icon *ngIf="!buttonTitle; else title" [icon]="buttonIcon" pack="nebular-essentials"></nb-icon>
+        <ng-template #title>{{ buttonTitle }}</ng-template>
       </button>
     </div>
   `,

src/framework/theme/components/input/_input-sizes.scss

@@ -15,6 +15,7 @@
       &::placeholder {
         font-size: nb-theme(input-#{$size}-placeholder-text-font-size);
         font-weight: nb-theme(input-#{$size}-placeholder-text-font-weight);
+        // TODO: this seems to be unused
         line-height: nb-theme(input-#{$size}-placeholder-text-line-height);
       }
     }

src/framework/theme/components/list/_list.component.theme.scss

@@ -1,10 +1,17 @@
 @mixin nb-list-theme() {
   nb-list-item {
-    border-bottom: 1px solid nb-theme(list-item-border-color);
+    border-bottom:
+      nb-theme(list-item-divider-width)
+      nb-theme(list-item-divider-style)
+      nb-theme(list-item-divider-color);
+
     padding: nb-theme(list-item-padding);
 
     &:first-child {
-      border-top: 1px solid nb-theme(list-item-border-color);
+      border-top:
+        nb-theme(list-item-divider-width)
+        nb-theme(list-item-divider-style)
+        nb-theme(list-item-divider-color);
     }
   }
 }

src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss

@@ -17,7 +17,10 @@
     box-shadow: nb-theme(route-tabset-shadow);
 
     .route-tabset {
-      border-bottom: nb-theme(route-tabset-divider-width) solid nb-theme(route-tabset-divider-color);
+      border-bottom:
+        nb-theme(route-tabset-divider-width)
+        nb-theme(route-tabset-divider-style)
+        nb-theme(route-tabset-divider-color);
     }
 
     .tab-link {

src/framework/theme/components/select/_select-filled.scss

@@ -14,7 +14,6 @@
       border-color: nb-theme(select-filled-focus-border-color);
     }
     &:hover {
-      background-color: nb-theme(select-filled-hover-background-color);
       border-color: nb-theme(select-filled-hover-border-color);
     }
     &[disabled] {