Colors
Nine color classes that work on buttons, links, components and plain elements alike.
.primary, .secondary, .contrast and
.accent set importance. .info, .success,
.warning, .danger and .link set meaning.
Each class maps to a theme color and its -inverse text color, and
switches with the theme.
How it works
A color class only sets two variables, --i-variant and
--i-variant-inverse. Each element reads them its own way: a
button fills with the color, a link takes it as text, an alert tints its
background and a progress bar paints its value.
Any element
An element with a color class and no styling of its own gets the color as its background and the inverse color as its text. Headings inside take the text color too.
Contrast section
Plain markup, painted by the color class.
Custom colors
For a color outside the list, set the two variables on the element itself. Buttons, links and badges set their own default color, so a value on a parent does not reach them. A button only turns solid with a color class, so keep one and override its variables.
To change what a class means everywhere, override the theme color, for example
--i-color-primary. See themes.
Brand
.brand, .brand-name and .brand-accent
color a logo or a name with the brand colors. They work on headings,
span, div and a.
Iriscss
Brand color
Variables
The classes read the theme colors --i-color-{name} and
--i-color-{name}-inverse, and the brand colors
--i-color-brand, --i-color-brand-name and
--i-color-brand-accent. Their defaults are on the
themes page.