juxscript 1.1.144 → 1.1.145

package/lib/styles/foundation.css

@@ -321,7 +321,7 @@ html {
 .jux-button {
   /* Colors */
   background: var(--jux-brand-bg);
-  color: #fff;
+  color: var(--jux-surface-from); /* ✅ Fixed - button text uses surface color (inverts with theme) */
   border: var(--jux-stroke) solid var(--jux-border-color);
   
   /* Shape */

package/lib/styles/stacks.css

@@ -1,80 +1,132 @@
-/* ═══════════════════════════════════════════════════════════════════
- * STACK LAYOUT COMPONENTS
- * Pure layout structure - no animations, no modifiers
- * ═══════════════════════════════════════════════════════════════════ */
+/* ══════════════════════════════════════════════════════════════════
+   JUX STACKS - Layout System
+   Uses foundation tokens for spacing, auto-adapts to themes
+   ══════════════════════════════════════════════════════════════════ */
 
-/* Vertical Stack */
-.jux-vstack {
+/* ═════════════════════════════════════════════════════════════════
+ * BASE STACK STYLES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack,
+.jux-hstack,
+.jux-zstack {
   display: flex;
+  
+  /* ✅ Use CSS variables from foundation/theme */
+  gap: var(--jux-gap);
+  padding: var(--jux-pad);
+  
+  /* Default alignment */
+  align-items: var(--jux-align, flex-start);
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * VERTICAL STACK (Column)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.jux-vstack {
   flex-direction: column;
 }
 
-.jux-vstack-tight { gap: 0.5rem; }
-.jux-vstack-loose { gap: 1.5rem; }
-.jux-vstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * HORIZONTAL STACK (Row)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Horizontal Stack */
 .jux-hstack {
-  display: flex;
   flex-direction: row;
-  align-items: center;
+  flex-wrap: wrap; /* Allow wrapping on mobile */
 }
 
-.jux-hstack-tight { gap: 0.5rem; }
-.jux-hstack-loose { gap: 1.5rem; }
-.jux-hstack-none { gap: 0; }
+/* ═════════════════════════════════════════════════════════════════
+ * Z-STACK (Layered)
+ * ═════════════════════════════════════════════════════════════════ */
 
-/* Z-Stack (Layered/Overlapping) */
 .jux-zstack {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
   position: relative;
+  flex-direction: column;
 }
 
 .jux-zstack > * {
-  grid-column: 1;
-  grid-row: 1;
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.jux-zstack-tight > * { margin: 0.25rem; }
-.jux-zstack-loose > * { margin: 0.75rem; }
-.jux-zstack-none > * { margin: 0; }
-
-/* Stack Alignment Options */
-.jux-stack-start { align-items: flex-start; }
-.jux-stack-center { align-items: center; }
-.jux-stack-end { align-items: flex-end; }
-.jux-stack-stretch { align-items: stretch; }
-
-/* Stack Justification Options */
-.jux-stack-justify-start { justify-content: flex-start; }
-.jux-stack-justify-center { justify-content: center; }
-.jux-stack-justify-end { justify-content: flex-end; }
-.jux-stack-justify-between { justify-content: space-between; }
-.jux-stack-justify-around { justify-content: space-around; }
-.jux-stack-justify-evenly { justify-content: space-evenly; }
-
-/* Responsive Stacks */
+/* ═════════════════════════════════════════════════════════════════
+ * ALIGNMENT UTILITIES (Via CSS Variables)
+ * Applied via .align-* descriptor classes
+ * ═════════════════════════════════════════════════════════════════ */
+
+.align-start    { --jux-align: flex-start; }
+.align-center   { --jux-align: center; }
+.align-end      { --jux-align: flex-end; }
+.align-stretch  { --jux-align: stretch; }
+.align-baseline { --jux-align: baseline; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * JUSTIFY CONTENT (For HStack distribution)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.justify-start   { justify-content: flex-start; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around  { justify-content: space-around; }
+.justify-evenly  { justify-content: space-evenly; }
+
+/* ═════════════════════════════════════════════════════════════════
+ * RESPONSIVE BEHAVIOR
+ * HStack becomes VStack on mobile for better UX
+ * ═════════════════════════════════════════════════════════════════ */
+
 @media (max-width: 768px) {
-  .jux-hstack-responsive {
+  .jux-hstack {
     flex-direction: column;
+    /* Gap remains consistent via CSS variables */
+  }
+  
+  /* Optional: Force HStack to stay horizontal on mobile */
+  .jux-hstack.stay-horizontal {
+    flex-direction: row;
   }
 }
 
-/* Stack with Dividers */
-.jux-vstack-divider > *:not(:last-child) {
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #e4e4e7;
-  margin-bottom: 1rem;
+/* ═════════════════════════════════════════════════════════════════
+ * FULL WIDTH/HEIGHT UTILITIES
+ * ═════════════════════════════════════════════════════════════════ */
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+  min-height: 100vh;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * CENTERED CONTENT (Common Layout Pattern)
+ * ═════════════════════════════════════════════════════════════════ */
+
+.center-content {
+  justify-content: center;
+  align-items: center;
+}
+
+/* ═════════════════════════════════════════════════════════════════
+ * SCROLL BEHAVIOR
+ * ═════════════════════════════════════════════════════════════════ */
+
+.scroll-x {
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-.jux-hstack-divider > *:not(:last-child) {
-  padding-right: 1rem;
-  border-right: 1px solid #e4e4e7;
-  margin-right: 1rem;
+.scroll-y {
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
-.jux-zstack-divider > * {
-  border: 1px solid #e4e4e7;
+.scroll-both {
+  overflow: auto;
 }

package/lib/styles/themes.css

@@ -63,6 +63,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-lg);
+  --jux-pad-token: var(--jux-space-xl);
 }
 
 [data-swag="apple"][data-mode="dark"] {
@@ -80,7 +84,9 @@
   --jux-border-from: #38383a;
   --jux-border-to: #545456;
   
-  /* Radius, spacing, typography inherited from light mode */
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-lg);
+  --jux-pad-token: var(--jux-space-xl);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -133,6 +139,10 @@
   --jux-burn-active: 0.15;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 [data-swag="google"][data-mode="dark"] {
@@ -149,6 +159,10 @@
   
   --jux-border-from: #3c4043;
   --jux-border-to: #5f6368;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -201,6 +215,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.3;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 [data-swag="stripe"][data-mode="dark"] {
@@ -217,6 +235,10 @@
   
   --jux-border-from: #1a365d;
   --jux-border-to: #2d4a6f;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -269,6 +291,10 @@
   --jux-burn-active: 0.15;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.4;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-xl);
+  --jux-pad-token: var(--jux-space-2xl);
 }
 
 [data-swag="gumroad"][data-mode="dark"] {
@@ -285,6 +311,10 @@
   
   --jux-border-from: #333333;
   --jux-border-to: #666666;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-xl);
+  --jux-pad-token: var(--jux-space-2xl);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -337,6 +367,10 @@
   --jux-burn-active: 0.12;
   --jux-burn-muted: 0.25;
   --jux-burn-strong: 0.5;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 [data-swag="meta"][data-mode="dark"] {
@@ -353,6 +387,10 @@
   
   --jux-border-from: #3a3b3c;
   --jux-border-to: #4e4f50;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-md);
+  --jux-pad-token: var(--jux-space-lg);
 }
 
 /* ══════════════════════════════════════════════════════════════════
@@ -405,6 +443,10 @@
   --jux-burn-active: 0.08;
   --jux-burn-muted: 0.35;
   --jux-burn-strong: 0.6;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 [data-swag="notion"][data-mode="dark"] {
@@ -421,6 +463,10 @@
   
   --jux-border-from: #373737;
   --jux-border-to: #4a4a4a;
+  
+  /* ✅ DEFAULT STACK SPACING */
+  --jux-gap-token: var(--jux-space-sm);
+  --jux-pad-token: var(--jux-space-md);
 }
 
 /* ══════════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.144",
+  "version": "1.1.145",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",