Skip to content

Conversation

@jelbourn
Copy link
Member

@jelbourn jelbourn commented Sep 14, 2016

R: @hansl @kara
#123

Apologies for not breaking up this PR into smaller pieces, the changes snowballed on me.

In this PR:

  • Split theme-dependent styles for each component (and core) into their own file prefixed with -theme.
  • Create an md-light-theme and md-dark-theme functions that outputs a "theme object", which is a sass map containing all of the theme's palettes.
  • Move the contrast palettes into properties on the main palettes so that the end-user never has to worry about passing the palettes around.
  • Add a few pre-built themes to start off.
  • Reorganize core scss files into the appropriate directories and correct import paths everywhere.
  • Change core.scss to _core.scss. The practical effect of this is that users either use one of the prebuilt theme css files OR, in defining their custom theme, @include the md-core() mixin (once). With either approach, the user ends up only importing one css file for material in their app.
  • Change scss comments from /** */ to //. I made this change so that users who consume our mixins do not end up with a bunch of random comments in their css output.
  • Remove the grab-bag _mixins.scss and move its contents to more specific files.
  • Change md-visually-hidden from a mixin to a single class and apply that class to use-sites.
  • Change md-input to ViewEncapsulation.None. Without this, the styles were broken (have been for a while, since vicb's change to how Angular's css shimming works).
  • Removed the "empty block" styleline rule in order to allow empty scss mixins (such as for grid-list and icon, which we have for consistency).

Coming in follow-up PRs:

  • Documentation on how to use theming
  • A fix for applying a nested theme to the contents of an overlay.
  • Add more pre-built themes.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Sep 14, 2016
Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

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

LGTM, just found a few typos

&::after {
// The button spec calls for focus on raised buttons (and FABs) to be indicated with a
// black, 12% opacity shade over the normal color (for both light and dark themes).
// We do this by placing an :after psuedo-element with the appropriate shade over the button.
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: psuedo -> pseudo

//
// Contrast colors are hard-coded because it is too difficult (probably impossible) to
// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
// While the contrast colors in the spec are not perscriptive, we use them for convenience.
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo: perscriptive -> prescriptive

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

cla: yes PR author has agreed to Google's Contributor License Agreement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants