Add some documentation on styling

Author: craquet

README.md

@@ -62,7 +62,7 @@ Then simply pass your custom component to the search component.
 ### Styling
 
 Styling is done using tailwind and css variables. Feel free to override these variables in your own CSS.
-
+More information can be found in the Storybook.
 
 ## Contributing
 

src/stories/3 Styling.mdx

@@ -0,0 +1,80 @@
+import { Meta, Source } from "@storybook/blocks"
+
+<Meta title="Styling" />
+
+# Styling
+
+This component uses Tailwind and shadcn/ui for styling and structuring the component. You can customize many aspects of
+the theme, like colors and edge radius. You can also switch between dark and light mode by using the `dark` prop on
+`<ReactSearchComponent dark={currentTheme === "dark"} />`
+
+## CSS Variables
+
+The following CSS variables can be overwritten to match your needs. Shown are the default values. Make sure to also
+**supply your color values in HSL**.
+
+> **Note:** Some variables might currently not be in use
+
+<Source code={`
+--rfs-background: 0 0% 100%;
+--rfs-foreground: 0 0% 3.9%;
+--rfs-card: 0 0% 100%;
+--rfs-card-foreground: 0 0% 3.9%;
+--rfs-popover: 0 0% 100%;
+--rfs-popover-foreground: 0 0% 3.9%;
+--rfs-primary: 215 100% 50%;
+--rfs-primary-foreground: 0 0% 98%;
+--rfs-secondary: 0 0% 96.1%;
+--rfs-secondary-foreground: 0 0% 9%;
+--rfs-muted: 0 0% 96.1%;
+--rfs-muted-foreground: 0 0% 45.1%;
+--rfs-accent: 0 0% 96.1%;
+--rfs-accent-foreground: 0 0% 9%;
+--rfs-destructive: 0 84.2% 60.2%;
+--rfs-destructive-foreground: 0 0% 98%;
+--rfs-border: 0 0% 89.8%;
+--rfs-input: 0 0% 89.8%;
+--rfs-ring: 0 0% 3.9%;
+--rfs-chart-1: 12 76% 61%;
+--rfs-chart-2: 173 58% 39%;
+--rfs-chart-3: 197 37% 24%;
+--rfs-chart-4: 43 74% 66%;
+--rfs-chart-5: 27 87% 67%;
+
+--rfs-radius: 0.5rem;
+
+/* Only required if you want to use dark mode */
+/* You only have to specify variables you want to change (compared to light mode) */
+.dark {
+    --rfs-background: 0 0% 3.9%;
+    --rfs-foreground: 0 0% 98%;
+    --rfs-card: 0 0% 3.9%;
+    --rfs-card-foreground: 0 0% 98%;
+    --rfs-popover: 0 0% 3.9%;
+    --rfs-popover-foreground: 0 0% 98%;
+    --rfs-primary: 215 100% 40%;
+    --rfs-primary-foreground: 0 0% 98%;
+    --rfs-secondary: 0 0% 14.9%;
+    --rfs-secondary-foreground: 0 0% 98%;
+    --rfs-muted: 0 0% 14.9%;
+    --rfs-muted-foreground: 0 0% 63.9%;
+    --rfs-accent: 0 0% 14.9%;
+    --rfs-accent-foreground: 0 0% 98%;
+    --rfs-destructive: 0 62.8% 30.6%;
+    --rfs-destructive-foreground: 0 0% 98%;
+    --rfs-border: 0 0% 14.9%;
+    --rfs-input: 0 0% 14.9%;
+    --rfs-ring: 0 0% 83.1%;
+    --rfs-chart-1: 220 70% 50%;
+    --rfs-chart-2: 160 60% 45%;
+    --rfs-chart-3: 30 80% 55%;
+    --rfs-chart-4: 280 65% 60%;
+    --rfs-chart-5: 340 75% 55%;
+}
+`} />
+
+## CSS classes
+
+CSS classes with prefix `sui-` are specified in the `elastic-ui.css` file, these classes can be directly overwritten in your CSS.
+
+Tailwind classes start with `rfs-`. Colors should be overwritten by using the color variables above.