@stacksjs/defaults 0.75.212 → 0.75.214

package/ai/skills/stacks-ui/SKILL.md

@@ -79,6 +79,8 @@ Pass `logo` to use your brand image in place of the text wordmark; `brand` remai
 
 Pass `memberId` and a localized `memberIdLabel` to engrave a permanent account identifier. Keep IDs stable across plans and organizations. Increment the optional numeric `replay` prop to remount the reveal through a keyed signal loop; no DOM access or timers are needed. Reduced motion still displays the complete card without confetti.
 
+Theme the finish through inherited CSS custom properties on the card's container or the application's root. Every property falls back to the original graphite finish: `--membership-card-background`, `--membership-card-color`, `--membership-card-border`, `--membership-card-shadow`, `--membership-card-inset-border`, `--membership-card-grain`, `--membership-card-label`, `--membership-card-name`, `--membership-card-divider`, `--membership-card-serial`, and `--membership-card-detail`. `--membership-card-confetti-1` through `--membership-card-confetti-4` color the celebration. Keep label and name colors readable against every stop of a custom gradient; the component's layout, stable identifier and reduced-motion behavior remain the same.
+
 ## Gotchas
 
 - `config/ui.ts` configures STX topology; `config/css.ts` configures utilities.

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.212",
+  "version": "0.75.214",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.212",
+  "version": "0.75.214",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.212",
+    "@stacksjs/mobile": "0.75.214",
     "@stacksjs/sanitizer": "^0.2.534",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/resources/components/MembershipCard.stx

@@ -14,7 +14,7 @@
   const mcCelebrate = useReactiveProp<boolean>('celebrate', true)
   const mcPieces = [...Array(32).keys()].map(id => ({
     id,
-    style: `--mc-x:${(id * 37 + 11) % 100}%;--mc-drift:${(id * 29 % 160) - 80}px;--mc-delay:${id % 8 * 65}ms;--mc-turn:${180 + id * 47}deg;--mc-color:${['#99f6e4', '#e2e8f0', '#5eead4', '#94a3b8'][id % 4]}`,
+    style: `--mc-x:${(id * 37 + 11) % 100}%;--mc-drift:${(id * 29 % 160) - 80}px;--mc-delay:${id % 8 * 65}ms;--mc-turn:${180 + id * 47}deg;--mc-color:var(--membership-card-confetti-${id % 4 + 1},${['#99f6e4', '#e2e8f0', '#5eead4', '#94a3b8'][id % 4]})`,
   }))
 </script>
 
@@ -48,27 +48,27 @@
   .mc-stage { max-width: 28rem; padding: 2rem 0 2.5rem; perspective: 1000px; }
   .mc-metal {
     box-sizing: border-box; min-height: 15.5rem; padding: clamp(1.25rem, 5vw, 2rem); border-radius: 1.25rem;
-    color: #e2e8f0; border: 1px solid #87939d;
-    background: linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%);
-    box-shadow: inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799;
+    color: var(--membership-card-color, #e2e8f0); border: 1px solid var(--membership-card-border, #87939d);
+    background: var(--membership-card-background, linear-gradient(125deg, #596570 0%, #28343e 22%, #111c25 48%, #35434f 74%, #657480 100%));
+    box-shadow: var(--membership-card-shadow, inset 0 1px 0 #f1f5f9a6, inset 0 -2px 0 #050b10, inset 1px 0 0 #cbd5e133, 0 24px 40px -20px #02061799);
   }
   .mc-metal p { margin: 0; }
   .mc-metal > .mc-label { margin-top: 0.75rem; }
   .mc-metal .mc-person .mc-label { margin-bottom: 0.5rem; }
   .mc-metal .mc-serial { margin-top: 0.5rem; }
   .mc-metal .mc-detail { margin-top: 1.25rem; }
-  .mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid #cbd5e126; border-radius: 1rem; pointer-events: none; }
-  .mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, #cbd5e114 1px, #cbd5e114 2px); }
+  .mc-metal::after { content: ''; position: absolute; inset: 6px; border: 1px solid var(--membership-card-inset-border, #cbd5e126); border-radius: 1rem; pointer-events: none; }
+  .mc-grain { opacity: 0.35; background: repeating-linear-gradient(0deg, transparent, transparent 1px, var(--membership-card-grain, #cbd5e114) 1px, var(--membership-card-grain, #cbd5e114) 2px); }
   .mc-shine { transform: translateX(-150%) skewX(-20deg); background: linear-gradient(90deg, transparent 25%, #ffffff30 48%, #ffffff66 50%, #ffffff12 54%, transparent 75%); }
   .mc-wordmark { font-size: clamp(1.3rem, 5vw, 1.75rem); letter-spacing: -0.06em; overflow-wrap: anywhere; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff55; }
   .mc-metal .mc-logo { display: block; width: 6rem; height: 2.375rem; margin: 0; object-fit: contain; object-position: left center; }
-  .mc-label { color: #cbd5e1; letter-spacing: 0.12em; }
+  .mc-label { color: var(--membership-card-label, #cbd5e1); letter-spacing: 0.12em; }
   .mc-holder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end; margin-top: 2rem; }
   .mc-person { min-width: 0; }
-  .mc-metal .mc-engraving { padding: 0 0 0.25rem; font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; color: #f1f5f9; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80, 0 2px 2px #02061780; }
-  .mc-identity { padding-left: 1rem; border-left: 1px solid #cbd5e133; }
-  .mc-serial { margin-top: 0.4rem; font-family: ui-monospace, monospace; font-size: clamp(1rem, 3.8vw, 1.2rem); letter-spacing: 0.1em; overflow-wrap: anywhere; color: #ccfbf1; text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80; }
-  .mc-detail { color: #cbd5e1; overflow-wrap: anywhere; }
+  .mc-metal .mc-engraving { padding: 0 0 0.25rem; font-size: clamp(2.25rem, 8vw, 3.25rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; overflow-wrap: anywhere; color: var(--membership-card-name, #f1f5f9); text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80, 0 2px 2px #02061780; }
+  .mc-identity { padding-left: 1rem; border-left: 1px solid var(--membership-card-divider, #cbd5e133); }
+  .mc-serial { margin-top: 0.4rem; font-family: ui-monospace, monospace; font-size: clamp(1rem, 3.8vw, 1.2rem); letter-spacing: 0.1em; overflow-wrap: anywhere; color: var(--membership-card-serial, #ccfbf1); text-shadow: 0 -1px 1px #020617, 0 1px 0 #ffffff80; }
+  .mc-detail { color: var(--membership-card-detail, #cbd5e1); overflow-wrap: anywhere; }
   .mc-confetti { z-index: 2; }
   .mc-piece { position: absolute; top: 0; left: var(--mc-x); width: 5px; height: 10px; border-radius: 1px; background: var(--mc-color); opacity: 0; }
   @media (max-width: 360px) {