@it-enterprise/forcebpm-ui-kit 1.0.2-beta.12 → 1.0.2-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.12",
+  "version": "1.0.2-beta.13",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",
@@ -16,17 +16,13 @@
       "require": "./plugin.js"
     },
     "./locales": {
-      "import": "./locales/index.js",
-      "require": "./locales/index.js"
+      "import": "./src/locales/index.js",
+      "require": "./src/locales/index.js"
     },
-    "./locales/*": {
-      "import": "./locales/*",
-      "require": "./locales/*"
-    }
+    "./styles": "./src/scss/index.scss"
   },
   "files": [
     "src",
-    "locales",
     "index.js",
     "plugin.js",
     "README.md",

package/plugin.js

@@ -4,7 +4,7 @@
  */
 
 import * as components from './index.js'
-import { defaultMessages } from './locales/index.js'
+import { defaultMessages } from './src/locales/index.js'
 
 // Re-export for convenience
 export { defaultMessages }

package/src/scss/buttons.scss

@@ -0,0 +1,102 @@
+// Global button styles with theme support
+
+.v-btn {
+  --v-btn-size: 1em;
+  --v-btn-height: 40px;
+  letter-spacing: 0.03em;
+  font-weight: 600;
+  text-transform: none;
+
+  // Size variants
+  &.v-btn--size-x-small {
+    --v-btn-height: 24px;
+  }
+
+  &.v-btn--size-small {
+    --v-btn-height: 32px;
+  }
+
+  &.v-btn--size-large {
+    --v-btn-height: 48px;
+  }
+
+  &.v-btn--size-x-large {
+    --v-btn-height: 56px;
+  }
+
+  &.v-btn--variant-outlined {
+    border: 0.5px solid currentColor;
+  }
+
+  // Background color depends on the theme
+  &:not([class*='bg-']):not(.v-btn--variant-outlined):not(.v-btn--variant-text):not(.v-btn--variant-plain) {
+    .v-theme--light & {
+      background-color: rgb(var(--v-theme-title));
+      color: #ffffff;
+    }
+
+    .v-theme--dark & {
+      background-color: rgb(var(--v-theme-primary));
+      color: #ffffff;
+    }
+  }
+
+  &.v-btn--variant-outlined:not([class*='text-']) {
+    .v-theme--light & {
+      color: rgb(var(--v-theme-title));
+    }
+
+    .v-theme--dark & {
+      color: #ffffff;
+    }
+  }
+
+  &.v-btn--variant-text {
+    font-weight: 500;
+    .v-btn__overlay {
+      background-color: transparent;
+    }
+  }
+}
+
+// .fbpmp-add-tab-btn.v-btn.v-btn--icon {
+//   padding: 0 !important;
+//   min-width: 38px !important;
+//   width: 38px;
+//   height: 38px !important;
+//   border-radius: 0;
+//   border-bottom: 1px solid var(--v-line3-base) !important;
+//   &.v-btn--disabled {
+//     .f-icon {
+//       background-color: rgb(var(--v-theme-disabled) !important;
+//     }
+//   }
+//   .f-icon {
+//     height: 19px;
+//     width: 19px;
+//   }
+// }
+// .toolbar-icon-btn.v-btn {
+//   min-width: 30px !important;
+//   max-width: 30px !important;
+//   height: 30px !important;
+//   padding: 5px;
+//   padding-bottom: 0;
+//   .v-badge {
+//     width: 30px;
+//   }
+//   i {
+//     height: 15px;
+//     width: 15px;
+//   }
+// }
+// @media (max-width: 1350px) {
+//   .fbpmp-add-tab-btn {
+//     min-width: 32px !important;
+//     width: 32px;
+//     height: 32px !important;
+//     .v-btn__content {
+//       margin-right: 1px;
+//     }
+//   }
+// }

package/src/scss/card.scss

@@ -0,0 +1,5 @@
+.f-card.v-card {
+  &.v-card--hover:hover {
+    box-shadow: var(--f-box-shadow);
+  }
+}

package/src/scss/checkbox.scss

@@ -0,0 +1,25 @@
+.f-checkbox-sm {
+  .v-input__control {
+    .v-selection-control__input {
+      .v-icon {
+        font-size: 16px;
+        height: 16px;
+        width: 16px;
+        min-width: 16px;
+        opacity: 0.5 !important;
+      }
+      .v-icon:hover {
+        opacity: 1 !important;
+      }
+    }
+  }
+}
+.f-checkbox-sm:hover {
+  .v-input__control {
+    .v-selection-control__input {
+      .v-icon {
+        opacity: 1 !important;
+      }
+    }
+  }
+}

package/src/scss/expansion.scss

@@ -0,0 +1,45 @@
+// .f-expansion-panels {
+//   &.v-expansion-panels {
+//   }
+// }
+
+.f-expansion-panel {
+  &.v-expansion-panel {
+    background: transparent;
+    color: var(--v-theme-subTitle);
+    overflow-x: hidden;
+    &::after {
+      content: none;
+    }
+    &.v-expansion-panel--active,
+    &.v-expansion-panel--active + .v-expansion-panel {
+      margin-top: 0;
+    }
+    .v-expansion-panel__shadow {
+      display: none;
+    }
+    .v-expansion-panel-title {
+      min-height: auto;
+      font-size: 1em;
+      padding: 15px 12px 10px 4px;
+      color: var(--v-theme-title);
+      &:hover {
+        .v-expansion-panel-title__overlay {
+          opacity: 0;
+        }
+      }
+      .v-expansion-panel-title__icon {
+        margin-inline-start: 12px;
+        margin-bottom: 0;
+        margin-top: 0;
+        margin-inline-end: auto;
+      }
+    }
+    .v-expansion-panel-text {
+      .v-expansion-panel-text__wrapper {
+        padding: 10px 20px;
+        color: var(--v-theme-subTitle);
+      }
+    }
+  }
+}

package/src/scss/index.scss

@@ -0,0 +1,13 @@
+@use 'utilities';
+@use 'overlay';
+@use 'buttons';
+@use 'input';
+@use 'tabs';
+@use 'expansion';
+@use 'skeleton';
+@use 'card';
+@use 'checkbox';
+@use 'pagination';
+@use 'snackbar';
+// @use 'tables';
+// @use 'bryntum';

package/src/scss/input.scss

@@ -0,0 +1,257 @@
+// Override input styles
+.f-input {
+  border-radius: 5.8px;
+  background-color: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-text));
+
+  &:hover {
+    .v-field {
+      .v-label {
+        color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+  }
+
+  .v-field--center-affix .v-label.v-field-label {
+    top: 65%;
+  }
+
+  .v-field {
+    border-radius: 5.8px;
+    &.v-field--error {
+      .v-label {
+        color: rgb(var(--v-theme-error));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-error));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-error)) !important;
+      }
+    }
+    .v-label {
+      opacity: 1;
+      color: rgb(var(--v-theme-text));
+    }
+    .v-field__outline__start,
+    .v-field__outline__notch,
+    .v-field__outline__end {
+      border-color: rgb(var(--v-theme-text));
+    }
+    .v-field__outline__notch::after,
+    .v-field__outline__notch::before {
+      border-color: rgb(var(--v-theme-text)) !important;
+    }
+    .v-field__input {
+      padding-top: 16px;
+      padding-bottom: 10px;
+      padding-inline: 12px 12px;
+      min-height: auto;
+      font-size: 0.95em;
+      line-height: 1em;
+      color: rgb(var(--v-theme-subTitle));
+      &:is(:-webkit-autofill, :autofill) {
+        -webkit-text-fill-color: rgb(var(--v-theme-subTitle)) !important;
+        -webkit-box-shadow: 0 0 0 1000px rgb(var(--v-theme-background)) inset !important;
+        background-color: rgb(var(--v-theme-background)) !important;
+        border-radius: 5.8px !important;
+      }
+    }
+    input::placeholder {
+      font-size: 0.9em;
+      opacity: 0.9;
+      color: rgb(var(--v-theme-subTitle));
+    }
+    .v-field__loader {
+      top: calc(100% - 2.5px);
+      width: calc(100% - 2.5px * 2);
+      left: 2.5px;
+      .v-progress-linear__background,
+      .v-progress-linear__buffer,
+      .v-progress-linear__determinate,
+      .v-progress-linear__indeterminate {
+        background: rgb(var(--v-theme-primary));
+      }
+    }
+    .v-field__outline {
+      --v-field-border-width: 0.5px;
+      --v-field-border-opacity: 1;
+    }
+    &.v-field--focused:not(.v-field--error) {
+      .v-label {
+        color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+    .v-field__append-inner {
+      display: flex;
+      justify-content: center;
+      .f-icon {
+        margin-top: 10px;
+        opacity: 1;
+        background: rgb(var(--v-theme-text));
+      }
+    }
+    .v-field__clearable {
+      .f-icon {
+        min-height: 14px;
+        min-width: 14px;
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+
+  &.v-input--is-disabled {
+    background-color: rgb(var(--v-theme-fields));
+    fieldset {
+      border-color: rgb(var(--v-theme-fields));
+    }
+  }
+}
+
+.f-input.v-textarea {
+  .v-field {
+    .v-field__input {
+      padding-inline: 12px 8px;
+      font-size: 0.85em;
+      min-height: 45px;
+    }
+    &.v-field--appended {
+      padding-inline-end: 0px;
+    }
+    .v-field__clearable {
+      margin-inline: 10px;
+    }
+  }
+}
+
+// Autocomplete
+.f-input.v-autocomplete {
+  &.v-autocomplete--active-menu {
+    .v-autocomplete__menu-icon {
+      transform: rotate(180deg);
+    }
+  }
+  .v-autocomplete__selection {
+    .f-chip.v-chip {
+      --v-chip-height: 22px;
+      padding: 0;
+      border-radius: 16.8px;
+      font-size: 0.75em;
+      background: rgb(var(--v-theme-line));
+      .v-chip__close {
+        margin-inline-start: 5px;
+        margin-inline-end: 5px;
+        .f-icon {
+          opacity: 1;
+          width: 12px;
+          height: 12px;
+          min-width: 12px;
+          min-height: 12px;
+        }
+      }
+    }
+  }
+}
+
+// Checkbox
+.f-checkbox {
+  .v-input__control {
+    .v-selection-control {
+      --v-selection-control-size: 20px;
+      min-height: 1.2em;
+      .v-selection-control__wrapper {
+        margin-right: 10px;
+        .v-selection-control__input {
+          &::before {
+            content: none;
+          }
+          .f-icon {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+//Radio
+.f-radio {
+  --v-selection-control-size: 20px;
+  &.v-selection-control--inline:not(:last-child) {
+    margin-right: 8px;
+  }
+  .v-selection-control__wrapper {
+    .v-selection-control__input {
+      &::before {
+        content: none;
+      }
+      .f-icon {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+// Switch
+.f-switch.v-switch {
+  margin: 0;
+  padding: 0;
+  --v-input-control-height: 24px;
+  --v-input-padding-top: 0px;
+
+  &.v-locale--is-ltr.v-switch .v-selection-control__input,
+  &.v-locale--is-ltr .v-switch .v-selection-control__input {
+    transform: translateX(-8px);
+  }
+  &.v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input,
+  &.v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
+    transform: translateX(8px);
+  }
+  .v-input__control {
+    .v-selection-control {
+      --v-selection-control-size: 24px;
+      .v-selection-control__wrapper {
+        margin-right: 8px;
+        .v-switch__track {
+          height: 24px;
+          min-width: 40px;
+          background: rgb(var(--v-theme-disabled));
+          opacity: 1;
+        }
+        .v-selection-control__input {
+          &::before {
+            content: none;
+          }
+          .v-switch__thumb {
+            background: #fff;
+            transform: scale(1);
+            height: 20px;
+            width: 20px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/overlay.scss

@@ -0,0 +1,63 @@
+.v-menu {
+  .v-overlay__content {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-subTitle));
+    border-radius: 5.8px;
+    box-shadow: var(--f-box-shadow);
+    scrollbar-width: thin;
+    .v-card,
+    .v-sheet,
+    .v-list {
+      background: rgb(var(--v-theme-background));
+      box-shadow: none;
+      scrollbar-width: thin;
+    }
+    .v-list {
+      padding: 0;
+      .v-list-item {
+        min-height: 40px;
+        .v-list-item__content {
+          .v-list-item-title {
+            font-size: 0.9em;
+            line-height: 1.1em;
+            font-weight: 500;
+            letter-spacing: normal;
+          }
+        }
+      }
+    }
+  }
+}
+
+.v-tooltip {
+  .v-overlay__content {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-subTitle));
+    border-radius: 5.8px;
+    box-shadow: var(--f-box-shadow);
+    padding: 8px;
+    font-size: 0.9em;
+    line-height: 1em;
+    font-weight: 600;
+  }
+}
+
+.v-overlay__content.v-autocomplete__content {
+  .v-list {
+    .v-list-item {
+      min-height: 28px;
+      .f-checkbox {
+        .f-icon {
+          height: 16px;
+          width: 16px;
+          min-width: 16px;
+          min-height: 16px;
+        }
+      }
+      .v-list-item__content {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/scss/pagination.scss

@@ -0,0 +1,84 @@
+.app-pagination {
+  .v-theme--light.v-pagination .v-pagination__item {
+    color: rgb(var(--v-theme-secondary));
+    background-color: rgb(var(--v-theme-fields));
+    margin: 0 2px;
+  }
+  .v-theme--light.v-pagination .v-pagination__item--is-active {
+    color: rgb(var(--v-theme-fields));
+    background-color: rgb(var(--v-theme-secondary)) !important;
+    border-color: rgb(var(--v-theme-secondary)) !important;
+  }
+  .v-theme--dark.v-pagination .v-pagination__item {
+    color: rgb(var(--v-theme-secondary));
+    background-color: rgb(var(--v-theme-fields));
+    margin: 0 2px;
+  }
+  .v-theme--dark.v-pagination .v-pagination__item--is-active {
+    color: rgb(var(--v-theme-fields));
+    background-color: rgb(var(--v-theme-secondary)) !important;
+    border-color: rgb(var(--v-theme-secondary)) !important;
+  }
+  .v-pagination {
+    display: flex;
+    justify-content: center;
+    min-width: 320px;
+    max-width: 320px;
+    height: 40px;
+    .v-pagination__list {
+      align-items: center;
+      li {
+        height: 20px;
+        width: 20px;
+        border: 1px solid transparent;
+        border-radius: 3px;
+        button {
+          height: 20px;
+          min-height: 20px !important;
+          width: auto;
+          padding: 0 2px 2px 0 !important;
+          min-width: 20px !important;
+          font-size: 0.65em;
+          box-shadow: none;
+        }
+        button[ellipsis='true'] {
+          font-size: 1em !important;
+          color: rgb(var(--v-theme-secondary));
+        }
+        // .v-pagination__more {
+        //   color: rgb(var(--v-theme-secondary));
+        // }
+        &.v-pagination__prev {
+          .v-btn {
+            border: 1px solid rgb(var(--v-theme-secondary));
+            margin: 0;
+          }
+          //   border: 1px solid rgb(var(--v-theme-secondary));
+          background-color: rgb(var(--v-theme-fields));
+          margin: 0 10px;
+          i {
+            background: rgb(var(--v-theme-secondary)) !important;
+            height: 8px !important;
+            min-height: 8px !important;
+            margin: 2px 0 0 2px;
+          }
+        }
+        &.v-pagination__next {
+          .v-btn {
+            border: 1px solid rgb(var(--v-theme-secondary));
+            margin: 0;
+          }
+          //   border: 1px solid rgb(var(--v-theme-secondary));
+          background-color: rgb(var(--v-theme-fields));
+          margin: 0 10px;
+          i {
+            background: rgb(var(--v-theme-secondary)) !important;
+            height: 8px !important;
+            min-height: 8px !important;
+            margin: 2px 0 0 2px;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/skeleton.scss

@@ -0,0 +1,87 @@
+.v-skeleton-loader {
+  background: transparent;
+  .v-skeleton-loader__text {
+    margin: 4px 8px;
+  }
+
+  .v-skeleton-loader__image {
+    height: inherit;
+  }
+
+  .v-skeleton-loader__avatar {
+    min-height: inherit;
+    min-width: inherit;
+    max-width: inherit;
+    max-height: inherit;
+    height: inherit;
+    width: inherit;
+    margin: 0;
+  }
+}
+
+// .skeleton-avatar {
+// }
+
+// .v-skeleton-loader.theme--dark {
+//   div {
+//     background: var(--v-background2-base) !important;
+//     &::after {
+//       background: rgb(var(--v-theme-disabled)) !important;
+//     }
+//   }
+// }
+// .task-card-loader.v-skeleton-loader {
+//   border: 1px solid rgb(var(--v-theme-fields));
+// }
+// .table-loader.v-skeleton-loader {
+//   div {
+//     background: rgb(var(--v-theme-fields)) !important;
+//     &::after {
+//       background: var(--v-disabled3-base) !important;
+//     }
+//   }
+//   .v-skeleton-loader__table-thead {
+//     padding: 10px 25px;
+//     background: rgb(var(--v-theme-fields));
+//   }
+//   .v-skeleton-loader__table-tbody {
+//     padding: 0px;
+//     .v-skeleton-loader__table-row-divider:nth-child(odd) {
+//       background: rgb(var(--v-theme-line));
+//     }
+//     .v-skeleton-loader__table-row-divider:nth-child(even) {
+//       background: rgb(var(--v-theme-chart));
+//     }
+//     .v-skeleton-loader__table-row-divider {
+//       padding: 0 10px !important;
+//       height: 40px;
+//       align-items: center;
+//       .v-skeleton-loader__table-row {
+//         height: 40px;
+//         .v-skeleton-loader__table-cell {
+//           height: 40px;
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .v-skeleton-loader__actions {
+//   .v-skeleton-loader__button {
+//     width: 255px;
+//     border-radius: 5.8px;
+//   }
+// }
+
+// .toolbar-skeleton.v-skeleton-loader {
+//   .v-skeleton-loader__table-heading {
+//     .v-skeleton-loader__heading {
+//       height: 15px;
+//     }
+//     padding: 22px 10px 2px 20px;
+//     background: transparent;
+//   }
+//   .v-skeleton-loader__text {
+//     margin-bottom: -1px;
+//   }
+// }

package/src/scss/snackbar.scss

@@ -0,0 +1,36 @@
+.fbpm-action-snackbar {
+  bottom: 8%;
+  .v-snackbar__wrapper {
+    background-color: rgb(var(--v-theme-title-dark));
+    min-height: 0;
+    min-width: min-content;
+  }
+  .v-snackbar__content {
+    padding: 0;
+    .v-skeleton-loader:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      .v-skeleton-loader__button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    .v-skeleton-loader:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      .v-skeleton-loader__button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    .v-skeleton-loader:not(.v-skeleton-loader:first-child, .v-skeleton-loader:last-child) {
+      border-radius: 0;
+      .v-skeleton-loader__button {
+        border-radius: 0;
+      }
+    }
+  }
+  .v-snackbar__action {
+    display: none;
+  }
+}

package/src/scss/tables.scss

@@ -0,0 +1,147 @@
+// .fbpm-table__header - add to "thead" if need custom header styles
+// .fbpm-table__row-hover - add to "tr" if need primary hover
+// .fbpm-table__row-selected - add to "tr" if need primary background
+// .fbpm-table__check-box - add to "td" if next element "v-checkbox"
+
+.fbpm-table.v-data-table {
+  width: 100%;
+  .v-data-table__wrapper {
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    // padding-right: 10px;
+    &::-webkit-scrollbar {
+      width: 2.5px;
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 6px rgb(var(--v-theme-line));
+    }
+    &::-webkit-scrollbar-thumb {
+      border-top: 1px solid rgba(0, 0, 0, 0);
+      border-bottom: 1px solid rgba(0, 0, 0, 0);
+      background-clip: padding-box;
+      border-radius: 20px;
+      height: 50px;
+      background-color: rgb(var(--v-theme-primary));
+    }
+  }
+  &.darken table {
+    tbody {
+      tr {
+        &:nth-child(odd) {
+          background: var(--v-background3-base);
+          &:hover {
+            background: var(--v-background4-base) !important;
+          }
+        }
+        &:nth-child(even) {
+          background: var(--v-background4-base);
+          &:hover {
+            background: var(--v-background3-base) !important;
+          }
+        }
+      }
+    }
+  }
+  table {
+    width: 100%;
+    .fbpm-table__header,
+    .v-data-table-header {
+      tr {
+        th {
+          color: rgb(var(--v-theme-text)) !important;
+          font-weight: normal;
+          line-height: 1;
+          font-size: 0.8em;
+          padding: 4px 4px 10px 4px;
+          height: 24px;
+          box-shadow: none;
+          background: var(--v-background2-base);
+          .v-data-table-header__icon {
+            -webkit-mask: url('~@/assets/icons/arrow-icon.svg') no-repeat;
+            mask: url('~@/assets/icons/arrow-icon.svg') no-repeat;
+            mask-size: contain;
+            width: 15px;
+            height: 15px;
+            transform: rotate(-90deg);
+            &::after,
+            &::before {
+              content: none;
+            }
+          }
+          &.asc .v-data-table-header__icon {
+            transform: rotate(-90deg);
+            background-color: rgb(var(--v-theme-title)) !important;
+          }
+          &.desc .v-data-table-header__icon {
+            transform: rotate(-270deg);
+            background-color: rgb(var(--v-theme-title)) !important;
+          }
+          &.active {
+            font-weight: bold;
+            color: rgb(var(--v-theme-subTitle)) !important;
+          }
+        }
+      }
+    }
+    tbody {
+      width: 100%;
+      tr {
+        position: relative;
+        z-index: 1;
+        td {
+          padding: 17px 0 9px 4px;
+          font-size: 0.9em;
+          line-height: 1em;
+          border: none !important;
+          height: 40px;
+          min-width: 100px;
+          &.fbpm-table__check-box {
+            width: 40px;
+            min-width: 40px;
+            padding: 12px;
+            border-bottom: none !important;
+            .v-input--selection-controls__input {
+              margin: 0;
+            }
+          }
+          &.fbpm-table__avatar {
+            padding: 6px 0 0 0;
+            width: 20px;
+            min-width: 20px;
+            line-height: 1;
+          }
+        }
+
+        &:nth-child(odd) {
+          background: var(--v-background5-base);
+          &:hover {
+            background: var(--v-background6-base) !important;
+          }
+        }
+        &:nth-child(even) {
+          background: var(--v-background6-base);
+          &:hover {
+            background: var(--v-background5-base) !important;
+          }
+        }
+        &.fbpm-table__row-hover:hover,
+        &.fbpm-table__row-selected {
+          background: rgb(var(--v-theme-background)) !important;
+          cursor: pointer;
+          &::after {
+            content: '';
+            height: 100%;
+            width: 100%;
+            z-index: -1;
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: rgb(var(--v-theme-primary));
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/tabs.scss

@@ -0,0 +1,45 @@
+.f-tabs {
+  &.v-tabs {
+    height: auto;
+    .v-slide-group__next,
+    .v-slide-group__prev {
+      flex: 0 1 var(--v-tabs-height);
+      min-width: var(--v-tabs-height);
+    }
+    .v-slide-group__container {
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        height: 1px;
+        width: 100%;
+        background: rgb(var(--v-theme-line));
+        transform: scaleY(0.7);
+        transform-origin: bottom;
+      }
+      .v-slide-group__content {
+        .v-btn {
+          display: flex;
+          align-items: flex-end;
+          padding-bottom: 4px;
+          border-radius: 0 !important;
+          .v-btn__overlay {
+            background-color: currentColor;
+          }
+          .v-btn__content {
+            .v-tab__slider {
+              height: 1.5px;
+              z-index: 1;
+            }
+          }
+        }
+        .v-tab--selected {
+          .v-btn__content {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities.scss

@@ -0,0 +1,134 @@
+// Font size utilities
+.fs-08 {
+  font-size: 0.8em;
+}
+.fs-09 {
+  font-size: 0.9em;
+}
+.fs-1 {
+  font-size: 1em;
+}
+.fs-11 {
+  font-size: 1.1em;
+}
+.fs-12 {
+  font-size: 1.2em;
+}
+.fs-13 {
+  font-size: 1.3em;
+}
+.fs-14 {
+  font-size: 1.4em;
+}
+.fs-15 {
+  font-size: 1.5em;
+}
+
+// Line height utilities
+.lh-09 {
+  line-height: 0.9em;
+}
+.lh-1 {
+  line-height: 1em;
+}
+.lh-11 {
+  line-height: 1.1em;
+}
+.lh-12 {
+  line-height: 1.2em;
+}
+.lh-13 {
+  line-height: 1.3em;
+}
+.lh-14 {
+  line-height: 1.4em;
+}
+.lh-15 {
+  line-height: 1.5em;
+}
+.lh-16 {
+  line-height: 1.6em;
+}
+
+// Width utilities
+.fill-width {
+  width: 100%;
+}
+
+// Override rounded values
+.rounded-xs {
+  border-radius: 4.8px !important;
+}
+
+.rounded-sm {
+  border-radius: 5.8px !important;
+}
+
+.rounded,
+.rounded-lg {
+  border-radius: 10.8px !important;
+}
+
+// Override border values
+.border {
+  border-width: 0.5px !important;
+  border-style: solid !important;
+  border-color: rgb(var(--v-border-color)) !important;
+}
+
+// Custom scrollbar styles
+.f-scrollbar-y {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: inherit;
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(var(--v-theme-primary), 0.6);
+    border-radius: 10.8px;
+
+    &:hover {
+      background: rgba(var(--v-theme-primary), 1);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(var(--v-theme-disabled), 0.4);
+    border-radius: 10.8px;
+  }
+}
+
+// Box shadow utility
+:root {
+  --f-box-shadow: 0px 4px 20px 0px rgba(var(--v-theme-disabled));
+}
+.f-box-shadow {
+  box-shadow: 0px 4px 20px 0px var(--f-box-shadow);
+}
+.v-theme--dark {
+  --f-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.6);
+  .f-box-shadow {
+    box-shadow: 0px 4px 20px 0px var(--f-box-shadow);
+  }
+}
+
+.bg-overlay {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    border-radius: inherit;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 0.2;
+    visibility: visible;
+    background: currentColor;
+  }
+}