Merge pull request #2355 from IDEMSInternational/theme/early_family_math

feat: add EFM theme

src/theme/themes/_index.scss

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

src/theme/themes/early_family_math.scss

@@ -0,0 +1,57 @@
+@use "./utils";
+@use "sass:color";
+
+@mixin theme-early_family_math {
+  [data-theme="early_family_math"] {
+    /** Authoring variables **/
+    $color-primary: #1874ac;
+    $color-secondary: #b53f94;
+    $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: #dc3926,
+      // 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
+    );
+    @include utils.generateTheme($color-primary, $color-secondary, $page-background);
+    @each $name, $value in $variable-overrides {
+      --#{$name}: #{$value};
+    }
+  }
+}

src/theme/variables.scss

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