Dark-GitHub by vednoc
Imported and mirrored from https://raw.githubusercontent.com/vednoc/dark-github/main/github.user.styl
Details
Authorvednoc
LicenseMIT
Created
Updated
Categorygithub
Description
Dark and light, very customizable theme for GitHub.
Notes
Userstyle doesn't have notes.Source code
Source code has over 100k characters, so we truncated it. You can inspect the full source code on install link./* ==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.3.0
@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',
'Monokai Pro ': 'monokai-pro',
'Allure Contrast ': 'allure-contrast',
}
@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
@var checkbox star_colors 'Highlight star icon if you starred the repository' 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 }
'monokai-pro': { BG: #2d2a2e, FG: #ececea, AC: #ffd866 }
'allure-contrast': { BG: #17191c, FG: #dddddd, AC: #5da892 }
}
// 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.3.0'
/// 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.
/// NOTE: Fixes mess for #7.
* {
--color-border-default: bg5 //#444c56;
--color-border-muted: bg4 //#373e47;
--color-border-subtle: bg3 //#cdd9e51a;
--color-fg-default: fg1 //#adbac7;
--color-fg-muted: fg3 //#768390;
--color-fg-subtle: fg5 //#545d68;
--color-fg-on-emphasis: white //#cdd9e5;
--color-canvas-default: bg1 //#22272e;
--color-canvas-overlay: bg2 //#2d333b;
--color-canvas-inset: bg1 //#1c2128;
--color-canvas-subtle: bg2 //#2d333b;
--color-neutral-emphasis-plus: #636e7b;
--color-neutral-emphasis: bg5 //#636e7b;
--color-neutral-muted: bg4 //#636e7b66;
--color-neutral-subtle: rgba(convert($bg4), 0.2) //#636e7b1a;
--color-accent-fg: ac //#539bf5;
--color-accent-emphasis: v07 //#316dca;
--color-accent-muted: v05 //#4184e466;
--color-accent-subtle: v03 //#4184e426;
--color-attention-fg: v39 //#b08800;
--color-attention-emphasis: v37 //#f9c513;
--color-attention-muted: v35 //#ffdf5d;
--color-attention-subtle: v31 //#fff5b1;
--color-primer-shadow-highlight: 0 0 transparent;
--color-primer-shadow-inset: 0 0 transparent;
--color-primer-shadow-focus: 0 0 0 3px v01 //#143d79;
--color-social-reaction-border: bg5 //var(--color-scale-blue-8);
--color-social-reaction-bg: bg2 //var(--color-scale-gray-8);
--color-social-reaction-bg-hover: bg3 //var(--color-scale-gray-7);
--color-social-reaction-bg-reacted-hover: v62 //var(--color-scale-blue-8);
/{ .user-has-reacted:not(#z) { c: 0 v04 v01 } }
/// Context specific.
--color-icon-directory: var(--color-fg-muted)
--color-overlay-shadow: 0 0 0 1px bg5, 0 16px 32px sh //0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)
/// Before v1.2.1:
--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: v02 //#0366d6;
--color-state-hover-primary-border: v03 //#0366d6;
--color-state-hover-primary-text: v09 //#ffffff;
--color-state-hover-primary-icon: v09 //#ffffff;
--color-state-hover-secondary-bg: bg2 //#f6f8fa;
--color-state-hover-secondary-border: bg5 //#f6f8fa;
--color-state-selected-primary-bg: v02 //#0366d6;
--color-state-selected-primary-border: v03 //#0366d6;
--color-state-selected-primary-text: v09 //#ffffff;
--color-state-selected-primary-icon: v09 //#ffffff;
--color-state-focus-border: v67 //#0366d6;
--color-state-focus-shadow: 0 0 0 3px v01 //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: bg2 //#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 rgba(convert($bg4), 0.5) //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 rgba(convert($v66), 0.3) //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;
// NOTE: Is this what insanity looks like?
// TODO: Figure out a...decent way to deal with this.
/.topic-tag {
--color-accent-fg: v09
--color-accent-subtle: mix(AC, BG, 10)
--color-topic-tag-border: mix(AC, BG, 15)
&:hover, &:active {
--color-fg-on-emphasis: v99
--color-accent-emphasis: mix(AC, BG, 30)
border-color: mix(AC, BG, 40)
}
}
--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: bg3 //#fff;
--color-sidenav-border-active: ac //#f9826c;
--color-tabnav-selected-bg: bg1 //#fff;
--color-header-text: fg3 //#ffffffb3;
--color-header-bg: bg2 //#24292e;
--color-page-header-bg: bg1 //#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($bg3), 0.5) //#fffbdd;
--color-blob-line-highlight-border: v35 // #daaa3f;
--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 bg5 }
::placeholder { c: fg4 }
hr { border-color: bg5 }
body {
/// Application background.
&, .application-main > [class*='color-bg'] { 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-default {
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.
.hx_page-header-bg { 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 {
:not(pre) > code { c: 0 0 bg2 }
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 -> Busy status.
/.user-status-busy {
--color-text-link: v99
$warn = rgba(convert($v27), 0.15)
c: 0 $warn $warn
}
}
// 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
}
}
}
/// Unread indicators. @upstream
.mail-status,
.feature-preview-indicator {
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: 1248px 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 }
/// Readme tweaks.
/#readme {
/// Feat -> Old readme header design.
if (readme_header) {
> .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
}
}
/// Invert stats.
img[data-canonical-src*='github-readme-stats.vercel.app/api']:not([data-canonical-src*='&theme=']) {
filter: invert(1) hue-rotate(180deg) contrast(0.9) i
c: 0 0 t
}
}
/// Feat -> Neutral colors in latest commit.
if (latest_commit) {
&-header--blue.Details,
&-header[class*='commit'] {
c: 0 bg5 bg2
}
/// Commit details.
/.full-commit {
c: 0 0 bg2
p.commit-title { c: fg1 }
}
}
/// 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: 0 0 6px 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 {
position: relative
z-index: 0
&::after {
content: ''
position: absolute
top: 0; left: 0; right: 0; bottom: 0
c: 0 0 rgba(convert($bg4), 0.6)
z-index: -1
}
}
&.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 }
}
/// Use old color variables.
&[data-position='']:not(#z),
&.js-expandable-line:not(#z) {
--color-fg-muted: fg2 i
> .blob-num { c: 0 0 bg4 }
> .blob-code { c: 0 0 bg3 }
}
> td.blob-code-deletion { c: 0 0 var(--color-diff-blob-deletion-line-bg) }
}
/// 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 bg4 }
.markdown-body { code, tt, pre { border: 1px solid bg4 }}
.commit { &-ref, &-sha { border: 1px solid bg4 }}
.branch-name { border: 1px solid bg4 }
}
/// Feat -> Highlight star icon if you starred the repository.
if (star_colors) {
.starred .octicon { c: ac }
}
/// Inline code blocks.
.commit-ref, .branch-name { c: v09 0 bg2 }
/// 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 {
margin-right: -10px
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-primary: fg1
--gitako-icon-secondary: fg2
--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 }
.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 }
}
/// Append ellipsis to code folds.
.highlight tr.active td:last-child::after {
content: '...'
border-radius: 3px
c: fg3 0 rgba(convert($bg5), 0.6)
}
}
// 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|viewscreen)\.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 cod...