Skip to content

Theme Tokens, Density, IDE Presets, and Rider Sample Integration #1047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wieslawsoltes merged 4 commits into from
Feb 12, 2026
Merged

Theme Tokens, Density, IDE Presets, and Rider Sample Integration #1047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
75df4db
feat(themes): add density-aware fluent/simple theme resources
wieslawsoltes Feb 11, 2026
0574b87
test(themes): add coverage for density, presets, and semantic tokens
wieslawsoltes Feb 11, 2026
7653bc2
docs(themes): add token, preset, and migration documentation
wieslawsoltes Feb 11, 2026
64924b8
feat(sample-rider): use shared rider presets and add theme switch menu
wieslawsoltes Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
198 changes: 198 additions & 0 deletions docfx/articles/dock-theme-design-tokens.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
# Dock Theme Design Tokens

Dock themes expose semantic design tokens that decouple control templates from raw color/size keys.

All token keys below are available in both:

- `DockFluentTheme`
- `DockSimpleTheme`

## Surface tokens

| Token | Purpose |
|---|---|
| `DockSurfaceWorkbenchBrush` | Main background surface behind docks. |
| `DockSurfaceSidebarBrush` | Sidebar/tool-area surface. |
| `DockSurfaceEditorBrush` | Document/editor surface. |
| `DockSurfacePanelBrush` | Secondary panel surface. |
| `DockSurfaceHeaderBrush` | Header/chrome background. |
| `DockSurfaceHeaderActiveBrush` | Active header/chrome background. |

## Border and structure tokens

| Token | Purpose |
|---|---|
| `DockBorderSubtleBrush` | Standard low-emphasis border color. |
| `DockBorderStrongBrush` | Stronger border color (optional use). |
| `DockSeparatorBrush` | Thin separators and strip dividers. |
| `DockSplitterIdleBrush` | Splitter idle color. |
| `DockSplitterHoverBrush` | Splitter hover color. |
| `DockSplitterDragBrush` | Splitter drag color. |
| `DockTargetIndicatorBrush` | Dock target overlay indicator color. |

## Tab tokens

| Token | Purpose |
|---|---|
| `DockTabBackgroundBrush` | Base tab strip background. |
| `DockTabHoverBackgroundBrush` | Tab hover background. |
| `DockTabActiveBackgroundBrush` | Active/selected tab background. |
| `DockTabActiveIndicatorBrush` | Active tab indicator line/accent. |
| `DockTabForegroundBrush` | Default tab text/icon color. |
| `DockTabSelectedForegroundBrush` | Selected tab text color (non-active accent). |
| `DockTabActiveForegroundBrush` | Active tab text/icon color. |
| `DockTabCloseHoverBackgroundBrush` | Document close button hover background. |

## Chrome button tokens

| Token | Purpose |
|---|---|
| `DockChromeButtonForegroundBrush` | Tool/MDI chrome icon color. |
| `DockChromeButtonHoverBackgroundBrush` | Chrome button hover background. |
| `DockChromeButtonPressedBackgroundBrush` | Chrome button pressed background. |
| `DockChromeButtonDangerHoverBrush` | Close/danger button hover background. |

## Global shape/density tokens

| Token | Purpose |
|---|---|
| `DockCornerRadiusSmall` | Shared small corner radius. |
| `DockHeaderHeight` | Header/chrome nominal height token. |
| `DockTabHeight` | Tab height token. |
| `DockTabHorizontalPadding` | Horizontal tab spacing token. |
| `DockIconSizeSmall` | Small icon size token. |
| `DockIconSizeNormal` | Normal icon size token. |

## Control density tokens

| Token | Purpose |
|---|---|
| `DockTabItemMinHeight` | Min height for document/tool tab items. |
| `DockToolTabItemMinHeight` | Min height for tool tab items. |
| `DockDocumentTabItemPadding` | Document tab item padding. |
| `DockToolTabItemPadding` | Tool tab item padding. |
| `DockToolTabItemSelectedPadding` | Tool tab selected-state padding. |
| `DockCreateButtonWidth` | Document create button width. |
| `DockCreateButtonHeight` | Document create button height. |
| `DockCloseButtonSize` | Document close button size. |
| `DockChromeButtonWidth` | Tool/MDI chrome button width. |
| `DockChromeButtonHeight` | Tool/MDI chrome button height. |
| `DockChromeButtonPadding` | Tool/MDI chrome button padding. |
| `DockChromeButtonMargin` | Tool/MDI chrome button margin. |
| `DockMdiTitleIconSize` | MDI title bar icon viewbox size. |
| `DockMdiHeaderDragPadding` | MDI drag header padding. |

## Tab and header content metrics

| Token | Purpose |
|---|---|
| `DockHeaderContentPadding` | Shared title/header text padding in document/tool/MDI headers. |
| `DockModifiedIndicatorMargin` | Shared margin for modified marker (`*`). |
| `DockTabContentSpacing` | Spacing between tab content blocks (icon, title, modified, close). |
| `DockTabContentMargin` | Inner margin around tab content stack. |
| `DockCreateButtonIconMargin` | Plus/create icon margin in document tab strip. |

## Tool chrome and MDI metrics

| Token | Purpose |
|---|---|
| `DockToolChromeHeaderMargin` | Header dock panel outer margin in tool chrome. |
| `DockToolChromeTitleMargin` | Tool title text margin. |
| `DockToolChromeMenuIconMargin` | Menu icon margin in tool chrome button. |
| `DockToolChromeDividerThickness` | Divider line thickness below tool chrome header. |
| `DockChromeGripHeight` | Drag grip strip height in tool/MDI chrome. |
| `DockChromeGripMargin` | Drag grip strip margin in tool/MDI chrome. |
| `DockChromeGripBrush` | Shared tiled grip brush used by tool/MDI chrome. |
| `DockMdiHeaderColumnSpacing` | Column spacing in MDI document header layout. |
| `DockMdiButtonStripSpacing` | Spacing between MDI title bar buttons. |
| `DockMdiButtonStripMargin` | MDI button strip margin. |
| `DockMdiResizeEdgeThickness` | Hit target thickness for MDI edge resize handles. |
| `DockMdiResizeCornerSize` | Hit target size for MDI corner resize handles. |

## Selector and target metrics

| Token | Purpose |
|---|---|
| `DockTargetSelectorSize` | Dock target selector image size. |
| `DockTargetSelectorGridMaxSize` | Max size of local dock target selector grid. |
| `DockSelectorOverlayBackdropBrush` | Backdrop brush for selector overlay modal layer. |
| `DockSelectorOverlayCornerRadius` | Corner radius for selector overlay container. |
| `DockSelectorOverlayPadding` | Selector overlay container padding. |
| `DockSelectorOverlayMinWidth` | Selector overlay minimum width. |
| `DockSelectorOverlayMaxWidth` | Selector overlay maximum width. |
| `DockSelectorOverlaySpacing` | Vertical spacing in selector overlay content. |
| `DockSelectorOverlayListMinHeight` | Minimum list height in selector overlay. |
| `DockSelectorOverlayListMaxHeight` | Maximum list height in selector overlay. |
| `DockSelectorOverlayItemPadding` | List item padding in selector overlay. |
| `DockSelectorOverlayItemCornerRadius` | List item corner radius in selector overlay. |
| `DockSelectorOverlayBadgeSpacing` | Spacing between state badges. |
| `DockSelectorOverlayBadgeMargin` | Badge strip margin. |
| `DockSelectorOverlayBadgeCornerRadius` | Badge corner radius. |
| `DockSelectorOverlayBadgePadding` | Badge padding. |
| `DockSelectorOverlayBadgeFontSize` | Badge text size. |

## Command bar and drag preview metrics

| Token | Purpose |
|---|---|
| `DockCommandBarPadding` | Command bar container padding. |
| `DockCommandBarSpacing` | Vertical spacing between menu/tool/ribbon bands. |
| `DockDragPreviewCornerRadius` | Drag preview card corner radius. |
| `DockDragPreviewHeaderPadding` | Drag preview header padding. |
| `DockDragPreviewHeaderSpacing` | Header spacing between title and status block. |
| `DockDragPreviewStatusSpacing` | Spacing between drag status icon and text. |
| `DockDragPreviewStatusIconSize` | Drag status icon size. |
| `DockHostTitleBarMouseTrackerHeight` | Host title bar top tracker panel height. |

## Overlay and dialog metrics

| Token | Purpose |
|---|---|
| `DockOverlayReloadButtonMargin` | Margin for the reload command button in busy overlay. |
| `DockOverlayCardCornerRadius` | Busy overlay card corner radius. |
| `DockOverlayCardPadding` | Busy overlay card padding. |
| `DockOverlayCardSpacing` | Busy overlay card content spacing. |
| `DockOverlayMessageFontSize` | Shared overlay message/title font size. |
| `DockOverlayProgressWidth` | Busy overlay progress width. |
| `DockOverlayProgressHeight` | Busy overlay progress height. |
| `DockDialogCornerRadius` | Dialog shell corner radius. |
| `DockDialogPadding` | Dialog shell padding. |
| `DockDialogMinWidth` | Dialog shell minimum width. |
| `DockDialogMaxWidth` | Dialog shell maximum width. |
| `DockDialogSpacing` | Dialog shell grid row/column spacing. |
| `DockDialogTitleFontSize` | Dialog and confirmation title font size. |
| `DockDialogCloseButtonSize` | Dialog shell close button size. |
| `DockConfirmationDialogPadding` | Confirmation dialog padding. |
| `DockConfirmationDialogMaxWidth` | Confirmation dialog maximum width. |
| `DockConfirmationDialogStackSpacing` | Confirmation dialog content spacing. |
| `DockConfirmationDialogActionsSpacing` | Confirmation dialog actions row spacing. |

## Where defaults are defined

- Fluent defaults: `src/Dock.Avalonia.Themes.Fluent/Accents/Fluent.axaml`
- Simple defaults: `src/Dock.Avalonia.Themes.Simple/Accents/Simple.axaml`
- Compact density overrides:
- `src/Dock.Avalonia.Themes.Fluent/DensityStyles/Compact.axaml`
- `src/Dock.Avalonia.Themes.Simple/DensityStyles/Compact.axaml`

## Token override pattern

```xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush x:Key="DockSurfaceHeaderBrush" Color="#FF2D2D30" />
<SolidColorBrush x:Key="DockTabActiveIndicatorBrush" Color="#FF3794FF" />
<x:Double x:Key="DockTabItemMinHeight">22</x:Double>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
```

## Related docs

- [Dock Fluent Theme](dock-theme-fluent.md)
- [Dock Simple Theme](dock-theme-simple.md)
- [Dock Theme Token Migration](dock-theme-token-migration.md)
114 changes: 114 additions & 0 deletions docfx/articles/dock-theme-fluent.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
# Dock Fluent Theme

This guide documents the Dock Fluent theme in detail: structure, density modes, token customization, and IDE preset integration.

## Overview

`DockFluentTheme` is the primary Dock theme for Fluent-based applications.

```xaml
<Application.Styles>
<FluentTheme />
<dockFluent:DockFluentTheme />
</Application.Styles>
```

Theme implementation:

- `src/Dock.Avalonia.Themes.Fluent/DockFluentTheme.axaml`
- `src/Dock.Avalonia.Themes.Fluent/DockFluentTheme.axaml.cs`
- `src/Dock.Avalonia.Themes.Fluent/Accents/Fluent.axaml`

## What DockFluentTheme includes

`DockFluentTheme` merges:

- accent and string resources,
- window chrome resources,
- all Dock control templates (documents, tools, MDI, overlays, host windows).

Key control template resources include:

- `DocumentControl.axaml`
- `DocumentTabStrip.axaml`
- `DocumentTabStripItem.axaml`
- `ToolChromeControl.axaml`
- `ToolTabStrip.axaml`
- `ToolTabStripItem.axaml`
- `MdiDocumentWindow.axaml`

## Density support

`DockFluentTheme` supports two density modes:

- `DensityStyle="Normal"` (default),
- `DensityStyle="Compact"`.

```xaml
<dockFluent:DockFluentTheme DensityStyle="Compact" />
```

Compact density resource dictionary:

- `avares://Dock.Avalonia.Themes.Fluent/DensityStyles/Compact.axaml`

Compact mode reduces tab/button/icon metrics by overriding density tokens (for example `DockTabItemMinHeight`, `DockCloseButtonSize`, `DockChromeButtonWidth`).

## Fluent token customization

Customize Dock Fluent visuals by overriding semantic tokens after `DockFluentTheme`.

```xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<SolidColorBrush x:Key="DockSurfaceHeaderBrush" Color="#FF2D2D30" />
<SolidColorBrush x:Key="DockTabActiveIndicatorBrush" Color="#FF3794FF" />
<SolidColorBrush x:Key="DockChromeButtonDangerHoverBrush" Color="#FFC94F4F" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
```

For the complete token list, see [Dock Theme Design Tokens](dock-theme-design-tokens.md).

## IDE preset usage with Fluent

Fluent-specific preset dictionaries:

- `avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/Default.axaml`
- `avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/VsCodeDark.axaml`
- `avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/VsCodeLight.axaml`
- `avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/RiderLight.axaml`
- `avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/RiderDark.axaml`

```xaml
<Application.Styles>
<FluentTheme />
<dockFluent:DockFluentTheme DensityStyle="Compact" />
</Application.Styles>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceInclude Source="avares://Dock.Avalonia.Themes.Fluent/Presets/Ide/VsCodeDark.axaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
```

Presets override color/surface tokens only; density remains controlled by `DensityStyle`.

## Recommended customization order

1. Apply `DockFluentTheme`.
2. Pick density (`Normal` or `Compact`).
3. Optionally merge an IDE preset.
4. Add app-specific token overrides last.

## Related docs

- [Dock Theme Design Tokens](dock-theme-design-tokens.md)
- [Dock IDE Presets](dock-theme-ide-presets.md)
- [Dock Theme Token Migration](dock-theme-token-migration.md)
Loading
Loading