@amulet-laboratories/hex 0.3.0 → 0.5.1

package/src/shared/tokens.css

@@ -122,4 +122,41 @@
   /* ── Widget ── */
   --rig-widget-bg: var(--color-popover);
   --rig-widget-border: var(--color-border);
+
+  /* ── Elevation (shadow scale) ──
+   * Default rgb-shadow uses neutral black; light themes can tint it warmer
+   * by overriding --rig-elevation-rgb in their scoped block.
+   */
+  --rig-elevation-rgb: 0 0 0;
+  --rig-elevation-0: none;
+  --rig-elevation-1:
+    0 1px 2px rgba(var(--rig-elevation-rgb), 0.06), 0 1px 1px rgba(var(--rig-elevation-rgb), 0.04);
+  --rig-elevation-2:
+    0 4px 12px rgba(var(--rig-elevation-rgb), 0.08), 0 2px 4px rgba(var(--rig-elevation-rgb), 0.06);
+  --rig-elevation-3:
+    0 12px 32px rgba(var(--rig-elevation-rgb), 0.12), 0 4px 8px rgba(var(--rig-elevation-rgb), 0.08);
+  --rig-elevation-4:
+    0 24px 64px rgba(var(--rig-elevation-rgb), 0.18), 0 8px 16px rgba(var(--rig-elevation-rgb), 0.1);
+
+  /* ── Display typography scale ──
+   * Page-level hero/section sizes. Themes can override per-theme rhythm.
+   */
+  --rig-display-xs: 1.5rem;
+  --rig-display-sm: 2rem;
+  --rig-display-md: 2.75rem;
+  --rig-display-lg: 3.5rem;
+  --rig-display-xl: 4.5rem;
+  --rig-display-2xl: 6rem;
+  --rig-display-tracking: 0;
+  --rig-display-leading: 1.1;
+  --rig-display-weight: 700;
+
+  /* ── Imagery filter ──
+   * Themes set their own filter to give imagery a unified look.
+   * Default is no filter — gallery + portfolio themes typically want this.
+   */
+  --rig-media-filter: none;
+
+  /* ── Link slide underline color (per-theme override) ── */
+  --link-slide-color: var(--color-primary);
 }

package/src/shared/utilities.css

@@ -151,10 +151,43 @@
   transition-duration: 0.1s;
 }
 
+/* ───────── CTA Ghost (borderless) ───────── */
+
+[data-rig-button][data-variant='cta-ghost'] {
+  cursor: pointer;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  color: var(--color-foreground);
+  padding: 1rem 2.25rem;
+  border-radius: var(--radius, 4px);
+  transition:
+    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-rig-button][data-variant='cta-ghost']:hover {
+  background: var(--color-foreground);
+  color: var(--color-background);
+  transform: translateY(-1px);
+}
+
+[data-rig-button][data-variant='cta-ghost']:active {
+  transform: translateY(0.5px);
+  transition-duration: 0.1s;
+}
+
 /* ───────── Focus rings for CTAs ───────── */
 
 [data-rig-button][data-variant='cta']:focus-visible,
-[data-rig-button][data-variant='cta-light']:focus-visible {
+[data-rig-button][data-variant='cta-light']:focus-visible,
+[data-rig-button][data-variant='cta-ghost']:focus-visible {
   outline: 2px solid var(--color-ring, var(--color-primary));
   outline-offset: 3px;
 }
@@ -179,6 +212,20 @@
   );
 }
 
+/* ───────── Gradient overlays ───────── */
+
+.overlay-bottom {
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
+}
+
+.overlay-full {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--color-background) 70%, transparent) 0%,
+    color-mix(in srgb, var(--color-background) 90%, transparent) 100%
+  );
+}
+
 /* ───────── Typography utilities ───────── */
 
 .font-smallcaps {
@@ -189,12 +236,14 @@
 
 @media (prefers-reduced-motion: reduce) {
   [data-rig-button][data-variant='cta']:hover,
-  [data-rig-button][data-variant='cta-light']:hover {
+  [data-rig-button][data-variant='cta-light']:hover,
+  [data-rig-button][data-variant='cta-ghost']:hover {
     transform: none;
   }
 
   [data-rig-button][data-variant='cta']:active,
-  [data-rig-button][data-variant='cta-light']:active {
+  [data-rig-button][data-variant='cta-light']:active,
+  [data-rig-button][data-variant='cta-ghost']:active {
     transform: none;
   }
 

package/src/themes/beacon/base.css

@@ -0,0 +1,59 @@
+/* Hex — LCARS Base Styles
+ * Orange scrollbar, glowing focus ring, mauve selection — minimal so the
+ * tokens carry the look. Pill geometry is set globally via --radius.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ───────── Scrollbar ─────────
+ * Solid LCARS orange — no track, no border. Pure block-color thumb.
+ */
+
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--lcars-orange);
+  border-radius: 9999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--lcars-yellow);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--lcars-orange) transparent;
+}
+
+/* ───────── Focus ─────────
+ * LCARS focus is bright and direct — no subtle outline.
+ */
+
+*:focus-visible {
+  outline: 2px solid var(--lcars-orange);
+  outline-offset: 1px;
+}
+
+/* ───────── Selection ───────── */
+
+::selection {
+  background: var(--lcars-mauve);
+  color: #000000;
+}
+
+/* ───────── Pill-shaped buttons ─────────
+ * Force pill silhouette even where Rig structural sets a smaller radius
+ * via shorthand. Targets Rig's button selector specifically.
+ */
+
+[data-rig-button] {
+  border-radius: 9999px;
+}

package/src/themes/beacon/index.css

@@ -0,0 +1,11 @@
+/* Hex — LCARS Full Bundle
+ * Import this single file to get everything:
+ * Tailwind v4 + shared Rig tokens + base styles + theme tokens.
+ *
+ * Usage: import '@amulet-laboratories/hex/lcars/source'
+ */
+
+@import 'tailwindcss';
+@import '../../shared/tokens.css';
+@import './base.css';
+@import './tokens.css';

package/src/themes/beacon/tokens.css

@@ -0,0 +1,219 @@
+/* Hex — LCARS Design Tokens
+ * Library Computer Access/Retrieval System — Michael Okuda's UI language
+ * from Star Trek: TNG / DS9 / Voyager. Burnt-orange-dominated chrome
+ * (sidebar, statusbar, title bar) wrapping deep-navy data-display content,
+ * with mauve/peach/mustard accents and pill geometry. Pure black gaps
+ * separate panels instead of strokes.
+ *
+ * Palette grounded in the canonical Okuda values per LCARS reference
+ * imagery; ratios chosen so warm chrome occupies ~40-50% of visual weight.
+ */
+
+@theme {
+  /* Content surfaces — deep navy "data display" background per LCARS
+     canon (Captain's logs, sensor readouts), with black gap layer. */
+  --color-background: #000000;
+  --color-foreground: #ffffff;
+  --color-card: #001122;
+  --color-card-foreground: #ffffff;
+  --color-popover: #001a33;
+  --color-popover-foreground: #ffffff;
+
+  /* Brand — peachy salmon for primary CTAs (Okuda's "action" color) */
+  --color-primary: #ff9966;
+  --color-primary-foreground: #000000;
+
+  /* Soft accents — mauve secondary, navy muted, yellow highlight */
+  --color-secondary: #9966cc;
+  --color-secondary-foreground: #000000;
+  --color-muted: #001122;
+  --color-muted-foreground: #9999cc;
+  --color-accent: #ffcc00;
+  --color-accent-foreground: #000000;
+
+  /* Semantic status — LCARS red alert, yellow caution, sage success */
+  --color-destructive: #cc4444;
+  --color-destructive-foreground: #000000;
+  --color-success: #99cc66;
+  --color-warning: #ffcc00;
+  --color-info: #6699cc;
+
+  /* Borders — invisible. LCARS uses black gaps between colored panels
+     instead of strokes. */
+  --color-border: #000000;
+  --color-input: #001122;
+  --color-ring: #ff9966;
+
+  /* Pill geometry — LCARS controls are capsules and endcaps */
+  --radius: 9999px;
+  --radius-sm: 4px;
+  --radius-md: 9999px;
+  --radius-lg: 9999px;
+}
+
+:root {
+  /* shadcn-style shorthand aliases */
+  --background: #000000;
+  --foreground: #ffffff;
+  --card: #001122;
+  --card-foreground: #ffffff;
+  --popover: #001a33;
+  --popover-foreground: #ffffff;
+  --primary: #ff9966;
+  --primary-foreground: #000000;
+  --secondary: #9966cc;
+  --secondary-foreground: #000000;
+  --muted: #001122;
+  --muted-foreground: #9999cc;
+  --accent: #ffcc00;
+  --accent-foreground: #000000;
+  --destructive: #cc4444;
+  --destructive-foreground: #000000;
+  --success: #99cc66;
+  --warning: #ffcc00;
+  --info: #6699cc;
+  --border: #000000;
+  --input: #001122;
+  --ring: #ff9966;
+  --radius: 9999px;
+
+  /* LCARS canonical palette — the Okuda block colors */
+  --lcars-burnt-orange: #cc6600;
+  --lcars-orange: #ff9933;
+  --lcars-peach: #ff9966;
+  --lcars-salmon: #ff9988;
+  --lcars-yellow: #ffcc00;
+  --lcars-mustard: #ffcc66;
+  --lcars-cream: #ffcc99;
+  --lcars-mauve: #9966cc;
+  --lcars-plum: #cc99cc;
+  --lcars-red: #cc4444;
+  --lcars-red-bright: #cc6666;
+  --lcars-navy: #001122;
+  --lcars-navy-mid: #003366;
+  --lcars-blue: #6699cc;
+  --lcars-blue-light: #99ccff;
+
+  /* ── Rig bridge tokens — every chrome surface explicitly themed ── */
+
+  /* Sidebar — solid burnt orange (canonical LCARS chunky bar) */
+  --rig-sidebar-bg: #cc6600;
+  --rig-sidebar-border: #000000;
+  --rig-sidebar-fg: #000000;
+  --rig-sidebar-active-bg: #ff9966;
+  --rig-sidebar-active-fg: #000000;
+  --rig-sidebar-section-header-border: #000000;
+
+  /* Activity bar — mauve column (the alternating-color LCARS pattern) */
+  --rig-activitybar-bg: #9966cc;
+  --rig-activitybar-border: #000000;
+  --rig-activitybar-fg: #000000;
+  --rig-activitybar-inactive-fg: #000000;
+  --rig-activitybar-active-fg: #000000;
+  --rig-activitybar-active-border: #000000;
+  --rig-activitybar-active-border-width: 0;
+  --rig-activitybar-badge-bg: #cc4444;
+  --rig-activitybar-badge-fg: #000000;
+
+  /* Status bar — solid peachy salmon strip */
+  --rig-statusbar-bg: #ff9966;
+  --rig-statusbar-fg: #000000;
+  --rig-statusbar-border: #000000;
+  --rig-statusbar-hover-bg: #ffcc00;
+
+  /* Title bar hover — mustard yellow flash */
+  --rig-titlebar-hover-bg: rgba(255, 204, 0, 0.25);
+
+  /* Tabs — peach active, dark inactive, mustard top stripe */
+  --rig-tab-active-bg: #001122;
+  --rig-tab-active-fg: #ff9966;
+  --rig-tab-active-border-top: #ffcc00;
+  --rig-tab-inactive-bg: #000000;
+  --rig-tab-inactive-fg: #cc6600;
+  --rig-tab-border: #000000;
+
+  /* Buttons — peachy salmon bg, black text */
+  --rig-button-bg: #ff9966;
+  --rig-button-fg: #000000;
+  --rig-button-border: #ff9966;
+  --rig-button-hover-bg: #ffcc00;
+  --rig-button-hover-fg: #000000;
+  --rig-button-outline-border: #ff9966;
+  --rig-button-secondary-bg: #9966cc;
+  --rig-button-secondary-fg: #000000;
+  --rig-button-secondary-hover-bg: #cc99cc;
+  --rig-button-secondary-hover-fg: #000000;
+
+  /* Inputs — recessed navy wells with orange focus */
+  --rig-input-bg: #001122;
+  --rig-input-border: #000000;
+  --rig-input-fg: #ffffff;
+  --rig-input-placeholder: #6699cc;
+
+  /* Dropdown / Select */
+  --rig-dropdown-bg: #001a33;
+  --rig-dropdown-border: #000000;
+  --rig-dropdown-fg: #ffffff;
+  --rig-dropdown-list-bg: #000000;
+
+  /* Checkbox */
+  --rig-checkbox-bg: #001122;
+  --rig-checkbox-border: #ff9966;
+
+  /* Badge — mustard yellow on black (data readout look) */
+  --rig-badge-bg: #ffcc00;
+  --rig-badge-fg: #000000;
+
+  /* Editor — content area is data-display navy */
+  --rig-editor-bg: #000000;
+  --rig-editor-fg: #ffffff;
+  --rig-editor-group-header-bg: #001122;
+  --rig-editor-line-number-fg: #6699cc;
+
+  /* List rows — soft orange hover, peach active */
+  --rig-list-hover-bg: rgba(204, 102, 0, 0.18);
+  --rig-list-active-bg: #ff9966;
+  --rig-list-active-fg: #000000;
+  --rig-list-inactive-bg: transparent;
+
+  /* Scrollbar — orange pill (track invisible against black gap layer) */
+  --rig-scrollbar-thumb: #cc6600;
+  --rig-scrollbar-thumb-hover: #ffcc00;
+
+  /* Panel (bottom panel — Terminal/Problems/Output) */
+  --rig-panel-border: #000000;
+  --rig-panel-title-active-border: #ffcc00;
+  --rig-panel-title-active-fg: #ff9966;
+  --rig-panel-title-inactive-fg: #cc6600;
+
+  /* Notifications — navy bg with peach accent */
+  --rig-notification-bg: #001122;
+  --rig-notification-border: #ff9966;
+  --rig-notification-fg: #ffffff;
+
+  /* Widget (tooltips, popovers, find/replace overlays) */
+  --rig-widget-bg: #001a33;
+  --rig-widget-border: #000000;
+
+  /* Progress */
+  --rig-progress-bg: #001122;
+
+  /* Sash (resizer hover) — orange */
+  --rig-sash-hover: #ff9966;
+
+  /* Card hover/accent */
+  --rig-card-accent: #ffcc00;
+  --rig-card-hover-bg: #001a33;
+
+  /* Description / muted text */
+  --rig-description-fg: #9999cc;
+
+  /* Keybinding chip */
+  --rig-keybinding-fg: #ffcc00;
+
+  /* Elevation — LCARS is flat */
+  --rig-elevation-2: none;
+
+  /* Media filter (image-tinting on filters) */
+  --rig-media-filter: none;
+}

package/src/themes/brass/base.css

@@ -0,0 +1,179 @@
+/* Hex — Burrowtail Base Styles
+ * Pet care warmth — Custom heading + body fonts. Approachable.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* Base styles */
+html {
+  /* Keep 16px on <html> so Tailwind rem utilities stay correctly sized */
+  font-size: 16px;
+}
+
+html,
+body {
+  @apply bg-background text-foreground;
+
+  color-scheme: light;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  /* Pet care friendly: 16px body, weight 400, relaxed leading, sans body */
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  font-family: var(--font-sans);
+}
+
+/* Heading defaults — serif display headings */
+h1 {
+  font-size: 40px;
+  font-weight: 700;
+  font-family: var(--font-heading);
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 32px;
+  font-weight: 600;
+  font-family: var(--font-heading);
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+}
+
+h3 {
+  font-size: 24px;
+  font-weight: 600;
+  font-family: var(--font-heading);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+  line-height: 1.3;
+}
+
+/* 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: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-foreground) 25%, transparent);
+}
+
+/* Focus styles */
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Selection */
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
+  color: var(--color-foreground);
+}
+
+/* Smooth scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Reduced motion — disable animations and transitions */
+@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/brass/components.css

@@ -0,0 +1,23 @@
+/* Hex — Burrowtail Component Barrel */
+
+@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/components/web.css';
+@import '../../shared/components/content.css';
+@import '../../shared/a11y.css';
+@import '../../shared/components/prose.css';
+@import '../../shared/utilities.css';
+@import '../../shared/scroll-animations.css';
+
+@reference 'tailwindcss';
+@reference './tokens.css';