From fcfbf166ff0e4c657c381e5f2226db6e4dd42f8d Mon Sep 17 00:00:00 2001 From: Daniel Han Date: Tue, 9 Jun 2026 23:44:24 -0700 Subject: [PATCH] studio(ui): use the --primary brand token for the avatar fallback color (#5987) * 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 * 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 --------- Co-authored-by: Claude Opus 4.8 --- .../features/profile/utils/avatar-initials.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/studio/frontend/src/features/profile/utils/avatar-initials.ts b/studio/frontend/src/features/profile/utils/avatar-initials.ts index 254a50719b..2683b52a37 100644 --- a/studio/frontend/src/features/profile/utils/avatar-initials.ts +++ b/studio/frontend/src/features/profile/utils/avatar-initials.ts @@ -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)" }; }