@astryxdesign/cli 0.4.7-canary.d895769 → 0.4.7-canary.dd94f7f

package/assets/templates/pages/mixed-gallery/page.tsx

@@ -36,7 +36,11 @@ const clipStyle: CSSProperties = {
 // 3 columns on desktop, dropping straight to 1 column below 720px (no 2-col
 // middle state). minmax(0, 1fr) (not 1fr) so tracks split evenly and ignore the
 // images' intrinsic min-width. The hero spans 2 columns on desktop, then fills
-// the row once it's single-column.
+// the row once it's single-column — and switches from 3:1 to 3:2 with a plain
+// aspect-ratio override. AspectRatio's ratio is a class-level declaration in
+// @layer astryx-base, and this <style> tag is unlayered, so the override wins
+// regardless of specificity — every stacked tile is uniform without rendering
+// the hero twice.
 const GALLERY_CSS = `
 .mixed-gallery-grid {
   display: grid;
@@ -52,6 +56,7 @@ const GALLERY_CSS = `
   }
   .mixed-gallery-hero {
     grid-column: 1 / -1;
+    aspect-ratio: 3 / 2;
   }
 }
 `;
@@ -134,9 +139,13 @@ export default function MixedGalleryTemplate() {
                 of three. Every tile is 3:2 except the hero, which is 3:1 so that
                 (being 2 columns wide) it matches the row height exactly. All
                 rows are therefore the same height. Responsive via @container:
-                3 columns → 1 column at ≤720px. */}
+                3 columns → 1 column at ≤720px, where the hero drops to 3:2 so
+                the stacked tiles are uniform. */}
             <div className="mixed-gallery-grid">
-              {/* Hero — spans 2 columns; 3:1 keeps it level with the sidebar */}
+              {/* Hero — spans 2 columns; 3:1 keeps it level with the sidebar.
+                  Stacked, the unlayered aspect-ratio override switches it to
+                  3:2 (see GALLERY_CSS) — one element, no duplicate hero
+                  markup. */}
               <GalleryCard
                 image={IMAGES[0]}
                 ratio={3 / 1}

package/assets/templates/themes/neutral/neutralTheme.ts

@@ -24,7 +24,8 @@
  *   icon   = T30         / T80
  *   text   = T30         / T80
  *
- * All 9 saturated badge values pass WCAG AA (5.6–9.6 contrast range).
+ * All 9 saturated badge values pass WCAG AA against their label (>= 4.5:1);
+ * `scripts/check-badge-contrast.test.mjs` holds every theme to that.
  *
  * Only overrides tokens that differ from the defaults.
  */
@@ -432,10 +433,14 @@ export const neutralTheme = defineTheme({
         color: '#171717',
       },
       'variant:error': {
-        // Light: T55 #e33f4a (palette saturated stop)
+        // Light: T58 #c9303a. The T55 stop #e33f4a pairs with white at only
+        //        4.14:1 — the label is 12px/500, so AA wants 4.5, not the 3:1
+        //        large-text allowance. One tonal step down holds the hue
+        //        (OKLCH H 21.9 -> 22.8, C 0.200 -> 0.189) and reaches 5.29:1.
         // Dark : T60 stop from dark-mode tonal palette of Tailwind red-600
-        //        source #dc2626 (kept on H=27 alarm-red rather than coral)
-        backgroundColor: 'light-dark(#e33f4a, #ff705d)',
+        //        source #dc2626 (kept on H=27 alarm-red rather than coral).
+        //        Dark text on it is 6.60:1 and unchanged.
+        backgroundColor: 'light-dark(#c9303a, #ff705d)',
         color: 'light-dark(#ffffff, #171717)',
       },
 
@@ -500,7 +505,7 @@ export const neutralTheme = defineTheme({
     //
     //   success → badge success bg  (green T45 / dark-ramp T60)
     //   warning → badge warning bg  (yellow T85, same hex both modes)
-    //   error   → badge error bg    (red T55 / dark-ramp T60)
+    //   error   → badge error bg    (red T58 / dark-ramp T60)
     //   accent  → badge info bg     (blue T50 / dark-ramp T60) — the
     //             StatusDot "accent" is the info/attention color, so it
     //             pairs with the info badge rather than --color-accent
@@ -515,7 +520,7 @@ export const neutralTheme = defineTheme({
     statusdot: {
       'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
       'variant:warning': {backgroundColor: '#ffce2f'},
-      'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
+      'variant:error': {backgroundColor: 'light-dark(#c9303a, #ff705d)'},
       'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
     },
 
@@ -611,8 +616,8 @@ export const neutralTheme = defineTheme({
         '--color-warning': '#ffce2f',
       },
       'variant:error': {
-        // Red T55 saturated stop (= variant:error badge bg)
-        '--color-error': '#e33f4a',
+        // Red T58 saturated stop (= variant:error badge bg)
+        '--color-error': '#c9303a',
       },
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.4.7-canary.d895769",
+  "version": "0.4.7-canary.dd94f7f",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -87,10 +87,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.4.7-canary.d895769",
-    "@astryxdesign/core": "0.4.7-canary.d895769",
-    "@astryxdesign/lab": "0.4.7-canary.d895769",
-    "@astryxdesign/theme-neutral": "0.4.7-canary.d895769",
+    "@astryxdesign/charts": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/core": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/lab": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/theme-neutral": "0.4.7-canary.dd94f7f",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -108,10 +108,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.4.7-canary.d895769",
-    "@astryxdesign/core": "0.4.7-canary.d895769",
-    "@astryxdesign/lab": "0.4.7-canary.d895769",
-    "@astryxdesign/theme-neutral": "0.4.7-canary.d895769",
+    "@astryxdesign/charts": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/core": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/lab": "0.4.7-canary.dd94f7f",
+    "@astryxdesign/theme-neutral": "0.4.7-canary.dd94f7f",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {