diff --git a/src/theme/themes/_index.scss b/src/theme/themes/_index.scss index 34596db32..4186a8b9c 100644 --- a/src/theme/themes/_index.scss +++ b/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"; diff --git a/src/theme/themes/plh_kids_kw.scss b/src/theme/themes/plh_kids_kw.scss new file mode 100644 index 000000000..b6acb177e --- /dev/null +++ b/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}; + } + } +} diff --git a/src/theme/variables.scss b/src/theme/variables.scss index ade50f988..f8a7ad09d 100644 --- a/src/theme/variables.scss +++ b/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 {