@moontra/moonui 6.19.0 → 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', () => {