fix(ui): use BrowserCode v2 wordmark

Author: Alezander9

packages/ui/src/v2/components/wordmark-v2.tsx

@@ -1,74 +1,98 @@
 import { createUniqueId, type ComponentProps } from "solid-js"
 
+const CELL = 12
+const HALF = CELL / 2
+const LEFT = [
+  "▄                                 ",
+  "█▀▀█ █▀▀▄ █▀▀█ █  █ █▀▀▀ █▀▀█ █▀▀▄",
+  "█__█ █___ █__█ █▐▌█ ^^^█ █^^^ █___",
+  "▀▀▀▀ ▀~~~ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀~~~",
+]
+const RIGHT = ["             ▄     ", "█▀▀▀ █▀▀█ █▀▀█ █▀▀█", "█___ █__█ █__█ █^^^", "▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀▀"]
+const GAP = 1
+
+type Rect = {
+  x: number
+  y: number
+  width: number
+  height: number
+  fill: "fill" | "weak" | "shadow"
+}
+
+function rects(rows: string[], offset: number): Rect[] {
+  return rows.flatMap((row, y) =>
+    [...row].flatMap((char, x): Rect[] => {
+      const cell = { x: (offset + x) * CELL, y: y * CELL }
+      if (char === "█") return [{ ...cell, width: CELL, height: CELL, fill: "fill" as const }]
+      if (char === "▀") return [{ ...cell, width: CELL, height: HALF, fill: "fill" as const }]
+      if (char === "▄") return [{ ...cell, y: cell.y + HALF, width: CELL, height: HALF, fill: "fill" as const }]
+      if (char === "▐") return [{ ...cell, x: cell.x + HALF, width: HALF, height: CELL, fill: "fill" as const }]
+      if (char === "_") return [{ ...cell, width: CELL, height: CELL, fill: "weak" as const }]
+      if (char === "^") {
+        return [
+          { ...cell, width: CELL, height: CELL, fill: "weak" as const },
+          { ...cell, width: CELL, height: HALF, fill: "fill" as const },
+        ]
+      }
+      if (char === "~") return [{ ...cell, width: CELL, height: HALF, fill: "shadow" as const }]
+      return []
+    }),
+  )
+}
+
 export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
   const filter = createUniqueId()
   const mask = createUniqueId()
   const maskGradient = createUniqueId()
+  const left = rects(LEFT, 0)
+  const right = rects(RIGHT, LEFT[1].length + GAP)
+  const width = (LEFT[1].length + GAP + RIGHT[1].length) * CELL
+  const height = LEFT.length * CELL
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 720.002 129.001"
+      viewBox={`0 0 ${width} ${height}`}
       fill="none"
       preserveAspectRatio="none"
       classList={{ [props.class ?? ""]: !!props.class }}
     >
       <g opacity="0.16" filter={`url(#${filter})`} mask={`url(#${mask})`}>
-        <path
-          opacity="0.7"
-          d="M55.3846 36.8583H18.4615V92.144H55.3846V36.8583ZM73.8462 110.573H0V18.4297H73.8462V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M110.774 92.144H147.697V36.8583H110.774V92.144ZM166.159 110.573H110.774V129.001H92.3125V18.4297H166.159V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M258.463 73.7154H203.079V92.144H258.463V110.573H184.617V18.4297H258.463V73.7154ZM203.079 55.2868H240.002V36.8583H203.079V55.2868Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M332.306 36.8583H295.383V110.573H276.922V18.4297H332.306V36.8583ZM350.768 110.573H332.306V36.8583H350.768V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M443.081 36.8583H387.696V92.144H443.081V110.573H369.234V18.4297H443.081V36.8583Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M516.924 36.8583H480.001V92.144H516.924V36.8583ZM535.385 110.573H461.539V18.4297H535.385V110.573Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M609.228 36.8571H572.305V92.1429H609.228V36.8571ZM627.69 110.571H553.844V18.4286H609.228V0H627.69V110.571Z"
-          fill="currentColor"
-        />
-        <path
-          opacity="0.7"
-          d="M664.618 36.8583V55.2868H701.541V36.8583H664.618ZM720.002 73.7154H664.618V92.144H720.002V110.573H646.156V18.4297H720.002V73.7154Z"
-          fill="currentColor"
-        />
+        {left.map((rect) => (
+          <rect
+            x={rect.x}
+            y={rect.y}
+            width={rect.width}
+            height={rect.height}
+            fill={rect.fill === "fill" ? "var(--v2-icon-icon-muted)" : "currentColor"}
+            opacity={rect.fill === "fill" ? 0.72 : rect.fill === "weak" ? 0.2 : 0.12}
+          />
+        ))}
+        {right.map((rect) => (
+          <rect
+            x={rect.x}
+            y={rect.y}
+            width={rect.width}
+            height={rect.height}
+            fill="currentColor"
+            opacity={rect.fill === "fill" ? 0.72 : rect.fill === "weak" ? 0.2 : 0.12}
+          />
+        ))}
       </g>
       <defs>
-        <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
-          <rect width="720" height="129" fill={`url(#${maskGradient})`} />
+        <mask id={mask} maskUnits="userSpaceOnUse" x="0" y="0" width={width} height={height}>
+          <rect width={width} height={height} fill={`url(#${maskGradient})`} />
         </mask>
-        <linearGradient id={maskGradient} x1="360" y1="0" x2="360" y2="112" gradientUnits="userSpaceOnUse">
+        <linearGradient id={maskGradient} x1={width / 2} y1="0" x2={width / 2} y2={height} gradientUnits="userSpaceOnUse">
           <stop stop-color="white" stop-opacity="0.7" />
           <stop offset="1" stop-color="white" stop-opacity="0" />
         </linearGradient>
         <filter
           id={filter}
           x="0"
           y="0"
-          width="720.002"
-          height="130.001"
+          width={width}
+          height={height}
           filterUnits="userSpaceOnUse"
           color-interpolation-filters="sRGB"
         >