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 <noreply@anthropic.com>

src/app/components/GifPicker.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { Grid, SearchBar, SearchContext, SearchContextManager } from '@giphy/react-components';
 import { IGif } from '@giphy/js-types';
-import { Box } from 'folds';
+import { Box, color, config } from 'folds';
 import { useSetting } from '../state/hooks/settings';
 import { settingsAtom } from '../state/settings';
 
@@ -91,11 +91,11 @@ export function GifPicker({ apiKey, onSelect, requestClose }: GifPickerProps) {
         width: `${PICKER_WIDTH}px`,
       }
     : {
-        background: 'var(--bg-surface)',
-        border: '1px solid rgba(255,255,255,0.08)',
-        borderRadius: '12px',
+        background: color.Surface.Container,
+        border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+        borderRadius: config.radii.R400,
         overflow: 'hidden',
-        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+        boxShadow: color.Other.Shadow,
         width: `${PICKER_WIDTH}px`,
       };
 

src/app/features/settings/general/BgSwatch.css.ts

@@ -0,0 +1,31 @@
+import { style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
+
+// Shared base for the chat-background / seasonal-theme preview swatches. These
+// are inherently custom tiles (they render a live background preview), so they
+// can't be a folds MenuItem/Chip — but the chrome (radius, border, hover, and a
+// proper keyboard focus ring) now comes from design tokens instead of raw
+// rgba/px inline styles. Size + the preview background stay inline per-swatch.
+export const BgSwatch = style({
+  display: 'block',
+  padding: 0,
+  cursor: 'pointer',
+  overflow: 'hidden',
+  borderRadius: config.radii.R300,
+  borderWidth: config.borderWidth.B400,
+  borderStyle: 'solid',
+  borderColor: color.SurfaceVariant.ContainerLine,
+  transition: 'border-color 100ms ease-in-out',
+  selectors: {
+    '&:hover': {
+      borderColor: color.Primary.ContainerLine,
+    },
+    '&:focus-visible': {
+      outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
+      outlineOffset: config.space.S100,
+    },
+    '&[data-selected="true"]': {
+      borderColor: color.Primary.Main,
+    },
+  },
+});

src/app/features/settings/general/General.tsx

@@ -35,6 +35,7 @@ import { isKeyHotkey } from 'is-hotkey';
 import { HexColorPicker } from 'react-colorful';
 import FocusTrap from 'focus-trap-react';
 import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
+import { BgSwatch as BgSwatchStyle } from './BgSwatch.css';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import {
@@ -1655,19 +1656,13 @@ function SeasonalBgGrid({
               type="button"
               aria-label={opt.label}
               aria-pressed={selected}
+              data-selected={selected}
+              className={BgSwatchStyle}
               onClick={() => onChange(opt.value)}
               style={{
                 position: 'relative',
-                display: 'block',
                 width: toRem(76),
                 height: toRem(56),
-                borderRadius: toRem(8),
-                cursor: 'pointer',
-                border: selected
-                  ? `2px solid ${color.Primary.Main}`
-                  : '2px solid rgba(128,128,128,0.25)',
-                padding: 0,
-                overflow: 'hidden',
                 backgroundColor: '#030508',
               }}
             >
@@ -1718,22 +1713,15 @@ function ChatBgGrid() {
             type="button"
             aria-label={opt.label}
             aria-pressed={chatBackground === opt.value}
+            data-selected={chatBackground === opt.value}
+            className={BgSwatchStyle}
             onClick={() => {
               setChatBackground(opt.value as ChatBackground);
               if (opt.value !== 'none') setSeasonalThemeOverride('off');
             }}
             style={{
-              display: 'block',
               width: toRem(76),
               height: toRem(50),
-              borderRadius: toRem(8),
-              cursor: 'pointer',
-              border:
-                chatBackground === opt.value
-                  ? `2px solid ${color.Primary.Main}`
-                  : '2px solid rgba(128,128,128,0.25)',
-              padding: 0,
-              overflow: 'hidden',
               ...getChatBg(opt.value as ChatBackground, isDark, pauseAnimations),
             }}
           />