Skip to content

Commit 764e71c

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: add density scale to system map (#31389)
Co-authored-by: Andrew Seguin <[email protected]>
1 parent ea7148c commit 764e71c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+106
-97
lines changed

‎src/material/button-toggle/_m2-button-toggle.scss

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

@@ -70,7 +69,8 @@
7069

7170
// Tokens that can be configured through Angular Material's density theming API.
7271
@function get-density-tokens($theme) {
73-
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
72+
$system: m2-utils.get-system($theme);
73+
$density-scale: theming.clamp-density(map.get($system, density-scale), -4);
7474
$size-scale: (
7575
0: 48px,
7676
-1: 44px,

‎src/material/button-toggle/_m3-button-toggle.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76

87
/// Generates custom tokens for the mat-button-toggle.
@@ -56,7 +55,7 @@
5655
button-toggle-legacy-state-layer-color: null,
5756
button-toggle-legacy-text-color: null,
5857
),
59-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
58+
density: get-density-tokens(map.get($system, density-scale)),
6059
);
6160

6261
@return $tokens;

‎src/material/button/_icon-button-theme.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
@use './m2-icon-button';
44
@use './m3-icon-button';
55
@use '../core/tokens/token-utils';
6+
@use '../core/tokens/m2-utils';
67
@use '../core/theming/inspection';
8+
@use '../core/theming/theming';
79

810
@mixin base($theme) {
911
$tokens: m2-icon-button.get-unthemable-tokens();
@@ -60,7 +62,8 @@
6062
@include token-utils.values(map.get(m3-icon-button.get-tokens($theme), density));
6163
} @else {
6264
$icon-size: 24px;
63-
$density-scale: inspection.get-theme-density($theme);
65+
$system: m2-utils.get-system($theme);
66+
$density-scale: theming.clamp-density(map.get($system, density-scale), -5);
6467
$size-map: (
6568
0: 48px,
6669
-1: 44px,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,8 +176,8 @@
176176

177177
// Tokens that can be configured through Angular Material's density theming API.
178178
@function get-density-tokens($theme) {
179-
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
180-
$scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
179+
$system: m2-utils.get-system($theme);
180+
$scale: theming.clamp-density(map.get($system, density-scale), -3);
181181
$sizes: (
182182
0: 36px,
183183
-1: 32px,

‎src/material/button/_m2-fab.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@
9393

9494
// Tokens that can be configured through Angular Material's density theming API.
9595
@function get-density-tokens($theme) {
96-
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
96+
$system: m2-utils.get-system($theme);
97+
$density-scale: theming.clamp-density(map.get($system, density-scale), -3);
9798

9899
@return (
99100
fab-small-touch-target-display: if($density-scale < -1, none, block),

‎src/material/button/_m2-icon-button.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,19 @@
5151

5252
// Tokens that can be configured through Angular Material's density theming API.
5353
@function get-density-tokens($theme, $exclude: ()) {
54-
$scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
54+
$system: m2-utils.get-system($theme);
55+
$density-scale: theming.clamp-density(map.get($system, density-scale), -3);
5556

5657
$tokens: (
57-
icon-button-touch-target-display: if($scale < -1, none, block),
58+
icon-button-touch-target-display: if($density-scale < -1, none, block),
5859
icon-button-state-layer-size: map.get((
5960
0: 48px,
6061
-1: 44px,
6162
-2: 40px,
6263
-3: 36px,
6364
-4: 32px,
6465
-5: 28px,
65-
), $scale)
66+
), $density-scale)
6667
);
6768

6869
@each $token in $exclude {

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@use '../core/tokens/m3';
55
@use '../core/style/elevation';
66
@use '../core/theming/theming';
7-
@use '../core/theming/inspection';
87

98

109
/// Generates custom tokens for the button.
@@ -141,7 +140,7 @@
141140
button-tonal-label-text-tracking: map.get($system, label-large-tracking),
142141
button-tonal-label-text-weight: map.get($system, label-large-weight),
143142
),
144-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
143+
density: get-density-tokens(map.get($system, density-scale)),
145144
);
146145
}
147146

‎src/material/button/_m3-fab.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
@use '../core/tokens/m3-utils';
44
@use '../core/style/elevation';
55
@use '../core/theming/theming';
6-
@use '../core/theming/inspection';
76
@use '../core/tokens/m3';
87

98
/// Generates custom tokens for the mat-fab.
@@ -72,7 +71,7 @@
7271
fab-extended-label-text-tracking: map.get($system, label-large-tracking),
7372
fab-extended-label-text-weight: map.get($system, label-large-weight),
7473
),
75-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
74+
density: get-density-tokens(map.get($system, density-scale)),
7675
);
7776

7877
@return $tokens;

‎src/material/button/_m3-icon-button.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76

87
/// Generates custom tokens for the mat-icon-button.
@@ -35,7 +34,7 @@
3534
icon-button-state-layer-color: map.get($system, on-surface-variant),
3635
),
3736
typography: (),
38-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
37+
density: get-density-tokens(map.get($system, density-scale)),
3938
);
4039

4140
@return $tokens;

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,16 @@
6969

7070
// Tokens that can be configured through Angular Material's density theming API.
7171
@function get-density-tokens($theme) {
72-
$scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
72+
$system: m2-utils.get-system($theme);
73+
$density-scale: theming.clamp-density(map.get($system, density-scale), -3);
7374

7475
@return (
75-
checkbox-touch-target-display: if($scale < -1, none, block),
76+
checkbox-touch-target-display: if($density-scale < -1, none, block),
7677
checkbox-state-layer-size: map.get((
7778
0: 40px,
7879
-1: 36px,
7980
-2: 32px,
8081
-3: 28px,
81-
), $scale)
82+
), $density-scale)
8283
);
8384
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76

87
/// Generates custom tokens for mat-checkbox.
@@ -52,7 +51,7 @@
5251
checkbox-label-text-tracking: map.get($system, body-medium-tracking),
5352
checkbox-label-text-weight: map.get($system, body-medium-weight),
5453
),
55-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
54+
density: get-density-tokens(map.get($system, density-scale)),
5655
);
5756
}
5857

‎src/material/chips/_m2-chip.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@use 'sass:map';
2-
@use '../core/theming/inspection';
32
@use '../core/theming/theming';
43
@use '../core/tokens/m2-utils';
54
@use '../core/tokens/m3-utils';
@@ -84,7 +83,9 @@
8483

8584
// Tokens that can be configured through Angular Material's density theming API.
8685
@function get-density-tokens($theme) {
87-
$scale: theming.clamp-density(inspection.get-theme-density($theme), -2);
86+
$system: m2-utils.get-system($theme);
87+
$density-scale: theming.clamp-density(map.get($system, density-scale), -2);
88+
8889
@return (
8990
// The height of the chip.
9091
chip-container-height: map.get(
@@ -93,7 +94,7 @@
9394
-1: 28px,
9495
-2: 24px,
9596
),
96-
$scale
97+
$density-scale
9798
)
9899
);
99100
}

‎src/material/chips/_m3-chip.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76

87
/// Generates custom tokens for the mat-chip.
@@ -67,7 +66,7 @@
6766
chip-label-text-tracking: map.get($system, label-large-tracking),
6867
chip-label-text-weight: map.get($system, label-large-weight),
6968
),
70-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
69+
density: get-density-tokens(map.get($system, density-scale)),
7170
);
7271
}
7372

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
@return $theme;
115115
}
116116

117-
@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
117+
@function _define-system($primary, $accent, $warn, $is-dark, $typography, $density-scale) {
118118
$palettes: (
119119
primary: $primary,
120120
accent: $accent,
@@ -128,7 +128,7 @@
128128
$sys-state: m2.md-sys-state-values();
129129
$sys-typography: m2.md-sys-typescale-values($typography);
130130

131-
$system: ();
131+
$system: (density-scale: $density-scale);
132132
@each $map in ($sys-color, $sys-state, $sys-typography) {
133133
$system: map.merge($system, $map);
134134
}
@@ -188,7 +188,9 @@
188188
$accent: $accent,
189189
$warn: $warn,
190190
$is-dark: $is-dark,
191-
$typography: ());
191+
$typography: (),
192+
$density-scale: 0
193+
);
192194
$theme: map.set($theme, _mat-system, $system);
193195
@return $theme;
194196
}
@@ -216,7 +218,9 @@
216218
$accent: map.get($result, accent) or map.get($result, color, accent) or (),
217219
$warn: map.get($result, warn) or map.get($result, color, warn) or (),
218220
$is-dark: $is-dark,
219-
$typography: map.get($result, typography) or ());
221+
$typography: map.get($result, typography) or (),
222+
$density-scale: map.get($result, density),
223+
);
220224
$theme: map.set($theme, _mat-system, $system);
221225
@return $theme;
222226
}

‎src/material/core/theming/_definition.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ $theme-version: 1;
9090
),
9191
m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
9292
);
93-
$system: ();
93+
$system: (
94+
density-scale: $density-scale,
95+
);
9496
@each $sys-map in $system-maps {
9597
$system: map.merge($system, $sys-map);
9698
}

‎src/material/core/tokens/_m2-utils.scss

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
@use 'sass:map';
2+
@use 'sass:meta';
23
@use './m2';
34

45
// Gets the theme's system values as a flat map.
56
@function get-system($theme) {
6-
$system: map.get($theme, _mat-system);
7-
@if $system {
8-
@return $system;
7+
@if meta.type-of($theme) == map {
8+
$system: map.get($theme, _mat-system);
9+
@if $system {
10+
@return $system;
11+
}
12+
13+
// If the $theme is a typography-config, convert it to a system map.
14+
@if map.has-key($theme, body-1) {
15+
@return m2.md-sys-typescale-values($theme);
16+
}
917
}
1018

11-
// If the $theme is a typography-config, convert it to a system map.
12-
@if map.has-key($theme, body-1) {
13-
@return m2.md-sys-typescale-values($theme);
19+
// If the $theme is a density scale, convert it to a system map.
20+
@if meta.type-of($theme) == 'number' or $theme == minimum or $theme == maximum {
21+
@return (density-scale: $theme);
1422
}
1523

1624
@return ();

‎src/material/core/tokens/m3/_theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ $_sys-maps: (
2828
),
2929
);
3030

31-
$_system: ();
31+
$_system: (density-scale: 0);
3232
@each $sys-map in $_sys-maps {
3333
$_system: map.merge($_system, _create-system-app-vars-map($sys-map));
3434
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use 'sass:map';
22
@use '../core/theming/theming';
3-
@use '../core/theming/inspection';
43
@use '../core/tokens/m2-utils';
54
@use '../core/tokens/m3-utils';
65
@use '../core/style/elevation';
@@ -59,7 +58,8 @@
5958

6059
// Tokens that can be configured through Angular Material's density theming API.
6160
@function get-density-tokens($theme) {
62-
$scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
61+
$system: m2-utils.get-system($theme);
62+
$density-scale: theming.clamp-density(map.get($system, density-scale), -3);
6363
$collapsed-scale: (
6464
0: 48px,
6565
-1: 44px,
@@ -74,7 +74,7 @@
7474
);
7575

7676
@return (
77-
expansion-header-collapsed-state-height: map.get($collapsed-scale, $scale),
78-
expansion-header-expanded-state-height: map.get($expanded-scale, $scale),
77+
expansion-header-collapsed-state-height: map.get($collapsed-scale, $density-scale),
78+
expansion-header-expanded-state-height: map.get($expanded-scale, $density-scale),
7979
);
8080
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76
@use '../core/style/elevation';
87

@@ -46,7 +45,7 @@ $prefix: (mat, expansion);
4645
expansion-header-text-tracking: map.get($system, title-medium-tracking),
4746
expansion-header-text-weight: map.get($system, title-medium-weight),
4847
),
49-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
48+
density: get-density-tokens(map.get($system, density-scale)),
5049
);
5150
}
5251

‎src/material/form-field/_m2-form-field.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,8 @@
172172

173173
// Tokens that can be configured through Angular Material's density theming API.
174174
@function get-density-tokens($theme) {
175-
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -5);
175+
$system: m2-utils.get-system($theme);
176+
$density-scale: theming.clamp-density(map.get($system, density-scale), -5);
176177
$size-scale: (
177178
0: 56px,
178179
-1: 52px,

‎src/material/form-field/_m3-form-field.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use 'sass:list';
33
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
5-
@use '../core/theming/inspection';
65
@use '../core/tokens/m3';
76

87
// The prefix used to generate the fully qualified name for tokens in this file.
@@ -117,7 +116,7 @@ $prefix: (mat, form-field);
117116
form-field-filled-label-text-weight: map.get($system, body-large-weight),
118117
form-field-outlined-label-text-populated-size: null,
119118
),
120-
density: get-density-tokens(map.get($theme, inspection.$internals, density-scale)),
119+
density: get-density-tokens(map.get($system, density-scale)),
121120
);
122121
}
123122

0 commit comments

Comments
 (0)