-
Notifications
You must be signed in to change notification settings - Fork 12
/
app.css
26 lines (21 loc) · 1.25 KB
/
app.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* Tailwind CSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
/* Extends Tailwind color palette with custom colors
https://tailwindcss.com/docs/customizing-colors#naming-your-colors
Defining these colors as straight HSL instead of full color
strings allows them to still utilize Tailwind's opacity utilities
https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo */
:root {
/* brand color variants */
--color-brand-lightest: 48, 100%, 96%; /* currently matches Tailwind 'yellow 50', #FFFBEB */
--color-brand-light: 46, 97%, 65%; /* currently matches Tailwind 'yellow 300', #FCD34D */
--color-brand-default: 43, 96%, 56%; /* currently matches Tailwind 'yellow 400', #FBBF24 */
--color-brand-dark: 32, 95%, 44%; /* currently matches Tailwind 'yellow 600', #D97706 */
/* action color variants */
--color-action-default: 243, 75%, 59%; /* currently matches Tailwind 'indigo 600', #4F46E5 */
--color-action-hover: 239, 84%, 67%; /* currently adjusted from Tailwind 'indigo 500', #6366F1 */
--color-action-focus: 245, 58%, 51%; /* currently matches Tailwind 'indigo 700', #4338CA */
--color-action-highlight: 226, 100%, 97%; /* currently adjusted from Tailwind 'indigo 50', #EEF2FF */
}