Frontend

The frontend part of fiesta mainly depends on CSS framework TailwindCSS.

TailwindCSS

Fiesta is using utility-first CSS framework TailwindCSS. For form controls and standard components the daisyui framework is used.

Colors

All the colors are defined in tailwind.config.js file. Since Fiesta does support dark mode, all the used colors should respect that:

At first, see the semantic color names documentation (theme switch varies the colors).

Base colors

• base background color is bg-base-100 with text styled as text-base-content
• background with active hover usually uses hover:bg-base-200 (or base-300 for cases with combined backgrounds)

Brand colors

• brand color is bg-primary -- used for primary buttons, links and as the main leading color through the app