Files
clide/lib/kernel/src/theme/tokens.dart
T
jpmschweitzerandClaude 6d4a642773
test / unit + widget + golden + a11y (push) Failing after 28s
test / integration_test (xvfb) (push) Has been skipped
test / bundle smoke (xvfb 5s) (push) Has been skipped
test / daemon subprocess + web WASM smoke (push) Has been skipped
test / dart doc (lib API) (push) Failing after 1m2s
tokenise window-control colours + palette shadow
Hard-coded Windows close-button red (#E81123), white close glyph, and
the palette's 0x40000000 drop shadow were the three colour sites the
UX consultant flagged as not adapting per theme. Now they're
`windowControl.closeHoverBackground` / `closeHoverForeground` /
`shadow.ambient`. Paper themes override the shadow to a softer ink so
it doesn't read as a CRT halo on cream.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-05-18 09:00:52 +02:00

368 lines
11 KiB
Dart

import 'dart:ui';
import 'package:flutter/foundation.dart';
/// Resolved surface tokens — the only thing widgets consume.
///
/// The token surface grows as features need more of it. Every token
/// declared here must have a default resolution in
/// `_defaultSurfaceMap` (resolver.dart) so legacy palette-only themes
/// produce a complete SurfaceTokens without declaring the full surface.
@immutable
class SurfaceTokens {
const SurfaceTokens({
// global
required this.globalForeground,
required this.globalBackground,
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,
required this.panelActiveBorder,
required this.panelHeader,
required this.panelHeaderForeground,
// sidebar
required this.sidebarBackground,
required this.sidebarForeground,
required this.sidebarItemHover,
required this.sidebarItemSelected,
required this.sidebarSectionHeader,
// statusbar
required this.statusBarBackground,
required this.statusBarForeground,
required this.statusBarItemActiveBackground,
required this.statusBarItemHoverBackground,
// tabs
required this.tabBarBackground,
required this.tabActive,
required this.tabInactive,
required this.tabActiveForeground,
required this.tabInactiveForeground,
required this.tabActiveBorder,
required this.tabCloseHover,
// buttons
required this.buttonBackground,
required this.buttonForeground,
required this.buttonHoverBackground,
required this.buttonActiveBackground,
required this.buttonBorder,
// list items
required this.listItemBackground,
required this.listItemForeground,
required this.listItemHoverBackground,
required this.listItemSelectedBackground,
required this.listItemSelectedForeground,
// scrollbar
required this.scrollbarSlider,
required this.scrollbarSliderHover,
required this.scrollbarTrack,
// tooltip
required this.tooltipBackground,
required this.tooltipForeground,
required this.tooltipBorder,
// dropdown
required this.dropdownBackground,
required this.dropdownForeground,
required this.dropdownBorder,
// modal
required this.modalOverlayBackground,
required this.modalSurfaceBackground,
required this.modalSurfaceBorder,
// window controls
required this.windowControlCloseHoverBackground,
required this.windowControlCloseHoverForeground,
// shadow
required this.shadowAmbient,
// divider
required this.dividerColor,
// status
required this.statusSuccess,
required this.statusWarning,
required this.statusError,
required this.statusInfo,
// syntax
required this.syntaxKeyword,
required this.syntaxType,
required this.syntaxString,
required this.syntaxNumber,
required this.syntaxComment,
required this.syntaxMethod,
required this.syntaxPunct,
required this.extensionTokens,
});
final Color globalForeground;
final Color globalBackground;
final Color globalBorder;
final Color globalFocus;
final Color globalTextMuted;
final Color chromeBackground;
final Color chromeForeground;
final Color chromeBorder;
final Color panelBackground;
final Color panelBorder;
final Color panelActiveBorder;
final Color panelHeader;
final Color panelHeaderForeground;
final Color sidebarBackground;
final Color sidebarForeground;
final Color sidebarItemHover;
final Color sidebarItemSelected;
final Color sidebarSectionHeader;
final Color statusBarBackground;
final Color statusBarForeground;
final Color statusBarItemActiveBackground;
final Color statusBarItemHoverBackground;
final Color tabBarBackground;
final Color tabActive;
final Color tabInactive;
final Color tabActiveForeground;
final Color tabInactiveForeground;
final Color tabActiveBorder;
final Color tabCloseHover;
final Color buttonBackground;
final Color buttonForeground;
final Color buttonHoverBackground;
final Color buttonActiveBackground;
final Color buttonBorder;
final Color listItemBackground;
final Color listItemForeground;
final Color listItemHoverBackground;
final Color listItemSelectedBackground;
final Color listItemSelectedForeground;
final Color scrollbarSlider;
final Color scrollbarSliderHover;
final Color scrollbarTrack;
final Color tooltipBackground;
final Color tooltipForeground;
final Color tooltipBorder;
final Color dropdownBackground;
final Color dropdownForeground;
final Color dropdownBorder;
final Color modalOverlayBackground;
final Color modalSurfaceBackground;
final Color modalSurfaceBorder;
/// Hover background on the Windows-style close button. Conventionally
/// the destructive-action red even on dark themes that don't otherwise
/// surface red as a CTA.
final Color windowControlCloseHoverBackground;
final Color windowControlCloseHoverForeground;
/// Ambient drop-shadow color for floating surfaces (palette,
/// dropdowns, modals). Typically a translucent black on dark themes
/// and a translucent ink on light themes.
final Color shadowAmbient;
final Color dividerColor;
final Color statusSuccess;
final Color statusWarning;
final Color statusError;
final Color statusInfo;
final Color syntaxKeyword;
final Color syntaxType;
final Color syntaxString;
final Color syntaxNumber;
final Color syntaxComment;
final Color syntaxMethod;
final Color syntaxPunct;
/// Extension-declared tokens keyed by their dotted path
/// (e.g. `ext.sqlite.table.background`).
final Map<String, Color> extensionTokens;
}
/// Canonical surface-token keys as they appear in YAML.
///
/// Keeping them in one place lets the loader, the resolver, and the
/// default map reference the same strings without typos.
abstract class TokenKeys {
// global
static const globalForeground = 'global.foreground';
static const globalBackground = 'global.background';
static const globalBorder = 'global.border';
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';
static const panelActiveBorder = 'panel.activeBorder';
static const panelHeader = 'panel.header';
static const panelHeaderForeground = 'panel.headerForeground';
// sidebar
static const sidebarBackground = 'sidebar.background';
static const sidebarForeground = 'sidebar.foreground';
static const sidebarItemHover = 'sidebar.itemHover';
static const sidebarItemSelected = 'sidebar.itemSelected';
static const sidebarSectionHeader = 'sidebar.sectionHeader';
// statusbar
static const statusBarBackground = 'statusBar.background';
static const statusBarForeground = 'statusBar.foreground';
static const statusBarItemActiveBackground = 'statusBar.itemActiveBackground';
static const statusBarItemHoverBackground = 'statusBar.itemHoverBackground';
// tabs
static const tabBarBackground = 'tabBar.background';
static const tabActive = 'tabBar.tabActive';
static const tabInactive = 'tabBar.tabInactive';
static const tabActiveForeground = 'tabBar.tabActiveForeground';
static const tabInactiveForeground = 'tabBar.tabInactiveForeground';
static const tabActiveBorder = 'tabBar.tabActiveBorder';
static const tabCloseHover = 'tabBar.tabCloseHover';
// buttons
static const buttonBackground = 'button.background';
static const buttonForeground = 'button.foreground';
static const buttonHoverBackground = 'button.hoverBackground';
static const buttonActiveBackground = 'button.activeBackground';
static const buttonBorder = 'button.border';
// list items
static const listItemBackground = 'listItem.background';
static const listItemForeground = 'listItem.foreground';
static const listItemHoverBackground = 'listItem.hoverBackground';
static const listItemSelectedBackground = 'listItem.selectedBackground';
static const listItemSelectedForeground = 'listItem.selectedForeground';
// scrollbar
static const scrollbarSlider = 'scrollbar.slider';
static const scrollbarSliderHover = 'scrollbar.sliderHover';
static const scrollbarTrack = 'scrollbar.track';
// tooltip
static const tooltipBackground = 'tooltip.background';
static const tooltipForeground = 'tooltip.foreground';
static const tooltipBorder = 'tooltip.border';
// dropdown
static const dropdownBackground = 'dropdown.background';
static const dropdownForeground = 'dropdown.foreground';
static const dropdownBorder = 'dropdown.border';
// modal
static const modalOverlayBackground = 'modal.overlayBackground';
static const modalSurfaceBackground = 'modal.surfaceBackground';
static const modalSurfaceBorder = 'modal.surfaceBorder';
// window controls
static const windowControlCloseHoverBackground = 'windowControl.closeHoverBackground';
static const windowControlCloseHoverForeground = 'windowControl.closeHoverForeground';
// shadow
static const shadowAmbient = 'shadow.ambient';
// divider
static const dividerColor = 'divider.color';
// status
static const statusSuccess = 'status.success';
static const statusWarning = 'status.warning';
static const statusError = 'status.error';
static const statusInfo = 'status.info';
// syntax
static const syntaxKeyword = 'syntax.keyword';
static const syntaxType = 'syntax.type';
static const syntaxString = 'syntax.string';
static const syntaxNumber = 'syntax.number';
static const syntaxComment = 'syntax.comment';
static const syntaxMethod = 'syntax.method';
static const syntaxPunct = 'syntax.punct';
static const all = <String>[
globalForeground,
globalBackground,
globalBorder,
globalFocus,
globalTextMuted,
chromeBackground,
chromeForeground,
chromeBorder,
panelBackground,
panelBorder,
panelActiveBorder,
panelHeader,
panelHeaderForeground,
sidebarBackground,
sidebarForeground,
sidebarItemHover,
sidebarItemSelected,
sidebarSectionHeader,
statusBarBackground,
statusBarForeground,
statusBarItemActiveBackground,
statusBarItemHoverBackground,
tabBarBackground,
tabActive,
tabInactive,
tabActiveForeground,
tabInactiveForeground,
tabActiveBorder,
tabCloseHover,
buttonBackground,
buttonForeground,
buttonHoverBackground,
buttonActiveBackground,
buttonBorder,
listItemBackground,
listItemForeground,
listItemHoverBackground,
listItemSelectedBackground,
listItemSelectedForeground,
scrollbarSlider,
scrollbarSliderHover,
scrollbarTrack,
tooltipBackground,
tooltipForeground,
tooltipBorder,
dropdownBackground,
dropdownForeground,
dropdownBorder,
modalOverlayBackground,
modalSurfaceBackground,
modalSurfaceBorder,
windowControlCloseHoverBackground,
windowControlCloseHoverForeground,
shadowAmbient,
dividerColor,
statusSuccess,
statusWarning,
statusError,
statusInfo,
syntaxKeyword,
syntaxType,
syntaxString,
syntaxNumber,
syntaxComment,
syntaxMethod,
syntaxPunct,
];
}