Skip to content

Commit 3b3a9b4

Browse files
authoredMay 29, 2025··
refactor: add inverse-surface system token (angular#31235)
# Conflicts: # src/material/core/m2/_theming.scss
1 parent ee12bf5 commit 3b3a9b4

File tree

3 files changed

+14
-10
lines changed

3 files changed

+14
-10
lines changed
 

‎src/material/core/m2/_theming.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@
127127
surface: white,
128128
on-surface: rgba(black, 0.87),
129129
background: map.get(palette.$grey-palette, 50),
130+
inverse-surface: map.get(palette.$grey-palette, 800),
131+
inverse-on-surface: white,
130132
outline: rgba(black, 0.12),
131133
hover-state-layer-opacity: 0.04,
132134
focus-state-layer-opacity: 0.12,
@@ -149,6 +151,8 @@
149151
surface: map.get(palette.$grey-palette, 800),
150152
on-surface: white,
151153
background: #303030,
154+
inverse-surface: white,
155+
inverse-on-surface: rgba(black, 0.87),
152156
outline: rgba(white, 0.12),
153157
hover-state-layer-opacity: 0.04,
154158
focus-state-layer-opacity: 0.12,

‎src/material/snack-bar/_m2-snack-bar.scss

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '../core/theming/inspection';
2-
@use 'sass:meta';
3-
@use 'sass:color';
2+
@use '../core/tokens/m2-utils';
3+
@use 'sass:map';
44

55
// Tokens that can't be configured through Angular Material's current theming API,
66
// but may be in a future version of the theming API.
@@ -13,15 +13,12 @@
1313
// Tokens that can be configured through Angular Material's color theming API.
1414
@function get-color-tokens($theme) {
1515
$is-dark: inspection.get-theme-type($theme) == dark;
16+
$system: m2-utils.get-system($theme);
1617
$surface: inspection.get-theme-color($theme, system, surface);
1718

1819
@return (
19-
snack-bar-container-color: if(
20-
meta.type-of($surface) == color,
21-
color.mix(if($is-dark, #fff, #000), $surface, 80%),
22-
$surface),
23-
snack-bar-supporting-text-color:
24-
if(meta.type-of($surface) == color, rgba($surface, 0.87), $surface),
20+
snack-bar-container-color: map.get($system, inverse-surface),
21+
snack-bar-supporting-text-color: map.get($system, inverse-on-surface),
2522
snack-bar-button-color:
2623
if(
2724
$is-dark,

‎src/material/tooltip/_m2-tooltip.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use '../core/theming/inspection';
2+
@use '../core/tokens/m2-utils';
3+
@use 'sass:map';
24

35
// Tokens that can't be configured through Angular Material's current theming API,
46
// but may be in a future version of the theming API.
@@ -15,10 +17,11 @@
1517

1618
// Tokens that can be configured through Angular Material's color theming API.
1719
@function get-color-tokens($theme) {
20+
$system: m2-utils.get-system($theme);
1821

1922
@return (
20-
tooltip-container-color: inspection.get-theme-color($theme, background, tooltip),
21-
tooltip-supporting-text-color: #fff,
23+
tooltip-container-color: map.get($system, inverse-surface),
24+
tooltip-supporting-text-color: map.get($system, inverse-on-surface),
2225
);
2326
}
2427

0 commit comments

Comments
 (0)
Please sign in to comment.