From 10d8d09c43acc4f78ee4faa98d224ab49afb9e62 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 16 Jan 2025 09:12:15 +0300 Subject: [PATCH] theme refactor: override primary color palette --- .../themes/plh_facilitator_mx/_index.scss | 25 ++++-- .../themes/plh_facilitator_mx/_overrides.scss | 8 +- .../plh_facilitator_mx/_typography.scss | 89 ------------------- 3 files changed, 22 insertions(+), 100 deletions(-) delete mode 100644 src/theme/themes/plh_facilitator_mx/_typography.scss diff --git a/src/theme/themes/plh_facilitator_mx/_index.scss b/src/theme/themes/plh_facilitator_mx/_index.scss index 54b11b67e4..616f4ee04a 100644 --- a/src/theme/themes/plh_facilitator_mx/_index.scss +++ b/src/theme/themes/plh_facilitator_mx/_index.scss @@ -5,8 +5,8 @@ @mixin theme-plh_facilitator_mx { [data-theme="plh_facilitator_mx"] { /** Authoring variables **/ - $color-primary: #006265; // #006265; - $color-secondary: #a83c0c; // #a83c0c; + $color-primary: #005054; + $color-secondary: #a83c0c; $page-background: white; /** Global and component variables **/ @@ -16,12 +16,12 @@ font-weight-bold: 700, font-weight-extra-bold: 800, - font-size-text-tiny: 14px, - font-size-text-small: 16px, - font-size-text-mid-size: 18px, - font-size-text-medium: 20px, + font-size-text-tiny: 12px, + font-size-text-small: 14px, + font-size-text-mid-size: 16px, + font-size-text-medium: 18px, font-size-text-large: 24px, - font-size-text-title: 28px, + font-size-text-title: 24px, font-size-text-extra-large: 32px, line-height-text-tiny: 18px, @@ -101,6 +101,17 @@ color-accent-blue-70: #98adca, color-accent-blue-80: #b9c8de, color-accent-blue-90: #dce3ef, + + // PRIMARY PALETTE OVERRIDE + ion-color-primary-800: #00383b, + ion-color-primary-700: #004448, + ion-color-primary-600: #0f696d, + ion-color-primary-500: #2c8388, + ion-color-primary-400: #509ca1, + ion-color-primary-300: #77b6b9, + ion-color-primary-200: #a2ced1, + ion-color-primary-100: #d0e7e8, + ion-color-primary-50: #e7f3f4, ); @include utils.generateTheme($color-primary, $color-secondary, $page-background); @each $name, $value in $variable-overrides { diff --git a/src/theme/themes/plh_facilitator_mx/_overrides.scss b/src/theme/themes/plh_facilitator_mx/_overrides.scss index 0d6c3a36c9..d67559b513 100644 --- a/src/theme/themes/plh_facilitator_mx/_overrides.scss +++ b/src/theme/themes/plh_facilitator_mx/_overrides.scss @@ -228,7 +228,7 @@ body[data-theme="plh_facilitator_mx"] { color: white; } .card.standard { - color: var(--ion-color-primary-800); + color: var(--ion-color-primary-600); } .alternative { color: var(--ion-color-primary-50); @@ -356,8 +356,8 @@ body[data-theme="plh_facilitator_mx"] { } } .container-player[data-variant~="large"] { - background: var(--ion-color-primary-50); - border: 0.9px solid var(--ion-color-primary-100); + background: var(--ion-color-gary-100); + border: 0.9px solid var(--ion-color-gray-200); box-sizing: border-box; box-shadow: none; border-radius: var(--ion-border-radius-standard); @@ -398,7 +398,7 @@ body[data-theme="plh_facilitator_mx"] { } .btn-play { @include mixins.large-square; - --background: var(--ion-color-primary-50) !important; + --background: var(--ion-color-gary-100) !important; --border-radius: var(--ion-border-radius-rounded) !important; --padding: 0 !important; --box-shadow: none !important; diff --git a/src/theme/themes/plh_facilitator_mx/_typography.scss b/src/theme/themes/plh_facilitator_mx/_typography.scss deleted file mode 100644 index 0fdf8d266e..0000000000 --- a/src/theme/themes/plh_facilitator_mx/_typography.scss +++ /dev/null @@ -1,89 +0,0 @@ -// Nunito Variable weights -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 300; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-300.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 500; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: italic; - font-weight: 500; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-500italic.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 600; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: italic; - font-weight: 600; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-600italic.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 700; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: italic; - font-weight: 700; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-700italic.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 800; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: italic; - font-weight: 800; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-800italic.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: normal; - font-weight: 900; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900.woff2") format("woff2"); -} -@font-face { - font-family: "Nunito"; - font-style: italic; - font-weight: 900; - src: - local(""), - url("../../../assets/fonts/nunito-v26-latin/nunito-v26-latin-900italic.woff2") format("woff2"); -}