registry CSS: `@theme` maps to four-dash variable names, so every `--color-chart-*` token resolves empty

[slyjic]

Summary

The CSS the registry appends to globals.css maps its Tailwind @theme entries to variable names with four leading dashes, while the variables themselves are defined with two. Nothing defines a four-dash property, so every one of these @theme mappings resolves to nothing.

Installed via:

npx shadcn@latest add @bklit/line-chart @bklit/area-chart @bklit/bar-chart \
  @bklit/composed-chart @bklit/funnel-chart @bklit/gauge-chart @bklit/ring-chart \
  @bklit/heatmap-chart @bklit/live-line-chart @bklit/radar-chart \
  @bklit/legend @bklit/grid @bklit/reference-area

shadcn CLI 4.21.0 · Next 15.5.18 · Tailwind 4 (CSS-first, tailwind.config: "") · React 19.2.4

What lands

@theme {
  --color-chart-scale-05:  var(----chart-scale-05);   /* four dashes */
  --color-chart-grid:      var(----chart-grid);
  --color-chart-label:     var(----chart-label);
  --color-legend:          var(----legend);
  /* …26 mappings in total */
}

.dark {
  --chart-grid:  oklch(0.25 0 0);    /* two dashes — this is what exists */
  --chart-label: oklch(0.75 0.01 260);
}

grep -c 'var(----' app/globals.css → 26
grep -c '^\s*----' app/globals.css → 0

Repro

1. Install any chart from the registry into a Tailwind 4 project.
2. Render it.
3. In the console:

getComputedStyle(document.querySelector('[data-left-pane]')).getPropertyValue('--color-chart-grid')
// → ""   (empty, both themes)

getComputedStyle(document.querySelector('[data-left-pane]')).getPropertyValue('--chart-grid')
// → "oklch(0.25 0 0)"   (the two-dash one is fine)

Effect

Any component using the Tailwind utilities generated from those tokens — text-chart-label, text-chart-tooltip-foreground, text-legend-foreground, bg-chart-* — gets no colour. Components that reference var(--chart-grid) directly are unaffected, which is why this is easy to miss: the charts still look mostly right.

Grep over the installed set shows both styles in use, so the breakage is partial:

10  var(--chart-grid)          ← works
10  text-chart-label           ← resolves to nothing
 5  text-chart-tooltip-foreground
 2  text-legend-foreground

Suggested fix

Emit two dashes in the @theme mappings:

- --color-chart-grid: var(----chart-grid);
+ --color-chart-grid: var(--chart-grid);

Secondary, same file

The light values are written to a bare :root. Projects whose light theme is :root, .light (so a light subtree can nest inside a dark page) will have a nested .light subtree inherit the dark chart tokens, because only .dark redefines them. Emitting to :root, .light would make it safe either way.