# ui.brvo.app > A small CSS/JS UI library: native HTML elements styled inside `.ui`, variants as data attributes, everything in `@layer ui` so the page's own CSS always wins. Modern browsers only. No build step. ## Install ```html ``` `/v1/` never changes once released; `/latest/` follows every change. Theme with `data-theme="light|dark"` on any element (default: the system's), density with `data-density="compact|comfortable"`, and by setting `--ui-*` tokens. ## Rules - Write plain HTML elements; add `data-variant`, `data-size` and the like for variants. Classes exist only for layout primitives and a few composites listed below. - Never use `!important`: unlayered page CSS already wins. ## Tokens - `--ui-bg`: `light-dark(#ffffff, #0d0e10)` (Färg) - `--ui-bg-2`: `light-dark(#f7f7f8, #141517)` (Färg) - `--ui-bg-3`: `light-dark(#efeff1, #1b1c1f)` (Färg) - `--ui-border`: `light-dark(#e3e4e7, #232428)` (Färg) - `--ui-border-strong`: `light-dark(#cfd0d4, #34353a)` (Färg) - `--ui-fg`: `light-dark(#1b1c1f, #e8e8ea)` (Färg) - `--ui-fg-2`: `light-dark(#5f6168, #9a9ca3)` (Färg) - `--ui-fg-3`: `light-dark(#8b8d94, #686a71)` (Färg) - `--ui-accent`: `light-dark(#5e6ad2, #7c86ec)` (Färg) - `--ui-accent-fg`: `#ffffff` (Färg) - `--ui-danger`: `light-dark(#d93f3c, #f0605d)` (Färg) - `--ui-success`: `light-dark(#1f9d63, #43c487)` (Färg) - `--ui-warning`: `light-dark(#b7791f, #e2b340)` (Färg) - `--ui-info`: `light-dark(#2f7fd6, #5aa2ef)` (Färg) - `--ui-font`: `Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` (Typografi) - `--ui-mono`: `"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` (Typografi) - `--ui-text`: `13px` (Typografi) - `--ui-text-sm`: `12px` (Typografi) - `--ui-text-lg`: `15px` (Typografi) - `--ui-leading`: `1.5` (Typografi) - `--ui-weight`: `400` (Typografi) - `--ui-weight-strong`: `550` (Typografi) - `--ui-radius`: `6px` (Form) - `--ui-radius-sm`: `4px` (Form) - `--ui-radius-lg`: `10px` (Form) - `--ui-line`: `1px` (Form) - `--ui-h`: `28px` (Form) - `--ui-h-sm`: `24px` (Form) - `--ui-h-lg`: `32px` (Form) - `--ui-pad`: `10px` (Form) - `--ui-gap`: `8px` (Form) - `--ui-space`: `4px` (Form) - `--ui-ease`: `cubic-bezier(.2, .7, .3, 1)` (Rörelse) - `--ui-fast`: `120ms` (Rörelse) - `--ui-slow`: `220ms` (Rörelse) - `--ui-shadow`: `0 1px 2px light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .4))` (Djup) - `--ui-shadow-lg`: `0 8px 28px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .5)), 0 0 0 var(--ui-line) var(--ui-border)` (Djup) - `--ui-focus`: `0 0 0 2px var(--ui-bg), 0 0 0 4px color-mix(in srgb, var(--ui-accent) 70%, transparent)` (Djup) ## Grund ### Typografi (`typography`) Rubriker, text, kod och tangenter: grundstilen inuti .ui. Allt inuti ett element med klassen `.ui` får bibliotekets typsnitt, storlek och färg. Rubriker är täta och raka; brödtexten är 13 px som i Linear. - `.muted` och `.subtle`: två nivåer av dämpad text. - Typsnittet är `--ui-font` (Inter om sidan laddar det, annars systemets). Biblioteket laddar inga typsnitt själv. - Storlekar: `--ui-text` (13px), `--ui-text-sm` (12px), `--ui-text-lg` (15px). ```html

Rubrik 1 · 24 px

Rubrik 2 · 18 px

Rubrik 3 · 15 px

Brödtext är 13 px med radavstånd 1.5. Fet, länk, kod, markerat och ⌘ K.

Dämpad text för sekundär information.

Liten, svag text · 12 px

const ui = await import("https://ui.brvo.app/v1/ui.js");
``` ### Färg (`color`) Ytor, text, ramar och toner som tokens, med ljust och mörkt läge. Varje färg är en token med ett ljust och ett mörkt värde (`light-dark()`). Läget följer systemet. `data-theme="light"` eller `"dark"` på vilket element som helst låser det för den delen av sidan. Byt accent för hela sidan: ```css :root { --ui-accent: #e5484d; } ``` Hela listan finns under [Tokens](/tokens). ```html
--ui-bg
--ui-bg-2
--ui-bg-3
--ui-accent
--ui-success
--ui-warning
--ui-danger
--ui-info
--ui-fg--ui-fg-2--ui-fg-3
``` ## Layout ### Layout (`layout`) stack, row, grid, container, split och divider: det man bygger sidor av. Layout är de enda klasserna i biblioteket, eftersom de inte motsvarar ett HTML-element. | Klass | Vad | |---|---| | `.stack` | kolumn med jämnt avstånd (`--gap`) | | `.row` | rad som radbryts; `data-justify="between|end"`, `data-align="start"`, `data-nowrap` | | `.spacer` | trycker isär en `.row` | | `.grid` | rutnät som fyller raden; minsta bredd `--min` (220px) | | `.container` | centrerad sida, `--max` (1120px) | | `.split` | sidomeny + innehåll, `--side` (240px); en kolumn under 720px | | `.divider` | linje, med text om den har någon | ```html
Projekt
Ett
Två
Tre
Fyra
eller
VänsterHöger
``` ## Åtgärder ### Knapp (`button`)
Länk som knapp
``` ## Formulär ### Textfält och val (`input`) input, select och textarea med samma höjd, ram och fokus. Alla textliknande `input`, `select` och `textarea` får samma höjd (`--ui-h`), ram och fokusring. `textarea` växer med innehållet där webbläsaren stöder `field-sizing`. - Fel: webbläsarens egen validering (`:user-invalid`, efter att användaren rört fältet) eller `aria-invalid="true"`. - Storlek: `data-size="sm"` eller `"lg"`. - `.input-group` sätter ihop ett fält med text (``) eller en knapp på någon sida. ```html
https://
``` ### Kryssruta och radioknapp (`checkbox`) Egna, skarpa checkbox och radio med indeterminate-läge. `input[type=checkbox]` och `input[type=radio]` ritas om, men är fortfarande riktiga formulärelement (tangentbord, formulärdata, validering). - `label.check` lägger rutan och texten på rad och gör hela raden klickbar. - Indeterminate sätts från JavaScript: `el.indeterminate = true`. - En checkbox med `role="switch"` blir en [strömbrytare](/switch). ```html
``` ### Strömbrytare (`switch`) En checkbox med role=switch, för av/på som gäller direkt. ``. Använd den när ändringen gäller direkt (utan Spara), annars en vanlig kryssruta. `data-size="sm"` ger en mindre variant. ```html
``` ### Reglage (`range`) input[type=range] med tunn bana och fylld del. ``. Med `ui.js` fylls banan fram till handtaget även i Chrome och Safari (Firefox gör det själv). Utan `ui.js` är banan ofylld men fungerar. ```html
``` ### Fält (`field`) Etikett, kontroll, hjälptext och fel i en .field. `.field` staplar etikett, kontroll, hjälptext (`small`) och fel (`.error`). Felet visas av sig självt när kontrollen är ogiltig (`:user-invalid` eller `aria-invalid="true"`), och ersätter då hjälptexten. Obligatoriska fält (`required`) får en asterisk. `form.form` lägger fälten med jämnt avstånd. ```html
Syns för alla i teamet. Ange ett namn.
Vi skickar en inbjudan. Det ser inte ut som en e-postadress.
``` ## Data ### Tabell (`table`) Täta tabeller med fast rubrikrad, hover och valfri randning. Vanliga `table`-element. Rubrikraden (`thead`) ligger kvar överst när tabellen scrollar i en `.table-wrap` med höjd. - `data-num` på `th`/`td`: högerställda siffror (alla siffror har samma bredd). - `data-striped` på `table`: randade rader. - `data-density="compact"` på `table`: lägre rader. - `.table-wrap`: ram, rundade hörn och scroll. ```html
ÄrendeStatusAnsvarigPoäng
DRV-8852 Snabbare appstartPågårKarri5
DRV-364 Nollställ dimmade raderKlarJori2
DRV-401 Mörkt läge i inställningarAtt göra—3
DRV-402 Exportera till CSVAtt göraAli1
DRV-403 TangentbordsgenvägarBlockeradMo8
``` ### Kort (`card`) En yta med ram för innehåll som hör ihop, med valfri rubrik och fot. `.card` på valfritt element (`article`, `section`, `a`). Ett `header` och `footer` som direkta barn får rubrik- och fotstil. - `data-variant="flat"`: ingen bakgrund, bara ram. - `a.card` eller `data-interactive`: hover-läge. ```html
Snabbare appstart iOS

Rendera vyn innan full synk är klar.

Länkkort · 2 min sedan

Hela kortet är klickbart.
Platt kort utan bakgrund.
``` ### Märke (`badge`) Små etiketter för status, typ och antal, i sex toner. `.badge` på ett `span`. | Attribut | Värden | |---|---| | `data-tone` | `accent`, `success`, `warning`, `danger`, `info` (standard: neutral) | | `data-dot` | en prick i tonens färg före texten | | `data-pill` | helt rundad, för antal | ```html
Utkast Ny Live Väntar Fel 12
``` ## Feedback ### Meddelande (`alert`) En ruta som säger något viktigt: info, lyckat, varning eller fel. `.alert` med `data-tone` (`info`, `success`, `warning`, `danger`). `role="alert"` (läses upp direkt) blir rött utan `data-tone`; använd `role="status"` för det som inte är brådskande. Första raden är ett `strong`, resten `p`. En knapp sist hamnar uppe till höger (stäng). ```html
Ny version

ui v1 är släppt. Byt från /latest/ när du vill låsa utseendet.

Publicerat

Ändringarna är ute på ui.brvo.app.

Kvoten nästan slut

80 % av månadens budget är använd.

Kunde inte spara

Servern svarade inte. Försök igen.

``` ### Förlopp och mätare (`progress`) progress för hur långt något kommit, meter för ett värde inom gränser. - ``: hur långt något kommit. Utan `value` visas ett obestämt förlopp. - ``: ett värde inom gränser. Färgen följer webbläsarens bedömning: grön (bra), gul, röd. Skriv värdet som text inuti också, för skärmläsare. ```html
Uppladdning64 %
64 %
Laddar…Laddar
Disk (bra)35 %
Disk (nästan full)94 %
``` ### Spinner (`spinner`) En liten snurra för väntan som inte går att mäta. `