@irozon/design-tokens
Irozon's brand design tokens — plain CSS custom properties. No JavaScript,
no build step: brand primitives, semantic color roles, light/dark themes,
typography, spacing, radius, elevation, and motion, expressed as --
variables any CSS can consume.
Status: early
0.xrelease. The public API (file names, token names, values) may still change between minor versions until1.0.0. See Versioning below.
Installation
npm install @irozon/design-tokensCSS import
Most consumers want the complete bundle:
@import "@irozon/design-tokens";
/* or, equivalently: */
@import "@irozon/design-tokens/tokens.css";This works as written in Vite and webpack, and in any CSS pipeline
configured to resolve packages from node_modules via their exports
map. Not every CSS tool does this by default — postcss-import's
default resolver, for one, does not follow exports maps — so check
your pipeline rather than assuming it works everywhere.
Individual token files are also available, for a consumer that only wants one concern:
@import "@irozon/design-tokens/typography.css";
@import "@irozon/design-tokens/spacing.css";
@import "@irozon/design-tokens/motion.css";See exports for the complete list — one file per
concern: primitives, semantic, themes, typography, spacing,
radius, elevation, motion.
No bundler? A bare specifier can't resolve in a plain <link> with no
build step. Point the tag at the file directly instead — from a CDN once
this package is published (e.g.
https://unpkg.com/@irozon/design-tokens/src/tokens.css), or from your
own copy of the file.
What's inside
Tokens are layered — later files override the subset the earlier ones define for a given context:
primitives Raw brand colors (Green, Lime, Ink, White) — fixed constants,
never themed, never redefined downstream.
semantic Role-based tokens (--color-surface, --color-text-primary,
--color-action-primary, --color-focus, --color-error, …) —
consume these, not primitives, from component/product CSS.
themes Overrides the subset of semantic/elevation tokens that
differ in dark mode.
typography Font family, scale, weight tokens.
spacing The 8px-based spacing scale.
radius The corner-radius scale.
elevation The shadow scale.
motion Duration and easing tokens.Theme
Dark mode is selected by a data-theme attribute on <html>, with a
prefers-color-scheme fallback for visitors who haven't chosen explicitly:
<html data-theme="dark">
<html data-theme="light">
<html> <!-- no attribute: follows the OS's prefers-color-scheme -->Nothing else is required — every semantic token re-resolves automatically
once data-theme changes, since it's plain CSS cascade, not JavaScript.
Versioning
This package follows SemVer, applied deliberately during 0.x:
0.1.0 initial public release
0.1.1 compatible bug fix (a token value correction, not a rename)
0.2.0 additive/new API (a new token, a new file) — still 0.x, so a
minor bump is allowed to include changes a 1.x release would
require a major bump forA breaking change (a token renamed or removed) will not happen in a patch release, even pre-1.0.
Part of the Irozon Design System
BRAND PRIMITIVES → SEMANTIC TOKENS → THEMES → COMPONENTS → PRODUCTSThis package is the tokens layer. @irozon/design-system
builds the canonical iz-* components on top of it.
License
MIT Irozon AB