fix(theme): finalize themes with design system (#1481)

BREAKING CHANGES:

The following sass mixins are removed: `nb-radial-gradient`, `nb-right-gradient`.
Theme variables changes:

**renamed:**
font-main -> font-family-primary
font-secondary -> font-family-secondary
radius -> border-radius
color-bg -> background-basic-color-1,
color-bg-active -> background-basic-color-2,
color-fg -> text-basic-color,
color-fg-heading -> text-basic-color,
color-fg-text -> text-hint-color,
separator -> divider-color
scrollbar-fg -> scrollbar-color,
scrollbar-bg -> scrollbar-background-color,
scrollbar-thumb-radius -> scrollbar-width

**removed:**
color-fg-highlight: #40dc7e,

font-weight-thin: 200,
font-weight-light: 300,
font-weight-normal: 400,
font-weight-bolder: 500,
font-weight-bold: 600,
font-weight-ultra-bold: 800,

base-font-size: 16px,

font-size-xlg: 1.25rem,
font-size-lg: 1.125rem,
font-size: 1rem,
font-size-sm: 0.875rem,
font-size-xs: 0.75rem,

padding: 1.25rem,
margin: 1.5rem,
line-height: 1.25,

separator: #ebeef2,
social-color-facebook: #3b5998,
social-color-twitter: #55acee,
social-color-google: #dd4b39,
social-color-linkedin: #0177b5,
social-color-github: #6b6b6b,
social-color-stackoverflow: #2f96e8,
social-color-dribble: #f26798,
social-color-behance: #0093fa,

radial-gradient: none,
linear-gradient: none,

docs/app/@theme/styles/themes.scss

@@ -2,6 +2,8 @@
 @import '../../../../src/framework/theme/styles/themes/default';
 @import '../../../../src/framework/theme/styles/global/breakpoints';
 
+$nb-enable-css-custom-properties: true;
+
 /*
 We have to overwrite breakpoints because we need to add *macpro* breakpoint.
 But if we add it using *map-merge* function we'll get the warning and *media-breakpoint-down* will stop working.
@@ -34,12 +36,14 @@ $nb-themes: nb-register-theme((
   footer-menu-fg: color-fg-text,
   code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%),
   color-gray-light: #ced5dd,
+  radius: 0.375rem,
+  color-fg-highlight: #40dc7e,
 
   color-fg: white,
   color-fg-heading: #0d1c2e,
   color-fg-text: #919fb1,
   shadow: none,
-  layout-bg: transparent,
+  layout-background-color: transparent,
   layout-padding: 0,
   layout-medium-padding: 0,
   layout-small-padding: 0,

docs/app/blocks/components/components-overview-block/components-overview-block.component.scss

@@ -29,7 +29,7 @@
 
     .component-name {
       color: nb-theme(color-fg-heading-light);
-      font-weight: nb-theme(font-weight-bolder);
+      font-weight: 500;
     }
 
     .component-navigate-link {

docs/app/blocks/components/live-example-block/live-example-block.component.scss

@@ -6,11 +6,11 @@
   // colors
   $action-bg: white;
   $action-fg: nb-theme(color-fg-heading-light);
-  $block-bg-default: #f7f8fa;
-  $block-bg-cosmic: #292766;
+  $block-bg-default: #edf0f4;
+  $block-bg-cosmic: #1b1b38;
   $block-fg-cosmic: #e8e9fa;
-  $block-bg-corporate: #f7f8fa;
-  $block-bg-dark: #232a39;
+  $block-bg-corporate: #edf0f4;
+  $block-bg-dark: #1a1f33;
   $block-fg-dark: #f7f8fa;
 
   display: flex;

docs/app/documentation/page/page.component.scss

@@ -216,7 +216,7 @@
     margin-top: 1rem;
 
     nb-card-body {
-      background-color: nb-theme(layout-bg);
+      background-color: nb-theme(layout-background-color);
       padding: 0;
       overflow: visible;
     }

src/app/layout-theme-toggle/layout-theme-toggle.component.ts

@@ -5,12 +5,12 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'nb-layout-theme-toggle',
   styleUrls: ['./layout-theme-toggle.component.scss'],
   template: `
-    <label dir="ltr">
+    <div dir="ltr">
       <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>
+    </div>
   `,
 })
 export class LayoutThemeToggleComponent {

src/framework/auth/components/auth-block/_auth-block.component.theme.scss

@@ -10,8 +10,8 @@
       color: nb-theme(text-hint-color);
     }
 
-    .error-message {
-      color: nb-theme(color-danger-500);
+    .forgot-password {
+      color: nb-theme(text-disabled-color);
     }
 
     .socials a {

src/framework/auth/components/auth-block/auth-block.component.scss

@@ -19,7 +19,12 @@
       margin-bottom: 0.5rem;
     }
 
-    .error-message {
+    .forgot-password {
+      text-decoration: none;
+      margin-bottom: 0.5rem;
+    }
+
+    .caption {
       margin-top: 0.5rem;
     }
 
@@ -38,13 +43,6 @@
       text-align: center;
     }
 
-    .checkbox {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      font-weight: normal;
-    }
-
     .form-control-group {
       margin-bottom: 2rem;
     }
@@ -53,10 +51,11 @@
       display: flex;
       justify-content: space-between;
       margin: 2rem 0;
+    }
 
-      .forgot-password {
-        line-height: 2;
-      }
+    .label-with-link {
+      display: flex;
+      justify-content: space-between;
     }
 
     .links {
@@ -70,7 +69,6 @@
       .socials a {
         margin: 0 1rem;
         text-decoration: none;
-        font-size: 1rem;
         vertical-align: middle;
 
         &.with-icon {

src/framework/auth/components/auth.component.scss

@@ -9,10 +9,12 @@
   }
 
   .navigation .link {
+    display: inline-block;
     text-decoration: none;
 
     nb-icon {
       font-size: 2rem;
+      vertical-align: middle;
     }
   }
 

src/framework/auth/components/auth.component.ts

@@ -18,7 +18,9 @@ import { takeWhile } from 'rxjs/operators';
         <nb-card>
           <nb-card-header>
             <nav class="navigation">
-              <a href="#" (click)="back()" class="link" aria-label="Back"><nb-icon icon="arrow-back"></nb-icon></a>
+              <a href="#" (click)="back()" class="link back-link" aria-label="Back">
+                <nb-icon icon="arrow-back"></nb-icon>
+              </a>
             </nav>
           </nb-card-header>
           <nb-card-body>

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

@@ -27,23 +27,26 @@ <h1 id="title" class="title">Login</h1>
            id="input-email"
            pattern=".+@.+\..+"
            placeholder="Email address"
-           fieldSize="giant"
+           fieldSize="large"
            autofocus
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
            [attr.aria-invalid]="email.invalid && email.touched ? true : null">
     <ng-container *ngIf="email.invalid && email.touched">
-      <p class="error-message" *ngIf="email.errors?.required">
+      <p class="caption status-danger" *ngIf="email.errors?.required">
         Email is required!
       </p>
-      <p class="error-message" *ngIf="email.errors?.pattern">
+      <p class="caption status-danger" *ngIf="email.errors?.pattern">
         Email should be the real one!
       </p>
     </ng-container>
   </div>
 
   <div class="form-control-group">
-    <label class="label" for="input-password">Password:</label>
+    <span class="label-with-link">
+      <label class="label" for="input-password">Password:</label>
+      <a class="forgot-password caption-2" routerLink="../request-password">Forgot Password?</a>
+    </span>
     <input nbInput
            fullWidth
            [(ngModel)]="user.password"
@@ -52,17 +55,17 @@ <h1 id="title" class="title">Login</h1>
            type="password"
            id="input-password"
            placeholder="Password"
-           fieldSize="giant"
+           fieldSize="large"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
            [maxlength]="getConfigValue('forms.validation.password.maxLength')"
            [attr.aria-invalid]="password.invalid && password.touched ? true : null">
     <ng-container *ngIf="password.invalid && password.touched ">
-      <p class="error-message" *ngIf="password.errors?.required">
+      <p class="caption status-danger" *ngIf="password.errors?.required">
         Password is required!
       </p>
-      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
+      <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{ getConfigValue('forms.validation.password.minLength') }}
         to {{ getConfigValue('forms.validation.password.maxLength') }}
@@ -73,13 +76,12 @@ <h1 id="title" class="title">Login</h1>
 
   <div class="form-control-group accept-group">
     <nb-checkbox name="rememberMe" [(ngModel)]="user.rememberMe" *ngIf="rememberMe">Remember me</nb-checkbox>
-    <a class="forgot-password" routerLink="../request-password">Forgot Password?</a>
   </div>
 
   <button nbButton
           fullWidth
           status="primary"
-          size="giant"
+          size="large"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Log In

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

@@ -26,17 +26,17 @@ <h1 id="title" class="title">Register</h1>
            placeholder="Full name"
            autofocus
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="fullName.dirty ? (fullName.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.fullName.required')"
            [minlength]="getConfigValue('forms.validation.fullName.minLength')"
            [maxlength]="getConfigValue('forms.validation.fullName.maxLength')"
            [attr.aria-invalid]="fullName.invalid && fullName.touched ? true : null">
     <ng-container *ngIf="fullName.invalid && fullName.touched">
-      <p class="error-message" *ngIf="fullName.errors?.required">
+      <p class="caption status-danger" *ngIf="fullName.errors?.required">
         Full name is required!
       </p>
-      <p class="error-message" *ngIf="fullName.errors?.minlength || fullName.errors?.maxlength">
+      <p class="caption status-danger" *ngIf="fullName.errors?.minlength || fullName.errors?.maxlength">
         Full name should contains
         from {{getConfigValue('forms.validation.fullName.minLength')}}
         to {{getConfigValue('forms.validation.fullName.maxLength')}}
@@ -55,15 +55,15 @@ <h1 id="title" class="title">Register</h1>
            pattern=".+@.+..+"
            placeholder="Email address"
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
            [attr.aria-invalid]="email.invalid && email.touched ? true : null">
     <ng-container *ngIf="email.invalid && email.touched">
-      <p class="error-message" *ngIf="email.errors?.required">
+      <p class="caption status-danger" *ngIf="email.errors?.required">
         Email is required!
       </p>
-      <p class="error-message" *ngIf="email.errors?.pattern">
+      <p class="caption status-danger" *ngIf="email.errors?.pattern">
         Email should be the real one!
       </p>
     </ng-container>
@@ -79,17 +79,17 @@ <h1 id="title" class="title">Register</h1>
            name="password"
            placeholder="Password"
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
            [maxlength]="getConfigValue('forms.validation.password.maxLength')"
            [attr.aria-invalid]="password.invalid && password.touched ? true : null">
     <ng-container *ngIf="password.invalid && password.touched">
-      <p class="error-message" *ngIf="password.errors?.required">
+      <p class="caption status-danger" *ngIf="password.errors?.required">
         Password is required!
       </p>
-      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
+      <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{ getConfigValue('forms.validation.password.minLength') }}
         to {{ getConfigValue('forms.validation.password.maxLength') }}
@@ -108,15 +108,15 @@ <h1 id="title" class="title">Register</h1>
            name="rePass"
            placeholder="Confirm Password"
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [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">
     <ng-container *ngIf="rePass.invalid && rePass.touched">
-      <p class="error-message" *ngIf="rePass.errors?.required">
+      <p class="caption status-danger" *ngIf="rePass.errors?.required">
         Password confirmation is required!
       </p>
-      <p class="error-message" *ngIf="password.value != rePass.value && !rePass.errors?.required">
+      <p class="caption status-danger" *ngIf="password.value != rePass.value && !rePass.errors?.required">
         Password does not match the confirm password.
       </p>
     </ng-container>
@@ -131,7 +131,7 @@ <h1 id="title" class="title">Register</h1>
   <button nbButton
           fullWidth
           status="primary"
-          size="giant"
+          size="large"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Register

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

@@ -28,15 +28,15 @@ <h1 id="title" class="title">Forgot Password</h1>
            placeholder="Email address"
            autofocus
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.email.required')"
            [attr.aria-invalid]="email.invalid && email.touched ? true : null">
     <ng-container *ngIf="email.invalid && email.touched">
-      <p class="error-message" *ngIf="email.errors?.required">
+      <p class="caption status-danger" *ngIf="email.errors?.required">
         Email is required!
       </p>
-      <p class="error-message" *ngIf="email.errors?.pattern">
+      <p class="caption status-danger" *ngIf="email.errors?.pattern">
         Email should be the real one!
       </p>
     </ng-container>
@@ -45,7 +45,7 @@ <h1 id="title" class="title">Forgot Password</h1>
   <button nbButton
           fullWidth
           status="primary"
-          size="giant"
+          size="large"
           [disabled]="submitted || !requestPassForm.valid"
           [class.btn-pulse]="submitted">
     Request password

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

@@ -29,17 +29,17 @@ <h1 id="title" class="title">Change password</h1>
            placeholder="New Password"
            autofocus
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="password.dirty ? (password.invalid  ? 'danger' : 'success') : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [minlength]="getConfigValue('forms.validation.password.minLength')"
            [maxlength]="getConfigValue('forms.validation.password.maxLength')"
            [attr.aria-invalid]="password.invalid && password.touched ? true : null">
     <ng-container *ngIf="password.invalid && password.touched">
-      <p class="error-message" *ngIf="password.errors?.required">
+      <p class="caption status-danger" *ngIf="password.errors?.required">
         Password is required!
       </p>
-      <p class="error-message" *ngIf="password.errors?.minlength || password.errors?.maxlength">
+      <p class="caption status-danger" *ngIf="password.errors?.minlength || password.errors?.maxlength">
         Password should contains
         from {{getConfigValue('forms.validation.password.minLength')}}
         to {{getConfigValue('forms.validation.password.maxLength')}}
@@ -59,17 +59,17 @@ <h1 id="title" class="title">Change password</h1>
            class="last"
            placeholder="Confirm Password"
            fullWidth
-           fieldSize="giant"
+           fieldSize="large"
            [status]="rePass.touched
                ? (rePass.invalid || password.value != rePass.value ? 'danger' : 'success')
                : ''"
            [required]="getConfigValue('forms.validation.password.required')"
            [attr.aria-invalid]="rePass.invalid && rePass.touched ? true : null">
     <ng-container *ngIf="rePass.touched">
-      <p class="error-message" *ngIf="rePass.invalid && rePass.errors?.required">
+      <p class="caption status-danger" *ngIf="rePass.invalid && rePass.errors?.required">
         Password confirmation is required!
       </p>
-      <p class="error-message" *ngIf="password.value != rePass.value && !rePass.errors?.required">
+      <p class="caption status-danger" *ngIf="password.value != rePass.value && !rePass.errors?.required">
         Password does not match the confirm password.
       </p>
     </ng-container>
@@ -78,7 +78,7 @@ <h1 id="title" class="title">Change password</h1>
   <button nbButton
           status="primary"
           fullWidth
-          size="giant"
+          size="large"
           [disabled]="submitted || !resetPassForm.valid"
           [class.btn-pulse]="submitted">
     Change password