IncularTheme Tokens
ControlTheme, colors, typography, metrics, motion, density, and Material ThemeData.
ControlTheme
use incular::prelude::*;
use incular::controls_prelude::{ControlDensity, ControlTheme, ControlThemeScope};
fn main() {
let theme = ControlTheme::dark().density(ControlDensity::Compact);
let app = Application::new(move |_cx| {
ControlThemeScope::new(theme.clone(), Text::new("Hi")).into()
})
.expect("valid application");
incular::run(app).expect("run application");
}ControlDensity: Compact (26 px) / Standard (default, 32 px) /
Comfortable (38 px).
ControlState
u16 bitset flags: DISABLED, HOVERED, PRESSED, FOCUSED, CHECKED,
SELECTED, EXPANDED, INVALID, READ_ONLY, DRAGGING, OPEN,
FOCUS_VISIBLE.
use incular::controls_prelude::ControlState;
fn main() {
let state = ControlState::empty().with(ControlState::CHECKED);
println!("pressed: {}", state.contains(ControlState::PRESSED));
println!("checked: {}", state.contains(ControlState::CHECKED));
println!("enabled: {:?}", ControlState::from_enabled(true));
}StateValue<T>: Value(T) / States(StateTable<T>) /
Resolver(fn). StateColor: compact normal/hover/pressed/focused/disabled/
checked/selected set. Resolution precedence: disabled → invalid → pressed →
checked → focused → hovered → normal. See Button.
Colors, typography, metrics, motion
use incular::prelude::*;
use incular::controls_prelude::{
ControlColors, ControlMetrics, ControlMotion, ControlTypography,
};
fn main() {
let colors = ControlColors::dark();
println!("accent set: {}", colors.accent != Color::TRANSPARENT);
let type_ = ControlTypography::new(Color::WHITE, Color::WHITE);
println!("has body: {}", type_.body.size > 0.0);
println!("metrics: {}", ControlMetrics::default().control_height);
println!("motion: {}", ControlMotion::default().hover_duration_ms);
}Token sets: SpacingTokens (xs 4 → xl 24), RadiusTokens (0/3/5/8/999),
ElevationTokens (0/8/24). Per-component themes: ButtonTheme, InputTheme,
CheckboxTheme, RadioTheme, SwitchTheme, PopupTheme, ScrollbarTheme,
SliderTheme, MenuTheme, TooltipTheme, TabsTheme, ProgressTheme,
AvatarTheme, ToastTheme.
| Token set | Values |
|---|---|
SpacingTokens | xs 4 / sm 8 / md 12 / lg 16 / xl 24 |
RadiusTokens | 0 / 3 / 5 / 8 / 999 (pill) |
ElevationTokens | 0 / 8 / 24 dp |
ControlDensity | Compact 26px / Standard 32px / Comfortable 38px |
Button styling
ButtonStyle sparse config with StateValue/StateColor resolution
(disabled → invalid → pressed → checked → focused → hovered → normal):
use incular::prelude::*;
use incular::controls_prelude::{ButtonStyle, ButtonVariant};
fn main() {
let style = ButtonStyle::new()
.variant(ButtonVariant::Primary)
.elevation(1.0)
.border_radius(6.0)
.minimum_size(Size::new(64.0, 36.0));
println!("tap target: {:?}", style.tap_target_size);
}ControlState flags: DISABLED, HOVERED, PRESSED, FOCUSED, CHECKED,
SELECTED, EXPANDED, INVALID, READ_ONLY, DRAGGING, OPEN,
FOCUS_VISIBLE.
Material ThemeData
Brightness: Light (default) / Dark — platform color preference driving
ThemeMode::System resolution.
use incular::prelude::*;
use incular::controls_prelude::{ControlTheme, ControlThemeScope};
fn main() {
let app = Application::new(|_cx| {
ControlThemeScope::new(
ControlTheme::dark(),
Container::builder()
.padding(EdgeInsets::all(24.0))
.alignment(Alignment::CENTER)
.child(Text::new("Themed"))
.build(),
)
.into()
})
.expect("valid application");
incular::run(app).expect("run application");
}use incular::material_prelude::{ThemeData, ThemeMode};
fn main() {
let _light = ThemeData::light();
let _dark = ThemeData::dark();
println!("mode: {:?}", ThemeMode::System);
println!("themes built");
}Related: Button,
MaterialApp.