docs(material/theming): rewrite theming-your-components guide #22465
Conversation
jelbourn
added
P2
google-cla
bot
added
the
cla: yes
| ### Reading color values | ||
|
|
||
| To read color values from a theme, you can use the `get-color-config` Sass function. This function | ||
| returns a Sass map containing the theme's primary, accent, and warn palettes, as well as a flag |
There was a problem hiding this comment.
Should the palette names be wrapped in backticks?
There was a problem hiding this comment.
I don't think so- we treat these as terms in the theming guide, but not explicitly as code symbols
guides/theming-your-components.md
Outdated
| ``` | ||
|
|
||
| ### Step 3: Add a "theme" mixin |
There was a problem hiding this comment.
I think that "theme" should be in backticks, not quotes.
| } | ||
|
|
||
| @mixin theme($theme) { | ||
| $color-config: mat.get-color-config($theme); |
There was a problem hiding this comment.
You end up extracting the color-config and typography-config twice to check null in this structure, is that best practice?
There was a problem hiding this comment.
It doesn't really matter, the cost is negligible
| ## 3. Include the theme mixin in your application | ||
| @mixin color($theme) { | ||
| // Get the color config from the theme. | ||
| $color-config: mat.get-color-config($theme); |
There was a problem hiding this comment.
No null checks shown here but then they're using in the theme mixin section, is that intentional?
There was a problem hiding this comment.
Yes, that mirrors the way our own mixins work- the typography and color mixins always emit, but the -theme mixin only emits if the configuration is defined.
| Now that you've defined the carousel component's theme mixin, you can include this mixin along with | ||
| the the other theme mixins in your application. | ||
|
|
||
| ```scss |
There was a problem hiding this comment.
Maybe define what file this goes in - should custom mixins also be top level in styles.scss (I assume yes?)
There was a problem hiding this comment.
I considered this, but decided not to because this file can really be called anything. The CLI defaults to styles.scss (which isn't a great name IMO), but people can really call it anything. Inside Google, people often call this something like material-theme.scss. I think the theming guide is probably clear enough on this that I'm not super worried about it, but we can see if we get any feedback.
| $color-config: mat.get-color-config($theme); | ||
| $primary-palette: map.get($color-config, 'primary'); | ||
| $accent-palette: map.get($color-config, 'accent'); | ||
| $warn-palette: map.get($color-config, 'warn'); |
There was a problem hiding this comment.
I think (maybe no longer?) you can also get background and foreground so that you could style a raised carousel to have a background color like a 'card' etc? That seems useful to incorporate here for components that have background or foreground (especially with dark modes)
There was a problem hiding this comment.
For the time being I want to leave the background palettes as a private implementation detail since we will likely need to change them in the not-too-distant future.
This change completely rewrites the theming-your-components guide to be more complete, correct, and concise. Summary of changes: * Start document with some explanatory content before diving into step-by-step tutorial. * Use new Sass `@use` API introduced in angular#22173 * Document (and expose) `get-color-config` and `get-typography-config`
jelbourn
force-pushed
the
theme-your-components
branch
from
d7690c5 to
e182148
Compare
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
This change completely rewrites the theming-your-components guide to be
more complete, correct, and concise.
Summary of changes:
step-by-step tutorial.
@useAPI introduced in feat(material/core): expose new @use-based Sass API #22173get-color-configandget-typography-config