@moontra/moonui 6.26.0 → 6.28.0

package/package.json

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

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

@@ -43,23 +43,23 @@ describe('Alert Components', () => {
       it('renders primary variant correctly', () => {
         render(<Alert variant="primary" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-primary/10')
-        expect(alert).toHaveClass('text-primary')
+        expect(alert).toHaveClass('bg-primary-subtle')
+        expect(alert).toHaveClass('text-primary-subtle-foreground')
         expect(alert).toHaveClass('border-primary/30')
       })
 
       it('renders success variant correctly', () => {
         render(<Alert variant="success" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-success/10')
-        expect(alert).toHaveClass('text-success')
+        expect(alert).toHaveClass('bg-success-subtle')
+        expect(alert).toHaveClass('text-success-subtle-foreground')
         expect(alert).toHaveClass('border-success/30')
       })
 
       it('renders warning variant correctly', () => {
         render(<Alert variant="warning" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-warning/10')
+        expect(alert).toHaveClass('bg-warning-subtle')
         // #630: metin `text-warning` idi ve `bg-warning/10` zemininde 1.98:1 ölçüldü —
         // AA'nın (4.5) çok altında. Yüzey rengi (`--warning`) DEĞİŞMEDİ; yalnız metin
         // aynı ailenin yüzey-üstü tonuna taşındı: 8.65 (light) / 15.71 (dark).
@@ -70,16 +70,16 @@ describe('Alert Components', () => {
       it('renders error variant correctly', () => {
         render(<Alert variant="error" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-destructive/10')
-        expect(alert).toHaveClass('text-destructive')
+        expect(alert).toHaveClass('bg-destructive-subtle')
+        expect(alert).toHaveClass('text-destructive-subtle-foreground')
         expect(alert).toHaveClass('border-destructive/30')
       })
 
       it('renders info variant correctly', () => {
         render(<Alert variant="info" data-testid="alert">Test</Alert>)
         const alert = screen.getByTestId('alert')
-        expect(alert).toHaveClass('bg-info/10')
-        expect(alert).toHaveClass('text-info')
+        expect(alert).toHaveClass('bg-info-subtle')
+        expect(alert).toHaveClass('text-info-subtle-foreground')
         expect(alert).toHaveClass('border-info/30')
       })
 
@@ -377,7 +377,7 @@ describe('Alert Components', () => {
       const description = screen.getByTestId('alert-description')
       expect(description).toHaveClass('text-sm')
       expect(description).toHaveClass('leading-5')
-      expect(description).toHaveClass('text-muted-foreground')
+      expect(description).toHaveClass('text-current')
     })
 
     it('forwards ref correctly', () => {
@@ -407,7 +407,7 @@ describe('Alert Components', () => {
       )
       
       const alert = screen.getByTestId('alert')
-      expect(alert).toHaveClass('bg-success/10')
+      expect(alert).toHaveClass('bg-success-subtle')
       expect(alert).toHaveClass('py-4')
       
       expect(screen.getByText('Success!')).toBeInTheDocument()
@@ -432,7 +432,7 @@ describe('Alert Components', () => {
       )
       
       const alert = screen.getByTestId('alert')
-      expect(alert).toHaveClass('bg-destructive/10')
+      expect(alert).toHaveClass('bg-destructive-subtle')
       expect(alert).toHaveClass('py-2')
       expect(alert).toHaveClass('rounded-lg')
       expect(alert).toHaveClass('pr-10')

package/src/components/ui/__tests__/dark-token-contrast.test.ts

@@ -149,11 +149,17 @@ describe('#368 koyu tema token kontrastları', () => {
     })
   })
 
-  describe('kabul kriteri: AÇIK tema değerleri DEĞİŞMEDİ', () => {
+  // Bu blok #368'in KAPSAM kriteriydi: koyu tema düzeltilirken açık tema
+  // değerlerine dokunulmadığını kanıtlıyordu. Kalıcı bir "asla değişmez" kuralı
+  // DEĞİL — açık temanın kendi kontrast denetimi bu değerleri bilinçli olarak
+  // değiştirebilir. `--muted-foreground` 45% → 42% böyle güncellendi: #284 onu
+  // yalnız --muted/--background yüzeylerine göre ayarlamıştı, --secondary
+  // (#ebeff5) üstünde gerçek render'da 4.42 ölçüldü (AA 4.5 ister).
+  describe('kabul kriteri: AÇIK tema değerleri', () => {
     it.each([
       ['destructive', '0 84.2% 48%'],
       ['muted', '217.2 32.6% 96%'],
-      ['muted-foreground', '215.4 16.3% 45%'],
+      ['muted-foreground', '215.4 16.3% 42%'],
       ['primary', '217.2 91.2% 51%'],
     ])('--%s açık temada sabit: %s', (name, expected) => {
       expect(tokenOku(name, 'light')).toBe(expected)

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

@@ -387,11 +387,11 @@ describe('Select Components', () => {
 
       rerender(<SelectItem value="item1" variant="destructive">Item</SelectItem>)
       item = screen.getByTestId('select-item')
-      expect(item).toHaveClass('text-error')
+      expect(item).toHaveClass('text-destructive-subtle-foreground')
 
       rerender(<SelectItem value="item1" variant="success">Item</SelectItem>)
       item = screen.getByTestId('select-item')
-      expect(item).toHaveClass('text-success')
+      expect(item).toHaveClass('text-success-subtle-foreground')
 
       // #623: `text-warning` (DEFAULT token) açık temada beyaz zeminde 2.14:1 ölçüldü —
       // AA'nın (4.5) ve hatta büyük-metin eşiğinin (3.0) altında. `--warning` aynı zamanda
@@ -639,7 +639,7 @@ describe('Select Components', () => {
 
       const item = screen.getByTestId('select-item')
       expect(item).toHaveClass('py-2')
-      expect(item).toHaveClass('text-success')
+      expect(item).toHaveClass('text-success-subtle-foreground')
       expect(item).toHaveClass('custom-item')
       expect(screen.getByTestId('right-icon')).toBeInTheDocument()
       expect(screen.getByTestId('custom-indicator')).toBeInTheDocument()

package/src/components/ui/alert.tsx

@@ -19,14 +19,22 @@ const alertVariants = cva(
         variants: {
             variant: {
                 default: "bg-background text-foreground border-border",
-                primary: "bg-primary/10 text-primary border-primary/30",
-                success: "bg-success/10 text-success border-success/30",
-                warning: "bg-warning/10 text-warning-subtle-foreground border-warning/30",
-                error: "bg-destructive/10 text-destructive border-destructive/30",
+                // KONTRAST (açık tema): metin rengi ham `text-X` DEĞİL,
+                // `text-X-subtle-foreground` olmalı. `bg-X/10 + text-X` deseni
+                // açık temada ölçülen 4.11–4.45 veriyor ve WCAG AA eşiğini
+                // (4.5) geçmiyor. `-subtle-foreground` token'ları aynı yüzey
+                // için 8.20–9.52 sağlıyor (tokens.css'te oranlar yazılı) ve
+                // `bg-X-subtle`, `bg-X/10` ile AYNI görünümü verir
+                // (tokens.css:217) → görsel kimlik değişmez, yalnız metin
+                // koyulaşır. `warning` bu düzeltmeyi zaten taşıyordu.
+                primary: "bg-primary-subtle text-primary-subtle-foreground border-primary/30",
+                success: "bg-success-subtle text-success-subtle-foreground border-success/30",
+                warning: "bg-warning-subtle text-warning-subtle-foreground border-warning/30",
+                error: "bg-destructive-subtle text-destructive-subtle-foreground border-destructive/30",
                 // `--info` token'ı (tokens.css) blue-500 ile birebir aynı değeri
                 // taşır → görsel değişiklik yok, ancak varyant artık temaya ve
                 // karanlık moda duyarlı. Kardeş varyantlarla simetrik.
-                info: "bg-info/10 text-info border-info/30",
+                info: "bg-info-subtle text-info-subtle-foreground border-info/30",
             },
             size: {
                 sm: "py-2 text-xs",
@@ -174,7 +182,12 @@ const AlertDescription = React.forwardRef<
         ref={ref}
         className={cn(
             "moonui-theme",
-            "text-sm leading-5 text-muted-foreground",
+            // KONTRAST: sabit `text-muted-foreground` (#606f85) renkli varyant
+            // yüzeylerinde 4.31–4.48 veriyordu — başlık düzelse bile açıklama
+            // satırı eşiğin altında kalıyordu. `text-current` varyantın
+            // `-subtle-foreground` rengini miras alır; hiyerarşi renk yerine
+            // ağırlıkla (başlık `font-semibold`) ve hafif opaklıkla korunur.
+            "text-sm leading-5 text-current opacity-90",
             className
         )}
         {...props}

package/src/components/ui/button.tsx

@@ -131,7 +131,12 @@ const buttonVariants = cva(
           "transition-all duration-300",
         ],
         soft: [
-          "bg-primary/10 text-primary",
+          // #686: açık temada `bg-primary/10` + `text-primary` 4.28 veriyordu
+          // (gereken 4.5) — #354'ün sidebar'da ölçtüğü rakamın birebir aynısı.
+          // Aynı çözüm: subtle token ÇİFTİ. Zemin görsel olarak neredeyse aynı
+          // kalır, metin koyulaşır → 6.21. Hover/active zeminleri korundu;
+          // yeni metin rengiyle ölçüldüler: 5.65 ve 5.02 (ikisi de AA üstü).
+          "bg-primary-subtle text-primary-subtle-foreground",
           "hover:bg-primary/20",
           "active:bg-primary/30",
           "focus-visible:ring-primary/50",
@@ -156,8 +161,14 @@ const buttonVariants = cva(
           "transition-all duration-200",
         ],
         neon: [
-          "bg-transparent text-green-400",
-          "border-2 border-green-400",
+          // #686: `text-green-400` (#4ade80) şeffaf zeminde doğrudan sayfa
+          // arkaplanına düşüyor → açık temada 1.74 (gereken 4.5). Ölçümle geçen
+          // en açık kademe green-700 (5.02); -600 hâlâ 3.3.
+          // Koyu tema DEĞİŞMEDİ: neon estetiği orada zaten 11.56 ile geçiyor.
+          // Çerçeve de metinle aynı kademeye çekildi (WCAG 1.4.11 non-text 3:1).
+          "bg-transparent text-green-700 dark:text-green-400",
+          "border-2 border-green-700 dark:border-green-400",
+          // hover zemini parlak yeşile dönüyor + metin gray-900 → 10.18, korundu.
           "hover:bg-green-400 hover:text-gray-900",
           // #664 S3: rgba(74,222,128,…) → --glow-green-rgb (tokens.css), piksel-özdeş.
           "hover:shadow-[0_0_30px_rgba(var(--glow-green-rgb),0.6)]",

package/src/components/ui/select.tsx

@@ -295,8 +295,8 @@ const SelectItem = React.forwardRef<
       /* Color variants */
       variant === "default" && "focus:bg-accent focus:text-accent-foreground dark:focus:bg-gray-700 dark:focus:text-gray-100",
       variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
-      variant === "destructive" && "text-error dark:text-red-400 focus:bg-error/10 dark:focus:bg-red-900/20 focus:text-error dark:focus:text-red-300",
-      variant === "success" && "text-success focus:bg-success/10 focus:text-success",
+      variant === "destructive" && "text-destructive-subtle-foreground focus:bg-destructive-subtle focus:text-destructive-subtle-foreground",
+      variant === "success" && "text-success-subtle-foreground focus:bg-success-subtle focus:text-success-subtle-foreground",
       variant === "warning" && "text-warning-700 dark:text-warning-500 focus:bg-warning/10 focus:text-warning-700 dark:focus:text-warning-500",
       
       className

package/src/styles/tokens.css

@@ -136,14 +136,27 @@
      oradaki koyu foreground DOĞRU ve değiştirilmedi.) */
   --primary-foreground: 210 40% 98%;
   --secondary: 217.2 32.6% 94%;
-  /* #284: --secondary rozetinde metin rolünde 4.26 (AA altı) idi -> 49% ile 4.54.
+  /* #284: --secondary rozetinde metin rolünde 4.26 (AA altı) idi -> 49%.
      --primary 51%te KALIR: o token zemin rolünde ve beyaz metinle 4.70 taşıyor.
-     Aynı mavinin rolüne göre ayrışması --success (#280) ile aynı desendir. */
-  --secondary-foreground: 217.2 91.2% 49%;
+     Aynı mavinin rolüne göre ayrışması --success (#280) ile aynı desendir.
+
+     %49 YETMEDİ — 44%'e çekildi. #284'ün hesabı 4.54 diyordu, ama gerçek
+     tarayıcı render'ı axe-core ile 4.45 ölçüldü (eşik 4.5): teorik HSL→RGB
+     hesabı ile tarayıcının ürettiği renk sınırda ayrışıyor (hesap rgb(11,98,239),
+     render #0e64ef). DERS: 4.5–4.6 aralığındaki "geçti" sonuçlarına güvenme,
+     gerçek render'da ölç. 44% teorik 5.37 verir ve ölçümde de geçer. */
+  --secondary-foreground: 217.2 91.2% 44%;
   --muted: 217.2 32.6% 96%;
   /* #284: --muted zemininde 4.31 (AA altı) idi -> 45% ile 4.56.
-     --background üzerinde zaten 4.76 geçiyordu; kırılan yüzey bg-muted (kbd). */
-  --muted-foreground: 215.4 16.3% 45%;
+     --background üzerinde zaten 4.76 geçiyordu; kırılan yüzey bg-muted (kbd).
+
+     %45 de YETMEDİ — 42%'ye çekildi. #284 yalnız --muted ve --background
+     yüzeylerine bakmış; --secondary (#ebeff5) HESABA KATILMAMIŞTI ve orada
+     gerçek render'da 4.42 ölçüldü (docs/components/card, "Secondary surface").
+     42% üç yüzeyde de geçer: secondary 4.90 · muted 5.13 · background 5.66.
+     Kademe seçiminde teorik hesabın gerçek render'dan ~0.1 yüksek çıktığı
+     gözlendi (bkz. --secondary-foreground notu), o yüzden sınıra yaslanılmadı. */
+  --muted-foreground: 215.4 16.3% 42%;
   --accent: 217.2 32.6% 94%;
   /* #647: --accent-foreground 51% idi -> 4.26 (AA 4.5 altı). Zemin (--accent, 94%)
      --secondary ile BİREBİR aynı token değeri; #284'ün --secondary-foreground'da