Global.DarkMode II B.W by wenijinew

/* ==UserStyle==
Note: Based on Dark-GitLab - https://gitlab.com/vednoc/dark-gitlab

@name         Global.DarkMode II B.W
@namespace    Global.DarkMode II B.W
@description  Dark and light theme for developer often used web sites: wikipedia.org, git-scm.com, lesscss.org etc.
@author       wenijinew (https://gitlab.com/wengm)
@homepageURL  https://gitlab.com/vednoc/dark-gitlab
@supportURL   https://gitlab.com/vednoc/dark-gitlab/issues
@preprocessor stylus
@version      0.1
@license      MIT

User Customization Configuration
@var select   cg_theme     'Base color-scheme toggle' {
    'Custom colors          *': 'custom',
    'Ericsson                ': 'ericsson',
    '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',
}
@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 range    cg_sat       'Adjust saturation of syntax colors' [0, -50, 40, 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 checkbox pcs_enable 'Apply when `(prefers-color-scheme: dark)` is enabled' 0
@var text     ui_font    'Custom UI font' '"font_name"'
@var text     mono_font  'Custom mono font' '"font_name"'
@var text     emoji_font 'Custom emoji font' '"font_name"'
@var text     a_radius   'Avatars: Custom border radius' 25%
@var range	  hb_size    'Headline Base Size' [50, 40, 60, 5]
@var text	  h_step     'Headline Redue Step' '5'
@var range    md_img_o   'Markdown: Default image opacity' [1, 0.0, 1, 0.01]
@var checkbox ic_invert  'Chromium: Invert icons in Shadow DOM' 1
@var checkbox img_invert 'Invert illustrations to dark colors' 1
@var checkbox nb_height  'Navbar: Increase height' 1
@var checkbox nb_canary  'Navbar: Show canary badge' 1
@var checkbox c_hl_none  'Code: Use theme colors for "none" syntax hl theme' 1
@var checkbox c_ide      'Code: Enable IDE styles' 1
@var checkbox c_monaco   'Code: Enable Monaco Editor styles' 1
@var checkbox pipelines  'CI/CD: Compact pipelines' 0
@var checkbox dgl_alert  'Profile: Enable Dark-GitLab announcements' 0
@var checkbox sb_enable  'Global: Enable theme scrollbars' 1
==/UserStyle== */
// {{{ Helpers.
t       = transparent
i       = !important
vendors = official

// }}}

/**
* mixin for color setting
*
* usage:
* c: fg bdc bg - to set color, border-color, and background-color
* c: fg bdc bg 1 1 1 - to set color, border-color, and background-color with !important annotation
* c: 0 bdc - only set border-color without !important annotation
*/
c(x, y = 0, z = 0, r = 0, xi = 1, yi = 1, zi = 1, ri = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
	if y != 0 && y != '_' { 	  background: yi is 0 ? y : y i ; background-color: yi is 0 ? y : y i}
    if z != 0 && z != '_' {     	  border: zi is 0 ? solid 0.5px z : solid 0.5px z i }
	if r != 0 && r != '_' {    border-radius: ri is 0 ? r : r i } else {border-radius:0px}
	box-shadow: unset i;
}

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

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

// Convert colors to HSLA format. TODO: Learn more about HSLA format.
/// NOTE: This is done just for consistency of generated colors.
// TODO: Learn more about built-in stylus functions - unquote, split, ceil, hue, etc.
// -- https://stylus-lang.com/docs/bifs.html
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)))
}

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

/{ // {{{ Color generator.
	// Color-scheme picker
	// BG: background-color; FG: Color; AC: Accent Color
	ColorSchemes = {
		'custom':                   { BG:   cg_bg, FG:   cg_fg, AC:   cg_ac }
		'ericsson':                 { BG: #0C0C0C, FG: #F2F2F2, AC: #008CFF }
		'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':              { BG: #181818, FG: #e6e6e6, AC: #4f8cc9 }
		'github-dark-mode':         { BG: #0d1117, FG: #c9d1d9, AC: #58a6ff }
		'gruvbox-dark-soft':        { BG: #32302f, FG: #fbf1c7, AC: #d65d0e }
		'gruvbox-dark-medium':      { BG: #282828, FG: #fbf1c7, AC: #d65d0e }
		'gruvbox-dark-hard':        { BG: #1c2021, FG: #fbf1c7, AC: #d65d0e }
		'solarized-dark':           { BG: #03303c, FG: #bcc5c5, AC: #859900 }
		'dracula':                  { BG: #282a36, FG: #f8f8f2, AC: #bd93f9 }
		'nord-dark':                { BG: #2e3440, FG: #eceff4, AC: #5e81ac }
		'arc-dark':                 { BG: #343944, FG: #c1c8d1, AC: #5294e2 }
		'moonlight':                { BG: #1e2030, FG: #c8d3f5, AC: #82aaff }
		'monokai':                  { BG: #272822, FG: #e8e8e3, AC: #fd9720 }
		'horizon':                  { BG: #1c1e26, FG: #d5c1ac, AC: #E95378 }
		'doom-one':                 { BG: #21242b, FG: #bbc2cf, AC: #51afef }
		'deep-dark':                { BG: #111111, FG: #eff0f1, AC: #00adee }
		'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)
			define('ac', var(--ac), 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, hue:   0deg } \
		{ key: v2, hue:  30deg } \
		{ key: v3, hue:  60deg } \
		{ key: v4, hue:  90deg } \
		{ key: v5, hue: 180deg } \
		{ key: v6, hue: 210deg } \
		{ key: v7, hue: 270deg } \
		{ key: v8, hue: 300deg } \
		{ key: v9, hue:   0deg } \
	)

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

	/*
	Dynamically generate background-colors, forground-colors, and other color codes
	mainly by using darken, lighten, and hsl functions to adjust colors based on base-colors.
	In this way, it's not necessary to define variables for different color codes.
	It will define variables for background-colors, forground-colors, and other color codes:
	background-colors: bg0, bg1 ... bg5
	foreground-colors: fg0, fg1 ... fg5
	background-colors: v00 v01 ... v09, v10 v11 ... v19, ... v90, v91 ... v99
	*/
	// 1. 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)
	}

	// 2. 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, 90%)
		$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)
	}

	// 3. 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 {
			/// Case for accent colors.
			if ($sel.key == v0) {
				$color = darken($sel.color, (80% - ((num + num/3) * 7.5)))
				$color = darken($sel.color, (100% - (num+3) * 7.5))
				$color = lightness($color, lightness($color) + num)
			}

			/// Case for gray colors.
			else if ($sel.key == v9) {
				$color = hsl($sel.hue, 0%, 50% + cg_lig)
				$color = darken($color, (100% - (num+2) * 17))
			}

			/// Case for RGB colors.
			else {
				$hue   = $sel.hue
				$color = hsl($hue, 60% + cg_sat, 60% + cg_lig)
				$color = darken($color, (100% - (num+2) * 7.5))
				$color = lightness($color, lightness($color) + num)
			}

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

			$key = s('%s%s', $sel.key, num)
			$val = 'var(--%s-%s)' % (($sel.key) (num))
			define(...