summaryrefslogtreecommitdiffstats
path: root/src/css/themes/default.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/css/themes/default.css')
-rw-r--r--src/css/themes/default.css526
1 files changed, 526 insertions, 0 deletions
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
new file mode 100644
index 0000000..c37bd28
--- /dev/null
+++ b/src/css/themes/default.css
@@ -0,0 +1,526 @@
+/**
+
+ References:
+ https://protocol.mozilla.org/
+ https://material.io/
+
+ Color names from:
+ https://protocol.mozilla.org/docs/fundamentals/color.html
+
+ Tools:
+ Lightness validator: https://www.hsluv.org/
+ Contrast validator: https://bernaferrari.github.io/color-studio/#/
+*/
+:root {
+ --blue-5: 170 242 255;
+ --blue-10: 128 235 255;
+ --blue-20: 0 221 255;
+ --blue-30: 0 179 244;
+ --blue-40: 0 144 237;
+ --blue-50: 0 96 223;
+ --blue-60: 2 80 187;
+ --blue-70: 5 64 150;
+ --blue-80: 7 48 114;
+ --blue-90: 9 32 77;
+ --dark-gray-10: 82 82 94;
+ --dark-gray-20: 74 74 85;
+ --dark-gray-30: 66 65 77;
+ --dark-gray-40: 58 57 68;
+ --dark-gray-50: 50 49 60;
+ --dark-gray-60: 43 42 51;
+ --dark-gray-70: 35 34 43;
+ --dark-gray-80: 28 27 34;
+ --dark-gray-90: 21 20 26;
+ --green-30: 136 255 209;
+ --green-40: 84 255 189;
+ --green-50: 63 225 176;
+ --green-60: 42 195 162;
+ --green-65: 21 165 149;
+ --green-70: 0 135 135;
+ --green-80: 0 94 94;
+ --ink-10: 57 52 115;
+ --ink-80: 32 18 58;
+ --light-gray-10: 249 249 251;
+ --light-gray-20: 240 240 244;
+ --light-gray-30: 224 224 230;
+ --light-gray-40: 207 207 216;
+ --light-gray-50: 191 191 201;
+ --light-gray-60: 175 175 186;
+ --light-gray-70: 159 159 173;
+ --light-gray-80: 143 143 158;
+ --light-gray-90: 128 128 143;
+ --orange-5: 255 244 222;
+ --orange-10: 255 213 178;
+ --orange-20: 255 181 135;
+ --orange-30: 255 162 102;
+ --orange-40: 255 138 80;
+ --orange-50: 255 113 57;
+ --orange-60: 226 89 32;
+ --orange-70: 204 61 0;
+ --orange-80: 158 40 11;
+ --orange-90: 124 21 4;
+ --purple-5: 247 226 255;
+ --purple-10: 246 184 255;
+ --purple-20: 246 143 255;
+ --purple-30: 247 112 255;
+ --purple-40: 215 76 240;
+ --purple-50: 184 51 225;
+ --purple-60: 149 43 185;
+ --purple-70: 114 34 145;
+ --purple-80: 78 26 105;
+ --purple-90: 43 17 65;
+ --red-20: 255 154 162;
+ --red-30: 255 132 139;
+ --red-40: 255 106 117;
+ --red-50: 255 79 94;
+ --red-60: 226 40 80;
+ --red-70: 197 0 66;
+ --violet-5: 231 223 255;
+ --violet-10: 217 191 255;
+ --violet-20: 203 158 255;
+ --violet-30: 198 137 255;
+ --violet-40: 171 113 255;
+ --violet-50: 144 89 255;
+ --violet-60: 117 66 229;
+ --violet-70: 89 42 203;
+ --violet-80: 69 39 141;
+ --violet-90: 50 28 100;
+ --yellow-5: 255 255 204;
+ --yellow-10: 255 255 152;
+ --yellow-20: 255 234 128;
+ --yellow-30: 255 213 103;
+ --yellow-40: 255 189 79;
+ --yellow-50: 255 164 54;
+ --yellow-60: 226 127 46;
+ --yellow-70: 196 90 39;
+ --yellow-80: 167 52 31;
+ --yellow-90: 150 14 24;
+
+ /*
+ * Reference gray: -light-gray-90, then calibrated with hsluv.org, where
+ * the number is Luv.
+ *
+ * */
+ --gray-5: 16 16 22;
+ --gray-10: 27 27 35;
+ --gray-15: 37 37 47;
+ --gray-20: 47 47 59;
+ --gray-25: 58 58 72;
+ --gray-30: 69 69 85;
+ --gray-35: 81 81 98;
+ --gray-40: 93 93 110;
+ --gray-45: 105 105 121;
+ --gray-50: 118 118 133;
+ --gray-55: 131 131 145;
+ --gray-60: 144 144 156;
+ --gray-65: 157 157 168;
+ --gray-70: 170 170 180;
+ --gray-75: 184 184 192;
+ --gray-80: 198 198 204;
+ --gray-85: 212 212 217;
+ --gray-90: 226 226 229;
+ --gray-95: 240 240 242;
+}
+
+/*
+ * Font
+ *
+ * */
+:root {
+ --font-size: 14px;
+ --font-size-smaller: calc(var(--font-size) - 1px);
+ --font-size-xsmall: calc(var(--font-size) - 3px);
+ --font-size-larger: 15px;
+ --font-family: Inter, sans-serif;
+ --monospace-size: 12px;
+}
+
+:root.mobile {
+ --font-size: 16px;
+ --font-size-smaller: 14px;
+ --monospace-size: 13px;
+}
+
+/*
+ * Default color theme
+ *
+ * Tool: hsluv.org
+ *
+ * */
+:root /* h255 */ {
+ --primary-5: 3 16 40; /* S:90 Luv:5 */
+ --primary-10: 5 27 59; /* S:90 Luv:10 */
+ --primary-20: 14 47 95; /* S:90 Luv:20 */
+ --primary-30: 24 69 134; /* S:90 Luv:30 */
+ --primary-40: 34 93 176; /* S:90 Luv:40 */
+ --primary-50: 45 117 219; /* S:90 Luv:50 */
+ --primary-60: 86 143 244; /* S:90 Luv:60 */
+ --primary-70: 137 170 247; /* S:90 Luv:70 */
+ --primary-80: 179 198 250; /* S:90 Luv:80 */
+ --primary-90: 218 226 252; /* S:90 Luv:90 */
+ --primary-95: 236 240 254; /* S:90 Luv:95 */
+ }
+
+/*
+ * Default dark theme starts here
+ *
+ * https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629641072
+ * Assign a default background color if dark mode is enabled -- hopefully
+ * this will avoid flashes of white background until the document's own CSS
+ * overrides the default color value below.
+ *
+ * */
+@media (prefers-color-scheme: light) {
+ :root {
+ --surface-0-rgb: 255 255 255;
+ --surface-1: rgb(var(--gray-95));
+ --surface-2: rgb(var(--gray-90));
+ --surface-3: rgb(var(--gray-80));
+ }
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ --surface-0-rgb: 0 0 0;
+ --surface-1: rgb(var(--gray-10));
+ --surface-2: rgb(var(--gray-20));
+ --surface-3: rgb(var(--gray-30));
+ }
+}
+
+:root.light {
+ --surface-0-rgb: 255 255 255;
+ --surface-1: rgb(var(--gray-95));
+ --surface-2: rgb(var(--gray-90));
+ --surface-3: rgb(var(--gray-80));
+}
+
+:root.dark {
+ --surface-0-rgb: 0 0 0;
+ --surface-1: rgb(var(--gray-10));
+ --surface-2: rgb(var(--gray-20));
+ --surface-3: rgb(var(--gray-30));
+}
+
+/*
+ * Components
+ *
+ * */
+:root {
+ --font-size: 14px;
+
+ --ubo-red: #800000;
+
+ --elevation-up-surface: black;
+ --elevation-up1-opacity: 4%;
+ --elevation-up2-opacity: 8%;
+ --elevation-down-surface: white;
+ --elevation-down1-opacity: 16%;
+ --elevation-down2-opacity: 32%;
+
+ /* https://material.io/design/color/text-legibility.html#text-backgrounds */
+ --ink-rgb: var(--ink-80);
+ --ink-0: black;
+ --ink-100: white;
+
+ --border-1: rgb(var(--gray-75));
+ --border-2: rgb(var(--gray-70));
+ --border-3: rgb(var(--gray-65));
+ --border-4: rgb(var(--gray-60));
+
+ --accent-ink-3: var(--ink-1);
+ --accent-surface-1: rgb(var(--primary-40));
+
+ --link-ink: rgb(var(--primary-40));
+ --link-hover-ink: rgb(var(--primary-30));
+
+ /* buttons */
+ --button-surface-rgb: var(--gray-80);
+
+ --dashboard-tab-active-ink-rgb: var(--primary-40);
+ --dashboard-tab-focus-surface-rgb: var(--primary-90);
+ --dashboard-highlight-surface-rgb: var(--primary-90);
+
+ --dashboard-happy-green: rgb(var(--green-65));
+
+ /* popup panel */
+ --popup-cell-cname-ink: #0054d7; /* h260 S:100 Luv:40 */;
+ --popup-cell-label-mixed-surface: #c29100; /* TODO: fix */
+ --popup-icon-x-ink: rgb(var(--red-60));
+ --popup-power-ink-rgb: var(--primary-50);
+
+ /* horizontal line separator */
+ --hr-ink: var(--surface-2);
+
+ /* cloud widget */
+ --cloud-total-used-surface: rgb(var(--violet-60) / 25%);
+ --cloud-used-surface: rgb(var(--violet-60));
+
+ /* misc */
+ --error-surface: #c00004; /* h:12 S:100 Luv:40 */
+
+ /* codemirror */
+ --cm-active-line: rgb(var(--gray-90));
+ --cm-cursor: var(--ink-0);
+ --cm-foldmarker-ink: rgb(var(--blue-40));
+ --cm-gutter-border: var(--surface-1);
+ --cm-gutter-ink: var(--ink-3);
+ --cm-gutter-surface: var(--surface-2);
+ --cm-matchingbracket: rgb(var(--green-30));
+ --cm-merge-copy-ink: rgb(var(--blue-50));
+ --cm-merge-chunk-border: rgb(var(--surface-0-rgb) / 40%);
+ --cm-merge-chunk-surface: rgb(var(--surface-0-rgb) / 40%);
+ --cm-negative: #e32f00; /* h:15 S:100 Luv:50 */
+ --cm-positive: #008a21; /* h:130 S:100 Luv:50 */
+ --cm-selection-surface: rgb(var(--gray-80));
+ --cm-selection-focused-surface: rgb(var(--primary-80));
+ --cm-searching-ink: black;
+ --cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
+ --cm-search-match-surface: rgb(var(--yellow-40) / 50%);
+
+ /* syntax highlight: static filtering */
+ --sf-comment-ink: var(--ink-3);
+ --sf-def-ink: #3c3aff; /* h:266 S:100 Luv:40 */
+ --sf-directive-ink: var(--ink-1);
+ --sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
+ --sf-error-surface: #ff898133; /* h15 S:100 Luv:70 @ 20% */
+ --sf-keyword-ink: #9b00ca; /* h:290 S:100 Luv:40 */
+ --sf-notice-ink: var(--ink-4);
+ --sf-readonly-ink: var(--ink-3);
+ --sf-tag-ink: #006e2e /* h:135 S:100 Luv:40 */;
+ --sf-unicode-ink: var(--ink-1);
+ --sf-value-ink: #974900 /* h:30 S:100 Luv:40 */;
+ --sf-variable-ink: var(--ink-1);
+ --sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
+ --sf-warning-surface: #e49d0033; /* h:50 S:100 Luv:70 @ 20% */
+
+ /* syntax highlight: dynamic filtering */
+ --df-allow-ink: var(--cm-positive);
+ --df-block-ink: var(--cm-negative);
+ --df-noop-ink: rgb(var(--dark-gray-10));
+
+ /* logger */
+ --logger-modified-surface: #0000c010;
+ --logger-modified-em-surface: #0000c028;
+ --logger-redirected-surface: rgb(var(--yellow-5) / 50%);
+ --logger-scriptlet-surface: rgb(var(--yellow-30) / 50%);
+}
+
+/* https://material.io/design/color/dark-theme.html */
+:root.dark {
+ --elevation-down-surface: black;
+ --elevation-down1-opacity: 16%;
+ --elevation-down2-opacity: 32%;
+ --elevation-up-surface: white;
+ --elevation-up1-opacity: 12%;
+ --elevation-up2-opacity: 24%;
+
+ --ink-rgb: var(--gray-95);
+ --ink-0: white;
+ --ink-100: black;
+
+ --border-1: rgb(var(--gray-35));
+ --border-2: rgb(var(--gray-40));
+ --border-3: rgb(var(--gray-45));
+ --border-4: rgb(var(--gray-50));
+
+ --accent-surface-1: rgb(var(--primary-70));
+
+ --link-ink: rgb(var(--primary-70));
+ --link-hover-ink: rgb(var(--primary-80));
+
+ /* buttons */
+ --button-surface-rgb: var(--gray-30);
+
+ --dashboard-tab-active-ink-rgb: var(--primary-70);
+ --dashboard-tab-focus-surface-rgb: var(--primary-20);
+ --dashboard-highlight-surface-rgb: var(--primary-20);
+
+ /* popup panel */
+ --popup-cell-cname-ink: #93a6ff; /* h260 S:100 Luv:70 */;
+ --popup-cell-label-mixed-surface: hsla(45, 100%, 38%, 1); /* TODO: fix */
+ --popup-icon-x-ink: rgb(var(--red-50));
+ --popup-power-ink-rgb: var(--primary-60);
+
+ /* cloud widget */
+ --cloud-total-used-surface: rgb(var(--violet-20) / 25%);
+ --cloud-used-surface: rgb(var(--violet-20));
+
+ /* misc */
+ --error-surface: #ff5354; /* h:12 S:100 Luv:60 */
+
+ /* codemirror */
+ --cm-active-line: rgb(var(--gray-20));
+ --cm-merge-copy-ink: rgb(var(--blue-30));
+ --cm-foldmarker-ink: rgb(var(--blue-20));
+ --cm-matchingbracket: rgb(var(--green-30) / 50%);
+ --cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
+ --cm-positive: #00c634; /* h:130 S:100 Luv:70 */
+ --cm-selection-surface: rgb(var(--gray-40));
+ --cm-selection-focused-surface: rgb(var(--primary-40));
+ --cm-searching-ink: black;
+ --cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
+
+ /* syntax highlight: static filtering */
+ --sf-comment-ink: var(--ink-3);
+ --sf-def-ink: #a2a2ff; /* h:266 S:100 Luv:70 */
+ --sf-error-ink: #ff8981; /* h15 S:100 Luv:70 */
+ --sf-error-surface: #ff898166; /* h15 S:100 Luv:70 @ 40% */
+ --sf-keyword-ink: #d78dff; /* h:290 S:100 Luv:70 */
+ --sf-tag-ink: #00c559 /* h:135 S:100 Luv:70 */;
+ --sf-value-ink: #ff8d48 /* h:30 S:100 Luv:70 */;
+ --sf-variable-ink: var(--ink-1);
+ --sf-warning-ink: #e49d00; /* h:50 S:100 Luv:70 */
+ --sf-warning-surface: #e49d0066; /* h:50 S:100 Luv:50 @ 40% */
+
+ /* syntax highlight: dynamic filtering */
+ --df-noop-ink: var(--ink-3);
+
+ /* logger */
+ --logger-modified-surface: #663efd60;
+ --logger-redirected-surface: rgb(var(--yellow-5) / 40%);
+ --logger-scriptlet-surface: rgb(var(--yellow-30) / 40%);
+}
+
+:root.dark input,
+:root.dark select,
+:root.dark textarea {
+ color-scheme: dark;
+}
+
+/*
+ * Shared declarations
+ * */
+:root {
+ --high-em: 87%;
+ --medium-em: 60%;
+ --low-em: 38%;
+
+ --surface-0: rgb(var(--surface-0-rgb));
+
+ --ink-1: rgb(var(--ink-rgb));
+ --ink-2: rgb(var(--ink-rgb) / var(--high-em));
+ --ink-3: rgb(var(--ink-rgb) / var(--medium-em));
+ --ink-4: rgb(var(--ink-rgb) / var(--low-em));
+
+ --accent-ink-1: var(--surface-0);
+ --accent-ink-3: var(--ink-1);
+
+ --subtil-ink: var(--accent-surface-1);
+
+ --fieldset-header-surface: transparent;
+ --fieldset-header-ink: var(--ink-2);
+
+ --button-ink: var(--ink-1);
+ --button-surface: rgb(var(--button-surface-rgb));
+ --button-border-radius: 5px;
+ --button-preferred-ink: var(--accent-ink-1);
+ --button-preferred-surface: var(--accent-surface-1);
+ --button-disabled-surface: var(--surface-3);
+ --button-disabled-filter: opacity(50%);
+
+ --checkbox-size: calc(var(--font-size) + 2px);
+ --checkbox-ink: var(--ink-3);
+ --checkbox-checked-ink: var(--accent-surface-1);
+ --checkbox-disabled-filter: opacity(50%);
+ --checkbox-margin-end: calc(var(--font-size) * 0.75);
+
+ --notice-ink: var(--accent-ink-1);
+ --notice-surface: var(--accent-surface-1);
+ --notice-surface-shadow: #000 0 2px 8px;
+
+ --dashboard-tab-ink: var(--ink-1);
+ --dashboard-tab-active-ink: rgb(var(--dashboard-tab-active-ink-rgb));
+ --dashboard-tab-active-surface: transparent;
+ --dashboard-tab-focus-surface: rgb(var(--dashboard-tab-focus-surface-rgb));
+ --dashboard-tab-hover-surface: var(--surface-2);
+ --dashboard-tab-hover-border: var(--surface-3);
+
+ /* info levels: normal, fyi, warn, error -- we want same Luv */
+ --info0-ink-rgb: 119 119 119; /* h: 0 S: 0 Luv:60 */
+ --info1-ink-rgb: 72 143 255; /* h:255 S:100 Luv:60 */
+ --info2-ink-rgb: 208 125 0; /* h: 40 S:100 Luv:60 */
+ --info3-ink-rgb: 255 82 94; /* h: 10 S:100 Luv:60 */
+ --info0-ink: rgb(var(--info0-ink-rgb));
+ --info1-ink: rgb(var(--info1-ink-rgb));
+ --info2-ink: rgb(var(--info2-ink-rgb));
+ --info3-ink: rgb(var(--info3-ink-rgb));
+
+ --popup-cell-surface: var(--surface-2);
+ --popup-cell-label-filter: opacity(40%);
+ --popup-cell-allow-own-surface: rgb(var(--popup-cell-allow-own-surface-rgb));
+ --popup-cell-allow-surface: rgb(var(--popup-cell-allow-surface-rgb));
+ --popup-cell-noop-own-surface: rgb(var(--popup-cell-noop-own-surface-rgb));
+ --popup-cell-noop-surface: rgb(var(--popup-cell-noop-surface-rgb));
+ --popup-cell-block-own-surface: rgb(var(--popup-cell-block-own-surface-rgb));
+ --popup-cell-block-surface: rgb(var(--popup-cell-block-surface-rgb));
+ --popup-power-ink: rgb(var(--popup-power-ink-rgb));
+ --popup-toolbar-surface: rgb(var(--primary-80) / 15%);
+ --popup-toolbar-surface-hover: rgb(var(--primary-80) / 20%);
+ --popup-ruleset-tool-ink: var(--ink-1);
+ --popup-ruleset-tool-surface: rgb(var(--primary-80) / 15%);
+ --popup-ruleset-tool-surface-hover: rgb(var(--primary-80) / 20%);
+ --popup-ruleset-tool-shadow: transparent;
+}
+
+/*
+ * Rule colors
+ * */
+:root:not(.dark):not(.colorBlind) {
+ --popup-cell-allow-own-surface-rgb: 0 127 0; /* h:127.7 S:100 Luv:45 */
+ --popup-cell-allow-surface-rgb: 129 202 129; /* h:127.7 S:50 Luv:75 */
+ --popup-cell-block-own-surface-rgb: 216 0 0; /* h:12.2 S:100 Luv:45 */
+ --popup-cell-block-surface-rgb: 224 172 172; /* h:12.2 S:50 Luv:75 */
+ --popup-cell-noop-own-surface-rgb: 107 107 107; /* h:0 S:0 Luv:45 */
+ --popup-cell-noop-surface-rgb: 185 185 185; /* h:0 S:0 Luv:75 */
+}
+
+:root.dark:not(.colorBlind) {
+ --popup-cell-allow-own-surface-rgb: 0 153 0; /* h:127.7 S:100 Luv:55 */
+ --popup-cell-allow-surface-rgb: 73 117 73; /* h:127.7 S:50 Luv:45 */
+ --popup-cell-block-own-surface-rgb: 255 40 40; /* h:12.2 S:100 Luv:55 */
+ --popup-cell-block-surface-rgb: 175 74 74; /* h:12.2 S:50 Luv:45 */
+ --popup-cell-noop-own-surface-rgb: 132 132 132; /* h:0 S:0 Luv:55 */
+ --popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
+}
+
+/*
+ * Source for color-blind color scheme:
+ * https://davidmathlogic.com/colorblind/
+ * First pair in "Accessible palettes"
+ *
+ * */
+:root.colorBlind {
+ --popup-cell-allow-own-surface-rgb: 151 113 0; /* h:58.5 S:100 Luv:50 */
+ --popup-cell-block-own-surface-rgb: 0 120 216; /* h:252 S:100 Luv:50 */
+ --popup-cell-noop-own-surface-rgb: 119 119 119; /* h:0 S:0 Luv:50 */
+ --popup-cell-label-mixed-surface: #ff6a00; /* TODO: fix */
+}
+:root.colorBlind:not(.dark) {
+ --popup-cell-allow-surface-rgb: 223 178 92; /* h:58.5 S:75 Luv:75 */
+ --popup-cell-block-surface-rgb: 159 185 238; /* h:252 S:75 Luv:75 */
+ --popup-cell-noop-surface-rgb: 185 185 185; /* h:0 S:0 Luv:75 */
+}
+:root.dark.colorBlind {
+ --popup-cell-allow-surface-rgb: 115 91 44; /* h:58.5 S:75 Luv:40 */
+ --popup-cell-block-surface-rgb: 53 95 154; /* h:252 S:75 Luv:40 */
+ --popup-cell-noop-surface-rgb: 94 94 94; /* h:0 S:0 Luv:40 */
+}
+
+:root.classic:not(.dark) {
+ --notice-ink: rgb(var(--ink-80));
+ --notice-surface: rgb(var(--yellow-5));
+ --popup-power-ink-rgb: 0 110 254;
+ --popup-ruleset-tool-ink: var(--ink-1);
+ --popup-ruleset-tool-surface: rgb(var(--yellow-5) / 50%);
+ --popup-ruleset-tool-surface-hover: rgb(var(--yellow-5) / 75%);
+ --popup-ruleset-tool-shadow: rgb(var(--gray-85));
+}
+
+/*
+ * Experiment: use Firefox for Android dark theme colors
+:root.mobile.dark {
+ --gray-10: 43 42 51;
+ --gray-20: 66 65 77;
+ --ink-rgb: 251 251 254;
+}
+*/
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 03:04:53 +0000