Theme and styles

Light and dark

MBSW defaults to the light theme. Add .dark to an element to use dark theme tokens inside it. Set the class on html to change the theme across your app.

// Run in the browser when your app's theme changes.
document.documentElement.classList.toggle('dark', dark);

This also updates Dialog, Select and other content rendered in portals under body. If you theme only part of a page, check where its portals render.

CSS variables

Copy CSS variable names from the Foundation token reference. Use semantic tokens for roles such as borders or text color when possible, rather than choosing a palette value directly.

.panel {
  border: 1px solid var(--riido-border);
}

Find token names and categories in @mbsw/tokens/manifest. These docs read values from the installed package's styles.css. Composite tokens, such as typography styles, use multiple CSS declarations.

Optional styles

If you use Tailwind utilities, import @mbsw/tokens/tailwind.css alongside your Tailwind CSS 4 setup. It extends the default theme without resetting it, so your existing utilities still work.

Import @mbsw/tokens/gradient-canvas.css to use --gradient-canvas. The gradient runs from the top left to the bottom right of its container. Its angle changes with the container's aspect ratio. See Gradient for a preview and CSS example.

Import @mbsw/tokens/motion.css to shorten animations and transitions when reduced motion is enabled in the operating system. It applies across the document, so check that it fits your app's motion settings.