Skip to content

Commit

Permalink
fix(material/theming): Align <component>-overrides behavior with <com…
Browse files Browse the repository at this point in the history 
…ponent>-extend-theme

Adds the same handling of ambiugously named tokens for the
<component>-overrides mixins that exists in the <component>-extend-theme
functions. Also adds similar validation logic and tests to verify this
behavior.
  • Loading branch information
@mmalerba
mmalerba committed Jul 8, 2024
1 parent ba0fc5a commit 2d469a8
Show file tree
Hide file tree
Showing 44 changed files with 679 additions and 343 deletions.
4 changes: 2 additions & 2 deletions src/material/autocomplete/_autocomplete-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@
}

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mat-autocomplete.$prefix,
namespace: tokens-mat-autocomplete.$prefix,
tokens: tokens-mat-autocomplete.get-token-slots(),
)
);
Expand Down
4 changes: 2 additions & 2 deletions src/material/badge/_badge-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,10 @@
/// 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(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mat-badge.$prefix,
namespace: tokens-mat-badge.$prefix,
tokens: tokens-mat-badge.get-token-slots(),
)
);
Expand Down
4 changes: 2 additions & 2 deletions src/material/bottom-sheet/_bottom-sheet-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@
}

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mat-bottom-sheet.$prefix,
namespace: tokens-mat-bottom-sheet.$prefix,
tokens: tokens-mat-bottom-sheet.get-token-slots(),
)
);
Expand Down
8 changes: 2 additions & 6 deletions src/material/button-toggle/_button-toggle-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,10 @@
@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(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mat-legacy-button-toggle.$prefix,
tokens: $legacy-tokens,
),
(
prefix: tokens-mat-standard-button-toggle.$prefix,
namespace: tokens-mat-standard-button-toggle.$prefix,
tokens: $standard-tokens,
)
);
Expand Down
26 changes: 17 additions & 9 deletions src/material/button/_button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -359,39 +359,47 @@
$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(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mdc-filled-button.$prefix,
namespace: tokens-mdc-filled-button.$prefix,
tokens: $mdc-filled-button-tokens,
prefix: 'filled-',
),
(
prefix: tokens-mat-filled-button.$prefix,
namespace: tokens-mat-filled-button.$prefix,
tokens: $mat-filled-button-tokens,
prefix: 'filled-',
),
(
prefix: tokens-mdc-outlined-button.$prefix,
namespace: tokens-mdc-outlined-button.$prefix,
tokens: $mdc-outlined-button-tokens,
prefix: 'outlined-',
),
(
prefix: tokens-mat-outlined-button.$prefix,
namespace: tokens-mat-outlined-button.$prefix,
tokens: $mat-outlined-button-tokens,
prefix: 'outlined-',
),
(
prefix: tokens-mdc-protected-button.$prefix,
namespace: tokens-mdc-protected-button.$prefix,
tokens: $mdc-protected-button-tokens,
prefix: 'protected-',
),
(
prefix: tokens-mat-protected-button.$prefix,
namespace: tokens-mat-protected-button.$prefix,
tokens: $mat-protected-button-tokens,
prefix: 'protected-',
),
(
prefix: tokens-mdc-text-button.$prefix,
namespace: tokens-mdc-text-button.$prefix,
tokens: $mdc-text-button-tokens,
prefix: 'text-',
),
(
prefix: tokens-mat-text-button.$prefix,
namespace: tokens-mat-text-button.$prefix,
tokens: $mat-text-button-tokens,
prefix: 'text-',
)
);
}
Expand Down
15 changes: 9 additions & 6 deletions src/material/button/_fab-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,27 +158,30 @@
/// 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(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mdc-fab.$prefix,
namespace: tokens-mdc-fab.$prefix,
tokens: tokens-mdc-fab.get-token-slots(),
),
(
prefix: tokens-mdc-fab-small.$prefix,
namespace: tokens-mdc-fab-small.$prefix,
tokens: tokens-mdc-fab-small.get-token-slots(),
prefix: 'small-',
),
(
prefix: tokens-mdc-extended-fab.$prefix,
namespace: tokens-mdc-extended-fab.$prefix,
tokens: tokens-mdc-extended-fab.get-token-slots(),
prefix: 'extended-',
),
(
prefix: tokens-mat-fab.$prefix,
namespace: tokens-mat-fab.$prefix,
tokens: tokens-mat-fab.get-token-slots(),
),
(
prefix: tokens-mat-fab-small.$prefix,
namespace: tokens-mat-fab-small.$prefix,
tokens: tokens-mat-fab-small.get-token-slots(),
prefix: 'small-',
)
);
}
Expand Down
6 changes: 3 additions & 3 deletions src/material/button/_icon-button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,14 +118,14 @@
}

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values(
@include token-utils.override-tokens(
$tokens,
(
prefix: tokens-mdc-icon-button.$prefix,
namespace: tokens-mdc-icon-button.$prefix,
tokens: tokens-mdc-icon-button.get-token-slots(),
),
(
prefix: tokens-mat-icon-button.$prefix,
namespace: tokens-mat-icon-button.$prefix,
tokens: tokens-mat-icon-button.get-token-slots(),
)
);
Expand Down
109 changes: 73 additions & 36 deletions src/material/card/_card-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,73 +12,104 @@
@mixin base($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
}
@else {
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-unthemable-tokens());
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-unthemable-tokens()
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-unthemable-tokens());
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-unthemable-tokens()
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix, tokens-mat-card.get-unthemable-tokens());
tokens-mat-card.$prefix,
tokens-mat-card.get-unthemable-tokens()
);
}
}
}

@mixin color($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
}
@else {
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-color-tokens($theme));
@include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-color-tokens($theme));
@include token-utils.create-token-values(tokens-mat-card.$prefix,
tokens-mat-card.get-color-tokens($theme));
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-color-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-color-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix,
tokens-mat-card.get-color-tokens($theme)
);
}
}
}

@mixin typography($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
}
@else {
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix, tokens-mdc-elevated-card.get-typography-tokens($theme));
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-typography-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix, tokens-mdc-outlined-card.get-typography-tokens($theme));
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-typography-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix, tokens-mat-card.get-typography-tokens($theme));
tokens-mat-card.$prefix,
tokens-mat-card.get-typography-tokens($theme)
);
}
}
}

@mixin density($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
}
@else {
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-density-tokens($theme));
@include token-utils.create-token-values(tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-density-tokens($theme));
@include token-utils.create-token-values(tokens-mat-card.$prefix,
tokens-mat-card.get-density-tokens($theme));
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix,
tokens-mdc-elevated-card.get-density-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix,
tokens-mdc-outlined-card.get-density-tokens($theme)
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix,
tokens-mat-card.get-density-tokens($theme)
);
}
}
}

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values(
@include token-utils.override-tokens(
$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()),
(
namespace: tokens-mat-card.$prefix,
tokens: tokens-mat-card.get-token-slots(),
),
(
namespace: tokens-mdc-elevated-card.$prefix,
tokens: tokens-mdc-elevated-card.get-token-slots(),
prefix: 'elevated-',
),
(
namespace: tokens-mdc-outlined-card.$prefix,
tokens: tokens-mdc-outlined-card.get-token-slots(),
prefix: 'outlined-',
)
);
}

Expand Down Expand Up @@ -107,8 +138,7 @@
@include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
}
@else {
} @else {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
Expand All @@ -125,13 +155,20 @@

@mixin _theme-from-tokens($tokens) {
@include validation.selector-defined(
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
);
@if ($tokens != ()) {
@include token-utils.create-token-values(
tokens-mdc-elevated-card.$prefix, map.get($tokens, tokens-mdc-elevated-card.$prefix));
tokens-mdc-elevated-card.$prefix,
map.get($tokens, tokens-mdc-elevated-card.$prefix)
);
@include token-utils.create-token-values(
tokens-mdc-outlined-card.$prefix, map.get($tokens, tokens-mdc-outlined-card.$prefix));
tokens-mdc-outlined-card.$prefix,
map.get($tokens, tokens-mdc-outlined-card.$prefix)
);
@include token-utils.create-token-values(
tokens-mat-card.$prefix, map.get($tokens, tokens-mat-card.$prefix));
tokens-mat-card.$prefix,
map.get($tokens, tokens-mat-card.$prefix)
);
}
}
Loading

0 comments on commit 2d469a8

Please sign in to comment.