Skip to content

Commit d241045

Browse files
andrewseguinandrewseguin
committed
main - 8308ada docs: add expanding detail with all variables (#32352)
1 parent 9ee0741 commit d241045

File tree

2 files changed

+218
-11
lines changed

2 files changed

+218
-11
lines changed

‎docs-content/guides/theming-your-components.md.html‎

Lines changed: 210 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,72 @@ <h2 id="colors" class="docs-header-link">
3434
<p>Using the system tokens makes it easy to match the same color scheme of your application&#39;s theme. It
3535
also makes it easy to ensure your application can correctly handle both light and dark mode
3636
automatically.</p>
37+
<details>
38+
<summary>Expand to view all available color system tokens</summary>
39+
40+
<pre><code class="language-css"><span class="hljs-comment">/* Primary */</span>
41+
<span class="hljs-attr">--mat-sys-primary</span>
42+
<span class="hljs-attr">--mat-sys-on-primary</span>
43+
<span class="hljs-attr">--mat-sys-primary-container</span>
44+
<span class="hljs-attr">--mat-sys-on-primary-container</span>
45+
<span class="hljs-attr">--mat-sys-primary-fixed</span>
46+
<span class="hljs-attr">--mat-sys-on-primary-fixed</span>
47+
<span class="hljs-attr">--mat-sys-on-primary-fixed-variant</span>
48+
<span class="hljs-attr">--mat-sys-primary-fixed-dim</span>
49+
<span class="hljs-attr">--mat-sys-inverse-primary</span>
50+
51+
<span class="hljs-comment">/* Secondary */</span>
52+
<span class="hljs-attr">--mat-sys-secondary</span>
53+
<span class="hljs-attr">--mat-sys-on-secondary</span>
54+
<span class="hljs-attr">--mat-sys-secondary-container</span>
55+
<span class="hljs-attr">--mat-sys-on-secondary-container</span>
56+
<span class="hljs-attr">--mat-sys-secondary-fixed</span>
57+
<span class="hljs-attr">--mat-sys-on-secondary-fixed</span>
58+
<span class="hljs-attr">--mat-sys-on-secondary-fixed-variant</span>
59+
<span class="hljs-attr">--mat-sys-secondary-fixed-dim</span>
60+
61+
<span class="hljs-comment">/* Tertiary */</span>
62+
<span class="hljs-attr">--mat-sys-tertiary</span>
63+
<span class="hljs-attr">--mat-sys-on-tertiary</span>
64+
<span class="hljs-attr">--mat-sys-tertiary-container</span>
65+
<span class="hljs-attr">--mat-sys-on-tertiary-container</span>
66+
<span class="hljs-attr">--mat-sys-tertiary-fixed</span>
67+
<span class="hljs-attr">--mat-sys-on-tertiary-fixed</span>
68+
<span class="hljs-attr">--mat-sys-on-tertiary-fixed-variant</span>
69+
<span class="hljs-attr">--mat-sys-tertiary-fixed-dim</span>
70+
71+
<span class="hljs-comment">/* Error */</span>
72+
<span class="hljs-attr">--mat-sys-error</span>
73+
<span class="hljs-attr">--mat-sys-on-error</span>
74+
<span class="hljs-attr">--mat-sys-error-container</span>
75+
<span class="hljs-attr">--mat-sys-on-error-container</span>
76+
77+
<span class="hljs-comment">/* Surface */</span>
78+
<span class="hljs-attr">--mat-sys-surface</span>
79+
<span class="hljs-attr">--mat-sys-on-surface</span>
80+
<span class="hljs-attr">--mat-sys-on-surface-variant</span>
81+
<span class="hljs-attr">--mat-sys-surface-bright</span>
82+
<span class="hljs-attr">--mat-sys-surface-container</span>
83+
<span class="hljs-attr">--mat-sys-surface-container-high</span>
84+
<span class="hljs-attr">--mat-sys-surface-container-highest</span>
85+
<span class="hljs-attr">--mat-sys-surface-container-low</span>
86+
<span class="hljs-attr">--mat-sys-surface-container-lowest</span>
87+
<span class="hljs-attr">--mat-sys-surface-dim</span>
88+
<span class="hljs-attr">--mat-sys-surface-tint</span>
89+
<span class="hljs-attr">--mat-sys-surface-variant</span>
90+
<span class="hljs-attr">--mat-sys-inverse-surface</span>
91+
<span class="hljs-attr">--mat-sys-inverse-on-surface</span>
92+
93+
<span class="hljs-comment">/* Miscellaneous */</span>
94+
<span class="hljs-attr">--mat-sys-background</span>
95+
<span class="hljs-attr">--mat-sys-on-background</span>
96+
<span class="hljs-attr">--mat-sys-neutral-variant20</span>
97+
<span class="hljs-attr">--mat-sys-neutral10</span>
98+
<span class="hljs-attr">--mat-sys-outline</span>
99+
<span class="hljs-attr">--mat-sys-outline-variant</span>
100+
<span class="hljs-attr">--mat-sys-scrim</span>
101+
<span class="hljs-attr">--mat-sys-shadow</span></code></pre></details>
102+
37103

38104
<h3 id="background" class="docs-header-link">
39105
<span header-link="background"></span>
@@ -353,6 +419,116 @@ <h2 id="typography" class="docs-header-link">
353419
Each category has three sizes: small, medium, and large. Learn more about how these categories and
354420
their sizes should be used in your application by visiting Material
355421
Design&#39;s <a href="https://m3.material.io/styles/typography/applying-type">Applying Type</a> documentation.</p>
422+
<details>
423+
<summary>Expand to view all available typography system tokens</summary>
424+
425+
<pre><code class="language-css"><span class="hljs-attr">--mat-sys-body-large</span>
426+
<span class="hljs-attr">--mat-sys-body-large-font</span>
427+
<span class="hljs-attr">--mat-sys-body-large-line-height</span>
428+
<span class="hljs-attr">--mat-sys-body-large-size</span>
429+
<span class="hljs-attr">--mat-sys-body-large-tracking</span>
430+
<span class="hljs-attr">--mat-sys-body-large-weight</span>
431+
432+
<span class="hljs-attr">--mat-sys-body-medium</span>
433+
<span class="hljs-attr">--mat-sys-body-medium-font</span>
434+
<span class="hljs-attr">--mat-sys-body-medium-line-height</span>
435+
<span class="hljs-attr">--mat-sys-body-medium-size</span>
436+
<span class="hljs-attr">--mat-sys-body-medium-tracking</span>
437+
<span class="hljs-attr">--mat-sys-body-medium-weight</span>
438+
439+
<span class="hljs-attr">--mat-sys-body-small</span>
440+
<span class="hljs-attr">--mat-sys-body-small-font</span>
441+
<span class="hljs-attr">--mat-sys-body-small-line-height</span>
442+
<span class="hljs-attr">--mat-sys-body-small-size</span>
443+
<span class="hljs-attr">--mat-sys-body-small-tracking</span>
444+
<span class="hljs-attr">--mat-sys-body-small-weight</span>
445+
446+
<span class="hljs-attr">--mat-sys-display-large</span>
447+
<span class="hljs-attr">--mat-sys-display-large-font</span>
448+
<span class="hljs-attr">--mat-sys-display-large-line-height</span>
449+
<span class="hljs-attr">--mat-sys-display-large-size</span>
450+
<span class="hljs-attr">--mat-sys-display-large-tracking</span>
451+
<span class="hljs-attr">--mat-sys-display-large-weight</span>
452+
453+
<span class="hljs-attr">--mat-sys-display-medium</span>
454+
<span class="hljs-attr">--mat-sys-display-medium-font</span>
455+
<span class="hljs-attr">--mat-sys-display-medium-line-height</span>
456+
<span class="hljs-attr">--mat-sys-display-medium-size</span>
457+
<span class="hljs-attr">--mat-sys-display-medium-tracking</span>
458+
<span class="hljs-attr">--mat-sys-display-medium-weight</span>
459+
460+
<span class="hljs-attr">--mat-sys-display-small</span>
461+
<span class="hljs-attr">--mat-sys-display-small-font</span>
462+
<span class="hljs-attr">--mat-sys-display-small-line-height</span>
463+
<span class="hljs-attr">--mat-sys-display-small-size</span>
464+
<span class="hljs-attr">--mat-sys-display-small-tracking</span>
465+
<span class="hljs-attr">--mat-sys-display-small-weight</span>
466+
467+
<span class="hljs-attr">--mat-sys-headline-large</span>
468+
<span class="hljs-attr">--mat-sys-headline-large-font</span>
469+
<span class="hljs-attr">--mat-sys-headline-large-line-height</span>
470+
<span class="hljs-attr">--mat-sys-headline-large-size</span>
471+
<span class="hljs-attr">--mat-sys-headline-large-tracking</span>
472+
<span class="hljs-attr">--mat-sys-headline-large-weight</span>
473+
474+
<span class="hljs-attr">--mat-sys-headline-medium</span>
475+
<span class="hljs-attr">--mat-sys-headline-medium-font</span>
476+
<span class="hljs-attr">--mat-sys-headline-medium-line-height</span>
477+
<span class="hljs-attr">--mat-sys-headline-medium-size</span>
478+
<span class="hljs-attr">--mat-sys-headline-medium-tracking</span>
479+
<span class="hljs-attr">--mat-sys-headline-medium-weight</span>
480+
481+
<span class="hljs-attr">--mat-sys-headline-small</span>
482+
<span class="hljs-attr">--mat-sys-headline-small-font</span>
483+
<span class="hljs-attr">--mat-sys-headline-small-line-height</span>
484+
<span class="hljs-attr">--mat-sys-headline-small-size</span>
485+
<span class="hljs-attr">--mat-sys-headline-small-tracking</span>
486+
<span class="hljs-attr">--mat-sys-headline-small-weight</span>
487+
488+
<span class="hljs-attr">--mat-sys-label-large</span>
489+
<span class="hljs-attr">--mat-sys-label-large-font</span>
490+
<span class="hljs-attr">--mat-sys-label-large-line-height</span>
491+
<span class="hljs-attr">--mat-sys-label-large-size</span>
492+
<span class="hljs-attr">--mat-sys-label-large-tracking</span>
493+
<span class="hljs-attr">--mat-sys-label-large-weight</span>
494+
<span class="hljs-attr">--mat-sys-label-large-weight-prominent</span>
495+
496+
<span class="hljs-attr">--mat-sys-label-medium</span>
497+
<span class="hljs-attr">--mat-sys-label-medium-font</span>
498+
<span class="hljs-attr">--mat-sys-label-medium-line-height</span>
499+
<span class="hljs-attr">--mat-sys-label-medium-size</span>
500+
<span class="hljs-attr">--mat-sys-label-medium-tracking</span>
501+
<span class="hljs-attr">--mat-sys-label-medium-weight</span>
502+
<span class="hljs-attr">--mat-sys-label-medium-weight-prominent</span>
503+
504+
<span class="hljs-attr">--mat-sys-label-small</span>
505+
<span class="hljs-attr">--mat-sys-label-small-font</span>
506+
<span class="hljs-attr">--mat-sys-label-small-line-height</span>
507+
<span class="hljs-attr">--mat-sys-label-small-size</span>
508+
<span class="hljs-attr">--mat-sys-label-small-tracking</span>
509+
<span class="hljs-attr">--mat-sys-label-small-weight</span>
510+
511+
<span class="hljs-attr">--mat-sys-title-large</span>
512+
<span class="hljs-attr">--mat-sys-title-large-font</span>
513+
<span class="hljs-attr">--mat-sys-title-large-line-height</span>
514+
<span class="hljs-attr">--mat-sys-title-large-size</span>
515+
<span class="hljs-attr">--mat-sys-title-large-tracking</span>
516+
<span class="hljs-attr">--mat-sys-title-large-weight</span>
517+
518+
<span class="hljs-attr">--mat-sys-title-medium</span>
519+
<span class="hljs-attr">--mat-sys-title-medium-font</span>
520+
<span class="hljs-attr">--mat-sys-title-medium-line-height</span>
521+
<span class="hljs-attr">--mat-sys-title-medium-size</span>
522+
<span class="hljs-attr">--mat-sys-title-medium-tracking</span>
523+
<span class="hljs-attr">--mat-sys-title-medium-weight</span>
524+
525+
<span class="hljs-attr">--mat-sys-title-small</span>
526+
<span class="hljs-attr">--mat-sys-title-small-font</span>
527+
<span class="hljs-attr">--mat-sys-title-small-line-height</span>
528+
<span class="hljs-attr">--mat-sys-title-small-size</span>
529+
<span class="hljs-attr">--mat-sys-title-small-tracking</span>
530+
<span class="hljs-attr">--mat-sys-title-small-weight</span></code></pre></details>
531+
356532
<h3> Body </h3>
357533

358534

@@ -538,8 +714,24 @@ <h2 id="shape" class="docs-header-link">
538714
Design&#39;s <a href="https://m3.material.io/styles/shape/corner-radius-scale">Corner Radius Scale</a>
539715
documentation to learn more.</p>
540716
<p>In Angular Material, shape is scoped to varying levels of border-radius. The following code blocks
541-
demonstate the levels of roundness. Their border sizes are increased to 2px to clearly show the
717+
demonstrate the levels of roundness. Their border sizes are increased to <code>2px</code> to clearly show the
542718
border radii.</p>
719+
<details>
720+
<summary>Expand to view all available corner shape system tokens</summary>
721+
722+
<pre><code class="language-css"><span class="hljs-attr">--mat-sys-corner-extra-large</span>: <span class="hljs-number">28px</span>;
723+
<span class="hljs-attr">--mat-sys-corner-extra-large-top</span>: <span class="hljs-number">28px</span> <span class="hljs-number">28px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
724+
<span class="hljs-attr">--mat-sys-corner-extra-small</span>: <span class="hljs-number">4px</span>;
725+
<span class="hljs-attr">--mat-sys-corner-extra-small-top</span>: <span class="hljs-number">4px</span> <span class="hljs-number">4px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
726+
<span class="hljs-attr">--mat-sys-corner-full</span>: <span class="hljs-number">9999px</span>;
727+
<span class="hljs-attr">--mat-sys-corner-large</span>: <span class="hljs-number">16px</span>;
728+
<span class="hljs-attr">--mat-sys-corner-large-end</span>: <span class="hljs-number">0</span> <span class="hljs-number">16px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span>;
729+
<span class="hljs-attr">--mat-sys-corner-large-start</span>: <span class="hljs-number">16px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">16px</span>;
730+
<span class="hljs-attr">--mat-sys-corner-large-top</span>: <span class="hljs-number">16px</span> <span class="hljs-number">16px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;
731+
<span class="hljs-attr">--mat-sys-corner-medium</span>: <span class="hljs-number">12px</span>;
732+
<span class="hljs-attr">--mat-sys-corner-none</span>: <span class="hljs-number">0</span>;
733+
<span class="hljs-attr">--mat-sys-corner-small</span>: <span class="hljs-number">8px</span>;</code></pre></details>
734+
543735
<p>The extra small border radius is useful for components that need a small amount of rounding, such as
544736
a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.</p>
545737
<pre class="mat-border mat-bg-surface-container-low" style="border-width: 2px; border-radius: var(--mat-sys-corner-extra-small);">
@@ -590,10 +782,15 @@ <h2 id="elevation" class="docs-header-link">
590782
</h2>
591783
<p>Material Design uses borders and shadows to create a sense of depth and hierarchy in the UI. See
592784
Material Design&#39;s <a href="https://m3.material.io/styles/elevation/applying-elevation">Applying Elevation</a>
593-
documentation to
594-
learn more.</p>
785+
documentation to learn more.</p>
595786
<h3> Border </h3>
596787

788+
<details>
789+
<summary>Expand to view the outline system tokens</summary>
790+
791+
<pre><code class="language-css"><span class="hljs-attr">--mat-sys-outline</span>
792+
<span class="hljs-attr">--mat-sys-outline-variant</span></code></pre></details>
793+
597794
<p>The Material Design border is useful for components that need a visible boundary. In Angular
598795
Material, this is used for the outline of an outlined button.</p>
599796
<pre class="mat-bg-surface-container-low" style="border: 1px solid var(--mat-sys-outline);">
@@ -612,6 +809,16 @@ <h3> Border </h3>
612809

613810
<h3> Shadow </h3>
614811

812+
<details>
813+
<summary>Expand to view all available elevation system tokens</summary>
814+
815+
<pre><code class="language-css"><span class="hljs-attr">--mat-sys-level0</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);
816+
<span class="hljs-attr">--mat-sys-level1</span>: <span class="hljs-number">0px</span> <span class="hljs-number">2px</span> <span class="hljs-number">1px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">1px</span> <span class="hljs-number">1px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">1px</span> <span class="hljs-number">3px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);
817+
<span class="hljs-attr">--mat-sys-level2</span>: <span class="hljs-number">0px</span> <span class="hljs-number">3px</span> <span class="hljs-number">3px</span> -<span class="hljs-number">2px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">3px</span> <span class="hljs-number">4px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">1px</span> <span class="hljs-number">8px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);
818+
<span class="hljs-attr">--mat-sys-level3</span>: <span class="hljs-number">0px</span> <span class="hljs-number">3px</span> <span class="hljs-number">5px</span> -<span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">6px</span> <span class="hljs-number">10px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">1px</span> <span class="hljs-number">18px</span> <span class="hljs-number">0px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);
819+
<span class="hljs-attr">--mat-sys-level4</span>: <span class="hljs-number">0px</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> -<span class="hljs-number">3px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">8px</span> <span class="hljs-number">10px</span> <span class="hljs-number">1px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">3px</span> <span class="hljs-number">14px</span> <span class="hljs-number">2px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);
820+
<span class="hljs-attr">--mat-sys-level5</span>: <span class="hljs-number">0px</span> <span class="hljs-number">7px</span> <span class="hljs-number">8px</span> -<span class="hljs-number">4px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">2</span>), <span class="hljs-number">0px</span> <span class="hljs-number">12px</span> <span class="hljs-number">17px</span> <span class="hljs-number">2px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">14</span>), <span class="hljs-number">0px</span> <span class="hljs-number">5px</span> <span class="hljs-number">22px</span> <span class="hljs-number">4px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, .<span class="hljs-number">12</span>);</code></pre></details>
821+
615822
<p>Level 1 elevation can be used to slightly raise the appearance of a surface. In Angular Material,
616823
this is used for the elevation of an elevated card and the handle of a slider.</p>
617824
<pre class="mat-shadow-1 mat-bg-surface-container-low">

0 commit comments

Comments
 (0)