docs(material/theming): rewrite theming guide for @use
#22268
Conversation
jelbourn
added
docs
jelbourn
requested review from
crisbeto,
mmalerba,
twerske,
andrewseguin and
aikithoughts
google-cla
bot
added
the
cla: yes
| #### Multiple themes and overlay-based components | ||
| | Theme | Light or dark? | Palettes (primary, accent, warn) | | ||
| |------------------------|----------------|----------------------------------| | ||
| | `deeppurple-amber.css` | Dark | deep-purple, amber, red | |
There was a problem hiding this comment.
can we map this to look like the example of how we explain defining themes?
I think that might remove some of the mystery of these pre-defined themes
$deeppurple-amber: mat.define-dark-theme((
color: (
primary: mat.define-palette(mat.$deep-purple-palette, ???),
accent: mat.define-palette(mat.$amber-palette, ???)
)
));There was a problem hiding this comment.
I added a sentence that links to the source so people can reference these implementations as examples.
There was a problem hiding this comment.
This is a huge improvement! Great job on the doc, and for helping to come up with way better Sass function names. define-palette is so much easier to understand than just palette.
One thing to consider - there will be users who just want to get started quickly. It feels like we are missing a clear section that says: "copy/paste this to just get your initial app working". We had something like this linked from our Getting Started guide: https://material.angular.io/guide/theming#using-a-pre-built-theme
Side note: that reminds me, this should also make sure the Getting Started guide links correctly into this doc - right now we've got deep links to #using-a-pre-built-theme and ##defining-a-custom-theme
guides/theming.md
Outdated
| `@angular/material/prebuilt-themes` | ||
| A **palette** is a collection of colors representing a portion of color space. Each value in this | ||
| collection is called a **hue**. In Material Design, the hues in a palette are numbered from zero | ||
| to 900, lightest to darkest. |
There was a problem hiding this comment.
0-900 sounds like every integer, would it make sense to say the hues in a palette are numbered [0, 100, 200, ..., 900]?
This may be unnecessary since its obvious from the following code example.
There was a problem hiding this comment.
May be worth linking this page: https://material.io/design/color/the-color-system.html#color-usage-and-palettes
There was a problem hiding this comment.
Reworded to be more explicit. It's unfortunate that there's no a nice way to say "each 100 value between 100 and 900 and also 50 for some reason". Also added a link.
jelbourn
force-pushed
the
theming-docs-update
branch
3 times, most recently
from
aa579d4 to
9905f7a
Compare
|
Comments addressed- I updated the getting started guide with the correct header link (the prebuilt one is actually still the same). As for quickly getting started- I think that this is covered already by the getting started guide which lets you just select a prebuilt theme during |
This change completely rewrites the theming guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of palettes, hues, and themes. * Ensure all content is conceptual and not task-based. * Use the new Sass `@use` API introduced in angular#22173 * Document usage of the theming system with shadow dom * Document the fact that CSS overrides are strongly discouraged * Be more explicit about which palettes we provide * Consolidate on a single approach to including theme CSS in an app (assuming Angular CLI) I will send follow-up PRs for the typography, theming-your-components, and customizing-component-styles guides.
jelbourn
force-pushed
the
theming-docs-update
branch
from
9905f7a to
1b2e3b9
Compare
This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in angular#22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following angular#22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.
This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in angular#22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following angular#22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.
This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in angular#22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following angular#22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.
This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in angular#22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following angular#22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.
This change completely rewrites the typography guide to be more complete, correct, and concise. Summary of changes: * Explain the concepts of "typography level" and "typography config". * Ensure all content is conceptual and not task-based. * Use new Sass `@use` API introduiced in #22173 * Split up level descriptions from CSS classes * Clarify that the system currently uses the 2014-era typography levels This is the second PR in a series, following #22268. After this will be PRs for theming-your-components, customizing-component-styles, and new docs for strong focus indicators.
|
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 guide to be more complete, correct, and concise.
Summary of changes:
@useAPI introduced in feat(material/core): expose new @use-based Sass API #22173I will send follow-up PRs for the typography, theming-your-components, and customizing-component-styles guides.