@angular/material 19.0.0-next.0 → 19.0.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/_index.scss +1 -1
  2. package/button/_button-base.scss +0 -2
  3. package/checkbox/_checkbox-common.scss +7 -7
  4. package/core/_core.scss +8 -0
  5. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +5 -4
  6. package/core/style/_list-common.scss +2 -2
  7. package/core/style/_menu-common.scss +1 -0
  8. package/core/tokens/_m3-system.scss +155 -0
  9. package/core/tokens/_m3-tokens.scss +8 -149
  10. package/core/tokens/_token-utils.scss +13 -12
  11. package/core/tokens/m2/mat/_datepicker.scss +1 -1
  12. package/core/tokens/m3/mat/_datepicker.scss +2 -2
  13. package/dialog/index.d.ts +2 -2
  14. package/esm2022/autocomplete/autocomplete.mjs +3 -3
  15. package/esm2022/badge/badge.mjs +8 -21
  16. package/esm2022/bottom-sheet/bottom-sheet-container.mjs +3 -3
  17. package/esm2022/button/button.mjs +4 -4
  18. package/esm2022/button/fab.mjs +8 -8
  19. package/esm2022/button/icon-button.mjs +4 -4
  20. package/esm2022/button-toggle/button-toggle.mjs +3 -3
  21. package/esm2022/card/card.mjs +2 -2
  22. package/esm2022/checkbox/checkbox.mjs +3 -3
  23. package/esm2022/chips/chip-option.mjs +3 -3
  24. package/esm2022/chips/chip-row.mjs +3 -3
  25. package/esm2022/chips/chip.mjs +3 -3
  26. package/esm2022/core/option/option.mjs +3 -3
  27. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
  28. package/esm2022/core/version.mjs +1 -1
  29. package/esm2022/datepicker/calendar-body.mjs +3 -3
  30. package/esm2022/datepicker/calendar.mjs +3 -3
  31. package/esm2022/datepicker/date-range-input.mjs +3 -3
  32. package/esm2022/datepicker/datepicker-base.mjs +3 -3
  33. package/esm2022/dialog/dialog-container.mjs +6 -6
  34. package/esm2022/divider/divider.mjs +2 -2
  35. package/esm2022/expansion/expansion-panel-header.mjs +3 -3
  36. package/esm2022/expansion/expansion-panel.mjs +3 -3
  37. package/esm2022/form-field/form-field.mjs +3 -3
  38. package/esm2022/icon/icon-registry.mjs +3 -4
  39. package/esm2022/icon/icon.mjs +2 -2
  40. package/esm2022/input/input.mjs +43 -9
  41. package/esm2022/input/public-api.mjs +2 -2
  42. package/esm2022/input/testing/input-harness.mjs +8 -2
  43. package/esm2022/list/action-list.mjs +2 -2
  44. package/esm2022/list/list-option.mjs +3 -3
  45. package/esm2022/list/list.mjs +2 -2
  46. package/esm2022/list/nav-list.mjs +2 -2
  47. package/esm2022/list/selection-list.mjs +2 -2
  48. package/esm2022/menu/menu.mjs +3 -3
  49. package/esm2022/paginator/paginator.mjs +3 -3
  50. package/esm2022/progress-bar/progress-bar.mjs +2 -2
  51. package/esm2022/progress-spinner/progress-spinner.mjs +3 -3
  52. package/esm2022/radio/radio.mjs +3 -3
  53. package/esm2022/select/select.mjs +7 -7
  54. package/esm2022/sidenav/drawer.mjs +3 -3
  55. package/esm2022/sidenav/sidenav.mjs +3 -3
  56. package/esm2022/slide-toggle/slide-toggle.mjs +3 -3
  57. package/esm2022/slider/slider.mjs +3 -3
  58. package/esm2022/snack-bar/snack-bar-container.mjs +3 -3
  59. package/esm2022/stepper/step-header.mjs +3 -3
  60. package/esm2022/stepper/stepper.mjs +3 -3
  61. package/esm2022/tabs/tab-group.mjs +3 -3
  62. package/esm2022/tabs/tab-header.mjs +3 -3
  63. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +5 -5
  64. package/esm2022/toolbar/toolbar.mjs +2 -2
  65. package/esm2022/tree/tree.mjs +3 -3
  66. package/fesm2022/autocomplete.mjs +2 -2
  67. package/fesm2022/autocomplete.mjs.map +1 -1
  68. package/fesm2022/badge.mjs +7 -20
  69. package/fesm2022/badge.mjs.map +1 -1
  70. package/fesm2022/bottom-sheet.mjs +2 -2
  71. package/fesm2022/bottom-sheet.mjs.map +1 -1
  72. package/fesm2022/button-toggle.mjs +2 -2
  73. package/fesm2022/button-toggle.mjs.map +1 -1
  74. package/fesm2022/button.mjs +16 -16
  75. package/fesm2022/button.mjs.map +1 -1
  76. package/fesm2022/card.mjs +2 -2
  77. package/fesm2022/card.mjs.map +1 -1
  78. package/fesm2022/checkbox.mjs +2 -2
  79. package/fesm2022/checkbox.mjs.map +1 -1
  80. package/fesm2022/chips.mjs +6 -6
  81. package/fesm2022/chips.mjs.map +1 -1
  82. package/fesm2022/core.mjs +5 -5
  83. package/fesm2022/core.mjs.map +1 -1
  84. package/fesm2022/datepicker.mjs +8 -8
  85. package/fesm2022/datepicker.mjs.map +1 -1
  86. package/fesm2022/dialog.mjs +5 -5
  87. package/fesm2022/dialog.mjs.map +1 -1
  88. package/fesm2022/divider.mjs +2 -2
  89. package/fesm2022/divider.mjs.map +1 -1
  90. package/fesm2022/expansion.mjs +4 -4
  91. package/fesm2022/expansion.mjs.map +1 -1
  92. package/fesm2022/form-field.mjs +2 -2
  93. package/fesm2022/form-field.mjs.map +1 -1
  94. package/fesm2022/icon.mjs +4 -5
  95. package/fesm2022/icon.mjs.map +1 -1
  96. package/fesm2022/input/testing.mjs +7 -1
  97. package/fesm2022/input/testing.mjs.map +1 -1
  98. package/fesm2022/input.mjs +43 -9
  99. package/fesm2022/input.mjs.map +1 -1
  100. package/fesm2022/list.mjs +10 -10
  101. package/fesm2022/list.mjs.map +1 -1
  102. package/fesm2022/menu.mjs +2 -2
  103. package/fesm2022/menu.mjs.map +1 -1
  104. package/fesm2022/paginator.mjs +2 -2
  105. package/fesm2022/paginator.mjs.map +1 -1
  106. package/fesm2022/progress-bar.mjs +2 -2
  107. package/fesm2022/progress-bar.mjs.map +1 -1
  108. package/fesm2022/progress-spinner.mjs +2 -2
  109. package/fesm2022/progress-spinner.mjs.map +1 -1
  110. package/fesm2022/radio.mjs +2 -2
  111. package/fesm2022/radio.mjs.map +1 -1
  112. package/fesm2022/select.mjs +6 -6
  113. package/fesm2022/select.mjs.map +1 -1
  114. package/fesm2022/sidenav.mjs +4 -4
  115. package/fesm2022/sidenav.mjs.map +1 -1
  116. package/fesm2022/slide-toggle.mjs +2 -2
  117. package/fesm2022/slide-toggle.mjs.map +1 -1
  118. package/fesm2022/slider.mjs +2 -2
  119. package/fesm2022/slider.mjs.map +1 -1
  120. package/fesm2022/snack-bar.mjs +2 -2
  121. package/fesm2022/snack-bar.mjs.map +1 -1
  122. package/fesm2022/stepper.mjs +4 -4
  123. package/fesm2022/stepper.mjs.map +1 -1
  124. package/fesm2022/tabs.mjs +8 -8
  125. package/fesm2022/tabs.mjs.map +1 -1
  126. package/fesm2022/toolbar.mjs +2 -2
  127. package/fesm2022/toolbar.mjs.map +1 -1
  128. package/fesm2022/tree.mjs +2 -2
  129. package/fesm2022/tree.mjs.map +1 -1
  130. package/form-field/_mdc-text-field-structure.scss +6 -0
  131. package/input/index.d.ts +18 -1
  132. package/package.json +2 -2
  133. package/prebuilt-themes/azure-blue.css +1 -1
  134. package/prebuilt-themes/cyan-orange.css +1 -1
  135. package/prebuilt-themes/deeppurple-amber.css +1 -1
  136. package/prebuilt-themes/indigo-pink.css +1 -1
  137. package/prebuilt-themes/magenta-violet.css +1 -1
  138. package/prebuilt-themes/pink-bluegrey.css +1 -1
  139. package/prebuilt-themes/purple-green.css +1 -1
  140. package/prebuilt-themes/rose-red.css +1 -1
  141. package/schematics/ng-add/index.js +1 -1
  142. package/schematics/ng-add/index.mjs +1 -1
  143. package/schematics/ng-generate/m3-theme/index_bundled.js +2 -2
  144. package/schematics/ng-update/index_bundled.js +27 -27
  145. package/select/index.d.ts +2 -2
  146. package/slide-toggle/_slide-toggle-theme.scss +8 -6
  147. package/tabs/_tabs-common.scss +11 -9
package/_index.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  @forward './core/typography/typography' show typography-hierarchy;
19
19
  @forward './core/typography/typography-utils' show font-shorthand;
20
20
  @forward './core/tokens/m2' show m2-tokens-from-theme;
21
- @forward './core/tokens/m3-tokens' show system-level-colors,
21
+ @forward './core/tokens/m3-system' show system-level-colors,
22
22
  system-level-typography, system-level-elevation, system-level-shape,
23
23
  system-level-motion, system-level-state;
24
24
 
@@ -141,8 +141,6 @@
141
141
  @include token-utils.use-tokens($prefix, $slots) {
142
142
  $icon-spacing: token-utils.get-token-variable(icon-spacing, true);
143
143
  $icon-offset: token-utils.get-token-variable(icon-offset, true);
144
- $horizontal-padding: token-utils.get-token-variable(horizontal-padding, true);
145
- padding: 0 $horizontal-padding;
146
144
 
147
145
  @if ($has-with-icon-padding) {
148
146
  $with-icon-horizontal-padding:
@@ -175,10 +175,10 @@ $_fallback-size: 40px;
175
175
  // Always apply the color since the element becomes `opacity: 0`
176
176
  // when unchecked. This makes the animation look better.
177
177
  @include token-utils.create-token-slot(color, selected-checkmark-color);
178
+ }
178
179
 
179
- @include cdk.high-contrast(active, off) {
180
- color: CanvasText;
181
- }
180
+ @include cdk.high-contrast(active, off) {
181
+ color: CanvasText;
182
182
  }
183
183
  }
184
184
 
@@ -214,15 +214,15 @@ $_fallback-size: 40px;
214
214
  transition: opacity $_transition-duration $_exit-curve,
215
215
  transform $_transition-duration $_exit-curve;
216
216
 
217
- @include cdk.high-contrast(active, off) {
218
- margin: 0 1px;
219
- }
220
-
221
217
  @include token-utils.use-tokens($prefix, $slots) {
222
218
  // Always apply the color since the element becomes `opacity: 0`
223
219
  // when unchecked. This makes the animation look better.
224
220
  @include token-utils.create-token-slot(border-color, selected-checkmark-color);
225
221
  }
222
+
223
+ @include cdk.high-contrast(active, off) {
224
+ margin: 0 1px;
225
+ }
226
226
  }
227
227
 
228
228
  @include token-utils.use-tokens($prefix, $slots) {
package/core/_core.scss CHANGED
@@ -7,6 +7,14 @@
7
7
 
8
8
  // Mixin that renders all of the core styles that are not theme-dependent.
9
9
  @mixin core() {
10
+ // TODO: Move ripple styles to be dynamically loaded instead of in core.
11
+ // This variable is used as a fallback for the ripple element's
12
+ // background color. However, if it isn't defined anywhere, then MSS
13
+ // complains in its verification stage.
14
+ html {
15
+ --mat-app-on-surface: initial;
16
+ }
17
+
10
18
  @include ripple.ripple();
11
19
  @include cdk.a11y-visually-hidden();
12
20
  @include cdk.overlay();
@@ -56,16 +56,17 @@
56
56
  @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
57
57
  }
58
58
  @else {
59
- .mat-primary {
60
- @include _palette-styles($theme, primary);
61
- }
62
-
63
59
  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
64
60
  // theme from their parent, rather than implementing their own theming, which is why we
65
61
  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
66
62
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
67
63
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
68
64
  @include _palette-styles($theme, accent);
65
+
66
+ .mat-primary {
67
+ @include _palette-styles($theme, primary);
68
+ }
69
+
69
70
  .mat-accent {
70
71
  @include _palette-styles($theme, accent);
71
72
  }
@@ -33,14 +33,14 @@
33
33
 
34
34
  // This mixin provides base styles for the wrapper around mat-line elements in a list.
35
35
  @mixin wrapper-base() {
36
- @include normalize-text();
37
-
38
36
  display: flex;
39
37
  flex-direction: column;
40
38
  flex: auto;
41
39
  box-sizing: border-box;
42
40
  overflow: hidden;
43
41
 
42
+ @include normalize-text();
43
+
44
44
  // Must remove wrapper when lines are empty or it takes up horizontal
45
45
  // space and pushes other elements to the right.
46
46
  &:empty {
@@ -74,6 +74,7 @@ $icon-margin: 16px !default;
74
74
  // Invert the arrow direction.
75
75
  polygon {
76
76
  transform: scaleX(-1);
77
+ transform-origin: center;
77
78
  }
78
79
  }
79
80
 
@@ -0,0 +1,155 @@
1
+ @use '../style/elevation';
2
+ @use '../style/sass-utils';
3
+ @use './m3-tokens';
4
+ @use './m3/definitions';
5
+ @use 'sass:map';
6
+
7
+ // Prefix used for component token fallback variables, e.g.
8
+ // `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
9
+ $_system-fallback-prefix: mat-app;
10
+
11
+ // Default system level prefix to use when directly calling the `system-level-*` mixins
12
+ $_system-level-prefix: sys;
13
+
14
+ // Emits CSS variables for Material's system level values. Uses the
15
+ // namespace prefix in $_system-fallback-prefix.
16
+ // e.g. --mat-app-surface: #E5E5E5
17
+ @mixin theme($theme, $overrides: ()) {
18
+ @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
19
+ @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
20
+ @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
21
+ @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
22
+ @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
23
+ @include system-level-state($theme, $overrides, $_system-fallback-prefix);
24
+ }
25
+
26
+ @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
27
+ $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
28
+ $base-palettes: (
29
+ neutral: map.get($palettes, neutral),
30
+ neutral-variant: map.get($palettes, neutral-variant),
31
+ secondary: map.get($palettes, secondary),
32
+ error: map.get($palettes, error),
33
+ );
34
+
35
+ $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
36
+ $primary: map.merge(map.get($palettes, primary), $base-palettes);
37
+ $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
38
+ $error: map.get($palettes, error);
39
+
40
+ @if (not $prefix) {
41
+ $prefix: map.get($theme, _mat-theming-internals-do-not-access,
42
+ color-system-variables-prefix) or $_system-level-prefix;
43
+ }
44
+
45
+ $ref: (
46
+ md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
47
+ );
48
+
49
+ $sys-colors: if($type == dark,
50
+ definitions.md-sys-color-values-dark($ref),
51
+ definitions.md-sys-color-values-light($ref));
52
+
53
+ & {
54
+ @each $name, $value in $sys-colors {
55
+ --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
56
+ }
57
+ }
58
+ }
59
+
60
+ @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
61
+ $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
62
+ $brand: map.get($font-definition, brand);
63
+ $plain: map.get($font-definition, plain);
64
+ $bold: map.get($font-definition, bold);
65
+ $medium: map.get($font-definition, medium);
66
+ $regular: map.get($font-definition, regular);
67
+ $ref: (md-ref-typeface:
68
+ m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
69
+ );
70
+
71
+ @if (not $prefix) {
72
+ $prefix: map.get($theme, _mat-theming-internals-do-not-access,
73
+ typography-system-variables-prefix) or $_system-level-prefix;
74
+ }
75
+
76
+ & {
77
+ @each $name, $value in definitions.md-sys-typescale-values($ref) {
78
+ --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
79
+ }
80
+ }
81
+ }
82
+
83
+ @mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
84
+ $shadow-color: map.get(
85
+ $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
86
+
87
+ @for $level from 0 through 24 {
88
+ $value: elevation.get-box-shadow($level, $shadow-color);
89
+ --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
90
+ }
91
+
92
+ @each $name, $value in definitions.md-sys-elevation-values() {
93
+ $level: map.get($overrides, $name) or $value;
94
+ $value: elevation.get-box-shadow($level, $shadow-color);
95
+ --#{$prefix}-#{$name}: #{$value};
96
+ }
97
+ }
98
+
99
+ @mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
100
+ & {
101
+ @each $name, $value in definitions.md-sys-shape-values() {
102
+ --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
103
+ }
104
+ }
105
+ }
106
+
107
+ @mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
108
+ & {
109
+ @each $name, $value in definitions.md-sys-state-values() {
110
+ --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
111
+ }
112
+ }
113
+ }
114
+
115
+ @mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
116
+ & {
117
+ @each $name, $value in definitions.md-sys-motion-values() {
118
+ --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
119
+ }
120
+ }
121
+ }
122
+
123
+ // Return a new map where the values are the same as the provided map's
124
+ // keys, prefixed with "--mat-app-". For example:
125
+ // (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
126
+ @function _create-system-app-vars-map($map) {
127
+ $new-map: ();
128
+ @each $key, $value in $map {
129
+ $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
130
+ }
131
+ @return $new-map;
132
+ }
133
+
134
+ // Create a components tokens map where values are based on
135
+ // system fallback variables referencing Material's system keys.
136
+ // Includes density token fallbacks where density is 0.
137
+ @function create-system-fallbacks() {
138
+ $app-vars: (
139
+ 'md-sys-color':
140
+ _create-system-app-vars-map(definitions.md-sys-color-values-light()),
141
+ 'md-sys-typescale':
142
+ _create-system-app-vars-map(definitions.md-sys-typescale-values()),
143
+ 'md-sys-elevation':
144
+ _create-system-app-vars-map(definitions.md-sys-elevation-values()),
145
+ 'md-sys-state':
146
+ _create-system-app-vars-map(definitions.md-sys-state-values()),
147
+ 'md-sys-shape':
148
+ _create-system-app-vars-map(definitions.md-sys-shape-values()),
149
+ );
150
+
151
+ @return sass-utils.deep-merge-all(
152
+ m3-tokens.generate-tokens($app-vars, true, true),
153
+ m3-tokens.generate-density-tokens(0)
154
+ );
155
+ }
@@ -4,17 +4,9 @@
4
4
  @use './m3';
5
5
  @use './m3/definitions' as m3-token-definitions;
6
6
  @use '../tokens/m2' as m2-tokens;
7
- @use '../style/elevation';
8
7
  @use './density';
9
8
  @use './format-tokens';
10
9
 
11
- // Default system level prefix to use when directly calling the `system-level-*` mixins
12
- $_system-level-prefix: sys;
13
-
14
- // Prefix used for component token fallback variables, e.g.
15
- // `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
16
- $_system-fallback-prefix: mat-app;
17
-
18
10
  /// Generates tokens for the given palette with the given prefix.
19
11
  /// @param {Map} $palette The palette to generate tokens for
20
12
  /// @param {String} $prefix The key prefix used to name the tokens
@@ -35,7 +27,7 @@ $_system-fallback-prefix: mat-app;
35
27
  /// @param {Map} $tertiary The tertiary palette
36
28
  /// @param {Map} $error The error palette
37
29
  /// @return {Map} A set of `md-ref-palette` tokens
38
- @function _generate-ref-palette-tokens($primary, $tertiary, $error) {
30
+ @function generate-ref-palette-tokens($primary, $tertiary, $error) {
39
31
  @return sass-utils.merge-all(
40
32
  (black: #000, white: #fff),
41
33
  _generate-palette-tokens($primary, primary),
@@ -55,7 +47,7 @@ $_system-fallback-prefix: mat-app;
55
47
  /// @param {String} $medium The font-weight to use for medium text
56
48
  /// @param {String} $regular The font-weight to use for regular text
57
49
  /// @return {Map} A set of `md-ref-typeface` tokens
58
- @function _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
50
+ @function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) {
59
51
  @return (
60
52
  brand: $brand,
61
53
  plain: $plain,
@@ -96,7 +88,7 @@ $_cached-token-slots: null;
96
88
  /// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
97
89
  /// @param {Boolean} $include-density Whether to include density tokens
98
90
  /// @return {Map} A map of namespaced tokens
99
- @function _generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
91
+ @function generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
100
92
  $systems: map.merge((
101
93
  md-sys-color: (),
102
94
  md-sys-elevation: (),
@@ -135,105 +127,6 @@ $_cached-token-slots: null;
135
127
  @return $result;
136
128
  }
137
129
 
138
- // Return a new map where the values are the same as the provided map's
139
- // keys, prefixed with "--mat-app-". For example:
140
- // (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
141
- @function _create-system-app-vars-map($map) {
142
- $new-map: ();
143
- @each $key, $value in $map {
144
- $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
145
- }
146
- @return $new-map;
147
- }
148
-
149
- // Create a components tokens map where values are based on
150
- // system fallback variables referencing Material's system keys.
151
- // Includes density token fallbacks where density is 0.
152
- @function create-system-fallbacks() {
153
- $app-vars: (
154
- 'md-sys-color':
155
- _create-system-app-vars-map(m3-token-definitions.md-sys-color-values-light()),
156
- 'md-sys-typescale':
157
- _create-system-app-vars-map(m3-token-definitions.md-sys-typescale-values()),
158
- 'md-sys-elevation':
159
- _create-system-app-vars-map(m3-token-definitions.md-sys-elevation-values()),
160
- 'md-sys-state':
161
- _create-system-app-vars-map(m3-token-definitions.md-sys-state-values()),
162
- 'md-sys-shape':
163
- _create-system-app-vars-map(m3-token-definitions.md-sys-shape-values()),
164
- );
165
-
166
- @return sass-utils.deep-merge-all(
167
- _generate-tokens($app-vars, true, true),
168
- generate-density-tokens(0)
169
- );
170
- }
171
-
172
- // Emits CSS variables for Material's system level values. Uses the
173
- // namespace prefix in $_system-fallback-prefix.
174
- // e.g. --mat-app-surface: #E5E5E5
175
- @mixin theme($theme, $overrides: ()) {
176
- @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
177
- @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
178
- @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
179
- @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
180
- @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
181
- @include system-level-state($theme, $overrides, $_system-fallback-prefix);
182
- }
183
-
184
- @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
185
- $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
186
- $base-palettes: (
187
- neutral: map.get($palettes, neutral),
188
- neutral-variant: map.get($palettes, neutral-variant),
189
- secondary: map.get($palettes, secondary),
190
- error: map.get($palettes, error),
191
- );
192
-
193
- $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
194
- $primary: map.merge(map.get($palettes, primary), $base-palettes);
195
- $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
196
- $error: map.get($palettes, error);
197
-
198
- @if (not $prefix) {
199
- $prefix: map.get($theme, _mat-theming-internals-do-not-access,
200
- color-system-variables-prefix) or $_system-level-prefix;
201
- }
202
-
203
- $ref: (
204
- md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
205
- );
206
-
207
- $sys-colors: if($type == dark,
208
- m3-token-definitions.md-sys-color-values-dark($ref),
209
- m3-token-definitions.md-sys-color-values-light($ref));
210
-
211
- @each $name, $value in $sys-colors {
212
- --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
213
- }
214
- }
215
-
216
- @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
217
- $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
218
- $brand: map.get($font-definition, brand);
219
- $plain: map.get($font-definition, plain);
220
- $bold: map.get($font-definition, bold);
221
- $medium: map.get($font-definition, medium);
222
- $regular: map.get($font-definition, regular);
223
- $ref: (
224
- md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
225
- );
226
-
227
- @if (not $prefix) {
228
- $prefix: map.get($theme, _mat-theming-internals-do-not-access,
229
- typography-system-variables-prefix) or $_system-level-prefix;
230
- }
231
-
232
- @each $name, $value in m3-token-definitions.md-sys-typescale-values($ref) {
233
- --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
234
- }
235
- }
236
-
237
130
  @function create-map($keys, $prefix) {
238
131
  $result: ();
239
132
  @each $key in $keys {
@@ -242,40 +135,6 @@ $_cached-token-slots: null;
242
135
  @return $result;
243
136
  }
244
137
 
245
- @mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
246
- $shadow-color: map.get(
247
- $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
248
-
249
- @for $level from 0 through 24 {
250
- $value: elevation.get-box-shadow($level, $shadow-color);
251
- --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
252
- }
253
-
254
- @each $name, $value in m3-token-definitions.md-sys-elevation-values() {
255
- $level: map.get($overrides, $name) or $value;
256
- $value: elevation.get-box-shadow($level, $shadow-color);
257
- --#{$prefix}-#{$name}: #{$value};
258
- }
259
- }
260
-
261
- @mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
262
- @each $name, $value in m3-token-definitions.md-sys-shape-values() {
263
- --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
264
- }
265
- }
266
-
267
- @mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
268
- @each $name, $value in m3-token-definitions.md-sys-state-values() {
269
- --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
270
- }
271
- }
272
-
273
- @mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
274
- @each $name, $value in m3-token-definitions.md-sys-motion-values() {
275
- --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
276
- }
277
- }
278
-
279
138
  @function _get-sys-color($type, $ref, $prefix) {
280
139
  $mdc-sys-color: if($type == dark,
281
140
  m3-token-definitions.md-sys-color-values-dark($ref),
@@ -451,12 +310,12 @@ $_cached-token-slots: null;
451
310
  /// @return {Map} A map of namespaced color tokens
452
311
  @function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) {
453
312
  $ref: (
454
- md-ref-palette: _generate-ref-palette-tokens($primary, $tertiary, $error)
313
+ md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error)
455
314
  );
456
315
 
457
316
  $sys-color: _get-sys-color($type, $ref, $system-variables-prefix);
458
317
 
459
- @return _generate-tokens(map.merge($ref, (
318
+ @return generate-tokens(map.merge($ref, (
460
319
  md-sys-color: $sys-color,
461
320
  // Because the elevation values are always combined with color values to create the box shadow,
462
321
  // elevation needs to be part of the color dimension.
@@ -480,10 +339,10 @@ $_cached-token-slots: null;
480
339
  @function generate-typography-tokens($brand, $plain, $bold, $medium, $regular,
481
340
  $system-variables-prefix) {
482
341
  $ref: (
483
- md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
342
+ md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
484
343
  );
485
344
  $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix);
486
- @return _generate-tokens((
345
+ @return generate-tokens((
487
346
  md-sys-typescale: $sys-typeface
488
347
  ));
489
348
  }
@@ -500,7 +359,7 @@ $system-variables-prefix) {
500
359
  /// @return {Map} A map of namespaced tokens not related to color, typography, or density
501
360
  @function generate-base-tokens() {
502
361
  // TODO(mmalerba): Exclude density tokens once implemented.
503
- @return _generate-tokens((
362
+ @return generate-tokens((
504
363
  md-sys-motion: m3-token-definitions.md-sys-motion-values(),
505
364
  md-sys-shape: m3-token-definitions.md-sys-shape-values(),
506
365
  ), $include-non-systemized: true);
@@ -1,13 +1,13 @@
1
+ @use '../style/elevation';
2
+ @use '../style/sass-utils';
3
+ @use './m3-system';
1
4
  @use 'sass:list';
2
5
  @use 'sass:map';
3
6
  @use 'sass:string';
4
- @use '../style/elevation';
5
- @use '../style/sass-utils';
6
- @use './m3-tokens';
7
7
 
8
8
  $_tokens: null;
9
9
  $_component-prefix: null;
10
- $_system-fallbacks: m3-tokens.create-system-fallbacks();
10
+ $_system-fallbacks: m3-system.create-system-fallbacks();
11
11
 
12
12
  // Sets the token prefix and map to use when creating token slots.
13
13
  @mixin use-tokens($prefix, $tokens) {
@@ -113,19 +113,20 @@ $_system-fallbacks: m3-tokens.create-system-fallbacks();
113
113
  @return _create-var($sys-fallback, $fallback);
114
114
  }
115
115
 
116
- // TODO(mat-app-theme): Return the system-level fallback.
117
- // Changing this will affect clients that do not properly call theme mixins since the tokens
118
- // will be undefined and now default to M3 system values, causing a number of screenshot failures.
119
- // @return $sys-fallback;
120
- @return $fallback;
116
+ @return $sys-fallback;
121
117
  }
122
118
 
123
119
  // Outputs a map of tokens under a specific prefix.
124
120
  @mixin create-token-values($prefix, $tokens) {
125
121
  @if $tokens != null {
126
- @each $key, $value in $tokens {
127
- @if $value != null {
128
- #{_create-var-name($prefix, $key)}: #{$value};
122
+ // TODO: The `&` adds to the file size of theme, but it's necessary for compatibility
123
+ // with https://sass-lang.com/documentation/breaking-changes/mixed-decls/. We should
124
+ // figure out a better way to do this or move all the concrete styles out of the theme.
125
+ & {
126
+ @each $key, $value in $tokens {
127
+ @if $value != null {
128
+ #{_create-var-name($prefix, $key)}: #{$value};
129
+ }
129
130
  }
130
131
  }
131
132
  }
@@ -106,7 +106,7 @@ $private-default-overlap-color: #a8dab5;
106
106
  // that were set in the previous theming API to reduce the amount of subtle screenshot
107
107
  // differences. We should look into introducing the other tokens in a follow-up.
108
108
  calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
109
- calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
109
+ calendar-text-size: 13px,
110
110
 
111
111
  calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
112
112
  calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
@@ -73,8 +73,8 @@ $prefix: (mat, datepicker);
73
73
  token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
74
74
  calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
75
75
  calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
76
- calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
77
- calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
76
+ calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
77
+ calendar-text-size: map.get($systems, md-sys-typescale, body-medium-size),
78
78
  calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
79
79
  calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
80
80
  calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
package/dialog/index.d.ts CHANGED
@@ -335,7 +335,7 @@ export declare class MatDialogConfig<D = any> {
335
335
  }
336
336
 
337
337
  export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConfig> implements OnDestroy {
338
- private _animationMode?;
338
+ private _animationMode;
339
339
  /** Emits when an animation state changes. */
340
340
  _animationStateChanged: EventEmitter<LegacyDialogAnimationEvent>;
341
341
  /** Whether animations are enabled. */
@@ -350,7 +350,7 @@ export declare class MatDialogContainer extends CdkDialogContainer<MatDialogConf
350
350
  private _exitAnimationDuration;
351
351
  /** Current timer for dialog animations. */
352
352
  private _animationTimer;
353
- constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _animationMode?: string | undefined, focusMonitor?: FocusMonitor);
353
+ constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, _document: any, dialogConfig: MatDialogConfig, interactivityChecker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, _unusedAnimationMode?: string, focusMonitor?: FocusMonitor);
354
354
  protected _contentAttached(): void;
355
355
  /** Starts the dialog open animation if enabled. */
356
356
  private _startOpenAnimation;