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

package/components/FSBreadcrumbs.vue

@@ -55,7 +55,7 @@ export default defineComponent({
     const style: Ref<{ [key: string] : string }> = ref({
       "--fs-breadcrumbs-color": darks.dark,
       "--fs-breadcrumbs-active-color": darks.base,
-      "--fs-breadcrumbs-disabled-color": darks.light
+      "--fs-breadcrumbs-disabled-color": darks.soft
     });
 
     const classes = (item: FSBreadcrumbItem): string[] => {

package/components/FSButton.vue

@@ -251,7 +251,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["standard"].includes(props.variant) ? colors.value.dark : colors.value.light;
-        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.light;
+        default               : return ["standard"].includes(props.variant) ? darks.dark : darks.soft;
       }
     });
 

package/components/FSChip.vue

@@ -122,7 +122,7 @@ export default defineComponent({
         case "full": return {
           "--fs-chip-height"                 : sizeToVar(props.height),
           "--fs-chip-background-color"       : colors.value.base,
-          "--fs-chip-border-color"           : colors.value.baseContrast,
+          "--fs-chip-border-color"           : colors.value.base,
           "--fs-chip-color"                  : colors.value.baseContrast,
           "--fs-chip-hover-background-color" : colors.value.base,
           "--fs-chip-hover-border-color"     : colors.value.base,

package/components/FSClickable.vue

@@ -254,7 +254,7 @@ export default defineComponent({
                 "--fs-clickable-border-color"           : colors.value.lightContrast,
                 "--fs-clickable-color"                  : colors.value.lightContrast,
                 "--fs-clickable-hover-background-color" : colors.value.base,
-                "--fs-clickable-hover-border-color"     : colors.value.baseContrast,
+                "--fs-clickable-hover-border-color"     : colors.value.base,
                 "--fs-clickable-hover-color"            : colors.value.baseContrast,
                 "--fs-clickable-active-background-color": colors.value.dark,
                 "--fs-clickable-active-border-color"    : colors.value.darkContrast,
@@ -326,7 +326,7 @@ export default defineComponent({
         case ColorEnum.Success:
         case ColorEnum.Warning:
         case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
-        default               : return ["full"].includes(props.variant) ? darks.light : darks.dark;
+        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
       }
     });
 

package/components/FSDivider.vue

@@ -19,7 +19,7 @@
       :style="style"
     />
     <FSText
-      variant="light"
+      variant="soft"
       :font="$props.font"
     >
       <slot>

package/components/FSSlideGroup.vue

@@ -91,7 +91,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"     : sizeToVar(props.padding),
       "--fs-group-gap"         : sizeToVar(props.gap),
-      "--fs-group-color"       : darks.light,
+      "--fs-group-color"       : darks.soft,
       "--fs-group-hover-color" : darks.dark
     }));
 

package/components/FSTabs.vue

@@ -50,7 +50,7 @@ export default defineComponent({
     const darks = getColors(ColorEnum.Dark);
 
     const style = computed((): { [key: string] : string | null | undefined } => ({
-      "--fs-group-color"                 : darks.light,
+      "--fs-group-color"                 : darks.soft,
       "--fs-group-hover-color"           : darks.dark,
       "--fs-tab-border-color"            : lights.dark,
       "--fs-tab-hover-border-color"      : darks.dark,

package/components/FSText.vue

@@ -45,7 +45,7 @@ export default defineComponent({
       default: ColorEnum.Dark
     },
     variant: {
-      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast">,
+      type: String as PropType<"base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" | "soft" | "softContrast">,
       required: false,
       default: "base"
     }

package/components/FSWrapGroup.vue

@@ -54,7 +54,7 @@ export default defineComponent({
     const style = computed((): { [key: string] : string | null | undefined } => ({
       "--fs-group-padding"    : sizeToVar(props.padding),
       "--fs-group-gap"        : sizeToVar(props.gap),
-      "--fs-group-color"      : darks.light,
+      "--fs-group-color"      : darks.soft,
       "--fs-group-hover-color": darks.dark
     }));
 

package/components/tiles/FSDeviceOrganisationTileUI.vue

@@ -30,7 +30,7 @@
             </FSText>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ $props.code }}
             </FSText>

package/components/tiles/FSGroupTileUI.vue

@@ -29,7 +29,7 @@
             </FSText>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ $props.code }}
             </FSText>

package/components/tiles/FSSimpleIconTileUI.vue

@@ -26,7 +26,7 @@
           </FSText>
           <FSText
             font="text-overline"
-            variant="light"
+            variant="soft"
           >
             {{ $props.code }}
           </FSText>

package/components/tiles/FSUserOrganisationTileUI.vue

@@ -31,14 +31,14 @@
           >
             <FSIcon
               v-if="roleIcon"
-              variant="light"
+              variant="soft"
               :color="ColorEnum.Dark"
             >
               {{ roleIcon }}
             </FSIcon>
             <FSText
               font="text-overline"
-              variant="light"
+              variant="soft"
             >
               {{ roleLabel }}
             </FSText>

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.119",
+  "version": "0.1.120",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "0.0.119",
-    "@dative-gpi/foundation-shared-services": "0.0.119",
+    "@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": "f23ab1e0c8f72006dbf52bb826add56337f4da9b"
+  "gitHead": "ea777a3a70e01d2b96981b2cb2e3da7b3af5f59c"
 }