menu item

conceptadev · Oct 17, 2024 · 78ffce4 · 78ffce4
1 parent dd44c4c
commit 78ffce4
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 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
@@ -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
@@ -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(),