ghibli-ui-kit/ghibli-ui-kit.tailwind.js

Tailwind UI kit inspired by Studio Ghibli aesthetics

export const ghibliTheme = {
    theme: {
      extend: {
        colors: {
          background: '#0B1320',
          textPrimary: '#EFD9A4',
          textSecondary: '#A58660',
          card: '#1C2A3A',
          accent: '#445366',
          button: {
            DEFAULT: '#253448',
            hover: '#1E2A3A',
          }
        },
        fontFamily: {
          serif: ['"EB Garamond"', 'serif'],
          sans: ['Inter', 'sans-serif']
        },
        borderRadius: {
          card: '1rem'
        },
        boxShadow: {
          soft: '0 8px 24px rgba(0, 0, 0, 0.3)'
        },
        backdropBlur: {
          md: '20px'
        }
      }
    },
    plugins: []
  };


// Sample usage for a button class
// className="bg-button hover:bg-button-hover text-textPrimary font-serif px-6 py-2 rounded-card shadow-soft border border-card transition"

// --- Common Ghibli Components ---

export const modal = `
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-card bg-opacity-60 backdrop-blur-md rounded-card p-6 text-textPrimary w-96 shadow-soft">
    <h2 class="text-xl font-serif mb-2">Modal Title</h2>
    <p class="text-textSecondary mb-4">This is a Ghibli-style modal description.</p>
    <div class="flex justify-end gap-2">
      <button class="px-4 py-2 font-serif rounded-card border border-card text-textPrimary">Cancel</button>
      <button class="px-4 py-2 font-serif bg-button hover:bg-button-hover text-textPrimary rounded-card">Confirm</button>
    </div>
  </div>
</div>
`;

export const dailyPromptCard = `
<div class="bg-card bg-opacity-50 backdrop-blur-md border border-white/10 rounded-card p-4 text-textPrimary shadow-soft">
  <h3 class="font-serif text-lg mb-2">🌙 Daily Prompt</h3>
  <p class="font-serif text-textSecondary">Record your doubt. Then crush it with drive.</p>
  <button class="mt-4 px-4 py-2 bg-button hover:bg-button-hover text-textPrimary font-serif rounded-card">Record Now</button>
</div>
`;

export const audioRecorder = `
<div class="bg-card bg-opacity-60 backdrop-blur-md border border-card rounded-card p-4 text-textPrimary font-serif shadow-soft">
  <p class="text-textSecondary mb-2">🎙️ Recording in progress...</p>
  <div class="w-full h-16 bg-accent bg-opacity-20 rounded-card animate-pulse"></div>
  <button class="mt-4 px-4 py-2 bg-button hover:bg-button-hover rounded-card text-textPrimary">Stop Recording</button>
</div>
`;