{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "jsx-email/theme-airbnb",
  "title": "Airbnb Email Theme (JSX Email)",
  "description": "Airbnb email theme tokens for JSX Email templates",
  "dependencies": [
    "jsx-email"
  ],
  "files": [
    {
      "path": "registry/themes/airbnb.ts",
      "content": "export const airbnbTheme = {\n  borderRadius: \"6px\",\n  borderRadiusLg: \"12px\",\n  button: {\n    primary: {\n      backgroundColor: \"#ff5a5f\",\n      borderRadius: \"6px\",\n      color: \"#ffffff\",\n      fontSize: \"14px\",\n      fontWeight: \"500\",\n      paddingX: \"24px\",\n      paddingY: \"12px\",\n    },\n    secondary: {\n      backgroundColor: \"transparent\",\n      border: \"1px solid #ff5a5f\",\n      borderRadius: \"6px\",\n      color: \"#ff5a5f\",\n      fontSize: \"14px\",\n      fontWeight: \"500\",\n      paddingX: \"24px\",\n      paddingY: \"12px\",\n    },\n  },\n  colorBackground: \"#ffffff\",\n  colorBackgroundMuted: \"#fff8f8\",\n  colorBackgroundSubtle: \"#f3f4f6\",\n  colorBorder: \"#e5e7eb\",\n  colorBorderSubtle: \"#f3f4f6\",\n  colorDanger: \"#ef4444\",\n  colorPrimary: \"#ff5a5f\",\n  colorPrimaryForeground: \"#ffffff\",\n  colorPrimaryHover: \"#e04e53\",\n  colorSuccess: \"#10b981\",\n  colorText: \"#111827\",\n  colorTextMuted: \"#6b7280\",\n  colorTextSubtle: \"#9ca3af\",\n  colorWarning: \"#f59e0b\",\n  containerWidth: \"600px\",\n  fontFamily: '\"Circular\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n  fontFamilyMono: '\"Menlo\", \"Monaco\", \"Courier New\", monospace',\n  fontSizeBase: \"14px\",\n  fontSizeHeading: \"28px\",\n  fontSizeLg: \"16px\",\n  fontSizeSm: \"12px\",\n  fontSizeXl: \"20px\",\n  fontWeightBold: \"600\",\n  fontWeightMedium: \"500\",\n  fontWeightNormal: \"400\",\n  lineHeightBase: \"1.6\",\n  spacingBase: \"24px\",\n  spacingLg: \"32px\",\n  spacingXl: \"48px\",\n};\n",
      "type": "registry:file",
      "target": "components/email/theme-airbnb.ts"
    },
    {
      "path": "registry/bases/jsx-email/themes/email-theme.tsx",
      "content": "import { Tailwind } from \"jsx-email\";\nimport type { TailwindProps } from \"jsx-email\";\nimport type { ReactNode } from \"react\";\n\nexport interface EmailTheme {\n  borderRadius: string;\n  borderRadiusLg: string;\n  button: {\n    primary: {\n      backgroundColor: string;\n      borderRadius: string;\n      color: string;\n      fontSize: string;\n      fontWeight: string;\n      paddingX: string;\n      paddingY: string;\n    };\n    secondary: {\n      backgroundColor: string;\n      border: string;\n      borderRadius: string;\n      color: string;\n      fontSize: string;\n      fontWeight: string;\n      paddingX: string;\n      paddingY: string;\n    };\n  };\n  colorBackground: string;\n  colorBackgroundMuted: string;\n  colorBackgroundSubtle: string;\n  colorBorder: string;\n  colorBorderSubtle: string;\n  colorDanger: string;\n  colorPrimary: string;\n  colorPrimaryForeground: string;\n  colorPrimaryHover: string;\n  colorSuccess: string;\n  colorText: string;\n  colorTextMuted: string;\n  colorTextSubtle: string;\n  colorWarning: string;\n  containerWidth: string;\n  fontFamily: string;\n  fontFamilyMono: string;\n  fontSizeBase: string;\n  fontSizeHeading: string;\n  fontSizeLg: string;\n  fontSizeSm: string;\n  fontSizeXl: string;\n  fontWeightBold: string;\n  fontWeightMedium: string;\n  fontWeightNormal: string;\n  lineHeightBase: string;\n  spacingBase: string;\n  spacingLg: string;\n  spacingXl: string;\n}\n\ntype JsxEmailTailwindConfig = NonNullable<TailwindProps[\"config\"]>;\n\nconst createEmailTailwindConfig = (\n  theme: EmailTheme\n): JsxEmailTailwindConfig => ({\n  theme: {\n    borderRadius: {\n      DEFAULT: theme.borderRadius,\n      lg: theme.borderRadiusLg,\n    },\n    colors: {\n      bg: theme.colorBackground,\n      \"bg-2\": theme.colorBackgroundMuted,\n      \"bg-3\": theme.colorBackgroundSubtle,\n      brand: theme.colorPrimary,\n      \"brand-fg\": theme.colorPrimaryForeground,\n      \"brand-hover\": theme.colorPrimaryHover,\n      danger: theme.colorDanger,\n      fg: theme.colorText,\n      \"fg-2\": theme.colorTextMuted,\n      \"fg-3\": theme.colorTextSubtle,\n      stroke: theme.colorBorder,\n      \"stroke-strong\": theme.colorBorderSubtle,\n      success: theme.colorSuccess,\n      warning: theme.colorWarning,\n    },\n    fontFamily: {\n      mono: theme.fontFamilyMono,\n      sans: theme.fontFamily,\n    },\n    fontSize: {\n      base: theme.fontSizeBase,\n      heading: theme.fontSizeHeading,\n      lg: theme.fontSizeLg,\n      sm: theme.fontSizeSm,\n      xl: theme.fontSizeXl,\n    },\n    fontWeight: {\n      bold: theme.fontWeightBold,\n      medium: theme.fontWeightMedium,\n      normal: theme.fontWeightNormal,\n    },\n    lineHeight: {\n      base: theme.lineHeightBase,\n    },\n    maxWidth: {\n      email: theme.containerWidth,\n    },\n    spacing: {\n      base: theme.spacingBase,\n      lg: theme.spacingLg,\n      xl: theme.spacingXl,\n    },\n  },\n});\n\ninterface EmailTailwindProps {\n  children: ReactNode;\n  theme: EmailTheme;\n}\n\nexport const EmailTailwind = ({ children, theme }: EmailTailwindProps) => (\n  <Tailwind config={createEmailTailwindConfig(theme)}>{children}</Tailwind>\n);\n",
      "type": "registry:file",
      "target": "components/email/email-theme.tsx"
    }
  ],
  "categories": [
    "theme"
  ],
  "type": "registry:file"
}