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
+315 −167
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 7 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
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
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 @@ -177,8 +177,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 @@ -190,8 +190,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
4 changes: 2 additions & 2 deletions demos/tabs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -449,7 +449,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 @@ -471,7 +471,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 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 @@ -27,7 +27,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 @@ -39,7 +39,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 @@ -107,36 +107,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 @@ -159,13 +162,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 an secondary color. Let's change the theme's primary color.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

an secondary -> a secondary

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done


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
4 changes: 2 additions & 2 deletions docs/migrating-from-mdl.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ importing `@material/theme` or any MDC-Web components that rely on it:

```scss
$mdc-theme-primary: #9c27b0;
$mdc-theme-accent: #ffab40;
$mdc-theme-secondary: #ffab40;
$mdc-theme-background: #fff;

@import "@material/theme/mdc-theme";
Expand All @@ -287,7 +287,7 @@ end-users’ browsers, you can use the custom properties provided by `@material/
```css
:root {
--mdc-theme-primary: #9c27b0;
--mdc-theme-accent: #ffab40;
--mdc-theme-secondary: #ffab40;
--mdc-theme-background: #fff;
}
```
Expand Down
Loading