howdy/ui/theme/tokens

The values components use in place of colours, fonts and radii. Each is a var() reference to a property every theme defines, so a class built from tokens looks right under any theme without being re-rendered.

import howdy/ui/theme/tokens
import sketch/css

fn badge() -> css.Class {
  css.class([
    css.background(tokens.primary),
    css.color(tokens.on_primary),
    css.property("border-radius", tokens.radius_small),
  ])
}

Spacing is not themed. It is a fixed scale in rem so layouts stay stable when the theme changes.

Values

all

</>

pub fn all() -> List(#(String, String))

Every token, paired with the property it reads. Used by tests to check each token is defined by theme.variables.

background

</>

pub const background: String

border

</>

pub const border: String

chart

</>

pub const chart: List(String)

The chart series colours in order.

chart_1

</>

pub const chart_1: String

chart_2

</>

pub const chart_2: String

chart_3

</>

pub const chart_3: String

chart_4

</>

pub const chart_4: String

chart_5

</>

pub const chart_5: String

danger

</>

pub const danger: String

focus

</>

pub const focus: String

font_body

</>

pub const font_body: String

font_heading

</>

pub const font_heading: String

font_mono

</>

pub const font_mono: String

muted

</>

pub const muted: String

on_danger

</>

pub const on_danger: String

on_primary

</>

pub const on_primary: String

primary

</>

pub const primary: String

primary_hover

</>

pub const primary_hover: String

radius_large

</>

pub const radius_large: String

radius_medium

</>

pub const radius_medium: String

radius_small

</>

pub const radius_small: String

space_1

</>

pub const space_1: String

space_2

</>

pub const space_2: String

space_3

</>

pub const space_3: String

space_4

</>

pub const space_4: String

space_6

</>

pub const space_6: String

space_8

</>

pub const space_8: String

surface

</>

pub const surface: String

text

</>

pub const text: String

text_muted

</>

pub const text_muted: String

✨