@houssemdi2000/design-system 1.3.8 → 1.4.0

package/dist/components/index.d.ts

@@ -31,3 +31,4 @@ export * from './SecureText';
 export * from './Loading';
 export * from './Avatar';
 export * from './ProfileMenu';
+export * from './Colors';

package/dist/index.esm.js

@@ -253,8 +253,133 @@ const Tag = ({ label, variant = "filled", color = "#fff", background = "#007bff"
                     }, children: "\u00D7" }))] })) }));
 };
 
+const Colors = {
+    // Brand (Primary palette)
+    primary: {
+        50: "#fff6eb",
+        100: "#ffe8cc",
+        200: "#ffd3a3",
+        300: "#ffb86b",
+        400: "#ff9833",
+        500: "#ff7f00",
+        600: "#e36f00",
+        700: "#b85a00",
+        800: "#8c4500",
+        900: "#5c2d00",
+    },
+    // Secondary palette
+    secondary: {
+        50: "#ebf8ff",
+        100: "#d0efff",
+        200: "#a9e2ff",
+        300: "#75d3ff",
+        400: "#33bdff",
+        500: "#009cff",
+        600: "#007dd6",
+        700: "#005fa6",
+        800: "#004676",
+        900: "#002c47",
+    },
+    // Neutral / Grayscale
+    neutral: {
+        0: "#ffffff",
+        50: "#fafafa",
+        100: "#f5f5f5",
+        200: "#e5e5e5",
+        300: "#d4d4d4",
+        400: "#a3a3a3",
+        500: "#737373",
+        600: "#525252",
+        700: "#404040",
+        800: "#262626",
+        900: "#171717",
+        950: "#0a0a0a",
+    },
+    // RAINBOW — full extended palette like Tailwind
+    red: {
+        50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5",
+        400: "#f87171", 500: "#ef4444", 600: "#dc2626", 700: "#b91c1c",
+        800: "#991b1b", 900: "#7f1d1d",
+    },
+    green: {
+        50: "#f0fdf4", 100: "#dcfce7", 200: "#bbf7d0", 300: "#86efac",
+        400: "#4ade80", 500: "#22c55e", 600: "#16a34a", 700: "#15803d",
+        800: "#166534", 900: "#14532d",
+    },
+    blue: {
+        50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd",
+        400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8",
+        800: "#1e40af", 900: "#1e3a8a",
+    },
+    yellow: {
+        50: "#fefce8", 100: "#fef9c3", 200: "#fef08a", 300: "#fde047",
+        400: "#facc15", 500: "#eab308", 600: "#ca8a04", 700: "#a16207",
+        800: "#854d0e", 900: "#713f12",
+    },
+    orange: {
+        50: "#fff7ed", 100: "#ffedd5", 200: "#fed7aa", 300: "#fdba74",
+        400: "#fb923c", 500: "#f97316", 600: "#ea580c", 700: "#c2410c",
+        800: "#9a3412", 900: "#7c2d12",
+    },
+    violet: {
+        50: "#f5f3ff", 100: "#ede9fe", 200: "#ddd6fe", 300: "#c4b5fd",
+        400: "#a78bfa", 500: "#8b5cf6", 600: "#7c3aed", 700: "#6d28d9",
+        800: "#5b21b6", 900: "#4c1d95",
+    },
+    pink: {
+        50: "#fdf2f8", 100: "#fce7f3", 200: "#fbcfe8", 300: "#f9a8d4",
+        400: "#f472b6", 500: "#ec4899", 600: "#db2777", 700: "#be185d",
+        800: "#9d174d", 900: "#831843",
+    },
+    teal: {
+        50: "#f0fdfa", 100: "#ccfbf1", 200: "#99f6e4", 300: "#5eead4",
+        400: "#2dd4bf", 500: "#14b8a6", 600: "#0d9488", 700: "#0f766e",
+        800: "#115e59", 900: "#134e4a",
+    },
+    // Semantic (status)
+    success: "#16a34a",
+    warning: "#facc15",
+    error: "#dc2626",
+    info: "#2563eb",
+    // Social colors
+    facebook: "#1877f2",
+    twitter: "#1da1f2",
+    instagram: "#e1306c",
+    linkedin: "#0a66c2",
+    youtube: "#ff0000",
+    github: "#333333",
+    // Glass / Frosted UI
+    glass: {
+        light: "rgba(255, 255, 255, 0.4)",
+        medium: "rgba(255, 255, 255, 0.25)",
+        dark: "rgba(0, 0, 0, 0.4)",
+    },
+    // Overlay (modals, dialogs)
+    overlay: {
+        light: "rgba(0, 0, 0, 0.3)",
+        medium: "rgba(0, 0, 0, 0.5)",
+        heavy: "rgba(0, 0, 0, 0.7)",
+    },
+    // Gradients
+    gradients: {
+        fire: "linear-gradient(90deg, #f97316, #ef4444)",
+        ocean: "linear-gradient(90deg, #0ea5e9, #6366f1)",
+        sunset: "linear-gradient(90deg, #f43f5e, #fb923c)",
+        forest: "linear-gradient(90deg, #22c55e, #0d9488)",
+        rainbow: "linear-gradient(90deg, #ef4444, #f97316, #facc15, #22c55e, #3b82f6, #8b5cf6)",
+    },
+    // Transparency presets
+    transparent: "transparent",
+    white: "#ffffff",
+    black: "#000000",
+};
 const tco = {
     primary: "#007bff",
+    primaryDark: "#0056b3",
+    success: "#2ecc71",
+    error: "#e74c3c",
+    warning: "#f39c12",
+    info: "#3498db",
     text: "#222",
     textDark: "#fff",
     borderDark: "#ddd",
@@ -281,8 +406,8 @@ const ThemeProvider = ({ children, }) => {
         mode: localStorage.getItem("mode") || "light",
     });
     const toggleDarkMode = () => {
+        localStorage.setItem("mode", localStorage.getItem("mode") === "light" ? "dark" : "light");
         setTheme((prev) => (Object.assign(Object.assign({}, prev), { mode: prev.mode === "light" ? "dark" : "light", background: prev.mode === "light" ? tco.backgroundDark : tco.background, text: prev.mode === "light" ? tco.textDark : tco.text })));
-        localStorage.setItem("mode", theme.mode);
     };
     const setCustomTheme = (t) => {
         setTheme((prev) => (Object.assign(Object.assign({}, prev), t)));
@@ -664,5 +789,5 @@ const ProfileMenu = ({ user, actions, isDarkMode = false, }) => {
                             }, children: [action.icon && jsx("span", { className: "icon", children: action.icon }), action.label] }, i))) })] }))] }));
 };
 
-export { Avatar, Bloc, Button, Card, Center, Checkbox, Column, Container, Divider, DragDrop, Footer, Grid, Layout, Loading, Modal, Navbar, Pagination, ProfileMenu, Radio, Row, SecureText, Select, Sidebar, SmartCarousel, SmartTable, SmartTimeline, Spacer, TableFilterBar, Tag, Text, TextField, ThemeProvider, ToastProvider, useTheme, useToast };
+export { Avatar, Bloc, Button, Card, Center, Checkbox, Colors, Column, Container, Divider, DragDrop, Footer, Grid, Layout, Loading, Modal, Navbar, Pagination, ProfileMenu, Radio, Row, SecureText, Select, Sidebar, SmartCarousel, SmartTable, SmartTimeline, Spacer, TableFilterBar, Tag, Text, TextField, ThemeProvider, ToastProvider, tco, useTheme, useToast };
 //# sourceMappingURL=index.esm.js.map