2023-07-23 20:21:43 -04:00
|
|
|
/* Tokyo night color palette */
|
|
|
|
|
:root {
|
|
|
|
|
/* Dark Theme */
|
2023-08-03 21:38:29 -04:00
|
|
|
--tn-dark--01: #f7768e;
|
|
|
|
|
--tn-dark--02: #ff9e64;
|
|
|
|
|
--tn-dark--03: #e0af68;
|
|
|
|
|
--tn-dark--04: #9ece6a;
|
|
|
|
|
--tn-dark--05: #73daca;
|
|
|
|
|
--tn-dark--06: #b4f9f8;
|
|
|
|
|
--tn-dark--07: #2ac3de;
|
|
|
|
|
--tn-dark--08: #7dcfff;
|
|
|
|
|
--tn-dark--09: #7aa2f7;
|
|
|
|
|
--tn-dark--10: #bb9af7;
|
|
|
|
|
--tn-dark--11: #c0caf5;
|
|
|
|
|
--tn-dark--12: #a9b1d6;
|
|
|
|
|
--tn-dark--13: #9aa5ce;
|
|
|
|
|
--tn-dark--14: #cfc9c2;
|
|
|
|
|
--tn-dark--15: #565f89;
|
|
|
|
|
--tn-dark--16: #414868;
|
|
|
|
|
--tn-dark--17: #24283b;
|
|
|
|
|
--tn-dark--18: #1a1b26;
|
2023-08-04 17:31:53 -04:00
|
|
|
--tn-dark--filter-01: invert(67%) sepia(81%) saturate(2461%) hue-rotate(306deg) brightness(102%) contrast(94%);
|
|
|
|
|
--tn-dark--filter-02: invert(89%) sepia(27%) saturate(6632%) hue-rotate(317deg) brightness(107%) contrast(101%);
|
|
|
|
|
--tn-dark--filter-03: invert(75%) sepia(29%) saturate(664%) hue-rotate(353deg) brightness(93%) contrast(88%);
|
|
|
|
|
--tn-dark--filter-04: invert(84%) sepia(24%) saturate(802%) hue-rotate(38deg) brightness(91%) contrast(85%);
|
|
|
|
|
--tn-dark--filter-05: invert(78%) sepia(48%) saturate(333%) hue-rotate(118deg) brightness(93%) contrast(91%);
|
|
|
|
|
--tn-dark--filter-06: invert(86%) sepia(15%) saturate(513%) hue-rotate(130deg) brightness(101%) contrast(104%);
|
|
|
|
|
--tn-dark--filter-07: invert(65%) sepia(54%) saturate(670%) hue-rotate(143deg) brightness(95%) contrast(83%);
|
|
|
|
|
--tn-dark--filter-08: invert(71%) sepia(55%) saturate(771%) hue-rotate(177deg) brightness(106%) contrast(101%);
|
|
|
|
|
--tn-dark--filter-09: invert(61%) sepia(12%) saturate(1879%) hue-rotate(184deg) brightness(102%) contrast(94%);
|
|
|
|
|
--tn-dark--filter-10: invert(78%) sepia(35%) saturate(4827%) hue-rotate(207deg) brightness(101%) contrast(94%);
|
|
|
|
|
--tn-dark--filter-11: invert(79%) sepia(11%) saturate(1033%) hue-rotate(195deg) brightness(103%) contrast(92%);
|
|
|
|
|
--tn-dark--filter-12: invert(79%) sepia(20%) saturate(404%) hue-rotate(193deg) brightness(87%) contrast(92%);
|
|
|
|
|
--tn-dark--filter-13: invert(78%) sepia(9%) saturate(1774%) hue-rotate(194deg) brightness(87%) contrast(83%);
|
|
|
|
|
--tn-dark--filter-14: invert(88%) sepia(13%) saturate(136%) hue-rotate(352deg) brightness(94%) contrast(83%);
|
|
|
|
|
--tn-dark--filter-15: invert(38%) sepia(9%) saturate(1910%) hue-rotate(192deg) brightness(94%) contrast(87%);
|
|
|
|
|
--tn-dark--filter-16: invert(25%) sepia(12%) saturate(1580%) hue-rotate(192deg) brightness(99%) contrast(86%);
|
|
|
|
|
--tn-dark--filter-17: invert(12%) sepia(8%) saturate(2849%) hue-rotate(192deg) brightness(96%) contrast(89%);
|
|
|
|
|
--tn-dark--filter-18: invert(7%) sepia(27%) saturate(776%) hue-rotate(197deg) brightness(95%) contrast(92%);
|
2023-07-23 20:21:43 -04:00
|
|
|
--tn-dark--black-10: #6973a1;
|
|
|
|
|
--tn-dark--black-20: #5d6795;
|
|
|
|
|
--tn-dark--black-30: #545d86;
|
|
|
|
|
--tn-dark--black-40: #4a5277;
|
2023-08-03 21:38:29 -04:00
|
|
|
--tn-dark--black-50: var(--tn-dark--16);
|
2023-07-23 20:21:43 -04:00
|
|
|
--tn-dark--black-60: #3c4360;
|
|
|
|
|
--tn-dark--black-70: #383e59;
|
|
|
|
|
--tn-dark--black-80: #333851;
|
|
|
|
|
--tn-dark--black-90: #2e334a;
|
|
|
|
|
--tn-dark--white-10: #d3daf8;
|
|
|
|
|
--tn-dark--white-20: #ced6f7;
|
|
|
|
|
--tn-dark--white-30: #cad2f7;
|
|
|
|
|
--tn-dark--white-40: #c6cff6;
|
2023-08-03 21:38:29 -04:00
|
|
|
--tn-dark--white-50: var(--tn-dark--11);
|
2023-07-23 20:21:43 -04:00
|
|
|
--tn-dark--white-60: #a6b4f1;
|
|
|
|
|
--tn-dark--white-70: #8b9ded;
|
|
|
|
|
--tn-dark--white-80: #7086e9;
|
|
|
|
|
--tn-dark--white-90: #556fe4;
|
|
|
|
|
--tn-dark--black: var(--tn-dark--black-50);
|
|
|
|
|
--tn-dark--white: var(--tn-dark--white-50);
|
2023-08-03 21:38:29 -04:00
|
|
|
--tn-storm--background-10: #525a85;
|
|
|
|
|
--tn-storm--background-20: #464e73;
|
|
|
|
|
--tn-storm--background-30: #3b4161;
|
|
|
|
|
--tn-storm--background-40: #30354e;
|
|
|
|
|
--tn-storm--background-50: var(--tn-dark--17);
|
|
|
|
|
--tn-storm--background: var(--tn-storm--background-50);
|
|
|
|
|
--tn-night--background-10: #4E5173;
|
|
|
|
|
--tn-night--background-20: #414460;
|
|
|
|
|
--tn-night--background-30: #35374D;
|
|
|
|
|
--tn-night--background-40: #28293A;
|
|
|
|
|
--tn-night--background-50: var(--tn-dark--18);
|
|
|
|
|
--tn-night--background: var(--tn-night--background-50);
|
|
|
|
|
--tn-night--foreground: var(--tn-dark--12);
|
2023-07-23 20:21:43 -04:00
|
|
|
|
|
|
|
|
/* Light Theme */
|
2023-08-03 21:38:29 -04:00
|
|
|
--tn-light--01: #8c4351;
|
|
|
|
|
--tn-light--02: #965027;
|
|
|
|
|
--tn-light--03: #8f5e15;
|
|
|
|
|
--tn-light--04: #485e30;
|
|
|
|
|
--tn-light--05: #33635c;
|
|
|
|
|
--tn-light--06: #166775;
|
|
|
|
|
--tn-light--07: #0f4b6e;
|
|
|
|
|
--tn-light--08: #34548a;
|
|
|
|
|
--tn-light--09: #5a4a78;
|
|
|
|
|
--tn-light--10: #343b58;
|
|
|
|
|
--tn-light--11: #565a6e;
|
|
|
|
|
--tn-light--12: #634f30;
|
|
|
|
|
--tn-light--13: #0f0f14;
|
|
|
|
|
--tn-light--14: #9699a3;
|
|
|
|
|
--tn-light--15: #d5d6db;
|
2023-08-04 17:31:53 -04:00
|
|
|
--tn-light--filter-01: invert(30%) sepia(13%) saturate(2258%) hue-rotate(299deg) brightness(94%) contrast(83%);
|
|
|
|
|
--tn-light--filter-02: invert(33%) sepia(15%) saturate(2400%) hue-rotate(338deg) brightness(99%) contrast(86%);
|
|
|
|
|
--tn-light--filter-03: invert(34%) sepia(27%) saturate(2987%) hue-rotate(15deg) brightness(92%) contrast(84%);
|
|
|
|
|
--tn-light--filter-04: invert(32%) sepia(10%) saturate(2061%) hue-rotate(46deg) brightness(91%) contrast(83%);
|
|
|
|
|
--tn-light--filter-05: invert(32%) sepia(51%) saturate(367%) hue-rotate(122deg) brightness(91%) contrast(88%);
|
|
|
|
|
--tn-light--filter-06: invert(28%) sepia(100%) saturate(369%) hue-rotate(141deg) brightness(95%) contrast(92%);
|
|
|
|
|
--tn-light--filter-07: invert(17%) sepia(95%) saturate(1240%) hue-rotate(178deg) brightness(96%) contrast(88%);
|
|
|
|
|
--tn-light--filter-08: invert(27%) sepia(58%) saturate(655%) hue-rotate(179deg) brightness(93%) contrast(84%);
|
|
|
|
|
--tn-light--filter-09: invert(28%) sepia(11%) saturate(2096%) hue-rotate(219deg) brightness(96%) contrast(82%);
|
|
|
|
|
--tn-light--filter-10: invert(23%) sepia(11%) saturate(1791%) hue-rotate(191deg) brightness(88%) contrast(92%);
|
|
|
|
|
--tn-light--filter-11: invert(36%) sepia(7%) saturate(1186%) hue-rotate(193deg) brightness(92%) contrast(89%);
|
|
|
|
|
--tn-light--filter-12: invert(29%) sepia(53%) saturate(348%) hue-rotate(357deg) brightness(96%) contrast(94%);
|
|
|
|
|
--tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%);
|
|
|
|
|
--tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%);
|
|
|
|
|
--tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%);
|
2023-07-23 20:21:43 -04:00
|
|
|
--tn-light--background-50: #d5d6db;
|
|
|
|
|
--tn-light--background-60: #c5c6ce;
|
|
|
|
|
--tn-light--background-70: #b4b6bf;
|
|
|
|
|
--tn-light--background-80: #a4a6b1;
|
|
|
|
|
--tn-light--background-90: #9395a3;
|
|
|
|
|
--tn-light--background: var(--tn-light--background-50);
|
|
|
|
|
--tn-light--foreground: #343b58;
|
|
|
|
|
--tn-light--black-10: #4a4a62;
|
|
|
|
|
--tn-light--black-20: #3b3b4e;
|
|
|
|
|
--tn-light--black-30: #2c2c3b;
|
|
|
|
|
--tn-light--black-40: #1e1e28;
|
|
|
|
|
--tn-light--black-50: #0f0f14;
|
|
|
|
|
--tn-light--black-60: #0e0e13;
|
|
|
|
|
--tn-light--black-70: #0d0d11;
|
|
|
|
|
--tn-light--black-80: #0c0c10;
|
|
|
|
|
--tn-light--black-90: #0b0b0f;
|
|
|
|
|
--tn-light--white-10: #5a679a;
|
|
|
|
|
--tn-light--white-20: #505c89;
|
|
|
|
|
--tn-light--white-30: #475178;
|
|
|
|
|
--tn-light--white-40: #3d4568;
|
|
|
|
|
--tn-light--white-50: #343b58;
|
|
|
|
|
--tn-light--white-60: #2f3651;
|
|
|
|
|
--tn-light--white-70: #2c324a;
|
|
|
|
|
--tn-light--white-80: #282e44;
|
|
|
|
|
--tn-light--white-90: #242a3e;
|
|
|
|
|
--tn-light--black: var(--tn-dark--black-50);
|
|
|
|
|
--tn-light--white: var(--tn-dark--white-50);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* semantic color variables for this project */
|
|
|
|
|
:root {
|
2023-08-01 22:16:39 -04:00
|
|
|
--color-bg: var(--tn-night--background);
|
2023-08-01 22:10:31 -04:00
|
|
|
--color-fg: var(--tn-night--foreground);
|
2023-08-03 21:38:29 -04:00
|
|
|
--color-black: var(--tn-dark--16);
|
|
|
|
|
--color-white: var(--tn-dark--11);
|
|
|
|
|
--color-red: var(--tn-dark--01);
|
|
|
|
|
--color-green: var(--tn-dark--05);
|
|
|
|
|
--color-blue: var(--tn-dark--09);
|
|
|
|
|
--color-yellow: var(--tn-dark--03);
|
|
|
|
|
--color-cyan: var(--tn-dark--08);
|
|
|
|
|
--color-magenta: var(--tn-dark--10);
|
|
|
|
|
--color-links: var(--color-blue);
|
|
|
|
|
--color-error: var(--color-red);
|
|
|
|
|
--color-success: var(--color-green);
|
|
|
|
|
--color-warn: var(--color-yellow);
|
2023-08-01 22:10:31 -04:00
|
|
|
--color-bg--layer-01: var(--tn-storm--background-40);
|
|
|
|
|
--color-bg--layer-02: var(--tn-storm--background-30);
|
2023-08-03 21:38:29 -04:00
|
|
|
--color-headings: var(--color-cyan);
|
2023-08-03 22:37:20 -04:00
|
|
|
--color-table-stripe: var(--tn-night--background-40);
|
2023-08-04 17:31:53 -04:00
|
|
|
--filter-black: var(--tn-dark--filter-16);
|
|
|
|
|
--filter-white: var(--tn-dark--filter-11);
|
|
|
|
|
--filter-red: var(--tn-dark--filter-01);
|
|
|
|
|
--filter-green: var(--tn-dark--filter-05);
|
|
|
|
|
--filter-blue: var(--tn-dark--filter-09);
|
|
|
|
|
--filter-yellow: var(--tn-dark--filter-03);
|
|
|
|
|
--filter-cyan: var(--tn-dark--filter-08);
|
|
|
|
|
--filter-magenta: var(--tn-dark--filter-10);
|
2023-08-04 18:05:56 -04:00
|
|
|
--filter-fg: var(--tn-dark--filter-12);
|
2023-07-23 20:21:43 -04:00
|
|
|
}
|
|
|
|
|
|
2023-08-01 22:10:31 -04:00
|
|
|
@media (prefers-color-scheme: light) {
|
2023-07-23 20:21:43 -04:00
|
|
|
:root {
|
2023-08-01 22:10:31 -04:00
|
|
|
--color-bg: var(--tn-light--background);
|
|
|
|
|
--color-fg: var(--tn-light--foreground);
|
2023-08-04 17:31:53 -04:00
|
|
|
--color-black: var(--tn-light--13);
|
|
|
|
|
--color-white: var(--tn-light--10);
|
2023-08-03 21:38:29 -04:00
|
|
|
--color-red: var(--tn-light--01);
|
|
|
|
|
--color-green: var(--tn-light--05);
|
|
|
|
|
--color-blue: var(--tn-light--08);
|
|
|
|
|
--color-yellow: var(--tn-light--03);
|
|
|
|
|
--color-cyan: var(--tn-light--07);
|
|
|
|
|
--color-magenta: var(--tn-light--09);
|
|
|
|
|
--color-links: var(--color-blue);
|
|
|
|
|
--color-error: var(--color-red);
|
|
|
|
|
--color-success: var(--color-green);
|
|
|
|
|
--color-warn: var(--color-yellow);
|
2023-08-01 22:10:31 -04:00
|
|
|
--color-bg--layer-01: var(--tn-light--background-60);
|
|
|
|
|
--color-bg--layer-02: var(--tn-light--background-70);
|
2023-08-03 21:38:29 -04:00
|
|
|
--color-headings: var(--color-cyan);
|
2023-08-03 22:37:20 -04:00
|
|
|
--color-table-stripe: var(--tn-light--background-60);
|
2023-08-04 17:31:53 -04:00
|
|
|
--filter-black: var(--tn-light--filter-13);
|
|
|
|
|
--filter-white: var(--tn-light--filter-10);
|
|
|
|
|
--filter-red: var(--tn-light--filter-01);
|
|
|
|
|
--filter-green: var(--tn-light--filter-05);
|
|
|
|
|
--filter-blue: var(--tn-light--filter-08);
|
|
|
|
|
--filter-yellow: var(--tn-light--filter-03);
|
|
|
|
|
--filter-cyan: var(--tn-light--filter-07);
|
|
|
|
|
--filter-magenta: var(--tn-light--filter-09);
|
2023-08-04 18:05:56 -04:00
|
|
|
--filter-fg: var(--tn-light--filter-10);
|
2023-07-23 20:21:43 -04:00
|
|
|
}
|
|
|
|
|
}
|
