diff --git a/apps/client/src/features/editor/styles/table.css b/apps/client/src/features/editor/styles/table.css index 32a427936..f0286cf5a 100644 --- a/apps/client/src/features/editor/styles/table.css +++ b/apps/client/src/features/editor/styles/table.css @@ -86,6 +86,16 @@ .ProseMirror { table { @mixin dark { + /* Arbitrary (imported) colors: derive a dark variant; the hand-tuned + palette rules below override this for native colors. */ + td[data-background-color], + th[data-background-color] { + background-color: oklch( + from var(--cell-bg, #fff) min(l, clamp(0.28, calc(1.22 - l), 0.45)) + min(calc(c * 1.8), 0.09) h + ) !important; + } + /* Blue */ td[data-background-color="#b4d5ff"], th[data-background-color="#b4d5ff"] { diff --git a/packages/editor-ext/src/lib/table/cell.ts b/packages/editor-ext/src/lib/table/cell.ts index 9101e1614..a6ad21aa5 100644 --- a/packages/editor-ext/src/lib/table/cell.ts +++ b/packages/editor-ext/src/lib/table/cell.ts @@ -19,7 +19,7 @@ export const TableCell = TiptapTableCell.extend({ return {}; } return { - style: `background-color: ${attributes.backgroundColor}`, + style: `background-color: ${attributes.backgroundColor}; --cell-bg: ${attributes.backgroundColor}`, "data-background-color": attributes.backgroundColor, }; }, diff --git a/packages/editor-ext/src/lib/table/header.ts b/packages/editor-ext/src/lib/table/header.ts index 7f288dde9..e366145e2 100644 --- a/packages/editor-ext/src/lib/table/header.ts +++ b/packages/editor-ext/src/lib/table/header.ts @@ -19,7 +19,7 @@ export const TableHeader = TiptapTableHeader.extend({ return {}; } return { - style: `background-color: ${attributes.backgroundColor}`, + style: `background-color: ${attributes.backgroundColor}; --cell-bg: ${attributes.backgroundColor}`, "data-background-color": attributes.backgroundColor, }; },