@moontra/moonui 6.22.0 → 6.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.22.0",
+  "version": "6.24.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/__tests__/issue-544-kontrast.test.tsx

@@ -0,0 +1,601 @@
+/**
+ * #544 + #545 — kırmızı/durum renklerinin DOLGU ve METİN rollerinde WCAG AA kontrastı.
+ *
+ * ══ #544 (free paket) ══════════════════════════════════════════════════════════
+ * `hsl(0 84% 60%)` = #ef4343 iki ayrı token'da (light `--error`, dark `--destructive`)
+ * DOLGU rolünde beyaza yakın metin taşıyor ve AA'yı geçmiyor:
+ *   Badge  destructive light  #ffffff / #ef4343 → 3.78  ✗
+ *   Button destructive dark   #f8fafc / #ef4343 → 3.61  ✗
+ *
+ * ⚠️ TOKEN DEĞERLERİ DEĞİŞTİRİLMEDİ — ölçümle gerekçelendirildi (issue'nun "Yol B"si
+ * ve "Yol A"sının Badge ayağı REDDEDİLDİ). Dört ayrı test dosyası bu değerleri
+ * BİLEREK kilitliyor:
+ *   · dark-token-contrast.test.ts — dark `--destructive` 60%, METİN rolü için seçildi
+ *     (kart üstünde 4.69); dolgu rolündeki 3.61 orada BELGELENMİŞ bir uzlaşmadır ve
+ *     3.0 tabanıyla kilitli. Token'ı koyulaştırmak 43 dosyalık `text-destructive`
+ *     metin rolünü kırar.
+ *   · progress-warning-error-contrast.test.ts + slider-warning-error-contrast.test.ts
+ *     (free) + pro ikizi — `--error` light = [239,67,67] ve `--error`in `.dark`
+ *     bloğunda EZİLMEMESİ, #424/#442'nin kök-neden anlatısının DAYANAĞI.
+ * Bu yüzden düzeltme #424/#442/#454'ün kurduğu presedansın şeklini izler:
+ * **token'a değil VARYANTA dokun, skalanın bir kademesine in.**
+ *
+ * TON SEÇİMİ ÖLÇÜMLE YAPILDI (brief: "AA'yı sağlayan EN KÜÇÜK ayar"):
+ *   aday      hex       beyazla  #f8fafc ile   bugünkü #ef4343'e ΔE*ab
+ *   error-500 #ef4444   3.76 ✗   3.60 ✗        —
+ *   error-600 #dc2626   4.83 ✓   4.62 ✓        10.3   ← SEÇİLDİ (en küçük ayar)
+ *   error-700 #b91c1c   6.47 ✓   6.18 ✓        16.2
+ *   --destructive light #e11313  4.88 ✓ 4.66 ✓ 18.8   ← issue'nun önerisi, 2× daha büyük değişim
+ * Hue üçünde de 0° → "uyarı kırmızısı" kimliği korunur (issue §6 kabul kriteri).
+ *
+ * ══ #545 (docs canlı demo kodu) ════════════════════════════════════════════════
+ * Aynı sınıf kusur `src/docs-config/`te ham Tailwind literali olarak duruyor.
+ * ⚠️ NAİF DÜZELTMENİN TUZAĞI ÖLÇÜLDÜ: `-600 → -700` tek başına LIGHT'ı düzeltip
+ * DARK'ı KIRIYOR (dark ikizi olmayan yerlerde):
+ *   text-green-600  koyu kart #111827 → 5.38 ✓   ama  success-700 → 3.54 ✗
+ *   text-yellow-600 koyu kart #111827 → 6.04 ✓   ama  warning-700 → 3.60 ✗
+ * Bu yüzden ton yükseltilen HER yere dark ikizi (-400) eklenir; dark ikizi ZATEN
+ * VAR ve geçiyorsa (`dark:text-red-300` → 9.41) DOKUNULMAZ.
+ *
+ * ⚠️ ZEMİN HER ÖLÇÜMDE AÇIKÇA YAZILIR. `text-red-600` beyaza karşı 4.83 ile GEÇER
+ * ama gerçek demo zemini `bg-red-50` (#fef2f2) ve orada 4.41 ile KALIR — bu issue'nun
+ * kendi kaydettiği ölçüm dersi.
+ */
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as fs from 'fs'
+import * as path from 'path'
+import { Badge } from '../components/ui/badge'
+import { Button } from '../components/ui/button'
+
+const PAKET = path.resolve(__dirname, '..')
+const DEPO = path.resolve(__dirname, '../../../..')
+const tokens = fs.readFileSync(path.join(PAKET, 'styles/tokens.css'), 'utf8')
+const badgeSrc = fs.readFileSync(path.join(PAKET, 'components/ui/badge.tsx'), 'utf8')
+const buttonSrc = fs.readFileSync(path.join(PAKET, 'components/ui/button.tsx'), 'utf8')
+
+type RGB = [number, number, number]
+type Blok = 'light' | 'dark'
+
+// ─── Renk aritmetiği (switch-variant-contrast.test.tsx ile birebir aynı yöntem) ───
+
+function tokenOku(ad: string, blok: Blok): string | null {
+  const kaynak =
+    blok === 'dark' ? tokens.slice(tokens.indexOf('.dark')) : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): RGB {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+const hslTokenRgb = (v: string): RGB => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+/** Skala token'ları ("--error-600: 220 38 38") HSL DEĞİL, RGB üçlüsüdür */
+const rgbTokenRgb = (v: string): RGB => {
+  const p = v.split(/\s+/).map((x) => parseFloat(x))
+  return [p[0], p[1], p[2]]
+}
+/** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
+const semantikRgb = (ad: string, blok: Blok): RGB =>
+  hslTokenRgb(tokenOku(ad, blok) ?? tokenOku(ad, 'light')!)
+/** Skala kademeleri tema-BAĞIMSIZ: `.dark` bloğu onları ezmiyor (preset yorumu) */
+const skalaRgb = (ad: string): RGB => rgbTokenRgb(tokenOku(ad, 'light')!)
+
+function bagilParlaklik([r, g, b]: RGB): number {
+  const c = (v: number) => {
+    const x = v / 255
+    return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+function kontrast(a: RGB, b: RGB): number {
+  const la = bagilParlaklik(a)
+  const lb = bagilParlaklik(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+/** Yarı saydam bir rengi opak zemine bindir — `bg-error/90` gibi sınıflar için ŞART */
+const komposit = (ust: RGB, alt: RGB, alfa: number): RGB =>
+  ust.map((c, i) => Math.round(c * alfa + alt[i] * (1 - alfa))) as RGB
+
+const hex = ([r, g, b]: RGB): string =>
+  '#' + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, '0')).join('')
+
+// ─── Zeminler — HER ÖLÇÜMDE ADIYLA ANILIR ───────────────────────────────────────
+const BEYAZ: RGB = [255, 255, 255]
+/** Docs kabuğunda ölçülen GERÇEK koyu kart (#284/#368/#448/#454 konvansiyonu) */
+const KART_GERCEK_DARK: RGB = [17, 24, 39]
+
+const AA_METIN = 4.5
+const AA_METIN_DISI = 3.0
+
+// ─── Varyant sınıf dizgesini KAYNAKTAN çöz (renkler VARSAYILMAZ) ────────────────
+
+/** cva `variant` bloğundaki dizi biçimli varyant girdisini birleşik sınıf dizgesi olarak ver */
+function varyantSinifi(kaynak: string, varyant: string): string {
+  const m = kaynak.match(new RegExp(`\\n\\s*${varyant}:\\s*\\[([\\s\\S]*?)\\n\\s*\\]`))
+  if (!m) throw new Error(`${varyant} varyantı bulunamadı`)
+  return (m[1].match(/"([^"]*)"/g) ?? []).map((s) => s.slice(1, -1)).join(' ')
+}
+
+/** `bg-error-600` / `bg-error` / `bg-error/90` / `text-white` → RGB (alfa varsa zemine bindirir) */
+function sinifRengi(sinif: string, blok: Blok, zemin: RGB): RGB {
+  // ⚠️ `+` ŞART: `dark:hover:bg-error-700` gibi ÇOK önekli sınıflarda tek tur
+  // soyma yetmez ve sınıf "çözülemez" diye PATLAR — testi kontrast ölçmeden
+  // kırmızı gösterir (yanlış sebeple kırmızı = geçersiz ölçüm).
+  const g = sinif.replace(/^(?:(?:dark|hover|active|focus-visible|group-hover):)+/, '')
+  const m = g.match(/^(?:bg|text|border|ring)-([a-z-]+?)(?:-(\d{2,3}))?(?:\/(\d{1,3}))?$/)
+  if (!m) throw new Error(`çözülemeyen sınıf: ${sinif}`)
+  const [, ad, kademe, alfa] = m
+  if (ad === 'white') return alfa ? komposit(BEYAZ, zemin, Number(alfa) / 100) : BEYAZ
+  const taban = kademe ? skalaRgb(`${ad}-${kademe}`) : semantikRgb(ad, blok)
+  return alfa ? komposit(taban, zemin, Number(alfa) / 100) : taban
+}
+
+/** Bir varyantın ilgili temadaki ETKİN dolgusu — `dark:` önekli sınıf dark'ta kazanır */
+function dolgu(kaynak: string, varyant: string, blok: Blok, zemin: RGB, onek = ''): RGB {
+  const adaylar = varyantSinifi(kaynak, varyant)
+    .split(/\s+/)
+    .filter((s) => new RegExp(`^(?:dark:)?${onek}bg-`).test(s))
+  const dark = adaylar.find((s) => s.startsWith('dark:'))
+  const light = adaylar.find((s) => !s.startsWith('dark:'))
+  const secilen = blok === 'dark' ? (dark ?? light) : light
+  if (!secilen) throw new Error(`${varyant}/${blok}${onek ? ` (${onek})` : ''}: dolgu sınıfı yok`)
+  return sinifRengi(secilen, blok, zemin)
+}
+
+/** Varyantın metin rengi (`text-*`), `bg-*` HARİÇ */
+function metin(kaynak: string, varyant: string, blok: Blok, zemin: RGB): RGB {
+  const adaylar = varyantSinifi(kaynak, varyant)
+    .split(/\s+/)
+    .filter((s) => /^(?:dark:)?text-/.test(s))
+  const dark = adaylar.find((s) => s.startsWith('dark:'))
+  const light = adaylar.find((s) => !s.startsWith('dark:'))
+  const secilen = blok === 'dark' ? (dark ?? light) : light
+  if (!secilen) throw new Error(`${varyant}/${blok}: metin sınıfı yok`)
+  return sinifRengi(secilen, blok, zemin)
+}
+
+/** Dolgu opaksa zeminden bağımsızdır; yarı saydamsa zemine göre değişir → ikisini de dene */
+function dolguMetinOrani(kaynak: string, varyant: string, blok: Blok, zemin: RGB) {
+  const d = dolgu(kaynak, varyant, blok, zemin)
+  return { oran: kontrast(d, metin(kaynak, varyant, blok, d)), dolguHex: hex(d) }
+}
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#544/#545 — hesaplayıcı çapaları (sessiz-yeşil koruması)', () => {
+  it('ÇAPA: tokens.css `--info-subtle` çifti belgelenen ~9.5 oranını veriyor', () => {
+    const oran = kontrast(semantikRgb('info-subtle', 'light'), semantikRgb('info-subtle-foreground', 'light'))
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('ÇAPA: siyah↔beyaz tam 21.00', () => {
+    expect(kontrast([0, 0, 0], BEYAZ)).toBeCloseTo(21, 2)
+  })
+
+  it('ÇAPA: hesaplayıcı, issue #544 gövdesindeki GERÇEK TARAYICI ölçümlerini üretiyor', () => {
+    // Bu tutmuyorsa aşağıdaki tüm oranlar anlamsızdır.
+    // Badge light: zemin YOK (opak dolgu) — çift doğrudan #ffffff / #ef4343
+    expect(kontrast(semantikRgb('error', 'light'), BEYAZ)).toBeCloseTo(3.78, 2)
+    // Button dark: #f8fafc / #ef4343
+    expect(
+      kontrast(semantikRgb('destructive', 'dark'), semantikRgb('destructive-foreground', 'dark'))
+    ).toBeCloseTo(3.61, 2)
+  })
+
+  it('NEGATİF KONTROL: eşik mantığı ayrım yapıyor — eski değerler GERÇEKTEN kalıyor', () => {
+    // "Her şey yeşil" tuzağına karşı: ölçüm başarısızlığı tespit edebiliyor mu?
+    expect(kontrast(semantikRgb('error', 'light'), BEYAZ)).toBeLessThan(AA_METIN)
+    expect(kontrast(skalaRgb('error-500'), BEYAZ)).toBeLessThan(AA_METIN)
+    // ve gerçekten geçen bir değeri geçmiş sayıyor
+    expect(kontrast(skalaRgb('error-700'), BEYAZ)).toBeGreaterThan(AA_METIN)
+  })
+
+  it('ÇAPA: skala token’ları tema-BAĞIMSIZ — `.dark` bloğu onları EZMİYOR', () => {
+    // `bg-error-600`ün tek sınıfla iki temayı birden kapatmasının YAPISAL dayanağı.
+    // Biri `.dark` bloğuna `--error-600` eklerse bu kırmızı olur.
+    for (const k of [400, 600, 700, 800]) expect(tokenOku(`error-${k}`, 'dark')).toBeNull()
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+describe('#544 — KAPSAM KİLİDİ: token değerleri DEĞİŞMEDİ', () => {
+  // Bu issue token'a DOKUNMAZ. Biri token'ı oynatırsa dört ayrı dosyadaki
+  // kök-neden anlatısı sessizce geçersizleşir; burası o kararı görünür kılar.
+  it.each([
+    ['error', 'light', '0 84% 60%'],
+    ['destructive', 'light', '0 84.2% 48%'],
+    ['destructive', 'dark', '0 84% 60%'],
+  ])('--%s (%s) sabit: %s', (ad, blok, beklenen) => {
+    expect(tokenOku(ad, blok as Blok)).toBe(beklenen)
+  })
+
+  it('`--error` hâlâ `.dark` bloğunda EZİLMİYOR (#424/#442’nin kök-neden dayanağı)', () => {
+    expect(tokenOku('error', 'dark')).toBeNull()
+  })
+})
+
+describe('#544 — KABUL KRİTERİ: Badge destructive dolgusu ≥ 4.5:1', () => {
+  // Badge `text-white` taşır. Dolgu bugün YARI SAYDAM (`dark:bg-error/90`) olduğu
+  // için dark ölçümü ZEMİNE bağlı — iki gerçek zeminde birden ölçülür.
+  it('LIGHT — zemin YOK (opak dolgu), çift: dolgu ↔ text-white', () => {
+    const { oran, dolguHex } = dolguMetinOrani(badgeSrc, 'destructive', 'light', BEYAZ)
+    expect(`${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(`${dolguHex}: geçer`)
+  })
+
+  it.each([
+    ['koyu sayfa --background', 'dark'],
+    ['gerçek koyu kart #111827', 'kart'],
+  ])('DARK — zemin: %s', (zeminAdi, tur) => {
+    const zemin = tur === 'kart' ? KART_GERCEK_DARK : semantikRgb('background', 'dark')
+    const { oran, dolguHex } = dolguMetinOrani(badgeSrc, 'destructive', 'dark', zemin)
+    expect(`[${zeminAdi}] ${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+      `[${zeminAdi}] ${dolguHex}: geçer`
+    )
+  })
+
+  it('HOVER durumu da AA taşıyor (düzeltme tek duruma sıkışmasın)', () => {
+    for (const blok of ['light', 'dark'] as const) {
+      const zemin = blok === 'dark' ? KART_GERCEK_DARK : BEYAZ
+      const d = dolgu(badgeSrc, 'destructive', blok, zemin, 'hover:')
+      const oran = kontrast(d, metin(badgeSrc, 'destructive', blok, d))
+      expect(`${blok} hover ${hex(d)}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `${blok} hover ${hex(d)}: geçer`
+      )
+    }
+  })
+})
+
+describe('#544 — KABUL KRİTERİ: Button destructive dolgusu ≥ 4.5:1', () => {
+  it('KONTROL GRUBU — LIGHT zaten geçiyordu (4.66) ve DOKUNULMADI', () => {
+    // Kırmızı fazda BİLEREK yeşil kalan test. İki işi var:
+    // (1) düzeneğin topluca kırmızı olmadığını gösterir,
+    // (2) #442'nin "geçen temayı oynatma, regresyon yüzeyini sıfır tut" kuralını kilitler.
+    const { oran } = dolguMetinOrani(buttonSrc, 'destructive', 'light', BEYAZ)
+    expect(oran).toBeGreaterThanOrEqual(AA_METIN)
+    expect(oran).toBeCloseTo(4.66, 1)
+    expect(varyantSinifi(buttonSrc, 'destructive')).toContain('bg-destructive text-destructive-foreground')
+  })
+
+  it('DARK — zemin YOK (opak dolgu), çift: dolgu ↔ text-destructive-foreground', () => {
+    const { oran, dolguHex } = dolguMetinOrani(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK)
+    expect(`${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(`${dolguHex}: geçer`)
+  })
+
+  it('HOVER + ACTIVE durumları da AA taşıyor (dark)', () => {
+    for (const onek of ['hover:', 'active:']) {
+      const d = dolgu(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK, onek)
+      const oran = kontrast(d, metin(buttonSrc, 'destructive', 'dark', d))
+      expect(`${onek}${hex(d)}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `${onek}${hex(d)}: geçer`
+      )
+    }
+  })
+})
+
+describe('#544 — kimlik korunumu: “uyarı kırmızısı” algısı kayboldu mu?', () => {
+  it('seçilen dolgu hâlâ SAF KIRMIZI (hue 0°, issue §6 görsel kabul kriteri)', () => {
+    const hue = ([r, g, b]: RGB) => {
+      const mx = Math.max(r, g, b)
+      const mn = Math.min(r, g, b)
+      if (mx === mn) return 0
+      const d = mx - mn
+      const h = mx === r ? ((g - b) / d) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4
+      return Math.round((h * 60 + 360) % 360)
+    }
+    expect(hue(dolgu(badgeSrc, 'destructive', 'light', BEYAZ))).toBe(0)
+    expect(hue(dolgu(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK))).toBe(0)
+  })
+})
+
+describe('#544 — REGRESYON BEKÇİSİ: dokunulmayan varyantlar bit-bit aynı', () => {
+  // Ölçülen taban (2026-08-21, düzeltme ÖNCESİ). Bu dizgeler değişirse
+  // düzeltme kapsam dışına taşmış demektir.
+  it('Badge: destructive DIŞINDAKİ varyant dizgeleri değişmedi', () => {
+    // NOT: Badge'in VARSAYILAN varyantının adı `default` değil `primary`.
+    expect(varyantSinifi(badgeSrc, 'primary')).toContain('bg-primary text-primary-foreground')
+    expect(varyantSinifi(badgeSrc, 'secondary')).toContain('bg-secondary text-secondary-foreground')
+    expect(varyantSinifi(badgeSrc, 'outline')).toContain('bg-transparent text-foreground')
+    expect(varyantSinifi(badgeSrc, 'success')).toContain('bg-success text-success-foreground')
+    expect(varyantSinifi(badgeSrc, 'warning')).toContain('bg-warning text-warning-foreground')
+  })
+
+  it('Button: destructive DIŞINDAKİ varyant dizgeleri değişmedi', () => {
+    expect(varyantSinifi(buttonSrc, 'ghost')).toContain('text-gray-700')
+    expect(varyantSinifi(buttonSrc, 'success')).toContain('bg-success text-success-foreground')
+    expect(varyantSinifi(buttonSrc, 'outline')).toContain('border border-input')
+  })
+
+  it('KAPSAM KİLİDİ: `--error`/`--destructive` DEFAULT token’ının diğer tüketicileri etkilenmedi', () => {
+    // Token değişmediği için `bg-error` yazan 35 başka yüzey ve `text-destructive`
+    // yazan 94 yüzey bit-bit aynı kalır. Switch bunun canlı kanıtı.
+    const switchSrc = fs.readFileSync(path.join(PAKET, 'components/ui/switch.tsx'), 'utf8')
+    expect(switchSrc).toContain('data-[state=checked]:bg-error')
+    expect(switchSrc).not.toContain('bg-error-600')
+  })
+})
+
+describe('#544 — render sözleşmesi (<Badge /> / <Button />)', () => {
+  const sinif = (jsx: React.ReactElement, sec: string) => {
+    const { container } = render(jsx)
+    return (container.querySelector(sec) as HTMLElement).className
+  }
+
+  it('Badge destructive ARTIK yarı saydam `dark:bg-error/90` taşımıyor', () => {
+    // Yarı saydam dolgu, kontrastı ZEMİNE bağımlı kılıyordu (gerçek kartta 4.43).
+    const c = sinif(<Badge variant="destructive">x</Badge>, 'div')
+    expect(c).not.toContain('dark:bg-error/90')
+    expect(c).toContain('text-white')
+  })
+
+  it('Button destructive dark dolgusu opak bir skala kademesi', () => {
+    const c = sinif(<Button variant="destructive">x</Button>, 'button')
+    expect(c).not.toContain('dark:bg-destructive ')
+    expect(c).toContain('text-destructive-foreground')
+  })
+
+  it('TEK dolgu utility’si per durum — Tailwind sıra belirsizliği YOK', () => {
+    // `dark:bg-destructive dark:bg-error-600` ikisi birden yazılırsa hangisinin
+    // kazanacağı Tailwind'in İÇ sıralamasına kalır (sınıf dizgesi sırasına DEĞİL).
+    for (const [kaynak, ad] of [[badgeSrc, 'badge'], [buttonSrc, 'button']] as const) {
+      const siniflar = varyantSinifi(kaynak, 'destructive').split(/\s+/)
+      for (const onek of ['', 'dark:', 'hover:', 'dark:hover:', 'active:', 'dark:active:']) {
+        const n = siniflar.filter((s) => new RegExp(`^${onek}bg-(?!.*shadow)`).test(s)).length
+        expect(`${ad} "${onek}bg-*" adedi: ${n}`).toBe(`${ad} "${onek}bg-*" adedi: ${n > 1 ? 1 : n}`)
+      }
+    }
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// #545 — docs canlı demo kodundaki ham renk literalleri
+// ════════════════════════════════════════════════════════════════════════════════
+
+const twColors = require('tailwindcss/colors')
+const hx = (s: string): RGB => [
+  parseInt(s.slice(1, 3), 16),
+  parseInt(s.slice(3, 5), 16),
+  parseInt(s.slice(5, 7), 16),
+]
+
+const CONFIGLER = {
+  'click-animations': 'src/docs-config/click-animations.config.tsx',
+  'error-boundary': 'src/docs-config/error-boundary.config.tsx',
+  'pinch-zoom': 'src/docs-config/pinch-zoom.config.tsx',
+} as const
+const oku = (rel: string) => fs.readFileSync(path.join(DEPO, rel), 'utf8')
+
+/** Bir sınıfın kaç kez geçtiği — "kaç düğüm" iddiasını SAYIYLA kilitler */
+const sayac = (src: string, sinif: string) =>
+  (src.match(new RegExp(`(?<![\\w-])${sinif.replace(/[/]/g, '\\/')}(?![\\w-])`, 'g')) ?? []).length
+
+describe('#545 — hesaplayıcı çapası: issue’nun tarayıcı ölçümleri birebir üretiliyor', () => {
+  it('Tailwind paleti beklenen sürümden ve beklenen hex’lerde', () => {
+    // Palet sürümü kayarsa aşağıdaki tüm oranlar kayar; sessiz-yeşil koruması.
+    expect(twColors.yellow[500]).toBe('#eab308')
+    expect(twColors.green[600]).toBe('#16a34a')
+    expect(twColors.red[600]).toBe('#dc2626')
+    expect(twColors.red[50]).toBe('#fef2f2')
+  })
+
+  it('altı ripple butonu: issue’daki 1.91-3.95 aralığı yeniden üretiliyor (zemin: opak dolgu ↔ #ffffff metin)', () => {
+    const beklenen: Record<string, number> = {
+      yellow: 1.92, green: 2.28, cyan: 2.43, blue: 3.68, red: 3.76, purple: 3.96,
+    }
+    for (const [aile, oran] of Object.entries(beklenen)) {
+      expect(kontrast(hx(twColors[aile][500]), BEYAZ)).toBeCloseTo(oran, 1)
+    }
+  })
+
+  it('ZEMİN DERSİ: `text-red-600` BEYAZA karşı geçer, GERÇEK zemininde (bg-red-50) KALIR', () => {
+    // Issue'nun kaydettiği ölçüm hatası tam buydu; burası onu kalıcı kılar.
+    expect(kontrast(hx(twColors.red[600]), BEYAZ)).toBeCloseTo(4.83, 2)
+    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeCloseTo(4.41, 2)
+    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeLessThan(AA_METIN)
+  })
+
+  it('`text-green-600` beyaz zeminde 3.29 (issue’nun hiç ölçmediği kalem)', () => {
+    expect(kontrast(hx(twColors.green[600]), BEYAZ)).toBeCloseTo(3.30, 1)
+  })
+
+  it('semantik skala sınıfları ÖLÜ DEĞİL — preset onları açıyor ve hex’ler ham palete eşit', () => {
+    // #307/#529 ölü-sınıf tuzağı: `text-success-700` CSS üretmiyorsa düzeltme
+    // sessizce hiçbir şey yapmaz. Token tanımı + ham palet eşitliği ikisi de kanıt.
+    const preset = fs.readFileSync(path.resolve(PAKET, '../tailwind-preset.js'), 'utf8')
+    for (const [aile, ham] of [['error', 'red'], ['success', 'green'], ['warning', 'yellow']] as const) {
+      for (const k of [400, 700]) {
+        expect(preset).toMatch(new RegExp(`\\b${aile}:\\s*\\{[^}]*\\b${k}:\\s*"rgb\\(var\\(--${aile}-${k}\\)`, 's'))
+        expect(hex(skalaRgb(`${aile}-${k}`))).toBe(twColors[ham][k])
+      }
+    }
+  })
+})
+
+describe('#545 — KABUL KRİTERİ: kalan ham literal SAYISI sıfır', () => {
+  it('click-animations: altı `bg-{aile}-500` ripple butonu KALMADI (bugün 6)', () => {
+    const src = oku(CONFIGLER['click-animations'])
+    const kalan = ['blue', 'purple', 'green', 'red', 'yellow', 'cyan']
+      .map((a) => [a, sayac(src, `bg-${a}-500`)] as const)
+      .filter(([, n]) => n > 0)
+    expect(kalan).toEqual([])
+  })
+
+  it('error-boundary: METİN rolündeki `-600` tonları KALMADI (ikonlar bilerek DURUYOR)', () => {
+    /**
+     * ⚠️ ÖLÇÜME DAYALI KAPSAM — "hepsini dönüştür" YANLIŞ olurdu.
+     * `text-red-600`/`text-green-600`ün ikon rolündeki örnekleri 3.0 (WCAG 1.4.11,
+     * metin-dışı) eşiğini İKİ TEMADA da geçiyor ve dark ikizleri YOK:
+     *   AlertTriangle text-red-600  → light[bg-red-50] 4.41 ✓ · dark[red-950/20] 3.70 ✓
+     *   CheckCircle   text-green-600 → light[beyaz]    3.30 ✓ · dark[kart]        5.38 ✓
+     * Bunları -700'e çekmek dark'ı 2.76'ya düşürüp EŞİĞİN ALTINA indirirdi — yani
+     * bir ihlali başkasıyla takas ederdi. Metin rolündekiler (4.5 eşiği) dönüştü.
+     */
+    const src = oku(CONFIGLER['error-boundary'])
+    expect(sayac(src, 'text-yellow-600')).toBe(0) // hem ikon hem metin ihlaldi (2.84)
+    // Kalan `-600`lar YALNIZ ikon üzerinde olmalı
+    const kalanKirmizi = [...src.matchAll(/text-red-600/g)].map((m) =>
+      src.slice(Math.max(0, m.index! - 90), m.index!)
+    )
+    expect(kalanKirmizi).toHaveLength(2) // :109 canlı + :475 code ikizi
+    for (const once of kalanKirmizi) expect(once).toContain('<AlertTriangle')
+    const kalanYesil = [...src.matchAll(/text-green-600/g)].map((m) =>
+      src.slice(Math.max(0, m.index! - 90), m.index!)
+    )
+    expect(kalanYesil).toHaveLength(1) // :158 ikon
+    expect(kalanYesil[0]).toContain('<CheckCircle')
+  })
+
+  it('pinch-zoom: `text-green-600` KALMADI (bugün 2 — biri canlı JSX, biri code bloğu)', () => {
+    expect(sayac(oku(CONFIGLER['pinch-zoom']), 'text-green-600')).toBe(0)
+  })
+
+  it('moonui-pro error-boundary: dark ikizi OLMAYAN `text-red-600` KALMADI (latent kalem)', () => {
+    const src = fs.readFileSync(
+      path.join(DEPO, 'packages/moonui-pro/src/components/error-boundary/index.tsx'),
+      'utf8'
+    )
+    expect(src).not.toMatch(/className="p-4 text-center text-red-600"/)
+  })
+})
+
+describe('#545 — KABUL KRİTERİ: yeni tonlar İKİ TEMADA da eşiği geçiyor', () => {
+  it('altı ripple butonu ≥4.5 (zemin: opak dolgu ↔ #ffffff metin, tema-bağımsız)', () => {
+    const src = oku(CONFIGLER['click-animations'])
+    for (const aile of ['blue', 'purple', 'green', 'red', 'yellow', 'cyan']) {
+      const m = src.match(new RegExp(`bg-${aile}-(\\d{3})`))
+      expect(`${aile}: sınıf var`).toBe(m ? `${aile}: sınıf var` : `${aile}: sınıf YOK`)
+      const oran = kontrast(hx(twColors[aile][Number(m![1])]), BEYAZ)
+      expect(`${aile}-${m![1]}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `${aile}-${m![1]}: geçer`
+      )
+    }
+  })
+
+  it('DARK TUZAĞI: ton yükseltilen her metin sınıfının `dark:` ikizi VAR', () => {
+    // Ölçüldü: success-700 koyu kartta 3.54, warning-700 3.60 → ikiz olmadan
+    // LIGHT düzelirken DARK kırılır. Bu test o takası imkânsız kılar.
+    const hedefler: Array<[string, string]> = [
+      [CONFIGLER['error-boundary'], 'text-success-700'],
+      [CONFIGLER['error-boundary'], 'text-warning-700'],
+      [CONFIGLER['pinch-zoom'], 'text-success-700'],
+    ]
+    for (const [rel, sinif] of hedefler) {
+      const src = oku(rel)
+      const n = sayac(src, sinif)
+      expect(`${rel} ${sinif} adedi > 0`).toBe(`${rel} ${sinif} adedi > ${n > 0 ? 0 : 'YOK'}`)
+      // her geçtiği yerde hemen ardından dark ikizi gelmeli
+      const ikizsiz = [...src.matchAll(new RegExp(`${sinif}(?![\\w-])(\\s+dark:text-\\S+)?`, 'g'))]
+        .filter((m) => !m[1])
+      expect(`${rel} ${sinif} ikizsiz: ${ikizsiz.length}`).toBe(`${rel} ${sinif} ikizsiz: 0`)
+    }
+  })
+
+  it('yeni tonların ölçülen oranları — zemin ADIYLA', () => {
+    const olcumler: Array<[string, RGB, RGB, number]> = [
+      ['error-700 · zemin bg-red-50 #fef2f2', hx(twColors.red[700]), hx(twColors.red[50]), AA_METIN],
+      ['success-700 · zemin kart #ffffff', hx(twColors.green[700]), BEYAZ, AA_METIN],
+      ['success-400 · zemin koyu kart #111827', hx(twColors.green[400]), KART_GERCEK_DARK, AA_METIN],
+      ['warning-700 · zemin bg-yellow-50 #fefce8', hx(twColors.yellow[700]), hx(twColors.yellow[50]), AA_METIN],
+      ['warning-400 · zemin koyu kart #111827', hx(twColors.yellow[400]), KART_GERCEK_DARK, AA_METIN],
+      ['error-400 · zemin koyu kart #111827', hx(twColors.red[400]), KART_GERCEK_DARK, AA_METIN],
+    ]
+    for (const [ad, renk, zemin, esik] of olcumler) {
+      const o = kontrast(renk, zemin)
+      expect(`${ad}: ${o >= esik ? 'geçer' : o.toFixed(2)}`).toBe(`${ad}: geçer`)
+    }
+  })
+})
+
+describe('#545 — `code:` ↔ canlı `component:` TUTARLILIĞI', () => {
+  /** Satırın code: şablon-literali içinde mi olduğunu backtick tekliğinden çöz */
+  const codeBlogundaMi = (src: string, idx: number) =>
+    ((src.slice(0, idx).match(/`/g) ?? []).length) % 2 === 1
+
+  it('error-boundary: düzeltilen sınıf HEM canlı JSX’te HEM code bloğunda var', () => {
+    const src = oku(CONFIGLER['error-boundary'])
+    for (const sinif of ['text-error-700', 'text-warning-700']) {
+      const yerler = [...src.matchAll(new RegExp(`${sinif}(?![\\w-])`, 'g'))].map((m) => m.index!)
+      const canli = yerler.filter((i) => !codeBlogundaMi(src, i)).length
+      const kod = yerler.filter((i) => codeBlogundaMi(src, i)).length
+      expect(`${sinif} canlı:${canli > 0} kod:${kod > 0}`).toBe(`${sinif} canlı:true kod:true`)
+    }
+  })
+
+  it('pinch-zoom: iki `In Stock` (canlı + code) AYNI sınıfı taşıyor', () => {
+    const src = oku(CONFIGLER['pinch-zoom'])
+    const yerler = [...src.matchAll(/<span className="([^"]*)">In Stock<\/span>/g)].map((m) => m[1])
+    expect(yerler).toHaveLength(2)
+    expect(new Set(yerler).size).toBe(1)
+    expect(yerler[0]).toContain('text-success-700')
+  })
+})
+
+describe('#545 — REGRESYON BEKÇİSİ: kapsam dışına taşma yok', () => {
+  it('geçen tonlara DOKUNULMADI (ölçülen: eşiğin üstündeler)', () => {
+    const src = oku(CONFIGLER['error-boundary'])
+    // -800 başlıklar (#991b1b, bg-red-50 üstünde 7.6) korunur
+    expect(sayac(src, 'text-red-800')).toBeGreaterThan(0)
+    // ikon rolündeki `text-red-600` (bg-red-50 üstünde 4.41 ≥ 3.0) metin eşiğine
+    // tabi DEĞİL; dönüştürmemek bilinçli bir karardır
+    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeGreaterThanOrEqual(AA_METIN_DISI)
+  })
+
+  it('vokabüler dönüşümü PİKSEL-BEDAVA: `error-300` = ham `red-300`', () => {
+    // `dark:text-red-300` → `dark:text-error-300` görünümü DEĞİŞTİRMEZ; yalnız
+    // ham paletten semantik skalaya geçer. Eşit olmasalardı sessiz bir renk
+    // kayması olurdu — bu yüzden ölçülür, varsayılmaz.
+    expect(hex(skalaRgb('error-300'))).toBe(twColors.red[300])
+    expect(sayac(oku(CONFIGLER['error-boundary']), 'dark:text-error-300')).toBeGreaterThan(0)
+  })
+
+  it('moonui-pro: dark ikizi OLAN ikon (`:256`) bilerek DOKUNULMADI', () => {
+    // light[bg-red-100] 3.95 ✓ · dark[red-900/20] 6.06 ✓ — ikon eşiği 3.0.
+    const src = fs.readFileSync(
+      path.join(DEPO, 'packages/moonui-pro/src/components/error-boundary/index.tsx'),
+      'utf8'
+    )
+    expect(src).toContain('text-red-600 dark:text-red-400')
+  })
+
+  it('RATCHET: kalan docs sayfalarında ham `bg-{aile}-500 text-white` deseni ARTMADI', () => {
+    /**
+     * ⚠️ ÖLÇÜLEN GERÇEK (2026-08-21) — issue #545'in kapsamından GENİŞ:
+     * bu desen 8 dosyada 37 kez geçiyor, yalnız click-animations'ta 6.
+     * #545 üç sayfayla sınırlı olduğu için diğer 7 dosya BİLEREK dokunulmadan
+     * bırakıldı; burası onları DONDURUR (yeni ihlal eklenirse kırmızı olur)
+     * ve click-animations'ın sıfırlandığını ayrıca kilitler.
+     */
+    const TABAN: Record<string, number> = {
+      'bounce-effect.config.tsx': 16,
+      'button.config.tsx': 1,
+      'confetti.config.tsx': 1,
+      'focus-transitions.config.tsx': 6,
+      'glow-card.config.tsx': 1,
+      'slider.config.tsx': 4,
+      'sparkles.config.tsx': 2,
+      // click-animations.config.tsx: 6 → 0 (bu issue'nun kapsamı)
+    }
+    const dizin = path.join(DEPO, 'src/docs-config')
+    const bugun: Record<string, number> = {}
+    for (const f of fs.readdirSync(dizin).filter((x) => x.endsWith('.config.tsx'))) {
+      const src = fs.readFileSync(path.join(dizin, f), 'utf8')
+      const n = (src.match(/bg-(?:blue|purple|green|red|yellow|cyan|orange|pink|indigo)-500 text-white/g) ?? [])
+        .length
+      if (n > 0) bugun[f] = n
+    }
+    expect(bugun).toEqual(TABAN)
+  })
+})

package/src/components/ui/__tests__/badge.test.tsx

@@ -41,9 +41,13 @@ describe('Badge Component', () => {
     })
 
     it('renders destructive variant correctly', () => {
+      // #544: dolgu `bg-error` (--error = #ef4343, beyaz metinle 3.78 ✗) yerine
+      // `error` skalasının -600 kademesine (#dc2626, 4.83 ✓) bağlandı. Token
+      // DEĞİŞMEDİ; yalnız bu varyantın dolgusu AA'yı geçen en açık kademeye indi.
+      // Kontrast değişmezleri: packages/moonui/src/__tests__/issue-544-kontrast.test.tsx
       render(<Badge variant="destructive">Destructive</Badge>)
       const badge = screen.getByText('Destructive').parentElement!
-      expect(badge).toHaveClass('bg-error')
+      expect(badge).toHaveClass('bg-error-600')
       expect(badge).toHaveClass('text-white')
     })
 

package/src/components/ui/__tests__/switch-variant-contrast.test.tsx

@@ -419,12 +419,36 @@ describe('#454 — kaynak sözleşmesi (switch.tsx)', () => {
     expect(kaynak).toContain('export { Switch, switchVariants }')
   })
 
-  it('`bg-secondary-500` / `bg-warning-700` YAZILMADI — preset o sınıfları üretmiyor (#307 ölü-sınıf tuzağı)', () => {
+  it('`bg-secondary-500` YAZILMADI — preset secondary skalasını hâlâ açmıyor (#307 ölü-sınıf tuzağı)', () => {
     const preset = fs.readFileSync(path.resolve(KOK, '../tailwind-preset.js'), 'utf8')
     expect(preset).not.toMatch(/"?secondary"?:\s*\{[^}]*\b500:/s)
-    expect(preset).not.toMatch(/\bwarning:\s*\{[^}]*\b700:/s)
     expect(TRACK_CVA).not.toContain('bg-secondary-500')
+  })
+
+  /**
+   * #524 GÜNCELLEMESİ — bu iddianın YARISI artık geçerli değil.
+   *
+   * Bu test eskiden `bg-warning-700`ün de "ölü sınıf" olduğunu kilitliyordu:
+   * preset durum ailelerine sayısal skala AÇMIYORDU, o yüzden switch/slider/progress
+   * üçü de bağımsız olarak aynı geçici çözümü (`bg-[rgb(var(--warning-700))]`
+   * arbitrary-value formu) icat etmişti.
+   *
+   * #524'te preset `success`/`warning`/`error` ailelerine 50-950 skalasını bağladı
+   * (dört Pro component'in ham `text-green-500` literaline düşmesinin kök nedeni
+   * buydu). Yani `bg-warning-700` ARTIK GERÇEK bir sınıf — "ölü sınıf" gerekçesi
+   * düştü.
+   *
+   * `switch.tsx` BİLEREK dokunulmadan bırakıldı: arbitrary-value formu birebir aynı
+   * rengi üretir (`rgb(var(--warning-700))`), dolayısıyla render sözleşmesi
+   * değişmez ve #524'ün diff'i ilgisiz component'lere yayılmaz. Sadeleştirme
+   * (switch + slider + progress → `bg-warning-700`) ayrı bir iş olarak raporlandı.
+   */
+  it('#524 sonrası: preset `warning-700`ü AÇIYOR, switch.tsx arbitrary-value formunu KORUYOR', () => {
+    const preset = fs.readFileSync(path.resolve(KOK, '../tailwind-preset.js'), 'utf8')
+    expect(preset).toMatch(/\bwarning:\s*\{[^}]*\b700:\s*"rgb\(var\(--warning-700\)/s)
+    // Kaynak sözleşmesi DEĞİŞMEDİ — geçici çözüm yerinde, render aynı rengi basıyor
     expect(TRACK_CVA).not.toContain('bg-warning-700')
+    expect(TRACK_CVA).toContain('bg-[rgb(var(--warning-700))]')
   })
 })