Window and workspace classes
ToolboxNames.Lookup.Classes lists the class names. Index 0 of each list is the canonical name.
The workspace adds the canonical window classes to every chrome, also to chrome from a custom template. So WindowStyles.uss applies to all templates.
Workspace and window chrome
| Class | Element |
|---|---|
tb-workspace |
The Workspace element. |
tb-window |
The chrome root of every window. |
tb-child-window |
The frame inside the chrome root. |
tb-title-bar |
The title bar. |
tb-title-label |
The title text. |
tb-button-group |
The group of window buttons (default template). |
tb-window-button |
Each window button. |
tb-minimize-button, tb-maximize-button, tb-close-button |
The three window buttons. |
tb-window-content |
The content slot. |
tb-drag-handle |
A drag handle other than the title bar. |
tb-resize-handle |
A resize handle. It also has one of resize-top, resize-bottom, resize-left, resize-right, resize-top-left, resize-top-right, resize-bottom-left, resize-bottom-right. Added to every resizable window whose template has none. WindowStyles.uss hides it under tb-window--minimized. |
tb-focused |
Added to the chrome root of the focused window. |
tb-error-chrome |
Chrome shown when every chrome source failed. |
Tabs
| Class | Element |
|---|---|
tb-tab-strip |
The tab strip of a tab group. |
tb-tab |
One tab chip. |
tb-tab-label |
The tab text. |
tb-tab--active |
The active tab chip. |
tb-tab-close |
The tab close button. |
tb-tab-pages |
The container of the tab pages. |
Toolbar, docking and menus
| Class | Element |
|---|---|
tb-toolbar |
WorkspaceToolbar. Its height is reserved at the top of the viewport. Buttons that do not fit wrap to a new row. |
tb-toolbar-button |
WorkspaceToolbarButton. |
tb-dock-chrome, tb-dock-content, tb-dock-edge-indicator |
Parts of DockPanelTemplate.uxml. |
tb-dock--left, tb-dock--right, tb-dock--top, tb-dock--bottom |
Added to a dock zone chrome for its edge. |
tb-context-menu |
ContextMenuComponent. |
tb-menu-item |
MenuItem: a row with a check, an icon, a label, a shortcut and an arrow. |
tb-menu-item__check, tb-menu-item__icon, tb-menu-item__label |
The check mark column, the icon (16 px, hidden without an icon) and the text. |
tb-menu-item__shortcut, tb-menu-item__arrow |
The shortcut text (muted, right-aligned) and the submenu arrow (shown for an item with a submenu). |
tb-menu-item--checked, tb-menu-item--highlighted |
A checked item, and the item under the pointer or the keyboard highlight (accent background). |
tb-menu-separator |
A menu separator. |
tb-toolbar-menu |
ToolBarMenu: a row of titles with the surface background and a bottom border. |
tb-toolbar-menu__titles |
The row of titles. It clips a title that does not fit. |
tb-toolbar-menu__item |
A title (ToolBarMenuItem). It gets the hover color on hover. The access key is underlined with a <u> tag. |
tb-toolbar-menu__overflow |
The "≡" title that shows when titles do not fit. Its width is ToolBarMenu.OVERFLOW_WIDTH (32 px), set in code. |
tb-toolbar-menu__item--open |
The title whose menu is open (accent background, also under the pointer). |
tb-text-muted |
Utility class for secondary text. See Text classes. |
Error dialog
The error dialog is a Dialog with the class tb-error-dialog, so the tb-dialog classes style it too. Each error in it is an tb-error-dialog__entry, with its time in an tb-error-dialog__entry-header.
Unity controls in the workspace
Unity's own controls in the workspace take the theme colors, so a form in a window, a popup or a docked panel does not show Unity's default look. The rules in WindowStyles.uss start with .tb-workspace, so a control outside the workspace keeps the Unity look. A USS type selector matches the exact type only, so .tb-workspace Button does not match a subclass; WorkspaceToolbarButton has its own tb-toolbar-button rule. The rules set colors. Two layout rules fix the runtime theme: vector and rect fields show their axes on one row, and the radio dot shows.
| Unity classes | Look |
|---|---|
unity-base-field__label, unity-toggle__text, unity-radio-button__text, unity-foldout__text |
--tb-color-text. |
unity-base-text-field__input, unity-base-popup-field__input, unity-enum-field__input |
--tb-color-background with a --tb-color-border border and --tb-color-text text. The border is --tb-color-text-muted on hover and --tb-color-accent with the focus. A placeholder uses --tb-color-text-disabled. |
unity-toggle__checkmark, unity-radio-button__checkmark-background |
The same box colors; the check takes --tb-color-text. |
unity-radio-button__checkmark |
The dot. The runtime theme draws it with a background color, so the rule sets background-color and the image tint to --tb-color-text. |
unity-composite-field__input, unity-composite-field__field |
Vector2, Vector3, Vector4, Rect and Bounds fields. The runtime theme stacks the axes and gives each axis label the field label width. The rules put the axes on one row with equal widths and a small label. |
unity-foldout__checkmark, unity-tree-view__item-toggle |
No box; the arrow is --tb-color-text-muted. |
unity-collection-view__item (ListView, TreeView, MultiColumnListView) |
--tb-color-surface, --tb-color-surface-alt for alternating rows, --tb-color-surface-hover on hover, and --tb-color-accent with --tb-color-accent-text when selected. |
unity-tab-view__header-container, unity-tab__header |
--tb-color-surface-alt; the checked tab is --tb-color-surface with an --tb-color-accent underline. |
unity-tab__reorderable-handle-bar, unity-tab__close-button |
The grip of a reorderable tab and the x of a closeable tab: --tb-color-text-muted. The x is --tb-color-text on hover. |
unity-progress-bar__background, unity-progress-bar__progress |
--tb-color-background with the border; the progress is --tb-color-accent. |
unity-help-box |
--tb-color-surface-alt with the border. |
unity-base-dropdown__container-inner and its items |
The menu of a DropdownField. It opens at the panel root, outside the workspace. After a press in the workspace, the workspace adds its theme sheet and user sheets to the new menu for 10 ticks, so the menu takes the workspace palette. A menu opened by code, with no press, keeps the base palette. |
unity-base-slider__tracker, unity-base-slider__dragger, unity-repeat-button |
Sliders: --tb-color-surface-alt tracks, --tb-color-border handles, --tb-color-surface-hover on hover. |
unity-scroller |
Scroll bars. See the next section. |
Scroll bars
The scroll views in an element with the class tb-scrollbars have a thin scroll bar: 12px wide, with a round 6px handle, no track and no arrow buttons. The handle is --tb-color-border, --tb-color-text-muted on hover and --tb-color-accent during a drag.
The workspace, each Toolbox control and each popup have the class. Add the class to an element of your own UI, for example the root of a menu screen, to get the same bars in it:
<ui:VisualElement class="tb-scrollbars">
<ui:ScrollView />
</ui:VisualElement>
The rules are in Controls.uss. Outside a workspace, the panel has that sheet when it has one Toolbox control or more. To change the look, override the rules in your sheet with the same selectors, for example:
.tb-scrollbars .unity-scroller .unity-base-slider__dragger {
background-color: var(--tb-color-accent);
}