@lessly/tokens
v0.14.0
Published
Lessly design tokens — theme CSS variables, Tailwind preset, brand fonts, DTCG JSON
Readme
@lepsto/tokens
Lepsto design tokens: theme CSS variables, a Tailwind preset, self-hosted brand fonts, and the DTCG JSON sources. Generated from the Lepsto design system — the single source of truth for every visual value.
What's inside
| File | What it is |
|-------------------------|-------------------------------------------------------------------------|
| theme.css | CSS variables — dark on :root, .light override, shadcn bridge |
| fonts.css + fonts/ | @font-face rules and woff2 files (Inter, Sora, Fira Mono) |
| tailwind-preset.js | Tailwind preset with the Lepsto token vocabulary |
| tokens/*.json | DTCG sources (primitives.json, semantic.json) for tooling |
Install
pnpm add @lepsto/tokensThis package was published as @lessly/tokens before. Every release still ships under both names, at the same version and with the same content; only the npm description differs. Switch to @lepsto/tokens; the old name will be retired later.
Quick start
Import the CSS once in your global stylesheet:
@import "@lepsto/tokens/theme.css";
@import "@lepsto/tokens/fonts.css";Add the preset to your Tailwind config. It carries no content and no plugins — set both yourself:
// tailwind.config.cjs (Tailwind 3)
module.exports = {
presets: [require("@lepsto/tokens/tailwind-preset")],
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
};With Tailwind 4, point @config at a JS config that uses the preset:
@import "tailwindcss";
@import "@lepsto/tokens/theme.css";
@import "@lepsto/tokens/fonts.css";
@config "./tailwind.config.cjs";Then use the token classes — bg-bg-brand, text-text-primary, duration-ui — with no local color values.
Type is not a class. Compose a text-style role from its --text-<role>-* variables (font-family, font-size, line-height, font-weight, letter-spacing, plus text-transform on overline) in CSS or an inline style. brand-tokens.md lists every role and its variables.
Dark and light
Dark is the default theme (:root). Light switches on with the light class on any element:
<html class="light">For a light-default site, put light on the root. For a dark section inside a light page, scope light to the light regions and leave the dark section outside any light ancestor.
Font licenses
The bundled fonts are licensed under the SIL Open Font License 1.1. Each family ships its license text as fonts/<family>/OFL.txt:
- Inter — Copyright 2020 The Inter Project Authors
- Sora — Copyright 2019 The Sora Project Authors
- Fira Mono — Copyright 2012-2013 The Mozilla Corporation and Telefonica S.A.