Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 autocomplete, badge, and …
Browse files Browse the repository at this point in the history
…bottom-sheet support (#28177)

(cherry picked from commit 85c658f)
  • Loading branch information
mmalerba committed Nov 23, 2023
1 parent c2a8129 commit 3d118c6
Show file tree
Hide file tree
Showing 8 changed files with 244 additions and 67 deletions.
9 changes: 9 additions & 0 deletions src/dev-app/theme-m3.scss
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@ $dark-theme: matx.define-theme(map.set($m3-base-config, color, theme-type, dark)

// Emit default theme styles.
html {
@include mat.autocomplete-theme($light-theme);
@include mat.badge-theme($light-theme);
@include mat.bottom-sheet-theme($light-theme);
@include mat.card-theme($light-theme);
@include mat.checkbox-theme($light-theme);
@include mat.datepicker-theme($light-theme);
Expand Down Expand Up @@ -76,6 +79,9 @@ html {
background: black;
color: white;

@include mat.autocomplete-color($dark-theme);
@include mat.badge-color($dark-theme);
@include mat.bottom-sheet-color($dark-theme);
@include mat.card-color($dark-theme);
@include mat.checkbox-color($dark-theme);
@include mat.datepicker-color($dark-theme);
Expand Down Expand Up @@ -113,6 +119,9 @@ html {
$scale-theme: matx.define-theme(map.set($m3-base-config, density, scale, $scale));

.demo-density-#{$scale} {
@include mat.autocomplete-density($scale-theme);
@include mat.badge-density($scale-theme);
@include mat.bottom-sheet-density($scale-theme);
@include mat.card-density($scale-theme);
@include mat.checkbox-density($scale-theme);
@include mat.datepicker-density($scale-theme);
Expand Down
46 changes: 46 additions & 0 deletions src/material-experimental/theming/_custom-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,52 @@
@return $result;
}

/// Generates custom tokens for the mat-autocomplete.
/// @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-autocomplete
@function autocomplete($systems, $exclude-hardcoded) {
@return (
background-color: map.get($systems, md-sys-color, surface-container),
);
}

/// Generates custom tokens for the mat-badge.
/// @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-badge
@function badge($systems, $exclude-hardcoded) {
@return (
background-color: map.get($systems, md-sys-color, error),
text-color: map.get($systems, md-sys-color, on-error),
disabled-state-background-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, error),
$alpha: 0.38,
),
disabled-state-text-color: map.get($systems, md-sys-color, on-error),
text-font: map.get($systems, md-sys-typescale, label-small-font),
text-size: map.get($systems, md-sys-typescale, label-small-size),
text-weight: map.get($systems, md-sys-typescale, label-small-weight),
small-size-text-size: _hardcode(0, $exclude-hardcoded),
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
);
}

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

/// Generates custom tokens for the mat-card.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
Expand Down
3 changes: 3 additions & 0 deletions src/material-experimental/theming/_m3-density.scss
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ $_density-tokens: (
(mdc, tab-indicator): (),

// Custom Angular Material tokens
(mat, autocomplete): (),
(mat, badge): (),
(mat, bottom-sheet): (),
(mat, card): (),
(mat, datepicker): (),
(mat, divider): (),
Expand Down
15 changes: 15 additions & 0 deletions src/material-experimental/theming/_m3-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,21 @@
custom-tokens.tab-indicator($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, autocomplete),
custom-tokens.autocomplete($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, badge),
custom-tokens.badge($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, bottom-sheet),
custom-tokens.bottom-sheet($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, card),
custom-tokens.card($systems, $exclude-hardcoded),
Expand Down
61 changes: 47 additions & 14 deletions src/material/autocomplete/_autocomplete-theme.scss
Original file line number Diff line number Diff line change
@@ -1,34 +1,67 @@
@use 'sass:map';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/typography/typography';
@use '../core/style/sass-utils';
@use '../core/tokens/token-utils';
@use '../core/tokens/m2/mat/autocomplete' as tokens-mat-autocomplete;

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

@mixin color($theme) {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-autocomplete.$prefix,
tokens-mat-autocomplete.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-autocomplete.$prefix,
tokens-mat-autocomplete.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-autocomplete') {
@include base($theme);
@if inspection.theme-has($theme, color) {
@include color($theme);
}
@if inspection.theme-has($theme, density) {
@include density($theme);
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($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-autocomplete.$prefix, map.get($tokens, tokens-mat-autocomplete.$prefix));
}
}
102 changes: 67 additions & 35 deletions src/material/badge/_badge-theme.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use 'sass:color';
@use 'sass:map';
@use 'sass:math';
@use '@angular/cdk';

@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/typography/typography';
Expand Down Expand Up @@ -164,57 +164,89 @@ $_emit-fallback-vars: true;
}
}

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

@mixin color($theme) {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.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-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));
}
.mat-badge-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));
.mat-badge-warn {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.private-get-color-palette-color-tokens($theme, warn));
}
}
}

@mixin typography($theme) {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-badge.$prefix,
tokens-mat-badge.get-typography-tokens($theme));
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
}
@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));
}
}
}

@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-badge') {
// Try to reduce the number of times that the structural styles are emitted.
@if not $_badge-structure-emitted {
@include _badge-structure;

// Only flip the flag if the mixin is included at the top level. Otherwise the first
// inclusion might be inside of a theme class which will exclude the structural styles
// from all other themes.
@if not & {
$_badge-structure-emitted: true !global;
}
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
}
@else {
// Try to reduce the number of times that the structural styles are emitted.
@if not $_badge-structure-emitted {
@include _badge-structure;

// Only flip the flag if the mixin is included at the top level. Otherwise the first
// inclusion might be inside of a theme class which will exclude the structural styles
// from all other themes.
@if not & {
$_badge-structure-emitted: true !global;
}
}

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

0 comments on commit 3d118c6

Please sign in to comment.