1.0.0-rc.3 Pre-release, can be tested in production
Maintenance release; no changes to the components themselves
Updates the
@kesko/csspeer dependency to1.0.0-rc.5Release date 28.10.2026
Maintenance release; no changes to the components themselves
Updates the @kesko/css peer dependency to 1.0.0-rc.5
Release date 28.10.2026
Pagination page buttons now have a translated accessible name, “Sivu 3” instead of a bare “3”. The new pagination.page translation key sets it through KeskoProvider, and pageLabel still overrides it per instance. See the localization guide
Pagination items now sit slightly further apart so that the component works better on colored backgrounds.
Component accessibility guidelines now explain why the accessible name must contain the visible label for voice control
Release date 23.10.2026
First release candidate of @kesko/components. Button, Divider, Pagination, Spinner, Stack and VisuallyHidden can now be tested in production
New usage guidelines show how to set up the components in React, Next.js, plain HTML and Vue, and how to style them
Components now speak Finnish, Swedish, Norwegian and English. They follow the language of the page, with Finnish as the fallback. See the localization guide
Adds KeskoProvider, an optional wrapper for your app. Give it your router and links in components change pages without a full reload
Adds a browser accessibility test suite. Every component is now tested in a real browser for keyboard use, focus, color contrast, reduced motion and Windows high-contrast mode, following the A11Y checklist. The suite runs on every pull request
Every component page now has its own accessibility guidelines
Button is rebuilt to match Figma. Pick a style variant with variant (primary, secondary, neutral, success, error) and the visual appeareance with appearance (filled, outline, plain, text)
Button in a loading state now tells screen readers what is happening. Set the text with the new loadingLabel prop
Pagination gets sizes, icon-only previous and next controls, more examples, and full color customization that also works in dark mode
Stack gets justify for spreading items, and rows now wrap by default on small screens
Spinner uses the brand’s primary color by default and respects reduced motion and high-contrast settings
All examples work in dark mode
Breaking change: Button variant no longer accepts default, plain, text or inverted, and the transparent and iconOnly props are gone. Use appearance for the plain and text looks, variant="neutral" on dark surfaces, and square for icon-only buttons
Breaking change: Button custom properties are simplified. The -active and -ring- properties are gone; the -hover properties now cover both hover and pressed states
Breaking change: Pagination renames prevLabel → previousLabel, hidePrev → hidePrevious and itemLabel → pageLabel
Breaking change: Stack wrap is replaced by nowrap, since rows wrap by default
Breaking change: Spinner no longer inherits the text color. Set --k-spinner-color: currentColor to get the old look
Requires @kesko/css 1.0.0-rc.4
For updated documentation, view the components docs
Release date 22.10.2026
Updates the @kesko/css peer dependency to 1.0.0-rc.3
Release date 15.10.2026
Maintenance release; no consumer-facing changes
Also available on the CDN, which is now ready for production use
Release date 7.10.2026
Components use the renamed tokens from @kesko/tokens 1.0.0-rc.1, so they need @kesko/css 1.0.0-rc.1
Button follows the new brand colors: secondary uses the brand’s secondary theme color, buttons are fully rounded, and disabled buttons use the new disabled colors
Adds a @kesko/components/icon/icon.css export
Fixes the @kesko/css peer dependency, which every earlier release published as an unresolvable workspace:* range so npm install @kesko/components failed with an unsupported protocol error. It is now ^1.0.0-rc.1
For updated documentation, view the components docs
Release date 5.10.2026
Adds a new Pagination component, built from Buttons with chevron icons. It supports sibling and boundary page counts, custom labels, and either an onChange handler or href links
@kesko/iconography is now a regular dependency, so installing @kesko/components is enough for the icons it uses
For updated documentation, view the components docs
Release date 22.9.2026
Bumps @kesko/iconography to 2.0.0, so the redesigned icons now appear in the usage examples and the playground
No component API, styling, or accessibility changes
For updated documentation, view the components docs
Release date 20.8.2026
Maintenance release; republished to pick up @kesko/tokens 1.0.0-beta.13. No consumer-facing changes
Release date 2.6.2026
Button updated to use the renamed --k-color-bg-disabled token from the latest @kesko/tokens
For updated documentation, view the components docs
Release date 20.5.2026
Each component now imports its own stylesheet, so React consumers no longer need a separate import "@kesko/components/{name}/{name}.css" alongside the component
Adds the missing subpath exports for Divider, Stack, and VisuallyHidden (plus the matching *.css paths) in package.json
Button updated to use the renamed --k-color-text-on-inverted token from the latest @kesko/tokens
Adds a new React compatibility test suite covering React 17, 18, 19 and Next.js 16
For updated documentation, view the components docs
Release date 8.5.2026
Bumps @kesko/iconography to 1.3.0, so the new ai, calendar-week, triangle-up, triangle-down, triangle-left, and triangle-right icons are now available in usage examples and the playground
For updated documentation, view the components docs
Release date 29.4.2026
Updates dev dependencies to their latest version
Release date 28.4.2026
Components have been converted to thin React wrappers around lightweight Custom Elements (such as <k-spinner>, <k-stack>, <k-divider>, <k-visually-hidden>), so React and HTML usage share the same DOM and styling
Drops the react-aria-components peer dependency
Adds a new Divider component
Button gains a new iconOnly prop, switches from aria-busy to a class-based loading state, blocks Enter-key activation on aria-disabled links, and exports its full ButtonProps type
Spinner re-implemented as a single-element component, with a new color customization example
Visually Hidden now supports rendering as a Custom Element
Adds an icon usage example pairing @kesko/components with @kesko/iconography
For updated documentation, view the components docs
Release date 27.4.2026
The package now ships a working React component library with Button, Spinner, Stack, and VisuallyHidden drafts
Every component ships paired .tsx and .html usage examples. The HTML versions are styled via @kesko/css, so non-React consumers can match the same visual output using the shared .k-* classes
Button gets refined color calculations, better support for custom styles, and an overall visual polish
Spinner animation refined for smoother timing
Adds a full playground with SSR support, live theme switching, and CodeMirror-based usage examples
Adds component visual regression tests using Playwright, runnable inside Docker for consistent snapshot output across environments
Adds a component listing page and per-component docs pages with manifest-driven headers, descriptions, and resizable live examples
Build now minifies output and prints size reports; component CSS is collected per-component so consumers only pay for what they import
For updated documentation, view the components docs
Release date 21.4.2026
This release refactors accent colors (accent, secondary, disabled) under color.accent group and brand colors under color.brand group for a cleaner token hierarchy
Release date 14.4.2026
First alpha release of @kesko/components package
Release date 13.4.2026
Maintenance release; no changes to kesko.min.css or components.min.css
Skatta Sans Condensed from @kesko/fonts 1.5.0 is not part of the bundle. Import condensed.css from @kesko/fonts if you need it. Read more
Release date 28.10.2026
Adds two text wrapping classes: .k-text-nowrap keeps text on one line, and .k-text-truncate also cuts it off with an ellipsis
Picks up the new token and color changes from @kesko/tokens 1.0.0-rc.3
The optional components.min.css matches @kesko/components 1.0.0-rc.1. Button modifiers are now attributes such as variant="secondary" instead of .k-button-secondary classes. See the HTML usage guidelines
For updated documentation, view the CSS framework docs
Release date 22.10.2026
Rebuilds the bundle with @kesko/fonts 1.4.0, so kesko.min.css now carries the fixed SkattaSansUI-fallback faces and their metric overrides. Read more
Release date 15.10.2026
Adds two short classes: .k-bg-theme for the brand’s main color and .k-bg-highlight for its highlight color. Both change with the brand theme you load
Also available on the CDN, which is now ready for production use
For updated documentation, view the CSS framework docs
Release date 7.10.2026
First release candidate of @kesko/css. Utility class naming and structure are considered stable, so breaking changes are not expected before 1.0.0 unless critical bugs are found
Adds short classes that use the default size: .k-p, .k-m (plus directional forms such as .k-px), .k-gap and .k-leading
Adds .k-gap-x-* and .k-gap-y-* for setting the gap between columns and rows separately
Adds auto margins in every direction, such as .k-mx-auto
Adds .k-*-base classes, plus classes for the new theme, highlight and background colors
When you combine spacing classes, the more specific one wins, like in Tailwind. For example, .k-p-lg .k-px-sm gives large padding with small padding on the sides
Line height classes (.k-leading-*) now grow and shrink with the font size
Improves bundler support with types and style export conditions and a sideEffects field
Fixes TypeScript 6 and later rejecting import "@kesko/css/dist/kesko.min.css" and the other stylesheet imports
Breaking change: .k-text-accent is now .k-text-primary, and .k-bg-accent is now .k-bg-theme-primary
Breaking change: .k-text-weak, .k-text-weaker and .k-text-weakest are now .k-text-dimmest, .k-text-dimmer and .k-text-dim. The scale is reversed to match Figma, so .k-text-dim is the lightest step and .k-text-dimmest the darkest
Breaking change: the soft status backgrounds .k-bg-status-*-weak are now .k-bg-info, .k-bg-success, .k-bg-warning and .k-bg-error, and .k-bg-fill-decorative is now .k-bg-theme-decorative
Breaking change: removes the classes for removed design tokens, such as .k-bg-subtle, .k-bg-hover, .k-border-hover and .k-rounded-none
Breaking change: .k-border-warning is now yellow instead of red. Use .k-border-error for errors
For updated documentation, view the CSS framework docs
Release date 5.10.2026
Maintenance release; no consumer-facing changes
Release date 20.8.2026
Maintenance release; republished to pick up @kesko/tokens 1.0.0-beta.13. No consumer-facing changes
Release date 2.6.2026
Picks up the renamed --k-color-bg-disabled token from the latest @kesko/tokens
Utility generator now consumes the W3C DTCG-formatted tokens from @kesko/tokens
Release date 20.5.2026
Picks up the renamed --k-color-text-on-inverted token from the latest @kesko/tokens
Release date 8.5.2026
Maintenance release; no consumer-facing changes
Release date 28.4.2026
The @kesko/css/components add-on now ships Custom Element selectors picked up from the latest @kesko/components (k-spinner, k-stack, k-visually-hidden, k-divider), so plain-HTML consumers can drop in <k-stack> or <k-spinner> and get the same styling as the React versions
For updated documentation, view the CSS framework docs
Release date 27.4.2026
Adds a @kesko/css/components subpath export so non-React consumers can opt into component classes with @import "@kesko/css/components"
The build now collects every {name}.css from packages/components/src/ at build time, so component class styling stays in sync with @kesko/components without a direct workspace dependency
Updates index.d.ts with module declarations for both @kesko/css/dist/kesko.min.css and @kesko/css/dist/components.min.css imports
Removes the cyclic @kesko/components devDependency from package.json
For updated documentation, view the CSS framework docs
Release date 21.4.2026
This release refactors accent colors (accent, secondary, disabled) under color.accent group and brand colors under color.brand group for a cleaner token hierarchy
Release date 14.4.2026
First alpha release of @kesko/css package
@kesko/css ships the full set of design token custom properties, Kesko’s brand typeface, and Tailwind-style utility classes, all in a single self-contained CSS file that weighs just ~3Kb
Install @kesko/css as the base, then optionally layer a brand theme from @kesko/themes
Release date 13.4.2026
Maintenance release; no changes to the tokens themselves
Release date 28.10.2026
Adds text.on-inverted, the text color for content on top of theme.inverted
Improves dark mode in every brand theme. Brand-colored text, links and borders are lighter so they stay readable on a dark page
Fixes the text on top of status colors in dark mode. The fills are the same in both modes, but the text flipped to the wrong color; it now matches light mode
Adds text.link-dim for the hover color of links
Adjusts the button hover colors of the K-Business, K-Tools and Onninen themes: lighter hover tints for secondary buttons, and a visible hover state for K-Business buttons
The orange palette changes slightly, following @kesko/color 1.1.0
For updated documentation, view design tokens
Release date 22.10.2026
Adds tokens.min.css, a smaller version of tokens.css. Use it when you load the tokens directly in CSS
Also available on the CDN, which is now ready for production use
For updated documentation, view design tokens
Release date 7.10.2026
First release candidate of @kesko/tokens. Design token naming and structure are considered stable, so breaking changes are not expected before 1.0.0 unless critical bugs are found
Color tokens now follow the same structure as Figma, so designers and developers use the same names
Each brand’s main colors now live in two new groups: theme colors and their highlight colors for hover and emphasis. Links, borders and text are built on them, so when a brand changes its primary color, everything that uses it updates too
Brand themes are rebuilt to match the brand colors in Figma
Adds three new neutral background colors for layering content: bg.surface, bg.panel and bg.container
Each group’s default token now has a regular name ending in base, such as --k-color-bg-base. In CSS you can also use the group name on its own as a shortcut, such as var(--k-color-text) or var(--k-space)
Line height tokens no longer have a unit (1.5 instead of 1.5rem), so line height grows and shrinks with the font size
In total, this release adds 610 tokens, removes 360 and changes 111 across all brand themes
Fixes importing files from dist/ in Node, Vite and Turbopack
Fixes the TypeScript types, including the DesignToken type
Fixes dark mode variables (--k-dark-*) showing up in the brand theme files
Fixes the brand theme iOS and Android files, which did not compile
Fixes the main Android file, which did not compile. Font sizes now use sp, font weights and durations are whole numbers, radius.pill is 999dp, and web-only values are left out
Adds TypeScript types for @kesko/tokens/dtcg and the stylesheets, so import "@kesko/tokens/dist/tokens.css" works in TypeScript 6 and later
Breaking change: accent is now theme.primary, and text.accent / text.on-accent are now text.primary / text.on-primary
Breaking change: text.weak, text.weaker and text.weakest are now text.dimmest, text.dimmer and text.dim. The scale is reversed to match Figma, so dim is the lightest step and dimmest the darkest
Breaking change: overlay.dimmed is now overlay.dim
Breaking change: the soft status colors status.*-weak are now bg.info, bg.success, bg.warning and bg.error, and fill.decorative is now theme.decorative
Breaking change: in JavaScript, JSON, iOS and Android, default tokens now end in base, for example KColorBg is now KColorBgBase. CSS names such as --k-color-bg keep working
Breaking change: removes the opacity group, the rest of the fill group, and tokens with no place in the new structure, such as bg.subtle, bg.hover, border.hover and radius.none. See design tokens for the current list
Breaking change: border.warning is now yellow instead of red (use border.error for errors), buttons are fully rounded, and the disabled, warning text and success colors are updated
For updated documentation, view design tokens
Release date 5.10.2026
Maintenance release; rebuilt on Style Dictionary 5.5.0. Token names, values, and output formats are unchanged
Release date 20.8.2026
Adds two new brand themes: K-Bygg and Byggmakker
Renames the underlying default variants from base to [default] so it reads as a marker in Figma (color/accent/[default]) rather than a regular sibling token
--k-layer-default has been renamed to --k-layer and --k-opacity-default to --k-opacity
Brand color tokens (color.brand.*) move to a dedicated Brand Colors Figma collection with a single mode, instead of being duplicated across all theme modes
For updated documentation, view design tokens
Release date 2.6.2026
Design tokens are now published in W3C DTCG format and automatically synced from code to Figma on every release
Each design token now carries $value, $type, $description, and an $extensions block with the original metadata
Design token types are adjusted to use the DTCG types for non-color primitives: font.weight.* is now fontWeight, motion.duration.* is now duration, and size.* is now dimension (previously all string)
Renames color.accent.disabled to color.bg.disabled to align the disabled background with the rest of the bg.* surface tokens
Exports shared DTCG helpers (ALIAS_PATTERN, walkLeaves, lookup, resolveAlias) from @kesko/tokens/dtcg so downstream packages can parse the DTCG output without reimplementing the traversal
For updated documentation, view design tokens
Release date 20.5.2026
Renames color.text.inverted to color.text.on-inverted for consistency with the rest of the text.on-* foreground tokens
Adds an optional surface metadata field on each text.on-* token, naming the background it’s designed to sit on. Powers the new contrast pairing display on the design tokens page
Release date 8.5.2026
Updates dev dependencies to their latest version
Release date 28.4.2026
Restructures spinner sizing: replaces the single size.component.spinner token with a t-shirt scale (size.spinner.sm through size.spinner.2xl) so spinners can match the size of the surrounding component
Adds new size.icon.{xs, sm, md, lg, xl} tokens (16/20/24/32/48px) matching the icon component preset sizes
For updated documentation, view design tokens
Release date 27.4.2026
Adds a new motion.duration.2xl token (1000ms) for prolonged loading animations
Simplifies motion.easing.decelerate and motion.easing.accelerate to ease-out and ease-in respectively, matching CSS keyword defaults
Refines the blue palette with custom contrast ratios for smoother progression across the 12 steps
Swaps the default accent pairing: color.accent is now {color.orange.800} and color.accent.secondary is {color.orange.700}; color.text.on-secondary flips to {color.neutral.100} so secondary buttons read on the darker orange
Updates color.brand.onninen-teal to match what’s used online for better contrast
Adds a new brand theme with its own accent, radius, space and dark-mode
Adds text-link to the list of themeable tokens, so brands can override inline link color independently from accent
Makes color.accent.secondary and color.text.on-secondary optional per theme
Carries radius and space theme overrides into dark mode automatically, so brands only need to declare them once
Updates the dark-mode mirror rule to defer neutral tokens to dark.yaml rather than auto-swapping them, keeping text-on-surface tokens visually consistent across modes
For updated documentation, view design tokens
Release date 21.4.2026
This release refactors accent colors (accent, secondary, disabled) under color.accent group and brand colors under color.brand group for a cleaner token hierarchy
Updates theme YAMLs and build logic to support the new base-nested accent structure
Adds new design token visualizer which is an interactive tool for exploring the full Kesko design token tree and understanding how the relationships work between groups, primitives, semantics, themes, and modes
For updated documentation, view design tokens
Release date 14.4.2026
Adds multi-brand theming to the design token system
Theme definitions live as YAML files in /themes/*.yaml, each overriding a subset of semantic tokens
Dark mode is defined in dark.yaml mapping all semantic color tokens to their dark equivalents using the neutral-dark palette and palette symmetry rule
The design tokens documentation page gets a theme selector dropdown that swaps swatch colors, contrast ratios and token references
Ships these themes: Kesko (default), K-Ruoka, K-Rauta, Kespro, K-Business, K-Tools, and K-Auto, each with light and dark variants
For updated documentation, view design tokens
Release date 13.4.2026
Renames {color.dark.neutral} to {color.neutral.dark} for better consistency
For updated documentation, view design tokens
Release date 10.4.2026
Adds 12 neutral-dark primitive color tokens (k-color-neutral-dark-100 through k-color-neutral-dark-1200) for dark mode support, sourced from the new @kesko/color neutral-dark palette
For updated documentation, view design tokens
Release date 10.4.2026
Adds component-specific radius tokens: button, input, checkbox, and element, aliased to the primitive radius scale for easy theming
Adds space.button spacing token for button padding, aliased to space.sm
For updated documentation, view design tokens
Release date 10.4.2026
All primitive color palettes have been reworked from the ground up, with updated contrast ratios and improved perceptual uniformity across all 9 color families
Design token names have been revised to improve consistency and better support theming across brands
Semantic color token aliases have been updated to reference the new primitive palette values
For updated documentation, view design tokens
Release date 10.4.2026
First beta release of @kesko/tokens! 🎉
The @kesko/tokens now ships a total of 250 design tokens
Adds 17 new design token categories: accent, background, border, fill, overlay, status, text, brand, font sizes, font leading, layers, motion, opacity, radius, shadows, sizes, spacing
Adds 27 brand color tokens covering Kesko, K-Citymarket, K-Supermarket, K-Market, K-Rauta, Onninen, K-bygg, Byggmakker, K-Auto, Kespro and K-Business
Aliases all semantic color tokens to the @kesko/color primitive palette
Adds custom Style Dictionary transforms that strip a trailing base path segment, so color.bg.base emits as --k-color-bg while siblings keep their full name
Improve usage guidelines and add visual previews for all design token types
Adds tokenDisplayName filter with t-shirt scale and brand chain name expansion
Improves LLMs markdown endpoint to correctly generate meta data: tokens.md
Release date 9.4.2026
Add usage guidelines covering installation and per-format consumption (CSS, SCSS, Less, JS, TS, JSON, iOS Swift, Android XML).
Fix the iOS Swift output: tokens.config.js was using transformGroups.ios syntax inside a .swift file. Switched to transformGroups.iosSwift, added className: "KeskoTokens", and filtered to color tokens only.
Drop the Jetpack Compose output (tokens.kt) for now until actually needed.
Release date 8.4.2026
Changed @kesko/color dependency to use pnpm workspace protocol (workspace:*) instead of version range
Updated var(--k-font-family-sans) token to include SkattaSansUI-fallback in the font stack, aligning with the new fallback font in @kesko/fonts
Added Vitest test suite for @kesko/tokens, covering token structure and output validation
First alpha release of @kesko/tokens package
@kesko/tokens is the single source of truth for all design decisions across Kesko products. Tokens are defined as YAML and compiled by Style Dictionary into 10 platform-specific formats: CSS custom properties, SCSS variables, LESS variables, JavaScript named exports, TypeScript declarations, JSON, ES module, iOS Swift, Android XML, and Jetpack Compose
The primitive color palette is not defined in this package. Instead, it is generated by the @kesko/color package and pulled in at build time
For full documentation, view design tokens
Maintenance release; no changes to the themes themselves
Updates the @kesko/css peer dependency to 1.0.0-rc.5 and the @kesko/tokens peer dependency to 1.0.0-rc.4
Release date 28.10.2026
Improves the dark variant of every brand theme. Brand-colored text, links and borders are lighter so they stay readable on a dark page
Adjusts the button hover colors of the K-Business, K-Tools and Onninen themes: lighter hover tints for secondary buttons, and a visible hover state for K-Business buttons
Your package manager now warns you if your @kesko/css is older than 1.0.0-rc.4
For updated documentation, view themes
Release date 22.10.2026
Updates the @kesko/css peer dependency to 1.0.0-rc.3
Release date 15.10.2026
Maintenance release; no changes to the themes themselves
Also available on the CDN, which is now ready for production use
Release date 7.10.2026
First release candidate of @kesko/themes. Brand theme naming and structure are considered stable, so breaking changes are not expected before 1.0.0 unless critical bugs are found
Brand themes are rebuilt to match the brand colors in Figma. Each brand sets its own theme and highlight colors, plus a few background, border and text colors
Brand colors carry through the whole theme. When a brand sets its primary color (--k-color-theme-primary), the links, borders and text built on it change too, and so does the --k-color-theme shortcut
TypeScript 6 and later accepts brand stylesheet imports such as import "@kesko/themes/dist/k-rauta.css"
Your package manager now warns you if your @kesko/css or @kesko/tokens is older than 1.0.0-rc.1
For updated documentation, view themes
Release date 5.10.2026
Maintenance release; no consumer-facing changes
Release date 20.8.2026
Adds K-Bygg and Byggmakker brand themes, each with a light variant and an auto-generated dark variant
Removes a broken --k-color-bg-disabled override from the K-Business theme, so disabled surfaces fall back to the base token
Theme build pipeline updated to read the new [default] sentinel from @kesko/tokens in place of the old base key
For updated documentation, view the themes docs
Release date 2.6.2026
Picks up the renamed --k-color-bg-disabled token from the latest @kesko/tokens
Theme build pipeline now consumes the W3C DTCG-formatted tokens from @kesko/tokens via the shared DTCG helpers; output theme CSS and JSON are unchanged
Release date 20.5.2026
Picks up the renamed --k-color-text-on-inverted token from the latest @kesko/tokens
Release date 8.5.2026
Updates dev dependencies to their latest version
Release date 28.4.2026
README refresh and internal JSDoc improvements to align with the current themeable surface
For updated documentation, view the themes docs
Release date 27.4.2026
Adds a new brand theme
Adds --k-color-text-link to the themeable token list, so brands can override inline link color independently from accent
Makes --k-color-accent-secondary and --k-color-text-on-secondary optional for theming
Carries radius and space overrides into dark mode automatically, so brands only need to declare them once per theme
Updates the dark-mode mirror rule for neutral tokens: instead of auto-swapping to neutral-dark, neutral references now defer to the dark.yaml base value, which maps each semantic token (surface vs. text-on-surface) individually and avoids inverting text-on-surface tokens
Simplifies the default Kesko theme significantly while filling out brand and dark-mode coverage
For updated documentation, view the themes docs
Release date 21.4.2026
This release refactors accent colors (accent, secondary, disabled) under color.accent group and brand colors under color.brand group for a cleaner token hierarchy
Updates theme YAMLs and build logic to support the new base-nested accent structure
Release date 14.4.2026
First alpha release of @kesko/themes package
@kesko/themes provides a lightweight CSS theme for each Kesko brand. Each theme overrides the themeable subset of @kesko/tokens while leaving the rest of the design tokens unchanged
Ships these themes: Kesko (default), K-Ruoka, K-Rauta, Kespro, K-Business, K-Tools, and K-Auto, each with light and dark variants
Dark mode variants are auto-generated from the base dark theme in @kesko/tokens using the palette symmetry rule, with optional per-brand overrides
Release date 13.4.2026
Maintenance release, no changes to the icons themselves
Updates a development dependency
Release date 28.10.2026
Maintenance release, no changes to the icons themselves
Updates a development dependency to address a security advisory
Also available on the CDN, which is now ready for production use
Release date 7.10.2026
Maintenance release, no changes to the icons themselves
Updates the color prop description in the React TypeScript declarations to use var(--k-color-theme-primary), following the token rename in @kesko/tokens 1.0.0-rc.1
Updates development dependencies to address security advisories
Release date 5.10.2026
Adds the following new icons: age-restricted, cardboard-box, ev-charging-station, resident-change-service, ruler, scan-barcode, sms, sms-failed, sms-in-progress, wifi, and wifi-disconnected
Fixes shopping-bag-xl, which had always drawn a bag with a checkmark rather than the extra-large bag its name promised. It now shows an XL bag, and the checkmark artwork lives on as the new shopping-bag-added icon. If you were using shopping-bag-xl for the checkmark, switch to shopping-bag-added
Release date 22.9.2026
First stable release of the fully redesigned Kesko UI icon library
Everything from the 2.0.0-rc series is now final, with no changes since rc.5
Every icon in this major release has been hand-drawn on a 24×24 grid with consistent 1.5px strokes, stroke corners, stroke ends, and stylistic gaps, plus improved optical sizing throughout
Adds iconography guidelines explaining how the icons are designed and why, plus an icon naming section in the naming guidelines
Breaking changes: icons have been renamed, removed, and recategorised across the 2.0.0-rc series. The migration guide covers every rename and removal, the new category taxonomy, and the -sm size-variant convention
Release date 20.8.2026
Fixes the t-shirt sizing in icons to use a more consistent format, defined in the naming guidelines
Release date 18.8.2026
Fixes the React TypeScript declarations to return ReactElement imported from react, instead of the global JSX.Element namespace. The declarations now type-check cleanly against @types/react 17, 18 and 19
Fixes @kesko/iconography/react/{IconName}.js failing to resolve, because the ./react/* export pattern appended a second .js to the path. Both spellings now work, alongside the @kesko/iconography/dist/react/{IconName}.js form used throughout the docs
Adds a ./package.json entry to the exports field, so build tooling that reads the package manifest through the package name resolves it instead of erroring
Release date 17.8.2026
Rebuilds the icon categories to match the section structure of the Figma icon library. The 15 categories become 24, and every icon's category value changes as a result
Adds the migration guide promised in rc.2, covering every renamed and removed icon and the new category taxonomy
Adds also two new icons, roof and contentful
Improves the icons page: the category filter and the category listing are both generated from the package registry, and the details panel now shows a category's display name rather than its slug
Breaking changes: renames user-normal → user. Removes four icons that were duplicates of another icon in the set: attention-extra (use notice), household (use home-accessories), profile (use user), and web-store (use cart). Each replacement is visually identical to the icon it replaces, so changing the name is the whole migration
Breaking changes: every icon's category value changes. This only affects code that reads icon metadata, category is not part of the React API, and is not exported from the individual dist/assets/{name}.js modules. Note that hardware, shopping, sustainability, location, and people all survive as category names but no longer mean the same thing, so a filter built on those keeps working while quietly returning a different set of icons
Release date 11.8.2026
First release candidate of the new, redesigned Kesko UI icon library
Every icon has been hand-drawn using consistent 1.5px strokes on a 24×24 grid, with more consistent stroke corners, stroke ends, and stylistic gaps, plus improved optical sizing throughout
Adds the following new icons: alcohol, chicken, copy-2, exclamation-mark, info-mark, question-mark, save, fueltype-diesel-sm, fueltype-electric-sm, fueltype-gas-sm, fueltype-hybrid-sm, fueltype-natural-gas-sm, and fueltype-plug-sm
Introduces a -sm suffix convention for size-specific variants, intended to render at 10×10px
Introduces new iconography guidelines that explain how the icons are designed and why. Follow them when drawing a new icon so the result fits naturally alongside the rest of the set
Adds a work-in-progress icon naming section to the naming guidelines documenting how icons are named
Migration guidelines followed in 2.0.0-rc.3, see the migration guide
Breaking changes: renames delivery-fast → delivery-express, delivery-normal → delivery-home, lightning → lighting, method-pickup → delivery-pickup, method-pickup-2 → delivery-pickup-2, method-pickup-3 → delivery-pickup-3, method-pickup-4 → delivery-pickup-box, and work-and-protectice-clothing → protective-clothing
Release date 30.6.2026
Removes the unused svgpath dev dependency
Removes the unused normalize-viewbox.cjs script that the build no longer uses
Readme slimmed down, full usage docs now live on the icons page
Release date 8.5.2026
Adds the following new icons: ai, calendar-week, triangle-up, triangle-down, triangle-left, and triangle-right
For up-to-date documentation and usage guidelines, see Icon library
Release date 29.4.2026
Sets displayName on all icon React components for better React DevTools legibility, plus internal metadata used by @kesko/components. No consumer-facing changes
For up-to-date documentation and usage guidelines, see Icon library
Release date 21.4.2026
Adds the following new icons: mood-angry, mood-funny, mood-happy, mood-nerdy, mood-neutral, mood-surprise, mood-unhappy, plastic-bag, and recycle-bottle
Improves consistency of mood-wink icon with the rest of the mood icons
For up-to-date documentation and usage guidelines, see Icon library
Release date 8.4.2026
First stable production release of icons, v1.0.0, is out! 🎉
Ships 363 icons that can be used on the web, mobile, and native platforms
Each icon is a responsive SVG shipped as an SVG file, as an individual ES module, as part of a single index module, and as a React component with size, color and label props
All included icons also carry metadata (title, category, tags) to support search and filtering in tooling and documentation
Thoroughly tested in React 17, 18, 19, Next.js 16, and plain JavaScript, including combinations of various Node.js versions + Webpack, Vite, and Turbopack
Additionally this release improves the optical sizing of curtain sewing, adjust, bathroom, cafeteria, and fabrics curtains carpets icons
For up-to-date documentation and usage guidelines, see Icon library
Utilize the markdown version when migrating to the new library using AI: icons.md
Release date 1.4.2026
Fixes exports field in package.json for dist/ import paths to resolve correctly in strict bundlers like Vite or Turbopack. Previously, dist/ paths were documented but blocked by the exports field
Adds "type": "module" in package.json since the output is ESM, but the package didn’t declare itself as such. Now works correctly on Node 12+
Adds tests for all documented import patterns across React 17, 18, 19, and Next.js 16
Additionally, this release adds a new outlet icon
For up-to-date documentation and usage guidelines, see Icon library
Adds 17 additional icons: cables, car-truck, carbon-footprint, chemicals, electricity-grid, handshake, refrigeration, sleep, solar-energy, stop, sun, telecom, volume-down, volume-full, volume-mute, volume-up, water-sewage
Add ./*.svg export pattern to package.json so raw SVG files can be imported directly (e.g. @kesko/iconography/warning.svg)
Add raw SVG import example to the icons documentation fallback paths section
Adds documentation about sizing raw SVG imports
For full documentation, view icon library
Wrap all generated React icon components in React.memo for memoization and better DevTools names
Switch from react/jsx-runtime to createElement to avoid subpath import resolution issues in some Node.js configurations
Fix peerDependencies to correctly declare React 17+ (was 18+, but output now supports 17+)
Add JavaScript framework compatibility tests (React 17, 18, 19 + Next.js)
Switches from .jsx to .js output: React icon components now use react/jsx-runtime calls directly instead of JSX syntax, improving Node.js compatibility without requiring a transform
Flattens dist/react/ structure: Components moved from dist/react/assets/ to dist/react/ directly, removing the intermediate named re-export files that were just pass-throughs
Extends IconProps from SVGProps<SVGSVGElement>: All standard SVG/HTML attributes are now forwarded via rest props (...props) instead of only supporting size, label, color, and className
Color is no longer applied by default: color prop only sets style when explicitly provided, avoiding unintended style overrides
Additionally, this release includes:
Improves the visual style of the exit icon
Improves the visual style of the method-pickup-3 icon
Improves the sizing and optical alignment of the minus icon
Improves the sizing and optical alignment of the plus icon
Hardens SVGLint enforcement in the build pipeline
Adds 52 new tests to cover React specific use cases
For updated documentation, view icon library
Rename icons for clarity: show-hide → hide, show-hide-2 → show, method-pickup-1 → method-pickup-2, method-pickup-2 → method-pickup-3
New icon added: method-pickup-4
React className prop: All React icon components now forward a className prop to the SVG element, with updated TypeScript types and documentation
For full documentation, view icon library
First release candidate of @kesko/iconography. The API is considered stable, breaking changes are not expected before 1.0.0 unless critical bugs are found
@kesko/iconography ships 346 SVG icons organized across 16 categories, each with a title, category, and searchable tags. Icons follow a strict 24 px grid with <path> only structure and are validated by SVGLint and JSON schema validator
Every icon is available as a tree-shakeable ES module and as a React component with TypeScript declarations
React components support size, label, and color props
Ships with Vitest test suites covering icon structure, React component output, and visual regression tests
For full documentation, view icon library
Adds Skatta Sans Condensed in Regular, Medium, Bold and Black weights. It is a separate display typeface for main headings, not the same as the Bold Narrow and Black Narrow variants of Skatta Sans UI. Read more
Skatta Sans Condensed is opt-in: import condensed.css, condensed.scss or condensed.less in addition to the main stylesheet. fonts.css and @kesko/css don’t include it
No changes since 1.5.0-alpha.0. Every Skatta Sans UI font file and @font-face declaration is unchanged from 1.4.0
Release date 28.10.2026
Adds Skatta Sans Condensed in Regular, Medium, Bold and Black weights. It is a separate display typeface for main headings, not the same as the Bold Narrow and Black Narrow variants of Skatta Sans UI. Read more
Skatta Sans Condensed is opt-in: import condensed.css, condensed.scss or condensed.less in addition to the main stylesheet. fonts.css and @kesko/css don’t include it
Every Skatta Sans UI font file and @font-face declaration is unchanged from 1.4.0
Release date 28.10.2026
Fixes the SkattaSansUI-fallback face, which was declared with local("system-ui"). Only Safari resolves a generic family keyword inside local(), so Chrome and Firefox silently dropped the fallback and its metric overrides, making the layout shift on font swap larger than intended
The fallback is now built on the local Arial instead with support for multiple weights and size-adjust, ascent-override, descent-override and line-gap-override measured against Skatta Sans UI. Read more
Release date 15.10.2026
Maintenance release; no changes to the fonts themselves
Also available on the CDN, which is now ready for production use
Release date 7.10.2026
Adds the --k-font-family shorthand custom property to :root in the CSS, SCSS and LESS stylesheets. It aliases --k-font-family-sans and matches the shorthand @kesko/tokens emits, so standalone consumers can use the same name
Adds repository, homepage and bugs fields to package.json, so npm and other tooling link back to the source and issue tracker
Updates development dependencies to address security advisories. Every font file is unchanged from 1.2.1
For up-to-date documentation and usage guidelines, see Webfonts
Release date 5.10.2026
Maintenance release; no consumer-facing changes. Every font file and @font-face declaration is unchanged from 1.2.0
Release date 20.8.2026
Adds previously missing condensed font variants (font-stretch: condensed; for weights 700 and 900)
Replaces the existing Skatta Sans ttf files with Skatta Sans UI ttf files. The new files are roughly half the previous size (e.g. Black weight 140KB → 83KB)
Adds a visual regression test suite covering all 8 weights × 3 formats to guard against future font drift
For up-to-date documentation and usage guidelines, see Webfonts
Release date 20.5.2026
Readme simplified, full usage docs now live on the webfonts page
Release date 8.5.2026
Adds .ttf font files for better PDF support
For up-to-date documentation and usage guidelines, see Webfonts
Release date 21.4.2026
First stable production release of fonts, v1.0.0, is out! 🎉
Release date 13.4.2026
Fixes the provided var(--k-font-family-sans) helper to use the correct Skatta Sans UI typeface
Release date 7.4.2026
Replaced unhinted font files with TrueType-hinted versions, improving text legibility on low-DPI monitors, particularly on Windows
Added a custom SkattaSansUI-fallback font face with tuned size-adjust and ascent-override metrics to while web fonts load. Read more
Added var(--k-font-family-sans) CSS custom property to :root with the full font stack
All @font-face declarations now include both woff2 and woff formats
Added narrow weights (Black Narrow, Bold Narrow)
First release candidate of @kesko/fonts. The API is considered stable, breaking changes are not expected before 1.0.0 unless critical bugs are found
Added Vitest test suite for @kesko/fonts, covering font file integrity and stylesheet output validation
For full documentation, view Webfonts
First alpha version of @kesko/fonts has been published
@kesko/fonts packages the Skatta Sans UI typeface as ready-to-use @font-face declarations. It ships three stylesheet formats: plain CSS, SCSS, and LESS, alongside the .woff2 and .woff font files, so consuming projects can integrate in whatever way fits their stack
For full documentation, view Webfonts
Maintenance release; no changes to the palette or the helpers
Release date 28.10.2026
The orange palette has been tweaked slightly at the lighter end to better match the Kesko’s brand orange
Adds pinColor() for setting one palette step to an exact hex value while keeping its contrast ratio
For full documentation, view color palette
Release date 22.10.2026
First stable production release of color utilities, v1.0.0, is out! 🎉
No changes since 1.0.0-rc.1
The color palette and the keskoPalette() / keskoTheme() helpers will not change without a new major version
Also available on the CDN, which is now ready for production use
For full documentation, view color palette
Release date 7.10.2026
First release candidate of @kesko/color. The color palette and the keskoPalette() / keskoTheme() helpers are considered stable, so breaking changes are not expected before 1.0.0 unless critical bugs are found
Lowers the contrast ratios of neutral and neutral-dark steps 200–700 to 1.06, 1.12, 1.25, 1.58, 1.96 and 3.01 (were 1.14, 1.36, 1.58, 1.82, 2.49 and 3.54), so the light grays sit closer to the page background and the scale steps up more evenly toward mid-gray
Steps 100 and 800–1200 of both neutral scales and all other color families are unchanged from 1.0.0-beta.6
Fixes keskoTheme() ignoring a value of 0 for lightness, contrast or saturation
Adds TypeScript types, so your editor shows the real types of keskoPalette(), keskoTheme() and the palette exports instead of any
import "@kesko/color" now loads dist/index.js, and every built file is available under @kesko/color/dist/
Breaking change: files in the src/ folder can no longer be imported. Use the built files in dist/ instead
For full documentation, view color palette
Release date 5.10.2026
Maintenance release; no consumer-facing changes
Release date 20.8.2026
Maintenance release; no consumer-facing changes
Release date 8.5.2026
Refines the blue palette with custom contrast ratios for smoother perceptual progression across the 12 steps
For updated documentation, view color palette
Release date 21.4.2026
Renames {color.dark.neutral} to {color.neutral.dark} for better consistency
For updated documentation, view color palette
Release date 10.4.2026
Adds a new neutral-dark color palette for dark mode support
12 contrast steps (100–1200) calculated against a dark background
For updated documentation, view color palette
Release date 10.4.2026
First beta release of @kesko/color! 🎉
All 9 primitive color palettes have been reworked from the ground up, with retuned source colors, updated contrast ratios, and improved perceptual uniformity across the full 100–1200 step range
For updated documentation, view color palette
Release date 10.4.2026
Correctly declare contrast formula options as wcag2 or wcag3.
Adds usage guidelines to the existing color palette page.
Release date 7.4.2026
Adds slight documentation improvements for the color package
Added Vitest test suite for @kesko/color, covering palette structure and output validation
First alpha release of @kesko/color package
@kesko/color is a contrast-based color palette generator that produces 9 color families with 12 steps (100–1200), for a total of 108 primitive colors. All steps are derived from WCAG contrast ratios. Lower steps are lighter, higher steps are darker
Outputs a Style Dictionary-compatible format among others and feeds them directly to @kesko/tokens package
For full documentation, view color palette
No results found. Try a different search term.