From c8ff7b0718accc4da3d952aee25baa99c379384a Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 10 Jun 2026 00:01:12 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20remaining=20LOTUS=5FBUGS.md=20items=20?=
 =?UTF-8?q?=E2=80=94=20hardcoded=20hex=20and=20a11y?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GifPicker: replace #FF6B00 and #060c14 with var(--lt-accent-orange) and
  var(--lt-bg-secondary); rgba opacity values use color-mix()
- VoiceMessageRecorder: replace #FF6B00 and #00FF88 waveform/dot colors
  with var(--lt-accent-orange) / var(--lt-accent-green)
- Presence: replace aria-labelledby referencing a lazy tooltip ID with a
  direct aria-label so screen readers always have the text in the DOM

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/GifPicker.tsx            | 10 +++++-----
 src/app/components/VoiceMessageRecorder.tsx |  6 +++---
 src/app/components/presence/Presence.tsx    |  8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/GifPicker.tsx b/src/app/components/GifPicker.tsx
index 2d19ee5f6..dc10d2f3f 100644
--- a/src/app/components/GifPicker.tsx
+++ b/src/app/components/GifPicker.tsx
@@ -36,12 +36,12 @@ function GifPickerInner({ onSelect, requestClose, lotusTerminal }: GifPickerInne
         <div
           style={{
             padding: '5px 10px 4px',
-            borderBottom: '1px solid rgba(255,107,0,0.2)',
+            borderBottom: '1px solid color-mix(in srgb, var(--lt-accent-orange) 20%, transparent)',
             fontFamily: "'JetBrains Mono', 'Cascadia Code', monospace",
             fontSize: '10px',
             fontWeight: 700,
             letterSpacing: '0.1em',
-            color: '#FF6B00',
+            color: 'var(--lt-accent-orange)',
             userSelect: 'none',
           }}
         >
@@ -82,11 +82,11 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
 
   const containerStyle = lotusTerminal
     ? {
-        background: '#060c14',
-        border: '1px solid rgba(255,107,0,0.35)',
+        background: 'var(--lt-bg-secondary)',
+        border: '1px solid color-mix(in srgb, var(--lt-accent-orange) 35%, transparent)',
         borderRadius: '4px',
         overflow: 'hidden',
-        boxShadow: '0 4px 24px rgba(255,107,0,0.10), 0 0 0 1px rgba(255,107,0,0.08)',
+        boxShadow: '0 4px 24px color-mix(in srgb, var(--lt-accent-orange) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--lt-accent-orange) 8%, transparent)',
         width: `${PICKER_WIDTH}px`,
       }
     : {
diff --git a/src/app/components/VoiceMessageRecorder.tsx b/src/app/components/VoiceMessageRecorder.tsx
index 352ee7ee7..68aa6bc8e 100644
--- a/src/app/components/VoiceMessageRecorder.tsx
+++ b/src/app/components/VoiceMessageRecorder.tsx
@@ -203,7 +203,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             width: toRem(8),
             height: toRem(8),
             borderRadius: '50%',
-            background: lotusTerminal ? '#FF6B00' : 'var(--tc-danger-normal)',
+            background: lotusTerminal ? 'var(--lt-accent-orange)' : 'var(--tc-danger-normal)',
             flexShrink: 0,
             animation: 'pttLivePulse 900ms ease-in-out infinite',
           }}
@@ -214,7 +214,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
             minWidth: toRem(32),
             fontVariantNumeric: 'tabular-nums',
             ...(lotusTerminal
-              ? { fontFamily: 'JetBrains Mono, monospace', color: '#00FF88', fontWeight: 700 }
+              ? { fontFamily: 'JetBrains Mono, monospace', color: 'var(--lt-accent-green)', fontWeight: 700 }
               : {}),
           }}
         >
@@ -233,7 +233,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 width: toRem(2),
                 height: toRem(2 + (h / barMax) * 16),
                 borderRadius: toRem(1),
-                background: lotusTerminal ? '#00FF88' : 'var(--tc-primary-normal)',
+                background: lotusTerminal ? 'var(--lt-accent-green)' : 'var(--tc-primary-normal)',
                 flexShrink: 0,
               }}
             />
diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
index a5b396b88..9b9838525 100644
--- a/src/app/components/presence/Presence.tsx
+++ b/src/app/components/presence/Presence.tsx
@@ -10,7 +10,7 @@ import {
   TooltipProvider,
   toRem,
 } from 'folds';
-import React, { ReactNode, useId } from 'react';
+import React, { ReactNode } from 'react';
 import * as css from './styles.css';
 import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
 
@@ -27,7 +27,7 @@ type PresenceBadgeProps = {
 };
 export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
-  const badgeLabelId = useId();
+  const ariaLabel = status ? `${label[presence]} — ${status}` : label[presence];
 
   return (
     <TooltipProvider
@@ -36,7 +36,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
       offset={4}
       delay={200}
       tooltip={
-        <Tooltip id={badgeLabelId}>
+        <Tooltip>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
             <Text size="L400">{label[presence]}</Text>
             {status && <Text size="T200">•</Text>}
@@ -47,7 +47,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
     >
       {(triggerRef) => (
         <Badge
-          aria-labelledby={badgeLabelId}
+          aria-label={ariaLabel}
           ref={triggerRef}
           size={size}
           variant={PresenceToColor[presence]}