Skip to content

refactor: remove safe-color-change mixin #31219

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.

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 1 commit into from
May 26, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 1 addition & 3 deletions src/material/button-toggle/_m2-button-toggle.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@use 'sass:map';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/style/sass-utils';
@use '../core/tokens/m2-utils';

// Tokens that can't be configured through Angular Material's current theming API,
Expand Down Expand Up @@ -47,8 +46,7 @@
button-toggle-selected-state-background-color:
inspection.get-theme-color($theme, background, selected-button),
button-toggle-selected-state-text-color: inspection.get-theme-color($theme, system, on-surface),
button-toggle-state-layer-color: sass-utils.safe-color-change(
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
button-toggle-state-layer-color: inspection.get-theme-color($theme, background, base),
button-toggle-text-color: inspection.get-theme-color($theme, system, on-surface),
);
}
Expand Down
34 changes: 17 additions & 17 deletions src/material/button/_m2-button.scss
Original file line number Diff line number Diff line change
Expand Up @@ -48,61 +48,61 @@
@return (
button-filled-container-color: map.get($system, surface),
button-filled-disabled-container-color:
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
inspection.get-theme-color($theme, foreground, base, 0.12),
button-filled-disabled-label-text-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-outlined-disabled-label-text-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
button-outlined-disabled-outline-color: $outline,
button-outlined-disabled-state-layer-color:
inspection.get-theme-color($theme, foreground, base),
button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-outlined-outline-color: $outline,
button-outlined-pressed-state-layer-opacity:
map.get($system, pressed-state-layer-opacity),
button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-protected-container-color: map.get($system, surface),
button-protected-disabled-container-color:
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
inspection.get-theme-color($theme, foreground, base, 0.12),
button-protected-disabled-label-text-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
button-protected-disabled-state-layer-color:
inspection.get-theme-color($theme, foreground, base),
button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-protected-pressed-state-layer-opacity:
map.get($system, pressed-state-layer-opacity),
button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-text-disabled-label-text-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-container-color: map.get($system, surface),
button-tonal-disabled-container-color:
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
inspection.get-theme-color($theme, foreground, base, 0.12),
button-tonal-disabled-label-text-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
Expand All @@ -112,11 +112,11 @@
// Generates the mapping for the properties that change based on the button palette color.
@function private-get-color-palette-color-tokens($theme, $palette-name) {
$color: inspection.get-theme-color($theme, $palette-name);
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$container-color: inspection.get-theme-color($theme, $palette-name, default);
$label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
$label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$ripple-opacity: 0.1;

// outlined-outline-color:
Expand Down Expand Up @@ -148,11 +148,11 @@
button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
button-tonal-label-text-color:
inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
inspection.get-theme-color($theme, $palette-name, default-contrast),
button-tonal-ripple-color:
inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
button-tonal-state-layer-color:
inspection.get-theme-color($theme, $palette-name, default-contrast, 1),
inspection.get-theme-color($theme, $palette-name, default-contrast),
);
}

Expand Down
12 changes: 6 additions & 6 deletions src/material/button/_m2-fab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@
@return (
fab-container-color: map.get($system, surface),
fab-disabled-state-container-color:
inspection.get-theme-color($theme, background, disabled-button, 0.12),
inspection.get-theme-color($theme, foreground, base, 0.12),
fab-disabled-state-foreground-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
Expand All @@ -46,9 +46,9 @@
fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
fab-small-container-color: map.get($system, surface),
fab-small-disabled-state-container-color:
inspection.get-theme-color($theme, background, disabled-button, 0.12),
inspection.get-theme-color($theme, foreground, base, 0.12),
fab-small-disabled-state-foreground-color:
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
inspection.get-theme-color($theme, foreground, base, if($is-dark, 0.5, 0.38)),
fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
Expand All @@ -63,8 +63,8 @@
// Generates the mapping for the properties that change based on the FAB palette color.
@function private-get-color-palette-color-tokens($theme, $palette-name) {
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
$foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);

@return (
Expand Down
9 changes: 3 additions & 6 deletions src/material/checkbox/_m2-checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@use '../core/tokens/m2-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';
@use '../core/style/sass-utils';
@use '../core/m2/theming' as m2-theming;
@use '../core/m2/palette' as m2-palette;

Expand All @@ -29,15 +28,13 @@
$is-dark: inspection.get-theme-type($theme) == dark;
$foreground-base: inspection.get-theme-color($theme, foreground, base);
$palette-default: inspection.get-theme-color($theme, $palette-name, default);
$disabled-color: sass-utils.safe-color-change(
inspection.get-theme-color($theme, foreground, base), $alpha: 0.38);
$disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
$palette-selected: inspection.get-theme-color($theme, $palette-name);
$border-color: sass-utils.safe-color-change(
inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
$active-border-color:
m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
$selected-checkmark-color:
inspection.get-theme-color($theme, $palette-name, default-contrast, 1);
inspection.get-theme-color($theme, $palette-name, default-contrast);

$tokens: (
checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
Expand Down
12 changes: 7 additions & 5 deletions src/material/core/m2/_theming.scss
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,16 @@
// might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
$color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));

@if (meta.type-of($color) != color) {
// If the $color resolved to something different from a color (e.g. a CSS variable),
// we can't apply the opacity anyway so we return the value as is, otherwise Sass can
// throw an error or output something invalid.
@if ($opacity == null) {
@return $color;
}

@return rgba($color, if($opacity == null, color.opacity($color), $opacity));
@if (meta.type-of($color) != color) {
$opacity: ($opacity * 100) + '%';
@return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
}

@return rgba($color, $opacity);
}

// Validates the specified theme by ensuring that the optional color config defines
Expand Down
6 changes: 2 additions & 4 deletions src/material/core/style/_form-common.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use '../theming/inspection';
@use './sass-utils';

// Renders a gradient for showing the dashed line when the input is disabled.
// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
Expand All @@ -15,7 +14,6 @@
// becoming out of sync since these colors aren't in a palette.
@function private-control-placeholder-color($theme) {
$is-dark-theme: inspection.get-theme-type($theme) == dark;
@return sass-utils.safe-color-change(
inspection.get-theme-color($theme, foreground, secondary-text),
$alpha: if($is-dark-theme, 0.5, 0.42));
@return
inspection.get-theme-color($theme, foreground, base, if($is-dark-theme, 0.5, 0.42));
}
29 changes: 0 additions & 29 deletions src/material/core/style/_sass-utils.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use 'sass:color';
@use 'sass:string';
@use 'sass:map';
@use 'sass:meta';
Expand Down Expand Up @@ -51,34 +50,6 @@ $use-system-typography-variables: false;
@return $result;
}

/// A version of the Sass `color.change` function that is safe ot use with CSS variables.
@function safe-color-change($color, $args...) {
$args: meta.keywords($args);
$use-color-mix: $use-system-color-variables or
(is-css-var-name($color) and string.index($color, '--mat') == 1);
@if (meta.type-of($color) == 'color') {
@return color.change($color, $args...);
}
@else if ($color != null and
map.get($args, alpha) != null and $use-color-mix) {
$opacity: map.get($args, alpha);
@if meta.type-of($opacity) == number {
$opacity: ($opacity * 100) + '%';
}

@if (is-css-var-name($opacity)) {
$opacity: calc(var($opacity) * 100%);
}

@if (is-css-var-name($color)) {
$color: var($color);
}

@return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
}
@return $color;
}

// Returns whether the $value is a CSS variable name based on whether it's a string prefixed
// by "--".
@function is-css-var-name($value) {
Expand Down
4 changes: 2 additions & 2 deletions src/material/datepicker/_m2-datepicker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ $private-default-overlap-color: #a8dab5;
datepicker-toggle-icon-color: $inactive-icon-color,
datepicker-calendar-body-label-text-color: $secondary-text-color,
datepicker-calendar-period-button-text-color:
inspection.get-theme-color($theme, foreground, text, 1),
inspection.get-theme-color($theme, foreground, base),
datepicker-calendar-period-button-icon-color: $inactive-icon-color,
datepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
datepicker-calendar-header-divider-color: inspection.get-theme-color($theme, system, outline),
Expand Down Expand Up @@ -140,7 +140,7 @@ $private-default-overlap-color: #a8dab5;
@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
$palette-color: inspection.get-theme-color($theme, $palette-name);
$default-contrast: inspection.get-theme-color($theme, $palette-name, default-contrast);
$active-background-color: sass-utils.safe-color-change($palette-color, $alpha: 0.3);
$active-background-color: inspection.get-theme-color($theme, $palette-name, 0.3);
$active-disabled-color: null;

@if (meta.type-of($palette-color) == color) {
Expand Down
7 changes: 2 additions & 5 deletions src/material/dialog/_m2-dialog.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use '../core/style/elevation';
@use '../core/style/sass-utils';
@use '../core/theming/inspection';

// Tokens that can't be configured through Angular Material's current theming API,
Expand All @@ -25,12 +24,10 @@
// 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;
$text-base: inspection.get-theme-color($theme, foreground, text, 1);

@return (
dialog-container-color: inspection.get-theme-color($theme, system, surface),
dialog-subhead-color: sass-utils.safe-color-change($text-base, $alpha: 0.87),
dialog-supporting-text-color: sass-utils.safe-color-change($text-base, $alpha: 0.6),
dialog-subhead-color: inspection.get-theme-color($theme, foreground, base, 0.87),
dialog-supporting-text-color: inspection.get-theme-color($theme, foreground, base, 0.6),
);
}

Expand Down
Loading
Loading