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), }, }, }));