path: root/src/css/themes/default.css

/**

    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;
}
*/