feat: Created the welcome lib for theme demonstration

angular.json

@@ -104,6 +104,25 @@
                     }
                 }
             }
+        },
+        "welcome": {
+            "root": "libs/feature/welcome",
+            "sourceRoot": "libs/feature/welcome/src",
+            "projectType": "library",
+            "prefix": "mc-web",
+            "architect": {
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "libs/feature/welcome/tsconfig.lib.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
         }
     },
     "defaultProject": "mc-web"

apps/mc-web/src/app/app-routing.module.ts

@@ -6,8 +6,12 @@ const routes: Routes = [
     {
         path: '',
         pathMatch: 'full',
-        redirectTo: 'auth'
-    }
+        redirectTo: 'welcome'
+    },
+    {
+        path: 'welcome',
+        loadChildren: () => import('@libs/feature/welcome').then(m => m.WelcomeModule)
+    },
 ];
 
 

apps/mc-web/src/app/app.component.html

@@ -1 +1,29 @@
-<router-outlet></router-outlet>
+<div [classList]="themeName + ' theme-wrapper'">
+
+    <mc-navbar>
+        <mc-navbar-container position="left">
+            <mc-navbar-item>
+                <i mc-icon="mc-hamburger_16"></i>
+            </mc-navbar-item>
+            <mc-navbar-brand>
+                <mc-navbar-logo>
+                    <svg class="logo" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m0 32h32v-32h-32z" fill="#c00"/><path d="m11.7013126 2.13713398h3.4056699v5.22500971c.0083884 1.2815534 1.0494758 2.31984466 2.3304078 2.32543689v-1.89825242c-.2370486-.00528156-.4296699-.19231068-.432466-.42718447v-5.22500971h3.4050485v-1.89794175h-8.7086602zm-3.29065629-1.89806602h-5.95976699-.0167767c-1.28062136.00590291-2.3192233 1.04978641-2.32481553 2.33351456h1.89794174c.00590292-.23735922.19262136-.42407767.42687379-.43557281h5.97654369c.24295146 0 .44054369.19821359.44054369.44427184v.97646602c0 .23735923-.19759223.43867961-.44054369.43867961l-5.97654369.00248544c-1.28062136.01118447-2.3192233 1.04667961-2.32481553 2.33071845v3.35782524h1.89794174v-3.35782524c.00590292-.23207767.19262136-.42438835.42687379-.42718447h5.97654369c1.28932039 0 2.34190289-1.05227184 2.34190289-2.34469903v-.97646602c0-1.29242718-1.0525825-2.34221359-2.34190289-2.34221359" fill="#fff" transform="translate(5.592 10.889)"/></g></svg>
+                </mc-navbar-logo>
+                <mc-navbar-title>PT Brand</mc-navbar-title>
+            </mc-navbar-brand>
+        </mc-navbar-container>
+        <mc-navbar-container position="right">
+            <mc-navbar-item>
+                <select name="theme" [(ngModel)]="themeName">
+                    <option value="theme-default">theme-default</option>
+                    <option value="theme-dark">theme-dark</option>
+                    <option value="theme-green">theme-green</option>
+                </select>
+            </mc-navbar-item>
+
+        </mc-navbar-container>
+    </mc-navbar>
+
+    <router-outlet></router-outlet>
+</div>
+

apps/mc-web/src/app/app.component.ts

@@ -6,4 +6,5 @@ import { Component } from '@angular/core';
     templateUrl: './app.component.html'
 })
 export class AppComponent {
+    themeName = 'theme-default';
 }

apps/mc-web/src/app/app.module.ts

@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
+import { McNavbarModule } from '@ptsecurity/mosaic';
 
 import { environment } from '../environments/environment';
 
@@ -19,6 +21,9 @@ import { AppComponent } from './app.component';
         BrowserModule,
         BrowserAnimationsModule,
 
+        FormsModule,
+        McNavbarModule,
+
         StoreDevtoolsModule.instrument({
             name: 'mc-web',
             logOnly: environment.production

apps/mc-web/src/app/app.theme.scss

@@ -20,11 +20,16 @@ $typography: mc-typography-config(
 // Import app and page component themes here to enable theming for them
 // @import 'path/to/component/component-name.theme';
 
-@mixin app-components-theme($theme) {
+@import './../../../../libs/feature/welcome/src/lib/welcome-table/_welcome-table-theme';
 
-    // @include component-name($theme);
+@mixin app-components-theme($theme) {
+     @include welcome-table-theme($theme);
 }
 
+@include mosaic-visual();
+@include cdk-a11y();
+@include cdk-overlay();
+
 // -----------------------------------------------------------------------------------------------------
 // @ Define the default theme
 // -----------------------------------------------------------------------------------------------------
@@ -38,10 +43,26 @@ $warning: mc-palette($mc-yellow, 60, 200, 400);
 
 $theme: mc-light-theme($primary, $second, $error, $info, $success, $warning);
 
-body.theme-default {
+body,
+.theme-wrapper {
+    margin: 0;
+    padding: 0;
+}
 
-    @include mosaic-theme($theme);
+.theme-wrapper {
+    width: 100%;
+    height: 100vh;
+}
+
+.theme-default {
 
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    background-color: mc-color($background, background);
+    color: mc-color($foreground, text);
+
+    @include mosaic-theme($theme);
     @include app-components-theme($theme);
 }
 
@@ -58,9 +79,71 @@ $dark-warning: mc-palette($mc-yellow, 200, 400, 700);
 
 $dark-theme: mc-dark-theme($dark-primary, $dark-second, $dark-error, $dark-info, $dark-success, $dark-warning);
 
-body.theme-dark {
+.theme-dark {
 
-    @include mosaic-theme($dark-theme);
+    $background: map-get($dark-theme, background);
+    $foreground: map-get($dark-theme, foreground);
+
+    background-color: mc-color($background, background);
+    color: mc-color($foreground, text);
 
+    @include mosaic-theme($dark-theme);
     @include app-components-theme($dark-theme);
 }
+
+// -----------------------------------------------------------------------------------------------------
+// @ Define a green theme
+// -----------------------------------------------------------------------------------------------------
+
+
+$mc-orange: (
+    40: #fdfaf3,
+    60: #fcf5e8,
+    100: #f8ebd1,
+    200: #f0d49b,
+    300: #e7bd68,
+    400: #dfa739,
+    500: #d6930d,
+    560: #bb800a,
+    600: #aa7408,
+    700: #7d5504,
+    800: #503602,
+    A40: rgba(0, 0, 0, 0.04),
+    A60: rgba(0, 0, 0, 0.06),
+    A100: rgba(0, 0, 0, 0.1),
+    A200: rgba(0, 0, 0, 0.2),
+    A300: rgba(0, 0, 0, 0.3),
+    A500: rgba(0, 0, 0, 0.5),
+    contrast: (
+        40: $dark-text-default,
+        60: $dark-text-default,
+        100: $dark-text-default,
+        200: $dark-text-default,
+        300: $dark-text-default,
+        400: white,
+        500: white,
+        560: white,
+        600: white,
+        700: white,
+        800: white,
+    )
+);
+
+$green-primary: mc-palette($mc-green, 800, 500, 200);
+$green-second: mc-palette($mc-orange, 200, 400, 700);
+$green-error: mc-palette($mc-green, 200, 400, 700);
+
+$green-info: mc-palette($mc-green, 500, 200, 700);
+$green-success: mc-palette($mc-yellow, 100, 700, 200);
+$green-warning: mc-palette($mc-yellow, 200, 500, 700);
+
+$green-theme: mc-light-theme($green-primary, $green-second, $green-error, $green-info, $green-success, $green-warning);
+
+.theme-green {
+
+    background-color: mc-color($green-primary, 100);
+    color: mc-color($green-primary, 800);
+
+    @include mosaic-theme($green-theme);
+    @include app-components-theme($green-theme);
+}

libs/feature/welcome/src/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

libs/feature/welcome/src/lib/welcome-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { WelcomeComponent } from './welcome/welcome.component';
+
+
+const routes: Routes = [
+    { path: '', component: WelcomeComponent, pathMatch: 'full' },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class WelcomeRoutingModule {
+}

libs/feature/welcome/src/lib/welcome-table/_welcome-table-theme.scss

@@ -0,0 +1,16 @@
+@mixin welcome-table-theme($theme) {
+
+    $foreground: map-get($theme, foreground);
+    $second: map-get($theme, second);
+
+    .welcome-table {
+        td, th {
+            border: 1px solid mc-color($foreground, text);
+        }
+        th {
+            color: mc-color($foreground, text);
+            background-color: mc-color($second, 200);
+        }
+    }
+
+}

libs/feature/welcome/src/lib/welcome-table/welcome-table.component.html

@@ -0,0 +1,14 @@
+<table class="welcome-table">
+    <thead>
+    <tr>
+        <th>Index</th>
+        <th>Item</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let item of items; let i = index">
+        <td>{{i}}</td>
+        <td>{{item}}</td>
+    </tr>
+    </tbody>
+</table>

libs/feature/welcome/src/lib/welcome-table/welcome-table.component.scss

@@ -0,0 +1,9 @@
+.welcome-table {
+    width: 200px;
+    td, th {
+        line-height: 40px;
+        height: 40px;
+        vertical-align: middle;
+        text-align: center;
+    }
+}

libs/feature/welcome/src/lib/welcome-table/welcome-table.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'welcome-table',
+    templateUrl: './welcome-table.component.html',
+    styleUrls: ['./welcome-table.component.scss']
+})
+export class WelcomeTableComponent {
+
+    @Input() items: string[] = [];
+
+    constructor() {
+    }
+
+}

libs/feature/welcome/src/lib/welcome.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { McInputModule, McFormFieldModule, McToggleModule, McNavbarModule, McButtonModule } from '@ptsecurity/mosaic';
+
+import { WelcomeRoutingModule } from './welcome-routing.module';
+import { WelcomeTableComponent } from './welcome-table/welcome-table.component';
+import { WelcomeComponent } from './welcome/welcome.component';
+
+
+@NgModule({
+    declarations: [
+        WelcomeComponent,
+        WelcomeTableComponent
+    ],
+    imports: [
+        CommonModule,
+        WelcomeRoutingModule,
+        McInputModule,
+        McFormFieldModule,
+        McToggleModule,
+        McNavbarModule,
+        McButtonModule,
+        FormsModule
+    ]
+})
+export class WelcomeModule {
+}

libs/feature/welcome/src/lib/welcome/welcome.component.html

@@ -0,0 +1,70 @@
+
+
+
+<div class="container">
+
+    <h1 class="mc-display-1">Hello PT team!</h1>
+
+    <div class="layout-row block">
+        <div class="flex layout-column block">
+            <div class="flex block">
+                <div class="mb-1">
+                    <mc-form-field>
+                        <input mcInput [placeholder]="'Start typing'">
+                    </mc-form-field>
+                </div>
+
+
+                <div class="mb-1">
+                    <mc-form-field>
+                        <input mcInput [disabled]="true" [placeholder]="'Start typing'">
+                    </mc-form-field>
+                </div>
+                <div class="mb-1">
+                    <mc-form-field>
+                        <input mcInput [placeholder]="'Start typing'" [required]="true" [(ngModel)]="title">
+                    </mc-form-field>
+                </div>
+            </div>
+            <div class="flex block">
+                <div class="mb-1">
+                    <button mc-button color="primary">primary</button>
+                    &nbsp;
+                    <button mc-button color="second">second</button>
+                </div>
+
+                <div>
+                    <mc-toggle [checked]="true">
+                        Some text
+                    </mc-toggle>
+                </div>
+
+            </div>
+        </div>
+
+        <div class="flex block ml-2">
+            <div class="mc-alert mb-1 mc-alert_error mc-alert_dismissible">
+                <i class="mc mc-icon mc-info_16 mc-alert__icon"></i> Alert text error
+            </div>
+            <div class="mc-alert mb-1 mc-alert_warning mc-alert_dismissible">
+                <i class="mc mc-icon mc-info_16 mc-alert__icon"></i> Alert text warning
+            </div>
+            <div class="mc-alert mb-1 mc-alert_success mc-alert_dismissible">
+                <i class="mc mc-icon mc-info_16 mc-alert__icon"></i> Alert text success
+            </div>
+            <div class="mc-alert mb-1 mc-alert_info mc-alert_dismissible">
+                <i class="mc mc-icon mc-info_16 mc-alert__icon"></i> Alert text info
+            </div>
+            <div class="mc-alert mb-1 mc-alert_default mc-alert_dismissible">
+                <i class="mc mc-icon mc-info_16 mc-alert__icon"></i> Alert text default
+            </div>
+        </div>
+
+        <div class="flex block ml-2">
+
+            <welcome-table [items]="items"></welcome-table>
+
+        </div>
+    </div>
+
+</div>