apps/desktop/src/renderer/styles/settings/theme-preview.css

/* Appearance theme and palette previews.

   The option GRID and the option TILE are Astryx now: `Grid columns={{minWidth}}`
   and `SelectableCard` (see appearance-settings-page.tsx). What used to live
   here — a 3-column grid, a card recipe (border/radius/background/transition),
   a hover rule, a `:has(input:checked)` selected rule, a `label::after` overlay
   to stretch the hit target, and a two-row re-flow of Astryx's Item — was ~85
   lines re-deriving what SelectableCard ships. Only the two PREVIEW marks below
   stay: a mini chat mock and a palette swatch are product artwork, not layout. */

/* Mini chat-surface mock rendered inside each theme tile. Hardcodes colors
 * per variant so the preview doesn't track the active theme — comparing
 * tiles is the whole point. */
.settingsThemePreview {
  /* Spans the tile: SelectableCard owns the padding, so the mock only needs a
     ratio. It was a fixed 88px thumbnail when Astryx's Item laid it out in a
     ROW beside the text and the label column was crushed to ~54px. */
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: var(--border-width-hairline) solid var(--border);
  display: flex;
  background: var(--foreground-5);
}

.settingsThemePreviewSplit > .settingsThemePreviewPane:first-child {
  border-right: var(--border-width-hairline) solid var(--border);
}

.settingsThemePreviewPane {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-width: 0;
}

.settingsThemePreviewPane[data-mode="light"] {
  /* PR-GRAY-CARD-LIFT-0: mirror the app shell after WAWQAQ's gray
     plate / white content surface direction. */
  background: oklch(1.000 0 0);
  color: oklch(0.18 0 0);
}

.settingsThemePreviewPane[data-mode="dark"] {
  background: oklch(0.21 0 0);
  color: oklch(0.92 0 0);
}

.settingsThemePreviewSidebar {
  height: 100%;
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewSidebar {
  background: oklch(0.955 0 0);
  border-right: var(--border-width-hairline) solid oklch(0.88 0 0);
}

.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewSidebar {
  background: oklch(0.13 0 0);
  border-right: var(--border-width-hairline) solid oklch(0.26 0 0);
}

.settingsThemePreviewChat {
  padding: var(--space-1-5) var(--space-2);
  display: grid;
  gap: var(--space-1);
  align-content: end;
  min-width: 0;
}

.settingsThemePreviewLine {
  height: 5px;
  border-radius: var(--radius-pill);
  width: 90%;
}

.settingsThemePreviewLine-short {
  width: 56%;
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewLine-assistant {
  background: oklch(0.78 0 0);
}
.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewLine-assistant {
  background: oklch(0.36 0 0);
}

.settingsThemePreviewBubble {
  align-self: end;
  justify-self: end;
  width: 60%;
  height: 12px;
  border-radius: var(--radius-surface);
  margin-top: var(--space-0-5);
}

.settingsThemePreviewPane[data-mode="light"] .settingsThemePreviewBubble {
  background: oklch(0.935 0 0);
}
.settingsThemePreviewPane[data-mode="dark"] .settingsThemePreviewBubble {
  background: oklch(0.30 0 0);
}


/* PR-THEME-PRODUCT-PALETTES-0: palette picker. Each option shows a
   round swatch whose color is the palette's accent token. The swatch
   colors are hard-coded here (not pulled from --accent) so a non-
   active palette still previews its real color. */
.settingsPaletteSwatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: var(--border-width-thick) solid var(--border);
  box-shadow: inset 0 0 0 2px oklch(1 0 0 / 0.25);
  /* Fallback in case a swatch name has no per-palette rule below
     (e.g. a new palette landed in `THEME_PALETTES` but its swatch
     color wasn't added yet) — show the active accent so the missing
     row at least previews something instead of going invisible. */
  background: var(--accent);
}

/* PR-PALETTE-SWATCH-VISIBLE-0 (WAWQAQ msg `d3ea9a33` 2026-06-26):
   each palette's swatch needs its own background-color or every
   `.settingsPaletteSwatch-*` falls through to no fill and reads as
   an empty grey circle on the Appearance page. The accent values are
   copied verbatim from the light-mode block of each `[data-maka-
   theme="…"]` rule in `maka-tokens.css` so the picker previews the
   palette's brand identity even when the current page is on a
   different palette. */
.settingsPaletteSwatch-default          { background: oklch(0.70 0.135 250); }
.settingsPaletteSwatch-onedark          { background: oklch(0.62 0.13 237); }
.settingsPaletteSwatch-catppuccin-mocha { background: oklch(0.65 0.18 330); }
.settingsPaletteSwatch-tokyo-night      { background: oklch(0.55 0.16 215); }
.settingsPaletteSwatch-nord             { background: oklch(0.62 0.12 215); }
.settingsPaletteSwatch-coral            { background: oklch(0.68 0.18 25); }
.settingsPaletteSwatch-azure            { background: oklch(0.55 0.12 195); }
.settingsPaletteSwatch-forest           { background: oklch(0.50 0.12 152); }
.settingsPaletteSwatch-dusk             { background: oklch(0.55 0.18 305); }
.settingsPaletteSwatch-sand             { background: oklch(0.62 0.14 55); }
.settingsPaletteSwatch-mono             { background: oklch(0.30 0 0); }