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

Jump to bottom

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 17 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
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
6 changes: 6 additions & 0 deletions packages/mdc-theme/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ $mdc-theme-secondary: $mdc-theme-accent !default;
$mdc-theme-on-secondary: if(mdc-theme-contrast-tone($mdc-theme-secondary) == "dark", #000, #fff) !default;
$mdc-theme-background: #fff !default; // White

$mdc-theme-surface: white !default;
Copy link
Contributor

Choose a reason for hiding this comment

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

Nit: change to #fff since we changed all the others to #fff

$mdc-theme-on-surface: if(mdc-theme-contrast-tone($mdc-theme-surface) == "dark", #000, #fff) !default;

//
// Text colors according to light vs dark and text type.
//
Expand Down Expand Up @@ -70,8 +73,11 @@ $mdc-theme-property-values: (
secondary: $mdc-theme-secondary,
/* Background */
background: $mdc-theme-background,
/* Surface */
surface: $mdc-theme-surface,
on-primary: $mdc-theme-on-primary,
on-secondary: $mdc-theme-on-secondary,
on-surface: $mdc-theme-on-surface,
// Text-primary on "background" background
text-primary-on-background: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-background),
text-secondary-on-background: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-background),
Expand Down
11 changes: 5 additions & 6 deletions packages/mdc-theme/mdc-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,16 +22,15 @@
}
}

// Special case, so that .mdc-theme--background changes background color, not text color.
.mdc-theme--background {
@include mdc-theme-prop(background-color, background);
}

@each $style in map-keys($mdc-theme-property-values) {
@if $style != "background" {
@if $style != "background" and $style != "surface" {
.mdc-theme--#{$style} {
@include mdc-theme-prop(color, $style, true);
}
} @else {
.mdc-theme--#{$style} {
@include mdc-theme-prop(background-color, $style);
}
}
}

Expand Down