- added main layout, sidebar, toolbar;

- started dashboard page, added first widget; - created new theme 'gepafin' - styles for the app;
2024-08-12 16:55:30 +02:00
parent 9eb9dc40d8
commit c09127a675
137 changed files with 12038 additions and 66 deletions
--- a/.env
+++ b/.env
@@ -1,3 +1,3 @@
 REACT_APP_TAB_TITLE=Gepafin
-REACT_APP_API_EXECUTION_ADDRESS=
+REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
 REACT_APP_LOGO_FILENAME=logo.svg
--- a/.linguirc
+++ b/.linguirc
@@ -1,16 +0,0 @@
-{
-   "locales": [
-      "en",
-      "it"
-   ],
-   "sourceLocale": "it",
-   "catalogs": [
-      {
-         "path": "src/locales/{locale}/messages",
-         "include": [
-            "src"
-         ]
-      }
-   ],
-   "format": "po"
-}
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +0,0 @@
-@sinossi:registry=https://git.sinossi.it/api/v4/projects/271/packages/npm/
-//git.sinossi.it/api/v4/projects/271/packages/npm/:_authToken=kdP6WxGtg71-MzJZDRe9
--- a/README.md
+++ b/README.md
@@ -1,2 +1,7 @@
 # GEPAFIN-FE
 Gepafin Front End
+
+## Commands
+`npm run start` - start development server
+`npm run build:dev` - make build based on 'dev' env variables
+`npm run build:prod` - make build based on 'prod' env variables
--- a/environments/dev/dev.env
+++ b/environments/dev/dev.env
@@ -1,3 +1,3 @@
 REACT_APP_TAB_TITLE=Gepafin
-REACT_APP_API_EXECUTION_ADDRESS=
+REACT_APP_API_EXECUTION_ADDRESS=https://api-dev-gepafin.memento.credit/v1/
 REACT_APP_LOGO_FILENAME=logo.svg
--- a/environments/staging/staging.env
+++ b/environments/staging/staging.env
@@ -1,3 +0,0 @@
-REACT_APP_TAB_TITLE=Gepafin
-REACT_APP_API_EXECUTION_ADDRESS=
-REACT_APP_LOGO_FILENAME=logo.svg
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,8 @@
        "jwt-decode": "4.0.0",
        "klona": "2.0.6",
        "luxon": "3.5.0",
+        "primeicons": "^7.0.0",
+        "primereact": "^10.8.2",
        "ramda": "0.30.1",
        "react": "18.3.1",
        "react-dom": "18.3.1",
@@ -31,10 +33,11 @@
      "devDependencies": {
        "@babel/cli": "7.24.8",
        "@babel/core": "7.25.2",
-        "@babel/plugin-syntax-jsx": "^7.24.7",
-        "@wordpress/babel-plugin-makepot": "^6.5.0",
+        "@babel/plugin-syntax-jsx": "7.24.7",
+        "@wordpress/babel-plugin-makepot": "6.5.0",
        "babel-plugin-macros": "3.1.0",
-        "sass": "1.77.8"
+        "sass": "1.77.8",
+        "sass-loader": "^16.0.0"
      }
    },
    "node_modules/@alloc/quick-lru": {
@@ -4091,6 +4094,14 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/resolve": {
      "version": "1.17.1",
      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6921,6 +6932,15 @@
        "utila": "~0.4"
      }
    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/dom-serializer": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@@ -14650,6 +14670,33 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/primeicons": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
+    },
+    "node_modules/primereact": {
+      "version": "10.8.2",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.8.2.tgz",
+      "integrity": "sha512-bf7vktogGh0PmKT9WLDcJQoQNqqFqcAlP2crUqccnlTu63FNnQV82qEYyaFvE12Qd5qhm3EYmpsHjpf6/+olTQ==",
+      "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -15193,6 +15240,43 @@
        }
      }
    },
+    "node_modules/react-scripts/node_modules/sass-loader": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
+      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+      "dependencies": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-scripts/node_modules/semver": {
      "version": "7.6.3",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -15227,6 +15311,21 @@
        }
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15806,29 +15905,29 @@
      }
    },
    "node_modules/sass-loader": {
-      "version": "12.6.0",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
-      "integrity": "sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==",
+      "version": "16.0.0",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.0.tgz",
+      "integrity": "sha512-n13Z+3rU9A177dk4888czcVFiC8CL9dii4qpXWUg3YIIgZEvi9TCFKjOQcbK0kJM7DJu9VucrZFddvNfYCPwtw==",
+      "dev": true,
      "dependencies": {
-        "klona": "^2.0.4",
        "neo-async": "^2.6.2"
      },
      "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 18.12.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      },
      "peerDependencies": {
-        "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
+        "@rspack/core": "0.x || 1.x",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
        "sass": "^1.3.0",
        "sass-embedded": "*",
        "webpack": "^5.0.0"
      },
      "peerDependenciesMeta": {
-        "fibers": {
+        "@rspack/core": {
          "optional": true
        },
        "node-sass": {
@@ -15839,6 +15938,9 @@
        },
        "sass-embedded": {
          "optional": true
+        },
+        "webpack": {
+          "optional": true
        }
      }
    },
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
    "jwt-decode": "4.0.0",
    "klona": "2.0.6",
    "luxon": "3.5.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.8.2",
    "ramda": "0.30.1",
    "react": "18.3.1",
    "react-dom": "18.3.1",
@@ -26,10 +28,11 @@
  "devDependencies": {
    "@babel/cli": "7.24.8",
    "@babel/core": "7.25.2",
-    "@babel/plugin-syntax-jsx": "^7.24.7",
-    "@wordpress/babel-plugin-makepot": "^6.5.0",
+    "@babel/plugin-syntax-jsx": "7.24.7",
+    "@wordpress/babel-plugin-makepot": "6.5.0",
    "babel-plugin-macros": "3.1.0",
-    "sass": "1.77.8"
+    "sass": "1.77.8",
+    "sass-loader": "16.0.0"
  },
  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
@@ -37,12 +40,9 @@
    "start:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts start",
    "build": "react-scripts build",
    "build:dev": "cp environments/dev/* public/loaded-files && rm public/loaded-files/dev.env && cp environments/dev/dev.env .env && react-scripts build",
-    "build:staging": "cp environments/staging/* public/loaded-files && rm public/loaded-files/staging.env && cp environments/staging/staging.env .env && react-scripts build",
    "build:prod": "cp environments/prod/* public/loaded-files && rm public/loaded-files/prod.env && cp environments/prod/prod.env .env && react-scripts build",
    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "extract": "lingui extract",
-    "compile": "lingui compile"
+    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import Routes from './routes';
 import { createI18n, setLocaleData } from '@wordpress/i18n';
 import { I18nProvider } from '@wordpress/react-i18n';
+import './assets/scss/theme.scss';

 const i18n = createI18n({}, 'gepafin');

--- a/src/assets/scss/components/appPage.css
+++ b/src/assets/scss/components/appPage.css
@@ -0,0 +1,22 @@
+.appPage {
+    display: flex;
+    flex-direction: column;
+
+    h1 {
+        color: var(--primary-color);
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin: 28px 0;
+    }
+
+    h2 {
+        color: var(--Black);
+        font-size: 21px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        margin: 24px 0;
+    }
+}
--- a/src/assets/scss/components/statsBigBadges.css
+++ b/src/assets/scss/components/statsBigBadges.css
@@ -0,0 +1,47 @@
+.statsBigBadges {
+    display: flex;
+    flex-direction: column;
+    padding: 24px 0;
+}
+.statsBigBadges__grid {
+    display: grid;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
+    gap: 24px;
+}
+
+.statsBigBadges__gridItem {
+    display: flex;
+    justify-content: space-between;
+    padding: 28px;
+    border-radius: 6px;
+    border: 1px solid var(--yellow-500);
+    background: var(--card-full-background-color-2);
+    align-items: center;
+    gap: 48px;
+
+    span {
+        color: #FFF;
+        font-size: 21px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+    }
+
+    span:nth-last-of-type(1) {
+        font-size: 28px;
+    }
+
+    &:nth-of-type(2) {
+        border: 1px solid var(--yellow-500);
+        background: var(--card-full-background-color-3);
+    }
+    &:nth-of-type(3) {
+        border: 1px solid var(--yellow-500);
+        background: var(--card-full-background-color-4);
+    }
+    &:nth-of-type(4) {
+        border: 1px solid var(--yellow-500);
+        background: var(--card-full-background-color-1);
+    }
+}
--- a/src/assets/scss/components/topBar.css
+++ b/src/assets/scss/components/topBar.css
@@ -0,0 +1,49 @@
+.topBar {
+    background: var(--horizontalMenu-background)
+}
+.topBar__endContent {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+}
+.topBar__profileBtn {
+    display: flex;
+    gap: 14px;
+}
+.topBar__icon {
+    font-size: 1.3rem;
+    color: var(--text-color-secondary)
+}
+.topBar__menuProfileItem {
+    display: flex;
+    gap: 7px;
+    padding: 0.75rem 1rem;
+
+    .p-avatar {
+        width: 40px;
+        height: 40px;
+        flex: 0 0 auto;
+    }
+
+    .userInfo {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        width: 120px;
+    }
+
+    span {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .userName {
+        font-weight: bold;
+    }
+}
+.topBar__menuProfile {
+    .p-menu-separator {
+        border-color: var(--menu-borderColor);
+    }
+}
--- a/src/assets/scss/gepafin/_extensions.scss
+++ b/src/assets/scss/gepafin/_extensions.scss
@@ -0,0 +1 @@
+/* Customizations to the designer theme should be defined here */
--- a/src/assets/scss/gepafin/_fonts.scss
+++ b/src/assets/scss/gepafin/_fonts.scss
--- a/src/assets/scss/gepafin/_variables.scss
+++ b/src/assets/scss/gepafin/_variables.scss
@@ -0,0 +1,87 @@
+$primaryColor: #4A644E;
+$primaryDarkColor: #4A644E;
+$primaryDarkerColor: #4A644E;
+$primaryTextColor: #ffffff;
+
+$chipBg: $primaryColor;
+$chipTextColor: $primaryTextColor;
+$chipBorderRadius: 16px !default;
+$chipFocusBg: $primaryColor;
+$chipFocusTextColor: $primaryTextColor;
+
+$colors: (
+    "blue": #2196F3,
+    "green": #4caf50,
+    "yellow": #FBC02D,
+    "cyan": #00BCD4,
+    "pink": #E91E63,
+    "indigo": #3F51B5,
+    "teal": #009688,
+    "orange": #F57C00,
+    "bluegray": #607D8B,
+    "purple": #9C27B0,
+    "red": #FF4032,
+    "primary": $primaryColor
+);
+
+
+@import './variables/_general.scss';
+@import './variables/_form.scss';
+@import './variables/_button.scss';
+@import './variables/_panel.scss';
+@import './variables/_data.scss';
+@import './variables/_overlay.scss';
+@import './variables/_message.scss';
+@import './variables/_menu.scss';
+@import './variables/_media.scss';
+@import './variables/_misc.scss';
+
+:root {
+    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --surface-a:#ffffff;
+    --surface-b:#f8f9fa;
+    --surface-c:#e9ecef;
+    --surface-d:#dee2e6;
+    --surface-e:#ffffff;
+    --surface-f:#ffffff;
+    --text-color:#4B5563;
+    --text-color-secondary:#6B7280;
+    --primary-color:#4A644E;
+    --primary-color-text:#ffffff;
+    --surface-0: #ffffff;
+    --surface-50: #FAFAFA;
+    --surface-100: #F5F5F5;
+    --surface-200: #EEEEEE;
+    --surface-300: #E0E0E0;
+    --surface-400: #BDBDBD;
+    --surface-500: #9E9E9E;
+    --surface-600: #757575;
+    --surface-700: #616161;
+    --surface-800: #424242;
+    --surface-900: #212121;
+    --gray-50: #FAFAFA;
+    --gray-100: #F5F5F5;
+    --gray-200: #EEEEEE;
+    --gray-300: #E0E0E0;
+    --gray-400: #BDBDBD;
+    --gray-500: #9E9E9E;
+    --gray-600: #757575;
+    --gray-700: #616161;
+    --gray-800: #424242;
+    --gray-900: #212121;
+    --content-padding:#{$panelContentPadding};
+    --inline-spacing:#{$inlineSpacing};
+    --border-radius:#{$borderRadius};
+    --surface-ground:#EFF3F8;
+    --surface-section:#ffffff;
+    --surface-card:#ffffff;
+    --surface-overlay:#ffffff;
+    --surface-border:#DFE7EF;
+    --surface-hover:#F6F9FC;
+    --focus-ring: #{$focusShadow};
+    --maskbg: #{$maskBg};
+    --highlight-bg: #{$highlightBg};
+    --highlight-text-color: #{$highlightTextColor};
+    color-scheme: light;
+}
--- a/src/assets/scss/gepafin/gepafin-theme.scss
+++ b/src/assets/scss/gepafin/gepafin-theme.scss
@@ -0,0 +1,4 @@
+@import './_variables.scss';
+@import './_fonts.scss';
+@import '../theme-base/_components.scss';
+@import './_extensions.scss';
--- a/src/assets/scss/gepafin/sassdoc/assets/css/main.css
+++ b/src/assets/scss/gepafin/sassdoc/assets/css/main.css
--- a/src/assets/scss/gepafin/sassdoc/assets/images/favicon.png
+++ b/src/assets/scss/gepafin/sassdoc/assets/images/favicon.png
--- a/src/assets/scss/gepafin/sassdoc/assets/images/logo_full_compact.svg
+++ b/src/assets/scss/gepafin/sassdoc/assets/images/logo_full_compact.svg
--- a/src/assets/scss/gepafin/sassdoc/assets/images/logo_full_inline.svg
+++ b/src/assets/scss/gepafin/sassdoc/assets/images/logo_full_inline.svg
--- a/src/assets/scss/gepafin/sassdoc/assets/images/logo_light_compact.svg
+++ b/src/assets/scss/gepafin/sassdoc/assets/images/logo_light_compact.svg
--- a/src/assets/scss/gepafin/sassdoc/assets/images/logo_light_inline.svg
+++ b/src/assets/scss/gepafin/sassdoc/assets/images/logo_light_inline.svg
--- a/src/assets/scss/gepafin/sassdoc/assets/js/main.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/main.js
@@ -0,0 +1,56 @@
+/* global document */
+
+(function ($, global) {
+  'use strict';
+
+  // Constructor
+  var App = function (conf) {
+    this.conf = $.extend({
+      // Search module
+      search: new global.Search(),
+
+      // Sidebar module
+      sidebar: new global.Sidebar(),
+
+      // Initialisation
+      init: true
+    }, conf || {});
+
+    // Launch the module
+    if (this.conf.init !== false) {
+      this.initialize();
+    }
+  };
+
+  // Initialisation method
+  App.prototype.initialize = function () {
+    this.codePreview();
+  };
+
+  // Toggle code preview collapsed/expanded modes
+  App.prototype.codePreview = function () {
+    var $item;
+    var $code;
+    var switchTo;
+
+    $('.item__code--togglable').on('click', function () {
+      $item = $(this);
+      $code = $item.find('code');
+      switchTo = $item.attr('data-current-state') === 'expanded' ? 'collapsed' : 'expanded';
+
+      $item.attr('data-current-state', switchTo);
+      $code.html($item.attr('data-' + switchTo));
+      Prism.highlightElement($code[0]);
+    });
+  };
+
+  global.App = App;
+}(window.jQuery, window));
+
+(function ($, global) {
+
+  $(document).ready(function () {
+    var app = new global.App();
+  });
+
+}(window.jQuery, window));
--- a/src/assets/scss/gepafin/sassdoc/assets/js/main.min.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/main.min.js
--- a/src/assets/scss/gepafin/sassdoc/assets/js/search.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/search.js
@@ -0,0 +1,146 @@
+(function ($, global) {
+
+  var Search = function (conf) {
+    this.conf = $.extend({
+      // Search DOM
+      search: {
+        items: '.sassdoc__item',
+        input: '#js-search-input',
+        form: '#js-search',
+        suggestionsWrapper: '#js-search-suggestions'
+      },
+
+      // Fuse options
+      fuse: {
+        keys: ['name'],
+        threshold: 0.3
+      },
+
+      init: true
+    }, conf || {});
+
+    if (this.conf.init === true) {
+      this.initialize();
+    }
+  };
+
+  Search.prototype.initialize = function () {
+    // Fuse engine instanciation
+    this.index = new Fuse($.map($(this.conf.search.items), function (item) {
+      var $item = $(item);
+
+      return {
+        group: $item.data('group'),
+        name: $item.data('name'),
+        type: $item.data('type'),
+        node: $item
+      };
+    }), this.conf.fuse);
+
+    this.initializeSearch();
+  };
+
+  // Fill DOM with search suggestions
+  Search.prototype.fillSuggestions = function (items) {
+    var searchSuggestions = $(this.conf.search.suggestionsWrapper);
+    searchSuggestions.html('');
+
+    var suggestions = $.map(items.slice(0, 10), function (item) {
+      var $li = $('<li />', {
+        'data-group': item.group,
+        'data-type': item.type,
+        'data-name': item.name,
+        'html': '<a href="#' + item.group + '-' + item.type + '-' + item.name + '"><code>' + item.type.slice(0, 3) + '</code> ' + item.name + '</a>'
+      });
+
+      searchSuggestions.append($li);
+      return $li;
+    });
+
+    return suggestions;
+  };
+
+  // Perform a search on a given term
+  Search.prototype.search = function (term) {
+    return this.fillSuggestions(this.index.search(term));
+  };
+
+  // Search logic
+  Search.prototype.initializeSearch = function () {
+    var searchForm = $(this.conf.search.form);
+    var searchInput = $(this.conf.search.input);
+    var searchSuggestions = $(this.conf.search.suggestionsWrapper);
+
+    var currentSelection = -1;
+    var suggestions = [];
+    var selected;
+
+    var self = this;
+
+    // Clicking on a suggestion
+    searchSuggestions.on('click', function (e) {
+      var target = $(event.target);
+
+      if (target.nodeName === 'A') {
+        searchInput.val(target.parent().data('name'));
+        suggestions = self.fillSuggestions([]);
+      }
+    });
+
+    // Filling the form
+    searchForm.on('keyup', function (e) {
+      e.preventDefault();
+
+      // Enter
+      if (e.keyCode === 13) {
+        if (selected) {
+          suggestions = self.fillSuggestions([]);
+          searchInput.val(selected.data('name'));
+          window.location = selected.children().first().attr('href');
+        }
+
+        e.stopPropagation();
+      }
+
+      // KeyDown
+      if (e.keyCode === 40) {
+        currentSelection = (currentSelection + 1) % suggestions.length;
+      }
+
+      // KeyUp
+      if (e.keyCode === 38) {
+        currentSelection = currentSelection - 1;
+
+        if (currentSelection < 0) {
+          currentSelection =  suggestions.length - 1;
+        }
+      }
+
+      if (suggestions[currentSelection]) {
+        if (selected) {
+          selected.removeClass('selected');
+        }
+
+        selected = suggestions[currentSelection];
+        selected.addClass('selected');
+      }
+
+    });
+
+    searchInput.on('keyup', function (e) {
+      if (e.keyCode !== 40 && e.keyCode !== 38) {
+        currentSelection = -1;
+        suggestions = self.search($(this).val());
+      }
+
+      else {
+        e.preventDefault();
+      }
+    }).on('search', function () {
+      suggestions = self.search($(this).val());
+    });
+  };
+
+  global.Search = Search;
+
+}(window.jQuery, window));
--- a/src/assets/scss/gepafin/sassdoc/assets/js/sidebar.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/sidebar.js
@@ -0,0 +1,163 @@
+(function ($, global) {
+
+  var Sidebar = function (conf) {
+    this.conf = $.extend({
+
+      // Collapsed class
+      collapsedClass: 'is-collapsed',
+
+      // Storage key
+      storageKey: '_sassdoc_sidebar_index',
+
+      // Index attribute
+      indexAttribute: 'data-slug',
+
+      // Toggle button
+      toggleBtn: '.js-btn-toggle',
+
+      // Automatic initialization
+      init: true
+    }, conf || {});
+
+    if (this.conf.init === true) {
+      this.initialize();
+    }
+  };
+
+  /**
+   * Initialize module
+   */
+  Sidebar.prototype.initialize = function () {
+    this.conf.nodes = $('[' + this.conf.indexAttribute + ']');
+
+    this.load();
+    this.updateDOM();
+    this.bind();
+    this.loadToggle();
+  };
+
+
+  /**
+   * Load sidebar toggle
+   */
+  Sidebar.prototype.loadToggle = function () {
+    $('<span />', {
+      'class': 'layout-toggle',
+      'html': '&times;',
+      'data-alt': '&#8594;'
+    }).appendTo( $('.header') );
+
+    $('.layout-toggle').on('click', function () {
+      var $this = $(this);
+      var alt;
+
+      $('body').toggleClass('sidebar-closed');
+
+      alt = $this.html();
+      $this.html($this.data('alt'));
+      $this.data('alt', alt);
+    });
+  };
+
+  /**
+   * Load data from storage or create fresh index
+   */
+  Sidebar.prototype.load = function () {
+    var index = 'localStorage' in global ?
+      global.localStorage.getItem(this.conf.storageKey) :
+      null;
+
+    this.index = index ? JSON.parse(index) : this.buildIndex();
+  };
+
+  /**
+   * Build a fresh index
+   */
+  Sidebar.prototype.buildIndex = function () {
+    var index = {};
+    var $item;
+
+    this.conf.nodes.each($.proxy(function (index, item) {
+      $item = $(item);
+
+      index[$item.attr(this.conf.indexAttribute)] = !$item.hasClass(this.conf.collapsedClass);
+    }, this));
+
+    return index;
+  };
+
+  /**
+   * Update DOM based on index
+   */
+  Sidebar.prototype.updateDOM = function () {
+    var item;
+
+    for (item in this.index) {
+      if (this.index[item] === false) {
+        $('[' + this.conf.indexAttribute + '="' + item + '"]').addClass(this.conf.collapsedClass);
+      }
+    }
+  };
+
+  /**
+   * Save index in storage
+   */
+  Sidebar.prototype.save = function () {
+    if (!('localStorage' in global)) {
+      return;
+    }
+
+    global.localStorage.setItem(this.conf.storageKey, JSON.stringify(this.index));
+  };
+
+  /**
+   * Bind UI events
+   */
+  Sidebar.prototype.bind = function () {
+    var $item, slug, fn, text;
+    var collapsed = false;
+
+    // Save index in localStorage
+    global.onbeforeunload = $.proxy(function () {
+      this.save();
+    }, this);
+
+    // Toggle all
+    $(this.conf.toggleBtn).on('click', $.proxy(function (event) {
+      $node = $(event.target);
+
+      text = $node.attr('data-alt');
+      $node.attr('data-alt', $node.text());
+      $node.text(text);
+
+      fn = collapsed === true ? 'removeClass' : 'addClass';
+
+      this.conf.nodes.each($.proxy(function (index, item) {
+        $item = $(item);
+        slug = $item.attr(this.conf.indexAttribute);
+
+        this.index[slug] = collapsed;
+
+        $('[' + this.conf.indexAttribute + '="' + slug + '"]')[fn](this.conf.collapsedClass);
+      }, this));
+
+      collapsed = !collapsed;
+      this.save();
+    }, this));
+
+    // Toggle item
+    this.conf.nodes.on('click', $.proxy(function (event) {
+      $item = $(event.target);
+      slug = $item.attr(this.conf.indexAttribute);
+
+      // Update index
+      this.index[slug] = !this.index[slug];
+
+      // Update DOM
+      $item.toggleClass(this.conf.collapsedClass);
+    }, this));
+  };
+
+  global.Sidebar = Sidebar;
+
+}(window.jQuery, window));
--- a/src/assets/scss/gepafin/sassdoc/assets/js/vendor/fuse.min.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/vendor/fuse.min.js
@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Fuse - Lightweight fuzzy-search
+ *
+ * Copyright (c) 2012 Kirollos Risk <kirollos@gmail.com>.
+ * All Rights Reserved. Apache Software License 2.0
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+!function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<<this.patternLen-1,this.patternAlphabet=this._calculatePatternAlphabet()};n.defaultOptions={location:0,distance:100,threshold:.6,maxPatternLength:32},n.prototype._calculatePatternAlphabet=function(){var t={},e=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]=0;for(e=0;e<this.patternLen;e++)t[this.pattern.charAt(e)]|=1<<this.pattern.length-e-1;return t},n.prototype._bitapScore=function(t,e){var n=t/this.patternLen,i=Math.abs(this.options.location-e);return this.options.distance?n+i/this.options.distance:i?1:n},n.prototype.search=function(t){if(t=this.options.caseSensitive?t:t.toLowerCase(),this.pattern===t)return{isMatch:!0,score:0};var e,n,i,o,s,r,a,h,p,c=t.length,l=this.options.location,u=this.options.threshold,f=t.indexOf(this.pattern,l),d=this.patternLen+c,g=1,m=[];for(-1!=f&&(u=Math.min(this._bitapScore(0,f),u),f=t.lastIndexOf(this.pattern,l+this.patternLen),-1!=f&&(u=Math.min(this._bitapScore(0,f),u))),f=-1,e=0;e<this.patternLen;e++){for(i=0,o=d;o>i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<<e)-1,n=r;n>=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this);
--- a/src/assets/scss/gepafin/sassdoc/assets/js/vendor/jquery.min.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/vendor/jquery.min.js
--- a/src/assets/scss/gepafin/sassdoc/assets/js/vendor/prism.min.js
+++ b/src/assets/scss/gepafin/sassdoc/assets/js/vendor/prism.min.js
@@ -0,0 +1,9 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+scss */
+var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){var s=t.tokenize(e,r);return n.stringify(t.util.encode(s),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);;
+Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&amp;/,"&"))});;
+Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});;
+Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});;
+Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
+Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});
+;
+Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
--- a/src/assets/scss/gepafin/variables/_button.scss
+++ b/src/assets/scss/gepafin/variables/_button.scss
@@ -0,0 +1,324 @@
+
+$buttonPadding: .5rem 1rem;
+
+
+$buttonIconOnlyWidth: 2.357rem;
+
+
+$buttonIconOnlyPadding: .5rem 0;
+
+
+$buttonBg: $primaryColor;
+
+
+$buttonTextColor: $primaryTextColor;
+
+
+$buttonBorder: 1px solid $primaryColor;
+
+
+$buttonHoverBg: $primaryDarkColor;
+
+
+$buttonTextHoverColor: $primaryTextColor;
+
+
+$buttonHoverBorderColor: $primaryDarkColor;
+
+
+$buttonActiveBg: $primaryDarkerColor;
+
+
+$buttonTextActiveColor: $primaryTextColor;
+
+
+$buttonActiveBorderColor: $primaryDarkerColor;
+
+
+$raisedButtonShadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+$roundedButtonBorderRadius: 2rem;
+
+
+$textButtonHoverBgOpacity:.04;
+
+
+$textButtonActiveBgOpacity:.16;
+
+
+$outlinedButtonBorder:1px solid;
+
+
+$plainButtonTextColor:#6c757d;
+
+
+$plainButtonHoverBgColor:#e9ecef;
+
+
+$plainButtonActiveBgColor:#dee2e6;
+
+
+$secondaryButtonBg: #607D8B;
+
+
+$secondaryButtonTextColor: #ffffff;
+
+
+$secondaryButtonBorder: 1px solid #607D8B;
+
+
+$secondaryButtonHoverBg: #546E7A;
+
+
+$secondaryButtonTextHoverColor: #ffffff;
+
+
+$secondaryButtonHoverBorderColor: #546E7A;
+
+$secondaryButtonActiveBg: #455A64;
+
+
+$secondaryButtonTextActiveColor: #ffffff;
+
+
+$secondaryButtonActiveBorderColor: #455A64;
+
+
+$secondaryButtonFocusShadow: 0 0 0 0.2rem #B0BEC5;
+
+
+$infoButtonBg: #03A9F4;
+
+
+$infoButtonTextColor: #ffffff;
+
+
+$infoButtonBorder: 1px solid #03A9F4;
+
+
+$infoButtonHoverBg: #039BE5;
+
+
+$infoButtonTextHoverColor: #ffffff;
+
+
+$infoButtonHoverBorderColor: #039BE5;
+
+
+$infoButtonActiveBg: #0288D1;
+
+
+$infoButtonTextActiveColor: #ffffff;
+
+
+$infoButtonActiveBorderColor: #0288D1;
+
+
+$infoButtonFocusShadow: 0 0 0 0.2rem lighten($infoButtonBg, 35%);
+
+
+$successButtonBg: #4CAF50;
+
+
+$successButtonTextColor: #ffffff;
+
+
+$successButtonBorder: 1px solid #4CAF50;
+
+
+$successButtonHoverBg: #43A047;
+
+
+$successButtonTextHoverColor: #ffffff;
+
+
+$successButtonHoverBorderColor: #43A047;
+
+
+$successButtonActiveBg: #388E3C;
+
+
+$successButtonTextActiveColor: #ffffff;
+
+
+$successButtonActiveBorderColor: #388E3C;
+
+
+$successButtonFocusShadow: 0 0 0 0.2rem lighten($successButtonBg, 35%);
+
+
+$warningButtonBg: #FFC107;
+
+
+$warningButtonTextColor: $textColor;
+
+
+$warningButtonBorder: 1px solid #FFC107;
+
+
+$warningButtonHoverBg: #FFB300;
+
+
+$warningButtonTextHoverColor: $textColor;
+
+
+$warningButtonHoverBorderColor: #FFB300;
+
+
+$warningButtonActiveBg: #FFA000;
+
+
+$warningButtonTextActiveColor: $textColor;
+
+
+$warningButtonActiveBorderColor: #FFA000;
+
+
+$warningButtonFocusShadow: 0 0 0 0.2rem lighten($warningButtonBg, 35%);
+
+
+$helpButtonBg:#9C27B0;
+
+
+$helpButtonTextColor:#ffffff;
+
+
+$helpButtonBorder:1px solid #9C27B0;
+
+
+$helpButtonHoverBg:#8E24AA;
+
+
+$helpButtonTextHoverColor:#ffffff;
+
+
+$helpButtonHoverBorderColor:#8E24AA;
+
+
+$helpButtonActiveBg:#7B1FA2;
+
+
+$helpButtonTextActiveColor:#ffffff;
+
+
+$helpButtonActiveBorderColor:#7B1FA2;
+
+
+$helpButtonFocusShadow:0 0 0 0.2rem #CE93D8;
+
+
+$dangerButtonBg: #f44336;
+
+
+$dangerButtonTextColor: #ffffff;
+
+
+$dangerButtonBorder: 1px solid #f44336;
+
+
+$dangerButtonHoverBg: #e53935;
+
+
+$dangerButtonTextHoverColor: #ffffff;
+
+
+$dangerButtonHoverBorderColor: #e53935;
+
+
+$dangerButtonActiveBg: #d32f2f;
+
+
+$dangerButtonTextActiveColor: #ffffff;
+
+
+$dangerButtonActiveBorderColor: #d32f2f;
+
+
+$dangerButtonFocusShadow: 0 0 0 0.2rem lighten($dangerButtonBg, 35%);
+
+
+$linkButtonColor:$primaryDarkerColor;
+
+
+$linkButtonHoverColor:$primaryDarkerColor;
+
+
+$linkButtonTextHoverDecoration:underline;
+
+
+$linkButtonFocusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+
+$toggleButtonBg: #ffffff;
+
+
+$toggleButtonBorder: 1px solid #ced4da;
+
+
+$toggleButtonTextColor: $textColor;
+
+
+$toggleButtonIconColor: $textSecondaryColor;
+
+
+$toggleButtonHoverBg: #e9ecef;
+
+
+$toggleButtonHoverBorderColor: #ced4da;
+
+
+$toggleButtonTextHoverColor: $textColor;
+
+
+$toggleButtonIconHoverColor: $textSecondaryColor;
+
+
+$toggleButtonActiveBg: $primaryColor;
+
+
+$toggleButtonActiveBorderColor: $primaryColor;
+
+
+$toggleButtonTextActiveColor: $primaryTextColor;
+
+
+$toggleButtonIconActiveColor: $primaryTextColor;
+
+
+$toggleButtonActiveHoverBg: $primaryDarkColor;
+
+
+$toggleButtonActiveHoverBorderColor: $primaryDarkColor;
+
+
+$toggleButtonTextActiveHoverColor: $primaryTextColor;
+
+
+$toggleButtonIconActiveHoverColor: $primaryTextColor;
+
+
+$speedDialButtonWidth: 4rem;
+
+
+$speedDialButtonHeight: 4rem;
+
+
+$speedDialButtonIconFontSize: 1.3rem;
+
+
+$speedDialActionWidth: 3rem;
+
+
+$speedDialActionHeight: 3rem;
+
+
+$speedDialActionBg: #495057;
+
+
+$speedDialActionHoverBg: #343a40;
+
+
+$speedDialActionTextColor: #fff;
+
+
+$speedDialActionTextHoverColor: #fff;
--- a/src/assets/scss/gepafin/variables/_data.scss
+++ b/src/assets/scss/gepafin/variables/_data.scss
@@ -0,0 +1,350 @@
+
+
+$paginatorBg: #ffffff;
+
+
+
+$paginatorTextColor: $textSecondaryColor;
+
+
+
+$paginatorBorder: solid #e9ecef;
+
+
+
+$paginatorBorderWidth: 0;
+
+
+
+$paginatorPadding: .5rem 1rem;
+
+
+
+$paginatorElementWidth: $buttonIconOnlyWidth;
+
+
+
+$paginatorElementHeight: $buttonIconOnlyWidth;
+
+
+
+$paginatorElementBg: transparent;
+
+
+
+$paginatorElementBorder: 0 none;
+
+
+
+$paginatorElementIconColor: $textSecondaryColor;
+
+
+
+$paginatorElementHoverBg: #e9ecef;
+
+
+
+$paginatorElementHoverBorderColor: transparent;
+
+
+
+$paginatorElementIconHoverColor: $textSecondaryColor;
+
+
+
+$paginatorElementBorderRadius: $borderRadius;
+
+
+
+$paginatorElementMargin: .143rem;
+
+
+
+$paginatorElementPadding: 0;
+
+
+
+$tableHeaderBorder: 1px solid #e9ecef;
+
+
+
+$tableHeaderBorderWidth: 0 0 1px 0;
+
+
+
+$tableHeaderBg: #f8f9fa;
+
+
+
+$tableHeaderTextColor: $textColor;
+
+
+
+$tableHeaderFontWeight: 600;
+
+
+
+$tableHeaderPadding: 1rem 1rem;
+
+
+
+$tableHeaderCellPadding: 1rem 1rem;
+
+
+
+$tableHeaderCellBg: #f8f9fa;
+
+
+
+$tableHeaderCellTextColor: $textColor;
+
+
+
+$tableHeaderCellFontWeight: 600;
+
+
+
+$tableHeaderCellBorder: 1px solid #e9ecef;
+
+
+
+$tableHeaderCellBorderWidth: 0 0 1px 0;
+
+
+
+$tableHeaderCellHoverBg: #e9ecef;
+
+
+
+$tableHeaderCellTextHoverColor: $textColor;
+
+
+
+$tableHeaderCellIconColor: $textSecondaryColor;
+
+
+
+$tableHeaderCellIconHoverColor: $textSecondaryColor;
+
+
+
+$tableHeaderCellHighlightBg:#f8f9fa;
+
+
+
+$tableHeaderCellHighlightTextColor:$primaryColor;
+
+
+
+$tableHeaderCellHighlightHoverBg:#e9ecef;
+
+
+
+$tableHeaderCellHighlightTextHoverColor:$primaryColor;
+
+
+
+$tableSortableColumnBadgeSize: 1.143rem;
+
+
+
+$tableBodyRowBg: #ffffff;
+
+
+
+$tableBodyRowTextColor: $textColor;
+
+
+
+$tableBodyRowEvenBg: #ffffff;
+
+
+
+$tableBodyRowHoverBg: #e9ecef;
+
+
+
+$tableBodyRowTextHoverColor: $textColor;
+
+
+
+$tableBodyCellBorder: 1px solid rgba(0,0,0,0.08);
+
+
+
+$tableBodyCellBorderWidth: 0 0 1px 0;
+
+
+
+$tableBodyCellPadding: 1rem 1rem;
+
+
+
+$tableFooterCellPadding: 1rem 1rem;
+
+
+
+$tableFooterCellBg: #f8f9fa;
+
+
+
+$tableFooterCellTextColor: $textColor;
+
+
+
+$tableFooterCellFontWeight: 600;
+
+
+
+
+
+
+$tableFooterCellBorder: 1px solid #e9ecef;
+
+
+
+$tableFooterCellBorderWidth: 0 0 1px 0;
+
+
+
+$tableResizerHelperBg: $primaryColor;
+
+
+
+$tableDragHelperBg: rgba($primaryColor, .16);
+
+
+
+$tableFooterBorder: 1px solid #e9ecef;
+
+
+
+$tableFooterBorderWidth: 0 0 1px 0;
+
+
+
+$tableFooterBg: #f8f9fa;
+
+
+
+$tableFooterTextColor: $textColor;
+
+
+
+$tableFooterFontWeight: 600;
+
+
+
+$tableFooterPadding: 1rem 1rem;
+
+
+
+$tableCellContentAlignment: left;
+
+
+
+$tableTopPaginatorBorderWidth: 1px 0 1px 0;
+
+
+
+$tableBottomPaginatorBorderWidth: 0 0 1px 0;
+
+
+
+$tableScaleSM: 0.5;
+
+
+
+$tableScaleLG: 1.25;
+
+
+
+$dataViewContentPadding: 0;
+
+
+
+$dataViewContentBorder: 0 none;
+
+
+
+$dataViewListItemBorder: solid #e9ecef;
+
+
+
+$dataViewListItemBorderWidth: 0 0 1px 0;
+
+
+
+$dataScrollerContentPadding: 0;
+
+
+
+$dataScrollerContentBorder: 0 none;
+
+
+
+$dataScrollerListItemBorder: solid #e9ecef;
+
+
+
+$dataScrollerListItemBorderWidth: 0 0 1px 0;
+
+
+
+$treeContainerPadding: 0.286rem;
+
+
+
+$treeNodePadding: 0.143rem;
+
+
+
+$treeNodeContentPadding: .5rem;
+
+
+
+$treeNodeChildrenPadding: 0 0 0 1rem;
+
+
+
+$treeNodeIconColor: $textSecondaryColor;
+
+
+
+$timelineVerticalEventContentPadding:0 1rem;
+
+
+
+$timelineHorizontalEventContentPadding:1rem 0;
+
+
+
+$timelineEventMarkerWidth:1rem;
+
+
+
+$timelineEventMarkerHeight:1rem;
+
+
+
+$timelineEventMarkerBorderRadius:50%;
+
+
+
+$timelineEventMarkerBorder:2px solid $highlightBg;
+
+
+
+$timelineEventMarkerBackground:$highlightTextColor;
+
+
+
+$timelineEventConnectorSize:2px;
+
+
+
+$timelineEventColor:#dee2e6;
+
+
+
+$organizationChartConnectorColor: #dee2e6;
--- a/src/assets/scss/gepafin/variables/_form.scss
+++ b/src/assets/scss/gepafin/variables/_form.scss
@@ -0,0 +1,559 @@
+
+
+$inputPadding: 0.5rem 0.5rem;
+
+
+
+$inputBg: #ffffff;
+
+
+
+$inputTextFontSize: 1rem;
+
+
+
+$inputTextColor: $textColor;
+
+
+
+$inputIconColor: $textColor;
+
+
+
+$inputBorder: 1px solid #ced4da;
+
+
+
+$inputHoverBorderColor: $primaryColor;
+
+
+
+$inputFocusBorderColor: $primaryColor;
+
+
+
+$inputErrorBorderColor: #ced4da #ced4da #ced4da $errorColor;
+
+
+
+$inputPlaceholderTextColor: #6c757d;
+
+
+
+$inputFilledBg: #f8f9fa;
+
+
+
+$inputFilledHoverBg: #f8f9fa;
+
+
+
+$inputFilledFocusBg: #f8f9fa;
+
+
+
+$inputGroupBg: #e9ecef;
+
+
+
+$inputGroupTextColor: $textSecondaryColor;
+
+
+
+$inputGroupAddOnMinWidth: 2.357rem;
+
+
+
+$inputListBg: #ffffff;
+
+
+
+$inputListTextColor: $textColor;
+
+
+
+$inputListBorder: $inputBorder;
+
+
+
+$inputListPadding: 0.5rem 0;
+
+
+
+$inputListItemPadding: 0.5rem 1rem;
+
+
+
+$inputListItemBg: transparent;
+
+
+
+$inputListItemTextColor: $textColor;
+
+
+
+$inputListItemHoverBg: #e9ecef;
+
+
+
+$inputListItemTextHoverColor: $textColor;
+
+
+
+$inputListItemTextFocusColor: $textColor;
+
+
+
+$inputListItemFocusBg: #f8f9fa;
+
+
+
+$inputListItemBorder: 0 none;
+
+
+
+$inputListItemBorderRadius: 0;
+
+
+
+$inputListItemMargin: 0;
+
+
+
+$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor;
+
+
+
+$inputListHeaderPadding: 0.5rem 1rem;
+
+
+
+$inputListHeaderMargin: 0;
+
+
+
+$inputListHeaderBg: #f8f9fa;
+
+
+
+$inputListHeaderTextColor: $textColor;
+
+
+
+$inputListHeaderBorder: 0 none;
+
+
+
+$inputOverlayBg: $inputListBg;
+
+
+
+$inputOverlayHeaderBg: $inputListHeaderBg;
+
+
+
+$inputOverlayBorder: 0 none;
+
+
+
+$inputOverlayShadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+
+
+
+$checkboxWidth: 20px;
+
+
+
+$checkboxHeight: 20px;
+
+
+
+$checkboxBorder: 2px solid #ced4da;
+
+
+
+$checkboxIconFontSize: 14px;
+
+
+
+$checkboxActiveBorderColor: $primaryColor;
+
+
+
+$checkboxActiveBg: $primaryColor;
+
+
+
+$checkboxIconActiveColor: $primaryTextColor;
+
+
+
+$checkboxActiveHoverBg: $primaryDarkerColor;
+
+
+
+$checkboxIconActiveHoverColor: $primaryTextColor;
+
+
+
+$checkboxActiveHoverBorderColor: $primaryDarkerColor;
+
+
+
+$radiobuttonWidth: 20px;
+
+
+
+$radiobuttonHeight: 20px;
+
+
+
+$radiobuttonBorder: 2px solid #ced4da;
+
+
+
+$radiobuttonIconSize: 12px;
+
+
+
+$radiobuttonActiveBorderColor: $primaryColor;
+
+
+
+$radiobuttonActiveBg: $primaryColor;
+
+
+
+$radiobuttonIconActiveColor: $primaryTextColor;
+
+
+
+$radiobuttonActiveHoverBg: $primaryDarkerColor;
+
+
+
+$radiobuttonIconActiveHoverColor: $primaryTextColor;
+
+
+
+$radiobuttonActiveHoverBorderColor: $primaryDarkerColor;
+
+
+
+$colorPickerPreviewWidth: 2rem;
+
+
+
+$colorPickerPreviewHeight: 2rem;
+
+
+
+$colorPickerBg: #323232;
+
+
+
+$colorPickerBorder: 1px solid #191919;
+
+
+
+$colorPickerHandleColor: #ffffff;
+
+
+
+$ratingIconFontSize: 1.143rem;
+
+
+
+$ratingCancelIconColor: #e74c3c;
+
+
+
+$ratingCancelIconHoverColor: #c0392b;
+
+
+
+$ratingStarIconOffColor: $textColor;
+
+
+
+$ratingStarIconOnColor: $primaryColor;
+
+
+
+$ratingStarIconHoverColor: $primaryColor;
+
+
+
+$sliderBg: #dee2e6;
+
+
+
+$sliderBorder: 0 none;
+
+
+
+$sliderHorizontalHeight: 0.286rem;
+
+
+
+$sliderVerticalWidth: 0.286rem;
+
+
+
+$sliderHandleWidth: 1.143rem;
+
+
+
+$sliderHandleHeight: 1.143rem;
+
+
+
+$sliderHandleBg: #ffffff;
+
+
+
+$sliderHandleBorder: 2px solid $primaryColor;
+
+
+
+$sliderHandleBorderRadius: 50%;
+
+
+
+$sliderHandleHoverBorderColor: $primaryColor;
+
+
+
+$sliderHandleHoverBg: $primaryColor;
+
+
+
+$sliderRangeBg: $primaryColor;
+
+
+
+$calendarTableMargin: 0.5rem 0;
+
+
+
+$calendarPadding: 0.5rem;
+
+
+
+$calendarBg: #ffffff;
+
+
+
+$calendarInlineBg: $calendarBg;
+
+
+
+$calendarTextColor: $textColor;
+
+
+
+$calendarBorder: $inputListBorder;
+
+
+
+$calendarOverlayBorder: $inputOverlayBorder;
+
+
+
+$calendarHeaderPadding: 0.5rem;
+
+
+
+$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
+
+
+
+$calendarHeaderBg: #ffffff;
+
+
+
+$calendarInlineHeaderBg: $calendarBg;
+
+
+
+$calendarHeaderBorder: 1px solid #dee2e6;
+
+
+
+$calendarHeaderTextColor: $textColor;
+
+
+
+$calendarHeaderFontWeight: 600;
+
+
+
+$calendarHeaderCellPadding: 0.5rem;
+
+
+
+$calendarCellDatePadding: 0.5rem;
+
+
+
+$calendarCellDateWidth: 2.5rem;
+
+
+
+$calendarCellDateHeight: 2.5rem;
+
+
+
+$calendarCellDateBorderRadius: 50%;
+
+
+
+$calendarCellDateBorder: 1px solid transparent;
+
+
+
+$calendarCellDateHoverBg: #e9ecef;
+
+
+
+$calendarCellDateTodayBg: #ced4da;
+
+
+
+$calendarCellDateTodayBorderColor: transparent;
+
+
+
+$calendarCellDateTodayTextColor: $textColor;
+
+
+
+$calendarButtonBarPadding: 1rem 0;
+
+
+
+$calendarTimePickerPadding: 0.5rem;
+
+
+
+$calendarTimePickerElementPadding: 0 0.429rem;
+
+
+
+$calendarTimePickerTimeFontSize: 1.286rem;
+
+
+
+$calendarBreakpoint: 769px;
+
+
+
+$calendarCellDatePaddingSM: 0;
+
+
+
+$inputSwitchWidth: 3rem;
+
+
+
+$inputSwitchHeight: 1.75rem;
+
+
+
+$inputSwitchBorderRadius: 30px;
+
+
+
+$inputSwitchHandleWidth: 1.25rem;
+
+
+
+$inputSwitchHandleHeight: 1.25rem;
+
+
+
+$inputSwitchHandleBorderRadius: 50%;
+
+
+
+$inputSwitchSliderPadding: 0.25rem;
+
+
+
+$inputSwitchSliderOffBg: #ced4da;
+
+
+
+$inputSwitchHandleOffBg: #ffffff;
+
+
+
+$inputSwitchSliderOffHoverBg: #c3cad2;
+
+
+
+$inputSwitchSliderOnBg: $primaryColor;
+
+
+
+$inputSwitchSliderOnHoverBg: $primaryDarkColor;
+
+
+
+$inputSwitchHandleOnBg: #ffffff;
+
+
+
+$fileUploadProgressBarHeight: 0.25rem;
+
+
+
+$fileUploadContentPadding: 2rem 1rem;
+
+
+
+$editorToolbarBg: #f8f9fa;
+
+
+
+$editorToolbarBorder: 1px solid #dee2e6;
+
+
+
+$editorToolbarPadding: 1rem;
+
+
+
+$editorToolbarIconColor: #6c757d;
+
+
+
+$editorToolbarIconHoverColor: #495057;
+
+
+
+$editorIconActiveColor: $primaryColor;
+
+
+
+$editorContentBorder: 1px solid #dee2e6;
+
+
+
+$editorContentBg: #ffffff;
+
+
+
+$passwordMeterBg: #dee2e6;
+
+
+
+$passwordWeakBg: #e53935;
+
+
+
+$passwordMediumBg: #ffb300;
+
+
+
+$passwordStrongBg: #43a047;
--- a/src/assets/scss/gepafin/variables/_general.scss
+++ b/src/assets/scss/gepafin/variables/_general.scss
@@ -0,0 +1,144 @@
+
+
+$fontFamily: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+	Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+
+
+$fontSize: 1rem;
+
+
+
+$fontWeight: normal;
+
+
+
+$textColor: #495057;
+
+
+
+$textSecondaryColor: #6c757d;
+
+
+
+$highlightBg: $primaryColor;
+
+
+
+$highlightTextColor: $primaryTextColor;
+
+
+
+$highlightFocusBg: rgba($primaryColor, 0.24) !default;
+
+
+
+$borderRadius: 3px;
+
+
+
+$transitionDuration: 0.2s;
+
+
+
+$formElementTransition: background-color $transitionDuration,
+	color $transitionDuration, border-color $transitionDuration,
+	box-shadow $transitionDuration;
+
+
+
+$actionIconTransition: background-color $transitionDuration,
+	color $transitionDuration, box-shadow $transitionDuration;
+
+
+
+$listItemTransition: background-color $transitionDuration,
+	border-color $transitionDuration, box-shadow $transitionDuration;
+
+
+
+$primeIconFontSize: 1rem;
+
+
+
+$divider: 1px solid #dee2e6;
+
+
+
+$inlineSpacing: 0.5rem;
+
+
+
+$disabledOpacity: 0.8;
+
+
+
+$maskBg: rgba(0, 0, 0, 0.4);
+
+
+
+$loadingIconFontSize: 2rem;
+
+
+
+$errorColor: #e4677e;
+
+
+
+$focusOutlineColor: #bfd1f6;
+
+
+
+$focusOutline: 0 none;
+
+
+
+$focusOutlineOffset: 0;
+
+
+
+$focusShadow: 0 0 0 0.2rem $focusOutlineColor;
+
+
+
+$actionIconWidth: 2rem;
+
+
+
+$actionIconHeight: 2rem;
+
+
+
+$actionIconBg: transparent;
+
+
+
+$actionIconBorder: 0 none;
+
+
+
+$actionIconColor: $textSecondaryColor;
+
+
+
+$actionIconHoverBg: #e9ecef;
+
+
+
+$actionIconHoverBorderColor: transparent;
+
+
+
+$actionIconHoverColor: $textColor;
+
+
+
+$actionIconBorderRadius: 50%;
+
+
+
+$scaleSM: 0.875;
+
+
+
+$scaleLG: 1.25;
--- a/src/assets/scss/gepafin/variables/_media.scss
+++ b/src/assets/scss/gepafin/variables/_media.scss
@@ -0,0 +1,231 @@
+
+
+$carouselIndicatorsPadding: 1rem;
+
+
+
+$carouselIndicatorBg: #e9ecef;
+
+
+
+$carouselIndicatorHoverBg: #dee2e6;
+
+
+
+$carouselIndicatorBorderRadius: 0;
+
+
+
+$carouselIndicatorWidth: 2rem;
+
+
+
+$carouselIndicatorHeight: .5rem;
+
+
+
+$galleriaMaskBg: rgba(0,0,0,0.9);
+
+
+
+$galleriaCloseIconMargin: .5rem;
+
+
+
+$galleriaCloseIconFontSize: 2rem;
+
+
+
+$galleriaCloseIconBg: transparent;
+
+
+
+$galleriaCloseIconColor: #ebedef;
+
+
+
+$galleriaCloseIconHoverBg: rgba(255,255,255,0.1);
+
+
+
+$galleriaCloseIconHoverColor: #ebedef;
+
+
+
+$galleriaCloseIconWidth: 4rem;
+
+
+
+$galleriaCloseIconHeight: 4rem;
+
+
+
+$galleriaCloseIconBorderRadius: 50%;
+
+
+
+$galleriaItemNavigatorBg: rgba(0,0,0,.2);
+
+
+
+$galleriaItemNavigatorColor: #aeb6bf;
+
+
+
+$galleriaItemNavigatorMargin: .5rem 0;
+
+
+
+$galleriaItemNavigatorFontSize: 2rem;
+
+
+
+$galleriaItemNavigatorHoverBg: rgba(0,0,0,.3);
+
+
+
+$galleriaItemNavigatorHoverColor: #ebedef;
+
+
+
+$galleriaItemNavigatorWidth: 4rem;
+
+
+
+$galleriaItemNavigatorHeight: 4rem;
+
+
+
+$galleriaItemNavigatorBorderRadius: $borderRadius;
+
+
+
+$galleriaCaptionBg: rgba(0,0,0,.5);
+
+
+
+$galleriaCaptionTextColor: #ebedef;
+
+
+
+$galleriaCaptionPadding: 1rem;
+
+
+
+$galleriaIndicatorsPadding: 1rem;
+
+
+
+$galleriaIndicatorBg: #e9ecef;
+
+
+
+$galleriaIndicatorHoverBg: #dee2e6;
+
+
+
+$galleriaIndicatorBorderRadius: 50%;
+
+
+
+$galleriaIndicatorWidth: 1rem;
+
+
+
+$galleriaIndicatorHeight: 1rem;
+
+
+
+$galleriaIndicatorsBgOnItem: rgba(0,0,0,.5);
+
+
+
+$galleriaIndicatorBgOnItem: rgba(255,255,255,.4);
+
+
+
+$galleriaIndicatorHoverBgOnItem: rgba(255,255,255,.6);
+
+
+
+$galleriaThumbnailContainerBg: rgba(0,0,0,.9);
+
+
+
+$galleriaThumbnailContainerPadding: 1rem .25rem;
+
+
+
+$galleriaThumbnailNavigatorBg: transparent;
+
+
+
+$galleriaThumbnailNavigatorColor: #aeb6bf;
+
+
+
+$galleriaThumbnailNavigatorHoverBg: rgba(255,255,255,0.1);
+
+
+
+$galleriaThumbnailNavigatorHoverColor: #aeb6bf;
+
+
+
+$galleriaThumbnailNavigatorBorderRadius: 50%;
+
+
+
+$galleriaThumbnailNavigatorWidth: 2rem;
+
+
+
+$galleriaThumbnailNavigatorHeight: 2rem;
+
+
+
+$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;
--- a/src/assets/scss/gepafin/variables/_menu.scss
+++ b/src/assets/scss/gepafin/variables/_menu.scss
@@ -0,0 +1,287 @@
+
+
+$stepsItemBg: #ffffff;
+
+
+
+$stepsItemBorder: 1px solid #c8c8c8;
+
+
+
+$stepsItemTextColor: $textSecondaryColor;
+
+
+
+$stepsItemNumberWidth: 2rem;
+
+
+
+$stepsItemNumberHeight: 2rem;
+
+
+
+$stepsItemNumberFontSize: 1.143rem;
+
+
+
+$stepsItemNumberColor: $textColor;
+
+
+
+$stepsItemNumberBorderRadius: 50%;
+
+
+
+$stepsItemActiveFontWeight: 600;
+
+
+
+$menuWidth: 12.5rem;
+
+
+
+$menuBg: #ffffff;
+
+
+
+$menuBorder: 1px solid #dee2e6;
+
+
+
+$menuTextColor: $textColor;
+
+
+
+$menuitemPadding: 0.75rem 1rem;
+
+
+
+$menuitemBorderRadius: 0;
+
+
+
+$menuitemTextColor: $textColor;
+
+
+
+$menuitemIconColor: $textSecondaryColor;
+
+
+
+$menuitemTextHoverColor: $textColor;
+
+
+
+$menuitemIconHoverColor: $textSecondaryColor;
+
+
+
+$menuitemHoverBg: #e9ecef;
+
+
+
+$menuitemTextFocusColor: $textColor;
+
+
+
+$menuitemIconFocusColor: $textColor;
+
+
+
+$menuitemFocusBg: #f8f9fa;
+
+
+
+$menuitemTextActiveColor: $textColor;
+
+
+
+$menuitemIconActiveColor: $textSecondaryColor;
+
+
+
+$menuitemActiveBg: #e9ecef;
+
+
+
+$menuitemActiveFocusBg: #e9ecef;
+
+
+
+$menuitemSubmenuIconFontSize: 0.875rem;
+
+
+
+$submenuHeaderMargin: 0;
+
+
+
+$submenuHeaderPadding: 0.75rem 1rem;
+
+
+
+$submenuHeaderBg: #ffffff;
+
+
+
+$submenuHeaderTextColor: $textColor;
+
+
+
+$submenuHeaderBorderRadius: 0;
+
+
+
+$submenuHeaderFontWeight: 600;
+
+
+
+$overlayMenuBg: $menuBg;
+
+
+
+$overlayMenuBorder: 0 none;
+
+
+
+$overlayMenuShadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
+
+
+
+$verticalMenuPadding: 0.25rem 0;
+
+
+
+$menuSeparatorMargin: 0.25rem 0;
+
+
+
+$breadcrumbPadding: 1rem;
+
+
+
+$breadcrumbBg: $menuBg;
+
+
+
+$breadcrumbBorder: $menuBorder;
+
+
+
+$breadcrumbItemTextColor: $menuitemTextColor;
+
+
+
+$breadcrumbItemIconColor: $menuitemIconColor;
+
+
+
+$breadcrumbLastItemTextColor: $menuitemTextColor;
+
+
+
+$breadcrumbLastItemIconColor: $menuitemIconColor;
+
+
+
+$breadcrumbSeparatorColor: $menuitemTextColor;
+
+
+
+$horizontalMenuPadding: 0.5rem;
+
+
+
+$horizontalMenuBg: #f8f9fa;
+
+
+
+$horizontalMenuBorder: $menuBorder;
+
+
+
+$horizontalMenuTextColor: $menuTextColor;
+
+
+
+$horizontalMenuRootMenuitemPadding: $menuitemPadding;
+
+
+
+$horizontalMenuRootMenuitemBorderRadius: $borderRadius;
+
+
+
+$horizontalMenuRootMenuitemTextColor: $menuitemTextColor;
+
+
+
+$horizontalMenuRootMenuitemIconColor: $menuitemIconColor;
+
+
+
+$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor;
+
+
+
+$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor;
+
+
+
+$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg;
+
+
+
+$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor;
+
+
+
+$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor;
+
+
+
+$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg;
+
+
+
+$dockActionWidth: 4rem;
+
+
+
+$dockActionHeight: 4rem;
+
+
+
+$dockItemPadding: 0.5rem;
+
+
+
+$dockItemBorderRadius: $borderRadius;
+
+
+
+$dockCurrentItemMargin: 1.5rem;
+
+
+
+$dockFirstItemsMargin: 1.3rem;
+
+
+
+$dockSecondItemsMargin: 0.9rem;
+
+
+
+$dockBg: rgba(255, 255, 255, 0.1);
+
+
+
+$dockBorder: 1px solid rgba(255, 255, 255, 0.2);
+
+
+
+$dockPadding: 0.5rem 0.5rem;
+
+
+
+$dockBorderRadius: 0.5rem;
--- a/src/assets/scss/gepafin/variables/_message.scss
+++ b/src/assets/scss/gepafin/variables/_message.scss
@@ -0,0 +1,143 @@
+
+
+$messageMargin: 1rem 0;
+
+
+
+$messagePadding: 1rem 1.5rem;
+
+
+
+$messageBorderWidth: 0 0 0 4px;
+
+
+
+$messageIconFontSize: 1.5rem;
+
+
+
+$messageTextFontSize: 1rem;
+
+
+
+$messageTextFontWeight: 500;
+
+
+
+$inlineMessagePadding: $inputPadding;
+
+
+
+$inlineMessageMargin: 0;
+
+
+
+$inlineMessageIconFontSize: 1rem;
+
+
+
+$inlineMessageTextFontSize: 1rem;
+
+
+
+$inlineMessageBorderWidth: 1px;
+
+
+
+$toastIconFontSize: 2rem;
+
+
+
+$toastMessageTextMargin: 0 0 0 1rem;
+
+
+
+$toastMargin: 0 0 1rem 0;
+
+
+
+$toastPadding: 1rem;
+
+
+
+$toastBorderWidth: 0 0 0 4px;
+
+
+
+$toastShadow: 0 3px 14px 0 rgba(0, 0, 0, 0.3);
+
+
+
+$toastOpacity: .9;
+
+
+
+$toastTitleFontWeight: 700;
+
+
+
+$toastDetailMargin: $inlineSpacing 0 0 0;
+
+
+
+$infoMessageBg: #039BE5;
+
+
+
+$infoMessageBorder: solid #027cb7;
+
+
+
+$infoMessageTextColor: #ffffff;
+
+
+
+$infoMessageIconColor: #ffffff;
+
+
+
+$successMessageBg: #43A047;
+
+
+
+$successMessageBorder: 0 none;
+
+
+
+$successMessageTextColor: #ffffff;
+
+
+
+$successMessageIconColor: #ffffff;
+
+
+
+$warningMessageBg: #FFB300;
+
+
+
+$warningMessageBorder: 0 none;
+
+
+
+$warningMessageTextColor: $textColor;
+
+
+
+$warningMessageIconColor: $textColor;
+
+
+
+$errorMessageBg: #E53935;
+
+
+
+$errorMessageBorder: 0 none;
+
+
+
+$errorMessageTextColor: #ffffff;
+
+
+
+$errorMessageIconColor: #ffffff;
--- a/src/assets/scss/gepafin/variables/_misc.scss
+++ b/src/assets/scss/gepafin/variables/_misc.scss
@@ -0,0 +1,113 @@
+
+
+$inplacePadding: $inputPadding;
+
+
+
+$inplaceHoverBg: #e9ecef;
+
+
+
+$inplaceTextHoverColor: $textColor;
+
+
+
+$badgeBg: $primaryColor;
+
+
+
+$badgeTextColor: $primaryTextColor;
+
+
+
+$badgeMinWidth: 1.5rem;
+
+
+
+$badgeHeight: 1.5rem;
+
+
+
+$badgeFontWeight: 700;
+
+
+
+$badgeFontSize: .75rem;
+
+
+
+$tagPadding: .25rem .4rem;
+
+
+
+$progressBarHeight: 1.5rem;
+
+
+
+$progressBarBorder: 0 none;
+
+
+
+$progressBarBg: #dee2e6;
+
+
+
+$progressBarValueBg: $primaryColor;
+
+
+$progressBarValueTextColor:$primaryTextColor;
+
+
+$avatarBg:#dee2e6;
+
+
+
+$avatarTextColor:$textColor;
+
+
+
+$chipBg:#dee2e6;
+
+
+
+$chipTextColor:$textColor;
+
+
+
+$chipBorderRadius:16px;
+
+
+
+$scrollTopBg:rgba(0,0,0,0.7);
+
+
+
+$scrollTopHoverBg:rgba(0,0,0,0.8);
+
+
+
+$scrollTopWidth:3rem;
+
+
+
+$scrollTopHeight:3rem;
+
+
+
+$scrollTopBorderRadius:50%;
+
+
+
+$scrollTopFontSize:1.5rem;
+
+
+
+$scrollTopTextColor:#f8f9fa;
+
+
+
+$skeletonBg:#e9ecef;
+
+
+
+$skeletonAnimationBg:rgba(255,255,255,0.4);
--- a/src/assets/scss/gepafin/variables/_overlay.scss
+++ b/src/assets/scss/gepafin/variables/_overlay.scss
@@ -0,0 +1,67 @@
+
+
+$overlayContentBorder: 0 none;
+
+
+
+$overlayContentBg:$panelContentBg;
+
+
+
+$overlayContainerShadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
+
+
+
+$dialogHeaderBg: #ffffff;
+
+
+
+$dialogHeaderBorder: 1px solid #dee2e6;
+
+
+
+$dialogHeaderTextColor: $panelHeaderTextColor;
+
+
+
+$dialogHeaderFontWeight: 600;
+
+
+
+$dialogHeaderFontSize: 1.25rem;
+
+
+
+$dialogHeaderPadding: 1.5rem;
+
+
+
+$dialogContentPadding: 0 1.5rem;
+
+
+
+$dialogFooterBorder: 1px solid #dee2e6;
+
+
+
+$dialogFooterPadding: 1.5rem;
+
+
+
+$confirmPopupContentPadding:$panelContentPadding;
+
+
+
+$confirmPopupFooterPadding:0 1rem 1rem 1rem;
+
+
+
+$tooltipBg: $textColor;
+
+
+
+$tooltipTextColor: #ffffff;
+
+
+
+$tooltipPadding: $inputPadding;
--- a/src/assets/scss/gepafin/variables/_panel.scss
+++ b/src/assets/scss/gepafin/variables/_panel.scss
@@ -0,0 +1,316 @@
+
+
+$panelHeaderBorderColor: #dee2e6;
+
+
+
+$panelHeaderBorder: 1px solid #dee2e6;
+
+
+
+$panelHeaderBg: #f8f9fa;
+
+
+
+$panelHeaderTextColor: $textColor;
+
+
+
+$panelHeaderFontWeight: 600;
+
+
+
+$panelHeaderPadding: 1rem;
+
+
+
+$panelToggleableHeaderPadding: .5rem 1rem;
+
+
+
+
+$panelContentBorderColor: #dee2e6;
+
+
+
+$panelContentBorder: 1px solid #dee2e6;
+
+
+
+$panelContentBg: #ffffff;
+
+
+
+$panelContentEvenRowBg: #e9ecef;
+
+
+
+$panelContentTextColor: $textColor;
+
+
+
+$panelContentPadding: 1rem;
+
+
+
+$panelFooterBorder: 1px solid #dee2e6;
+
+
+
+$panelFooterBg: #ffffff;
+
+
+
+$panelFooterTextColor: $textColor;
+
+
+
+$panelFooterPadding: 0.5rem 1rem;
+
+
+
+$accordionSpacing: 0;
+
+
+
+$accordionHeaderBorder: $panelHeaderBorder;
+
+
+
+$accordionHeaderBg: $panelHeaderBg;
+
+
+
+$accordionHeaderTextColor: $panelHeaderTextColor;
+
+
+
+$accordionHeaderFontWeight: $panelHeaderFontWeight;
+
+
+
+$accordionHeaderPadding: $panelHeaderPadding;
+
+
+
+$accordionHeaderHoverBg: #e9ecef;
+
+
+
+$accordionHeaderHoverBorderColor: $panelHeaderBorder;
+
+
+
+$accordionHeaderTextHoverColor: $textColor;
+
+
+
+$accordionHeaderActiveBg: $panelHeaderBg;
+
+
+
+$accordionHeaderActiveBorderColor: #dee2e6;
+
+
+
+$accordionHeaderTextActiveColor: $textColor;
+
+
+
+$accordionHeaderActiveHoverBg: #e9ecef;
+
+
+
+$accordionHeaderActiveHoverBorderColor: #dee2e6;
+
+
+
+$accordionHeaderTextActiveHoverColor: $textColor;
+
+
+
+$accordionContentBorder: $panelContentBorder;
+
+
+
+$accordionContentBg: $panelContentBg;
+
+
+
+$accordionContentTextColor: $panelContentTextColor;
+
+
+
+$accordionContentPadding: $panelContentPadding;
+
+
+
+$tabviewNavBorder: 1px solid #dee2e6;
+
+
+
+$tabviewNavBorderWidth: 0 0 2px 0;
+
+
+
+$tabviewNavBg: #ffffff;
+
+
+
+$tabviewHeaderSpacing: 0;
+
+
+
+$tabviewHeaderBorder: solid #dee2e6;
+
+
+
+$tabviewHeaderBorderWidth: 0 0 2px 0;
+
+
+
+$tabviewHeaderBorderColor: transparent transparent #dee2e6 transparent;
+
+
+
+$tabviewHeaderBg: #ffffff;
+
+
+
+$tabviewHeaderTextColor: $textSecondaryColor;
+
+
+
+$tabviewHeaderFontWeight: $panelHeaderFontWeight;
+
+
+
+$tabviewHeaderPadding: $panelHeaderPadding;
+
+
+
+$tabviewHeaderMargin: 0 0 -2px 0;
+
+
+
+$tabviewHeaderHoverBg: #ffffff;
+
+
+
+$tabviewHeaderHoverBorderColor: #9ba2aa;
+
+
+
+$tabviewHeaderTextHoverColor: $textSecondaryColor;
+
+
+
+$tabviewHeaderActiveBg: #ffffff;
+
+
+
+$tabviewHeaderActiveBorderColor: $primaryColor;
+
+
+
+$tabviewHeaderTextActiveColor: $primaryColor;
+
+
+
+$tabviewContentBorder: 0 none;
+
+
+
+$tabviewContentBg: $panelContentBg;
+
+
+
+$tabviewContentTextColor: $panelContentTextColor;
+
+
+
+$tabviewContentPadding: $panelContentPadding;
+
+
+
+$panelHeaderHoverBg: #e9ecef;
+
+
+
+$panelHeaderHoverBorderColor: #dee2e6;
+
+
+
+$panelHeaderTextHoverColor: $textColor;
+
+
+
+$scrollPanelTrackBorder: 0 none;
+
+
+
+$scrollPanelTrackBg: #f8f9fa;
+
+
+
+$cardBodyPadding: 1rem;
+
+
+
+$cardTitleFontSize: 1.5rem;
+
+
+
+$cardTitleFontWeight: 700;
+
+
+
+$cardSubTitleFontWeight: 700;
+
+
+
+$cardSubTitleColor: $textSecondaryColor;
+
+
+
+$cardContentPadding: 1rem 0;
+
+
+
+$cardFooterPadding: 1rem 0 0 0;
+
+
+
+$cardShadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0,0,0,.12);
+
+
+
+$dividerHorizontalMargin:1rem 0;
+
+
+
+$dividerHorizontalPadding:0 1rem;
+
+
+
+$dividerVerticalMargin:0 1rem;
+
+
+
+$dividerVerticalPadding:1rem 0;
+
+
+
+$dividerSize:1px;
+
+
+
+$dividerColor:#dee2e6;
+
+
+
+$splitterGutterBg:#f8f9fa;
+
+
+
+$splitterGutterHandleBg:#dee2e6;
--- a/src/assets/scss/theme-base/_colors.scss
+++ b/src/assets/scss/theme-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%)};
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/_common.scss
+++ b/src/assets/scss/theme-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;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/_components.scss
+++ b/src/assets/scss/theme-base/_components.scss
@@ -0,0 +1,111 @@
+@import '_mixins.scss';
+@import '_colors.scss';
+
+@import './components/input/_editor.scss';
+
+@layer primereact {
+    @import '_common.scss';
+
+    /*//Input*/
+    @import './components/input/_autocomplete.scss';
+    @import './components/input/_calendar.scss';
+    @import './components/input/_cascadeselect.scss';
+    @import './components/input/_checkbox.scss';
+    @import './components/input/tristatecheckbox.scss';
+    @import './components/input/_chips.scss';
+    @import './components/input/_colorpicker.scss';
+    @import './components/input/_dropdown.scss';
+    @import './components/input/_inputgroup.scss';
+    @import './components/input/_inputnumber.scss';
+    @import './components/input/_inputswitch.scss';
+    @import './components/input/_inputtext.scss';
+    @import './components/input/_iconfield.scss';
+    @import './components/input/_inputicon.scss';
+    @import './components/input/_inputotp.scss';
+    @import './components/input/_listbox.scss';
+    @import './components/input/_mention.scss';
+    @import './components/input/_multiselect.scss';
+    @import './components/input/_password.scss';
+    @import './components/input/_radiobutton.scss';
+    @import './components/input/_rating.scss';
+    @import './components/input/_selectbutton.scss';
+    @import './components/input/_slider.scss';
+    @import './components/input/_treeselect.scss';
+    @import './components/input/_togglebutton.scss';
+    
+    /*//Button*/
+    @import './components/button/_button.scss';
+    @import './components/button/_splitbutton.scss';
+    @import './components/button/_speeddial.scss';
+    
+    /*//Data*/
+    @import './components/data/_carousel.scss';
+    @import './components/data/_datatable.scss';
+    @import './components/data/_dataview.scss';
+    @import './components/data/_datascroller.scss';
+    @import './components/data/_filter.scss';
+    @import './components/data/_orderlist.scss';
+    @import './components/data/_organizationchart.scss';
+    @import './components/data/_paginator.scss';
+    @import './components/data/_picklist.scss';
+    @import './components/data/_tree.scss';
+    @import './components/data/_treetable.scss';
+    @import './components/data/_timeline.scss';
+
+    /*//Panel*/
+    @import './components/panel/_accordion.scss';
+    @import './components/panel/_card.scss';
+    @import './components/panel/_fieldset.scss';
+    @import './components/panel/_divider.scss';
+    @import './components/panel/_panel.scss';
+    @import './components/panel/_splitter.scss';
+    @import './components/panel/_stepper.scss';
+    @import './components/panel/_scrollpanel.scss';
+    @import './components/panel/_tabview.scss';
+    @import './components/panel/_toolbar.scss';
+
+    /*//Overlay*/
+    @import './components/overlay/_confirmpopup.scss';
+    @import './components/overlay/_dialog.scss';
+    @import './components/overlay/_overlaypanel.scss';
+    @import './components/overlay/_sidebar.scss';
+    @import './components/overlay/_tooltip.scss';
+    
+    /*//File*/
+    @import './components/file/_fileupload.scss';
+    
+    /*//Menu*/
+    @import './components/menu/_breadcrumb.scss';
+    @import './components/menu/_contextmenu.scss';
+    @import './components/menu/_dock.scss';
+    @import './components/menu/_megamenu.scss';
+    @import './components/menu/_menu.scss';
+    @import './components/menu/_menubar.scss';
+    @import './components/menu/_panelmenu.scss';
+    @import './components/menu/_slidemenu.scss';
+    @import './components/menu/_steps.scss';
+    @import './components/menu/_tabmenu.scss';
+    @import './components/menu/_tieredmenu.scss';
+    
+    /*//Messages*/
+    @import './components/messages/_inlinemessage.scss';
+    @import './components/messages/_message.scss';
+    @import 'components/messages/toast.scss';
+    
+    /*//MultiMedia*/
+    @import './components/multimedia/_galleria.scss';
+    @import './components/multimedia/_image.scss';
+    
+    /*//Misc*/
+    @import './components/misc/_avatar.scss';
+    @import './components/misc/_chip.scss';
+    @import './components/misc/_scrolltop.scss';
+    @import './components/misc/_skeleton.scss';
+    @import './components/misc/_tag.scss';
+    @import './components/misc/_inplace.scss';
+    @import './components/misc/metergroup.scss';
+    @import './components/misc/_progressbar.scss';
+    @import './components/misc/_terminal.scss';
+    @import './components/misc/_blockui.scss';
+    @import './components/misc/_badge.scss';
+}
--- a/src/assets/scss/theme-base/_mixins.scss
+++ b/src/assets/scss/theme-base/_mixins.scss
@@ -0,0 +1,243 @@
+@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-link {
+	> .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-link {
+	> .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) {
+	ul {
+		li {
+			a {
+				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;
+}
+
+@function tint($color, $percentage) {
+	@return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+	@return mix(#000, $color, $percentage);
+}
--- a/src/assets/scss/theme-base/components/button/_button.scss
+++ b/src/assets/scss/theme-base/components/button/_button.scss
@@ -0,0 +1,644 @@
+.p-button {
+    color: $buttonTextColor;
+    background: $buttonBg;
+    border: $buttonBorder;
+    padding: $buttonPadding;
+    font-size: $fontSize;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+
+    &:not(:disabled):hover {
+        background: $buttonHoverBg;
+        color: $buttonTextHoverColor;
+        border-color: $buttonHoverBorderColor;
+    }
+
+    &:not(:disabled):active {
+        background: $buttonActiveBg;
+        color: $buttonTextActiveColor;
+        border-color: $buttonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $buttonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+            border-color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):active {
+                background: $plainButtonActiveBgColor;
+                color: $plainButtonTextColor;
+            }
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $buttonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($buttonBg, $textButtonHoverBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($buttonBg, $textButtonActiveBgOpacity);
+            color: $buttonBg;
+            border-color: transparent;
+        }
+
+        &.p-button-plain {
+            color: $plainButtonTextColor;
+
+            &:not(:disabled):hover {
+                background: $plainButtonHoverBgColor;
+                color: $plainButtonTextColor;
+            }
+    
+            &:not(:disabled):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-loading-left {
+            .p-button-label {
+                margin-left: $inlineSpacing;
+            }
+        }
+        
+        &.p-button-loading-right {
+            .p-button-label {
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-top {
+            .p-button-label {
+                margin-top: $inlineSpacing;
+            }
+        }
+
+        &.p-button-loading-bottom {
+            .p-button-label {
+                margin-bottom: $inlineSpacing;
+            }
+        }
+
+        .p-button-loading-icon {
+            margin: 0;
+        }
+    }
+}
+
+.p-fluid {
+    .p-button {
+        width: 100%;
+    }
+    
+    .p-button-icon-only {
+        width: $buttonIconOnlyWidth;
+    }
+
+    .p-button-group {
+        display: flex;
+        
+        .p-button {
+            flex: 1;
+        }
+    }
+}
+
+.p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: $secondaryButtonTextColor;
+    background: $secondaryButtonBg;
+    border: $secondaryButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $secondaryButtonHoverBg;
+        color: $secondaryButtonTextHoverColor;
+        border-color: $secondaryButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $secondaryButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $secondaryButtonActiveBg;
+        color: $secondaryButtonTextActiveColor;
+        border-color: $secondaryButtonActiveBorderColor;
+    }
+    
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $secondaryButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $secondaryButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: $infoButtonTextColor;
+    background: $infoButtonBg;
+    border: $infoButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $infoButtonHoverBg;
+        color: $infoButtonTextHoverColor;
+        border-color: $infoButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $infoButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $infoButtonActiveBg;
+        color: $infoButtonTextActiveColor;
+        border-color: $infoButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            color: $infoButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $infoButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $infoButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: $successButtonTextColor;
+    background: $successButtonBg;
+    border: $successButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $successButtonHoverBg;
+        color: $successButtonTextHoverColor;
+        border-color: $successButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $successButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $successButtonActiveBg;
+        color: $successButtonTextActiveColor;
+        border-color: $successButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $successButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            color: $successButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $successButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $successButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: $warningButtonTextColor;
+    background: $warningButtonBg;
+    border: $warningButtonBorder;
+    
+    &:not(:disabled):hover {
+        background: $warningButtonHoverBg;
+        color: $warningButtonTextHoverColor;
+        border-color: $warningButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $warningButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $warningButtonActiveBg;
+        color: $warningButtonTextActiveColor;
+        border-color: $warningButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            color: $warningButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $warningButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $warningButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: $helpButtonTextColor;
+    background: $helpButtonBg;
+    border: $helpButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $helpButtonHoverBg;
+        color: $helpButtonTextHoverColor;
+        border-color: $helpButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $helpButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $helpButtonActiveBg;
+        color: $helpButtonTextActiveColor;
+        border-color: $helpButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            color: $helpButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $helpButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $helpButtonBg;
+        }
+    }
+}
+
+.p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: $dangerButtonTextColor;
+    background: $dangerButtonBg;
+    border: $dangerButtonBorder;
+
+    &:not(:disabled):hover {
+        background: $dangerButtonHoverBg;
+        color: $dangerButtonTextHoverColor;
+        border-color: $dangerButtonHoverBorderColor;
+    }
+
+    &:not(:disabled):focus {
+        box-shadow: $dangerButtonFocusShadow;
+    }
+
+    &:not(:disabled):active {
+        background: $dangerButtonActiveBg;
+        color: $dangerButtonTextActiveColor;
+        border-color: $dangerButtonActiveBorderColor;
+    }
+
+    &.p-button-outlined {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border: $outlinedButtonBorder;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            color: $dangerButtonBg;
+            border: $outlinedButtonBorder;
+        }
+    }
+
+    &.p-button-text {
+        background-color: transparent;
+        color: $dangerButtonBg;
+        border-color: transparent;
+
+        &:not(:disabled):hover {
+            background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+
+        &:not(:disabled):active {
+            background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+            border-color: transparent;
+            color: $dangerButtonBg;
+        }
+    }
+}
+
+@if variable-exists(contrastButtonTextColor) {
+    .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+        color: $contrastButtonTextColor;
+        background: $contrastButtonBg;
+        border: $contrastButtonBorder;
+    
+        &:not(:disabled):hover {
+            background: $contrastButtonHoverBg;
+            color: $contrastButtonTextHoverColor;
+            border-color: $contrastButtonHoverBorderColor;
+        }
+    
+        &:not(:disabled):focus {
+            box-shadow: $contrastButtonFocusShadow;
+        }
+    
+        &:not(:disabled):active {
+            background: $contrastButtonActiveBg;
+            color: $contrastButtonTextActiveColor;
+            border-color: $contrastButtonActiveBorderColor;
+        }
+    
+        &.p-button-outlined {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border: $outlinedButtonBorder;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                color: $contrastButtonBg;
+                border: $outlinedButtonBorder;
+            }
+        }
+    
+        &.p-button-text {
+            background-color: transparent;
+            color: $contrastButtonBg;
+            border-color: transparent;
+    
+            &:not(:disabled):hover {
+                background: rgba($contrastButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+    
+            &:not(:disabled):active {
+                background: rgba($contrastButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $contrastButtonBg;
+            }
+        }
+    }
+}
+
+.p-button.p-button-link {
+    color: $linkButtonColor;
+    background: transparent;
+    border: transparent;
+
+    &:not(:disabled):hover {
+        background:  transparent;
+        color: $linkButtonHoverColor;
+        border-color:  transparent;
+
+        .p-button-label {
+            text-decoration: $linkButtonTextHoverDecoration;
+        }
+    }
+
+    &:not(:disabled):focus {
+        background: transparent;
+        box-shadow: $linkButtonFocusShadow;
+        border-color:  transparent;
+    }
+
+    &:not(:disabled):active {
+        background:  transparent;
+        color: $linkButtonColor;
+        border-color:  transparent;
+    }
+}
--- a/src/assets/scss/theme-base/components/button/_speeddial.scss
+++ b/src/assets/scss/theme-base/components/button/_speeddial.scss
@@ -0,0 +1,91 @@
+@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-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);
+
+		&:first-child {
+			margin-bottom: $inlineSpacing;
+		}
+	}
+}
+
+.p-speeddial-direction-down {
+	.p-speeddial-item {
+		margin: math.div($inlineSpacing, 2);
+
+		&: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;
+}
--- a/src/assets/scss/theme-base/components/button/_splitbutton.scss
+++ b/src/assets/scss/theme-base/components/button/_splitbutton.scss
@@ -0,0 +1,359 @@
+.p-splitbutton {
+    border-radius: $borderRadius;
+
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border: $outlinedButtonBorder;
+
+            &:not(:disabled):hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+                border-color: $plainButtonTextColor;
+
+                &:not(:disabled):hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
+        
+                &:not(:disabled):active {
+                    background: $plainButtonActiveBgColor;
+                    color: $plainButtonTextColor;
+                }
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $buttonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($buttonBg, $textButtonHoverBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($buttonBg, $textButtonActiveBgOpacity);
+                color: $buttonBg;
+                border-color: transparent;
+            }
+        }
+
+        &.p-button-plain {
+            > .p-button {
+                color: $plainButtonTextColor;
+
+                &:not(:disabled):hover {
+                    background: $plainButtonHoverBgColor;
+                    color: $plainButtonTextColor;
+                }
+        
+                &:not(:disabled):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-splitbutton-menubutton,
+    .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.p-splitbutton.p-button-secondary {    
+    &.p-button-outlined {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border: $outlinedButtonBorder;
+
+            &:not(:disabled):hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                color: $secondaryButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($secondaryButtonBg, $textButtonActiveBgOpacity);
+                color: $secondaryButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $secondaryButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($secondaryButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $secondaryButtonBg;
+            }
+
+            &:not(:disabled):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;
+
+            &:not(:disabled):hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                color: $infoButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($infoButtonBg, $textButtonActiveBgOpacity);
+                color: $infoButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $infoButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($infoButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $infoButtonBg;
+            }
+
+            &:not(:disabled):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;
+
+            &:not(:disabled):hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                color: $successButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($successButtonBg, $textButtonActiveBgOpacity);
+                color: $successButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $successButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($successButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $successButtonBg;
+            }
+
+            &:not(:disabled):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;
+
+            &:not(:disabled):hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                color: $warningButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($warningButtonBg, $textButtonActiveBgOpacity);
+                color: $warningButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $warningButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($warningButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $warningButtonBg;
+            }
+
+            &:not(:disabled):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;
+
+            &:not(:disabled):hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                color: $helpButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($helpButtonBg, $textButtonActiveBgOpacity);
+                color: $helpButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $helpButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($helpButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $helpButtonBg;
+            }
+
+            &:not(:disabled):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;
+
+            &:not(:disabled):hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                color: $dangerButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                color: $dangerButtonBg;
+            }
+        }
+    }
+
+    &.p-button-text {
+        > .p-button {
+            background-color: transparent;
+            color: $dangerButtonBg;
+            border-color: transparent;
+
+            &:not(:disabled):hover {
+                background: rgba($dangerButtonBg, $textButtonHoverBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
+            }
+
+            &:not(:disabled):active {
+                background: rgba($dangerButtonBg, $textButtonActiveBgOpacity);
+                border-color: transparent;
+                color: $dangerButtonBg;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/data/_carousel.scss
+++ b/src/assets/scss/theme-base/components/data/_carousel.scss
@@ -0,0 +1,37 @@
+.p-carousel {
+    .p-carousel-content {
+        .p-carousel-prev,
+        .p-carousel-next {
+            margin: $inlineSpacing;
+            @include action-icon();
+        }
+    }
+
+    .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;
+                }
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/data/_datascroller.scss
+++ b/src/assets/scss/theme-base/components/data/_datascroller.scss
@@ -0,0 +1,47 @@
+.p-datascroller {
+    .p-paginator-top {
+        border-width: $tableTopPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-paginator-bottom {
+        border-width: $tableBottomPaginatorBorderWidth;
+        border-radius: 0;
+    }
+
+    .p-datascroller-header {
+        background: $tableHeaderBg;
+        color: $tableHeaderTextColor;
+        border: $tableHeaderBorder;
+        border-width: $tableHeaderBorderWidth;
+        padding: $tableHeaderPadding;
+        font-weight: $tableHeaderFontWeight;
+    }
+
+    .p-datascroller-content {
+        background: $tableBodyRowBg;
+        color: $tableBodyRowTextColor;
+        border: $dataViewContentBorder;
+        padding: $dataViewContentPadding;
+    }
+
+    &.p-datascroller-inline {
+        .p-datascroller-list {
+            > li {
+                border: $dataViewListItemBorder;
+                border-width: $dataViewListItemBorderWidth;
+            }
+        }
+    }
+
+    .p-datascroller-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;
+    }
+}
--- a/src/assets/scss/theme-base/components/data/_datatable.scss
+++ b/src/assets/scss/theme-base/components/data/_datatable.scss
@@ -0,0 +1,389 @@
+.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):not(.p-sortable-disabled):hover {
+            background: $tableHeaderCellHoverBg;
+            color: $tableHeaderCellTextHoverColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellIconHoverColor;
+            }
+        }
+
+        &.p-highlight {
+            background: $tableHeaderCellHighlightBg;
+            color: $tableHeaderCellHighlightTextColor;
+
+            .p-sortable-column-icon {
+                color: $tableHeaderCellHighlightTextColor;
+            }
+
+            &:not(.p-sortable-disabled):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;
+                }
+
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+                }
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+            }
+
+            &.p-highlight-contextmenu {
+                outline: 0.15rem solid $focusOutlineColor;
+                outline-offset: -0.15rem;
+            }
+
+            &.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-selectable {
+        .p-datatable-tbody > tr.p-selectable-row {
+            &:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+                background: $tableBodyRowHoverBg;
+                color: $tableBodyRowTextHoverColor;
+            }
+
+            &:focus-visible {
+                outline: .15rem solid $focusOutlineColor;
+                outline-offset: -.15rem;
+            }
+        }
+    }
+
+    &.p-datatable-selectable-cell {
+        .p-datatable-tbody > tr.p-selectable-row {
+            & > td.p-selectable-cell {
+                &:not(.p-highlight):hover {
+                    background: $tableBodyRowHoverBg;
+                    color: $tableBodyRowTextHoverColor;
+                }
+
+                &:focus-visible {
+                    outline: .15rem solid $focusOutlineColor;
+                    outline-offset: -.15rem;
+                }
+            }
+        }
+    }
+
+    &.p-datatable-hoverable-rows {
+        .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+            background: $tableBodyRowHoverBg;
+            color: $tableBodyRowTextHoverColor;
+        }
+    }
+
+    .p-column-resizer-helper {
+        background: $tableResizerHelperBg;
+    }
+
+    .p-datatable-scrollable-header,
+    .p-datatable-scrollable-footer {
+        background: $panelHeaderBg;
+    }
+
+    &.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.p-row-odd {
+                background: $tableBodyRowEvenBg;
+    
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+    
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+    
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                & + .p-row-expanded {
+                    background: $tableBodyRowEvenBg;
+                }
+            }
+        }
+    }
+
+    &.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);
+        }
+    }
+}
+
+.p-datatable-drag-selection-helper {
+    background: $tableDragHelperBg;
+}
--- a/src/assets/scss/theme-base/components/data/_dataview.scss
+++ b/src/assets/scss/theme-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-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;
+	}
+
+	.p-dataview-loading-icon {
+		font-size: $loadingIconFontSize;
+
+		&.p-icon {
+			width: $loadingIconFontSize;
+			height: $loadingIconFontSize;
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/data/_filter.scss
+++ b/src/assets/scss/theme-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;
+    } 
+}
--- a/src/assets/scss/theme-base/components/data/_orderlist.scss
+++ b/src/assets/scss/theme-base/components/data/_orderlist.scss
@@ -0,0 +1,86 @@
+.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-filter-container {
+		padding: $panelHeaderPadding;
+		background: $panelContentBg;
+		border: $panelHeaderBorder;
+		border-bottom: 0 none;
+
+		.p-orderlist-filter-input {
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-orderlist-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.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;
+				}
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/data/_organizationchart.scss
+++ b/src/assets/scss/theme-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();
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/data/_paginator.scss
+++ b/src/assets/scss/theme-base/components/data/_paginator.scss
@@ -0,0 +1,91 @@
+.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;
+        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;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/data/_picklist.scss
+++ b/src/assets/scss/theme-base/components/data/_picklist.scss
@@ -0,0 +1,74 @@
+.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-filter-container {
+		padding: $panelHeaderPadding;
+		background: $panelContentBg;
+		border: $panelHeaderBorder;
+		border-bottom: 0 none;
+
+		.p-picklist-filter-input {
+			padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+		}
+
+		.p-picklist-filter-icon {
+			right: nth($inputPadding, 2);
+			color: $inputIconColor;
+		}
+	}
+
+	.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;
+				}
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/data/_timeline.scss
+++ b/src/assets/scss/theme-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;
+        }
+    }
+}
+
+
+
--- a/src/assets/scss/theme-base/components/data/_tree.scss
+++ b/src/assets/scss/theme-base/components/data/_tree.scss
@@ -0,0 +1,184 @@
+
+.p-tree-container {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+	overflow: auto;
+}
+
+.p-treenode-children {
+	margin: 0;
+	padding: 0;
+	list-style-type: none;
+}
+
+.p-treenode-selectable {
+	cursor: pointer;
+	user-select: none;
+}
+
+.p-tree-toggler {
+	cursor: pointer;
+	user-select: none;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	position: relative;
+	flex-shrink: 0;
+}
+
+.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+	visibility: hidden;
+}
+
+.p-treenode-content {
+	display: flex;
+	align-items: center;
+}
+
+.p-tree-filter {
+	width: 100%;
+}
+
+.p-tree-filter-container {
+	position: relative;
+	display: block;
+	width: 100%;
+}
+
+.p-tree-filter-icon {
+	position: absolute;
+	top: 50%;
+	margin-top: -0.5rem;
+}
+
+.p-tree-loading {
+	position: relative;
+	min-height: 4rem;
+}
+
+.p-tree .p-tree-loading-overlay {
+	position: absolute;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.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-treenode-dragover {
+								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;
+			}
+	}
+
+	.p-treenode-droppoint {
+		height: $inlineSpacing;
+
+		&.p-treenode-droppoint-active {
+			background: scale-color($highlightBg, $lightness: -20%);
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/data/_treetable.scss
+++ b/src/assets/scss/theme-base/components/data/_treetable.scss
@@ -0,0 +1,429 @@
+
+.p-treetable {
+    position: relative;
+}
+
+.p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+}
+
+.p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+}
+
+.p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+}
+
+.p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+}
+
+/* Resizable */
+.p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+}
+
+.p-treetable-resizable .p-treetable-thead > tr > th,
+.p-treetable-resizable .p-treetable-tfoot > tr > td,
+.p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+}
+
+.p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+}
+
+.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+}
+
+.p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+}
+
+.p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+/* Scrollable */
+.p-treetable-scrollable-wrapper {
+    position: relative;
+}
+.p-treetable-scrollable-header,
+.p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+}
+
+.p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+}
+
+.p-treetable-virtual-table {
+    position: absolute;
+}
+
+/* Frozen Columns */
+.p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+}
+
+.p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+/* Reorder */
+.p-treetable-reorder-indicator-up,
+.p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+}
+
+/* Loader */
+.p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+/* Alignment */
+.p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+.p-treetable .p-treetable-tbody > tr > td.p-align-left,
+.p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+}
+.p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+.p-treetable .p-treetable-tbody > tr > td.p-align-right,
+.p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+}
+.p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+.p-treetable .p-treetable-tbody > tr > td.p-align-center,
+.p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+}
+
+
+
+.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 {
+                    margin-right: $inlineSpacing;
+                    @include action-icon();
+                    
+                    & + .p-checkbox {
+                        margin-right: $inlineSpacing;
+                        
+                        .p-indeterminate {
+                            .p-checkbox-icon {
+                                color: $textColor;
+                            }
+                        }
+                    }
+                }
+            }
+
+            &:focus-visible {
+                outline: .15rem solid $focusOutlineColor;
+                outline-offset: -.15rem;
+            }
+
+            &.p-highlight {
+                background: $highlightBg;
+                color: $highlightTextColor;
+
+                .p-treetable-toggler {
+                    color: $highlightTextColor;
+
+                    &:hover {
+                        color: $highlightTextColor;
+                    }
+                    
+                }
+            }
+        }
+    }
+
+    &.p-treetable-selectable,
+    &.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-treetable-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-striped {
+        .p-treetable-tbody {
+            > tr.p-row-odd {
+                background: $tableBodyRowEvenBg;
+    
+                &.p-highlight {
+                    background: $highlightBg;
+                    color: $highlightTextColor;
+    
+                    .p-row-toggler {
+                        color: $highlightTextColor;
+    
+                        &:hover {
+                            color: $highlightTextColor;
+                        }
+                    }
+                }
+
+                & + .p-row-expanded {
+                    background: $tableBodyRowEvenBg;
+                }
+            }
+        }
+    }
+
+    &.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);
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/file/_fileupload.scss
+++ b/src/assets/scss/theme-base/components/file/_fileupload.scss
@@ -0,0 +1,41 @@
+.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 {
+            margin-right: $inlineSpacing;
+        }
+    }
+
+    .p-fileupload-content {
+        background: $panelContentBg;
+        padding: $fileUploadContentPadding;
+        border: $panelContentBorder;
+        color: $panelContentTextColor;
+        border-bottom-right-radius: $borderRadius;
+        border-bottom-left-radius: $borderRadius;
+    }
+
+    .p-progressbar {
+        height: $fileUploadProgressBarHeight;
+    }
+
+    .p-fileupload-row {
+        > div {
+            padding: $tableBodyCellPadding;
+        }
+    }
+
+    &.p-fileupload-advanced {
+        .p-message {
+            margin-top: 0;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_autocomplete.scss
+++ b/src/assets/scss/theme-base/components/input/_autocomplete.scss
@@ -0,0 +1,95 @@
+@use 'sass:math';
+
+.p-autocomplete {
+    .p-autocomplete-loader {
+        right: nth($inputPadding, 2); 
+    }
+
+    &.p-autocomplete-dd {
+        .p-autocomplete-loader {
+            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
+        }
+    }
+    
+    .p-autocomplete-multiple-container {
+        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
+        gap: $inlineSpacing;
+        
+        &:not(.p-disabled):hover {
+            border-color: $inputHoverBorderColor;
+        }
+
+        &:not(.p-disabled).p-focus {
+            @include focused-input();
+        }
+
+        .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);
+            margin-right: $inlineSpacing;
+            background: $highlightBg;
+            color: $highlightTextColor;
+            border-radius: $borderRadius;
+
+            .p-autocomplete-token-icon {
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &.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;
+
+            &:hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+
+        .p-autocomplete-item-group {
+            margin: $submenuHeaderMargin;
+            padding: $submenuHeaderPadding;
+            color: $submenuHeaderTextColor;
+            background: $submenuHeaderBg;
+            font-weight: $submenuHeaderFontWeight;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_calendar.scss
+++ b/src/assets/scss/theme-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: 0.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;
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/input/_cascadeselect.scss
+++ b/src/assets/scss/theme-base/components/input/_cascadeselect.scss
@@ -0,0 +1,107 @@
+.p-cascadeselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .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;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-cascadeselect-item-content {
+                padding: $inputListItemPadding;
+            }
+
+            .p-cascadeselect-group-icon {
+                font-size: $menuitemSubmenuIconFontSize;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_checkbox.scss
+++ b/src/assets/scss/theme-base/components/input/_checkbox.scss
@@ -0,0 +1,181 @@
+
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.p-checkbox {
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+
+    .p-checkbox-input {
+        border: $checkboxBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+    }
+
+    .p-checkbox-box {
+        border: $checkboxBorder;
+        background: $inputBg;
+        width: $checkboxWidth;
+        height: $checkboxHeight;
+        color: $textColor;
+        border-radius: $borderRadius;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-checkbox-icon {
+            transition-duration: $transitionDuration;
+            color: $checkboxIconActiveColor;
+            font-size: $checkboxIconFontSize;
+
+            &.p-icon {
+                width: $checkboxIconFontSize;
+                height: $checkboxIconFontSize;
+            }
+        }
+    }
+    
+
+    &.p-highlight {
+        .p-checkbox-box {
+            border-color: $checkboxActiveBorderColor;
+            background: $checkboxActiveBg;
+        }  
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-checkbox-input:hover) {
+            .p-checkbox-box {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-highlight {
+                .p-checkbox-box {
+                    border-color: $checkboxActiveHoverBorderColor;
+                    background: $checkboxActiveHoverBg;
+                    color: $checkboxIconActiveHoverColor;
+                }
+            }
+        }
+
+        &:has(.p-checkbox-input:focus-visible) {
+            .p-checkbox-box {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-checkbox-box {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+    
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-checkbox {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+    .p-highlight {
+        .p-checkbox {
+            .p-checkbox-box {
+                border-color: $checkboxIconActiveColor;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_chips.scss
+++ b/src/assets/scss/theme-base/components/input/_chips.scss
@@ -0,0 +1,102 @@
+@use "sass:math";
+
+
+.p-chips {
+    display: inline-flex;
+}
+
+.p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+}
+
+.p-chips-token-icon {
+    cursor: pointer;
+}
+
+.p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+}
+
+.p-fluid .p-chips {
+    display: flex;
+}
+
+
+.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);
+        outline-color: transparent;
+
+        .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();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_colorpicker.scss
+++ b/src/assets/scss/theme-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;
+}
--- a/src/assets/scss/theme-base/components/input/_dropdown.scss
+++ b/src/assets/scss/theme-base/components/input/_dropdown.scss
@@ -0,0 +1,252 @@
+
+.p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+}
+
+.p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+}
+
+.p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+}
+
+input.p-dropdown-label {
+    cursor: default;
+}
+
+.p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+}
+
+.p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.p-dropdown-items-wrapper {
+    overflow: auto;
+}
+
+.p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+}
+
+.p-dropdown-item-group {
+    cursor: auto;
+}
+
+.p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-dropdown-filter {
+    width: 100%;
+}
+
+.p-dropdown-filter-container {
+    position: relative;
+}
+
+.p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-fluid .p-dropdown {
+    display: flex;
+}
+
+.p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+}
+
+
+.p-dropdown {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+
+            .p-inputtext {
+                background-color: transparent;
+            }
+        }
+    }
+
+    &.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;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+            }
+
+            .p-dropdown-check-icon {
+                position: relative;
+                margin-left: -1 * $inlineSpacing;
+                margin-right: $inlineSpacing;
+            }
+        }
+
+        .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;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_editor.scss
+++ b/src/assets/scss/theme-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;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_iconfield.scss
+++ b/src/assets/scss/theme-base/components/input/_iconfield.scss
@@ -0,0 +1,10 @@
+
+.p-icon-field {
+    position: relative;
+}
+
+.p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
--- a/src/assets/scss/theme-base/components/input/_inputgroup.scss
+++ b/src/assets/scss/theme-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;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_inputicon.scss
+++ b/src/assets/scss/theme-base/components/input/_inputicon.scss
@@ -0,0 +1,15 @@
+
+.p-fluid .p-icon-field-left,
+.p-fluid .p-icon-field-right {
+    width: 100%;
+}
+
+.p-icon-field-left > .p-input-icon:first-of-type {
+    left: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
+
+.p-icon-field-right > .p-input-icon:last-of-type  {
+    right: nth($inputPadding, 2);
+    color: $inputIconColor;
+}
--- a/src/assets/scss/theme-base/components/input/_inputnumber.scss
+++ b/src/assets/scss/theme-base/components/input/_inputnumber.scss
@@ -0,0 +1,5 @@
+.p-inputnumber {
+    &.p-invalid.p-component > .p-inputtext {
+        @include invalid-input();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_inputotp.scss
+++ b/src/assets/scss/theme-base/components/input/_inputotp.scss
@@ -0,0 +1,10 @@
+.p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: $inlineSpacing;
+}
+
+.p-inputotp-input {
+    text-align: center;
+    width: 2 * nth($inputPadding, 2) + 1rem;
+}
--- a/src/assets/scss/theme-base/components/input/_inputswitch.scss
+++ b/src/assets/scss/theme-base/components/input/_inputswitch.scss
@@ -0,0 +1,100 @@
+@use 'sass:math';
+
+
+.p-inputswitch {
+    position: relative;
+    display: inline-block;
+}
+
+.p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+}
+
+.p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+}
+
+.p-inputswitch-slider:before {
+    position: absolute;
+    content: '';
+    top: 50%;
+}
+
+
+.p-inputswitch {
+    width: $inputSwitchWidth;
+    height: $inputSwitchHeight;
+
+    .p-inputswitch-input {
+        border-radius: $inputSwitchBorderRadius;
+    }
+
+    .p-inputswitch-slider {
+        background: $inputSwitchSliderOffBg;
+        transition: $formElementTransition;
+        border-radius: $inputSwitchBorderRadius;
+        outline-color: transparent;
+
+        &:before {
+            background: $inputSwitchHandleOffBg;
+            width: $inputSwitchHandleWidth;
+            height: $inputSwitchHandleHeight;
+            left: $inputSwitchSliderPadding;
+            margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
+            border-radius: $inputSwitchHandleBorderRadius;
+            transition-duration: $transitionDuration;
+        }
+    }
+
+    &.p-highlight {
+        .p-inputswitch-slider {
+            background: $inputSwitchSliderOnBg;
+
+            &:before {
+                background: $inputSwitchHandleOnBg;
+                transform: translateX($inputSwitchHandleWidth);
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-inputswitch-input:hover) {
+            .p-inputswitch-slider {
+                background: $inputSwitchSliderOffHoverBg;
+            }
+
+            &.p-highlight {
+                .p-inputswitch-slider {
+                    background: $inputSwitchSliderOnHoverBg;
+                }
+            }
+        }
+
+        &:has(.p-inputswitch-input:focus-visible) {
+            .p-inputswitch-slider {
+                @include focused();
+            }
+        }
+    }
+
+    &.p-invalid > .p-inputswitch-slider {
+        @include invalid-input();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_inputtext.scss
+++ b/src/assets/scss/theme-base/components/input/_inputtext.scss
@@ -0,0 +1,101 @@
+.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;
+    outline-color: transparent;
+
+    &:enabled:hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:enabled:focus {
+        @include focused-input();
+    }
+
+    &.p-invalid.p-component {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        background-color: $inputFilledBg;
+
+        &:enabled:hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:enabled:focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    &.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-icon-field-left > .p-inputtext {
+    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-left.p-float-label > label {
+    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
+}
+
+.p-icon-field-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);
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_listbox.scss
+++ b/src/assets/scss/theme-base/components/input/_listbox.scss
@@ -0,0 +1,139 @@
+
+.p-listbox-list-wrapper {
+    overflow: auto;
+}
+
+.p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-listbox-item-group {
+    cursor: auto;
+}
+
+.p-listbox-filter-container {
+    position: relative;
+}
+
+.p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-listbox-filter {
+    width: 100%;
+}
+
+
+.p-listbox {
+    background: $inputListBg;
+    color: $inputListTextColor;
+    border: $inputListBorder;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+    outline-color: transparent;
+
+    .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;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.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: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+
+                    &.p-focus {
+                        color: $inputListItemTextHoverColor;
+                        background: $inputListItemHoverBg;
+                    }
+                }
+            }
+        }
+    }
+
+    &.p-focus {
+        @include focused-input();
+    }
+
+    &.p-invalid {
+        @include invalid-input();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_mention.scss
+++ b/src/assets/scss/theme-base/components/input/_mention.scss
@@ -0,0 +1,31 @@
+.p-mention-panel {
+    background: $inputOverlayBg;
+    color: $inputListTextColor;
+    border: $inputOverlayBorder;
+    border-radius: $borderRadius;
+    box-shadow: $inputOverlayShadow;
+
+    .p-mention-items {
+        padding: $inputListPadding;
+
+        .p-mention-item {
+            margin: $inputListItemMargin;
+            padding: $inputListItemPadding;
+            border: $inputListItemBorder;
+            color: $inputListItemTextColor;
+            background: $inputListItemBg;
+            transition: $listItemTransition;
+            border-radius: $inputListItemBorderRadius;
+
+            &:hover {
+                color: $inputListItemTextHoverColor;
+                background: $inputListItemHoverBg;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_multiselect.scss
+++ b/src/assets/scss/theme-base/components/input/_multiselect.scss
@@ -0,0 +1,278 @@
+@use "sass:math";
+
+
+.p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+}
+
+.p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+}
+
+.p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.p-multiselect-token-icon {
+    cursor: pointer;
+}
+
+.p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+}
+
+.p-multiselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-multiselect-item-group {
+    cursor: auto;
+}
+
+.p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+}
+
+.p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+}
+
+.p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+}
+
+.p-fluid .p-multiselect {
+    display: flex;
+}
+
+
+.p-multiselect {
+    background: $inputBg;
+    border: $inputBorder;
+    transition: $formElementTransition;
+    border-radius: $borderRadius;
+    outline-color: transparent;
+
+    &:not(.p-disabled):hover {
+        border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+        @include focused-input();
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+
+    .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;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.p-highlight {
+                color: $highlightTextColor;
+                background: $highlightBg;
+
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
+            }
+
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    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;
+        }
+    }
+}
+
--- a/src/assets/scss/theme-base/components/input/_password.scss
+++ b/src/assets/scss/theme-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;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_radiobutton.scss
+++ b/src/assets/scss/theme-base/components/input/_radiobutton.scss
@@ -0,0 +1,170 @@
+
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton-input {
+    cursor: pointer;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+
+
+.p-radiobutton {
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+
+      .p-radiobutton-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $radiobuttonBorder;
+        border-radius: 50%;
+    }
+
+    .p-radiobutton-box {
+        border: $radiobuttonBorder;
+        background: $inputBg;
+        width: $radiobuttonWidth;
+        height: $radiobuttonHeight;
+        color: $textColor;
+        border-radius: 50%;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-radiobutton-icon {
+            width: $radiobuttonIconSize;
+            height: $radiobuttonIconSize;
+            transition-duration: $transitionDuration;
+            background-color: $radiobuttonIconActiveColor;
+        }
+    }
+
+    &.p-highlight {
+        .p-radiobutton-box {
+            border-color: $radiobuttonActiveBorderColor;
+            background: $radiobuttonActiveBg;
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-radiobutton-input:hover) {
+            .p-radiobutton-box {
+                border-color: $inputHoverBorderColor;
+            }
+
+            &.p-highlight {
+                .p-radiobutton-box {
+                    border-color: $radiobuttonActiveHoverBorderColor;
+                    background: $radiobuttonActiveHoverBg;
+
+                    .p-radiobutton-icon {
+                        background-color: $radiobuttonIconActiveHoverColor;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-radiobutton-input:focus-visible) {
+            .p-radiobutton-box {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-radiobutton-box {
+        @include invalid-input();
+    }
+
+    &.p-variant-filled {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-radiobutton-box {
+                background: $radiobuttonActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-radiobutton-input:hover) {
+                .p-radiobutton-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-radiobutton-box {
+                        background: $radiobuttonActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.p-input-filled {
+    .p-radiobutton {
+        .p-radiobutton-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-radiobutton-box {
+                background: $radiobuttonActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-radiobutton-input:hover) {
+                .p-radiobutton-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-radiobutton-box {
+                        background: $radiobuttonActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+    .p-highlight {
+        .p-radiobutton {
+            .p-radiobutton-box {
+                border-color: $radiobuttonIconActiveColor;
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_rating.scss
+++ b/src/assets/scss/theme-base/components/input/_rating.scss
@@ -0,0 +1,81 @@
+@use 'sass:math';
+
+
+.p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+}
+
+.p-rating.p-readonly .p-rating-item {
+    cursor: default;
+}
+
+
+.p-rating {
+    gap: $inlineSpacing;
+
+    .p-rating-item {
+        outline-color: transparent;
+        border-radius: 50%;
+        
+        .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();
+        }
+
+        &.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;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_selectbutton.scss
+++ b/src/assets/scss/theme-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();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_slider.scss
+++ b/src/assets/scss/theme-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;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_togglebutton.scss
+++ b/src/assets/scss/theme-base/components/input/_togglebutton.scss
@@ -0,0 +1,99 @@
+
+.p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-togglebutton-input {
+    cursor: pointer;
+}
+
+.p-togglebutton .p-button {
+    flex: 1 1 auto;
+}
+
+.p-togglebutton {
+    .p-togglebutton-input {
+        appearance: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 1;
+        outline: 0 none;
+        border: $toggleButtonBorder;
+        border-radius: $borderRadius;
+    }
+
+    .p-button {
+        background: $toggleButtonBg;
+        border: $toggleButtonBorder;
+        color: $toggleButtonTextColor;
+        transition: $formElementTransition;
+        outline-color: transparent;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+            color: $toggleButtonIconColor;
+        }
+    }
+
+    &.p-highlight {
+        .p-button {
+            background: $toggleButtonActiveBg;
+            border-color: $toggleButtonActiveBorderColor;
+            color: $toggleButtonTextActiveColor;
+
+            .p-button-icon-left,
+            .p-button-icon-right {
+                color: $toggleButtonIconActiveColor;
+            }
+        }
+    }
+
+    &:not(.p-disabled) {
+        &:has(.p-togglebutton-input:hover) {
+            &:not(.p-highlight) {
+                .p-button {
+                    background: $toggleButtonHoverBg;
+                    border-color: $toggleButtonHoverBorderColor;
+                    color: $toggleButtonTextHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconHoverColor;
+                    }
+                }
+            }
+
+            &.p-highlight {
+                .p-button {
+                    background: $toggleButtonActiveHoverBg;
+                    border-color: $toggleButtonActiveHoverBorderColor;
+                    color: $toggleButtonTextActiveHoverColor;
+
+                    .p-button-icon-left,
+                    .p-button-icon-right {
+                        color: $toggleButtonIconActiveHoverColor;
+                    }
+                }
+            }
+        }
+
+        &:has(.p-togglebutton-input:focus-visible) {
+            .p-button {
+                @include focused-input();
+            }
+        }
+    }
+
+    &.p-invalid > .p-button {
+        @include invalid-input();
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_treeselect.scss
+++ b/src/assets/scss/theme-base/components/input/_treeselect.scss
@@ -0,0 +1,151 @@
+@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-clearable {
+        .p-treeselect-label {
+            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+        }
+    }
+
+    &.p-variant-filled {
+        background: $inputFilledBg;
+
+        &:not(.p-disabled):hover {
+            background-color: $inputFilledHoverBg;
+        }
+
+        &:not(.p-disabled).p-focus {
+            background-color: $inputFilledFocusBg;
+        }
+    }
+    
+    .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-treeselect-clear-icon {
+        color: $inputIconColor;
+        right: $inputGroupAddOnMinWidth;
+    }
+    
+    &.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-header {
+        padding: $inputListHeaderPadding;
+        border-bottom: $inputListHeaderBorder;
+        color: $inputListHeaderTextColor;
+        background: $inputOverlayHeaderBg;
+        margin: $inputListHeaderMargin;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+
+        .p-treeselect-filter-container {
+            margin-right: $inlineSpacing;
+
+            .p-treeselect-filter {
+                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
+            }
+    
+            .p-treeselect-filter-icon {
+                right: nth($inputPadding, 2);
+                color: $inputIconColor;
+            }
+    
+            &.p-treeselect-clearable-filter {
+                .p-treeselect-filter {
+                    padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
+                }
+        
+                .p-treeselect-filter-clear-icon {
+                    right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
+                }
+            }
+        }
+
+        .p-treeselect-close {
+            @include action-icon();
+        }
+    }
+
+    .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;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/input/_tristatecheckbox.scss
+++ b/src/assets/scss/theme-base/components/input/_tristatecheckbox.scss
@@ -0,0 +1,46 @@
+
+.p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-checkbox-input {
+    cursor: pointer;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+
+.p-tristatecheckbox {
+    &.p-variant-filled {
+        .p-checkbox-box {
+            background-color: $inputFilledBg;
+        }
+
+        &.p-highlight {
+            .p-checkbox-box {
+                background: $checkboxActiveBg;
+            }
+        }
+
+        &:not(.p-disabled) {
+            &:has(.p-checkbox-input:hover) {
+                .p-checkbox-box {
+                    background-color: $inputFilledHoverBg;
+                }
+
+                &.p-highlight {
+                    .p-checkbox-box {
+                        background: $checkboxActiveHoverBg;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/menu/_breadcrumb.scss
+++ b/src/assets/scss/theme-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;
+				}
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_contextmenu.scss
+++ b/src/assets/scss/theme-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-link();
+	}
+
+	.p-menuitem-separator {
+		border-top: $divider;
+		margin: $menuSeparatorMargin;
+	}
+
+	.p-submenu-icon {
+		font-size: $menuitemSubmenuIconFontSize;
+
+		&.p-icon {
+			width: $menuitemSubmenuIconFontSize;
+			height: $menuitemSubmenuIconFontSize;
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_dock.scss
+++ b/src/assets/scss/theme-base/components/menu/_dock.scss
@@ -0,0 +1,109 @@
+.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-action {
+		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;
+		}
+	}
+
+	&.p-dock-mobile {
+		&.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;
+			}
+		}
+
+		&.p-dock-magnification {
+			&.p-dock-top,
+			&.p-dock-bottom,
+			&.p-dock-left,
+			&.p-dock-right {
+				.p-dock-item-second-prev,
+				.p-dock-item-second-next,
+				.p-dock-item-prev,
+				.p-dock-item-next,
+				.p-dock-item-current {
+					transform: none;
+					margin: 0;
+				}
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_megamenu.scss
+++ b/src/assets/scss/theme-base/components/menu/_megamenu.scss
@@ -0,0 +1,141 @@
+.p-megamenu {
+	padding: $horizontalMenuPadding;
+	background: $horizontalMenuBg;
+	color: $horizontalMenuTextColor;
+	border: $horizontalMenuBorder;
+	border-radius: $borderRadius;
+
+	.p-megamenu-root-list {
+		outline: 0 none;
+	}
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	.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-button {
+		width: $actionIconWidth;
+		height: $actionIconHeight;
+		color: $horizontalMenuRootMenuitemIconColor;
+		border-radius: $actionIconBorderRadius;
+		transition: $actionIconTransition;
+
+		&:hover {
+			color: $horizontalMenuRootMenuitemIconHoverColor;
+			background: $horizontalMenuRootMenuitemHoverBg;
+		}
+
+		&:focus {
+			@include focused();
+		}
+	}
+
+	&.p-megamenu-horizontal {
+		.p-megamenu-root-list {
+			> .p-menuitem {
+				@include horizontal-rootmenuitem-link();
+			}
+		}
+	}
+
+	&.p-megamenu-mobile-active {
+		.p-megamenu-root-list {
+			padding: $verticalMenuPadding;
+			background: $overlayMenuBg;
+			border: $overlayMenuBorder;
+			box-shadow: $overlayMenuShadow;
+
+			.p-menu-separator {
+				border-top: $divider;
+				margin: $menuSeparatorMargin;
+			}
+
+			.p-submenu-icon {
+				font-size: $menuitemSubmenuIconFontSize;
+
+				&.p-icon {
+					width: $menuitemSubmenuIconFontSize;
+					height: $menuitemSubmenuIconFontSize;
+				}
+			}
+
+			> .p-menuitem {
+				width: 100%;
+				position: static;
+
+				> .p-menuitem-link {
+					@include menuitem-link();
+
+					> .p-submenu-icon {
+						margin-left: auto;
+					}
+				}
+
+				&.p-menuitem-active {
+					> .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-link {
+						> .p-submenu-icon {
+							transform: rotate(-90deg);
+						}
+					}
+				}
+			}
+
+			.p-menuitem {
+				width: 100%;
+				position: static;
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_menu.scss
+++ b/src/assets/scss/theme-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-link();
+	}
+
+	&.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-menu-separator {
+		border-top: $divider;
+		margin: $menuSeparatorMargin;
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_menubar.scss
+++ b/src/assets/scss/theme-base/components/menu/_menubar.scss
@@ -0,0 +1,216 @@
+.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-link();
+		}
+	}
+
+	.p-menuitem {
+		@include menuitem-link();
+	}
+
+	.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;
+		}
+	}
+
+	&.p-menubar-mobile {
+		.p-menubar-button {
+			width: $actionIconWidth;
+			height: $actionIconHeight;
+			color: $horizontalMenuRootMenuitemIconColor;
+			border-radius: $actionIconBorderRadius;
+			transition: $actionIconTransition;
+
+			&:hover {
+				color: $horizontalMenuRootMenuitemIconHoverColor;
+				background: $horizontalMenuRootMenuitemHoverBg;
+			}
+
+			&:focus {
+				@include focused();
+			}
+		}
+
+		.p-menubar-root-list {
+			padding: $verticalMenuPadding;
+			background: $overlayMenuBg;
+			border: $overlayMenuBorder;
+			box-shadow: $overlayMenuShadow;
+
+			.p-menuitem-separator {
+				border-top: $divider;
+				margin: $menuSeparatorMargin;
+			}
+
+			.p-submenu-icon {
+				font-size: $menuitemSubmenuIconFontSize;
+			}
+
+			.p-menuitem {
+				.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 {
+				.p-submenu-icon {
+					transition: transform $transitionDuration;
+					transform: rotate(90deg);
+				}
+
+				.p-menuitem-active {
+					> .p-menuitem-content {
+						> .p-menuitem-link {
+							> .p-submenu-icon {
+								transform: rotate(-90deg);
+							}
+						}
+					}
+				}
+			}
+
+			@include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
+		}
+	}
+}
+
+@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-menu-separator {
+				border-top: $divider;
+				margin: $menuSeparatorMargin;
+			}
+
+			.p-submenu-icon {
+				font-size: $menuitemSubmenuIconFontSize;
+
+				&.p-icon {
+					width: $menuitemSubmenuIconFontSize;
+					height: $menuitemSubmenuIconFontSize;
+				}
+			}
+
+			> .p-menuitem {
+				width: 100%;
+				position: static;
+
+				> .p-menuitem-link {
+					@include menuitem-link();
+
+					> .p-submenu-icon {
+						margin-left: auto;
+						transition: transform $transitionDuration;
+					}
+				}
+
+				&.p-menuitem-active {
+					> .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-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;
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_panelmenu.scss
+++ b/src/assets/scss/theme-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-link {
+				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-link();
+
+			.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;
+				}
+			}
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/menu/_slidemenu.scss
+++ b/src/assets/scss/theme-base/components/menu/_slidemenu.scss
@@ -0,0 +1,60 @@
+.p-slidemenu {
+    padding: $verticalMenuPadding;
+    background: $menuBg;
+    color: $menuTextColor;
+    border: $menuBorder;
+    border-radius: $borderRadius;
+    width: $menuWidth;
+
+    .p-menuitem-link {
+        @include menuitem-link();
+    }
+
+    &.p-slidemenu-overlay {
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu-list {
+        padding: $verticalMenuPadding;
+        background: $overlayMenuBg;
+        border: $overlayMenuBorder;
+        box-shadow: $overlayMenuShadow;
+    }
+
+    .p-slidemenu {
+        &.p-slidemenu-active {
+            > .p-slidemenu-link {
+                background: $menuitemActiveBg;
+
+                .p-slidemenu-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-slidemenu-icon, .p-slidemenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+    }
+
+    .p-slidemenu-separator {
+        border-top: $divider;
+        margin: $menuSeparatorMargin;
+    }
+
+    .p-slidemenu-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
+    }
+
+    .p-slidemenu-backward {
+        padding: $menuitemPadding;
+	    color: $menuitemTextColor;
+    }
+}
--- a/src/assets/scss/theme-base/components/menu/_steps.scss
+++ b/src/assets/scss/theme-base/components/menu/_steps.scss
@@ -0,0 +1,57 @@
+@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);
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/menu/_tabmenu.scss
+++ b/src/assets/scss/theme-base/components/menu/_tabmenu.scss
@@ -0,0 +1,50 @@
+.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;
+                height: calc(100% + #{-1 * nth($tabviewHeaderMargin, 3)});
+
+                .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;
+                }
+            }
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/menu/_tieredmenu.scss
+++ b/src/assets/scss/theme-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-link();
+	}
+
+	.p-menuitem-separator {
+		border-top: $divider;
+		margin: $menuSeparatorMargin;
+	}
+
+	.p-submenu-icon {
+		font-size: $menuitemSubmenuIconFontSize;
+
+		&.p-icon {
+			width: $menuitemSubmenuIconFontSize;
+			height: $menuitemSubmenuIconFontSize;
+		}
+	}
+}
--- a/src/assets/scss/theme-base/components/messages/_inlinemessage.scss
+++ b/src/assets/scss/theme-base/components/messages/_inlinemessage.scss
@@ -0,0 +1,69 @@
+.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-icon {
+            width: $inlineMessageIconFontSize;
+            height: $inlineMessageIconFontSize;
+        }
+    }
+
+    .p-inline-message-text {
+        font-size: $inlineMessageTextFontSize;
+    }
+
+    &.p-inline-message-icon-only {
+        .p-inline-message-icon {
+            margin-right: 0;
+        }
+    }
+}
--- a/src/assets/scss/theme-base/components/messages/_message.scss
+++ b/src/assets/scss/theme-base/components/messages/_message.scss
@@ -0,0 +1,107 @@
+.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 {
+            width: $messageIconFontSize;
+            height: $messageIconFontSize;
+        }
+    }
+
+    .p-message-summary {
+        font-weight: 700;
+    }
+
+    .p-message-detail {
+        margin-left: $inlineSpacing;
+    }
+}
--- a/src/assets/scss/theme-base/components/messages/_toast.scss
+++ b/src/assets/scss/theme-base/components/messages/_toast.scss
@@ -0,0 +1,101 @@
+.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;
+            }
+        }
+
+    }
+}
--- a/src/assets/scss/theme-base/components/misc/_avatar.scss
+++ b/src/assets/scss/theme-base/components/misc/_avatar.scss
@@ -0,0 +1,34 @@
+.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-circle {
+    border-radius: 50%;
+  }
+
+.p-avatar-group {
+    .p-avatar {
+        border: 2px solid $panelContentBg;
+    }
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`/* Customizations to the designer theme should be defined here */`