@moontra/moonui 6.28.0 → 6.29.0

package/src/__tests__/issue-715-button-override-hover.test.tsx

@@ -0,0 +1,631 @@
+/**
+ * #715 — button: gereksiz `dark:` tekrarı tüketici override'ını eziyordu (1.28:1)
+ *                + `destructive`/`primary`/`success` hover/active alfa kompoziti
+ *                AA altındaydı.
+ *
+ * ══ Dal 1 — `dark:` tekrarı × twMerge × özgüllük ═══════════════════════════════
+ * `cn()` = `twMerge(clsx(...))`. Tüketici `className="text-white"` yazdığında
+ * twMerge ÖNEKSİZ `text-primary-foreground`u eler — ama `dark:text-primary-foreground`
+ * AYRI bir modifier grubu olduğu için ELENMEZ ve koyu temada özgüllükle kazanır:
+ *   .dark\:text-primary-foreground:is(.dark *)  → (0,2,0)
+ *   text-white                                   → (0,1,0)
+ * Dark `--primary-foreground` = `222.2 47.4% 1.2%` = rgb(2,2,5) → ölçülen 1.28:1.
+ *
+ * ⚠️ AYRIM (bu testin ASIL işi): "tüm `dark:` satırlarını sil" YANLIŞ olurdu.
+ *   · `dark:text-primary-foreground` → AYNI token'ın tekrarı, token `.dark` bloğunda
+ *     zaten farklı değer alıyor (tokens.css:137 ↔ :546) → KALDIRILDI.
+ *   · `dark:bg-error-600` → FARKLI bir token'a geçiyor (#544) → KORUNDU.
+ *   · `dark:hover:bg-error-700` → öneksiziyle AYNI değeri taşır ama SIRALAMA
+ *     GUARD'ıdır (aşağıdaki "ordering" testi bunu kanıtla kilitler) → KORUNDU.
+ *
+ * ══ Dal 2 — durum-bağımlı dallar ═══════════════════════════════════════════════
+ * #544 yalnız RESTING ölçmüştü. Açık temada `/90` ve `/80` zemini BEYAZLA
+ * karıştırıp rengi AÇIYOR (metin sabit `--destructive-foreground` #f8fafc):
+ *   resting  bg-destructive       #e11313 → 4.66 ✓
+ *   hover    bg-destructive/90    #e42b2b → 4.29 ✗   (A11-V axe: 4.28 serious)
+ *   active   bg-destructive/80    #e74242 → 3.82 ✗   (hiç kimse ölçmemişti)
+ * Koyu dalın ZATEN kullandığı çözüm açık dala da uygulandı: alfa yerine opak
+ * `error` kademesi → hover -700 (6.18), active -800 (7.94).
+ *
+ * ══ Dal 3 — aynı kusur `primary` ve `success`te ═════════════════════════════════
+ * Dal 2 yalnız `destructive`i onardı; ölçüm genişletilince ikisi daha çıktı:
+ *   primary  hover /90 #2876f5 → 4.01 ✗ | active /80 #4085f6 → 3.40 ✗
+ *   success  hover /90 #2a8f4f → 3.90 ✗ | active /80 #419b62 → 3.30 ✗
+ * AYNI kusur, FARKLI çözüm — çünkü skala aileleri farklı:
+ *   · `--success-NNN` `--success` ile aynı hue → Dal 2'nin reçetesi aynen geçerli:
+ *     hover `bg-success-800` (6.81), active `bg-success-900` (8.71).
+ *   · `--primary-NNN` ise SKY paleti (`--primary` BLUE) VE preset onları hiçbir
+ *     utility'ye bağlamıyor → `bg-primary-700` hiç CSS üretmeyen ölü sınıf (#713).
+ *     Bu yüzden `primary` koyu tonu `color-mix` ile TOKEN'IN KENDİSİNDEN türetir;
+ *     tüketici `--primary`yi override edince hover/active kendiliğinden uyar.
+ * Koyu tema İKİSİNDE DE zaten geçiyordu → ayrıca ölçülüp regresyon kilidi kondu.
+ *
+ * ⚠️ RENKLER VARSAYILMAZ: tüm değerler `tokens.css`ten, tüm sınıflar `button.tsx`
+ * kaynağından okunur. Test, koda değil ÖLÇÜME dayanır (#544 ile aynı yöntem).
+ *
+ * ⚠️ jsdom Tailwind kaskadını çözmez → burada `getComputedStyle` ile RENK ölçülmez.
+ * Ölçülen şey MEKANİZMA: (a) hangi sınıflar sağ kalıyor (gerçek `cn()`/twMerge ile),
+ * (b) sağ kalan sınıfların token değerleriyle WCAG oranı. Gerçek tarayıcı doğrulaması
+ * bu dosyanın kapsamı DIŞINDADIR ve raporda ayrıca belirtilir.
+ */
+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 { Button } from '../components/ui/button'
+
+const PKG = path.resolve(__dirname, '..')
+const DEPO = path.resolve(__dirname, '../../../..')
+const tokens = fs.readFileSync(path.join(PKG, 'styles/tokens.css'), 'utf8')
+const freeSrc = fs.readFileSync(path.join(PKG, 'components/ui/button.tsx'), 'utf8')
+const proSrc = fs.readFileSync(
+  path.join(DEPO, 'packages/moonui-pro/src/components/ui/button.tsx'),
+  'utf8'
+)
+
+type RGB = [number, number, number]
+type Blok = 'light' | 'dark'
+
+// ─── Renk aritmetiği (#544 testiyle birebir aynı yöntem) ────────────────────────
+
+function tokenOku(name: string, blok: Blok): string | null {
+  const source =
+    blok === 'dark' ? tokens.slice(tokens.indexOf('.dark')) : tokens.slice(0, tokens.indexOf('.dark'))
+  return source.match(new RegExp(`--${name}:\\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]]
+}
+const semanticRgb = (name: string, blok: Blok): RGB =>
+  hslTokenRgb(tokenOku(name, blok) ?? tokenOku(name, 'light')!)
+/** Skala kademeleri tema-BAĞIMSIZ: `.dark` bloğu onları ezmiyor */
+const scaleRgb = (name: string): RGB => rgbTokenRgb(tokenOku(name, 'light')!)
+
+function relativeLuminance([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 = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+/** Yarı saydam rengi opak zemine bindir — `bg-destructive/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 ───────────────────────────────────────
+/** Açık temada butonun ALTINDAKİ yüzey. A11-V'nin axe ölçümünü aldığı zemin. */
+const WHITE: RGB = [255, 255, 255]
+/** Docs kabuğunda ölçülen GERÇEK koyu kart (#284/#368/#448/#454 konvansiyonu) */
+const CARD_ACTUAL_DARK: RGB = [17, 24, 39]
+
+const AA_TEXT = 4.5
+
+// ─── Varyant sınıflarını KAYNAKTAN çöz ─────────────────────────────────────────
+
+/** cva `variant` bloğundaki dizi biçimli girdiyi birleşik sınıf dizgesi olarak ver */
+function variantClass(source: string, variantVal: string): string {
+  const m = source.match(new RegExp(`\\n\\s*${variantVal}:\\s*\\[([\\s\\S]*?)\\n\\s*\\]`))
+  if (!m) throw new Error(`${variantVal} varyantı bulunamadı`)
+  return (m[1].match(/"([^"]*)"/g) ?? []).map((s) => s.slice(1, -1)).join(' ')
+}
+const variantClasses = (source: string, v: string): string[] =>
+  variantClass(source, v).split(/\s+/).filter(Boolean)
+
+const VARYANTLAR = [
+  'primary', 'secondary', 'outline', 'ghost', 'destructive',
+  'success', 'link', 'gradient', 'glow', 'soft', 'glass', 'neon',
+] as const
+
+const BLACK: RGB = [0, 0, 0]
+
+/**
+ * Dal 3 — `bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]`.
+ *
+ * `color-mix(in srgb, …)` gama-KODLU sRGB koordinatlarında interpolasyon yapar
+ * (CSS Color 4) → `komposit()`in kanal-bazlı lerp'i ile BİREBİR aynı aritmetik.
+ * Alfadan farkı: ikinci renk SAYFA ZEMİNİ değil siyah, yani sonuç opak ve
+ * kontrast artık altındaki yüzeye BAĞIMLI DEĞİL. Kusurun kökü buydu.
+ */
+const COLOR_MIX_RE =
+  /^bg-\[color:color-mix\(in_srgb,hsl\(var\(--([a-z-]+)\)\)_(\d{1,3})%,black\)\]$/
+
+/** `bg-error-700` / `bg-destructive` / `bg-destructive/90` / `bg-[color:color-mix(…)]` → RGB */
+function classColor(cls: string, blok: Blok, background: RGB): RGB {
+  const g = cls.replace(/^(?:(?:dark|hover|active|focus-visible|group-hover):)+/, '')
+  const mix = g.match(COLOR_MIX_RE)
+  if (mix) return komposit(semanticRgb(mix[1], blok), BLACK, Number(mix[2]) / 100)
+  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: ${cls}`)
+  const [, name, kademe, alfa] = m
+  if (name === 'white') return alfa ? komposit(WHITE, background, Number(alfa) / 100) : WHITE
+  const base = kademe ? scaleRgb(`${name}-${kademe}`) : semanticRgb(name, blok)
+  return alfa ? komposit(base, background, Number(alfa) / 100) : base
+}
+
+/**
+ * Bir varyantın ilgili tema+durumdaki ETKİN dolgusu.
+ * `dark:` önekli sınıf koyu temada kazanır (Tailwind `dark:`i `hover:`ten SONRA
+ * yazar; ayrıca `dark:hover:` (0,3,0) `dark:` (0,2,0)'ı yener).
+ */
+function fill(source: string, variantVal: string, blok: Blok, background: RGB, onek = ''): RGB {
+  const adaylar = variantClasses(source, variantVal).filter((c) =>
+    new RegExp(`^${blok === 'dark' ? '(?:dark:)?' : '(?!dark:)'}${onek}bg-`).test(c)
+  )
+  const secili =
+    blok === 'dark'
+      ? adaylar.find((c) => c.startsWith(`dark:${onek}bg-`)) ?? adaylar[0]
+      : adaylar[0]
+  if (!secili) throw new Error(`${variantVal}/${blok}/"${onek}" için dolgu sınıfı yok`)
+  return classColor(secili, blok, background)
+}
+
+/** Varyantın ilgili temadaki ETKİN metin rengi */
+function textColor(source: string, variantVal: string, blok: Blok, background: RGB): RGB {
+  const adaylar = variantClasses(source, variantVal).filter((c) =>
+    /^(?:dark:)?text-/.test(c) && !/^(?:dark:)?(?:hover|active|focus-visible):/.test(c)
+  )
+  const secili =
+    blok === 'dark' ? adaylar.find((c) => c.startsWith('dark:')) ?? adaylar[0] : adaylar.find((c) => !c.startsWith('dark:'))
+  if (!secili) throw new Error(`${variantVal}/${blok} için metin sınıfı yok`)
+  return classColor(secili, blok, background)
+}
+
+const cls = (jsx: React.ReactElement) => {
+  const { container } = render(jsx)
+  return (container.querySelector('button') as HTMLElement).className
+}
+
+const PAKETLER = [
+  ['free', freeSrc],
+  ['pro', proSrc],
+] as const
+
+// ════════════════════════════════════════════════════════════════════════════════
+// Dal 1 — gereksiz `dark:` tekrarı tüketici override'ını eziyordu
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#715 Dal 1 — `primary` artık hiçbir `dark:` sınıfı taşımıyor', () => {
+  it.each(PAKETLER)('%s: `primary` dizisinde `dark:` YOK (token zaten tema-duyarlı)', (_ad, src) => {
+    const dark = variantClasses(src, 'primary').filter((c) => c.startsWith('dark:'))
+    expect(dark).toEqual([])
+  })
+
+  it.each(PAKETLER)('%s: öneksiz çift KORUNDU — tema davranışı değişmedi', (_ad, src) => {
+    expect(variantClass(src, 'primary')).toContain('bg-primary text-primary-foreground')
+    // Dal 3 hover/active dallarını `/90`-`/80` alfasından `color-mix`e çevirdi;
+    // ikisi de HÂLÂ öneksiz (tek sınıf, iki tema) — Dal 1'in kazanımı bozulmadı.
+    expect(variantClasses(src, 'primary')).toEqual(
+      expect.arrayContaining([
+        'hover:bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]',
+        'active:bg-[color:color-mix(in_srgb,hsl(var(--primary))_75%,black)]',
+      ])
+    )
+  })
+
+  it.each(PAKETLER)('%s: kaynakta `dark:text-primary-foreground` hiç kalmadı', (_ad, src) => {
+    // Yorum satırları issue'yu anlatmak için sınıf adını LİTERAL içeriyor →
+    // yorumsuz gövde üzerinden bak (yoksa test kendi belgesine takılır).
+    const yorumsuz = src.replace(/\/\*[\s\S]*?\*\//g, '').replace(/^\s*\/\/.*$/gm, '')
+    expect(yorumsuz).not.toContain('dark:text-primary-foreground')
+    expect(yorumsuz).not.toContain('dark:bg-primary ')
+  })
+
+  it('render: `primary` çıktısı `dark:text-primary-foreground` İÇERMEZ', () => {
+    const c = cls(<Button variant="primary">x</Button>)
+    expect(c).toContain('text-primary-foreground')
+    expect(c).not.toContain('dark:text-primary-foreground')
+  })
+})
+
+describe('#715 Dal 1 — tüketici override\'ı artık EZİLMİYOR', () => {
+  it('`className="text-white"` sağ kalıyor ve onu yenecek `dark:text-*` yok', () => {
+    const c = cls(<Button className="text-white">x</Button>)
+    expect(c.split(/\s+/)).toContain('text-white')
+    // Kusurun imzası: twMerge öneksizi eler, `dark:` ikizi kalır ve (0,2,0) ile
+    // tüketicinin (0,1,0) sınıfını yener. Hiç `dark:text-*` kalmadıysa mümkün değil.
+    expect(c.split(/\s+/).filter((x) => x.startsWith('dark:text-'))).toEqual([])
+  })
+
+  it('A13-V\'nin ölçtüğü GERÇEK docs vakası (click-animations gradyan butonu)', () => {
+    // src/docs-config/click-animations.config.tsx:363 — birebir aynı className
+    const c = cls(
+      <Button
+        size="lg"
+        className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700"
+      >
+        Ripple Effect
+      </Button>
+    )
+    const parcalar = c.split(/\s+/)
+    expect(parcalar).toContain('text-white')
+    expect(parcalar).toContain('bg-gradient-to-r')
+    expect(parcalar.filter((x) => x.startsWith('dark:text-'))).toEqual([])
+    // ⚠️ MEKANİZMANIN TAMAMI: twMerge `bg-gradient-to-r` ile `bg-primary`yi AYNI
+    // grupta saymaz → `bg-primary` sağ kalır (gradyan onu boyar, sorun değil).
+    // `text-white` ise `text-primary-foreground`u ELER. Geriye yalnız `dark:` ikizi
+    // kalıyordu ve koyu temada (0,2,0) > (0,1,0) ile kazanıyordu.
+    expect(parcalar).toContain('bg-primary')
+    expect(parcalar).not.toContain('text-primary-foreground')
+
+    // Kusurlu metin rengi = dark `--primary-foreground` (kaynaktan okundu).
+    const kusurluMetin = semanticRgb('primary-foreground', 'dark')
+    expect(hex(kusurluMetin)).toBe('#020205') // "neredeyse siyah" iddiasının kilidi
+    // Gradyanın İKİ ucunda da ölçüldü — tüketicinin istediği beyaz geçiyor,
+    // component'in dayattığı near-black KALIYOR:
+    const INDIGO_600: RGB = [79, 70, 229]
+    const PURPLE_600: RGB = [147, 51, 234]
+    for (const zemin of [INDIGO_600, PURPLE_600]) {
+      const beyaz = kontrast([255, 255, 255], zemin)
+      const kusurlu = kontrast(kusurluMetin, zemin)
+      expect(`${hex(zemin)} beyaz:${beyaz >= AA_TEXT ? 'geçer' : beyaz.toFixed(2)}`).toBe(
+        `${hex(zemin)} beyaz:geçer`
+      )
+      expect(kusurlu).toBeLessThan(AA_TEXT)
+    }
+  })
+})
+
+describe('#715 Dal 1 — GENEL dedektör: aynı değerin `dark:` tekrarı kalmadı', () => {
+  /**
+   * Kural: `dark:X` yalnızca (a) öneksiz ikizinden FARKLI bir değere işaret ediyorsa,
+   * ya da (b) SIRALAMA GUARD'ı ise meşrudur.
+   *
+   * (b) şu durumda doğar: varyant, aynı CSS özelliği için FARKLI değerli bir
+   * `dark:` kuralı da bildiriyorsa (ör. `dark:bg-error-600`). Tailwind `dark:`i
+   * `hover:`ten SONRA yazdığı ve ikisi de (0,2,0) olduğu için, öneksiz
+   * `hover:bg-error-700` koyu temada `dark:bg-error-600`a KAYBEDER; onu yenmek
+   * (0,3,0) özgüllüğündeki `dark:hover:` ikizini ZORUNLU kılar.
+   */
+  const ozellik = (c: string) => c.replace(/^(?:[a-z-]+:)+/, '').match(/^(bg|text|border|ring)-/)?.[1]
+
+  it.each(PAKETLER)('%s: her `dark:` sınıfının ya farklı değeri ya guard görevi var', (_ad, src) => {
+    const ihlaller: string[] = []
+    for (const v of VARYANTLAR) {
+      const liste = variantClasses(src, v)
+      // Bu varyant, hangi özellikler için FARKLI değerli bir `dark:` taban kuralı
+      // bildiriyor? (guard gerekçesi yalnız o özellikler için geçerli)
+      const guardOzellikleri = new Set(
+        liste
+          .filter((c) => /^dark:(?!hover:|active:|focus-visible:)/.test(c))
+          .filter((c) => !liste.includes(c.slice('dark:'.length)))
+          .map(ozellik)
+          .filter(Boolean) as string[]
+      )
+      for (const c of liste.filter((x) => x.startsWith('dark:'))) {
+        const oneksiz = c.slice('dark:'.length)
+        if (!liste.includes(oneksiz)) continue // farklı değer → meşru
+        if (guardOzellikleri.has(ozellik(c) as string)) continue // sıralama guard'ı → meşru
+        ihlaller.push(`${v}: ${c}`)
+      }
+    }
+    expect(ihlaller).toEqual([])
+  })
+
+  it.each(PAKETLER)('%s: `destructive`in guard ikizleri KALDI (ters yönlü kilit)', (_ad, src) => {
+    const liste = variantClasses(src, 'destructive')
+    expect(liste).toContain('dark:bg-error-600')
+    // `dark:bg-error-600` durdukça bu ikisi kaldırılamaz — kaldırılırsa koyu temada
+    // hover/active resting rengine geri düşer.
+    expect(liste).toContain('dark:hover:bg-error-700')
+    expect(liste).toContain('dark:active:bg-error-800')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// Dal 2 — `destructive` durum-bağımlı dalları
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#715 Dal 2 — `destructive` hover/active kompoziti AA taşıyor', () => {
+  it.each(PAKETLER)('%s: KONTROL GRUBU — resting DEĞİŞMEDİ (#442)', (_ad, src) => {
+    expect(variantClass(src, 'destructive')).toContain('bg-destructive text-destructive-foreground')
+    const zemin = fill(src, 'destructive', 'light', WHITE)
+    const oran = kontrast(zemin, textColor(src, 'destructive', 'light', zemin))
+    expect(hex(zemin)).toBe('#e11313')
+    expect(oran).toBeCloseTo(4.66, 1)
+  })
+
+  it.each(PAKETLER)('%s: LIGHT hover + active ≥ 4.5 (kusurun kendisi)', (_ad, src) => {
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'destructive', 'light', WHITE, onek)
+      const oran = kontrast(zemin, textColor(src, 'destructive', 'light', zemin))
+      expect(`light ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `light ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: DARK hover + active ≥ 4.5 (regresyon açılmadı)', (_ad, src) => {
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'destructive', 'dark', CARD_ACTUAL_DARK, onek)
+      const oran = kontrast(zemin, textColor(src, 'destructive', 'dark', zemin))
+      expect(`dark ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `dark ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: alfa harmanı KALMADI — kontrast artık zemine bağımlı değil', (_ad, src) => {
+    const alfali = variantClasses(src, 'destructive').filter((c) => /bg-[a-z-]+(?:-\d+)?\/\d+/.test(c))
+    expect(alfali).toEqual([])
+    expect(variantClasses(src, 'destructive')).toEqual(
+      expect.arrayContaining(['hover:bg-error-700', 'active:bg-error-800'])
+    )
+  })
+
+  it.each(PAKETLER)('%s: durum ilerlemesi tutarlı KOYULAŞIYOR', (_ad, src) => {
+    // Alfa sürümünde active (#e74242) hover'dan (#e42b2b) DAHA AÇIKtı — hem a11y
+    // hem etkileşim geri bildirimi bakımından ters.
+    const l = (onek: string) => relativeLuminance(fill(src, 'destructive', 'light', WHITE, onek))
+    expect(l('')).toBeGreaterThan(l('hover:'))
+    expect(l('hover:')).toBeGreaterThan(l('active:'))
+  })
+
+  it('render: `destructive` çıktısı yeni hover sınıfını taşıyor, restingi korumuş', () => {
+    const c = cls(<Button variant="destructive">x</Button>).split(/\s+/)
+    expect(c).toContain('bg-destructive')
+    expect(c).toContain('text-destructive-foreground')
+    expect(c).toContain('hover:bg-error-700')
+    expect(c).not.toContain('hover:bg-destructive/90')
+    expect(c).not.toContain('active:bg-destructive/80')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// Dal 3 — `primary` + `success` durum-bağımlı dalları
+//
+// Dal 2 yalnız `destructive`i onarmıştı; AYNI alfa kusuru iki varyantta daha
+// ölçüldü (metin her ikisinde de sabit `…-foreground` = #f8fafc, zemin beyaz):
+//   primary  hover bg-primary/90 #2876f5 → 4.01 ✗ | active /80 #4085f6 → 3.40 ✗
+//   success  hover bg-success/90 #2a8f4f → 3.90 ✗ | active /80 #419b62 → 3.30 ✗
+// İki varyant AYNI kusuru taşısa da AYNI çözümü ALMADI, çünkü skala aileleri
+// farklı: `--success-NNN` `--success` ile aynı hue'da (opak kademe yeterli),
+// `--primary-NNN` ise SKY paleti (`--primary` BLUE) ve preset onları hiçbir
+// utility'ye bağlamıyor → `bg-primary-700` ölü sınıf olurdu. `primary` bu yüzden
+// koyu tonu `color-mix` ile TOKEN'IN KENDİSİNDEN türetiyor.
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#715 Dal 3 — `primary` hover/active kompoziti AA taşıyor', () => {
+  it.each(PAKETLER)('%s: KONTROL GRUBU — resting DEĞİŞMEDİ (#442)', (_ad, src) => {
+    expect(variantClass(src, 'primary')).toContain('bg-primary text-primary-foreground')
+    const zemin = fill(src, 'primary', 'light', WHITE)
+    expect(hex(zemin)).toBe('#1067f4')
+    expect(kontrast(zemin, textColor(src, 'primary', 'light', zemin))).toBeCloseTo(4.7, 1)
+  })
+
+  it.each(PAKETLER)('%s: LIGHT hover + active ≥ 4.5 (kusurun kendisi)', (_ad, src) => {
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'primary', 'light', WHITE, onek)
+      const oran = kontrast(zemin, textColor(src, 'primary', 'light', zemin))
+      expect(`light ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `light ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: DARK hover + active ≥ 4.5 (regresyon açılmadı)', (_ad, src) => {
+    // Koyu temada `--primary` near-white, `--primary-foreground` near-black —
+    // yani koyulaştırma TERS yönde çalışabilirdi. Reddedilen sky-kademesi adayı
+    // tam burada 3.49'a çöküyordu; `color-mix` türevi çökmüyor.
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'primary', 'dark', CARD_ACTUAL_DARK, onek)
+      const oran = kontrast(zemin, textColor(src, 'primary', 'dark', zemin))
+      expect(`dark ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `dark ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: alfa harmanı KALMADI — kontrast zemine bağımlı değil', (_ad, src) => {
+    expect(variantClasses(src, 'primary').filter((c) => /bg-[a-z-]+(?:-\d+)?\/\d+/.test(c))).toEqual([])
+  })
+
+  it.each(PAKETLER)('%s: koyu ton `--primary`nin KENDİSİNDEN türetiliyor', (_ad, src) => {
+    // Bu testin ASIL işi: sabit bir renge (`bg-blue-700`) kaçışı yasaklamak.
+    // Tüketici `--primary`yi override ettiğinde hover/active KENDİLİĞİNDEN uymalı.
+    for (const onek of ['hover:', 'active:']) {
+      const secili = variantClasses(src, 'primary').find((c) => c.startsWith(`${onek}bg-`))!
+      const m = secili.slice(onek.length).match(COLOR_MIX_RE)
+      expect(`${onek}${m ? m[1] : 'TÜREV DEĞİL: ' + secili}`).toBe(`${onek}primary`)
+      // `[color:…]` etiketi: sınıfın RENK olarak tanınmasını Tailwind'in ve
+      // twMerge'ün tip ÇIKARIMINA bırakmıyoruz (ikisi de bugün doğru çıkarım
+      // yapıyor — kilit, gelecekte sessizce değişmesine karşı).
+      expect(secili).toContain('bg-[color:')
+    }
+  })
+
+  it.each(PAKETLER)('%s: durum ilerlemesi İKİ TEMADA da koyulaşıyor', (_ad, src) => {
+    for (const [blok, zemin] of [['light', WHITE], ['dark', CARD_ACTUAL_DARK]] as const) {
+      const l = (onek: string) => relativeLuminance(fill(src, 'primary', blok, zemin, onek))
+      expect(`${blok} resting>hover: ${l('') > l('hover:')}`).toBe(`${blok} resting>hover: true`)
+      expect(`${blok} hover>active: ${l('hover:') > l('active:')}`).toBe(`${blok} hover>active: true`)
+    }
+  })
+
+  it('render: `primary` çıktısı yeni dalları taşıyor, restingi korumuş', () => {
+    const c = cls(<Button variant="primary">x</Button>).split(/\s+/)
+    expect(c).toContain('bg-primary')
+    expect(c).toContain('text-primary-foreground')
+    expect(c).toContain('hover:bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]')
+    expect(c).not.toContain('hover:bg-primary/90')
+    expect(c).not.toContain('active:bg-primary/80')
+  })
+
+  it('tüketici override\'ı hâlâ KAZANIYOR — arbitrary değer twMerge grubunu bozmadı', () => {
+    // #715'in tamamı "component sınıfı tüketiciyi eziyor" hikâyesi. Arbitrary
+    // değer yanlış GRUBA düşerse (ör. bg-image) twMerge onu elemez ve kusur
+    // yeni bir kılıkta geri gelir.
+    const c = cls(<Button className="hover:bg-red-500 active:bg-red-700">x</Button>).split(/\s+/)
+    expect(c).toContain('hover:bg-red-500')
+    expect(c).toContain('active:bg-red-700')
+    expect(c.filter((x) => x.includes('color-mix'))).toEqual([])
+  })
+})
+
+describe('#715 Dal 3 — `success` hover/active kompoziti AA taşıyor', () => {
+  it.each(PAKETLER)('%s: KONTROL GRUBU — resting DEĞİŞMEDİ (#442)', (_ad, src) => {
+    expect(variantClass(src, 'success')).toContain('bg-success text-success-foreground')
+    const zemin = fill(src, 'success', 'light', WHITE)
+    expect(hex(zemin)).toBe('#12823b')
+    expect(kontrast(zemin, textColor(src, 'success', 'light', zemin))).toBeCloseTo(4.69, 1)
+  })
+
+  it.each(PAKETLER)('%s: LIGHT hover + active ≥ 4.5 (kusurun kendisi)', (_ad, src) => {
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'success', 'light', WHITE, onek)
+      const oran = kontrast(zemin, textColor(src, 'success', 'light', zemin))
+      expect(`light ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `light ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: DARK hover + active ≥ 4.5 (regresyon açılmadı)', (_ad, src) => {
+    for (const onek of ['hover:', 'active:']) {
+      const zemin = fill(src, 'success', 'dark', CARD_ACTUAL_DARK, onek)
+      const oran = kontrast(zemin, textColor(src, 'success', 'dark', zemin))
+      expect(`dark ${onek}${hex(zemin)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+        `dark ${onek}${hex(zemin)}: geçer`
+      )
+    }
+  })
+
+  it.each(PAKETLER)('%s: alfa harmanı KALMADI, opak kademelere bağlandı', (_ad, src) => {
+    expect(variantClasses(src, 'success').filter((c) => /bg-[a-z-]+(?:-\d+)?\/\d+/.test(c))).toEqual([])
+    expect(variantClasses(src, 'success')).toEqual(
+      expect.arrayContaining(['hover:bg-success-800', 'active:bg-success-900'])
+    )
+  })
+
+  it.each(PAKETLER)('%s: -700 SEÇİLMEDİ — restingden ayırt edilemezdi', (_ad, src) => {
+    // `bg-success-700` (#15803d) 4.79 ile eşiği geçiyor AMA `bg-success` (#12823b)
+    // ile arasında pratikte fark yok; hover geri bildirimi görünmez olurdu.
+    // ΔL (bağıl parlaklık) eşiği: gözle seçilebilir bir durum değişimi için
+    // resting'in en az %15'i kadar düşüş istiyoruz.
+    const resting = relativeLuminance(fill(src, 'success', 'light', WHITE))
+    const hover = relativeLuminance(fill(src, 'success', 'light', WHITE, 'hover:'))
+    const yediYuz = relativeLuminance(scaleRgb('success-700'))
+    expect(`-700 farkı yeterli mi: ${(resting - yediYuz) / resting > 0.15}`).toBe(
+      '-700 farkı yeterli mi: false'
+    )
+    expect(`seçilen fark yeterli mi: ${(resting - hover) / resting > 0.15}`).toBe(
+      'seçilen fark yeterli mi: true'
+    )
+  })
+
+  it.each(PAKETLER)('%s: `dark:` guard ikizleri KALDI (ters yönlü kilit)', (_ad, src) => {
+    const liste = variantClasses(src, 'success')
+    // `dark:bg-success-700` FARKLI değerde bir dark taban kuralı; Tailwind onu
+    // `hover:`ten SONRA yazıyor ve ikisi de (0,2,0) → önek atılırsa koyu temada
+    // hover resting rengine geri düşer. Bu iki satır o yüzden guard.
+    expect(liste).toContain('dark:bg-success-700')
+    expect(liste).toContain('dark:hover:bg-success-800')
+    expect(liste).toContain('dark:active:bg-success-900')
+  })
+
+  it.each(PAKETLER)('%s: durum ilerlemesi İKİ TEMADA da koyulaşıyor', (_ad, src) => {
+    for (const [blok, zemin] of [['light', WHITE], ['dark', CARD_ACTUAL_DARK]] as const) {
+      const l = (onek: string) => relativeLuminance(fill(src, 'success', blok, zemin, onek))
+      expect(`${blok} resting>hover: ${l('') > l('hover:')}`).toBe(`${blok} resting>hover: true`)
+      expect(`${blok} hover>active: ${l('hover:') > l('active:')}`).toBe(`${blok} hover>active: true`)
+    }
+  })
+
+  it('render: `success` çıktısı yeni dalları taşıyor, restingi korumuş', () => {
+    const c = cls(<Button variant="success">x</Button>).split(/\s+/)
+    expect(c).toContain('bg-success')
+    expect(c).toContain('hover:bg-success-800')
+    expect(c).not.toContain('hover:bg-success/90')
+    expect(c).not.toContain('active:bg-success/80')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// ÖLÜ SINIF DEDEKTÖRÜ (#713 sınıfı) — Dal 3'ün asıl dersi
+//
+// `bg-primary-700` "çalışıyor gibi" duruyor: `--primary-700` tokens.css'te TANIMLI.
+// Ama preset onu hiçbir utility'ye bağlamadığı için Tailwind o sınıfı HİÇ ÜRETMEZ
+// → stil sessizce kaybolur. Dal 3'te bu tuzağa düşülmedi; aşağıdaki kilit bir
+// sonraki geliştiricinin düşmesini de engeller.
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#715 — button, preset\'in ÜRETMEDİĞİ hiçbir token sınıfı kullanmıyor', () => {
+  // Preset düz CJS; tailwindcss'e bağımlı değil, doğrudan require edilebilir.
+  const preset = require(path.join(PKG, '../tailwind-preset.js'))
+  const presetColors: Record<string, unknown> = preset.theme.extend.colors
+
+  it.each(PAKETLER)('%s: kullanılan her kademe preset\'te tanımlı', (_ad, src) => {
+    const olu: string[] = []
+    for (const v of VARYANTLAR) {
+      for (const c of variantClasses(src, v)) {
+        const g = c.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) continue
+        const [, aile, kademe] = m
+        // Tailwind'in KENDİ paleti (gray/blue/green/purple/pink…) preset'te yok
+        // ve her zaman üretilir → yalnız token-destekli aileleri denetle.
+        if (!(aile in presetColors)) continue
+        if (!(kademe in (presetColors[aile] as Record<string, unknown>))) olu.push(`${v}: ${c}`)
+      }
+    }
+    expect(olu).toEqual([])
+  })
+
+  it('KONTROL: dedektör gerçekten yakalıyor — `bg-primary-700` ölü sınıftır', () => {
+    // Reddedilen adayın kilidi. `--primary-700` tokens.css'te VAR…
+    expect(tokenOku('primary-700', 'light')).toBe('3 105 161')
+    // …ama preset'te YOK → `bg-primary-700` hiç CSS üretmez.
+    expect('700' in (presetColors.primary as Record<string, unknown>)).toBe(false)
+    // Üstelik yanlış hue: `--primary` blue, `--primary-700` sky.
+    expect(hex(semanticRgb('primary', 'light'))).toBe('#1067f4')
+    expect(hex(scaleRgb('primary-700'))).toBe('#0369a1')
+  })
+})
+
+// ════════════════════════════════════════════════════════════════════════════════
+// İkiz pariteği — #643'ün "tek pakete yazma" tuzağına karşı kalıcı kilit
+// ════════════════════════════════════════════════════════════════════════════════
+
+describe('#715 — free ↔ pro ikiz pariteği (12 varyantın tamamı)', () => {
+  it.each(VARYANTLAR)('`%s` varyantı iki pakette AYNI sınıf kümesi', (v) => {
+    const norm = (src: string) => [...new Set(variantClasses(src, v))].sort()
+    expect({ varyant: v, free: norm(freeSrc) }).toEqual({ varyant: v, free: norm(proSrc) })
+  })
+
+  it('varyant ADLARI da aynı — birinde olup diğerinde olmayan yok', () => {
+    const adlar = (src: string) => {
+      const blok = src.slice(src.indexOf('variant: {'))
+      return [...blok.matchAll(/^ {8}"?([a-zA-Z-]+)"?:\s*\[/gm)].map((m) => m[1])
+    }
+    expect(adlar(freeSrc)).toEqual(adlar(proSrc))
+    expect(adlar(freeSrc).sort()).toEqual([...VARYANTLAR].sort())
+  })
+})

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

@@ -396,11 +396,21 @@ describe('Select Components', () => {
       // #623: `text-warning` (DEFAULT token) açık temada beyaz zeminde 2.14:1 ölçüldü —
       // AA'nın (4.5) ve hatta büyük-metin eşiğinin (3.0) altında. `--warning` aynı zamanda
       // `bg-warning` yüzeylerinde kullanıldığı için token'ın kendisi DEĞİŞTİRİLMEDİ;
-      // metin rengi ölçülmüş bir light/dark çiftine taşındı: 4.92 (light) / 10.51 (dark).
+      // metin rengi ham kademe ikilisine taşınmıştı: 4.92 (light) / 10.51 (dark).
+      //
+      // Kalite koşusu 12 (#710 sınıfı): kardeş varyantlar `destructive` ve `success`
+      // `-subtle` token ailesine geçirilmişti, `warning` bu göçün DIŞINDA kalmıştı.
+      // Artık hizalandı. İki kazanım:
+      //   1. Kontrast 4.92 → 8.83 (light) / 10.51 → 14.43 (dark) — tokens.css'te yazılı
+      //   2. `dark:` override KALKTI: token zaten tema duyarlı olduğu için gereksizdi,
+      //      üstelik `dark:` sınıfı tüketicinin kendi rengini eziyordu (#715'in kök nedeni)
+      // Aşağıdaki `not.toHaveClass` bilinçli bir regresyon kilidi — ham kademeye
+      // ya da `dark:` override'ına geri dönüş bu testi kırar.
       rerender(<SelectItem value="item1" variant="warning">Item</SelectItem>)
       item = screen.getByTestId('select-item')
-      expect(item).toHaveClass('text-warning-700')
-      expect(item).toHaveClass('dark:text-warning-500')
+      expect(item).toHaveClass('text-warning-subtle-foreground')
+      expect(item).not.toHaveClass('text-warning-700')
+      expect(item).not.toHaveClass('dark:text-warning-500')
     })
 
     it('applies size classes correctly', () => {