@qualityunit/liveagent-help 0.0.1 → 0.0.2

package/src/lib/Themes/Dark.js

@@ -1,189 +0,0 @@
-import palette from './palette.json';
-
-const Dark = {
-    borderDivider: {
-        primary: palette.colors.grey["700"],
-        secondary: palette.colors.blue["400"],
-        tertiary: palette.colors.grey["700"],
-    },
-    buttonsSwitchesTabs: {
-        borderless: palette.colors.opacity["clear"],
-        borderlessHoverActive: palette.colors.opacity.grey["20"],
-        darkGrey: palette.colors.grey["400"],
-        darkGreyHoverActive: palette.colors.grey["500"],
-        callChat: {
-            borderless: palette.colors.opacity.white["20"],
-            borderlessHoverActive: palette.colors.opacity.white["40"],
-            red: palette.colors.red["400"],
-            redHover: palette.colors.red["500"],
-        },
-        primaryButtons: {
-            active: palette.colors.blue["800"],
-            blue: palette.colors.blue["400"],
-            blueDisabled: palette.colors.opacity.blue["100"],
-            blueHoverClick: palette.colors.blue["300"],
-            borderless: palette.colors.opacity["clear"],
-            grey: palette.colors.grey["990"],
-            greyHoverClick: palette.colors.opacity.grey["20"],
-        },
-        textsIcons: {
-            buttonTextIconsBlack: palette.colors.grey["050"],
-            buttonTextIconsBlue: palette.colors.blue["400"],
-            buttonTextIconsHover: palette.colors.blue["300"],
-            buttonTextIconsPrimary: palette.colors.grey["050"],
-            buttonTextIconsPrimaryDisabled: palette.colors.grey["400"],
-            buttonTextIconsSecondary: palette.colors.grey["400"],
-            buttonTextIconsSecondaryDisabled: palette.colors.grey["700"],
-        },
-    },
-    events: {
-        blue: {
-            opacity: palette.colors.opacity.blue["300"],
-            primary: palette.colors.blue["200"],
-            secondary: palette.colors.blue["100"],
-            stroke: palette.colors.blue["500"],
-            surfacePrimary: palette.colors.blue["800"],
-            surfaceSecondary: palette.colors.blue["700"],
-            text: palette.colors.grey["000"],
-        },
-        callChat: {
-            opacity: palette.colors.opacity.green["300"],
-            primary: palette.colors.green["400"],
-            secondary: palette.colors.green["500"],
-            stroke: palette.colors.green["500"],
-            surfacePrimary: palette.colors.green["800"],
-            surfaceSecondary: palette.colors.green["700"],
-        },
-        coral: {
-            opacity: palette.colors.opacity.coral["300"],
-            primary: palette.colors.coral["400"],
-            secondary: palette.colors.coral["300"],
-            stroke: palette.colors.coral["600"],
-            surfacePrimary: palette.colors.coral["800"],
-            surfaceSecondary: palette.colors.coral["700"],
-            text: palette.colors.grey["000"],
-        },
-        green: {
-            opacity: palette.colors.opacity.green["300"],
-            primary: palette.colors.green["200"],
-            secondary: palette.colors.green["100"],
-            stroke: palette.colors.green["500"],
-            surfacePrimary: palette.colors.green["800"],
-            surfaceSecondary: palette.colors.green["700"],
-            text: palette.colors.grey["000"],
-        },
-        grey: {
-            opacity: palette.colors.opacity.black["15"],
-            primary: palette.colors.grey["400"],
-            secondary: palette.colors.grey["150"],
-            stroke: palette.colors.grey["600"],
-            surfacePrimary: palette.colors.grey["900"],
-            surfaceSecondary: palette.colors.grey["850"],
-            text: palette.colors.grey["000"],
-        },
-        orange: {
-            opacity: palette.colors.opacity.orange["300"],
-            primary: palette.colors.orange["500"],
-            secondary: palette.colors.orange["400"],
-            stroke: palette.colors.orange["600"],
-            surfacePrimary: palette.colors.orange["900"],
-            surfaceSecondary: palette.colors.orange["800"],
-            text: palette.colors.grey["000"],
-        },
-        pink: {
-            opacity: palette.colors.opacity.pink["300"],
-            primary: palette.colors.pink["400"],
-            secondary: palette.colors.pink["300"],
-            stroke: palette.colors.pink["600"],
-            surfacePrimary: palette.colors.pink["900"],
-            surfaceSecondary: palette.colors.pink["800"],
-            text: palette.colors.grey["000"],
-        },
-        purple: {
-            opacity: palette.colors.opacity.purple["300"],
-            primary: palette.colors.purple["400"],
-            secondary: palette.colors.purple["300"],
-            stroke: palette.colors.purple["600"],
-            surfacePrimary: palette.colors.purple["900"],
-            surfaceSecondary: palette.colors.purple["800"],
-            text: palette.colors.grey["000"],
-        },
-        red: {
-            opacity: palette.colors.opacity.red["300"],
-            primary: palette.colors.red["400"],
-            secondary: palette.colors.red["300"],
-            stroke: palette.colors.red["600"],
-            surfacePrimary: palette.colors.red["800"],
-            surfaceSecondary: palette.colors.red["700"],
-            text: palette.colors.grey["000"],
-        },
-        whiteOpacity: {
-            "20": palette.colors.opacity.white["20"],
-            "40": palette.colors.opacity.white["40"],
-            "60": palette.colors.opacity.white["60"],
-        },
-        yellow: {
-            opacity: palette.colors.opacity.yellow["300"],
-            primary: palette.colors.yellow["300"],
-            secondary: palette.colors.yellow["200"],
-            stroke: palette.colors.yellow["600"],
-            surfacePrimary: palette.colors.yellow["900"],
-            surfaceSecondary: palette.colors.yellow["800"],
-            text: palette.colors.grey["000"],
-        },
-    },
-    notifications: {
-        greenPrimary: palette.colors.green["400"],
-        greenSecondary: palette.colors.opacity.green["400"],
-        redPrimary: palette.colors.red["400"],
-        redSecondary: palette.colors.opacity.red["400"],
-        surfacePrimary: palette.colors.opacity.white["85"],
-        surfaceSecondary: palette.colors.opacity.white["50"],
-        textIcons: palette.colors.grey["950"],
-    },
-    surface: {
-        behindPopups: palette.colors.opacity.black["70"],
-        hover: palette.colors.opacity.grey["20"],
-        primary: palette.colors.grey["990"],
-        replySection: palette.colors.opacity.darkGrey["66"],
-        secondary: palette.colors.grey["950"],
-        tertiary: palette.colors.grey["990"],
-    },
-    systemTags: {
-        blue: palette.colors.blue["400"],
-        coral: palette.colors.coral["400"],
-        green: palette.colors.green["500"],
-        greyAnswered: palette.colors.grey["600"],
-        greyEmpty: palette.colors.grey["700"],
-        greyThat150: palette.colors.grey["850"],
-        greyToDo: palette.colors.grey["550"],
-        orangeNew: palette.colors.orange["500"],
-        pink: palette.colors.pink["400"],
-        purplePostponed: palette.colors.purple["400"],
-        redOverdue: palette.colors.red["400"],
-        yellowOpen: palette.colors.yellow["500"],
-    },
-    textsIcons: {
-        blue: palette.colors.blue["400"],
-        blueHover: palette.colors.blue["300"],
-        orange: palette.colors.orange["500"],
-        orangeHover: palette.colors.orange["400"],
-        primary: palette.colors.grey["050"],
-        primaryHover: palette.colors.blue["300"],
-        secondary: palette.colors.grey["400"],
-        secondaryHover: palette.colors.blue["300"],
-        white: palette.colors.grey["050"],
-        whiteHover: palette.colors.blue["300"],
-    },
-    toSolve: {
-        icon: palette.colors.grey["000"],
-        iconHover: palette.colors.grey["000"],
-        orange: palette.colors.orange["500"],
-        orangeHover: palette.colors.orange["400"],
-        stroke: palette.colors.orange["400"],
-        surfaceWhite: palette.colors.opacity.white["20"],
-        text: palette.colors.grey["000"],
-    },
-};
-
-export default Dark;

package/src/lib/Themes/Light.js

@@ -1,189 +0,0 @@
-import palette from './palette.json'
-
-const Light = {
-    borderDivider: {
-        primary: palette.colors.grey["200"],
-        secondary: palette.colors.blue["500"],
-        tertiary: palette.colors.opacity.clear
-    },
-    buttonsSwitchesTabs: {
-        borderless: palette.colors.opacity.clear,
-        borderlessHoverActive: palette.colors.opacity.grey["15"],
-        darkGrey: palette.colors.grey["400"],
-        darkGreyHoverActive: palette.colors.grey["500"],
-        callChat: {
-            borderless: palette.colors.opacity.white["20"],
-            borderlessHoverActive: palette.colors.opacity.white["40"],
-            red: palette.colors.red["400"],
-            redHover: palette.colors.red["500"]
-        },
-        primaryButtons: {
-            active: palette.colors.blue["050"],
-            blue: palette.colors.blue["500"],
-            blueDisabled: palette.colors.opacity.blue["300"],
-            blueHoverClick: palette.colors.blue["600"],
-            borderless: palette.colors.opacity.clear,
-            grey: palette.colors.grey["050"],
-            greyHoverClick: palette.colors.opacity.grey["15"]
-        },
-        textsIcons: {
-            buttonTextIconsBlack: palette.colors.grey["950"],
-            buttonTextIconsBlue: palette.colors.blue["500"],
-            buttonTextIconsHover: palette.colors.blue["600"],
-            buttonTextIconsPrimary: palette.colors.grey["000"],
-            buttonTextIconsPrimaryDisabled: palette.colors.grey["000"],
-            buttonTextIconsSecondary: palette.colors.grey["550"],
-            buttonTextIconsSecondaryDisabled: palette.colors.grey["200"]
-        },
-    },
-    events: {
-        blue: {
-            opacity: palette.colors.opacity.blue["300"],
-            primary: palette.colors.blue["500"],
-            secondary: palette.colors.blue["600"],
-            stroke: palette.colors.blue["300"],
-            surfacePrimary: palette.colors.blue["050"],
-            surfaceSecondary: palette.colors.blue["100"],
-            text: palette.colors.blue["500"]
-        },
-        callChat: {
-            opacity: palette.colors.opacity.green["300"],
-            primary: palette.colors.green["400"],
-            secondary: palette.colors.green["500"],
-            stroke: palette.colors.green["300"],
-            surfacePrimary: palette.colors.green["050"],
-            surfaceSecondary: palette.colors.green["100"]
-        },
-        coral: {
-            opacity: palette.colors.opacity.coral["300"],
-            primary: palette.colors.coral["500"],
-            secondary: palette.colors.coral["600"],
-            stroke: palette.colors.coral["300"],
-            surfacePrimary: palette.colors.pink["050"],
-            surfaceSecondary: palette.colors.coral["100"],
-            text: palette.colors.coral["500"]
-        },
-        green: {
-            opacity: palette.colors.opacity.green["300"],
-            primary: palette.colors.green["500"],
-            secondary: palette.colors.green["600"],
-            stroke: palette.colors.green["300"],
-            surfacePrimary: palette.colors.green["050"],
-            surfaceSecondary: palette.colors.green["100"],
-            text: palette.colors.green["500"]
-        },
-        grey: {
-            opacity: palette.colors.opacity.black["20"],
-            primary: palette.colors.grey["550"],
-            secondary: palette.colors.grey["950"],
-            stroke: palette.colors.grey["300"],
-            surfacePrimary: palette.colors.grey["050"],
-            surfaceSecondary: palette.colors.grey["125"],
-            text: palette.colors.grey["550"]
-        },
-        orange: {
-            opacity: palette.colors.opacity.orange["300"],
-            primary: palette.colors.orange["500"],
-            secondary: palette.colors.orange["600"],
-            stroke: palette.colors.orange["300"],
-            surfacePrimary: palette.colors.orange["050"],
-            surfaceSecondary: palette.colors.orange["100"],
-            text: palette.colors.orange["500"]
-        },
-        pink: {
-            opacity: palette.colors.opacity.pink["300"],
-            primary: palette.colors.pink["500"],
-            secondary: palette.colors.pink["600"],
-            stroke: palette.colors.pink["300"],
-            surfacePrimary: palette.colors.pink["050"],
-            surfaceSecondary: palette.colors.pink["100"],
-            text: palette.colors.pink["500"]
-        },
-        purple: {
-            opacity: palette.colors.opacity.purple["300"],
-            primary: palette.colors.purple["500"],
-            secondary: palette.colors.purple["600"],
-            stroke: palette.colors.purple["300"],
-            surfacePrimary: palette.colors.purple["050"],
-            surfaceSecondary: palette.colors.purple["100"],
-            text: palette.colors.purple["500"]
-        },
-        red: {
-            opacity: palette.colors.opacity.red["300"],
-            primary: palette.colors.red["500"],
-            secondary: palette.colors.red["600"],
-            stroke: palette.colors.red["300"],
-            surfacePrimary: palette.colors.red["050"],
-            surfaceSecondary: palette.colors.red["100"],
-            text: palette.colors.red["500"]
-        },
-        whiteOpacity: {
-            "20": palette.colors.opacity.white["20"],
-            "40": palette.colors.opacity.white["40"],
-            "60": palette.colors.opacity.white["60"]
-        },
-        yellow: {
-            opacity: palette.colors.opacity.yellow["300"],
-            primary: palette.colors.yellow["500"],
-            secondary: palette.colors.yellow["600"],
-            stroke: palette.colors.yellow["300"],
-            surfacePrimary: palette.colors.yellow["050"],
-            surfaceSecondary: palette.colors.yellow["100"],
-            text: palette.colors.yellow["500"]
-        },
-    },
-    notifications: {
-        greenPrimary: palette.colors.green["400"],
-        greenSecondary: palette.colors.opacity.green["400"],
-        redPrimary: palette.colors.red["400"],
-        redSecondary: palette.colors.opacity.red["400"],
-        surfacePrimary: palette.colors.opacity.black["80"],
-        surfaceSecondary: palette.colors.opacity.black["50"],
-        textIcons: palette.colors.grey["000"]
-    },
-    surface: {
-        behindPopups: palette.colors.opacity.black["50"],
-        hover: palette.colors.opacity.grey["15"],
-        primary: palette.colors.grey["050"],
-        replySection: palette.colors.opacity.lightGrey["66"],
-        secondary: palette.colors.grey["000"],
-        tertiary: palette.colors.grey["000"]
-    },
-    systemTags: {
-        blue: palette.colors.blue["500"],
-        coral: palette.colors.coral["500"],
-        green: palette.colors.green["500"],
-        greyAnswered: palette.colors.grey["300"],
-        greyEmpty: palette.colors.grey["200"],
-        greyThat150: palette.colors.grey["150"],
-        greyToDo: palette.colors.grey["550"],
-        orangeNew: palette.colors.orange["500"],
-        pink: palette.colors.pink["500"],
-        purplePostponed: palette.colors.purple["500"],
-        redOverdue: palette.colors.red["500"],
-        yellowOpen: palette.colors.yellow["500"]
-    },
-    textsIcons: {
-        blue: palette.colors.blue["500"],
-        blueHover: palette.colors.blue["600"],
-        orange: palette.colors.orange["500"],
-        orangeHover: palette.colors.orange["600"],
-        primary: palette.colors.grey["950"],
-        primaryHover: palette.colors.blue["600"],
-        secondary: palette.colors.grey["550"],
-        secondaryHover: palette.colors.blue["600"],
-        white: palette.colors.grey["000"],
-        whiteHover: palette.colors.blue["600"]
-    },
-    toSolve: {
-        icon: palette.colors.orange["500"],
-        iconHover: palette.colors.orange["600"],
-        orange: palette.colors.orange["500"],
-        orangeHover: palette.colors.orange["600"],
-        stroke: palette.colors.orange["600"],
-        surfaceWhite: palette.colors.grey["000"],
-        text: palette.colors.grey["000"]
-    }
-};
-
-export default Light;

package/src/lib/Themes/palette.json

@@ -1,175 +0,0 @@
-{
-    "colors": {
-        "blue": {
-            "050": "#dcf3fe",
-            "100": "#b5e2fe",
-            "200": "#7fcbfe",
-            "300": "#53adfe",
-            "400": "#208afe",
-            "500": "#0868d9",
-            "600": "#044fad",
-            "700": "#023c8a",
-            "800": "#092f68",
-            "900": "#002054"
-        },
-        "coral": {
-            "050": "#feefea",
-            "100": "#fed5cb",
-            "200": "#feb3a0",
-            "300": "#fc8b72",
-            "400": "#eb6446",
-            "500": "#c3422a",
-            "600": "#9d2e1b",
-            "700": "#7f1e0e",
-            "800": "#681004",
-            "900": "#500800"
-        },
-        "green": {
-            "050": "#d9fae0",
-            "100": "#abedba",
-            "200": "#6edc8a",
-            "300": "#49c16a",
-            "400": "#2ca34d",
-            "500": "#187e36",
-            "600": "#106228",
-            "700": "#034e1d",
-            "800": "#003c15",
-            "900": "#002c10"
-        },
-        "grey": {
-            "000": "#ffffff",
-            "050": "#f4f6f8",
-            "100": "#e9edf1",
-            "125": "#e8ebf0",
-            "150": "#e5e8ec",
-            "200": "#cfd6dd",
-            "300": "#aeb7c0",
-            "400": "#8b949e",
-            "500": "#6d7680",
-            "550": "#646c75",
-            "600": "#565f69",
-            "700": "#414952",
-            "800": "#31373e",
-            "850": "#292f36",
-            "900": "#23282e",
-            "950": "#1e2227",
-            "990": "#121518"
-        },
-        "orange": {
-            "050": "#fff2e9",
-            "100": "#ffd6bb",
-            "200": "#ffc29a",
-            "300": "#ffa66c",
-            "400": "#ff9550",
-            "500": "#ff7a24",
-            "600": "#d96012",
-            "700": "#a6480b",
-            "800": "#7d3405",
-            "900": "#5c2400"
-        },
-        "pink": {
-            "050": "#feeef6",
-            "100": "#fed2ea",
-            "200": "#feacd9",
-            "300": "#fe7fc7",
-            "400": "#e759ac",
-            "500": "#be3888",
-            "600": "#98276d",
-            "700": "#761f56",
-            "800": "#601246",
-            "900": "#4c0235"
-        },
-        "purple": {
-            "050": "#faeefe",
-            "100": "#ebd7fe",
-            "200": "#d7b8fe",
-            "300": "#c196fe",
-            "400": "#a574f8",
-            "500": "#814fde",
-            "600": "#6538b9",
-            "700": "#502996",
-            "800": "#3d1e78",
-            "900": "#2d1360"
-        },
-        "red": {
-            "050": "#feeae8",
-            "100": "#fecdca",
-            "200": "#feaaa7",
-            "300": "#fe8081",
-            "400": "#f94448",
-            "500": "#ce212d",
-            "600": "#a30d25",
-            "700": "#81061d",
-            "800": "#650017",
-            "900": "#4b0013"
-        },
-        "yellow": {
-            "050": "#fff6e6",
-            "100": "#ffe4b0",
-            "200": "#ffd78a",
-            "300": "#ffc454",
-            "400": "#ffb933",
-            "500": "#ffa700",
-            "600": "#d98900",
-            "700": "#a66800",
-            "800": "#7d4d00",
-            "900": "#5c3700"
-        },
-        "opacity": {
-            "black": {
-                "15": "#00000026",
-                "20": "#00000033",
-                "50": "#00000080",
-                "70": "#000000b2",
-                "80": "#000000cc"
-            },
-            "blue": {
-                "100": "#53adfe33",
-                "300": "#53adfe66"
-            },
-            "clear": "#ffffff00",
-            "coral": {
-                "300": "#eb644666"
-            },
-            "darkGrey": {
-                "66": "#121518a8"
-            },
-            "green": {
-                "300": "#49c16a66",
-                "400": "#2ca34d4d"
-            },
-            "grey": {
-                "0": "#7f90a400",
-                "15": "#7f90a426",
-                "20": "#7f90a433"
-            },
-            "lightGrey": {
-                "66": "#f4f6f8a8"
-            },
-            "orange": {
-                "100": "#ffa66c33",
-                "300": "#ffa66c66"
-            },
-            "pink": {
-                "300": "#fe7fc766"
-            },
-            "purple": {
-                "300": "#c196fe66"
-            },
-            "red": {
-                "300": "#fe808166",
-                "400": "#f944484d"
-            },
-            "white": {
-                "20": "#ffffff33",
-                "40": "#ffffff66",
-                "50": "#ffffff80",
-                "60": "#ffffff99",
-                "85": "#ffffffd9"
-            },
-            "yellow": {
-                "300": "#ffc45466"
-            }
-        }
-    }
-}

package/src/lib/components/common/AgentsTag.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let text: string;
-    export let icon: string = '';
-    export let alt: string = '';
-</script>
-
-<div class="AgentTag" style="
-    --background-color-left: {$currentTheme.events.grey.primary};
-    --background-color-right: {$currentTheme.events.grey.secondary};
-    --icon-color: {$currentTheme.textsIcons.white};
-">
-    <div class="Left {icon ? 'WithIcon' : ''}">
-        {#if icon}
-            <img class="Icon" src={icon} alt={alt} />
-        {/if}
-    </div>
-    <div class="Right">
-        <h3 class="Text">{text}</h3>
-    </div>
-</div>
-
-<style>
-    .AgentTag {
-        display: flex;
-        align-items: center;
-        height: 18px;
-        border-radius: 4px;
-        background-color: var(--background-color-left);
-        padding: 3px 0;
-    }
-
-    .Left, .Right {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        flex: 0 1;
-    }
-
-    .Left {
-        padding: 0 14px;
-        height: 24px;
-        border-radius: 4px;
-        background-color: var(--background-color-left);
-    }
-
-    .Left.WithIcon {
-        padding: 0 6px;
-    }
-
-    .Right {
-        padding: 0 6px;
-        height: 24px;
-        border-radius: 4px;
-        background-color: var(--background-color-right);
-    }
-
-    .Text {
-        margin: 0;
-        /*TODO ???*/
-        color: var(--background-color-secondary);
-        font-size: 12px;
-        font-weight: 700;
-        letter-spacing: 0.24px;
-    }
-
-    .Icon {
-        width: 16px;
-        height: 16px;
-        color: var(--icon-color);
-    }
-</style>

package/src/lib/components/common/Button.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-    import {currentTheme} from "../../utils/themeStore.ts";
-
-    export let onClick: () => void;
-    export let text: string;
-    export let src: string = '';
-    export let alt: string = '';
-    export let disabled: boolean = false;
-    export let reversedColors: boolean = false;
-</script>
-
-<button {disabled} on:click={onClick} class={reversedColors ? "reversed" : ""} style="
-    --button-text-color-primary-local: {$currentTheme.buttonsSwitchesTabs.textsIcons.buttonTextIconsPrimary};
-    --button-text-color-secondary-local: {$currentTheme.buttonsSwitchesTabs.textsIcons.buttonTextIconsBlack};
-    --shadow-primary: 0px -1px 1px 0px rgba(4, 79, 173, 0.10) inset, 0px 1px 0px 0px rgba(30, 34, 39, 0.12);
-    --shadow-secondary: 0px 1px 0px 1px rgba(30, 34, 39, 0.32) inset, 0px 1px 0px 0px rgba(30, 34, 39, 0.04);
-">
-    <span>{text}</span>
-    {#if src}
-        <img class="icon" src={src} alt={alt}/>
-    {/if}
-</button>
-
-<style>
-    button {
-        display: flex;
-        height: 36px;
-        padding: 6px 20px;
-        justify-content: center;
-        align-items: center;
-        border: none;
-        border-radius: 6px;
-        background-color: var(--button-color-blue);
-        box-shadow: var(--shadow-primary);
-        gap: 6px;
-        cursor: pointer;
-    }
-
-    .reversed {
-        background-color: var(--button-color-grey);
-        border: 1px solid var(--border-color-primary);
-    }
-
-    .reversed > span {
-        color: var(--button-text-color-secondary-local);
-    }
-
-    button:disabled {
-        background-color: var(--button-color-disabled);
-        box-shadow: var(--shadow-secondary);
-        cursor: default;
-    }
-
-    span {
-        color: var(--button-text-color-primary-local);
-        font-weight: 700;
-        white-space: nowrap;
-    }
-
-</style>