Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

feat(color): Add on-surface and surface to theme. #2556

Merged
merged 20 commits into from
Apr 18, 2018
Merged

feat(color): Add on-surface and surface to theme. #2556

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
2b6c37f
feat(theme): Add new mdc-theme-on-primary global variable
lynnmercier Mar 28, 2018
b67d378
add the feature of picking black/white text for on-primary if the use…
lynnmercier Mar 30, 2018
663bf91
fix theme demo page, update README
lynnmercier Apr 2, 2018
6a0c403
feat(theme): Update for comments
williamernest Apr 6, 2018
a54bea7
Merge branch 'master' into feat/on-primary
williamernest Apr 9, 2018
addd657
WIP: Add surface and on-surface colors. Update cards/chips
williamernest Apr 9, 2018
f8826a7
feat(theme): Revert change to chips demo
williamernest Apr 11, 2018
5b65caf
feat(theme): revert changes to other components that are not card or …
williamernest Apr 13, 2018
531eeaa
Merge branch 'master' into feat/on-primary
williamernest Apr 13, 2018
0704448
WIP: MErge with master
williamernest Apr 13, 2018
9dd3307
feat(theme): Update theme class generator to apply background-color t…
williamernest Apr 13, 2018
b76ea41
Merge branch 'feat/on-primary' into feat/color/on-surface
williamernest Apr 13, 2018
e62be16
Merge branch 'master' into feat/on-primary
williamernest Apr 18, 2018
38e155e
feat(theme): Update for comments
williamernest Apr 18, 2018
08a752f
feat(theme): Update for comments
williamernest Apr 18, 2018
460f9cb
Merge master
williamernest Apr 18, 2018
19d5a89
Merge branch 'feat/on-primary' into feat/color/on-surface
williamernest Apr 18, 2018
1aac4d4
feat(theme): Update for comments:
williamernest Apr 18, 2018
dfda05b
feat(theme): Update for comments.
williamernest Apr 18, 2018
f60d563
feat(theme): Add import statement
williamernest Apr 18, 2018
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/drawer/temporary-drawer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<aside class="mdc-drawer mdc-drawer--temporary demo-drawer">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
<div class="mdc-drawer__header-content mdc-theme--on-primary mdc-theme--primary-bg">
Header here
</div>
</header>
Expand Down
4 changes: 2 additions & 2 deletions demos/icon-toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ <h2>Additional Color Combinations</h2>
<div id="demo-color-combos">
<div id="light-on-bg" class="demo-color-combo">
<div>
<i class="mdc-icon-toggle material-icons mdc-theme--text-primary-on-primary"
<i class="mdc-icon-toggle material-icons mdc-theme--on-primary"
role="button"
aria-label="Add to favorites"
aria-pressed="false"
Expand All @@ -119,7 +119,7 @@ <h2>Additional Color Combinations</h2>
favorite_border
</i>
</div>
<div class="mdc-theme--text-primary-on-primary">Light icon on background</div>
<div class="mdc-theme--on-primary">Light icon on background</div>
</div>
<div id="dark-on-bg" class="demo-color-combo">
<div class="mdc-theme--primary">
Expand Down
6 changes: 3 additions & 3 deletions demos/tabs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,12 @@
.custom-indicator-tab-bar-in-toolbar,
.custom-tab-bar-in-toolbar {
.mdc-tab:not(.mdc-tab--active) {
@include mdc-tab-ink-color(rgba(mdc-theme-prop-value(text-primary-on-primary), 0.54));
@include mdc-tab-ink-color(rgba(mdc-theme-prop-value(on-primary), 0.54));
}

.mdc-tab--active,
.mdc-tab:hover {
@include mdc-tab-ink-color(text-primary-on-primary);
@include mdc-tab-ink-color(on-primary);
}
}

Expand All @@ -80,5 +80,5 @@
}

.custom-tab-bar-in-toolbar {
@include mdc-tab-bar-indicator-ink-color(text-primary-on-primary);
@include mdc-tab-bar-indicator-ink-color(on-primary);
}
2 changes: 1 addition & 1 deletion demos/theme-loader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
*/

(function() {
var TRUSTED_THEMES = ['baseline', 'black', 'dark', 'white', 'yellow'];
var TRUSTED_THEMES = ['baseline', 'black', 'dark', 'shrine'];
var DEFAULT_THEME = TRUSTED_THEMES[0];
var PRIVATE_TYPE_MARKER = {};

Expand Down
8 changes: 2 additions & 6 deletions demos/theme/_menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,6 @@
border-color: $material-color-amber-300 $material-color-pink-400 $material-color-pink-400 $material-color-amber-300;
}

[data-theme="white"] .demo-theme-color-radio__inner {
border-color: #fff $material-color-orange-500 $material-color-orange-500 #fff;
}

[data-theme="yellow"] .demo-theme-color-radio__inner {
border-color: $material-color-yellow-500 $material-color-blue-500 $material-color-blue-500 $material-color-yellow-500;
[data-theme="shrine"] .demo-theme-color-radio__inner {
border-color: #442B2D #FCB8AB #FCB8AB #442B2D;
}
32 changes: 9 additions & 23 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,21 +73,13 @@
</div>
Black primary (custom)
</li>
<li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="white">
<li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="shrine">
<div class="mdc-list-item__graphic">
<i class="demo-theme-color-radio">
<span class="demo-theme-color-radio__inner"></span>
</i>
</div>
White primary (custom)
</li>
<li class="mdc-list-item" role="menuitem" tabindex="0" data-theme="yellow">
<div class="mdc-list-item__graphic">
<i class="demo-theme-color-radio">
<span class="demo-theme-color-radio__inner"></span>
</i>
</div>
Yellow primary (custom)
Shrine (custom)
</li>
</ul>
</div>
Expand All @@ -113,7 +105,7 @@
<aside class="mdc-drawer--temporary">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--primary-bg mdc-theme--text-primary-on-primary">
<div class="mdc-drawer__header-content mdc-theme--primary-bg mdc-theme--on-primary">
Header here
</div>
</header>
Expand Down Expand Up @@ -182,10 +174,10 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">

<div class="demo-theme-color-group">
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch mdc-theme--primary-bg mdc-theme--text-primary-on-primary">Primary</div>
<div class="demo-theme-color-swatch mdc-theme--primary-bg mdc-theme--on-primary">Primary</div>
</div>
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch mdc-theme--secondary-bg mdc-theme--text-primary-on-secondary">Secondary</div>
<div class="demo-theme-color-swatch mdc-theme--secondary-bg mdc-theme--on-secondary">Secondary</div>
</div>
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--background mdc-theme--text-primary-on-background">Background</div>
Expand Down Expand Up @@ -218,11 +210,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">

<div class="demo-theme-color-group">
<div class="demo-theme-text-row mdc-theme--primary-bg mdc-typography--body2">
<span class="demo-theme-text-style mdc-theme--text-primary-on-primary">Primary</span>
<span class="demo-theme-text-style mdc-theme--text-secondary-on-primary">Secondary</span>
<span class="demo-theme-text-style mdc-theme--text-hint-on-primary">Hint</span>
<span class="demo-theme-text-style mdc-theme--text-disabled-on-primary">Disabled</span>
<span class="demo-theme-text-style mdc-theme--text-icon-on-primary material-icons">favorite</span>
<span class="demo-theme-text-style mdc-theme--on-primary">Text</span>
<span class="demo-theme-text-style mdc-theme--on-primary material-icons">favorite</span>
</div>
</div>
</fieldset>
Expand All @@ -232,11 +221,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">

<div class="demo-theme-color-group">
<div class="demo-theme-text-row mdc-theme--secondary-bg mdc-typography--body2">
<span class="demo-theme-text-style mdc-theme--text-primary-on-secondary">Primary</span>
<span class="demo-theme-text-style mdc-theme--text-secondary-on-secondary">Secondary</span>
<span class="demo-theme-text-style mdc-theme--text-hint-on-secondary">Hint</span>
<span class="demo-theme-text-style mdc-theme--text-disabled-on-secondary">Disabled</span>
<span class="demo-theme-text-style mdc-theme--text-icon-on-secondary material-icons">favorite</span>
<span class="demo-theme-text-style mdc-theme--on-secondary">Text</span>
<span class="demo-theme-text-style mdc-theme--on-secondary material-icons">favorite</span>
</div>
</div>
</fieldset>
Expand Down
7 changes: 4 additions & 3 deletions demos/theme/theme-white.scss → demos/theme/theme-shrine.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@

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

// TODO: Use theme mixin(s) instead
$mdc-theme-primary: #fff;
$mdc-theme-secondary: $material-color-orange-500;
$mdc-theme-primary: #FCB8AB;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-primary: #442B2D;
$mdc-theme-on-secondary: #442B2D;

@import "./theme-shared";
23 changes: 0 additions & 23 deletions demos/theme/theme-yellow.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion demos/top-app-bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<aside class="mdc-drawer mdc-drawer--temporary">
<nav class="mdc-drawer__drawer">
<header class="mdc-drawer__header">
<div class="mdc-drawer__header-content mdc-theme--text-primary-on-primary mdc-theme--primary-bg">
<div class="mdc-drawer__header-content mdc-theme--on-primary mdc-theme--primary-bg">
Header here
</div>
</header>
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-button/mdc-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@
.mdc-button--unelevated {
@include mdc-button--filled_;
@include mdc-button-container-fill-color(primary);
@include mdc-button-ink-color(text-primary-on-primary);
@include mdc-states(text-primary-on-primary);
@include mdc-button-ink-color(on-primary);
@include mdc-states(on-primary);
}

.mdc-button--raised {
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-card/mdc-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
// postcss-bem-linter: define card

.mdc-card {
@include mdc-card-fill-color(background);
@include mdc-card-fill-color(surface);
@include mdc-card-corner-radius(2px);
@include mdc-elevation(2);
@include mdc-card-container-layout_;
}

.mdc-card--stroked {
@include mdc-elevation(0);
@include mdc-card-stroke($mdc-card-stroke-color);
@include mdc-card-stroke(mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%));
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we update the variable instead of replacing it here? (IIRC I added that variable for reuse with shape, at least in demos, but potentially of use to users for similar purposes as well)

Also FYI this results in changing from #dbdbdb to #e0e0e0

}

//
Expand Down
12 changes: 7 additions & 5 deletions packages/mdc-chips/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,18 @@
// limitations under the License.
//

@import "@material/theme/variables";

$mdc-chip-border-radius-default: 16px;
$mdc-chip-fill-color-default: rgba(black, .08);
$mdc-chip-ink-color-default: rgba(black, .6);
$mdc-chip-fill-color-default: rgba(mdc-theme-prop-value(on-surface), .12);
Copy link
Contributor

Choose a reason for hiding this comment

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

These should all use the mix() function too, but that can go in another PR (to fix #2479)

$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
$mdc-chip-horizontal-padding: 12px;
$mdc-chip-vertical-padding: 7px;

$mdc-chip-icon-color: rgba(black, .54);
$mdc-chip-icon-color: rgba(mdc-theme-prop-value(on-surface), .54);
$mdc-chip-trailing-icon-size: 18px;
$mdc-chip-trailing-icon-hover-color: rgba(black, .62);
$mdc-chip-trailing-icon-focus-color: rgba(black, .87);
$mdc-chip-trailing-icon-hover-color: rgba(mdc-theme-prop-value(on-surface), .62);
$mdc-chip-trailing-icon-focus-color: rgba(mdc-theme-prop-value(on-surface), .87);

$mdc-chip-checkmark-animation-delay: 50ms;
$mdc-chip-checkmark-animation-duration: 150ms;
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-chips/chip/mdc-chip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
}

.mdc-chip--selected {
@include mdc-theme-prop(background-color, white);
@include mdc-theme-prop(background-color, surface);
}

.mdc-chip__text {
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-fab/mdc-fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@
@include mdc-fab-base_;
@include mdc-fab-container-color(secondary);
@include mdc-fab-icon-size(24px);
@include mdc-fab-ink-color(text-primary-on-secondary);
@include mdc-states(text-primary-on-secondary);
@include mdc-fab-ink-color(on-secondary);
@include mdc-states(on-secondary);
}

.mdc-fab--mini {
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-grid-list/mdc-grid-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ $mdc-grid-list-tile-secondary-icon-size: 24px;

.mdc-grid-tile__secondary {
@include mdc-theme-prop(background-color, primary);
@include mdc-theme-prop(color, text-primary-on-primary);
@include mdc-theme-prop(color, on-primary);

position: absolute;
bottom: 0;
Expand Down
Loading