@webitel/styleguide 26.2.4 → 26.2.6

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

@@ -1,358 +0,0 @@
-: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/lib/styleguide/colors/reusable/_text-field.scss

@@ -1,43 +0,0 @@
-// shared text field colors
-
-:root {
-  // TODO: move to separate helper-text component
-  // helper
-  --wt-helper-text-color: var(--text-main-color);
-  --wt-helper-text-disabled-color: var(--text-disabled-color);
-  --wt-helper-text-invalid-color: var(--text-error-color);
-
-  // text
-  --wt-text-field-text-color: var(--black);
-
-  // placeholder
-  --wt-text-field-error-text-color: var(--error-color);
-  --wt-text-field-placeholder-color: var(--grey-lighten-1);
-  --wt-text-field-placeholder-error-color: var(--error-color);
-  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
-
-  // border
-  --wt-text-field-input-border-color: var(--grey-darken-1);
-  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
-  --wt-text-field-input-border-error-color: var(--error-color);
-
-  // input bg
-  --wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);
-
-  // select
-  --wt-text-field-select-option-text-color: var(--text-main-color);
-  --wt-text-field-select-option-text-hover-color: var(--primary-on-color);
-  --wt-text-field-select-option-text-selected-color: var(--primary-on-color);
-
-  --wt-text-field-select-option-wrapper-border-color: var(--dp-22-surface-color);
-  --wt-text-field-select-option-background-color: var(--dp-22-surface-color);
-  --wt-text-field-select-option-background-hover-color: var(--primary-light-color);
-  --wt-text-field-select-option-background-selected-color: var(--primary-color);
-}
-
-:root.theme--dark {
-  // text
-  --wt-text-field-text-color: var(--white);
-
-  --wt-text-field-input-border-color: var(--grey-lighten-1);
-}

package/src/lib/styleguide/elevations/_elevations.scss

@@ -1,13 +0,0 @@
-:root {
-  --_elevation-color: hsla(0, 0%, 0%, 0.08);
-  --elevation-1: 0px 0px 2px 1px var(--_elevation-color);
-  --elevation-2: 0px 0px 4px 2px var(--_elevation-color);
-  --elevation-3: 0px 0px 6px 3px var(--_elevation-color);
-  --elevation-4: 0px 0px 8px 4px var(--_elevation-color);
-  --elevation-5: 0px 0px 10px 5px var(--_elevation-color);
-  --elevation-6: 0px 0px 12px 6px var(--_elevation-color);
-  --elevation-7: 0px 0px 14px 7px var(--_elevation-color);
-  --elevation-8: 0px 0px 16px 8px var(--_elevation-color);
-  --elevation-9: 0px 0px 18px 9px var(--_elevation-color);
-  --elevation-10: 0px 0px 20px 10px var(--_elevation-color);
-}

package/src/lib/styleguide/fonts/_fonts.scss

@@ -1,125 +0,0 @@
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
-  font-weight: 100;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
-  font-weight: 200;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
-  font-weight: 300;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
-  font-weight: 500;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
-  font-weight: 600;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
-  font-weight: 700;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
-  font-weight: 800;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
-  font-weight: 900;
-  font-style: italic;
-}

package/src/lib/styleguide/scroll.scss

@@ -1,55 +0,0 @@
-:root {
-  --scrollbar-width: 5px;
-  --scrollbar-height: 5px;
-  --scrollbar-thumb-width: 5px;
-  --scrollbar-bg-color: var(--p-surface-50);
-  --scrollbar-thumb-color: var(--p-surface-150);
-  --scrollbar-hover-thumb-color: var(--p-surface-250);
-  --scrollbar-border-radius: var(--border-radius);
-}
-
-:root.theme--dark {
-  --scrollbar-bg-color: var(--p-surface-850);
-  --scrollbar-thumb-color: var(--p-surface-700);
-  --scrollbar-hover-thumb-color: var(--p-surface-800);
-}
-
-%wt-scrollbar {
-  // scrollbar itself
-  &::-webkit-scrollbar {
-    width: var(--scrollbar-width);
-    height: var(--scrollbar-height);
-    cursor: pointer;
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-bg-color);    
-  }
-
-  // scrollable element
-  &::-webkit-scrollbar-thumb {
-    width: var(--scrollbar-thumb-width);
-    height: var(--scrollbar-thumb-height);
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-thumb-color);
-
-    &:hover {
-      background-color: var(--scrollbar-hover-thumb-color);
-    }
-  }
-}
-
-%wt-distant-scrollbar {
-  &::-webkit-scrollbar {
-    width: 14px;
-    height: 18px;
-    background-color: var(--scrollbar-bg-color);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    height: 2px;
-    border: 4px solid rgba(0, 0, 0, 0);
-    border-radius: var(--scrollbar-border-radius);
-    background-color: var(--scrollbar-thumb-color);
-    background-clip: padding-box;
-    // -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
-  }
-}

package/src/lib/styleguide/spacings/_spacings.scss

@@ -1,15 +0,0 @@
-:root {
-  // Start point
-  --_spacing-multiplicator: 8px;
-
-  // Spacings
-  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
-  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
-  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
-  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
-  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
-  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
-  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
-  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
-  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
-}

package/src/lib/styleguide/transitions/_transitions.scss

@@ -1,5 +0,0 @@
-:root {
-  --transition-fast: 0.3s;
-  --transition-normal: 0.6s;
-  --transition-slow: 0.9s;
-}