diff --git a/lib/theme/app_palette.dart b/lib/theme/app_palette.dart index 7e4bcb05..fb2e8cc3 100644 --- a/lib/theme/app_palette.dart +++ b/lib/theme/app_palette.dart @@ -63,85 +63,85 @@ class AppPalette extends ThemeExtension { final Color hover; static const AppPalette light = AppPalette( - canvas: Color(0xFFFAF8F4), - sidebar: Color(0xFFF6F2EC), - sidebarBorder: Color(0x147E7061), - chromeBackground: Color(0xFFF6F2EC), - chromeSurface: Color(0xFFFFFDF9), - chromeSurfacePressed: Color(0xFFF8F4EE), - chromeHighlight: Color(0xFFFFFEFB), - chromeStroke: Color(0x1F7E7061), - chromeInset: Color(0xFFF3EEE7), + canvas: Color(0xFFF8F9FA), + sidebar: Color(0xFFF2F5F8), + sidebarBorder: Color(0x24A6B4C8), + chromeBackground: Color(0xFFF2F5F8), + chromeSurface: Color(0xFFFFFFFF), + chromeSurfacePressed: Color(0xFFF2F5F8), + chromeHighlight: Color(0xFFFBFCFD), + chromeStroke: Color(0x2EA6B4C8), + chromeInset: Color(0xFFE9EEF4), chromeShadowAmbient: BoxShadow( - color: Color(0x0A2E2418), - blurRadius: 16, - offset: Offset(0, 3), - spreadRadius: -14, + color: Color(0x120058BD), + blurRadius: 24, + offset: Offset(0, 8), + spreadRadius: -18, ), chromeShadowLift: BoxShadow( - color: Color(0x122E2418), - blurRadius: 20, - offset: Offset(0, 8), - spreadRadius: -12, + color: Color(0x160058BD), + blurRadius: 26, + offset: Offset(0, 10), + spreadRadius: -18, ), - surfacePrimary: Color(0xFFFFFDF9), - surfaceSecondary: Color(0xFFF8F4EE), - surfaceTertiary: Color(0xFFF1EAE1), - stroke: Color(0x1F7E7061), - strokeSoft: Color(0x147E7061), - accent: Color(0xFF635BFF), - accentHover: Color(0xFF564EF0), - accentMuted: Color(0xFFECE9FF), - idle: Color(0xFF9D968C), - success: Color(0xFF2F7D57), - warning: Color(0xFF8A5A1F), - danger: Color(0xFFB65C4A), - textPrimary: Color(0xFF24211D), - textSecondary: Color(0xFF6E675F), - textMuted: Color(0xFF9D968C), - shadow: Color(0x102E2418), - hover: Color(0xFFF3EEE7), + surfacePrimary: Color(0xFFFFFFFF), + surfaceSecondary: Color(0xFFF2F5F8), + surfaceTertiary: Color(0xFFE9EEF4), + stroke: Color(0x2EA6B4C8), + strokeSoft: Color(0x24A6B4C8), + accent: Color(0xFF0058BD), + accentHover: Color(0xFF004DA8), + accentMuted: Color(0xFFE8F0FB), + idle: Color(0xFF98A1B2), + success: Color(0xFF34A853), + warning: Color(0xFF8F4A00), + danger: Color(0xFFC3655C), + textPrimary: Color(0xFF1C1B1F), + textSecondary: Color(0xFF667085), + textMuted: Color(0xFF98A1B2), + shadow: Color(0x120058BD), + hover: Color(0xFFEFF3F8), ); static const AppPalette dark = AppPalette( - canvas: Color(0xFF171513), - sidebar: Color(0xFF1D1A17), - sidebarBorder: Color(0x14EEE3D6), - chromeBackground: Color(0xFF1D1A17), - chromeSurface: Color(0xFF24201C), - chromeSurfacePressed: Color(0xFF2B2621), - chromeHighlight: Color(0xFF2E2822), - chromeStroke: Color(0x1FEEE3D6), - chromeInset: Color(0xFF23201C), + canvas: Color(0xFF141422), + sidebar: Color(0xFF171C28), + sidebarBorder: Color(0x30CAC4D0), + chromeBackground: Color(0xFF171C28), + chromeSurface: Color(0xFF1E2433), + chromeSurfacePressed: Color(0xFF262D3F), + chromeHighlight: Color(0xFF22293A), + chromeStroke: Color(0x36CAC4D0), + chromeInset: Color(0xFF1A2130), chromeShadowAmbient: BoxShadow( - color: Color(0x22000000), - blurRadius: 22, + color: Color(0x2A4B8FE8), + blurRadius: 24, offset: Offset(0, 8), - spreadRadius: -14, + spreadRadius: -18, ), chromeShadowLift: BoxShadow( - color: Color(0x2B000000), - blurRadius: 20, - offset: Offset(0, 8), - spreadRadius: -12, + color: Color(0x324B8FE8), + blurRadius: 28, + offset: Offset(0, 10), + spreadRadius: -18, ), - surfacePrimary: Color(0xFF24201C), - surfaceSecondary: Color(0xFF2B2621), - surfaceTertiary: Color(0xFF342E28), - stroke: Color(0x1FEEE3D6), - strokeSoft: Color(0x14EEE3D6), - accent: Color(0xFF8A83FF), - accentHover: Color(0xFF9A94FF), - accentMuted: Color(0x2E8A83FF), - idle: Color(0xFF958B80), - success: Color(0xFF66B78B), - warning: Color(0xFFD3A86C), - danger: Color(0xFFE58C79), - textPrimary: Color(0xFFF1E9DF), - textSecondary: Color(0xFFC6BAAD), - textMuted: Color(0xFF958B80), - shadow: Color(0x52000000), - hover: Color(0xFF2B2621), + surfacePrimary: Color(0xFF171C28), + surfaceSecondary: Color(0xFF1E2433), + surfaceTertiary: Color(0xFF262D3F), + stroke: Color(0x36CAC4D0), + strokeSoft: Color(0x2ACAC4D0), + accent: Color(0xFF4B8FE8), + accentHover: Color(0xFF5B9BF0), + accentMuted: Color(0xFF1C3355), + idle: Color(0xFF8B95A8), + success: Color(0xFF5CB978), + warning: Color(0xFFE0AE5A), + danger: Color(0xFFEF9A9A), + textPrimary: Color(0xFFE6E1E5), + textSecondary: Color(0xFFB0B8C8), + textMuted: Color(0xFF8B95A8), + shadow: Color(0x5A000000), + hover: Color(0xFF22293A), ); @override diff --git a/lib/theme/app_theme.dart b/lib/theme/app_theme.dart index b87d4cff..4b24a91b 100644 --- a/lib/theme/app_theme.dart +++ b/lib/theme/app_theme.dart @@ -21,12 +21,12 @@ class SimpleSpacing { class SimpleRadius { SimpleRadius._(); - static const double card = 18.0; + static const double card = 16.0; static const double button = 12.0; - static const double input = 20.0; - static const double chip = 999.0; - static const double badge = 999.0; - static const double dialog = 20.0; + static const double input = 14.0; + static const double chip = 12.0; + static const double badge = 12.0; + static const double dialog = 18.0; static const double sidebar = 20.0; static const double icon = 12.0; } @@ -35,28 +35,28 @@ class SimpleTypography { SimpleTypography._(); static const double displaySize = 28.0; - static const FontWeight displayWeight = FontWeight.w600; + static const FontWeight displayWeight = FontWeight.w700; static const double displayHeight = 32 / 28; static const double titleSize = 20.0; static const FontWeight titleWeight = FontWeight.w600; static const double titleHeight = 24 / 20; - static const double sectionSize = 15.0; + static const double sectionSize = 13.0; static const FontWeight sectionWeight = FontWeight.w600; - static const double sectionHeight = 20 / 15; + static const double sectionHeight = 14 / 13; - static const double bodySize = 15.0; + static const double bodySize = 13.0; static const FontWeight bodyWeight = FontWeight.w400; - static const double bodyHeight = 24 / 15; + static const double bodyHeight = 15 / 13; - static const double compactBodySize = 14.0; + static const double compactBodySize = 13.0; static const FontWeight compactBodyWeight = FontWeight.w400; - static const double compactBodyHeight = 22 / 14; + static const double compactBodyHeight = 15 / 13; static const double emphasizedBodySize = 13.0; static const FontWeight emphasizedBodyWeight = FontWeight.w600; - static const double emphasizedBodyHeight = 18 / 13; + static const double emphasizedBodyHeight = 14 / 13; static const double captionSize = 12.0; static const FontWeight captionWeight = FontWeight.w400; @@ -66,7 +66,7 @@ class SimpleTypography { class SimpleSizes { SimpleSizes._(); - static const double sidebarItemHeight = 34.0; + static const double sidebarItemHeight = 32.0; static const double sidebarIconSize = 18.0; static const double sidebarTextSize = 13.0; static const double sidebarExpandedWidthZh = 152.0; @@ -78,7 +78,7 @@ class SimpleSizes { static const double toolbarHeight = 40.0; static const double inputHeight = 40.0; - static const double buttonHeightDesktop = 34.0; + static const double buttonHeightDesktop = 30.0; static const double buttonHeightMobile = 36.0; } diff --git a/lib/web/web_assistant_page_helpers.dart b/lib/web/web_assistant_page_helpers.dart index 945c24bd..b460711d 100644 --- a/lib/web/web_assistant_page_helpers.dart +++ b/lib/web/web_assistant_page_helpers.dart @@ -10,6 +10,7 @@ import '../i18n/app_language.dart'; import '../models/app_models.dart'; import '../runtime/runtime_models.dart'; import '../theme/app_palette.dart'; +import '../theme/app_theme.dart'; import '../widgets/assistant_artifact_sidebar.dart'; import '../widgets/desktop_workspace_scaffold.dart'; import '../widgets/pane_resize_handle.dart'; @@ -43,7 +44,7 @@ class ChromePillInternal extends StatelessWidget { ), decoration: BoxDecoration( color: emphasized ? palette.surfacePrimary : palette.surfaceSecondary, - borderRadius: BorderRadius.circular(999), + borderRadius: BorderRadius.circular(AppRadius.chip), border: Border.all(color: palette.strokeSoft), ), child: Row( @@ -73,7 +74,7 @@ class HeaderDropdownShellInternal extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 12), decoration: BoxDecoration( color: context.palette.surfacePrimary, - borderRadius: BorderRadius.circular(999), + borderRadius: BorderRadius.circular(AppRadius.chip), border: Border.all(color: context.palette.strokeSoft), ), child: child, diff --git a/lib/widgets/sidebar_navigation_footer.dart b/lib/widgets/sidebar_navigation_footer.dart index a1793bdd..3b037fe1 100644 --- a/lib/widgets/sidebar_navigation_footer.dart +++ b/lib/widgets/sidebar_navigation_footer.dart @@ -264,7 +264,9 @@ class _SidebarFooterButtonState extends State<_SidebarFooterButton> { ), decoration: BoxDecoration( color: palette.surfacePrimary, - borderRadius: BorderRadius.circular(999), + borderRadius: BorderRadius.circular( + AppRadius.badge, + ), border: Border.all(color: palette.strokeSoft), ), child: Text( diff --git a/lib/widgets/top_bar.dart b/lib/widgets/top_bar.dart index 9046db46..64fc5463 100644 --- a/lib/widgets/top_bar.dart +++ b/lib/widgets/top_bar.dart @@ -162,7 +162,7 @@ class _BreadcrumbChip extends StatelessWidget { return InkWell( onTap: item.onTap, - borderRadius: BorderRadius.circular(999), + borderRadius: BorderRadius.circular(AppRadius.chip), child: body, ); } diff --git a/test/theme/app_theme_suite.dart b/test/theme/app_theme_suite.dart index ec7505e7..aa6d19a9 100644 --- a/test/theme/app_theme_suite.dart +++ b/test/theme/app_theme_suite.dart @@ -36,4 +36,21 @@ void main() { AppSizes.buttonHeightDesktop, ); }); + + test('AppTheme matches calm compact workspace baseline tokens', () { + expect(AppRadius.card, 16); + expect(AppRadius.input, 14); + expect(AppRadius.dialog, 18); + expect(AppRadius.chip, 12); + expect(AppTypography.sectionSize, 13); + expect(AppTypography.bodySize, 13); + expect(AppTypography.compactBodySize, 13); + expect(AppSizes.buttonHeightDesktop, 30); + + expect(AppTheme.light().colorScheme.primary, const Color(0xFF0058BD)); + expect( + AppTheme.dark().scaffoldBackgroundColor, + const Color(0xFF141422), + ); + }); }