"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "guides/duplicate-theming-styles.md" between
components-12.0.3.tar.gz and components-12.0.4.tar.gz

About: components offers Component infrastructure and Material Design components for Angular.

duplicate-theming-styles.md  (components-12.0.3):duplicate-theming-styles.md  (components-12.0.4)
skipping to change at line 12 skipping to change at line 12
As explained in the [theming guide](./theming.md), a theme in Angular Material c onsists of As explained in the [theming guide](./theming.md), a theme in Angular Material c onsists of
configurations for the `color`, `density` and `typography` systems. As some of t hese individual configurations for the `color`, `density` and `typography` systems. As some of t hese individual
systems have default configurations, some usage patterns may cause duplication i n the CSS output. systems have default configurations, some usage patterns may cause duplication i n the CSS output.
Below are examples of patterns that generate duplicative theme styles: Below are examples of patterns that generate duplicative theme styles:
**Example #1** **Example #1**
```scss ```scss
$light-theme: mat-light-theme((color: ...)); @use '~@angular/material' as mat;
$dark-theme: mat-dark-theme((color: ...));
$light-theme: mat.define-light-theme((color: ...));
$dark-theme: mat.define-dark-theme((color: ...));
// Generates styles for all systems configured in the theme. In this case, color styles // Generates styles for all systems configured in the theme. In this case, color styles
// and default density styles are generated. Density is in themes by default. // and default density styles are generated. Density is in themes by default.
@include angular-material-theme($light-theme); @include mat.all-component-themes($light-theme);
.dark-theme { .dark-theme {
// Generates styles for all systems configured in the theme. In this case, col or styles // Generates styles for all systems configured in the theme. In this case, col or styles
// and the default density styles are generated. **Note** that this is a probl em because it // and the default density styles are generated. **Note** that this is a probl em because it
// means that density styles are generated *again*, even though only the color should change. // means that density styles are generated *again*, even though only the color should change.
@include angular-material-theme($dark-theme); @include mat.all-component-themes($dark-theme);
} }
``` ```
To fix this, you can use the dedicated mixin for color styles for the `.dark-the me` To fix this, you can use the dedicated mixin for color styles for the `.dark-the me`
selector. Replace the `angular-material-theme` mixin and include the dark theme selector. Replace the `all-component-themes` mixin and include the dark theme us
using the ing the
`angular-material-color` mixin. For example: `all-component-colors` mixin. For example:
```scss ```scss
@use '~@angular/material' as mat;
... ...
@include angular-material-theme($light-theme); @include mat.all-component-themes($light-theme);
.dark-theme { .dark-theme {
// This mixin only generates the color styles now. // This mixin only generates the color styles now.
@include angular-material-color($dark-theme); @include mat.all-component-colors($dark-theme);
} }
``` ```
Typography can also be configured via Sass mixin; see `angular-material-typograp hy`. Typography can also be configured via Sass mixin; see `all-component-typographie s`.
**Example #2** **Example #2**
Theme styles could also be duplicated if individual theme mixins are used. For e xample: Theme styles could also be duplicated if individual theme mixins are used. For e xample:
```scss ```scss
@include angular-material-theme($my-theme); @use '~@angular/material' as mat;
@include mat.all-component-themes($my-theme);
.my-custom-dark-button { .my-custom-dark-button {
// This will also generate the default density styles again. // This will also generate the default density styles again.
@include mat-button-theme($my-theme); @include mat.button-theme($my-theme);
} }
``` ```
To avoid this duplication of styles, use the dedicated mixin for the color syste m and To avoid this duplication of styles, use the dedicated mixin for the color syste m and
extract the configuration for the color system from the theme. extract the configuration for the color system from the theme.
```scss ```scss
@use '~@angular/material' as mat;
.my-custom-dark-button { .my-custom-dark-button {
// This will only generate the color styles for `mat-button`. // This will only generate the color styles for `mat-button`.
@include mat-button-color($my-theme); @include mat.button-color($my-theme);
} }
``` ```
## Disabling duplication warnings ## Disabling duplication warnings
If your application intentionally duplicates styles, a global Sass variable can be If your application intentionally duplicates styles, a global Sass variable can be
set to disable duplication warnings from Angular Material. For example: set to disable duplication warnings from Angular Material. For example:
```scss ```scss
$mat-theme-ignore-duplication-warnings: true; @use '~@angular/material' as mat;
mat.$theme-ignore-duplication-warnings: true;
// Include themes as usual. // Include themes as usual.
@include angular-material-theme($light-theme); @include mat.all-component-themes($light-theme);
... ...
``` ```
 End of changes. 14 change blocks. 
15 lines changed or deleted 25 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)