feat(theme): SqlEditorChrome from editor theme tokens (#60)

docs/theme-import.md

@@ -11,6 +11,10 @@ Syntax highlighting (`tokenColors`) is tracked separately (issue #46).
 |-------------|---------------|
 | `editor.background` | `workbench.editorBackground`, `editor.background` |
 | `editor.foreground` | `editor.foreground`, `ColorScheme.foreground` |
+| `editor.selectionBackground` | `editor.selection` |
+| `editorLineNumber.foreground` | `editor.lineNumber` |
+| `editorBracketMatch.background` | `editor.bracketMatch` |
+| `editorWidget.border` | `editor.widgetBorder` (chrome border) |
 | `sideBar.background` | `workbench.sidebarBackground` |
 | `sideBar.foreground` | `workbench.mutedForeground` |
 | `activityBar.background` | `workbench.canvas` |

lib/core/theme/parser/querya_theme_from_vscode.dart

@@ -185,6 +185,14 @@ QueryaEditorTheme _applyEditorField(
       return e.copyWith(background: color);
     case VsCodeEditorField.foreground:
       return e.copyWith(foreground: color);
+    case VsCodeEditorField.selection:
+      return e.copyWith(selection: color);
+    case VsCodeEditorField.lineNumber:
+      return e.copyWith(lineNumber: color);
+    case VsCodeEditorField.bracketMatch:
+      return e.copyWith(bracketMatch: color);
+    case VsCodeEditorField.widgetBorder:
+      return e.copyWith(widgetBorder: color);
   }
 }
 

lib/core/theme/parser/vscode_color_map.dart

@@ -18,6 +18,10 @@ enum VsCodeWorkbenchField {
 enum VsCodeEditorField {
   background,
   foreground,
+  selection,
+  lineNumber,
+  bracketMatch,
+  widgetBorder,
 }
 
 /// Optional direct [ColorScheme] fields (shadcn) beyond workbench derivation.
@@ -57,6 +61,18 @@ const Map<String, VsCodeColorTarget> kVsCodeColorMap = {
     VsCodeWorkbenchField.editorBackground,
   ),
   'editor.foreground': VsCodeColorTarget.editor(VsCodeEditorField.foreground),
+  'editor.selectionBackground': VsCodeColorTarget.editor(
+    VsCodeEditorField.selection,
+  ),
+  'editorLineNumber.foreground': VsCodeColorTarget.editor(
+    VsCodeEditorField.lineNumber,
+  ),
+  'editorBracketMatch.background': VsCodeColorTarget.editor(
+    VsCodeEditorField.bracketMatch,
+  ),
+  'editorWidget.border': VsCodeColorTarget.editor(
+    VsCodeEditorField.widgetBorder,
+  ),
   'sideBar.background': VsCodeColorTarget.workbench(
     VsCodeWorkbenchField.sidebarBackground,
   ),
@@ -92,6 +108,10 @@ const Map<String, VsCodeColorTarget> kVsCodeColorMap = {
 const List<String> kSupportedVsCodeColorKeys = [
   'editor.background',
   'editor.foreground',
+  'editor.selectionBackground',
+  'editorLineNumber.foreground',
+  'editorBracketMatch.background',
+  'editorWidget.border',
   'sideBar.background',
   'sideBar.foreground',
   'activityBar.background',

lib/core/theme/querya_editor_theme.dart

@@ -10,13 +10,16 @@ class QueryaEditorTheme {
     required this.foreground,
     required this.lineHighlight,
     required this.selection,
+    required this.lineNumber,
+    required this.bracketMatch,
     required this.comment,
     required this.keyword,
     required this.string,
     required this.number,
     required this.operator,
     required this.function,
     required this.type,
+    this.widgetBorder,
     this.fontFamily = QueryaTypography.mono,
     this.fontSize = 13,
   });
@@ -25,6 +28,11 @@ class QueryaEditorTheme {
   final Color foreground;
   final Color lineHighlight;
   final Color selection;
+  final Color lineNumber;
+  final Color bracketMatch;
+
+  /// Chrome border around editor widgets; falls back to workbench [borderSubtle].
+  final Color? widgetBorder;
   final Color comment;
   final Color keyword;
   final Color string;
@@ -41,6 +49,8 @@ class QueryaEditorTheme {
     foreground: Color(0xFFF8FAFC),
     lineHighlight: Color(0xFF18181B),
     selection: Color(0xFF264F78),
+    lineNumber: Color(0xFF858585),
+    bracketMatch: Color(0x33006400),
     comment: Color(0xFF6A9955),
     keyword: Color(0xFF569CD6),
     string: Color(0xFFCE9178),
@@ -55,6 +65,8 @@ class QueryaEditorTheme {
     foreground: Color(0xFF1E293B),
     lineHighlight: Color(0xFFF1F5F9),
     selection: Color(0xFFADD6FF),
+    lineNumber: Color(0xFF237893),
+    bracketMatch: Color(0x33006400),
     comment: Color(0xFF008000),
     keyword: Color(0xFF0000FF),
     string: Color(0xFFA31515),
@@ -69,6 +81,10 @@ class QueryaEditorTheme {
     Color? foreground,
     Color? lineHighlight,
     Color? selection,
+    Color? lineNumber,
+    Color? bracketMatch,
+    Color? widgetBorder,
+    bool clearWidgetBorder = false,
     Color? comment,
     Color? keyword,
     Color? string,
@@ -84,6 +100,10 @@ class QueryaEditorTheme {
       foreground: foreground ?? this.foreground,
       lineHighlight: lineHighlight ?? this.lineHighlight,
       selection: selection ?? this.selection,
+      lineNumber: lineNumber ?? this.lineNumber,
+      bracketMatch: bracketMatch ?? this.bracketMatch,
+      widgetBorder:
+          clearWidgetBorder ? null : (widgetBorder ?? this.widgetBorder),
       comment: comment ?? this.comment,
       keyword: keyword ?? this.keyword,
       string: string ?? this.string,
@@ -107,6 +127,9 @@ class QueryaEditorTheme {
       foreground: c(a.foreground, b.foreground),
       lineHighlight: c(a.lineHighlight, b.lineHighlight),
       selection: c(a.selection, b.selection),
+      lineNumber: c(a.lineNumber, b.lineNumber),
+      bracketMatch: c(a.bracketMatch, b.bracketMatch),
+      widgetBorder: t < 0.5 ? a.widgetBorder : b.widgetBorder,
       comment: c(a.comment, b.comment),
       keyword: c(a.keyword, b.keyword),
       string: c(a.string, b.string),
@@ -127,6 +150,9 @@ class QueryaEditorTheme {
           foreground == other.foreground &&
           lineHighlight == other.lineHighlight &&
           selection == other.selection &&
+          lineNumber == other.lineNumber &&
+          bracketMatch == other.bracketMatch &&
+          widgetBorder == other.widgetBorder &&
           comment == other.comment &&
           keyword == other.keyword &&
           string == other.string &&
@@ -143,6 +169,9 @@ class QueryaEditorTheme {
         foreground,
         lineHighlight,
         selection,
+        lineNumber,
+        bracketMatch,
+        widgetBorder,
         comment,
         keyword,
         string,

lib/features/main_screen/query_editor_tab.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart' as material
     show EdgeInsets, Padding, TextEditingController, TextStyle;
-import 'package:querya_desktop/core/theme/querya_typography.dart';
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
 import 'package:querya_desktop/features/main_screen/sql_editor_chrome.dart';
 import 'package:querya_desktop/shared/widgets/widgets.dart';
 
@@ -78,7 +78,7 @@ class _QueryEditorBodyState extends State<_QueryEditorBody> {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
+    final editor = context.editorTheme;
     return material.Padding(
       padding: const material.EdgeInsets.all(12),
       child: SqlEditorChrome(
@@ -87,9 +87,9 @@ class _QueryEditorBodyState extends State<_QueryEditorBody> {
           maxLines: null,
           expands: true,
           style: material.TextStyle(
-            fontFamily: QueryaTypography.mono,
+            fontFamily: editor.fontFamily,
             fontSize: widget.fontSize,
-            color: theme.colorScheme.foreground,
+            color: editor.foreground,
           ),
           placeholder: const Text('-- Enter SQL here…\nSELECT 1;'),
         ),

lib/features/main_screen/sql_editor_chrome.dart

@@ -1,38 +1,59 @@
 import 'package:flutter/material.dart' as material;
+import 'package:querya_desktop/core/theme/querya_editor_theme.dart';
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
+import 'package:querya_desktop/core/theme/querya_workbench_theme.dart';
 import 'package:shadcn_flutter/shadcn_flutter.dart';
 
-/// Outer chrome for SQL editors: subtle border, surface fill, soft cyan glow.
+/// Outer chrome for SQL editors: border, surface, brand accent glow.
 class SqlEditorChrome extends StatelessWidget {
   const SqlEditorChrome({super.key, required this.child});
 
   final Widget child;
 
-  static material.BoxDecoration inlineFieldDecoration(ThemeData theme) {
-    final cs = theme.colorScheme;
+  static const double _outerRadius = 14;
+  static const double _innerRadius = 10;
+
+  /// Decoration for compact SQL fields (dialogs) from theme tokens.
+  static material.BoxDecoration inlineFieldDecoration(
+    QueryaEditorTheme editor,
+    QueryaWorkbenchTheme workbench,
+  ) {
+    final border = editor.widgetBorder ?? workbench.borderSubtle;
     return material.BoxDecoration(
-      color: cs.card,
-      borderRadius: material.BorderRadius.circular(10),
+      color: editor.background,
+      borderRadius: material.BorderRadius.circular(_innerRadius),
       border: material.Border.all(
-        color: cs.border.withValues(alpha: 0.45),
+        color: border.withValues(alpha: 0.45),
       ),
       boxShadow: [
         material.BoxShadow(
-          color: cs.primary.withValues(alpha: 0.07),
+          color: workbench.accent.withValues(alpha: 0.07),
           blurRadius: 18,
           offset: const material.Offset(0, 6),
         ),
       ],
     );
   }
 
+  static material.BoxDecoration inlineFieldDecorationFromContext(
+    BuildContext context,
+  ) {
+    return inlineFieldDecoration(
+      context.editorTheme,
+      context.workbench,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final cs = theme.colorScheme;
-    final glow = cs.primary.withValues(alpha: 0.1);
+    final editor = context.editorTheme;
+    final workbench = context.workbench;
+    final border = editor.widgetBorder ?? workbench.borderSubtle;
+    final glow = workbench.accent.withValues(alpha: 0.1);
+
     return material.Container(
       decoration: material.BoxDecoration(
-        borderRadius: material.BorderRadius.circular(14),
+        borderRadius: material.BorderRadius.circular(_outerRadius),
         boxShadow: [
           material.BoxShadow(
             color: glow,
@@ -44,10 +65,10 @@ class SqlEditorChrome extends StatelessWidget {
       ),
       child: material.Container(
         decoration: material.BoxDecoration(
-          color: cs.card,
-          borderRadius: material.BorderRadius.circular(14),
+          color: editor.background,
+          borderRadius: material.BorderRadius.circular(_outerRadius),
           border: material.Border.all(
-            color: cs.border.withValues(alpha: 0.5),
+            color: border.withValues(alpha: 0.5),
           ),
         ),
         clipBehavior: material.Clip.antiAlias,

lib/features/mysql/mysql_sql_editor_dialog.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart' as material;
 import 'package:querya_desktop/core/layout/window_layout.dart';
-import 'package:querya_desktop/core/theme/querya_typography.dart';
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
 import 'package:querya_desktop/features/main_screen/sql_editor_chrome.dart';
 import 'package:querya_desktop/features/mysql/mysql_table_utils.dart';
 import 'package:querya_desktop/shared/widgets/widgets.dart';
@@ -113,18 +113,18 @@ class _MysqlSqlEditorDialogState extends material.State<_MysqlSqlEditorDialog> {
                 child: material.SizedBox(
                   height: 280,
                   child: material.Container(
-                    decoration: SqlEditorChrome.inlineFieldDecoration(
-                      Theme.of(context),
+                    decoration: SqlEditorChrome.inlineFieldDecorationFromContext(
+                      context,
                     ),
                     child: material.TextField(
                       controller: _controller,
                       maxLines: null,
                       expands: true,
                       textAlignVertical: material.TextAlignVertical.top,
                       style: material.TextStyle(
-                        fontFamily: QueryaTypography.mono,
+                        fontFamily: context.editorTheme.fontFamily,
                         fontSize: 12,
-                        color: theme.foreground,
+                        color: context.editorTheme.foreground,
                       ),
                       decoration: const material.InputDecoration(
                         border: material.InputBorder.none,

lib/features/mysql/mysql_sql_workspace.dart

@@ -5,6 +5,7 @@ import 'package:flutter/services.dart' show LogicalKeyboardKey;
 import 'package:querya_desktop/core/database/mysql_service.dart';
 import 'package:querya_desktop/core/storage/app_settings.dart';
 import 'package:querya_desktop/core/storage/local_db.dart';
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
 import 'package:querya_desktop/features/settings/preferences_dialog.dart';
 import 'package:querya_desktop/features/settings/sql_statement_timeout_dropdown.dart';
 import 'package:querya_desktop/features/main_screen/query_editor_tab.dart';
@@ -345,6 +346,7 @@ class _MysqlSqlToolbar extends material.StatelessWidget {
   @override
   material.Widget build(material.BuildContext context) {
     final theme = Theme.of(context);
+    final accent = context.workbench.accent;
     return material.Container(
       padding: const material.EdgeInsets.symmetric(horizontal: 12, vertical: 8),
       decoration: material.BoxDecoration(
@@ -361,9 +363,10 @@ class _MysqlSqlToolbar extends material.StatelessWidget {
               OutlineButton(
                 size: ButtonSize.small,
                 onPressed: onOpenHistory,
-                leading: const material.Icon(
+                leading: material.Icon(
                   material.Icons.history_rounded,
                   size: 16,
+                  color: accent,
                 ),
                 child: const Text('History'),
               ),
@@ -376,12 +379,13 @@ class _MysqlSqlToolbar extends material.StatelessWidget {
                         height: 16,
                         child: material.CircularProgressIndicator(
                           strokeWidth: 2,
-                          color: theme.colorScheme.primary,
+                          color: accent,
                         ),
                       )
-                    : const material.Icon(
+                    : material.Icon(
                         material.Icons.play_arrow_rounded,
                         size: 18,
+                        color: accent,
                       ),
                 child: const Text('Execute (F5)'),
               ),
@@ -406,9 +410,10 @@ class _MysqlSqlToolbar extends material.StatelessWidget {
                   const Gap(4),
                   IconButton.ghost(
                     onPressed: running ? null : onOpenPreferences,
-                    icon: const material.Icon(
+                    icon: material.Icon(
                       material.Icons.settings_rounded,
                       size: 20,
+                      color: accent,
                     ),
                   ),
                 ],

lib/features/postgresql/postgres_sql_editor_dialog.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart' as material;
 import 'package:querya_desktop/core/layout/window_layout.dart';
-import 'package:querya_desktop/core/theme/querya_typography.dart';
+import 'package:querya_desktop/core/theme/querya_theme_scope.dart';
 import 'package:querya_desktop/features/main_screen/sql_editor_chrome.dart';
 import 'package:querya_desktop/shared/widgets/widgets.dart';
 
@@ -140,18 +140,18 @@ class _PostgresSqlEditorDialogState extends material.State<_PostgresSqlEditorDia
                 child: material.SizedBox(
                   height: 280,
                   child: material.Container(
-                    decoration: SqlEditorChrome.inlineFieldDecoration(
-                      Theme.of(context),
+                    decoration: SqlEditorChrome.inlineFieldDecorationFromContext(
+                      context,
                     ),
                     child: material.TextField(
                       controller: _controller,
                       maxLines: null,
                       expands: true,
                       textAlignVertical: material.TextAlignVertical.top,
                       style: material.TextStyle(
-                        fontFamily: QueryaTypography.mono,
+                        fontFamily: context.editorTheme.fontFamily,
                         fontSize: 12,
-                        color: theme.foreground,
+                        color: context.editorTheme.foreground,
                       ),
                       decoration: const material.InputDecoration(
                         border: material.InputBorder.none,