refactor(ui): tokenize chat control colors
This commit is contained in:
parent
a77c762bd2
commit
373a72e823
@ -89,38 +89,38 @@ export const normalizeProfileForApply = (profileData: any) => ({
|
||||
const RobotIcon = ({ size = 32 }: { size?: number }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
{/* Antenna */}
|
||||
<line x1="32" y1="6" x2="32" y2="14" stroke="#00ff88" strokeWidth="2.5" strokeLinecap="round" />
|
||||
<circle cx="32" cy="5" r="3" fill="#00ff88" opacity="0.9">
|
||||
<line x1="32" y1="6" x2="32" y2="14" stroke="var(--bl-success)" strokeWidth="2.5" strokeLinecap="round" />
|
||||
<circle cx="32" cy="5" r="3" fill="var(--bl-success)" opacity="0.9">
|
||||
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Head */}
|
||||
<rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1.5" opacity="0.95" />
|
||||
<rect x="14" y="14" width="36" height="28" rx="8" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1.5" opacity="0.95" />
|
||||
{/* Eyes */}
|
||||
<circle cx="24" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="24" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<circle cx="24" cy="28" r="4.5" fill="var(--background)" />
|
||||
<circle cx="24" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
<circle cx="40" cy="28" r="4.5" fill="#0a0b10" />
|
||||
<circle cx="40" cy="28" r="3" fill="#00ff88" opacity="0.9">
|
||||
<circle cx="40" cy="28" r="4.5" fill="var(--background)" />
|
||||
<circle cx="40" cy="28" r="3" fill="var(--bl-success)" opacity="0.9">
|
||||
<animate attributeName="r" values="3;2.5;3" dur="3s" repeatCount="indefinite" />
|
||||
</circle>
|
||||
{/* Mouth */}
|
||||
<rect x="24" y="35" width="16" height="3" rx="1.5" fill="#00ff88" opacity="0.4" />
|
||||
<rect x="24" y="35" width="16" height="3" rx="1.5" fill="var(--bl-success)" opacity="0.4" />
|
||||
{/* Body */}
|
||||
<rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.8" />
|
||||
<rect x="18" y="44" width="28" height="14" rx="5" fill="url(#bodyGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.8" />
|
||||
{/* Body detail */}
|
||||
<circle cx="32" cy="51" r="3" fill="#00ff88" opacity="0.3" />
|
||||
<circle cx="32" cy="51" r="3" fill="var(--bl-success)" opacity="0.3" />
|
||||
{/* Arms */}
|
||||
<rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="#00ff88" strokeWidth="1" opacity="0.7" />
|
||||
<rect x="8" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
|
||||
<rect x="48" y="46" width="8" height="10" rx="4" fill="url(#headGrad)" stroke="var(--bl-success)" strokeWidth="1" opacity="0.7" />
|
||||
<defs>
|
||||
<linearGradient id="headGrad" x1="14" y1="14" x2="50" y2="42" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#12131a" />
|
||||
<stop stopColor="var(--card-elevated)" />
|
||||
<stop offset="1" stopColor="var(--card)" />
|
||||
</linearGradient>
|
||||
<linearGradient id="bodyGrad" x1="18" y1="44" x2="46" y2="58" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#1a1b2e" />
|
||||
<stop offset="1" stopColor="#0f1017" />
|
||||
<stop stopColor="var(--card-elevated)" />
|
||||
<stop offset="1" stopColor="var(--background)" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
@ -310,7 +310,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
const panelStyle: React.CSSProperties = {
|
||||
background: 'var(--card)',
|
||||
border: '1px solid var(--border)',
|
||||
boxShadow: '0 25px 80px rgba(0,0,0,0.22)',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
};
|
||||
const inputStyle: React.CSSProperties = {
|
||||
background: 'var(--input)',
|
||||
@ -361,7 +361,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
justifyContent: 'center',
|
||||
background: 'var(--card)',
|
||||
border: '1.5px solid var(--border)',
|
||||
boxShadow: '0 8px 32px rgba(0,0,0,0.18), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)',
|
||||
boxShadow: 'var(--card-shadow), 0 0 20px color-mix(in oklab, var(--ring) 16%, transparent)',
|
||||
transition: 'transform 0.2s',
|
||||
}}>
|
||||
<RobotIcon size={34} />
|
||||
@ -404,7 +404,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
position: 'fixed',
|
||||
inset: 0,
|
||||
zIndex: 999998,
|
||||
background: 'rgba(15, 23, 42, 0.45)',
|
||||
background: 'color-mix(in oklab, var(--background) 45%, transparent)',
|
||||
backdropFilter: 'blur(6px)',
|
||||
animation: 'fadeIn 0.15s ease-out',
|
||||
}}
|
||||
@ -438,7 +438,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center" style={{
|
||||
background: 'var(--card)',
|
||||
border: '1px solid var(--border)',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}>
|
||||
<RobotIcon size={26} />
|
||||
</div>
|
||||
@ -478,10 +478,10 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
<div className={`max-w-[85%] ${msg.role === 'user' ? 'text-right' : ''}`}>
|
||||
<div className="rounded-xl px-3.5 py-2.5 text-[12px] leading-relaxed" style={{
|
||||
background: msg.role === 'user'
|
||||
? 'linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.08))'
|
||||
? 'linear-gradient(135deg, var(--bl-info-muted), color-mix(in oklab, var(--bl-info) 8%, transparent))'
|
||||
: 'var(--card)',
|
||||
border: `1px solid ${msg.role === 'user' ? 'rgba(59,130,246,0.2)' : 'var(--border)'}`,
|
||||
color: msg.role === 'user' ? '#93c5fd' : 'var(--foreground)',
|
||||
border: `1px solid ${msg.role === 'user' ? 'var(--bl-info-border, var(--bl-info))' : 'var(--border)'}`,
|
||||
color: msg.role === 'user' ? 'var(--bl-info)' : 'var(--foreground)',
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}>
|
||||
{msg.content}
|
||||
@ -499,7 +499,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
<div className="mt-2 rounded-xl overflow-hidden" style={{
|
||||
background: 'var(--card-elevated)',
|
||||
border: '1px solid var(--border)',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
|
||||
boxShadow: 'var(--card-shadow)',
|
||||
}}>
|
||||
<div className="px-3.5 py-2 flex items-center justify-between" style={{
|
||||
background: 'var(--accent-soft)',
|
||||
@ -642,7 +642,7 @@ export const ChatControl = ({ profiles, onApplyProfile }: ChatControlProps) => {
|
||||
variant="ghost"
|
||||
className="flex-1 py-2.5 flex items-center justify-center gap-1.5 text-[11px] font-bold transition-all hover:bg-white/[0.03]"
|
||||
style={{
|
||||
color: '#fbbf24',
|
||||
color: 'var(--bl-warning)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user