@sriinnu/runic 1.2.0 → 2.0.0

package/Sources/Runic/Views/Menu/MenuContent.swift

@@ -4,19 +4,19 @@ import SwiftUI
 
 enum MenuContentMetrics {
     /// Horizontal padding for menu content
-    static let horizontalPadding: CGFloat = RunicSpacing.sm  // 12
+    static let horizontalPadding: CGFloat = RunicSpacing.sm // 12
 
     /// Vertical padding for menu content
-    static let verticalPadding: CGFloat = RunicSpacing.xs  // 8
+    static let verticalPadding: CGFloat = RunicSpacing.xs // 8
 
     /// Spacing between menu sections
-    static let sectionSpacing: CGFloat = RunicSpacing.xs  // 8
+    static let sectionSpacing: CGFloat = RunicSpacing.xs // 8
 
     /// Spacing between menu entries
-    static let entrySpacing: CGFloat = RunicSpacing.xxs  // 4
+    static let entrySpacing: CGFloat = RunicSpacing.xxs // 4
 
     /// Minimum menu width
-    static let minWidth: CGFloat = 260
+    static let minWidth: CGFloat = 290
 }
 
 @MainActor
@@ -52,6 +52,7 @@ struct MenuContent: View {
         .padding(.horizontal, MenuContentMetrics.horizontalPadding)
         .padding(.vertical, MenuContentMetrics.verticalPadding)
         .frame(minWidth: MenuContentMetrics.minWidth, alignment: .leading)
+        .runicTypography()
     }
 
     @ViewBuilder
@@ -60,11 +61,11 @@ struct MenuContent: View {
         case let .text(text, style):
             switch style {
             case .headline:
-                Text(text).font(.headline)
+                Text(text).font(RunicFont.headline)
             case .primary:
                 Text(text)
             case .secondary:
-                Text(text).foregroundStyle(.secondary).font(.footnote)
+                Text(text).foregroundStyle(.secondary).font(RunicFont.footnote)
             }
         case let .action(title, action):
             Button {
@@ -89,7 +90,9 @@ struct MenuContent: View {
         }
     }
 
-    private func iconName(for action: MenuDescriptor.MenuAction) -> String? { action.systemImageName }
+    private func iconName(for action: MenuDescriptor.MenuAction) -> String? {
+        action.systemImageName
+    }
 
     private func perform(_ action: MenuDescriptor.MenuAction) {
         switch action {

package/Sources/Runic/Views/Menu/MenuDescriptor.swift

@@ -1,5 +1,5 @@
-import RunicCore
 import Foundation
+import RunicCore
 
 @MainActor
 struct MenuDescriptor {
@@ -351,7 +351,9 @@ private enum AccountFormatter {
         return cleaned.isEmpty ? text : cleaned
     }
 
-    static func email(_ text: String) -> String { text }
+    static func email(_ text: String) -> String {
+        text
+    }
 }
 
 extension MenuDescriptor.MenuAction {

package/Sources/Runic/Views/Menu/MenuHighlightStyle.swift

@@ -1,14 +1,7 @@
 import SwiftUI
 
-private struct MenuItemHighlightedKey: EnvironmentKey {
-    static let defaultValue = false
-}
-
 extension EnvironmentValues {
-    var menuItemHighlighted: Bool {
-        get { self[MenuItemHighlightedKey.self] }
-        set { self[MenuItemHighlightedKey.self] = newValue }
-    }
+    @Entry var menuItemHighlighted: Bool = false
 }
 
 enum MenuHighlightStyle {

package/Sources/Runic/Views/Menu/ModelBreakdownMenuView.swift

@@ -20,16 +20,18 @@ struct ModelBreakdownMenuView: View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             if model.items.isEmpty {
                 Text("No model data.")
-                    .font(.footnote)
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
             } else {
                 // MARK: - Title
+
                 Text("Models")
-                    .font(.caption)
+                    .font(RunicFont.caption)
                     .fontWeight(.semibold)
                     .foregroundStyle(.primary)
 
                 // MARK: - Donut chart
+
                 Chart {
                     ForEach(model.chartItems) { item in
                         SectorMark(
@@ -45,6 +47,7 @@ struct ModelBreakdownMenuView: View {
                 .accessibilityLabel(Self.chartAccessibilityLabel(model: model))
 
                 // MARK: - Model list
+
                 VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
                     ForEach(model.chartItems) { item in
                         Self.modelRow(item: item)
@@ -52,28 +55,31 @@ struct ModelBreakdownMenuView: View {
                 }
 
                 // MARK: - Overflow note
+
                 if model.overflowCount > 0 {
                     Text("and \(model.overflowCount) more")
-                        .font(.caption2)
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
 
                 // MARK: - Cache hit rate
+
                 if let cacheRate = model.cacheHitRateText {
                     Divider()
                     HStack(spacing: RunicSpacing.xxs) {
                         Text("Cache hit rate")
-                            .font(.caption)
+                            .font(RunicFont.caption)
                             .foregroundStyle(.secondary)
                         Spacer(minLength: RunicSpacing.xxs)
                         Text(cacheRate)
-                            .font(.caption)
+                            .font(RunicFont.caption)
                             .fontWeight(.medium)
                             .foregroundStyle(.primary)
                     }
                 }
 
                 // MARK: - Total summary
+
                 Divider()
                 Self.totalRow(model: model)
             }
@@ -91,27 +97,27 @@ struct ModelBreakdownMenuView: View {
                 .fill(item.color)
                 .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
             Text(item.displayName)
-                .font(.caption)
+                .font(RunicFont.caption)
                 .foregroundStyle(.primary)
                 .lineLimit(1)
                 .truncationMode(.tail)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(item.totalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 if let context = UsageFormatter.modelContextLabel(for: item.model) {
                     Text(context)
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
                 HStack(spacing: RunicSpacing.xxxs) {
                     Text("\(item.requestCount) req\(item.requestCount == 1 ? "" : "s")")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     if let cost = item.costText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }
@@ -122,21 +128,21 @@ struct ModelBreakdownMenuView: View {
     private static func totalRow(model: ModelModel) -> some View {
         HStack {
             Text("Total")
-                .font(.caption)
+                .font(RunicFont.caption)
                 .fontWeight(.medium)
                 .foregroundStyle(.primary)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(model.grandTotalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 HStack(spacing: RunicSpacing.xxxs) {
                     Text("\(model.grandTotalRequests) requests")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     if let cost = model.grandTotalCostText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }

package/Sources/Runic/Views/Menu/OverviewMenuView.swift

@@ -16,8 +16,8 @@ struct OverviewMenuView: View {
         let todayTokens: Int
         let brandColor: Color
         let resetDescription: String?
-        let windowLabel: String?       // e.g. "5h" or "Weekly"
-        let topModelContext: String?    // e.g. "200K ctx"
+        let windowLabel: String? // e.g. "5h" or "Weekly"
+        let topModelContext: String? // e.g. "200K ctx"
     }
 
     struct DailyPoint: Identifiable {
@@ -37,6 +37,7 @@ struct OverviewMenuView: View {
     var body: some View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             // MARK: - Hero header
+
             HStack(alignment: .center, spacing: RunicSpacing.xs) {
                 // Ring indicator showing overall usage
                 ZStack {
@@ -55,9 +56,9 @@ struct OverviewMenuView: View {
 
                 VStack(alignment: .leading, spacing: 0) {
                     Text(UsageFormatter.tokenCountString(self.totalTodayTokens))
-                        .font(.system(size: 22, weight: .bold, design: .rounded))
+                        .font(RunicFont.system(size: 22, weight: .bold))
                     Text("\(self.summaries.count) of \(self.totalProviders) active")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
 
@@ -65,10 +66,10 @@ struct OverviewMenuView: View {
 
                 VStack(alignment: .trailing, spacing: 2) {
                     Text("today")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     Text("\(Int(self.averageUsedPercent))% avg")
-                        .font(.system(.caption, design: .rounded))
+                        .font(RunicFont.caption)
                         .fontWeight(.medium)
                         .foregroundStyle(.secondary)
                 }
@@ -77,9 +78,10 @@ struct OverviewMenuView: View {
             Divider().opacity(0.5)
 
             // MARK: - Provider cards
+
             if self.summaries.isEmpty {
                 Text("No active providers.")
-                    .font(.system(.footnote, design: .rounded))
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
                     .frame(maxWidth: .infinity, alignment: .center)
                     .padding(.vertical, RunicSpacing.md)
@@ -92,12 +94,13 @@ struct OverviewMenuView: View {
             }
 
             // MARK: - Combined 7-day chart
+
             if !self.chartPoints.isEmpty {
                 Divider().opacity(0.5)
 
                 HStack {
                     Text("7-day activity")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     Spacer()
                     // Mini legend dots
@@ -109,7 +112,7 @@ struct OverviewMenuView: View {
                         }
                         if self.summaries.count > 4 {
                             Text("+\(self.summaries.count - 4)")
-                                .font(.system(size: 8, design: .rounded))
+                                .font(RunicFont.system(size: 8))
                                 .foregroundStyle(.quaternary)
                         }
                     }
@@ -133,7 +136,7 @@ struct OverviewMenuView: View {
                         AxisValueLabel {
                             if let tokens = value.as(Int.self) {
                                 Text(UsageFormatter.tokenCountString(tokens))
-                                    .font(.system(size: 8, design: .rounded))
+                                    .font(RunicFont.system(size: 8))
                                     .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
                             }
                         }
@@ -142,7 +145,7 @@ struct OverviewMenuView: View {
                 .chartXAxis {
                     AxisMarks(values: .automatic(desiredCount: 7)) { _ in
                         AxisValueLabel(format: .dateTime.weekday(.narrow))
-                            .font(.system(size: 8, weight: .medium, design: .rounded))
+                            .font(RunicFont.system(size: 8, weight: .medium))
                             .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
                     }
                 }
@@ -182,7 +185,7 @@ private struct ProviderRow: View {
 
             // Name
             Text(self.summary.name)
-                .font(.system(.caption, design: .rounded))
+                .font(RunicFont.caption)
                 .fontWeight(.medium)
                 .frame(width: 58, alignment: .leading)
                 .lineLimit(1)
@@ -224,14 +227,14 @@ private struct ProviderRow: View {
 
             // Percentage
             Text("\(Int(self.summary.usedPercent))%")
-                .font(.system(size: 9, weight: .semibold, design: .rounded))
+                .font(RunicFont.system(size: 9, weight: .semibold))
                 .foregroundStyle(self.summary.usedPercent > 80 ? .primary : .secondary)
                 .frame(width: 28, alignment: .trailing)
 
             // Today's tokens (if any)
             if self.summary.todayTokens > 0 {
                 Text(UsageFormatter.tokenCountString(self.summary.todayTokens))
-                    .font(.system(size: 8, design: .rounded))
+                    .font(RunicFont.system(size: 8))
                     .foregroundStyle(.tertiary)
                     .frame(width: 32, alignment: .trailing)
             }
@@ -267,7 +270,7 @@ private struct InfoPill: View {
 
     var body: some View {
         Text(self.text)
-            .font(.system(size: 8, weight: .medium, design: .rounded))
+            .font(RunicFont.system(size: 8, weight: .medium))
             .foregroundStyle(.tertiary)
             .padding(.horizontal, 4)
             .padding(.vertical, 1)

package/Sources/Runic/Views/Menu/ProjectBreakdownMenuView.swift

@@ -20,16 +20,18 @@ struct ProjectBreakdownMenuView: View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             if model.items.isEmpty {
                 Text("No project data.")
-                    .font(.footnote)
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
             } else {
                 // MARK: - Title
+
                 Text("Projects")
-                    .font(.caption)
+                    .font(RunicFont.caption)
                     .fontWeight(.semibold)
                     .foregroundStyle(.primary)
 
                 // MARK: - Horizontal bar chart
+
                 Chart {
                     ForEach(model.chartItems) { item in
                         BarMark(
@@ -43,7 +45,7 @@ struct ProjectBreakdownMenuView: View {
                 .chartYAxis {
                     AxisMarks { _ in
                         AxisValueLabel()
-                            .font(.caption2)
+                            .font(RunicFont.caption2)
                             .foregroundStyle(Color(nsColor: .secondaryLabelColor))
                     }
                 }
@@ -53,6 +55,7 @@ struct ProjectBreakdownMenuView: View {
                 .accessibilityLabel(Self.chartAccessibilityLabel(model: model))
 
                 // MARK: - Project list
+
                 VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
                     ForEach(model.chartItems) { item in
                         Self.projectRow(item: item)
@@ -60,13 +63,15 @@ struct ProjectBreakdownMenuView: View {
                 }
 
                 // MARK: - Overflow note
+
                 if model.overflowCount > 0 {
                     Text("and \(model.overflowCount) more")
-                        .font(.caption2)
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
 
                 // MARK: - Total summary
+
                 Divider()
                 Self.totalRow(model: model)
             }
@@ -84,24 +89,24 @@ struct ProjectBreakdownMenuView: View {
                 .fill(item.color)
                 .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
             Text(item.name)
-                .font(.caption)
+                .font(RunicFont.caption)
                 .foregroundStyle(.primary)
                 .lineLimit(1)
                 .truncationMode(.middle)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(item.totalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 HStack(spacing: RunicSpacing.xxxs) {
                     if let cost = item.costText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                     if item.modelCount > 0 {
                         Text("\(item.modelCount) model\(item.modelCount == 1 ? "" : "s")")
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }
@@ -112,17 +117,17 @@ struct ProjectBreakdownMenuView: View {
     private static func totalRow(model: ProjectModel) -> some View {
         HStack {
             Text("Total")
-                .font(.caption)
+                .font(RunicFont.caption)
                 .fontWeight(.medium)
                 .foregroundStyle(.primary)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(model.grandTotalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 if let cost = model.grandTotalCostText {
                     Text(cost)
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
             }

package/Sources/Runic/Views/Menu/ProjectBudgetMenuView.swift

@@ -14,11 +14,11 @@ struct ProjectBudgetMenuView: View {
 
         var statusColor: Color {
             if self.isOverBudget {
-                return Color(red: 0.94, green: 0.36, blue: 0.36) // Red
+                Color(red: 0.94, green: 0.36, blue: 0.36) // Red
             } else if self.isNearLimit {
-                return Color(red: 0.94, green: 0.74, blue: 0.26) // Yellow
+                Color(red: 0.94, green: 0.74, blue: 0.26) // Yellow
             } else {
-                return Color(red: 0.46, green: 0.75, blue: 0.36) // Green
+                Color(red: 0.46, green: 0.75, blue: 0.36) // Green
             }
         }
     }
@@ -44,7 +44,7 @@ struct ProjectBudgetMenuView: View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             HStack {
                 Text("Project Budgets")
-                    .font(.headline)
+                    .font(RunicFont.headline)
                     .fontWeight(.semibold)
                 Spacer()
                 Button {
@@ -52,9 +52,9 @@ struct ProjectBudgetMenuView: View {
                 } label: {
                     HStack(spacing: RunicSpacing.xxs) {
                         Image(systemName: "gearshape")
-                            .font(.caption)
+                            .font(RunicFont.caption)
                         Text("Configure")
-                            .font(.caption)
+                            .font(RunicFont.caption)
                     }
                 }
                 .buttonStyle(.plain)
@@ -64,13 +64,13 @@ struct ProjectBudgetMenuView: View {
             if model.isEmpty {
                 VStack(alignment: .leading, spacing: RunicSpacing.xs) {
                     Text("No budgets configured.")
-                        .font(.footnote)
+                        .font(RunicFont.footnote)
                         .foregroundStyle(.secondary)
                     Button {
                         self.onOpenPreferences()
                     } label: {
                         Text("Set up budgets in Preferences")
-                            .font(.caption)
+                            .font(RunicFont.caption)
                     }
                     .buttonStyle(.plain)
                     .foregroundStyle(.blue)
@@ -88,8 +88,8 @@ struct ProjectBudgetMenuView: View {
                 }
 
                 // Summary
-                let overBudget = model.filter { $0.isOverBudget }.count
-                let nearLimit = model.filter { $0.isNearLimit && !$0.isOverBudget }.count
+                let overBudget = model.count(where: { $0.isOverBudget })
+                let nearLimit = model.count(where: { $0.isNearLimit && !$0.isOverBudget })
                 if overBudget > 0 || nearLimit > 0 {
                     Divider()
                         .padding(.vertical, RunicSpacing.xxs)
@@ -98,20 +98,20 @@ struct ProjectBudgetMenuView: View {
                         if overBudget > 0 {
                             HStack(spacing: RunicSpacing.xxs) {
                                 Image(systemName: "exclamationmark.triangle.fill")
-                                    .font(.caption2)
+                                    .font(RunicFont.caption2)
                                     .foregroundStyle(Color(red: 0.94, green: 0.36, blue: 0.36))
                                 Text("\(overBudget) project\(overBudget == 1 ? "" : "s") over budget")
-                                    .font(.caption)
+                                    .font(RunicFont.caption)
                                     .foregroundStyle(.secondary)
                             }
                         }
                         if nearLimit > 0 {
                             HStack(spacing: RunicSpacing.xxs) {
                                 Image(systemName: "exclamationmark.circle.fill")
-                                    .font(.caption2)
+                                    .font(RunicFont.caption2)
                                     .foregroundStyle(Color(red: 0.94, green: 0.74, blue: 0.26))
                                 Text("\(nearLimit) project\(nearLimit == 1 ? "" : "s") near limit")
-                                    .font(.caption)
+                                    .font(RunicFont.caption)
                                     .foregroundStyle(.secondary)
                             }
                         }
@@ -167,34 +167,34 @@ private struct ProjectBudgetRow: View {
     var body: some View {
         VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
             HStack(alignment: .firstTextBaseline) {
-                Text(project.projectName)
-                    .font(.body)
+                Text(self.project.projectName)
+                    .font(RunicFont.body)
                     .fontWeight(.medium)
                     .lineLimit(1)
                 Spacer()
                 Text(self.budgetText)
-                    .font(.caption)
+                    .font(RunicFont.caption)
                     .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
             }
 
             UsageProgressBar(
-                percent: project.percentUsed,
-                tint: project.statusColor,
+                percent: self.project.percentUsed,
+                tint: self.project.statusColor,
                 accessibilityLabel: "Budget usage")
 
             HStack(alignment: .firstTextBaseline) {
-                Text(String(format: "%.0f%%", project.percentUsed))
-                    .font(.caption)
+                Text(String(format: "%.0f%%", self.project.percentUsed))
+                    .font(RunicFont.caption)
                     .foregroundStyle(self.statusTextColor)
                 Spacer()
-                if project.isOverBudget {
+                if self.project.isOverBudget {
                     Text("Over budget")
-                        .font(.caption)
+                        .font(RunicFont.caption)
                         .foregroundStyle(Color(red: 0.94, green: 0.36, blue: 0.36))
                         .fontWeight(.medium)
-                } else if project.isNearLimit {
+                } else if self.project.isNearLimit {
                     Text("Near limit")
-                        .font(.caption)
+                        .font(RunicFont.caption)
                         .foregroundStyle(Color(red: 0.94, green: 0.74, blue: 0.26))
                         .fontWeight(.medium)
                 }
@@ -208,13 +208,13 @@ private struct ProjectBudgetRow: View {
     }
 
     private var budgetText: String {
-        "\(UsageFormatter.usdString(project.spent)) / \(UsageFormatter.usdString(project.budget.monthlyLimit))"
+        "\(UsageFormatter.usdString(self.project.spent)) / \(UsageFormatter.usdString(self.project.budget.monthlyLimit))"
     }
 
     private var statusTextColor: Color {
         if self.isHighlighted {
             return MenuHighlightStyle.selectionText
         }
-        return project.statusColor
+        return self.project.statusColor
     }
 }

package/Sources/Runic/Views/Menu/ProviderTabBarView.swift

@@ -33,11 +33,11 @@ struct ProviderTabBarView: View {
                                     .aspectRatio(contentMode: .fit)
                                     .frame(width: 18, height: 18)
                             } else if tab.provider == nil {
-                            Image(systemName: "square.grid.2x2")
+                                Image(systemName: "square.grid.2x2")
                                     .font(.system(size: 14, weight: .medium))
                             }
                             Text(tab.label)
-                                .font(.system(.caption, design: .rounded))
+                                .font(RunicFont.caption)
                                 .fontWeight(tab.isSelected ? .semibold : .regular)
                                 .lineLimit(1)
                         }
@@ -47,16 +47,14 @@ struct ProviderTabBarView: View {
                             Capsule(style: .continuous)
                                 .fill(tab.isSelected
                                     ? tab.brandColor.opacity(RunicColors.Opacity.medium)
-                                    : Color(nsColor: .controlBackgroundColor).opacity(RunicColors.Opacity.subtle))
-                        )
+                                    : Color(nsColor: .controlBackgroundColor).opacity(RunicColors.Opacity.subtle)))
                         .overlay(
                             Capsule(style: .continuous)
                                 .stroke(
                                     tab.isSelected
                                         ? tab.brandColor.opacity(RunicColors.Opacity.strong)
                                         : Color(nsColor: .separatorColor).opacity(RunicColors.Opacity.light),
-                                    lineWidth: 0.5)
-                        )
+                                    lineWidth: 0.5))
                         .foregroundStyle(tab.isSelected ? tab.brandColor : .secondary)
                         .shadow(
                             color: tab.isSelected ? tab.brandColor.opacity(0.15) : .clear,