fix(material/button-toggle): use solid border color (#14253)

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/button-toggle/_button-toggle-theme.scss

@@ -11,6 +11,16 @@
   $foreground: map.get($config, foreground);
   $background: map.get($config, background);
   $divider-color: theming.get-color-from-palette($foreground, divider);
+  $theme-divider-color: map.get($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,
+    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),
+    $theme-divider-color
+  );
 
   .mat-button-toggle-standalone,
   .mat-button-toggle-group {

src/material/core/theming/_theming.scss

@@ -437,3 +437,12 @@ $_emitted-density: () !default;
     color: $theme-or-color-config
   ));
 }
+
+
+// Approximates an rgba color into a solid hex color, given a background color.
+@function private-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%);
+}