|
42 | 42 |
|
43 | 43 | // Tokens that can be configured through Angular Material's color theming API.
|
44 | 44 | @function get-color-tokens($theme) {
|
| 45 | + $system: m2-utils.get-system($theme); |
45 | 46 | $is-dark: inspection.get-theme-type($theme) == dark;
|
46 | 47 |
|
47 | 48 | // Ideally we would derive all values directly from the theme, but it causes a lot of regressions
|
|
52 | 53 | );
|
53 | 54 |
|
54 | 55 | @return (
|
55 |
| - button-filled-container-color: inspection.get-theme-color($theme, system, surface), |
| 56 | + button-filled-container-color: map.get($system, surface), |
56 | 57 | button-filled-disabled-container-color:
|
57 | 58 | inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
|
58 | 59 | button-filled-disabled-label-text-color:
|
59 | 60 | inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
|
60 | 61 | button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
61 |
| - button-filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), |
62 |
| - button-filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), |
| 62 | + button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), |
| 63 | + button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), |
63 | 64 | button-filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
|
64 |
| - button-filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), |
| 65 | + button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), |
65 | 66 | button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
|
66 | 67 | button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
67 | 68 | button-outlined-disabled-label-text-color:
|
68 | 69 | inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
|
69 | 70 | button-outlined-disabled-outline-color: $outline,
|
70 | 71 | button-outlined-disabled-state-layer-color:
|
71 | 72 | inspection.get-theme-color($theme, foreground, base),
|
72 |
| - button-outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), |
73 |
| - button-outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), |
| 73 | + button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), |
| 74 | + button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), |
74 | 75 | button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
|
75 | 76 | button-outlined-outline-color: $outline,
|
76 |
| - button-outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), |
| 77 | + button-outlined-pressed-state-layer-opacity: |
| 78 | + map.get($system, pressed-state-layer-opacity), |
77 | 79 | button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
|
78 | 80 | button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
79 |
| - button-protected-container-color: inspection.get-theme-color($theme, system, surface), |
| 81 | + button-protected-container-color: map.get($system, surface), |
80 | 82 | button-protected-disabled-container-color:
|
81 | 83 | inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
|
82 | 84 | button-protected-disabled-label-text-color:
|
83 | 85 | inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
|
84 | 86 | button-protected-disabled-state-layer-color:
|
85 | 87 | inspection.get-theme-color($theme, foreground, base),
|
86 |
| - button-protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), |
87 |
| - button-protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), |
| 88 | + button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), |
| 89 | + button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), |
88 | 90 | button-protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
|
89 |
| - button-protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), |
| 91 | + button-protected-pressed-state-layer-opacity: |
| 92 | + map.get($system, pressed-state-layer-opacity), |
90 | 93 | button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
|
91 | 94 | button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
92 | 95 | button-text-disabled-label-text-color:
|
93 | 96 | inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
|
94 | 97 | button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
95 |
| - button-text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), |
96 |
| - button-text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), |
| 98 | + button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), |
| 99 | + button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), |
97 | 100 | button-text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
|
98 |
| - button-text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), |
| 101 | + button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), |
99 | 102 | button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
|
100 | 103 | button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
101 |
| - button-tonal-container-color: inspection.get-theme-color($theme, system, surface), |
| 104 | + button-tonal-container-color: map.get($system, surface), |
102 | 105 | button-tonal-disabled-container-color:
|
103 | 106 | inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
|
104 | 107 | button-tonal-disabled-label-text-color:
|
105 | 108 | inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
|
106 | 109 | button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
107 |
| - button-tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12), |
108 |
| - button-tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04), |
| 110 | + button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity), |
| 111 | + button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity), |
109 | 112 | button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
|
110 |
| - button-tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12), |
| 113 | + button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity), |
111 | 114 | button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
|
112 | 115 | button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
|
113 | 116 | );
|
|
0 commit comments