index.html

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Excaildraw Theme Kit</title>

  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            // "undefined" tokens to avoid hard-coded colors
            primary: {
              50: 'rgb(var(--color-primary) / <alpha-value>)',
              100: 'rgb(var(--color-primary) / <alpha-value>)',
              200: 'rgb(var(--color-primary) / <alpha-value>)',
              300: 'rgb(var(--color-primary) / <alpha-value>)',
              400: 'rgb(var(--color-primary) / <alpha-value>)',
              500: 'rgb(var(--color-primary) / <alpha-value>)',
              600: 'rgb(var(--color-primary) / <alpha-value>)',
              700: 'rgb(var(--color-primary) / <alpha-value>)',
              800: 'rgb(var(--color-primary) / <alpha-value>)',
              900: 'rgb(var(--color-primary) / <alpha-value>)',
              950: 'rgb(var(--color-primary) / <alpha-value>)',
            },
            secondary: {
              50: 'rgb(var(--color-secondary) / <alpha-value>)',
              100: 'rgb(var(--color-secondary) / <alpha-value>)',
              200: 'rgb(var(--color-secondary) / <alpha-value>)',
              300: 'rgb(var(--color-secondary) / <alpha-value>)',
              400: 'rgb(var(--color-secondary) / <alpha-value>)',
              500: 'rgb(var(--color-secondary) / <alpha-value>)',
              600: 'rgb(var(--color-secondary) / <alpha-value>)',
              700: 'rgb(var(--color-secondary) / <alpha-value>)',
              800: 'rgb(var(--color-secondary) / <alpha-value>)',
              900: 'rgb(var(--color-secondary) / <alpha-value>)',
              950: 'rgb(var(--color-secondary) / <alpha-value>)',
            },
            // Background and surface tokens that follow "undefined mode" (light/dark)
            background: 'rgb(var(--bg-1) / <alpha-value>)',
            surface: 'rgb(var(--bg-2) / <alpha-value>)',
            fg: 'rgb(var(--fg-1) / <alpha-value>)',
            muted: 'rgb(var(--fg-2) / <alpha-value>)',
          },
          boxShadow: {
            card: '0 8px 30px rgb(0 0 0 / 0.08)',
          },
          borderRadius: {
            xl: '1rem',
          },
        },
      },
    };
  </script>

  <link rel="stylesheet" href="style.css" />
</head>
<body class="min-h-screen bg-background text-fg antialiased">
  <div class="mx-auto max-w-5xl px-6 py-10">
    <header class="mb-8 flex flex-wrap items-center justify-between gap-4">
      <div class="flex items-center gap-3">
        <div class="h-10 w-10 rounded-xl bg-primary-500 shadow-card"></div>
        <h1 class="text-2xl font-semibold">Excaildraw Theme Kit</h1>
      </div>

      <div class="flex items-center gap-2">
        <label class="sr-only" for="primaryColor">Primary color (RGB, e.g. 59 130 246)</label>
        <input id="primaryColor" type="text" inputmode="numeric" pattern="[0-9 ,.]*"
               placeholder="Primary RGB (e.g. 59 130 246)"
               class="w-56 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500" />
        <label class="sr-only" for="secondaryColor">Secondary color (RGB, e.g. 236 72 153)</label>
        <input id="secondaryColor" type="text" inputmode="numeric" pattern="[0-9 ,.]*"
               placeholder="Secondary RGB (e.g. 236 72 153)"
               class="w-56 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500" />
        <button id="applyColorsBtn"
                class="rounded-lg bg-primary-500 px-4 py-2 text-sm font-medium text-white shadow hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-primary-500">
          Apply
        </button>
        <button id="themeToggle"
                class="ml-2 rounded-lg bg-surface px-4 py-2 text-sm font-medium text-fg shadow hover:bg-muted/30 focus:outline-none focus:ring-2 focus:ring-primary-500">
          Toggle Theme
        </button>
      </div>
    </header>

    <section class="grid gap-6 md:grid-cols-2">
      <div class="rounded-xl border border-muted bg-surface p-6 shadow-card">
        <h2 class="mb-4 text-lg font-semibold">Primary Palette</h2>
        <div class="grid grid-cols-5 gap-3">
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-50"></div>
            <span class="mt-1 text-xs text-muted">50</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-200"></div>
            <span class="mt-1 text-xs text-muted">200</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-400"></div>
            <span class="mt-1 text-xs text-muted">400</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-600"></div>
            <span class="mt-1 text-xs text-muted">600</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-primary-800"></div>
            <span class="mt-1 text-xs text-muted">800</span>
          </div>
        </div>
      </div>

      <div class="rounded-xl border border-muted bg-surface p-6 shadow-card">
        <h2 class="mb-4 text-lg font-semibold">Secondary Palette</h2>
        <div class="grid grid-cols-5 gap-3">
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-50"></div>
            <span class="mt-1 text-xs text-muted">50</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-200"></div>
            <span class="mt-1 text-xs text-muted">200</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-400"></div>
            <span class="mt-1 text-xs text-muted">400</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-600"></div>
            <span class="mt-1 text-xs text-muted">600</span>
          </div>
          <div class="flex flex-col items-center">
            <div class="h-12 w-full rounded-lg bg-secondary-800"></div>
            <span class="mt-1 text-xs text-muted">800</span>
          </div>
        </div>
      </div>
    </section>

    <section class="mt-8 rounded-xl border border-muted bg-surface p-6 shadow-card">
      <h2 class="mb-4 text-lg font-semibold">UI Components</h2>
      <div class="flex flex-wrap items-center gap-3">
        <button class="rounded-lg bg-primary-500 px-4 py-2 text-white shadow hover:brightness-110">Primary</button>
        <button class="rounded-lg bg-secondary-500 px-4 py-2 text-white shadow hover:brightness-110">Secondary</button>
        <a class="text-primary-600 hover:underline" href="#">Link</a>
        <input class="w-60 rounded-lg border border-muted bg-surface px-3 py-2 text-sm text-fg placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-primary-500"
               placeholder="Input" />
        <span class="rounded-full bg-primary-500/10 px-3 py-1 text-primary-600">Badge</span>
      </div>
    </section>

    <section class="mt-8 rounded-xl border border-muted bg-surface p-6 shadow-card">
      <h2 class="mb-4 text-lg font-semibold">Backgrounds & Surfaces</h2>
      <div class="grid gap-6 md:grid-cols-3">
        <div class="rounded-lg bg-background p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">background</p>
          <div class="mt-3 h-24 rounded bg-surface p-3 text-sm text-fg">surface inside background</div>
        </div>
        <div class="rounded-lg bg-surface p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">surface</p>
          <div class="mt-3 h-24 rounded bg-background p-3 text-sm text-fg">background inside surface</div>
        </div>
        <div class="rounded-lg bg-surface p-4 ring-1 ring-muted">
          <p class="text-sm text-muted">accent border</p>
          <div class="mt-3 h-24 rounded border border-primary-500/30 bg-background p-3 text-sm text-fg">
            bordered surface
          </div>
        </div>
      </div>
    </section>
  </div>

  <script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>