lustre/ui

Types

A theme is a collection of colour scales that define the look and feel of your application. You can consider the “primary” scale as your brand or accent colour. The “greyscale” scale can be used when you want suitable shading without any particular colour or meaning. The “error”, “warning”, “success”, and “info” scales are semantic colours that can be used to communicate meaning to the user.

pub type Theme {
  Theme(
    space: Size,
    text: Size,
    radius: Value,
    primary: Scale,
    greyscale: Scale,
    error: Scale,
    warning: Scale,
    success: Scale,
    info: Scale,
  )
}

Constructors

Theme(
  space: Size,
  text: Size,
  radius: Value,
  primary: Scale,
  greyscale: Scale,
  error: Scale,
  warning: Scale,
  success: Scale,
  info: Scale,
)

Value

</>

pub type Value {
  Rem(Float)
  Px(Float)
  Var(String)
}

Constructors

```
Rem(Float)
```
```
Px(Float)
```
```
Var(String)
```

Variant

</>

This type enumerates the different colour scales that are available in a theme. It is mostly used to set the variant of an element using the variant attribute, but you could also use it in your own custom elements.

pub type Variant {
  Primary
  Greyscale
  Error
  Warning
  Success
  Info
}

Constructors

```
Primary
```
```
Greyscale
```
```
Error
```
```
Warning
```
```
Success
```
```
Info
```

Constants

alert

</>

pub const alert: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = alert.alert

aside

</>

pub const aside: fn(List(Attribute(a)), Element(a), Element(a)) ->
  Element(a) = aside.aside

box

</>

pub const box: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = box.box

breadcrumbs

</>

pub const breadcrumbs: fn(
  List(Attribute(a)),
  Element(a),
  List(Element(a)),
) -> Element(a) = breadcrumbs.breadcrumbs

button

</>

pub const button: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = button.button

centre

</>

pub const centre: fn(List(Attribute(a)), Element(a)) ->
  Element(a) = centre.centre

cluster

</>

pub const cluster: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = cluster.cluster

field

</>

pub const field: fn(
  List(Attribute(a)),
  List(Element(a)),
  Element(a),
  List(Element(a)),
) -> Element(a) = field.field

group

</>

pub const group: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = group.group

input

</>

pub const input: fn(List(Attribute(a))) -> Element(a) = input.input

prose

</>

pub const prose: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = prose.prose

sequence

</>

pub const sequence: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = sequence.sequence

stack

</>

pub const stack: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = stack.stack

tag

</>

pub const tag: fn(List(Attribute(a)), List(Element(a))) ->
  Element(a) = tag.tag

Functions

encode_theme

</>

pub fn encode_theme(theme: Theme) -> Json

theme_decoder

</>

pub fn theme_decoder(
  json: Dynamic,
) -> Result(Theme, List(DecodeError))

variant

</>

pub fn variant(variant: Variant) -> Attribute(a)

Use this attribute to set the colour scale of an element. Unless a child element sets its own variant, it will inherit the variant of its parent. You could, for example, set the variant on some custom alert element to be Warning. Then, any buttons or icons inside the alert will inherit the warning palette and be coloured accordingly.