variables.css 12.57 KiB
@layer base {
:root {
--clr-light: var(--clr-white);
--clr-dark: var(--clr-neutral-100);
--clr-pri--50: var(--clr-cyan-10);
--clr-pri--100: var(--clr-cyan-20);
--clr-pri--200: var(--clr-cyan-30);
--clr-pri--300: var(--clr-cyan-40);
--clr-pri--400: var(--clr-cyan-50);
--clr-pri--500: var(--clr-cyan-60);
--clr-pri--600: var(--clr-cyan-70);
--clr-pri--700: var(--clr-cyan-80);
--clr-pri--800: var(--clr-cyan-90);
--clr-pri--900: var(--clr-cyan-95);
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-white);
--clr-sec--50: var(--clr-neutral-5);
--clr-sec--100: var(--clr-neutral-10);
--clr-sec--200: var(--clr-neutral-20);
--clr-sec--300: var(--clr-neutral-30);
--clr-sec--400: var(--clr-neutral-40);
--clr-sec--500: var(--clr-neutral-50);
--clr-sec--600: var(--clr-neutral-60);
--clr-sec--700: var(--clr-neutral-70);
--clr-sec--800: var(--clr-neutral-80);
--clr-sec--900: var(--clr-neutral-90);
--clr-sec--950: var(--clr-neutral-95);
--clr-sec--1000: var(--clr-neutral-100);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-10);
--clr-acc--200: var(--clr-orange-20);
--clr-acc--300: var(--clr-orange-30);
--clr-acc--400: var(--clr-orange-40);
--clr-acc--500: var(--clr-orange-50);
--clr-acc--600: var(--clr-orange-60);
--clr-acc--700: var(--clr-orange-70);
--clr-acc--800: var(--clr-orange-80);
--clr-acc: var(--clr-acc--500);
--clr-info--100: var(--clr-teal-10);
--clr-info--200: var(--clr-teal-20);
--clr-info--300: var(--clr-teal-30);
--clr-info--400: var(--clr-teal-40);
--clr-info--500: var(--clr-teal-50);
--clr-info--600: var(--clr-teal-60);
--clr-info--700: var(--clr-teal-70);
--clr-info--800: var(--clr-teal-80);
--clr-info: var(--clr-info--500);
--clr-succ--100: var(--clr-green-10);
--clr-succ--200: var(--clr-green-20);
--clr-succ--300: var(--clr-green-30);
--clr-succ--400: var(--clr-green-40);
--clr-succ--500: var(--clr-green-50);
--clr-succ--600: var(--clr-green-60);
--clr-succ--700: var(--clr-green-70);
--clr-succ--800: var(--clr-green-80);
--clr-succ: var(--clr-succ--600);
--clr-warn--100: var(--clr-yellow-5);
--clr-warn--200: var(--clr-yellow-10);
--clr-warn--300: var(--clr-yellow-20);
--clr-warn--400: var(--clr-yellow-30);
--clr-warn--500: var(--clr-yellow-40);
--clr-warn--600: var(--clr-yellow-50);
--clr-warn--700: var(--clr-yellow-60);
--clr-warn--800: var(--clr-yellow-70); --clr-warn: var(--clr-warn--500);
--clr-dang--100: var(--clr-red-20);
--clr-dang--200: var(--clr-red-30);
--clr-dang--300: var(--clr-red-40);
--clr-dang--400: var(--clr-red-50);
--clr-dang--500: var(--clr-red-60);
--clr-dang--600: var(--clr-red-70);
--clr-dang--700: var(--clr-red-80);
--clr-dang--800: var(--clr-red-90);
--clr-dang: var(--clr-dang--600);
--focus-shadow-clr: var(--clr-neutral-95);
/* Graph data colors */
--clr-cat-01: var(--clr-cyan-70);
--clr-cat-02: var(--clr-orange-50);
--clr-cat-03: var(--clr-green-70);
--clr-cat-04: var(--clr-magenta-70);
--clr-cat-05: var(--clr-red-70);
--clr-cat-06: var(--clr-pri);
--clr-cat-07: var(--clr-sec);
--clr-cat-08: var(--clr-acc);
--clr-cat-09: var(--clr-succ);
--clr-cat-10: var(--clr-dang);
--clr-cat-11: var(--clr-neutral-50);
--clr-cat-12: var(--clr-neutral-50);
--clr-cat-13: var(--clr-neutral-50);
--clr-cat-14: var(--clr-neutral-50);
/* Colors pills */
--clr-node: var(--clr-acc);
--clr-relation: var(--clr-pri);
--clr-filter: var(--clr-acc--800);
}
body.light-mode {
--clr-light: var(--clr-white);
--clr-dark: var(--clr-neutral-100);
--clr-pri--50: var(--clr-cyan-10);
--clr-pri--100: var(--clr-cyan-20);
--clr-pri--200: var(--clr-cyan-30);
--clr-pri--300: var(--clr-cyan-40);
--clr-pri--400: var(--clr-cyan-50);
--clr-pri--500: var(--clr-cyan-60);
--clr-pri--600: var(--clr-cyan-70);
--clr-pri--700: var(--clr-cyan-80);
--clr-pri--800: var(--clr-cyan-90);
--clr-pri--900: var(--clr-cyan-95);
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-white);
--clr-sec--50: var(--clr-neutral-5);
--clr-sec--100: var(--clr-neutral-10);
--clr-sec--200: var(--clr-neutral-20);
--clr-sec--300: var(--clr-neutral-30);
--clr-sec--400: var(--clr-neutral-40);
--clr-sec--500: var(--clr-neutral-50);
--clr-sec--600: var(--clr-neutral-60);
--clr-sec--700: var(--clr-neutral-70);
--clr-sec--800: var(--clr-neutral-80);
--clr-sec--900: var(--clr-neutral-90);
--clr-sec--950: var(--clr-neutral-95);
--clr-sec--1000: var(--clr-neutral-100);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-10);
--clr-acc--200: var(--clr-orange-20);
--clr-acc--300: var(--clr-orange-30); --clr-acc--400: var(--clr-orange-40);
--clr-acc--500: var(--clr-orange-50);
--clr-acc--600: var(--clr-orange-60);
--clr-acc--700: var(--clr-orange-70);
--clr-acc--800: var(--clr-orange-80);
--clr-acc: var(--clr-acc--500);
--clr-info--100: var(--clr-teal-10);
--clr-info--200: var(--clr-teal-20);
--clr-info--300: var(--clr-teal-30);
--clr-info--400: var(--clr-teal-40);
--clr-info--500: var(--clr-teal-50);
--clr-info--600: var(--clr-teal-60);
--clr-info--700: var(--clr-teal-70);
--clr-info--800: var(--clr-teal-80);
--clr-info: var(--clr-info--500);
--clr-succ--100: var(--clr-green-10);
--clr-succ--200: var(--clr-green-20);
--clr-succ--300: var(--clr-green-30);
--clr-succ--400: var(--clr-green-40);
--clr-succ--500: var(--clr-green-50);
--clr-succ--600: var(--clr-green-60);
--clr-succ--700: var(--clr-green-70);
--clr-succ--800: var(--clr-green-80);
--clr-succ: var(--clr-succ--600);
--clr-warn--100: var(--clr-yellow-5);
--clr-warn--200: var(--clr-yellow-10);
--clr-warn--300: var(--clr-yellow-20);
--clr-warn--400: var(--clr-yellow-30);
--clr-warn--500: var(--clr-yellow-40);
--clr-warn--600: var(--clr-yellow-50);
--clr-warn--700: var(--clr-yellow-60);
--clr-warn--800: var(--clr-yellow-70);
--clr-warn: var(--clr-warn--500);
--clr-dang--100: var(--clr-red-20);
--clr-dang--200: var(--clr-red-30);
--clr-dang--300: var(--clr-red-40);
--clr-dang--400: var(--clr-red-50);
--clr-dang--500: var(--clr-red-60);
--clr-dang--600: var(--clr-red-70);
--clr-dang--700: var(--clr-red-80);
--clr-dang--800: var(--clr-red-90);
--clr-dang: var(--clr-dang--600);
}
body.dark-mode {
color-scheme: dark;
--clr-light: var(--clr-neutral-100);
--clr-dark: var(--clr-white);
--clr-pri--50: var(--clr-cyan-95);
--clr-pri--100: var(--clr-cyan-90);
--clr-pri--200: var(--clr-cyan-80);
--clr-pri--300: var(--clr-cyan-70);
--clr-pri--400: var(--clr-cyan-60);
--clr-pri--500: var(--clr-cyan-50);
--clr-pri--600: var(--clr-cyan-40);
--clr-pri--700: var(--clr-cyan-30);
--clr-pri--800: var(--clr-cyan-20);
--clr-pri--900: var(--clr-cyan-10);
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-neutral-100);
--clr-sec--50: var(--clr-neutral-95);
--clr-sec--100: var(--clr-neutral-90);
--clr-sec--200: var(--clr-neutral-80);
--clr-sec--300: var(--clr-neutral-70); --clr-sec--400: var(--clr-neutral-60);
--clr-sec--500: var(--clr-neutral-50);
--clr-sec--600: var(--clr-neutral-40);
--clr-sec--700: var(--clr-neutral-30);
--clr-sec--800: var(--clr-neutral-20);
--clr-sec--900: var(--clr-neutral-10);
--clr-sec--950: var(--clr-neutral-5);
--clr-sec--1000: var(--clr-white);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-80);
--clr-acc--200: var(--clr-orange-70);
--clr-acc--300: var(--clr-orange-60);
--clr-acc--400: var(--clr-orange-50);
--clr-acc--500: var(--clr-orange-40);
--clr-acc--600: var(--clr-orange-30);
--clr-acc--700: var(--clr-orange-20);
--clr-acc--800: var(--clr-orange-10);
--clr-acc: var(--clr-acc--500);
--clr-info--100: var(--clr-teal-80);
--clr-info--200: var(--clr-teal-70);
--clr-info--300: var(--clr-teal-60);
--clr-info--400: var(--clr-teal-50);
--clr-info--500: var(--clr-teal-40);
--clr-info--600: var(--clr-teal-30);
--clr-info--700: var(--clr-teal-20);
--clr-info--800: var(--clr-teal-10);
--clr-info: var(--clr-info--500);
--clr-succ--100: var(--clr-green-80);
--clr-succ--200: var(--clr-green-70);
--clr-succ--300: var(--clr-green-60);
--clr-succ--400: var(--clr-green-50);
--clr-succ--500: var(--clr-green-40);
--clr-succ--600: var(--clr-green-30);
--clr-succ--700: var(--clr-green-20);
--clr-succ--800: var(--clr-green-10);
--clr-succ: var(--clr-succ--600);
--clr-warn--100: var(--clr-yellow-70);
--clr-warn--200: var(--clr-yellow-60);
--clr-warn--300: var(--clr-yellow-50);
--clr-warn--400: var(--clr-yellow-40);
--clr-warn--500: var(--clr-yellow-30);
--clr-warn--600: var(--clr-yellow-20);
--clr-warn--700: var(--clr-yellow-10);
--clr-warn--800: var(--clr-yellow-5);
--clr-warn: var(--clr-warn--500);
--clr-dang--100: var(--clr-red-90);
--clr-dang--200: var(--clr-red-80);
--clr-dang--300: var(--clr-red-70);
--clr-dang--400: var(--clr-red-60);
--clr-dang--500: var(--clr-red-50);
--clr-dang--600: var(--clr-red-40);
--clr-dang--700: var(--clr-red-30);
--clr-dang--800: var(--clr-red-20);
--clr-dang: var(--clr-dang--600);
}
@media (prefers-color-scheme: dark) {
:root {
--clr-light: var(--clr-neutral-100);
--clr-dark: var(--clr-white);
--clr-pri--50: var(--clr-cyan-95);
--clr-pri--100: var(--clr-cyan-90);
--clr-pri--200: var(--clr-cyan-80);
--clr-pri--300: var(--clr-cyan-70); --clr-pri--400: var(--clr-cyan-60);
--clr-pri--500: var(--clr-cyan-50);
--clr-pri--600: var(--clr-cyan-40);
--clr-pri--700: var(--clr-cyan-30);
--clr-pri--800: var(--clr-cyan-20);
--clr-pri--900: var(--clr-cyan-10);
--clr-pri: var(--clr-pri--600);
--clr-sec--0: var(--clr-neutral-100);
--clr-sec--50: var(--clr-neutral-95);
--clr-sec--100: var(--clr-neutral-90);
--clr-sec--200: var(--clr-neutral-80);
--clr-sec--300: var(--clr-neutral-70);
--clr-sec--400: var(--clr-neutral-60);
--clr-sec--500: var(--clr-neutral-50);
--clr-sec--600: var(--clr-neutral-40);
--clr-sec--700: var(--clr-neutral-30);
--clr-sec--800: var(--clr-neutral-20);
--clr-sec--900: var(--clr-neutral-10);
--clr-sec--950: var(--clr-neutral-5);
--clr-sec--1000: var(--clr-white);
--clr-sec: var(--clr-sec--700);
--clr-acc--100: var(--clr-orange-80);
--clr-acc--200: var(--clr-orange-70);
--clr-acc--300: var(--clr-orange-60);
--clr-acc--400: var(--clr-orange-50);
--clr-acc--500: var(--clr-orange-40);
--clr-acc--600: var(--clr-orange-30);
--clr-acc--700: var(--clr-orange-20);
--clr-acc--800: var(--clr-orange-10);
--clr-acc: var(--clr-acc--500);
--clr-info--100: var(--clr-teal-80);
--clr-info--200: var(--clr-teal-70);
--clr-info--300: var(--clr-teal-60);
--clr-info--400: var(--clr-teal-50);
--clr-info--500: var(--clr-teal-40);
--clr-info--600: var(--clr-teal-30);
--clr-info--700: var(--clr-teal-20);
--clr-info--800: var(--clr-teal-10);
--clr-info: var(--clr-info--500);
--clr-succ--100: var(--clr-green-80);
--clr-succ--200: var(--clr-green-70);
--clr-succ--300: var(--clr-green-60);
--clr-succ--400: var(--clr-green-50);
--clr-succ--500: var(--clr-green-40);
--clr-succ--600: var(--clr-green-30);
--clr-succ--700: var(--clr-green-20);
--clr-succ--800: var(--clr-green-10);
--clr-succ: var(--clr-succ--600);
--clr-warn--100: var(--clr-yellow-70);
--clr-warn--200: var(--clr-yellow-60);
--clr-warn--300: var(--clr-yellow-50);
--clr-warn--400: var(--clr-yellow-40);
--clr-warn--500: var(--clr-yellow-30);
--clr-warn--600: var(--clr-yellow-20);
--clr-warn--700: var(--clr-yellow-10);
--clr-warn--800: var(--clr-yellow-5);
--clr-warn: var(--clr-warn--500);
--clr-dang--100: var(--clr-red-90);
--clr-dang--200: var(--clr-red-80);
--clr-dang--300: var(--clr-red-70);
--clr-dang--400: var(--clr-red-60);
--clr-dang--500: var(--clr-red-50);
--clr-dang--600: var(--clr-red-40);
--clr-dang--700: var(--clr-red-30); --clr-dang--800: var(--clr-red-20);
--clr-dang: var(--clr-dang--600);
}
}
}