Sidebar colors and tooltip

[Pbotsaris]

Hey guys – thanks for the great work!

I noticed that mix salad.init is not generating the css variables and related tailwind.colors.json config for some classes required by the sidebar component.

{
  ...

   "sidebar": {
      "background": "hsl(var(--sidebar-background))",
      "foreground": "hsl(var(--sidebar-foreground))",
      "primary": "hsl(var(--sidebar-primary))",
      "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
      "accent": "hsl(var(--sidebar-accent))",
      "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
      "border": "hsl(var(--sidebar-border))",
      "ring": "hsl(var(--sidebar-ring))"
   }
}

I may be missing something, but I noticed that the tooltip for sidebar_menu_button does not appear when setting its display to block, as shown here:

salad_ui/lib/salad_ui/sidebar.ex

Line 530 in 2364f9f

<.tooltip class="block">

Additionally, when the sidebar is collapsed, the overflow: hidden and overflow-auto style applied to the parent container seems to prevent the tooltip from being visible in collapsed mode when the tooltip would be the most useful:

salad_ui/lib/salad_ui/sidebar.ex

Line 334 in 2364f9f

"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",

[bluzky]

thanks @Pbotsaris, I'll add the css to the generator.

Regarding to

Additionally, when the sidebar is collapsed, the overflow: hidden and overflow-auto style applied to the parent container seems to prevent the tooltip from being visible in collapsed mode

It's the limitation of pure css approach, I'm working to add JS hook for better accessibility in v1