Module:ColorSwatch

Documentation for this module may be created at Module:ColorSwatch/doc

local p = {}

local color = require("Module:EGAColor")

function p.swatch(frame)
	local bg = color.to_index(frame.args.bg)
	local fg = color.to_index(frame.args.fg)
	local blinking = false
	for _, arg in ipairs(frame.args) do
		if string.lower(arg) == "blinking" then
			blinking = true
			break
		end
	end

	local name = get_name(bg, fg, blinking)
	local swatch = get_swatch(bg, fg, blinking)
	local hex = get_hex(bg, fg)
	return string.format("%s %s (%s)", name, tostring(swatch), hex)
end

function get_name(bg, fg, blinking)
	local result = color.to_name(fg) .. " on " .. color.to_name(bg)
	if blinking then
		result = "blinking " .. result
	end
	return result
end

function get_swatch(bg, fg, blinking)
	local bg = color.to_hex_color(bg)
	local fg = color.to_hex_color(fg)

	local outer = mw.html.create("span")
	outer:css({
		width = "1.25em",
		height = "1em",
		["background-color"] = bg,
		["box-shadow"] = "0 0 1px #808080",
		display = "inline-flex",
		["align-items"] = "center",
		["justify-content"] = "center"
	})
	local inner = outer:tag("span")
	inner:css({
		display = "inline-block",
		width = "0.5em",
		height = "0.5em"
	})
	if blinking then
		local gradient = "linear-gradient(135deg, {h} 0% 50%, {h}0 50% 100%)" 
		gradient = string.gsub(gradient, "{h}", fg)
		inner:css({
			background = gradient,
			["box-shadow"] = "inset 0 0 0 1px " .. fg
		})
	else
		inner:css("background-color", fg)
	end
	return outer
end

function get_hex(bg, fg)
	return string.format("0x%02X", bg*16 + fg)
end

return p