From e453a8055ff79b187f311255fe1662623564bb0d Mon Sep 17 00:00:00 2001 From: Kyle Ledbetter Date: Tue, 16 Aug 2016 18:48:46 -0500 Subject: [PATCH] feature(scss): update app scss & add theme docs (#39) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 | 5 + src/app/components/docs/docs.component.ts | 5 + src/app/components/docs/docs.routes.ts | 4 + src/app/components/docs/theme/index.ts | 1 + .../docs/theme/theme.component.html | 114 ++++++++++++++++++ .../docs/theme/theme.component.scss | 3 + .../docs/theme/theme.component.spec.ts | 49 ++++++++ .../components/docs/theme/theme.component.ts | 19 +++ src/system-config.ts | 1 + 9 files changed, 201 insertions(+) create mode 100644 src/app/components/docs/theme/index.ts create mode 100644 src/app/components/docs/theme/theme.component.html create mode 100644 src/app/components/docs/theme/theme.component.scss create mode 100644 src/app/components/docs/theme/theme.component.spec.ts create mode 100644 src/app/components/docs/theme/theme.component.ts diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 91d83660fc..bc18eda63b 100644 --- a/src/app/app.component.scss +++ b/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; + } + } } } \ No newline at end of file diff --git a/src/app/components/docs/docs.component.ts b/src/app/components/docs/docs.component.ts index fdbd9f9630..5fd75f9a21 100644 --- a/src/app/components/docs/docs.component.ts +++ b/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', diff --git a/src/app/components/docs/docs.routes.ts b/src/app/components/docs/docs.routes.ts index 56eebad110..fada7808d0 100644 --- a/src/app/components/docs/docs.routes.ts +++ b/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, diff --git a/src/app/components/docs/theme/index.ts b/src/app/components/docs/theme/index.ts new file mode 100644 index 0000000000..f1a5670907 --- /dev/null +++ b/src/app/components/docs/theme/index.ts @@ -0,0 +1 @@ +export * from './theme.component'; diff --git a/src/app/components/docs/theme/theme.component.html b/src/app/components/docs/theme/theme.component.html new file mode 100644 index 0000000000..b065da8e61 --- /dev/null +++ b/src/app/components/docs/theme/theme.component.html @@ -0,0 +1,114 @@ + + Custom Theme + SCSS variables to customize the color scheme + + + + + IMPORTANT: This is a temporary workaround until a real theming solution is solved upstream in Angular-Material2. + Once they have that fixed, we'll remove this workaround. + + +

SCSS Variables

+

If you're using the Covalent Quickstart App, edit /src/app/app.component.scss

+

For the easiest route, just update these SCSS variables:

+ + /* 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; + +

+ and we'll override the core material2 styles with your theme preferences. +

+ + + + Material Design Colors + Teradata Color Style Guide + + + + Material Design Color Palette + Choose a primary, accent and warn color from the official Material color palette. + + +

Light Blue Primary / Orange Accent

+
+
+ + /* 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; + +
+
+ + + + + + + Toolbar + + + + +

View title

+

+ When using a primary color in your palette, this color should be the most widely used across all screens and components. +

+

+ Palettes with a secondary color may use this color to indicate a related action or information. +

+ + +
+
+ +

Orange Primary / Light Blue Accent

+
+
+ + /* 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; + +
+
+ + + + + + + Toolbar + + + + +

View title

+

+ When using a primary color in your palette, this color should be the most widely used across all screens and components. +

+

+ Palettes with a secondary color may use this color to indicate a related action or information. +

+ + +
+
+ + \ No newline at end of file diff --git a/src/app/components/docs/theme/theme.component.scss b/src/app/components/docs/theme/theme.component.scss new file mode 100644 index 0000000000..13d4949392 --- /dev/null +++ b/src/app/components/docs/theme/theme.component.scss @@ -0,0 +1,3 @@ +.md-fab-position-bottom-right { + bottom: 20px; +} \ No newline at end of file diff --git a/src/app/components/docs/theme/theme.component.spec.ts b/src/app/components/docs/theme/theme.component.spec.ts new file mode 100644 index 0000000000..80918d9445 --- /dev/null +++ b/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) => { + let query: DebugElement = fixture.debugElement.query(By.directive(ThemeComponent)); + expect(query).toBeTruthy(); + expect(query.componentInstance).toBeTruthy(); + }); + })); +}); + +@Component({ + directives: [ThemeComponent], + selector: 'td-test', + template: ` + + `, +}) +class ThemeTestControllerComponent { +} diff --git a/src/app/components/docs/theme/theme.component.ts b/src/app/components/docs/theme/theme.component.ts new file mode 100644 index 0000000000..cd7b88b941 --- /dev/null +++ b/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 { + +} diff --git a/src/system-config.ts b/src/system-config.ts index 514414dd40..abc4289723 100644 --- a/src/system-config.ts +++ b/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',