@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/GlideSelect.css

@@ -0,0 +1,138 @@
+.glide-select {
+  --gs-accent: #f5f5f5;
+  --gs-surface: #27272a;
+  --gs-highlight: #3f3f46;
+  --gs-text: #f5f5f5;
+  --gs-radius: 10px;
+  --gs-inner-radius: 6px;
+  --gs-chip: 32px;
+  --gs-row: 30px;
+  --gs-font: 13px;
+  --gs-menu-w: 176px;
+  --gs-pop: 180ms;
+  --gs-pop-out: 120ms;
+  --gs-glide: 220ms;
+  --gs-origin: top left;
+  --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+}
+.glide-select[data-disabled] { opacity: 0.5; }
+.glide-select__trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--gs-chip);
+  margin: 0;
+  padding: 0 8px 0 10px;
+  border: 0;
+  border-radius: var(--gs-inner-radius);
+  background: var(--gs-surface);
+  color: var(--gs-text);
+  font-family: inherit;
+  font-size: var(--gs-font);
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition: background-color 100ms ease, transform 160ms var(--gs-ease-out);
+}
+.glide-select__trigger:disabled { cursor: default; }
+@media (hover: hover) and (pointer: fine) {
+  .glide-select__trigger:not(:disabled):hover { background: color-mix(in srgb, var(--gs-highlight) 60%, var(--gs-surface)); }
+}
+.glide-select__trigger[aria-expanded='true'] { background: color-mix(in srgb, var(--gs-highlight) 60%, var(--gs-surface)); }
+.glide-select__trigger:not(:disabled):active { transform: scale(0.97); }
+.glide-select__label[data-empty] { opacity: 0.6; }
+.glide-select[data-swap] .glide-select__label { animation: gs-swap 160ms ease; }
+@keyframes gs-swap { from { opacity: 0.6; filter: blur(2px); } }
+.glide-select__chevron {
+  display: inline-flex;
+  color: color-mix(in srgb, var(--gs-text) 55%, transparent);
+  transition: transform 200ms var(--gs-ease-out);
+}
+.glide-select__trigger[aria-expanded='true'] .glide-select__chevron { transform: rotate(180deg); }
+.glide-select__menu {
+  --gs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  width: var(--gs-menu-w);
+  padding: 4px;
+  border-radius: var(--gs-radius);
+  background: var(--gs-surface);
+  box-shadow: 0 4px 16px color-mix(in srgb, #000 22%, transparent);
+  transform-origin: var(--gs-origin);
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity var(--gs-pop) var(--gs-ease-out), transform var(--gs-pop) var(--gs-ease-out);
+}
+.glide-select__menu[data-state='open'] { opacity: 1; transform: none; }
+.glide-select__menu[data-state='closed'] { transition-duration: var(--gs-pop-out); pointer-events: none; }
+.glide-select__list { position: relative; display: grid; gap: 1px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; }
+.glide-select__pill {
+  position: absolute;
+  top: 0; right: 0; left: 0;
+  height: var(--gs-row);
+  border-radius: var(--gs-inner-radius);
+  background: var(--gs-highlight);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform var(--gs-glide) var(--gs-ease-out), opacity 150ms ease;
+}
+.glide-select__option {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: var(--gs-row);
+  padding: 0 8px 0 10px;
+  border-radius: var(--gs-inner-radius);
+  color: var(--gs-text);
+  font-family: inherit;
+  font-size: var(--gs-font);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 150ms ease;
+}
+.glide-select__option[aria-selected='true'] { background: color-mix(in srgb, var(--gs-highlight) 60%, transparent); }
+.glide-select__list[data-live] .glide-select__option[aria-selected='true'] { background: transparent; }
+.glide-select__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
+.glide-select__tag { flex-shrink: 0; color: color-mix(in srgb, var(--gs-text) 55%, transparent); font-size: calc(var(--gs-font) - 2px); }
+.glide-select__check { display: inline-flex; flex-shrink: 0; color: var(--gs-accent); visibility: hidden; }
+.glide-select__check[data-on] { visibility: visible; }
+/* Mint integration: focus, constrained fields, and platform accessibility. */
+.glide-select__trigger:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }
+.glide-select[data-full-width] { display: block; width: 100%; }
+.glide-select[data-full-width] .glide-select__trigger { display: flex; width: 100%; justify-content: space-between; }
+.glide-select__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
+.glide-select__chevron { flex-shrink: 0; }
+@media (prefers-reduced-motion: reduce) {
+  .glide-select__menu { transform: none !important; transition: opacity var(--gs-pop) ease; }
+  .glide-select__menu[data-state='closed'] { transition-duration: var(--gs-pop-out); }
+  .glide-select__pill { transition: opacity 150ms ease; }
+  .glide-select__chevron { transition: none; }
+  .glide-select__trigger { transition: background-color 100ms ease; }
+  .glide-select__trigger:not(:disabled):active { transform: none; }
+  .glide-select[data-swap] .glide-select__label { animation: none; }
+}
+@media (forced-colors: active) {
+  .glide-select__trigger, .glide-select__menu { border: 1px solid ButtonText; }
+  .glide-select__option[aria-selected='true'] { outline: 1px solid Highlight; outline-offset: -1px; }
+  .glide-select__trigger:focus-visible { outline-color: Highlight; }
+}
+/* Retain existing layout hooks without painting a second native-select surface. */
+.glide-select.mint-select-field { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
+.glide-select.mint-select-field.code-sort-select { width: auto; flex-shrink: 0; }
+.glide-select.mint-select-field.schedule-repeat-select { width: auto; min-width: 130px; }
+.glide-select.mint-select-field.schedule-timezone-select { width: auto; min-width: 180px; max-width: 260px; }

package/src/renderer/shared/components/GlideSelect.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties, ReactNode } from 'react'
+export interface GlideOption { value: string; label: ReactNode; tag?: string }
+export interface GlideSelectProps {
+  options?: (string | GlideOption)[]
+  value?: string
+  defaultValue?: string
+  onChange?: (value: string, option: GlideOption) => void
+  placeholder?: string
+  showTags?: boolean
+  accentColor?: string
+  surfaceColor?: string
+  highlightColor?: string
+  textColor?: string
+  size?: 'sm' | 'md' | 'lg'
+  radius?: number
+  menuWidth?: number
+  placement?: 'top' | 'bottom'
+  align?: 'left' | 'right'
+  popDuration?: number
+  glideDuration?: number
+  rememberPosition?: boolean
+  disabled?: boolean
+  ariaLabel?: string
+  className?: string
+  id?: string
+  labelledBy?: string
+  title?: string
+  style?: CSSProperties
+  fullWidth?: boolean
+}
+export default function GlideSelect(props: GlideSelectProps): ReactNode

package/src/renderer/shared/components/GlideSelect.jsx

@@ -0,0 +1,266 @@
+'use client';
+
+// Adapted from the React Bits GlideSelect source supplied for this integration.
+// Mint adds portal positioning, scrollable lists, focus visibility, and corrected pointer hit testing.
+import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { ArrowDown01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import './GlideSelect.css';
+
+const SIZES = {
+  sm: { chip: 28, row: 26, font: 12 },
+  md: { chip: 32, row: 30, font: 13 },
+  lg: { chip: 44, row: 40, font: 14 }
+};
+const GAP = 1;
+const MENU_GAP = 6;
+const DEFAULT_OPTIONS = ['One', 'Two', 'Three'];
+const norm = o => typeof o === 'string' ? { value: o, label: o } : o;
+const textOf = it => typeof it.label === 'string' ? it.label : it.value;
+const typeaheadIndex = (items, from, ch) => {
+  const c = ch.toLowerCase();
+  for (let k = 1; k <= items.length; k++) {
+    const i = (from + k) % items.length;
+    if (textOf(items[i]).toLowerCase().startsWith(c)) return i;
+  }
+  return from;
+};
+
+export default function GlideSelect({
+  options = DEFAULT_OPTIONS, value, defaultValue, onChange, placeholder = 'Select…', showTags = true,
+  accentColor = '#f5f5f5', surfaceColor = '#27272a', highlightColor = '#3f3f46', textColor = '#f5f5f5',
+  size = 'md', radius = 10, menuWidth = 176, placement = 'bottom', align = 'left',
+  popDuration = 180, glideDuration = 220, rememberPosition = true, disabled = false,
+  ariaLabel = 'Select', className = '', id: triggerId, labelledBy, title, style, fullWidth = false
+}) {
+  const items = options.map(norm);
+  const [inner, setInner] = useState(defaultValue ?? '');
+  const current = value ?? inner;
+  const selected = items.findIndex(it => it.value === current);
+  const [phase, setPhase] = useState('closed');
+  const [active, setActive] = useState(null);
+  const [side, setSide] = useState(placement);
+  const [position, setPosition] = useState({ top: 0, left: 0, width: menuWidth, maxHeight: 300 });
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const menuRef = useRef(null);
+  const listRef = useRef(null);
+  const pillRef = useRef(null);
+  const instant = useRef(false);
+  const closeTimer = useRef(undefined);
+  const scrub = useRef(null);
+  const id = useId();
+  const S = SIZES[size] ?? SIZES.md;
+  const step = S.row + GAP;
+  const popOut = Math.round(popDuration * 2 / 3);
+  const unavailable = disabled || items.length === 0;
+
+  useLayoutEffect(() => {
+    if (phase !== 'open') return;
+    const el = menuRef.current;
+    const trigger = triggerRef.current;
+    if (!el || !trigger) return;
+    const place = () => {
+      const r = trigger.getBoundingClientRect();
+      const below = Math.max(0, window.innerHeight - r.bottom - MENU_GAP - 8);
+      const above = Math.max(0, r.top - MENU_GAP - 8);
+      const desired = Math.min(300, items.length * step + 7);
+      const nextSide = placement === 'bottom'
+        ? (below < desired && above > below ? 'top' : 'bottom')
+        : (above < desired && below > above ? 'bottom' : 'top');
+      const maxHeight = Math.min(300, nextSide === 'bottom' ? below : above);
+      const height = Math.min(desired, maxHeight);
+      const width = Math.min(Math.max(menuWidth, r.width), window.innerWidth - 16);
+      const left = Math.max(8, Math.min(align === 'right' ? r.right - width : r.left, window.innerWidth - width - 8));
+      setSide(nextSide);
+      setPosition({ fontFamily: getComputedStyle(trigger).fontFamily, top: nextSide === 'bottom' ? r.bottom + MENU_GAP : r.top - MENU_GAP - height, left, width, maxHeight });
+    };
+    place();
+    // Pointer and keyboard opens both retain the authored pop transition.
+    el.dataset.state = 'closed';
+    void el.offsetHeight;
+    el.dataset.state = 'open';
+    const p = pillRef.current;
+    if (p) {
+      p.style.transition = 'none';
+      p.style.transform = `translateY(${Math.max(0, selected) * step}px)`;
+      p.style.opacity = '0';
+      void p.offsetHeight;
+      p.style.transition = '';
+    }
+    const onScroll = e => { if (!menuRef.current?.contains(e.target)) place(); };
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', onScroll, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', onScroll, true);
+    };
+  }, [phase, placement, align, menuWidth, items.length, step]);
+
+  useLayoutEffect(() => {
+    const p = pillRef.current;
+    if (!p || phase !== 'open') return;
+    if (active === null) { p.style.opacity = '0'; return; }
+    const jump = instant.current || p.style.opacity !== '1';
+    p.style.transitionDuration = jump ? '0ms, 150ms' : '';
+    p.style.transform = `translateY(${active * step}px)`;
+    p.style.opacity = '1';
+    instant.current = false;
+    const list = listRef.current;
+    if (list) {
+      const top = active * step;
+      if (top < list.scrollTop) list.scrollTop = top;
+      else if (top + S.row > list.scrollTop + list.clientHeight) list.scrollTop = top + S.row - list.clientHeight;
+    }
+  }, [active, phase, step, S.row, position.maxHeight]);
+
+  const open = viaKey => {
+    if (unavailable) return;
+    clearTimeout(closeTimer.current);
+    instant.current = true;
+    setActive(selected >= 0 ? selected : viaKey ? 0 : null);
+    setPhase('open');
+  };
+  const close = mode => {
+    setActive(null);
+    scrub.current = null;
+    clearTimeout(closeTimer.current);
+    const el = menuRef.current;
+    if (mode === 'instant' || !el) { setPhase('closed'); return; }
+    el.style.transitionDuration = '';
+    el.dataset.state = 'closed';
+    setPhase('closing');
+    closeTimer.current = setTimeout(() => setPhase('closed'), popOut + 20);
+  };
+  const pick = (i, viaKey) => {
+    const it = items[i];
+    if (!it) { close('instant'); return; }
+    if (it.value !== current) {
+      if (value === undefined) setInner(it.value);
+      onChange?.(it.value, it);
+      if (!viaKey && rootRef.current) rootRef.current.dataset.swap = '';
+    }
+    close('instant');
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+  const onTriggerKey = e => {
+    const k = e.key;
+    const n = items.length;
+    const cur = active ?? Math.max(0, selected);
+    if (phase !== 'open') {
+      if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(k)) { e.preventDefault(); open(true); }
+      return;
+    }
+    const go = i => { e.preventDefault(); instant.current = true; setActive(Math.min(n - 1, Math.max(0, i))); };
+    if (k === 'ArrowDown' || k === 'ArrowUp') go(active === null ? cur : cur + (k === 'ArrowDown' ? 1 : -1));
+    else if (k === 'Home' || k === 'End') go(k === 'Home' ? 0 : n - 1);
+    else if (k === 'Enter' || k === ' ') { e.preventDefault(); pick(cur, true); }
+    else if (k === 'Escape' || k === 'Tab') { if (k === 'Escape') { e.preventDefault(); e.stopPropagation(); } close('instant'); }
+    else if (k.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) go(typeaheadIndex(items, cur, k));
+  };
+  useEffect(() => {
+    if (phase === 'closed') return;
+    const onDown = e => {
+      if (!rootRef.current?.contains(e.target) && !menuRef.current?.contains(e.target)) close('pop');
+    };
+    const onFocus = e => {
+      if (!rootRef.current?.contains(e.target) && !menuRef.current?.contains(e.target)) close('instant');
+    };
+    document.addEventListener('pointerdown', onDown, true);
+    document.addEventListener('focusin', onFocus);
+    return () => { document.removeEventListener('pointerdown', onDown, true); document.removeEventListener('focusin', onFocus); };
+  }, [phase]);
+  useEffect(() => { if (unavailable && phase !== 'closed') close('instant'); }, [unavailable]);
+  useEffect(() => () => clearTimeout(closeTimer.current), []);
+
+  const rowAt = (y, x) => {
+    const list = listRef.current;
+    if (!scrub.current || !list) return null;
+    const r = list.getBoundingClientRect();
+    if (y < r.top || y >= r.bottom || x < r.left || x >= r.right) return null;
+    const offset = y - r.top + list.scrollTop;
+    const i = Math.floor(offset / step);
+    return i >= 0 && i < items.length && offset % step < S.row ? i : null;
+  };
+  const onListDown = e => {
+    if (scrub.current || e.button !== 0) return;
+    // Let a touch gesture scroll long lists; a tap is picked by the row's click handler.
+    if (e.pointerType === 'touch') return;
+    e.preventDefault();
+    try { e.currentTarget.setPointerCapture(e.pointerId); } catch {}
+    scrub.current = { id: e.pointerId };
+    instant.current = true;
+    setActive(rowAt(e.clientY, e.clientX));
+  };
+  const onListMove = e => {
+    if (!scrub.current || scrub.current.id !== e.pointerId) return;
+    const i = rowAt(e.clientY, e.clientX);
+    if (i !== active) setActive(i);
+  };
+  const onListUp = e => {
+    if (!scrub.current || scrub.current.id !== e.pointerId) return;
+    const i = e.type === 'pointerup' ? rowAt(e.clientY, e.clientX) : null;
+    scrub.current = null;
+    if (i !== null) pick(i, false);
+    else if (!rememberPosition) setActive(null);
+  };
+  const onListOver = e => {
+    if (e.pointerType === 'touch' || scrub.current) return;
+    const row = e.target.closest('[data-index]');
+    if (!row) return;
+    const i = Number(row.dataset.index);
+    if (i !== active) setActive(i);
+  };
+  const variables = {
+    '--gs-accent': accentColor, '--gs-surface': surfaceColor, '--gs-highlight': highlightColor, '--gs-text': textColor,
+    '--gs-radius': `${radius}px`, '--gs-inner-radius': `${Math.max(3, radius - 4)}px`, '--gs-chip': `${S.chip}px`,
+    '--gs-row': `${S.row}px`, '--gs-font': `${S.font}px`, '--gs-menu-w': `${menuWidth}px`,
+    '--gs-pop': `${popDuration}ms`, '--gs-pop-out': `${popOut}ms`, '--gs-glide': `${glideDuration}ms`,
+    '--gs-origin': `${side === 'bottom' ? 'top' : 'bottom'} ${align}`
+  };
+  return (
+    <div ref={rootRef} className={`glide-select${className ? ` ${className}` : ''}`} data-size={size}
+      data-disabled={unavailable ? '' : undefined} data-full-width={fullWidth ? '' : undefined} style={{ ...variables, ...style }}
+      onAnimationEnd={e => { if (e.animationName === 'gs-swap' && rootRef.current) delete rootRef.current.dataset.swap; }}>
+      <button ref={triggerRef} id={triggerId} title={title} type="button" role="combobox" aria-haspopup="listbox"
+        aria-expanded={phase === 'open'} aria-controls={phase !== 'closed' ? `${id}-list` : undefined}
+        aria-activedescendant={phase === 'open' && active !== null ? `${id}-${active}` : undefined}
+        aria-label={labelledBy ? undefined : ariaLabel} aria-labelledby={labelledBy} disabled={unavailable}
+        className="glide-select__trigger"
+        onPointerDown={e => {
+          if (e.button !== 0 || unavailable) return;
+          e.currentTarget.focus({ preventScroll: true });
+          if (phase === 'open') close('pop'); else open(false);
+        }}
+        onClick={e => { if (e.detail === 0 && phase === 'closed') open(true); }}
+        onKeyDown={onTriggerKey}>
+        <span className="glide-select__label" key={current} data-empty={selected < 0 ? '' : undefined}>
+          {selected >= 0 ? items[selected].label : placeholder}
+        </span>
+        <span className="glide-select__chevron" aria-hidden="true"><HugeiconsIcon icon={ArrowDown01Icon} size={12} strokeWidth={2.5} /></span>
+      </button>
+      {phase !== 'closed' && createPortal(
+        <div ref={menuRef} className="glide-select__menu" data-state="open" data-side={side} data-align={align}
+          style={{ ...variables, top: position.top, left: position.left, width: position.width, maxHeight: position.maxHeight, fontFamily: position.fontFamily }}>
+          <div ref={listRef} id={`${id}-list`} role="listbox" aria-label={ariaLabel} className="glide-select__list"
+            style={{ maxHeight: Math.max(0, position.maxHeight - 8) }} data-live={active !== null ? '' : undefined}
+            onPointerOver={onListOver} onPointerLeave={() => { if (!scrub.current && !rememberPosition) setActive(null); }}
+            onPointerDown={onListDown} onPointerMove={onListMove} onPointerUp={onListUp}
+            onPointerCancel={onListUp} onLostPointerCapture={onListUp}>
+            <span ref={pillRef} className="glide-select__pill" aria-hidden="true" />
+            {items.map((it, i) => (
+              <div key={it.value} id={`${id}-${i}`} role="option" aria-selected={i === selected} data-index={i}
+                className="glide-select__option" onClick={e => { if (e.detail === 0 || e.nativeEvent.pointerType === 'touch') pick(i, false); }}>
+                <span className="glide-select__name">{it.label}</span>
+                {showTags && it.tag ? <span className="glide-select__tag">{it.tag}</span> : null}
+                <span className="glide-select__check" data-on={i === selected ? '' : undefined} aria-hidden="true">
+                  <HugeiconsIcon icon={Tick02Icon} size={13} strokeWidth={2.5} />
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>, document.body)}
+    </div>
+  );
+}

package/src/renderer/shared/components/ImageGenCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Sparkles } from 'lucide-react'
 
 export interface ImageGenHit {
@@ -44,8 +44,8 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
         borderRadius: '10px',
         overflow: 'hidden',
         aspectRatio: single ? undefined : '1 / 1',
-        background: 'rgba(255, 255, 255, 0.04)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        background: 'var(--surface-strong)',
+        border: '1px solid var(--border)',
       }}
     >
       <img
@@ -68,43 +68,62 @@ function GeneratedImageTile({ url, single }: { url: string; single: boolean }) {
 export default function ImageGenCard({ data }: { data: ImageGenData }) {
   const images = (data?.images ?? []).filter((img) => img?.url)
 
+  const [isDark, setIsDark] = useState(
+    () => (document.documentElement.getAttribute('data-theme') || 'dark') !== 'light'
+  )
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDark((document.documentElement.getAttribute('data-theme') || 'dark') !== 'light')
+    })
+    observer.observe(document.documentElement, { attributeFilter: ['data-theme'] })
+    return () => observer.disconnect()
+  }, [])
+
+  const cardBg = isDark ? 'rgba(255,255,255,0.03)' : 'rgba(15,23,42,0.04)'
+  const cardBorder = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.12)'
+  const cardText = isDark ? '#f8fafc' : '#0f172a'
+  const labelColor = isDark ? 'rgba(255,255,255,0.6)' : '#64748b'
+  const metaColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+  const promptColor = isDark ? 'rgba(255,255,255,0.7)' : '#475569'
+  const emptyColor = isDark ? 'rgba(255,255,255,0.5)' : '#94a3b8'
+
   return (
     <div
       style={{
-        background: 'rgba(255, 255, 255, 0.03)',
+        background: cardBg,
         backdropFilter: 'blur(16px)',
         WebkitBackdropFilter: 'blur(16px)',
-        color: '#f8fafc',
+        color: cardText,
         borderRadius: '12px',
         padding: '16px 20px',
         margin: '12px 0',
-        boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.2)',
-        border: '1px solid rgba(255, 255, 255, 0.08)',
+        boxShadow: isDark ? '0 8px 32px 0 rgba(0,0,0,0.2)' : '0 4px 20px 0 rgba(15,23,42,0.08)',
+        border: `1px solid ${cardBorder}`,
         fontFamily: 'system-ui, -apple-system, sans-serif',
       }}
     >
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-        <Sparkles size={16} strokeWidth={2} style={{ opacity: 0.9 }} />
+        <Sparkles size={16} strokeWidth={2} style={{ opacity: 0.9, color: labelColor }} />
         <span
           style={{
             fontSize: '11px',
             fontWeight: 700,
             letterSpacing: '0.8px',
-            color: 'rgba(255, 255, 255, 0.6)',
+            color: labelColor,
           }}
         >
           IMAGE GENERATED
         </span>
         {data?.model && (
-          <span style={{ fontSize: '11px', color: 'rgba(255, 255, 255, 0.5)' }}>
+          <span style={{ fontSize: '11px', color: metaColor }}>
             {data.model}{data.provider ? ` · ${data.provider}` : ''}
           </span>
         )}
       </div>
 
       {images.length === 0 ? (
-        <div style={{ fontSize: '13px', color: 'rgba(255, 255, 255, 0.5)' }}>
+        <div style={{ fontSize: '13px', color: emptyColor }}>
           No image returned.
         </div>
       ) : images.length === 1 ? (
@@ -129,7 +148,7 @@ export default function ImageGenCard({ data }: { data: ImageGenData }) {
             marginTop: '10px',
             fontSize: '13px',
             lineHeight: 1.4,
-            color: 'rgba(255, 255, 255, 0.7)',
+            color: promptColor,
           }}
         >
           &ldquo;{data.prompt}&rdquo;