astryx-dracula 0.5.1 → 0.6.2

package/templates/theme-showcase.tsx

@@ -1,6 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
-// XLE (canonical structure, validated with `bunx astryx layout check`):
-//   TN"Nocturne" + (S[p6] > V[g10] > (Ctr > V[g4 a=center] > Hd"Little haunts"[level=1 type=display-2] + Tx"We believe"[t=body]) + (G[c={min:200,max:3} g4] > (C[p0] > AR + V[g2 a=center] > Bd + Hd"Product"[level=2] + Tx"Description"[t=body] + (H[g2] > NI + B"Add to cart"))*3)) + (V[g8] > (C[p0] > Hd"Night Owl AI"[level=2]) + (G[c={min:200} g4] > (GS[c=3] > C > T) + (GS[c=1] > C > Hd"Revenue"[level=2])))
+// XLE (canonical structure of the tree below; the CLI had no XLE validator
+// after `astryx layout` was removed in 0.7.0, so this is a reading aid and a
+// human drift check — update it with the file, never alone):
+//   V[g=0] > (V[g=0] > (V[g=0] > (TN"Nocturne" > ((TNI"Shop" + TNI"New In" + TNI"Stories" + TNI"Help") + (H[g=2 a=center] > (H[g=0.5] > B.ghost"Search" + B.ghost"Account" + B.ghost"Cart") + B.primary"Sign in"))) + (S.transparent[p=6] > V[g=10 mw=880] > (Ctr > V[g=4 a=center mw=560] > Hd"Little haunts"[level=1 t=display-2] + Tx"We believe"[t=body]) + (G[c={min:200,max:3} g=4] > (C[p=0 h=100%] > (V[g=0 h=100%] > (AR[ratio=1] > Scene{SceneFrame}) + (V[g=2 a=center p=4] > Bd.cyan"New" + Hd"Moonphase Watch"[level=2] + Tx"Description"[t=body] + (H[g=2 a=center] > NI"Quantity" + B.secondary"Add to cart"))))*3)))) + (V[g=0 p=6] > (V[g=8] > ((C[p=0] > (H[g=3 j=between a=center] > Hd"Night Owl AI"[level=2] + (H[g=1 a=center] > B.ghost"Export conversation" + B.ghost"Close chat")) + D + (V[g=0] > ChML > (ChSM"Today" + (ChM > ChB{ChatMessageBubble}"Where's my order?") + (ChM > (V[g=3] > Tx"Body"[t=body] + Tx"Body"[t=body])) + (ChM > ChB{ChatMessageBubble}"Can you show me the full details?") + (ChM > (V[g=3] > Tx"Body"[t=body] + (C[p=3] > (V[g=1] > LI{Item}*4)))))) + (V[g=0] > (H[g=1 a=center wrap] > B.secondary*3)) + (V[g=0] > ChC"Ask Night Owl..."))) + (G[c={min:200} g=4] > (GS[c=3] > (C[p=0] > (H[g=3 j=between a=center] > Hd"Inventory"[level=2] + B.primary"Add item") + D + (H[g=3 j=between a=center] > (H[g=2 a=center] > TI"Search inventory" + (OFL[g=2] > SE{Selector}*3)) + (H[g=1 a=center] > B.ghost"List view" + B.ghost"Grid view")) + (V[g=0] > Bn.warning"2 items are running low") + (V[g=0] > T[density=spacious dv=rows hover] > (TR > THC + THC"Item" + THC"Available" + THC"Location" + THC"Tags" + THC) + (TR > (TC > CB) + (TC > (H[g=3 a=center] > Sw{ProductSwatch} + (V[g=0] > Tx"Moonphase Watch"[t=body] + Tx"Steel case, moonphase dial"[t=supporting]))) + TC"42" + TC"Roost 3" + (TC > Bd) + (TC > MM))*6))) + (GS[c=1] > (C[p=4 h=100%] > (V[g=4 h=100%] > Hd"Revenue"[level=2] + (G[c=2 g=3] > (V[g=0] > Tx"18K"[t=display-3] + Tx"Monthly revenue"[t=supporting]) + (V[g=0] > Tx"+12%"[t=display-3] + Tx"Order growth"[t=supporting])) + D + (H[g=3 j=between a=center] > Hd"Activity"[level=3] + Lk"See all") + (V[g=1] > LI{Item}*5)))))))
 
 /**
  * Theme Showcase — the storefront page each theme is previewed against, and the only template that is deliberately shell-less: it paints its o (Frame/responsive/container: see XLE header above.)
@@ -70,15 +72,7 @@ const PRODUCT_COLUMNS = { minWidth: 200, max: 3 } as const;
 
 /** Categorical badge variants usable for showcase product/inventory tags. */
 export type ShowcaseBadgeVariant =
-	| "blue"
-	| "cyan"
-	| "green"
-	| "orange"
-	| "pink"
-	| "purple"
-	| "red"
-	| "teal"
-	| "yellow";
+	"blue" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow";
 
 export interface ProductSpec {
 	name: string;
@@ -291,7 +285,7 @@ function StorePreview({ products, isMobile }: { products: ProductSpec[]; isMobil
 													// 40px was too tight on themes with larger padding /
 													// bigger type scale (e.g. Matcha, Y2K), clipping the
 													// value.
-													style={{ minWidth: 64, flexShrink: 0 }}
+													controlStyle={{ minWidth: 64, flexShrink: 0 }}
 												/>
 												<Button
 													label="Add to cart"
@@ -536,7 +530,7 @@ const ACTIVITY: ActivityRow[] = [
 
 function formatAmount(amount: number): string {
 	const sign = amount < 0 ? "−" : "+";
-	return sign + "$" + Math.abs(amount).toLocaleString();
+	return `${sign}$${Math.abs(amount).toLocaleString()}`;
 }
 
 function LatestActivityCard({ isMobile }: { isMobile: boolean }) {
@@ -587,7 +581,11 @@ function LatestActivityCard({ isMobile }: { isMobile: boolean }) {
 						overflow: "hidden",
 						maskImage: "linear-gradient(to bottom, black calc(100% - 48px), transparent)",
 						WebkitMaskImage: "linear-gradient(to bottom, black calc(100% - 48px), transparent)",
-						marginInline: "calc(var(--spacing-2) * -1)",
+						// Cancel the Item inline inset with the inset ITSELF: core
+						// publishes it as --_item-inset-inline (0.6.7), and it
+						// tracks density and theme overrides. A literal spacing
+						// step silently stops matching when either moves.
+						marginInline: "calc(-1 * var(--_item-inset-inline))",
 					}}
 				>
 					{/* The sign travels in the string (formatAmount prefixes U+2212), so
@@ -730,7 +728,7 @@ const LOW_STOCK_THRESHOLD = 25;
 function SelectCell({ row }: { row: InventoryRow }) {
 	return (
 		<CheckboxInput
-			label={"Select " + row.name}
+			label={`Select ${row.name}`}
 			isLabelHidden
 			value={row.selected}
 			onChange={() => {}}
@@ -887,7 +885,7 @@ function InventoryCard({ inventory }: { inventory: InventoryRow[] }) {
 						value=""
 						onChange={() => {}}
 						startIcon={<Search size={16} />}
-						style={{ flex: 1, minWidth: 0, maxWidth: 240 }}
+						controlStyle={{ flex: 1, minWidth: 0, maxWidth: 240 }}
 					/>
 					<OverflowList
 						gap={2}
@@ -949,7 +947,15 @@ function InventoryCard({ inventory }: { inventory: InventoryRow[] }) {
 
 			{lowStockCount > 0 && (
 				<VStack gap={0} paddingInline={6} paddingBlockEnd={4}>
-					<Banner status="warning" title={lowStockCount + " items are running low"} />
+					<Banner
+						status="warning"
+						// Core 0.7.0 stopped deriving the live-region role from
+						// `status`, so this banner states its own. It appears when
+						// the count crosses the threshold, and a screen reader must
+						// hear it.
+						role="status"
+						title={`${lowStockCount} items are running low`}
+					/>
 				</VStack>
 			)}
 

package/theme.css

@@ -2,10 +2,12 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.6.3
- * Core: @astryxdesign/core@0.6.3
+ * CLI: @astryxdesign/cli@0.7.2
+ * Core: @astryxdesign/core@0.7.2
  */
 
+@layer reset, astryx-base, astryx-theme;
+
 @layer reset {
 @scope ([data-astryx-theme="astryx-dracula"]) to ([data-astryx-theme]) {
   :where(h1, h2, h3, h4, h5, h6) {
@@ -77,67 +79,6 @@
 }
 }
 
-@layer astryx-base {
-:root {
-  --color-data-categorical-blue: light-dark(#0171E3, #0171E3);
-  --color-data-categorical-orange: light-dark(#EB6E00, #EB6E00);
-  --color-data-categorical-purple: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-categorical-green: light-dark(#0B991F, #0B991F);
-  --color-data-categorical-pink: light-dark(#F351C0, #F351C0);
-  --color-data-categorical-cyan: light-dark(#0171A4, #0171A4);
-  --color-data-categorical-red: light-dark(#F5394F, #F5394F);
-  --color-data-categorical-teal: light-dark(#08A3A3, #08A3A3);
-  --color-data-categorical-brown: light-dark(#965E03, #965E03);
-  --color-data-categorical-indigo: light-dark(#6F8AFF, #6F8AFF);
-  --color-data-neutral: light-dark(#8494A3, #8C939B);
-  --color-data-blue-5: light-dark(#02165E, #02165E);
-  --color-data-blue-4: light-dark(#004CBC, #004CBC);
-  --color-data-blue-3: light-dark(#2694FE, #2694FE);
-  --color-data-blue-2: light-dark(#78BEFF, #78BEFF);
-  --color-data-blue-1: light-dark(#DBECFF, #DBECFF);
-  --color-data-shamrock-5: light-dark(#0B603D, #0B603D);
-  --color-data-shamrock-4: light-dark(#138546, #138546);
-  --color-data-shamrock-3: light-dark(#24BB5E, #24BB5E);
-  --color-data-shamrock-2: light-dark(#8EF7AA, #8EF7AA);
-  --color-data-shamrock-1: light-dark(#D6FEE4, #D6FEE4);
-  --color-data-orange-5: light-dark(#A13F04, #A13F04);
-  --color-data-orange-4: light-dark(#D66100, #D66100);
-  --color-data-orange-3: light-dark(#FD9537, #FD9537);
-  --color-data-orange-2: light-dark(#FDB876, #FDB876);
-  --color-data-orange-1: light-dark(#FFE6CF, #FFE6CF);
-  --color-data-pink-5: light-dark(#8E1073, #8E1073);
-  --color-data-pink-4: light-dark(#D123A1, #D123A1);
-  --color-data-pink-3: light-dark(#F989D3, #F989D3);
-  --color-data-pink-2: light-dark(#FEADE3, #FEADE3);
-  --color-data-pink-1: light-dark(#FCE3F4, #FCE3F4);
-  --color-data-purple-5: light-dark(#3E0697, #3E0697);
-  --color-data-purple-4: light-dark(#6B1EFD, #6B1EFD);
-  --color-data-purple-3: light-dark(#9081FF, #9081FF);
-  --color-data-purple-2: light-dark(#B3B0FE, #B3B0FE);
-  --color-data-purple-1: light-dark(#E8E8FB, #E8E8FB);
-  --color-data-red-5: light-dark(#9D0519, #9D0519);
-  --color-data-red-4: light-dark(#D31130, #D31130);
-  --color-data-red-3: light-dark(#FB7D87, #FB7D87);
-  --color-data-red-2: light-dark(#FFB2B8, #FFB2B8);
-  --color-data-red-1: light-dark(#FEE4E6, #FEE4E6);
-  --color-data-teal-5: light-dark(#08767D, #08767D);
-  --color-data-teal-4: light-dark(#0C9293, #0C9293);
-  --color-data-teal-3: light-dark(#0DB7AF, #0DB7AF);
-  --color-data-teal-2: light-dark(#6CE6D8, #6CE6D8);
-  --color-data-teal-1: light-dark(#D7FCF8, #D7FCF8);
-  --color-data-yellow-5: light-dark(#8A5001, #8A5001);
-  --color-data-yellow-4: light-dark(#D69804, #D69804);
-  --color-data-yellow-3: light-dark(#FBCE03, #FBCE03);
-  --color-data-yellow-2: light-dark(#FCEC85, #FCEC85);
-  --color-data-yellow-1: light-dark(#FDF6BA, #FDF6BA);
-  --color-data-gray-5: light-dark(#25363F, #333338);
-  --color-data-gray-4: light-dark(#5D6C7B, #666A72);
-  --color-data-gray-3: light-dark(#AFB9C4, #B2B8BE);
-  --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6);
-  --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6);
-}
-}
-
 @layer astryx-theme {
   :root { color-scheme: light dark; }
   html[data-theme="light"] { color-scheme: light; }
@@ -225,6 +166,11 @@
     --color-syntax-property: #F8F8F2;
     --color-syntax-punctuation: #F8F8F2;
     --color-syntax-background: #282A36;
+    --color-syntax-added: #50FA7B26;
+    --color-syntax-removed: #FF555526;
+    --color-syntax-diff-header: #44475A;
+    --color-syntax-added-marker: #50FA7B;
+    --color-syntax-removed-marker: #FF5555;
     --radius-inner: 4px;
     --radius-element: 5px;
     --radius-container: 5px;
@@ -602,31 +548,31 @@
     border-color: var(--color-error);
   }
 
-  .astryx-statusdot[data-variant="info"] {
+  .astryx-status-dot[data-variant="info"] {
     background-color: #8BE9FD;
   }
 
-  .astryx-progressbar-fill[data-variant="accent"] {
+  .astryx-progress-bar-fill[data-variant="accent"] {
     background-color: #BD93F9;
   }
 
-  .astryx-progressbar-fill[data-variant="success"] {
+  .astryx-progress-bar-fill[data-variant="success"] {
     background-color: #50FA7B;
   }
 
-  .astryx-progressbar-fill[data-variant="warning"] {
+  .astryx-progress-bar-fill[data-variant="warning"] {
     background-color: #F1FA8C;
   }
 
-  .astryx-progressbar-fill[data-variant="error"] {
+  .astryx-progress-bar-fill[data-variant="error"] {
     background-color: #FF5555;
   }
 
-  .astryx-progressbar-fill[data-variant="neutral"] {
+  .astryx-progress-bar-fill[data-variant="neutral"] {
     background-color: var(--color-progress-value);
   }
 
-  .astryx-progressbar-fill[data-variant="disabled"] {
+  .astryx-progress-bar-fill[data-variant="disabled"] {
     background-color: var(--color-progress-value);
   }
 
@@ -642,15 +588,15 @@
     --color-error: #FF5555;
   }
 
-  .astryx-textarea[data-status="success"] {
+  .astryx-text-area[data-status="success"] {
     --color-success: #50FA7B;
   }
 
-  .astryx-textarea[data-status="warning"] {
+  .astryx-text-area[data-status="warning"] {
     --color-warning: #F1FA8C;
   }
 
-  .astryx-textarea[data-status="error"] {
+  .astryx-text-area[data-status="error"] {
     --color-error: #FF5555;
   }
 
@@ -702,6 +648,10 @@
     --color-error: #FF5555;
   }
 
+  .astryx-selector[data-variant="secondary"] {
+    font-weight: var(--font-weight-normal);
+  }
+
   .astryx-multi-selector[data-status="success"] {
     --color-success: #50FA7B;
   }
@@ -714,6 +664,10 @@
     --color-error: #FF5555;
   }
 
+  .astryx-multi-selector[data-variant="secondary"] {
+    font-weight: var(--font-weight-normal);
+  }
+
   .astryx-typeahead[data-status="success"] {
     --color-success: #50FA7B;
   }
@@ -770,7 +724,11 @@
     box-shadow: var(--shadow-low);
   }
 
-  .astryx-hovercard {
+  .astryx-hover-card {
+    background-color: var(--color-background-popover);
+  }
+
+  .astryx-drawer {
     background-color: var(--color-background-popover);
   }
 
@@ -855,9 +813,9 @@
 
   [data-astryx-media="light"] {
     color-scheme: light;
-    --color-text-primary: var(--color-on-light);
-    --color-icon-primary: var(--color-on-light);
-    --color-accent: var(--color-on-light);
+    --color-text-primary: light-dark(#F8F8F2, #F8F8F2);
+    --color-icon-primary: light-dark(#F8F8F2, #F8F8F2);
+    --color-accent: light-dark(#BD93F9, #BD93F9);
   }
 }
 }

package/theme.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: astryx-theme.ts
+ * Command: astryx theme build astryx-theme.ts --out theme.css
+ * CLI: @astryxdesign/cli@0.7.2
+ * Core: @astryxdesign/core@0.7.2
+ */
+
+export {};

package/tokens.css

@@ -8,13 +8,16 @@
  * paragraph #B0B3C4 and base-muted #8288A6 are same-hue lifts, #4C5067
  * (subdue) is chrome only and never text, and theme.css adds #FFD5CC as the
  * pale inverted error surface. Do not revert any of them to spec hexes.
- * Two categorical data hues are deliberately ABSENT from the list below, do not
- * re-add them: `brown` (was byte-identical to orange, and a categorical series
- * set is a palette where distinctness IS the contract) and `purple` (purple
- * means tappable, never data). The purple ban is a MODULE rule —
- * `shared/chart-hues.ts` is purple-free by construction — so the SEQUENTIAL
- * `--color-data-purple-1..5` ramp below SURVIVES and is sanctioned; only the
- * categorical half is revoked. Rationale lives in astryx-theme.ts.
+ * Two categorical data hues are excluded from the CHART palette: `brown` (was
+ * byte-identical to orange, and a categorical series set is a palette where
+ * distinctness IS the contract) and `purple` (purple means tappable, never
+ * data). That exclusion is a MODULE rule — `shared/chart-hues.ts` is
+ * purple-free by construction — so the SEQUENTIAL `--color-data-purple-1..5`
+ * ramp below SURVIVES and is sanctioned. The two TOKENS are still defined
+ * below, on-brand, because core 0.7.x moved the canonical data-colour defaults
+ * out of CSS entirely: a theme that wants a name to exist must author it, and
+ * this one authors it on-palette so nothing off-brand can ship. Rationale
+ * lives in astryx-theme.ts.
  * `--color-data-teal-1..5` derives off `--color-data-categorical-teal` (#A4FFFF,
  * an ANSI bright, not a spec token) rather than spec Cyan #8BE9FD; provenance
  * fix only, nothing renders the ramp today (HeatScale is shamrock).
@@ -276,6 +279,8 @@ body {
 	--color-data-categorical-red: #ff5555;
 	--color-data-categorical-teal: #a4ffff;
 	--color-data-categorical-indigo: #d6acff;
+	--color-data-categorical-purple: #bd93f9;
+	--color-data-categorical-brown: #ffb86c;
 	--color-data-neutral: #8c939b;
 	--color-data-purple-5: hsl(264.71 89.47% 28%);
 	--color-data-purple-4: hsl(264.71 89.47% 44%);
@@ -343,6 +348,32 @@ body {
 	--color-tag-cyan: #8be9fd;
 	--color-tag-yellow: #f1fa8c;
 	--color-tag-green: #50fa7b;
+	/* Syntax theme, mirrored from astryx-theme.ts's draculaSyntax map. Core
+	 * 0.7.x emits NO --color-syntax-* defaults in CSS — the canonical values
+	 * live in JS only — and core's highlighter uses them with no fallback, so
+	 * a plain-CSS consumer that imports this file without theme.css would
+	 * render an UNHIGHLIGHTED CodeBlock. These 19 slots close that gap; the
+	 * five diff slots are the 0.7.1 diff layer and derive from Dracula's
+	 * green/red rather than being Dracula spec tokens. */
+	--color-syntax-keyword: #ff79c6;
+	--color-syntax-string: #f1fa8c;
+	--color-syntax-comment: #6272a4;
+	--color-syntax-number: #ffb86c;
+	--color-syntax-function: #50fa7b;
+	--color-syntax-type: #8be9fd;
+	--color-syntax-variable: #f8f8f2;
+	--color-syntax-operator: #ff79c6;
+	--color-syntax-constant: #bd93f9;
+	--color-syntax-tag: #ff79c6;
+	--color-syntax-attribute: #50fa7b;
+	--color-syntax-property: #f8f8f2;
+	--color-syntax-punctuation: #f8f8f2;
+	--color-syntax-background: #282a36;
+	--color-syntax-added: #50fa7b26;
+	--color-syntax-removed: #ff555526;
+	--color-syntax-diff-header: #44475a;
+	--color-syntax-added-marker: #50fa7b;
+	--color-syntax-removed-marker: #ff5555;
 	--color-tag-purple: #bd93f9;
 	/* Renamed in 0.3.0 from `tag-blue`, which held this same #BD93F9. Dracula
    * has no blue; Purple is what the rest of the kit already uses for a fourth
@@ -418,41 +449,6 @@ body {
 	}
 }
 
-/* A resizable SideNav reports exactly 1px of horizontal overflow: the resize
- * handle renders 1px wider than its own box, and the side-nav panel scrolls
- * both axes, so a permanent horizontal scrollbar paints under the rail even
- * though nothing overflows visually. Clip the offending pixel on the handle
- * itself rather than on the panel: a collapsed rail renders its child popovers
- * as descendants of that panel, and they only escape the clip because their
- * root happens to be position:fixed. Clipping the panel would break them the
- * day an ancestor gains a transform. The handle contains nothing but its pill,
- * which sits inside its box, so clipping it costs nothing. Needed until the
- * resize handle stops reporting the extra pixel. Re-verified against
- * @astryxdesign/core 0.3.0: without the clip the hit area's half-pixel inline
- * shift leaves content at 300.5px in a 300px rail, and the LayoutPanel
- * (overflow:auto on both axes) reports scrollWidth 301 > 300 — the permanent
- * bar is back. Keep. */
-.astryx-app-shell-sidenav .astryx-resize-handle {
-	overflow: hidden;
-}
-
-/* Astryx leaves the resize handle's drag surface translated -50% along the
- * block axis without ever positioning it at top:50%, so it spans only the TOP
- * HALF of the rail: the pointer reads col-resize and dragging works above the
- * midpoint, and nothing at all happens below it, even though the pill is drawn
- * straddling that boundary. The pill sibling carries a correct top:50%, which
- * is exactly what the drag surface is missing. Re-verified against
- * @astryxdesign/core 0.3.0: hitAreaHorizontal is still top:0/bottom:0 while
- * hitAreaOffsetX translates Y by -50%, so without this the drag surface spans
- * [-50%,+50%] of the rail and the bottom half is dead (elementFromPoint hits
- * the handle, which has no pointer handler). Upstream workaround; drop it if
- * the component starts positioning its own hit area. */
-.astryx-app-shell-sidenav .astryx-resize-handle > :not(.astryx-resize-handle-pill) {
-	top: 50%;
-	bottom: auto;
-	height: 100%;
-}
-
 /* Everything below this line is UNLAYERED on purpose, and that is load-bearing,
  * not a style choice. Unlayered author rules beat every core LAYER regardless of
  * specificity — verified in Chromium against the declared order