Color

Mirror’s color system is tokenized and includes an app.color token layer with semantic color tokens. These tokens are exposed through custom Tailwind CSS utility classes.

For a detailed explanation of Mirror’s color system, please refer to the principles.

Surface Colors

Surface Colors are intended for static elements as well as prose text. Included are utility classes for background, text and border colors.

Background

Background colors are available for four different levels of elevation. They are intended to be stacked on top of each other.

.bg-surface-higher

.bg-surface-high

.bg-surface-base

.bg-surface-low

TIP

It is sometimes useful to start from the base elevation again, if an element is visually seperated by a shadow, border or backdrop, i.e. a drawer or modal.

Text

Mirror includes three different text colors for static elements and prose text. In addition there is a link color, with hover and active states intended for hyperlinks.

.text-surface.text-surface-muted.text-surface-subtle.text-surface-link

• text-surface: Intended for headlines as well as flowing text. Used in most cases.
• text-surface-muted: Intended for secondary and supporting text such as subtitles, footnotes or callouts.
• text-surface-subtle: Intended for tertiary text or as a more subtle alternative for secondary and supporting text.
• text-surface-link, text-surface-link-hover, text-surface-link-active: Intended for hyperlinks.

Border

Mirror’s surface border color is intended to be used for all static elements. It can be combined with any surface background color.

.border-surface

For compatability with Tailwind CSS’s divide classes , Mirror includes divide-surface.

.divide-surface

Component Colors

Component Colors are intended for all interactive components. They also power Mirror’s built in components such as button, input, checkbox, etc.

Background

Each variant includes utilitiy classes for solid, tone and translucent backgrounds. Mirror comes with hover and active classes for each.

.bg-primary-solid

.bg-primary-tone

.bg-primary-translucent

.bg-secondary-solid

.bg-secondary-tone

.bg-secondary-translucent

.bg-accent-solid

.bg-accent-tone

.bg-accent-translucent

.bg-danger-solid

.bg-danger-tone

.bg-danger-translucent

.bg-success-solid

.bg-success-tone

.bg-success-translucent

.bg-warning-solid

.bg-warning-tone

.bg-warning-translucent

.bg-neutral-solid

.bg-neutral-tone

.bg-neutral-translucent

.bg-disabled-solid

.bg-disabled-tone

.bg-disabled-translucent

Text

Each background comes with a matching utility class for colored text.

.text-primary-on-solid

.text-primary-on-tone

.text-primary-on-translucent

.text-secondary-on-solid

.text-secondary-on-tone

.text-secondary-on-translucent

.text-accent-on-solid

.text-accent-on-tone

.text-accent-on-translucent

.text-danger-on-solid

.text-danger-on-tone

.text-danger-on-translucent

.text-success-on-solid

.text-success-on-tone

.text-success-on-translucent

.text-warning-on-solid

.text-warning-on-tone

.text-warning-on-translucent

.text-neutral-on-solid

.text-neutral-on-tone

.text-neutral-on-translucent

.text-disabled-on-solid

.text-disabled-on-tone

.text-disabled-on-translucent

Additionally there are utility classes for solid, muted and subtle colored text. Utility classes for solid hover and active states are also available.

.text-primary-solid .text-primary-muted .text-primary-subtle

.text-secondary-solid .text-secondary-muted .text-secondary-subtle

.text-accent-solid .text-accent-muted .text-accent-subtle

.text-danger-solid .text-danger-muted .text-danger-subtle

.text-success-solid .text-success-muted .text-success-subtle

.text-warning-solid .text-warning-muted .text-warning-subtle

.text-neutral-solid .text-neutral-muted .text-neutral-subtle

.text-disabled-solid .text-disabled-muted .text-disabled-subtle

Border

Each variant includes utility classes for solid and translucent borders. Utility classes for translucent hover and active states are also available.

.border-primary-translucent

.border-secondary-translucent

.border-accent-translucent

.border-danger-translucent

.border-success-translucent

.border-warning-translucent

.border-neutral-translucent

.border-disabled-translucent

Focus

For focus styling use focus-visible:focus-ring.

Tab to focus

.focus-ring

TIP

This utility class adds a 2px border to the element. Make sure to include a border in its unfocused state as well. This border can also be transparent.