@phcdevworks/spectre-tokens 0.0.1

package/tokens/core.json

@@ -0,0 +1,330 @@
+{
+  "colors": {
+    "brand": {
+      "50": "#f5f0ff",
+      "100": "#ebe2ff",
+      "200": "#d7c6ff",
+      "300": "#bfa1ff",
+      "400": "#a37aff",
+      "500": "#8652ff",
+      "600": "#6c32e6",
+      "700": "#5626b4",
+      "800": "#3d1b7f",
+      "900": "#241147"
+    },
+    "neutral": {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5f5",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a"
+    },
+    "accent": {
+      "50": "#e5fff8",
+      "100": "#b8ffed",
+      "200": "#89ffe1",
+      "300": "#59ffd6",
+      "400": "#29ffca",
+      "500": "#03e6b3",
+      "600": "#00b389",
+      "700": "#008060",
+      "800": "#004d38",
+      "900": "#002a20"
+    },
+    "success": {
+      "50": "#f0fdf4",
+      "100": "#dcfce7",
+      "200": "#bbf7d0",
+      "300": "#86efac",
+      "400": "#4ade80",
+      "500": "#22c55e",
+      "600": "#16a34a",
+      "700": "#15803d",
+      "800": "#166534",
+      "900": "#14532d"
+    },
+    "warning": {
+      "50": "#fffbeb",
+      "100": "#fef3c7",
+      "200": "#fde68a",
+      "300": "#fcd34d",
+      "400": "#fbbf24",
+      "500": "#f59e0b",
+      "600": "#d97706",
+      "700": "#b45309",
+      "800": "#92400e",
+      "900": "#78350f"
+    },
+    "error": {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d"
+    },
+    "info": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    "focus": {
+      "primary": "#8652ff",
+      "error": "#ef4444",
+      "info": "#3b82f6"
+    }
+  },
+  "opacity": {
+    "disabled": "0.38",
+    "hover": "0.92",
+    "active": "0.84",
+    "focus": "1",
+    "overlay": "0.5",
+    "tooltip": "0.95"
+  },
+  "accessibility": {
+    "focusRing": {
+      "width": "2px",
+      "offset": "2px",
+      "style": "solid"
+    },
+    "minTouchTarget": "44px",
+    "minTextSize": "16px"
+  },
+  "buttons": {
+    "primary": {
+      "bg": "#8652ff",
+      "bgHover": "#6c32e6",
+      "bgActive": "#5626b4",
+      "bgDisabled": "#cbd5f5",
+      "text": "#ffffff",
+      "textDisabled": "#94a3b8"
+    },
+    "secondary": {
+      "bg": "#ffffff",
+      "bgHover": "#f1f5f9",
+      "bgActive": "#e2e8f0",
+      "bgDisabled": "#f8fafc",
+      "text": "#8652ff",
+      "textDisabled": "#94a3b8",
+      "border": "#8652ff",
+      "borderDisabled": "#cbd5f5"
+    },
+    "ghost": {
+      "bg": "transparent",
+      "bgHover": "#f5f0ff",
+      "bgActive": "#ebe2ff",
+      "bgDisabled": "transparent",
+      "text": "#8652ff",
+      "textDisabled": "#94a3b8"
+    },
+    "danger": {
+      "bg": "#ef4444",
+      "bgHover": "#dc2626",
+      "bgActive": "#b91c1c",
+      "bgDisabled": "#fecaca",
+      "text": "#ffffff",
+      "textDisabled": "#94a3b8"
+    },
+    "success": {
+      "bg": "#22c55e",
+      "bgHover": "#16a34a",
+      "bgActive": "#15803d",
+      "bgDisabled": "#bbf7d0",
+      "text": "#ffffff",
+      "textDisabled": "#94a3b8"
+    }
+  },
+  "forms": {
+    "default": {
+      "bg": "#ffffff",
+      "border": "#cbd5f5",
+      "text": "#0f172a",
+      "placeholder": "#94a3b8"
+    },
+    "hover": {
+      "border": "#8652ff"
+    },
+    "focus": {
+      "border": "#8652ff",
+      "ring": "#8652ff"
+    },
+    "valid": {
+      "border": "#22c55e",
+      "bg": "#f0fdf4",
+      "text": "#15803d"
+    },
+    "invalid": {
+      "border": "#ef4444",
+      "bg": "#fef2f2",
+      "text": "#b91c1c"
+    },
+    "disabled": {
+      "bg": "#f8fafc",
+      "border": "#e2e8f0",
+      "text": "#94a3b8"
+    }
+  },
+  "spacing": {
+    "none": "0rem",
+    "3xs": "0.125rem",
+    "2xs": "0.25rem",
+    "xs": "0.5rem",
+    "sm": "0.75rem",
+    "md": "1rem",
+    "lg": "1.5rem",
+    "xl": "2rem",
+    "2xl": "3rem",
+    "3xl": "4rem"
+  },
+  "radii": {
+    "none": "0",
+    "sm": "2px",
+    "md": "4px",
+    "lg": "8px",
+    "pill": "999px"
+  },
+  "typography": {
+    "families": {
+      "sans": "'Inter', 'Helvetica Neue', Arial, sans-serif",
+      "serif": "'Spectre Serif', 'Georgia', serif",
+      "mono": "'JetBrains Mono', 'SFMono-Regular', Consolas, monospace"
+    },
+    "scale": {
+      "xs": {
+        "fontSize": "0.75rem",
+        "lineHeight": "1.25rem",
+        "fontWeight": 400,
+        "letterSpacing": "0.02em"
+      },
+      "sm": {
+        "fontSize": "0.875rem",
+        "lineHeight": "1.5rem",
+        "fontWeight": 400
+      },
+      "md": {
+        "fontSize": "1rem",
+        "lineHeight": "1.75rem",
+        "fontWeight": 500
+      },
+      "lg": {
+        "fontSize": "1.25rem",
+        "lineHeight": "2rem",
+        "fontWeight": 600
+      },
+      "xl": {
+        "fontSize": "1.5rem",
+        "lineHeight": "2.125rem",
+        "fontWeight": 600
+      },
+      "2xl": {
+        "fontSize": "1.875rem",
+        "lineHeight": "2.5rem",
+        "fontWeight": 700
+      },
+      "3xl": {
+        "fontSize": "2.25rem",
+        "lineHeight": "2.75rem",
+        "fontWeight": 700
+      }
+    }
+  },
+  "shadows": {
+    "none": "none",
+    "sm": "0 1px 2px 0 rgba(15, 23, 42, 0.08)",
+    "md": "0 3px 8px -1px rgba(15, 23, 42, 0.1)",
+    "lg": "0 8px 20px -4px rgba(15, 23, 42, 0.18)"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "zIndex": {
+    "base": "0",
+    "dropdown": "1000",
+    "sticky": "1100",
+    "fixed": "1200",
+    "overlay": "1300",
+    "modal": "1400",
+    "popover": "1500",
+    "tooltip": "1600"
+  },
+  "transitions": {
+    "duration": {
+      "instant": "75ms",
+      "fast": "150ms",
+      "base": "200ms",
+      "moderate": "300ms",
+      "slow": "500ms",
+      "slower": "700ms"
+    },
+    "easing": {
+      "linear": "linear",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }
+  },
+  "animations": {
+    "fadeIn": {
+      "duration": "200ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "fade-in"
+    },
+    "fadeOut": {
+      "duration": "150ms",
+      "easing": "cubic-bezier(0.4, 0, 1, 1)",
+      "keyframes": "fade-out"
+    },
+    "slideUp": {
+      "duration": "300ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "slide-up"
+    },
+    "slideDown": {
+      "duration": "300ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "slide-down"
+    },
+    "scaleIn": {
+      "duration": "200ms",
+      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "keyframes": "scale-in"
+    },
+    "bounce": {
+      "duration": "500ms",
+      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "keyframes": "bounce"
+    },
+    "shake": {
+      "duration": "400ms",
+      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "keyframes": "shake"
+    },
+    "pulse": {
+      "duration": "1500ms",
+      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "keyframes": "pulse"
+    }
+  }
+}