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.