Skip to content

feat(material-experimental/theming): add M3 sidenav support #28125

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 2 commits into from
Nov 16, 2023
Merged

feat(material-experimental/theming): add M3 sidenav support #28125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38e4ff7
feat(material-experimental/theming): add M3 list support
mmalerba Oct 3, 2023
01e5793
feat(material-experimental/theming): add M3 sidenav support
mmalerba Nov 14, 2023
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
3 changes: 3 additions & 0 deletions src/dev-app/theme-m3.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ html {
@include mat.progress-spinner-theme($light-theme);
@include mat.radio-theme($light-theme);
@include mat.ripple-theme($light-theme);
@include mat.sidenav-theme($light-theme);
@include mat.slide-toggle-theme($light-theme);
@include mat.slider-theme($light-theme);
@include mat.snack-bar-theme($light-theme);
Expand Down Expand Up @@ -76,6 +77,7 @@ html {
@include mat.progress-spinner-color($dark-theme);
@include mat.radio-color($dark-theme);
@include mat.ripple-color($dark-theme);
@include mat.sidenav-color($dark-theme);
@include mat.slide-toggle-color($dark-theme);
@include mat.slider-color($dark-theme);
@include mat.snack-bar-color($dark-theme);
Expand Down Expand Up @@ -103,6 +105,7 @@ html {
@include mat.progress-bar-density($scale-theme);
@include mat.progress-spinner-density($scale-theme);
@include mat.radio-density($scale-theme);
@include mat.sidenav-density($scale-theme);
@include mat.slide-toggle-density($scale-theme);
@include mat.slider-density($scale-theme);
@include mat.snack-bar-density($scale-theme);
Expand Down
17 changes: 17 additions & 0 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,23 @@
);
}

/// Generates custom tokens for the mat-sidenav.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-sidenav
@function sidenav($systems, $exclude-hardcoded) {
@return (
container-shape: 16px,
container-divider-color: map.get($systems, md-sys-color, outline),
container-background-color: map.get($systems, md-sys-color, surface),
container-text-color: map.get($systems, md-sys-color, on-surface-variant),
content-background-color: _hardcode(inherit, $exclude-hardcoded),
content-text-color: _hardcode(inherit, $exclude-hardcoded),
scrim-color: mat.private-safe-color-change(
map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
);
}

/// Generates custom tokens for the mat-sort.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
1 change: 1 addition & 0 deletions src/material-experimental/theming/_m3-density.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ $_density-tokens: (
(mat, snack-bar): (),
(mat, radio): (),
(mat, ripple): (),
(mat, sidenav): (),
(mat, slide-toggle): (),
(mat, sort): (),
(mat, stepper): (
Expand Down
9 changes: 7 additions & 2 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,11 @@
custom-tokens.icon($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, sidenav),
custom-tokens.sidenav($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, toolbar),
custom-tokens.toolbar($systems, $exclude-hardcoded),
Expand Down Expand Up @@ -352,11 +357,11 @@
$sys-color: if($type == dark,
mdc-tokens.md-sys-color-values-dark($ref),
mdc-tokens.md-sys-color-values-light($ref));
@return _generate-tokens((
@return _generate-tokens(map.merge($ref, (
md-sys-color: $sys-color,
md-sys-elevation: mdc-tokens.md-sys-elevation-values(),
md-sys-state: mdc-tokens.md-sys-state-values(),
));
)));
}

/// Generates a set of namespaced color tokens for all components.
Expand Down
2 changes: 2 additions & 0 deletions src/material/core/tokens/m2/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
@use './mat/icon' as tokens-mat-icon;
@use './mat/radio' as tokens-mat-radio;
@use './mat/ripple' as tokens-mat-ripple;
@use './mat/sidenav' as tokens-mat-sidenav;
@use './mat/slide-toggle' as tokens-mat-slide-toggle;
@use './mat/slider' as tokens-mat-slider;
@use './mat/snack-bar' as tokens-mat-snack-bar;
Expand Down Expand Up @@ -84,6 +85,7 @@
_get-tokens-for-module($theme, tokens-mat-icon),
_get-tokens-for-module($theme, tokens-mat-radio),
_get-tokens-for-module($theme, tokens-mat-ripple),
_get-tokens-for-module($theme, tokens-mat-sidenav),
_get-tokens-for-module($theme, tokens-mat-slide-toggle),
_get-tokens-for-module($theme, tokens-mat-slider),
_get-tokens-for-module($theme, tokens-mat-snack-bar),
Expand Down
65 changes: 49 additions & 16 deletions src/material/sidenav/_sidenav-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,71 @@
@use 'sass:map';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/tokens/m2/mat/sidenav' as tokens-mat-sidenav;
@use '../core/tokens/token-utils';
@use '../core/style/sass-utils';

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

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

@mixin typography($theme) {}
@mixin typography($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
}
@else {}
}

@mixin density($theme) {}
@mixin density($theme) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
}
@else {}
Copy link
Member

Choose a reason for hiding this comment

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

nit: should we remove the empty @else?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I left it to make it clear where M2 styles should go, but if we don't like it we can make a PR to clean it up across all components

}

@mixin theme($theme) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
}
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
@else {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if inspection.theme-has($theme, density) {
@include density($theme);
}
@if inspection.theme-has($theme, typography) {
@include typography($theme);
}
}
}
}

@mixin _theme-from-tokens($tokens) {
@if ($tokens != ()) {
@include token-utils.create-token-values(
tokens-mat-sidenav.$prefix, map.get($tokens, tokens-mat-sidenav.$prefix));
}
}