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/resolver.dart

@@ -50,6 +50,9 @@ class ThemeResolver {
       globalBorder: surface[TokenKeys.globalBorder]!,
       globalFocus: surface[TokenKeys.globalFocus]!,
       globalTextMuted: surface[TokenKeys.globalTextMuted]!,
+      chromeBackground: surface[TokenKeys.chromeBackground]!,
+      chromeForeground: surface[TokenKeys.chromeForeground]!,
+      chromeBorder: surface[TokenKeys.chromeBorder]!,
       panelBackground: surface[TokenKeys.panelBackground]!,
       panelBorder: surface[TokenKeys.panelBorder]!,
       panelActiveBorder: surface[TokenKeys.panelActiveBorder]!,
@@ -196,6 +199,10 @@ const Map<String, List<String>> _defaultSurfaceMap = {
   TokenKeys.globalBorder: ['border', 'semantic.surface'],
   TokenKeys.globalFocus: ['accent', 'semantic.focus'],
   TokenKeys.globalTextMuted: ['textDim', 'semantic.text_muted'],
+  // chrome — frame surfaces (hat bar, sidebar, status bar, spines)
+  TokenKeys.chromeBackground: ['bgSunken', 'semantic.mainchrome'],
+  TokenKeys.chromeForeground: ['textDim', 'semantic.text_muted'],
+  TokenKeys.chromeBorder: ['border', 'semantic.surface'],
   // panel
   TokenKeys.panelBackground: ['bgSunken', 'semantic.mainchrome'],
   TokenKeys.panelBorder: ['border', 'semantic.surface'],

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,