From 233e66c5ae7e67b1d0f55a479f69586dcb1960ba Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 18 Oct 2024 14:48:38 +0200 Subject: [PATCH 1/2] refactor(multiple): move overrides tokens into a separate function Moves the logic that generates the tokens for the `overrides` mixin into a separate function so it can be used for docs extraction. --- .../autocomplete/_autocomplete-theme.scss | 12 +++++++---- src/material/badge/_badge-theme.scss | 16 +++++++++------ .../bottom-sheet/_bottom-sheet-theme.scss | 12 +++++++---- .../button-toggle/_button-toggle-theme.scss | 17 ++++++++++------ src/material/button/_button-theme.scss | 16 +++++++++------ src/material/button/_fab-theme.scss | 16 +++++++++------ src/material/button/_icon-button-theme.scss | 12 +++++++---- src/material/card/_card-theme.scss | 12 +++++++---- src/material/checkbox/_checkbox-theme.scss | 16 +++++++++------ src/material/chips/_chips-theme.scss | 16 +++++++++------ src/material/core/_core-theme.scss | 9 ++------- src/material/core/option/_optgroup-theme.scss | 12 +++++++---- src/material/core/option/_option-theme.scss | 16 +++++++++------ src/material/core/ripple/_ripple-theme.scss | 12 +++++++---- .../_pseudo-checkbox-theme.scss | 16 +++++++++------ .../datepicker/_datepicker-theme.scss | 16 +++++++++------ src/material/dialog/_dialog-theme.scss | 12 +++++++---- src/material/divider/_divider-theme.scss | 12 +++++++---- src/material/expansion/_expansion-theme.scss | 12 +++++++---- .../form-field/_form-field-theme.scss | 14 ++++++++----- src/material/grid-list/_grid-list-theme.scss | 12 +++++++---- src/material/icon/_icon-theme.scss | 16 +++++++++------ src/material/input/_input-theme.scss | 12 +++++++---- src/material/list/_list-theme.scss | 12 +++++++---- src/material/menu/_menu-theme.scss | 12 +++++++---- src/material/paginator/_paginator-theme.scss | 12 +++++++---- .../progress-bar/_progress-bar-theme.scss | 20 ++++++++++--------- .../_progress-spinner-theme.scss | 20 ++++++++++--------- src/material/radio/_radio-theme.scss | 16 +++++++++------ src/material/select/_select-theme.scss | 16 +++++++++------ src/material/sidenav/_sidenav-theme.scss | 12 +++++++---- .../slide-toggle/_slide-toggle-theme.scss | 16 +++++++++------ src/material/slider/_slider-theme.scss | 16 +++++++++------ src/material/snack-bar/_snack-bar-theme.scss | 16 +++++++++------ src/material/sort/_sort-theme.scss | 12 +++++++---- src/material/stepper/_stepper-theme.scss | 16 +++++++++------ src/material/table/_table-theme.scss | 12 +++++++---- src/material/tabs/_tabs-theme.scss | 16 +++++++++------ .../timepicker/_timepicker-theme.scss | 16 +++++++++------ src/material/toolbar/_toolbar-theme.scss | 16 +++++++++------ src/material/tooltip/_tooltip-theme.scss | 12 +++++++---- src/material/tree/_tree-theme.scss | 12 +++++++---- 42 files changed, 376 insertions(+), 220 deletions(-) diff --git a/src/material/autocomplete/_autocomplete-theme.scss b/src/material/autocomplete/_autocomplete-theme.scss index ceb526ec2e91..a7b7903d51b9 100644 --- a/src/material/autocomplete/_autocomplete-theme.scss +++ b/src/material/autocomplete/_autocomplete-theme.scss @@ -59,16 +59,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 74e0470109f8..05010f81b40a 100644 --- a/src/material/badge/_badge-theme.scss +++ b/src/material/badge/_badge-theme.scss @@ -79,18 +79,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 85585111bd25..dc4911e699ed 100644 --- a/src/material/bottom-sheet/_bottom-sheet-theme.scss +++ b/src/material/bottom-sheet/_bottom-sheet-theme.scss @@ -53,16 +53,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 534501da096d..1b0ddd312550 100644 --- a/src/material/button-toggle/_button-toggle-theme.scss +++ b/src/material/button-toggle/_button-toggle-theme.scss @@ -87,13 +87,12 @@ } } -/// Outputs the CSS variable values for the given tokens. -/// @param {Map} $tokens The token values to emit. -@mixin overrides($tokens: ()) { +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { $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, + + @return ( ( namespace: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens, @@ -102,10 +101,16 @@ ( namespace: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens, - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 62c88a0597c8..37aeb9f029d3 100644 --- a/src/material/button/_button-theme.scss +++ b/src/material/button/_button-theme.scss @@ -361,9 +361,8 @@ } } -/// Outputs the CSS variable values for the given tokens. -/// @param {Map} $tokens The token values to emit. -@mixin overrides($tokens: ()) { +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { $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(); @@ -373,8 +372,7 @@ $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, + @return ( ( namespace: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens, @@ -414,10 +412,16 @@ namespace: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens, prefix: 'text-', - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 c7e78e68aa7c..3cea2a9e5856 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -158,11 +158,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots(), @@ -185,10 +183,16 @@ namespace: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots(), prefix: 'small-', - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 4d95740943d4..e3a066c92484 100644 --- a/src/material/button/_icon-button-theme.scss +++ b/src/material/button/_icon-button-theme.scss @@ -121,9 +121,9 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots(), @@ -131,10 +131,14 @@ ( namespace: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-icon-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/card/_card-theme.scss b/src/material/card/_card-theme.scss index c8c4a7f59311..2a64d885a303 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -93,9 +93,9 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots(), @@ -109,10 +109,14 @@ namespace: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots(), prefix: 'outlined-', - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss index e91f6510bac6..c06151d37f53 100644 --- a/src/material/checkbox/_checkbox-theme.scss +++ b/src/material/checkbox/_checkbox-theme.scss @@ -105,11 +105,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-checkbox.$prefix, tokens: tokens-mat-checkbox.get-token-slots(), @@ -117,10 +115,16 @@ ( namespace: tokens-mdc-checkbox.$prefix, tokens: tokens-mdc-checkbox.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss index 015cb521950c..811c74ac61ff 100644 --- a/src/material/chips/_chips-theme.scss +++ b/src/material/chips/_chips-theme.scss @@ -123,11 +123,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots(), @@ -135,10 +133,16 @@ ( namespace: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 82e11da6ab84..7405f9042fba 100644 --- a/src/material/core/_core-theme.scss +++ b/src/material/core/_core-theme.scss @@ -71,12 +71,7 @@ } } -// This theme is a special case where not all of the imported tokens are supported in `overrides`. -// To aid the docs token extraction, we have to pull the `overrides` token config out into a -// separate function. -// !!!Important!!! renaming or removal of this function requires the `extract-tokens.ts` script to -// be updated as well. -@function _get-supported-overrides-tokens() { +@function _define-overrides() { $app-tokens: tokens-mat-app.get-token-slots(); $ripple-tokens: tokens-mat-ripple.get-token-slots(); $option-tokens: tokens-mat-option.get-token-slots(); @@ -101,7 +96,7 @@ } @mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values($tokens, _get-supported-overrides-tokens()...); + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); } // Mixin that renders all of the core styles that depend on the theme. diff --git a/src/material/core/option/_optgroup-theme.scss b/src/material/core/option/_optgroup-theme.scss index 1c896de357f6..5e22e9160e5d 100644 --- a/src/material/core/option/_optgroup-theme.scss +++ b/src/material/core/option/_optgroup-theme.scss @@ -47,16 +47,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-optgroup.$prefix, tokens: tokens-mat-optgroup.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 dc927e275ed6..6fb51175850e 100644 --- a/src/material/core/option/_option-theme.scss +++ b/src/material/core/option/_option-theme.scss @@ -72,18 +72,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-option.$prefix, tokens: tokens-mat-option.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 800e56c50cd0..f401269fcd1a 100644 --- a/src/material/core/ripple/_ripple-theme.scss +++ b/src/material/core/ripple/_ripple-theme.scss @@ -52,16 +52,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-ripple.$prefix, tokens: tokens-mat-ripple.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 766f90a4a35d..77cf9f11438e 100644 --- a/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +++ b/src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss @@ -49,14 +49,12 @@ @mixin base($theme) { } -/// Outputs the CSS variable values for the given tokens. -/// @param {Map} $tokens The token values to emit. -@mixin overrides($tokens: ()) { +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { $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, + @return ( ( namespace: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens, @@ -66,10 +64,16 @@ namespace: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens, prefix: 'minimal-', - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 c6b998d34a28..460e6b08f059 100644 --- a/src/material/datepicker/_datepicker-theme.scss +++ b/src/material/datepicker/_datepicker-theme.scss @@ -145,18 +145,22 @@ $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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-datepicker.$prefix, tokens: tokens-mat-datepicker.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 b2a7f1add9da..dbeb3a77c04e 100644 --- a/src/material/dialog/_dialog-theme.scss +++ b/src/material/dialog/_dialog-theme.scss @@ -67,9 +67,9 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-dialog.$prefix, tokens: tokens-mdc-dialog.get-token-slots(), @@ -77,10 +77,14 @@ ( namespace: tokens-mat-dialog.$prefix, tokens: tokens-mat-dialog.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 f3e3306ae2ca..c32ae4f48efb 100644 --- a/src/material/divider/_divider-theme.scss +++ b/src/material/divider/_divider-theme.scss @@ -46,16 +46,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-divider.$prefix, tokens: tokens-mat-divider.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 e789efdc5f94..e37fd00fccc1 100644 --- a/src/material/expansion/_expansion-theme.scss +++ b/src/material/expansion/_expansion-theme.scss @@ -62,16 +62,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-expansion.$prefix, tokens: tokens-mat-expansion.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 d17886a244f8..e312f2f17086 100644 --- a/src/material/form-field/_form-field-theme.scss +++ b/src/material/form-field/_form-field-theme.scss @@ -126,15 +126,13 @@ } } -/// Outputs the CSS variable values for the given tokens. -/// @param {Map} $tokens The token values to emit. -@mixin overrides($tokens: ()) { +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { $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, + @return ( ( namespace: tokens-mdc-filled-text-field.$prefix, tokens: $filled-text-field-tokens, @@ -152,6 +150,12 @@ ); } +/// 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, _define-overrides()...); +} + /// 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 74d10b2dfce9..3e8aa20c9a95 100644 --- a/src/material/grid-list/_grid-list-theme.scss +++ b/src/material/grid-list/_grid-list-theme.scss @@ -42,16 +42,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-grid-list.$prefix, tokens: tokens-mat-grid-list.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 269322de6efa..b7aed62fca0c 100644 --- a/src/material/icon/_icon-theme.scss +++ b/src/material/icon/_icon-theme.scss @@ -71,18 +71,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-icon.$prefix, tokens: tokens-mat-icon.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 02ac63142b93..89ea988a140c 100644 --- a/src/material/input/_input-theme.scss +++ b/src/material/input/_input-theme.scss @@ -32,16 +32,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: '', tokens: (), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 aa987161b1ea..748d4123b330 100644 --- a/src/material/list/_list-theme.scss +++ b/src/material/list/_list-theme.scss @@ -204,9 +204,9 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-list.$prefix, tokens: tokens-mat-list.get-token-slots(), @@ -214,10 +214,14 @@ ( namespace: tokens-mdc-list.$prefix, tokens: tokens-mdc-list.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 6f058a1f72b8..f8b46f3ba833 100644 --- a/src/material/menu/_menu-theme.scss +++ b/src/material/menu/_menu-theme.scss @@ -53,16 +53,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-menu.$prefix, tokens: tokens-mat-menu.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 b582f5e806a4..94f2e317c228 100644 --- a/src/material/paginator/_paginator-theme.scss +++ b/src/material/paginator/_paginator-theme.scss @@ -62,16 +62,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-paginator.$prefix, tokens: tokens-mat-paginator.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 4b3e1287805d..c1961ee546e0 100644 --- a/src/material/progress-bar/_progress-bar-theme.scss +++ b/src/material/progress-bar/_progress-bar-theme.scss @@ -62,20 +62,22 @@ @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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-linear-progress.$prefix, - tokens: $linear-progress-tokens, - ) + tokens: tokens-mdc-linear-progress.get-token-slots(), + ), ); } +/// 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, _define-overrides()...); +} + /// 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 6b0e905be6ec..cb137fd16f66 100644 --- a/src/material/progress-spinner/_progress-spinner-theme.scss +++ b/src/material/progress-spinner/_progress-spinner-theme.scss @@ -63,20 +63,22 @@ @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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-circular-progress.$prefix, - tokens: $circular-progress-tokens, - ) + tokens: tokens-mdc-circular-progress.get-token-slots(), + ), ); } +/// 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, _define-overrides()...); +} + /// 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 a2986e5e609f..7f0adcc5f216 100644 --- a/src/material/radio/_radio-theme.scss +++ b/src/material/radio/_radio-theme.scss @@ -113,11 +113,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-radio.$prefix, tokens: tokens-mdc-radio.get-token-slots(), @@ -125,10 +123,16 @@ ( namespace: tokens-mat-radio.$prefix, tokens: tokens-mat-radio.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 7c54e743d98c..3aa20b0d7e45 100644 --- a/src/material/select/_select-theme.scss +++ b/src/material/select/_select-theme.scss @@ -83,18 +83,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-select.$prefix, tokens: tokens-mat-select.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 887305f4d3ba..82f7c988f69f 100644 --- a/src/material/sidenav/_sidenav-theme.scss +++ b/src/material/sidenav/_sidenav-theme.scss @@ -46,16 +46,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-sidenav.$prefix, tokens: tokens-mat-sidenav.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 d6a317ad3ca6..7f6431fe5aff 100644 --- a/src/material/slide-toggle/_slide-toggle-theme.scss +++ b/src/material/slide-toggle/_slide-toggle-theme.scss @@ -126,11 +126,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-switch.$prefix, tokens: tokens-mat-switch.get-token-slots(), @@ -138,10 +136,16 @@ ( namespace: tokens-mdc-switch.$prefix, tokens: tokens-mdc-switch.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 40fccd49cb3e..533e9a0979ac 100644 --- a/src/material/slider/_slider-theme.scss +++ b/src/material/slider/_slider-theme.scss @@ -101,11 +101,9 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-slider.$prefix, tokens: tokens-mat-slider.get-token-slots(), @@ -113,10 +111,16 @@ ( namespace: tokens-mdc-slider.$prefix, tokens: tokens-mdc-slider.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 808d6d1e86c6..ac7a9d7feaf1 100644 --- a/src/material/snack-bar/_snack-bar-theme.scss +++ b/src/material/snack-bar/_snack-bar-theme.scss @@ -55,11 +55,9 @@ @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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-snack-bar.$prefix, tokens: tokens-mdc-snack-bar.get-token-slots(), @@ -67,10 +65,16 @@ ( namespace: tokens-mat-snack-bar.$prefix, tokens: tokens-mat-snack-bar.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + @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 4b308b11b1f5..bfdb239fe1bd 100644 --- a/src/material/sort/_sort-theme.scss +++ b/src/material/sort/_sort-theme.scss @@ -53,16 +53,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-sort.$prefix, tokens: tokens-mat-sort.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 dfe1b5c54f45..1f4468b31246 100644 --- a/src/material/stepper/_stepper-theme.scss +++ b/src/material/stepper/_stepper-theme.scss @@ -78,18 +78,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-stepper.$prefix, tokens: tokens-mat-stepper.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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 ccbf0d530d5a..f30a9a415c18 100644 --- a/src/material/table/_table-theme.scss +++ b/src/material/table/_table-theme.scss @@ -59,16 +59,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-table.$prefix, tokens: tokens-mat-table.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 6ee62b5c2730..a41a02caf286 100644 --- a/src/material/tabs/_tabs-theme.scss +++ b/src/material/tabs/_tabs-theme.scss @@ -149,16 +149,14 @@ } } -/// Outputs the CSS variable values for the given tokens. -/// @param {Map} $tokens The token values to emit. -@mixin overrides($tokens: ()) { +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { $tab-tokens: tokens-mdc-secondary-navigation-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, + @return ( ( namespace: tokens-mdc-secondary-navigation-tab.$prefix, tokens: $tab-tokens, @@ -174,10 +172,16 @@ ( namespace: tokens-mat-tab-header-with-background.$prefix, tokens: $tab-header-with-background-tokens, - ) + ), ); } +/// 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, _define-overrides()...); +} + /// 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/timepicker/_timepicker-theme.scss b/src/material/timepicker/_timepicker-theme.scss index ac83cd6e009d..cba2368163ee 100644 --- a/src/material/timepicker/_timepicker-theme.scss +++ b/src/material/timepicker/_timepicker-theme.scss @@ -71,18 +71,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-timepicker.$prefix, tokens: tokens-mat-timepicker.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + /// Outputs all (base, color, typography, and density) theme styles for the mat-timepicker. /// @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 b3eb67d23f73..8e0a2fe444b4 100644 --- a/src/material/toolbar/_toolbar-theme.scss +++ b/src/material/toolbar/_toolbar-theme.scss @@ -76,18 +76,22 @@ } } -/// 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, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-toolbar.$prefix, tokens: tokens-mat-toolbar.get-token-slots(), - ) + ), ); } +/// 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, _define-overrides()...); +} + @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 8b70a532c82a..0fe51f32e01f 100644 --- a/src/material/tooltip/_tooltip-theme.scss +++ b/src/material/tooltip/_tooltip-theme.scss @@ -59,16 +59,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mdc-plain-tooltip.$prefix, tokens: tokens-mdc-plain-tooltip.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @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 341237a41224..865b365491fd 100644 --- a/src/material/tree/_tree-theme.scss +++ b/src/material/tree/_tree-theme.scss @@ -58,16 +58,20 @@ } } -@mixin overrides($tokens: ()) { - @include token-utils.batch-create-token-values( - $tokens, +/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction. +@function _define-overrides() { + @return ( ( namespace: tokens-mat-tree.$prefix, tokens: tokens-mat-tree.get-token-slots(), - ) + ), ); } +@mixin overrides($tokens: ()) { + @include token-utils.batch-create-token-values($tokens, _define-overrides()...); +} + @mixin theme($theme) { @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') { @if inspection.get-theme-version($theme) == 1 { From 45b91532bfd225a257a751bf41a1fdcfcc6a59ad Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 18 Oct 2024 14:49:46 +0200 Subject: [PATCH 2/2] build: update the tokens extraction script for new overrides setup The way we generate the names for the `overrides` mixin changed in a recent commit. These changes update the extraction script to account for it. --- tools/extract-tokens/extract-tokens.ts | 301 +++++++++---------------- 1 file changed, 112 insertions(+), 189 deletions(-) diff --git a/tools/extract-tokens/extract-tokens.ts b/tools/extract-tokens/extract-tokens.ts index 4c7813e47138..11acd6b831dc 100644 --- a/tools/extract-tokens/extract-tokens.ts +++ b/tools/extract-tokens/extract-tokens.ts @@ -1,27 +1,35 @@ import {readFileSync, writeFileSync} from 'fs'; import {pathToFileURL} from 'url'; -import {relative, basename, join, dirname} from 'path'; +import {relative, join, dirname} from 'path'; import {compileString} from 'sass'; -/** Extracted data for a single token. */ -interface Token { +/** Information extracted for a single token from the theme. */ +interface ExtractedToken { /** Name of the token. */ name: string; + /** Full prefix of the token. */ + prefix: string; /** Type of the token (color, typography etc.) */ type: string; - /** Places from which the token with the specific name can originate. */ - sources: { - /** Prefix of the source. */ - prefix: string; - /** System-level token from which the source dervies its value. */ - derivedFrom?: string; - }[]; + /** Value of the token. */ + value: string | number; + /** Name under which the token can be referred to inside the `overrides` mixin. */ + overridesName: string; } -/** Extracted map of tokens from the source Sass files. */ -type ExtractedTokenMap = { - [prefix: string]: Record; -}; +/** Information that will be generated about a token in the final output. */ +interface Token { + /** Name of the token. */ + name: string; + /** Full prefix of the token. */ + prefix: string; + /** Type of the token (color, typography etc.) */ + type: string; + /** Name under which the token can be referred to inside the `overrides` mixin. */ + overridesName: string; + /** Name of the system-level token that this token was derived from. */ + derivedFrom?: string; +} // Script that extracts the tokens from a specific Bazel target. if (require.main === module) { @@ -66,24 +74,12 @@ if (require.main === module) { */ function extractTokens(themePath: string): Token[] { const content = readFileSync(themePath, 'utf8'); - const useStatements = content.match(/@use\s+.+;/g); - - if (useStatements === null) { - return []; - } - const startMarker = '/*! extract tokens start */'; const endMarker = '/*! extract tokens end */'; const root = process.cwd(); const absoluteThemePath = join(root, themePath); const srcPath = join(root, 'src'); - const {prepend, append} = getTokenExtractionCode( - srcPath, - themePath, - startMarker, - endMarker, - useStatements, - ); + const {prepend, append} = getTokenExtractionCode(srcPath, themePath, startMarker, endMarker); const toCompile = [prepend, content, append].join('\n\n'); const data: string[] = []; @@ -124,68 +120,21 @@ function extractTokens(themePath: string): Token[] { throw new Error(`Cannot extract more than one component's tokens per file.`); } - const rawTokens = JSON.parse(data[0]) as { - color: ExtractedTokenMap; - typography: ExtractedTokenMap; - density: ExtractedTokenMap; - base: ExtractedTokenMap; - }; - - return [ - ...createTokens('color', rawTokens.color), - ...createTokens('typography', rawTokens.typography), - ...createTokens('density', rawTokens.density), - ...createTokens('base', rawTokens.base), - ]; -} - -/** - * Creates the token objects from a token map. - * @param type Type of tokens being extracted (color, typography etc.). - * @param groups Extracted data from the Sass file. - */ -function createTokens(type: string, groups: ExtractedTokenMap): Token[] { - const data: Map> = new Map(); - - // First step is to go through the whole data and group the tokens by their name. We need to - // group the tokens, because the same name can be used by different prefixes (e.g. both - // `mdc-filled-text-field` and `mdc-outlined-text-field` have a `label-text-color` token). - Object.keys(groups).forEach(prefix => { - const tokens = groups[prefix]; - - // The token data for some components may be null. - if (tokens) { - Object.keys(tokens).forEach(name => { - let tokenData = data.get(name); - - if (!tokenData) { - tokenData = new Map(); - data.set(name, tokenData); - } - - const value = tokens[name]; - const derivedFrom = typeof value === 'string' ? textBetween(value, 'var(', ')') : null; - tokenData.set(prefix, derivedFrom ? derivedFrom.replace('--sys-', '') : null); - }); - } - }); - - // After the tokens have been grouped, we can create the `Token` object for each one. - const result: Token[] = []; + const parsedTokens = JSON.parse(data[0]) as ExtractedToken[]; - data.forEach((tokenData, name) => { - const token: Token = {name, type, sources: []}; + return parsedTokens.map(token => { + const value = token.value; + const derivedFrom = typeof value === 'string' ? textBetween(value, 'var(', ')') : null; - tokenData.forEach((derivedFrom, prefix) => { - // Set `derivedFrom` to `undefined` if it hasn't been set so it doesn't show up in the JSON. - token.sources.push({prefix, derivedFrom: derivedFrom || undefined}); - }); - - result.push(token); + return { + name: token.name, + prefix: token.prefix, + type: token.type, + overridesName: token.overridesName, + // Set to `undefined` so the key gets dropped from the JSON if there's no value. + derivedFrom: derivedFrom || undefined, + }; }); - - // Sort the tokens by name so they're easier to scan. - return result.sort((a, b) => a.name.localeCompare(b.name)); } /** @@ -201,14 +150,16 @@ function getTokenExtractionCode( absoluteThemePath: string, startMarker: string, endMarker: string, - useStatements: string[], ) { const meta = '__privateSassMeta'; const map = '__privateSassMap'; const list = '__privateSassList'; const math = '__privateSassMath'; + const str = '__privateSassString'; + const stringJoin = '__privateStringJoin'; const m3Tokens = '___privateM3Tokens'; const palettes = '___privatePalettes'; + const defineOverrides = '_define-overrides'; const corePath = relative(dirname(absoluteThemePath), join(srcPath, 'material/core')) || '.'; const prepend = ` @@ -216,6 +167,7 @@ function getTokenExtractionCode( @use 'sass:map' as ${map}; @use 'sass:list' as ${list}; @use 'sass:math' as ${math}; + @use 'sass:string' as ${str}; @use '${join(corePath, 'tokens/m3-tokens')}' as ${m3Tokens}; @use '${join(corePath, 'theming/palettes')}' as ${palettes}; @use '${join(corePath, 'style/sass-utils')}' as __privateSassUtils; @@ -226,35 +178,9 @@ function getTokenExtractionCode( __privateSassUtils.$use-system-typography-variables: true; `; - // Goes through all the available namespaces looking for a `$prefix` variable. This allows us to - // determine the prefixes that are used within the theme. Once we know the prefixes we can use - // them to extract only the tokens we care about from the full token set. Note: `core-theme` - // is a special case where not all of the imported tokens are supported in the `overrides` - // mixin. Such cases will expose a `_get-supported-overrides-tokens` private function that - // can be used to determine the exact set of prefixes that are used. - // After the tokens are extracted, we log them out using `@debug` and then intercept the log - // in order to get the raw data. We have to go through `@debug`, because there's no way to - // output a Sass map to CSS. - // The tokens are encoded as JSON so we don't have to implement parsing of Sass maps in TS. const append = ` - $__prefixes: (); - - @if ${meta}.function-exists('_get-supported-overrides-tokens') { - $__configs: _get-supported-overrides-tokens(); - - @each $config in $__configs { - $__prefixes: ${list}.append($__prefixes, ${map}.get($config, prefix)); - } - } @else { - $__namespaces: (${useStatements.map(stmt => `"${extractNamespace(stmt)}"`).join(', ')}); - - @each $name in $__namespaces { - $prefix: ${map}.get(${meta}.module-variables($name), prefix); - - @if ($prefix) { - $__prefixes: ${list}.append($__prefixes, $prefix); - } - } + @if not ${meta}.function-exists('${defineOverrides}') { + @error 'File must define a ${defineOverrides} function for docs extraction purposes'; } $__all-color: ${m3Tokens}.generate-color-tokens(light, ${palettes}.$azure-palette, @@ -262,27 +188,70 @@ function getTokenExtractionCode( $__all-typography: ${m3Tokens}.generate-typography-tokens(font, 100, 100, 100, 100, 'sys'); $__all-density: ${m3Tokens}.generate-density-tokens(0); $__all-base: ${m3Tokens}.generate-base-tokens(); - $__color: (); - $__typography: (); - $__density: (); - $__base: (); - - @each $prefix in $__prefixes { - $__color: ${map}.set($__color, $prefix, ${map}.get($__all-color, $prefix)); - $__typography: ${map}.set($__typography, $prefix, ${map}.get($__all-typography, $prefix)); - $__density: ${map}.set($__density, $prefix, ${map}.get($__all-density, $prefix)); - $__base: ${map}.set($__base, $prefix, ${map}.get($__all-base, $prefix)); + $__results: (); + $__override-tokens: ${defineOverrides}(); + $__override-type: ${meta}.type-of($__override-tokens); + + @if $__override-type != 'list' { + @error 'Expected override to be a list but got ' + $__override-type; + } + + @function ${stringJoin}($value, $separator) { + $result: ''; + @each $part in $value { + $result: if($result == '', $part, '#{$result}#{$separator}#{$part}'); + } + @return $result; + } + + @each $map in $__override-tokens { + $namespace: ${map}.get($map, namespace); + $tokens: ${map}.get($map, tokens); + $prefix: ${map}.get($map, prefix) or ''; + $color: ${map}.get($__all-color, $namespace) or (); + $base: ${map}.get($__all-base, $namespace) or (); + $typography: ${map}.get($__all-typography, $namespace) or (); + $density: ${map}.get($__all-density, $namespace) or (); + + @each $name, $_ in $tokens { + $color-value: ${map}.get($color, $name); + $base-value: ${map}.get($base, $name); + $typography-value: ${map}.get($typography, $name); + $density-value: ${map}.get($density, $name); + + $type: ''; + $value: null; + + @if ($base-value) { + $type: base; + $value: $base-value; + } @else if ($typography-value) { + $type: typography; + $value: $typography-value; + } @else if ($density-value) { + $type: density; + $value: $density-value; + } @else { + $type: color; + $value: $color-value; + } + + @if ($value) { + $__results: ${list}.append($__results, ( + name: ${str}.unquote($name), + value: $value, + type: $type, + prefix: ${str}.unquote(${stringJoin}($namespace, '-')), + overridesName: ${str}.unquote($prefix + $name), + )) !global; + } + } } // Define our JSON.stringify implementation so it can be used below. - ${jsonStringifyImplementation('__json-stringify', {meta, list, math})} - - @debug '${startMarker}' + __json-stringify(( - color: $__color, - typography: $__typography, - density: $__density, - base: $__base - )) + '${endMarker}'; + ${jsonStringifyImplementation('__json-stringify', {meta, math, stringJoin})} + + @debug '${startMarker}' + __json-stringify($__results) + '${endMarker}'; `; return {prepend, append}; @@ -295,9 +264,9 @@ function getTokenExtractionCode( */ function jsonStringifyImplementation( name: string, - locals: {meta: string; list: string; math: string}, + locals: {meta: string; math: string; stringJoin: string}, ) { - const {meta, list, math} = locals; + const {meta, math, stringJoin} = locals; return ` @function ${name}($value) { @@ -306,16 +275,18 @@ function jsonStringifyImplementation( @if ($type == 'map') { $current: ''; - @each $key, $value in $value { - $pair: if($current == '', '', ', ') + '#{__serialize-key($key)}:#{${name}($value)}'; + @each $key, $inner in $value { + $pair: if($current == '', '', ', ') + '"#{${stringJoin}($key, '-')}":#{${name}($inner)}'; $current: $current + $pair; } @return '{#{$current}}'; - } @else if ($type == 'list' and ${list}.length($value) == 0) { - // A result of '()' can be either a list or a map. - // In a token context we treat it as an empty map. - @return '{}'; + } @else if ($type == 'list') { + $current: ''; + @each $inner in $value { + $current: $current + (if($current == '', '', ', ') + ${name}($inner)); + } + @return '[#{$current}]'; } @else if (($type == 'number' and ${math}.is-unitless($value)) or $type == 'bool' or $type == 'null') { // Primitive values should be preserved verbatim so they have the correct type when we // parse the JSON. Note: Sass considers both 10 and 10px as numbers. We only want to @@ -326,57 +297,9 @@ function jsonStringifyImplementation( @return '"' + ${meta}.inspect($value) + '"'; } } - - // Keys are joined with using '-' as a separator. - @function __serialize-key($value) { - $result: ''; - @each $part in $value { - $result: if($result == '', $part, '#{$result}-#{$part}'); - } - @return '"' + $result + '"'; - } `; } -/** Gets the namespace from an `@use` statement. */ -function extractNamespace(statement: string): string | null { - const openQuoteIndex = Math.max(statement.indexOf(`"`), statement.indexOf(`'`)); - const closeQuoteIndex = Math.max( - statement.indexOf(`"`, openQuoteIndex + 1), - statement.indexOf(`'`, openQuoteIndex + 1), - ); - const semicolonIndex = statement.lastIndexOf(';'); - - if (openQuoteIndex === -1 || closeQuoteIndex === -1 || semicolonIndex === -1) { - throw new Error(`Could not parse namespace from ${statement}.`); - } - - const asExpression = 'as '; - const asIndex = statement.indexOf(asExpression, closeQuoteIndex); - const withIndex = statement.indexOf(' with', asIndex); - - // If we found an ` as ` expression, we consider the rest of the text as the namespace. - if (asIndex > -1) { - return withIndex == -1 - ? statement.slice(asIndex + asExpression.length, semicolonIndex).trim() - : statement.slice(asIndex + asExpression.length, withIndex).trim(); - } - - const importPath = statement - .slice(openQuoteIndex + 1, closeQuoteIndex) - // Sass allows for leading underscores to be omitted and it technically supports .scss. - .replace(/^_|\.scss$/g, ''); - - // Built-in Sass imports look like `sass:map`. - if (importPath.startsWith('sass:')) { - return importPath.split('sass:')[1]; - } - - // Sass ignores `/index` and infers the namespace as the next segment in the path. - const fileName = basename(importPath); - return fileName === 'index' ? basename(join(fileName, '..')) : fileName; -} - /** * Gets the substring between two strings. * @param text String from which to extract the substring.