v1-beta-tema #9

Merged
bilal merged 19 commits from v1-beta-tema into main 2026-10-09 02:30:44 +03:00
3 changed files with 16 additions and 14 deletions
Showing only changes of commit 49d88cd72f - Show all commits

View File

@@ -136,8 +136,8 @@ Seçici `src/components/tema-secici.tsx` (footer'da), sağlayıcı `src/componen
**Geçiş ve kısayol (7 Eki 2026; son hâli 9 Eki):** tema değişimi anlık değildir; yeni **Geçiş ve kısayol (7 Eki 2026; son hâli 9 Eki):** tema değişimi anlık değildir; yeni
tema header'daki logodan **yumuşak bir halka** gibi açılır: kenarı keskin değil, geniş ve tema header'daki logodan **yumuşak bir halka** gibi açılır: kenarı keskin değil, geniş ve
tüylü (ışık yayılır gibi), 1100 ms, yumuşak kalkıp yumuşak durur. Aynı anda logonun kareleri tüylü (ışık yayılır gibi), 1100 ms, yumuşak kalkıp yumuşak durur. Aynı anda logonun kareleri
yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi ve turuncu kareler iki yeni temanın biçimine dönüşür: koyuya geçişte şeftali kare hilale, mavi kare hilalin iki ucunun
yıldıza; açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden ortasındaki yıldıza (turuncu söner); açığa geçişte turuncu kare güneşe, şeftali kare halesine. Kısa bir an durur, yeniden
logoya toplanır (`animasyonlu-mark.tsx` `temaSekli`, 1,7 sn; yalnız header'daki logo; hover döngüsünden logoya toplanır (`animasyonlu-mark.tsx` `temaSekli`, 1,7 sn; yalnız header'daki logo; hover döngüsünden
önceliklidir, biçim bitince imleç üzerindeyse döngü kaldığı yerden değil yerinden sürer). Tema önceliklidir, biçim bitince imleç üzerindeyse döngü kaldığı yerden değil yerinden sürer). Tema
seçicinin ikonları aynı biçimlerin durağan hâlidir (`tema-ikonu.tsx`: güneş, ay, Sistem için seçicinin ikonları aynı biçimlerin durağan hâlidir (`tema-ikonu.tsx`: güneş, ay, Sistem için

View File

@@ -105,7 +105,8 @@ function merkezde(cx: number, cy: number, boyut: number): string {
// Tema geçişi biçimi (DESIGN.md §2.3): geçiş logodan yayılırken kareler // Tema geçişi biçimi (DESIGN.md §2.3): geçiş logodan yayılırken kareler
// neye geçildiğini gösterir, kısa bir an durur ve yeniden logoya toplanır. // neye geçildiğini gösterir, kısa bir an durur ve yeniden logoya toplanır.
// - Koyuya: şeftali kare hilale, mavi ve turuncu kareler iki küçük yıldıza. // - Koyuya: şeftali kare hilale, mavi kare hilalin kucağındaki yıldıza;
// turuncu söner.
// - Açığa: turuncu kare güneşe, şeftali kare arkasındaki haleye; mavi söner. // - Açığa: turuncu kare güneşe, şeftali kare arkasındaki haleye; mavi söner.
// Toplam süre ve duraklar: %30'da biçim tamam, %70'e kadar durur, sonra döner. // Toplam süre ve duraklar: %30'da biçim tamam, %70'e kadar durur, sonra döner.
const SEKIL_SURE = 1700; const SEKIL_SURE = 1700;
@@ -113,7 +114,7 @@ const SEKIL_DURAKLAR = [0, 0.3, 0.7, 1];
type SekilHedefi = { translate: string; scale: string; opacity: number }; type SekilHedefi = { translate: string; scale: string; opacity: number };
// Ay kompozisyonu kutunun merkezine (90) göre küçültülür ve logonun alanına // Ay kompozisyonu kutunun merkezine (90) göre küçültülür ve logonun alanına
// (x 27–151) oturacak kadar kaydırılır: sağdaki yıldız yazıya değmez. // (x 27–151) oturacak kadar kaydırılır.
const AY_OLCEK = 0.82; const AY_OLCEK = 0.82;
const AY_KAYMA_X = 8; const AY_KAYMA_X = 8;
function ay(nokta: number, kayma = AY_KAYMA_X): number { function ay(nokta: number, kayma = AY_KAYMA_X): number {
@@ -125,13 +126,14 @@ function sekilHedefi(i: number, koyu: boolean): SekilHedefi {
const b = KARELER[i].boyut; const b = KARELER[i].boyut;
if (koyu) { if (koyu) {
return [ return [
// Biçim tema-ikonu.tsx'teki ay ikonuyla aynı (gövde r74 @ (76,92), // Biçim tema-ikonu.tsx'teki ay ikonuyla aynı: gövde r74 @ (76,92),
// yıldızlar r15 @ (140,42) ve r10 @ (106,92)): hilalin sırtı solda, // tek yıldız r13 @ (108,79) — hilalin iki sivri ucunun tam ortası (iki
// yıldızlar sağında. `ay` onu logonun // dairenin kesişim kirişinin orta noktası). Turuncu kare yıldızın
// kendi alanına sığdırır — ikon kutuyu doldurur, logoda sağında yazı var. // yerinde söner: güneşte mavi, ayda turuncu sahneden çekilir. `ay`
{ translate: merkezde(ay(140), ay(42, 0), b), scale: String((30 * AY_OLCEK) / b), opacity: 1 }, // yıldız // kompozisyonu logonun kendi alanına sığdırır.
{ translate: merkezde(ay(108), ay(79, 0), b), scale: String((26 * AY_OLCEK) / b), opacity: 1 }, // yıldız
{ translate: merkezde(ay(76), ay(92, 0), b), scale: String((148 * AY_OLCEK) / b), opacity: 1 }, // hilal { translate: merkezde(ay(76), ay(92, 0), b), scale: String((148 * AY_OLCEK) / b), opacity: 1 }, // hilal
{ translate: merkezde(ay(106), ay(92, 0), b), scale: String((20 * AY_OLCEK) / b), opacity: 1 }, // yıldız { translate: merkezde(ay(108), ay(79, 0), b), scale: "0.2", opacity: 0 }, // söner
][i]; ][i];
} }
return [ return [

View File

@@ -3,7 +3,7 @@ import { useId } from "react";
// Tema seçicinin ikonları (DESIGN.md §2.3): tema geçişinde header'daki logonun // Tema seçicinin ikonları (DESIGN.md §2.3): tema geçişinde header'daki logonun
// dönüştüğü biçimlerin durağan hâli (animasyonlu-mark.tsx `temaSekli`). // dönüştüğü biçimlerin durağan hâli (animasyonlu-mark.tsx `temaSekli`).
// - "light": güneş — turuncu daire, arkasında şeftali hale. // - "light": güneş — turuncu daire, arkasında şeftali hale.
// - "dark": ay — şeftali hilal, yanında mavi ve turuncu iki yıldız. // - "dark": ay — şeftali hilal, iki ucunun ortasında mavi bir yıldız.
// - "system": logonun üç karesi — ikisine de dönüşebilen hâl. // - "system": logonun üç karesi — ikisine de dönüşebilen hâl.
// Renkler logonun renkleridir ve iki temada aynıdır (§2.3); 180'lik kutu // Renkler logonun renkleridir ve iki temada aynıdır (§2.3); 180'lik kutu
// public/kolay-tercih-mark.svg ile aynı. Dekoratiftir: anlamı yanındaki // public/kolay-tercih-mark.svg ile aynı. Dekoratiftir: anlamı yanındaki
@@ -33,14 +33,14 @@ export function TemaIkonu({
) : tur === "dark" ? ( ) : tur === "dark" ? (
<> <>
{/* Hilal: daireden, sağa-yukarı kaydırılmış ikinci daire çıkarılır {/* Hilal: daireden, sağa-yukarı kaydırılmış ikinci daire çıkarılır
(sırtı solda, yıldızlar sağında). */} (sırtı solda). */}
<mask id={maskeId}> <mask id={maskeId}>
<rect width="180" height="180" fill="#fff" /> <rect width="180" height="180" fill="#fff" />
<circle cx="116" cy="76" r="66" fill="#000" /> <circle cx="116" cy="76" r="66" fill="#000" />
</mask> </mask>
<circle cx="76" cy="92" r="74" fill={SEFTALI} mask={`url(#${maskeId})`} /> <circle cx="76" cy="92" r="74" fill={SEFTALI} mask={`url(#${maskeId})`} />
<circle cx="140" cy="42" r="15" fill={MAVI} /> {/* Yıldız: hilalin iki sivri ucunun tam ortası. */}
<circle cx="106" cy="92" r="10" fill={TURUNCU} /> <circle cx="108" cy="79" r="13" fill={MAVI} />
</> </>
) : ( ) : (
<> <>