@amulet-laboratories/hex 0.3.0

package/src/themes/aldricpace/base.css

@@ -0,0 +1,114 @@
+/* Hex — Aldricpace Base Styles
+ * html/body defaults, scrollbar, focus, selection, transitions.
+ * Cold light mode law firm — EB Garamond serif headings, Inter body.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+html {
+  font-size: 16px;
+}
+
+html,
+body {
+  @apply bg-background text-foreground font-sans;
+
+  color-scheme: light;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.65;
+}
+
+h1 {
+  font-size: 48px;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.15;
+}
+
+h2 {
+  font-size: 36px;
+  font-weight: 400;
+  font-family: var(--font-serif);
+  color: var(--color-primary);
+  margin: 0;
+  padding: 0;
+  line-height: 1.2;
+}
+
+::-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-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--color-primary) 30%, 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/aldricpace/components.css

@@ -0,0 +1,22 @@
+/* Hex — Aldricpace 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/aldricpace/domains.css

@@ -0,0 +1,19 @@
+/* Hex — Aldricpace Domains */
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+[data-domain='legal'] {
+  --domain-accent: #2b4c7e;
+}
+[data-domain='life'] {
+  --domain-accent: #8b6f4e;
+}
+[data-domain='software'] {
+  --domain-accent: #3b7a57;
+}
+[data-domain='business'] {
+  --domain-accent: #2b4c7e;
+}
+[data-domain='history'] {
+  --domain-accent: #9e3b3b;
+}

package/src/themes/aldricpace/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/aldricpace/tokens.css

@@ -0,0 +1,169 @@
+/* Hex — Aldricpace Design Tokens
+ * Conservative law firm. Cold light mode with navy and brass accents.
+ * Institutional restraint — suited for professional services, legal, finance.
+ *
+ * Full palette (8 swatch colors):
+ *   #FAFBFC  cold white    — background
+ *   #F2F4F7  fog           — card
+ *   #E6E9EF  slate wash    — secondary, muted
+ *   #1B2033  ink           — foreground text
+ *   #555E73  graphite      — muted foreground
+ *   #2B4C7E  navy          — primary, ring
+ *   #8B6F4E  brass         — accent
+ *   #9E3B3B  merlot        — destructive
+ *
+ * @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: #fafbfc;
+  --color-foreground: #1b2033;
+  --color-card: #f2f4f7;
+  --color-card-foreground: #1b2033;
+  --color-popover: #ffffff;
+  --color-popover-foreground: #1b2033;
+
+  /* Brand */
+  --color-primary: #2b4c7e;
+  --color-primary-foreground: #fafbfc;
+
+  /* Soft accents */
+  --color-secondary: #e6e9ef;
+  --color-secondary-foreground: #1b2033;
+  --color-muted: #e6e9ef;
+  --color-muted-foreground: #555e73;
+  --color-accent: #8b6f4e;
+  --color-accent-foreground: #fafbfc;
+
+  /* Semantic status */
+  --color-destructive: #9e3b3b;
+  --color-destructive-foreground: #fafbfc;
+  --color-success: #3b7a57;
+  --color-warning: #b8952a;
+  --color-info: #2b4c7e;
+
+  /* Borders and focus */
+  --color-border: #d1d5de;
+  --color-input: #d1d5de;
+  --color-ring: #2b4c7e;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Inter', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'EB Garamond', Georgia, serif;
+  --font-heading: 'EB Garamond', Georgia, 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: 3px;
+}
+
+:root {
+  --background: #fafbfc;
+  --foreground: #1b2033;
+  --card: #f2f4f7;
+  --card-foreground: #1b2033;
+  --popover: #ffffff;
+  --popover-foreground: #1b2033;
+  --primary: #2b4c7e;
+  --primary-foreground: #fafbfc;
+  --secondary: #e6e9ef;
+  --secondary-foreground: #1b2033;
+  --muted: #e6e9ef;
+  --muted-foreground: #555e73;
+  --accent: #8b6f4e;
+  --accent-foreground: #fafbfc;
+  --destructive: #9e3b3b;
+  --destructive-foreground: #fafbfc;
+  --success: #3b7a57;
+  --warning: #b8952a;
+  --info: #2b4c7e;
+  --border: #d1d5de;
+  --input: #d1d5de;
+  --ring: #2b4c7e;
+  /* 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: 3px;
+
+  /* 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: 'Inter', system-ui, sans-serif;
+  --font-mono: 'Inter', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'EB Garamond', Georgia, serif;
+  --font-heading: 'EB Garamond', Georgia, serif;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * All 8 swatch colors available for direct template use.
+   */
+  --ap-cold-white: #fafbfc;
+  --ap-fog: #f2f4f7;
+  --ap-slate: #e6e9ef;
+  --ap-ink: #1b2033;
+  --ap-graphite: #555e73;
+  --ap-navy: #2b4c7e;
+  --ap-brass: #8b6f4e;
+  --ap-merlot: #9e3b3b;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where the Aldricpace palette needs
+   * values that can't be derived directly from --color-* semantics.
+   */
+
+  /* Button — slate wash for hover feedback */
+  --rig-button-hover-bg: #e6e9ef;
+
+  /* Scrollbar — ink tint for light mode */
+  --rig-scrollbar-thumb: rgba(27, 32, 51, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(27, 32, 51, 0.25);
+}

package/src/themes/andrewpassanisi/base.css

@@ -0,0 +1,192 @@
+/* Hex — Andrew Passanisi Base Styles
+ * html/body defaults, element resets, scrollbar, focus, selection,
+ * transitions, and utility classes from the original site.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ───────── Reset ───────── */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+/* ───────── Root ───────── */
+
+html,
+body,
+#app,
+.my-app {
+  @apply w-full bg-blue-darkest font-body;
+  font-size: 18px;
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (min-width: 768px) {
+  html,
+  body,
+  #app,
+  .my-app {
+    font-size: 16px;
+  }
+}
+
+/* ───────── Typography resets ───────── */
+
+p,
+span,
+b,
+a,
+li,
+h1,
+h2 {
+  @apply text-blue-lighter;
+}
+
+p,
+span,
+div,
+a {
+  @apply font-body font-light leading-6;
+}
+
+h2 {
+  @apply mb-8 mt-4 font-bold text-blue-lightest;
+}
+
+/* ───────── Links ───────── */
+
+a {
+  @apply transition-all;
+
+  &:hover {
+    @apply text-accent transition-all;
+  }
+}
+
+/* ───────── Buttons ───────── */
+
+button {
+  @apply max-w-fit rounded border border-accent px-4 py-2 font-accent text-sm text-green transition-all;
+
+  &:hover {
+    @apply bg-green text-blue-darkest drop-shadow-green;
+
+    > * {
+      @apply text-blue-darkest;
+    }
+  }
+}
+
+/* ───────── List markers ───────── */
+
+li {
+  &::before {
+    @apply mb-[0.1rem] mr-2 inline-block h-1 w-1 bg-accent;
+    content: '';
+  }
+}
+
+/* ───────── Utility classes ───────── */
+
+.hero-heading {
+  font-size: clamp(36px, 6vw, 72px);
+}
+
+.section-heading {
+  font-size: clamp(22px, 5vw, 30px);
+  @apply relative overflow-hidden;
+
+  &::after {
+    @apply absolute top-[13px] ml-4 h-px w-1/4 bg-blue-lighter;
+    content: '';
+  }
+}
+
+/* ───────── Scrollbar ───────── */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(160, 178, 255, 0.2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(160, 178, 255, 0.4);
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(160, 178, 255, 0.2) transparent;
+}
+
+/* ───────── Focus ───────── */
+
+*:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+/* ───────── Selection ───────── */
+
+::selection {
+  background: rgba(45, 79, 224, 0.4);
+  color: var(--color-blue-lightest);
+}
+
+/* ───────── Transitions ───────── */
+
+.job-slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.job-slide-fade-leave-active {
+  transition: all 0s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.job-slide-fade-enter-from,
+.job-slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.header-slide-fade-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.header-slide-fade-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.header-slide-fade-enter-from,
+.header-slide-fade-leave-to {
+  transform: translateY(-40px);
+  opacity: 0;
+}
+
+/* ───────── 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;
+  }
+}

package/src/themes/andrewpassanisi/index.css

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

package/src/themes/andrewpassanisi/tokens.css

@@ -0,0 +1,136 @@
+/* Hex — Andrew Passanisi Design Tokens
+ * Dark portfolio theme — deep navy (#060d2b) & neon green (#AEF66D).
+ * Preserves the original site's exact Tailwind utility names so all
+ * template classes (text-blue-lighter, bg-blue-darkest, etc.) resolve
+ * without any component changes.
+ */
+
+@theme {
+  /* ── Reset namespaces ── */
+  --color-*: initial;
+  --font-size-*: initial;
+  --font-*: initial;
+  --radius-*: initial;
+  --breakpoint-*: initial;
+  --drop-shadow-*: initial;
+
+  /* ── Site palette — maps to Tailwind utilities ── */
+  --color-blue-lightest: #cad3f7;
+  --color-blue-lighter: #a0b2ff;
+  --color-blue-light: #2d4fe0;
+  --color-blue: #132881;
+  --color-blue-dark: #0d1b56;
+  --color-blue-darker: #091441;
+  --color-blue-darkest: #060d2b;
+  --color-green: #aef66d;
+  --color-yellow: #dff081;
+  --color-accent: #aef66d;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: rgb(0 0 0 / 0);
+
+  /* ── Hex semantic contract ── */
+  --color-background: #060d2b;
+  --color-foreground: #a0b2ff;
+  --color-card: #091441;
+  --color-card-foreground: #a0b2ff;
+  --color-popover: #0d1b56;
+  --color-popover-foreground: #cad3f7;
+  --color-primary: #aef66d;
+  --color-primary-foreground: #060d2b;
+  --color-secondary: #091441;
+  --color-secondary-foreground: #a0b2ff;
+  --color-muted: #0d1b56;
+  --color-muted-foreground: #a0b2ff;
+  --color-accent-foreground: #060d2b;
+  --color-destructive: #f85149;
+  --color-destructive-foreground: #cad3f7;
+  --color-success: #aef66d;
+  --color-warning: #dff081;
+  --color-info: #2d4fe0;
+  --color-border: #132881;
+  --color-input: #0d1b56;
+  --color-ring: #aef66d;
+
+  /* ── Typography ── */
+  --font-body: 'Open Sans', sans-serif;
+  --font-accent: 'Fira Code', monospace;
+
+  /* ── Type scale ── */
+  --font-size-xxs: 0.625rem;
+  --font-size-xxs--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-md: 1.125rem;
+  --font-size-md--line-height: 1.5;
+  --font-size-lg: 1.25rem;
+  --font-size-lg--line-height: 1.4;
+  --font-size-xl: 1.5625rem;
+  --font-size-xl--line-height: 1.3;
+  --font-size-2xl: 1.75rem;
+  --font-size-2xl--line-height: 1.25;
+  --font-size-3xl: 2rem;
+  --font-size-3xl--line-height: 1.25;
+  --font-size-4xl: 2.375rem;
+  --font-size-4xl--line-height: 1.2;
+
+  /* ── Border radius ── */
+  --radius-none: 0;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.375rem;
+  --radius: 0.25rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+
+  /* ── Breakpoints ── */
+  --breakpoint-xs: 360px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 1024px;
+  --breakpoint-lg: 1366px;
+  --breakpoint-xl: 1920px;
+
+  /* ── Drop shadows ── */
+  --drop-shadow-green: 0 0 4px #aef66da1;
+  --drop-shadow-blue: 0 0 4px #cad3f7aa;
+}
+
+:root {
+  /* ── Shorthand aliases ── */
+  --background: #060d2b;
+  --foreground: #a0b2ff;
+  --primary: #aef66d;
+  --primary-foreground: #060d2b;
+  --border: #132881;
+  --input: #0d1b56;
+  --ring: #aef66d;
+  --radius: 0.25rem;
+
+  /* ── Rig semantic token bridge ── */
+  --rig-button-bg: var(--color-accent);
+  --rig-button-fg: var(--color-blue-darkest);
+  --rig-button-hover-bg: var(--color-green);
+  --rig-button-border: var(--color-accent);
+  --rig-button-secondary-bg: transparent;
+  --rig-button-secondary-fg: var(--color-accent);
+  --rig-button-secondary-hover-bg: var(--color-blue-darker);
+  --rig-input-bg: var(--color-blue-darker);
+  --rig-input-border: var(--color-blue);
+  --rig-input-fg: var(--color-blue-lightest);
+  --rig-input-placeholder: var(--color-blue-lighter);
+  --rig-badge-bg: var(--color-accent);
+  --rig-badge-fg: var(--color-blue-darkest);
+  --rig-sidebar-bg: var(--color-blue-darker);
+  --rig-sidebar-border: var(--color-blue);
+  --rig-sidebar-fg: var(--color-blue-lighter);
+  --rig-scrollbar-thumb: rgba(160, 178, 255, 0.15);
+  --rig-scrollbar-thumb-hover: rgba(160, 178, 255, 0.28);
+  --rig-list-hover-bg: rgba(174, 246, 109, 0.06);
+  --rig-list-active-bg: var(--color-accent);
+  --rig-list-active-fg: var(--color-blue-darkest);
+  --rig-description-fg: var(--color-blue-lighter);
+}