codexly-ui 0.7.3 → 0.7.4

package/assets/styles/_safelist.css

@@ -12,8 +12,8 @@
    resolveColor().border by replacing "border-" with "border-t-" at runtime. */
 @source inline("{bg,text,border,border-t,hover:bg,hover:text,hover:border,focus:border,focus-within:border,focus-visible:ring}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}");
 
-/* hoverBgMuted: hover:bg-{c}-{s}/10 */
-@source inline("hover:bg-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/10");
+/* hoverBgMuted / bgMuted: {hover:,}bg-{c}-{s}/10 */
+@source inline("{hover:bg,bg}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/10");
 
 /* focus/focus-within ring: focus:ring-{c}-{s}/20, focus-within:ring-{c}-{s}/20 */
 @source inline("{focus:ring,focus-within:ring}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}/20");

package/fesm2022/codexly-ui.mjs

@@ -49,6 +49,7 @@ function resolveColor(input) {
         // ── New semantic tokens ─────────────────────────────────────────────────
         bg: `bg-${c}-${s}`,
         bgSubtle: `bg-${c}-${subtleS}`,
+        bgMuted: `bg-${c}-${s}/10`,
         text: textOn,
         textSubtle: `text-${c}-${s}`,
         border: `border-${c}-${s}`,
@@ -91,6 +92,7 @@ function resolveColor(input) {
 const WHITE_TOKENS = {
     bg: 'bg-white',
     bgSubtle: 'bg-white/10',
+    bgMuted: 'bg-white/10',
     text: 'text-gray-900',
     textSubtle: 'text-white',
     border: 'border-white',
@@ -9697,11 +9699,10 @@ class ClxMenuComponent {
         const geom = this.collapsed() ? NAV_ITEM_COLLAPSED : NAV_ITEM_L1;
         const t = resolveColor(this._color());
         const typography = resolveNavZoneTypography(this._resolved());
-        // Active state reuses the same light hover tint (just without the `hover:` pseudo-class)
-        // instead of the darker bgSubtle token, so selected and hovered read as the same shade.
-        const activeBg = t.hoverBgMuted.replace('hover:', '');
+        // Active state reuses the same light tint as hover (bgMuted) instead of the darker
+        // bgSubtle token, so selected and hovered read as the same shade.
         if (isActive) {
-            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${activeBg} rounded-lg`;
+            return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.textSubtle} ${t.bgMuted} rounded-lg`;
         }
         return `${NAV_ITEM_BASE} ${typography} ${geom} ${t.hoverBgMuted} rounded-lg`;
     }