feat(tema): açık / koyu / sistem teması
All checks were successful
Deploy / deploy (push) Successful in 6m23s
All checks were successful
Deploy / deploy (push) Successful in 6m23s
- TemaSaglayici (next-themes) + alt bilgide TemaSecici - globals.css: .dark bloğunda palet token'ları çevrilir; bileşenlere dark: sınıfı yazılmaz - yüzeyler bg-white → bg-card, koyu haplar text-slate-50, SVG'lerde sabit renk yerine değişken - DESIGN.md §2.3 + tasarim-denetim kuralları (yuzey-beyaz, koyu-hap-beyaz-yazi, dark-sinif), AGENTS.md karanlık mod bölümü - docs: koyu tema denetimi raporu Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
@@ -85,19 +85,19 @@ function macMiOku(): boolean {
|
||||
|
||||
const KESFET_TONLARI = {
|
||||
slate: {
|
||||
pencere: "border-slate-200/80 bg-white",
|
||||
pencere: "border-slate-200/80 bg-card",
|
||||
nokta: "bg-slate-300",
|
||||
rozet: "border-slate-200 bg-slate-50 text-slate-600",
|
||||
cizgi: "bg-slate-200/90",
|
||||
},
|
||||
sky: {
|
||||
pencere: "border-sky-200/70 bg-white",
|
||||
pencere: "border-sky-200/70 bg-card",
|
||||
nokta: "bg-sky-300",
|
||||
rozet: "border-sky-200 bg-sky-50 text-sky-600",
|
||||
cizgi: "bg-sky-100",
|
||||
},
|
||||
amber: {
|
||||
pencere: "border-amber-200/70 bg-white",
|
||||
pencere: "border-amber-200/70 bg-card",
|
||||
nokta: "bg-amber-300",
|
||||
rozet: "border-amber-200 bg-amber-50 text-amber-600",
|
||||
cizgi: "bg-amber-100",
|
||||
@@ -267,7 +267,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
return (
|
||||
<>
|
||||
{/* lg altında logo + sağ küme ile çakışır (absolute); o aralıkta gizli */}
|
||||
<nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 rounded-full border border-slate-200 bg-white p-1.5 text-base font-medium text-slate-600 lg:flex">
|
||||
<nav className="absolute left-1/2 hidden -translate-x-1/2 items-center gap-1 rounded-full border border-slate-200 bg-card p-1.5 text-base font-medium text-slate-600 lg:flex">
|
||||
{profil ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -289,7 +289,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
</span>
|
||||
<span
|
||||
aria-hidden
|
||||
className="flex max-w-0 items-center gap-1 overflow-hidden rounded-full bg-slate-100 px-0 py-1.5 text-xs font-medium text-slate-500 opacity-0 transition-[max-width,padding,opacity,background-color,color] duration-200 group-hover/profil:max-w-28 group-hover/profil:bg-white group-hover/profil:px-2.5 group-hover/profil:text-slate-900 group-hover/profil:opacity-100 group-focus-visible/profil:max-w-28 group-focus-visible/profil:bg-white group-focus-visible/profil:px-2.5 group-focus-visible/profil:text-slate-900 group-focus-visible/profil:opacity-100"
|
||||
className="flex max-w-0 items-center gap-1 overflow-hidden rounded-full bg-slate-100 px-0 py-1.5 text-xs font-medium text-slate-500 opacity-0 transition-[max-width,padding,opacity,background-color,color] duration-200 group-hover/profil:max-w-28 group-hover/profil:bg-card group-hover/profil:px-2.5 group-hover/profil:text-slate-900 group-hover/profil:opacity-100 group-focus-visible/profil:max-w-28 group-focus-visible/profil:bg-card group-focus-visible/profil:px-2.5 group-focus-visible/profil:text-slate-900 group-focus-visible/profil:opacity-100"
|
||||
>
|
||||
<SquarePen className="size-3 shrink-0" aria-hidden />
|
||||
Değiştir
|
||||
@@ -318,15 +318,15 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => modalDegisti(true)}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-full bg-slate-900 px-5 py-2 text-white transition-[background-color,transform] duration-150 hover:bg-slate-700 active:scale-[0.97]"
|
||||
className="flex cursor-pointer items-center gap-2 rounded-full bg-slate-900 px-5 py-2 text-slate-50 transition-[background-color,transform] duration-150 hover:bg-slate-700 active:scale-[0.97]"
|
||||
>
|
||||
<Search className="size-4" aria-hidden />
|
||||
Ara
|
||||
<KbdGroup aria-hidden className="ml-1">
|
||||
<Kbd className="bg-white/15 text-white/85">
|
||||
<Kbd className="bg-slate-50/15 text-slate-50/85">
|
||||
{macMi ? "⌘" : "Ctrl"}
|
||||
</Kbd>
|
||||
<Kbd className="bg-white/15 text-white/85">K</Kbd>
|
||||
<Kbd className="bg-slate-50/15 text-slate-50/85">K</Kbd>
|
||||
</KbdGroup>
|
||||
</button>
|
||||
</nav>
|
||||
@@ -340,7 +340,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
onPointerEnter={preloadTercihProfiliKapisi}
|
||||
onFocus={preloadTercihProfiliKapisi}
|
||||
aria-label={`Sıralamanı ve tercihlerini değiştir (${profil.sira.toLocaleString("tr-TR")} · ${PUAN_TURU_ETIKET[profil.tur] ?? profil.tur})`}
|
||||
className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
|
||||
className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-card py-1 pl-2.5 pr-1.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-2 sm:text-sm"
|
||||
>
|
||||
<Trophy
|
||||
className="size-3.5 shrink-0 text-orange-500 sm:size-4"
|
||||
@@ -367,7 +367,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
onPointerEnter={preloadTercihProfiliKapisi}
|
||||
onFocus={preloadTercihProfiliKapisi}
|
||||
aria-label="Başarı sıralamanı gir"
|
||||
className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-white py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
|
||||
className="flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-full border border-slate-200 bg-card py-1 pl-2.5 pr-2.5 text-xs font-semibold text-slate-900 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:h-12 sm:gap-2 sm:pl-3.5 sm:pr-3 sm:text-sm"
|
||||
>
|
||||
<Trophy
|
||||
className="size-3.5 shrink-0 text-orange-500 sm:size-4"
|
||||
@@ -380,7 +380,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
type="button"
|
||||
onClick={() => modalDegisti(true)}
|
||||
aria-label="Bölüm, üniversite veya rehber ara"
|
||||
className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:size-12"
|
||||
className="flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-card text-slate-700 transition-[background-color,transform] duration-150 hover:bg-slate-100 active:scale-[0.96] sm:size-12"
|
||||
>
|
||||
<Search className="size-4" aria-hidden />
|
||||
</button>
|
||||
@@ -393,7 +393,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
event.preventDefault();
|
||||
inputRef.current?.focus();
|
||||
}}
|
||||
className="max-h-[min(720px,calc(100dvh-2rem))] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden rounded-2xl bg-white p-0 duration-200 sm:max-w-2xl motion-reduce:data-open:zoom-in-100 motion-reduce:data-closed:zoom-out-100"
|
||||
className="max-h-[min(720px,calc(100dvh-2rem))] grid-cols-[minmax(0,1fr)] grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overflow-hidden rounded-2xl bg-card p-0 duration-200 sm:max-w-2xl motion-reduce:data-open:zoom-in-100 motion-reduce:data-closed:zoom-out-100"
|
||||
>
|
||||
<DialogTitle className="sr-only">
|
||||
Bölüm, üniversite ve rehber ara
|
||||
@@ -416,7 +416,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
placeholder="Bölüm, üniversite veya rehber ara..."
|
||||
aria-label="Bölüm, üniversite veya rehber ara"
|
||||
autoComplete="off"
|
||||
className="h-16 min-w-0 flex-1 bg-transparent text-base text-slate-950 outline-none placeholder:text-slate-400 sm:h-18 sm:text-lg"
|
||||
className="h-16 min-w-0 flex-1 bg-transparent text-base text-slate-900 outline-none placeholder:text-slate-400 sm:h-18 sm:text-lg"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@@ -531,7 +531,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
>
|
||||
<ProgressiveBlur
|
||||
position="top"
|
||||
backgroundColor="#ffffff"
|
||||
backgroundColor="var(--card)"
|
||||
height="56px"
|
||||
blurAmount="4px"
|
||||
/>
|
||||
@@ -542,7 +542,7 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
>
|
||||
<ProgressiveBlur
|
||||
position="bottom"
|
||||
backgroundColor="#ffffff"
|
||||
backgroundColor="var(--card)"
|
||||
height="56px"
|
||||
blurAmount="4px"
|
||||
/>
|
||||
@@ -550,7 +550,11 @@ export function KatalogArama({ rehberler }: { rehberler: RehberAramaKaydi[] }) {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border-t border-slate-200 bg-slate-50/80 px-4 py-3 text-xs text-slate-500 sm:px-5">
|
||||
<span>En az 2 harf yazarak ara</span>
|
||||
<span>
|
||||
{aramaAktif
|
||||
? "Bölüm, üniversite ve rehberde aranıyor"
|
||||
: "En az 2 harf yazarak ara"}
|
||||
</span>
|
||||
<span className="hidden items-center gap-1.5 sm:flex">
|
||||
<Kbd>Esc</Kbd> ile kapat
|
||||
</span>
|
||||
@@ -597,7 +601,7 @@ function BaslangicIcerigi({ onSec }: { onSec: () => void }) {
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-5 flex gap-3 rounded-2xl bg-slate-50 px-3.5 py-3.5 sm:px-4">
|
||||
<span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-white text-slate-400 shadow-[0_0_0_1px_rgba(15,23,42,0.06)]">
|
||||
<span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-card text-slate-400 shadow-[0_0_0_1px_rgba(15,23,42,0.06)]">
|
||||
<Search className="size-3.5" aria-hidden />
|
||||
</span>
|
||||
<div className="min-w-0">
|
||||
@@ -638,7 +642,7 @@ function KesfetLinki({
|
||||
<Link
|
||||
href={href}
|
||||
onClick={onSec}
|
||||
className="group/kesfet flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
className="group/kesfet flex cursor-pointer flex-col overflow-hidden rounded-2xl border border-slate-200 bg-card transition-transform duration-150 ease-out active:scale-[0.97]"
|
||||
>
|
||||
{/* Mini tarayıcı — sekme içinde tek büyük ikon, alta doğru maske ile solar */}
|
||||
<div
|
||||
@@ -652,7 +656,7 @@ function KesfetLinki({
|
||||
<span className={`size-1.5 rounded-full ${palet.nokta}`} />
|
||||
<span className={`size-1.5 rounded-full ${palet.nokta} opacity-65`} />
|
||||
<span className={`size-1.5 rounded-full ${palet.nokta} opacity-35`} />
|
||||
<span className="ml-1.5 h-1.5 max-w-[55%] flex-1 rounded-full bg-white shadow-[0_0_0_1px_rgba(15,23,42,0.06)]" />
|
||||
<span className="ml-1.5 h-1.5 max-w-[55%] flex-1 rounded-full bg-card shadow-[0_0_0_1px_rgba(15,23,42,0.06)]" />
|
||||
</div>
|
||||
<div className="relative min-h-0 flex-1 overflow-hidden">
|
||||
<div className="absolute inset-x-0 top-0 flex flex-col items-center gap-1.5 pt-2 sm:gap-2 sm:pt-2.5">
|
||||
@@ -666,14 +670,14 @@ function KesfetLinki({
|
||||
</div>
|
||||
<ProgressiveBlur
|
||||
position="bottom"
|
||||
backgroundColor="#ffffff"
|
||||
backgroundColor="var(--card)"
|
||||
height="45%"
|
||||
blurAmount="2px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-white to-transparent" />
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-linear-to-t from-card to-transparent" />
|
||||
</div>
|
||||
|
||||
<span className="min-w-0 px-2.5 pb-3 pt-2 text-center sm:px-3.5 sm:pb-3.5 sm:pt-2.5 sm:text-left">
|
||||
@@ -761,7 +765,7 @@ function RehberSonucKarti({
|
||||
<Link
|
||||
href={`/rehber/${yazi.slug}`}
|
||||
onClick={onSec}
|
||||
className="group overflow-hidden rounded-xl border border-slate-200 bg-white p-1.5 transition-[border-color,background-color,transform] duration-150 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.99]"
|
||||
className="group overflow-hidden rounded-xl border border-slate-200 bg-card p-1.5 transition-[border-color,background-color,transform] duration-150 hover:border-slate-300 hover:bg-slate-50 active:scale-[0.99]"
|
||||
>
|
||||
<RehberKapak baslik={yazi.baslik} compact className="rounded-lg" />
|
||||
<span className="block px-2 pb-1.5 pt-2.5">
|
||||
|
||||
Reference in New Issue
Block a user