Dark-GitHub by vednoc

Imported from https://raw.githubusercontent.com/vednoc/dark-github/main/github.user.styl
Details

Authorvednoc
LicenseMIT
Created atApril 02, 2021 17:20
Updated atJune 14, 2021 23:30
Applies togithub.com
Statistics

Total views148
Total installs263
Weekly installs51
Weekly updates48
Description

Dark and light, very customizable theme for GitHub.
Notes

Userstyle doesn't have notes.
Source code

/* ==UserStyle==
@name         Dark-GitHub
@namespace    github.com/vednoc/dark-github
@description  Dark and light, very customizable theme for GitHub.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://github.com/vednoc/dark-github
@supportURL   https://github.com/vednoc/dark-github/issues
@updateURL    https://userstyles.world/api/style/2.user.css
@version      1.1.1
@license      MIT
@preprocessor stylus

@var select   cg_theme     'Base color-scheme toggle' {
    'Custom colors          *': 'custom',
    'Dark blue (old)         ': 'old-colors',
    'Dark gray (new)         ': 'new-colors',
    'Breeze Dark             ': 'breeze-dark',
    'GitHub Dark             ': 'github-dark',
    'GitHub Dark Mode        ': 'github-dark-mode',
    'Gruvbox Dark Soft       ': 'gruvbox-dark-soft',
    'Gruvbox Dark Medium     ': 'gruvbox-dark-medium',
    'Gruvbox Dark Hard       ': 'gruvbox-dark-hard',
    'Solarized Dark          ': 'solarized-dark',
    'Dracula                 ': 'dracula',
    'Nord Dark               ': 'nord-dark',
    'Arc Dark                ': 'arc-dark',
    'Moonlight               ': 'moonlight',
    'Monokai                 ': 'monokai',
    'Horizon                 ': 'horizon',
    'Doom One                ': 'doom-one',
    'Deep Dark               ': 'deep-dark',
    'Brave Dark              ': 'brave-dark',
    'Twilight                ': 'twilight',
    'Ubuntu                  ': 'ubuntu',
    'Lantern theme           ': 'lantern',
}

@var select   sy_theme     'Base color-scheme toggle' {
    'Custom colors          *': 'custom',
    'GitHub Dark             ': 'github-dark',
    'Gruvbox Bright          ': 'gruvbox-dark-soft',
    'Gruvbox Neutral         ': 'gruvbox-dark-medium',
    'Gruvbox Faded           ': 'gruvbox-dark-hard',
    'Solarized Dark          ': 'solarized-dark',
    'Dracula                 ': 'dracula',
    'Nord Dark               ': 'nord-dark',
    'Arc Dark                ': 'arc-dark',
    'Moonlight               ': 'moonlight',
    'Monokai                 ': 'monokai',
    'Horizon                 ': 'horizon',
    'Doom One                ': 'doom-one',
    'Deep Dark               ': 'deep-dark',
    'Lantern theme           ': 'lantern',
}

@var color    cg_bg        'Base background color' #292929
@var color    cg_fg        'Base foreground color' #e6e6e6
@var color    cg_ac        'Base accent color    ' #d47d3f
@var color    cg_v1        'Base red color       ' #f07178
@var color    cg_v2        'Base orange color    ' #f78c6c
@var color    cg_v3        'Base yellow color    ' #ffcb6b
@var color    cg_v4        'Base green color     ' #c3e88d
@var color    cg_v5        'Base cyan color      ' #89ddff
@var color    cg_v6        'Base blue color      ' #82aaff
@var color    cg_v7        'Base magenta color   ' #c792ea
@var color    cg_v8        'Base violet color    ' #9a91ea
@var color    cg_v9        'Base gray color      ' #ffffff

@var range    cg_fg_sat    'Adjust saturation of foreground colors' [0, 0, 100, 0.1, '%']
@var range    cg_sat       'Adjust saturation of syntax colors' [0, -50, 50, 0.01]
@var range    cg_lig       'Adjust lightness of syntax colors' [0, -30, 30, 0.01]
@var color    _inverse     'Button inverse color ' #ffffff
@var color    _shadow      'Shadow color         ' #00000040

@var text     f_base       'Base font' ''font_name''
@var text     f_mono       'Monospace font' ''font_name''
@var range    tab_size     'Set tab size' [4, 2, 8, 2]
@var text     b_hgwd       'Checkbox width/height' '1rem'

@var checkbox cb_color      'Use accent colors for contributions' 0
@var checkbox custom_font   'Use custom font overrides' 1
@var checkbox c_scrollbars  'Use custom scrollbar overrides' 1
@var checkbox navbar_sticky 'Use sticky position for the navbar' 0
@var checkbox latest_commit 'Use neutral colors in latest commit' 1
@var checkbox readme_header 'Use old readme header design' 1
@var checkbox short_headers 'Use shorter headers' 1
@var checkbox table_corners 'Use rounded corners for Markdown tables' 1
@var checkbox dimmed_labels 'Use dimmed issue labels in light mode' 1
@var checkbox short_navbars 'Use same width for navigation bars and content area' 1
@var checkbox chbx_a_header 'Fix notifications checkbox on header alignment' 0
@var checkbox code_borders  'Add borders around code blocks and similar elements' 1
==/UserStyle== */

// {{{ Helpers.
t       = transparent
i       = !important
vendors = official
ac      = var(--ac)
sh      = var(--sh)

// Convert colors to HSLA format.
/// NOTE: This is done just for consistency of generated colors.
to_hsla(input) {
    $h = {}
    $h.hue = unquote(split('deg', '%s' % ceil(hue(input), 2))[0])
    $h.saturation = ceil(saturation(input), 2)
    $h.lightness = ceil(lightness(input), 2)
    s('hsla(%s,%s,%s,1)', $h.hue, $h.saturation, $h.lightness)
}

// SVG-friendly colors mixin.
/// NOTE: Compiler does not like HSLA format, so we convert back to HEX.
to_svg(input) {
    s('\%23%s', unquote(substr(s('%s', convert(input)), 1, 6)))
}

// Color mixin.
/// All colors: `c: fg bg bg`
/// Only border-color: `c: 0 bg`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
    if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
    if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG mixin.
/// Same usage as `c` mixin.
g(x, y = 0, xi = 1, yi = 1) {
    if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
    if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// Border radius mixin.
rad() { border-radius: arguments }

// Box-shadow mixin.
b() { box-shadow: arguments }
// }}}

/{ // {{{ Color generator.
// Color-scheme picker.
ColorSchemes = {
    'custom':                   { BG:   cg_bg, FG:   cg_fg, AC:   cg_ac, V1:   cg_v1, V2:   cg_v2, V3:   cg_v3, V4:   cg_v4, V5:   cg_v5, V6:   cg_v6, V7:   cg_v7, V8:   cg_v8, V9:   cg_v9 }
    'old-colors':               { BG: #1f232a, FG: #eeeeee, AC: #7289da }
    'new-colors':               { BG: #292929, FG: #e6e6e6, AC: #d47d3f }
    'breeze-dark':              { BG: #232629, FG: #eff0f1, AC: #3daee9 }
    'github-dark-mode':         { BG: #0d1117, FG: #c9d1d9, AC: #58a6ff }
    'github-dark':              { BG: #181818, FG: #e6e6e6, AC: #4f8cc9, V1: #ff4444, V2: #fe9600, V3: #ffcc33, V4: #008833, V5: #4d5eff, V6: #4f8cc9, V7: #8368aa, V8: #6e5494, V9: #ffffff }
    'gruvbox-dark-soft':        { BG: #32302f, FG: #fbf1c7, AC: #d65d0e, V1: #fb4934, V2: #fe8019, V3: #fabd2f, V4: #b8bb26, V5: #8ec07c, V6: #83a598, V7: #d3859b, V8: #b3659b, V9: #eeeeee }
    'gruvbox-dark-medium':      { BG: #282828, FG: #fbf1c7, AC: #d65d0e, V1: #cc241d, V2: #d64d0e, V3: #d79921, V4: #98971a, V5: #689d6a, V6: #458588, V7: #c16286, V8: #a14286, V9: #eeeeee }
    'gruvbox-dark-hard':        { BG: #1c2021, FG: #fbf1c7, AC: #d65d0e, V1: #9d0006, V2: #af3a03, V3: #b57614, V4: #79740e, V5: #427b58, V6: #076678, V7: #8f3f71, V8: #6f1f71, V9: #eeeeee }
    'solarized-dark':           { BG: #03303c, FG: #bcc5c5, AC: #859900, V1: #dc322f, V2: #cb4b16, V3: #b58900, V4: #859900, V5: #2aa198, V6: #268bd2, V7: #d33682, V8: #6c71c4, V9: #eeeeee }
    'dracula':                  { BG: #282a36, FG: #f8f8f2, AC: #bd93f9, V1: #ff5555, V2: #ffb86c, V3: #f1fa8c, V4: #50fa7b, V5: #59f7d2, V6: #8be9fd, V7: #ff79c6, V8: #bd93f9, V9: #ffffff }
    'nord-dark':                { BG: #2e3440, FG: #eceff4, AC: #5e81ac, V1: #bd616a, V2: #d08770, V3: #ebcb8b, V4: #a3be8c, V5: #8fbcbb, V6: #88c0d0, V7: #b48ead, V8: #81a1c1, V9: #cccccc }
    'arc-dark':                 { BG: #343944, FG: #c1c8d1, AC: #5294e2, V1: #d25252, V2: #efc090, V3: #ffc600, V4: #7fb347, V5: #bed6ff, V6: #79abff, V7: #bfa4a4, V8: #d197d9, V9: #cccccc }
    'moonlight':                { BG: #1e2030, FG: #c8d3f5, AC: #82aaff, V1: #ff5370, V2: #ff995e, V3: #ffc777, V4: #c3e88d, V5: #86e1fc, V6: #82aaff, V7: #fca7ea, V8: #c597f9, V9: #ffffff }
    'monokai':                  { BG: #272822, FG: #e8e8e3, AC: #fd9720, V1: #e73c50, V2: #fd9720, V3: #e6db74, V4: #a6e22d, V5: #66d9ef, V6: #7aa6da, V7: #f92772, V8: #ae81ff, V9: #eeeeee }
    'horizon':                  { BG: #1c1e26, FG: #d5c1ac, AC: #E95378, V1: #e95678, V2: #f09383, V3: #fab795, V4: #09f7a0, V5: #59e3e3, V6: #21bfc2, V7: #db77cc, V8: #b877db, V9: #ffffff }
    'doom-one':                 { BG: #21242b, FG: #bbc2cf, AC: #51afef, V1: #ff6c6b, V2: #da8548, V3: #ecbe7b, V4: #98be65, V5: #46d9ff, V6: #51afef, V7: #c678dd, V8: #a9a1e1, V9: #cccccc }
    'lantern':                  { BG: #261b17, FG: #ffffff, AC: #e35b15, V1: #e01d1d, V2: #e35b15, V3: #fabc2c, V4: #4d772d, V5: #66a4a4, V6: #4395a3, V7: #fab2c2, V8: #b666e6, V9: #ffffff }
    'deep-dark':                { BG: #111111, FG: #eff0f1, AC: #00adee, V1: #da4453, V2: #f79a63, V3: #fdbc4b, V4: #27ae60, V5: #1abc9c, V6: #2980b9, V7: #fe9ead, V8: #60459f, V9: #ffffff }
    'brave-dark':               { BG: #222222, FG: #d6d6d6, AC: #f96234 }
    'twilight':                 { BG: #171717, FG: #f7f7f7, AC: #8f9d6a }
    'ubuntu':                   { BG: #2c071a, FG: #f2f1ef, AC: #ef7847 }
}

// Select active color-scheme.
for color-scheme in ColorSchemes {
    if (color-scheme == cg_theme) {
        // main { dbg: s('%s %s', color-scheme, cg_theme) }
        define('BG', ColorSchemes[color-scheme].BG, global)
        define('FG', ColorSchemes[color-scheme].FG, global)
        define('AC', ColorSchemes[color-scheme].AC, global)
    }
}

for color-scheme in ColorSchemes {
    // Generate main colors.
    if (color-scheme == cg_theme) {
        // main { dbg: s('%s %s', color-scheme, cg_theme) }
        define('BG', ColorSchemes[color-scheme].BG, global)
        define('FG', ColorSchemes[color-scheme].FG, global)
        define('AC', ColorSchemes[color-scheme].AC, global)
    }

    // Generate syntax colors.
    if (color-scheme == sy_theme) {
        // main { dbg: s('%s %s', color-scheme, cg_theme) }
        define('V1', ColorSchemes[color-scheme].V1, global)
        define('V2', ColorSchemes[color-scheme].V2, global)
        define('V3', ColorSchemes[color-scheme].V3, global)
        define('V4', ColorSchemes[color-scheme].V4, global)
        define('V5', ColorSchemes[color-scheme].V5, global)
        define('V6', ColorSchemes[color-scheme].V6, global)
        define('V7', ColorSchemes[color-scheme].V7, global)
        define('V8', ColorSchemes[color-scheme].V8, global)
        define('V9', ColorSchemes[color-scheme].V9, global)
    }
}

// Color values and hues.
// NOTE: List with anonymous hashes.
colors = (
    { key: bg, color: BG } { key: fg, color: FG } { key: v0, color: AC } \
    { key: v1, color: V1 } { key: v2, color: V2 } { key: v3, color: V3 } \
    { key: v4, color: V4 } { key: v5, color: V5 } { key: v6, color: V6 } \
    { key: v7, color: V7 } { key: v8, color: V8 } { key: v9, color: V9 } \
)

// Alias colors.
$bg = colors[0]
$fg = colors[1]
// $dbg += '%s; %s; :::' % (($bg) ($fg))

// Generate background colors.
for num in 0..5 {
    $color = $bg.color
    if num == 1 {} // Skip base BG color.
    else if num == 0 { $color = darken($color, 10%) }
    else { $color = lighten($color, (num+2) * num/2%) }
    $color = to_hsla($color)

    $key = s('%s%s', $bg.key, num)
    $val = 'var(--%s-%s)' % (($bg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
}

// Generate foreground colors.
for num in 0..5 {
    $color = $fg.color
    if num == 1 {} // Skip base FG color.
    else if num == 0 { $color = lighten($color, 10%) }
    else { $color = darken($color, (num + num/1.25) * 5%) }

    $color = desaturate($color, cg_fg_sat)
    $color = to_hsla($color)
    // $dbg += '--- FG: ' + $color

    $key = s('%s%s', $fg.key, num)
    $val = 'var(--%s-%s)' % (($fg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
}

// Generate all other colors.
for c, i in colors[2..length(colors)] {
    // $dbg += s('::: c: %s, i: %s; ', c, i )
    // if c.key == v9 { $dbg += s('::: c: %s, i: %s; ', c, i ) }
    $sel  = colors[i+2]
    $dbg += ' ' + $sel

    for num in 0..9 {
        /// Generate accent/gray/syntax colors.
        $color = darken($sel.color, (100% - (num+3) * 7.5))
        $color = lightness($color, lightness($color) + num)

        /// Skip gray colors.
        if ($sel.key != v9) {
            $color = lightness($color, lightness($color) + (cg_lig/4))
            $color = desaturate($color, cg_sat)
        }

        /// Convert to HSLA format.
        $color = to_hsla($color)

        $key = s('%s%s', $sel.key, num)
        $val = 'var(--%s-%s)' % (($sel.key) (num))
        define('$' + $key, $color, global)
        define('' + $key, $val, global)
    }
}
} /// }}}

@-moz-document regexp('https?://((gist|docs|support)\\.)?github?.com(/.*)?') {
    // Userstyle variables.
    :root:not(#z) {
        /// Userstyle info.
        --note: 'Dark-GitHub v1.1.1'

        /// Feat -> Custom monospace font.
        $mono1 = 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo'
        $mono2 = 'DejaVu Sans Mono', 'Liberation Mono', 'Ubuntu Mono'
        --f-mono: f_mono, $mono1, $mono2, monospace

        /// Feat -> Custom base font.
        $base1 = -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica'
        $base2 = 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'
        --f-base: f_base, $base1, $base2

        /// Accent/shadow colors.
        --ac: AC
        --sh: _shadow

        /// Generate CSS color variables.
        colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
        for color in colors[0..1] {
            for tone in 0..5 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }
        for color in colors[2..length(colors)] {
            for tone in 0..9 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }

        /// Native CSS variables.
        --color-scale-black: v99 //#1b1f23;
        --color-scale-white: v90 //#ffffff;
        --color-scale-gray-0: v91 //#fafbfc;
        --color-scale-gray-1: v92 //#f6f8fa;
        --color-scale-gray-2: v93 //#e1e4e8;
        --color-scale-gray-3: v94 //#d1d5da;
        --color-scale-gray-4: v95 //#959da5;
        --color-scale-gray-5: v96 //#6a737d;
        --color-scale-gray-6: v97 //#586069;
        --color-scale-gray-7: v98 //#444d56;
        --color-scale-gray-8: v99 //#2f363d;
        --color-scale-gray-9: v90 //#24292e;
        --color-scale-blue-0: v61 //#f1f8ff;
        --color-scale-blue-1: v62 //#dbedff;
        --color-scale-blue-2: v63 //#c8e1ff;
        --color-scale-blue-3: v64 //#79b8ff;
        --color-scale-blue-4: v65 //#2188ff;
        --color-scale-blue-5: v66 //#0366d6;
        --color-scale-blue-6: v67 //#005cc5;
        --color-scale-blue-7: v68 //#044289;
        --color-scale-blue-8: v69 //#032f62;
        --color-scale-blue-9: v60 //#05264c;
        --color-scale-green-0: v41 //#f0fff4;
        --color-scale-green-1: v42 //#dcffe4;
        --color-scale-green-2: v43 //#bef5cb;
        --color-scale-green-3: v44 //#85e89d;
        --color-scale-green-4: v45 //#34d058;
        --color-scale-green-5: v46 //#28a745;
        --color-scale-green-6: v47 //#22863a;
        --color-scale-green-7: v48 //#176f2c;
        --color-scale-green-8: v49 //#165c26;
        --color-scale-green-9: v40 //#144620;
        --color-scale-yellow-0: v31 //#fffdef;
        --color-scale-yellow-1: v32 //#fffbdd;
        --color-scale-yellow-2: v33 //#fff5b1;
        --color-scale-yellow-3: v34 //#ffea7f;
        --color-scale-yellow-4: v35 //#ffdf5d;
        --color-scale-yellow-5: v36 //#ffd33d;
        --color-scale-yellow-6: v37 //#f9c513;
        --color-scale-yellow-7: v38 //#dbab09;
        --color-scale-yellow-8: v39 //#b08800;
        --color-scale-yellow-9: v30 //#735c0f;
        --color-scale-orange-0: v21 //#fff8f2;
        --color-scale-orange-1: v22 //#ffebda;
        --color-scale-orange-2: v23 //#ffd1ac;
        --color-scale-orange-3: v24 //#ffab70;
        --color-scale-orange-4: v25 //#fb8532;
        --color-scale-orange-5: v26 //#f66a0a;
        --color-scale-orange-6: v27 //#e36209;
        --color-scale-orange-7: v28 //#d15704;
        --color-scale-orange-8: v29 //#c24e00;
        --color-scale-orange-9: v20 //#a04100;
        --color-scale-red-0: v11 //#ffeef0;
        --color-scale-red-1: v12 //#ffdce0;
        --color-scale-red-2: v13 //#fdaeb7;
        --color-scale-red-3: v14 //#f97583;
        --color-scale-red-4: v15 //#ea4a5a;
        --color-scale-red-5: v16 //#d73a49;
        --color-scale-red-6: v17 //#cb2431;
        --color-scale-red-7: v18 //#b31d28;
        --color-scale-red-8: v19 //#9e1c23;
        --color-scale-red-9: v10 //#86181d;
        --color-scale-purple-0: v81 //#f5f0ff;
        --color-scale-purple-1: v82 //#e6dcfd;
        --color-scale-purple-2: v83 //#d1bcf9;
        --color-scale-purple-3: v84 //#b392f0;
        --color-scale-purple-4: v85 //#8a63d2;
        --color-scale-purple-5: v86 //#6f42c1;
        --color-scale-purple-6: v87 //#5a32a3;
        --color-scale-purple-7: v88 //#4c2889;
        --color-scale-purple-8: v89 //#3a1d6e;
        --color-scale-purple-9: v80 //#29134e;
        --color-scale-pink-0: v71 //#ffeef8;
        --color-scale-pink-1: v72 //#fedbf0;
        --color-scale-pink-2: v73 //#f9b3dd;
        --color-scale-pink-3: v74 //#f692ce;
        --color-scale-pink-4: v75 //#ec6cb9;
        --color-scale-pink-5: v76 //#ea4aaa;
        --color-scale-pink-6: v77 //#d03592;
        --color-scale-pink-7: v78 //#b93a86;
        --color-scale-pink-8: v79 //#99306f;
        --color-scale-pink-9: v70 //#6d224f;
        --color-auto-black: v99 //#1b1f23;
        --color-auto-white: v90 //#ffffff;
        --color-auto-gray-0: v90 //#fafbfc;
        --color-auto-gray-1: v91 //#f6f8fa;
        --color-auto-gray-2: v92 //#e1e4e8;
        --color-auto-gray-3: v93 //#d1d5da;
        --color-auto-gray-4: v94 //#959da5;
        --color-auto-gray-5: v95 //#6a737d;
        --color-auto-gray-6: v96 //#586069;
        --color-auto-gray-7: v97 //#444d56;
        --color-auto-gray-8: v98 //#2f363d;
        --color-auto-gray-9: v99 //#24292e;
        --color-auto-blue-0: v60 //#f1f8ff;
        --color-auto-blue-1: v61 //#dbedff;
        --color-auto-blue-2: v62 //#c8e1ff;
        --color-auto-blue-3: v63 //#79b8ff;
        --color-auto-blue-4: v64 //#2188ff;
        --color-auto-blue-5: v65 //#0366d6;
        --color-auto-blue-6: v66 //#005cc5;
        --color-auto-blue-7: v67 //#044289;
        --color-auto-blue-8: v68 //#032f62;
        --color-auto-blue-9: v69 //#05264c;
        --color-auto-green-0: v41 //#f0fff4;
        --color-auto-green-1: v42 //#dcffe4;
        --color-auto-green-2: v43 //#bef5cb;
        --color-auto-green-3: v44 //#85e89d;
        --color-auto-green-4: v45 //#34d058;
        --color-auto-green-5: v46 //#28a745;
        --color-auto-green-6: v47 //#22863a;
        --color-auto-green-7: v48 //#176f2c;
        --color-auto-green-8: v49 //#165c26;
        --color-auto-green-9: v40 //#144620;
        --color-auto-yellow-0: v31 //#fffdef;
        --color-auto-yellow-1: v32 //#fffbdd;
        --color-auto-yellow-2: v33 //#fff5b1;
        --color-auto-yellow-3: v34 //#ffea7f;
        --color-auto-yellow-4: v35 //#ffdf5d;
        --color-auto-yellow-5: v36 //#ffd33d;
        --color-auto-yellow-6: v37 //#f9c513;
        --color-auto-yellow-7: v38 //#dbab09;
        --color-auto-yellow-8: v39 //#b08800;
        --color-auto-yellow-9: v30 //#735c0f;
        --color-auto-orange-0: v20 //#fff8f2;
        --color-auto-orange-1: v21 //#ffebda;
        --color-auto-orange-2: v22 //#ffd1ac;
        --color-auto-orange-3: v23 //#ffab70;
        --color-auto-orange-4: v24 //#fb8532;
        --color-auto-orange-5: v25 //#f66a0a;
        --color-auto-orange-6: v26 //#e36209;
        --color-auto-orange-7: v27 //#d15704;
        --color-auto-orange-8: v28 //#c24e00;
        --color-auto-orange-9: v29 //#a04100;
        --color-auto-red-0: v11 //#ffeef0;
        --color-auto-red-1: v12 //#ffdce0;
        --color-auto-red-2: v13 //#fdaeb7;
        --color-auto-red-3: v14 //#f97583;
        --color-auto-red-4: v15 //#ea4a5a;
        --color-auto-red-5: v16 //#d73a49;
        --color-auto-red-6: v17 //#cb2431;
        --color-auto-red-7: v18 //#b31d28;
        --color-auto-red-8: v19 //#9e1c23;
        --color-auto-red-9: v10 //#86181d;
        --color-auto-purple-0: v81 //#e6dcfd;
        --color-auto-purple-1: v82 //#e6dcfd;
        --color-auto-purple-2: v83 //#d1bcf9;
        --color-auto-purple-3: v84 //#b392f0;
        --color-auto-purple-4: v85 //#8a63d2;
        --color-auto-purple-5: v86 //#6f42c1;
        --color-auto-purple-6: v87 //#5a32a3;
        --color-auto-purple-7: v88 //#4c2889;
        --color-auto-purple-8: v89 //#3a1d6e;
        --color-auto-purple-9: v80 //#29134e;
        --color-auto-pink-0: v71 //#ffeef8;
        --color-auto-pink-1: v72 //#fedbf0;
        --color-auto-pink-2: v73 //#f9b3dd;
        --color-auto-pink-3: v74 //#f692ce;
        --color-auto-pink-4: v75 //#ec6cb9;
        --color-auto-pink-5: v76 //#ea4aaa;
        --color-auto-pink-6: v77 //#d03592;
        --color-auto-pink-7: v78 //#b93a86;
        --color-auto-pink-8: v79 //#99306f;
        --color-auto-pink-9: v70 //#6d224f;

        --color-text-primary: fg1 //#24292e;
        --color-text-secondary: fg2 //#586069;
        --color-text-tertiary: fg3 //#6a737d;
        --color-text-placeholder: fg5 //#6a737d;
        --color-text-disabled: fg5 //#6a737d;
        --color-text-inverse: #fff;
        --color-text-link: ac //#0366d6;
        --color-text-danger: v17 //#cb2431;
        --color-text-success: v46 //#22863a;
        --color-text-warning: v27 //#b08800;
        --color-text-white: #fff;

        --color-icon-primary: fg1 //#24292e;
        --color-icon-secondary: fg4 //#586069;
        --color-icon-tertiary: fg3 //#959da5;
        --color-icon-info: v65 //#0366d6;
        --color-icon-danger: v15 //#d73a49;
        --color-icon-success: v45 //#22863a;
        --color-icon-warning: v35 //#b08800;

        --color-state-hover-primary-bg: v03 //#0366d6;
        --color-state-hover-primary-border: v05 //#0366d6;
        --color-state-hover-primary-text: #ffffff;
        --color-state-hover-primary-icon: #ffffff;
        --color-state-hover-secondary-bg: bg2 //#f6f8fa;
        --color-state-hover-secondary-border: bg5 //#f6f8fa;
        --color-state-selected-primary-bg: v04 //#0366d6;
        --color-state-selected-primary-border: v06 //#0366d6;
        --color-state-selected-primary-text: #ffffff;
        --color-state-selected-primary-icon: #ffffff;
        --color-state-focus-border: v67 //#0366d6;
        --color-state-focus-shadow: 0 0 0 3px v61 //rgba(3,102,214,0.3);

        --color-border-primary: bg5 //#e1e4e8;
        --color-border-secondary: bg3 //#eaecef;
        --color-border-tertiary: bg4 //#d1d5da;
        --color-border-overlay: bg5 //#e1e4e8
        --color-border-inverse: bg1 //#fff;
        --color-border-info: v64 //#0366d6;
        --color-border-danger: v14 //#d73a49;
        --color-border-success: v44 //#34d058;
        --color-border-warning: v34 //#f9c513;

        --color-bg-canvas: bg1 //#fff;            Main elements
        --color-bg-canvas-mobile: #fff;
        --color-bg-canvas-inverse: bg2 //#24292e; Navbar
        --color-bg-canvas-inset: bg0 //#f6f8fa;   Dashboard inset
        --color-bg-primary: bg1 //#fff;           Sidebar
        --color-bg-secondary: bg2 //#fafbfc;      Navigation/notices
        --color-bg-tertiary: bg3 //#f6f8fa;       Background
        --color-bg-overlay: bg1 //#fff;
        --color-bg-backdrop: rgba(27,31,35,0.5)
        --color-bg-info: v61 //#f1f8ff;
        --color-bg-info-inverse: v63 //#0366d6;
        --color-bg-danger: v11 //#ffeef0;
        --color-bg-danger-inverse: v15 //#d73a49;
        --color-bg-success: v41 //#dcffe4;
        --color-bg-success-inverse: v45 //#28a745;
        --color-bg-warning: v31 //#fff5b1;
        --color-bg-warning-inverse: v35 //#ffd33d;

        --color-shadow-small: 0 1px 0 #0002 //rgba(27,31,35,0.04);
        --color-shadow-medium: 0 3px 6px #0003 //rgba(149,157,165,0.15);
        --color-shadow-large: 0 8px 15px #0004 //rgba(149,157,165,0.2);
        --color-shadow-extra-large: 0 10px 20px #0003;
        --color-shadow-highlight: inset 0 1px 0 #0002 //hsla(0,0%,100%,0.25);
        --color-shadow-inset: inset 0 1px 0 #0002 //rgba(225,228,232,0.2);
        --color-shadow-focus: 0 0 0 3px v03

        --color-fade-black-10: #ffffff10 //#1b1f231a;
        --color-fade-black-15: #ffffff20 //#1b1f2326;
        --color-fade-black-30: #ffffff30 //#1b1f234d;
        --color-fade-black-50: #ffffff50 //#1b1f2380;
        --color-fade-black-70: #ffffff90 //#1b1f23b3;
        --color-fade-black-85: #ffffff85 //#1b1f23d9;
        --color-fade-white-10: #ffffff1a;
        --color-fade-white-15: #ffffff26;
        --color-fade-white-30: #ffffff4d;
        --color-fade-white-50: #ffffff80;
        --color-fade-white-70: #ffffffb3;
        --color-fade-white-85: #ffffffd9;

        --color-alert-info-text: v69 //#24292e;
        --color-alert-info-icon: v67 //rgba(4,66,137,0.6);
        --color-alert-info-bg: mix(convert($v61), convert($bg2), 25) //#dbedff;
        --color-alert-info-border: mix(convert($v63), convert($bg5), 35) //rgba(4,66,137,0.2);
        --color-alert-warn-text: v39 //#24292e;
        --color-alert-warn-icon: v37 //#b08800;
        --color-alert-warn-bg: mix(convert($v31), convert($bg2), 25) //#fffbdd;
        --color-alert-warn-border: mix(convert($v33), convert($bg5), 35) //rgba(176,136,0,0.2);
        --color-alert-error-text: v19 //#24292e;
        --color-alert-error-icon: v17 //rgba(158,28,35,0.6);
        --color-alert-error-bg: mix(convert($v11), convert($bg2), 25) //#ffe3e6;
        --color-alert-error-border: mix(convert($v13), convert($bg5), 35) //rgba(158,28,35,0.2);
        --color-alert-success-text: v49 //#24292e;
        --color-alert-success-icon: v47 //rgba(23,111,44,0.8);
        --color-alert-success-bg: mix(convert($v41), convert($bg2), 25) //#dcffe4;
        --color-alert-success-border: mix(convert($v43), convert($bg5), 35) //rgba(23,111,44,0.2);

        --color-autocomplete-bg: bg3 //#fff;
        --color-autocomplete-border: bg5 //#e1e4e8;
        --color-autocomplete-row-border: bg4 //#eaecef;
        --color-autocomplete-shadow: 0 3px 6px #0002 //rgba(149,157,165,0.15);
        --color-blankslate-icon: fg5 //#a3aab1;

        --color-btn-text: fg1 //#24292e;
        --color-btn-bg: bg2 //#fafbfc;
        --color-btn-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-shadow: 0 1px 0 #00000010 //rgba(27,31,35,0.04);
        --color-btn-inset-shadow: inset 0 1px 0 #00000010 //hsla(0,0%,100%,0.25);
        --color-btn-hover-bg: bg3 //#f3f4f6;
        --color-btn-hover-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-active-bg: bg4 //#3d444d;
        --color-btn-active-border: bg5 //#636e7b;
        --color-btn-selected-bg: bg4 //#edeff2;
        --color-btn-focus-bg: bg4 //#fafbfc;
        --color-btn-focus-border: bg5 //rgba(27,31,35,0.15);
        --color-btn-focus-shadow: 0 0 0 3px v62 //rgba(3,102,214,0.3);
        --color-btn-shadow-active: inset 0 0.15em 0.3em #00000010 //rgba(27,31,35,0.15);
        --color-btn-shadow-input-focus: 0 0 0 0.2em v63 //rgba(3,102,214,0.3);

        --color-btn-primary-text: v99 //#fff;
        --color-btn-primary-bg: v42 //#2ea44f;
        --color-btn-primary-border: v44 //rgba(27,31,35,0.15);
        --color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-primary-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03);
        --color-btn-primary-hover-bg: v43 //#2c974b;
        --color-btn-primary-hover-border: v45 //rgba(27,31,35,0.15);
        --color-btn-primary-selected-bg: v44 //#2a8f47;
        --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(20,70,32,0.2);
        --color-btn-primary-disabled-text: v43 //hsla(0,0%,100%,0.8);
        --color-btn-primary-disabled-bg: v41 //#94d3a2;
        --color-btn-primary-disabled-border: v42 //rgba(27,31,35,0.1);
        --color-btn-primary-focus-bg: v43 //#2ea44f;
        --color-btn-primary-focus-border: v45 //rgba(27,31,35,0.15);
        --color-btn-primary-focus-shadow: 0 0 0 3px v41 //rgba(46,164,79,0.4);
        --color-btn-primary-icon: hsla(0,0%,100%,0.8);
        --color-btn-primary-counter-bg: hsla(0,0%,100%,0.2);

        --color-btn-outline-text: v67 //#0366d6;
        --color-btn-outline-hover-text: v99 //#fff;
        --color-btn-outline-hover-bg: v63 //#0366d6;
        --color-btn-outline-hover-border: v64 //rgba(27,31,35,0.15);
        --color-btn-outline-hover-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-outline-hover-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03)
        --color-btn-outline-hover-counter-bg: hsla(0,0%,100%,0.2);
        --color-btn-outline-selected-text: v99 //#f0f6fc;
        --color-btn-outline-selected-bg: v64 //#035fc7;
        --color-btn-outline-selected-border: v65 //rgba(27,31,35,0.15);
        --color-btn-outline-selected-shadow: inset 0 1px 0 rgba(5,38,76,0.2);
        --color-btn-outline-disabled-text: fg5 //rgba(3,102,214,0.5);
        --color-btn-outline-disabled-bg: bg2 //#fafbfc;
        --color-btn-outline-disabled-counter-bg: rgba(3,102,214,0.05);
        --color-btn-outline-focus-border: v66 //rgba(27,31,35,0.15);
        --color-btn-outline-focus-shadow: 0 0 0 3px v62 //rgba(0,92,197,0.4);
        --color-btn-outline-counter-bg: rgba(3,102,214,0.1);

        --color-btn-danger-text: v16 //#d73a49;
        --color-btn-danger-hover-text: v99 //#fff;
        --color-btn-danger-hover-bg: v12 //#cb2431;
        --color-btn-danger-hover-border: v14 //rgba(27,31,35,0.15);
        --color-btn-danger-hover-shadow: 0 1px 0 rgba(27,31,35,0.1);
        --color-btn-danger-hover-inset-shadow: inset 0 1px 0 hsla(0,0%,100%,0.03);
        --color-btn-danger-hover-counter-bg: hsla(0,0%,100%,0.2);
        --color-btn-danger-selected-text: v99 //#fff;
        --color-btn-danger-selected-bg: v12 //#d42d3d;
        --color-btn-danger-selected-border: v14 //rgba(27,31,35,0.15);
        --color-btn-danger-selected-shadow: inset 0 1px 0 rgba(134,24,29,0.2);
        --color-btn-danger-disabled-text: v14 //rgba(215,58,73,0.5);
        --color-btn-danger-disabled-bg: bg1 //#fafbfc;
        --color-btn-danger-disabled-counter-bg: rgba(215,58,73,0.05);
        --color-btn-danger-focus-border: v15 //rgba(27,31,35,0.15);
        --color-btn-danger-focus-shadow: 0 0 0 3px v11 //rgba(203,36,49,0.4);
        --color-btn-danger-counter-bg: rgba(215,58,73,0.1);

        --color-btn-counter-bg: #1b1f2314;
        --color-counter-text: fg1 //#24292e;
        --color-counter-bg: bg4 //#d1d5da80;
        --color-counter-border: #d1d5da80;
        --color-topic-tag-text: v09 //#0366d6;
        --color-topic-tag-bg: mix(AC, BG, 10) //#f1f8ff;
        --color-topic-tag-hover-bg: mix(AC, BG, 15) //#def;
        --color-topic-tag-active-bg: mix(AC, BG, 20) //#e7f3ff;

        --color-merge-box-success-icon-bg: #28a745;
        --color-merge-box-success-icon-text: #fff;
        --color-merge-box-success-icon-border: t;
        --color-merge-box-success-indicator-bg: #28a745;
        --color-merge-box-success-indicator-border: t;
        --color-merge-box-merged-icon-bg: #6f42c1;
        --color-merge-box-merged-icon-text: #fff;
        --color-merge-box-merged-icon-border: t;
        --color-merge-box-merged-box-border: #6f42c1;
        --color-merge-box-neutral-icon-bg: #6a737d;
        --color-merge-box-neutral-icon-text: #fff;
        --color-merge-box-neutral-icon-border: t;
        --color-merge-box-neutral-indicator-bg: #6a737d;
        --color-merge-box-neutral-indicator-border: t;
        --color-merge-box-warning-icon-bg: #dbab09;
        --color-merge-box-warning-icon-text: #fff;
        --color-merge-box-warning-icon-border: t;
        --color-merge-box-warning-box-border: #ffd33d;
        --color-merge-box-warning-merge-highlight: t;
        --color-merge-box-error-icon-bg: #d73a49;
        --color-merge-box-error-icon-text: #fff;
        --color-merge-box-error-icon-border: t;
        --color-merge-box-error-indicator-bg: #d73a49;
        --color-merge-box-error-indicator-border: t;

        --color-project-card-bg: bg2 //#fff;
        --color-project-header-bg: bg3 //#24292e;
        --color-project-sidebar-bg: bg1 //#fff;
        --color-project-gradient-in: #fff;
        --color-project-gradient-out: hsla(0,0%,100%,0);

        --color-input-bg: bg1 //#fff;
        --color-input-contrast-bg: bg1 //#fafbfc;
        --color-input-border: bg5 //#e1e4e8;
        --color-input-shadow: inset 0 1px 2px rgba(27,31,35,0.075);
        --color-input-disabled-bg: bg1 //#fff;
        --color-input-disabled-border: bg3 //#e1e4e8;
        --color-input-warning-border: v30 //#f9c513;
        --color-input-error-border: v10 //#cb2431;

        --color-input-tooltip-success-text: #144620;
        --color-input-tooltip-success-bg: #dcffe4;
        --color-input-tooltip-success-border: #34d058;
        --color-input-tooltip-warning-text: #735c0f;
        --color-input-tooltip-warning-bg: #fff5b1;
        --color-input-tooltip-warning-border: #f9c513;
        --color-input-tooltip-error-text: #86181d;
        --color-input-tooltip-error-bg: #ffeef0;
        --color-input-tooltip-error-border: #f97583;

        --color-avatar-bg: bg1 //#ffffff;
        --color-avatar-border: #1b1f231a;
        --color-avatar-stack-fade: #d1d5da;
        --color-avatar-stack-fade-more: #e1e4e8;
        --color-avatar-child-shadow: -2px -2px 0 hsla(0,0%,100%,0.8);

        --color-toast-text: #24292e;
        --color-toast-bg: #fff;
        --color-toast-border: #e1e4e8;
        --color-toast-shadow: 0 8px 24px rgba(149,157,165,0.2);
        --color-toast-icon: #fff;
        --color-toast-icon-bg: #0366d6;
        --color-toast-icon-border: t;
        --color-toast-success-text: #24292e;
        --color-toast-success-border: #e1e4e8;
        --color-toast-success-icon: #fff;
        --color-toast-success-icon-bg: #28a745;
        --color-toast-success-icon-border: t;
        --color-toast-warning-text: #24292e;
        --color-toast-warning-border: #e1e4e8;
        --color-toast-warning-icon: #24292e;
        --color-toast-warning-icon-bg: #ffd33d;
        --color-toast-warning-icon-border: t;
        --color-toast-danger-text: #24292e;
        --color-toast-danger-border: #e1e4e8;
        --color-toast-danger-icon: #fff;
        --color-toast-danger-icon-bg: #d73a49;
        --color-toast-danger-icon-border: t;
        --color-toast-loading-text: #24292e;
        --color-toast-loading-border: #e1e4e8;
        --color-toast-loading-icon: #fff;
        --color-toast-loading-icon-bg: #586069;
        --color-toast-loading-icon-border: t;


        --color-timeline-text: fg3 //#444d56;
        --color-timeline-badge-bg: bg3 //#e1e4e8;
        --color-timeline-target-badge-border: v04 //#2188ff;
        --color-timeline-target-badge-shadow: v05 //#c8e1ff;

        --color-select-menu-bg: bg2 //#fff;
        --color-select-menu-border: bg5 //#e1e4e8;
        --color-select-menu-border-secondary: bg4 //#eaecef;
        --color-select-menu-shadow: 0 0 18px rgba(27,31,35,0.4);
        --color-select-menu-backdrop-bg: rgba(27,31,35,0.5);
        --color-select-menu-backdrop-border: t;
        --color-select-menu-tap-highlight: rgba(209,213,218,0.5);
        --color-select-menu-tap-focus-bg: #dbedff;

        --color-box-blue-border: v64 //#c8e1ff;
        --color-box-row-yellow-bg: v31 //#fffbdd;
        --color-box-row-blue-bg: v61 //#f1f8ff;
        --color-box-header-blue-bg: v61 //#f1f8ff;
        --color-box-header-blue-border: v64 //#c8e1ff;
        --color-box-border-info: rgba(convert($v54), 0.6) //rgba(3,102,214,0.2);
        --color-box-bg-info: rgba(convert($v52), 0.3) //#f1f8ff;
        --color-box-border-info: mix(convert($v65), convert($bg5), 25%) //rgba(3,102,214,0.2);
        --color-box-bg-info: mix(convert($v61), convert($bg3), 25%) //#f1f8ff;
        --color-box-border-warning: v34 //rgba(255,211,61,0.4);
        --color-box-bg-warning: v31 //#fffdef;

        --color-dropdown-bg: bg1 //#fff;
        --color-dropdown-border: bg5 //#e1e4e8;
        --color-dropdown-shadow: 0 8px 24px #0002 //rgba(149,157,165,0.2);

        --color-label-border: bg5 //#e1e4e8;
        --color-label-primary-text: fg1 //#24292e;
        --color-label-primary-border: fg3 //#6a737d;
        --color-label-secondary-text: fg3 //#586069;
        --color-label-secondary-border: fg5 //#e1e4e8;
        --color-label-info-text: v67 //#0366d6;
        --color-label-info-border: v65 //#0366d6;
        --color-label-success-text: v47 //#22863a;
        --color-label-success-border: v45 //#28a745;
        --color-label-warning-text: v37 //#735c0f;
        --color-label-warning-border: v35 //#b08800;
        --color-label-danger-text: v17 //#d73a49;
        --color-label-danger-border: v15 //#cb2431;

        --color-counter-primary-text: fg1 //#fff;
        --color-counter-primary-bg: bg5 //#6a737d;
        --color-counter-secondary-text: fg1 //#6a737d;
        --color-counter-secondary-bg: bg4 //rgba(209,213,218,0.5);

        --color-popover-border: bg5 //#1b1f2326;

        --color-branch-name-text: fg3 //#1b1f2399;
        --color-branch-name-icon: fg3 //#a8bbd0;
        --color-branch-name-bg: bg3 //#eaf5ff;
        --color-branch-name-link-text: ac //#0366d6;
        --color-branch-name-link-icon: fg3 //#a8bbd0;
        --color-branch-name-link-bg: bg3 //#eaf5ff;

        --color-markdown-code-bg: bg2 //#1b1f230d;
        --color-markdown-frame-border: #dfe2e5;
        --color-markdown-blockquote-border: bg4 //#dfe2e5;
        --color-markdown-table-border: bg5 //#dfe2e5;
        --color-markdown-table-tr-border: #c6cbd1;

        --color-menu-heading-text: fg1 //#24292e;
        --color-menu-border-active: ac //#f9826c;
        --color-menu-bg-active: bg2 //t;
        --color-sidenav-selected-bg: bg1 //#fff;
        --color-sidenav-border-active: ac //#f9826c;
        --color-tabnav-selected-bg: bg1 //#fff;
        --color-header-text: fg3 //#ffffffb3;
        --color-header-bg: bg2 //#24292e;
        --color-header-logo: fg1 //#fff;
        --color-filter-item-bar-bg: #eff3f6;
        --color-hidden-text-expander-bg: bg4 //#dfe2e5;
        --color-hidden-text-expander-bg-hover: bg4 //#c6cbd1;
        --color-drag-and-drop-border: #c3c8cf;
        --color-upload-enabled-border: bg5 //#dfe2e5;
        --color-upload-enabled-border-focused: v66 //#4a9eff;
        --color-previewable-comment-form-border: #c3c8cf;
        --color-previewable-comment-form-bg: t //#fff; /// @upstream

        --color-underlinenav-border: rgba(209,213,218,0);
        --color-underlinenav-border-hover: bg5 //#d1d5da;
        --color-underlinenav-border-active: ac //#f9826c;
        --color-underlinenav-text: fg3 //#24292e;
        --color-underlinenav-text-hover: fg3 //#24292e;
        --color-underlinenav-text-active: fg1 //#24292e;
        --color-underlinenav-icon: fg3 //#959da5;
        --color-underlinenav-icon-hover: fg2 //#959da5;
        --color-underlinenav-icon-active: fg1 //#24292e;
        --color-underlinenav-counter-text: fg1 //#24292e;
        --color-underlinenav-counter-bg: bg4 //rgba(209,213,218,0.5);

        --color-verified-badge-text: v47 //#22863a;
        --color-verified-badge-bg: bg2 //#fff;
        --color-verified-badge-border: bg5 //#e1e4e8;

        --color-social-count-bg: bg3 //#fff;
        --color-tooltip-text: fg1 //#cdd9e5;
        --color-tooltip-bg: bg5 //#636e7b;
        --color-header-search-bg: bg3 //#24292e;
        --color-header-search-border: bg5 //#444d56;
        --color-search-keyword-hl: v31 //#fffbdd;

        --color-diffstat-neutral-bg: bg5 //#d1d5da;
        --color-diffstat-neutral-border: bg5 //#d1d5da;
        --color-diffstat-deletion-bg: v15 //#d73a49;
        --color-diffstat-deletion-border: v15 //#d73a49;
        --color-diffstat-addition-bg: v45 //#28a745;
        --color-diffstat-addition-border: v45 //#28a745;

        /// Marketing buttons.
        --color-mktg-success: v46 //#29933d;
        --color-mktg-info: v66 //#2a7bf3;
        --color-mktg-bg-shade-gradient-top: rgba(1,4,9,0.065);
        --color-mktg-bg-shade-gradient-bottom: rgba(1,4,9,0);
        --color-mktg-btn-primary-bg-top: v43 //#34b759;
        --color-mktg-btn-primary-bg-bottom: v42 //#2ea44f;
        --color-mktg-btn-primary-bg-overlay-top: v44 //#279b42;
        --color-mktg-btn-primary-bg-overlay-bottom: v43 //#22863a;
        --color-mktg-btn-bg: v64 //#1f6feb;
        --color-mktg-btn-border: v66 //#1f6feb;
        --color-mktg-btn-text: v99 //#f0f6fc;
        --color-mktg-btn-icon: v99 //#f0f6fc;
        // --color-mktg-btn-focus-shadow: 0 0 0 3px rgba(31,111,235,0.3);
        --color-mktg-btn-hover-bg: v65 //#388bfd;
        --color-mktg-btn-hover-border: v67 //#388bfd;
        // --color-mktg-btn-disabled-bg: rgba(56,139,253,0.5);
        // --color-mktg-btn-disabled-border: rgba(0,0,0,0);
        // --color-mktg-btn-disabled-text: rgba(240,246,252,0.5);
        // --color-mktg-btn-disabled-icon: rgba(240,246,252,0.5);
        --color-mktg-btn-primary-bg: v44 //#238636;
        --color-mktg-btn-primary-border: v46 //#238636;
        --color-mktg-btn-primary-text: v99 //#f0f6fc;
        --color-mktg-btn-primary-icon: v99 //#f0f6fc;
        // --color-mktg-btn-primary-focus-shadow: 0 0 0 3px rgba(35,134,54,0.3);
        --color-mktg-btn-primary-hover-bg: v45 //#2ea043;
        --color-mktg-btn-primary-hover-border: v47 //#2ea043;
        // --color-mktg-btn-primary-disabled-bg: rgba(46,160,67,0.5);
        // --color-mktg-btn-primary-disabled-border: rgba(0,0,0,0);
        // --color-mktg-btn-primary-disabled-text: rgba(240,246,252,0.5);
        // --color-mktg-btn-primary-disabled-icon: rgba(240,246,252,0.5);
        // --color-mktg-btn-outline-bg: rgba(0,0,0,0);
        --color-mktg-btn-outline-border: v64 //rgba(56,139,253,0.5);
        --color-mktg-btn-outline-text: v66 //#388bfd;
        --color-mktg-btn-outline-icon: v66 //#388bfd;
        // --color-mktg-btn-outline-focus-shadow: 0 0 0 3px rgba(56,139,253,0.3);
        // --color-mktg-btn-outline-hover-bg: rgba(0,0,0,0);
        --color-mktg-btn-outline-hover-border: v67 //#388bfd;
        --color-mktg-btn-outline-hover-text: v69 //#58a6ff;
        --color-mktg-btn-outline-hover-icon: v69 //#58a6ff;
        // --color-mktg-btn-outline-disabled-bg: rgba(0,0,0,0);
        // --color-mktg-btn-outline-disabled-border: rgba(56,139,253,0.2);
        // --color-mktg-btn-outline-disabled-text: rgba(56,139,253,0.5);
        // --color-mktg-btn-outline-disabled-icon: rgba(56,139,253,0.5);
        // --color-mktg-btn-dark-bg: rgba(0,0,0,0);
        // --color-mktg-btn-dark-border: rgba(201,209,217,0.5);
        // --color-mktg-btn-dark-text: #c9d1d9;
        // --color-mktg-btn-dark-icon: #c9d1d9;
        // --color-mktg-btn-dark-focus-shadow: 0 0 0 3px rgba(201,209,217,0.3);
        // --color-mktg-btn-dark-hover-bg: rgba(201,209,217,0.5);
        // --color-mktg-btn-dark-hover-border: rgba(201,209,217,0.5);
        // --color-mktg-btn-dark-hover-text: #0d1117;
        // --color-mktg-btn-dark-hover-icon: #0d1117;
        // --color-mktg-btn-dark-disabled-bg: rgba(0,0,0,0);
        // --color-mktg-btn-dark-disabled-border: rgba(201,209,217,0.2);
        // --color-mktg-btn-dark-disabled-text: rgba(201,209,217,0.5);
        // --color-mktg-btn-dark-disabled-icon: rgba(201,209,217,0.5);

        --color-bg-discussions-row-emoji-box: v93 //rgba(209, 213, 218, 0.5);
        --color-repo-language-color-border: #fff1 //rgba(27,31,35,0.1);
        --color-files-explorer-icon: fg5 //#79b8ff;
        --color-hl-author-bg: #f1f8ff;
        --color-hl-author-border: #c8e1ff;
        --color-logo-subdued: #d1d5da;
        --color-discussion-border: #a2cbac;
        --color-discussion-bg-success: #28a745;

        --color-global-nav-logo: #fff;
        --color-global-nav-bg: #24292e;
        --color-global-nav-text: #fff;
        --color-global-nav-icon: #fff;
        --color-global-nav-input-bg: #fafbfc;
        --color-global-nav-input-border: #fafbfc;
        --color-global-nav-input-icon: #d1d5da;
        --color-global-nav-input-placeholder: #959da5;

        --color-calendar-graph-day-bg: bg2 //#ebedf0;
        --color-calendar-graph-day-border: #88888812 //#1b1f230f;
        --color-calendar-graph-day-L1-bg: (cb_color) ? rgba(AC, 0.2) : rgba(V4, 0.2) // convert(v41) //#9be9a8;
        --color-calendar-graph-day-L2-bg: (cb_color) ? rgba(AC, 0.4) : rgba(V4, 0.4) // convert(v43) //#40c463;
        --color-calendar-graph-day-L3-bg: (cb_color) ? rgba(AC, 0.7) : rgba(V4, 0.7) // convert(v46) //#30a14e;
        --color-calendar-graph-day-L4-bg: (cb_color) ? rgba(AC, 1.0) : rgba(V4, 1.0) // convert(v49) //#216e39;
        --color-calendar-graph-day-L4-border: #88888812 //#1b1f230f;
        --color-calendar-graph-day-L3-border: #88888812 //#1b1f230f;
        --color-calendar-graph-day-L2-border: #88888812 //#1b1f230f;
        --color-calendar-graph-day-L1-border: #88888812 //#1b1f230f;
        --color-calendar-halloween-graph-day-L1-bg: v29 //#ffee4a;
        --color-calendar-halloween-graph-day-L2-bg: v26 //#ffc501;
        --color-calendar-halloween-graph-day-L3-bg: v23 //#fe9600;
        --color-calendar-halloween-graph-day-L4-bg: v20 //#03001c;

        --color-footer-invertocat-octicon: fg3 //#d1d5da;
        --color-footer-invertocat-octicon-hover: fg5 //#6a737d;

        /// State badges.
        --color-pr-state-draft-text: v97 //#768390;
        --color-pr-state-draft-bg: rgba(convert($v97), 0.15) //rgba(118,131,144,0.1);
        --color-pr-state-draft-border: rgba(convert($v97), 0.4) //rgba(118,131,144,0.4);
        --color-pr-state-open-text: v47 //#57ab5a;
        --color-pr-state-open-bg: rgba(convert($v47), 0.15) //rgba(87,171,90,0.1);
        --color-pr-state-open-border: rgba(convert($v47), 0.4) //rgba(87,171,90,0.4);
        --color-pr-state-merged-text: v77 //#986ee2;
        --color-pr-state-merged-bg: rgba(convert($v77), 0.15) //rgba(176,131,240,0.1);
        --color-pr-state-merged-border: rgba(convert($v77), 0.4) //rgba(176,131,240,0.4);
        --color-pr-state-closed-text: v17 //#e5534b;
        --color-pr-state-closed-bg: rgba(convert($v17), 0.15) //rgba(201,60,55,0.1);
        --color-pr-state-closed-border: rgba(convert($v17), 0.4) //rgba(201,60,55,0.4);

        /// Diffs
        --color-diffstat-neutral-bg: bg5 //#d1d5da;
        --color-diffstat-neutral-border: bg5 //#d1d5da;
        --color-diffstat-deletion-bg: v16 //#d73a49;
        --color-diffstat-deletion-border: v16 //#d73a49;
        --color-diffstat-addition-bg: v46 //#28a745;
        --color-diffstat-addition-border: v46 //#28a745;

        /// Markdown diffs.
        --color-diff-addition-text: v47 //#22863a;
        --color-diff-addition-bg: rgba(convert($v41), 0.3) //#e6ffed;
        --color-diff-addition-border: v45 //#34d058;
        --color-diff-deletion-text: v17 //#cb2431;
        --color-diff-deletion-bg: rgba(convert($v11), 0.3) //#ffeef0;
        --color-diff-deletion-border: v15 //#d73a49;
        --color-diff-change-text: v37 //#b08800;
        --color-diff-change-bg: v31 //#fff5b1;
        --color-diff-change-border: v35 //#f9c513;

        /// Code diffs.
        --color-code-selection-bg: bg2 //#c8e1ff;
        --color-blob-line-highlight-bg: rgba(convert($v31), 0.3) //#fffbdd;
        --color-blob-line-highlight-border: t // rgba(0,0,0,0);

        --color-diff-blob-num-text: fg5 //rgba(27,31,35,0.3);
        --color-diff-blob-num-hover-text: fg1 //rgba(27,31,35,0.6);
        --color-diff-blob-addition-num-bg: rgba(convert($v41), 0.3) //#cdffd8;
        --color-diff-blob-addition-num-text: fg4 //rgba(27,31,35,0.3);
        --color-diff-blob-addition-num-hover-text: fg1 //rgba(27,31,35,0.6);
        --color-diff-blob-addition-line-bg: rgba(convert($v40), 0.3) //#e6ffed;
        --color-diff-blob-addition-word-bg: rgba(convert($v43), 0.5) //#acf2bd;

        --color-diff-blob-deletion-num-bg: rgba(convert($v11), 0.3) //#ffdce0;
        --color-diff-blob-deletion-num-text: fg4 //rgba(27,31,35,0.3);
        --color-diff-blob-deletion-num-hover-text: fg1 //rgba(27,31,35,0.6);
        --color-diff-blob-deletion-line-bg: rgba(convert($v10), 0.3) //#ffeef0;
        --color-diff-blob-deletion-word-bg: rgba(convert($v13), 0.5) //#fdb8c0;

        --color-diff-blob-hunk-text: fg4 //rgba(27,31,35,0.7);
        --color-diff-blob-hunk-num-bg: bg4 //#dbedff;
        --color-diff-blob-hunk-line-bg: bg3 //#f1f8ff;

        --color-diff-blob-empty-block-bg: bg2 //#fafbfc;
        --color-diff-blob-selected-line-highlight-bg: rgba(convert($v31), 0.2) //rgba(255,223,93,0.2);
        --color-diff-blob-selected-line-highlight-border: rgba(convert($v33), 0.5) //#ffd33d;
        --color-diff-blob-selected-line-highlight-mix-blend-mode: screen //multiply;

        --color-diff-blob-expander-icon: fg3 //#586069;
        --color-diff-blob-expander-hover-icon: fg1 //#fff;
        --color-diff-blob-expander-hover-bg: bg5 //#0366d6;
        --color-diff-blob-comment-button-icon: #fff;
        --color-diff-blob-comment-button-bg: v06 //#0366d6;
        --color-diff-blob-comment-button-gradient-bg: v08 //#0372ef;

        // Prettylights.
        --color-prettylights-syntax-comment: fg3 //#6a737d;
        --color-prettylights-syntax-constant: v67 //#005cc5;
        --color-prettylights-syntax-entity: v79 //#6f42c1;
        --color-prettylights-syntax-storage-modifier-import: fg1 //#24292e;
        --color-prettylights-syntax-entity-tag: v57 //#22863a;
        --color-prettylights-syntax-keyword: v18 //#d73a49;
        --color-prettylights-syntax-string: v46 //#032f62;
        --color-prettylights-syntax-variable: v28 //#e36209;
        --color-prettylights-syntax-brackethighlighter-unmatched: v12 //#b31d28;
        --color-prettylights-syntax-invalid-illegal-text: v99 //#fafbfc;
        --color-prettylights-syntax-invalid-illegal-bg: v12 //#b31d28;
        --color-prettylights-syntax-carriage-return-text: v99 //#fafbfc;
        --color-prettylights-syntax-carriage-return-bg: v13 //#d73a49;
        --color-prettylights-syntax-string-regexp: v49 //#22863a;
        --color-prettylights-syntax-markup-list: v33 //#735c0f;
        --color-prettylights-syntax-markup-heading: v67 //#005cc5;
        --color-prettylights-syntax-markup-italic: fg1 //#24292e;
        --color-prettylights-syntax-markup-bold: fg1 //#24292e;
        --color-prettylights-syntax-markup-deleted-text: v19 //#b31d28;
        --color-prettylights-syntax-markup-deleted-bg: v11 //#ffeef0;
        --color-prettylights-syntax-markup-inserted-text: v49 //#22863a;
        --color-prettylights-syntax-markup-inserted-bg: v40 //#f0fff4;
        --color-prettylights-syntax-markup-changed-text: v25 //#e36209;
        --color-prettylights-syntax-markup-changed-bg: v20 //#ffebda;
        --color-prettylights-syntax-markup-ignored-text: fg2 //#f6f8fa;
        --color-prettylights-syntax-markup-ignored-bg: v63 //#005cc5;
        --color-prettylights-syntax-meta-diff-range: v87 //#6f42c1;
        --color-prettylights-syntax-brackethighlighter-angle: fg3 //#586069;
        --color-prettylights-syntax-sublimelinter-gutter-mark: fg4 //#959da5;
        --color-prettylights-syntax-constant-other-reference-link: v46 //#032f62;

        // CodeMirror editor.
        --color-codemirror-text: fg2 //#24292e;
        --color-codemirror-bg: bg0 //#fff;
        --color-codemirror-gutters-bg: bg2 //#fff;
        --color-codemirror-guttermarker-text: fg2 //#fff;
        --color-codemirror-guttermarker-subtle-text: fg3 //#d1d5da;
        --color-codemirror-linenumber-text: fg2 //#959da5;
        --color-codemirror-cursor: fg2 //#24292e;
        --color-codemirror-selection-bg: lighten(rgba(AC, 0.5), 30%) //#d7d4f0;
        --color-codemirror-activeline-bg: bg3 //#fafbfc;
        --color-codemirror-matchingbracket-text: fg3 //#24292e;
        --color-codemirror-lines-bg: bg1 //#fff;
        --color-codemirror-syntax-comment: fg5 //#6a737d;
        --color-codemirror-syntax-constant: v67 //#005cc5;
        --color-codemirror-syntax-entity: v87 //#6f42c1;
        --color-codemirror-syntax-keyword: v17 //#d73a49;
        --color-codemirror-syntax-storage: v17 //#d73a49;
        --color-codemirror-syntax-string: v46 //#032f62;
        --color-codemirror-syntax-support: v67 //#005cc5;
        --color-codemirror-syntax-variable: v25 //#e36209;

        // Ansi terminal colors.
        --color-ansi-black: v99 //#24292e;
        --color-ansi-black-bright: v97 //#2f363d;
        --color-ansi-white: v90 //#e1e4e8;
        --color-ansi-white-bright: v91 //#e1e4e8;
        --color-ansi-gray: v95 //#959da5;
        --color-ansi-red: v16 //#f97583;
        --color-ansi-red-bright: v19 //#fdaeb7;
        --color-ansi-green: v46 //#85e89d;
        --color-ansi-green-bright: v49 //#bef5cb;
        --color-ansi-yellow: v36 //#ffea7f;
        --color-ansi-yellow-bright: v39 //#fff5b1;
        --color-ansi-blue: v66 //#79b8ff;
        --color-ansi-blue-bright: v69 //#c8e1ff;
        --color-ansi-magenta: v76 //#b392f0;
        --color-ansi-magenta-bright: v79 //#d1bcf9;
        --color-ansi-cyan: v56 //#76e3ea;
        --color-ansi-cyan-bright: v59 //#b3f0ff;

        // Actions and workflows.
        --color-workflow-card-connector: var(--color-scale-gray-5);
        --color-workflow-card-connector-bg: var(--color-scale-gray-5);
        --color-workflow-card-connector-inactive: var(--color-border-primary);
        --color-workflow-card-connector-inactive-bg: var(--color-border-primary);
        --color-workflow-card-connector-highlight: var(--color-scale-blue-5);
        --color-workflow-card-connector-highlight-bg: var(--color-scale-blue-5);
        --color-workflow-card-bg: bg2 //var(--color-scale-gray-7);
        --color-workflow-card-inactive-bg: var(--color-bg-canvas-inset);
        --color-workflow-card-header-shadow: rgba(27,31,35,0.04);
        --color-workflow-card-progress-complete-bg: var(--color-scale-blue-5);
        --color-workflow-card-progress-incomplete-bg: var(--color-scale-gray-6);
        --color-checks-bg: bg1 //#1e2228;
        --color-checks-text-primary: fg1 //#adbac7;
        --color-checks-text-secondary: fg5 //#768390;
        --color-checks-text-link: ac //#539bf5;
        --color-checks-btn-icon: fg3 //#636e7b;
        --color-checks-btn-hover-icon: fg1 //#adbac7;
        --color-checks-btn-hover-bg: bg3 //#444c56;
        --color-checks-input-text: fg1 //#768390;
        --color-checks-input-placeholder-text: fg4 //#545d68;
        --color-checks-input-focus-text: fg1 //#adbac7;
        --color-checks-input-bg: bg2 //#22272e;
        --color-checks-input-shadow: 0 0 0 1px bg5 //#373e47;
        --color-checks-dropdown-text: fg1 //#adbac7;
        --color-checks-dropdown-bg: bg3 //#323941;
        --color-checks-dropdown-border: bg5 //#444c56;
        --color-checks-dropdown-hover-text: v99 //#cdd9e5;
        --color-checks-dropdown-hover-bg: v03 //#316dca;
        --color-checks-dropdown-btn-hover-text: fg1 //#cdd9e5;
        --color-checks-dropdown-btn-hover-bg: bg3 //#2d333b;
        --color-checks-header-label-text: fg3 //#768390;
        --color-checks-header-label-open-text: fg1 //#adbac7;
        --color-checks-header-border: bg3 //#373e47;
        --color-checks-header-icon: fg3 //#636e7b;
        --color-checks-line-text: fg1 //#768390;
        --color-checks-line-num-text: fg4 //#768390;
        --color-checks-line-timestamp-text: fg1 //#768390;
        --color-checks-line-hover-bg: bg3 //#2d333b;
        --color-checks-line-selected-bg: bg4 //rgba(65,132,228,0.1);
        --color-checks-line-selected-num-text: ac //#539bf5;
        --color-checks-line-dt-fm-text: #22272e;
        --color-checks-line-dt-fm-bg: #c69026;
        --color-checks-gate-bg: rgba(128,84,0,0.15);
        --color-checks-gate-text: fg1 //#768390;
        --color-checks-gate-waiting-text: v36 //#daaa3f;
        --color-checks-step-header-open-bg: bg4 //#2d333b;
        --color-checks-step-error-text: v16 //#e5534b;
        --color-checks-step-warning-text: v36 //#daaa3f;
        --color-checks-logline-text: fg3 //#636e7b;
        --color-checks-logline-num-text: fg1 //#768390;
        --color-checks-logline-debug-text: v77 //#b083f0;
        --color-checks-logline-error-text: fg1 //#768390;
        --color-checks-logline-error-num-text: v16 //#768390;
        --color-checks-logline-error-bg: rgba(229,83,75,0.1);
        --color-checks-logline-warning-text: fg1 //#768390;
        --color-checks-logline-warning-num-text: v36 //#daaa3f;
        --color-checks-logline-warning-bg: rgba(174,124,20,0.1);
        --color-checks-logline-command-text: v66 //#539bf5;
        --color-checks-logline-section-text: v46 //#6bc46d;

        // Misc.
        --color-profile-color-modes-ga-moon: bg4 //var(--color-scale-gray-7);
        --color-actions-workflow-table-sticky-bg: bg1 //rgba(34,39,46,0.95);
        --color-current-user-tip-bg: var(--color-box-bg-info);
        --color-current-user-tip-border: var(--color-box-border-info) //#1f477e;
    }

    // Base styles.
    html {
        c: 0 0 bg0

        ::selection { c: 0 0 bg4 }
        ::placeholder { c: fg4 }
        hr { border-color: bg5 }

        body {
            /// Application background.
            &, .application-main > .bg-gray, &.bg-gray-light { c: 0 0 bg0 }
            &.page-profile .application-main { b: 0 -24px bg1 }

            if custom_font {
                /// Feat -> Base font.
                &, /.markdown-body {
                    font-family: var(--f-base) i
                }

                /// Feat -> Code font.
                /// Diff linum/code, CodeMirror, commit reference, utility class.
                /.blob-num,
                /.blob-code-inner,
                /.CodeMirror-lines,
                /.commit-ref,
                /.text-mono {
                    font-family: var(--f-mono) i
                }
                /// Default code areas.
                code, kbd, pre, samp {
                    font-family: var(--f-mono) i
                }
            }
        }

        /// Feat -> Theme scrollbars.
        if c_scrollbars {
            scrollbar-color: bg5 bg2
            /::-webkit-scrollbar {
                width: 12px
                &-track { background: bg2 }
                &-thumb { background: bg5 }
            }
        }

        /// Feat -> Rounded borders for tables.
        if table_corners {
            .markdown-body > table {
                rad: 6px
                position: relative
                &::before {
                    o = 0px
                    content: ''
                    position: absolute
                    top: o; right: o; bottom: o; left: o
                    border: 1px solid bg5
                    pointer-events: none
                    rad: 6px
                }
            }
        }

        /// Skeleton.
        /.Skeleton {
            background-image: linear-gradient(270deg, bg4, bg2, bg2, bg4)
            /path.js-diff-placeholder { g: bg2 }
        }

        /// Diff -> 'Display the rich diff' loader. @upstream
        .render-container { c: 0 0 bg1 }
        img.octospinner[src] { filter: opacity(0.6) }

        /// Diff -> Tab size.
        pre, .highlight, .diff-table, .tab-size {
            -moz-tab-size: tab_size i
            tab-size: tab_size i
        }

        /// Server error page.
        > body:not([class]) > div[class='container'] {
            p, a { font-weight: normal i }
            #suggestions { c: fg5 }
            p { c: fg1 }
            a { c: fg3 }
        }

        /// Exceeded rate limit.
        > body > div[class='c'] {
            > h1 { c: fg1 }
            > p, > #s { c: fg3 }
            > #s > a { c: fg1 }
        }
    }

    // Better checkbox/radio inputs.
    input {
        r       = unquote
        prefix  = 'data:image/svg+xml;utf8,'
        prefix += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">'

        &[type='radio'],
        &[type='checkbox'] {
            &, &:focus, &:hover:active {
                -webkit-appearance: none
                -moz-appearance: none
                appearance: none
                cursor: pointer
                height: b_hgwd
                width: b_hgwd
                border: 1px solid bg5
                background-size: cover
                c: fg1 0 bg1
            }
            &:disabled, &:hover:active:disabled, &:disabled:hover {
                c: fg1 bg5 bg4
                cursor: auto
            }
        }

        &[type='radio'] {
            border-radius: 50%
            &:checked {
                z = s('<circle cx="256" cy="256" r="128" fill="%s"/>', to_svg($fg1))
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 bg5 bg4
            }
            &:hover:not(:checked) { c: 0 0 bg3 }
        }

        &[type='checkbox'] {
            border-radius: 2px
            &:checked {
                z = s('<path fill="%s" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/>', to_svg($fg1))
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 bg5 bg4
            }
            &:hover:not(:checked):not(:indeterminate) { c: 0 0 bg3 }
            &:indeterminate {
                z = '<rect x="128" y="128" width="256" height="256" fill="white"/>'
                background-image: s("url('%s%s</svg>') %s", r(prefix), r(z), i)
                c: 0 v16 v14
            }
        }
    }

    // Better select element styles.
    select {
        /// Custom icon.
        r       = unquote
        prefix  = 'data:image/svg+xml;utf8,'
        prefix += '<svg width="16" height="16" fill="' + to_svg($fg4) + '" '
        prefix += 'xmlns="http://www.w3.org/2000/svg">'
        path    = '<path d="M4.427 9.427l3.396 3.396a.251.251 0 00.354 '
        path   += '0l3.396-3.396A.25.25 0 0011.396 9H4.604a.25.25 0 '
        path   += '00-.177.427zM4.423 6.47L7.82 3.072a.25.25 0 01.354 0L11.57 '
        path   += '6.47a.25.25 0 01-.177.427H4.6a.25.25 0 01-.177-.427z"/>'

        &.form-select {
            background-image: s("url('%s%s</svg>') %s", r(prefix), r(path), i)

            /// Override default colors.
            &:not([disabled]) {
                c: 0 0 bg2
                &:hover { c: 0 0 bg3 }
                &:active { c: 0 0 bg4 }
            }
        }
    }

    // Fix checkbox on notifications alignment
    if (chbx_a_header) {
        .Box-header {
            label {
                span {
                    &.js {
                        &-select-all-text, &-count-selected-text {
                            vertical-align: super
                        }
                    }
                }
                input[type='checkbox']{
                    margin-top: .25rem
                }
            }
        }
    }

    // Global -> Color overrides.
    /{
        /// NOTE: Remaps bg1 to bg0.
        .js-profile-timeline-year-list,
        .tabnav {
            &.color-bg-primary {
                c: 0 0 bg0
            }
        }
        .diffbar,
        .TimelineItem-break,
        h3 > span.color-bg-canvas,
        .contribution-activity-listing .color-bg-primary,
        .page-profile .Progress.color-bg-primary {
            c: 0 0 bg0
        }

        /// NOTE: Remaps bgX to bg1.
        .commit-form,
        .form-actions .bg-gray-light {
            c: 0 0 bg1
        }

        /// NOTE: Remap bg3 to bg1.
        .color-bg-tertiary {
            .notification-archived,
            .notification-starred,
            .notification-read {
                c: 0 0 bg1
                &:hover { c: 0 0 bg2 }
            }
        }

        /// Notifications -> Item colors.
        .notification {
            &-navigation { c: 0 0 bg0 }
            &s-list-item {
                c: 0 bg4
                &:hover, &.navigation-focus { b: inset 2px 0 0 ac i }
                &.notification-unread:not(#z) {
                    c: 0 0 bg2
                    &:hover { c: 0 0 bg3 }
                    .notification-list-item-unread-indicator { c: 0 0 ac }
                }
                &:hover .notification-list-item-actions .btn { c: 0 0 t }
            }

            // New notification text.
            /.js-socket-channel.js-updatable-content > .h6 { c: v65 }
        }

        /// Profile/Project/Org -> Navigation.
        /// TODO: Figure out a better way to override colors.
        .application-main {
            > .bg-white,
            > div > main > .color-bg-secondary,
            .orghead {
                &:first-child { c: 0 0 bg1 }
            }

            /// Repository -> Archived repositories.
            > div > main > .flash-warn {
                margin-top: 0 i
                + .color-bg-secondary {
                    c: 0 0 bg1
                    b: inset 0 -1px bg3
                    .UnderlineNav { b: inset 0 -1px bg3 }
                }
            }

            /// Repository -> Sub-navigation.
            nav.js-repo-nav { c: 0 0 bg1 }

            /// Repository -> Projects.
            .js-project-container {
                /// Background.
                > .project-header,
                > .project-columns {
                    c: 0 0 bg0
                }

                /// Columns.
                .js-project-column {
                    c: 0 0 bg1

                    &:focus { c: 0 v65 }
                    &-automation-footer { c: 0 bg3 bg2 }

                    /// Improve card colors.
                    &-card {
                        c: 0 bg3
                        &:hover:not(:focus) {
                            c: 0 bg5
                            b: none i
                        }
                        &:focus { c: 0 v66}
                    }
                }
            }
        }

        /// Topics -> Background.
        [style*='background-color: #fcfdfd'] {
            c: 0 0 bg0
        }
        /// Topics -> Issues.
        [style*='(255\,255\,255\,1)\, rgba(255\,255\,255\,0))'] {
            background: linear-gradient(to top, bg1, t) i
        }

        button.close-button { color: fg1 }
        .vcard-username { c: fg1 }

        // Progress loader
        .progress-pjax-loader > .progress-pjax-loader-bar[style*="background-color"] {
            c: 0 0 ac
            b: none i
        }

        /// Code blocks.
        .markdown-body pre { c: 0 0 bg2 }

        /// Releases.
        .release-timeline-tags {
            .tag-timeline-date::after { c: 0 bg0 }
        }

        .subnav-item {
            &.selected,
            &[aria-current]:not([aria-current="false"]),
            &[aria-selected="true"] {
                c: 0 ac 0
            }
        }

        /// Dashboard -> Promotions.
        form[style*='background-color: #212528'] {
            border: 1px solid bg5
            c: 0 0 bg2
            [style*='color: #fff'] { c: fg1 }
        }

        /// Projects -> Issue labels.
        if dimmed_labels {
            html:not([data-color-mode=dark]) .IssueLabel {
                transition: 0.2s ease-in-out
                filter: brightness(0.7) i
                &:hover { filter: unset i }
            }
        }

        /// Image fixes
        //  Actions e.g. https://github.com/vednoc/dark-github/actions/new
        .repo {
            &-actions-hero {
                filter: invert(0.95) hue-rotate(180deg) brightness(1.2)
                mix-blend-mode: lighten
            }
        }
        //  Marketplace e.g. https://github.com/marketplace
        .MarketplaceBackground-recommendations {
            /img[src*="marketplace-illustration"] {
                filter: invert(0.95) hue-rotate(180deg) brightness(1.2)
                mix-blend-mode: lighten
            }
        }

        /// Remove SVG for dark/light mode toggle.
        .profile-color-modes {
            svg { display: none i }
            span[role] {
                top: -40px
                &::before {
                    content: 'Change mode'
                    position: absolute
                    margin-left: -12ch
                    margin-top: 2px
                }
            }
        }

        /// Project -> Find file page.
        .tree {
            &-finder-input { c: 0 0 t }
            &-browser {
                rad: 6px
                > li:first-of-type { rad: 5px 5px 0 0 }
                > li:last-of-type { rad: 0 0 5px 5px }
                &-result {
                    c: fg1
                    &.color-bg-secondary { c: 0 0 bg1 }
                    &[aria-selected="true"] { c: 0 0 bg3 }
                    &:hover:not([aria-selected="true"]) { c: 0 0 bg2 }
                }
            }
        }

        // Project -> Pulse/Insights.
        .conversation-list-heading .inner { --color-bg-canvas: bg0 }

        // Project -> Edit actions.
        .file-commit-form--full { c: 0 0 bg0 }

        // Project -> Pull Requests.
        .stale-files-tab { c: v39 0 v31 }

        // Project -> Viewed files.
        .js-reviewed {
            &-toggle { c: 0 bg4 bg2 }
            &-file.bg-blue-2 { c: 0 bg5 bg3 }
        }

        // Global -> Inputs.
        .form-control.input-contrast { c: 0 0 bg2 }

        /// Docs -> Tweak heading color.
        .markdown-body h3 > a { c: v09 }
    }

    // Navbar.
    .js-header-wrapper {
        /// Exclude login/auth pages.
        /:not(.session-authentication) > & {
            border-bottom: 1px solid bg5
            c: 0 0 bg2
        }

        /// Feat -> Width for navbars.
        if short_navbars {
            ex  = 'not(.full-width):not(.notifications-v2):not(.page-new-repo)'
            ex += ':not(.project-page)'
            /body:{ ex } main > .hide-full-screen,
            /body:{ ex } > .js-header-wrapper {
                > *:not(.Progress) {
                    max-width: 1280px
                    margin: 0 auto
                }
            }

            /// Fix max-width of the progress bar.
            .Progress.is-loading { max-width: unset i }

            /// Repository navigation bar border.
            /.application-main > div > main > div:first-child {
                b: inset 0 -1px bg3 i

                /// Fix context menu.
                nav {
                    position: relative
                    b: inset 0 -1px bg3 i
                }
            }

            // Alerts.
            ~ #js-flash-container > .flash-full > div {
                margin: 0 auto
                max-width: 1230px
            }

            // Notifications.
            ~ .notifications-v2.flash-full > div {
                margin: 0 auto
                max-width: 1220px
                .octicon-x { margin-right: 0 }
            }
        }

        /// Feat -> Sticky navbar.
        if (navbar_sticky) {
            position: sticky i
            z-index: 99
            top: 0 i

            /// Fix progress bar position.
            .Progress { top: 0 }

            /// Dashboard -> Tweak top offset for sidebar items.
            /.dashboard-sidebar.is-stuck { margin-top: 60px i }
        }

        /// Fix aligntment and colors of sticky navbars.
        /.notification-shelf.is-stuck { z-index: 98 i }
        /.gh-header {
            /// Issues.
            &-sticky.is-stuck {
                z-index: 98 i
                margin-top: 3px i
                + .gh-header-shadow {
                    z-index: 97 i
                    height: 63px i
                    c: 0 0 bg2
                }
            }

            /// Pull Requests.
            ~ .pr-toolbar.is-stuck {
                height: 62px i
                c: 0 0 t
                &::before {
                    content: ''
                    z-index: -1
                    position: fixed
                    left: 0; top: 0; right: 0
                    height: 62px i
                    c: 0 0 bg2
                }
                > .diffbar { c: 0 0 bg2 }
                + .toolbar-shadow {
                    margin-top: 2px i
                    border-top: 1px solid bg5 i
                }
            }
        }

        /// Search. @upstream
        .header-search-wrapper {
            c: 0 0 bg3
            input { c: fg1 }

            /// Fix styles for focused state.
            &.focus {
                border-bottom-left-radius: 0 i
                border-bottom-right-radius: 0 i

                /// Reset results.
                .Box {
                    margin-left: -1px
                    width: calc(100% + 2px) i
                }
            }
        }

        /// Notifications. @upstream
        .mail-status {
            background-image: none i
            c: 0 0 ac
        }

        /// Logged out style.
        .Header-old {
            padding-top: 3px i
            padding-bottom: 3px i

            /// Default one uses white color.
            --color-text-white: fg1

            /// Wrapper max width.
            /body:not(.project-page) & > .container-xl { max-width: 1250px i }

            /// Search.
            .header-search label {
                border: 1px solid bg5
                ::placeholder { c: fg4 }
                &, input { max-height: 30px i }
                > input {
                    border-top: 1px solid bg5 i
                    &.jump-to-field-active { c: 0 0 bg1 }
                }
            }
        }

        /// Gist page.
        .HeaderMenu-link { c: fg1 }
        /.gist-detail-intro.gist-banner { display: none }
        /.gisthead.pagehead.color-bg-secondary {
            c: 0 0 bg1

            /// Reset width.
            > div {
                margin: 0 auto
                max-width: 1280px

                /// Remove excess padding.
                > div {
                    padding-left: 16px i
                    padding-right: 16px i
                }
            }
        }
    }

    // Navigation on "/new/project" page.
    .pagehead-tabs-item {
        &.selected {
            border-top-color: ac
            c: 0 0 bg0
        }
    }

    // Navigation. @upstream
    .UnderlineNav-item {
        &.selected,
        &[role="tab"][aria-selected="true"],
        &[aria-current]:not([aria-current="false"]) {
            c: 0 ac
        }
        &:focus, &:hover { c: 0 bg5 }
        /.UnderlineNav { b: inset 0 -1px 0 bg4 }
    }

    // Sub-navigation. @upstream
    .site-subnav {
        b: 0 1px 0 bg3

        /.subnav-link {
            c: fg4
            &:hover { c: fg2 bg5 }
            &.selected { c: fg1 ac }
        }
    }

    // Reset colors for tabs.
    .tabnav-tab {
        &.selected,
        &[aria-selected="true"],
        &[aria-current]:not([aria-current="false"]) {
            c: 0 0 bg0
        }
        &[aria-current="true"], /// Explore: topics/tag
        &[aria-current="true"].code,
        &[aria-current="true"].preview,
        &[aria-selected="true"].write-tab:not(#z),
        &[aria-selected="true"].preview-tab:not(#z) {
            c: 0 0 bg1
        }
    }

    // Modals -> Overlay.
    .details-overlay-dark[open] > summary::before {
        z-index: 121 // Hides Gitako.
        opacity: 0.85
        c: 0 0 bg0
    }

    // Project -> File tree.
    .Box {
        /// Use lighter background color for focused items.
        &-row--focus-gray.navigation-focus { c: 0 0 bg2 }

        /// Border color for modals.
        &--overlay { c: 0 bg5 }

        /// Tree items.
        &-row.js-navigation-item {
            c: 0 bg4

            /// Fix double border in issues.
            &:first-of-type { c: 0 t }
        }

        /// Remove background from avatar groups.
        /.AvatarStack-body { c: 0 0 t }

        /// Feat -> Old readme header design.
        if (readme_header) {
            /#readme {
                > .Box-header.border-bottom-0 {
                    border-bottom: 1px solid bg5 i
                    c: 0 0 bg2

                    /// Fix padding in the body.
                    + .Box-body { padding-top: 32px i }
                }

                /// TOC.
                > .js-sticky {
                    padding: 0 8px i
                    min-height: 38px
                    c: 0 0 bg2
                }
            }
        }

        /// Feat -> Neutral colors in latest commit.
        if (latest_commit) {
            &-header--blue { c: 0 bg5 bg2 }

            /// Commit details.
            /.full-commit {
                c: 0 0 bg2
                p.commit-title { c: fg1 }
            }
        }
        else {
            /.full-commit {
                p.commit-title {
                    color: fg3
                }
            }
        }


        /// Feat -> Shorter headers.
        if (short_headers) {
            condition = (readme_header == 1) ? '' : '--blue'
            /.repository-content &-header{ condition } {
                padding-top: 8px
                padding-bottom: 7px

                /// Smaller avatars.
                .avatar[style*='width:24px'] {
                    margin-top: 2px
                    margin-left: 2px
                    &, img {
                        width: 20px i
                        height: @width
                    }
                }
            }
        }
    }

    // Project -> Insights.
    .menu-item {
        /// Disabled sidebar options. @upstream
        &.color-text-secondary { c: fg5 }

        /// Graphs -> Contributors.
        /.graphs {
            .tint-box, .capped-card-content {
                c: 0 0 bg2
            }
            line[stroke*='#000'] { g: 0 bg4 }
            text[fill='#6a737d'] { g: fg4 }

            /// Traffic -> Remove white circles.
            /.dots > circle[cx][cy] { g: 0 bg1 }
        }

        /// Graphs -> Traffic.
        /.traffic-graph {
            text[fill='#000'] { g: fg1 }
            line[stroke='#000'] { g: 0 bg4 }

            /// Add whitespace. @upstream
            &-stats {
                c: 0 bg5
                ul > li {
                    padding: 1rem
                    text-align: center
                    c: fg1 0 bg2
                    &:first-of-type {
                        border-radius: 0 0 0 6px
                        border-right: 1px solid bg5
                    }
                    &:last-of-type { border-radius: 0 0 6px 0 }
                }
            }
        }

        /// Graphs -> Pulse.
        /.graph-canvas {
            text[fill='#000'] { g: fg1 }
            line[stroke*='#000'] { g: 0 bg4 }
        }

        /// Graphs -> Code frequency.
        /.code-frequency {
            .addition { g: v46 }
            .deletion { g: v16 }
        }

        /// Tables.
        /.gutter table.capped-list th { c: 0 bg4 }
    }

    // Diff -> Changes. @upstream
    .blob {
        /// File background.
        /.file {
            c: 0 0 bg1

            /// Diff -> Fix rounded corners of collapsed files.
            &:not(.open) > .file-header--expandable { rad: 6px i }

            /// Diff -> Fix rounded corners of image diffs.
            .render-viewer { rad: 6px i }

            /// Diff -> Tag expander.
            /.branches-tag-list .ellipsis-expander { c: 0 0 bg5 }
        }

        /// Code navigation.
        &-code .pl-token {
            &:not(.active):not(:hover) {
                text-decoration: underline
            }
            &:hover, &.active { c: v99 0 v32 }
        }

        /// View -> Line highlight.
        /table.highlight > tbody > tr {
            &:hover > td {
                position: relative
                &::after {
                    top: 0
                    left: 0
                    width: 100%
                    height: 100%
                    content: ''
                    position: absolute
                    pointer-events: none
                    c: 0 0 #ffffff10
                }
            }

            > td.highlighted {
                mix-blend-mode: screen
                c: 0 0 var(--color-blob-line-highlight-bg)
                box-shadow: -50px 0 var(--color-blob-line-highlight-bg)
            }

            &.divider:hover > td { c: 0 0 bg3 }
        }

        /// Diff -> Line highlights.
        /table.diff-table > tbody > tr {
            > td.selected-line {
                z-index: 1
                &::after { z-index: -1 }
            }
            &[data-hunk]:hover > td { c: 0 0 bg2 }
            &:hover > td.selected-line { c: 0 0 rgba(convert($v31), 0.2) }
            &:hover > td[class*='addition'] { c: 0 0 rgba(convert($v41), 0.4) }
            &:hover > td[class*='deletion'] { c: 0 0 rgba(convert($v11), 0.4) }

            /// Add colors to +/- characters.
            /.blob-code {
                &-addition &-marker::before { c: v47 }
                &-deletion &-marker::before { c: v17 }
                &.selected-line &-marker::before { c: v97 }
            }

            /// Fix rounded corners.
            &[data-hunk]:last-of-type,
            &[data-position]:last-of-type {
                td:first-child { rad: 0 0 0 5px }
                td:last-child { rad: 0 0 5px 0 }
            }
        }

        /// Code snippet dividers. @upstream
        /.divider &-num { c: 0 0 bg3 }
        /.divider &-code { c: 0 0 bg2 }

        /// Code search dividers. @upstream
        /.code-list { & &-item { c: 0 bg3 }}
    }

    // Notes -> Resets.
    .timeline-comment {
        &[class*='--caret']:not(.current-user) {
            &::before { c: 0 0 bg5 }
            &::after {
                background-image: none
                c: 0 0 bg3
            }
        }

        /// PR -> CLI instructions.
        /.copyable-terminal {
            border: 1px solid bg5
            c: 0 0 bg1
        }

        /// Remove borders from input box.
        &-wrapper { c: 0 t }

        /// Remove header/input backgrounds.
        /.gh-header, /.discussion-timeline-actions { c: 0 0 t }

        /// Badges.
        /.TimelineItem-badge { --color-bg-canvas: var(--bg-0) }

        /// Subscribe to updates.
        /.thread-subscription-status {
            c: 0 bg5
            /.sidebar-notifications & { c: 0 0 bg0 }
        }

        /// Discussions -> Resets.
        &.discussion-comment {
            /// Reply.
            &:not(.color-bg-canvas-inset) { c: 0 0 bg2 }

            /// Body.
            > .color-bg-primary { c: 0 0 bg2; rad: 0 i }

            /// Tweak code blocks.
            pre, code, tt { c: 0 0 bg3 }

            /// Upvoted counter.
            /.is-upvoted .discussion-vote-count { c: 0 0 v63 }

            /// Load more hidden items.
            /form.pagination-loader-container { c: 0 0 t }
        }
    }

    // Profile.
    /{
        /// Calendar legends / Progress bars in activity.
        .Progress-item {
            &[style*="#ebedf0"] { c: 0 0 var(--color-calendar-graph-day-bg) }
            &[style*="#9be9a8"] { c: 0 0 var(--color-calendar-graph-day-L1-bg) }
            &[style*="#40c463"] { c: 0 0 var(--color-calendar-graph-day-L2-bg) }
            &[style*="#30a14e"] { c: 0 0 var(--color-calendar-graph-day-L3-bg) }
            &[style*="#216e39"] { c: 0 0 var(--color-calendar-graph-day-L4-bg) }
        }

        /// Add border to calendar legends.
        .legend li { b: inset 0 0 0 1px var(--color-calendar-graph-day-border) i }

        /// Halloween activity overview.
        .halloween-activity-overview .activity-overview {
            &-box [fill='#40c463'] { g: v22 v22 }
            &-axis, &-point { g: 0 v24 }
        }

        /// Regular activity overview.
        .activity-overview {
            &-box [fill='#40c463'] { g: var(--color-calendar-graph-day-L2-bg) var(--color-calendar-graph-day-L2-bg) }
            &-axis, &-point { g: 0 var(--color-calendar-graph-day-L3-bg) }
        }

        /// Invert illustrations.
        if dark(BG) {
            img[src*='githubassets.com/images/modules/profile'][src$='.svg'] {
                filter: invert() hue-rotate(180deg) brightness(120%)
            }
        }
    }

    // Code.
    /{
        /// Feat -> Add borders around code blocks and similar elements.
        if (code_borders) {
            /// Add border around code and commit references.
            .markdown-title code { border: 1px solid bg5 }
            .markdown-body { code, tt, pre { border: 1px solid bg5 }}
            .commit { &-ref, &-sha { border: 1px solid bg5 }}
            .branch-name { border: 1px solid bg5 }
        }

        /// CodeMirror editor.
        .CodeMirror {
            &[class*='github-light'] {
                c: fg1 0 bg1
                r: 0 0 6px 6px
            }
            &-lines, &-gutters { c: 0 0 bg1 }
            &-linenumber { c: fg5 }

            /// Gist -> Editor backaground.
            /.file.js-code-editor { c: 0 0 bg1 }
        }
    }

    // Hide "notifications" button while logged out. @upstream
    .logged-out .pagehead-actions a[aria-label*='notification'] {
        display: none
    }

    // Extension -> Gitako.
    /// Link: https://github.com/EnixCoda/Gitako
    .gitako-ready {
        /// Gitako variables.
        --gitako-bg-primary: bg1
        --gitako-bg-secondary: bg2
        --gitako-bg-tertiary: bg2
        --gitako-bg-canvas: bg1
        --gitako-border-overlay: bg5
        --gitako-border-secondary: bg4
        --gitako-border-tertiary: bg5
        --gitako-text-link: ac
        --gitako-text-primary: fg1
        --gitako-text-secondary: fg2
        --gitako-text-tertiary: fg3
        --gitako-icon-tertiary: fg3
        --gitako-branch-name-text: fg1
        --gitako-branch-name-bg: bg3
        --gitako-btn-hover-bg: bg4

        /// Logo.
        .gitako-toggle-show-button { height: 60px i }

        /// Colors.
        /.gitako-side-bar {
            /// Remove left border.
            &-body { border-left: none i }

            // Move Gitako under overlay.
            > div { z-index: 99 i }

            /// Fix 'Loading' and 'Access Denied' borders.
            .loading-indicator-container,
            .header + .description {
                c: 0 bg5
            }

            /// Fix path prefix, 'No results found', and 'Loading' text colors.
            .prefix, [color='text.gray'], .loading-indicator { c: fg3 }

            /// 'Lazy mode is ON' alert.
            [color='gray.4'] { c: fg5 }

            /// Project header.
            .header .meta-bar {
                min-height: 62px i
                [class*='Breadcrumb']::after { c: fg4 }
            }

            /// Files.
            .file-explorer {
                c: 0 0 bg1

                &.freeze { filter: blur(1.5px) opacity(0.6) i }

                /// Search.
                .search-input {
                    border-left: none
                    border-right: none
                    padding: 6px 0
                    &:hover, &:focus-within { c: 0 0 bg2 }
                    .TextInput-icon { c: fg3 }
                }

                /// Items.
                .node-item {
                    c: fg1 0 t
                    &:hover { c: 0 0 bg2 }
                    &:active, &.focused { c: 0 0 bg3 }
                }

                /// Highlighted search results.
                mark { c: fg1 0 v02 }
            }

            /// Footer.
            .gitako-settings-bar {
                c: 0 0 bg2

                /// Improve border color.
                .header-row { c: 0 bg5 }

                /// Lazy mode.
                span[class*='Label-'] { c: fg1 0 v02 }
            }

            /// Settings -> Header.
            .gitako-settings-bar-title {
                c: 0 bg5 bg3
                b: inset 0 -1px bg5 i

                /// Remove background.
                + div > .shadow-shelter { c: 0 0 t }
            }

            /// Settings -> Buttons and inputs.
            select,
            .TextInput-wrapper:not(.search-input),
            button.toggle-mode,
            [class*='ButtonBase-'] {
                c: fg1 bg5 bg3
                b: none i
                &:hover { c: 0 0 bg4 }
                &:focus-within {
                    c: 0 ac bg4
                    b: 0 0 0 2px v03 i
                }
            }

            /// Buttons.
            .close-side-bar-button { c: 0 0 bg2 }
            .settings-button { c: 0 0 bg2 }
            .octicon { c: fg3 }
            .find-in-folder, .go-to {
                &-button:hover { c: 0 0 bg4 }
            }

            /// Resize.
            .gitako-resize-handler { c: 0 bg5 bg2 }
        }

        /// Clippy in code blocks.
        /.clippy-wrapper .clippy {
            c: 0 bg5 bg4
            i { filter: invert(0.8) }
            &:hover { c: 0 0 bg5 }
        }
    }

    // Extension -> GitHub Original Streak.
    /// Link: https://github.com/Naramsim/GithubOriginalStreak
    .original-streak {
        .contrib-number { c: fg1 }
        .text-muted { c: fg3 }
    }
}

@-moz-document regexp('https?://((support)\\.)github?.com(/.*)?') {
    // Navbar.
    .Header {
        b: 0 1px bg5
        c: 0 0 bg2

        &-item img { filter: invert(1) }
        &-link {
            c: fg1
            &:hover, &:focus { text-decoration: underline }
        }

        /// Reset backgrounds.
        + h1 { &, & + * > #search { c: 0 0 bg1 }}
        /#contact-us { c: 0 0 bg1 }
    }

    // Search.
    .search-result {
        c: 0 0 t
        &:hover { c: 0 0 bg2 }
        &-title em { c: ac }
        &-intro em { c: fg1 ac }
    }

    // Notes.
    .timeline-comment {
        rad: 6px
        c: 0 bg5

        /// Carets.
        &:not(#z).new-comment {
            &::before { c: 0 0 bg5 }
            &::after { c: 0 0 bg1 }
        }

        &-header {
            rad: 6px 6px 0 0
            c: 0 bg5 bg3
        }

        /// Attach files hint.
        .drag-and-drop {
            // outline: 1px solid red i
            &, > .color-bg-secondary { c: 0 0 t }
        }
    }
}

@-moz-document regexp('https?://render\.githubusercontent?.com(/.*)?') {
    :root {
        /// Accent color.
        --ac: AC

        /// Generate CSS color variables.
        colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
        for color in colors[0..1] {
            for tone in 0..5 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }
        for color in colors[2..length(colors)] {
            for tone in 0..9 {
                { '--%s-%s' % ((color) (tone)) }: $ + color + tone
            }
        }

        /// Native vars.
        --color-text-primary: fg1 //#24292e;
        --color-text-secondary: fg3 //#586069;
        --color-text-danger: v17 //#cb2431;
        --color-text-success: v46 //#22863a;
        --color-icon-secondary: v96 //#586069;
        --color-border-primary: bg5 //#e1e4e8;
        --color-border-secondary: bg5 //#eaecef;
        --color-border-danger: v16 //#d73a49;
        --color-border-success: v45 //#34d058;
        --color-bg-canvas: bg1 //#ffffff;
        --color-bg-primary: bg1 //#ffffff;

        /// Stole this from GHD.
        --dark: url("data:image/gif;base64,R0lGODlhCgAKAIAAABoaGgAAACwAAAAACgAKAAACEYQdmYcaDNxjEspKndVZbc8UADs=") i
        --light: url("data:image/gif;base64,R0lGODlhCgAKAIAAAOXl5f///yH5BAAAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==") i

        /// Feat -> Theme scrollbars.
        if c_scrollbars {
            scrollbar-color: bg5 bg2
            /::-webkit-scrollbar {
                width: 12px
                &-track { background: bg2 }
                &-thumb { background: bg5 }
            }
        }
    }

    /// Diff -> Image background.
    .render-shell {
        &, /body { c: 0 0 bg1 }
        img { &, &.asset { c: 0 bg1 }}

        /// Stole this from GHD.
        &:not([data-document-path]) img, canvas {
            border: none i
            background-image: var(--dark)
            &:hover { background-image: var(--light) }
        }

        if (dark(BG)) {
            /// Rich diff -> Invert controls.
            .swipe-shell { c: 0 v96 }
            .transparent, .opaque { filter: invert(0.95) brightness(150%) i }

            /// OpenStreetMap.
            .leaflet {
                &-bar, &-control-layers { c: 0 fg1 }
                &-bar > a:last-child { border-bottom: none }
                &-container { filter: invert(0.95) hue-rotate(180deg) brightness(120%) }
                &-popup-content { overflow-y: auto }
                &-marker-icon { filter: invert(1) grayscale(1) brightness(130%) }
                &-control.mapbox-logo { filter: invert(0.8) }
            }
        }
    }

    // Diff -> Images diff bar.
    .render-bar {
        c: 0 bg5 bg2
        li {
            c: fg3 bg5
            &.active {
                c: fg1
                &::before { c: bg5 }
            }
        }
    }

    /// https://github.com/jupyter/notebook/blob/master/docs/source/examples/Notebook/Notebook%20Basics.ipynb
    #notebook {
        c: 0 0 bg1

        /// Base elements.
        table {
            c: fg1 0 bg2
            th, td { c: 0 bg5 }
        }
        a {
            c: ac
            &:hover { text-decoration: none }
        }
        pre, code { c: fg1 0 t 0 0 0 }

        /// Highlight code blocks.
        :not(pre) > code {
            padding: 0 2px
            border: 1px solid bg5
            background-color: bg3
        }

        /// Notebook elements.
        .rendered_html { c: fg1 }
        .text_cell_render { c: fg1 }
        .input_prompt { c: v68 }
        .output_prompt { c: v17 }
        .input_area { c: fg1 bg5 bg2 }

        /// Invert images. Stole this from GHD.
        .output_area .output_png img {
            filter: invert(90%) hue-rotate(180deg) saturate(200%) brightness(85%) i
            &:hover { filter: unset i }
        }
        img.math {
            filter: invert(90%) hue-rotate(180deg)
            c: 0 0 t
        }

        /// Alerts.
        .alert {
            text-shadow: none
            c: v29 v22 v21
            &-danger, &-error { c: v19 v12 v11 }
            &-success { c: v49 v42 v41 }
            &-info { c: v69 v62 v61 }
        }

        /// Syntax.
        .o, .mi, .mf { c: fg3 }
        .nb, .kn, .k, .bp { c: v47 }
        .nn, .nf, .nc { c: v67 }
        .c1 { c: v57 }
        .s1, .s2 { c: v17 }
        .ow { c: v87 }
    }
}