242 lines
9.2 KiB
SCSS
242 lines
9.2 KiB
SCSS
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--theme-success-50: var(--color-success-50);
|
|
--theme-success-100: var(--color-success-100);
|
|
--theme-success-150: var(--color-success-150);
|
|
--theme-success-200: var(--color-success-200);
|
|
--theme-success-250: var(--color-success-250);
|
|
--theme-success-300: var(--color-success-300);
|
|
--theme-success-350: var(--color-success-350);
|
|
--theme-success-400: var(--color-success-400);
|
|
--theme-success-450: var(--color-success-450);
|
|
--theme-success-500: var(--color-success-500);
|
|
--theme-success-550: var(--color-success-550);
|
|
--theme-success-600: var(--color-success-600);
|
|
--theme-success-650: var(--color-success-650);
|
|
--theme-success-700: var(--color-success-700);
|
|
--theme-success-750: var(--color-success-750);
|
|
--theme-success-800: var(--color-success-800);
|
|
--theme-success-850: var(--color-success-850);
|
|
--theme-success-900: var(--color-success-900);
|
|
--theme-success-950: var(--color-success-950);
|
|
|
|
--theme-warning-50: var(--color-warning-50);
|
|
--theme-warning-100: var(--color-warning-100);
|
|
--theme-warning-150: var(--color-warning-150);
|
|
--theme-warning-200: var(--color-warning-200);
|
|
--theme-warning-250: var(--color-warning-250);
|
|
--theme-warning-300: var(--color-warning-300);
|
|
--theme-warning-350: var(--color-warning-350);
|
|
--theme-warning-400: var(--color-warning-400);
|
|
--theme-warning-450: var(--color-warning-450);
|
|
--theme-warning-500: var(--color-warning-500);
|
|
--theme-warning-550: var(--color-warning-550);
|
|
--theme-warning-600: var(--color-warning-600);
|
|
--theme-warning-650: var(--color-warning-650);
|
|
--theme-warning-700: var(--color-warning-700);
|
|
--theme-warning-750: var(--color-warning-750);
|
|
--theme-warning-800: var(--color-warning-800);
|
|
--theme-warning-850: var(--color-warning-850);
|
|
--theme-warning-900: var(--color-warning-900);
|
|
--theme-warning-950: var(--color-warning-950);
|
|
|
|
--theme-error-50: var(--color-error-50);
|
|
--theme-error-100: var(--color-error-100);
|
|
--theme-error-150: var(--color-error-150);
|
|
--theme-error-200: var(--color-error-200);
|
|
--theme-error-250: var(--color-error-250);
|
|
--theme-error-300: var(--color-error-300);
|
|
--theme-error-350: var(--color-error-350);
|
|
--theme-error-400: var(--color-error-400);
|
|
--theme-error-450: var(--color-error-450);
|
|
--theme-error-500: var(--color-error-500);
|
|
--theme-error-550: var(--color-error-550);
|
|
--theme-error-600: var(--color-error-600);
|
|
--theme-error-650: var(--color-error-650);
|
|
--theme-error-700: var(--color-error-700);
|
|
--theme-error-750: var(--color-error-750);
|
|
--theme-error-800: var(--color-error-800);
|
|
--theme-error-850: var(--color-error-850);
|
|
--theme-error-900: var(--color-error-900);
|
|
--theme-error-950: var(--color-error-950);
|
|
|
|
--theme-elevation-0: var(--color-base-0);
|
|
--theme-elevation-50: var(--color-base-50);
|
|
--theme-elevation-100: var(--color-base-100);
|
|
--theme-elevation-150: var(--color-base-150);
|
|
--theme-elevation-200: var(--color-base-200);
|
|
--theme-elevation-250: var(--color-base-250);
|
|
--theme-elevation-300: var(--color-base-300);
|
|
--theme-elevation-350: var(--color-base-350);
|
|
--theme-elevation-400: var(--color-base-400);
|
|
--theme-elevation-450: var(--color-base-450);
|
|
--theme-elevation-500: var(--color-base-500);
|
|
--theme-elevation-550: var(--color-base-550);
|
|
--theme-elevation-600: var(--color-base-600);
|
|
--theme-elevation-650: var(--color-base-650);
|
|
--theme-elevation-700: var(--color-base-700);
|
|
--theme-elevation-750: var(--color-base-750);
|
|
--theme-elevation-800: var(--color-base-800);
|
|
--theme-elevation-850: var(--color-base-850);
|
|
--theme-elevation-900: var(--color-base-900);
|
|
--theme-elevation-950: var(--color-base-950);
|
|
--theme-elevation-1000: var(--color-base-1000);
|
|
|
|
--theme-bg: var(--theme-elevation-0);
|
|
--theme-input-bg: var(--theme-elevation-50);
|
|
--theme-text: var(--theme-elevation-750);
|
|
--theme-border-color: var(--theme-elevation-150);
|
|
|
|
color-scheme: light;
|
|
color: var(--theme-text);
|
|
|
|
--highlight-default-bg-color: var(--theme-success-400);
|
|
--highlight-default-text-color: var(--theme-text);
|
|
|
|
--highlight-danger-bg-color: var(--theme-error-150);
|
|
--highlight-danger-text-color: var(--theme-text);
|
|
}
|
|
|
|
h1 a,
|
|
h2 a,
|
|
h3 a,
|
|
h4 a,
|
|
h5 a,
|
|
h6 a {
|
|
color: var(--theme-elevation-750);
|
|
|
|
&:hover {
|
|
color: var(--theme-elevation-800);
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--theme-elevation-750);
|
|
|
|
&:hover {
|
|
color: var(--theme-elevation-800);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--theme-elevation-0: var(--color-base-1000);
|
|
--theme-elevation-50: var(--color-base-950);
|
|
--theme-elevation-100: var(--color-base-900);
|
|
--theme-elevation-150: var(--color-base-850);
|
|
--theme-elevation-200: var(--color-base-800);
|
|
--theme-elevation-250: var(--color-base-750);
|
|
--theme-elevation-300: var(--color-base-700);
|
|
--theme-elevation-350: var(--color-base-650);
|
|
--theme-elevation-400: var(--color-base-600);
|
|
--theme-elevation-450: var(--color-base-550);
|
|
--theme-elevation-500: var(--color-base-500);
|
|
--theme-elevation-550: var(--color-base-450);
|
|
--theme-elevation-600: var(--color-base-400);
|
|
--theme-elevation-650: var(--color-base-350);
|
|
--theme-elevation-700: var(--color-base-300);
|
|
--theme-elevation-750: var(--color-base-250);
|
|
--theme-elevation-800: var(--color-base-200);
|
|
--theme-elevation-850: var(--color-base-150);
|
|
--theme-elevation-900: var(--color-base-100);
|
|
--theme-elevation-950: var(--color-base-50);
|
|
--theme-elevation-1000: var(--color-base-0);
|
|
|
|
--theme-success-50: var(--color-success-950);
|
|
--theme-success-100: var(--color-success-900);
|
|
--theme-success-150: var(--color-success-850);
|
|
--theme-success-200: var(--color-success-800);
|
|
--theme-success-250: var(--color-success-750);
|
|
--theme-success-300: var(--color-success-700);
|
|
--theme-success-350: var(--color-success-650);
|
|
--theme-success-400: var(--color-success-600);
|
|
--theme-success-450: var(--color-success-550);
|
|
--theme-success-500: var(--color-success-500);
|
|
--theme-success-550: var(--color-success-450);
|
|
--theme-success-600: var(--color-success-400);
|
|
--theme-success-650: var(--color-success-350);
|
|
--theme-success-700: var(--color-success-300);
|
|
--theme-success-750: var(--color-success-250);
|
|
--theme-success-800: var(--color-success-200);
|
|
--theme-success-850: var(--color-success-150);
|
|
--theme-success-900: var(--color-success-100);
|
|
--theme-success-950: var(--color-success-50);
|
|
|
|
--theme-warning-50: var(--color-warning-950);
|
|
--theme-warning-100: var(--color-warning-900);
|
|
--theme-warning-150: var(--color-warning-850);
|
|
--theme-warning-200: var(--color-warning-800);
|
|
--theme-warning-250: var(--color-warning-750);
|
|
--theme-warning-300: var(--color-warning-700);
|
|
--theme-warning-350: var(--color-warning-650);
|
|
--theme-warning-400: var(--color-warning-600);
|
|
--theme-warning-450: var(--color-warning-550);
|
|
--theme-warning-500: var(--color-warning-500);
|
|
--theme-warning-550: var(--color-warning-450);
|
|
--theme-warning-600: var(--color-warning-400);
|
|
--theme-warning-650: var(--color-warning-350);
|
|
--theme-warning-700: var(--color-warning-300);
|
|
--theme-warning-750: var(--color-warning-250);
|
|
--theme-warning-800: var(--color-warning-200);
|
|
--theme-warning-850: var(--color-warning-150);
|
|
--theme-warning-900: var(--color-warning-100);
|
|
--theme-warning-950: var(--color-warning-50);
|
|
|
|
--theme-error-50: var(--color-error-950);
|
|
--theme-error-100: var(--color-error-900);
|
|
--theme-error-150: var(--color-error-850);
|
|
--theme-error-200: var(--color-error-800);
|
|
--theme-error-250: var(--color-error-750);
|
|
--theme-error-300: var(--color-error-700);
|
|
--theme-error-350: var(--color-error-650);
|
|
--theme-error-400: var(--color-error-600);
|
|
--theme-error-450: var(--color-error-550);
|
|
--theme-error-500: var(--color-error-500);
|
|
--theme-error-550: var(--color-error-450);
|
|
--theme-error-600: var(--color-error-400);
|
|
--theme-error-650: var(--color-error-350);
|
|
--theme-error-700: var(--color-error-300);
|
|
--theme-error-750: var(--color-error-250);
|
|
--theme-error-800: var(--color-error-200);
|
|
--theme-error-850: var(--color-error-150);
|
|
--theme-error-900: var(--color-error-100);
|
|
--theme-error-950: var(--color-error-50);
|
|
|
|
--theme-bg: var(--theme-elevation-100);
|
|
--theme-text: var(--theme-elevation-900);
|
|
--theme-input-bg: var(--theme-elevation-150);
|
|
--theme-border-color: var(--theme-elevation-250);
|
|
|
|
color-scheme: dark;
|
|
color: var(--theme-text);
|
|
|
|
--highlight-default-bg-color: var(--theme-success-100);
|
|
--highlight-default-text-color: var(--theme-success-600);
|
|
|
|
--highlight-danger-bg-color: var(--theme-error-100);
|
|
--highlight-danger-text-color: var(--theme-error-550);
|
|
}
|
|
|
|
h1 a,
|
|
h2 a,
|
|
h3 a,
|
|
h4 a,
|
|
h5 a,
|
|
h6 a {
|
|
color: var(--theme-success-600);
|
|
|
|
&:hover {
|
|
color: var(--theme-success-400);
|
|
}
|
|
|
|
&:visited {
|
|
color: var(--theme-success-700);
|
|
|
|
&:hover {
|
|
color: var(--theme-success-500);
|
|
}
|
|
}
|
|
}
|
|
}
|