feat: implement barebone zola templates

_src/assets/icons/email.svg

@@ -0,0 +1,9 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="64px" height="64px" viewBox="-6 -6 36.00 36.00" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0">
+
<rect x="-6" y="-6" width="36.00" height="36.00" rx="18" fill="#c6a0f6" strokewidth="0"/>
+
</g>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="#111111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <rect x="3" y="5" width="18" height="14" rx="2" stroke="#111111" stroke-width="2" stroke-linecap="round"/> </g>
+
</svg>

_src/assets/icons/github.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <path d="M177.1,398.4c-8.6-1.5-17.6-1.3-26.4-0.8c-20,1.1-40,3-60,1.2c-9.5-0.9-19.1-1.8-28.7-1.6c-17.4,0.3-32,6-40.6,22.6 c-4.3,8.2-5.3,17-5,26.1c0.7,25.6,11.8,40.2,36.2,47.5c19.6,5.8,39.7,6.6,59.9,6.2c7.5,0,15,0.4,22.5-0.1 c15.5-0.9,30.7-3.2,45.4-8.6c15.2-5.6,24.3-16.3,27.6-31.8c1.3-6,1.9-12.3,1.8-18.4C209.6,420,195.6,401.5,177.1,398.4z M78.7,466.1c-6.5,7.1-15.9,7.2-22.6,0.3c-4.9-5-7.7-12.7-7.7-22.3c0.2-6.5,2.1-13.6,7.7-19.3c6.7-6.9,16.1-6.8,22.6,0.2 C88.5,435.6,88.5,455.5,78.7,466.1z M169.6,466.6c-6.1,6.3-14.9,6.5-21.4,0.7c-11.2-10.2-11.2-32.9,0-43.2 c6.4-5.9,15.2-5.7,21.4,0.6c5.7,5.8,7.6,13.1,7.9,20.9C177.2,453.5,175.2,460.7,169.6,466.6z"/> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M244.2,423.4 c-1.4,11.4-3.8,23.1-7.9,33.8c-12,30.7-36,47.6-67.8,52.7c-18.2,2.9-36.9,3-57.1,4.5c-18.1-1.6-38-1.8-57.3-5.2 c-37.4-6.6-62.8-32.8-70.2-70.3c-3.8-19.1-4.9-38.3,1-57.3c3.1-9.8,8.2-18.5,14.8-26.4c0.9-1,1.7-2.5,1.6-3.8 c-1.1-17.2,0.9-34.2,6-50.6c4.2-13.7,1.1-12.9,16.3-8.9c18.3,4.8,34.3,14.7,50,25c1.8,1.2,4.6,1.7,6.8,1.3 c22.2-3.4,44.3-3.6,66.5,0.3c1.6,0.3,3.7-0.3,5.2-1.2c13.5-8.8,27.4-16.7,42.6-22.2c5.5-2,11.3-3.3,16.9-5c2.5-0.7,3.6,0.2,4.5,2.6 c6.8,19,9.6,38.5,8.6,58.6c-0.1,1.1,0.5,2.6,1.2,3.5C243,374.6,247.3,398.2,244.2,423.4z"/> </g> </g>
+
</svg>

_src/assets/icons/hamburger.svg

@@ -0,0 +1,11 @@
+<svg width="40px" height="40px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="" stroke-width="0.00024000000000000003" transform="rotate(0)">
+  <g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(1.1999999999999993,1.1999999999999993), scale(0.9)">
+    <rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="2.88" fill="none" strokewidth="0"></rect>
+  </g>
+  <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384"></g>
+  <g id="SVGRepo_iconCarrier">
+    <path d="M2 5.5C2 4.94772 2.44772 4.5 3 4.5H21C21.5523 4.5 22 4.94772 22 5.5V6.5C22 7.05228 21.5523 7.5 21 7.5H3C2.44772 7.5 2 7.05228 2 6.5V5.5Z" fill="#cad3f5"></path>
+    <path d="M2 11.5C2 10.9477 2.44772 10.5 3 10.5H21C21.5523 10.5 22 10.9477 22 11.5V12.5C22 13.0523 21.5523 13.5 21 13.5H3C2.44772 13.5 2 13.0523 2 12.5V11.5Z" fill="#cad3f5"></path>
+    <path d="M3 16.5C2.44772 16.5 2 16.9477 2 17.5V18.5C2 19.0523 2.44772 19.5 3 19.5H21C21.5523 19.5 22 19.0523 22 18.5V17.5C22 16.9477 21.5523 16.5 21 16.5H3Z" fill="#cad3f5"></path>
+  </g>
+</svg>

_src/assets/icons/linkedin.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#c6a0f6" height="64px" width="64px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-143 145 512 512" xml:space="preserve" stroke="#c6a0f6">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M113,145c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S254.4,145,113,145z M41.4,508.1H-8.5V348.4h49.9 V508.1z M15.1,328.4h-0.4c-18.1,0-29.8-12.2-29.8-27.7c0-15.8,12.1-27.7,30.5-27.7c18.4,0,29.7,11.9,30.1,27.7 C45.6,316.1,33.9,328.4,15.1,328.4z M241,508.1h-56.6v-82.6c0-21.6-8.8-36.4-28.3-36.4c-14.9,0-23.2,10-27,19.6 c-1.4,3.4-1.2,8.2-1.2,13.1v86.3H71.8c0,0,0.7-146.4,0-159.7h56.1v25.1c3.3-11,21.2-26.6,49.8-26.6c35.5,0,63.3,23,63.3,72.4V508.1z "/> </g>
+
</svg>

_src/assets/style/_animations.scss

@@ -0,0 +1,60 @@
+@use './mixins';
+
+@include mixins.responsive using ($screen-size) {
+  .anim-#{$screen-size}-none {
+    animation: none !important;
+  }
+
+  .anim-group-#{$screen-size}-none > * {
+    animation: none !important;
+  }
+}
+
+@keyframes hover {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, var(--anim-translation-value));
+  }
+}
+
+$anim-base-offset: -1s;
+
+.anim-idle-hover {
+  --anim-translation-value: var(--prj-spacing-1);
+  --anim-offset: 0s;
+  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
+}
+
+.anim-idle-hover-group {
+  & > * {
+    @extend .anim-idle-hover;
+  }
+
+  @for $index from 1 through 20 {
+    $anim-offset: $anim-base-offset * $index;
+    & > :nth-child(#{$index}n) {
+      --anim-offset: #{$anim-offset};
+    }
+  }
+}
+
+.anim-hover-zoom {
+  transition: scale 0.2s;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.anim-hover-translate {
+  --anim-translation-value: -5px;
+  --anim-shadow-color: var(--prj-accent-bg);
+  transition: translate 0.2s;
+
+  &:hover {
+    translate: var(--anim-translation-value) var(--anim-translation-value);
+    box-shadow: calc(var(--anim-translation-value) * -1)
+      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
+  }
+}

_src/assets/style/_mixins.scss

@@ -0,0 +1,17 @@
+@use './variables' as *;
+
+@mixin responsive {
+  @each $size-name, $size in $screen-sizes {
+    @media screen and (min-width: $size) {
+      @content ($size-name);
+    }
+  }
+}
+
+@mixin responsive-steps($from, $to) {
+  @include responsive using ($size-name) {
+    @for $index from $from through $to {
+      @content ($size-name, $index);
+    }
+  }
+}

_src/assets/style/_utils.scss

@@ -0,0 +1,329 @@
+@use './variables' as *;
+@use './mixins';
+
+.position-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.position-sticky {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.visually-hidden {
+  height: 0;
+  width: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@include mixins.responsive using($screen-size) {
+  .d-#{$screen-size}-none {
+    display: none;
+  }
+  .d-#{$screen-size}-block {
+    display: block;
+  }
+
+  .d-#{$screen-size}-flex {
+    display: flex;
+  }
+}
+
+.flex-eq > * {
+  flex: 100%;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+.flex-row {
+  flex-direction: row !important;
+}
+
+@include mixins.responsive using($screen-size) {
+  .flex-#{$screen-size}-column {
+    flex-direction: column !important;
+  }
+  .flex-#{$screen-size}-row {
+    flex-direction: row !important;
+  }
+}
+
+.hstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+}
+
+.hstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.vstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  flex-direction: column;
+}
+
+.vstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@include mixins.responsive using($size-name) {
+  .flex-#{$size-name}-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-#{$size-name}-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.grid {
+  --prj-gap: var(--prj-spacing-3);
+  --prj-columns: repeat(3, 1fr);
+  --prj-min-col-width: 150px;
+  display: grid;
+  grid-template-columns: var(--prj-columns);
+  gap: var(--prj-gap);
+}
+
+@mixin grid-cols($amount) {
+  --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    @include grid-cols($i);
+  }
+}
+
+@include mixins.responsive-steps(1, 12) using ($size-name, $index) {
+  .grid-#{$size-name}-cols-#{$index} {
+    @include grid-cols($index);
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.align-start {
+  vertical-align: start;
+}
+
+.align-center {
+  vertical-align: middle;
+}
+
+.align-end {
+  vertical-align: end;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.w-auto {
+  width: auto;
+}
+.h-auto {
+  height: auto;
+}
+@for $i from 0 through 100 {
+  .w-#{$i} {
+    width: percentage(calc($i / 100));
+  }
+  .h-#{$i} {
+    height: percentage(calc($i / 100));
+  }
+}
+
+@include mixins.responsive-steps(0, 100) using ($size-name, $index) {
+  .w-#{$size-name}-#{$index} {
+    width: percentage(calc($index / 100));
+  }
+
+  .h-#{$size-name}-#{$index} {
+    height: percentage(calc($index / 100));
+  }
+}
+
+@mixin spacing-utils($name, $value, $screen-size: false) {
+  @if $screen-size {
+    $name: '#{$screen-size}-#{$name}';
+  }
+
+  .m-#{$name} {
+    margin: $value !important;
+  }
+  .mx-#{$name} {
+    margin-left: $value !important;
+    margin-right: $value !important;
+  }
+  .my-#{$name} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+  .mt-#{$name} {
+    margin-top: $value !important;
+  }
+  .mb-#{$name} {
+    margin-bottom: $value !important;
+  }
+  .ml-#{$name} {
+    margin-left: $value !important;
+  }
+  .mr-#{$name} {
+    margin-right: $value !important;
+  }
+  .p-#{$name} {
+    padding: $value !important;
+  }
+  .px-#{$name} {
+    padding-left: $value !important;
+    padding-right: $value !important;
+  }
+  .py-#{$name} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+  .pt-#{$name} {
+    padding-top: $value !important;
+  }
+  .pb-#{$name} {
+    padding-bottom: $value !important;
+  }
+  .pl-#{$name} {
+    padding-left: $value !important;
+  }
+  .pr-#{$name} {
+    padding-right: $value !important;
+  }
+
+  .gap-#{$name} {
+    --prj-gap: #{$value};
+  }
+}
+
+@include spacing-utils(auto, auto);
+@include mixins.responsive using($screen-size) {
+  @include spacing-utils(auto, auto);
+}
+
+@each $index, $variable, $value in $spacings {
+  @include spacing-utils($index, var(#{$variable}));
+  @include mixins.responsive using($screen-size) {
+    @include spacing-utils($index, var(#{$variable}), $screen-size);
+  }
+}
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.shadow-1 {
+  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radius);
+}
+
+.text-none {
+  text-transform: none;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}

_src/assets/style/_variables.scss

@@ -0,0 +1,71 @@
+@use 'sass:color';
+
+/* Using catppuccin for now, make a theme switcher later */
+@use './themes/catppuccin/catppuccin';
+
+@function getColor($color) {
+  $ctp-theme: map-get(catppuccin.$palette, 'macchiato');
+  @return map-get($ctp-theme, $color);
+}
+
+/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+$screen-sizes: (
+  'sm': 640px,
+  'md': 768px,
+  'lg': 1024px,
+  'xl': 1280px,
+  '2xl': 1536px,
+);
+
+$spacings: (
+  0 '--prj-spacing-0' 0,
+  1 '--prj-spacing-1' 0.25rem,
+  2 '--prj-spacing-2' 0.5rem,
+  3 '--prj-spacing-3' 1rem,
+  4 '--prj-spacing-4' 2rem,
+  5 '--prj-spacing-5' 3rem
+);
+
+$border-radius: 0.5rem;
+
+// Native CSS Variables to allow overridings and usage in external stylesheets
+:root {
+  /* Variables prefixed with prj to avoid collisions */
+
+  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+  --prj-bg: #{getColor('mantle')};
+  --prj-bg-transparent: #{color.scale(getColor('mantle'), $alpha: -10%)};
+  --prj-shadow: #{getColor('crust')};
+  --prj-text: #{getColor('text')};
+
+  --prj-surface-1: #{getColor('base')};
+  --prj-surface-2: #{darken(getColor('surface0'), 2%)};
+  --prj-surface-3: #{getColor('surface1')};
+  --prj-surface-text: #{getColor('text')};
+
+  --prj-link-text: #{getColor('teal')};
+
+  --prj-accent-bg: #{getColor('teal')};
+  --prj-accent-text: #{getColor('base')};
+
+  --prj-primary: #{getColor('teal')};
+  --prj-primary-text: #{getColor('base')};
+
+  --prj-secondary: #{getColor('mauve')};
+  --prj-secondary-text: #{getColor('base')};
+
+  --prj-danger: #{getColor('red')};
+  --prj-danger-text: #{getColor('base')};
+
+  --prj-disabled: #{getColor('red')};
+  --prj-disabled-text: rgba(#{getColor('raw')}, 0.5);
+
+  --prj-input: #{getColor('text')};
+  --prj-input-text: #{getColor('base')};
+
+  @each $index, $variable, $value in $spacings {
+    #{$variable}: #{$value};
+  }
+
+  --prj-border-radius: #{$border-radius};
+}

_src/assets/style/style.scss

@@ -0,0 +1,176 @@
+@use './variables.scss' as *;
+@use './utils.scss';
+@use './animations.scss';
+
+// SASS variables are imported without namespace, but try to always use native
+// CSS variables when possible so they can be overrwritten by custom styles
+
+html {
+  background-color: var(--prj-bg);
+  color: var(--prj-text);
+
+  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
+  font-size: calc(15px + 0.390625vw);
+}
+
+body > main {
+  max-width: 95vw; /* leave some space in the end by default */
+  margin: auto;
+  padding: 15px 0;
+}
+
+section:not(.clean) {
+  /* outline: 1px solid var(--prj-accent-bg); */
+  padding: var(--prj-spacing-3);
+  background-color: var(--prj-surface-1);
+  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+  border-radius: var(--prj-border-radius);
+}
+
+section:not(:first-of-type) {
+  margin-top: var(--prj-spacing-4);
+}
+
+h1,
+.fs-1 {
+  font-size: 3rem !important;
+  margin-top: 0;
+  margin-bottom: var(--prj-spacing-3);
+}
+h2,
+.fs-2 {
+  font-size: 2.5rem !important;
+  margin-bottom: var(--prj-spacing-3);
+}
+h3,
+.fs-3 {
+  font-size: 2rem !important;
+  margin-bottom: var(--prj-spacing-2);
+}
+h4,
+.fs-4 {
+  font-size: 1.5rem !important;
+  margin-bottom: var(--prj-spacing-2);
+}
+h5,
+.fs-5 {
+  font-size: 1.25rem !important;
+  margin-bottom: var(--prj-spacing-1);
+}
+h6,
+.fs-6 {
+  font-size: 1rem !important;
+  margin-bottom: var(--prj-spacing-1);
+}
+
+p {
+  margin-bottom: var(--prj-spacing-2);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+.container {
+  max-width: 100%;
+}
+
+/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+@each $name, $size in $screen-sizes {
+  @media screen and (min-width: $size) {
+    body > main {
+      max-width: $size;
+    }
+
+    .container {
+      margin: auto;
+      max-width: $size;
+    }
+  }
+}
+
+a {
+  color: var(--prj-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+
+  ul {
+    margin-left: var(--prj-spacing-3);
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-width,
+video.respect-width {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-height,
+video.respect-height {
+  max-height: 100%;
+  width: auto;
+}
+
+li:not(:last-child) {
+  margin-bottom: var(--prj-spacing-1);
+}
+
+.btn {
+  padding: var(--prj-spacing-1);
+}
+
+.btn-primary {
+  background-color: var(--prj--primary-bg);
+  color: var(--prj--primary-text);
+}
+
+/* Lightgallery iframe fix */
+.lg-has-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  .lg-object {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+
+.bg-image {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+    var(--bg-image);
+  background-position: center;
+  background-size: cover;
+  color: var(--prj-text);
+
+  padding: var(--prj-spacing-3);
+
+  .text {
+    padding: var(--prj-spacing-2);
+    background-color: var(--prj-bg-transparent);
+
+    border-radius: var(--prj-border-radius);
+  }
+}
+
+a {
+  transition: text-shadow 0.2s;
+  --anim-shadow-color: var(--prj-accent-bg);
+
+  &:not(.clean):hover {
+    text-shadow: 1px 1px 8px var(--anim-shadow-color);
+  }
+}

_src/assets/style/themes/catppuccin/_catppuccin.scss

@@ -0,0 +1,114 @@
+$palette: (
+  'latte': (
+    'rosewater': #dc8a78,
+    'flamingo': #dd7878,
+    'pink': #ea76cb,
+    'mauve': #8839ef,
+    'red': #d20f39,
+    'maroon': #e64553,
+    'peach': #fe640b,
+    'yellow': #df8e1d,
+    'green': #40a02b,
+    'teal': #179299,
+    'sky': #04a5e5,
+    'sapphire': #209fb5,
+    'blue': #1e66f5,
+    'lavender': #7287fd,
+    'text': #4c4f69,
+    'subtext1': #5c5f77,
+    'subtext0': #6c6f85,
+    'overlay2': #7c7f93,
+    'overlay1': #8c8fa1,
+    'overlay0': #9ca0b0,
+    'surface2': #acb0be,
+    'surface1': #bcc0cc,
+    'surface0': #ccd0da,
+    'base': #eff1f5,
+    'mantle': #e6e9ef,
+    'crust': #dce0e8,
+  ),
+  'frappe': (
+    'rosewater': #f2d5cf,
+    'flamingo': #eebebe,
+    'pink': #f4b8e4,
+    'mauve': #ca9ee6,
+    'red': #e78284,
+    'maroon': #ea999c,
+    'peach': #ef9f76,
+    'yellow': #e5c890,
+    'green': #a6d189,
+    'teal': #81c8be,
+    'sky': #99d1db,
+    'sapphire': #85c1dc,
+    'blue': #8caaee,
+    'lavender': #babbf1,
+    'text': #c6d0f5,
+    'subtext1': #b5bfe2,
+    'subtext0': #a5adce,
+    'overlay2': #949cbb,
+    'overlay1': #838ba7,
+    'overlay0': #737994,
+    'surface2': #626880,
+    'surface1': #51576d,
+    'surface0': #414559,
+    'base': #303446,
+    'mantle': #292c3c,
+    'crust': #232634,
+  ),
+  'macchiato': (
+    'rosewater': #f4dbd6,
+    'flamingo': #f0c6c6,
+    'pink': #f5bde6,
+    'mauve': #c6a0f6,
+    'red': #ed8796,
+    'maroon': #ee99a0,
+    'peach': #f5a97f,
+    'yellow': #eed49f,
+    'green': #a6da95,
+    'teal': #8bd5ca,
+    'sky': #91d7e3,
+    'sapphire': #7dc4e4,
+    'blue': #8aadf4,
+    'lavender': #b7bdf8,
+    'text': #cad3f5,
+    'subtext1': #b8c0e0,
+    'subtext0': #a5adcb,
+    'overlay2': #939ab7,
+    'overlay1': #8087a2,
+    'overlay0': #6e738d,
+    'surface2': #5b6078,
+    'surface1': #494d64,
+    'surface0': #363a4f,
+    'base': #24273a,
+    'mantle': #1e2030,
+    'crust': #181926,
+  ),
+  'mocha': (
+    'rosewater': #f5e0dc,
+    'flamingo': #f2cdcd,
+    'pink': #f5c2e7,
+    'mauve': #cba6f7,
+    'red': #f38ba8,
+    'maroon': #eba0ac,
+    'peach': #fab387,
+    'yellow': #f9e2af,
+    'green': #a6e3a1,
+    'teal': #94e2d5,
+    'sky': #89dceb,
+    'sapphire': #74c7ec,
+    'blue': #89b4fa,
+    'lavender': #b4befe,
+    'text': #cdd6f4,
+    'subtext1': #bac2de,
+    'subtext0': #a6adc8,
+    'overlay2': #9399b2,
+    'overlay1': #7f849c,
+    'overlay0': #6c7086,
+    'surface2': #585b70,
+    'surface1': #45475a,
+    'surface0': #313244,
+    'base': #1e1e2e,
+    'mantle': #181825,
+    'crust': #11111b,
+  ),
+);

_src/assets/style/themes/catppuccin/_frappe.scss

@@ -0,0 +1,26 @@
+$rosewater: #f2d5cf;
+$flamingo: #eebebe;
+$pink: #f4b8e4;
+$mauve: #ca9ee6;
+$red: #e78284;
+$maroon: #ea999c;
+$peach: #ef9f76;
+$yellow: #e5c890;
+$green: #a6d189;
+$teal: #81c8be;
+$sky: #99d1db;
+$sapphire: #85c1dc;
+$blue: #8caaee;
+$lavender: #babbf1;
+$text: #c6d0f5;
+$subtext1: #b5bfe2;
+$subtext0: #a5adce;
+$overlay2: #949cbb;
+$overlay1: #838ba7;
+$overlay0: #737994;
+$surface2: #626880;
+$surface1: #51576d;
+$surface0: #414559;
+$base: #303446;
+$mantle: #292c3c;
+$crust: #232634;

_src/assets/style/themes/catppuccin/_latte.scss

@@ -0,0 +1,26 @@
+$rosewater: #dc8a78;
+$flamingo: #dd7878;
+$pink: #ea76cb;
+$mauve: #8839ef;
+$red: #d20f39;
+$maroon: #e64553;
+$peach: #fe640b;
+$yellow: #df8e1d;
+$green: #40a02b;
+$teal: #179299;
+$sky: #04a5e5;
+$sapphire: #209fb5;
+$blue: #1e66f5;
+$lavender: #7287fd;
+$text: #4c4f69;
+$subtext1: #5c5f77;
+$subtext0: #6c6f85;
+$overlay2: #7c7f93;
+$overlay1: #8c8fa1;
+$overlay0: #9ca0b0;
+$surface2: #acb0be;
+$surface1: #bcc0cc;
+$surface0: #ccd0da;
+$base: #eff1f5;
+$mantle: #e6e9ef;
+$crust: #dce0e8;

_src/assets/style/themes/catppuccin/_macchiato.scss

@@ -0,0 +1,26 @@
+$rosewater: #f4dbd6;
+$flamingo: #f0c6c6;
+$pink: #f5bde6;
+$mauve: #c6a0f6;
+$red: #ed8796;
+$maroon: #ee99a0;
+$peach: #f5a97f;
+$yellow: #eed49f;
+$green: #a6da95;
+$teal: #8bd5ca;
+$sky: #91d7e3;
+$sapphire: #7dc4e4;
+$blue: #8aadf4;
+$lavender: #b7bdf8;
+$text: #cad3f5;
+$subtext1: #b8c0e0;
+$subtext0: #a5adcb;
+$overlay2: #939ab7;
+$overlay1: #8087a2;
+$overlay0: #6e738d;
+$surface2: #5b6078;
+$surface1: #494d64;
+$surface0: #363a4f;
+$base: #24273a;
+$mantle: #1e2030;
+$crust: #181926;

_src/assets/style/themes/catppuccin/_mocha.scss

@@ -0,0 +1,26 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;