@lessly/tokens
v0.3.1
Published
Lessly design tokens — theme CSS variables, Tailwind preset, brand fonts, DTCG JSON
Downloads
643
Readme
@lessly/tokens
Lessly design tokens: theme CSS variables, a Tailwind preset, self-hosted brand fonts, and the DTCG JSON sources. Generated from the Lessly 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, Instrument Serif, Fira Mono) |
| tailwind-preset.js | Tailwind preset with the Lessly token vocabulary |
| tokens/*.json | DTCG sources (primitives.json, semantic.json) for tooling |
Install
pnpm add @lessly/tokensQuick start
Import the CSS once in your global stylesheet:
@import "@lessly/tokens/theme.css";
@import "@lessly/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("@lessly/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 "@lessly/tokens/theme.css";
@import "@lessly/tokens/fonts.css";
@config "./tailwind.config.cjs";Then use the token classes — bg-bg-brand, text-text-primary, text-h1, duration-ui — with no local color values.
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
- Instrument Serif — Copyright 2022 The Instrument Serif Project Authors
- Fira Mono — Copyright 2012-2013 The Mozilla Corporation and Telefonica S.A.