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.

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

feat(theming): add initial version for user-facing theming #1239

Merged
merged 9 commits into from
Sep 15, 2016

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