Livewire UI Components - v2.0.0

ArtisanPack UI Livewire Components includes a browser-based theme preview tool that enables real-time color adjustment, component preview gallery, glass effect customization, and export functionality.

Introduction

The Theme Preview Tool is designed to help developers and designers:

• Preview themes in real-time without writing any code
• Explore component gallery with live theme updates
• Customize glass effects with various presets and tint options
• Apply accessibility presets for WCAG compliance
• Export configurations as CSS or JSON
• Share preview URLs with team members

Accessing the Theme Preview Tool

The theme preview tool is available at /artisanpack/theme-preview route:

# Access the preview tool
https://your-app.test/artisanpack/theme-preview

You can also access it via the named route:

route('artisanpack.theme-preview')

Features

Real-Time Color Adjustment

Choose from Tailwind CSS colors or enter custom hex values for primary, secondary, and accent colors.

Tailwind Color Selection:

• Click on color swatches to select from 21 Tailwind colors
• Instantly see changes reflected across all preview components

Custom Hex Colors:

1. Toggle "Use Custom Hex Colors" checkbox
2. Use the color picker or enter hex values directly
3. Colors update in real-time as you type

Component Preview Gallery

The preview gallery includes components organized into categories:

Click on any component name to preview it with your current theme settings.

Glass Effect Customization

Apply glass effects to see how your theme looks with glassmorphism:

Available Glass Presets:

• glass-frosted-light - Light mode frosted glass
• glass-frosted-dark - Dark mode frosted glass
• glass-liquid-light - Light mode liquid glass
• glass-liquid-dark - Dark mode liquid glass
• glass-minimal - Subtle glass effects
• glass-bold - Strong glass effects

Tint Options:

• Select a tint color from the Tailwind palette
• Adjust tint intensity from 0% to 100%

Accessibility Presets

Apply accessibility presets to ensure WCAG compliance:

Dark Mode Preview

Toggle dark mode to preview your theme in both light and dark contexts.

Exporting Your Theme

Download CSS

Click "Download CSS" to export the generated CSS variables:

:root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    /* ... more variables ... */
}

Download JSON

Export your complete theme configuration as JSON:

{
    "version": "2.0.0",
    "generated": "2024-01-01T00:00:00+00:00",
    "colors": {
        "primary": "blue",
        "secondary": "slate",
        "accent": "amber"
    },
    "glass": {
        "preset": "glass-frosted-light",
        "tint": {
            "color": "blue",
            "intensity": 0.15
        }
    },
    "accessibility": {
        "preset": "high-contrast-light"
    },
    "preview_url": "https://your-app.test/artisanpack/theme-preview?..."
}

Artisan Command

Copy the generated artisan command to apply your theme programmatically:

php artisan artisanpack:generate-theme --primary=blue --secondary=slate --accent=amber --preset=glass-frosted-light

Shareable Preview URLs

Share your theme configuration with team members using the auto-generated URL:

https://your-app.test/artisanpack/theme-preview?primary=blue&secondary=slate&accent=amber&preset=glass-frosted-light&dark=1

URL Parameters:

Using the Livewire Component Directly

You can also embed the theme preview component in your own pages:

<livewire:theme-preview />

Or with initial values:

<livewire:theme-preview
    :primary-color="'blue'"
    :secondary-color="'slate'"
    :accent-color="'amber'"
/>

API Reference

Properties

Computed Properties

Methods

Best Practices

1. Start with Tailwind Colors

Begin by selecting Tailwind colors to establish a color palette, then fine-tune with custom hex if needed.

2. Test All Components

Click through each component category to ensure your theme works well across all UI elements.

3. Check Accessibility

Apply an accessibility preset to verify your theme meets WCAG guidelines.

4. Preview Dark Mode

Always toggle dark mode to ensure your theme works in both contexts.

5. Export and Apply

Once satisfied, export the CSS and integrate it into your application:

/* resources/css/app.css */
@import './artisanpack-theme.css';

@import "tailwindcss";

Troubleshooting

Colors Not Updating

1. Ensure JavaScript is enabled in your browser
2. Check for browser console errors
3. Verify Livewire is properly configured

Export Not Working

1. Check browser popup blockers
2. Verify the download permissions in your browser
3. Try using a different browser

Route Not Found

1. Ensure the package routes are loaded
2. Check your route prefix configuration
3. Clear route cache: php artisan route:clear

Glass Effects Not Visible

1. Make sure you've selected a glass preset
2. Verify your browser supports CSS backdrop-filter
3. Check that no parent elements have overflow:hidden

Configuration

The theme preview route prefix can be configured in your published configuration:

// config/artisanpack/livewire-ui-components.php

return [
    'route_prefix' => '', // Add a prefix if needed
    // ... other settings
];