diff --git a/src/examples/dark-editor.css b/src/examples/dark-editor.css
index 8cd3fe85..15a5c85c 100644
--- a/src/examples/dark-editor.css
+++ b/src/examples/dark-editor.css
@@ -1,32 +1,32 @@
-@import url('@radix-ui/colors/tomatoDark.css');
-@import url('@radix-ui/colors/mauveDark.css');
+@import url('@radix-ui/colors/tomato-dark.css');
+@import url('@radix-ui/colors/mauve-dark.css');
 
 .dark-editor {
-  --accentBase: var(--tomato1);
-  --accentBgSubtle: var(--tomato2);
-  --accentBg: var(--tomato3);
-  --accentBgHover: var(--tomato4);
-  --accentBgActive: var(--tomato5);
-  --accentLine: var(--tomato6);
-  --accentBorder: var(--tomato7);
-  --accentBorderHover: var(--tomato8);
-  --accentSolid: var(--tomato9);
-  --accentSolidHover: var(--tomato10);
-  --accentText: var(--tomato11);
-  --accentTextContrast: var(--tomato12);
-
-  --baseBase: var(--mauve1);
-  --baseBgSubtle: var(--mauve2);
-  --baseBg: var(--mauve3);
-  --baseBgHover: var(--mauve4);
-  --baseBgActive: var(--mauve5);
-  --baseLine: var(--mauve6);
-  --baseBorder: var(--mauve7);
-  --baseBorderHover: var(--mauve8);
-  --baseSolid: var(--mauve9);
-  --baseSolidHover: var(--mauve10);
-  --baseText: var(--mauve11);
-  --baseTextContrast: var(--mauve12);
+  --accentBase: var(--tomato-1);
+  --accentBgSubtle: var(--tomato-2);
+  --accentBg: var(--tomato-3);
+  --accentBgHover: var(--tomato-4);
+  --accentBgActive: var(--tomato-5);
+  --accentLine: var(--tomato-6);
+  --accentBorder: var(--tomato-7);
+  --accentBorderHover: var(--tomato-8);
+  --accentSolid: var(--tomato-9);
+  --accentSolidHover: var(--tomato-10);
+  --accentText: var(--tomato-11);
+  --accentTextContrast: var(--tomato-12);
+
+  --baseBase: var(--mauve-1);
+  --baseBgSubtle: var(--mauve-2);
+  --baseBg: var(--mauve-3);
+  --baseBgHover: var(--mauve-4);
+  --baseBgActive: var(--mauve-5);
+  --baseLine: var(--mauve-6);
+  --baseBorder: var(--mauve-7);
+  --baseBorderHover: var(--mauve-8);
+  --baseSolid: var(--mauve-9);
+  --baseSolidHover: var(--mauve-10);
+  --baseText: var(--mauve-11);
+  --baseTextContrast: var(--mauve-12);
 
   --admonitionTipBg: var(--cyan4);
   --admonitionTipBorder: var(--cyan8);
@@ -40,8 +40,8 @@
   --admonitionDangerBg: var(--red4);
   --admonitionDangerBorder: var(--red8);
 
-  --admonitionNoteBg: var(--mauve4);
-  --admonitionNoteBorder: var(--mauve8);
+  --admonitionNoteBg: var(--mauve-4);
+  --admonitionNoteBorder: var(--mauve-8);
 
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
diff --git a/src/examples/directives.tsx b/src/examples/directives.tsx
index 7907f785..a9f203c3 100644
--- a/src/examples/directives.tsx
+++ b/src/examples/directives.tsx
@@ -39,6 +39,7 @@ import { TextDirective, Directives, LeafDirective, directiveFromMarkdown, direct
 import { directive } from 'micromark-extension-directive'
 import { ElementNode } from 'lexical'
 import { usePublisher } from '@mdxeditor/gurx'
+import { YoutubeDirectiveDescriptor } from './_boilerplate'
 
 const youtubeMarkdown = `
 This should be an youtube video:
@@ -88,7 +89,7 @@ export const Youtube: React.FC = () => {
     <MDXEditor
       markdown={youtubeMarkdown}
       plugins={[
-        directivesPlugin({ directiveDescriptors: [] }),
+        directivesPlugin({ directiveDescriptors: [YoutubeDirectiveDescriptor] }),
         toolbarPlugin({
           toolbarContents: () => {
             return <YouTubeButton />