style(ui): remove border tells from game surfaces by matthewevans · Pull Request #5316 · phase-rs/phase

matthewevans · 2026-07-07T19:32:05Z

No description provided.

gemini-code-assist

Code Review

This pull request refines the client's visual design system by standardizing border radii, adjusting background opacities, and updating shadows across numerous UI components, alongside removing the pending decision indicator from HUD plates. The review feedback consistently points out that several of these changes introduce hardcoded pixel values for border radii (such as 8px, 7px, and 10px) instead of utilizing semantic design system tokens (like rounded-card, rounded-control, rounded-row, or rounded-badge-lg), which bypasses the Tailwind v4 theme configuration and reduces maintainability.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-07-07T19:36:59Z

+  --radius-card: 10px;
+  --radius-panel: 14px;
+  --radius-row: 12px;
+  --radius-chip: 10px;
+  --radius-tile: 10px;
  --radius-badge: 6px;


[MED] Missing semantic design system tokens for new radii. Evidence: client/src/index.css:70-75.
Why it matters: Hardcoding raw pixel values (8px, 7px) across dozens of UI components bypasses the Tailwind v4 @theme configuration, making future design system updates extremely difficult.
Suggested fix: Define semantic tokens like --radius-control: 8px; and --radius-badge-lg: 7px; in the theme configuration.

--radius-card: 10px; --radius-panel: 14px; --radius-row: 12px; --radius-chip: 10px; --radius-tile: 10px; --radius-badge: 6px; --radius-control: 8px; --radius-badge-lg: 7px;

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

gemini-code-assist · 2026-07-07T19:36:59Z

      whileHover={disabled ? undefined : "hover"}
-      className={`group relative flex flex-col gap-2 rounded-card border p-[7px] text-left transition-all duration-200 surface-card hover:-translate-y-[3px] ${
-        disabled ? "cursor-not-allowed opacity-50" : `cursor-pointer ${t.border} hover:border-hairline-hover ${t.glowShadow}`
+      className={`group relative flex flex-col gap-2 rounded-[10px] border p-[7px] text-left transition-colors duration-150 surface-card ${


[MED] Bypassing semantic design system tokens with hardcoded radius. Evidence: client/src/components/menu/MenuActionTile.tsx:91.
Why it matters: Replacing the semantic rounded-card token with a hardcoded rounded-[10px] breaks design system consistency and maintainability.
Suggested fix: Revert to using the semantic rounded-card token.

Suggested change

className={`group relative flex flex-col gap-2 rounded-[10px] border p-[7px] text-left transition-colors duration-150 surface-card ${

className={`group relative flex flex-col gap-2 rounded-card border p-[7px] text-left transition-colors duration-150 surface-card ${

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

gemini-code-assist · 2026-07-07T19:36:59Z

          {title}
        </span>
-        <span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-full border-[1.5px] bg-black/40 ${t.token}`}>
+        <span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border-[1.5px] bg-black/40 ${t.token}`}>


[MED] Hardcoded border radius instead of semantic token. Evidence: client/src/components/menu/MenuActionTile.tsx:99.
Why it matters: Hardcoding rounded-[8px] instead of using the newly defined rounded-control token bypasses the Tailwind v4 theme configuration.
Suggested fix: Use the semantic rounded-control token.

Suggested change

<span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border-[1.5px] bg-black/40 ${t.token}`}>

<span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-control border-[1.5px] bg-black/40 ${t.token}`}>

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

gemini-code-assist · 2026-07-07T19:36:59Z

+      <div className="absolute inset-0 bg-black/68" />
      <motion.div
-        className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-[22px] border border-white/10 bg-[#0b1020]/94 shadow-[0_28px_70px_rgba(0,0,0,0.5)] backdrop-blur-md"
+        className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-[12px] border border-white/10 bg-[#0b1020] shadow-[0_18px_48px_rgba(0,0,0,0.48)]"


[MED] Hardcoded border radius instead of semantic token. Evidence: client/src/components/modal/CardChoiceModal.tsx:2672.
Why it matters: Hardcoding rounded-[12px] instead of using the pre-existing rounded-row token (which is defined as 12px) bypasses the Tailwind v4 theme configuration.
Suggested fix: Use the semantic rounded-row token.

Suggested change

className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-[12px] border border-white/10 bg-[#0b1020] shadow-[0_18px_48px_rgba(0,0,0,0.48)]"

className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-row border border-white/10 bg-[#0b1020] shadow-[0_18px_48px_rgba(0,0,0,0.48)]"

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

gemini-code-assist · 2026-07-07T19:36:59Z

+  xs: "px-2.5 py-1 text-xs rounded-[7px]",
+  sm: "px-3.5 py-2 text-sm rounded-[8px]",
+  md: "px-3.5 py-2 text-[11px] rounded-[9px] lg:px-4 lg:text-xs",
+  lg: "px-6 py-3 text-base rounded-[10px]",


[MED] Hardcoded border radii instead of semantic tokens. Evidence: client/src/components/ui/buttonStyles.ts:23-26.
Why it matters: Hardcoding raw pixel values (7px, 8px, 10px) for button sizes bypasses the Tailwind v4 theme configuration and breaks design system consistency.
Suggested fix: Use the semantic rounded-badge-lg, rounded-control, and rounded-card tokens.

Suggested change

xs: "px-2.5 py-1 text-xs rounded-[7px]",

sm: "px-3.5 py-2 text-sm rounded-[8px]",

md: "px-3.5 py-2 text-[11px] rounded-[9px] lg:px-4 lg:text-xs",

lg: "px-6 py-3 text-base rounded-[10px]",

xs: "px-2.5 py-1 text-xs rounded-badge-lg",

sm: "px-3.5 py-2 text-sm rounded-control",

md: "px-3.5 py-2 text-[11px] rounded-[9px] lg:px-4 lg:text-xs",

lg: "px-6 py-3 text-base rounded-card",

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

gemini-code-assist · 2026-07-07T19:36:59Z

              to={path}
              aria-current={on ? "page" : undefined}
-              className={`group relative flex flex-col items-center gap-1.5 rounded-[14px] px-1 py-[11px] transition-colors duration-150 [@media(max-height:540px)]:gap-0.5 [@media(max-height:540px)]:py-1.5 ${
+              className={`group relative flex flex-col items-center gap-1.5 rounded-[8px] border px-1 py-[11px] transition-colors duration-150 [@media(max-height:540px)]:gap-0.5 [@media(max-height:540px)]:py-1.5 ${


[MED] Hardcoded border radius instead of semantic token. Evidence: client/src/components/chrome/Rail.tsx:56.
Why it matters: Hardcoding rounded-[8px] instead of using the newly defined rounded-control token bypasses the Tailwind v4 theme configuration.
Suggested fix: Use the semantic rounded-control token.

Suggested change

className={`group relative flex flex-col items-center gap-1.5 rounded-[8px] border px-1 py-[11px] transition-colors duration-150 [@media(max-height:540px)]:gap-0.5 [@media(max-height:540px)]:py-1.5 ${

className={`group relative flex flex-col items-center gap-1.5 rounded-control border px-1 py-[11px] transition-colors duration-150 [@media(max-height:540px)]:gap-0.5 [@media(max-height:540px)]:py-1.5 ${

References

The repository style guide enforces using composable building blocks and maintaining architectural idiomaticity. Hardcoding raw pixel values instead of using semantic design system tokens violates this pillar. ^(link)

style(ui): remove border tells from game surfaces

8f19d4b

matthewevans enabled auto-merge July 7, 2026 19:32

gemini-code-assist Bot reviewed Jul 7, 2026

View reviewed changes

matthewevans added this pull request to the merge queue Jul 7, 2026

Merged via the queue into main with commit b62ec55 Jul 7, 2026
13 checks passed

matthewevans deleted the ship/styleui-remove-border-tells-from-game-surfaces branch July 7, 2026 20:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

style(ui): remove border tells from game surfaces#5316

style(ui): remove border tells from game surfaces#5316
matthewevans merged 1 commit into
mainfrom
ship/styleui-remove-border-tells-from-game-surfaces

matthewevans commented Jul 7, 2026

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	className={`group relative flex flex-col gap-2 rounded-[10px] border p-[7px] text-left transition-colors duration-150 surface-card ${
	className={`group relative flex flex-col gap-2 rounded-card border p-[7px] text-left transition-colors duration-150 surface-card ${

	<span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[8px] border-[1.5px] bg-black/40 ${t.token}`}>
	<span className={`flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-control border-[1.5px] bg-black/40 ${t.token}`}>

	className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-[12px] border border-white/10 bg-[#0b1020] shadow-[0_18px_48px_rgba(0,0,0,0.48)]"
	className="card-scale-reset relative w-full max-w-[34rem] overflow-hidden rounded-row border border-white/10 bg-[#0b1020] shadow-[0_18px_48px_rgba(0,0,0,0.48)]"

Uh oh!

Uh oh!

Conversation

matthewevans commented Jul 7, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant