mirror of
https://github.com/multica-ai/multica.git
synced 2026-08-05 17:40:11 +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>
60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useLocale } from "../i18n";
|
|
import { GitHubMark, githubUrl } from "./shared";
|
|
|
|
export function OpenSourceSection() {
|
|
const { t } = useLocale();
|
|
|
|
return (
|
|
<section id="open-source" className="bg-white text-[#0a0d12]">
|
|
<div className="mx-auto max-w-[1320px] px-4 py-24 sm:px-6 sm:py-32 lg:px-8 lg:py-40">
|
|
<div className="flex flex-col gap-16 lg:flex-row lg:items-start lg:gap-24">
|
|
{/* Left column — heading + CTA */}
|
|
<div className="lg:w-[480px] lg:shrink-0">
|
|
<p className="text-micro font-semibold uppercase tracking-[0.16em] text-[#0a0d12]/40">
|
|
{t.openSource.label}
|
|
</p>
|
|
<h2 className="mt-4 landing-serif text-[2.6rem] leading-[1.05] tracking-[-0.03em] sm:text-[3.4rem] lg:text-[4.2rem]">
|
|
{t.openSource.headlineLine1}
|
|
<br />
|
|
{t.openSource.headlineLine2}
|
|
</h2>
|
|
<p className="mt-6 max-w-[420px] text-body-lg leading-7 text-[#0a0d12]/60 sm:text-title-sm">
|
|
{t.openSource.description}
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap items-center gap-3">
|
|
<Link
|
|
href={githubUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center justify-center gap-2.5 rounded-[12px] bg-[#0a0d12] px-5 py-3 text-body font-semibold text-white transition-colors hover:bg-[#0a0d12]/88"
|
|
>
|
|
<GitHubMark className="size-4" />
|
|
{t.openSource.cta}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right column — highlight grid */}
|
|
<div className="flex-1">
|
|
<div className="grid gap-px overflow-hidden rounded-2xl border border-[#0a0d12]/8 bg-[#0a0d12]/8 sm:grid-cols-2">
|
|
{t.openSource.highlights.map((item) => (
|
|
<div key={item.title} className="bg-white p-8 lg:p-10">
|
|
<h3 className="text-title font-semibold leading-snug text-[#0a0d12] sm:text-title">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-3 text-body leading-[1.7] text-[#0a0d12]/56 sm:text-body-lg">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|