Dashboard theming: `--radius` token has no effect — radius scale is hardcoded to 0.2rem via `@theme inline`

[kevmtt]

Describe the bug

The Dashboard theming docs state that --radius is the "Base border radius" — the single token that controls all corner roundness. In practice --radius (and any radius override passed via vendureDashboardPlugin({ theme })) has no effect on the rounded-* utilities. Every corner is locked to 0.2rem regardless of the theme.

Root cause

packages/dashboard/vite/vite-plugin-theme.ts → generateThemeInlineBlock() emits the radius scale into a Tailwind v4 @theme inline block, sourced from @vendure-io/design-tokens:

// vite-plugin-theme.ts
const radiusLines = Object.entries(radii).map(([key, value]) => `    --radius-${key}: ${value};`);
// ...
return `@theme inline {\n${allLines.join('\n')}\n}`;

Two compounding problems:

1. @theme inline bakes literals into the utilities. Because the block uses the inline keyword, Tailwind substitutes the resolved value directly into each utility instead of emitting a var() reference. The compiled CSS is:

   .rounded-lg { border-radius: .2rem }   /* literal — not var(--radius-lg) */
   .rounded-md { border-radius: .2rem }

   So overriding --radius (or even --radius-md) at :root / .dark — which is exactly and only what the theme option does — can never change the utilities. --radius ends up in :root but nothing consumes it.

2. In @vendure-io/design-tokens, every radius size is hardcoded to 0.2rem (sm/md/lg/xl/2xl/3xl/4xl are all 0.2rem in radii), and darkTheme defines no radius key at all. So even the lg/xl utilities are visually identical to sm, and there is no single base value the scale derives from.

Net effect: the documented --radius token is dead with respect to corner roundness.

To Reproduce

1. Scaffold a dashboard and pass a radius override:

   vendureDashboardPlugin({
     vendureConfigPath: '...',
     theme: { light: { radius: '1rem' }, dark: { radius: '1rem' } },
   })

2. Build the dashboard and inspect the emitted CSS, or open the UI.
3. Cards/buttons/inputs still render at 0.2rem. The compiled CSS contains .rounded-lg{border-radius:.2rem} and an unused --radius:1rem in :root.

Expected behavior

Setting --radius (via the theme option) changes the corner roundness across the dashboard, as the theming docs describe — i.e. the rounded-* scale derives from --radius (the standard shadcn ladder), e.g.:

  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

Actual behavior

All corners are fixed at 0.2rem; --radius has no visible effect. The radius part of the theme option is silently inert.

Suggested fix

Make the radius scale derive from --radius so the documented token actually drives roundness. Either:

• Emit the --radius-* entries as var(--radius) / calc(var(--radius) ± Npx) expressions (referencing the runtime --radius) instead of inlined literals, and/or move the radius tokens out of the @theme inline block so utilities reference the variable rather than baking in a literal; and
• Define radii in @vendure-io/design-tokens as a calc ladder off a single base radius, and give darkTheme a radius key.

Workaround (for anyone hitting this): add a Vite plugin before vendureDashboardPlugin that appends an overriding @theme inline block re-deriving --radius-* from var(--radius). It must run before the dashboard's Tailwind plugin so Tailwind compiles it; a later @theme declaration wins, restoring variable-driven utilities.

Screenshots/Videos

n/a (CSS output included above).

Environment (please complete the following information):

• @vendure/dashboard version: 3.6.3 (mechanism unchanged on main — see packages/dashboard/vite/vite-plugin-theme.ts, generateThemeInlineBlock)
• @vendure-io/design-tokens version: as bundled with 3.6.3 (radii all 0.2rem)
• Nodejs version: 22
• Reference: theming docs — https://docs.vendure.io/guides/extending-the-dashboard/theming/

[kevmtt]

My workaround:

//vite.config.mts


function radiusScaleFix(): Plugin {
  return {
    name: 'vendure:radius-scale-fix',
    enforce: 'pre',
    transform(code, id) {
      if (!id.endsWith('styles.css')) return null;
      return (
        code +
        `\n@theme inline {
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}\n`
      );
    },
  };
}

export default defineConfig({
  base: '/dashboard/',
  build: {
    outDir,
  },
  plugins: [
    // Must run before @vendure/dashboard's Tailwind plugin so our overriding
    // @theme block is compiled by Tailwind (not passed through as raw CSS).
    radiusScaleFix(),
//...
}