@amulet-laboratories/hex 0.3.0 → 0.5.1

package/src/themes/brass/tokens.css

@@ -0,0 +1,208 @@
+/* Hex — Burrowtail Design Tokens
+ * Pet care warmth. Soft amber leadership with dusty teal accents.
+ * Friendly, approachable, nature-grounded — suited for pet services and animal care.
+ *
+ * Full palette (10 swatch colors):
+ *   #F8F6F2  warm light gray  — background
+ *   #FFFFFF  white            — card, popover
+ *   #F0ECE4  warm beige       — secondary
+ *   #E6E0D6  light taupe      — muted
+ *   #DCD5C8  warm border      — borders
+ *   #7A6E5E  warm muted       — muted foreground
+ *   #2C2418  warm dark brown  — foreground text
+ *   #B88F42  soft amber       — primary, ring
+ *   #548383  dusty teal       — accent
+ *   #A07A30  darker amber     — hover
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+@theme {
+  /* Surface colors */
+  --color-background: #f8f6f2;
+  --color-foreground: #2c2418;
+  --color-card: #ffffff;
+  --color-card-foreground: #2c2418;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2c2418;
+
+  /* Brand */
+  --color-primary: #b88f42;
+  --color-primary-foreground: #ffffff;
+
+  /* Soft accents */
+  --color-secondary: #f0ece4;
+  --color-secondary-foreground: #2c2418;
+  --color-muted: #e6e0d6;
+  --color-muted-foreground: #7a6e5e;
+  --color-accent: #548383;
+  --color-accent-foreground: #ffffff;
+
+  /* Semantic status */
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-info: #2563eb;
+
+  /* Borders and focus */
+  --color-border: #dcd5c8;
+  --color-input: #dcd5c8;
+  --color-ring: #b88f42;
+
+  /* Typography */
+  --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-serif: 'Lora', ui-serif, Georgia, serif;
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+  --font-heading: 'Lora', ui-serif, Georgia, serif;
+
+  /* Typography — IDE-density type scale */
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+
+  /* Display font family */
+  --font-display: var(--font-serif);
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+
+  --radius: 8px;
+}
+
+:root {
+  --background: #f8f6f2;
+  --foreground: #2c2418;
+  --card: #ffffff;
+  --card-foreground: #2c2418;
+  --popover: #ffffff;
+  --popover-foreground: #2c2418;
+  --primary: #b88f42;
+  --primary-foreground: #ffffff;
+  --secondary: #f0ece4;
+  --secondary-foreground: #2c2418;
+  --muted: #e6e0d6;
+  --muted-foreground: #7a6e5e;
+  --accent: #548383;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --warning: #d97706;
+  --info: #2563eb;
+  --border: #dcd5c8;
+  --input: #dcd5c8;
+  --ring: #b88f42;
+
+  /* Color token bridge -- component CSS uses var(--color-*) */
+  --color-background: #f8f6f2;
+  --color-foreground: #2c2418;
+  --color-card: #ffffff;
+  --color-card-foreground: #2c2418;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2c2418;
+  --color-primary: #b88f42;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f0ece4;
+  --color-secondary-foreground: #2c2418;
+  --color-muted: #e6e0d6;
+  --color-muted-foreground: #7a6e5e;
+  --color-accent: #548383;
+  --color-accent-foreground: #ffffff;
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-info: #2563eb;
+  --color-border: #dcd5c8;
+  --color-input: #dcd5c8;
+  --color-ring: #b88f42;
+  --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Lora', ui-serif, Georgia, serif;
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-heading: 'Lora', ui-serif, Georgia, serif;
+  --radius: 8px;
+
+  /* Typography — IDE-density type scale */
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.8125rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 0.875rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+
+  /* Display font family */
+  --font-display: var(--font-serif);
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+
+  --radius: 8px;
+
+  /* Typography — IDE-density type scale (shorthand aliases) */
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.875rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --tracking-wider: 0.08em;
+  --font-display: var(--font-serif);
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+  --font-sans: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-serif: 'Lora', ui-serif, Georgia, serif;
+  --font-heading: 'Bitter', ui-serif, Georgia, serif;
+  --font-heading: 'Lora', ui-serif, Georgia, serif;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * All 10 swatch colors available for direct template use.
+   */
+  --td-light-gray: #f8f6f2;
+  --td-white: #ffffff;
+  --td-beige: #f0ece4;
+  --td-taupe: #e6e0d6;
+  --td-border: #dcd5c8;
+  --td-muted: #7a6e5e;
+  --td-dark: #2c2418;
+  --td-amber: #b88f42;
+  --td-teal: #548383;
+  --td-amber-hover: #a07a30;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where the Burrowtail palette needs
+   * values that can't be derived directly from --color-* semantics.
+   */
+
+  /* Button — darker amber for hover feedback */
+  --rig-button-hover-bg: #a07a30;
+
+  /* Scrollbar — warm brown tint for light mode */
+  --rig-scrollbar-thumb: rgba(44, 36, 24, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(44, 36, 24, 0.25);
+}

package/src/themes/{kbcv → cardinal}/tokens.css

@@ -73,6 +73,11 @@
   --font-display: var(--font-sans);
 
   --radius: 6px;
+
+  /* Tracking — letter-spacing for heading typography */
+  --tracking-heading: 0.15em;
+  --tracking-display: 0.2em;
+  --tracking-caps: 0.3em;
 }
 
 :root {

package/src/themes/citron/base.css

@@ -0,0 +1,232 @@
+/* Hex — Quizbit Base Styles
+ * SNES retro arcade aesthetic.
+ * VT323 CRT headings, RPG dialog borders, scanlines, gold glow, pixel snap.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ── Base ── */
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+  @apply bg-background text-foreground font-sans;
+
+  color-scheme: dark;
+  /* Intentionally no font-smoothing — sharper edges = more CRT feel */
+}
+
+body {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+  position: relative;
+}
+
+/* ── Scanline overlay ── */
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    transparent 2px,
+    rgba(0, 0, 0, 0.06) 2px,
+    rgba(0, 0, 0, 0.06) 4px
+  );
+  mix-blend-mode: multiply;
+}
+
+/* ── Headings — reset margins, keep font-family flexible ──
+ * Tailwind utilities (text-xl, font-bold, etc.) override font-family
+ * and weight, so base headings only reset margin/padding.
+ * Opt-in to VT323 CRT display style via `.heading-display`. */
+h1,
+h2,
+h3 {
+  margin: 0;
+  padding: 0;
+}
+
+/* Opt-in VT323 CRT display heading — apply with class="heading-display" */
+.heading-display {
+  font-family: var(--font-heading);
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  text-shadow:
+    0 0 10px rgba(248, 216, 72, 0.4),
+    0 0 30px rgba(248, 216, 72, 0.15),
+    2px 2px 0 rgba(0, 0, 0, 0.6);
+}
+
+h1.heading-display {
+  color: var(--color-primary);
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+h2.heading-display {
+  color: var(--color-foreground);
+  font-size: 1.75rem;
+  line-height: 1.3;
+  text-shadow:
+    0 0 8px rgba(248, 216, 72, 0.2),
+    2px 2px 0 rgba(0, 0, 0, 0.5);
+}
+
+h3.heading-display {
+  color: var(--color-foreground);
+  font-size: 1.375rem;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
+}
+
+/* ── RPG dialog box borders — double pixel frame ── */
+[class*='rounded-2xl'][class*='border'],
+[class*='rounded-xl'][class*='border'],
+details[class*='border'] {
+  border-width: 2px;
+  border-color: var(--color-border);
+  box-shadow:
+    inset 0 0 0 1px var(--color-background),
+    inset 0 0 0 3px var(--color-border),
+    0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+/* ── Blinking RPG cursor ── */
+@keyframes rpg-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Cursor on interactive summaries — details toggle only.
+ * Buttons/links handle their own icons via template SVGs;
+ * injecting a pseudo-element breaks flex alignment on those. */
+summary::before {
+  content: '\25B6'; /* ▶ */
+  display: inline-block;
+  margin-right: 0.5em;
+  color: var(--color-primary);
+  font-size: 0.75em;
+  animation: rpg-blink 1s steps(1) infinite;
+  text-shadow: 0 0 6px rgba(248, 216, 72, 0.5);
+}
+
+/* ── Step transitions — pixel-snap on elements without Tailwind transitions.
+ * Elements with class="transition" use Tailwind's timing; these
+ * provide the retro step-snap only for unstyled interactive elements. */
+summary {
+  transition-timing-function: steps(3);
+  transition-duration: 0.1s;
+}
+
+a:not([class*='transition']),
+button:not([class*='transition']) {
+  transition-timing-function: steps(3);
+  transition-duration: 0.1s;
+}
+
+/* ── Scrollbar — pixel style ── */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-background);
+  border-left: 2px solid var(--color-border);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--rig-scrollbar-thumb);
+  border: 2px solid var(--color-border);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--rig-scrollbar-thumb-hover);
+}
+
+/* ── Focus — sharp pixel ring ── */
+*:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+/* ── Selection — gold highlight ── */
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  color: var(--color-foreground);
+}
+
+/* ── Smooth scrolling ── */
+html {
+  scroll-behavior: smooth;
+}
+
+/* ── Reduced motion — respect user preference ── */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+
+  body::after {
+    display: none; /* Remove scanlines for reduced motion */
+  }
+}
+
+/* ── Firefox scrollbar ── */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--rig-scrollbar-thumb) transparent;
+}
+
+/* ── Links — gold with step hover ──
+ * Inside @layer base so Tailwind @layer utilities (text-*, bg-*) override it.
+ * NuxtLink "buttons" with explicit text-/bg- utility classes keep their colors. */
+@layer base {
+  a {
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color 0.1s steps(2);
+  }
+
+  a:hover {
+    color: var(--quizbit-gold-light);
+    text-shadow: 0 0 8px rgba(248, 216, 72, 0.3);
+  }
+
+  /* NuxtLink rendered as <a> with a solid primary background — force dark text.
+   * Tailwind utilities on <a> lose to the bare `a` rule above without this. */
+  a[class*='bg-primary'] {
+    color: var(--color-primary-foreground);
+  }
+
+  a[class*='bg-primary']:hover {
+    color: var(--color-primary-foreground);
+    text-shadow: none;
+  }
+}
+
+/* ── Progress bars — pixel-stepped fill ── */
+[role='progressbar'] > div {
+  transition-timing-function: steps(8) !important;
+}

package/src/themes/citron/tokens.css

@@ -0,0 +1,136 @@
+/* Hex — Quizbit Design Tokens
+ * SNES retro pixel game palette.
+ * Deep indigo backgrounds, gold UI highlights, hot magenta accent, chunky pixel aesthetic.
+ * Inspired by Chrono Trigger / FF6 / Super Mario World menu screens.
+ *
+ * @theme feeds Tailwind v4 utility generation (bg-background, text-foreground, etc.)
+ * :root provides standalone CSS custom property access for non-Tailwind consumers.
+ */
+
+@theme {
+  /* Surface colors — dark indigo RPG menu */
+  --color-background: #0a0a1e;
+  --color-foreground: #e8e8f0;
+  --color-card: #161638;
+  --color-card-foreground: #e8e8f0;
+  --color-popover: #161638;
+  --color-popover-foreground: #e8e8f0;
+
+  /* Brand — SNES gold cursor / select */
+  --color-primary: #f8d848;
+  --color-primary-foreground: #0a0a1e;
+
+  /* Soft accents — muted indigo shelf */
+  --color-secondary: #282850;
+  --color-secondary-foreground: #e8e8f0;
+  --color-muted: #282850;
+  --color-muted-foreground: #a4a4c8;
+  --color-accent: #f868d8;
+  --color-accent-foreground: #0a0a1e;
+
+  /* Semantic status — classic RPG HUD colors */
+  --color-destructive: #f04848;
+  --color-destructive-foreground: #0a0a1e;
+  --color-success: #58d858;
+  --color-warning: #f89838;
+  --color-info: #38a8e8;
+
+  /* Borders and focus — pixel-border blue */
+  --color-border: #303068;
+  --color-input: #303068;
+  --color-ring: #f8d848;
+
+  /* Typography — VT323 headings, Space Grotesk body */
+  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-serif: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-mono: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Radius — pixel-sharp, no rounding */
+  --radius: 0px;
+
+  /* Typography scale */
+  --font-size-2xs: 0.625rem;
+  --font-size-2xs--line-height: 1.25;
+  --font-size-xs: 0.75rem;
+  --font-size-xs--line-height: 1.5;
+  --font-size-sm: 0.875rem;
+  --font-size-sm--line-height: 1.5;
+  --font-size-base: 1rem;
+  --font-size-base--line-height: 1.5;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.25;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.25;
+
+  /* Display font — CRT terminal heading */
+  --font-display: 'VT323', 'Courier New', monospace;
+  --font-heading: 'VT323', 'Courier New', monospace;
+}
+
+:root {
+  --background: #0a0a1e;
+  --foreground: #e8e8f0;
+  --card: #161638;
+  --card-foreground: #e8e8f0;
+  --popover: #161638;
+  --popover-foreground: #e8e8f0;
+  --primary: #f8d848;
+  --primary-foreground: #0a0a1e;
+  --secondary: #282850;
+  --secondary-foreground: #e8e8f0;
+  --muted: #282850;
+  --muted-foreground: #a4a4c8;
+  --accent: #f868d8;
+  --accent-foreground: #0a0a1e;
+  --destructive: #f04848;
+  --destructive-foreground: #0a0a1e;
+  --success: #58d858;
+  --warning: #f89838;
+  --info: #38a8e8;
+  --border: #303068;
+  --input: #303068;
+  --ring: #f8d848;
+
+  /* Typography scale shorthand aliases */
+  --text-2xs: 0.625rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --tracking-tight: -0.01em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+  --font-display: 'VT323', 'Courier New', monospace;
+  --font-heading: 'VT323', 'Courier New', monospace;
+  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-serif: 'Space Grotesk', system-ui, -apple-system, sans-serif;
+  --font-mono: 'VT323', 'JetBrains Mono', ui-monospace, monospace;
+
+  /* ── Named palette aliases ──
+   * Direct references to the SNES swatch.
+   */
+  --quizbit-indigo: #0a0a1e;
+  --quizbit-indigo-light: #161638;
+  --quizbit-gold: #f8d848;
+  --quizbit-gold-light: #ffe878;
+  --quizbit-pixel-white: #e8e8f0;
+  --quizbit-lavender: #a4a4c8;
+  --quizbit-magenta: #f868d8;
+  --quizbit-green: #58d858;
+  --quizbit-red: #f04848;
+  --quizbit-cyan: #38a8e8;
+
+  /* ── Rig component token bridge ── */
+  --rig-button-hover-bg: #303068;
+  --rig-scrollbar-thumb: rgba(248, 216, 72, 0.18);
+  --rig-scrollbar-thumb-hover: rgba(248, 216, 72, 0.35);
+}

package/src/themes/{vscode → cobalt}/tokens.css

@@ -134,26 +134,26 @@
   --vsc-button-bg: #0078d4;
   --vsc-button-fg: #ffffff;
   --vsc-button-hover-bg: #026ec1;
-  --vsc-button-border: rgba(255, 255, 255, 0.1);
+  --vsc-button-border: var(--color-border);
   --vsc-button-secondary-bg: transparent;
   --vsc-button-secondary-fg: #cccccc;
   --vsc-button-secondary-hover-bg: #2b2b2b;
 
   /* Input */
   --vsc-input-bg: #313131;
-  --vsc-input-border: #3c3c3c;
+  --vsc-input-border: var(--color-border);
   --vsc-input-fg: #cccccc;
   --vsc-input-placeholder: #989898;
 
   /* Dropdown / Select */
   --vsc-dropdown-bg: #313131;
-  --vsc-dropdown-border: #3c3c3c;
+  --vsc-dropdown-border: var(--color-border);
   --vsc-dropdown-fg: #cccccc;
   --vsc-dropdown-list-bg: #1f1f1f;
 
   /* Checkbox */
   --vsc-checkbox-bg: #313131;
-  --vsc-checkbox-border: #3c3c3c;
+  --vsc-checkbox-border: var(--color-border);
 
   /* Badge */
   --vsc-badge-bg: #616161;
@@ -212,7 +212,7 @@
 
   /* Widget */
   --vsc-widget-bg: #202020;
-  --vsc-widget-border: #313131;
+  --vsc-widget-border: var(--color-border);
 
   /* Scrollbar */
   --vsc-scrollbar-thumb: rgba(121, 121, 121, 0.4);