diff --git a/src/WindowMockup/WindowMockup.stories.tsx b/src/WindowMockup/WindowMockup.stories.tsx
index 93725b2d..6c820bb4 100644
--- a/src/WindowMockup/WindowMockup.stories.tsx
+++ b/src/WindowMockup/WindowMockup.stories.tsx
@@ -3,7 +3,6 @@ import { Story, Meta } from '@storybook/react'
import WindowMockup, { WindowMockupProps } from '.'
import { componentColors } from '../constants'
-import { twMerge } from 'tailwind-merge'
const meta: Meta = {
title: `Mockup/WindowMockup`,
@@ -18,11 +17,13 @@ const meta: Meta = {
export default meta
-const Template: Story = ({ children = 'Hello!', ...rest }) => (
-
- {children}
-
-)
+const Template: Story
= (args) => {
+ return (
+
+ Hello!
+
+ )
+}
export const Default = Template.bind({})
Default.args = {}
diff --git a/src/styles.css b/src/styles.css
index b5c61c95..5fac10d2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,21 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+:root {
+ --base-content: theme('colors.base-content');
+ --base-100: theme('colors.base-100');
+ --base-200: theme('colors.base-200');
+ --alpha: 0.2;
+}
+
+/* FIXME: this class should add the polka-dotted background to story previews.
+ * however we cannot add transparency to the base-content color variable.
+ */
+.preview {
+ background: radial-gradient(
+ var(--base-100), 0.5px,
+ var(--base-200) 0.5px
+ );
+ background-size: 5px 5px;
+}