Skip to content

fix(ui): align chrome, scrims and modal text to RBX tokens #276

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

Merged
tyreseluo merged 6 commits into from
Jul 31, 2026
Merged

fix(ui): align chrome, scrims and modal text to RBX tokens #276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1f6bb75
fix(ui): align timeline chrome to RBX tokens
tyreseluo Jul 29, 2026
0de1b19
fix(ui): unify scrims, selection and modal text with RBX tokens
tyreseluo Jul 29, 2026
15005b0
fix(ui): move sticker picker and media players onto RBX tokens
tyreseluo Jul 29, 2026
f9768d6
fix(ui): give the bot badge one look across every surface
tyreseluo Jul 29, 2026
704f9e8
fix(ui): keep styles.rs on literals — it registers before design_tokens
tyreseluo Jul 29, 2026
0206141
fix(ui): retire the bot card's private palette and align both code paths
tyreseluo Jul 29, 2026
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
50 changes: 20 additions & 30 deletions src/home/event_reaction_list.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,41 +4,26 @@ use crate::sliding_sync::{current_user_id, submit_async_request, MatrixRequest,
use indexmap::IndexMap;
use makepad_widgets::*;
use crate::{LivePtr, widget_ref_from_live_ptr};
use crate::shared::design_tokens::{
RBX_ACCENT, RBX_ACCENT_SOFT, RBX_BG_SURFACE_SUBTLE, RBX_STROKE_STRONG,
};
use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
use matrix_sdk_ui::timeline::{ReactionInfo, ReactionsByKeyBySender, TimelineEventItemId};

const EMOJI_BORDER_COLOR_INCLUDE_SELF: Vec4 = Vec4 {
x: 0.0,
y: 0.6,
z: 0.47,
w: 1.0,
}; // DarkGreen
const EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 {
x: 0.714,
y: 0.73,
z: 0.75,
w: 1.0,
}; // Grey
// A reaction the local user has joined reads as a *selected* chip, so it takes
// the accent pair the rest of the app already uses for selection, rather than a
// one-off green that appears nowhere else.
const EMOJI_BORDER_COLOR_INCLUDE_SELF: Vec4 = RBX_ACCENT;
const EMOJI_BORDER_COLOR_NOT_INCLUDE_SELF: Vec4 = RBX_STROKE_STRONG;

const EMOJI_BG_COLOR_INCLUDE_SELF: Vec4 = Vec4 {
x: 0.89,
y: 0.967,
z: 0.929,
w: 1.0,
}; // LightGreen
const EMOJI_BG_COLOR_NOT_INCLUDE_SELF: Vec4 = Vec4 {
x: 0.968,
y: 0.976,
z: 0.98,
w: 1.0,
}; // LightGrey
const EMOJI_BG_COLOR_INCLUDE_SELF: Vec4 = RBX_ACCENT_SOFT;
const EMOJI_BG_COLOR_NOT_INCLUDE_SELF: Vec4 = RBX_BG_SURFACE_SUBTLE;

script_mod! {
use mod.prelude.widgets.*
use mod.widgets.*


mod.widgets.COLOR_BUTTON_GREY = #B6BABF
mod.widgets.REACTION_LIST_PADDING_RIGHT = 30.0;

mod.widgets.ReactionList = #(ReactionList::register_widget(vm)) {
Expand All @@ -60,10 +45,15 @@ script_mod! {
draw_bg +: {
// Anything that we apply over must be an `instance`,
// and their names must be distinct from the base Button type.
reaction_bg_color: instance(mod.widgets.COLOR_BUTTON_GREY)
reaction_border_color: instance(#001A11)
// Override values from the base Button type.
color_hover: #fef65b
// Both instances are overwritten per reaction from Rust (see
// EMOJI_BG_COLOR_* / EMOJI_BORDER_COLOR_*); these are just the
// unreacted defaults.
reaction_bg_color: instance(mod.widgets.RBX_BG_SURFACE_SUBTLE)
reaction_border_color: instance(mod.widgets.RBX_STROKE_STRONG)
// Override values from the base Button type. `get_color` mixes
// 20% of this into the chip on hover, so the accent gives a
// subtle on-brand tint instead of the old highlighter yellow.
color_hover: (mod.widgets.RBX_ACCENT)
hover: 0.0
border_size: 1.5
border_radius: 3.0
Expand All @@ -90,7 +80,7 @@ script_mod! {
}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10},
color: #000000
color: (mod.widgets.RBX_FG_PRIMARY)
get_color: fn() -> vec4 {
return self.color;
}
Expand Down
4 changes: 2 additions & 2 deletions src/home/link_preview.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,8 +176,8 @@ script_mod! {
text_style: mod.widgets.LINK_PREVIEW_MESSAGE_TEXT_STYLE {
font_size: 12.0,
},
color: #x0000EE,
color_hover: (COLOR_LINK_HOVER),
color: (RBX_LINK),
color_hover: (RBX_LINK_HOVER),
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/home/loading_pane.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ script_mod! {

show_bg: true
draw_bg +: {
color: #000000b2
color: (RBX_SCRIM)
}

main_content := RoundedView {
Expand Down
37 changes: 22 additions & 15 deletions src/home/room_screen.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2164,13 +2164,17 @@ script_mod! {
mod.widgets.COLOR_THREAD_SUMMARY_BG_HOVER = #FFEACC
mod.widgets.COLOR_THREAD_SUMMARY_BORDER = #E8C99A
mod.widgets.COLOR_THREAD_SUMMARY_REPLY_COUNT = #A35A00
mod.widgets.COLOR_BOT_CARD_BG = #xF7FAFE
mod.widgets.COLOR_BOT_CARD_BORDER = #xD8E3F0
mod.widgets.COLOR_BOT_STATUS_BG = #xEEF4FB
mod.widgets.COLOR_BOT_STATUS_TEXT = #x5A6F86
mod.widgets.COLOR_BOT_FOOTER_TEXT = #x8B98A7
mod.widgets.COLOR_BOT_CODE_BG = #xECF2F8
mod.widgets.COLOR_BOT_CODE_BORDER = #xD5E0ED
// Aliases onto the token layer. These were seven hand-picked blue-greys that
// belonged to no ramp — each within ~2% of a real token, which is exactly
// the drift that makes an agent card read as slightly "off" next to the
// approval card and every other surface nested inside it.
mod.widgets.COLOR_BOT_CARD_BG = (mod.widgets.RBX_BG_CANVAS)
mod.widgets.COLOR_BOT_CARD_BORDER = (mod.widgets.RBX_STROKE_STRONG)
mod.widgets.COLOR_BOT_STATUS_BG = (mod.widgets.RBX_BG_SUNKEN)
mod.widgets.COLOR_BOT_STATUS_TEXT = (mod.widgets.RBX_FG_SECONDARY)
mod.widgets.COLOR_BOT_FOOTER_TEXT = (mod.widgets.RBX_FG_TERTIARY)
mod.widgets.COLOR_BOT_CODE_BG = (mod.widgets.RBX_BG_SUNKEN)
mod.widgets.COLOR_BOT_CODE_BORDER = (mod.widgets.RBX_STROKE_STRONG)

mod.widgets.MessageActionPrimaryButton = RobrixPositiveIconButton {
width: Fit
Expand Down Expand Up @@ -2283,8 +2287,8 @@ script_mod! {
draw_block +: {
line_color: (MESSAGE_TEXT_COLOR)
sep_color: (mod.widgets.COLOR_BOT_CODE_BORDER)
quote_bg_color: #xEFF5FB
quote_fg_color: #x7892AC
quote_bg_color: (mod.widgets.RBX_BG_SUNKEN)
quote_fg_color: (mod.widgets.RBX_FG_SECONDARY)
code_color: (mod.widgets.COLOR_BOT_CODE_BG)
}
code_layout: Layout{
Expand Down Expand Up @@ -3175,7 +3179,10 @@ script_mod! {
height: Fit
flow: Right
spacing: 0.0
padding: Inset{ left: 50.0, right: 10.0, bottom: 1.0 }
// 43 + the parent `body`'s 7 = the 50 that
// `SmallStateEventsSummary` uses, so the summary text keeps its
// left edge when the group is expanded instead of shifting 7px.
padding: Inset{ left: 43.0, right: 10.0, bottom: 1.0 }

group_summary_label := Label {
width: Fit,
Expand Down Expand Up @@ -3523,7 +3530,7 @@ script_mod! {
height: Fill
visible: false,
show_bg: true
draw_bg.color: #000000BB
draw_bg.color: (RBX_SCRIM)
}

main_content := SolidView {
Expand Down Expand Up @@ -3706,7 +3713,7 @@ script_mod! {
Label {
width: Fit, height: Fit
draw_text +: { text_style: RBX_TEXT_BADGE {}, color: (RBX_ACCENT) }
text: "Bot"
text: "bot"
}
}
}
Expand Down Expand Up @@ -3750,7 +3757,7 @@ script_mod! {
height: Fill
visible: false,
show_bg: true
draw_bg.color: #000000BB
draw_bg.color: (RBX_SCRIM)
}

main_content := SolidView {
Expand Down Expand Up @@ -3921,14 +3928,14 @@ script_mod! {
show_bg: true
new_batch: true
draw_bg +: {
color: (COLOR_ACTIVE_PRIMARY)
color: (RBX_ACCENT_SOFT)
border_radius: 3.0
}
Label {
width: Fit, height: Fit, padding: 0
draw_text +: {
text_style: REGULAR_TEXT { font_size: 8.5, top_drop: -0.08 }
color: (RBX_FG_ON_ACCENT)
color: (RBX_ACCENT)
}
text: "bot"
}
Expand Down
46 changes: 23 additions & 23 deletions src/home/room_settings_modal.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ script_mod! {
flow: Down
padding: Inset{top: 12, left: 0, right: 0, bottom: 12}
show_bg: true
draw_bg +: { color: #F3F5F8 }
draw_bg +: { color: (RBX_BG_SURFACE_SUBTLE) }

general_tab_button := RobrixNeutralIconButton {
width: Fill
Expand All @@ -92,15 +92,15 @@ script_mod! {
align: Align{x: 0.0, y: 0.5}
icon_walk: Walk{width: 0, height: 0}
draw_bg +: {
color: #E8EEF5
color_hover: #DDE6F0
color_down: #D0DBE8
color: (RBX_BG_SUNKEN)
color_hover: (RBX_BG_HOVER)
color_down: (RBX_BG_PRESSED)
border_radius: 0.0
}
draw_text +: {
color: #000
color_hover: #000
color_down: #000
color: (RBX_FG_PRIMARY)
color_hover: (RBX_FG_PRIMARY)
color_down: (RBX_FG_PRIMARY)
text_style: REGULAR_TEXT {font_size: 11}
}
text: "General"
Expand All @@ -122,7 +122,7 @@ script_mod! {
margin: Inset{bottom: 16}
draw_text +: {
text_style: TITLE_TEXT {font_size: 13}
color: #000
color: (RBX_FG_PRIMARY)
}
text: "General"
}
Expand All @@ -147,7 +147,7 @@ script_mod! {
margin: Inset{bottom: 2}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10.5}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Room Name"
}
Expand All @@ -164,7 +164,7 @@ script_mod! {
margin: Inset{top: 10, bottom: 2}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10.5}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Room Topic"
}
Expand Down Expand Up @@ -296,7 +296,7 @@ script_mod! {
margin: Inset{bottom: 10}
draw_text +: {
text_style: TITLE_TEXT {font_size: 12}
color: #000
color: (RBX_FG_PRIMARY)
}
text: "Room Addresses"
}
Expand All @@ -307,7 +307,7 @@ script_mod! {
margin: Inset{bottom: 4}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 11}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Published Addresses"
}
Expand All @@ -319,7 +319,7 @@ script_mod! {
margin: Inset{bottom: 8}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10}
color: #666
color: (RBX_FG_TERTIARY)
}
text: "These are the addresses that are published on the room directory for others to find this room."
}
Expand All @@ -337,7 +337,7 @@ script_mod! {
height: Fit
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10.5}
color: #444
color: (RBX_FG_SECONDARY)
}
text: "No main address set"
}
Expand Down Expand Up @@ -371,7 +371,7 @@ script_mod! {
flow: Flow.Right{wrap: true}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Publish this room to the public in matrix.org's room directory?"
}
Expand All @@ -383,7 +383,7 @@ script_mod! {
margin: Inset{bottom: 8}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10}
color: #888
color: (RBX_FG_TERTIARY)
}
text: "No other published addresses yet, add one below"
}
Expand Down Expand Up @@ -417,7 +417,7 @@ script_mod! {
margin: Inset{bottom: 4}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 11}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Local Addresses"
}
Expand All @@ -429,7 +429,7 @@ script_mod! {
margin: Inset{bottom: 8}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10}
color: #666
color: (RBX_FG_TERTIARY)
}
text: "Set addresses for this room so users can find this room. As an admin, you can set local addresses for this room."
}
Expand All @@ -450,7 +450,7 @@ script_mod! {
margin: Inset{bottom: 10}
draw_text +: {
text_style: TITLE_TEXT {font_size: 12}
color: #000
color: (RBX_FG_PRIMARY)
}
text: "Other"
}
Expand All @@ -461,7 +461,7 @@ script_mod! {
margin: Inset{bottom: 6}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 11}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Moderation and safety"
}
Expand All @@ -472,7 +472,7 @@ script_mod! {
margin: Inset{bottom: 2}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10.5}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Show media in timeline"
}
Expand All @@ -484,7 +484,7 @@ script_mod! {
margin: Inset{bottom: 6}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 10}
color: #666
color: (RBX_FG_TERTIARY)
}
text: "A hidden media can always be shown by tapping on it"
}
Expand Down Expand Up @@ -553,7 +553,7 @@ script_mod! {
margin: Inset{bottom: 10}
draw_text +: {
text_style: REGULAR_TEXT {font_size: 11}
color: #333
color: (RBX_FG_SECONDARY)
}
text: "Leave room"
}
Expand Down
9 changes: 5 additions & 4 deletions src/home/rooms_list_entry.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,10 @@ script_mod! {
text: "[Room name unknown]"
}

// A small blue "bot" pill shown after the room name for agent-bound rooms.
// A small "bot" pill shown after the room name for agent-bound rooms.
// Reproduces the timeline's bot badge look (room_screen.rs) locally so this
// file doesn't depend on room_screen's private constants/widgets.
// file doesn't depend on room_screen's private constants/widgets — so it
// must use the same soft-accent chip, not a solid legacy-blue block.
mod.widgets.RoomsListBotPill = RoundedView {
visible: false
width: Fit
Expand All @@ -72,14 +73,14 @@ script_mod! {
show_bg: true
new_batch: true
draw_bg +: {
color: (COLOR_ACTIVE_PRIMARY)
color: (RBX_ACCENT_SOFT)
border_radius: 3.0
}
Label {
width: Fit, height: Fit, padding: 0
draw_text +: {
text_style: REGULAR_TEXT { font_size: 8.5, top_drop: -0.08 }
color: (RBX_FG_ON_ACCENT)
color: (RBX_ACCENT)
}
text: "bot"
}
Expand Down
Loading
Loading