bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(tasarim): toast açıklaması okunmuyordu — tema light'a sabit, metin ve düğme tasarım dilinde
All checks were successful
Deploy / deploy (push) Successful in 4m38s
Details

Browse Source 
Bilal (24 Eyl 2026): "İlk programın listende · 1/24" toast'unun açıklaması
okunmuyor. Sebep: sonner temayı next-themes'ten alıyor, sistem koyu
temadayken açıklama beyaza yakın griye dönüyor, zemin beyaz kalıyordu.
Üründe karanlık mod yok; tema light'a sabitlendi. Başlık slate-900
semibold, açıklama slate-600, aksiyon düğmesi koyu hap (h-9 rounded-full).
DESIGN.md §4.16.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 12:43:28 +03:00
parent 286a9f432b
commit 3394e2e04a
3 changed files with 43 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/globals.css
View File

@@ -321,3 +321,31 @@
.kt-piksel-nabiz {
animation: kt-piksel-nabiz 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Bildirim (toast, sonner) — DESIGN.md §4.16. Başlık ve açıklama slate
tonlarında okunur; aksiyon düğmesi üst çubuktaki koyu hap dilinde.
".toaster" öneki şart: sonner kendi stilini çalışma anında enjekte eder,
aynı özgüllükteki kural onun altında kalır. */
.toaster [data-sonner-toast][data-styled="true"] {
border-radius: 1rem;
border-color: var(--color-slate-200);
}
.toaster [data-sonner-toast][data-styled="true"] [data-title] {
font-weight: 600;
color: var(--color-slate-900);
}
.toaster [data-sonner-toast][data-styled="true"] [data-description] {
color: var(--color-slate-600);
}
.toaster [data-sonner-toast][data-styled="true"] [data-button] {
height: 2.25rem;
padding-inline: 0.875rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 600;
color: #fff;
background: var(--color-slate-900);
}
.toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
background: var(--color-slate-700);
}

11
src/components/ui/sonner.tsx
View File

@@ -1,15 +1,18 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react"
/**
* Bildirimler (DESIGN.md §4.16). Tema "light"e sabit: üründe karanlık mod
* yok (§1.2); sistem koyu temadayken sonner açıklamayı beyaza yakın griye
* çevirip beyaz zeminde okunmaz hâle getiriyordu (Bilal, 24 Eyl 2026:
* "toast açıklaması okunmuyor"). Metin ve buton renkleri globals.css'te.
*/
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
return (
<Sonner
theme={theme as ToasterProps["theme"]}
theme="light"
className="toaster group"
icons={{
success: (