Theme colours
A theme has thirty colours, each named for its role. Twenty cover the window and its text, and ten cover the kinds of value in a grid or document. Flare expands them into every token its screens use, the same way for plugin themes as for its own. It derives the rest, such as hover states, shadows and glass, from these. Every colour is #rrggbb.
type Roles = keyof ThemeColors;
Grounds and surfaces
From the back of the window to the front:
| Role | What it paints |
|---|---|
canvas | The window behind everything. |
shell | The window's frame: the tool rail and title bar, one step up from the canvas. |
panel | The raised page surface and its toolbars, where tables, forms and widgets sit. Most text sits on it. |
surface | A fill on the panel: a card, a toolbar, a hovered row. |
selected | A selected row or item. |
elevated | Menus, popovers and dialogs, above everything else. |
control | Inputs, secondary buttons and switches. |
border | Hairlines between things. |
borderStrong | Borders that need to stand out, such as input edges and the ground of a focus outline. |
Words
Four levels, from most to least prominent:
| Role | What it paints |
|---|---|
text | Headings, values, anything read first. |
textSoft | Body text. |
muted | Labels and secondary text. |
subtle | Hints, placeholders and the quietest marks. |
Accents and states
| Role | What it paints |
|---|---|
accent | Primary buttons and the strongest marks. |
accentContrast | Text on accent. |
danger | Destructive actions and errors. |
amber | Warnings. |
positive | Success, and a connection that responded. |
info | Information, links in messages. |
chart | Bars and lines in single series charts. |
Values
values colours each kind of value wherever Flare draws one: table cells, document fields and value chips.
| Role | Paints |
|---|---|
string | Text values. |
number | Numbers. |
boolean | True and false. |
timestamp | Dates and times. |
reference | Firestore references. |
map | Objects and embedded documents. |
array | Lists. |
geopoint | Firestore geopoints. |
bytes | Binary values. |
null | Null. |
A missing field (undefined) uses the null colour.
Contrast
themeWarnings(colors) from @flare/plugin lists every pair that falls below WCAG contrast. Text needs 4.5:1 against its background, and quieter text, marks and charts need 3:1. Themes with warnings still install, but flare-plugin validate, flare-plugin dev and the Appearance page show them. Themes lists the pairs.
contrast('#f0f0f2', '#111113'); // 16.57: Flare Dark's text on its panel
themeWarnings(colors); // ['muted on panel is 3.92:1, below 4.5:1, so it may be hard to read']pluginThemeId(plugin, theme) and parsePluginThemeId(id) build and parse a plugin theme's id, plugin:<plugin id>/<theme id>.