codexly-ui 0.18.3 → 0.19.0

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) {