@moontra/moonui 6.22.0 → 6.24.0

package/src/components/ui/badge.tsx

@@ -44,11 +44,27 @@ const badgeVariants = cva(
           "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
           "dark:text-gray-100 dark:bg-transparent 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.
+        //
+        // TOKEN DEĞİŞTİRİLMEDİ: dark `--destructive`/`--error` METİN rolü için bilerek
+        // açık tutuluyor (tokens.css:518-526); değeri koyulaştırmak `text-destructive`
+        // yazan yüzleri kırardı ve dark-token-contrast.test.ts'in belgelediği uzlaşmayı
+        // bozardı. Bunun yerine #424/#442/#454'ün presedansı uygulandı: token'a değil
+        // VARYANTA dokunulup skalanın bir kademesine inildi.
+        //
+        // `-600` ölçümle seçildi — AA'yı geçen EN AÇIK kademe (beyazla 4.83; -500 3.76 ✗)
+        // ve bugünkü kırmızıya EN YAKIN aday (ΔE*ab 10.3; -700 → 16.2, `--destructive`
+        // light → 18.8). Hue 0° korunur, "uyarı kırmızısı" kimliği kaybolmaz.
+        //
+        // Skala kademeleri tema-BAĞIMSIZ (`.dark` onları ezmez) → tek sınıf iki temayı
+        // birden kapatır ve eski YARI SAYDAM `dark:bg-error/90`ın zemine bağımlılığı
+        // ortadan kalkar. Hover koyulaşır (-700, 6.47), açılmaz.
         destructive: [
-          "border-transparent bg-error text-white",
-          "hover:bg-error/90 dark:hover:bg-error/80",
+          "border-transparent bg-error-600 text-white",
+          "hover:bg-error-700 dark:hover:bg-error-700",
           "focus-visible:ring-error/30 dark:focus-visible:ring-error/25",
-          "dark:bg-error/90 dark:text-white dark:shadow-inner dark:shadow-error/10",
+          "dark:text-white dark:shadow-inner dark:shadow-error/10",
         ],
         success: [
           "border-transparent bg-success text-success-foreground",

package/src/components/ui/button.tsx

@@ -67,11 +67,20 @@ const buttonVariants = cva(
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",
         ],
+        // #544: AÇIK tema zaten geçiyordu (`--destructive` light = #e11313, foreground
+        // #f8fafc ile 4.66) — #442'nin kuralı gereği DOKUNULMADI, regresyon yüzeyi sıfır.
+        // Kırık olan yalnız KOYU temaydı: dark `--destructive` = #ef4343 metin rolü için
+        // bilerek açık bırakılmış bir değer (tokens.css:518-526) ve dolgu rolünde
+        // foreground'la 3.61 veriyor. Token'a dokunmadan dark dolgusu opak `error`
+        // skalasına bağlandı (-600 → 4.62; ölçümle seçilen en açık geçen kademe).
+        // 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.
         destructive: [
           "bg-destructive text-destructive-foreground",
-          "dark:bg-destructive dark:text-destructive-foreground",
-          "hover:bg-destructive/90 dark:hover:bg-destructive/90",
-          "active:bg-destructive/80 dark:active:bg-destructive/80",
+          "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",
           "shadow-sm hover:shadow-md",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "transition-all duration-200",

package/src/components/ui/input.stories.tsx

@@ -4,7 +4,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Input } from './input';
 import { Label } from './label';
 import { Button } from './button';
-import { Search, Mail, Lock, Eye, EyeOff } from 'lucide-react';
+/* `Search` ikonu takma adla alinir: asagida ayni adla bir story export ediliyor
+ * (`export const Search: Story`). Cakisma yalnizca tip hatasi degildi — satir 99'daki
+ * `<Search />` ikonu degil STORY NESNESINI cozuyordu, yani o story calistirilinca
+ * patlardi. Story adi Storybook arayuzunde gorundugu icin ikon yeniden adlandirildi. */
+import { Search as SearchIcon, Mail, Lock, Eye, EyeOff } from 'lucide-react';
 import { useState } from 'react';
 
 const meta: Meta<typeof Input> = {
@@ -96,7 +100,7 @@ export const Disabled: Story = {
 export const WithIcon: Story = {
   render: () => (
     <div className="relative">
-      <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+      <SearchIcon className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
       <Input
         type="search"
         placeholder="Search..."

package/tailwind-preset.js

@@ -104,18 +104,77 @@ module.exports = {
           subtle: "hsl(var(--destructive-subtle) / <alpha-value>)",
           "subtle-foreground": "hsl(var(--destructive-subtle-foreground) / <alpha-value>)",
         },
-        error: "hsl(var(--error) / <alpha-value>)",
+        /* #524: durum ailelerine 50-950 SKALASI baglandi.
+         *
+         * NEDEN: `tokens.css:41-75` bu skalalari (`--success-50..950`, `--warning-*`,
+         * `--error-*`) UZUN ZAMANDIR tanimliyordu ama preset onlari hicbir utility'ye
+         * BAGLAMAMISTI — yani `text-success-700` gecersiz bir sinifti ve sessizce
+         * hicbir CSS uretmiyordu. Dort Pro component (performance-monitor,
+         * performance-debugger, health-check, memory-efficient-data) bu yuzden ham
+         * Tailwind literaline (`text-green-500`) dusmus, acik temada 2.08-2.27:1
+         * kontrast uretiyordu (gerekli 4.5:1).
+         *
+         * NEDEN DUZ TOKEN YETMEDI: issue'nun onerdigi `text-warning` / `text-error`
+         * eslemesi olculdu ve beyaz zeminde AA'yi GECMIYOR (2.13 ve 3.78). Skala
+         * tonlari geciyor: -700 acik temada 5.02 / 4.92 / 6.47, -400 koyu zeminde
+         * 11.56 / 13.16 / 7.28.
+         *
+         * ⚠️ rgb(), hsl() DEGIL: bu skalalarin tokens.css'teki degeri RGB uclusudur
+         * ("--success-700: 21 128 61"), yukaridaki DEFAULT/subtle girdileri ise HSL.
+         * Bloklardaki mevcut hsl() desenini bu satirlara kopyalamak SESSIZCE yanlis
+         * renk uretir (hsl(21 128 61) gecerli bir renktir — 21° hue, kirmizimsi).
+         * Bekci: packages/moonui-pro/src/__tests__/issue-524-durum-renkleri.test.tsx
+         * (Tailwind'i gercekten kosturup uretilen CSS'i olcer).
+         *
+         * ⚠️ `.dark` blogu bu tonlari OVERRIDE ETMEZ — tek ton iki temada da ayni
+         * hex'i verir. Tuketici koyu tema icin `dark:` ikizini ACIKCA yazmalidir. */
+        error: {
+          DEFAULT: "hsl(var(--error) / <alpha-value>)",
+          50: "rgb(var(--error-50) / <alpha-value>)",
+          100: "rgb(var(--error-100) / <alpha-value>)",
+          200: "rgb(var(--error-200) / <alpha-value>)",
+          300: "rgb(var(--error-300) / <alpha-value>)",
+          400: "rgb(var(--error-400) / <alpha-value>)",
+          500: "rgb(var(--error-500) / <alpha-value>)",
+          600: "rgb(var(--error-600) / <alpha-value>)",
+          700: "rgb(var(--error-700) / <alpha-value>)",
+          800: "rgb(var(--error-800) / <alpha-value>)",
+          900: "rgb(var(--error-900) / <alpha-value>)",
+          950: "rgb(var(--error-950) / <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>)",
+          50: "rgb(var(--success-50) / <alpha-value>)",
+          100: "rgb(var(--success-100) / <alpha-value>)",
+          200: "rgb(var(--success-200) / <alpha-value>)",
+          300: "rgb(var(--success-300) / <alpha-value>)",
+          400: "rgb(var(--success-400) / <alpha-value>)",
+          500: "rgb(var(--success-500) / <alpha-value>)",
+          600: "rgb(var(--success-600) / <alpha-value>)",
+          700: "rgb(var(--success-700) / <alpha-value>)",
+          800: "rgb(var(--success-800) / <alpha-value>)",
+          900: "rgb(var(--success-900) / <alpha-value>)",
+          950: "rgb(var(--success-950) / <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>)",
+          50: "rgb(var(--warning-50) / <alpha-value>)",
+          100: "rgb(var(--warning-100) / <alpha-value>)",
+          200: "rgb(var(--warning-200) / <alpha-value>)",
+          300: "rgb(var(--warning-300) / <alpha-value>)",
+          400: "rgb(var(--warning-400) / <alpha-value>)",
+          500: "rgb(var(--warning-500) / <alpha-value>)",
+          600: "rgb(var(--warning-600) / <alpha-value>)",
+          700: "rgb(var(--warning-700) / <alpha-value>)",
+          800: "rgb(var(--warning-800) / <alpha-value>)",
+          900: "rgb(var(--warning-900) / <alpha-value>)",
+          950: "rgb(var(--warning-950) / <alpha-value>)",
         },
         caution: {
           DEFAULT: "hsl(var(--caution) / <alpha-value>)",