🚧 Add some theme structure keys.

packages/components/src/data/paragraph/mod.rs

@@ -7,7 +7,6 @@ mod typography;
 
 mod avatar;
 mod icon;
-mod image;
 
 pub use affix::Affix;
 pub use badge::Badge;
@@ -18,4 +17,3 @@ pub use typography::*;
 
 pub use avatar::Avatar;
 pub use icon::Icon;
-pub use image::Image;

packages/components/src/data/paragraph/typography/mod.rs

@@ -7,7 +7,7 @@ mod italic;
 mod mark;
 mod quote;
 mod ruby;
-mod size;
+mod sizing;
 mod split;
 mod underline;
 
@@ -20,6 +20,9 @@ pub use italic::Italic;
 pub use mark::Mark;
 pub use quote::{BlockQuote, Quote};
 pub use ruby::Ruby;
-pub use size::{Size, Sizing};
-pub use split::{Divider, Split};
+pub use sizing::{
+    headers::{H1, H2, H3, H4, H5, H6},
+    Sizing,
+};
+pub use split::{Break, Divider};
 pub use underline::Underline;

packages/components/src/data/paragraph/typography/sizing.rs

@@ -0,0 +1,102 @@
+use stylist::yew::styled_component;
+use yew::prelude::*;
+
+use hikari_theme::types::FontSize;
+
+#[derive(Properties, Debug, PartialEq)]
+pub struct Props {
+    #[prop_or_default]
+    pub children: Children,
+    #[prop_or(FontSize::H1)]
+    pub size: FontSize,
+}
+
+/// `<Sizing>` component can be used to set the font size.
+#[styled_component]
+pub fn Sizing(props: &Props) -> Html {
+    html! {
+        <div
+            class={css!(r#"
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            "#)}
+        >
+            {props.children.clone()}
+        </div>
+    }
+}
+
+pub mod headers {
+    use stylist::yew::styled_component;
+    use yew::prelude::*;
+
+    use super::Sizing;
+    use hikari_theme::types::FontSize;
+
+    #[derive(Properties, Debug, PartialEq)]
+    pub struct Props {
+        #[prop_or_default]
+        pub children: Children,
+    }
+
+    /// `<H1>` component is like a `<h1>` element in HTML.
+    #[styled_component]
+    pub fn H1(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H1}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H2>` component is like a `<h2>` element in HTML.
+    #[styled_component]
+    pub fn H2(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H2}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H3>` component is like a `<h3>` element in HTML.
+    #[styled_component]
+    pub fn H3(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H3}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H4>` component is like a `<h4>` element in HTML.
+    #[styled_component]
+    pub fn H4(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H4}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H5>` component is like a `<h5>` element in HTML.
+    #[styled_component]
+    pub fn H5(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H5}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+
+    /// `<H6>` component is like a `<h6>` element in HTML.
+    #[styled_component]
+    pub fn H6(props: &Props) -> Html {
+        html! {
+            <Sizing size={FontSize::H6}>
+                {props.children.clone()}
+            </Sizing>
+        }
+    }
+}

packages/theme/Cargo.toml

@@ -22,3 +22,4 @@ base64 = { workspace = true }
 yuuka = { workspace = true }
 
 yew = { workspace = true }
+stylist = { workspace = true }

packages/theme/src/context.rs

@@ -1,3 +1,4 @@
+use serde::{Deserialize, Serialize};
 use yuuka::derive_struct;
 
 use yew::prelude::*;
@@ -7,7 +8,14 @@ use crate::{
     types::{ColorLevel, Palette},
 };
 
-derive_struct!(pub Theme { palette: Palette = COLOR_MAP.clone() });
+derive_struct!(
+    #[derive(PartialEq, Serialize, Deserialize)]
+    pub Theme {
+        palette: Palette = COLOR_MAP.clone(),
+        // FIXME: Maybe we should use `dyn Trait` instead...
+        // skin: Vec<(ComponentType, ComponentSkin)> = Vec::new(),
+    }
+);
 
 #[derive(Properties, Debug, PartialEq)]
 pub struct ThemeContextProviderProps {

packages/theme/src/types/component.rs

@@ -0,0 +1,131 @@
+use serde::{Deserialize, Serialize};
+use yuuka::derive_enum;
+
+derive_enum!(
+    #[derive(PartialEq, Serialize, Deserialize)]
+    pub enum ComponentType {
+        Container(enum Container {
+            Layout(enum Layout {
+                Aside,
+                Container,
+                Main,
+                Header,
+                Footer,
+            }),
+            Place(enum Place {
+                Column,
+                Row,
+                Grid,
+                Space,
+                Divider,
+                Skeleton,
+            }),
+            System(enum System {
+                Flex,
+                Anchor,
+                Modal,
+                Scrollable,
+                Resizable,
+                Draggable,
+                Cursor,
+                Breakpoint,
+            })
+        }),
+        Data(enum Data {
+            Block(enum Block {
+                List,
+                Progress,
+                Tree,
+                Paper,
+                Card,
+                Carousel,
+                Collapse,
+                Masonry,
+            }),
+            Media(enum Media {
+                Image,
+                Charts,
+                Scene,
+            }),
+            Paragraph(enum Paragraph {
+                Typography(enum Typography {
+                    Sub,
+                    Sup,
+                    Bold,
+                    Code,
+                    Sample,
+                    Delete,
+                    IsolateDirection,
+                    OverrideDirection,
+                    Italic,
+                    Mark,
+                    BlockQuote,
+                    Quote,
+                    Ruby,
+                    Size,
+                    Sizing,
+                    Divider,
+                    Split,
+                    Underline,
+                }),
+                Rich,
+                Affix,
+                Avatar,
+                Badge,
+                Chip,
+                Icon,
+            })
+        }),
+        Form(enum Form {
+            Button(enum Button {
+                Button,
+                IconButton,
+                ButtonGroup,
+                Tag,
+            }),
+            Input(enum Input {
+                Text,
+                TextArea,
+                Rich,
+            }),
+            Picker(enum Picker {
+                Color,
+                File,
+                Date,
+                Time,
+                DateTime,
+            }),
+            Selector(enum Selector {
+                MultiSelect,
+                CheckBox,
+                Radio,
+                Select,
+                Switch,
+                Slider,
+                Range,
+                Rating,
+            }),
+        }),
+        Navigation(enum Navigation {
+            Aside(enum Aside {
+                Nav(enum Nav {
+                    TopNav,
+                    BottomNav,
+                }),
+                Breadcrumb,
+                Pagination,
+                Steps,
+                Tabs,
+            }),
+            Modal(enum Modal {
+                Drawer,
+                Menu,
+                MessageBox,
+                Notification,
+                Popover,
+                SpeddDial,
+                Tooltip,
+            })
+        })
+    }
+);

packages/theme/src/types/mod.rs

@@ -1,9 +1,11 @@
+mod component;
 mod layout;
 mod palette;
 mod skin;
 mod transition;
 mod typography;
 
+pub use component::*;
 pub use layout::*;
 pub use palette::*;
 pub use skin::*;

packages/theme/src/types/palette.rs

@@ -11,6 +11,13 @@ pub enum ColorType {
     Warning,
 }
 
+#[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
+pub enum ColorMode {
+    #[default]
+    Light,
+    Dark,
+}
+
 #[derive(Debug, PartialEq, Eq, Clone, Copy, Default)]
 pub enum ColorLevel {
     #[default]
@@ -31,7 +38,7 @@ impl Into<f64> for ColorLevel {
     }
 }
 
-#[derive(Debug, PartialEq, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
 pub struct Palette {
     pub primary: Color,
     pub secondary: Color,

packages/theme/src/types/skin.rs

@@ -0,0 +1,5 @@
+#[derive(Debug, Clone, PartialEq)]
+pub struct ComponentSkin {
+    pub style: stylist::StyleSource,
+    pub extra_division: Vec<stylist::StyleSource>,
+}

packages/theme/src/types/transition.rs

@@ -0,0 +1 @@
+// TODO: Allow to add more custom transitions

packages/theme/src/types/typography.rs

@@ -0,0 +1,15 @@
+// TODO: fonts, scales and default font size
+
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum FontSize {
+    H1,
+    H2,
+    H3,
+    H4,
+    H5,
+    H6,
+    Px(f64),
+    Em(f64),
+    Rem(f64),
+    Custom(&'static str),
+}