API overview

Types and value constructors#

Rosebox has types that correspond to CSS's data-types, for example, Length which corresponds to CSS's <length>, Duration which corresponds to CSS's <time>, and Color which corresponds to CSS's <color>. To construct a value of some type in RB, you need to use one of the type's value constructors. A value constructor is a function that takes zero or more arguments and constructs a value of the type it's associated with. Examples tend to make these less awkward, so let's take a look at the following example:

const boxStyle: RBStyle = {
transition: ['opacity', ms(300)],
backgroundColor: rgb(10, 10, 10)
height: px(30),
fontSize: em(5),
width: per(50),

Following the example above:

  • ms(300) constructs a value of type Duration<"milliseconds">.
  • rgb(10, 10, 10) constructs a value of type RGB which in its turn is also a union member of Color.
  • px(30) constructs a value of type Length<"px">
  • em(5) constructs a value of type Length<"em">.
  • per(50) constructs a value of type Percentage.