Skip to content
This repository has been archived by the owner on Jun 19, 2021. It is now read-only.
/ bui Public archive

🎨 UI and colors management that SuperB

License

Notifications You must be signed in to change notification settings

NNBnh/bui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

Move focus to evc

BUI

UI and colors management that SuperB

Artwork by いのふとん

License: GPL-3.0 Development abandoned

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)

Minecraft wool

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 Base00
BUI_COLOR_BASE01 Base01
BUI_COLOR_BASE02 Base02
BUI_COLOR_BASE03 Base03
BUI_COLOR_BASE04 Base04
BUI_COLOR_BASE05 Base05
BUI_COLOR_BASE06 Base06
BUI_COLOR_BASE07 Base07
BUI_COLOR_BASE08 Base08
BUI_COLOR_BASE09 Base09
BUI_COLOR_BASE0A Base0A
BUI_COLOR_BASE0B Base0B
BUI_COLOR_BASE0C Base0C
BUI_COLOR_BASE0D Base0D
BUI_COLOR_BASE0E Base0E
BUI_COLOR_BASE0F Base0F

Terminal

Set the terminal color:

Value Name Color
BUI_COLOR_TERMINAL000 black Black
BUI_COLOR_TERMINAL001 red Red
BUI_COLOR_TERMINAL002 green Green
BUI_COLOR_TERMINAL003 yellow Yellow
BUI_COLOR_TERMINAL004 blue Blue
BUI_COLOR_TERMINAL005 magenta Magenta
BUI_COLOR_TERMINAL006 cyan Cyan
BUI_COLOR_TERMINAL007 white White
BUI_COLOR_TERMINAL008 bright_black Bright black
BUI_COLOR_TERMINAL009 bright_red Bright red
BUI_COLOR_TERMINAL010 bright_green Bright green
BUI_COLOR_TERMINAL011 bright_yellow Bright yellow
BUI_COLOR_TERMINAL012 bright_blue Bright blue
BUI_COLOR_TERMINAL013 bright_magenta Bright magenta
BUI_COLOR_TERMINAL014 bright_cyan Bright cyan
BUI_COLOR_TERMINAL015 bright_white Bright white
BUI_COLOR_TERMINAL016 16 16
BUI_COLOR_TERMINAL017 17 17
BUI_COLOR_TERMINAL018 18 18
BUI_COLOR_TERMINAL019 19 19
... ... ...
BUI_COLOR_TERMINAL255 255 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

Resources






Made with ❤️ by NNB

Buy Me a Coffee

About

🎨 UI and colors management that SuperB

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project