fix(table): use solid color for sorting arrow (#11533)

Currently we use an rgba color for the table's sorting arrow which ends up looking weird, because the arrow is made up of multiple stacked elements. These changes add some logic that convert the arrow's color into a solid one so the individual pieces can blend into each other.

Fixes #11340.

Author: crisbeto

src/lib/sort/_sort-theme.scss

@@ -1,4 +1,17 @@
-// Empty mixins to be consistent with all other components.
-@mixin mat-sort-theme($theme) { }
+@mixin mat-sort-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-sort-header-arrow {
+    // Because the arrow is made up of multiple elements that are stacked on top of each other,
+    // we can't use the semi-trasparent color from the theme directly. We convert it into a solid
+    // color by taking the opacity from the rgba value and using the value to determine the
+    // percentage of the background to put into foreground when mixing the colors together.
+    $table-background: mat-color($background, 'card');
+    $text-color: mat-color($foreground, secondary-text);
+    $text-opacity: opacity($text-color);
+    color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+  }
+}
 
 @mixin mat-sort-typography($config) { }