website refactor

apps/website/ui/Text.tsx

@@ -5,7 +5,7 @@ export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'
 
 export interface TextProps extends BoxProps<any> {
   children: ReactNode;
-  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'inherit';
+  variant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'inherit';
   size?: TextSize | ResponsiveValue<TextSize>;
   weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
   as?: ElementType;
@@ -19,7 +19,7 @@ export interface TextProps extends BoxProps<any> {
   truncate?: boolean;
   lineHeight?: string | number;
   font?: 'sans' | 'mono';
-  hoverTextColor?: string;
+  hoverVariant?: 'high' | 'med' | 'low' | 'primary' | 'success' | 'warning' | 'critical';
 }
 
 export const Text = forwardRef<HTMLElement, TextProps>(({ 
@@ -38,7 +38,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
   truncate = false,
   lineHeight,
   font,
-  hoverTextColor,
+  hoverVariant,
   ...props
 }, ref) => {
   const variantClasses = {
@@ -49,8 +49,19 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     success: 'text-[var(--ui-color-intent-success)]',
     warning: 'text-[var(--ui-color-intent-warning)]',
     critical: 'text-[var(--ui-color-intent-critical)]',
+    telemetry: 'text-[var(--ui-color-intent-telemetry)]',
     inherit: 'text-inherit',
   };
+
+  const hoverVariantClasses = {
+    high: 'hover:text-[var(--ui-color-text-high)]',
+    med: 'hover:text-[var(--ui-color-text-med)]',
+    low: 'hover:text-[var(--ui-color-text-low)]',
+    primary: 'hover:text-[var(--ui-color-intent-primary)]',
+    success: 'hover:text-[var(--ui-color-intent-success)]',
+    warning: 'hover:text-[var(--ui-color-intent-warning)]',
+    critical: 'hover:text-[var(--ui-color-intent-critical)]',
+  };
   
   const sizeMap: Record<TextSize, string> = {
     xs: 'text-xs',
@@ -103,7 +114,7 @@ export const Text = forwardRef<HTMLElement, TextProps>(({
     uppercase ? 'uppercase tracking-wider' : '',
     leading ? leadingClasses[leading] : '',
     truncate ? 'truncate' : '',
-    hoverTextColor ? `hover:text-${hoverTextColor}` : '',
+    hoverVariant ? hoverVariantClasses[hoverVariant] : '',
   ].join(' ');
 
   const style: React.CSSProperties = {