Getting started

Theming

Rask.Ui takes Flux UI's theme: two colours and a typeface, each a token. Re-point one in your own @theme, after the kit's import, and every component follows — there is nothing to override.

Base color

The base is Tailwind's zinc scale, written straight into the components: bg-zinc-800/5, border-zinc-200. Point the scale at another gray and every border, ground and muted ink changes with it:

@theme {
  --color-zinc-50: var(--color-slate-50);
  --color-zinc-100: var(--color-slate-100);
  --color-zinc-200: var(--color-slate-200);
  --color-zinc-300: var(--color-slate-300);
  --color-zinc-400: var(--color-slate-400);
  --color-zinc-500: var(--color-slate-500);
  --color-zinc-600: var(--color-slate-600);
  --color-zinc-700: var(--color-slate-700);
  --color-zinc-800: var(--color-slate-800);
  --color-zinc-900: var(--color-slate-900);
  --color-zinc-950: var(--color-slate-950);
}

Accent color

The accent is three variables: the fill of a primary action, the same hue as readable text — a link, an accented heading — and the text on the fill. Each box below sets them for what is inside it; an app sets them once, for the page:

Accents

An arbitrary-property class sets the tokens for one subtree. The default is the kit's own: zinc-800, and white in dark mode.

ThemingAccentExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class ThemingAccentExample : Component
{
    protected override Component? Render() =>
        Div.Class("grid gap-4 sm:grid-cols-2")[
            Swatch("Default", ""),
            Swatch("Blue", "[--color-fx-accent:var(--color-blue-500)] [--color-fx-accent-content:var(--color-blue-600)] "
                           + "dark:[--color-fx-accent-content:var(--color-blue-400)]"),
            Swatch("Emerald", "[--color-fx-accent:var(--color-emerald-600)] [--color-fx-accent-content:var(--color-emerald-600)] "
                              + "dark:[--color-fx-accent-content:var(--color-emerald-400)]"),
            Swatch("Rose", "[--color-fx-accent:var(--color-rose-500)] [--color-fx-accent-content:var(--color-rose-600)] "
                           + "dark:[--color-fx-accent-content:var(--color-rose-400)]")
        ];

    private static Component Swatch(string name, string accent) =>
        Ui.Card.Key(name).Class(accent + " [--color-fx-accent-foreground:var(--color-white)]")[
            Ui.Heading.Accent()[name],
            Ui.Text.Class("mt-1 mb-4")["A ", Ui.Link.Href("#")["link"], " and a primary button."],
            Ui.Button.Primary.Sm["Save changes"]
        ];
}

Live result

Default

A link and a primary button.

Blue

A link and a primary button.

Emerald

A link and a primary button.

Rose

A link and a primary button.

@theme {
  --color-fx-accent: var(--color-red-500);
  --color-fx-accent-content: var(--color-red-600);
  --color-fx-accent-foreground: var(--color-white);
}

@layer theme {
  .dark {
    --color-fx-accent: var(--color-red-500);
    --color-fx-accent-content: var(--color-red-400);
    --color-fx-accent-foreground: var(--color-white);
  }
}

Flux names them --color-accent, --color-accent-content and --color-accent-foreground. Rask.Ui's carry fx- while the last daisyUI-drawn parts of the kit still define --color-accent with another meaning.

Font

Rask.Ui is drawn in Inter, as Flux is, and its charts lay their labels out with Inter's metrics. The kit's theme names "Inter" first in --font-sans, and every app's build copies the variable face — latin and latin-ext, every weight — into wwwroot/fonts, with its OFL licence beside it. No page waits on a font CDN.

To draw in another face, re-point the token in your own theme:

@theme {
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
}

An app that serves its own copy of Inter, or no Inter at all, turns the copy off in its project file. The system stack after Inter draws until the token says otherwise:

<PropertyGroup>
  <RaskUiWriteFonts>false</RaskUiWriteFonts>
</PropertyGroup>