[ADF-1434] Theming ADF component (#2228)

* start custom theming adf

* demo shell cleaning

* login mdl cleaning

* uploader mdl cleaning

* prebuilt themes

* theme picker in demo shell

* clean custom colors and mdl

* fix rebase errors

* theming from color style guide

* dev default theme orange purple

* fix color accent inverted in picker

* fix test and add colors classes

* fix tag component theming issues

* fix datatable theming

* add theming guides

ng2-components/ng2-activiti-processlist/README.md

@@ -37,7 +37,7 @@
   * [Events](#events-7)
 - [Process Audit Directive](#process-audit-directive)
   * [Properties](#properties-9)
-  * [Events](#events-8)
+    + [Events](#events-8)
 - [Build from sources](#build-from-sources)
 - [NPM scripts](#npm-scripts)
 - [Demo](#demo)

ng2-components/ng2-activiti-processlist/index.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { ModuleWithProviders, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
 import {
     MdButtonModule,
     MdCardModule,

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.css

@@ -1,23 +0,0 @@
-.mdl-list__item {
-    cursor: pointer;
-}
-
-.activiti-filters__entry {
-    cursor: pointer;
-}
-
-.activiti-filters__entry-icon {
-    margin-right: 12px !important;
-}
-
-.activiti-filters__entry.active {
-    color: rgb(68,138,255);
-}
-
-.activiti-filters__entry:hover {
-    opacity: 0.8;
-}
-
-.activiti-filters__entry.active .activiti-filters__entry-icon {
-    color: rgb(68,138,255);
-}

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.html

@@ -1,11 +1,12 @@
 <div class="menu-container">
-    <ul class='mdl-list'>
-        <li class="mdl-list__item activiti-filters__entry" (click)="selectFilter(filter)" *ngFor="let filter of filters"
-            [class.active]="currentFilter === filter">
-            <span class="mdl-list__item-primary-content">
-            <i *ngIf="showIcon" class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="filter.name + '_filter'" >assignment</i>
+    <md-list>
+        <md-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
+                      [class.active]="currentFilter === filter">
+                        <span class="mdl-list__item-primary-content">
+            <i *ngIf="showIcon" class="material-icons mdl-list__item-icon adf-filters__entry-icon"
+               [attr.data-automation-id]="filter.name + '_filter'">assignment</i>
             {{filter.name}}
             </span>
-        </li>
-    </ul>
-</div>
+        </md-list-item>
+    </md-list>
+</div>

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.scss

@@ -0,0 +1,28 @@
+@mixin mat-filters-process-theme($theme) {
+    $primary: map-get($theme, primary);
+
+    .mdl-list__item {
+        cursor: pointer;
+    }
+
+    .activiti-filters__entry {
+        cursor: pointer;
+    }
+
+    .activiti-filters__entry-icon {
+        margin-right: 12px !important;
+    }
+
+    .activiti-filters__entry.active {
+        color: mat-color($primary);
+    }
+
+    .activiti-filters__entry:hover {
+        opacity: 0.8;
+    }
+
+    .activiti-filters__entry.active .activiti-filters__entry-icon {
+        color: mat-color($primary);
+    }
+
+}

ng2-components/ng2-activiti-processlist/src/components/process-filters.component.ts

@@ -23,7 +23,7 @@ import { ProcessService } from './../services/process.service';
 @Component({
     selector: 'adf-process-instance-filters, activiti-process-instance-filters',
     templateUrl: './process-filters.component.html',
-    styleUrls: ['process-filters.component.css']
+    styleUrls: ['process-filters.component.scss']
 })
 export class ProcessFiltersComponent implements OnInit, OnChanges {