@moontra/moonui 6.27.0 → 6.29.0

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,20 +387,30 @@ 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
       // `bg-warning` yüzeylerinde kullanıldığı için token'ın kendisi DEĞİŞTİRİLMEDİ;
-      // metin rengi ölçülmüş bir light/dark çiftine taşındı: 4.92 (light) / 10.51 (dark).
+      // metin rengi ham kademe ikilisine taşınmıştı: 4.92 (light) / 10.51 (dark).
+      //
+      // Kalite koşusu 12 (#710 sınıfı): kardeş varyantlar `destructive` ve `success`
+      // `-subtle` token ailesine geçirilmişti, `warning` bu göçün DIŞINDA kalmıştı.
+      // Artık hizalandı. İki kazanım:
+      //   1. Kontrast 4.92 → 8.83 (light) / 10.51 → 14.43 (dark) — tokens.css'te yazılı
+      //   2. `dark:` override KALKTI: token zaten tema duyarlı olduğu için gereksizdi,
+      //      üstelik `dark:` sınıfı tüketicinin kendi rengini eziyordu (#715'in kök nedeni)
+      // Aşağıdaki `not.toHaveClass` bilinçli bir regresyon kilidi — ham kademeye
+      // ya da `dark:` override'ına geri dönüş bu testi kırar.
       rerender(<SelectItem value="item1" variant="warning">Item</SelectItem>)
       item = screen.getByTestId('select-item')
-      expect(item).toHaveClass('text-warning-700')
-      expect(item).toHaveClass('dark:text-warning-500')
+      expect(item).toHaveClass('text-warning-subtle-foreground')
+      expect(item).not.toHaveClass('text-warning-700')
+      expect(item).not.toHaveClass('dark:text-warning-500')
     })
 
     it('applies size classes correctly', () => {
@@ -639,7 +649,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/badge.tsx

@@ -48,12 +48,36 @@ const badgeVariants = cva(
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
           "dark:bg-gray-700/50 dark:text-gray-50 dark:shadow-inner dark:shadow-gray-950/10",
         ],
+        // #708 kalem 3: `outline` varyantı TÜKETİCİYİ EZİYORDU — #715'in `button`da
+        // kapattığı deliğin birebir aynısı. `cn()` = `twMerge(clsx(...))`; tüketici
+        // `className="text-white"` yazınca twMerge ÖNEKSİZ `text-foreground`u eler,
+        // ama `dark:text-gray-100` AYRI modifier grubu olduğu için ELENMEZ ve koyu
+        // temada özgüllükle kazanır: (0,2,0) > (0,1,0).
+        //
+        // Ölçülen sonuç (docs "PRO" rozeti, `from-brand-600 to-brand-accent-600`
+        // gradyanı üstünde, `text-xs` = küçük metin → AA 4.5:1):
+        //   light  beyaz    → en kötü uç 4.60  ✓   (tüketicinin istediği renk)
+        //   dark   gray-100 → en kötü uç 4.18  ✗   (varyantın dayattığı renk)
+        // A18-V 10/10 sayfada ölçtü; axe bunu `violations`a HİÇ yazmıyor (gradyan
+        // zemin → `incomplete` kovası), bu yüzden 11 koşu boyunca görülmedi.
+        //
+        // #715'in AYRIMI satır satır uygulandı:
+        //   · `dark:bg-transparent`   → öneksiz `bg-transparent` zaten aşağıda ve
+        //     `outline`da başka `bg-*` yok (sıralama guard'ı da değil) → SAF TEKRAR,
+        //     kaldırıldı.
+        //   · `dark:text-gray-100`    → öneksiz ikizinden (`--foreground` dark =
+        //     rgb(225,231,239)) FARKLI bir değere gidiyordu, ama fark rozetin kendi
+        //     okunurluğunda ölçülemeyecek kadar küçük (koyu kart üstünde 15.0 → 13.5;
+        //     ikisi de AA'nın çok üstünde) ve karşılığında tüketicinin AA'yı GEÇEN
+        //     `text-white`ını eziyordu → kaldırıldı.
+        //   · `dark:backdrop-blur-sm` → öneksiz ikizi yok, koyu-temaya özgü gerçek
+        //     bir efekt → KORUNDU.
         outline: [
           "border-gray-200 dark:border-gray-600",
           "bg-transparent text-foreground",
           "hover:border-gray-300 dark:hover:border-gray-500",
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
-          "dark:text-gray-100 dark:bg-transparent dark:backdrop-blur-sm",
+          "dark:backdrop-blur-sm",
         ],
         // #544: `bg-error` (= --error, #ef4343) beyaz metinle 3.78 veriyordu (AA 4.5 ister),
         // `dark:bg-error/90` ise gerçek koyu kart (#111827) üstünde 4.43 ile kalıyordu.

package/src/components/ui/button.tsx

@@ -33,11 +33,68 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
+        // #715 Dal 1 — GEREKSİZ `dark:` TEKRARI KALDIRILDI.
+        // `--primary` ve `--primary-foreground` `.dark` bloğunda ZATEN farklı değer
+        // alıyor (tokens.css:129/137 ↔ :545/546), yani öneksiz `bg-primary
+        // text-primary-foreground` iki temada da doğru çifti veriyor. `dark:` ikizi
+        // hiçbir şey KAZANDIRMIYOR, yalnız özgüllüğü şişiriyordu:
+        //   .dark\:text-primary-foreground:is(.dark *)  → (0,2,0)
+        //   tüketicinin  text-white                     → (0,1,0)
+        // `cn()` = twMerge: tüketici `text-white` yazınca twMerge öneksiz
+        // `text-primary-foreground`u ELER ama `dark:` ikizi AYRI modifier grubu
+        // olduğu için KALIR → koyu temada metin sessizce dark
+        // `--primary-foreground`a (222.2 47.4% 1.2% = rgb(2,2,5)) düşüyordu.
+        // Ölçüldü: beyaz metin beklerken 1.28:1 (docs/click-animations gradyan
+        // butonları). Öneksiz satır kaldığı için TEMA DAVRANIŞI DEĞİŞMEZ.
+        // Kardeş presedans: #533/#646 badge'de `dark:bg-primary/90`ı aynı gerekçeyle
+        // kaldırdı; button'a o turda uğranmamıştı.
+        //
+        // #715 Dal 3 — `primary`nin hover/active ALFA kompoziti AA altındaydı;
+        // `destructive`in (Dal 2) birebir aynı kusuru. `/90` ve `/80` zemini BEYAZLA
+        // karıştırıp rengi AÇIYOR, metin ise sabit `--primary-foreground` (#f8fafc):
+        //   resting  bg-primary      #1067f4 → 4.70 ✓  (#442: geçiyor → DOKUNULMADI)
+        //   hover    bg-primary/90   #2876f5 → 4.01 ✗
+        //   active   bg-primary/80   #4085f6 → 3.40 ✗
+        // Koyu tema ZATEN geçiyor (near-white zemin + near-black metin: 19.80 /
+        // 15.96 / 12.50) → düzeltmenin onu bozmaması ŞART.
+        //
+        // ⚠️ Dal 2'nin çözümü (alfa yerine opak `error-NNN` kademesi) BURADA
+        // UYGULANAMAZ — `primary`nin skala ailesi YANLIŞ HUE'DA:
+        //   --primary        217.2 91.2% 51%  = #1067f4  (blue,  h≈217)
+        //   --primary-700    3 105 161        = #0369a1  (sky,   h≈199)
+        // `--primary-50…950` (tokens.css:15-25) Tailwind SKY paleti; `--primary`nin
+        // koyusu DEĞİL, başka bir renk. Üstüne preset o kademeleri hiçbir utility'ye
+        // bağlamıyor → `bg-primary-700` bugün HİÇ CSS ÜRETMEYEN ölü sınıf (#713).
+        // Ölçülen adaylar ve RET gerekçeleri:
+        //   · preset'e sky kademelerini bağla → açık temada 5.67 ✓, AMA (a) görünür
+        //     hue kayması, (b) `bg-primary-600` (3.91 ✗) "primary'nin koyusu" sanılan
+        //     yanıltıcı public API, (c) öneksiz sınıf koyu temada DA uygulanır ve
+        //     near-black metinle 3.49'a ÇÖKER. → RET
+        //   · `bg-blue-700` (6.41 ✓) → token'ı by-pass eder; tüketici `--primary`yi
+        //     override edince hover mavide takılı kalır. → RET
+        //   · `bg-primary-subtle-foreground` (#0950c3, 6.81 ✓, doğru hue, sınıf ZATEN
+        //     üretiliyor) → FOREGROUND rolündeki token'ı ZEMİN yapmak iki rolü
+        //     birbirine kilitler. → RET
+        // SEÇİLEN: koyu tonu `--primary`nin KENDİSİNDEN türet (`color-mix`, siyaha
+        // doğru). Tek öneksiz sınıf iki temada da doğru sonuç verir ve tüketici
+        // `--primary`yi değiştirdiğinde hover/active KENDİLİĞİNDEN uyar —
+        // tokens.css:120-128'in bilinçle koruduğu sözleşme bozulmaz.
+        // GERÇEK TARAYICIDA ÖLÇÜLDÜ (headless Chrome 140, piksel örneklemesi):
+        //   hover   85% + black  açık #0e57cf → 6.11 ✓ | koyu #d3d4d6 → 13.97 ✓
+        //   active  75% + black  açık #0c4db7 → 7.27 ✓ | koyu #babbbd → 10.79 ✓
+        // (Testteki kanal-bazlı model 1/255 yuvarlama farkıyla #0e58cf → 6.05 der;
+        // ikisi de eşiğin çok üstünde. `color-mix` gerçekten ÇÖZÜLÜYOR — tarayıcı
+        // `color(srgb 0.053652 0.342337 0.813348)` döndürüyor, yani sınıf ölü değil.)
+        // `dark:` GUARD GEREKMEZ: Dal 1'den sonra dizide hiç `dark:bg-*` yok; tek
+        // rakip öneksiz `bg-primary` (0,1,0) ve `hover:`/`active:` (0,2,0) onu yener.
+        // `[color:…]` ETİKETİ BİLEREK yazıldı: sınıfın renk olarak tanınmasını hem
+        // Tailwind'in hem twMerge'ün tip ÇIKARIMINA bırakmaz. (Etiketsiz form da
+        // bugün doğru çalışıyor — ikisi de deterministik probe'la ölçüldü — ama
+        // #715'in tamamı "sessizce yanlış sınıflandırılan sınıf" hikâyesidir.)
         primary: [
           "bg-primary text-primary-foreground",
-          "dark:bg-primary dark:text-primary-foreground",
-          "hover:bg-primary/90 dark:hover:bg-primary/90",
-          "active:bg-primary/80 dark:active:bg-primary/80",
+          "hover:bg-[color:color-mix(in_srgb,hsl(var(--primary))_85%,black)]",
+          "active:bg-[color:color-mix(in_srgb,hsl(var(--primary))_75%,black)]",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
@@ -51,12 +108,18 @@ const buttonVariants = cva(
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "shadow-sm hover:shadow-md",
         ],
+        // #715 Dal 1 — `outline`ın DÖRT `dark:` satırı da aynı token'ın tekrarıydı
+        // (`--background`/`--foreground`/`--input`/`--accent(-foreground)` hepsi
+        // `.dark` bloğunda tanımlı) → kaldırıldı. Kaskad davranışı korunuyor:
+        // Tailwind 3.4.17 çıktısında `hover:`/`active:` kuralları `dark:`ten ÖNCE
+        // yazılıyor, yani rakip `dark:bg-background` (0,2,0) gitmeden `hover:bg-accent`
+        // (0,2,0) koyu temada kaybederdi — bu yüzden satırlar TEK TEK değil,
+        // varyant bazında BÜTÜN olarak kaldırıldı.
         outline: [
           "bg-background text-foreground",
-          "dark:bg-background dark:text-foreground",
-          "border border-input dark:border-input",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground",
-          "active:bg-accent/80 dark:active:bg-accent/80",
+          "border border-input",
+          "hover:bg-accent hover:text-accent-foreground",
+          "active:bg-accent/80",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
         ],
@@ -77,11 +140,34 @@ const buttonVariants = cva(
         // Not: `dark:bg-destructive` KALDIRILDI, yanına eklenmedi — iki `dark:bg-*`
         // utility'si aynı anda yazılırsa hangisinin kazanacağını sınıf dizgesi sırası
         // DEĞİL Tailwind'in kendi iç sıralaması belirler.
+        //
+        // #715 Dal 2 — #544 yalnız RESTING durumu ölçmüştü; alfa harmanlı DURUM
+        // dalları sayılmadı. Açık temada `/90` ve `/80` zemini BEYAZLA karıştırıp
+        // rengi AÇIYOR, yani AA'yı düşürüyor (metin sabit `--destructive-foreground`
+        // #f8fafc):
+        //   resting  bg-destructive        #e11313  → 4.66 ✓ (#544'ün ölçtüğü)
+        //   hover    bg-destructive/90     #e42b2b  → 4.29 ✗  (axe: 4.28, serious)
+        //   active   bg-destructive/80     #e74242  → 3.82 ✗
+        // Çözüm koyu dalın ZATEN kullandığı yaklaşım: alfa yerine opak `error`
+        // kademesi. Açık dal da aynı kademelere bağlandı:
+        //   hover    bg-error-700          #b91c1c  → 6.18 ✓
+        //   active   bg-error-800          #991b1b  → 7.94 ✓
+        // Yan fayda: durum ilerlemesi artık tutarlı KOYULAŞIYOR (e11313 → b91c1c →
+        // 991b1b); alfa sürümünde active, hover'dan DAHA AÇIK oluyordu.
+        // `--destructive` token'ına ve resting sınıfına DOKUNULMADI (#442).
+        //
+        // ⚠️ `dark:hover:`/`dark:active:` ikizleri öneksiziyle aynı değeri taşısa da
+        // KALDIRILAMAZ — `dark:bg-error-600` (resting, farklı değer) hâlâ gerekli ve
+        // Tailwind 3.4.17 `dark:`i `hover:`ten SONRA yazıyor (aynı özgüllük, 0,2,0):
+        //   .hover\:bg-error-700:hover  <  .dark\:bg-error-600:is(.dark *)
+        // Öneki atarsak koyu temada hover, resting rengine geri düşer. `dark:hover:`
+        // (0,3,0) bu sıralamayı yener. Bu, Dal 1'deki "gereksiz tekrar"dan farklıdır:
+        // burada satırın ÖLÇÜLEBİLİR bir işlevi var.
         destructive: [
           "bg-destructive text-destructive-foreground",
-          "dark:bg-error-600 dark:text-destructive-foreground",
-          "hover:bg-destructive/90 dark:hover:bg-error-700",
-          "active:bg-destructive/80 dark:active:bg-error-800",
+          "dark:bg-error-600",
+          "hover:bg-error-700 dark:hover:bg-error-700",
+          "active:bg-error-800 dark:active:bg-error-800",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
@@ -92,10 +178,38 @@ const buttonVariants = cva(
           // dokunulmadı (#442 kuralı: geçen yüzeyde regresyon riski açma).
           // Dolgu opak `success` skalasına bağlandı: -600 hâlâ 3.15, ölçümle geçen
           // en açık kademe -700 (4.79).
+          // #715 Dal 1: `dark:text-success-foreground` gereksiz tekrardı (aynı token,
+          // `.dark` bloğunda tanımlı) → kaldırıldı. `dark:bg-success-700` FARKLI bir
+          // değere işaret ettiği için KALDI.
+          //
+          // #715 Dal 3 — AÇIK temanın hover/active alfası da AA altındaydı
+          // (metin sabit `--success-foreground` #f8fafc, zemin beyaz):
+          //   resting  bg-success      #12823b → 4.69 ✓ (#442 → DOKUNULMADI)
+          //   hover    bg-success/90   #2a8f4f → 3.90 ✗
+          //   active   bg-success/80   #419b62 → 3.30 ✗
+          // Burada `destructive`in çözümü AYNEN geçerli, çünkü `--success-NNN`
+          // skalası `--success` ile AYNI hue'da (#15803d ↔ #12823b) — `primary`den
+          // ayrıldığı nokta tam da bu. Açık dal, KOYU dalın zaten kullandığı
+          // kademelere bağlandı (tek kaynak, tutarlı ilerleme):
+          //   hover   bg-success-800  #166534 → 6.81 ✓
+          //   active  bg-success-900  #14532d → 8.71 ✓
+          // -700 (4.79) BİLEREK seçilmedi: hem eşiğe fazla yakın hem de `bg-success`
+          // ile neredeyse aynı renk (#15803d ↔ #12823b) — hover geri bildirimi
+          // görünmez olurdu.
+          //
+          // ⚠️ `dark:hover:`/`dark:active:` ikizleri artık öneksiziyle AYNI değeri
+          // taşıyor ama KALDIRILAMAZ — `destructive`teki sıralama guard'ının aynısı.
+          // Tailwind 3.4.17 çıktısı (deterministik CLI probe'uyla doğrulandı) `dark:`i
+          // `hover:`ten SONRA yazıyor ve ikisi de (0,2,0):
+          //   .hover\:bg-success-800:hover  <  .dark\:bg-success-700:is(.dark *)
+          // `dark:hover:` (0,3,0) bu sıralamayı yener. GERÇEK TARAYICIDA KANITLANDI:
+          // guard'sız ikinci bir buton üretilip koyu temada hover'landığında zemin
+          // rgb(21,128,61)'de KALDI (= resting/-700, hover HİÇ uygulanmadı);
+          // guard'lı buton rgb(22,101,52)'ye (-800) geçti.
           "bg-success text-success-foreground",
-          "dark:bg-success-700 dark:text-success-foreground",
-          "hover:bg-success/90 dark:hover:bg-success-800",
-          "active:bg-success/80 dark:active:bg-success-900",
+          "dark:bg-success-700",
+          "hover:bg-success-800 dark:hover:bg-success-800",
+          "active:bg-success-900 dark:active:bg-success-900",
           "shadow-sm hover:shadow-md", 
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
@@ -145,7 +259,10 @@ const buttonVariants = cva(
           // üretiyor, `--primary-foreground` ise koyu — ikisi birbirini yiyordu.
           // #354'ün sidebar'da kanıtlanmış çözümü: subtle token ÇİFTİ (zemin+metin
           // birlikte tanımlı, koyu temada koyu zemin + açık metin).
-          "dark:bg-primary-subtle dark:text-primary-subtle-foreground",
+          // #715 Dal 1: bu çift ARTIK yukarıdaki öneksiz satırdan geliyor —
+          // `dark:bg-primary-subtle dark:text-primary-subtle-foreground` aynı token'ın
+          // tekrarıydı, kaldırıldı (#686'nın çözümü aynen KORUNUYOR, yalnız tek
+          // yerden yazılıyor). Hover/active dalları FARKLI alfa taşıdığı için KALDI.
           "dark:hover:bg-primary/30 dark:active:bg-primary/40",
           "transition-colors duration-200",
         ],

package/src/components/ui/select.tsx

@@ -295,9 +295,9 @@ 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 === "warning" && "text-warning-700 dark:text-warning-500 focus:bg-warning/10 focus:text-warning-700 dark:focus:text-warning-500",
+      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-subtle-foreground focus:bg-warning-subtle focus:text-warning-subtle-foreground",
       
       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
@@ -262,7 +275,35 @@
   --bg-vivid-2: 328.6 85.5% 70.2%;
   --bg-vivid-3: 213.1 93.9% 67.8%;
   --bg-vivid-4: 158.1 64.4% 51.6%;
-  
+
+  /* Yildiz alani — starfield (#720).
+     `--bg-space` YALNIZ dekoratif degildir: `children` metni bu zeminin ustune
+     dusuyor, yani kontrast hesabina GIRER. `--bg-star` ile ciftin ayrimi #481'de
+     olculmustu (beyaz-ustune-beyaz 1.045:1) — degerler o cozumun aynisidir. */
+  --bg-star: 215 27.9% 16.9%;
+  --bg-space: 210 20% 98%;
+
+  /* 3'lu nebula paleti — starfield (#720).
+     Saf DEKORATIF bulut katmani (uzerine metin dusmez) → AA'ya tabi degil.
+     ALFA DEGERIN PARCASIDIR: eski hex'ler `#db278610` gibi 8 haneliydi (alfa
+     0x10/255 = 0.0627). Alfa dusurulurse katman 16x koyulasir; bu yuzden token
+     `H S% L% / A` biciminde tutulur — canvas `addColorStop` bu sozdizimini
+     kabul ediyor (Chrome 152'de olculdu). */
+  --bg-nebula-1: 328.3 71.4% 50.6% / 0.0627;
+  --bg-nebula-2: 188.7 94.5% 42.7% / 0.0627;
+  --bg-nebula-3: 45.4 93.4% 47.5% / 0.0627;
+
+  /* 5'li pastel mesh paleti — mesh-gradient (#720).
+     AYRI BIR SET, `--bg-effect-*` DEGIL: mesh'in kimligi cok acik pastellerdir
+     (L %89.8-94.7); EFFECT paleti (L %46.5-78) uzerine tasinsaydi component'in
+     gorunumu degisirdi. Token'a tasima gorunumu DEGISTIRMEZ kurali (bu blogun
+     bas yorumu) yeni bir grup gerektirdi. */
+  --bg-mesh-1: 325.7 77.8% 94.7%;
+  --bg-mesh-2: 268.6 100% 91.8%;
+  --bg-mesh-3: 250.5 95.2% 91.8%;
+  --bg-mesh-4: 226.5 100% 93.9%;
+  --bg-mesh-5: 325.9 84.6% 89.8%;
+
   /* === TYPOGRAPHY === */
   
   /* Font Families */
@@ -630,6 +671,22 @@
   --bg-vivid-2: 330.4 81.2% 60.4%;
   --bg-vivid-3: 217.2 91.2% 59.8%;
   --bg-vivid-4: 160.1 84.1% 39.4%;
+
+  /* starfield (#720) — koyu temada beyaz yildiz / siyah uzay */
+  --bg-star: 0 0% 100%;
+  --bg-space: 0 0% 0%;
+
+  /* starfield nebula (#720) — koyu temada neon, alfa 0x20/255 = 0.1255 */
+  --bg-nebula-1: 300 100% 50% / 0.1255;
+  --bg-nebula-2: 180 100% 50% / 0.1255;
+  --bg-nebula-3: 60 100% 50% / 0.1255;
+
+  /* mesh-gradient (#720) — koyu temada derin mor set */
+  --bg-mesh-1: 263.4 69.3% 42.2%;
+  --bg-mesh-2: 262.1 83.3% 57.8%;
+  --bg-mesh-3: 238.7 83.5% 66.7%;
+  --bg-mesh-4: 258.3 89.5% 66.3%;
+  --bg-mesh-5: 263.5 67.4% 34.9%;
 }
 
 /* === KEYFRAMES === */