From 78ffce470477b0bd0892cfd3d8e3151b0d6b0ce9 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com>
Date: Thu, 17 Oct 2024 16:38:45 -0300
Subject: [PATCH] menu item

---
 .../components/menu_item/menu_item_style.dart | 41 ++++++++++++++++++-
 packages/remix/lib/src/theme/remix_theme.dart |  1 +
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/packages/remix/lib/src/components/menu_item/menu_item_style.dart b/packages/remix/lib/src/components/menu_item/menu_item_style.dart
index bd6757de9..b94b436c2 100644
--- a/packages/remix/lib/src/components/menu_item/menu_item_style.dart
+++ b/packages/remix/lib/src/components/menu_item/menu_item_style.dart
@@ -13,11 +13,14 @@ class MenuItemStyle extends SpecStyle<MenuItemSpecUtility> {
       ..mainAxisSize.min()
       ..wrap.expanded()
       ..gap(4.0);
+
     final mainFlex = $.mainFlex.chain..gap(12.0);
+
     final title = $.title.style.fontSize(14.0);
+
     final subtitle = $.subtitle.chain
       ..style.fontSize(12.0)
-      ..style.color.black.withValue(0.5)
+      ..style.color.grey.shade600()
       ..maxLines(2);
 
     final container = $.container.chain
@@ -28,6 +31,40 @@ class MenuItemStyle extends SpecStyle<MenuItemSpecUtility> {
       ..size(20)
       ..color.black87();
 
-    return Style.create([textFlex, mainFlex, title, subtitle, container, icon]);
+    final disabled = spec.on.disabled(
+      $.title.style.color.grey.shade600(),
+      $.subtitle.style.color.grey.shade400(),
+    );
+
+    return Style.create([
+      textFlex,
+      mainFlex,
+      title,
+      subtitle,
+      container,
+      icon,
+      spec.on.disabled(disabled),
+    ]);
+  }
+}
+
+class MenuItemDarkStyle extends MenuItemStyle {
+  const MenuItemDarkStyle();
+
+  @override
+  Style makeStyle(SpecConfiguration<MenuItemSpecUtility> spec) {
+    final $ = spec.utilities;
+
+    final disabled = spec.on.disabled(
+      $.title.style.color.grey.shade400(),
+      $.subtitle.style.color.grey.shade700(),
+    );
+
+    return Style.create([
+      super.makeStyle(spec).call(),
+      $.title.style.color.white(),
+      $.icon.color.white(),
+      spec.on.disabled(disabled),
+    ]);
   }
 }
diff --git a/packages/remix/lib/src/theme/remix_theme.dart b/packages/remix/lib/src/theme/remix_theme.dart
index 8124cd827..4689b24c6 100644
--- a/packages/remix/lib/src/theme/remix_theme.dart
+++ b/packages/remix/lib/src/theme/remix_theme.dart
@@ -104,6 +104,7 @@ class RemixComponentTheme {
       card: const CardDarkStyle(),
       checkbox: const CheckboxDarkStyle(),
       iconButton: const IconButtonDarkStyle(),
+      menuItem: const MenuItemDarkStyle(),
       progress: const ProgressDarkStyle(),
       radio: const RadioDarkStyle(),
       scaffold: const ScaffoldDarkStyle(),