1.3.1 ✓ Stable, can be used in production
Removes the unused
svgpathdev dependencyRemoves the unused
normalize-viewbox.cjsscript that the build no longer usesReadme slimmed down, full usage docs now live on the icons page
Release date 8.5.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 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 GitHub readme (public docs coming soon).
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 GitHub readme (public docs coming soon)
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; 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
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; 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 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.