glaze_oat/theme

Theme tokens and <style> generation for Oat UI.

Example

import glaze_oat
import glaze_oat/theme

let my_theme =
  theme.default_theme()
  |> theme.set(theme.Primary, "light-dark(#334155, #e2e8f0)")
  |> theme.set(theme.RadiusLarge, "0.875rem")

html.head([], [
  glaze_oat.register(glaze_oat.version),
  theme.style_tag(my_theme),
])

CSS values

Any valid CSS value may be used (#hex, rgb(), var(...), clamp(...), light-dark(...), unit values such as rem, etc).

Types

Theme

opaque </>

A mapping from Token to CSS value.

pub opaque type Theme

Token

</>

A typed design token used as a key in a Theme.

Tokens are converted to CSS custom properties (for example Background -> --background) when rendering style output.

pub type Token {
  Background
  Foreground
  Card
  CardForeground
  Primary
  PrimaryForeground
  Secondary
  SecondaryForeground
  Muted
  MutedForeground
  Faint
  FaintForeground
  Accent
  Danger
  DangerForeground
  Success
  SuccessForeground
  Warning
  WarningForeground
  Border
  Input
  Ring
  Space1
  Space2
  Space3
  Space4
  Space5
  Space6
  Space8
  Space10
  Space12
  Space14
  Space16
  Space18
  RadiusSmall
  RadiusMedium
  RadiusLarge
  RadiusFull
  BarHeight
  FontSans
  FontMono
  Text1
  Text2
  Text3
  Text4
  Text5
  Text6
  Text7
  Text8
  TextRegular
  LeadingNormal
  FontNormal
  FontMedium
  FontSemibold
  FontBold
  ShadowSmall
  ShadowMedium
  ShadowLarge
  TransitionFast
  Transition
  ZDropdown
  ZModal
}

Constructors

```
Background
```
```
Foreground
```
```
Card
```
```
CardForeground
```
```
Primary
```
```
PrimaryForeground
```
```
Secondary
```
```
SecondaryForeground
```
```
Muted
```
```
MutedForeground
```
```
Faint
```
```
FaintForeground
```
```
Accent
```
```
Danger
```
```
DangerForeground
```
```
Success
```
```
SuccessForeground
```
```
Warning
```
```
WarningForeground
```
```
Border
```
```
Input
```
```
Ring
```
```
Space1
```
```
Space2
```
```
Space3
```
```
Space4
```
```
Space5
```
```
Space6
```
```
Space8
```
```
Space10
```
```
Space12
```
```
Space14
```
```
Space16
```
```
Space18
```
```
RadiusSmall
```
```
RadiusMedium
```
```
RadiusLarge
```
```
RadiusFull
```
```
BarHeight
```
```
FontSans
```
```
FontMono
```
```
Text1
```
```
Text2
```
```
Text3
```
```
Text4
```
```
Text5
```
```
Text6
```
```
Text7
```
```
Text8
```
```
TextRegular
```
```
LeadingNormal
```
```
FontNormal
```
```
FontMedium
```
```
FontSemibold
```
```
FontBold
```
```
ShadowSmall
```
```
ShadowMedium
```
```
ShadowLarge
```
```
TransitionFast
```
```
Transition
```
```
ZDropdown
```
```
ZModal
```

Values

default_theme

</>

pub fn default_theme() -> Theme

Returns Oats default theme.

This includes sensible defaults for spacing, radius, typography, shadows, transitions, and z-index values.

Start with this, even if you want to later change all of the colors.

from_list

</>

pub fn from_list(tokens: List(#(Token, String))) -> Theme

Construct a Theme from a list of token-value pairs.

If the same token appears multiple times, the last value overrides previous ones.

Example

let t = theme.from_list([
  #(theme.Primary, "oklch(0.205 0 0)"),
  #(theme.PrimaryForeground, "oklch(0.985 0 0)"),
])

get

</>

pub fn get(theme: Theme, token: Token) -> String

set

</>

pub fn set(theme: Theme, token: Token, value: String) -> Theme

set_colors

</>

pub fn set_colors(
  on theme: Theme,
  background background: String,
  foreground foreground: String,
  card card: String,
  card_foreground card_foreground: String,
  primary primary: String,
  primary_foreground primary_foreground: String,
  secondary secondary: String,
  secondary_foreground secondary_foreground: String,
  muted muted: String,
  muted_foreground muted_foreground: String,
  faint faint: String,
  faint_foreground faint_foreground: String,
  accent accent: String,
  danger danger: String,
  danger_foreground danger_foreground: String,
  success success: String,
  success_foreground success_foreground: String,
  warning warning: String,
  warning_foreground warning_foreground: String,
  border border: String,
  input input: String,
  ring ring: String,
) -> Theme

Function to update all color-related tokens in one call.

This is useful when defining a complete palette while keeping spacing, typography, and motion defaults unchanged.

Example

let palette =
  theme.default_theme()
  |> theme.set_colors(
    background: "light-dark(#ffffff, #09090b)",
    foreground: "light-dark(#09090b, #fafafa)",
    card: "light-dark(#ffffff, #18181b)",
    card_foreground: "light-dark(#09090b, #fafafa)",
    primary: "light-dark(#334155, #e2e8f0)",
    primary_foreground: "light-dark(#ffffff, #0f172a)",
    secondary: "light-dark(#f1f5f9, #1f2937)",
    secondary_foreground: "light-dark(#0f172a, #f8fafc)",
    muted: "light-dark(#f8fafc, #27272a)",
    muted_foreground: "light-dark(#64748b, #a1a1aa)",
    faint: "light-dark(#fafafa, #1e1e21)",
    faint_foreground: "light-dark(#a1a1aa, #71717a)",
    accent: "light-dark(#e2e8f0, #334155)",
    danger: "light-dark(#d32f2f, #f4807b)",
    danger_foreground: "light-dark(#fafafa, #18181b)",
    success: "light-dark(#008032, #6cc070)",
    success_foreground: "light-dark(#fafafa, #18181b)",
    warning: "light-dark(#a65b00, #f0a030)",
    warning_foreground: "#09090b",
    border: "light-dark(#d4d4d8, #52525b)",
    input: "light-dark(#d4d4d8, #52525b)",
    ring: "light-dark(#574747, #d4d4d8)",
  )

set_many

</>

pub fn set_many(
  theme: Theme,
  updates: List(#(Token, String)),
) -> Theme

style_tag

</>

pub fn style_tag(theme: Theme) -> element.Element(a)

Render a <style> tag that sets all CSS variables from the theme.

style_tag_with_color_scheme

</>

pub fn style_tag_with_color_scheme(
  theme: Theme,
  color_scheme: String,
) -> element.Element(a)

Render a <style> tag that sets all CSS variables from the theme with a custom color-scheme.

For a full list of options for color_scheme refer to https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme

Example

theme.style_tag_with_color_scheme(light_theme, "light")
theme.style_tag_with_color_scheme(dark_theme, "dark")

to_list

</>

pub fn to_list(theme: Theme) -> List(#(Token, String))

Convert a Theme into token-value pairs.