Token Generators and ViewComponent 4

Massive Sirius2 week. Three version bumps in one day (0.12.0, 0.12.1, 0.12.2) because things kept landing and I kept wanting them shipped.

ViewComponent 4

The upgrade itself was straightforward. ViewComponent 4 is a clean release with good backwards compatibility. The main breaking change is how collection rendering works, which meant updating a few of the more complex components. But the real value is performance improvements in the rendering pipeline and better support for the component patterns we’ve been using.

Token generators

This is the one I’m most excited about. Until now, our semantic tokens lived in SCSS files that were hand-maintained. Change a token value, update the SCSS, rebuild. It worked, but the SCSS was the source of truth, which meant Ruby code couldn’t access token values without parsing CSS.

Now the tokens are generated from Ruby. The lib/sirius2/theming/ directory has Ruby classes that define every palette color, every semantic mapping, every design token: spacing, borders, shadows, font sizes, the lot. A rake task generates the SCSS from these Ruby definitions.

This means two things. First: the Ruby classes are the single source of truth. Change a color in Ruby, regenerate the SCSS, done. Second: Ruby code can access any token value directly. A component that needs to know the spacing scale can read it from the same place that generates the CSS. The MCP server we’re planning can expose the full token system to AI agents without parsing stylesheets.

Every semantic token also has a searchable index now. Fire up the documentation app, go to the Tokens section, and search for “surface” or “critical” or “shadow.” Every token with its name, value, and what it maps to. Sixty-plus components worth of design decisions, searchable.

Icons split

The icons moved into their own gem, sirius2-icons. This was overdue. The icon sprites (Heroicons, FontAwesome, Octicons) were bloating the main gem, and not every product needs every icon library. Now you declare which icon sets you want in your Gemfile and Sirius2 loads them if they’re available.

The split also forced us to unify icon naming. We had inconsistencies. Some icons were fa-regular-*, others were far-*, some had duplicate method names across libraries. Cleaned all of that up. Every icon now has a default regular style, and the naming is consistent across all three libraries.

FontAwesome 7.1 update came along for the ride. New icons, cleaned up SVGs.

Dockerized documentation

The docs app runs in Docker now. This means anyone on the team can docker compose up and have the full component reference, token search, and icon browser running locally. No need to check out the Sirius2 repo, install dependencies, or configure anything. Just pull the image and go.

We’re up to version 0.12.3 by end of week. Sixty-plus components, a three-layer token architecture, generated tokens with a searchable index, three icon libraries in a separate gem, a dockerized docs app, and HERB templates throughout. Not bad for a design system that started as seven components in January.