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
All checks were successful
Deploy / deploy (push) Successful in 4m38s
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:
@@ -423,6 +423,14 @@ tablosu bu sabitleri kullanır, sınıfı elle yazmaz.
|
|||||||
- Tür çipi devlet/vakıf için de aynı slate çip; vakıf violet değildir (§2.2).
|
- Tür çipi devlet/vakıf için de aynı slate çip; vakıf violet değildir (§2.2).
|
||||||
- Tablo başlığı `h-12 text-sm font-semibold text-slate-500`; hücre dolgusu `py-4 pl-4 sm:pl-5`.
|
- Tablo başlığı `h-12 text-sm font-semibold text-slate-500`; hücre dolgusu `py-4 pl-4 sm:pl-5`.
|
||||||
|
|
||||||
|
### 4.16 Bildirim (toast) — `src/components/ui/sonner.tsx` + `globals.css`
|
||||||
|
Tema **light'a sabit** (karanlık mod yok, §1.2): sistem koyu temadayken sonner açıklamayı beyaza
|
||||||
|
yakın griye çevirip beyaz zeminde okunmaz ediyordu (Bilal, 24 Eyl 2026: "toast açıklaması
|
||||||
|
okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-slate-900`; açıklama
|
||||||
|
`text-slate-600`; aksiyon düğmesi üst çubuktaki koyu hap (`h-9 rounded-full bg-slate-900` beyaz
|
||||||
|
yazı, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
|
||||||
|
(`program-ekle-butonu.tsx`) tek cümle açıklama + tek aksiyon taşır.
|
||||||
|
|
||||||
## 5. Yerleşim
|
## 5. Yerleşim
|
||||||
|
|
||||||
### 5.1 Genel
|
### 5.1 Genel
|
||||||
|
|||||||
@@ -321,3 +321,31 @@
|
|||||||
.kt-piksel-nabiz {
|
.kt-piksel-nabiz {
|
||||||
animation: kt-piksel-nabiz 0.42s cubic-bezier(0.23, 1, 0.32, 1);
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,18 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import { useTheme } from "next-themes"
|
|
||||||
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
import { Toaster as Sonner, type ToasterProps } from "sonner"
|
||||||
import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react"
|
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 Toaster = ({ ...props }: ToasterProps) => {
|
||||||
const { theme = "system" } = useTheme()
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sonner
|
<Sonner
|
||||||
theme={theme as ToasterProps["theme"]}
|
theme="light"
|
||||||
className="toaster group"
|
className="toaster group"
|
||||||
icons={{
|
icons={{
|
||||||
success: (
|
success: (
|
||||||
|
|||||||
Reference in New Issue
Block a user