Foundation

Color

Themes replaces Tailwinds default colors and map primitive scales to stable semantic tokens available for all Tailwind prefixes.

Importing themes

Tailwind 4 is required – If your project isn’t on Tailwind 4, please upgrade before proceeding.

Tailwind 4 Setup

Since Tailwind 4 merges configs automatically, you won’t need a separate tailwind.config.js in your project. Instead, ensure Tailwind 4 is set up in your main .css file (or in your chosen bundler config).

Below are examples for Next.js:

1. Install the necessary Tailwind 4 packages (if you haven’t already):

pnpm install tailwindcss @tailwindcss/postcss postcss

3. Import your chosen themes in global.css:

@import 'tailwindcss';
// Always import base.css to get all colors and utilities
@import '@svs/ui/tailwind/base.css';
// Always import font.css to get Svenska Spel's custom font
@import '@svs/ui/tailwind/nextjs/font.css';
@import '@svs/ui/tailwind/oddset.css';

/* If you are using components from the svs-ui
   add them as source so Tailwind can find and purge properly */
@source "../../../../packages/ui/";

/* Optional */
body {
  @apply bg-surface-base;
}

4. To use a theme in your project, simply wrap a high-level node in your application with the theme className of your choice. For example, to use the light theme for our primary product, you would wrap your application in a div with the className "theme-primary-light":

<div className="theme-svs-light">
  {/* Your application components go here */}
</div>

Use multiple themes

It is possible to nest themes to use multiple themes in the same application. For example, you could have a section of your application that uses the vibrant theme while the rest of the application uses the light theme:

<div className="theme-svs-light">
  {/* Light themed components */}
  <div className="theme-svs-vibrant">
    {/* Vibrant themed components */}
  </div>
</div>

Convention

We use a simple color and fg convention for colors where the background is set with the name of the color and text, icons and other elements placed on a background uses the -fg (foreground) variant of the same color.

Below is a list of classNames you can copy and paste for each color. The first example shows which parts are Tailwind prefixes and which parts are variables from @svs/ui themes.

Accent colors

Accent colors are used to give the interface a distinct product identity.

Note that not all themes has mapped colors for secondary-variant and tertiary colors

Status colors

Use to indicate a message to the user.

Surfaces

Surfaces are the foundational backgrounds for larger UI elements or sections. All surfaces share the same foreground: text-surface-fg

Layers

All layers share the same foreground: text-layer-fg. Layers are placed upon surfaces.
Layer-neutral is an opacity based layer suitable for both surface-standard and surface-base.

Stroke

Use borders according to Tailwinds defaults and set any of the colors below. i.e className="border-4 border-stroke-low"

Links

Do and don't