(docs) update theming.md #1385

vinagreti · 2016-09-30T11:55:02Z

@jelbourn, I've used /src/lib/input/_input-theme.scss as base to updat the custom component.

@jelbourn

@jelbourn, I've used /src/lib/input/_input-theme.scss as base to updat the custom component.

jelbourn · 2016-10-03T16:07:38Z

docs/theming.md

@@ -109,15 +109,91 @@ dark theme.
 In order to style your own components with our tooling, the component's styles must be defined 
 with Sass. 

-You can consume the theming functions and variables from the `@angular/material/core/theming`.


Rather than making this document much longer, I'd rather create another file theming-your-components.md that covers how to theme your own components with the material tools.

@jelbourn Ok, I'll do this! But should I use your tiny as possible example or can we provide the example with all that information to theming custom form components?

I still want to use as small of an example as possible that illustrates the point. Right now, there's just way too much here that distracts from the theming bits.

jelbourn · 2016-10-03T16:12:52Z

docs/theming.md

-  color: md-color($primary, default-contrast);
+@import '~@angular/material/core/theming/theming';
+
+@mixin custom-input-theme($theme) {


It's not really necessary to include this much css. We can communicate the idea with much less code, e.g.:

// Define a mixin that accepts a theme and outputs the color styles for the component. @mixin candy-carousel-theme($theme) { // Extract whichever individual palettes you need from the theme. $primary: map-get($theme, primary); $accent: map-get($theme, accent); // Use md-color to extract individual colors from a palette as necessary. .candy-carousel { background-color: md-color($primary); border-color: md-color($accent, A400); } }

@jelbourn I've placed this much of css because I was trying to help people creating their own form elements that use all input styles, from placeholder-color to underline-focused-color. Maybe I can point the _input-theme.scss as a base to customize inputs and show only this tiny format that you suggested. What do you think?
Or you are saying to me that we can use this tiny format in theming.md and in the new file called theming-your-components.md we place that much of code that I did in this PR?

@jelbourn

As @jelbourn pointed, "Rather than making this document much longer, I'd rather create another file theming-your-components.md that covers how to theme your own components with the material tools."

@jelbourn

As @jelbourn pointed out, We can communicate the idea of theming custo components with much less code. I added just enougth code to show how to customize custom component and I added a new file with a more deep answer.

More explanations about files and functions used.

vinagreti · 2016-10-03T18:08:35Z

@jelbourn I've made the changes. Please, review it again!

Improved css look.

Removed unnecessary code.

@mixin

Removed unnecessary code. Created two examples to showing customizations with and without @mixin. No more custom theme used. Using only pre-built one.

Removed unnecessary text.

Removed unnecessary imports.

Shortest example.

vinagreti · 2016-10-05T14:23:02Z

@jelbourn I've made the changes and I think that it is the shortest form. Please, review it again!

Removed unnecessary text

jelbourn · 2016-10-05T18:14:59Z

docs/theming-your-components.md

+
+In order to style your own components with our tooling, the component's styles must be defined with Sass.
+
+You can consume the theming functions from the `@angular/material/core/theming/all-theme` and theming variables from a pre-built theme or a custom one. You can use the `md-color` function to extract a specific color from a palette.


Wrap lines at 100 columns.

jelbourn · 2016-10-05T18:15:59Z

docs/theming-your-components.md

+
+In order to style your own components with our tooling, the component's styles must be defined with Sass.
+
+You can consume the theming functions from the `@angular/material/core/theming/all-theme` and theming variables from a pre-built theme or a custom one. You can use the `md-color` function to extract a specific color from a palette.


The imports for theming should be
@angular/material/core/theming/theming for functions and
@angular/material/core/theming/palette for Material palette vars

I'd like to also link to the _theming.scss source file with something like

For more details about the theming functions, see the comments in the [source](https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss).

jelbourn · 2016-10-05T18:17:08Z

docs/theming-your-components.md

+// Import theming functions and variables
+@import '~@angular/material/core/theming/all-theme';
+// Import a pre-built theme
+@import '~@angular/material/core/theming/prebuilt/deep-purple-amber';


You shouldn't ever import a pre-built theme; those are meant to be leaf nodes in the sass build. Instead you could mention importing the theme variables from your own app's theme definition with something like $candy-app-primary, etc.

jelbourn · 2016-10-05T18:17:39Z

docs/theming-your-components.md

+}
+```
+
+## Using @mixin to automatically apply a theme


@mixin
(here and elsewhere)

jelbourn · 2016-10-05T18:20:26Z

docs/theming-your-components.md

+.candy-carousel {
+  background-color: md-color($primary);
+  border-color: md-color($accent, A400);
+}


I would move the mixin approach above this example. I want to encourage people to use the mixin approach in order to make it easier to switch between themes in their app.

jelbourn · 2016-10-05T18:22:16Z

docs/theming-your-components.md

+}
+```
+
+Now you just have have to call the @mixin function to apply the theme:


It would be good to explain somewhere in this doc the advantage of using a mixin (calling it with a different theme argument to allow multiple themes within the app).

We should also mention that, when doing this, the theme file should only contain the definitions that are affected by the passed-in theme.

jelbourn · 2016-10-05T18:22:39Z

docs/theming-your-components.md

+// Import your custom input theme file so you can call the custom-input-theme function
+@import 'app/candy-carousel/candy-carousel-theme.scss';
+
+//Using the $theme variable from the pre-built theme you can call the theming function


Missing space between // and Using

jelbourn · 2016-10-05T18:23:56Z

docs/theming.md

@@ -109,15 +109,25 @@ dark theme.
 In order to style your own components with our tooling, the component's styles must be defined 
 with Sass. 

-You can consume the theming functions and variables from the `@angular/material/core/theming`.
-You can use the `md-color` function to extract a specific color from a palette. For example:
+You can consume the theming functions and variables from the @angular/material/core/theming. You can use the `md-color` function to extract a specific color from a palette. For example:


I would just remove all of the content in this section now and point to the new doc.

jelbourn · 2016-10-05T18:24:36Z

docs/theming-your-components.md

@@ -0,0 +1,56 @@
+#Theming your custom components
+
+In order to style your own components with our tooling, the component's styles must be defined with Sass.


Let's change "our tooling" to "Angular Material's tooling"

googlebot · 2016-10-14T13:01:47Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.

googlebot · 2016-10-14T13:01:47Z

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for the commit author(s). If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.

googlebot · 2016-10-14T13:05:33Z

CLAs look good, thanks!

googlebot · 2016-10-14T13:05:33Z

CLAs look good, thanks!

vinagreti · 2016-10-14T13:06:26Z

@jelbourn I've made the changes and cleaned up. Please, review it again!

Clean up

@mixin

Improved @mixin file name to match the candy-carousel example.

Improved `@mixin` paragraph.

jelbourn · 2016-10-18T18:23:45Z

LGTM, thanks!

angular-automatic-lock-bot · 2019-09-06T02:02:36Z

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

(docs) update theming.md

0e5fc4d

@jelbourn, I've used /src/lib/input/_input-theme.scss as base to updat the custom component.

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

This was referenced Sep 30, 2016

Problem with Alpha.9-3 installation #1381

Closed

md-input changing un-focus text and under-line color #1394

Closed

Theming my own components (Alpha 9) #1393

Closed

jelbourn requested changes Oct 3, 2016

View reviewed changes

Bruno da Silva joão added 3 commits October 3, 2016 14:26

Added theming-your-components.md

2ac7813

As @jelbourn pointed, "Rather than making this document much longer, I'd rather create another file theming-your-components.md that covers how to theme your own components with the material tools."

Update theming.md

c85eeb0

As @jelbourn pointed out, We can communicate the idea of theming custo components with much less code. I added just enougth code to show how to customize custom component and I added a new file with a more deep answer.

Update theming-your-components.md

f9e30f4

More explanations about files and functions used.

Update theming-your-components.md

7da5872

Improved css look.

vinagreti mentioned this pull request Oct 3, 2016

md-menu does not appear next to attached element and menu anchor links do not route #1387

Closed

Bruno da Silva joão added 6 commits October 5, 2016 10:39

Update hteming.md

69f6654

Removed unnecessary code.

Update theming-your-components.md

cee6d39

Removed unnecessary code. Created two examples to showing customizations with and without @mixin. No more custom theme used. Using only pre-built one.

Update theming-your-components.md

21e80d1

Removed unnecessary text.

Update theming-your-components.md

2388c76

Removed unnecessary imports.

Update theming.md

5c1cc1b

Shortest example.

Update theming-your-components.md

5d82484

Shortest example.

Update theming.md

e3f5ff1

Removed unnecessary text

jelbourn reviewed Oct 5, 2016

View reviewed changes

jelbourn added the pr: needs cleanup / tests label Oct 12, 2016

googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Oct 14, 2016

Cleaned up and changed as @jelbourn suggested

bdc78ad

vinagreti force-pushed the patch-2 branch from c93156c to bdc78ad Compare October 14, 2016 13:05

googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Oct 14, 2016

Bruno da Silva joão added 3 commits October 14, 2016 10:21

Update theming-your-components.md

eb916d3

Clean up

Update theming-your-components.md

0e1f1a7

Improved @mixin file name to match the candy-carousel example.

Update theming-your-components.md

eda28bb

Improved `@mixin` paragraph.

jelbourn added pr: lgtm and removed pr: needs cleanup / tests labels Oct 18, 2016

jelbourn merged commit 3c1e8d2 into angular:master Oct 18, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019


		In order to style your own components with our tooling, the component's styles must be defined with Sass.

		You can consume the theming functions from the `@angular/material/core/theming/all-theme` and theming variables from a pre-built theme or a custom one. You can use the `md-color` function to extract a specific color from a palette.

		@@ -0,0 +1,56 @@
		#Theming your custom components

		In order to style your own components with our tooling, the component's styles must be defined with Sass.

(docs) update theming.md #1385

(docs) update theming.md #1385

Uh oh!

Conversation

vinagreti commented Sep 30, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vinagreti commented Oct 3, 2016

Uh oh!

vinagreti commented Oct 5, 2016

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn Oct 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn Oct 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jelbourn Oct 5, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

googlebot commented Oct 14, 2016

Uh oh!

googlebot commented Oct 14, 2016

Uh oh!

googlebot commented Oct 14, 2016

Uh oh!

googlebot commented Oct 14, 2016

Uh oh!

vinagreti commented Oct 14, 2016

Uh oh!

jelbourn commented Oct 18, 2016

Uh oh!

angular-automatic-lock-bot bot commented Sep 6, 2019

Uh oh!

Uh oh!

jelbourn Oct 5, 2016 •

edited

Loading

jelbourn Oct 5, 2016 •

edited

Loading

jelbourn Oct 5, 2016 •

edited

Loading