@rainersoft/design-tokens 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -190,6 +190,129 @@ var light_default = {
       disabledText: "#a3a3a3",
       focus: "#0891b2",
       focusRing: "#06b6d4"
+    },
+    primitive: {
+      cyan: {
+        "50": "#ecfeff",
+        "100": "#cffafe",
+        "200": "#a5f3fc",
+        "300": "#67e8f9",
+        "400": "#22d3ee",
+        "500": "#06b6d4",
+        "600": "#0891b2",
+        "700": "#0e7490",
+        "800": "#155e75",
+        "900": "#164e63"
+      },
+      purple: {
+        "50": "#faf5ff",
+        "100": "#f3e8ff",
+        "200": "#e9d5ff",
+        "300": "#d8b4fe",
+        "400": "#c084fc",
+        "500": "#a855f7",
+        "600": "#9333ea",
+        "700": "#7e22ce",
+        "800": "#6b21a8",
+        "900": "#581c87"
+      },
+      pink: {
+        "50": "#fdf2f8",
+        "100": "#fce7f3",
+        "200": "#fbcfe8",
+        "300": "#f9a8d4",
+        "400": "#f472b6",
+        "500": "#ec4899",
+        "600": "#db2777",
+        "700": "#be185d",
+        "800": "#9f1239",
+        "900": "#831843"
+      },
+      blue: {
+        "50": "#eff6ff",
+        "100": "#dbeafe",
+        "200": "#bfdbfe",
+        "300": "#93c5fd",
+        "400": "#60a5fa",
+        "500": "#3b82f6",
+        "600": "#2563eb",
+        "700": "#1d4ed8",
+        "800": "#1e40af",
+        "900": "#1e3a8a"
+      },
+      green: {
+        "50": "#f0fdf4",
+        "100": "#dcfce7",
+        "200": "#bbf7d0",
+        "300": "#86efac",
+        "400": "#4ade80",
+        "500": "#22c55e",
+        "600": "#16a34a",
+        "700": "#15803d",
+        "800": "#166534",
+        "900": "#14532d"
+      },
+      orange: {
+        "50": "#fff7ed",
+        "100": "#ffedd5",
+        "200": "#fed7aa",
+        "300": "#fdba74",
+        "400": "#fb923c",
+        "500": "#f97316",
+        "600": "#ea580c",
+        "700": "#c2410c",
+        "800": "#9a3412",
+        "900": "#7c2d12"
+      },
+      red: {
+        "50": "#fef2f2",
+        "100": "#fee2e2",
+        "200": "#fecaca",
+        "300": "#fca5a5",
+        "400": "#f87171",
+        "500": "#ef4444",
+        "600": "#dc2626",
+        "700": "#b91c1c",
+        "800": "#991b1b",
+        "900": "#7f1d1d"
+      },
+      amber: {
+        "50": "#fffbeb",
+        "100": "#fef3c7",
+        "200": "#fde68a",
+        "300": "#fcd34d",
+        "400": "#fbbf24",
+        "500": "#f59e0b",
+        "600": "#d97706",
+        "700": "#b45309",
+        "800": "#92400e",
+        "900": "#78350f"
+      },
+      emerald: {
+        "50": "#ecfdf5",
+        "100": "#d1fae5",
+        "200": "#a7f3d0",
+        "300": "#6ee7b7",
+        "400": "#34d399",
+        "500": "#10b981",
+        "600": "#059669",
+        "700": "#047857",
+        "800": "#065f46",
+        "900": "#064e3b"
+      },
+      neutral: {
+        "50": "#fafafa",
+        "100": "#f5f5f5",
+        "200": "#e5e5e5",
+        "300": "#d4d4d4",
+        "400": "#a3a3a3",
+        "500": "#737373",
+        "600": "#525252",
+        "700": "#404040",
+        "800": "#262626",
+        "900": "#171717",
+        "950": "#0a0a0f"
+      }
     }
   }
 };
@@ -365,6 +488,129 @@ var dark_default = {
       secondary: "linear-gradient(135deg, #ff00ff 0%, #00e6ff 100%)",
       accent: "linear-gradient(135deg, #ff7d00 0%, #ff00ff 100%)",
       background: "linear-gradient(180deg, #0a0a0f 0%, #0f0f1a 100%)"
+    },
+    primitive: {
+      cyan: {
+        "50": "rgba(0, 230, 255, 0.1)",
+        "100": "rgba(0, 230, 255, 0.15)",
+        "200": "rgba(0, 230, 255, 0.2)",
+        "300": "#4dffff",
+        "400": "#1affff",
+        "500": "#00e6ff",
+        "600": "#00b8cc",
+        "700": "#008a99",
+        "800": "#005c66",
+        "900": "#003d44"
+      },
+      purple: {
+        "50": "rgba(125, 0, 255, 0.1)",
+        "100": "rgba(125, 0, 255, 0.15)",
+        "200": "rgba(125, 0, 255, 0.2)",
+        "300": "#ab4dff",
+        "400": "#941aff",
+        "500": "#7d00ff",
+        "600": "#6400cc",
+        "700": "#4b0099",
+        "800": "#320066",
+        "900": "#190033"
+      },
+      pink: {
+        "50": "rgba(255, 0, 255, 0.1)",
+        "100": "rgba(255, 0, 255, 0.15)",
+        "200": "rgba(255, 0, 255, 0.2)",
+        "300": "#ff4dff",
+        "400": "#ff1aff",
+        "500": "#ff00ff",
+        "600": "#cc00cc",
+        "700": "#990099",
+        "800": "#660066",
+        "900": "#330033"
+      },
+      blue: {
+        "50": "rgba(0, 125, 255, 0.1)",
+        "100": "rgba(0, 125, 255, 0.15)",
+        "200": "rgba(0, 125, 255, 0.2)",
+        "300": "#80c7ff",
+        "400": "#4dabff",
+        "500": "#007dff",
+        "600": "#0064cc",
+        "700": "#004b99",
+        "800": "#003266",
+        "900": "#001933"
+      },
+      green: {
+        "50": "rgba(0, 255, 0, 0.1)",
+        "100": "rgba(0, 255, 0, 0.15)",
+        "200": "rgba(0, 255, 0, 0.2)",
+        "300": "#80ff80",
+        "400": "#4dff4d",
+        "500": "#00ff00",
+        "600": "#00cc00",
+        "700": "#009900",
+        "800": "#006600",
+        "900": "#003300"
+      },
+      orange: {
+        "50": "rgba(255, 125, 0, 0.1)",
+        "100": "rgba(255, 125, 0, 0.15)",
+        "200": "rgba(255, 125, 0, 0.2)",
+        "300": "#ffc880",
+        "400": "#ffab4d",
+        "500": "#ff7d00",
+        "600": "#cc6400",
+        "700": "#994b00",
+        "800": "#663200",
+        "900": "#331900"
+      },
+      red: {
+        "50": "rgba(239, 68, 68, 0.1)",
+        "100": "rgba(239, 68, 68, 0.15)",
+        "200": "rgba(239, 68, 68, 0.2)",
+        "300": "#fecaca",
+        "400": "#fca5a5",
+        "500": "#f87171",
+        "600": "#c55a5a",
+        "700": "#924343",
+        "800": "#5f2c2c",
+        "900": "#2c1515"
+      },
+      amber: {
+        "50": "rgba(255, 125, 0, 0.1)",
+        "100": "rgba(255, 125, 0, 0.15)",
+        "200": "rgba(255, 125, 0, 0.2)",
+        "300": "#ffc880",
+        "400": "#ffab4d",
+        "500": "#ff7d00",
+        "600": "#cc6400",
+        "700": "#994b00",
+        "800": "#663200",
+        "900": "#331900"
+      },
+      emerald: {
+        "50": "rgba(0, 255, 0, 0.1)",
+        "100": "rgba(0, 255, 0, 0.15)",
+        "200": "rgba(0, 255, 0, 0.2)",
+        "300": "#80ff80",
+        "400": "#4dff4d",
+        "500": "#00ff00",
+        "600": "#00cc00",
+        "700": "#009900",
+        "800": "#006600",
+        "900": "#003300"
+      },
+      neutral: {
+        "50": "#0f0f1a",
+        "100": "#171717",
+        "200": "#262626",
+        "300": "#404040",
+        "400": "#525252",
+        "500": "#737373",
+        "600": "#a3a3a3",
+        "700": "#d4d4d4",
+        "800": "#e5e5e5",
+        "900": "#f5f5f5",
+        "950": "#ffffff"
+      }
     }
   }
 };
@@ -741,29 +987,29 @@ var GRADIENT_DIRECTIONS = {
   TO_BR: "bg-gradient-to-br"
 };
 var GRADIENTS = {
-  // Gradientes de texto
-  TEXT_PRIMARY: "bg-gradient-to-r from-cyan-400 via-purple-400 to-pink-400 bg-clip-text text-transparent",
-  // Gradientes decorativos
-  DECORATIVE_PRIMARY: "bg-gradient-to-br from-cyan-500 via-purple-500 to-pink-500",
-  DECORATIVE_CYAN_PURPLE: "bg-gradient-to-r from-cyan-500 to-purple-500",
-  DECORATIVE_GREEN_EMERALD: "bg-gradient-to-br from-green-500 to-emerald-500",
-  // Gradientes de botões
-  BUTTON_CYAN_BLUE: "bg-gradient-to-r from-cyan-500 to-blue-500",
-  BUTTON_PURPLE_PINK: "bg-gradient-to-r from-purple-500 to-pink-500"
+  // Gradientes de texto usando tokens CSS
+  TEXT_PRIMARY: "bg-linear-to-r from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)] bg-clip-text text-transparent",
+  // Gradientes decorativos usando tokens CSS
+  DECORATIVE_PRIMARY: "bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]",
+  DECORATIVE_CYAN_PURPLE: "bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-secondary-base)]",
+  DECORATIVE_GREEN_EMERALD: "bg-linear-to-br from-[var(--color-status-success)] to-[var(--color-accent-base)]",
+  // Gradientes de botões usando tokens CSS
+  BUTTON_CYAN_BLUE: "bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]",
+  BUTTON_PURPLE_PINK: "bg-linear-to-r from-[var(--color-secondary-base)] to-[var(--color-accent-base)]"
 };
 var BACKGROUND = {
-  // Background completo
-  FULL: "bg-background",
-  // Overlay de gradiente
-  GRADIENT_OVERLAY: "bg-gradient-to-br from-cyan-500/10 via-purple-500/10 to-pink-500/10",
-  // Divisores premium
-  PREMIUM_DIVIDER_CONTAINER: "bg-gradient-to-b from-transparent via-cyan-500/5 to-transparent",
-  PREMIUM_DIVIDER_LINE: "bg-gradient-to-r from-transparent via-cyan-400/50 to-transparent",
-  // Backgrounds de seção
-  SECTION_CYAN: "bg-gradient-to-br from-cyan-500/5 via-cyan-500/3 to-transparent",
-  SECTION_CYAN_VIA: "bg-gradient-to-br from-transparent via-cyan-500/5 to-transparent",
-  SECTION_PURPLE_VIA: "bg-gradient-to-br from-transparent via-purple-500/5 to-transparent",
-  SECTION_PINK_VIA: "bg-gradient-to-br from-transparent via-pink-500/5 to-transparent"
+  // Background completo usando token CSS
+  FULL: "bg-[var(--color-background-primary)]",
+  // Overlay de gradiente usando tokens CSS
+  GRADIENT_OVERLAY: "bg-linear-to-br from-[var(--color-primary-base)]/10 via-[var(--color-secondary-base)]/10 to-[var(--color-accent-base)]/10",
+  // Divisores premium usando tokens CSS
+  PREMIUM_DIVIDER_CONTAINER: "bg-linear-to-b from-transparent via-[var(--color-primary-base)]/5 to-transparent",
+  PREMIUM_DIVIDER_LINE: "bg-linear-to-r from-transparent via-[var(--color-primary-base)]/50 to-transparent",
+  // Backgrounds de seção usando tokens CSS
+  SECTION_CYAN: "bg-linear-to-br from-[var(--color-primary-base)]/5 via-[var(--color-primary-base)]/3 to-transparent",
+  SECTION_CYAN_VIA: "bg-linear-to-br from-transparent via-[var(--color-primary-base)]/5 to-transparent",
+  SECTION_PURPLE_VIA: "bg-linear-to-br from-transparent via-[var(--color-secondary-base)]/5 to-transparent",
+  SECTION_PINK_VIA: "bg-linear-to-br from-transparent via-[var(--color-accent-base)]/5 to-transparent"
 };
 
 // tokens/accessibility.ts