feat(theme): add corporate theme (#1727)

src/app/pages/ui-features/buttons/buttons.component.scss

@@ -39,6 +39,10 @@
         width: $button-size;
         height: $button-size;
         border-radius: nb-theme(btn-border-radius);
+
+        @include nb-for-theme(corporate) {
+          border-radius: nb-theme(btn-semi-round-border-radius);
+        }
       }
 
       .state-details {

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.html

@@ -17,6 +17,13 @@
               <span class="subheader">{{ hb[themeName].border }}</span>
             </div>
           </div>
+          <div class="state-container" *ngIf="hb[themeName].color">
+            <div class="state-value color"></div>
+            <div class="state-details">
+              <span class="header">Color</span>
+              <span class="subheader">{{ hb[themeName].color }}</span>
+            </div>
+          </div>
           <div class="state-container" *ngIf="hb[themeName].gradientLeft">
             <div class="state-value gradient"></div>
             <div class="state-details">
@@ -51,8 +58,8 @@
             <div class="state-value glow" [ngClass]="{ 'none': !hb[themeName].glow }"></div>
             <div class="state-details" *ngIf="hb[themeName].glow">
               <span class="header">Glow</span>
-              <span class="subheader">0 2px 12px 0</span>
-              <span class="subheader">{{ hb[themeName].glow }}</span>
+              <span class="subheader">{{ hb[themeName].glow.params }}</span>
+              <span class="subheader">{{ hb[themeName].glow.color }}</span>
             </div>
             <div class="state-details" *ngIf="!hb[themeName].glow">
               <span class="header">No Glow</span>

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.scss

@@ -39,6 +39,9 @@
   }
 
   .primary-container {
+    .color {
+      background-color: nb-theme(color-primary);
+    }
     .gradient {
       @include btn-hero-primary-gradient();
     }
@@ -51,6 +54,9 @@
   }
 
   .warning-container {
+    .color {
+      background-color: nb-theme(color-warning);
+    }
     .gradient {
       @include btn-hero-warning-gradient();
     }
@@ -63,6 +69,9 @@
   }
 
   .success-container {
+    .color {
+      background-color: nb-theme(color-success);
+    }
     .gradient {
       @include btn-hero-success-gradient();
     }
@@ -75,6 +84,9 @@
   }
 
   .info-container {
+    .color {
+      background-color: nb-theme(color-info);
+    }
     .gradient {
       @include btn-hero-info-gradient();
     }
@@ -87,6 +99,9 @@
   }
 
   .danger-container {
+    .color {
+      background-color: nb-theme(color-danger);
+    }
     .gradient {
       @include btn-hero-danger-gradient();
     }
@@ -99,6 +114,9 @@
   }
 
   .secondary-container {
+    .color {
+      background-color: nb-theme(btn-secondary-bg);
+    }
     .border {
       color: nb-theme(btn-secondary-color);
       border: nb-theme(btn-secondary-border-width) solid nb-theme(btn-secondary-border);

src/app/pages/ui-features/buttons/hero-buttons/hero-buttons.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { NbThemeService } from '@nebular/theme';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'ngx-hero-buttons',
@@ -10,7 +11,7 @@ export class HeroButtonComponent implements OnDestroy {
 
   themeName = 'default';
   settings: Array<any>;
-  themeSubscription: any;
+  themeSubscription: Subscription;
 
   constructor(private themeService: NbThemeService) {
     this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
@@ -29,12 +30,22 @@ export class HeroButtonComponent implements OnDestroy {
         gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
         gradientRight: colors.primary,
       },
+      corporate: {
+        color: colors.primary,
+        glow: {
+          params: '0 0 20px 0',
+          color: 'rgba (115, 161, 255, 0.5)',
+        },
+      },
       cosmic: {
         gradientLeft: `adjust-hue(${colors.primary}, 20deg)`,
         gradientRight: colors.primary,
         bevel: `shade(${colors.primary}, 14%)`,
         shadow: 'rgba (6, 7, 64, 0.5)',
-        glow: `adjust-hue(${colors.primary}, 10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.primary}, 10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-warning',
@@ -45,12 +56,22 @@ export class HeroButtonComponent implements OnDestroy {
         gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
         gradientRight: colors.warning,
       },
+      corporate: {
+        color: colors.warning,
+        glow: {
+          params: '0 0 20px 0',
+          color: 'rgba (256, 163, 107, 0.5)',
+        },
+      },
       cosmic: {
         gradientLeft: `adjust-hue(${colors.warning}, 10deg)`,
         gradientRight: colors.warning,
         bevel: `shade(${colors.warning}, 14%)`,
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: `adjust-hue(${colors.warning}, 5deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.warning}, 5deg)`,
+        },
       },
     }, {
       class: 'btn-hero-success',
@@ -61,12 +82,22 @@ export class HeroButtonComponent implements OnDestroy {
         gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
         gradientRight: colors.success,
       },
+      corporate: {
+        color: colors.success,
+        glow: {
+          params: '0 0 20px 0',
+          color: 'rgba (93, 207, 227, 0.5)',
+        },
+      },
       cosmic: {
         gradientLeft: `adjust-hue(${colors.success}, 20deg)`,
         gradientRight: colors.success,
         bevel: `shade(${colors.success}, 14%)`,
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: `adjust-hue(${colors.success}, 10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.success}, 10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-info',
@@ -77,12 +108,22 @@ export class HeroButtonComponent implements OnDestroy {
         gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
         gradientRight: colors.info,
       },
+      corporate: {
+        color: colors.info,
+        glow: {
+          params: '0 0 20px 0',
+          color: 'rgba (186, 127, 236, 0.5)',
+        },
+      },
       cosmic: {
         gradientLeft: `adjust-hue(${colors.info}, -10deg)`,
         gradientRight: colors.info,
         bevel: `shade(${colors.info}, 14%)`,
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: `adjust-hue(${colors.info}, -5deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.info}, -5deg)`,
+        },
       },
     }, {
       class: 'btn-hero-danger',
@@ -93,12 +134,22 @@ export class HeroButtonComponent implements OnDestroy {
         gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
         gradientRight: colors.danger,
       },
+      corporate: {
+        color: colors.danger,
+        glow: {
+          params: '0 0 20px 0',
+          color: 'rgba (255, 107, 131, 0.5)',
+        },
+      },
       cosmic: {
         gradientLeft: `adjust-hue(${colors.danger}, -20deg)`,
         gradientRight: colors.danger,
         bevel: `shade(${colors.danger}, 14%)`,
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: `adjust-hue(${colors.danger}, -10deg)`,
+        glow: {
+          params: '0 2px 12px 0',
+          color: `adjust-hue(${colors.danger}, -10deg)`,
+        },
       },
     }, {
       class: 'btn-hero-secondary',
@@ -108,11 +159,17 @@ export class HeroButtonComponent implements OnDestroy {
       default: {
         border: '#dadfe6',
       },
+      corporate: {
+        color: '#edf2f5',
+      },
       cosmic: {
         border: colors.primary,
         bevel: '#665ebd',
         shadow: 'rgba (33, 7, 77, 0.5)',
-        glow: 'rgba (146, 141, 255, 1)',
+        glow: {
+          params: '0 2px 12px 0',
+          color: 'rgba (146, 141, 255, 1)',
+        },
       },
     }];
   }

src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.scss

@@ -14,6 +14,10 @@
       font-size: 2.5rem;
       @include nb-ltr(margin-right, 1rem);
       @include nb-rtl(margin-left, 1rem);
+
+      @include nb-for-theme(corporate) {
+        color: nb-theme(actions-fg);
+      }
     }
 
     span {

src/app/pages/ui-features/buttons/shape-buttons/shape-buttons.component.scss

@@ -7,6 +7,7 @@
     padding: 0 0 29px;
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
   }
 
   .shape-container {