Päätökset

Päätetty: 23.10.2026, palvelun omistaja. Kirjasi: TP-PERUSTUS.

Päätös

AppFramen sisältöalueen leveys on oletuksena 1146 px. Alue on keskitetty sisältökorttiin, ja sen leveys on sama kaikilla sivuilla ja kaikissa palveluissa.

Arvo syntyy AppFramen sisällön kääreestä (src/components/app-frame.tsx): max-w-[1194px] ja md:px-6 eli 1194 − 2 × 24 = 1146 px.

Mitattu 23.10.2026

Mitattu esittelysivustolta (0.59.0) ja TP-PERUSTUKSEN kuudelta sivulta (Yleisnäkymä, Toimittajat, Tuoteluettelot, Luokittelu, Täydennys, Tuotteet), ja tulos oli molemmissa sama.

• 1146 px on yläraja. Kun sisältökortti on kapeampi kuin 1194 px (sivupalkki auki: ikkuna alle noin 1460 px), alue täyttää kortin 24 px:n täytteellä (kapealla, alle md, 16 px).
• TP-PERUSTUS antaa contentClassName="px-0 pb-0 md:px-0" ja tekee täytteen sivuillaan itse (24 px), joten sen sisältöalue on sama 1146 px.

Sisällön alku: 73 px yläpalkista

Sivun sisältö alkaa 73 px yläpalkin alareunasta: sen verran on yläpalkin alareunasta sivun ensimmäisen rivin (otsikon) kirjainten yläreunaan. Rivilaatikon yläreunaan on 70 px, ja loput 3 px ovat rivivälin yläpuolisko (otsikko 24 px / 30 px).

Mitattu 23.10.2026 TP-PERUSTUKSEN yhdeksältä sivulta 1920 ja 390 px:n leveydellä (Toimittajat, Tuoteluettelot, Luokittelu, Täydennys, Tuotteet, Datamallit, Yhteydet, Yleisnäkymä Yleinen ja Oma): kaikissa 70 / 73 px.

• AppFrame antaa oletuksena vain kääreen 46 / 54 px. Sivun yläreunan täyte (24 / 16 px) on sivun omaa koodia, joten palvelu lisää sen itse:
• AppFramen oletuskääre (sivuilla px-4 md:px-6): sivun juureen vain pt-4 md:pt-6. p-4 md:p-6 tuplaisi reunatäytteen, ja alue kapenisi 1098 px:iin (TP-MEDIA 23.10.2026, mitattu).
• Kääreen täyte nollattu (TP-PERUSTUS: contentClassName="px-0 pb-0 md:px-0"): sivun juureen p-4 md:p-6, joka antaa sekä ylä- että sivutäytteen.
• Jos ensimmäinen rivi ei ole otsikko vaan matalampi rivi viereisen korkeamman osan vieressä (TP-PERUSTUKSEN Yleisnäkymässä 14 px päivämäärä ja Yleinen | Oma -valitsin), rivi kohdistetaan niin, että sen kirjaimet osuvat samaan 73 px:iin.

Seuraukset

• Palvelu ei muuta leveyttä omalla contentClassNameillaan ilman omistajan päätöstä. max-w-none jää poikkeukseksi näkymille, joiden on täytettävä koko kortti (esim. leveä taulukko), ja se kirjataan palvelun omaan dokumentaatioon.
• Muutos kääreen leveyteen tai täytteeseen on tämän päätöksen muutos, ja tests/app-frame.test.mjs lukitsee arvon.

Päätetty: 22.10.2026, palvelun omistaja. Kirjasi: TP-PERUSTUS.

Tausta

Paketin oletustumma oli ShadCN:n neutral: tausta ja kortit 3,9 %. Päätöksen 0003 sivupalkki (6,4 %) oli siksi vaaleampi kuin sisältöalue, ja kuori näytti väärinpäin käännetyltä. Sävyteemoissa (savyt.css) porras oli jo oikein.

Päätös

Tumma teema TP-PERUSTUKSEN mallin mukaan, omistajan arvoin:

Muut pinnat seuraavat samaa porrasta kuin neutraali sävy: kortit 10,6 %, muted/accent/secondary 12,2 %, input 16,1 %, kehys 12,9 % ja sen reuna 16,9 %. Vaalea (paketin oletus ja neutraali sävy), omistajan arvoin:

Inputin reuna (--input) pysyy 89,8 %:ssa, jotta kenttä erottuu pinnasta.

Apuharmaa (--muted-foreground) on erillinen päätös eikä muutu tässä.

Päätetty: 22.10.2026, palvelun omistaja. Kirjasi: TP-PERUSTUS.

Tausta

AppShellin sivupalkin pienennys on sivupalkin alalaidassa nuolikuvakkeella, eikä kuoressa ole paikkaa murupolulle, palvelun nimelle sivupalkin ylälaidassa eikä käyttäjätilille sivupalkin alalaidassa. TP-PERUSTUS rakensi nämä itse paketin osista. Omistaja: pienennys on väärässä paikassa, tehdään TP-PERUSTUKSEN mallin mukaan.

Päätös

1. Uusi kuori `AppFrame` AppShellin rinnalle: sivupalkki (ylälaita, navigaatio, alalaita), vierivä sisältökortti, jonka yläpalkissa pienennys paneelikuvakkeella, murupolku ja oikean laidan toiminnot. --shell-top = yläpalkin korkeus.
2. `AppShell` pysyy ennallaan, jotta yhdenkään palvelun näkymä ei muutu ilman omaa päätöstä. Palvelut siirtyvät AppFrameen omassa tahdissaan.
3. SidebarToggle saa valinnan icon="panel"; oletus ennallaan.

Päätetty: 22.10.2026, palvelun omistaja (tokenit ja brändi, päätös 0001 §3). Kirjasi: TP-PERUSTUS.

Päätös

1. Uudet tokenit molempiin tiloihin, kanava-arvoina:
2. --frame — kehyksen pohja (muted 40 % kortin päällä; tummassa kortti + valkoinen 2,6 %)
3. --frame-border — kehyksen ja sen paneelien reuna
4. --sidebar — sivupalkin pinta
5. --nav-active, --nav-active-foreground — aktiivinen navigaatiorivi
6. Apuharmaa AA myös hover- ja valintapinnalla: vaalean oletuksen --muted-foreground 45,1 % → 40,6 % (4,35 → 5,15:1 --muted/--accent-pinnalla). Sama periaate sävyteemojen tummaan tilaan: suunnittelijan 50,6 % jäi kortilla, harmaalla pinnalla ja kehyksellä alle AA:n (4,05–4,43:1) → 55 % (heikoin 4,71:1). Vahvistettu 22.10.2026: omistaja antoi valita 50,6 %:n ja 55 %:n välillä; valittu 55 %. Mitattu jokaisessa sävyssä: 50,6 % on kortilla 4,34–4,43, harmaalla pinnalla 4,11–4,24 ja kehyksellä 4,05–4,15:1, 55 % näillä 4,71–5,15:1. Paketin oletuksen tumma (63,9 %) on ennallaan.
7. Sävyteemat styles/savyt.css: Neutraali (suunnittelijan pohja), Petroli, Kanerva ja Punainen (pääasiakkaan brändi), valinta <html data-vari="…">. Ilman määrettä paketin oletus on ennallaan (lukuun ottamatta kohtaa 2).
8. `--shell-top` — kuoren yläpalkin korkeus tahmeille elementeille. Pituus, ei väritoken, joten se ei ole tokens.css:ssä: kuori tai kuluttaja asettaa sen, ja käyttävä elementti lukee var(--shell-top, 0px).

Vaikutus käyttäjäpalveluihin

Kohta 2 tummentaa vaalean teeman apuharmaata hieman kaikissa palveluissa. Muut ovat uusia eivätkä muuta mitään ennen käyttöönottoa.

Lukot

tests/tokens.test.mjs (pinnat, hover, pehmeät tilapinnat, kehys), tests/savyt.test.mjs (jokainen teema täydellinen ja AA jokaisella pinnalla).

Päätetty: 22.10.2026, palvelun omistaja. Kirjasi: TP-PERUSTUS.

Tausta

Paketin kehitys kulki yhden agentin (TP-DS) kautta. Jokainen muutos odotti sitä, agentti oli kaukana palveluiden todellisista näkymistä, ja laatu oli yhden arvion ja sen ohjeiden varassa. TP-PERUSTUKSEN uusi käyttöliittymä (kehykset, taulukot, kuori, sävyteemat) syntyi siksi paikallisesti eikä pakettiin.

Päätös

1. TP-DS:n rooli lakkaa kokonaan. Pakettia kehittävät palveluiden agentit yhdessä.
2. Laatu koneellisilla tarkistuksilla ja vertaisarviolla: tokenien muoto ja kontrastit (levossa ja hoverissa, molemmat teemat), kuvavertailu, vientipinnan lukko, jokaisen käyttäjäpalvelun build PR:n paketilla, sekä arvio toiselta käyttäjäpalvelulta.
3. Omistaja päättää vain tokenit ja brändin. Muu ratkeaa tarkistuksilla ja vertaisarviolla. Kuvio tulee pakettiin, kun käyttöpaikkoja on vähintään kahdessa palvelussa tai omistaja hyväksyy.
4. Versiointi koneella: PR kirjaa muutostiedoston, julkaisu kokoaa version ja CHANGELOGin.
5. Riidat ja linjaukset omistajalle, kirjataan tähän kansioon.

Toteutusjärjestys

• A yhteisen kehityksen perusta (tämä ohje, muutostiedostot, tarkistukset)
• B TP-PERUSTUKSEN ulkoasu siemeneksi: kehykset, tyhjä tila, kytkin, versioilmoitus, kuori puuttuvine paikkoineen, kehyssäännöt tyylikerrokseen, sävyteemat tokeneiksi
• C UI-kit-sivusto (demo/, tp-ds-ui-kit) tehdään uudelleen uuden paketin päälle
• D pilotti TP-TTK ja TP-MEDIA (jo Tailwind 4)
• E Tailwind 3 -palvelut (TP-IAM, TP-VASTAANOTTO, TP-NOTIFY) yksi kerrallaan