v3.0.5

Text renamed to Typography (breaking), color tokens refactored to unprefixed source variables, Checkbox + Radio border fixes, and a new CLI docs page.

Patch release: Text is renamed to Typography to resolve a tailwind-merge collision that silently dropped variant classes. Derived color tokens (hover, soft, border-secondary, …) moved from @theme inline aliases into variables.css as unprefixed source tokens, so component CSS can reference them directly. Plus Checkbox and Radio border alignment fixes, an accent-soft-foreground hover refinement for Calendar, and a new CLI docs page.

⚠️ Breaking change: Text → Typography. The BEM block changes from text to typography (e.g. text--body-sm → typography--body-sm).

Installation

Update to the latest version:

1npm i @lenso/tokens@latest @lenso/ui@latest

⚠️ Breaking Changes

Text → Typography

The component shipped in v3.0.4 used text-* BEM modifiers, which collide with Tailwind's text-* utility family. tailwind-variants runs tailwind-merge on every variant composition and dedupes text--body-sm, text--color-muted, text--weight-normal to a single class — silently dropping the others.

Renaming the block to typography permanently fixes the collision (#6505, closes #6497).

Before:

1import {Text} from "@lenso/ui";2
3<Text type="body-sm" color="muted" weight="medium">4  Hello world5</Text>;

After:

1import {Typography} from "@lenso/ui";2
3<Typography type="body-sm" color="muted" weight="medium">4  Hello world5</Typography>;

Sub-components rename the same way:

CSS BEM classes change too: .text → .typography, .text--body-sm → .typography--body-sm, etc. See the Typography docs for the full class reference.

1"use client";2// Adapted from HeroUI v3.2.6 (Apache-2.0).3import { Typography } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const scale = [6  { label: "h1", meta: "36px / 600 / 1.11 / tight", sample: "Build better interfaces", type: "h1" },7  {8    label: "h2",9    meta: "30px / 600 / 1.17 / tight",10    sample: "Built for the intelligence age",11    type: "h2",12  },13  { label: "h3", meta: "24px / 600 / 1.25 / tight", sample: "Pricing on your terms", type: "h3" },14  {15    label: "h4",16    meta: "20px / 600 / 1.33 / tight",17    sample: "Apply to the startup program",18    type: "h4",19  },20  { label: "h5", meta: "18px / 600 / 1.39 / tight", sample: "Card titles", type: "h5" },21  { label: "h6", meta: "16px / 600 / 1.50 / tight", sample: "Smaller feature headers", type: "h6" },22  {23    label: "body",24    meta: "16px / 400 / 1.75",25    sample: "Primary body text used across documentation, marketing copy, and descriptions.",26    type: "body",27  },28  {29    label: "body-sm",30    meta: "14px / 400 / 1.50",31    sample: "Secondary body, table cells, navigation, and sidebar items.",32    type: "body-sm",33  },34  {35    label: "body-xs",36    meta: "12px / 400 / 1.25",37    sample: "Captions, badges, helper text, and fine print.",38    type: "body-xs",39  },40  { label: "code", meta: "14px / mono", sample: "pnpm add @lenso/ui", type: "code" },41] as const;42const styles = stylex.create({43  column: { display: "flex", width: "100%", flexDirection: "column" },44  row: {45    display: "grid",46    gridTemplateColumns: "160px 1fr",47    alignItems: "center",48    gap: 32,49    paddingBlock: 20,50    borderBlockEndWidth: { default: 1, ":last-child": 0 },51    borderBlockEndStyle: "solid",52    borderBlockEndColor: "var(--border)",53  },54  caption: { display: "flex", flexShrink: 0, flexDirection: "column", gap: 2 },55  label: { fontSize: 14, lineHeight: "20px", fontWeight: 600, color: "var(--foreground)" },56  meta: { fontSize: 12, lineHeight: "16px", whiteSpace: "nowrap", color: "var(--muted)" },57});58export function TypographyScale() {59  return (60    <div {...stylex.props(styles.column)}>61      {scale.map((row) => (62        <div key={row.label} {...stylex.props(styles.row)}>63          <div {...stylex.props(styles.caption)}>64            <span {...stylex.props(styles.label)}>{row.label}</span>65            <span {...stylex.props(styles.meta)}>{row.meta}</span>66          </div>67          <Typography type={row.type}>{row.sample}</Typography>68        </div>69      ))}70    </div>71  );72}73export default TypographyScale;

Style Refactor

Unprefixed source color tokens

All derived color tokens — *-hover, *-soft, *-soft-foreground, border-secondary, etc. — moved from @theme inline aliases in theme.css into variables.css as unprefixed source variables, and 24 component CSS files now reference source tokens directly (#6499).

1. color-mix formulas moved from theme.css to variables.css

Before — the calculation lived inside the @theme inline block:

1/* packages/styles/themes/shared/theme.css */2--color-accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);3--color-accent-soft: var(--accent-soft, color-mix(in oklab, var(--accent) 15%, transparent));4--color-accent-soft-foreground: var(--accent-soft-foreground, var(--accent));5--color-border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);

After — theme.css is pure aliases; the formulas live in variables.css:

1/* packages/styles/themes/default/variables.css */2--accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);3--accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);4--accent-soft-foreground: var(--accent);5--border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);6
7/* packages/styles/themes/shared/theme.css */8--color-accent-hover: var(--accent-hover);9--color-accent-soft: var(--accent-soft);10--color-accent-soft-foreground: var(--accent-soft-foreground);11--color-border-secondary: var(--border-secondary);

2. Component CSS uses source tokens directly

Before — var(--color-*) references everywhere:

1/* packages/styles/components/button.css */2.button--primary {3  --button-bg: var(--color-accent);4  --button-bg-hover: var(--color-accent-hover);5  --button-fg: var(--color-accent-foreground);6}7
8.button--secondary {9  --button-bg: var(--color-default);10  --button-bg-hover: var(--color-default-hover);11  --button-fg: var(--color-accent-soft-foreground);12}

After — unprefixed source tokens:

1/* packages/styles/components/button.css */2.button--primary {3  --button-bg: var(--accent);4  --button-bg-hover: var(--accent-hover);5  --button-fg: var(--accent-foreground);6}7
8.button--secondary {9  --button-bg: var(--default);10  --button-bg-hover: var(--default-hover);11  --button-fg: var(--accent-soft-foreground);12}

The @theme inline block still exposes every --color-* Tailwind utility as an alias, so user-land class usage (bg-accent, text-accent, …) is unaffected.

3. Theme builder consolidated

Three derived-token helpers (getAccentDerivedVariables, getSemanticDerivedVariables, getFieldDerivedVariables) collapsed into a single getDerivedColorVariables() that emits the full unprefixed set, including the darkenForSoftForeground logic that keeps soft-foreground text readable on light accent themes.

Style Fixes

• Calendar / Range Calendar: default day-cell hover now uses accent-soft-foreground instead of accent, so hovered cells stay legible on light accent themes. The docs search tag selected state was aligned the same way (#6500).
• Checkbox: .checkbox__control now carries the same border, border-field-border, and [border-width:var(--border-width-field)] base styling that .radio__control already used, with border-color added to the transition list (#6521).
• Radio: .radio__control default border now uses border-field-border instead of the generic Tailwind border color, matching Input, Select, TextArea, and NumberField (#6522).

Docs

CLI page

New CLI docs page covers installation, init, install, upgrade, uninstall, list, doctor, and env with example outputs (#6498).

Dependencies

Bumped across packages (#6529):

• react / react-dom: 19.2.3 → 19.2.6
• @types/react: 19.2.7 → 19.2.14
• next (docs): 16.1.1 → 16.2.6
• CI actions: actions/checkout@v6, actions/setup-node@v6, actions/cache@v5, pnpm/action-setup@v6

Links

• Component Docs
• Figma Kit V3
• GitHub Repository
• GitHub PR #6503

Contributors

Thanks to everyone who contributed to this release!