# Colors

Source: https://iriscss.com/documentation/modifiers/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.

- `.primary`: `--i-color-primary`
- `.secondary`: `--i-color-secondary`
- `.contrast`: `--i-color-contrast`
- `.accent`: `--i-color-accent`
- `.info`: `--i-color-info`
- `.success`: `--i-color-success`
- `.warning`: `--i-color-warning`
- `.danger`: `--i-color-danger`
- `.link`: `--i-color-link`

## 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.

```html
<div class="cluster">
  <button class="success">Button</button>
  <a href="#" class="success">Link</a>
  <span class="badge success">Badge</span>
</div>
<div class="alert success" role="status">Alert</div>
<progress class="success" value="60" max="100"></progress>
```

## 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.

```html
<section class="contrast" style="padding: 1.5rem">
  <h3>Contrast section</h3>
  <p>Plain markup, painted by the color class.</p>
</section>
```

## 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.

```html
<button class="primary" style="--i-variant: #7c3aed; --i-variant-inverse: #fff">Solid</button>
<button style="--i-variant: #7c3aed">Tint</button>
<button class="outlined" style="--i-variant: #7c3aed">Outlined</button>
<a href="#" style="--i-variant: #7c3aed">Link</a>
```

To change what a class means everywhere, override the theme color, for example `--i-color-primary`. See [themes](https://iriscss.com/documentation/customize/themes/index.html.md#custom-colors).

## 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`.

```html
<h3><span class="brand-name">Iris</span><span class="brand-accent">css</span></h3>
<p><span class="brand">Brand color</span></p>
```

## 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](https://iriscss.com/documentation/customize/themes/index.html.md#variables) page.