migrate 1

packages/website/src/components/Text/index.module.css

@@ -0,0 +1,33 @@
+.text {
+  font-size: var(--font-size-regular);
+
+  &[data-size="minor"] {
+    font-size: var(--font-size-minor);
+  }
+  &[data-size="major"] {
+    font-size: var(--font-size-major);
+  }
+
+  &[data-weight="light"] {
+    font-weight: var(--weight-light);
+  }
+  &[data-weight="regular"] {
+    font-weight: var(--weight-regular);
+  }
+  &[data-weight="medium"] {
+    font-weight: var(--weight-medium);
+  }
+  &[data-weight="bold"] {
+    font-weight: var(--weight-bold);
+  }
+  &[data-weight="black"] {
+    font-weight: var(--weight-black);
+  }
+
+  &[data-align="center"] {
+    text-align: center;
+  }
+  &[data-align="right"] {
+    text-align: right;
+  }
+}

packages/website/src/components/Text/index.tsx

@@ -0,0 +1,45 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../ui/classNames";
+import type { ColorWithBW } from "../../ui/color";
+import styles from "./index.module.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  weight?: "light" | "regular" | "medium" | "bold" | "black";
+  lowContrast?: boolean;
+  size?: "regular" | "minor" | "major";
+  align?: "left" | "center" | "right";
+  color?: ColorWithBW;
+}
+
+export function Text({
+  lowContrast,
+  className,
+  size = "regular",
+  weight,
+  style,
+  align,
+  color = "gray",
+  ...props
+}: TextProps) {
+  const scale = color === "gray" && lowContrast ? "white" : color;
+  const isBW = color === "black" || color === "white";
+  let power: string | number = isBW ? "a12" : 12;
+
+  if (lowContrast) {
+    power = color === "gray" ? "a9" : isBW ? "a11" : 11;
+  }
+
+  return (
+    <span
+      className={classNames(styles.text, className)}
+      data-low-contrast={lowContrast}
+      data-size={size}
+      data-weight={weight}
+      data-align={align === "left" ? undefined : align}
+      style={{
+        color: `var(--${scale}-${power})`,
+      }}
+      {...props}
+    />
+  );
+}