@moontra/moonui 6.19.1 → 6.19.2

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

@@ -0,0 +1,460 @@
+/**
+ * #454 — Switch `variant` (checked track) kontrast değişmezleri.
+ *
+ * BULGU (PR #453 / issue #448'in kapsam-dışı kardeş bulgusu): `secondary` varyantı
+ * checked durumda `bg-accent` kullanıyordu — ADI `secondary`, TOKEN'ı `accent`.
+ *
+ * SWITCH'TE İKİ EKSEN AYNI SAYIYI VERİR, çünkü thumb `bg-background` taşır
+ * (`switchThumbVariants` tabanı):
+ *   EKSEN A — checked track ↔ sayfa/kart zemini: kontrol "açık" okunuyor mu?
+ *   EKSEN B — thumb ↔ checked track: tutamacın KONUMU görülüyor mu?
+ * İkisi de aynı iki rengi karşılaştırır (`--background` ↔ track). Bu yüzden
+ * `bg-accent` ile checked switch HEM sayfadan HEM tutamacından ayrışmıyordu:
+ * light 1.154 · dark 1.359 · docs kabuğunun gerçek koyu kartı (#111827) 1.197.
+ * Switch'in tek işi durumu göstermek olduğu için bu dekoratif bir kontrast
+ * eksiği değil İŞLEVSEL bir kusurdur.
+ *
+ * Eşik 3:1 (WCAG 1.4.11, non-text UI bileşeni). axe yakalamaz: `color-contrast`
+ * kuralı yalnız METİN ölçer.
+ *
+ * İKİ AYRI KÖK NEDEN, İKİ AYRI ÇÖZÜM ŞEKLİ (ikisi de bu dosyada kilitli):
+ *
+ *  1) `secondary` — `--accent` bir YÜZEY token'ı (`hover:bg-accent` tinti) ve iki
+ *     temada da kendi zeminine bitişik. Varyant kendi ailesine, `--secondary-*`
+ *     slate skalasına bağlandı. #448'in slider'da uyguladığı 700/400 `dark:` ayrımı
+ *     BURADA GEREKMEZ: orada 500 elenmişti çünkü slider'ın `secondary` varyantı
+ *     zaten o rengi kullanıyordu (ΔE*ab = 0.0 → klon). Switch'in `accent` adlı
+ *     varyantı YOK → 500 serbest ve iki temayı birden geçen TEK kademe.
+ *       secondary: "data-[state=checked]:bg-[rgb(var(--secondary-500))]"
+ *
+ *  2) `warning` — KARDEŞ KUSURU, farklı sınıf (#424/PR #440 progress · #442/PR #446
+ *     slider ile aynı): `--warning` tokens.css'in `.dark` bloğunda EZİLMİYOR, iki
+ *     temada aynı turuncu. Dark'ta koyu zemin sayesinde geçiyor (9.446), LIGHT'ta
+ *     beyaz üstünde 2.133 ✗. Emsalin şekli aynen uygulandı: light'ta -700 kademesi,
+ *     dark'ta semantik token DEĞİŞMEDEN kalır (dark render bit-bit aynı).
+ *       warning: "...bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning"
+ *
+ * RENKLER VARSAYILMAZ — `switch.tsx`'in O ANKİ CVA dizgelerinden çözülür
+ * (PR #440/#446/#453 dersi: sabit varsayım boş-yeşil üretir).
+ *
+ * Pro ikizi: packages/moonui-pro/src/components/ui/__tests__/switch-variant-contrast.test.tsx
+ */
+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 { Switch } from '../switch'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+type RGB = [number, number, number]
+type Blok = 'light' | 'dark'
+
+/** "H S% L%" ya da "R G B" biçimindeki ham token değeri (light = `.moonui-root`, dark = `.dark`) */
+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ı ("--secondary-500: 100 116 139") 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')!)
+
+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)
+}
+
+/**
+ * CIE76 ΔE*ab — "iki varyant AYIRT EDİLEBİLİR mi?" metriği. WCAG kontrastı bu
+ * soruya cevap veremez (yalnız bağıl parlaklık ölçer; apayrı hue'daki iki rengi
+ * "aynı" gösterebilir). Klon iddiaları bu yüzden ΔE ile kurulur. JND ≈ 2.3; eşik 10.
+ */
+function rgbToLab([r, g, b]: RGB): RGB {
+  const s = (v: number) => {
+    const x = v / 255
+    return (x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)) * 100
+  }
+  const [R, G, B] = [s(r), s(g), s(b)]
+  const X = R * 0.4124 + G * 0.3576 + B * 0.1805
+  const Y = R * 0.2126 + G * 0.7152 + B * 0.0722
+  const Z = R * 0.0193 + G * 0.1192 + B * 0.9505
+  const ref: RGB = [95.047, 100.0, 108.883]
+  const g2 = (t: number) => (t > 0.008856 ? Math.cbrt(t) : 7.787 * t + 16 / 116)
+  const [fx, fy, fz] = [g2(X / ref[0]), g2(Y / ref[1]), g2(Z / ref[2])]
+  return [116 * fy - 16, 500 * (fx - fy), 200 * (fy - fz)]
+}
+
+function deltaE(a: RGB, b: RGB): number {
+  const A = rgbToLab(a)
+  const B = rgbToLab(b)
+  return Math.hypot(A[0] - B[0], A[1] - B[1], A[2] - B[2])
+}
+
+/** Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#284/#368/#448 konvansiyonu) */
+const KART_GERCEK_DARK: RGB = [17, 24, 39]
+
+function zeminler(blok: Blok): Array<[string, RGB]> {
+  const z: Array<[string, RGB]> = [
+    ['--background', semantikRgb('background', blok)],
+    ['--card', semantikRgb('card', blok)],
+  ]
+  if (blok === 'dark') z.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return z
+}
+
+// ——— Renkler KAYNAKTAN türetilir (PR #440/#446/#453 dersi) ——————————————
+const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/switch.tsx'), 'utf8')
+/** Yorum satırları ayıklanır — gerekçe metinleri `varyant:` gibi görünmesin */
+const yorumsuz = kaynak.replace(/^[ \t]*\/\/.*$/gm, '')
+const TRACK_CVA = yorumsuz.slice(
+  yorumsuz.indexOf('const switchVariants'),
+  yorumsuz.indexOf('const switchThumbVariants')
+)
+const THUMB_CVA = yorumsuz.slice(
+  yorumsuz.indexOf('const switchThumbVariants'),
+  yorumsuz.indexOf('export interface SwitchProps')
+)
+
+const VARYANTLAR = ['primary', 'success', 'warning', 'destructive', 'secondary'] as const
+type Varyant = (typeof VARYANTLAR)[number]
+
+/** CVA `variant` bloğundaki ham sınıf dizgesi */
+function varyantSinifi(varyant: string): string {
+  const m = TRACK_CVA.match(new RegExp(`\\n\\s*${varyant}:\\s*"([^"]+)"`))
+  if (!m) throw new Error(`${varyant} varyantı switchVariants içinde bulunamadı`)
+  return m[1]
+}
+
+/** `bg-primary` / `bg-[rgb(var(--secondary-500))]` → RGB */
+function sinifRengi(sinif: string, blok: Blok): RGB {
+  const skala = sinif.match(/^bg-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
+  if (skala) return rgbTokenRgb(tokenOku(skala[1], 'light')!) // skala YALNIZ light blokta
+  const semantik = sinif.match(/^bg-([a-z-]+)$/)
+  if (semantik) return semantikRgb(semantik[1], blok)
+  throw new Error(`çözülemeyen sınıf: ${sinif}`)
+}
+
+/** checked track'in ilgili temadaki rengi — `dark:` önekli sınıf dark'ta kazanır */
+function checkedTrackRengi(varyant: string, blok: Blok): RGB {
+  const KOSUL = 'data-[state=checked]:'
+  const adaylar = varyantSinifi(varyant)
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((s) => s.replace(/^dark:/, '').startsWith(KOSUL))
+  const soy = (s: string) => s.replace(/^dark:/, '').slice(KOSUL.length)
+  const darkSinif = adaylar.find((s) => s.startsWith('dark:'))
+  const lightSinif = adaylar.find((s) => !s.startsWith('dark:'))
+  if (!lightSinif) throw new Error(`${varyant}: temel (light) checked sınıfı yok`)
+  return sinifRengi(soy(blok === 'dark' && darkSinif ? darkSinif : lightSinif), blok)
+}
+
+/** Thumb'ın dolgusu — A ve B eksenlerinin AYNI sayıyı vermesinin sebebi */
+function thumbRengi(blok: Blok): RGB {
+  const m = THUMB_CVA.match(/"([^"]*\bbg-[a-z-]+\b[^"]*)"/)
+  if (!m) throw new Error('thumb taban sınıfı okunamadı')
+  const bg = m[1].split(/\s+/).find((s) => s.startsWith('bg-'))!
+  return sinifRengi(bg, blok)
+}
+
+const KADEMELER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+const ESIK = 3.0
+const DELTAE_ESIK = 10
+
+/** Bir rengin switch eksenlerinde (A + B) o temada eşiği geçip geçmediği */
+const eksenleriGecer = (c: RGB, blok: Blok): boolean =>
+  zeminler(blok).every(([, z]) => kontrast(c, z) >= ESIK) &&
+  kontrast(thumbRengi(blok), c) >= ESIK
+
+describe('#454 — hesaplayıcı çapaları', () => {
+  it('kontrast hesaplayıcısı DOĞRU — belgelenmiş token çifti beklenen oranı veriyor', () => {
+    // tokens.css `--info-subtle` / `--info-subtle-foreground` için 9.5:1 iddia ediyor
+    const oran = kontrast(
+      semantikRgb('info-subtle', 'light'),
+      semantikRgb('info-subtle-foreground', 'light')
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('ΔE hesaplayıcısı DOĞRU — aynı renk 0, siyah↔beyaz 100', () => {
+    expect(deltaE([100, 116, 139], [100, 116, 139])).toBeCloseTo(0, 6)
+    expect(deltaE([0, 0, 0], [255, 255, 255])).toBeCloseTo(100, 0)
+  })
+
+  it('hesaplayıcı, issue #454 gövdesindeki ESKİ ölçümleri birebir üretiyor', () => {
+    // 1.154 / 1.359 / 1.197 — `bg-accent` ile checked track ↔ üç zemin
+    const eski = (blok: Blok) =>
+      zeminler(blok).map(([, z]) =>
+        Number(kontrast(semantikRgb('accent', blok), z).toFixed(3))
+      )
+    expect(eski('light')[0]).toBe(1.154)
+    expect(eski('dark')[0]).toBe(1.359)
+    expect(eski('dark')[2]).toBe(1.197)
+  })
+})
+
+describe('#454 — iki eksenin AYNI olmasının yapısal sebebi', () => {
+  it('thumb dolgusu `bg-background` — B ekseni A ekseniyle aynı renk çiftini ölçer', () => {
+    // Biri thumb'a ayrı bir dolgu verirse iki eksen ayrışır ve bu dosyanın
+    // "tek ölçüm iki ekseni kapatır" varsayımı sessizce geçersizleşir.
+    expect(THUMB_CVA).toContain('bg-background')
+    for (const blok of ['light', 'dark'] as const) {
+      expect(thumbRengi(blok)).toEqual(semantikRgb('background', blok))
+    }
+  })
+
+  it('durum ayrıca KONUMLA da taşınıyor — thumb ötelemeleri korunuyor', () => {
+    // Renk tek başına durum taşıyıcısı değil; `translate-x` ayrımı kapsam kilidi.
+    expect(THUMB_CVA).toContain('data-[state=checked]:translate-x-4')
+    expect(THUMB_CVA).toContain('data-[state=checked]:translate-x-5')
+    expect(THUMB_CVA).toContain('data-[state=checked]:translate-x-7')
+    expect(THUMB_CVA).toContain('data-[state=unchecked]:translate-x-0')
+  })
+})
+
+describe('#454 — KABUL KRİTERİ: her varyantın checked track’i iki eksende ≥3:1', () => {
+  for (const varyant of VARYANTLAR) {
+    for (const blok of ['light', 'dark'] as const) {
+      it(`${varyant} / ${blok}`, () => {
+        const c = checkedTrackRengi(varyant, blok)
+        for (const [ad, z] of zeminler(blok)) {
+          // Zemin adı hata mesajına girsin diye ayrı assertion
+          expect(`${ad}: ${kontrast(c, z) >= ESIK ? 'geçer' : kontrast(c, z).toFixed(3)}`).toBe(
+            `${ad}: geçer`
+          )
+        }
+        expect(kontrast(thumbRengi(blok), c)).toBeGreaterThanOrEqual(ESIK)
+      })
+    }
+  }
+})
+
+describe('#454 — klon filtresi: varyantlar birbirinden ayırt edilebilir', () => {
+  for (const blok of ['light', 'dark'] as const) {
+    it(`${blok} — tüm varyant çiftleri ΔE*ab ≥ ${DELTAE_ESIK}`, () => {
+      for (let i = 0; i < VARYANTLAR.length; i++) {
+        for (let j = i + 1; j < VARYANTLAR.length; j++) {
+          const cift = `${VARYANTLAR[i]}↔${VARYANTLAR[j]}`
+          const d = deltaE(
+            checkedTrackRengi(VARYANTLAR[i], blok),
+            checkedTrackRengi(VARYANTLAR[j], blok)
+          )
+          // Çift adı hata mesajına girsin diye dizge karşılaştırması
+          expect(`${cift}: ${d >= DELTAE_ESIK ? 'ayrık' : d.toFixed(1)}`).toBe(`${cift}: ayrık`)
+        }
+      }
+    })
+
+    it(`${blok} — checked track, UNCHECKED track’ten (bg-input) ayırt edilebilir`, () => {
+      // Açık switch'in kapalıya benzemesi tam olarak bu issue'nun şikâyeti.
+      const unchecked = semantikRgb('input', blok)
+      for (const varyant of VARYANTLAR) {
+        expect(deltaE(checkedTrackRengi(varyant, blok), unchecked)).toBeGreaterThanOrEqual(
+          DELTAE_ESIK
+        )
+      }
+    })
+  }
+})
+
+describe('#454 — `secondary` kararı: ad ↔ token tutarsızlığı ve reddedilen alternatifler', () => {
+  it('ESKİ hâli (`bg-accent`) üç zeminde de eşiğin ALTINDA — kusur gerçek', () => {
+    for (const blok of ['light', 'dark'] as const) {
+      for (const [, z] of zeminler(blok)) {
+        expect(kontrast(semantikRgb('accent', blok), z)).toBeLessThan(ESIK)
+      }
+    }
+  })
+
+  it('SEMANTİK `bg-secondary` ELENDİ — light’ta `--accent` ile BİREBİR aynı, dark’ta daha kötü', () => {
+    // "Adı secondary ise bg-secondary kullansın" en bariz alternatif; ölçümle elendi.
+    expect(tokenOku('secondary', 'light')).toBe(tokenOku('accent', 'light'))
+    expect(kontrast(semantikRgb('secondary', 'light'), semantikRgb('background', 'light'))).toBeLessThan(ESIK)
+    expect(kontrast(semantikRgb('secondary', 'dark'), semantikRgb('background', 'dark'))).toBeLessThan(1.05)
+  })
+
+  it('`bg-secondary-foreground` ELENDİ — dark’ta `--primary` ile BİREBİR aynı (primary klonu)', () => {
+    expect(tokenOku('secondary-foreground', 'dark')).toBe(tokenOku('primary', 'dark'))
+  })
+
+  it('slate skalasında iki temayı birden geçen VE klon olmayan TEK kademe 500', () => {
+    const uygun = KADEMELER.filter((k) => {
+      const ham = tokenOku(`secondary-${k}`, 'light')
+      if (!ham) return false
+      const c = rgbTokenRgb(ham)
+      return (['light', 'dark'] as const).every(
+        (blok) =>
+          eksenleriGecer(c, blok) &&
+          (['primary', 'success', 'warning', 'destructive'] as Varyant[]).every(
+            (v) => deltaE(c, checkedTrackRengi(v, blok)) >= DELTAE_ESIK
+          )
+      )
+    })
+    expect(uygun).toEqual([500])
+  })
+
+  it('#448’in slider’daki 500-elemesi BURADA GEÇERSİZ — switch’in `accent` varyantı YOK', () => {
+    // #453 ölçümü: `--secondary-500` ↔ slider'ın `secondary` varyantı ΔE = 0.0 (klon).
+    // Switch'te o çakışma yok; kaynak varyant listesi bunu kanıtlar.
+    expect(VARYANTLAR).not.toContain('accent')
+    expect(TRACK_CVA).not.toMatch(/\n\s*accent:/)
+    const k500 = rgbTokenRgb(tokenOku('secondary-500', 'light')!)
+    for (const blok of ['light', 'dark'] as const) {
+      for (const v of ['primary', 'success', 'warning', 'destructive'] as Varyant[]) {
+        expect(deltaE(k500, checkedTrackRengi(v, blok))).toBeGreaterThanOrEqual(DELTAE_ESIK)
+      }
+    }
+  })
+
+  it('`--accent-50 … --accent-950` skalası tokens.css’te TANIMLI DEĞİL', () => {
+    // Gerçek bir accent skalası eklenirse "varyant kendi ailesine dönsün mü?"
+    // sorusu yeniden açılır — burası o an kırmızıya döner.
+    for (const k of KADEMELER) expect(tokenOku(`accent-${k}`, 'light')).toBeNull()
+    expect(tokenOku('secondary-500', 'light')).not.toBeNull()
+  })
+})
+
+describe('#454 — `warning` kardeş kusuru: kök neden ve çözüm şekli', () => {
+  it('KÖK NEDEN: `--warning` `.dark` bloğunda EZİLMİYOR (kardeşleri tema-uyarlanabilir)', () => {
+    expect(tokenOku('warning', 'dark')).toBeNull()
+    expect(tokenOku('success', 'dark')).not.toBeNull() // karşıtlık
+    expect(tokenOku('accent', 'dark')).not.toBeNull() // karşıtlık (#448 ile farkı)
+  })
+
+  it('ESKİ hâli (`bg-warning`) LIGHT’ta eşiğin altında, DARK’ta değil', () => {
+    expect(kontrast(semantikRgb('warning', 'light'), semantikRgb('background', 'light'))).toBeLessThan(ESIK)
+    expect(kontrast(semantikRgb('warning', 'dark'), semantikRgb('background', 'dark'))).toBeGreaterThan(ESIK)
+  })
+
+  it('tema-KÖR bir warning kademesi seçilebilirdi ama DARK’ı gereksizce oynatırdı', () => {
+    // `dark:` ayrımının gerekçesi: dark zaten geçiyordu, regresyon yüzeyi sıfır tutuldu.
+    const temaKor = KADEMELER.filter((k) => {
+      const ham = tokenOku(`warning-${k}`, 'light')
+      return ham && (['light', 'dark'] as const).every((b) => eksenleriGecer(rgbTokenRgb(ham), b))
+    })
+    expect(temaKor).toEqual([700])
+    expect(checkedTrackRengi('warning', 'dark')).toEqual(semantikRgb('warning', 'dark'))
+  })
+
+  it('LIGHT’ta eşiği geçen kademe kümesi {700,800,900,950} — en açığı seçildi', () => {
+    const gecen = KADEMELER.filter((k) => {
+      const ham = tokenOku(`warning-${k}`, 'light')
+      return ham && eksenleriGecer(rgbTokenRgb(ham), 'light')
+    })
+    expect(gecen).toEqual([700, 800, 900, 950])
+    expect(checkedTrackRengi('warning', 'light')).toEqual(
+      rgbTokenRgb(tokenOku('warning-700', 'light')!)
+    )
+  })
+
+  it('DARK render BİT-BİT AYNI kaldı (warning + dokunulmayan varyantlar)', () => {
+    for (const v of ['primary', 'success', 'warning', 'destructive'] as Varyant[]) {
+      const tok = v === 'destructive' ? 'error' : v
+      expect(checkedTrackRengi(v, 'dark')).toEqual(semantikRgb(tok, 'dark'))
+    }
+  })
+})
+
+describe('#454 — kaynak sözleşmesi (switch.tsx)', () => {
+  it('`secondary` → slate skalasının 500 kademesi, `dark:` ayrımı YOK', () => {
+    expect(varyantSinifi('secondary')).toBe('data-[state=checked]:bg-[rgb(var(--secondary-500))]')
+  })
+
+  it('`warning` → light -700, dark semantik token', () => {
+    expect(varyantSinifi('warning')).toBe(
+      'data-[state=checked]:bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning'
+    )
+  })
+
+  it('KAPSAM KİLİDİ: geçen üç varyant DOKUNULMADI', () => {
+    expect(varyantSinifi('primary')).toBe('data-[state=checked]:bg-primary')
+    expect(varyantSinifi('success')).toBe('data-[state=checked]:bg-success')
+    expect(varyantSinifi('destructive')).toBe('data-[state=checked]:bg-error')
+  })
+
+  it('KAPSAM KİLİDİ: unchecked track ve prop yüzeyi DEĞİŞMEDİ', () => {
+    expect(TRACK_CVA).toContain('data-[state=unchecked]:bg-input')
+    expect(kaynak).toContain(
+      'type SwitchVariant = "primary" | "success" | "warning" | "destructive" | "secondary";'
+    )
+    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ğı)', () => {
+    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')
+    expect(TRACK_CVA).not.toContain('bg-warning-700')
+  })
+})
+
+describe('#454 — render sözleşmesi (<Switch />)', () => {
+  const sinif = (jsx: React.ReactElement) => {
+    const { container } = render(jsx)
+    return (container.querySelector('[role="switch"]') as HTMLElement).className
+  }
+
+  it('checked `secondary` switch slate-500 sınıfını taşıyor', () => {
+    expect(sinif(<Switch variant="secondary" defaultChecked />)).toContain(
+      'data-[state=checked]:bg-[rgb(var(--secondary-500))]'
+    )
+  })
+
+  it('checked `secondary` switch ARTIK `bg-accent` taşımıyor', () => {
+    expect(sinif(<Switch variant="secondary" defaultChecked />)).not.toContain(
+      'data-[state=checked]:bg-accent'
+    )
+  })
+
+  it('checked `warning` switch light -700 + dark semantik sınıflarını birlikte taşıyor', () => {
+    const c = sinif(<Switch variant="warning" defaultChecked />)
+    expect(c).toContain('data-[state=checked]:bg-[rgb(var(--warning-700))]')
+    expect(c).toContain('dark:data-[state=checked]:bg-warning')
+  })
+
+  it('varsayılan varyant (primary) ve unchecked davranışı korunuyor', () => {
+    const c = sinif(<Switch />)
+    expect(c).toContain('data-[state=checked]:bg-primary')
+    expect(c).toContain('data-[state=unchecked]:bg-input')
+  })
+})

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

@@ -77,10 +77,14 @@ describe('Switch Component', () => {
       expect(switchElement).toHaveClass('data-[state=checked]:bg-success')
     })
 
+    // #454: `--warning` `.dark` bloğunda ezilmediği için light temada checked
+    // track ↔ zemin 2.133 idi (eşik 3:1). Light'ta skalanın -700 kademesine
+    // inildi, dark semantik token'da kaldı. Ölçüm: switch-variant-contrast.test.tsx
     it('renders warning variant correctly', () => {
       render(<Switch variant="warning" data-testid="switch" />)
       const switchElement = screen.getByTestId('switch')
-      expect(switchElement).toHaveClass('data-[state=checked]:bg-warning')
+      expect(switchElement).toHaveClass('data-[state=checked]:bg-[rgb(var(--warning-700))]')
+      expect(switchElement).toHaveClass('dark:data-[state=checked]:bg-warning')
     })
 
     it('renders destructive variant correctly', () => {
@@ -89,10 +93,15 @@ describe('Switch Component', () => {
       expect(switchElement).toHaveClass('data-[state=checked]:bg-error')
     })
 
+    // #454: varyantın ADI `secondary` iken TOKEN'ı `accent` idi; `--accent` bir
+    // yüzey token'ı olduğu için checked switch iki temada da görünmüyordu
+    // (1.154 / 1.359). Varyant kendi ailesine, `--secondary-*` slate skalasına
+    // bağlandı. Ölçüm: switch-variant-contrast.test.tsx
     it('renders secondary variant correctly', () => {
       render(<Switch variant="secondary" data-testid="switch" />)
       const switchElement = screen.getByTestId('switch')
-      expect(switchElement).toHaveClass('data-[state=checked]:bg-accent')
+      expect(switchElement).toHaveClass('data-[state=checked]:bg-[rgb(var(--secondary-500))]')
+      expect(switchElement).not.toHaveClass('data-[state=checked]:bg-accent')
     })
 
     it('uses primary variant as default', () => {

package/src/components/ui/slider.tsx

@@ -72,7 +72,42 @@ const sliderRangeVariants = cva(
         // tüketici --secondary-500'ü ezerek özelleştirebilir.
         // Regresyon: __tests__/slider-secondary-contrast.test.ts
         secondary: "bg-[rgb(var(--secondary-500))]",
-        accent: "bg-accent",
+        // #448 (#389/#407'nin `accent` kardeşi — ama ÇÖZÜM SINIFI farklı): range
+        // `bg-accent`, track `bg-accent/20` idi — aynı yüzey token'ının iki alfası.
+        // `--accent` HER İKİ temada da kusurluydu (warning/error'dan ağır: onlar
+        // yalnız light'ta kusurluydu): A ekseni light 1.123 · dark 1.303 · gerçek
+        // docs kartı (#111827) 1.162. Eşik 3:1 (WCAG 1.4.11 non-text).
+        //
+        // KÖK NEDEN: `--accent` bir YÜZEY token'ı — `hover:bg-accent` tinti olarak
+        // tasarlanmış ve iki temada da kendi zeminine BİTİŞİK duruyor (light
+        // rgb(235,239,245) beyaz üstünde, dark rgb(29,40,58) rgb(3,7,17) üstünde).
+        // Dolgu/kenarlık rolüne yapısal olarak uygun değil; bu yüzden track'i
+        // değiştirerek onarmak da MÜMKÜN DEĞİL (light'ta accent'ten 3:1 uzakta
+        // duran daha açık bir yüzey yok).
+        //
+        // #389'un tek-orta-ton kademe araması AYNEN uygulanamadı: tokens.css'te
+        // `--accent-50 … --accent-950` skalası YOK (skalası olan aileler:
+        // primary/secondary/success/warning/error/brand/brand-accent).
+        // `bg-accent-foreground` de elendi — `--accent-foreground` iki temada da
+        // `--primary` ile BİREBİR aynı değer (varyant primary klonuna dönerdi) ve
+        // 7 tema preset'inin 2'sinde beyaz (Creative/Nature), yani tek başına
+        // dolgu olamaz.
+        //
+        // ÇÖZÜM: sistemin TEK nötr skalası olan slate (`--secondary-*`) — `--accent`
+        // ile aynı hue ailesi (216° ↔ 215°), üstelik light temada `--accent` ile
+        // `--secondary` BİREBİR aynı token değerini taşıyor. Tema-kör tek kademe
+        // SEÇİLEMEDİ: bu ailede iki temayı birden geçen tek kademe 500'dür, o da
+        // `secondary` varyantının kendi rengi (ΔE*ab = 0.0 — iki varyant klon olurdu).
+        // Bu yüzden #442'nin `dark:` ayrımı deseni kullanıldı, tema başına ayrı kademe.
+        // Tam tarama (11 kademe × 2 tema × 3 zemin × 2 eksen): DARK'ta eşiği geçen VE
+        // kardeş varyantlardan ayırt edilebilen (ΔE*ab ≥ 10) TEK kademe 400
+        // (500 = secondary klonu · ≤300 `default`/`primary` ile çakışıyor · ≥600 eşiğin
+        // altında). LIGHT'ta {600,700,800} uygun; 700 kardeş ayrımını maksimize eder
+        // (ΔE 21.2 · 600→12.7 · 800→14.9).
+        // Ölçülen — A: light 1.123 → 10.081 ✓ · dark 1.303 → 7.533 ✓ · docs kartı
+        // 1.162 → 6.717 ✓. Track `bg-accent/20` DEĞİŞMEDİ (yedi varyantın ortak deseni).
+        // Regresyon: __tests__/slider-accent-contrast.test.ts
+        accent: "bg-[rgb(var(--secondary-700))] dark:bg-[rgb(var(--secondary-400))]",
         success: "bg-success",
         // #442 (#424/PR #440'ın slider ikizi): range `bg-warning`/`bg-error` idi —
         // track (`bg-warning/20` · `bg-error/20`) AYNI token'ın alfalı hâli olduğundan
@@ -128,7 +163,16 @@ const sliderThumbVariants = cva(
         // aynı kademe: tutamaç ve dolgu tek renkte okunur.
         // Regresyon: __tests__/slider-secondary-contrast.test.ts
         secondary: "border-[rgb(var(--secondary-500))] bg-background",
-        accent: "border-accent bg-background",
+        // #448 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — tutamacın
+        // dolgusu `bg-background`, yani zeminin kendisi; ayırt edilebilirliğini
+        // YALNIZ kenarlık taşır → non-text UI bileşeni, WCAG 1.4.11 ≥3:1.
+        // `border-accent` iki temada da kayboluyordu: light 1.154 · dark 1.359 ·
+        // gerçek docs kartı 1.197. Range ile AYNI kademeler seçildi — #407'nin
+        // gerekçesi burada da geçerli: "tutamaç ve dolgu tek renkte okunur".
+        // Ölçülen — light 1.154 → 10.355 ✓ · dark 1.359 → 7.857 ✓ · docs kartı
+        // 1.197 → 6.919 ✓.
+        // Regresyon: __tests__/slider-accent-contrast.test.ts
+        accent: "border-[rgb(var(--secondary-700))] dark:border-[rgb(var(--secondary-400))] bg-background",
         success: "border-success bg-background",
         // #442 EKSEN B (range'den FARKLI eksen: bileşen↔sayfa-zemini) — #407'de
         // `secondary` için açılan eksenin warning/error karşılığı. Tutamacın dolgusu

package/src/components/ui/switch.tsx

@@ -34,12 +34,51 @@ const switchVariants = cva(
         md: "h-6 w-11",
         lg: "h-7 w-14",
       },
+      // #454 — checked track'in İKİ ekseni de ölçüldü (eşik 3:1, WCAG 1.4.11
+      // non-text UI). Switch'te bu iki eksen AYNI sayıyı verir, çünkü thumb
+      // `bg-background` taşır (switchThumbVariants tabanı):
+      //   A) checked track ↔ sayfa/kart zemini  → kontrol "açık" okunuyor mu?
+      //   B) thumb ↔ checked track              → tutamacın KONUMU görülüyor mu?
+      // Ölçüm zeminleri: `--background` · `--card` · docs kabuğunun gerçek koyu
+      // kartı (#111827). Regresyon: __tests__/switch-variant-contrast.test.tsx
       variant: {
-        primary: "data-[state=checked]:bg-primary",
-        success: "data-[state=checked]:bg-success",
-        warning: "data-[state=checked]:bg-warning",
-        destructive: "data-[state=checked]:bg-error",
-        secondary: "data-[state=checked]:bg-accent",
+        primary: "data-[state=checked]:bg-primary",   // light 4.920 · dark 19.256 ✓
+        success: "data-[state=checked]:bg-success",   // light 4.904 · dark  6.043 ✓
+        // #454 kardeş kusuru (#424/PR #440 progress · #442/PR #446 slider ile AYNI
+        // sınıf, üçüncü component): `--warning` tokens.css'in `.dark` bloğunda
+        // EZİLMİYOR, yani iki temada da aynı turuncu. Dark'ta zemin koyu olduğu
+        // için geçiyor (9.446), LIGHT'ta beyaz üstünde 2.133 ✗ — açık temada
+        // checked warning switch'in tutamacı da kayboluyordu (B ekseni 2.133).
+        // ÇÖZÜM (emsalle birebir aynı şekil): eksik tema-uyarlamasını component
+        // düzeyinde ver — light'ta skalanın -700 kademesine in, dark'ta semantik
+        // token'a DOKUNMA (dark render bit-bit aynı kalır, regresyon yüzeyi sıfır).
+        // Light'ta eşiği geçen kademe kümesi {700,800,900,950}; en açık olanı
+        // seçildi (turuncu kimliğini en çok koruyan). Ölçülen: 2.133 → 4.923 ✓.
+        warning:
+          "data-[state=checked]:bg-[rgb(var(--warning-700))] dark:data-[state=checked]:bg-warning",
+        destructive: "data-[state=checked]:bg-error", // light 3.781 · dark 5.328 ✓ (dokunulmadı)
+        // #454 asıl kusuru: `secondary` varyantı `bg-accent` kullanıyordu — ADI
+        // `secondary`, TOKEN'ı `accent`. `--accent` bir YÜZEY token'ı (`hover:bg-accent`
+        // tinti) ve iki temada da kendi zeminine bitişik: light rgb(235,239,245)
+        // beyaz üstünde 1.154 · dark rgb(29,40,58) 1.359 · docs kartı 1.197.
+        // Yani checked switch hem sayfadan hem de kendi tutamacından ayrışmıyordu:
+        // "açık" durum GÖRÜNMÜYORDU (switch'in tek işi durumu göstermek).
+        //
+        // AD ↔ TOKEN KARARI: varyant kendi ailesine, `--secondary-*` slate skalasına
+        // bağlandı. `bg-secondary` (semantik) BİLEREK seçilmedi — light'ta `--accent`
+        // ile BİREBİR aynı değer (1.154), dark'ta daha da kötü (1.007). Skala
+        // taraması (11 kademe × 2 tema × 3 zemin × 2 eksen + kardeş ΔE*ab ≥ 10 klon
+        // filtresi): light {500,600,700,800,900,950} · dark {300,400,500} → iki
+        // temayı birden geçen TEK kademe **500**, yani `dark:` ayrımına gerek yok.
+        // #448'in slider'daki 700/400 ayrımı burada GEREKMEZ ve İSTENMEZ: orada 500
+        // elenmişti çünkü slider'ın `secondary` varyantı zaten o rengi kullanıyordu
+        // (ΔE = 0.0 → klon). Switch'in `accent` adlı bir varyantı YOK, dolayısıyla
+        // 500 serbest ve kardeşlerden ayrık (ΔE: primary 69.5/51.6 · success
+        // 63.6/74.8 · warning 96.0 · destructive 85.0 — hepsi ≥ 10).
+        // Yan fayda: slider'ın `secondary` varyantı da #389/PR #406'da aynı kademeye
+        // sabitlenmişti → aynı varyant adı artık iki component'te aynı rengi veriyor.
+        // Ölçülen: A/B light 1.154 → 4.759 ✓ · dark 1.359 → 4.234 ✓ · kart 1.197 → 3.728 ✓.
+        secondary: "data-[state=checked]:bg-[rgb(var(--secondary-500))]",
       },
     },
     defaultVariants: {