chore(theme): remove dark theme #2169

moog16 · 2018-02-02T18:20:14Z

BREAKING CHANGE: deleted mdc-theme-light-or-dark and mdc-theme-dark

BREAKING CHANGE: deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`

codecov-io · 2018-02-02T18:30:46Z

Codecov Report

Merging #2169 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #2169   +/-   ##
=======================================
  Coverage   99.14%   99.14%           
=======================================
  Files          90       90           
  Lines        3843     3843           
  Branches      497      497           
=======================================
  Hits         3810     3810           
  Misses         33       33

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d2e53e8...e15c709. Read the comment docs.

kfranqueiro

There is a "Dark Themes" section in docs/theming.md that we should re-word or remove, and make sure there are no longer references to the mixin/classes we're removing
Remove reminder about documenting dark theme support in readme_standards.md

kfranqueiro · 2018-02-02T22:22:43Z

demos/common.scss

@@ -47,32 +43,6 @@ fieldset {
  border: 0;
 }

-// TODO mgoo: remove these dark theme when complete with removing other components


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

kfranqueiro

Nits on replacement docs for theming.md

kfranqueiro · 2018-02-02T23:23:24Z

docs/theming.md

 ```

-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:


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

kfranqueiro · 2018-02-02T23:24:52Z

docs/theming.md


-## 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


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."

kfranqueiro · 2018-02-02T23:26:32Z

docs/theming.md

-## 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
+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).


"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")

kfranqueiro · 2018-02-02T23:29:06Z

docs/theming.md

-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:


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)

acdvorak

Some minor comments about wording in theming.md. We usually try to maintain a consistent "voice" across all of our docs 🙂

acdvorak · 2018-02-03T00:11:22Z

docs/theming.md


-## Dark Themes
+For example, let's say you want to make particular


Let's rephrase this paragraph to something like:

Most MDC Web components provide a set of Sass mixins to customize their appearance, such as changing the fill color, ink color, stroke width, etc. These mixins are documented in each component's README file (e.g., the [Button readme](../packages/mdc-button/README.md#advanced-sass-mixins)).

And line wrap at 120 chars 🙂

acdvorak · 2018-02-03T00:13:07Z

docs/theming.md

 ```

-Alternatively, you can set your entire page (or a portion of it) to a dark theme by using the `mdc-theme--dark` class:
+Then apply the custom class to some of our buttons, like so:


Nit: Rephrase to "Then apply the custom class to the button elements:"

acdvorak · 2018-02-03T00:13:55Z

docs/theming.md

-<button class="mdc-button mdc-button--raised mdc-button--theme-dark">
-  Raised dark button
-</button>
+```css


s/css/scss/

acdvorak · 2018-02-03T00:23:03Z

docs/theming.md

@@ -430,37 +430,25 @@ 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


Custom Sass Mixins -> Custom Themes

acdvorak · 2018-02-03T00:24:54Z

docs/theming.md

-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.
+Here is an example of how we could add styles to change the color of some buttons:


For example, to change the fill color of a button and automatically select an accessible ink color, simply call the `mdc-button-filled-accessible` mixin inside a custom CSS class:

moog16 · 2018-02-03T00:37:23Z

@acdvorak ya sounds a lot better than what I had :)

acdvorak

LGTM!

langan · 2018-02-08T14:43:17Z

Could you give some insight as to why this was removed?

Is there an alternative method now to style a component using the dark theme?

moog16 · 2018-02-08T18:47:57Z

@langan - Dark theme required a lot of maintenance and bloated our scss. We have been investing time in creating sass mixins to customize our components. This gives the developer more flexibility to customizing components. Please refer to https://github.com/material-components/material-components-web/blob/master/docs/theming.md#custom-themes for more.

Matt Goo added 4 commits January 30, 2018 16:46

chore(theme): remove dark theme from readme

5067fd3

Merge branch 'master' into chore/theme/remove-dark-theme

ad6e791

chore(theme): remove dark theme

9443612

BREAKING CHANGE: deleted `mdc-theme-light-or-dark` and `mdc-theme-dark`

Merge branch 'master' into chore/theme/remove-dark-theme

0675d70

lynnmercier requested a review from acdvorak February 2, 2018 18:39

lynnmercier assigned acdvorak Feb 2, 2018

Merge branch 'master' into chore/theme/remove-dark-theme

5f6e9ec

kfranqueiro suggested changes Feb 2, 2018

View reviewed changes

chore(theme): removed dark theme from docs

016517f

kfranqueiro reviewed Feb 2, 2018

View reviewed changes

chore(theme): fix wording of theming doc on custom sass mixins

eb21814

acdvorak suggested changes Feb 3, 2018

View reviewed changes

chore(theme): reword theming doc

e15c709

acdvorak approved these changes Feb 3, 2018

View reviewed changes

kfranqueiro approved these changes Feb 3, 2018

View reviewed changes

moog16 merged commit 13b5605 into master Feb 3, 2018

moog16 deleted the chore/theme/remove-dark-theme branch February 3, 2018 01:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(theme): remove dark theme #2169

chore(theme): remove dark theme #2169

moog16 commented Feb 2, 2018 •

edited

Loading

codecov-io commented Feb 2, 2018 •

edited

Loading

kfranqueiro left a comment

kfranqueiro Feb 2, 2018

kfranqueiro left a comment

kfranqueiro Feb 2, 2018

kfranqueiro Feb 2, 2018

kfranqueiro Feb 2, 2018

kfranqueiro Feb 2, 2018

acdvorak left a comment

acdvorak Feb 3, 2018

acdvorak Feb 3, 2018

acdvorak Feb 3, 2018

acdvorak Feb 3, 2018

acdvorak Feb 3, 2018

moog16 commented Feb 3, 2018

acdvorak left a comment

langan commented Feb 8, 2018

moog16 commented Feb 8, 2018


		## 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


		## Dark Themes
		For example, let's say you want to make particular

chore(theme): remove dark theme #2169

chore(theme): remove dark theme #2169

Conversation

moog16 commented Feb 2, 2018 • edited Loading

codecov-io commented Feb 2, 2018 • edited Loading

Codecov Report

kfranqueiro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kfranqueiro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acdvorak left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

moog16 commented Feb 3, 2018

acdvorak left a comment

Choose a reason for hiding this comment

langan commented Feb 8, 2018

moog16 commented Feb 8, 2018

moog16 commented Feb 2, 2018 •

edited

Loading

codecov-io commented Feb 2, 2018 •

edited

Loading