SyslogSolution/ra-h-os
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: migrate hardcoded hex values to CSS vars for light mode

Browse Source 
Replace dark hex values with CSS custom properties across all panel,
card, modal, and focus components so light mode renders correctly.
Backgrounds, borders, and text colors now respond to data-theme attribute.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
2026-03-17 20:15:24 +11:00
co-authored by Claude Sonnet 4.6
parent bf175ad125
commit ffefc7b332
19 changed files with 474 additions and 474 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/DatabaseTableView.tsx
+34 -34
View File
@@ -175,13 +175,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<div style={{
display: 'flex',
alignItems: 'center',
background: '#0d0d0d',
border: '1px solid #222',
background: 'var(var(--rah-bg-surface))',
border: '1px solid var(--rah-border-strong)',
borderRadius: '6px',
padding: '0 8px',
gap: '6px',
}}>
<Search size={12} style={{ color: '#555', flexShrink: 0 }} />
<Search size={12} style={{ color: 'var(var(--rah-text-muted))', flexShrink: 0 }} />
<input
type="text"
value={searchQuery}
@@ -190,7 +190,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
background: 'transparent',
border: 'none',
color: '#f0f0f0',
color: 'var(var(--rah-text-active))',
fontSize: '12px',
padding: '5px 0',
outline: 'none',
@@ -201,7 +201,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<button
type="button"
onClick={() => { setSearchQuery(''); setActiveSearch(''); }}
style={{ background: 'transparent', border: 'none', color: '#555', cursor: 'pointer', padding: 0, display: 'flex' }}
style={{ background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', cursor: 'pointer', padding: 0, display: 'flex' }}
>
<X size={11} />
</button>
@@ -236,8 +236,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', gap: '4px',
padding: '4px 7px', background: 'transparent',
border: '1px solid #222', borderRadius: '5px',
color: '#888', fontSize: '11px', cursor: 'pointer',
border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -249,7 +249,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{showFilterPicker && (
<div style={{
position: 'absolute', top: '100%', left: 0, marginTop: '4px',
background: '#141414', border: '1px solid #222', borderRadius: '10px',
background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
padding: '6px', minWidth: '220px', maxHeight: '320px', overflowY: 'auto',
zIndex: 1000, boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
}}>
@@ -260,13 +260,13 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
placeholder="Search dimensions..."
autoFocus
style={{
width: '100%', padding: '7px 10px', background: '#0d0d0d',
width: '100%', padding: '7px 10px', background: 'var(var(--rah-bg-surface))',
border: '1px solid transparent', borderRadius: '6px',
color: '#f0f0f0', fontSize: '12px', marginBottom: '4px', outline: 'none',
color: 'var(var(--rah-text-active))', fontSize: '12px', marginBottom: '4px', outline: 'none',
}}
/>
{filterPickerDimensions.length === 0 ? (
<div style={{ padding: '12px', color: '#666', fontSize: '12px', textAlign: 'center' }}>
<div style={{ padding: '12px', color: 'var(var(--rah-text-muted))', fontSize: '12px', textAlign: 'center' }}>
No matching dimensions
</div>
) : (
@@ -283,14 +283,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
width: '100%', padding: '7px 10px', background: 'transparent',
border: 'none', borderRadius: '5px', color: '#ccc',
border: 'none', borderRadius: '5px', color: 'var(var(--rah-text-secondary))',
fontSize: '12px', cursor: 'pointer', textAlign: 'left',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
>
<span>{d.dimension}</span>
<span style={{ color: '#555', fontSize: '10px', background: '#1a1a1a', padding: '1px 6px', borderRadius: '10px' }}>
<span style={{ color: 'var(var(--rah-text-muted))', fontSize: '10px', background: 'var(var(--rah-bg-active))', padding: '1px 6px', borderRadius: '10px' }}>
{d.count}
</span>
</button>
@@ -303,7 +303,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{selectedFilters.length > 0 && (
<button
onClick={() => setSelectedFilters([])}
style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: '#666', fontSize: '11px', cursor: 'pointer' }}
style={{ padding: '4px 6px', background: 'transparent', border: 'none', color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer' }}
onMouseEnter={(e) => { e.currentTarget.style.color = '#ef4444'; }}
onMouseLeave={(e) => { e.currentTarget.style.color = '#666'; }}
>
@@ -319,8 +319,8 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
style={{
display: 'flex', alignItems: 'center', gap: '4px',
padding: '4px 7px', background: 'transparent',
border: '1px solid #222', borderRadius: '5px',
color: '#888', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
border: '1px solid var(--rah-border-strong)', borderRadius: '5px',
color: 'var(var(--rah-text-muted))', fontSize: '11px', cursor: 'pointer', whiteSpace: 'nowrap',
}}
onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}
@@ -333,7 +333,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{showSortDropdown && (
<div style={{
position: 'absolute', top: '100%', right: 0, marginTop: '4px',
background: '#141414', border: '1px solid #222', borderRadius: '10px',
background: 'var(var(--rah-bg-panel))', border: '1px solid var(--rah-border-strong)', borderRadius: '10px',
padding: '4px', minWidth: '160px', zIndex: 1000,
boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
}}>
@@ -363,14 +363,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Pagination */}
<div style={{
display: 'flex', alignItems: 'center', gap: '6px',
fontSize: '11px', color: '#666', whiteSpace: 'nowrap',
fontSize: '11px', color: 'var(var(--rah-text-muted))', whiteSpace: 'nowrap',
}}>
<span>{total > 0 ? `${startItem}-${endItem} of ${total}` : '0 nodes'}</span>
<button
onClick={() => setPage(p => Math.max(1, p - 1))}
disabled={page <= 1}
style={{
background: 'transparent', border: '1px solid #222', borderRadius: '4px',
background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
color: page <= 1 ? '#333' : '#888', cursor: page <= 1 ? 'default' : 'pointer',
padding: '2px 4px', display: 'flex',
}}
@@ -381,7 +381,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
onClick={() => setPage(p => Math.min(totalPages, p + 1))}
disabled={page >= totalPages}
style={{
background: 'transparent', border: '1px solid #222', borderRadius: '4px',
background: 'transparent', border: '1px solid var(--rah-border-strong)', borderRadius: '4px',
color: page >= totalPages ? '#333' : '#888',
cursor: page >= totalPages ? 'default' : 'pointer',
padding: '2px 4px', display: 'flex',
@@ -398,7 +398,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{toolbarHost ? createPortal(toolbar, toolbarHost) : (
<div style={{
padding: '8px 12px',
borderBottom: '1px solid #1a1a1a',
borderBottom: '1px solid var(--rah-border)',
display: 'flex',
alignItems: 'center',
gap: '8px',
@@ -410,9 +410,9 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Table */}
<div style={{ flex: 1, overflow: 'auto' }}>
{loading ? (
<div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>Loading...</div>
) : nodes.length === 0 ? (
<div style={{ padding: '40px', color: '#666', textAlign: 'center', fontSize: '13px' }}>
<div style={{ padding: '40px', color: 'var(var(--rah-text-muted))', textAlign: 'center', fontSize: '13px' }}>
{activeSearch || selectedFilters.length > 0 ? 'No nodes match your filters.' : 'No nodes yet.'}
</div>
) : (
@@ -468,7 +468,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
<td style={tdStyle({ textAlign: 'right' })}>
<span style={{
fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
fontSize: '11px', color: '#555',
fontSize: '11px', color: 'var(var(--rah-text-muted))',
}}>
{node.id}
</span>
@@ -477,7 +477,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Description */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '11px', color: '#888' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.description || '\u2014'}
</span>
</div>
@@ -486,7 +486,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Notes */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '11px', color: '#888' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.notes ? node.notes.slice(0, 120) : '\u2014'}
</span>
</div>
@@ -524,7 +524,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
</span>
))}
{node.dimensions.length > 3 && (
<span style={{ fontSize: '9px', color: '#555' }}>
<span style={{ fontSize: '9px', color: 'var(var(--rah-text-muted))' }}>
+{node.dimensions.length - 3}
</span>
)}
@@ -551,14 +551,14 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Updated */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{formatRelativeTime(node.updated_at)}
</span>
</td>
{/* Created */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{formatRelativeTime(node.created_at)}
</span>
</td>
@@ -566,7 +566,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Metadata */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '10px', color: '#555', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
<span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))', fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' }}>
{metaStr || '\u2014'}
</span>
</div>
@@ -575,7 +575,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Chunk */}
<td style={tdStyle()}>
<div style={truncCell}>
<span style={{ fontSize: '10px', color: '#555' }}>
<span style={{ fontSize: '10px', color: 'var(var(--rah-text-muted))' }}>
{node.chunk ? node.chunk.slice(0, 100) : '\u2014'}
</span>
</div>
@@ -593,7 +593,7 @@ export default function DatabaseTableView({ onNodeClick, refreshToken = 0, toolb
{/* Embedding Updated */}
<td style={tdStyle()}>
<span style={{ fontSize: '11px', color: '#666' }}>
<span style={{ fontSize: '11px', color: 'var(var(--rah-text-muted))' }}>
{node.embedding_updated_at ? formatRelativeTime(node.embedding_updated_at) : '\u2014'}
</span>
</td>
@@ -612,11 +612,11 @@ function thStyle(extra: React.CSSProperties = {}): React.CSSProperties {
return {
position: 'sticky' as const,
top: 0,
background: '#0a0a0a',
background: 'var(var(--rah-bg-base))',
padding: '8px 12px',
fontSize: '10px',
fontWeight: 500,
color: '#555',
color: 'var(var(--rah-text-muted))',
textAlign: 'left',
letterSpacing: '0.05em',
whiteSpace: 'nowrap',