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/material/badge/_badge-theme.scss

@@ -132,17 +132,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/material/button-toggle/_button-toggle-theme.scss

@@ -11,7 +11,16 @@
   $config: mat-get-color-config($config-or-theme);
   $foreground: map-get($config, foreground);
   $background: map-get($config, 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/material/core/theming/_theming.scss

@@ -290,3 +290,12 @@ $_mat-theme-generate-default-density: true !default;
     color: $theme-or-color-config
   ));
 }
+
+
+// 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/material/sort/_sort-theme.scss

@@ -7,18 +7,17 @@
   $foreground: map-get($config, 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-transparent 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;