feat: higher constrast low contrast

packages/website-ue/src/components/Text/index.css

@@ -1,5 +1,10 @@
 .text {
   font-size: var(--font-size-regular);
+  color: var(--gray-12);
+
+  &[data-low-contrast="true"] {
+    color: var(--white-a9);
+  }
 
   &[data-size="minor"] {
     font-size: var(--font-size-minor);

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

@@ -1,10 +1,8 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
-import type { Color } from "../../core/ui/color";
 import "./index.css";
 
 export interface TextProps extends ComponentProps<"span"> {
-  color?: Color | "accent";
   weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
   size?: "regular" | "minor" | "major";
@@ -12,7 +10,6 @@ export interface TextProps extends ComponentProps<"span"> {
 }
 
 export function Text({
-  color = "gray",
   lowContrast,
   className,
   size = "regular",
@@ -24,7 +21,7 @@ export function Text({
   return (
     <span
       className={classNames("text", className)}
-      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})`, ...style }}
+      data-low-contrast={lowContrast}
       data-size={size}
       data-weight={weight}
       data-align={align === "left" ? undefined : align}

packages/website-ue/src/core/tools/tools.ts

@@ -52,13 +52,6 @@ export const tools: Record<string, Tool> = {
     banner_background_position: "bottom",
   },
 
-  api: {
-    id: "api",
-
-    accent: "brown",
-    banner_background_position: "bottom",
-  },
-
   playlist: {
     id: "playlist",
 
@@ -86,4 +79,11 @@ export const tools: Record<string, Tool> = {
     accent: "blue",
     banner_background_position: "bottom",
   },
+
+  api: {
+    id: "api",
+
+    accent: "brown",
+    banner_background_position: "bottom",
+  },
 };