feat(color): Add on-surface and surface to theme. #2556
Conversation
…r does not specify on-primary
packages/mdc-card/mdc-card.scss
Outdated
| @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(#dbdbdb); | ||
| @include mdc-card-stroke(rgba(mdc-theme-prop-value(on-surface), .12)); |
There was a problem hiding this comment.
This will make the stroke translucent, use the Sass mix() function instead:
mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%)
Note: the mix() function takes percentages so make sure to use 12%, not .12
| $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); |
There was a problem hiding this comment.
These should all use the mix() function too, but that can go in another PR (to fix #2479)
packages/mdc-theme/mdc-theme.scss
Outdated
| @@ -24,7 +24,7 @@ | |||
|
|
|||
| // Special case, so that .mdc-theme--background changes background color, not text color. | |||
| .mdc-theme--background { | |||
There was a problem hiding this comment.
This doesn't look like it's being used or documented anywhere so we can probably get rid of it?
There was a problem hiding this comment.
We're keeping background. I reverted changes that I made to the components other than chips/card.
williamernest
force-pushed
the
feat/color/on-surface
branch
from
900b566
to
5b65caf
Compare
Codecov Report
@@ Coverage Diff @@
## master #2556 +/- ##
=======================================
Coverage 98.68% 98.68%
=======================================
Files 98 98
Lines 4194 4194
Branches 533 533
=======================================
Hits 4139 4139
Misses 55 55Continue to review full report at Codecov.
|
|
So there's good news and bad news. 👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there. 😕 The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request. Note to project maintainer: This is a terminal state, meaning the |
|
CLAs look good, thanks! |
packages/mdc-theme/_variables.scss
Outdated
| @@ -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; | |||
There was a problem hiding this comment.
Nit: change to #fff since we changed all the others to #fff
packages/mdc-card/mdc-card.scss
Outdated
| @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%)); |
There was a problem hiding this comment.
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
Fixes: #2482