@angular/material 17.0.0-next.3 → 17.0.0-next.5

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 (275) hide show
  1. package/_index.scss +1 -1
  2. package/button/_button-theme.scss +108 -73
  3. package/card/_card-theme.scss +1 -3
  4. package/core/theming/_m2-inspection.scss +1 -1
  5. package/core/tokens/m2/_index.scss +8 -0
  6. package/core/tokens/m2/mdc/_button-filled.scss +92 -0
  7. package/core/tokens/m2/mdc/_button-protected.scss +94 -0
  8. package/core/tokens/m2/mdc/_icon-button.scss +2 -0
  9. package/core/typography/_versioning.scss +1 -1
  10. package/esm2022/autocomplete/autocomplete-origin.mjs +4 -4
  11. package/esm2022/autocomplete/autocomplete-trigger.mjs +4 -4
  12. package/esm2022/autocomplete/autocomplete.mjs +4 -4
  13. package/esm2022/autocomplete/module.mjs +5 -5
  14. package/esm2022/badge/badge-module.mjs +5 -5
  15. package/esm2022/badge/badge.mjs +4 -4
  16. package/esm2022/bottom-sheet/bottom-sheet-container.mjs +4 -4
  17. package/esm2022/bottom-sheet/bottom-sheet-module.mjs +5 -5
  18. package/esm2022/bottom-sheet/bottom-sheet.mjs +4 -4
  19. package/esm2022/button/button-base.mjs +7 -7
  20. package/esm2022/button/button.mjs +9 -9
  21. package/esm2022/button/fab.mjs +17 -17
  22. package/esm2022/button/icon-button.mjs +7 -7
  23. package/esm2022/button/module.mjs +5 -5
  24. package/esm2022/button-toggle/button-toggle-module.mjs +5 -5
  25. package/esm2022/button-toggle/button-toggle.mjs +7 -7
  26. package/esm2022/card/card.mjs +43 -43
  27. package/esm2022/card/module.mjs +5 -5
  28. package/esm2022/checkbox/checkbox-required-validator.mjs +4 -4
  29. package/esm2022/checkbox/checkbox.mjs +4 -4
  30. package/esm2022/checkbox/module.mjs +9 -9
  31. package/esm2022/chips/chip-action.mjs +4 -4
  32. package/esm2022/chips/chip-edit-input.mjs +4 -4
  33. package/esm2022/chips/chip-grid.mjs +4 -4
  34. package/esm2022/chips/chip-icons.mjs +10 -10
  35. package/esm2022/chips/chip-input.mjs +4 -4
  36. package/esm2022/chips/chip-listbox.mjs +4 -4
  37. package/esm2022/chips/chip-option.mjs +6 -6
  38. package/esm2022/chips/chip-row.mjs +6 -6
  39. package/esm2022/chips/chip-set.mjs +4 -4
  40. package/esm2022/chips/chip.mjs +5 -5
  41. package/esm2022/chips/module.mjs +5 -5
  42. package/esm2022/core/common-behaviors/common-module.mjs +5 -5
  43. package/esm2022/core/datetime/index.mjs +9 -9
  44. package/esm2022/core/datetime/native-date-adapter.mjs +4 -4
  45. package/esm2022/core/error/error-options.mjs +7 -7
  46. package/esm2022/core/line/line.mjs +8 -8
  47. package/esm2022/core/option/index.mjs +5 -5
  48. package/esm2022/core/option/optgroup.mjs +4 -4
  49. package/esm2022/core/option/option.mjs +4 -4
  50. package/esm2022/core/private/ripple-loader.mjs +4 -4
  51. package/esm2022/core/ripple/index.mjs +5 -5
  52. package/esm2022/core/ripple/ripple.mjs +4 -4
  53. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox-module.mjs +5 -5
  54. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +4 -4
  55. package/esm2022/core/version.mjs +1 -1
  56. package/esm2022/datepicker/calendar-body.mjs +4 -4
  57. package/esm2022/datepicker/calendar.mjs +8 -8
  58. package/esm2022/datepicker/date-range-input-parts.mjs +10 -10
  59. package/esm2022/datepicker/date-range-input.mjs +4 -4
  60. package/esm2022/datepicker/date-range-picker.mjs +4 -4
  61. package/esm2022/datepicker/date-range-selection-strategy.mjs +4 -4
  62. package/esm2022/datepicker/date-selection-model.mjs +10 -10
  63. package/esm2022/datepicker/datepicker-actions.mjs +10 -10
  64. package/esm2022/datepicker/datepicker-base.mjs +7 -7
  65. package/esm2022/datepicker/datepicker-errors.mjs +2 -2
  66. package/esm2022/datepicker/datepicker-input-base.mjs +4 -4
  67. package/esm2022/datepicker/datepicker-input.mjs +4 -4
  68. package/esm2022/datepicker/datepicker-intl.mjs +4 -4
  69. package/esm2022/datepicker/datepicker-module.mjs +5 -5
  70. package/esm2022/datepicker/datepicker-toggle.mjs +7 -7
  71. package/esm2022/datepicker/datepicker.mjs +4 -4
  72. package/esm2022/datepicker/month-view.mjs +4 -4
  73. package/esm2022/datepicker/multi-year-view.mjs +4 -4
  74. package/esm2022/datepicker/year-view.mjs +4 -4
  75. package/esm2022/dialog/dialog-container.mjs +4 -4
  76. package/esm2022/dialog/dialog-content-directives.mjs +13 -13
  77. package/esm2022/dialog/dialog.mjs +4 -4
  78. package/esm2022/dialog/module.mjs +5 -5
  79. package/esm2022/dialog/testing/dialog-opener.mjs +5 -3
  80. package/esm2022/divider/divider-module.mjs +5 -5
  81. package/esm2022/divider/divider.mjs +4 -4
  82. package/esm2022/expansion/accordion.mjs +4 -4
  83. package/esm2022/expansion/expansion-module.mjs +5 -5
  84. package/esm2022/expansion/expansion-panel-content.mjs +4 -4
  85. package/esm2022/expansion/expansion-panel-header.mjs +10 -10
  86. package/esm2022/expansion/expansion-panel.mjs +7 -7
  87. package/esm2022/form-field/directives/error.mjs +4 -4
  88. package/esm2022/form-field/directives/floating-label.mjs +4 -4
  89. package/esm2022/form-field/directives/hint.mjs +4 -4
  90. package/esm2022/form-field/directives/label.mjs +4 -4
  91. package/esm2022/form-field/directives/line-ripple.mjs +4 -4
  92. package/esm2022/form-field/directives/notched-outline.mjs +4 -4
  93. package/esm2022/form-field/directives/prefix.mjs +4 -4
  94. package/esm2022/form-field/directives/suffix.mjs +4 -4
  95. package/esm2022/form-field/form-field-control.mjs +4 -4
  96. package/esm2022/form-field/form-field.mjs +6 -6
  97. package/esm2022/form-field/module.mjs +5 -5
  98. package/esm2022/grid-list/grid-list-module.mjs +5 -5
  99. package/esm2022/grid-list/grid-list.mjs +4 -4
  100. package/esm2022/grid-list/grid-tile.mjs +16 -16
  101. package/esm2022/icon/icon-module.mjs +5 -5
  102. package/esm2022/icon/icon-registry.mjs +4 -4
  103. package/esm2022/icon/icon.mjs +4 -4
  104. package/esm2022/icon/testing/fake-icon-registry.mjs +8 -8
  105. package/esm2022/input/input.mjs +4 -4
  106. package/esm2022/input/module.mjs +5 -5
  107. package/esm2022/list/action-list.mjs +4 -4
  108. package/esm2022/list/list-base.mjs +7 -7
  109. package/esm2022/list/list-item-sections.mjs +19 -19
  110. package/esm2022/list/list-module.mjs +5 -5
  111. package/esm2022/list/list-option.mjs +4 -4
  112. package/esm2022/list/list.mjs +7 -7
  113. package/esm2022/list/nav-list.mjs +4 -4
  114. package/esm2022/list/selection-list.mjs +4 -4
  115. package/esm2022/list/subheader.mjs +4 -4
  116. package/esm2022/menu/menu-content.mjs +4 -4
  117. package/esm2022/menu/menu-item.mjs +4 -4
  118. package/esm2022/menu/menu-trigger.mjs +4 -4
  119. package/esm2022/menu/menu.mjs +4 -4
  120. package/esm2022/menu/module.mjs +5 -5
  121. package/esm2022/paginator/module.mjs +5 -5
  122. package/esm2022/paginator/paginator-intl.mjs +4 -4
  123. package/esm2022/paginator/paginator.mjs +4 -4
  124. package/esm2022/progress-bar/module.mjs +5 -5
  125. package/esm2022/progress-bar/progress-bar.mjs +4 -4
  126. package/esm2022/progress-spinner/module.mjs +5 -5
  127. package/esm2022/progress-spinner/progress-spinner.mjs +4 -4
  128. package/esm2022/radio/module.mjs +5 -5
  129. package/esm2022/radio/radio.mjs +8 -8
  130. package/esm2022/select/module.mjs +5 -5
  131. package/esm2022/select/select.mjs +9 -9
  132. package/esm2022/sidenav/drawer.mjs +10 -10
  133. package/esm2022/sidenav/sidenav-module.mjs +5 -5
  134. package/esm2022/sidenav/sidenav.mjs +10 -10
  135. package/esm2022/slide-toggle/module.mjs +9 -9
  136. package/esm2022/slide-toggle/slide-toggle-required-validator.mjs +4 -4
  137. package/esm2022/slide-toggle/slide-toggle.mjs +4 -4
  138. package/esm2022/slider/module.mjs +5 -5
  139. package/esm2022/slider/slider-input.mjs +7 -7
  140. package/esm2022/slider/slider-thumb.mjs +4 -4
  141. package/esm2022/slider/slider.mjs +4 -4
  142. package/esm2022/snack-bar/module.mjs +5 -5
  143. package/esm2022/snack-bar/simple-snack-bar.mjs +4 -4
  144. package/esm2022/snack-bar/snack-bar-container.mjs +4 -4
  145. package/esm2022/snack-bar/snack-bar-content.mjs +10 -10
  146. package/esm2022/snack-bar/snack-bar.mjs +4 -4
  147. package/esm2022/sort/sort-header-intl.mjs +4 -4
  148. package/esm2022/sort/sort-header.mjs +5 -5
  149. package/esm2022/sort/sort-module.mjs +5 -5
  150. package/esm2022/sort/sort.mjs +4 -4
  151. package/esm2022/stepper/step-content.mjs +4 -4
  152. package/esm2022/stepper/step-header.mjs +4 -4
  153. package/esm2022/stepper/step-label.mjs +4 -4
  154. package/esm2022/stepper/stepper-button.mjs +7 -7
  155. package/esm2022/stepper/stepper-icon.mjs +4 -4
  156. package/esm2022/stepper/stepper-intl.mjs +4 -4
  157. package/esm2022/stepper/stepper-module.mjs +5 -5
  158. package/esm2022/stepper/stepper.mjs +7 -7
  159. package/esm2022/table/cell.mjs +22 -22
  160. package/esm2022/table/module.mjs +5 -5
  161. package/esm2022/table/row.mjs +22 -22
  162. package/esm2022/table/table.mjs +7 -7
  163. package/esm2022/table/text-column.mjs +4 -4
  164. package/esm2022/tabs/module.mjs +5 -5
  165. package/esm2022/tabs/paginated-tab-header.mjs +4 -4
  166. package/esm2022/tabs/tab-body.mjs +7 -7
  167. package/esm2022/tabs/tab-content.mjs +4 -4
  168. package/esm2022/tabs/tab-group.mjs +4 -4
  169. package/esm2022/tabs/tab-header.mjs +4 -4
  170. package/esm2022/tabs/tab-label-wrapper.mjs +4 -4
  171. package/esm2022/tabs/tab-label.mjs +4 -4
  172. package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +10 -10
  173. package/esm2022/tabs/tab.mjs +4 -4
  174. package/esm2022/toolbar/toolbar-module.mjs +5 -5
  175. package/esm2022/toolbar/toolbar.mjs +7 -7
  176. package/esm2022/tooltip/module.mjs +5 -5
  177. package/esm2022/tooltip/tooltip.mjs +8 -8
  178. package/esm2022/tree/node.mjs +10 -10
  179. package/esm2022/tree/outlet.mjs +4 -4
  180. package/esm2022/tree/padding.mjs +4 -4
  181. package/esm2022/tree/toggle.mjs +4 -4
  182. package/esm2022/tree/tree-module.mjs +5 -5
  183. package/esm2022/tree/tree.mjs +4 -4
  184. package/fesm2022/autocomplete.mjs +13 -13
  185. package/fesm2022/autocomplete.mjs.map +1 -1
  186. package/fesm2022/badge.mjs +7 -7
  187. package/fesm2022/badge.mjs.map +1 -1
  188. package/fesm2022/bottom-sheet.mjs +10 -10
  189. package/fesm2022/bottom-sheet.mjs.map +1 -1
  190. package/fesm2022/button-toggle.mjs +10 -10
  191. package/fesm2022/button-toggle.mjs.map +1 -1
  192. package/fesm2022/button.mjs +40 -40
  193. package/fesm2022/button.mjs.map +1 -1
  194. package/fesm2022/card.mjs +46 -46
  195. package/fesm2022/card.mjs.map +1 -1
  196. package/fesm2022/checkbox.mjs +14 -14
  197. package/fesm2022/checkbox.mjs.map +1 -1
  198. package/fesm2022/chips.mjs +45 -45
  199. package/fesm2022/chips.mjs.map +1 -1
  200. package/fesm2022/core.mjs +56 -56
  201. package/fesm2022/core.mjs.map +1 -1
  202. package/fesm2022/datepicker.mjs +84 -84
  203. package/fesm2022/datepicker.mjs.map +1 -1
  204. package/fesm2022/dialog.mjs +22 -22
  205. package/fesm2022/dialog.mjs.map +1 -1
  206. package/fesm2022/divider.mjs +7 -7
  207. package/fesm2022/divider.mjs.map +1 -1
  208. package/fesm2022/expansion.mjs +25 -25
  209. package/fesm2022/expansion.mjs.map +1 -1
  210. package/fesm2022/form-field.mjs +36 -36
  211. package/fesm2022/form-field.mjs.map +1 -1
  212. package/fesm2022/grid-list.mjs +22 -22
  213. package/fesm2022/grid-list.mjs.map +1 -1
  214. package/fesm2022/icon/testing.mjs +7 -7
  215. package/fesm2022/icon/testing.mjs.map +1 -1
  216. package/fesm2022/icon.mjs +10 -10
  217. package/fesm2022/icon.mjs.map +1 -1
  218. package/fesm2022/input.mjs +7 -7
  219. package/fesm2022/input.mjs.map +1 -1
  220. package/fesm2022/list.mjs +49 -49
  221. package/fesm2022/list.mjs.map +1 -1
  222. package/fesm2022/menu.mjs +16 -16
  223. package/fesm2022/menu.mjs.map +1 -1
  224. package/fesm2022/paginator.mjs +10 -10
  225. package/fesm2022/paginator.mjs.map +1 -1
  226. package/fesm2022/progress-bar.mjs +7 -7
  227. package/fesm2022/progress-bar.mjs.map +1 -1
  228. package/fesm2022/progress-spinner.mjs +7 -7
  229. package/fesm2022/progress-spinner.mjs.map +1 -1
  230. package/fesm2022/radio.mjs +11 -11
  231. package/fesm2022/radio.mjs.map +1 -1
  232. package/fesm2022/select.mjs +12 -12
  233. package/fesm2022/select.mjs.map +1 -1
  234. package/fesm2022/sidenav.mjs +22 -22
  235. package/fesm2022/sidenav.mjs.map +1 -1
  236. package/fesm2022/slide-toggle.mjs +14 -14
  237. package/fesm2022/slide-toggle.mjs.map +1 -1
  238. package/fesm2022/slider.mjs +16 -16
  239. package/fesm2022/slider.mjs.map +1 -1
  240. package/fesm2022/snack-bar.mjs +22 -22
  241. package/fesm2022/snack-bar.mjs.map +1 -1
  242. package/fesm2022/sort.mjs +14 -14
  243. package/fesm2022/sort.mjs.map +1 -1
  244. package/fesm2022/stepper.mjs +31 -31
  245. package/fesm2022/stepper.mjs.map +1 -1
  246. package/fesm2022/table.mjs +55 -55
  247. package/fesm2022/table.mjs.map +1 -1
  248. package/fesm2022/tabs.mjs +40 -40
  249. package/fesm2022/tabs.mjs.map +1 -1
  250. package/fesm2022/toolbar.mjs +10 -10
  251. package/fesm2022/toolbar.mjs.map +1 -1
  252. package/fesm2022/tooltip.mjs +11 -11
  253. package/fesm2022/tooltip.mjs.map +1 -1
  254. package/fesm2022/tree.mjs +25 -25
  255. package/fesm2022/tree.mjs.map +1 -1
  256. package/form-field/_mdc-text-field-structure-overrides.scss +5 -0
  257. package/list/_list-theme.scss +3 -3
  258. package/package.json +49 -49
  259. package/prebuilt-themes/deeppurple-amber.css +1 -1
  260. package/prebuilt-themes/indigo-pink.css +1 -1
  261. package/prebuilt-themes/pink-bluegrey.css +1 -1
  262. package/prebuilt-themes/purple-green.css +1 -1
  263. package/radio/_radio-theme.scss +9 -0
  264. package/schematics/ng-add/index.js +1 -1
  265. package/schematics/ng-add/index.mjs +1 -1
  266. package/schematics/ng-add/setup-project.js +2 -2
  267. package/schematics/ng-add/setup-project.mjs +2 -2
  268. package/schematics/ng-add/theming/theming.js +5 -5
  269. package/schematics/ng-add/theming/theming.mjs +5 -5
  270. package/schematics/ng-generate/mdc-migration/index_bundled.js +9727 -6262
  271. package/schematics/ng-generate/mdc-migration/index_bundled.js.map +4 -4
  272. package/slider/_slider-theme.scss +77 -43
  273. package/snack-bar/_snack-bar-theme.scss +46 -18
  274. package/toolbar/_toolbar-theme.scss +55 -27
  275. package/tooltip/_tooltip-theme.scss +56 -24
package/_index.scss CHANGED
@@ -112,7 +112,7 @@ list-density, list-base;
112
112
  progress-spinner-theme, progress-spinner-color, progress-spinner-typography,
113
113
  progress-spinner-density, progress-spinner-base;
114
114
  @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
115
- radio-density;
115
+ radio-density, radio-base;
116
116
  @forward './select/select-theme' as select-* show select-theme, select-color, select-typography,
117
117
  select-density;
118
118
  @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
@@ -5,12 +5,20 @@
5
5
  @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
6
6
  @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
7
7
  @use '@material/theme/theme-color' as mdc-theme-color;
8
+ @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
8
9
 
9
10
  @use './button-theme-private';
10
11
  @use '../core/mdc-helpers/mdc-helpers';
11
12
  @use '../core/theming/theming';
12
13
  @use '../core/theming/inspection';
13
14
  @use '../core/typography/typography';
15
+ @use '../core/tokens/m2/mdc/button-filled' as tokens-mdc-button-filled;
16
+ @use '../core/tokens/m2/mdc/button-protected' as tokens-mdc-button-protected;
17
+
18
+ @function _on-color($theme, $palette) {
19
+ $is-dark: inspection.get-theme-type($theme) == dark;
20
+ @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
21
+ }
14
22
 
15
23
  @mixin _button-variant($color) {
16
24
  @include mdc-button-text-theme.theme((
@@ -18,20 +26,6 @@
18
26
  ));
19
27
  }
20
28
 
21
- @mixin _unelevated-button-variant($foreground, $background) {
22
- @include mdc-button-filled-theme.theme((
23
- container-color: $background,
24
- label-text-color: $foreground,
25
- ));
26
- }
27
-
28
- @mixin _raised-button-variant($foreground, $background) {
29
- @include mdc-button-protected-theme.theme((
30
- container-color: $background,
31
- label-text-color: $foreground,
32
- ));
33
- }
34
-
35
29
  @mixin _outlined-button-variant($color) {
36
30
  @include mdc-button-outlined-theme.theme((
37
31
  label-text-color: $color,
@@ -79,65 +73,6 @@
79
73
  }
80
74
  }
81
75
 
82
- .mat-mdc-unelevated-button {
83
- &.mat-unthemed {
84
- @include _unelevated-button-variant($on-surface, $surface);
85
- }
86
-
87
- &.mat-primary {
88
- @include _unelevated-button-variant($on-primary, $primary);
89
- }
90
-
91
- &.mat-accent {
92
- @include _unelevated-button-variant($on-secondary, $secondary);
93
- }
94
-
95
- &.mat-warn {
96
- @include _unelevated-button-variant($on-error, $error);
97
- }
98
-
99
- @include button-theme-private.apply-disabled-style() {
100
- @include mdc-button-filled-theme.theme((
101
- // We need to pass both the disabled and enabled values, because the enabled
102
- // ones apply to anchors while the disabled ones are for buttons.
103
- disabled-container-color: $disabled-container-color,
104
- disabled-label-text-color: $disabled-ink-color,
105
- container-color: $disabled-container-color,
106
- label-text-color: $disabled-ink-color,
107
- ));
108
- }
109
- }
110
-
111
- .mat-mdc-raised-button {
112
- &.mat-unthemed {
113
- @include _raised-button-variant($on-surface, $surface);
114
- }
115
-
116
- &.mat-primary {
117
- @include _raised-button-variant($on-primary, $primary);
118
- }
119
-
120
- &.mat-accent {
121
- @include _raised-button-variant($on-secondary, $secondary);
122
- }
123
-
124
- &.mat-warn {
125
- @include _raised-button-variant($on-error, $error);
126
- }
127
-
128
- @include button-theme-private.apply-disabled-style() {
129
- @include mdc-button-protected-theme.theme((
130
- // We need to pass both the disabled and enabled values, because the enabled
131
- // ones apply to anchors while the disabled ones are for buttons.
132
- disabled-container-color: $disabled-container-color,
133
- disabled-label-text-color: $disabled-ink-color,
134
- container-color: $disabled-container-color,
135
- label-text-color: $disabled-ink-color,
136
- container-elevation: 0,
137
- ));
138
- }
139
- }
140
-
141
76
  .mat-mdc-outlined-button {
142
77
  @include mdc-button-outlined-theme.theme((
143
78
  outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.12)
@@ -180,6 +115,106 @@
180
115
  @include button-theme-private.ripple-theme-styles($theme, true);
181
116
  }
182
117
  }
118
+
119
+ $surface: inspection.get-theme-color($theme, background, card);
120
+ $primary: inspection.get-theme-color($theme, primary);
121
+ $accent: inspection.get-theme-color($theme, accent);
122
+ $error: inspection.get-theme-color($theme, warn);
123
+
124
+ $on-surface: _on-color($theme, $surface);
125
+ $on-primary: _on-color($theme, $primary);
126
+ $on-accent: _on-color($theme, $accent);
127
+ $on-error: _on-color($theme, $error);
128
+
129
+ .mat-mdc-unelevated-button {
130
+ $default-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $surface, $on-surface);
131
+ $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
132
+ $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
133
+ $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
134
+
135
+ &.mat-unthemed {
136
+ @include mdc-button-filled-theme.theme($default-color-tokens);
137
+ }
138
+
139
+ &.mat-primary {
140
+ @include mdc-button-filled-theme.theme($primary-color-tokens);
141
+ }
142
+
143
+ &.mat-accent {
144
+ @include mdc-button-filled-theme.theme($accent-color-tokens);
145
+ }
146
+
147
+ &.mat-warn {
148
+ @include mdc-button-filled-theme.theme($warn-color-tokens);
149
+ }
150
+ }
151
+
152
+ .mat-mdc-raised-button {
153
+ $default-color-tokens: tokens-mdc-button-protected.get-color-tokens(
154
+ $theme,
155
+ $surface,
156
+ $on-surface
157
+ );
158
+ $primary-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $primary, $on-primary);
159
+ $accent-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $accent, $on-accent);
160
+ $warn-color-tokens: tokens-mdc-button-filled.get-color-tokens($theme, $error, $on-error);
161
+
162
+ &.mat-unthemed {
163
+ @include mdc-button-protected-theme.theme($default-color-tokens);
164
+ }
165
+
166
+ &.mat-primary {
167
+ @include mdc-button-protected-theme.theme($primary-color-tokens);
168
+ }
169
+
170
+ &.mat-accent {
171
+ @include mdc-button-protected-theme.theme($accent-color-tokens);
172
+ }
173
+
174
+ &.mat-warn {
175
+ @include mdc-button-protected-theme.theme($warn-color-tokens);
176
+ }
177
+
178
+ // TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
179
+ @include mdc-helpers.disable-mdc-fallback-declarations {
180
+ @include mdc-elevation-theme.elevation(2);
181
+
182
+ &:hover, &:focus {
183
+ @include mdc-elevation-theme.elevation(4);
184
+ }
185
+
186
+ &:active, &:focus:active {
187
+ @include mdc-elevation-theme.elevation(8);
188
+ }
189
+ }
190
+ }
191
+
192
+ $is-dark: inspection.get-theme-type($theme) == dark;
193
+ $disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
194
+ $disabled-container-color: rgba($on-surface, 0.12);
195
+
196
+ .mat-mdc-raised-button {
197
+ @include button-theme-private.apply-disabled-style() {
198
+ @include mdc-elevation-theme.elevation(0);
199
+ @include mdc-button-protected-theme.theme((
200
+ disabled-container-color: $disabled-container-color,
201
+ disabled-label-text-color: $disabled-ink-color,
202
+ container-color: $disabled-container-color,
203
+ label-text-color: $disabled-ink-color,
204
+ ));
205
+ }
206
+ }
207
+
208
+ .mat-mdc-unelevated-button {
209
+ @include button-theme-private.apply-disabled-style() {
210
+ @include mdc-button-filled-theme.theme((
211
+ disabled-container-color: $disabled-container-color,
212
+ disabled-label-text-color: $disabled-ink-color,
213
+ container-color: $disabled-container-color,
214
+ label-text-color: $disabled-ink-color,
215
+ ));
216
+ }
217
+ }
183
218
  }
184
219
 
185
220
  @mixin typography($theme) {
@@ -87,9 +87,7 @@
87
87
  }
88
88
  }
89
89
 
90
- @mixin theme($theme-or-color-config) {
91
- $theme: theming.private-legacy-get-theme($theme-or-color-config);
92
-
90
+ @mixin theme($theme) {
93
91
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
94
92
  @if inspection.get-theme-version($theme) == 1 {
95
93
  @include _theme-from-tokens(inspection.get-theme-tokens($theme));
@@ -28,7 +28,7 @@ $_typography-keys: (
28
28
  headline-5,
29
29
  headline-6,
30
30
  subtitle-1,
31
- font-famiy,
31
+ font-family,
32
32
  subtitle-2,
33
33
  body-1,
34
34
  body-2,
@@ -3,10 +3,12 @@
3
3
  @use '../../style/sass-utils';
4
4
 
5
5
  @use './mat/card' as tokens-mat-card;
6
+ @use './mat/toolbar' as tokens-mat-toolbar;
6
7
  @use './mat/radio' as tokens-mat-radio;
7
8
  @use './mat/snack-bar' as tokens-mat-snack-bar;
8
9
  @use './mat/tab-header' as tokens-mat-tab-header;
9
10
  @use './mat/tab-header-with-background' as tokens-mat-tab-header-with-background;
11
+ @use './mat/slider' as tokens-mat-slider;
10
12
  @use './mdc/checkbox' as tokens-mdc-checkbox;
11
13
  @use './mdc/circular-progress' as tokens-mdc-circular-progress;
12
14
  @use './mdc/dialog' as tokens-mdc-dialog;
@@ -19,6 +21,8 @@
19
21
  @use './mdc/snack-bar' as tokens-mdc-snack-bar;
20
22
  @use './mdc/tab' as tokens-mdc-tab;
21
23
  @use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
24
+ @use './mdc/slider' as tokens-mdc-slider;
25
+ @use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
22
26
 
23
27
  /// Gets the tokens for the given theme, m2 tokens module, and theming system.
24
28
  /// @param {Map} $theme The Angular Material theme object to generate token values from.
@@ -68,6 +72,8 @@
68
72
  _get-tokens-for-module($theme, tokens-mat-snack-bar),
69
73
  _get-tokens-for-module($theme, tokens-mat-tab-header),
70
74
  _get-tokens-for-module($theme, tokens-mat-tab-header-with-background),
75
+ _get-tokens-for-module($theme, tokens-mat-toolbar),
76
+ _get-tokens-for-module($theme, tokens-mat-slider),
71
77
  _get-tokens-for-module($theme, tokens-mdc-checkbox),
72
78
  _get-tokens-for-module($theme, tokens-mdc-circular-progress),
73
79
  _get-tokens-for-module($theme, tokens-mdc-dialog),
@@ -80,5 +86,7 @@
80
86
  _get-tokens-for-module($theme, tokens-mdc-snack-bar),
81
87
  _get-tokens-for-module($theme, tokens-mdc-tab),
82
88
  _get-tokens-for-module($theme, tokens-mdc-tab-indicator),
89
+ _get-tokens-for-module($theme, tokens-mdc-slider),
90
+ _get-tokens-for-module($theme, tokens-mdc-plain-tooltip),
83
91
  );
84
92
  }
@@ -0,0 +1,92 @@
1
+ @use '../../token-utils';
2
+ @use '../../../mdc-helpers/mdc-helpers';
3
+ @use '../../../style/sass-utils';
4
+ @use '../../../theming/inspection';
5
+
6
+ // The prefix used to generate the fully qualified name for tokens in this file.
7
+ $prefix: (mdc, button-filled);
8
+
9
+ // Tokens that can't be configured through Angular Material's current theming API,
10
+ // but may be in a future version of the theming API.
11
+ //
12
+ // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
13
+ // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
14
+ // our CSS.
15
+ @function get-unthemable-tokens() {
16
+ @return (
17
+ container-elevation: 0,
18
+ container-height: 36px,
19
+ container-shape: 4px,
20
+ disabled-container-elevation: 0,
21
+ focus-container-elevation: 0,
22
+ hover-container-elevation: 0,
23
+ keep-touch-target: false,
24
+ pressed-container-elevation: 0,
25
+
26
+ focus-state-layer-opacity: null,
27
+ hover-state-layer-opacity: null,
28
+ pressed-state-layer-opacity: null,
29
+ container-shadow-color: null,
30
+ focus-label-text-color: null,
31
+ hover-label-text-color: null,
32
+ label-text-font: null,
33
+ label-text-size: null,
34
+ label-text-tracking: null,
35
+ label-text-transform: null,
36
+ label-text-weight: null,
37
+ pressed-label-text-color: null,
38
+ with-icon-disabled-icon-color: null,
39
+ with-icon-focus-icon-color: null,
40
+ with-icon-hover-icon-color: null,
41
+ with-icon-icon-color: null,
42
+ with-icon-icon-size: null,
43
+ with-icon-pressed-icon-color: null
44
+ );
45
+ }
46
+
47
+ @function _on-color($theme, $palette) {
48
+ @if ($palette) {
49
+ $is-dark: inspection.get-theme-type($theme) == dark;
50
+ @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
51
+ }
52
+ }
53
+
54
+ // Tokens that can be configured through Angular Material's color theming API.
55
+ @function get-color-tokens($theme, $color: null, $on-color: null) {
56
+ $is-dark: inspection.get-theme-type($theme) == dark;
57
+ $primary: inspection.get-theme-color($theme, primary);
58
+ $surface: inspection.get-theme-color($theme, background, card);
59
+ $on-primary: _on-color($theme, $primary);
60
+ $on-surface: _on-color($theme, $surface);
61
+
62
+ @return (
63
+ container-color: if($color, $color, transparent),
64
+ disabled-container-color: rgba($on-surface, 0.12),
65
+ disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
66
+ focus-state-layer-color: $on-primary,
67
+ hover-state-layer-color: $on-primary,
68
+ label-text-color: if($on-color, $on-color, inherit),
69
+ pressed-state-layer-color: $on-primary
70
+ );
71
+ }
72
+
73
+ // Tokens that can be configured through Angular Material's typography theming API.
74
+ @function get-typography-tokens($theme) {
75
+ @return ();
76
+ }
77
+
78
+ // Tokens that can be configured through Angular Material's density theming API.
79
+ @function get-density-tokens($theme) {
80
+ @return ();
81
+ }
82
+
83
+ // Combines the tokens generated by the above functions into a single map with placeholder values.
84
+ // This is used to create token slots.
85
+ @function get-token-slots() {
86
+ @return sass-utils.deep-merge-all(
87
+ get-unthemable-tokens(),
88
+ get-color-tokens(token-utils.$placeholder-color-config),
89
+ get-typography-tokens(token-utils.$placeholder-typography-config),
90
+ get-density-tokens(token-utils.$placeholder-density-config)
91
+ );
92
+ }
@@ -0,0 +1,94 @@
1
+ @use '../../token-utils';
2
+ @use '../../../mdc-helpers/mdc-helpers';
3
+ @use '../../../style/sass-utils';
4
+ @use '../../../theming/inspection';
5
+
6
+ // The prefix used to generate the fully qualified name for tokens in this file.
7
+ $prefix: (mdc, button-protected);
8
+
9
+ // Tokens that can't be configured through Angular Material's current theming API,
10
+ // but may be in a future version of the theming API.
11
+ //
12
+ // Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
13
+ // `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
14
+ // our CSS.
15
+ @function get-unthemable-tokens() {
16
+ @return (
17
+ container-shape: 4px,
18
+ container-height: 36px,
19
+ keep-touch-target: false,
20
+
21
+ focus-ring-color: null,
22
+ focus-ring-offset: null,
23
+ focus-state-layer-opacity: null,
24
+ hover-state-layer-opacity: null,
25
+ pressed-state-layer-opacity: null,
26
+ container-shadow-color: null,
27
+ container-elevation: null,
28
+ hover-container-elevation: null,
29
+ disabled-container-elevation: null,
30
+ focus-container-elevation: null,
31
+ pressed-container-elevation: null,
32
+ label-text-font: null,
33
+ label-text-size: null,
34
+ label-text-tracking: null,
35
+ label-text-transform: null,
36
+ label-text-weight: null,
37
+ with-icon-icon-size: null,
38
+ focus-label-text-color: null,
39
+ hover-label-text-color: null,
40
+ pressed-label-text-color: null,
41
+ with-icon-disabled-icon-color: null,
42
+ with-icon-focus-icon-color: null,
43
+ with-icon-hover-icon-color: null,
44
+ with-icon-icon-color: null,
45
+ with-icon-pressed-icon-color: null
46
+ );
47
+ }
48
+
49
+ @function _on-color($theme, $palette) {
50
+ @if ($palette) {
51
+ $is-dark: inspection.get-theme-type($theme) == dark;
52
+ @return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
53
+ }
54
+ }
55
+
56
+ // Tokens that can be configured through Angular Material's color theming API.
57
+ @function get-color-tokens($theme, $color: null, $on-color: null) {
58
+ $is-dark: inspection.get-theme-type($theme) == dark;
59
+ $primary: inspection.get-theme-color($theme, primary);
60
+ $surface: inspection.get-theme-color($theme, background, card);
61
+ $on-primary: _on-color($theme, $primary);
62
+ $on-surface: _on-color($theme, $surface);
63
+
64
+ @return (
65
+ container-color: if($color, $color, transparent),
66
+ focus-state-layer-color: $on-primary,
67
+ hover-state-layer-color: $on-primary,
68
+ pressed-state-layer-color: $on-primary,
69
+ label-text-color: if($on-color, $on-color, inherit),
70
+ disabled-container-color: rgba($on-surface, 0.12),
71
+ disabled-label-text-color: rgba($on-surface, 0.38)
72
+ );
73
+ }
74
+
75
+ // Tokens that can be configured through Angular Material's typography theming API.
76
+ @function get-typography-tokens($theme) {
77
+ @return ();
78
+ }
79
+
80
+ // Tokens that can be configured through Angular Material's density theming API.
81
+ @function get-density-tokens($theme) {
82
+ @return ();
83
+ }
84
+
85
+ // Combines the tokens generated by the above functions into a single map with placeholder values.
86
+ // This is used to create token slots.
87
+ @function get-token-slots() {
88
+ @return sass-utils.deep-merge-all(
89
+ get-unthemable-tokens(),
90
+ get-color-tokens(token-utils.$placeholder-color-config),
91
+ get-typography-tokens(token-utils.$placeholder-typography-config),
92
+ get-density-tokens(token-utils.$placeholder-density-config)
93
+ );
94
+ }
@@ -39,6 +39,8 @@ $prefix: (mdc, icon-button);
39
39
  pressed-icon-color: null,
40
40
  pressed-state-layer-color: null,
41
41
  pressed-state-layer-opacity: null,
42
+ focus-ring-color: null,
43
+ focus-ring-offset: null,
42
44
  );
43
45
  }
44
46
 
@@ -71,7 +71,7 @@
71
71
  headline-5: map.get($config, headline),
72
72
  headline-6: map.get($config, title),
73
73
  subtitle-1: map.get($config, subheading-2),
74
- font-famiy: map.get($config, font-family),
74
+ font-family: map.get($config, font-family),
75
75
 
76
76
  // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2
77
77
  // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018
@@ -17,14 +17,14 @@ export class MatAutocompleteOrigin {
17
17
  elementRef) {
18
18
  this.elementRef = elementRef;
19
19
  }
20
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
21
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
20
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: MatAutocompleteOrigin, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
21
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.0-next.4", type: MatAutocompleteOrigin, selector: "[matAutocompleteOrigin]", exportAs: ["matAutocompleteOrigin"], ngImport: i0 }); }
22
22
  }
23
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
23
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0-next.4", ngImport: i0, type: MatAutocompleteOrigin, decorators: [{
24
24
  type: Directive,
25
25
  args: [{
26
26
  selector: '[matAutocompleteOrigin]',
27
27
  exportAs: 'matAutocompleteOrigin',
28
28
  }]
29
29
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
30
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDOzhHQUpPLHFCQUFxQjtrR0FBckIscUJBQXFCOzsyRkFBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19
30
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXV0b2NvbXBsZXRlLW9yaWdpbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9tYXRlcmlhbC9hdXRvY29tcGxldGUvYXV0b2NvbXBsZXRlLW9yaWdpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7O0dBTUc7QUFFSCxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBQyxNQUFNLGVBQWUsQ0FBQzs7QUFFcEQ7OztHQUdHO0FBS0gsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQztJQUNFLGtFQUFrRTtJQUMzRCxVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtJQUN6QyxDQUFDO3FIQUpPLHFCQUFxQjt5R0FBckIscUJBQXFCOztrR0FBckIscUJBQXFCO2tCQUpqQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSx5QkFBeUI7b0JBQ25DLFFBQVEsRUFBRSx1QkFBdUI7aUJBQ2xDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBAbGljZW5zZVxuICogQ29weXJpZ2h0IEdvb2dsZSBMTEMgQWxsIFJpZ2h0cyBSZXNlcnZlZC5cbiAqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2FuZ3VsYXIuaW8vbGljZW5zZVxuICovXG5cbmltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLyoqXG4gKiBEaXJlY3RpdmUgYXBwbGllZCB0byBhbiBlbGVtZW50IHRvIG1ha2UgaXQgdXNhYmxlXG4gKiBhcyBhIGNvbm5lY3Rpb24gcG9pbnQgZm9yIGFuIGF1dG9jb21wbGV0ZSBwYW5lbC5cbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW21hdEF1dG9jb21wbGV0ZU9yaWdpbl0nLFxuICBleHBvcnRBczogJ21hdEF1dG9jb21wbGV0ZU9yaWdpbicsXG59KVxuZXhwb3J0IGNsYXNzIE1hdEF1dG9jb21wbGV0ZU9yaWdpbiB7XG4gIGNvbnN0cnVjdG9yKFxuICAgIC8qKiBSZWZlcmVuY2UgdG8gdGhlIGVsZW1lbnQgb24gd2hpY2ggdGhlIGRpcmVjdGl2ZSBpcyBhcHBsaWVkLiAqL1xuICAgIHB1YmxpYyBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgKSB7fVxufVxuIl19