# Bit.Borm theme

Every colour of a form - controls, messages, the error summary, repeaters, the stepper - plus its corner radius, 
field gap and maximum width is a CSS custom property declared on `.bit-borm-form`, read out of the shipped 
`bit-borm.css` below. Override them from your own stylesheet, loaded after `_content/Bit.Borm/bit-borm.css`, without 
touching a single library selector. The form declares every one of them itself, so an override has to target the form - 
`.bit-borm-form`, or `.my-page .bit-borm-form` for one page - since a value set on an ancestor such as `:root` is 
replaced by the form's own declaration before it can be inherited.

| Property | Light | Dark | Used for |
| --- | --- | --- | --- |
| `--bit-borm-accent` | `#4f46e5` | same | The primary button, focus rings, a checked switch, the range slider. |
| `--bit-borm-accent-contrast` | `#ffffff` | same | Text and marks drawn on the accent colour. |
| `--bit-borm-surface` | `#ffffff` | `#111827` | The background of controls, tags and buttons. |
| `--bit-borm-surface-muted` | `#fafafa` | `#1f2937` | Read-only controls, affixes and hovered buttons. |
| `--bit-borm-surface-disabled` | `#f3f4f6` | `#374151` | Disabled controls. |
| `--bit-borm-border` | `#d1d5db` | `#4b5563` | Control and card borders. |
| `--bit-borm-border-focus` | `var(--bit-borm-accent)` | same | The border of a focused control. |
| `--bit-borm-error` | `#dc2626` | `#f87171` | Error text, invalid borders, the required marker. |
| `--bit-borm-error-surface` | `#fef2f2` | `#2a1215` | The error summary's background and a tag's remove button on hover. |
| `--bit-borm-warning` | `#d97706` | `#fbbf24` | Warning messages. |
| `--bit-borm-text` | `#111827` | `#f9fafb` | Labels and values. |
| `--bit-borm-muted` | `#6b7280` | `#9ca3af` | Help text, counters, placeholders. |
| `--bit-borm-radius` | `8px` | same | Corner radius of controls and cards. |
| `--bit-borm-gap` | `1rem` | same | The space between fields. |
| `--bit-borm-max-width` | `720px` | same | The form's maximum width; `none` fills the container. |

## Colour modes

The dark theme is the same properties declared again, by these rules of the stylesheet:

- `@media (prefers-color-scheme: dark) .bit-borm-form`
- `[data-theme="dark"] .bit-borm-form, .bit-borm-form[data-theme="dark"]`
- `[data-theme="light"] .bit-borm-form, .bit-borm-form[data-theme="light"]`

A form follows the OS preference until `data-theme="dark"` or `data-theme="light"` is put on it or on any ancestor, 
which wins over the media query because its selector is more specific - so an app with its own theme toggle drives 
the same tokens. The properties the Dark column calls "same" are set once and need one override on 
`.bit-borm-form`. Any other one needs its override repeated under each of those selectors: an override on 
`.bit-borm-form` alone also replaces the dark value of an OS-driven dark theme (it comes later, at the same 
specificity), and loses to the `data-theme` rules. Call `GetBormTheme(property: "...")` for one property in full - 
every rule that sets it or paints with it, and the override to write.