[6a3a178] | 1 | @use 'sass:color';
|
---|
| 2 | @use 'sass:map';
|
---|
| 3 | @use 'sass:meta';
|
---|
| 4 | @use '../core/theming/theming';
|
---|
| 5 |
|
---|
| 6 | @mixin color($config-or-theme) {
|
---|
| 7 | $config: theming.get-color-config($config-or-theme);
|
---|
| 8 | $background: map.get($config, background);
|
---|
| 9 | $foreground: map.get($config, foreground);
|
---|
| 10 |
|
---|
| 11 | .mat-sort-header-arrow {
|
---|
| 12 | $table-background: theming.get-color-from-palette($background, 'card');
|
---|
| 13 | $text-color: theming.get-color-from-palette($foreground, secondary-text);
|
---|
| 14 |
|
---|
| 15 | // Because the arrow is made up of multiple elements that are stacked on top of each other,
|
---|
| 16 | // we can't use the semi-transparent color from the theme directly. If the value is a color
|
---|
| 17 | // *type*, we convert it into a solid color by taking the opacity from the rgba value and
|
---|
| 18 | // using the value to determine the percentage of the background to put into foreground
|
---|
| 19 | // when mixing the colors together. Otherwise, if it resolves to something different
|
---|
| 20 | // (e.g. it resolves to a CSS variable), we use the color directly.
|
---|
| 21 | @if (meta.type-of($table-background) == color and meta.type-of($text-color) == color) {
|
---|
| 22 | $text-opacity: opacity($text-color);
|
---|
| 23 | color: color.mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
|
---|
| 24 | }
|
---|
| 25 | @else {
|
---|
| 26 | color: $text-color;
|
---|
| 27 | }
|
---|
| 28 | }
|
---|
| 29 | }
|
---|
| 30 |
|
---|
| 31 | @mixin typography($config-or-theme) {}
|
---|
| 32 |
|
---|
| 33 | @mixin _density($config-or-theme) {}
|
---|
| 34 |
|
---|
| 35 | @mixin theme($theme-or-color-config) {
|
---|
| 36 | $theme: theming.private-legacy-get-theme($theme-or-color-config);
|
---|
| 37 | @include theming.private-check-duplicate-theme-styles($theme, 'mat-sort') {
|
---|
| 38 | $color: theming.get-color-config($theme);
|
---|
| 39 | $density: theming.get-density-config($theme);
|
---|
| 40 | $typography: theming.get-typography-config($theme);
|
---|
| 41 |
|
---|
| 42 | @if $color != null {
|
---|
| 43 | @include color($color);
|
---|
| 44 | }
|
---|
| 45 | @if $density != null {
|
---|
| 46 | @include _density($density);
|
---|
| 47 | }
|
---|
| 48 | @if $typography != null {
|
---|
| 49 | @include typography($typography);
|
---|
| 50 | }
|
---|
| 51 | }
|
---|
| 52 | }
|
---|