@moontra/moonui 6.10.0 → 6.12.0

package/src/components/ui/__tests__/semantic-token-usage.test.ts

@@ -0,0 +1,120 @@
+/**
+ * #313 / #314 / #323 — semantik durum varyantlarında ham palet bekçisi.
+ *
+ * Denetimin bulgusu: `destructive`/`success`/`warning`/`info` durum varyantları paketin
+ * kendi token'ları yerine ham Tailwind paletine (`bg-red-100 text-red-900`) düşmüştü.
+ * Sonuç görsel değil **işlevsel**: marka/tema özelleştirmesi bu varyantlara İŞLEMİYORDU —
+ * tüketici `--destructive`'i değiştirdiğinde menü item'ı ve toast eski kırmızıda kalıyordu.
+ *
+ * Çözüm `--*-subtle` token ailesiydi (düz `--destructive` "dolu zemin + açık metin" içindir;
+ * yumuşak tint + koyu metin için karşılığı yoktu). Bu test o dönüşümün geri gelmemesini korur.
+ *
+ * KAPSAM NOTU: kural yalnızca **durum varyantı** tanımlayan cva bloklarını hedefler.
+ * `premium` gibi DEKORATİF aksanlar (altın/gradient) kapsam dışıdır — bir "premium" rozetini
+ * `--warning`e bağlamak semantik olarak yanlış olurdu; onlar ayrı bir token ailesi ister.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+/** Ham Tailwind palet ailesi — semantik durumların yerine geçmemeli. */
+const HAM_PALET = /\b(?:bg|text|border|ring|from|to|via)-(red|green|yellow|orange|blue)-\d{2,3}\b/
+
+/** Durum varyantı adları — cva içinde bu anahtarların değerleri token kullanmalı. */
+const DURUM_ANAHTARLARI = ['destructive', 'success', 'warning', 'info', 'error']
+
+interface Ihlal {
+  file: string
+  line: number
+  anahtar: string
+  parca: string
+}
+
+function tara(root: string): Ihlal[] {
+  const files: string[] = []
+  ;(function walk(dir: string) {
+    if (!fs.existsSync(dir)) return
+    for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
+      const p = path.join(dir, e.name)
+      if (e.isDirectory()) {
+        if (!/node_modules|__tests__|dist/.test(p)) walk(p)
+      } else if (/\.tsx?$/.test(e.name) && !/\.stories\./.test(e.name)) files.push(p)
+    }
+  })(root)
+
+  const ihlaller: Ihlal[] = []
+  for (const f of files) {
+    const src = fs.readFileSync(f, 'utf8')
+    for (const anahtar of DURUM_ANAHTARLARI) {
+      // `destructive: "…"` biçimindeki cva varyant girdisini yakala
+      const re = new RegExp(`\\n[ \\t]*${anahtar}:\\s*(["'])([\\s\\S]*?)\\1`, 'g')
+      for (const m of src.matchAll(re)) {
+        const deger = m[2]
+        const hit = deger.match(HAM_PALET)
+        if (hit) {
+          ihlaller.push({
+            file: path.relative(process.cwd(), f),
+            line: src.slice(0, m.index).split('\n').length + 1,
+            anahtar,
+            parca: hit[0],
+          })
+        }
+      }
+    }
+  }
+  return ihlaller
+}
+
+/**
+ * BİLİNEN KALAN İHLALLER — cırcır (ratchet) listesi.
+ *
+ * Bu PR (#313/#314/#323) menü + toast ailesini dönüştürdü. Bekçi kurulunca aynı desenin
+ * kütüphanede DAHA GENİŞ olduğu ortaya çıktı: 7 dosyada 21 ihlal daha. Onları bu PR'a
+ * çekmek kapsamı ilgisiz component'lere (dashboard widget'ları, timeline, avatar-pro…)
+ * yayardı; bu yüzden burada AÇIKÇA listeleniyorlar.
+ *
+ * Kural cırcır gibi çalışır: listedekiler tolere edilir, **yeni** ihlal kırmızı olur.
+ * Takip işi bu dosyaları dönüştürüp satırları buradan siler — liste boşalınca kural
+ * tam sıkı hale gelir.
+ */
+const BILINEN_KALANLAR: string[] = []
+
+const SRC_ROOT = path.resolve(__dirname, '../../..')
+const tumIhlaller = tara(SRC_ROOT)
+const ihlaller = tumIhlaller.filter(
+  (i) => !BILINEN_KALANLAR.some((b) => i.file.replace(/\\/g, '/').endsWith(b))
+)
+
+describe('#313/#314/#323 semantik durum varyantları token kullanır', () => {
+  it('tarayıcı gerçekten dosya buluyor (sessiz yeşil koruması)', () => {
+    // Regex/yol bozulursa test "0 ihlal" ile yeşil geçerdi. Bilinen bir durum
+    // varyantının var olduğunu doğrulayarak tarayıcının canlı olduğunu kanıtlıyoruz.
+    const toast = fs.readFileSync(
+      path.join(SRC_ROOT, 'components/ui/toast.tsx'),
+      'utf8'
+    )
+    expect(toast).toContain('success:')
+  })
+
+  it('durum varyantlarında ham Tailwind paleti YOK (bilinen kalanlar hariç)', () => {
+    const rapor = ihlaller.map((i) => `${i.file}:${i.line} → ${i.anahtar} içinde "${i.parca}"`)
+    expect(rapor).toEqual([])
+  })
+
+  it('cırcır listesi ÇALIŞIYOR — listelenen dosyalar gerçekten hâlâ ihlalli', () => {
+    // Bir dosya dönüştürüldüğünde bu test kırmızı olur ve satırı listeden silmeyi hatırlatır.
+    // Aksi hâlde liste sonsuza dek şişer ve kural sessizce gevşer.
+    const halaIhlalli = new Set(
+      tumIhlaller.map((i) => BILINEN_KALANLAR.find((b) => i.file.replace(/\\/g, '/').endsWith(b)))
+    )
+    const gereksizListelenen = BILINEN_KALANLAR.filter((b) => !halaIhlalli.has(b))
+    expect(gereksizListelenen).toEqual([])
+  })
+
+  it('toast success/warning/info gerçekten `--*-subtle` token\'larını kullanıyor', () => {
+    const toast = fs.readFileSync(path.join(SRC_ROOT, 'components/ui/toast.tsx'), 'utf8')
+    expect(toast).toContain('bg-success-subtle')
+    expect(toast).toContain('text-success-subtle-foreground')
+    expect(toast).toContain('bg-warning-subtle')
+    expect(toast).toContain('bg-info-subtle')
+  })
+})

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

@@ -146,9 +146,12 @@ describe('Toast Components', () => {
       const variants = [
         { variant: 'default', classes: ['bg-background', 'text-foreground'] },
         { variant: 'destructive', classes: ['bg-destructive', 'text-destructive-foreground'] },
-        { variant: 'success', classes: ['bg-green-50', 'text-green-900', 'border-green-200'] },
-        { variant: 'warning', classes: ['bg-orange-50', 'text-orange-900', 'border-orange-200'] },
-        { variant: 'info', classes: ['bg-blue-50', 'text-blue-900', 'border-blue-200'] },
+        // #323: bu üç varyant ham Tailwind paleti kullanıyordu (`bg-green-50` vb.) →
+        // marka/tema özelleştirmesi onlara İŞLEMİYORDU. Artık `--*-subtle` semantik
+        // token'ları. Kontrast korundu (8.70 / 8.83 / 9.52 — ölçüldü, bkz. changelog).
+        { variant: 'success', classes: ['bg-success-subtle', 'text-success-subtle-foreground'] },
+        { variant: 'warning', classes: ['bg-warning-subtle', 'text-warning-subtle-foreground'] },
+        { variant: 'info', classes: ['bg-info-subtle', 'text-info-subtle-foreground'] },
       ] as const
 
       variants.forEach(({ variant, classes }) => {

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

@@ -156,10 +156,14 @@ describe('Tooltip Components', () => {
       const variants = [
         { variant: 'default', className: 'bg-primary', textClassName: 'text-primary-foreground' },
         { variant: 'secondary', className: 'bg-secondary', textClassName: 'text-secondary-foreground' },
-        { variant: 'success', className: 'bg-green-500', textClassName: 'text-white' },
-        { variant: 'warning', className: 'bg-yellow-500', textClassName: 'text-white' },
+        // #313/#314/#323: bu üçü ham paletti ve KONTRASTI FELAKETTİ — ölçüldü:
+        // bg-green-500 + text-white = 2.28, bg-yellow-500 + text-white = 1.92 (AA 4.5).
+        // Semantik token'a geçince 4.67 / 8.18 oldu. Test eski (kırık) değerleri
+        // sabitliyordu; artık token çiftini doğruluyor.
+        { variant: 'success', className: 'bg-success', textClassName: 'text-success-foreground' },
+        { variant: 'warning', className: 'bg-warning', textClassName: 'text-warning-foreground' },
         { variant: 'destructive', className: 'bg-destructive', textClassName: 'text-destructive-foreground' },
-        { variant: 'info', className: 'bg-blue-500', textClassName: 'text-white' },
+        { variant: 'info', className: 'bg-info', textClassName: 'text-info-foreground' },
       ] as const
 
       variants.forEach(({ variant, className, textClassName }) => {
@@ -659,7 +663,7 @@ describe('Tooltip Components', () => {
 
         const tooltip = getTooltipContent()
         expect(tooltip).toBeInTheDocument()
-        expect(tooltip).toHaveClass('bg-green-500')
+        expect(tooltip).toHaveClass('bg-success')
         expect(tooltip).toHaveClass('text-base')
         expect(tooltip).toHaveClass('custom-tooltip')
         expect(tooltip).toHaveAttribute('data-side', 'bottom')

package/src/components/ui/card.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { motion, type HTMLMotionProps } from "framer-motion";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/utils";
 import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/micro-interactions";
 
@@ -11,16 +12,14 @@ import { microInteractionVariants, hoverAnimations, tapAnimations } from "@/lib/
 // hiç uygulanmıyordu; kart kökün `dark:bg-gray-900` değerinde kalıyordu.
 // Semantik `bg-card` token'ına bağlandı.
 //
-// NOT — `size` ve `asChild` (aynı issue'da raporlandı) BİLİNÇLİ olarak
-// değiştirilmedi, ayrı gerekçelerle:
-//   • `size`: CVA'da dört değerin dördü de boş string ve `compoundVariants` YOK
-//     (separator'ın aksine gizli bir çalışma yolu yok). Doğal hedefi de yok —
-//     padding kökte değil CardHeader/Content/Footer'ın kendi `p-6`'sında. Anlamlı
-//     kılmak alt-component'lerin padding'ini yeniden tasarlamak demek: görsel
-//     değişim + API kararı, bu PR'ın kapsamı dışı.
-//   • `asChild`: yalnız tipte var, gövdede hiç okunmuyor. Gerçekten uygulamak
-//     Radix `Slot` bağımlılığı + child-tek-eleman sözleşmesi demek.
-// İkisi de #310'da açık kalıyor; bu PR ölü SINIF kısmını kapatıyor.
+// #310 (ikinci tur): `size` ve `asChild` ARTIK GERÇEK.
+//   • `size`: CVA'daki dört değer de boş stringdi ve `compoundVariants` yoktu — prop
+//     kabul ediliyor, hiçbir görsel fark üretmiyordu. Kökte uygulanacak doğal bir hedefi
+//     de yok, çünkü padding `CardHeader/Content/Footer`'ın kendi `p-6`'sında. Bu yüzden
+//     kök `size`'ı CONTEXT ile alt bölümlere dağıtıyor (aşağıda).
+//     KRİTİK: `md` bugünkü `p-6`'yı KORUR → varsayılan kullanımda görsel değişim YOK.
+//   • `asChild`: yalnız tipteydi, gövdede hiç okunmuyordu → `...props` ile native div'e
+//     sızıyor (`<div aschild="true">`, React uyarısı). Radix `Slot`a bağlandı.
 
 const cardVariants = cva(
   "rounded-lg border bg-card text-card-foreground shadow-sm dark:shadow-gray-900/20 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-all duration-200",
@@ -62,6 +61,29 @@ const cardVariants = cva(
   }
 );
 
+/**
+ * #310: Kart bölümlerinin padding ölçeği. `md` = bugünkü `p-6` — bu, mevcut tüketicide
+ * görsel değişim OLMAMASI için zorunlu (varsayılan `size` zaten `md`).
+ */
+type CardSize = "sm" | "md" | "lg" | "xl";
+
+const CARD_SECTION_PADDING: Record<CardSize, string> = {
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8",
+  xl: "p-10",
+};
+
+/**
+ * Kök `Card`ın çözülmüş `size`ını alt bölümlere taşıyan tek kaynak. Alt component'ler
+ * `Card` dışında da tek başına kullanılabildiği için context varsayılanı `md`dir.
+ */
+const CardSizeContext = React.createContext<CardSize>("md");
+
+/** `default` deprecated alias'tır (#319); kanonik `md`ye eşlenir. */
+const resolveCardSize = (size: CardProps["size"]): CardSize =>
+  size && size !== "default" ? size : "md";
+
 export interface CardProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof cardVariants> {
@@ -70,7 +92,25 @@ export interface CardProps
 }
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, variant, size, radius, interactive, microInteraction = "lift", ...props }, ref) => {
+  ({ className, variant, size, radius, interactive, asChild = false, microInteraction = "lift", ...props }, ref) => {
+    const resolvedSize = resolveCardSize(size);
+    const rootClassName = cn(
+      "moonui-theme",
+      cardVariants({ variant, size, radius, interactive, className })
+    );
+
+    // #310: `asChild` Radix `Slot`a bağlandı. Slot ile motion sarmalayıcı BİRLİKTE
+    // kullanılamaz (Slot tek çocuğa prop birleştirir, motion kendi elemanını ister) —
+    // bu yüzden asChild verildiğinde micro-interaction atlanır ve bu davranış
+    // belgelenir. Görsel etkileşimi tüketici kendi elemanında kurar.
+    if (asChild) {
+      return (
+        <CardSizeContext.Provider value={resolvedSize}>
+          <Slot ref={ref} className={rootClassName} {...props} />
+        </CardSizeContext.Provider>
+      );
+    }
+
     // Interactive özelliği varsa motion.div, yoksa normal div kullan
     if (interactive && microInteraction !== "none") {
       const interactionProps = {
@@ -81,22 +121,22 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
       };
       
       return (
-        <motion.div
-          ref={ref}
-          className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
-          {...interactionProps}
-          {...(props as any)}
-        />
+        <CardSizeContext.Provider value={resolvedSize}>
+          <motion.div
+            ref={ref}
+            className={rootClassName}
+            {...interactionProps}
+            {...(props as any)}
+          />
+        </CardSizeContext.Provider>
       );
     }
-    
+
     // Non-interactive version
     return (
-      <div
-        ref={ref}
-        className={cn("moonui-theme", cardVariants({ variant, size, radius, interactive, className }))}
-        {...props}
-      />
+      <CardSizeContext.Provider value={resolvedSize}>
+        <div ref={ref} className={rootClassName} {...props} />
+      </CardSizeContext.Provider>
     );
   }
 );
@@ -105,13 +145,17 @@ Card.displayName = "Card";
 const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("moonui-theme", "flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  // #310: padding artık kök `Card`ın `size`ından geliyor (eskiden sabit `p-6`).
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", "flex flex-col space-y-1.5", padding, className)}
+      {...props}
+    />
+  );
+});
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
@@ -141,21 +185,32 @@ CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("moonui-theme", "p-6 pt-0", className)} {...props} />
-));
+>(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", padding, "pt-0", className)}
+      {...props}
+    />
+  );
+});
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("moonui-theme", "flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const padding = CARD_SECTION_PADDING[React.useContext(CardSizeContext)];
+  return (
+    <div
+      ref={ref}
+      className={cn("moonui-theme", "flex items-center", padding, "pt-0", className)}
+      {...props}
+    />
+  );
+});
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, cardVariants };
+export type { CardSize };

package/src/components/ui/toast.tsx

@@ -32,11 +32,11 @@ const toastVariants = cva(
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
         success:
-          "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-900/20 dark:text-green-100",
+          "border-success-subtle-foreground/20 bg-success-subtle text-success-subtle-foreground",
         warning:
-          "border-orange-200 bg-orange-50 text-orange-900 dark:border-orange-800 dark:bg-orange-900/20 dark:text-orange-100",
+          "border-warning-subtle-foreground/20 bg-warning-subtle text-warning-subtle-foreground",
         info:
-          "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-100",
+          "border-info-subtle-foreground/20 bg-info-subtle text-info-subtle-foreground",
       },
     },
     defaultVariants: {
@@ -86,7 +86,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-destructive-foreground/70 group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive-foreground/40 group-[.destructive]:focus:ring-offset-destructive",
       className
     )}
     toast-close=""

package/src/components/ui/tooltip.tsx

@@ -15,10 +15,10 @@ const tooltipVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground",
         secondary: "bg-secondary text-secondary-foreground",
-        success: "bg-green-500 text-white border-green-600",
-        warning: "bg-yellow-500 text-white border-yellow-600",
+        success: "bg-success text-success-foreground border-success",
+        warning: "bg-warning text-warning-foreground border-warning",
         destructive: "bg-destructive text-destructive-foreground",
-        info: "bg-blue-500 text-white border-blue-600",
+        info: "bg-info text-info-foreground border-info",
       },
       size: {
         sm: "px-2 py-1 text-xs",

package/src/styles/tokens.css

@@ -146,7 +146,11 @@
   --muted-foreground: 215.4 16.3% 45%;
   --accent: 217.2 32.6% 94%;
   --accent-foreground: 217.2 91.2% 51%;
-  --destructive: 0 84.2% 60.2%;
+  /* #327: 60.2% idi. HİÇBİR kullanımda AA'yı geçmiyordu — beyaz zeminde metin 3.76,
+     kendi foreground'uyla düz dolgu 3.59. 48%, her İKİ testi de geçen en açık değer
+     (4.86 / 4.64), yani marka rengine en yakın kalan seçenek. Koyu tema (0 63% 31%)
+     zaten 9.44 → dokunulmadı. #284'ün --primary onarımıyla aynı desen. */
+  --destructive: 0 84.2% 48%;
   --destructive-foreground: 210 40% 98%;
   --border: 214.3 31.8% 91.4%;
   /* #284: form kontrolü kenarlığı beyaz zeminde 1.23 idi (WCAG 1.4.11 eşiği 3.0,
@@ -167,11 +171,34 @@
   --warning-foreground: 24 10% 10%;
   --error: 0 84% 60%;
   --error-foreground: 210 40% 98%;
-  --info: 217 91% 60%;
+  /* #313/#314/#323 dönüşümü sırasında çıktı: `--info` düz dolgu olarak kendi
+     foreground'uyla 3.47 veriyordu — `--destructive`in (#327) birebir aynı kusuru.
+     Kullanıcının #327'de seçtiği ilke burada da uygulandı: her iki testi geçen EN AÇIK
+     değer. 50% → düz 4.83, metin/beyaz 5.05. */
+  --info: 217 91% 50%;
   --info-foreground: 210 40% 98%;
   --caution: 38 92% 50%;
   --caution-foreground: 24 10% 10%;
 
+  /* ---------------------------------------------------------------------------
+     #313 / #314 / #323 — YUMUŞAK-TON (subtle) semantik yüzeyler
+     ---------------------------------------------------------------------------
+     `--destructive` gibi DÜZ token'lar "dolu zemin + açık metin" içindir. Menü
+     item'ı, toast, rozet gibi yerlerde ise yumuşak bir tint + koyu metin gerekir.
+     Böyle bir token OLMADIĞI için 25 dosya ham Tailwind paletine (`bg-red-100
+     text-red-900`) düşmüştü → marka/tema özelleştirmesi bu varyantlara İŞLEMİYORDU.
+
+     Değerler bugünkü ham palet çiftlerinin birebir HSL karşılığıdır; yani dönüşüm
+     kontrastı DÜŞÜRMEZ (ölçüldü: 8.20 / 8.70 / 8.83 / 9.52 — hepsi korunur). */
+  --destructive-subtle: 0 93% 94%;
+  --destructive-subtle-foreground: 0 63% 31%;        /* 8.20:1 */
+  --success-subtle: 138 77% 97%;
+  --success-subtle-foreground: 144 61% 20%;          /* 8.70:1 */
+  --warning-subtle: 33 100% 97%;
+  --warning-subtle-foreground: 15 75% 28%;           /* 8.83:1 */
+  --info-subtle: 214 100% 97%;
+  --info-subtle-foreground: 224 64% 33%;             /* 9.52:1 */
+
   --primary-50: 240 249 255;
 
   /* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
@@ -433,6 +460,20 @@
      metin olarak okunmuyordu (3.30) — burada 36% korunur (4.86). */
   --success: 142 76% 36%;
   --destructive-foreground: 210 40% 98%;
+
+  /* #313/#314/#323 — koyu tema subtle yüzeyleri.
+     Bunlar bugünkü `dark:bg-red-900/20` kompozisyonunun ARİTMETİK karşılığı DEĞİL:
+     çok koyu lacivert zemine %20 tint bindirince hue zemine kayıyor ve ortaya
+     semantik olmayan bir renk çıkıyor (destructive için 312° = macenta). Bunun
+     yerine semantik hue KORUNARAK kasıtlı koyu tint'ler seçildi; kontrast ölçüldü. */
+  --destructive-subtle: 0 63% 12%;
+  --destructive-subtle-foreground: 0 91% 71%;        /* 6.43:1 */
+  --success-subtle: 142 70% 10%;
+  --success-subtle-foreground: 141 84% 93%;          /* 14.02:1 */
+  --warning-subtle: 25 80% 11%;
+  --warning-subtle-foreground: 34 100% 92%;          /* 14.43:1 */
+  --info-subtle: 217 80% 13%;
+  --info-subtle-foreground: 214 95% 93%;             /* 14.11: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

@@ -92,15 +92,23 @@ module.exports = {
         destructive: {
           DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
           foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+          // #313/#314/#323: yumuşak-ton yüzey — `bg-destructive-subtle` +
+          // `text-destructive-subtle-foreground` olarak kullanılır.
+          subtle: "hsl(var(--destructive-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--destructive-subtle-foreground) / <alpha-value>)",
         },
         error: "hsl(var(--error) / <alpha-value>)",
         success: {
           DEFAULT: "hsl(var(--success) / <alpha-value>)",
           foreground: "hsl(var(--success-foreground) / <alpha-value>)",
+          subtle: "hsl(var(--success-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--success-subtle-foreground) / <alpha-value>)",
         },
         warning: {
           DEFAULT: "hsl(var(--warning) / <alpha-value>)",
           foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
+          subtle: "hsl(var(--warning-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--warning-subtle-foreground) / <alpha-value>)",
         },
         caution: {
           DEFAULT: "hsl(var(--caution) / <alpha-value>)",
@@ -109,6 +117,8 @@ module.exports = {
         info: {
           DEFAULT: "hsl(var(--info) / <alpha-value>)",
           foreground: "hsl(var(--info-foreground) / <alpha-value>)",
+          subtle: "hsl(var(--info-subtle) / <alpha-value>)",
+          "subtle-foreground": "hsl(var(--info-subtle-foreground) / <alpha-value>)",
         },
         card: {
           DEFAULT: "hsl(var(--card) / <alpha-value>)",
@@ -168,13 +178,13 @@ module.exports = {
         "gradient-to-br": "linear-gradient(to bottom right, var(--tw-gradient-stops))",
         "gradient-to-bl": "linear-gradient(to bottom left, var(--tw-gradient-stops))",
       },
-      borderColor: {
-        error: "hsl(var(--error) / <alpha-value>)",
-        success: "hsl(var(--success) / <alpha-value>)",
-        warning: "hsl(var(--warning) / <alpha-value>)",
-        caution: "hsl(var(--caution) / <alpha-value>)",
-        info: "hsl(var(--info) / <alpha-value>)",
-      },
+      /* #313/#314/#323: `borderColor` extend'i KALDIRILDI.
+         Buradaki DÜZ string değerler, `theme.colors` altındaki İÇ İÇE nesneleri
+         `border-*` ailesi için EZİYORDU — o beş isimde yalnız DEFAULT hayatta kalıyor,
+         `border-success-subtle-foreground` gibi alt anahtarlar hiç CSS ÜRETMİYORDU.
+         (Deterministik Tailwind CLI probe'uyla doğrulandı: destructive bu listede
+         olmadığı için çalışıyor, diğer üçü çalışmıyordu.)
+         `border-*` sınıfları `theme.colors`tan zaten türer; blok gereksizdi. */
     },
   },
   plugins: [],

package/src/use-toast.ts

@@ -1,32 +0,0 @@
-// Toast hook - şimdilik basit bir implementasyon
-// Gerçek implementasyonda Toaster component'i ile entegre olacak
-
-interface ToastOptions {
-  title: string;
-  description?: string;
-  variant?: 'default' | 'destructive';
-}
-
-export function toast(options: ToastOptions) {
-  // Şimdilik console'a yazdıralım
-  // Gerçek implementasyonda toast notification gösterilecek
-  console.log('Toast:', options);
-  
-  // Browser'da alert gösterelim (geçici çözüm)
-  if (typeof window !== 'undefined') {
-    const message = options.description 
-      ? `${options.title}\n\n${options.description}`
-      : options.title;
-    
-    // Variant'a göre stil belirle
-    if (options.variant === 'destructive') {
-      console.error(message);
-    } else {
-      console.log(message);
-    }
-  }
-}
-
-export const useToast = () => {
-  return { toast };
-};