Kesko Themes ships per-brand CSS overrides for our design tokens. Each theme swaps the themeable subset of design tokens while leaving the rest of the token set unchanged.

Load a theme as a single stylesheet after the CSS Framework. The framework already includes the design tokens and the base Kesko theme, so a brand theme only changes the values that differ, and everything built on the design tokens follows the chosen brand automatically.

Try the themes

Customize

Primary theme color

Installation #

To install Kesko Themes as a dependency in your project, run:

npm install @kesko/themes

From the CDN #

A theme can also be loaded straight from the Kesko CDN without installing anything. Pick the brand and add its tag to the <head> of your page, after the CSS Framework:

<link
  rel="stylesheet"
  href="https://cdn.kesko.design/themes/1.0.0-rc.3/kesko.css"
  integrity="sha384-deqG4+BbUxF7uCKWAEXN3B75/3poUykt+OsA43ShJWT/MjFgL47pqrHg3ngwGVXC"
  crossorigin="anonymous"
/>

See the CDN guidelines for more details.

Usage #

A theme file only redefines custom properties that the CSS Framework declares, so it must be loaded after the framework and before your own styles. The CSS Framework page documents the full stylesheet order.

With a bundler #

Import the theme right after the framework, once at the root of your application:

// src/main.js
import "@kesko/css";
import "@kesko/themes/dist/k-rauta.css";

Without a bundler #

Copy the theme files into your static assets next to the framework, as part of your build:

{
  "scripts": {
    "build:css": "cp -r node_modules/@kesko/css/dist/. public/assets/kesko/ && cp -r node_modules/@kesko/themes/dist/. public/assets/kesko/themes/"
  }
}

Then link the theme after the framework in the <head> of your document:

<link rel="stylesheet" href="/assets/kesko/kesko.min.css" />
<link rel="stylesheet" href="/assets/kesko/themes/k-rauta.css" />

Themes work the same way on top of tokens.css if you use the tokens package directly instead of the framework.

Brands #

One stylesheet per brand, named after the brand slug. The Kesko theme is the base theme and is already part of the CSS Framework, so kesko.css contains no overrides. It exists so that a theme switcher can treat every brand the same way.

BrandStylesheet
Kesko@kesko/themes/dist/kesko.css
K-Auto@kesko/themes/dist/k-auto.css
K-Business@kesko/themes/dist/k-business.css
K-Rauta@kesko/themes/dist/k-rauta.css
K-Bygg@kesko/themes/dist/k-bygg.css
Byggmakker@kesko/themes/dist/byggmakker.css
K-Ruoka@kesko/themes/dist/k-ruoka.css
K-Tools@kesko/themes/dist/k-tools.css
Kespro@kesko/themes/dist/kespro.css
Onninen@kesko/themes/dist/onninen.css

Themeable tokens #

A theme may override any color or radius token. Typography, spacing, motion, shadows, layers and the primitive palette are never themed and always inherit from @kesko/tokens.

Today, themes override colors only. The table lists every token that at least one theme overrides. The set is not fixed: it is derived from the theme definitions, so it grows whenever a theme overrides a new token. Each theme redefines only what differs from the base Kesko theme, so most themes touch a subset of the list.

CategoryTokens
Theme colors--k-color-theme-primary, --k-color-theme-secondary, --k-color-theme-decorative
Highlight colors--k-color-highlight-primary, --k-color-highlight-secondary
Backgrounds--k-color-bg-primary, --k-color-bg-secondary
Borders--k-color-border-primary, --k-color-border-secondary
Text--k-color-text-primary, --k-color-text-secondary, --k-color-text-link, --k-color-text-on-secondary

Output formats #

{brand}.css #

The theme stylesheet. It contains only the tokens the theme changes, written on :root as plain values, or as var() when the theme aliases another token, and sets color-scheme: light so the browser renders native controls such as form fields in light mode:

:root {
  color-scheme: light;
  --k-color-theme-primary: #cb4700;
  --k-color-theme-secondary: #330072;
  --k-color-theme-decorative: #78d64b;
  --k-color-highlight-secondary: #20004c;
  --k-color-bg-secondary: #f4f1f7;
  --k-color-border-secondary: #330072;
  --k-color-text-secondary: #330072;
}

When a theme reuses another token instead of a hard-coded value, the file keeps that link, for example Byggmakker's --k-color-border-primary: var(--k-color-highlight-primary).

{brand}.json #

The same overrides as resolved values, each with the original token reference. Use it when you need the values outside CSS, for example in a theme switcher or a contrast check:

{
  "meta": { "name": "k-rauta" },
  "light": {
    "--k-color-theme-primary": { "value": "#cb4700", "ref": "{color.orange.800}" },
    "--k-color-theme-secondary": { "value": "#330072", "ref": "{color.brand.krauta-violet}" },
    "--k-color-bg-secondary": { "value": "#f4f1f7", "ref": "{color.purple.200}" }
  }
}

The file also carries a dark block, which belongs to the draft dark mode output below.

Dark mode Draft #

Every theme also ships a {brand}-dark.css stylesheet and a dark block in its JSON. They are generated from a base dark theme in @kesko/tokens plus per-brand overrides, using the palette symmetry rule for saturated colors and the neutral-dark palette for neutrals.