mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-07 19:17:21 +02:00
7803a5b9ea
tokens.css defined colours, radii and font families but not a single --text-* step, so font sizes had no baseline to align to and grew wherever they were needed: 51 distinct sizes across web + desktop, 370 written as arbitrary values, six at half a pixel (10.5 / 11.5 / 12.5 / 13.5 / 14.5 / 15.5px). text-xs and text-sm carried nearly all UI text while the range between them — 11, 13, 15px — could only be reached with arbitrary values. Hierarchy does not come from having more sizes; past a handful, each extra size makes the hierarchy blurrier. Add ten role-named steps, each with its own line-height so leading cannot fragment the way size did, and move every product-UI call site onto them. Steps are named for what the text is for, not for a t-shirt size, because that is what keeps the scale from drifting again. Six steps deliberately keep the exact size/line-height pairs of the Tailwind defaults they replace, so the ~1,900-call-site rename moves nothing on screen. The visible changes are confined to former arbitrary values snapping to a step: 8/9/10px -> micro (11px) on badges and overlines; 17 -> 18; 22 -> 24; 30 (text-3xl) -> 36 on headings and stat numbers; 12.8px -> label (13px) on small buttons and toggles. Half-pixel sizes are gone. This supersedes #6108, which was reverted by #6116 because the sidebar group labels rendered at the inherited 16px. The cause was not the scale but cn(): `text-<x>` is ambiguous in Tailwind, and tailwind-merge resolves it against a table listing only the default sizes, so it filed every role step under text-colour and dropped whichever of `text-caption` / `text-sidebar-foreground/70` came first. Registering the steps as a font-size class group restores the real conflict groups — size beats size, colour beats colour, the two coexist — and a test pins the list against the scale, since the failure is silent in source. Hand-written CSS is covered too. The transcript kept a 12.5px body long after every Tailwind call site was on the scale, so the "no half-pixel sizes" claim was true of the classes and false of the product; the editor's prose, code and mermaid ramps had the same blind spot, and seven of their eight values already equalled a step exactly. All now reference var(--text-*). The guard test reads raw `font-size:` declarations as well as class names, exempting only the 16px iOS input-zoom workaround in base.css and the landing pages' marketing ramp. apps/mobile (own NativeWind config) and apps/docs (fumadocs' own type system) keep Tailwind's default scale and are untouched. Landing display type (rem/clamp, 2.2-6.4rem) stays on its separate ramp, as do four decorative emoji / serif-hero sizes. Verified on a running local stack: pinned sidebar rows and group labels measure 12px/16px, nav items 14px/20px — identical to pre-migration. An audit of every rendered font size across the product surfaces finds nothing off the scale; the only exceptions are avatar initials and emoji, which actor-avatar.tsx sizes proportionally to the avatar diameter by design. Co-authored-by: Lambda <lambda@multica.ai> Co-authored-by: multica-agent <github@multica.ai>
121 lines
5.1 KiB
CSS
121 lines
5.1 KiB
CSS
/*
|
|
* Code typography and lowlight highlighting.
|
|
*
|
|
* The literal-code rules intentionally disable font ligatures for both inline
|
|
* code and code blocks. Command flags such as `--extra` must render as the
|
|
* exact characters the user can copy.
|
|
*/
|
|
|
|
/* Inline code */
|
|
.rich-text-editor code {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-variant-ligatures: none;
|
|
font-feature-settings: "liga" 0;
|
|
font-size: var(--text-body);
|
|
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--foreground) 5%, transparent);
|
|
color: color-mix(in srgb, var(--foreground) 75%, transparent);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: var(--radius-sm);
|
|
box-decoration-break: clone;
|
|
-webkit-box-decoration-break: clone;
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Code blocks */
|
|
.rich-text-editor pre,
|
|
pre.rich-text-editor {
|
|
font-family: var(--font-mono, ui-monospace, monospace);
|
|
font-variant-ligatures: none;
|
|
font-feature-settings: "liga" 0;
|
|
background: var(--muted);
|
|
border-radius: var(--radius);
|
|
padding: 0.75rem 1rem;
|
|
margin: 0.75rem 0;
|
|
/* Long lines wrap, matching the editable code block (its NodeViewContent
|
|
sets an inline pre-wrap). Without this, readonly blocks scroll while
|
|
editable blocks wrap and the same document changes shape between the
|
|
two renderers. overflow-x stays as a fallback for unbreakable tokens. */
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.rich-text-editor pre code,
|
|
pre.rich-text-editor code {
|
|
font-variant-ligatures: none;
|
|
font-feature-settings: "liga" 0;
|
|
background: none;
|
|
border: none;
|
|
color: var(--foreground);
|
|
padding: 0;
|
|
font-size: var(--text-label);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Syntax highlighting — lowlight (hljs). Scoped to the editor surface and to
|
|
the task transcript, which highlights file bodies with the same engine so a
|
|
file reads identically in a comment and in an execution trace. */
|
|
:is(.rich-text-editor, .transcript-code) .hljs-keyword,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-selector-tag,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-built_in { color: oklch(0.55 0.16 255); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-string,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-addition { color: oklch(0.55 0.14 155); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-comment,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-quote { color: var(--muted-foreground); font-style: italic; }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-number,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-literal { color: oklch(0.58 0.16 30); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-title,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-section,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-title\.function_ { color: oklch(0.55 0.14 280); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-attr,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-attribute { color: oklch(0.58 0.12 60); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-variable,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-template-variable { color: oklch(0.58 0.14 20); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-type,
|
|
:is(.rich-text-editor, .transcript-code) .hljs-title\.class_ { color: oklch(0.55 0.14 200); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-deletion { color: oklch(0.55 0.2 25); }
|
|
|
|
:is(.rich-text-editor, .transcript-code) .hljs-meta { color: var(--muted-foreground); }
|
|
|
|
/* XML / HTML — lowlight emits .hljs-tag for `<` `>` brackets and .hljs-name
|
|
for the element name. Without these rules, HTML source renders mostly in
|
|
the default text color and looks unhighlighted. */
|
|
:is(.rich-text-editor, .transcript-code) .hljs-tag { color: var(--muted-foreground); }
|
|
:is(.rich-text-editor, .transcript-code) .hljs-name { color: oklch(0.55 0.16 255); }
|
|
|
|
/* Dark mode overrides */
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-keyword,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-selector-tag,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-built_in { color: oklch(0.7 0.14 255); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-string,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-addition { color: oklch(0.7 0.14 155); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-number,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-literal { color: oklch(0.72 0.14 30); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-title,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-section,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-title\.function_ { color: oklch(0.72 0.12 280); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-attr,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-attribute { color: oklch(0.72 0.1 60); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-variable,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-template-variable { color: oklch(0.72 0.12 20); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-type,
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-title\.class_ { color: oklch(0.72 0.12 200); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-deletion { color: oklch(0.7 0.18 25); }
|
|
|
|
.dark :is(.rich-text-editor, .transcript-code) .hljs-name { color: oklch(0.72 0.14 255); }
|