fix: doc styles

shuriken-ui · Sep 2, 2023 · c034061 · c034061
1 parent d29d128
commit c034061
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/plugins/components/button/button.docs.mdx b/src/plugins/components/button/button.docs.mdx
@@ -22,7 +22,7 @@ Buttons are an essential part of any application. Shuriken UI buttons can have d
 
 Button shapes allow you to change the border radiuses.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.Straight} />
   <Story of={ButtonStories.Rounded} />
   <Story of={ButtonStories.Smooth} />
@@ -36,7 +36,7 @@ Button shapes allow you to change the border radiuses.
 
 Size allows you to change the size of the button.
 
-<div className="flex items-end gap-2">
+<div className="flex items-end gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.Sm} />
   <Story of={ButtonStories.Md} />
   <Story of={ButtonStories.Lg} />
@@ -48,7 +48,7 @@ Size allows you to change the size of the button.
 
 Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.SolidDefault} />
   <Story of={ButtonStories.SolidMuted} />
   <Story of={ButtonStories.SolidPrimary} />
@@ -64,7 +64,7 @@ Flavors represent the visual styles applied to a button. Below are examples of t
 
 Flavors represent the visual styles applied to a button. Below are examples of the pastel flavor.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.PastelPrimary} />
   <Story of={ButtonStories.PastelInfo} />
   <Story of={ButtonStories.PastelSuccess} />
@@ -78,7 +78,7 @@ Flavors represent the visual styles applied to a button. Below are examples of t
 
 Flavors represent the visual styles applied to a button. Below are examples of the outline flavor.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.OutlinePrimary} />
   <Story of={ButtonStories.OutlineInfo} />
   <Story of={ButtonStories.OutlineSuccess} />
@@ -92,7 +92,7 @@ Flavors represent the visual styles applied to a button. Below are examples of t
 
 Button can have shadows based on the selected color. Below are examples of flat static shadows.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.ShadowFlatDefault} />
   <Story of={ButtonStories.ShadowFlatMuted} />
   <Story of={ButtonStories.ShadowFlatPrimary} />
@@ -108,7 +108,7 @@ Button can have shadows based on the selected color. Below are examples of flat
 
 Buttons can have shadows based on the selected color. Below are examples of hover shadows.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.ShadowHoverDefault} />
   <Story of={ButtonStories.ShadowHoverMuted} />
   <Story of={ButtonStories.ShadowHoverPrimary} />
@@ -127,7 +127,7 @@ Buttons can have shadows based on the selected color. Below are examples of hove
 
 Buttons can be shown in a loading state. The loading indicator informs the user that something is being loaded.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.LoadingDefault} />
   <Story of={ButtonStories.LoadingMuted} />
   <Story of={ButtonStories.LoadingPrimary} />
@@ -143,7 +143,7 @@ Buttons can be shown in a loading state. The loading indicator informs the user
 
 Buttons can be shown in a disabled state. They are a bit opaque and cannot be clicked to peform an action.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.DisabledDefault} />
   <Story of={ButtonStories.DisabledMuted} />
   <Story of={ButtonStories.DisabledPrimary} />
@@ -162,7 +162,7 @@ Buttons can be shown in a disabled state. They are a bit opaque and cannot be cl
 
 Button have a default slot that serves as wrapper for their inner content.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.LabelSlot} />
 </div>
 
@@ -172,7 +172,7 @@ Button have a default slot that serves as wrapper for their inner content.
 
 Buttons can have icons, both on the left and on the right. Use svg icons inside the button slot to render an icon button.
 
-<div className="flex gap-2">
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
   <Story of={ButtonStories.IconDefault} />
   <Story of={ButtonStories.IconMuted} />
   <Story of={ButtonStories.IconPrimary} />