@amulet-laboratories/hex 0.3.0

package/src/themes/duskline/domains.css

@@ -0,0 +1,72 @@
+/* Hex — Duskline Domains
+ * Domain accent colors, responsive breakpoints, unstyled overrides.
+ * Duskline is an investigative noir theme — domains are less relevant
+ * but included for contract compatibility.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ───────── Domain accent colors ───────── */
+
+[data-domain='legal'] {
+  --domain-accent: #f59e0b;
+}
+
+[data-domain='life'] {
+  --domain-accent: #14b8a6;
+}
+
+[data-domain='software'] {
+  --domain-accent: #3b82f6;
+}
+
+[data-domain='business'] {
+  --domain-accent: #10b981;
+}
+
+[data-domain='history'] {
+  --domain-accent: #a8a29e;
+}
+
+[data-domain='world'] {
+  --domain-accent: #8b5cf6;
+}
+
+/* ───────── Responsive: Marketing site ───────── */
+
+@media (width <= 700px) {
+  [data-rig-shell-grid] {
+    grid-template-areas:
+      'editor'
+      'panel'
+      'statusbar';
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto auto;
+  }
+
+  [data-rig-shell-activity] {
+    display: none;
+  }
+
+  [data-rig-shell-sidebar] {
+    display: none;
+  }
+}
+
+/* ───────── Unstyled theme overrides ───────── */
+
+[data-theme='unstyled'] *,
+[data-theme='unstyled'] *::before,
+[data-theme='unstyled'] *::after {
+  color: revert !important;
+  background-color: revert !important;
+  background: revert !important;
+  border-color: revert !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  backdrop-filter: none !important;
+  opacity: 1 !important;
+
+  --domain-accent: initial !important;
+}

package/src/themes/duskline/index.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import '../../shared/tokens.css';
+@import './tokens.css';
+@import './base.css';
+@import './components.css';
+@import './domains.css';

package/src/themes/duskline/tokens.css

@@ -0,0 +1,171 @@
+/* Hex — Duskline Design Tokens
+ * Digital frost. Cold-running terminal with teal-cyan glow.
+ * Dark mode investigative palette — cold blue-black background, cool white text,
+ * teal-cyan highlights that pulse like frozen circuitry.
+ *
+ * Full palette (7 swatch colors):
+ *   #0A0F14  cold black     — background
+ *   #121A22  cold graphite  — card, popover
+ *   #1A2430  cold charcoal  — secondary, muted
+ *   #4A6478  dim            — subtle text
+ *   #6A8494  steel          — muted foreground
+ *   #3CC8B4  teal-cyan      — primary, accent, ring (h≈170)
+ *   #D8E4EC  cool white     — foreground text
+ *
+ * @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: #0a0f14;
+  --color-foreground: #d8e4ec;
+  --color-card: #121a22;
+  --color-card-foreground: #d8e4ec;
+  --color-popover: #121a22;
+  --color-popover-foreground: #d8e4ec;
+
+  /* Brand */
+  --color-primary: #3cc8b4;
+  --color-primary-foreground: #0a0f14;
+
+  /* Soft accents */
+  --color-secondary: #1a2430;
+  --color-secondary-foreground: #d8e4ec;
+  --color-muted: #1a2430;
+  --color-muted-foreground: #6a8494;
+  --color-accent: #d4a040;
+  --color-accent-foreground: #0a0f14;
+
+  /* Semantic status */
+  --color-destructive: #e05555;
+  --color-destructive-foreground: #d8e4ec;
+  --color-success: #2db87a;
+  --color-warning: #d4a040;
+  --color-info: #5a8ab8;
+
+  /* Borders and focus */
+  --color-border: #1e3040;
+  --color-input: #1e3040;
+  --color-ring: #3cc8b4;
+
+  /* Typography */
+  --font-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
+  --font-heading: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
+
+  /* Radius */
+  /* 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-sans);
+
+  --radius: 2px;
+}
+
+:root {
+  --background: #0a0f14;
+  --foreground: #d8e4ec;
+  --card: #121a22;
+  --card-foreground: #d8e4ec;
+  --popover: #121a22;
+  --popover-foreground: #d8e4ec;
+  --primary: #3cc8b4;
+  --primary-foreground: #0a0f14;
+  --secondary: #1a2430;
+  --secondary-foreground: #d8e4ec;
+  --muted: #1a2430;
+  --muted-foreground: #6a8494;
+  --accent: #3cc8b4;
+  --accent-foreground: #0a0f14;
+  --destructive: #e05555;
+  --destructive-foreground: #d8e4ec;
+  --success: #2db87a;
+  --warning: #d4a040;
+  --info: #5a8ab8;
+  --border: #1e3040;
+  --input: #1e3040;
+  --ring: #3cc8b4;
+  /* 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-sans);
+
+  --radius: 2px;
+
+  /* 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-sans);
+  --font-sans: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;
+  --font-heading: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * All 7 swatch colors available for direct template use.
+   */
+  --dk-black: #0a0f14;
+  --dk-graphite: #121a22;
+  --dk-charcoal: #1a2430;
+  --dk-steel: #6a8494;
+  --dk-dim: #4a6478;
+  --dk-cyan: #3cc8b4;
+  --dk-white: #d8e4ec;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where the Duskline palette needs
+   * values that can't be derived directly from --color-* semantics.
+   */
+
+  /* Button */
+  --rig-button-hover-bg: #2ea89a;
+  --rig-button-hover-fg: #0a0f14;
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: #1a2430;
+  --rig-button-secondary-hover-fg: var(--color-foreground);
+
+  /* Scrollbar — cool foreground tint */
+  --rig-scrollbar-thumb: rgba(216, 228, 236, 0.1);
+  --rig-scrollbar-thumb-hover: rgba(216, 228, 236, 0.22);
+}

package/src/themes/forge/base.css

@@ -0,0 +1,165 @@
+/* Hex — Forge Base Styles
+ * html/body defaults, scrollbar, focus, selection, transitions.
+ * Industrial sans-serif typography on deep carbon hull.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* Base styles */
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+  @apply bg-background text-foreground font-sans;
+
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 1.6;
+}
+
+/* Heading defaults */
+h1 {
+  font-size: 77px;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 76px;
+  font-weight: 100;
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
+}
+
+/* Focus styles */
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  color: var(--color-foreground);
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Reduced motion */
+@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;
+  }
+}
+
+/* Firefox scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-foreground) 12%, transparent) transparent;
+}
+
+/* ───────── Scroll-draw SVG utility ───────── */
+
+@keyframes scroll-draw-in {
+  from {
+    stroke-dashoffset: 1;
+  }
+
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+.scroll-draw path,
+.scroll-draw line,
+.scroll-draw polyline,
+.scroll-draw polygon,
+.scroll-draw circle,
+.scroll-draw ellipse {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: scroll-draw-in linear both;
+  animation-timeline: view();
+  animation-range: entry 20% cover 50%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-draw path,
+  .scroll-draw line,
+  .scroll-draw polyline,
+  .scroll-draw polygon,
+  .scroll-draw circle,
+  .scroll-draw ellipse {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+}
+
+/* ───────── Scroll-reveal utility ───────── */
+
+@keyframes scroll-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.scroll-reveal {
+  animation: scroll-fade-in linear both;
+  animation-timeline: view();
+  animation-range: entry 10% cover 30%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-reveal {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}

package/src/themes/forge/components.css

@@ -0,0 +1,24 @@
+/* Hex — Forge Component Barrel
+ * Imports shared component CSS (one file per Rig package).
+ * Components use only semantic tokens — Tailwind resolves them
+ * against this theme's tokens.css at build time.
+ * @import rules must precede @reference so postcss-import can inline them.
+ */
+
+@import '../../shared/rig-defaults.css';
+@import '../../shared/components/core.css';
+@import '../../shared/components/layout.css';
+@import '../../shared/components/nav.css';
+@import '../../shared/components/editor.css';
+@import '../../shared/components/lists.css';
+@import '../../shared/components/menus.css';
+@import '../../shared/components/extras.css';
+@import '../../shared/components/shell.css';
+@import '../../shared/components/data.css';
+@import '../../shared/components/spatial.css';
+@import '../../shared/components/temporal.css';
+@import '../../shared/a11y.css';
+@import '../../shared/components/prose.css';
+
+@reference 'tailwindcss';
+@reference './tokens.css';

package/src/themes/forge/domains.css

@@ -0,0 +1,72 @@
+/* Hex — Forge Domains
+ * Domain accent colors, responsive breakpoints, unstyled overrides.
+ * Forge is a dark industrial theme — domain accents use phosphor-derived
+ * colors for consistency with the spacecraft cockpit aesthetic.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ───────── Domain accent colors ───────── */
+
+[data-domain='legal'] {
+  --domain-accent: #4488ff;
+}
+
+[data-domain='life'] {
+  --domain-accent: #ffbb22;
+}
+
+[data-domain='software'] {
+  --domain-accent: #ff4444;
+}
+
+[data-domain='business'] {
+  --domain-accent: #ffb000;
+}
+
+[data-domain='history'] {
+  --domain-accent: #33dd33;
+}
+
+[data-domain='world'] {
+  --domain-accent: #cc66ff;
+}
+
+/* ───────── Responsive: Marketing site ───────── */
+
+@media (width <= 700px) {
+  [data-rig-shell-grid] {
+    grid-template-areas:
+      'editor'
+      'panel'
+      'statusbar';
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto auto;
+  }
+
+  [data-rig-shell-activity] {
+    display: none;
+  }
+
+  [data-rig-shell-sidebar] {
+    display: none;
+  }
+}
+
+/* ───────── Unstyled theme overrides ───────── */
+
+[data-theme='unstyled'] *,
+[data-theme='unstyled'] *::before,
+[data-theme='unstyled'] *::after {
+  color: revert !important;
+  background-color: revert !important;
+  background: revert !important;
+  border-color: revert !important;
+  box-shadow: none !important;
+  text-shadow: none !important;
+  backdrop-filter: none !important;
+  opacity: 1 !important;
+
+  --domain-accent: initial !important;
+}

package/src/themes/forge/index.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import '../../shared/tokens.css';
+@import './tokens.css';
+@import './base.css';
+@import './components.css';
+@import './domains.css';

package/src/themes/forge/tokens.css

@@ -0,0 +1,178 @@
+/* Hex — Forge Design Tokens
+ * 1980s spacecraft cockpit hardware — CRT phosphor displays, beige ABS plastic
+ * housings, brushed aluminum channels, dark rubber gaskets.
+ * Dark mode industrial theme — deep carbon hull, yellow phosphor accents,
+ * IBM Plex instrument typography, machined 2px radii.
+ *
+ * Key palette:
+ *   #0E0D0C  deep carbon hull     — background
+ *   #1E1C1A  dark composite panel  — card / muted / sidebar
+ *   #2A2826  elevated panel        — popover / overlay
+ *   #3A3530  dark panel seam       — border
+ *   #D4CCBA  warm off-white        — foreground (12.8:1 on base)
+ *   #8A8478  mid warm gray         — muted foreground (5.8:1 on base)
+ *   #E6C830  CRT yellow phosphor   — primary accent (h≈55)
+ *   #33DD33  phosphor green        — success (9.6:1 on base)
+ *   #FFCC44  bright yellow         — warning
+ *   #FF4444  phosphor red          — destructive (5.4:1 on base)
+ *   #4488FF  phosphor blue         — info (5.6:1 on base)
+ *
+ * @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: #0e0d0c;
+  --color-foreground: #d4ccba;
+  --color-card: #1e1c1a;
+  --color-card-foreground: #d4ccba;
+  --color-popover: #2a2826;
+  --color-popover-foreground: #d4ccba;
+
+  /* Brand — yellow phosphor */
+  --color-primary: #e6c830;
+  --color-primary-foreground: #0e0d0c;
+
+  /* Soft accents */
+  --color-secondary: #1e1c1a;
+  --color-secondary-foreground: #d4ccba;
+  --color-muted: #1e1c1a;
+  --color-muted-foreground: #8a8478;
+  --color-accent: #e6c830;
+  --color-accent-foreground: #0e0d0c;
+
+  /* Semantic status */
+  --color-destructive: #ff4444;
+  --color-destructive-foreground: #0e0d0c;
+  --color-success: #33dd33;
+  --color-warning: #ffcc44;
+  --color-info: #4488ff;
+
+  /* Borders and focus */
+  --color-border: #3a3530;
+  --color-input: #3a3530;
+  --color-ring: #e6c830;
+
+  /* Typography — IBM Plex instrument family */
+  --font-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
+  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-serif: 'IBM Plex 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-sans);
+
+  /* Radius — machined, not rounded */
+  --radius: 2px;
+}
+
+:root {
+  --background: #0e0d0c;
+  --foreground: #d4ccba;
+  --card: #1e1c1a;
+  --card-foreground: #d4ccba;
+  --popover: #2a2826;
+  --popover-foreground: #d4ccba;
+  --primary: #e6c830;
+  --primary-foreground: #0e0d0c;
+  --secondary: #1e1c1a;
+  --secondary-foreground: #d4ccba;
+  --muted: #1e1c1a;
+  --muted-foreground: #8a8478;
+  --accent: #e6c830;
+  --accent-foreground: #0e0d0c;
+  --destructive: #ff4444;
+  --destructive-foreground: #0e0d0c;
+  --success: #33dd33;
+  --warning: #ffcc44;
+  --info: #4488ff;
+  --border: #3a3530;
+  --input: #3a3530;
+  --ring: #e6c830;
+
+  /* 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-sans);
+
+  --radius: 2px;
+
+  /* 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-sans);
+  --font-mono: 'IBM Plex Mono', 'Courier New', ui-monospace, monospace;
+  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
+  --font-serif: 'IBM Plex Serif', Georgia, serif;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * Forge spacecraft palette available for direct template use.
+   */
+  --forge-hull: #0e0d0c;
+  --forge-panel: #1e1c1a;
+  --forge-overlay: #2a2826;
+  --forge-well: #060605;
+  --forge-seam: #3a3530;
+  --forge-seam-subtle: #1e1c1a;
+  --forge-text: #d4ccba;
+  --forge-text-mid: #8a8478;
+  --forge-text-dim: #5a5548;
+  --forge-yellow: #e6c830;
+  --forge-yellow-bright: #f0d84a;
+  --forge-green: #33dd33;
+  --forge-red: #ff4444;
+  --forge-blue: #4488ff;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where Forge needs specific values.
+   */
+
+  /* Scrollbar — warm tint matching hull color */
+  --rig-scrollbar-thumb: rgba(212, 204, 186, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(212, 204, 186, 0.28);
+
+  /* Button — slightly dimmed yellow for hover */
+  --rig-button-hover-bg: #c4aa28;
+}