@webitel/styleguide 26.2.5 → 26.2.7

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

@@ -1,206 +1,206 @@
-@import './palette.css';
-@import './deprecated.css';
-@import './reusable/text-field.css';
+@import "./palette.css";
+@import "./deprecated.css";
+@import "./reusable/text-field.css";
 
 :root {
-    /* dp colors */
-    --dp-24-surface-color: hsl(0, 0%, 100%);
-    --dp-23-surface-color: hsl(225, 20%, 99%);
-    --dp-22-surface-color: hsl(225, 20%, 98%);
-    --dp-21-surface-color: hsl(225, 20%, 97%);
-    --dp-20-surface-color: hsl(225, 20%, 96%);
-    --dp-19-surface-color: hsl(225, 20%, 95%);
-    --dp-18-surface-color: hsl(225, 20%, 94%);
-    --dp-17-surface-color: hsl(225, 20%, 93%);
-    --dp-16-surface-color: hsl(225, 20%, 92%);
-    --dp-15-surface-color: hsl(225, 20%, 91%);
-    --dp-14-surface-color: hsl(225, 20%, 90%);
-    --dp-13-surface-color: hsl(225, 20%, 89%);
-    --dp-12-surface-color: hsl(225, 20%, 88%);
-    --dp-11-surface-color: hsl(225, 20%, 87%);
-    --dp-10-surface-color: hsl(225, 20%, 86%);
-    --dp-9-surface-color: hsl(225, 20%, 85%);
-    --dp-8-surface-color: hsl(225, 20%, 84%);
-    --dp-7-surface-color: hsl(225, 20%, 83%);
-    --dp-6-surface-color: hsl(225, 20%, 82%);
-    --dp-5-surface-color: hsl(225, 20%, 81%);
-    --dp-4-surface-color: hsl(225, 20%, 80%);
-    --dp-3-surface-color: hsl(225, 20%, 79%);
-    --dp-2-surface-color: hsl(225, 20%, 78%);
-    --dp-1-surface-color: hsl(225, 20%, 77%);
-
-    /* content wrapper */
-    --content-wrapper-color: var(--p-content-background);
-    --content-wrapper-hover-color: var(--p-content-hover-background);
-
-    /* success colors */
-    --success-color: var(--green-darken-4);
-    --success-hover-color: var(--green-darken-3);
-    --success-light-color: var(--green-lighten-4);
-    --success-on-color: var(--white);
-
-    /* warning colors */
-    --warning-color: var(--orange-accent-2);
-    --warning-hover-color: var(--orange-accent-1);
-    --warning-light-color: var(--orange-lighten-4);
-    --warning-on-color: var(--black);
-
-    /* error colors */
-    --error-color: var(--red-accent-2);
-    --error-hover-color: var(--red-lighten-2);
-    --error-light-color: var(--red-lighten-4);
-    --error-on-color: var(--white);
-
-    /* info colors */
-    --info-color: var(--blue-darken-1);
-    --info-hover-color: var(--blue-lighten-1);
-    --info-light-color: var(--blue-lighten-4);
-    --info-on-color: var(--black);
-
-    /* job colors */
-    --job-color: var(--blue-darken-1);
-    --job-hover-color: var(--blue-lighten-1);
-    --job-light-color: var(--blue-lighten-4);
-    --job-on-color: var(--black);
-
-    /* chat colors */
-    --chat-color: var(--indigo-accent-2);
-    --chat-hover-color: var(--indigo-accent-1);
-    --chat-light-color: var(--indigo-lighten-4);
-    --chat-on-color: var(--black);
-
-    /* transfer colors */
-    --transfer-color: var(--indigo-lighten-1);
-    --transfer-hover-color: var(--indigo-lighten-2);
-    --transfer-light-color: var(--indigo-lighten-4);
-    --transfer-on-color: var(--white);
-
-    /* primary colors */
-    --primary-color: var(--amber-accent-3);
-    --primary-hover-color: var(--amber-accent-2);
-    --primary-light-color: var(--amber-lighten-3);
-    --primary-on-color: var(--black);
-
-    /* secondary colors */
-    --secondary-color: var(--dp-10-surface-color);
-    --secondary-hover-color: var(--dp-14-surface-color);
-    --secondary-light-color: var(--dp-16-surface-color);
-    --secondary-on-color: var(--grey-darken-4);
-
-    /* email colors */
-    --email-color: var(--blue-darken-3);
-    --email-hover-color: var(--blue-darken-2);
-    --email-light-color: var(--blue-lighten-2);
-    --email-on-color: var(--black);
-
-    /* accent colors */
-    --accent-color: var(--purple-lighten-1);
-    --sub-accent-color: var(--indigo-darken-3);
-
-    /* typography colors */
-    --text-main-color: var(--grey-darken-3);
-    --text-disabled-color: var(--grey-lighten-1);
-    --text-error-color: var(--error-color);
-    --text-success-color: var(--success-color);
-    --text-link-color: var(--info-color);
-    /* typography on colors */
-    --text-on-brand-color: var(--white);
+	/* dp colors */
+	--dp-24-surface-color: hsl(0, 0%, 100%);
+	--dp-23-surface-color: hsl(225, 20%, 99%);
+	--dp-22-surface-color: hsl(225, 20%, 98%);
+	--dp-21-surface-color: hsl(225, 20%, 97%);
+	--dp-20-surface-color: hsl(225, 20%, 96%);
+	--dp-19-surface-color: hsl(225, 20%, 95%);
+	--dp-18-surface-color: hsl(225, 20%, 94%);
+	--dp-17-surface-color: hsl(225, 20%, 93%);
+	--dp-16-surface-color: hsl(225, 20%, 92%);
+	--dp-15-surface-color: hsl(225, 20%, 91%);
+	--dp-14-surface-color: hsl(225, 20%, 90%);
+	--dp-13-surface-color: hsl(225, 20%, 89%);
+	--dp-12-surface-color: hsl(225, 20%, 88%);
+	--dp-11-surface-color: hsl(225, 20%, 87%);
+	--dp-10-surface-color: hsl(225, 20%, 86%);
+	--dp-9-surface-color: hsl(225, 20%, 85%);
+	--dp-8-surface-color: hsl(225, 20%, 84%);
+	--dp-7-surface-color: hsl(225, 20%, 83%);
+	--dp-6-surface-color: hsl(225, 20%, 82%);
+	--dp-5-surface-color: hsl(225, 20%, 81%);
+	--dp-4-surface-color: hsl(225, 20%, 80%);
+	--dp-3-surface-color: hsl(225, 20%, 79%);
+	--dp-2-surface-color: hsl(225, 20%, 78%);
+	--dp-1-surface-color: hsl(225, 20%, 77%);
+
+	/* content wrapper */
+	--content-wrapper-color: var(--p-content-background);
+	--content-wrapper-hover-color: var(--p-content-hover-background);
+
+	/* success colors */
+	--success-color: var(--green-darken-4);
+	--success-hover-color: var(--green-darken-3);
+	--success-light-color: var(--green-lighten-4);
+	--success-on-color: var(--white);
+
+	/* warning colors */
+	--warning-color: var(--orange-accent-2);
+	--warning-hover-color: var(--orange-accent-1);
+	--warning-light-color: var(--orange-lighten-4);
+	--warning-on-color: var(--black);
+
+	/* error colors */
+	--error-color: var(--red-accent-2);
+	--error-hover-color: var(--red-lighten-2);
+	--error-light-color: var(--red-lighten-4);
+	--error-on-color: var(--white);
+
+	/* info colors */
+	--info-color: var(--blue-darken-1);
+	--info-hover-color: var(--blue-lighten-1);
+	--info-light-color: var(--blue-lighten-4);
+	--info-on-color: var(--black);
+
+	/* job colors */
+	--job-color: var(--blue-darken-1);
+	--job-hover-color: var(--blue-lighten-1);
+	--job-light-color: var(--blue-lighten-4);
+	--job-on-color: var(--black);
+
+	/* chat colors */
+	--chat-color: var(--indigo-accent-2);
+	--chat-hover-color: var(--indigo-accent-1);
+	--chat-light-color: var(--indigo-lighten-4);
+	--chat-on-color: var(--black);
+
+	/* transfer colors */
+	--transfer-color: var(--indigo-lighten-1);
+	--transfer-hover-color: var(--indigo-lighten-2);
+	--transfer-light-color: var(--indigo-lighten-4);
+	--transfer-on-color: var(--white);
+
+	/* primary colors */
+	--primary-color: var(--amber-accent-3);
+	--primary-hover-color: var(--amber-accent-2);
+	--primary-light-color: var(--amber-lighten-3);
+	--primary-on-color: var(--black);
+
+	/* secondary colors */
+	--secondary-color: var(--dp-10-surface-color);
+	--secondary-hover-color: var(--dp-14-surface-color);
+	--secondary-light-color: var(--dp-16-surface-color);
+	--secondary-on-color: var(--grey-darken-4);
+
+	/* email colors */
+	--email-color: var(--blue-darken-3);
+	--email-hover-color: var(--blue-darken-2);
+	--email-light-color: var(--blue-lighten-2);
+	--email-on-color: var(--black);
+
+	/* accent colors */
+	--accent-color: var(--purple-lighten-1);
+	--sub-accent-color: var(--indigo-darken-3);
+
+	/* typography colors */
+	--text-main-color: var(--grey-darken-3);
+	--text-disabled-color: var(--grey-lighten-1);
+	--text-error-color: var(--error-color);
+	--text-success-color: var(--success-color);
+	--text-link-color: var(--info-color);
+	/* typography on colors */
+	--text-on-brand-color: var(--white);
 }
 
 :root.theme--dark {
-    /* dp colors */
-    --dp-24-surface-color: hsl(225, 20%, 25%);
-    --dp-23-surface-color: hsl(225, 20%, 24%);
-    --dp-22-surface-color: hsl(225, 20%, 23%);
-    --dp-21-surface-color: hsl(225, 20%, 22%);
-    --dp-20-surface-color: hsl(225, 20%, 21%);
-    --dp-19-surface-color: hsl(225, 20%, 20%);
-    --dp-18-surface-color: hsl(225, 20%, 19%);
-    --dp-17-surface-color: hsl(225, 20%, 18%);
-    --dp-16-surface-color: hsl(225, 20%, 17%);
-    --dp-15-surface-color: hsl(225, 20%, 16%);
-    --dp-14-surface-color: hsl(225, 20%, 15%);
-    --dp-13-surface-color: hsl(225, 20%, 14%);
-    --dp-12-surface-color: hsl(225, 20%, 13%);
-    --dp-11-surface-color: hsl(225, 20%, 12%);
-    --dp-10-surface-color: hsl(225, 20%, 11%);
-    --dp-9-surface-color: hsl(225, 20%, 10%);
-    --dp-8-surface-color: hsl(225, 20%, 9%);
-    --dp-7-surface-color: hsl(225, 20%, 8%);
-    --dp-6-surface-color: hsl(225, 20%, 7%);
-    --dp-5-surface-color: hsl(225, 20%, 6%);
-    --dp-4-surface-color: hsl(225, 20%, 5%);
-    --dp-3-surface-color: hsl(225, 20%, 4%);
-    --dp-2-surface-color: hsl(225, 20%, 3%);
-    --dp-1-surface-color: hsl(225, 20%, 2%);
-
-    /* success colors */
-    --success-color: var(--green-darken-4);
-    --success-hover-color: var(--green-darken-3);
-    --success-light-color: var(--green-lighten-3);
-    --success-on-color: var(--black);
-
-    /* warning colors */
-    --warning-color: var(--orange-accent-2);
-    --warning-hover-color: var(--orange-accent-1);
-    --warning-light-color: var(--orange-lighten-3);
-    --warning-on-color: var(--black);
-
-    /* error colors */
-    --error-color: var(--red-accent-2);
-    --error-hover-color: var(--red-lighten-2);
-    --error-light-color: var(--red-lighten-3);
-    --error-on-color: var(--black);
-
-    /* info colors */
-    --info-color: var(--blue-darken-1);
-    --info-hover-color: var(--blue-lighten-1);
-    --info-light-color: var(--blue-lighten-3);
-    --info-on-color: var(--white);
-
-    /* job colors */
-    --job-color: var(--blue-darken-1);
-    --job-hover-color: var(--blue-lighten-1);
-    --job-light-color: var(--blue-lighten-3);
-    --job-on-color: var(--white);
-
-    /* chat colors */
-    --chat-color: var(--indigo-accent-2);
-    --chat-hover-color: var(--indigo-accent-1);
-    --chat-light-color: var(--indigo-lighten-3);
-    --chat-on-color: var(--white);
-
-    /* transfer colors */
-    --transfer-color: var(--indigo-darken-1);
-    --transfer-hover-color: var(--indigo-lighten-1);
-    --transfer-light-color: var(--indigo-lighten-4);
-    --transfer-on-color: var(--white);
-
-    /* primary colors */
-    --primary-color: var(--amber-darken-2);
-    --primary-hover-color: var(--amber-darken-1);
-    --primary-light-color: var(--amber-darken-4);
-    --primary-on-color: var(--black);
-
-    /* secondary colors */
-    --secondary-on-color: var(--grey-lighten-4);
-
-    /* email colors */
-    --email-color: var(--blue-darken-3);
-    --email-hover-color: var(--blue-darken-2);
-    --email-light-color: var(--blue-lighten-1);
-    --email-on-color: var(--white);
-
-    /* accent colors */
-    --accent-color: var(--purple-lighten-1);
-    --sub-accent-color: var(--indigo-darken-3);
-
-    /* typography colors */
-    --text-main-color: var(--grey-lighten-3);
-    --text-disabled-color: var(--grey-darken-1);
-    --text-error-color: var(--error-color);
-    --text-success-color: var(--success-color);
-    --text-link-color: var(--info-color);
-    /* typography on colors */
-    --text-on-brand-color: var(--white);
-}
+	/* dp colors */
+	--dp-24-surface-color: hsl(225, 20%, 25%);
+	--dp-23-surface-color: hsl(225, 20%, 24%);
+	--dp-22-surface-color: hsl(225, 20%, 23%);
+	--dp-21-surface-color: hsl(225, 20%, 22%);
+	--dp-20-surface-color: hsl(225, 20%, 21%);
+	--dp-19-surface-color: hsl(225, 20%, 20%);
+	--dp-18-surface-color: hsl(225, 20%, 19%);
+	--dp-17-surface-color: hsl(225, 20%, 18%);
+	--dp-16-surface-color: hsl(225, 20%, 17%);
+	--dp-15-surface-color: hsl(225, 20%, 16%);
+	--dp-14-surface-color: hsl(225, 20%, 15%);
+	--dp-13-surface-color: hsl(225, 20%, 14%);
+	--dp-12-surface-color: hsl(225, 20%, 13%);
+	--dp-11-surface-color: hsl(225, 20%, 12%);
+	--dp-10-surface-color: hsl(225, 20%, 11%);
+	--dp-9-surface-color: hsl(225, 20%, 10%);
+	--dp-8-surface-color: hsl(225, 20%, 9%);
+	--dp-7-surface-color: hsl(225, 20%, 8%);
+	--dp-6-surface-color: hsl(225, 20%, 7%);
+	--dp-5-surface-color: hsl(225, 20%, 6%);
+	--dp-4-surface-color: hsl(225, 20%, 5%);
+	--dp-3-surface-color: hsl(225, 20%, 4%);
+	--dp-2-surface-color: hsl(225, 20%, 3%);
+	--dp-1-surface-color: hsl(225, 20%, 2%);
+
+	/* success colors */
+	--success-color: var(--green-darken-4);
+	--success-hover-color: var(--green-darken-3);
+	--success-light-color: var(--green-lighten-3);
+	--success-on-color: var(--black);
+
+	/* warning colors */
+	--warning-color: var(--orange-accent-2);
+	--warning-hover-color: var(--orange-accent-1);
+	--warning-light-color: var(--orange-lighten-3);
+	--warning-on-color: var(--black);
+
+	/* error colors */
+	--error-color: var(--red-accent-2);
+	--error-hover-color: var(--red-lighten-2);
+	--error-light-color: var(--red-lighten-3);
+	--error-on-color: var(--black);
+
+	/* info colors */
+	--info-color: var(--blue-darken-1);
+	--info-hover-color: var(--blue-lighten-1);
+	--info-light-color: var(--blue-lighten-3);
+	--info-on-color: var(--white);
+
+	/* job colors */
+	--job-color: var(--blue-darken-1);
+	--job-hover-color: var(--blue-lighten-1);
+	--job-light-color: var(--blue-lighten-3);
+	--job-on-color: var(--white);
+
+	/* chat colors */
+	--chat-color: var(--indigo-accent-2);
+	--chat-hover-color: var(--indigo-accent-1);
+	--chat-light-color: var(--indigo-lighten-3);
+	--chat-on-color: var(--white);
+
+	/* transfer colors */
+	--transfer-color: var(--indigo-darken-1);
+	--transfer-hover-color: var(--indigo-lighten-1);
+	--transfer-light-color: var(--indigo-lighten-4);
+	--transfer-on-color: var(--white);
+
+	/* primary colors */
+	--primary-color: var(--amber-darken-2);
+	--primary-hover-color: var(--amber-darken-1);
+	--primary-light-color: var(--amber-darken-4);
+	--primary-on-color: var(--black);
+
+	/* secondary colors */
+	--secondary-on-color: var(--grey-lighten-4);
+
+	/* email colors */
+	--email-color: var(--blue-darken-3);
+	--email-hover-color: var(--blue-darken-2);
+	--email-light-color: var(--blue-lighten-1);
+	--email-on-color: var(--white);
+
+	/* accent colors */
+	--accent-color: var(--purple-lighten-1);
+	--sub-accent-color: var(--indigo-darken-3);
+
+	/* typography colors */
+	--text-main-color: var(--grey-lighten-3);
+	--text-disabled-color: var(--grey-darken-1);
+	--text-error-color: var(--error-color);
+	--text-success-color: var(--success-color);
+	--text-link-color: var(--info-color);
+	/* typography on colors */
+	--text-on-brand-color: var(--white);
+}