From 34d520916550b3213b6c98762e72a5ac9bd11d78 Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Sun, 28 Jun 2026 21:58:57 -0400 Subject: [PATCH] fix(ui): folds tokens for settings/profile/glass invented vars (native-cinny audit 2/N) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- src/app/components/sidebar/Sidebar.css.ts | 4 ++-- src/app/components/user-profile/UserRoomProfile.tsx | 12 ++++++------ src/app/features/settings/account/Profile.tsx | 10 +++++----- .../features/settings/account/ProfileDecoration.tsx | 8 ++++---- src/app/features/settings/general/DenoiseTester.tsx | 10 +++++----- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/app/components/sidebar/Sidebar.css.ts b/src/app/components/sidebar/Sidebar.css.ts index 83f1e244b..a877e2bf1 100644 --- a/src/app/components/sidebar/Sidebar.css.ts +++ b/src/app/components/sidebar/Sidebar.css.ts @@ -17,10 +17,10 @@ export const Sidebar = style([ ]); export const SidebarGlass = style({ - backgroundColor: 'rgba(3, 5, 8, 0.55)', + backgroundColor: `color-mix(in srgb, ${color.Surface.Container} 55%, transparent)`, backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', - borderRight: '1px solid rgba(255,255,255,0.06)', + borderRight: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`, }); export const SidebarStack = style([ diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index a9f0aa050..3b488ebc6 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -91,10 +91,10 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) { {(status) => { const deviceColor = status === VerificationStatus.Verified - ? 'var(--tc-positive-normal, #5effc4)' + ? color.Success.Main : status === VerificationStatus.Unverified - ? 'var(--tc-warning-normal, #ffcc55)' - : 'var(--tc-surface-low-contrast)'; + ? color.Warning.Main + : color.SurfaceVariant.OnContainer; return ( @@ -106,7 +106,7 @@ function UserDeviceRow({ userId, device }: UserDeviceRowProps) { {device.deviceId} @@ -160,7 +160,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) { direction="Column" gap="100" style={{ - background: 'var(--bg-surface-variant)', + background: color.SurfaceVariant.Container, borderRadius: config.radii.R300, padding: config.space.S300, }} @@ -171,7 +171,7 @@ function UserDeviceSessions({ userId }: UserDeviceSessionsProps) { Sessions - + {devices.length} diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx index 9d0a498cb..e8df2b0b3 100644 --- a/src/app/features/settings/account/Profile.tsx +++ b/src/app/features/settings/account/Profile.tsx @@ -482,9 +482,9 @@ function ProfileStatus() { opacity: statusMsg.length >= 56 ? 1 : 0.45, color: statusMsg.length >= 64 - ? 'var(--tc-critical-normal)' + ? color.Critical.Main : statusMsg.length >= 56 - ? 'var(--tc-warning-normal)' + ? color.Warning.Main : undefined, }} > @@ -536,7 +536,7 @@ function ProfileStatus() { {saveState.status === AsyncStatus.Error && ( - + Failed to save status — server may be rate limiting. Try again. )} @@ -730,7 +730,7 @@ function ProfilePronouns() { {saveState.status === AsyncStatus.Error && ( - + Failed to save pronouns. Try again. )} @@ -873,7 +873,7 @@ function ProfileTimezone() { {saveState.status === AsyncStatus.Error && ( - + Failed to save timezone. Try again. )} diff --git a/src/app/features/settings/account/ProfileDecoration.tsx b/src/app/features/settings/account/ProfileDecoration.tsx index 9c8f470b5..9ece915bd 100644 --- a/src/app/features/settings/account/ProfileDecoration.tsx +++ b/src/app/features/settings/account/ProfileDecoration.tsx @@ -37,12 +37,12 @@ function DecorationPreviewCell({ width: CELL_SIZE, height: CELL_SIZE, flexShrink: 0, - border: `2px solid ${selected ? 'var(--accent-cyan)' : 'transparent'}`, + border: `2px solid ${selected ? color.Primary.Main : 'transparent'}`, borderRadius: '50%', - background: 'var(--bg-surface-variant)', + background: color.SurfaceVariant.Container, cursor: 'pointer', padding: 0, - boxShadow: selected ? '0 0 0 1px var(--accent-cyan)' : 'none', + boxShadow: selected ? `0 0 0 1px ${color.Primary.Main}` : 'none', overflow: 'hidden', outline: 'none', }} @@ -142,7 +142,7 @@ export function ProfileDecoration() { height: CELL_SIZE, flexShrink: 0, borderRadius: '50%', - background: 'var(--bg-surface-variant)', + background: color.SurfaceVariant.Container, overflow: 'hidden', }} > diff --git a/src/app/features/settings/general/DenoiseTester.tsx b/src/app/features/settings/general/DenoiseTester.tsx index acd8d511f..8acb52dc1 100644 --- a/src/app/features/settings/general/DenoiseTester.tsx +++ b/src/app/features/settings/general/DenoiseTester.tsx @@ -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, }} /> )}