From 5d923a64bdbb211c57b815dd5723f416b56d59ec Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <yggg@users.noreply.github.com>
Date: Thu, 25 Apr 2019 16:08:05 +0300
Subject: [PATCH] feat(search): Eva theme (#1419)

BREAKING CHANGE:

Following theme properties renamed:
search-bg -> search-background-color
search-bg-secondary -> search-extra-background-color
search-text -> search-text-color
search-info -> search-info-text-color
search-dash -> search-divider-color
search-placeholder -> search-placeholder-text-color

Following theme properties removed:
search-btn-open-fg
search-btn-close-fg
---
 .../search/_search.component.theme.scss       | 60 +++++++++----------
 .../components/search/search.component.ts     | 11 ++--
 .../theme/components/search/search.module.ts  |  2 +
 .../theme/styles/themes/_default.scss         | 29 ++++++---
 4 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/src/framework/theme/components/search/_search.component.theme.scss b/src/framework/theme/components/search/_search.component.theme.scss
index 5beefde0d5..4f439d5aef 100644
--- a/src/framework/theme/components/search/_search.component.theme.scss
+++ b/src/framework/theme/components/search/_search.component.theme.scss
@@ -9,22 +9,26 @@
   nb-search-field {
 
     .search {
-      background: nb-theme(search-bg);
-
-      button {
-        color: nb-theme(search-btn-close-fg);
-      }
-
-      span {
-        color: nb-theme(search-info);
+      background: nb-theme(search-background-color);
+
+      span.info {
+        color: nb-theme(search-info-text-color);
+        font-family: nb-theme(search-info-text-font-family);
+        font-size: nb-theme(search-info-text-font-size);
+        font-weight: nb-theme(search-info-text-font-weight);
+        line-height: nb-theme(search-info-text-line-height);
       }
 
       input {
-        color: nb-theme(search-text);
-        border-bottom: 4px solid nb-theme(search-dash);
+        border-bottom: nb-theme(search-divider-width) nb-theme(search-divider-style) nb-theme(search-divider-color);
+        color: nb-theme(search-text-color);
+        font-family: nb-theme(search-text-font-family);
+        font-size: nb-theme(search-text-font-size);
+        font-weight: nb-theme(search-text-font-weight);
+        line-height: nb-theme(search-text-line-height);
 
         &::placeholder {
-          color: nb-theme(search-placeholder);
+          color: nb-theme(search-placeholder-text-color);
         }
 
         &::-ms-clear {
@@ -35,60 +39,54 @@
 
     &.rotate-layout {
       opacity: 0;
-      background: nb-theme(search-bg);
+      background: nb-theme(search-background-color);
     }
 
     &.modal-zoomin {
       .search::before,
       .search::after {
-        border: 1.5rem solid nb-theme(search-bg-secondary);
+        border: 1.5rem solid nb-theme(search-extra-background-color);
       }
 
     }
 
-		&.modal-half {
-			.form-wrapper {
-				background: nb-theme(search-bg);
-			}
+    &.modal-half {
+      .form-wrapper {
+        background: nb-theme(search-background-color);
+      }
       .search::before {
-        background: nb-theme(search-bg-secondary);
+        background: nb-theme(search-extra-background-color);
       }
     }
 
     &.modal-drop {
       .form-content::after {
-        background: nb-theme(search-dash);
+        background: nb-theme(search-divider-color);
       }
       .search::before {
-        background: nb-theme(search-bg);
+        background: nb-theme(search-background-color);
       }
     }
 
     &.curtain {
       .search::after {
-        background: nb-theme(search-bg);
+        background: nb-theme(search-background-color);
       }
       .search {
-        background: nb-theme(search-bg);
+        background: nb-theme(search-background-color);
       }
     }
 
-		&.column-curtain {
+    &.column-curtain {
       &::before {
-        background: nb-theme(search-bg);
+        background: nb-theme(search-background-color);
       }
       &::after {
         background: transparent;
       }
       &.show::after {
-        background: nb-theme(search-bg-secondary);
+        background: nb-theme(search-extra-background-color);
       }
-		}
-  }
-
-  nb-search {
-    button {
-      color: nb-theme(search-btn-open-fg);
     }
   }
 }
diff --git a/src/framework/theme/components/search/search.component.ts b/src/framework/theme/components/search/search.component.ts
index 2569008265..a81bc30b05 100644
--- a/src/framework/theme/components/search/search.component.ts
+++ b/src/framework/theme/components/search/search.component.ts
@@ -47,7 +47,7 @@ import { NbOverlayService, NbOverlayRef, NbPortalDirective  } from '../cdk';
   ],
   template: `
     <div class="search" (keyup.esc)="emitClose()">
-      <button (click)="emitClose()">
+      <button (click)="emitClose()" nbButton ghost>
         <nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
       </button>
       <div class="form-wrapper">
@@ -162,6 +162,9 @@ export class NbSearchFieldComponent implements OnChanges, AfterViewInit {
   }
 }
 
+export type NbSearchType = 'modal-zoomin' | 'rotate-layout' | 'modal-move' |
+  'curtain' | 'column-curtain' | 'modal-drop' | 'modal-half';
+
 /**
  * Beautiful full-page search control.
  *
@@ -209,7 +212,7 @@ export class NbSearchFieldComponent implements OnChanges, AfterViewInit {
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['styles/search.component.scss'],
   template: `
-    <button #searchButton class="start-search" (click)="emitActivate()">
+    <button #searchButton class="start-search" (click)="emitActivate()" nbButton ghost>
       <nb-icon icon="search-outline" pack="nebular-essentials"></nb-icon>
     </button>
     <nb-search-field
@@ -256,10 +259,10 @@ export class NbSearchComponent implements OnInit, OnDestroy {
    * modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
    * @type {string}
    */
-  @Input() type: string;
+  @Input() type: NbSearchType;
 
   @ViewChild(NbPortalDirective) searchFieldPortal: NbPortalDirective;
-  @ViewChild('searchButton') searchButton: ElementRef<HTMLElement>;
+  @ViewChild('searchButton', { read: ElementRef }) searchButton: ElementRef<HTMLElement>;
 
   constructor(
     private searchService: NbSearchService,
diff --git a/src/framework/theme/components/search/search.module.ts b/src/framework/theme/components/search/search.module.ts
index b129385a8e..a31eaf4397 100644
--- a/src/framework/theme/components/search/search.module.ts
+++ b/src/framework/theme/components/search/search.module.ts
@@ -8,6 +8,7 @@ import { NgModule } from '@angular/core';
 import { NbSharedModule } from '../shared/shared.module';
 import { NbOverlayModule } from '../cdk/overlay/overlay.module';
 import { NbIconModule } from '../icon/icon.module';
+import { NbButtonModule } from '../button/button.module';
 
 import { NbSearchComponent, NbSearchFieldComponent } from './search.component';
 import { NbSearchService } from './search.service';
@@ -18,6 +19,7 @@ import { NbSearchService } from './search.service';
     NbSharedModule,
     NbOverlayModule,
     NbIconModule,
+    NbButtonModule,
   ],
   declarations: [
     NbSearchComponent,
diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
index 72aad263b2..7bc298ba91 100644
--- a/src/framework/theme/styles/themes/_default.scss
+++ b/src/framework/theme/styles/themes/_default.scss
@@ -203,6 +203,11 @@ $theme: (
   font-family-primary: unquote('Open Sans, sans-serif'),
   font-family-secondary: unquote('Raleway, sans-serif'),
 
+  text-heading-1-font-family: font-family-secondary,
+  text-heading-1-font-size: 4.5rem,
+  text-heading-1-font-weight: 800,
+  text-heading-1-line-height: 5rem,
+
   text-heading-6-font-family: font-family-secondary,
   text-heading-6-font-size: 1.25rem,
   text-heading-6-font-weight: 800,
@@ -600,14 +605,22 @@ $theme: (
   actions-giant-padding: 0 1.25rem,
   actions-giant-text-font-size: text-button-giant-font-size,
 
-  search-btn-open-fg: color-fg,
-  search-btn-close-fg: color-fg,
-  search-bg: layout-bg,
-  search-bg-secondary: color-fg,
-  search-text: color-fg-heading,
-  search-info: color-fg,
-  search-dash: color-fg,
-  search-placeholder: color-fg,
+  search-background-color: color-basic-100,
+  search-divider-color: divider-color,
+  search-divider-style: solid,
+  search-divider-width: 0.25rem,
+  search-extra-background-color: color-primary,
+  search-text-color: text-dark-color,
+  search-text-font-family: text-heading-1-font-family,
+  search-text-font-size: text-heading-1-font-size,
+  search-text-font-weight: text-heading-1-font-weight,
+  search-text-line-height: text-heading-1-line-height,
+  search-placeholder-text-color: text-hint-color,
+  search-info-text-color: text-hint-color,
+  search-info-text-font-family: text-subtitle-font-family,
+  search-info-text-font-size: text-subtitle-font-size,
+  search-info-text-font-weight: text-subtitle-font-weight,
+  search-info-text-line-height: text-subtitle-line-height,
 
   smart-table-header-font-family: font-secondary,
   smart-table-header-font-size: font-size,