Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme): Add light/dark variants for primary/secondary color, and rename accent to secondary #1116

Merged
merged 18 commits into from
Aug 15, 2017
Merged

feat(theme): Add light/dark variants for primary/secondary color, and rename accent to secondary #1116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
d78060f
feat(theme): Add SCSS variables for dark/light variants of primary an…
acdvorak Aug 10, 2017
a72b100
feat(theme): Rename `accent` to `secondary`, and add light/dark varia…
acdvorak Aug 11, 2017
3ceb631
chore(theme): Use `//` comments instead of `/**` for new functions
acdvorak Aug 11, 2017
819de3e
chore(theme): Use `//` comments instead of `/**` for new variable
acdvorak Aug 11, 2017
7dccbd4
Merge branch 'master' into feat/m2-theme/step02-light-dark-variants
acdvorak Aug 11, 2017
601c426
Merge branch 'master' into feat/m2-theme/step02-light-dark-variants
acdvorak Aug 11, 2017
3e3b81e
Merge branch 'master' into feat/m2-theme/step02-light-dark-variants
acdvorak Aug 11, 2017
e498fba
chore(theme): Add comments about backward compatibility
acdvorak Aug 11, 2017
91afa2a
chore(linear-progress): Fix old typo in README.md
acdvorak Aug 11, 2017
14810b6
feat(theme): Remove mdc-theme-{light,dark}-variant functions
acdvorak Aug 11, 2017
8ba93b3
Merge branch 'master' into feat/m2-theme/step02-light-dark-variants
acdvorak Aug 14, 2017
f0693e8
chore(demos): Reword "accent" to "secondary"
acdvorak Aug 14, 2017
fe40de0
docs(button): Reword "accent" to "secondary" in README
acdvorak Aug 14, 2017
4d72b7f
chore(demos): Rename "accent" vars/IDs to "secondary"
acdvorak Aug 14, 2017
e7e8b2f
chore(framework-examples): Rename "accent" to "secondary"
acdvorak Aug 14, 2017
4684d58
chore(theme): Fix typo in SCSS comment
acdvorak Aug 15, 2017
18e984e
chore(theme): Clarify SCSS comments for text on background colors
acdvorak Aug 15, 2017
e7d5cd4
docs: Fix grammatical typo from search/replace
acdvorak Aug 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 18 additions & 18 deletions demos/button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent">
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button">
Div
Expand Down Expand Up @@ -134,10 +134,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent" data-demo-no-js>
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
Div
Expand Down Expand Up @@ -171,10 +171,10 @@
Raised with Primary
</a>
<a href="/button.html" class="mdc-button mdc-button--accent">
Default with Accent
Default with Secondary
</a>
<a href="/button.html" class="mdc-button mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</a>
</fieldset>

Expand Down Expand Up @@ -205,10 +205,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent">
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button">
Div
Expand Down Expand Up @@ -244,10 +244,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent">
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button">
Div
Expand Down Expand Up @@ -280,10 +280,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent" data-demo-no-js>
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
Div
Expand Down Expand Up @@ -317,10 +317,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--accent">
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--raised" tabindex="0" role="button">
Div
Expand Down Expand Up @@ -356,10 +356,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--theme-dark mdc-button--accent" data-demo-no-js>
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--theme-dark mdc-button--raised mdc-button--accent" data-demo-no-js>
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--theme-dark mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
Div
Expand Down Expand Up @@ -393,10 +393,10 @@
Raised with Primary
</button>
<button class="mdc-button mdc-button--theme-dark mdc-button--accent">
Default with Accent
Default with Secondary
</button>
<button class="mdc-button mdc-button--theme-dark mdc-button--raised mdc-button--accent">
Raised with Accent
Raised with Secondary
</button>
<div class="mdc-button mdc-button--theme-dark mdc-button--raised" tabindex="0" role="button">
Div
Expand Down
2 changes: 1 addition & 1 deletion demos/demos.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
// Base style

$mdc-theme-primary: #212121 !default; // Grey 900
$mdc-theme-accent: #64dd17 !default; // Light Green A700
$mdc-theme-secondary: #64dd17 !default; // Light Green A700

@import "../packages/material-components-web/material-components-web";

Expand Down
2 changes: 1 addition & 1 deletion demos/icon-toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ <h2>Primary Colored Icons</h2>
</div>

<div class="toggle-example">
<h2>Accent Colored Icons</h2>
<h2>Secondary Colored Icons</h2>
<div class="demo-wrapper">
<i class="mdc-icon-toggle mdc-icon-toggle--accent material-icons"
role="button"
Expand Down
2 changes: 1 addition & 1 deletion demos/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@
<span class="catalog-list-icon mdc-list-item__start-detail"><img class="catalog-component-icon" src="/images/ic_theme_24px.svg" /></span>
<a href="theme.html" class="mdc-list-item__text">
Theme
<span class="mdc-list-item__text__secondary">Using primary and accent colors</span>
<span class="mdc-list-item__text__secondary">Using primary and secondary colors</span>
</a>
</li>

Expand Down
2 changes: 1 addition & 1 deletion demos/linear-progress.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>
<figcaption>Accent</figcaption>
<figcaption>Secondary Color</figcaption>
</figure>

</fieldset>
Expand Down
8 changes: 4 additions & 4 deletions demos/ripple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@ <h2>Theme Styles</h2>
</div>
<div
class="mdc-ripple-surface mdc-ripple-surface--accent
mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
Accent
mdc-theme--secondary demo-surface mdc-elevation--z2" tabindex="0">
Secondary
</div>
</div>
<div>
Expand All @@ -189,8 +189,8 @@ <h2>Theme Styles - CSS Only</h2>
</div>
<div
class="mdc-ripple-surface mdc-ripple-surface--accent
mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
Accent
mdc-theme--secondary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
Secondary
</div>
</div>

Expand Down
24 changes: 12 additions & 12 deletions demos/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -331,8 +331,8 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>

<section>
<fieldset>
<legend class="mdc-typography--title">Accent Color Indicator</legend>
<nav id="accent-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<legend class="mdc-typography--title">Secondary Color Indicator</legend>
<nav id="secondary-indicator-tab-bar" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Three</a>
Expand All @@ -343,7 +343,7 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>

<section>
<fieldset>
<legend class="mdc-typography--title">Accent Color Indicator - CSS-Only</legend>
<legend class="mdc-typography--title">Secondary Color Indicator - CSS-Only</legend>
<nav class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
Expand Down Expand Up @@ -448,7 +448,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
<div class="demo-note">
<em>Note: Changing the toolbar's background color here so that the primary indicator can be visible</em>
</div>
<div class="mdc-toolbar mdc-theme--accent-bg">
<div class="mdc-toolbar mdc-theme--secondary-bg">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Title</h1>
Expand All @@ -470,7 +470,7 @@ <h1 class="mdc-toolbar__title">Title</h1>
<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + primary indicator, CSS-Only</legend>
<div class="mdc-toolbar mdc-theme--accent-bg">
<div class="mdc-toolbar mdc-theme--secondary-bg">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Title</h1>
Expand All @@ -492,15 +492,15 @@ <h1 class="mdc-toolbar__title">Title</h1>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + accent indicator</legend>
<legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator</legend>
<div class="mdc-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
<h1 class="mdc-toolbar__title">Title</h1>
</div>
<div class="mdc-toolbar__section mdc-toolbar__section--align-end">
<div>
<nav id="toolbar-tab-bar-accent-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<nav id="toolbar-tab-bar-secondary-indicator" class="mdc-tab-bar mdc-tab-bar--indicator-accent">
<a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
<a class="mdc-tab" href="#two">Item Two</a>
<a class="mdc-tab" href="#three">Item Three</a>
Expand All @@ -515,7 +515,7 @@ <h1 class="mdc-toolbar__title">Title</h1>

<section>
<fieldset>
<legend class="mdc-typography--title">Within mdc-toolbar + accent indicator, CSS-Only</legend>
<legend class="mdc-typography--title">Within mdc-toolbar + secondary color indicator, CSS-Only</legend>
<div class="mdc-toolbar">
<div class="mdc-toolbar__row">
<div class="mdc-toolbar__section mdc-toolbar__section--shrink-to-fit mdc-toolbar__section--align-start">
Expand Down Expand Up @@ -582,9 +582,9 @@ <h1 class="mdc-toolbar__title">Title</h1>
window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar'));
window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified'));
window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar'));
window.accentIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#accent-indicator-tab-bar'));
window.secondaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#secondary-indicator-tab-bar'));
window.primaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-primary-indicator'));
window.accentIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-accent-indicator'));
window.secondaryIndicatorToolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-secondary-indicator'));

var dynamicTabBar = window.dynamicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#dynamic-tab-bar'));
var dots = document.querySelector('.dots');
Expand Down Expand Up @@ -654,9 +654,9 @@ <h1 class="mdc-toolbar__title">Title</h1>
window.iconTextTabBar.layout();
window.toolbarTabBar.layout();
window.primaryIndicatorTabBar.layout();
window.accentIndicatorTabBar.layout();
window.secondaryIndicatorTabBar.layout();
window.primaryIndicatorToolbarTabBar.layout();
window.accentIndicatorToolbarTabBar.layout();
window.secondaryIndicatorToolbarTabBar.layout();
window.dynamicTabBar.layout();
toolbarTabBarModified.layout();
});
Expand Down
2 changes: 1 addition & 1 deletion demos/textfield.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<style>
.mdc-theme--dark {
--mdc-theme-primary: var(--mdc-theme-accent, #64dd17);
--mdc-theme-primary: var(--mdc-theme-secondary, #64dd17);
background-color: #303030;
}

Expand Down
41 changes: 22 additions & 19 deletions demos/theme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
.demo-theme__color__block {
display: inline-block;
box-sizing: border-box;
width: 130px;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
Expand Down Expand Up @@ -106,36 +106,39 @@
<div class="mdc-toolbar-fixed-adjust"></div>
<section class="hero">
<button class="mdc-button mdc-button--raised mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</button>
<button class="mdc-button mdc-button--raised button mdc-theme--accent-bg mdc-theme--text-primary-on-accent">Accent</button>
<button class="mdc-button mdc-button--raised button mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</button>
</section>

<h2 class="mdc-typography--display1">Theme colors</h2>

<section class="example">
<h3 class="mdc-typography--title">Theme colors as text</h3>
<div class="demo-theme__color">
<div class="demo-theme__color__label">Primary</div>
<div class="demo-theme__color__block mdc-theme--primary mdc-typography mdc-typography--body2">Lorem ipsum</div>
<div class="demo-theme__color__block mdc-theme--primary mdc-typography mdc-typography--body2">Primary</div>
<div class="demo-theme__color__block mdc-theme--primary-light mdc-typography mdc-typography--body2">Primary Light</div>
<div class="demo-theme__color__block mdc-theme--primary-dark mdc-typography mdc-typography--body2">Primary Dark</div>
</div>
<div class="demo-theme__color">
<div class="demo-theme__color__label">Accent</div>
<div class="demo-theme__color__block mdc-theme--accent mdc-typography mdc-typography--body2">Lorem ipsum</div>
<div class="demo-theme__color__block mdc-theme--secondary mdc-typography mdc-typography--body2">Secondary</div>
<div class="demo-theme__color__block mdc-theme--secondary-light mdc-typography mdc-typography--body2">Secondary Light</div>
<div class="demo-theme__color__block mdc-theme--secondary-dark mdc-typography mdc-typography--body2">Secondary Dark</div>
</div>
</section>

<section class="example">
<h3 class="mdc-typography--title">Theme colors as background</h3>
<div class="demo-theme__color">
<div class="demo-theme__color__label">Primary</div>
<div class="demo-theme__color__block mdc-theme--primary-bg"></div>
<div class="demo-theme__color__block mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
<div class="demo-theme__color__block mdc-theme--primary-light-bg mdc-theme--text-primary-on-primary-light">Primary Light</div>
<div class="demo-theme__color__block mdc-theme--primary-dark-bg mdc-theme--text-primary-on-primary-dark">Primary Dark</div>
</div>
<div class="demo-theme__color">
<div class="demo-theme__color__label">Accent</div>
<div class="demo-theme__color__block mdc-theme--accent-bg"></div>
<div class="demo-theme__color__block mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
<div class="demo-theme__color__block mdc-theme--secondary-light-bg mdc-theme--text-primary-on-secondary-light">Secondary Light</div>
<div class="demo-theme__color__block mdc-theme--secondary-dark-bg mdc-theme--text-primary-on-secondary-dark">Secondary Dark</div>
</div>
<div class="demo-theme__color">
<div class="demo-theme__color__label">Background</div>
<div class="demo-theme__color__block mdc-theme--background"></div>
<div class="demo-theme__color__block mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
</div>
</section>

Expand All @@ -158,13 +161,13 @@ <h3 class="mdc-typography--title">Text on primary</h3>
<span class="mdc-theme--text-disabled-on-primary">Disabled</span>
<span class="mdc-theme--text-icon-on-primary material-icons">favorite</span>
</div>
<h3 class="mdc-typography--title">Text on accent</h3>
<div class="demo-theme__text-styles mdc-theme--accent-bg mdc-typography mdc-typography--body2">
<span class="mdc-theme--text-primary-on-accent">Primary</span>
<span class="mdc-theme--text-secondary-on-accent">Secondary</span>
<span class="mdc-theme--text-hint-on-accent">Hint</span>
<span class="mdc-theme--text-disabled-on-accent">Disabled</span>
<span class="mdc-theme--text-icon-on-accent material-icons">favorite</span>
<h3 class="mdc-typography--title">Text on secondary</h3>
<div class="demo-theme__text-styles mdc-theme--secondary-bg mdc-typography mdc-typography--body2">
<span class="mdc-theme--text-primary-on-secondary">Primary</span>
<span class="mdc-theme--text-secondary-on-secondary">Secondary</span>
<span class="mdc-theme--text-hint-on-secondary">Hint</span>
<span class="mdc-theme--text-disabled-on-secondary">Disabled</span>
<span class="mdc-theme--text-icon-on-secondary material-icons">favorite</span>
</div>
<h3 class="mdc-typography--title">Text on user-defined light background</h3>
<div class="demo-theme__text-styles demo-theme--custom-light-bg mdc-typography mdc-typography--body2">
Expand Down
2 changes: 1 addition & 1 deletion docs/authoring-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,7 @@ our [@material/rtl](../packages/mdc-rtl) library to assist us with this.
### Support for theming

A component should be able to be altered according to a **theme**. A theme can be defined any way
you wish. It may be by using _primary_ and _accent_ colors, or you may choose to expose scss
you wish. It may be by using _primary_ and _secondary_ colors, or you may choose to expose scss
variables or CSS Custom properties specific to your component. Whichever way you choose, ensure that
_clients can easily alter common aesthetic elements of your component to make it fit with their
overall design_. We use [@material/theme](../packages/mdc-theme) for this purpose.
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ hit the button, and get a pleasant greeting :wave:
You may have noticed that the button background, as well as the label and underline on focused text
input fields, defaults to the Indigo 500 (`#673AB7`) color from the [Material Design color palette](https://material.io/guidelines/style/color.html#color-color-palette).
This is part of the default theme that ships with MDC-Web; it uses Indigo 500 for a primary color, and
Pink A200 (`#FF4081`) for an accent color. Let's change the theme's primary color.
Pink A200 (`#FF4081`) for a secondary color. Let's change the theme's primary color.

A common misconception when implementing Material Design is that the colors you use _must_ come from
the Material Design color palette. This is not true at all. The only defining guideline for color within Material
Expand Down
Loading