add chrome token set for frame surfaces

New tokens: chromeBackground, chromeForeground, chromeBorder —
shared root for hat bar, sidebar, context panel, status bar,
spines, and drag handles. All resolve to bgSunken/textDim/border
in the palette by default. Themes can override individually to
diverge surfaces. Replaces direct sidebarBackground/statusBar
references in chrome contexts. Updated theme-ui skill.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

lib/kernel/src/theme/tokens.dart

@@ -17,6 +17,10 @@ class SurfaceTokens {
     required this.globalBorder,
     required this.globalFocus,
     required this.globalTextMuted,
+    // chrome (hat bar, sidebar, status bar, spines — frame surfaces)
+    required this.chromeBackground,
+    required this.chromeForeground,
+    required this.chromeBorder,
     // panel
     required this.panelBackground,
     required this.panelBorder,
@@ -94,6 +98,10 @@ class SurfaceTokens {
   final Color globalFocus;
   final Color globalTextMuted;
 
+  final Color chromeBackground;
+  final Color chromeForeground;
+  final Color chromeBorder;
+
   final Color panelBackground;
   final Color panelBorder;
   final Color panelActiveBorder;
@@ -179,6 +187,11 @@ abstract class TokenKeys {
   static const globalFocus = 'global.focus';
   static const globalTextMuted = 'global.textMuted';
 
+  // chrome
+  static const chromeBackground = 'chrome.background';
+  static const chromeForeground = 'chrome.foreground';
+  static const chromeBorder = 'chrome.border';
+
   // panel
   static const panelBackground = 'panel.background';
   static const panelBorder = 'panel.border';
@@ -266,6 +279,9 @@ abstract class TokenKeys {
     globalBorder,
     globalFocus,
     globalTextMuted,
+    chromeBackground,
+    chromeForeground,
+    chromeBorder,
     panelBackground,
     panelBorder,
     panelActiveBorder,