fix: add missing pre and code block Material styles (#6823)

vaadin · Nov 21, 2023 · 8732fac · 8732fac
1 parent bda4537
commit 8732fac
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git a/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js b/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js
@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/material/vaadin-rich-text-editor.js';
+import { colorDark } from '@vaadin/vaadin-material-styles/color.js';
 
 describe('rich-text-editor', () => {
   let div, element;
@@ -66,4 +67,21 @@ describe('rich-text-editor', () => {
     ]`;
     await visualDiff(div, 'max-height');
   });
+
+  it('dark theme', async () => {
+    document.documentElement.setAttribute('theme', 'dark');
+
+    fixtureSync(`<style>${colorDark.toString().replace(':host', 'html')}</style>`);
+
+    element.value = `[
+      {"insert":"<body>"},
+      {"attributes":{"code-block":true},"insert":"\\n"},
+      {"insert":"  <vaadin-rich-text-editor></vaadin-rich-text-editor>"},
+      {"attributes":{"code-block":true},"insert":"\\n"},
+      {"insert":"</body>"},
+      {"attributes":{"code-block":true},"insert":"\\n"},
+      {"insert":"\\n"}
+    ]`;
+    await visualDiff(div, 'dark-theme');
+  });
 });
diff --git a/...ditor/test/visual/material/screenshots/rich-text-editor/baseline/dark-theme.png b/...ditor/test/visual/material/screenshots/rich-text-editor/baseline/dark-theme.png
diff --git a/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js b/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js
@@ -91,6 +91,11 @@ const richTextEditor = css`
   strong {
     font-weight: 600;
   }
+
+  code,
+  pre {
+    background-color: var(--material-secondary-background-color);
+  }
 `;
 
 registerStyles('vaadin-rich-text-editor', [typography, richTextEditor], {