🧱 Design some prototype for theme.

celestia-island · Oct 30, 2024 · 4e7462c · 4e7462c
1 parent c50c05b
commit 4e7462c
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 38 deletions.
diff --git a/packages/theme/src/context.rs b/packages/theme/src/context.rs
@@ -3,11 +3,11 @@ use yuuka::derive_struct;
 use yew::prelude::*;
 
 use crate::{
-    prelude::element::designs::color::COLOR_MAP,
-    types::{ColorLevel, ColorMap},
+    prelude::element::palette::COLOR_MAP,
+    types::{ColorLevel, Palette},
 };
 
-derive_struct!(pub Theme { color: ColorMap = COLOR_MAP.clone() });
+derive_struct!(pub Theme { palette: Palette = COLOR_MAP.clone() });
 
 #[derive(Properties, Debug, PartialEq)]
 pub struct ThemeContextProviderProps {
@@ -78,30 +78,30 @@ pub fn ThemeContextShell(props: &ThemeContextProviderProps) -> Html {
                     body {{
                         font-family: 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
                     }}"#,
-                    props.context.color.primary.to_rgb_str(),
-                    props.context.color.secondary.to_rgb_str(),
-                    props.context.color.success.to_rgb_str(),
-                    props.context.color.warning.to_rgb_str(),
-                    props.context.color.error.to_rgb_str(),
-                    props.context.color.info.to_rgb_str(),
-                    props.context.color.primary.to_rgba_str(ColorLevel::Most),
-                    props.context.color.secondary.to_rgba_str(ColorLevel::Most),
-                    props.context.color.success.to_rgba_str(ColorLevel::Most),
-                    props.context.color.warning.to_rgba_str(ColorLevel::Most),
-                    props.context.color.error.to_rgba_str(ColorLevel::Most),
-                    props.context.color.info.to_rgba_str(ColorLevel::Most),
-                    props.context.color.primary.to_rgba_str(ColorLevel::Half),
-                    props.context.color.secondary.to_rgba_str(ColorLevel::Half),
-                    props.context.color.success.to_rgba_str(ColorLevel::Half),
-                    props.context.color.warning.to_rgba_str(ColorLevel::Half),
-                    props.context.color.error.to_rgba_str(ColorLevel::Half),
-                    props.context.color.info.to_rgba_str(ColorLevel::Half),
-                    props.context.color.primary.to_rgba_str(ColorLevel::Less),
-                    props.context.color.secondary.to_rgba_str(ColorLevel::Less),
-                    props.context.color.success.to_rgba_str(ColorLevel::Less),
-                    props.context.color.warning.to_rgba_str(ColorLevel::Less),
-                    props.context.color.error.to_rgba_str(ColorLevel::Less),
-                    props.context.color.info.to_rgba_str(ColorLevel::Less)
+                    props.context.palette.primary.to_rgb_str(),
+                    props.context.palette.secondary.to_rgb_str(),
+                    props.context.palette.success.to_rgb_str(),
+                    props.context.palette.warning.to_rgb_str(),
+                    props.context.palette.error.to_rgb_str(),
+                    props.context.palette.info.to_rgb_str(),
+                    props.context.palette.primary.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.secondary.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.success.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.warning.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.error.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.info.to_rgba_str(ColorLevel::Most),
+                    props.context.palette.primary.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.secondary.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.success.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.warning.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.error.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.info.to_rgba_str(ColorLevel::Half),
+                    props.context.palette.primary.to_rgba_str(ColorLevel::Less),
+                    props.context.palette.secondary.to_rgba_str(ColorLevel::Less),
+                    props.context.palette.success.to_rgba_str(ColorLevel::Less),
+                    props.context.palette.warning.to_rgba_str(ColorLevel::Less),
+                    props.context.palette.error.to_rgba_str(ColorLevel::Less),
+                    props.context.palette.info.to_rgba_str(ColorLevel::Less)
                 )}
             </style>
 

diff --git a/packages/theme/src/prelude/element/designs/mod.rs b/packages/theme/src/prelude/element/designs/mod.rs
diff --git a/...eme/src/prelude/element/designs/layout.rs → packages/theme/src/prelude/element/layout.rs b/...eme/src/prelude/element/designs/layout.rs → packages/theme/src/prelude/element/layout.rs
diff --git a/packages/theme/src/prelude/element/mod.rs b/packages/theme/src/prelude/element/mod.rs
@@ -1,3 +1,7 @@
-pub mod designs;
+pub mod layout;
+pub mod palette;
+pub mod skin;
+pub mod transition;
+pub mod typography;
 
 // https://element-plus.org/
diff --git a/...heme/src/prelude/element/designs/color.rs → ...ages/theme/src/prelude/element/palette.rs b/...heme/src/prelude/element/designs/color.rs → ...ages/theme/src/prelude/element/palette.rs
@@ -1,8 +1,8 @@
 use once_cell::sync::Lazy;
 
-use crate::types::{Color, ColorMap};
+use crate::types::{Color, Palette};
 
-pub static COLOR_MAP: Lazy<ColorMap> = Lazy::new(|| ColorMap {
+pub static COLOR_MAP: Lazy<Palette> = Lazy::new(|| Palette {
     primary: Color::from_rgb_str_hex("#409EFF"),
     secondary: Color::from_rgb_str_hex("#79bbff"),
     success: Color::from_rgb_str_hex("#67C23A"),

diff --git a/...theme/src/prelude/element/designs/font.rs → packages/theme/src/prelude/element/skin.rs b/...theme/src/prelude/element/designs/font.rs → packages/theme/src/prelude/element/skin.rs
diff --git a/packages/theme/src/prelude/element/transition.rs b/packages/theme/src/prelude/element/transition.rs
diff --git a/packages/theme/src/prelude/element/typography.rs b/packages/theme/src/prelude/element/typography.rs
diff --git a/packages/theme/src/types/size.rs → packages/theme/src/types/layout.rs b/packages/theme/src/types/size.rs → packages/theme/src/types/layout.rs
diff --git a/packages/theme/src/types/mod.rs b/packages/theme/src/types/mod.rs
@@ -1,5 +1,11 @@
-mod color;
-mod size;
+mod layout;
+mod palette;
+mod skin;
+mod transition;
+mod typography;
 
-pub use color::*;
-pub use size::*;
+pub use layout::*;
+pub use palette::*;
+pub use skin::*;
+pub use transition::*;
+pub use typography::*;
diff --git a/packages/theme/src/types/color.rs → packages/theme/src/types/palette.rs b/packages/theme/src/types/color.rs → packages/theme/src/types/palette.rs
@@ -32,7 +32,7 @@ impl Into<f64> for ColorLevel {
 }
 
 #[derive(Debug, PartialEq, Clone, Serialize, Deserialize)]
-pub struct ColorMap {
+pub struct Palette {
     pub primary: Color,
     pub secondary: Color,
     pub success: Color,

diff --git a/packages/theme/src/types/skin.rs b/packages/theme/src/types/skin.rs
diff --git a/packages/theme/src/types/transition.rs b/packages/theme/src/types/transition.rs
diff --git a/packages/theme/src/types/typography.rs b/packages/theme/src/types/typography.rs