codexly-ui 0.12.0 → 0.12.1

package/fesm2022/codexly-ui.mjs

@@ -12096,31 +12096,33 @@ const TOAST_DEFAULT_ICON = {
     white: 'info',
 };
 const c = CLX_COLOR_MAP;
-// ─── Card background (tinted surface) per type ────────────────────────────────
+// ─── Card background (tinted surface) per type — bgMuted is a low-opacity tint
+// (bg-{color}-{shade}/10) so it reads as "tenue" in both light and dark theme,
+// instead of a fixed light shade (bgSubtle) that turns garish on dark surfaces. ──
 const TOAST_BG_MAP = {
-    red: c.red.bgSubtle,
-    orange: c.orange.bgSubtle,
-    amber: c.amber.bgSubtle,
-    yellow: c.yellow.bgSubtle,
-    lime: c.lime.bgSubtle,
-    green: c.green.bgSubtle,
-    emerald: c.emerald.bgSubtle,
-    teal: c.teal.bgSubtle,
-    cyan: c.cyan.bgSubtle,
-    sky: c.sky.bgSubtle,
-    blue: c.blue.bgSubtle,
-    indigo: c.indigo.bgSubtle,
-    violet: c.violet.bgSubtle,
-    purple: c.purple.bgSubtle,
-    fuchsia: c.fuchsia.bgSubtle,
-    pink: c.pink.bgSubtle,
-    rose: c.rose.bgSubtle,
-    slate: c.slate.bgSubtle,
-    gray: c.gray.bgSubtle,
-    zinc: c.zinc.bgSubtle,
-    neutral: c.neutral.bgSubtle,
-    stone: c.stone.bgSubtle,
-    white: c.white.bgSubtle,
+    red: c.red.bgMuted,
+    orange: c.orange.bgMuted,
+    amber: c.amber.bgMuted,
+    yellow: c.yellow.bgMuted,
+    lime: c.lime.bgMuted,
+    green: c.green.bgMuted,
+    emerald: c.emerald.bgMuted,
+    teal: c.teal.bgMuted,
+    cyan: c.cyan.bgMuted,
+    sky: c.sky.bgMuted,
+    blue: c.blue.bgMuted,
+    indigo: c.indigo.bgMuted,
+    violet: c.violet.bgMuted,
+    purple: c.purple.bgMuted,
+    fuchsia: c.fuchsia.bgMuted,
+    pink: c.pink.bgMuted,
+    rose: c.rose.bgMuted,
+    slate: c.slate.bgMuted,
+    gray: c.gray.bgMuted,
+    zinc: c.zinc.bgMuted,
+    neutral: c.neutral.bgMuted,
+    stone: c.stone.bgMuted,
+    white: c.white.bgMuted,
 };
 // ─── Card border color per type ───────────────────────────────────────────────
 const TOAST_BORDER_MAP = {
@@ -12352,7 +12354,7 @@ class ClxToastComponent {
     <!-- Toast card -->
     <div
       #card
-      class="clx-toast-card relative flex items-start gap-3.5 w-full backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
+      class="clx-toast-card relative flex items-start gap-3.5 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
       [class]="_bgClass() + ' ' + _borderClass()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
@@ -12444,7 +12446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- Toast card -->
     <div
       #card
-      class="clx-toast-card relative flex items-start gap-3.5 w-full backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
+      class="clx-toast-card relative flex items-start gap-3.5 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
       [class]="_bgClass() + ' ' + _borderClass()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"