Color

Mirror’s color system is completely tokenized and includes a dark theme. The system is made up of two color palettes for solid and translucent colors.

Color Palettes

Solid Colors

Solid colors exist on a palette with twelve steps. Conceptually the scale is broken into groups of three, to accomodate default, hover and active states. Additionally the first six tokens get progressively darker to allow for more granular mapping within this range.

Translucent Colors

Translucent colors exist on a palette with twelve steps of perceived lightness. All twelve steps are uniform, so that tokens which map onto the scale can be granularly adjusted for dark and light themes.

App Colors

Mirror comes with a app.color token layer which clusters the palette semanticly. The token layer is split into surface colors and component colors.

Surface Colors

Surface colors are intended for any static elements as well as prose text. Tokens for background, text and border colors are included.

They are available as utility classes.

Component Colors

Component colors are intended for interactive components. They are available as utility classes and are also used for all components included in Mirror.

They exist in eight different variants, each including various tokens for background, text and border colors.

• primary
• secondary
• accent
• danger
• warning
• success
• neutral
• disabled

Using the Palettes

Palette tokens should never be used or imported directly. Instead the app.color token layer should be used. This layer is semantically clustered and mapped to the palettes.

Mapping Tokens

Both palettes are consumed by the app.color token layer, which is semantically named and exposed through utitlity classes.

Solid Palette

• Tokens 1-3: Used for app.color.component.[…].fg.onTone. They are also used for app.color.surface.bg tokens in light themes. They need to sit at the upper end of the lightness spectrum to ensure color contrast accessibility.

• Tokens 3-6: Used for app.color.component.[…].bg.tone tokens for dark themes.

• Tokens 6-9: Used for app.color.component.[…].bg.solid as well as app.color.component.[…].fg.solid tokens in both light and dark themes.

• Tokens 10-12: Used for app.color.component.[…].bg.tone in light themes. They are also used for app.color.surface.bg tokens in dark themes.

WARNING

Hover and active states should never move up or down the scale by more than one step at a time.

Translucent Palette

Because the translucent palette appears uniform in its lightness steps, app.color tokens can be mapped more granularly. To make sure that all variants appear harmonious, similiar tokens should be mapped to similiar colors on the palette.

TIP

When mapping […].accent.border.translucent.default to […].palette.blue.translucent.4, […].danger.border.translucent.default should map to […].palette.red.translucent.4.