fix darkmode

packages/compass-components/src/hooks/use-confirmation.stories.mdx

@@ -5,6 +5,7 @@ import {
   showPrompt,
   ConfirmationModalVariant,
 } from './use-confirmation';
+import Button from '@leafygreen-ui/button';
 
 <Meta title="Hooks/useConfirmationModal" component={ConfirmationModalArea} />
 
@@ -72,7 +73,7 @@ function MyComponent() {
 
     return (
       <ConfirmationModalArea>
-        <button onClick={handleClick}>Show Confirmation</button>
+        <Button onClick={handleClick}>Show Confirmation</Button>
       </ConfirmationModalArea>
     );
 
@@ -96,7 +97,7 @@ function MyComponent() {
 
     return (
       <ConfirmationModalArea>
-        <button onClick={handleClick}>Delete Database</button>
+        <Button onClick={handleClick}>Delete Database</Button>
       </ConfirmationModalArea>
     );
 
@@ -121,7 +122,7 @@ function MyComponent() {
 
     return (
       <ConfirmationModalArea>
-        <button onClick={handleClick}>Dangerous Action</button>
+        <Button onClick={handleClick}>Dangerous Action</Button>
       </ConfirmationModalArea>
     );
 
@@ -145,7 +146,7 @@ function MyComponent() {
 
     return (
       <ConfirmationModalArea>
-        <button onClick={handleClick}>Show Prompt</button>
+        <Button onClick={handleClick}>Show Prompt</Button>
       </ConfirmationModalArea>
     );
 

packages/compass-components/src/hooks/use-toast.stories.mdx

@@ -1,5 +1,6 @@
 import { Meta, Story, Controls } from '@storybook/blocks';
 import { ToastArea, openToast } from './use-toast';
+import Button from '@leafygreen-ui/button';
 
 <Meta title="Hooks/useToast" component={ToastArea} />
 
@@ -23,7 +24,7 @@ function MyComponent() {
 
   return (
     <ToastArea>
-      <button onClick={handleSuccess}>Show Success Toast</button>
+      <Button onClick={handleSuccess}>Show Success Toast</Button>
     </ToastArea>
   );
 }
@@ -58,7 +59,7 @@ function MyComponent() {
 
     return (
       <ToastArea>
-        <button onClick={handleClick}>Show Success Toast</button>
+        <Button onClick={handleClick}>Show Success Toast</Button>
       </ToastArea>
     );
 
@@ -80,7 +81,7 @@ function MyComponent() {
 
     return (
       <ToastArea>
-        <button onClick={handleClick}>Show Error Toast</button>
+        <Button onClick={handleClick}>Show Error Toast</Button>
       </ToastArea>
     );
 
@@ -111,7 +112,7 @@ function MyComponent() {
 
     return (
       <ToastArea>
-        <button onClick={handleClick}>Show Progress Toast</button>
+        <Button onClick={handleClick}>Show Progress Toast</Button>
       </ToastArea>
     );
 
@@ -128,13 +129,13 @@ function MyComponent() {
         variant: 'note',
         title: 'New version available',
         description: 'A new version of the application is ready to install',
-        actionElement: <button onClick={() => console.log('Update clicked')}>Update Now</button>
+        actionElement: <Button onClick={() => console.log('Update clicked')}>Update Now</Button>
       });
     };
 
     return (
       <ToastArea>
-        <button onClick={handleClick}>Show Toast with Action</button>
+        <Button onClick={handleClick}>Show Toast with Action</Button>
       </ToastArea>
     );