@astryxdesign/cli 0.4.7 → 0.5.0-canary.009bcb3

package/assets/templates/blocks/components/HoverCard/HoverCardHookUsage.tsx

@@ -13,6 +13,7 @@ export default function HoverCardHookUsage() {
     placement: 'below',
     delay: 100,
     isDefaultOpen: true,
+    label: 'Alex Morgan',
   });
 
   return (
@@ -20,7 +21,9 @@ export default function HoverCardHookUsage() {
       <Button
         label="Hover profile"
         ref={hoverCard.ref}
-        aria-describedby={hoverCard.describedBy}
+        aria-haspopup="dialog"
+        aria-controls={hoverCard.isOpen ? hoverCard.id : undefined}
+        aria-expanded={hoverCard.isOpen}
       />
       {hoverCard.renderHoverCard(
         <VStack gap={1}>

package/assets/templates/blocks/components/Step/StepContent.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — Content Slot',
+  displayName: 'Step — Content Slot',
+  description:
+    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active. That is what turns a vertical stepper into an expanding one.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'TextInput', 'Button'],
+};

package/assets/templates/blocks/components/Step/StepContent.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+
+export default function StepContent() {
+  // Anything passed as children renders below the description, indented to line
+  // up with the label rather than the indicator. In a full flow you would gate
+  // this on the step being active; here it is a single Step so the slot is
+  // always shown.
+  return (
+    <div style={{width: 400}}>
+      <Stepper activeStep={1} orientation="vertical">
+        <Step
+          step={1}
+          label="Billing address"
+          description="Used for invoices and tax calculation">
+          <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+            <TextInput label="Street" placeholder="1 Hacker Way" value="" />
+            <TextInput label="City" placeholder="Menlo Park" value="" />
+            <div>
+              <Button label="Save address" variant="primary" />
+            </div>
+          </div>
+        </Step>
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepIndicator.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — Indicator',
+  displayName: 'Step — Indicator',
+  description:
+    'Everything the indicator prop accepts: the auto default, an always-number badge, a custom ReactNode, and none, each on its own completed Step so the prop is the only difference between them. Every variant occupies the same 16px box, so a step swapping its number for a check as it completes never shifts the label beside it. The last cell shows that a custom node can be live rather than static: a Spinner on a step that is in progress, shaded `inherit` so it picks up the step\'s own tint like any other glyph.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'Icon', 'Spinner', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepIndicator.tsx

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Spinner} from '@astryxdesign/core/Spinner';
+
+export default function StepIndicator() {
+  // The first four steps are all completed — same progress, so the indicator
+  // prop is the only difference between them. `auto` is the one that reacts to
+  // progress: a numbered badge until the step is reached, then a check. The
+  // last step is in progress instead, because the node it passes to `indicator`
+  // is a spinner and a spinner only makes sense on work that is running.
+  return (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 24}}>
+      <div style={{width: 190}}>
+        <Text type="label">auto (default)</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">number</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" indicator="number" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">Custom node</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step
+            step={0}
+            label="Verify email"
+            indicator={<Icon icon="wrench" size="sm" />}
+          />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">none</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" indicator="none" />
+        </Stepper>
+      </div>
+      <div style={{width: 190}}>
+        <Text type="label">Spinner (in progress)</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step
+            step={0}
+            label="Verify email"
+            // `inherit` picks up the indicator's own tint, so the spinner is
+            // colored by the step's progress and status like any other glyph.
+            indicator={<Spinner size="md" shade="inherit" />}
+          />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepShowcase.doc.mjs

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step',
+  displayName: 'Step',
+  description:
+    'A single Step, with every part it can render: the indicator, the label with its optional marker and trailing endContent, and the description beneath. A Step never sets its own completed/current state. It declares its index and derives the rest from the parent Stepper, so one Step in one Stepper is a complete example.',
+  isReady: true,
+  isShowcase: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper', 'Step', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepShowcase.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepShowcase() {
+  // One Step, and every part it renders: the indicator, the label with its
+  // optional marker and trailing slot, and the description beneath. A Step is
+  // always wrapped in a Stepper — that is where it reads its progress from —
+  // so a single Step in a single Stepper is the smallest complete example.
+  return (
+    <div style={{width: 380}}>
+      <Stepper activeStep={1} orientation="vertical">
+        <Step
+          step={1}
+          label="Connect a repository"
+          description="Astryx reads your build settings from the default branch"
+          endContent={<Text type="supporting">2 min</Text>}
+          isOptional
+        />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Step/StepStates.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Step',
+  name: 'Step — States',
+  displayName: 'Step — States',
+  description:
+    'Every state a single Step can land in, each shown as one Step in its own Stepper. Completed, current, and upcoming are derived by comparing the step index against the parent activeStep, so they are never set directly; isDisabled and status are the two a step declares itself. Status is a separate axis from progress, which is why a completed step can still carry a warning.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: ['Stepper', 'Step', 'Text'],
+};

package/assets/templates/blocks/components/Step/StepStates.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {Text} from '@astryxdesign/core/Text';
+
+export default function StepStates() {
+  // A Step holds no state of its own — it compares its `step` index against the
+  // Stepper's `activeStep`. Each state below is therefore one Step in its own
+  // Stepper, with activeStep placed on one side of it or the other.
+  return (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 32}}>
+      <div style={{width: 220}}>
+        <Text type="label">Completed</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Current</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={0} label="Verify email" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Upcoming</Text>
+        <Stepper activeStep={0} orientation="vertical">
+          <Step step={1} label="Add a payment method" />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Disabled</Text>
+        <Stepper activeStep={0} orientation="vertical" onStepClick={() => {}}>
+          <Step step={1} label="Add a payment method" isDisabled />
+        </Stepper>
+      </div>
+      <div style={{width: 220}}>
+        <Text type="label">Completed, with a status</Text>
+        <Stepper activeStep={1} orientation="vertical">
+          <Step step={0} label="Verify email" status="warning" />
+        </Stepper>
+      </div>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperCustomContent.doc.mjs

@@ -0,0 +1,22 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Stepper',
+  name: 'Stepper — Custom Content',
+  displayName: 'Stepper — Custom Content',
+  description:
+    'A vertical stepper where each step owns a slice of the page. The content slot takes any node (form fields, a summary panel, a banner), so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
+  isReady: true,
+  aspectRatio: 4 / 3,
+  componentsUsed: [
+    'Stepper',
+    'TextInput',
+    'Button',
+    'Text',
+    'Card',
+    'Badge',
+    'Banner',
+  ],
+};

package/assets/templates/blocks/components/Stepper/StepperCustomContent.tsx

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+import {TextInput} from '@astryxdesign/core/TextInput';
+import {Button} from '@astryxdesign/core/Button';
+import {Text} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {Badge} from '@astryxdesign/core/Badge';
+import {Banner} from '@astryxdesign/core/Banner';
+
+export default function StepperCustomContent() {
+  const [active, setActive] = useState(0);
+  // The content slot takes any node, not just form fields — a panel, a summary,
+  // a notice. Gating it on `active` is what makes the flow expand a step at a
+  // time.
+  return (
+    <div style={{width: 680}}>
+      <Stepper
+        activeStep={active}
+        orientation="vertical"
+        onStepClick={setActive}>
+        <Step
+          step={0}
+          label="Project details"
+          description="Name it and point us at the source"
+          indicator="number">
+          {active === 0 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <div style={{display: 'flex', gap: 12}}>
+                <TextInput
+                  label="Project name"
+                  placeholder="My awesome project"
+                  value=""
+                  width="100%"
+                />
+                <TextInput
+                  label="Repository URL"
+                  placeholder="https://github.com/..."
+                  value=""
+                  width="100%"
+                />
+              </div>
+              <div>
+                <Button
+                  label="Continue"
+                  variant="primary"
+                  onClick={() => setActive(1)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={1}
+          label="Review the build"
+          description="What we detected from your default branch"
+          indicator="number">
+          {active === 1 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Card variant="muted" padding={3}>
+                <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                    }}>
+                    <Text type="label">Next.js 15</Text>
+                    <Badge variant="success" label="Detected" />
+                  </div>
+                  <Text type="supporting">
+                    Build command <code>next build</code> · Output{' '}
+                    <code>.next</code> · Node 20
+                  </Text>
+                </div>
+              </Card>
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(0)}
+                />
+                <Button
+                  label="Looks right"
+                  variant="primary"
+                  onClick={() => setActive(2)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step
+          step={2}
+          label="Deploy"
+          description="Ships to production"
+          indicator="number">
+          {active === 2 && (
+            <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
+              <Banner
+                status="info"
+                title="First deploy takes a few minutes"
+                description="Later deploys reuse the build cache and finish in under a minute."
+              />
+              <div style={{display: 'flex', gap: 8}}>
+                <Button
+                  label="Back"
+                  variant="secondary"
+                  onClick={() => setActive(1)}
+                />
+                <Button
+                  label="Deploy now"
+                  variant="primary"
+                  onClick={() => setActive(3)}
+                />
+              </div>
+            </div>
+          )}
+        </Step>
+        <Step step={3} label="Live" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Indicator Modes',
   displayName: 'Stepper — Indicator Modes',
   description:
-    'The indicator prop side by side: auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.',
+    'The indicator prop side by side: none (the bar and label carry the progress on their own), auto (check when done, ring when current, number ahead), always-number, and a custom icon per step.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Stepper', 'Text', 'Icon'],

package/assets/templates/blocks/components/Stepper/StepperIndicatorModes.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 import {Text} from '@astryxdesign/core/Text';
 import {Icon} from '@astryxdesign/core/Icon';
 
@@ -11,6 +11,18 @@ export default function StepperIndicatorModes() {
   const [active, setActive] = useState(2);
   return (
     <div style={{display: 'flex', gap: 48, flexWrap: 'wrap'}}>
+      <div style={{maxWidth: 220}}>
+        <Text type="label">None</Text>
+        <Stepper
+          activeStep={active}
+          orientation="vertical"
+          onStepClick={setActive}>
+          <Step step={0} label="Account" indicator="none" />
+          <Step step={1} label="Profile" indicator="none" />
+          <Step step={2} label="Settings" indicator="none" />
+          <Step step={3} label="Review" indicator="none" />
+        </Stepper>
+      </div>
       <div style={{maxWidth: 220}}>
         <Text type="label">Auto</Text>
         <Stepper
@@ -44,22 +56,22 @@ export default function StepperIndicatorModes() {
           <Step
             step={0}
             label="Account"
-            icon={<Icon icon="info" size="sm" />}
+            indicator={<Icon icon="info" size="sm" />}
           />
           <Step
             step={1}
             label="Profile"
-            icon={<Icon icon="search" size="sm" />}
+            indicator={<Icon icon="search" size="sm" />}
           />
           <Step
             step={2}
             label="Settings"
-            icon={<Icon icon="wrench" size="sm" />}
+            indicator={<Icon icon="wrench" size="sm" />}
           />
           <Step
             step={3}
             label="Review"
-            icon={<Icon icon="check" size="sm" />}
+            indicator={<Icon icon="check" size="sm" />}
           />
         </Stepper>
       </div>

package/assets/templates/blocks/components/Stepper/StepperOnTrackHorizontal.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Stepper',
+  name: 'Stepper — On-Track Horizontal',
+  displayName: 'Stepper — On-Track Horizontal',
+  description:
+    'The on-track layout in horizontal orientation: instead of sitting beside the label, each indicator is slotted into the connector itself, so the numbered nodes read as beads on one continuous line. Labels center under their node.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Stepper'],
+};

package/assets/templates/blocks/components/Stepper/StepperOnTrackHorizontal.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
+
+export default function StepperOnTrackHorizontal() {
+  const [active, setActive] = useState(2);
+  return (
+    <div style={{width: 560}}>
+      <Stepper
+        activeStep={active}
+        orientation="horizontal"
+        indicatorPosition="on-track"
+        onStepClick={setActive}>
+        <Step step={0} label="Workspace" indicator="number" />
+        <Step step={1} label="Team" indicator="number" />
+        <Step step={2} label="Integrations" indicator="number" />
+        <Step step={3} label="Import" indicator="number" />
+        <Step step={4} label="Launch" indicator="number" />
+      </Stepper>
+    </div>
+  );
+}

package/assets/templates/blocks/components/Stepper/StepperOnTrackVertical.doc.mjs

@@ -7,8 +7,8 @@ export const doc = {
   name: 'Stepper — On-Track Vertical',
   displayName: 'Stepper — On-Track Vertical',
   description:
-    'The on-track layout in vertical orientation: indicators sit inline on a continuous connector rail, with each label and description beside its node.',
+    'The on-track layout in vertical orientation: indicators sit inline on a continuous connector rail, with each label and description beside its node. Compare with the separated layout, where the indicator sits alongside its own bar segment instead of on a shared rail.',
   isReady: true,
   aspectRatio: 4 / 3,
-  componentsUsed: ['Stepper'],
+  componentsUsed: ['Stepper', 'Step'],
 };

package/assets/templates/blocks/components/Stepper/StepperOnTrackVertical.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperOnTrackVertical() {
   const [active, setActive] = useState(2);

package/assets/templates/blocks/components/Stepper/StepperShowcase.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Checkout Progress',
   displayName: 'Stepper — Checkout Progress',
   description:
-    'A horizontal on-track stepper for a checkout flow: numbered nodes sit on a continuous connector, with completed and current steps filled. Click any step to jump.',
+    'The default stepper: a horizontal track where every step owns an equal segment of the progress bar above its label. The default auto indicator resolves itself per step: a check once the step is done, a ring on the current step, a number for the ones still ahead. Click any step to jump.',
   isReady: true,
   isShowcase: true,
   aspectRatio: 16 / 9,

package/assets/templates/blocks/components/Stepper/StepperShowcase.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperShowcase() {
   const [active, setActive] = useState(2);
@@ -12,13 +12,12 @@ export default function StepperShowcase() {
       <Stepper
         activeStep={active}
         orientation="horizontal"
-        indicatorPosition="on-track"
         onStepClick={setActive}>
-        <Step step={0} label="Cart" indicator="number" />
-        <Step step={1} label="Shipping" indicator="number" />
-        <Step step={2} label="Payment" indicator="number" />
-        <Step step={3} label="Review" indicator="number" />
-        <Step step={4} label="Confirm" indicator="number" />
+        <Step step={0} label="Cart" />
+        <Step step={1} label="Shipping" />
+        <Step step={2} label="Payment" />
+        <Step step={3} label="Review" />
+        <Step step={4} label="Confirm" />
       </Stepper>
     </div>
   );

package/assets/templates/blocks/components/Stepper/StepperStatus.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import {useState} from 'react';
-import {Stepper, Step} from '@astryxdesign/lab';
+import {Stepper, Step} from '@astryxdesign/core/Stepper';
 
 export default function StepperStatus() {
   const [active, setActive] = useState(3);

package/assets/templates/pages/dashboard-cohort-funnel/page.tsx

@@ -79,7 +79,7 @@ const COLORS = {
   green: 'var(--color-data-categorical-green, #0B991F)',
   orange: 'var(--color-data-categorical-orange, #EB6E00)',
   purple: 'var(--color-data-categorical-purple, #6B1EFD)',
-  teal: 'var(--color-data-categorical-teal, #008E80)',
+  teal: 'var(--color-data-categorical-teal, #08A3A3)',
 };
 const GRID_STROKE = 'var(--color-border, rgba(5, 54, 89, 0.1))';
 const AXIS_TICK = {

package/assets/templates/pages/dashboard-data/page.tsx

@@ -98,7 +98,7 @@ const COLORS = {
   green: 'var(--color-data-categorical-green, #0B991F)',
   orange: 'var(--color-data-categorical-orange, #EB6E00)',
   purple: 'var(--color-data-categorical-purple, #6B1EFD)',
-  teal: 'var(--color-data-categorical-teal, #008E80)',
+  teal: 'var(--color-data-categorical-teal, #08A3A3)',
   neutral: 'var(--color-data-neutral, #8494A3)',
 };
 const GRID_STROKE = 'var(--color-border, rgba(5, 54, 89, 0.1))';

package/assets/templates/pages/dashboard-portfolio/page.tsx

@@ -370,12 +370,12 @@ function PortfolioChart() {
           <linearGradient id="portfolioGradient" x1="0" y1="0" x2="0" y2="1">
             <stop
               offset="5%"
-              stopColor="var(--color-data-categorical-green, #22c55e)"
+              stopColor="var(--color-data-categorical-green, #0B991F)"
               stopOpacity={0.3}
             />
             <stop
               offset="95%"
-              stopColor="var(--color-data-categorical-green, #22c55e)"
+              stopColor="var(--color-data-categorical-green, #0B991F)"
               stopOpacity={0.05}
             />
           </linearGradient>
@@ -417,7 +417,7 @@ function PortfolioChart() {
         <Area
           type="linear"
           dataKey="value"
-          stroke="var(--color-data-categorical-green, #22c55e)"
+          stroke="var(--color-data-categorical-green, #0B991F)"
           strokeWidth={1.5}
           fill="url(#portfolioGradient)"
           dot={false}
@@ -434,7 +434,7 @@ function Sparkline({data, positive}: {data: number[]; positive: boolean}) {
   const chartData = data.map((v, i) => ({i, v}));
   const color = positive
     ? 'var(--color-data-categorical-green, #0B991F)'
-    : 'var(--color-data-categorical-red, #E5484D)';
+    : 'var(--color-data-categorical-red, #F5394F)';
   return (
     <ResponsiveContainer width="100%" height={40}>
       <LineChart
@@ -503,7 +503,7 @@ function TrendSparkline({data, positive}: {data: number[]; positive: boolean}) {
   const chartData = data.map((v, i) => ({i, v}));
   const color = positive
     ? 'var(--color-data-categorical-green, #0B991F)'
-    : 'var(--color-data-categorical-red, #E5484D)';
+    : 'var(--color-data-categorical-red, #F5394F)';
   return (
     <ResponsiveContainer width="100%" height={24}>
       <LineChart

package/assets/templates/pages/dashboard-service-monitoring/page.tsx

@@ -727,7 +727,7 @@ interface ChartLine {
 const BLUE = 'var(--color-data-categorical-blue, #0171E3)';
 const ORANGE = 'var(--color-data-categorical-orange, #EB6E00)';
 const PURPLE = 'var(--color-data-categorical-purple, #6B1EFD)';
-const TEAL = 'var(--color-data-categorical-teal, #008E80)';
+const TEAL = 'var(--color-data-categorical-teal, #08A3A3)';
 
 const LATENCY_LINES: ChartLine[] = [
   {key: 'p50', name: 'p50', color: BLUE},