Added dojo theme

Gruntfile.js

@@ -28,13 +28,13 @@ module.exports = function (grunt) {
 			devStyles: {
 				expand: true,
 				cwd: 'src',
-				src: 'common/styles/widgets.css',
+				src: '**/widgets.css',
 				dest: '<%= devDirectory %>'
 			},
 			distStyles: {
 				expand: true,
 				cwd: 'src',
-				src: 'common/styles/widgets.css',
+				src: '**/widgets.css',
 				dest: '<%= distDirectory %>'
 			}
 		},

src/button/Button.ts

@@ -81,19 +81,18 @@ export default class Button extends ButtonBase<ButtonProperties> {
 			value
 		} = this.properties;
 
-		const stateClasses = [
-			disabled ? css.disabled : null,
-			popup ? css.popup : null,
-			pressed ? css.pressed : null
-		];
-
 		if (popup === true) {
 			popup = { expanded: false, id: '' };
 		}
 
 		return v('button', {
 			innerHTML: content,
-			classes: this.classes(css.button, ...stateClasses),
+			classes: this.classes(
+				css.root,
+				disabled ? css.disabled : null,
+				popup ? css.popup : null,
+				pressed ? css.pressed : null
+			),
 			'aria-describedby': describedBy,
 			disabled,
 			'aria-haspopup': popup ? 'true' : null,

src/button/example/index.ts

@@ -4,9 +4,18 @@ import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
 import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
 import { w, v } from '@dojo/widget-core/d';
 import Button, { ButtonType } from '../../button/Button';
+import dojoTheme from '../../themes/dojo/theme';
 
 export const AppBase = StatefulMixin(WidgetBase);
 export class App extends AppBase<WidgetProperties> {
+	private _theme: {};
+
+	themeChange(event: Event) {
+		const checked = (<HTMLInputElement> event.target).checked;
+		this._theme = checked ? dojoTheme : {};
+		this.invalidate();
+	}
+
 	toggleButton() {
 		this.setState({ buttonPressed: !this.state.buttonPressed });
 	}
@@ -16,18 +25,27 @@ export class App extends AppBase<WidgetProperties> {
 			v('h2', {
 				innerHTML: 'Button Examples'
 			}),
+			v('label', [
+				'Use Dojo Theme ',
+				v('input', {
+					type: 'checkbox',
+					onchange: this.themeChange
+				})
+			]),
 			v('p', {
 				innerHTML: 'Basic example:'
 			}),
 			w(Button, {
 				key: 'b1',
+				theme: this._theme,
 				content: 'Basic Button'
 			}),
 			v('p', {
 				innerHTML: 'Disabled menu button:'
 			}),
 			w(Button, {
 				key: 'b2',
+				theme: this._theme,
 				content: 'Open',
 				disabled: true,
 				popup: { expanded: false, id: 'fakeId' },
@@ -38,6 +56,7 @@ export class App extends AppBase<WidgetProperties> {
 			}),
 			w(Button, {
 				key: 'b4',
+				theme: this._theme,
 				content: 'Button state',
 				pressed: <boolean> this.state.buttonPressed,
 				onClick: this.toggleButton

src/button/styles/button.m.css

@@ -1,29 +1,18 @@
 @import '../../common/styles/variables.css';
 
-.button {
-	background-color: var(--button-bg);
-	border: 1px solid var(--button-bg);
-	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
-	border-radius: var(--rounded-corners);
-	color: var(--button-color);
+.root {
 	cursor: pointer;
-	font: var(--base-font);
-	font-weight: bold;
 	display: inline-block;
-	padding: var(--button-padding);
-	transition: all var(--short-animation-duration) ease;
 }
 
-.button:hover,
-.button:focus {
-	background-color: var(--button-hover-bg);
-	border-color: var(--button-hover-bg);
+.root:hover,
+.root:focus {
 	outline: none;
 }
 
 .pressed::before {
-	border-bottom: 2px solid var(--button-color);
-	border-right: 2px solid var(--button-color);
+	border-bottom: 2px solid black;
+	border-right: 2px solid black;
 	box-sizing: border-box;
 	content: '';
 	display: inline-block;
@@ -34,8 +23,8 @@
 }
 
 .popup::after {
-	border-bottom: 2px solid var(--button-color);
-	border-right: 2px solid var(--button-color);
+	border-bottom: 2px solid black;
+	border-right: 2px solid black;
 	box-sizing: border-box;
 	content: '';
 	display: inline-block;
@@ -47,7 +36,5 @@
 
 .disabled,
 .disabled:hover {
-	background-color: var(--button-disabled-bg);
-	border-color: var(--button-disabled-bg);
 	cursor: default;
 }

src/button/styles/button.m.css.d.ts

@@ -1,4 +1,4 @@
-export const button: string;
+export const root: string;
 export const pressed: string;
 export const popup: string;
 export const disabled: string;

src/checkbox/example/index.ts

@@ -4,9 +4,18 @@ import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
 import { StatefulMixin } from '@dojo/widget-core/mixins/Stateful';
 import { v, w } from '@dojo/widget-core/d';
 import Checkbox, { Mode } from '../../checkbox/Checkbox';
+import dojoTheme from '../../themes/dojo/theme';
 
 export const AppBase = StatefulMixin(WidgetBase);
 export class App extends AppBase<WidgetProperties> {
+	private _theme: {};
+
+	themeChange(event: Event) {
+		const checked = (<HTMLInputElement> event.target).checked;
+		this._theme = checked ? dojoTheme : {};
+		this.invalidate();
+	}
+
 	onChange(event: Event) {
 		const value = (<HTMLInputElement> event.target).value;
 		const checked = (<HTMLInputElement> event.target).checked;
@@ -22,59 +31,67 @@ export class App extends AppBase<WidgetProperties> {
 			c5 = true
 		} = this.state;
 
-		return v('fieldset', [
-			v('legend', {}, ['Checkbox Example']),
-			w(Checkbox, {
-				key: 'c1',
-				checked: <boolean> c1,
-				label: {
-					content: 'Sample checkbox that starts checked',
-					before: false
-				},
-				value: 'c1',
-				onChange: this.onChange
-			}),
-			w(Checkbox, {
-				key: 'c2',
-				checked: <boolean> c2,
-				label: {
-					content: 'Sample disabled checkbox',
-					before: false
-				},
-				disabled: true,
-				value: 'c2',
-				onChange: this.onChange
-			}),
-			w(Checkbox, {
-				key: 'c3',
-				checked: <boolean> c3,
-				label: {
-					content: 'Required checkbox',
-					before: false
-				},
-				required: true,
-				value: 'c3',
-				onChange: this.onChange
-			}),
-			w(Checkbox, {
-				key: 'c4',
-				checked: <boolean> c4,
-				label: 'Checkbox in "toggle" mode',
-				mode: Mode.toggle,
-				value: 'c4',
-				onChange: this.onChange
+		return v('div', [
+			v('h2', {
+				innerHTML: 'Checkbox Examples'
 			}),
-			w(Checkbox, {
-				key: 'c5',
-				checked: <boolean> c5,
-				label: 'Disabled toggle mode',
-				onLabel: 'On',
-				offLabel: 'Off',
-				mode: Mode.toggle,
-				disabled: true,
-				value: 'c5',
-				onChange: this.onChange
-			})
+			v('label', [
+				'Use Dojo Theme ',
+				v('input', {
+					type: 'checkbox',
+					onchange: this.themeChange
+				})
+			]),
+			v('fieldset', [
+				v('legend', {}, ['Checkbox Example']),
+				w(Checkbox, {
+					key: 'c1',
+					checked: <boolean> c1,
+					label: 'Sample checkbox that starts checked',
+					value: 'c1',
+					onChange: this.onChange,
+					theme: this._theme
+				}),
+				w(Checkbox, {
+					key: 'c2',
+					checked: <boolean> c2,
+					label: 'Sample disabled checkbox',
+					disabled: true,
+					value: 'c2',
+					onChange: this.onChange,
+					theme: this._theme
+				}),
+				w(Checkbox, {
+					key: 'c3',
+					checked: <boolean> c3,
+					label: 'Required checkbox',
+					required: true,
+					value: 'c3',
+					onChange: this.onChange,
+					theme: this._theme
+				}),
+				w(Checkbox, {
+					key: 'c4',
+					checked: <boolean> c4,
+					label: 'Checkbox in "toggle" mode',
+					mode: Mode.toggle,
+					value: 'c4',
+					onChange: this.onChange,
+					theme: this._theme
+				}),
+				w(Checkbox, {
+					key: 'c5',
+					checked: <boolean> c5,
+					label: 'Disabled toggle mode',
+					onLabel: 'On',
+					offLabel: 'Off',
+					mode: Mode.toggle,
+					disabled: true,
+					value: 'c5',
+					onChange: this.onChange,
+					theme: this._theme
+				})
+			])
 		]);
 	}
 }