Theming

Every piece reads these variables. init writes the file; set the values once and everything changes together.

Your brand in ten variables

fluid-theme.css

:root {
  --fluid-accent: var(--brand-600);
  --fluid-on-accent: #ffffff;
  --fluid-surface: var(--background);
  --fluid-surface-2: var(--muted);
  --fluid-text: var(--foreground);
  --fluid-text-2: var(--muted-foreground);
  --fluid-border: var(--border);
  --fluid-focus: var(--ring);
  --fluid-radius: 14px;
  --fluid-font: "Your Font", sans-serif;
}

Your logo

Export the logo as SVG with its strokes converted to outlines. The CLI fits it to the 120 box the pieces use. Open letters, holes and logos in several parts work.

Terminal

npx @usefluid/cli logo logo.svg --out src/lib/logo.ts