codexly-ui 0.0.95 → 0.0.96

package/fesm2022/codexly-ui.mjs

@@ -11468,7 +11468,7 @@ class ClxAppLayoutComponent {
         const isOverlay = isDesktopCollapsed && hovered;
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
-            'bg-slate-900 overflow-hidden shrink-0',
+            'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
             'transition-[width,transform] duration-300 ease-in-out',
             isOverlay ? 'shadow-2xl' : '',
             'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
@@ -11696,7 +11696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
 const NAV_ITEM_L1 = 'px-6 py-3';
 const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
-const NAV_ITEM_IDLE = 'text-slate-400';
+const NAV_ITEM_IDLE = 'text-clx-text-subtle';
 // ── Children container ─────────────────────────────────────────────────────────
 const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
 const NAV_CHILDREN_INNER = 'overflow-hidden';
@@ -11744,7 +11744,7 @@ class ClxMenuItemComponent {
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11757,7 +11757,7 @@ class ClxMenuItemComponent {
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11782,7 +11782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [class]="rla.isActive ? _activeCls() : _idleCls()"
         [title]="collapsed() ? label() : ''">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -11795,7 +11795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         [title]="collapsed() ? label() : ''"
         (click)="itemClick.emit()">
         @if (icon()) {
-          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-slate-500'"></span>
+          <span clx-icon [name]="icon()" size="sm" [class]="active() ? _iconCls() : 'text-clx-text-subtle'"></span>
         }
         @if (!collapsed()) {
           <span class="flex-1 text-left truncate">{{ label() }}</span>
@@ -12005,10 +12005,10 @@ class ClxNavGroupComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
       </span>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
@@ -12020,10 +12020,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     standalone: true,
                     template: `
     @if (!collapsed()) {
-      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none">{{ label() }}</span>
+      <span class="block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-clx-text-subtle select-none">{{ label() }}</span>
     } @else {
       <span class="flex items-center justify-center w-full py-3">
-        <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
+        <span class="w-1.5 h-1.5 rounded-full bg-clx-border"></span>
       </span>
     }
   `,