feature(scss): update app scss & add theme docs (#39)

* update(theme): toggle ripple color

* feature(docs): add scss theming info

* Typo fix: docs/theme/theme.component.html ✌️

* renamed css to scss, fixed TSLint issues

src/app/app.component.scss

@@ -111,5 +111,10 @@ $md-warn: #C62828;
                 background-color: $md-accent-opacity;
             }
         }
+        &.md-slide-toggle-focused {
+            .md-ink-ripple {
+                background-color: $md-accent-opacity;
+            }
+        }
     }
 }

src/app/components/docs/docs.component.ts

@@ -55,6 +55,11 @@ export class DocsComponent {
     icon: 'photo_size_select_actual',
     route: 'icons',
     title: 'SVG Icon Sets',
+  }, {
+    description: 'Customize the SCSS color scheme',
+    icon: 'palette',
+    route: 'theme',
+    title: 'Custom Theme',
   }, {
     description: 'A full suite of test tools',
     icon: 'playlist_add_check',

src/app/components/docs/docs.routes.ts

@@ -9,6 +9,7 @@ import { BuildTasksComponent } from './build-tasks';
 import { DeploymentComponent } from './deployment';
 import { IconsComponent } from './icons';
 import { TestingComponent } from './testing';
+import { ThemeComponent } from './theme';
 
 export const docsRoutes: RouterConfig = [{
   children: [{
@@ -35,6 +36,9 @@ export const docsRoutes: RouterConfig = [{
     }, {
       component: TestingComponent,
       path: 'testing',
+    }, {
+      component: ThemeComponent,
+      path: 'theme',
     },
   ],
   component: DocsComponent,

src/app/components/docs/theme/index.ts

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

src/app/components/docs/theme/theme.component.html

@@ -0,0 +1,114 @@
+<md-card>
+  <md-card-title>Custom Theme</md-card-title>
+  <md-card-subtitle>SCSS variables to customize the color scheme</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <md-card>
+      <md-card-content>
+        IMPORTANT: This is a temporary workaround until a real <a href="https://github.com/angular/material2/issues/123" target="_blank">theming solution is solved upstream</a> in Angular-Material2.
+        Once they have that fixed, we'll remove this workaround.
+      </md-card-content>
+    </md-card>
+    <h3>SCSS Variables</h3>
+    <p>If you're using the <a href="https://github.com/Teradata/covalent-quickstart" target="_blank">Covalent Quickstart App</a>, edit <a href="https://github.com/Teradata/covalent-quickstart/blob/develop/src/app/app.component.scss" target="_blank">/src/app/app.component.scss</a></p>
+    <p>For the easiest route, just update these SCSS variables:</p>
+    <td-highlight lang="css">
+      /* Variables */
+      $md-primary: #0097A7;
+      $md-primary-opacity: rgba(0, 151, 167, 0.12);
+      $md-accent: #FF4081;
+      $md-accent-opacity: rgba(255, 64, 129, 0.12);
+      $md-warn: #FF9100;
+    </td-highlight>
+    <p>
+      and we'll override the core material2 styles with your theme preferences.
+    </p>
+  </md-card-content>
+  <md-divider></md-divider>
+  <md-card-actions>
+    <a md-button color="accent" target="_blank" href="https://material.google.com/style/color.html">Material Design Colors</a>
+    <a md-button [routerLink]="['../../style-guide','colors']">Teradata Color Style Guide</a>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-title>Material Design Color Palette</md-card-title>
+  <md-card-subtitle>Choose a primary, accent and warn color from the official Material color palette.</md-card-subtitle>
+  <md-divider></md-divider>
+  <md-card-content>
+    <h3 class="md-title"><span class="tc-light-blue-700">Light Blue Primary</span> / <span class="tc-orange-700">Orange Accent</span></h3>
+    <div layout-gt-xs="row" layout-margin>
+      <div flex-gt-xs="50" class="pad-top-sm">
+        <td-highlight lang="css">
+          /* Variables */
+          $md-primary: #0288D1;
+          $md-primary-opacity: rgba(2, 136, 209, 0.12);
+          $md-accent: #F57C00;
+          $md-accent-opacity: rgba(245, 124, 0, 0.12);
+          $md-warn: #D32F2F;
+        </td-highlight>
+      </div>
+      <div flex-gt-xs="50">
+        <md-card class="top-toolbar">
+          <md-toolbar class="bgc-light-blue-700 tc-white">
+            <md-toolbar-row>
+              <span></span>
+            </md-toolbar-row>
+            <md-toolbar-row>
+              <span>Toolbar</span>
+            </md-toolbar-row>
+          </md-toolbar>
+          <md-card-content>
+            <button md-fab class="md-fab md-fab-position-bottom-right bgc-orange-700">
+              <md-icon class="md-24">add</md-icon>
+            </button>
+            <h3>View title</h3>
+            <p>
+              When using a primary color in your palette, this color should be the most widely used across all screens and components.
+            </p>
+            <p>
+              Palettes with a secondary color may use this color to indicate a related action or information.
+            </p>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+    <md-divider></md-divider>
+    <h3 class="md-title"><span class="tc-orange-700">Orange Primary</span> / <span class="tc-light-blue-700">Light Blue Accent</span></h3>
+    <div layout-gt-xs="row" layout-margin>
+      <div flex-gt-xs="50" class="pad-top-sm">
+        <td-highlight lang="css">
+          /* Variables */
+          $md-primary: #F57C00;
+          $md-primary-opacity: rgba(245, 124, 0, 0.12);
+          $md-accent: #0288D1;
+          $md-accent-opacity: rgba(2, 136, 209, 0.12);
+          $md-warn: #D32F2F;
+        </td-highlight>
+      </div>
+      <div flex-gt-xs="50">
+        <md-card class="top-toolbar">
+          <md-toolbar class="bgc-orange-700 tc-white">
+            <md-toolbar-row>
+              <span></span>
+            </md-toolbar-row>
+            <md-toolbar-row>
+              <span>Toolbar</span>
+            </md-toolbar-row>
+          </md-toolbar>
+          <md-card-content>
+            <button md-fab class="md-fab md-fab-position-bottom-right bgc-light-blue-700">
+              <md-icon class="md-24">add</md-icon>
+            </button>
+            <h3>View title</h3>
+            <p>
+              When using a primary color in your palette, this color should be the most widely used across all screens and components.
+            </p>
+            <p>
+              Palettes with a secondary color may use this color to indicate a related action or information.
+            </p>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </md-card-content>
+</md-card>

src/app/components/docs/theme/theme.component.scss

@@ -0,0 +1,3 @@
+.md-fab-position-bottom-right {
+    bottom: 20px;
+}

src/app/components/docs/theme/theme.component.spec.ts

@@ -0,0 +1,49 @@
+import {
+  beforeEach,
+  addProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ThemeComponent } from './theme.component';
+
+describe('Component: Icons', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEach(() => {
+    addProviders([
+      ThemeComponent,
+    ]);
+  });
+
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder): void {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([ThemeComponent], (component: ThemeComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(ThemeTestControllerComponent)
+      .then((fixture: ComponentFixture<any>) => {
+        let query: DebugElement = fixture.debugElement.query(By.directive(ThemeComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  directives: [ThemeComponent],
+  selector: 'td-test',
+  template: `
+    <td-docs-theme></td-docs-theme>
+  `,
+})
+class ThemeTestControllerComponent {
+}

src/app/components/docs/theme/theme.component.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+
+import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
+import { MdIcon } from '@angular2-material/icon';
+import { MdAnchor } from '@angular2-material/button';
+
+import { TdHighlightComponent } from '../../../../platform/highlight';
+
+@Component({
+  moduleId: module.id,
+  directives: [ ROUTER_DIRECTIVES, MD_CARD_DIRECTIVES, MdIcon, MdAnchor, TdHighlightComponent ],
+  selector: 'td-docs-theme',
+  templateUrl: 'theme.component.html',
+  styleUrls: ['theme.component.css'],
+})
+export class ThemeComponent {
+
+}

src/system-config.ts

@@ -58,6 +58,7 @@ const barrels: string[] = [
   'app/components/docs/build-tasks',
   'app/components/docs/deployment',
   'app/components/docs/icons',
+  'app/components/docs/theme',
   'app/components/docs/testing',
   'app/components/layouts',
   'app/components/layouts/overview',