open_props

Constant strings to get strong typing for the CSS variables used in the open-props design system. The strings are generated from the raw open_props css files.

To use them, just import the appropriate module and use them as values. For example with the sketch css framework:

import open_props/colors
import open_props/sizes
import sketch/css
import sketch/lustre as sk_lustre
import sketch/lustre/element/html as sk_html

  sk_html.div(
    css.class([
      css.background_color(colors.blue_1),
      css.color(colors.blue_11),
      css.margin_(sizes.size_8),
      css.padding_(sizes.size_9),
      css.text_align("center"),
    ]),
    [],
    [
      sk_html.text("hello world"),
    ],
  )

They can also be used with raw style tags or other CSS systems if you prefer.