Theme axis
Theme defines the overall color scheme used to interpret surfaces and colors.
Supported themes: light and dark
Global theme is set via NebkitProvider
Local theme can be set on any Box
Themes are scoped and inherited by descendants
The nearest theme boundary always wins
Local themes allow creating isolated areas (for example a dark panel inside a light app) without affecting the rest of the UI.
Brand axis
Brand defines the default surface color used when no explicit color is set.
Global brand is set via NebkitProvider
Local brand can be set on any Box
Brand acts as a default, not an override
Brands are scoped and inherited by descendants
Brand is typically used to define the visual identity of a section or feature.
Color axis
Color is a component-level override.
Color always overrides brand
Color does not propagate to children
Color is interpreted through the active theme
If color is set, brand is ignored for that component
Use color when a component must be styled explicitly.
Variant and intent axes
Variant and intent define how a drawable surface is rendered.
Variant controls structure (solid, outline, soft-outline, ghost)
Intent controls semantic meaning (neutral, muted, primary, etc.)
Both are always local to the component
They rely on resolved theme and color/brand values
Variant and intent never propagate.