mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-16 06:39:01 +02:00
dbb8c0ade0
Two related fixes that share root cause: shadcn's neutral palette
collapses `secondary` / `muted` / `accent` to the SAME L 96.1% value
intentionally — it's a single tonal slot whose semantic name varies by
use case, not three different colors. Stacking a bg-muted child on a
bg-secondary parent (which is what we were doing for code/table headers
inside the comment bubble) made the inner element visually disappear.
Introduce a proper 5-tier elevation scale calibrated to Refactoring UI
and Material 3 guidance:
L 100 page bg / card / popover (page floor)
L 98 surface-1 NEW (subtle elevated — comment
bubbles, iOS settings-cell
feel: visible boundary
via radius + border, fill
is almost-page)
L 96.1 secondary / muted / accent (shadcn default, untouched —
button hover, chips, skeleton)
L 90 surface-2 NEW (nested inside surface-1 —
table headers + code blocks
inside comment bubbles, 8% L
step over surface-1)
L 84 border (was 89.8% → 84%) (visible across every tier,
6-16% darker than adjacent
surface, within Refactoring
UI's 5-10% guideline)
Dark mirror flips the lightness direction (higher elevation = lighter):
page 3.9 → surface-1 8 → secondary 14.9 → surface-2 19 → border 25.
Applied across three files:
- global.css + tailwind.config.js + lib/theme.ts mirror the new tokens
(CSS variables, Tailwind class map, TypeScript export — they must
stay in sync per CLAUDE.md §5).
- components/issue/comment-card.tsx switches the bubble bg from
`bg-secondary` (too prominent, same color as inner muted elements)
to `bg-surface-1` (subtle, 8% lighter than inner surface-2).
- lib/markdown/markdown-style.ts:
- table.headerBackgroundColor + codeBlock.backgroundColor:
`t.muted` → `t.surface2`, so they're framed against the bubble.
- inline `code:`: REVERT 2026-05-19's `color: t.brand` workaround
for upstream enriched-markdown #255. The brand-tint avoided the
chip's top-heavy padding artifact but broke Refactoring UI's #1
rule (color carries semantic meaning — brand IS the link color,
users reported tapping inline code thinking it was a link).
Re-enable bg-chip + foreground text, matching GitHub mobile /
Slack / Notion / Apple Notes. The padding artifact is the lesser
evil; in surface-2 (L 90%) on surface-1 (L 98%) the chip is
subtle enough that the few pixels of asymmetry are unobtrusive.
The shadcn `secondary` / `muted` / `accent` tokens stay at L 96.1%
unchanged — other call sites (button hover, skeleton, avatar fallback,
chips) all work fine on their own and were never the problem.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
143 lines
5.6 KiB
CSS
143 lines
5.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/*
|
|
* Theme tokens — RNR template (verbatim) + Multica custom tokens appended.
|
|
*
|
|
* When changing any variable here, also update apps/mobile/lib/theme.ts —
|
|
* they mirror each other. See apps/mobile/docs/rnr-migration.md §5.
|
|
*
|
|
* Dark-mode values for the Multica custom tokens currently mirror their
|
|
* light values — they will be tuned when a screen using them actually
|
|
* needs dark-mode treatment. Don't pre-author (per §3.1 "defaults first").
|
|
*/
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 3.9%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 3.9%;
|
|
--primary: 0 0% 9%;
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 96.1%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--muted: 0 0% 96.1%;
|
|
--muted-foreground: 0 0% 45.1%;
|
|
--accent: 0 0% 96.1%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
/* Border tuned to L 84% — gives a 6% darker step from surface-2 (the
|
|
* darkest elevated tier above page) and 16% from page, so borders are
|
|
* visible across every tier in the elevation scale (surface-1 / -2 /
|
|
* secondary). Within Refactoring UI's "border 5-10% darker than
|
|
* adjacent surface" guidance. */
|
|
--border: 0 0% 84%;
|
|
--input: 0 0% 84%;
|
|
--ring: 0 0% 63%;
|
|
--radius: 0.625rem;
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
|
|
/* Multica custom tokens */
|
|
--brand: 225 71% 58%;
|
|
--brand-foreground: 0 0% 98%;
|
|
--success: 142 71% 45%;
|
|
--warning: 48 89% 47%;
|
|
--info: 217 91% 60%;
|
|
--priority: 25 95% 53%;
|
|
--code-surface: 240 4% 92%;
|
|
|
|
/* Surface elevation scale — a 5-tier ladder above page bg, calibrated
|
|
* to Refactoring UI's "≥5% L difference is the perceptibility threshold"
|
|
* + Material 3 surface-container scale. shadcn's `secondary` /
|
|
* `muted` / `accent` slot (L 96.1%) stays untouched; we sandwich
|
|
* `surface-1` above it and `surface-2` below for cases shadcn doesn't
|
|
* cover (notably nested elevated cards like comment bubbles + their
|
|
* internal code/table elements).
|
|
*
|
|
* L 100 page bg / card / popover (page floor)
|
|
* L 98 surface-1 subtle elevated (comment bubble — feels
|
|
* like an iOS settings cell:
|
|
* visible boundary but the
|
|
* fill is almost-page)
|
|
* L 96.1 secondary / muted / accent (shadcn default — button
|
|
* hover, chips, skeleton)
|
|
* L 90 surface-2 nested in surface-1 (code block / table header
|
|
* inside a comment bubble —
|
|
* 8% darker than the bubble
|
|
* so the inner box is
|
|
* clearly delineated)
|
|
* L 84 border (visible across all tiers)
|
|
*
|
|
* Future tiers extend as surface-3 etc. Dark mode mirrors this scale
|
|
* inverted (lighter = higher elevation), see .dark:root below. */
|
|
--surface-1: 0 0% 98%;
|
|
--surface-2: 0 0% 90%;
|
|
}
|
|
|
|
.dark:root {
|
|
--background: 0 0% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--card: 0 0% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--popover: 0 0% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 0 0% 9%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--accent: 0 0% 14.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 70.9% 59.4%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
/* Border at L 25% — mirrors the light-mode logic: 6% lighter than
|
|
* surface-2 (the topmost elevated tier), 21% lighter than page (3.9%).
|
|
* Visible across every tier of the dark elevation scale. */
|
|
--border: 0 0% 25%;
|
|
--input: 0 0% 25%;
|
|
--ring: 300 0% 45%;
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
|
|
/* Multica custom tokens — dark mirrors light until a screen demands tuning */
|
|
--brand: 225 71% 58%;
|
|
--brand-foreground: 0 0% 98%;
|
|
--success: 142 71% 45%;
|
|
--warning: 48 89% 47%;
|
|
--info: 217 91% 60%;
|
|
--priority: 25 95% 53%;
|
|
/* code-surface is the ONE exception that needs a real dark value —
|
|
* the light value (240 4% 92%) is near-white and would render code
|
|
* blocks with a brighter background than the page in dark mode. */
|
|
--code-surface: 240 4% 18%;
|
|
|
|
/* Dark elevation scale — mirrors the light scale but lightness
|
|
* INCREASES with elevation (shadows don't read on dark, so tonal
|
|
* lift is the elevation cue). Comment bubble uses surface-1 (L 8%);
|
|
* nested code/table inside the bubble uses surface-2 (L 19%, 11%
|
|
* lighter than the bubble — well over Refactoring UI's 5% threshold).
|
|
*
|
|
* L 3.9 page bg / card / popover
|
|
* L 8 surface-1 subtle elevated (comment bubble)
|
|
* L 14.9 secondary / muted / accent (shadcn default)
|
|
* L 19 surface-2 nested in surface-1 (code/table inside bubble)
|
|
* L 25 border (visible across all tiers)
|
|
*/
|
|
--surface-1: 0 0% 8%;
|
|
--surface-2: 0 0% 19%;
|
|
}
|
|
}
|