@amulet-laboratories/hex 0.3.0

package/src/shared/rig-defaults.css

@@ -0,0 +1,121 @@
+/* Hex — Default Rig Component Token Bridge
+ *
+ * Maps every --rig-* semantic token to a sensible --color-* default.
+ * Themes inherit these automatically — they only need to override values
+ * where the theme's visual identity diverges from the generic mapping.
+ *
+ * VSCode overrides nearly all of these for 1:1 IDE fidelity.
+ * Hexrig and Garden override only a handful (hover-bg, scrollbar).
+ */
+
+:root {
+  /* ── Button ──────────────────────────────────────────────────── */
+  --rig-button-bg: var(--color-primary);
+  --rig-button-fg: var(--color-primary-foreground);
+  --rig-button-hover-bg: var(--color-primary);
+  --rig-button-hover-fg: var(--color-foreground);
+  --rig-button-border: transparent;
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: var(--color-accent);
+  --rig-button-secondary-hover-fg: var(--color-accent-foreground);
+
+  /* ── Input / Textarea ────────────────────────────────────────── */
+  --rig-input-bg: var(--color-secondary);
+  --rig-input-border: var(--color-input);
+  --rig-input-fg: var(--color-foreground);
+  --rig-input-placeholder: var(--color-muted-foreground);
+
+  /* ── Dropdown / Select ───────────────────────────────────────── */
+  --rig-dropdown-bg: var(--color-secondary);
+  --rig-dropdown-border: var(--color-input);
+  --rig-dropdown-fg: var(--color-foreground);
+  --rig-dropdown-list-bg: var(--color-background);
+
+  /* ── Checkbox / Radio ────────────────────────────────────────── */
+  --rig-checkbox-bg: var(--color-secondary);
+  --rig-checkbox-border: var(--color-input);
+
+  /* ── Badge ───────────────────────────────────────────────────── */
+  --rig-badge-bg: var(--color-secondary);
+  --rig-badge-fg: var(--color-foreground);
+
+  /* ── Description / Muted text ────────────────────────────────── */
+  --rig-description-fg: var(--color-muted-foreground);
+
+  /* ── Keybinding ──────────────────────────────────────────────── */
+  --rig-keybinding-fg: var(--color-foreground);
+
+  /* ── Progress ────────────────────────────────────────────────── */
+  --rig-progress-bg: var(--color-primary);
+
+  /* ── List / Tree ─────────────────────────────────────────────── */
+  --rig-list-hover-bg: var(--color-accent);
+  --rig-list-active-bg: var(--color-primary);
+  --rig-list-active-fg: var(--color-primary-foreground);
+  --rig-list-inactive-bg: var(--color-accent);
+
+  /* ── Activity Bar ────────────────────────────────────────────── */
+  --rig-activitybar-bg: var(--color-muted);
+  --rig-activitybar-border: var(--color-border);
+  --rig-activitybar-fg: var(--color-foreground);
+  --rig-activitybar-inactive-fg: var(--color-muted-foreground);
+  --rig-activitybar-active-border: var(--color-primary);
+  --rig-activitybar-badge-bg: var(--color-primary);
+  --rig-activitybar-badge-fg: var(--color-primary-foreground);
+
+  /* ── Sidebar ─────────────────────────────────────────────────── */
+  --rig-sidebar-bg: var(--color-muted);
+  --rig-sidebar-fg: var(--color-foreground);
+  --rig-sidebar-border: var(--color-border);
+  --rig-sidebar-section-header-border: var(--color-border);
+
+  /* ── Panel ───────────────────────────────────────────────────── */
+  --rig-panel-border: var(--color-border);
+  --rig-panel-title-active-border: var(--color-primary);
+  --rig-panel-title-active-fg: var(--color-foreground);
+  --rig-panel-title-inactive-fg: var(--color-muted-foreground);
+
+  /* ── Editor Tabs ─────────────────────────────────────────────── */
+  --rig-tab-active-bg: var(--color-background);
+  --rig-tab-active-fg: var(--color-foreground);
+  --rig-tab-active-border-top: var(--color-primary);
+  --rig-tab-inactive-bg: var(--color-muted);
+  --rig-tab-inactive-fg: var(--color-muted-foreground);
+  --rig-tab-border: var(--color-border);
+  --rig-editor-group-header-bg: var(--color-muted);
+
+  /* ── Editor ──────────────────────────────────────────────────── */
+  --rig-editor-bg: var(--color-background);
+  --rig-editor-fg: var(--color-foreground);
+  --rig-editor-line-number-fg: var(--color-muted-foreground);
+
+  /* ── Status Bar ──────────────────────────────────────────────── */
+  --rig-statusbar-bg: var(--color-muted);
+  --rig-statusbar-fg: var(--color-foreground);
+  --rig-statusbar-border: var(--color-border);
+  --rig-statusbar-hover-bg: var(--color-accent);
+
+  /* ── Quick Input / Command Palette ───────────────────────────── */
+  --rig-quickinput-bg: var(--color-popover);
+
+  /* ── Menu ────────────────────────────────────────────────────── */
+  --rig-menu-bg: var(--color-background);
+  --rig-menu-selection-bg: var(--color-primary);
+
+  /* ── Notification ────────────────────────────────────────────── */
+  --rig-notification-bg: var(--color-background);
+  --rig-notification-fg: var(--color-foreground);
+  --rig-notification-border: var(--color-border);
+
+  /* ── Widget (popover, tooltip, dropdown panels) ──────────────── */
+  --rig-widget-bg: var(--color-popover);
+  --rig-widget-border: var(--color-border);
+
+  /* ── Scrollbar ───────────────────────────────────────────────── */
+  --rig-scrollbar-thumb: rgba(128, 128, 128, 0.3);
+  --rig-scrollbar-thumb-hover: rgba(128, 128, 128, 0.5);
+
+  /* ── Sash / Resizer ──────────────────────────────────────────── */
+  --rig-sash-hover: var(--color-primary);
+}

package/src/shared/scroll-animations.css

@@ -0,0 +1,176 @@
+/* Hex — Shared Scroll Animation Utilities
+ * Reusable scroll-driven animation classes for marketing themes.
+ * These use CSS scroll-timeline features (view()) for zero-JS animations.
+ *
+ * Classes:
+ *   .scroll-reveal       — basic fade + rise on scroll into view
+ *   .scroll-reveal-blur  — fade + rise + blur entry/exit (bidirectional)
+ *   .scroll-stagger      — parent container that delays children
+ *   .scroll-draw         — SVG stroke-draw on scroll into view
+ *   .parallax-slow       — slow scroll-driven Y translation
+ *   .parallax-mid        — medium scroll-driven Y translation
+ *
+ * All animations respect prefers-reduced-motion.
+ */
+
+/* ───────── Basic scroll reveal (entry only) ───────── */
+
+@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%;
+}
+
+/* ───────── Advanced scroll reveal with blur (entry + exit) ───────── */
+
+@keyframes scroll-reveal-blur-in {
+  from {
+    opacity: 0;
+    filter: blur(6px);
+    transform: translateY(24px);
+  }
+
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+@keyframes scroll-reveal-blur-out {
+  from {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    filter: blur(6px);
+    transform: translateY(-24px);
+  }
+}
+
+.scroll-reveal-blur {
+  animation:
+    scroll-reveal-blur-in linear both,
+    scroll-reveal-blur-out linear both;
+  animation-timeline: view(), view();
+  animation-range:
+    entry 5% cover 25%,
+    exit 0% exit 30%;
+}
+
+/* ───────── Stagger children utility ───────── */
+
+.scroll-stagger > :nth-child(1) {
+  animation-delay: 0ms;
+}
+.scroll-stagger > :nth-child(2) {
+  animation-delay: 80ms;
+}
+.scroll-stagger > :nth-child(3) {
+  animation-delay: 160ms;
+}
+.scroll-stagger > :nth-child(4) {
+  animation-delay: 240ms;
+}
+.scroll-stagger > :nth-child(5) {
+  animation-delay: 320ms;
+}
+.scroll-stagger > :nth-child(6) {
+  animation-delay: 400ms;
+}
+
+/* ───────── SVG scroll-draw ───────── */
+
+@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%;
+}
+
+/* ───────── Parallax drift ───────── */
+
+@keyframes parallax-drift {
+  from {
+    transform: translateY(var(--parallax-distance, 40px));
+  }
+
+  to {
+    transform: translateY(calc(var(--parallax-distance, 40px) * -1));
+  }
+}
+
+.parallax-slow {
+  --parallax-distance: 30px;
+  animation: parallax-drift linear both;
+  animation-timeline: scroll();
+}
+
+.parallax-mid {
+  --parallax-distance: 60px;
+  animation: parallax-drift linear both;
+  animation-timeline: scroll();
+}
+
+/* ───────── Reduced motion ───────── */
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-reveal,
+  .scroll-reveal-blur {
+    animation: none;
+    opacity: 1;
+    filter: none;
+    transform: none;
+  }
+
+  .scroll-stagger > * {
+    animation-delay: 0ms !important;
+  }
+
+  .scroll-draw path,
+  .scroll-draw line,
+  .scroll-draw polyline,
+  .scroll-draw polygon,
+  .scroll-draw circle,
+  .scroll-draw ellipse {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  .parallax-slow,
+  .parallax-mid {
+    animation: none;
+    transform: none;
+  }
+}

package/src/shared/tokens.css

@@ -0,0 +1,125 @@
+/* Hex — Semantic Component Tokens
+ * Defines --rig-* tokens used by all shared component CSS.
+ * Themes override these by defining their own --rig-* values.
+ * Default values fall back to base shadcn/Tailwind tokens so components
+ * render reasonably even without a specific theme loaded.
+ */
+
+:root {
+  /* ── Activity Bar ── */
+  --rig-activitybar-bg: var(--color-muted);
+  --rig-activitybar-border: var(--color-border);
+  --rig-activitybar-fg: var(--color-foreground);
+  --rig-activitybar-inactive-fg: var(--color-muted-foreground);
+  --rig-activitybar-active-border: var(--color-primary);
+  --rig-activitybar-active-border-width: 2px;
+  --rig-activitybar-active-fg: var(--color-foreground);
+
+  /* ── Sidebar ── */
+  --rig-sidebar-active-bg: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+
+  /* ── Badge ── */
+  --rig-badge-bg: var(--color-primary);
+  --rig-badge-fg: var(--color-primary-foreground);
+  --rig-activitybar-badge-bg: var(--color-primary);
+  --rig-activitybar-badge-fg: var(--color-primary-foreground);
+
+  /* ── Button ── */
+  --rig-button-bg: var(--color-primary);
+  --rig-button-fg: var(--color-primary-foreground);
+  --rig-button-hover-bg: color-mix(in srgb, var(--color-primary) 85%, black);
+  --rig-button-border: var(--color-border);
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-foreground);
+  --rig-button-secondary-hover-bg: var(--color-accent);
+
+  /* ── Checkbox ── */
+  --rig-checkbox-bg: var(--color-input);
+  --rig-checkbox-border: var(--color-border);
+
+  /* ── Muted / Description text ── */
+  --rig-description-fg: var(--color-muted-foreground);
+
+  /* ── Search highlight ── */
+  --rig-highlight-bg: var(--color-warning);
+  --rig-highlight-fg: var(--color-background);
+
+  /* ── Dropdown ── */
+  --rig-dropdown-bg: var(--color-popover);
+  --rig-dropdown-border: var(--color-border);
+  --rig-dropdown-fg: var(--color-foreground);
+  --rig-dropdown-list-bg: var(--color-background);
+
+  /* ── Editor ── */
+  --rig-editor-bg: var(--color-background);
+  --rig-editor-fg: var(--color-foreground);
+  --rig-editor-group-header-bg: var(--color-muted);
+  --rig-editor-line-number-fg: var(--color-muted-foreground);
+
+  /* ── Input ── */
+  --rig-input-bg: var(--color-input);
+  --rig-input-border: var(--color-border);
+  --rig-input-fg: var(--color-foreground);
+  --rig-input-placeholder: var(--color-muted-foreground);
+
+  /* ── Keybinding ── */
+  --rig-keybinding-fg: var(--color-foreground);
+
+  /* ── List ── */
+  --rig-list-active-bg: var(--color-primary);
+  --rig-list-active-fg: var(--color-primary-foreground);
+  --rig-list-hover-bg: color-mix(in srgb, var(--color-foreground) 4%, transparent);
+  --rig-list-inactive-bg: color-mix(in srgb, var(--color-foreground) 6%, transparent);
+
+  /* ── Menu ── */
+  --rig-menu-bg: var(--color-popover);
+  --rig-menu-selection-bg: var(--color-primary);
+
+  /* ── Notification / Overlay ── */
+  --rig-notification-bg: var(--color-popover);
+  --rig-notification-fg: var(--color-foreground);
+  --rig-notification-border: var(--color-border);
+
+  /* ── Panel ── */
+  --rig-panel-border: var(--color-border);
+  --rig-panel-title-active-border: var(--color-primary);
+  --rig-panel-title-active-fg: var(--color-foreground);
+  --rig-panel-title-inactive-fg: var(--color-muted-foreground);
+
+  /* ── Progress ── */
+  --rig-progress-bg: var(--color-primary);
+
+  /* ── Quick Input ── */
+  --rig-quickinput-bg: var(--color-popover);
+
+  /* ── Sash ── */
+  --rig-sash-hover: var(--color-primary);
+
+  /* ── Scrollbar ── */
+  --rig-scrollbar-thumb: color-mix(in srgb, var(--color-foreground) 15%, transparent);
+  --rig-scrollbar-thumb-hover: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+
+  /* ── Sidebar ── */
+  --rig-sidebar-bg: var(--color-muted);
+  --rig-sidebar-border: var(--color-border);
+  --rig-sidebar-fg: var(--color-foreground);
+  --rig-sidebar-section-header-border: var(--color-border);
+
+  /* ── Status Bar ── */
+  --rig-statusbar-bg: var(--color-muted);
+  --rig-statusbar-border: var(--color-border);
+  --rig-statusbar-fg: var(--color-foreground);
+  --rig-statusbar-hover-bg: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+
+  /* ── Tabs ── */
+  --rig-tab-active-bg: var(--color-background);
+  --rig-tab-active-border-top: var(--color-primary);
+  --rig-tab-active-fg: var(--color-foreground);
+  --rig-tab-border: var(--color-border);
+  --rig-tab-inactive-bg: var(--color-muted);
+  --rig-tab-inactive-fg: var(--color-muted-foreground);
+
+  /* ── Widget ── */
+  --rig-widget-bg: var(--color-popover);
+  --rig-widget-border: var(--color-border);
+}

package/src/shared/utilities.css

@@ -0,0 +1,204 @@
+/* Hex — Shared Utility Classes
+ * Reusable decorative and interactive utilities for marketing themes.
+ * All utilities use CSS custom properties for per-use parameterization.
+ *
+ * Classes:
+ *   .paper-grain       — fractal noise overlay (add to body or container)
+ *   .link-slide        — sliding underline on hover
+ *   .heading-glow      — text-shadow luminous haze
+ *   .ornament-float    — drop-shadow for decorative elements
+ *
+ * All respect prefers-reduced-motion where applicable.
+ */
+
+/* ───────── Paper grain overlay ───────── */
+
+.paper-grain::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: var(--paper-grain-opacity, 0.06);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  background-repeat: repeat;
+  background-size: 256px 256px;
+}
+
+/* ───────── Sliding underline links ───────── */
+
+.link-slide {
+  position: relative;
+  display: inline-block;
+  text-decoration: none;
+}
+
+.link-slide::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--link-slide-color, var(--color-primary));
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.link-slide:hover::after {
+  transform: scaleX(1);
+}
+
+/* ───────── Heading glow ───────── */
+
+.heading-glow {
+  text-shadow:
+    0 0 30px var(--heading-glow-color, color-mix(in srgb, var(--color-primary) 20%, transparent)),
+    0 0 60px
+      var(--heading-glow-color-faint, color-mix(in srgb, var(--color-primary) 6%, transparent));
+}
+
+/* ───────── Ornament float shadow ───────── */
+
+.ornament-float {
+  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.25));
+}
+
+/* ───────── CTA button variants ───────── */
+
+[data-rig-button][data-variant='cta'],
+[data-rig-button][data-variant='cta-light'] {
+  cursor: pointer;
+}
+
+[data-rig-button][data-variant='cta'] {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  color: var(--color-primary-foreground);
+  background: var(--color-primary);
+  padding: 1rem 2.25rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius, 4px);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.2),
+    0 2px 8px color-mix(in srgb, var(--color-primary) 15%, transparent);
+  transition:
+    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-rig-button][data-variant='cta']:hover {
+  background: color-mix(in srgb, var(--color-primary) 85%, white);
+  transform: translateY(-1px);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.25),
+    0 4px 16px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+
+[data-rig-button][data-variant='cta']:active {
+  transform: translateY(0.5px);
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.2),
+    0 1px 4px color-mix(in srgb, var(--color-primary) 10%, transparent);
+  transition-duration: 0.1s;
+}
+
+[data-rig-button][data-variant='cta-light'] {
+  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: 1px solid var(--color-foreground);
+  color: var(--color-foreground);
+  padding: 1rem 2.25rem;
+  border-radius: var(--radius, 4px);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.15),
+    0 2px 8px color-mix(in srgb, var(--color-foreground) 6%, transparent);
+  transition:
+    background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-rig-button][data-variant='cta-light']:hover {
+  background: var(--color-foreground);
+  color: var(--color-background);
+  transform: translateY(-1px);
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.2),
+    0 4px 16px color-mix(in srgb, var(--color-foreground) 12%, transparent);
+}
+
+[data-rig-button][data-variant='cta-light']:active {
+  transform: translateY(0.5px);
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.15),
+    0 1px 4px color-mix(in srgb, var(--color-foreground) 5%, transparent);
+  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 {
+  outline: 2px solid var(--color-ring, var(--color-primary));
+  outline-offset: 3px;
+}
+
+/* ───────── Decorative backgrounds ───────── */
+
+.bg-scrim-soft {
+  background: linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--color-background) 82%, transparent),
+    color-mix(in srgb, var(--color-background) 92%, transparent)
+  );
+}
+
+.bg-stripe-primary {
+  background: repeating-linear-gradient(
+    90deg,
+    var(--color-primary) 0,
+    var(--color-primary) 1px,
+    transparent 1px,
+    transparent 60px
+  );
+}
+
+/* ───────── Typography utilities ───────── */
+
+.font-smallcaps {
+  font-variant: small-caps;
+}
+
+/* ───────── Reduced motion ───────── */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rig-button][data-variant='cta']:hover,
+  [data-rig-button][data-variant='cta-light']:hover {
+    transform: none;
+  }
+
+  [data-rig-button][data-variant='cta']:active,
+  [data-rig-button][data-variant='cta-light']:active {
+    transform: none;
+  }
+
+  .link-slide::after {
+    transition: none;
+  }
+}