@moontra/moonui 6.24.0 → 6.25.0

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

@@ -40,12 +40,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] {
@@ -75,7 +75,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)
@@ -84,8 +84,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)
 }
@@ -94,12 +94,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]),
   ]
 }
 
@@ -108,24 +108,24 @@ 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 range (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 }
 }
 
 /** Slider DOM'u: kök > .moonui-theme > track > range (thumb'lar track'ten SONRA) */
-function parcalar(container: HTMLElement) {
+function parts(container: HTMLElement) {
   const kabuk = container.querySelector('.moonui-theme') as HTMLElement
   expect(kabuk).not.toBeNull()
   const track = kabuk.firstElementChild as HTMLElement
@@ -158,23 +158,23 @@ describe('#389 slider secondary range↔track kontrastı', () => {
   })
 
   describe('kaynak sözleşmesi: range ile track FARKLI token’lara basıyor', () => {
-    const kaynak = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
+    const source = fs.readFileSync(path.join(KOK, 'components/ui/slider.tsx'), 'utf8')
 
     it('track secondary sınıfı `bg-secondary/20` (değişmedi)', () => {
-      expect(kaynak).toMatch(/secondary:\s*"bg-secondary\/20"/)
+      expect(source).toMatch(/secondary:\s*"bg-secondary\/20"/)
     })
 
     it('range 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\)\)\]"/)
     })
 
     it('#407: thumb secondary sınıfı `border-[rgb(var(--secondary-500))] bg-background`', () => {
       // AYRI EKSEN (aşağıdaki "#407 thumb kenarlığı" bloğuna bakınız): #389 yalnız
       // range↔track eksenini kapsıyordu, tutamacın kenarlığı bilerek dışarıda kalmıştı.
-      expect(kaynak).toMatch(
+      expect(source).toMatch(
         /secondary:\s*"border-\[rgb\(var\(--secondary-500\)\)\] bg-background"/
       )
-      expect(kaynak).not.toMatch(/secondary:\s*"border-secondary bg-background"/)
+      expect(source).not.toMatch(/secondary:\s*"border-secondary bg-background"/)
     })
 
     it('zemin denkliği: `.moonui-theme` paket CSS’inde token yeniden tanımlamıyor', () => {
@@ -182,13 +182,13 @@ describe('#389 slider secondary range↔track kontrastı', () => {
       // --background/--card olduğunu VARSAYAR. Biri `.moonui-theme`i token
       // kapsamına çevirirse (ör. `.moonui-theme { --secondary: ... }`) hesap
       // sessizce yanlışlanır — o an bu test kırmızı olur.
-      const stilDizini = path.join(KOK, 'styles')
-      const stiller = fs
-        .readdirSync(stilDizini)
+      const styleDir = path.join(KOK, 'styles')
+      const styles = fs
+        .readdirSync(styleDir)
         .filter((f) => f.endsWith('.css'))
-        .map((f) => fs.readFileSync(path.join(stilDizini, f), 'utf8'))
+        .map((f) => fs.readFileSync(path.join(styleDir, f), 'utf8'))
         .join('\n')
-      expect(stiller).not.toMatch(/\.moonui-theme[^{]*\{[^}]*--secondary/)
+      expect(styles).not.toMatch(/\.moonui-theme[^{]*\{[^}]*--secondary/)
     })
   })
 
@@ -197,7 +197,7 @@ describe('#389 slider secondary range↔track kontrastı', () => {
       const { container } = render(
         React.createElement(Slider, { trackVariant: 'secondary', rangeVariant: 'secondary' })
       )
-      const { track, range } = parcalar(container)
+      const { track, range } = parts(container)
       expect(track).toHaveClass('bg-secondary/20')
       expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
       expect(range.className).not.toMatch(/(?:^|\s)bg-secondary(?:\s|$)/)
@@ -208,7 +208,7 @@ describe('#389 slider secondary range↔track kontrastı', () => {
       // `rangeVariant || thumbVariant || "primary"` düşüşleri değişmedi;
       // en yaygın kullanım (<Slider thumbVariant="secondary" />) bu yoldan geçer.
       const { container } = render(React.createElement(Slider, { thumbVariant: 'secondary' }))
-      const { track, range } = parcalar(container)
+      const { track, range } = parts(container)
       expect(track).toHaveClass('bg-secondary/20')
       expect(range.className).toContain('bg-[rgb(var(--secondary-500))]')
     })
@@ -217,14 +217,14 @@ describe('#389 slider secondary range↔track kontrastı', () => {
       const { container } = render(
         React.createElement(Slider, { thumbVariant: 'secondary', rangeVariant: 'success' })
       )
-      const { range } = parcalar(container)
+      const { range } = parts(container)
       expect(range.className).toContain('bg-success')
       expect(range.className).not.toContain('bg-[rgb(var(--secondary-500))]')
     })
 
     it('diğer varyantlar ETKİLENMEDİ — primary range hâlâ `bg-primary`', () => {
       const { container } = render(React.createElement(Slider, { rangeVariant: 'primary' }))
-      const { range } = parcalar(container)
+      const { range } = parts(container)
       expect(range.className).toContain('bg-primary')
       expect(range.className).not.toContain('secondary')
     })
@@ -234,11 +234,11 @@ describe('#389 slider secondary range↔track kontrastı', () => {
     it('YENİ range (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)
       }
     })
@@ -246,9 +246,9 @@ describe('#389 slider secondary range↔track kontrastı', () => {
     it('ESKİ range (bg-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
       // Düzeltmenin GEREKLİLİĞİNİ sabitler: eski değer üç zeminde de eşiğin
       // çok altındaydı (light 1.12 · dark 1.01 · gerçek kart 1.10).
-      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)
       }
     })
@@ -260,15 +260,15 @@ describe('#389 slider secondary range↔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)
     })
 
@@ -276,16 +276,16 @@ describe('#389 slider secondary range↔track kontrastı', () => {
       // Tek testte tüm skalayı tarayıp "geçen kademe kümesi = {500}" iddiasını
       // kilitler; ileride skala değerleri değişirse burası kırmızı olur.
       const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-      const gecenler = kademeler.filter((k) => {
-        const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+      const passingOnes = kademeler.filter((k) => {
+        const color = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
         return (['light', 'dark'] as const).every((blok) => {
-          const { secondary, zeminler } = temaRenkleri(blok)
-          return zeminler.every(
-            ([, zemin]) => rgbKontrast(renk, alfaBileske(secondary, 0.2, zemin)) >= 3.0
+          const { secondary, backgrounds } = themeColors(blok)
+          return backgrounds.every(
+            ([, backgroundVal]) => rgbKontrast(color, alfaBileske(secondary, 0.2, backgroundVal)) >= 3.0
           )
         })
       })
-      expect(gecenler).toEqual([500])
+      expect(passingOnes).toEqual([500])
     })
 
     it('secondary-foreground kontrastı GEÇERDİ ama primary klonu üretirdi — kilit', () => {
@@ -343,18 +343,18 @@ describe('#407 slider secondary thumb kenarlığı ↔ zemin kontrastı', () =>
   describe.each(['light', 'dark'] as const)('%s tema — kabul kriteri ≥3:1', (blok) => {
     it('YENİ kenarlık (secondary-500) her zemine ≥3:1', () => {
       // Ölçülen: light 4.76 · dark 4.23 (gerçek kart #111827 üstünde 3.73).
-      const { dolgu, zeminler } = temaRenkleri(blok)
-      for (const [ad, zemin] of zeminler) {
-        const oran = rgbKontrast(dolgu, zemin)
-        expect({ zemin: ad, gecti: oran >= 3.0 }).toEqual({ zemin: ad, gecti: true })
+      const { fill, backgrounds } = themeColors(blok)
+      for (const [name, backgroundVal] of backgrounds) {
+        const oran = rgbKontrast(fill, backgroundVal)
+        expect({ backgroundVal: name, didPass: oran >= 3.0 }).toEqual({ backgroundVal: name, didPass: true })
       }
     })
 
     it('ESKİ kenarlık (border-secondary) aynı ölçümde başarısızdı — bug’ın belgesi', () => {
       // light 1.15 · dark 1.01 · gerçek kart 1.13 — tutamaç fiilen görünmüyordu.
-      const { secondary, zeminler } = temaRenkleri(blok)
-      for (const [, zemin] of zeminler) {
-        expect(rgbKontrast(secondary, zemin)).toBeLessThan(3.0)
+      const { secondary, backgrounds } = themeColors(blok)
+      for (const [, backgroundVal] of backgrounds) {
+        expect(rgbKontrast(secondary, backgroundVal)).toBeLessThan(3.0)
       }
     })
   })
@@ -364,12 +364,12 @@ describe('#407 slider secondary thumb kenarlığı ↔ zemin kontrastı', () =>
     // alfa katmanı olmayan zemin, %20 alfa track'e çok yakın parlaklıkta olduğundan
     // geçerli bant neredeyse aynıdır. Yine de bağımsız olarak taranır.
     const kademeler = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-    const gecenler = kademeler.filter((k) => {
-      const renk = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
+    const passingOnes = kademeler.filter((k) => {
+      const color = rgbTokenRgb(tokenOku(`secondary-${k}`, 'light')!)
       return (['light', 'dark'] as const).every((blok) =>
-        temaRenkleri(blok).zeminler.every(([, zemin]) => rgbKontrast(renk, zemin) >= 3.0)
+        themeColors(blok).backgrounds.every(([, backgroundVal]) => rgbKontrast(color, backgroundVal) >= 3.0)
       )
     })
-    expect(gecenler).toEqual([500])
+    expect(passingOnes).toEqual([500])
   })
 })