# Theming — light and dark, the named accents, and carrying a brand colour without breaking danger Source: https://ui.barua.tz/docs/theming.html Rules and conventions: https://ui.barua.tz/llms.txt ## The named accents Five accents ship with the system. Set one attribute on and every button, focus ring, link and selected state re-tints. - Documentation: https://ui.barua.tz/docs/theming.html#named-accents - Classes: `b-btn` `b-btn--primary` `b-gap-2` `b-hstack` `b-stack--wrap` ```html
``` ```tsx import { Button } from "barua-ui";
``` ## A brand colour that is not on the list A brand rarely matches a palette. Override the accent tokens in unlayered CSS — a plain stylesheet loaded after barua.css . Unlayered rules beat every layer in the system, which is the documented seam for exactly this. It is the supported route, not a workaround. - Documentation: https://ui.barua.tz/docs/theming.html#brand-colour - Classes: `b-badge` `b-badge--accent` `b-btn` `b-btn--ghost` `b-btn--primary` `b-btn--tinted` `b-code` `b-code__header` `b-field` `b-gap-2` `b-gap-3` `b-hstack` `b-input` `b-label` `b-stack` `b-stack--wrap` ```html
Live
``` ```tsx import { Badge, Button, Field, Input, Label } from "barua-ui";
Live
``` ## Check what your colour now collides with This is the part that bites. Two system colours are defined in terms of the accent or sit close to it, and a brand colour can quietly erase a distinction the interface relies on. - Documentation: https://ui.barua.tz/docs/theming.html#collisions - Classes: `b-btn` `b-btn--danger` `b-btn--primary` `b-code` `b-code__header` `b-gap-2` `b-hstack` `b-stack--wrap` `b-table` `b-table-wrap` ```html
``` ```tsx import { Button } from "barua-ui";
``` ## What not to override Accent tokens are yours. The greyscale is not: --b-text , --b-text-secondary , --b-surface , --b-separator and the fills carry the contrast contract that every component is built against, in both themes at once. Change those and you are not theming the system, you are replacing its foundation — and the accessible contrast that came free stops being guaranteed. - Documentation: https://ui.barua.tz/docs/theming.html#leave-alone ## Scope it when the colour means something Overriding on :root themes the product. Putting the same tokens on a class themes a region — useful for a tenant, an environment banner, or one board among many. The tokens cascade, so anything inside picks them up. - Documentation: https://ui.barua.tz/docs/theming.html#scoping - Classes: `b-code` `b-code__header`