RocketChat / RocketChat/Rocket.Chat

[Bug] Console warning "invalid color: transparent" on Home Page Header

Open
#38,577 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
46.1k
Forks
13.9k
Avg merge
3d 3h
Merged PRs (30d)
130

Description

Description:

The Home page header throws an invalid color: transparent error in the browser console. This occurs because the PageHeader component passes the string 'transparent' to the borderBlockEndColor prop, which is not a valid color token in the Fuselage design system.

Steps to reproduce:
  1. Log in as any user.
  2. Navigate to the Home page (/home).
  3. Open Developer Tools (F12) -> Console tab.
  4. Reload the page.
  5. Observe the red warning in the console.
Expected behavior:

The Home page should load without any console warnings regarding invalid color tokens. The border should simply not render if no color is specified (or if undefined is passed).

Actual behavior:

The console displays the following error:
invalid color: transparent Error

Image
Server Setup Information:
  • Version of Rocket.Chat Server: Latest develop branch
  • License Type: Community
  • Number of Users: 1 (Local Dev)
  • Operating System: Linux (Arch)
  • Deployment Method: Source (yarn dsv)
  • Number of Running Instances: 1
  • DB Replicaset Oplog: Enabled
  • NodeJS Version: v22.16.0
  • MongoDB Version: v8.2.4
Client Setup Information
  • Desktop App or Browser Version: Chrome Latest
  • Operating System: Linux (Arch)
Additional context

The issue stems from packages/ui-client/src/components/Page/PageHeader.tsx passing a raw CSS value ('transparent') instead of a valid Fuselage token or undefined.

Relevant logs:
invalid color: transparent Error
    at http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20761:49
    at memoized (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:21600:25)
    at http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20722:30
    at memoized (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:21600:25)
    at toStyle.toStyle (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9909:34)
    at extractStylingProps (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9943:9)
    at useStylingProps (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9970:68)
    at Box (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:9532:76)
    at renderWithHooks (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:64240:18)
    at updateForwardRef (http://localhost:3000/packages/modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:67999:20)
(anonymous) @ modules.js?hash=c827bad9dfa649a7ebcd452ceceac80a7cb79522:20761

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with packages/ui-client/src/components/Page/PageHeader.tsx and inspect the borderBlockEndColor value passed to the Fuselage component. Verify the Home page at /home in the browser console after the change; done means the invalid color warning no longer appears and the border behavior remains correct when no color is specified.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.