- 
+
+ Sprint from Zero to App
@@ -23,7 +23,7 @@Sprint from Zero to App
- 
+
+ Fast and Consistent
@@ -33,7 +33,7 @@Fast and Consistent
- 
+
+ Versatile
@@ -43,7 +43,7 @@Versatile
- 
+
+ Optimized for Angular
diff --git a/src/app/pages/homepage/homepage.scss b/src/app/pages/homepage/homepage.scss index f9fb6678d..b354fbaee 100644 --- a/src/app/pages/homepage/homepage.scss +++ b/src/app/pages/homepage/homepage.scss @@ -56,7 +56,7 @@ $margin-promotion-sections: 60px; margin: $margin-promotion-sections 0; } -.docs-homepage-row img { +.docs-homepage-row .docs-svg-image{ max-width: 90%; } diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html index a7885ff5a..2d18f8517 100644 --- a/src/app/shared/footer/footer.html +++ b/src/app/shared/footer/footer.html @@ -2,8 +2,8 @@
+ src="../../../assets/img/homepage/angular-white-transparent.svg"
+ alt="angular">
diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html
index 5582045af..c8458a7e3 100644
--- a/src/app/shared/navbar/navbar.html
+++ b/src/app/shared/navbar/navbar.html
@@ -2,16 +2,18 @@
diff --git a/src/app/shared/navbar/navbar.scss b/src/app/shared/navbar/navbar.scss
index a6db42611..167719a84 100644
--- a/src/app/shared/navbar/navbar.scss
+++ b/src/app/shared/navbar/navbar.scss
@@ -1,6 +1,7 @@
.docs-navbar {
display: flex;
flex-wrap: wrap;
+ align-items: center;
padding: 8px 16px;
> .mat-button {
@@ -10,6 +11,10 @@
}
}
+.flex-spacer {
+ flex-grow: 1;
+}
+
.docs-angular-logo {
height: 26px;
margin: 0 4px 3px 0;
diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts
index 77eeec4fc..7298839ca 100644
--- a/src/app/shared/shared-module.ts
+++ b/src/app/shared/shared-module.ts
@@ -1,14 +1,19 @@
import {NgModule} from '@angular/core';
import {HttpModule} from '@angular/http';
-import {DocViewer} from './doc-viewer/doc-viewer';
-import {ExampleViewer} from './example-viewer/example-viewer';
-import {DocumentationItems} from './documentation-items/documentation-items';
-import {NavBar} from './navbar/navbar';
import {MaterialModule} from '@angular/material';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
+
+import {ExampleViewer} from './example-viewer/example-viewer';
+import {DocViewer} from './doc-viewer/doc-viewer';
+import {DocumentationItems} from './documentation-items/documentation-items';
import {PlunkerButton} from './plunker';
import {GuideItems} from './guide-items/guide-items';
+import {ThemeStorage} from './theme-chooser/theme-storage/theme-storage';
+import {ThemeChooser} from './theme-chooser/theme-chooser';
+import {NavBar} from './navbar/navbar';
+import {SvgBuilder} from './svg-viewer/svg-builder';
+import {SvgViewer} from './svg-viewer/svg-viewer';
@NgModule({
@@ -18,9 +23,9 @@ import {GuideItems} from './guide-items/guide-items';
BrowserModule,
MaterialModule,
],
- declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
- exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
- providers: [DocumentationItems, GuideItems],
+ declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
+ exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
+ providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
entryComponents: [
ExampleViewer,
],
diff --git a/src/app/shared/style-manager/index.ts b/src/app/shared/style-manager/index.ts
new file mode 100644
index 000000000..5b13b7116
--- /dev/null
+++ b/src/app/shared/style-manager/index.ts
@@ -0,0 +1 @@
+export * from './style-manager';
diff --git a/src/app/shared/style-manager/style-manager.spec.ts b/src/app/shared/style-manager/style-manager.spec.ts
new file mode 100644
index 000000000..df2cc14b1
--- /dev/null
+++ b/src/app/shared/style-manager/style-manager.spec.ts
@@ -0,0 +1,52 @@
+import {TestBed, inject} from '@angular/core/testing';
+import {StyleManager} from './style-manager';
+
+
+describe('StyleManager', () => {
+ let styleManager: StyleManager;
+
+ beforeEach(() => TestBed.configureTestingModule({
+ providers: [StyleManager]
+ }));
+
+ beforeEach(inject([StyleManager], (sm: StyleManager) => {
+ styleManager = sm;
+ }));
+
+ afterEach(() => {
+ let links = document.head.querySelectorAll('link');
+ for (let link of Array.prototype.slice.call(links)) {
+ if (link.className.includes('style-manager-')) {
+ document.head.removeChild(link);
+ }
+ }
+ });
+
+ it('should add stylesheet to head', () => {
+ styleManager.setStyle('test', 'test.css');
+ let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+ expect(styleEl).not.toBeNull();
+ expect(styleEl.href.endsWith('test.css')).toBe(true);
+ });
+
+ it('should change existing stylesheet', () => {
+ styleManager.setStyle('test', 'test.css');
+ let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+ expect(styleEl).not.toBeNull();
+ expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+ styleManager.setStyle('test', 'new.css');
+ expect(styleEl.href.endsWith('new.css')).toBe(true);
+ });
+
+ it('should remove existing stylesheet', () => {
+ styleManager.setStyle('test', 'test.css');
+ let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+ expect(styleEl).not.toBeNull();
+ expect(styleEl.href.endsWith('test.css')).toBe(true);
+
+ styleManager.removeStyle('test');
+ styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
+ expect(styleEl).toBeNull();
+ });
+});
diff --git a/src/app/shared/style-manager/style-manager.ts b/src/app/shared/style-manager/style-manager.ts
new file mode 100644
index 000000000..a74637f3e
--- /dev/null
+++ b/src/app/shared/style-manager/style-manager.ts
@@ -0,0 +1,46 @@
+import {Injectable} from '@angular/core';
+
+
+/**
+ * Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
+ * removed or changed later.
+ */
+@Injectable()
+export class StyleManager {
+ /**
+ * Set the stylesheet with the specified key.
+ */
+ setStyle(key: string, href: string) {
+ getLinkElementForKey(key).setAttribute('href', href);
+ }
+
+ /**
+ * Remove the stylesheet with the specified key.
+ */
+ removeStyle(key: string) {
+ const existingLinkElement = getExistingLinkElementByKey(key);
+ if (existingLinkElement) {
+ document.head.removeChild(existingLinkElement);
+ }
+ }
+}
+
+function getLinkElementForKey(key: string) {
+ return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
+}
+
+function getExistingLinkElementByKey(key: string) {
+ return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
+}
+
+function createLinkElementWithKey(key: string) {
+ const linkEl = document.createElement('link');
+ linkEl.setAttribute('rel', 'stylesheet');
+ linkEl.classList.add(getClassNameForKey(key));
+ document.head.appendChild(linkEl);
+ return linkEl;
+}
+
+function getClassNameForKey(key: string) {
+ return `style-manager-${key}`;
+}
diff --git a/src/app/shared/svg-viewer/svg-builder.spec.ts b/src/app/shared/svg-viewer/svg-builder.spec.ts
new file mode 100644
index 000000000..cf3a09aa3
--- /dev/null
+++ b/src/app/shared/svg-viewer/svg-builder.spec.ts
@@ -0,0 +1,85 @@
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {async, inject, TestBed} from '@angular/core/testing';
+import {HttpModule} from '@angular/http';
+import {MaterialModule} from '@angular/material';
+
+import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
+import {SvgBuilder} from './svg-builder';
+
+
+describe('SVG Builder', () => {
+ const defaultData = SvgBuilder.DEFAULT_THEME;
+ const black = '#000000';
+ const white = '#ffffff';
+ const primary = '#FFA669';
+ const accent = '#F0F8FF';
+ let testTheme: DocsSiteTheme;
+ let template;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [MaterialModule, HttpModule],
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
+ providers: [SvgBuilder],
+ });
+ }));
+
+ beforeEach(() => {
+ testTheme = {
+ isDark: false,
+ href: 'coolland.py',
+ primary: '#FFA669',
+ accent,
+ };
+
+ template = '';
+ Object.keys(defaultData).forEach(key => {
+ if (defaultData[key]) {
+ template += `someRandomData fill="${defaultData[key]}"`;
+ }
+ });
+ });
+
+ it('replaceColor should return a string with all instances of a hex code replaced',
+ inject([SvgBuilder], (service: SvgBuilder) => {
+ const oneHexCode = ` {
+ const svgAbsPath = this._getAbsPath(path);
+ return this.http.get(svgAbsPath).toPromise()
+ .then((data: any) => data._body);
+ }
+
+ private _getAbsPath(path: string): string {
+ // SVG assets all come from the /assets/ path
+ const svgBasePath = 'assets/';
+ return path.slice((path.indexOf(svgBasePath)-1));
+ }
+
+ public replaceColorCodes(template: string, colors: ThemeColors, previousThemeColors: ThemeColors): string {
+ let finalTemplate = template;
+ Object.keys(colors).forEach(key => {
+ const prevColor = previousThemeColors[key];
+ const newColor = colors[key];
+ if (prevColor && newColor) {
+ finalTemplate = this._replaceColor(finalTemplate, prevColor, newColor);
+ }
+ });
+ return finalTemplate;
+ }
+
+ public _replaceColor(template: string, color: string, replacement: string): string {
+ return template.replace(new RegExp(color, 'gi'), replacement);
+ }
+}
diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts
new file mode 100644
index 000000000..cff1c305f
--- /dev/null
+++ b/src/app/shared/svg-viewer/svg-viewer.ts
@@ -0,0 +1,72 @@
+import {ElementRef, Component, Input} from '@angular/core';
+import {Http} from '@angular/http';
+import {Observable} from 'rxjs/Observable';
+import {Subscription} from 'rxjs/Subscription';
+
+import {ThemeColors, SvgBuilder} from './svg-builder';
+import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
+
+
+@Component({
+ selector: 'docs-svg-viewer',
+ template: '',
+})
+
+export class SvgViewer {
+ @Input() public svgHref: string;
+
+ private _subscription: Subscription;
+ private currTheme: DocsSiteTheme;
+ private _previousThemeColors: ThemeColors = SvgBuilder.DEFAULT_THEME;
+
+ constructor(
+ public themeStorage: ThemeStorage,
+ public svgBuilder: SvgBuilder,
+ public el: ElementRef,
+ public http: Http
+ ) {
+ this.currTheme = this.themeStorage.getStoredTheme();
+ this._subscription = this.themeStorage.onThemeUpdate
+ .subscribe(theme => this.swapTheme(theme));
+ }
+
+ public ngAfterViewInit() {
+ if (this.currTheme) {
+ setTimeout(() => this.swapTheme(this.currTheme));
+ } else {
+ setTimeout(() => this.svgBuilder.getSvgAsString(this.svgHref)
+ .then(svgString => this.injectSvg(svgString)));
+ }
+ }
+
+ public swapTheme(theme) {
+ if (this._getSvgFromDom()) {
+ this._convertToTheme(theme, this._getSvgFromDom());
+ } else {
+ this.svgBuilder.getSvgAsString(this.svgHref)
+ .then(svgString => this._convertToTheme(theme, svgString));
+ }
+ }
+
+ private _convertToTheme(theme, template) {
+ const {newTemplate, colors} = this.svgBuilder.buildSvg(
+ theme, template, this._previousThemeColors);
+ this.injectSvg(newTemplate);
+ this._previousThemeColors = colors;
+ }
+
+ public ngOnDestroy() {
+ if (this._subscription) {
+ this._subscription.unsubscribe();
+ }
+ }
+
+ public injectSvg(template) {
+ this.el.nativeElement.innerHTML = template;
+ }
+
+ private _getSvgFromDom() {
+ const svg = this.el.nativeElement.querySelector('svg');
+ return svg ? this.el.nativeElement.innerHTML : null;
+ }
+}
diff --git a/src/app/shared/theme-chooser/index.ts b/src/app/shared/theme-chooser/index.ts
new file mode 100644
index 000000000..7e7db51a4
--- /dev/null
+++ b/src/app/shared/theme-chooser/index.ts
@@ -0,0 +1 @@
+export * from './theme-chooser';
diff --git a/src/app/shared/theme-chooser/theme-chooser.html b/src/app/shared/theme-chooser/theme-chooser.html
new file mode 100644
index 000000000..a36e27a94
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-chooser.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/app/shared/theme-chooser/theme-chooser.scss b/src/app/shared/theme-chooser/theme-chooser.scss
new file mode 100644
index 000000000..b20c9ae60
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-chooser.scss
@@ -0,0 +1,58 @@
+$theme-chooser-menu-padding: 8px;
+$theme-chooser-grid-cell-size: 48px;
+$theme-chooser-grid-cells-per-row: 2;
+$theme-chooser-swatch-size: 36px;
+$theme-chooser-accent-stripe-size: 6px;
+
+
+.docs-theme-chooser-menu {
+ .md-menu-content {
+ padding: $theme-chooser-menu-padding;
+ }
+
+ [md-menu-item] {
+ flex: 0 0 auto;
+ padding: 0;
+ overflow: hidden;
+ }
+
+ .docs-theme-chooser-swatch {
+ position: relative;
+ width: $theme-chooser-swatch-size;
+ height: $theme-chooser-swatch-size;
+ margin: ($theme-chooser-grid-cell-size - $theme-chooser-swatch-size) / 2;
+ border-radius: 50%;
+ overflow: hidden;
+
+ .docs-theme-chosen-icon {
+ color: white;
+ position: absolute;
+ left: 50%; top: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ border: 1px solid rgba(0,0,0,.2);
+ border-radius: 50%;
+ }
+ }
+
+ .docs-theme-chooser-primary {
+ width: 100%;
+ height: 100%;
+ }
+
+ .docs-theme-chooser-accent {
+ position: absolute;
+ bottom: $theme-chooser-accent-stripe-size;
+ width: 100%;
+ height: $theme-chooser-accent-stripe-size;
+ }
+}
diff --git a/src/app/shared/theme-chooser/theme-chooser.spec.ts b/src/app/shared/theme-chooser/theme-chooser.spec.ts
new file mode 100644
index 000000000..7d4000ba4
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-chooser.spec.ts
@@ -0,0 +1,29 @@
+import {MaterialModule} from '@angular/material';
+import {async, TestBed} from '@angular/core/testing';
+
+import {ThemeStorage} from './theme-storage/theme-storage';
+import {ThemeChooser} from './theme-chooser';
+import {StyleManager} from '../style-manager';
+
+
+describe('ThemeChooser', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [MaterialModule],
+ declarations: [ThemeChooser],
+ providers: [StyleManager, ThemeStorage]
+ });
+
+ TestBed.compileComponents();
+ }));
+
+ it('should install theme based on href', () => {
+ const fixture = TestBed.createComponent(ThemeChooser);
+ const component = fixture.componentInstance;
+ const href = 'pink-bluegrey.css';
+ spyOn(component.styleManager, 'setStyle');
+ component.installTheme(href);
+ expect(component.styleManager.setStyle).toHaveBeenCalled();
+ expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${href}`);
+ });
+});
diff --git a/src/app/shared/theme-chooser/theme-chooser.ts b/src/app/shared/theme-chooser/theme-chooser.ts
new file mode 100644
index 000000000..9b83674fe
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-chooser.ts
@@ -0,0 +1,65 @@
+import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
+import {StyleManager} from '../style-manager/style-manager';
+import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage';
+
+
+@Component({
+ selector: 'theme-chooser',
+ templateUrl: 'theme-chooser.html',
+ styleUrls: ['theme-chooser.scss'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ encapsulation: ViewEncapsulation.None,
+ host: { 'aria-hidden': 'true' },
+})
+export class ThemeChooser {
+ currentTheme;
+
+ themes = [
+ {
+ primary: '#673AB7',
+ accent: '#FFC107',
+ href: 'deeppurple-amber.css',
+ isDark: false,
+ },
+ {
+ primary: '#3F51B5',
+ accent: '#E91E63',
+ href: 'indigo-pink.css',
+ isDark: false,
+ },
+ {
+ primary: '#E91E63',
+ accent: '#607D8B',
+ href: 'pink-bluegrey.css',
+ isDark: true,
+ },
+ {
+ primary: '#9C27B0',
+ accent: '#4CAF50',
+ href: 'purple-green.css',
+ isDark: true,
+ },
+ ];
+
+ constructor(
+ public styleManager : StyleManager,
+ private _themeStorage: ThemeStorage
+ ) {
+ const currentTheme = this._themeStorage.getStoredTheme();
+ if (currentTheme) {
+ this.installTheme(currentTheme.href);
+ }
+ }
+
+ installTheme(href: string) {
+ this.currentTheme = this._getCurrentThemeFromHref(href);
+ this.styleManager.setStyle('theme', `assets/${href}`);
+ if (this.currentTheme) {
+ this._themeStorage.storeTheme(this.currentTheme);
+ }
+ }
+
+ private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
+ return this.themes.find(theme => theme.href === href);
+ }
+}
diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts b/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts
new file mode 100644
index 000000000..67e0c9d24
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts
@@ -0,0 +1,52 @@
+import {ThemeStorage} from './theme-storage';
+
+
+const testStorageKey = ThemeStorage.storageKey;
+const testTheme = {
+ primary: '#000000',
+ accent: '#ffffff',
+ href: 'test/path/to/theme'
+};
+const createTestData = () => {
+ window.localStorage[testStorageKey] = JSON.stringify(testTheme);
+};
+const clearTestData = () => {
+ window.localStorage.clear();
+};
+
+describe('ThemeStorage Service', () => {
+ const service = new ThemeStorage();
+ const getCurrTheme = () => JSON.parse(window.localStorage.getItem(testStorageKey));
+ const secondTestTheme = {
+ primary: '#666666',
+ accent: '#333333',
+ href: 'some/cool/path'
+ };
+
+ beforeEach(createTestData);
+ afterEach(clearTestData);
+
+ it('should set the current theme', () => {
+ expect(getCurrTheme()).toEqual(testTheme);
+ service.storeTheme(secondTestTheme);
+ expect(getCurrTheme()).toEqual(secondTestTheme);
+ });
+
+ it('should get the current theme', () => {
+ const theme = service.getStoredTheme();
+ expect(theme).toEqual(testTheme);
+ });
+
+ it('should clear the stored theme data', () => {
+ expect(getCurrTheme()).not.toBeNull();
+ service.clearStorage();
+ expect(getCurrTheme()).toBeNull();
+ });
+
+ it('should emit an event when setTheme is called', () => {
+ spyOn(service.onThemeUpdate, 'emit');
+ service.storeTheme(secondTestTheme);
+ expect(service.onThemeUpdate.emit).toHaveBeenCalled();
+ expect(service.onThemeUpdate.emit).toHaveBeenCalledWith(secondTestTheme);
+ });
+});
diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.ts b/src/app/shared/theme-chooser/theme-storage/theme-storage.ts
new file mode 100644
index 000000000..94b241aa2
--- /dev/null
+++ b/src/app/shared/theme-chooser/theme-storage/theme-storage.ts
@@ -0,0 +1,30 @@
+import {Injectable, EventEmitter} from '@angular/core';
+
+export interface DocsSiteTheme {
+ href: string;
+ accent: string;
+ primary: string;
+ isDark?: boolean;
+};
+
+
+@Injectable()
+export class ThemeStorage {
+ static storageKey = 'docs-theme-storage-current';
+
+ public onThemeUpdate: EventEmitter = new EventEmitter();
+
+ public storeTheme(theme: DocsSiteTheme) {
+ window.localStorage[ThemeStorage.storageKey] = JSON.stringify(theme);
+ this.onThemeUpdate.emit(theme);
+ }
+
+ public getStoredTheme(): DocsSiteTheme {
+ const theme = JSON.parse(window.localStorage[ThemeStorage.storageKey] || null);
+ return theme
+ }
+
+ public clearStorage() {
+ window.localStorage.removeItem(ThemeStorage.storageKey);
+ }
+}
diff --git a/src/assets/custom-themes/deeppurple-amber.scss b/src/assets/custom-themes/deeppurple-amber.scss
new file mode 100644
index 000000000..160f8a9c5
--- /dev/null
+++ b/src/assets/custom-themes/deeppurple-amber.scss
@@ -0,0 +1,9 @@
+@import '../../app-theme';
+
+// Define the light theme.
+$primary: mat-palette($mat-deep-purple);
+$accent: mat-palette($mat-amber, A200, A100, A400);
+
+$theme: mat-light-theme($primary, $accent);
+@include angular-material-theme($theme);
+@include material-docs-app-theme($theme);
diff --git a/src/assets/custom-themes/indigo-pink.scss b/src/assets/custom-themes/indigo-pink.scss
new file mode 100644
index 000000000..53d7c63c5
--- /dev/null
+++ b/src/assets/custom-themes/indigo-pink.scss
@@ -0,0 +1,9 @@
+@import '../../app-theme';
+
+// Define the light theme.
+$primary: mat-palette($mat-indigo);
+$accent: mat-palette($mat-pink, A200, A100, A400);
+
+$theme: mat-light-theme($primary, $accent);
+@include angular-material-theme($theme);
+@include material-docs-app-theme($theme);
diff --git a/src/assets/custom-themes/pink-bluegrey.scss b/src/assets/custom-themes/pink-bluegrey.scss
new file mode 100644
index 000000000..b387673f1
--- /dev/null
+++ b/src/assets/custom-themes/pink-bluegrey.scss
@@ -0,0 +1,9 @@
+@import '../../app-theme';
+
+// Define the dark theme.
+$primary: mat-palette($mat-pink);
+$accent: mat-palette($mat-blue-grey, A200, A100, A400);
+
+$theme: mat-dark-theme($primary, $accent);
+@include angular-material-theme($theme);
+@include material-docs-app-theme($theme);
diff --git a/src/assets/custom-themes/purple-green.scss b/src/assets/custom-themes/purple-green.scss
new file mode 100644
index 000000000..2dcb19f28
--- /dev/null
+++ b/src/assets/custom-themes/purple-green.scss
@@ -0,0 +1,9 @@
+@import '../../app-theme';
+
+// Define the dark theme.
+$primary: mat-palette($mat-purple);
+$accent: mat-palette($mat-green, A200, A100, A400);
+
+$theme: mat-dark-theme($primary, $accent);
+@include angular-material-theme($theme);
+@include material-docs-app-theme($theme);
diff --git a/src/assets/img/component-categories/forms.svg b/src/assets/img/component-categories/forms.svg
index 4f420b423..990998182 100644
--- a/src/assets/img/component-categories/forms.svg
+++ b/src/assets/img/component-categories/forms.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/component-categories/modals.svg b/src/assets/img/component-categories/modals.svg
index 3f65a94bc..b4ca11500 100644
--- a/src/assets/img/component-categories/modals.svg
+++ b/src/assets/img/component-categories/modals.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/autocomplete.svg b/src/assets/img/components/autocomplete.svg
index 0dd5b2dc2..8d08a8ef6 100644
--- a/src/assets/img/components/autocomplete.svg
+++ b/src/assets/img/components/autocomplete.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/button-toggle.svg b/src/assets/img/components/button-toggle.svg
index 12d6e9f17..a459e2e98 100644
--- a/src/assets/img/components/button-toggle.svg
+++ b/src/assets/img/components/button-toggle.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/checkbox.svg b/src/assets/img/components/checkbox.svg
index f0828c539..045bca2a9 100644
--- a/src/assets/img/components/checkbox.svg
+++ b/src/assets/img/components/checkbox.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/progress-spinner.svg b/src/assets/img/components/progress-spinner.svg
index 4f92349b9..270cc4883 100644
--- a/src/assets/img/components/progress-spinner.svg
+++ b/src/assets/img/components/progress-spinner.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/radio.svg b/src/assets/img/components/radio.svg
index 094939892..2a1055e16 100644
--- a/src/assets/img/components/radio.svg
+++ b/src/assets/img/components/radio.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/select.svg b/src/assets/img/components/select.svg
index fbfbd7b42..7692d241e 100644
--- a/src/assets/img/components/select.svg
+++ b/src/assets/img/components/select.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/components/slider.svg b/src/assets/img/components/slider.svg
index 51482b3f4..8d6190543 100644
--- a/src/assets/img/components/slider.svg
+++ b/src/assets/img/components/slider.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/homepage/fastandconsistent.svg b/src/assets/img/homepage/fastandconsistent.svg
index 96d9c19eb..becf326c3 100644
--- a/src/assets/img/homepage/fastandconsistent.svg
+++ b/src/assets/img/homepage/fastandconsistent.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/homepage/material_splash.svg b/src/assets/img/homepage/material_splash.svg
index dbb1ac4eb..41f4aeda0 100644
--- a/src/assets/img/homepage/material_splash.svg
+++ b/src/assets/img/homepage/material_splash.svg
@@ -1,85 +1 @@
-
-
+
diff --git a/src/assets/img/homepage/optimized.svg b/src/assets/img/homepage/optimized.svg
index 54bc90b4e..83adf6e39 100644
--- a/src/assets/img/homepage/optimized.svg
+++ b/src/assets/img/homepage/optimized.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/homepage/sprintzerotoapp.svg b/src/assets/img/homepage/sprintzerotoapp.svg
index 35715ccec..4f69ccabe 100644
--- a/src/assets/img/homepage/sprintzerotoapp.svg
+++ b/src/assets/img/homepage/sprintzerotoapp.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/assets/img/homepage/versatile.svg b/src/assets/img/homepage/versatile.svg
index bdaed0d70..f95c1562e 100644
--- a/src/assets/img/homepage/versatile.svg
+++ b/src/assets/img/homepage/versatile.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/main.scss b/src/main.scss
index 997c8b60c..1c90e5b3d 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -3,6 +3,7 @@
@import './styles/api';
@import './styles/markdown';
@import './styles/tables';
+@import './styles/general';
// Include material core styles.
@@ -16,38 +17,3 @@ $accent: mat-palette($mat-amber, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);
@include angular-material-theme($theme);
@include material-docs-app-theme($theme);
-
-body {
- font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
- margin: 0;
-}
-
-.docs-button[md-button], .docs-button[md-raised-button] {
- text-transform: uppercase;
-}
-
-h1, h2 {
- font-weight: 400;
-}
-
-pre {
- // Pre elements won't wrap text by default and can exceed the boundaries of their parent element.
- // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples
- // will ensure that the code never exceeds the page width.
- white-space: pre-wrap;
-}
-
-.docs-primary-header {
- padding-left: 20px;
-
- h1 {
- font-size: 30px;
- font-weight: 300;
- margin: 0;
- padding: 50px;
- }
-}
-
-code {
- font-size: 90%;
-}
diff --git a/src/styles/_api-theme.scss b/src/styles/_api-theme.scss
index eda4b4665..59cb40875 100644
--- a/src/styles/_api-theme.scss
+++ b/src/styles/_api-theme.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../node_modules/@angular/material/theming';
// Mixin to apply theme colors for generated API docs.
@mixin docs-site-api-theme($theme) {
diff --git a/src/styles/_general.scss b/src/styles/_general.scss
new file mode 100644
index 000000000..b15f1e478
--- /dev/null
+++ b/src/styles/_general.scss
@@ -0,0 +1,57 @@
+body {
+ font-family: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+ margin: 0;
+}
+
+.docs-button[md-button], .docs-button[md-raised-button] {
+ text-transform: uppercase;
+}
+
+h1, h2 {
+ font-weight: 400;
+}
+
+pre {
+ // Pre elements won't wrap text by default and can exceed the boundaries of their parent element.
+ // This adds extra scroll space when visiting the docs mobile. Pre-wrapping the code examples
+ // will ensure that the code never exceeds the page width.
+ white-space: pre-wrap;
+}
+
+.docs-primary-header {
+ padding-left: 20px;
+
+ h1 {
+ font-size: 30px;
+ font-weight: 300;
+ margin: 0;
+ padding: 50px;
+ }
+}
+
+code {
+ font-size: 90%;
+}
+
+// These styles are for controlling SVGs without using the /deep/ selector
+
+.docs-component-category-list-card-image svg {
+ width: 100%;
+}
+
+.docs-footer-angular-logo svg {
+ height: 50px;
+}
+
+.docs-angular-logo svg {
+ height: 26px;
+ margin: 0 4px 3px 0;
+ vertical-align: middle;
+}
+
+.docs-github-logo svg {
+ height: 21px;
+ margin: 0 7px 2px 0;
+ vertical-align: middle;
+}
+
diff --git a/src/styles/_markdown-theme.scss b/src/styles/_markdown-theme.scss
index 9ad46e8cb..0e12b18b9 100644
--- a/src/styles/_markdown-theme.scss
+++ b/src/styles/_markdown-theme.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../node_modules/@angular/material/theming';
// Mixin to apply theme colors for docs generated from markdown files in the material2 repo.
@mixin docs-site-markdown-theme($theme) {
diff --git a/src/styles/_tables-theme.scss b/src/styles/_tables-theme.scss
index 92beea549..85be809c4 100644
--- a/src/styles/_tables-theme.scss
+++ b/src/styles/_tables-theme.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../node_modules/@angular/material/theming';
// Mixin to apply theme colors for both generated API docs and markdown docs (guides/overviews).
@mixin docs-site-tables-theme($theme) {
diff --git a/tools/build-themes.sh b/tools/build-themes.sh
new file mode 100755
index 000000000..1952d792c
--- /dev/null
+++ b/tools/build-themes.sh
@@ -0,0 +1,19 @@
+#!/bin/bash
+
+DEST_PATH=src/assets
+INPUT_PATH=$DEST_PATH/custom-themes/
+
+
+echo Building custom theme scss files.
+
+# Get the files
+FILES=$(find src/assets/custom-themes -name "*.scss")
+
+for FILE in $FILES
+do
+ FILENAME=${FILE#$INPUT_PATH}
+ BASENAME=${FILENAME%.scss}
+ $(npm bin)/node-sass $FILE > $DEST_PATH/$BASENAME.css
+done
+
+echo Finished building CSS.
+
+
+ check_circle
+
+
+