website refactor

apps/website/ui/MiniStat.tsx

@@ -2,17 +2,21 @@ import React from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 
-interface MiniStatProps {
+export interface MiniStatProps {
   label: string;
   value: string | number;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
 }
 
-export function MiniStat({ label, value, color = 'text-white' }: MiniStatProps) {
+export const MiniStat = ({ 
+  label, 
+  value, 
+  intent = 'high' 
+}: MiniStatProps) => {
   return (
-    <Box textAlign="center" p={2} rounded="lg" bg="bg-charcoal-outline/30">
-      <Text size="lg" weight="bold" color={color} block>{value}</Text>
-      <Text size="xs" color="text-gray-500" block style={{ fontSize: '10px' }}>{label}</Text>
+    <Box textAlign="center" padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+      <Text size="lg" weight="bold" variant={intent} block>{value}</Text>
+      <Text size="xs" variant="low" block style={{ fontSize: '10px' }}>{label}</Text>
     </Box>
   );
-}
+};