Styling checkboxes in app-notice

I applied a custom theme and palette for the checkboxes for fill-dark and fill-light. The palette is generated, based off the colorDark of the notice type. It works well for these modes, which have a lighter background. The other modes seem to handle both light and dark themes well. I also tested most of the available types. There's no "is dark" detection logic needed, since the background color is the same between light and dark.

I also made the palettes public, so that they can be referenced in other files.

Author: josephmyers

src/SIL.XForge.Scripture/ClientApp/src/app/shared/notice/notice.component.scss

@@ -1,6 +1,9 @@
 @use 'sass:color';
 @use 'sass:list';
+@use 'sass:map';
+@use '@angular/material' as mat;
 @use 'src/variables' as sfColors;
+@use 'src/themes/default' as default;
 
 // prettier-ignore
 $colors: (
@@ -19,6 +22,27 @@ $colors: (
   @return color.scale($color, $lightness: $lightness);
 }
 
+@function create-dark-palette($base-color) {
+  @return (
+    0: scaleLightness($base-color, -95%),
+    10: scaleLightness($base-color, -90%),
+    20: scaleLightness($base-color, -80%),
+    25: scaleLightness($base-color, -75%),
+    30: scaleLightness($base-color, -70%),
+    35: scaleLightness($base-color, -65%),
+    40: scaleLightness($base-color, -60%),
+    50: scaleLightness($base-color, -50%),
+    60: scaleLightness($base-color, -40%),
+    70: scaleLightness($base-color, -30%),
+    80: scaleLightness($base-color, -25%),
+    90: scaleLightness($base-color, -10%),
+    95: scaleLightness($base-color, -5%),
+    98: scaleLightness($base-color, -2%),
+    99: scaleLightness($base-color, -1%),
+    100: $base-color
+  );
+}
+
 :host {
   display: flex;
   align-items: center;
@@ -59,6 +83,20 @@ $colors: (
       --notice-color-button-bg-alt: #{scaleLightness($colorLight, 20%)};
       --notice-color-button-hover-bg-alt: #{scaleLightness($colorLight, 80%)};
       --notice-color-button-text-alt: #{scaleLightness($colorLight, -60%)};
+
+      // prettier-ignore
+      &.mode-fill-dark,
+      &.mode-fill-light {
+        $_notice_theme: mat.define-theme(
+          (
+            color: (
+                primary: map.merge(create-dark-palette($colorLight), default.$rest)
+              )
+          )
+        );
+
+        @include mat.checkbox-color($_notice_theme);
+      }
     }
   }
 

src/SIL.XForge.Scripture/ClientApp/src/themes/_default.scss

@@ -4,7 +4,7 @@
 
 // Styles for angular material components. Refer to https://material.angular.io/guide/theming
 // Note: Color palettes are generated from primary: #BECC63, secondary: #9BA26D, tertiary: #F3D479
-$_palettes: (
+$palettes: (
   primary: (
     0: #000000,
     10: #2b0053,
@@ -124,14 +124,14 @@ $_palettes: (
     100: #ffffff
   )
 );
-$_rest: (
-  secondary: map.get($_palettes, secondary),
-  neutral: map.get($_palettes, neutral),
-  neutral-variant: map.get($_palettes, neutral-variant),
-  error: map.get($_palettes, error)
+$rest: (
+  secondary: map.get($palettes, secondary),
+  neutral: map.get($palettes, neutral),
+  neutral-variant: map.get($palettes, neutral-variant),
+  error: map.get($palettes, error)
 );
-$_primary: map.merge(map.get($_palettes, primary), $_rest);
-$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+$_primary: map.merge(map.get($palettes, primary), $rest);
+$_tertiary: map.merge(map.get($palettes, tertiary), $rest);
 
 $default-theme: mat.define-theme(
   (