omnidesign 1.0.1 → 1.1.0

package/packages/tokens-ts/dist/tokens.ts

@@ -0,0 +1,1307 @@
+/* Auto-generated TypeScript tokens - DO NOT EDIT */
+/* Generated by build-tokens.js */
+
+export const tokens = {
+  color: {
+      neutral: {
+        "50": "#FAFAFA",
+        "100": "#F5F5F5",
+        "200": "#E5E5E5",
+        "300": "#D4D4D4",
+        "400": "#A3A3A3",
+        "500": "#737373",
+        "600": "#525252",
+        "700": "#404040",
+        "800": "#262626",
+        "900": "#171717",
+        "950": "#0A0A0A"
+      },
+      blue: {
+        "50": "#EFF6FF",
+        "100": "#DBEAFE",
+        "200": "#BFDBFE",
+        "300": "#93C5FD",
+        "400": "#60A5FA",
+        "500": "#2563EB",
+        "600": "#1D4ED8",
+        "700": "#1E40AF",
+        "800": "#1E3A8A",
+        "900": "#172554",
+        "950": "#0F172A"
+      },
+      purple: {
+        "50": "#F5F3FF",
+        "100": "#EDE9FE",
+        "200": "#DDD6FE",
+        "300": "#C4B5FD",
+        "400": "#A78BFA",
+        "500": "#6D28D9",
+        "600": "#5B21B6",
+        "700": "#4C1D95",
+        "800": "#3730A3",
+        "900": "#312E81",
+        "950": "#1E1B4B"
+      },
+      green: {
+        "500": "#22C55E",
+        "600": "#16A34A"
+      },
+      amber: {
+        "500": "#F59E0B",
+        "600": "#D97706"
+      },
+      red: {
+        "500": "#EF4444",
+        "600": "#DC2626"
+      },
+      white: "#FFFFFF",
+      black: "#000000",
+      text: {
+        default: "#171717",
+        muted: "#737373",
+        inverted: "#FFFFFF",
+        link: "#2563EB",
+        "link.hover": "#1D4ED8"
+      },
+      surface: {
+        default: "#FFFFFF",
+        raised: "#FFFFFF",
+        sunken: "#FAFAFA",
+        overlay: "#0A0A0A"
+      },
+      border: {
+        default: "#E5E5E5",
+        subtle: "#F5F5F5",
+        strong: "#D4D4D4"
+      },
+      interactive: {
+        primary: "#2563EB",
+        "primary.hover": "#1D4ED8",
+        secondary: "#F5F5F5"
+      },
+      status: {
+        success: "#22C55E",
+        warning: "#F59E0B",
+        error: "#EF4444",
+        info: "#2563EB"
+      },
+      focus: {
+        ring: "#2563EB"
+      }
+    },
+  spacing: {
+      "0": "0px",
+      "1": "4px",
+      "2": "8px",
+      "3": "12px",
+      "4": "16px",
+      "5": "20px",
+      "6": "24px",
+      "8": "32px",
+      "10": "40px",
+      "12": "48px",
+      "16": "64px",
+      "20": "80px",
+      "24": "96px",
+      space: {
+        sectionY: "64px",
+        sectionX: "24px",
+        cardPadding: "24px",
+        cardGap: "16px",
+        stackSm: "8px",
+        stackMd: "16px",
+        stackLg: "24px",
+        inlineSm: "8px",
+        inlineMd: "16px",
+        inlineLg: "24px",
+        formGap: "16px",
+        inputPadding: "12px",
+        containerMax: "96px"
+      }
+    },
+  radii: {
+      none: "0px",
+      sm: "4px",
+      md: "8px",
+      lg: "12px",
+      xl: "16px",
+      "2xl": "24px",
+      full: "9999px",
+      radius: {
+        button: "8px",
+        input: "8px",
+        card: "12px",
+        modal: "16px",
+        badge: "9999px"
+      }
+    },
+  typography: {
+      fontFamily: {
+        sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        mono: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace"
+      },
+      fontSize: {
+        xs: "12px",
+        sm: "14px",
+        base: "16px",
+        lg: "18px",
+        xl: "20px",
+        "2xl": "24px",
+        "3xl": "30px",
+        "4xl": "36px",
+        "5xl": "48px",
+        "6xl": "60px"
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        snug: 1.375,
+        normal: 1.5,
+        relaxed: 1.625
+      },
+      letterSpacing: {
+        tight: "-0.025em",
+        normal: "0em",
+        wide: "0.025em"
+      },
+      heading: {
+        hero: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"60px","fontWeight":700,"lineHeight":1.25,"letterSpacing":"-0.025em"},
+        page: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"36px","fontWeight":700,"lineHeight":1.25,"letterSpacing":"-0.025em"},
+        section: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"24px","fontWeight":600,"lineHeight":1.375,"letterSpacing":"-0.025em"},
+        card: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"20px","fontWeight":600,"lineHeight":1.375,"letterSpacing":"0em"}
+      },
+      body: {
+        default: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"16px","fontWeight":400,"lineHeight":1.5,"letterSpacing":"0em"},
+        small: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"14px","fontWeight":400,"lineHeight":1.5,"letterSpacing":"0em"},
+        large: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"18px","fontWeight":400,"lineHeight":1.625,"letterSpacing":"0em"}
+      },
+      ui: {
+        label: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"14px","fontWeight":500,"lineHeight":1.5,"letterSpacing":"0em"},
+        button: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"16px","fontWeight":500,"lineHeight":1.5,"letterSpacing":"0.025em"},
+        caption: {"fontFamily":"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif","fontSize":"12px","fontWeight":400,"lineHeight":1.5,"letterSpacing":"0em"}
+      }
+    },
+  shadows: {
+      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+      lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+      xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+      glow: {
+        blue: "0 0 0 3px rgba(37, 99, 235, 0.4)",
+        purple: "0 0 0 3px rgba(109, 40, 217, 0.4)"
+      },
+      shadow: {
+        card: "{shadow.md}",
+        dropdown: "{shadow.lg}",
+        modal: "{shadow.xl}",
+        focus: "{shadow.glow.blue}"
+      }
+    },
+  motion: {
+      duration: {
+        instant: "0ms",
+        fast: "150ms",
+        normal: "300ms",
+        slow: "500ms",
+        slower: "700ms"
+      },
+      easing: {
+        linear: [0,0,1,1],
+        easeIn: [0.4,0,1,1],
+        easeOut: [0,0,0.2,1],
+        easeInOut: [0.4,0,0.2,1],
+        spring: [0.34,1.56,0.64,1]
+      },
+      motion: {
+        hover: {"duration":"150ms","easing":[0,0,0.2,1]},
+        enter: {"duration":"300ms","easing":[0,0,0.2,1]},
+        exit: {"duration":"150ms","easing":[0.4,0,1,1]},
+        page: {"duration":"500ms","easing":[0.4,0,0.2,1]},
+        spring: {"duration":"300ms","easing":[0.34,1.56,0.64,1]}
+      }
+    },
+  themes: {
+    "starry-night": {
+        theme: "starry-night",
+        color: {
+          text: {
+            default: "#F1F5F9",
+            muted: "#94A3B8",
+            inverted: "#0F172A",
+            link: "#60A5FA",
+            "link.hover": "#93C5FD"
+          },
+          surface: {
+            default: "#0F172A",
+            raised: "#1E293B",
+            sunken: "#020617",
+            overlay: "rgba(15, 23, 42, 0.8)"
+          },
+          border: {
+            default: "#334155",
+            subtle: "#1E293B",
+            strong: "#475569"
+          },
+          interactive: {
+            primary: "#2563EB",
+            "primary.hover": "#3B82F6",
+            secondary: "#6D28D9"
+          },
+          focus: {
+            ring: "#7C3AED"
+          },
+          status: {
+            success: "#2DD4BF",
+            warning: "#FBBF24",
+            error: "#F87171",
+            info: "#60A5FA"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -2px rgba(37, 99, 235, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
+          focus: "0 0 0 3px rgba(109, 40, 217, 0.5)"
+        }
+      },
+    "corporate": {
+        theme: "corporate",
+        color: {
+          text: {
+            default: "#1F2937",
+            muted: "#6B7280",
+            inverted: "#FFFFFF",
+            link: "#2563EB",
+            "link.hover": "#1D4ED8"
+          },
+          surface: {
+            default: "#FFFFFF",
+            raised: "#F9FAFB",
+            sunken: "#F3F4F6",
+            overlay: "rgba(0, 0, 0, 0.5)"
+          },
+          border: {
+            default: "#E5E7EB",
+            subtle: "#F3F4F6",
+            strong: "#D1D5DB"
+          },
+          interactive: {
+            primary: "#0052CC",
+            "primary.hover": "#003E8F",
+            secondary: "#4A5568"
+          },
+          focus: {
+            ring: "#0052CC"
+          },
+          status: {
+            success: "#00875A",
+            warning: "#FF8B00",
+            error: "#DE350B",
+            info: "#0065FF"
+          }
+        },
+        shadow: {
+          card: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
+          dropdown: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+          focus: "0 0 0 3px rgba(0, 82, 204, 0.3)"
+        }
+      },
+    "daylight": {
+        theme: "daylight",
+        color: {
+          text: {
+            default: "#1A202C",
+            muted: "#64748B",
+            inverted: "#FFFFFF",
+            link: "#2563EB",
+            "link.hover": "#1D4ED8"
+          },
+          surface: {
+            default: "#FFFFFF",
+            raised: "#F8FAFC",
+            sunken: "#F1F5F9",
+            overlay: "rgba(15, 23, 42, 0.5)"
+          },
+          border: {
+            default: "#E2E8F0",
+            subtle: "#F1F5F9",
+            strong: "#CBD5E1"
+          },
+          interactive: {
+            primary: "#3B82F6",
+            "primary.hover": "#2563EB",
+            secondary: "#0EA5E9"
+          },
+          focus: {
+            ring: "#60A5FA"
+          },
+          status: {
+            success: "#059669",
+            warning: "#D97706",
+            error: "#DC2626",
+            info: "#2563EB"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08)",
+          focus: "0 0 0 3px rgba(59, 130, 246, 0.3)"
+        }
+      },
+    "navy": {
+        theme: "navy",
+        color: {
+          text: {
+            default: "#F1F5F9",
+            muted: "#94A3B8",
+            inverted: "#0A1628",
+            link: "#FBBF24",
+            "link.hover": "#F59E0B"
+          },
+          surface: {
+            default: "#0F172A",
+            raised: "#1E293B",
+            sunken: "#020617",
+            overlay: "rgba(10, 22, 40, 0.85)"
+          },
+          border: {
+            default: "#1E3A5F",
+            subtle: "#1E293B",
+            strong: "#334155"
+          },
+          interactive: {
+            primary: "#D4AF37",
+            "primary.hover": "#EAC054",
+            secondary: "#475569"
+          },
+          focus: {
+            ring: "#D4AF37"
+          },
+          status: {
+            success: "#34D399",
+            warning: "#FBBF24",
+            error: "#F87171",
+            info: "#60A5FA"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(212, 175, 55, 0.15), 0 2px 4px -1px rgba(212, 175, 55, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+          modal: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -4px rgba(0, 0, 0, 0.4)",
+          focus: "0 0 0 3px rgba(212, 175, 55, 0.4)"
+        }
+      },
+    "paper": {
+        theme: "paper",
+        color: {
+          text: {
+            default: "#292524",
+            muted: "#78716C",
+            inverted: "#FAF7F5",
+            link: "#881337",
+            "link.hover": "#6B1B34"
+          },
+          surface: {
+            default: "#FAF7F5",
+            raised: "#F5F0EB",
+            sunken: "#EDE7DF",
+            overlay: "rgba(41, 37, 36, 0.5)"
+          },
+          border: {
+            default: "#D6D3D1",
+            subtle: "#E7E5E4",
+            strong: "#A8A29E"
+          },
+          interactive: {
+            primary: "#9F1239",
+            "primary.hover": "#881337",
+            secondary: "#C2410C"
+          },
+          focus: {
+            ring: "#BE123C"
+          },
+          status: {
+            success: "#15803D",
+            warning: "#B45309",
+            error: "#9F1239",
+            info: "#1D4ED8"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(41, 37, 36, 0.05), 0 2px 4px -2px rgba(41, 37, 36, 0.03)",
+          dropdown: "0 10px 15px -3px rgba(41, 37, 36, 0.08), 0 4px 6px -4px rgba(41, 37, 36, 0.05)",
+          modal: "0 20px 25px -5px rgba(41, 37, 36, 0.1), 0 8px 10px -6px rgba(41, 37, 36, 0.08)",
+          focus: "0 0 0 3px rgba(159, 18, 57, 0.3)"
+        }
+      },
+    "slate": {
+        theme: "slate",
+        color: {
+          text: {
+            default: "#0F172A",
+            muted: "#64748B",
+            inverted: "#FFFFFF",
+            link: "#0D9488",
+            "link.hover": "#0F766E"
+          },
+          surface: {
+            default: "#FFFFFF",
+            raised: "#F8FAFC",
+            sunken: "#E2E8F0",
+            overlay: "rgba(15, 23, 42, 0.6)"
+          },
+          border: {
+            default: "#E2E8F0",
+            subtle: "#F1F5F9",
+            strong: "#CBD5E1"
+          },
+          interactive: {
+            primary: "#14B8A6",
+            "primary.hover": "#0D9488",
+            secondary: "#475569"
+          },
+          focus: {
+            ring: "#14B8A6"
+          },
+          status: {
+            success: "#10B981",
+            warning: "#F59E0B",
+            error: "#EF4444",
+            info: "#3B82F6"
+          }
+        },
+        shadow: {
+          card: "0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06)",
+          dropdown: "0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.08)",
+          modal: "0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04)",
+          focus: "0 0 0 3px rgba(20, 184, 166, 0.3)"
+        }
+      },
+    "sunset": {
+        theme: "sunset",
+        color: {
+          text: {
+            default: "#1A1A2E",
+            muted: "#5C5C7A",
+            inverted: "#FFF5EB",
+            link: "#FF6B35",
+            "link.hover": "#FF8C61"
+          },
+          surface: {
+            default: "#FFF5EB",
+            raised: "#FFFFFF",
+            sunken: "#FFE8D6",
+            overlay: "rgba(255, 107, 53, 0.15)"
+          },
+          border: {
+            default: "#FFB088",
+            subtle: "#FFD4C2",
+            strong: "#FF8C61"
+          },
+          interactive: {
+            primary: "#FF6B35",
+            "primary.hover": "#FF8C61",
+            secondary: "#D63384"
+          },
+          focus: {
+            ring: "#FF8C61"
+          },
+          status: {
+            success: "#10B981",
+            warning: "#F59E0B",
+            error: "#EF4444",
+            info: "#3B82F6"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(255, 107, 53, 0.12), 0 2px 4px -2px rgba(255, 107, 53, 0.08)",
+          dropdown: "0 10px 15px -3px rgba(255, 107, 53, 0.15), 0 4px 6px -4px rgba(255, 107, 53, 0.1)",
+          modal: "0 20px 25px -5px rgba(255, 107, 53, 0.2), 0 8px 10px -6px rgba(255, 107, 53, 0.15)",
+          focus: "0 0 0 3px rgba(255, 140, 97, 0.4)"
+        }
+      },
+    "forest": {
+        theme: "forest",
+        color: {
+          text: {
+            default: "#F0FDF4",
+            muted: "#86EFAC",
+            inverted: "#052E16",
+            link: "#4ADE80",
+            "link.hover": "#86EFAC"
+          },
+          surface: {
+            default: "#064E3B",
+            raised: "#065F46",
+            sunken: "#022C22",
+            overlay: "rgba(5, 46, 22, 0.9)"
+          },
+          border: {
+            default: "#065F46",
+            subtle: "#064E3B",
+            strong: "#047857"
+          },
+          interactive: {
+            primary: "#22C55E",
+            "primary.hover": "#16A34A",
+            secondary: "#34D399"
+          },
+          focus: {
+            ring: "#4ADE80"
+          },
+          status: {
+            success: "#86EFAC",
+            warning: "#FDE047",
+            error: "#FDA4AF",
+            info: "#67E8F9"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(34, 197, 94, 0.2), 0 2px 4px -1px rgba(34, 197, 94, 0.15)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+          modal: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -4px rgba(0, 0, 0, 0.4)",
+          focus: "0 0 0 3px rgba(74, 222, 128, 0.4)"
+        }
+      },
+    "cream": {
+        theme: "cream",
+        color: {
+          text: {
+            default: "#2D3748",
+            muted: "#718096",
+            inverted: "#F5F5DC",
+            link: "#5A8F5E",
+            "link.hover": "#4A7A4E"
+          },
+          surface: {
+            default: "#F5F5DC",
+            raised: "#EFEEE6",
+            sunken: "#E8E7DC",
+            overlay: "rgba(45, 55, 72, 0.5)"
+          },
+          border: {
+            default: "#D7D9D4",
+            subtle: "#E8E8E2",
+            strong: "#A0A59C"
+          },
+          interactive: {
+            primary: "#4A7C59",
+            "primary.hover": "#3D6A4B",
+            secondary: "#6B8E6E"
+          },
+          focus: {
+            ring: "#5A9F6A"
+          },
+          status: {
+            success: "#276749",
+            warning: "#975A16",
+            error: "#9B2C2C",
+            info: "#2B6CB0"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(45, 55, 72, 0.05), 0 2px 4px -2px rgba(45, 55, 72, 0.03)",
+          dropdown: "0 10px 15px -3px rgba(45, 55, 72, 0.08), 0 4px 6px -4px rgba(45, 55, 72, 0.05)",
+          modal: "0 20px 25px -5px rgba(45, 55, 72, 0.1), 0 8px 10px -6px rgba(45, 55, 72, 0.08)",
+          focus: "0 0 0 3px rgba(74, 124, 89, 0.3)"
+        }
+      },
+    "midnight": {
+        theme: "midnight",
+        color: {
+          text: {
+            default: "#F1F5F9",
+            muted: "#64748B",
+            inverted: "#0A0A0F",
+            link: "#38BDF8",
+            "link.hover": "#7DD3FC"
+          },
+          surface: {
+            default: "#0A0A0F",
+            raised: "#111116",
+            sunken: "#050508",
+            overlay: "rgba(10, 10, 15, 0.85)"
+          },
+          border: {
+            default: "#1C1C24",
+            subtle: "#0F0F15",
+            strong: "#2A2A33"
+          },
+          interactive: {
+            primary: "#38BDF8",
+            "primary.hover": "#7DD3FC",
+            secondary: "#1E293B"
+          },
+          focus: {
+            ring: "#38BDF8"
+          },
+          status: {
+            success: "#22D3EE",
+            warning: "#FBBF24",
+            error: "#F87171",
+            info: "#38BDF8"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(56, 189, 248, 0.15), 0 2px 4px -2px rgba(56, 189, 248, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.4)",
+          focus: "0 0 0 3px rgba(56, 189, 248, 0.5)"
+        }
+      },
+    "ruby": {
+        theme: "ruby",
+        color: {
+          text: {
+            default: "#FEF2F2",
+            muted: "#FCA5A5",
+            inverted: "#4C0519",
+            link: "#FB7185",
+            "link.hover": "#FDA4AF"
+          },
+          surface: {
+            default: "#881337",
+            raised: "#9F1239",
+            sunken: "#4C0519",
+            overlay: "rgba(76, 5, 25, 0.85)"
+          },
+          border: {
+            default: "#9F1239",
+            subtle: "#881337",
+            strong: "#BE123C"
+          },
+          interactive: {
+            primary: "#E11D48",
+            "primary.hover": "#BE123C",
+            secondary: "#F43F5E"
+          },
+          focus: {
+            ring: "#FB7185"
+          },
+          status: {
+            success: "#86EFAC",
+            warning: "#FDE047",
+            error: "#FDA4AF",
+            info: "#67E8F9"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(225, 29, 72, 0.2), 0 2px 4px -1px rgba(225, 29, 72, 0.15)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+          modal: "0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 12px 24px -4px rgba(0, 0, 0, 0.4)",
+          focus: "0 0 0 3px rgba(251, 113, 133, 0.4)"
+        }
+      },
+    "graphite": {
+        theme: "graphite",
+        color: {
+          text: {
+            default: "#171717",
+            muted: "#737373",
+            inverted: "#FAFAFA",
+            link: "#262626",
+            "link.hover": "#404040"
+          },
+          surface: {
+            default: "#FFFFFF",
+            raised: "#F5F5F5",
+            sunken: "#E5E5E5",
+            overlay: "rgba(23, 23, 23, 0.75)"
+          },
+          border: {
+            default: "#E5E5E5",
+            subtle: "#F5F5F5",
+            strong: "#D4D4D4"
+          },
+          interactive: {
+            primary: "#262626",
+            "primary.hover": "#404040",
+            secondary: "#525252"
+          },
+          focus: {
+            ring: "#262626"
+          },
+          status: {
+            success: "#16A34A",
+            warning: "#CA8A04",
+            error: "#DC2626",
+            info: "#2563EB"
+          }
+        },
+        shadow: {
+          card: "0 1px 2px rgba(23, 23, 23, 0.1), 0 1px 3px rgba(23, 23, 23, 0.08)",
+          dropdown: "0 4px 6px -1px rgba(23, 23, 23, 0.15), 0 2px 4px -1px rgba(23, 23, 23, 0.1)",
+          modal: "0 20px 25px -5px rgba(23, 23, 23, 0.15), 0 8px 10px -6px rgba(23, 23, 23, 0.1)",
+          focus: "0 0 0 2px rgba(38, 38, 38, 0.4)"
+        }
+      },
+    "noir": {
+        theme: "noir",
+        color: {
+          text: {
+            default: "#FFFFFF",
+            muted: "#A0A0A0",
+            inverted: "#000000",
+            link: "#808080",
+            "link.hover": "#C0C0C0"
+          },
+          surface: {
+            default: "#000000",
+            raised: "#0D0D0D",
+            sunken: "#000000",
+            overlay: "rgba(0, 0, 0, 0.9)"
+          },
+          border: {
+            default: "#262626",
+            subtle: "#1A1A1A",
+            strong: "#404040"
+          },
+          interactive: {
+            primary: "#FFFFFF",
+            "primary.hover": "#E5E5E5",
+            secondary: "#262626"
+          },
+          focus: {
+            ring: "#FFFFFF"
+          },
+          status: {
+            success: "#4ADE80",
+            warning: "#FBBF24",
+            error: "#FF6B6B",
+            info: "#FFFFFF"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -2px rgba(255, 255, 255, 0.05)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(0, 0, 0, 0.4)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.6)",
+          focus: "0 0 0 3px rgba(255, 255, 255, 0.6)"
+        }
+      },
+    "ocean": {
+        theme: "ocean",
+        color: {
+          text: {
+            default: "#E0F2FE",
+            muted: "#94A3B8",
+            inverted: "#082F49",
+            link: "#22D3EE",
+            "link.hover": "#67E8F9"
+          },
+          surface: {
+            default: "#0C4A6E",
+            raised: "#075985",
+            sunken: "#083344",
+            overlay: "rgba(8, 47, 73, 0.85)"
+          },
+          border: {
+            default: "#0369A1",
+            subtle: "#0E7490",
+            strong: "#0EA5E9"
+          },
+          interactive: {
+            primary: "#22D3EE",
+            "primary.hover": "#67E8F9",
+            secondary: "#38BDF8"
+          },
+          focus: {
+            ring: "#22D3EE"
+          },
+          status: {
+            success: "#34D399",
+            warning: "#FBBF24",
+            error: "#FB7185",
+            info: "#38BDF8"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(34, 211, 238, 0.15), 0 2px 4px -2px rgba(34, 211, 238, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(34, 211, 238, 0.15)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(34, 211, 238, 0.2)",
+          focus: "0 0 0 3px rgba(34, 211, 238, 0.4)"
+        }
+      },
+    "cyberpunk": {
+        theme: "cyberpunk",
+        color: {
+          text: {
+            default: "#E0E0E0",
+            muted: "#9CA3AF",
+            inverted: "#000000",
+            link: "#F472B6",
+            "link.hover": "#FB7185"
+          },
+          surface: {
+            default: "#050505",
+            raised: "#0A0A0A",
+            sunken: "#000000",
+            overlay: "rgba(5, 5, 5, 0.9)"
+          },
+          border: {
+            default: "#2D1B4E",
+            subtle: "#1A1A2E",
+            strong: "#4C1D95"
+          },
+          interactive: {
+            primary: "#F472B6",
+            "primary.hover": "#FB7185",
+            secondary: "#A855F7"
+          },
+          focus: {
+            ring: "#D946EF"
+          },
+          status: {
+            success: "#39FF14",
+            warning: "#FFFF00",
+            error: "#FF006E",
+            info: "#00FFFF"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(244, 114, 182, 0.3), 0 2px 4px -2px rgba(217, 70, 239, 0.2)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(217, 70, 239, 0.3)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(244, 114, 182, 0.4)",
+          focus: "0 0 0 3px rgba(244, 114, 182, 0.8), 0 0 10px rgba(217, 70, 239, 0.4)"
+        }
+      },
+    "berry": {
+        theme: "berry",
+        color: {
+          text: {
+            default: "#2D1B2E",
+            muted: "#6B5B6B",
+            inverted: "#FFF5F9",
+            link: "#D946EF",
+            "link.hover": "#E879F9"
+          },
+          surface: {
+            default: "#FFF5F9",
+            raised: "#FFFFFF",
+            sunken: "#FDF2F8",
+            overlay: "rgba(217, 70, 239, 0.12)"
+          },
+          border: {
+            default: "#F5D0FE",
+            subtle: "#FAE8FF",
+            strong: "#E879F9"
+          },
+          interactive: {
+            primary: "#D946EF",
+            "primary.hover": "#E879F9",
+            secondary: "#BE185D"
+          },
+          focus: {
+            ring: "#E879F9"
+          },
+          status: {
+            success: "#059669",
+            warning: "#D97706",
+            error: "#DC2626",
+            info: "#0891B2"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(217, 70, 239, 0.15), 0 2px 4px -2px rgba(217, 70, 239, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(217, 70, 239, 0.2), 0 4px 6px -4px rgba(217, 70, 239, 0.15)",
+          modal: "0 20px 25px -5px rgba(217, 70, 239, 0.25), 0 8px 10px -6px rgba(217, 70, 239, 0.18)",
+          focus: "0 0 0 3px rgba(232, 121, 249, 0.4)"
+        }
+      },
+    "obsidian": {
+        theme: "obsidian",
+        color: {
+          text: {
+            default: "#DCD7D1",
+            muted: "#A8A097",
+            inverted: "#282828",
+            link: "#7AA2F7",
+            "link.hover": "#9BC278"
+          },
+          surface: {
+            default: "#282828",
+            raised: "#323232",
+            sunken: "#1E1E1E",
+            overlay: "rgba(40, 40, 40, 0.85)"
+          },
+          border: {
+            default: "#454545",
+            subtle: "#323232",
+            strong: "#585858"
+          },
+          interactive: {
+            primary: "#7AA2F7",
+            "primary.hover": "#9BC278",
+            secondary: "#504945"
+          },
+          focus: {
+            ring: "#7AA2F7"
+          },
+          status: {
+            success: "#38B764",
+            warning: "#FAB005",
+            error: "#FA5252",
+            info: "#7AA2F7"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(122, 162, 247, 0.15), 0 2px 4px -2px rgba(122, 162, 247, 0.1)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4)",
+          focus: "0 0 0 3px rgba(122, 162, 247, 0.4)"
+        }
+      },
+    "deep-space": {
+        theme: "deep-space",
+        color: {
+          text: {
+            default: "#E9D5FF",
+            muted: "#A78BFA",
+            inverted: "#0D0015",
+            link: "#C084FC",
+            "link.hover": "#D8B4FE"
+          },
+          surface: {
+            default: "#0D0015",
+            raised: "#1A0526",
+            sunken: "#05000A",
+            overlay: "rgba(13, 0, 21, 0.9)"
+          },
+          border: {
+            default: "#2E1065",
+            subtle: "#1A0526",
+            strong: "#581C87"
+          },
+          interactive: {
+            primary: "#C084FC",
+            "primary.hover": "#E879F9",
+            secondary: "#3B0764"
+          },
+          focus: {
+            ring: "#E9D5FF"
+          },
+          status: {
+            success: "#34D399",
+            warning: "#FBBF24",
+            error: "#FC8181",
+            info: "#E9D5FF"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(192, 132, 252, 0.2), 0 2px 4px -2px rgba(139, 92, 246, 0.15)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -4px rgba(139, 92, 246, 0.3)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.75), 0 8px 10px -6px rgba(192, 132, 252, 0.4)",
+          focus: "0 0 0 3px rgba(233, 213, 255, 0.6), 0 0 8px rgba(192, 132, 252, 0.3)"
+        }
+      },
+    "brutalist": {
+        theme: "brutalist",
+        color: {
+          text: {
+            default: "#FFFFFF",
+            muted: "#808080",
+            inverted: "#000000",
+            link: "#FFD700",
+            "link.hover": "#FFED4A"
+          },
+          surface: {
+            default: "#000000",
+            raised: "#000000",
+            sunken: "#FFFFFF",
+            overlay: "rgba(0, 0, 0, 0.95)"
+          },
+          border: {
+            default: "#FFFFFF",
+            subtle: "#404040",
+            strong: "#FFFFFF"
+          },
+          interactive: {
+            primary: "#FFD700",
+            "primary.hover": "#FFED4A",
+            secondary: "#FFFFFF"
+          },
+          focus: {
+            ring: "#FFD700"
+          },
+          status: {
+            success: "#00FF00",
+            warning: "#FFD700",
+            error: "#FF0000",
+            info: "#FFFFFF"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(255, 215, 0, 0.3), 0 2px 4px -2px rgba(255, 255, 255, 0.2)",
+          dropdown: "0 10px 15px -3px rgba(255, 255, 255, 0.3), 0 4px 6px -4px rgba(255, 215, 0, 0.2)",
+          modal: "0 20px 25px -5px rgba(255, 255, 255, 0.4), 0 8px 10px -6px rgba(255, 215, 0, 0.3)",
+          focus: "0 0 0 3px rgba(255, 215, 0, 0.8)"
+        }
+      },
+    "mint": {
+        theme: "mint",
+        color: {
+          text: {
+            default: "#1A3C34",
+            muted: "#5A7268",
+            inverted: "#F0FDF4",
+            link: "#34D399",
+            "link.hover": "#6EE7B7"
+          },
+          surface: {
+            default: "#F0FDF4",
+            raised: "#FFFFFF",
+            sunken: "#DCFCE7",
+            overlay: "rgba(52, 211, 153, 0.1)"
+          },
+          border: {
+            default: "#A7F3D0",
+            subtle: "#D8B4FE",
+            strong: "#6EE7B7"
+          },
+          interactive: {
+            primary: "#34D399",
+            "primary.hover": "#6EE7B7",
+            secondary: "#8B5CF6"
+          },
+          focus: {
+            ring: "#6EE7B7"
+          },
+          status: {
+            success: "#059669",
+            warning: "#D97706",
+            error: "#DC2626",
+            info: "#0891B2"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(52, 211, 153, 0.12), 0 2px 4px -2px rgba(52, 211, 153, 0.08)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(52, 211, 153, 0.1)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(52, 211, 153, 0.12)",
+          focus: "0 0 0 3px rgba(110, 231, 183, 0.35)"
+        }
+      },
+    "coral": {
+        theme: "coral",
+        color: {
+          text: {
+            default: "#2D1F1B",
+            muted: "#6B5B52",
+            inverted: "#FFF7ED",
+            link: "#F97316",
+            "link.hover": "#FB923C"
+          },
+          surface: {
+            default: "#FFF7ED",
+            raised: "#FFFFFF",
+            sunken: "#FFEDD5",
+            overlay: "rgba(249, 115, 22, 0.12)"
+          },
+          border: {
+            default: "#FDBA74",
+            subtle: "#FED7AA",
+            strong: "#FB923C"
+          },
+          interactive: {
+            primary: "#F97316",
+            "primary.hover": "#FB923C",
+            secondary: "#C2410C"
+          },
+          focus: {
+            ring: "#FB923C"
+          },
+          status: {
+            success: "#059669",
+            warning: "#D97706",
+            error: "#DC2626",
+            info: "#0891B2"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(249, 115, 22, 0.12), 0 2px 4px -2px rgba(249, 115, 22, 0.08)",
+          dropdown: "0 10px 15px -3px rgba(249, 115, 22, 0.15), 0 4px 6px -4px rgba(249, 115, 22, 0.1)",
+          modal: "0 20px 25px -5px rgba(249, 115, 22, 0.2), 0 8px 10px -6px rgba(249, 115, 22, 0.15)",
+          focus: "0 0 0 3px rgba(251, 146, 60, 0.4)"
+        }
+      },
+    "lavender": {
+        theme: "lavender",
+        color: {
+          text: {
+            default: "#2D1B4E",
+            muted: "#6B5A7A",
+            inverted: "#FAF5FF",
+            link: "#A78BFA",
+            "link.hover": "#C4B5FD"
+          },
+          surface: {
+            default: "#FAF5FF",
+            raised: "#FFFFFF",
+            sunken: "#F3E8FF",
+            overlay: "rgba(167, 139, 250, 0.1)"
+          },
+          border: {
+            default: "#DDD6FE",
+            subtle: "#EDE9FE",
+            strong: "#C4B5FD"
+          },
+          interactive: {
+            primary: "#8B5CF6",
+            "primary.hover": "#A78BFA",
+            secondary: "#7C3AED"
+          },
+          focus: {
+            ring: "#A78BFA"
+          },
+          status: {
+            success: "#10B981",
+            warning: "#F59E0B",
+            error: "#EF4444",
+            info: "#38BDF8"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(139, 92, 246, 0.12), 0 2px 4px -2px rgba(139, 92, 246, 0.08)",
+          dropdown: "0 10px 15px -3px rgba(139, 92, 246, 0.15), 0 4px 6px -4px rgba(139, 92, 246, 0.1)",
+          modal: "0 20px 25px -5px rgba(139, 92, 246, 0.2), 0 8px 10px -6px rgba(139, 92, 246, 0.15)",
+          focus: "0 0 0 3px rgba(167, 139, 250, 0.4)"
+        }
+      },
+    "snow": {
+        theme: "snow",
+        color: {
+          text: {
+            default: "#18181B",
+            muted: "#71717A",
+            inverted: "#FFFFFF",
+            link: "#3B82F6",
+            "link.hover": "#2563EB"
+          },
+          surface: {
+            default: "#FFFFFF",
+            raised: "#FAFAFA",
+            sunken: "#F4F4F5",
+            overlay: "rgba(0, 0, 0, 0.4)"
+          },
+          border: {
+            default: "#E4E4E7",
+            subtle: "#F4F4F5",
+            strong: "#A1A1AA"
+          },
+          interactive: {
+            primary: "#3B82F6",
+            "primary.hover": "#2563EB",
+            secondary: "#71717A"
+          },
+          focus: {
+            ring: "#60A5FA"
+          },
+          status: {
+            success: "#16A34A",
+            warning: "#CA8A04",
+            error: "#DC2626",
+            info: "#3B82F6"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02)",
+          dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04)",
+          modal: "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06)",
+          focus: "0 0 0 3px rgba(59, 130, 246, 0.3)"
+        }
+      },
+    "spring": {
+        theme: "spring",
+        color: {
+          text: {
+            default: "#1F2937",
+            muted: "#6B7280",
+            inverted: "#F0FDFA",
+            link: "#0D9488",
+            "link.hover": "#0F766E"
+          },
+          surface: {
+            default: "#F0FDFA",
+            raised: "#ECFDF5",
+            sunken: "#E6F7F2",
+            overlay: "rgba(31, 41, 55, 0.5)"
+          },
+          border: {
+            default: "#CCFBF1",
+            subtle: "#ECFDF5",
+            strong: "#99F6E4"
+          },
+          interactive: {
+            primary: "#14B8A6",
+            "primary.hover": "#0D9488",
+            secondary: "#F472B6"
+          },
+          focus: {
+            ring: "#5EEAD4"
+          },
+          status: {
+            success: "#059669",
+            warning: "#D97706",
+            error: "#DB2777",
+            info: "#0D9488"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(31, 41, 55, 0.05), 0 2px 4px -2px rgba(31, 41, 55, 0.03)",
+          dropdown: "0 10px 15px -3px rgba(31, 41, 55, 0.08), 0 4px 6px -4px rgba(31, 41, 55, 0.05)",
+          modal: "0 20px 25px -5px rgba(31, 41, 55, 0.1), 0 8px 10px -6px rgba(31, 41, 55, 0.08)",
+          focus: "0 0 0 3px rgba(20, 184, 166, 0.3)"
+        }
+      },
+    "solar": {
+        theme: "solar",
+        color: {
+          text: {
+            default: "#292524",
+            muted: "#78716C",
+            inverted: "#FEFCE8",
+            link: "#CA8A04",
+            "link.hover": "#A16207"
+          },
+          surface: {
+            default: "#FEFCE8",
+            raised: "#FEF9C3",
+            sunken: "#FEF08A",
+            overlay: "rgba(41, 37, 36, 0.5)"
+          },
+          border: {
+            default: "#FDE047",
+            subtle: "#FEF9C3",
+            strong: "#FACC15"
+          },
+          interactive: {
+            primary: "#EAB308",
+            "primary.hover": "#CA8A04",
+            secondary: "#EA580C"
+          },
+          focus: {
+            ring: "#FACC15"
+          },
+          status: {
+            success: "#16A34A",
+            warning: "#CA8A04",
+            error: "#DC2626",
+            info: "#EA580C"
+          }
+        },
+        shadow: {
+          card: "0 4px 6px -1px rgba(234, 179, 8, 0.08), 0 2px 4px -2px rgba(234, 179, 8, 0.05)",
+          dropdown: "0 10px 15px -3px rgba(41, 37, 36, 0.08), 0 4px 6px -4px rgba(41, 37, 36, 0.05)",
+          modal: "0 20px 25px -5px rgba(41, 37, 36, 0.1), 0 8px 10px -6px rgba(41, 37, 36, 0.08)",
+          focus: "0 0 0 3px rgba(250, 204, 21, 0.4)"
+        }
+      }
+  }
+} as const;
+
+export type Tokens = typeof tokens;