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;