codexly-ui 0.18.3 → 0.19.1

package/assets/styles/_theme.css

@@ -41,13 +41,15 @@
   --clx-backdrop-modal: rgba(15, 23, 42, 0.40);
   --clx-backdrop-alert: rgba(15, 23, 42, 0.45);
 
-  /* ── Scrollbar ── */
-  --clx-scrollbar:       #cbd5e1; /* slate-300 */
-  --clx-scrollbar-hover: #94a3b8; /* slate-400 */
-
   /* ── Theme accents (overridden dynamically by ClxThemeService) ── */
   --clx-secondary:        #64748b; /* slate-500 */
   --clx-secondary-light:  #f1f5f9; /* slate-100 */
+
+  /* ── Scrollbar (overridden dynamically by ClxThemeService from scrollColor — own tokens,
+     not shared with --clx-primary/--clx-secondary, so its own "resting" shade doesn't
+     have to compromise with what those need for badges/hover fills elsewhere) ── */
+  --clx-scroll:       #94a3b8; /* slate-400 — hover */
+  --clx-scroll-light: #cbd5e1; /* slate-300 — resting state */
 }
 
 /* ── Dark theme ───────────────────────────────────────────────────────────── */
@@ -81,9 +83,9 @@
   --clx-backdrop-modal: rgba(2, 6, 23, 0.65);
   --clx-backdrop-alert: rgba(2, 6, 23, 0.70);
 
-  /* ── Scrollbar ── */
-  --clx-scrollbar:       #334155; /* slate-700 */
-  --clx-scrollbar-hover: #475569; /* slate-600 */
+  /* ── Scrollbar (see :root for why these are independent of --clx-secondary) ── */
+  --clx-scroll:       #475569; /* slate-600 — hover */
+  --clx-scroll-light: #334155; /* slate-700 — resting state */
 }
 
 /* ── Tailwind v4: registrar vars como colores utilitarios ─────────────────── */

package/assets/styles/styles.css

@@ -47,10 +47,10 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--clx-scrollbar);
+  background-color: var(--clx-scroll-light);
   border-radius: 0.5rem;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--clx-scrollbar-hover);
+  background-color: var(--clx-scroll);
 }

package/fesm2022/codexly-ui.mjs

@@ -705,7 +705,9 @@ class ClxThemeService {
             const cfg = this._config();
             this._applyColorVar('--clx-primary', '--clx-primary-light', cfg.primaryColor);
             this._applyColorVar('--clx-secondary', '--clx-secondary-light', cfg.secondaryColor);
-            this._applyColorVar('--clx-scroll', '--clx-scroll-light', cfg.scrollColor ?? cfg.primaryColor);
+            // lightShade 300 (not the default 100) — see _applyColorVar's own doc comment on why a
+            // scrollbar's resting state can't share primary/secondary's much lighter "light" shade.
+            this._applyColorVar('--clx-scroll', '--clx-scroll-light', cfg.scrollColor ?? cfg.primaryColor, 300);
             this._applyTextColor(cfg.textColor, this.isDark());
         });
         effect(() => {
@@ -735,13 +737,19 @@ class ClxThemeService {
     toggle() {
         this.setMode(this.isDark() ? 'light' : 'dark');
     }
-    _applyColorVar(varName, lightVarName, input) {
+    /** lightShade defaults to 100 — right for primary/secondary, whose "light" variant backs
+     *  subtle badge/hover fills meant to barely tint a surface. A scrollbar thumb needs its own
+     *  resting-state shade instead: shade 100 of any color reads as nearly invisible against an
+     *  off-white page background regardless of which color/shade was configured (confirmed with
+     *  scrollColor: 'slate-400' and 'slate-500' alike — the shade passed in never reached the
+     *  resting state at all, only the hover one). */
+    _applyColorVar(varName, lightVarName, input, lightShade = 100) {
         if (!input)
             return;
         const { color, shade } = parseColorInput(input);
         document.documentElement.style.setProperty(varName, resolvePaletteHex(color, shade));
         if (lightVarName) {
-            document.documentElement.style.setProperty(lightVarName, resolvePaletteHex(color, 100));
+            document.documentElement.style.setProperty(lightVarName, resolvePaletteHex(color, lightShade));
         }
     }
     _applyTextColor(input, dark) {
@@ -11069,7 +11077,7 @@ class ClxAppLayoutComponent {
     openSidebar() { this._sidebarOpen.set(true); }
     closeSidebar() { this._sidebarOpen.set(false); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-dvh overflow-hidden" }, ngImport: i0, template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
       <div
@@ -11188,7 +11196,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
   `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { class: 'flex h-screen overflow-hidden' },
+                    // h-dvh (dynamic viewport height), not h-screen (100vh): on Android Chrome, 100vh is computed
+                    // against the *largest* viewport (as if the address bar / nav buttons were hidden), so once that
+                    // browser chrome is actually on-screen the host is taller than what's visible — clipping the
+                    // bottom of <main>'s scrollable content (e.g. a table's pagination footer) below the fold even
+                    // though the content itself scrolls fine. 100dvh tracks the real visible viewport instead.
+                    host: { class: 'flex h-dvh overflow-hidden' },
                 }]
         }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });