@moontra/moonui 6.28.0 → 6.29.0

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

@@ -297,7 +297,7 @@ const SelectItem = React.forwardRef<
       variant === "subtle" && "focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-foreground dark:focus:text-gray-200",
       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",
+      variant === "warning" && "text-warning-subtle-foreground focus:bg-warning-subtle focus:text-warning-subtle-foreground",
       
       className
     )}

package/src/styles/tokens.css

@@ -275,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 */
@@ -643,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 === */