Refactor: HSL-based color system for all palettes — lighter/darker preserve hue, unified baseHue architecture

Sources/TUIkitExample/ContentView.swift

@@ -19,6 +19,7 @@ enum DemoPage: Int, CaseIterable {
     case layout
     case buttons
     case spinners
+    case blockTheme
 }
 
 // MARK: - Content View (Page Router)
@@ -63,7 +64,7 @@ struct ContentView: View {
                 .statusBarItems {
                     StatusBarItem(shortcut: Shortcut.arrowsUpDown, label: "nav")
                     StatusBarItem(shortcut: Shortcut.enter, label: "select", key: .enter)
-                    StatusBarItem(shortcut: Shortcut.range("1", "7"), label: "jump")
+                    StatusBarItem(shortcut: Shortcut.range("1", "8"), label: "jump")
                 }
         case .textStyles:
             TextStylesPage()
@@ -85,6 +86,9 @@ struct ContentView: View {
         case .spinners:
             SpinnersPage()
                 .statusBarItems(subPageItems(pageSetter: pageSetter))
+        case .blockTheme:
+            BlockThemePage()
+                .statusBarItems(subPageItems(pageSetter: pageSetter))
         }
     }
 

Sources/TUIkitExample/Pages/BlockThemePage.swift

@@ -0,0 +1,81 @@
+//
+//  BlockThemePage.swift
+//  TUIkitExample
+//
+//  Visual test page for Block appearance background colors.
+//  Shows all background roles side by side for color tuning.
+//
+
+import TUIkit
+
+/// Block theme color tuning page.
+///
+/// Displays all background color roles used in block appearance
+/// as labeled color swatches. This page is designed to be viewed
+/// exclusively in block appearance mode for visual comparison.
+struct BlockThemePage: View {
+    var body: some View {
+        VStack(spacing: 1) {
+            HeaderView(title: "Block Theme Colors")
+
+            Text("Switch to block appearance (press 'a') and violet theme (press 't').")
+                .foregroundColor(.palette.foregroundSecondary)
+
+            // Panel with Header, Body, and Footer — shows all 3 block background roles
+            DemoSection("Panel with Header + Body + Footer") {
+                Panel("Header — surfaceHeaderBackground", titleColor: .palette.accent) {
+                    Text("Body area — surfaceBackground").foregroundColor(.palette.foreground)
+                    Text("Secondary on body").foregroundColor(.palette.foregroundSecondary)
+                    Text("Tertiary on body").foregroundColor(.palette.foregroundTertiary)
+                } footer: {
+                    Text("Footer — surfaceHeaderBackground").foregroundColor(.palette.foreground)
+                }
+            }
+
+            // Side-by-side containers to compare
+            DemoSection("Panel vs Card vs Box") {
+                HStack(spacing: 2) {
+                    Panel("Panel", titleColor: .palette.accent) {
+                        Text("Foreground").foregroundColor(.palette.foreground)
+                        Text("Secondary").foregroundColor(.palette.foregroundSecondary)
+                        Text("Tertiary").foregroundColor(.palette.foregroundTertiary)
+                    }
+
+                    Card {
+                        Text("Foreground").foregroundColor(.palette.foreground)
+                        Text("Secondary").foregroundColor(.palette.foregroundSecondary)
+                        Text("Tertiary").foregroundColor(.palette.foregroundTertiary)
+                    }
+
+                    Box {
+                        Text("Foreground").foregroundColor(.palette.foreground)
+                        Text("Secondary").foregroundColor(.palette.foregroundSecondary)
+                        Text("Tertiary").foregroundColor(.palette.foregroundTertiary)
+                    }
+                }
+            }
+
+            // Buttons on app background
+            DemoSection("Buttons — elevatedBackground") {
+                HStack(spacing: 2) {
+                    Button("Default") {}
+                    Button("Primary", style: .primary) {}
+                    Button("Destructive", style: .destructive) {}
+                }
+            }
+
+            // Buttons inside a Panel (on surfaceBackground)
+            DemoSection("Buttons inside Panel") {
+                Panel("Panel with Buttons", titleColor: .palette.accent) {
+                    Text("Buttons on surfaceBackground:").foregroundColor(.palette.foregroundSecondary)
+                    HStack(spacing: 2) {
+                        Button("Default") {}
+                        Button("Primary", style: .primary) {}
+                    }
+                }
+            }
+
+            Spacer()
+        }
+    }
+}

Sources/TUIkitExample/Pages/MainMenuPage.swift

@@ -36,6 +36,7 @@ struct MainMenuPage: View {
                         MenuItem(label: "Layout System", shortcut: "5"),
                         MenuItem(label: "Buttons & Focus", shortcut: "6"),
                         MenuItem(label: "Spinners", shortcut: "7"),
+                        MenuItem(label: "Block Theme Colors", shortcut: "8"),
                     ],
                     selection: $menuSelection,
                     onSelect: { index in