From bd41b4d7d28cd94a01a1ab32e2867e5698657dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?=
 <43938777+GermanJablo@users.noreply.github.com>
Date: Mon, 23 Sep 2024 15:03:14 -0300
Subject: [PATCH] fix(richtext-lexical): table dropdown menu dark mode color
 (#8368)

This PR supports dark mode for the tables dropdown menu (currently only
available in light mode).

I copied the colors from
[slash-menu-popup](https://github.com/payloadcms/payload/blob/beta/packages/richtext-lexical/src/lexical/plugins/SlashMenu/index.scss)
to keep things consistent.

Below are screenshots of the change. I also show the slash-menu-popup to
compare color consistency, and the light mode to verify that it's not
broken.

## Before


![image](https://github.com/user-attachments/assets/a709bf8c-1dc2-47ac-8310-5cd1776cb268)


## After


![image](https://github.com/user-attachments/assets/e6df6693-793d-4afb-8dcc-2ead5ac62ca9)

![image](https://github.com/user-attachments/assets/7604fdcd-34d0-4801-96c2-ae5ca92357d9)

![image](https://github.com/user-attachments/assets/3bd2c877-2567-44dd-89fe-cc565988f72a)

![image](https://github.com/user-attachments/assets/813693ea-ddbe-45f5-8f98-5c9c8c58c082)
---
 .../plugins/TableActionMenuPlugin/index.scss  | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
index 2951d3951f..779d0cf4a4 100644
--- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
+++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss
@@ -24,7 +24,9 @@
 
 html[data-theme='light'] {
   .table-action-menu-dropdown {
-    @include shadow-m;
+    box-shadow:
+      0px 1px 2px 1px rgba(0, 0, 0, 0.05),
+      0px 4px 8px 0px rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -32,17 +34,26 @@ html[data-theme='light'] {
   z-index: 100;
   display: block;
   position: fixed;
-  background: var(--color-base-0);
+  background: var(--theme-input-bg);
   min-width: 160px;
-  color: var(--color-base-800);
   border-radius: $style-radius-m;
   min-height: 40px;
   overflow-y: auto;
+  box-shadow:
+    0px 1px 2px 1px rgba(0, 0, 0, 0.1),
+    0px 4px 16px 0px rgba(0, 0, 0, 0.2),
+    0px -4px 8px 0px rgba(0, 0, 0, 0.1);
+
+  hr {
+    border: none;
+    height: 1px;
+    background-color: var(--theme-elevation-200);
+  }
 
   .item {
     padding: 8px;
-    color: var(--color-base-900);
-    background: var(--color-base-0);
+    color: var(--theme-elevation-900);
+    background: var(--theme-input-bg);
     cursor: pointer;
     font-size: 13px;
     font-family: var(--font-body);
@@ -56,7 +67,7 @@ html[data-theme='light'] {
     width: 100%;
 
     &:hover {
-      background: var(--color-base-100);
+      background: var(--theme-elevation-100);
     }
   }
 }