New Sidebar CSS variables not generated by theming page

[Coronon]

Change Type

Addition

Proposed Changes

The new CSS variables introduced in the Svelte 5 version (--sidebar-*) are not generated when customizing themes on the themes site.

Currently, these variables are completely omitted from the output, resulting in an incomplete app.css. These variables are only introduced when running the project init or migration tool.

While the docs on the Sidebar component mention these extra variables and the reasoning behind their separation, they should probably still adhere to the basic coloring scheme or at least be included by the generator :)

[PaperPrototype]

Was about to report the same issue when I found this. Here is what is missing and what I had to add for the latest tailwindcss version to work:

@import "tailwindcss";

@config '../tailwind.config.ts';

@layer base {
  :root {
    /* existing properties omitted */

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    /* existing properties omitted */

    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[skaldebane]

Yep, just noticed this today. It's a bit annoying having to copy/paste colors over to these.

As an aside, is there any reason the sidebar doesn't already use the existing base colors?

[AdrianGonz97]

This should be resolved as of [email protected].