@angular/material 20.1.0-next.1 → 20.1.0-next.2

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 (227) hide show
  1. package/_index.scss +1 -2
  2. package/autocomplete/_autocomplete-theme.scss +28 -37
  3. package/badge/_badge-theme.scss +35 -44
  4. package/badge/_m2-badge.scss +3 -2
  5. package/bottom-sheet/_bottom-sheet-theme.scss +28 -40
  6. package/bottom-sheet/_m2-bottom-sheet.scss +6 -9
  7. package/button/_button-theme.scss +37 -55
  8. package/button/_fab-theme.scss +42 -56
  9. package/button/_icon-button-theme.scss +30 -48
  10. package/button/_m2-button.scss +21 -25
  11. package/button/_m2-fab.scss +5 -5
  12. package/button/testing/index.d.ts +1 -0
  13. package/button-toggle/_button-toggle-theme.scss +29 -44
  14. package/button-toggle/_m2-button-toggle.scss +11 -17
  15. package/card/_card-theme.scss +28 -36
  16. package/card/_m2-card.scss +11 -13
  17. package/checkbox/_checkbox-theme.scss +35 -50
  18. package/checkbox/_m2-checkbox.scss +6 -5
  19. package/chips/_chips-theme.scss +24 -30
  20. package/chips/_m2-chip.scss +6 -5
  21. package/core/_core-theme.scss +48 -67
  22. package/core/focus-indicators/_private.scss +2 -5
  23. package/core/m2/_theming.scss +32 -41
  24. package/core/option/_m2-optgroup.scss +6 -6
  25. package/core/option/_m2-option.scss +6 -5
  26. package/core/option/_optgroup-theme.scss +28 -30
  27. package/core/option/_option-theme.scss +35 -34
  28. package/core/ripple/_ripple-theme.scss +28 -33
  29. package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss +55 -45
  30. package/core/theming/_all-theme.scss +38 -42
  31. package/core/theming/_definition.scss +20 -13
  32. package/core/theming/_inspection.scss +0 -12
  33. package/core/theming/_m2-inspection.scss +0 -33
  34. package/core/theming/_theming.scss +4 -172
  35. package/core/tokens/_m2-utils.scss +5 -65
  36. package/core/tokens/_m3-utils.scss +2 -14
  37. package/core/tokens/_token-utils.scss +7 -27
  38. package/core/tokens/m2/_index.scss +6 -0
  39. package/core/tokens/m2/_md-sys-color.scss +123 -0
  40. package/core/tokens/m2/_md-sys-elevation.scss +16 -0
  41. package/core/tokens/m2/_md-sys-motion.scss +36 -0
  42. package/core/tokens/m2/_md-sys-shape.scss +22 -0
  43. package/core/tokens/m2/_md-sys-state.scss +15 -0
  44. package/core/tokens/m2/_md-sys-typescale.scss +68 -0
  45. package/core/tokens/m3/_md-sys-color.scss +2 -2
  46. package/core/tokens/m3/_md-sys-typescale.scss +1 -1
  47. package/core/tokens/m3/_theme.scss +14 -26
  48. package/datepicker/_datepicker-theme.scss +38 -40
  49. package/datepicker/_m2-datepicker.scss +7 -14
  50. package/dialog/_dialog-theme.scss +28 -34
  51. package/dialog/_m2-dialog.scss +11 -13
  52. package/divider/_divider-theme.scss +28 -30
  53. package/expansion/_expansion-theme.scss +28 -39
  54. package/expansion/_m2-expansion.scss +11 -10
  55. package/expansion/_m3-expansion.scss +2 -0
  56. package/fesm2022/animation-DfMFjxHu.mjs.map +1 -1
  57. package/fesm2022/autocomplete/testing.mjs.map +1 -1
  58. package/fesm2022/autocomplete.mjs +1 -1
  59. package/fesm2022/autocomplete.mjs.map +1 -1
  60. package/fesm2022/badge/testing.mjs.map +1 -1
  61. package/fesm2022/badge.mjs.map +1 -1
  62. package/fesm2022/bottom-sheet/testing.mjs.map +1 -1
  63. package/fesm2022/bottom-sheet.mjs.map +1 -1
  64. package/fesm2022/button/testing.mjs +7 -4
  65. package/fesm2022/button/testing.mjs.map +1 -1
  66. package/fesm2022/button-toggle/testing.mjs.map +1 -1
  67. package/fesm2022/button-toggle.mjs.map +1 -1
  68. package/fesm2022/button.mjs.map +1 -1
  69. package/fesm2022/card/testing.mjs.map +1 -1
  70. package/fesm2022/card.mjs.map +1 -1
  71. package/fesm2022/checkbox/testing.mjs.map +1 -1
  72. package/fesm2022/checkbox.mjs.map +1 -1
  73. package/fesm2022/chips/testing.mjs.map +1 -1
  74. package/fesm2022/chips.mjs +1 -1
  75. package/fesm2022/chips.mjs.map +1 -1
  76. package/fesm2022/common-module-cKSwHniA.mjs.map +1 -1
  77. package/fesm2022/core/testing.mjs.map +1 -1
  78. package/fesm2022/core.mjs +1 -1
  79. package/fesm2022/core.mjs.map +1 -1
  80. package/fesm2022/date-formats-K6TQue-Y.mjs.map +1 -1
  81. package/fesm2022/date-range-input-harness-DEyfkeOs.mjs.map +1 -1
  82. package/fesm2022/datepicker/testing.mjs.map +1 -1
  83. package/fesm2022/datepicker.mjs +1 -1
  84. package/fesm2022/datepicker.mjs.map +1 -1
  85. package/fesm2022/dialog/testing.mjs.map +1 -1
  86. package/fesm2022/dialog.mjs.map +1 -1
  87. package/fesm2022/divider/testing.mjs.map +1 -1
  88. package/fesm2022/divider.mjs.map +1 -1
  89. package/fesm2022/error-options-DCNQlTOA.mjs.map +1 -1
  90. package/fesm2022/error-state-Dtb1IHM-.mjs.map +1 -1
  91. package/fesm2022/expansion/testing.mjs.map +1 -1
  92. package/fesm2022/expansion.mjs +2 -2
  93. package/fesm2022/expansion.mjs.map +1 -1
  94. package/fesm2022/form-field/testing/control.mjs.map +1 -1
  95. package/fesm2022/form-field/testing.mjs.map +1 -1
  96. package/fesm2022/{form-field-C9DZXojn.mjs → form-field-CFbrnFED.mjs} +3 -3
  97. package/fesm2022/form-field-CFbrnFED.mjs.map +1 -0
  98. package/fesm2022/form-field.mjs +2 -2
  99. package/fesm2022/form-field.mjs.map +1 -1
  100. package/fesm2022/grid-list/testing.mjs.map +1 -1
  101. package/fesm2022/grid-list.mjs.map +1 -1
  102. package/fesm2022/icon/testing.mjs.map +1 -1
  103. package/fesm2022/icon-button-DxiIc1ex.mjs.map +1 -1
  104. package/fesm2022/icon-registry-CwOTJ7YM.mjs.map +1 -1
  105. package/fesm2022/icon.mjs.map +1 -1
  106. package/fesm2022/index-BFRo2fUq.mjs.map +1 -1
  107. package/fesm2022/index-DwiL-HGk.mjs.map +1 -1
  108. package/fesm2022/input/testing.mjs.map +1 -1
  109. package/fesm2022/input-harness-C5Msdc4-.mjs.map +1 -1
  110. package/fesm2022/input-value-accessor-D1GvPuqO.mjs.map +1 -1
  111. package/fesm2022/input.mjs +3 -27
  112. package/fesm2022/input.mjs.map +1 -1
  113. package/fesm2022/internal-form-field-D5iFxU6d.mjs.map +1 -1
  114. package/fesm2022/line-Bz5f9Cyx.mjs.map +1 -1
  115. package/fesm2022/list/testing.mjs.map +1 -1
  116. package/fesm2022/list.mjs.map +1 -1
  117. package/fesm2022/material.mjs.map +1 -1
  118. package/fesm2022/menu/testing.mjs +97 -13
  119. package/fesm2022/menu/testing.mjs.map +1 -1
  120. package/fesm2022/menu.mjs +343 -122
  121. package/fesm2022/menu.mjs.map +1 -1
  122. package/fesm2022/{module-BDiw_nWS.mjs → module-B0CLRw5e.mjs} +3 -3
  123. package/fesm2022/module-B0CLRw5e.mjs.map +1 -0
  124. package/fesm2022/{module-DzZHEh7B.mjs → module-B62K-792.mjs} +2 -2
  125. package/fesm2022/module-B62K-792.mjs.map +1 -0
  126. package/fesm2022/module-CWxMD37a.mjs.map +1 -1
  127. package/fesm2022/module-Ce6F7TNm.mjs.map +1 -1
  128. package/fesm2022/option-BzhYL_xC.mjs.map +1 -1
  129. package/fesm2022/option-harness-BFcc-M_4.mjs.map +1 -1
  130. package/fesm2022/paginator/testing.mjs.map +1 -1
  131. package/fesm2022/paginator.mjs +3 -3
  132. package/fesm2022/paginator.mjs.map +1 -1
  133. package/fesm2022/progress-bar/testing.mjs.map +1 -1
  134. package/fesm2022/progress-bar.mjs.map +1 -1
  135. package/fesm2022/progress-spinner/testing.mjs.map +1 -1
  136. package/fesm2022/progress-spinner.mjs.map +1 -1
  137. package/fesm2022/pseudo-checkbox-DDmgx3P4.mjs.map +1 -1
  138. package/fesm2022/pseudo-checkbox-module-4F8Up4PL.mjs.map +1 -1
  139. package/fesm2022/public-api-BoO5eSq-.mjs.map +1 -1
  140. package/fesm2022/radio/testing.mjs.map +1 -1
  141. package/fesm2022/radio.mjs.map +1 -1
  142. package/fesm2022/ripple-BYgV4oZC.mjs.map +1 -1
  143. package/fesm2022/ripple-loader-BnMiRtmT.mjs.map +1 -1
  144. package/fesm2022/select/testing.mjs.map +1 -1
  145. package/fesm2022/select.mjs +3 -3
  146. package/fesm2022/select.mjs.map +1 -1
  147. package/fesm2022/sidenav/testing.mjs.map +1 -1
  148. package/fesm2022/sidenav.mjs.map +1 -1
  149. package/fesm2022/slide-toggle/testing.mjs.map +1 -1
  150. package/fesm2022/slide-toggle.mjs +2 -2
  151. package/fesm2022/slide-toggle.mjs.map +1 -1
  152. package/fesm2022/slider/testing.mjs.map +1 -1
  153. package/fesm2022/slider.mjs.map +1 -1
  154. package/fesm2022/snack-bar/testing.mjs.map +1 -1
  155. package/fesm2022/snack-bar.mjs +2 -2
  156. package/fesm2022/snack-bar.mjs.map +1 -1
  157. package/fesm2022/sort/testing.mjs.map +1 -1
  158. package/fesm2022/sort.mjs.map +1 -1
  159. package/fesm2022/stepper/testing.mjs.map +1 -1
  160. package/fesm2022/stepper.mjs.map +1 -1
  161. package/fesm2022/structural-styles-CObeNzjn.mjs.map +1 -1
  162. package/fesm2022/table/testing.mjs.map +1 -1
  163. package/fesm2022/table.mjs.map +1 -1
  164. package/fesm2022/tabs/testing.mjs.map +1 -1
  165. package/fesm2022/tabs.mjs.map +1 -1
  166. package/fesm2022/timepicker/testing.mjs.map +1 -1
  167. package/fesm2022/timepicker.mjs +1 -1
  168. package/fesm2022/timepicker.mjs.map +1 -1
  169. package/fesm2022/toolbar/testing.mjs.map +1 -1
  170. package/fesm2022/toolbar.mjs.map +1 -1
  171. package/fesm2022/tooltip/testing.mjs.map +1 -1
  172. package/fesm2022/tooltip.mjs.map +1 -1
  173. package/fesm2022/tree/testing.mjs.map +1 -1
  174. package/fesm2022/tree.mjs.map +1 -1
  175. package/form-field/_form-field-theme.scss +35 -51
  176. package/form-field/_m2-form-field.scss +21 -29
  177. package/grid-list/_grid-list-theme.scss +28 -28
  178. package/grid-list/_m2-grid-list.scss +7 -9
  179. package/icon/_icon-theme.scss +40 -41
  180. package/input/_input-theme.scss +1 -4
  181. package/input/index.d.ts +0 -11
  182. package/list/_list-theme.scss +55 -53
  183. package/list/_m2-list.scss +16 -26
  184. package/menu/_m2-menu.scss +6 -6
  185. package/menu/_menu-theme.scss +28 -33
  186. package/menu/index.d.ts +145 -61
  187. package/menu/testing/index.d.ts +50 -2
  188. package/package.json +2 -2
  189. package/paginator/_m2-paginator.scss +7 -8
  190. package/paginator/_paginator-theme.scss +28 -33
  191. package/prebuilt-themes/deeppurple-amber.css +1 -1
  192. package/prebuilt-themes/indigo-pink.css +1 -1
  193. package/prebuilt-themes/pink-bluegrey.css +1 -1
  194. package/prebuilt-themes/purple-green.css +1 -1
  195. package/progress-bar/_progress-bar-theme.scss +35 -43
  196. package/progress-spinner/_progress-spinner-theme.scss +42 -43
  197. package/radio/_m2-radio.scss +6 -5
  198. package/radio/_radio-theme.scss +33 -46
  199. package/schematics/ng-add/index.js +1 -1
  200. package/select/_m2-select.scss +6 -5
  201. package/select/_select-theme.scss +38 -51
  202. package/sidenav/_sidenav-theme.scss +28 -30
  203. package/slide-toggle/_m2-slide-toggle.scss +45 -58
  204. package/slide-toggle/_m3-slide-toggle.scss +1 -0
  205. package/slide-toggle/_slide-toggle-theme.scss +41 -79
  206. package/slider/_m2-slider.scss +6 -9
  207. package/slider/_slider-theme.scss +38 -45
  208. package/snack-bar/_m2-snack-bar.scss +5 -5
  209. package/snack-bar/_snack-bar-theme.scss +28 -31
  210. package/sort/_sort-theme.scss +28 -33
  211. package/stepper/_m2-stepper.scss +10 -13
  212. package/stepper/_stepper-theme.scss +41 -49
  213. package/table/_m2-table.scss +16 -23
  214. package/table/_table-theme.scss +28 -36
  215. package/tabs/_m2-tabs.scss +6 -5
  216. package/tabs/_tabs-theme.scss +35 -43
  217. package/timepicker/_timepicker-theme.scss +28 -46
  218. package/toolbar/_m2-toolbar.scss +6 -7
  219. package/toolbar/_toolbar-theme.scss +55 -46
  220. package/tooltip/_m2-tooltip.scss +5 -6
  221. package/tooltip/_tooltip-theme.scss +28 -37
  222. package/tree/_m2-tree.scss +4 -3
  223. package/tree/_tree-theme.scss +28 -38
  224. package/core/tokens/_format-tokens.scss +0 -5
  225. package/fesm2022/form-field-C9DZXojn.mjs.map +0 -1
  226. package/fesm2022/module-BDiw_nWS.mjs.map +0 -1
  227. package/fesm2022/module-DzZHEh7B.mjs.map +0 -1
@@ -2,43 +2,43 @@
2
2
  @use './m2-optgroup';
3
3
  @use './m3-optgroup';
4
4
  @use '../tokens/token-utils';
5
- @use '../style/sass-utils';
6
- @use '../theming/theming';
7
5
  @use '../theming/inspection';
8
6
  @use '../typography/typography';
9
7
 
10
8
  @mixin base($theme) {
9
+ $tokens: m2-optgroup.get-unthemable-tokens();
11
10
  @if inspection.get-theme-version($theme) == 1 {
12
- @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
13
- } @else {
11
+ $tokens: map.get(m3-optgroup.get-tokens($theme), base);
14
12
  }
13
+
14
+ @include token-utils.values($tokens);
15
15
  }
16
16
 
17
17
  @mixin color($theme) {
18
+ $tokens: m2-optgroup.get-color-tokens($theme);
18
19
  @if inspection.get-theme-version($theme) == 1 {
19
- @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), color));
20
- } @else {
21
- @include sass-utils.current-selector-or-root() {
22
- @include token-utils.create-token-values-mixed(m2-optgroup.get-color-tokens($theme));
23
- }
20
+ $tokens: map.get(m3-optgroup.get-tokens($theme), color);
24
21
  }
22
+
23
+ @include token-utils.values($tokens);
25
24
  }
26
25
 
27
26
  @mixin typography($theme) {
27
+ $tokens: m2-optgroup.get-typography-tokens($theme);
28
28
  @if inspection.get-theme-version($theme) == 1 {
29
- @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), typography));
30
- } @else {
31
- @include sass-utils.current-selector-or-root() {
32
- @include token-utils.create-token-values-mixed(m2-optgroup.get-typography-tokens($theme));
33
- }
29
+ $tokens: map.get(m3-optgroup.get-tokens($theme), typography);
34
30
  }
31
+
32
+ @include token-utils.values($tokens);
35
33
  }
36
34
 
37
35
  @mixin density($theme) {
36
+ $tokens: m2-optgroup.get-density-tokens($theme);
38
37
  @if inspection.get-theme-version($theme) == 1 {
39
- @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
40
- } @else {
38
+ $tokens: map.get(m3-optgroup.get-tokens($theme), density);
41
39
  }
40
+
41
+ @include token-utils.values($tokens);
42
42
  }
43
43
 
44
44
  /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -56,23 +56,21 @@
56
56
  }
57
57
 
58
58
  @mixin theme($theme) {
59
- @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
60
- @if inspection.get-theme-version($theme) == 1 {
61
- @include base($theme);
59
+ @if inspection.get-theme-version($theme) == 1 {
60
+ @include base($theme);
61
+ @include color($theme);
62
+ @include density($theme);
63
+ @include typography($theme);
64
+ } @else {
65
+ @include base($theme);
66
+ @if inspection.theme-has($theme, color) {
62
67
  @include color($theme);
68
+ }
69
+ @if inspection.theme-has($theme, density) {
63
70
  @include density($theme);
71
+ }
72
+ @if inspection.theme-has($theme, typography) {
64
73
  @include typography($theme);
65
- } @else {
66
- @include base($theme);
67
- @if inspection.theme-has($theme, color) {
68
- @include color($theme);
69
- }
70
- @if inspection.theme-has($theme, density) {
71
- @include density($theme);
72
- }
73
- @if inspection.theme-has($theme, typography) {
74
- @include typography($theme);
75
- }
76
74
  }
77
75
  }
78
76
  }
@@ -1,8 +1,6 @@
1
1
  @use './m2-option';
2
2
  @use './m3-option';
3
3
  @use '../tokens/token-utils';
4
- @use '../style/sass-utils';
5
- @use '../theming/theming';
6
4
  @use '../theming/inspection';
7
5
  @use '../typography/typography';
8
6
  @use 'sass:map';
@@ -11,30 +9,34 @@
11
9
  /// for the mat-option.
12
10
  /// @param {Map} $theme The theme to generate base styles for.
13
11
  @mixin base($theme) {
12
+ $tokens: m2-option.get-unthemable-tokens();
14
13
  @if inspection.get-theme-version($theme) == 1 {
15
- @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), base));
16
- } @else {
14
+ $tokens: map.get(m3-option.get-tokens($theme), base);
17
15
  }
16
+
17
+ @include token-utils.values($tokens);
18
18
  }
19
19
 
20
20
  /// Outputs color theme styles for the mat-option.
21
21
  /// @param {Map} $theme The theme to generate color styles for.
22
22
  /// @param {String} $color-variant The color variant to use for the component (M3 only)
23
23
  @mixin color($theme, $color-variant: null) {
24
+ $tokens: m2-option.get-color-tokens($theme, primary);
24
25
  @if inspection.get-theme-version($theme) == 1 {
25
- @include token-utils.create-token-values(
26
- map.get(m3-option.get-tokens($theme, $color-variant), color));
27
- } @else {
28
- @include sass-utils.current-selector-or-root() {
29
- @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, primary));
30
- }
26
+ $tokens: map.get(m3-option.get-tokens($theme, $color-variant), color);
27
+ }
28
+
29
+ @include token-utils.values($tokens);
31
30
 
31
+ @if inspection.get-theme-version($theme) != 1 {
32
32
  .mat-accent {
33
- @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, secondary));
33
+ $tokens: m2-option.get-color-tokens($theme, secondary);
34
+ @include token-utils.values($tokens);
34
35
  }
35
36
 
36
37
  .mat-warn {
37
- @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, error));
38
+ $tokens: m2-option.get-color-tokens($theme, error);
39
+ @include token-utils.values($tokens);
38
40
  }
39
41
  }
40
42
  }
@@ -42,22 +44,23 @@
42
44
  /// Outputs typography theme styles for the mat-option.
43
45
  /// @param {Map} $theme The theme to generate typography styles for.
44
46
  @mixin typography($theme) {
47
+ $tokens: m2-option.get-typography-tokens($theme);
45
48
  @if inspection.get-theme-version($theme) == 1 {
46
- @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), typography));
47
- } @else {
48
- @include sass-utils.current-selector-or-root() {
49
- @include token-utils.create-token-values-mixed(m2-option.get-typography-tokens($theme));
50
- }
49
+ $tokens: map.get(m3-option.get-tokens($theme), typography);
51
50
  }
51
+
52
+ @include token-utils.values($tokens);
52
53
  }
53
54
 
54
55
  /// Outputs density theme styles for the mat-option.
55
56
  /// @param {Map} $theme The theme to generate density styles for.
56
57
  @mixin density($theme) {
58
+ $tokens: m2-option.get-density-tokens($theme);
57
59
  @if inspection.get-theme-version($theme) == 1 {
58
- @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), density));
59
- } @else {
60
+ $tokens: map.get(m3-option.get-tokens($theme), density);
60
61
  }
62
+
63
+ @include token-utils.values($tokens);
61
64
  }
62
65
 
63
66
  /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -80,23 +83,21 @@
80
83
  /// @param {Map} $theme The theme to generate styles for.
81
84
  /// @param {String} $color-variant The color variant to use for the component (M3 only)
82
85
  @mixin theme($theme, $color-variant: null) {
83
- @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {
84
- @if inspection.get-theme-version($theme) == 1 {
85
- @include base($theme);
86
- @include color($theme, $color-variant);
86
+ @if inspection.get-theme-version($theme) == 1 {
87
+ @include base($theme);
88
+ @include color($theme, $color-variant);
89
+ @include density($theme);
90
+ @include typography($theme);
91
+ } @else {
92
+ @include base($theme);
93
+ @if inspection.theme-has($theme, color) {
94
+ @include color($theme);
95
+ }
96
+ @if inspection.theme-has($theme, density) {
87
97
  @include density($theme);
98
+ }
99
+ @if inspection.theme-has($theme, typography) {
88
100
  @include typography($theme);
89
- } @else {
90
- @include base($theme);
91
- @if inspection.theme-has($theme, color) {
92
- @include color($theme);
93
- }
94
- @if inspection.theme-has($theme, density) {
95
- @include density($theme);
96
- }
97
- @if inspection.theme-has($theme, typography) {
98
- @include typography($theme);
99
- }
100
101
  }
101
102
  }
102
103
  }
@@ -2,45 +2,42 @@
2
2
  @use './m2-ripple';
3
3
  @use './m3-ripple';
4
4
  @use '../tokens/token-utils';
5
- @use '../style/sass-utils';
6
- @use '../theming/theming';
7
5
  @use '../theming/inspection';
8
6
 
9
7
  @mixin base($theme) {
8
+ $tokens: m2-ripple.get-unthemable-tokens();
10
9
  @if inspection.get-theme-version($theme) == 1 {
11
- @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), base));
12
- } @else {
10
+ $tokens: map.get(m3-ripple.get-tokens($theme), base);
13
11
  }
12
+
13
+ @include token-utils.values($tokens);
14
14
  }
15
15
 
16
16
  @mixin color($theme) {
17
+ $tokens: m2-ripple.get-color-tokens($theme);
17
18
  @if inspection.get-theme-version($theme) == 1 {
18
- @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), color));
19
- } @else {
20
- @include sass-utils.current-selector-or-root() {
21
- @include token-utils.create-token-values-mixed(m2-ripple.get-color-tokens($theme));
22
- }
19
+ $tokens: map.get(m3-ripple.get-tokens($theme), color);
23
20
  }
21
+
22
+ @include token-utils.values($tokens);
24
23
  }
25
24
 
26
25
  @mixin typography($theme) {
26
+ $tokens: m2-ripple.get-typography-tokens($theme);
27
27
  @if inspection.get-theme-version($theme) == 1 {
28
- @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), typography));
29
- } @else {
30
- @include sass-utils.current-selector-or-root() {
31
- @include token-utils.create-token-values-mixed(m2-ripple.get-typography-tokens($theme));
32
- }
28
+ $tokens: map.get(m3-ripple.get-tokens($theme), typography);
33
29
  }
30
+
31
+ @include token-utils.values($tokens);
34
32
  }
35
33
 
36
34
  @mixin density($theme) {
35
+ $tokens: m2-ripple.get-density-tokens($theme);
37
36
  @if inspection.get-theme-version($theme) == 1 {
38
- @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), density));
39
- } @else {
40
- @include sass-utils.current-selector-or-root() {
41
- @include token-utils.create-token-values-mixed(m2-ripple.get-density-tokens($theme));
42
- }
37
+ $tokens: map.get(m3-ripple.get-tokens($theme), density);
43
38
  }
39
+
40
+ @include token-utils.values($tokens);
44
41
  }
45
42
 
46
43
  /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -58,23 +55,21 @@
58
55
  }
59
56
 
60
57
  @mixin theme($theme) {
61
- @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
62
- @if inspection.get-theme-version($theme) == 1 {
63
- @include base($theme);
58
+ @if inspection.get-theme-version($theme) == 1 {
59
+ @include base($theme);
60
+ @include color($theme);
61
+ @include density($theme);
62
+ @include typography($theme);
63
+ } @else {
64
+ @include base($theme);
65
+ @if inspection.theme-has($theme, color) {
64
66
  @include color($theme);
67
+ }
68
+ @if inspection.theme-has($theme, density) {
65
69
  @include density($theme);
70
+ }
71
+ @if inspection.theme-has($theme, typography) {
66
72
  @include typography($theme);
67
- } @else {
68
- @include base($theme);
69
- @if inspection.theme-has($theme, color) {
70
- @include color($theme);
71
- }
72
- @if inspection.theme-has($theme, density) {
73
- @include density($theme);
74
- }
75
- @if inspection.theme-has($theme, typography) {
76
- @include typography($theme);
77
- }
78
73
  }
79
74
  }
80
75
  }
@@ -1,32 +1,21 @@
1
- @use '../../theming/theming';
2
1
  @use '../../theming/inspection';
3
- @use '../../style/sass-utils';
4
2
  @use '../../tokens/token-utils';
5
3
  @use './m2-pseudo-checkbox';
6
4
  @use './m3-pseudo-checkbox';
7
5
  @use 'sass:map';
8
6
 
9
7
  @mixin _palette-styles($theme, $palette-name) {
10
- @include sass-utils.current-selector-or-root() {
11
- @include token-utils.create-token-values-mixed(
12
- m2-pseudo-checkbox.get-color-tokens($theme, $palette-name));
13
- }
8
+ $tokens: m2-pseudo-checkbox.get-color-tokens($theme, $palette-name);
9
+ @include token-utils.values($tokens);
14
10
  }
15
11
 
16
- /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
17
- /// for the mat-pseudo-checkbox.
18
- /// @param {Map} $theme The theme to generate base styles for.
19
12
  @mixin base($theme) {
20
- }
13
+ $tokens: m2-pseudo-checkbox.get-unthemable-tokens();
14
+ @if inspection.get-theme-version($theme) == 1 {
15
+ $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), base);
16
+ }
21
17
 
22
- /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
23
- @function _define-overrides() {
24
- @return (
25
- (
26
- namespace: pseudo-checkbox,
27
- tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
28
- ),
29
- );
18
+ @include token-utils.values($tokens);
30
19
  }
31
20
 
32
21
  /// Outputs the CSS variable values for the given tokens.
@@ -39,62 +28,83 @@
39
28
  /// @param {Map} $theme The theme to generate color styles for.
40
29
  /// @param {String} $color-variant The color variant to use for the component (M3 only)
41
30
  @mixin color($theme, $color-variant: null) {
31
+ $tokens: m2-pseudo-checkbox.get-color-tokens($theme, secondary);
42
32
  @if inspection.get-theme-version($theme) == 1 {
43
- @include token-utils.create-token-values(
44
- map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color));
45
- } @else {
33
+ $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme, $color-variant), color);
34
+ }
35
+
36
+ @include token-utils.values($tokens);
37
+
38
+ @if inspection.get-theme-version($theme) != 1 {
46
39
  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
47
40
  // theme from their parent, rather than implementing their own theming, which is why we
48
41
  // don't attach to the `mat-*` classes. Also note that this needs to be below `.mat-primary`
49
42
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
50
43
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
51
- @include _palette-styles($theme, secondary);
52
-
53
44
  .mat-primary {
54
- @include _palette-styles($theme, primary);
45
+ $tokens: m2-pseudo-checkbox.get-color-tokens($theme, primary);
46
+ @include token-utils.values($tokens);
55
47
  }
56
48
 
57
49
  .mat-accent {
58
- @include _palette-styles($theme, secondary);
50
+ $tokens: m2-pseudo-checkbox.get-color-tokens($theme, secondary);
51
+ @include token-utils.values($tokens);
59
52
  }
60
53
 
61
54
  .mat-warn {
62
- @include _palette-styles($theme, error);
55
+ $tokens: m2-pseudo-checkbox.get-color-tokens($theme, error);
56
+ @include token-utils.values($tokens);
63
57
  }
64
58
  }
65
59
  }
66
60
 
67
- /// Outputs typography theme styles for the mat-pseudo-checkbox.
68
- /// @param {Map} $theme The theme to generate typography styles for.
69
61
  @mixin typography($theme) {
62
+ $tokens: m2-pseudo-checkbox.get-typography-tokens($theme);
63
+ @if inspection.get-theme-version($theme) == 1 {
64
+ $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), typography);
65
+ }
66
+
67
+ @include token-utils.values($tokens);
70
68
  }
71
69
 
72
- /// Outputs density theme styles for the mat-pseudo-checkbox.
73
- /// @param {Map} $theme The theme to generate density styles for.
74
70
  @mixin density($theme) {
71
+ $tokens: m2-pseudo-checkbox.get-density-tokens($theme);
72
+ @if inspection.get-theme-version($theme) == 1 {
73
+ $tokens: map.get(m3-pseudo-checkbox.get-tokens($theme), density);
74
+ }
75
+
76
+ @include token-utils.values($tokens);
77
+ }
78
+
79
+ /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
80
+ @function _define-overrides() {
81
+ @return (
82
+ (
83
+ namespace: pseudo-checkbox,
84
+ tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox)
85
+ ),
86
+ );
75
87
  }
76
88
 
77
89
  /// Outputs all (base, color, typography, and density) theme styles for the mat-pseudo-checkbox.
78
90
  /// @param {Map} $theme The theme to generate styles for.
79
91
  /// @param {String} $color-variant The color variant to use for the component (M3 only)
80
92
  @mixin theme($theme, $color-variant: null) {
81
- @include theming.private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
82
- @if inspection.get-theme-version($theme) == 1 {
83
- @include base($theme);
84
- @include color($theme, $color-variant);
93
+ @if inspection.get-theme-version($theme) == 1 {
94
+ @include base($theme);
95
+ @include color($theme, $color-variant);
96
+ @include density($theme);
97
+ @include typography($theme);
98
+ } @else {
99
+ @include base($theme);
100
+ @if inspection.theme-has($theme, color) {
101
+ @include color($theme);
102
+ }
103
+ @if inspection.theme-has($theme, density) {
85
104
  @include density($theme);
105
+ }
106
+ @if inspection.theme-has($theme, typography) {
86
107
  @include typography($theme);
87
- } @else {
88
- @include base($theme);
89
- @if inspection.theme-has($theme, color) {
90
- @include color($theme);
91
- }
92
- @if inspection.theme-has($theme, density) {
93
- @include density($theme);
94
- }
95
- @if inspection.theme-has($theme, typography) {
96
- @include typography($theme);
97
- }
98
108
  }
99
109
  }
100
110
  }
@@ -37,51 +37,47 @@
37
37
  @use '../../snack-bar/snack-bar-theme';
38
38
  @use '../../form-field/form-field-theme';
39
39
  @use '../../timepicker/timepicker-theme';
40
- @use './theming';
41
40
 
42
41
  // Create a theme.
43
42
  @mixin all-component-themes($theme) {
44
- $dedupe-key: 'angular-material-theme';
45
- @include theming.private-check-duplicate-theme-styles($theme, $dedupe-key) {
46
- @include core-theme.theme($theme);
47
- @include card-theme.theme($theme);
48
- @include progress-bar-theme.theme($theme);
49
- @include tooltip-theme.theme($theme);
50
- @include form-field-theme.theme($theme);
51
- @include input-theme.theme($theme);
52
- @include select-theme.theme($theme);
53
- @include autocomplete-theme.theme($theme);
54
- @include dialog-theme.theme($theme);
55
- @include chips-theme.theme($theme);
56
- @include slide-toggle-theme.theme($theme);
57
- @include radio-theme.theme($theme);
58
- @include slider-theme.theme($theme);
59
- @include menu-theme.theme($theme);
60
- @include list-theme.theme($theme);
61
- @include paginator-theme.theme($theme);
62
- @include tabs-theme.theme($theme);
63
- @include checkbox-theme.theme($theme);
64
- @include button-theme.theme($theme);
65
- @include icon-button-theme.theme($theme);
66
- @include fab-theme.theme($theme);
67
- @include snack-bar-theme.theme($theme);
68
- @include table-theme.theme($theme);
69
- @include progress-spinner-theme.theme($theme);
70
- @include badge-theme.theme($theme);
71
- @include bottom-sheet-theme.theme($theme);
72
- @include button-toggle-theme.theme($theme);
73
- @include datepicker-theme.theme($theme);
74
- @include divider-theme.theme($theme);
75
- @include expansion-theme.theme($theme);
76
- @include grid-list-theme.theme($theme);
77
- @include icon-theme.theme($theme);
78
- @include sidenav-theme.theme($theme);
79
- @include stepper-theme.theme($theme);
80
- @include sort-theme.theme($theme);
81
- @include toolbar-theme.theme($theme);
82
- @include tree-theme.theme($theme);
83
- @include timepicker-theme.theme($theme);
84
- }
43
+ @include core-theme.theme($theme);
44
+ @include card-theme.theme($theme);
45
+ @include progress-bar-theme.theme($theme);
46
+ @include tooltip-theme.theme($theme);
47
+ @include form-field-theme.theme($theme);
48
+ @include input-theme.theme($theme);
49
+ @include select-theme.theme($theme);
50
+ @include autocomplete-theme.theme($theme);
51
+ @include dialog-theme.theme($theme);
52
+ @include chips-theme.theme($theme);
53
+ @include slide-toggle-theme.theme($theme);
54
+ @include radio-theme.theme($theme);
55
+ @include slider-theme.theme($theme);
56
+ @include menu-theme.theme($theme);
57
+ @include list-theme.theme($theme);
58
+ @include paginator-theme.theme($theme);
59
+ @include tabs-theme.theme($theme);
60
+ @include checkbox-theme.theme($theme);
61
+ @include button-theme.theme($theme);
62
+ @include icon-button-theme.theme($theme);
63
+ @include fab-theme.theme($theme);
64
+ @include snack-bar-theme.theme($theme);
65
+ @include table-theme.theme($theme);
66
+ @include progress-spinner-theme.theme($theme);
67
+ @include badge-theme.theme($theme);
68
+ @include bottom-sheet-theme.theme($theme);
69
+ @include button-toggle-theme.theme($theme);
70
+ @include datepicker-theme.theme($theme);
71
+ @include divider-theme.theme($theme);
72
+ @include expansion-theme.theme($theme);
73
+ @include grid-list-theme.theme($theme);
74
+ @include icon-theme.theme($theme);
75
+ @include sidenav-theme.theme($theme);
76
+ @include stepper-theme.theme($theme);
77
+ @include sort-theme.theme($theme);
78
+ @include toolbar-theme.theme($theme);
79
+ @include tree-theme.theme($theme);
80
+ @include timepicker-theme.theme($theme);
85
81
  }
86
82
 
87
83
  @mixin all-component-bases($theme) {
@@ -76,7 +76,27 @@ $theme-version: 1;
76
76
  // density
77
77
  $density-scale: map.get($density-config, scale) or 0;
78
78
 
79
+ $system-maps: (
80
+ m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
81
+ m3.md-sys-elevation-values(),
82
+ m3.md-sys-motion-values(),
83
+ m3.md-sys-shape-values(),
84
+ m3.md-sys-state-values(),
85
+ (
86
+ // Form field native select option text color
87
+ neutral10: map.get($palettes, neutral, 10),
88
+ // Sidenav scrim (container background shadow when opened),
89
+ neutral-variant20: map.get($palettes, neutral-variant, 20),
90
+ ),
91
+ m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
92
+ );
93
+ $system: ();
94
+ @each $sys-map in $system-maps {
95
+ $system: map.merge($system, $sys-map);
96
+ }
97
+
79
98
  @return (
99
+ _mat-system: $system,
80
100
  $internals: (
81
101
  base-tokens: m3-tokens.generate-base-tokens(),
82
102
  color-system-variables-prefix: $color-system-variables-prefix,
@@ -84,19 +104,6 @@ $theme-version: 1;
84
104
  m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
85
105
  density-scale: $density-scale,
86
106
  font-definition: $typography,
87
- md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
88
- md-sys-elevation: m3.md-sys-elevation-values(),
89
- md-sys-motion: m3.md-sys-motion-values(),
90
- md-sys-shape: m3.md-sys-shape-values(),
91
- md-sys-state: m3.md-sys-state-values(),
92
- md-ref-palette: (
93
- // Form field native select option text color
94
- neutral10: map.get($palettes, neutral, 10),
95
- // Sidenav scrim (container background shadow when opened),
96
- neutral-variant20: map.get($palettes, neutral-variant, 20),
97
- ),
98
- md-sys-typescale:
99
- m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
100
107
  palettes: $palettes,
101
108
  theme-type: $type,
102
109
  theme-version: $theme-version,
@@ -279,15 +279,3 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
279
279
  @return $theme;
280
280
  }
281
281
  }
282
-
283
- /// Gets a version of the theme with a modified typography config that preserves old behavior in
284
- /// some components that previously used `private-typography-to-2014-config`.
285
- /// Do not introduce new usages of this, it should be cleaned up and removed.
286
- /// @deprecated
287
- @function private-get-typography-back-compat-theme($theme) {
288
- @return if(
289
- get-theme-version($theme) == 0,
290
- m2-inspection.private-get-typography-back-compat-theme($theme),
291
- $theme
292
- );
293
- }
@@ -235,36 +235,3 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
235
235
  }
236
236
  @return $theme;
237
237
  }
238
-
239
- /// Gets a version of the theme with a modified typography config that preserves old behavior in
240
- /// some components that previously used `private-typography-to-2014-config`.
241
- /// Do not introduce new usages of this, it should be cleaned up and removed.
242
- /// @deprecated
243
- @function private-get-typography-back-compat-theme($theme) {
244
- // It is possible for a user to pass a "density theme" that is just a number.
245
- @if meta.type-of($theme) != 'map' {
246
- @return $theme;
247
- }
248
- $internal: map.get($theme, $_internals, m2-config);
249
- $theme: map.remove($theme, $_internals);
250
- @if theme-has($theme, typography) {
251
- $typography-config: m2-theming.get-typography-config($theme);
252
- // gmat configs have both 2018 and 2014 keys.
253
- @if (not typography-versioning.private-typography-is-2014-config($typography-config)) or
254
- (not typography-versioning.private-typography-is-2018-config($typography-config)) {
255
- @return $theme;
256
- }
257
- $new-typography-config: typography-versioning.private-typography-to-2018-config(
258
- $typography-config, true);
259
- // subtitle-2 is mapped differently by `private-typography-to-2014-config`.
260
- $new-typography-config: map.set(
261
- $new-typography-config, subtitle-2, map.get($new-typography-config, body-1));
262
- $theme: if($theme == $typography-config, $new-typography-config,
263
- map.set($theme, typography, $new-typography-config));
264
- }
265
- @if $internal {
266
- $internal: private-get-typography-back-compat-theme($internal);
267
- $theme: map.set($theme, $_internals, m2-config, $internal);
268
- }
269
- @return $theme;
270
- }