feat: add plh_kids_kw theme

src/theme/themes/_index.scss

@@ -3,3 +3,4 @@
 @forward "./pfr.scss";
 @forward "./plh_facilitator_mx.scss";
 @forward "./early_family_math.scss";
+@forward "./plh_kids_kw.scss";

src/theme/themes/plh_kids_kw.scss

@@ -0,0 +1,58 @@
+@use "./utils";
+@use "sass:color";
+
+@mixin theme-plh_kids_kw {
+  [data-theme="plh_kids_kw"] {
+    /** Authoring variables **/
+    $color-primary: hsl(203, 76%, 21%); // #0d3f5e
+    $color-secondary: hsl(31, 100%, 57%); // #fa9529
+    $page-background: white;
+
+    /** Authoring component overrides **/
+    $variable-overrides: (
+      button-background-primary: var(--ion-color-primary-500),
+      button-background-secondary: var(--ion-color-secondary),
+      button-background-option: var(--ion-color-primary-800),
+      round-button-background-secondary-light: var(--ion-color-yellow),
+      // round-button-background-secondary-mid: #fa9529,
+      // round-button-background-secondary-dark: #F87023,
+      // tile-button-background-default: #a3d9fa,
+      tile-button-background-primary: var(--ion-color-primary-500),
+      tile-button-background-primary-light: var(--ion-color-primary-300),
+      tile-button-background-secondary: var(--ion-color-secondary),
+      tile-button-background-secondary-light: var(--ion-color-yellow),
+      // audio-control-background: #1980d2,
+      points-item-background: var(--ion-background-color),
+      points-item-background-complete: var(--ion-color-primary-200),
+      points-item-border: rgba(black, 0.07),
+      display-group-background-banner-primary: var(--ion-color-primary-200),
+      display-group-background-banner-secondary: var(--ion-color-secondary-300),
+      // display-group-background-tool-1: #fa8e29,
+      // display-group-background-tool-2: #ff7b00,
+      // display-group-background-tool-3: #108ab2,
+      // display-group-background-tool-4: #096a8b,
+      // display-group-background-tool-5: $color-primary,
+      display-group-background-home-light: var(--ion-color-primary-300),
+      display-group-background-home-mid: var(--ion-color-primary-600),
+      display-group-background-home-dark: var(--ion-color-primary-800),
+      // timer-button-background: #1985d2,
+      // combo-box-placeholder-text: rgba(13, 64, 96, 0.5),
+      // combo-box-background-no-value: transparent,
+      combo-box-background-with-value: var(--ion-color-primary-300),
+      // slider-ui-color: #096e90,
+      accordion-background-highlight: var(--ion-color-primary-300),
+      tour-next-button-background: var(--ion-color-secondary),
+      radio-group-background-selected: var(--ion-color-primary-300),
+      // radio-button-font-size: 1.25rem,
+      // radio-button-font-color: var(--ion-color-primary),
+      ion-item-background: var(--ion-color-gray-light),
+      task-progress-bar-color: var(--ion-color-green),
+      // checkbox-background-color: white,
+      progress-path-line-background: var(--ion-color-gray-100),
+    );
+    @include utils.generateTheme($color-primary, $color-secondary, $page-background);
+    @each $name, $value in $variable-overrides {
+      --#{$name}: #{$value};
+    }
+  }
+}

src/theme/variables.scss

@@ -14,6 +14,7 @@
 @include themes.theme-pfr;
 @include themes.theme-plh_facilitator_mx;
 @include themes.theme-early_family_math;
+@include themes.theme-plh_kids_kw;
 
 /** Ionic CSS Variables **/
 :root {