fix(sb): improve styles

itsjavi · Aug 31, 2024 · 82f80f4 · 82f80f4
1 parent 6e21557
commit 82f80f4
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 17 deletions.
diff --git a/.storybook/preview.css b/.storybook/preview.css
@@ -1,19 +1,6 @@
-.dark .sbdocs {
-  background: #000 !important;
-  color: #fff !important;
-}
 
-.dark .sbdocs-title, 
-.dark .sb-anchor h2, 
-.dark .sb-anchor h3, 
-.dark .sb-anchor h4, 
-.dark .docblock-argstable thead,
-.dark [class^="css-"] thead th {
-  color: #fff !important;
-}
 
-.sbdocs-preview,
-.dark .sbdocs-preview {
+.sbdocs-preview {
   background: var(--background) !important;
   color: var(--foreground) !important;
 }

diff --git a/src/globals.css b/src/globals.css
@@ -41,6 +41,7 @@
   }
 
   body {
-    @apply bg-background text-foreground;
+    background: var(--background);
+    color: var(--foreground);
   }
 }
diff --git a/src/stories/collapsible.stories.tsx b/src/stories/collapsible.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
 import { Button } from '../components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../components/ui/collapsible';
 
 const meta: Meta<typeof Collapsible> = {
   title: 'UI/Collapsible',
@@ -18,7 +18,7 @@ export const Default: Story = {
         <Button variant="outline">Toggle</Button>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="p-4 mt-2 rounded-md bg-slate-100">
+        <div className="p-4 mt-2 rounded-md bg-background">
           Content that can be collapsed
         </div>
       </CollapsibleContent>