Uno.Themes

In Uno.Themes, spacing and density are orthogonal axes that compose to determine the effective base spacing unit. Instead of density being a fixed value, it acts as a multiplier (mode) applied to a base spacing value.

The Composition Formula

Effective Base = DefaultSpacing × Density factor

1. DefaultSpacing

DefaultSpacing is a Dependency Property (DP) on BaseTheme. It defines the base unit for the Space* scale.

• Default value: 4.
• Validation: Non-finite (NaN, Infinity) or negative values automatically degrade to the default base of 4 to prevent poisoning the scale.

2. Density (Mode)

Density is a mode that scales the DefaultSpacing. It does not have its own underlying base-unit values.

• Compact: Multiplier of 0.75
• Regular: Multiplier of 1
• Comfy: Multiplier of 1.25
• Undefined/Other: Multiplier of 1

Example Composition

If DefaultSpacing is set to 6:

• Compact: $6 imes 0.75 = 4.5$
• Regular: $6 imes 1 = 6$
• Comfy: $6 imes 1.25 = 7.5$

Invariant Tokens

Certain tokens are fixed and do not change regardless of DefaultSpacing or Density settings:

• ControlHeight*
• IconSize*
• TouchTargetMinSize
• Shape tokens (e.g., CornerRadius) are also unaffected by DefaultSpacing.

When migrating or working with the Simple theme, you must understand how the legacy SDS (Simple Design System) brushes map to the new Shared Semantic Brush system.

Key Mapping Principles

• Brand maps to Primary (primary action colors).
• Danger maps to Error (destructive/error actions).
• Default maps to Surface / OnSurface (neutral UI chrome).
• Neutral maps to SurfaceInverse / OnSurfaceVariant (muted secondary chrome).
• Disabled maps to *DisabledBrush variants (uses opacity-based logic).
• Utilities are generally kept as Simple-specific (non-semantic tools).

State Mapping: Opacity vs. Explicit Colors

A major architectural shift is how interaction states (hover/pressed) are handled:

• SDS Pattern: Uses distinct, hard-coded color values (e.g., Brand800 $\rightarrow$ Brand900 $\rightarrow$ Brand1000).
• Shared Pattern: Uses a single base color with opacity multipliers (e.g., PrimaryBrush with a hover overlay).

This change means that while BrandDefault might match a specific color, BrandHover and BrandPressed are now achieved via overlays rather than distinct shade values.

Uno 6.7-dev introduces a secondary-AssemblyLoadContext (ALC) feature that allows one Uno application (the host) to host another Uno application (the guest) in-process. This is achieved through the following mechanism:

1. Visual Tree Integration: The host places an Uno.UI.Xaml.Controls.AlcContentHost (a ContentControl) in its visual tree and assigns it via Uno.UI.Xaml.WindowHelper.ContentHostOverride.
2. Assembly Loading: The host loads the guest app's assemblies into a collectible ALC. To maintain type identity, Uno framework assemblies are shared from the default ALC.
3. Bootstrapping: The host builds a second UnoPlatformHostBuilder around the guest's Application instance and executes it (on desktop, this runs on a dedicated background thread; on WASM, it uses RunAsync).
4. Redirection: The guest's Window.Content is transparently redirected into the host's AlcContentHost.

Isolation Guarantees:

• Resource Scoping: Per-ALC resource-dictionary registration is supported. If the guest project opts in via <UnoEnableAlcAppSupport>true</UnoEnableAlcAppSupport>, all ms-appx:/// dictionaries are scoped to that specific ALC.
• Theme Isolation: The host-wins resource resolution ensures guest resources do not recolor the host's chrome. The guest's RequestedTheme is pinned at the AlcContentHost boundary.
• Memory Management: A full static-cache purge (including DP, Style, metadata, and resource-resolver) occurs on unload so the ALC can be collected.

// Conceptual workflow for a host
// 1. Place host in tree
var host = new AlcContentHost();

// 2. Set the override
WindowHelper.ContentHostOverride = host;

// 3. Build and run guest
var guestApp = // ... loaded from collectible ALC
var builder = new UnoPlatformHostBuilder().Configure(guestApp);
await builder.Build().StartAsync();

The SeedColorMode property on ThemeColors determines how the palette is generated. There are two modes:

1. Fidelity (Default): Prioritizes brand accuracy. In Light mode, the PrimaryColor is your seed color verbatim. The supporting palettes match the saturation/character of your seed. Use this when exact brand colors are required.
2. TonalSpot: Uses the standard Material Design 3 recipe. It enforces a minimum saturation, ensuring the theme remains vibrant even if your seed color is muted or gray. Use this for a classic, colorful Material look.

To use TonalSpot, set the SeedColorMode attribute in your XAML configuration.

<MaterialTheme xmlns="using:Uno.Material">
    <MaterialTheme.Colors>
        <ut:ThemeColors xmlns:ut="using:Uno.Themes"
                        PrimarySeed="#6750A4"
                        SeedColorMode="TonalSpot" />
    </MaterialTheme.Colors>
</MaterialTheme>