@moontra/moonui 6.16.0 → 6.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.16.0",
+  "version": "6.17.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

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

@@ -0,0 +1,95 @@
+/**
+ * #354 — `--primary-subtle` token çifti ve kontrast değişmezi.
+ *
+ * BULGU: pro Sidebar'ın aktif öğesi `bg-primary/10 text-primary` kullanıyordu.
+ * Light temada bu bileşim **4.28:1** veriyor (WCAG AA metin için 4.5 ister) ve
+ * docs kabuğu bu Sidebar'ı kullandığı için ihlal HER sayfada basılıyordu.
+ * Dark tarafta `--primary` neredeyse beyaz olduğu için sorun yoktu (15.73:1).
+ *
+ * KÖK NEDEN: #313/#314/#323'te kurulan `--*-subtle` ailesi (yumuşak tint + koyu
+ * metin) `destructive/success/warning/info` için vardı ama **primary EKSİKTİ** —
+ * bu yüzden Sidebar ham `primary/10` kompozisyonuna düşmüştü.
+ *
+ * Bu test hem token'ların VARLIĞINI hem de KONTRAST oranlarını sabitler: değer
+ * değiştirilirse ve oran 4.5'in altına düşerse kırmızı olur.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOK = path.resolve(__dirname, '../../..')
+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 =
+    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))]
+}
+
+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 kontrast(a: string, b: string): number {
+  const ayrıştır = (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 [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+describe('#354 --primary-subtle token çifti', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift beklenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: kontrast fonksiyonu bozulursa aşağıdaki testler
+    // anlamsız sayılarla yeşil geçebilir. `--info-subtle` çifti tokens.css'te
+    // 9.52:1 diye belgelenmiş; hesaplayıcı onu yeniden üretmeli.
+    const oran = kontrast(tokenOku('info-subtle', 'light')!, tokenOku('info-subtle-foreground', 'light')!)
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada token çifti TANIMLI', (blok) => {
+    expect(tokenOku('primary-subtle', blok)).toBeTruthy()
+    expect(tokenOku('primary-subtle-foreground', blok)).toBeTruthy()
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada kontrast WCAG AA (4.5:1) geçiyor', (blok) => {
+    const oran = kontrast(tokenOku('primary-subtle', blok)!, tokenOku('primary-subtle-foreground', blok)!)
+    expect(oran).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('light zemin, bugünkü `primary/10` görünümünü KORUYOR', () => {
+    // Zemin değişirse aktif öğenin görünümü değişir; bu bilinçli bir karar olmalı.
+    // #e7f0fe = beyaz üstüne %10 primary.
+    expect(tokenOku('primary-subtle', 'light')).toBe('217 92% 95%')
+  })
+
+  it('preset sınıfları ÜRETİYOR (token tanımlamak yetmez)', () => {
+    // Bu oturumda `theme.extend.borderColor`ın nested renkleri GÖLGELEDİĞİ ve
+    // sınıfın sessizce hiç CSS üretmediği görülmüştü (#313/#314/#323).
+    expect(preset).toContain('hsl(var(--primary-subtle) / <alpha-value>)')
+    expect(preset).toContain('hsl(var(--primary-subtle-foreground) / <alpha-value>)')
+  })
+})

package/src/styles/tokens.css

@@ -199,6 +199,17 @@
   --info-subtle: 214 100% 97%;
   --info-subtle-foreground: 224 64% 33%;             /* 9.52:1 */
 
+  /* #354: `primary` ailesi bu listede EKSİKTİ. Pro Sidebar'ın aktif öğesi
+     "primary metin + primary/10 zemin" deseni kullanıyordu; light temada bu
+     4.28:1 veriyor (gereken 4.5) — yani docs kabuğu her sayfada bir WCAG AA
+     ihlali basıyordu. Dark tarafta `--primary` neredeyse beyaz olduğu için
+     sorun yoktu (15.73:1, ölçüldü).
+
+     Zemin, bugünkü `primary/10` bileşiminin BİREBİR HSL karşılığı (beyaz üstüne
+     %10 primary = #e7f0fe) → görünüm DEĞİŞMEZ, yalnız metin koyulaşır. */
+  --primary-subtle: 217 92% 95%;
+  --primary-subtle-foreground: 217.2 91.2% 40%;      /* 6.21:1 */
+
   --primary-50: 240 249 255;
 
   /* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
@@ -474,6 +485,12 @@
   --warning-subtle-foreground: 34 100% 92%;          /* 14.43:1 */
   --info-subtle: 217 80% 13%;
   --info-subtle-foreground: 214 95% 93%;             /* 14.11:1 */
+
+  /* #354: koyu temada mevcut görünüm KORUNUYOR — bugünkü bileşimin birebir
+     karşılığı (near-white/10 near-black üstüne). Dark zaten geçiyordu; buradaki
+     amaç token ailesini tamamlamak, dark'ın rengini değiştirmek değil. */
+  --primary-subtle: 225 18% 13%;
+  --primary-subtle-foreground: 210 40% 98%;          /* 15.73:1 */
   --border: 216 34% 17%;
   /* #284: koyu temada form kontrolü kenarlığı 1.36 idi -> 40% ile ~3.1.
      Not: --input switch.tsx:27'de kapalı track ZEMİNİ olarak da kullanılıyor;

package/tailwind-preset.js

@@ -76,6 +76,13 @@ module.exports = {
         primary: {
           DEFAULT: "hsl(var(--primary) / <alpha-value>)",
           foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+          // #354: `primary` yumuşak-ton yüzeyi — `bg-primary-subtle` +
+          // `text-primary-subtle-foreground`. Aile destructive/success/warning/
+          // info için vardı, primary EKSİKTİ ve pro Sidebar'ın aktif öğesi bu
+          // yüzden ham `primary/10` kompozisyonuna düşüp light temada 4.28:1
+          // veriyordu.
+          subtle: "hsl(var(--primary-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--primary-subtle-foreground) / <alpha-value>)",
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary) / <alpha-value>)",