website refactor

apps/website/ui/HorizontalStatCard.tsx

@@ -1,46 +1,38 @@
 import React from 'react';
+import { Card } from './Card';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface HorizontalStatCardProps {
+export interface HorizontalStatCardProps {
   label: string;
   value: string | number;
   icon: LucideIcon;
-  iconColor?: string;
-  iconBgColor?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
 }
 
-export function HorizontalStatCard({
-  label,
-  value,
-  icon,
-  iconColor = 'text-primary-blue',
-  iconBgColor = 'rgba(59, 130, 246, 0.1)',
-}: HorizontalStatCardProps) {
+export const HorizontalStatCard = ({ 
+  label, 
+  value, 
+  icon, 
+  intent = 'primary' 
+}: HorizontalStatCardProps) => {
   return (
-    <Surface variant="muted" rounded="xl" border p={4}>
-      <Stack direction="row" align="center" gap={4}>
-        <Surface 
-          variant="muted" 
-          rounded="lg" 
-          p={3} 
-          backgroundColor={iconBgColor}
-        >
-          <Icon icon={icon} size={5} color={iconColor} />
-        </Surface>
+    <Card variant="default">
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+          <Icon icon={icon} size={5} intent={intent} />
+        </Box>
         <Box>
-          <Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
+          <Text size="xs" weight="bold" variant="low" uppercase>
             {label}
           </Text>
-          <Text size="xl" weight="bold" color="text-white" block>
+          <Text size="xl" weight="bold" variant="high" block marginTop={0.5}>
             {value}
           </Text>
         </Box>
-      </Stack>
-    </Surface>
+      </Box>
+    </Card>
   );
-}
+};