init

javascript-version/@core/scss/template/_components.scss

@@ -0,0 +1,69 @@
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+
+// 👉 VExpansionPanel
+.v-expansion-panel-title,
+.v-expansion-panel-title--active,
+.v-expansion-panel-title:hover,
+.v-expansion-panel-title:focus,
+.v-expansion-panel-title:focus-visible,
+.v-expansion-panel-title--active:focus,
+.v-expansion-panel-title--active:hover {
+  .v-expansion-panel-title__overlay {
+    opacity: 0 !important;
+  }
+}
+
+// 👉 Set Elevation
+.v-expansion-panels {
+  .v-expansion-panel {
+    .v-expansion-panel__shadow {
+      @include mixins_elevation.elevation(3);
+    }
+  }
+
+  .v-expansion-panel-text__wrapper {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    font-size: 1rem;
+  }
+}
+
+// 👉 Timeline outlined variant
+.v-timeline-item {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+
+        &.bg-#{$color-name} {
+          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
+        }
+      }
+    }
+  }
+}
+
+// 👉 Timeline Outlined style
+.v-timeline-variant-outlined.v-timeline {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+        background-color: rgb(var(--v-theme-surface)) !important;
+
+        &.bg-#{$color-name} {
+          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
+        }
+      }
+    }
+  }
+}
+
+// 👉 v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.375rem !important;
+  }
+}

javascript-version/@core/scss/template/_dark.scss

@@ -0,0 +1,61 @@
+.v-application {
+  // vertical nav
+  &.v-theme--dark .layout-nav-type-vertical,
+  .v-theme-provider.v-theme--dark {
+    .layout-vertical-nav {
+      // nav-link and nav-group style for dark
+      .nav-link .router-link-exact-active,
+      .nav-group.active:not(.nav-group .nav-group) > :first-child {
+        color: rgb(var(--v-theme-on-primary)) !important;
+
+        &::before {
+          z-index: -1;
+          color: rgb(var(--v-theme-primary));
+          opacity: 1 !important;
+        }
+      }
+
+      .nav-group {
+        .nav-link {
+          .router-link-exact-active {
+            color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+
+            &::before {
+              color: transparent;
+            }
+
+            &:hover::before {
+              color: inherit;
+              opacity: var(--v-hover-opacity) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // horizontal nav
+  &.v-theme--dark {
+    .layout-wrapper.layout-nav-type-horizontal {
+      .layout-horizontal-nav {
+        .nav-items {
+          .nav-group.active:not(.sub-item) {
+            > :first-child {
+              .nav-group-label {
+                &::before {
+                  z-index: -1;
+                  opacity: 1;
+                }
+
+                .v-icon,
+                .nav-item-title {
+                  color: rgb(var(--v-theme-on-primary));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,20 @@
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+
+.layout-wrapper.layout-nav-type-vertical {
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            @include elevation.elevation(8);
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/_mixins.scss

@@ -0,0 +1,6 @@
+@use "sass:map";
+@use "@configured-variables" as variables;
+
+@mixin custom-elevation($color, $size) {
+  box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size)));
+}

javascript-version/@core/scss/template/_utilities.scss

@@ -0,0 +1,49 @@
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 11px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 13px;
+    line-height: 1.25rem;
+  }
+}
+
+// ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release.
+// VSpacer
+.v-spacer {
+  flex-grow: 1;
+}
+
+// app-logo & app-logo-title
+.app-logo {
+  display: flex;
+  align-items: center !important;
+  column-gap: 0.5rem !important;
+
+  .app-logo-title {
+    font-size: 1.75rem !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.15px !important;
+    line-height: 1.75rem !important;
+    text-transform: lowercase !important;
+  }
+}
+
+.text-white-variant {
+  color: rgba(255, 255, 255, 78%) !important;
+}
+
+.bg-custom-background {
+  background-color: rgb(var(--v-table-header-color));
+}

javascript-version/@core/scss/template/_utils.scss

@@ -0,0 +1,43 @@
+@use "sass:string";
+
+/*
+  ℹ️ This function is helpful when we have multi dimensional value
+
+  Assume we have padding variable `$nav-padding-horizontal: 10px;`
+  With above variable let's say we use it in some style:
+  ```scss
+  .selector {
+    margin-left: $nav-padding-horizontal;
+  }
+  ```
+
+  Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
+  In this case above style will be invalid.
+
+  This function will extract the left most value from the variable value.
+
+  $nav-padding-horizontal: 10px; => 10px;
+  $nav-padding-horizontal: 10px 15px; => 10px;
+
+  This is safe:
+  ```scss
+  .selector {
+    margin-left: get-first-value($nav-padding-horizontal);
+  }
+  ```
+*/
+@function get-first-value($var) {
+  $start-at: string.index(#{$var}, " ");
+
+  @if $start-at {
+    @return string.slice(
+      #{$var},
+      0,
+      $start-at
+    );
+  }
+  /* stylelint-disable-next-line @stylistic/indentation */
+ @else {
+    @return $var;
+  }
+}

javascript-version/@core/scss/template/_variables.scss

@@ -0,0 +1,109 @@
+@use "sass:map";
+@use "utils";
+
+$vertical-nav-horizontal-padding-margin-custom: 1.91rem;
+
+/* ℹ️ We created this SCSS var to extract the start padding  */
+// Docs: https://sass-lang.com/documentation/modules/string
+// $vertical-nav-horizontal-padding => 0 8px;
+// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
+//   string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
+// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
+
+$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-margin-custom) !default;
+
+@forward "@core/scss/base/variables" with (
+  // 👉 Default layout with vertical nav
+  $default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
+
+  // 👉 Vertical nav
+  $layout-vertical-nav-collapsed-width: 84px !default,
+  $layout-vertical-nav-navbar-height: 64px !default,
+  $layout-vertical-nav-footer-height: 56px !default,
+  $vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
+  $vertical-nav-items-nested-icon-size: 0.375rem !default,
+  $vertical-nav-horizontal-padding: 0.9375rem 0.9375rem !default,
+  $vertical-nav-header-inline-spacing: 0 !default,
+  $vertical-nav-header-padding: 1.0625rem 2rem !default,
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1.625rem !default,
+
+  // Section title margin bottom
+  $vertical-nav-section-title-mb: 1.125rem !default,
+
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
+
+  // 👉 Horizontal nav
+  /*
+    ❗ Heads up
+    ==================
+    Here we assume we will always use shorthand property which will apply same padding on four side
+    This is because this have been used as value of top property by `.popper-content`
+  */
+  $horizontal-nav-padding: 0.625rem !default,
+  $horizontal-nav-top-level-items-gap: 6px !default,
+  $horizontal-nav-popper-content-top: 0.25rem !default,
+  $layout-horizontal-nav-navbar-height: 64px !default,
+
+  // Horizontal nav icons
+  $horizontal-nav-items-icon-size: 1.375rem !default,
+  $horizontal-nav-third-level-icon-size: 0.375rem !default,
+  // Font sizes
+  $font-sizes: (
+    "xs": 0.6875rem,
+    "sm": 0.8125rem,
+    "base": 0.9375rem,
+    "lg": 1.125rem,
+    "xl": 1.5rem,
+    "2xl": 1.75rem,
+    "3xl": 2rem,
+    "4xl": 2.375rem,
+    "5xl": 3rem,
+    "6xl": 3.5rem,
+    "7xl": 4rem,
+    "8xl": 4.5rem,
+    "9xl": 5.25rem,
+  ) !default,
+
+  // Line heights
+  $font-line-height: (
+    "xs": 0.9375rem,
+    "sm": 1.25rem,
+    "base": 1.375rem,
+    "lg": 1.75rem,
+    "xl": 2.375rem,
+    "2xl": 2.625rem,
+    "3xl": 2.75rem,
+    "4xl": 3.25rem,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1
+  ) !default,
+  $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
+);
+
+$slider-thumb-label-color: rgb(117, 117, 117) !default;
+
+/* vertical nav header */
+$vertical-nav-header-margin-top: 0.75rem !default;
+
+/* Custom shadow opacity */
+$shadow-opacity: (
+  "xs": 0.06,
+  "sm": 0.4,
+  "md": 0.45,
+  "lg": 0.4,
+) !default;
+
+/* Custom shadow params */
+$shadow-params: (
+  "xs": 0 1px 5px 0,
+  "sm": 0 2px 4px 0,
+  "md": 0 4px 16px 0,
+  "lg": 0 10px 20px 0,
+) !default;

javascript-version/@core/scss/template/_vertical-nav.scss

@@ -0,0 +1,110 @@
+@use "@core/scss/template/placeholders" as *;
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+$divider-gap: 0.75rem;
+
+// vertical nav app title
+.layout-nav-type-vertical {
+  .layout-vertical-nav {
+    @include elevation.elevation(4);
+
+    // 👉 Nav header
+    .nav-header {
+      margin-block-start: variables.$vertical-nav-header-margin-top;
+
+      .app-title-wrapper {
+        h1 {
+          font-size: 28px;
+        }
+      }
+    }
+
+    // Small screen nav header actions button removed
+    @media (max-width: 1279px) {
+      &:not(.visible) {
+        .header-action {
+          opacity: 0;
+        }
+      }
+    }
+
+    .nav-items {
+      padding-block-start: 0.25rem;
+
+      // ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
+      .ps__thumb-y {
+        inline-size: 0.125rem;
+      }
+
+      .ps__rail-y.ps--clicking .ps__thumb-y,
+      .ps__rail-y:focus > .ps__thumb-y,
+      .ps__rail-y:hover > .ps__thumb-y {
+        inline-size: 0.375rem;
+      }
+    }
+
+    // nav-section-title's line
+    .title-text {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: flex-start;
+      column-gap: $divider-gap;
+
+      &::before {
+        flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
+        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+        content: "";
+        margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
+      }
+    }
+
+    // Active status indicator
+    .nav-link .router-link-exact-active,
+    .nav-group.open .nav-group-label:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
+      &::after {
+        position: absolute;
+        background-color: rgb(var(--v-theme-primary));
+        block-size: 2.625rem;
+        border-end-start-radius: 0.375rem;
+        border-start-start-radius: 0.375rem;
+        content: "";
+        inline-size: 0.25rem;
+        inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
+      }
+    }
+
+    // 👉 Vertical nav link
+    .nav-group {
+      .nav-group-children-wrapper .nav-group-children .nav-link {
+        .nav-item-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+        }
+
+        .router-link-exact-active {
+          @extend %nav-link-nested-active;
+
+          &:hover::before {
+            opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
+          }
+
+          // active status indicator removed
+          &::after {
+            content: none;
+          }
+        }
+      }
+
+      // Active & open states for nav group label
+      &.open {
+        /* stylelint-disable-next-line no-descending-specificity */
+        .nav-group-label {
+          &:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
+            @extend %vertical-nav-group-active;
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/index.scss

@@ -0,0 +1,18 @@
+@use "sass:map";
+@use "@core/scss/base";
+
+// Layout
+@use "vertical-nav";
+@use "default-layout-w-vertical-nav";
+
+// Utilities
+@use "utilities";
+
+// Components
+@use "components";
+
+// Mixins
+@use "mixins";
+
+// Dark
+@use "dark";

javascript-version/@core/scss/template/libs/apex-chart.scss

@@ -0,0 +1,108 @@
+@use "@styles/variables/_vuetify.scss" as vuetify;
+@use "@layouts/styles/mixins" as layoutsMixins;
+@use "@core/scss/base/mixins";
+
+body .apexcharts-canvas {
+  &line[stroke="transparent"] {
+    display: "none";
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+      padding-inline: 10px;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-grey-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-grey-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-tooltip-marker {
+    margin-inline-end: 0.625rem;
+
+    @include layoutsMixins.rtl {
+      margin-inline: 0 0.625rem !important;
+    }
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/_variables.scss

@@ -0,0 +1,369 @@
+@use "sass:math";
+
+$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
+  "Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+
+/* 👉 Typography custom variables */
+$typography-h5-font-size: 1.125rem;
+$typography-body-1-font-size: 0.9375rem;
+$typography-body-1-line-height: 1.375rem;
+
+@forward "../../../base/libs/vuetify/variables"  with (
+  $body-font-family: $font-family-custom !default,
+  $border-radius-root: 6px !default,
+
+  // 👉 Rounded
+  $rounded: (
+    "sm": 4px,
+    "lg": 8px,
+    "shaped": 30px 0,
+  ) !default,
+
+  // 👉 Shadows
+  $shadow-key-umbra: (
+    0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
+    1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
+    2: (0 1px 5px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
+    3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
+    4: (0 2px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
+    5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
+    6: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
+    7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
+    8: (0 4px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
+    9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
+    10: (0 5px 22px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
+    11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
+    12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
+    14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
+    16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
+    18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
+    20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
+    21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
+    23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
+    24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
+  ) !default,
+
+  $shadow-key-penumbra: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  $shadow-key-ambient: (
+    0: (0 0 transparent),
+    1: (0 0 transparent),
+    2: (0 0 transparent),
+    3: (0 0 transparent),
+    4: (0 0 transparent),
+    5: (0 0 transparent),
+    6: (0 0 transparent),
+    7: (0 0 transparent),
+    8: (0 0 transparent),
+    9: (0 0 transparent),
+    10: (0 0 transparent),
+    11: (0 0 transparent),
+    12: (0 0 transparent),
+    13: (0 0 transparent),
+    14: (0 0 transparent),
+    15: (0 0 transparent),
+    16: (0 0 transparent),
+    17: (0 0 transparent),
+    18: (0 0 transparent),
+    19: (0 0 transparent),
+    20: (0 0 transparent),
+    21: (0 0 transparent),
+    22: (0 0 transparent),
+    23: (0 0 transparent),
+    24: (0 0 transparent),
+  ) !default,
+
+  // 👉 Typography
+  $typography: (
+    "h1": (
+      "size": 2.875rem,
+      "weight": 500,
+      "line-height": 4.25rem,
+      "letter-spacing": normal
+    ),
+    "h2": (
+      "size": 2.375rem,
+      "weight": 500,
+      "line-height": 3.5rem,
+      "letter-spacing": normal
+    ),
+    "h3": (
+      "size": 1.75rem,
+      "weight": 500,
+      "line-height": 2.625rem
+    ),
+    "h4": (
+      "size": 1.5rem,
+      "weight": 500,
+      "line-height": 2.375rem,
+      "letter-spacing": normal
+    ),
+    "h5": (
+      "size": $typography-h5-font-size,
+      "weight": 500,
+      "line-height": 1.75rem
+    ),
+    "h6":(
+      "size": 0.9375rem,
+      "line-height": 1.375rem,
+      "weight": 500,
+      "letter-spacing": normal
+    ),
+    "body-1":(
+      "size": $typography-body-1-font-size,
+      "line-height": $typography-body-1-line-height,
+      "letter-spacing": normal
+    ),
+    "body-2": (
+      "size": 0.8125rem,
+      "line-height": 1.25rem,
+      "letter-spacing": normal
+    ),
+    "subtitle-1":(
+      "size": 0.9375rem,
+      "weight": 400,
+      "line-height": 1.375rem
+    ),
+    "subtitle-2": (
+      "size": 0.8125rem,
+      "weight": 400,
+      "line-height": 1.25rem,
+      "letter-spacing": normal
+    ),
+    "button": (
+      "size": 0.9375rem,
+      "weight": 500,
+      "line-height": 1.125rem,
+      "letter-spacing": 0.0269rem,
+      "text-transform": capitalize
+    ),
+    "caption":(
+      "size": 0.8125rem,
+      "line-height": 1.125rem,
+      "letter-spacing": 0.025rem
+    ),
+    "overline": (
+      "size": 0.75rem,
+      "weight": 400,
+      "line-height": 0.875rem,
+      "letter-spacing": 0.05rem,
+      "text-transform": uppercase
+    ),
+  ) !default,
+
+  // 👉 Alert
+  $alert-title-font-size: 1.125rem !default,
+  $alert-title-line-height: 1.5rem !default,
+  $alert-border-opacity: 0.38 !default,
+  $alert-prepend-margin-inline-end: 12px !default,
+
+  // 👉 Avatar
+  $avatar-height: 38px !default,
+  $avatar-width: 38px !default,
+  $avatar-elevation: 2 !default,
+
+  // 👉 Badge
+  $badge-dot-height: 8px !default,
+  $badge-dot-width: 8px !default,
+  $badge-min-width: 24px !default,
+  $badge-height: 1.5rem !default,
+  $badge-font-size: 0.8125rem !default,
+  $badge-border-radius: 12px !default,
+  $badge-border-color: rgb(var(--v-theme-surface)) !default,
+  $badge-border-transform: scale(1.5) !default,
+  $badge-dot-border-width: 2px !default,
+
+  // 👉 Chip
+  $chip-font-size: 13px !default,
+  $chip-font-weight: 500 !default,
+  $chip-label-border-radius: 0.375rem !default,
+  $chip-height: 28px !default,
+  $chip-close-size: 1.25rem !default,
+  $chip-elevation: 0 !default,
+
+  // 👉 Button
+  $button-height: 38px !default,
+  $button-padding-ratio: 1.9 !default,
+  $button-line-height: 1.375rem !default,
+  $button-disabled-opacity: 0.45 !default,
+  $button-disabled-overlay: 0.2025 !default,
+  $button-icon-font-size: 0.9375rem !default,
+  $button-elevation: ("default": 2, "hover": 2, "active": 2) !default,
+
+  // 👉 Button Group
+  $btn-group-border-radius: 8px !default,
+
+  // 👉 Dialog
+  $dialog-card-header-padding: 24px 24px 0 !default,
+  $dialog-card-header-text-padding-top: 24px !default,
+  $dialog-card-text-padding: 24px !default,
+  $dialog-border-radius: 8px !default,
+  $dialog-elevation: 8 !default,
+
+  // 👉 Card
+  $card-title-font-size: $typography-h5-font-size !default,
+  $card-text-font-size: $typography-body-1-font-size !default,
+  $card-subtitle-font-size: 0.9375rem !default,
+  $card-subtitle-header-padding: 0 !default,
+  $card-subtitle-line-height: 1.375rem !default,
+  $card-title-line-height: 1.75rem !default,
+  $card-text-padding: 24px !default,
+  $card-text-line-height: 1.375rem !default,
+  $card-item-padding: 24px !default,
+  $card-elevation: 6 !default,
+
+  // 👉 Carousel
+  $carousel-dot-margin: 0 !default,
+  $carousel-dot-inactive-opacity: 0.4 !default,
+
+  // 👉 Expansion Panel
+  $expansion-panel-title-padding: 12px 20px 12px 24px !default,
+  $expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $expansion-panel-active-title-min-height: 46px !default,
+  $expansion-panel-title-min-height: 46px !default,
+  $expansion-panel-text-padding: 0 20px 20px 24px !default,
+
+  // 👉 Field
+  $field-font-size: 0.9375rem !default,
+  $input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default,
+  $field-outline-opacity: 0.22 !default,
+  $field-border-width: 1px !default,
+  $field-focused-border-width: 2px !default,
+  $field-control-affixed-padding: 14px !default,
+
+  // 👉 Input
+  $input-details-padding-above: 4px !default,
+  $input-details-font-size: 0.8125rem !default,
+
+  // 👉 List
+  $list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
+  $list-item-padding: 8px 20px !default,
+  $list-item-min-height: 38px !default,
+  $list-subheader-font-size: 13px !default,
+  $list-subheader-line-height: 1.25rem !default,
+  $list-subheader-padding-start: 20px !default,
+  $list-subheader-padding-end: 20px !default,
+  $list-subheader-min-height: 40px !default,
+  $list-disabled-opacity: 0.4 !default,
+  $list-item-icon-margin-start: 12px !default,
+  $list-item-icon-margin-end: 12px !default,
+  $list-item-avatar-margin-start: 12px !default,
+  $list-item-avatar-margin-end: 12px !default,
+  $list-item-nav-title-font-size: 0.9375rem !default,
+  $list-item-nav-title-font-weight: 400 !default,
+  $list-item-nav-subtitle-font-size: 0.8125rem !default,
+  $list-item-subtitle-line-height: 1.25rem !default,
+
+  // 👉 label
+  $label-font-size: 0.9375rem !default,
+
+  // 👉 message
+  $messages-font-size: 13px !default,
+
+  // 👉 menu
+  $menu-elevation: 8 !default,
+
+  // 👉 navigation drawer
+  $navigation-drawer-temporary-elevation: 8 !default,
+  $navigation-drawer-transition-duration: 0.5s !default,
+
+  // 👉 pagination
+  $pagination-item-margin: 0.1875rem !default,
+
+  // 👉 Progress Linear
+  $progress-linear-background-opacity: 1 !default,
+
+  // 👉 Radio
+  $radio-group-label-selection-group-padding-inline: 0 !default,
+
+  // 👉 slider
+  $slider-thumb-hover-opacity: var(--v-activated-opacity) !default,
+  $slider-thumb-label-padding: 2px 10px !default,
+  $slider-thumb-label-font-size: 0.8125rem !default,
+  $slider-track-active-size: 6px !default,
+  $slider-thumb-label-height: 1.5rem !default,
+  $slider-thumb-label-border-radius: 0.375rem !default,
+  $slider-thumb-label-transition: none !default,
+
+  // 👉 select
+  $select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
+
+  // 👉 snackbar
+  $snackbar-background: rgb(var(--v-tooltip-background)) !default,
+  $snackbar-color: rgb(var(--v-theme-surface)) !default,
+  $snackbar-content-padding: 12px 16px !default,
+  $snackbar-font-size: 0.8125rem !default,
+  $snackbar-elevation: 2 !default,
+  $snackbar-wrapper-min-height:44px !default,
+  $snackbar-btn-padding: 0 9px !default,
+  $snackbar-action-margin: 16px !default,
+
+  // 👉 switch
+  $switch-inset-track-width: 1.875rem !default,
+  $switch-inset-track-height: 1.125rem !default,
+  $switch-inset-thumb-height: 0.875rem !default,
+  $switch-inset-thumb-width: 0.875rem !default,
+  $switch-inset-thumb-off-height: 0.875rem !default,
+  $switch-track-opacity: 1 !default,
+  $switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
+  $switch-thumb-background: rgb(var(--v-theme-on-primary)),
+
+  // 👉 table
+  $table-row-height: 50px !default,
+  $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
+  $table-font-size: 0.9375rem !default,
+  $table-header-height: 56px !default,
+  $table-header-font-weight: 500 !default,
+  $table-column-padding: 0 16px 0 20px !default,
+  $data-table-footer-padding: 12px 24px !default,
+
+  // 👉 tabs
+  $tabs-height: 42px !default,
+  $tab-min-width: 50px !default,
+
+  // 👉 tooltip
+  $tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
+  $tooltip-text-color: rgb(var(--v-theme-surface)) !default,
+  $tooltip-font-size: 0.8125rem !default,
+  $tooltip-border-radius: 0.25rem !default,
+  $tooltip-padding: 5px 12px !default,
+  $tooltip-line-height: 1.25rem !default,
+
+  // 👉 timeline
+  $timeline-dot-size: 34px !default,
+  $timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
+  $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
+  $timeline-divider-line-thickness: 1.5px !default,
+  $timeline-item-padding: 16px !default,
+);

javascript-version/@core/scss/template/libs/vuetify/components/_alert.scss

@@ -0,0 +1,70 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+
+/* 👉 Alert
+/ ℹ️ custom icon styling */
+
+$alert-prepend-icon-font-size: 1.125rem !important;
+
+.v-alert:not(.v-alert--prominent) {
+  .v-alert__prepend {
+    padding: 0.125rem;
+    border-radius: 1rem;
+    background-color: #fff;
+
+    .v-icon {
+      block-size: $alert-prepend-icon-font-size;
+      font-size: $alert-prepend-icon-font-size;
+      inline-size: $alert-prepend-icon-font-size;
+    }
+  }
+
+  .v-alert-title {
+    margin-block-end: 0.25rem;
+  }
+
+  .v-alert__close {
+    .v-btn--icon {
+      .v-icon {
+        block-size: 1.25rem;
+        font-size: 1.25rem;
+        inline-size: 1.25rem;
+      }
+
+      .v-btn__overlay,
+      .v-ripple__container {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@each $color-name in variables.$theme-colors-name {
+  .v-alert {
+
+    &:not(.v-alert--prominent).text-#{$color-name},
+    &:not(.v-alert--prominent).bg-#{$color-name} {
+      .v-alert__prepend {
+        border: 2px solid rgb(var(--v-theme-#{$color-name}-light));
+        color: rgba(var(--v-theme-#{$color-name})) !important;
+
+        @include mixins.elevation(2);
+      }
+    }
+
+    &--variant-outlined:not(.v-alert--prominent),
+    &--variant-tonal:not(.v-alert--prominent),
+    &--variant-plain:not(.v-alert--prominent) {
+      &.bg-#{$color-name},
+      &.text-#{$color-name} {
+        .v-alert__prepend {
+          border: none;
+          background-color: rgb(var(--v-theme-#{$color-name}));
+          box-shadow: 0 0 0 2px rgba(var(--v-theme-#{$color-name}), 0.16);
+          color: #fff !important;
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_avatar.scss

@@ -0,0 +1,27 @@
+@use "@core/scss/base/mixins";
+
+// 👉 Avatar
+body {
+  .v-avatar {
+    .v-icon {
+      block-size: 1.5rem;
+      inline-size: 1.5rem;
+    }
+
+    &.v-avatar--variant-tonal:not([class*="text-"]) {
+      .v-avatar__underlay {
+        --v-activated-opacity: 0.08;
+      }
+    }
+  }
+
+  .v-avatar-group {
+    > * {
+      &:hover {
+        transform: translateY(-5px) scale(1);
+
+        @include mixins.elevation(6);
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_badge.scss

@@ -0,0 +1,25 @@
+@use "@configured-variables" as variables;
+
+// 👉 Badge
+.v-badge {
+  .v-badge__badge .v-icon {
+    font-size: 0.9375rem;
+  }
+
+  &.v-badge--bordered:not(.v-badge--dot) {
+    .v-badge__badge {
+      &::after {
+        transform: scale(1.05);
+      }
+    }
+  }
+
+  &.v-badge--tonal {
+    @each $color-name in variables.$theme-colors-name {
+      .v-badge__badge.bg-#{$color-name} {
+        background-color: rgba(var(--v-theme-#{$color-name}), 0.16) !important;
+        color: rgb(var(--v-theme-#{$color-name})) !important;
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_button.scss

@@ -0,0 +1,278 @@
+/* stylelint-disable no-descending-specificity */
+@use "sass:list";
+@use "sass:map";
+@use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+/* 👉 Button
+ Above map but opacity values as key and variant as value */
+
+body .v-btn {
+  // ℹ️ This is necessary because as we have darker overlay on hover for elevated variant, button text doesn't get dimmed
+  // This style is already applied to `.v-icon`
+  .v-btn__content {
+    z-index: 0;
+  }
+
+  transition: all 0.135s ease; /* Add transition */
+
+  &:hover {
+    transform: translateY(-1px); /* Add transition */
+  }
+
+  // box-shadow
+  @each $color-name in variables.$theme-colors-name {
+    &:not(.v-btn--disabled) {
+      &.bg-#{$color-name}.v-btn--variant-elevated {
+        &,
+        &:hover {
+          @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+        }
+
+        &:focus,
+        &:active {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+
+  // Default (elevated) button
+  &--variant-elevated,
+  &--variant-flat {
+    // We want a darken color on hover
+    &:not(.v-btn--loading, .v-btn--disabled) {
+      @each $color-name in variables.$theme-colors-name {
+        &.bg-#{$color-name} {
+          &:hover,
+          &:active,
+          &:focus {
+            background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important;
+          }
+        }
+      }
+    }
+  }
+
+  &--variant-outlined,
+  &--variant-tonal {
+    // We want a darken color on hover
+    &:not(.v-btn--loading, .v-btn--disabled) {
+      @each $color-name in variables.$theme-colors-name {
+        &.text-#{$color-name} {
+          &:hover {
+            @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+          }
+
+          &:hover,
+          &:active,
+          &:focus {
+            border-color: rgba(var(--v-theme-#{$color-name}-darken-1));
+            background-color: rgba(var(--v-theme-#{$color-name}-darken-1));
+            color: #fff !important;
+
+            .v-btn__underlay {
+              opacity: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &--variant-text {
+    .v-btn__overlay {
+      --v-hover-opacity: 0.08;
+    }
+
+    &:active,
+    &:focus {
+      .v-btn__overlay {
+        opacity: var(--v-selected-opacity);
+      }
+    }
+  }
+
+  // Text button
+  &:not(.v-btn--icon, .v-tab) {
+    &.v-btn--variant-text,
+    &.v-btn--variant-plain {
+      &.v-btn--size-default {
+        padding-inline: 0.75rem;
+      }
+
+      &.v-btn--size-small {
+        padding-inline: 0.5rem;
+      }
+
+      &.v-btn--size-large {
+        padding-inline: 1rem;
+      }
+    }
+  }
+
+  // Button border-radius
+  &:not(.v-btn--icon).v-btn--size-x-small {
+    border-radius: 2px;
+  }
+
+  &:not(.v-btn--icon).v-btn--size-small {
+    border-radius: 4px;
+    line-height: 1.125rem;
+    padding-block: 0;
+    padding-inline: 0.75rem;
+
+    .v-icon {
+      --v-icon-size-multiplier: 0.821;
+    }
+
+    .v-btn__prepend,
+    .v-btn__content > .v-icon--start {
+      margin-inline: 0 0.375rem;
+    }
+
+    .v-btn__append,
+    .v-btn__content > .v-icon--end {
+      margin-inline: 0.375rem 0;
+    }
+  }
+
+  &:not(.v-btn--icon).v-btn--size-default {
+    .v-btn__content,
+    .v-btn__append,
+    .v-btn__prepend {
+      .v-icon {
+        --v-icon-size-multiplier: 0.7113;
+
+        block-size: 1.125rem;
+        font-size: 1.125rem;
+        inline-size: 1.125rem;
+      }
+
+      .v-icon--start {
+        margin-inline: 0 8px;
+      }
+
+      .v-icon--end {
+        margin-inline: 8px 0;
+      }
+    }
+  }
+
+  &:not(.v-btn--icon).v-btn--size-large {
+    --v-btn-height: 3rem;
+
+    border-radius: 8px;
+    line-height: 1.625rem;
+    padding-block: 0;
+    padding-inline: 1.5rem;
+
+    .v-icon {
+      --v-icon-size-multiplier: 0.7848;
+    }
+
+    .v-btn__prepend,
+    .v-btn__content > .v-icon--start {
+      margin-inline: 0 0.625rem;
+    }
+
+    .v-btn__append,
+    .v-btn__content > .v-icon--end {
+      margin-inline: 0.625rem 0;
+    }
+  }
+
+  &:not(.v-btn--icon).v-btn--size-x-large {
+    border-radius: 10px;
+  }
+
+  // icon buttons
+  &.v-btn--icon.v-btn--density-default {
+    block-size: var(--v-btn-height);
+    inline-size: var(--v-btn-height);
+
+    &.v-btn--size-default {
+      .v-icon {
+        --v-icon-size-multiplier: 0.978 !important;
+
+        block-size: 1.375rem;
+        font-size: 1.375rem;
+        inline-size: 1.375rem;
+      }
+    }
+
+    &.v-btn--size-small {
+      --v-btn-height: 2.125rem;
+
+      .v-icon {
+        block-size: 1.25rem;
+        font-size: 1.25rem;
+        inline-size: 1.25rem;
+      }
+    }
+
+    &.v-btn--size-large {
+      --v-btn-height: 2.625rem;
+
+      .v-icon {
+        block-size: 1.5rem;
+        font-size: 1.5rem;
+        inline-size: 1.5rem;
+      }
+    }
+  }
+
+  // Button group
+  &-group.v-btn-toggle {
+    .v-btn {
+      block-size: 54px !important;
+      inline-size: 54px !important;
+
+      &.v-btn--density-comfortable {
+        block-size: 46px !important;
+        inline-size: 46px !important;
+      }
+
+      &.v-btn--density-compact {
+        block-size: 38px !important;
+        inline-size: 38px !important;
+      }
+
+      &.v-btn--icon .v-icon {
+        block-size: 1.375rem;
+        color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+        font-size: 1.375rem;
+        inline-size: 1.375rem;
+      }
+
+      &.v-btn--icon.v-btn--active {
+        .v-icon {
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+        }
+      }
+    }
+
+    &.v-btn-group {
+      align-items: center;
+      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      border-radius: 0.5rem;
+      block-size: 54px;
+
+      .v-btn.v-btn--active {
+        .v-btn__overlay {
+          --v-activated-opacity: 0.08;
+        }
+      }
+
+      &.v-btn-group--density-compact {
+        border-radius: 0.25rem;
+        block-size: 38px;
+      }
+
+      &.v-btn-group--density-comfortable {
+        border-radius: 0.375rem;
+        block-size: 46px;
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_cards.scss

@@ -0,0 +1,3 @@
+.v-card-subtitle {
+  color: rgba(var(--v-theme-on-background), 0.55);
+}

javascript-version/@core/scss/template/libs/vuetify/components/_checkbox.scss

@@ -0,0 +1,63 @@
+@use "sass:list";
+@use "sass:map";
+@use "@styles/variables/vuetify";
+@use "@configured-variables" as variables;
+
+// 👉 Checkbox
+.v-checkbox {
+  // We adjusted it to vertically align the label
+
+  .v-selection-control--disabled {
+    --v-disabled-opacity: 0.45;
+  }
+
+  // Remove extra space below the label
+  .v-input__details {
+    min-block-size: unset !important;
+    padding-block-start: 0 !important;
+  }
+}
+
+// 👉 checkbox size and box shadow
+.v-checkbox-btn {
+  // 👉 Checkbox icon opacity
+  .v-selection-control__input {
+    > .v-icon {
+      opacity: 1;
+    }
+
+    > .custom-checkbox-indeterminate {
+      color: rgb(var(--v-theme-primary));
+    }
+  }
+
+  &.v-selection-control--dirty {
+    @each $color-name in variables.$theme-colors-name {
+      .v-selection-control__wrapper.text-#{$color-name} {
+        .v-selection-control__input {
+          /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
+          .v-icon {
+            filter: drop-shadow(0 2px 4px rgba(var(--v-theme-#{$color-name}), 0.4));
+          }
+        }
+      }
+    }
+  }
+}
+
+// checkbox icon size
+.v-checkbox,
+.v-checkbox-btn {
+  &.v-selection-control {
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+      line-height: 1.375rem;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_chip.scss

@@ -0,0 +1,122 @@
+// 👉 Chip
+.v-chip {
+  line-height: 1.25rem;
+
+  .v-chip__close {
+    margin-inline: 4px -6px !important;
+
+    .v-icon {
+      opacity: 0.7;
+    }
+  }
+
+  .v-chip__content {
+    .v-icon {
+      block-size: 20px;
+      font-size: 20px;
+      inline-size: 20px;
+    }
+  }
+
+  &:not(.v-chip--variant-elevated) {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+
+  &.v-chip--variant-elevated {
+    background-color: rgba(var(--v-theme-on-surface), var(--v-activated-opacity));
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+  }
+
+  &:not([class*="text-"]) {
+    --v-activated-opacity: 0.08;
+  }
+
+  // common style for all sizes
+  &.v-chip--size-default,
+  &.v-chip--size-small {
+    .v-icon--start {
+      margin-inline: -6px 4px !important;
+    }
+
+    .v-icon--end {
+      margin-inline: 4px -6px !important;
+    }
+
+    .v-avatar--start {
+      margin-inline-end: 4px !important;
+    }
+
+    .v-avatar--end {
+      margin-inline-start: 4px !important;
+    }
+  }
+
+  // small size
+  &:not(.v-chip--pill).v-chip--size-small {
+    --v-chip-height: 24px;
+
+    font-size: 13px;
+    padding-inline: 0.625rem;
+
+    &.v-chip--label {
+      border-radius: 0.25rem;
+    }
+
+    .v-avatar {
+      --v-avatar-height: 16px;
+    }
+
+    .v-chip__close {
+      font-size: 16px;
+      max-block-size: 16px;
+      max-inline-size: 16px;
+    }
+
+    .v-chip__content {
+      .v-icon {
+        block-size: 16px;
+        font-size: 16px;
+        inline-size: 16px;
+      }
+    }
+  }
+
+  // extra small size
+  &:not(.v-chip--pill).v-chip--size-x-small {
+    --v-chip-height: 20px;
+
+    &.v-chip--label {
+      border-radius: 0.25rem;
+      padding-inline: 0.625rem;
+    }
+
+    font-size: 13px;
+
+    .v-avatar {
+      --v-avatar-height: 16px;
+    }
+
+    .v-chip__close {
+      font-size: 16px;
+      max-block-size: 16px;
+      max-inline-size: 16px;
+    }
+  }
+
+  // default size
+  &:not(.v-chip--pill).v-chip--size-default {
+    padding-inline: 0.75rem;
+
+    .v-avatar {
+      --v-avatar-height: 20px;
+    }
+
+    .v-avatar--start {
+      margin-inline: -6px 4px;
+    }
+
+    .v-avatar--end {
+      margin-inline: 4px -6px;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_dialog.scss

@@ -0,0 +1,24 @@
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+// 👉 Dialog
+body .v-dialog {
+  // dialog custom close btn
+  .v-dialog-close-btn {
+    border-radius: 0.25rem;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transform: translate(0.5rem, -0.5rem);
+
+    @include layoutsMixins.rtl {
+      transform: translate(-0.5rem, -0.5rem);
+    }
+
+    &:hover {
+      transform: translate(0.3125rem, -0.3125rem);
+
+      @include layoutsMixins.rtl {
+        transform: translate(-0.3125rem, -0.3125rem);
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_expansion-panels.scss

@@ -0,0 +1,84 @@
+@use "@core/scss/base/mixins";
+@use "@layouts/styles/mixins" as layoutsMixins;
+
+// 👉 Expansion panels
+body .v-layout .v-application__wrap .v-expansion-panels {
+  .v-expansion-panel {
+    margin-block-start: 0 !important;
+
+    // expansion panel arrow font size
+    .v-expansion-panel-title {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-weight: 500;
+
+      .v-expansion-panel-title__icon {
+        transition: transform 0.2s ease-in-out;
+
+        .v-icon {
+          block-size: 1.25rem !important;
+          font-size: 1.25rem !important;
+          inline-size: 1.25rem !important;
+        }
+      }
+    }
+
+    .v-expansion-panel-title,
+    .v-expansion-panel-title--active,
+    .v-expansion-panel-title:hover,
+    .v-expansion-panel-title:focus,
+    .v-expansion-panel-title:focus-visible,
+    .v-expansion-panel-title--active:focus,
+    .v-expansion-panel-title--active:hover {
+      .v-expansion-panel-title__overlay {
+        opacity: 0 !important;
+      }
+    }
+
+    // Set Elevation when panel open
+    &:not(.v-expansion-panels--variant-accordion) {
+      &.v-expansion-panel--active {
+        .v-expansion-panel__shadow {
+          @include mixins.elevation(6);
+        }
+      }
+    }
+  }
+
+  // custom style for expansion panels
+  &.expansion-panels-width-border {
+    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    border-radius: 0.375rem;
+
+    .v-expansion-panel-title {
+      background-color: rgb(var(--v-theme-grey-light));
+      border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+      margin-block-end: -1px;
+    }
+
+    .v-expansion-panel-text {
+      .v-expansion-panel-text__wrapper {
+        padding: 1.25rem;
+      }
+    }
+  }
+
+  &:not(.expansion-panels-width-border) {
+    .v-expansion-panel {
+      &:not(:last-child) {
+        margin-block-end: 0.5rem;
+      }
+
+      &:not(:first-child)::after {
+        content: none;
+      }
+
+      // ℹ️ we have to use below style of increase the specificity and override the default style
+      /* stylelint-disable-next-line no-descending-specificity */
+      &:first-child:not(:last-child),
+      &:not(:first-child, :last-child),
+      &:not(:first-child) {
+        border-radius: 0.375rem !important;
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_field.scss

@@ -0,0 +1,316 @@
+@use "sass:map";
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+
+$v-input-density: (
+  comfortable: (
+    icon-size: 1.125rem,
+    font-size: 0.9375rem,
+    line-height: 1.5rem,
+  ),
+  default: (
+    icon-size: 1.25rem,
+    font-size: 1.0625rem,
+    line-height: 1.5rem,
+  ),
+  compact: (
+    icon-size: 1rem,
+    font-size: 0.8125rem,
+    line-height: 1.375rem,
+  ),
+);
+
+// 👉 VInput
+.v-input {
+  // 👉 VField
+  .v-field {
+    .v-field__loader {
+      .v-progress-linear {
+        .v-progress-linear__background {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    &.v-field--variant-solo,
+    &.v-field--variant-filled {
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    }
+
+    // Color for text field
+    .v-field__input {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    }
+
+    // Make field border width 2px when error
+    &.v-field--error {
+      .v-field__outline {
+        --v-field-border-width: 2px;
+      }
+    }
+
+    // Label
+    &.v-field--variant-outlined {
+      .v-label {
+        &.v-field-label--floating {
+          line-height: 0.9375rem;
+          margin-block: 0;
+          margin-inline: 6px;
+        }
+      }
+    }
+
+    &:not(.v-field--focused, .v-field--error):hover .v-field__outline {
+      --v-field-border-opacity: 0.6 !important;
+    }
+
+    // Shadow on focus
+    &.v-field--variant-outlined.v-field--focused:not(.v-field--error, .v-field--success) {
+      .v-field__outline {
+        @each $color-name in variables.$theme-colors-name {
+          &.text-#{$color-name} {
+            @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+          }
+        }
+
+        &:not([class*="text-"]) {
+          @include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
+        }
+      }
+    }
+  }
+
+  // Give hint messages color based on theme color
+  @each $color-name in variables.$theme-colors-name {
+    &:has( .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
+      .v-messages {
+        color: rgb(var(--v-theme-#{$color-name}));
+      }
+    }
+  }
+
+  // Loop through each density setting in the map
+  @each $density, $settings in $v-input-density {
+    &.v-input--density-#{$density} {
+      .v-input__append,
+      .v-input__prepend,
+      .v-input__details,
+      .v-field .v-field__append-inner,
+      .v-field .v-field__prepend-inner,
+      .v-field .v-field__clearable {
+        > .v-icon {
+          block-size: map.get($settings, icon-size);
+          color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+          font-size: map.get($settings, icon-size);
+          inline-size: map.get($settings, icon-size);
+          opacity: 1;
+        }
+      }
+
+      .v-field {
+        .v-field__input {
+          font-size: map.get($settings, font-size);
+          line-height: map.get($settings, line-height);
+        }
+      }
+    }
+  }
+}
+
+// 👉 TextField, Select, AutoComplete, ComboBox, Textarea
+// ℹ️ We added .v-application to increase the specificity of the selector
+
+// Styles related to our custom input components
+body {
+  .app-text-field,
+  .app-select,
+  .app-autocomplete,
+  .app-combobox,
+  .app-textarea,
+  .app-file-input,
+  .app-picker-field {
+    color: rgba(var(--v-theme-on-surface));
+
+    // making padding 0 for help text
+    .v-text-field,
+    .v-file-input {
+      .v-input__details {
+        padding-inline-start: 0;
+      }
+    }
+
+    // Placeholder
+    .v-input {
+      .v-field {
+        // Placeholder transition
+        input,
+        .v-field__input {
+          &::placeholder {
+            transition: transform 0.2s ease-out;
+          }
+        }
+
+        &.v-field--focused {
+          input,
+          .v-field__input {
+            &::placeholder {
+              transform: translateX(4px) !important;
+
+              [dir="rtl"] & {
+                transform: translateX(-4px) !important;
+              }
+            }
+          }
+        }
+      }
+
+      // padding for different density
+      &.v-input--density-default {
+        .v-field {
+          border-radius: 8px;
+
+          .v-field__input {
+            --v-field-padding-start: 20px;
+            --v-field-padding-end: 20px;
+          }
+        }
+      }
+
+      &.v-input--density-comfortable {
+        .v-field {
+          .v-field__input {
+            --v-field-padding-start: 14px;
+            --v-field-padding-end: 14px;
+          }
+        }
+      }
+
+      &.v-input--density-compact {
+        .v-field {
+          border-radius: 4px;
+
+          .v-field__input {
+            --v-field-padding-start: 12px;
+            --v-field-padding-end: 12px;
+          }
+        }
+      }
+    }
+
+    // Disabled state
+    &:has(.v-input.v-input--disabled) {
+      .v-label {
+        color: rgba(var(--v-theme-on-surface), 0.4);
+      }
+
+      .v-input {
+        .v-field.v-field--disabled {
+          background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
+          opacity: 1;
+
+          .v-field__outline {
+            --v-field-border-opacity: 0.24;
+          }
+
+          .v-field__input {
+            color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+          }
+        }
+      }
+    }
+
+    // Apply color to label
+    @each $color-name in variables.$theme-colors-name {
+      .v-label {
+        color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+        &:has(+ .v-input .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
+          color: rgb(var(--v-theme-#{$color-name}));
+        }
+
+        &:has(+ .v-input .v-field.v-field--error) {
+          color: rgb(var(--v-theme-error));
+        }
+      }
+    }
+  }
+
+  @mixin style-selectable-component($component-name) {
+    .app-#{$component-name} {
+      .v-#{$component-name}__selection {
+        line-height: 24px;
+        margin-block: 0 !important;
+      }
+
+      // Vertical alignment of placeholder & text
+      .v-#{$component-name} .v-field .v-field__input > input {
+        align-self: center;
+      }
+
+      // Chips
+
+      .v-#{$component-name}.v-#{$component-name}--chips.v-input--dirty {
+        .v-#{$component-name}__selection {
+          margin: 0;
+        }
+
+        .v-field__input {
+          gap: 3px;
+        }
+
+        &.v-input--density-compact {
+          .v-field__input {
+            padding-inline-start: 0.5rem;
+          }
+        }
+
+        &.v-input--density-comfortable {
+          .v-field__input {
+            padding-inline-start: 0.75rem;
+          }
+        }
+
+        &.v-input--density-default {
+          .v-field__input {
+            padding-inline-start: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  @include style-selectable-component("autocomplete");
+  @include style-selectable-component("select");
+  @include style-selectable-component("combobox");
+
+  // AutoComplete
+  @at-root {
+    .app-autocomplete__content {
+      .v-list-item--active {
+        .v-autocomplete__mask {
+          background: rgba(92, 82, 192, 60%);
+        }
+      }
+
+      .v-theme--dark {
+        .v-list-item:not(.v-list-item--active) {
+          .v-autocomplete__mask {
+            background: rgba(59, 64, 92, 60%);
+          }
+        }
+      }
+    }
+  }
+}
+
+.app-inner-list {
+  // Hide checkboxes
+  .v-selection-control {
+    display: none;
+  }
+}
+
+// Hide resizer
+::-webkit-resizer {
+  background: transparent;
+}

javascript-version/@core/scss/template/libs/vuetify/components/_list.scss

@@ -0,0 +1,30 @@
+// 👉 List
+.v-list-item {
+  --v-hover-opacity: 0.06 !important;
+
+  .v-checkbox-btn.v-selection-control--density-compact {
+    margin-inline-end: 0.5rem;
+  }
+
+  .v-list-item__overlay {
+    transition: none;
+  }
+
+  .v-list-item__prepend {
+    .v-icon {
+      font-size: 1.25rem;
+    }
+  }
+
+  &.v-list-item--active {
+    &.v-list-group__header {
+      color: rgb(var(--v-theme-primary));
+    }
+
+    &:not(.v-list-group__header) {
+      .v-list-item-subtitle {
+        color: rgb(var(--v-theme-primary));
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_menu.scss

@@ -0,0 +1,33 @@
+// Style list differently when it's used in a components like select, menu etc
+.v-menu {
+  // Adjust padding of list item inside menu
+  .v-list-item {
+    padding-block: 8px !important;
+    padding-inline: 20px !important;
+  }
+}
+
+// 👉 Menu
+// Menu custom style
+.v-menu.v-overlay {
+  .v-overlay__content {
+    .v-list {
+      .v-list-item {
+        margin-block-end: 0.125rem;
+        min-block-size: 2.375rem;
+
+        &:first-child {
+          margin-block-start: 0;
+        }
+
+        &:last-child {
+          margin-block-end: 0;
+        }
+      }
+
+      .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
+        padding-block: 0.5rem;
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_otp-input.scss

@@ -0,0 +1,17 @@
+// otp input
+.v-otp-input {
+  justify-content: unset !important;
+
+  .v-otp-input__content {
+    max-inline-size: 100%;
+
+    .v-field.v-field--focused {
+      .v-field__outline {
+        .v-field__outline__start,
+        .v-field__outline__end {
+          border-color: rgb(var(--v-theme-primary)) !important;
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_pagination.scss

@@ -0,0 +1,167 @@
+/* stylelint-disable no-descending-specificity */
+@use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+// 👉 Pagination
+.v-pagination {
+  // button size
+  .v-pagination__next,
+  .v-pagination__prev {
+    .v-btn--icon {
+      &.v-btn--size-small {
+        .v-icon {
+          font-size: 1rem;
+        }
+      }
+
+      &.v-btn--size-default {
+        .v-icon {
+          font-size: 1.125rem;
+        }
+      }
+
+      &.v-btn--size-large {
+        .v-icon {
+          font-size: 1.375rem;
+        }
+      }
+    }
+  }
+
+  // common style for all components
+  .v-pagination__item,
+  .v-pagination__next,
+  .v-pagination__last,
+  .v-pagination__first,
+  .v-pagination__prev {
+    .v-btn {
+      color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+      font-weight: 400;
+      line-height: 1;
+      transform: none;
+
+      &--size-default {
+        --v-btn-size: 13px;
+      }
+
+      &--size-large {
+        --v-btn-size: 15px;
+      }
+
+      &.v-btn--disabled {
+        opacity: 0.45;
+      }
+
+      &--variant-tonal {
+        .v-btn__underlay {
+          --v-activated-opacity: 0.06;
+        }
+
+        &:hover {
+          .v-btn__overlay {
+            --v-hover-opacity: 0.1;
+          }
+
+          .v-btn__underlay {
+            --v-activated-opacity: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // Disable scale animation for button
+  .v-pagination__item {
+    .v-btn {
+      transform: scale(1) !important;
+
+      /* We disabled transition because it looks ugly 🤮 */
+      transition-duration: 0s;
+
+      &:active {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .v-pagination__list {
+    @each $color-name in variables.$theme-colors-name {
+      &:has(.v-pagination__item.v-pagination__item--is-active .v-btn.text-#{$color-name}) {
+        .v-pagination__item {
+          .v-btn {
+            &:hover {
+              color: rgb(var(--v-theme-#{$color-name})) !important;
+
+              .v-btn__overlay {
+                --v-hover-opacity: 0.16;
+
+                background-color: rgb(var(--v-theme-#{$color-name}));
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .v-pagination__item--is-active {
+      .v-btn {
+        &:not([class*="text-"]) {
+          color: rgb(var(--v-theme-primary));
+
+          &:not(.v-btn--variant-outlined) {
+            .v-btn__underlay {
+              --v-activated-opacity: 0;
+            }
+
+            .v-btn__overlay {
+              --v-border-opacity: 0.16;
+            }
+
+            &:hover {
+              .v-btn__overlay {
+                --v-hover-opacity: 0.16;
+              }
+            }
+          }
+
+          &.v-btn--variant-outlined {
+            border-color: rgb(var(--v-theme-primary));
+
+            .v-btn__overlay {
+              --v-border-opacity: 0.16;
+              --v-hover-opacity: 0.16;
+            }
+          }
+        }
+
+        // box-shadow
+        @each $color-name in variables.$theme-colors-name {
+          &:not(.v-btn--disabled) {
+            &.text-#{$color-name} {
+              &,
+              &:hover,
+              &:active,
+              &:focus {
+                @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+
+                color: rgb(var(--v-theme-#{$color-name})) !important;
+              }
+
+              .v-btn__underlay {
+                opacity: 1 !important;
+              }
+
+              .v-btn__content {
+                color: #fff;
+              }
+
+              &.v-btn--variant-outlined {
+                background-color: rgb(var(--v-theme-#{$color-name}));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_progress.scss

@@ -0,0 +1,13 @@
+// @use "@core/scss/template/mixins" as templateMixins;
+@use "@configured-variables" as variables;
+
+// 👉 Progress
+// .v-progress-linear {
+// .v-progress-linear__determinate {
+//   @each $color-name in variables.$theme-colors-name {
+//     &.bg-#{$color-name} {
+//       // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+//     }
+//   }
+// }
+// }

javascript-version/@core/scss/template/libs/vuetify/components/_radio.scss

@@ -0,0 +1,54 @@
+@use "@core/scss/base/mixins";
+@use "@configured-variables" as variables;
+
+// 👉 Radio
+.v-radio,
+.v-radio-btn {
+  // 👉 radio icon opacity
+  .v-selection-control__input > .v-icon {
+    opacity: 1;
+  }
+
+  &.v-selection-control--disabled {
+    --v-disabled-opacity: 0.45;
+  }
+
+  &.v-selection-control--dirty {
+    @each $color-name in variables.$theme-colors-name {
+      .v-selection-control__wrapper.text-#{$color-name} {
+        .v-selection-control__input {
+          /* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
+          .v-icon {
+            filter: drop-shadow(0 2px 4px rgba(var(--v-theme-#{$color-name}), 0.4));
+          }
+        }
+      }
+    }
+  }
+
+  &.v-selection-control {
+    .v-selection-control__input {
+      svg {
+        font-size: 1.5rem;
+      }
+    }
+
+    .v-label {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+  }
+}
+
+// 👉 Radio, Checkbox
+
+.v-input.v-radio-group > .v-input__control > .v-label {
+  margin-inline-start: 0;
+}
+
+.v-radio-group {
+  .v-selection-control-group {
+    .v-radio:not(:last-child) {
+      margin-inline-end: 0;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_rating.scss

@@ -0,0 +1,14 @@
+// 👉 Rating
+.v-rating {
+  .v-rating__wrapper {
+    .v-btn {
+      &:hover {
+        transform: none;
+      }
+
+      .v-icon {
+        --v-icon-size-multiplier: 1;
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_slider.scss

@@ -0,0 +1,26 @@
+// 👉 Slider
+.v-slider {
+  .v-slider-track__background--opacity {
+    opacity: 0.16;
+  }
+}
+
+.v-slider-thumb {
+  .v-slider-thumb__surface::after {
+    border-radius: 50%;
+    background-color: #fff;
+    block-size: calc(var(--v-slider-thumb-size) - 9px);
+    inline-size: calc(var(--v-slider-thumb-size) - 9px);
+  }
+
+  .v-slider-thumb__label {
+    background-color: rgb(var(--v-tooltip-background));
+    color: rgb(var(--v-theme-surface));
+    font-weight: 500;
+    line-height: 1.25rem;
+
+    &::before {
+      content: none;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_snackbar.scss

@@ -0,0 +1,10 @@
+// 👉 snackbar
+.v-snackbar {
+  .v-snackbar__actions {
+    .v-btn {
+      font-size: 13px;
+      line-height: 18px;
+      text-transform: capitalize;
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_switch.scss

@@ -0,0 +1,68 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+@use "@core/scss/base/mixins";
+
+// 👉 switch
+.v-switch {
+  &.v-switch--inset {
+    .v-selection-control {
+      .v-switch__track {
+        transition: all 0.1s;
+      }
+
+      &.v-selection-control--disabled {
+        --v-disabled-opacity: 0.45;
+      }
+
+      &.v-selection-control--dirty {
+        @each $color-name in variables.$theme-colors-name {
+          .v-switch__track.bg-#{$color-name} {
+            @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+          }
+        }
+      }
+
+      &:not(.v-selection-control--dirty) {
+        .v-switch__track {
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset;
+        }
+      }
+    }
+
+    .v-selection-control__wrapper {
+      block-size: 36px;
+    }
+
+    .v-selection-control__input {
+      transform: translateX(-6px) !important;
+
+      --v-selection-control-size: 0.875rem;
+
+      .v-switch__thumb {
+        @include mixins.elevation(2);
+
+        transform: scale(1);
+      }
+    }
+
+    .v-selection-control--dirty {
+      .v-selection-control__input {
+        transform: translateX(6px) !important;
+      }
+    }
+  }
+
+  .v-label {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    line-height: 1.375rem !important;
+  }
+}
+
+.v-switch.v-input,
+.v-checkbox-btn,
+.v-radio-btn,
+.v-radio {
+  --v-input-control-height: auto;
+
+  flex: unset;
+}

javascript-version/@core/scss/template/libs/vuetify/components/_table.scss

@@ -0,0 +1,43 @@
+@use "@layouts/styles/mixins" as layoutMixins;
+
+// 👉 Table
+.v-table {
+  th {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+    font-size: 0.8125rem;
+    letter-spacing: 0.2px;
+    line-height: 24px;
+    text-transform: uppercase;
+
+    .v-data-table-header__content {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+
+  .v-data-table-footer {
+    row-gap: 8px !important;
+  }
+}
+
+// 👉 Datatable
+.v-data-table,
+.v-table {
+  table {
+    thead,
+    tbody {
+      tr {
+        th,
+        td {
+          &:first-child:has(.v-checkbox-btn) {
+            padding-inline: 15px 0 !important;
+          }
+
+          @include layoutMixins.rtl {
+            padding-inline: 20px 16px !important;
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_tabs.scss

@@ -0,0 +1,94 @@
+@use "@configured-variables" as variables;
+@use "@core/scss/template/mixins" as templateMixins;
+
+// 👉 Tabs
+.v-tabs {
+  &.v-tabs--vertical {
+    --v-tabs-height: 38px !important;
+
+    &:not(.v-tabs-pill) {
+      block-size: 100%;
+      border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  &.v-tabs--horizontal:not(.v-tabs-pill) {
+    border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+
+    .v-tab__slider {
+      block-size: 3px;
+    }
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .v-btn {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    transform: none !important;
+
+    .v-icon {
+      block-size: 1.125rem !important;
+      font-size: 1.125rem !important;
+      inline-size: 1.125rem !important;
+    }
+
+    &:hover:not(.v-tab--selected) {
+      color: rgb(var(--v-theme-primary));
+
+      .v-btn__content {
+        .v-tab__slider {
+          opacity: var(--v-activated-opacity);
+        }
+      }
+    }
+
+    &.v-btn--stacked {
+      /* stylelint-disable-next-line no-descending-specificity */
+      .v-icon {
+        block-size: 1.5rem !important;
+        font-size: 1.5rem !important;
+        inline-size: 1.5rem !important;
+      }
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    .v-btn__overlay,
+    .v-ripple__container {
+      opacity: 0 !important;
+    }
+
+    /* stylelint-disable-next-line no-descending-specificity */
+    .v-tab__slider {
+      inset-inline-end: 0;
+      inset-inline-start: unset;
+    }
+  }
+}
+
+// 👉 Tab Pill
+.v-tabs.v-tabs-pill {
+  .v-slide-group__content {
+    gap: 0.25rem;
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+    .v-tab-item--selected.v-tab--selected.text-#{$color-name} {
+      @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
+
+      background-color: rgba(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-primary)) !important;
+    }
+  }
+
+  &.v-slide-group,
+  .v-slide-group__container {
+    box-sizing: content-box;
+    padding: 1rem;
+    margin: -1rem;
+  }
+
+  .v-tab.v-btn:not(.v-tab--selected) {
+    &:hover {
+      background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_textarea.scss

@@ -0,0 +1,9 @@
+.v-textarea {
+  textarea {
+    opacity: 0 !important;
+  }
+
+  & .v-field--active textarea {
+    opacity: 1 !important;
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_timeline.scss

@@ -0,0 +1,99 @@
+@use "@configured-variables" as variables;
+
+// 👉 Timeline
+.v-timeline {
+  // timeline items
+  .v-timeline-item {
+    &:not(:last-child) {
+      .v-timeline-item__body {
+        margin-block-end: 0.5rem;
+      }
+    }
+
+    .app-timeline-title {
+      line-height: 1.375rem;
+    }
+
+    .app-timeline-meta {
+      font-size: 0.8125rem;
+      font-weight: 400;
+      letter-spacing: 0.025rem;
+      line-height: 1.125rem;
+    }
+
+    .app-timeline-text {
+      font-size: 0.9375rem;
+      font-weight: 400;
+      line-height: 1.375rem;
+    }
+  }
+
+  // timeline icon only
+  &.v-timeline-icon-only {
+    .v-timeline-divider__dot {
+      .v-timeline-divider__inner-dot {
+        background: rgb(var(--v-theme-background));
+        box-shadow: none;
+      }
+    }
+  }
+
+  &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot {
+    background: none !important;
+
+    .v-timeline-divider__inner-dot {
+      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+
+        &.bg-#{$color-name} {
+          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
+        }
+      }
+    }
+  }
+
+  &.v-timeline--variant-outlined {
+    .v-timeline-item {
+      .v-timeline-divider {
+        .v-timeline-divider__dot {
+          background: none !important;
+        }
+      }
+
+      .v-timeline-divider__after {
+        border: 1.5px dashed rgba(var(--v-border-color), var(--v-border-opacity));
+        background: none;
+      }
+
+      .v-timeline-divider__before {
+        background: none;
+      }
+    }
+  }
+
+  // we have to override the default bg-color of the timeline dot in the card
+  .v-card:not(.v-card--variant-text, .v-card--variant-plain, .v-card--variant-outlined) & {
+    &.v-timeline-icon-only {
+      .v-timeline-divider__dot {
+        .v-timeline-divider__inner-dot {
+          /* stylelint-disable-next-line no-descending-specificity */
+          background: rgb(var(--v-theme-surface));
+        }
+      }
+    }
+  }
+
+  .v-card.v-card--variant-tonal & {
+    &.v-timeline-icon-only {
+      .v-timeline-divider__dot {
+        .v-timeline-divider__inner-dot {
+          /* stylelint-disable-next-line no-descending-specificity */
+          .v-icon {
+            background: none;
+          }
+        }
+      }
+    }
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/_tooltip.scss

@@ -0,0 +1,6 @@
+// 👉 Tooltip
+.v-tooltip {
+  .v-overlay__content {
+    font-weight: 500;
+  }
+}

javascript-version/@core/scss/template/libs/vuetify/components/index.scss

@@ -0,0 +1,25 @@
+@use "alert";
+@use "avatar";
+@use "button";
+@use "badge";
+@use "cards";
+@use "chip";
+@use "dialog";
+@use "expansion-panels";
+@use "list";
+@use "menu";
+@use "pagination";
+@use "progress";
+@use "rating";
+@use "snackbar";
+@use "slider";
+@use "table";
+@use "tabs";
+@use "timeline";
+@use "tooltip";
+@use "otp-input";
+@use "field";
+@use "checkbox";
+@use "textarea";
+@use "radio";
+@use "switch";

javascript-version/@core/scss/template/libs/vuetify/index.scss

@@ -0,0 +1,3 @@
+@use "@core/scss/base/libs/vuetify";
+@use "./overrides.scss";
+@use "components/index.scss";

javascript-version/@core/scss/template/libs/vuetify/overrides.scss

@@ -0,0 +1,34 @@
+@use "@core/scss/base/utils";
+@use "@configured-variables" as variables;
+
+// 👉 Body
+
+// set body font size 15px
+body {
+  font-size: 15px !important;
+
+  // 👉 Button outline with default color border color
+  .v-alert--variant-outlined,
+  .v-avatar--variant-outlined,
+  .v-btn.v-btn--variant-outlined,
+  .v-card--variant-outlined,
+  .v-chip--variant-outlined,
+  .v-list-item--variant-outlined {
+    &:not([class*="text-"]) {
+      border-color: rgba(var(--v-border-color), 0.22);
+    }
+
+    &.text-default {
+      border-color: rgba(var(--v-border-color), 0.22);
+    }
+  }
+
+  // We reduced this margin to get 40px input height
+  .v-input--density-compact {
+    --v-input-chips-margin-bottom: 1px;
+  }
+}
+
+.text-caption {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
+}

javascript-version/@core/scss/template/pages/misc.scss

@@ -0,0 +1,14 @@
+.layout-blank {
+  .misc-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+    min-block-size: calc(var(--vh, 1vh) * 100);
+  }
+
+  .misc-avatar {
+    z-index: 1;
+  }
+}

javascript-version/@core/scss/template/pages/page-auth.scss

@@ -0,0 +1,54 @@
+.layout-blank {
+  .auth-wrapper {
+    min-block-size: 100dvh;
+  }
+
+  .auth-card {
+    z-index: 1 !important;
+  }
+}
+
+.auth-v1-top-shape,
+.auth-v1-bottom-shape {
+  position: absolute;
+}
+
+.auth-v1-top-shape {
+  block-size: 148px;
+  inline-size: 148px;
+  inset-block-start: -3.5rem;
+  inset-inline-end: -2.5rem;
+}
+
+.auth-v1-bottom-shape {
+  block-size: 240px;
+  inline-size: 240px;
+  inset-block-end: -4.5rem;
+  inset-inline-start: -3rem;
+}
+
+.auth-illustration {
+  z-index: 1;
+}
+
+@media (min-width: 960px) {
+  .skin--bordered {
+    .auth-card-v2 {
+      border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+    }
+  }
+}
+
+.auth-logo {
+  position: absolute;
+  z-index: 2;
+  inset-block-start: 2.5rem;
+  inset-inline-start: 2.5rem;
+}
+
+.auth-title {
+  font-size: 1.75rem;
+  font-weight: 700;
+  letter-spacing: 0.15px;
+  line-height: 1.75rem;
+}

javascript-version/@core/scss/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,11 @@
+@use "vuetify/lib/styles/tools/elevation" as elevation;
+@use "@configured-variables" as variables;
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+
+    @include elevation.elevation(4);
+  }
+}

javascript-version/@core/scss/template/placeholders/_index.scss

@@ -0,0 +1,4 @@
+@forward "vertical-nav";
+@forward "nav";
+@forward "default-layout-vertical-nav";
+@forward "misc";

javascript-version/@core/scss/template/placeholders/_misc.scss

@@ -0,0 +1,7 @@
+%blurry-bg {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+  /* stylelint-enable */
+  background-color: rgb(var(--v-theme-surface), 0.88);
+}

javascript-version/@core/scss/template/placeholders/_nav.scss

@@ -0,0 +1,45 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  .nav-item-title {
+    letter-spacing: normal;
+    line-height: 1.375rem;
+  }
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  --v-activated-opacity: 0.16;
+
+  background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
+  box-shadow: none;
+  color: rgb(var(--v-theme-primary));
+}
+
+// style for vertical nav nested icon
+%nav-link-nested-active {
+  background-color: transparent !important;
+  box-shadow: none;
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
+
+  // style for nested dot icon
+  .nav-item-icon {
+    color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important;
+    transform: scale(2.6662);
+
+    &::before {
+      position: absolute;
+      border-radius: 6px;
+      background-color: rgb(var(--v-theme-primary));
+      block-size: 100%;
+      content: "";
+      inline-size: 100%;
+      inset: 0;
+      transform: scale(-0.5);
+    }
+  }
+}

javascript-version/@core/scss/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,57 @@
+// Open & Active nav group styles
+%vertical-nav-group-active {
+  --v-theme-overlay-multiplier: 2;
+
+  color: rgb(var(--v-theme-primary));
+}
+
+%nav-header-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--v-theme-primary));
+  block-size: 1.375rem;
+  inline-size: 1.375rem;
+}
+
+// nav-group and nav-link border radius
+%vertical-nav-item-interactive {
+  border-radius: 0.375rem;
+  block-size: 2.625rem;
+  margin-block-end: 0.25rem;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  margin-inline: 6px 20px;
+  transition: transform 0.25s ease-in-out 0s;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline-start: 14px;
+  visibility: visible;
+}
+
+%vertical-nav-section-title {
+  block-size: 1.125rem;
+  color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 500px;
+  block-size: 1.5rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  margin-inline-end: 0.5rem;
+  padding-block: 0;
+  padding-inline: 0.625rem;
+}