codexly-ui 0.12.1 → 0.12.2

package/fesm2022/codexly-ui.mjs

@@ -12096,33 +12096,36 @@ const TOAST_DEFAULT_ICON = {
     white: 'info',
 };
 const c = CLX_COLOR_MAP;
-// ─── 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. ──
+// ─── Card background (tinted surface) per type ────────────────────────────────
+// Solid, fixed hex pairs (light/dark) instead of a Tailwind shade class — the
+// ClxColor shade system has no per-theme variant (this library themes via
+// [data-clx-theme], not Tailwind's `dark:` classlist), so a single shade either
+// looks right in light and washed-out/garish in dark, or vice-versa. Applied as
+// inline style via [style.background] in the component, not a utility class.
 const TOAST_BG_MAP = {
-    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,
+    red: { light: '#fef2f2', dark: '#2c1315' },
+    orange: { light: '#fff7ed', dark: '#2c1a0a' },
+    amber: { light: '#fffbeb', dark: '#2c2308' },
+    yellow: { light: '#fefce8', dark: '#2b2708' },
+    lime: { light: '#f7fee7', dark: '#1c2708' },
+    green: { light: '#f0fdf4', dark: '#0d2415' },
+    emerald: { light: '#ecfdf5', dark: '#0d2820' },
+    teal: { light: '#f0fdfa', dark: '#0b2824' },
+    cyan: { light: '#ecfeff', dark: '#082a30' },
+    sky: { light: '#f0f9ff', dark: '#0b2431' },
+    blue: { light: '#eff6ff', dark: '#0d2043' },
+    indigo: { light: '#eef2ff', dark: '#1a1a3a' },
+    violet: { light: '#f5f3ff', dark: '#211a3d' },
+    purple: { light: '#faf5ff', dark: '#241a3a' },
+    fuchsia: { light: '#fdf4ff', dark: '#2c1830' },
+    pink: { light: '#fdf2f8', dark: '#2c1521' },
+    rose: { light: '#fff1f2', dark: '#2c1418' },
+    slate: { light: '#f8fafc', dark: '#1e293b' },
+    gray: { light: '#f9fafb', dark: '#1f2937' },
+    zinc: { light: '#fafafa', dark: '#27272a' },
+    neutral: { light: '#fafafa', dark: '#262626' },
+    stone: { light: '#fafaf9', dark: '#292524' },
+    white: { light: '#ffffff', dark: '#1e293b' },
 };
 // ─── Card border color per type ───────────────────────────────────────────────
 const TOAST_BORDER_MAP = {
@@ -12241,6 +12244,7 @@ class ClxToastComponent {
     entry = input.required(...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
     dismiss = output();
     _animate = inject(ClxAnimateService);
+    _themeSvc = inject(ClxThemeService);
     _el = inject((ElementRef));
     _zone;
     constructor() {
@@ -12255,7 +12259,7 @@ class ClxToastComponent {
     _destroyed = false;
     // ─── Derived visuals ──────────────────────────────────────────────────────
     _icon = computed(() => this.entry().icon ?? TOAST_DEFAULT_ICON[this.entry().type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
-    _bgClass = computed(() => TOAST_BG_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_bgClass" }] : /* istanbul ignore next */ []));
+    _bgColor = computed(() => this._themeSvc.isDark() ? TOAST_BG_MAP[this.entry().type].dark : TOAST_BG_MAP[this.entry().type].light, ...(ngDevMode ? [{ debugName: "_bgColor" }] : /* istanbul ignore next */ []));
     _borderClass = computed(() => TOAST_BORDER_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_borderClass" }] : /* istanbul ignore next */ []));
     _iconBgClass = computed(() => TOAST_ICON_BG_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_iconBgClass" }] : /* istanbul ignore next */ []));
     _colorClass = computed(() => TOAST_COLOR_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
@@ -12354,8 +12358,9 @@ class ClxToastComponent {
     <!-- Toast card -->
     <div
       #card
-      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()"
+      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]="_borderClass()"
+      [style.background]="_bgColor()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >
@@ -12446,8 +12451,9 @@ 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 bg-clx-surface backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
-      [class]="_bgClass() + ' ' + _borderClass()"
+      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]="_borderClass()"
+      [style.background]="_bgColor()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >