From 9684ab75bb227f2e88efc831731291313a013cdb Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Sun, 28 Jun 2026 21:54:42 -0400
Subject: [PATCH] fix(ui): replace ungated invented CSS vars with folds tokens
 (native-cinny audit 1/N)

Audit of our delta vs Cinny v4.12.3 found invented CSS vars (--tc-*, --bg-*)
used outside Lotus-Terminal-gated code, which render unstyled/wrong on stock
themes. Batch 1:
- MemberVerificationBadge: --tc-positive/warning-normal -> color.Success/Warning.Main
- RoomInput (gif/location errors): --tc-danger-normal -> color.Critical.Main
- MsgTypeRenderers (location iframe): --bg-surface-border -> color.SurfaceVariant.ContainerLine
- MessageSearch (cached-room row): --bg-surface-variant -> color.SurfaceVariant.Container
- PrescreenControls (mic-denied): --tc-critical-high -> color.Critical.Main

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/app/components/MemberVerificationBadge.tsx   |  7 +++----
 src/app/components/message/MsgTypeRenderers.tsx  |  2 +-
 src/app/features/call/PrescreenControls.tsx      |  7 ++-----
 .../features/message-search/MessageSearch.tsx    | 16 ++++++++++++++--
 src/app/features/room/RoomInput.tsx              |  4 ++--
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/app/components/MemberVerificationBadge.tsx b/src/app/components/MemberVerificationBadge.tsx
index 2a206532d..bb06fbe9e 100644
--- a/src/app/components/MemberVerificationBadge.tsx
+++ b/src/app/components/MemberVerificationBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';
 
 type MemberVerificationBadgeProps = {
@@ -9,8 +9,7 @@ type MemberVerificationBadgeProps = {
 export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
   const vs = useUserVerifiedStatus(userId);
   if (vs === 'unknown') return null;
-  const color =
-    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
+  const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
   const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
   return (
     <TooltipProvider
@@ -27,7 +26,7 @@ export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps
           title={label}
           style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
         >
-          <Icon size="100" src={Icons.ShieldUser} style={{ color }} />
+          <Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
         </span>
       )}
     </TooltipProvider>
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index d29a5056d..2a71e27db 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -529,7 +529,7 @@ export function MLocation({ content }: MLocationProps) {
         style={{
           width: '280px',
           height: '160px',
-          border: '1px solid var(--bg-surface-border)',
+          border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
           borderRadius: '8px',
           display: 'block',
         }}
diff --git a/src/app/features/call/PrescreenControls.tsx b/src/app/features/call/PrescreenControls.tsx
index f624ec6af..0e6c5efef 100644
--- a/src/app/features/call/PrescreenControls.tsx
+++ b/src/app/features/call/PrescreenControls.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
+import { Box, Button, color, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
 import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls';
@@ -78,10 +78,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
       </Box>
       <Box grow="Yes" direction="Column" gap="200">
         {micDenied && (
-          <Text
-            size="T200"
-            style={{ color: 'var(--tc-critical-high, #e53e3e)', textAlign: 'center' }}
-          >
+          <Text size="T200" style={{ color: color.Critical.Main, textAlign: 'center' }}>
             Microphone access is blocked. Enable it in your browser settings to join.
           </Text>
         )}
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index e5a7590bf..b99995885 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -1,5 +1,17 @@
 import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem, Button } from 'folds';
+import {
+  Text,
+  Box,
+  Icon,
+  Icons,
+  color,
+  config,
+  Spinner,
+  IconButton,
+  Line,
+  toRem,
+  Button,
+} from 'folds';
 import { useAtom, useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -112,7 +124,7 @@ function EncryptedRoomCachePanel({ roomIds, onLoaded }: EncryptedRoomCachePanelP
             gap="200"
             style={{
               padding: config.space.S200,
-              background: 'var(--bg-surface-variant)',
+              background: color.SurfaceVariant.Container,
               borderRadius: config.radii.R300,
             }}
           >
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 9e0a0bc32..9b4aa2290 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -1106,7 +1106,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 <Text
                   size="T200"
                   style={{
-                    color: 'var(--tc-danger-normal)',
+                    color: color.Critical.Main,
                     padding: '2px 6px',
                     alignSelf: 'center',
                     whiteSpace: 'nowrap',
@@ -1119,7 +1119,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                 <Text
                   size="T200"
                   style={{
-                    color: 'var(--tc-danger-normal)',
+                    color: color.Critical.Main,
                     padding: '2px 6px',
                     alignSelf: 'center',
                     whiteSpace: 'nowrap',