feat: update editor ui framework and assets

editor/src/UI/StyleTokens.h

@@ -94,22 +94,82 @@ inline ImVec2 DefaultPanelContentPadding() {
     return ImVec2(8.0f, 6.0f);
 }
 
-inline float InspectorPropertyLabelWidth() {
-    return 104.0f;
+inline ImVec2 HierarchyPanelContentPadding() {
+    return ImVec2(10.0f, 6.0f);
 }
 
-inline ImVec2 ControlCellPadding() {
-    return ImVec2(0.0f, 2.0f);
+inline float InspectorSectionContentIndent() {
+    return 12.0f;
+}
+
+inline float InspectorPropertyLabelInset() {
+    return 12.0f;
+}
+
+inline float InspectorPropertyControlColumnStart() {
+    return 236.0f;
+}
+
+inline float InspectorPropertyLabelControlGap() {
+    return 20.0f;
 }
 
 inline ImVec2 ControlFramePadding() {
-    return ImVec2(6.0f, 3.0f);
+    return ImVec2(3.0f, 0.0f);
 }
 
 inline float ControlRowHeightOffset() {
+    return 1.0f;
+}
+
+inline ImVec2 InspectorComponentControlSpacing() {
+    return ImVec2(6.0f, 3.0f);
+}
+
+inline float InspectorPropertyControlTrailingInset() {
+    return 8.0f;
+}
+
+inline float CompoundControlSpacing() {
+    return 4.0f;
+}
+
+inline float SliderValueFieldWidth() {
+    return 64.0f;
+}
+
+inline float LinearSliderTrackThickness() {
     return 2.0f;
 }
 
+inline float LinearSliderGrabRadius() {
+    return 5.0f;
+}
+
+inline float LinearSliderHorizontalPadding() {
+    return 5.0f;
+}
+
+inline ImVec4 LinearSliderTrackColor() {
+    return ImVec4(0.30f, 0.30f, 0.30f, 1.0f);
+}
+
+inline ImVec4 LinearSliderFillColor() {
+    return ImVec4(0.66f, 0.66f, 0.66f, 1.0f);
+}
+
+inline ImVec4 LinearSliderGrabColor() {
+    return ImVec4(0.78f, 0.78f, 0.78f, 1.0f);
+}
+
+inline ImVec4 LinearSliderGrabHoveredColor() {
+    return ImVec4(0.88f, 0.88f, 0.88f, 1.0f);
+}
+
+inline ImVec4 LinearSliderGrabActiveColor() {
+    return ImVec4(0.95f, 0.95f, 0.95f, 1.0f);
+}
+
 inline ImVec2 InspectorPanelContentPadding() {
     return ImVec2(10.0f, 0.0f);
 }
@@ -147,15 +207,15 @@ inline ImVec4 PanelSplitterIdleColor() {
 }
 
 inline ImVec4 PanelSplitterHoveredColor() {
-    return ImVec4(0.30f, 0.30f, 0.30f, 1.0f);
+    return PanelSplitterIdleColor();
 }
 
 inline ImVec4 PanelSplitterActiveColor() {
-    return ImVec4(0.34f, 0.34f, 0.34f, 1.0f);
+    return PanelSplitterIdleColor();
 }
 
 inline ImVec2 ProjectNavigationPanePadding() {
-    return ImVec2(8.0f, 6.0f);
+    return ImVec2(10.0f, 6.0f);
 }
 
 inline ImVec2 ProjectBrowserPanePadding() {
@@ -163,21 +223,37 @@ inline ImVec2 ProjectBrowserPanePadding() {
 }
 
 inline ImVec2 NavigationTreeNodeFramePadding() {
-    return ImVec2(4.0f, 3.0f);
+    return ImVec2(4.0f, 1.0f);
+}
+
+inline float CompactNavigationTreeItemSpacingY() {
+    return 0.0f;
+}
+
+inline float CompactNavigationTreeIndentSpacing() {
+    return 14.0f;
+}
+
+inline float NavigationTreeIconSize() {
+    return 17.0f;
 }
 
 inline float NavigationTreePrefixWidth() {
-    return 16.0f;
-}
-
-inline float NavigationTreePrefixLabelGap() {
-    return 6.0f;
+    return 18.0f;
 }
 
 inline float NavigationTreePrefixStartOffset() {
+    return -5.0f;
+}
+
+inline float NavigationTreePrefixLabelGap() {
     return 2.0f;
 }
 
+inline float DisclosureArrowScale() {
+    return 0.14f;
+}
+
 inline ImVec4 NavigationTreePrefixColor(bool selected = false, bool hovered = false) {
     if (selected) {
         return ImVec4(0.86f, 0.86f, 0.86f, 1.0f);
@@ -188,16 +264,54 @@ inline ImVec4 NavigationTreePrefixColor(bool selected = false, bool hovered = fa
     return ImVec4(0.62f, 0.62f, 0.62f, 1.0f);
 }
 
+struct TreeViewStyle {
+    ImVec2 framePadding = NavigationTreeNodeFramePadding();
+    float itemSpacingY = -1.0f;
+    float indentSpacing = -1.0f;
+    float prefixStartOffset = NavigationTreePrefixStartOffset();
+    float prefixLabelGap = NavigationTreePrefixLabelGap();
+};
+
+inline TreeViewStyle NavigationTreeStyle() {
+    TreeViewStyle style;
+    style.itemSpacingY = CompactNavigationTreeItemSpacingY();
+    style.indentSpacing = CompactNavigationTreeIndentSpacing();
+    style.framePadding = NavigationTreeNodeFramePadding();
+    style.prefixStartOffset = NavigationTreePrefixStartOffset();
+    style.prefixLabelGap = NavigationTreePrefixLabelGap();
+    return style;
+}
+
+inline TreeViewStyle HierarchyTreeStyle() {
+    return NavigationTreeStyle();
+}
+
+inline TreeViewStyle ProjectFolderTreeStyle() {
+    return NavigationTreeStyle();
+}
+
+inline ImVec4 ProjectPanelBackgroundColor() {
+    return DockTabSelectedColor();
+}
+
+inline ImVec4 ProjectPanelToolbarBackgroundColor() {
+    return ProjectPanelBackgroundColor();
+}
+
 inline ImVec4 ProjectNavigationPaneBackgroundColor() {
+    return ProjectPanelBackgroundColor();
+}
+
+inline ImVec4 ProjectBrowserSurfaceColor() {
     return ImVec4(0.20f, 0.20f, 0.20f, 1.0f);
 }
 
 inline ImVec4 ProjectBrowserHeaderBackgroundColor() {
-    return ImVec4(0.18f, 0.18f, 0.18f, 1.0f);
+    return ProjectPanelBackgroundColor();
 }
 
 inline ImVec4 ProjectBrowserPaneBackgroundColor() {
-    return ImVec4(0.22f, 0.22f, 0.22f, 1.0f);
+    return ProjectBrowserSurfaceColor();
 }
 
 inline ImVec4 ToolbarBackgroundColor() {
@@ -228,6 +342,28 @@ inline ImVec4 HintTextColor() {
     return ImVec4(0.53f, 0.53f, 0.53f, 1.0f);
 }
 
+inline ImVec2 BreadcrumbSegmentPadding() {
+    return ImVec2(4.0f, 1.0f);
+}
+
+inline float BreadcrumbSegmentSpacing() {
+    return 3.0f;
+}
+
+inline ImVec4 BreadcrumbSegmentTextColor(bool current = false, bool hovered = false) {
+    if (hovered) {
+        return ImVec4(0.90f, 0.90f, 0.90f, 1.0f);
+    }
+    if (current) {
+        return ImVec4(0.84f, 0.84f, 0.84f, 1.0f);
+    }
+    return ImVec4(0.72f, 0.72f, 0.72f, 1.0f);
+}
+
+inline ImVec4 BreadcrumbSeparatorColor() {
+    return HintTextColor();
+}
+
 inline float EmptyStateLineOffset() {
     return 20.0f;
 }
@@ -248,6 +384,122 @@ inline ImVec2 PopupWindowPadding() {
     return ImVec2(12.0f, 10.0f);
 }
 
+inline ImVec2 ComboPopupWindowPadding() {
+    return ImVec2(6.0f, 1.0f);
+}
+
+inline ImVec2 ComboPopupItemSpacing() {
+    return ImVec2(0.0f, 0.0f);
+}
+
+inline float ComboPopupRounding() {
+    return 1.0f;
+}
+
+inline float ComboPopupBorderSize() {
+    return 1.0f;
+}
+
+inline ImVec4 ComboPopupBackgroundColor() {
+    return ImVec4(1.0f, 1.0f, 1.0f, 1.0f);
+}
+
+inline ImVec4 ComboPopupTextColor() {
+    return ImVec4(0.14f, 0.14f, 0.14f, 1.0f);
+}
+
+inline ImVec4 ComboPopupTextDisabledColor() {
+    return ImVec4(0.55f, 0.55f, 0.55f, 1.0f);
+}
+
+inline ImVec4 ComboPopupItemColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.0f);
+}
+
+inline ImVec4 ComboPopupItemHoveredColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.045f);
+}
+
+inline ImVec4 ComboPopupItemActiveColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.08f);
+}
+
+inline ImVec4 ComboPopupCheckMarkColor() {
+    return ImVec4(0.20f, 0.20f, 0.20f, 1.0f);
+}
+
+inline float PopupWindowRounding() {
+    return 5.0f;
+}
+
+inline float PopupWindowBorderSize() {
+    return 0.0f;
+}
+
+inline float PopupFrameRounding() {
+    return 4.0f;
+}
+
+inline float PopupFrameBorderSize() {
+    return 1.0f;
+}
+
+inline ImVec4 PopupBackgroundColor() {
+    return ImVec4(1.0f, 1.0f, 1.0f, 1.0f);
+}
+
+inline ImVec4 PopupBorderColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.10f);
+}
+
+inline ImVec4 PopupTextColor() {
+    return ImVec4(0.14f, 0.14f, 0.14f, 1.0f);
+}
+
+inline ImVec4 PopupTextDisabledColor() {
+    return ImVec4(0.55f, 0.55f, 0.55f, 1.0f);
+}
+
+inline ImVec4 PopupItemColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.0f);
+}
+
+inline ImVec4 PopupItemHoveredColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.06f);
+}
+
+inline ImVec4 PopupItemActiveColor() {
+    return ImVec4(0.0f, 0.0f, 0.0f, 0.10f);
+}
+
+inline ImVec4 PopupFrameColor() {
+    return ImVec4(1.0f, 1.0f, 1.0f, 1.0f);
+}
+
+inline ImVec4 PopupFrameHoveredColor() {
+    return ImVec4(0.965f, 0.965f, 0.965f, 1.0f);
+}
+
+inline ImVec4 PopupFrameActiveColor() {
+    return ImVec4(0.94f, 0.94f, 0.94f, 1.0f);
+}
+
+inline ImVec4 PopupButtonColor() {
+    return ImVec4(0.95f, 0.95f, 0.95f, 1.0f);
+}
+
+inline ImVec4 PopupButtonHoveredColor() {
+    return ImVec4(0.90f, 0.90f, 0.90f, 1.0f);
+}
+
+inline ImVec4 PopupButtonActiveColor() {
+    return ImVec4(0.86f, 0.86f, 0.86f, 1.0f);
+}
+
+inline ImVec4 PopupCheckMarkColor() {
+    return ImVec4(0.20f, 0.20f, 0.20f, 1.0f);
+}
+
 inline ImVec2 AssetTileSize() {
     return ImVec2(104.0f, 82.0f);
 }
@@ -304,6 +556,18 @@ inline ImVec2 AssetTileIconSize() {
     return ImVec2(32.0f, 24.0f);
 }
 
+inline ImVec2 FolderAssetTileIconSize() {
+    return ImVec2(72.0f, 72.0f);
+}
+
+inline ImVec2 FolderAssetTileIconOffset() {
+    return ImVec2(0.0f, 2.0f);
+}
+
+inline float AssetTileIconTextGap() {
+    return 4.0f;
+}
+
 inline ImVec2 AssetTileTextPadding() {
     return ImVec2(6.0f, 10.0f);
 }
@@ -312,12 +576,16 @@ inline ImVec4 AssetTileTextColor(bool selected = false) {
     return selected ? ImVec4(0.93f, 0.93f, 0.93f, 1.0f) : ImVec4(0.76f, 0.76f, 0.76f, 1.0f);
 }
 
-inline ImVec4 AssetFolderIconFillColor() {
-    return ImVec4(0.50f, 0.50f, 0.50f, 1.0f);
+inline ImVec4 BuiltInFolderIconTabColor() {
+    return ImVec4(0.77f, 0.77f, 0.77f, 1.0f);
 }
 
-inline ImVec4 AssetFolderIconLineColor() {
-    return ImVec4(0.80f, 0.80f, 0.80f, 0.90f);
+inline ImVec4 BuiltInFolderIconTopColor() {
+    return ImVec4(0.82f, 0.82f, 0.82f, 1.0f);
+}
+
+inline ImVec4 BuiltInFolderIconBodyColor() {
+    return ImVec4(0.72f, 0.72f, 0.72f, 1.0f);
 }
 
 inline ImVec4 AssetFileIconFillColor() {