Presets

Four presets ship. Each is a complete theme, with every component's tokens in both schemes, each is a starting point for definePreset, and every template on this site can be previewed in any of them, because a theme is easier to judge at work than on a swatch. A fifth is an object: see theming.

Prism

The web-native look: a blue primary, 6px corners, a soft focus halo and a shadow under every overlay. It is the preset every other one is a diff against, and the one the component tokens are drawn for first.

Blue primary6px cornersSoft shadowsHalo focus ring

In useSee it on the templates

Ink

Colour reserved for meaning: the primary button is ink on white and paper on black, the borders are hairlines, and the only shadow is the one under a popover. The focus ring sits two pixels off the control with the page colour between them.

Ink primaryHairline bordersOffset focus ringOne shadow, used sparingly

Use InkSee it on the templates

Avalonia

The desktop look: a #0078d4 accent, control fills that let the window through, a two-pixel accent line under a focused text box, a two-tone focus ring and an accent pill on the selected row of a list.

Accent blueTranslucent fillsAccent line on focusSelection pill

Use AvaloniaSee it on the templates

Simple

For the screens that are read all day: square corners, grey control fills with a mid-grey border, a compact 13px type size, and transitions turned off entirely so nothing moves while you work.

Square corners13px typeNo shadowsNo animation

Use SimpleSee it on the templates

Starting from nothing

import { definePreset, palette, Base } from '@vitral/vue';

// Base is the preset the others are built on: every component's tokens,
// with nothing opinionated about the look.
export const House = definePreset(Base, {
    semantic: {
        primary: palette('#0f766e'),
        focusRing: { width: '1px', offset: '1px' }
    }
});