@jamwidgets/astro 0.3.3 → 0.4.1

package/README.md

@@ -239,18 +239,29 @@ await addReaction({
 
 ## Styling
 
-Components use CSS custom properties for theming. Override them to match your site:
+Components inherit their font and text color from the surrounding page by default, while interactive controls use the browser's accent colors. Use a preset when the widget sits outside your site's normal color context:
+
+```astro
+<Comments theme="auto" ... />
+```
+
+Set semantic CSS custom properties on a wrapper or the widget itself to match your site. The same tokens work across every styled component:
 
 ```css
-.jamwidgets-comments {
-  --jamwidgets-border-color: #e5e7eb;
-  --jamwidgets-bg-color: #f9fafb;
-  --jamwidgets-text-color: inherit;
-  --jamwidgets-button-bg: #3b82f6;
-  /* ... see component source for all variables */
+.article-widgets {
+  --jamwidgets-color-text: var(--color-ink);
+  --jamwidgets-color-muted: var(--color-ink-muted);
+  --jamwidgets-color-surface: var(--color-paper);
+  --jamwidgets-color-border: var(--color-rule);
+  --jamwidgets-color-accent: var(--color-link);
+  --jamwidgets-color-accent-hover: var(--color-link-hover);
+  --jamwidgets-color-on-accent: white;
+  --jamwidgets-focus-ring-color: color-mix(in srgb, var(--color-link) 28%, transparent);
 }
 ```
 
+Status colors can be customized with `--jamwidgets-color-success`, `--jamwidgets-color-error`, and `--jamwidgets-color-notice`. Components adapt to their container width, so subscribe, waitlist, comments, and feedback controls stack when embedded in a narrow column.
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamwidgets/astro",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "description": "Astro components and content loader for Jamwidgets (forms, comments, reactions, posts)",
   "repository": {
     "type": "git",
@@ -42,7 +42,7 @@
   "scripts": {
     "build": "tsc",
     "dev": "tsc --watch",
-    "test": "vitest run test/loader.test.ts"
+    "test": "vitest run"
   },
   "keywords": [
     "astro",
@@ -57,7 +57,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jamwidgets/core": "^0.3.2"
+    "@jamwidgets/core": "^0.3.4"
   },
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0 || ^7.0.0"

package/src/Announcements.astro

@@ -14,6 +14,8 @@ interface Props {
   siteKey: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the container */
   class?: string;
 }
@@ -24,15 +26,19 @@ const API_PATH = "/api/v1";
 const {
   siteKey,
   endpoint = DEFAULT_ENDPOINT,
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
 // Build the API URL
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
-  class:list={["jamwidgets-announcements", className]}
+  class:list={["jamwidgets-announcements", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-announcements
   data-endpoint={baseUrl}
   data-site-key={siteKey}
@@ -155,23 +161,23 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     }
 
     .jamwidgets-announcement-info {
-      background: #dbeafe;
-      color: #1e40af;
+      background: var(--jamwidgets-color-info-surface, color-mix(in srgb, #2563eb 10%, transparent));
+      color: var(--jamwidgets-color-info, currentColor);
     }
 
     .jamwidgets-announcement-warning {
-      background: #fef3c7;
-      color: #92400e;
+      background: var(--jamwidgets-color-notice-surface, color-mix(in srgb, #ca8a04 12%, transparent));
+      color: var(--jamwidgets-color-notice, currentColor);
     }
 
     .jamwidgets-announcement-success {
-      background: #dcfce7;
-      color: #166534;
+      background: var(--jamwidgets-success-bg);
+      color: var(--jamwidgets-success-text);
     }
 
     .jamwidgets-announcement-error {
-      background: #fef2f2;
-      color: #991b1b;
+      background: var(--jamwidgets-error-bg);
+      color: var(--jamwidgets-error-text);
     }
 
     .jamwidgets-announcement-content {
@@ -207,27 +213,5 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       height: 1rem;
     }
 
-    /* Dark mode adjustments */
-    @media (prefers-color-scheme: dark) {
-      .jamwidgets-announcement-info {
-        background: rgba(59, 130, 246, 0.2);
-        color: #93c5fd;
-      }
-
-      .jamwidgets-announcement-warning {
-        background: rgba(245, 158, 11, 0.2);
-        color: #fcd34d;
-      }
-
-      .jamwidgets-announcement-success {
-        background: rgba(34, 197, 94, 0.2);
-        color: #86efac;
-      }
-
-      .jamwidgets-announcement-error {
-        background: rgba(239, 68, 68, 0.2);
-        color: #fca5a5;
-      }
-    }
   }
 </style>

package/src/Comments.astro

@@ -16,8 +16,8 @@ interface Props {
   pageId: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the container */
   class?: string;
 }
@@ -29,7 +29,7 @@ const {
   siteKey,
   pageId,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
@@ -37,8 +37,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-comments", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-comments
@@ -227,7 +229,7 @@ import PoweredBy from "./PoweredBy.astro";
               content: formData.get("content"),
               parentId: parentId ? parseInt(parentId, 10) : undefined,
               _gotcha: honeypot || undefined,
-              _jamwidgets_ts: loadTimestamp,
+              _seriph_ts: loadTimestamp,
             }),
           },
         );
@@ -260,57 +262,11 @@ import PoweredBy from "./PoweredBy.astro";
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-comments {
-    --jamwidgets-border-color: #e5e7eb;
-    --jamwidgets-bg-color: #f9fafb;
-    --jamwidgets-text-color: inherit;
-    --jamwidgets-text-muted: #6b7280;
-    --jamwidgets-input-bg: white;
-    --jamwidgets-input-border: #9ca3af;
-    --jamwidgets-focus-color: #3b82f6;
-    --jamwidgets-focus-ring: rgba(59, 130, 246, 0.2);
-    --jamwidgets-button-bg: #3b82f6;
-    --jamwidgets-button-hover: #2563eb;
-    --jamwidgets-button-text: white;
-    --jamwidgets-notice-bg: #fef3c7;
-    --jamwidgets-notice-text: #92400e;
     color: var(--jamwidgets-text-color);
   }
 
-  .jamwidgets-comments.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #4b5563;
-    --jamwidgets-bg-color: transparent;
-    --jamwidgets-text-color: #f3f4f6;
-    --jamwidgets-text-muted: #9ca3af;
-    --jamwidgets-input-bg: #374151;
-    --jamwidgets-input-border: #9ca3af;
-    --jamwidgets-focus-color: #60a5fa;
-    --jamwidgets-focus-ring: rgba(96, 165, 250, 0.3);
-    --jamwidgets-button-bg: #3b82f6;
-    --jamwidgets-button-hover: #60a5fa;
-    --jamwidgets-button-text: white;
-    --jamwidgets-notice-bg: #422006;
-    --jamwidgets-notice-text: #fcd34d;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-comments.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #4b5563;
-      --jamwidgets-bg-color: transparent;
-      --jamwidgets-text-color: #f3f4f6;
-      --jamwidgets-text-muted: #9ca3af;
-      --jamwidgets-input-bg: #374151;
-      --jamwidgets-input-border: #9ca3af;
-      --jamwidgets-focus-color: #60a5fa;
-      --jamwidgets-focus-ring: rgba(96, 165, 250, 0.3);
-      --jamwidgets-button-bg: #3b82f6;
-      --jamwidgets-button-hover: #60a5fa;
-      --jamwidgets-button-text: white;
-      --jamwidgets-notice-bg: #422006;
-      --jamwidgets-notice-text: #fcd34d;
-    }
-  }
-
   .jamwidgets-comments-form {
     margin-top: 1rem;
     padding-top: 1rem;
@@ -320,7 +276,7 @@ import PoweredBy from "./PoweredBy.astro";
     gap: 0.5rem;
   }
 
-  @media (min-width: 480px) {
+  @container (min-width: 30rem) {
     .jamwidgets-comments-form {
       grid-template-columns: 1fr 1fr;
     }
@@ -384,9 +340,7 @@ import PoweredBy from "./PoweredBy.astro";
 
   .jamwidgets-comments .jamwidgets-form-group input:focus,
   .jamwidgets-comments .jamwidgets-form-group textarea:focus {
-    outline: none;
     border-color: var(--jamwidgets-focus-color);
-    box-shadow: 0 0 0 2px var(--jamwidgets-focus-ring);
   }
 
   .jamwidgets-comments .jamwidgets-comments-form button[type="submit"] {
@@ -474,4 +428,5 @@ import PoweredBy from "./PoweredBy.astro";
     border-radius: 0.25rem;
     font-size: 0.8125rem;
   }
+  }
 </style>

package/src/Embed.astro

@@ -16,8 +16,8 @@ interface Props {
   siteKey: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
 }
 
 const DEFAULT_ENDPOINT = "https://jamwidgets.com";
@@ -26,12 +26,15 @@ const API_PATH = "/api/v1";
 const {
   siteKey,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
 } = Astro.props;
 
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <jamwidgets-embed
   data-site-key={siteKey}
   data-endpoint={baseUrl}
@@ -316,50 +319,9 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 <style is:global>
   @layer jamwidgets {
     .jamwidgets-poll {
-      --jamwidgets-border-color: #e5e7eb;
-      --jamwidgets-bg-color: white;
-      --jamwidgets-text-color: inherit;
-      --jamwidgets-text-muted: #6b7280;
-      --jamwidgets-hover-bg: #f3f4f6;
-      --jamwidgets-selected-bg: #dbeafe;
-      --jamwidgets-selected-border: #3b82f6;
-      --jamwidgets-bar-bg: #dbeafe;
-      --jamwidgets-voted-bar-bg: #3b82f6;
-      --jamwidgets-button-bg: #3b82f6;
-      --jamwidgets-button-text: white;
-      --jamwidgets-button-hover: #2563eb;
-
       font-family: inherit;
     }
 
-    /* Dark theme */
-    .jamwidgets-poll.jamwidgets-theme-dark {
-      --jamwidgets-border-color: #374151;
-      --jamwidgets-bg-color: transparent;
-      --jamwidgets-text-color: #f3f4f6;
-      --jamwidgets-text-muted: #9ca3af;
-      --jamwidgets-hover-bg: #374151;
-      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
-      --jamwidgets-selected-border: #3b82f6;
-      --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
-      --jamwidgets-voted-bar-bg: #3b82f6;
-    }
-
-    /* Auto theme */
-    @media (prefers-color-scheme: dark) {
-      .jamwidgets-poll.jamwidgets-theme-auto {
-        --jamwidgets-border-color: #374151;
-        --jamwidgets-bg-color: transparent;
-        --jamwidgets-text-color: #f3f4f6;
-        --jamwidgets-text-muted: #9ca3af;
-        --jamwidgets-hover-bg: #374151;
-        --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
-        --jamwidgets-selected-border: #3b82f6;
-        --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
-        --jamwidgets-voted-bar-bg: #3b82f6;
-      }
-    }
-
     .jamwidgets-poll-loading {
       display: flex;
       justify-content: center;
@@ -491,23 +453,11 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
     .jamwidgets-poll-error {
       padding: 0.75rem;
-      background: #fef2f2;
-      color: #991b1b;
+      background: var(--jamwidgets-error-bg);
+      color: var(--jamwidgets-error-text);
       border-radius: 0.5rem;
       font-size: 0.875rem;
     }
 
-    .jamwidgets-theme-dark .jamwidgets-poll-error,
-    .jamwidgets-theme-auto .jamwidgets-poll-error {
-      background: rgba(239, 68, 68, 0.15);
-      color: #fca5a5;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .jamwidgets-theme-auto .jamwidgets-poll-error {
-        background: rgba(239, 68, 68, 0.15);
-        color: #fca5a5;
-      }
-    }
   }
 </style>

package/src/Feedback.astro

@@ -14,8 +14,8 @@ interface Props {
   siteKey: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** Placeholder text for the feedback input (default: 'Share your feedback...') */
   placeholder?: string;
   /** Show feedback type selector (default: true) */
@@ -30,7 +30,7 @@ const API_PATH = "/api/v1";
 const {
   siteKey,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
   placeholder = "Share your feedback...",
   showTypeSelector = true,
   class: className = "",
@@ -40,8 +40,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-feedback", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-feedback
@@ -170,48 +172,11 @@ import PoweredBy from "./PoweredBy.astro";
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-feedback {
-    --jamwidgets-border-color: #9ca3af;
-    --jamwidgets-bg-color: white;
-    --jamwidgets-text-color: inherit;
-    --jamwidgets-text-muted: #6b7280;
-    --jamwidgets-hover-bg: #f3f4f6;
-    --jamwidgets-selected-bg: #dbeafe;
-    --jamwidgets-selected-border: #3b82f6;
-    --jamwidgets-button-bg: #3b82f6;
-    --jamwidgets-button-text: white;
-    --jamwidgets-button-hover: #2563eb;
-    --jamwidgets-success-color: #16a34a;
-    --jamwidgets-error-color: #dc2626;
     font-family: inherit;
   }
 
-  .jamwidgets-feedback.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #9ca3af;
-    --jamwidgets-bg-color: #374151;
-    --jamwidgets-text-color: #f3f4f6;
-    --jamwidgets-text-muted: #9ca3af;
-    --jamwidgets-hover-bg: #4b5563;
-    --jamwidgets-selected-bg: rgba(59, 130, 246, 0.3);
-    --jamwidgets-selected-border: #60a5fa;
-    --jamwidgets-success-color: #22c55e;
-    --jamwidgets-error-color: #ef4444;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-feedback.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #9ca3af;
-      --jamwidgets-bg-color: #374151;
-      --jamwidgets-text-color: #f3f4f6;
-      --jamwidgets-text-muted: #9ca3af;
-      --jamwidgets-hover-bg: #4b5563;
-      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.3);
-      --jamwidgets-selected-border: #60a5fa;
-      --jamwidgets-success-color: #22c55e;
-      --jamwidgets-error-color: #ef4444;
-    }
-  }
-
   .jamwidgets-feedback-form {
     display: flex;
     flex-direction: column;
@@ -278,9 +243,7 @@ import PoweredBy from "./PoweredBy.astro";
   }
 
   .jamwidgets-feedback .jamwidgets-feedback-textarea:focus {
-    outline: none;
     border-color: var(--jamwidgets-selected-border);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
   }
 
   .jamwidgets-feedback .jamwidgets-feedback-textarea::placeholder {
@@ -328,4 +291,16 @@ import PoweredBy from "./PoweredBy.astro";
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  @container (max-width: 25rem) {
+    .jamwidgets-feedback-footer {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .jamwidgets-feedback .jamwidgets-feedback-submit {
+      width: 100%;
+    }
+  }
+  }
 </style>

package/src/Form.astro

@@ -21,8 +21,8 @@ interface Props {
   formSlug: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the form */
   class?: string;
 }
@@ -34,7 +34,7 @@ const {
   siteKey,
   formSlug,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
@@ -42,8 +42,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <form
   class:list={["jamwidgets-form", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-form
@@ -65,7 +67,7 @@ import PoweredBy from "./PoweredBy.astro";
 </form>
 
 <script>
-  import { getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
+  import { generateUUID, getAttributionHeaders, getVisitorId } from "@jamwidgets/core";
 
   interface FormSubmitResponse {
     success: boolean;
@@ -74,10 +76,13 @@ import PoweredBy from "./PoweredBy.astro";
 
   // Store form load timestamps for spam detection
   const formTimestamps = new WeakMap<Element, number>();
+  const requestIds = new WeakMap<Element, string>();
+  const requestBodies = new WeakMap<Element, string>();
 
   document.querySelectorAll("[data-jamwidgets-form]").forEach((form) => {
     // Record when form was loaded (for time-based spam detection)
     formTimestamps.set(form, Math.floor(Date.now() / 1000));
+    requestIds.set(form, generateUUID());
 
     form.addEventListener("submit", async (e) => {
       e.preventDefault();
@@ -110,8 +115,14 @@ import PoweredBy from "./PoweredBy.astro";
       // Add timestamp for time-based spam detection
       const loadTimestamp = formTimestamps.get(formEl);
       if (loadTimestamp) {
-        data._jamwidgets_ts = loadTimestamp;
+        data._seriph_ts = loadTimestamp;
       }
+      const comparableBody = JSON.stringify(data);
+      if (requestBodies.get(formEl) !== comparableBody) {
+        requestIds.set(formEl, generateUUID());
+        requestBodies.set(formEl, comparableBody);
+      }
+      data._seriph_id = requestIds.get(formEl) || generateUUID();
 
       // Dispatch loading event
       formEl.dispatchEvent(new CustomEvent("jamwidgets:loading"));
@@ -139,6 +150,8 @@ import PoweredBy from "./PoweredBy.astro";
         }
 
         const result: FormSubmitResponse = await response.json();
+        requestIds.set(formEl, generateUUID());
+        requestBodies.delete(formEl);
 
         // Show success message
         if (messageEl) {
@@ -181,37 +194,6 @@ import PoweredBy from "./PoweredBy.astro";
 
 <style is:global>
   @layer jamwidgets {
-    .jamwidgets-form {
-      --jamwidgets-success-bg: #dcfce7;
-      --jamwidgets-success-text: #166534;
-      --jamwidgets-success-border: #bbf7d0;
-      --jamwidgets-error-bg: #fef2f2;
-      --jamwidgets-error-text: #991b1b;
-      --jamwidgets-error-border: #fecaca;
-    }
-
-    /* Dark theme */
-    .jamwidgets-form.jamwidgets-theme-dark {
-      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-      --jamwidgets-success-text: #86efac;
-      --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
-      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-      --jamwidgets-error-text: #fca5a5;
-      --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
-    }
-
-    /* Auto theme - follows prefers-color-scheme */
-    @media (prefers-color-scheme: dark) {
-      .jamwidgets-form.jamwidgets-theme-auto {
-        --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-        --jamwidgets-success-text: #86efac;
-        --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
-        --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-        --jamwidgets-error-text: #fca5a5;
-        --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
-      }
-    }
-
     .jamwidgets-form-message {
       margin-top: 1rem;
       padding: 0.75rem 1rem;

package/src/Poll.astro

@@ -19,8 +19,8 @@ interface Props {
   slug: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the container */
   class?: string;
 }
@@ -32,7 +32,7 @@ const {
   siteKey,
   slug,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
@@ -40,8 +40,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-poll", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-poll
@@ -297,51 +299,11 @@ import PoweredBy from "./PoweredBy.astro";
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-poll {
-    --jamwidgets-border-color: #e5e7eb;
-    --jamwidgets-bg-color: white;
-    --jamwidgets-text-color: inherit;
-    --jamwidgets-text-muted: #6b7280;
-    --jamwidgets-hover-bg: #f3f4f6;
-    --jamwidgets-selected-bg: #dbeafe;
-    --jamwidgets-selected-border: #3b82f6;
-    --jamwidgets-bar-bg: #dbeafe;
-    --jamwidgets-voted-bar-bg: #3b82f6;
-    --jamwidgets-button-bg: #3b82f6;
-    --jamwidgets-button-text: white;
-    --jamwidgets-button-hover: #2563eb;
-
     font-family: inherit;
   }
 
-  /* Dark theme */
-  .jamwidgets-poll.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #374151;
-    --jamwidgets-bg-color: transparent;
-    --jamwidgets-text-color: #f3f4f6;
-    --jamwidgets-text-muted: #9ca3af;
-    --jamwidgets-hover-bg: #374151;
-    --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
-    --jamwidgets-selected-border: #3b82f6;
-    --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
-    --jamwidgets-voted-bar-bg: #3b82f6;
-  }
-
-  /* Auto theme */
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-poll.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #374151;
-      --jamwidgets-bg-color: transparent;
-      --jamwidgets-text-color: #f3f4f6;
-      --jamwidgets-text-muted: #9ca3af;
-      --jamwidgets-hover-bg: #374151;
-      --jamwidgets-selected-bg: rgba(59, 130, 246, 0.2);
-      --jamwidgets-selected-border: #3b82f6;
-      --jamwidgets-bar-bg: rgba(59, 130, 246, 0.2);
-      --jamwidgets-voted-bar-bg: #3b82f6;
-    }
-  }
-
   .jamwidgets-poll-loading {
     display: flex;
     justify-content: center;
@@ -473,22 +435,11 @@ import PoweredBy from "./PoweredBy.astro";
 
   .jamwidgets-poll-error {
     padding: 0.75rem;
-    background: #fef2f2;
-    color: #991b1b;
+    background: var(--jamwidgets-error-bg);
+    color: var(--jamwidgets-error-text);
     border-radius: 0.5rem;
     font-size: 0.875rem;
   }
 
-  .jamwidgets-theme-dark .jamwidgets-poll-error,
-  .jamwidgets-theme-auto .jamwidgets-poll-error {
-    background: rgba(239, 68, 68, 0.15);
-    color: #fca5a5;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-theme-auto .jamwidgets-poll-error {
-      background: rgba(239, 68, 68, 0.15);
-      color: #fca5a5;
-    }
   }
 </style>

package/src/PoweredBy.astro

@@ -74,7 +74,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     line-height: 1;
   }
   .jamwidgets-powered-by a {
-    color: var(--jamwidgets-muted-color, #9ca3af);
+    color: var(--jamwidgets-color-muted, color-mix(in srgb, currentColor 55%, transparent));
     text-decoration: none;
   }
   .jamwidgets-powered-by a:hover {

package/src/Reactions.astro

@@ -24,8 +24,8 @@ interface Props {
   reactions?: string[];
   /** Custom icons for reaction types (emoji or text) */
   icons?: Record<string, string>;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the container */
   class?: string;
 }
@@ -49,7 +49,7 @@ const {
   endpoint = DEFAULT_ENDPOINT,
   reactions = ["like"],
   icons = {},
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
@@ -62,8 +62,11 @@ function getIcon(type: string): string {
 
 // Build the API URL
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-reactions", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-reactions
@@ -215,50 +218,13 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-reactions {
-    --jamwidgets-border-color: #e5e7eb;
-    --jamwidgets-button-bg: white;
-    --jamwidgets-hover-bg: #f3f4f6;
-    --jamwidgets-hover-border: #d1d5db;
-    --jamwidgets-active-bg: #dbeafe;
-    --jamwidgets-active-border: #93c5fd;
-    --jamwidgets-active-hover-bg: #bfdbfe;
-    --jamwidgets-count-color: #6b7280;
-    --jamwidgets-active-text: #1d4ed8;
-
     display: flex;
     gap: 0.5rem;
     flex-wrap: wrap;
   }
 
-  /* Dark theme */
-  .jamwidgets-reactions.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #374151;
-    --jamwidgets-button-bg: transparent;
-    --jamwidgets-hover-bg: #374151;
-    --jamwidgets-hover-border: #4b5563;
-    --jamwidgets-active-bg: rgba(59, 130, 246, 0.2);
-    --jamwidgets-active-border: #3b82f6;
-    --jamwidgets-active-hover-bg: rgba(59, 130, 246, 0.3);
-    --jamwidgets-count-color: #9ca3af;
-    --jamwidgets-active-text: #60a5fa;
-  }
-
-  /* Auto theme - follows prefers-color-scheme */
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-reactions.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #374151;
-      --jamwidgets-button-bg: transparent;
-      --jamwidgets-hover-bg: #374151;
-      --jamwidgets-hover-border: #4b5563;
-      --jamwidgets-active-bg: rgba(59, 130, 246, 0.2);
-      --jamwidgets-active-border: #3b82f6;
-      --jamwidgets-active-hover-bg: rgba(59, 130, 246, 0.3);
-      --jamwidgets-count-color: #9ca3af;
-      --jamwidgets-active-text: #60a5fa;
-    }
-  }
-
   .jamwidgets-reaction-btn {
     display: inline-flex;
     align-items: center;
@@ -306,4 +272,5 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
   .jamwidgets-reacted .jamwidgets-reaction-count {
     color: var(--jamwidgets-active-text);
   }
+  }
 </style>

package/src/Subscribe.astro

@@ -28,8 +28,8 @@ interface Props {
   placeholder?: string;
   /** Success message override (default: uses server response) */
   successMessage?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the form */
   class?: string;
 }
@@ -43,7 +43,7 @@ const {
   buttonText = "Subscribe",
   placeholder = "your@email.com",
   successMessage,
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
@@ -51,8 +51,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <form
   class:list={["jamwidgets-subscribe", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-subscribe
@@ -197,55 +199,11 @@ import PoweredBy from "./PoweredBy.astro";
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-subscribe {
-    --jamwidgets-border-color: #d1d5db;
-    --jamwidgets-input-bg: #ffffff;
-    --jamwidgets-input-text: #111827;
-    --jamwidgets-button-bg: #4f46e5;
-    --jamwidgets-button-text: #ffffff;
-    --jamwidgets-button-hover: #4338ca;
-    --jamwidgets-success-bg: #dcfce7;
-    --jamwidgets-success-text: #166534;
-    --jamwidgets-success-border: #bbf7d0;
-    --jamwidgets-error-bg: #fef2f2;
-    --jamwidgets-error-text: #991b1b;
-    --jamwidgets-error-border: #fecaca;
-    --jamwidgets-focus-ring: rgba(79, 70, 229, 0.5);
     position: relative;
   }
 
-  /* Dark theme */
-  .jamwidgets-subscribe.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #4b5563;
-    --jamwidgets-input-bg: #1f2937;
-    --jamwidgets-input-text: #f9fafb;
-    --jamwidgets-button-bg: #6366f1;
-    --jamwidgets-button-hover: #818cf8;
-    --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-    --jamwidgets-success-text: #86efac;
-    --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
-    --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-    --jamwidgets-error-text: #fca5a5;
-    --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
-  }
-
-  /* Auto theme - follows prefers-color-scheme */
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-subscribe.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #4b5563;
-      --jamwidgets-input-bg: #1f2937;
-      --jamwidgets-input-text: #f9fafb;
-      --jamwidgets-button-bg: #6366f1;
-      --jamwidgets-button-hover: #818cf8;
-      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-      --jamwidgets-success-text: #86efac;
-      --jamwidgets-success-border: rgba(34, 197, 94, 0.3);
-      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-      --jamwidgets-error-text: #fca5a5;
-      --jamwidgets-error-border: rgba(239, 68, 68, 0.3);
-    }
-  }
-
   .jamwidgets-subscribe-input-group {
     display: flex;
     gap: 0.5rem;
@@ -263,13 +221,11 @@ import PoweredBy from "./PoweredBy.astro";
   }
 
   .jamwidgets-subscribe-input:focus {
-    outline: none;
     border-color: var(--jamwidgets-button-bg);
-    box-shadow: 0 0 0 3px var(--jamwidgets-focus-ring);
   }
 
   .jamwidgets-subscribe-input::placeholder {
-    color: #9ca3af;
+    color: var(--jamwidgets-text-muted);
   }
 
   .jamwidgets-subscribe-button {
@@ -312,4 +268,15 @@ import PoweredBy from "./PoweredBy.astro";
     color: var(--jamwidgets-error-text);
     border: 1px solid var(--jamwidgets-error-border);
   }
+
+  @container (max-width: 25rem) {
+    .jamwidgets-subscribe-input-group {
+      flex-direction: column;
+    }
+
+    .jamwidgets-subscribe-button {
+      width: 100%;
+    }
+  }
+  }
 </style>

package/src/Theme.astro

@@ -0,0 +1,129 @@
+<style is:global>
+  @layer jamwidgets {
+    :where(
+      .jamwidgets-announcements,
+      .jamwidgets-comments,
+      .jamwidgets-feedback,
+      .jamwidgets-form,
+      .jamwidgets-poll,
+      .jamwidgets-reactions,
+      .jamwidgets-subscribe,
+      .jamwidgets-views,
+      .jamwidgets-waitlist
+    ) {
+      --jamwidgets-border-color: var(--jamwidgets-color-border, color-mix(in srgb, currentColor 22%, transparent));
+      --jamwidgets-bg-color: var(--jamwidgets-color-surface, transparent);
+      --jamwidgets-input-bg: var(--jamwidgets-color-surface, transparent);
+      --jamwidgets-input-text: var(--jamwidgets-color-text, currentColor);
+      --jamwidgets-input-border: var(--jamwidgets-color-border, color-mix(in srgb, currentColor 35%, transparent));
+      --jamwidgets-text-color: var(--jamwidgets-color-text, currentColor);
+      --jamwidgets-text-muted: var(--jamwidgets-color-muted, color-mix(in srgb, currentColor 62%, transparent));
+      --jamwidgets-icon-color: var(--jamwidgets-color-muted, color-mix(in srgb, currentColor 55%, transparent));
+      --jamwidgets-count-color: var(--jamwidgets-color-muted, color-mix(in srgb, currentColor 62%, transparent));
+      --jamwidgets-button-bg: var(--jamwidgets-color-accent, ButtonFace);
+      --jamwidgets-button-hover: var(--jamwidgets-color-accent-hover, color-mix(in srgb, var(--jamwidgets-color-accent, ButtonFace) 82%, black));
+      --jamwidgets-button-text: var(--jamwidgets-color-on-accent, ButtonText);
+      --jamwidgets-focus-color: var(--jamwidgets-color-accent, currentColor);
+      --jamwidgets-hover-bg: var(--jamwidgets-color-hover, color-mix(in srgb, currentColor 7%, transparent));
+      --jamwidgets-hover-border: var(--jamwidgets-color-border, color-mix(in srgb, currentColor 32%, transparent));
+      --jamwidgets-selected-bg: var(--jamwidgets-color-selected, color-mix(in srgb, var(--jamwidgets-color-accent, currentColor) 12%, transparent));
+      --jamwidgets-selected-border: var(--jamwidgets-color-accent, currentColor);
+      --jamwidgets-active-bg: var(--jamwidgets-color-selected, color-mix(in srgb, var(--jamwidgets-color-accent, currentColor) 12%, transparent));
+      --jamwidgets-active-border: var(--jamwidgets-color-accent, currentColor);
+      --jamwidgets-active-hover-bg: var(--jamwidgets-color-selected-hover, color-mix(in srgb, var(--jamwidgets-color-accent, currentColor) 18%, transparent));
+      --jamwidgets-active-text: var(--jamwidgets-color-accent, currentColor);
+      --jamwidgets-bar-bg: var(--jamwidgets-color-selected, color-mix(in srgb, var(--jamwidgets-color-accent, currentColor) 12%, transparent));
+      --jamwidgets-voted-bar-bg: var(--jamwidgets-color-accent, currentColor);
+      --jamwidgets-success-bg: var(--jamwidgets-color-success-surface, color-mix(in srgb, #16a34a 12%, transparent));
+      --jamwidgets-success-text: var(--jamwidgets-color-success, currentColor);
+      --jamwidgets-success-border: var(--jamwidgets-color-success-border, color-mix(in srgb, #16a34a 30%, transparent));
+      --jamwidgets-success-color: var(--jamwidgets-color-success, currentColor);
+      --jamwidgets-error-bg: var(--jamwidgets-color-error-surface, color-mix(in srgb, #dc2626 10%, transparent));
+      --jamwidgets-error-text: var(--jamwidgets-color-error, currentColor);
+      --jamwidgets-error-border: var(--jamwidgets-color-error-border, color-mix(in srgb, #dc2626 28%, transparent));
+      --jamwidgets-error-color: var(--jamwidgets-color-error, currentColor);
+      --jamwidgets-notice-bg: var(--jamwidgets-color-notice-surface, color-mix(in srgb, #ca8a04 12%, transparent));
+      --jamwidgets-notice-text: var(--jamwidgets-color-notice, currentColor);
+      color: var(--jamwidgets-text-color);
+      font-family: inherit;
+      font-size: var(--jamwidgets-font-size, inherit);
+      line-height: var(--jamwidgets-line-height, inherit);
+    }
+
+    :where(.jamwidgets-comments, .jamwidgets-feedback, .jamwidgets-subscribe, .jamwidgets-waitlist) {
+      container-type: inline-size;
+    }
+
+    :where(
+      .jamwidgets-announcements,
+      .jamwidgets-comments,
+      .jamwidgets-feedback,
+      .jamwidgets-form,
+      .jamwidgets-poll,
+      .jamwidgets-reactions,
+      .jamwidgets-subscribe,
+      .jamwidgets-views,
+      .jamwidgets-waitlist
+    ),
+    :where(.jamwidgets-comments, .jamwidgets-feedback, .jamwidgets-form, .jamwidgets-poll, .jamwidgets-reactions, .jamwidgets-subscribe, .jamwidgets-waitlist) :where(button, input, textarea, select) {
+      box-sizing: border-box;
+    }
+
+    :where(.jamwidgets-comments, .jamwidgets-feedback, .jamwidgets-form, .jamwidgets-poll, .jamwidgets-reactions, .jamwidgets-subscribe, .jamwidgets-waitlist) :where(button, input, textarea, select) {
+      font-family: inherit;
+    }
+
+    :where(.jamwidgets-theme-light, .jamwidgets-theme-auto) {
+      color-scheme: light;
+      --jamwidgets-color-text: #1f2937;
+      --jamwidgets-color-muted: #6b7280;
+      --jamwidgets-color-surface: #ffffff;
+      --jamwidgets-color-border: #d1d5db;
+      --jamwidgets-color-accent: #374151;
+      --jamwidgets-color-accent-hover: #111827;
+      --jamwidgets-color-on-accent: #ffffff;
+      --jamwidgets-color-success: #15803d;
+      --jamwidgets-color-error: #b91c1c;
+      --jamwidgets-color-notice: #854d0e;
+      --jamwidgets-color-info: #1d4ed8;
+    }
+
+    :where(.jamwidgets-theme-dark) {
+      color-scheme: dark;
+      --jamwidgets-color-text: #f3f4f6;
+      --jamwidgets-color-muted: #9ca3af;
+      --jamwidgets-color-surface: #1f2937;
+      --jamwidgets-color-border: #4b5563;
+      --jamwidgets-color-accent: #d1d5db;
+      --jamwidgets-color-accent-hover: #f9fafb;
+      --jamwidgets-color-on-accent: #111827;
+      --jamwidgets-color-success: #86efac;
+      --jamwidgets-color-error: #fca5a5;
+      --jamwidgets-color-notice: #fde68a;
+      --jamwidgets-color-info: #93c5fd;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :where(.jamwidgets-theme-auto) {
+        color-scheme: dark;
+        --jamwidgets-color-text: #f3f4f6;
+        --jamwidgets-color-muted: #9ca3af;
+        --jamwidgets-color-surface: #1f2937;
+        --jamwidgets-color-border: #4b5563;
+        --jamwidgets-color-accent: #d1d5db;
+        --jamwidgets-color-accent-hover: #f9fafb;
+        --jamwidgets-color-on-accent: #111827;
+        --jamwidgets-color-success: #86efac;
+        --jamwidgets-color-error: #fca5a5;
+        --jamwidgets-color-notice: #fde68a;
+        --jamwidgets-color-info: #93c5fd;
+      }
+    }
+
+    :where(.jamwidgets-comments, .jamwidgets-feedback, .jamwidgets-form, .jamwidgets-poll, .jamwidgets-reactions, .jamwidgets-subscribe, .jamwidgets-waitlist) :where(button, input, textarea, select):focus-visible,
+    :where(.jamwidgets-announcement-dismiss):focus-visible {
+      outline: 2px solid var(--jamwidgets-focus-color);
+      outline-offset: 2px;
+    }
+  }
+</style>

package/src/Views.astro

@@ -21,8 +21,8 @@ interface Props {
   endpoint?: string;
   /** Show unique visitor count alongside total views (default: false) */
   showUnique?: boolean;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** CSS class to add to the container */
   class?: string;
 }
@@ -35,14 +35,17 @@ const {
   pageId,
   endpoint = DEFAULT_ENDPOINT,
   showUnique = false,
-  theme = "light",
+  theme = "inherit",
   class: className = "",
 } = Astro.props;
 
 // Build the API URL
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
+
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-views", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-views
@@ -157,9 +160,6 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 <style is:global>
   @layer jamwidgets {
     .jamwidgets-views {
-      --jamwidgets-text-color: #6b7280;
-      --jamwidgets-icon-color: #9ca3af;
-
       display: inline-flex;
       align-items: center;
       gap: 0.375rem;
@@ -167,20 +167,6 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
       color: var(--jamwidgets-text-color);
     }
 
-    /* Dark theme */
-    .jamwidgets-views.jamwidgets-theme-dark {
-      --jamwidgets-text-color: #9ca3af;
-      --jamwidgets-icon-color: #6b7280;
-    }
-
-    /* Auto theme - follows prefers-color-scheme */
-    @media (prefers-color-scheme: dark) {
-      .jamwidgets-views.jamwidgets-theme-auto {
-        --jamwidgets-text-color: #9ca3af;
-        --jamwidgets-icon-color: #6b7280;
-      }
-    }
-
     .jamwidgets-views-icon {
       display: flex;
       color: var(--jamwidgets-icon-color);
@@ -192,6 +178,7 @@ const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
     }
 
     .jamwidgets-views-count {
+      color: var(--jamwidgets-count-color);
       font-variant-numeric: tabular-nums;
     }
 

package/src/Waitlist.astro

@@ -13,8 +13,8 @@ interface Props {
   siteKey: string;
   /** Base URL of your JamWidgets instance (default: 'https://jamwidgets.com') */
   endpoint?: string;
-  /** Theme preset: 'light' (default), 'dark', or 'auto' (uses prefers-color-scheme) */
-  theme?: "light" | "dark" | "auto";
+  /** Theme preset. Defaults to inheriting the host page. */
+  theme?: "inherit" | "light" | "dark" | "auto";
   /** Placeholder text for the email input (default: 'Enter your email') */
   placeholder?: string;
   /** Button text (default: 'Join Waitlist') */
@@ -31,7 +31,7 @@ const API_PATH = "/api/v1";
 const {
   siteKey,
   endpoint = DEFAULT_ENDPOINT,
-  theme = "light",
+  theme = "inherit",
   placeholder = "Enter your email",
   buttonText = "Join Waitlist",
   successMessage = "You're on the list!",
@@ -42,8 +42,10 @@ const {
 const baseUrl = endpoint.replace(/\/+$/, "") + API_PATH;
 
 import PoweredBy from "./PoweredBy.astro";
+import Theme from "./Theme.astro";
 ---
 
+<Theme />
 <div
   class:list={["jamwidgets-waitlist", `jamwidgets-theme-${theme}`, className]}
   data-jamwidgets-waitlist
@@ -150,45 +152,11 @@ import PoweredBy from "./PoweredBy.astro";
 </script>
 
 <style is:global>
+  @layer jamwidgets {
   .jamwidgets-waitlist {
-    --jamwidgets-border-color: #9ca3af;
-    --jamwidgets-bg-color: white;
-    --jamwidgets-text-color: inherit;
-    --jamwidgets-text-muted: #6b7280;
-    --jamwidgets-button-bg: #3b82f6;
-    --jamwidgets-button-text: white;
-    --jamwidgets-button-hover: #2563eb;
-    --jamwidgets-success-color: #16a34a;
-    --jamwidgets-success-bg: #dcfce7;
-    --jamwidgets-error-color: #dc2626;
-    --jamwidgets-error-bg: #fef2f2;
     font-family: inherit;
   }
 
-  .jamwidgets-waitlist.jamwidgets-theme-dark {
-    --jamwidgets-border-color: #9ca3af;
-    --jamwidgets-bg-color: #374151;
-    --jamwidgets-text-color: #f3f4f6;
-    --jamwidgets-text-muted: #9ca3af;
-    --jamwidgets-success-color: #22c55e;
-    --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-    --jamwidgets-error-color: #ef4444;
-    --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .jamwidgets-waitlist.jamwidgets-theme-auto {
-      --jamwidgets-border-color: #9ca3af;
-      --jamwidgets-bg-color: #374151;
-      --jamwidgets-text-color: #f3f4f6;
-      --jamwidgets-text-muted: #9ca3af;
-      --jamwidgets-success-color: #22c55e;
-      --jamwidgets-success-bg: rgba(34, 197, 94, 0.15);
-      --jamwidgets-error-color: #ef4444;
-      --jamwidgets-error-bg: rgba(239, 68, 68, 0.15);
-    }
-  }
-
   .jamwidgets-waitlist-form {
     display: flex;
     gap: 0.5rem;
@@ -207,9 +175,7 @@ import PoweredBy from "./PoweredBy.astro";
   }
 
   .jamwidgets-waitlist .jamwidgets-waitlist-input:focus {
-    outline: none;
     border-color: var(--jamwidgets-button-bg);
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
   }
 
   .jamwidgets-waitlist .jamwidgets-waitlist-input::placeholder {
@@ -255,7 +221,7 @@ import PoweredBy from "./PoweredBy.astro";
     color: var(--jamwidgets-error-color);
   }
 
-  @media (max-width: 400px) {
+  @container (max-width: 25rem) {
     .jamwidgets-waitlist-form {
       flex-direction: column;
     }
@@ -263,4 +229,5 @@ import PoweredBy from "./PoweredBy.astro";
       width: 100%;
     }
   }
+  }
 </style>