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>
This commit is contained in:
2026-04-23 08:52:44 +02:00
co-authored by Claude Opus 4.6
parent 1494d6a414
commit 86ad659121
6 changed files with 43 additions and 19 deletions
+9 -9
View File
@@ -177,7 +177,7 @@ class RootLayout extends StatelessWidget {
if (statusVisible)
Container(
height: statusHeight,
decoration: BoxDecoration(border: Border(top: BorderSide(color: ClideTheme.of(ctx).surface.dividerColor))),
decoration: BoxDecoration(border: Border(top: BorderSide(color: ClideTheme.of(ctx).surface.chromeBorder))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
@@ -222,8 +222,8 @@ class _HatBar extends StatelessWidget {
child: Container(
height: hatHeight,
decoration: BoxDecoration(
color: tokens.sidebarBackground,
border: Border(bottom: BorderSide(color: tokens.dividerColor, width: 1)),
color: tokens.chromeBackground,
border: Border(bottom: BorderSide(color: tokens.chromeBorder, width: 1)),
),
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
@@ -238,7 +238,7 @@ class _HatBar extends StatelessWidget {
return ClideText(
name != null ? 'clide > $name' : 'clide',
fontSize: 12,
color: tokens.globalTextMuted,
color: tokens.chromeForeground,
fontFamily: clideMonoFamily,
);
},
@@ -343,7 +343,7 @@ class _WinBtnState extends State<_WinBtn> {
width: 36, height: hatHeight,
color: _hover ? hoverBg : null,
alignment: Alignment.center,
child: ClideIcon(widget.icon, size: 14, color: _hover && widget.isClose ? const Color(0xFFFFFFFF) : widget.tokens.globalTextMuted),
child: ClideIcon(widget.icon, size: 14, color: _hover && widget.isClose ? const Color(0xFFFFFFFF) : widget.tokens.chromeForeground),
),
),
);
@@ -442,7 +442,7 @@ class _SidebarSlot extends StatelessWidget {
Widget build(BuildContext context) {
final tokens = ClideTheme.of(context).surface;
return Container(
color: tokens.sidebarBackground,
color: tokens.chromeBackground,
alignment: Alignment.topLeft,
padding: const EdgeInsets.fromLTRB(2, 2, 0, 0),
child: active.build(context),
@@ -579,10 +579,10 @@ class _BottomRail extends StatelessWidget {
listenable: kernel.panels,
builder: (ctx, _) {
final tabs = kernel.panels.tabsFor(slot);
if (tabs.isEmpty) return Container(color: tokens.statusBarBackground);
if (tabs.isEmpty) return Container(color: tokens.chromeBackground);
final activeId = kernel.panels.activeTabIn(slot) ?? tabs.first.id;
return Container(
color: tokens.statusBarBackground,
color: tokens.chromeBackground,
child: ClideIconRail(
items: [
for (final t in tabs)
@@ -636,7 +636,7 @@ class StatusbarHost extends StatelessWidget {
final left = items.where((i) => i.priority < 100).toList();
final right = items.where((i) => i.priority >= 100).toList();
return Container(
color: tokens.statusBarBackground,
color: tokens.chromeBackground,
padding: const EdgeInsets.symmetric(horizontal: 8),
alignment: Alignment.center,
child: Row(