diff --git a/core/embed/rust/src/ui/layout_eckhart/component/button.rs b/core/embed/rust/src/ui/layout_eckhart/component/button.rs index f045089c44..e02a1ffa9d 100644 --- a/core/embed/rust/src/ui/layout_eckhart/component/button.rs +++ b/core/embed/rust/src/ui/layout_eckhart/component/button.rs @@ -41,7 +41,7 @@ impl Button { #[cfg(not(feature = "bootloader"))] const SUBTEXT_STYLE: TextStyle = theme::label_menu_item_subtitle(); #[cfg(feature = "bootloader")] - const SUBTEXT_STYLE: TextStyle = theme::bootloader::TEXT_NORMAL; + const SUBTEXT_STYLE: TextStyle = theme::TEXT_NORMAL; pub const fn new(content: ButtonContent) -> Self { Self { diff --git a/core/embed/rust/src/ui/layout_eckhart/firmware/header.rs b/core/embed/rust/src/ui/layout_eckhart/firmware/header.rs index bd3fe9ed58..8edb94e8e9 100644 --- a/core/embed/rust/src/ui/layout_eckhart/firmware/header.rs +++ b/core/embed/rust/src/ui/layout_eckhart/firmware/header.rs @@ -89,7 +89,7 @@ pub enum HeaderMsg { } impl Header { - pub const HEADER_HEIGHT: i16 = 96; // [px] + pub const HEADER_HEIGHT: i16 = theme::HEADER_HEIGHT; // [px] pub const HEADER_BUTTON_WIDTH: i16 = 56; // [px] pub const HEADER_INSETS: Insets = Insets::sides(24); // [px] diff --git a/core/embed/rust/src/ui/layout_eckhart/firmware/hint.rs b/core/embed/rust/src/ui/layout_eckhart/firmware/hint.rs index fc56158c1f..74668ff187 100644 --- a/core/embed/rust/src/ui/layout_eckhart/firmware/hint.rs +++ b/core/embed/rust/src/ui/layout_eckhart/firmware/hint.rs @@ -213,7 +213,7 @@ struct Instruction<'a> { impl<'a> Instruction<'a> { /// default style for instruction text - const STYLE_INSTRUCTION: &'static TextStyle = &theme::TEXT_SMALL; + const STYLE_INSTRUCTION: &'static TextStyle = &theme::firmware::TEXT_SMALL; /// margin between icon and text const ICON_OFFSET: Offset = Offset::x(24); // [px] diff --git a/core/embed/rust/src/ui/layout_eckhart/firmware/text_screen.rs b/core/embed/rust/src/ui/layout_eckhart/firmware/text_screen.rs index 9b9ee05332..b49a7e6494 100644 --- a/core/embed/rust/src/ui/layout_eckhart/firmware/text_screen.rs +++ b/core/embed/rust/src/ui/layout_eckhart/firmware/text_screen.rs @@ -10,7 +10,7 @@ use crate::ui::{ util::Pager, }; -use super::{action_bar::ActionBarMsg, ActionBar, Header, HeaderMsg, Hint}; +use super::{action_bar::ActionBarMsg, ActionBar, Header, HeaderMsg, Hint, theme::SIDE_INSETS}; /// Full-screen component for rendering text. /// @@ -39,7 +39,7 @@ impl TextScreen where T: AllowedTextContent, { - const CONTENT_INSETS: Insets = Insets::sides(24); + const CONTENT_INSETS: Insets = SIDE_INSETS; pub fn new(content: T) -> Self { Self { diff --git a/core/embed/rust/src/ui/layout_eckhart/theme/bootloader.rs b/core/embed/rust/src/ui/layout_eckhart/theme/bootloader.rs index 8430ab281c..8497a63b83 100644 --- a/core/embed/rust/src/ui/layout_eckhart/theme/bootloader.rs +++ b/core/embed/rust/src/ui/layout_eckhart/theme/bootloader.rs @@ -1,92 +1,63 @@ use crate::ui::{ component::{text::TextStyle, LineBreaking::BreakWordsNoHyphen}, - constant::{HEIGHT, WIDTH}, display::Color, - geometry::{Offset, Point, Rect}, - util::include_res, }; use super::{ super::{ - component::{ButtonStyle, ButtonStyleSheet, ResultStyle}, + component::{ButtonStyle, ButtonStyleSheet}, fonts, }, - BLACK, GREY_DARK, GREY_LIGHT, GREY_SUPER_DARK, WHITE, + BLACK, BLUE, GREY, GREY_DARK, GREY_EXTRA_DARK, GREY_EXTRA_LIGHT, GREY_LIGHT, GREY_SUPER_DARK, + RED, WHITE, }; -pub const BLD_BG: Color = Color::rgb(0x00, 0x1E, 0xAD); +pub const BLD_BG: Color = BLACK; pub const BLD_FG: Color = WHITE; -pub const BLD_WIPE_COLOR: Color = Color::rgb(0xE7, 0x0E, 0x0E); -pub const BLD_WIPE_TEXT_COLOR: Color = WHITE; pub const BLD_WARN_COLOR: Color = Color::rgb(0xFF, 0x00, 0x00); - -pub const BLD_WIPE_BTN_COLOR: Color = WHITE; -pub const BLD_WIPE_BTN_COLOR_ACTIVE: Color = Color::rgb(0xFA, 0xCF, 0xCF); - -pub const BLD_WIPE_CANCEL_BTN_COLOR: Color = Color::rgb(0xFF, 0x41, 0x41); -pub const BLD_WIPE_CANCEL_BTN_COLOR_ACTIVE: Color = Color::rgb(0xAE, 0x09, 0x09); - -pub const BLD_INSTALL_BTN_COLOR_ACTIVE: Color = Color::rgb(0xCD, 0xD2, 0xEF); - -pub const BLD_BTN_COLOR: Color = Color::rgb(0x2D, 0x42, 0xBF); -pub const BLD_BTN_COLOR_ACTIVE: Color = Color::rgb(0x04, 0x10, 0x58); - -pub const BLD_TITLE_COLOR: Color = WHITE; - pub const WELCOME_COLOR: Color = BLACK; -pub const WELCOME_HIGHLIGHT_COLOR: Color = Color::rgb(0x28, 0x28, 0x28); - -// Commonly used corner radius (i.e. for buttons). -pub const RADIUS: u8 = 2; - -// Commonly used constants for UI elements. -pub const CONTENT_PADDING: i16 = 6; -pub const TITLE_AREA: Rect = Rect::new( - Point::new(CONTENT_PADDING, CONTENT_PADDING), - Point::new(WIDTH, CORNER_BUTTON_SIZE + CONTENT_PADDING), -); - -pub const CORNER_BUTTON_TOUCH_EXPANSION: i16 = 13; -pub const CORNER_BUTTON_SIZE: i16 = 44; -pub const CORNER_BUTTON_AREA: Rect = Rect::from_top_left_and_size( - Point::new( - WIDTH - CORNER_BUTTON_SIZE - CONTENT_PADDING, - CONTENT_PADDING, - ), - Offset::uniform(CORNER_BUTTON_SIZE), -); -pub const BUTTON_AREA_START: i16 = HEIGHT - 56; -pub const BUTTON_HEIGHT: i16 = 50; - -// BLD icons -pub const X24: &[u8] = include_res!("layout_delizia/res/x24.toif"); -pub const X32: &[u8] = include_res!("layout_delizia/res/x32.toif"); -pub const FIRE24: &[u8] = include_res!("layout_delizia/res/fire24.toif"); -pub const FIRE32: &[u8] = include_res!("layout_delizia/res/fire32.toif"); -pub const FIRE40: &[u8] = include_res!("layout_delizia/res/fire40.toif"); -pub const REFRESH24: &[u8] = include_res!("layout_delizia/res/refresh24.toif"); -pub const MENU32: &[u8] = include_res!("layout_delizia/res/menu32.toif"); -pub const INFO32: &[u8] = include_res!("layout_delizia/res/info32.toif"); -pub const DOWNLOAD24: &[u8] = include_res!("layout_delizia/res/download24.toif"); -pub const WARNING40: &[u8] = include_res!("layout_delizia/res/warning40.toif"); -pub const CHECK24: &[u8] = include_res!("layout_delizia/res/check24.toif"); -pub const CHECK40: &[u8] = include_res!("layout_delizia/res/check40.toif"); pub fn button_confirm() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_BG, - button_color: WHITE, - icon_color: BLD_BG, + text_color: GREY_EXTRA_LIGHT, + button_color: BLUE, + icon_color: GREY_EXTRA_LIGHT, background_color: BLD_BG, }, active: &ButtonStyle { font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_BG, - button_color: BLD_INSTALL_BTN_COLOR_ACTIVE, + text_color: GREY_EXTRA_LIGHT, + button_color: GREY_SUPER_DARK, + icon_color: GREY_EXTRA_LIGHT, + background_color: BLD_BG, + }, + disabled: &ButtonStyle { + font: fonts::FONT_SATOSHI_MEDIUM_26, + text_color: BLD_FG, + button_color: GREY_DARK, icon_color: BLD_BG, + background_color: BLD_FG, + }, + } +} + +pub fn button_cancel() -> ButtonStyleSheet { + ButtonStyleSheet { + normal: &ButtonStyle { + font: fonts::FONT_SATOSHI_MEDIUM_26, + text_color: GREY_LIGHT, + button_color: GREY_EXTRA_DARK, + icon_color: GREY_LIGHT, + background_color: BLD_BG, + }, + active: &ButtonStyle { + font: fonts::FONT_SATOSHI_MEDIUM_26, + text_color: GREY_LIGHT, + button_color: GREY_DARK, + icon_color: GREY_LIGHT, background_color: BLD_BG, }, disabled: &ButtonStyle { @@ -125,47 +96,21 @@ pub const fn button_header() -> ButtonStyleSheet { } } -pub fn button_wipe_cancel() -> ButtonStyleSheet { - ButtonStyleSheet { - normal: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: WHITE, - button_color: BLD_WIPE_CANCEL_BTN_COLOR, - icon_color: WHITE, - background_color: BLD_WIPE_COLOR, - }, - active: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: WHITE, - button_color: BLD_WIPE_CANCEL_BTN_COLOR_ACTIVE, - icon_color: WHITE, - background_color: BLD_WIPE_COLOR, - }, - disabled: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: GREY_LIGHT, - button_color: GREY_DARK, - icon_color: GREY_LIGHT, - background_color: WHITE, - }, - } -} - pub fn button_wipe_confirm() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_WIPE_COLOR, - button_color: BLD_WIPE_BTN_COLOR, - icon_color: BLD_WIPE_COLOR, - background_color: BLD_WIPE_COLOR, + text_color: GREY_EXTRA_LIGHT, + button_color: RED, + icon_color: GREY_EXTRA_LIGHT, + background_color: RED, }, active: &ButtonStyle { font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_WIPE_COLOR, - button_color: BLD_WIPE_BTN_COLOR_ACTIVE, - icon_color: BLD_WIPE_COLOR, - background_color: BLD_WIPE_COLOR, + text_color: RED, + button_color: GREY_EXTRA_LIGHT, + icon_color: RED, + background_color: GREY_EXTRA_LIGHT, }, disabled: &ButtonStyle { font: fonts::FONT_SATOSHI_MEDIUM_26, @@ -180,72 +125,42 @@ pub fn button_wipe_confirm() -> ButtonStyleSheet { pub fn button_bld_menu() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_FG, + font: fonts::FONT_SATOSHI_REGULAR_38, + text_color: GREY_EXTRA_LIGHT, button_color: BLD_BG, - icon_color: BLD_FG, + icon_color: GREY_EXTRA_LIGHT, background_color: BLD_BG, }, active: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_FG, - button_color: BLD_BG, - icon_color: BLD_FG, - background_color: BLD_BG, + font: fonts::FONT_SATOSHI_REGULAR_38, + text_color: GREY_DARK, + button_color: GREY_SUPER_DARK, + icon_color: GREY_DARK, + background_color: GREY_SUPER_DARK, }, disabled: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: GREY_LIGHT, + font: fonts::FONT_SATOSHI_REGULAR_38, + text_color: GREY_DARK, button_color: BLD_BG, - icon_color: GREY_LIGHT, - background_color: BLD_BG, - }, - } -} - -pub fn button_bld() -> ButtonStyleSheet { - ButtonStyleSheet { - normal: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_FG, - button_color: BLD_BTN_COLOR, - icon_color: BLD_FG, - background_color: BLD_BG, - }, - active: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: BLD_FG, - button_color: BLD_BTN_COLOR_ACTIVE, - icon_color: BLD_FG, - background_color: BLD_BG, - }, - disabled: &ButtonStyle { - font: fonts::FONT_SATOSHI_MEDIUM_26, - text_color: GREY_LIGHT, - button_color: BLD_BTN_COLOR, - icon_color: GREY_LIGHT, + icon_color: GREY_DARK, background_color: BLD_BG, }, } } pub const fn text_title(bg: Color) -> TextStyle { - TextStyle::new( - fonts::FONT_SATOSHI_MEDIUM_26, - BLD_TITLE_COLOR, - bg, - BLD_TITLE_COLOR, - BLD_TITLE_COLOR, - ) + TextStyle::new(fonts::FONT_SATOSHI_MEDIUM_26, GREY, bg, GREY, GREY) } -pub const TEXT_NORMAL: TextStyle = TextStyle::new( +pub const TEXT_FW_FINGERPRINT: TextStyle = TextStyle::new( fonts::FONT_SATOSHI_REGULAR_38, - BLD_FG, + GREY_EXTRA_LIGHT, BLD_BG, BLD_FG, BLD_FG, -); +) +.with_line_breaking(BreakWordsNoHyphen); + pub const TEXT_WARNING: TextStyle = TextStyle::new( fonts::FONT_SATOSHI_REGULAR_38, BLD_WARN_COLOR, @@ -253,39 +168,3 @@ pub const TEXT_WARNING: TextStyle = TextStyle::new( BLD_WARN_COLOR, BLD_WARN_COLOR, ); -pub const fn text_fingerprint(bg: Color) -> TextStyle { - TextStyle::new(fonts::FONT_SATOSHI_REGULAR_38, BLD_FG, bg, BLD_FG, BLD_FG) - .with_line_breaking(BreakWordsNoHyphen) -} -pub const TEXT_BOLD: TextStyle = TextStyle::new( - fonts::FONT_SATOSHI_REGULAR_38, - BLD_FG, - BLD_BG, - BLD_FG, - BLD_FG, -); -pub const TEXT_WIPE_BOLD: TextStyle = TextStyle::new( - fonts::FONT_SATOSHI_REGULAR_38, - BLD_WIPE_TEXT_COLOR, - BLD_WIPE_COLOR, - BLD_WIPE_TEXT_COLOR, - BLD_WIPE_TEXT_COLOR, -); -pub const TEXT_WIPE_NORMAL: TextStyle = TextStyle::new( - fonts::FONT_SATOSHI_REGULAR_38, - BLD_WIPE_TEXT_COLOR, - BLD_WIPE_COLOR, - BLD_WIPE_TEXT_COLOR, - BLD_WIPE_TEXT_COLOR, -); - -pub const RESULT_WIPE: ResultStyle = ResultStyle::new( - BLD_WIPE_TEXT_COLOR, - BLD_WIPE_COLOR, - BLD_WIPE_CANCEL_BTN_COLOR, -); - -pub const RESULT_FW_INSTALL: ResultStyle = ResultStyle::new(BLD_FG, BLD_BG, BLD_BTN_COLOR); - -pub const RESULT_INITIAL: ResultStyle = - ResultStyle::new(BLD_FG, WELCOME_COLOR, WELCOME_HIGHLIGHT_COLOR); diff --git a/core/embed/rust/src/ui/layout_eckhart/theme/mod.rs b/core/embed/rust/src/ui/layout_eckhart/theme/mod.rs index f331ccdb71..48eb02db8a 100644 --- a/core/embed/rust/src/ui/layout_eckhart/theme/mod.rs +++ b/core/embed/rust/src/ui/layout_eckhart/theme/mod.rs @@ -6,10 +6,10 @@ pub mod firmware; #[cfg(feature = "micropython")] pub use firmware::*; -use crate::ui::{display::Color, util::include_icon}; +use crate::ui::{component::text::TextStyle, display::Color, geometry::Insets, util::include_icon}; use super::{ - component::{ButtonStyle, ButtonStyleSheet, ResultStyle}, + component::{ButtonStyle, ButtonStyleSheet}, fonts, }; @@ -38,10 +38,18 @@ pub const ORANGE_EXTRA_DARK: Color = Color::rgb(0x12, 0x07, 0x04); pub const YELLOW: Color = Color::rgb(0xFF, 0xE4, 0x58); +pub const BLUE: Color = Color::rgb(0x00, 0x46, 0xFF); + pub const RED: Color = Color::rgb(0xFF, 0x30, 0x30); pub const FATAL_ERROR_COLOR: Color = Color::rgb(0xE7, 0x0E, 0x0E); pub const FATAL_ERROR_HIGHLIGHT_COLOR: Color = Color::rgb(0xFF, 0x41, 0x41); +// Common constants +pub const HEADER_HEIGHT: i16 = 96; // [px] +pub const SIDE_INSETS: Insets = Insets::sides(24); // [px] +pub const ACTION_BAR_HEIGHT: i16 = 90; // [px] +pub const TEXT_VERTICAL_SPACING: i16 = 24; // [px] + // UI icons (white color). include_icon!(ICON_CHEVRON_DOWN, "layout_eckhart/res/chevron_down.toif"); include_icon!( @@ -94,6 +102,22 @@ include_icon!(ICON_BORDER_TR, "layout_eckhart/res/border/TR.toif"); include_icon!(ICON_PLUS, "layout_eckhart/res/plus.toif"); include_icon!(ICON_MINUS, "layout_eckhart/res/minus.toif"); +// Common text styles and button styles must use fonts accessible from both +// bootloader and firmware + +pub const TEXT_NORMAL: TextStyle = + TextStyle::new(fonts::FONT_SATOSHI_REGULAR_38, GREY_EXTRA_LIGHT, BG, FG, FG); +pub const TEXT_SMALL: TextStyle = + TextStyle::new(fonts::FONT_SATOSHI_MEDIUM_26, GREY_EXTRA_LIGHT, BG, FG, FG); +pub const TEXT_SMALL_RED: TextStyle = TextStyle { + text_color: RED, + ..TEXT_SMALL +}; +pub const TEXT_SMALL_GREY: TextStyle = TextStyle { + text_color: GREY, + ..TEXT_SMALL +}; + pub const fn button_default() -> ButtonStyleSheet { ButtonStyleSheet { normal: &ButtonStyle { @@ -119,10 +143,3 @@ pub const fn button_default() -> ButtonStyleSheet { }, } } - -// Result constants -pub const RESULT_PADDING: i16 = 6; -pub const RESULT_FOOTER_START: i16 = 171; -pub const RESULT_FOOTER_HEIGHT: i16 = 62; -pub const RESULT_ERROR: ResultStyle = - ResultStyle::new(FG, FATAL_ERROR_COLOR, FATAL_ERROR_HIGHLIGHT_COLOR);