|
1 | | -@use 'sass:color'; |
2 | | -@use 'sass:meta'; |
3 | 1 | @use '../core/theming/inspection'; |
4 | 2 |
|
5 | 3 | // Tokens that can't be configured through Angular Material's current theming API, |
|
10 | 8 |
|
11 | 9 | // Tokens that can be configured through Angular Material's color theming API. |
12 | 10 | @function get-color-tokens($theme) { |
13 | | - $table-background: inspection.get-theme-color($theme, background, card); |
14 | | - $text-color: inspection.get-theme-color($theme, foreground, secondary-text); |
15 | | - $arrow-color: null; |
16 | | - |
17 | | - // Because the arrow is made up of multiple elements that are stacked on top of each other, |
18 | | - // we can't use the semi-transparent color from the theme directly. If the value is a color |
19 | | - // *type*, we convert it into a solid color by taking the opacity from the rgba value and |
20 | | - // using the value to determine the percentage of the background to put into foreground |
21 | | - // when mixing the colors together. Otherwise, if it resolves to something different |
22 | | - // (e.g. it resolves to a CSS variable), we use the color directly. |
23 | | - @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) { |
24 | | - $text-opacity: color.opacity($text-color); |
25 | | - $arrow-color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%); |
26 | | - } |
27 | | - @else { |
28 | | - $arrow-color: $text-color; |
29 | | - } |
30 | | - |
31 | 11 | @return ( |
32 | | - sort-arrow-color: $arrow-color, |
| 12 | + sort-arrow-color: inspection.get-theme-color($theme, foreground, text), |
33 | 13 | ); |
34 | 14 | } |
35 | 15 |
|
|
0 commit comments