darkdev_medium by wenijinew

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

@name         darkdev_medium
@namespace    darkdev_medium
@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/wengm/stylus_dark_dev
@supportURL   https://gitlab.com/wengm/stylus_dark_dev/issues
@preprocessor stylus
@version      0.3.43
@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    f_size     'Font Base Size' [15, 10, 30, 5]
@var range    hb_size    'Headline Base Size' [35, 30, 40, 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_fanary  '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== */

/* static aliases */
t       = transparent
i       = !important

/{ /*START: Color Framework - QUESTION: WHY / MUST BEFORE { HERE*/

    // Color-scheme Picker Definition
    // 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 and define global variables for background color, foreground color, and accent color
    for color-scheme in ColorSchemes {
        if (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)
        }
    }

    // Color values or hues. https://en.wikipedia.org/wiki/Hue - In color theory, hue is one of the main properties (called color appearance parameters) of a color, defined technically in the CIECAM02 model as "the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, orange, yellow, green, blue, violet,"[1] which certain theories of color vision call unique hues.
    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]

    /* convert color code to HLSA format
    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)
    }

    /*
    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..9 { // QUESTION - CAN WE USE VARIABLE HERE TO REPLACE 9?
        $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..9 {
        $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)
        $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. TODO - LEARN HOW TO TUNE COLORS WITH ARGUMETNS OF FUNCTIONS LIKE DARKEN AND LIGHTNESS
    for c, i in colors[2..length(colors)] {
        $sel_color  = colors[i+2]
        $dbg += ' ' + $sel_color

        for num in 0..9 {
            /// Case for accent colors.
            if ($sel_color.key == v0) {
                $color = darken($sel_color.color, (80% - ((num + num/3) * 7.5)))
                $color = darken($sel_color.color, (100% - (num+3) * 7.5))
                $color = lightness($color, lightness($color) + num)
            }

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

            /// Case for RGB colors.
            else {
                $hue   = $sel_color.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. - QUESTION - WHY DO WE NEED TO CONVERT TO HSLA?
            $color = to_hsla($color)

            $key = s('%s%s', $sel_color.key, num)
            $val = 'var(--%s-%s)' % (($sel_color.key) (num))
            define('$' + $key, $color, global)
            define('' + $key, $val, global)
        }
    }
} /*END: Color Framework*/

fw      = 400 // QUESTI...