NNBnh / bui

🎨 UI and colors management that SuperB

Move focus to evc

BUI

UI and colors management that SuperB

Artwork by いのふとん

About

BUI is a UI and colors management method that export the colors hex through environment variables so any program that can read environment variables can used it.

Setup

UI

Set the user interface:

Value	Invalid	Default	Description
BUI_GTK_THEME	string	$GTK_THEME (Adwaita)	GTK theme
BUI_GTK_TOOLBAR_STYLE	(GTK_TOOLBAR_ICONS| |GTK_TOOLBAR_TEXT| |GTK_TOOLBAR_BOTH| |GTK_TOOLBAR_BOTH_HORIZ)	GTK_TOOLBAR_BOTH	GTK toolbar style
BUI_GTK_TOOLBAR_ICON_SIZE	(GTK_ICON_SIZE_MENU| |GTK_ICON_SIZE_SMALL_TOOLBAR| |GTK_ICON_SIZE_LARGE_TOOLBAR| |GTK_ICON_SIZE_BUTTON| |GTK_ICON_SIZE_DND| |GTK_ICON_SIZE_DIALOG)	GTK_ICON_SIZE_LARGE_TOOLBAR	GTK toolbar icon size
BUI_ICON_THEME	string	Adwaita	Icon theme
BUI_MOUSE_CURSOR_THEME	string	Adwaita	Mouse cursor theme
BUI_MOUSE_CURSOR_SIZE	<number>	0.0	Border size
BUI_BUTTON_IMAGES	(true|false)	true	Button images
BUI_MENU_IMAGES	(true|false)	true	Menu images
BUI_EVENT_SOUNDS	(true|false)	true	Event sounds
BUI_INPUT_FEEDBACK_SOUNDS	(true|false)	true	Input feedback sounds
BUI_GAPS_SIZE	<number>	0.0	Gaps size
BUI_BORDER_SIZE	<number>	1.0	Border size
BUI_OPACITY	(0.0 - 1.0)	1.0	Background opacity

Font

Value	Invalid	Default	Description
BUI_CURSOR	(block|beam|underline)	block	Text cursor shape
BUI_CURSOR_BLINK	(true|false)	true	Text cursor blink
BUI_FONT_FAMILY	string	Sans	Font family
BUI_FONT_SIZE	<number>	10.0	Font size
BUI_FONT_MONO_FAMILY	string	Monospace	Fixed-width font family
BUI_FONT_MONO_SIZE	<number>	10	Fixed-width font size
BUI_FONT_ANTIALIAS	(true|false)	true	Font antialias
BUI_HINT_STYLE	(none|slight|medium|full)	full	Hint style
BUI_SUBPIXEL	(none|rgb|bgr|vrgb|vbgr)	none	Subpixel

Colors

First set the hex value of all the colors: BUI_COLOR_<NAME>="#<HEX>".

As for me, I put all the color names that match the Minecraft wool palette (i mean 16 colors with 4 of them being grayscale, looks kinda fit with the terminal color palette)

BUI_COLOR_BLACK
BUI_COLOR_GRAY
BUI_COLOR_GREY
BUI_COLOR_WHITE
BUI_COLOR_BROWN
BUI_COLOR_RED
BUI_COLOR_ORANGE
BUI_COLOR_YELLOW
BUI_COLOR_LIME
BUI_COLOR_GREEN
BUI_COLOR_TEAR
BUI_COLOR_CYAN
BUI_COLOR_BLUE
BUI_COLOR_PURPLE
BUI_COLOR_MAGENTA
BUI_COLOR_PINK

Then you can just associate the colors of the elements with their hex: export BUI_COLOR_<ELEMENT>="$BUI_COLOR_<NAME>.

This is a good practice as it makes the colors more readable (it shows the color name not the hex) and avoids duplication.

Elements

Set the color of the elements so that any program can get it:

Value	Description
BUI_COLOR_FOREGROUND	Foreground color
BUI_COLOR_BACKGROUND	Background color
BUI_COLOR_FOREGROUND_ALT	Alternative foreground color
BUI_COLOR_BACKGROUND_ALT	Alternative background color
BUI_COLOR_CURSOR	Cursor or focus element color
BUI_COLOR_CURSOR_ALT	Alternative cursor or unfocus element color
BUI_COLOR_SELECTION	Selection color

Base16

With function and syntax, Base16 is the best architecture as it work on most all color scheme:

Value	Color
BUI_COLOR_BASE00
BUI_COLOR_BASE01
BUI_COLOR_BASE02
BUI_COLOR_BASE03
BUI_COLOR_BASE04
BUI_COLOR_BASE05
BUI_COLOR_BASE06
BUI_COLOR_BASE07
BUI_COLOR_BASE08
BUI_COLOR_BASE09
BUI_COLOR_BASE0A
BUI_COLOR_BASE0B
BUI_COLOR_BASE0C
BUI_COLOR_BASE0D
BUI_COLOR_BASE0E
BUI_COLOR_BASE0F

Terminal

Set the terminal color:

Value	Name	Color
BUI_COLOR_TERMINAL000	black
BUI_COLOR_TERMINAL001	red
BUI_COLOR_TERMINAL002	green
BUI_COLOR_TERMINAL003	yellow
BUI_COLOR_TERMINAL004	blue
BUI_COLOR_TERMINAL005	magenta
BUI_COLOR_TERMINAL006	cyan
BUI_COLOR_TERMINAL007	white
BUI_COLOR_TERMINAL008	bright_black
BUI_COLOR_TERMINAL009	bright_red
BUI_COLOR_TERMINAL010	bright_green
BUI_COLOR_TERMINAL011	bright_yellow
BUI_COLOR_TERMINAL012	bright_blue
BUI_COLOR_TERMINAL013	bright_magenta
BUI_COLOR_TERMINAL014	bright_cyan
BUI_COLOR_TERMINAL015	bright_white
BUI_COLOR_TERMINAL016	16
BUI_COLOR_TERMINAL017	17
BUI_COLOR_TERMINAL018	18
BUI_COLOR_TERMINAL019	19
...	...	...
BUI_COLOR_TERMINAL255	255

Foreground, background and cursor are explained in Elements.

Example

# UI
export BUI_CURSOR="block"
export BUI_OPACITY="0.8"
export BUI_FONT_FAMILY="Iosevka Extended"
export BUI_FONT_SIZE="12.0"

# Colors
export BUI_COLOR_DARK="#181818"
export BUI_COLOR_DARK_ALT="#282828"
export BUI_COLOR_BLACK="#383838"
export BUI_COLOR_GRAY="#585858"
export BUI_COLOR_GREY="#B8B8B8"
export BUI_COLOR_WHITE="#D8D8D8"
export BUI_COLOR_LIGHT_ALT="#E8E8E8"
export BUI_COLOR_LIGHT="#F8F8F8"
export BUI_COLOR_BROWN="#A16946"
export BUI_COLOR_RED="#AB4642"
export BUI_COLOR_ORANGE="#DC9656"
export BUI_COLOR_YELLOW="#F7CA88"
export BUI_COLOR_LIME="#A1B56C"
export BUI_COLOR_CYAN="#86C1B9"
export BUI_COLOR_BLUE="#7CAFC2"
export BUI_COLOR_MAGENTA="#BA8BAF"

# Elements
export BUI_COLOR_MAIN="$BUI_COLOR_YELLOW"
export BUI_COLOR_MAIN_ALT="$BUI_COLOR_GREY"
export BUI_COLOR_FOREGROUND="$BUI_COLOR_WHITE"
export BUI_COLOR_BACKGROUND="$BUI_COLOR_DARK"
export BUI_COLOR_FOREGROUND_ALT="$BUI_COLOR_GRAY"
export BUI_COLOR_BACKGROUND_ALT="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_CURSOR="$BUI_COLOR_MAIN"
export BUI_COLOR_CURSOR_ALT="$BUI_COLOR_MAIN_ALT"
export BUI_COLOR_SELECTION="$BUI_COLOR_GRAY"

# Base16
export BUI_COLOR_BASE00="$BUI_COLOR_DARK"
export BUI_COLOR_BASE01="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_BASE02="$BUI_COLOR_BLACK"
export BUI_COLOR_BASE03="$BUI_COLOR_GRAY"
export BUI_COLOR_BASE04="$BUI_COLOR_GREY"
export BUI_COLOR_BASE05="$BUI_COLOR_WHITE"
export BUI_COLOR_BASE06="$BUI_COLOR_LIGHT_ALT"
export BUI_COLOR_BASE07="$BUI_COLOR_LIGHT"
export BUI_COLOR_BASE08="$BUI_COLOR_RED"
export BUI_COLOR_BASE09="$BUI_COLOR_ORANGE"
export BUI_COLOR_BASE0A="$BUI_COLOR_YELLOW"
export BUI_COLOR_BASE0B="$BUI_COLOR_LIME"
export BUI_COLOR_BASE0C="$BUI_COLOR_CYAN"
export BUI_COLOR_BASE0D="$BUI_COLOR_BLUE"
export BUI_COLOR_BASE0E="$BUI_COLOR_MAGENTA"
export BUI_COLOR_BASE0F="$BUI_COLOR_BROWN"

# Terminal
export BUI_COLOR_TERMINAL000="$BUI_COLOR_DARK_ALT"
export BUI_COLOR_TERMINAL001="$BUI_COLOR_RED"
export BUI_COLOR_TERMINAL002="$BUI_COLOR_LIME"
export BUI_COLOR_TERMINAL003="$BUI_COLOR_YELLOW"
export BUI_COLOR_TERMINAL004="$BUI_COLOR_BLUE"
export BUI_COLOR_TERMINAL005="$BUI_COLOR_MAGENTA"
export BUI_COLOR_TERMINAL006="$BUI_COLOR_CYAN"
export BUI_COLOR_TERMINAL007="$BUI_COLOR_GREY"
export BUI_COLOR_TERMINAL008="$BUI_COLOR_GRAY"
export BUI_COLOR_TERMINAL009="$BUI_COLOR_RED"
export BUI_COLOR_TERMINAL010="$BUI_COLOR_LIME"
export BUI_COLOR_TERMINAL011="$BUI_COLOR_YELLOW"
export BUI_COLOR_TERMINAL012="$BUI_COLOR_BLUE"
export BUI_COLOR_TERMINAL013="$BUI_COLOR_MAGENTA"
export BUI_COLOR_TERMINAL014="$BUI_COLOR_CYAN"
export BUI_COLOR_TERMINAL015="$BUI_COLOR_LIGHT_ALT"

See my Environment variables for more information and explanations.

Integrate

• bui-appearance: for widget toolkit (GTK)
• bui-terminal: for terminal
• bui.kak: for Kakoune

Resources

• ANSI escape code
• Base16 by Chris Kempson

---

Made with ❤️ by NNB