refactor(ui): tokenize visual rule builder accents

This commit is contained in:
root 2026-05-07 05:36:16 +00:00
parent fbc31433ac
commit 90ba1d5ac3

View File

@ -99,7 +99,7 @@ function RuleCard({
alignItems: 'center',
gap: 10,
marginBottom: 8,
boxShadow: isDragging ? '0 8px 24px rgba(0,0,0,0.12)' : undefined,
boxShadow: isDragging ? 'var(--card-shadow)' : undefined,
};
const sel: React.CSSProperties = {
@ -117,18 +117,18 @@ function RuleCard({
<div
{...attributes}
{...listeners}
style={{ cursor: 'grab', color: '#D1D5DB', flexShrink: 0, touchAction: 'none' }}
style={{ cursor: 'grab', color: 'var(--bl-text-faint)', flexShrink: 0, touchAction: 'none' }}
>
<GripVertical size={16} />
</div>
{/* Rule label */}
<span style={{ fontSize: 11, fontWeight: 700, color: '#9CA3AF', width: 22, flexShrink: 0 }}>
<span style={{ fontSize: 11, fontWeight: 700, color: 'var(--bl-text-faint)', width: 22, flexShrink: 0 }}>
#{index + 1}
</span>
{/* IF */}
<span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}>IF</span>
<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--bl-text-quiet)' }}>IF</span>
{/* Indicator */}
<Select
@ -164,15 +164,15 @@ function RuleCard({
/>
{/* THEN */}
<span style={{ fontSize: 12, fontWeight: 600, color: '#374151' }}></span>
<span style={{ fontSize: 12, fontWeight: 600, color: 'var(--bl-text-quiet)' }}></span>
{/* Action */}
<Select value={rule.action} style={{
...sel,
color: rule.action === 'BUY' ? '#16A34A' : '#DC2626',
color: rule.action === 'BUY' ? 'var(--bl-success)' : 'var(--bl-danger)',
fontWeight: 700,
background: rule.action === 'BUY' ? '#F0FDF4' : '#FEF2F2',
border: `1px solid ${rule.action === 'BUY' ? '#86EFAC' : '#FCA5A5'}`,
background: rule.action === 'BUY' ? 'var(--bl-success-muted)' : 'var(--bl-danger-muted)',
border: `1px solid ${rule.action === 'BUY' ? 'var(--bl-success)' : 'var(--bl-danger)'}`,
}}
controlSize="sm"
variant="surface"
@ -215,7 +215,7 @@ function RuleCard({
onClick={() => onDelete(rule.id)}
style={{
marginLeft: 'auto', background: 'none', border: 'none',
cursor: 'pointer', color: '#D1D5DB', padding: 4, borderRadius: 6,
cursor: 'pointer', color: 'var(--bl-text-faint)', padding: 4, borderRadius: 6,
display: 'flex', alignItems: 'center',
flexShrink: 0,
}}