@angular/material 17.0.0-next.4 → 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 (55) hide show
  1. package/_index.scss +1 -1
  2. package/button/_button-theme.scss +69 -50
  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 +3 -3
  7. package/core/tokens/m2/mdc/_button-protected.scss +94 -0
  8. package/core/typography/_versioning.scss +1 -1
  9. package/esm2022/button/button.mjs +4 -4
  10. package/esm2022/button/fab.mjs +8 -8
  11. package/esm2022/chips/chip-option.mjs +2 -2
  12. package/esm2022/chips/chip-row.mjs +2 -2
  13. package/esm2022/chips/chip.mjs +2 -2
  14. package/esm2022/core/version.mjs +1 -1
  15. package/esm2022/datepicker/calendar.mjs +2 -2
  16. package/esm2022/datepicker/datepicker-errors.mjs +2 -2
  17. package/esm2022/form-field/form-field.mjs +3 -3
  18. package/esm2022/radio/radio.mjs +2 -2
  19. package/esm2022/select/select.mjs +3 -3
  20. package/esm2022/sort/sort-header.mjs +3 -3
  21. package/esm2022/tooltip/tooltip.mjs +2 -2
  22. package/fesm2022/button.mjs +12 -12
  23. package/fesm2022/button.mjs.map +1 -1
  24. package/fesm2022/chips.mjs +6 -6
  25. package/fesm2022/chips.mjs.map +1 -1
  26. package/fesm2022/core.mjs +1 -1
  27. package/fesm2022/core.mjs.map +1 -1
  28. package/fesm2022/datepicker.mjs +3 -3
  29. package/fesm2022/datepicker.mjs.map +1 -1
  30. package/fesm2022/form-field.mjs +2 -2
  31. package/fesm2022/form-field.mjs.map +1 -1
  32. package/fesm2022/radio.mjs +2 -2
  33. package/fesm2022/radio.mjs.map +1 -1
  34. package/fesm2022/select.mjs +2 -2
  35. package/fesm2022/select.mjs.map +1 -1
  36. package/fesm2022/sort.mjs +2 -2
  37. package/fesm2022/sort.mjs.map +1 -1
  38. package/fesm2022/tooltip.mjs +2 -2
  39. package/fesm2022/tooltip.mjs.map +1 -1
  40. package/package.json +2 -2
  41. package/prebuilt-themes/deeppurple-amber.css +1 -1
  42. package/prebuilt-themes/indigo-pink.css +1 -1
  43. package/prebuilt-themes/pink-bluegrey.css +1 -1
  44. package/prebuilt-themes/purple-green.css +1 -1
  45. package/radio/_radio-theme.scss +9 -0
  46. package/schematics/ng-add/index.js +1 -1
  47. package/schematics/ng-add/index.mjs +1 -1
  48. package/schematics/ng-add/setup-project.js +2 -2
  49. package/schematics/ng-add/setup-project.mjs +2 -2
  50. package/schematics/ng-add/theming/theming.js +3 -3
  51. package/schematics/ng-add/theming/theming.mjs +3 -3
  52. package/slider/_slider-theme.scss +77 -43
  53. package/snack-bar/_snack-bar-theme.scss +46 -18
  54. package/toolbar/_toolbar-theme.scss +55 -27
  55. package/tooltip/_tooltip-theme.scss +56 -24
package/toolbar/_toolbar-theme.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use 'sass:map';
1
2
  @use '../core/theming/theming';
2
3
  @use '../core/theming/inspection';
3
4
  @use '../core/typography/typography';
@@ -16,53 +17,80 @@
16
17
  }
17
18
 
18
19
  @mixin color($theme) {
19
- @include sass-utils.current-selector-or-root() {
20
- @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
21
- tokens-mat-toolbar.get-color-tokens($theme));
20
+ @if inspection.get-theme-version($theme) == 1 {
21
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
22
22
  }
23
-
24
- .mat-toolbar {
25
- &.mat-primary {
26
- @include _palette-styles($theme, primary);
23
+ @else {
24
+ @include sass-utils.current-selector-or-root() {
25
+ @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
26
+ tokens-mat-toolbar.get-color-tokens($theme));
27
27
  }
28
28
 
29
- &.mat-accent {
30
- @include _palette-styles($theme, accent);
31
- }
29
+ .mat-toolbar {
30
+ &.mat-primary {
31
+ @include _palette-styles($theme, primary);
32
+ }
33
+
34
+ &.mat-accent {
35
+ @include _palette-styles($theme, accent);
36
+ }
32
37
 
33
- &.mat-warn {
34
- @include _palette-styles($theme, warn);
38
+ &.mat-warn {
39
+ @include _palette-styles($theme, warn);
40
+ }
35
41
  }
36
42
  }
37
43
  }
38
44
 
39
45
  @mixin typography($theme) {
40
- // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
41
- $theme: inspection.private-get-typography-back-compat-theme($theme);
46
+ @if inspection.get-theme-version($theme) == 1 {
47
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
48
+ }
49
+ @else {
50
+ // TODO(mmalerba): Stop calling this and resolve resulting screen diffs.
51
+ $theme: inspection.private-get-typography-back-compat-theme($theme);
42
52
 
43
- @include sass-utils.current-selector-or-root() {
44
- @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
45
- tokens-mat-toolbar.get-typography-tokens($theme));
53
+ @include sass-utils.current-selector-or-root() {
54
+ @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
55
+ tokens-mat-toolbar.get-typography-tokens($theme));
56
+ }
46
57
  }
47
58
  }
48
59
 
49
60
  @mixin density($theme) {
50
- @include sass-utils.current-selector-or-root() {
51
- @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
52
- tokens-mat-toolbar.get-density-tokens($theme));
61
+ @if inspection.get-theme-version($theme) == 1 {
62
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
63
+ }
64
+ @else {
65
+ @include sass-utils.current-selector-or-root() {
66
+ @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
67
+ tokens-mat-toolbar.get-density-tokens($theme));
68
+ }
53
69
  }
54
70
  }
55
71
 
56
72
  @mixin theme($theme) {
57
73
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
58
- @if inspection.theme-has($theme, color) {
59
- @include color($theme);
74
+ @if inspection.get-theme-version($theme) == 1 {
75
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme));
60
76
  }
61
- @if inspection.theme-has($theme, density) {
62
- @include density($theme);
63
- }
64
- @if inspection.theme-has($theme, typography) {
65
- @include typography($theme);
77
+ @else {
78
+ @if inspection.theme-has($theme, color) {
79
+ @include color($theme);
80
+ }
81
+ @if inspection.theme-has($theme, density) {
82
+ @include density($theme);
83
+ }
84
+ @if inspection.theme-has($theme, typography) {
85
+ @include typography($theme);
86
+ }
66
87
  }
67
88
  }
68
89
  }
90
+
91
+ @mixin _theme-from-tokens($tokens) {
92
+ @if ($tokens != ()) {
93
+ @include token-utils.create-token-values(tokens-mat-toolbar.$prefix,
94
+ map.get($tokens, tokens-mat-toolbar.$prefix));
95
+ }
96
+ }
package/tooltip/_tooltip-theme.scss CHANGED
@@ -1,55 +1,87 @@
1
+ @use 'sass:map';
1
2
  @use '@material/tooltip/plain-tooltip-theme' as mdc-plain-tooltip-theme;
2
3
  @use '../core/style/sass-utils';
3
4
  @use '../core/theming/theming';
4
5
  @use '../core/theming/inspection';
5
6
  @use '../core/typography/typography';
6
- @use '../core/tokens/m2/mdc/plain-tooltip' as m2-mdc-plain-tooltip;
7
+ @use '../core/tokens/m2/mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
7
8
 
8
9
  @mixin base($theme) {
9
- // Add default values for tokens not related to color, typography, or density.
10
- @include sass-utils.current-selector-or-root() {
11
- @include mdc-plain-tooltip-theme.theme(m2-mdc-plain-tooltip.get-unthemable-tokens());
10
+ @if inspection.get-theme-version($theme) == 1 {
11
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
12
+ }
13
+ @else {
14
+ // Add default values for tokens not related to color, typography, or density.
15
+ @include sass-utils.current-selector-or-root() {
16
+ @include mdc-plain-tooltip-theme.theme(tokens-mdc-plain-tooltip.get-unthemable-tokens());
17
+ }
12
18
  }
13
19
  }
14
20
 
15
21
  @mixin color($theme) {
16
- $mdc-tooltip-color-tokens: m2-mdc-plain-tooltip.get-color-tokens($theme);
22
+ @if inspection.get-theme-version($theme) == 1 {
23
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
24
+ }
25
+ @else {
26
+ $mdc-tooltip-color-tokens: tokens-mdc-plain-tooltip.get-color-tokens($theme);
17
27
 
18
- // Add values for MDC tooltip tokens.
19
- @include sass-utils.current-selector-or-root() {
20
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
28
+ // Add values for MDC tooltip tokens.
29
+ @include sass-utils.current-selector-or-root() {
30
+ @include mdc-plain-tooltip-theme.theme($mdc-tooltip-color-tokens);
31
+ }
21
32
  }
22
33
  }
23
34
 
24
35
  @mixin typography($theme) {
25
- $mdc-tooltip-typography-tokens: m2-mdc-plain-tooltip.get-typography-tokens($theme);
36
+ @if inspection.get-theme-version($theme) == 1 {
37
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
38
+ }
39
+ @else {
40
+ $mdc-tooltip-typography-tokens: tokens-mdc-plain-tooltip.get-typography-tokens($theme);
26
41
 
27
- // Add values for MDC tooltip tokens.
28
- @include sass-utils.current-selector-or-root() {
29
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
42
+ // Add values for MDC tooltip tokens.
43
+ @include sass-utils.current-selector-or-root() {
44
+ @include mdc-plain-tooltip-theme.theme($mdc-tooltip-typography-tokens);
45
+ }
30
46
  }
31
47
  }
32
48
 
33
49
  @mixin density($theme) {
34
- $mdc-tooltip-density-tokens: m2-mdc-plain-tooltip.get-density-tokens($theme);
50
+ @if inspection.get-theme-version($theme) == 1 {
51
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
52
+ }
53
+ @else {
54
+ $mdc-tooltip-density-tokens: tokens-mdc-plain-tooltip.get-density-tokens($theme);
35
55
 
36
- // Add values for MDC tooltip tokens.
37
- @include sass-utils.current-selector-or-root() {
38
- @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
56
+ // Add values for MDC tooltip tokens.
57
+ @include sass-utils.current-selector-or-root() {
58
+ @include mdc-plain-tooltip-theme.theme($mdc-tooltip-density-tokens);
59
+ }
39
60
  }
40
61
  }
41
62
 
42
63
  @mixin theme($theme) {
43
64
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
44
- @include base($theme);
45
- @if inspection.theme-has($theme, color) {
46
- @include color($theme);
47
- }
48
- @if inspection.theme-has($theme, density) {
49
- @include density($theme);
65
+ @if inspection.get-theme-version($theme) == 1 {
66
+ @include _theme-from-tokens(inspection.get-theme-tokens($theme));
50
67
  }
51
- @if inspection.theme-has($theme, typography) {
52
- @include typography($theme);
68
+ @else {
69
+ @include base($theme);
70
+ @if inspection.theme-has($theme, color) {
71
+ @include color($theme);
72
+ }
73
+ @if inspection.theme-has($theme, density) {
74
+ @include density($theme);
75
+ }
76
+ @if inspection.theme-has($theme, typography) {
77
+ @include typography($theme);
78
+ }
53
79
  }
54
80
  }
55
81
  }
82
+
83
+ @mixin _theme-from-tokens($tokens) {
84
+ @if $tokens != () {
85
+ @include mdc-plain-tooltip-theme.theme(map.get($tokens, tokens-mdc-plain-tooltip.$prefix));
86
+ }
87
+ }