Values and units

Component values

Component values include keywords and various data types. A property value usually consists of a single component. In many cases, however, you may combine multiple components to form a complete property value. In CSS, these would typically be separated by spaces. With Tecton, you can use the ~ operator to join them together. For example:

module Example.InlineStyle where

import Tecton
import Tecton.Rule as Rule

inlineStyle :: Declarations _
inlineStyle = Rule.do

  -- Setting top, x, and bottom padding in a single declaration
  padding := px 4 ~ px 8 ~ px 16

  -- Combining two keywords
  alignSelf := safe ~ center

CSS-wide keywords

A few global keywords can be assigned to any property. In Tecton, these are

• initial, which resets the property to its default value defined in the CSS specification;
• inherit, which uses the property value inherited from the parent element; and
• unset, which either inherits the value of an inheritable property or reverts to the initial value.

Notice how inherit, for example, is compatible with each property:

module Example.InlineStyle where

import Tecton
import Tecton.Rule as Rule

inlineStyle :: Declarations _
inlineStyle = Rule.do
  backgroundColor := inherit
  color := inherit
  fontSize := inherit
  margin := inherit
  outlineStyle := inherit

URLs

A URL is a pointer to a resource, such as an image, font, or custom cursor. To construct a URL value, simply apply the url function to a URL string. The following example uses the url function to create a reference to a background image:

module Example.InlineStyle where

import Tecton

inlineStyle :: Declarations _
inlineStyle = backgroundImage := url "./bg.gif"

Measures

The Measure type provides a common interface for many types of values, such as lengths, angles, and durations, allowing them to be calculated and/or combined via calc expressions. It is a phantom type, meaning that each value is tagged as a Length, Percentage, Time, etc. This tag ensures that incompatible values can't be combined (such as a Measure Time with a Measure Length). It also prevents the wrong kind of value from being assigned to a given property, e.g. a percentage value to a property that only supports a length.

You can construct a measure by applying the appropriate function (named for the corresponding CSS unit), followed by a number or integer, e.g. px 100 (rendered as 100px). The following table lists the various types of measures along with the functions that can be used to construct their values.

In some cases, measures of different types can be used interchangeably. For example, nil produces a value that can be used as a length, percentage, angle, or time. Similarly, values of type Measure Length or Measure Percentage can be used wherever a Measure LengthPercentage is expected (although the reverse is not true).

Colors

Tecton is compatible with the Color type from the colors package, along with the following CSS-specific color keywords:

• transparent
• currentColor

Images

Images can be used for backgrounds, custom list markers, and more. An image consists of either a URL value or a gradient.

Gradients

Linear gradients

A linear gradient can be constructed using the linearGradient function, parameterized by an angle and a color stop list.

For example, the following declaration creates a background image that transitions top to bottom from black to white:

module Example.InlineStyle where

import Color (black, white)
import Data.Tuple.Nested ((/\))
import Tecton

inlineStyle :: Declarations _
inlineStyle = backgroundImage := linearGradient (deg 180) (black /\ white)

Radial gradients

You can create a radial gradient using the radialGradient function.

The first parameter accepts any of the following:

• A shape and extent (e.g. circle ~ closestSide or ellipse ~ farthestCorner)
• A length (e.g. px 100), representing a circle radius
• A pair of length-percentage values, representing the horizontal and vertical radii of an ellipse

The second parameter accepts the position of the center point of the gradient.

The third parameter accepts a color stop list.

Color stop lists

A color stop list defines the colors and their respective positions within a gradient. Each color stop consists of a color and an optional length-percentage position, e.g. rgb 255 0 0 or black ~ pct 50. A length-percentage transition hint may optionally be inserted between two color stops to set the midpoint in the color transition.

The following gradient demonstrates all of these options:

module Example.InlineStyle where

import Color (rgb)
import Data.Tuple.Nested ((/\))
import Tecton

inlineStyle :: Declarations _
inlineStyle =
  backgroundImage :=
    linearGradient nil $
      rgb 0 160 0 /\ rgb 0 100 0 ~ pct 75 /\ pct 80 /\ rgb 135 206 235

Repeating gradients

To create a repeating linear or radial gradient, simply apply the repeating function to the gradient, e.g.

module Example.InlineStyle where

import Color (black, white)
import Data.Tuple.Nested ((/\))
import Tecton

inlineStyle :: Declarations _
inlineStyle = backgroundImage := repeating $ linearGradient nil $ black /\ white

Positions

Position values are used in background positioning, transforms, and gradients. A position consists of one of the following:

• center
• top
• right
• bottom
• left
• X/Y keyword positions, e.g. left ~ top
• single length-percentage value, e.g. px 25 or pct 50
• X/Y length-percentage values, e.g. pct 10 ~ px 25