Browser tab theme

Dock.slnx

@@ -65,6 +65,7 @@
     <Project Path="samples/DockXamlReactiveUISample/DockXamlReactiveUISample.csproj" />
     <Project Path="samples/DockReactiveUIWorkspaceSample/DockReactiveUIWorkspaceSample.csproj" />
     <Project Path="samples/DockReactiveUIWindowRelationsSample/DockReactiveUIWindowRelationsSample.csproj" />
+    <Project Path="samples/BrowserTabTheme/BrowserTabTheme.csproj" />
     <Project Path="samples/DockSimplifiedFluentSample/DockSimplifiedFluentSample.csproj" />
     <Project Path="samples/DockSimplifiedSample/DockSimplifiedSample.csproj" />
     <Project Path="samples/DockSplitViewSample/DockSplitViewSample.csproj" />
@@ -74,6 +75,7 @@
   </Folder>
   <Folder Name="/src/">
     <Project Path="src/Dock.Avalonia.Diagnostics/Dock.Avalonia.Diagnostics.csproj" />
+    <Project Path="src/Dock.Avalonia.Themes.Browser/Dock.Avalonia.Themes.Browser.csproj" />
     <Project Path="src/Dock.Avalonia.Themes.Fluent/Dock.Avalonia.Themes.Fluent.csproj" />
     <Project Path="src/Dock.Avalonia.Themes.Simple/Dock.Avalonia.Themes.Simple.csproj" />
     <Project Path="src/Dock.Avalonia/Dock.Avalonia.csproj" />

README.md

@@ -61,6 +61,7 @@ Install-Package Dock.Avalonia
 Install-Package Dock.Model.Mvvm
 Install-Package Dock.Serializer.Newtonsoft
 Install-Package Dock.Avalonia.Themes.Fluent
+Install-Package Dock.Avalonia.Themes.Browser
 ```
 
 **Available NuGet packages:**
@@ -70,6 +71,7 @@ Install-Package Dock.Avalonia.Themes.Fluent
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.svg)](https://www.nuget.org/packages/Dock.Avalonia) | [`Dock.Avalonia`](https://www.nuget.org/packages/Dock.Avalonia) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.svg)](https://www.nuget.org/packages/Dock.Avalonia) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Diagnostics.svg)](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) | [`Dock.Avalonia.Diagnostics`](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Diagnostics.svg)](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Fluent.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) | [`Dock.Avalonia.Themes.Fluent`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Fluent.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) |
+| [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Browser.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) | [`Dock.Avalonia.Themes.Browser`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Browser.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Simple.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) | [`Dock.Avalonia.Themes.Simple`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Simple.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Controls.ProportionalStackPanel.svg)](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) | [`Dock.Controls.ProportionalStackPanel`](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Controls.ProportionalStackPanel.svg)](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Controls.Recycling.svg)](https://www.nuget.org/packages/Dock.Controls.Recycling) | [`Dock.Controls.Recycling`](https://www.nuget.org/packages/Dock.Controls.Recycling) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Controls.Recycling.svg)](https://www.nuget.org/packages/Dock.Controls.Recycling) |
@@ -112,6 +114,7 @@ Install-Package Dock.Avalonia -Pre
 Install-Package Dock.Model.Mvvm -Pre
 Install-Package Dock.Serializer.Newtonsoft -Pre
 Install-Package Dock.Avalonia.Themes.Fluent -Pre
+Install-Package Dock.Avalonia.Themes.Browser -Pre
 ```
 
 

docfx/articles/README.md

@@ -66,6 +66,8 @@ Dock is published on NuGet. Common packages include:
 
 - `Dock.Avalonia`
 - `Dock.Model`
+- `Dock.Avalonia.Themes.Fluent`
+- `Dock.Avalonia.Themes.Browser`
 - Framework integrations such as `Dock.Model.ReactiveUI`
 
 See the repository README for the full list and build instructions:

docfx/articles/dock-theme-browser-sample.md

@@ -0,0 +1,36 @@
+# BrowserTabTheme Sample
+
+The BrowserTabTheme sample demonstrates how to consume `Dock.Avalonia.Themes.Browser` from an application project.
+
+## Sample project
+
+- `samples/BrowserTabTheme/BrowserTabTheme.csproj`
+- `samples/BrowserTabTheme/App.axaml`
+
+The sample references the reusable theme project from `src` and applies it with:
+
+```xaml
+<FluentTheme />
+<DockFluentTheme />
+<themes:BrowserTabTheme />
+```
+
+## Run the sample
+
+```bash
+dotnet run --project samples/BrowserTabTheme/BrowserTabTheme.csproj
+```
+
+## Build checks
+
+```bash
+dotnet build src/Dock.Avalonia.Themes.Browser/Dock.Avalonia.Themes.Browser.csproj
+dotnet build samples/BrowserTabTheme/BrowserTabTheme.csproj
+```
+
+## What to validate
+
+- Browser-style document and tool tabs.
+- Host window title bar and caption buttons.
+- Dock targets and drag-preview visuals.
+- Floating windows and pin/unpin interactions.

docfx/articles/dock-theme-browser.md

@@ -0,0 +1,52 @@
+# Dock Browser Theme
+
+This guide documents the browser-tab style Dock theme hosted in the Dock source tree.
+
+## Overview
+
+`BrowserTabTheme` is a reusable theme class in:
+
+- `src/Dock.Avalonia.Themes.Browser/Dock.Avalonia.Themes.Browser.csproj`
+
+It is designed as an overlay theme on top of `DockFluentTheme` and applies browser-style tabs, title bar styling, and related Dock control templates.
+
+## Apply the theme
+
+Reference the browser theme project/package and use it in `App.axaml`:
+
+```xaml
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:browserTheme="using:Dock.Avalonia.Themes.Browser">
+  <Application.Styles>
+    <FluentTheme />
+    <DockFluentTheme />
+    <browserTheme:BrowserTabTheme />
+  </Application.Styles>
+</Application>
+```
+
+## Density support
+
+`BrowserTabTheme` supports Dock density switching with `DensityStyle`:
+
+```xaml
+<browserTheme:BrowserTabTheme DensityStyle="Compact" />
+```
+
+Compact density dictionary:
+
+- `avares://Dock.Avalonia.Themes.Browser/Styles/DensityStyles/Compact.axaml`
+
+## Theme resources
+
+Primary dictionaries:
+
+- `avares://Dock.Avalonia.Themes.Browser/Styles/BrowserTabAccents.axaml`
+- `avares://Dock.Avalonia.Themes.Browser/Styles/Controls/AllResources.axaml`
+
+## Related docs
+
+- [Fluent theme guide](dock-theme-fluent.md)
+- [Custom themes](dock-custom-theme.md)
+- [BrowserTabTheme sample](dock-theme-browser-sample.md)

docfx/articles/dock-theme-design-tokens.md

@@ -42,6 +42,11 @@ All token keys below are available in both:
 | `DockTabSelectedForegroundBrush` | Selected tab text color (non-active accent). |
 | `DockTabActiveForegroundBrush` | Active tab text/icon color. |
 | `DockTabCloseHoverBackgroundBrush` | Document close button hover background. |
+| `DockDocumentTabStripBackgroundBrush` | Document tab strip background brush. |
+| `DockDocumentTabSelectedForegroundBrush` | Selected document-tab foreground override used by `DocumentTabStripItem`. |
+| `DockDocumentTabPointerOverForegroundBrush` | Pointer-over document-tab foreground override. |
+| `DockDocumentTabCloseSelectedForegroundBrush` | Selected document-tab close icon foreground override. |
+| `DockDocumentTabClosePointerOverForegroundBrush` | Pointer-over document-tab close icon foreground override. |
 
 ## Chrome button tokens
 
@@ -68,8 +73,15 @@ All token keys below are available in both:
 | Token | Purpose |
 |---|---|
 | `DockTabItemMinHeight` | Min height for document/tool tab items. |
+| `DockDocumentTabItemMinHeight` | Min height specifically for document tab items. |
 | `DockToolTabItemMinHeight` | Min height for tool tab items. |
+| `DockDocumentTabStripMinHeight` | Min height for the document tab strip container. |
+| `DockDocumentTabStripSeparatorSize` | Thickness of the document tab-strip separator line (`PART_DocumentSeperator`). |
+| `DockDocumentTabStripLeadingSpacerWidth` | Width of optional leading spacer in document tab strip. |
+| `DockDocumentTabItemMargin` | Outer margin for document tab items. |
 | `DockDocumentTabItemPadding` | Document tab item padding. |
+| `DockDocumentTabItemCornerRadius` | Corner radius for document tab items. |
+| `DockDocumentTabCreateButtonCornerRadius` | Corner radius for the document create button. |
 | `DockToolTabItemPadding` | Tool tab item padding. |
 | `DockToolTabItemSelectedPadding` | Tool tab selected-state padding. |
 | `DockCreateButtonWidth` | Document create button width. |
@@ -89,8 +101,12 @@ All token keys below are available in both:
 | `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). |
+| `DockDocumentTabHeaderContentSpacing` | Spacing between document tab icon and header presenters. |
 | `DockTabContentMargin` | Inner margin around tab content stack. |
 | `DockCreateButtonIconMargin` | Plus/create icon margin in document tab strip. |
+| `DockDocumentTabStripHorizontalCreateButtonMargin` | Horizontal create button margin in document tab strip. |
+| `DockDocumentTabStripHorizontalScrollViewerMargin` | Horizontal scroll viewer margin in document tab strip. |
+| `DockDocumentTabStripHorizontalScrollViewerPadding` | Horizontal scroll viewer padding in document tab strip. |
 
 ## Tool chrome and MDI metrics
 
@@ -143,6 +159,16 @@ All token keys below are available in both:
 | `DockDragPreviewStatusSpacing` | Spacing between drag status icon and text. |
 | `DockDragPreviewStatusIconSize` | Drag status icon size. |
 | `DockHostTitleBarMouseTrackerHeight` | Host title bar top tracker panel height. |
+| `DockDocumentTabStripHorizontalCreateButtonDock` | Horizontal document-tab create button dock side (`Left`/`Right`). |
+| `DockDocumentTabStripHorizontalCreateButtonAlignment` | Horizontal alignment for document-tab create button (`Left`/`Right`). |
+| `DockDocumentControlIndicatorDockOperation` | Dock indicator operation for document control drop target (`Fill` etc.). |
+| `DockDocumentTabStripHideWhenEmpty` | Whether empty non-create document tab strips are hidden. |
+| `DockDocumentControlShowDockIndicatorOnly` | Whether document control dock target shows indicator-only rendering. |
+| `DockDocumentTabStripSeparatorVisible` | Whether the document tab-strip separator (`PART_DocumentSeperator`) is visible. |
+| `DockDocumentControlVerticalSpacing` | Vertical spacing for the `PART_DockPanel` in `DocumentControl`. |
+| `DockDocumentContentBorderBrush` | Brush used by the document content border (`PART_Border`). |
+| `DockDocumentContentBorderThickness` | Border thickness used by the document content border (`PART_Border`). |
+| `DockDocumentTabStripHorizontalItemsPanel` | Horizontal items panel template for document tabs. |
 
 ## Overlay and dialog metrics
 

docfx/articles/dock-theme-semantic-tokens.md

@@ -19,7 +19,7 @@ Both built-in themes expose the same keys:
 | Chrome buttons | `DockChromeButtonForegroundBrush`, `DockChromeButtonHoverBackgroundBrush`, `DockChromeButtonPressedBackgroundBrush`, `DockChromeButtonDangerHoverBrush` |
 | Density/shape | `DockCornerRadiusSmall`, `DockHeaderHeight`, `DockTabHeight`, `DockTabHorizontalPadding`, `DockIconSizeSmall`, `DockIconSizeNormal` |
 | Density controls | `DockTabItemMinHeight`, `DockToolTabItemMinHeight`, `DockDocumentTabItemPadding`, `DockToolTabItemPadding`, `DockToolTabItemSelectedPadding`, `DockCreateButtonWidth`, `DockCreateButtonHeight`, `DockCloseButtonSize`, `DockChromeButtonWidth`, `DockChromeButtonHeight`, `DockChromeButtonPadding`, `DockChromeButtonMargin`, `DockMdiTitleIconSize`, `DockMdiHeaderDragPadding` |
-| Tab/header metrics | `DockHeaderContentPadding`, `DockModifiedIndicatorMargin`, `DockTabContentSpacing`, `DockTabContentMargin`, `DockCreateButtonIconMargin` |
+| Tab/header metrics | `DockHeaderContentPadding`, `DockModifiedIndicatorMargin`, `DockTabContentSpacing`, `DockDocumentTabHeaderContentSpacing`, `DockTabContentMargin`, `DockCreateButtonIconMargin` |
 | Chrome/MDI metrics | `DockToolChromeHeaderMargin`, `DockToolChromeTitleMargin`, `DockToolChromeMenuIconMargin`, `DockToolChromeDividerThickness`, `DockChromeGripHeight`, `DockChromeGripMargin`, `DockChromeGripBrush`, `DockMdiHeaderColumnSpacing`, `DockMdiButtonStripSpacing`, `DockMdiButtonStripMargin`, `DockMdiResizeEdgeThickness`, `DockMdiResizeCornerSize` |
 | Selector/target metrics | `DockTargetSelectorSize`, `DockTargetSelectorGridMaxSize`, `DockSelectorOverlayBackdropBrush`, `DockSelectorOverlayCornerRadius`, `DockSelectorOverlayPadding`, `DockSelectorOverlayMinWidth`, `DockSelectorOverlayMaxWidth`, `DockSelectorOverlaySpacing`, `DockSelectorOverlayListMinHeight`, `DockSelectorOverlayListMaxHeight`, `DockSelectorOverlayItemPadding`, `DockSelectorOverlayItemCornerRadius`, `DockSelectorOverlayBadgeSpacing`, `DockSelectorOverlayBadgeMargin`, `DockSelectorOverlayBadgeCornerRadius`, `DockSelectorOverlayBadgePadding`, `DockSelectorOverlayBadgeFontSize` |
 | Command/preview metrics | `DockCommandBarPadding`, `DockCommandBarSpacing`, `DockDragPreviewCornerRadius`, `DockDragPreviewHeaderPadding`, `DockDragPreviewHeaderSpacing`, `DockDragPreviewStatusSpacing`, `DockDragPreviewStatusIconSize`, `DockHostTitleBarMouseTrackerHeight` |

docfx/articles/toc.yml

@@ -122,6 +122,10 @@
     href: dock-theme-fluent.md
   - name: Simple theme guide
     href: dock-theme-simple.md
+  - name: Browser theme guide
+    href: dock-theme-browser.md
+  - name: Browser theme sample
+    href: dock-theme-browser-sample.md
   - name: Design tokens
     href: dock-theme-design-tokens.md
   - name: Token migration

docfx/index.md

@@ -26,6 +26,7 @@ This design keeps the layout engine reusable and lets you swap view models or fr
 dotnet add package Dock.Avalonia
 dotnet add package Dock.Model.Mvvm
 dotnet add package Dock.Avalonia.Themes.Fluent
+dotnet add package Dock.Avalonia.Themes.Browser
 ```
 
 ## Get started
@@ -43,6 +44,7 @@ Recommended path:
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.svg)](https://www.nuget.org/packages/Dock.Avalonia) | [`Dock.Avalonia`](https://www.nuget.org/packages/Dock.Avalonia) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.svg)](https://www.nuget.org/packages/Dock.Avalonia) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Diagnostics.svg)](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) | [`Dock.Avalonia.Diagnostics`](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Diagnostics.svg)](https://www.nuget.org/packages/Dock.Avalonia.Diagnostics) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Fluent.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) | [`Dock.Avalonia.Themes.Fluent`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Fluent.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Fluent) |
+| [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Browser.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) | [`Dock.Avalonia.Themes.Browser`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Browser.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Browser) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Avalonia.Themes.Simple.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) | [`Dock.Avalonia.Themes.Simple`](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Avalonia.Themes.Simple.svg)](https://www.nuget.org/packages/Dock.Avalonia.Themes.Simple) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Controls.ProportionalStackPanel.svg)](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) | [`Dock.Controls.ProportionalStackPanel`](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Controls.ProportionalStackPanel.svg)](https://www.nuget.org/packages/Dock.Controls.ProportionalStackPanel) |
 | [![NuGet](https://img.shields.io/nuget/v/Dock.Controls.Recycling.svg)](https://www.nuget.org/packages/Dock.Controls.Recycling) | [`Dock.Controls.Recycling`](https://www.nuget.org/packages/Dock.Controls.Recycling) | [![Downloads](https://img.shields.io/nuget/dt/Dock.Controls.Recycling.svg)](https://www.nuget.org/packages/Dock.Controls.Recycling) |

samples/BrowserTabTheme/App.axaml

@@ -0,0 +1,67 @@
+<Application xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:core="using:Dock.Model.Core"
+             xmlns:themes="using:Dock.Avalonia.Themes.Browser"
+             x:Class="BrowserTabTheme.App"
+             RequestedThemeVariant="Dark">
+  <Application.DataTemplates>
+    <DataTemplate DataType="core:IDockable" x:DataType="core:IDockable">
+      <Border Background="{DynamicResource DockSurfaceEditorBrush}" Padding="20">
+        <StackPanel Spacing="8">
+          <TextBlock Text="{Binding Title}" FontSize="18" FontWeight="SemiBold" />
+          <TextBlock Text="BrowserTabTheme sample document content." Opacity="0.8" />
+        </StackPanel>
+      </Border>
+    </DataTemplate>
+  </Application.DataTemplates>
+
+  <Application.Styles>
+    <FluentTheme />
+    <DockFluentTheme />
+    <themes:BrowserTabTheme />
+
+    <Style Selector="DocumentControl">
+      <Setter Property="IconTemplate">
+        <DataTemplate DataType="core:IDockable" x:DataType="core:IDockable">
+          <PathIcon Data="M5 1C3.89543 1 3 1.89543 3 3V13C3 14.1046 3.89543 15 5 15H11C12.1046 15 13 14.1046 13 13V5.41421C13 5.01639 12.842 4.63486 12.5607 4.35355L9.64645 1.43934C9.36514 1.15804 8.98361 1 8.58579 1H5ZM4 3C4 2.44772 4.44772 2 5 2H8V4.5C8 5.32843 8.67157 6 9.5 6H12V13C12 13.5523 11.5523 14 11 14H5C4.44772 14 4 13.5523 4 13V3ZM11.7929 5H9.5C9.22386 5 9 4.77614 9 4.5V2.20711L11.7929 5Z"
+                    Width="16"
+                    Height="16"
+                    Margin="0"
+                    Padding="0,0,2,0"
+                    Foreground="{DynamicResource DockTabForegroundBrush}" />
+        </DataTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="DocumentControl">
+      <Setter Property="HeaderTemplate">
+        <DataTemplate DataType="core:IDockable" x:DataType="core:IDockable">
+          <TextBlock Text="{Binding Title}" VerticalAlignment="Center" Padding="2" />
+        </DataTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="DocumentTabStrip">
+      <Setter Property="CreateButtonTemplate">
+        <DataTemplate>
+          <Button Command="{Binding CreateDocument}"
+                  Theme="{DynamicResource ButtonCreateDocument}">
+            <Path Stretch="Uniform"
+                  UseLayoutRounding="False"
+                  Data="{DynamicResource DockIconAddDocumentGeometry}"
+                  Fill="{DynamicResource DockTabForegroundBrush}"
+                  Margin="{DynamicResource DockCreateButtonIconMargin}" />
+          </Button>
+        </DataTemplate>
+      </Setter>
+    </Style>
+
+    <Style Selector="ToolControl">
+      <Setter Property="HeaderTemplate">
+        <DataTemplate DataType="core:IDockable" x:DataType="core:IDockable">
+          <TextBlock Text="{Binding Title}" Padding="2" />
+        </DataTemplate>
+      </Setter>
+    </Style>
+  </Application.Styles>
+</Application>