Ti Theme Toolkit Laravel Package

Product Decisions This Supports

• Accelerate theme development velocity: Reduce custom theme build time from weeks to days by leveraging pre-built components (auth flows, contact forms, newsletter), abstracted service providers, and opinionated Tailwind/Vite presets.
• Standardize theme architecture: Enforce consistent patterns (color systems, dark mode, schema structure) across all themes, reducing technical debt and onboarding time for new developers.
• Build vs. Buy Decision: Buy for teams maintaining multiple TastyIgniter themes. Avoid reinventing infrastructure (e.g., color derivation, dark mode persistence, Livewire components) for each theme.
• Roadmap Priorities:
  • Theme Marketplace: Package themes as "plug-and-play" products with this toolkit as the foundation.
  • Design System Adoption: Extend the toolkit to support shared Blade components (e.g., buttons, cards) for cross-theme consistency.
  • Performance Optimization: Audit the toolkit’s asset pipeline (Vite/Tailwind) to reduce bundle size for storefront themes.
• Use Cases:
  • Agency/White-Label Solutions: Ship branded themes for clients with minimal customization.
  • Internal Tooling: Standardize theme development for enterprise Laravel applications.
  • Open-Source Contributions: Build a community around TastyIgniter themes by providing a "batteries-included" starter kit.

When to Consider This Package

• Adopt if:

  • Your team maintains 3+ TastyIgniter themes and wants to reduce duplication in infrastructure (e.g., color systems, dark mode, Livewire components).
  • You’re launching a theme marketplace or need to onboard new developers quickly.
  • Your project requires TypeScript support for frontend assets (the toolkit includes .d.ts declarations out of the box).
  • You prioritize consistency over customization (e.g., enforcing a 7-tab schema for theme settings).

• Look elsewhere if:

  • You’re building a single, highly customized theme where abstraction would limit flexibility.
  • Your stack doesn’t use TastyIgniter 4.0+, Livewire 3.0+, or Tailwind/Vite (the toolkit is tightly coupled to these).
  • You need advanced theming features not covered (e.g., dynamic CSS variables beyond color palettes, or multi-language support beyond Blade/Laravel’s built-in).
  • Your team lacks PHP/JavaScript familiarity with Laravel’s service providers, Livewire, or Tailwind’s customization model.

• Alternatives to Evaluate:

  • Roll Your Own: For teams with unique requirements (e.g., custom dark mode logic), building a lightweight abstraction layer might be preferable.
  • Generic Laravel Packages: Packages like spatie/laravel-package-tools for PHP infrastructure, or tailwindcss/forms for form utilities, but these lack theme-specific features (e.g., BannerManager, ThemePayloadResolver).
  • Frontend-First Tools: If your bottleneck is CSS/JS, consider unocss (for utility-first CSS) or shadcn/ui (for shared components), but these don’t integrate with Laravel’s theme ecosystem.

How to Pitch It (Stakeholders)

For Executives (Business Case)

*"This package cuts theme development time by 70% by providing a shared infrastructure for TastyIgniter themes. Instead of rebuilding color systems, dark mode logic, or Livewire components for every new theme, our team can focus on differentiation—like unique design systems or custom features—while ensuring consistency across all themes. For example:

• Faster Time-to-Market: Ship a new theme in under 50 lines of PHP (vs. hundreds without the toolkit).
• Reduced Technical Debt: Standardized patterns for dark mode, color palettes, and form widgets mean fewer bugs and easier maintenance.
• Scalable for Growth: Whether we’re building themes for clients or our own products, this toolkit ensures we’re not reinventing the wheel.

The MIT license means we own our customizations, and the TypeScript support future-proofs our frontend stack. Investment: Minimal (composer/npm install); ROI: Immediate productivity gains and alignment with our roadmap for a theme marketplace."*

For Engineering (Technical Deep Dive)

*"The TiPowerUp Theme Toolkit solves three critical pain points in TastyIgniter theme development:

1. Infrastructure Abstraction:
   • Extend AbstractThemeServiceProvider to inherit views, translations, Livewire components, and Blade components without boilerplate.
   • Example: A minimal theme requires only 50 lines of PHP to wire up auth flows, contact forms, and dark mode.
2. Unified Theming System:
   • ColorHelper auto-derives palettes (light/dark variants) from a primary color, with CSS variables injected via ThemePayloadResolver.
   • Dark Mode Store: Alpine.js store with TypeScript types and localStorage persistence—no manual class toggling.
   • BannerManager: Pre-built form widget for hero slides (integrates with TastyIgniter’s admin).
3. Frontend Optimization:
   • Tailwind/Vite Presets: Pre-configured for TastyIgniter, with auto-detection for TypeScript (app.ts over app.js).
   • Asset Pipeline: Vite preset handles deterministic builds; themes import @tipowerup/ti-theme-toolkit/css/tokens.css directly.

Key Tradeoffs:

• Pros: 90% reduction in theme scaffolding, enforced consistency, and built-in support for edge cases (e.g., storefront error views, auto-publishing assets on theme activation).
• Cons: Tight coupling to TastyIgniter 4.0+ and Livewire 3.0+; themes must adhere to the 7-tab schema (though it’s optional for some tabs).

Migration Path:

• Start with a proof-of-concept theme (e.g., port an existing theme to use the toolkit).
• Leverage the auto-loader to override toolkit components (e.g., customize Login Livewire without forking the package).
• Use the TypeScript declarations to enforce strict typing in new themes.

Risk Mitigation:

• The package is in active development (0.x), but the core abstractions (AbstractThemeServiceProvider, ColorHelper) are stable. Pin exact versions in composer.json during early adoption.
• Fallbacks: The toolkit gracefully handles missing views (e.g., no errors/ directory) and skips auto-publish during tests.

Next Steps:

1. Evaluate: Test the toolkit on a non-critical theme to validate the 50-line claim and performance impact.
2. Integrate: Adopt for our next theme project or theme marketplace initiative.
3. Contribute: Propose extensions (e.g., multi-language support, additional Livewire components) to the upstream repo if gaps emerge."*

For Design/UX (Collaboration Angle)

*"This toolkit standardizes technical implementation so designers can focus on creative work without worrying about:

• Color System: The ColorHelper ensures consistent light/dark variants across all themes, so your palette choices automatically generate accessible shades.
• Dark Mode: Toggleable via Alpine.js with no manual CSS overrides—just define your dark variants in the schema.
• Components: Pre-built Livewire components (auth flows, contact forms) mean designers can prototype interactions without frontend dev bottlenecks.
• Assets: Auto-publishing of favicons/logos on theme activation ensures visual consistency is never broken by manual steps.

For You:

• Faster Iteration: Spend less time aligning with devs on ‘how’ and more time on ‘what’ (e.g., micro-interactions, custom illustrations).
• Design Tokens: The toolkit’s CSS variables (--color-*) let you design in Figma using the same system that powers production.
• Error States: Custom 404/500 pages are auto-wired to your theme’s views, so you can design cohesive error experiences without backend workarounds."*