feat: some work on footer

packages/website-ue/src/components/Link/index.module.css

@@ -1,7 +1,10 @@
 .link {
-  color: var(--accent-11);
   text-decoration-color: currentColor;
 
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+
   &[data-underline="hover"],
   &[data-underline="never"] {
     text-decoration: none;
@@ -12,10 +15,6 @@
     text-decoration: underline;
   }
 
-  &[data-high-contrast="true"] {
-    color: var(--accent-12);
-  }
-
   svg {
     width: 1.25em;
     height: 1.25em;

packages/website-ue/src/components/Link/index.tsx

@@ -1,21 +1,29 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import "./index.css";
+import type { Color } from "../../core/ui/color";
+import styles from "./index.module.css";
 
 export interface LinkProps extends ComponentProps<"a"> {
   underline?: "always" | "hover" | "never";
   highContrast?: boolean;
+  color?: Color | "accent";
 }
 
 export function Link({
   highContrast,
   className,
   underline = "always",
+  color = "accent",
+  style,
   ...props
 }: LinkProps) {
   return (
     <a
-      className={classNames("link", className)}
+      className={classNames(styles.link, className)}
+      style={{
+        color: `var(--${color}-${highContrast ? 12 : 11})`,
+        ...style,
+      }}
       {...props}
       data-underline={underline}
       data-high-contrast={highContrast}