Emerge.UI.Color (Emerge v0.4.0-beta.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}}