Lazurio's design in Chat: what the skin experiment found and the ways forward #181

Podklad pro pozdější rozhodnutí, jak propsat design Lazuria do Chatu (T3 Code na Prostředí). Experiment #180 ukázal, že to jde levně. Matěj ho 2026-11-05 odložil: změny jsou zatím malé a přednost má levý sloupec shellu. Tohle issue drží, co z experimentu plyne a jaké cesty se nabízejí.

Co experiment zjistil

• Barvy už Chat má (release, web, docs: the distribution Lazurio T3 Code, the in-app name T3 Code (Lazurio) and the design system's light look (root 0200) #66, feat(lazurio): the column head sits under T3's top row, with the toggle and the wordmark on top #82, téma Prostředí podle 0208). Rozdíl vůči Apps dělají tvary, písmo a hloubka. Ty jdou změnit jedním souborem CSS (apps/web/src/lazurio/skin.css v Experiment: Chat in the design system's clean look (not for release) #180) se stejnou podmínkou jako theme.css, bez změny UX.
• Největší viditelný rozdíl dělá písmo, a to přijde z Platformy. Dnešní shell dává --lz-font-sans = Inter Tight. Čistý vzhled design systému chce Inter pro text a Inter Tight 600 pro nadpisy (Apps and the shell's tokens have not taken the design system's clean look (2026-10-21) LazurioPlatform#872).
• data-slot="button" není spolehlivý háček. Přepíše ho obalující trigger (tooltip-trigger, menu-trigger, popover-trigger). Spolehlivé jsou data-size a data-variant, které Experiment: Chat in the design system's clean look (not for release) #180 přidává jedním švem v components/ui/button.tsx. Upstream je takhle nese už u input.tsx.
• Stupnici zaoblení T3 nese jeden token (--radius, @theme inline). --radius: 10px dá sm 6 a lg 10 px, tedy sm a md design systému. Composer, dialogy a ⌘K (rounded-2xl) potřebují vlastní pravidlo.
• Overlay CSS vyhrává bez !important jen proto, že je mimo @layer Tailwindu. Import do vrstvy by ho vypnul.
• Hustotu a velikosti CSS rozumně nezmění. Řádky postranního panelu mají pevné výšky kvůli virtualizaci a změna by sáhla do UX.
• Tokeny, které by musel slíbit shell: --lz-radius-md, --lz-radius-pill, --lz-shadow-float, --lz-font-heading, tracking a váhy (Shell interface v1: promise the tokens a skinned Chat would read (radius-md, radius-pill, shadow-float, font-heading, tracking, weights) LazurioPlatform#873).
• Ověření jde dělat synteticky: produkční build webu, vlastní --base-dir, vývojový provider Replay a skutečný shell.js z scripts/preview-launchpad.ts Platformy za loopback proxy. Pozor: shell proměnné živého T3 (T3CODE_PORT, T3CODE_HOME…) se dědí do každého procesu a dev instance by se na ně jinak napojila. Postup je v popisu Experiment: Chat in the design system's clean look (not for release) #180.

Cesty do budoucna

1. Nejdřív Platforma, ne fork. Sync tokenů Čistého vzhledu do shellu (feat: add selective file staging to commit dialog pingdotgg/t3code#872) změní písmo Chatu bez jediné změny forku a srovná Chat s Apps.
2. Skin jako vrstva overlaye (Experiment: Chat in the design system's clean look (not for release) #180): jeden soubor, jeden šev, test kontraktu. Potřebuje dodatek k 0200 se souhlasem owner design systému a sliby tokenů ve shellu (fix: Prevent sidebar project dragging when using macos control+click to open context menu pingdotgg/t3code#873).
3. Šev data-size/data-variant navrhnout upstreamu. Kdyby ho upstream přijal, skin by nesahal do žádného upstream souboru.
4. Hustota a rozvržení (výšky řádků, velikost písma, mezery) nejsou práce pro CSS overlay. Patřily by k debatě o jednodušším profilu Chatu a k rozhodnutí, kolik T3 se smí v UX měnit.
5. Jednodušší profil pro běžné uživatele (seznam vývojářských prvků je v závěru vlákna experimentu a v Experiment: Chat in the design system's clean look (not for release) #180): pravda by asi žila v záznamu Prostředí ve vlastnictví Launchpadu, rozváženém shellem jako téma (0208). Skrytí jen přes CSS nestačí, protože zkratky, ⌘K a hledání v Nastavení by dál vedly ke skrytým věcem.

Agent: environment a480495c-25e0-4e51-828b-1dbf1b77d62f · T3 thread b2ba4875-1104-4818-a273-d3ea899738dc