LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(search): use proper folds color tokens for date range picker (P4-9)

Browse Source 
Replaces undefined --border-surface-variant CSS variable with
color.SurfaceVariant.ContainerLine from folds, and --bg-surface-variant
with color.SurfaceVariant.Container. Both are valid theme tokens
that adapt to light/dark mode correctly.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-06-18 19:03:21 -04:00
parent a77c4b6db5
commit 44e36f7dd2
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/message-search/SearchFilters.tsx
+5 -4
View File
@@ -25,6 +25,7 @@ import {
Badge, Badge,
RectCords, RectCords,
} from 'folds'; } from 'folds';
import { color } from 'folds';
import { SearchOrderBy } from 'matrix-js-sdk'; import { SearchOrderBy } from 'matrix-js-sdk';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { useVirtualizer } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual';
@@ -372,8 +373,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
max={toDate || undefined} max={toDate || undefined}
onChange={(e) => handleFrom(e.target.value)} onChange={(e) => handleFrom(e.target.value)}
style={{ style={{
background: 'var(--bg-surface-variant)', background: color.SurfaceVariant.Container,
border: '1px solid var(--border-surface-variant)', border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R300, borderRadius: config.radii.R300,
color: 'inherit', color: 'inherit',
fontSize: '0.82rem', fontSize: '0.82rem',
@@ -389,8 +390,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
min={fromDate || undefined} min={fromDate || undefined}
onChange={(e) => handleTo(e.target.value)} onChange={(e) => handleTo(e.target.value)}
style={{ style={{
background: 'var(--bg-surface-variant)', background: color.SurfaceVariant.Container,
border: '1px solid var(--border-surface-variant)', border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
borderRadius: config.radii.R300, borderRadius: config.radii.R300,
color: 'inherit', color: 'inherit',
fontSize: '0.82rem', fontSize: '0.82rem',