diff --git a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx
index 87335dae16c..08ebd10c467 100644
--- a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx
+++ b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.story.tsx
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import { Accordion } from '@mantine/core';
+import { Accordion, MantineProvider } from '@mantine/core';
import { RichTextEditor } from './RichTextEditor';
export default { title: 'RichTextEditor' };
@@ -50,6 +50,27 @@ export function Usage() {
);
}
+export function WithThemeProvider() {
+ const [value, onChange] = useState(html);
+ return (
+
+
+
+
+
+ );
+}
+
export function Placeholder() {
const [value, onChange] = useState('');
return (
diff --git a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts
index e08611f58f0..78a80e1db7d 100644
--- a/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts
+++ b/src/mantine-rte/src/components/RichTextEditor/RichTextEditor.styles.ts
@@ -71,7 +71,7 @@ export default createStyles(
lineHeight: '32px',
backgroundColor: theme.fn.variant({ variant: 'filled' }).background,
color: theme.white,
- borderRadius: theme.radius.sm,
+ borderRadius: theme.fn.radius(theme.defaultRadius),
fontWeight: 500,
padding: `0 ${theme.spacing.md}px`,
marginRight: theme.spacing.sm,
@@ -131,7 +131,7 @@ export default createStyles(
textAlign: 'left',
paddingLeft: theme.spacing.sm,
paddingRight: theme.spacing.sm,
- borderRadius: theme.radius.sm,
+ borderRadius: theme.fn.radius(theme.defaultRadius),
marginRight: theme.spacing.md,
border: `1px solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]
@@ -203,7 +203,7 @@ export default createStyles(
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors[theme.primaryColor][0],
padding: '3px 5px',
marginRight: 2,
- borderRadius: theme.radius.sm,
+ borderRadius: theme.fn.radius(theme.defaultRadius),
userSelect: 'all',
pointerEvents: 'none',
},
diff --git a/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts b/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts
index 6b1f5428863..16c1ef18a4a 100644
--- a/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts
+++ b/src/mantine-rte/src/components/Toolbar/Toolbar.styles.ts
@@ -38,13 +38,13 @@ export default createStyles((theme, { sticky, stickyOffset }: ToolbarStyles) =>
},
'&:first-of-type': {
- borderTopLeftRadius: theme.radius.sm,
- borderBottomLeftRadius: theme.radius.sm,
+ borderTopLeftRadius: theme.fn.radius(theme.defaultRadius),
+ borderBottomLeftRadius: theme.fn.radius(theme.defaultRadius),
},
'&:last-of-type': {
- borderTopRightRadius: theme.radius.sm,
- borderBottomRightRadius: theme.radius.sm,
+ borderTopRightRadius: theme.fn.radius(theme.defaultRadius),
+ borderBottomRightRadius: theme.fn.radius(theme.defaultRadius),
},
},
}));