Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 sidenav support
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Nov 16, 2023
1 parent 38e4ff7 commit 01e5793
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 23 deletions.
3 changes: 3 additions & 0 deletions src/dev-app/theme-m3.scss
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
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
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
14 changes: 7 additions & 7 deletions src/material-experimental/theming/_m3-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -192,11 +192,6 @@
mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, list),
mdc-tokens.md-comp-list-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, outlined-card),
mdc-tokens.md-comp-outlined-card-values($systems, $exclude-hardcoded),
Expand Down Expand Up @@ -274,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 @@ -357,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
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
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 {}
}

@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));
}
}

0 comments on commit 01e5793

Please sign in to comment.