main - bd75077 build: generate styling example during the build (#29964)

Author: crisbeto

docs-content/tokens/material/autocomplete/autocomplete.json

@@ -1 +1 @@
-[{"name":"autocomplete","overridesMixin":"autocomplete-overrides","tokens":[{"name":"container-shape","prefix":"mat-autocomplete","type":"base","overridesName":"container-shape"},{"name":"container-elevation-shadow","prefix":"mat-autocomplete","type":"base","overridesName":"container-elevation-shadow"},{"name":"background-color","prefix":"mat-autocomplete","type":"color","overridesName":"background-color","derivedFrom":"--sys-surface-container"}]}]
+{"example":"<span class=\"hljs-keyword\">@use</span> <span class=\"hljs-string\">&#x27;@angular/material&#x27;</span> as mat;\n\n<span class=\"hljs-comment\">// Customize the entire app. Change :root to your selector if you want to scope the styles.</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-keyword\">@include</span> mat.autocomplete-overrides((\n    <span class=\"hljs-attribute\">background-color</span>: orange,\n  ));\n}","themes":[{"name":"autocomplete","overridesMixin":"autocomplete-overrides","tokens":[{"name":"container-shape","prefix":"mat-autocomplete","type":"base","overridesName":"container-shape"},{"name":"container-elevation-shadow","prefix":"mat-autocomplete","type":"base","overridesName":"container-elevation-shadow"},{"name":"background-color","prefix":"mat-autocomplete","type":"color","overridesName":"background-color","derivedFrom":"--sys-surface-container"}]}]}

docs-content/tokens/material/badge/badge.json

@@ -1 +1 @@
-[{"name":"badge","overridesMixin":"badge-overrides","tokens":[{"name":"container-shape","prefix":"mat-badge","type":"base","overridesName":"container-shape"},{"name":"container-size","prefix":"mat-badge","type":"base","overridesName":"container-size"},{"name":"small-size-container-size","prefix":"mat-badge","type":"base","overridesName":"small-size-container-size"},{"name":"large-size-container-size","prefix":"mat-badge","type":"base","overridesName":"large-size-container-size"},{"name":"legacy-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-container-size"},{"name":"legacy-small-size-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-small-size-container-size"},{"name":"legacy-large-size-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-large-size-container-size"},{"name":"container-offset","prefix":"mat-badge","type":"base","overridesName":"container-offset"},{"name":"small-size-container-offset","prefix":"mat-badge","type":"base","overridesName":"small-size-container-offset"},{"name":"large-size-container-offset","prefix":"mat-badge","type":"base","overridesName":"large-size-container-offset"},{"name":"container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"container-overlap-offset"},{"name":"small-size-container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"small-size-container-overlap-offset"},{"name":"large-size-container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"large-size-container-overlap-offset"},{"name":"container-padding","prefix":"mat-badge","type":"base","overridesName":"container-padding"},{"name":"small-size-container-padding","prefix":"mat-badge","type":"base","overridesName":"small-size-container-padding"},{"name":"large-size-container-padding","prefix":"mat-badge","type":"base","overridesName":"large-size-container-padding"},{"name":"background-color","prefix":"mat-badge","type":"color","overridesName":"background-color","derivedFrom":"--sys-error"},{"name":"text-color","prefix":"mat-badge","type":"color","overridesName":"text-color","derivedFrom":"--sys-on-error"},{"name":"disabled-state-background-color","prefix":"mat-badge","type":"color","overridesName":"disabled-state-background-color","derivedFrom":"--sys-error"},{"name":"disabled-state-text-color","prefix":"mat-badge","type":"color","overridesName":"disabled-state-text-color","derivedFrom":"--sys-on-error"},{"name":"text-font","prefix":"mat-badge","type":"typography","overridesName":"text-font","derivedFrom":"--sys-label-small-font"},{"name":"line-height","prefix":"mat-badge","type":"base","overridesName":"line-height"},{"name":"text-size","prefix":"mat-badge","type":"typography","overridesName":"text-size","derivedFrom":"--sys-label-small-size"},{"name":"text-weight","prefix":"mat-badge","type":"typography","overridesName":"text-weight","derivedFrom":"--sys-label-small-weight"},{"name":"small-size-text-size","prefix":"mat-badge","type":"base","overridesName":"small-size-text-size"},{"name":"small-size-line-height","prefix":"mat-badge","type":"base","overridesName":"small-size-line-height"},{"name":"large-size-text-size","prefix":"mat-badge","type":"typography","overridesName":"large-size-text-size","derivedFrom":"--sys-label-small-size"},{"name":"large-size-line-height","prefix":"mat-badge","type":"base","overridesName":"large-size-line-height"}]}]
+{"example":"<span class=\"hljs-keyword\">@use</span> <span class=\"hljs-string\">&#x27;@angular/material&#x27;</span> as mat;\n\n<span class=\"hljs-comment\">// Customize the entire app. Change :root to your selector if you want to scope the styles.</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-keyword\">@include</span> mat.badge-overrides((\n    <span class=\"hljs-attribute\">background-color</span>: orange,\n    <span class=\"hljs-attribute\">text-color</span>: red,\n  ));\n}","themes":[{"name":"badge","overridesMixin":"badge-overrides","tokens":[{"name":"container-shape","prefix":"mat-badge","type":"base","overridesName":"container-shape"},{"name":"container-size","prefix":"mat-badge","type":"base","overridesName":"container-size"},{"name":"small-size-container-size","prefix":"mat-badge","type":"base","overridesName":"small-size-container-size"},{"name":"large-size-container-size","prefix":"mat-badge","type":"base","overridesName":"large-size-container-size"},{"name":"legacy-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-container-size"},{"name":"legacy-small-size-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-small-size-container-size"},{"name":"legacy-large-size-container-size","prefix":"mat-badge","type":"base","overridesName":"legacy-large-size-container-size"},{"name":"container-offset","prefix":"mat-badge","type":"base","overridesName":"container-offset"},{"name":"small-size-container-offset","prefix":"mat-badge","type":"base","overridesName":"small-size-container-offset"},{"name":"large-size-container-offset","prefix":"mat-badge","type":"base","overridesName":"large-size-container-offset"},{"name":"container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"container-overlap-offset"},{"name":"small-size-container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"small-size-container-overlap-offset"},{"name":"large-size-container-overlap-offset","prefix":"mat-badge","type":"base","overridesName":"large-size-container-overlap-offset"},{"name":"container-padding","prefix":"mat-badge","type":"base","overridesName":"container-padding"},{"name":"small-size-container-padding","prefix":"mat-badge","type":"base","overridesName":"small-size-container-padding"},{"name":"large-size-container-padding","prefix":"mat-badge","type":"base","overridesName":"large-size-container-padding"},{"name":"background-color","prefix":"mat-badge","type":"color","overridesName":"background-color","derivedFrom":"--sys-error"},{"name":"text-color","prefix":"mat-badge","type":"color","overridesName":"text-color","derivedFrom":"--sys-on-error"},{"name":"disabled-state-background-color","prefix":"mat-badge","type":"color","overridesName":"disabled-state-background-color","derivedFrom":"--sys-error"},{"name":"disabled-state-text-color","prefix":"mat-badge","type":"color","overridesName":"disabled-state-text-color","derivedFrom":"--sys-on-error"},{"name":"text-font","prefix":"mat-badge","type":"typography","overridesName":"text-font","derivedFrom":"--sys-label-small-font"},{"name":"line-height","prefix":"mat-badge","type":"base","overridesName":"line-height"},{"name":"text-size","prefix":"mat-badge","type":"typography","overridesName":"text-size","derivedFrom":"--sys-label-small-size"},{"name":"text-weight","prefix":"mat-badge","type":"typography","overridesName":"text-weight","derivedFrom":"--sys-label-small-weight"},{"name":"small-size-text-size","prefix":"mat-badge","type":"base","overridesName":"small-size-text-size"},{"name":"small-size-line-height","prefix":"mat-badge","type":"base","overridesName":"small-size-line-height"},{"name":"large-size-text-size","prefix":"mat-badge","type":"typography","overridesName":"large-size-text-size","derivedFrom":"--sys-label-small-size"},{"name":"large-size-line-height","prefix":"mat-badge","type":"base","overridesName":"large-size-line-height"}]}]}

docs-content/tokens/material/bottom-sheet/bottom-sheet.json

@@ -1 +1 @@
-[{"name":"bottom-sheet","overridesMixin":"bottom-sheet-overrides","tokens":[{"name":"container-shape","prefix":"mat-bottom-sheet","type":"base","overridesName":"container-shape"},{"name":"container-text-color","prefix":"mat-bottom-sheet","type":"color","overridesName":"container-text-color","derivedFrom":"--sys-on-surface"},{"name":"container-background-color","prefix":"mat-bottom-sheet","type":"color","overridesName":"container-background-color","derivedFrom":"--sys-surface-container-low"},{"name":"container-text-font","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-font","derivedFrom":"--sys-body-large-font"},{"name":"container-text-line-height","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-line-height","derivedFrom":"--sys-body-large-line-height"},{"name":"container-text-size","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-size","derivedFrom":"--sys-body-large-size"},{"name":"container-text-tracking","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-tracking","derivedFrom":"--sys-body-large-tracking"},{"name":"container-text-weight","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-weight","derivedFrom":"--sys-body-large-weight"}]}]
+{"example":"<span class=\"hljs-keyword\">@use</span> <span class=\"hljs-string\">&#x27;@angular/material&#x27;</span> as mat;\n\n<span class=\"hljs-comment\">// Customize the entire app. Change :root to your selector if you want to scope the styles.</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-keyword\">@include</span> mat.bottom-sheet-overrides((\n    <span class=\"hljs-attribute\">container-text-color</span>: orange,\n    <span class=\"hljs-attribute\">container-background-color</span>: red,\n  ));\n}","themes":[{"name":"bottom-sheet","overridesMixin":"bottom-sheet-overrides","tokens":[{"name":"container-shape","prefix":"mat-bottom-sheet","type":"base","overridesName":"container-shape"},{"name":"container-text-color","prefix":"mat-bottom-sheet","type":"color","overridesName":"container-text-color","derivedFrom":"--sys-on-surface"},{"name":"container-background-color","prefix":"mat-bottom-sheet","type":"color","overridesName":"container-background-color","derivedFrom":"--sys-surface-container-low"},{"name":"container-text-font","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-font","derivedFrom":"--sys-body-large-font"},{"name":"container-text-line-height","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-line-height","derivedFrom":"--sys-body-large-line-height"},{"name":"container-text-size","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-size","derivedFrom":"--sys-body-large-size"},{"name":"container-text-tracking","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-tracking","derivedFrom":"--sys-body-large-tracking"},{"name":"container-text-weight","prefix":"mat-bottom-sheet","type":"typography","overridesName":"container-text-weight","derivedFrom":"--sys-body-large-weight"}]}]}

docs-content/tokens/material/button-toggle/button-toggle.json

@@ -1 +1 @@
-[{"name":"button-toggle","overridesMixin":"button-toggle-overrides","tokens":[{"name":"shape","prefix":"mat-standard-button-toggle","type":"base","overridesName":"shape"},{"name":"hover-state-layer-opacity","prefix":"mat-standard-button-toggle","type":"color","overridesName":"hover-state-layer-opacity"},{"name":"focus-state-layer-opacity","prefix":"mat-standard-button-toggle","type":"color","overridesName":"focus-state-layer-opacity"},{"name":"text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"text-color","derivedFrom":"--sys-on-surface"},{"name":"background-color","prefix":"mat-standard-button-toggle","type":"base","overridesName":"background-color"},{"name":"state-layer-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"state-layer-color","derivedFrom":"--sys-on-surface"},{"name":"selected-state-background-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"selected-state-background-color","derivedFrom":"--sys-secondary-container"},{"name":"selected-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"selected-state-text-color","derivedFrom":"--sys-on-secondary-container"},{"name":"disabled-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-state-text-color","derivedFrom":"--sys-on-surface"},{"name":"disabled-state-background-color","prefix":"mat-standard-button-toggle","type":"base","overridesName":"disabled-state-background-color"},{"name":"disabled-selected-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-selected-state-text-color","derivedFrom":"--sys-on-surface"},{"name":"disabled-selected-state-background-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-selected-state-background-color","derivedFrom":"--sys-on-surface"},{"name":"divider-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"divider-color","derivedFrom":"--sys-outline"},{"name":"label-text-font","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-font","derivedFrom":"--sys-label-large-font"},{"name":"label-text-line-height","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-line-height","derivedFrom":"--sys-label-large-line-height"},{"name":"label-text-size","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-size","derivedFrom":"--sys-label-large-size"},{"name":"label-text-tracking","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-tracking","derivedFrom":"--sys-label-large-tracking"},{"name":"label-text-weight","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-weight","derivedFrom":"--sys-label-large-weight"},{"name":"height","prefix":"mat-standard-button-toggle","type":"density","overridesName":"height"}]}]
+{"example":"<span class=\"hljs-keyword\">@use</span> <span class=\"hljs-string\">&#x27;@angular/material&#x27;</span> as mat;\n\n<span class=\"hljs-comment\">// Customize the entire app. Change :root to your selector if you want to scope the styles.</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n  <span class=\"hljs-keyword\">@include</span> mat.button-toggle-overrides((\n    <span class=\"hljs-attribute\">hover-state-layer-opacity</span>: orange,\n    <span class=\"hljs-attribute\">focus-state-layer-opacity</span>: red,\n  ));\n}","themes":[{"name":"button-toggle","overridesMixin":"button-toggle-overrides","tokens":[{"name":"shape","prefix":"mat-standard-button-toggle","type":"base","overridesName":"shape"},{"name":"hover-state-layer-opacity","prefix":"mat-standard-button-toggle","type":"color","overridesName":"hover-state-layer-opacity"},{"name":"focus-state-layer-opacity","prefix":"mat-standard-button-toggle","type":"color","overridesName":"focus-state-layer-opacity"},{"name":"text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"text-color","derivedFrom":"--sys-on-surface"},{"name":"background-color","prefix":"mat-standard-button-toggle","type":"base","overridesName":"background-color"},{"name":"state-layer-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"state-layer-color","derivedFrom":"--sys-on-surface"},{"name":"selected-state-background-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"selected-state-background-color","derivedFrom":"--sys-secondary-container"},{"name":"selected-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"selected-state-text-color","derivedFrom":"--sys-on-secondary-container"},{"name":"disabled-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-state-text-color","derivedFrom":"--sys-on-surface"},{"name":"disabled-state-background-color","prefix":"mat-standard-button-toggle","type":"base","overridesName":"disabled-state-background-color"},{"name":"disabled-selected-state-text-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-selected-state-text-color","derivedFrom":"--sys-on-surface"},{"name":"disabled-selected-state-background-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"disabled-selected-state-background-color","derivedFrom":"--sys-on-surface"},{"name":"divider-color","prefix":"mat-standard-button-toggle","type":"color","overridesName":"divider-color","derivedFrom":"--sys-outline"},{"name":"label-text-font","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-font","derivedFrom":"--sys-label-large-font"},{"name":"label-text-line-height","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-line-height","derivedFrom":"--sys-label-large-line-height"},{"name":"label-text-size","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-size","derivedFrom":"--sys-label-large-size"},{"name":"label-text-tracking","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-tracking","derivedFrom":"--sys-label-large-tracking"},{"name":"label-text-weight","prefix":"mat-standard-button-toggle","type":"typography","overridesName":"label-text-weight","derivedFrom":"--sys-label-large-weight"},{"name":"height","prefix":"mat-standard-button-toggle","type":"density","overridesName":"height"}]}]}