Feathers theme now uses ThemeToken(SmolStr) instread of &'static str (#20969)

Fixes: #20967

EIBTI!

Author: viridia

crates/bevy_feathers/Cargo.toml

@@ -31,6 +31,7 @@ bevy_ui = { path = "../bevy_ui", version = "0.17.0-dev", features = [
 ] }
 bevy_ui_render = { path = "../bevy_ui_render", version = "0.17.0-dev" }
 bevy_window = { path = "../bevy_window", version = "0.17.0-dev" }
+smol_str = { version = "0.2", default-features = false }
 
 # other
 accesskit = "0.21"

crates/bevy_feathers/src/controls/slider.rs

@@ -172,12 +172,12 @@ fn set_slider_styles(
     gradient: &mut BackgroundGradient,
     commands: &mut Commands,
 ) {
-    let bar_color = theme.color(match disabled {
+    let bar_color = theme.color(&match disabled {
         true => tokens::SLIDER_BAR_DISABLED,
         false => tokens::SLIDER_BAR,
     });
 
-    let bg_color = theme.color(tokens::SLIDER_BG);
+    let bg_color = theme.color(&tokens::SLIDER_BG);
 
     let cursor_shape = match disabled {
         true => bevy_window::SystemCursorIcon::NotAllowed,

crates/bevy_feathers/src/dark_theme.rs

@@ -9,117 +9,90 @@ use crate::theme::ThemeProps;
 pub fn create_dark_theme() -> ThemeProps {
     ThemeProps {
         color: HashMap::from([
-            (tokens::WINDOW_BG.into(), palette::GRAY_0),
+            (tokens::WINDOW_BG, palette::GRAY_0),
             // Button
-            (tokens::BUTTON_BG.into(), palette::GRAY_3),
+            (tokens::BUTTON_BG, palette::GRAY_3),
+            (tokens::BUTTON_BG_HOVER, palette::GRAY_3.lighter(0.05)),
+            (tokens::BUTTON_BG_PRESSED, palette::GRAY_3.lighter(0.1)),
+            (tokens::BUTTON_BG_DISABLED, palette::GRAY_2),
+            (tokens::BUTTON_PRIMARY_BG, palette::ACCENT),
             (
-                tokens::BUTTON_BG_HOVER.into(),
-                palette::GRAY_3.lighter(0.05),
-            ),
-            (
-                tokens::BUTTON_BG_PRESSED.into(),
-                palette::GRAY_3.lighter(0.1),
-            ),
-            (tokens::BUTTON_BG_DISABLED.into(), palette::GRAY_2),
-            (tokens::BUTTON_PRIMARY_BG.into(), palette::ACCENT),
-            (
-                tokens::BUTTON_PRIMARY_BG_HOVER.into(),
+                tokens::BUTTON_PRIMARY_BG_HOVER,
                 palette::ACCENT.lighter(0.05),
             ),
             (
-                tokens::BUTTON_PRIMARY_BG_PRESSED.into(),
+                tokens::BUTTON_PRIMARY_BG_PRESSED,
                 palette::ACCENT.lighter(0.1),
             ),
-            (tokens::BUTTON_PRIMARY_BG_DISABLED.into(), palette::GRAY_2),
-            (tokens::BUTTON_TEXT.into(), palette::WHITE),
+            (tokens::BUTTON_PRIMARY_BG_DISABLED, palette::GRAY_2),
+            (tokens::BUTTON_TEXT, palette::WHITE),
+            (tokens::BUTTON_TEXT_DISABLED, palette::WHITE.with_alpha(0.5)),
+            (tokens::BUTTON_PRIMARY_TEXT, palette::WHITE),
             (
-                tokens::BUTTON_TEXT_DISABLED.into(),
-                palette::WHITE.with_alpha(0.5),
-            ),
-            (tokens::BUTTON_PRIMARY_TEXT.into(), palette::WHITE),
-            (
-                tokens::BUTTON_PRIMARY_TEXT_DISABLED.into(),
+                tokens::BUTTON_PRIMARY_TEXT_DISABLED,
                 palette::WHITE.with_alpha(0.5),
             ),
             // Slider
-            (tokens::SLIDER_BG.into(), palette::GRAY_1),
-            (tokens::SLIDER_BAR.into(), palette::ACCENT),
-            (tokens::SLIDER_BAR_DISABLED.into(), palette::GRAY_2),
-            (tokens::SLIDER_TEXT.into(), palette::WHITE),
-            (
-                tokens::SLIDER_TEXT_DISABLED.into(),
-                palette::WHITE.with_alpha(0.5),
-            ),
+            (tokens::SLIDER_BG, palette::GRAY_1),
+            (tokens::SLIDER_BAR, palette::ACCENT),
+            (tokens::SLIDER_BAR_DISABLED, palette::GRAY_2),
+            (tokens::SLIDER_TEXT, palette::WHITE),
+            (tokens::SLIDER_TEXT_DISABLED, palette::WHITE.with_alpha(0.5)),
             // Checkbox
-            (tokens::CHECKBOX_BG.into(), palette::GRAY_3),
-            (tokens::CHECKBOX_BG_CHECKED.into(), palette::ACCENT),
+            (tokens::CHECKBOX_BG, palette::GRAY_3),
+            (tokens::CHECKBOX_BG_CHECKED, palette::ACCENT),
             (
-                tokens::CHECKBOX_BG_DISABLED.into(),
+                tokens::CHECKBOX_BG_DISABLED,
                 palette::GRAY_1.with_alpha(0.5),
             ),
             (
-                tokens::CHECKBOX_BG_CHECKED_DISABLED.into(),
+                tokens::CHECKBOX_BG_CHECKED_DISABLED,
                 palette::GRAY_3.with_alpha(0.5),
             ),
-            (tokens::CHECKBOX_BORDER.into(), palette::GRAY_3),
+            (tokens::CHECKBOX_BORDER, palette::GRAY_3),
+            (tokens::CHECKBOX_BORDER_HOVER, palette::GRAY_3.lighter(0.1)),
             (
-                tokens::CHECKBOX_BORDER_HOVER.into(),
-                palette::GRAY_3.lighter(0.1),
-            ),
-            (
-                tokens::CHECKBOX_BORDER_DISABLED.into(),
+                tokens::CHECKBOX_BORDER_DISABLED,
                 palette::GRAY_3.with_alpha(0.5),
             ),
-            (tokens::CHECKBOX_MARK.into(), palette::WHITE),
-            (tokens::CHECKBOX_MARK_DISABLED.into(), palette::LIGHT_GRAY_2),
-            (tokens::CHECKBOX_TEXT.into(), palette::LIGHT_GRAY_1),
+            (tokens::CHECKBOX_MARK, palette::WHITE),
+            (tokens::CHECKBOX_MARK_DISABLED, palette::LIGHT_GRAY_2),
+            (tokens::CHECKBOX_TEXT, palette::LIGHT_GRAY_1),
             (
-                tokens::CHECKBOX_TEXT_DISABLED.into(),
+                tokens::CHECKBOX_TEXT_DISABLED,
                 palette::LIGHT_GRAY_1.with_alpha(0.5),
             ),
             // Radio
-            (tokens::RADIO_BORDER.into(), palette::GRAY_3),
-            (
-                tokens::RADIO_BORDER_HOVER.into(),
-                palette::GRAY_3.lighter(0.1),
-            ),
+            (tokens::RADIO_BORDER, palette::GRAY_3),
+            (tokens::RADIO_BORDER_HOVER, palette::GRAY_3.lighter(0.1)),
             (
-                tokens::RADIO_BORDER_DISABLED.into(),
+                tokens::RADIO_BORDER_DISABLED,
                 palette::GRAY_3.with_alpha(0.5),
             ),
-            (tokens::RADIO_MARK.into(), palette::ACCENT),
-            (
-                tokens::RADIO_MARK_DISABLED.into(),
-                palette::ACCENT.with_alpha(0.5),
-            ),
-            (tokens::RADIO_TEXT.into(), palette::LIGHT_GRAY_1),
+            (tokens::RADIO_MARK, palette::ACCENT),
+            (tokens::RADIO_MARK_DISABLED, palette::ACCENT.with_alpha(0.5)),
+            (tokens::RADIO_TEXT, palette::LIGHT_GRAY_1),
             (
-                tokens::RADIO_TEXT_DISABLED.into(),
+                tokens::RADIO_TEXT_DISABLED,
                 palette::LIGHT_GRAY_1.with_alpha(0.5),
             ),
             // Toggle Switch
-            (tokens::SWITCH_BG.into(), palette::GRAY_3),
-            (tokens::SWITCH_BG_CHECKED.into(), palette::ACCENT),
+            (tokens::SWITCH_BG, palette::GRAY_3),
+            (tokens::SWITCH_BG_CHECKED, palette::ACCENT),
+            (tokens::SWITCH_BG_DISABLED, palette::GRAY_1.with_alpha(0.5)),
             (
-                tokens::SWITCH_BG_DISABLED.into(),
-                palette::GRAY_1.with_alpha(0.5),
-            ),
-            (
-                tokens::SWITCH_BG_CHECKED_DISABLED.into(),
+                tokens::SWITCH_BG_CHECKED_DISABLED,
                 palette::GRAY_3.with_alpha(0.5),
             ),
-            (tokens::SWITCH_BORDER.into(), palette::GRAY_3),
-            (
-                tokens::SWITCH_BORDER_HOVER.into(),
-                palette::GRAY_3.lighter(0.1),
-            ),
+            (tokens::SWITCH_BORDER, palette::GRAY_3),
+            (tokens::SWITCH_BORDER_HOVER, palette::GRAY_3.lighter(0.1)),
             (
-                tokens::SWITCH_BORDER_DISABLED.into(),
+                tokens::SWITCH_BORDER_DISABLED,
                 palette::GRAY_3.with_alpha(0.5),
             ),
-            (tokens::SWITCH_SLIDE.into(), palette::LIGHT_GRAY_2),
+            (tokens::SWITCH_SLIDE, palette::LIGHT_GRAY_2),
             (
-                tokens::SWITCH_SLIDE_DISABLED.into(),
+                tokens::SWITCH_SLIDE_DISABLED,
                 palette::LIGHT_GRAY_2.with_alpha(0.3),
             ),
         ]),

crates/bevy_feathers/src/theme.rs

@@ -16,13 +16,42 @@ use bevy_platform::collections::HashMap;
 use bevy_reflect::{prelude::ReflectDefault, Reflect};
 use bevy_text::TextColor;
 use bevy_ui::{BackgroundColor, BorderColor};
+use smol_str::SmolStr;
+
+/// A design token for the theme. This serves as the lookup key for the theme properties.
+#[derive(Clone, PartialEq, Eq, Hash, Reflect)]
+pub struct ThemeToken(SmolStr);
+
+impl ThemeToken {
+    /// Construct a new [`ThemeToken`] from a [`SmolStr`].
+    pub const fn new(text: SmolStr) -> Self {
+        Self(text)
+    }
+
+    /// Construct a new [`ThemeToken`] from a static string.
+    pub const fn new_static(text: &'static str) -> Self {
+        Self(SmolStr::new_static(text))
+    }
+}
+
+impl core::fmt::Display for ThemeToken {
+    fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
+        write!(f, "{}", self.0)
+    }
+}
+
+impl core::fmt::Debug for ThemeToken {
+    fn fmt(&self, f: &mut core::fmt::Formatter<'_>) -> core::fmt::Result {
+        write!(f, "ThemeToken({:?})", self.0)
+    }
+}
 
 /// A collection of properties that make up a theme.
 #[derive(Default, Clone, Reflect, Debug)]
 #[reflect(Default, Debug)]
 pub struct ThemeProps {
     /// Map of design tokens to colors.
-    pub color: HashMap<String, Color>,
+    pub color: HashMap<ThemeToken, Color>,
     // Other style property types to be added later.
 }
 
@@ -34,7 +63,7 @@ pub struct UiTheme(pub ThemeProps);
 impl UiTheme {
     /// Lookup a color by design token. If the theme does not have an entry for that token,
     /// logs a warning and returns an error color.
-    pub fn color<'a>(&self, token: &'a str) -> Color {
+    pub fn color(&self, token: &ThemeToken) -> Color {
         let color = self.0.color.get(token);
         match color {
             Some(c) => *c,
@@ -47,34 +76,36 @@ impl UiTheme {
     }
 
     /// Associate a design token with a given color.
-    pub fn set_color(&mut self, token: impl Into<String>, color: Color) {
-        self.0.color.insert(token.into(), color);
+    pub fn set_color(&mut self, token: &str, color: Color) {
+        self.0
+            .color
+            .insert(ThemeToken::new(SmolStr::new(token)), color);
     }
 }
 
 /// Component which causes the background color of an entity to be set based on a theme color.
-#[derive(Component, Clone, Copy)]
+#[derive(Component, Clone)]
 #[require(BackgroundColor)]
 #[component(immutable)]
 #[derive(Reflect)]
 #[reflect(Component, Clone)]
-pub struct ThemeBackgroundColor(pub &'static str);
+pub struct ThemeBackgroundColor(pub ThemeToken);
 
 /// Component which causes the border color of an entity to be set based on a theme color.
 /// Only supports setting all borders to the same color.
-#[derive(Component, Clone, Copy)]
+#[derive(Component, Clone)]
 #[require(BorderColor)]
 #[component(immutable)]
 #[derive(Reflect)]
 #[reflect(Component, Clone)]
-pub struct ThemeBorderColor(pub &'static str);
+pub struct ThemeBorderColor(pub ThemeToken);
 
 /// Component which causes the inherited text color of an entity to be set based on a theme color.
-#[derive(Component, Clone, Copy)]
+#[derive(Component, Clone)]
 #[component(immutable)]
 #[derive(Reflect)]
 #[reflect(Component, Clone)]
-pub struct ThemeFontColor(pub &'static str);
+pub struct ThemeFontColor(pub ThemeToken);
 
 /// A marker component that is used to indicate that the text entity wants to opt-in to using
 /// inherited text styles.
@@ -90,12 +121,12 @@ pub(crate) fn update_theme(
     if theme.is_changed() {
         // Update all background colors
         for (mut bg, theme_bg) in q_background.iter_mut() {
-            bg.0 = theme.color(theme_bg.0);
+            bg.0 = theme.color(&theme_bg.0);
         }
 
         // Update all border colors
         for (mut border, theme_border) in q_border.iter_mut() {
-            border.set_all(theme.color(theme_border.0));
+            border.set_all(theme.color(&theme_border.0));
         }
     }
 }
@@ -110,7 +141,7 @@ pub(crate) fn on_changed_background(
 ) {
     // Update background colors where the design token has changed.
     if let Ok((mut bg, theme_bg)) = q_background.get_mut(insert.entity) {
-        bg.0 = theme.color(theme_bg.0);
+        bg.0 = theme.color(&theme_bg.0);
     }
 }
 
@@ -121,7 +152,7 @@ pub(crate) fn on_changed_border(
 ) {
     // Update background colors where the design token has changed.
     if let Ok((mut border, theme_border)) = q_border.get_mut(insert.entity) {
-        border.set_all(theme.color(theme_border.0));
+        border.set_all(theme.color(&theme_border.0));
     }
 }
 
@@ -134,7 +165,7 @@ pub(crate) fn on_changed_font_color(
     mut commands: Commands,
 ) {
     if let Ok(token) = font_color.get(insert.entity) {
-        let color = theme.color(token.0);
+        let color = theme.color(&token.0);
         commands
             .entity(insert.entity)
             .insert(Propagate(TextColor(color)));