@webitel/styleguide 26.2.3 → 26.2.5

package/src/lib/styleguide/colors/palette.css

@@ -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/lib/styleguide/colors/reusable/text-field.css

@@ -0,0 +1,43 @@
+/* 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.css

@@ -0,0 +1,13 @@
+: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.css

@@ -0,0 +1,125 @@
+@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.css

@@ -0,0 +1,56 @@
+: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-750);
+    --scrollbar-thumb-color: var(--p-surface-850);
+    --scrollbar-hover-thumb-color: var(--p-surface-950);
+}
+
+.wt-scrollbar {
+    /* scrollbar itself */
+}
+
+.wt-scrollbar::-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 */
+.wt-scrollbar::-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);
+}
+
+.wt-scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-hover-thumb-color);
+}
+
+.wt-distant-scrollbar {}
+
+.wt-distant-scrollbar::-webkit-scrollbar {
+    width: 14px;
+    height: 18px;
+    background-color: var(--scrollbar-bg-color);
+}
+
+.wt-distant-scrollbar::-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.css

@@ -0,0 +1,15 @@
+: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/styleguide.css

@@ -0,0 +1,8 @@
+@import './scroll.css';
+@import './border-radius/border-radius.css';
+@import './typography/typography.css';
+@import './colors/colors.css';
+@import './elevations/elevations.css';
+@import './spacings/spacings.css';
+@import './transitions/transitions.css';
+@import './fonts/fonts.css';

package/src/lib/styleguide/transitions/transitions.css

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