Emerge.UI.Color (Emerge v0.2.1)

Copy Markdown View Source

Helpers for UI color tuples, including the Tailwind CSS v4.2 palette.

These helpers return the tuple formats accepted by Emerge.UI color attributes such as Background.color/1, Border.color/1, Font.color/1, and Svg.color/1.

Tailwind palette values are derived from the official v4.2 OKLCH tokens and converted to stable sRGB byte tuples.

Examples

iex> Emerge.UI.Color.color(:sky)
{:color_rgb, {0, 188, 255}}

iex> Emerge.UI.Color.color(:rose, 300)
{:color_rgb, {255, 161, 173}}

iex> Emerge.UI.Color.color(:sky, 200, 0.3)
{:color_rgba, {184, 230, 254, 77}}

iex> Emerge.UI.Color.color_rgba(12, 34, 56, 0.5)
{:color_rgba, {12, 34, 56, 128}}

Summary

Types

channel()

A single RGB or alpha byte channel.

color()

Supported named colors.

rgb_tuple()

Tuple accepted by Emerge.UI color attributes.

rgba_tuple()
shade()

Supported Tailwind shade values.

t()

Functions

color(name, shade \\ 400, alpha \\ 1.0)

Return a Tailwind or flat color tuple.

color_rgb(r, g, b)

Return a raw RGB tuple accepted by Emerge.UI color attributes.

color_rgba(r, g, b, alpha)

Return a raw RGBA tuple accepted by Emerge.UI color attributes.

Types

channel()

@type channel() :: 0..255

A single RGB or alpha byte channel.

color()

@type color() ::
  :slate
  | :gray
  | :zinc
  | :neutral
  | :stone
  | :red
  | :orange
  | :amber
  | :yellow
  | :lime
  | :green
  | :emerald
  | :teal
  | :cyan
  | :sky
  | :blue
  | :indigo
  | :violet
  | :purple
  | :fuchsia
  | :pink
  | :rose
  | :taupe
  | :mauve
  | :mist
  | :olive
  | :black
  | :white

Supported named colors.

rgb_tuple()

@type rgb_tuple() :: {:color_rgb, {channel(), channel(), channel()}}

Tuple accepted by Emerge.UI color attributes.

rgba_tuple()

@type rgba_tuple() :: {:color_rgba, {channel(), channel(), channel(), channel()}}

shade()

@type shade() :: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950

Supported Tailwind shade values.

t()

@type t() :: rgb_tuple() | rgba_tuple()

Functions

color(name, shade \\ 400, alpha \\ 1.0)

@spec color(color(), shade(), number()) :: t()

Return a Tailwind or flat color tuple.

shade defaults to 400 and alpha uses CSS-style fractional opacity from 0.0 to 1.0.

Opaque colors collapse to {:color_rgb, {r, g, b}}. Translucent colors return {:color_rgba, {r, g, b, a}}.

Examples

iex> Emerge.UI.Color.color(:sky)
{:color_rgb, {0, 188, 255}}

iex> Emerge.UI.Color.color(:sky, 200, 0.3)
{:color_rgba, {184, 230, 254, 77}}

iex> Emerge.UI.Color.color(:black, 400, 0.5)
{:color_rgba, {0, 0, 0, 128}}

color_rgb(r, g, b)

@spec color_rgb(integer(), integer(), integer()) :: rgb_tuple()

Return a raw RGB tuple accepted by Emerge.UI color attributes.

Example

iex> Emerge.UI.Color.color_rgb(12, 34, 56)
{:color_rgb, {12, 34, 56}}

color_rgba(r, g, b, alpha)

@spec color_rgba(integer(), integer(), integer(), number()) :: rgba_tuple()

Return a raw RGBA tuple accepted by Emerge.UI color attributes.

alpha uses CSS-style fractional opacity from 0.0 to 1.0.

Example

iex> Emerge.UI.Color.color_rgba(12, 34, 56, 0.5)
{:color_rgba, {12, 34, 56, 128}}