@amulet-laboratories/hex 0.3.0 → 0.5.0

package/src/themes/fern/tokens.css

@@ -0,0 +1,208 @@
+/* Hex — Wainloft Design Tokens
+ * Sage green palette for home and living content sites.
+ * Light mode theme — sage green primary, terracotta accent, warm cream neutrals.
+ *
+ * Full palette (10 swatch colors):
+ *   #f7f4ef  warm cream       — background
+ *   #ffffff  white            — card, popover
+ *   #f0ede6  warm beige       — secondary
+ *   #e8e4dc  light taupe      — muted
+ *   #ddd8cf  warm border      — border, input
+ *   #c17d5e  terracotta       — accent
+ *   #779572  sage green       — primary
+ *   #658560  darker sage      — hover
+ *   #7a7872  muted foreground — muted-foreground
+ *   #2a2a28  warm charcoal    — foreground
+ *
+ * @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: #f7f4ef;
+  --color-foreground: #2a2a28;
+  --color-card: #ffffff;
+  --color-card-foreground: #2a2a28;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2a2a28;
+
+  /* Brand */
+  --color-primary: #779572;
+  --color-primary-foreground: #ffffff;
+
+  /* Soft accents */
+  --color-secondary: #f0ede6;
+  --color-secondary-foreground: #2a2a28;
+  --color-muted: #e8e4dc;
+  --color-muted-foreground: #7a7872;
+  --color-accent: #c17d5e;
+  --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: #ddd8cf;
+  --color-input: #ddd8cf;
+  --color-ring: #779572;
+
+  /* Typography */
+  --font-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Libre Baskerville', ui-serif, Georgia, serif;
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Typography — content-optimized type scale */
+  --font-size-2xs: 0.75rem;
+  --font-size-2xs--line-height: 1.5;
+  --font-size-xs: 0.8125rem;
+  --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.7;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.5;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.4;
+
+  /* Display font family */
+  --font-display: var(--font-serif);
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+
+  /* Radius */
+  --radius: 8px;
+}
+
+:root {
+  --background: #f7f4ef;
+  --foreground: #2a2a28;
+  --card: #ffffff;
+  --card-foreground: #2a2a28;
+  --popover: #ffffff;
+  --popover-foreground: #2a2a28;
+  --primary: #779572;
+  --primary-foreground: #ffffff;
+  --secondary: #f0ede6;
+  --secondary-foreground: #2a2a28;
+  --muted: #e8e4dc;
+  --muted-foreground: #7a7872;
+  --accent: #c17d5e;
+  --accent-foreground: #ffffff;
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --success: #16a34a;
+  --warning: #d97706;
+  --info: #2563eb;
+  --border: #ddd8cf;
+  --input: #ddd8cf;
+  --ring: #779572;
+
+  /* Color token bridge -- component CSS uses var(--color-*) */
+  --color-background: #f7f4ef;
+  --color-foreground: #2a2a28;
+  --color-card: #ffffff;
+  --color-card-foreground: #2a2a28;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #2a2a28;
+  --color-primary: #779572;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f0ede6;
+  --color-secondary-foreground: #2a2a28;
+  --color-muted: #e8e4dc;
+  --color-muted-foreground: #7a7872;
+  --color-accent: #c17d5e;
+  --color-accent-foreground: #ffffff;
+  --color-destructive: #dc2626;
+  --color-destructive-foreground: #ffffff;
+  --color-success: #16a34a;
+  --color-warning: #d97706;
+  --color-info: #2563eb;
+  --color-border: #ddd8cf;
+  --color-input: #ddd8cf;
+  --color-ring: #779572;
+  --font-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Libre Baskerville', ui-serif, Georgia, serif;
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+  --font-heading: var(--font-serif);
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+  --radius: 8px;
+
+  /* Typography — content-optimized type scale */
+  --font-size-2xs: 0.75rem;
+  --font-size-2xs--line-height: 1.5;
+  --font-size-xs: 0.8125rem;
+  --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.7;
+  --font-size-lg: 1.125rem;
+  --font-size-lg--line-height: 1.5;
+  --font-size-xl: 1.25rem;
+  --font-size-xl--line-height: 1.4;
+
+  /* Display font family */
+  --font-display: var(--font-serif);
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+
+  --radius: 8px;
+
+  /* Typography — content-optimized type scale (shorthand aliases) */
+  --text-2xs: 0.75rem;
+  --text-xs: 0.8125rem;
+  --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.7;
+  --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: 'Playfair Display', ui-serif, Georgia, serif;
+  --font-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-serif: 'Libre Baskerville', ui-serif, Georgia, serif;
+  --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * All 10 swatch colors available for direct template use.
+   */
+  --wainloft-warm-cream: #f7f4ef;
+  --wainloft-white: #ffffff;
+  --wainloft-warm-beige: #f0ede6;
+  --wainloft-light-taupe: #e8e4dc;
+  --wainloft-warm-border: #ddd8cf;
+  --wainloft-terracotta: #c17d5e;
+  --wainloft-sage: #779572;
+  --wainloft-dark-sage: #658560;
+  --wainloft-muted-fg: #7a7872;
+  --wainloft-charcoal: #2a2a28;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where the Wainloft palette needs
+   * values that can't be derived directly from --color-* semantics.
+   */
+
+  /* Button — darker sage for hover feedback */
+  --rig-button-hover-bg: #658560;
+
+  /* Scrollbar — warm charcoal tint */
+  --rig-scrollbar-thumb: rgba(42, 42, 40, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(42, 42, 40, 0.25);
+}

package/src/themes/{aldricpace → harbor}/tokens.css

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

package/src/themes/hearth/base.css

@@ -0,0 +1,111 @@
+/* Hex — Fogline Base Styles
+ * Warm espresso roastery — Cormorant Garamond display, DM Sans body.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+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: 17px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 48px;
+  font-weight: 700;
+  font-family: var(--font-serif);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 36px;
+  font-weight: 700;
+  font-family: var(--font-serif);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+  line-height: 1.15;
+}
+
+::-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: 8px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
+}
+
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  color: var(--color-foreground);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@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;
+  }
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-foreground) 12%, transparent) transparent;
+}
+
+@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/hearth/components.css

@@ -0,0 +1,22 @@
+/* Hex — Root & Remedy 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/a11y.css';
+@import '../../shared/components/prose.css';
+@import '../../shared/utilities.css';
+@import '../../shared/scroll-animations.css';
+
+@reference 'tailwindcss';
+@reference './tokens.css';

package/src/themes/hearth/domains.css

@@ -0,0 +1,19 @@
+/* Hex — Root & Remedy Domains */
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+[data-domain='legal'] {
+  --domain-accent: #c9a55c;
+}
+[data-domain='life'] {
+  --domain-accent: #4a8c5c;
+}
+[data-domain='software'] {
+  --domain-accent: #6b8faa;
+}
+[data-domain='business'] {
+  --domain-accent: #4a8c5c;
+}
+[data-domain='history'] {
+  --domain-accent: #8a9a8e;
+}

package/src/themes/hearth/tokens.css

@@ -0,0 +1,179 @@
+/* Hex — Fogline Design Tokens
+ * Warm espresso dark mode. The only brown-toned dark theme in Hex.
+ * Feels like the inside of a dimly lit roastery at dawn — deep
+ * espresso background, crema gold primary, patina copper accent.
+ *
+ * Full palette (8 swatch colors):
+ *   #16120e  deep espresso   — background
+ *   #1e1914  dark roast      — card, popover
+ *   #2a231c  walnut          — secondary, muted
+ *   #ede4d8  steamed milk    — foreground text
+ *   #9a8b78  warm taupe      — muted foreground
+ *   #c8a265  crema gold      — primary, ring
+ *   #d4843a  patina copper   — accent
+ *   #c44830  ember red       — destructive
+ *
+ * Font pairing: DM Sans (sans) + Cormorant Garamond (serif/heading)
+ * Radius: 4px — precise, not fussy
+ *
+ * @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: #16120e;
+  --color-foreground: #ede4d8;
+  --color-card: #1e1914;
+  --color-card-foreground: #ede4d8;
+  --color-popover: #1e1914;
+  --color-popover-foreground: #ede4d8;
+
+  /* Brand */
+  --color-primary: #c8a265;
+  --color-primary-foreground: #16120e;
+
+  /* Soft accents */
+  --color-secondary: #2a231c;
+  --color-secondary-foreground: #ede4d8;
+  --color-muted: #2a231c;
+  --color-muted-foreground: #9a8b78;
+  --color-accent: #d4843a;
+  --color-accent-foreground: #16120e;
+
+  /* Semantic status */
+  --color-destructive: #c44830;
+  --color-destructive-foreground: #ede4d8;
+  --color-success: #5a8a5c;
+  --color-warning: #d4a040;
+  --color-info: #5a8ab0;
+
+  /* Borders and focus */
+  --color-border: #362e26;
+  --color-input: #362e26;
+  --color-ring: #c8a265;
+
+  /* Typography */
+  --font-sans: 'DM Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
+  --font-heading: 'Cormorant Garamond', '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;
+
+  --font-display: var(--font-serif);
+
+  --radius: 4px;
+}
+
+:root {
+  --background: #16120e;
+  --foreground: #ede4d8;
+  --card: #1e1914;
+  --card-foreground: #ede4d8;
+  --popover: #1e1914;
+  --popover-foreground: #ede4d8;
+  --primary: #c8a265;
+  --primary-foreground: #16120e;
+  --secondary: #2a231c;
+  --secondary-foreground: #ede4d8;
+  --muted: #2a231c;
+  --muted-foreground: #9a8b78;
+  --accent: #d4843a;
+  --accent-foreground: #16120e;
+  --destructive: #c44830;
+  --destructive-foreground: #ede4d8;
+  --success: #5a8a5c;
+  --warning: #d4a040;
+  --info: #5a8ab0;
+  --border: #362e26;
+  --input: #362e26;
+  --ring: #c8a265;
+
+  --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;
+
+  --font-display: var(--font-serif);
+
+  --radius: 4px;
+
+  --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-sans: 'DM Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Cormorant Garamond', 'Georgia', serif;
+  --font-heading: 'Cormorant Garamond', 'Georgia', serif;
+
+  /* ── Named palette aliases ── */
+  --fl-espresso: #16120e;
+  --fl-roast: #1e1914;
+  --fl-walnut: #2a231c;
+  --fl-milk: #ede4d8;
+  --fl-taupe: #9a8b78;
+  --fl-crema: #c8a265;
+  --fl-copper: #d4843a;
+  --fl-ember: #c44830;
+
+  /* ── Rig component token bridge ── */
+
+  --rig-button-hover-bg: #362e26;
+  --rig-scrollbar-thumb: rgba(237, 228, 216, 0.1);
+  --rig-scrollbar-thumb-hover: rgba(237, 228, 216, 0.2);
+
+  --section-divider-fill: #1e1914;
+  --section-divider-bg: #16120e;
+  --ornament-color: #c8a265;
+  --flanked-heading-stroke: #362e26;
+
+  /* Display rhythm — editorial roastery */
+  --rig-display-md: 2.5rem;
+  --rig-display-lg: 3.5rem;
+  --rig-display-xl: 5rem;
+  --rig-display-2xl: 6.5rem;
+  --rig-display-tracking: -0.01em;
+  --rig-display-leading: 1.05;
+
+  /* Imagery — espresso warmth */
+  --rig-media-filter: sepia(0.12) saturate(1.12) brightness(0.97);
+
+  --link-slide-color: #c8a265;
+  --rig-elevation-rgb: 22 18 14;
+}

package/src/themes/juniper/base.css

@@ -0,0 +1,111 @@
+/* Hex — Root & Remedy Base Styles
+ * Midnight apothecary — Newsreader display, Cabin body.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+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: 17px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+h1 {
+  font-size: 48px;
+  font-weight: 700;
+  font-family: var(--font-serif);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+  line-height: 1.1;
+}
+
+h2 {
+  font-size: 36px;
+  font-weight: 700;
+  font-family: var(--font-serif);
+  color: var(--color-foreground);
+  margin: 0;
+  padding: 0;
+  line-height: 1.15;
+}
+
+::-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: 8px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--color-foreground) 22%, transparent);
+}
+
+*:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
+  color: var(--color-foreground);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+@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;
+  }
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--color-foreground) 12%, transparent) transparent;
+}
+
+@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/juniper/components.css

@@ -0,0 +1,22 @@
+/* Hex — Root & Remedy 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/a11y.css';
+@import '../../shared/components/prose.css';
+@import '../../shared/utilities.css';
+@import '../../shared/scroll-animations.css';
+
+@reference 'tailwindcss';
+@reference './tokens.css';

package/src/themes/juniper/domains.css

@@ -0,0 +1,19 @@
+/* Hex — Root & Remedy Domains */
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+[data-domain='legal'] {
+  --domain-accent: #c9a55c;
+}
+[data-domain='life'] {
+  --domain-accent: #4a8c5c;
+}
+[data-domain='software'] {
+  --domain-accent: #6b8faa;
+}
+[data-domain='business'] {
+  --domain-accent: #4a8c5c;
+}
+[data-domain='history'] {
+  --domain-accent: #8a9a8e;
+}