Skip to content

Commit 936d179

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: remove badge component token values from theme (angular#31099)
Co-authored-by: Andrew Seguin <[email protected]>
1 parent d27f793 commit 936d179

15 files changed

+375
-368
lines changed

‎src/material/badge/_badge-theme.scss‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
@use 'sass:color';
2-
@use '../core/theming/theming';
1+
@use '../core/style/sass-utils';
32
@use '../core/theming/inspection';
3+
@use '../core/theming/theming';
44
@use '../core/theming/validation';
5+
@use '../core/tokens/token-utils';
56
@use '../core/typography/typography';
67
@use './m2-badge';
7-
@use '../core/tokens/token-utils';
8-
@use '../core/style/sass-utils';
8+
@use './m3-badge';
9+
@use 'sass:color';
10+
@use 'sass:map';
911

1012
/// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
1113
/// for the mat-badge.
1214
/// @param {Map} $theme The theme to generate base styles for.
1315
@mixin base($theme) {
1416
@if inspection.get-theme-version($theme) == 1 {
15-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
17+
@include token-utils.create-token-values(
18+
m3-badge.$prefix,
19+
map.get(m3-badge.get-tokens($theme), base));
1620
} @else {
1721
@include sass-utils.current-selector-or-root() {
1822
@include token-utils.create-token-values-mixed(
@@ -25,12 +29,14 @@
2529

2630
/// Outputs color theme styles for the mat-badge.
2731
/// @param {Map} $theme The theme to generate color styles for.
28-
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
29-
/// $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
30-
/// or error (If not specified, default error color will be used).
31-
@mixin color($theme, $options...) {
32+
/// @param {String} $color-variant The color variant to use for
33+
/// the badge: primary, secondary, tertiary, or error (If not specified,
34+
/// default error color will be used).
35+
@mixin color($theme, $color-variant: null) {
3236
@if inspection.get-theme-version($theme) == 1 {
33-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
37+
@include token-utils.create-token-values(
38+
m3-badge.$prefix,
39+
map.get(m3-badge.get-tokens($theme, $color-variant), color));
3440
} @else {
3541
@include sass-utils.current-selector-or-root() {
3642
@include token-utils.create-token-values-mixed(
@@ -59,7 +65,9 @@
5965
/// @param {Map} $theme The theme to generate typography styles for.
6066
@mixin typography($theme) {
6167
@if inspection.get-theme-version($theme) == 1 {
62-
@include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
68+
@include token-utils.create-token-values(
69+
m3-badge.$prefix,
70+
map.get(m3-badge.get-tokens($theme), typography));
6371
} @else {
6472
@include sass-utils.current-selector-or-root() {
6573
@include token-utils.create-token-values-mixed(
@@ -74,7 +82,9 @@
7482
/// @param {Map} $theme The theme to generate density styles for.
7583
@mixin density($theme) {
7684
@if inspection.get-theme-version($theme) == 1 {
77-
// There are no M3 density tokens for this component
85+
@include token-utils.create-token-values(
86+
m3-badge.$prefix,
87+
map.get(m3-badge.get-tokens($theme), density));
7888
} @else {
7989
}
8090
}
@@ -100,10 +110,13 @@
100110
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
101111
/// $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
102112
/// or error (If not specified, default error color will be used).
103-
@mixin theme($theme, $options...) {
113+
@mixin theme($theme, $color-variant: null) {
104114
@include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
105115
@if inspection.get-theme-version($theme) == 1 {
106-
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
116+
@include base($theme);
117+
@include color($theme, $color-variant);
118+
@include density($theme);
119+
@include typography($theme);
107120
} @else {
108121
@include base($theme);
109122
@if inspection.theme-has($theme, color) {

‎src/material/badge/_m3-badge.scss‎

Lines changed: 39 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,53 @@
11
@use 'sass:map';
2-
@use '../core/style/sass-utils';
32
@use '../core/tokens/m3-utils';
43

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

87
/// Generates custom tokens for the mat-badge.
9-
/// @param {Map} $systems The MDC system tokens
10-
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
11-
/// @param {Map} $token-slots Possible token slots
12-
/// @return {Map} A set of custom tokens for the mat-badge
13-
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
14-
$tokens: (
15-
background-color: map.get($systems, md-sys-color, error),
16-
text-color: map.get($systems, md-sys-color, on-error),
17-
disabled-state-background-color: sass-utils.safe-color-change(
18-
map.get($systems, md-sys-color, error),
19-
$alpha: 0.38),
20-
disabled-state-text-color: map.get($systems, md-sys-color, on-error),
21-
text-font: map.get($systems, md-sys-typescale, label-small-font),
22-
text-size: map.get($systems, md-sys-typescale, label-small-size),
23-
text-weight: map.get($systems, md-sys-typescale, label-small-weight),
24-
small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
25-
container-shape: map.get($systems, md-sys-shape, corner-full),
26-
container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
27-
line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
28-
legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
29-
legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
30-
small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
31-
small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
32-
container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
33-
small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
34-
container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
35-
small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
36-
container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
37-
small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
38-
39-
// This size isn't in the M3 spec so we emit the same values as for `medium`.
40-
large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
41-
large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
42-
large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
43-
large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
44-
large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
45-
large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
46-
legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
47-
);
8+
@function get-tokens($theme, $color-variant: null) {
9+
$system: m3-utils.get-system($theme);
10+
@if $color-variant {
11+
$system: m3-utils.replace-colors-with-variant($system, error, $color-variant);
12+
}
4813

49-
$variant-tokens: (
50-
primary: (
51-
background-color: map.get($systems, md-sys-color, primary),
52-
text-color: map.get($systems, md-sys-color, on-primary),
53-
disabled-state-background-color: sass-utils.safe-color-change(
54-
map.get($systems, md-sys-color, primary),
55-
$alpha: 0.38,
56-
),
57-
disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
14+
$tokens: (
15+
base: (
16+
container-shape: map.get($system, corner-full),
17+
container-size: 16px,
18+
legacy-container-size: unset,
19+
legacy-small-size-container-size: unset,
20+
small-size-container-size: 6px,
21+
container-padding: 0 4px,
22+
small-size-container-padding: 0,
23+
container-offset: -12px 0,
24+
small-size-container-offset: -6px 0,
25+
container-overlap-offset: -12px,
26+
small-size-container-overlap-offset: -6px,
27+
large-size-container-size: 16px,
28+
large-size-container-offset: -12px 0,
29+
large-size-container-overlap-offset: -12px,
30+
large-size-container-padding: 0 4px,
31+
legacy-large-size-container-size: unset,
5832
),
59-
secondary: (
60-
background-color: map.get($systems, md-sys-color, secondary),
61-
text-color: map.get($systems, md-sys-color, on-secondary),
62-
disabled-state-background-color: sass-utils.safe-color-change(
63-
map.get($systems, md-sys-color, secondary),
64-
$alpha: 0.38,
65-
),
66-
disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
33+
color: (
34+
background-color: map.get($system, error),
35+
text-color: map.get($system, on-error),
36+
disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
37+
disabled-state-text-color: map.get($system, on-error),
6738
),
68-
tertiary: (
69-
background-color: map.get($systems, md-sys-color, tertiary),
70-
text-color: map.get($systems, md-sys-color, on-tertiary),
71-
disabled-state-background-color: sass-utils.safe-color-change(
72-
map.get($systems, md-sys-color, tertiary),
73-
$alpha: 0.38,
74-
),
75-
disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
39+
typography: (
40+
text-font: map.get($system, label-small-font),
41+
text-size: map.get($system, label-small-size),
42+
text-weight: map.get($system, label-small-weight),
43+
large-size-text-size: map.get($system, label-small-size),
44+
small-size-text-size: 0,
45+
line-height: 16px,
46+
small-size-line-height: 6px,
47+
large-size-line-height: 16px,
7648
),
77-
error: () // Default, no overrides needed
49+
density: (),
7850
);
7951

80-
@return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
52+
@return $tokens;
8153
}

‎src/material/badge/badge.scss‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
@use 'sass:color';
22
@use '@angular/cdk';
33
@use './m2-badge';
4+
@use './m3-badge';
45
@use '../core/tokens/token-utils';
6+
@use '../core/tokens/m3-system';
57

68
$default-size: 22px !default;
79
$small-size: $default-size - 6;
810
$large-size: $default-size + 6;
911

1012
$token-prefix: m2-badge.$prefix;
1113
$token-slots: m2-badge.get-token-slots();
14+
$fallbacks: m3-badge.get-tokens(m3-system.$theme-with-system-vars);
1215

1316
@mixin _badge-size($size) {
14-
@include token-utils.use-tokens($token-prefix, $token-slots) {
17+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
1518
$prefix: if($size == 'medium', '', $size + '-size-');
1619
$legacy-size-var-name: 'legacy-#{$prefix}container-size';
1720
$size-var-name: '#{$prefix}container-size';
@@ -65,7 +68,7 @@ $token-slots: m2-badge.get-token-slots();
6568
box-sizing: border-box;
6669
pointer-events: none;
6770

68-
@include token-utils.use-tokens($token-prefix, $token-slots) {
71+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
6972
background-color: token-utils.slot(background-color);
7073
color: token-utils.slot(text-color);
7174
font-family: token-utils.slot(text-font);
@@ -106,7 +109,7 @@ $token-slots: m2-badge.get-token-slots();
106109
}
107110

108111
.mat-badge-disabled .mat-badge-content {
109-
@include token-utils.use-tokens($token-prefix, $token-slots) {
112+
@include token-utils.use-tokens($token-prefix, $token-slots, $fallbacks) {
110113
background-color: token-utils.slot(disabled-state-background-color);
111114
color: token-utils.slot(disabled-state-text-color);
112115
}

‎src/material/core/color/_all-color.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
@error 'No color configuration specified.';
88
}
99

10-
@include all-theme.all-component-themes(
10+
@include all-theme.all-component-colors(
1111
inspection.theme-remove($theme, base, typography, density));
1212
}
1313

‎src/material/core/theming/_all-theme.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,47 @@
125125
@include timepicker-theme.base($theme);
126126
}
127127

128+
@mixin all-component-colors($theme) {
129+
@include core-theme.color($theme);
130+
@include card-theme.color($theme);
131+
@include progress-bar-theme.color($theme);
132+
@include tooltip-theme.color($theme);
133+
@include form-field-theme.color($theme);
134+
@include input-theme.color($theme);
135+
@include select-theme.color($theme);
136+
@include autocomplete-theme.color($theme);
137+
@include dialog-theme.color($theme);
138+
@include chips-theme.color($theme);
139+
@include slide-toggle-theme.color($theme);
140+
@include radio-theme.color($theme);
141+
@include slider-theme.color($theme);
142+
@include menu-theme.color($theme);
143+
@include list-theme.color($theme);
144+
@include paginator-theme.color($theme);
145+
@include tabs-theme.color($theme);
146+
@include checkbox-theme.color($theme);
147+
@include button-theme.color($theme);
148+
@include icon-button-theme.color($theme);
149+
@include fab-theme.color($theme);
150+
@include snack-bar-theme.color($theme);
151+
@include table-theme.color($theme);
152+
@include progress-spinner-theme.color($theme);
153+
@include badge-theme.color($theme);
154+
@include bottom-sheet-theme.color($theme);
155+
@include button-toggle-theme.color($theme);
156+
@include datepicker-theme.color($theme);
157+
@include divider-theme.color($theme);
158+
@include expansion-theme.color($theme);
159+
@include grid-list-theme.color($theme);
160+
@include icon-theme.color($theme);
161+
@include sidenav-theme.color($theme);
162+
@include stepper-theme.color($theme);
163+
@include sort-theme.color($theme);
164+
@include toolbar-theme.color($theme);
165+
@include tree-theme.color($theme);
166+
@include timepicker-theme.color($theme);
167+
}
168+
128169
// @deprecated Use `all-component-themes`.
129170
@mixin angular-material-theme($theme) {
130171
@include all-component-themes($theme);

‎src/material/core/theming/_color-api-backwards-compatibility.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -119,23 +119,20 @@ $_overrides-only: true;
119119
@include _color-variant-styles($theme, primary);
120120
}
121121
.mat-badge {
122-
@include badge-theme.color($theme, $color-variant: primary,
123-
$emit-overrides-only: $_overrides-only);
122+
@include badge-theme.color($theme, $color-variant: primary);
124123
}
125124

126125
.mat-accent {
127126
@include _color-variant-styles($theme, tertiary);
128127
}
129128
.mat-badge-accent {
130-
@include badge-theme.color($theme, $color-variant: tertiary,
131-
$emit-overrides-only: $_overrides-only);
129+
@include badge-theme.color($theme, $color-variant: tertiary);
132130
}
133131

134132
.mat-warn {
135133
@include _color-variant-styles($theme, error);
136134
}
137135
.mat-badge-warn {
138-
@include badge-theme.color($theme, $color-variant: error,
139-
$emit-overrides-only: $_overrides-only);
136+
@include badge-theme.color($theme, $color-variant: error);
140137
}
141138
}

0 commit comments

Comments
 (0)