@astryxdesign/cli 0.1.6-canary.1a0fef5 → 0.1.6-canary.1b61ba6

package/templates/blocks/components/Avatar/AvatarWithImage.tsx

@@ -5,24 +5,26 @@
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarWithImage() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
-      <Avatar src={`${CDN}/DATA-Ami-Pena.png`} name="Ami Pena" size="tiny" />
       <Avatar
-        src={`${CDN}/DATA-Ana-Thomas.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ami-Pena.png"
+        name="Ami Pena"
+        size="tiny"
+      />
+      <Avatar
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Ana-Thomas.png"
         name="Ana Thomas"
         size="small"
       />
       <Avatar
-        src={`${CDN}/DATA-Daniela-Gimenez.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Daniela-Gimenez.png"
         name="Daniela Gimenez"
         size="medium"
       />
       <Avatar
-        src={`${CDN}/DATA-Gabriela-Fernandez.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Gabriela-Fernandez.png"
         name="Gabriela Fernandez"
         size="large"
       />

package/templates/blocks/components/Avatar/AvatarWithStatus.tsx

@@ -5,25 +5,23 @@
 import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const CDN = 'https://lookaside.facebook.com/assets/astryx';
-
 export default function AvatarWithStatus() {
   return (
     <Stack direction="horizontal" gap={4} vAlign="center">
       <Avatar
-        src={`${CDN}/DATA-Itai-Jordaan.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Itai-Jordaan.png"
         name="Itai Jordaan"
         size="large"
         status={<AvatarStatusDot variant="success" label="Online" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Margot-Schroder.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Margot-Schroder.png"
         name="Margot Schroder"
         size="large"
         status={<AvatarStatusDot variant="neutral" label="Offline" />}
       />
       <Avatar
-        src={`${CDN}/DATA-Pablo-Morales.png`}
+        src="https://lookaside.facebook.com/assets/astryx/DATA-Pablo-Morales.png"
         name="Pablo Morales"
         size="large"
         status={<AvatarStatusDot variant="error" label="Busy" />}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputControlledInput.tsx

@@ -10,7 +10,7 @@ import {Text} from '@astryxdesign/core/Text';
 export default function ChatComposerInputControlledInput() {
   const [value, setValue] = useState('');
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         value={value}

package/templates/blocks/components/ChatComposerInput/ChatComposerInputDisabled.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputDisabled() {
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         isDisabled

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMentionTrigger.tsx

@@ -43,7 +43,7 @@ export default function ChatComposerInputMentionTrigger() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => setValue('')}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputMultipleTriggers.tsx

@@ -54,7 +54,7 @@ export default function ChatComposerInputMultipleTriggers() {
   };
 
   return (
-    <Stack direction="vertical" gap={3} style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" gap={3} style={{width: 450, maxWidth: '100%'}}>
       <Text type="supporting" color="secondary">
         Type @ for mentions (blue) or / for commands (yellow)
       </Text>

package/templates/blocks/components/ChatComposerInput/ChatComposerInputShowcase.tsx

@@ -7,7 +7,7 @@ import {Stack} from '@astryxdesign/core/Layout';
 
 export default function ChatComposerInputShowcase() {
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/ChatComposerInput/ChatComposerInputSlashCommands.tsx

@@ -40,7 +40,7 @@ export default function ChatComposerInputSlashCommands() {
   };
 
   return (
-    <Stack direction="vertical" style={{width: '100%', maxWidth: 450}}>
+    <Stack direction="vertical" style={{width: 450, maxWidth: '100%'}}>
       <ChatComposer
         onSubmit={() => {}}
         input={

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'VisuallyHidden',
+  name: 'VisuallyHidden — Live Region',
+  displayName: 'VisuallyHidden — Live Region',
+  description:
+    'A polite aria-live region announces visual-only state changes to assistive technology.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['VisuallyHidden', 'Button', 'HStack', 'VStack', 'Text'],
+};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenLiveRegion.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+import {Button} from '@astryxdesign/core/Button';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const columns = ['Backlog', 'In progress', 'Done'] as const;
+
+export default function VisuallyHiddenLiveRegion() {
+  const [column, setColumn] = useState(0);
+  const current = columns[column];
+
+  function move() {
+    setColumn(c => (c + 1) % columns.length);
+  }
+
+  return (
+    <VStack gap={4} hAlign="start">
+      <Text type="supporting" color="secondary">
+        Drag-and-drop and other visual-only changes are silent to screen
+        readers. A live region narrates them.
+      </Text>
+      <HStack gap={3} vAlign="center">
+        <Button label="Move task" variant="secondary" onClick={move} />
+        <Text type="body">
+          Task is in{' '}
+          <Text as="span" weight="bold">
+            {current}
+          </Text>
+        </Text>
+      </HStack>
+      <VisuallyHidden as="div" aria-live="polite">
+        {`Task moved to ${current}`}
+      </VisuallyHidden>
+    </VStack>
+  );
+}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.doc.mjs

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'VisuallyHidden',
+  name: 'VisuallyHidden',
+  displayName: 'VisuallyHidden',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  isShowcase: true,
+  componentsUsed: ['VisuallyHidden', 'IconButton', 'Card', 'HStack', 'VStack', 'Text', 'Icon'],
+};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenShowcase.tsx

@@ -0,0 +1,78 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {
+  ArrowDownTrayIcon,
+  ShareIcon,
+  TrashIcon,
+} from '@heroicons/react/24/outline';
+import {SpeakerWaveIcon} from '@heroicons/react/24/solid';
+
+const actions = [
+  {label: 'Download', icon: ArrowDownTrayIcon},
+  {label: 'Share', icon: ShareIcon},
+  {label: 'Delete', icon: TrashIcon},
+] as const;
+
+/**
+ * VisuallyHidden is invisible by design, so this hero teaches the concept by
+ * contrast: the icon-only buttons are all a sighted user sees, while the
+ * caption spells out the accessible name each one exposes. A live
+ * <VisuallyHidden> region below announces the same names to assistive tech,
+ * so the demo genuinely exercises the component it documents.
+ */
+export default function VisuallyHiddenShowcase() {
+  return (
+    <VStack gap={5} hAlign="center">
+      <HStack gap={6} vAlign="stretch" wrap="wrap" hAlign="center">
+        <Card variant="muted">
+          <VStack gap={4} hAlign="center">
+            <Text type="supporting" color="secondary">
+              What you see
+            </Text>
+            <HStack gap={2}>
+              {actions.map(({label, icon}) => (
+                <IconButton
+                  key={label}
+                  label={label}
+                  icon={<Icon icon={icon} />}
+                  variant="ghost"
+                />
+              ))}
+            </HStack>
+          </VStack>
+        </Card>
+
+        <Card variant="muted">
+          <VStack gap={4} hAlign="start">
+            <HStack gap={2} vAlign="center">
+              <Icon icon={SpeakerWaveIcon} size="sm" />
+              <Text type="supporting" color="secondary">
+                What a screen reader hears
+              </Text>
+            </HStack>
+            <VStack gap={2}>
+              {actions.map(({label}) => (
+                <Text key={label} type="body">
+                  {label}, button
+                </Text>
+              ))}
+            </VStack>
+          </VStack>
+        </Card>
+      </HStack>
+
+      {/* A real live region: silent to sighted users, announced by AT. */}
+      <VisuallyHidden as="div" aria-live="polite">
+        Actions available: Download, Share, Delete.
+      </VisuallyHidden>
+    </VStack>
+  );
+}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'VisuallyHidden',
+  name: 'VisuallyHidden — Structural Heading',
+  displayName: 'VisuallyHidden — Structural Heading',
+  description:
+    'Give a visually implicit section an accessible name so screen-reader users can navigate to it.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['VisuallyHidden', 'Card', 'HStack', 'VStack', 'Text', 'Badge'],
+};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenStructuralHeading.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Badge} from '@astryxdesign/core/Badge';
+
+const items = [
+  {name: 'astryx-core', status: 'Passing', variant: 'success'},
+  {name: 'astryx-charts', status: 'Failing', variant: 'error'},
+  {name: 'astryx-cli', status: 'Passing', variant: 'success'},
+] as const;
+
+export default function VisuallyHiddenStructuralHeading() {
+  return (
+    <VStack gap={3} hAlign="start">
+      <Text type="supporting" color="secondary">
+        The layout makes this group obvious to sighted users. A hidden heading
+        gives screen-reader users the same landmark to jump to.
+      </Text>
+      {/* No visible heading is needed here, but AT users navigate by heading. */}
+      <VisuallyHidden as="h2">Build status</VisuallyHidden>
+      <VStack gap={2}>
+        {items.map(({name, status, variant}) => (
+          <Card key={name} variant="muted" padding={3}>
+            <HStack gap={3} vAlign="center">
+              <Text type="body">{name}</Text>
+              <Badge label={status} variant={variant} />
+            </HStack>
+          </Card>
+        ))}
+      </VStack>
+    </VStack>
+  );
+}

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'VisuallyHidden',
+  name: 'VisuallyHidden — Supplementary Context',
+  displayName: 'VisuallyHidden — Supplementary Context',
+  description:
+    'Add screen-reader-only context to terse visual data, like spelling out what a trend arrow means.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['VisuallyHidden', 'Card', 'HStack', 'VStack', 'Text', 'Icon'],
+};

package/templates/blocks/components/VisuallyHidden/VisuallyHiddenSupplementaryContext.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+import {Card} from '@astryxdesign/core/Card';
+import {HStack, VStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {ArrowUpIcon, ArrowDownIcon} from '@heroicons/react/24/solid';
+
+const stats = [
+  {label: 'Revenue', value: '$48.2k', delta: '+12%', direction: 'up'},
+  {label: 'Churn', value: '2.1%', delta: '-4%', direction: 'down'},
+] as const;
+
+export default function VisuallyHiddenSupplementaryContext() {
+  return (
+    <HStack gap={4} wrap="wrap">
+      {stats.map(({label, value, delta, direction}) => (
+        <Card key={label} variant="muted">
+          <VStack gap={1}>
+            <Text type="supporting" color="secondary">
+              {label}
+            </Text>
+            <Text type="display-3">{value}</Text>
+            <HStack gap={1} vAlign="center">
+              <Icon
+                icon={direction === 'up' ? ArrowUpIcon : ArrowDownIcon}
+                size="sm"
+                color={direction === 'up' ? 'accent' : 'secondary'}
+              />
+              <Text type="body">
+                {delta}
+                {/* The arrow is decorative; spell out the trend for AT. */}
+                <VisuallyHidden>
+                  {direction === 'up' ? ' increase' : ' decrease'} from last
+                  month
+                </VisuallyHidden>
+              </Text>
+            </HStack>
+          </VStack>
+        </Card>
+      ))}
+    </HStack>
+  );
+}

package/templates/pages/theme-showcase/page.tsx

@@ -282,14 +282,14 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 
 // Neutral product photos, served from the shared astryx asset CDN so the
 // scaffolded template renders real imagery without needing local public assets.
-const NEUTRAL_CDN = 'https://lookaside.facebook.com/assets/astryx';
 const DEFAULT_IMAGES: Record<string, string> = {
-  watch: `${NEUTRAL_CDN}/Neutral-Watch.png`,
-  headphones: `${NEUTRAL_CDN}/Neutral-Headphones.png`,
-  backpack: `${NEUTRAL_CDN}/Neutral-Backpack.png`,
-  wallet: `${NEUTRAL_CDN}/Neutral-Wallet.png`,
-  tumbler: `${NEUTRAL_CDN}/Neutral-Tumbler.png`,
-  throw_: `${NEUTRAL_CDN}/Neutral-Blanket.png`,
+  watch: 'https://lookaside.facebook.com/assets/astryx/Neutral-Watch.png',
+  headphones:
+    'https://lookaside.facebook.com/assets/astryx/Neutral-Headphones.png',
+  backpack: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
+  wallet: 'https://lookaside.facebook.com/assets/astryx/Neutral-Wallet.png',
+  tumbler: 'https://lookaside.facebook.com/assets/astryx/Neutral-Tumbler.png',
+  throw_: 'https://lookaside.facebook.com/assets/astryx/Neutral-Blanket.png',
 };
 
 export interface ThemeShowcaseProps {

package/templates/themes/neutral/neutralTheme.ts

@@ -39,19 +39,19 @@ import {neutralIconRegistry} from './icons';
 const neutralSyntax = defineSyntaxTheme({
   name: 'xds-neutral',
   tokens: {
-    keyword: ['#700084', '#efa8ff'],    // purple T30/T80
-    string: ['#005600', '#a6d2a2'],     // green (sat T30 / pastel T80)
-    comment: ['#737373', '#a3a3a3'],    // neutral
-    number: ['#6e3500', '#ffb37f'],     // orange
-    function: ['#00458c', '#a0caff'],   // blue T30/T80 H=255
-    type: ['#700084', '#efa8ff'],       // purple
-    variable: ['#171717', '#e5e5e5'],   // near-black / near-white
-    operator: ['#737373', '#a3a3a3'],   // neutral
-    constant: ['#6e3500', '#ffb37f'],   // orange
-    tag: ['#89001a', '#ffaeaa'],        // red
-    attribute: ['#584400', '#eec12f'],  // yellow
-    property: ['#005348', '#83dac9'],   // teal
-    punctuation: ['#a3a3a3', '#525252'],// neutral
+    keyword: ['#700084', '#efa8ff'], // purple T30/T80
+    string: ['#005600', '#a6d2a2'], // green (sat T30 / pastel T80)
+    comment: ['#737373', '#a3a3a3'], // neutral
+    number: ['#6e3500', '#ffb37f'], // orange
+    function: ['#00458c', '#a0caff'], // blue T30/T80 H=255
+    type: ['#700084', '#efa8ff'], // purple
+    variable: ['#171717', '#e5e5e5'], // near-black / near-white
+    operator: ['#737373', '#a3a3a3'], // neutral
+    constant: ['#6e3500', '#ffb37f'], // orange
+    tag: ['#89001a', '#ffaeaa'], // red
+    attribute: ['#584400', '#eec12f'], // yellow
+    property: ['#005348', '#83dac9'], // teal
+    punctuation: ['#a3a3a3', '#525252'], // neutral
     background: ['#fafafa', '#0a0a0a'],
   },
 });
@@ -127,39 +127,39 @@ export const neutralTheme = defineTheme({
     // All values use the OKLCH Neutral tonal palette (chroma=0).
     // =========================================================================
     '--color-background-surface': ['#ffffff', '#262626'],
-    '--color-background-body':    ['#f1f1f1', '#1b1b1b'],
-    '--color-background-card':    ['#ffffff', '#1b1b1b'],
+    '--color-background-body': ['#f1f1f1', '#1b1b1b'],
+    '--color-background-card': ['#ffffff', '#1b1b1b'],
     '--color-background-popover': ['#ffffff', '#1b1b1b'],
-    '--color-background-muted':   ['#f1f1f1', '#1b1b1b'],
+    '--color-background-muted': ['#f1f1f1', '#1b1b1b'],
 
     // Accent + neutral surface tints (sit alongside backgrounds)
-    '--color-accent':       ['#262626', '#ebebeb'],
+    '--color-accent': ['#262626', '#ebebeb'],
     '--color-accent-muted': ['#f1f1f1', '#262626'],
-    '--color-neutral':      ['#0000000F', '#FFFFFF1A'],
+    '--color-neutral': ['#0000000F', '#FFFFFF1A'],
 
     // Overlays (modal scrims, hover/pressed tints)
-    '--color-overlay':         ['#00000080', '#000000CC'],
-    '--color-overlay-hover':   ['#0000000D', '#FFFFFF0D'],
+    '--color-overlay': ['#00000080', '#000000CC'],
+    '--color-overlay-hover': ['#0000000D', '#FFFFFF0D'],
     '--color-overlay-pressed': ['#0000001A', '#FFFFFF1A'],
 
     // Text
-    '--color-text-primary':   ['#171717', '#fafafa'],
+    '--color-text-primary': ['#171717', '#fafafa'],
     '--color-text-secondary': ['#737373', '#a3a3a3'],
-    '--color-text-disabled':  ['#a3a3a3', '#525252'],
-    '--color-text-accent':    ['#262626', '#ebebeb'],
-    '--color-on-dark':    '#ffffff',
-    '--color-on-light':   '#171717',
+    '--color-text-disabled': ['#a3a3a3', '#525252'],
+    '--color-text-accent': ['#262626', '#ebebeb'],
+    '--color-on-dark': '#ffffff',
+    '--color-on-light': '#171717',
     // Contrast: neutral accent is near-black (L) / near-white (D)
-    '--color-on-accent':  ['#ffffff', '#171717'],
+    '--color-on-accent': ['#ffffff', '#171717'],
     '--color-on-success': ['#ffffff', '#171717'],
-    '--color-on-error':   ['#ffffff', '#171717'],
+    '--color-on-error': ['#ffffff', '#171717'],
     '--color-on-warning': '#171717',
 
     // Icon
-    '--color-icon-accent':    ['#262626', '#ebebeb'],
-    '--color-icon-primary':   ['#171717', '#fafafa'],
+    '--color-icon-accent': ['#262626', '#ebebeb'],
+    '--color-icon-primary': ['#171717', '#fafafa'],
     '--color-icon-secondary': ['#737373', '#a3a3a3'],
-    '--color-icon-disabled':  ['#a3a3a3', '#525252'],
+    '--color-icon-disabled': ['#a3a3a3', '#525252'],
 
     // Status / Sentiment — dark mode follows the issue #2150 rubric:
     //
@@ -372,8 +372,8 @@ export const neutralTheme = defineTheme({
     // =========================================================================
     button: {
       'variant:destructive': {
-        backgroundColor: 'var(--color-error-muted)',  // locked pastel red bg
-        color: 'var(--color-error)',                  // locked T30 red — matches banner/input error text
+        backgroundColor: 'var(--color-error-muted)', // locked pastel red bg
+        color: 'var(--color-error)', // locked T30 red — matches banner/input error text
       },
     },
 
@@ -482,6 +482,37 @@ export const neutralTheme = defineTheme({
       },
     },
 
+    // =========================================================================
+    // StatusDot — fill uses the SAME vivid stops as the filled semantic Badge
+    // (and ProgressBar), so a dot and its badge read as one status language.
+    //
+    // The default component maps each variant to a raw semantic token
+    // (--color-success / --color-error / --color-warning / --color-icon-
+    // secondary), which in light mode are the dark T30/T40 stops meant to
+    // sit as TEXT on a pastel surface — as a solid dot they read muddy
+    // (dark green / maroon / brown). Redirect them to the badge fills.
+    //
+    //   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)
+    //   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
+    //             (near-black #262626, the darkest offender).
+    //
+    // `neutral` is intentionally NOT overridden: the neutral badge bg is a
+    // near-invisible light gray (--color-background-gray #e5e5e5 / 10% white
+    // wash), fine as a large pill but unreadable as an 8px dot. It keeps the
+    // component default's visible mid-gray (--color-icon-secondary), which is
+    // not among the "too dark" cases.
+    // =========================================================================
+    statusdot: {
+      'variant:success': {backgroundColor: 'light-dark(#198100, #64af4c)'},
+      'variant:warning': {backgroundColor: '#ffce2f'},
+      'variant:error': {backgroundColor: 'light-dark(#e33f4a, #ff705d)'},
+      'variant:accent': {backgroundColor: 'light-dark(#0074e2, #6d9cfe)'},
+    },
+
     // =========================================================================
     // Banner — sits on a hue-tinted surface with colored text/icon:
     //   Light: pastel T90 bg (pulled from --color-{X}-muted / --color-background-blue)