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

chore(theme): Remove tonal variants, since they dont match MD guidelines #2473

Merged
merged 3 commits into from
Mar 27, 2018
Merged

chore(theme): Remove tonal variants, since they dont match MD guidelines #2473

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1344997
chore(theme): Remove tonal variants, since they dont match MD guidelines
lynnmercier Mar 21, 2018
478ea17
remove references to light and dark variants in source code and demos
lynnmercier Mar 27, 2018
b614f20
Merge branch 'master' into chore/color
lynnmercier Mar 27, 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/elevation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,5 @@
@import "../packages/mdc-elevation/mdc-elevation";

.demo-elevation--custom-color {
@include mdc-elevation(16, secondary-dark, $opacity-boost: .1);
@include mdc-elevation(16, secondary, $opacity-boost: .1);
}
16 changes: 0 additions & 16 deletions demos/theme/_theme-shared.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,26 +198,10 @@ figure {
background-color: $demo-color-low-luminance;
}

.demo-theme-bg--low-luminance-light {
background-color: mdc-theme-light-variant($demo-color-low-luminance);
}

.demo-theme-bg--low-luminance-dark {
background-color: mdc-theme-dark-variant($demo-color-low-luminance);
}

.demo-theme-bg--high-luminance {
background-color: $demo-color-high-luminance;
}

.demo-theme-bg--high-luminance-light {
background-color: mdc-theme-light-variant($demo-color-high-luminance);
}

.demo-theme-bg--high-luminance-dark {
background-color: mdc-theme-dark-variant($demo-color-high-luminance);
}

.demo-theme-bg--custom-light {
background-color: #dddddd;
}
Expand Down
27 changes: 0 additions & 27 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,13 +170,9 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
<div class="demo-theme-color-group">
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary mdc-typography--body2">Primary</div>
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary-light mdc-typography--body2">Primary Light</div>
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--primary-dark mdc-typography--body2">Primary Dark</div>
</div>
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary mdc-typography--body2">Secondary</div>
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary-light mdc-typography--body2">Secondary Light</div>
<div class="demo-theme-color-swatch demo-theme-color-swatch--elevated mdc-theme--secondary-dark mdc-typography--body2">Secondary Dark</div>
</div>
</div>
</fieldset>
Expand All @@ -187,39 +183,16 @@ <h3 class="mdc-typography--headline 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-light-bg mdc-theme--text-primary-on-primary-light">Primary Light</div>
<div class="demo-theme-color-swatch mdc-theme--primary-dark-bg mdc-theme--text-primary-on-primary-dark">Primary Dark</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-light-bg mdc-theme--text-primary-on-secondary-light">Secondary Light</div>
<div class="demo-theme-color-swatch mdc-theme--secondary-dark-bg mdc-theme--text-primary-on-secondary-dark">Secondary Dark</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>
</div>
</div>
</fieldset>
</div>

<div class="demo-theme-color-section__row">
<fieldset class="demo-fieldset--color">
<legend class="mdc-typography--subheading2">Light and dark tonal variants for extreme input luminance</legend>

<div class="demo-theme-color-group">
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch demo-theme-bg--low-luminance mdc-theme--text-primary-on-dark">Low Luminance</div>
<div class="demo-theme-color-swatch demo-theme-bg--low-luminance-light mdc-theme--text-primary-on-dark">Light Variant</div>
<div class="demo-theme-color-swatch demo-theme-bg--low-luminance-dark mdc-theme--text-primary-on-dark">Dark Variant</div>
</div>
<div class="demo-theme-color-swatches">
<div class="demo-theme-color-swatch demo-theme-bg--high-luminance mdc-theme--text-primary-on-light">High Luminance</div>
<div class="demo-theme-color-swatch demo-theme-bg--high-luminance-light mdc-theme--text-primary-on-light">Light Variant</div>
<div class="demo-theme-color-swatch demo-theme-bg--high-luminance-dark mdc-theme--text-primary-on-light">Dark Variant</div>
</div>
</div>
</fieldset>
</div>
</div>

<div class="demo-theme-color-section">
Expand Down
2 changes: 1 addition & 1 deletion demos/theme/theme-baseline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
@import "../../packages/mdc-theme/color-palette";

// TODO: Use theme mixin(s) instead
$demo-toolbar-progress-bar-color: secondary-light;
$demo-toolbar-progress-bar-color: secondary;

@import "./theme-shared";
5 changes: 1 addition & 4 deletions packages/mdc-card/mdc-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,8 @@
}

.mdc-card--stroked {
$fill-color: mdc-theme-prop-value(background);
$stroke-color: mdc-theme-dark-variant($fill-color, 1);

@include mdc-elevation(0);
@include mdc-card-stroke($stroke-color);
@include mdc-card-stroke(#dbdbdb);
}

//
Expand Down
49 changes: 0 additions & 49 deletions packages/mdc-theme/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,18 +72,6 @@ $mdc-theme-background: #fff; // White
> Apps that previously customized `$mdc-theme-accent` will continue to work, but new apps should use
> `$mdc-theme-secondary` instead.

MDC Theme also exposes _light_ and _dark_ variants of the primary and secondary colors. By default, these values are
computed by lightening and darkening the main primary/secondary colors in Sass, but you can override them if desired:

```scss
$mdc-theme-primary-light: #ce93d8; // Purple 200
$mdc-theme-primary-dark: #6a1b9a; // Purple 800
$mdc-theme-secondary-light: #ffd180; // Orange A100
$mdc-theme-secondary-dark: #ff6d00; // Orange A700

@import "@material/theme/mdc-theme";
```

The text color, for text placed on top of these selected theme colors, is programmatically computed based on color contrast. We follow the Web Content Accessibility Guidelines 2.0.

https://www.w3.org/TR/WCAG20
Expand All @@ -95,11 +83,7 @@ https://www.w3.org/TR/WCAG20
CSS Custom property | Description
--- | ---
`--mdc-theme-primary` | The theme primary color
`--mdc-theme-primary-light` | The theme primary color (light variant)
`--mdc-theme-primary-dark` | The theme primary color (dark variant)
`--mdc-theme-secondary` | The theme secondary color
`--mdc-theme-secondary-light` | The theme secondary color (light variant)
`--mdc-theme-secondary-dark` | The theme secondary color (dark variant)
`--mdc-theme-background` | The theme background color
`--mdc-theme-text-<TEXT_STYLE>-on-<THEME_COLOR>` | Text color for TEXT_STYLE on top of THEME_COLOR background
`--mdc-theme-text-<TEXT_STYLE>-on-light` | Text color for TEXT_STYLE on top of light background
Expand All @@ -116,18 +100,10 @@ If you want to modify an element, which is not a Material Design component, you
CSS Class | Description
--- | ---
`mdc-theme--primary` | Sets the text color to the theme primary color
`mdc-theme--primary-light` | Sets the text color to the theme primary color (light variant)
`mdc-theme--primary-dark` | Sets the text color to the theme primary color (dark variant)
`mdc-theme--secondary` | Sets the text color to the theme secondary color
`mdc-theme--secondary-light` | Sets the text color to the theme secondary color (light variant)
`mdc-theme--secondary-dark` | Sets the text color to the theme secondary color (dark variant)
`mdc-theme--background` | Sets the background color to the theme background color
`mdc-theme--primary-bg` | Sets the background color to the theme primary color
`mdc-theme--primary-light-bg` | Sets the background color to the theme primary color (light variant)
`mdc-theme--primary-dark-bg` | Sets the background color to the theme primary color (dark variant)
`mdc-theme--secondary-bg` | Sets the background color to the theme secondary color
`mdc-theme--secondary-light-bg` | Sets the background color to the theme secondary color (light variant)
`mdc-theme--secondary-dark-bg` | Sets the background color to the theme secondary color (dark variant)
`mdc-theme--text-<TEXT_STYLE>-on-<THEME_COLOR>` | Sets text to a suitable color for TEXT_STYLE on top of THEME_COLOR background
`mdc-theme--text-<TEXT_STYLE>-on-light` | Sets text to a suitable color for TEXT_STYLE on top of light background
`mdc-theme--text-<TEXT_STYLE>-on-dark` | Sets text to a suitable color for TEXT_STYLE on top of dark background
Expand All @@ -147,11 +123,7 @@ The properties below can be used as the `$style` argument for the `mdc-theme-pro
Property Name | Description
--- | ---
`primary` | The theme primary color
`primary-light` | The theme primary color (light variant)
`primary-dark` | The theme primary color (dark variant)
`secondary` | The theme secondary color
`secondary-light` | The theme secondary color (light variant)
`secondary-dark` | The theme secondary color (dark variant)
`background` | The theme background color
`text-<TEXT_STYLE>-on-<THEME_COLOR>` | TEXT_STYLE on top of THEME_COLOR background
`text-<TEXT_STYLE>-on-light` | TEXT_STYLE on top of a light background
Expand Down Expand Up @@ -192,27 +164,6 @@ Determines whether to use light or dark text on top of a given color.
@debug mdc-theme-contrast-tone(#9c27b0); // light
```

#### `mdc-theme-light-variant($color)` and `mdc-theme-dark-variant($color)`

Function | Description
--- | ---
`mdc-theme-dark-variant($color, $num-indexes)` | Darken a color by a certain number of indexes within its tonal palette
`mdc-theme-light-variant($color, $num-indexes)` | Lighten a color by a certain number of indexes within its tonal palette

Both functions are luminance-aware, and will always return a color that is visually distinct from both the input color
_and_ the other function.

That is, if the color passed to `mdc-theme-dark-variant()` is already so dark that darkening it by the requested amount
would return `#000000`, the function will _lighten_ the color instead.

Similarly, if the color passed to `mdc-theme-light-variant()` is already so light that lightening it by the requested
amount would return `#ffffff`, the function will _darken_ the color instead.

To avoid having both functions return the same color in cases of extremely high or low input luminance,
`mdc-theme-dark-variant()` will return a color that is _twice_ (×2) as dark as requested when the input is already very
light. Likewise, `mdc-theme-light-variant()` will return a color that is _twice_ (×2) as light as requested when the
input is already very dark. This ensures that the _light_ variant will always be lighter than the _dark_ variant.

#### `mdc-theme-prop-value($property)`

If `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the
Expand Down
63 changes: 0 additions & 63 deletions packages/mdc-theme/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@

@import "./constants";

// Used by the functions below to shift a color's luminance by approximately
// one index within its tonal palette.
// E.g., shift from Red 500 to Red 400 or Red 600.
$_mdc-theme-tonal-offset: 7%;

// Calculate the luminance for a color.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function mdc-theme-luminance($color) {
Expand Down Expand Up @@ -63,61 +58,3 @@ $_mdc-theme-tonal-offset: 7%;
@function mdc-theme-contrast-tone($color) {
@return if(mdc-theme-tone($color) == "dark", "light", "dark");
}

// lighten() and darken() require values to be between 0% and 100%.
@function mdc-theme-clamp-percentage_($percentage) {
@return max(0%, min(100%, $percentage));
}

// Generate light and dark variants of the given color, offset by approximately
// the specified number of indexes within the color's tonal palette.
@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {
$luminance: mdc-theme-luminance($color) * 100%;
$amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);
$amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);
$lower-bound: $amount-1x;
$upper-bound: 100% - $lower-bound;

@if $luminance <= $lower-bound {
@return (
dark: lighten($color, $amount-1x),
light: lighten($color, $amount-2x)
);
} @else if $luminance >= $upper-bound {
@return (
dark: darken($color, $amount-2x),
light: darken($color, $amount-1x)
);
} @else {
@return (
dark: darken($color, $amount-1x),
light: lighten($color, $amount-1x)
);
}
}

// Darken the given color by approximately the specified number of indexes
// within its tonal palette.
//
// If the color is already very dark, it will be lightened instead of darkened
// to ensure that the returned value is visually distinct from the input color.
//
// If the color is very light, it will be darkened twice as much as usual to
// ensure that the returned value is visually distinct from the light variant
// (which will actually end up being a dark shade).
@function mdc-theme-dark-variant($color, $num-indexes: 2) {
@return map-get(mdc-theme-tonal-variants_($color, $num-indexes), dark);
}

// Lighten the given color by approximately the specified number of indexes
// within its tonal palette.
//
// If the color is already very light, it will be darkened instead of lightened
// to ensure that the returned value is visually distinct from the input color.
//
// If the color is very dark, it will be lightened twice as much as usual to
// ensure that the returned value is visually distinct from the dark variant
// (which will actually end up being a light tint).
@function mdc-theme-light-variant($color, $num-indexes: 2) {
@return map-get(mdc-theme-tonal-variants_($color, $num-indexes), light);
}
32 changes: 0 additions & 32 deletions packages/mdc-theme/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,11 @@
//

$mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
$mdc-theme-primary-light: mdc-theme-light-variant($mdc-theme-primary) !default;
$mdc-theme-primary-dark: mdc-theme-dark-variant($mdc-theme-primary) !default;

// The $mdc-theme-accent variable is DEPRECATED - it exists purely for backward compatibility.
// The $mdc-theme-secondary* variables should be used for all new projects.
$mdc-theme-accent: #018786 !default; // baseline teal, 600 tone
$mdc-theme-secondary: $mdc-theme-accent !default;
$mdc-theme-secondary-light: mdc-theme-light-variant($mdc-theme-secondary) !default;
$mdc-theme-secondary-dark: mdc-theme-dark-variant($mdc-theme-secondary) !default;

$mdc-theme-background: #fff !default; // White

Expand Down Expand Up @@ -69,12 +65,8 @@ $mdc-theme-text-colors: (
$mdc-theme-property-values: (
/* Primary */
primary: $mdc-theme-primary,
primary-light: $mdc-theme-primary-light,
primary-dark: $mdc-theme-primary-dark,
/* Secondary */
secondary: $mdc-theme-secondary,
secondary-light: $mdc-theme-secondary-light,
secondary-dark: $mdc-theme-secondary-dark,
/* Background */
background: $mdc-theme-background,
// Text-primary on "primary" background
Expand All @@ -83,36 +75,12 @@ $mdc-theme-property-values: (
text-hint-on-primary: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary),
text-disabled-on-primary: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary),
text-icon-on-primary: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary),
// Text-primary on "primary-light" background
text-primary-on-primary-light: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-primary-light),
text-secondary-on-primary-light: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-primary-light),
text-hint-on-primary-light: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary-light),
text-disabled-on-primary-light: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary-light),
text-icon-on-primary-light: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary-light),
// Text-primary on "primary-dark" background
text-primary-on-primary-dark: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-primary-dark),
text-secondary-on-primary-dark: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-primary-dark),
text-hint-on-primary-dark: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-primary-dark),
text-disabled-on-primary-dark: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-primary-dark),
text-icon-on-primary-dark: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-primary-dark),
// Text-primary on "secondary" background
text-primary-on-secondary: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary),
text-secondary-on-secondary: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary),
text-hint-on-secondary: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary),
text-disabled-on-secondary: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary),
text-icon-on-secondary: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary),
// Text-primary on "secondary-light" background
text-primary-on-secondary-light: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary-light),
text-secondary-on-secondary-light: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary-light),
text-hint-on-secondary-light: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary-light),
text-disabled-on-secondary-light: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary-light),
text-icon-on-secondary-light: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary-light),
// Text-primary on "secondary-dark" background
text-primary-on-secondary-dark: mdc-theme-ink-color-for-fill_(primary, $mdc-theme-secondary-dark),
text-secondary-on-secondary-dark: mdc-theme-ink-color-for-fill_(secondary, $mdc-theme-secondary-dark),
text-hint-on-secondary-dark: mdc-theme-ink-color-for-fill_(hint, $mdc-theme-secondary-dark),
text-disabled-on-secondary-dark: mdc-theme-ink-color-for-fill_(disabled, $mdc-theme-secondary-dark),
text-icon-on-secondary-dark: mdc-theme-ink-color-for-fill_(icon, $mdc-theme-secondary-dark),
// 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
2 changes: 1 addition & 1 deletion packages/mdc-theme/mdc-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
}

// CSS rules for using primary and secondary (plus light/dark variants) as background colors.
@each $style in ("primary", "primary-light", "primary-dark", "secondary", "secondary-light", "secondary-dark") {
@each $style in ("primary", "secondary") {
.mdc-theme--#{$style}-bg {
@include mdc-theme-prop(background-color, $style, true);
}
Expand Down