@k3-tech/react-kit 0.0.65 → 0.0.67

package/dist/kit/themes/minimal-modern.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -146,7 +146,6 @@
     --tracking-tight: -.025em;
     --tracking-normal: 0em;
     --tracking-wide: .025em;
-    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -797,6 +796,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -833,6 +836,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2102,6 +2109,10 @@
     background-color: var(--color-bg);
   }
 
+  .bg-\[\#30A4A1\] {
+    background-color: #30a4a1;
+  }
+
   .bg-accent {
     background-color: var(--accent);
   }
@@ -2248,17 +2259,7 @@
     background-color: var(--popover);
   }
 
-  .bg-primary, .bg-primary\/10 {
-    background-color: var(--primary);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-primary\/10 {
-      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-  }
-
-  .bg-primary\/20 {
+  .bg-primary, .bg-primary\/20 {
     background-color: var(--primary);
   }
 
@@ -2284,6 +2285,16 @@
     background-color: var(--sidebar-border);
   }
 
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
+    background-color: var(--sidebar-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-sidebar-primary\/10 {
+      background-color: color-mix(in oklab, var(--sidebar-primary) 10%, transparent);
+    }
+  }
+
   .bg-teal-50 {
     background-color: var(--color-teal-50);
   }
@@ -2308,6 +2319,16 @@
     background-color: var(--color-white);
   }
 
+  .bg-white\/20 {
+    background-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/20 {
+      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
   .fill-current {
     fill: currentColor;
   }
@@ -2504,22 +2525,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2579,6 +2588,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2623,6 +2636,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2633,11 +2651,6 @@
     letter-spacing: var(--tracking-wide);
   }
 
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
-
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2655,6 +2668,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
@@ -2733,6 +2750,14 @@
     }
   }
 
+  .text-sidebar-primary {
+    color: var(--sidebar-primary);
+  }
+
+  .text-sidebar-primary-foreground {
+    color: var(--sidebar-primary-foreground);
+  }
+
   .text-teal-600 {
     color: var(--color-teal-600);
   }
@@ -3843,14 +3868,14 @@
     }
   }
 
-  .data-\[active\=true\]\:bg-primary[data-active="true"] {
-    background-color: var(--primary);
-  }
-
   .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
     background-color: var(--sidebar-accent);
   }
 
+  .data-\[active\=true\]\:bg-sidebar-primary[data-active="true"] {
+    background-color: var(--sidebar-primary);
+  }
+
   .data-\[active\=true\]\:font-medium[data-active="true"] {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -3860,14 +3885,14 @@
     color: var(--accent-foreground);
   }
 
-  .data-\[active\=true\]\:text-primary-foreground[data-active="true"] {
-    color: var(--primary-foreground);
-  }
-
   .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
     color: var(--sidebar-accent-foreground);
   }
 
+  .data-\[active\=true\]\:text-sidebar-primary-foreground[data-active="true"] {
+    color: var(--sidebar-primary-foreground);
+  }
+
   .data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/dist/kit/themes/spotify.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
@@ -146,7 +146,6 @@
     --tracking-tight: -.025em;
     --tracking-normal: 0em;
     --tracking-wide: .025em;
-    --tracking-wider: .05em;
     --tracking-widest: .1em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -797,6 +796,10 @@
     margin-bottom: calc(var(--spacing) * 1);
   }
 
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -833,6 +836,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-\[18px\] {
+    margin-left: 18px;
+  }
+
   .ml-auto {
     margin-left: auto;
   }
@@ -2102,6 +2109,10 @@
     background-color: var(--color-bg);
   }
 
+  .bg-\[\#30A4A1\] {
+    background-color: #30a4a1;
+  }
+
   .bg-accent {
     background-color: var(--accent);
   }
@@ -2248,17 +2259,7 @@
     background-color: var(--popover);
   }
 
-  .bg-primary, .bg-primary\/10 {
-    background-color: var(--primary);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .bg-primary\/10 {
-      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-  }
-
-  .bg-primary\/20 {
+  .bg-primary, .bg-primary\/20 {
     background-color: var(--primary);
   }
 
@@ -2284,6 +2285,16 @@
     background-color: var(--sidebar-border);
   }
 
+  .bg-sidebar-primary, .bg-sidebar-primary\/10 {
+    background-color: var(--sidebar-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-sidebar-primary\/10 {
+      background-color: color-mix(in oklab, var(--sidebar-primary) 10%, transparent);
+    }
+  }
+
   .bg-teal-50 {
     background-color: var(--color-teal-50);
   }
@@ -2308,6 +2319,16 @@
     background-color: var(--color-white);
   }
 
+  .bg-white\/20 {
+    background-color: #fff3;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/20 {
+      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+
   .fill-current {
     fill: currentColor;
   }
@@ -2504,22 +2525,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
-  .pl-6 {
-    padding-left: calc(var(--spacing) * 6);
-  }
-
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
 
-  .pl-10 {
-    padding-left: calc(var(--spacing) * 10);
-  }
-
-  .pl-14 {
-    padding-left: calc(var(--spacing) * 14);
-  }
-
   .text-center {
     text-align: center;
   }
@@ -2579,6 +2588,10 @@
     font-size: .8rem;
   }
 
+  .text-\[10\.5px\] {
+    font-size: 10.5px;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2623,6 +2636,11 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-\[0\.14em\] {
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+  }
+
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
@@ -2633,11 +2651,6 @@
     letter-spacing: var(--tracking-wide);
   }
 
-  .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
-  }
-
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2655,6 +2668,10 @@
     white-space: nowrap;
   }
 
+  .text-\[\#9CA3AF\] {
+    color: #9ca3af;
+  }
+
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
@@ -2733,6 +2750,14 @@
     }
   }
 
+  .text-sidebar-primary {
+    color: var(--sidebar-primary);
+  }
+
+  .text-sidebar-primary-foreground {
+    color: var(--sidebar-primary-foreground);
+  }
+
   .text-teal-600 {
     color: var(--color-teal-600);
   }
@@ -3843,14 +3868,14 @@
     }
   }
 
-  .data-\[active\=true\]\:bg-primary[data-active="true"] {
-    background-color: var(--primary);
-  }
-
   .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] {
     background-color: var(--sidebar-accent);
   }
 
+  .data-\[active\=true\]\:bg-sidebar-primary[data-active="true"] {
+    background-color: var(--sidebar-primary);
+  }
+
   .data-\[active\=true\]\:font-medium[data-active="true"] {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -3860,14 +3885,14 @@
     color: var(--accent-foreground);
   }
 
-  .data-\[active\=true\]\:text-primary-foreground[data-active="true"] {
-    color: var(--primary-foreground);
-  }
-
   .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] {
     color: var(--sidebar-accent-foreground);
   }
 
+  .data-\[active\=true\]\:text-sidebar-primary-foreground[data-active="true"] {
+    color: var(--sidebar-primary-foreground);
+  }
+
   .data-\[active\=true\]\:ring-\[3px\][data-active="true"] {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

package/dist/shadcn/ui/form.d.ts

@@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import * as React from 'react';
 import type * as LabelPrimitive from '@radix-ui/react-label';
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => import("react").JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;

package/dist/shadcn/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/shadcn/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,sNAAe,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYrE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYlD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAiBnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,kDAkBtE;AAED,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/shadcn/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AAKzB,QAAA,MAAM,IAAI,4MAAe,CAAC;AAa1B,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,4CAMtC,CAAC;AAEF,QAAA,MAAM,YAAY;;;;;;;;;;;CAqBjB,CAAC;AAUF,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAYrE;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAYlD;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,2CAiBnE;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW1E;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,kDAkBtE;AAED,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,GACV,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k3-tech/react-kit",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -92,4 +92,4 @@
     "tailwindcss": "^4.1.12",
     "tw-animate-css": "^1.3.7"
   }
-}
+}

package/src/kit/layouts/admin/components/AdminLayout.tsx

@@ -89,13 +89,20 @@ function AdminLayoutContent({
     const isOpen =
       openMap[item.id] ?? (hasChildren && hasActiveDescendant(item));
 
-    const indentClassMap = ['', 'pl-6', 'pl-10', 'pl-14'] as const;
-    const indent = indentClassMap[Math.min(level, 3)];
+    // Nesting indentation is provided by the bordered <ul> wrapper around each
+    // child group (see below), so individual rows need no extra left padding.
+    const indent = '';
+
+    // When a row is active its background is the (teal) sidebar-primary, so
+    // icon + label must flip to the contrasting foreground to stay readable.
+    const activeText = isActive
+      ? 'text-sidebar-primary-foreground'
+      : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground';
 
     const content = (
       <SidebarMenuItem
         key={item.id}
-        className={`mb-1 ${level > 0 ? 'ml-1' : ''}`}
+        className="mb-1"
       >
         <SidebarMenuButton
           asChild={!!item.url && !hasChildren}
@@ -105,22 +112,24 @@ function AdminLayoutContent({
             if (hasChildren) setOpen(item.id);
           }}
           disabled={item.disabled}
-          className={`group relative overflow-hidden rounded-lg transition-all duration-200 hover:bg-sidebar-accent/70 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground ${indent}`}
+          className={`group relative overflow-hidden rounded-lg transition-all duration-200 hover:bg-sidebar-accent/70 data-[active=true]:bg-sidebar-primary data-[active=true]:text-sidebar-primary-foreground ${indent}`}
         >
           {item.url && !hasChildren ? (
             <Link to={item.url} className="flex items-center gap-3 px-3">
               {item.icon && (
                 <item.icon
-                  className={`h-4 w-4 transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}
+                  className={`h-4 w-4 transition-colors ${activeText}`}
                 />
               )}
               <span
-                className={`font-medium transition-colors ${isActive ? 'text-primary-foreground' : 'text-sidebar-foreground group-hover:text-sidebar-accent-foreground'}`}
+                className={`font-medium transition-colors ${activeText}`}
               >
                 {item.title}
               </span>
               {item.badge && (
-                <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                <span
+                  className={`ml-auto text-xs px-2 py-0.5 rounded-full ${isActive ? 'bg-white/20 text-sidebar-primary-foreground' : 'bg-sidebar-primary/10 text-sidebar-primary'}`}
+                >
                   {item.badge}
                 </span>
               )}
@@ -129,28 +138,36 @@ function AdminLayoutContent({
             <div className="flex items-center gap-3 px-3 py-2.5 w-full">
               {hasChildren &&
                 (isOpen ? (
-                  <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                  <ChevronDown
+                    className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
+                  />
                 ) : (
-                  <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                  <ChevronRight
+                    className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
+                  />
                 ))}
               {item.icon ? (
-                <item.icon className="h-4 w-4 text-sidebar-foreground group-hover:text-sidebar-accent-foreground" />
+                <item.icon className={`h-4 w-4 ${activeText}`} />
               ) : (
-                <FallbackIcon className="h-3.5 w-3.5 text-muted-foreground" />
+                <FallbackIcon
+                  className={`h-3.5 w-3.5 ${isActive ? 'text-sidebar-primary-foreground' : 'text-muted-foreground'}`}
+                />
               )}
               {item.url ? (
                 <Link to={item.url} className="flex-1 text-left">
-                  <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground">
+                  <span className={`font-medium ${activeText}`}>
                     {item.title}
                   </span>
                 </Link>
               ) : (
-                <span className="font-medium text-sidebar-foreground group-hover:text-sidebar-accent-foreground flex-1">
+                <span className={`font-medium ${activeText} flex-1`}>
                   {item.title}
                 </span>
               )}
               {item.badge && (
-                <span className="ml-auto text-xs bg-primary/10 text-primary px-2 py-0.5 rounded-full">
+                <span
+                  className={`ml-auto text-xs px-2 py-0.5 rounded-full ${isActive ? 'bg-white/20 text-sidebar-primary-foreground' : 'bg-sidebar-primary/10 text-sidebar-primary'}`}
+                >
                   {item.badge}
                 </span>
               )}
@@ -162,7 +179,7 @@ function AdminLayoutContent({
           // (rendered as <li>) children don't end up as direct descendants of
           // a <div> inside another <li> — that's invalid HTML and triggers a
           // React hydration warning.
-          <ul className="mt-1 flex flex-col list-none p-0 m-0">
+          <ul className="mt-1 ml-[18px] flex flex-col list-none border-l border-sidebar-border pl-2 py-0.5 m-0">
             {(item.children ?? []).map((child: AdminMenuItem) =>
               renderItem(child, Math.min(level + 1, 3)),
             )}
@@ -186,7 +203,7 @@ function AdminLayoutContent({
           ) : (
             <div className="sidebar-header-content flex items-center justify-center px-4 py-3">
               <div className="flex items-center gap-2">
-                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <SidebarHeaderIcon className="h-4 w-4" />
                 </div>
                 <span className="font-semibold text-sidebar-foreground">
@@ -200,7 +217,7 @@ function AdminLayoutContent({
           {sidebarGroups.map((group, idx) => (
             <Fragment key={group.id}>
               <SidebarGroup>
-                <SidebarGroupLabel className="text-xs font-semibold text-muted-foreground uppercase tracking-wider px-3 mb-2 group-data-[collapsible=icon]:hidden">
+                <SidebarGroupLabel className="text-[10.5px] font-semibold text-[#9CA3AF] uppercase tracking-[0.14em] px-3 pt-2 mb-1.5 group-data-[collapsible=icon]:hidden">
                   {group.label}
                 </SidebarGroupLabel>
                 <SidebarGroupContent>

package/src/kit/themes/default.css

@@ -8,19 +8,23 @@
   --card-foreground: oklch(0.1408 0.0044 285.8229);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.1408 0.0044 285.8229);
-  --primary: oklch(0.5234 0.1347 144.1672);
+  /* Design system: primary button = blue (--c-blue-600 #1976F2) */
+  --primary: #1976f2;
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.9674 0.0013 286.3752);
   --secondary-foreground: oklch(0.1408 0.0044 285.8229);
   --muted: oklch(0.9674 0.0013 286.3752);
   --muted-foreground: oklch(0.5517 0.0138 285.9385);
-  --accent: oklch(0.9571 0.021 147.636);
-  --accent-foreground: oklch(0.4254 0.1159 144.3078);
-  --destructive: oklch(0.6368 0.2078 25.3313);
+  /* Design system: subtle highlight/accent = teal (--c-teal-100 / --c-teal-700) */
+  --accent: #e0f2f1;
+  --accent-foreground: #0d9488;
+  /* Design system: danger = red (--c-red-600 #E84C3D) */
+  --destructive: #e84c3d;
   --destructive-foreground: oklch(1 0 0);
-  --border: oklch(0.9197 0.004 286.3202);
+  /* Design system: border = --c-line #E5E7EB */
+  --border: #e5e7eb;
   --input: oklch(1 0 0);
-  --ring: oklch(0.5234 0.1347 144.1672);
+  --ring: #1976f2;
   --chart-1: oklch(0.5234 0.1347 144.1672);
   --chart-2: oklch(0.6731 0.1624 144.2083);
   --chart-3: oklch(0.6423 0.1467 133.0145);
@@ -28,12 +32,13 @@
   --chart-5: oklch(0.8253 0.1181 129.0007);
   --sidebar: oklch(0.9851 0 0);
   --sidebar-foreground: oklch(0.5517 0.0138 285.9385);
-  --sidebar-primary: oklch(0.5234 0.1347 144.1672);
+  /* Design system: active sidebar/menu item = teal-700 (.sb-item.active) */
+  --sidebar-primary: #0d9488;
   --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.9571 0.021 147.636);
-  --sidebar-accent-foreground: oklch(0.4254 0.1159 144.3078);
-  --sidebar-border: oklch(0.9197 0.004 286.3202);
-  --sidebar-ring: oklch(0.5234 0.1347 144.1672);
+  --sidebar-accent: #e0f2f1;
+  --sidebar-accent-foreground: #0d9488;
+  --sidebar-border: #e5e7eb;
+  --sidebar-ring: #0d9488;
   --radius: 0.5rem;
   --shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.03);
   --shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.03);
@@ -69,19 +74,19 @@
   --card-foreground: oklch(0.9851 0 0);
   --popover: oklch(0.2103 0.0059 285.8852);
   --popover-foreground: oklch(0.9851 0 0);
-  --primary: oklch(0.6731 0.1624 144.2083);
-  --primary-foreground: oklch(0.1982 0.0381 143.9727);
+  --primary: #2196f3;
+  --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.2739 0.0055 286.0326);
   --secondary-foreground: oklch(0.9851 0 0);
   --muted: oklch(0.2739 0.0055 286.0326);
   --muted-foreground: oklch(0.7118 0.0129 286.0665);
-  --accent: oklch(0.3438 0.0368 161.9104);
-  --accent-foreground: oklch(0.8353 0.0266 175.4266);
-  --destructive: oklch(0.3958 0.1331 25.723);
+  --accent: #134e4a;
+  --accent-foreground: #5eead4;
+  --destructive: #e84c3d;
   --destructive-foreground: oklch(0.9478 0.023 17.5647);
   --border: oklch(0.2739 0.0055 286.0326);
   --input: oklch(0.2739 0.0055 286.0326);
-  --ring: oklch(0.6731 0.1624 144.2083);
+  --ring: #2196f3;
   --chart-1: oklch(0.6731 0.1624 144.2083);
   --chart-2: oklch(0.7536 0.1626 130.5022);
   --chart-3: oklch(0.8555 0.1766 114.846);
@@ -89,12 +94,12 @@
   --chart-5: oklch(0.7703 0.1741 64.0539);
   --sidebar: oklch(0.2103 0.0059 285.8852);
   --sidebar-foreground: oklch(0.7118 0.0129 286.0665);
-  --sidebar-primary: oklch(0.6731 0.1624 144.2083);
-  --sidebar-primary-foreground: oklch(0.1982 0.0381 143.9727);
-  --sidebar-accent: oklch(0.3438 0.0368 161.9104);
-  --sidebar-accent-foreground: oklch(0.8353 0.0266 175.4266);
+  --sidebar-primary: #0d9488;
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: #134e4a;
+  --sidebar-accent-foreground: #5eead4;
   --sidebar-border: oklch(0.2739 0.0055 286.0326);
-  --sidebar-ring: oklch(0.6731 0.1624 144.2083);
+  --sidebar-ring: #0d9488;
   --radius: 0.5rem;
   --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.05);

package/src/shadcn/ui/table.tsx

@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
     <th
       data-slot="table-head"
       className={cn(
-        'bg-primary text-white h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'bg-[#30A4A1] text-white h-10 px-2 text-left align-middle font-bold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className,
       )}
       {...props}