cynx-ui 1.3.19 → 1.3.21

package/components/DatePicker.jsx

@@ -7,7 +7,7 @@ import { ChevronLeft, ChevronRight, Calendar } from 'lucide-react';
 //   value        – Date object or null
 //   onChange     – called with Date object
 //   placeholder  – string shown when no date selected
-//   badges       – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent)' } } for day badges
+//   badges       – object { 'YYYY-MM-DD': { dot: true, color: 'var(--accent, #f99e2c)' } } for day badges
 //   minDate      – Date object, days before this are disabled
 //   maxDate      – Date object, days after this are disabled
 //   disabled     – boolean
@@ -246,7 +246,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         {/* Weekday headers */}
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 4 }}>
           {DAYS.map(d => (
-            <div key={d} style={{ textAlign: 'center', fontSize: '.68rem', fontWeight: 700, color: 'var(--muted)', padding: '4px 0', fontFamily: 'var(--mono)' }}>{d}</div>
+            <div key={d} style={{ textAlign: 'center', fontSize: '.68rem', fontWeight: 700, color: 'var(--muted, #797b8d)', padding: '4px 0', fontFamily: 'var(--mono, ui-monospace, monospace)' }}>{d}</div>
           ))}
         </div>
         {/* Day cells */}
@@ -268,13 +268,13 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                     textAlign: 'center',
                     padding: '6px 2px',
                     fontSize: '.78rem',
-                    color: dis ? 'var(--border, #e5e7eb)' : 'var(--muted)',
+                    color: dis ? 'var(--border, #e5e7eb)' : 'var(--muted, #797b8d)',
                     cursor: dis ? 'not-allowed' : 'pointer',
                     borderRadius: 'var(--radxs, 6px)',
                     transition: 'background .12s',
                     opacity: dis ? 0.35 : 0.7,
                   }}
-                  onMouseEnter={e => { if (!dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+                  onMouseEnter={e => { if (!dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
                   onMouseLeave={e => { if (!dis) e.currentTarget.style.background = 'transparent'; }}
                 >
                   {c.day}
@@ -294,20 +294,20 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 position: 'relative', textAlign: 'center', padding: '6px 2px',
                 fontSize: '.8rem', fontWeight: sel ? 700 : today ? 600 : 400,
                 borderRadius: 'var(--radxs, 6px)', cursor: dis ? 'not-allowed' : 'pointer',
-                background: sel ? 'var(--accent)' : 'transparent',
-                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : today ? 'var(--accent)' : 'var(--primary-text)',
-                border: today && !sel ? '1.5px solid var(--accent)' : '1.5px solid transparent',
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : today ? 'var(--accent, #f99e2c)' : 'var(--primary-text, #0f172a)',
+                border: today && !sel ? '1.5px solid var(--accent, #f99e2c)' : '1.5px solid transparent',
                 transition: 'background .12s, color .12s',
                 opacity: dis ? 0.35 : 1,
               }}
-              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
               onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}>
                 {c.day}
                 {badge && (
                   <span style={{
                     position: 'absolute', bottom: 2, left: '50%', transform: 'translateX(-50%)',
                     width: 4, height: 4, borderRadius: '50%',
-                    background: badge.color || 'var(--accent)',
+                    background: badge.color || 'var(--accent, #f99e2c)',
                   }} />
                 )}
               </div>
@@ -352,11 +352,11 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 fontWeight: 600,
                 cursor: dis ? 'not-allowed' : 'pointer',
                 opacity: dis ? 0.35 : 1,
-                background: sel ? 'var(--accent)' : 'transparent',
-                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : 'var(--primary-text)',
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
                 transition: 'background .12s',
               }}
-              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
               onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
             >
               {name}
@@ -402,11 +402,11 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 fontWeight: 600,
                 cursor: dis ? 'not-allowed' : 'pointer',
                 opacity: dis ? 0.35 : 1,
-                background: sel ? 'var(--accent)' : 'transparent',
-                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border)' : 'var(--primary-text)',
+                background: sel ? 'var(--accent, #f99e2c)' : 'transparent',
+                color: sel ? 'var(--def-btn-text,#fff)' : dis ? 'var(--border, #e2e8f0)' : 'var(--primary-text, #0f172a)',
                 transition: 'background .12s',
               }}
-              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseEnter={e => { if (!sel && !dis) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
               onMouseLeave={e => { if (!sel && !dis) e.currentTarget.style.background = 'transparent'; }}
             >
               {yr}
@@ -450,15 +450,15 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(-1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads)',
-          border: '1px solid var(--border)', background: 'var(--surface)',
+          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
           cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
-          color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+          color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
           flexShrink: 0
         }}
         title="Previous day (-1)"
-        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
-        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
+        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
       >
         <ChevronLeft size={15} />
       </button>
@@ -474,15 +474,15 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
         onClick={(e) => { e.stopPropagation(); changeDay(1); }}
         style={{
           display: 'flex', alignItems: 'center', justifyContent: 'center',
-          width: 32, height: 32, borderRadius: 'var(--rads)',
-          border: '1px solid var(--border)', background: 'var(--surface)',
+          width: 32, height: 32, borderRadius: 'var(--rads, 8px)',
+          border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
           cursor: dis ? 'not-allowed' : 'pointer', opacity: dis ? 0.35 : 1,
-          color: 'var(--muted)', transition: 'all .15s', boxShadow: 'var(--shadow)',
+          color: 'var(--muted, #797b8d)', transition: 'all .15s', boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
           flexShrink: 0
         }}
         title="Next day (+1)"
-        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; } }}
-        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--muted)'; }}
+        onMouseEnter={e => { if (!dis) { e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; e.currentTarget.style.color = 'var(--accent, #f99e2c)'; } }}
+        onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}
       >
         <ChevronRight size={15} />
       </button>
@@ -492,23 +492,23 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   const renderTriggerBtn = () => (
     <button ref={btnRef} type="button" onClick={toggleOpen} style={{
       display: 'flex', alignItems: 'center', gap: 7,
-      padding: '5px 10px', borderRadius: 'var(--rads)',
-      border: '1px solid var(--border)', background: 'var(--surface)',
+      padding: '5px 10px', borderRadius: 'var(--rads, 8px)',
+      border: '1px solid var(--border, #e2e8f0)', background: 'var(--surface, #ffffff)',
       cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1,
-      fontSize: '.8rem', color: formatted ? 'var(--primary-text)' : 'var(--muted)',
-      fontFamily: 'var(--sans)', transition: 'border-color .15s',
-      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow)',
+      fontSize: '.8rem', color: formatted ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)',
+      fontFamily: 'var(--sans, inherit)', transition: 'border-color .15s',
+      whiteSpace: 'nowrap', minWidth: 140, height: 32, boxShadow: 'var(--shadow, 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06))',
     }}
-    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent)'; }}
-    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; }}>
-      <Calendar size={13} style={{ color: 'var(--muted)', flexShrink: 0 }} />
+    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--accent, #f99e2c)'; }}
+    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border, #e2e8f0)'; }}>
+      <Calendar size={13} style={{ color: 'var(--muted, #797b8d)', flexShrink: 0 }} />
       <span style={{ flex: 1, textAlign: 'left' }}>{formatted || placeholder}</span>
       {value && (
         <span
           onClick={e => { e.stopPropagation(); onChange?.(null); }}
-          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
-          onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger)'; }}
-          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted)'; }}>
+          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--muted, #797b8d)', cursor: 'pointer', flexShrink: 0, fontSize: 13, lineHeight: 1, padding: '0 2px' }}
+          onMouseEnter={e => { e.currentTarget.style.color = 'var(--danger, #f64747)'; }}
+          onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted, #797b8d)'; }}>
           ✕
         </span>
       )}
@@ -524,7 +524,7 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
   return (
     <div style={{ display: 'inline-flex', flexDirection: 'column', position: 'relative', width: style?.width || 'auto', boxSizing: 'border-box', minWidth: 0, ...style }}>
       {label && (
-        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}>
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, var(--muted, #797b8d))', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block', marginBottom: 4 }}>
           {label}
         </label>
       )}
@@ -544,8 +544,8 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
       {open && createPortal(
         <div ref={dropRef} style={{
           position: 'fixed', top: pos.top, left: pos.left, width: pos.width, zIndex: 9000,
-          background: 'var(--surface)', border: '1px solid var(--border)',
-          borderRadius: 'var(--rad, 10px)', boxShadow: 'var(--shadow-lg)',
+          background: 'var(--surface, #ffffff)', border: '1px solid var(--border, #e2e8f0)',
+          borderRadius: 'var(--rad, 10px)', boxShadow: 'var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.06))',
           padding: '10px 12px',
           animation: 'dp-in .12s ease',
         }}>
@@ -560,15 +560,15 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 cursor: isNavPrevDisabled() ? 'not-allowed' : 'pointer',
                 opacity: isNavPrevDisabled() ? 0.35 : 1,
                 padding: 4, borderRadius: 'var(--radxs, 6px)',
-                color: 'var(--muted)', display: 'flex', alignItems: 'center'
+                color: 'var(--muted, #797b8d)', display: 'flex', alignItems: 'center'
               }}
-              onMouseEnter={e => { if (!isNavPrevDisabled()) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseEnter={e => { if (!isNavPrevDisabled()) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}
             >
               <ChevronLeft size={15} />
             </button>
-            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1)'}
+            <button type="button" onClick={cycleView} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '.82rem', fontWeight: 700, color: 'var(--primary-text, #0f172a)', padding: '4px 8px', borderRadius: 'var(--radxs, 6px)', fontFamily: 'var(--sans, inherit)' }}
+              onMouseEnter={e => e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}>
               {headerLabel}
             </button>
@@ -581,9 +581,9 @@ export function DatePicker({ value, onChange, label, placeholder = 'Select date'
                 cursor: isNavNextDisabled() ? 'not-allowed' : 'pointer',
                 opacity: isNavNextDisabled() ? 0.35 : 1,
                 padding: 4, borderRadius: 'var(--radxs, 6px)',
-                color: 'var(--muted)', display: 'flex', alignItems: 'center'
+                color: 'var(--muted, #797b8d)', display: 'flex', alignItems: 'center'
               }}
-              onMouseEnter={e => { if (!isNavNextDisabled()) e.currentTarget.style.background = 'var(--grey-1)'; }}
+              onMouseEnter={e => { if (!isNavNextDisabled()) e.currentTarget.style.background = 'var(--grey-1, #f5f5f8)'; }}
               onMouseLeave={e => e.currentTarget.style.background = 'none'}
             >
               <ChevronRight size={15} />

package/components/Dropzone.jsx

@@ -48,7 +48,7 @@ export function Dropzone({
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       {label && (
-        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, #797b8d)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
           {label}
         </label>
       )}
@@ -65,10 +65,10 @@ export function Dropzone({
           alignItems: 'center',
           justifyContent: 'center',
           padding: '20px 20px',
-          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light)'}`,
-          borderRadius: 'var(--rad)',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light, #ebebf0)'}`,
+          borderRadius: 'var(--rad, 10px)',
           cursor: 'pointer',
-          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1)',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1, #f5f5f8)',
           transition: 'all .2s ease',
           textAlign: 'center',
         }}
@@ -88,7 +88,7 @@ export function Dropzone({
         <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
           Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
         </span>
-        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
       </div>
 
       {/* Uploading progress items */}
@@ -102,19 +102,19 @@ export function Dropzone({
                 flexDirection: 'column',
                 gap: 4,
                 padding: '8px 10px',
-                background: 'var(--surface)',
-                border: '1px solid var(--border-light)',
-                borderRadius: 'var(--rads)',
+                background: 'var(--surface, #ffffff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--rads, 8px)',
                 fontSize: '.8rem',
               }}
             >
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent)" />}
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent, #f99e2c)" />}
                   {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
                   {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
                   <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
-                    {item.name} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                    {item.name} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
                   </span>
                 </div>
 
@@ -129,7 +129,7 @@ export function Dropzone({
                   {onRemoveUploading && (
                     <button
                       onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
-                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted)' }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted, #797b8d)' }}
                     >
                       <X size={14} />
                     </button>
@@ -163,16 +163,16 @@ export function Dropzone({
                   alignItems: 'center',
                   justifyContent: 'space-between',
                   padding: '6px 10px',
-                  background: 'var(--surface)',
-                  border: '1px solid var(--border-light)',
-                  borderRadius: 'var(--rads)',
+                  background: 'var(--surface, #ffffff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--rads, 8px)',
                   fontSize: '.8rem',
                 }}
               >
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-                  <Paperclip size={14} color="var(--accent)" />
+                  <Paperclip size={14} color="var(--accent, #f99e2c)" />
                   <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
-                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
                   </span>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
@@ -188,7 +188,7 @@ export function Dropzone({
                     <Button
                       variant="ghost"
                       size="xs"
-                      icon={<Trash2 size={13} color="var(--err)" />}
+                      icon={<Trash2 size={13} color="var(--err, #f64747)" />}
                       onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
                     />
                   )}

package/components/FilePicker.jsx

@@ -48,7 +48,7 @@ export function FilePicker({
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       {label && (
-        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
+        <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--t2, #797b8d)', textTransform: 'uppercase', letterSpacing: '.08em', display: 'block' }}>
           {label}
         </label>
       )}
@@ -65,10 +65,10 @@ export function FilePicker({
           alignItems: 'center',
           justifyContent: 'center',
           padding: '20px 20px',
-          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light)'}`,
-          borderRadius: 'var(--rad)',
+          border: `2px dashed ${over ? 'var(--accent, #3b82f6)' : 'var(--border-light, #ebebf0)'}`,
+          borderRadius: 'var(--rad, 10px)',
           cursor: 'pointer',
-          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1)',
+          background: over ? 'rgba(59, 130, 246, 0.08)' : 'var(--grey-1, #f5f5f8)',
           transition: 'all .2s ease',
           textAlign: 'center',
         }}
@@ -88,7 +88,7 @@ export function FilePicker({
         <span style={{ fontSize: '.82rem', fontWeight: 600, pointerEvents: 'none' }}>
           Выберите файлы, перетащите их сюда или вставьте через Ctrl+V
         </span>
-        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
+        {hint && <span style={{ fontSize: '.72rem', color: 'var(--muted, #797b8d)', marginTop: 2, pointerEvents: 'none' }}>{hint}</span>}
       </div>
 
       {/* Uploading progress items */}
@@ -102,19 +102,19 @@ export function FilePicker({
                 flexDirection: 'column',
                 gap: 4,
                 padding: '8px 10px',
-                background: 'var(--surface)',
-                border: '1px solid var(--border-light)',
-                borderRadius: 'var(--rads)',
+                background: 'var(--surface, #ffffff)',
+                border: '1px solid var(--border-light, #ebebf0)',
+                borderRadius: 'var(--rads, 8px)',
                 fontSize: '.8rem',
               }}
             >
               <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent)" />}
+                  {item.status === 'uploading' && <Paperclip size={14} color="var(--accent, #f99e2c)" />}
                   {item.status === 'done' && <FileCheck size={14} color="var(--success, #22c55e)" />}
                   {item.status === 'error' && <X size={14} color="var(--err, #ef4444)" />}
                   <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
-                    {item.name} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
+                    {item.name} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(item.size)})</span>
                   </span>
                 </div>
 
@@ -129,7 +129,7 @@ export function FilePicker({
                   {onRemoveUploading && (
                     <button
                       onClick={(e) => { e.stopPropagation(); onRemoveUploading(item.tempId); }}
-                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted)' }}
+                      style={{ border: 'none', background: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted, #797b8d)' }}
                     >
                       <X size={14} />
                     </button>
@@ -163,16 +163,16 @@ export function FilePicker({
                   alignItems: 'center',
                   justifyContent: 'space-between',
                   padding: '6px 10px',
-                  background: 'var(--surface)',
-                  border: '1px solid var(--border-light)',
-                  borderRadius: 'var(--rads)',
+                  background: 'var(--surface, #ffffff)',
+                  border: '1px solid var(--border-light, #ebebf0)',
+                  borderRadius: 'var(--rads, 8px)',
                   fontSize: '.8rem',
                 }}
               >
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-                  <Paperclip size={14} color="var(--accent)" />
+                  <Paperclip size={14} color="var(--accent, #f99e2c)" />
                   <span style={{ textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', fontWeight: 500 }}>
-                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
+                    {f.original_name || f.originalName} <span style={{ color: 'var(--muted, #797b8d)', fontSize: '.72rem' }}>({formatBytes(f.file_size || f.fileSize)})</span>
                   </span>
                 </div>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
@@ -188,7 +188,7 @@ export function FilePicker({
                     <Button
                       variant="ghost"
                       size="xs"
-                      icon={<Trash2 size={13} color="var(--err)" />}
+                      icon={<Trash2 size={13} color="var(--err, #f64747)" />}
                       onClick={(e) => { e.stopPropagation(); onRemoveExisting(f.id); }}
                     />
                   )}

package/components/HoverCard.jsx

@@ -50,7 +50,7 @@ export default function HoverCard({ trigger, children, position = 'top', width =
           zIndex: 9999,
           minWidth: width,
           background: 'var(--surface,#fff)',
-          border: '1px solid var(--border)',
+          border: '1px solid var(--border, #e2e8f0)',
           borderRadius: 'var(--rads, 8px)',
           padding: '10px 14px',
           boxShadow: 'var(--smd, 0 4px 12px rgba(0,0,0,.12))',
@@ -64,9 +64,9 @@ export default function HoverCard({ trigger, children, position = 'top', width =
             [position === 'top' ? 'bottom' : 'top']: -5,
             transform: 'translateX(-50%) rotate(45deg)',
             width: 8, height: 8, background: 'var(--surface,#fff)',
-            borderRight: '1px solid var(--border)',
-            borderBottom: position === 'top' ? 'none' : '1px solid var(--border)',
-            borderTop: position === 'top' ? '1px solid var(--border)' : 'none',
+            borderRight: '1px solid var(--border, #e2e8f0)',
+            borderBottom: position === 'top' ? 'none' : '1px solid var(--border, #e2e8f0)',
+            borderTop: position === 'top' ? '1px solid var(--border, #e2e8f0)' : 'none',
           }} />
         </div>
       )}

package/components/ImageUpload.jsx

@@ -69,9 +69,9 @@ export default function ImageUpload({ value, file, onChange, onRemove, label = '
           <label
             style={{
               display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-              gap: 8, padding: '24px 16px', borderRadius: 'var(--rads)',
-              border: `1.5px dashed ${dragOver ? '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 ${dragOver ? 'var(--accent, #f99e2c)' : 'var(--border, #e2e8f0)'}`,
+              background: 'var(--grey-1, #f5f5f8)', cursor: 'pointer', transition: 'all .15s', textAlign: 'center',
             }}
             onDragOver={e => { e.preventDefault(); setDragOver(true); }}
             onDragLeave={() => setDragOver(false)}
@@ -82,21 +82,21 @@ export default function ImageUpload({ value, file, onChange, onRemove, label = '
             {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"
@@ -104,9 +104,9 @@ export default function ImageUpload({ value, file, onChange, onRemove, label = '
             onChange={e => { setUrlInput(e.target.value); setPendingFile(null); }}
             style={{
               width: '100%', padding: '8px 10px', fontSize: '.82rem',
-              border: '1px solid var(--border)', borderRadius: 'var(--rads)',
-              background: 'var(--input-bg)', color: 'var(--primary-text)',
-              fontFamily: 'var(--sans)', outline: 'none',
+              border: '1px solid var(--border, #e2e8f0)', borderRadius: 'var(--rads, 8px)',
+              background: 'var(--input-bg, #ffffff)', color: 'var(--primary-text, #0f172a)',
+              fontFamily: 'var(--sans, inherit)', outline: 'none',
             }}
           />
         </div>
@@ -123,22 +123,22 @@ export default function ImageUpload({ value, file, onChange, onRemove, label = '
     <>
       <div style={{
         display: 'flex', alignItems: 'center', gap: 12,
-        padding: '10px 12px', borderRadius: 'var(--rads)',
-        border: '1px solid var(--border)', background: 'var(--grey-1)',
+        padding: '10px 12px', borderRadius: 'var(--rads, 8px)',
+        border: '1px solid var(--border, #e2e8f0)', background: 'var(--grey-1, #f5f5f8)',
       }}>
         {hasImage ? (
           <img src={previewUrl} alt={label} style={{ height: 32, maxWidth: 80, objectFit: 'contain', borderRadius: 4, flexShrink: 0 }} />
         ) : (
-          <div style={{ width: 32, height: 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"><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 style={{ width: 32, height: 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>
         )}
-        <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text)' : 'var(--muted)', fontFamily: filename ? 'var(--mono)' : 'inherit', wordBreak: 'break-all' }}>
+        <div style={{ flex: 1, fontSize: '.78rem', color: filename ? 'var(--primary-text, #0f172a)' : 'var(--muted, #797b8d)', fontFamily: filename ? 'var(--mono, ui-monospace, monospace)' : 'inherit', wordBreak: 'break-all' }}>
           {filename || 'Not set yet'}
         </div>
         <Button variant="ghost" size="xs" icon={<Pencil size={12} />} onClick={openEdit} style={{ flexShrink: 0 }}>Edit</Button>
         {hasImage && (
-          <Button variant="ghost" size="xs" icon={<Trash2 size={12} />} style={{ color: 'var(--danger)', flexShrink: 0 }} onClick={onRemove}>Remove</Button>
+          <Button variant="ghost" size="xs" icon={<Trash2 size={12} />} style={{ color: 'var(--danger, #f64747)', flexShrink: 0 }} onClick={onRemove}>Remove</Button>
         )}
       </div>
       {modal}

package/components/Input.jsx

@@ -1,10 +1,10 @@
 import { useRef, useState } from 'react';
 
 const SIZES = {
-  xs: { height: 32, fontSize: 11, paddingH: 8 },
-  sm: { height: 32, fontSize: 12, paddingH: 9 },
+  xs: { height: 24, fontSize: 11, paddingH: 6 },
+  sm: { height: 28, fontSize: 11.5, paddingH: 8 },
   md: { height: 32, fontSize: 13, paddingH: 11 },
-  lg: { height: 32, fontSize: 14, paddingH: 14 },
+  lg: { height: 36, fontSize: 14, paddingH: 14 },
 };
 
 export default function Input({

package/components/LineProgress.jsx

@@ -13,7 +13,7 @@ export default function LineProgress({
   segments,
   size = 'md',
   customSize,
-  color = 'var(--blue)',
+  color = 'var(--blue, #2782e4)',
   trackColor = 'var(--bd2, #e0e0e4)',
   label = '',
   showPercent = true,