@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/css/styleguide/colors/_palette.scss

@@ -0,0 +1,358 @@
+:root {
+  // LIGHTNESS
+  --lightness-lighten-5: 95%;
+  --lightness-lighten-4: 90%;
+  --lightness-lighten-3: 80%;
+  --lightness-lighten-2: 70%;
+  --lightness-lighten-1: 60%;
+
+  --lightness-darken-1: 50%;
+  --lightness-darken-2: 45%;
+  --lightness-darken-3: 40%;
+  --lightness-darken-4: 35%;
+
+  --lightness-accent-1: 75%;
+  --lightness-accent-2: 65%;
+  --lightness-accent-3: 50%;
+  --lightness-accent-4: 40%;
+
+  // SATURATION
+  --saturation-lighten-5: 92%;
+  --saturation-lighten-4: 88%;
+  --saturation-lighten-3: 90%;
+  --saturation-lighten-2: 90%;
+  --saturation-lighten-1: 90%;
+
+  --saturation-darken-1: 75%;
+  --saturation-darken-2: 75%;
+  --saturation-darken-3: 75%;
+  --saturation-darken-4: 75%;
+
+  --saturation-accent-1: 91%;
+  --saturation-accent-2: 90%;
+  --saturation-accent-3: 97%;
+  --saturation-accent-4: 97%;
+
+  // HUE
+  --hue-red: 0;
+  --hue-pink: 337;
+  --hue-purple: 291;
+  --hue-deep-purple: 263;
+  --hue-indigo: 232;
+  --hue-blue: 209;
+  --hue-light-blue: 202;
+  --hue-cyan: 188;
+  --hue-teal: 173;
+  --hue-green: 121;
+  --hue-light-green: 88;
+  --hue-lime: 66;
+  --hue-yellow: 54;
+  --hue-amber: 43;
+  --hue-orange: 32;
+  --hue-deep-orange: 11;
+
+  // RED
+  --red-lighten-5: hsla(var(--hue-red), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --red-lighten-4: hsla(var(--hue-red), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --red-lighten-3: hsla(var(--hue-red), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --red-lighten-2: hsla(var(--hue-red), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --red-lighten-1: hsla(var(--hue-red), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --red-darken-4: hsla(var(--hue-red), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --red-darken-3: hsla(var(--hue-red), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --red-darken-2: hsla(var(--hue-red), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --red-darken-1: hsla(var(--hue-red), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --red-accent-4: hsla(var(--hue-red), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --red-accent-3: hsla(var(--hue-red), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --red-accent-2: hsla(var(--hue-red), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --red-accent-1: hsla(var(--hue-red), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // PINK
+  --pink-lighten-5: hsla(var(--hue-pink), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --pink-lighten-4: hsla(var(--hue-pink), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --pink-lighten-3: hsla(var(--hue-pink), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --pink-lighten-2: hsla(var(--hue-pink), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --pink-lighten-1: hsla(var(--hue-pink), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --pink-darken-4: hsla(var(--hue-pink), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --pink-darken-3: hsla(var(--hue-pink), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --pink-darken-2: hsla(var(--hue-pink), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --pink-darken-1: hsla(var(--hue-pink), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --pink-accent-4: hsla(var(--hue-pink), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --pink-accent-3: hsla(var(--hue-pink), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --pink-accent-2: hsla(var(--hue-pink), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --pink-accent-1: hsla(var(--hue-pink), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // PURPLE
+  --purple-lighten-5: hsla(var(--hue-purple), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --purple-lighten-4: hsla(var(--hue-purple), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --purple-lighten-3: hsla(var(--hue-purple), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --purple-lighten-2: hsla(var(--hue-purple), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --purple-lighten-1: hsla(var(--hue-purple), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --purple-darken-4: hsla(var(--hue-purple), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --purple-darken-3: hsla(var(--hue-purple), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --purple-darken-2: hsla(var(--hue-purple), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --purple-darken-1: hsla(var(--hue-purple), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --purple-accent-4: hsla(var(--hue-purple), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --purple-accent-3: hsla(var(--hue-purple), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --purple-accent-2: hsla(var(--hue-purple), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --purple-accent-1: hsla(var(--hue-purple), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // DEEP PURPLE
+  --deep-purple-lighten-5: hsla(var(--hue-deep-purple), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --deep-purple-lighten-4: hsla(var(--hue-deep-purple), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --deep-purple-lighten-3: hsla(var(--hue-deep-purple), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --deep-purple-lighten-2: hsla(var(--hue-deep-purple), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --deep-purple-lighten-1: hsla(var(--hue-deep-purple), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --deep-purple-darken-4: hsla(var(--hue-deep-purple), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --deep-purple-darken-3: hsla(var(--hue-deep-purple), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --deep-purple-darken-2: hsla(var(--hue-deep-purple), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --deep-purple-darken-1: hsla(var(--hue-deep-purple), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --deep-purple-accent-4: hsla(var(--hue-deep-purple), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --deep-purple-accent-3: hsla(var(--hue-deep-purple), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --deep-purple-accent-2: hsla(var(--hue-deep-purple), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --deep-purple-accent-1: hsla(var(--hue-deep-purple), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // INDIGO
+  --indigo-lighten-5: hsla(var(--hue-indigo), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --indigo-lighten-4: hsla(var(--hue-indigo), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --indigo-lighten-3: hsla(var(--hue-indigo), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --indigo-lighten-2: hsla(var(--hue-indigo), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --indigo-lighten-1: hsla(var(--hue-indigo), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --indigo-darken-4: hsla(var(--hue-indigo), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --indigo-darken-3: hsla(var(--hue-indigo), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --indigo-darken-2: hsla(var(--hue-indigo), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --indigo-darken-1: hsla(var(--hue-indigo), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --indigo-accent-4: hsla(var(--hue-indigo), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --indigo-accent-3: hsla(var(--hue-indigo), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --indigo-accent-2: hsla(var(--hue-indigo), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --indigo-accent-1: hsla(var(--hue-indigo), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // BLUE
+  --blue-lighten-5: hsla(var(--hue-blue), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --blue-lighten-4: hsla(var(--hue-blue), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --blue-lighten-3: hsla(var(--hue-blue), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --blue-lighten-2: hsla(var(--hue-blue), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --blue-lighten-1: hsla(var(--hue-blue), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --blue-darken-4: hsla(var(--hue-blue), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --blue-darken-3: hsla(var(--hue-blue), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --blue-darken-2: hsla(var(--hue-blue), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --blue-darken-1: hsla(var(--hue-blue), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --blue-accent-4: hsla(var(--hue-blue), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --blue-accent-3: hsla(var(--hue-blue), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --blue-accent-2: hsla(var(--hue-blue), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --blue-accent-1: hsla(var(--hue-blue), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // LIGHT BLUE
+  --light-blue-lighten-5: hsla(var(--hue-light-blue), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --light-blue-lighten-4: hsla(var(--hue-light-blue), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --light-blue-lighten-3: hsla(var(--hue-light-blue), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --light-blue-lighten-2: hsla(var(--hue-light-blue), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --light-blue-lighten-1: hsla(var(--hue-light-blue), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --light-blue-darken-4: hsla(var(--hue-light-blue), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --light-blue-darken-3: hsla(var(--hue-light-blue), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --light-blue-darken-2: hsla(var(--hue-light-blue), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --light-blue-darken-1: hsla(var(--hue-light-blue), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --light-blue-accent-4: hsla(var(--hue-light-blue), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --light-blue-accent-3: hsla(var(--hue-light-blue), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --light-blue-accent-2: hsla(var(--hue-light-blue), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --light-blue-accent-1: hsla(var(--hue-light-blue), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // CYAN
+  --cyan-lighten-5: hsla(var(--hue-cyan), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --cyan-lighten-4: hsla(var(--hue-cyan), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --cyan-lighten-3: hsla(var(--hue-cyan), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --cyan-lighten-2: hsla(var(--hue-cyan), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --cyan-lighten-1: hsla(var(--hue-cyan), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --cyan-darken-4: hsla(var(--hue-cyan), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --cyan-darken-3: hsla(var(--hue-cyan), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --cyan-darken-2: hsla(var(--hue-cyan), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --cyan-darken-1: hsla(var(--hue-cyan), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --cyan-accent-4: hsla(var(--hue-cyan), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --cyan-accent-3: hsla(var(--hue-cyan), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --cyan-accent-2: hsla(var(--hue-cyan), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --cyan-accent-1: hsla(var(--hue-cyan), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // TEAL
+  --teal-lighten-5: hsla(var(--hue-teal), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --teal-lighten-4: hsla(var(--hue-teal), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --teal-lighten-3: hsla(var(--hue-teal), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --teal-lighten-2: hsla(var(--hue-teal), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --teal-lighten-1: hsla(var(--hue-teal), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --teal-darken-4: hsla(var(--hue-teal), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --teal-darken-3: hsla(var(--hue-teal), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --teal-darken-2: hsla(var(--hue-teal), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --teal-darken-1: hsla(var(--hue-teal), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --teal-accent-4: hsla(var(--hue-teal), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --teal-accent-3: hsla(var(--hue-teal), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --teal-accent-2: hsla(var(--hue-teal), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --teal-accent-1: hsla(var(--hue-teal), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // GREEN
+  --green-lighten-5: hsla(var(--hue-green), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --green-lighten-4: hsla(var(--hue-green), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --green-lighten-3: hsla(var(--hue-green), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --green-lighten-2: hsla(var(--hue-green), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --green-lighten-1: hsla(var(--hue-green), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --green-darken-4: hsla(var(--hue-green), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --green-darken-3: hsla(var(--hue-green), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --green-darken-2: hsla(var(--hue-green), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --green-darken-1: hsla(var(--hue-green), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --green-accent-4: hsla(var(--hue-green), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --green-accent-3: hsla(var(--hue-green), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --green-accent-2: hsla(var(--hue-green), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --green-accent-1: hsla(var(--hue-green), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // LIGHT GREEN
+  --light-green-lighten-5: hsla(var(--hue-light-green), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --light-green-lighten-4: hsla(var(--hue-light-green), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --light-green-lighten-3: hsla(var(--hue-light-green), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --light-green-lighten-2: hsla(var(--hue-light-green), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --light-green-lighten-1: hsla(var(--hue-light-green), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --light-green-darken-4: hsla(var(--hue-light-green), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --light-green-darken-3: hsla(var(--hue-light-green), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --light-green-darken-2: hsla(var(--hue-light-green), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --light-green-darken-1: hsla(var(--hue-light-green), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --light-green-accent-4: hsla(var(--hue-light-green), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --light-green-accent-3: hsla(var(--hue-light-green), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --light-green-accent-2: hsla(var(--hue-light-green), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --light-green-accent-1: hsla(var(--hue-light-green), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // LIME
+  --lime-lighten-5: hsla(var(--hue-lime), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --lime-lighten-4: hsla(var(--hue-lime), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --lime-lighten-3: hsla(var(--hue-lime), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --lime-lighten-2: hsla(var(--hue-lime), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --lime-lighten-1: hsla(var(--hue-lime), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --lime-darken-4: hsla(var(--hue-lime), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --lime-darken-3: hsla(var(--hue-lime), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --lime-darken-2: hsla(var(--hue-lime), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --lime-darken-1: hsla(var(--hue-lime), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --lime-accent-4: hsla(var(--hue-lime), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --lime-accent-3: hsla(var(--hue-lime), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --lime-accent-2: hsla(var(--hue-lime), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --lime-accent-1: hsla(var(--hue-lime), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // yellow
+  --yellow-lighten-5: hsla(var(--hue-yellow), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --yellow-lighten-4: hsla(var(--hue-yellow), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --yellow-lighten-3: hsla(var(--hue-yellow), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --yellow-lighten-2: hsla(var(--hue-yellow), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --yellow-lighten-1: hsla(var(--hue-yellow), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --yellow-darken-4: hsla(var(--hue-yellow), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --yellow-darken-3: hsla(var(--hue-yellow), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --yellow-darken-2: hsla(var(--hue-yellow), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --yellow-darken-1: hsla(var(--hue-yellow), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --yellow-accent-4: hsla(var(--hue-yellow), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --yellow-accent-3: hsla(var(--hue-yellow), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --yellow-accent-2: hsla(var(--hue-yellow), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --yellow-accent-1: hsla(var(--hue-yellow), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // amber
+  --amber-lighten-5: hsla(var(--hue-amber), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --amber-lighten-4: hsla(var(--hue-amber), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --amber-lighten-3: hsla(var(--hue-amber), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --amber-lighten-2: hsla(var(--hue-amber), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --amber-lighten-1: hsla(var(--hue-amber), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --amber-darken-4: hsla(var(--hue-amber), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --amber-darken-3: hsla(var(--hue-amber), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --amber-darken-2: hsla(var(--hue-amber), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --amber-darken-1: hsla(var(--hue-amber), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --amber-accent-4: hsla(var(--hue-amber), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --amber-accent-3: hsla(var(--hue-amber), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --amber-accent-2: hsla(var(--hue-amber), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --amber-accent-1: hsla(var(--hue-amber), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // orange
+  --orange-lighten-5: hsla(var(--hue-orange), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --orange-lighten-4: hsla(var(--hue-orange), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --orange-lighten-3: hsla(var(--hue-orange), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --orange-lighten-2: hsla(var(--hue-orange), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --orange-lighten-1: hsla(var(--hue-orange), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --orange-darken-4: hsla(var(--hue-orange), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --orange-darken-3: hsla(var(--hue-orange), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --orange-darken-2: hsla(var(--hue-orange), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --orange-darken-1: hsla(var(--hue-orange), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --orange-accent-4: hsla(var(--hue-orange), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --orange-accent-3: hsla(var(--hue-orange), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --orange-accent-2: hsla(var(--hue-orange), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --orange-accent-1: hsla(var(--hue-orange), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // deep-orange
+  --deep-orange-lighten-5: hsla(var(--hue-deep-orange), var(--saturation-lighten-5), var(--lightness-lighten-5), 1);
+  --deep-orange-lighten-4: hsla(var(--hue-deep-orange), var(--saturation-lighten-4), var(--lightness-lighten-4), 1);
+  --deep-orange-lighten-3: hsla(var(--hue-deep-orange), var(--saturation-lighten-3), var(--lightness-lighten-3), 1);
+  --deep-orange-lighten-2: hsla(var(--hue-deep-orange), var(--saturation-lighten-2), var(--lightness-lighten-2), 1);
+  --deep-orange-lighten-1: hsla(var(--hue-deep-orange), var(--saturation-lighten-1), var(--lightness-lighten-1), 1);
+
+  --deep-orange-darken-4: hsla(var(--hue-deep-orange), var(--saturation-darken-4), var(--lightness-darken-4), 1);
+  --deep-orange-darken-3: hsla(var(--hue-deep-orange), var(--saturation-darken-3), var(--lightness-darken-3), 1);
+  --deep-orange-darken-2: hsla(var(--hue-deep-orange), var(--saturation-darken-2), var(--lightness-darken-2), 1);
+  --deep-orange-darken-1: hsla(var(--hue-deep-orange), var(--saturation-darken-1), var(--lightness-darken-1), 1);
+
+  --deep-orange-accent-4: hsla(var(--hue-deep-orange), var(--saturation-accent-4), var(--lightness-accent-4), 1);
+  --deep-orange-accent-3: hsla(var(--hue-deep-orange), var(--saturation-accent-3), var(--lightness-accent-3), 1);
+  --deep-orange-accent-2: hsla(var(--hue-deep-orange), var(--saturation-accent-2), var(--lightness-accent-2), 1);
+  --deep-orange-accent-1: hsla(var(--hue-deep-orange), var(--saturation-accent-1), var(--lightness-accent-1), 1);
+
+  // grey
+
+  --lightness-lighten-5-grey: 94%;
+  --lightness-lighten-4-grey: 84%;
+  --lightness-lighten-3-grey: 74%;
+  --lightness-lighten-2-grey: 64%;
+  --lightness-lighten-1-grey: 54%;
+
+  --lightness-darken-1-grey: 44%;
+  --lightness-darken-2-grey: 34%;
+  --lightness-darken-3-grey: 24%;
+  --lightness-darken-4-grey: 14%;
+  --lightness-darken-5-grey: 4%;
+
+  --saturation-grey: 20%;
+  --hue-grey: 225;
+
+
+  --grey-lighten-5: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-5-grey), 1);
+  --grey-lighten-4: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-4-grey), 1);
+  --grey-lighten-3: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-3-grey), 1);
+  --grey-lighten-2: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-2-grey), 1);
+  --grey-lighten-1: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-lighten-1-grey), 1);
+
+  --grey-darken-1: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-1-grey), 1);
+  --grey-darken-2: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-2-grey), 1);
+  --grey-darken-3: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-3-grey), 1);
+  --grey-darken-4: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-4-grey), 1);
+  --grey-darken-5: hsla(var(--hue-grey), var(--saturation-grey), var(--lightness-darken-5-grey), 1);
+
+  --black: hsla(0, 0%, 0%, 1);
+  --white: hsla(0, 0%, 100%, 1);
+}

package/src/directives/clickaway/clickaway.js

@@ -0,0 +1,3 @@
+import { vOnClickOutside } from '@vueuse/components';
+
+export default vOnClickOutside;

package/src/directives/index.js

@@ -0,0 +1,7 @@
+import clickaway from './clickaway/clickaway';
+
+const Directives = {
+  clickaway,
+};
+
+export default Directives;

package/src/enums/WebitelApplications/AdminSections.enum.js

@@ -41,6 +41,10 @@ const AdminSections = Object.freeze({
   // PERMISSIONS
   OBJECTS: 'objects',                // permissions: add
   ROLES: 'roles',                   // scope: roles
+
+  // SYSTEM
+  CHANGELOGS: 'changelogs',
+  SETTINGS: 'settings',
 });
 
 export default AdminSections;

package/src/enums/WebitelApplications/AuditorSections.enum.js

@@ -0,0 +1,5 @@
+const AuditorSections = Object.freeze({
+  SCORECARDS: 'scorecards',
+});
+
+export default AuditorSections;

package/src/enums/WebitelApplications/CrmSections.enum.js

@@ -0,0 +1,5 @@
+const CrmSections = Object.freeze({
+  CONTACTS: 'contacts',
+});
+
+export default CrmSections;

package/src/enums/WebitelApplications/WebitelApplications.enum.js

@@ -5,6 +5,7 @@ const WebitelApplications = Object.freeze({
   HISTORY: 'history',
   AUDIT: 'audit',
   ANALYTICS: 'grafana',
+  CRM: 'crm',
 });
 
 export default WebitelApplications;

package/src/locale/en/en.js

@@ -7,8 +7,13 @@ import {
 } from 'webitel-sdk';
 import { QueueType } from 'webitel-sdk/esm2015/enums';
 import AdminSections from '../../enums/WebitelApplications/AdminSections.enum';
-import SupervisorSections from '../../enums/WebitelApplications/SupervisorSections.enum';
-import WebitelApplications from '../../enums/WebitelApplications/WebitelApplications.enum';
+import AuditorSections
+  from '../../enums/WebitelApplications/AuditorSections.enum';
+import CrmSections from '../../enums/WebitelApplications/CrmSections.enum';
+import SupervisorSections
+  from '../../enums/WebitelApplications/SupervisorSections.enum';
+import WebitelApplications
+  from '../../enums/WebitelApplications/WebitelApplications.enum';
 import { snakeToCamel } from '../../scripts/caseConverters';
 
 export default {
@@ -17,6 +22,10 @@ export default {
     total: 'Total',
     ok: 'Ok',
     save: 'Save',
+    saveAs: 'Save as',
+    saved: 'Saved',
+    send: 'Send',
+    start: 'Start',
     close: 'Close',
     add: 'Add',
     cancel: 'Cancel',
@@ -32,6 +41,7 @@ export default {
     generate: 'Generate',
     lang: {
       en: 'English',
+      es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
     },
@@ -44,6 +54,20 @@ export default {
     downloadAll: 'Download all',
     warning: 'Warning',
     doNotSave: 'Don\'t save',
+    required: 'Required',
+    copy: 'Copy',
+    new: 'New',
+    createdAt: 'Created on',
+    createdBy: 'Created by',
+    modifiedAt: 'Modified on',
+    modifiedBy: 'Modified by',
+    general: 'General',
+    generalInfo: 'General info',
+    all: 'All {entity}',
+    upload: 'Upload',
+    edit: 'Edit',
+    back: 'Back',
+    step: 'Step { count }',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -70,11 +94,18 @@ export default {
     duration: 'Duration',
     reset: 'Reset',
     errors: 'Error | Errors',
+    labels: 'Label | Labels',
+    permissions: 'Permission | Permissions',
+    options: 'Option | Options',
+    emails: 'Email | Emails',
+    phones: 'Phone | Phones',
+    messaging: 'Messaging',
+    emptyResultSearch: 'Your search yielded no results',
   },
   // date-related texts
   date: {
     sec: 'Sec',
-    timezone: 'Timezone | Timezones',
+    timezone: 'Time zone | Time zones',
   },
   // describes Webitel system entities
   objects: {
@@ -82,6 +113,8 @@ export default {
     supervisor: 'Supervisor | Supervisors',
     auditor: 'Auditor | Auditors',
     region: 'Region | Regions',
+    communicationType: 'Communication type | Communication types',
+    grantee: 'Grantee | Grantees',
     queue: {
       type: {
         [QueueType.INBOUND_QUEUE]: 'Inbound queue',
@@ -91,8 +124,8 @@ export default {
         [QueueType.PROGRESSIVE_DIALER]: 'Progressive dialer',
         [QueueType.PREVIEW_DIALER]: 'Preview dialer',
         [QueueType.CHAT_INBOUND_QUEUE]: 'Chat queue',
-        [QueueType.INBOUND_JOB_QUEUE]: 'Inbound job queue',
-        [QueueType.OUTBOUND_JOB_QUEUE]: 'Outbound job queue',
+        [QueueType.INBOUND_JOB_QUEUE]: 'Inbound task queue',
+        [QueueType.OUTBOUND_JOB_QUEUE]: 'Outbound task queue',
       },
     },
     agent: {
@@ -141,7 +174,18 @@ export default {
   // describes Webitel FRONTEND applications + their navs
   WebitelApplications: {
     [WebitelApplications.AGENT]: { name: 'Agent Workspace' },
-    [WebitelApplications.AUDIT]: { name: 'Audit' },
+    [WebitelApplications.AUDIT]: {
+      name: 'Audit',
+      sections: {
+        [AuditorSections.SCORECARDS]: 'Scorecards',
+      },
+    },
+    [WebitelApplications.CRM]: {
+      name: 'CRM',
+      sections: {
+        [CrmSections.CONTACTS]: 'Contacts',
+      },
+    },
     [WebitelApplications.HISTORY]: { name: 'Call History' },
     [WebitelApplications.ANALYTICS]: { name: 'Data Visualisation Tool' },
     [WebitelApplications.SUPERVISOR]: {
@@ -166,7 +210,7 @@ export default {
         [AdminSections.SKILLS]: 'Agent skills',
         [AdminSections.BUCKETS]: 'Buckets',
         [AdminSections.MEDIA]: 'Media files',
-        [AdminSections.BLACKLIST]: 'Call list',
+        [AdminSections.BLACKLIST]: 'Lists',
         [AdminSections.CALENDARS]: 'Calendars',
         [AdminSections.REGIONS]: 'Locations',
         [AdminSections.COMMUNICATIONS]: 'Communication types',
@@ -182,9 +226,10 @@ export default {
         [AdminSections.IMPORT_CSV]: 'Imports of CSV from file',
         [AdminSections.TRIGGERS]: 'Triggers',
         [AdminSections.MEDIA]: 'Media files',
-        [AdminSections.BLACKLIST]: 'Call lists',
         [AdminSections.ROLES]: 'Roles',
         [AdminSections.OBJECTS]: 'Objects',
+        [AdminSections.CHANGELOGS]: 'Change log',
+        [AdminSections.SETTINGS]: 'Settings',
       },
     },
   },
@@ -202,10 +247,15 @@ export default {
     requiredArrayValue: 'Array should not be empty',
     minLength: 'Quantity of characters should not be less than',
     url: 'Should look like url',
+    regExpValidator: 'This regular expression is not valid',
+    domainValidator: 'Incorrect domain',
+    decimalValidator: 'Decimal precision should be no more than { count } places',
+    integer: 'The field should contain only whole numbers',
   },
   webitelUI: {
     searchBar: {
       placeholder: 'Search',
+      settingsHint: 'Search mode',
     },
     timepicker: {
       hour: 'Hour:',
@@ -252,11 +302,12 @@ export default {
       offline: 'Offline',
       breakOut: 'Break Out',
     },
-    table: {
-      tableCells: {
-        deleteActionHint: 'Delete',
-        editActionHint: 'Edit',
-      },
+    iconAction: {
+      deleteActionHint: 'Delete',
+      editActionHint: 'Edit',
+      addActionHint: 'Add',
+      historyActionHint: 'History',
+      downloadActionHint: 'Download',
     },
     errorPages: {
       goBack: 'Go back',
@@ -273,5 +324,37 @@ export default {
       copy: 'Copy',
       copied: 'Copied to clipboard!',
     },
+    auditForm: {
+      question: 'Criteria',
+      option: 'Option | Options',
+      score: 'Score | Scores',
+      addQuestion: 'Add criteria',
+      answerType: 'Answer type',
+      type: {
+        options: 'Options',
+        score: 'Score',
+      },
+      clearSelection: 'Clear selection',
+    },
+    deleteConfirmationPopup: {
+      title: 'Confirm deletion',
+      askingAlert: 'Are you sure you want to delete {count} item? | Are you sure you want to delete {count} items?',
+      undoneActionAlert: 'This action cannot be undone.',
+      deleteAll: 'ALL',
+    },
+    dummy: {
+      text: 'There are no records yet',
+    },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Select a pause cause',
+        min: 'Min',
+        unlimited: 'Unlimited',
+      },
+      statusSelectErrorPopup: {
+        title: 'Attention',
+        message: 'The limit for agents to take a pause has been exceeded. The pause is unavailable right now.',
+      },
+    },
   },
 };