Update widgets UI as per the latest Material 3 colors

lib/widgets/card_history_request.dart

@@ -21,8 +21,7 @@ class HistoryRequestCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
     final Color surfaceTint = Theme.of(context).colorScheme.primary;
     return Card(
       shape: const ContinuousRectangleBorder(borderRadius: kBorderRadius12),
@@ -38,7 +37,6 @@ class HistoryRequestCard extends StatelessWidget {
         onTap: onTap,
         borderRadius: kBorderRadius6,
         hoverColor: colorVariant,
-        focusColor: colorVariant.withOpacity(0.5),
         child: Padding(
           padding: kPv6 + kPh8,
           child: SizedBox(

lib/widgets/card_sidebar_environment.dart

@@ -43,8 +43,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
     final colorScheme = Theme.of(context).colorScheme;
     final Color color =
         isGlobal ? colorScheme.secondaryContainer : colorScheme.surface;
-    final Color colorVariant =
+    final Color colorVariant = colorScheme.surfaceContainer;
-        colorScheme.surfaceContainerHighest.withOpacity(0.5);
     final Color surfaceTint = colorScheme.primary;
     bool isSelected = selectedId == id;
     bool inEditMode = editRequestId == id;
@@ -68,7 +67,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
         child: InkWell(
           borderRadius: kBorderRadius8,
           hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
+          focusColor: colorVariant,
           onTap: inEditMode ? null : onTap,
           // onSecondaryTap: onSecondaryTap,
           onSecondaryTapUp: (isGlobal)

lib/widgets/card_sidebar_history.dart

@@ -28,8 +28,7 @@ class SidebarHistoryCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
     final model = models.first;
     final Color surfaceTint = Theme.of(context).colorScheme.primary;
     final String name = getHistoryRequestName(model);
@@ -53,7 +52,6 @@ class SidebarHistoryCard extends StatelessWidget {
           onTap: onTap,
           borderRadius: kBorderRadius8,
           hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
           child: Padding(
             padding: const EdgeInsets.only(
               left: 6,

lib/widgets/card_sidebar_request.dart

@@ -45,8 +45,7 @@ class SidebarRequestCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color color = Theme.of(context).colorScheme.surface;
-    final Color colorVariant =
+    final Color colorVariant = Theme.of(context).colorScheme.surfaceContainer;
-        Theme.of(context).colorScheme.surfaceContainerHighest.withOpacity(0.5);
     final Color surfaceTint = Theme.of(context).colorScheme.primary;
     bool isSelected = selectedId == id;
     bool inEditMode = editRequestId == id;
@@ -72,7 +71,7 @@ class SidebarRequestCard extends StatelessWidget {
         child: InkWell(
           borderRadius: kBorderRadius8,
           hoverColor: colorVariant,
-          focusColor: colorVariant.withOpacity(0.5),
+          focusColor: colorVariant,
           onTap: inEditMode ? null : onTap,
           // onDoubleTap: inEditMode ? null : onDoubleTap,
           onSecondaryTapUp: (details) {

lib/widgets/codegen_previewer.dart

@@ -118,12 +118,7 @@ class ViewCodePane extends StatelessWidget {
         ? kLightCodeTheme
         : kDarkCodeTheme;
     final textContainerdecoration = BoxDecoration(
-      color: Color.alphaBlend(
+      color: Theme.of(context).colorScheme.surfaceContainerLow,
-          (Theme.of(context).brightness == Brightness.dark
-                  ? Theme.of(context).colorScheme.onPrimaryContainer
-                  : Theme.of(context).colorScheme.primaryContainer)
-              .withOpacity(kForegroundOpacity),
-          Theme.of(context).colorScheme.surface),
       border: Border.all(
           color: Theme.of(context).colorScheme.surfaceContainerHighest),
       borderRadius: kBorderRadius8,

lib/widgets/dialog_history_retention.dart

@@ -29,10 +29,7 @@ showHistoryRetentionDialog(
                 child: Text(
                   "Select the duration for which you want to retain your request history",
                   style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                        color: Theme.of(context)
+                        color: Theme.of(context).colorScheme.outline,
-                            .colorScheme
-                            .onSurface
-                            .withOpacity(0.8),
                       ),
                 ),
               ),
@@ -49,10 +46,7 @@ showHistoryRetentionDialog(
                         secondary: Icon(e.icon,
                             color: selectedRetentionPeriod == e
                                 ? Theme.of(context).colorScheme.primary
-                                : Theme.of(context)
+                                : Theme.of(context).colorScheme.outline),
-                                    .colorScheme
-                                    .onSurface
-                                    .withOpacity(0.6)),
                         value: e,
                         groupValue: selectedRetentionPeriod,
                         onChanged: (value) {

lib/widgets/editor.dart

@@ -86,16 +86,12 @@ class _TextFieldEditorState extends State<TextFieldEditor> {
         decoration: InputDecoration(
           hintText: widget.hintText ?? kHintContent,
           hintStyle: TextStyle(
-            color: Theme.of(context).colorScheme.outline.withOpacity(
+            color: Theme.of(context).colorScheme.outlineVariant,
-                  kHintOpacity,
-                ),
           ),
           focusedBorder: OutlineInputBorder(
             borderRadius: kBorderRadius8,
             borderSide: BorderSide(
-              color: Theme.of(context).colorScheme.primary.withOpacity(
+              color: Theme.of(context).colorScheme.outlineVariant,
-                    kHintOpacity,
-                  ),
             ),
           ),
           enabledBorder: OutlineInputBorder(
@@ -106,12 +102,7 @@ class _TextFieldEditorState extends State<TextFieldEditor> {
           ),
           filled: true,
           hoverColor: kColorTransparent,
-          fillColor: Color.alphaBlend(
+          fillColor: Theme.of(context).colorScheme.surfaceContainerLow,
-              (Theme.of(context).brightness == Brightness.dark
-                      ? Theme.of(context).colorScheme.onPrimaryContainer
-                      : Theme.of(context).colorScheme.primaryContainer)
-                  .withOpacity(kForegroundOpacity),
-              Theme.of(context).colorScheme.surface),
         ),
       ),
     );

lib/widgets/field_header.dart

@@ -80,15 +80,12 @@ class _HeaderFieldState extends State<HeaderField> {
           color: colorScheme.onSurface,
         ),
         decoration: InputDecoration(
-          hintStyle: kCodeStyle.copyWith(
+          hintStyle: kCodeStyle.copyWith(color: colorScheme.outlineVariant),
-              color: colorScheme.outline.withOpacity(kHintOpacity)),
           hintText: widget.hintText,
           contentPadding: const EdgeInsets.only(bottom: 12),
           focusedBorder: UnderlineInputBorder(
             borderSide: BorderSide(
-              color: colorScheme.primary.withOpacity(
+              color: colorScheme.outline,
-                kHintOpacity,
-              ),
             ),
           ),
           enabledBorder: UnderlineInputBorder(

lib/widgets/field_url.dart

@@ -25,9 +25,7 @@ class URLField extends StatelessWidget {
       decoration: InputDecoration(
         hintText: kHintTextUrlCard,
         hintStyle: kCodeStyle.copyWith(
-          color: Theme.of(context).colorScheme.outline.withOpacity(
+          color: Theme.of(context).colorScheme.outlineVariant,
-                kHintOpacity,
-              ),
         ),
         border: InputBorder.none,
       ),

lib/widgets/response_widgets.dart

@@ -405,14 +405,10 @@ class _BodySuccessState extends State<BodySuccess> {
         ? kLightCodeTheme
         : kDarkCodeTheme;
     final textContainerdecoration = BoxDecoration(
-      color: Color.alphaBlend(
+      color: Theme.of(context).colorScheme.surfaceContainerLow,
-          (Theme.of(context).brightness == Brightness.dark
-                  ? Theme.of(context).colorScheme.onPrimaryContainer
-                  : Theme.of(context).colorScheme.primaryContainer)
-              .withOpacity(kForegroundOpacity),
-          Theme.of(context).colorScheme.surface),
       border: Border.all(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest),
+        color: Theme.of(context).colorScheme.surfaceContainerHighest,
+      ),
       borderRadius: kBorderRadius8,
     );
 

lib/widgets/splitview_dashboard.dart

@@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';
 
@@ -35,10 +34,9 @@ class DashboardSplitViewState extends State<DashboardSplitView> {
       data: MultiSplitViewThemeData(
         dividerThickness: 3,
         dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          color: Theme.of(context).colorScheme.surfaceContainer,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
+          highlightedColor:
-                kHintOpacity,
+              Theme.of(context).colorScheme.surfaceContainerHighest,
-              ),
           animationEnabled: false,
         ),
       ),

lib/widgets/splitview_equal.dart

@@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';
 
@@ -30,10 +29,9 @@ class EqualSplitView extends StatelessWidget {
       data: MultiSplitViewThemeData(
         dividerThickness: 3,
         dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          color: Theme.of(context).colorScheme.surfaceContainer,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
+          highlightedColor:
-                kHintOpacity,
+              Theme.of(context).colorScheme.surfaceContainerHighest,
-              ),
           animationEnabled: false,
         ),
       ),

lib/widgets/splitview_history.dart

@@ -1,4 +1,3 @@
-import 'package:apidash_design_system/apidash_design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:multi_split_view/multi_split_view.dart';
 
@@ -35,10 +34,9 @@ class HistorySplitViewState extends State<HistorySplitView> {
       data: MultiSplitViewThemeData(
         dividerThickness: 3,
         dividerPainter: DividerPainters.background(
-          color: Theme.of(context).colorScheme.surfaceContainerHighest,
+          color: Theme.of(context).colorScheme.surfaceContainer,
-          highlightedColor: Theme.of(context).colorScheme.outline.withOpacity(
+          highlightedColor:
-                kHintOpacity,
+              Theme.of(context).colorScheme.surfaceContainerHighest,
-              ),
           animationEnabled: false,
         ),
       ),

lib/widgets/tabbar_segmented.dart

@@ -35,8 +35,7 @@ class SegmentedTabbar extends StatelessWidget {
             dividerColor: Colors.transparent,
             indicatorWeight: 0.0,
             indicatorSize: TabBarIndicatorSize.tab,
-            unselectedLabelColor:
+            unselectedLabelColor: Theme.of(context).colorScheme.outline,
-                Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
             labelStyle: kTextStyleTab.copyWith(
               fontWeight: FontWeight.bold,
               color: Theme.of(context).colorScheme.onPrimary,

lib/widgets/table_request.dart

@@ -45,9 +45,7 @@ class RequestDataTable extends StatelessWidget {
       contentPadding: const EdgeInsets.only(bottom: 12),
       focusedBorder: UnderlineInputBorder(
         borderSide: BorderSide(
-          color: clrScheme.primary.withOpacity(
+          color: clrScheme.outlineVariant,
-            kHintOpacity,
-          ),
         ),
       ),
       enabledBorder: UnderlineInputBorder(

lib/widgets/table_request_form.dart

@@ -47,9 +47,7 @@ class RequestFormDataTable extends StatelessWidget {
       contentPadding: const EdgeInsets.only(bottom: 12),
       focusedBorder: UnderlineInputBorder(
         borderSide: BorderSide(
-          color: clrScheme.primary.withOpacity(
+          color: clrScheme.outlineVariant,
-            kHintOpacity,
-          ),
         ),
       ),
       enabledBorder: UnderlineInputBorder(