feat: add basic and control statuses (#2047)

Author: yggg

.stylelintrc.json

@@ -19,7 +19,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "s", "rem"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "vh", "vw", "vmax", "s", "rem"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",

e2e/layout-theme.e2e-spec.ts

@@ -57,7 +57,7 @@ describe('nb-layout theme', () => {
       expect(value).toEqual(themeDefault);
     });
     cardHeader.getCssValue('color').then(value => {
-      expect(value).toEqual('rgba(25, 32, 56, 1)');
+      expect(value).toEqual('rgba(34, 43, 69, 1)');
     });
     cardHeader.getCssValue('text-decoration').then(value => {
       expect(value).toMatch('none');

src/app/components-list/components-overlay.component.scss

@@ -6,7 +6,7 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  z-index: 9999;
+  z-index: 99999;
   overflow-y: auto;
   padding: 2rem;
 }

src/framework/bootstrap/styles/_button-group.scss

@@ -251,7 +251,7 @@
         color: nb-theme(button-filled-#{$status}-text-color);
       }
       .btn-outline-#{$status} {
-        background-color: nb-theme(button-outline-background-color);
+        background-color: nb-theme(button-outline-#{$status}-background-color);
         border-color: nb-theme(button-outline-#{$status}-border-color);
         color: nb-theme(button-outline-#{$status}-text-color);
       }

src/framework/bootstrap/styles/_buttons.scss

@@ -18,7 +18,7 @@
     font-weight: nb-theme(button-text-font-weight);
 
     &:focus {
-      box-shadow: 0 0 0 nb-theme(button-outline-width) nb-theme(button-outline-color);
+      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color));
       outline: none;
     }
 

src/framework/bootstrap/styles/_dropdowns.scss

@@ -19,7 +19,7 @@
     background-color: nb-theme(select-option-background-color);
     color: nb-theme(select-option-text-color);
     font-family: nb-theme(select-text-font-family);
-    font-weight: nb-theme(select-text-font-weight);
+    font-weight: nb-theme(select-medium-text-font-weight);
     font-size: nb-theme(select-medium-text-font-size);
     line-height: nb-theme(select-medium-text-line-height);
 

src/framework/bootstrap/styles/_forms.scss

@@ -10,36 +10,36 @@
 @mixin nb-b-forms-theme() {
 
   .form-control {
-    background-color: nb-theme(input-background-color);
-    border-color: nb-theme(input-border-color);
+    background-color: nb-theme(input-basic-background-color);
+    border-color: nb-theme(input-basic-border-color);
     border-style: nb-theme(input-border-style);
     border-width: nb-theme(input-border-width);
-    color: nb-theme(input-text-color);
+    color: nb-theme(input-basic-text-color);
     font-family: nb-theme(input-text-font-family);
     @include nb-component-animation(border, background-color, color);
 
     &::placeholder {
-      color: nb-theme(input-placeholder-text-color);
+      color: nb-theme(input-basic-placeholder-text-color);
       font-family: nb-theme(input-placeholder-text-font-family);
       text-overflow: ellipsis;
     }
 
     &:focus {
       outline: none;
-      border-color: nb-theme(input-focus-border-color);
+      border-color: nb-theme(input-basic-focus-border-color);
     }
 
     &:hover {
-      border-color: nb-theme(input-hover-border-color);
+      border-color: nb-theme(input-basic-hover-border-color);
     }
 
     &:disabled {
-      background-color: nb-theme(input-disabled-background-color);
-      border-color: nb-theme(input-disabled-border-color);
-      color: nb-theme(input-disabled-text-color);
+      background-color: nb-theme(input-basic-disabled-background-color);
+      border-color: nb-theme(input-basic-disabled-border-color);
+      color: nb-theme(input-basic-disabled-text-color);
 
       &::placeholder {
-        color: nb-theme(input-disabled-placeholder-text-color);
+        color: nb-theme(input-basic-disabled-placeholder-text-color);
       }
     }
 

src/framework/bootstrap/styles/_outline-buttons.scss

@@ -7,33 +7,33 @@
 @import 'status-buttons';
 
 @mixin b-btn-outline($status) {
-  background-color: nb-theme(button-outline-background-color);
+  background-color: nb-theme(button-outline-#{$status}-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);
   border-color: nb-theme(button-outline-#{$status}-border-color);
   color: nb-theme(button-outline-#{$status}-text-color);
 
   &:focus {
-    background-color: nb-theme(button-outline-background-color);
+    background-color: nb-theme(button-outline-#{$status}-background-color);
     border-color: nb-theme(button-outline-#{$status}-focus-border-color);
     color: nb-theme(button-outline-#{$status}-focus-text-color);
   }
 
   &:hover {
-    background-color: nb-theme(button-outline-background-color);
+    background-color: nb-theme(button-outline-#{$status}-background-color);
     border-color: nb-theme(button-outline-#{$status}-hover-border-color);
     color: nb-theme(button-outline-#{$status}-hover-text-color);
   }
 
   &:active {
-    background-color: nb-theme(button-outline-background-color);
+    background-color: nb-theme(button-outline-#{$status}-background-color);
     border-color: nb-theme(button-outline-#{$status}-active-border-color);
     color: nb-theme(button-outline-#{$status}-active-text-color);
   }
 
   &[disabled] {
-    background-color: nb-theme(button-outline-background-color);
+    background-color: nb-theme(button-outline-#{$status}-disabled-background-color);
     border-color: nb-theme(button-outline-#{$status}-disabled-border-color);
     color: nb-theme(button-outline-#{$status}-disabled-text-color);
   }

src/framework/theme/components/alert/_alert.component.theme.scss

@@ -4,22 +4,10 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@mixin nb-alert-header() {
-  padding: nb-theme(alert-padding);
-  border-bottom: 1px solid nb-theme(alert-separator);
-  border-top-left-radius: nb-theme(alert-border-radius);
-  border-top-right-radius: nb-theme(alert-border-radius);
-  color: nb-theme(alert-fg-heading);
-
-  @include nb-headings();
-}
-
 @mixin nb-alert-theme() {
   nb-alert {
-    background-color: nb-theme(alert-background-color);
     border-radius: nb-theme(alert-border-radius);
     box-shadow: nb-theme(alert-shadow);
-    color: nb-theme(alert-text-color);
     font-family: nb-theme(alert-text-font-family);
     font-size: nb-theme(alert-text-font-size);
     font-weight: nb-theme(alert-text-font-weight);

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

@@ -8,7 +8,7 @@ import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/co
 
 import { NbComponentSize } from '../component-size';
 import { NbComponentStatus } from '../component-status';
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
 
 
 /**
@@ -46,11 +46,11 @@ import { convertToBoolProperty } from '../helpers';
  * ```
  *
  * Colored alerts could be simply configured by providing a `status` property:
- * @stacked-example(Colored Alert, alert/alert-colors.component)
+ * @stacked-example(Alert status, alert/alert-colors.component)
  *
  * It is also possible to assign an `accent` property for a slight alert highlight
  * as well as combine it with `status`:
- * @stacked-example(Accent Alert, alert/alert-accents.component)
+ * @stacked-example(Alert accent, alert/alert-accents.component)
  *
  * And `outline` property:
  * @stacked-example(Outline Alert, alert/alert-outline.component)
@@ -59,15 +59,13 @@ import { convertToBoolProperty } from '../helpers';
  *
  * @styles
  *
- * alert-background-color:
  * alert-border-radius:
  * alert-bottom-margin:
  * alert-padding:
  * alert-scrollbar-color:
  * alert-scrollbar-background-color:
  * alert-scrollbar-width:
  * alert-shadow:
- * alert-text-color:
  * alert-text-font-family:
  * alert-text-font-size:
  * alert-text-font-weight:
@@ -79,6 +77,8 @@ import { convertToBoolProperty } from '../helpers';
  * alert-medium-padding:
  * alert-large-height:
  * alert-giant-height:
+ * alert-basic-background-color:
+ * alert-basic-text-color:
  * alert-primary-background-color:
  * alert-primary-text-color:
  * alert-success-background-color:
@@ -89,17 +89,23 @@ import { convertToBoolProperty } from '../helpers';
  * alert-warning-text-color:
  * alert-danger-background-color:
  * alert-danger-text-color:
+ * alert-control-background-color:
+ * alert-control-text-color:
+ * alert-accent-basic-color:
  * alert-accent-primary-color:
  * alert-accent-info-color:
  * alert-accent-success-color:
  * alert-accent-warning-color:
  * alert-accent-danger-color:
+ * alert-accent-control-color:
  * alert-outline-width:
+ * alert-outline-basic-color:
  * alert-outline-primary-color:
  * alert-outline-info-color:
  * alert-outline-success-color:
  * alert-outline-warning-color:
  * alert-outline-danger-color:
+ * alert-outline-control-color:
  */
 @Component({
   selector: 'nb-alert',
@@ -122,21 +128,31 @@ export class NbAlertComponent {
 
   /**
    * Alert status (adds specific styles):
-   * `primary`, `success`, `info`, `warning`, `danger`.
-   * Unset by default.
+   * `basic` (default), `primary`, `success`, `info`, `warning`, `danger`, `control`.
    */
-  @Input() status: '' | NbComponentStatus = '';
+  @Input()
+  get status(): NbComponentStatus {
+    return this._status;
+  }
+  set status(value: NbComponentStatus) {
+    if ((value as string) === '') {
+      emptyStatusWarning('NbAlert');
+      value = 'basic';
+    }
+    this._status = value;
+  }
+  protected _status: NbComponentStatus = 'basic';
 
   /**
    * Alert accent (color of the top border):
-   * `primary`, `success`, `info`, `warning`, `danger`.
+   * `basic`, `primary`, `success`, `info`, `warning`, `danger`, `control`.
    * Unset by default.
    */
   @Input() accent: '' | NbComponentStatus = '';
 
   /**
    * Alert outline (color of the border):
-   * `primary`, `success`, `info`, `warning`, `danger`.
+   * `basic`, `primary`, `success`, `info`, `warning`, `danger`, `control`.
    * Unset by default.
    */
   @Input() outline: '' | NbComponentStatus = '';
@@ -217,6 +233,16 @@ export class NbAlertComponent {
     return this.status === 'danger';
   }
 
+  @HostBinding('class.status-basic')
+  get basic() {
+    return this.status === 'basic';
+  }
+
+  @HostBinding('class.status-control')
+  get control() {
+    return this.status === 'control';
+  }
+
   @HostBinding('class.accent-primary')
   get primaryAccent() {
     return this.accent === 'primary';
@@ -242,6 +268,16 @@ export class NbAlertComponent {
     return this.accent === 'danger';
   }
 
+  @HostBinding('class.accent-basic')
+  get basicAccent() {
+    return this.accent === 'basic';
+  }
+
+  @HostBinding('class.accent-control')
+  get controlAccent() {
+    return this.accent === 'control';
+  }
+
   @HostBinding('class.outline-primary')
   get primaryOutline() {
     return this.outline === 'primary';
@@ -266,4 +302,14 @@ export class NbAlertComponent {
   get dangerOutline() {
     return this.outline === 'danger';
   }
+
+  @HostBinding('class.outline-basic')
+  get basicOutline() {
+    return this.outline === 'basic';
+  }
+
+  @HostBinding('class.outline-control')
+  get controlOutline() {
+    return this.outline === 'control';
+  }
 }

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

@@ -60,6 +60,8 @@ export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;
  * badge-text-font-weight:
  * badge-text-line-height:
  * badge-padding:
+ * badge-basic-background-color:
+ * badge-basic-text-color:
  * badge-primary-background-color:
  * badge-primary-text-color:
  * badge-success-background-color:
@@ -70,6 +72,8 @@ export type NbBadgePosition = NbBadgePhysicalPosition | NbBadgeLogicalPosition;
  * badge-warning-text-color:
  * badge-danger-background-color:
  * badge-danger-text-color:
+ * badge-control-background-color:
+ * badge-control-text-color:
  */
 @Component({
   selector: 'nb-badge',
@@ -104,7 +108,7 @@ export class NbBadgeComponent {
 
   /**
    * Badge status (adds specific styles):
-   * 'primary', 'info', 'success', 'warning', 'danger'
+   * 'basic', 'primary', 'info', 'success', 'warning', 'danger', 'control'
    */
   @Input() status: NbComponentStatus = 'primary';
 
@@ -133,6 +137,16 @@ export class NbBadgeComponent {
     return this.status === 'danger';
   }
 
+  @HostBinding('class.status-basic')
+  get basic(): boolean {
+    return this.status === 'basic';
+  }
+
+  @HostBinding('class.status-control')
+  get control(): boolean {
+    return this.status === 'control';
+  }
+
   @HostBinding('class.position-top')
   get top(): boolean {
     return this.position.includes('top');

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

@@ -12,6 +12,10 @@
     border-width: nb-theme(button-ghost-border-width);
     text-transform: nb-theme(button-ghost-text-transform);
 
+    &:focus {
+      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true));
+    }
+
     @each $size in nb-get-sizes() {
       &.size-#{$size} {
         padding: nb-theme(button-ghost-#{$size}-padding);

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

@@ -6,11 +6,14 @@
 
 @mixin button-outline() {
   [nbButton].appearance-outline {
-    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);
 
+    &:focus {
+      @include nb-outline(nb-theme(button-outline-width), nb-theme(button-outline-color), (inset-shadow: true));
+    }
+
     @each $size in nb-get-sizes() {
       &.size-#{$size} {
         padding: nb-theme(button-outline-#{$size}-padding);
@@ -19,6 +22,7 @@
 
     @each $status in nb-get-statuses() {
       &.status-#{$status} {
+        background-color: nb-theme(button-outline-#{$status}-background-color);
         border-color: nb-theme(button-outline-#{$status}-border-color);
         color: nb-theme(button-outline-#{$status}-text-color);