From 3d645d2c00e339652eb91b60d3c38f7c44b44c0d Mon Sep 17 00:00:00 2001
From: Victor Klomp <victor.klomp@gmail.com>
Date: Tue, 12 Dec 2023 17:57:25 +0100
Subject: [PATCH 01/11] Added theme basic and remove severity="danger"

---
 .../AddContainerDialogComponent.vue           |   4 +-
 src/components/ChangeApiKeyComponent.vue      |   2 +-
 src/components/ChangeInfoComponent.vue        |   1 -
 src/components/ChangePasswordComponent.vue    |   1 -
 src/components/ChangePinComponent.vue         |   2 +-
 src/components/ProductCreateComponent.vue     |   2 +-
 src/components/TermsOfServiceModal.vue        |   2 +-
 src/components/TopupModalComponent.vue        |   2 +-
 src/main.ts                                   |   2 +-
 src/styles/primevue-base/_colors.scss         |  18 +
 src/styles/primevue-base/_common.scss         |  75 ++
 src/styles/primevue-base/_components.scss     | 103 ++
 src/styles/primevue-base/_mixins.scss         | 250 +++++
 .../components/button/_button.scss            | 564 +++++++++++
 .../components/button/_speeddial.scss         |  97 ++
 .../components/button/_splitbutton.scss       | 390 ++++++++
 .../components/data/_carousel.scss            |  37 +
 .../components/data/_datatable.scss           | 342 +++++++
 .../components/data/_dataview.scss            |  47 +
 .../components/data/_filter.scss              | 138 +++
 .../components/data/_orderlist.scss           |  70 ++
 .../components/data/_organizationchart.scss   |  50 +
 .../components/data/_paginator.scss           |  92 ++
 .../components/data/_picklist.scss            |  70 ++
 .../components/data/_timeline.scss            |  38 +
 .../primevue-base/components/data/_tree.scss  |  90 ++
 .../components/data/_treetable.scss           | 251 +++++
 .../components/file/_fileupload.scss          |  82 ++
 .../components/input/_autocomplete.scss       | 114 +++
 .../components/input/_calendar.scss           | 251 +++++
 .../components/input/_cascadeselect.scss      | 106 +++
 .../components/input/_checkbox.scss           |  86 ++
 .../components/input/_chips.scss              |  53 ++
 .../components/input/_colorpicker.scss        |  18 +
 .../components/input/_dropdown.scss           | 147 +++
 .../components/input/_editor.scss             | 122 +++
 .../components/input/_inputgroup.scss         |  74 ++
 .../components/input/_inputnumber.scss        |   5 +
 .../components/input/_inputswitch.scss        |  62 ++
 .../components/input/_inputtext.scss          | 100 ++
 .../components/input/_listbox.scss            |  89 ++
 .../components/input/_multiselect.scss        | 166 ++++
 .../components/input/_password.scss           |  33 +
 .../components/input/_radiobutton.scss        |  78 ++
 .../components/input/_rating.scss             |  60 ++
 .../components/input/_selectbutton.scss       |  50 +
 .../components/input/_slider.scss             |  49 +
 .../components/input/_togglebutton.scss       |  52 +
 .../components/input/_treeselect.scss         |  91 ++
 .../components/menu/_breadcrumb.scss          |  42 +
 .../components/menu/_contextmenu.scss         |  39 +
 .../primevue-base/components/menu/_dock.scss  |  95 ++
 .../components/menu/_megamenu.scss            |  55 ++
 .../primevue-base/components/menu/_menu.scss  |  33 +
 .../components/menu/_menubar.scss             | 141 +++
 .../components/menu/_panelmenu.scss           | 153 +++
 .../primevue-base/components/menu/_steps.scss |  56 ++
 .../components/menu/_tabmenu.scss             |  49 +
 .../components/menu/_tieredmenu.scss          |  43 +
 .../components/messages/_inlinemessage.scss   |  64 ++
 .../components/messages/_message.scss         | 100 ++
 .../components/messages/_toast.scss           | 100 ++
 .../components/misc/_avatar.scss              |  30 +
 .../primevue-base/components/misc/_badge.scss |  48 +
 .../components/misc/_blockui.scss             |   0
 .../primevue-base/components/misc/_chip.scss  |  39 +
 .../components/misc/_inplace.scss             |  17 +
 .../components/misc/_progressbar.scss         |  17 +
 .../components/misc/_progressspinner.scss     |  49 +
 .../components/misc/_scrolltop.scss           |  25 +
 .../components/misc/_skeleton.scss            |   8 +
 .../primevue-base/components/misc/_tag.scss   |  40 +
 .../components/misc/_terminal.scss            |  12 +
 .../components/multimedia/_galleria.scss      | 151 +++
 .../components/multimedia/_image.scss         |  54 ++
 .../components/overlay/_confirmpopup.scss     |  72 ++
 .../components/overlay/_dialog.scss           |  64 ++
 .../components/overlay/_overlaypanel.scss     |  64 ++
 .../components/overlay/_sidebar.scss          |  23 +
 .../components/overlay/_tooltip.scss          |  33 +
 .../components/panel/_accordion.scss          | 118 +++
 .../primevue-base/components/panel/_card.scss |  30 +
 .../components/panel/_divider.scss            |  31 +
 .../components/panel/_fieldset.scss           |  51 +
 .../components/panel/_panel.scss              |  47 +
 .../components/panel/_scrollpanel.scss        |  11 +
 .../components/panel/_splitter.scss           |  24 +
 .../components/panel/_tabview.scss            |  66 ++
 .../components/panel/_toolbar.scss            |  11 +
 src/styles/themes/_extensions.scss            |   1 +
 src/styles/themes/_fonts.scss                 |   3 +
 src/styles/themes/_variables.scss             |  10 +
 src/styles/themes/_vendor_extensions.scss     |  16 +
 .../themes/sudosos-dark/_variables_dark.scss  | 889 ++++++++++++++++++
 src/styles/themes/sudosos-dark/theme.scss     |   6 +
 .../sudosos-light/_variables_light.scss       | 889 ++++++++++++++++++
 src/styles/themes/sudosos-light/theme.scss    |   6 +
 src/views/LoginView.vue                       |   2 +-
 src/views/PasswordResetView.vue               |   4 +-
 src/views/PointOfSale/POSInfoView.vue         |   1 -
 src/views/ProductsContainersView.vue          |   2 +-
 src/views/SingleUserView.vue                  |   2 +-
 src/views/TermsOfServiceView.vue              |   1 -
 src/views/UserOverView.vue                    |   7 +-
 104 files changed, 8551 insertions(+), 21 deletions(-)
 create mode 100644 src/styles/primevue-base/_colors.scss
 create mode 100644 src/styles/primevue-base/_common.scss
 create mode 100644 src/styles/primevue-base/_components.scss
 create mode 100644 src/styles/primevue-base/_mixins.scss
 create mode 100644 src/styles/primevue-base/components/button/_button.scss
 create mode 100644 src/styles/primevue-base/components/button/_speeddial.scss
 create mode 100644 src/styles/primevue-base/components/button/_splitbutton.scss
 create mode 100644 src/styles/primevue-base/components/data/_carousel.scss
 create mode 100644 src/styles/primevue-base/components/data/_datatable.scss
 create mode 100644 src/styles/primevue-base/components/data/_dataview.scss
 create mode 100644 src/styles/primevue-base/components/data/_filter.scss
 create mode 100644 src/styles/primevue-base/components/data/_orderlist.scss
 create mode 100644 src/styles/primevue-base/components/data/_organizationchart.scss
 create mode 100644 src/styles/primevue-base/components/data/_paginator.scss
 create mode 100644 src/styles/primevue-base/components/data/_picklist.scss
 create mode 100644 src/styles/primevue-base/components/data/_timeline.scss
 create mode 100644 src/styles/primevue-base/components/data/_tree.scss
 create mode 100644 src/styles/primevue-base/components/data/_treetable.scss
 create mode 100644 src/styles/primevue-base/components/file/_fileupload.scss
 create mode 100644 src/styles/primevue-base/components/input/_autocomplete.scss
 create mode 100644 src/styles/primevue-base/components/input/_calendar.scss
 create mode 100644 src/styles/primevue-base/components/input/_cascadeselect.scss
 create mode 100644 src/styles/primevue-base/components/input/_checkbox.scss
 create mode 100644 src/styles/primevue-base/components/input/_chips.scss
 create mode 100644 src/styles/primevue-base/components/input/_colorpicker.scss
 create mode 100644 src/styles/primevue-base/components/input/_dropdown.scss
 create mode 100644 src/styles/primevue-base/components/input/_editor.scss
 create mode 100644 src/styles/primevue-base/components/input/_inputgroup.scss
 create mode 100644 src/styles/primevue-base/components/input/_inputnumber.scss
 create mode 100644 src/styles/primevue-base/components/input/_inputswitch.scss
 create mode 100644 src/styles/primevue-base/components/input/_inputtext.scss
 create mode 100644 src/styles/primevue-base/components/input/_listbox.scss
 create mode 100644 src/styles/primevue-base/components/input/_multiselect.scss
 create mode 100644 src/styles/primevue-base/components/input/_password.scss
 create mode 100644 src/styles/primevue-base/components/input/_radiobutton.scss
 create mode 100644 src/styles/primevue-base/components/input/_rating.scss
 create mode 100644 src/styles/primevue-base/components/input/_selectbutton.scss
 create mode 100644 src/styles/primevue-base/components/input/_slider.scss
 create mode 100644 src/styles/primevue-base/components/input/_togglebutton.scss
 create mode 100644 src/styles/primevue-base/components/input/_treeselect.scss
 create mode 100644 src/styles/primevue-base/components/menu/_breadcrumb.scss
 create mode 100644 src/styles/primevue-base/components/menu/_contextmenu.scss
 create mode 100644 src/styles/primevue-base/components/menu/_dock.scss
 create mode 100644 src/styles/primevue-base/components/menu/_megamenu.scss
 create mode 100644 src/styles/primevue-base/components/menu/_menu.scss
 create mode 100644 src/styles/primevue-base/components/menu/_menubar.scss
 create mode 100644 src/styles/primevue-base/components/menu/_panelmenu.scss
 create mode 100644 src/styles/primevue-base/components/menu/_steps.scss
 create mode 100644 src/styles/primevue-base/components/menu/_tabmenu.scss
 create mode 100644 src/styles/primevue-base/components/menu/_tieredmenu.scss
 create mode 100644 src/styles/primevue-base/components/messages/_inlinemessage.scss
 create mode 100644 src/styles/primevue-base/components/messages/_message.scss
 create mode 100644 src/styles/primevue-base/components/messages/_toast.scss
 create mode 100644 src/styles/primevue-base/components/misc/_avatar.scss
 create mode 100644 src/styles/primevue-base/components/misc/_badge.scss
 create mode 100644 src/styles/primevue-base/components/misc/_blockui.scss
 create mode 100644 src/styles/primevue-base/components/misc/_chip.scss
 create mode 100644 src/styles/primevue-base/components/misc/_inplace.scss
 create mode 100644 src/styles/primevue-base/components/misc/_progressbar.scss
 create mode 100644 src/styles/primevue-base/components/misc/_progressspinner.scss
 create mode 100644 src/styles/primevue-base/components/misc/_scrolltop.scss
 create mode 100644 src/styles/primevue-base/components/misc/_skeleton.scss
 create mode 100644 src/styles/primevue-base/components/misc/_tag.scss
 create mode 100644 src/styles/primevue-base/components/misc/_terminal.scss
 create mode 100644 src/styles/primevue-base/components/multimedia/_galleria.scss
 create mode 100644 src/styles/primevue-base/components/multimedia/_image.scss
 create mode 100644 src/styles/primevue-base/components/overlay/_confirmpopup.scss
 create mode 100644 src/styles/primevue-base/components/overlay/_dialog.scss
 create mode 100644 src/styles/primevue-base/components/overlay/_overlaypanel.scss
 create mode 100644 src/styles/primevue-base/components/overlay/_sidebar.scss
 create mode 100644 src/styles/primevue-base/components/overlay/_tooltip.scss
 create mode 100644 src/styles/primevue-base/components/panel/_accordion.scss
 create mode 100644 src/styles/primevue-base/components/panel/_card.scss
 create mode 100644 src/styles/primevue-base/components/panel/_divider.scss
 create mode 100644 src/styles/primevue-base/components/panel/_fieldset.scss
 create mode 100644 src/styles/primevue-base/components/panel/_panel.scss
 create mode 100644 src/styles/primevue-base/components/panel/_scrollpanel.scss
 create mode 100644 src/styles/primevue-base/components/panel/_splitter.scss
 create mode 100644 src/styles/primevue-base/components/panel/_tabview.scss
 create mode 100644 src/styles/primevue-base/components/panel/_toolbar.scss
 create mode 100644 src/styles/themes/_extensions.scss
 create mode 100644 src/styles/themes/_fonts.scss
 create mode 100644 src/styles/themes/_variables.scss
 create mode 100644 src/styles/themes/_vendor_extensions.scss
 create mode 100644 src/styles/themes/sudosos-dark/_variables_dark.scss
 create mode 100644 src/styles/themes/sudosos-dark/theme.scss
 create mode 100644 src/styles/themes/sudosos-light/_variables_light.scss
 create mode 100644 src/styles/themes/sudosos-light/theme.scss

diff --git a/src/components/AddContainerDialogComponent.vue b/src/components/AddContainerDialogComponent.vue
index 6f7e8075..00f06ef3 100644
--- a/src/components/AddContainerDialogComponent.vue
+++ b/src/components/AddContainerDialogComponent.vue
@@ -48,8 +48,8 @@
           <span class="error-text">{{ errors.isPublic }}</span>
         </div>
         <div class="row" id="actions">
-          <Button severity="danger" outlined @click="closeDialog">{{ $t("c_containerEditModal.cancel") }}</Button>
-          <Button severity="danger" type="submit">{{ $t("c_containerEditModal.save") }}</Button>
+          <Button outlined @click="closeDialog">{{ $t("c_containerEditModal.cancel") }}</Button>
+          <Button type="submit">{{ $t("c_containerEditModal.save") }}</Button>
         </div>
       </form>
     </div>
diff --git a/src/components/ChangeApiKeyComponent.vue b/src/components/ChangeApiKeyComponent.vue
index 0de72ea4..1babecaa 100644
--- a/src/components/ChangeApiKeyComponent.vue
+++ b/src/components/ChangeApiKeyComponent.vue
@@ -5,7 +5,7 @@
       <p>{{apiKeyMessage || '&nbsp;'}}</p>
     </div>
     <div style="margin-top: 1rem">
-      <Button severity="danger" :label="t('profile.keyGetNew')" @click="updateApiKey" />
+      <Button :label="t('profile.keyGetNew')" @click="updateApiKey" />
     </div>
   </CardComponent>
 </template>
diff --git a/src/components/ChangeInfoComponent.vue b/src/components/ChangeInfoComponent.vue
index 2b199849..ef5bcae4 100644
--- a/src/components/ChangeInfoComponent.vue
+++ b/src/components/ChangeInfoComponent.vue
@@ -19,7 +19,6 @@
       </div>
       <div style="margin-top: 1rem">
         <Button
-          severity="danger"
           :disabled="!isLocal"
           :label="$t('profile.updateInfo')"
           type="submit"
diff --git a/src/components/ChangePasswordComponent.vue b/src/components/ChangePasswordComponent.vue
index 3bd5f25c..f7609008 100644
--- a/src/components/ChangePasswordComponent.vue
+++ b/src/components/ChangePasswordComponent.vue
@@ -13,7 +13,6 @@
       </div>
       <div style="margin-top: 1rem">
         <Button
-          severity="danger"
           :disabled="!isLocal"
           :label="t('profile.passwordUpdate')"
           type="submit"
diff --git a/src/components/ChangePinComponent.vue b/src/components/ChangePinComponent.vue
index b77b9e2f..63f060fc 100644
--- a/src/components/ChangePinComponent.vue
+++ b/src/components/ChangePinComponent.vue
@@ -12,7 +12,7 @@
         <small class="warning">{{errors.pinConfirm || '&nbsp;'}}</small>
       </div>
       <div style="margin-top: 1rem">
-        <Button severity="danger" type="submit" :label="t('profile.pinChange')" />
+        <Button type="submit" :label="t('profile.pinChange')" />
       </div>
     </form>
   </CardComponent>
diff --git a/src/components/ProductCreateComponent.vue b/src/components/ProductCreateComponent.vue
index 8c5edd4e..ec119d08 100644
--- a/src/components/ProductCreateComponent.vue
+++ b/src/components/ProductCreateComponent.vue
@@ -52,7 +52,7 @@
           <span class="error-text">{{ errors.owner }}</span>
         </div>
         <div class="button-row">
-          <Button type="submit" severity="danger" class="save-button">{{ $t('c_productEditModal.save') }}</Button>
+          <Button type="submit" class="save-button">{{ $t('c_productEditModal.save') }}</Button>
         </div>
       </form>
     </div>
diff --git a/src/components/TermsOfServiceModal.vue b/src/components/TermsOfServiceModal.vue
index ea101f59..24d84856 100644
--- a/src/components/TermsOfServiceModal.vue
+++ b/src/components/TermsOfServiceModal.vue
@@ -15,7 +15,7 @@
             <div v-html="tos"></div>
         </div>
         <template #footer>
-            <Button label="Ok" severity="danger" @click="visible = false" autofocus />
+            <Button label="Ok" @click="visible = false" autofocus />
         </template>
     </Dialog>
 </template>
diff --git a/src/components/TopupModalComponent.vue b/src/components/TopupModalComponent.vue
index 3201bc22..5c3761ec 100644
--- a/src/components/TopupModalComponent.vue
+++ b/src/components/TopupModalComponent.vue
@@ -9,7 +9,7 @@
 
     <template #footer>
       <Button label="cancel" severity="secondary" outlined />
-      <Button label="pay" severity="danger" />
+      <Button label="pay" />
     </template>
   </Dialog>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 843d0fbd..a0dc2716 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,7 +10,7 @@ import App from './App.vue';
 import router from './router';
 import PrimeVue from 'primevue/config';
 import Button from "primevue/button";
-import "primevue/resources/themes/bootstrap4-light-blue/theme.css";
+import "./styles/themes/sudosos-light/theme.scss";
 import InputText from "primevue/inputtext";
 import Menubar from "primevue/menubar";
 import Panel from "primevue/panel";
diff --git a/src/styles/primevue-base/_colors.scss b/src/styles/primevue-base/_colors.scss
new file mode 100644
index 00000000..de705905
--- /dev/null
+++ b/src/styles/primevue-base/_colors.scss
@@ -0,0 +1,18 @@
+:root {
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+                }
+                @else {
+                    --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+                }
+            }
+            
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/_common.scss b/src/styles/primevue-base/_common.scss
new file mode 100644
index 00000000..7723961d
--- /dev/null
+++ b/src/styles/primevue-base/_common.scss
@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+    
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/_components.scss b/src/styles/primevue-base/_components.scss
new file mode 100644
index 00000000..cc76ab94
--- /dev/null
+++ b/src/styles/primevue-base/_components.scss
@@ -0,0 +1,103 @@
+@import '_mixins';
+@import '_colors';
+
+@import './components/input/_editor';
+
+@layer primevue {
+    @import '_common';
+
+    //Input
+    @import './components/input/_autocomplete';
+    @import './components/input/_calendar';
+    @import './components/input/_cascadeselect';
+    @import './components/input/_checkbox';
+    @import './components/input/_chips';
+    @import './components/input/_colorpicker';
+    @import './components/input/_dropdown';
+    @import './components/input/_inputgroup';
+    @import './components/input/_inputnumber';
+    @import './components/input/_inputswitch';
+    @import './components/input/_inputtext';
+    @import './components/input/_listbox';
+    @import './components/input/_multiselect';
+    @import './components/input/_password';
+    @import './components/input/_radiobutton';
+    @import './components/input/_rating';
+    @import './components/input/_selectbutton';
+    @import './components/input/_slider';
+    @import './components/input/_treeselect';
+    @import './components/input/_togglebutton';
+
+    //Button
+    @import './components/button/_button';
+    @import './components/button/_speeddial';
+    @import './components/button/_splitbutton';
+
+    //Data
+    @import './components/data/_carousel';
+    @import './components/data/_datatable';
+    @import './components/data/_dataview';
+    @import './components/data/_filter';
+    @import './components/data/_orderlist';
+    @import './components/data/_organizationchart';
+    @import './components/data/_paginator';
+    @import './components/data/_picklist';
+    @import './components/data/_timeline';
+    @import './components/data/_tree';
+    @import './components/data/_treetable';
+
+    //Panel
+    @import './components/panel/_accordion';
+    @import './components/panel/_card';
+    @import './components/panel/_fieldset';
+    @import './components/panel/_divider';
+    @import './components/panel/_panel';
+    @import './components/panel/_scrollpanel';
+    @import './components/panel/_splitter';
+    @import './components/panel/_tabview';
+    @import './components/panel/_toolbar';
+
+    //Overlay
+    @import './components/overlay/_confirmpopup';
+    @import './components/overlay/_dialog';
+    @import './components/overlay/_overlaypanel';
+    @import './components/overlay/_sidebar';
+    @import './components/overlay/_tooltip';
+
+    //File
+    @import './components/file/_fileupload';
+
+    //Menu
+    @import './components/menu/_breadcrumb';
+    @import './components/menu/_contextmenu';
+    @import './components/menu/_dock';
+    @import './components/menu/_megamenu';
+    @import './components/menu/_menu';
+    @import './components/menu/_menubar';
+    @import './components/menu/_panelmenu';
+    @import './components/menu/_steps';
+    @import './components/menu/_tabmenu';
+    @import './components/menu/_tieredmenu';
+
+    //Messages
+    @import './components/messages/_inlinemessage';
+    @import './components/messages/_message';
+    @import 'components/messages/toast';
+
+    //MultiMedia
+    @import './components/multimedia/_galleria';
+    @import './components/multimedia/_image';
+
+    //Misc
+    @import './components/misc/_avatar';
+    @import './components/misc/_badge';
+    @import './components/misc/_blockui';
+    @import './components/misc/_chip';
+    @import './components/misc/_inplace';
+    @import './components/misc/_progressbar';
+    @import './components/misc/_progressspinner';
+    @import './components/misc/_scrolltop';
+    @import './components/misc/_skeleton';
+    @import './components/misc/_tag';
+    @import './components/misc/_terminal';
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/_mixins.scss b/src/styles/primevue-base/_mixins.scss
new file mode 100644
index 00000000..d09daa87
--- /dev/null
+++ b/src/styles/primevue-base/_mixins.scss
@@ -0,0 +1,250 @@
+@mixin icon-override($icon) {
+	&:before {
+		content: $icon;
+	}
+}
+
+@mixin focused() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+	@include focused();
+	border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+	outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+	border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+        
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+            
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+                
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+    
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+        
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+            
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+    
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+    
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin placeholder {
+	::-webkit-input-placeholder {
+		@content
+	}
+	:-moz-placeholder {
+		@content
+	}
+	::-moz-placeholder {
+		@content
+	}
+	:-ms-input-placeholder {
+		@content
+	}
+}
+
+@mixin scaledPadding($val, $scale) {
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+    font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+    .p-submenu-list {
+        .p-menuitem {
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    padding-left: $val * ($index + 1);
+                }
+    
+            }
+            @if $index < $length {
+                @include nested-submenu-indents($val, $index + 2, $length);
+            }
+        }
+    }
+}
+
+@mixin action-icon($enabled: true) {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    @if $enabled {
+        &:enabled:hover {
+            @include action-icon-hover();
+        }
+    } @else {
+        &:hover {
+            @include action-icon-hover();
+        }
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+@mixin action-icon-hover() {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+}
+
+@mixin button-states {
+    // <button> and <a> tags support :enabled selector.
+
+    &:enabled,
+    &:not(button):not(a):not(.p-disabled) {
+        @content;
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/button/_button.scss b/src/styles/primevue-base/components/button/_button.scss
new file mode 100644
index 00000000..d518ba04
--- /dev/null
+++ b/src/styles/primevue-base/components/button/_button.scss
@@ -0,0 +1,564 @@
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:enabled:hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:enabled:active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            &:enabled:hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:enabled:active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &:enabled:active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            &:enabled:hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:enabled:active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &:focus {
+        @include focused();
+    }
+
+    .p-button-label {
+        transition-duration: $transitionDuration;
+    }
+
+    .p-button-icon-left {
+         margin-right: $inlineSpacing;
+    }
+
+    .p-button-icon-right {
+        margin-left: $inlineSpacing;
+    }
+
+    .p-button-icon-bottom {
+        margin-top: $inlineSpacing;
+    }
+
+    .p-button-icon-top {
+       margin-bottom: $inlineSpacing;
+    }
+
+    .p-badge {
+        margin-left: $inlineSpacing;
+        min-width: $fontSize;
+        height: $fontSize;
+        line-height: $fontSize;
+        color: $buttonBg;
+        background-color: $buttonTextColor;
+    }
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+    }
+
+    &.p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+        padding: $buttonIconOnlyPadding;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            margin: 0;
+        }
+
+        &.p-button-rounded {
+            border-radius: 50%;
+            height: $buttonIconOnlyWidth;
+        }
+    }
+
+    &.p-button-sm {
+        @include scaledFontSize($fontSize, $scaleSM);
+        @include scaledPadding($buttonPadding, $scaleSM);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleSM);
+        }
+    }
+
+    &.p-button-lg {
+        @include scaledFontSize($fontSize, $scaleLG);
+        @include scaledPadding($buttonPadding, $scaleLG);
+
+        .p-button-icon {
+            @include scaledFontSize($primeIconFontSize, $scaleLG);
+        }
+    }
+
+    &.p-button-loading-label-only {
+        .p-button-label {
+            margin-left: $inlineSpacing;
+        }
+
+        .p-button-loading-icon {
+            margin-right: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-buttonset {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-buttonset.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    &:enabled:hover {
+        background: $secondaryButtonHoverBg;
+        color: $secondaryButtonTextHoverColor;
+        border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $secondaryButtonActiveBg;
+        color: $secondaryButtonTextActiveColor;
+        border-color: $secondaryButtonActiveBorderColor;
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-buttonset.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    &:enabled:hover {
+        background: $infoButtonHoverBg;
+        color: $infoButtonTextHoverColor;
+        border-color: $infoButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $infoButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $infoButtonActiveBg;
+        color: $infoButtonTextActiveColor;
+        border-color: $infoButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-success, .p-buttonset.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    &:enabled:hover {
+        background: $successButtonHoverBg;
+        color: $successButtonTextHoverColor;
+        border-color: $successButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $successButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $successButtonActiveBg;
+        color: $successButtonTextActiveColor;
+        border-color: $successButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-buttonset.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    &:enabled:hover {
+        background: $warningButtonHoverBg;
+        color: $warningButtonTextHoverColor;
+        border-color: $warningButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $warningButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $warningButtonActiveBg;
+        color: $warningButtonTextActiveColor;
+        border-color: $warningButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-help, .p-buttonset.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    &:enabled:hover {
+        background: $helpButtonHoverBg;
+        color: $helpButtonTextHoverColor;
+        border-color: $helpButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $helpButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $helpButtonActiveBg;
+        color: $helpButtonTextActiveColor;
+        border-color: $helpButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-buttonset.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    &:enabled:hover {
+        background: $dangerButtonHoverBg;
+        color: $dangerButtonTextHoverColor;
+        border-color: $dangerButtonHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        box-shadow: $dangerButtonFocusShadow;
+    }
+
+    &:enabled:active {
+        background: $dangerButtonActiveBg;
+        color: $dangerButtonTextActiveColor;
+        border-color: $dangerButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:enabled:hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:enabled:active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        &:enabled:hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+
+        &:enabled:active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    &:enabled:hover {
+        background:  transparent;
+        color: $linkButtonHoverColor;
+        border-color:  transparent;
+
+        .p-button-label {
+            text-decoration: $linkButtonTextHoverDecoration;
+        }
+    }
+
+    &:enabled:focus {
+        background: transparent;
+        box-shadow: $linkButtonFocusShadow;
+        border-color:  transparent;
+    }
+
+    &:enabled:active {
+        background:  transparent;
+        color: $linkButtonColor;
+        border-color:  transparent;
+    }
+}
diff --git a/src/styles/primevue-base/components/button/_speeddial.scss b/src/styles/primevue-base/components/button/_speeddial.scss
new file mode 100644
index 00000000..ef2d627b
--- /dev/null
+++ b/src/styles/primevue-base/components/button/_speeddial.scss
@@ -0,0 +1,97 @@
+@use 'sass:math';
+
+.p-speeddial-button {
+    &.p-button.p-button-icon-only {
+        width: $speedDialButtonWidth;
+        height: $speedDialButtonHeight;
+
+        .p-button-icon {
+            font-size: $speedDialButtonIconFontSize;
+        }
+
+        .p-icon {
+            width: $speedDialButtonIconFontSize;
+            height: $speedDialButtonIconFontSize;
+        }
+    }
+}
+
+.p-speeddial-list {
+    outline: 0 none;
+}
+
+.p-speeddial-item {
+    &.p-focus > .p-speeddial-action {
+        @include focused();
+    }
+}
+
+.p-speeddial-action {
+    width: $speedDialActionWidth;
+    height: $speedDialActionHeight;
+    background: $speedDialActionBg;
+    color: $speedDialActionTextColor;
+
+    &:hover {
+        background: $speedDialActionHoverBg;
+        color: $speedDialActionTextHoverColor;
+    }
+}
+
+.p-speeddial-direction-up {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-down {
+    .p-speeddial-item {
+        margin: math.div($inlineSpacing, 2) 0;
+
+        &:first-child {
+            margin-top: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-left {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-right: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-direction-right {
+    .p-speeddial-item {
+        margin: 0 math.div($inlineSpacing, 2);
+
+        &:first-child {
+            margin-left: $inlineSpacing;
+        }
+    }
+}
+
+.p-speeddial-circle,
+.p-speeddial-semi-circle,
+.p-speeddial-quarter-circle {
+    .p-speeddial-item {
+        margin: 0;
+
+        &:first-child,
+        &:last-child {
+            margin: 0;
+        }
+    }
+}
+
+.p-speeddial-mask {
+    background-color: $maskBg;
+    border-radius: $borderRadius;
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/button/_splitbutton.scss b/src/styles/primevue-base/components/button/_splitbutton.scss
new file mode 100644
index 00000000..a33b0e0e
--- /dev/null
+++ b/src/styles/primevue-base/components/button/_splitbutton.scss
@@ -0,0 +1,390 @@
+.p-splitbutton {
+    border-radius: $borderRadius;
+
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                    color: $buttonBg;
+                }
+
+                &:active {
+                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                    color: $buttonBg;
+                }
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+                border-color: $plainButtonTextColor;
+
+                @include button-states {
+                    &:hover {
+                        background: $plainButtonHoverBgColor;
+                        color: $plainButtonTextColor;
+                    }
+            
+                    &:active {
+                        background: $plainButtonActiveBgColor;
+                        color: $plainButtonTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                    color: $buttonBg;
+                    border-color: transparent;
+                }
+
+                &:active {
+                    background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                    color: $buttonBg;
+                    border-color: transparent;
+                }
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+
+                @include button-states {
+                    &:hover {
+                        background: $plainButtonHoverBgColor;
+                        color: $plainButtonTextColor;
+                    }
+            
+                    &:active {
+                        background: $plainButtonActiveBgColor;
+                        color: $plainButtonTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+
+    &.p-button-raised {
+        box-shadow: $raisedButtonShadow;
+    }
+
+    &.p-button-rounded {
+        border-radius: $roundedButtonBorderRadius;
+
+        > .p-button {
+            border-radius: $roundedButtonBorderRadius;
+        }
+    }
+
+    &.p-button-sm {
+        > .p-button {
+            @include scaledFontSize($fontSize, $scaleSM);
+            @include scaledPadding($buttonPadding, $scaleSM);
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleSM);
+            }
+        }
+    }
+
+    &.p-button-lg {
+        > .p-button {
+            @include scaledFontSize($fontSize, $scaleLG);
+            @include scaledPadding($buttonPadding, $scaleLG);
+
+            &.p-button-icon-only {
+                width: auto;
+            }
+
+            .p-button-icon {
+                @include scaledFontSize($primeIconFontSize, $scaleLG);
+            }
+
+            .p-icon {
+                width: $primeIconFontSize * $scaleLG;
+                height: $primeIconFontSize * $scaleLG;
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-secondary {    
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                    color: $secondaryButtonBg;
+                }
+
+                &:active {
+                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                    color: $secondaryButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $secondaryButtonBg;
+                }
+
+                &:active {
+                    background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $secondaryButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-info {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                    color: $infoButtonBg;
+                }
+
+                &:active {
+                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                    color: $infoButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $infoButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $infoButtonBg;
+                }
+
+                &:active {
+                    background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $infoButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-success {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                    color: $successButtonBg;
+                }
+
+                &:active {
+                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                    color: $successButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $successButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $successButtonBg;
+                }
+
+                &:active {
+                    background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $successButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-warning {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                    color: $warningButtonBg;
+                }
+
+                &:active {
+                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                    color: $warningButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $warningButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $warningButtonBg;
+                }
+
+                &:active {
+                    background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $warningButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-help {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                    color: $helpButtonBg;
+                }
+
+                &:active {
+                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                    color: $helpButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $helpButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $helpButtonBg;
+                }
+
+                &:active {
+                    background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $helpButtonBg;
+                }
+            }
+        }
+    }
+}
+
+.p-splitbutton.p-button-danger {
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                    color: $dangerButtonBg;
+                }
+
+                &:active {
+                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                    color: $dangerButtonBg;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $dangerButtonBg;
+            border-color: transparent;
+
+            @include button-states {
+                &:hover {
+                    background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                    border-color: transparent;
+                    color: $dangerButtonBg;
+                }
+
+                &:active {
+                    background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                    border-color: transparent;
+                    color: $dangerButtonBg;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/data/_carousel.scss b/src/styles/primevue-base/components/data/_carousel.scss
new file mode 100644
index 00000000..87c56530
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_carousel.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-content {
+        .p-carousel-prev,
+        .p-carousel-next {
+            @include action-icon();
+            margin: $inlineSpacing;
+        }
+    }
+
+    .p-carousel-indicators {
+        padding: $carouselIndicatorsPadding;
+
+        .p-carousel-indicator {
+            margin-right: $inlineSpacing;
+            margin-bottom: $inlineSpacing;
+           
+            button {
+                background-color: $carouselIndicatorBg;
+                width: $carouselIndicatorWidth;
+                height: $carouselIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $carouselIndicatorBorderRadius;
+
+                &:hover {
+                    background: $carouselIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_datatable.scss b/src/styles/primevue-base/components/data/_datatable.scss
new file mode 100644
index 00000000..fbd4cfda
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_datatable.scss
@@ -0,0 +1,342 @@
+.p-datatable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datatable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datatable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-datatable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-datatable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+
+            &:hover {
+                background: $tableHeaderCellHighlightHoverBg;
+                color: $tableHeaderCellHighlightTextColor;
+    
+                .p-sortable-column-icon {
+                    color: $tableHeaderCellHighlightTextColor;
+                }
+            }
+        }
+
+        &:focus-visible {
+            box-shadow: $inputListItemFocusShadow;
+            outline: 0 none;
+        }
+    }
+
+    .p-datatable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-row-toggler,
+                .p-row-editor-init,
+                .p-row-editor-save,
+                .p-row-editor-cancel {
+                    @include action-icon();
+                }
+
+                .p-row-editor-save {
+                    margin-right: $inlineSpacing;
+                }
+
+                > .p-column-title {
+                    font-weight: $tableHeaderCellFontWeight;
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &.p-datatable-dragpoint-top > td {
+                box-shadow: inset 0 2px 0 0 $highlightBg;
+            }
+
+            &.p-datatable-dragpoint-bottom > td {
+                box-shadow: inset 0 -2px 0 0 $highlightBg;
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
+    &.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
+        > .p-datatable-thead,
+        > .p-datatable-tfoot {
+            background-color: $tableHeaderCellBg;
+        }
+    }
+
+    .p-datatable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-datatable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-datatable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-paginator-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-paginator-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-datatable-thead {
+            > tr {
+                > th {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px 0 0 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 0 1px;
+                    }
+                }
+
+                &:last-child {
+                    > td {
+                        border-width: 1px 0 1px 1px;
+
+                        &:last-child {
+                            border-width: 1px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 1px 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        .p-datatable-thead + .p-datatable-tfoot {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
+            > tr {
+                > td {
+                    border-width: 0 0 1px 1px;
+
+                    &:last-child {
+                        border-width: 0 1px 1px 1px;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
+            > tr {
+                &:last-child {
+                    > td {
+                        border-width: 0 0 0 1px;
+
+                        &:last-child {
+                            border-width: 0 1px 0 1px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-striped {
+        .p-datatable-tbody {
+            > tr:nth-child(even) {
+                background: $tableBodyRowEvenBg;
+    
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+    
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+    
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-datatable-sm {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleSM);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-datatable-lg {
+        .p-datatable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-datatable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-datatable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-datatable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_dataview.scss b/src/styles/primevue-base/components/data/_dataview.scss
new file mode 100644
index 00000000..ba9a14ca
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_dataview.scss
@@ -0,0 +1,47 @@
+.p-dataview {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-dataview-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-dataview-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    &.p-dataview-list {
+        .p-dataview-content {
+            > .p-grid > div {
+                border: $dataViewListItemBorder;
+                border-width: $dataViewListItemBorderWidth;
+            }
+        }
+    }
+
+    .p-dataview-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+        border-bottom-left-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_filter.scss b/src/styles/primevue-base/components/data/_filter.scss
new file mode 100644
index 00000000..8eb91b74
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_filter.scss
@@ -0,0 +1,138 @@
+.p-column-filter-row {
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        margin-left: $inlineSpacing;
+    }
+}
+
+.p-column-filter-menu-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &.p-column-filter-menu-button-open,
+    &.p-column-filter-menu-button-open:hover {
+        background: $actionIconHoverBg;
+        color: $actionIconHoverColor;
+    }
+
+    &.p-column-filter-menu-button-active,
+    &.p-column-filter-menu-button-active:hover {
+        background: $highlightBg;
+        color: $highlightTextColor;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+
+}
+
+.p-column-filter-clear-button {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-column-filter-overlay {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+    min-width: $menuWidth;
+
+    .p-column-filter-row-items {
+        padding: $inputListPadding;
+
+        .p-column-filter-row-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &:focus-visible {
+                @include focused-listitem();
+            }
+        }
+
+        .p-column-filter-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+}
+
+.p-column-filter-overlay-menu {
+    .p-column-filter-operator {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-column-filter-constraint {
+        padding: $panelContentPadding;
+        border-bottom: $divider;
+
+        .p-column-filter-matchmode-dropdown {
+            margin-bottom: $inlineSpacing;
+        }
+
+        .p-column-filter-remove-button {
+            margin-top: $inlineSpacing;
+        }
+
+        &:last-child {
+            border-bottom: 0 none;
+        }
+    }
+
+    .p-column-filter-add-rule {
+        padding: $panelFooterPadding;
+    }
+
+    .p-column-filter-buttonbar {
+        padding: $panelContentPadding;
+    } 
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/data/_orderlist.scss b/src/styles/primevue-base/components/data/_orderlist.scss
new file mode 100644
index 00000000..9410e071
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_orderlist.scss
@@ -0,0 +1,70 @@
+.p-orderlist {
+    .p-orderlist-controls {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-orderlist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-orderlist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        outline: 0 none;
+
+        .p-orderlist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &.p-focus {
+                color: $inputListItemTextFocusColor;
+                background: $inputListItemFocusBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+        }
+    }
+
+    &.p-orderlist-striped {
+        .p-orderlist-list {
+            .p-orderlist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/data/_organizationchart.scss b/src/styles/primevue-base/components/data/_organizationchart.scss
new file mode 100644
index 00000000..776bbea3
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_organizationchart.scss
@@ -0,0 +1,50 @@
+.p-organizationchart {
+    .p-organizationchart-node-content {
+        &.p-organizationchart-selectable-node:not(.p-highlight):hover {
+            background: $inputListItemHoverBg;
+            color: $inputListItemTextHoverColor;
+        }
+
+        &.p-highlight {
+            background: $highlightBg;
+            color: $highlightTextColor;
+
+            .p-node-toggler {
+                i {
+                    color: darken($highlightBg, 25%);
+                }
+            }
+        }
+    }
+
+    .p-organizationchart-line-down {
+        background: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-left {
+        border-right: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-line-top {
+        border-top: $panelContentBorder;
+        border-color: $organizationChartConnectorColor;
+    }
+
+    .p-organizationchart-node-content {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $panelContentPadding;
+    }
+
+    .p-organizationchart-node-content .p-node-toggler {
+        background: inherit;
+        color: inherit;
+        border-radius: 50%;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_paginator.scss b/src/styles/primevue-base/components/data/_paginator.scss
new file mode 100644
index 00000000..eb3b52f9
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_paginator.scss
@@ -0,0 +1,92 @@
+.p-paginator {
+    background: $paginatorBg;
+    color: $paginatorTextColor;
+    border: $paginatorBorder;
+    border-width: $paginatorBorderWidth;
+    padding: $paginatorPadding;
+    border-radius: $borderRadius;
+
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-next,
+    .p-paginator-last {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        transition: $listItemTransition;
+        border-radius: $paginatorElementBorderRadius;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $paginatorElementHoverBg;
+            border-color: $paginatorElementHoverBorderColor;
+            color: $paginatorElementIconHoverColor;
+        }
+    }
+
+    .p-paginator-first {
+        border-top-left-radius: $paginatorElementBorderRadius;
+        border-bottom-left-radius: $paginatorElementBorderRadius;
+    }
+    
+    .p-paginator-last {
+        border-top-right-radius: $paginatorElementBorderRadius;
+        border-bottom-right-radius: $paginatorElementBorderRadius;
+    }
+
+    .p-dropdown {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+        height: $paginatorElementHeight;
+
+        .p-dropdown-label {
+            padding-right: 0;
+        }
+    }
+
+    .p-paginator-page-input {
+        margin-left: $inlineSpacing;
+        margin-right: $inlineSpacing;
+
+        .p-inputtext {
+            max-width: $paginatorElementWidth;
+        }
+    }
+
+    .p-paginator-current {
+        background-color: $paginatorElementBg;
+        border: $paginatorElementBorder;
+        color: $paginatorElementIconColor;
+        min-width: $paginatorElementWidth;
+        height: $paginatorElementHeight;
+        margin: $paginatorElementMargin;
+        padding: 0 $inlineSpacing;
+    }
+
+    .p-paginator-pages {
+        .p-paginator-page {
+            background-color: $paginatorElementBg;
+            border: $paginatorElementBorder;
+            color: $paginatorElementIconColor;
+            min-width: $paginatorElementWidth;
+            height: $paginatorElementHeight;
+            margin: $paginatorElementMargin;
+            transition: $listItemTransition;
+            border-radius: $paginatorElementBorderRadius;
+
+            &.p-highlight {
+                background: $highlightBg;
+                border-color: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &:not(.p-highlight):hover {
+                background: $paginatorElementHoverBg;
+                border-color: $paginatorElementHoverBorderColor;
+                color: $paginatorElementIconHoverColor;
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_picklist.scss b/src/styles/primevue-base/components/data/_picklist.scss
new file mode 100644
index 00000000..8ad0f711
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_picklist.scss
@@ -0,0 +1,70 @@
+.p-picklist {
+    .p-picklist-buttons {
+        padding: $panelContentPadding;
+
+        .p-button {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    .p-picklist-header {
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        font-weight: $panelHeaderFontWeight;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+    }
+
+    .p-picklist-list {
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $inputListPadding;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        outline: 0 none;
+
+        .p-picklist-item {
+            padding: $inputListItemPadding;
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: transform $transitionDuration, $listItemTransition;
+
+            &:not(.p-highlight):hover {
+                background: $inputListItemHoverBg;
+                color: $inputListItemTextHoverColor;
+            }
+
+            &.p-focus {
+                color: $inputListItemTextFocusColor;
+                background: $inputListItemFocusBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+        }
+    }
+
+    &.p-picklist-striped {
+        .p-picklist-list {
+            .p-picklist-item:nth-child(even) {
+                background: $panelContentEvenRowBg;
+
+                &:hover {
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/data/_timeline.scss b/src/styles/primevue-base/components/data/_timeline.scss
new file mode 100644
index 00000000..5767491d
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_timeline.scss
@@ -0,0 +1,38 @@
+.p-timeline {
+    .p-timeline-event-marker {
+        border: $timelineEventMarkerBorder; 
+        border-radius: $timelineEventMarkerBorderRadius;
+        width: $timelineEventMarkerWidth;
+        height: $timelineEventMarkerHeight;
+        background-color: $timelineEventMarkerBackground;
+    }
+
+    .p-timeline-event-connector {
+        background-color: $timelineEventColor;
+    }
+
+    &.p-timeline-vertical {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineVerticalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            width: $timelineEventConnectorSize;
+        }
+    }
+
+    &.p-timeline-horizontal {
+        .p-timeline-event-opposite,
+        .p-timeline-event-content  {
+            padding: $timelineHorizontalEventContentPadding;
+        }
+
+        .p-timeline-event-connector {
+            height: $timelineEventConnectorSize;
+        }
+    }
+}
+
+
+
diff --git a/src/styles/primevue-base/components/data/_tree.scss b/src/styles/primevue-base/components/data/_tree.scss
new file mode 100644
index 00000000..59177a9d
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_tree.scss
@@ -0,0 +1,90 @@
+.p-tree {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $panelContentPadding;
+    border-radius: $borderRadius;
+
+    .p-tree-container {
+        .p-treenode {
+            padding: $treeNodePadding;
+            outline: 0 none;
+
+            &:focus > .p-treenode-content {
+                @include focused-listitem();
+            }
+
+            .p-treenode-content {
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+                padding: $treeNodeContentPadding;
+
+                .p-tree-toggler {
+                    margin-right: $inlineSpacing;
+                    @include action-icon();
+                }
+
+                .p-treenode-icon {
+                    margin-right: $inlineSpacing;
+                    color: $treeNodeIconColor;
+                }
+
+                .p-checkbox {
+                    margin-right: $inlineSpacing;
+
+                    .p-indeterminate {
+                        .p-checkbox-icon {
+                            color: $textColor;
+                        }
+                    }
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+
+                    .p-tree-toggler,
+                    .p-treenode-icon {
+                        color: $highlightTextColor;
+
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                &.p-treenode-selectable:not(.p-highlight):hover {
+                    background: $inputListItemHoverBg;
+                    color: $inputListItemTextHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-tree-filter-container {
+        margin-bottom: $inlineSpacing;
+
+        .p-tree-filter {
+            width: 100%;
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-tree-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-treenode-children {
+        padding: $treeNodeChildrenPadding;
+    }
+
+    .p-tree-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/data/_treetable.scss b/src/styles/primevue-base/components/data/_treetable.scss
new file mode 100644
index 00000000..770bd7c1
--- /dev/null
+++ b/src/styles/primevue-base/components/data/_treetable.scss
@@ -0,0 +1,251 @@
+.p-treetable {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-treetable-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-treetable-footer {
+        background: $tableFooterBg;
+        color: $tableFooterTextColor;
+        border: $tableFooterBorder;
+        border-width: $tableFooterBorderWidth;
+        padding: $tableFooterPadding;
+        font-weight: $tableFooterFontWeight;
+    }
+
+    .p-treetable-thead > tr > th {
+        text-align: $tableCellContentAlignment;
+        padding: $tableHeaderCellPadding;
+        border: $tableHeaderCellBorder;
+        border-width: $tableHeaderCellBorderWidth;
+        font-weight: $tableHeaderCellFontWeight;
+        color: $tableHeaderCellTextColor;
+        background: $tableHeaderCellBg;
+        transition: $listItemTransition;
+    }
+
+    .p-treetable-tfoot > tr > td {
+        text-align: $tableCellContentAlignment;
+        padding: $tableFooterCellPadding;
+        border: $tableFooterCellBorder;
+        border-width: $tableFooterCellBorderWidth;
+        font-weight: $tableFooterCellFontWeight;
+        color: $tableFooterCellTextColor;
+        background: $tableFooterCellBg;
+    }
+
+    .p-sortable-column {
+        outline-color: $focusOutlineColor;
+
+        .p-sortable-column-icon {
+            color: $tableHeaderCellIconColor;
+            margin-left: $inlineSpacing;
+        }
+
+        .p-sortable-column-badge {
+            border-radius: 50%;
+            height: $tableSortableColumnBadgeSize;
+            min-width: $tableSortableColumnBadgeSize;
+            line-height: $tableSortableColumnBadgeSize;
+            color: $highlightTextColor;
+            background: $highlightBg;
+            margin-left: $inlineSpacing;
+        }
+
+        &:not(.p-highlight):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+        }
+    }
+
+    .p-treetable-tbody {
+        > tr {
+            background: $tableBodyRowBg;
+            color: $tableBodyRowTextColor;
+            transition: $listItemTransition;
+
+            > td {
+                text-align: $tableCellContentAlignment;
+                border: $tableBodyCellBorder;
+                border-width: $tableBodyCellBorderWidth;
+                padding: $tableBodyCellPadding;
+
+                .p-treetable-toggler {
+                    @include action-icon();
+                    margin-right: $inlineSpacing;
+                    
+                    & + .p-checkbox {
+                        margin-right: $inlineSpacing;
+                        
+                        .p-indeterminate {
+                            .p-checkbox-icon {
+                                color: $textColor;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:focus-visible {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                    
+                }
+            }
+        }
+    }
+
+    &.p-treetable-hoverable-rows {
+        .p-treetable-tbody > tr:not(.p-highlight):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+
+            .p-treetable-toggler {
+                color: $tableBodyRowTextHoverColor;
+            }
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    .p-treetable-loading-icon {
+        font-size: $loadingIconFontSize;
+
+        &.p-icon {
+            width:  $loadingIconFontSize;
+            height: $loadingIconFontSize;
+        }
+    }
+
+    &.p-treetable-gridlines {
+        .p-datatable-header {
+            border-width: 1px 1px 0 1px;
+        }
+
+        .p-treetable-footer {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-top {
+            border-width: 0 1px 0 1px;
+        }
+
+        .p-treetable-bottom {
+            border-width: 0 1px 1px 1px;
+        }
+
+        .p-treetable-thead {
+            > tr {
+                > th {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tbody {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+
+        .p-treetable-tfoot {
+            > tr {
+                > td {
+                    border-width: 1px;
+                }
+            }
+        }
+    }
+
+    &.p-treetable-sm {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $scaleSM);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleSM);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleSM);
+        }
+    }
+
+    &.p-treetable-lg {
+        .p-treetable-header {
+            @include scaledPadding($tableHeaderPadding, $tableScaleLG);
+        }
+
+        .p-treetable-thead > tr > th {
+            @include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tbody > tr > td {
+            @include scaledPadding($tableBodyCellPadding, $tableScaleLG);
+        }
+
+        .p-treetable-tfoot > tr > td {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+
+        .p-treetable-footer {
+            @include scaledPadding($tableFooterPadding, $tableScaleLG);
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/file/_fileupload.scss b/src/styles/primevue-base/components/file/_fileupload.scss
new file mode 100644
index 00000000..1ac6bac2
--- /dev/null
+++ b/src/styles/primevue-base/components/file/_fileupload.scss
@@ -0,0 +1,82 @@
+.p-fileupload {
+    .p-fileupload-buttonbar {
+        background: $panelHeaderBg;
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        border-bottom: 0 none;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+        gap: $inlineSpacing;
+
+        .p-button {
+            &.p-fileupload-choose.p-focus {
+                @include focused();
+            }
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.p-fileupload-highlight {
+            border: $fileUploadContentHoverBorder;
+            background-color: $highlightBg;
+        }
+    }
+
+    .p-fileupload-file {
+        padding: $fileUploadFilePadding;
+        border: $fileUploadFileBorder;
+        border-radius: $borderRadius;
+        gap: $inlineSpacing;
+        margin-bottom: $inlineSpacing;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .p-fileupload-file-name {
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-fileupload-file-size {
+        margin-right: $inlineSpacing;
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        >div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
+
+.p-fileupload-choose {
+    &:not(.p-disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(.p-disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_autocomplete.scss b/src/styles/primevue-base/components/input/_autocomplete.scss
new file mode 100644
index 00000000..ec03058d
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_autocomplete.scss
@@ -0,0 +1,114 @@
+@use 'sass:math';
+
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2); 
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-autocomplete-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-autocomplete-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+
+        .p-autocomplete-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+            
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+
+        .p-autocomplete-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-autocomplete-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-autocomplete-items {
+        padding: $inputListPadding;
+
+        .p-autocomplete-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_calendar.scss b/src/styles/primevue-base/components/input/_calendar.scss
new file mode 100644
index 00000000..d8ed9f50
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_calendar.scss
@@ -0,0 +1,251 @@
+.p-calendar {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+
+    &:not(.p-calendar-disabled).p-focus > .p-inputtext {
+        @include focused-input();
+    }
+}
+
+.p-datepicker {
+    padding: $calendarPadding;
+    background: $calendarInlineBg;
+    color: $calendarTextColor;
+    border: $calendarBorder;
+    border-radius: $borderRadius;
+
+    &:not(.p-datepicker-inline) {
+        background: $calendarBg;
+        border: $calendarOverlayBorder;
+        box-shadow: $inputOverlayShadow;
+
+        .p-datepicker-header {
+            background: $calendarHeaderBg;
+        }
+    }
+
+    .p-datepicker-header {
+        padding: $calendarHeaderPadding;
+        color: $calendarHeaderTextColor;
+        background: $calendarInlineHeaderBg;
+        font-weight: $calendarHeaderFontWeight;
+        margin: $inputListHeaderMargin;
+        border-bottom: $calendarHeaderBorder;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-datepicker-prev,
+        .p-datepicker-next {
+            @include action-icon();
+        }
+
+        .p-datepicker-title {
+            line-height: $actionIconHeight;
+
+            .p-datepicker-year,
+            .p-datepicker-month {
+                color: $calendarHeaderTextColor;
+                transition: $actionIconTransition;
+                font-weight: $calendarHeaderFontWeight;
+                padding: $calendarHeaderCellPadding;
+
+                &:enabled:hover {
+                    color: $calendarMonthYearHeaderHoverTextColor;
+                }
+            }
+
+            .p-datepicker-month {
+                margin-right: $inlineSpacing;
+            }
+        }
+    }
+
+    table {
+        font-size: $fontSize;
+        margin: $calendarTableMargin;
+
+        th {
+            padding: $calendarHeaderCellPadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+            }
+        }
+
+        td {
+            padding: $calendarCellDatePadding;
+
+            > span {
+                width: $calendarCellDateWidth;
+                height: $calendarCellDateHeight;
+                border-radius: $calendarCellDateBorderRadius;
+                transition: $listItemTransition;
+                border: $calendarCellDateBorder;
+
+                &.p-highlight {
+                    color: $highlightTextColor;
+                    background: $highlightBg;
+                }
+
+                &:focus {
+                    @include focused();
+                }
+            }
+
+            &.p-datepicker-today {
+                > span {
+                    background: $calendarCellDateTodayBg;
+                    color: $calendarCellDateTodayTextColor;
+                    border-color: $calendarCellDateTodayBorderColor;
+
+                    &.p-highlight {
+                        color: $highlightTextColor;
+                        background: $highlightBg;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-datepicker-buttonbar {
+        padding: $calendarButtonBarPadding;
+        border-top: $divider;
+
+        .p-button {
+            width: auto;
+        }
+    }
+
+    .p-timepicker {
+        border-top: $divider;
+        padding: $calendarTimePickerPadding;
+
+        button {
+            @include action-icon();
+
+            &:last-child {
+                margin-top: .2em;
+            }
+        }
+
+        span {
+            font-size: $calendarTimePickerTimeFontSize;
+        }
+
+        > div {
+            padding: $calendarTimePickerElementPadding;
+        }
+    }
+
+    &.p-datepicker-timeonly {
+        .p-timepicker {
+            border-top: 0 none;
+        }
+    }
+
+    .p-monthpicker {
+        margin: $calendarTableMargin;
+
+        .p-monthpicker-month {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    .p-yearpicker {
+        margin: $calendarTableMargin;
+
+        .p-yearpicker-year {
+            padding: $calendarCellDatePadding;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+
+    &.p-datepicker-multiple-month {
+        .p-datepicker-group {
+            border-left: $divider;
+            padding-right: $calendarPadding;
+            padding-left: $calendarPadding;
+            padding-top: 0;
+            padding-bottom: 0;
+
+            &:first-child {
+                padding-left: 0;
+                border-left: 0 none;
+            }
+
+            &:last-child {
+                padding-right: 0;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        table {
+            td {
+                span:not(.p-highlight):not(.p-disabled) {
+                    &:hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-monthpicker {
+            .p-monthpicker-month {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+
+        .p-yearpicker {
+            .p-yearpicker-year {
+                &:not(.p-disabled) {
+                    &:not(.p-highlight):hover {
+                        background: $calendarCellDateHoverBg;
+                    }
+
+                    &:focus {
+                        @include focused();
+                    }
+                }
+            }
+        }
+    }
+
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+    .p-datepicker {
+        table {
+            th, td {
+                padding: $calendarCellDatePaddingSM;
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_cascadeselect.scss b/src/styles/primevue-base/components/input/_cascadeselect.scss
new file mode 100644
index 00000000..6a231389
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_cascadeselect.scss
@@ -0,0 +1,106 @@
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-cascadeselect-label {
+        background: transparent;
+        border: 0 none;
+        padding: $inputPadding;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-cascadeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-cascadeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-cascadeselect-items {
+        padding: $inputListPadding;
+
+        .p-cascadeselect-item {
+            margin: $inputListItemMargin;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-cascadeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_checkbox.scss b/src/styles/primevue-base/components/input/_checkbox.scss
new file mode 100644
index 00000000..4178744d
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_checkbox.scss
@@ -0,0 +1,86 @@
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+
+        &.p-highlight {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+        }
+    }
+
+    &:not(.p-checkbox-disabled) {
+        .p-checkbox-box {
+            &:hover {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-focus {
+                @include focused-input();
+            }
+
+            &.p-highlight:hover {    
+                border-color: $checkboxActiveHoverBorderColor;
+                background: $checkboxActiveHoverBg;
+                color: $checkboxIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-invalid > .p-checkbox-box {
+        @include invalid-input();
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+
+            &.p-highlight {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-checkbox-disabled) {
+            .p-checkbox-box {
+                &:hover {
+                    background-color: $inputFilledHoverBg;
+                }
+        
+                &.p-highlight:hover {    
+                    background: $checkboxActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+} 
diff --git a/src/styles/primevue-base/components/input/_chips.scss b/src/styles/primevue-base/components/input/_chips.scss
new file mode 100644
index 00000000..4e3f06f5
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_chips.scss
@@ -0,0 +1,53 @@
+@use 'sass:math';
+
+.p-chips {
+    &:not(.p-disabled):hover {
+        .p-chips-multiple-container {
+            border-color: $inputHoverBorderColor;
+        }
+    }
+
+    &:not(.p-disabled).p-focus {
+        .p-chips-multiple-container {
+            @include focused-input();
+        }
+    }
+
+    .p-chips-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+
+        .p-chips-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            &.p-focus {
+                background: $chipFocusBg;
+                color: $chipFocusTextColor;
+            }
+
+            .p-chips-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+
+        .p-chips-input-token {
+            padding: math.div(nth($inputPadding, 1), 2) 0;
+                
+            input {
+                font-family: var(--font-family);
+                font-feature-settings: var(--font-feature-settings, normal);
+                font-size: $inputTextFontSize;
+                color: $textColor;
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_colorpicker.scss b/src/styles/primevue-base/components/input/_colorpicker.scss
new file mode 100644
index 00000000..be6d6581
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_colorpicker.scss
@@ -0,0 +1,18 @@
+.p-colorpicker-preview  {
+    width: $colorPickerPreviewWidth;
+    height: $colorPickerPreviewHeight;
+}
+
+.p-colorpicker-panel {
+    background: $colorPickerBg;
+    border: $colorPickerBorder;
+
+    .p-colorpicker-color-handle,
+    .p-colorpicker-hue-handle {
+        border-color: $colorPickerHandleColor;
+    }
+}
+
+.p-colorpicker-overlay-panel {
+    box-shadow: $inputOverlayShadow;
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_dropdown.scss b/src/styles/primevue-base/components/input/_dropdown.scss
new file mode 100644
index 00000000..42d537c2
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_dropdown.scss
@@ -0,0 +1,147 @@
+.p-dropdown {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-dropdown-clearable {
+        .p-dropdown-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    .p-dropdown-label {
+        background: transparent;
+        border: 0 none;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+
+        &:focus,
+        &:enabled:focus {
+            outline: 0 none;
+            box-shadow: none;
+        }
+    }
+
+    .p-dropdown-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+
+    .p-dropdown-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-dropdown-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-dropdown-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dropdown-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
+        }
+
+        .p-dropdown-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-dropdown-items {
+        padding: $inputListPadding;
+
+        .p-dropdown-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+
+        .p-dropdown-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-dropdown-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-dropdown {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_editor.scss b/src/styles/primevue-base/components/input/_editor.scss
new file mode 100644
index 00000000..b10b2fa8
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_editor.scss
@@ -0,0 +1,122 @@
+.p-editor-container {
+    .p-editor-toolbar {
+        background: $editorToolbarBg;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorToolbarBorder;
+
+            .ql-stroke {
+                stroke: $editorToolbarIconColor;
+            }
+    
+            .ql-fill {
+                fill: $editorToolbarIconColor;
+            }
+    
+            .ql-picker {
+                .ql-picker-label {
+                    border: 0 none;
+                    color: $editorToolbarIconColor;
+
+                    &:hover {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+                }
+
+                &.ql-expanded {
+                    .ql-picker-label {
+                        color: $editorToolbarIconHoverColor;
+
+                        .ql-stroke {
+                            stroke: $editorToolbarIconHoverColor;
+                        }
+                
+                        .ql-fill {
+                            fill: $editorToolbarIconHoverColor;
+                        }
+                    }
+
+                    .ql-picker-options {
+                        background: $inputOverlayBg;
+                        border:$inputOverlayBorder;
+                        box-shadow:$inputOverlayShadow;
+                        border-radius: $borderRadius;
+                        padding: $inputListPadding;
+
+                        .ql-picker-item {
+                            color: $inputListItemTextColor;
+                            
+                            &:hover {
+                                color: $inputListItemTextHoverColor;
+                                background: $inputListItemHoverBg;
+                            }
+                        }
+                    }
+
+                    &:not(.ql-icon-picker) {
+                        .ql-picker-item {
+                            padding: $inputListItemPadding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .p-editor-content {
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        &.ql-snow {
+            border: $editorContentBorder;
+        }
+
+        .ql-editor {
+            background: $inputBg;
+            color: $inputTextColor;
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .ql-snow.ql-toolbar button:hover,
+    .ql-snow.ql-toolbar button:focus {
+        color: $editorToolbarIconHoverColor;
+
+        .ql-stroke {
+            stroke: $editorToolbarIconHoverColor;
+        }
+
+        .ql-fill {
+            fill: $editorToolbarIconHoverColor;
+        }
+    }
+
+    .ql-snow.ql-toolbar button.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+    .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+        color: $editorIconActiveColor;
+
+        .ql-stroke {
+            stroke: $editorIconActiveColor;
+        }
+
+        .ql-fill {
+            fill: $editorIconActiveColor;
+        }
+
+        .ql-picker-label {
+            color: $editorIconActiveColor;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_inputgroup.scss b/src/styles/primevue-base/components/input/_inputgroup.scss
new file mode 100644
index 00000000..ab4f8a00
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_inputgroup.scss
@@ -0,0 +1,74 @@
+.p-inputgroup-addon {
+    background: $inputGroupBg;
+    color: $inputGroupTextColor;
+    border-top: $inputBorder;
+    border-left: $inputBorder;
+    border-bottom: $inputBorder;
+    padding: $inputPadding;
+    min-width: $inputGroupAddOnMinWidth;
+
+    &:last-child {
+        border-right: $inputBorder;
+    }
+}
+
+.p-inputgroup {
+    > .p-component,
+    > .p-inputwrapper > .p-inputtext,
+    > .p-float-label > .p-component {
+        border-radius: 0;
+        margin: 0;
+
+        + .p-inputgroup-addon {
+            border-left: 0 none;
+        }
+
+        &:focus {
+            z-index: 1;
+
+            ~ label {
+                z-index: 1;
+            }
+        }
+    }
+}
+
+.p-inputgroup-addon:first-child,
+.p-inputgroup button:first-child,
+.p-inputgroup input:first-child,
+.p-inputgroup > .p-inputwrapper:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+}
+
+.p-inputgroup-addon:last-child,
+.p-inputgroup button:last-child,
+.p-inputgroup input:last-child,
+.p-inputgroup > .p-inputwrapper:last-child, 
+.p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+}
+
+.p-fluid {
+    .p-inputgroup {
+        .p-button {
+            width: auto;
+
+            &.p-button-icon-only {
+                width: $buttonIconOnlyWidth;
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_inputnumber.scss b/src/styles/primevue-base/components/input/_inputnumber.scss
new file mode 100644
index 00000000..aa8beb71
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_inputnumber.scss
@@ -0,0 +1,5 @@
+.p-inputnumber {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_inputswitch.scss b/src/styles/primevue-base/components/input/_inputswitch.scss
new file mode 100644
index 00000000..6ed6c73d
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_inputswitch.scss
@@ -0,0 +1,62 @@
+@use 'sass:math';
+
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider:before {
+            transform: translateX($inputSwitchHandleWidth);
+        }
+    }
+
+    &.p-focus {
+        .p-inputswitch-slider {
+            @include focused();
+        }
+    }
+
+    &:not(.p-disabled):hover {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOffHoverBg;
+        }
+    }
+
+    &.p-inputswitch-checked {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+            }
+        }
+
+        &:not(.p-disabled):hover {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOnHoverBg;
+            }
+        }
+    }
+
+    &.p-invalid {
+        .p-inputswitch-slider {
+            @include invalid-input();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_inputtext.scss b/src/styles/primevue-base/components/input/_inputtext.scss
new file mode 100644
index 00000000..c225b1b7
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_inputtext.scss
@@ -0,0 +1,100 @@
+.p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $inputTextFontSize;
+    color: $inputTextColor;
+    background: $inputBg;
+    padding: $inputPadding;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    appearance: none;
+    border-radius: $borderRadius;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-inputtext-sm {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+
+    &.p-inputtext-lg {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
+
+.p-float-label > label {
+    left: nth($inputPadding, 2);
+    color: $inputPlaceholderTextColor;
+    transition-duration: $transitionDuration;
+}
+
+.p-float-label > .p-invalid + label {
+    color: $inputErrorBorderColor;
+}
+
+.p-input-icon-left > svg:first-of-type,
+.p-input-icon-left > i:first-of-type {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-input-icon-right > svg:last-of-type,
+.p-input-icon-right > i:last-of-type  {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-input-icon-right > .p-inputtext {
+    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+@include placeholder {
+    color: $inputPlaceholderTextColor
+};
+
+.p-input-filled {
+    .p-inputtext {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
+
+.p-inputtext-sm {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleSM);
+        @include scaledPadding($inputPadding, $scaleSM);
+    }
+}
+
+.p-inputtext-lg {
+    .p-inputtext {
+        @include scaledFontSize($inputTextFontSize, $scaleLG);
+        @include scaledPadding($inputPadding, $scaleLG);
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_listbox.scss b/src/styles/primevue-base/components/input/_listbox.scss
new file mode 100644
index 00000000..2efccf98
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_listbox.scss
@@ -0,0 +1,89 @@
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-listbox-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputListHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-listbox-filter {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+
+        .p-listbox-filter-icon {
+            right: nth($inputPadding, 2);
+            color: $inputIconColor;
+        }
+    }
+
+    .p-listbox-list {
+        padding: $inputListPadding;
+        outline: 0 none;
+
+        .p-listbox-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-listbox-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-listbox-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        .p-listbox-item {
+            &.p-highlight {
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+        }
+    }
+
+    &.p-focus {
+        @include focused-input();
+    }
+
+    &.p-invalid {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_multiselect.scss b/src/styles/primevue-base/components/input/_multiselect.scss
new file mode 100644
index 00000000..27939c35
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_multiselect.scss
@@ -0,0 +1,166 @@
+@use 'sass:math';
+
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-multiselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-multiselect-chip {
+        .p-multiselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+
+            .p-multiselect-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    .p-multiselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+    
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-multiselect {
+        &.p-multiselect-chip {
+            .p-multiselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-multiselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-multiselect-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-multiselect-filter-container {
+            .p-inputtext {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+
+            .p-multiselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+        }
+
+        .p-checkbox {
+            margin-right: $inlineSpacing;
+        }
+
+        .p-multiselect-close {
+            margin-left: $inlineSpacing;
+            @include action-icon();
+        }
+    }
+
+    .p-multiselect-items {
+        padding: $inputListPadding;
+
+        .p-multiselect-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-checkbox {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .p-multiselect-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+
+        .p-multiselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-multiselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_password.scss b/src/styles/primevue-base/components/input/_password.scss
new file mode 100644
index 00000000..4c9f47a6
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_password.scss
@@ -0,0 +1,33 @@
+.p-password {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
+
+.p-password-panel {
+    padding: $panelContentPadding;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $inputOverlayShadow;
+    border-radius: $borderRadius;
+
+    .p-password-meter {
+        margin-bottom: $inlineSpacing;
+        background: $passwordMeterBg;
+
+        .p-password-strength {
+            &.weak {
+                background: $passwordWeakBg;
+            }
+
+            &.medium {
+                background: $passwordMediumBg;
+            }
+
+            &.strong {
+                background: $passwordStrongBg;
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_radiobutton.scss b/src/styles/primevue-base/components/input/_radiobutton.scss
new file mode 100644
index 00000000..9d3ab465
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_radiobutton.scss
@@ -0,0 +1,78 @@
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+
+        &.p-highlight {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+
+            &:not(.p-disabled):hover {
+                border-color: $radiobuttonActiveHoverBorderColor;
+                background: $radiobuttonActiveHoverBg;
+                color: $radiobuttonIconActiveHoverColor;
+            }
+        }
+    }
+    
+    &.p-invalid > .p-radiobutton-box {
+        @include invalid-input();
+    }
+
+    &:focus {
+        outline: 0 none;
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+
+            &:not(.p-disabled):hover {
+                background-color: $inputFilledHoverBg;
+            }
+
+            &.p-highlight {
+                background: $radiobuttonActiveBg;
+    
+                &:not(.p-disabled):hover {
+                    background: $radiobuttonActiveHoverBg;
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_rating.scss b/src/styles/primevue-base/components/input/_rating.scss
new file mode 100644
index 00000000..c8a2905a
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_rating.scss
@@ -0,0 +1,60 @@
+@use 'sass:math';
+
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;   
+            font-size: $ratingIconFontSize;
+
+            &.p-icon {
+                width: $ratingIconFontSize;
+                height: $ratingIconFontSize;
+            }
+    
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
+        }
+
+        &.p-focus {
+            @include focused-input();
+        }
+
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled):not(.p-readonly) {
+        .p-rating-item {
+            &:hover {
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
+
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+    .p-highlight {
+        .p-rating {
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_selectbutton.scss b/src/styles/primevue-base/components/input/_selectbutton.scss
new file mode 100644
index 00000000..dfcabe6b
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_selectbutton.scss
@@ -0,0 +1,50 @@
+.p-selectbutton {
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+
+        &:not(.p-disabled):not(.p-highlight):hover {
+            background: $toggleButtonHoverBg;
+            border-color: $toggleButtonHoverBorderColor;
+            color: $toggleButtonTextHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+
+            &:hover {
+                background: $toggleButtonActiveHoverBg;
+                border-color: $toggleButtonActiveHoverBorderColor;
+                color: $toggleButtonTextActiveHoverColor;
+
+                .p-button-icon-left,
+                .p-button-icon-right {
+                    color: $toggleButtonIconActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_slider.scss b/src/styles/primevue-base/components/input/_slider.scss
new file mode 100644
index 00000000..c752cd3e
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_slider.scss
@@ -0,0 +1,49 @@
+@use 'sass:math';
+
+.p-slider {
+    background: $sliderBg;
+    border: $sliderBorder;
+    border-radius: $borderRadius;
+
+    &.p-slider-horizontal {
+        height: $sliderHorizontalHeight;
+
+        .p-slider-handle {
+            margin-top: math.div(-1 * $sliderHandleHeight, 2);
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+        }
+    }
+
+    &.p-slider-vertical {
+        width: $sliderVerticalWidth;
+
+        .p-slider-handle {
+            margin-left: math.div(-1 * $sliderHandleWidth, 2);
+            margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+        }
+    }
+
+    .p-slider-handle {
+        height: $sliderHandleHeight;
+        width: $sliderHandleWidth;
+        background: $sliderHandleBg;
+        border: $sliderHandleBorder;
+        border-radius: $sliderHandleBorderRadius;
+        transition: $formElementTransition;
+
+        &:focus {
+            @include focused();
+        }
+    }
+
+    .p-slider-range {
+        background: $sliderRangeBg;
+    }
+
+    &:not(.p-disabled) {
+        .p-slider-handle:hover {
+            background: $sliderHandleHoverBg;
+            border-color: $sliderHandleHoverBorderColor;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/input/_togglebutton.scss b/src/styles/primevue-base/components/input/_togglebutton.scss
new file mode 100644
index 00000000..ee4a66d7
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_togglebutton.scss
@@ -0,0 +1,52 @@
+.p-togglebutton.p-button {
+    background: $toggleButtonBg;
+    border: $toggleButtonBorder;
+    color: $toggleButtonTextColor;
+    transition: $formElementTransition;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+        color: $toggleButtonIconColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+        background: $toggleButtonHoverBg;
+        border-color: $toggleButtonHoverBorderColor;
+        color: $toggleButtonTextHoverColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconHoverColor;
+        }
+    }
+
+    &.p-highlight {
+        background: $toggleButtonActiveBg;
+        border-color: $toggleButtonActiveBorderColor;
+        color: $toggleButtonTextActiveColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconActiveColor;
+        }
+
+        &:hover {
+            background: $toggleButtonActiveHoverBg;
+            border-color: $toggleButtonActiveHoverBorderColor;
+            color: $toggleButtonTextActiveHoverColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveHoverColor;
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/input/_treeselect.scss b/src/styles/primevue-base/components/input/_treeselect.scss
new file mode 100644
index 00000000..0c65ac31
--- /dev/null
+++ b/src/styles/primevue-base/components/input/_treeselect.scss
@@ -0,0 +1,91 @@
+@use 'sass:math';
+
+.p-treeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    .p-treeselect-label {
+        padding: $inputPadding;
+        transition: $formElementTransition;
+
+        &.p-placeholder {
+            color: $inputPlaceholderTextColor;
+        }
+    }
+
+    &.p-treeselect-chip {
+        .p-treeselect-token {
+            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
+        }
+    }
+
+    .p-treeselect-trigger {
+        background: transparent;
+        color: $inputIconColor;
+        width: $inputGroupAddOnMinWidth;
+        border-top-right-radius: $borderRadius;
+        border-bottom-right-radius: $borderRadius;
+    }
+    
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+}
+
+.p-inputwrapper-filled {
+    &.p-treeselect {
+        &.p-treeselect-chip {
+            .p-treeselect-label {
+                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+            }
+        }
+    }
+}
+
+.p-treeselect-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-treeselect-items-wrapper {
+        .p-tree {
+            border: 0 none;
+        }
+
+        .p-treeselect-empty-message {
+            padding: $inputListItemPadding;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+        }
+    }
+}
+
+.p-input-filled {
+    .p-treeselect {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+    
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/menu/_breadcrumb.scss b/src/styles/primevue-base/components/menu/_breadcrumb.scss
new file mode 100644
index 00000000..5dd68b9f
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_breadcrumb.scss
@@ -0,0 +1,42 @@
+.p-breadcrumb {
+    background: $breadcrumbBg;
+    border: $breadcrumbBorder;
+    border-radius: $borderRadius;
+    padding: $breadcrumbPadding;
+
+    .p-breadcrumb-list {
+        li {
+            .p-menuitem-link {
+                transition: $listItemTransition;
+                border-radius: $borderRadius;
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                .p-menuitem-text {
+                    color: $breadcrumbItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbItemIconColor;
+                }
+            }
+
+            &.p-menuitem-separator {
+                margin: 0 $inlineSpacing 0 $inlineSpacing;
+                color: $breadcrumbSeparatorColor;
+            }
+
+            &:last-child {
+                .p-menuitem-text {
+                    color: $breadcrumbLastItemTextColor;
+                }
+
+                .p-menuitem-icon {
+                    color: $breadcrumbLastItemIconColor;
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_contextmenu.scss b/src/styles/primevue-base/components/menu/_contextmenu.scss
new file mode 100644
index 00000000..88964af2
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_contextmenu.scss
@@ -0,0 +1,39 @@
+.p-contextmenu {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    color: $menuTextColor;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-contextmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        border-radius: $borderRadius;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_dock.scss b/src/styles/primevue-base/components/menu/_dock.scss
new file mode 100644
index 00000000..0a144618
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_dock.scss
@@ -0,0 +1,95 @@
+.p-dock {
+    .p-dock-list-container {
+        background: $dockBg;
+        border: $dockBorder;
+        padding: $dockPadding;
+        border-radius: $dockBorderRadius;
+
+        .p-dock-list {
+            outline: 0 none;
+        }
+    }
+    
+    .p-dock-item {
+        padding: $dockItemPadding;
+        border-radius: $dockItemBorderRadius;
+
+        &.p-focus {
+            @include focused-listitem();
+        }
+    }
+
+    .p-dock-link {
+        width: $dockActionWidth;
+        height: $dockActionHeight;
+    }
+    
+    &.p-dock-top,
+    &.p-dock-bottom {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: 0 $dockSecondItemsMargin;
+        }
+
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: 0 $dockFirstItemsMargin;
+        }
+
+        .p-dock-item-current {
+            margin: 0 $dockCurrentItemMargin;
+        }
+    }
+
+    &.p-dock-left,
+    &.p-dock-right {
+        .p-dock-item-second-prev,
+        .p-dock-item-second-next {
+            margin: $dockSecondItemsMargin 0;
+        }
+        
+        .p-dock-item-prev,
+        .p-dock-item-next {
+            margin: $dockFirstItemsMargin 0;
+        }
+
+        .p-dock-item-current {
+            margin: $dockCurrentItemMargin 0;
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-dock {
+        &.p-dock-top,
+        &.p-dock-bottom {
+            .p-dock-list-container {
+                overflow-x: auto;
+                width: 100%;
+
+                .p-dock-list {
+                    margin: 0 auto;
+                }
+            }
+        }
+
+        &.p-dock-left,
+        &.p-dock-right {
+            .p-dock-list-container {
+                overflow-y: auto;
+                height: 100%;
+
+                .p-dock-list {
+                    margin: auto 0;
+                }
+            }
+        }
+
+        .p-dock-list {
+            .p-dock-item {
+                transform: none;
+                margin: 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/menu/_megamenu.scss b/src/styles/primevue-base/components/menu/_megamenu.scss
new file mode 100644
index 00000000..9c2fd663
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_megamenu.scss
@@ -0,0 +1,55 @@
+.p-megamenu {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-megamenu-root-list {  
+        outline: 0 none;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-megamenu-panel {
+        background: $overlayMenuBg;
+        color: $menuTextColor;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $borderRadius; 
+        border-top-left-radius: $borderRadius; 
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        width: $menuWidth;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+    }
+
+    &.p-megamenu-vertical {
+        width: $menuWidth;
+        padding: $verticalMenuPadding;
+    }
+
+    &.p-megamenu-horizontal {
+        .p-megamenu-root-list {  
+            > .p-menuitem {
+                @include horizontal-rootmenuitem();
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_menu.scss b/src/styles/primevue-base/components/menu/_menu.scss
new file mode 100644
index 00000000..f67c8faf
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_menu.scss
@@ -0,0 +1,33 @@
+.p-menu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    &.p-menu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-submenu-header {
+        margin: $submenuHeaderMargin;
+        padding: $submenuHeaderPadding;
+        color: $submenuHeaderTextColor;
+        background: $submenuHeaderBg;
+        font-weight: $submenuHeaderFontWeight;
+        border-top-right-radius: $submenuHeaderBorderRadius; 
+        border-top-left-radius: $submenuHeaderBorderRadius; 
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_menubar.scss b/src/styles/primevue-base/components/menu/_menubar.scss
new file mode 100644
index 00000000..1fb2d8ac
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_menubar.scss
@@ -0,0 +1,141 @@
+.p-menubar {
+    padding: $horizontalMenuPadding;
+    background: $horizontalMenuBg;
+    color: $horizontalMenuTextColor;
+    border: $horizontalMenuBorder;
+    border-radius: $borderRadius;
+
+    .p-menubar-root-list {
+        outline: 0 none;
+
+        > .p-menuitem {
+            @include horizontal-rootmenuitem();
+        }
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+        width: $menuWidth;
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-icon {
+            font-size: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
+
+@media screen and (max-width: 960px) {
+    .p-menubar {
+        position: relative;
+
+        .p-menubar-button {
+            display: flex;
+            width: $actionIconWidth;
+            height: $actionIconHeight;
+            color: $horizontalMenuRootMenuitemIconColor;
+            border-radius: $actionIconBorderRadius;
+            transition: $actionIconTransition;
+        
+            &:hover {
+                color: $horizontalMenuRootMenuitemIconHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+            }
+        
+            &:focus {
+                @include focused();
+            }
+        }
+
+        .p-menubar-root-list {
+            position: absolute;
+            display: none;
+            padding: $verticalMenuPadding;
+            background: $overlayMenuBg;
+            border: $overlayMenuBorder;
+            box-shadow: $overlayMenuShadow;
+            width: 100%;
+    
+            .p-menuitem-separator {
+                border-top: $divider;
+                margin: $menuSeparatorMargin;
+            }
+    
+            .p-submenu-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+
+            .p-menuitem {
+                width: 100%;
+                position: static;
+
+                .p-menuitem-content {
+                    .p-menuitem-link {
+                        .p-submenu-icon {
+                            margin-left: auto;
+                            transition: transform $transitionDuration;
+                        }
+                    }
+                }
+
+
+                &.p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-180deg);
+                            }
+                        }
+                    }
+                }
+            }
+
+            .p-submenu-list {
+                width: 100%;
+                position: static;
+                box-shadow: none;
+                border: 0 none;
+
+                .p-submenu-icon {
+                    transition: transform $transitionDuration;
+                    transform: rotate(90deg);
+                }
+
+                .p-menuitem-active {
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
+                        }
+                    }
+                }
+            }
+    
+            .p-menuitem {
+                width: 100%;
+                position: static;
+            }
+
+            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+        }
+
+        &.p-menubar-mobile-active .p-menubar-root-list {
+            display: flex;
+            flex-direction: column;
+            top: 100%;
+            left: 0;
+            z-index: 1;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/menu/_panelmenu.scss b/src/styles/primevue-base/components/menu/_panelmenu.scss
new file mode 100644
index 00000000..c5907c5f
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_panelmenu.scss
@@ -0,0 +1,153 @@
+.p-panelmenu {
+    .p-panelmenu-header {
+        outline: 0 none;
+
+        .p-panelmenu-header-content {
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-panelmenu-header-action {
+                color: $accordionHeaderTextColor;
+                padding: $accordionHeaderPadding;
+                font-weight: $accordionHeaderFontWeight;
+
+                .p-submenu-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:focus-visible {
+                .p-panelmenu-header-content {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-panelmenu-header-content {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+                margin-bottom: 0;
+            }
+
+            &:hover {
+                .p-panelmenu-header-content {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-panelmenu-content {
+        padding: $verticalMenuPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        .p-panelmenu-root-list {
+            outline: 0 none;
+        }
+
+        .p-menuitem {
+            @include menuitem();
+
+            .p-menuitem-content {
+                .p-menuitem-link { 
+                    .p-submenu-icon {
+                        margin-right: $inlineSpacing;
+                    }
+                }
+            }
+        }
+
+        .p-menuitem-separator {
+            border-top: $divider;
+            margin: $menuSeparatorMargin;
+        }
+
+        .p-submenu-list:not(.p-panelmenu-root-list) {
+            padding: $treeNodeChildrenPadding;
+        }
+    }
+
+    .p-panelmenu-panel {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-panelmenu-header {
+                .p-panelmenu-header-content {
+                    border-radius: 0;
+                }
+            }
+
+            .p-panelmenu-content {
+                border-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-panelmenu-header-content {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-panelmenu-header {
+                    .p-panelmenu-header-content {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-panelmenu-header:not(.p-highlight) {
+                    .p-panelmenu-header-content {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+
+                .p-panelmenu-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_steps.scss b/src/styles/primevue-base/components/menu/_steps.scss
new file mode 100644
index 00000000..9ad22970
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_steps.scss
@@ -0,0 +1,56 @@
+@use 'sass:math';
+
+.p-steps {
+    .p-steps-item {
+        .p-menuitem-link {
+            background: transparent;
+            transition: $listItemTransition;
+            border-radius: $borderRadius;
+            background: $stepsItemBg;
+
+            .p-steps-number {
+                color: $stepsItemNumberColor;
+                border: $stepsItemBorder;
+                background: $stepsItemBg;
+                min-width: $stepsItemNumberWidth;
+                height: $stepsItemNumberHeight;
+                line-height: $stepsItemNumberHeight;
+                font-size: $stepsItemNumberFontSize;
+                z-index: 1;
+                border-radius: $stepsItemNumberBorderRadius;
+            }
+
+            .p-steps-title {
+                margin-top: $inlineSpacing;
+                color: $stepsItemTextColor;
+            }
+
+            &:not(.p-disabled):focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-highlight {
+            .p-steps-number {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            .p-steps-title {
+                font-weight: $stepsItemActiveFontWeight;
+                color: $textColor;
+            }
+        }
+
+        &:before {
+            content:' ';
+            border-top: $divider;
+            width: 100%;
+            top: 50%;
+            left: 0;
+            display: block;
+            position: absolute;
+            margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_tabmenu.scss b/src/styles/primevue-base/components/menu/_tabmenu.scss
new file mode 100644
index 00000000..b52ac203
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_tabmenu.scss
@@ -0,0 +1,49 @@
+.p-tabmenu {
+    .p-tabmenu-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        .p-tabmenuitem {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-menuitem-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                .p-menuitem-icon {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-menuitem-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-menuitem-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/menu/_tieredmenu.scss b/src/styles/primevue-base/components/menu/_tieredmenu.scss
new file mode 100644
index 00000000..205a241c
--- /dev/null
+++ b/src/styles/primevue-base/components/menu/_tieredmenu.scss
@@ -0,0 +1,43 @@
+.p-tieredmenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    &.p-tieredmenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-tieredmenu-root-list {
+        outline: 0 none;
+    }
+
+    .p-submenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-menuitem {
+        @include menuitem();
+    }
+
+    .p-menuitem-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-submenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/messages/_inlinemessage.scss b/src/styles/primevue-base/components/messages/_inlinemessage.scss
new file mode 100644
index 00000000..ac768d49
--- /dev/null
+++ b/src/styles/primevue-base/components/messages/_inlinemessage.scss
@@ -0,0 +1,64 @@
+.p-inline-message {
+    padding: $inlineMessagePadding;
+    margin: $inlineMessageMargin;
+    border-radius: $borderRadius;
+
+    &.p-inline-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-inline-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $inlineMessageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-inline-message-icon {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-inline-message-icon {
+        font-size: $inlineMessageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-inline-message-text {
+        font-size: $inlineMessageTextFontSize;
+    }
+
+    &.p-inline-message-icon-only {
+        .p-inline-message-icon {
+            margin-right: 0;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/messages/_message.scss b/src/styles/primevue-base/components/messages/_message.scss
new file mode 100644
index 00000000..dfc61d7f
--- /dev/null
+++ b/src/styles/primevue-base/components/messages/_message.scss
@@ -0,0 +1,100 @@
+.p-message {
+    margin: $messageMargin;
+    border-radius: $borderRadius;
+
+    .p-message-wrapper {
+        padding: $messagePadding;
+    }
+
+    .p-message-close {
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        border-radius: $actionIconBorderRadius;
+        background: transparent;
+        transition: $actionIconTransition;
+
+        &:hover {
+            background: rgba(255,255,255,.5);
+        }
+
+        &:focus-visible {
+            @include focused();
+        }
+    
+    }
+
+    &.p-message-info {
+        background: $infoMessageBg;
+        border: $infoMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $infoMessageTextColor;
+
+        .p-message-icon {
+            color: $infoMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $infoMessageIconColor;
+        }
+    }
+
+    &.p-message-success {
+        background: $successMessageBg;
+        border: $successMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $successMessageTextColor;
+
+        .p-message-icon {
+            color: $successMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $successMessageIconColor;
+        }
+    }
+
+    &.p-message-warn {
+        background: $warningMessageBg;
+        border: $warningMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $warningMessageTextColor;
+
+        .p-message-icon {
+            color: $warningMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $warningMessageIconColor;
+        }
+    }
+
+    &.p-message-error {
+        background: $errorMessageBg;
+        border: $errorMessageBorder;
+        border-width: $messageBorderWidth;
+        color: $errorMessageTextColor;
+
+        .p-message-icon {
+            color: $errorMessageIconColor;
+        }
+
+        .p-message-close {
+            color: $errorMessageIconColor;
+        }
+    }
+
+    .p-message-text {
+        font-size: $messageTextFontSize;
+        font-weight: $messageTextFontWeight;
+    }
+
+    .p-message-icon {
+        font-size: $messageIconFontSize;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-icon:not(.p-message-close-icon) {
+        width: $messageIconFontSize;
+        height: $messageIconFontSize;
+    }
+}
diff --git a/src/styles/primevue-base/components/messages/_toast.scss b/src/styles/primevue-base/components/messages/_toast.scss
new file mode 100644
index 00000000..5deb3b5a
--- /dev/null
+++ b/src/styles/primevue-base/components/messages/_toast.scss
@@ -0,0 +1,100 @@
+.p-toast {
+    opacity: $toastOpacity;
+
+    .p-toast-message {
+        margin: $toastMargin;
+        box-shadow: $toastShadow;
+        border-radius: $borderRadius;
+
+        .p-toast-message-content {
+            padding: $toastPadding;
+            border-width: $toastBorderWidth;
+
+            .p-toast-message-text {
+                margin: $toastMessageTextMargin;
+            }
+
+            .p-toast-message-icon {
+                font-size: $toastIconFontSize;
+                
+                &.p-icon {
+                    width: $toastIconFontSize;
+                    height: $toastIconFontSize;
+                }
+            }
+
+            .p-toast-summary {
+                font-weight: $toastTitleFontWeight;
+            }
+
+            .p-toast-detail {
+                margin: $toastDetailMargin;
+            }
+        }
+
+        .p-toast-icon-close {
+            width: $toastIconFontSize;
+            height: $toastIconFontSize;
+            border-radius: $actionIconBorderRadius;
+            background: transparent;
+            transition: $actionIconTransition;
+
+            &:hover {
+                background: rgba(255,255,255,.5);
+            }
+
+            &:focus-visible {
+                @include focused();
+            }
+        }
+
+        &.p-toast-message-info {
+            background: $infoMessageBg;
+            border: $infoMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $infoMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $infoMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-success {
+            background: $successMessageBg;
+            border: $successMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $successMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $successMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-warn {
+            background: $warningMessageBg;
+            border: $warningMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $warningMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $warningMessageIconColor;
+            }
+        }
+
+        &.p-toast-message-error {
+            background: $errorMessageBg;
+            border: $errorMessageBorder;
+            border-width: $messageBorderWidth;
+            color: $errorMessageTextColor;
+
+            .p-toast-message-icon,
+            .p-toast-icon-close {
+                color: $errorMessageIconColor;
+            }
+        }
+
+    }
+}
diff --git a/src/styles/primevue-base/components/misc/_avatar.scss b/src/styles/primevue-base/components/misc/_avatar.scss
new file mode 100644
index 00000000..d169b82b
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_avatar.scss
@@ -0,0 +1,30 @@
+.p-avatar {
+    background-color: $avatarBg;
+    border-radius: $borderRadius;
+
+    &.p-avatar-lg {
+        width: 3rem;
+        height: 3rem;
+        font-size: 1.5rem;
+
+        .p-avatar-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    &.p-avatar-xl {
+        width: 4rem;
+        height: 4rem;
+        font-size: 2rem;
+
+        .p-avatar-icon {
+            font-size: 2rem;
+        }
+    }
+}
+
+.p-avatar-group {
+    .p-avatar {
+        border: 2px solid $panelContentBg;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_badge.scss b/src/styles/primevue-base/components/misc/_badge.scss
new file mode 100644
index 00000000..96467bda
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_badge.scss
@@ -0,0 +1,48 @@
+.p-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+
+    &.p-badge-secondary {
+        background-color: $secondaryButtonBg;
+        color: $secondaryButtonTextColor;
+    }
+
+    &.p-badge-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-badge-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-badge-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-badge-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    &.p-badge-lg {
+        font-size: 1.5 * $badgeFontSize;
+        min-width: 1.5 * $badgeMinWidth;
+        height: 1.5 * $badgeHeight;
+        line-height: 1.5 * $badgeHeight;
+    }
+
+    &.p-badge-xl {
+        font-size: 2 * $badgeFontSize;
+        min-width: 2 * $badgeMinWidth;
+        height: 2 * $badgeHeight;
+        line-height: 2 * $badgeHeight;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_blockui.scss b/src/styles/primevue-base/components/misc/_blockui.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/primevue-base/components/misc/_chip.scss b/src/styles/primevue-base/components/misc/_chip.scss
new file mode 100644
index 00000000..63f70c03
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_chip.scss
@@ -0,0 +1,39 @@
+@use 'sass:math';
+
+.p-chip {
+    background-color: $chipBg;
+    color: $chipTextColor;
+    border-radius: $chipBorderRadius;
+    padding: 0 nth($inputPadding, 2);
+
+    .p-chip-text {
+        line-height: 1.5;
+        margin-top: math.div(nth($inputPadding, 1), 2);
+        margin-bottom: math.div(nth($inputPadding, 1), 2);
+    }
+
+    .p-chip-icon {
+        margin-right: $inlineSpacing;
+    }
+
+    img {
+        width: 1.5 + nth($inputPadding, 1);
+        height: 1.5 + nth($inputPadding, 1);
+        margin-left: -1 * nth($inputPadding, 2);
+        margin-right: $inlineSpacing;
+    }
+
+    .p-chip-remove-icon {
+        margin-left: $inlineSpacing;
+        border-radius: $borderRadius;
+        transition: $actionIconTransition;
+        
+        &:focus-visible {
+            @include focused();
+        }
+
+        &:focus {
+            outline: 0 none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_inplace.scss b/src/styles/primevue-base/components/misc/_inplace.scss
new file mode 100644
index 00000000..8f64b694
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_inplace.scss
@@ -0,0 +1,17 @@
+.p-inplace {
+    .p-inplace-display {
+        padding: $inplacePadding;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+
+        &:not(.p-disabled):hover {
+            background: $inplaceHoverBg;
+            color: $inplaceTextHoverColor;
+        }
+
+        &:focus {
+            @include focused();
+        }
+    }
+}
+
diff --git a/src/styles/primevue-base/components/misc/_progressbar.scss b/src/styles/primevue-base/components/misc/_progressbar.scss
new file mode 100644
index 00000000..7cf0ea68
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_progressbar.scss
@@ -0,0 +1,17 @@
+.p-progressbar {
+    border: $progressBarBorder;
+    height: $progressBarHeight;
+    background: $progressBarBg;
+    border-radius: $borderRadius;
+
+    .p-progressbar-value {
+        border: 0 none;
+        margin: 0;
+        background: $progressBarValueBg;
+    }
+
+    .p-progressbar-label {
+        color: $progressBarValueTextColor;
+        line-height: $progressBarHeight;
+    }
+}
diff --git a/src/styles/primevue-base/components/misc/_progressspinner.scss b/src/styles/primevue-base/components/misc/_progressspinner.scss
new file mode 100644
index 00000000..e6861dde
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_progressspinner.scss
@@ -0,0 +1,49 @@
+.p-progress-spinner-svg {
+    animation: p-progress-spinner-rotate 2s linear infinite;
+}
+
+.p-progress-spinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: $progressSpinnerStrokeColor;
+    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+    stroke-linecap: round;
+}
+
+@keyframes p-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progress-spinner-color {
+    100%,
+    0% {
+        stroke: $progressSpinnerColorOne;
+    }
+    40% {
+        stroke: $progressSpinnerColorTwo;
+    }
+    66% {
+        stroke: $progressSpinnerColorThree;
+    }
+    80%,
+    90% {
+        stroke: $progressSpinnerColorFour;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_scrolltop.scss b/src/styles/primevue-base/components/misc/_scrolltop.scss
new file mode 100644
index 00000000..7a7e11b3
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_scrolltop.scss
@@ -0,0 +1,25 @@
+.p-scrolltop {
+    width: $scrollTopWidth;
+    height: $scrollTopHeight;
+    border-radius: $scrollTopBorderRadius;
+    box-shadow: $inputOverlayShadow;
+    transition: $actionIconTransition;
+
+    &.p-link {
+        background: $scrollTopBg;
+
+        &:hover {
+            background: $scrollTopHoverBg;
+        }
+    }
+
+    .p-scrolltop-icon {
+        font-size: $scrollTopFontSize;
+        color: $scrollTopTextColor;
+
+        &.p-icon {
+            width: $scrollTopFontSize;
+            height: $scrollTopFontSize;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_skeleton.scss b/src/styles/primevue-base/components/misc/_skeleton.scss
new file mode 100644
index 00000000..24b3d920
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_skeleton.scss
@@ -0,0 +1,8 @@
+.p-skeleton {
+    background-color: $skeletonBg;
+    border-radius: $borderRadius;
+
+    &:after {
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_tag.scss b/src/styles/primevue-base/components/misc/_tag.scss
new file mode 100644
index 00000000..2a2453d5
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_tag.scss
@@ -0,0 +1,40 @@
+@use 'sass:math';
+
+.p-tag {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    padding: $tagPadding;
+    border-radius: $borderRadius;
+
+    &.p-tag-success {
+        background-color: $successButtonBg;
+        color: $successButtonTextColor;
+    }
+
+    &.p-tag-info {
+        background-color: $infoButtonBg;
+        color: $infoButtonTextColor;
+    }
+
+    &.p-tag-warning {
+        background-color: $warningButtonBg;
+        color: $warningButtonTextColor;
+    }
+
+    &.p-tag-danger {
+        background-color: $dangerButtonBg;
+        color: $dangerButtonTextColor;
+    }
+
+    .p-tag-icon {
+        margin-right: math.div($inlineSpacing, 2);
+        font-size: $badgeFontSize;
+
+        &.p-icon {
+            width: $badgeFontSize;
+            height: $badgeFontSize;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/misc/_terminal.scss b/src/styles/primevue-base/components/misc/_terminal.scss
new file mode 100644
index 00000000..93a531c4
--- /dev/null
+++ b/src/styles/primevue-base/components/misc/_terminal.scss
@@ -0,0 +1,12 @@
+.p-terminal {
+	background: $panelContentBg;
+	color: $panelContentTextColor;
+	border: $panelContentBorder;
+	padding: $panelContentPadding;
+
+	.p-terminal-input {
+		font-family: var(--font-family);
+		font-feature-settings: var(--font-feature-settings, normal);
+		font-size: $inputTextFontSize;
+	}
+}
diff --git a/src/styles/primevue-base/components/multimedia/_galleria.scss b/src/styles/primevue-base/components/multimedia/_galleria.scss
new file mode 100644
index 00000000..3fc3531e
--- /dev/null
+++ b/src/styles/primevue-base/components/multimedia/_galleria.scss
@@ -0,0 +1,151 @@
+.p-galleria {
+    .p-galleria-close {
+        margin: $galleriaCloseIconMargin;
+        background: $galleriaCloseIconBg;
+        color: $galleriaCloseIconColor;
+        width: $galleriaCloseIconWidth;
+        height: $galleriaCloseIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaCloseIconBorderRadius;
+
+        .p-galleria-close-icon {
+            font-size: $galleriaCloseIconFontSize;
+        }
+
+        .p-icon {
+            width: $galleriaCloseIconFontSize;
+            height: $galleriaCloseIconFontSize;
+        }
+
+        &:hover {
+            background: $galleriaCloseIconHoverBg;
+            color: $galleriaCloseIconHoverColor;
+        }
+    }
+
+    .p-galleria-item-nav {
+        background: $galleriaItemNavigatorBg;
+        color: $galleriaItemNavigatorColor;
+        width: $galleriaItemNavigatorWidth;
+        height: $galleriaItemNavigatorHeight;
+        transition: $actionIconTransition;
+        border-radius: $galleriaItemNavigatorBorderRadius;
+        margin: $galleriaItemNavigatorMargin;
+
+        .p-galleria-item-prev-icon,
+        .p-galleria-item-next-icon {
+            font-size: $galleriaItemNavigatorFontSize;
+        }
+
+        .p-icon {
+            width: $galleriaCloseIconFontSize;
+            height: $galleriaCloseIconFontSize;
+        }
+
+        &:not(.p-disabled) {
+            &:hover {
+                background: $galleriaItemNavigatorHoverBg;
+                color: $galleriaItemNavigatorHoverColor;
+            }
+        }
+    }
+
+    .p-galleria-caption {
+        background: $galleriaCaptionBg;
+        color: $galleriaCaptionTextColor;
+        padding: $galleriaCaptionPadding;
+    }
+
+    .p-galleria-indicators {
+        padding: $galleriaIndicatorsPadding;
+
+        .p-galleria-indicator {
+            button {
+                background-color: $galleriaIndicatorBg;
+                width: $galleriaIndicatorWidth;
+                height: $galleriaIndicatorHeight;
+                transition: $actionIconTransition;
+                border-radius: $galleriaIndicatorBorderRadius;
+
+                &:hover {
+                    background: $galleriaIndicatorHoverBg;
+                }
+            }
+
+            &.p-highlight {
+                button {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-galleria-indicators-bottom,
+    &.p-galleria-indicators-top {
+        .p-galleria-indicator {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicators-left,
+    &.p-galleria-indicators-right {
+        .p-galleria-indicator {
+            margin-bottom: $inlineSpacing;
+        }
+    }
+
+    &.p-galleria-indicator-onitem {
+        .p-galleria-indicators {
+            background: $galleriaIndicatorsBgOnItem;
+
+            .p-galleria-indicator {
+                button {
+                    background: $galleriaIndicatorBgOnItem;
+
+                    &:hover {
+                        background: $galleriaIndicatorHoverBgOnItem;
+                    }
+                }
+
+                &.p-highlight {
+                    button {
+                        background: $highlightBg;
+                        color: $highlightTextColor;
+                    }
+                }
+            }
+        }
+    }
+
+    .p-galleria-thumbnail-container {
+        background: $galleriaThumbnailContainerBg;
+        padding: $galleriaThumbnailContainerPadding;
+
+        .p-galleria-thumbnail-prev,
+        .p-galleria-thumbnail-next {
+            margin: $inlineSpacing;
+            background-color: $galleriaThumbnailNavigatorBg;
+            color: $galleriaThumbnailNavigatorColor;
+            width: $galleriaThumbnailNavigatorWidth;
+            height: $galleriaThumbnailNavigatorHeight;
+            transition: $actionIconTransition;
+            border-radius: $galleriaThumbnailNavigatorBorderRadius;
+
+            &:hover {
+                background: $galleriaThumbnailNavigatorHoverBg;
+                color: $galleriaThumbnailNavigatorHoverColor;
+            }
+        }
+
+        .p-galleria-thumbnail-item-content {
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+}
+
+.p-galleria-mask {
+    --maskbg: #{$galleriaMaskBg};
+}
diff --git a/src/styles/primevue-base/components/multimedia/_image.scss b/src/styles/primevue-base/components/multimedia/_image.scss
new file mode 100644
index 00000000..9a9d0e94
--- /dev/null
+++ b/src/styles/primevue-base/components/multimedia/_image.scss
@@ -0,0 +1,54 @@
+.p-image-mask {
+    --maskbg: #{$imageMaskBg};
+}
+
+.p-image-preview-indicator {
+    background-color: transparent;
+    color: $imagePreviewIndicatorColor;
+    transition: $actionIconTransition;
+
+    .p-icon {
+        width: $imagePreviewActionIconFontSize;
+        height: $imagePreviewActionIconFontSize;
+    }
+}
+
+.p-image-preview-container {
+    &:hover {
+        > .p-image-preview-indicator {
+            background-color: $imagePreviewIndicatorBg;
+        }
+    }
+}
+
+.p-image-toolbar {
+    padding: $imagePreviewToolbarPadding;
+}
+
+.p-image-action.p-link {
+    color: $imagePreviewActionIconColor;
+    background-color: $imagePreviewActionIconBg;
+    width: $imagePreviewActionIconWidth;
+    height: $imagePreviewActionIconHeight;
+    border-radius: $imagePreviewActionIconBorderRadius;
+    transition: $actionIconTransition;
+    margin-right: $inlineSpacing;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    &:hover {
+        color: $imagePreviewActionIconHoverColor;
+        background-color: $imagePreviewActionIconHoverBg;
+    }
+
+    i {
+        font-size: $imagePreviewActionIconFontSize;
+    }
+
+    .p-icon {
+        width: $imagePreviewActionIconFontSize;
+        height: $imagePreviewActionIconFontSize;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/overlay/_confirmpopup.scss b/src/styles/primevue-base/components/overlay/_confirmpopup.scss
new file mode 100644
index 00000000..dbb136e2
--- /dev/null
+++ b/src/styles/primevue-base/components/overlay/_confirmpopup.scss
@@ -0,0 +1,72 @@
+.p-confirm-popup {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-confirm-popup-content {
+        padding: $confirmPopupContentPadding;
+    }
+
+    .p-confirm-popup-footer {
+        text-align: right;
+        padding: $confirmPopupFooterPadding;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+
+            &:last-child {
+                margin: 0;
+            }
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-confirm-popup-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+
+    .p-confirm-popup-icon {
+        font-size: $primeIconFontSize * 1.5;
+
+        &.p-icon {
+            width: $primeIconFontSize * 1.5;
+            height: $primeIconFontSize * 1.5;
+        }
+    }
+
+    .p-confirm-popup-message {
+        margin-left: $inlineSpacing * 2;
+    }
+}
diff --git a/src/styles/primevue-base/components/overlay/_dialog.scss b/src/styles/primevue-base/components/overlay/_dialog.scss
new file mode 100644
index 00000000..1c39f182
--- /dev/null
+++ b/src/styles/primevue-base/components/overlay/_dialog.scss
@@ -0,0 +1,64 @@
+.p-dialog {
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+    border: $overlayContentBorder;
+
+    .p-dialog-header {
+        border-bottom: $dialogHeaderBorder;
+        background: $dialogHeaderBg;
+        color: $dialogHeaderTextColor;
+        padding: $dialogHeaderPadding;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-dialog-title {
+            font-weight: $dialogHeaderFontWeight;
+            font-size: $dialogHeaderFontSize;
+        }
+
+        .p-dialog-header-icon {
+            @include action-icon();
+            margin-right: $inlineSpacing;
+            
+            &:last-child {
+                margin-right: 0;
+            }            
+        }
+    }
+
+    .p-dialog-content {
+        background: $overlayContentBg;
+        color: $panelContentTextColor;
+        padding: $dialogContentPadding;
+
+        &:last-of-type {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-dialog-footer {
+        border-top:  $dialogFooterBorder;
+        background: $overlayContentBg;
+        color: $panelFooterTextColor;
+        padding: $dialogFooterPadding;
+        text-align: right;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+
+        button {
+            margin: 0 $inlineSpacing 0 0;
+            width: auto;
+        }
+    }
+
+    &.p-confirm-dialog {
+        .p-confirm-dialog-icon {
+            font-size: $primeIconFontSize * 2;
+        }
+
+        .p-confirm-dialog-message:not(:first-child) {
+            margin-left: $inlineSpacing * 2;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/overlay/_overlaypanel.scss b/src/styles/primevue-base/components/overlay/_overlaypanel.scss
new file mode 100644
index 00000000..e6350413
--- /dev/null
+++ b/src/styles/primevue-base/components/overlay/_overlaypanel.scss
@@ -0,0 +1,64 @@
+@use 'sass:math';
+
+.p-overlaypanel {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    border-radius: $borderRadius;
+    box-shadow: $overlayContainerShadow;
+
+    .p-overlaypanel-content {
+        padding: $panelContentPadding;
+    }
+
+    .p-overlaypanel-close {
+        background: $buttonBg;
+        color: $buttonTextColor;
+        width: $actionIconWidth;
+        height: $actionIconHeight;
+        transition: $actionIconTransition;
+        border-radius: $actionIconBorderRadius;
+        position: absolute;
+        top: math.div(-1 * $actionIconWidth, 2);
+        right: math.div(-1 * $actionIconWidth, 2);
+
+        &:enabled:hover {
+            background: $buttonHoverBg;
+            color: $buttonTextHoverColor;
+        }
+    }
+
+    &:after {
+        border: solid transparent;
+        border-color: rgba($overlayContentBg, 0);
+        border-bottom-color: $overlayContentBg;
+    }
+
+    &:before {
+        border: solid transparent;
+
+        @if (nth($overlayContentBorder, 2) == 'none') {
+            border-color: rgba($overlayContentBg, 0);
+            border-bottom-color: scale-color($overlayContentBg, $lightness: -5%);
+        }
+        @else {
+            border-color: rgba(nth($overlayContentBorder, 3), 0);
+            border-bottom-color: scale-color(nth($overlayContentBorder, 3), $lightness: -5%);
+        }
+    }
+
+    &.p-overlaypanel-flipped {
+        &:after {
+            border-top-color: $overlayContentBg;
+        }
+
+        &:before {
+            @if (nth($overlayContentBorder, 2) == 'none') {
+                border-top-color: $overlayContentBg;
+            }
+            @else {
+                border-top-color: nth($overlayContentBorder, 3);
+            }
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/overlay/_sidebar.scss b/src/styles/primevue-base/components/overlay/_sidebar.scss
new file mode 100644
index 00000000..c40a0bbb
--- /dev/null
+++ b/src/styles/primevue-base/components/overlay/_sidebar.scss
@@ -0,0 +1,23 @@
+.p-sidebar {
+    background: $overlayContentBg;
+    color: $panelContentTextColor;
+    border: $overlayContentBorder;
+    box-shadow: $overlayContainerShadow;
+
+    .p-sidebar-header {
+        padding: $panelHeaderPadding;
+
+        .p-sidebar-close,
+        .p-sidebar-icon {
+            @include action-icon();
+        }
+
+        & + .p-sidebar-content {
+            padding-top: 0;
+        }
+    }
+
+    .p-sidebar-content {
+        padding: $panelContentPadding;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/overlay/_tooltip.scss b/src/styles/primevue-base/components/overlay/_tooltip.scss
new file mode 100644
index 00000000..47cce55d
--- /dev/null
+++ b/src/styles/primevue-base/components/overlay/_tooltip.scss
@@ -0,0 +1,33 @@
+.p-tooltip {
+    .p-tooltip-text {
+        background: $tooltipBg;
+        color: $tooltipTextColor;
+        padding: $tooltipPadding;
+        box-shadow: $inputOverlayShadow;
+        border-radius: $borderRadius;
+    }
+
+    &.p-tooltip-right {
+        .p-tooltip-arrow {
+            border-right-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-left {
+        .p-tooltip-arrow {
+            border-left-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-top {
+        .p-tooltip-arrow {
+            border-top-color: $tooltipBg;
+        }
+    }
+
+    &.p-tooltip-bottom {
+        .p-tooltip-arrow {
+            border-bottom-color: $tooltipBg;
+        }
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_accordion.scss b/src/styles/primevue-base/components/panel/_accordion.scss
new file mode 100644
index 00000000..9d922aec
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_accordion.scss
@@ -0,0 +1,118 @@
+.p-accordion {
+    .p-accordion-header {
+        .p-accordion-header-link {
+            padding: $accordionHeaderPadding;
+            border: $accordionHeaderBorder;
+            color: $accordionHeaderTextColor;
+            background: $accordionHeaderBg;
+            font-weight: $accordionHeaderFontWeight;
+            border-radius: $borderRadius;
+            transition: $listItemTransition;
+
+            .p-accordion-toggle-icon {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &:not(.p-disabled) {
+            .p-accordion-header-link {
+                &:focus-visible {
+                    @include focused-inset();
+                }
+            }
+        }
+
+        &:not(.p-highlight):not(.p-disabled):hover {
+            .p-accordion-header-link {
+                background: $accordionHeaderHoverBg;
+                border-color: $accordionHeaderHoverBorderColor;
+                color: $accordionHeaderTextHoverColor;
+            }
+        }
+
+        &:not(.p-disabled).p-highlight {
+            .p-accordion-header-link {
+                background: $accordionHeaderActiveBg;
+                border-color: $accordionHeaderActiveBorderColor;
+                color: $accordionHeaderTextActiveColor;
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:hover {
+                .p-accordion-header-link {
+                    border-color: $accordionHeaderActiveHoverBorderColor;
+                    background: $accordionHeaderActiveHoverBg;
+                    color: $accordionHeaderTextActiveHoverColor;
+                }
+            }
+        }
+    }
+
+    .p-accordion-content {
+        padding: $accordionContentPadding;
+        border: $accordionContentBorder;
+        background: $accordionContentBg;
+        color: $accordionContentTextColor;
+        border-top: 0;
+        border-top-right-radius: 0;
+        border-top-left-radius: 0;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-accordion-tab {
+        margin-bottom: $accordionSpacing;
+
+        @if $accordionSpacing == 0 {
+            .p-accordion-header {
+                .p-accordion-header-link {
+                    border-radius: 0;
+                }
+            }
+
+            .p-accordion-content {
+                border-bottom-right-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &:not(:first-child) {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top: 0 none;
+                    }
+
+                    &:not(.p-highlight):not(.p-disabled):hover,
+                    &:not(.p-disabled).p-highlight:hover {
+                        .p-accordion-header-link {
+                            border-top: 0 none;
+                        }
+                    }
+                }
+            }
+
+            &:first-child {
+                .p-accordion-header {
+                    .p-accordion-header-link {
+                        border-top-right-radius: $borderRadius;
+                        border-top-left-radius: $borderRadius;
+                    }
+                }
+            }
+
+            &:last-child {
+                .p-accordion-header:not(.p-highlight) {
+                    .p-accordion-header-link {
+                        border-bottom-right-radius: $borderRadius;
+                        border-bottom-left-radius: $borderRadius;
+                    }
+                }
+                
+                .p-accordion-content {
+                    border-bottom-right-radius: $borderRadius;
+                    border-bottom-left-radius: $borderRadius;
+                }
+            }
+        } 
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_card.scss b/src/styles/primevue-base/components/panel/_card.scss
new file mode 100644
index 00000000..f3331245
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_card.scss
@@ -0,0 +1,30 @@
+.p-card {
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    box-shadow: $cardShadow;
+    border-radius: $borderRadius;
+
+    .p-card-body {
+        padding: $cardBodyPadding;
+    }
+
+    .p-card-title {
+        font-size: $cardTitleFontSize;
+        font-weight: $cardTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+    }
+
+    .p-card-subtitle {
+        font-weight: $cardSubTitleFontWeight;
+        margin-bottom: $inlineSpacing;
+        color: $cardSubTitleColor;
+    }
+
+    .p-card-content {
+        padding: $cardContentPadding;
+    }
+
+    .p-card-footer {
+        padding: $cardFooterPadding;
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_divider.scss b/src/styles/primevue-base/components/panel/_divider.scss
new file mode 100644
index 00000000..0f1719e8
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_divider.scss
@@ -0,0 +1,31 @@
+.p-divider {
+    .p-divider-content {
+        background-color: $panelContentBg;
+    }
+
+    &.p-divider-horizontal {
+        margin: $dividerHorizontalMargin;
+        padding: $dividerHorizontalPadding;
+
+        &:before {
+            border-top: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: 0 $inlineSpacing;
+        }
+    }
+
+    &.p-divider-vertical {
+        margin: $dividerVerticalMargin;
+        padding: $dividerVerticalPadding;
+
+        &:before {
+            border-left: $dividerSize $dividerColor;
+        }
+
+        .p-divider-content {
+            padding: $inlineSpacing 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/panel/_fieldset.scss b/src/styles/primevue-base/components/panel/_fieldset.scss
new file mode 100644
index 00000000..2c59df68
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_fieldset.scss
@@ -0,0 +1,51 @@
+.p-fieldset {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    border-radius: $borderRadius;
+
+    .p-fieldset-legend {
+        padding: $panelHeaderPadding;
+        border: $panelHeaderBorder;
+        color: $panelHeaderTextColor;
+        background: $panelHeaderBg;
+        font-weight: $panelHeaderFontWeight;
+        border-radius: $borderRadius;
+    }
+
+    &.p-fieldset-toggleable {
+        .p-fieldset-legend {
+            padding: 0;
+            transition: $actionIconTransition;
+
+            a {
+                padding: $panelHeaderPadding;
+                color: $panelHeaderTextColor;
+                border-radius: $borderRadius;
+                transition: $listItemTransition;
+
+                .p-fieldset-toggler {
+                    margin-right: $inlineSpacing;
+                }
+
+                &:focus-visible {
+                    @include focused();
+                }
+
+                &:hover {
+                    color: $panelHeaderTextHoverColor;
+                }
+            }
+
+            &:hover {
+                background: $panelHeaderHoverBg;
+                border-color: $panelHeaderHoverBorderColor;
+                color: $panelHeaderTextHoverColor;
+            }
+        }
+    }
+
+    .p-fieldset-content {
+        padding: $panelContentPadding;
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_panel.scss b/src/styles/primevue-base/components/panel/_panel.scss
new file mode 100644
index 00000000..eb07e1ba
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_panel.scss
@@ -0,0 +1,47 @@
+.p-panel {
+    .p-panel-header {
+        border: $panelHeaderBorder;
+        padding: $panelHeaderPadding;
+        background: $panelHeaderBg;
+        color: $panelHeaderTextColor;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-panel-title {
+            font-weight: $panelHeaderFontWeight;
+        }
+
+        .p-panel-header-icon {
+            @include action-icon();
+        }
+    }
+
+    &.p-panel-toggleable {
+        .p-panel-header {
+            padding: $panelToggleableHeaderPadding;
+        }
+    }
+
+    .p-panel-content {
+        padding: $panelContentPadding;
+        border: $panelContentBorder;
+        background: $panelContentBg;
+        color: $panelContentTextColor;
+        border-top: 0 none;
+        
+        &:last-child {
+            border-bottom-right-radius: $borderRadius;
+            border-bottom-left-radius: $borderRadius;
+        }
+    }
+
+    .p-panel-footer {
+        padding: $panelFooterPadding;
+        border: $panelFooterBorder;
+        background: $panelFooterBg;
+        color: $panelFooterTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+        border-top: 0 none;
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_scrollpanel.scss b/src/styles/primevue-base/components/panel/_scrollpanel.scss
new file mode 100644
index 00000000..192a3a20
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_scrollpanel.scss
@@ -0,0 +1,11 @@
+.p-scrollpanel {
+    .p-scrollpanel-bar {
+        background: $scrollPanelTrackBg;
+        border: $scrollPanelTrackBorder;
+        transition: $formElementTransition;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/panel/_splitter.scss b/src/styles/primevue-base/components/panel/_splitter.scss
new file mode 100644
index 00000000..ec5041f7
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_splitter.scss
@@ -0,0 +1,24 @@
+.p-splitter {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    border-radius: $borderRadius;
+    color: $panelContentTextColor;
+
+    .p-splitter-gutter {
+        transition: $actionIconTransition;
+        background: $splitterGutterBg;
+        
+        .p-splitter-gutter-handle {
+            background: $splitterGutterHandleBg;
+            transition: $formElementTransition;
+            
+            &:focus-visible {
+                @include focused();
+            }
+        }
+    }
+
+    .p-splitter-gutter-resizing {
+        background: $splitterGutterHandleBg;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/primevue-base/components/panel/_tabview.scss b/src/styles/primevue-base/components/panel/_tabview.scss
new file mode 100644
index 00000000..b8a4b59d
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_tabview.scss
@@ -0,0 +1,66 @@
+.p-tabview {
+    .p-tabview-nav {
+        background: $tabviewNavBg;
+        border: $tabviewNavBorder;
+        border-width: $tabviewNavBorderWidth;
+
+        li {
+            margin-right: $tabviewHeaderSpacing;
+
+            .p-tabview-nav-link {
+                border: $tabviewHeaderBorder;
+                border-width: $tabviewHeaderBorderWidth;
+                border-color: $tabviewHeaderBorderColor;
+                background: $tabviewHeaderBg;
+                color: $tabviewHeaderTextColor;
+                padding: $tabviewHeaderPadding;
+                font-weight: $tabviewHeaderFontWeight;
+                border-top-right-radius: $borderRadius;
+                border-top-left-radius: $borderRadius;
+                transition: $listItemTransition;
+                margin: $tabviewHeaderMargin;
+
+                &:not(.p-disabled):focus-visible {
+                    @include focused-inset();
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled):hover {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderHoverBg;
+                    border-color: $tabviewHeaderHoverBorderColor;
+                    color: $tabviewHeaderTextHoverColor;
+                }
+            }
+
+            &.p-highlight {
+                .p-tabview-nav-link {
+                    background: $tabviewHeaderActiveBg;
+                    border-color: $tabviewHeaderActiveBorderColor;
+                    color: $tabviewHeaderTextActiveColor;
+                }
+            }
+        }
+    }
+    
+    .p-tabview-nav-btn.p-link {
+        background: $tabviewHeaderActiveBg;
+        color: $tabviewHeaderTextActiveColor;
+        width: $buttonIconOnlyWidth;
+        box-shadow: $raisedButtonShadow;
+        border-radius: 0;
+
+        &:focus-visible {
+            @include focused-inset();
+        }
+    }
+
+    .p-tabview-panels {
+        background: $tabviewContentBg;
+        padding: $tabviewContentPadding;
+        border: $tabviewContentBorder;
+        color: $tabviewContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+}
diff --git a/src/styles/primevue-base/components/panel/_toolbar.scss b/src/styles/primevue-base/components/panel/_toolbar.scss
new file mode 100644
index 00000000..78d74150
--- /dev/null
+++ b/src/styles/primevue-base/components/panel/_toolbar.scss
@@ -0,0 +1,11 @@
+.p-toolbar {
+    background: $panelHeaderBg;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-radius: $borderRadius;
+    gap: $inlineSpacing;
+
+    .p-toolbar-separator {
+        margin: 0 $inlineSpacing;
+    }
+}
diff --git a/src/styles/themes/_extensions.scss b/src/styles/themes/_extensions.scss
new file mode 100644
index 00000000..c7a22bb1
--- /dev/null
+++ b/src/styles/themes/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the primevue base theme should be defined here */
diff --git a/src/styles/themes/_fonts.scss b/src/styles/themes/_fonts.scss
new file mode 100644
index 00000000..20f38ff8
--- /dev/null
+++ b/src/styles/themes/_fonts.scss
@@ -0,0 +1,3 @@
+// Configuration for the font-face of the theme, defaults to the system font so left as blank
+@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Raleway:500,500i,700,700i&display=swap');
\ No newline at end of file
diff --git a/src/styles/themes/_variables.scss b/src/styles/themes/_variables.scss
new file mode 100644
index 00000000..d21f3832
--- /dev/null
+++ b/src/styles/themes/_variables.scss
@@ -0,0 +1,10 @@
+$primaryLightColor: rgba(212, 0, 0, 0.5) !default;
+$primaryColor: #D40000 !default;
+$primaryDarkColor: #C40000 !default;
+$primaryDarkerColor: #B40000 !default;
+$primaryTextColor: #ffffff !default;
+$primaryAccentBg: #fcbfbf !default;
+
+$highlightBg: $primaryColor !default;
+$highlightTextColor: $primaryTextColor !default;
+$highlightFocusBg: darken($primaryColor, 8%) !default;
diff --git a/src/styles/themes/_vendor_extensions.scss b/src/styles/themes/_vendor_extensions.scss
new file mode 100644
index 00000000..45aaa1d3
--- /dev/null
+++ b/src/styles/themes/_vendor_extensions.scss
@@ -0,0 +1,16 @@
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+@layer primevue {
+    .fc {
+        &.fc-theme-standard {
+            .fc-highlight {
+                background: $primaryAccentBg;
+            }
+        }
+    }
+    
+    .p-fileupload {
+        .p-fileupload-content.p-fileupload-highlight {
+            background-color: $primaryAccentBg;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/themes/sudosos-dark/_variables_dark.scss b/src/styles/themes/sudosos-dark/_variables_dark.scss
new file mode 100644
index 00000000..cec02140
--- /dev/null
+++ b/src/styles/themes/sudosos-dark/_variables_dark.scss
@@ -0,0 +1,889 @@
+$colors: (
+    "blue": #0d6efd,
+    "green": #198754,
+    "yellow": #ffc107,
+    "cyan": #0dcaf0,
+    "pink": #d63384,
+    "indigo": #6610f2,
+    "teal": #20c997,
+    "orange": #fd7e14,
+    "bluegray": #7C8EA7,
+    "purple": #6f42c1,
+    "red": #DC3545,
+    "primary": $primaryColor
+);
+
+//shades
+$shade000:rgba(255,255,255,.87) !default;  //text color
+$shade100:rgba(255,255,255,.60) !default;  //text secondary color
+$shade200:#7789a1 !default;  
+$shade300:#687c97 !default;  
+$shade400:#5a6472 !default;
+$shade500:#4c5866 !default;
+$shade600:#3f4b5b !default;  //input bg, border, divider
+$shade700:#343e4d !default;  
+$shade800:#2a323d !default;  //elevated surface
+$shade900:#20262e !default;  //ground surface
+
+$hoverBg:rgba(255,255,255,.04) !default;
+
+//global
+$fontFamily: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade000 !default;
+$textSecondaryColor:$shade100 !default;
+$borderRadius:4px !default;
+$transitionDuration:.15s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:color $transitionDuration, box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade600 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.65 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#f19ea6 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth: 2rem !default;
+$actionIconHeight: 2rem !default;
+$actionIconBg: transparent !default;
+$actionIconBorder: 0 none !default;
+$actionIconColor: $shade100 !default;
+$actionIconHoverBg: transparent !default;
+$actionIconHoverBorderColor: transparent !default;
+$actionIconHoverColor: $shade000 !default;
+$actionIconBorderRadius: 50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade900 !default;
+$inputTextColor:$shade000 !default;
+$inputIconColor:$shade100 !default;
+$inputBorder:1px solid $shade600 !default;
+$inputHoverBorderColor:$shade600 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade100 !default;
+$inputFilledBg:$shade600 !default;
+$inputFilledHoverBg:$shade600 !default;
+$inputFilledFocusBg:$shade600 !default;
+
+//input groups
+$inputGroupBg:$shade800 !default;
+$inputGroupTextColor:$shade100 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade800 !default;
+$inputListTextColor:$shade000 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1.5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade000 !default;
+$inputListItemHoverBg:$hoverBg !default;
+$inputListItemTextHoverColor:$shade000 !default;
+$inputListItemFocusBg:rgba(255,255,255,.12) !default;
+$inputListItemTextFocusColor:$shade000 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade800 !default;
+$inputListHeaderTextColor:$shade000 !default;
+$inputListHeaderBorder:1px solid $shade600 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid $shade600 !default;
+$inputOverlayShadow:none !default;
+
+//password
+$passwordMeterBg:$shade600 !default;
+$passwordWeakBg:#f19ea6 !default;
+$passwordMediumBg:#ffe082 !default;
+$passwordStrongBg:#9fdaa8 !default;
+
+//button
+$buttonPadding:.5rem .75rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$hoverBg !default;
+$plainButtonActiveBgColor:rgba(255,255,255,.16) !default;
+
+$secondaryButtonBg:#6c757d !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid #6c757d !default;
+$secondaryButtonHoverBg:#5a6268 !default;
+$secondaryButtonTextHoverColor:#ffffff !default;
+$secondaryButtonHoverBorderColor:#5a6268 !default;
+$secondaryButtonActiveBg:#545b62 !default;
+$secondaryButtonTextActiveColor:#ffffff !default;
+$secondaryButtonActiveBorderColor:#4e555b !default;
+$secondaryButtonFocusShadow:0 0 0 1px rgba(130,138,145,.5) !default;
+
+$infoButtonBg:#7fd8e6 !default;
+$infoButtonTextColor:#151515 !default;
+$infoButtonBorder:1px solid #4cc8db !default;
+$infoButtonHoverBg:#4cc8db !default;
+$infoButtonTextHoverColor:#151515 !default;
+$infoButtonHoverBorderColor:#26bdd3 !default;
+$infoButtonActiveBg:#26bdd3 !default;
+$infoButtonTextActiveColor:#151515 !default;
+$infoButtonActiveBorderColor:#00b2cc !default;
+$infoButtonFocusShadow:0 0 0 1px #b1e8f0 !default;
+
+$successButtonBg:#9fdaa8 !default;
+$successButtonTextColor:#151515 !default;
+$successButtonBorder:1px solid #78cc86 !default;
+$successButtonHoverBg:#78cc86 !default;
+$successButtonTextHoverColor:#151515 !default;
+$successButtonHoverBorderColor:#5ac06c !default;
+$successButtonActiveBg:#5ac06c !default;
+$successButtonTextActiveColor:#151515 !default;
+$successButtonActiveBorderColor:#3cb553 !default;
+$successButtonFocusShadow:0 0 0 1px #c5e8ca !default;
+
+$warningButtonBg:#ffe082 !default;
+$warningButtonTextColor:#151515 !default;
+$warningButtonBorder:1px solid #ffd54f !default;
+$warningButtonHoverBg:#ffd54f !default;
+$warningButtonTextHoverColor:#151515 !default;
+$warningButtonHoverBorderColor:#ffca28 !default;
+$warningButtonActiveBg:#ffca28 !default;
+$warningButtonTextActiveColor:#151515 !default;
+$warningButtonActiveBorderColor:#ffc107 !default;
+$warningButtonFocusShadow:0 0 0 1px #ffecb3 !default;
+
+$helpButtonBg:#b7a2e0 !default;
+$helpButtonTextColor:#151515 !default;
+$helpButtonBorder:1px solid #9a7cd4 !default;
+$helpButtonHoverBg:#9a7cd4 !default;
+$helpButtonTextHoverColor:#151515 !default;
+$helpButtonHoverBorderColor:#845fca !default;
+$helpButtonActiveBg:#845fca !default;
+$helpButtonTextActiveColor:#151515 !default;
+$helpButtonActiveBorderColor:#6d43c0 !default;
+$helpButtonFocusShadow:0 0 0 1px #d3c7ec !default;
+
+$dangerButtonBg:#f19ea6 !default;
+$dangerButtonTextColor:#151515 !default;
+$dangerButtonBorder:1px solid #e97984 !default;
+$dangerButtonHoverBg:#e97984 !default;
+$dangerButtonTextHoverColor:#151515 !default;
+$dangerButtonHoverBorderColor:#f75965 !default;
+$dangerButtonActiveBg:#f75965 !default;
+$dangerButtonTextActiveColor:#151515 !default;
+$dangerButtonActiveBorderColor:#fd464e !default;
+$dangerButtonFocusShadow:0 0 0 1px #ffd0d9 !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryDarkColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 1px $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:1px solid $shade600 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:1px solid $shade600 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:$shade800 !default;
+$colorPickerBorder:1px solid $shade600 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:#6c757d !default;
+$toggleButtonBorder:1px solid #6c757d !default;
+$toggleButtonTextColor:#ffffff !default;
+$toggleButtonIconColor:#ffffff !default;
+$toggleButtonHoverBg:#5a6268 !default;
+$toggleButtonHoverBorderColor:#545b62 !default;
+$toggleButtonTextHoverColor:#ffffff !default;
+$toggleButtonIconHoverColor:#ffffff !default;
+$toggleButtonActiveBg:#545b62 !default;
+$toggleButtonActiveBorderColor:#4e555b !default;
+$toggleButtonTextActiveColor:#ffffff !default;
+$toggleButtonIconActiveColor:#ffffff !default;
+$toggleButtonActiveHoverBg:#545b62 !default;
+$toggleButtonActiveHoverBorderColor:#4e555b !default;
+$toggleButtonTextActiveHoverColor:#ffffff !default;
+$toggleButtonIconActiveHoverColor:#ffffff !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$hoverBg !default;
+$inplaceTextHoverColor:$shade000 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#f19ea6 !default;
+$ratingCancelIconHoverColor:#f19ea6 !default;
+$ratingStarIconOffColor:$shade000 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade600 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:$borderRadius !default;
+$sliderHandleHoverBorderColor:$primaryDarkColor !default;
+$sliderHandleHoverBg:$primaryDarkColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:0 !default;
+$calendarBg:$shade800 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade000 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade800 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade600 !default;
+$calendarHeaderTextColor:$shade000 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:$borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$hoverBg !default;
+$calendarCellDateTodayBg:transparent !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$primaryColor !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:$borderRadius !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:$borderRadius !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade600 !default;
+$inputSwitchHandleOffBg:$shade100 !default;
+$inputSwitchSliderOffHoverBg:$shade600 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryColor !default;
+$inputSwitchHandleOnBg:$primaryTextColor !default;
+
+//panel
+$panelHeaderBorderColor: $shade600 !default;
+$panelHeaderBorder:1px solid $shade600 !default;
+$panelHeaderBg:$shade800 !default;
+$panelHeaderTextColor:$shade000 !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem 1.25rem !default;
+$panelToggleableHeaderPadding:.5rem 1.25rem !default;
+
+$panelHeaderHoverBg:$hoverBg !default;
+$panelHeaderHoverBorderColor:$shade600 !default;
+$panelHeaderTextHoverColor:$shade000 !default;
+
+$panelContentBorderColor: $shade600 !default;
+$panelContentBorder:1px solid $shade600 !default;
+$panelContentBg:$shade800 !default;
+$panelContentEvenRowBg:rgba(255,255,255,.02) !default;
+$panelContentTextColor:$shade000 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade600 !default;
+$panelFooterBg:$shade800 !default;
+$panelFooterTextColor:$shade000 !default;
+$panelFooterPadding:.5rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$hoverBg !default;
+$accordionHeaderHoverBorderColor:$shade600 !default;
+$accordionHeaderTextHoverColor:$shade000 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade600 !default;
+$accordionHeaderTextActiveColor:$shade000 !default;
+
+$accordionHeaderActiveHoverBg:$hoverBg !default;
+$accordionHeaderActiveHoverBorderColor:$shade600 !default;
+$accordionHeaderTextActiveHoverColor:$shade000 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid $shade600 !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid !default;
+$tabviewHeaderBorderWidth:1px !default;
+$tabviewHeaderBorderColor:$shade800 $shade800 $shade600 $shade800 !default;
+$tabviewHeaderBg:$shade800 !default;
+$tabviewHeaderTextColor:$shade100 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:.75rem 1rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:$shade800 !default;
+$tabviewHeaderHoverBorderColor:$shade600 !default;
+$tabviewHeaderTextHoverColor:$shade000 !default;
+
+$tabviewHeaderActiveBg:$shade800 !default;
+$tabviewHeaderActiveBorderColor:$shade600 $shade600 $shade800 $shade600 !default;
+$tabviewHeaderTextActiveColor:$shade100 !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding: 2rem 1rem !default;
+$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
+$fileUploadFileBorder: 1px solid $shade600 !default;
+$fileUploadFilePadding: 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade600 !default;
+
+//card
+$cardBodyPadding:1.5rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade100 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade800 !default;
+$paginatorTextColor:$primaryColor !default;
+$paginatorBorder:solid $shade600 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.75rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:transparent !default;
+$paginatorElementBorder:1px solid $shade600 !default;
+$paginatorElementIconColor:$primaryColor !default;
+$paginatorElementHoverBg:$hoverBg !default;
+$paginatorElementHoverBorderColor:$shade600 !default;
+$paginatorElementIconHoverColor:$primaryColor !default;
+$paginatorElementBorderRadius:0 !default;
+$paginatorElementMargin:0 0 0 -1px !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:solid $shade600 !default;
+$tableHeaderBorderWidth:1px 0 0 0 !default;
+$tableHeaderBg:$shade800 !default;
+$tableHeaderTextColor:$shade100 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade800 !default;
+$tableHeaderCellTextColor:$shade000 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid $shade600 !default;
+$tableHeaderCellBorderWidth:1px 0 2px 0 !default;
+$tableHeaderCellHoverBg:$hoverBg !default;
+$tableHeaderCellTextHoverColor:$shade000 !default;
+$tableHeaderCellIconColor:$shade100 !default;
+$tableHeaderCellIconHoverColor:$shade000 !default;
+$tableHeaderCellHighlightBg:$shade800 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$hoverBg !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade800 !default;
+$tableBodyRowTextColor:$shade000 !default;
+$tableBodyRowEvenBg:#2f3641 !default;
+$tableBodyRowHoverBg:$hoverBg !default;
+$tableBodyRowTextHoverColor:$shade000 !default;
+$tableBodyCellBorder:1px solid $shade600 !default;
+$tableBodyCellBorderWidth:1px 0 0 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade800 !default;
+$tableFooterCellTextColor:$shade000 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid $shade600 !default;
+$tableFooterCellBorderWidth:1px 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+
+$tableFooterBorder:1px solid $shade600 !default;
+$tableFooterBorderWidth:1px 0 1px 0 !default;
+$tableFooterBg:$shade800 !default;
+$tableFooterTextColor:$shade000 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:0 !default;
+$tableBottomPaginatorBorderWidth:1px 0 0 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:1px solid $shade600 !default;
+$dataViewListItemBorderWidth:1px 0 0 0 !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:0.286rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade600 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade600 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.25rem !default;
+$messageBorderWidth:1px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 !default;
+$toastShadow:0 0.25rem 0.75rem rgba(0,0,0,.1) !default;
+$toastOpacity:1 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#cce5ff !default;
+$infoMessageBorder:solid #b8daff !default;
+$infoMessageTextColor:#004085 !default;
+$infoMessageIconColor:#004085 !default;
+$successMessageBg:#d4edda !default;
+$successMessageBorder:solid #c3e6cb !default;
+$successMessageTextColor:#155724 !default;
+$successMessageIconColor:#155724 !default;
+$warningMessageBg:#fff3cd !default;
+$warningMessageBorder:solid #ffeeba !default;
+$warningMessageTextColor:#856404 !default;
+$warningMessageIconColor:#856404 !default;
+$errorMessageBg:#f8d7da !default;
+$errorMessageBorder:solid #f5c6cb !default;
+$errorMessageTextColor:#721c24 !default;
+$errorMessageIconColor:#721c24 !default;
+
+//overlays
+$overlayContentBorder:1px solid $shade600 !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:none !default;
+
+//dialog
+$dialogHeaderBg:$shade800 !default;
+$dialogHeaderBorder:1px solid $shade600 !default;
+$dialogHeaderTextColor:$shade000 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1rem !default;
+$dialogContentPadding:1rem !default;
+$dialogFooterBorder:1px solid $shade600 !default;
+$dialogFooterPadding:1rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade600 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid $shade600 !default;
+$stepsItemTextColor:$shade100 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade000 !default;
+$stepsItemNumberBorderRadius:$borderRadius !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar, progressspinner
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade600 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+$progressSpinnerStrokeColor:$errorMessageTextColor !default;
+$progressSpinnerColorOne:$errorMessageTextColor !default;
+$progressSpinnerColorTwo:$infoMessageTextColor !default;
+$progressSpinnerColorThree:$successMessageTextColor !default;
+$progressSpinnerColorFour:$warningMessageTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade800 !default;
+$menuBorder:1px solid $shade600 !default;
+$menuTextColor:$shade000 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade000 !default;
+$menuitemIconColor:$shade100 !default;
+$menuitemTextHoverColor:$shade000 !default;
+$menuitemIconHoverColor:$shade000 !default;
+$menuitemHoverBg:$hoverBg !default;
+$menuitemTextFocusColor:$shade000 !default;
+$menuitemIconFocusColor:$shade000 !default;
+$menuitemFocusBg:rgba(255,255,255,.12) !default;
+$menuitemTextActiveColor:$shade000 !default;
+$menuitemIconActiveColor:$shade000 !default;
+$menuitemActiveBg:$shade900 !default;
+$menuitemActiveFocusBg:$shade900 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade800 !default;
+$submenuHeaderTextColor:$shade000 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid $shade600 !default;
+$overlayMenuShadow:none !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$shade700 !default;
+$breadcrumbBorder:0 none !default;
+$breadcrumbItemTextColor:$primaryColor !default;
+$breadcrumbItemIconColor:$primaryColor !default;
+$breadcrumbLastItemTextColor:$shade000 !default;
+$breadcrumbLastItemIconColor:$shade000 !default;
+$breadcrumbSeparatorColor:$shade000 !default;
+
+$horizontalMenuPadding:.5rem 1rem !default;
+$horizontalMenuBg:$shade700 !default;
+$horizontalMenuBorder:0 none !default;
+$horizontalMenuTextColor:$shade100 !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:$shade100 !default;
+$horizontalMenuRootMenuitemIconColor:$shade100 !default;
+$horizontalMenuRootMenuitemTextHoverColor:$shade000 !default;
+$horizontalMenuRootMenuitemIconHoverColor:$shade000 !default;
+$horizontalMenuRootMenuitemHoverBg:transparent !default;
+$horizontalMenuRootMenuitemTextActiveColor:$shade000 !default;
+$horizontalMenuRootMenuitemIconActiveColor:$shade000 !default;
+$horizontalMenuRootMenuitemActiveBg:transparent !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade600 !default;
+$carouselIndicatorHoverBg:$hoverBg !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade000 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:$borderRadius !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:$borderRadius !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:$borderRadius !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade600 !default;
+
+//avatar
+$avatarBg:$shade600 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade600 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+$chipFocusBg:$shade500 !default;
+$chipFocusTextColor:$textColor !default;
+
+//scrollTop
+$scrollTopBg:$primaryColor !default;
+$scrollTopHoverBg:$primaryDarkColor !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$highlightTextColor !default;
+
+//skeleton
+$skeletonBg:rgba(255,255,255,.06) !default;
+$skeletonAnimationBg:rgba(255,255,255,.04) !default;
+
+//splitter
+$splitterGutterBg:rgba(255,255,255,.04) !default;
+$splitterGutterHandleBg:$shade600 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade600 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockItemBorderRadius:$borderRadius !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    font-family:$fontFamily;
+    --font-family:$fontFamily;
+    --surface-a:#{$shade800};
+    --surface-b:#{$shade900};
+    --surface-c:#{$hoverBg};
+    --surface-d:#{$shade600};
+    --surface-e:#{$shade800};
+    --surface-f:#{$shade800};
+    --text-color:#{$shade000};
+    --text-color-secondary:#{$shade100};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --surface-0: #20262e;
+    --surface-50: #363c43;
+    --surface-100: #4d5158;
+    --surface-200: #63676d;
+    --surface-300: #797d82;
+    --surface-400: #909397;
+    --surface-500: #a6a8ab;
+    --surface-600: #bcbec0;
+    --surface-700: #d2d4d5;
+    --surface-800: #e9e9ea;
+    --surface-900: #ffffff;
+    --gray-50:#e9e9ea;
+    --gray-100: #d2d4d5;
+    --gray-200: #bcbec0;
+    --gray-300: #a6a8ab;
+    --gray-400: #909397;
+    --gray-500: #797d82;
+    --gray-600: #63676d;
+    --gray-700: #4d5158;
+    --gray-800: #363c43;
+    --gray-900: #20262e;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#20262e;
+    --surface-section:#20262e;
+    --surface-card:#2a323d;
+    --surface-overlay:#2a323d;
+    --surface-border:#3f4b5b;
+    --surface-hover:rgba(255,255,255,.04);
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: dark;
+}
diff --git a/src/styles/themes/sudosos-dark/theme.scss b/src/styles/themes/sudosos-dark/theme.scss
new file mode 100644
index 00000000..8c9e11f1
--- /dev/null
+++ b/src/styles/themes/sudosos-dark/theme.scss
@@ -0,0 +1,6 @@
+@import '../variables';
+@import './_variables_dark';
+@import '../_fonts';
+@import '../../primevue-base/_components';
+@import '../_vendor_extensions';
+@import '../_extensions';
\ No newline at end of file
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
new file mode 100644
index 00000000..ae54b314
--- /dev/null
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -0,0 +1,889 @@
+$colors: (
+    "blue": #0d6efd,
+    "green": #198754,
+    "yellow": #ffc107,
+    "cyan": #0dcaf0,
+    "pink": #d63384,
+    "indigo": #6610f2,
+    "teal": #20c997,
+    "orange": #fd7e14,
+    "bluegray": #7C8EA7,
+    "purple": #6f42c1,
+    "red": #DC3545,
+    "primary": $primaryColor
+);
+
+//reused color variables
+$shade000:#ffffff !default;              //surface
+// $shade100:#efefef !default;              //header background
+// $shade000:#f8f8f8 !default;              //surface
+$shade100:#f8f8f8 !default;              //header background
+$shade200:#efefef !default;              //hover background
+$shade300:#d9d9d9 !default;              //border, divider
+$shade400:#ced4da !default;              //input border
+$shade500:#adb5bd !default;              //unused
+$shade600:#6c757d !default;              //text secondary color
+$shade700:#495057 !default;              //input text color
+$shade800:#343a40 !default;              //unused
+$shade900:#212529 !default;              //text color
+
+//global
+$fontFamily: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
+$fontSize:1rem !default;
+$fontWeight:normal !default;
+$textColor:$shade900 !default;
+$textSecondaryColor:$shade600 !default;
+$borderRadius:4px !default;
+$transitionDuration:.15s !default;
+$formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
+$actionIconTransition:box-shadow $transitionDuration !default;
+$listItemTransition:box-shadow $transitionDuration !default;
+$primeIconFontSize:1rem !default;
+$divider:1px solid $shade300 !default;
+$inlineSpacing:.5rem !default;
+$disabledOpacity:.65 !default;
+$maskBg:rgba(0, 0, 0, 0.4) !default;
+$loadingIconFontSize:2rem !default;
+$errorColor:#dc3545 !default;
+
+//scale
+$scaleSM:0.875 !default;
+$scaleLG:1.25 !default;
+
+//focus
+$focusOutlineColor:$primaryLightColor !default;
+$focusOutline:0 none !default;
+$focusOutlineOffset:0 !default;
+$focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//action icons
+$actionIconWidth:2rem !default;
+$actionIconHeight:2rem !default;
+$actionIconBg:transparent !default;
+$actionIconBorder:0 none !default;
+$actionIconColor:$shade600 !default;
+$actionIconHoverBg:transparent !default;
+$actionIconHoverBorderColor:transparent !default;
+$actionIconHoverColor:$shade700 !default;
+$actionIconBorderRadius:50% !default;
+
+//input field (e.g. inputtext, spinner, inputmask)
+$inputPadding:.5rem .75rem !default;
+$inputTextFontSize:1rem !default;
+$inputBg:$shade000 !default;
+$inputTextColor:$shade700 !default;
+$inputIconColor:$shade700 !default;
+$inputBorder:1px solid $shade400 !default;
+$inputHoverBorderColor:$shade400 !default;
+$inputFocusBorderColor:$primaryColor !default;
+$inputErrorBorderColor:$errorColor !default;
+$inputPlaceholderTextColor:$shade600 !default;
+$inputFilledBg:$shade100 !default;
+$inputFilledHoverBg:$shade100 !default;
+$inputFilledFocusBg:$shade100 !default;
+
+//input groups
+$inputGroupBg:$shade200 !default;
+$inputGroupTextColor:$shade700 !default;
+$inputGroupAddOnMinWidth:2.357rem !default;
+
+//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
+$inputListBg:$shade000 !default;
+$inputListTextColor:$shade900 !default;
+$inputListBorder:$inputBorder !default;
+$inputListPadding:.5rem 0 !default;
+$inputListItemPadding:.5rem 1.5rem !default;
+$inputListItemBg:transparent !default;
+$inputListItemTextColor:$shade900 !default;
+$inputListItemHoverBg:$shade200 !default;
+$inputListItemTextHoverColor:$shade900 !default;
+$inputListItemFocusBg:$shade300 !default;
+$inputListItemTextFocusColor:$shade900 !default;
+$inputListItemBorder:0 none !default;
+$inputListItemBorderRadius:0 !default;
+$inputListItemMargin:0 !default;
+$inputListItemFocusShadow:inset 0 0 0 0.15rem $focusOutlineColor !default;
+$inputListHeaderPadding:.75rem 1.5rem !default;
+$inputListHeaderMargin:0 !default;
+$inputListHeaderBg:$shade100 !default;
+$inputListHeaderTextColor:$shade900 !default;
+$inputListHeaderBorder:1px solid $shade300 !default;
+
+//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
+$inputOverlayBg:$inputListBg !default;
+$inputOverlayHeaderBg:$inputListHeaderBg !default;
+$inputOverlayBorder:1px solid rgba(0,0,0,.15) !default;
+$inputOverlayShadow:none !default;
+
+//password
+$passwordMeterBg:$shade200 !default;
+$passwordWeakBg:#dc3545 !default;
+$passwordMediumBg:#ffc107 !default;
+$passwordStrongBg:#28a745 !default;
+
+//button
+$buttonPadding:.5rem .75rem !default;
+$buttonIconOnlyWidth:2.357rem !default;
+$buttonIconOnlyPadding:.5rem 0 !default;
+$buttonBg:$primaryColor !default;
+$buttonTextColor:$primaryTextColor !default;
+$buttonBorder:1px solid $primaryColor !default;
+$buttonHoverBg:$primaryDarkColor !default;
+$buttonTextHoverColor:$primaryTextColor !default;
+$buttonHoverBorderColor:$primaryDarkColor !default;
+$buttonActiveBg:$primaryDarkerColor !default;
+$buttonTextActiveColor:$primaryTextColor !default;
+$buttonActiveBorderColor:$primaryDarkerColor !default;
+$raisedButtonShadow:0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12) !default;
+$roundedButtonBorderRadius:2rem !default;
+
+$textButtonHoverBgOpacity:.04 !default;
+$textButtonActiveBgOpacity:.16 !default;
+$outlinedButtonBorder:1px solid !default;
+$plainButtonTextColor:$textSecondaryColor !default;
+$plainButtonHoverBgColor:$shade200 !default;
+$plainButtonActiveBgColor:$shade300 !default;
+
+$secondaryButtonBg:#6c757d !default;
+$secondaryButtonTextColor:#ffffff !default;
+$secondaryButtonBorder:1px solid #6c757d !default;
+$secondaryButtonHoverBg:#5a6268 !default;
+$secondaryButtonTextHoverColor:#ffffff !default;
+$secondaryButtonHoverBorderColor:#5a6268 !default;
+$secondaryButtonActiveBg:#545b62 !default;
+$secondaryButtonTextActiveColor:#ffffff !default;
+$secondaryButtonActiveBorderColor:#4e555b !default;
+$secondaryButtonFocusShadow:0 0 0 0.2rem rgba(130,138,145,.5) !default;
+
+$infoButtonBg:#17a2b8 !default;
+$infoButtonTextColor:#ffffff !default;
+$infoButtonBorder:1px solid #17a2b8 !default;
+$infoButtonHoverBg:#138496 !default;
+$infoButtonTextHoverColor:#ffffff !default;
+$infoButtonHoverBorderColor:#117a8b !default;
+$infoButtonActiveBg:#138496 !default;
+$infoButtonTextActiveColor:#ffffff !default;
+$infoButtonActiveBorderColor:#117a8b !default;
+$infoButtonFocusShadow:0 0 0 0.2rem rgba(58,176,195,.5) !default;
+
+$successButtonBg:#28a745 !default;
+$successButtonTextColor:#ffffff !default;
+$successButtonBorder:1px solid #28a745 !default;
+$successButtonHoverBg:#218838 !default;
+$successButtonTextHoverColor:#ffffff !default;
+$successButtonHoverBorderColor:#1e7e34 !default;
+$successButtonActiveBg:#1e7e34 !default;
+$successButtonTextActiveColor:#ffffff !default;
+$successButtonActiveBorderColor:#1c7430 !default;
+$successButtonFocusShadow:0 0 0 0.2rem rgba(72,180,97,.5) !default;
+
+$warningButtonBg:#ffc107 !default;
+$warningButtonTextColor:#212529 !default;
+$warningButtonBorder:1px solid #ffc107 !default;
+$warningButtonHoverBg:#e0a800 !default;
+$warningButtonTextHoverColor:#212529 !default;
+$warningButtonHoverBorderColor:#d39e00 !default;
+$warningButtonActiveBg:#d39e00 !default;
+$warningButtonTextActiveColor:#212529 !default;
+$warningButtonActiveBorderColor:#c69500 !default;
+$warningButtonFocusShadow:0 0 0 0.2rem rgba(222,170,12,.5) !default;
+
+$helpButtonBg:#6f42c1 !default;
+$helpButtonTextColor:#ffffff !default;
+$helpButtonBorder:1px solid #6f42c1 !default;
+$helpButtonHoverBg:#633bad !default;
+$helpButtonTextHoverColor:#ffffff !default;
+$helpButtonHoverBorderColor:#58349a !default;
+$helpButtonActiveBg:#58349a !default;
+$helpButtonTextActiveColor:#ffffff !default;
+$helpButtonActiveBorderColor:#4d2e87 !default;
+$helpButtonFocusShadow:0 0 0 0.2rem #d3c6ec !default;
+
+$dangerButtonBg:#dc3545 !default;
+$dangerButtonTextColor:#ffffff !default;
+$dangerButtonBorder:1px solid #dc3545 !default;
+$dangerButtonHoverBg:#c82333 !default;
+$dangerButtonTextHoverColor:#ffffff !default;
+$dangerButtonHoverBorderColor:#bd2130 !default;
+$dangerButtonActiveBg:#bd2130 !default;
+$dangerButtonTextActiveColor:#ffffff !default;
+$dangerButtonActiveBorderColor:#b21f2d !default;
+$dangerButtonFocusShadow:0 0 0 0.2rem rgba(225,83,97,.5) !default;
+
+$linkButtonColor:$primaryColor !default;
+$linkButtonHoverColor:$primaryDarkColor !default;
+$linkButtonTextHoverDecoration:underline !default;
+$linkButtonFocusShadow:0 0 0 0.2rem $focusOutlineColor !default;
+
+//checkbox
+$checkboxWidth:20px !default;
+$checkboxHeight:20px !default;
+$checkboxBorder:2px solid $shade400 !default;
+$checkboxIconFontSize:14px !default;
+$checkboxActiveBorderColor:$primaryColor !default;
+$checkboxActiveBg:$primaryColor !default;
+$checkboxIconActiveColor:$primaryTextColor !default;
+$checkboxActiveHoverBg:$primaryDarkerColor !default;
+$checkboxIconActiveHoverColor:$primaryTextColor !default;
+$checkboxActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//radiobutton
+$radiobuttonWidth:20px !default;
+$radiobuttonHeight:20px !default;
+$radiobuttonBorder:2px solid $shade400 !default;
+$radiobuttonIconSize:12px !default;
+$radiobuttonActiveBorderColor:$primaryColor !default;
+$radiobuttonActiveBg:$primaryColor !default;
+$radiobuttonIconActiveColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBg:$primaryDarkerColor !default;
+$radiobuttonIconActiveHoverColor:$primaryTextColor !default;
+$radiobuttonActiveHoverBorderColor:$primaryDarkerColor !default;
+
+//colorpicker
+$colorPickerPreviewWidth:2rem !default;
+$colorPickerPreviewHeight:2rem !default;
+$colorPickerBg:#212529 !default;
+$colorPickerBorder:1px solid #212529 !default;
+$colorPickerHandleColor:$shade000 !default;
+
+//togglebutton
+$toggleButtonBg:#6c757d !default;
+$toggleButtonBorder:1px solid #6c757d !default;
+$toggleButtonTextColor:#ffffff !default;
+$toggleButtonIconColor:#ffffff !default;
+$toggleButtonHoverBg:#5a6268 !default;
+$toggleButtonHoverBorderColor:#545b62 !default;
+$toggleButtonTextHoverColor:#ffffff !default;
+$toggleButtonIconHoverColor:#ffffff !default;
+$toggleButtonActiveBg:#545b62 !default;
+$toggleButtonActiveBorderColor:#4e555b !default;
+$toggleButtonTextActiveColor:#ffffff !default;
+$toggleButtonIconActiveColor:#ffffff !default;
+$toggleButtonActiveHoverBg:#545b62 !default;
+$toggleButtonActiveHoverBorderColor:#4e555b !default;
+$toggleButtonTextActiveHoverColor:#ffffff !default;
+$toggleButtonIconActiveHoverColor:#ffffff !default;
+
+//inplace
+$inplacePadding:$inputPadding !default;
+$inplaceHoverBg:$shade200 !default;
+$inplaceTextHoverColor:$shade900 !default;
+
+//rating
+$ratingIconFontSize:1.143rem !default;
+$ratingCancelIconColor:#dc3545 !default;
+$ratingCancelIconHoverColor:#dc3545 !default;
+$ratingStarIconOffColor:$shade700 !default;
+$ratingStarIconOnColor:$primaryColor !default;
+$ratingStarIconHoverColor:$primaryColor !default;
+
+//slider
+$sliderBg:$shade200 !default;
+$sliderBorder:0 none !default;
+$sliderHorizontalHeight:.286rem !default;
+$sliderVerticalWidth:0.286rem !default;
+$sliderHandleWidth:1.143rem !default;
+$sliderHandleHeight:1.143rem !default;
+$sliderHandleBg:$primaryColor !default;
+$sliderHandleBorder:2px solid $primaryColor !default;
+$sliderHandleBorderRadius:$borderRadius !default;
+$sliderHandleHoverBorderColor:$primaryDarkColor !default;
+$sliderHandleHoverBg:$primaryDarkColor !default;
+$sliderRangeBg:$primaryColor !default;
+
+//calendar
+$calendarTableMargin:.5rem 0 !default;
+$calendarPadding:0 !default;
+$calendarBg:$shade100 !default;
+$calendarInlineBg:$calendarBg !default;
+$calendarTextColor:$shade900 !default;
+$calendarBorder:$inputListBorder !default;
+$calendarOverlayBorder:$inputOverlayBorder !default;
+
+$calendarHeaderPadding:.5rem !default;
+$calendarHeaderBg:$shade100 !default;
+$calendarInlineHeaderBg:$calendarBg !default;
+$calendarHeaderBorder:1px solid $shade300 !default;
+$calendarHeaderTextColor:$shade900 !default;
+$calendarHeaderFontWeight:600 !default;
+$calendarHeaderCellPadding:.5rem !default;
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+$calendarCellDatePadding:.5rem !default;
+$calendarCellDateWidth:2.5rem !default;
+$calendarCellDateHeight:2.5rem !default;
+$calendarCellDateBorderRadius:$borderRadius !default;
+$calendarCellDateBorder:1px solid transparent !default;
+$calendarCellDateHoverBg:$shade200 !default;
+$calendarCellDateTodayBg:$shade400 !default;
+$calendarCellDateTodayBorderColor:transparent !default;
+$calendarCellDateTodayTextColor:$shade900 !default;
+
+$calendarButtonBarPadding:1rem 0 !default;
+$calendarTimePickerPadding:.5rem !default;
+$calendarTimePickerElementPadding:0 .5rem !default;
+$calendarTimePickerTimeFontSize:1.25rem !default;
+
+$calendarBreakpoint:769px !default;
+$calendarCellDatePaddingSM:0 !default;
+
+//input switch
+$inputSwitchWidth:3rem !default;
+$inputSwitchHeight:1.75rem !default;
+$inputSwitchBorderRadius:$borderRadius !default;
+$inputSwitchHandleWidth:1.250rem !default;
+$inputSwitchHandleHeight:1.250rem !default;
+$inputSwitchHandleBorderRadius:$borderRadius !default;
+$inputSwitchSliderPadding:.25rem !default;
+$inputSwitchSliderOffBg:$shade400 !default;
+$inputSwitchHandleOffBg:$shade000 !default;
+$inputSwitchSliderOffHoverBg:$shade400 !default;
+$inputSwitchSliderOnBg:$primaryColor !default;
+$inputSwitchSliderOnHoverBg:$primaryColor !default;
+$inputSwitchHandleOnBg:$shade000 !default;
+
+//panel
+$panelHeaderBorderColor: $shade300 !default;
+$panelHeaderBorder:1px solid $shade300 !default;
+$panelHeaderBg:$shade100 !default;
+$panelHeaderTextColor:$primaryColor !default;
+$panelHeaderFontWeight:600 !default;
+$panelHeaderPadding:1rem 1.25rem !default;
+$panelToggleableHeaderPadding:.5rem 1.25rem !default;
+
+$panelHeaderHoverBg:$shade200 !default;
+$panelHeaderHoverBorderColor:$shade300 !default;
+$panelHeaderTextHoverColor:$shade900 !default;
+
+$panelContentBorderColor: $shade300 !default;
+$panelContentBorder:1px solid $shade300 !default;
+$panelContentBg:$shade100 !default;
+$panelContentEvenRowBg:rgba(0,0,0,.05) !default;
+$panelContentTextColor:$shade900 !default;
+$panelContentPadding:1.25rem !default;
+
+$panelFooterBorder:1px solid $shade300 !default;
+$panelFooterBg:$shade100 !default;
+$panelFooterTextColor:$shade900 !default;
+$panelFooterPadding:.5rem 1.25rem !default;
+
+//accordion
+$accordionSpacing:0 !default;
+$accordionHeaderBorder:$panelHeaderBorder !default;
+$accordionHeaderBg:$panelHeaderBg !default;
+$accordionHeaderTextColor:$panelHeaderTextColor !default;
+$accordionHeaderFontWeight:$panelHeaderFontWeight !default;
+$accordionHeaderPadding:$panelHeaderPadding !default;
+
+$accordionHeaderHoverBg:$shade200 !default;
+$accordionHeaderHoverBorderColor:$shade300 !default;
+$accordionHeaderTextHoverColor:$shade900 !default;
+
+$accordionHeaderActiveBg:$panelHeaderBg !default;
+$accordionHeaderActiveBorderColor:$shade300 !default;
+$accordionHeaderTextActiveColor:$shade900 !default;
+
+$accordionHeaderActiveHoverBg:$shade200 !default;
+$accordionHeaderActiveHoverBorderColor:$shade300 !default;
+$accordionHeaderTextActiveHoverColor:$shade900 !default;
+
+$accordionContentBorder:$panelContentBorder !default;
+$accordionContentBg:$panelContentBg !default;
+$accordionContentTextColor:$panelContentTextColor !default;
+$accordionContentPadding:$panelContentPadding !default;
+
+//tabview
+$tabviewNavBorder:1px solid #dee2e6 !default;
+$tabviewNavBorderWidth:0 0 1px 0 !default;
+$tabviewNavBg:transparent !default;
+
+$tabviewHeaderSpacing:0 !default;
+$tabviewHeaderBorder:solid !default;
+$tabviewHeaderBorderWidth:1px !default;
+$tabviewHeaderBorderColor:$shade100 $shade100 #dee2e6 $shade100 !default;
+$tabviewHeaderBg:$shade100 !default;
+$tabviewHeaderTextColor:$shade600 !default;
+$tabviewHeaderFontWeight:$panelHeaderFontWeight !default;
+$tabviewHeaderPadding:.75rem 1rem !default;
+$tabviewHeaderMargin:0 0 -1px 0 !default;
+
+$tabviewHeaderHoverBg:$shade100 !default;
+$tabviewHeaderHoverBorderColor:#dee2e6 !default;
+$tabviewHeaderTextHoverColor:$shade600 !default;
+
+$tabviewHeaderActiveBg:$shade100 !default;
+$tabviewHeaderActiveBorderColor:#dee2e6 #dee2e6 $shade100 #dee2e6 !default;
+$tabviewHeaderTextActiveColor:$shade700 !default;
+
+$tabviewContentBorder:0 none !default;
+$tabviewContentBg:$panelContentBg !default;
+$tabviewContentTextColor:$panelContentTextColor !default;
+$tabviewContentPadding:$panelContentPadding !default;
+
+//upload
+$fileUploadProgressBarHeight:.25rem !default;
+$fileUploadContentPadding: 2rem 1rem !default;
+$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
+$fileUploadFileBorder: 1px solid $shade300 !default;
+$fileUploadFilePadding: 1rem !default;
+
+//scrollpanel
+$scrollPanelTrackBorder:0 none !default;
+$scrollPanelTrackBg:$shade100 !default;
+
+//card
+$cardBodyPadding:1.5rem !default;
+$cardTitleFontSize:1.5rem !default;
+$cardTitleFontWeight:700 !default;
+$cardSubTitleFontWeight:400 !default;
+$cardSubTitleColor:$shade600 !default;
+$cardContentPadding:1rem 0 !default;
+$cardFooterPadding:1rem 0 0 0 !default;
+$cardShadow:0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12) !default;
+
+//editor
+$editorToolbarBg:$panelHeaderBg !default;
+$editorToolbarBorder:$panelHeaderBorder !default;
+$editorToolbarPadding:$panelHeaderPadding !default;
+$editorToolbarIconColor:$textSecondaryColor !default;
+$editorToolbarIconHoverColor:$textColor !default;
+$editorIconActiveColor:$primaryColor !default;
+$editorContentBorder:$panelContentBorder !default;
+$editorContentBg:$panelContentBg !default;
+
+//paginator
+$paginatorBg:$shade000 !default;
+$paginatorTextColor:$primaryColor !default;
+$paginatorBorder:solid $shade300 !default;
+$paginatorBorderWidth:0 !default;
+$paginatorPadding:.75rem !default;
+$paginatorElementWidth:$buttonIconOnlyWidth !default;
+$paginatorElementHeight:$buttonIconOnlyWidth !default;
+$paginatorElementBg:$shade000 !default;
+$paginatorElementBorder:1px solid #dee2e6 !default;
+$paginatorElementIconColor:$primaryColor !default;
+$paginatorElementHoverBg:$shade200 !default;
+$paginatorElementHoverBorderColor:#dee2e6 !default;
+$paginatorElementIconHoverColor:$primaryColor !default;
+$paginatorElementBorderRadius:0 !default;
+$paginatorElementMargin:0 0 0 -1px !default;
+$paginatorElementPadding:0 !default;
+
+//table
+$tableHeaderBorder:solid #dee2e6 !default;
+$tableHeaderBorderWidth:1px 0 0 0 !default;
+$tableHeaderBg:$shade200 !default;
+$tableHeaderTextColor:$shade900 !default;
+$tableHeaderFontWeight:600 !default;
+$tableHeaderPadding:1rem 1rem !default;
+
+$tableHeaderCellPadding:1rem 1rem !default;
+$tableHeaderCellBg:$shade100 !default;
+$tableHeaderCellTextColor:$shade900 !default;
+$tableHeaderCellFontWeight:600 !default;
+$tableHeaderCellBorder:1px solid #dee2e6 !default;
+$tableHeaderCellBorderWidth:1px 0 2px 0 !default;
+$tableHeaderCellHoverBg:$shade200 !default;
+$tableHeaderCellTextHoverColor:$shade900 !default;
+$tableHeaderCellIconColor:$shade600 !default;
+$tableHeaderCellIconHoverColor:$shade600 !default;
+$tableHeaderCellHighlightBg:$shade100 !default;
+$tableHeaderCellHighlightTextColor:$primaryColor !default;
+$tableHeaderCellHighlightHoverBg:$shade200 !default;
+$tableHeaderCellHighlightTextHoverColor:$primaryColor !default;
+$tableSortableColumnBadgeSize:1.143rem !default;
+
+$tableBodyRowBg:$shade100 !default;
+$tableBodyRowTextColor:$shade900 !default;
+$tableBodyRowEvenBg:rgba(0,0,0,.05) !default;
+$tableBodyRowHoverBg:$shade200 !default;
+$tableBodyRowTextHoverColor:$shade900 !default;
+$tableBodyCellBorder:1px solid #dee2e6 !default;
+$tableBodyCellBorderWidth:1px 0 0 0 !default;
+$tableBodyCellPadding:1rem 1rem !default;
+
+$tableFooterCellPadding:1rem 1rem !default;
+$tableFooterCellBg:$shade100 !default;
+$tableFooterCellTextColor:$shade900 !default;
+$tableFooterCellFontWeight:600 !default;
+$tableFooterCellBorder:1px solid #dee2e6 !default;
+$tableFooterCellBorderWidth:1px 0 1px 0 !default;
+$tableResizerHelperBg:$primaryColor !default;
+
+$tableFooterBorder:1px solid #dee2e6 !default;
+$tableFooterBorderWidth:1px 0 1px 0 !default;
+$tableFooterBg:$shade100 !default;
+$tableFooterTextColor:$shade900 !default;
+$tableFooterFontWeight:600 !default;
+$tableFooterPadding:1rem 1rem !default;
+
+$tableCellContentAlignment:left !default;
+$tableTopPaginatorBorderWidth:1px 0 0 0 !default;
+$tableBottomPaginatorBorderWidth:1px 0 0 0 !default;
+
+$tableScaleSM:0.5 !default;
+$tableScaleLG:1.25 !default;
+
+//dataview
+$dataViewContentPadding:0 !default;
+$dataViewContentBorder:0 none !default;
+$dataViewListItemBorder:1px solid $shade300 !default;
+$dataViewListItemBorderWidth:1px 0 0 0 !default;
+
+//tree
+$treeContainerPadding:0.286rem !default;
+$treeNodePadding:0.143rem !default;
+$treeNodeContentPadding:.286rem !default;
+$treeNodeChildrenPadding:0 0 0 1rem !default;
+$treeNodeIconColor:$shade600 !default;
+
+//timeline
+$timelineVerticalEventContentPadding:0 1rem !default;
+$timelineHorizontalEventContentPadding:1rem 0 !default;
+$timelineEventMarkerWidth:1rem !default;
+$timelineEventMarkerHeight:1rem !default;
+$timelineEventMarkerBorderRadius:50% !default;
+$timelineEventMarkerBorder:0 none !default;
+$timelineEventMarkerBackground:$primaryColor !default;
+$timelineEventConnectorSize:2px !default;
+$timelineEventColor:$shade300 !default;
+
+//org chart
+$organizationChartConnectorColor:$shade300 !default;
+
+//message
+$messageMargin:1rem 0 !default;
+$messagePadding:1rem 1.25rem !default;
+$messageBorderWidth:1px !default;
+$messageIconFontSize:1.5rem !default;
+$messageTextFontSize:1rem !default;
+$messageTextFontWeight:500 !default;
+
+//inline message
+$inlineMessagePadding:$inputPadding !default;
+$inlineMessageMargin:0 !default;
+$inlineMessageIconFontSize:1rem !default;
+$inlineMessageTextFontSize:1rem !default;
+$inlineMessageBorderWidth:0px !default;
+
+//toast
+$toastIconFontSize:2rem !default;
+$toastMessageTextMargin:0 0 0 1rem !default;
+$toastMargin:0 0 1rem 0 !default;
+$toastPadding:1rem !default;
+$toastBorderWidth:0 !default;
+$toastShadow:0 0.25rem 0.75rem rgba(0,0,0,.1) !default;
+$toastOpacity:1 !default;
+$toastTitleFontWeight:700 !default;
+$toastDetailMargin:$inlineSpacing 0 0 0 !default;
+
+//severities
+$infoMessageBg:#cce5ff !default;
+$infoMessageBorder:solid #b8daff !default;
+$infoMessageTextColor:#004085 !default;
+$infoMessageIconColor:#004085 !default;
+$successMessageBg:#d4edda !default;
+$successMessageBorder:solid #c3e6cb !default;
+$successMessageTextColor:#155724 !default;
+$successMessageIconColor:#155724 !default;
+$warningMessageBg:#fff3cd !default;
+$warningMessageBorder:solid #ffeeba !default;
+$warningMessageTextColor:#856404 !default;
+$warningMessageIconColor:#856404 !default;
+$errorMessageBg:#f8d7da !default;
+$errorMessageBorder:solid #f5c6cb !default;
+$errorMessageTextColor:#721c24 !default;
+$errorMessageIconColor:#721c24 !default;
+
+//overlays
+$overlayContentBorder:1px solid rgba(0,0,0,.2) !default;
+$overlayContentBg:$panelContentBg !default;
+$overlayContainerShadow:none !default;
+
+//dialog
+$dialogHeaderBg:$shade000 !default;
+$dialogHeaderBorder:1px solid $shade200 !default;
+$dialogHeaderTextColor:$shade900 !default;
+$dialogHeaderFontWeight:600 !default;
+$dialogHeaderFontSize:1.25rem !default;
+$dialogHeaderPadding:1rem !default;
+$dialogContentPadding:1rem !default;
+$dialogFooterBorder:1px solid $shade200 !default;
+$dialogFooterPadding:1rem !default;
+
+//confirmpopup
+$confirmPopupContentPadding:$panelContentPadding !default;
+$confirmPopupFooterPadding:0 1.25rem 1.25rem 1.25rem !default;
+
+//tooltip
+$tooltipBg:$shade900 !default;
+$tooltipTextColor:$shade000 !default;
+$tooltipPadding:$inputPadding !default;
+
+//steps
+$stepsItemBg:transparent !default;
+$stepsItemBorder:1px solid $shade300 !default;
+$stepsItemTextColor:$shade600 !default;
+$stepsItemNumberWidth:2rem !default;
+$stepsItemNumberHeight:2rem !default;
+$stepsItemNumberFontSize:1.143rem !default;
+$stepsItemNumberColor:$shade900 !default;
+$stepsItemNumberBorderRadius:$borderRadius !default;
+$stepsItemActiveFontWeight:600 !default;
+
+//progressbar, progressspinner
+$progressBarHeight:1.5rem !default;
+$progressBarBorder:0 none !default;
+$progressBarBg:$shade200 !default;
+$progressBarValueBg:$primaryColor !default;
+$progressBarValueTextColor:$primaryTextColor !default;
+
+$progressSpinnerStrokeColor:$errorMessageTextColor !default;
+$progressSpinnerColorOne:$errorMessageTextColor !default;
+$progressSpinnerColorTwo:$infoMessageTextColor !default;
+$progressSpinnerColorThree:$successMessageTextColor !default;
+$progressSpinnerColorFour:$warningMessageTextColor !default;
+
+//menu (e.g. menu, menubar, tieredmenu)
+$menuWidth:12.5rem !default;
+$menuBg:$shade100 !default;
+$menuBorder:1px solid $shade300 !default;
+$menuTextColor:$shade900 !default;
+$menuitemPadding:.75rem 1rem !default;
+$menuitemBorderRadius:0 !default;
+$menuitemTextColor:$shade900 !default;
+$menuitemIconColor:$shade900 !default;
+$menuitemTextHoverColor:$shade900 !default;
+$menuitemIconHoverColor:$shade900 !default;
+$menuitemHoverBg:$shade200 !default;
+$menuitemTextFocusColor:$shade900 !default;
+$menuitemIconFocusColor:$shade900 !default;
+$menuitemFocusBg:$shade300 !default;
+$menuitemTextActiveColor:$shade900 !default;
+$menuitemIconActiveColor:$shade900 !default;
+$menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
+$menuitemSubmenuIconFontSize:.875rem !default;
+$submenuHeaderMargin:0 !default;
+$submenuHeaderPadding:.75rem 1rem !default;
+$submenuHeaderBg:$shade100 !default;
+$submenuHeaderTextColor:$shade900 !default;
+$submenuHeaderBorderRadius:0 !default;
+$submenuHeaderFontWeight:600 !default;
+$overlayMenuBg:$menuBg !default;
+$overlayMenuBorder:1px solid rgba(0,0,0,.15) !default;
+$overlayMenuShadow:none !default;
+$verticalMenuPadding:.5rem 0 !default;
+$menuSeparatorMargin:.5rem 0 !default;
+
+$breadcrumbPadding:1rem !default;
+$breadcrumbBg:$shade100 !default;
+$breadcrumbBorder:0 none !default;
+$breadcrumbItemTextColor:$primaryColor !default;
+$breadcrumbItemIconColor:$primaryColor !default;
+$breadcrumbLastItemTextColor:$shade600 !default;
+$breadcrumbLastItemIconColor:$shade600 !default;
+$breadcrumbSeparatorColor:$shade600 !default;
+
+$horizontalMenuPadding:.5rem 1rem !default;
+$horizontalMenuBg:$shade100 !default;
+$horizontalMenuBorder:0 none !default;
+$horizontalMenuTextColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemPadding:1rem !default;
+$horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
+$horizontalMenuRootMenuitemTextColor:rgba(0,0,0,.5) !default;
+$horizontalMenuRootMenuitemIconColor:rgba(0,0,0,.5) !default;
+$horizontalMenuRootMenuitemTextHoverColor:rgba(0,0,0,.7) !default;
+$horizontalMenuRootMenuitemIconHoverColor:rgba(0,0,0,.7) !default;
+$horizontalMenuRootMenuitemHoverBg:transparent !default;
+$horizontalMenuRootMenuitemTextActiveColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemIconActiveColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemActiveBg:transparent !default;
+
+//badge and tag
+$badgeBg:$primaryColor !default;
+$badgeTextColor:$primaryTextColor !default;
+$badgeMinWidth:1.5rem !default;
+$badgeHeight:1.5rem !default;
+$badgeFontWeight:700 !default;
+$badgeFontSize:.75rem !default;
+
+$tagPadding:.25rem .4rem !default;
+
+//carousel
+$carouselIndicatorsPadding:1rem !default;
+$carouselIndicatorBg:$shade200 !default;
+$carouselIndicatorHoverBg:$shade300 !default;
+$carouselIndicatorBorderRadius:0 !default;
+$carouselIndicatorWidth:2rem !default;
+$carouselIndicatorHeight:.5rem !default;
+
+//galleria
+$galleriaMaskBg:rgba(0,0,0,0.9) !default;
+$galleriaCloseIconMargin:.5rem !default;
+$galleriaCloseIconFontSize:2rem !default;
+$galleriaCloseIconBg:transparent !default;
+$galleriaCloseIconColor:$shade100 !default;
+$galleriaCloseIconHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaCloseIconHoverColor:$shade100 !default;
+$galleriaCloseIconWidth:4rem !default;
+$galleriaCloseIconHeight:4rem !default;
+$galleriaCloseIconBorderRadius:$borderRadius !default;
+
+$galleriaItemNavigatorBg:transparent !default;
+$galleriaItemNavigatorColor:$shade100 !default;
+$galleriaItemNavigatorMargin:0 .5rem !default;
+$galleriaItemNavigatorFontSize:2rem !default;
+$galleriaItemNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaItemNavigatorHoverColor:$shade100 !default;
+$galleriaItemNavigatorWidth:4rem !default;
+$galleriaItemNavigatorHeight:4rem !default;
+$galleriaItemNavigatorBorderRadius:$borderRadius !default;
+
+$galleriaCaptionBg:rgba(0,0,0,.5) !default;
+$galleriaCaptionTextColor:$shade100 !default;
+$galleriaCaptionPadding:1rem !default;
+
+$galleriaIndicatorsPadding:1rem !default;
+$galleriaIndicatorBg:$shade200 !default;
+$galleriaIndicatorHoverBg:$shade300 !default;
+$galleriaIndicatorBorderRadius:$borderRadius !default;
+$galleriaIndicatorWidth:1rem !default;
+$galleriaIndicatorHeight:1rem !default;
+$galleriaIndicatorsBgOnItem:rgba(0,0,0,.5) !default;
+$galleriaIndicatorBgOnItem:rgba(255,255,255,.4) !default;
+$galleriaIndicatorHoverBgOnItem:rgba(255,255,255,.6) !default;
+
+$galleriaThumbnailContainerBg:rgba(0,0,0,.9) !default;
+$galleriaThumbnailContainerPadding:1rem .25rem !default;
+$galleriaThumbnailNavigatorBg:transparent !default;
+$galleriaThumbnailNavigatorColor:$shade100 !default;
+$galleriaThumbnailNavigatorHoverBg:rgba(255,255,255,0.1) !default;
+$galleriaThumbnailNavigatorHoverColor:$shade100 !default;
+$galleriaThumbnailNavigatorBorderRadius:$borderRadius !default;
+$galleriaThumbnailNavigatorWidth:2rem !default;
+$galleriaThumbnailNavigatorHeight:2rem !default;
+
+//divider
+$dividerHorizontalMargin:1rem 0 !default;
+$dividerHorizontalPadding:0 1rem !default;
+$dividerVerticalMargin:0 1rem !default;
+$dividerVerticalPadding:1rem 0 !default;
+$dividerSize:1px !default;
+$dividerColor:$shade300 !default;
+
+//avatar
+$avatarBg:$shade300 !default;
+$avatarTextColor:$textColor !default;
+
+//chip
+$chipBg:$shade300 !default;
+$chipTextColor:$textColor !default;
+$chipBorderRadius: 16px !default;
+$chipFocusBg:$shade400 !default;
+$chipFocusTextColor:$textColor !default;
+
+//scrollTop
+$scrollTopBg:rgba(0,0,0,0.7) !default;
+$scrollTopHoverBg:rgba(0,0,0,0.8) !default;
+$scrollTopWidth:3rem !default;
+$scrollTopHeight:3rem !default;
+$scrollTopBorderRadius:$borderRadius !default;
+$scrollTopFontSize:1.5rem !default;
+$scrollTopTextColor:$shade100 !default;
+
+//skeleton
+$skeletonBg:$shade200 !default;
+$skeletonAnimationBg:rgba(255,255,255,0.4) !default;
+
+//splitter
+$splitterGutterBg:$shade100 !default;
+$splitterGutterHandleBg:$shade300 !default;
+
+//speeddial
+$speedDialButtonWidth: 4rem !default;
+$speedDialButtonHeight: 4rem !default;
+$speedDialButtonIconFontSize: 1.3rem !default;
+$speedDialActionWidth: 3rem !default;
+$speedDialActionHeight: 3rem !default;
+$speedDialActionBg: $shade700 !default;
+$speedDialActionHoverBg: $shade800 !default;
+$speedDialActionTextColor: #fff !default;
+$speedDialActionTextHoverColor: #fff !default;
+
+//dock
+$dockActionWidth: 4rem !default;
+$dockActionHeight: 4rem !default;
+$dockItemPadding: .5rem !default;
+$dockItemBorderRadius: $borderRadius !default;
+$dockCurrentItemMargin: 1.5rem !default;
+$dockFirstItemsMargin: 1.3rem !default;
+$dockSecondItemsMargin: 0.9rem !default;
+$dockBg: rgba(255,255,255,.1) !default;
+$dockBorder: 1px solid rgba(255,255,255,0.2) !default;
+$dockPadding: .5rem .5rem !default;
+$dockBorderRadius: .5rem !default;
+
+//image
+$imageMaskBg:rgba(0,0,0,0.9) !default;
+$imagePreviewToolbarPadding:1rem !default;
+$imagePreviewIndicatorColor:#f8f9fa !default;
+$imagePreviewIndicatorBg:rgba(0,0,0,0.5) !default;
+$imagePreviewActionIconBg:transparent !default;
+$imagePreviewActionIconColor:#f8f9fa !default;
+$imagePreviewActionIconHoverBg:rgba(255,255,255,0.1) !default;
+$imagePreviewActionIconHoverColor:#f8f9fa !default;
+$imagePreviewActionIconWidth:3rem !default;
+$imagePreviewActionIconHeight:3rem !default;
+$imagePreviewActionIconFontSize:1.5rem !default;
+$imagePreviewActionIconBorderRadius:50% !default;
+
+:root {
+    font-family:$fontFamily;
+    --font-family:$fontFamily;
+    --surface-a:#{$shade000};
+    --surface-b:#{$shade100};
+    --surface-c:#{$shade200};
+    --surface-d:#{$shade300};
+    --surface-e:#{$shade000};
+    --surface-f:#{$shade000};
+    --text-color:#{$shade900};
+    --text-color-secondary:#{$shade600};
+    --primary-color:#{$primaryColor};
+    --primary-color-text:#{$primaryTextColor};
+    --surface-0: #ffffff;
+    --surface-50: #f9fafb;
+    --surface-100: #f8f9fa;
+    --surface-200: #e9ecef;
+    --surface-300: #dee2e6;
+    --surface-400: #ced4da;
+    --surface-500: #adb5bd;
+    --surface-600: #6c757d;
+    --surface-700: #495057;
+    --surface-800: #343a40;
+    --surface-900: #212529;
+    --gray-50: #f9fafb;
+    --gray-100: #f8f9fa;
+    --gray-200: #e9ecef;
+    --gray-300: #dee2e6;
+    --gray-400: #ced4da;
+    --gray-500: #adb5bd;
+    --gray-600: #6c757d;
+    --gray-700: #495057;
+    --gray-800: #343a40;
+    --gray-900: #212529;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#efefef;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#dee2e6;
+    --surface-hover:#e9ecef;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
diff --git a/src/styles/themes/sudosos-light/theme.scss b/src/styles/themes/sudosos-light/theme.scss
new file mode 100644
index 00000000..feaa6f91
--- /dev/null
+++ b/src/styles/themes/sudosos-light/theme.scss
@@ -0,0 +1,6 @@
+@import '../variables';
+@import './_variables_light';
+@import '../_fonts';
+@import '../../primevue-base/_components';
+@import '../_vendor_extensions';
+@import '../_extensions';
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 5f181219..80bcb00b 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -49,7 +49,7 @@
             {{ loginForm.errors.value.password }}
           </smal>
         </span>
-        <Button type="submit" id="login-button" severity="danger">
+        <Button type="submit" id="login-button">
           {{ $t('login.Login') }}
         </Button>
         <div class="password-reset" @click="resetPassword">
diff --git a/src/views/PasswordResetView.vue b/src/views/PasswordResetView.vue
index fa2183c2..21a1ca24 100644
--- a/src/views/PasswordResetView.vue
+++ b/src/views/PasswordResetView.vue
@@ -21,7 +21,7 @@
           <i class="pi pi-exclamation-circle"/>
           {{ emailForm.errors.value.email }}
         </small>
-        <Button type="submit" id="reset-button" severity="danger">{{ $t('login.Reset') }}</Button>
+        <Button type="submit" id="reset-button">{{ $t('login.Reset') }}</Button>
         <div class="backtologin" @click="backToLogin">{{ $t('login.Back to login') }}</div>
       </form>
       <div v-else-if="passwordResetMode === 1" class="login-form">
@@ -67,7 +67,7 @@
           <i class="pi pi-exclamation-circle"/>
           {{ passwordForm.errors.value.passwordConfirm }}
         </small>
-        <Button type="submit" id="reset-button" severity="danger">{{ $t('login.Reset') }}</Button>
+        <Button type="submit" id="reset-button">{{ $t('login.Reset') }}</Button>
         <div class="backtologin" @click="backToLogin">{{ $t('login.Back to login') }}</div>
       </form>
     </main>
diff --git a/src/views/PointOfSale/POSInfoView.vue b/src/views/PointOfSale/POSInfoView.vue
index c1cff4c5..445a8947 100644
--- a/src/views/PointOfSale/POSInfoView.vue
+++ b/src/views/PointOfSale/POSInfoView.vue
@@ -10,7 +10,6 @@
           @click="handleEditClicked"
         />
         <Button
-          severity="danger"
           :label="$t('posInfo.Close')"
           icon="pi pi-times"
           @click="handleClosedClicked"
diff --git a/src/views/ProductsContainersView.vue b/src/views/ProductsContainersView.vue
index c73a1749..c445daee 100644
--- a/src/views/ProductsContainersView.vue
+++ b/src/views/ProductsContainersView.vue
@@ -23,7 +23,7 @@
                 <InputText v-model="filters['global'].value" placeholder="Search" />
               </span>
               <span>
-                <Button severity="danger" @click="openCreateModal">{{ $t('app.Create') }}</Button>
+                <Button @click="openCreateModal">{{ $t('app.Create') }}</Button>
               </span>
             </div>
           </template>
diff --git a/src/views/SingleUserView.vue b/src/views/SingleUserView.vue
index dcb88cb7..989928dc 100644
--- a/src/views/SingleUserView.vue
+++ b/src/views/SingleUserView.vue
@@ -27,7 +27,7 @@
             <span class="error-text">{{ errors.userType }}</span>
             <label for="active">{{ $t('userDetails.Active') }}</label>
             <Checkbox :binary="true" id="active" v-bind="isActive" />
-            <Button type="submit" severity="danger">{{ $t('userDetails.Update information') }}</Button>
+            <Button type="submit">{{ $t('userDetails.Update information') }}</Button>
           </form>
         </CardComponent>
         <BalanceComponent :user="currentUser" :showOption="false" id="userBalance"/>
diff --git a/src/views/TermsOfServiceView.vue b/src/views/TermsOfServiceView.vue
index 96c1e98f..9e5eeec0 100644
--- a/src/views/TermsOfServiceView.vue
+++ b/src/views/TermsOfServiceView.vue
@@ -22,7 +22,6 @@
       <Button
           type="button"
           @click="acceptTermsOfService"
-          severity="danger"
       >
         {{ $t('termsOfService.agreeToS') }}
       </Button>
diff --git a/src/views/UserOverView.vue b/src/views/UserOverView.vue
index d6285aeb..fb7899ae 100644
--- a/src/views/UserOverView.vue
+++ b/src/views/UserOverView.vue
@@ -23,7 +23,7 @@
             <InputText v-model="filters['global'].value" :placeholder="$t('app.Search')" />
           </span>
           <span>
-            <Button severity="danger" @click="visible = true">{{ $t('app.Create') }}</Button>
+            <Button @click="visible = true">{{ $t('app.Create') }}</Button>
           </span>
         </div>
       </template>
@@ -48,7 +48,6 @@
           <Button
             @click="handleInfoPush(slotProps.data.id)"
             type="button"
-            severity="danger"
             icon="pi pi-info-circle"
             outlined
           />
@@ -94,8 +93,8 @@
             <span class="error-text">{{ errors.email }}</span></div>
         </div>
         <div class="form-row" id="actions">
-          <Button severity="danger" outlined @click="visible = false">{{ $t('c_confirmationModal.Cancel' )}}</Button>
-          <Button type="submit" severity="danger" >{{ $t('c_confirmationModal.Save' )}}</Button>
+          <Button outlined @click="visible = false">{{ $t('c_confirmationModal.Cancel' )}}</Button>
+          <Button type="submit">{{ $t('c_confirmationModal.Save' )}}</Button>
         </div>
       </form>
     </Dialog>

From 8ca1d52157a9ea5c1c0f10af682a525373845ade Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Tue, 12 Dec 2023 19:51:10 +0100
Subject: [PATCH 02/11] Fixed HomeView.vue en App.vue to use primeflex

---
 src/App.vue             |  6 ------
 src/assets/base.css     |  1 +
 src/styles/BasePage.css |  5 +----
 src/views/HomeView.vue  | 13 ++-----------
 4 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index efb4020b..10f0e3b1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,9 +8,3 @@ import Toast from "primevue/toast";
   <Toast />
   <RouterView />
 </template>
-
-<style lang="scss">
-body {
-  margin: 0;
-}
-</style>
diff --git a/src/assets/base.css b/src/assets/base.css
index 9fe6b2db..2eeec9c8 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -60,6 +60,7 @@
 
 body {
   min-height: 100vh;
+  margin: 0;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
diff --git a/src/styles/BasePage.css b/src/styles/BasePage.css
index a4d06666..dec155fe 100644
--- a/src/styles/BasePage.css
+++ b/src/styles/BasePage.css
@@ -17,13 +17,10 @@
 }
 
 .page-container {
-  margin-top: 4rem;
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
   padding-left: 15px;
   padding-right: 15px;
-  margin-bottom: 80px;
+  margin: 4rem auto 80px;
 }
 
 @media (min-width: 992px) {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 652145a5..8cfcc608 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="page-container">
     <div class="page-title">{{ $t('home.Overview') }}</div>
-    <div class="content-wrapper">
-      <BalanceComponent class="balance-component" :showOption="true"/>
+    <div class="content-wrapper gap-5">
+      <BalanceComponent :showOption="true"/>
       <TransactionsTableComponent
-          class="transactions-table"
           :header="$t('c_recentTransactionsTable.recent transactions')"
           :action="$t('c_recentTransactionsTable.all transactions')"
       />
@@ -20,12 +19,4 @@ import TransactionsTableComponent from "@/components/TransactionsTableComponent.
 
 <style scoped lang="scss">
 @import "../styles/BasePage.css";
-
-.balance-component {
-  margin-right: 15px;
-}
-
-.transactions-table {
-  margin-left: 15px;
-}
 </style>

From 69397e359db06949642e12207230342b29a83f79 Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Tue, 12 Dec 2023 19:55:31 +0100
Subject: [PATCH 03/11] Fixed BalanceView.vue css

---
 src/views/BalanceView.vue | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/src/views/BalanceView.vue b/src/views/BalanceView.vue
index 9c516e9b..91dece9f 100644
--- a/src/views/BalanceView.vue
+++ b/src/views/BalanceView.vue
@@ -6,14 +6,12 @@
       <CardComponent
           :action="$t('balance.Start payment')"
           :header="$t('balance.Increase balance')"
-          class="increase-balance-card"
           :func="showDialog"
       >
-        <div id="balance-increase-form">
-          <p id="balance-increase-title">{{ $t('balance.Balance increase amount') }}</p>
-          <div class="p-inputgroup flex-1">
+        <div>
+          <p class="font-bold">{{ $t('balance.Balance increase amount') }}</p>
+          <div class="w-3 flex-1">
             <InputNumber
-              class="cashInput"
               v-model="amountValue"
               :placeholder="$t('balance.Price')"
               inputId="amount"
@@ -35,8 +33,6 @@ import CardComponent from "@/components/CardComponent.vue";
 import { ref } from "vue";
 import TopupModal from "@/components/TopupModalComponent.vue";
 
-
-
 // Define the 'visible' ref variable to control dialog visibility
 const visible = ref(false);
 const amountValue = ref();
@@ -50,17 +46,7 @@ const showDialog = () => {
 
 <style scoped>
 @import "../styles/BasePage.css";
-
 :deep(.p-panel-content) {
   padding-left: 1.25rem!important;
 }
-
-#balance-increase-title {
-  font-weight: 700;
-}
-
-.p-inputgroup {
-  width: 25%;
-  min-width: 120px;
-}
 </style>

From 32043867ed89f6f0b712557bdaeb9e72f127f023 Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Tue, 12 Dec 2023 20:11:07 +0100
Subject: [PATCH 04/11] Removed css except for primevue styling

---
 src/views/ErrorView.vue |   4 --
 src/views/LoginView.vue | 119 +++++++++++-----------------------------
 2 files changed, 31 insertions(+), 92 deletions(-)

diff --git a/src/views/ErrorView.vue b/src/views/ErrorView.vue
index ee0a9913..c43cab9b 100644
--- a/src/views/ErrorView.vue
+++ b/src/views/ErrorView.vue
@@ -15,8 +15,4 @@ const { t } = useI18n();
 
 <style scoped lang="scss">
 @import '../styles/BasePage.css';
-
-p {
-
-}
 </style>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 80bcb00b..0b50b7d7 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,63 +1,63 @@
 <template>
   <div>
-    <main>
-      <img id="login-image" src="@/assets/img/bier.png" alt="logo" />
-      <h1>{{ $t('login.SudoSOS Login') }}</h1>
+    <main class="flex flex-column text-center mx-auto my-7 max-w-21rem">
+      <img class="max-h-9rem block mx-auto my-0" src="@/assets/img/bier.png" alt="logo"/>
+      <div class="text-900 text-5xl mt-0 mx-auto mb-2 w-full">{{ $t('login.SudoSOS Login') }}</div>
       <Button id="login-gewis-button" @click="loginViaGEWIS" severity="success">
-        <img id="gewis-branding" src="@/assets/img/gewis-branding.svg" alt="GEWIS" />
+        <img class="max-h-2rem py-1 mr-3" src="@/assets/img/gewis-branding.svg" alt="GEWIS"/>
         {{ $t('login.Login via GEWIS') }}
       </Button>
-      <hr />
-      <form id="login-form" @submit="loginHandler">
+      <hr class="mt-6 mb-4 max-w-21rem w-full"/>
+      <form class="flex flex-column" @submit="loginHandler">
         <label id="input-description" for="username">
           {{ $t('login.Username') }}
         </label>
         <span class="p-float-label with-error">
           <InputText
-            id="username"
-            type="text"
-            v-bind="username"
-            size="large"
-            name="username"
-            :class="{ 'p-invalid': loginForm.errors.value.username }"
+              type="text"
+              v-bind="username"
+              size="large"
+              name="username"
+              class="input-field"
+              :class="{ 'p-invalid': loginForm.errors.value.username }"
           />
           <label :class="{ 'contains-text': username.modelValue }" for="username"
-            >{{ $t('login.Username') }}
+          >{{ $t('login.Username') }}
           </label>
           <small class="p-error">
-            <i v-if="loginForm.errors.value.username" class="pi pi-exclamation-circle" />
+            <i v-if="loginForm.errors.value.username" class="pi pi-exclamation-circle"/>
             {{ loginForm.errors.value.username }}
           </small>
         </span>
-        <label id="input-description" for="password">
+        <label class="text-900" for="password">
           {{ $t('login.Password') }}
         </label>
         <span class="p-float-label with-error">
           <InputText
-            id="password"
-            type="password"
-            v-bind="password"
-            size="large"
-            name="password"
-            :class="{ 'p-invalid': loginForm.errors.value.password }"
+              type="password"
+              v-bind="password"
+              size="large"
+              name="password"
+              class="input-field"
+              :class="{ 'p-invalid': loginForm.errors.value.password }"
           />
           <label :class="{ 'contains-text': password.modelValue }" for="password"
-            >{{ $t('login.Password') }}
+          >{{ $t('login.Password') }}
           </label>
           <smal class="p-error">
-            <i v-if="loginForm.errors.value.password" class="pi pi-exclamation-circle" />
+            <i v-if="loginForm.errors.value.password" class="pi pi-exclamation-circle"/>
             {{ loginForm.errors.value.password }}
           </smal>
         </span>
         <Button type="submit" id="login-button">
           {{ $t('login.Login') }}
         </Button>
-        <div class="password-reset" @click="resetPassword">
+        <div class="text-900 underline" @click="resetPassword">
           {{ $t('login.Password reset') }}
         </div>
       </form>
     </main>
-    <CopyrightBanner />
+    <CopyrightBanner/>
   </div>
 </template>
 
@@ -83,10 +83,10 @@ const userStore = useUserStore();
 const toast = useToast();
 
 const schema = toTypedSchema(
-  yup.object({
-    username: yup.string().required('This is a required field.'),
-    password: yup.string().required('This is a required field.')
-  })
+    yup.object({
+      username: yup.string().required('This is a required field.'),
+      password: yup.string().required('This is a required field.')
+    })
 );
 const loginForm = useForm({
   validationSchema: schema
@@ -117,7 +117,7 @@ const loginHandler = loginForm.handleSubmit(async (values) => {
         accountMail: values.username,
         password: values.password
       }).then((res) => authStore.handleResponse(res.data, apiService));
-      if (authStore.getToS == 'ACCEPTED' && authStore.getUser ) {
+      if (authStore.getToS == 'ACCEPTED' && authStore.getUser) {
         await userStore.fetchCurrentUserBalance(authStore.getUser.id, apiService);
       } else {
         await router.replace({ path: '/error' });
@@ -152,35 +152,6 @@ const toHomeView = () => {
 
 <style scoped lang="scss">
 //TODO Fix the amount of css used related to #14 and #29
-form {
-  display: flex;
-  flex-direction: column;
-}
-
-h1 {
-  color: black;
-  max-width: 350px;
-  width: 100%;
-  margin: 0 auto;
-  font-size: 2.5rem;
-  margin-bottom: 1.5rem;
-}
-
-#login-image {
-  max-height: 150px;
-
-  display: block;
-  margin: 0 auto;
-}
-
-main {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  max-width: 350px;
-  margin: 4rem auto;
-}
-
 .p-button {
   margin: 1rem auto;
   max-width: 350px;
@@ -191,11 +162,6 @@ main {
   justify-content: center;
 }
 
-#gewis-branding {
-  max-height: 24px;
-  margin-right: 1rem;
-}
-
 .p-error {
   display: block;
   font-size: 12px;
@@ -210,15 +176,7 @@ main {
   line-height: 12px;
 }
 
-#username {
-  width: 100%;
-  padding-top: 18px;
-  padding-left: 12px;
-  padding-bottom: 0;
-  height: 60px;
-}
-
-#password {
+.input-field {
   width: 100%;
   padding-top: 18px;
   padding-left: 12px;
@@ -239,10 +197,6 @@ main {
   top: 8px !important;
 }
 
-#input-description {
-  color: black;
-}
-
 .p-invalid {
   background-color: #fef0f0;
 }
@@ -251,18 +205,7 @@ main {
   margin-bottom: 0.5rem;
 }
 
-hr {
-  margin-top: 3rem;
-  margin-bottom: 1.5rem;
-  max-width: 350px;
-  width: 100%;
-}
-
 .p-inputtext {
   margin-bottom: 0.5rem;
 }
-.password-reset {
-  color: black;
-  text-decoration-line: underline;
-}
 </style>

From faba2a305d8aefb0e8a28e72fd8dcf60303871ee Mon Sep 17 00:00:00 2001
From: Samuel <samuelincognito@gmail.com>
Date: Tue, 12 Dec 2023 20:18:01 +0100
Subject: [PATCH 05/11] Fixed PasswordResetView.vue css

---
 src/views/PasswordResetView.vue | 77 +++++----------------------------
 1 file changed, 11 insertions(+), 66 deletions(-)

diff --git a/src/views/PasswordResetView.vue b/src/views/PasswordResetView.vue
index 21a1ca24..03a98178 100644
--- a/src/views/PasswordResetView.vue
+++ b/src/views/PasswordResetView.vue
@@ -1,15 +1,16 @@
 <template>
   <div>
-    <main>
-      <img id="reset-image" src="../assets/img/bier.png" alt="logo"/>
-      <h1>{{ $t('login.Reset') }}</h1>
-      <form v-if="passwordResetMode === 0" class="login-form" @submit="resetPasswordRequest">
+    <main class="flex flex-column text-center mx-auto my-7 max-w-21rem">
+      <img class="max-h-9rem block mx-auto my-0" src="@/assets/img/bier.png" alt="logo"/>
+      <div class="text-900 text-5xl mt-0 mx-auto mb-2 w-full">{{ $t('login.Reset') }}</div>
+      <form v-if="passwordResetMode === 0" class="flex flex-column" @submit="resetPasswordRequest">
         <span class="p-float-label with-error">
           <InputText
               v-bind="email"
               id="email"
               size="large"
               name="email"
+              class="input-field"
               :class="{'p-invalid': emailForm.errors.value.email}"
           />
           <label :class="{'contains-text': email.modelValue }" for="email">{{ $t('login.Enter email') }}</label>
@@ -22,11 +23,11 @@
           {{ emailForm.errors.value.email }}
         </small>
         <Button type="submit" id="reset-button">{{ $t('login.Reset') }}</Button>
-        <div class="backtologin" @click="backToLogin">{{ $t('login.Back to login') }}</div>
+        <div class="text-900 underline" @click="backToLogin">{{ $t('login.Back to login') }}</div>
       </form>
       <div v-else-if="passwordResetMode === 1" class="login-form">
-        <div class="sent-email">{{ $t('login.Email sent') }}</div>
-        <div class="backtologin" @click="backToLogin">{{ $t('login.Back to login') }}</div>
+        <div class="text-900">{{ $t('login.Email sent') }}</div>
+        <div class="text-900 underline" @click="backToLogin">{{ $t('login.Back to login') }}</div>
       </div>
       <form v-else class="login-form" @submit="setNewPassword">
         <span class="p-float-label with-error">
@@ -36,6 +37,7 @@
               size="large"
               name="password"
               type="password"
+              class="input-field"
               :class="{'p-invalid': passwordForm.errors.value.password}"
           />
           <label :class="{'contains-text': password.modelValue }" for="password">{{ $t('login.New password') }}</label>
@@ -54,6 +56,7 @@
               size="large"
               name="passwordConfirm"
               type="password"
+              class="input-field"
               :class="{'p-invalid': passwordForm.errors.value.passwordConfirm}"
           />
           <label :class="{'contains-text': passwordConfirm.modelValue }" for="passwordConfirm">
@@ -163,34 +166,6 @@ const backToLogin = () => {
 
 <style scoped lang="scss">
 //TODO Cleanup and fix, related to issue #14 and #25
-form {
-  display: flex;
-  flex-direction: column;
-}
-
-h1 {
-  color: black;
-  max-width: 350px;
-  width: 100%;
-  font-size: 2.5rem;
-  margin: 0 auto 1.5rem;
-}
-
-#reset-image {
-  max-height: 150px;
-
-  display: block;
-  margin: 0 auto;
-}
-
-main {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  max-width: 350px;
-  margin: 4rem auto;
-}
-
 .p-button {
   margin: 1rem auto;
   max-width: 350px;
@@ -201,11 +176,6 @@ main {
   justify-content: center;
 }
 
-#gewis-branding {
-  max-height: 24px;
-  margin-right: 1rem;
-}
-
 .p-error {
   display: block;
   font-size: 12px;
@@ -219,23 +189,7 @@ main {
   line-height:12px;
 }
 
-#email {
-  width: 100%;
-  padding-top: 18px;
-  padding-left: 12px;
-  padding-bottom: 0;
-  height: 60px;
-}
-
-#password {
-  width: 100%;
-  padding-top: 18px;
-  padding-left: 12px;
-  padding-bottom: 0;
-  height: 60px;
-}
-
-#passwordConfirm {
+.input-field {
   width: 100%;
   padding-top: 18px;
   padding-left: 12px;
@@ -261,13 +215,4 @@ main {
 .p-inputtext {
   margin-bottom: 0.5rem;
 }
-
-.sent-email {
-  color: black;
-}
-
-.backtologin {
-  color: black;
-  text-decoration-line: underline;
-}
 </style>

From 286e65c44183414f52f729a5b9c84ff3d7b448aa Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 23 Dec 2023 18:37:39 +0100
Subject: [PATCH 06/11] Almost finished putting all style into the SASS files

---
 src/assets/base.css                           |   8 -
 src/assets/main.css                           |   2 +-
 src/components/TopNavbar.vue                  | 259 +++++++++++-------
 src/styles/primevue-base/_mixins.scss         |  56 +++-
 .../components/menu/_menubar.scss             |  25 +-
 .../themes/sudosos-dark/_variables_dark.scss  |  22 +-
 .../sudosos-light/_variables_light.scss       |  31 ++-
 7 files changed, 264 insertions(+), 139 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index 2eeec9c8..cdf5ae0c 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -50,14 +50,6 @@
   }
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  /*margin: 0;*/
-  font-weight: normal;
-}
-
 body {
   min-height: 100vh;
   margin: 0;
diff --git a/src/assets/main.css b/src/assets/main.css
index 3c939db4..ef2d3a65 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,7 +4,7 @@
 
 #app {
 
-  font-weight: normal;
+  //font-weight: normal;
 }
 
 
diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index ba6cea7a..1e6914c6 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -1,13 +1,28 @@
 
 <template>
-  <div class="container">
-    <nav>
-      <Menubar :model="leftItems" >
+    <nav class="bg-primary w-full flex justify-content-around">
+        <Menubar class="hidden md:flex" :model="leftItems">
+          <template #start>
+            <router-link to="/" id="sudosos">
+              {{ $t("login.SudoSOS") }}
+              <img id="logo" src="../assets/img/gewis-branding.svg" alt="SudoSOS" />
+            </router-link>
+          </template>
+          <template #item="{ item, props, hasSubmenu }">
+            <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
+              <a :href="href" v-bind="props.action" @click="navigate">
+                <span class="p-menuitem-text">{{ item.label }}</span>
+              </a>
+            </router-link>
+            <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+              <span class="p-menuitem-text">{{ item.label }}</span>
+              <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
+            </a>
+          </template>
+        </Menubar>
+      <Menubar class="hidden md:flex" :model="rightItems">
         <template #start>
-          <router-link to="/" id="sudosos">
-            {{ $t("login.SudoSOS") }}
-            <img id="logo" src="../assets/img/gewis-branding.svg" alt="SudoSOS" />
-          </router-link>
+          <img id="bier" src="../assets/img/bier.png"/>
         </template>
         <template #item="{ item, props, hasSubmenu }">
           <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -17,14 +32,12 @@
           </router-link>
           <a v-else :href="item.url" :target="item.target" v-bind="props.action">
             <span class="p-menuitem-text">{{ item.label }}</span>
+            <span v-if="item.icon" :class="item.icon" />
             <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
           </a>
         </template>
       </Menubar>
-      <Menubar :model="rightItems">
-        <template #start>
-          <img id="bier" src="../assets/img/bier.png"/>
-        </template>
+      <Menubar class="flex md:hidden" :model="mobileItems">
         <template #item="{ item, props, hasSubmenu }">
           <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
             <a :href="href" v-bind="props.action" @click="navigate">
@@ -33,13 +46,11 @@
           </router-link>
           <a v-else :href="item.url" :target="item.target" v-bind="props.action">
             <span class="p-menuitem-text">{{ item.label }}</span>
-            <span v-if="item.icon" :class="item.icon" />
             <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
           </a>
         </template>
       </Menubar>
     </nav>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -185,95 +196,147 @@ const rightItems = ref([
   },
 ]);
 
-</script>
-
-<style scoped lang="scss">
-
-.container {
-  background-color: #d40000;
-  display: flex;
-  width: 100%;
-  justify-content: space-around;
-  line-height: 1.5;
-  padding: 0.5rem 1rem;
-}
-nav {
-  display: flex;
-  flex-direction: row;
-  max-width: 1180px;
-  width: 100%;
-  justify-content: space-between;
-
-
-  .p-menubar {
-    background-color: #d40000;
-    padding: 0 1rem;
-
-
-
-  }
-}
-:deep(.p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content) {
-      background-color: transparent!important;
-}
-
-:deep(.p-menuitem-text){
-  color: white;
-  font-family: Raleway, sans-serif;
-  font-weight: 500;
-  font-size: 1rem;
-  padding-right: 5px;
-}
-
-// Define normal top-level menu-items
-:deep(.p-menuitem) {
-  background-color: transparent;
-  &.p-focus, &.p-focus, &.p-highlight > .p-menuitem-content {
-    background-color: transparent;
-    > a > * {
-      color: hsla(0, 0%, 100%, .75);
-    }
-  }
-
-  .p-menuitem-content {
-    > a {
-      padding: 0 0.5rem;
-      > * {
-        color: white;
-        transition: color .2s linear;
+const mobileItems = ref([
+  {
+    label: t('app.Transactions'),
+  },
+  {
+    label: t('app.Balance'),
+    route: '/balance',
+  },
+  {
+    label: t('app.Points of Sale'),
+    visible: isSeller(),
+    items: [
+      {
+        label: t('app.Overview'),
+        route: '/point-of-sale/overview',
+      },
+      {
+        label: t('app.Create POS'),
+        route: '/point-of-sale/request'
       }
-    }
-    &:hover {
-      > a {
-        &:hover {
-          background-color: transparent;
-        }
-
-        > * {
-          color: hsla(0, 0%, 100%, .75);
-        }
+    ]
+  },
+  {
+    label: t('app.Admin'),
+    visible: isAdmin(),
+    items: [
+      {
+        label: t('app.Manage POS'),
+      },
+      {
+        label: t('app.Screens'),
+      },
+      {
+        label: t('app.Banners'),
+      },
+    ],
+  },
+  {
+    label: t('app.BAC'),
+    visible: isBAC(),
+    items: [
+      {
+        label: t('app.User overview'),
+        route: '/user-overview',
+      },
+      {
+        label: t('flagged.Flagged transactions'),
+      },
+      {
+        label: t('app.Manage products'),
+        route: '/manage-products',
+      },
+      {
+        label: t('app.Social drink cards'),
       }
-    }
-  }
-}
-
-:deep(.p-submenu-list){
-  padding: 0.5rem 0;
-  width: fit-content;
-  height: fit-content;
-}
+    ]
+  },
+  {
+    label: firstName,
+    items: [
+      {
+        label: t('app.Profile'),
+        route: '/profile',
+      },
+      {
+        label: t('app.Sign out'),
+        command: handleLogout,
+      },
+    ]
+  },
+  {
+    label: balance, // TODO: Fix balance view
+                    // See: https://github.com/GEWIS/sudosos-frontend-vue3/issues/28
+  },
+  {
+    label: '',
+    icon: 'pi pi-globe',
+    items: [
+      {
+        label: t('app.Netherlands'),
+        disabled: () => locale.value == 'nl',
+        command: () => {
+          locale.value = 'nl';
+          localStorage.setItem('locale', 'nl');
+        },
+      },
+      {
+        label: t('app.English'),
+        disabled: () => locale.value == 'en',
+        command: () => {
+          locale.value = 'en';
+          localStorage.setItem('locale', 'en');
+        },
+      },
+    ]
+  },
+]);
 
-// Define an exception for submenu-items
-:deep(.p-submenu-list .p-menuitem){
+</script>
 
-  font-size: 1rem;
-  white-space: nowrap;
-  .p-menuitem-content > a > * {
-    padding: 0.5rem 1.5rem;
-    color: black;
-    font-weight: 400;
-  }
-}
+<style scoped lang="scss">
+// Define normal top-level menu-items
+//:deep(.p-menuitem) {
+//  .p-menuitem-content {
+//    > a {
+//      > * {
+//        //color: white;
+//        transition: color .2s linear;
+//      }
+//    }
+//    &:hover {
+//      > a {
+//        &:hover {
+//          background-color: transparent;
+//        }
+//
+//        > * {
+//          color: hsla(0, 0%, 100%, .75);
+//        }
+//      }
+//    }
+//  }
+//}
+//
+//:deep(.p-submenu-list){
+//  //padding: 0.5rem 0;
+//  width: fit-content;
+//  height: fit-content;
+//}
+//
+//// Define an exception for submenu-items
+//:deep(.p-submenu-list .p-menuitem){
+//
+//  font-size: 1rem;
+//  white-space: nowrap;
+//  .p-menuitem-content > a > * {
+//    //padding: 0.5rem 1.5rem;
+//    //color: black;
+//    font-weight: 400;
+//  }
+//}
 
 #logo {
   height: 65px;
diff --git a/src/styles/primevue-base/_mixins.scss b/src/styles/primevue-base/_mixins.scss
index d09daa87..d6dbc4fa 100644
--- a/src/styles/primevue-base/_mixins.scss
+++ b/src/styles/primevue-base/_mixins.scss
@@ -31,6 +31,35 @@
 	border-color: $inputErrorBorderColor;
 }
 
+@mixin submenuitem {
+    > .p-menuitem-content {
+        color: $submenuTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $submenuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $submenuitemTextColor;
+                font-family: $fontFamily;
+                font-weight: 500;
+            }
+
+            .p-menuitem-icon {
+                color: $submenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $submenuitemIconColor;
+            }
+        }
+    }
+}
+
 @mixin menuitem {
     > .p-menuitem-content {
         color: $menuitemTextColor;
@@ -44,17 +73,20 @@
 
             .p-menuitem-text {
                 color: $menuitemTextColor;
+                font-family: $fontFamily;
+                font-weight: 500;
             }
-        
+
             .p-menuitem-icon {
                 color: $menuitemIconColor;
                 margin-right: $inlineSpacing;
             }
-            
+
             .p-submenu-icon {
                 color: $menuitemIconColor;
             }
         }
+
     }
 
     &.p-highlight {
@@ -85,12 +117,12 @@
             > .p-menuitem-content {
                 color: $menuitemTextFocusColor;
                 background: $menuitemFocusBg;
-    
+
                 .p-menuitem-link {
                     .p-menuitem-text {
                         color: $menuitemTextFocusColor;
                     }
-                
+
                     .p-menuitem-icon, .p-submenu-icon {
                         color: $menuitemIconFocusColor;
                     }
@@ -102,12 +134,12 @@
             &:hover {
                 color: $menuitemTextHoverColor;
                 background: $menuitemHoverBg;
-    
+
                 .p-menuitem-link {
                     .p-menuitem-text {
                         color: $menuitemTextHoverColor;
                     }
-    
+
                     .p-menuitem-icon, .p-submenu-icon {
                         color: $menuitemIconHoverColor;
                     }
@@ -130,12 +162,12 @@
             .p-menuitem-text {
                 color: $horizontalMenuRootMenuitemTextColor;
             }
-        
+
             .p-menuitem-icon {
                 color: $horizontalMenuRootMenuitemIconColor;
                 margin-right: $inlineSpacing;
             }
-            
+
             .p-submenu-icon {
                 color: $horizontalMenuRootMenuitemIconColor;
                 margin-left: $inlineSpacing;
@@ -148,12 +180,12 @@
             &:hover {
                 color: $horizontalMenuRootMenuitemTextHoverColor;
                 background: $horizontalMenuRootMenuitemHoverBg;
-    
+
                 .p-menuitem-link {
                     .p-menuitem-text {
                         color: $horizontalMenuRootMenuitemTextHoverColor;
                     }
-    
+
                     .p-menuitem-icon, .p-submenu-icon {
                         color: $horizontalMenuRootMenuitemIconHoverColor;
                     }
@@ -193,7 +225,7 @@
                 .p-menuitem-link {
                     padding-left: $val * ($index + 1);
                 }
-    
+
             }
             @if $index < $length {
                 @include nested-submenu-indents($val, $index + 2, $length);
@@ -247,4 +279,4 @@
 
 @function shade($color, $percentage) {
     @return mix(#000, $color, $percentage);
-}
\ No newline at end of file
+}
diff --git a/src/styles/primevue-base/components/menu/_menubar.scss b/src/styles/primevue-base/components/menu/_menubar.scss
index 1fb2d8ac..cdab8120 100644
--- a/src/styles/primevue-base/components/menu/_menubar.scss
+++ b/src/styles/primevue-base/components/menu/_menubar.scss
@@ -1,7 +1,7 @@
 .p-menubar {
     padding: $horizontalMenuPadding;
-    background: $horizontalMenuBg;
-    color: $horizontalMenuTextColor;
+    background: $primaryColor;
+    color: $primaryTextColor;
     border: $horizontalMenuBorder;
     border-radius: $borderRadius;
 
@@ -32,6 +32,10 @@
         .p-submenu-icon {
             font-size: $menuitemSubmenuIconFontSize;
         }
+
+        .p-menuitem {
+            @include submenuitem();
+        }
     }
 }
 
@@ -46,12 +50,12 @@
             color: $horizontalMenuRootMenuitemIconColor;
             border-radius: $actionIconBorderRadius;
             transition: $actionIconTransition;
-        
+
             &:hover {
                 color: $horizontalMenuRootMenuitemIconHoverColor;
                 background: $horizontalMenuRootMenuitemHoverBg;
             }
-        
+
             &:focus {
                 @include focused();
             }
@@ -65,12 +69,12 @@
             border: $overlayMenuBorder;
             box-shadow: $overlayMenuShadow;
             width: 100%;
-    
+
             .p-menuitem-separator {
                 border-top: $divider;
                 margin: $menuSeparatorMargin;
             }
-    
+
             .p-submenu-icon {
                 font-size: $menuitemSubmenuIconFontSize;
             }
@@ -121,7 +125,7 @@
                     }
                 }
             }
-    
+
             .p-menuitem {
                 width: 100%;
                 position: static;
@@ -131,11 +135,16 @@
         }
 
         &.p-menubar-mobile-active .p-menubar-root-list {
+
             display: flex;
             flex-direction: column;
             top: 100%;
             left: 0;
             z-index: 1;
+
+            & * {
+                color:black;
+            }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/styles/themes/sudosos-dark/_variables_dark.scss b/src/styles/themes/sudosos-dark/_variables_dark.scss
index cec02140..57689beb 100644
--- a/src/styles/themes/sudosos-dark/_variables_dark.scss
+++ b/src/styles/themes/sudosos-dark/_variables_dark.scss
@@ -16,19 +16,19 @@ $colors: (
 //shades
 $shade000:rgba(255,255,255,.87) !default;  //text color
 $shade100:rgba(255,255,255,.60) !default;  //text secondary color
-$shade200:#7789a1 !default;  
-$shade300:#687c97 !default;  
+$shade200:#7789a1 !default;
+$shade300:#687c97 !default;
 $shade400:#5a6472 !default;
 $shade500:#4c5866 !default;
 $shade600:#3f4b5b !default;  //input bg, border, divider
-$shade700:#343e4d !default;  
+$shade700:#343e4d !default;
 $shade800:#2a323d !default;  //elevated surface
 $shade900:#20262e !default;  //ground surface
 
 $hoverBg:rgba(255,255,255,.04) !default;
 
 //global
-$fontFamily: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
+$fontFamily: Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
 $fontSize:1rem !default;
 $fontWeight:normal !default;
 $textColor:$shade000 !default;
@@ -645,6 +645,20 @@ $progressSpinnerColorThree:$successMessageTextColor !default;
 $progressSpinnerColorFour:$warningMessageTextColor !default;
 
 //menu (e.g. menu, menubar, tieredmenu)
+$submenuTextColor:$shade900 !default;
+$submenuitemTextColor:$shade000 !default;
+$submenuitemIconColor:$shade100 !default;
+$submenuitemTextHoverColor:$shade000 !default;
+$submenuitemIconHoverColor:$shade000 !default;
+$submenuitemHoverBg:$hoverBg !default;
+$submenuitemTextFocusColor:$shade000 !default;
+$submenuitemIconFocusColor:$shade000 !default;
+$submenuitemFocusBg:rgba(255,255,255,.12) !default;
+$submenuitemTextActiveColor:$shade000 !default;
+$submenuitemIconActiveColor:$shade000 !default;
+$submenuitemActiveBg:$shade900 !default;
+$submenuitemActiveFocusBg:$shade900 !default;
+
 $menuWidth:12.5rem !default;
 $menuBg:$shade800 !default;
 $menuBorder:1px solid $shade600 !default;
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index ae54b314..8bae40e2 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -27,8 +27,10 @@ $shade700:#495057 !default;              //input text color
 $shade800:#343a40 !default;              //unused
 $shade900:#212529 !default;              //text color
 
+$hoverBg:rgba(255,255,255,.04) !default;
+
 //global
-$fontFamily: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
+$fontFamily: Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !default;
 $fontSize:1rem !default;
 $fontWeight:normal !default;
 $textColor:$shade900 !default;
@@ -645,24 +647,38 @@ $progressSpinnerColorThree:$successMessageTextColor !default;
 $progressSpinnerColorFour:$warningMessageTextColor !default;
 
 //menu (e.g. menu, menubar, tieredmenu)
+$submenuTextColor:$shade900 !default;
+$submenuitemTextColor:$shade900 !default;
+$submenuitemIconColor:$shade100 !default;
+$submenuitemTextHoverColor:$shade000 !default;
+$submenuitemIconHoverColor:$shade000 !default;
+$submenuitemHoverBg:$hoverBg !default;
+$submenuitemTextFocusColor:$shade900 !default;
+$submenuitemIconFocusColor:$shade900 !default;
+$submenuitemFocusBg:rgba(255,255,255,.12) !default;
+$submenuitemTextActiveColor:$shade900 !default;
+$submenuitemIconActiveColor:$shade900 !default;
+$submenuitemActiveBg:$shade900 !default;
+$submenuitemActiveFocusBg:$shade900 !default;
+
 $menuWidth:12.5rem !default;
 $menuBg:$shade100 !default;
 $menuBorder:1px solid $shade300 !default;
 $menuTextColor:$shade900 !default;
 $menuitemPadding:.75rem 1rem !default;
 $menuitemBorderRadius:0 !default;
-$menuitemTextColor:$shade900 !default;
+$menuitemTextColor:$shade000 !default;
 $menuitemIconColor:$shade900 !default;
 $menuitemTextHoverColor:$shade900 !default;
 $menuitemIconHoverColor:$shade900 !default;
 $menuitemHoverBg:$shade200 !default;
 $menuitemTextFocusColor:$shade900 !default;
 $menuitemIconFocusColor:$shade900 !default;
-$menuitemFocusBg:$shade300 !default;
+$menuitemFocusBg:transparent !default;
 $menuitemTextActiveColor:$shade900 !default;
 $menuitemIconActiveColor:$shade900 !default;
-$menuitemActiveBg:$shade200 !default;
-$menuitemActiveFocusBg:$shade200 !default;
+$menuitemActiveBg:transparent !default;
+$menuitemActiveFocusBg:transparent !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;
@@ -691,8 +707,8 @@ $horizontalMenuBorder:0 none !default;
 $horizontalMenuTextColor:rgba(0,0,0,.9) !default;
 $horizontalMenuRootMenuitemPadding:1rem !default;
 $horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
-$horizontalMenuRootMenuitemTextColor:rgba(0,0,0,.5) !default;
-$horizontalMenuRootMenuitemIconColor:rgba(0,0,0,.5) !default;
+$horizontalMenuRootMenuitemTextColor:$shade000 !default;
+$horizontalMenuRootMenuitemIconColor:$shade000 !default;
 $horizontalMenuRootMenuitemTextHoverColor:rgba(0,0,0,.7) !default;
 $horizontalMenuRootMenuitemIconHoverColor:rgba(0,0,0,.7) !default;
 $horizontalMenuRootMenuitemHoverBg:transparent !default;
@@ -839,7 +855,6 @@ $imagePreviewActionIconFontSize:1.5rem !default;
 $imagePreviewActionIconBorderRadius:50% !default;
 
 :root {
-    font-family:$fontFamily;
     --font-family:$fontFamily;
     --surface-a:#{$shade000};
     --surface-b:#{$shade100};

From c72ed3d2258bda07ac4511fa8d2f9ef8d94f6561 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 23 Dec 2023 18:49:22 +0100
Subject: [PATCH 07/11] Fixed navbar colors, only needing to do hover
 transitions

---
 src/assets/main.css                                 |  7 -------
 src/styles/primevue-base/_mixins.scss               |  2 ++
 .../themes/sudosos-light/_variables_light.scss      | 13 +++++++------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/assets/main.css b/src/assets/main.css
index ef2d3a65..97233c23 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,13 +7,6 @@
   //font-weight: normal;
 }
 
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
 @media (min-width: 1024px) {
 
   #app {
diff --git a/src/styles/primevue-base/_mixins.scss b/src/styles/primevue-base/_mixins.scss
index d6dbc4fa..be6b2478 100644
--- a/src/styles/primevue-base/_mixins.scss
+++ b/src/styles/primevue-base/_mixins.scss
@@ -37,6 +37,7 @@
         transition: $listItemTransition;
         border-radius: $menuitemBorderRadius;
 
+
         .p-menuitem-link {
             color: $submenuitemTextColor;
             padding: $menuitemPadding;
@@ -46,6 +47,7 @@
                 color: $submenuitemTextColor;
                 font-family: $fontFamily;
                 font-weight: 500;
+
             }
 
             .p-menuitem-icon {
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index 8bae40e2..1c749f15 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -36,10 +36,10 @@ $fontWeight:normal !default;
 $textColor:$shade900 !default;
 $textSecondaryColor:$shade600 !default;
 $borderRadius:4px !default;
-$transitionDuration:.15s !default;
+$transitionDuration:.2s !default;
 $formElementTransition:background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
 $actionIconTransition:box-shadow $transitionDuration !default;
-$listItemTransition:box-shadow $transitionDuration !default;
+$listItemTransition:color $transitionDuration linear !default;
 $primeIconFontSize:1rem !default;
 $divider:1px solid $shade300 !default;
 $inlineSpacing:.5rem !default;
@@ -647,6 +647,7 @@ $progressSpinnerColorThree:$successMessageTextColor !default;
 $progressSpinnerColorFour:$warningMessageTextColor !default;
 
 //menu (e.g. menu, menubar, tieredmenu)
+$menuHoverTransition: color .2s linear;
 $submenuTextColor:$shade900 !default;
 $submenuitemTextColor:$shade900 !default;
 $submenuitemIconColor:$shade100 !default;
@@ -709,11 +710,11 @@ $horizontalMenuRootMenuitemPadding:1rem !default;
 $horizontalMenuRootMenuitemBorderRadius:$borderRadius !default;
 $horizontalMenuRootMenuitemTextColor:$shade000 !default;
 $horizontalMenuRootMenuitemIconColor:$shade000 !default;
-$horizontalMenuRootMenuitemTextHoverColor:rgba(0,0,0,.7) !default;
-$horizontalMenuRootMenuitemIconHoverColor:rgba(0,0,0,.7) !default;
+$horizontalMenuRootMenuitemTextHoverColor:hsla(0, 0%, 100%, .75) !default;
+$horizontalMenuRootMenuitemIconHoverColor:hsla(0, 0%, 100%, .75) !default;
 $horizontalMenuRootMenuitemHoverBg:transparent !default;
-$horizontalMenuRootMenuitemTextActiveColor:rgba(0,0,0,.9) !default;
-$horizontalMenuRootMenuitemIconActiveColor:rgba(0,0,0,.9) !default;
+$horizontalMenuRootMenuitemTextActiveColor:hsla(0, 0%, 100%, .75) !default;
+$horizontalMenuRootMenuitemIconActiveColor:hsla(0, 0%, 100%, .75) !default;
 $horizontalMenuRootMenuitemActiveBg:transparent !default;
 
 //badge and tag

From 287f6b677a1e11d60626f65b4323e514750912a1 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sat, 23 Dec 2023 23:35:45 +0100
Subject: [PATCH 08/11] Removed final bit of selfmade css from TopNavbar.vue

---
 src/components/TopNavbar.vue                  | 70 +-----------------
 src/styles/primevue-base/_common.scss         |  4 +-
 src/styles/primevue-base/_mixins.scss         | 73 ++++++++++++++++++-
 .../sudosos-light/_variables_light.scss       | 16 ++--
 vite.config.ts                                |  5 +-
 5 files changed, 86 insertions(+), 82 deletions(-)

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index 1e6914c6..a71ee4e1 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -3,9 +3,9 @@
     <nav class="bg-primary w-full flex justify-content-around">
         <Menubar class="hidden md:flex" :model="leftItems">
           <template #start>
-            <router-link to="/" id="sudosos">
+            <router-link to="/" class="no-underline text-white font-bold flex align-items-center flex-row py-1">
               {{ $t("login.SudoSOS") }}
-              <img id="logo" src="../assets/img/gewis-branding.svg" alt="SudoSOS" />
+              <img class="h-4rem py-2" src="../assets/img/gewis-branding.svg" alt="SudoSOS" />
             </router-link>
           </template>
           <template #item="{ item, props, hasSubmenu }">
@@ -22,7 +22,7 @@
         </Menubar>
       <Menubar class="hidden md:flex" :model="rightItems">
         <template #start>
-          <img id="bier" src="../assets/img/bier.png"/>
+          <img class="h-1rem" src="../assets/img/bier.png"/>
         </template>
         <template #item="{ item, props, hasSubmenu }">
           <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
@@ -297,68 +297,4 @@ const mobileItems = ref([
 </script>
 
 <style scoped lang="scss">
-// Define normal top-level menu-items
-//:deep(.p-menuitem) {
-//  .p-menuitem-content {
-//    > a {
-//      > * {
-//        //color: white;
-//        transition: color .2s linear;
-//      }
-//    }
-//    &:hover {
-//      > a {
-//        &:hover {
-//          background-color: transparent;
-//        }
-//
-//        > * {
-//          color: hsla(0, 0%, 100%, .75);
-//        }
-//      }
-//    }
-//  }
-//}
-//
-//:deep(.p-submenu-list){
-//  //padding: 0.5rem 0;
-//  width: fit-content;
-//  height: fit-content;
-//}
-//
-//// Define an exception for submenu-items
-//:deep(.p-submenu-list .p-menuitem){
-//
-//  font-size: 1rem;
-//  white-space: nowrap;
-//  .p-menuitem-content > a > * {
-//    //padding: 0.5rem 1.5rem;
-//    //color: black;
-//    font-weight: 400;
-//  }
-//}
-
-#logo {
-  height: 65px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-#sudosos {
-  color: white;
-  font-weight: 700;
-  font-family: Raleway, sans-serif;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.3125rem 0;
-}
-
-:deep(svg){
-  margin: 0!important;
-}
-
-#bier {
-  height: 12px;
-}
 </style>
diff --git a/src/styles/primevue-base/_common.scss b/src/styles/primevue-base/_common.scss
index 7723961d..2aa486d1 100644
--- a/src/styles/primevue-base/_common.scss
+++ b/src/styles/primevue-base/_common.scss
@@ -3,7 +3,7 @@
 }
 
 .p-component {
-    font-family: var(--font-family);
+    font-family: $fontFamily;
     font-feature-settings: var(--font-feature-settings, normal);
     font-size: $fontSize;
     font-weight: $fontWeight;
@@ -63,7 +63,7 @@
             background-color: var(--maskbg);
         }
     }
-    
+
     @keyframes p-component-overlay-leave-animation {
         from {
             background-color: var(--maskbg);
diff --git a/src/styles/primevue-base/_mixins.scss b/src/styles/primevue-base/_mixins.scss
index be6b2478..35d75f1d 100644
--- a/src/styles/primevue-base/_mixins.scss
+++ b/src/styles/primevue-base/_mixins.scss
@@ -60,6 +60,67 @@
             }
         }
     }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $submenuitemTextActiveColor;
+            background: $submenuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $submenuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon, .pi {
+                    color: $submenuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $submenuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $submenuitemTextFocusColor;
+
+                .p-menuitem-link {
+                    color: $submenuitemTextFocusColor;
+
+                    .p-menuitem-text {
+                        color: $submenuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $submenuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $submenuitemTextHoverColor;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $submenuitemTextHoverColor;
+                        transition: $listItemTransition;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $submenuitemIconHoverColor;
+                        transition: $listItemTransition;
+                    }
+                }
+            }
+        }
+    }
 }
 
 @mixin menuitem {
@@ -101,7 +162,7 @@
                     color: $menuitemTextActiveColor;
                 }
 
-                .p-menuitem-icon, .p-submenu-icon {
+                .p-menuitem-icon, .p-submenu-icon, .pi {
                     color: $menuitemIconActiveColor;
                 }
             }
@@ -121,11 +182,13 @@
                 background: $menuitemFocusBg;
 
                 .p-menuitem-link {
+                    color: $menuitemTextFocusColor;
+
                     .p-menuitem-text {
                         color: $menuitemTextFocusColor;
                     }
 
-                    .p-menuitem-icon, .p-submenu-icon {
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
                         color: $menuitemIconFocusColor;
                     }
                 }
@@ -140,10 +203,12 @@
                 .p-menuitem-link {
                     .p-menuitem-text {
                         color: $menuitemTextHoverColor;
+                        transition: $listItemTransition;
                     }
 
-                    .p-menuitem-icon, .p-submenu-icon {
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
                         color: $menuitemIconHoverColor;
+                        transition: $listItemTransition;
                     }
                 }
             }
@@ -188,7 +253,7 @@
                         color: $horizontalMenuRootMenuitemTextHoverColor;
                     }
 
-                    .p-menuitem-icon, .p-submenu-icon {
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
                         color: $horizontalMenuRootMenuitemIconHoverColor;
                     }
                 }
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index 1c749f15..1f5b2ea3 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -651,8 +651,8 @@ $menuHoverTransition: color .2s linear;
 $submenuTextColor:$shade900 !default;
 $submenuitemTextColor:$shade900 !default;
 $submenuitemIconColor:$shade100 !default;
-$submenuitemTextHoverColor:$shade000 !default;
-$submenuitemIconHoverColor:$shade000 !default;
+$submenuitemTextHoverColor:$shade900 !default;
+$submenuitemIconHoverColor:$shade900 !default;
 $submenuitemHoverBg:$hoverBg !default;
 $submenuitemTextFocusColor:$shade900 !default;
 $submenuitemIconFocusColor:$shade900 !default;
@@ -670,14 +670,14 @@ $menuitemPadding:.75rem 1rem !default;
 $menuitemBorderRadius:0 !default;
 $menuitemTextColor:$shade000 !default;
 $menuitemIconColor:$shade900 !default;
-$menuitemTextHoverColor:$shade900 !default;
-$menuitemIconHoverColor:$shade900 !default;
+$menuitemTextHoverColor:hsla(0, 0%, 100%, .75) !default;
+$menuitemIconHoverColor:hsla(0, 0%, 100%, .75) !default;
 $menuitemHoverBg:$shade200 !default;
-$menuitemTextFocusColor:$shade900 !default;
-$menuitemIconFocusColor:$shade900 !default;
+$menuitemTextFocusColor:hsla(0, 0%, 100%, .75) !default;
+$menuitemIconFocusColor:hsla(0, 0%, 100%, .75) !default;
 $menuitemFocusBg:transparent !default;
-$menuitemTextActiveColor:$shade900 !default;
-$menuitemIconActiveColor:$shade900 !default;
+$menuitemTextActiveColor:hsla(0, 0%, 100%, .75) !default;
+$menuitemIconActiveColor:hsla(0, 0%, 100%, .75) !default;
 $menuitemActiveBg:transparent !default;
 $menuitemActiveFocusBg:transparent !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
diff --git a/vite.config.ts b/vite.config.ts
index 8e807127..04b7a090 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,5 +15,8 @@ export default defineConfig({
   },
   optimizeDeps: {
     exclude: ['ToastService'],
-  }
+  },
+  // server: {
+  //   host: '0.0.0.0',
+  // }
 });

From 76c83870dc2ee27d9402061ce0707261f8708e20 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sun, 24 Dec 2023 17:54:17 +0100
Subject: [PATCH 09/11] Fixed navigation bar on mobile

- Only needs animation
---
 src/components/TopNavbar.vue                  |  14 +-
 src/styles/primevue-base/_mixins.scss         | 188 ++++++++++++++++++
 .../components/menu/_menubar.scss             |  42 +++-
 .../sudosos-light/_variables_light.scss       |   6 +-
 4 files changed, 237 insertions(+), 13 deletions(-)

diff --git a/src/components/TopNavbar.vue b/src/components/TopNavbar.vue
index a71ee4e1..30de078c 100644
--- a/src/components/TopNavbar.vue
+++ b/src/components/TopNavbar.vue
@@ -37,15 +37,23 @@
           </a>
         </template>
       </Menubar>
-      <Menubar class="flex md:hidden" :model="mobileItems">
+      <Menubar class="flex md:hidden flex-row flex-wrap justify-content-between mx-2 my-2 transition-all" :model="mobileItems">
+        <template #start>
+          <router-link to="/" class="no-underline text-white font-bold flex align-items-center flex-row py-1">
+            {{ $t("login.SudoSOS") }}
+            <img class="h-4rem py-2" src="../assets/img/gewis-branding.svg" alt="SudoSOS" />
+          </router-link>
+        </template>
         <template #item="{ item, props, hasSubmenu }">
           <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
             <a :href="href" v-bind="props.action" @click="navigate">
-              <span class="p-menuitem-text">{{ item.label }}</span>
+              <span class="p-menuitem-text">{{ item.label}}</span>
+              <span v-if="item.icon" :class="item.icon" />
             </a>
           </router-link>
           <a v-else :href="item.url" :target="item.target" v-bind="props.action">
-            <span class="p-menuitem-text">{{ item.label }}</span>
+            <span class="p-menuitem-text">{{ item.label}}</span>
+              <span v-if="item.icon" :class="item.icon" />
             <span v-if="hasSubmenu" class="pi pi-fw pi-angle-down ml-2" />
           </a>
         </template>
diff --git a/src/styles/primevue-base/_mixins.scss b/src/styles/primevue-base/_mixins.scss
index 35d75f1d..0fdcf9ce 100644
--- a/src/styles/primevue-base/_mixins.scss
+++ b/src/styles/primevue-base/_mixins.scss
@@ -201,6 +201,7 @@
                 background: $menuitemHoverBg;
 
                 .p-menuitem-link {
+                    padding: $mobilemenuitemPadding;
                     .p-menuitem-text {
                         color: $menuitemTextHoverColor;
                         transition: $listItemTransition;
@@ -216,6 +217,193 @@
     }
 }
 
+@mixin mobilemenuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $mobilemenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+                font-family: $fontFamily;
+                font-weight: 500;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                padding: $mobilemenuitemPadding;
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon, .pi {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: transparent;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: transparent;
+
+                .p-menuitem-link {
+                    color: $menuitemTextFocusColor;
+                    padding: $mobilemenuitemPadding;
+
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: transparent;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                        transition: $listItemTransition;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $menuitemIconHoverColor;
+                        transition: $listItemTransition;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin mobilesubmenuitem {
+     .p-menuitem-content {
+        color: $submenuTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $submenuitemTextColor;
+            padding: $mobilesubmenuitemPadding !important;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $submenuitemTextColor;
+                font-family: $fontFamily;
+                font-weight: 500;
+
+            }
+
+            .p-menuitem-icon {
+                color: $submenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $submenuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $submenuitemTextActiveColor;
+            background: $submenuitemActiveBg;
+
+            .p-menuitem-link {
+                padding: $mobilemenuitemPadding;
+                .p-menuitem-text {
+                    color: $submenuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon, .pi {
+                    color: $submenuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $submenuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $submenuitemTextFocusColor;
+
+                .p-menuitem-link {
+                    color: $submenuitemTextFocusColor;
+                    padding: $mobilemenuitemPadding;
+                    .p-menuitem-text {
+                        color: $submenuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $submenuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $submenuitemTextHoverColor;
+
+                .p-menuitem-link {
+                    padding: $mobilemenuitemPadding;
+                    .p-menuitem-text {
+                        color: $submenuitemTextHoverColor;
+                        transition: $listItemTransition;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon, .pi {
+                        color: $submenuitemIconHoverColor;
+                        transition: $listItemTransition;
+                    }
+                }
+            }
+        }
+    }
+}
 @mixin horizontal-rootmenuitem {
     > .p-menuitem-content {
         color: $horizontalMenuRootMenuitemTextColor;
diff --git a/src/styles/primevue-base/components/menu/_menubar.scss b/src/styles/primevue-base/components/menu/_menubar.scss
index cdab8120..ce05abc7 100644
--- a/src/styles/primevue-base/components/menu/_menubar.scss
+++ b/src/styles/primevue-base/components/menu/_menubar.scss
@@ -1,7 +1,7 @@
 .p-menubar {
     padding: $horizontalMenuPadding;
     background: $primaryColor;
-    color: $primaryTextColor;
+    //color: $primaryTextColor;
     border: $horizontalMenuBorder;
     border-radius: $borderRadius;
 
@@ -42,7 +42,14 @@
 @media screen and (max-width: 960px) {
     .p-menubar {
         position: relative;
+        width: 100%;
+        background-color: $primaryColor;
 
+        .p-submenu-list {
+            .p-menuitem {
+                @include mobilesubmenuitem();
+            }
+        }
         .p-menubar-button {
             display: flex;
             width: $actionIconWidth;
@@ -59,16 +66,24 @@
             &:focus {
                 @include focused();
             }
+
+            .p-icon {
+                width: 100%;
+                height: 100%;
+            }
         }
 
         .p-menubar-root-list {
-            position: absolute;
+            position: relative;
             display: none;
             padding: $verticalMenuPadding;
             background: $overlayMenuBg;
             border: $overlayMenuBorder;
             box-shadow: $overlayMenuShadow;
             width: 100%;
+            overflow: hidden;
+            max-height: 0;
+            transition: max-height 0.5s ease-in-out;
 
             .p-menuitem-separator {
                 border-top: $divider;
@@ -134,17 +149,28 @@
             @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
         }
 
+        &.p-menubar-mobile-active {
+            top: 0;
+
+        }
         &.p-menubar-mobile-active .p-menubar-root-list {
 
             display: flex;
             flex-direction: column;
-            top: 100%;
-            left: 0;
-            z-index: 1;
-
-            & * {
-                color:black;
+            position: relative !important;
+            top: 0 !important;
+            background-color: $primaryColor;
+            border: none;
+            max-height: fit-content !important;
+            transition: max-height 0.5s ease-in-out;
+            > .p-menuitem {
+                @include mobilemenuitem();
             }
+
+        }
+        &.p-menubar-mobile .p-menubar-root-list {
+            overflow: hidden;
+            max-height: 0;
         }
     }
 }
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index 1f5b2ea3..ea5ce1c7 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -59,8 +59,8 @@ $focusOutlineOffset:0 !default;
 $focusShadow:0 0 0 0.2rem $focusOutlineColor !default;
 
 //action icons
-$actionIconWidth:2rem !default;
-$actionIconHeight:2rem !default;
+$actionIconWidth:1.5rem !default;
+$actionIconHeight:1.5rem !default;
 $actionIconBg:transparent !default;
 $actionIconBorder:0 none !default;
 $actionIconColor:$shade600 !default;
@@ -667,6 +667,8 @@ $menuBg:$shade100 !default;
 $menuBorder:1px solid $shade300 !default;
 $menuTextColor:$shade900 !default;
 $menuitemPadding:.75rem 1rem !default;
+$mobilemenuitemPadding: 0.5rem 0 !default;
+$mobilesubmenuitemPadding: 0.25rem 1.5rem !default;
 $menuitemBorderRadius:0 !default;
 $menuitemTextColor:$shade000 !default;
 $menuitemIconColor:$shade900 !default;

From 82a0d48daf67c808ecfee999cfb910a9d2ed3b25 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sun, 24 Dec 2023 18:24:26 +0100
Subject: [PATCH 10/11] Started work on mobile view for HomeView.vue

- Sizing of Cards should still be done
---
 src/views/HomeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 8cfcc608..2c21e8bd 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="page-container">
+  <div class="page-container flex flex-column">
     <div class="page-title">{{ $t('home.Overview') }}</div>
-    <div class="content-wrapper gap-5">
+    <div class="content-wrapper gap-5 flex md:flex-row flex-column">
       <BalanceComponent :showOption="true"/>
       <TransactionsTableComponent
           :header="$t('c_recentTransactionsTable.recent transactions')"

From ebebcec39984fc34626b1045c9aa3a239b72b534 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Sun, 24 Dec 2023 19:10:58 +0100
Subject: [PATCH 11/11] Moved all styling of CardComponent to inline classes
 and PrimeVue theming

---
 src/components/CardComponent.vue              | 52 ++++---------------
 .../components/panel/_panel.scss              |  3 +-
 .../sudosos-light/_variables_light.scss       |  9 ++--
 3 files changed, 18 insertions(+), 46 deletions(-)

diff --git a/src/components/CardComponent.vue b/src/components/CardComponent.vue
index 12dc5f76..be21849c 100644
--- a/src/components/CardComponent.vue
+++ b/src/components/CardComponent.vue
@@ -1,11 +1,18 @@
 <template>
-  <Panel :header="header.toUpperCase()" class="card">
+  <Panel :header="header.toUpperCase()" class="text-primary">
     <template #icons>
       <slot name="topAction" />
     </template>
     <slot />
     <template v-if="action" #footer>
-      <Button severity="secondary" id="bottom-left-button" @click="handleClick">{{ action.toUpperCase() }}</Button>
+      <Button
+        severity="secondary"
+        id="bottom-left-button"
+        @click="handleClick"
+        class="w-full text-primary surface-100 border-none px-3 py-3 font-normal"
+      >
+        {{ action.toUpperCase() }}
+      </Button>
     </template>
   </Panel>
 </template>
@@ -46,43 +53,6 @@ const handleClick = () => {
 };
 </script>
 
-<style scoped>
-.card {
-  position: relative;
-}
-#bottom-left-button {
-  width: 100%;
-  color: #d40000!important;
-  background-color: #f2f2f2;
-  padding: 1rem 1.25rem;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  border: none #dee2e6;
-}
-
-:deep(.p-panel-header) {
-  color: #d40000!important;
-  font-family: Lato,Arial,sans-serif!important;
-  font-weight: 400;
-  padding-top: 0!important;
-  padding-bottom: 0!important;
-  background-color: #f8f8f8!important;
-}
-
-:deep(.p-panel-content) {
-  background-color: #f8f8f8!important;
-  padding: 1rem 2rem!important;
-}
-
-:deep(.p-panel-footer) {
-  padding: 0!important;
-}
-
-.card {
-  color: #d40000!important;
-}
-
-:deep(.p-panel-header .p-panel-title){
-  padding: 1.25rem 0;
-}
+<style scoped lang="scss">
 </style>
+
diff --git a/src/styles/primevue-base/components/panel/_panel.scss b/src/styles/primevue-base/components/panel/_panel.scss
index eb07e1ba..f29dc638 100644
--- a/src/styles/primevue-base/components/panel/_panel.scss
+++ b/src/styles/primevue-base/components/panel/_panel.scss
@@ -9,6 +9,7 @@
 
         .p-panel-title {
             font-weight: $panelHeaderFontWeight;
+            padding: $panelTitlePadding;
         }
 
         .p-panel-header-icon {
@@ -28,7 +29,7 @@
         background: $panelContentBg;
         color: $panelContentTextColor;
         border-top: 0 none;
-        
+
         &:last-child {
             border-bottom-right-radius: $borderRadius;
             border-bottom-left-radius: $borderRadius;
diff --git a/src/styles/themes/sudosos-light/_variables_light.scss b/src/styles/themes/sudosos-light/_variables_light.scss
index ea5ce1c7..7596890d 100644
--- a/src/styles/themes/sudosos-light/_variables_light.scss
+++ b/src/styles/themes/sudosos-light/_variables_light.scss
@@ -349,9 +349,10 @@ $panelHeaderBorderColor: $shade300 !default;
 $panelHeaderBorder:1px solid $shade300 !default;
 $panelHeaderBg:$shade100 !default;
 $panelHeaderTextColor:$primaryColor !default;
-$panelHeaderFontWeight:600 !default;
-$panelHeaderPadding:1rem 1.25rem !default;
+$panelHeaderFontWeight:400 !default;
+$panelHeaderPadding:0 1.25rem !default;
 $panelToggleableHeaderPadding:.5rem 1.25rem !default;
+$panelTitlePadding: 1.25rem 0 !default;
 
 $panelHeaderHoverBg:$shade200 !default;
 $panelHeaderHoverBorderColor:$shade300 !default;
@@ -362,12 +363,12 @@ $panelContentBorder:1px solid $shade300 !default;
 $panelContentBg:$shade100 !default;
 $panelContentEvenRowBg:rgba(0,0,0,.05) !default;
 $panelContentTextColor:$shade900 !default;
-$panelContentPadding:1.25rem !default;
+$panelContentPadding:1rem 2rem !default;
 
 $panelFooterBorder:1px solid $shade300 !default;
 $panelFooterBg:$shade100 !default;
 $panelFooterTextColor:$shade900 !default;
-$panelFooterPadding:.5rem 1.25rem !default;
+$panelFooterPadding:0 !default;
 
 //accordion
 $accordionSpacing:0 !default;