Theme sharing

[Kingsmai]

Here is a simple WIP white theme for basic bootstrap ui

Preview:

@tool
extends ProgrammaticTheme

#region COLOR PALATTE
# Text Colors
const PRIMARY_TEXT = Color("#303133")
const REGULAR_TEXT = Color("#606266")
const SECONDARY_TEXT = Color("#909399")
const PLACEHOLDER_TEXT = Color("#A8ABB2")
const DISABLED_TEXT = Color("#C0C4CC")

# Border Colors
const DARKER_BORDER = Color("#CDD0D6")
const DARK_BORDER = Color("#D4D7DE")
const BASE_BORDER = Color("#DCDFE6")
const LIGHT_BORDER = Color("#E4E7ED")
const LIGHTER_BORDER = Color("#EBEEF5")
const EXTRA_LIGHT_BORDER = Color("#F2F6FC")

# Fill Colors
const DARKER_FILL = Color("#E6E8EB")
const DARK_FILL = Color("#EBEDF0")
const BASE_FILL = Color("#F0F2F5")
const LIGHT_FILL = Color("#F5F7FA")
const LIGHTER_FILL = Color("#FAFAFA")
const EXTRA_LIGHT_FILL = Color("#FAFCFF")
const BLANK_FILL = Color("#FFFFFF")

# Basic Colors
const BASIC_BLACK = Color("#000000")
const BASIC_WHITE = Color("#FFFFFF")
const TRANSPARENT = Color(0, 0, 0, 0) # Equivalent to transparent

# Background Colors
const PAGE_BACKGROUND = Color("#F2F3F5")
const BASE_BACKGROUND = Color("#FFFFFF")
const OVERLAY_BACKGROUND = Color("#FFFFFF")

# Brand Colors
const DEFAULT_COLOR = Color("#606266")
const BRAND_COLOR = Color("#409EFF")
const SUCCESS_COLOR = Color("#67C23A")
const WARNING_COLOR = Color("#E6A23C")
const DANGER_COLOR = Color("#F56C6C")
const INFO_COLOR = Color("#909399")

var DEFAULT_HOVER_COLOR = BRAND_COLOR.lightened(0.9)
var BRAND_HOVER_COLOR = BRAND_COLOR.lightened(0.1)
var BRAND_PRESSED_COLOR = BRAND_COLOR.darkened(0.1)
var SUCCESS_HOVER_COLOR = SUCCESS_COLOR.lightened(0.1)
var SUCCESS_PRESSED_COLOR = SUCCESS_COLOR.darkened(0.1)
var WARNING_HOVER_COLOR = WARNING_COLOR.lightened(0.1)
var WARNING_PRESSED_COLOR = WARNING_COLOR.darkened(0.1)
var DANGER_HOVER_COLOR = DANGER_COLOR.lightened(0.1)
var DANGER_PRESSED_COLOR = DANGER_COLOR.darkened(0.1)
var INFO_HOVER_COLOR = INFO_COLOR.lightened(0.1)
var INFO_PRESSED_COLOR = INFO_COLOR.darkened(0.1)
#endregion

#region BORDER_AND_CORNERS
const DEFAULT_BUTTON_BORDER_WIDTH = 1
const DEFAULT_BUTTON_MARGIN = 4
const DEFAULT_BUTTON_CORNER_RADIUS = 4

const DEFAULT_CONTENT_MARGIN = 8
const DEFAULT_CONTENT_CORNER_RADIUS = 8

const DEFAULT_SEPARATION = 4
#endregion

#region STYLES
var base_button_style = stylebox_flat(inherit(
	border_width(DEFAULT_BUTTON_BORDER_WIDTH),
	content_margins(DEFAULT_BUTTON_CORNER_RADIUS),
	corner_radius(DEFAULT_BUTTON_MARGIN)
))

var default_button_style = inherit(base_button_style, {
	bg_color = TRANSPARENT,
	border_color = DEFAULT_COLOR,
})

var default_button_hover_style = inherit(base_button_style, {
	bg_color = DEFAULT_HOVER_COLOR,
	border_color = BRAND_COLOR.lightened(0.5)
})

var default_button_pressed_style = inherit(base_button_style, {
	bg_color = DEFAULT_HOVER_COLOR,
	border_color = BRAND_COLOR
})

var primary_button_style = inherit(base_button_style, {
	bg_color = BRAND_COLOR,
	border_color = BRAND_COLOR
})

var primary_button_hover_style = inherit(base_button_style, {
	bg_color = BRAND_HOVER_COLOR,
	border_color = BRAND_HOVER_COLOR
})

var primary_button_pressed_style = inherit(base_button_style, {
	bg_color = BRAND_PRESSED_COLOR,
	border_color = BRAND_PRESSED_COLOR
})
#endregion

func setup():
	set_save_path("res://resources/themes/main_theme.tres")

func define_theme():
	define_style("PanelContainer", {
		panel = stylebox_flat(
			inherit(
				{bg_color = PAGE_BACKGROUND},
				content_margins(DEFAULT_CONTENT_MARGIN),
				corner_radius(DEFAULT_CONTENT_CORNER_RADIUS)
			)
		)
	})
	define_style("Panel", {
		panel = stylebox_flat({
			bg_color = PAGE_BACKGROUND
		})
	})

	define_style("BoxContainer", {
	  separation = DEFAULT_SEPARATION
	})

	define_style("Label", {
		font_color = PRIMARY_TEXT
	})
	define_style("LinkButton", {
		font_color = DEFAULT_COLOR,
		font_hover_color = BRAND_HOVER_COLOR,
		font_pressed_color = BRAND_PRESSED_COLOR,
		font_focus_color = BRAND_COLOR,
	})
	
	define_style("Button", {
		normal = default_button_style,
		hover = default_button_hover_style,
		pressed = default_button_pressed_style,
		font_color = REGULAR_TEXT,
		font_hover_color = BRAND_HOVER_COLOR,
		font_pressed_color = BRAND_HOVER_COLOR,
		font_hover_pressed_color = BRAND_HOVER_COLOR,
		font_focus_color = REGULAR_TEXT,
	})
	define_variant_style("ButtonPrimary", "Button", {
		normal = primary_button_style,
		hover = primary_button_hover_style,
		pressed = primary_button_pressed_style,
		font_color = BASE_BACKGROUND,
		font_hover_color = BASE_BACKGROUND,
		font_pressed_color = BASE_BACKGROUND,
		font_hover_pressed_color = BASE_BACKGROUND,
		font_focus_color = BASE_BACKGROUND,
	})
	define_style("CheckButton", {
		normal = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		hover = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		pressed = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		focus = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		hover_pressed = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
	})
	define_style("CheckBox", {
		normal = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		hover = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		pressed = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		focus = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
		hover_pressed = stylebox_empty(content_margins(DEFAULT_BUTTON_MARGIN)),
	})

	define_style("LineEdit", {
	  normal = stylebox_flat(inherit({
			bg_color = BASE_BACKGROUND
		},
		content_margins(DEFAULT_BUTTON_MARGIN),
		border_width(DEFAULT_BUTTON_BORDER_WIDTH),
		corner_radius(DEFAULT_BUTTON_CORNER_RADIUS))),
		font_color = PRIMARY_TEXT,
		caret_color = PRIMARY_TEXT,
	})