@ghostchain1/tailwind-config

Shared Tailwind CSS configuration preset for all GhostChain applications. Provides a unified design system with 4 theme variants and semantic color tokens for runtime theme switching.

Features

• 🎨 4 Built-in Themes: Ghost Green (Teal), Purple (Indigo), Gold, Grayscale
• 🔄 Runtime Theme Switching: CSS custom properties for dynamic theming
• 🎯 Semantic Color System: Use bg-accent, text-foreground instead of hardcoded colors
• 📐 Consistent Typography: Space Grotesk, Sora, JetBrains Mono
• ✨ Design Tokens: Spacing, radius, animations from @ghostchain1/brand
• 🌗 Dark Mode Ready: All themes optimized for dark interfaces

Installation

pnpm add @ghostchain1/tailwind-config

Basic Usage

1. Extend the Preset in Your App

In your app's tailwind.config.js:

import ghostPreset from "@ghostchain1/tailwind-config";

export default {
  presets: [ghostPreset],
  content: ["./src/**/*.{ts,tsx}"],
  // Add app-specific customizations here
};

2. Add Theme CSS Variables

In your root layout or global CSS file:

// app/layout.tsx (Next.js)
import { themeGhost } from "@ghostchain1/tailwind-config/themes";

export default function RootLayout({ children }) {
  return (
    <html lang="en" className="dark">
      <head>
        <style
          dangerouslySetInnerHTML={{
            __html: `:root { ${Object.entries(themeGhost)
              .map(([k, v]) => `${k}: ${v};`)
              .join(" ")} }`,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Or in your globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-background: 8 14 26;
  --color-surface: 15 23 42;
  --color-accent: 35 214 166;
  --color-foreground: 248 250 252;
  /* ... etc (see themes.js for full list) */
}

3. Use Semantic Color Classes

// ✅ Good: Uses semantic colors (theme-aware)
<div className="bg-surface border border-border">
  <h1 className="text-foreground">Title</h1>
  <p className="text-foreground-muted">Description</p>
  <button className="bg-accent text-white hover:bg-accent-hover">
    Action
  </button>
</div>

// ❌ Avoid: Hardcoded colors (not theme-aware)
<div className="bg-gray-900 border border-gray-700">
  <h1 className="text-white">Title</h1>
  <button className="bg-ghost-400 hover:bg-ghost-500">Action</button>
</div>

Theme System

Available Themes

| Theme | Primary Accent | Use Case | | ------------------- | -------------- | ----------------------------------------- | | Ghost (Teal) | #23D6A6 | Default brand theme, exchanges, wallet | | Purple (Indigo) | #6366F1 | Console, governance, explorer, AI apps | | Gold | #F2C14E | CMS, sovereign exchange, premium features | | Grayscale | Neutral | L3 exchange, minimal/neutral interfaces |

Runtime Theme Switching

import { applyTheme, getTheme } from "@ghostchain1/tailwind-config/themes";

// Apply theme on mount
useEffect(() => {
  const theme = getTheme("purple"); // 'ghost' | 'purple' | 'gold' | 'grayscale'
  applyTheme(theme);
}, []);

// Or with a theme switcher
function handleThemeChange(themeName) {
  const theme = getTheme(themeName);
  applyTheme(theme);
  localStorage.setItem("theme", themeName);
}

Semantic Color Tokens

Use these semantic classes instead of hardcoded colors:

Backgrounds:

• bg-background — Page canvas
• bg-surface — Cards, panels
• bg-surface-raised — Elevated surfaces
• bg-surface-overlay — Modals, dropdowns

Accents:

• bg-accent / text-accent — Primary brand color
• bg-accent-hover — Hover states
• bg-accent-muted — Disabled/muted states

Text:

• text-foreground — Primary text
• text-foreground-muted — Secondary text
• text-foreground-subtle — Tertiary text, hints

Borders:

• border-border — Default borders
• border-border-strong — Emphasized borders
• border-border-subtle — Subtle dividers

Status:

• text-success / bg-success — Success states
• text-warning / bg-warning — Warning states
• text-danger / bg-danger — Error states
• text-info / bg-info — Info states

Color Palettes

Direct color classes (for specific needs):

• ghost-{50-950} — Teal/Ghost Green palette
• purple-{50-950} — Purple/Indigo palette
• gold-{50-950} — Gold palette
• blue-{50-950} — Blue palette
• neutral-{0,50-1000} — Grayscale palette

Example:

<div className="bg-ghost-500 text-white">Ghost Green</div>
<div className="bg-purple-500 text-white">Purple</div>
<div className="bg-gold-500 text-neutral-900">Gold</div>

Typography

Font Families:

• font-sans — Space Grotesk, Inter (body text)
• font-display — Sora, Space Grotesk (headings)
• font-mono — JetBrains Mono, Fira Code (code)

Font Sizes:

• Standard Tailwind sizes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl

Spacing & Borders

Border Radius:

• rounded-xs — 8px
• rounded-sm — 10px
• rounded / rounded-md — 12px (default)
• rounded-lg — 16px
• rounded-xl — 20px
• rounded-2xl — 28px

Transitions:

• duration-fast — 150ms
• duration-normal — 250ms
• duration-slow — 400ms
• duration-slower — 600ms

Easing:

• ease-smooth — cubic-bezier(0.4, 0, 0.2, 1)
• ease-spring — cubic-bezier(0.175, 0.885, 0.32, 1.275)
• ease-decel — cubic-bezier(0, 0, 0.2, 1)

Animations

Built-in:

• animate-spin-slow — Slow spinning (3s)
• animate-pulse-slow — Slow pulsing (3s)
• animate-fade-in — Fade in (250ms)
• animate-fade-out — Fade out (250ms)
• animate-slide-in — Slide in from left (250ms)
• animate-slide-out — Slide out to left (250ms)
• animate-shimmer — Shimmer effect (loading states)

Glow Effects:

• shadow-glow-ghost — Teal glow
• shadow-glow-purple — Purple glow
• shadow-glow-gold — Gold glow
• shadow-glow-blue — Blue glow

Example:

<button className="shadow-glow-ghost hover:shadow-glow-ghost/50 transition-shadow duration-normal">
  Glowing Button
</button>

App-Specific Customizations

You can extend the preset with app-specific customizations:

import ghostPreset from "@ghostchain1/tailwind-config";

export default {
  presets: [ghostPreset],
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      // Add app-specific overrides here
      colors: {
        "app-special": "#ff00ff",
      },
    },
  },
};

Per-App Default Themes

Each app can set its own default theme:

• CMS: Gold (themeGold)
• Console, Governance, Explorer, AI, Investor, Status: Purple (themePurple)
• L2 Exchange, Wallet, GhostX: Ghost Green (themeGhost)
• Sovereign Exchange: Gold (themeGold)
• L3 Exchange: Grayscale (themeGrayscale)

Users can override via theme switcher (persisted per-app).

Migration from Hardcoded Colors

Before:

<div className="bg-gray-900 border-white/5">
  <button className="bg-ghost-600 hover:bg-ghost-700">Click</button>
</div>

After:

<div className="bg-surface border-border">
  <button className="bg-accent hover:bg-accent-hover">Click</button>
</div>

License

MIT