website refactor

apps/website/components/drivers/DriverHeaderPanel.tsx

@@ -29,10 +29,10 @@ export function DriverHeaderPanel({
 
   return (
     <Stack 
-      bg="bg-panel-gray" 
+      bg="var(--ui-color-bg-surface)" 
       rounded="xl" 
       border 
-      borderColor="border-charcoal-outline" 
+      borderColor="var(--ui-color-border-low)" 
       overflow="hidden"
       position="relative"
     >
@@ -43,12 +43,12 @@ export function DriverHeaderPanel({
         left={0} 
         right={0} 
         height="24" 
-        bg="bg-gradient-to-r from-primary-blue/20 to-transparent"
+        bg="linear-gradient(to right, rgba(25, 140, 255, 0.2), transparent)"
         opacity={0.5}
       />
 
       <Stack p={6} position="relative">
-        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align="start" className="md:items-center">
+        <Stack direction={{ base: 'col', md: 'row' }} gap={6} align={{ base: 'start', md: 'center' }}>
           {/* Avatar */}
           <Stack 
             width="32" 
@@ -56,8 +56,8 @@ export function DriverHeaderPanel({
             rounded="2xl" 
             overflow="hidden" 
             border 
-            borderColor="border-charcoal-outline" 
-            bg="bg-graphite-black" 
+            borderColor="var(--ui-color-border-low)" 
+            bg="var(--ui-color-bg-base)" 
             flexShrink={0}
           >
             <Image 
@@ -72,25 +72,25 @@ export function DriverHeaderPanel({
           <Stack flexGrow={1}>
             <Stack gap={2}>
               <Stack direction="row" align="center" gap={3} wrap>
-                <Text as="h1" size="3xl" weight="bold" color="text-white">
+                <Text as="h1" size="3xl" weight="bold" variant="high">
                   {name}
                 </Text>
                 <RatingBadge rating={rating} ratingLabel={ratingLabel} size="lg" />
               </Stack>
               
               <Stack direction="row" align="center" gap={4} wrap>
-                <Text size="sm" color="text-gray-400">
+                <Text size="sm" variant="low">
                   {nationality}
                 </Text>
                 {globalRankLabel && (
-                  <Text size="sm" color="text-gray-400">
-                    Global Rank: <Text color="text-warning-amber" weight="semibold">{globalRankLabel}</Text>
+                  <Text size="sm" variant="low">
+                    Global Rank: <Text variant="warning" weight="semibold">{globalRankLabel}</Text>
                   </Text>
                 )}
               </Stack>
 
               {bio && (
-                <Text size="sm" color="text-gray-400" className="max-w-2xl mt-2" lineClamp={2}>
+                <Text size="sm" variant="low" maxWidth="2xl" mt={2} lineClamp={2}>
                   {bio}
                 </Text>
               )}