From 5ab0897b5b57ee1bd1ba6480be8547dff24ff351 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Thu, 18 Apr 2024 14:06:19 -0400 Subject: [PATCH 1/3] feat(multiple): token overrides api * Roll out the overrides api to provide users with a well-lit path for overriding our css variables. --- .../autocomplete/_autocomplete-theme.scss | 7 ++++++ src/material/badge/_badge-theme.scss | 9 +++++++ .../bottom-sheet/_bottom-sheet-theme.scss | 7 ++++++ .../button-toggle/_button-toggle-theme.scss | 12 +++++++++ src/material/button/_button-theme.scss | 25 +++++++++++++++++++ src/material/button/_fab-theme.scss | 13 ++++++++++ src/material/button/_icon-button-theme.scss | 8 ++++++ src/material/card/_card-theme.scss | 9 +++++++ src/material/chips/_chips-theme.scss | 10 ++++++++ src/material/core/_core-theme.scss | 17 +++++++++++++ src/material/core/option/_optgroup-theme.scss | 7 ++++++ src/material/core/option/_option-theme.scss | 9 +++++++ src/material/core/ripple/_ripple-theme.scss | 7 ++++++ .../_pseudo-checkbox-theme.scss | 13 ++++++++++ .../datepicker/_datepicker-theme.scss | 9 +++++++ src/material/dialog/_dialog-theme.scss | 8 ++++++ src/material/divider/_divider-theme.scss | 7 ++++++ src/material/expansion/_expansion-theme.scss | 7 ++++++ .../form-field/_form-field-theme.scss | 15 +++++++++++ src/material/grid-list/_grid-list-theme.scss | 7 ++++++ src/material/icon/_icon-theme.scss | 9 +++++++ src/material/input/_input-theme.scss | 8 ++++++ src/material/list/_list-theme.scss | 8 ++++++ src/material/menu/_menu-theme.scss | 7 ++++++ src/material/paginator/_paginator-theme.scss | 7 ++++++ .../progress-bar/_progress-bar-theme.scss | 11 ++++++++ .../_progress-spinner-theme.scss | 11 ++++++++ src/material/radio/_radio-theme.scss | 10 ++++++++ src/material/select/_select-theme.scss | 9 +++++++ src/material/sidenav/_sidenav-theme.scss | 7 ++++++ .../slide-toggle/_slide-toggle-theme.scss | 11 ++++++++ src/material/slider/_slider-theme.scss | 10 ++++++++ src/material/snack-bar/_snack-bar-theme.scss | 10 ++++++++ src/material/sort/_sort-theme.scss | 7 ++++++ src/material/stepper/_stepper-theme.scss | 9 +++++++ src/material/table/_table-theme.scss | 7 ++++++ src/material/tabs/_tabs-theme.scss | 20 +++++++++++++++ src/material/toolbar/_toolbar-theme.scss | 9 +++++++ src/material/tooltip/_tooltip-theme.scss | 8 ++++++ src/material/tree/_tree-theme.scss | 7 ++++++ 40 files changed, 391 insertions(+) diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index f19fdd8c2a88..31273e0a8e91 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -55,6 +55,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/badge/_badge-theme.scss b/src/material/badge/_badge-theme.scss index 3fa028626223..1cb96ffd9759 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -72,6 +72,15 @@ @else {} } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-badge. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/bottom-sheet/_bottom-sheet-theme.scss b/src/material/bottom-sheet/_bottom-sheet-theme.scss index 5e7a328080d9..38a7c6032b36 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -50,6 +50,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/button-toggle/_button-toggle-theme.scss b/src/material/button-toggle/_button-toggle-theme.scss index b69b92ebe84d..f28f084fded0 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -79,6 +79,18 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $legacy-tokens: tokens-mat-legacy-button-toggle.get-token-slots(); + $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots(); + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens), + (prefix: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-button-toggle. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss index a64debc91561..906466a02fda 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -273,6 +273,31 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots(); + $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots(); + $mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots(); + $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots(); + $mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots(); + $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots(); + $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots(); + $mat-text-button-tokens: tokens-mat-text-button.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens), + (prefix: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens), + (prefix: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens), + (prefix: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens), + (prefix: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens), + (prefix: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens), + (prefix: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens), + (prefix: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-button. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 2830ffec8e6f..b956192d6e5e 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -141,6 +141,19 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots()), + (prefix: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots()), + (prefix: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots()), + (prefix: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots()), + (prefix: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss index f1edc4d3973c..580de6c2280b 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -121,6 +121,14 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots()), + (prefix: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 75e273cfce6f..52bb21df11e5 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -88,6 +88,15 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots()), + (prefix: tokens-mdc-elevated-card.$prefix, tokens: tokens-mdc-elevated-card.get-token-slots()), + (prefix: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 7604a6c72b20..736b195ec173 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -101,6 +101,16 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()), + (prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-chips. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/core/_core-theme.scss b/src/material/core/_core-theme.scss index 63a81e8a1d90..1142b733770f 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -88,6 +88,23 @@ } } +@mixin overrides($tokens: ()) { + $app-tokens: tokens-mat-app.get-token-slots(); + $ripple-tokens: tokens-mat-ripple.get-token-slots(); + $option-tokens: tokens-mat-option.get-token-slots(); + $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); + $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-app.$prefix, tokens: $app-tokens), + (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens), + (prefix: tokens-mat-option.$prefix, tokens: $option-tokens), + (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens), + (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens), + ); +} + // Mixin that renders all of the core styles that depend on the theme. @mixin theme($theme, $options...) { // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index be79ebd31591..5c39fe2f32bb 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -45,6 +45,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/core/option/_option-theme.scss b/src/material/core/option/_option-theme.scss index 2e528f132e0c..4cc6f7839379 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -66,6 +66,15 @@ @else {} } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-option. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/core/ripple/_ripple-theme.scss b/src/material/core/ripple/_ripple-theme.scss index 6b5031836f15..750fcd08ea40 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -49,6 +49,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss index 1c3dd0b855eb..206a3a76da6f 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -33,6 +33,19 @@ /// @param {Map} $theme The theme to generate base styles for. @mixin base($theme) {} +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots(); + $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens), + (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens), + ); +} + /// Outputs color theme styles for the mat-pseudo-checkbox. /// @param {Map} $theme The theme to generate color styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/datepicker/_datepicker-theme.scss b/src/material/datepicker/_datepicker-theme.scss index 9dd58a6b29b2..669873845cd8 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -134,6 +134,15 @@ $calendar-weekday-table-font-size: 11px !default; } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-datepicker. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/dialog/_dialog-theme.scss b/src/material/dialog/_dialog-theme.scss index a9b7fe880d75..617852226160 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -56,6 +56,14 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots()), + (prefix: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/divider/_divider-theme.scss b/src/material/divider/_divider-theme.scss index 3785b1feee26..0b2694c459ec 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -44,6 +44,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-divider.$prefix, tokens: tokens-mat-divider.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-divider') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/expansion/_expansion-theme.scss b/src/material/expansion/_expansion-theme.scss index f713079a8acd..8b0acb394e06 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -58,6 +58,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-expansion.$prefix, tokens: tokens-mat-expansion.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/form-field/_form-field-theme.scss b/src/material/form-field/_form-field-theme.scss index 968063a3ede4..ac8becb37734 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -103,6 +103,21 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $filled-text-field-tokens: tokens-mdc-filled-text-field.get-token-slots(); + $outlined-text-field-tokens: tokens-mdc-outlined-text-field.get-token-slots(); + $form-field-tokens: tokens-mat-form-field.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens), + (prefix: tokens-mdc-outlined-text-field.$prefix, tokens: $outlined-text-field-tokens), + (prefix: tokens-mat-form-field.$prefix, tokens: $form-field-tokens), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-form-field. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/grid-list/_grid-list-theme.scss b/src/material/grid-list/_grid-list-theme.scss index 3cf84bcc4e2d..d7ac871c65f5 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -41,6 +41,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/icon/_icon-theme.scss b/src/material/icon/_icon-theme.scss index 8aab7b577616..bee253f672eb 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -70,6 +70,15 @@ @else {} } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-icon. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/input/_input-theme.scss b/src/material/input/_input-theme.scss index 4a7f011492ee..8cac2a2a94f9 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -2,6 +2,7 @@ @use '../core/theming/inspection'; @use '../core/theming/validation'; @use '../core/typography/typography'; +@use '../core/tokens/token-utils'; @mixin base($theme) { @if inspection.get-theme-version($theme) == 1 { @@ -31,6 +32,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: '', tokens: ()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss index 03ba5d52a8ff..b88620f0743e 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -168,6 +168,14 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots()), + (prefix: tokens-mdc-list.$prefix, tokens: tokens-mdc-list.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/menu/_menu-theme.scss b/src/material/menu/_menu-theme.scss index 24e48adeddcd..2855984022aa 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -50,6 +50,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-menu.$prefix, tokens: tokens-mat-menu.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/paginator/_paginator-theme.scss b/src/material/paginator/_paginator-theme.scss index 409394b10950..2f7a1c5ed707 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -55,6 +55,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-paginator.$prefix, tokens: tokens-mat-paginator.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/progress-bar/_progress-bar-theme.scss b/src/material/progress-bar/_progress-bar-theme.scss index ba7f52a0e00d..73a8e390aca8 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -59,6 +59,17 @@ /// @param {Map} $theme The theme to generate density styles for. @mixin density($theme) {} +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $linear-progress-tokens: tokens-mdc-linear-progress.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-linear-progress.$prefix, tokens: $linear-progress-tokens), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-progress-bar. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/progress-spinner/_progress-spinner-theme.scss b/src/material/progress-spinner/_progress-spinner-theme.scss index edac51cc56be..17a700fe885b 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -61,6 +61,17 @@ @mixin density($theme) { } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $circular-progress-tokens: tokens-mdc-circular-progress.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-circular-progress.$prefix, tokens: $circular-progress-tokens), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-progress-spinner. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss index 263a1bc2dbef..702af5a84d51 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -96,6 +96,16 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-radio.$prefix, tokens: tokens-mdc-radio.get-token-slots()), + (prefix: tokens-mat-radio.$prefix, tokens: tokens-mat-radio.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-radio. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/select/_select-theme.scss b/src/material/select/_select-theme.scss index a27709405b4f..dd3d4aac1a99 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -77,6 +77,15 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-select.$prefix, tokens: tokens-mat-select.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-icon. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/sidenav/_sidenav-theme.scss b/src/material/sidenav/_sidenav-theme.scss index cf938092c6d8..bc1f5f5683dc 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -44,6 +44,13 @@ @else {} } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-sidenav.$prefix, tokens: tokens-mat-sidenav.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss index 20f0f437a335..18faebda334f 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -108,6 +108,17 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-form-field.$prefix, tokens: tokens-mdc-form-field.get-token-slots()), + (prefix: tokens-mat-switch.$prefix, tokens: tokens-mat-switch.get-token-slots()), + (prefix: tokens-mdc-switch.$prefix, tokens: tokens-mdc-switch.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-icon. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/slider/_slider-theme.scss b/src/material/slider/_slider-theme.scss index 7848ab07fe98..755d86655a00 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -104,6 +104,16 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots()), + (prefix: tokens-mdc-slider.$prefix, tokens: tokens-mdc-slider.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-option. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/snack-bar/_snack-bar-theme.scss b/src/material/snack-bar/_snack-bar-theme.scss index 91e1cde1d811..179ef72ce2ab 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -49,6 +49,16 @@ @mixin density($theme) {} +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-snack-bar.$prefix, tokens: tokens-mdc-snack-bar.get-token-slots()), + (prefix: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/sort/_sort-theme.scss b/src/material/sort/_sort-theme.scss index 968ed4df42ac..b855a57e2b35 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -50,6 +50,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-sort.$prefix, tokens: tokens-mat-sort.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/stepper/_stepper-theme.scss b/src/material/stepper/_stepper-theme.scss index e2f203497c72..590d32e1c747 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -71,6 +71,15 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots()), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for mat-stepper. /// @param {Map} $theme The theme to generate color styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/table/_table-theme.scss b/src/material/table/_table-theme.scss index f7b3fc05af57..06a5292a8515 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -55,6 +55,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/tabs/_tabs-theme.scss b/src/material/tabs/_tabs-theme.scss index 0dc380af45bb..8c53e421ffb7 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -122,6 +122,26 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + $tab-tokens: tokens-mdc-tab.get-token-slots(); + $tab-indicator-tokens: tokens-mdc-tab-indicator.get-token-slots(); + $tab-header-tokens: tokens-mat-tab-header.get-token-slots(); + $tab-header-with-background-tokens: tokens-mat-tab-header-with-background.get-token-slots(); + + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-tab.$prefix, tokens: $tab-tokens), + (prefix: tokens-mdc-tab-indicator.$prefix, tokens: $tab-indicator-tokens), + (prefix: tokens-mat-tab-header.$prefix, tokens: $tab-header-tokens), + ( + prefix: tokens-mat-tab-header-with-background.$prefix, + tokens: $tab-header-with-background-tokens, + ), + ); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-tab. /// @param {Map} $theme The theme to generate styles for. /// @param {ArgList} Additional optional arguments (only supported for M3 themes): diff --git a/src/material/toolbar/_toolbar-theme.scss b/src/material/toolbar/_toolbar-theme.scss index 12cfeed30125..a920caa8fb3f 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -72,6 +72,15 @@ } } +/// Outputs the CSS variable values for the given tokens. +/// @param {Map} $tokens The token values to emit. +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-toolbar.$prefix, tokens: tokens-mat-toolbar.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/tooltip/_tooltip-theme.scss b/src/material/tooltip/_tooltip-theme.scss index 8a78df6a1a9c..5e4b3449860e 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -4,6 +4,7 @@ @use '../core/theming/theming'; @use '../core/theming/inspection'; @use '../core/theming/validation'; +@use '../core/tokens/token-utils'; @use '../core/typography/typography'; @use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip; @@ -61,6 +62,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mdc-plain-tooltip.$prefix, tokens: tokens-mdc-plain-tooltip.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') { @if inspection.get-theme-version($theme) == 1 { diff --git a/src/material/tree/_tree-theme.scss b/src/material/tree/_tree-theme.scss index 66a3af5b94ed..3f941e1c8b46 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -55,6 +55,13 @@ } } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values( + $tokens, + (prefix: tokens-mat-tree.$prefix, tokens: tokens-mat-tree.get-token-slots()), + ); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') { @if inspection.get-theme-version($theme) == 1 { From 9d5592f0f3c7fe9e9d0ec29cdc4466f25f1bdd16 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 19 Apr 2024 15:58:43 -0400 Subject: [PATCH 2/3] fixup! feat(multiple): token overrides api --- src/material/_index.scss | 82 ++++++++++++++++++++-------------------- 1 file changed, 41 insertions(+), 41 deletions(-) diff --git a/src/material/_index.scss b/src/material/_index.scss index d18260386643..a3377fc97d5a 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -38,92 +38,92 @@ // Component themes @forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density, - core-base; -@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base; + core-base, core-overrides; +@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base, ripple-overrides; @forward './core/option/option-theme' as option-* show option-color, option-typography, - option-theme, option-density, option-base; + option-theme, option-density, option-base, option-overrides; @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography, - optgroup-theme, optgroup-density, optgroup-base; + optgroup-theme, optgroup-density, optgroup-base, optgroup-overrides; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density, - pseudo-checkbox-base; + pseudo-checkbox-base, pseudo-checkbox-overrides; @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show pseudo-checkbox-legacy-size; @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show strong-focus-indicators-color, strong-focus-indicators-theme; @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme, - autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base; + autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base, autocomplete-overrides; @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography, - badge-density, badge-base; + badge-density, badge-base, badge-overrides; @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, - bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base; + bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base, bottom-sheet-overrides; @forward './button/button-theme' as button-* show button-theme, button-color, button-typography, - button-density, button-base; + button-density, button-base, button-overrides; @forward './button/fab-theme' as fab-* show fab-color, fab-typography, - fab-density, fab-theme, fab-base; + fab-density, fab-theme, fab-base, fab-overrides; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, - icon-button-typography, icon-button-density, icon-button-theme, icon-button-base; + icon-button-typography, icon-button-density, icon-button-theme, icon-button-base, icon-button-overrides; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, - button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base; + button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base, button-toggle-overrides; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density, - card-base; + card-base, card-overrides; @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color, - checkbox-typography, checkbox-density, checkbox-base; + checkbox-typography, checkbox-density, checkbox-base, checkbox-overrides; @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography, - chips-density, chips-base; + chips-density, chips-base, chips-overrides; @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color, - datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base; + datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base, datepicker-overrides; @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography, - dialog-density, dialog-base; + dialog-density, dialog-base, dialog-overrides; @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding; @forward './divider/divider-theme' as divider-* show divider-theme, divider-color, - divider-typography, divider-density, divider-base; + divider-typography, divider-density, divider-base, divider-overrides; @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color, - expansion-typography, expansion-density, expansion-base; + expansion-typography, expansion-density, expansion-base, expansion-overrides; @forward './form-field/form-field-theme' as form-field-* show form-field-theme, - form-field-color, form-field-typography, form-field-density, form-field-base; + form-field-color, form-field-typography, form-field-density, form-field-base, form-field-overrides; @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color, - grid-list-typography, grid-list-density, grid-list-base; + grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides; @forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density, - icon-base; + icon-base, icon-overrides; @forward './input/input-theme' as input-* show input-theme, input-color, input-typography, - input-density, input-base; + input-density, input-base, input-overrides; @forward './list/list-theme' as list-* show list-theme, list-color, list-typography, - list-density, list-base; + list-density, list-base, list-overrides; @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density, - menu-base; + menu-base, menu-overrides; @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color, - paginator-typography, paginator-density, paginator-base; + paginator-typography, paginator-density, paginator-base, paginator-overrides; @forward './progress-bar/progress-bar-theme' as progress-bar-* show progress-bar-theme, progress-bar-color, progress-bar-typography, - progress-bar-density, progress-bar-base; + progress-bar-density, progress-bar-base, progress-bar-overrides; @forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show progress-spinner-theme, progress-spinner-color, progress-spinner-typography, - progress-spinner-density, progress-spinner-base; + progress-spinner-density, progress-spinner-base, progress-spinner-overrides; @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography, - radio-density, radio-base; + radio-density, radio-base, radio-overrides; @forward './select/select-theme' as select-* show select-theme, select-color, select-typography, - select-density, select-base; + select-density, select-base, select-overrides; @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color, - sidenav-typography, sidenav-density, sidenav-base; + sidenav-typography, sidenav-density, sidenav-base, sidenav-overrides; @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density, - slide-toggle-base; + slide-toggle-base, slide-toggle-overrides; @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography, - slider-density, slider-base; + slider-density, slider-base, slider-overrides; @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color, - snack-bar-typography, snack-bar-density, snack-bar-base; + snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides; @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density, - sort-base; + sort-base, sort-overrides; @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color, - stepper-typography, stepper-density, stepper-base; + stepper-typography, stepper-density, stepper-base, stepper-overrides; @forward './table/table-theme' as table-* show table-theme, table-color, table-typography, - table-density, table-base; + table-density, table-base, table-overrides; @forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density, - tabs-base; + tabs-base, tabs-overrides; @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color, - toolbar-typography, toolbar-density, toolbar-base; + toolbar-typography, toolbar-density, toolbar-base, toolbar-overrides; @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color, - tooltip-typography, tooltip-density, tooltip-base; + tooltip-typography, tooltip-density, tooltip-base, tooltip-overrides; @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density, - tree-base; + tree-base, tree-overrides; From d2355699436b7749abbf1104f7a5d5559c0e519d Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Mon, 22 Apr 2024 13:29:50 -0400 Subject: [PATCH 3/3] fixup! feat(multiple): token overrides api --- src/material/_index.scss | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/src/material/_index.scss b/src/material/_index.scss index a3377fc97d5a..53786b7be483 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -39,7 +39,8 @@ // Component themes @forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density, core-base, core-overrides; -@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base, ripple-overrides; +@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base, + ripple-overrides; @forward './core/option/option-theme' as option-* show option-color, option-typography, option-theme, option-density, option-base, option-overrides; @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography, @@ -52,19 +53,23 @@ @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show strong-focus-indicators-color, strong-focus-indicators-theme; @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme, - autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base, autocomplete-overrides; + autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base, + autocomplete-overrides; @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography, badge-density, badge-base, badge-overrides; @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme, - bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base, bottom-sheet-overrides; + bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base, + bottom-sheet-overrides; @forward './button/button-theme' as button-* show button-theme, button-color, button-typography, button-density, button-base, button-overrides; @forward './button/fab-theme' as fab-* show fab-color, fab-typography, fab-density, fab-theme, fab-base, fab-overrides; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, - icon-button-typography, icon-button-density, icon-button-theme, icon-button-base, icon-button-overrides; + icon-button-typography, icon-button-density, icon-button-theme, icon-button-base, + icon-button-overrides; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, - button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base, button-toggle-overrides; + button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base, + button-toggle-overrides; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density, card-base, card-overrides; @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color, @@ -72,7 +77,8 @@ @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography, chips-density, chips-base, chips-overrides; @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color, - datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base, datepicker-overrides; + datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base, + datepicker-overrides; @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography, dialog-density, dialog-base, dialog-overrides; @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding; @@ -81,7 +87,8 @@ @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color, expansion-typography, expansion-density, expansion-base, expansion-overrides; @forward './form-field/form-field-theme' as form-field-* show form-field-theme, - form-field-color, form-field-typography, form-field-density, form-field-base, form-field-overrides; + form-field-color, form-field-typography, form-field-density, form-field-base, + form-field-overrides; @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color, grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides; @forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density,