chore(demos): Add example themes & load theme from URL #1967

acdvorak · 2018-01-16T20:50:21Z

To test, visit the following URL:

http://localhost:8080/theme/index.html?theme=dark

The theme param must be one of baseline, black, dark, white, or yellow.

This only works on the theme demo page; all other demo pages are unaffected.

To test, visit the following URL: http://localhost:8080/theme/index.html?theme=dark The `theme` param must be one of `baseline`, `black`, `dark`, `white`, or `yellow`.

lynnmercier

I don't think I understand all the complexity of theme-loader.js and uri.js ... are you doing some security protection? (Can we just use a Node module instead of uri.js?? Something open source?)

lynnmercier · 2018-01-16T23:43:01Z

demos/theme/theme-baseline.scss

+
+@import "../../packages/mdc-theme/color-palette";
+
+$demo-toolbar-progress-bar-color: secondary-light;


Put a TODO here to remove this once all components use baseline as a default

lynnmercier · 2018-01-16T23:43:25Z

demos/theme/theme-black.scss

+@import "../../packages/mdc-theme/color-palette";
+
+$mdc-theme-primary: $material-color-grey-900;
+$mdc-theme-secondary: $material-color-light-green-a700;


Put a TODO here to call Sass mixins instead of using mdc-theme-primary and mdc-theme-secondary

lynnmercier · 2018-01-16T23:46:37Z

demos/theme/theme-dark.scss

+
+$mdc-theme-primary: $material-color-amber-300;
+$mdc-theme-secondary: $material-color-pink-400;
+$mdc-theme-background: $material-color-grey-900;


Put a TODO here to call Sass mixins instead of using mdc-theme-primary, mdc-theme-secondary, and mdc-theme-background

Also, call the Sass mixins for the checkbox so that the demo example on theme=dark is a yellow checkbox (or pink, whatevs)

And call the Sass mixins for the radio button, the select, the tabs, and the text field (most of those mixins are written, so just use whatever is there)

Done.

Select and Tabs don't have theme mixins yet, so I left a TODO for those.

lynnmercier · 2018-01-16T23:46:52Z

demos/theme/theme-white.scss

+@import "../../packages/mdc-theme/color-palette";
+
+$mdc-theme-primary: #fff;
+$mdc-theme-secondary: $material-color-orange-500;


Put a TODO here to call Sass mixins instead of using mdc-theme-primary and mdc-theme-secondary

lynnmercier · 2018-01-16T23:46:55Z

demos/theme/theme-yellow.scss

+@import "../../packages/mdc-theme/color-palette";
+
+$mdc-theme-primary: $material-color-yellow-500;
+$mdc-theme-secondary: $material-color-blue-500;


Put a TODO here to call Sass mixins instead of using mdc-theme-primary and mdc-theme-secondary

…theme

acdvorak · 2018-01-17T01:05:25Z

I don't think I understand all the complexity of theme-loader.js and uri.js ... are you doing some security protection? (Can we just use a Node module instead of uri.js?? Something open source?)

theme-loader.js and uri.js are needed to prevent XSS attacks. Reading from the query string and injecting it onto the page using document.write() is the only way I know of to prevent FOUC, but blindly inserting untrusted user input into the page is super dangerous. A malicious actor could craft a special URL that does something evil if we don't carefully sanitize the query string values.

I considered using existing Node modules for this, but A) I don't trust them to be secure, and B) they're all big and bloated, and since this script is going in the <head>, it needs to be small and fast to avoid blocking the page over slow network connections.

I tried to follow the patterns employed by Closure lib's SafeHtml class, which was specifically designed to make it difficult for attackers to exploit XSS vulnerabilities.

lynnmercier

LGTM, two comments left

lynnmercier · 2018-01-17T01:18:33Z

demos/theme/theme-baseline.scss

+
+@import "../../packages/mdc-theme/color-palette";
+
+// TODO(acdvorak): Use theme mixin(s) instead


don't put your name here...that implies you are going to do all this work very soon. While in reality it will probably be many people over several months.

lynnmercier · 2018-01-17T01:23:09Z

demos/theme/theme-dark.scss

+  @include mdc-theme-prop(color, text-primary-on-dark);
+}
+
+// TODO(acdvorak): Call theme mixins for mdc-select and mdc-tab-bar.


You can call some mixins for tabs. they are under mdc-tabs/tab/_mixins: mdc-tab-ink-color or mdc-tab-label-ink-color and mdc-tab-icon-ink-color.

Not sure how I missed those. Thanks!

# Conflicts: # demos/theme/index.html

…ents/material-components-web into chore/demos/theme-loader

commit f399384 Author: Andrew C. Dvorak <acdvorak@gmail.com> Date: Tue Jan 16 20:09:43 2018 -0800 chore(demos): Add example themes & load theme from URL (#1967) To test, visit the following URL: http://localhost:8080/theme/index.html?theme=dark The `theme` param must be one of `baseline`, `black`, `dark`, `white`, or `yellow`. This only works on the theme demo page; all other demo pages are unaffected. commit 1dae53c Author: Will Ernest <34519388+williamernest@users.noreply.github.com> Date: Tue Jan 16 19:14:54 2018 -0800 feat(text-field): Move text-field outline colors to mixins (#1963) * feat(text-field): Move color mixins for outline/helper text. Update demos/docs Breaking Change: Moves color customization of the outline text-field to SASS mixins.

chore(demos): Add example themes & load theme from URL

d790642

To test, visit the following URL: http://localhost:8080/theme/index.html?theme=dark The `theme` param must be one of `baseline`, `black`, `dark`, `white`, or `yellow`.

lynnmercier suggested changes Jan 16, 2018

View reviewed changes

lynnmercier self-assigned this Jan 16, 2018

acdvorak and others added 2 commits January 16, 2018 16:49

WIP: Add TODOs; fix color of checkbox, radio, and text-field in dark …

10643cb

…theme

Merge branch 'master' into chore/demos/theme-loader

2317127

lynnmercier approved these changes Jan 17, 2018

View reviewed changes

acdvorak and others added 4 commits January 16, 2018 20:04

Merge branch 'master' into chore/demos/theme-loader

75e750e

WIP: Update TODOs

c02270f

WIP: Call mdc-tab theme mixins

88a19af

# Conflicts: # demos/theme/index.html

Merge branch 'chore/demos/theme-loader' of github.com:material-compon…

61ed930

…ents/material-components-web into chore/demos/theme-loader

acdvorak merged commit f399384 into master Jan 17, 2018

acdvorak deleted the chore/demos/theme-loader branch January 17, 2018 04:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(demos): Add example themes & load theme from URL #1967

chore(demos): Add example themes & load theme from URL #1967

acdvorak commented Jan 16, 2018

lynnmercier left a comment

lynnmercier Jan 16, 2018

acdvorak Jan 17, 2018

lynnmercier Jan 16, 2018

acdvorak Jan 17, 2018

lynnmercier Jan 16, 2018

acdvorak Jan 17, 2018

lynnmercier Jan 16, 2018

acdvorak Jan 17, 2018

lynnmercier Jan 16, 2018

acdvorak Jan 17, 2018

acdvorak commented Jan 17, 2018

lynnmercier left a comment

lynnmercier Jan 17, 2018

acdvorak Jan 17, 2018

lynnmercier Jan 17, 2018

acdvorak Jan 17, 2018


		@import "../../packages/mdc-theme/color-palette";

		$demo-toolbar-progress-bar-color: secondary-light;


		@import "../../packages/mdc-theme/color-palette";

		// TODO(acdvorak): Use theme mixin(s) instead

chore(demos): Add example themes & load theme from URL #1967

chore(demos): Add example themes & load theme from URL #1967

Conversation

acdvorak commented Jan 16, 2018

lynnmercier left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acdvorak commented Jan 17, 2018

lynnmercier left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment