124 lines
4.1 KiB
SCSS
124 lines
4.1 KiB
SCSS
|
/* Tokyo night color palette */
|
||
|
|
:root {
|
||
|
|
/* Dark Theme */
|
||
|
|
--tn-storm--background-10: #525a85;
|
||
|
|
--tn-storm--background-20: #464e73;
|
||
|
|
--tn-storm--background-30: #3b4161;
|
||
|
|
--tn-storm--background-40: #30354e;
|
||
|
|
--tn-storm--background-50: #24283b;
|
||
|
|
--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: #1a1b26;
|
||
|
|
--tn-night--background: var(--tn-night--background-50);
|
||
|
|
--tn-night--foreground: #a9b1d6;
|
||
|
|
--tn-dark--black-10: #6973a1;
|
||
|
|
--tn-dark--black-20: #5d6795;
|
||
|
|
--tn-dark--black-30: #545d86;
|
||
|
|
--tn-dark--black-40: #4a5277;
|
||
|
|
--tn-dark--black-50: #414868;
|
||
|
|
--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;
|
||
|
|
--tn-dark--white-50: #c0caf5;
|
||
|
|
--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);
|
||
|
|
--tn-dark--red: #f7768e;
|
||
|
|
--tn-dark--yellow: #e0af68;
|
||
|
|
--tn-dark--green: #9ece6a;
|
||
|
|
--tn-dark--cyan: #7dcfff;
|
||
|
|
--tn-dark--blue: #7aa2f7;
|
||
|
|
--tn-dark--magenta: #bb9af7;
|
||
|
|
--tn-dark--brown: #cfc9c2;
|
||
|
|
|
||
|
|
/* Light Theme */
|
||
|
|
--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);
|
||
|
|
--tn-light--red: #8c4351;
|
||
|
|
--tn-light--yellow: #8f5e15;
|
||
|
|
--tn-light--green: #33635c;
|
||
|
|
--tn-light--cyan: #0f4b6e;
|
||
|
|
--tn-light--blue: #34548a;
|
||
|
|
--tn-light--magenta: #5a4a78;
|
||
|
|
--tn-light--brown: #634f30;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* semantic color variables for this project */
|
||
|
|
:root {
|
||
|
|
--color-bg: var(--tn-light--background);
|
||
|
|
--color-fg: var(--tn-light--foreground);
|
||
|
|
--color-black: var(--tn-light--black);
|
||
|
|
--color-white: var(--tn-light--white);
|
||
|
|
--color-red: var(--tn-light--red);
|
||
|
|
--color-green: var(--tn-light--green);
|
||
|
|
--color-blue: var(--tn-light--blue);
|
||
|
|
--color-yellow: var(--tn-light--yellow);
|
||
|
|
--color-cyan: var(--tn-light--cyan);
|
||
|
|
--color-magenta: var(--tn-light--magenta);
|
||
|
|
--color-brown: var(--tn-light--brown);
|
||
|
|
--color-links: var(--tn-light-cyan);
|
||
|
|
--color-error: var(--tn-light-red);
|
||
|
|
--color-success: var(--tn-light-green);
|
||
|
|
--color-warn: var(--tn-light-yellow);
|
||
|
|
--color-bg--layer-01: var(--tn-light--background-60);
|
||
|
|
--color-bg--layer-02: var(--tn-light--background-70);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
:root {
|
||
|
|
--color-bg: var(--tn-storm--background);
|
||
|
|
--color-fg: var(--tn-night--foreground);
|
||
|
|
--color-black: var(--tn-dark--black);
|
||
|
|
--color-white: var(--tn-dark--white);
|
||
|
|
--color-red: var(--tn-dark--red);
|
||
|
|
--color-green: var(--tn-dark--green);
|
||
|
|
--color-blue: var(--tn-dark--blue);
|
||
|
|
--color-yellow: var(--tn-dark--yellow);
|
||
|
|
--color-cyan: var(--tn-dark--cyan);
|
||
|
|
--color-magenta: var(--tn-dark--magenta);
|
||
|
|
--color-brown: var(--tn-dark--brown);
|
||
|
|
--color-links: var(--tn-dark-cyan);
|
||
|
|
--color-error: var(--tn-dark-red);
|
||
|
|
--color-success: var(--tn-dark-green);
|
||
|
|
--color-warn: var(--tn-dark-yellow);
|
||
|
|
--color-bg--layer-01: var(--tn-storm--background-40);
|
||
|
|
--color-bg--layer-02: var(--tn-storm--background-30);
|
||
|
|
}
|
||
|
|
}
|