Skip to content

feat(multiple): token overrides api #28910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 22, 2024
Merged

feat(multiple): token overrides api #28910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5ab0897
feat(multiple): token overrides api
wagnermaciel Apr 18, 2024
9d5592f
fixup! feat(multiple): token overrides api
wagnermaciel Apr 19, 2024
d235569
fixup! feat(multiple): token overrides api
wagnermaciel Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 48 additions & 41 deletions src/material/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,92 +38,99 @@

// 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;
7 changes: 7 additions & 0 deletions src/material/autocomplete/_autocomplete-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,13 @@
}
}

@mixin overrides($tokens: ()) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. We should expose these in the _index.scss, otherwise they're not usable.
  2. Should we document this somewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the mixins to _index.scss. I can add a section on our theming.md, but should that be done in a follow-up PR or as part of this PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with doing the docs in a follow-up.

@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 {
Expand Down
9 changes: 9 additions & 0 deletions src/material/badge/_badge-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
7 changes: 7 additions & 0 deletions src/material/bottom-sheet/_bottom-sheet-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 12 additions & 0 deletions src/material/button-toggle/_button-toggle-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
25 changes: 25 additions & 0 deletions src/material/button/_button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
13 changes: 13 additions & 0 deletions src/material/button/_fab-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
8 changes: 8 additions & 0 deletions src/material/button/_icon-button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions src/material/card/_card-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
10 changes: 10 additions & 0 deletions src/material/chips/_chips-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
17 changes: 17 additions & 0 deletions src/material/core/_core-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions src/material/core/option/_optgroup-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
9 changes: 9 additions & 0 deletions src/material/core/option/_option-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
7 changes: 7 additions & 0 deletions src/material/core/ripple/_ripple-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
13 changes: 13 additions & 0 deletions src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
Loading