Skip to content

feat(material/theming): Disambiguate token names in theme overrides #29859

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 1 commit into from
Oct 11, 2024
Merged

feat(material/theming): Disambiguate token names in theme overrides #29859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
51 changes: 30 additions & 21 deletions src/material/autocomplete/_autocomplete-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,64 +10,70 @@
@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-mat-autocomplete.$prefix,
tokens-mat-autocomplete.get-unthemable-tokens());
@include token-utils.create-token-values(
tokens-mat-autocomplete.$prefix,
tokens-mat-autocomplete.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-mat-autocomplete.$prefix,
tokens-mat-autocomplete.get-color-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-autocomplete.$prefix,
tokens-mat-autocomplete.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-mat-autocomplete.$prefix,
tokens-mat-autocomplete.get-typography-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-autocomplete.$prefix,
tokens-mat-autocomplete.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-mat-autocomplete.$prefix,
tokens-mat-autocomplete.get-density-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-autocomplete.$prefix,
tokens-mat-autocomplete.get-density-tokens($theme)
);
}
}
}

@mixin overrides($tokens: ()) {
@include token-utils.batch-create-token-values(
$tokens,
(prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
(
namespace: 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 {
@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 @@ -84,9 +90,12 @@

@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-mat-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
tokens-mat-autocomplete.$prefix,
map.get($tokens, tokens-mat-autocomplete.$prefix)
);
}
}
52 changes: 31 additions & 21 deletions src/material/badge/_badge-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,12 @@
@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-mat-badge.$prefix,
tokens-mat-badge.get-unthemable-tokens());
@include token-utils.create-token-values(
tokens-mat-badge.$prefix,
tokens-mat-badge.get-unthemable-tokens()
);
}
}
}
Expand All @@ -30,21 +31,26 @@
@mixin color($theme, $options...) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
}
@else {
} @else {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.get-color-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-badge.$prefix,
tokens-mat-badge.get-color-tokens($theme)
);
}

.mat-badge-accent {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent));
@include token-utils.create-token-values(
tokens-mat-badge.$prefix,
tokens-mat-badge.private-get-color-palette-color-tokens($theme, accent)
);
}

.mat-badge-warn {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
@include token-utils.create-token-values(
tokens-mat-badge.$prefix,
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn)
);
}
}
}
Expand All @@ -54,11 +60,12 @@
@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-mat-badge.$prefix,
tokens-mat-badge.get-typography-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-badge.$prefix,
tokens-mat-badge.get-typography-tokens($theme)
);
}
}
}
Expand All @@ -68,16 +75,19 @@
@mixin density($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
} @else {
}
@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()),
(
namespace: tokens-mat-badge.$prefix,
tokens: tokens-mat-badge.get-token-slots(),
)
);
}

Expand All @@ -90,8 +100,7 @@
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
}
@else {
} @else {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
Expand All @@ -108,7 +117,8 @@

@mixin _theme-from-tokens($tokens, $options...) {
@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'
);
$mat-badge-tokens: token-utils.get-tokens-for($tokens, tokens-mat-badge.$prefix, $options...);
@include token-utils.create-token-values(tokens-mat-badge.$prefix, $mat-badge-tokens);
}
42 changes: 25 additions & 17 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 @@ -10,59 +10,64 @@
@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-mat-bottom-sheet.$prefix, tokens-mat-bottom-sheet.get-unthemable-tokens());
tokens-mat-bottom-sheet.$prefix,
tokens-mat-bottom-sheet.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-mat-bottom-sheet.$prefix,
tokens-mat-bottom-sheet.get-color-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-bottom-sheet.$prefix,
tokens-mat-bottom-sheet.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-mat-bottom-sheet.$prefix,
tokens-mat-bottom-sheet.get-typography-tokens($theme));
@include token-utils.create-token-values(
tokens-mat-bottom-sheet.$prefix,
tokens-mat-bottom-sheet.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 {}
}

@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()),
(
namespace: 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 {
@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 @@ -79,9 +84,12 @@

@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-mat-bottom-sheet.$prefix, map.get($tokens, tokens-mat-bottom-sheet.$prefix));
tokens-mat-bottom-sheet.$prefix,
map.get($tokens, tokens-mat-bottom-sheet.$prefix)
);
}
}
Loading
Loading