1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | @use '@material/feature-targeting/feature-targeting';
|
24 | @use '@material/theme/keys';
|
25 | @use '@material/theme/theme';
|
26 | @use '@material/tokens/resolvers';
|
27 | @use './button-shared-theme';
|
28 |
|
29 | $_custom-property-prefix: 'protected-button';
|
30 |
|
31 | $light-theme: (
|
32 | container-color: primary,
|
33 | container-elevation: 2,
|
34 | container-height: button-shared-theme.$height,
|
35 | container-shadow-color: black,
|
36 | container-shape: button-shared-theme.$shape-radius,
|
37 | disabled-container-color: button-shared-theme.$disabled-container-color,
|
38 | disabled-container-elevation: 0,
|
39 | disabled-label-text-color: button-shared-theme.$disabled-ink-color,
|
40 | focus-container-elevation: 4,
|
41 | focus-label-text-color: null,
|
42 | focus-state-layer-color: on-primary,
|
43 | focus-state-layer-opacity: 0.24,
|
44 | hover-container-elevation: 4,
|
45 | hover-label-text-color: null,
|
46 | hover-state-layer-color: on-primary,
|
47 | hover-state-layer-opacity: 0.08,
|
48 | label-text-color: on-primary,
|
49 | label-text-font: button-font-family,
|
50 | label-text-size: button-font-size,
|
51 | label-text-tracking: button-letter-spacing,
|
52 | label-text-transform: button-text-transform,
|
53 | label-text-weight: button-font-weight,
|
54 | pressed-container-elevation: 8,
|
55 | pressed-label-text-color: null,
|
56 | pressed-state-layer-color: on-primary,
|
57 | pressed-state-layer-opacity: 0.24,
|
58 | with-icon-disabled-icon-color: null,
|
59 | with-icon-focus-icon-color: null,
|
60 | with-icon-hover-icon-color: null,
|
61 | with-icon-icon-color: null,
|
62 | with-icon-icon-size: 18px,
|
63 | with-icon-pressed-icon-color: null,
|
64 | );
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | @mixin theme($theme, $resolver: resolvers.$material) {
|
70 | @include theme.validate-theme($light-theme, $theme);
|
71 | $theme: button-shared-theme.resolve-theme-elevation-keys(
|
72 | $theme,
|
73 | $resolver: $resolver
|
74 | );
|
75 | @include keys.declare-custom-properties($theme, $_custom-property-prefix);
|
76 | }
|
77 |
|
78 | @mixin theme-styles(
|
79 | $theme,
|
80 | $resolver: resolvers.$material,
|
81 | $query: feature-targeting.all()
|
82 | ) {
|
83 | @include theme.validate-theme($light-theme, $theme);
|
84 |
|
85 | $theme: keys.create-theme-properties(
|
86 | $theme,
|
87 | $prefix: $_custom-property-prefix
|
88 | );
|
89 | @include button-shared-theme.theme($theme, $resolver, $query: $query);
|
90 | }
|