Custom Material2 Style variables and theming (#2146)

* ADF theming Material2

* login style primary buttons and input

* fix color breadcrumb based on the material color

ng2-components/ng2-alfresco-core/styles/_colors.scss

@@ -1,4 +1,110 @@
 // Accent color palette
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
+$black-12-opacity: rgba(black, 0.12);
+$white-12-opacity: rgba(white, 0.12);
+$black-6-opacity: rgba(black, 0.06);
+$white-6-opacity: rgba(white, 0.06);
+
+$alfresco-warn: (
+    50: #ffebee,
+    100: #ffcdd2,
+    200: #ef9a9a,
+    300: #e57373,
+    400: #ef5350,
+    500: #f44336,
+    600: #e53935,
+    700: #d32f2f,
+    800: #c62828,
+    900: #b71c1c,
+    A100: #ff8a80,
+    A200: #ff5252,
+    A400: #ff1744,
+    A700: #d50000,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: $black-87-opacity,
+        400: $black-87-opacity,
+        500: white,
+        600: white,
+        700: white,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: white,
+        A400: white,
+        A700: white,
+    )
+);
+
+$alfresco-accent: (
+    50: #e8eaf6,
+    100: #c5cae9,
+    200: #9fa8da,
+    300: #7986cb,
+    400: #5c6bc0,
+    500: #3f51b5,
+    600: #3949ab,
+    700: #303f9f,
+    800: #283593,
+    900: #1a237e,
+    A100: #8c9eff,
+    A200: #536dfe,
+    A400: #3d5afe,
+    A700: #304ffe,
+    contrast: (
+        50: $black-87-opacity,
+        100: $black-87-opacity,
+        200: $black-87-opacity,
+        300: white,
+        400: white,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: $white-87-opacity,
+        900: $white-87-opacity,
+        A100: $black-87-opacity,
+        A200: white,
+        A400: white,
+        A700: $white-87-opacity,
+    )
+);
+
+$alfresco-primary: (
+    50: #fff3e0,
+    100: #ffe0b2,
+    200: #ffcc80,
+    300: #ffb74d,
+    400: #ffa726,
+    500: #ff9800,
+    600: #fb8c00,
+    700: #f57c00,
+    800: #ef6c00,
+    900: #e65100,
+    A100: #ffd180,
+    A200: #ffab40,
+    A400: #ff9100,
+    A700: #ff6d00,
+    contrast: (
+        50: $white-87-opacity,
+        100: $white-87-opacity,
+        200: $white-87-opacity,
+        300: $white-87-opacity,
+        400: $white-87-opacity,
+        500: $white-87-opacity,
+        600: $white-87-opacity,
+        700: $white-87-opacity,
+        800: white,
+        900: white,
+        A100: $black-87-opacity,
+        A200: $black-87-opacity,
+        A400: $black-87-opacity,
+        A700: black,
+    )
+);
+
 $alfresco-primary-accent--default: #ff9100;
 $alfresco-primary-accent--hue-1: #ffd180;
 $alfresco-primary-accent--hue-2: #ffab40;
@@ -35,3 +141,5 @@ $alfresco-disabled-text-color: rgba($alfresco-black, .26);
 $alfresco-divider-color: rgba($alfresco-black, .07);
 
 $alfresco-gray-background: #fafafa;
+
+$alfresco-gray-label: rgb(186, 186, 186);

ng2-components/ng2-alfresco-core/styles/_theming.scss

@@ -2,3 +2,14 @@
 @import 'variables';
 @import 'colors';
 @import 'mdl-overrides';
+
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+$primary: mat-palette($alfresco-primary);
+$accent:  mat-palette($alfresco-accent);
+$warn:    mat-palette($alfresco-warn);
+$theme:   mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);

ng2-components/ng2-alfresco-core/styles/_variables.scss

@@ -5,3 +5,6 @@ $ADF: adf;
 /* ANIMATION */
 $animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
 $animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
+$swift-ease-in-duration: 300ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;

ng2-components/ng2-alfresco-documentlist/src/components/breadcrumb/breadcrumb.component.scss

@@ -5,6 +5,18 @@ $breadcrumb-chevron-spacer: 2px;
 .adf-breadcrumb {
     display: flex;
 
+    &.mat-primary {
+        color: mat-color($primary);
+    }
+
+    &.mat-accent {
+        color: mat-color($accent);
+    }
+
+    &.mat-warn {
+        color: mat-color($warn);
+    }
+
     &-container {
         margin: 0;
         padding: 0;
@@ -17,7 +29,6 @@ $breadcrumb-chevron-spacer: 2px;
 
     &-item {
         padding-right: $breadcrumb-chevron-spacer;
-        color: $alfresco-secondary-text-color;
         overflow: hidden;
         display: flex;
         line-height: 24px;
@@ -32,10 +43,6 @@ $breadcrumb-chevron-spacer: 2px;
             overflow: hidden;
         }
 
-        &-anchor:hover, &.active {
-            color: $alfresco-primary-text-color;
-        }
-
         &.active {
             display: block;
         }

ng2-components/ng2-alfresco-login/src/components/login.component.html

@@ -24,7 +24,7 @@
 
                 <!--USERNAME FIELD-->
                 <div class="adf-login__field" [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}">
-                    <md-input-container class="adf-full-width" floatPlaceholder="never" color="accent">
+                    <md-input-container class="adf-full-width" floatPlaceholder="never" color="primary">
                         <input mdInput placeholder="{{'LOGIN.LABEL.USERNAME' | translate }}"
                                type="text"
                                class="adf-full-width"
@@ -43,7 +43,7 @@
 
                 <!--PASSWORD FIELD-->
                 <div class="adf-login__field alfresco-login__password">
-                    <md-input-container class="adf-full-width" floatPlaceholder="never" color="accent">
+                    <md-input-container class="adf-full-width" floatPlaceholder="never" color="primary">
                         <input mdInput placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
                                type="password"
                                [formControl]="form.controls['password']"
@@ -82,7 +82,7 @@
 
                 </button>
                 <div *ngIf="showRememberMe" class="adf-login__remember-me" id ="login-remember">
-                    <md-checkbox class="rememberme-cb" [checked]="rememberMe" (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}</md-checkbox>
+                    <md-checkbox color="primary" class="rememberme-cb" [checked]="rememberMe" (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}</md-checkbox>
                 </div>
             </div>
             <div *ngIf="footerTemplate || showLoginActions" class="mdl-card__actions mdl-card--border mdl-card__link">