fix(button-toggle): use solid border color

Usually the theme divider color is rgba, which means that it can look differently, depending on the color behind it. As a result, the border of a selected button toggle is different from a deselected one, because its background color is darker. These changes switch to using a solid color to ensure that we have always have a consistent border.

These changes also add a new theming utility function that converts an rgba color to hex, if the consumer knows the background. We've been using it in a couple of places already, but now it's being moved out into a reusable function.

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -130,17 +130,16 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
 
   .mat-badge-disabled {
     .mat-badge-content {
-      $app-background: mat-color($background, 'background');
-      $badge-color: mat-color($foreground, disabled-button);
-
       // The disabled color usually has some kind of opacity, but because the badge is overlayed
       // on top of something else, it won't look good if it's opaque. If it is a color *type*,
       // 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.
+      $badge-color: mat-color($foreground, disabled-button);
+      $app-background: mat-color($background, 'background');
+
       @if (type-of($badge-color) == color and type-of($app-background) == color) {
-        $badge-opacity: opacity($badge-color);
-        background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
+        background: mat-rgba-to-hex($badge-color, $app-background);
       }
       @else {
         background: $badge-color;

src/lib/button-toggle/_button-toggle-theme.scss

@@ -6,7 +6,16 @@
 @mixin mat-button-toggle-theme($theme) {
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
-  $divider-color: mat-color($foreground, divider);
+  $theme-divider-color: mat-color($foreground, divider);
+
+  // By default the theme usually has an rgba color for the dividers, which can
+  // stack up with the background of a button toggle. This can cause the border
+  // of a selected toggle to look different from an deselected one. We use a solid
+  // color to ensure that the border always stays the same.
+  $divider-color: if(type-of($theme-divider-color) == color,
+    mat-rgba-to-hex($theme-divider-color, mat-color($background, card)),
+    $theme-divider-color
+  );
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {

src/lib/core/theming/_theming.scss

@@ -88,3 +88,11 @@
     background: $mat-dark-theme-background,
   );
 }
+
+// Approximates an rgba color into a solid hex color, given a background color.
+@function mat-rgba-to-hex($color, $background-color) {
+  // We convert the rgba color into a solid one by taking the opacity from the rgba
+  // value and using it to determine the percentage of the background to put
+  // into foreground when mixing the colors together.
+  @return mix($background-color, rgba($color, 1), (1 - opacity($color)) * 100%);
+}

src/lib/sort/_sort-theme.scss

@@ -1,25 +1,26 @@
+@import '../core/theming/theming';
+
 @mixin mat-sort-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
   .mat-sort-header-arrow {
-    $table-background: mat-color($background, 'card');
-    $text-color: mat-color($foreground, secondary-text);
-
     // 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. If the value is a color
     // *type*, 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. Otherwise, if it resolves to something different
     // (e.g. it resolves to a CSS variable), we use the color directly.
+    $text-color: mat-color($foreground, secondary-text);
+    $table-background: mat-color($background, 'card');
+
     @if (type-of($table-background) == color and type-of($text-color) == color) {
-      $text-opacity: opacity($text-color);
-      color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
+      color: mat-rgba-to-hex($text-color, $table-background);
     }
     @else {
       color: $text-color;
     }
   }
 }
 
-@mixin mat-sort-typography($config) { }
+@mixin mat-sort-typography($config) {}