@moontra/moonui 6.24.0 → 6.25.0

package/src/components/ui/__tests__/issue-649-button-aschild.test.tsx

@@ -0,0 +1,199 @@
+/**
+ * #649 — `Button.asChild` ölü ternary'den GERÇEK Radix `Slot` polimorfizmine.
+ *
+ * Kusur: `const Comp = asChild ? "button" : "button"` — ternary'nin iki dalı birebir
+ * aynıydı, yani prop tipte ve docs'ta vaat edilmesine rağmen HİÇBİR ŞEY yapmıyordu.
+ *
+ * ⚠️ Mevcut `button.test.tsx`'teki "renders as child component when asChild is true"
+ * testi bu kusuru YAKALAYAMIYORDU: kusurlu kodda `<a>` çocuğu native <button>'ın İÇİNE
+ * render ediliyordu, dolayısıyla `getByRole('link')` + `href` iddiaları YANLIŞ NEDENLE
+ * geçiyordu. Bu suite'in ayırt edici iddiası "<button> DOM'da BULUNMAMALI"dır — kusurlu
+ * kodda kırmızı, düzeltilmiş kodda yeşil.
+ *
+ * Ayrıca button'a özgü davranışların Slot dalındaki karşılıklarını kilitler:
+ *   · `loading` spinner'ı ve `leftIcon`/`rightIcon` çocuğun İÇİNE taşınır (`Slottable`).
+ *   · `disabled`/`loading` native `disabled` yerine `aria-disabled` + `data-disabled`
+ *     ile ifade edilir — <a>/<span> native `disabled`'ı TANIMAZ.
+ *   · Etkinleştirme (fare + klavye Enter, ikisi de click event'i üretir) engellenir.
+ *   · Çocuk geçerli bir element değilse native <button>'a geri düşülür (Slot tek
+ *     geçerli element ister; aksi hâlde SESSİZCE boş render ederdi).
+ */
+import * as React from 'react'
+import { render, screen, fireEvent, createEvent } from '@testing-library/react'
+import { Button } from '../button'
+
+describe('#649 Button asChild — Radix Slot polimorfizmi', () => {
+  it('asChild ile <a> render eder, native <button> ÜRETMEZ', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link', { name: /link button/i })
+    expect(link.tagName).toBe('A')
+    expect(link).toHaveAttribute('href', '/test')
+    // Ölü ternary'nin imzası: çocuk <a> bir <button>'ın içinde duruyordu.
+    expect(screen.queryByRole('button')).not.toBeInTheDocument()
+    expect(document.querySelector('button')).toBeNull()
+  })
+
+  it('buttonVariants sınıfları çocuğa geçer', () => {
+    render(
+      <Button asChild variant="destructive" size="lg" rounded="full">
+        <a href="/x">Sil</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('bg-destructive')
+    expect(link).toHaveClass('h-12')
+    expect(link).toHaveClass('rounded-full')
+    expect(link).toHaveClass('moonui-theme')
+  })
+
+  it("çocuğun kendi className'i korunur ve birleştirilir", () => {
+    render(
+      <Button asChild className="custom-class">
+        <a href="/x" className="child-class">
+          Git
+        </a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveClass('custom-class')
+    expect(link).toHaveClass('child-class')
+  })
+
+  it('loading spinner ve ikonlar çocuğun İÇİNE taşınır (Slottable)', () => {
+    render(
+      <Button
+        asChild
+        loading
+        leftIcon={<span data-testid="left-icon" />}
+        rightIcon={<span data-testid="right-icon" />}
+      >
+        <a href="/x">
+          <span data-testid="child-label">Yükleniyor</span>
+        </a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    // Çocuğun kendi içeriği korunur…
+    expect(link).toContainElement(screen.getByTestId('child-label'))
+    // …spinner de onun içine girer (Slot'un `Children.only` tuzağına düşmeden).
+    expect(link.querySelector('svg')).not.toBeNull()
+    expect(link).toHaveAttribute('data-loading', '')
+    expect(link).toHaveAttribute('aria-busy', 'true')
+    // loading, ikonları gizleme sözleşmesini asChild'da da korur.
+    expect(screen.queryByTestId('left-icon')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('right-icon')).not.toBeInTheDocument()
+  })
+
+  it('loading yokken leftIcon/rightIcon çocuğun içinde render edilir', () => {
+    render(
+      <Button
+        asChild
+        leftIcon={<span data-testid="left-icon" />}
+        rightIcon={<span data-testid="right-icon" />}
+      >
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toContainElement(screen.getByTestId('left-icon'))
+    expect(link).toContainElement(screen.getByTestId('right-icon'))
+  })
+
+  it('disabled: native `disabled` yerine aria-disabled + inert sınıflar verilir', () => {
+    render(
+      <Button asChild disabled>
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    // <a> native `disabled`ı tanımaz — DOM'a basılmamalı.
+    expect(link).not.toHaveAttribute('disabled')
+    expect(link).toHaveAttribute('aria-disabled', 'true')
+    expect(link).toHaveAttribute('data-disabled', '')
+    expect(link).toHaveClass('pointer-events-none')
+    expect(link).toHaveClass('opacity-50')
+  })
+
+  it('loading da asChild dalında aria-disabled üretir', () => {
+    render(
+      <Button asChild loading>
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('aria-disabled', 'true')
+    expect(link).not.toHaveAttribute('disabled')
+  })
+
+  it('devre dışıyken tıklama handler çağrılmaz ve gezinme iptal edilir', () => {
+    const handleClick = jest.fn()
+    render(
+      <Button asChild disabled onClick={handleClick}>
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    const link = screen.getByRole('link')
+    const clickEvent = createEvent.click(link)
+    fireEvent(link, clickEvent)
+
+    expect(handleClick).not.toHaveBeenCalled()
+    // <a> için preventDefault gezinmeyi durdurur (klavye Enter de click üretir).
+    expect(clickEvent.defaultPrevented).toBe(true)
+  })
+
+  it('devre dışı değilken onClick normal çalışır', () => {
+    const handleClick = jest.fn()
+    render(
+      <Button asChild onClick={handleClick}>
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    fireEvent.click(screen.getByRole('link'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('ref slot edilen elemana çözülür', () => {
+    const ref = React.createRef<HTMLElement>()
+    render(
+      <Button asChild ref={ref as React.Ref<HTMLButtonElement>}>
+        <a href="/x">Git</a>
+      </Button>
+    )
+
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('A')
+  })
+
+  it('çocuk geçerli element değilse native <button>a geri düşer (boş render YOK)', () => {
+    // Geriye dönük güvenlik: `asChild` bugüne dek etkisizdi, düz metinle yazan
+    // mevcut kullanım Slot'a düşseydi HİÇBİR ŞEY render etmezdi.
+    render(<Button asChild>Düz metin</Button>)
+
+    const button = screen.getByRole('button', { name: /düz metin/i })
+    expect(button.tagName).toBe('BUTTON')
+  })
+
+  it('asChild olmadan davranış DEĞİŞMEZ (native button + native disabled)', () => {
+    render(<Button disabled>Devre dışı</Button>)
+
+    const button = screen.getByRole('button')
+    expect(button.tagName).toBe('BUTTON')
+    expect(button).toBeDisabled()
+    // Slot dalına özgü öznitelikler normal dala SIZMAMALI.
+    expect(button).not.toHaveAttribute('aria-disabled')
+    expect(button).not.toHaveAttribute('data-disabled')
+  })
+})

package/src/components/ui/__tests__/issue-664-separator-dekoratif-rol.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * issue #664 — S4: `separator` dekoratif rolu (free ikiz).
+ *
+ * OLCULDU, KAYNAK DEGISTIRILMEDI. S4 tablosu `separator` icin
+ * "`decorative` → `role=\"none\"`" istiyordu; olcum bunun ZATEN saglandigini
+ * gosterdi:
+ *
+ *   - `separator.tsx` `decorative` varsayilanini `true` verip Radix'e geciriyor,
+ *   - `@radix-ui/react-separator@1.1.7` (`dist/index.js`) tam olarak sunu yapiyor:
+ *       `decorative ? { role: "none" } : { "aria-orientation": ariaOrientation }`
+ *
+ * Yani gerekli olan tek sey durumun KILITLENMESI: Radix surum yukseltmesi,
+ * `decorative` varsayilaninin degismesi ya da prop'un Radix'e gecirilmesinin
+ * unutulmasi bu testi kirmizi yapar.
+ *
+ * Pro ikizi ayni iddiayla kilitli:
+ *   packages/moonui-pro/src/__tests__/issue-664-s4-dekoratif-katmanlar.test.tsx
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Separator } from '../separator'
+
+describe('#664 S4 — Separator dekoratif rolu', () => {
+  it('varsayilan (dekoratif) → erisilebilirlik agacindan cikaran role="none"', () => {
+    const { container } = render(<Separator />)
+    expect(container.firstElementChild).toHaveAttribute('role', 'none')
+  })
+
+  it('`decorative={false}` → anlamli `role="separator"`', () => {
+    const { container } = render(<Separator decorative={false} />)
+    expect(container.firstElementChild).toHaveAttribute('role', 'separator')
+  })
+
+  it('dekoratif rol gorsel varyantlari ETKILEMEZ (regresyon kapisi)', () => {
+    const { container } = render(<Separator orientation="vertical" variant="dashed" />)
+    const el = container.firstElementChild as HTMLElement
+    expect(el).toHaveAttribute('role', 'none')
+    expect(el.className).toContain('border-dashed')
+  })
+})

package/src/components/ui/__tests__/preset-color-shadowing.test.ts

@@ -20,7 +20,7 @@ const extend = (preset as any).theme?.extend as Record<string, unknown> | undefi
 const colors = extend?.colors as Record<string, ColorValue> | undefined
 
 /** `border-*`, `text-*`, `bg-*` … ailelerini besleyen, renk gölgeleyebilen extend anahtarları */
-const RENK_AILELERI = [
+const COLOR_FAMILIES = [
   'borderColor',
   'textColor',
   'backgroundColor',
@@ -42,22 +42,22 @@ describe('tailwind preset — iç içe renk anahtarları gölgelenmiyor', () =>
   })
 
   it('hiçbir renk ailesi extend\'i, iç içe bir `colors` girdisini DÜZ STRING ile ezmiyor', () => {
-    const ihlaller: string[] = []
-    for (const aile of RENK_AILELERI) {
+    const violations: string[] = []
+    for (const aile of COLOR_FAMILIES) {
       const blok = extend?.[aile] as Record<string, ColorValue> | undefined
       if (!blok || typeof blok !== 'object') continue
-      for (const [isim, deger] of Object.entries(blok)) {
-        const asil = colors?.[isim]
-        if (asil && typeof asil === 'object' && typeof deger === 'string') {
-          const kayipAnahtarlar = Object.keys(asil).filter((k) => k !== 'DEFAULT')
-          ihlaller.push(
+      for (const [isim, value] of Object.entries(blok)) {
+        const original = colors?.[isim]
+        if (original && typeof original === 'object' && typeof value === 'string') {
+          const missingKeys = Object.keys(original).filter((k) => k !== 'DEFAULT')
+          violations.push(
             `theme.extend.${aile}.${isim} düz string → colors.${isim}'in ` +
-              `[${kayipAnahtarlar.join(', ')}] alt anahtarları ${aile} için ÖLÜ`
+              `[${missingKeys.join(', ')}] alt anahtarları ${aile} için ÖLÜ`
           )
         }
       }
     }
-    expect(ihlaller).toEqual([])
+    expect(violations).toEqual([])
   })
 
   it('semantik renklerin subtle alt anahtarları preset\'te tanımlı', () => {

package/src/components/ui/__tests__/primary-subtle-token.test.ts

@@ -21,12 +21,12 @@ const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
 const preset = fs.readFileSync(path.resolve(KOK, '../tailwind-preset.js'), '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 =
+function tokenOku(name: string, blok: 'light' | 'dark'): string | null {
+  const source =
     blok === 'dark'
       ? tokens.slice(tokens.indexOf('.dark'))
       : tokens.slice(0, tokens.indexOf('.dark'))
-  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
 }
 
 function hslToRgb(h: number, s: number, l: number): [number, number, number] {
@@ -41,7 +41,7 @@ function hslToRgb(h: number, s: number, l: number): [number, number, number] {
   return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
 }
 
-function bagilParlaklik([r, g, b]: [number, number, number]): number {
+function relativeLuminance([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)
@@ -50,12 +50,12 @@ function bagilParlaklik([r, g, b]: [number, number, number]): number {
 }
 
 function kontrast(a: string, b: string): number {
-  const ayrıştır = (v: string): [number, number, number] => {
+  const parse = (v: string): [number, number, number] => {
     const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
     return hslToRgb(h, s, l)
   }
-  const la = bagilParlaklik(ayrıştır(a))
-  const lb = bagilParlaklik(ayrıştır(b))
+  const la = relativeLuminance(parse(a))
+  const lb = relativeLuminance(parse(b))
   const [hi, lo] = la > lb ? [la, lb] : [lb, la]
   return (hi + 0.05) / (lo + 0.05)
 }

package/src/components/ui/__tests__/progress-secondary-contrast.test.ts

@@ -35,12 +35,12 @@ 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 =
+function tokenOku(name: string, blok: 'light' | 'dark'): string | null {
+  const source =
     blok === 'dark'
       ? tokens.slice(tokens.indexOf('.dark'))
       : tokens.slice(0, tokens.indexOf('.dark'))
-  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
 }
 
 function hslToRgb(h: number, s: number, l: number): [number, number, number] {
@@ -70,7 +70,7 @@ const rgbTokenRgb = (v: string): [number, number, number] => {
   return [p[0], p[1], p[2]]
 }
 
-function bagilParlaklik([r, g, b]: [number, number, number]): number {
+function relativeLuminance([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)
@@ -79,8 +79,8 @@ function bagilParlaklik([r, g, b]: [number, number, number]): number {
 }
 
 function rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
-  const la = bagilParlaklik(a)
-  const lb = bagilParlaklik(b)
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
   const [hi, lo] = la > lb ? [la, lb] : [lb, la]
   return (hi + 0.05) / (lo + 0.05)
 }
@@ -89,12 +89,12 @@ function rgbKontrast(a: [number, number, number], b: [number, number, number]):
 function alfaBileske(
   ust: [number, number, number],
   alfa: number,
-  zemin: [number, number, number]
+  backgroundVal: [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]),
+    Math.round(alfa * ust[0] + (1 - alfa) * backgroundVal[0]),
+    Math.round(alfa * ust[1] + (1 - alfa) * backgroundVal[1]),
+    Math.round(alfa * ust[2] + (1 - alfa) * backgroundVal[2]),
   ]
 }
 
@@ -103,20 +103,20 @@ function alfaBileske(
  * #284/#368 konvansiyonu: kontrast, --background'ın yanında bu gerçek yüzeye
  * göre de ölçülür (tokens.css --input notu).
  */
-const KART_GERCEK_DARK: [number, number, number] = [17, 24, 39]
+const CARD_ACTUAL_DARK: [number, number, number] = [17, 24, 39]
 
 /** Tema başına dolgu (secondary-500) ve track (secondary@%20 ∘ zemin) renkleri */
-function temaRenkleri(blok: 'light' | 'dark') {
-  const dolgu = rgbTokenRgb(tokenOku('secondary-500', 'light')!) // skala yalnız :root'ta — iki temada aynı
+function themeColors(blok: 'light' | 'dark') {
+  const fill = rgbTokenRgb(tokenOku('secondary-500', 'light')!) // skala yalnız :root'ta — iki temada aynı
   const secondary = hslTokenRgb(tokenOku('secondary', blok)!)
   const background = hslTokenRgb(tokenOku('background', blok)!)
   const card = hslTokenRgb(tokenOku('card', blok)!)
-  const zeminler: Array<[string, [number, number, number]]> = [
+  const backgrounds: Array<[string, [number, number, number]]> = [
     ['--background', background],
     ['--card', card],
   ]
-  if (blok === 'dark') zeminler.push(['gerçek kart #111827', KART_GERCEK_DARK])
-  return { dolgu, secondary, zeminler }
+  if (blok === 'dark') backgrounds.push(['gerçek kart #111827', CARD_ACTUAL_DARK])
+  return { fill, secondary, backgrounds }
 }
 
 describe('#372 progress secondary dolgu↔track kontrastı', () => {
@@ -143,14 +143,14 @@ describe('#372 progress secondary dolgu↔track kontrastı', () => {
   })
 
   describe('kaynak sözleşmesi: dolgu ile track FARKLI token’lara basıyor', () => {
-    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/progress.tsx'), 'utf8')
+    const source = fs.readFileSync(path.join(KOK, 'components/ui/progress.tsx'), 'utf8')
 
     it('track secondary sınıfı `bg-secondary/20` (issue seçenek 1 — değişmedi)', () => {
-      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+      expect(source).toMatch(/secondary:\s*"bg-secondary\/20"/)
     })
 
     it('dolgu secondary sınıfı `bg-[rgb(var(--secondary-500))]` (artık --secondary DEĞİL)', () => {
-      expect(kaynak).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
+      expect(source).toMatch(/secondary:\s*"bg-\[rgb\(var\(--secondary-500\)\)\]"/)
     })
   })
 
@@ -159,17 +159,17 @@ describe('#372 progress secondary dolgu↔track kontrastı', () => {
       render(React.createElement(Progress, { variant: 'secondary', value: 50 }))
       const track = screen.getByRole('progressbar')
       expect(track).toHaveClass('bg-secondary/20')
-      const dolgu = track.firstElementChild as HTMLElement
-      expect(dolgu).not.toBeNull()
-      expect(dolgu.className).toContain('bg-[rgb(var(--secondary-500))]')
-      expect(dolgu.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
+      const fill = track.firstElementChild as HTMLElement
+      expect(fill).not.toBeNull()
+      expect(fill.className).toContain('bg-[rgb(var(--secondary-500))]')
+      expect(fill.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
     })
 
     it('#318 düşüş mantığı KORUNUYOR — indicatorVariant hâlâ variant’ı ezer', () => {
       render(React.createElement(Progress, { variant: 'secondary', indicatorVariant: 'success', value: 50 }))
-      const dolgu = screen.getByRole('progressbar').firstElementChild as HTMLElement
-      expect(dolgu.className).toContain('bg-success')
-      expect(dolgu.className).not.toContain('bg-[rgb(var(--secondary-500))]')
+      const fill = screen.getByRole('progressbar').firstElementChild as HTMLElement
+      expect(fill.className).toContain('bg-success')
+      expect(fill.className).not.toContain('bg-[rgb(var(--secondary-500))]')
     })
   })
 
@@ -177,11 +177,11 @@ describe('#372 progress secondary dolgu↔track kontrastı', () => {
     it('YENİ dolgu (secondary-500), track’in her olası zemindeki bileşkesine ≥3:1', () => {
       // Ölçülen değerler: light 4.63 (--background=--card=beyaz) · dark 4.23
       // (--background=--card) / 3.83 (gerçek kart #111827).
-      const { dolgu, secondary, zeminler } = temaRenkleri(blok)
-      for (const [ad, zemin] of zeminler) {
-        const track = alfaBileske(secondary, 0.2, zemin)
-        const oran = rgbKontrast(dolgu, track)
-        expect({ zemin: ad, oran }).toEqual({ zemin: ad, oran: expect.any(Number) })
+      const { fill, secondary, backgrounds } = themeColors(blok)
+      for (const [name, backgroundVal] of backgrounds) {
+        const track = alfaBileske(secondary, 0.2, backgroundVal)
+        const oran = rgbKontrast(fill, track)
+        expect({ backgroundVal: name, oran }).toEqual({ backgroundVal: name, oran: expect.any(Number) })
         expect(oran).toBeGreaterThanOrEqual(3.0)
       }
     })
@@ -190,9 +190,9 @@ describe('#372 progress secondary dolgu↔track kontrastı', () => {
       // Biri dolguyu `bg-secondary`ye geri döndürürse bu test ona "eski değer
       // zaten görünmüyordu" diye değil, üstteki kriter testi kırmızıyla söyler;
       // burası ise düzeltmenin GEREKLİLİĞİNİ sabitler (light 1.02, dark ~1.0-1.5).
-      const { secondary, zeminler } = temaRenkleri(blok)
-      for (const [, zemin] of zeminler) {
-        const track = alfaBileske(secondary, 0.2, zemin)
+      const { secondary, backgrounds } = themeColors(blok)
+      for (const [, backgroundVal] of backgrounds) {
+        const track = alfaBileske(secondary, 0.2, backgroundVal)
         expect(rgbKontrast(secondary, track)).toBeLessThan(3.0)
       }
     })
@@ -204,15 +204,15 @@ describe('#372 progress secondary dolgu↔track kontrastı', () => {
     // kademe dark track'e (near-black) yetişemiyor. Komşu kademeler bunu kanıtlar.
     it('secondary-400 light temada eşiğin ALTINDA kalır (~2.50)', () => {
       const k400 = rgbTokenRgb(tokenOku('secondary-400', 'light')!)
-      const { secondary, zeminler } = temaRenkleri('light')
-      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      const { secondary, backgrounds } = themeColors('light')
+      const track = alfaBileske(secondary, 0.2, backgrounds[0][1])
       expect(rgbKontrast(k400, track)).toBeLessThan(3.0)
     })
 
     it('secondary-600 dark temada eşiğin ALTINDA kalır (~2.66)', () => {
       const k600 = rgbTokenRgb(tokenOku('secondary-600', 'light')!)
-      const { secondary, zeminler } = temaRenkleri('dark')
-      const track = alfaBileske(secondary, 0.2, zeminler[0][1])
+      const { secondary, backgrounds } = themeColors('dark')
+      const track = alfaBileske(secondary, 0.2, backgrounds[0][1])
       expect(rgbKontrast(k600, track)).toBeLessThan(3.0)
     })