fix(ui): folds tokens for settings/profile/glass invented vars (native-cinny audit 2/N)

- DenoiseTester: --bg-card/--border-color/--accent-green/--accent-orange -> color.Surface.*/Success/Primary
- ProfileDecoration: --accent-cyan/--bg-surface-variant -> color.Primary.Main/SurfaceVariant.Container
- Profile: --tc-critical/warning-normal -> color.Critical/Warning.Main
- UserRoomProfile: --tc-positive/warning-normal/--tc-surface-low-contrast/--bg-surface-variant -> color tokens
- Sidebar glass: hardcoded rgba bg/border -> color-mix on color.Surface.Container + SurfaceVariant.ContainerLine
  (also fixes the glass looking wrong on light themes — was always near-black)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-28 21:58:57 -04:00
parent 9684ab75bb
commit 34d5209165
5 changed files with 22 additions and 22 deletions
@@ -1,5 +1,5 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Box, Button, Text } from 'folds';
import { Box, Button, color, config, Text } from 'folds';
import { DenoiseModelId } from '../../../state/settings';
import { DENOISE_MODELS } from '../../../utils/lotusDenoiseUtils';
import {
@@ -49,8 +49,8 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
style={{
position: 'relative',
height: '12px',
background: 'var(--bg-card)',
border: '1px solid var(--border-color)',
background: color.Surface.Container,
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
borderRadius: '6px',
overflow: 'hidden',
}}
@@ -62,7 +62,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
left: 0,
bottom: 0,
width: `${pct}%`,
background: 'var(--accent-green)',
background: color.Success.Main,
transition: 'width 0.05s linear',
}}
/>
@@ -74,7 +74,7 @@ function DbMeter({ label, db, threshold }: { label: string; db: number; threshol
bottom: 0,
left: `${markerPct}%`,
width: '2px',
background: 'var(--accent-orange)',
background: color.Primary.Main,
}}
/>
)}