cynx-ui 1.3.20 → 1.3.22

package/components/ActionsMenu.jsx

@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 export function ActionsMenu({ items, align = 'right' }) {
   const [open, setOpen] = useState(false);
@@ -12,23 +13,7 @@ export function ActionsMenu({ items, align = 'right' }) {
     setTimeout(() => { setClosing(false); setOpen(false); }, 140);
   }, []);
 
-  useEffect(() => {
-    if (!open) return;
-    function onDocClick(e) {
-      if (wrapRef.current && !wrapRef.current.contains(e.target)) close();
-    }
-    function onScroll() { if (menuRef.current) positionMenu(); }
-    document.addEventListener('mousedown', onDocClick);
-    document.addEventListener('scroll', onScroll, true);
-    window.addEventListener('resize', onScroll);
-    return () => {
-      document.removeEventListener('mousedown', onDocClick);
-      document.removeEventListener('scroll', onScroll, true);
-      window.removeEventListener('resize', onScroll);
-    };
-  }, [open, close]);
-
-  function positionMenu() {
+  const positionMenu = useCallback(() => {
     const btn = btnRef.current;
     const menu = menuRef.current;
     if (!btn || !menu) return;
@@ -41,25 +26,48 @@ export function ActionsMenu({ items, align = 'right' }) {
 
     let top, left;
     if (openUp) {
-      top = br.top + window.scrollY - mh - 6;
+      top = br.top - mh - 6;
     } else {
-      top = br.bottom + window.scrollY + 6;
+      top = br.bottom + 6;
     }
     if (align === 'left') {
-      left = br.left + window.scrollX;
+      left = br.left;
     } else {
-      left = br.right + window.scrollX - mw;
+      left = br.right - mw;
     }
     left = Math.max(8, Math.min(left, window.innerWidth - mw - 8));
 
     menu.style.top = top + 'px';
     menu.style.left = left + 'px';
     menu.classList.toggle('open-up', openUp);
-  }
+  }, [align]);
 
   useEffect(() => {
-    if (open) requestAnimationFrame(positionMenu);
-  }, [open]);
+    if (!open) return;
+    function onDocClick(e) {
+      if (
+        wrapRef.current && !wrapRef.current.contains(e.target) &&
+        menuRef.current && !menuRef.current.contains(e.target)
+      ) {
+        close();
+      }
+    }
+    function onScroll() { positionMenu(); }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('scroll', onScroll, true);
+    window.addEventListener('resize', onScroll);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('scroll', onScroll, true);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [open, close, positionMenu]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      positionMenu();
+    }
+  }, [open, positionMenu]);
 
   function toggle() {
     if (open) close();
@@ -79,7 +87,7 @@ export function ActionsMenu({ items, align = 'right' }) {
           border: isOpen ? '1px solid var(--accent,#f99e2c)' : '1px solid var(--border-light,#d7d8e0)',
           background: 'var(--surface,#fff)',
           cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          color: isOpen ? 'var(--accent)' : 'var(--muted,#797b8d)', transition: 'all .14s',
+          color: isOpen ? 'var(--accent, #f99e2c)' : 'var(--muted,#797b8d)', transition: 'all .14s',
           boxShadow: isOpen ? 'var(--pd, rgba(249,158,44,.12))' : 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
         }}
       >
@@ -88,11 +96,11 @@ export function ActionsMenu({ items, align = 'right' }) {
         </svg>
       </button>
 
-      {open && (
+      {open && typeof document !== 'undefined' && createPortal(
         <div
           ref={menuRef}
           style={{
-            position: 'fixed', zIndex: 8100, minWidth: 180, padding: 5,
+            position: 'fixed', zIndex: 99999, minWidth: 180, padding: 5,
             background: 'var(--surface,#fff)', border: '1.5px solid var(--border-light,#e2e8f0)',
             borderRadius: 'var(--rads,8px)',
             boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
@@ -112,7 +120,7 @@ export function ActionsMenu({ items, align = 'right' }) {
                   display: 'flex', alignItems: 'center', gap: 8,
                   padding: '6px 10px', borderRadius: 'var(--rads,8px)',
                   fontSize: 12, cursor: 'pointer', transition: 'all .14s',
-                  color: item.variant === 'danger' ? 'var(--danger)' : item.variant === 'success' ? 'var(--success)' : item.variant === 'warning' ? 'var(--accent)' : 'var(--text,#1a1a2e)',
+                  color: item.variant === 'danger' ? 'var(--danger, #f64747)' : item.variant === 'success' ? 'var(--success, #27ae60)' : item.variant === 'warning' ? 'var(--accent, #f99e2c)' : 'var(--text,#1a1a2e)',
                   fontWeight: 500,
                 }}
                 onMouseEnter={e => {
@@ -131,7 +139,8 @@ export function ActionsMenu({ items, align = 'right' }) {
               </div>
             )
           ))}
-        </div>
+        </div>,
+        document.body
       )}
 
       <style>{`

package/components/ActivityCard.jsx

@@ -6,7 +6,7 @@ function LegendDot({ color, label }) {
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
       <span style={{ width: 7, height: 7, borderRadius: 2, background: color, flexShrink: 0 }} />
-      <span style={{ fontSize: '.55rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+      <span style={{ fontSize: '.55rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
     </div>
   );
 }
@@ -20,9 +20,9 @@ export default function ActivityCard({
   primary = [],
   additional = [],
   totalSlots = 90,
-  greenColor = 'var(--success)',
-  redColor = 'var(--danger)',
-  emptyColor = 'var(--grey-1)',
+  greenColor = 'var(--success, #27ae60)',
+  redColor = 'var(--danger, #f64747)',
+  emptyColor = 'var(--grey-1, #f5f5f8)',
   barHeight = 28,
   barRadius = 3,
   leftLabel,
@@ -79,7 +79,7 @@ export default function ActivityCard({
 
   return (
     <div ref={containerRef} style={{
-      background: 'var(--surface,#fff)', border: '1px solid var(--border)', borderRadius: 'var(--rad)',
+      background: 'var(--surface,#fff)', border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rad, 10px)',
       boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04))',
       padding: '14px 18px', position: 'relative', ...style,
     }}>
@@ -89,8 +89,8 @@ export default function ActivityCard({
           {showDot && (
             <span style={{ width: 8, height: 8, borderRadius: '50%', background: dotColor || greenColor, flexShrink: 0 }} />
           )}
-          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text)', letterSpacing: '-.01em' }}>{title}</span>
-          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500 }}>{subtitle}</span>}
+          <span style={{ fontSize: '.78rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', letterSpacing: '-.01em' }}>{title}</span>
+          {subtitle && <span style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{subtitle}</span>}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
           <LegendDot color={greenColor} label="Success" />
@@ -135,43 +135,43 @@ export default function ActivityCard({
         <div style={{
           position: 'absolute', left: tooltipPos.x, top: tooltipPos.y,
           transform: 'translate(-50%, -100%)', background: 'var(--surface,#fff)',
-          border: '1px solid var(--border)', borderRadius: 'var(--rads, 8px)',
+          border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rads, 8px)',
           boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))', padding: '10px 14px',
           pointerEvents: 'none', zIndex: 100, whiteSpace: 'nowrap',
           animation: 'hoverCardIn .15s ease',
         }}>
-          <div style={{ fontSize: '.65rem', color: 'var(--muted)', fontWeight: 500, marginBottom: 4 }}>
+          <div style={{ fontSize: '.65rem', color: 'var(--muted, #797b8d)', fontWeight: 500, marginBottom: 4 }}>
             {dates[hovered]?.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
           </div>
           {h.success > 0 && (
             <div style={{ fontSize: '.7rem', fontWeight: 700, color: greenColor }}>
               {h.success} success{h.success !== 1 ? 'es' : ''}
-              {h.failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.success / hTotal) * 100)}%)</span>}
+              {h.failed > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((h.success / hTotal) * 100)}%)</span>}
             </div>
           )}
           {h.failed > 0 && (
             <div style={{ fontSize: '.7rem', fontWeight: 700, color: redColor }}>
               {h.failed} failed{h.failed !== 1 ? 's' : ''}
-              {h.success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted)' }}> ({Math.round((h.failed / hTotal) * 100)}%)</span>}
+              {h.success > 0 && <span style={{ fontWeight: 500, color: 'var(--muted, #797b8d)' }}> ({Math.round((h.failed / hTotal) * 100)}%)</span>}
             </div>
           )}
           {!h.success && !h.failed && (
-            <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted)' }}>No activity</div>
+            <div style={{ fontSize: '.7rem', fontWeight: 500, color: 'var(--muted, #797b8d)' }}>No activity</div>
           )}
           <div style={{
             position: 'absolute', left: '50%', bottom: -5,
             transform: 'translateX(-50%) rotate(45deg)',
             width: 8, height: 8, background: 'var(--surface,#fff)',
-            borderRight: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
+            borderRight: '1px solid var(--border, #e2e8f0)', borderBottom: '1px solid var(--border, #e2e8f0)',
           }} />
         </div>
       )}
 
       {/* Footer */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{leftLabel || ''}</span>
-        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono)' }}>{uptimePercent}%</span>
-        <span style={{ fontSize: '.58rem', color: 'var(--muted)', fontWeight: 500 }}>{rightLabel || ''}</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{leftLabel || ''}</span>
+        <span style={{ fontSize: '.78rem', fontWeight: 700, color: greenColor, fontFamily: 'var(--mono, ui-monospace, monospace)' }}>{uptimePercent}%</span>
+        <span style={{ fontSize: '.58rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{rightLabel || ''}</span>
       </div>
       <style>{`
         @keyframes hoverCardIn {

package/components/AuthOverlay.jsx

@@ -59,7 +59,7 @@ export default function AuthOverlay({ status, onDone }) {
       flexDirection:  'column',
       alignItems:     'center',
       justifyContent: 'center',
-      background:     'var(--surface)',
+      background:     'var(--surface, #ffffff)',
       borderRadius:   'inherit',
       opacity:        closing ? 0 : 1,
       transition:     `opacity ${FADE}ms ease`,
@@ -79,8 +79,8 @@ export default function AuthOverlay({ status, onDone }) {
         <svg width={38} height={38} viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" style={{ animation: 'spin .7s linear infinite' }}>
           <g fill="none" fillRule="evenodd">
             <g transform="translate(1 1)" strokeWidth="2.5">
-              <circle strokeOpacity=".2" cx="18" cy="18" r="18" stroke="var(--accent)" />
-              <path d="M36 18c0-9.94-8.06-18-18-18" stroke="var(--accent)" strokeLinecap="round" />
+              <circle strokeOpacity=".2" cx="18" cy="18" r="18" stroke="var(--accent, #f99e2c)" />
+              <path d="M36 18c0-9.94-8.06-18-18-18" stroke="var(--accent, #f99e2c)" strokeLinecap="round" />
             </g>
           </g>
         </svg>

package/components/BrandingCard.jsx

@@ -56,8 +56,8 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         gap: 10,
-        padding: '10px 12px', borderRadius: 'var(--rads)',
-        border: '1px solid var(--border-light)', background: 'var(--surface)',
+        padding: '10px 12px', borderRadius: 'var(--rads, 8px)',
+        border: '1px solid var(--border-light, #ebebf0)', background: 'var(--surface, #ffffff)',
         boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
         ...cardStyle,
       }}>
@@ -65,26 +65,26 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
           <img src={previewUrl} alt={label} onClick={() => fullview && setPreviewOpen(true)}
             style={{ height: fullview ? 24 : 32, width: fullview ? 'auto' : 32, objectFit: 'contain', borderRadius: 4, flexShrink: 0, cursor: fullview ? 'pointer' : 'default' }} />
         ) : (
-          <div style={{ width: fullview ? 24 : 32, height: fullview ? 24 : 32, borderRadius: 4, background: 'var(--grey-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <div style={{ width: fullview ? 24 : 32, height: fullview ? 24 : 32, borderRadius: 4, background: 'var(--grey-2, #ebebee)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--muted, #797b8d)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
             </svg>
           </div>
         )}
         {!fullview && (
-          <div style={{ flex: 1, minWidth: 0, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <div style={{ flex: 1, minWidth: 0, fontSize: '.78rem', color: filename ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)', fontFamily: filename ? 'var(--mono, ui-monospace, monospace)' : 'inherit', wordBreak: 'break-all', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
             {filename || 'Not set'}
           </div>
         )}
         <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
           <Button variant="ghost" size="xs" type="button" icon={<Pencil size={11} />} onClick={() => setEditOpen(true)} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--t, #333)' } : undefined}>Edit</Button>
           {hasExisting && (
-            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--danger)' } : { color: 'var(--danger)' }}
+            <Button variant="ghost" size="xs" type="button" icon={<Trash2 size={11} />} style={cardStyle ? { background: 'var(--surface,#fff)', color: 'var(--danger, #f64747)' } : { color: 'var(--danger, #f64747)' }}
               onClick={handleRemove} disabled={saving}>Remove</Button>
           )}
         </div>
       </div>
-      <div style={{ fontSize: '.68rem', color: 'var(--muted)', marginTop: 4 }}>{hint}</div>
+      <div style={{ fontSize: '.68rem', color: 'var(--muted, #797b8d)', marginTop: 4 }}>{hint}</div>
 
       {previewOpen && (
         <Modal title={label} open={previewOpen} onClose={() => setPreviewOpen(false)}
@@ -106,35 +106,35 @@ export function BrandingCard({ label, hint, value, onUpload, onRemove, saving, o
             </>
           }>
           <label
-            onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--accent)'; }}
-            onDragLeave={e => { e.currentTarget.style.borderColor = pendingFile ? 'var(--accent)' : 'var(--border)'; }}
+            onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
+            onDragLeave={e => { e.currentTarget.style.borderColor = pendingFile ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'; }}
             onDrop={e => { e.preventDefault(); const f = e.dataTransfer.files[0]; if (f) handleFileDrop(f); }}
             style={{
               display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads)',
-              border: `1.5px dashed ${pendingFile ? 'var(--accent)' : 'var(--border)'}`,
-              background: 'var(--grey-1)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
+              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads, 8px)',
+              border: `1.5px dashed ${pendingFile ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+              background: 'var(--grey-1, #f5f5f8)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
             }}>
             <input type="file" accept="image/*,.ico" style={{ display: 'none' }}
               onChange={e => { const f = e.target.files[0]; if (f) handleFileDrop(f); }} />
             {pendingFile ? (
               <>
                 <img src={URL.createObjectURL(pendingFile)} alt="preview" style={{ height: 48, maxWidth: 160, objectFit: 'contain', borderRadius: 4 }} />
-                <div style={{ fontSize: '.76rem', fontWeight: 600, color: 'var(--accent)' }}>{pendingFile.name}</div>
-                <div style={{ fontSize: '.68rem', color: 'var(--muted)' }}>{(pendingFile.size / 1024).toFixed(1)} KB — click to change</div>
+                <div style={{ fontSize: '.76rem', fontWeight: 600, color: 'var(--accent, #f99e2c)' }}>{pendingFile.name}</div>
+                <div style={{ fontSize: '.68rem', color: 'var(--muted, #797b8d)' }}>{(pendingFile.size / 1024).toFixed(1)} KB — click to change</div>
               </>
             ) : (
               <>
-                <Upload size={20} style={{ color: 'var(--muted)' }} />
+                <Upload size={20} style={{ color: 'var(--muted, #797b8d)' }} />
                 <div style={{ fontSize: '.82rem', fontWeight: 600 }}>Click or drag to upload</div>
-                <div style={{ fontSize: '.72rem', color: 'var(--muted)' }}>PNG, JPG, SVG, ICO up to 2MB</div>
+                <div style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>PNG, JPG, SVG, ICO up to 2MB</div>
               </>
             )}
           </label>
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 4px' }}>
-            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
-            <span style={{ fontSize: '.72rem', color: 'var(--muted)' }}>or enter URL directly</span>
-            <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
+            <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)' }}>or enter URL directly</span>
+            <div style={{ flex: 1, height: 1, background: 'var(--border, #e2e8f0)' }} />
           </div>
           <Input type="url" placeholder="https://example.com/logo.png" value={pendingUrl}
             onChange={e => { setPendingUrl(e.target.value); setPendingFile(null); }}

package/components/Checkbox.jsx

@@ -27,9 +27,9 @@ export default function Checkbox({ checked, indeterminate, onChange, disabled =
     }}>
       <span style={{
         position: 'relative', width: dims.w, height: dims.h, flexShrink: 0,
-        border: `1.5px solid ${checked || indeterminate ? 'var(--accent)' : 'var(--border)'}`,
+        border: `1.5px solid ${checked || indeterminate ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
         borderRadius: size === 'sm' ? 3 : 4,
-        background: checked || indeterminate ? 'var(--accent)' : 'var(--input-bg)',
+        background: checked || indeterminate ? 'var(--accent, #f99e2c)' : 'var(--input-bg, #ffffff)',
         transition: 'all .14s',
         cursor: disabled ? 'not-allowed' : 'pointer',
       }}>

package/components/ChipSelect.jsx

@@ -27,15 +27,15 @@ export default function ChipSelect({ options, value = [], onChange, size = 'md'
               display:'flex', alignItems:'center', gap: dims.gap,
               padding:`${dims.py}px ${dims.px}px`, cursor:'pointer',
               borderRadius: 8,
-              background: 'var(--grey-1)',
+              background: 'var(--grey-1, #f5f5f8)',
               transition: 'all .14s',
               userSelect: 'none',
             }}>
             <span style={{
               position:'relative', width: dims.h, height: dims.h, flexShrink:0,
               borderRadius: 4,
-              background: active ? 'var(--accent)' : 'var(--input-bg)',
-              border: `1.5px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
+              background: active ? 'var(--accent, #f99e2c)' : 'var(--input-bg, #ffffff)',
+              border: `1.5px solid ${active ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
               transition: 'all .14s',
               display:'flex', alignItems:'center', justifyContent:'center',
             }}>
@@ -45,7 +45,7 @@ export default function ChipSelect({ options, value = [], onChange, size = 'md'
                 </svg>
               )}
             </span>
-            <span style={{ fontSize: dims.font, fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', color: 'var(--muted)' }}>{opt.label}</span>
+            <span style={{ fontSize: dims.font, fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', color: 'var(--muted, #797b8d)' }}>{opt.label}</span>
           </div>
         );
       })}

package/components/CircularProgress.jsx

@@ -13,7 +13,7 @@ export default function CircularProgress({
   segments,
   size = 'md',
   customSize,
-  color = 'var(--blue)',
+  color = 'var(--blue, #2782e4)',
   trackColor = 'var(--bd2, #e0e0e4)',
   label = '',
   centerText,
@@ -201,7 +201,7 @@ export default function CircularProgress({
           <div style={{
             position: 'absolute', inset: 0,
             display: 'flex', alignItems: 'center', justifyContent: 'center',
-            fontSize, fontWeight: 600, color: 'var(--primary-text)',
+            fontSize, fontWeight: 600, color: 'var(--primary-text, #0f172a)',
             fontVariantNumeric: 'tabular-nums',
           }}>
             {centerText !== undefined ? centerText : hasSegments ? rawSum : `${Math.round(pct)}%`}
@@ -209,7 +209,7 @@ export default function CircularProgress({
         )}
       </div>
       {label && (
-        <span style={{ fontSize: '.6rem', color: 'var(--muted)', fontWeight: 500 }}>{label}</span>
+        <span style={{ fontSize: '.6rem', color: 'var(--muted, #797b8d)', fontWeight: 500 }}>{label}</span>
       )}
     </div>
   );

package/components/Confirm.jsx

@@ -35,7 +35,7 @@ export function ConfirmRoot() {
       onClick={e => e.target === e.currentTarget && answer(false)}
     >
       <div style={{
-        background: 'var(--surface)', border: '1px solid var(--border)',
+        background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
         borderRadius: 14, width: '100%', maxWidth: 400,
         boxShadow: 'var(--slg, 0 20px 60px rgba(0,0,0,.4))',
         animation: `${closing ? 'modalClose' : 'modalPop'} .25s cubic-bezier(.4,0,.2,1) forwards`,
@@ -46,13 +46,13 @@ export function ConfirmRoot() {
             background: state.danger ? 'var(--dd, rgba(246,71,71,.1))' : 'var(--pd, rgba(249,158,44,.1))',
             display: 'flex', alignItems: 'center', justifyContent: 'center',
           }}>
-            <AlertTriangle size={17} color={state.danger ? 'var(--danger)' : 'var(--warning)'} />
+            <AlertTriangle size={17} color={state.danger ? 'var(--danger, #f64747)' : 'var(--warning, #f59e0b)'} />
           </div>
           <div>
             <div style={{ fontWeight: 700, fontSize: '.9rem', marginBottom: 6 }}>
               {state.title || 'Are you sure?'}
             </div>
-            <div style={{ fontSize: '.8rem', color: 'var(--muted)', lineHeight: 1.6 }}>
+            <div style={{ fontSize: '.8rem', color: 'var(--muted, #797b8d)', lineHeight: 1.6 }}>
               {state.message}
             </div>
           </div>
@@ -60,11 +60,11 @@ export function ConfirmRoot() {
         <div style={{
           display: 'flex', justifyContent: 'flex-end', gap: 8,
           padding: '16px 20px', marginTop: 18,
-          borderTop: '1px solid var(--border-light)',
-          background: 'var(--grey-1)', borderRadius: '0 0 14px 14px',
+          borderTop: '1px solid var(--border-light, #ebebf0)',
+          background: 'var(--grey-1, #f5f5f8)', borderRadius: '0 0 14px 14px',
         }}>
           <Button variant="ghost" size="sm" onClick={() => answer(false)}>Cancel</Button>
-          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger)', color: 'var(--def-btn-text,#fff)', border: 'none' } : {}} onClick={() => answer(true)}>
+          <Button variant={state.danger ? 'ghost' : 'primary'} size="sm" style={state.danger ? { background: 'var(--danger, #f64747)', color: 'var(--def-btn-text,#fff)', border: 'none' } : {}} onClick={() => answer(true)}>
             {state.confirmLabel || 'Confirm'}
           </Button>
         </div>