diff --git a/src/home/event_reaction_list.rs b/src/home/event_reaction_list.rs index b47749a77..ffb4c41b0 100644 --- a/src/home/event_reaction_list.rs +++ b/src/home/event_reaction_list.rs @@ -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)) { @@ -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 @@ -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; } diff --git a/src/home/link_preview.rs b/src/home/link_preview.rs index 1d7cfe98e..d67178c6f 100644 --- a/src/home/link_preview.rs +++ b/src/home/link_preview.rs @@ -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), } } diff --git a/src/home/loading_pane.rs b/src/home/loading_pane.rs index 5e6901572..7c17d4b6d 100644 --- a/src/home/loading_pane.rs +++ b/src/home/loading_pane.rs @@ -20,7 +20,7 @@ script_mod! { show_bg: true draw_bg +: { - color: #000000b2 + color: (RBX_SCRIM) } main_content := RoundedView { diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs index fd34002b9..32df2de02 100644 --- a/src/home/room_screen.rs +++ b/src/home/room_screen.rs @@ -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 @@ -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{ @@ -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, @@ -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 { @@ -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" } } } @@ -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 { @@ -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" } diff --git a/src/home/room_settings_modal.rs b/src/home/room_settings_modal.rs index be1113f4d..84a596490 100644 --- a/src/home/room_settings_modal.rs +++ b/src/home/room_settings_modal.rs @@ -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 @@ -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" @@ -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" } @@ -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" } @@ -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" } @@ -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" } @@ -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" } @@ -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." } @@ -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" } @@ -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?" } @@ -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" } @@ -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" } @@ -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." } @@ -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" } @@ -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" } @@ -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" } @@ -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" } @@ -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" } diff --git a/src/home/rooms_list_entry.rs b/src/home/rooms_list_entry.rs index 2896b1141..7876dd2a0 100644 --- a/src/home/rooms_list_entry.rs +++ b/src/home/rooms_list_entry.rs @@ -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 @@ -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" } diff --git a/src/home/search_messages.rs b/src/home/search_messages.rs index 229852e45..aaa1f0e14 100644 --- a/src/home/search_messages.rs +++ b/src/home/search_messages.rs @@ -158,7 +158,7 @@ script_mod! { height: Fill visible: false, show_bg: true - draw_bg.color: #000000BB + draw_bg.color: (RBX_SCRIM) } main_content := SolidView { diff --git a/src/home/sticker_modal.rs b/src/home/sticker_modal.rs index 8c3f1e456..9378656d0 100644 --- a/src/home/sticker_modal.rs +++ b/src/home/sticker_modal.rs @@ -69,7 +69,7 @@ script_mod! { color: (COLOR_PRIMARY) border_radius: 10.0 border_size: 1.0 - border_color: #xE5E7EB + border_color: (RBX_STROKE_SOFT) } // Rounded slot that's always visible. Acts as a placeholder @@ -80,7 +80,7 @@ script_mod! { flow: Overlay show_bg: true draw_bg +: { - color: #xEDEFF3 + color: (RBX_BG_SUNKEN) border_radius: 8.0 } thumb := Image { @@ -99,7 +99,7 @@ script_mod! { flow: Flow.Right{wrap: true} draw_text +: { text_style: TITLE_TEXT { font_size: 13 } - color: #x111111 + color: (RBX_FG_PRIMARY) } text: "" } @@ -109,7 +109,7 @@ script_mod! { flow: Flow.Right{wrap: true} draw_text +: { text_style: REGULAR_TEXT { font_size: 11 } - color: #x6B7280 + color: (RBX_FG_SECONDARY) } text: "" } @@ -136,7 +136,7 @@ script_mod! { flow: Overlay show_bg: true draw_bg +: { - color: #xEDEFF3 + color: (RBX_BG_SUNKEN) border_radius: 8.0 } @@ -172,7 +172,7 @@ script_mod! { padding: Inset{left: 4, bottom: 2} draw_text +: { text_style: TITLE_TEXT { font_size: 14 } - color: #x111111 + color: (RBX_FG_PRIMARY) } text: "" } @@ -210,7 +210,7 @@ script_mod! { width: Fill, height: Fit draw_text +: { text_style: TITLE_TEXT { font_size: 16 } - color: #x111111 + color: (RBX_FG_PRIMARY) } text: "Sticker Packs" } @@ -266,7 +266,7 @@ script_mod! { width: Fit, height: Fit draw_text +: { text_style: TITLE_TEXT { font_size: 13 } - color: (COLOR_ACTIVE_PRIMARY) + color: (RBX_ACCENT) } text: "Stickers" } @@ -279,7 +279,7 @@ script_mod! { width: Fit, height: Fit draw_text +: { text_style: REGULAR_TEXT { font_size: 13 } - color: #x9CA3AF + color: (RBX_FG_TERTIARY) } text: "Stickers" } @@ -291,7 +291,7 @@ script_mod! { visible: true width: Fill, height: 2 show_bg: true - draw_bg +: { color: (COLOR_ACTIVE_PRIMARY) } + draw_bg +: { color: (RBX_ACCENT) } } } @@ -302,7 +302,7 @@ script_mod! { draw_bg +: { color: #0000 border_size: 0 - color_hover: #00000008 + color_hover: (RBX_HIT_HOVER) color_down: #00000015 border_radius: 0.0 } @@ -335,7 +335,7 @@ script_mod! { width: Fit, height: Fit draw_text +: { text_style: TITLE_TEXT { font_size: 13 } - color: (COLOR_ACTIVE_PRIMARY) + color: (RBX_ACCENT) } text: "Catalog" } @@ -348,7 +348,7 @@ script_mod! { width: Fit, height: Fit draw_text +: { text_style: REGULAR_TEXT { font_size: 13 } - color: #x9CA3AF + color: (RBX_FG_TERTIARY) } text: "Catalog" } @@ -360,7 +360,7 @@ script_mod! { visible: false width: Fill, height: 2 show_bg: true - draw_bg +: { color: (COLOR_ACTIVE_PRIMARY) } + draw_bg +: { color: (RBX_ACCENT) } } } @@ -371,7 +371,7 @@ script_mod! { draw_bg +: { color: #0000 border_size: 0 - color_hover: #00000008 + color_hover: (RBX_HIT_HOVER) color_down: #00000015 border_radius: 0.0 } @@ -384,7 +384,7 @@ script_mod! { View { width: Fill, height: 1 show_bg: true - draw_bg +: { color: #xE5E7EB } + draw_bg +: { color: (RBX_STROKE_SOFT) } } // ── Content panes: Overlay — only one visible at a time ────────────── @@ -409,13 +409,13 @@ script_mod! { LoadingSpinner { width: 32, height: 32 - draw_bg.color: (COLOR_ACTIVE_PRIMARY) + draw_bg.color: (RBX_ACCENT) } Label { width: Fit, height: Fit draw_text +: { text_style: REGULAR_TEXT { font_size: 12 } - color: #x6B7280 + color: (RBX_FG_SECONDARY) } text: "Loading stickers…" } @@ -449,13 +449,13 @@ script_mod! { loading_spinner := LoadingSpinner { width: 36, height: 36 - draw_bg.color: (COLOR_ACTIVE_PRIMARY) + draw_bg.color: (RBX_ACCENT) } loading_label := Label { width: Fit, height: Fit draw_text +: { text_style: REGULAR_TEXT { font_size: 12 } - color: #x6B7280 + color: (RBX_FG_SECONDARY) } text: "Loading sticker packs…" } @@ -489,7 +489,7 @@ script_mod! { align: Align{x: 0.5, y: 0.5} draw_text +: { text_style: REGULAR_TEXT { font_size: 12 } - color: #xB91C1C + color: (RBX_DANGER_FG) } text: "Failed to load sticker packs." } @@ -498,9 +498,9 @@ script_mod! { padding: Inset{top: 6, bottom: 6, left: 14, right: 14} text: "Retry" draw_bg +: { - color: (COLOR_ACTIVE_PRIMARY) - color_hover: (COLOR_ACTIVE_PRIMARY_DARKER) - color_down: #0C5DAA + color: (RBX_ACCENT) + color_hover: (RBX_ACCENT_HOVER) + color_down: (RBX_ACCENT_PRESSED) border_radius: 4.0 } draw_text +: { @@ -541,7 +541,7 @@ script_mod! { width: Fill, height: Fit draw_text +: { text_style: TITLE_TEXT { font_size: 15 } - color: #x111111 + color: (RBX_FG_PRIMARY) } text: "" } @@ -550,7 +550,7 @@ script_mod! { View { width: Fill, height: 1 show_bg: true - draw_bg +: { color: #xE5E7EB } + draw_bg +: { color: (RBX_STROKE_SOFT) } } sticker_grid_loading := View { @@ -562,13 +562,13 @@ script_mod! { LoadingSpinner { width: 28, height: 28 - draw_bg.color: (COLOR_ACTIVE_PRIMARY) + draw_bg.color: (RBX_ACCENT) } Label { width: Fit, height: Fit draw_text +: { text_style: REGULAR_TEXT { font_size: 11 } - color: #x6B7280 + color: (RBX_FG_SECONDARY) } text: "Loading stickers…" } diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs index e51b5ec98..a22cc3cb6 100644 --- a/src/profile/user_profile.rs +++ b/src/profile/user_profile.rs @@ -279,7 +279,7 @@ script_mod! { height: Fill visible: false, show_bg: true - draw_bg.color: #000000BB + draw_bg.color: (RBX_SCRIM) } main_content := SolidView { diff --git a/src/settings/settings_screen.rs b/src/settings/settings_screen.rs index 797fd5159..a1b24df28 100644 --- a/src/settings/settings_screen.rs +++ b/src/settings/settings_screen.rs @@ -646,7 +646,7 @@ script_mod! { draw_text +: { text_style: REGULAR_TEXT { font_size: 10.5 } color: (RBX_LINK), - color_hover: (COLOR_LINK_HOVER), + color_hover: (RBX_LINK_HOVER), } text: "https://github.com/Project-Robius-China/robrix2" } diff --git a/src/shared/audio_message_player.rs b/src/shared/audio_message_player.rs index f0385976b..175635acb 100644 --- a/src/shared/audio_message_player.rs +++ b/src/shared/audio_message_player.rs @@ -356,7 +356,7 @@ script_mod! { align: Align{y: 0.5} show_bg: true draw_bg +: { - color: #xf3f4f6 + color: (RBX_BG_SURFACE_SUBTLE) border_radius: 8.0 } @@ -404,14 +404,14 @@ script_mod! { } draw_icon +: { svg: (mod.widgets.ICON_AUDIO_PLAY) - color: #xffffff + color: (RBX_BG_SURFACE) } draw_bg +: { border_radius: 5.0 - color: #x111827 - color_hover: #x374151 - color_down: #x111827 - color_disabled: #737A85 + color: (RBX_FG_PRIMARY) + color_hover: (RBX_FG_SECONDARY) + color_down: (RBX_FG_PRIMARY) + color_disabled: (RBX_FG_DISABLED) } } @@ -445,14 +445,14 @@ script_mod! { } draw_icon +: { svg: (mod.widgets.ICON_AUDIO_PAUSE) - color: #xffffff + color: (RBX_BG_SURFACE) } draw_bg +: { border_radius: 5.0 - color: #x111827 - color_hover: #x374151 - color_down: #x111827 - color_disabled: #737A85 + color: (RBX_FG_PRIMARY) + color_hover: (RBX_FG_SECONDARY) + color_down: (RBX_FG_PRIMARY) + color_disabled: (RBX_FG_DISABLED) } } } @@ -469,7 +469,7 @@ script_mod! { flow: Flow.Right{wrap: true} draw_text +: { text_style: MESSAGE_TEXT_STYLE { font_size: 12.0 } - color: #x111827 + color: (RBX_FG_PRIMARY) } } @@ -479,7 +479,7 @@ script_mod! { flow: Flow.Right{wrap: true} draw_text +: { text_style: MESSAGE_TEXT_STYLE { font_size: 10.0 } - color: #x6b7280 + color: (RBX_FG_SECONDARY) } } @@ -502,8 +502,8 @@ script_mod! { draw_bg +: { offset_y: uniform(8.0) handle_size: uniform(8.0) - val_color: #x111827 - handle_color: #x111827 + val_color: (RBX_FG_PRIMARY) + handle_color: (RBX_FG_PRIMARY) } // Hide the slider's own numeric value label (it overlaps // the track at this height and is redundant with the @@ -537,7 +537,7 @@ script_mod! { text: "00:00" draw_text +: { text_style: MESSAGE_TEXT_STYLE { font_size: 10.0 } - color: #x374151 + color: (RBX_FG_SECONDARY) } } } diff --git a/src/shared/design_tokens.rs b/src/shared/design_tokens.rs index 5def59965..0f5028be3 100644 --- a/src/shared/design_tokens.rs +++ b/src/shared/design_tokens.rs @@ -98,6 +98,9 @@ script_mod! { mod.widgets.RBX_ACCENT_SOFT = #xE4F5F7 // Hyperlink / inline-link color. mod.widgets.RBX_LINK = #x1887C9 + // Hovered link. Same hue, darkened like ACCENT → ACCENT_HOVER, so a link + // deepens on hover instead of jumping to another hue. + mod.widgets.RBX_LINK_HOVER = #x1577B1 // ========================================================================= // 4. BRAND — logo colors. Use sparingly (brand entry points, app icon, the @@ -329,6 +332,8 @@ pub const RBX_ACCENT_PRESSED: Vec4 = vec4(0.043, 0.455, 0.518, 1.0); pub const RBX_ACCENT_SOFT: Vec4 = vec4(0.894, 0.961, 0.969, 1.0); /// #1887C9 — link. pub const RBX_LINK: Vec4 = vec4(0.094, 0.529, 0.788, 1.0); +/// #1577B1 — hovered link (same hue as `RBX_LINK`, darkened). +pub const RBX_LINK_HOVER: Vec4 = vec4(0.082, 0.467, 0.694, 1.0); // --- Brand --- /// #572DCC — brand purple. diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs index 1e055aa92..b43ab8172 100644 --- a/src/shared/html_or_plaintext.rs +++ b/src/shared/html_or_plaintext.rs @@ -35,15 +35,18 @@ script_mod! { spacing: 1, show_bg: true, + // Two tiers, both drawn from the accent pair: a mention of someone + // else is a quiet soft chip, while a mention of *you* (or @room) is + // filled. Set from Rust per pill; these are the quiet defaults. draw_bg +: { - color: #000 + color: (RBX_ACCENT_SOFT) border_radius: 6.0 } avatar := Avatar { height: (MESSAGE_FONT_SIZE + 5), width: (MESSAGE_FONT_SIZE + 5), - // White bg so transparent avatar images are visible on the - // pill's black background. + // Opaque bg so transparent avatar images stay legible whichever + // tier the pill is drawn in. img_view +: { show_bg: true, draw_bg +: { color: #fff } @@ -60,7 +63,7 @@ script_mod! { title := Label { flow: Right, // do not wrap draw_text +: { - color: #f, + color: (RBX_ACCENT), // line_spacing 1.0 prevents the label's row height from // inflating the pill vertically (pill is single-line). text_style: MESSAGE_TEXT_STYLE { font_size: (MESSAGE_FONT_SIZE), line_spacing: 1.0 }, @@ -90,7 +93,7 @@ script_mod! { align: Align{ y: 0.5 }, html_link := HtmlLink { - hover_color: (COLOR_LINK_HOVER) + hover_color: (RBX_LINK_HOVER) grab_key_focus: false, padding: Inset{left: 1.0, right: 1.5}, } @@ -149,8 +152,11 @@ script_mod! { draw_block +: { line_color: (MESSAGE_TEXT_COLOR) sep_color: (MESSAGE_TEXT_COLOR) - code_color: (#EDEDED) - quote_bg_color: (#EDEDED) + // Same inset surface the markdown path uses, so a bot's inline + // `code` does not change shade depending on whether the message + // happened to contain a fenced block. + code_color: (RBX_BG_SUNKEN) + quote_bg_color: (RBX_BG_SUNKEN) quote_fg_color: (MESSAGE_TEXT_COLOR) } @@ -412,15 +418,20 @@ impl MatrixLinkPill { let is_room_mention = link_text == "@room"; let is_self_mention = matches!(matrix_id, MatrixId::User(uid) if current_user_id().is_some_and(|u| &u == uid)); - // Reset pill bg to default black, then apply red for mentions. - // This prevents stale red from persisting if a cached widget is - // reused for a different (non-mention) link after a message edit. + // A mention that targets the local user (or the whole room) is filled + // with the accent so it stands out mid-sentence; every other mention + // stays a quiet soft chip. Both branches always write both the fill and + // the label colour — a cached pill reused for a different link after an + // edit must not keep the previous pill's emphasis. { let mut pill_bg = self.view(cx, ids!(pill_bg)); + let mut title = self.label(cx, ids!(pill_bg.title)); if is_room_mention || is_self_mention { - script_apply_eval!(cx, pill_bg, { draw_bg +: { color: #d91b38 } }); + script_apply_eval!(cx, pill_bg, { draw_bg +: { color: (mod.widgets.RBX_ACCENT) } }); + script_apply_eval!(cx, title, { draw_text +: { color: (mod.widgets.RBX_FG_ON_ACCENT) } }); } else { - script_apply_eval!(cx, pill_bg, { draw_bg +: { color: #000 } }); + script_apply_eval!(cx, pill_bg, { draw_bg +: { color: (mod.widgets.RBX_ACCENT_SOFT) } }); + script_apply_eval!(cx, title, { draw_text +: { color: (mod.widgets.RBX_ACCENT) } }); } } diff --git a/src/shared/mentionable_text_input.rs b/src/shared/mentionable_text_input.rs index 42f859025..5c105fb25 100644 --- a/src/shared/mentionable_text_input.rs +++ b/src/shared/mentionable_text_input.rs @@ -1054,7 +1054,8 @@ script_mod! { pixel: fn() { let sdf = Sdf2d.viewport(self.pos * self.rect_size) sdf.box(0. 0. self.rect_size.x self.rect_size.y self.border_radius) - let highlight = #x1E90FF30 + // Selected row uses the app's selection tint, not a one-off blue. + let highlight = RBX_BG_SELECTED sdf.fill(Pal.premul(self.color.mix(highlight self.selected))) return sdf.result } @@ -1118,7 +1119,8 @@ script_mod! { pixel: fn() { let sdf = Sdf2d.viewport(self.pos * self.rect_size) sdf.box(0. 0. self.rect_size.x self.rect_size.y self.border_radius) - let highlight = #x1E90FF30 + // Selected row uses the app's selection tint, not a one-off blue. + let highlight = RBX_BG_SELECTED sdf.fill(Pal.premul(self.color.mix(highlight self.selected))) return sdf.result } @@ -1181,7 +1183,8 @@ script_mod! { pixel: fn() { let sdf = Sdf2d.viewport(self.pos * self.rect_size) sdf.box(0. 0. self.rect_size.x self.rect_size.y self.border_radius) - let highlight = #x1E90FF30 + // Selected row uses the app's selection tint, not a one-off blue. + let highlight = RBX_BG_SELECTED sdf.fill(Pal.premul(self.color.mix(highlight self.selected))) return sdf.result } diff --git a/src/shared/styles.rs b/src/shared/styles.rs index 5a0448c79..c0ffaebd3 100644 --- a/src/shared/styles.rs +++ b/src/shared/styles.rs @@ -211,7 +211,14 @@ script_mod! { mod.widgets.COLOR_PRIMARY = #ffffff - mod.widgets.COLOR_PRIMARY_DARKER = #fefefe + // Was a stray `#fefefe` that belonged to no ramp; every use is a near-white + // panel background or border, so it takes the surface value instead (a 0.4% + // shift, invisible in place). + // NOTE: this file is registered BEFORE design_tokens.rs (see shared/mod.rs), + // so it cannot reference `RBX_*` — doing so silently fails to resolve at + // runtime and the property falls back to a grey default. Keep the literal, + // mirroring RBX_BG_SURFACE. + mod.widgets.COLOR_PRIMARY_DARKER = #ffffff mod.widgets.COLOR_SECONDARY = #E3E3E3 mod.widgets.COLOR_SECONDARY_DARKER = #C8C8C8 @@ -228,11 +235,18 @@ script_mod! { mod.widgets.COLOR_AVATAR_BG_IDLE = #d8d8d8 - mod.widgets.COLOR_UNREAD_BADGE_MENTIONS = #FF0000; - - - mod.widgets.COLOR_UNREAD_BADGE_MARKED = (mod.widgets.COLOR_ROBRIX_CYAN); - mod.widgets.COLOR_UNREAD_BADGE_MESSAGES = #AAAAAA + // Unread badge fills. A mention keeps the conventional red, but the + // system's red rather than pure #FF0000 — the latter was the most saturated + // pixel in the app and appeared nowhere else. "Marked unread" is a user + // action, so it takes the functional accent instead of the logo cyan (the + // brand ramp is reserved for brand entry points, per design_tokens.rs). + // Literals mirroring RBX_DANGER_FG / RBX_ACCENT / RBX_FG_TERTIARY — this file + // is registered before design_tokens.rs, so `RBX_*` is not resolvable here + // (see the note on COLOR_PRIMARY_DARKER above). The Rust consts below do + // reference the tokens directly, which keeps the two sides tied together. + mod.widgets.COLOR_UNREAD_BADGE_MENTIONS = #C5392F; + mod.widgets.COLOR_UNREAD_BADGE_MARKED = #119FB3; + mod.widgets.COLOR_UNREAD_BADGE_MESSAGES = #8A98AE mod.widgets.COLOR_TEXT_IDLE = #d8d8d8 @@ -397,12 +411,13 @@ pub const COLOR_BG_DANGER_RED: Vec4 = vec4(1.0, 0.941, 0.941, 1.0); pub const COLOR_ROBRIX_PURPLE: Vec4 = vec4(0.341, 0.176, 0.8, 1.0); /// #05CDC7 pub const COLOR_ROBRIX_CYAN: Vec4 = vec4(0.031, 0.804, 0.78, 1.0); -/// #FF0000 -pub const COLOR_UNREAD_BADGE_MENTIONS: Vec4 = vec4(1.0, 0.0, 0.0, 1.0); -/// #572DCC -pub const COLOR_UNREAD_BADGE_MARKED: Vec4 = COLOR_ROBRIX_CYAN; -/// #AAAAAA -pub const COLOR_UNREAD_BADGE_MESSAGES: Vec4 = vec4(0.667, 0.667, 0.667, 1.0); +// Keep these in sync with the DSL definitions above. +/// #C5392F — mention badge (`RBX_DANGER_FG`). +pub const COLOR_UNREAD_BADGE_MENTIONS: Vec4 = crate::shared::design_tokens::RBX_DANGER_FG; +/// #119FB3 — marked-unread badge (`RBX_ACCENT`). +pub const COLOR_UNREAD_BADGE_MARKED: Vec4 = crate::shared::design_tokens::RBX_ACCENT; +/// #8A98AE — plain unread-count badge (`RBX_FG_TERTIARY`). +pub const COLOR_UNREAD_BADGE_MESSAGES: Vec4 = crate::shared::design_tokens::RBX_FG_TERTIARY; /// #FF6e00 pub const COLOR_UNKNOWN_ROOM_AVATAR: Vec4 = vec4(1.0, 0.431, 0.0, 1.0); /// #888888 diff --git a/src/shared/video_message_player.rs b/src/shared/video_message_player.rs index 080af5298..83dfa5f97 100644 --- a/src/shared/video_message_player.rs +++ b/src/shared/video_message_player.rs @@ -315,7 +315,7 @@ script_mod! { flow: Overlay show_bg: true draw_bg +: { - color: #x111827 + color: (RBX_FG_PRIMARY) border_radius: 8.0 } @@ -336,7 +336,7 @@ script_mod! { height: 48 draw_icon +: { svg: (mod.widgets.VIDEO_ICON_FORBIDDEN) - color: #xff4444 + color: (RBX_DANGER_FG) } icon_walk: Walk{width: 48, height: 48} } @@ -358,13 +358,13 @@ script_mod! { icon_walk: Walk{width: 18, height: 18} draw_icon +: { svg: (mod.widgets.VIDEO_ICON_MAXIMISE) - color: #xffffff + color: (RBX_BG_SURFACE) } draw_bg +: { border_radius: 5.0 - color: #x111827 - color_hover: #x374151 - color_down: #x111827 + color: (RBX_FG_PRIMARY) + color_hover: (RBX_FG_SECONDARY) + color_down: (RBX_FG_PRIMARY) } } @@ -379,14 +379,14 @@ script_mod! { icon_walk: Walk{width: 18, height: 18} draw_icon +: { svg: (mod.widgets.VIDEO_ICON_VOL_ON) - color: #xffffff + color: (RBX_BG_SURFACE) } draw_bg +: { border_radius: 5.0 - color: #x111827 - color_hover: #x374151 - color_down: #x111827 - color_disabled: #x737A85 + color: (RBX_FG_PRIMARY) + color_hover: (RBX_FG_SECONDARY) + color_down: (RBX_FG_PRIMARY) + color_disabled: (RBX_FG_DISABLED) } } } @@ -397,7 +397,7 @@ script_mod! { height: Fit visible: false flow: Flow.Right { wrap: true } - draw_text +: { color: #xff4444 } + draw_text +: { color: (RBX_DANGER_FG) } } } }