Skip to content

fix(ui): use BrowserCode v2 wordmark #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Alezander9 wants to merge 1 commit into from
Closed

fix(ui): use BrowserCode v2 wordmark #97

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 70 additions & 46 deletions packages/ui/src/v2/components/wordmark-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}

@cubic-dev-ai cubic-dev-ai Bot Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2: Left wordmark color logic is inconsistent with the muted-BROWSER requirement. Weak/shadow pixels in BROWSER currently render as currentColor.

Prompt for AI agents 
Check if this issue is valid — if so, understand the root cause and fix it. At packages/ui/src/v2/components/wordmark-v2.tsx, line 67:

<comment>Left wordmark color logic is inconsistent with the muted-BROWSER requirement. Weak/shadow pixels in BROWSER currently render as currentColor.</comment>

<file context>
@@ -1,74 +1,98 @@
+            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}
+          />
</file context>
Suggested change
fill={rect.fill === "fill" ? "var(--v2-icon-icon-muted)" : "currentColor"}
fill="var(--v2-icon-icon-muted)"
Fix with cubic

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"
>
Expand Down
Loading