:root { /* Spacing */ --space: 0.4rem; /* Border radius */ --border-radius: 0.4rem; /* Z-Index */ --dialog-depth: 8000; --alerts-depth: 9000; /* Sizing */ --header-footer-height: 6.5rem; /* Webview embedding - default values */ --status-bar-height: 0px; /* Shadows */ --shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.05); --shadow-big: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.07), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.05); --shadow-big-up: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.07), 0 -0.2rem 0.2rem rgba(0, 0, 0, 0.05); /* Grey colors R, G, B */ --grey-900: 23, 25, 28; --grey-800: 38, 43, 48; --grey-700: 54, 60, 68; --grey-600: 79, 88, 99; --grey-500: 95, 106, 119; --grey-400: 113, 126, 142; --grey-300: 156, 165, 176; --grey-200: 198, 203, 210; --grey-100: 218, 221, 226; --grey-50: 241, 242, 244; --white: 255, 255, 255; /* Brand colors R, G, B */ --brand-900: 15, 0, 51; --brand-800: 26, 0, 87; --brand-700: 37, 0, 122; --brand-600: 52, 0, 179; --brand-500: 63, 0, 214; --brand-400: 77, 0, 255; --brand-300: 130, 76, 255; --brand-200: 184, 153, 255; --brand-100: 209, 189, 255; --brand-50: 237, 230, 255; /* Green colors R, G, B */ --green-900: 11, 40, 19; --green-800: 18, 69, 33; --green-700: 25, 97, 47; --green-600: 37, 141, 68; --green-500: 45, 170, 81; --green-400: 53, 202, 98; --green-300: 114, 218, 144; --green-200: 174, 234, 192; --green-100: 202, 241, 214; --green-50: 235, 250, 239; /* Yellow colors R, G, B */ --yellow-900: 50, 32, 1; --yellow-800: 85, 54, 2; --yellow-700: 119, 77, 3; --yellow-600: 174, 112, 4; --yellow-500: 209, 134, 5; --yellow-400: 249, 160, 6; --yellow-300: 251, 188, 81; --yellow-200: 252, 217, 156; --yellow-100: 253, 231, 190; --yellow-50: 254, 245, 230; /* Red colors R, G, B */ --red-900: 44, 7, 7; --red-800: 76, 11, 12; --red-700: 107, 16, 17; --red-600: 156, 23, 24; --red-500: 187, 27, 29; --red-400: 222, 33, 35; --red-300: 232, 99, 101; --red-200: 242, 166, 167; --red-100: 247, 197, 198; --red-50: 252, 233, 233; /* Semantic colors */ --primary-text-color: rgb(var(--grey-900)); --secondary-text-color: rgb(var(--grey-600)); --input-fill-color: rgb(var(--white)); --input-stroke-color: rgb(var(--grey-200)); --input-stroke-focus-color: rgb(var(--grey-400)); --input-placeholder-text-color: rgb(var(--grey-300)); --background-color: rgb(var(--grey-50)); --foreground-color: rgb(var(--white)); --icon-color: rgb(var(--grey-600)); --divider-color: rgb(var(--grey-100)); --divider-hover-color: rgb(var(--grey-200)); --info-color: rgb(var(--brand-400)); --info-complementary-color: rgb(var(--white)); --warning-color: rgb(var(--yellow-400)); --warning-complementary-color: rgb(var(--white)); --warning-hover-color: rgb(var(--yellow-500)); --warning-active-color: rgb(var(--yellow-600)); --warning-secondary-hover-color: rgba(var(--yellow-100), 0.3); --warning-secondary-active-color: rgba(var(--yellow-100), 0.4); --main-color: rgb(var(--brand-400)); --main-hover-color: rgb(var(--brand-500)); --main-active-color: rgb(var(--brand-600)); --main-secondary-hover-color: rgba(var(--brand-100), 0.3); --main-secondary-active-color: rgba(var(--brand-100), 0.4); --main-complementary-color: rgb(var(--white)); --success-color: rgb(var(--green-400)); --success-hover-color: rgb(var(--green-600)); --success-active-color: rgb(var(--green-700)); --success-secondary-hover-color: rgba(var(--green-100), 0.3); --success-secondary-active-color: rgba(var(--green-100), 0.4); --success-complementary-color: rgb(var(--white)); --danger-color: rgb(var(--red-400)); --danger-hover-color: rgb(var(--red-500)); --danger-active-color: rgb(var(--red-600)); --danger-secondary-hover-color: rgba(var(--red-100), 0.3); --danger-secondary-active-color: rgba(var(--red-100), 0.4); --danger-complementary-color: rgb(var(--white)); --overlay-color: rgba(var(--grey-600), 0.7); } /* Dark mode colors controlled by media query */ @media (prefers-color-scheme: dark) { :root:not(:root.light) { /* Shadows */ --shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); --shadow-big: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.25), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); --shadow-big-up: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.25), 0 -0.2rem 0.2rem rgba(0, 0, 0, 0.2); /* Colors */ --primary-text-color: rgb(var(--grey-50)); --secondary-text-color: rgb(var(--grey-300)); --input-fill-color: rgb(var(--grey-800)); --input-stroke-color: rgb(var(--grey-600)); --input-stroke-focus-color: rgb(var(--grey-400)); --input-placeholder-text-color: rgb(var(--grey-400)); --background-color: rgb(var(--grey-900)); --foreground-color: rgb(var(--grey-800)); --icon-color: rgb(var(--grey-300)); --divider-color: rgb(var(--grey-700)); --divider-hover-color: rgb(var(--grey-600)); --info-color: rgb(var(--brand-200)); --info-complementary-color: rgb(var(--grey-900)); --warning-color: rgb(var(--yellow-300)); --warning-complementary-color: rgb(var(--grey-900)); --warning-hover-color: rgb(var(--yellow-200)); --warning-active-color: rgb(var(--yellow-100)); --warning-secondary-hover-color: rgba(var(--grey-600), 0.3); --warning-secondary-active-color: rgba(var(--grey-600), 0.4); --main-color: rgb(var(--brand-200)); --main-hover-color: rgb(var(--brand-100)); --main-active-color: rgb(var(--brand-50)); --main-secondary-hover-color: rgba(var(--grey-600), 0.3); --main-secondary-active-color: rgba(var(--grey-600), 0.4); --main-complementary-color: rgb(var(--grey-900)); --success-color: rgb(var(--green-300)); --success-hover-color: rgb(var(--green-200)); --success-active-color: rgb(var(--green-100)); --success-secondary-hover-color: rgba(var(--grey-600), 0.3); --success-secondary-active-color: rgba(var(--grey-600), 0.4); --success-complementary-color: rgb(var(--grey-900)); --danger-color: rgb(var(--red-200)); --danger-hover-color: rgb(var(--red-100)); --danger-active-color: rgb(var(--red-50)); --danger-secondary-hover-color: rgba(var(--grey-600), 0.3); --danger-secondary-active-color: rgba(var(--grey-600), 0.4); --danger-complementary-color: rgb(var(--grey-900)); --overlay-color: rgba(var(--grey-900), 0.9); } } /* Dark mode colors controlled by class="dark" on root element */ :root.dark { /* Shadows */ --shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); --shadow-big: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.25), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2); --shadow-big-up: 0 -0.4rem 1.6rem rgba(0, 0, 0, 0.25), 0 -0.2rem 0.2rem rgba(0, 0, 0, 0.2); /* Colors */ --primary-text-color: rgb(var(--grey-50)); --secondary-text-color: rgb(var(--grey-300)); --input-fill-color: rgb(var(--grey-800)); --input-stroke-color: rgb(var(--grey-600)); --input-stroke-focus-color: rgb(var(--grey-400)); --input-placeholder-text-color: rgb(var(--grey-400)); --background-color: rgb(var(--grey-900)); --foreground-color: rgb(var(--grey-800)); --icon-color: rgb(var(--grey-300)); --divider-color: rgb(var(--grey-700)); --divider-hover-color: rgb(var(--grey-600)); --info-color: rgb(var(--brand-200)); --info-complementary-color: rgb(var(--grey-900)); --warning-color: rgb(var(--yellow-300)); --warning-complementary-color: rgb(var(--grey-900)); --main-color: rgb(var(--brand-200)); --main-hover-color: rgb(var(--brand-100)); --main-active-color: rgb(var(--brand-50)); --main-secondary-hover-color: rgba(var(--grey-600), 0.3); --main-secondary-active-color: rgba(var(--grey-600), 0.4); --main-complementary-color: rgb(var(--grey-900)); --success-color: rgb(var(--green-300)); --success-hover-color: rgb(var(--green-200)); --success-active-color: rgb(var(--green-100)); --success-secondary-hover-color: rgba(var(--grey-600), 0.3); --success-secondary-active-color: rgba(var(--grey-600), 0.4); --success-complementary-color: rgb(var(--grey-900)); --danger-color: rgb(var(--red-200)); --danger-hover-color: rgb(var(--red-100)); --danger-active-color: rgb(var(--red-50)); --danger-secondary-hover-color: rgba(var(--grey-600), 0.3); --danger-secondary-active-color: rgba(var(--grey-600), 0.4); --danger-complementary-color: rgb(var(--grey-900)); --overlay-color: rgba(var(--grey-900), 0.9); }