Merge pull request #232 from os2ulf/feature/OS2ULF-814

OS2ULF-814: Added theme-tertiary and removed theme-brown + setup app …

app.vue

@@ -15,6 +15,12 @@ const secondaryBgColor = computed(
 const secondaryBgTextColor = computed(
   () => settingsDataStore.settingsData?.secondary_background_text_color,
 );
+const tertiaryBgColor = computed(
+  () => settingsDataStore.settingsData?.tertiary_background_color,
+);
+const tertiaryBgTextColor = computed(
+  () => settingsDataStore.settingsData?.tertiary_background_text_color,
+);
 
 const positiveFontColor = computed(
   () => settingsDataStore.settingsData?.text_positive_color,
@@ -42,6 +48,9 @@ let primaryTextColor = '#fff';
 let secondaryColor = '#FBD800';
 let secondaryTextColor = '#000';
 
+let tertiaryColor = '#40362E';
+let tertiaryTextColor = '#fff';
+
 onBeforeMount(() => {
   if (settingsDataStore.settingsData === null) {
     settingsDataStore.getSettingsData();
@@ -89,6 +98,14 @@ onBeforeMount(() => {
     secondaryTextColor = secondaryBgTextColor.value;
   }
 
+  if (tertiaryBgColor.value) {
+    tertiaryColor = tertiaryBgColor.value;
+  }
+
+  if (tertiaryBgTextColor.value) {
+    tertiaryTextColor = tertiaryBgTextColor.value;
+  }
+
   document.documentElement.style.setProperty('--color-primary', primaryColor);
   document.documentElement.style.setProperty(
     '--color-primary-rgb',
@@ -106,6 +123,14 @@ onBeforeMount(() => {
     '--color-secondary-text',
     secondaryTextColor,
   );
+  document.documentElement.style.setProperty(
+    '--color-tertiary',
+    tertiaryColor,
+  );
+  document.documentElement.style.setProperty(
+    '--color-tertiary-text',
+    tertiaryTextColor,
+  );
 
   if (textPositiveColor.value) {
     document.documentElement.style.setProperty(

assets/css/_variables.css

@@ -8,8 +8,8 @@
 
 @import 'variables/_theme-colors.css';
 @import 'themes/theme.css';
+@import 'themes/theme-primary.css';
+@import 'themes/theme-secondary.css';
+@import 'themes/theme-tertiary.css';
 @import 'themes/theme-grey.css';
-@import 'themes/theme-brown.css';
 @import 'themes/theme-black.css';
-@import 'themes/theme-secondary.css';
-@import 'themes/theme-primary.css';

assets/css/themes/theme-tertiary.css

@@ -0,0 +1,34 @@
+.theme-tertiary {
+  --theme-background-color: var(--color-tertiary);
+  --theme-color: var(--color-tertiary-text);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-tertiary-lighten-4);
+  --theme-button-background-color: var(--color-tertiary-lighten-4);
+  --theme-button-text-color: var(--color-tertiary-darken-3);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-tertiary-lighten-3);
+  --theme-button-background-color-hover: var(--color-tertiary-lighten-3);
+  --theme-button-text-color-hover: var(--color-tertiary-darken-5);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-tertiary-lighten-3);
+  --theme-button-ghost-text-color: var(--color-tertiary-lighten-3);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-tertiary-lighten-3);
+  --theme-button-ghost-border-color-hover: var(--color-tertiary-lighten-3);
+  --theme-button-ghost-text-color-hover: var(--color-tertiary-darken-5);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-tertiary-text);
+
+  /* Inline Navigation */
+  --theme-inline-navigation-color: var(--color-tertiary);
+
+  /* Swiper */
+  --theme-swiper-tertiary-color: var(--color-white);
+  --theme-swiper-secondary-color: var(--color-tertiary-lighten-2);
+}