codexly-ui 0.12.0 → 0.12.2

package/fesm2022/codexly-ui.mjs

@@ -12097,30 +12097,35 @@ const TOAST_DEFAULT_ICON = {
 };
 const c = CLX_COLOR_MAP;
 // ─── 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.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: { 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 = {
@@ -12239,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() {
@@ -12253,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 */ []));
@@ -12353,7 +12359,8 @@ class ClxToastComponent {
     <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]="_bgClass() + ' ' + _borderClass()"
+      [class]="_borderClass()"
+      [style.background]="_bgColor()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >
@@ -12445,7 +12452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <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]="_bgClass() + ' ' + _borderClass()"
+      [class]="_borderClass()"
+      [style.background]="_bgColor()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >