feat(fuselage-tokens)!: Rework the token build and its output formats

[tassoevan]

Proposed changes (including videos or screenshots)

Reworks how @rocket.chat/fuselage-tokens is built and what it publishes.

The legacy build-design-tokens tool is gone — Style Dictionary is now the only token build, and every artifact is generated from src/ into dist/. Sources were reorganized (src/colors/*.json, src/breakpoints.json, src/typography.json, src/border.json) and tokens now carry explicit types.

New tokens. A border category exposes radius (none, default, small, medium, large, extra-large, full) and width (none, default, medium, large). @rocket.chat/fuselage reads them, so the borderRadius and borderWidth styling props now accept those keywords; borderRadius returns rem rather than px.

Every artifact now lives under dist/. The root-level colors.*, breakpoints.* and typography.* entry points are gone. Only .json and .scss are emitted — the .js and .mjs bundles are no longer built or published.

-const colors = require('@rocket.chat/fuselage-tokens/colors.js');
+const colors = require('@rocket.chat/fuselage-tokens/dist/colors.json');

JSON shapes changed.

• breakpoints.json is an object keyed by breakpoint name instead of an array, and the redundant name field is gone.
• typography.json renames fontFamilies to fontFamily and fontScales to fontScale.
• The semantic categories (badge, button, font, shadow, status, statusBullet, stroke, surface) no longer repeat the category as a top-level key: badge.json is now { light, high-contrast, dark } rather than { badge: { light, … } }.

SCSS shapes changed. Each category exports a single flat map with quoted kebab-case keys, and lengths are converted to rem:

-@use '~@rocket.chat/fuselage-tokens/breakpoints.scss';
-$w: map.get(map.get(breakpoints.$breakpoints, md), min-viewport-width);
+@use '~@rocket.chat/fuselage-tokens/dist/breakpoints.scss';
+$w: map.get(breakpoints.$breakpoints, 'md-min-viewport-width');

typography.scss replaces $font-families and $font-scales with a single $typography map.

Color values changed. Hex values are now lowercase, and n300 is #ebecef rather than #eeeff1 — the SCSS palette already used that value, so neutral-300 had been inconsistent between Theme.ts and the stylesheets. It now agrees.

Issue(s)

Further comments

Why the root entry points had to go. They were briefly symlinks into dist/, which looks fine in the monorepo — yarn symlinks the whole workspace directory, so @rocket.chat/fuselage-tokens/colors.json resolves and everything builds green. But npm drops symlinks when packing, so those files never reach the published tarball despite being declared in files. Verified with a real npm pack, not just --dry-run: the symlink is absent from the archive while an equivalent regular file survives. Since yarn release runs changeset publish, which shells out to npm, this would have shipped a package whose advertised entry points 404 for every consumer installing from the registry. Removing them and pointing everything at dist/ makes the manifest match what actually ships.

This is a breaking move for already-built consumers. The test run demonstrated it: layout and onboarding-ui initially failed with Cannot find module '@rocket.chat/fuselage-tokens/colors.json' from stale logo/dist and layout/dist artifacts compiled against the old path. Rebuilding those packages resolved it. Downstream consumers will need the same.

Verification. tsc --noEmit reports zero src/ errors across fuselage, layout, logo, onboarding-ui and fuselage-hooks; fuselage builds under webpack; tests pass for fuselage-hooks (139), layout (24), logo (2), fuselage-forms (42) and onboarding-ui (34).

Known failure. fuselage's Contextualbar.spec.tsx fails 4 snapshots (477/481 tests pass) — generated class hashes only. It reproduces on the branch point without any of the entry-point changes, so the snapshot is stale relative to this branch's token changes rather than a regression from them. Left untouched here; happy to regenerate it if reviewers prefer it fixed in this PR.

Release. The changeset covers six packages: fuselage-tokens and fuselage as minor (breaking, per this repo's 0.x convention), and fuselage-hooks, layout, logo and onboarding-ui as patch.

[changeset-bot]

🦋 Changeset detected

Latest commit: 58bb207

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@rocket.chat/fuselage-tokens	Minor
@rocket.chat/fuselage	Minor
@rocket.chat/fuselage-hooks	Patch
@rocket.chat/layout	Patch
@rocket.chat/logo	Patch
@rocket.chat/onboarding-ui	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR