@astryxdesign/cli 0.1.0 → 0.1.1-canary.a514b99

package/templates/pages/payment-form/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import {useState, type CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -36,12 +35,6 @@ import {ShieldCheckIcon} from '@heroicons/react/24/outline';
 import {LockClosedIcon} from '@heroicons/react/24/outline';
 import {CheckCircleIcon} from '@heroicons/react/24/outline';
 import {TruckIcon} from '@heroicons/react/24/outline';
-import {
-  colorVars,
-  spacingVars,
-  radiusVars,
-  borderVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
 
 // ── Constants ─────────────────────────────────────────────────────────────────
 
@@ -156,51 +149,48 @@ const TAX = 18.4;
 const fmt = (n: number) => `$${n.toFixed(2)}`;
 
 // ── Styles ────────────────────────────────────────────────────────────────────
+// Plain inline styles using Astryx design-token CSS variables (declared at
+// :root by `@astryxdesign/core/astryx.css`). No StyleX compiler required.
 
-const styles = stylex.create({
-  fullWidth: {width: '100%'},
-  // LayoutContent clips overflow by default, which traps position:sticky
-  // children (the sticky order summary). With height="auto" the page scrolls
-  // at the window, so let overflow be visible here so sticky can pin.
-  visibleOverflow: {overflow: 'visible'},
-  // Form column flex-basis so the two checkout columns share width evenly.
-  formColBasis: {flexBasis: 0},
-  // Space the Order Summary content below its collapsible trigger title.
-  summaryContent: {paddingBlockStart: spacingVars['--spacing-2']},
-  // Order-summary column: sticky beside the form on desktop.
-  summarySticky: {
-    flexBasis: 0,
-    position: 'sticky',
-    top: spacingVars['--spacing-4'],
-    alignSelf: 'flex-start',
-  },
-  // On mobile the summary moves above the form.
-  summaryMobileOrder: {order: -1},
-  // Express-checkout brand buttons (fixed brand colors).
-  paypalButton: {backgroundColor: '#FFC439', borderColor: '#FFC439'},
-  // Official Google Pay dark button: black background with the unaltered
-  // dark-variant mark (white "Google Pay" text + full-color G), per the
-  // Google Pay brand guidelines.
-  gpayButton: {backgroundColor: '#000', borderColor: '#000'},
-  // Brand logos inside the express-checkout buttons.
-  paypalLogo: {height: spacingVars['--spacing-5'], width: 'auto'},
-  // Unaltered Google Pay mark (no filter/recolor — brand requirement),
-  // sized so it keeps comfortable clear space inside the lg button.
-  gpayLogo: {
-    height: spacingVars['--spacing-5'],
-    width: 'auto',
-  },
-  // Accepted card-network marks (Visa/Mastercard/Amex), shared style.
-  cardLogo: {
-    height: spacingVars['--spacing-7'],
-    width: 'auto',
-    borderRadius: radiusVars['--radius-element'],
-    borderWidth: borderVars['--border-width'],
-    borderStyle: 'solid',
-    borderColor: colorVars['--color-border'],
-    backgroundColor: colorVars['--color-background-surface'],
-  },
-});
+const fullWidth: CSSProperties = {width: '100%'};
+// LayoutContent clips overflow by default, which traps position:sticky
+// children (the sticky order summary). With height="auto" the page scrolls
+// at the window, so let overflow be visible here so sticky can pin.
+const visibleOverflow: CSSProperties = {overflow: 'visible'};
+// Form column flex-basis so the two checkout columns share width evenly.
+const formColBasis: CSSProperties = {flexBasis: 0};
+// Space the Order Summary content below its collapsible trigger title.
+const summaryContent: CSSProperties = {paddingBlockStart: 'var(--spacing-2)'};
+// Order-summary column: sticky beside the form on desktop.
+const summarySticky: CSSProperties = {
+  flexBasis: 0,
+  position: 'sticky',
+  top: 'var(--spacing-4)',
+  alignSelf: 'flex-start',
+};
+// On mobile the summary moves above the form.
+const summaryMobileOrder: CSSProperties = {order: -1};
+// Express-checkout brand buttons (fixed brand colors).
+const paypalButton: CSSProperties = {
+  backgroundColor: '#FFC439',
+  borderColor: '#FFC439',
+};
+// Official Google Pay dark button: black background with the unaltered
+// dark-variant mark (white "Google Pay" text + full-color G), per the
+// Google Pay brand guidelines.
+const gpayButton: CSSProperties = {backgroundColor: '#000', borderColor: '#000'};
+// Brand logos inside the express-checkout buttons.
+const brandLogo: CSSProperties = {height: 'var(--spacing-5)', width: 'auto'};
+// Accepted card-network marks (Visa/Mastercard/Amex), shared style.
+const cardLogo: CSSProperties = {
+  height: 'var(--spacing-7)',
+  width: 'auto',
+  borderRadius: 'var(--radius-element)',
+  borderWidth: 'var(--border-width)',
+  borderStyle: 'solid',
+  borderColor: 'var(--color-border)',
+  backgroundColor: 'var(--color-background-surface)',
+};
 
 export default function PaymentFormPage() {
   const isMobile = useMediaQuery('(max-width: 767px)');
@@ -278,7 +268,7 @@ export default function PaymentFormPage() {
     <Layout
       height="auto"
       content={
-        <LayoutContent padding={0} xstyle={styles.visibleOverflow}>
+        <LayoutContent padding={0} style={visibleOverflow}>
           <Center axis="horizontal">
             <Section
               variant="transparent"
@@ -306,7 +296,7 @@ export default function PaymentFormPage() {
                   vAlign="start">
                   <StackItem
                     size="fill"
-                    xstyle={isMobile ? undefined : styles.formColBasis}>
+                    style={isMobile ? undefined : formColBasis}>
                     <VStack gap={8}>
                       {/* Sign in */}
                       <VStack gap={1}>
@@ -509,11 +499,11 @@ export default function PaymentFormPage() {
                               variant="primary"
                               size="lg"
                               onClick={() => {}}
-                              xstyle={styles.paypalButton}>
+                              style={paypalButton}>
                               <img
                                 src="https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-100px.png"
                                 alt="PayPal"
-                                {...stylex.props(styles.paypalLogo)}
+                                style={brandLogo}
                               />
                             </Button>
                             {/* Google Pay */}
@@ -522,11 +512,11 @@ export default function PaymentFormPage() {
                               variant="primary"
                               size="lg"
                               onClick={() => {}}
-                              xstyle={styles.gpayButton}>
+                              style={gpayButton}>
                               <img
                                 src="https://pay.google.com/about/static_kcs/images/logos/google-pay-logo.svg"
                                 alt="Google Pay"
-                                {...stylex.props(styles.gpayLogo)}
+                                style={brandLogo}
                               />
                             </Button>
                           </Grid>
@@ -552,17 +542,17 @@ export default function PaymentFormPage() {
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/visa.svg"
                               alt="Visa"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/mastercard.svg"
                               alt="Mastercard"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                             <img
                               src="https://raw.githubusercontent.com/aaronfagan/svg-credit-card-payment-icons/main/flat/amex.svg"
                               alt="Amex"
-                              {...stylex.props(styles.cardLogo)}
+                              style={cardLogo}
                             />
                           </HStack>
                           <TextInput
@@ -719,7 +709,7 @@ export default function PaymentFormPage() {
                               placeholder="Enter promo code"
                               value={promo}
                               onChange={setPromo}
-                              xstyle={styles.fullWidth}
+                              style={fullWidth}
                             />
                           </StackItem>
                           <Button
@@ -811,14 +801,14 @@ export default function PaymentFormPage() {
                             label="Place Order"
                             variant="primary"
                             size="lg"
-                            xstyle={styles.fullWidth}
+                            style={fullWidth}
                             onClick={() => setSubmitted(true)}
                           />
                           <Button
                             label="Continue Shopping"
                             variant="secondary"
                             size="lg"
-                            xstyle={styles.fullWidth}
+                            style={fullWidth}
                             onClick={() => {}}
                           />
                         </VStack>
@@ -843,18 +833,14 @@ export default function PaymentFormPage() {
 
                   <StackItem
                     size="fill"
-                    xstyle={
-                      isMobile
-                        ? styles.summaryMobileOrder
-                        : styles.summarySticky
-                    }>
+                    style={isMobile ? summaryMobileOrder : summarySticky}>
                     <Card padding={5}>
                       <VStack gap={4}>
                         {/* Accordion header — clickable on mobile only */}
                         <Collapsible
                           trigger="Order Summary"
                           defaultIsOpen={true}>
-                          <VStack gap={4} xstyle={styles.summaryContent}>
+                          <VStack gap={4} style={summaryContent}>
                             {/* Line items */}
                             {ORDER_ITEMS.map(item => (
                               <VStack key={item.id} gap={3}>

package/templates/pages/product-detail/page.tsx

@@ -24,36 +24,34 @@ import {Divider} from '@astryxdesign/core/Divider';
 import {Collapsible, CollapsibleGroup} from '@astryxdesign/core/Collapsible';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {SelectableCard} from '@astryxdesign/core/SelectableCard';
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 
 // Custom CSS here is limited to what Astryx components can't express today:
 // - image fill + corner radius (no Image primitive — #2582)
 // - the sticky info column (no sticky prop on Astryx layout primitives — #2613)
-const pageStyles = stylex.create({
-  // Keeps the info column in view while the gallery scrolls. No sticky prop on
-  // Astryx layout primitives.
-  stickyInfo: {
-    position: 'sticky',
-    top: 'var(--spacing-8)',
-    alignSelf: 'start',
-  },
-  // Fills the AspectRatio box + rounds corners. No objectFit/radius props on
-  // AspectRatio (#2582).
-  heroImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    borderRadius: 'var(--radius-container)',
-  },
-  // Fills the thumbnail card. Corner radius + selection ring come from
-  // SelectableCard; the image only needs to fill and cover (#2582).
-  thumbImage: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-    display: 'block',
-  },
-});
+// Keeps the info column in view while the gallery scrolls. No sticky prop on
+// Astryx layout primitives.
+const stickyInfo: CSSProperties = {
+  position: 'sticky',
+  top: 'var(--spacing-8)',
+  alignSelf: 'start',
+};
+// Fills the AspectRatio box + rounds corners. No objectFit/radius props on
+// AspectRatio (#2582).
+const heroImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  borderRadius: 'var(--radius-container)',
+};
+// Fills the thumbnail card. Corner radius + selection ring come from
+// SelectableCard; the image only needs to fill and cover (#2582).
+const thumbImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+  display: 'block',
+};
 
 import {MinusIcon, PlusIcon, StarIcon} from '@heroicons/react/24/outline';
 import {StarIcon as StarIconSolid} from '@heroicons/react/24/solid';
@@ -133,11 +131,7 @@ function ImageGallery({
   return (
     <VStack gap={3}>
       <AspectRatio ratio={4 / 5}>
-        <img
-          {...stylex.props(pageStyles.heroImage)}
-          src={heroSrc}
-          alt={PRODUCT.name}
-        />
+        <img style={heroImage} src={heroSrc} alt={PRODUCT.name} />
       </AspectRatio>
       <Grid columns={3} gap={2}>
         {thumbnails.map((src, i) => (
@@ -151,7 +145,7 @@ function ImageGallery({
               width="100%"
               height="100%">
               <img
-                {...stylex.props(pageStyles.thumbImage)}
+                style={thumbImage}
                 src={src}
                 alt={`Product image ${i + 1}`}
               />
@@ -301,7 +295,7 @@ export default function ProductDetailTemplate() {
               selected={selectedThumb}
               onSelect={setSelectedThumb}
             />
-            <VStack gap={0} xstyle={pageStyles.stickyInfo}>
+            <VStack gap={0} style={stickyInfo}>
               <ProductInfo />
             </VStack>
           </Grid>

package/templates/pages/product-gallery/page.tsx

@@ -10,19 +10,17 @@ import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Card} from '@astryxdesign/core/Card';
 import {Icon} from '@astryxdesign/core/Icon';
 import {ArrowRightIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 
 // ─── Styles ─────────────────────────────────────────────────────────────────
 // The only custom CSS is the image fill — there is no Image primitive to
 // fill the AspectRatio box with `object-fit` (#2582).
 
-const styles = stylex.create({
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const image: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 // ─── Product Data ───────────────────────────────────────────────────────────
 
@@ -100,11 +98,7 @@ function ProductCard({product}: {product: Product}) {
     <VStack gap={3}>
       <Card padding={0}>
         <AspectRatio ratio={1}>
-          <img
-            src={product.image}
-            alt={product.name}
-            {...stylex.props(styles.image)}
-          />
+          <img src={product.image} alt={product.name} style={image} />
         </AspectRatio>
       </Card>
       <VStack gap={1}>

package/templates/pages/settings-dialog/page.tsx

@@ -2,8 +2,7 @@
 
 'use client';
 
-import React, {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
+import React, {useState, type CSSProperties} from 'react';
 import {
   VStack,
   HStack,
@@ -26,11 +25,6 @@ import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Badge} from '@astryxdesign/core/Badge';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Center} from '@astryxdesign/core/Center';
-import {
-  colorVars,
-  radiusVars,
-  spacingVars,
-} from '@astryxdesign/core/theme/tokens.stylex';
 import {
   UserIcon,
   LockClosedIcon,
@@ -46,33 +40,31 @@ import {
   ShareIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  iconBox: {
-    borderRadius: radiusVars['--radius-container'],
-    backgroundColor: colorVars['--color-background-surface'],
-    flexShrink: 0,
-  },
-  // Sticky dialog header bar — no Astryx prop for sticky/background/z-index.
-  // Inline + block padding comes from the parent LayoutContent `padding`.
-  headerSticky: {
-    position: 'sticky',
-    top: 0,
-    backgroundColor: colorVars['--color-background-surface'],
-    zIndex: 1,
-  },
-  // No `maxWidth` prop on VStack — width only. Inline padding comes from
-  // the parent LayoutContent `padding`.
-  contentMaxWidth: {
-    maxWidth: 680,
-  },
-  // Aligns the sidebar heading with list-item label text. No heading margin prop.
-  sideNavHeading: {
-    marginInline: spacingVars['--spacing-4'],
-  },
-  dialogHeight: {
-    height: '85vh',
-  },
-});
+const iconBox: CSSProperties = {
+  borderRadius: 'var(--radius-container)',
+  backgroundColor: 'var(--color-background-surface)',
+  flexShrink: 0,
+};
+// Sticky dialog header bar — no Astryx prop for sticky/background/z-index.
+// Inline + block padding comes from the parent LayoutContent `padding`.
+const headerSticky: CSSProperties = {
+  position: 'sticky',
+  top: 0,
+  backgroundColor: 'var(--color-background-surface)',
+  zIndex: 1,
+};
+// No `maxWidth` prop on VStack — width only. Inline padding comes from
+// the parent LayoutContent `padding`.
+const contentMaxWidth: CSSProperties = {
+  maxWidth: 680,
+};
+// Aligns the sidebar heading with list-item label text. No heading margin prop.
+const sideNavHeading: CSSProperties = {
+  marginInline: 'var(--spacing-4)',
+};
+const dialogHeight: CSSProperties = {
+  height: '85vh',
+};
 
 const NAV_ITEMS = [
   {label: 'Personal information', icon: UserIcon},
@@ -274,7 +266,7 @@ export default function SettingsDialogTemplate() {
         maxHeight="85vh"
         padding={0}
         purpose="form"
-        xstyle={styles.dialogHeight}>
+        style={dialogHeight}>
         <Layout
           height="fill"
           start={
@@ -284,7 +276,7 @@ export default function SettingsDialogTemplate() {
               role="navigation"
               padding={3}>
               <VStack gap={4}>
-                <Heading level={2} xstyle={styles.sideNavHeading}>
+                <Heading level={2} style={sideNavHeading}>
                   Account settings
                 </Heading>
                 <List density="spacious">
@@ -315,7 +307,7 @@ export default function SettingsDialogTemplate() {
           content={
             <LayoutContent isScrollable padding={6}>
               <VStack gap={6}>
-                <VStack xstyle={styles.headerSticky}>
+                <VStack style={headerSticky}>
                   <DialogHeader
                     title={
                       activeNav === 'Personal information'
@@ -326,7 +318,7 @@ export default function SettingsDialogTemplate() {
                     hasDivider={false}
                   />
                 </VStack>
-                <VStack gap={0} xstyle={styles.contentMaxWidth}>
+                <VStack gap={0} style={contentMaxWidth}>
                   {activeNav === 'Personal information' && (
                     <VStack gap={6}>
                       <VStack gap={4}>
@@ -441,7 +433,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={LockClosedIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -465,7 +457,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={PencilSquareIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -491,7 +483,7 @@ export default function SettingsDialogTemplate() {
                             <Center
                               width={48}
                               height={48}
-                              xstyle={styles.iconBox}>
+                              style={iconBox}>
                               <Icon icon={ShareIcon} />
                             </Center>
                             <VStack gap={0}>
@@ -620,7 +612,7 @@ export default function SettingsDialogTemplate() {
                               <Center
                                 width={48}
                                 height={48}
-                                xstyle={styles.iconBox}>
+                                style={iconBox}>
                                 <Icon icon={LockClosedIcon} />
                               </Center>
                               <VStack gap={1}>
@@ -813,7 +805,7 @@ export default function SettingsDialogTemplate() {
                               <Center
                                 width={48}
                                 height={48}
-                                xstyle={styles.iconBox}>
+                                style={iconBox}>
                                 <Icon icon={ShieldCheckIcon} />
                               </Center>
                               <VStack gap={1}>