docs(material/theming): rewrite typography guide for @use
#22366
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jelbourn
added
P2
jelbourn
requested review from
crisbeto,
mmalerba,
twerske,
andrewseguin and
aikithoughts
google-cla
bot
added
the
cla: yes
twerske
approved these changes
Mar 30, 2021
|
@TeriGlover Can you have a look at this content? @jelbourn Is there a way to stage this content so we can see how it renders on the screen? |
crisbeto
approved these changes
Mar 30, 2021
guides/typography.md
Outdated
| ``` | ||
| | Name | Description | | ||
| |-----------------|-----------------------------------------------------------------------------| | ||
| | `display-4` | Large, one-off header, usually at the top of the page (e.g. a hero header). | |
There was a problem hiding this comment.
Should we change up the wording between the different display- values? Otherwise it looks like they're all the same.
There was a problem hiding this comment.
TBH I don't really know what differentiates them.
There was a problem hiding this comment.
Their font sizes are different:
$display-4: define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
$display-3: define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
$display-2: define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
$display-1: define-typography-level(34px, 40px, 400),
There was a problem hiding this comment.
I meant semantically, since they're all just different flavors of big. I think you're right, though, that explicitly saying the font-size is really the only meaningful way to convey the difference.
jelbourn
force-pushed
the
typography-docs-revamp
branch
from
0cd93a3 to
08181d1
Compare
jelbourn
force-pushed
the
typography-docs-revamp
branch
from
08181d1 to
af51007
Compare
andrewseguin
approved these changes
Mar 31, 2021
TeriGlover
approved these changes
Mar 31, 2021
guides/typography.md
Outdated
|
|
||
| A **typography level** is a collection of typographic styles that corresponds to a specific | ||
| part of an application's structure, such as a header. Each level includes styles for font family, | ||
| font weight, font size, and letter-spacing. Angular Material uses the [typography levels |
There was a problem hiding this comment.
Suggested change
| font weight, font size, and letter-spacing. Angular Material uses the [typography levels | |
| font weight, font size, and letter spacing. Angular Material uses the [typography levels |
mmalerba
approved these changes
Mar 31, 2021
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.
jelbourn
force-pushed
the
typography-docs-revamp
branch
from
af51007 to
d259c4b
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change completely rewrites the typography guide to be more
complete, correct, and concise.
Summary of changes:
@useAPI introduiced in feat(material/core): expose new @use-based Sass API #22173This 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.