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

chore(theme): remove dark theme #2169

Merged
merged 8 commits into from
Feb 3, 2018
Merged

chore(theme): remove dark theme #2169

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5067fd3
chore(theme): remove dark theme from readme
Jan 31, 2018
ad6e791
Merge branch 'master' into chore/theme/remove-dark-theme
Feb 2, 2018
9443612
chore(theme): remove dark theme
Feb 2, 2018
0675d70
Merge branch 'master' into chore/theme/remove-dark-theme
Feb 2, 2018
5f6e9ec
Merge branch 'master' into chore/theme/remove-dark-theme
Feb 2, 2018
016517f
chore(theme): removed dark theme from docs
Feb 2, 2018
eb21814
chore(theme): fix wording of theming doc on custom sass mixins
Feb 2, 2018
e15c709
chore(theme): reword theming doc
Feb 3, 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
32 changes: 0 additions & 32 deletions demos/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,12 @@
$mdc-theme-primary: #6200ee !default; // baseline purple, 500 tone
$mdc-theme-secondary: #018786 !default; // baseline teal, 600 tone

// Import button and ripple mixins to apply overrides for dark theme
// TODO(kfranqueiro): Pending further design discussion around how to manage dark theme
@import "../packages/mdc-button/mixins";
@import "../packages/mdc-ripple/mixins";
// All demo pages have a top toolbar, and most of them use theme variables.
// Import these *after* setting theme colors to override defaults in mdc-theme.
@import "../packages/mdc-theme/mdc-theme";
@import "../packages/mdc-toolbar/mdc-toolbar";
@import "../packages/mdc-typography/mdc-typography";

$dark-button-color: $material-color-light-green-a200;

// Used by ready.js to test whether the CSS has finished loading.
.demo-ready-detect {
position: relative;
Expand All @@ -47,32 +41,6 @@ fieldset {
border: 0;
}

// TODO mgoo: remove these dark theme when complete with removing other components
Copy link
Contributor

Choose a reason for hiding this comment

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

Also remove $dark-button-color which is no longer used after this is removed

.mdc-button {
@include mdc-theme-dark {
@include mdc-button-ink-color($dark-button-color);
@include mdc-states($dark-button-color);
}
}

.mdc-button--raised {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-filled-accessible($dark-button-color);
}
}

.mdc-button--unelevated {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-filled-accessible($dark-button-color);
}
}

.mdc-button--stroked {
@include mdc-theme-dark(".mdc-button", true) {
@include mdc-button-stroke-color($dark-button-color);
}
}

.catalog-title {
font-family: "Roboto Mono", monospace;
}
Expand Down
4 changes: 0 additions & 4 deletions demos/icon-toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
@import "../packages/mdc-icon-toggle/mdc-icon-toggle";
@import "../packages/mdc-ripple/mixins";

.mdc-theme--dark {
background: #303030;
}

.demo-wrapper {
margin-left: 1rem;
}
Expand Down
3 changes: 0 additions & 3 deletions docs/code/readme_standards.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,6 @@ CSS Class | Description
`mdc-foo` | Sets the foo
```

Remember to document `<COMPONENT_NAME>--theme-dark` CSS class if the component
changes its appearance in Dark Theme context.

### Sass Variables and Mixins

Sass variables are documented in a tabular format (See Tabular Format section).
Expand Down
48 changes: 23 additions & 25 deletions docs/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,37 +430,35 @@ Since our cards only contain text and no components, let's keep it simple for no
> Note: in the future we plan to provide a Javascript utility method for changing all derived colors and making this
use-case easier.

## Custom Sass Mixins
Copy link
Contributor

Choose a reason for hiding this comment

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

Custom Sass Mixins -> Custom Themes


## Dark Themes
We also have provided a way to customize on a per component basis. We realize that you may want a button with a
Copy link
Contributor

Choose a reason for hiding this comment

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

I think it would be okay to focus on a single example here, and use mdc-button-filled-accessible which automatically picks ink color based on fill color for best contrast.

Lead off with something like, "For example, let's say you want to make particular buttons stand out by changing their fill color."

blue background and another with a red background on the same page. Each component's package is documented with all
our provided sass mixins and what arguments to pass them. For example, here is a link to our [Button Sass Mixins docs](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#advanced-sass-mixins).
Copy link
Contributor

Choose a reason for hiding this comment

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

  • "all our provided" -> "all available"
  • "what arguments to pass them" -> "what parameters they accept"
  • Use a relative link to the button docs (../packages/mdc-button#advanced-sass-mixins should work) and rephrase to "See the MDC Button Sass mixins for example." (with link around "MDC Button Sass mixins")


Beyond what we've covered in this document so far, there's also the concept of a _dark theme_. All MDC Web components have
been designed to work with both light themes (that assume a light-colored background) and dark themes (with dark-colored
backgrounds), but the default is always light.
If we continue the example stated above, here is what the sass would like:
Copy link
Contributor

Choose a reason for hiding this comment

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

Rephrase to "Here is an example of how we could add styles to change the color of some buttons:"

(For some reason when I read "the example stated above", I was thinking it was referring to further above this section of the document, rather than just a paragraph ago)


> Note: When using a dark theme, you probably want to choose a dark color as the background for your page, and adjust
the MDC Web `background` color to match.

In order to apply a dark theme to a single element, you can use its `--theme-dark` class. For example, for a button:
```css
Copy link
Contributor

Choose a reason for hiding this comment

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

s/css/scss/

.red-bg-button {
@include mdc-button-container-fill-color(red);
}

```html
<button class="mdc-button mdc-button--raised mdc-button--theme-dark">
Raised dark button
</button>
.blue-bg-button {
@include mdc-button-container-fill-color(blue);
@include mdc-button-ink-color(white); // for better contrast
}
```

Alternatively, you can set your entire page (or a portion of it) to a dark theme by using the `mdc-theme--dark` class:
Html Markup would then look like:
Copy link
Contributor

Choose a reason for hiding this comment

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

"Then apply the custom class to some of our buttons, like so:"


```html
<section class="mdc-theme--dark">
<button class="mdc-button mdc-button--raised">
Still dark
</button>

<button class="mdc-button">
Me too!
</button>
</section>
```
<button class="mdc-button red-bg-button">
<i class="material-icons mdc-button__icon">favorite</i>
Button
</button>

> Note: there's currently no way to set a light portion inside of a dark one, so if you want to achieve that effect
you'll need to selectively apply dark classes to everything except the light bits.
<button class="mdc-button blue-bg-button">
<i class="material-icons mdc-button__icon">favorite</i>
Button
</button>
```
9 changes: 0 additions & 9 deletions packages/mdc-theme/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,6 @@ and five text styles:

> **A note about Primary and Secondary**, don't confuse primary/secondary _color_ with primary/secondary _text_. The former refers to the primary/secondary _theme_ color that is used to establish a visual identity and color many parts of your application. The latter refers to the style of text that is most prominent (low opacity, high contrast), and used to display most content.
Some components can change their appearance when in a Dark Theme context, aka placed on top of a dark background. There are two ways to specify if a component is in a Dark Theme context. The first is to add `mdc-theme--dark` to a *container* element, which holds the component. The second way is to add `<component_name>--theme-dark` modifier class to the actual component element. For example, `mdc-button--theme-dark` would put the MDC Button in a Dark Theme context.

> **A note about Dark Theme context**, don't confuse Dark Theme context with a component that has a dark color. Dark Theme context means the component sits on top of a dark background.
## Design & API Documentation

<ul class="icon-list">
Expand Down Expand Up @@ -141,11 +137,6 @@ CSS Class | Description
Mixin | Description
--- | ---
`mdc-theme-prop($property, $style, $important, $edgeOptOut)` | Applies a theme color or a custom color to a CSS property, optionally with `!important`. If `$edgeOptOut` is `true` and a theme color is passed, the style will be wrapped in a `@supports` clause to exclude the style in Edge to avoid issues with its buggy CSS variable support.
`mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context

#### `mdc-theme-dark($root-selector, $compound)`

Creates a rule that is applied when the current selector is within an Dark Theme context. If you are using the mixin on anything other than the base selector of the component, e.g. `.mdc-button`, you need to specify `$root-selector` as the base selector as a parameter. You can also specify `$compound` to true if the the current selector is a compound selector with the base selector, e.g. a modifier class to the component root element.

#### `mdc-theme-prop` Properties

Expand Down
9 changes: 0 additions & 9 deletions packages/mdc-theme/_functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,6 @@ $_mdc-theme-tonal-offset: 7%;
@return if(mdc-theme-tone($color) == "dark", "light", "dark");
}

// DEPRECATED. Use mdc-theme-contrast-tone instead.
@function mdc-theme-light-or-dark($color) {
// stylelint-disable indentation
@warn "The 'mdc-theme-light-or-dark' mixin is DEPRECATED and will be REMOVED in a future version. " +
"Please use 'mdc-theme-contrast-tone' or 'mdc-theme-tone' (as applicable) instead.";
@return mdc-theme-contrast-tone($color);
// stylelint-enable indentation
}

// lighten() and darken() require values to be between 0% and 100%.
@function mdc-theme-clamp-percentage_($percentage) {
@return max(0%, min(100%, $percentage));
Expand Down
57 changes: 0 additions & 57 deletions packages/mdc-theme/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,60 +76,3 @@
}
}
}

// Creates a rule to be used in MDC Web components for dark theming, and applies the provided contents.
// Should provide the $root-selector option if applied to anything other than the root selector.
// When used with a modifier class, provide a second argument of `true` for the $compound parameter
// to specify that this should be attached as a compound class.
//
// Usage example:
//
// ```scss
// .mdc-foo {
// color: black;
//
// @include mdc-theme-dark {
// color: white;
// }
//
// &__bar {
// background: black;
//
// @include mdc-theme-dark(".mdc-foo") {
// background: white;
// }
// }
// }
//
// .mdc-foo--disabled {
// opacity: .38;
//
// @include mdc-theme-dark(".mdc-foo", true) {
// opacity: .5;
// }
// }
// ```

// TODO: matt goo - remove this once all dark theme is removed
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
@if ($root-selector) {
@at-root {
@if ($compound) {
#{$root-selector}--theme-dark#{&},
.mdc-theme--dark & {
@content;
}
} @else {
#{$root-selector}--theme-dark &,
.mdc-theme--dark & {
@content;
}
}
}
} @else {
&--theme-dark,
.mdc-theme--dark & {
@content;
}
}
}