# pixel-bit
A pixel-art CSS framework for game interfaces. It styles semantic HTML — no
classes on every element, no JavaScript, no dependencies.
[](https://www.npmjs.com/package/pixel-bit)
[](https://github.com/luisnavarrete12/pixel-bit/blob/main/LICENSE)
**2.83 KB gzipped. Zero dependencies. Works with any framework, or none.**
## Install
```html
```
Or via npm:
```bash
npm install pixel-bit
```
```js
import "pixel-bit";
```
## Use
Add `class="pb"` to a container. Everything inside is styled — plain HTML, no
extra classes:
```html
```
Only the subtree you mark is affected. The rest of your app is untouched.
### Semantic modifiers
```html
```
### Validation
Style follows the ARIA attribute, so the error state is announced to screen
readers, not just colored:
```html
```
## Every rule has zero specificity
Selectors are wrapped in `:where()`, so **any** rule you write overrides the
framework — no `!important`, no specificity fights:
```css
button { background: rebeccapurple; } /* just works */
```
## Theming
Everything configurable is a CSS custom property. Redefine what you need:
```css
:root {
--pb-accent: #c0392b;
--pb-unit: 6px; /* rescales the whole pixel grid */
--pb-bg: #1b2b1b;
}
```
| Token | Purpose |
| --- | --- |
| `--pb-unit` | Base pixel grid. All sizes derive from it. |
| `--pb-edge-width` | Thickness of the notched outline |
| `--pb-bevel-width` | Depth of the inner bevel |
| `--pb-drop-depth` | Offset of the solid drop shadow |
| `--pb-font-family` `--pb-font-size` `--pb-line-height` `--pb-letter-spacing` | Typography |
| `--pb-bg` `--pb-surface` `--pb-surface-raised` | Surfaces |
| `--pb-ink` `--pb-ink-muted` `--pb-edge` | Text and edges |
| `--pb-accent` `--pb-danger` `--pb-success` `--pb-warning` | Semantic colors |
| `--pb-accent-ink` `--pb-danger-ink` `--pb-success-ink` `--pb-warning-ink` | Text on top of each semantic color |
| `--pb-tint-light` `--pb-tint-dark` | What every bevel mixes toward. Keep them close to white and black or colored controls go muddy. |
| `--pb-hover-veil` | Overlay that darkens a control on hover |
| `--pb-fill` | Fill of a single control. Set it and the bevel re-derives itself. |
| `--pb-transition` | Animation duration. Set to `0ms` to disable. |
Variables starting with `--_pb-` are internal. They hold composed shadow
recipes that the components depend on, and redefining one breaks every
component at once.
### Themes
Four themes ship with the framework. Set `data-pb-theme` on any element and
everything inside it changes:
```html
```
| Theme | Look |
| --- | --- |
| *(none)* | Light ground, white controls, saturated accents |
| `dark` | Dark slate |
| `mono` | Four-tone green, like an early handheld screen |
| `amber` | Amber phosphor terminal |
A theme only redefines the surface and semantic colors. The pixel grid, the
bevels and the shadow recipes are shared, so a theme is about twenty lines.
### Fonts
pixel-bit ships **no font files and makes no network requests** — it will not
block your render or break under a strict CSP. To use a pixel typeface, load it
yourself and point the token at it:
```html
```
## Components
**Forms** — `button` `input` `select` `textarea` `checkbox` `radio`
`fieldset` `legend` `label`
**Layout** — panel with notched title, table, badge, modal dialog on
`