106 lines
3.0 KiB
CSS
106 lines
3.0 KiB
CSS
@import 'tailwindcss';
|
|
@import 'tw-animate-css';
|
|
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@theme inline {
|
|
--spacing-body: calc(100vh - 180px);
|
|
|
|
--color-accent: var(--sky);
|
|
|
|
--color-rosewater: var(--rosewater);
|
|
--color-flamingo: var(--flamingo);
|
|
--color-pink: var(--pink);
|
|
--color-mauve: var(--mauve);
|
|
--color-red: var(--red);
|
|
--color-maroon: var(--maroon);
|
|
--color-peach: var(--peach);
|
|
--color-yellow: var(--yellow);
|
|
--color-green: var(--green);
|
|
--color-teal: var(--teal);
|
|
--color-sky: var(--sky);
|
|
--color-sapphire: var(--sapphire);
|
|
--color-blue: var(--blue);
|
|
--color-lavender: var(--lavender);
|
|
--color-text: var(--text);
|
|
--color-subtext-1: var(--subtext-1);
|
|
--color-subtext: var(--subtext);
|
|
--color-overlay-2: var(--overlay-2);
|
|
--color-overlay-1: var(--overlay-1);
|
|
--color-overlay: var(--overlay);
|
|
--color-surface-2: var(--surface-2);
|
|
--color-surface-1: var(--surface-1);
|
|
--color-surface: var(--surface);
|
|
--color-based: var(--based);
|
|
--color-mantle: var(--mantle);
|
|
--color-crust: var(--crust);
|
|
}
|
|
|
|
@layer base {
|
|
:root {
|
|
--rosewater: hsl(11deg, 59%, 67%);
|
|
--flamingo: hsl(0deg, 60%, 67%);
|
|
--pink: hsl(316deg, 73%, 69%);
|
|
--mauve: hsl(266deg, 85%, 58%);
|
|
--red: hsl(347deg, 87%, 44%);
|
|
--maroon: hsl(355deg, 76%, 59%);
|
|
--peach: hsl(22deg, 99%, 52%);
|
|
--yellow: hsl(35deg, 77%, 49%);
|
|
--green: hsl(109deg, 58%, 40%);
|
|
--teal: hsl(183deg, 74%, 35%);
|
|
--sky: hsl(197deg, 97%, 46%);
|
|
--sapphire: hsl(189deg, 70%, 42%);
|
|
--blue: hsl(220deg, 91%, 54%);
|
|
--lavender: hsl(231deg, 97%, 72%);
|
|
--text: hsl(234deg, 16%, 35%);
|
|
--subtext-1: hsl(233deg, 13%, 41%);
|
|
--subtext: hsl(233deg, 10%, 47%);
|
|
--overlay-2: hsl(232deg, 10%, 53%);
|
|
--overlay-1: hsl(231deg, 10%, 59%);
|
|
--overlay: hsl(228deg, 11%, 65%);
|
|
--surface-2: hsl(227deg, 12%, 71%);
|
|
--surface-1: hsl(225deg, 14%, 77%);
|
|
--surface: hsl(223deg, 16%, 83%);
|
|
--based: hsl(220deg, 23%, 95%);
|
|
--mantle: hsl(220deg, 22%, 92%);
|
|
--crust: hsl(220deg, 21%, 89%);
|
|
}
|
|
|
|
.dark {
|
|
--rosewater: hsl(10deg, 56%, 91%);
|
|
--flamingo: hsl(0deg, 59%, 88%);
|
|
--pink: hsl(316deg, 72%, 86%);
|
|
--mauve: hsl(267deg, 84%, 81%);
|
|
--red: hsl(343deg, 81%, 75%);
|
|
--maroon: hsl(350deg, 65%, 77%);
|
|
--peach: hsl(23deg, 92%, 75%);
|
|
--yellow: hsl(41deg, 86%, 83%);
|
|
--green: hsl(115deg, 54%, 76%);
|
|
--teal: hsl(170deg, 57%, 73%);
|
|
--sky: hsl(189deg, 71%, 73%);
|
|
--sapphire: hsl(199deg, 76%, 69%);
|
|
--blue: hsl(217deg, 92%, 76%);
|
|
--lavender: hsl(232deg, 97%, 85%);
|
|
--text: hsl(226deg, 64%, 88%);
|
|
--subtext-1: hsl(227deg, 35%, 80%);
|
|
--subtext: hsl(228deg, 24%, 72%);
|
|
--overlay-2: hsl(228deg, 17%, 64%);
|
|
--overlay-1: hsl(230deg, 13%, 55%);
|
|
--overlay: hsl(231deg, 11%, 47%);
|
|
--surface-2: hsl(233deg, 12%, 39%);
|
|
--surface-1: hsl(234deg, 13%, 31%);
|
|
--surface: hsl(237deg, 16%, 23%);
|
|
--based: hsl(240deg, 21%, 15%);
|
|
--mantle: hsl(240deg, 21%, 12%);
|
|
--crust: hsl(240deg, 23%, 9%);
|
|
}
|
|
}
|
|
|
|
/*
|
|
-- Cheat sheet --
|
|
|
|
Focus Outline: blue
|
|
Border: surface-1
|
|
Hover: bump color by 2 (eg crust -> based), if accent color drop opacity (eg blue -> blue/90)
|
|
*/
|