Vibe

Appearance

Themes ​

Package Contents ​

@vibe-labs/design-themes-default ​

Types: import { DefaultThemes, type DefaultTheme } from "@vibe-labs/design-themes-default";

CSS (per-theme):

  • @import "@vibe-labs/design-themes-default/cyan";
  • @import "@vibe-labs/design-themes-default/purple";
  • @import "@vibe-labs/design-themes-default/gold";

Colour Themes ​

purple · cyan · gold

Each theme sets inside [data-theme="name"] within @layer vibe.theme: --color-accent · --color-accent-dark · --color-accent-light · --color-accent-hover · --color-accent-active · --color-accent-contrast · --overlay-tint

Cyan also sets: --color-secondary · --color-secondary-dark · --color-secondary-light

Common (included in each theme) ​

[data-theme] — dark base overrides for all semantic tokens [data-theme][data-mode="light"] — light overrides

Tokens overridden: --surface-background/base/subtle/elevated/overlay/modal · --border-subtle/default/strong · --text-primary/secondary/muted/disabled/inverse · --color-success/warning/danger/info · --overlay-scrim/heavy · --surface-hover-overlay/active-overlay · --ring-color/offset-color · --surface-*-subtle (status)

Fonts ​

Instrument Sans (latin + latin-ext), regular + italic. Loaded via fonts.css (included in each theme).

TypeScript ​

DefaultThemes — ["purple", "cyan", "gold"] as constDefaultTheme — "purple" | "cyan" | "gold"

Vibe