{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "react-email/theme-stripe",
  "title": "Stripe Email Theme (React Email)",
  "description": "Stripe email theme tokens for React Email templates",
  "dependencies": [
    "react-email",
    "tailwindcss"
  ],
  "files": [
    {
      "path": "registry/themes/stripe.ts",
      "content": "export const stripeTheme = {\n  borderRadius: \"6px\",\n  borderRadiusLg: \"12px\",\n  button: {\n    primary: {\n      backgroundColor: \"#635bff\",\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 #e6ebf1\",\n      borderRadius: \"6px\",\n      color: \"#635bff\",\n      fontSize: \"14px\",\n      fontWeight: \"500\",\n      paddingX: \"24px\",\n      paddingY: \"12px\",\n    },\n  },\n  colorBackground: \"#ffffff\",\n  colorBackgroundMuted: \"#f6f9fc\",\n  colorBackgroundSubtle: \"#f3f4f6\",\n  colorBorder: \"#e6ebf1\",\n  colorBorderSubtle: \"#f3f4f6\",\n  colorDanger: \"#ef4444\",\n  colorPrimary: \"#635bff\",\n  colorPrimaryForeground: \"#ffffff\",\n  colorPrimaryHover: \"#5851db\",\n  colorSuccess: \"#10b981\",\n  colorText: \"#111827\",\n  colorTextMuted: \"#6b7280\",\n  colorTextSubtle: \"#9ca3af\",\n  colorWarning: \"#f59e0b\",\n  containerWidth: \"600px\",\n  fontFamily: '\"Söhne\", \"ui-sans-serif\", system-ui, 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-stripe.ts"
    },
    {
      "path": "registry/bases/react-email/themes/email-theme.ts",
      "content": "import { pixelBasedPreset } from \"react-email\";\nimport type { TailwindConfig } from \"react-email\";\nimport plugin from \"tailwindcss/plugin\";\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\nconst fontScale = {\n  \"11\": {\n    fontSize: \"11px\",\n    fontWeight: \"400\",\n    letterSpacing: \"-0.033px\",\n    lineHeight: \"1.5\",\n  },\n  \"13\": {\n    fontSize: \"13px\",\n    fontWeight: \"400\",\n    letterSpacing: \"-0.039px\",\n    lineHeight: \"1.5\",\n  },\n  \"14\": { fontSize: \"14px\", lineHeight: \"1.5\" },\n  \"16\": {\n    fontSize: \"16px\",\n    fontWeight: \"400\",\n    letterSpacing: \"-0.048px\",\n    lineHeight: \"1.5\",\n  },\n  \"20\": {\n    fontSize: \"20px\",\n    fontWeight: \"500\",\n    letterSpacing: \"-0.1px\",\n    lineHeight: \"1.2\",\n  },\n  \"24\": {\n    fontSize: \"24px\",\n    fontWeight: \"600\",\n    letterSpacing: \"-0.084px\",\n    lineHeight: \"1\",\n  },\n  \"28\": {\n    fontSize: \"28px\",\n    fontWeight: \"600\",\n    letterSpacing: \"-0.084px\",\n    lineHeight: \"1.3\",\n  },\n} as const;\n\nconst emailUtilitiesPlugin = plugin(({ addUtilities, addVariant }) => {\n  addVariant(\"mobile\", \"@media (max-width: 600px)\");\n\n  const utilities: Record<string, Record<string, string>> = {};\n  for (const [step, token] of Object.entries(fontScale)) {\n    utilities[`.font-${step}`] = token;\n  }\n  addUtilities(utilities);\n});\n\nexport const createEmailTailwindConfig = (\n  theme: EmailTheme\n): TailwindConfig => ({\n  plugins: [emailUtilitiesPlugin],\n  presets: [pixelBasedPreset],\n  theme: {\n    extend: {\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});\n",
      "type": "registry:file",
      "target": "components/email/email-theme.ts"
    }
  ],
  "categories": [
    "theme"
  ],
  "type": "registry:file"
}