Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 menu & divider support (#…
Browse files Browse the repository at this point in the history
…28144)

* feat(material-experimental/theming): add M3 menu support

* feat(material-experimental/theming): add M3 divider support
  • Loading branch information
mmalerba authored Nov 17, 2023
1 parent cf868a5 commit f2d5644
Show file tree
Hide file tree
Showing 8 changed files with 287 additions and 135 deletions.
6 changes: 6 additions & 0 deletions src/dev-app/theme-m3.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,13 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)
html {
@include mat.card-theme($light-theme);
@include mat.checkbox-theme($light-theme);
@include mat.divider-theme($light-theme);
@include mat.form-field-theme($light-theme);
@include mat.grid-list-theme($light-theme);
@include mat.icon-theme($light-theme);
@include mat.input-theme($light-theme);
@include mat.list-theme($light-theme);
@include mat.menu-theme($light-theme);
@include mat.progress-bar-theme($light-theme);
@include mat.progress-spinner-theme($light-theme);
@include mat.radio-theme($light-theme);
Expand All @@ -68,11 +70,13 @@ html {

@include mat.card-color($dark-theme);
@include mat.checkbox-color($dark-theme);
@include mat.divider-color($dark-theme);
@include mat.form-field-color($dark-theme);
@include mat.grid-list-color($dark-theme);
@include mat.icon-color($dark-theme);
@include mat.input-color($dark-theme);
@include mat.list-color($dark-theme);
@include mat.menu-color($dark-theme);
@include mat.progress-bar-color($dark-theme);
@include mat.progress-spinner-color($dark-theme);
@include mat.radio-color($dark-theme);
Expand All @@ -97,11 +101,13 @@ html {
.demo-density-#{$scale} {
@include mat.card-density($scale-theme);
@include mat.checkbox-density($scale-theme);
@include mat.divider-density($scale-theme);
@include mat.form-field-density($scale-theme);
@include mat.grid-list-density($scale-theme);
@include mat.icon-density($scale-theme);
@include mat.input-density($scale-theme);
@include mat.list-density($scale-theme);
@include mat.menu-density($scale-theme);
@include mat.progress-bar-density($scale-theme);
@include mat.progress-spinner-density($scale-theme);
@include mat.radio-density($scale-theme);
Expand Down
105 changes: 70 additions & 35 deletions src/material-experimental/theming/_custom-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,17 @@
);
}

/// Generates custom tokens for the mat-divider.
/// @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-divider
@function divider($systems, $exclude-hardcoded) {
@return (
width: _hardcode(1px, $exclude-hardcoded),
color: map.get($systems, md-sys-color, outline-variant),
);
}

/// Generates custom tokens for the mat-form-field.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down Expand Up @@ -85,48 +96,30 @@
);
}

/// Generates custom tokens for the mat-toolbar.
/// Generates custom tokens for the mat-menu.
/// @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-toolbar
@function toolbar($systems, $exclude-hardcoded) {
/// @return {Map} A set of custom tokens for the mat-menu
@function menu($systems, $exclude-hardcoded) {
@return mat.private-merge-all(
_generate-typography-tokens($systems, title-text, title-large),
_generate-typography-tokens($systems, item-label-text, label-large),
(
container-background-color: map.get($systems, md-sys-color, surface),
container-text-color: map.get($systems, md-sys-color, on-surface),
container-shape: _hardcode(4px, $exclude-hardcoded),
item-label-text-color: map.get($systems, md-sys-color, on-surface),
item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
item-hover-state-layer-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, on-surface),
$alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
),
item-focus-state-layer-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, on-surface),
$alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
),
container-color: map.get($systems, md-sys-color, surface-container),
)
);
}

/// Generates custom tokens for the mat-slide-toggle.
/// @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-slide-toggle
@function slide-toggle($systems, $exclude-hardcoded) {
@return _generate-typography-tokens($systems, label-text, label-large);
}

/// Generates custom tokens for the mat-slider.
/// @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-slider
@function slider($systems, $exclude-hardcoded) {
@return (
value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
);
}

/// Generates custom tokens for the mat-snack-bar.
/// @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-snack-bar
@function snack-bar($systems, $exclude-hardcoded) {
@return (
button-color: map.get($systems, md-sys-color, inverse-primary),
);
}

/// Generates custom tokens for the mat-radio.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down Expand Up @@ -166,6 +159,34 @@
);
}

/// Generates custom tokens for the mat-slide-toggle.
/// @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-slide-toggle
@function slide-toggle($systems, $exclude-hardcoded) {
@return _generate-typography-tokens($systems, label-text, label-large);
}

/// Generates custom tokens for the mat-slider.
/// @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-slider
@function slider($systems, $exclude-hardcoded) {
@return (
value-indicator-opacity: _hardcode(1, $exclude-hardcoded),
);
}

/// Generates custom tokens for the mat-snack-bar.
/// @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-snack-bar
@function snack-bar($systems, $exclude-hardcoded) {
@return (
button-color: map.get($systems, md-sys-color, inverse-primary),
);
}

/// 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 Expand Up @@ -221,7 +242,7 @@
@return mat.private-merge-all(
_generate-typography-tokens($systems, label-text, title-small),
(
disabled-ripple-color: blue, // TODO(mmalerba): Figure out correct value.
disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
pagination-icon-color: map.get($systems, md-sys-color, on-surface),
inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
active-label-text-color: map.get($systems, md-sys-color, on-surface),
Expand Down Expand Up @@ -270,6 +291,20 @@
);
}

/// Generates custom tokens for the mat-toolbar.
/// @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-toolbar
@function toolbar($systems, $exclude-hardcoded) {
@return mat.private-merge-all(
_generate-typography-tokens($systems, title-text, title-large),
(
container-background-color: map.get($systems, md-sys-color, surface),
container-text-color: map.get($systems, md-sys-color, on-surface),
)
);
}

/// Generates custom tokens for the mat-tree.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
32 changes: 17 additions & 15 deletions src/material-experimental/theming/_m3-density.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,23 @@ $_density-tokens: (
(mdc, checkbox): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, circular-progress): (),
(mdc, elevated-card): (),
(mdc, filled-text-field): (),
(mdc, outlined-card): (),
(mdc, outlined-text-field): (),
(mdc, slider): (),
(mdc, snackbar): (),
(mdc, plain-tooltip): (),
(mdc, circular-progress): (),
(mdc, radio): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, linear-progress): (),
(mdc, list): (
list-item-one-line-container-height: (48px, 44px, 40px, 36px, 32px, 24px),
list-item-two-line-container-height: (64px, 60px, 56px, 52px, 48px, 48px),
list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
),
(mdc, outlined-card): (),
(mdc, outlined-text-field): (),
(mdc, plain-tooltip): (),
(mdc, radio): (
state-layer-size: (40px, 36px, 32px, 28px),
),
(mdc, slider): (),
(mdc, snackbar): (),
(mdc, switch): (),
(mdc, tab): (
container-height: (48px, 44px, 40px, 36px, 32px)
Expand All @@ -44,19 +44,17 @@ $_density-tokens: (

// Custom Angular Material tokens
(mat, card): (),
(mat, divider): (),
(mat, form-fild): (),
(mat, grid-list): (),
(mat, icon): (),
(mat, toolbar): (
standard-height: (64px, 60px, 56px, 52px),
mobile-height: (56px, 52px, 48px, 44px),
),
(mat, slider): (),
(mat, snack-bar): (),
(mat, menu): (),
(mat, radio): (),
(mat, ripple): (),
(mat, sidenav): (),
(mat, slide-toggle): (),
(mat, slider): (),
(mat, snack-bar): (),
(mat, sort): (),
(mat, stepper): (
header-height: (72px, 68px, 64px, 60px, 42px),
Expand All @@ -67,6 +65,10 @@ $_density-tokens: (
footer-container-height: (52px, 48px, 44px, 40px, 36px),
row-item-container-height: (52px, 48px, 44px, 40px, 36px),
),
(mat, toolbar): (
standard-height: (64px, 60px, 56px, 52px),
mobile-height: (56px, 52px, 48px, 44px),
),
(mat, tree): (
node-min-height: (48px, 44px, 40px, 36px, 28px),
),
Expand Down
61 changes: 45 additions & 16 deletions src/material-experimental/theming/_m3-palettes.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,34 @@
@use 'sass:color';
@use 'sass:map';
@use 'sass:math';

/// Estimate a hue using the given previous and next hues.
@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) {
$weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%;
@return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight);
}

// TODO(mmalerba): Remove this and add correct values for these hues.
/// The Material Design spec references some neutral hues that are not generated by
/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
/// by blending the nearest hues that are generated.
@function _patch-missing-hues($palette) {
$neutral: map.get($palette, neutral);
$palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));
$palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10));
$palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20));
$palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20));
$palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25));
$palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25));
$palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90));
$palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95));
$palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95));
$palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98));
@return $palette;
}

/// Blue color palette to be used as primary, secondary, or tertiary palette.
$blue-palette: (
$blue-palette: _patch-missing-hues((
0: #000000,
10: #00006e,
20: #0001ac,
Expand Down Expand Up @@ -52,10 +81,10 @@ $blue-palette: (
99: #fffbff,
100: #ffffff,
),
);
));

/// Cyan color palette to be used as primary, secondary, or tertiary palette.
$cyan-palette: (
$cyan-palette: _patch-missing-hues((
0: #000000,
10: #002020,
20: #003737,
Expand Down Expand Up @@ -108,10 +137,10 @@ $cyan-palette: (
99: #f4fefd,
100: #ffffff,
),
);
));

/// Green color palette to be used as primary, secondary, or tertiary palette.
$green-palette: (
$green-palette: _patch-missing-hues((
0: #000000,
10: #002200,
20: #013a00,
Expand Down Expand Up @@ -164,10 +193,10 @@ $green-palette: (
99: #f9fef1,
100: #ffffff,
),
);
));

/// Magenta color palette to be used as primary, secondary, or tertiary palette.
$magenta-palette: (
$magenta-palette: _patch-missing-hues((
0: #000000,
10: #380038,
20: #5b005b,
Expand Down Expand Up @@ -220,10 +249,10 @@ $magenta-palette: (
99: #fffbff,
100: #ffffff,
),
);
));

/// Orange color palette to be used as primary, secondary, or tertiary palette.
$orange-palette: (
$orange-palette: _patch-missing-hues((
0: #000000,
10: #311300,
20: #502400,
Expand Down Expand Up @@ -276,10 +305,10 @@ $orange-palette: (
99: #fffbff,
100: #ffffff,
),
);
));

/// Purple color palette to be used as primary, secondary, or tertiary palette.
$purple-palette: (
$purple-palette: _patch-missing-hues((
0: #000000,
10: #270057,
20: #42008a,
Expand Down Expand Up @@ -332,10 +361,10 @@ $purple-palette: (
99: #fffbff,
100: #ffffff,
),
);
));

/// Red color palette to be used as primary, secondary, or tertiary palette.
$red-palette: (
$red-palette: _patch-missing-hues((
0: #000000,
10: #410000,
20: #690100,
Expand Down Expand Up @@ -388,10 +417,10 @@ $red-palette: (
99: #fffbff,
100: #ffffff,
),
);
));

/// Yellow color palette to be used as primary, secondary, or tertiary palette.
$yellow-palette: (
$yellow-palette: _patch-missing-hues((
0: #000000,
10: #1d1d00,
20: #323200,
Expand Down Expand Up @@ -444,4 +473,4 @@ $yellow-palette: (
99: #fffbff,
100: #ffffff,
),
);
));
Loading

0 comments on commit f2d5644

Please sign in to comment.