refactor(themes): make map processing lazy, add variable existence ch…

…eck (#1471) BREAKING CHANGES: - `nb-theme` function now throws an error if an unused variable is accessed - custom auth variables are removed and replaced with @nebular/theme variables - `nb-install` function moved into `@nebular/theme/styles/theming` - auth components now use `nb-icon` instead of icon css class
akveo · May 27, 2019 · 48d8f03 · 48d8f03
1 parent e22d7be
commit 48d8f03
Show file tree

Hide file tree

Showing 41 changed files with 352 additions and 432 deletions.
diff --git a/angular.json b/angular.json
@@ -25,9 +25,7 @@
               "src/assets",
               "src/favicon.ico"
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": [],
             "scripts": []
           },
           "configurations": {
@@ -75,9 +73,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": [],
             "assets": [
               "src/assets",
               "src/favicon.ico"
@@ -144,9 +140,7 @@
               "src/assets",
               "src/favicon.ico"
             ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": [],
             "scripts": []
           },
           "configurations": {
@@ -194,9 +188,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "styles": [],
             "assets": [
               "src/assets",
               "src/favicon.ico"

diff --git a/docs/app/@theme/components/page-tabs/page-tabs.component.scss b/docs/app/@theme/components/page-tabs/page-tabs.component.scss
@@ -6,7 +6,7 @@
 
   $tabs-fg: nb-theme(color-fg-heading-light);
   $tabs-fg-active: nb-theme(color-fg-heading);
-  $tabs-bg-active: nb-theme(color-white);
+  $tabs-bg-active: white;
   $tabs-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6);
   $tabs-accent-line: nb-theme(color-fg-highlight);
 

diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss
@@ -7,7 +7,7 @@
 @import '../../../../src/framework/theme/styles/global/typography/typography';
 @import '../../../../src/framework/bootstrap/styles/globals';
 
-@include nb-install-global() {
+@include nb-install() {
   @include nb-layout-theme();
   @include nb-sidebar-theme();
   @include nb-card-theme();

diff --git a/docs/app/@theme/styles/themes.scss b/docs/app/@theme/styles/themes.scss
@@ -32,6 +32,8 @@ $nb-themes: nb-register-theme((
   color-fg-heading-light: #ffffff,
   header-menu-fg-active: color-fg,
   footer-menu-fg: color-fg-text,
+  code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%),
+  color-gray-light: #ced5dd,
 
   color-fg: white,
   color-fg-heading: #0d1c2e,

diff --git a/docs/app/blocks/components/theme-block/theme-block.component.scss b/docs/app/blocks/components/theme-block/theme-block.component.scss
@@ -4,9 +4,9 @@
 
   $inherited-fg: nb-theme(color-fg);
   $search-fg: nb-theme(color-fg);
-  $search-bg: nb-theme(color-white);
   $search-border: 1px solid nb-theme(color-gray-light);
   $selected-row-bg: nb-theme(color-gray-light);
+  $search-bg: white;
 
   .inheritance-icon {
     font-size: 1rem;

diff --git a/scripts/gulp/tasks/docs/docs.ts b/scripts/gulp/tasks/docs/docs.ts
@@ -10,7 +10,7 @@ const typedoc = require('gulp-typedoc');
 const sass = require('gulp-sass');
 const exec = require('child_process').execSync;
 
-task('docs', ['generate-doc-json', 'copy-examples', 'find-full-examples']);
+task('docs', ['generate-doc-json', 'find-full-examples']);
 task('generate-doc-json', generateDocJson);
 task('parse-themes', ['generate-doc-json'], parseThemes);
 task('create-docs-dirs', () => {

diff --git a/scripts/gulp/tasks/docs/example.ts b/scripts/gulp/tasks/docs/example.ts
@@ -22,7 +22,7 @@ const EXAMPLES_DEST = './docs/assets/examples';
 
 task('copy-examples', () => {
   del.sync(EXAMPLES_DEST);
-  src(EXAMPLES_SRC)
+  return src(EXAMPLES_SRC)
     .pipe(replace(/\/\*\*.*\*\/\n\s*\n/s, ''))
     .pipe(dest(EXAMPLES_DEST));
 });
@@ -36,7 +36,7 @@ task('find-full-examples', ['parse-themes', 'validate-examples'], () => {
   writeFileSync(DOCS_OUTPUT, JSON.stringify(docs));
 });
 
-task('validate-examples', ['parse-themes'], () => {
+task('validate-examples', ['parse-themes', 'copy-examples'], () => {
   const docs = JSON.parse(readFileSync(DOCS_OUTPUT, 'utf8'));
   docs.classes.forEach(cls => validate(cls));
 });

diff --git a/src/framework/auth/components/_auth.component.theme.scss b/src/framework/auth/components/_auth.component.theme.scss
diff --git a/src/framework/auth/components/auth-block/_auth-block.component.theme.scss b/src/framework/auth/components/auth-block/_auth-block.component.theme.scss
@@ -7,28 +7,15 @@
 @mixin nb-auth-block-theme() {
   nb-auth-block {
     .text-link {
-      color: nb-theme(color-fg);
-      font-weight: nb-theme(font-weight-bold);
+      color: nb-theme(text-hint-color);
     }
 
     .error-message {
-      color: nb-theme(color-danger);
-    }
-
-    .accept-group {
-      a {
-        color: nb-theme(accept-group-link-color);
-      }
+      color: nb-theme(color-danger-500);
     }
 
     .socials a {
-      &::before {
-        color: nb-theme(socials-color);
-      }
-
-      &:hover::before {
-        color: nb-theme(socials-hover-color);
-      }
+      color: nb-theme(text-hint-color);
     }
   }
 }

diff --git a/src/framework/auth/components/auth.component.ts b/src/framework/auth/components/auth.component.ts
@@ -18,7 +18,7 @@ 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-thin-left"></nb-icon></a>
+              <a href="#" (click)="back()" class="link" aria-label="Back"><nb-icon icon="arrow-back"></nb-icon></a>
             </nav>
           </nb-card-header>
           <nb-card-body>

diff --git a/src/framework/auth/components/login/login.component.html b/src/framework/auth/components/login/login.component.html
@@ -76,7 +76,7 @@ <h1 id="title" class="title">Login</h1>
 
   <button nbButton
           fullWidth
-          status="success"
+          status="primary"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Log In
@@ -91,12 +91,18 @@ <h1 id="title" class="title">Login</h1>
          [routerLink]="socialLink.link"
          [attr.target]="socialLink.target"
          [attr.class]="socialLink.icon"
-         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+         [class.with-icon]="socialLink.icon">
+        <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
+        <ng-template #title>{{ socialLink.title }}</ng-template>
+      </a>
       <a *ngIf="socialLink.url"
          [attr.href]="socialLink.url"
          [attr.target]="socialLink.target"
          [attr.class]="socialLink.icon"
-         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+         [class.with-icon]="socialLink.icon">
+        <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
+        <ng-template #title>{{ socialLink.title }}</ng-template>
+      </a>
     </ng-container>
   </div>
 </section>

diff --git a/src/framework/auth/components/register/register.component.html b/src/framework/auth/components/register/register.component.html
@@ -26,7 +26,7 @@ <h1 id="title" class="title">Register</h1>
            placeholder="Full name"
            autofocus
            fullWidth
-           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [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')"
@@ -77,7 +77,7 @@ <h1 id="title" class="title">Register</h1>
            name="password"
            placeholder="Password"
            fullWidth
-           [status]="email.dirty ? (email.invalid  ? 'danger' : 'success') : ''"
+           [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')"
@@ -105,7 +105,7 @@ <h1 id="title" class="title">Register</h1>
            name="rePass"
            placeholder="Confirm Password"
            fullWidth
-           [status]="email.dirty ? (email.invalid || password.value != rePass.value  ? 'danger' : 'success') : ''"
+           [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">
@@ -126,7 +126,7 @@ <h1 id="title" class="title">Register</h1>
 
   <button nbButton
           fullWidth
-          status="success"
+          status="primary"
           [disabled]="submitted || !form.valid"
           [class.btn-pulse]="submitted">
     Register
@@ -141,12 +141,18 @@ <h1 id="title" class="title">Register</h1>
          [routerLink]="socialLink.link"
          [attr.target]="socialLink.target"
          [attr.class]="socialLink.icon"
-         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+         [class.with-icon]="socialLink.icon">
+        <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
+        <ng-template #title>{{ socialLink.title }}</ng-template>
+      </a>
       <a *ngIf="socialLink.url"
          [attr.href]="socialLink.url"
          [attr.target]="socialLink.target"
          [attr.class]="socialLink.icon"
-         [class.with-icon]="socialLink.icon">{{ socialLink.title }}</a>
+         [class.with-icon]="socialLink.icon">
+        <nb-icon *ngIf="socialLink.icon; else title" [icon]="socialLink.icon"></nb-icon>
+        <ng-template #title>{{ socialLink.title }}</ng-template>
+      </a>
     </ng-container>
   </div>
 </section>

diff --git a/src/framework/auth/components/request-password/request-password.component.html b/src/framework/auth/components/request-password/request-password.component.html
@@ -43,7 +43,7 @@ <h1 id="title" class="title">Forgot Password</h1>
 
   <button nbButton
           fullWidth
-          status="success"
+          status="primary"
           [disabled]="submitted || !requestPassForm.valid"
           [class.btn-pulse]="submitted">
     Request password

diff --git a/src/framework/auth/components/reset-password/reset-password.component.html b/src/framework/auth/components/reset-password/reset-password.component.html
@@ -74,7 +74,7 @@ <h1 id="title" class="title">Change password</h1>
   </div>
 
   <button nbButton
-          status="success"
+          status="primary"
           fullWidth
           [disabled]="submitted || !resetPassForm.valid"
           [class.btn-pulse]="submitted">

diff --git a/src/framework/auth/styles/_all.scss b/src/framework/auth/styles/_all.scss
@@ -1,2 +1 @@
-@import 'themes';
 @import 'globals';
diff --git a/src/framework/auth/styles/_themes.scss b/src/framework/auth/styles/_themes.scss
diff --git a/src/framework/auth/styles/global/_components.scss b/src/framework/auth/styles/global/_components.scss
@@ -4,11 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../components/auth.component.theme';
 @import '../../components/auth-block/auth-block.component.theme';
 
 // Create a theme
 @mixin nb-auth-components() {
-  @include nb-auth-theme();
   @include nb-auth-block-theme();
 }
diff --git a/src/framework/auth/styles/themes/_corporate.scss b/src/framework/auth/styles/themes/_corporate.scss
diff --git a/src/framework/auth/styles/themes/_cosmic.scss b/src/framework/auth/styles/themes/_cosmic.scss
diff --git a/src/framework/auth/styles/themes/_default.scss b/src/framework/auth/styles/themes/_default.scss
diff --git a/src/framework/theme/components/button/_button-hero.scss b/src/framework/theme/components/button/_button-hero.scss
@@ -64,11 +64,11 @@
         @include keyframes(button-hero-#{$status}-pulse) {
           0% {
             box-shadow: none;
-            opacity: nb-theme(0.3);
+            opacity: 0.3;
           }
 
           100% {
-            box-shadow: 0 0 1rem 0 nb-theme($left-color);
+            box-shadow: 0 0 1rem 0 $left-color;
             opacity: 0.8;
           }
         }

diff --git a/src/framework/theme/components/icon/icon.module.ts b/src/framework/theme/components/icon/icon.module.ts
@@ -52,6 +52,7 @@ export class NbIconModule {
       'minus-outline': '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="100%" height="100%" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="minus"><rect width="24" height="24" transform="rotate(180 12 12)" opacity="0"/><path d="M19 13H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z"/></g></g></svg>',
       'minus-bold-outline': '<svg xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" viewBox="0 0 8 2" width="100%" height="100%"><defs><rect id="nb-mbo" y="3" width="8" height="2" rx="1"/></defs><use xlink:href="#nb-mbo" transform="translate(0 -3)" fill-rule="evenodd"/></svg>',
       'checkmark-bold-outline': '<svg xmlns:xlink="http://www.w3.org/1999/xlink" fill="currentColor" viewBox="0 0 8 7" width="100%" height="100%"><defs><path id="nb-cbo" d="M6.039 1.43a1.11 1.11 0 0 1 1.517-.228c.483.342.588.998.234 1.466L4.431 7.1a1 1 0 0 1-1.492.115L.317 4.677a1.023 1.023 0 0 1 .002-1.483 1.113 1.113 0 0 1 1.535.002l1.641 1.59L6.04 1.428z"/></defs><use xlink:href="#nb-cbo" transform="translate(0 -1)" fill-rule="evenodd"/></svg>',
+      'arrow-back': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="arrow-back"><rect width="24" height="24" transform="rotate(90 12 12)" opacity="0"/><path d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23 1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2z"/></g></g></svg>',
     });
     // tslint:enable:max-line-length
   }

diff --git a/src/framework/theme/components/input/_input.directive.theme.scss b/src/framework/theme/components/input/_input.directive.theme.scss
@@ -16,11 +16,7 @@
     border-style: nb-theme(input-border-style);
     border-width: nb-theme(input-border-width);
     color: nb-theme(input-text-color);
-    font-size: nb-theme(input-text-font-size);
     font-family: nb-theme(input-text-font-family);
-    font-weight: nb-theme(input-text-font-weight);
-    line-height: nb-theme(input-text-line-height);
-    padding: nb-theme(input-padding);
     @include nb-component-animation(border, background-color, color);
 
     &::placeholder {

diff --git a/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss b/src/framework/theme/components/route-tabset/_route-tabset.component.theme.scss
@@ -37,10 +37,6 @@
       }
     }
 
-    .route-tab {
-      min-width: nb-theme(route-tabs-header-min-width);
-    }
-
     .route-tab.active {
       .tab-link {
         background-color: nb-theme(tabset-tab-active-background-color);
@@ -87,7 +83,7 @@
     }
 
     .route-tab.responsive {
-      @media screen and (max-width: nb-theme(route-tabs-icon-only-max-width)) {
+      @media screen and (max-width: nb-theme(route-tabset-tab-text-hide-breakpoint)) {
         .tab-text {
           display: none;
         }

diff --git a/src/framework/theme/components/select/_select-outline.scss b/src/framework/theme/components/select/_select-outline.scss
@@ -26,9 +26,6 @@
   @each $status in nb-get-statuses() {
     nb-select.appearance-outline.status-#{$status} .select-button {
       border-color: nb-theme(select-outline-#{$status}-border-color);
-      &.selected {
-        background-color: nb-theme(select-option-outline-#{$status}-selected-background-color);
-      }
       &:focus {
         border-color: nb-theme(select-outline-#{$status}-focus-border-color);
       }