From 79f8fabb1ba8c3bd95aa5b9c6fffd73286a46c3d Mon Sep 17 00:00:00 2001 From: Jared Vititoe Date: Fri, 19 Jun 2026 21:01:57 -0400 Subject: [PATCH] fix(ui): GIF picker surface tokens + background swatch chrome (N8, N70) - N8: GifPicker non-TDS container used undefined var(--bg-surface) + raw rgba/12px/boxShadow. Switch to folds tokens (color.Surface.Container, config.radii.R400, color.Surface.ContainerLine, color.Other.Shadow). TDS branch keeps its --lt-* glow chrome. - N70: ChatBgGrid/SeasonalBgGrid swatch buttons moved chrome (radius, border, hover, keyboard :focus-visible ring, selected via data-selected) into shared BgSwatch.css.ts using design tokens; only per-swatch size + live preview background stay inline (custom preview tiles, not MenuItem/Chip candidates). Co-Authored-By: Claude Opus 4.8 --- LOTUS_BUGS.md | 34 +++++++++---------- src/app/components/GifPicker.tsx | 10 +++--- .../features/settings/general/BgSwatch.css.ts | 31 +++++++++++++++++ src/app/features/settings/general/General.tsx | 22 +++--------- 4 files changed, 58 insertions(+), 39 deletions(-) create mode 100644 src/app/features/settings/general/BgSwatch.css.ts diff --git a/LOTUS_BUGS.md b/LOTUS_BUGS.md index 708b7f3cd..b07a21873 100644 --- a/LOTUS_BUGS.md +++ b/LOTUS_BUGS.md @@ -312,7 +312,7 @@ This document tracks identified bugs, edge cases, and architectural discrepancie | N5 | Read Receipts | `ReadReceiptAvatars.tsx` | 62–137 | Trigger button is raw `` (spinner while loading) replacing the passive text | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `` to fetch the next page | -| N66 | DateRangeButton — Native `` | `SearchFilters.tsx` | 558–589 | "From" and "To" date fields are raw `` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds ``; removed now-unused `color` import | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds ``; the date inputs are the only native browser inputs in the search filter row | -| N67 | SeasonalEffect / NightLight Z-Index Order | `SeasonalEffect.tsx` / `App.tsx` | 759 / 62–77 | `SeasonalEffect` mounts at `zIndex: 9999`; `NightLightOverlay` at `zIndex: 9998`. Seasonal particles render **above** Night Light so they are never tinted. `SeasonalEffect` also shares `z-index: 9999` with the skip-to-content link in `ClientLayout.tsx` — **FIXED**: lowered `SeasonalEffect` overlay to `zIndex: 9997` (below Night Light at 9998 and modals at 9999), so Night Light now tints the particles and dialogs are never obscured | Expected UX: Night Light tints all visible content including effects; requires either a higher Night Light z-index or a lower SeasonalEffect z-index | -| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes | `syntaxHighlight.ts` | 313–323 | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` — **FIXED**: `tokenStyle()` now maps to the `--prism-*` family (keyword/selector/boolean/atrule/comment) which has proper light/dark/TDS palettes; comment uses `--prism-comment` instead of an opacity hack | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family | -| N69 | Mention Highlight — `` Instead of `HexColorPickerPopOut` | `General.tsx` | 644–675 | Raw `` with hardcoded pixel dimensions; OS-native color picker chrome renders completely differently from the rest of settings UI — **FIXED**: replaced with `` + `` (react-colorful) behind a folds `` (spinner while loading) replacing the passive text | `RoomActivityLog.tsx:425` and `MessageSearch.tsx:129` both render a folds `` to fetch the next page | +| N66 | DateRangeButton — Native `` | `SearchFilters.tsx` | 558–589 | "From" and "To" date fields are raw `` with inline style overrides including `fontSize: '0.82rem'` — **FIXED**: replaced both with folds ``; removed now-unused `color` import | `SelectRoomButton` (same file, line 224) and `SelectSenderButton` (line 424) both use folds ``; the date inputs are the only native browser inputs in the search filter row | +| N67 | SeasonalEffect / NightLight Z-Index Order | `SeasonalEffect.tsx` / `App.tsx` | 759 / 62–77 | `SeasonalEffect` mounts at `zIndex: 9999`; `NightLightOverlay` at `zIndex: 9998`. Seasonal particles render **above** Night Light so they are never tinted. `SeasonalEffect` also shares `z-index: 9999` with the skip-to-content link in `ClientLayout.tsx` — **FIXED**: lowered `SeasonalEffect` overlay to `zIndex: 9997` (below Night Light at 9998 and modals at 9999), so Night Light now tints the particles and dialogs are never obscured | Expected UX: Night Light tints all visible content including effects; requires either a higher Night Light z-index or a lower SeasonalEffect z-index | +| N68 | Syntax Highlighting — `--lt-accent-*` Vars in Non-TDS Themes | `syntaxHighlight.ts` | 313–323 | `tokenStyle()` returns `var(--lt-accent-cyan/green/orange/purple, hardcoded-fallback)` — `--lt-*` vars only exist in TDS mode; fallbacks are Monokai dark colors that have poor contrast on light themes and no relationship to the existing `--prism-*` variables in `ReactPrism.css` — **FIXED**: `tokenStyle()` now maps to the `--prism-*` family (keyword/selector/boolean/atrule/comment) which has proper light/dark/TDS palettes; comment uses `--prism-comment` instead of an opacity hack | `ReactPrism.css` uses `--prism-keyword`, `--prism-selector` etc. which switch correctly between light and dark palettes; syntax highlighting should use the same variable family | +| N69 | Mention Highlight — `` Instead of `HexColorPickerPopOut` | `General.tsx` | 644–675 | Raw `` with hardcoded pixel dimensions; OS-native color picker chrome renders completely differently from the rest of settings UI — **FIXED**: replaced with `` + `` (react-colorful) behind a folds `