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 | @use 'sass:map';
|
27 | @use '@material/feature-targeting/feature-targeting';
|
28 | @use '@material/theme/keys';
|
29 | @use '@material/theme/theme';
|
30 | @use '@material/tokens/resolvers';
|
31 | @use './button-shared-theme';
|
32 |
|
33 | $_custom-property-prefix: 'text-button';
|
34 |
|
35 | $light-theme: (
|
36 | container-height: button-shared-theme.$height,
|
37 | container-shape: button-shared-theme.$shape-radius,
|
38 | disabled-label-text-color: button-shared-theme.$disabled-ink-color,
|
39 | focus-label-text-color: null,
|
40 | focus-state-layer-color: primary,
|
41 | focus-state-layer-opacity: 0.12,
|
42 | hover-label-text-color: null,
|
43 | hover-state-layer-color: primary,
|
44 | hover-state-layer-opacity: 0.04,
|
45 | label-text-color: primary,
|
46 | label-text-font: button-font-family,
|
47 | label-text-size: button-font-size,
|
48 | label-text-tracking: button-letter-spacing,
|
49 | label-text-transform: button-text-transform,
|
50 | label-text-weight: button-font-weight,
|
51 | pressed-label-text-color: null,
|
52 | pressed-state-layer-color: primary,
|
53 | pressed-state-layer-opacity: 0.12,
|
54 | with-icon-disabled-icon-color: null,
|
55 | with-icon-focus-icon-color: null,
|
56 | with-icon-hover-icon-color: null,
|
57 | with-icon-icon-color: null,
|
58 | with-icon-icon-size: 18px,
|
59 | with-icon-pressed-icon-color: null,
|
60 | );
|
61 |
|
62 |
|
63 |
|
64 |
|
65 | @mixin theme($theme, $resolver: resolvers.$material) {
|
66 | @include theme.validate-theme($light-theme, $theme);
|
67 | $theme: button-shared-theme.resolve-theme-elevation-keys(
|
68 | $theme,
|
69 | $resolver: $resolver
|
70 | );
|
71 | @include keys.declare-custom-properties($theme, $_custom-property-prefix);
|
72 | }
|
73 |
|
74 | @mixin theme-styles(
|
75 | $theme,
|
76 | $resolver: resolvers.$material,
|
77 | $query: feature-targeting.all()
|
78 | ) {
|
79 | @include theme.validate-theme-keys($light-theme, $theme);
|
80 | $theme: keys.create-theme-properties(
|
81 | $theme,
|
82 | $prefix: $_custom-property-prefix
|
83 | );
|
84 | @include theme-styles-internal($theme, $resolver: $resolver, $query: $query);
|
85 | }
|
86 |
|
87 | @mixin theme-styles-internal(
|
88 | $theme,
|
89 | $resolver: resolvers.$material,
|
90 | $query: feature-targeting.all()
|
91 | ) {
|
92 | @include theme.validate-theme-keys($light-theme, $theme);
|
93 | @include button-shared-theme.theme($theme, $resolver, $query: $query);
|
94 | }
|
95 |
|
96 | @mixin deprecated-theme-styles($query: feature-targeting.all()) {
|
97 | $theme: map.merge(
|
98 | $light-theme,
|
99 | (
|
100 | focus-state-layer-color: null,
|
101 | focus-state-layer-opacity: null,
|
102 | hover-state-layer-color: null,
|
103 | hover-state-layer-opacity: null,
|
104 | pressed-state-layer-color: null,
|
105 | pressed-state-layer-opacity: null,
|
106 | label-text-font: null,
|
107 | label-text-size: null,
|
108 | label-text-tracking: null,
|
109 | label-text-transform: null,
|
110 | label-text-weight: null,
|
111 | )
|
112 | );
|
113 |
|
114 | .mdc-button {
|
115 | @include button-shared-theme.theme(
|
116 | $theme,
|
117 | resolvers.$material,
|
118 | $query: $query
|
119 | );
|
120 | }
|
121 | }
|