🚧 Use theme crate instead of hard-code.

Cargo.toml

@@ -35,6 +35,7 @@ uuid = { version = "^1", features = [
     'macro-diagnostics',
     'serde',
 ] }
+yuuka = "^0.3"
 
 log = "^0.4"
 env_logger = "^0.11"

packages/theme/Cargo.toml

@@ -10,4 +10,15 @@ publish = false
 crate-type = ["cdylib", "rlib"]
 
 [dependencies]
+anyhow = { workspace = true }
+async-trait = { workspace = true }
+derive_more = { workspace = true }
+once_cell = { workspace = true }
+
+serde = { workspace = true }
+serde_json = { workspace = true }
+strum = { workspace = true }
+base64 = { workspace = true }
+yuuka = { workspace = true }
+
 yew = { workspace = true }

packages/theme/src/prelude/element/designs/color.rs

@@ -1,23 +1,12 @@
-use crate::types::{Color, ColorType};
+use once_cell::sync::Lazy;
 
-#[derive(Debug, Clone, Copy, PartialEq)]
-pub struct ColorWrapper(ColorType);
+use crate::types::{Color, ColorMap};
 
-impl From<ColorType> for ColorWrapper {
-    fn from(color_type: ColorType) -> Self {
-        Self(color_type)
-    }
-}
-
-impl From<ColorWrapper> for Color {
-    fn from(color_wrapper: ColorWrapper) -> Self {
-        match color_wrapper.0 {
-            ColorType::Primary => Self::from_rgb_str_hex("#409EFF"),
-            ColorType::Secondary => Self::from_rgb_str_hex("#79bbff"),
-            ColorType::Success => Self::from_rgb_str_hex("#67C23A"),
-            ColorType::Warning => Self::from_rgb_str_hex("#E6A23C"),
-            ColorType::Error => Self::from_rgb_str_hex("#F56C6C"),
-            ColorType::Info => Self::from_rgb_str_hex("#909399"),
-        }
-    }
-}
+pub static COLOR_MAP: Lazy<ColorMap> = Lazy::new(|| ColorMap {
+    primary: Color::from_rgb_str_hex("#409EFF"),
+    secondary: Color::from_rgb_str_hex("#79bbff"),
+    success: Color::from_rgb_str_hex("#67C23A"),
+    warning: Color::from_rgb_str_hex("#E6A23C"),
+    error: Color::from_rgb_str_hex("#F56C6C"),
+    info: Color::from_rgb_str_hex("#909399"),
+});

packages/theme/src/types/color.rs

@@ -1,3 +1,5 @@
+use serde::{Deserialize, Serialize};
+
 #[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
 pub enum ColorType {
     #[default]
@@ -9,6 +11,16 @@ pub enum ColorType {
     Warning,
 }
 
+#[derive(Debug, PartialEq, Clone, Serialize, Deserialize)]
+pub struct ColorMap {
+    pub primary: Color,
+    pub secondary: Color,
+    pub success: Color,
+    pub error: Color,
+    pub info: Color,
+    pub warning: Color,
+}
+
 #[derive(Debug, PartialEq, Clone, Copy)]
 pub struct Color {
     pub red: f32,
@@ -58,3 +70,22 @@ impl Color {
         )
     }
 }
+
+impl Serialize for Color {
+    fn serialize<S>(&self, serializer: S) -> Result<S::Ok, S::Error>
+    where
+        S: serde::Serializer,
+    {
+        serializer.serialize_str(&self.to_rgb_str())
+    }
+}
+
+impl<'de> Deserialize<'de> for Color {
+    fn deserialize<D>(deserializer: D) -> Result<Color, D::Error>
+    where
+        D: serde::Deserializer<'de>,
+    {
+        let s = String::deserialize(deserializer)?;
+        Ok(Color::from_rgb_str_hex(&s))
+    }
+}

website/Cargo.toml

@@ -17,15 +17,18 @@ name = "dev"
 
 [dependencies]
 hikari-components = { path = "../packages/components" }
+hikari-theme = { path = "../packages/theme" }
 hikari-boot = { path = "../packages/boot" }
 
 anyhow = { workspace = true }
 async-trait = { workspace = true }
-base64 = { workspace = true }
 derive_more = { workspace = true }
+
 serde = { workspace = true }
 serde_json = { workspace = true }
 strum = { workspace = true }
+base64 = { workspace = true }
+yuuka = { workspace = true }
 
 console_log = { workspace = true }
 gloo = { workspace = true }

website/src/app.rs

@@ -1,9 +1,11 @@
-use serde::{Deserialize, Serialize};
+use yuuka::derive_struct;
 
 use yew_router::prelude::*;
 
 use crate::pages::*;
 use hikari_boot::{DeclType, DeriveApplication, DeriveRoutes, RoutesOutsideProps};
+use hikari_components::prelude::element::designs::color::COLOR_MAP;
+use hikari_theme::types::ColorMap;
 
 #[derive(PartialEq, Clone, Debug, DeriveRoutes, Routable)]
 pub enum Routes {
@@ -24,29 +26,9 @@ pub enum Routes {
     NotFound,
 }
 
-#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
-pub struct AppStates {
-    pub primary_color: String,
-    pub secondary_color: String,
-
-    pub error_color: String,
-    pub warning_color: String,
-    pub success_color: String,
-    pub info_color: String,
-
-    pub primary_text_color: String,
-    pub secondary_text_color: String,
-    pub button_text_color: String,
-    pub disabled_text_color: String,
-    pub placeholder_text_color: String,
-
-    pub shadow_color_rgba: String,
-    pub background_color: String,
-
-    pub large_text_size: String,
-    pub medium_text_size: String,
-    pub small_text_size: String,
-}
+derive_struct!(AppStates {
+    color: ColorMap = COLOR_MAP.clone()
+});
 
 #[derive(Clone, Debug, DeriveApplication)]
 pub struct App;
@@ -66,19 +48,6 @@ impl DeclType for App {
                 --color-warning: {};
                 --color-success: {};
                 --color-info: {};
-
-                --color-primary-text: {};
-                --color-secondary-text: {};
-                --color-button-text: {};
-                --color-disabled-text: {};
-                --color-placeholder-text: {};
-
-                --color-shadow-rgba: {};
-                --color-background: {};
-
-                --size-large-text: {};
-                --size-medium-text: {};
-                --size-small-text: {};
             }}
 
             
@@ -93,23 +62,13 @@ impl DeclType for App {
                 background-color: rgb(var(--color-background));
                 color: rgb(var(--color-primary-text));
             }}
-        "#,
-            props.states.primary_color.to_owned(),
-            props.states.secondary_color.to_owned(),
-            props.states.error_color.to_owned(),
-            props.states.warning_color.to_owned(),
-            props.states.success_color.to_owned(),
-            props.states.info_color.to_owned(),
-            props.states.primary_text_color.to_owned(),
-            props.states.secondary_text_color.to_owned(),
-            props.states.button_text_color.to_owned(),
-            props.states.disabled_text_color.to_owned(),
-            props.states.placeholder_text_color.to_owned(),
-            props.states.shadow_color_rgba.to_owned(),
-            props.states.background_color.to_owned(),
-            props.states.large_text_size.to_owned(),
-            props.states.medium_text_size.to_owned(),
-            props.states.small_text_size.to_owned(),
+            "#,
+            props.states.color.primary.to_rgb_str(),
+            props.states.color.secondary.to_rgb_str(),
+            props.states.color.error.to_rgb_str(),
+            props.states.color.warning.to_rgb_str(),
+            props.states.color.success.to_rgb_str(),
+            props.states.color.info.to_rgb_str(),
         );
 
         Ok(yew::html! {

website/src/lib.rs

@@ -1,6 +1,5 @@
 pub mod app;
 pub mod pages;
-pub mod utils;
 
 #[cfg(target_arch = "wasm32")]
 mod web_entry;