Fandom Developers Wiki
Fandom Developers Wiki
Fandom Developers Wiki
3,275
pages
in: Unmaintained, Invocable modules

Global Lua Modules/Colors

< Global Lua Modules
Sign in to edit

Colors library for embedded color processing in the FANDOM environment. It ports and extends functionality in the Colors JS library written by Pecoes. The module supports HSL, RGB and hexadecimal web colors. The module offers numerous features:

  • Color parameter support in Lua modules.
  • Color parameter insertion in wiki templates.
  • Color variable parsing for style templating.
  • Color item creation and conversion utilities.
  • A vast array of color processing methods.
  • Alpha and boolean support for flexible color logic. This module will not work as expected on UCP wikis.

Demo

This demo uses {{Color scheme}} to render the Wikipedia color scheme.

  • Light Gray#f6f6f6for the body$color-body
  • White#fffffffor the page$color-page
  • Mid Dark Gray#f6f6f6for the header$color-header
  • Cerulean#0b0080for links$color-links
  • Mid Dark Gray#a7d7f9for buttons$color-buttons


Installation

Usage

Example usage on a wiki

<div style="{{colors|css|1px solid $color-community-header}}"></div>

Rendered output on desktop: 

<div style="1px solid #404a57"></div>

Example usage in a Lua module

local colors = require("Dev:Colors")
mw.log(colors.fromHsl(214, 0.15, 0.8):string())
-- expected output '#414b58'

Documentation[]

Package items[]

colors.fromRgb(r, g, b, a) (function)
Creation of RGB color instances.
Parameters:
r Red value (0 - 255). (number)
g Green value (0 - 255). (number)
b Blue (0 - 255). (number)
a Alpha value (0 - 1). (number; optional)
Returns: Color instance. (Color)
Usage: colors.fromRgb(255, 255, 255, 0.2)
See also: Color:new
colors.fromHsl(h, s, l, a) (function)
Creation of HSL color instances.
Parameters:
h Hue value (0 - 360) (number)
s Saturation value (0 - 1). (number)
l Luminance value (0 - 1). (number)
a Alpha channel (0 - 1). (number; optional)
Returns: Color instance. (Color)
Usage: colors.fromHsl(0, 0, 1, 0.2)
See also: Color:new
colors.parse(str) (function)
Parsing logic for color strings.
Parameter: str Valid color string. (string)
Error: 'cannot parse $str' (line 756)
Returns: Color instance. (Color)
Usage: colors.parse('#ffffff')
See also: Color:new
colors.instance(item) (function)
Instance test function for colors.
Parameter: item Color item or string. (Color|string)
Returns: Whether the color item was instantiated. (boolean)
Usage: colors.instance('#ffffff')
colors.wikia(frame) (function)
Color SASS parameter access utility for templating.
Parameter: frame Frame invocation object. (table)
Error: 'invalid SASS parameter name supplied' (line 778)
Returns: Color string aligning with parameter. (string)
Usage: {{colors|<wikia>|<key>}}
colors.css(frame) (function)
Color parameter parser for inline styling.
Parameters:
frame Frame invocation object. (table)
frame.args1 Inline CSS stylesheet. (string; optional)
Error: 'no styling supplied' (line 799)
Returns: CSS styling with $parameters from colors.params. (string)
Usage: {{colors|<css>|<styling>}}
colors.text(frame) (function)
Color generator for high-contrast text.
Parameters:
frame Frame invocation object. (table)
frame.args1 Color to process. (string; optional)
frame.args2 Dark color to return. (string; optional)
frame.args3 Light color to return. (string; optional)
frame.args.lum Whether luminance is used. (string; optional)
Error: 'no color supplied' (line 822)
Returns: Color string '#000000'/$2 or '#ffffff'/$3. (string)
Usage: {{colors|<text>|<bg>|<dark color>|<light color>}}
colors.params (table)
SASS color parameter table for Lua modules. These can be accessed elsewhere in the module:
Fields:
background-dynamic Whether the background is split. Default: 'false'. (string)
background-image Background image URL. Default: ''. (string)
background-image-height Background image height. Default: 0. (string)
background-image-width Background image width. Default: 0. (string)
color-body Background color. (string)
color-body-middle Background split color. (string)
color-buttons Button color. (string)
color-community-header Community header color. (string)
color-header Legacy wiki header color. (string)
color-links Wiki link color. (string)
color-page Page color. (string)
color-text Page text color. (string)
color-contrast Page contrast color. (string)
color-page-border In-page border color. (string)
color-button-highlight Button highlight color. (string)
color-button-text Button text color. (string)
infobox-background Infobox background color. (string)
infobox-section-header-background Infobox section header color. (string)
color-community-header-text Infobox section header color. (string)
dropdown-background-color Dropdown background color. (string)
dropdown-menu-highlight Dropdown menu highlight color. (string)
is-dark-wiki Whether the wiki has a dark theme ('true' or 'false'). (string)
Usage: colors.params['key']
colors.main(f) (function)
Template entrypoint for Template:Colors access.
Parameter: f Frame object in module (child) context. (table)
Returns: Module output in template (parent) context. (string)
Usage: {{#invoke:colors|main}}

Color[]

Color item class, used for color processing. The class provides color prop getter-setters, procedures for color computation, compositing methods and serialisation into CSS color formats.

Color.tup (table)
Color tuple.
Color.typ (member • string)
Color space type.
Color.alp (member • number)
Color alpha channel value.
Color:new(typ, tup, alp) (function)
Color instance constructor.
Parameters:
typ Color space type ('hsl' or 'rgb'). (string)
tup Color tuple in HSL or RGB (table)
alp Alpha value range (0 - 1). (number)
Errors:
'no color data provided' (line 304)
'invalid color type "$1" specified' (line 309)
Returns: Color instance. (Color)
Color:string() (function)
Color string default output.
Returns: Hexadecimal 6-digit or HSLA color string. (string)
Usage:
colors.parse('hsl(214, 15%, 30%)'):string() == '#404a57'
colors.parse('#404a5780'):string() == 'hsl(214, 15%, 30%, 0.5)'
Color:hex() (function)
Color hexadecimal string output.
Returns: Hexadecimal color string. (string)
Usage: colors.parse('hsl(214, 15%, 30%)'):hex() == '#404a57'
Color:rgb() (function)
RGBA functional color string output.
Returns: RGBA color string. (string)
Usage: colors.parse('hsl(214, 15%, 30%)'):rgb() == 'rgb(64, 74, 87)'
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()
Color:hsl() (function)
HSL functional color string output.
Returns: HSLA color string. (string)
Usage: colors.parse('rgb(64, 74, 87)'):hsl() == 'hsl(214, 15%, 30%)'
See also: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()_and_hsla()
Color:red(val) (function)
Red color property getter-setter.
Parameter: val Red value to set (1 - 255). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#000000'):red(255):string() == '#ff0000'
Color:green(val) (function)
Green color property getter-setter.
Parameter: val Green value to set (1 - 255). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#ffffff'):green(1):string() == '#ff00ff'
Color:blue(val) (function)
Blue color property getter-setter.
Parameter: val Blue value to set (1 - 255). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#00ff00'):blue(255):string() == '#00ffff'
Color:hue(val) (function)
Hue color property getter-setter.
Parameter: val Hue value to set (0 - 360). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):hue(180):string() == '#00ffff'
Color:sat(val) (function)
Saturation color property getter-setter.
Parameter: val Saturation value to set (0 - 100). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):sat(0):string() == '#808080'
Color:lum(val) (function)
Lightness color property getter-setter.
Parameter: val Luminosity value to set (0 - 100). (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):lum(0):string() == '#000000'
Color:alpha(val) (function)
Alpha getter-setter for color compositing.
Parameter: val Modifier 0 - 100. (number)
Returns: Color instance. (Color)
Usage: colors.parse('#ffffff'):alpha(0):string() == 'hsla(0, 0%, 0%, 0)'
Color:rotate(mod) (function)
Post-processing operator for color hue rotation.
Parameter: mod Modifier (-360 - 360). (number)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):rotate(60):string() == '#ffff00'
Color:saturate(mod) (function)
Post-processing operator for web color saturation.
Parameter: mod Modifier (-100 - 100). (number)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):saturate(-25):string() == '#df2020'
Color:lighten(mod) (function)
Post-processing operator for web color lightness.
Parameter: mod Modifier (-100 - 100). (number)
Returns: Color instance. (Color)
Usage: colors.parse('#ff0000'):lighten(25):string() == '#ff8080'
Color:opacify(mod) (function)
Opacification utility for color compositing.
Parameter: mod Modifier (-100 - 100). (number)
Returns: Color instance. (Color)
Usage: colors.parse('#ffffff'):opacify(-25):string() == 'hsla(0, 0%, 100%, 0.75)'
Color:mix(other, weight) (function)
Color additive mixing utility.
Parameters:
other Module-compatible color string or instance. (string|table)
weight Color weight of original (0 - 100). Default: 50. (number; optional)
Returns: Color instance. (Color)
Usage: colors.parse('#fff'):mix('#000', 80):hex() == '#cccccc'
Color:invert() (function)
Color inversion utility.
Returns: Color instance. (Color)
Usage: colors.parse('#ffffff'):invert():hex() == '#000000'
Color:complement() (function)
Complementary color utility.
Returns: Color instance. (Color)
Usage: colors.parse('#ff8000'):complement():hex() == '#0080ff'
Color:bright(lim) (function)
Color brightness status testing.
Parameter: lim Luminosity threshold. Default: 50. (number; optional)
Returns: Boolean for tone beyond threshold. (boolean)
Usage:
colors.parse('#ff8000'):bright() == true
colors.parse('#ff8000'):bright(60) == false
Color:luminant(lim) (function)
Color luminance status testing.
Parameter: lim Luminance threshold. Default: 50. (number; optional)
Returns: Boolean for luminance beyond threshold. (boolean)
Usage:
colors.parse('#ffff00'):luminant() == true
colors.parse('#ffff00'):luminant(95) == false
See also: Relative luminance (Wikipedia)
Color:chromatic() (function)
Color saturation and visibility status testing.
Returns: Boolean for color status. (boolean)
Usage: colors.parse('#ffff00'):chromatic() == true

Community content is available under CC-BY-SA unless otherwise noted.