Changelog

This is the release where the theme stopped being a handful of recipes and became a library. Two dozen new components landed — the full form surface, overlays, navigation, and data entry — all built from the same composable recipe primitives you already use. If you were waiting for Styleframe to cover a real application's UI, it now does.

New

• The complete form set. Checkbox, Radio, Select (with multi-select chips), Textarea, Switch, Slider, ColorPicker, Calendar, and an OTP input all arrived, each with matching Field and Group variants where it makes sense. You can now build an entire form without leaving the theme.
• Field grouping, unified. A new FieldGroup recipe consolidates how fields, labels, and errors sit together, so every input in a form shares one layout contract instead of each recipe reinventing it.
• Overlays and navigation. Drawer, ContextMenu, Tabs, Accordion, Toggle, and a 16-part Sidebar recipe give you the structural pieces an app shell needs — built on shared overlay and menu-surface builders so they behave consistently.
• Avatars. Avatar and AvatarGroup round out the display components.

Improved

• Dark mode is theme-driven. The dark modifier no longer keys off a media query — it reads from the theme, so you control when dark styles apply instead of the browser deciding for you.
• Modals can go fullscreen. A new fullscreen variant on the modal recipes covers immersive flows and mobile sheets.

Fixed

• Soft and subtle variants now use gray-50 instead of gray-100, lightening their resting surface for better contrast against content.

Everything in this release is about what reaches the browser and how fast it gets there. Styleframe now shortens utility class names at build time, drops recipes you never use, and builds on a faster toolchain. Smaller stylesheets, shorter builds — no change to how you write.

Improved

• Class names shrink at build time. The transpiler rewrites long utility class names to compact ones during the build, so your production CSS and markup carry less weight for the same styles.
• Unused recipes fall away. Recipe-level tree-shaking means a recipe you register but never render no longer contributes CSS. You pay only for the components you actually use.
• Dynamic utilities from the scanner. The scanner now creates utilities on the fly for CSS properties it doesn't already have a match for, so uncommon properties still get first-class utility classes.
• A faster toolchain. The build moved from Vite 7 to Vite 8 with Rolldown and oxc, cutting build time across the monorepo.

New

• A Figma round-trip. New styleframe figma export and styleframe figma import CLI commands move design tokens between Figma and your codebase, with more robust token handling.
• The chat-message recipe. A first AI-chat building block, with avatar, content, and actions sub-parts.

Fixed

• styleframe init now scaffolds projects against the current ^3.0.0 package versions instead of the stale ^2.0.0 range.

Typography got simpler and builds got leaner. Fluid and static font sizes used to be two separate concerns; now they share one composable. And Styleframe now tracks which variables and utilities your code references, so it can leave out the ones you never touch.

Improved

• Fluid and static sizes, unified. useFontSizeDesignTokens now covers both fluid and fixed font sizes, so you reach for one composable instead of choosing between two systems that did nearly the same thing.
• Purging that knows what you use. A new _usage collection records the variables and utilities your styles reference, giving the engine the information it needs to drop the rest.

New

• Named prop types. The transpiler exports named Props types from virtual:styleframe, so you can import a recipe's prop types by name and type your components against them directly.
• A persistent framework switcher. The docs sidebar now remembers whether you read examples in Vue, React, or Vanilla — pick once and every page follows.

Design tokens are only useful if they can leave your codebase and come back. This release adds a dedicated package for the Design Tokens Community Group (DTCG) format — the standard other tools speak — so your tokens are portable, not locked in.

New

• The @styleframe/dtcg package. Tokens can now be read from and written to the standard DTCG JSON format, which is how Figma and other design tools exchange them. The CLI and Figma flows were refactored to route through it.
• Layout and navigation recipes. Media (with figure, body, and title parts), Breadcrumb, Pagination, and a multi-part Page Hero recipe joined the set.

Improved

• Variable reference tracking. The engine now records which variables reference which, in root._usage.variables, laying the groundwork for smarter purging and dependency-aware output.

Breaking

• styleframe figma import is now styleframe dtcg import. Importing tokens is a format concern, not a Figma one — the command name now says so. Update any scripts that call the old name.

You shouldn't have to set up a project to see what Styleframe does. This release adds an in-browser playground where you can write config and watch the CSS and rendered output update live — and restructures the docs around it.

New

• An interactive playground. Write Styleframe config in the browser and see the generated styles immediately. It ships with a viewport toggle, refresh, open-in-tab actions, and Card and Button samples to start from.
• More recipes. Input (with outline, soft, and ghost variants), Dropdown (item, separator, label, and arrow parts), and a Hamburger Menu recipe with seven animations landed.

Improved

• Docs split into sections. The documentation is now organized into sections with a sticky sub-header, so the navigation stays oriented as pages grow.
• Fluid typography in the preset. The design-tokens preset now includes fluid typography out of the box.

Fixed

• The sidebar navigation remounts on section change, so category groups expand correctly instead of showing stale open state.
• The mobile hamburger menu flattens grouped navigation so nested items are reachable.

This release is a burst of components. Card, Modal, Tooltip, Skeleton, Progress, Popover, Chip, and more all arrived at once, and the recipe API gained a few conveniences that make declaring them less verbose.

New

• A dozen-plus recipes. Card (with per-part borders that collapse on adjacency), Modal (overlay, header, body, footer), Tooltip, Skeleton, Progress, Popover, Chip, Nav, ButtonGroup, and Placeholder joined the theme.
• Light, dark, and neutral colors were added to the Badge and Button recipes.

Improved

• Boolean variant props. Recipe variants can now be declared as booleans, so an on/off variant reads as a flag instead of a string value.
• Class names for compound variants. Compound variants can carry their own class names, giving you a hook to target specific variant combinations.
• Auto-sized story previews. The StoryPreview component sizes its iframe height from the Storybook content, so demos no longer clip or leave gaps.

Breaking

• danger is now error. The semantic color was renamed to match the convention the rest of the palette follows. Rename any danger references to error.
• The Alert recipe was renamed to Callout.

Design tokens should be obvious. This release flattens the preset so tokens are easier to find, retunes the color palette for accessibility, and renames the concept that governs how light or dark a color is.

Improved

• A flatter token preset. The design-tokens preset was flattened and its variable composables renamed, so tokens sit closer to the surface and read more directly.
• An accessible palette. The color palette was updated for accessibility, and swatches now show their hex values so you can see exactly what you're picking.

Breaking

• colorLightness is now colorLevel. "Level" describes the step in a color scale more plainly than "lightness" did. The rename runs across the theme, docs, and Storybook — update any references.

Components are only part of a design system — the base elements and the reset underneath them matter too. This release lets you style raw HTML elements, normalize the browser's defaults, and write utilities and variables in more natural ways.

New

• A global element preset. New composables style HTML elements directly — headings, links, lists, and the rest — so your base typography and element styles come from the same system as your components.
• A sanitize.css preset. A configurable normalization layer smooths over browser default differences, opt-in and tunable rather than all-or-nothing.
• Custom utility syntax. You can define your own utility naming, with class-name generation separated out so the syntax is yours to shape. A shorthand preset ships alongside it.
• Inline variable notation. Reference variables as @variablename directly inside CSS template literals, with at-rules and variables auto-resolved.
• New tokens. Z-index and duration design tokens arrived, the latter wired into transitions, and a 768px md breakpoint closes the gap that sat between the smaller and larger breakpoints.

Improved

• Selective HMR. An importree-based hot-module-reload path invalidates only the caches that changed, so edits update faster during development.
• Selector and variable traversal gained id-based lookup and parent-child relationships, giving the engine a real graph to walk.

Fixed

• Element design-token variables are now scoped to selector callbacks, so dark mode applies to them correctly.

Utilities are more useful when they can respond to state. This release adds modifier composables — hover, focus, and the rest — that register themselves automatically, so a utility can carry a pseudo-state without extra wiring.

New

• Utility modifier composables. Modifiers auto-register, so pairing a utility with a state like hover or focus works out of the box.

Improved

• Stable class names for whitespace values. Utility class names for whitespace values are now hash-based, keeping them consistent and collision-free.

Under the hood

• A comprehensive end-to-end test suite now guards the engine's behavior across real builds.

Version 3 changes the shape of a Styleframe project. Instead of threading an instance through your code, there is now one global instance, and a scanner that reads your markup to decide which utilities to generate. This is the foundation the rest of the 3.x line builds on.

New

• A global Styleframe instance. You no longer pass an instance around — it's global, so authoring styles is more direct.
• The scanner, integrated. The scanner algorithm is now part of the pipeline, collecting the utilities your markup actually uses.
• The recipe factory. The Badge recipe arrived on a new createUseRecipe factory — the pattern every later recipe follows.

Notes

This is a major version. Expect to adjust how you initialize Styleframe; the global instance replaces the per-project instance you passed explicitly in 2.x.

Design tokens live in two places: your code and your design tool. This release builds the bridge between them with a Figma plugin, and splits the scanner into its own package.

New

• A Figma plugin. Import and export Styleframe variables directly between Figma and your codebase, keeping tokens in sync on both sides.
• The @styleframe/scanner package. The scanner became a standalone package, ready to be reused outside the core build.

Improved

• Multipliers on spacing utilities. Spacing utilities now accept multipliers, so you can scale a spacing step without defining a new token for every value.

Fixed

• Hot-module-reload for virtual imports in the plugin now updates correctly during development.

A new project should look good before you write a single token. This release ships a default design-tokens preset so you start with a complete set of colors, spacing, and typography, and tidies a couple of names that had drifted.

New

• A default design-tokens preset. New projects start with a full set of tokens instead of an empty palette.

Breaking

• ?recipe is now ?ts. The import query for recipes was renamed, and named selector exports are now supported.
• useUtilities is now useUtilitiesPreset. The name now says it registers a preset, matching the other preset composables.

Improved

• Theme variable defaults were extracted to a centralized values folder, so the source of every default is in one place.

This release rounds out the day-to-day toolkit. There's a Storybook layer for seeing the theme in isolation, a batch of premade utilities so you don't start from zero, and the directional spacing helpers you reach for constantly.

New

• A Storybook layer. Preview theme tokens and components in Storybook, with dedicated stories for the design tokens.
• Premade utility functions. A set of ready-made utilities, plus useUtilities to register every utility factory at once.
• Directional spacing. padding-x, padding-y, margin-x, and margin-y utilities cover the axis-based spacing you use most.
• The useEasing composable for animation timing functions.

Fixed

• CSS selector escaping now covers a wider range of arbitrary values.
• Nuxt plugin types were corrected.

Recipes need a place to live at runtime, distinct from the build-time engine. This release adds that package and sharpens its types.

New

• The @styleframe/runtime package provides the runtime home for recipes.

Improved

• Recipe runtime typing was improved, so recipes carry more precise types where you consume them.

Two quality-of-life changes: the packages now sit as peer dependencies so your project controls their versions, and variable names stopped being fussy about notation.

Improved

• Packages as peer dependencies. Styleframe packages are peer dependencies now, so your app owns a single resolved version of each instead of nested copies.
• Interchangeable variable notation. Dot notation and double-dash notation are now interchangeable in variable names — write whichever reads better; both resolve the same.

New

• Sitemap support and a fluid responsive design demo landed in the docs.

Fixed

• Utilities no longer emit a spurious default keyword.

Version 2 is the foundation the modern Styleframe stands on. The build moved to a faster toolchain, the plugin gained real Vite support through unplugin, and the pieces that make it a shippable product — licensing, overview docs, integration tests — came together.

New

• A unplugin instance with dedicated Vite support, so Styleframe integrates cleanly with the Vite-based tools most projects use.
• A license system. License files, activation, and checking arrived, including automatic install of @styleframe/pro through the CLI.
• Overview documentation across the site, giving each area a clear entry point.

Improved

• A Rolldown-based build. The build system moved to rolldown-vite, cutting build times.
• Generic records in createUseVariable, broadening what a variable composable can hold.
• End-to-end integration testing now guards releases.

Notes

This is a major version and the base of the current line. If you're on 1.x, treat this as a fresh start rather than a drop-in upgrade.

The beginning. Styleframe 1.0 is the first public release — a styling engine that lets you write your design system in TypeScript, with variables, selectors, and utilities as composable, type-safe building blocks. Everything in the releases above grows from this.

New

• The Styleframe engine. Define variables, selectors, and utilities in TypeScript and generate CSS from them, with types that follow your tokens all the way through.
• The CLI. Scaffold and build a Styleframe project from the command line.

Welcome to Styleframe.