Skip to content

Commit

Permalink
refactor(material/core): switch ripple to tokens theming API (angular…
Browse files Browse the repository at this point in the history
…#28042)

Switches the ripple element color to be controlled through a token.
  • Loading branch information
crisbeto authored Nov 2, 2023
1 parent c8ffcf5 commit 47341ac
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 21 deletions.
8 changes: 4 additions & 4 deletions src/material/core/_core-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -54,16 +54,16 @@
@include option-theme.typography($theme);
@include optgroup-theme.typography($theme);
@include pseudo-checkbox-theme.typography($theme);
// TODO(mmalerba): add typography mixin for this.
// @include ripple-theme.typography($config);
@include ripple-theme.typography($theme);
}

@mixin density($theme) {
@include option-theme.density($theme);
@include optgroup-theme.density($theme);
@include ripple-theme.density($theme);

// TODO(mmalerba): add density mixins for these.
// @include ripple-theme.density($density-scale);
// @include pseudo-checkbox-theme.density($density-scale);
// @include pseudo-checkbox-theme.density($theme);
}

// Mixin that renders all of the core styles that depend on the theme.
Expand Down
44 changes: 27 additions & 17 deletions src/material/core/ripple/_ripple-theme.scss
Original file line number Diff line number Diff line change
@@ -1,26 +1,30 @@
@use 'sass:meta';
@use '../tokens/m2/mat/ripple' as tokens-mat-ripple;
@use '../tokens/token-utils';
@use '../style/sass-utils';

@use '../theming/theming';
@use '../theming/inspection';

@mixin base($theme) {
// TODO(mmalerba): Move ripple base tokens here
}
@mixin base($theme) {}

// Colors for the ripple elements.
@mixin color($theme) {
$foreground-base: inspection.get-theme-color($theme, foreground, base);
$color-opacity: 0.1;
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-ripple.$prefix,
tokens-mat-ripple.get-color-tokens($theme));
}
}

.mat-ripple-element {
// If the ripple color is resolves to a color *type*, we can use it directly, otherwise
// (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
@if (meta.type-of($foreground-base) == color) {
background-color: rgba($foreground-base, $color-opacity);
}
@else {
background-color: $foreground-base;
opacity: $color-opacity;
}
@mixin typography($theme) {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-ripple.$prefix,
tokens-mat-ripple.get-typography-tokens($theme));
}
}

@mixin density($theme) {
@include sass-utils.current-selector-or-root() {
@include token-utils.create-token-values(tokens-mat-ripple.$prefix,
tokens-mat-ripple.get-density-tokens($theme));
}
}

Expand All @@ -30,5 +34,11 @@
@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);
}
}
}
8 changes: 8 additions & 0 deletions src/material/core/ripple/_ripple.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
@use '@angular/cdk';
@use '../tokens/m2/mat/ripple' as tokens-mat-ripple;
@use '../tokens/token-utils';

@mixin ripple() {
// The host element of an mat-ripple directive should always have a position of "absolute" or
Expand Down Expand Up @@ -35,6 +37,12 @@
// the ripples aren't clipped when inside the shadow DOM (see #24028).
transform: scale3d(0, 0, 0);

@include token-utils.use-tokens(
tokens-mat-ripple.$prefix, tokens-mat-ripple.get-token-slots()) {
// We have to emit a fallback value here, because some internal builds depend on it.
background-color: var(#{token-utils.get-token-variable(color)}, rgba(#000, 0.1));
}

// In high contrast mode the ripple is opaque, causing it to obstruct the content.
@include cdk.high-contrast(active, off) {
display: none;
Expand Down
49 changes: 49 additions & 0 deletions src/material/core/tokens/m2/mat/_ripple.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
@use 'sass:meta';
@use '../../token-utils';
@use '../../../theming/inspection';
@use '../../../style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mat, ripple);

// Tokens that can't be configured through Angular Material's current theming API,
// but may be in a future version of the theming API.
@function get-unthemable-tokens() {
@return ();
}

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
$base: inspection.get-theme-color($theme, foreground, base);

// If the base is a color *type* we can use it directly in the `rgba` call below.
// If it's anything else (e.g. a CSS variable) we fall back to using static colors
// since we don't have a way of adjusting the opacity.
$color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));

@return (
color: rgba($color, 0.1),
);
}

// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
@return ();
}

// Tokens that can be configured through Angular Material's density theming API.
@function get-density-tokens($theme) {
@return ();
}

// Combines the tokens generated by the above functions into a single map with placeholder values.
// This is used to create token slots.
@function get-token-slots() {
@return sass-utils.deep-merge-all(
get-unthemable-tokens(),
get-color-tokens(token-utils.$placeholder-color-config),
get-typography-tokens(token-utils.$placeholder-typography-config),
get-density-tokens(token-utils.$placeholder-density-config)
);
}

0 comments on commit 47341ac

Please sign in to comment.