1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | @use 'sass:map';
|
28 | @use 'sass:meta';
|
29 | @use '@material/elevation/elevation-theme';
|
30 | @use '@material/shape/shape';
|
31 | @use '@material/theme/keys';
|
32 | @use '@material/theme/theme';
|
33 | @use '@material/tokens/resolvers';
|
34 | @use '@material/button/button-text-theme';
|
35 |
|
36 | $light-theme: (
|
37 | container-color: null,
|
38 | container-elevation: null,
|
39 | container-shadow-color: null,
|
40 | container-shape: null,
|
41 | with-divider-divider-color: null,
|
42 | with-divider-divider-height: null,
|
43 | with-icon-icon-size: null,
|
44 | with-icon-icon-color: null,
|
45 | subhead-font: null,
|
46 | subhead-line-height: null,
|
47 | subhead-size: null,
|
48 | subhead-weight: null,
|
49 | subhead-tracking: null,
|
50 | subhead-color: null,
|
51 | supporting-text-font: null,
|
52 | supporting-text-line-height: null,
|
53 | supporting-text-size: null,
|
54 | supporting-text-weight: null,
|
55 | supporting-text-tracking: null,
|
56 | supporting-text-color: null,
|
57 | action-label-text-font: null,
|
58 | action-label-text-line-height: null,
|
59 | action-label-text-size: null,
|
60 | action-label-text-weight: null,
|
61 | action-label-text-tracking: null,
|
62 | action-label-text-color: null,
|
63 | action-hover-state-layer-color: null,
|
64 | action-hover-state-layer-opacity: null,
|
65 | action-hover-label-text-color: null,
|
66 | action-focus-state-layer-color: null,
|
67 | action-focus-state-layer-opacity: null,
|
68 | action-focus-label-text-color: null,
|
69 | action-pressed-state-layer-color: null,
|
70 | action-pressed-state-layer-opacity: null,
|
71 | action-pressed-label-text-color: null,
|
72 | );
|
73 |
|
74 | $custom-property-prefix: 'dialog';
|
75 |
|
76 | @mixin theme($theme, $resolvers: resolvers.$material) {
|
77 | @include theme.validate-theme($light-theme, $theme);
|
78 | $theme: _resolve-elevation($theme, map.get($resolvers, elevation));
|
79 | @include keys.declare-custom-properties(
|
80 | $theme,
|
81 | $prefix: $custom-property-prefix
|
82 | );
|
83 | }
|
84 |
|
85 | @mixin theme-styles($theme, $resolvers: resolvers.$material) {
|
86 | @include theme.validate-theme($light-theme, $theme);
|
87 | $theme: keys.create-theme-properties(
|
88 | $theme,
|
89 | $prefix: $custom-property-prefix
|
90 | );
|
91 |
|
92 | @include _container-color(map.get($theme, container-color));
|
93 | @include _container-elevation(
|
94 | map.get($resolvers, elevation),
|
95 | map.get($theme, container-elevation),
|
96 | map.get($theme, container-shadow-color)
|
97 | );
|
98 | @include _container-shape(map.get($theme, container-shape));
|
99 | @include _divider-color(map.get($theme, with-divider-divider-color));
|
100 | @include _divider-height(map.get($theme, with-divider-divider-height));
|
101 | @include _icon-size(map.get($theme, with-icon-icon-size));
|
102 | @include _icon-color(map.get($theme, with-icon-icon-color));
|
103 | @include _subhead-typography(
|
104 | (
|
105 | font: map.get($theme, subhead-font),
|
106 | line-height: map.get($theme, subhead-line-height),
|
107 | size: map.get($theme, subhead-size),
|
108 | weight: map.get($theme, subhead-weight),
|
109 | tracking: map.get($theme, subhead-tracking),
|
110 | )
|
111 | );
|
112 | @include _subhead-color(map.get($theme, subhead-color));
|
113 | @include _supporting-text-typography(
|
114 | (
|
115 | font: map.get($theme, supporting-text-font),
|
116 | line-height: map.get($theme, supporting-text-line-height),
|
117 | size: map.get($theme, supporting-text-size),
|
118 | weight: map.get($theme, supporting-text-weight),
|
119 | tracking: map.get($theme, supporting-text-tracking),
|
120 | )
|
121 | );
|
122 | @include _supporting-text-color(map.get($theme, supporting-text-color));
|
123 |
|
124 | .mdc-dialog__actions .mdc-button {
|
125 | @include button-text-theme.theme-styles-internal(
|
126 | (
|
127 | focus-label-text-color: map.get($theme, action-focus-label-text-color),
|
128 | focus-state-layer-color: map.get($theme, action-focus-state-layer-color),
|
129 | focus-state-layer-opacity:
|
130 | map.get($theme, action-focus-state-layer-opacity),
|
131 | hover-label-text-color: map.get($theme, action-hover-text-color),
|
132 | hover-state-layer-color: map.get($theme, action-hover-state-layer-color),
|
133 | hover-state-layer-opacity:
|
134 | map.get($theme, action-hover-state-layer-opacity),
|
135 | label-text-color: map.get($theme, action-label-text-color),
|
136 | label-text-font: map.get($theme, action-label-text-font),
|
137 | label-text-size: map.get($theme, action-label-text-size),
|
138 | label-text-tracking: map.get($theme, action-label-text-tracking),
|
139 | label-text-weight: map.get($theme, action-label-text-weight),
|
140 | pressed-label-text-color:
|
141 | map.get($theme, action-pressed-label-text-color),
|
142 | pressed-state-layer-color:
|
143 | map.get($theme, action-pressed-state-layer-color),
|
144 | pressed-state-layer-opacity:
|
145 | map.get($theme, action-pressed-state-layer-opacity),
|
146 | )
|
147 | );
|
148 | }
|
149 | }
|
150 |
|
151 | @mixin _container-color($color) {
|
152 | .mdc-dialog__surface {
|
153 | @include theme.property(background-color, $color);
|
154 | }
|
155 | }
|
156 |
|
157 | @mixin _container-elevation($elevation-resolver, $elevation, $shadow-color) {
|
158 | .mdc-dialog__surface {
|
159 | @include elevation-theme.with-resolver(
|
160 | $elevation-resolver,
|
161 | $elevation: $elevation,
|
162 | $shadow-color: $shadow-color
|
163 | );
|
164 | }
|
165 | }
|
166 |
|
167 | @mixin _container-shape($radius) {
|
168 | .mdc-dialog__surface {
|
169 | @include shape.radius($radius);
|
170 | }
|
171 | }
|
172 |
|
173 | @mixin _divider-color($color) {
|
174 | &.mdc-dialog--scrollable .mdc-dialog__title,
|
175 | &.mdc-dialog--scrollable .mdc-dialog__actions,
|
176 | &.mdc-dialog--scrollable.mdc-dialog-scroll-divider-footer
|
177 | .mdc-dialog__actions {
|
178 | @include theme.property(border-color, $color);
|
179 | }
|
180 |
|
181 | &.mdc-dialog--scrollable .mdc-dialog__title {
|
182 | @include theme.property(border-bottom-color, $color);
|
183 | }
|
184 | }
|
185 |
|
186 | @mixin _divider-height($height) {
|
187 | .mdc-dialog__actions {
|
188 | @include theme.property(border-top-width, $height);
|
189 | }
|
190 |
|
191 | &.mdc-dialog--scrollable .mdc-dialog__title {
|
192 | @include theme.property(border-bottom-width, $height);
|
193 | }
|
194 | }
|
195 |
|
196 | @mixin _icon-size($size) {
|
197 | .mdc-dialog__title-icon {
|
198 | @include theme.property(height, $size);
|
199 | @include theme.property(width, $size);
|
200 | @include theme.property(font-size, $size);
|
201 | }
|
202 | }
|
203 |
|
204 | @mixin _icon-color($color) {
|
205 | .mdc-dialog__title-icon {
|
206 | @include theme.property(color, $color);
|
207 | }
|
208 | }
|
209 |
|
210 | @mixin _subhead-typography($typography) {
|
211 | .mdc-dialog__title {
|
212 | @include theme.property(font-family, map.get($typography, font));
|
213 | @include theme.property(line-height, map.get($typography, line-height));
|
214 | @include theme.property(font-size, map.get($typography, size));
|
215 | @include theme.property(font-weight, map.get($typography, weight));
|
216 | @include theme.property(letter-spacing, map.get($typography, tracking));
|
217 | }
|
218 | }
|
219 |
|
220 | @mixin _subhead-color($color) {
|
221 | .mdc-dialog__title {
|
222 | @include theme.property(color, $color);
|
223 | }
|
224 | }
|
225 |
|
226 | @mixin _supporting-text-typography($typography) {
|
227 | .mdc-dialog__content {
|
228 | @include theme.property(font-family, map.get($typography, font));
|
229 | @include theme.property(line-height, map.get($typography, line-height));
|
230 | @include theme.property(font-size, map.get($typography, size));
|
231 | @include theme.property(font-weight, map.get($typography, weight));
|
232 | @include theme.property(letter-spacing, map.get($typography, tracking));
|
233 | }
|
234 | }
|
235 |
|
236 | @mixin _supporting-text-color($color) {
|
237 | .mdc-dialog__content {
|
238 | @include theme.property(color, $color);
|
239 | }
|
240 | }
|
241 |
|
242 | @function _resolve-elevation($theme, $elevation-resolver) {
|
243 | @if map.get($theme, container-elevation) and
|
244 | map.get($theme, container-shadow-color)
|
245 | {
|
246 | $resolved-value: meta.call(
|
247 | $elevation-resolver,
|
248 | $elevation: map.get($theme, container-elevation),
|
249 | $shadow-color: map.get($theme, container-shadow-color)
|
250 | );
|
251 | $theme: map.set($theme, container-elevation, $resolved-value);
|
252 | }
|
253 |
|
254 | @return $theme;
|
255 | }
|