[UI] CSS specmap for the UI colors

[NullPlane]

Wanted to transfer some colorschemes maybe and I am not totally
sure which colors are where. Pieced together some from the
codebase and played around in the web UI editor a little to find all
the colors at the moment but I couldn't do it completely.

Oh and it's not directly related to this but it obviously allows for a
basic map to already be made before anything else. Just asking as
I'd love to port some schemes I've encountered to date...

Here's what I have. Missing marked with #####... Where's the rest
and maybe I missed some applications... The css is a high-contrast
styling toolkit...

:root {
    --inherit-base-theme: true;
    --primary: #FF5733; /*     buttons and select/hover (selected) + checkbox */
    --back: #1F1F1F; /*                framing and bars non-func (bg no elem) */
    --font: #FFFF00; /*                                     lbl font anywhere */
    --font-highlight: #00FFFF; /*       label hint font e.g. ctrl+k shortcuts */
    --font-hint: #A9A9A9; /* ################################################ */
    --button-back: #800080; /*               btns in UI elem (e.g. in ctrl+f) */
    --button-border: #FFD700; /*                    outline of an UI elem btn */
    --button-radius: 2dp;
    --base-horizontal-padding: 5dp;
    --base-vertical-padding: 5dp;
    --border-width: 1dp; /*                       width of borders in UI elem */
    --list-back: #4B0082; /*              bg of left dir bar, locatebar, etc. */
    --separator: #008000; /*     l. under f12 console + betw. ListBox entries */
    --item-hover: #FF4500; /*   e.g. Listbox Entry bg change when mouse is on */
    --scroll-button: #708090; /* ############################################ */
    --slider-back: #4682B4; /*    slider (see dblclk on hexcolorcode #ece606) */
    --slider-button: #FF69B4; /*                     sliding rail button core */
    --slider-border: #FFD700; /*    divider around sliding core (btn outline) */
    --scrollbar-border: #FF6347; /*                 outline for scrollbar box */
    --scrollbar-button: #20B2AA; /*                       untouched scrollbar */
    --scrollbar-hback-hover: #8A2BE2; /*               scrbar bg when hovered */
    --tab-back: #FF8C00; /*                                bg of inactive tab */
    --tab-line: #FF00FF; /*                         separator in between tabs */
    --tab-active: #556B2F; /*                      current doc tab background */
    --tab-hover: #B22222; /*      hover for dir bar, locatebar, inactive tabs */
    --tab-close: #D3D3D3; /*                               close btn for tabs */
    --tab-close-hover: #8B0000; /*                     close btn tab if hover */
    --icon: #00FF00; /*     symbol displayed in inactive tab + menu arrow ... */
    --icon-active: white; /*       symbol color in active tab or lftbar symgr */
    --icon-back-hover: #00CED1; /* bg for closeX btn in subwindow NOT HOVERED */
    /*  + HOVER only for subwindow minimize/maxim. btn (like css inspect f11) */
    --icon-line-hover: #FF1493; /* line inside closeX NOT HOVERED or hv. mima */
    --icon-back-alert: #FF4500; /*                     closeX bg when hovered */
    --menu-back: #2F4F4F; /*             bg of main menu unhovered unselected */
    --menu-font: #FFFF00; /*                      almost all of UI font color */
    --menu-border: #ADFF2F; /*                       outline of main menu box */
    --menu-font-active: white; /*   listbox hover or unsel. tab icon at hover */
    --menu-font-disabled: #BDB76B; /*     menu font if item click is disabled */
    --win-icon: #FAFAD2; /*  window maximize minimize lambda icon unsel unhov */
    --floating-icon: #DCDCDC; /* ############################################ */
    --term-back-color: #696969; /*                          f12 term bg color */
    --term-font-color: white; /*                   font color in f12 terminal */
    --highlight-primary: #FFA500; /* ######################################## */
    --disabled-color: #808080; /*    textedit, checkbox: enabled="false" text */
    --disabled-border: #A52A2A; /*            textedit enabled="false" border */
    --theme-error: #DC143C; /*     visual errors in program (e.g. langhealth) */
    --theme-warning: #FFD700; /* visual warnings in program (e.g. langhealth) */
    --theme-success: #00FF7F; /*  visual success in program (e.g. langhealth) */
    droppable-hovering-color: #999999; /*                      droppable bg?? */
}

Maybe I wanted to puzzle together a styling guide with images but I didn't
deliberately find a ListView or such...

Probably new elements should be added to this description too. Maybe a
separate .md for docs or such...

[SpartanJ]

Absolutely I need to at least comment this in the breeze.css file. Please give me a few days and I'll help you complete this.

Some quick hints:

--font-hint /* this is the font color of the hints in text inputs. The hint is the text that explains or suggest what to complete to the user, it's commonly also known as the placeholder in HTML */
--floating-icon /* this is literally the icon color used for floating icons, it's specifically used in ecode for the settings icon (top-right button) */
--highlight-primary /* this is only used for the border highlight of selected elements, currently only used for CheckBox, it's literally the underline color of it. */

--font-hint

--floating-icon

--highlight-primary:

[NullPlane]

Whoops I think --font-hint was the wrong one... The ###s are prob wrong line
I think I meant --font-highlight cuz it has no entry in the css other than the :roots

[SpartanJ]

Oh, --font-highlight is barely used but it's the color to highlight a change, specifically is used in the Git pluging to highlight the files in the tree view.

[SpartanJ]

droppable-hovering-color

is the foreground color drawn over an item that accepts widgets drop, it's easier to explain with an image, this color always needs to be semi-transparent:

I'm dragging premake5.lua tab into a droppable panel:

[SpartanJ]

Added --tab-font-inactive: text/font color in non-selected/active tabs, since from now they will use a slightly shaded color by default.