ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

studio(ui): use the --primary brand token for the avatar fallback color (#5987)

Browse source 
* studio(ui): use the --primary brand token for the avatar fallback color

The fallback profile avatar hardcoded #14b789, a slightly different green
from the app's general brand color (--primary = #17b88b, used by the send
button and every other primary-colored control). Next to primary-colored UI
-- e.g. the artifact preview/code panel -- the avatar's off-brand shade looked
inconsistent ("changes color weirdly"). Point avatarBgStyle() at
var(--primary) so the avatar always renders the general brand green and
follows the theme token.

Verified live in Studio: the avatar was rgb(20,183,137) (#14b789) while
--primary resolves to rgb(23,184,139) (#17b88b); the fix unifies them. This
is the only hardcoded brand-green left in the frontend -- every other
brand-green element already uses --primary / bg-primary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* studio(ui): add literal fallback to the avatar --primary token

UserAvatar is a reusable component; if it is ever rendered outside the theme
root (where --primary is undefined), var(--primary) alone would compute to
transparent. Use var(--primary, #17b88b) so the avatar stays branded in that
edge case. When --primary is defined (the normal case, app-wide) it always
wins, so this changes nothing in practice -- verified in a browser:
var(--primary)=rgb(23,184,139), and an undefined var correctly falls back to
the literal.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Daniel Han 2026-06-09 23:44:24 -07:00 • committed by GitHub
commit fcfbf166ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

16
studio/frontend/src/features/profile/utils/avatar-initials.ts
View file

@ -7,7 +7,19 @@ export function initialsFromName(name: string): string {
return trimmed[0]!.toUpperCase();
}
/** Default Unsloth-green background for avatar fallback (readable white text). */
/**
* Default Unsloth-brand background for the avatar fallback (readable white text).
*
* Uses the shared `--primary` design token instead of a one-off hardcoded
* shade, so the avatar always matches the app's general brand green (send
* button, primary buttons, etc.). It previously hardcoded a slightly different
* `#14b789`, which looked inconsistent next to primary-colored UI such as the
* artifact preview/code panel.
*
* The literal fallback (the current `--primary` value) only applies if this
* reusable avatar is ever rendered outside the theme root, where `--primary`
* is undefined -- it keeps the avatar branded instead of transparent.
*/
export function avatarBgStyle(): { backgroundColor: string } {
return { backgroundColor: "#14b789" };
return { backgroundColor: "var(--primary, #17b88b)" };
}