101 lines
3.4 KiB
CSS
101 lines
3.4 KiB
CSS
/**
|
|
* Module: Define CSS variables.
|
|
*/
|
|
|
|
/* prettier-ignore */
|
|
:root {
|
|
--font-ui: 'Alegreya Sans SC', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
|
|
--font-main: 'Rubik', 'Noto Color Emoji', 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Segoe UI Symbol', sans-serif;
|
|
--font-math: 'Fira Code', 'Noto Sans Math', 'Noto Sans Symbols 2', 'Rubik', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
|
|
|
|
/* Numeric parameters */
|
|
--font-size-base: 16px;
|
|
--font-size-sm: 12px;
|
|
--line-height: 1.5;
|
|
|
|
--text-max-width: 75ch;
|
|
--scroll-padding: 3rem;
|
|
}
|
|
|
|
/* Light Theme */
|
|
/* prettier-ignore */
|
|
:not(.dark):root {
|
|
--clr-prim-0: oklch(100% 0 0deg);
|
|
--clr-prim-100: oklch(098% 0 0deg);
|
|
--clr-prim-200: oklch(095% 0 0deg);
|
|
--clr-prim-400: oklch(085% 0 0deg);
|
|
--clr-prim-600: oklch(070% 0 0deg);
|
|
--clr-prim-999: oklch(000% 0 0deg);
|
|
|
|
--clr-sec-0: oklch(100% 0 0deg);
|
|
--clr-sec-100: oklch(095% 0.025 262deg);
|
|
--clr-sec-200: oklch(090% 0.050 262deg);
|
|
--clr-sec-400: oklch(073% 0.140 262deg);
|
|
--clr-sec-600: oklch(060% 0.230 262deg);
|
|
|
|
--clr-warn-600: oklch(060% 0.250 27deg);
|
|
--clr-ok-600: oklch(060% 0.250 138deg);
|
|
|
|
--clr-select-node: oklch(080% 0.250 180deg);
|
|
|
|
/* Highlight accents */
|
|
--acc-bg-red: oklch(083% 0.120 27deg);
|
|
--acc-bg-green: oklch(085% 0.150 138deg);
|
|
--acc-bg-blue: oklch(085% 0.150 262deg);
|
|
--acc-bg-purple: oklch(085% 0.200 295deg);
|
|
--acc-bg-teal: oklch(082% 0.180 210deg);
|
|
--acc-bg-orange: oklch(085% 0.130 62deg);
|
|
|
|
--acc-bg-green25: oklch(097% 0.080 138deg);
|
|
--acc-bg-green50: oklch(092% 0.150 138deg);
|
|
--acc-bg-orange50: oklch(090% 0.044 62deg);
|
|
|
|
--acc-fg-red: oklch(060% 0.220 27deg);
|
|
--acc-fg-green: oklch(060% 0.220 138deg);
|
|
--acc-fg-blue: oklch(060% 0.230 262deg);
|
|
--acc-fg-purple: oklch(060% 0.250 295deg);
|
|
--acc-fg-teal: oklch(060% 0.140 210deg);
|
|
--acc-fg-orange: oklch(060% 0.150 62deg);
|
|
}
|
|
|
|
/* Dark Theme */
|
|
/* prettier-ignore */
|
|
.dark:root {
|
|
--clr-prim-0: oklch(015% 0 0deg);
|
|
--clr-prim-100: oklch(022% 0 0deg);
|
|
--clr-prim-200: oklch(030% 0 0deg);
|
|
--clr-prim-400: oklch(050% 0 0deg);
|
|
--clr-prim-600: oklch(065% 0 0deg);
|
|
--clr-prim-999: oklch(095% 0 0deg);
|
|
|
|
--clr-sec-0: oklch(100% 0 0deg);
|
|
--clr-sec-100: oklch(030% 0.075 70deg);
|
|
--clr-sec-200: oklch(040% 0.150 295deg);
|
|
--clr-sec-400: oklch(055% 0.200 295deg);
|
|
--clr-sec-600: oklch(070% 0.170 295deg);
|
|
|
|
--clr-warn-600: oklch(065% 0.200 27deg);
|
|
--clr-ok-600: oklch(065% 0.200 138deg);
|
|
|
|
--clr-select-node: oklch(070% 0.160 180deg);
|
|
|
|
/* Highlight accents */
|
|
--acc-bg-red: oklch(050% 0.150 27deg);
|
|
--acc-bg-green: oklch(050% 0.150 138deg);
|
|
--acc-bg-blue: oklch(050% 0.150 262deg);
|
|
--acc-bg-purple: oklch(050% 0.200 295deg);
|
|
--acc-bg-teal: oklch(050% 0.250 210deg);
|
|
--acc-bg-orange: oklch(050% 0.100 62deg);
|
|
|
|
--acc-bg-green25: oklch(028% 0.100 138deg);
|
|
--acc-bg-green50: oklch(038% 0.200 138deg);
|
|
--acc-bg-orange50: oklch(038% 0.075 62deg);
|
|
|
|
--acc-fg-red: oklch(073% 0.200 27deg);
|
|
--acc-fg-green: oklch(075% 0.150 138deg);
|
|
--acc-fg-blue: oklch(075% 0.135 262deg);
|
|
--acc-fg-purple: oklch(075% 0.150 295deg);
|
|
--acc-fg-teal: oklch(075% 0.150 210deg);
|
|
--acc-fg-orange: oklch(075% 0.150 62deg);
|
|
}
|