@hanzo/dashboard 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/dashboard",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "description": "Hanzo Dashboard — the reusable dashboard layer on @hanzo/gui: monochrome SVG charts, a videogame-like LivingOverview (count-up KPIs, live sparklines, streaming feed, health), the ProductLanding kit, and a Pipeline deploy animation. Pure (data via props/loaders), typed, reduced-motion-guarded. Extracted from the Hanzo Cloud Console so every Hanzo app composes ONE dashboard system.",
   "exports": {

package/src/charts/Charts.tsx

@@ -24,13 +24,13 @@ import { Text, XStack, YStack, useTheme } from '@hanzo/gui'
 
 /** Distinct hues for categorical series (e.g. spend-by-model donut), dark-tuned. */
 export const CHART_PALETTE = [
-  '#7c5cff',
+  '#e4e4e7',
   '#23c562',
   '#ff9f45',
   '#3aa0ff',
   '#ff5d8f',
   '#16c0c8',
-  '#c084fc',
+  '#a1a1aa',
   '#f4c245',
 ]
 export const CHART_OTHER = '#64748b'

package/src/landing/Hero.tsx

@@ -96,7 +96,7 @@ function HeroGraphic({ size = 170, accent = CHART_PALETTE[0] }: { size?: number;
           <stop offset="100%" stopColor={accent} stopOpacity="0" />
         </radialGradient>
         <linearGradient id="hz-hero-cube" x1="0" y1="0" x2="1" y2="1">
-          <stop offset="0%" stopColor="#a78bfa" />
+          <stop offset="0%" stopColor="#e4e4e7" />
           <stop offset="100%" stopColor={accent} />
         </linearGradient>
       </defs>
@@ -106,9 +106,9 @@ function HeroGraphic({ size = 170, accent = CHART_PALETTE[0] }: { size?: number;
       ))}
       <g transform="translate(100 96)">
         <polygon points="0,-34 30,-17 30,17 0,34 -30,17 -30,-17" fill="url(#hz-hero-cube)" fillOpacity="0.9" />
-        <polygon points="0,-34 30,-17 0,0 -30,-17" fill="#c4b5fd" fillOpacity="0.85" />
+        <polygon points="0,-34 30,-17 0,0 -30,-17" fill="#f4f4f5" fillOpacity="0.85" />
         <polygon points="0,0 30,-17 30,17 0,34" fill={accent} fillOpacity="0.7" />
-        <polygon points="0,0 -30,-17 -30,17 0,34" fill="#6d28d9" fillOpacity="0.7" />
+        <polygon points="0,0 -30,-17 -30,17 0,34" fill="#52525b" fillOpacity="0.7" />
       </g>
     </svg>
   )

package/src/pipeline/Pipeline.tsx

@@ -16,7 +16,7 @@ import { useReducedMotion } from '../motion/hooks'
 import type { PipelineStage, StageState } from './stages'
 import { Text, XStack, YStack } from '@hanzo/gui'
 
-const ACCENT = '#7c5cff'
+const ACCENT = '#e4e4e7'
 const GREEN = '#23c562'
 const RED = '#ff5d8f'
 const MUTED = 'rgba(148,163,184,0.28)'
@@ -26,7 +26,7 @@ export interface PipelineProps {
   stages: PipelineStage[]
   /** A short status label shown above the track (e.g. `pipelineModel(...).label`). */
   label?: string
-  /** Accent tone for the filled track + active stage. Defaults by state (green live / red error / purple). */
+  /** Accent tone for the filled track + active stage. Defaults by state (green live / red error / ink). */
   tone?: string
   /** Animate the active leg + pulse. Default true; reduced motion still forces static. */
   animate?: boolean

package/src/pipeline/stages.ts

@@ -151,6 +151,6 @@ export function pipelineModel(status?: string | null, furthestReached = -1): Pip
 }
 
 /** The accent tone for a model: red on failure, green on live, else the accent. */
-export function pipelineTone(model: Pick<PipelineModel, 'live' | 'errored'>, accent = '#7c5cff'): string {
+export function pipelineTone(model: Pick<PipelineModel, 'live' | 'errored'>, accent = '#e4e4e7'): string {
   return model.errored ? '#ff5d8f' : model.live ? '#23c562' : accent
 }