@stevederico/skateboard-ui 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+2.9.0
+
+  Improve dark mode sidebar contrast
+  Update Header text size
+  Remove brand hover state
+  Reduce brand padding
+  Add brand text shrink
+  Remove nav bold on active
+  Use smaller nav buttons
+
 2.8.0
 
   Add content area border

package/layout/Header.jsx

@@ -26,7 +26,7 @@ function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className
         {...props}
       >
         <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-          <h1 className="text-base font-medium">{title}</h1>
+          <h1 className="text-lg font-medium">{title}</h1>
           <div className="ml-auto flex items-center gap-2">
             {typeof buttonTitle !== "undefined" && (
               <Button

package/layout/Layout.jsx

@@ -47,7 +47,7 @@ export default function Layout({ children }) {
           '--header-height': '3.5rem',
         }}>
         {showSidebar && <Sidebar variant="inset" />}
-        <SidebarInset className={`border border-border ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
+        <SidebarInset className={`border border-border/50 ${constants.hideSidebarInsetRounding ? "md:peer-data-[variant=inset]:rounded-none" : ""}`}>
           <Outlet />
         </SidebarInset>
       </SidebarProvider>

package/layout/Sidebar.jsx

@@ -42,13 +42,14 @@ export default function Sidebar({ variant = "inset", ...props }) {
     <SidebarRoot collapsible="icon" variant={variant} {...props}>
       {/* Header: App icon + name */}
       {!constants.hideSidebarHeader && (
-        <SidebarHeader>
+        <SidebarHeader className="px-1">
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton
                 size="lg"
                 onClick={() => navigate("/app")}
                 tooltip={constants.appName}
+                className="hover:bg-transparent active:bg-transparent"
               >
                 <div className="bg-app dark:border rounded-lg flex aspect-square size-8 items-center justify-center">
                   <DynamicIcon
@@ -58,7 +59,7 @@ export default function Sidebar({ variant = "inset", ...props }) {
                     strokeWidth={2}
                   />
                 </div>
-                <span className="font-semibold text-lg truncate">
+                <span className="font-semibold text-lg shrink min-w-0 truncate">
                   {constants.appName}
                 </span>
               </SidebarMenuButton>
@@ -79,14 +80,16 @@ export default function Sidebar({ variant = "inset", ...props }) {
                     <SidebarMenuButton
                       isActive={isActive}
                       tooltip={item.title}
+                      size="sm"
+                      className="data-active:font-normal"
                       onClick={() =>
                         navigate(`/app/${item.url.toLowerCase()}`)
                       }
                     >
                       <DynamicIcon
                         name={item.icon}
-                        size={18}
-                        strokeWidth={1.5}
+                        size={20}
+                        strokeWidth={2}
                       />
                       <span>{item.title}</span>
                     </SidebarMenuButton>
@@ -105,9 +108,11 @@ export default function Sidebar({ variant = "inset", ...props }) {
             <SidebarMenuButton
               isActive={location.pathname.toLowerCase().includes("settings")}
               tooltip="Settings"
+              size="sm"
+              className="data-active:font-normal"
               onClick={() => navigate("/app/settings")}
             >
-              <Settings size={18} strokeWidth={1.5} />
+              <Settings size={20} strokeWidth={2} />
               <span>Settings</span>
             </SidebarMenuButton>
           </SidebarMenuItem>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "2.8.0",
+  "version": "2.9.0",
   "type": "module",
   "exports": {
     "./Sidebar": {

package/shadcn/ui/sidebar.jsx

@@ -26,7 +26,7 @@ import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = "14rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
@@ -307,7 +307,7 @@ function SidebarHeader({
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("gap-2 p-2 flex flex-col", className)}
+      className={cn("gap-2 px-2 pb-2 flex flex-col", className)}
       {...props} />
   );
 }
@@ -457,9 +457,9 @@ const sidebarMenuButtonVariants = cva(
         outline: "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        default: "h-10 text-base",
+        sm: "h-8 text-sm",
+        lg: "h-14 text-base group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {

package/styles.css

@@ -40,7 +40,7 @@
   --sidebar-foreground: oklch(0.145 0 0);
   --sidebar-primary: oklch(0.205 0 0);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.96 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
@@ -72,11 +72,11 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.15 0 0);
+  --sidebar: oklch(0.18 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.25 0 0);
+  --sidebar-accent: oklch(0.22 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.35 0 0);
   --sidebar-ring: oklch(0.439 0 0);
@@ -109,11 +109,11 @@
     --chart-3: oklch(0.769 0.188 70.08);
     --chart-4: oklch(0.627 0.265 303.9);
     --chart-5: oklch(0.645 0.246 16.439);
-    --sidebar: oklch(0.15 0 0);
+    --sidebar: oklch(0.18 0 0);
     --sidebar-foreground: oklch(0.985 0 0);
     --sidebar-primary: oklch(0.488 0.243 264.376);
     --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.25 0 0);
+    --sidebar-accent: oklch(0.22 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(0.35 0 0);
     --sidebar-ring: oklch(0.439 0 0);

package/views/SettingsView.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { getState } from '../core/Context.jsx';
 import { useTheme } from 'next-themes';
 import { Sun, Moon } from 'lucide-react';
+import Header from '../layout/Header.jsx';
 import { Avatar, AvatarFallback } from '../shadcn/ui/avatar.jsx';
 import { Badge } from '../shadcn/ui/badge.jsx';
 import { Button } from '../shadcn/ui/button.jsx';
@@ -59,13 +60,11 @@ export default function SettingsView() {
 
   return (
     <div className="flex-1">
-      {/* Header */}
-      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
-        <h1 className="text-base font-medium">Settings</h1>
+      <Header title="Settings">
         <Button variant="ghost" size="icon" onClick={() => setTheme(isDarkMode ? 'light' : 'dark')} aria-label="Toggle dark mode">
-          {isDarkMode ? <Sun size={16} /> : <Moon size={16} />}
+          {isDarkMode ? <Sun size={20} /> : <Moon size={20} />}
         </Button>
-      </div>
+      </Header>
 
       {/* Main content */}
       <div className="flex flex-col items-center p-4 gap-4">