@moontra/moonui 2.4.13 → 2.5.1

package/src/styles/tokens.css

@@ -1,5 +1,13 @@
-/* MoonUI Design Tokens - Namespaced to prevent conflicts */
+/* MoonUI Design Tokens
+ *
+ * Kapsam: hem :root hem .moonui-root.
+ * Component'ler hsl(var(--primary)) gibi ÖN EKSİZ değişkenler okur; token'lar
+ * yalnızca .moonui-root altında kalırsa ve tüketici bu sınıfı eklemezse
+ * component'ler renksiz kalır. :root varsayılan yolu çalışır kılar;
+ * .moonui-root ise token'ları izole etmek isteyen tüketici için korunur.
+ */
 
+:root,
 .moonui-root {
   /* === COLOR SYSTEM === */
   
@@ -65,27 +73,93 @@
   --error-800: 153 27 27;
   --error-900: 127 29 29;
   --error-950: 69 10 10;
-  
+
+  /* === MARKA PALETI ===
+   *
+   * MoonUI'nin imza gradient'i mor -> pembe (from-brand-600 to-brand-accent-600).
+   * Bu renkler daha once YALNIZCA sitenin sayfalarina hardcoded Tailwind sinifi
+   * olarak (purple-600, pink-500) yazilmisti; pakette HIC yoktu. Yani musteri
+   * paketi kurdugunda markanin gorunumunu elde etmesi imkansizdi.
+   *
+   * Degerler Tailwind'in purple/pink paletiyle BIREBIR ayni (HSL'e cevrildi),
+   * boylece mevcut render DEGISMEZ; degisen tek sey markanin artik
+   * degistirilebilir bir token olmasi.
+   */
+  --brand-50: 270 100% 98%;
+  --brand-100: 268.7 100% 95.5%;
+  --brand-200: 268.6 100% 91.8%;
+  --brand-300: 269.2 97.4% 85.1%;
+  --brand-400: 270 95.2% 75.3%;
+  --brand-500: 270.7 91% 65.1%;
+  --brand-600: 271.5 81.3% 55.9%;
+  --brand-700: 272.1 71.7% 47.1%;
+  --brand-800: 272.9 67.2% 39.4%;
+  --brand-900: 273.6 65.6% 32%;
+  --brand-950: 273.5 86.9% 21%;
+
+  --brand-accent-50: 327.3 73.3% 97.1%;
+  --brand-accent-100: 325.7 77.8% 94.7%;
+  --brand-accent-200: 325.9 84.6% 89.8%;
+  --brand-accent-300: 327.4 87.1% 81.8%;
+  --brand-accent-400: 328.6 85.5% 70.2%;
+  --brand-accent-500: 330.4 81.2% 60.4%;
+  --brand-accent-600: 333.3 71.4% 50.6%;
+  --brand-accent-700: 335.1 77.6% 42%;
+  --brand-accent-800: 335.8 74.4% 35.3%;
+  --brand-accent-900: 335.9 69% 30.4%;
+  --brand-accent-950: 336.2 83.9% 17.1%;
+
   /* Theme Colors */
   --background: 0 0% 100%;
-  --foreground: 222.2 47.4% 11.2%;
+  --foreground: 222.2 84% 4.9%;
   --card: 0 0% 100%;
-  --card-foreground: 222.2 47.4% 11.2%;
+  --card-foreground: 222.2 84% 4.9%;
   --popover: 0 0% 100%;
-  --popover-foreground: 222.2 47.4% 11.2%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  /* --primary BILEREK marka rengi DEGILDIR ve degistirilmez.
+   *
+   * Marka (mor/pembe) ayri bir ad altinda sunulur: --brand-* / --brand-accent-*
+   * (Tailwind: bg-brand-600, from-brand-600 to-brand-accent-600).
+   *
+   * Neden: --primary'yi mora cekmek, paketi kullanan TUM projelerin butonlarini
+   * surum yukseltmesinde sessizce maviden mora cevirirdi — kirici bir gorsel
+   * degisiklik ve tum renk akislarinin bozulmasi demekti. Marka rengi isteyen
+   * tuketici bilerek `bg-brand-600` yazar ya da "brand" preset'ini secer. */
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 94%;
+  --secondary-foreground: 217.2 91.2% 59.8%;
+  --muted: 217.2 32.6% 96%;
   --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 100% 50%;
+  --accent: 217.2 32.6% 94%;
+  --accent-foreground: 217.2 91.2% 59.8%;
+  --destructive: 0 84.2% 60.2%;
   --destructive-foreground: 210 40% 98%;
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
-  --ring: 215 20.2% 65.1%;
+  --ring: 217.2 91.2% 59.8%;
+
+  /* Durum renkleri. Tailwind preset'i bg-success/bg-warning/bg-error/bg-info/
+   * bg-caution siniflarini bu degiskenlere bagliyor; tanimsiz kalirlarsa o
+   * siniflar renksiz uretilir. */
+  --success: 142 76% 36%;
+  --success-foreground: 210 40% 98%;
+  --warning: 38 92% 50%;
+  --warning-foreground: 24 10% 10%;
+  --error: 0 84% 60%;
+  --error-foreground: 210 40% 98%;
+  --info: 217 91% 60%;
+  --info-foreground: 210 40% 98%;
+  --caution: 38 92% 50%;
+  --caution-foreground: 24 10% 10%;
+
+  --primary-50: 240 249 255;
+
+  /* Tailwind preset'i rounded-lg/md/sm'yi var(--radius)'a bagliyor.
+   * Bu degisken tanimsiz kalirsa o siniflar sessizce etkisiz olur. */
+  --radius: 0.5rem;
+
   --chart-1: 12 76% 61%;
   --chart-2: 173 58% 39%;
   --chart-3: 197 37% 24%;

package/tailwind-preset.js

@@ -0,0 +1,175 @@
+/**
+ * MoonUI Tailwind preset
+ *
+ * Component'ler `bg-primary`, `border-border`, `rounded-lg` gibi utility'ler kullanir.
+ * Bu utility'ler ancak Tailwind renkleri CSS degiskenlerine baglandiginda uretilir —
+ * aksi halde siniflar hic olusmaz ve component'ler renksiz gorunur.
+ *
+ * Kullanim:
+ *   // tailwind.config.js
+ *   module.exports = {
+ *     presets: [require("@moontra/moonui/tailwind-preset")],
+ *     content: [
+ *       "./src/**\/*.{ts,tsx}",
+ *       "./node_modules/@moontra/moonui/dist/**\/*.{js,mjs}",
+ *     ],
+ *   };
+ *
+ * Degiskenlerin kendisi @moontra/moonui/tokens.css icinde tanimlidir; preset tek
+ * basina yeterli DEGILDIR, token CSS'i de import edilmelidir.
+ *
+ * `content` bilerek disarida birakildi: tuketicinin kendi dosya yollarina bagli.
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: "1rem",
+        sm: "2rem",
+        lg: "4rem",
+        xl: "5rem",
+        "2xl": "6rem",
+      },
+    },
+    extend: {
+      colors: {
+        /* MoonUI marka paleti — imza gradient: from-brand-600 to-brand-accent-600.
+         * Degerleri tokens.css'te; Tailwind'in purple/pink paletiyle birebir ayni,
+         * ama artik degistirilebilir token'lar. */
+        brand: {
+          DEFAULT: "hsl(var(--brand-600) / <alpha-value>)",
+          50: "hsl(var(--brand-50) / <alpha-value>)",
+          100: "hsl(var(--brand-100) / <alpha-value>)",
+          200: "hsl(var(--brand-200) / <alpha-value>)",
+          300: "hsl(var(--brand-300) / <alpha-value>)",
+          400: "hsl(var(--brand-400) / <alpha-value>)",
+          500: "hsl(var(--brand-500) / <alpha-value>)",
+          600: "hsl(var(--brand-600) / <alpha-value>)",
+          700: "hsl(var(--brand-700) / <alpha-value>)",
+          800: "hsl(var(--brand-800) / <alpha-value>)",
+          900: "hsl(var(--brand-900) / <alpha-value>)",
+          950: "hsl(var(--brand-950) / <alpha-value>)",
+        },
+        "brand-accent": {
+          DEFAULT: "hsl(var(--brand-accent-600) / <alpha-value>)",
+          50: "hsl(var(--brand-accent-50) / <alpha-value>)",
+          100: "hsl(var(--brand-accent-100) / <alpha-value>)",
+          200: "hsl(var(--brand-accent-200) / <alpha-value>)",
+          300: "hsl(var(--brand-accent-300) / <alpha-value>)",
+          400: "hsl(var(--brand-accent-400) / <alpha-value>)",
+          500: "hsl(var(--brand-accent-500) / <alpha-value>)",
+          600: "hsl(var(--brand-accent-600) / <alpha-value>)",
+          700: "hsl(var(--brand-accent-700) / <alpha-value>)",
+          800: "hsl(var(--brand-accent-800) / <alpha-value>)",
+          900: "hsl(var(--brand-accent-900) / <alpha-value>)",
+          950: "hsl(var(--brand-accent-950) / <alpha-value>)",
+        },
+        border: "hsl(var(--border) / <alpha-value>)",
+        input: "hsl(var(--input) / <alpha-value>)",
+        ring: "hsl(var(--ring) / <alpha-value>)",
+        background: "hsl(var(--background) / <alpha-value>)",
+        foreground: "hsl(var(--foreground) / <alpha-value>)",
+        primary: {
+          DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+          foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+          foreground: "hsl(var(--secondary-foreground) / <alpha-value>)",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+          foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+          foreground: "hsl(var(--accent-foreground) / <alpha-value>)",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+          foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
+        },
+        error: "hsl(var(--error) / <alpha-value>)",
+        success: {
+          DEFAULT: "hsl(var(--success) / <alpha-value>)",
+          foreground: "hsl(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning) / <alpha-value>)",
+          foreground: "hsl(var(--warning-foreground) / <alpha-value>)",
+        },
+        caution: {
+          DEFAULT: "hsl(var(--caution) / <alpha-value>)",
+          foreground: "hsl(var(--caution-foreground) / <alpha-value>)",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info) / <alpha-value>)",
+          foreground: "hsl(var(--info-foreground) / <alpha-value>)",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card) / <alpha-value>)",
+          foreground: "hsl(var(--card-foreground) / <alpha-value>)",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+          foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)"],
+        mono: ["var(--font-mono)"],
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        shake: "shake 0.5s ease-in-out",
+        rotate: "rotate 0.5s ease-in-out",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        shake: {
+          "0%, 100%": { transform: "translateX(0)" },
+          "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-10px)" },
+          "20%, 40%, 60%, 80%": { transform: "translateX(10px)" },
+        },
+        rotate: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+      },
+      boxShadow: {
+        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
+      },
+      backgroundImage: {
+        "gradient-to-tr": "linear-gradient(to top right, var(--tw-gradient-stops))",
+        "gradient-to-tl": "linear-gradient(to top left, var(--tw-gradient-stops))",
+        "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>)",
+      },
+    },
+  },
+  plugins: [],
+};