hikari-theme 0.1.10

Theme system with SCSS/CSS variable generation for the Hikari design system
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

//! Theme provider component
//!
//! This module provides the [`ThemeProvider`] component which enables
//! theme switching across the application using the [`ThemeContext`].
//!
//! # Supported Themes
//!
//! - `"hikari"` - Light theme (光)
//! - `"tairitsu"` - Dark theme (tairitsu)

use crate::{
    context::{LayoutDirection, ThemeContext},
    prelude::*,
};

/// Theme Provider Props
#[derive(Debug, Clone)]
pub struct ThemeProviderProps {
    /// Initial theme identifier ("hikari" or "tairitsu")
    pub initial_palette: String,
    /// Language code ("en", "zhs", etc.)
    pub language: String,
    /// Layout direction ("ltr" or "rtl")
    pub direction: String,
    /// Child elements
    pub children: Vec<VNode>,
}

impl Default for ThemeProviderProps {
    fn default() -> Self {
        Self {
            initial_palette: "hikari".to_string(),
            language: "en".to_string(),
            direction: "ltr".to_string(),
            children: Vec::new(),
        }
    }
}

/// Theme Provider component
///
/// Provides theme context to all child components with dynamic theme switching support.
///
/// # Example
///
/// ```rust,no_run
/// use hikari_theme::ThemeProvider;
///
/// rsx! {
///     ThemeProvider {
///         initial_palette: "tairitsu",
///         language: "zhs",
///         direction: "ltr",
///     } {
///         // Children here
///     }
/// }
/// ```
#[allow(non_snake_case)]
pub fn ThemeProvider(props: ThemeProviderProps) -> VNode {
    // Get the theme palette
    let palette_name = props.initial_palette.as_str();
    let colors = match palette_name {
        "hikari" => themes::Hikari::palette(),
        "tairitsu" => themes::Tairitsu::palette(),
        _ => themes::Hikari::palette(),
    };

    let dir = match props.direction.as_str() {
        "rtl" => "rtl",
        _ => "ltr",
    };

    // Create theme context
    let context = ThemeContext {
        palette: props.initial_palette.clone(),
        colors,
        direction: if dir == "rtl" {
            LayoutDirection::Rtl
        } else {
            LayoutDirection::Ltr
        },
        set_theme: Callback::new(|_| {}),
    };

    provide_context(context);

    rsx! {
        div {
            class: "hi-theme-provider",
            "data-theme": palette_name,
            "data-language": props.language.as_str(),
            "dir": dir,
            ..props.children
        }
    }
}