From 44e36f7dd22ed6a8e40bb192c9ceabc9f8abe3dc Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Thu, 18 Jun 2026 19:03:21 -0400 Subject: [PATCH] fix(search): use proper folds color tokens for date range picker (P4-9) 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 --- src/app/features/message-search/SearchFilters.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx index ffdcf321f..5b61fe80b 100644 --- a/src/app/features/message-search/SearchFilters.tsx +++ b/src/app/features/message-search/SearchFilters.tsx @@ -25,6 +25,7 @@ import { Badge, RectCords, } from 'folds'; +import { color } from 'folds'; import { SearchOrderBy } from 'matrix-js-sdk'; import FocusTrap from 'focus-trap-react'; import { useVirtualizer } from '@tanstack/react-virtual'; @@ -372,8 +373,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) { max={toDate || undefined} onChange={(e) => handleFrom(e.target.value)} style={{ - background: 'var(--bg-surface-variant)', - border: '1px solid var(--border-surface-variant)', + background: color.SurfaceVariant.Container, + border: `1px solid ${color.SurfaceVariant.ContainerLine}`, borderRadius: config.radii.R300, color: 'inherit', fontSize: '0.82rem', @@ -389,8 +390,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) { min={fromDate || undefined} onChange={(e) => handleTo(e.target.value)} style={{ - background: 'var(--bg-surface-variant)', - border: '1px solid var(--border-surface-variant)', + background: color.SurfaceVariant.Container, + border: `1px solid ${color.SurfaceVariant.ContainerLine}`, borderRadius: config.radii.R300, color: 'inherit', fontSize: '0.82rem',