|
10 | 10 | @use './typography/typography'; |
11 | 11 | @use './tokens/token-utils'; |
12 | 12 | @use './tokens/m2/mat/app' as tokens-mat-app; |
| 13 | +@use './tokens/m2/mat/ripple' as tokens-mat-ripple; |
| 14 | +@use './tokens/m2/mat/option' as tokens-mat-option; |
| 15 | +@use './tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; |
| 16 | +@use './tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; |
13 | 17 |
|
14 | 18 | @mixin base($theme) { |
15 | | - @include ripple-theme.base($theme); |
16 | | - @include option-theme.base($theme); |
17 | | - @include optgroup-theme.base($theme); |
18 | | - @include pseudo-checkbox-theme.base($theme); |
19 | | - // TODO(mmalerba): Move additional core base tokens here |
| 19 | + @if inspection.get-theme-version($theme) == 1 { |
| 20 | + @include _theme-from-tokens(inspection.get-theme-tokens($theme, base)); |
| 21 | + } |
| 22 | + @else { |
| 23 | + @include ripple-theme.base($theme); |
| 24 | + @include option-theme.base($theme); |
| 25 | + @include optgroup-theme.base($theme); |
| 26 | + @include pseudo-checkbox-theme.base($theme); |
| 27 | + } |
20 | 28 | } |
21 | 29 |
|
22 | 30 | @mixin color($theme) { |
23 | | - @include ripple-theme.color($theme); |
24 | | - @include option-theme.color($theme); |
25 | | - @include optgroup-theme.color($theme); |
26 | | - @include pseudo-checkbox-theme.color($theme); |
27 | | - @include sass-utils.current-selector-or-root() { |
28 | | - @include token-utils.create-token-values(tokens-mat-app.$prefix, |
29 | | - tokens-mat-app.get-color-tokens($theme)); |
| 31 | + @if inspection.get-theme-version($theme) == 1 { |
| 32 | + @include _theme-from-tokens(inspection.get-theme-tokens($theme, color)); |
30 | 33 | } |
| 34 | + @else { |
| 35 | + @include ripple-theme.color($theme); |
| 36 | + @include option-theme.color($theme); |
| 37 | + @include optgroup-theme.color($theme); |
| 38 | + @include pseudo-checkbox-theme.color($theme); |
| 39 | + @include sass-utils.current-selector-or-root() { |
| 40 | + @include token-utils.create-token-values(tokens-mat-app.$prefix, |
| 41 | + tokens-mat-app.get-color-tokens($theme)); |
| 42 | + } |
31 | 43 |
|
32 | | - // Provides external CSS classes for each elevation value. Each CSS class is formatted as |
33 | | - // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is |
34 | | - // elevated. |
35 | | - @for $zValue from 0 through 24 { |
36 | | - $selector: elevation.$prefix + $zValue; |
37 | | - // We need the `mat-mdc-elevation-specific`, because some MDC mixins |
38 | | - // come with elevation baked in and we don't have a way of removing it. |
39 | | - .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { |
40 | | - @include private.private-theme-elevation($zValue, $theme); |
| 44 | + // Provides external CSS classes for each elevation value. Each CSS class is formatted as |
| 45 | + // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is |
| 46 | + // elevated. |
| 47 | + @for $zValue from 0 through 24 { |
| 48 | + $selector: elevation.$prefix + $zValue; |
| 49 | + // We need the `mat-mdc-elevation-specific`, because some MDC mixins |
| 50 | + // come with elevation baked in and we don't have a way of removing it. |
| 51 | + .#{$selector}, .mat-mdc-elevation-specific.#{$selector} { |
| 52 | + @include private.private-theme-elevation($zValue, $theme); |
| 53 | + } |
41 | 54 | } |
42 | 55 | } |
43 | 56 |
|
| 57 | + // TODO(crisbeto): move this into the base. |
44 | 58 | // Marker that is used to determine whether the user has added a theme to their page. |
45 | 59 | @at-root { |
46 | 60 | .mat-theme-loaded-marker { |
|
50 | 64 | } |
51 | 65 |
|
52 | 66 | @mixin typography($theme) { |
53 | | - @include option-theme.typography($theme); |
54 | | - @include optgroup-theme.typography($theme); |
55 | | - @include pseudo-checkbox-theme.typography($theme); |
56 | | - @include ripple-theme.typography($theme); |
| 67 | + @if inspection.get-theme-version($theme) == 1 { |
| 68 | + @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography)); |
| 69 | + } |
| 70 | + @else { |
| 71 | + @include option-theme.typography($theme); |
| 72 | + @include optgroup-theme.typography($theme); |
| 73 | + @include pseudo-checkbox-theme.typography($theme); |
| 74 | + @include ripple-theme.typography($theme); |
| 75 | + } |
57 | 76 | } |
58 | 77 |
|
59 | 78 | @mixin density($theme) { |
60 | | - @include option-theme.density($theme); |
61 | | - @include optgroup-theme.density($theme); |
62 | | - @include pseudo-checkbox-theme.density($theme); |
63 | | - @include ripple-theme.density($theme); |
| 79 | + @if inspection.get-theme-version($theme) == 1 { |
| 80 | + @include _theme-from-tokens(inspection.get-theme-tokens($theme, density)); |
| 81 | + } |
| 82 | + @else { |
| 83 | + @include option-theme.density($theme); |
| 84 | + @include optgroup-theme.density($theme); |
| 85 | + @include pseudo-checkbox-theme.density($theme); |
| 86 | + @include ripple-theme.density($theme); |
| 87 | + } |
64 | 88 | } |
65 | 89 |
|
66 | 90 | // Mixin that renders all of the core styles that depend on the theme. |
67 | | -@mixin theme($theme) { |
| 91 | +@mixin theme($theme, $options...) { |
68 | 92 | // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that |
69 | 93 | // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then |
70 | 94 | // the imported themes (such as `mat-ripple-theme`) should not report again. |
71 | 95 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') { |
72 | | - @include base($theme); |
73 | | - @if inspection.theme-has($theme, color) { |
74 | | - @include color($theme); |
75 | | - } |
76 | | - @if inspection.theme-has($theme, density) { |
77 | | - @include density($theme); |
| 96 | + @if inspection.get-theme-version($theme) == 1 { |
| 97 | + @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...); |
78 | 98 | } |
79 | | - @if inspection.theme-has($theme, typography) { |
80 | | - @include typography($theme); |
| 99 | + @else { |
| 100 | + @include base($theme); |
| 101 | + @if inspection.theme-has($theme, color) { |
| 102 | + @include color($theme); |
| 103 | + } |
| 104 | + @if inspection.theme-has($theme, density) { |
| 105 | + @include density($theme); |
| 106 | + } |
| 107 | + @if inspection.theme-has($theme, typography) { |
| 108 | + @include typography($theme); |
| 109 | + } |
81 | 110 | } |
82 | 111 | } |
83 | 112 | } |
| 113 | + |
| 114 | +@mixin _theme-from-tokens($tokens, $options...) { |
| 115 | + $mat-app-tokens: token-utils.get-tokens-for($tokens, tokens-mat-app.$prefix, $options...); |
| 116 | + $mat-ripple-tokens: token-utils.get-tokens-for($tokens, tokens-mat-ripple.$prefix, $options...); |
| 117 | + $mat-option-tokens: token-utils.get-tokens-for($tokens, tokens-mat-option.$prefix, $options...); |
| 118 | + $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, |
| 119 | + tokens-mat-full-pseudo-checkbox.$prefix, $options...); |
| 120 | + $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for($tokens, |
| 121 | + tokens-mat-minimal-pseudo-checkbox.$prefix, $options...); |
| 122 | + |
| 123 | + @include token-utils.create-token-values(tokens-mat-app.$prefix, $mat-app-tokens); |
| 124 | + @include token-utils.create-token-values(tokens-mat-ripple.$prefix, $mat-ripple-tokens); |
| 125 | + @include token-utils.create-token-values(tokens-mat-option.$prefix, $mat-option-tokens); |
| 126 | + @include token-utils.create-token-values(tokens-mat-full-pseudo-checkbox.$prefix, |
| 127 | + $mat-full-pseudo-checkbox-tokens); |
| 128 | + @include token-utils.create-token-values(tokens-mat-minimal-pseudo-checkbox.$prefix, |
| 129 | + $mat-minimal-pseudo-checkbox-tokens); |
| 130 | +} |
0 commit comments