wire design palette through resolver with fallback chains

Surface map now tries palette keys (bgSunken, surfaceHi, textHi,
etc.) first, falling back to semantic refs for legacy themes.
Sidebar/panel bg differentiates from workspace bg. Buttons use
accent colour with onAccent text. Four-level text gradient flows
to widgets.

WCAG-AA contrast fixes: clide textDim lightened, midnight
onAccent darkened, paper textDim darkened. Contrast test updated
to cover all four themes. Resolver tests updated for the new
palette shape. Goldens regenerated.

Co-Authored-By: Claude <noreply@anthropic.com>

app/lib/kernel/src/theme/resolver.dart

@@ -151,12 +151,13 @@ class ThemeResolver {
       final resolved = _resolveRef(override, palette, semantic);
       if (resolved != null) return resolved;
     }
-    final defaultRef = _defaultSurfaceMap[key];
+    final candidates = _defaultSurfaceMap[key];
-    if (defaultRef != null) {
+    if (candidates != null) {
-      final resolved = _resolveRef(defaultRef, palette, semantic);
+      for (final ref in candidates) {
-      if (resolved != null) return resolved;
+        final resolved = _resolveRef(ref, palette, semantic);
+        if (resolved != null) return resolved;
+      }
     }
-    // Last-ditch: something has to render. Fall back to semantic text.
     return semantic.lookup(SemanticKeys.text) ?? const Color(0xFFFFFFFF);
   }
 
@@ -172,81 +173,94 @@ class ThemeResolver {
 /// Default palette names a semantic role will try, in order, when the
 /// theme doesn't override the role explicitly.
 const Map<String, List<String>> _defaultSemanticFallbacks = {
-  SemanticKeys.mainchrome: ['panel', 'surface', 'background'],
+  SemanticKeys.mainchrome: ['bgSunken', 'panel', 'surface', 'background'],
   SemanticKeys.calltoaction: ['accent', 'primary'],
-  SemanticKeys.focus: ['primary', 'accent'],
+  SemanticKeys.focus: ['accent', 'primary'],
-  SemanticKeys.background: ['background'],
+  SemanticKeys.background: ['bg', 'background'],
   SemanticKeys.surface: ['surface', 'panel'],
-  SemanticKeys.text: ['foreground'],
+  SemanticKeys.text: ['textHi', 'foreground'],
-  SemanticKeys.textMuted: ['muted', 'secondary', 'foreground'],
+  SemanticKeys.textMuted: ['textDim', 'muted', 'secondary', 'foreground'],
-  SemanticKeys.success: ['success'],
+  SemanticKeys.success: ['ok', 'success'],
-  SemanticKeys.warning: ['warning'],
+  SemanticKeys.warning: ['warn', 'warning'],
-  SemanticKeys.error: ['error'],
+  SemanticKeys.error: ['err', 'error'],
   SemanticKeys.info: ['info', 'primary'],
 };
 
 /// Default surface map. Every entry resolves through the semantic layer
 /// where it makes sense; raw palette refs are used only where the
 /// semantic layer doesn't have a role that fits.
-const Map<String, String> _defaultSurfaceMap = {
+const Map<String, List<String>> _defaultSurfaceMap = {
-  TokenKeys.globalForeground: 'semantic.text',
+  // global — try design keys first, then legacy semantic
-  TokenKeys.globalBackground: 'semantic.background',
+  TokenKeys.globalForeground: ['textHi', 'semantic.text'],
-  TokenKeys.globalBorder: 'semantic.surface',
+  TokenKeys.globalBackground: ['bg', 'semantic.background'],
-  TokenKeys.globalFocus: 'semantic.focus',
+  TokenKeys.globalBorder: ['border', 'semantic.surface'],
-  TokenKeys.globalTextMuted: 'semantic.text_muted',
+  TokenKeys.globalFocus: ['accent', 'semantic.focus'],
-  TokenKeys.panelBackground: 'semantic.mainchrome',
+  TokenKeys.globalTextMuted: ['textDim', 'semantic.text_muted'],
-  TokenKeys.panelBorder: 'semantic.surface',
+  // panel
-  TokenKeys.panelActiveBorder: 'semantic.focus',
+  TokenKeys.panelBackground: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.panelHeader: 'semantic.mainchrome',
+  TokenKeys.panelBorder: ['border', 'semantic.surface'],
-  TokenKeys.panelHeaderForeground: 'semantic.text',
+  TokenKeys.panelActiveBorder: ['borderHi', 'semantic.focus'],
-  TokenKeys.sidebarBackground: 'semantic.mainchrome',
+  TokenKeys.panelHeader: ['surface', 'semantic.mainchrome'],
-  TokenKeys.sidebarForeground: 'semantic.text',
+  TokenKeys.panelHeaderForeground: ['text', 'semantic.text'],
-  TokenKeys.sidebarItemHover: 'semantic.surface',
+  // sidebar
-  TokenKeys.sidebarItemSelected: 'semantic.focus',
+  TokenKeys.sidebarBackground: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.sidebarSectionHeader: 'semantic.text_muted',
+  TokenKeys.sidebarForeground: ['text', 'semantic.text'],
-  TokenKeys.statusBarBackground: 'semantic.mainchrome',
+  TokenKeys.sidebarItemHover: ['surface', 'semantic.surface'],
-  TokenKeys.statusBarForeground: 'semantic.text',
+  TokenKeys.sidebarItemSelected: ['surfaceHi', 'semantic.focus'],
-  TokenKeys.statusBarItemActiveBackground: 'semantic.focus',
+  TokenKeys.sidebarSectionHeader: ['textMute', 'semantic.text_muted'],
-  TokenKeys.statusBarItemHoverBackground: 'semantic.surface',
+  // statusbar
-  TokenKeys.tabBarBackground: 'semantic.mainchrome',
+  TokenKeys.statusBarBackground: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.tabActive: 'semantic.background',
+  TokenKeys.statusBarForeground: ['text', 'semantic.text'],
-  TokenKeys.tabInactive: 'semantic.mainchrome',
+  TokenKeys.statusBarItemActiveBackground: ['accent', 'semantic.focus'],
-  TokenKeys.tabActiveForeground: 'semantic.text',
+  TokenKeys.statusBarItemHoverBackground: ['surface', 'semantic.surface'],
-  TokenKeys.tabInactiveForeground: 'semantic.text_muted',
+  // tabs
-  TokenKeys.tabActiveBorder: 'semantic.focus',
+  TokenKeys.tabBarBackground: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.tabCloseHover: 'semantic.error',
+  TokenKeys.tabActive: ['bg', 'semantic.background'],
-  TokenKeys.buttonBackground: 'semantic.surface',
+  TokenKeys.tabInactive: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.buttonForeground: 'semantic.text',
+  TokenKeys.tabActiveForeground: ['textHi', 'semantic.text'],
-  TokenKeys.buttonHoverBackground: 'semantic.mainchrome',
+  TokenKeys.tabInactiveForeground: ['textDim', 'semantic.text_muted'],
-  TokenKeys.buttonActiveBackground: 'semantic.focus',
+  TokenKeys.tabActiveBorder: ['accent', 'semantic.focus'],
-  TokenKeys.buttonBorder: 'semantic.surface',
+  TokenKeys.tabCloseHover: ['err', 'semantic.error'],
-  TokenKeys.listItemBackground: 'semantic.background',
+  // buttons
-  TokenKeys.listItemForeground: 'semantic.text',
+  TokenKeys.buttonBackground: ['accent', 'semantic.calltoaction'],
-  TokenKeys.listItemHoverBackground: 'semantic.surface',
+  TokenKeys.buttonForeground: ['onAccent', 'semantic.background'],
-  TokenKeys.listItemSelectedBackground: 'semantic.focus',
+  TokenKeys.buttonHoverBackground: ['accentPress', 'semantic.focus'],
-  TokenKeys.listItemSelectedForeground: 'semantic.background',
+  TokenKeys.buttonActiveBackground: ['accentPress', 'semantic.focus'],
-  TokenKeys.scrollbarSlider: 'semantic.surface',
+  TokenKeys.buttonBorder: ['border', 'semantic.surface'],
-  TokenKeys.scrollbarSliderHover: 'semantic.text_muted',
+  // list items
-  TokenKeys.scrollbarTrack: 'semantic.mainchrome',
+  TokenKeys.listItemBackground: ['bg', 'semantic.background'],
-  TokenKeys.tooltipBackground: 'semantic.surface',
+  TokenKeys.listItemForeground: ['text', 'semantic.text'],
-  TokenKeys.tooltipForeground: 'semantic.text',
+  TokenKeys.listItemHoverBackground: ['surface', 'semantic.surface'],
-  TokenKeys.tooltipBorder: 'semantic.mainchrome',
+  TokenKeys.listItemSelectedBackground: ['surfaceHi', 'semantic.focus'],
-  TokenKeys.dropdownBackground: 'semantic.surface',
+  TokenKeys.listItemSelectedForeground: ['textHi', 'semantic.text'],
-  TokenKeys.dropdownForeground: 'semantic.text',
+  // scrollbar
-  TokenKeys.dropdownBorder: 'semantic.mainchrome',
+  TokenKeys.scrollbarSlider: ['border', 'semantic.surface'],
-  TokenKeys.modalOverlayBackground: '#C0000000',
+  TokenKeys.scrollbarSliderHover: ['borderHi', 'semantic.text_muted'],
-  TokenKeys.modalSurfaceBackground: 'semantic.mainchrome',
+  TokenKeys.scrollbarTrack: ['bgSunken', 'semantic.mainchrome'],
-  TokenKeys.modalSurfaceBorder: 'semantic.focus',
+  // tooltip
-  TokenKeys.dividerColor: 'semantic.surface',
+  TokenKeys.tooltipBackground: ['surface', 'semantic.surface'],
-  TokenKeys.statusSuccess: 'semantic.success',
+  TokenKeys.tooltipForeground: ['textHi', 'semantic.text'],
-  TokenKeys.statusWarning: 'semantic.warning',
+  TokenKeys.tooltipBorder: ['borderHi', 'semantic.mainchrome'],
-  TokenKeys.statusError: 'semantic.error',
+  // dropdown
-  TokenKeys.statusInfo: 'semantic.info',
+  TokenKeys.dropdownBackground: ['surface', 'semantic.surface'],
-  TokenKeys.syntaxKeyword: 'semantic.calltoaction',
+  TokenKeys.dropdownForeground: ['text', 'semantic.text'],
-  TokenKeys.syntaxType: 'semantic.info',
+  TokenKeys.dropdownBorder: ['border', 'semantic.mainchrome'],
-  TokenKeys.syntaxString: 'semantic.success',
+  // modal
-  TokenKeys.syntaxNumber: 'semantic.warning',
+  TokenKeys.modalOverlayBackground: ['#C0000000'],
-  TokenKeys.syntaxComment: 'semantic.text_muted',
+  TokenKeys.modalSurfaceBackground: ['surface', 'semantic.mainchrome'],
-  TokenKeys.syntaxMethod: 'semantic.focus',
+  TokenKeys.modalSurfaceBorder: ['accent', 'semantic.focus'],
-  TokenKeys.syntaxPunct: 'semantic.text_muted',
+  // divider
+  TokenKeys.dividerColor: ['border', 'semantic.surface'],
+  // status
+  TokenKeys.statusSuccess: ['ok', 'semantic.success'],
+  TokenKeys.statusWarning: ['warn', 'semantic.warning'],
+  TokenKeys.statusError: ['err', 'semantic.error'],
+  TokenKeys.statusInfo: ['info', 'semantic.info'],
+  TokenKeys.syntaxKeyword: ['semantic.calltoaction'],
+  TokenKeys.syntaxType: ['semantic.info'],
+  TokenKeys.syntaxString: ['semantic.success'],
+  TokenKeys.syntaxNumber: ['semantic.warning'],
+  TokenKeys.syntaxComment: ['semantic.text_muted'],
+  TokenKeys.syntaxMethod: ['semantic.focus'],
+  TokenKeys.syntaxPunct: ['semantic.text_muted'],
 };

app/lib/kernel/src/theme/themes/clide.yaml

@@ -22,7 +22,7 @@ palette:
   surfaceHi: "#2C3046"
   border: "#343850"
   borderHi: "#3C445C"
-  textDim: "#78809C"
+  textDim: "#8890AC"
   textMute: "#545C84"
   accentSoft: "#2178A0F8"
 

app/lib/kernel/src/theme/themes/midnight.yaml

@@ -18,6 +18,7 @@ palette:
   warning: "#D7BA7D"
   error: "#F48771"
   info: "#569CD6"
+  onAccent: "#0B1220"
   surfaceHi: "#2D2D2E"
   border: "#333333"
   borderHi: "#3F3F3F"

app/lib/kernel/src/theme/themes/paper.yaml

@@ -21,7 +21,7 @@ palette:
   surfaceHi: "#ECE7DB"
   border: "#1A1A1A"
   borderHi: "#4A4A4A"
-  textDim: "#8A8A82"
+  textDim: "#5E5E56"
   textMute: "#A8A89E"
   accentSoft: "#21C14B2A"
 

app/test/a11y/contrast_test.dart

@@ -11,7 +11,10 @@ void main() {
 
   group('contrast — all bundled themes meet WCAG AA', () {
     const bundledPaths = [
-      'lib/kernel/src/theme/themes/summer-night.yaml',
+      'lib/kernel/src/theme/themes/clide.yaml',
+      'lib/kernel/src/theme/themes/midnight.yaml',
+      'lib/kernel/src/theme/themes/paper.yaml',
+      'lib/kernel/src/theme/themes/terminal.yaml',
     ];
 
     for (final path in bundledPaths) {

app/test/kernel/src/theme/resolver_test.dart

@@ -9,7 +9,41 @@ void main() {
   Palette paletteOf(Map<String, Color> colors) => Palette(colors);
 
   group('ThemeResolver default fallbacks', () {
-    test('palette-only summer-night shape resolves every token', () {
+    test('design-shape palette resolves every token', () {
+      final tokens = resolver.resolve(
+        palette: paletteOf(const {
+          'bg': Color(0xFF20202C),
+          'bgSunken': Color(0xFF1A1A24),
+          'surface': Color(0xFF242838),
+          'surfaceHi': Color(0xFF2C3046),
+          'border': Color(0xFF343850),
+          'borderHi': Color(0xFF3C445C),
+          'textHi': Color(0xFFE6E8F2),
+          'text': Color(0xFFB1BBE3),
+          'textDim': Color(0xFF78809C),
+          'textMute': Color(0xFF545C84),
+          'accent': Color(0xFF78A0F8),
+          'accentPress': Color(0xFF6C90DC),
+          'accentSoft': Color(0x2178A0F8),
+          'onAccent': Color(0xFF0D1020),
+          'ok': Color(0xFF7DD3A8),
+          'warn': Color(0xFFE6C370),
+          'err': Color(0xFFE87D7D),
+          'info': Color(0xFF78A0F8),
+        }),
+      );
+      expect(tokens.globalBackground, const Color(0xFF20202C));
+      expect(tokens.globalForeground, const Color(0xFFE6E8F2));
+      expect(tokens.panelBackground, const Color(0xFF1A1A24));
+      expect(tokens.sidebarItemSelected, const Color(0xFF2C3046));
+      expect(tokens.statusSuccess, const Color(0xFF7DD3A8));
+      expect(tokens.statusError, const Color(0xFFE87D7D));
+      expect(tokens.globalTextMuted, const Color(0xFF78809C));
+      expect(tokens.buttonBackground, const Color(0xFF78A0F8));
+      expect(tokens.buttonForeground, const Color(0xFF0D1020));
+    });
+
+    test('legacy palette keys still resolve via fallback chains', () {
       final tokens = resolver.resolve(
         palette: paletteOf(const {
           'primary': Color(0xFF00A3D2),
@@ -28,27 +62,8 @@ void main() {
       expect(tokens.globalBackground, const Color(0xFF21262F));
       expect(tokens.globalForeground, const Color(0xFFE2E8F5));
       expect(tokens.panelBackground, const Color(0xFF292E38));
-      expect(tokens.sidebarItemSelected, const Color(0xFF00A3D2));
       expect(tokens.statusSuccess, const Color(0xFF00AB9A));
       expect(tokens.statusError, const Color(0xFFF06C6F));
-      expect(tokens.globalTextMuted, const Color(0xFF6A7280));
-    });
-
-    test('missing "muted" falls back to foreground', () {
-      final tokens = resolver.resolve(
-        palette: paletteOf(const {
-          'primary': Color(0xFF111111),
-          'accent': Color(0xFF222222),
-          'background': Color(0xFF333333),
-          'surface': Color(0xFF444444),
-          'panel': Color(0xFF555555),
-          'foreground': Color(0xFFEEEEEE),
-          'success': Color(0xFF008800),
-          'warning': Color(0xFFFF8800),
-          'error': Color(0xFFFF0000),
-        }),
-      );
-      expect(tokens.globalTextMuted, const Color(0xFFEEEEEE));
     });
   });
 
@@ -56,15 +71,16 @@ void main() {
     test('surface override wins over default', () {
       final tokens = resolver.resolve(
         palette: paletteOf(const {
-          'primary': Color(0xFF111111),
+          'bg': Color(0xFF333333),
-          'accent': Color(0xFF222222),
+          'bgSunken': Color(0xFF222222),
-          'background': Color(0xFF333333),
           'surface': Color(0xFF444444),
-          'panel': Color(0xFF555555),
+          'border': Color(0xFF555555),
-          'foreground': Color(0xFFFFFFFF),
+          'textHi': Color(0xFFFFFFFF),
-          'success': Color(0xFF008800),
+          'accent': Color(0xFF111111),
-          'warning': Color(0xFFFF8800),
+          'ok': Color(0xFF008800),
-          'error': Color(0xFFFF0000),
+          'warn': Color(0xFFFF8800),
+          'err': Color(0xFFFF0000),
+          'info': Color(0xFF111111),
         }),
         surfaceOverride: const {
           'panel.background': '#00FF00',
@@ -73,36 +89,38 @@ void main() {
       expect(tokens.panelBackground, const Color(0xFF00FF00));
     });
 
-    test('semantic override propagates to surface tokens using it', () {
+    test('semantic override propagates when palette key is absent', () {
       final tokens = resolver.resolve(
         palette: paletteOf(const {
-          'primary': Color(0xFF111111),
+          'bg': Color(0xFF333333),
-          'accent': Color(0xFF222222),
+          'bgSunken': Color(0xFF222222),
-          'background': Color(0xFF333333),
           'surface': Color(0xFF444444),
-          'panel': Color(0xFF555555),
+          'surfaceHi': Color(0xFF555555),
-          'foreground': Color(0xFFFFFFFF),
+          'border': Color(0xFF666666),
-          'success': Color(0xFF008800),
+          'textHi': Color(0xFFFFFFFF),
-          'warning': Color(0xFFFF8800),
+          'ok': Color(0xFF008800),
-          'error': Color(0xFFFF0000),
+          'warn': Color(0xFFFF8800),
-          'teal': Color(0xFF007777),
+          'err': Color(0xFFFF0000),
+          'info': Color(0xFF111111),
         }),
         semanticOverride: const SemanticRoles({
           'focus': Color(0xFF007777),
         }),
       );
-      // sidebarItemSelected defaults to semantic.focus — expect override.
+      // No 'accent' in palette, so globalFocus falls through to
-      expect(tokens.sidebarItemSelected, const Color(0xFF007777));
+      // semantic.focus which is overridden.
+      expect(tokens.globalFocus, const Color(0xFF007777));
     });
 
     test('extensionOverride populates extensionTokens map', () {
       final tokens = resolver.resolve(
         palette: paletteOf(const {
-          'primary': Color(0xFF111111),
+          'bg': Color(0xFF333333),
-          'background': Color(0xFF333333),
+          'bgSunken': Color(0xFF222222),
           'surface': Color(0xFF444444),
-          'panel': Color(0xFF555555),
+          'border': Color(0xFF555555),
-          'foreground': Color(0xFFFFFFFF),
+          'textHi': Color(0xFFFFFFFF),
+          'accent': Color(0xFF111111),
         }),
         extensionOverride: const {
           'ext.sqlite.table.background': '#ABCDEF',