Skip to content

Commit 8572953

Browse files
crisbetoandrewseguin
authored andcommitted
docs: remove formatting from theming guide headers (#31491)
The headers in the theming guide were using bold or italic formatting which overrides the docs site styling and makes them look inconsistent. These changes remove the formatting. (cherry picked from commit 9fb7b1b)
1 parent cb35047 commit 8572953

File tree

1 file changed

+36
-36
lines changed

1 file changed

+36
-36
lines changed

guides/theming.md

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ defining a custom theme. Angular Material’s theming system is inspired by
55
Google’s [Material Design](https://m3.material.io/styles).
66

77
This guide describes how to set up theming for your application using
8-
Sass APIs introduced in Angular Material v19.
8+
Sass APIs introduced in Angular Material v19.
99

1010
If your application depends on a version before v19, or if your application's
11-
theme is applied using a theme config created with `mat.define-theme`,
11+
theme is applied using a theme config created with `mat.define-theme`,
1212
`mat.define-light-theme`, or `mat.define-dark-theme`,
13-
then you can refer to the theming guides at
13+
then you can refer to the theming guides at
1414
[v18.material.angular.dev/guides](https://v18.material.angular.dev/guides).
1515

1616
## Getting Started
@@ -62,7 +62,7 @@ The `mat.theme` mixin will only declare CSS variables for the categories
6262
included in the input. For example, if `typography` is not defined, then
6363
typography CSS variables will not be included in the output.
6464

65-
### **Color**
65+
### Color
6666

6767
The `theme`‘s color determines the component color styles, such as the fill
6868
color of checkboxes or ripple color of buttons. It depends on color palettes of
@@ -74,14 +74,14 @@ palettes.
7474
You can set the color in one of two ways: as a single color palette, or as a
7575
color map.
7676

77-
#### *Single Color Palette*
77+
#### Single Color Palette
7878

7979
If you provide a single color palette, Angular Material uses its values for the
8080
theme’s primary, secondary, and tertiary colors. The CSS color values will be
8181
defined using `light-dark` CSS color function. Your application styles should
8282
define an explicit value declaration for the `color-scheme` CSS property.
8383

84-
#### *Color Map*
84+
#### Color Map
8585

8686
If you provide a color map, then the tertiary color palette can be configured
8787
separately from the primary palette. The tertiary palette can be used to add a
@@ -121,21 +121,21 @@ html {
121121
}
122122
```
123123

124-
### **Typography**
124+
### Typography
125125

126126
The `mat.theme` ‘s typography determines the text styles used in components,
127127
such as the font for dialog titles or menu list items.
128128

129129
You can set the typography in one of two ways: as a single font family value, or
130130
as a typography map.
131131

132-
#### *Single Font Family Value*
132+
#### Single Font Family Value
133133

134134
If you provide a font family, Angular Material uses it for all the text in its
135135
components. The font weights used in components are set to 700 for bold text,
136136
500 for medium text, and 400 for regular text.
137137

138-
#### *Typography Map*
138+
#### Typography Map
139139

140140
If you provide a typography map, then distinct font families are set for plain
141141
and brand text. The plain font family is typically used for most of the
@@ -168,7 +168,7 @@ html {
168168
}
169169
```
170170

171-
### **Density**
171+
### Density
172172

173173
The `mat.theme` ‘s density value determines the spacing within components, such
174174
as how much padding is used around a button’s text or the height of form fields.
@@ -202,31 +202,31 @@ pop-up contexts, such as the date picker. The Material Design density guidance
202202
explicitly discourages changes to density for such interactions because they
203203
don't compete for space in the application's layout.
204204

205-
## **Color Palettes**
205+
## Color Palettes
206206

207207
A color palette is a set of similar colors with different hues ranging from
208208
light to dark. The Angular Material theme uses color palettes to create a color
209209
scheme to communicate an application’s hierarchy, state, and brand.
210210

211-
### **Prebuilt Color Palettes**
211+
### Prebuilt Color Palettes
212212

213213
Angular Material provides twelve prebuilt color palettes that can be used for
214214
your application’s theme:
215215

216-
* `$red-palette`
217-
* `$green-palette`
218-
* `$blue-palette`
219-
* `$yellow-palette`
220-
* `$cyan-palette`
221-
* `$magenta-palette`
222-
* `$orange-palette`
223-
* `$chartreuse-palette`
224-
* `$spring-green-palette`
225-
* `$azure-palette`
226-
* `$violet-palette`
227-
* `$rose-palette`
228-
229-
### **Custom Color Palettes**
216+
* `$red-palette`
217+
* `$green-palette`
218+
* `$blue-palette`
219+
* `$yellow-palette`
220+
* `$cyan-palette`
221+
* `$magenta-palette`
222+
* `$orange-palette`
223+
* `$chartreuse-palette`
224+
* `$spring-green-palette`
225+
* `$azure-palette`
226+
* `$violet-palette`
227+
* `$rose-palette`
228+
229+
### Custom Color Palettes
230230

231231
The Angular Material
232232
[palette generation schematic](https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md)
@@ -238,7 +238,7 @@ neutral palettes:
238238
ng generate @angular/material:theme-color
239239
```
240240

241-
## **Loading Fonts**
241+
## Loading Fonts
242242

243243
You can use Google Fonts as one option to load fonts in your application. For
244244
example, the following code in an application’s `<head>` loads the font family
@@ -256,7 +256,7 @@ default, projects created with the Angular CLI are
256256
[configured](https://angular.dev/reference/configs/workspace-config#fonts-optimization-options)
257257
to inline assets from Google Fonts to reduce render-blocking requests.
258258

259-
## **Supporting Light and Dark Mode**
259+
## Supporting Light and Dark Mode
260260

261261
By default, the `mat.theme` mixin defines colors using the CSS color function
262262
`light-dark` to make it easy for your application to switch between light and
@@ -310,12 +310,12 @@ define your own queries to apply the styles that make sense for your users. This
310310
may mean relying on `color-scheme: light dark`, defining custom media queries,
311311
or reading a saved user preference to apply styles.
312312

313-
## **Multiple Themes**
313+
## Multiple Themes
314314

315315
You can call the `mat.theme` mixin more than once to apply multiple different
316316
color schemes in your application.
317317

318-
### **Context-specific Themes**
318+
### Context-specific Themes
319319

320320
The following example theme file customizes the theme for components in
321321
different contexts. In this case, a cyan-based palette is applied to a container
@@ -340,7 +340,7 @@ html {
340340
}
341341
```
342342

343-
## **Using Theme Styles**
343+
## Using Theme Styles
344344

345345
An application’s custom components can use the CSS variables defined by
346346
`mat.theme` to apply the theme’s colors and typography.
@@ -369,7 +369,7 @@ See the [Theme Variables](https://material.angular.dev/guide/system-variables) g
369369
comprehensive list of these variables, examples of where they are used, and how
370370
components can depend on them.
371371

372-
## **Customizing Tokens**
372+
## Customizing Tokens
373373

374374
Angular Material components also allow for narrowly targeted customization of
375375
specific tokens through the `overrides` mixins. This enables fine-grained
@@ -380,7 +380,7 @@ The `overrides` API validates that the customized tokens are correctly spelled
380380
and can be used to ensure backwards compatibility if tokens are added, moved, or
381381
renamed in future versions.
382382

383-
### **System Tokens**
383+
### System Tokens
384384

385385
System-level tokens can be changed to different values through the
386386
`mat.theme-overrides` mixin, which will redefine CSS variables that are used in
@@ -426,7 +426,7 @@ html {
426426
}
427427
```
428428

429-
### **Component Tokens**
429+
### Component Tokens
430430

431431
Each Angular Material component defines an `overrides` mixin that can be used to
432432
customize tokenized styles for their color, typography, and density.
@@ -449,7 +449,7 @@ html {
449449
}
450450
```
451451

452-
### **Direct Style Overrides**
452+
### Direct Style Overrides
453453

454454
Angular Material supports customizing color, typography, and density as outlined
455455
in this document. Angular strongly discourages, and does not directly support,
@@ -458,7 +458,7 @@ structure and CSS classes are considered private implementation details that may
458458
change at any time. CSS variables used by the Angular Material components should
459459
be defined through the `overrides` API instead of defined explicitly.
460460

461-
## **Shadow DOM**
461+
## Shadow DOM
462462

463463
Angular Material assumes that, by default, all theme styles are loaded as global
464464
CSS. If you want to use

0 commit comments

Comments
 (0)