From 625631c096d9a2b21dee7d8aa154edca8ee02da9 Mon Sep 17 00:00:00 2001
From: cogwheel0 <172976095+cogwheel0@users.noreply.github.com>
Date: Thu, 23 Oct 2025 23:27:11 +0530
Subject: [PATCH] feat: add scr color tokens and use them for drawers

Introduce scrimMedium and scrimStrong color tokens to the shared
theme color tokens and propagate them through constructors, copyWith,
and lerp so scrim values interpolate and can be overridden.

Define scrim tokens as black with different alpha values per theme
mode (lighter alpha in light mode stronger in dark mode) to create
a consistent darkening effect for overlays.

Refactor ChatPage to use the new scrim tokens for drawer scrims and
format a RegExp call for readability. This replaces previous use of
overlay tokens for platform-specific scrims to provide clearer
semantics and better visual control for modal/drawer backdrops.
---
 lib/features/chat/views/chat_page.dart | 10 +++++++---
 lib/shared/theme/color_tokens.dart     | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/lib/features/chat/views/chat_page.dart b/lib/features/chat/views/chat_page.dart
index 67c7e16..1bc15db 100644
--- a/lib/features/chat/views/chat_page.dart
+++ b/lib/features/chat/views/chat_page.dart
@@ -988,7 +988,11 @@ class _ChatPageState extends ConsumerState<ChatPage> {
       '',
     );
     cleanedContent = cleanedContent.replaceAll(
-      RegExp(r'<reasoning>[\s\S]*?<\/reasoning>', multiLine: true, dotAll: true),
+      RegExp(
+        r'<reasoning>[\s\S]*?<\/reasoning>',
+        multiLine: true,
+        dotAll: true,
+      ),
       '',
     );
 
@@ -1274,8 +1278,8 @@ class _ChatPageState extends ConsumerState<ChatPage> {
             final maxFraction = isTablet ? 0.42 : 0.84;
             final edgeFraction = isTablet ? 0.36 : 0.50; // large phone edge
             final scrim = Platform.isIOS
-                ? context.colorTokens.overlayMedium
-                : context.colorTokens.overlayStrong;
+                ? context.colorTokens.scrimMedium
+                : context.colorTokens.scrimStrong;
 
             return ResponsiveDrawerLayout(
               maxFraction: maxFraction,
diff --git a/lib/shared/theme/color_tokens.dart b/lib/shared/theme/color_tokens.dart
index 2e4f3ff..ce5d660 100644
--- a/lib/shared/theme/color_tokens.dart
+++ b/lib/shared/theme/color_tokens.dart
@@ -39,6 +39,8 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
     required this.overlayWeak,
     required this.overlayMedium,
     required this.overlayStrong,
+    required this.scrimMedium,
+    required this.scrimStrong,
     required this.codeBackground,
     required this.codeBorder,
     required this.codeText,
@@ -84,6 +86,10 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
   final Color overlayMedium;
   final Color overlayStrong;
 
+  // Scrim tokens (for drawer/modal overlays)
+  final Color scrimMedium;
+  final Color scrimStrong;
+
   // Markdown/code tokens
   final Color codeBackground;
   final Color codeBorder;
@@ -194,6 +200,14 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
       alpha: isLight ? 0.32 : 0.36,
     );
 
+    // Scrim tokens use black to create darkening effect in both modes
+    final Color scrimMedium = Colors.black.withValues(
+      alpha: isLight ? 0.2 : 0.5,
+    );
+    final Color scrimStrong = Colors.black.withValues(
+      alpha: isLight ? 0.32 : 0.6,
+    );
+
     final Color codeBackground = mix(variant.muted, neutralTone00, 0.5);
     final Color codeBorder = mix(variant.border, neutralTone40, 0.6);
     final Color codeText = _ensureContrast(
@@ -232,6 +246,8 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
       overlayWeak: overlayWeak,
       overlayMedium: overlayMedium,
       overlayStrong: overlayStrong,
+      scrimMedium: scrimMedium,
+      scrimStrong: scrimStrong,
       codeBackground: codeBackground,
       codeBorder: codeBorder,
       codeText: codeText,
@@ -269,6 +285,8 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
     Color? overlayWeak,
     Color? overlayMedium,
     Color? overlayStrong,
+    Color? scrimMedium,
+    Color? scrimStrong,
     Color? codeBackground,
     Color? codeBorder,
     Color? codeText,
@@ -303,6 +321,8 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
       overlayWeak: overlayWeak ?? this.overlayWeak,
       overlayMedium: overlayMedium ?? this.overlayMedium,
       overlayStrong: overlayStrong ?? this.overlayStrong,
+      scrimMedium: scrimMedium ?? this.scrimMedium,
+      scrimStrong: scrimStrong ?? this.scrimStrong,
       codeBackground: codeBackground ?? this.codeBackground,
       codeBorder: codeBorder ?? this.codeBorder,
       codeText: codeText ?? this.codeText,
@@ -364,6 +384,8 @@ class AppColorTokens extends ThemeExtension<AppColorTokens> {
       overlayWeak: Color.lerp(overlayWeak, other.overlayWeak, t)!,
       overlayMedium: Color.lerp(overlayMedium, other.overlayMedium, t)!,
       overlayStrong: Color.lerp(overlayStrong, other.overlayStrong, t)!,
+      scrimMedium: Color.lerp(scrimMedium, other.scrimMedium, t)!,
+      scrimStrong: Color.lerp(scrimStrong, other.scrimStrong, t)!,
       codeBackground: Color.lerp(codeBackground, other.codeBackground, t)!,
       codeBorder: Color.lerp(codeBorder, other.codeBorder, t)!,
       codeText: Color.lerp(codeText, other.codeText, t)!,