@amulet-laboratories/hex 0.3.0

package/src/themes/undertow/tokens.css

@@ -0,0 +1,171 @@
+/* Hex — Undertow Design Tokens
+ * Industrial craft brewery. Gritty dark mode with blaze orange and grain gold.
+ * Warehouse taproom energy — loud, unpretentious, industrial warm.
+ *
+ * Full palette (7 swatch colors):
+ *   #1C1917  tar             — background
+ *   #292524  soot            — card, popover
+ *   #3B3633  worn iron       — secondary, muted
+ *   #F5F0EB  bone            — foreground text
+ *   #A8A09A  ash             — muted foreground
+ *   #D95F2A  blaze orange    — primary, ring
+ *   #C9B458  grain gold      — accent
+ *
+ * @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: #1c1917;
+  --color-foreground: #f5f0eb;
+  --color-card: #292524;
+  --color-card-foreground: #f5f0eb;
+  --color-popover: #292524;
+  --color-popover-foreground: #f5f0eb;
+
+  /* Brand */
+  --color-primary: #d95f2a;
+  --color-primary-foreground: #1c1917;
+
+  /* Soft accents */
+  --color-secondary: #3b3633;
+  --color-secondary-foreground: #f5f0eb;
+  --color-muted: #3b3633;
+  --color-muted-foreground: #a8a09a;
+  --color-accent: #c9b458;
+  --color-accent-foreground: #1c1917;
+
+  /* Semantic status */
+  --color-destructive: #cc3333;
+  --color-destructive-foreground: #f5f0eb;
+  --color-success: #5a8a5a;
+  --color-warning: #c9b458;
+  --color-info: #6b8faa;
+
+  /* Borders and focus */
+  --color-border: #4a4440;
+  --color-input: #4a4440;
+  --color-ring: #d95f2a;
+
+  /* Typography */
+  --font-sans: 'Work Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Archivo Black', 'Archivo', Impact, sans-serif;
+  --font-heading: 'Archivo Black', 'Archivo', Impact, 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: 4px;
+}
+
+:root {
+  --background: #1c1917;
+  --foreground: #f5f0eb;
+  --card: #292524;
+  --card-foreground: #f5f0eb;
+  --popover: #292524;
+  --popover-foreground: #f5f0eb;
+  --primary: #d95f2a;
+  --primary-foreground: #1c1917;
+  --secondary: #3b3633;
+  --secondary-foreground: #f5f0eb;
+  --muted: #3b3633;
+  --muted-foreground: #a8a09a;
+  --accent: #c9b458;
+  --accent-foreground: #1c1917;
+  --destructive: #cc3333;
+  --destructive-foreground: #f5f0eb;
+  --success: #5a8a5a;
+  --warning: #c9b458;
+  --info: #6b8faa;
+  --border: #4a4440;
+  --input: #4a4440;
+  --ring: #d95f2a;
+  /* 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: 4px;
+
+  /* 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: 'Work Sans', 'Inter', system-ui, sans-serif;
+  --font-mono: 'Space Mono', 'SF Mono', ui-monospace, monospace;
+  --font-serif: 'Archivo Black', 'Archivo', Impact, sans-serif;
+  --font-heading: 'Archivo Black', 'Archivo', Impact, sans-serif;
+
+  /* ── Named palette aliases ──────────────────────────────────────────────
+   * All 7 swatch colors available for direct template use.
+   */
+  --uw-tar: #1c1917;
+  --uw-soot: #292524;
+  --uw-iron: #3b3633;
+  --uw-bone: #f5f0eb;
+  --uw-ash: #a8a09a;
+  --uw-blaze: #d95f2a;
+  --uw-gold: #c9b458;
+
+  /* ── Rig component token bridge ─────────────────────────────────────────
+   * Overrides shared/tokens.css defaults where the Undertow palette needs
+   * values that can't be derived directly from --color-* semantics.
+   */
+
+  /* Site footer — card background, not primary */
+  --site-footer-bg: var(--color-card);
+  --site-footer-color: var(--color-foreground);
+
+  /* Button — worn iron for hover feedback */
+  --rig-button-hover-bg: #3b3633;
+
+  /* Scrollbar — bone tint for dark mode */
+  --rig-scrollbar-thumb: rgba(245, 240, 235, 0.12);
+  --rig-scrollbar-thumb-hover: rgba(245, 240, 235, 0.25);
+}

package/src/themes/vscode/base.css

@@ -0,0 +1,104 @@
+/* Hex — VSCode Base Styles
+ * html/body defaults, scrollbar, focus, selection, transitions.
+ * Matched 1:1 to VSCode Dark Modern.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* Base styles */
+html,
+body {
+  @apply bg-background text-foreground font-sans leading-tight;
+
+  font-size: 12px;
+
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar — VSCode: scrollbarSlider.background / hover / active */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--vsc-scrollbar-thumb);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--vsc-scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background: var(--vsc-scrollbar-thumb-active);
+}
+
+/* Focus styles — VSCode focusBorder: #0078D4 */
+*:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+/* Selection — editor.selectionBackground */
+::selection {
+  background: var(--vsc-selection-bg);
+  color: var(--color-foreground);
+}
+
+/* Command palette transitions */
+.palette-enter-active,
+.palette-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.palette-enter-from,
+.palette-leave-to {
+  opacity: 0;
+  transform: scale(0.97) translateY(-8px);
+}
+
+/* Toast transitions */
+.toast-enter-active,
+.toast-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateY(12px);
+}
+
+/* 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: var(--vsc-scrollbar-thumb) transparent;
+}

package/src/themes/vscode/components.css

@@ -0,0 +1,24 @@
+/* Hex — VSCode 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/vscode/domains.css

@@ -0,0 +1,132 @@
+/* Hex — VSCode Domains
+ * Domain accent colors, focus accent utility, responsive breakpoints,
+ * and unstyled theme escape hatch.
+ */
+
+@reference 'tailwindcss';
+@reference './tokens.css';
+
+/* ───────── Domain accent colors ───────── */
+
+[data-domain='legal'] {
+  --domain-accent: #3b82f6;
+}
+
+[data-domain='life'] {
+  --domain-accent: #eab308;
+}
+
+[data-domain='software'] {
+  --domain-accent: #ef4444;
+}
+
+[data-domain='business'] {
+  --domain-accent: #f97316;
+}
+
+[data-domain='history'] {
+  --domain-accent: #22c55e;
+}
+
+[data-domain='world'] {
+  --domain-accent: #a855f7;
+}
+
+/* ───────── Focus accent utility ───────── */
+
+.focus-accent:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--color-ring);
+}
+
+/* ───────── Responsive: Mobile-first ───────── */
+
+/* Below 640px: collapse activity bar and sidebar, single-column layout */
+
+@media (width <= 639px) {
+  [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;
+  }
+
+  [data-rig-shell-statusbar] {
+    @apply px-2;
+  }
+
+  [data-rig-editor-workbench-tabs] {
+    @apply overflow-x-auto;
+  }
+
+  [data-rig-editor-tab-label] {
+    max-width: 100px;
+  }
+
+  /* Command palette needs more room on mobile */
+  [data-rig-command-palette-overlay] {
+    @apply pt-[8vh];
+  }
+
+  [data-rig-command-palette] {
+    @apply mx-3 max-w-none;
+  }
+
+  /* Panel takes more height on small screens */
+  [data-rig-panel] [data-rig-panel-content] {
+    max-height: 40vh;
+  }
+}
+
+/* 640px–1023px: narrow sidebar, activity bar still visible */
+@media (width >= 640px) and (width <= 1023px) {
+  [data-rig-shell-sidebar] {
+    max-width: 200px;
+  }
+
+  [data-rig-editor-tab-label] {
+    max-width: 120px;
+  }
+}
+
+/* ───────── Unstyled theme overrides ───────── */
+
+/* Strips visual styling (colors, borders, backgrounds, shadows)
+   while preserving layout (flex, grid, sizing, positioning, overflow). */
+
+[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;
+}
+
+[data-theme='unstyled'] [data-rig-shell-statusbar],
+[data-theme='unstyled'] [data-rig-shell-sidebar],
+[data-theme='unstyled'] [data-rig-shell-panel],
+[data-theme='unstyled'] [data-rig-sidebar-header],
+[data-theme='unstyled'] [data-rig-editor-workbench-tabs],
+[data-theme='unstyled'] [data-rig-panel-header],
+[data-theme='unstyled'] [data-rig-activity-bar],
+[data-theme='unstyled'] [data-rig-activity-bar-item][data-state='active'] {
+  border-color: #ccc !important;
+  border-left-color: #ccc !important;
+}

package/src/themes/vscode/index.css

@@ -0,0 +1,13 @@
+/* Hex — VSCode Full Bundle
+ * Import this single file to get everything:
+ * Tailwind + tokens + base styles + all component styles + domains.
+ *
+ * Usage: import '@amulet-laboratories/hex/vscode/source'
+ */
+
+@import 'tailwindcss';
+@import '../../shared/tokens.css';
+@import './base.css';
+@import './components.css';
+@import './tokens.css';
+@import './domains.css';