Midwest Component Library v0.24.0

Previews

No matching results.

🧱 v0.23.4 — Design Tokens & Tailwind v4

This release lays foundational plumbing for the theming work ahead. It introduces the Design Token System — a tokens.css source of truth parsed by a new Midwest::Tokens Ruby API, exposed through a get_design_tokens MCP tool and a tokens:export CLI. It also upgrades the styling engine to Tailwind CSS v4, moving to a CSS-first configuration that fixes a v3 cascade-layer corruption bug and drops the JavaScript tailwind.config.js / postcss.config.js. No breaking API changes to component options — a couple of behaviors shift with the v4 move (noted below).

What's New

Design Token System — Midwest::Tokens

Midwest's spacing, radius, elevation, motion, typography, z-index, and breakpoint values now live in a single tokens.css (@layer midwest.tokens) that is the single source of truth. A new Midwest::Tokens Ruby module parses that CSS at read time, so the Ruby values can never drift from what the stylesheet actually ships — the same pattern Midwest::Theme uses for color-system.css. Colors delegate straight to Midwest::Theme.

Midwest::Tokens.categories          # => [:spacing, :radius, :elevation, :motion, :typography, :z_index, :breakpoints]
Midwest::Tokens.get(:spacing, "4")  # => the resolved spacing value
Midwest::Tokens.spacing             # => the full spacing scale
Midwest::Tokens.colors              # => theme colors, via Midwest::Theme
Midwest::Tokens.all                 # => the complete token tree
Midwest::Tokens.to_json             # export the tree as JSON
Midwest::Tokens.to_css              # export as CSS custom properties
Midwest::Tokens.to_scss             # export as SCSS variables

See the new Design Tokens guide for the full token reference.

get_design_tokens MCP tool

The MCP server gains a get_design_tokens tool that returns the full token tree (colors, spacing, typography, shadows, motion), optionally scoped to a single category. It reads through Midwest::Tokens, so AI assistants get the exact values the gem renders.

tokens:export CLI

The midwest_mcp executable now doubles as a token exporter, kept dependency-light so it stays fast (it does not boot the full server stack):

midwest_mcp tokens:export --format json   # default
midwest_mcp tokens:export --format css
midwest_mcp tokens:export --format scss

Use it to sync Midwest's tokens into a design tool, a Style Dictionary pipeline, or another app's stylesheet.

What Changed

Tailwind CSS v4

The styling engine is upgraded from Tailwind v3 to v4. Configuration is now CSS-first (@theme / @custom-variant / @source) compiled with Lightning CSS. This fixes a long-standing v3 cascade-layer corruption bug in the compiled output. The build no longer passes --content globs — content sources are declared with @source directly in the stylesheet, so bin/rails midwest:css:build is simpler.

If you consume Midwest's color scales in your own Tailwind markup, v4 apps should import the new CSS theme file (v3 apps keep using the legacy tailwind.theme.js):

@import "tailwindcss";
@import "@unabridged/midwest/config/tailwind.theme.css";

This maps Midwest's --*-channels custom properties into Tailwind's theme, keeping element- and section-scoped theming (.theme-teal, bg-theme-6/50) working. Keep linking the compiled midwest stylesheet — the theme file only maps channels, it doesn't ship the values.

PopoverComponent — anchors to its toggler by default

anchored_to: now defaults to nil. With no value, the popover positions against its toggler through the Popover API's implicit anchor (the popovertarget button), so nothing needs wiring. Pass anchored_to: (the anchor-name of an element you've marked with anchor-name: --<value>) only when you need to anchor to a specific element — the date/time pickers and autocomplete do this for their trigger inputs. The removed anchored_to? alias is no longer needed since the anchored class is always applied.

AvatarComponent — presence dots re-themed for v4

Presence states now map to named theme scales (online → green, offline → gray, away → yellow, busy → red) via a presence_theme applied as a theme-* class on the dot. This keeps the presence indicator colored correctly under Tailwind v4, where @apply can't consume a named-theme class directly.

What Was Removed

  • config/tailwind.config.js and postcss.config.js — removed. Tailwind v4's CSS-first configuration replaces both; the JS config/tailwind.theme.js remains for v3 consumers.
  • tailwindcss v3 npm devDependency — dropped from package.json in favor of the v4 CLI via bundle exec tailwindcss.

Dev Process

  • Docs — new Design Tokens guide documenting the token categories and the Midwest::Tokens API.
  • Tests — new suites for Midwest::Tokens, the midwest_mcp CLI, and the get_design_tokens MCP tool; updated PopoverComponent coverage for the new anchoring defaults.
  • Build — the midwest:css:build rake task drops its --content glob list (Tailwind v4 reads @source from the stylesheet); npm css:build scripts now run bundle exec tailwindcss without a config flag.
  • Gemfiles — all appraisal gemfiles (Rails 7/8, Bridgetown 1/2) and lockfiles updated for the Tailwind v4 toolchain.