Skip to content

Commit bd41b4d

Browse files
authored
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)
1 parent fbc395b commit bd41b4d

File tree

1 file changed

+17
-6
lines changed
  • packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin

1 file changed

+17
-6
lines changed

packages/richtext-lexical/src/features/experimental_table/client/plugins/TableActionMenuPlugin/index.scss

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,36 @@
2424

2525
html[data-theme='light'] {
2626
.table-action-menu-dropdown {
27-
@include shadow-m;
27+
box-shadow:
28+
0px 1px 2px 1px rgba(0, 0, 0, 0.05),
29+
0px 4px 8px 0px rgba(0, 0, 0, 0.1);
2830
}
2931
}
3032

3133
.table-action-menu-dropdown {
3234
z-index: 100;
3335
display: block;
3436
position: fixed;
35-
background: var(--color-base-0);
37+
background: var(--theme-input-bg);
3638
min-width: 160px;
37-
color: var(--color-base-800);
3839
border-radius: $style-radius-m;
3940
min-height: 40px;
4041
overflow-y: auto;
42+
box-shadow:
43+
0px 1px 2px 1px rgba(0, 0, 0, 0.1),
44+
0px 4px 16px 0px rgba(0, 0, 0, 0.2),
45+
0px -4px 8px 0px rgba(0, 0, 0, 0.1);
46+
47+
hr {
48+
border: none;
49+
height: 1px;
50+
background-color: var(--theme-elevation-200);
51+
}
4152

4253
.item {
4354
padding: 8px;
44-
color: var(--color-base-900);
45-
background: var(--color-base-0);
55+
color: var(--theme-elevation-900);
56+
background: var(--theme-input-bg);
4657
cursor: pointer;
4758
font-size: 13px;
4859
font-family: var(--font-body);
@@ -56,7 +67,7 @@ html[data-theme='light'] {
5667
width: 100%;
5768

5869
&:hover {
59-
background: var(--color-base-100);
70+
background: var(--theme-elevation-100);
6071
}
6172
}
6273
}

0 commit comments

Comments
 (0)