CSS variables

Classes have no prefix, but custom properties are global and inherited. The --i- prefix keeps them clear of your own variables and of other libraries.

Change a value everywhere

Set the variable on :root in your own stylesheet. It wins over Iris without !important, see cascade layers.

:root {
  --i-border-radius: 0.5rem;
  --i-spacing: 1.25rem;
  --i-font-family: "Inter", var(--i-font-sans);
}

Change a value in one place

Set it on any element. Only that element and its children see the new value.

Theme colors

Colors that change with the theme are light-dark() pairs. Override them with a pair of your own, or with one value to use it in both themes. See themes for the full list.

:root {
  --i-color-primary: light-dark(#6d28d9, #a78bfa);
}

Naming

Owner first

--i-{owner}-{part}-{state}-{property}, for example --i-navbar-brand-font-size or --i-table-row-hover-color-background. Part and state are optional.

Colors end in a role

color-text, color-background, color-border or color-outline, for example --i-input-color-border.

Global tokens start with a category

--i-color-primary, --i-font-family, --i-spacing, --i-border-radius. Many elements read them.

Private variables

Names that start with --_ switch values inside one element. They are not part of the API and can change at any time.

Global variables

The tokens below are read across the framework. Each element and component page ends with a table of its own variables.

Typography

Spacing

Borders

Motion

Icons

SVG data URIs with the color baked in. Replace the whole value to change an icon or its color.