Pixel Kit
The classes and components the pixel-styled tools and posts are drawn from, in both themes.
Classes live in src/styles/theme.css, components in src/components/pixel/.
light
Type
.page-title
.page-sub
.label
Section label
<SectionLabel> · .section-label .section-fade
Buttons
.pixel-button · data-variant="primary" | "danger"
Tones
Couldn't import
The file isn't valid JSON.
Configuration warnings
Two accounts have no type set.
Imported
42 transactions for September.
API error 401 No reduction 62% smaller
failed retrying done
Never colour alone: danger is hatched, warn is dotted, ok is solid · data-variant="danger" | "warn" | "ok" on .pixel-button, .pixel-chip, .pixel-alert, .pixel-alert-text, .pixel-mark (danger is the default) · an icon-only action's glyph is its shape
Icon buttons
.pixel-icon-button · no border, at least 32px square · accent on hover, data-variant="danger" | "ok" swaps the hover colour · data-size="sm" fits inside a chip
Rows
.pixel-row · a full-width action in a divided panel · a chevron marks it pressable, and a press fills it · data-variant="danger" | "warn" | "ok" adds the tone's strip and keeps the dividers
Chips
.pixel-chip · on when aria-pressed or aria-expanded is "true"
Fields
.pixel-field
Checkbox
.pixel-check · data-variant="ok" fills --ok when checked
Radio
.pixel-radio · input[type=radio], a filled square rather than a tick
Range
.pixel-range · input[type=range]
Progress
.pixel-progress · <progress>, a stepping block while it has no value
File
<FileDrop> · .pixel-file · accent on hover, focus and data-dragover
Panel
.pixel-panel
Table
| Category | His | Her | Total |
|---|---|---|---|
| Groceries | £412.33 | £389.15 | £801.48 |
| Eating Out | £134.46 | £220.25 | £354.71 |
£1,203.19
.pixel-table · .pixel-num, 11px inside a table on phones
Toolbar
.pixel-toolbar · a bar of controls under the thing they act on, clear of the phone's home indicator
Sheet
The page behind the scrim.
Choose a meal
- Pasta
- Rajma
- Sambar
<Sheet> · .pixel-scrim .pixel-sheet · from the bottom edge on phones, centred from sm
Bottom bar
The page above the bar.
.pixel-bar · fixed to the bottom edge, content in the 720px column, clear of the home indicator · data-position="sticky" for the end of a form
Menu
<Menu> · .pixel-menu .pixel-menu-trigger .pixel-menu-list .pixel-menu-item · arrow keys move, Escape, Tab, a choice or a press outside close · side="top" opens upward
Icons
<Icon> · .pixel-icon
Rules
.pixel-line
<hr>
Colours
.pixel-alert-text
dark
Type
.page-title
.page-sub
.label
Section label
<SectionLabel> · .section-label .section-fade
Buttons
.pixel-button · data-variant="primary" | "danger"
Tones
Couldn't import
The file isn't valid JSON.
Configuration warnings
Two accounts have no type set.
Imported
42 transactions for September.
API error 401 No reduction 62% smaller
failed retrying done
Never colour alone: danger is hatched, warn is dotted, ok is solid · data-variant="danger" | "warn" | "ok" on .pixel-button, .pixel-chip, .pixel-alert, .pixel-alert-text, .pixel-mark (danger is the default) · an icon-only action's glyph is its shape
Icon buttons
.pixel-icon-button · no border, at least 32px square · accent on hover, data-variant="danger" | "ok" swaps the hover colour · data-size="sm" fits inside a chip
Rows
.pixel-row · a full-width action in a divided panel · a chevron marks it pressable, and a press fills it · data-variant="danger" | "warn" | "ok" adds the tone's strip and keeps the dividers
Chips
.pixel-chip · on when aria-pressed or aria-expanded is "true"
Fields
.pixel-field
Checkbox
.pixel-check · data-variant="ok" fills --ok when checked
Radio
.pixel-radio · input[type=radio], a filled square rather than a tick
Range
.pixel-range · input[type=range]
Progress
.pixel-progress · <progress>, a stepping block while it has no value
File
<FileDrop> · .pixel-file · accent on hover, focus and data-dragover
Panel
.pixel-panel
Table
| Category | His | Her | Total |
|---|---|---|---|
| Groceries | £412.33 | £389.15 | £801.48 |
| Eating Out | £134.46 | £220.25 | £354.71 |
£1,203.19
.pixel-table · .pixel-num, 11px inside a table on phones
Toolbar
.pixel-toolbar · a bar of controls under the thing they act on, clear of the phone's home indicator
Sheet
The page behind the scrim.
Choose a meal
- Pasta
- Rajma
- Sambar
<Sheet> · .pixel-scrim .pixel-sheet · from the bottom edge on phones, centred from sm
Bottom bar
The page above the bar.
.pixel-bar · fixed to the bottom edge, content in the 720px column, clear of the home indicator · data-position="sticky" for the end of a form
Menu
<Menu> · .pixel-menu .pixel-menu-trigger .pixel-menu-list .pixel-menu-item · arrow keys move, Escape, Tab, a choice or a press outside close · side="top" opens upward
Icons
<Icon> · .pixel-icon
Rules
.pixel-line
<hr>
Colours
.pixel-alert-text