feat(navigation-bar): circle buttons from tokens, 74pt bar

Sources/DashUIKit/Components/BottomSheet/BottomSheet.swift

@@ -124,7 +124,7 @@ public struct BottomSheet<Content: View>: View {
             hasCustomCloseAction: onClose != nil)
     }
 
-    /// A header with no title, no back button and no close button is 64pt of
+    /// A header with no title, no back button and no close button is 74pt of
     /// nothing: it pushes the content down, and on a self-sizing sheet that
     /// blank strip becomes part of the sheet's own measured height. Collapse
     /// it rather than reserve it. Any one of the three brings it back, and the
@@ -142,7 +142,7 @@ public struct BottomSheet<Content: View>: View {
             },
             central: {
                 Text(title)
-                    .dashFont(.calloutMedium)
+                    .dashFont(.subheadMedium)
                     .foregroundColor(.dash.primaryText)
             },
             trailing: {

Sources/DashUIKit/Components/NavigationBar.swift

@@ -46,7 +46,7 @@ public struct NavigationBar<Leading: View, Central: View, Trailing: View>: View
 
             central
         }
-        .frame(maxWidth: .infinity, minHeight: 64)
+        .frame(maxWidth: .infinity, minHeight: 74)
     }
 }
 
@@ -99,17 +99,33 @@ public enum NavigationBarElement: String {
     case plus = "navigationbar-plus"
     case info = "navigationbar-info"
 
+    /// The element as drawn in the bar. `back`, `close` and `plus` are a glyph
+    /// centred in a stroked circle; `info` is a self-contained icon.
+    @ViewBuilder
     public var icon: some View {
+        switch self {
+        case .back, .close, .plus:
+            glyph
+                .foregroundColor(.dash.toolbarRoundContent)
+                .frame(width: 34, height: 34)
+                .overlay(
+                    Circle()
+                        .strokeBorder(Color.dash.toolbarRoundBorder, lineWidth: 1.5)
+                )
+        case .info:
+            glyph
+        }
+    }
+
+    private var glyph: some View {
         Image(dash: .custom(rawValue, bundle: .module))
-            .resizable()
-            .scaledToFit()
+            .fixedSize()
     }
 
     public func button(action: @escaping () -> Void) -> some View {
         Button(action: action) {
             icon
-                .fixedSize()
-                .frame(width: 44, height: 44, alignment: .center)
+                .frame(height: 44)
                 .contentShape(Rectangle())
         }
         .buttonStyle(NavigationBarButtonStyle())

Sources/DashUIKit/Resources/Media.xcassets/Icons & Illustrations/Navigation bar/navigationbar-back.imageset/Contents.json

@@ -1,26 +1,16 @@
 {
   "images" : [
     {
-      "filename" : "navigationbar-back@1x.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "navigationbar-back@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "navigationbar-back@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "navigationbar-back.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
   },
   "properties" : {
+    "preserves-vector-representation" : true,
     "template-rendering-intent" : "template"
   }
 }

Sources/DashUIKit/Resources/Media.xcassets/Icons & Illustrations/Navigation bar/navigationbar-close.imageset/Contents.json

@@ -1,27 +1,16 @@
 {
   "images" : [
     {
-      "filename" : "navigationbar-close@1x.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "navigationbar-close@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "navigationbar-close@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "navigationbar-close.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
   },
   "properties" : {
-    "localizable" : true,
+    "preserves-vector-representation" : true,
     "template-rendering-intent" : "template"
   }
 }

Sources/DashUIKit/Resources/Media.xcassets/Icons & Illustrations/Navigation bar/navigationbar-info.imageset/Contents.json

@@ -1,23 +1,16 @@
 {
   "images" : [
     {
-      "filename" : "control-info.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "control-info@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "control-info@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "navigationbar-info.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
+  },
+  "properties" : {
+    "preserves-vector-representation" : true,
+    "template-rendering-intent" : "original"
   }
 }

Sources/DashUIKit/Resources/Media.xcassets/Icons & Illustrations/Navigation bar/navigationbar-plus.imageset/Contents.json

@@ -1,27 +1,16 @@
 {
   "images" : [
     {
-      "filename" : "navigationbar-plus@1x.png",
-      "idiom" : "universal",
-      "scale" : "1x"
-    },
-    {
-      "filename" : "navigationbar-plus@2x.png",
-      "idiom" : "universal",
-      "scale" : "2x"
-    },
-    {
-      "filename" : "navigationbar-plus@3x.png",
-      "idiom" : "universal",
-      "scale" : "3x"
+      "filename" : "navigationbar-plus.svg",
+      "idiom" : "universal"
     }
   ],
   "info" : {
     "author" : "xcode",
     "version" : 1
   },
   "properties" : {
-    "localizable" : true,
+    "preserves-vector-representation" : true,
     "template-rendering-intent" : "template"
   }
 }

docs/navigation-and-containers.md

@@ -11,7 +11,7 @@ File `Components/NavigationBar.swift` · `@available(iOS 14, macOS 11, *)`
 A custom three-slot top bar: **leading**, **central**, **trailing**, each a
 `@ViewBuilder`. The leading/trailing pair is laid out in an `HStack` with a `Spacer`
 between; the central content is overlaid centered (so a long title stays centered
-regardless of side content). Min height 64.
+regardless of side content). Min height 74.
 
 ```swift
 NavigationBar(
@@ -31,8 +31,11 @@ Convenience initializers let you omit any slot (e.g. only `leading`, or `central
 **`NavigationBarElement`** — bundled icon buttons backed by the nav assets:
 `.back`, `.close`, `.plus`, `.info`. Each provides:
 
-- `.icon` — the resizable `Image`.
-- `.button(action:)` — a 44×44 tappable button with a press animation
+- `.icon` — the element as drawn. `.back`, `.close` and `.plus` are a vector glyph
+  (`Color.dash.toolbarRoundContent`) centred in a 34×34 circle with a 1.5pt
+  `Color.dash.toolbarRoundBorder` stroke, so both adapt to light/dark mode.
+  `.info` is a self-contained 24×24 icon.
+- `.button(action:)` — the icon in a tappable area 44pt tall and as wide as the icon, with a press animation
   (scale 0.88 + opacity 0.7).
 
 ---