@dative-gpi/foundation-shared-components 0.0.118 → 0.1.120

package/composables/useColors.ts

@@ -6,7 +6,7 @@ import { ColorBase, ColorEnum, ColorVariations } from "@dative-gpi/foundation-sh
 
 export const useColors = () => {
     const theme = useTheme().current.value;
-    const baseMinSaturation = 55;
+    const baseMinSaturation = 0;
     const baseFixedBrightness = 90;
 
     const isGrayScale = (color: Color): boolean => {
@@ -24,7 +24,8 @@ export const useColors = () => {
 
     const getLight = (base: Color): Color => {
         if (isGrayScale(base)) {
-            return base.value(Math.min(base.value() + 10, 100));
+            return base
+                .value(Math.max(base.value(), 95));
         }
         return base.saturationv(10).value(100);
     };
@@ -34,27 +35,28 @@ export const useColors = () => {
     };
 
     const getBase = (base: Color): Color => {
-        if (isGrayScale(base)) {
-            return base.saturationv(1);
-        }
-        const saturation = base.saturationv() > baseMinSaturation ? base.saturationv() : baseMinSaturation;
-        return base.saturationv(saturation).value(baseFixedBrightness);
+        return base;
     };
 
     const getDark = (base: Color): Color => {
         return base.value(Math.max(base.value() - 15, 0));
     };
 
-    const getContrast = (color: Color, fallback: Color): Color => {
-        if (isGrayScale(color)) {
-            if (color.value() > 50) {
-                return color.value(Math.max(0, color.value() - 75));
-            }
-            else {
-                return color.value(Math.min(100, color.value() + 75));
-            }
+    const getContrast = (color: Color): Color => {
+        if(isGrayScale(color)){
+            const coeff = 4
+            return color
+                .value(color.value() < 70 ? 100 : Math.max(color.value() / coeff, 0));
+        }
+
+        if(isPastel(color)){
+            return color.darken(0.6);
+        }
+
+        if(color.darken(0.15).isLight()){
+            return color.darken(0.6);
         }
-        return fallback;
+        return color.lighten(color.value() / 50);
     }
 
     const getColors = (color: ColorBase): ColorVariations => {
@@ -67,41 +69,29 @@ export const useColors = () => {
         const soft = getSoft(base);
         const dark = getDark(base);
 
-        if (isPastel(seed)) {
+        if (color === ColorEnum.Background) {
             return {
-                light: getLight(seed).hex(),
-                lightContrast: getContrast(light, dark).hex(),
-                soft: getSoft(seed).hex(),
-                softContrast: getContrast(seed, dark).hex(),
-                base: seed.hex(),
-                baseContrast: getContrast(seed, dark).hex(),
-                dark: dark.hex(),
-                darkContrast: getContrast(dark, light).hex()
-            };
-        }
-
-        switch (color) {
-            case ColorEnum.Background: return {
-                light: base.hex(),
-                lightContrast: getContrast(base, base).hex(),
-                soft: base.hex(),
-                softContrast: getContrast(base, base).hex(),
-                base: base.hex(),
-                baseContrast: getContrast(base, base).hex(),
-                dark: dark.hex(),
-                darkContrast: getContrast(dark, base).hex()
-            };
-            default: return {
-                light: light.hex(),
-                lightContrast: getContrast(light, dark).hex(),
-                soft: soft.hex(),
-                softContrast: getContrast(soft, light).hex(),
+                get light(): string { throw new Error("Don't use it !") },
+                get lightContrast(): string { throw new Error("Don't use it !") },
+                get soft(): string { throw new Error("Don't use it !") },
+                get softContrast(): string { throw new Error("Don't use it !") },
                 base: base.hex(),
-                baseContrast: getContrast(base, light).hex(),
-                dark: dark.hex(),
-                darkContrast: getContrast(dark, light).hex()
+                get baseContrast(): string { throw new Error("Don't use it !") },
+                get dark(): string { throw new Error("Don't use it !") },
+                get darkContrast(): string { throw new Error("Don't use it !") }
             };
         }
+
+        return {
+            light: light.hex(),
+            lightContrast: getContrast(light).hex(),
+            soft: soft.hex(),
+            softContrast: getContrast(soft).hex(),
+            base: seed.hex(),
+            baseContrast: getContrast(seed).hex(),
+            dark: dark.hex(),
+            darkContrast: getContrast(dark).hex()
+        };
     };
 
     const getGradients = (colors: ColorBase | ColorBase[], rotation: number = 90): ColorVariations => {
@@ -119,7 +109,7 @@ export const useColors = () => {
     }
 
     const getBasePaletteColors = (): string[][] => {
-        const columnCount = 5
+        const columnCount = 8
         const colors: string[][] = [];
         for (let saturation = baseMinSaturation; saturation <= 100; saturation += (100 - baseMinSaturation) / (columnCount - 1)) {
             let colorsRow = [];
@@ -130,7 +120,7 @@ export const useColors = () => {
             colors.push(colorsRow)
         }
         let i = 0;
-        for (let brightness = 5; brightness <= 95; brightness += (90 / (columnCount - 1))) {
+        for (let brightness = 0; brightness <= 100; brightness += (100 / (columnCount - 1))) {
             const color = new Color({ h: 0, s: 1, v: 100 - brightness });
             colors[i].unshift(color.hex());
             i++;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "0.0.118",
+  "version": "0.1.120",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.118",
-    "@dative-gpi/foundation-shared-services": "0.0.118",
+    "@dative-gpi/foundation-shared-domain": "0.1.120",
+    "@dative-gpi/foundation-shared-services": "0.1.120",
     "@fontsource/montserrat": "^5.0.16",
     "@lexical/clipboard": "^0.12.5",
     "@lexical/history": "^0.12.5",
@@ -32,5 +32,5 @@
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2"
   },
-  "gitHead": "76a8d1b854de1eb1d0d914d4c15da28b5306e27f"
+  "gitHead": "ea777a3a70e01d2b96981b2cb2e3da7b3af5f59c"
 }

package/styles/components/fs_data_table.scss

@@ -1,128 +1,134 @@
 .fs-data-table {
-    table {
-        margin-top: calc(var(--fs-data-table-row-gap) * -1);
-        border-spacing: 0 var(--fs-data-table-row-gap) !important;
-        background-color: var(--fs-data-table-background-color) !important;
-    }
+  & > .v-table__wrapper {
+    padding: 0 1px 0 0;
 
-    .fs-data-table-custom-row > td {
-        border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
-        border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
-        background-color: var(--fs-data-table-row-background-color) !important;
-        color: var(--fs-data-table-row-color);
-        position: relative;
-    }
+    @extend .fs-hide-x-scrollbar;
+  }
 
-    .fs-data-table-custom-row > td:first-child{
-        border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
-        border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
-        border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
-    }
+  table {
+    margin-top: calc(var(--fs-data-table-row-gap) * -1);
+    border-spacing: 0 var(--fs-data-table-row-gap) !important;
+    background-color: var(--fs-data-table-background-color) !important;
+  }
 
-    .fs-data-table-custom-row > td:last-child{
-        border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
-        border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
-        border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
-    }
+  .fs-data-table-custom-row > td {
+    border-bottom: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+    border-top: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color) !important;
+    background-color: var(--fs-data-table-row-background-color) !important;
+    color: var(--fs-data-table-row-color);
+    position: relative;
+  }
 
-    th,
-    :not(.fs-data-table-custom-row) > td {
-        background-color: var(--fs-data-table-background-color) !important;
-        position: relative;
-    }
-    
-    th {
-        box-shadow: none !important;
-    
-        &:hover .fs-header-button {
-            opacity: 1;
-        }
-    }
-    
-    th:after {
-        content: "";
-        position: absolute;
-        bottom: 8px;
-        right: 0;
-        height: calc(100% - 16px);
-        border-right: 1px solid var(--fs-data-table-border-color);
-    }
-    
-    td {
-        border-bottom: none !important;
+  .fs-data-table-custom-row > td:first-child{
+    border-top-left-radius: var(--fs-data-table-row-border-radius) !important;
+    border-bottom-left-radius: var(--fs-data-table-row-border-radius) !important;
+    border-left: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+  }
+
+  .fs-data-table-custom-row > td:last-child{
+    border-top-right-radius: var(--fs-data-table-row-border-radius) !important;
+    border-bottom-right-radius: var(--fs-data-table-row-border-radius) !important;
+    border-right: var(--fs-data-table-row-border-size) solid var(--fs-data-table-row-border-color);
+  }
+
+  th,
+  :not(.fs-data-table-custom-row) > td {
+    background-color: var(--fs-data-table-background-color) !important;
+    position: relative;
+  }
+  
+  th {
+    box-shadow: none !important;
+
+    &:hover .fs-header-button {
+      opacity: 1;
     }
+  }
     
-    th:last-of-type:after,
-    td:last-of-type:after {
-        border-right: none;
-    }
+  th:after {
+    content: "";
+    position: absolute;
+    bottom: 8px;
+    right: 0;
+    height: calc(100% - 16px);
+    border-right: 1px solid var(--fs-data-table-border-color);
+  }
     
-    th:before,
-    td:not(.fs-data-table-group-header):before {
-        content: "";
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        width: 100%;
-        border-bottom: 1px solid var(--fs-data-table-border-color);
-    }
+  td {
+    border-bottom: none !important;
+  }
     
-    th:first-of-type:before,
-    td:first-of-type:before {
-        left: 8px;
-        width: calc(100% - 8px);
-    }
+  th:last-of-type:after,
+  td:last-of-type:after {
+    border-right: none;
+  }
     
-    th:last-of-type:before,
-    td:last-of-type:before {
-        right: 8px;
-        width: calc(100% - 8px);
-    }
+  th:before,
+  td:not(.fs-data-table-group-header):before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-bottom: 1px solid var(--fs-data-table-border-color);
+  }
+  
+  th:first-of-type:before,
+  td:first-of-type:before {
+    left: 8px;
+    width: calc(100% - 8px);
+  }
+  
+  th:last-of-type:before,
+  td:last-of-type:before {
+    right: 8px;
+    width: calc(100% - 8px);
+  }
 }
 
 .fs-data-table-grouped {
-    & th:first-of-type {
-        display: none;
-    }
+  & th:first-of-type {
+    display: none;
+  }
 
-    & td:first-of-type {
-        display: none;
-    }
+  & td:first-of-type {
+    display: none;
+  }
 
-    & .fs-data-table-group-header {
-        padding: 0 !important;
+  & .fs-data-table-group-header {
+    padding: 0 !important;
 
-        &:after {
-            content: none !important;
-        }
+    &:after {
+      content: none !important;
     }
+  }
 }
 
 .fs-data-table-iterator {
-    width: 100%;
+  width: 100%;
 }
 
 .fs-data-table-footer {
-    background-color: var(--fs-data-table-background-color);
+  background-color: var(--fs-data-table-background-color);
 }
 
 .fs-data-table-rows-per-page {
-    min-width: 100px;
-    width: 100px;
+  min-width: 100px;
+  width: 100px;
 }
 
 .fs-data-table-pagination {
-    @include web {
-        max-width: 280px;
-    }
+  @include web {
+    max-width: 280px;
+  }
 
-    @include mobile {
-        max-width: 274px;
-    }
+  @include mobile {
+    max-width: 274px;
+  }
 }
 
 .fs-data-table-intersection {
-    margin-top: -8px;
-    height: 10px;
-    width: 100%;
+  margin-top: -8px;
+  height: 10px;
+  width: 100%;
 }

package/styles/components/fs_dialog.scss

@@ -5,23 +5,24 @@
 .v-overlay__content:has(.fs-dialog-mobile) {
     justify-content: flex-end;
     align-self: flex-end;
-    margin-top: 20vh !important;
+    margin-top: 40px !important;
     width: 100vw !important;
     margin: 0px !important;
 }
 
 .v-overlay__content:has(.fs-dialog) {
+    max-height: calc(100vh - 40px) !important;
     width: var(--fs-dialog-width) !important;
-    max-height: 90vh !important;
     min-width: 35vw !important;
 }
 
 .fs-dialog {
+    max-height: calc(100vh - 40px) !important;
     width: var(--fs-dialog-width) !important;
-    max-height: 90vh !important;
     min-width: 35vw !important;
 }
 
 .fs-dialog-mobile {
+    max-height: calc(100vh - 40px) !important;
     width: 100vw !important;
 }

package/styles/components/fs_dialog_menu.scss

@@ -1,11 +1,11 @@
 .v-overlay__content:has(.fs-dialog-menu) {
     width: fit-content !important;
-    max-height: 60vh !important;
+    max-height: calc(100vh - 40px) !important;
     justify-content: center;
     align-items: center;
 }
 
 .fs-dialog-menu {
+    max-height: calc(100vh - 40px) !important;
     max-width: calc(100vw - 40px) !important;
-    max-height: 60vh !important;
 }

package/styles/components/fs_slider.scss

@@ -28,7 +28,15 @@
         color: var(--fs-slider-thumb-color);
 
         &__surface:before {
-            display: none;
+            display: none !important;
+        }
+
+        &__surface:after {
+            display: none !important;
+        }
+
+        &__ripple {
+            display: none !important;
         }
     }
 }

package/styles/components/fs_tabs.scss

@@ -13,17 +13,18 @@
 
 .fs-tab {
     padding: 0 16px;
-    border-bottom: 1px solid var(--fs-group-color) !important;
+    border-bottom: 1px solid var(--fs-tab-border-color) !important;
     color: var(--fs-group-color) !important;
+    justify-content: unset !important;
+    align-items: center !important;
     display: flex;
-    align-items: center;
 
     & .fs-tab-label {
         @extend .text-button;
     }
 
     &:hover {
-        border-bottom: 1px solid var(--fs-group-hover-color) !important;
+        border-bottom: 1px solid var(--fs-tab-hover-border-color) !important;
         color: var(--fs-group-hover-color) !important;
     }
 
@@ -37,7 +38,7 @@
 }
 
 .fs-tab-active {
-    background-color: var(--fs-group-hover-background-color) !important;
+    background-color: var(--fs-tab-active-background-color) !important;
     color: var(--fs-group-hover-color) !important;
     border-bottom: 0 !important;
 

package/styles/globals/overrides.scss

@@ -35,7 +35,7 @@
     }
 
     &:not(.v-checkbox):not(.v-slider):not(.fs-small-input) {
-        min-width: 200px;
+        min-width: 150px;
         width: 100%;
     }
 
@@ -129,7 +129,7 @@ $nthOverlay: 25;
     max-width: 100%;
     
     & > .v-slide-group__container > .v-slide-group__content {
-        margin: 0 2px 0.2px 0 !important;
+        margin: 0 2px 1px 0 !important;
     }
 }
 

package/styles/globals/scrollbars.scss

@@ -1,45 +1,55 @@
-@property --scrollbar-color {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: #00000000;
+@property --scrollbar-x-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000000;
 }
 
-@include clickscreen {    
-    .fs-hide-scrollbar {
-        transition: --scrollbar-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    
-        &::-webkit-scrollbar {
-            width: 8px;
-        }
-        &::-webkit-scrollbar-thumb {
-            background: var(--scrollbar-color);
-            border-radius: 4px;
-        }
-    
-        &:hover {
-            --scrollbar-color: #00000022;
-        }
+@property --scrollbar-y-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00000000;
+}
+
+@include clickscreen {
+  .fs-hide-x-scrollbar {
+    overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+      height: 8px;
     }
-    
-    .fs-hide-y-scrollbar {
-        overflow-y: scroll;
-    
-        @extend .fs-hide-scrollbar;
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-x-color);
+      border-radius: 4px;
     }
-    
-    .fs-hide-x-scrollbar {
-        overflow-x: scroll;
-    
-        @extend .fs-hide-scrollbar;
+
+    &:hover {
+      --scrollbar-x-color: #00000022;
     }
-}
+  }
 
-@include touchscreen {
-    .fs-hide-y-scrollbar {
-        overflow-y: scroll;
+  .fs-hide-y-scrollbar {
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 8px;
     }
-    
-    .fs-hide-x-scrollbar {
-        overflow-x: scroll;
+    &::-webkit-scrollbar-thumb {
+      background: var(--scrollbar-y-color);
+      border-radius: 4px;
     }
+
+    &:hover {
+      --scrollbar-y-color: #00000022;
+    }
+  }
+}
+
+@include touchscreen {
+  .fs-hide-x-scrollbar {
+    overflow-x: scroll;
+  }
+
+  .fs-hide-y-scrollbar {
+    overflow-y: scroll;
+  }
 }