Merge pull request #60 from os2ulf/develop

Develop

app.vue

@@ -16,8 +16,24 @@ const secondaryBgTextColor = computed(
   () => settingsDataStore.settingsData?.secondary_background_text_color,
 );
 
+// Function to convert hex to RGB
+function hexToRgb(hex: string) {
+  try {
+    let bigint = parseInt(hex.slice(1), 16);
+    let r = (bigint >> 16) & 255;
+    let g = (bigint >> 8) & 255;
+    let b = bigint & 255;
+
+    return `${r}, ${g}, ${b}`;
+  } catch (error) {
+    return '255, 255, 255';
+  }
+}
+
 let primaryColor = '#297F78';
+let primaryColorRgb = hexToRgb(primaryColor);
 let primaryTextColor = '#fff';
+
 let secondaryColor = '#FBD800';
 let secondaryTextColor = '#000';
 
@@ -53,6 +69,7 @@ onBeforeMount(() => {
 
   if (primaryBgColor.value) {
     primaryColor = primaryBgColor.value;
+    primaryColorRgb = hexToRgb(primaryColor);
   }
 
   if (primaryBgTextColor.value) {
@@ -68,6 +85,10 @@ onBeforeMount(() => {
   }
 
   document.documentElement.style.setProperty('--color-primary', primaryColor);
+  document.documentElement.style.setProperty(
+    '--color-primary-rgb',
+    primaryColorRgb,
+  );
   document.documentElement.style.setProperty(
     '--color-primary-text',
     primaryTextColor,

assets/css/_base.css

@@ -8,12 +8,12 @@ body {
   min-height: 100%;
   margin: 0;
   padding: 0;
-  color: var(--color-text);
+  color: var(--theme-color);
   font-weight: var(--body-font-weight);
   font-size: var(--body-font-size);
   font-family: var(--body-font-family);
   line-height: 1.5;
-  background-color: var(--site-background-color);
+  background-color: var(--theme-background-color);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;

assets/css/_buttons.css

@@ -33,31 +33,28 @@
   }
 
   &--primary {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
+    background-color: var(--theme-button-background-color);
+    border-color: var(--theme-button-border-color);
+    color: var(--theme-button-text-color);
     transition: all 0.3s ease-in-out;
 
     &:hover {
-      background-color: var(--color-primary-darken-2);
-      border-color: var(--color-primary-darken-2);
+      background-color: var(--theme-button-background-color-hover);
+      border-color: var(--theme-button-border-color-hover);
+      color: var(--theme-button-text-color-hover);
     }
 
     &:active {
-      background-color: var(--color-primary-darken-2);
-      border-color: var(--color-primary-darken-2);
+      background-color: var(--theme-button-background-color-hover);
+      border-color: var(--theme-button-border-color-hover);
+      color: var(--theme-button-text-color-hover);
     }
 
     &--ghost {
-      color: var(--color-primary);
-      background-color: transparent;
-      border: 2px solid var(--color-primary);
-      opacity: 1;
-
-      &:hover {
-        color: var(--color-primary-lighten-4);
-        background-color: var(--color-primary);
-        opacity: 1;
-      }
+      color: var(--color-primary-darken-2);
+      border-color: var(--color-primary-darken-2);
+      background-color: var(--color-primary-darken-2);
+      transition: all 0.3s ease-in-out;
     }
   }
 
@@ -164,24 +161,25 @@
 
   &--ghost {
     padding: 18px 32px;
-    color: var(--color-text);
     font-weight: 700;
     font-size: var(--body-font-size);
-    background-color: transparent;
-    border: 2px solid var(--color-primary-lighten-3);
     border-radius: 56px;
     transition: all 0.3s ease-in-out;
 
+    color: var(--theme-button-ghost-text-color);
+    border: 2px solid var(--theme-button-ghost-border-color);
+    background-color: var(--theme-button-ghost-background-color);
+
     &:hover {
-      color: var(--color-primary-darken-2);
-      background-color: var(--color-white);
-      border-color: var(--color-white);
+      color: var(--theme-button-ghost-text-color-hover) !important;
+      background-color: var(--theme-button-ghost-background-color-hover);
+      border-color: var(--theme-button-ghost-border-color-hover);
       opacity: 1;
     }
 
     &.button {
       &--primary {
-        color: var(--color-primary-darken-2);
+        color: var(--theme-button-ghost-text-color);
       }
 
       &--success {
@@ -212,24 +210,36 @@
 
   &--link {
     padding: 10px 0;
-    color: var(--color-text);
+    color: var(--theme-button-text-color);
     font-weight: 700;
     background-color: transparent;
     border-top: none;
     border-right: none;
     border-left: none;
     border-radius: 0;
     font-size: var(--body-font-size);
+    border-bottom: 2px solid var(--theme-button-border-color);
+    transition: all 0.3s ease-in-out;
 
     &:hover {
-      color: var(--color-text);
+      color: var(--theme-button-ghost-text-color-hover);
       background-color: transparent;
     }
 
     &.button {
+      color: var(--color-white);
+      border-bottom: 2px solid var(--color-white);
+      font-weight: 700;
+
+      &:hover {
+        color: var(--theme-button-ghost-text-color-hover);
+        border-bottom: 2px solid var(--theme-button-ghost-text-color-hover);
+      }
+
       &--white {
         &:hover {
-          color: var(--color-white);
+          color: var(--theme-button-ghost-text-color-hover);
+          border-bottom: 2px solid var(--theme-button-ghost-text-color-hover);
           background: none;
         }
       }

assets/css/_transitions.css

@@ -166,3 +166,41 @@
     transform: translateX(0);
   }
 }
+
+/* slide from top */
+.slide-top-enter-active {
+  animation: slide-top 0.3s;
+}
+
+.slide-top-leave-active {
+  animation: slide-top 0.3s reverse;
+}
+
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* slide top desktop offcanvas */
+.slide-top-offcanvas-enter-active {
+  animation: slide-top-offcanvas 0.3s;
+}
+
+.slide-top-offcanvas-leave-active {
+  display: none;
+}
+
+@keyframes slide-top-offcanvas {
+  0% {
+    transform: translateY(-20%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}

assets/css/_variables.css

@@ -1,7 +1,13 @@
 @import 'variables/_form.css';
 @import 'variables/_misc.css';
 @import 'variables/_spacings.css';
-@import 'variables/_theme-colors.css';
 @import 'variables/_typography.css';
 @import 'variables/_grid.css';
 @import 'variables/_swiper.css';
+
+@import 'variables/_theme-colors.css';
+@import 'themes/theme.css';
+@import 'themes/theme-grey.css';
+@import 'themes/theme-brown.css';
+@import 'themes/theme-secondary.css';
+@import 'themes/theme-primary.css';

assets/css/themes/theme-brown.css

@@ -0,0 +1,27 @@
+.theme-brown {
+  --theme-background-color: var(--color-tertiary);
+  --theme-color: var(--color-white);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-tertiary-darken-2);
+  --theme-button-background-color: var(--color-tertiary-darken-2);
+  --theme-button-text-color: var(--color-secondary-lighten-4);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-tertiary-darken-4);
+  --theme-button-background-color-hover: var(--color-tertiary-darken-4);
+  --theme-button-text-color-hover: var(--color-secondary);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-tertiary-darken-2);
+  --theme-button-ghost-text-color: var(--color-secondary-lighten-4);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-tertiary-darken-4);
+  --theme-button-ghost-border-color-hover: var(--color-tertiary-darken-4);
+  --theme-button-ghost-text-color-hover: var(--color-secondary);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-white);
+}

assets/css/themes/theme-grey.css

@@ -0,0 +1,27 @@
+.theme-grey {
+  --theme-background-color: #d1cfcd;
+  --theme-color: var(--color-tertiary);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-primary);
+  --theme-button-background-color: var(--color-primary);
+  --theme-button-text-color: var(--color-white);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-primary-darken-2);
+  --theme-button-background-color-hover: var(--color-primary-darken-2);
+  --theme-button-text-color-hover: var(--color-white);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-primary);
+  --theme-button-ghost-text-color: var(--color-primary);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-border-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-text-color-hover: var(--color-primary-darken-3);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-tertiary);
+}

assets/css/themes/theme-primary.css

@@ -0,0 +1,27 @@
+.theme-primary {
+  --theme-background-color: var(--color-primary);
+  --theme-color: var(--color-white);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-primary-lighten-4);
+  --theme-button-background-color: var(--color-primary-lighten-4);
+  --theme-button-text-color: var(--color-primary-darken-3);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-primary-lighten-3);
+  --theme-button-background-color-hover: var(--color-primary-lighten-3);
+  --theme-button-text-color-hover: var(--color-primary-darken-5);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-primary-lighten-3);
+  --theme-button-ghost-text-color: var(--color-primary-lighten-3);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-border-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-text-color-hover: var(--color-primary-darken-5);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-white);
+}

assets/css/themes/theme-secondary.css

@@ -0,0 +1,27 @@
+.theme-secondary {
+  --theme-background-color: var(--color-secondary-lighten-5);
+  --theme-color: var(--color-text);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-tertiary);
+  --theme-button-background-color: var(--color-tertiary);
+  --theme-button-text-color: var(--color-secondary-lighten-4);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-tertiary-darken-2);
+  --theme-button-background-color-hover: var(--color-tertiary-darken-2);
+  --theme-button-text-color-hover: var(--color-secondary);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-tertiary);
+  --theme-button-ghost-text-color: var(--color-tertiary);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-tertiary);
+  --theme-button-ghost-border-color-hover: var(--color-tertiary);
+  --theme-button-ghost-text-color-hover: var(--color-secondary);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-text);
+}

assets/css/themes/theme.css

@@ -0,0 +1,29 @@
+/* default vars - no theme */
+
+:root {
+  --theme-background-color: var(--color-white);
+  --theme-color: var(--color-text);
+
+  /* button - filled */
+  --theme-button-border-color: var(--color-primary);
+  --theme-button-background-color: var(--color-primary);
+  --theme-button-text-color: var(--color-white);
+
+  /* button - filled:hover */
+  --theme-button-border-color-hover: var(--color-primary-darken-2);
+  --theme-button-background-color-hover: var(--color-primary-darken-2);
+  --theme-button-text-color-hover: var(--color-white);
+
+  /* button -  ghost */
+  --theme-button-ghost-background-color: transparent;
+  --theme-button-ghost-border-color: var(--color-primary-lighten-4);
+  --theme-button-ghost-text-color: var(--color-primary-darken-3);
+
+  /*  button - ghost:hover */
+  --theme-button-ghost-background-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-border-color-hover: var(--color-primary-lighten-3);
+  --theme-button-ghost-text-color-hover: var(--color-primary-darken-3);
+
+  /* Footer */
+  --theme-footer-text-color: var(--color-text);
+}