Uno Themes Semantic Colors Brushes

Uno Themes Semantic Design Language

This skill is the definitive reference for the Semantic Design Language in Uno Themes. The semantic system is design-theme agnostic -- the same style keys, typography keys, color keys, and brush keys are shared across every design-theme implementation. Each implementation supplies its own concrete values and may not implement every key, but the semantic names are shared. Consult the design-theme-specific skills for concrete styles, palettes, and theme-only extensions.

Part 1: Semantic Control Styles

How It Works

Each design-theme's _Resources.xaml defines <StaticResource> aliases that map the shared semantic key to the theme's concrete style (e.g. FilledButtonStyle -> {ThemePrefix}FilledButtonStyle).

Use semantic keys in XAML for portable, theme-agnostic styling:

<Button Style="{StaticResource FilledButtonStyle}" Content="Save" />

Complete Style Key Reference

FAB Styles

Note: Individual design-themes may also expose additional theme-prefixed styles (e.g. danger variants, size variants, controls without a cross-theme equivalent) that are not part of the shared semantic surface. See the design-theme-specific skills for those.

Part 2: Semantic Typography

Each design-theme provides semantic typography keys based on the M3 type scale. Concrete font families, sizes, and weights are supplied by the active design-theme's Typography.xaml; the semantic key names are shared.

Typography Style Keys

Use these as TextBlock styles:

<TextBlock Style="{StaticResource DisplayLarge}" Text="Hero" />
<TextBlock Style="{StaticResource BodyMedium}" Text="Body text" />

Font Resource Keys

Each typography style exposes individual font properties for lightweight styling:

Typography Decision Guide

Part 3: Semantic Colors & Brushes

Architecture: Three Layers

Layer 1: Color Palette (SharedColorPalette.xaml)
    33 Color resources with Light/Dark theme variants
           |
           v
Layer 2: Semantic Brushes (SharedColors.xaml)
    ~288 SolidColorBrush resources generated from palette + opacity tokens
           |
           v
Layer 3: Control Lightweight Styling Keys
    Per-control resource keys that reference semantic brushes
    (e.g., FilledButtonBackground -> PrimaryBrush)

• Override Layer 1 to rebrand the entire app (all brushes cascade automatically).
• Override Layer 2 to change a specific brush without affecting the palette.
• Override Layer 3 to change a single control's appearance without affecting the brush system.

The Color Palette (Layer 1)

Defined in SharedColorPalette.xaml, these 33 Color resources are the foundation.

Primary -- Brand Identity & Key Actions

Legacy Primary Variants

Secondary -- Supporting Accents

Legacy Secondary Variants

Tertiary -- Contrast & Balance

Error -- Validation & Destructive Actions

Surface -- Component Backgrounds

Background, Outline, Shadow

The Brush System (Layer 2)

Every Color key generates 9 SolidColorBrush variants at different opacity levels.

Brush Naming Pattern: {ColorRole}{StateVariant}Brush

Total: ~288 semantic brushes across Primary (63), Secondary (54), Tertiary (36), Error (36), Surface (63), Background (18), Outline (18).

Color Pairing Rules (CRITICAL)

NEVER mix unpaired colors. Every background role has a designated "On" foreground role.

Text Emphasis on Surfaces

Part 4: Customization

Method 1: Override Color Palette (Full Cascade)

Override *Color keys in a ResourceDictionary referenced by your theme. All ~288 brushes and controls update automatically.

Always provide both Light and Default (Dark) theme values.

Method 2: Override Specific Brushes (Targeted)

<SolidColorBrush x:Key="FilledButtonBackground" Color="#006D3B" />

Method 3: Override Per-Control Instance (Scoped)

<Button Style="{StaticResource FilledButtonStyle}">
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Light">
                    <SolidColorBrush x:Key="FilledButtonBackground" Color="#006D3B" />
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Button.Resources>
</Button>

Customization Precedence (Highest to Lowest)

1. Control.Resources -- per-instance
2. Page.Resources -- page-scoped
3. App-level overrides -- app-wide
4. Theme defaults -- active design-theme
5. SharedColorPalette / SharedColors / SharedTypography -- foundation

Decision Guides

Which Color Role?

Which Button Style?

XAML Best Practices

• Always use ThemeResource (not StaticResource) for brushes so they respond to theme changes.
• Always use StaticResource for styles (styles don't change with theme).
• Use semantic keys, not theme-prefixed keys, for portable XAML.

<!-- Correct -->
<Button Style="{StaticResource FilledButtonStyle}"
        Content="Save" />

<!-- Avoid theme-prefixed keys in portable code -->
<!-- <Button Style="{StaticResource {ThemePrefix}FilledButtonStyle}" /> -->