# Fiesta Fiesta is a HTML/CSS component library and baseline design system: one stylesheet, a handful of optional scripts, and an example page for every component state. It began as Rastrillo's `ui/` and is now a package of its own, so a page on any stack can link it. Link one file and your markup is styled: ```html ``` That file is `tokens.css` and the Day theme joined, comments stripped, under 25 KiB gzipped. The tokens hold every component's layout and behaviour; the theme paints them. The markup for each component is under `examples/`, one page per state, and every page works on its own. ## Themes Three themes ship, each as one file: `fiesta.css` is Day, the default; `fiesta-plain.css` is greyscale, system type and almost no shape; `fiesta-signal.css` is graphite and one cobalt. Use Day unless you have a reason not to. The two-file form is the same CSS split in two: link `tokens.css`, then `day.css`, `plain.css` or `signal.css`. Take it when you serve your own copy and want to change theme without re-serving the tokens, or when you are writing a theme of your own. A page that uses the sidebar or console shell links `shell.css` as well; nothing else needs it. ```html ``` ## Scripts Everything works with scripts off. The scripts are enhancements, each its own file and its own ` ``` ## The colour scheme The themes read `data-theme` on ``: `light`, `dark`, or absent, which means System, the operating system's own setting. The scheme menu (`examples/scheme-menu/`) is three small forms, one per choice, and who remembers the choice is for the page to say. If a server renders the page, it owns the scheme: it writes `data-theme` from a cookie or a profile, and the forms post to it. With `fiesta.js` loaded the change applies in place as well, and the form dispatches an `rst-scheme` event (it bubbles; `detail.scheme` is `light`, `dark` or `system`) that your own script can write the cookie from. A page with no server behind it says so on `` with `data-rst-scheme-store="local"`. Then `fiesta.js` keeps the choice in `localStorage` under `fiesta-scheme`, and applies it before first paint when the script is in `` without `defer`. Without `fiesta.js` the switch has nothing to apply or remember, and the page follows System. ## Strings `select.js`, `datetime.js` and `copy.js` put a few words on screen: "No matches", "Type to filter", the calendar's button labels, "Copied", and the vocabulary the date parser understands. They ship in twelve languages as `i18n/.json`, keyed by the `data-rst-` attribute each string answers to, with the prefix removed. Load `i18n/.js` beside the scripts and they read the table that matches your page's `lang`; an attribute on the element wins over the table, and English is the fallback written into the script. The JSON is there for your own build to read; a browser cannot fetch it from the CDN, which sends no CORS headers. ```html ``` The languages are Arabic, Bengali, English, Spanish, Irish, Hindi, Japanese, European Portuguese, Russian, Vietnamese, Cantonese and Simplified Chinese: `ar`, `bn`, `en`, `es`, `ga`, `hi`, `ja`, `pt-PT`, `ru`, `vi`, `yue` and `zh-Hans`. ## Icons The icons are Lucide's, a few renamed, as inline SVG: paste the `` from `icons/.svg` beside its visible label. The release also carries `icons.svg`, a sprite with one `` per icon, for ``. A browser only draws a sprite from its own origin, so the sprite is for a site that serves its own copy of Fiesta. From the CDN, inline the SVG. ## Versions Every release lives at its exact version, `https://fiesta.rastrillo.org/1.0.0/`, and those files never change. `/1/` is rewritten to the newest 1.y.z, so a page that links `/1/fiesta.css` picks up fixes without an edit; a change that would break existing markup is a new major, and `/2/` would be its own path. Link `/1/` unless you need bytes that never move, in which case pin the exact version. The same files are under `releases//` in this repository, with a `SHA256SUMS`. ## Browsers The CSS needs Chrome 123, Safari 17.5, Firefox 121 or newer, because every theme colour is a `light-dark()`. Anything that shipped at or below that floor is used freely, `oklch()` and `color-mix()` included, with no fallback; an older browser gets an unstyled page. The policy is a rolling one: a feature is fair game about a year after it reached all three engines, and the floor is re-derived from the CSS when one is taken. ## The repository `go get amadan.net/rastrillo/fiesta` gives a Go program the same files: `fiesta.FS()` is the whole tree to mount, `fiesta.TokensCSS()`, `ThemeCSS(name)`, `Script(name)`, `Strings(lang)` and `Icon(slug)` are its pieces, and the `example` package reads the examples. Neither package links a browser; the checks under `check/` do. `make ci` is the whole gate; run it before you push. `DESIGN.md` says what the system is and why, and `hack/seed/README.md` says where the files came from. A release is `go run ./cmd/fiesta release -version X.Y.Z`, committed under `releases/`, and `make site` assembles the site into `.build/site/public`, which is the tree that ships. Fiesta is MPL-2.0; the icons carry Lucide's ISC notice.