Changelog — CSS Export plugin#

2.0.0#

August 6, 2026

Breaking change#

  • Border radius and spacing are no longer read from the kit. The plugin no longer looks for a border radii or spacing collection. There’s no reliable way to map what a corner-radius or spacing value means in a Figma file onto what it should mean in Tailwind/shadcn’s scale — the original idea was that scaling a kit’s spacing values (and having them move together with typography) could drive an entire design scale, but in practice teams don’t work that way: the Tailwind convention is that base spacing values stay fixed, so a scaling system for values nobody scales wasn’t earning its complexity. globals.css now always emits shadcn’s stock --radius: 0.625rem plus the standard derived --radius-sm/md/lg/xl/2xl/3xl/4xl scale, unconditionally and identically to shadcn/ui create output. Spacing tokens are dropped entirely — Tailwind v4’s own --spacing multiplier already covers it. If you relied on the Infer scale from --radius / Infer scale from --spacing settings or the per-step overrides, those are gone; there’s no migration path other than hand-editing the output.

Custom type styles#

  • Custom type styles are now picked up automatically. Add your own type style to the Typography variable collection following the same folder convention as the built-in presets — a group folder with font-size / line-height / letter-spacing / weight children, e.g. overline/font-size — and it now shows up in the CSS export as its own text-* utility, right alongside text-heading-1, text-paragraph-large, etc. Previously only the 12 built-in style names were recognized and anything else was silently dropped. The live preview’s Typography pane also gained a “Custom” section so these new styles are visible there, not just in the exported code. A new Custom type styles checkbox in Setup lets you turn this off and fall back to just the 12 standard styles.
  • Named font-family variants. A font-family variable with an extra qualifier beyond the recognized type — e.g. font-family-monospace-brand — no longer collides with the shared --font-mono. It’s emitted as its own --font-mono-brand and wired to any custom style group whose name contains that same word (e.g. a monospace brand group), so multiple named font families in one kit render distinctly instead of one silently overwriting the others.
  • Named weight variants. A weight variable with an extra qualifier — e.g. heading 1/weight alt — no longer silently overwrites the style’s primary weight. It’s rendered as an additional sibling utility (text-heading-1-alt) instead.
  • Warnings for edited standard styles. If a font-family or weight variant attaches to one of the 12 standard presets rather than a custom style, a warning now surfaces in Setup so you know that standard style’s output includes something beyond its usual shape.

1.5.1#

August 5, 2026

Fixed#

  • theme collection was at risk of leaking into CSS output. The internal/unpublished collection exclusion list now also excludes theme (the kit’s 2.0.0 rename of neutrals, which now also holds other theme-swappable groups like the destructive/error color) — otherwise it would have started emitting that internal collection as CSS custom properties. The legacy neutrals exclusion is kept for kit files that haven’t been renamed yet.

1.5.0#

Security#

  • Better security logic.

1.4.1#

Setup#

  • Reload button. A small refresh icon next to the info button in the Setup tab re-runs getLocalVariableCollectionsAsync() so newly added, renamed, or removed Figma variable modes show up without closing and reopening the plugin. The icon spins until the new data arrives (minimum one full rotation).

Bug fixes#

  • Typography row was mis-described in Setup. The base-shadcn typography row claimed it emitted Tailwind v4 @utility classes (text-heading-1..4, text-paragraph-*, etc.) and was tagged “Obra Extended”. In reality this toggle only emits the --font-sans / --font-heading / --font-mono variables — the utility classes are gated by the separate Typography utilities toggle. Description and example output rewritten to match the actual behavior.
  • Chart colors example was in the wrong order. Real output emits --chart-5 through --chart-1; the inline example was reversed. Now matches the export.
  • Border radii row didn’t point at its setting. Description now references the Infer scale from --radius toggle in Settings → Border radius, so users can find the calc-formula-vs-Figma-values switch from the row.
  • Preview inputs had a dark fill in dark mode. Input, Textarea, Checkbox, and RadioGroup previews carried dark:bg-input/30 from the upstream shadcn defaults. The Obra kit ships transparent input fills in both modes, so the preview’s dark-mode fill has been removed for consistency.

1.4.0#

Syntax highlighting in the Code tab#

Generated CSS (Tailwind / shadcn + Vanilla) and JSON tokens (Design Tokens 1.0 + Style Dictionary) are now syntax-highlighted via Prism. Token colors adapt to Figma’s light or dark chrome automatically. The existing Color-code lines by source collection experimental setting still draws its colored left border on top of the highlight.

Output refinements#

  • Compact DTCG / Style Dictionary color values. The spec’s color object — { "colorSpace": "...", "components": [...], "alpha": ..., "hex": "..." } — is now emitted on a single line instead of wrapping across five, so the JSON files are dramatically shorter and easier to scan.
  • Token group renamed to Design Tokens 1.0 in the Code tab (was “DTCG”), to make the spec link more obvious.

Setup tab refinements#

  • Obra Extended is now opt-in. Shadows and spacing default to disabled — both override scales that can break shadcn components, so they only emit when you explicitly enable them.
  • Better empty state when the open file has no variable collections, or none that match the kit’s expected names. Links straight to the Obra shadcn/ui Pro Community page.
  • Tooltips replace inline body copy on the collection picker and dark-pair indicator, keeping the panel header compact.
  • About tab now states the kit version requirement (1.8.0+) and explains each Code-tab output format up front.

Plugin chrome#

  • Width reduced from 1100 → 980 so the plugin fits more comfortably alongside Figma’s right panel.
  • Native-style checkboxes. Plugin-chrome checkboxes are restyled to match Figma’s own checkbox (filled glyph on the brand color).
  • Copy feedback. The Code tab’s Copy button now shows a “Copied to clipboard” toast.
  • Contact link in the header pre-fills the form’s Feedback category.

1.3.0#

New export formats (Code tab)#

The Code tab is now grouped into three categories with variant switchers:

  • CSS — Tailwind / shadcn (existing shadcn-style globals.css) and a new Vanilla variant: pure :root + .dark with flat --* declarations, no Tailwind directives — drop-in for projects that don’t use Tailwind v4.
  • Fonts — head.html and layout.tsx (Next.js).
  • Tokens — two new outputs:
    • DTCG — W3C Design Tokens Format Module (stable 2025.10): per-leaf $type / $value, object-form colors { colorSpace, components, alpha?, hex }, object-form dimensions { value, unit }, structured shadow sub-values, fontFamily as arrays. Dark variants are emitted as *-dark siblings in the same file.
    • Style Dictionary — same token tree in Style Dictionary’s bare-key value / type form for v3-era starter configs.

Typography & utilities split#

Typography is now generated in two clearly separated parts:

  • Base typography (font-family vars, weight tokens) — emitted whenever the typography collection is enabled, since these are core shadcn tokens.
  • Typography utility classes (text-heading-1, text-paragraph-large, text-caption, text-monospace*, etc.) — opt-in via a separate row in Obra Extended. The original “Include Obra Extended” master toggle is gone; each option is now its own checkbox.

A related experimental setting controls whether utility classes are emitted as @utility text-… blocks (Tailwind v4’s directive form) or as plain .text-… CSS classes.

Trace which collection produced which line (experimental)#

A new Settings → Experimental option, Color-code Code-tab lines by source collection, draws a colored marker next to each row in the Setup tab and a matching colored left-border on every line of the generated CSS so you can trace at a glance which collection produced which output. Same colors used across both panes:

  • Blue — semantic colors
  • Emerald — chart colors
  • Violet — border radii
  • Amber — typography
  • Rose — shadows
  • Cyan — spacing

Kit compatibility (1.8.0 → 1.9.3)#

The plugin now reads both the older 1.8.0 kit and the current 1.9.3 layout without configuration changes:

  • Border radii — both rounded-* (1.8.0) and radius-* (1.8.3+, including the new radius-lg (radius) form) names are accepted via a translation map.
  • Chart colors — parser uses the last /-segment so legacy 1.8.0 paths like categorical/chart 1 match the same way as 1.9.3’s flat chart 1.
  • Font families — bare font-family (renamed from font-family-sans in 1.8.3+) maps to --font-sans. font-family-headings (plural) is still detected.
  • Collection names — semantic colors (1.8.0) and shadcn colors (1.9.3) both map to the same template. Reference / unpublished / absolute collections are auto-excluded by name pattern ((unpublished, (absolute, references, raw color, ---).

Note: 1.8.0’s shadcn-dark mode has card-foreground set to pure black, which causes low-contrast text inside Card components in the dark preview. This is a kit-side data issue and is corrected in 1.9.3 — the plugin emits whatever the kit defines.

Preview enhancements#

The Preview tab now mirrors shadcn’s own demo layout much more closely:

  • Real shadcn components rendered against your tokens — Card, Button, Badge, Input, Textarea, Checkbox, Switch, Slider, RadioGroup, Label, Separator — using the same composition as the official next-app demo.
  • Chart swatches only render when chart-colors is enabled; the rest of the swatch grid scales to match the demo’s proportions.
  • Sub-tabs (Colors / Typography / Radius / Shadows / Spacing) appear only when their tokens are present in the export.
  • New Spacing preview — named scale rendered as bars at their declared widths.
  • Typography preview lists detected fonts with primary family, full stack value, a sample line, and a “Google Fonts” badge for families that auto-load.

1.2.0#

Bug fixes#

  • Charts preview rendered even when chart colors were disabled — the Charts accordion now only appears when --chart-N variables exist in the generated CSS, instead of falling back to neon-green placeholder swatches.
  • Colors/Buttons/Inputs preview rendered without shadcn colors — when the shadcn colors (or fallback semantic colors) collection is disabled, the preview now shows a hint card explaining the requirement instead of unusable neon-green tiles. Charts still render independently below the hint when chart colors are enabled.
  • New monospace text styles weren’t exported — kit 1.9.2+ splits monospace into monospace/regular, monospace/small, and monospace/mini. The plugin now generates text-monospace-regular, text-monospace-small, and text-monospace-mini utilities. Legacy single-style monospaced is still supported for older kits.
  • Google Fonts only loaded in the Typography preview — Colors, Radius, and Shadows previews now also inject the Google Fonts <link> so custom fonts (e.g. Nunito Sans set as --font-sans) render everywhere instead of falling back to system fonts.
  • Google Fonts URL silently dropped fonts with non-default weight axes — the request used :wght@100..900, which Google Fonts rejects for families whose weight axis doesn’t fit (e.g. Nunito Sans is 200..1000). Switched to specific weights (:wght@400;500;600;700) so all common Google Fonts load reliably.

Preview improvements#

  • Monospace preview now renders the same “The quick brown fox…” sample as paragraphs, one per size, with the section open by default.
  • Typography preview includes a small note explaining that fonts depend on what’s available locally and pointing to the head.html snippet in the Code tab for Google Fonts setup.
  • Radius preview includes a note explaining that disabling the border radii collection falls back to shadcn’s default --radius: 0.625rem.
  • Charts accordion placement preserved between Colors and Buttons, matching the original layout.
  • Diagnostic console.log lines added to the preview path so font-loading issues are inspectable from the plugin console (font vars detected, generated link tag, per-iframe injection, and the typography iframe’s actual FontFace statuses).

1.1.0#

Features#

  • Infer radius scale from --radius — new Settings toggle. When enabled, the exported @theme inline block uses shadcn’s canonical calc(var(--radius) * …) formulas for radius-sm through radius-4xl instead of per-step Figma values, matching shadcn’s default output. --radius still comes from the kit (or falls back to 10px / 0.625rem). Off by default so existing exports are unchanged.
  • Support 1.8.3 border-radius naming — the plugin reads older rounded-* variables, radius-* with a bare radius base, and current naming where the base is merged into radius-lg (radius). radius-4xl is now included. Plugin keeps working for any kit version.

1.0.0#

Initial release.