@moontra/moonui 6.19.0 → 6.19.2

package/src/components/ui/__tests__/slider-warning-error-contrast.test.ts

@@ -0,0 +1,478 @@
+/**
+ * #442 — Slider `warning` / `error` kontrast değişmezleri (İKİ AYRI EKSEN).
+ *
+ * BULGU (#424/PR #440'ın progress'te kapattığı kusurun birebir slider ikizi):
+ *
+ *   EKSEN A (range↔track): range `bg-warning`/`bg-error`, track `bg-warning/20`·
+ *   `bg-error/20` — dolgu ile track AYNI token'ın iki alfa değeri. LIGHT temada
+ *   ayrım kayboluyordu: warning 1.835 · error 2.893 (eşik 3:1, WCAG 1.4.11
+ *   non-text). DARK zaten temizdi (6.97 / 4.46) → bulgu LIGHT'a özgü.
+ *
+ *   EKSEN B (thumb kenarlığı↔zemin): tutamaç `border-warning`/`border-error` +
+ *   `bg-background`. Dolgu zeminin kendisi olduğundan ayırt edilebilirliği YALNIZ
+ *   kenarlık taşır. Ölçüm: warning light **2.133 ✗**, error light 3.781 ✓.
+ *   Yani bu eksende yalnız `warning` kusurluydu; `error` tutarlılık için (aşağıda
+ *   "tek renk" kilidi) aynı ifadeye çekildi ve kontrastı ARTTI (3.781 → 6.470).
+ *
+ * axe ikisini de yakalamaz: `color-contrast` yalnız METİN öğelerini ölçer.
+ *
+ * KÖK NEDEN — token seviyesinde eksik tema-uyarlaması:
+ * `--warning` ve `--error` tokens.css'te `.dark` bloğunda EZİLMİYOR; iki temada da
+ * aynı renk. Kardeşleri tema-uyarlanabilir olduğu için eşiği geçiyor (`--success`
+ * light %29 → dark %36). Bu iki aile o uyarlamadan yoksun.
+ *
+ * ÇÖZÜM: eksik uyarlamayı component düzeyinde ver — light'ta skalanın -700
+ * kademesi, dark'ta semantik token:
+ *   range: "bg-[rgb(var(--warning-700))] dark:bg-warning"
+ *   thumb: "border-[rgb(var(--warning-700))] dark:border-warning bg-background"
+ * Tema-KÖR -700 dark'ı kırardı (aşağıda kanıtlanıyor). #389'un tek-orta-ton
+ * (`--secondary-500`) çözümü burada UYGULANAMAZ: orada `--secondary` temaya göre
+ * değişiyordu. Track alfaları bu yüzden `/20` KALDI.
+ *
+ * NOT: #389/#407'nin `slider-secondary-contrast.test.ts` dosyasından BİLEREK ayrı —
+ * o dosya `--secondary` eksenini kilitler, bu dosya `--warning`/`--error` eksenini.
+ * Pro ikizi: packages/moonui-pro/.../slider-warning-error-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 { Slider } from '../slider'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): 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): [number, number, number] {
+  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): [number, number, number] => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+
+/**
+ * Skala token'ları ("--warning-700: 161 98 7") HSL DEĞİL, RGB üçlüsüdür (semantik
+ * token'ların HSL formatından farklı) — component'te bu yüzden
+ * `rgb(var(--warning-700))` kompozisyonu kullanılır, hsl() değil.
+ */
+const rgbTokenRgb = (v: string): [number, number, number] => {
+  const p = v.split(/\s+/).map((x) => parseFloat(x))
+  return [p[0], p[1], p[2]]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): 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 rgbKontrast(a: [number, number, number], b: [number, number, number]): 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)
+}
+
+/** `bg-warning/20` gibi alfa katmanının zemin üstündeki bileşke rengi */
+function alfaBileske(
+  ust: [number, number, number],
+  alfa: number,
+  zemin: [number, number, number]
+): [number, number, number] {
+  return [
+    Math.round(alfa * ust[0] + (1 - alfa) * zemin[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * zemin[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * zemin[2]),
+  ]
+}
+
+/**
+ * Docs kabuğunda ölçülen GERÇEK koyu kart zemini (#111827 = rgb(17,24,39)) —
+ * #284/#368 konvansiyonu: kontrast, --background'ın yanında bu gerçek yüzeye göre
+ * de ölçülür. Bu bulguda DARBOĞAZ: en düşük dark oranlarını o veriyor.
+ */
+const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+
+const AILELER = ['warning', 'error'] as const
+type Aile = (typeof AILELER)[number]
+
+/** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
+function semantikRgb(aile: Aile, blok: 'light' | 'dark'): [number, number, number] {
+  return hslTokenRgb(tokenOku(aile, blok) ?? tokenOku(aile, 'light')!)
+}
+
+/** O temada slider'ın oturabileceği tüm zeminler */
+function zeminler(blok: 'light' | 'dark'): Array<[string, [number, number, number]]> {
+  const z: Array<[string, [number, number, number]]> = [
+    ['--background', hslTokenRgb(tokenOku('background', blok)!)],
+    ['--card', hslTokenRgb(tokenOku('card', blok)!)],
+  ]
+  if (blok === 'dark') z.push(['gerçek kart #111827', KART_GERCEK_DARK])
+  return z
+}
+
+// ——— Renkler KAYNAKTAN türetilir ———————————————————————————————————————
+// PR #440'ın dersi: ölçümü `-700` VARSAYIMINA göre yaparsan, biri değeri eskiye
+// döndürdüğünde kriter testleri yeşil kalır (boş-yeşil). Bu yüzden renkler
+// slider.tsx'in O ANKİ CVA sınıf dizgelerinden çözülür.
+const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
+const iTrack = kaynak.indexOf('sliderTrackVariants')
+const iRange = kaynak.indexOf('sliderRangeVariants')
+const iThumb = kaynak.indexOf('sliderThumbVariants')
+const iSon = kaynak.indexOf('SliderBaseProps')
+const TRACK_BLOK = kaynak.slice(iTrack, iRange)
+const RANGE_BLOK = kaynak.slice(iRange, iThumb)
+const THUMB_BLOK = kaynak.slice(iThumb, iSon)
+
+/** CVA bloğundan `<aile>: "<sınıflar>"` değerini oku */
+function varyantSinifi(blok: string, aile: string): string {
+  const m = blok.match(new RegExp(`\\n\\s*${aile}:\\s*"([^"]+)"`))
+  if (!m) throw new Error(`${aile} varyantı bulunamadı`)
+  return m[1]
+}
+
+/** Tek bir Tailwind sınıfını renge çevir (arbitrary skala VEYA semantik token) */
+function sinifRengi(sinif: string, blok: 'light' | 'dark'): [number, number, number] {
+  const skala = sinif.match(/^(?:bg|border)-\[rgb\(var\(--([a-z0-9-]+)\)\)\]$/)
+  if (skala) return rgbTokenRgb(tokenOku(skala[1], 'light')!) // skala yalnız :root'ta
+  const semantik = sinif.match(/^(?:bg|border)-([a-z-]+)$/)
+  if (semantik)
+    return hslTokenRgb(tokenOku(semantik[1], blok) ?? tokenOku(semantik[1], 'light')!)
+  throw new Error(`çözülemeyen sınıf: ${sinif}`)
+}
+
+/**
+ * Varyant dizgesinden o temada GERÇEKTEN uygulanan rengi çöz.
+ * `dark:` önekli sınıf dark temada kazanır; `onek` ile eksen seçilir
+ * (thumb dizgesi `border-*` yanında `bg-background` da taşır).
+ */
+function uygulananRenk(
+  cvaBlok: string,
+  aile: Aile,
+  onek: 'bg' | 'border',
+  blok: 'light' | 'dark'
+): [number, number, number] {
+  const siniflar = varyantSinifi(cvaBlok, aile)
+    .split(/\s+/)
+    .filter((s) => s.replace(/^dark:/, '').startsWith(`${onek}-`))
+  const darkSinif = siniflar.find((s) => s.startsWith('dark:'))?.slice('dark:'.length)
+  const lightSinif = siniflar.find((s) => !s.startsWith('dark:'))
+  if (!lightSinif) throw new Error(`${aile}/${onek}: temel (light) sınıf yok`)
+  return sinifRengi(blok === 'dark' ? darkSinif ?? lightSinif : lightSinif, blok)
+}
+
+const rangeRengi = (aile: Aile, blok: 'light' | 'dark') =>
+  uygulananRenk(RANGE_BLOK, aile, 'bg', blok)
+const thumbKenarRengi = (aile: Aile, blok: 'light' | 'dark') =>
+  uygulananRenk(THUMB_BLOK, aile, 'border', blok)
+
+/** Track'in her zemin üstündeki bileşkesi — alfa da KAYNAKTAN okunur */
+function trackler(aile: Aile, blok: 'light' | 'dark') {
+  const sinif = varyantSinifi(TRACK_BLOK, aile)
+  const m = sinif.match(/^bg-([a-z-]+)\/(\d+)$/)
+  if (!m) throw new Error(`track sınıfı çözülemedi: ${sinif}`)
+  const taban = hslTokenRgb(tokenOku(m[1], blok) ?? tokenOku(m[1], 'light')!)
+  const alfa = Number(m[2]) / 100
+  return zeminler(blok).map(([ad, z]) => [ad, alfaBileske(taban, alfa, z)] as const)
+}
+
+const KADEMELER = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+
+/** Slider DOM'u: kök > .moonui-theme > track > range; thumb'lar track'in KARDEŞİ */
+function parcalar(container: HTMLElement) {
+  const kabuk = container.querySelector('.moonui-theme') as HTMLElement
+  expect(kabuk).not.toBeNull()
+  const track = kabuk.firstElementChild as HTMLElement
+  const range = track.firstElementChild as HTMLElement
+  const thumb = kabuk.querySelector('[role="slider"]') as HTMLElement
+  expect(range).not.toBeNull()
+  expect(thumb).not.toBeNull()
+  return { track, range, thumb }
+}
+
+describe('#442 slider warning/error — hesaplayıcı çapası', () => {
+  it('hesaplayıcı DOĞRU — belgelenmiş bir token çifti beklenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: tokens.css `--info-subtle` çiftini 9.52:1 diye
+    // belgeliyor; hesaplayıcı bozulursa bu çapa kırmızı olur.
+    const oran = rgbKontrast(
+      hslTokenRgb(tokenOku('info-subtle', 'light')!),
+      hslTokenRgb(tokenOku('info-subtle-foreground', 'light')!)
+    )
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it('hesaplayıcı, denetimin TARAYICIDA ölçtüğü renkleri birebir üretiyor', () => {
+    // Çapraz doğrulama (#424/#442 gövdesindeki gerçek tarayıcı ölçümleri): model
+    // bunları tutturamıyorsa aşağıdaki tüm oranlar anlamsızdır.
+    expect(semantikRgb('warning', 'light')).toEqual([245, 159, 10])
+    expect(semantikRgb('error', 'light')).toEqual([239, 67, 67])
+    expect(trackler('warning', 'light')[0][1]).toEqual([253, 236, 206])
+    expect(trackler('error', 'light')[0][1]).toEqual([252, 217, 217])
+  })
+})
+
+describe('#442 kök neden: --warning ve --error `.dark` bloğunda EZİLMİYOR', () => {
+  it.each(AILELER)('--%s dark ezmesi yok → iki temada aynı renk', (aile) => {
+    // Bulgunun yapısal kök nedeni. Biri ileride `.dark` bloğuna `--warning`/
+    // `--error` eklerse burası kırmızı olur ve component düzeyindeki `dark:`
+    // telafisinin yeniden ölçülmesi gerektiğini söyler.
+    expect(tokenOku(aile, 'dark')).toBeNull()
+    expect(semantikRgb(aile, 'light')).toEqual(semantikRgb(aile, 'dark'))
+  })
+
+  it('karşıtlık: --success tema-uyarlanabilir olduğu İÇİN eşiği geçiyor', () => {
+    // Neden success'e dokunulmadığının kanıtı: onun dark ezmesi VAR.
+    expect(tokenOku('success', 'dark')).not.toBeNull()
+    expect(tokenOku('success', 'light')).not.toBe(tokenOku('success', 'dark'))
+  })
+
+  it.each(AILELER)('--%s-700 tanımlı ve RGB üçlüsü olarak ayrıştırılabiliyor', (aile) => {
+    const ham = tokenOku(`${aile}-700`, 'light')
+    expect(ham).toBeTruthy()
+    rgbTokenRgb(ham!).forEach((kanal) => {
+      expect(Number.isFinite(kanal)).toBe(true)
+      expect(kanal).toBeGreaterThanOrEqual(0)
+      expect(kanal).toBeLessThanOrEqual(255)
+    })
+  })
+
+  it('zemin denkliği: `.moonui-theme` paket CSS’inde token yeniden tanımlamıyor', () => {
+    // Hesap, track'in/tutamacın altındaki yüzeyin --background/--card olduğunu
+    // VARSAYAR. Biri `.moonui-theme`i token kapsamına çevirirse o varsayım
+    // sessizce yanlışlanır — o an burası kırmızı olur (#389 deseni).
+    const stilDizini = path.join(KOK, 'styles')
+    const stiller = fs
+      .readdirSync(stilDizini)
+      .filter((f) => f.endsWith('.css'))
+      .map((f) => fs.readFileSync(path.join(stilDizini, f), 'utf8'))
+      .join('\n')
+    expect(stiller).not.toMatch(/\.moonui-theme[^{]*\{[^}]*--(warning|error|background|card)/)
+  })
+})
+
+describe('#442 kaynak sözleşmesi — slider.tsx', () => {
+  it.each(AILELER)('track %s sınıfı `/20` alfasını KORUYOR (yedi varyantın ortak deseni)', (aile) => {
+    // Alternatif öneri track'i `/10`'a çekmekti; kabul edilmedi (track↔zemin
+    // ayrımını zayıflatır, ortak konvansiyonu bozar). Burası o kararı kilitler.
+    expect(varyantSinifi(TRACK_BLOK, aile)).toBe(`bg-${aile}/20`)
+  })
+
+  it.each(AILELER)('EKSEN A: range %s light\'ta -700, dark\'ta semantik token', (aile) => {
+    expect(varyantSinifi(RANGE_BLOK, aile)).toBe(
+      `bg-[rgb(var(--${aile}-700))] dark:bg-${aile}`
+    )
+  })
+
+  it.each(AILELER)('EKSEN B: thumb %s kenarlığı light\'ta -700, dark\'ta semantik token', (aile) => {
+    expect(varyantSinifi(THUMB_BLOK, aile)).toBe(
+      `border-[rgb(var(--${aile}-700))] dark:border-${aile} bg-background`
+    )
+  })
+
+  it('KAPSAM KİLİDİ: success ve primary DOKUNULMADI (ikisi de eşiği geçiyor)', () => {
+    // Gereksiz değişiklik yeni regresyon riski. Ölçüm: success A light 3.73 /
+    // dark 4.83 · primary A light 3.71 / dark 11.24 — ikisi de ≥3.
+    for (const aile of ['primary', 'success'] as const) {
+      expect(varyantSinifi(RANGE_BLOK, aile)).toBe(`bg-${aile}`)
+      expect(varyantSinifi(THUMB_BLOK, aile)).toBe(`border-${aile} bg-background`)
+    }
+  })
+})
+
+describe('#442 render sözleşmesi — <Slider />', () => {
+  it.each(AILELER)('%s: track eski token\'da, range yeni ifadeyle DOM\'a iniyor', (aile) => {
+    const { container } = render(
+      React.createElement(Slider, { trackVariant: aile, rangeVariant: aile })
+    )
+    const { track, range } = parcalar(container)
+    expect(track).toHaveClass(`bg-${aile}/20`)
+    expect(range.className).toContain(`bg-[rgb(var(--${aile}-700))]`)
+    expect(range.className).toContain(`dark:bg-${aile}`)
+    // Light'ta semantik token dolguya UYGULANMAMALI (track'in aynısıydı).
+    expect(range.className).not.toMatch(new RegExp(`(?:^|\\s)bg-${aile}(?:\\s|$)`))
+  })
+
+  it.each(AILELER)('%s: thumb kenarlığı yeni ifadeyle iniyor, dolgusu bg-background kalıyor', (aile) => {
+    const { container } = render(React.createElement(Slider, { thumbVariant: aile }))
+    const { thumb } = parcalar(container)
+    expect(thumb.className).toContain(`border-[rgb(var(--${aile}-700))]`)
+    expect(thumb.className).toContain(`dark:border-${aile}`)
+    expect(thumb.className).toContain('bg-background')
+    expect(thumb.className).not.toMatch(new RegExp(`(?:^|\\s)border-${aile}(?:\\s|$)`))
+  })
+
+  it.each(AILELER)('%s: thumbVariant düşüşü KORUNUYOR — tek prop track+range+thumb', (aile) => {
+    // `trackVariant || thumbVariant || "default"` ve `rangeVariant || thumbVariant ||
+    // "primary"` düşüşleri değişmedi; en yaygın kullanım bu yoldan geçer.
+    const { container } = render(React.createElement(Slider, { thumbVariant: aile }))
+    const { track, range, thumb } = parcalar(container)
+    expect(track).toHaveClass(`bg-${aile}/20`)
+    expect(range.className).toContain(`bg-[rgb(var(--${aile}-700))]`)
+    expect(thumb.className).toContain(`border-[rgb(var(--${aile}-700))]`)
+  })
+
+  it('rangeVariant açık verildiğinde thumbVariant’ı hâlâ eziyor', () => {
+    const { container } = render(
+      React.createElement(Slider, { thumbVariant: 'warning', rangeVariant: 'success' })
+    )
+    const { range, thumb } = parcalar(container)
+    expect(range.className).toContain('bg-success')
+    expect(range.className).not.toContain('--warning-700')
+    // Eksenler bağımsız: tutamaç kendi varyantını korur.
+    expect(thumb.className).toContain('border-[rgb(var(--warning-700))]')
+  })
+
+  it('diğer varyantlar ETKİLENMEDİ — primary range/thumb hâlâ token’larında', () => {
+    const { container } = render(
+      React.createElement(Slider, { rangeVariant: 'primary', thumbVariant: 'primary' })
+    )
+    const { range, thumb } = parcalar(container)
+    expect(range.className).toContain('bg-primary')
+    expect(thumb.className).toContain('border-primary')
+    expect(range.className).not.toContain('700')
+    expect(thumb.className).not.toContain('700')
+  })
+})
+
+describe.each(AILELER)('#442 %s — kabul kriteri ≥3:1 (WCAG 1.4.11)', (aile) => {
+  it.each(['light', 'dark'] as const)(
+    'EKSEN A (range↔track): %s temada TÜM zeminlerde geçiyor',
+    (blok) => {
+      // Ölçülen: warning light 4.235 · dark 6.97 (docs kartı 5.77)
+      //          error   light 4.950 · dark 4.46 (docs kartı 3.82)
+      const dolgu = rangeRengi(aile, blok)
+      for (const [ad, track] of trackler(aile, blok)) {
+        const oran = rgbKontrast(dolgu, track)
+        expect({ eksen: 'A', zemin: ad, gecti: oran >= 3.0 }).toEqual({
+          eksen: 'A',
+          zemin: ad,
+          gecti: true,
+        })
+      }
+    }
+  )
+
+  it.each(['light', 'dark'] as const)(
+    'EKSEN B (thumb kenarlığı↔zemin): %s temada TÜM zeminlerde geçiyor',
+    (blok) => {
+      // Ölçülen: warning light 4.923 · dark 9.45 (docs kartı 8.32)
+      //          error   light 6.470 · dark 5.33 (docs kartı 4.69)
+      const kenar = thumbKenarRengi(aile, blok)
+      for (const [ad, zemin] of zeminler(blok)) {
+        const oran = rgbKontrast(kenar, zemin)
+        expect({ eksen: 'B', zemin: ad, gecti: oran >= 3.0 }).toEqual({
+          eksen: 'B',
+          zemin: ad,
+          gecti: true,
+        })
+      }
+    }
+  )
+
+  it('ESKİ range (semantik token) LIGHT temada başarısızdı — bug’ın belgesi', () => {
+    // warning 1.835 · error 2.893. Düzeltmenin GEREKLİLİĞİNİ sabitler.
+    const eski = semantikRgb(aile, 'light')
+    for (const [, track] of trackler(aile, 'light')) {
+      expect(rgbKontrast(eski, track)).toBeLessThan(3.0)
+    }
+  })
+
+  it('DARK render DEĞİŞMEDİ — iki eksende de eski semantik token uygulanıyor', () => {
+    // Bulgu light'a özgüydü; düzeltmenin dark'ta hiçbir şeyi oynatmaması bilinçli
+    // bir kısıt (regresyon yüzeyini sıfıra indirir).
+    expect(rangeRengi(aile, 'dark')).toEqual(semantikRgb(aile, 'dark'))
+    expect(thumbKenarRengi(aile, 'dark')).toEqual(semantikRgb(aile, 'dark'))
+    for (const [, track] of trackler(aile, 'dark')) {
+      expect(rgbKontrast(semantikRgb(aile, 'dark'), track)).toBeGreaterThanOrEqual(3.0)
+    }
+  })
+
+  it('TEK RENK: light\'ta tutamaç kenarlığı ile range dolgusu AYNI renk', () => {
+    // #407'nin gerekçesi ("tutamaç ve dolgu tek renkte okunur") burada da geçerli
+    // ve `error` tutamacının NEDEN değiştirildiğinin kilidi: kontrastı zaten
+    // geçiyordu (3.781), ama range light'ta -700'e inince kenarlığı `border-error`
+    // bırakmak iki-tonlu bir görünüm üretirdi.
+    expect(thumbKenarRengi(aile, 'light')).toEqual(rangeRengi(aile, 'light'))
+    expect(thumbKenarRengi(aile, 'dark')).toEqual(rangeRengi(aile, 'dark'))
+  })
+})
+
+describe('#442 eksen B — ailelerin başlangıç durumu FARKLIYDI (kapsam kararının belgesi)', () => {
+  it('ESKİ thumb kenarlığı: warning LIGHT\'ta eşiğin ALTINDAYDI (2.133)', () => {
+    const eski = semantikRgb('warning', 'light')
+    for (const [, zemin] of zeminler('light')) {
+      expect(rgbKontrast(eski, zemin)).toBeLessThan(3.0)
+    }
+  })
+
+  it('ESKİ thumb kenarlığı: error LIGHT\'ta zaten geçiyordu (3.781) — değişim gerekçesi tutarlılık', () => {
+    // Dürüst kayıt: `error` tutamacı bir kontrast BUG'ı değildi. Aynı ifadeye
+    // çekilmesinin sebebi tek-renk tutarlılığı; ölçüm de düşmedi, yükseldi.
+    const eski = semantikRgb('error', 'light')
+    for (const [, zemin] of zeminler('light')) {
+      expect(rgbKontrast(eski, zemin)).toBeGreaterThanOrEqual(3.0)
+    }
+    const yeni = thumbKenarRengi('error', 'light')
+    expect(rgbKontrast(yeni, zeminler('light')[0][1])).toBeGreaterThan(
+      rgbKontrast(eski, zeminler('light')[0][1])
+    )
+  })
+})
+
+describe('#442 seçim gerekçesi — reddedilen alternatifler', () => {
+  it.each(AILELER)('TEMA-KÖR `-700` ataması %s varyantını DARK\'ta kırardı', (aile) => {
+    // Issue gövdesinin uyardığı refleks. -700 kademesi dark track'e karşı gerçek
+    // docs kartı zemininde eşiğin ALTINDA: warning 2.499 · error 2.232.
+    const k700 = rgbTokenRgb(tokenOku(`${aile}-700`, 'light')!)
+    const docsTrack = trackler(aile, 'dark').find(([ad]) => ad === 'gerçek kart #111827')![1]
+    expect(rgbKontrast(k700, docsTrack)).toBeLessThan(3.0)
+  })
+
+  it.each(AILELER)('#389\'un tek-orta-ton çözümü %s için UYGULANAMAZ — geçen kademe YOK', (aile) => {
+    // #389 dolguyu tek bir skala kademesine (`--secondary-500`) sabitleyip iki
+    // temayı birden geçebilmişti, çünkü `--secondary` temaya göre DEĞİŞİYOR.
+    // Burada semantik token sabit olduğundan track'ler birbirinden çok uzak:
+    // skalanın 11 kademesinin HİÇBİRİ tema-kör olarak iki temayı birden geçemiyor.
+    // Bu, `dark:` ayrımını zorunlu kılan kanıttır.
+    const tumTrackler = [...trackler(aile, 'light'), ...trackler(aile, 'dark')]
+    const gecen = KADEMELER.filter((k) => {
+      const ham = tokenOku(`${aile}-${k}`, 'light')
+      if (!ham) return false
+      const d = rgbTokenRgb(ham)
+      return tumTrackler.every(([, t]) => rgbKontrast(d, t) >= 3.0)
+    })
+    expect(gecen).toEqual([])
+  })
+
+  it.each(AILELER)('%s track alfası düşürülmedi — /20 ayrımı /10\'dan güçlü', (aile) => {
+    // Track'i `/10`'a çekmek dolgu↔track'i kazanırken track↔zemin'i harcardı:
+    // barın TOPLAM uzunluğu görünmezleşir.
+    const zemin = zeminler('light')[0][1]
+    const sem = semantikRgb(aile, 'light')
+    expect(rgbKontrast(alfaBileske(sem, 0.2, zemin), zemin)).toBeGreaterThan(
+      rgbKontrast(alfaBileske(sem, 0.1, zemin), zemin)
+    )
+  })
+})

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

@@ -124,10 +124,15 @@ describe('Slider Component', () => {
     })
 
     it('renders error range variant correctly', () => {
+      // #442: range light'ta artık `bg-error` DEĞİL — o token track'in
+      // (`bg-error/20`) aynısıydı, light'ta ayrım 2.89'a düşüyordu. Semantik
+      // token dark render'ı korumak için `dark:` altına taşındı.
+      // Gerekçe + kontrast hesabı: slider-warning-error-contrast.test.ts
       render(<Slider rangeVariant="error" data-testid="slider" />)
-      
-      const range = screen.getByTestId('slider').querySelector('.bg-error')
+
+      const range = screen.getByTestId('slider').querySelector('[class*="--error-700"]')
       expect(range).toBeInTheDocument()
+      expect(range).toHaveClass('dark:bg-error')
     })
   })
 
@@ -155,9 +160,12 @@ describe('Slider Component', () => {
 
     it('renders error thumb variant correctly', () => {
       render(<Slider thumbVariant="error" data-testid="slider" />)
-      
+
       const thumb = screen.getByRole('slider')
-      expect(thumb).toHaveClass('border-error')
+      // #442: kenarlık light'ta -700 kademesine indi, semantik token `dark:`
+      // altına taşındı (range ile tek renk). Ölçüm: slider-warning-error-contrast.test.ts
+      expect(thumb).toHaveClass('border-[rgb(var(--error-700))]')
+      expect(thumb).toHaveClass('dark:border-error')
     })
   })