From a5897dc63cfcba253a3edd3c1b062a6a8c2123af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Jaenisch?= <andre.jaenisch@posteo.de>
Date: Thu, 15 Feb 2024 20:44:25 +0100
Subject: [PATCH] docs: document color palettes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Right now it is using the default Skeleton.dev palette.
I feel like we need to adjust it to our needs.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
---
 stories/ColorPalette.mdx | 120 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 stories/ColorPalette.mdx

diff --git a/stories/ColorPalette.mdx b/stories/ColorPalette.mdx
new file mode 100644
index 0000000..15a4171
--- /dev/null
+++ b/stories/ColorPalette.mdx
@@ -0,0 +1,120 @@
+import { ColorItem, ColorPalette, Meta } from '@storybook/blocks';
+
+<Meta title="Colors" />
+
+Consider the value at 500 to be the default.
+
+<ColorPalette>
+	<ColorItem
+		title="color.primary"
+		subtitle="Primary"
+		colors={{
+			50: 'rgb(var(--color-primary-50))',
+			100: 'rgb(var(--color-primary-100))',
+			200: 'rgb(var(--color-primary-200))',
+			300: 'rgb(var(--color-primary-300))',
+			400: 'rgb(var(--color-primary-400))',
+			500: 'rgb(var(--color-primary-500))',
+			600: 'rgb(var(--color-primary-600))',
+			700: 'rgb(var(--color-primary-700))',
+			800: 'rgb(var(--color-primary-800))',
+			900: 'rgb(var(--color-primary-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.secondary"
+		subtitle="Secondary"
+		colors={{
+			50: 'rgb(var(--color-secondary-50))',
+			100: 'rgb(var(--color-secondary-100))',
+			200: 'rgb(var(--color-secondary-200))',
+			300: 'rgb(var(--color-secondary-300))',
+			400: 'rgb(var(--color-secondary-400))',
+			500: 'rgb(var(--color-secondary-500))',
+			600: 'rgb(var(--color-secondary-600))',
+			700: 'rgb(var(--color-secondary-700))',
+			800: 'rgb(var(--color-secondary-800))',
+			900: 'rgb(var(--color-secondary-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.tertiary"
+		subtitle="Tertiary"
+		colors={{
+			50: 'rgb(var(--color-tertiary-50))',
+			100: 'rgb(var(--color-tertiary-100))',
+			200: 'rgb(var(--color-tertiary-200))',
+			300: 'rgb(var(--color-tertiary-300))',
+			400: 'rgb(var(--color-tertiary-400))',
+			500: 'rgb(var(--color-tertiary-500))',
+			600: 'rgb(var(--color-tertiary-600))',
+			700: 'rgb(var(--color-tertiary-700))',
+			800: 'rgb(var(--color-tertiary-800))',
+			900: 'rgb(var(--color-tertiary-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.success"
+		subtitle="Success"
+		colors={{
+			50: 'rgb(var(--color-success-50))',
+			100: 'rgb(var(--color-success-100))',
+			200: 'rgb(var(--color-success-200))',
+			300: 'rgb(var(--color-success-300))',
+			400: 'rgb(var(--color-success-400))',
+			500: 'rgb(var(--color-success-500))',
+			600: 'rgb(var(--color-success-600))',
+			700: 'rgb(var(--color-success-700))',
+			800: 'rgb(var(--color-success-800))',
+			900: 'rgb(var(--color-success-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.warning"
+		subtitle="Warning"
+		colors={{
+			50: 'rgb(var(--color-warning-50))',
+			100: 'rgb(var(--color-warning-100))',
+			200: 'rgb(var(--color-warning-200))',
+			300: 'rgb(var(--color-warning-300))',
+			400: 'rgb(var(--color-warning-400))',
+			500: 'rgb(var(--color-warning-500))',
+			600: 'rgb(var(--color-warning-600))',
+			700: 'rgb(var(--color-warning-700))',
+			800: 'rgb(var(--color-warning-800))',
+			900: 'rgb(var(--color-warning-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.error"
+		subtitle="Error"
+		colors={{
+			50: 'rgb(var(--color-error-50))',
+			100: 'rgb(var(--color-error-100))',
+			200: 'rgb(var(--color-error-200))',
+			300: 'rgb(var(--color-error-300))',
+			400: 'rgb(var(--color-error-400))',
+			500: 'rgb(var(--color-error-500))',
+			600: 'rgb(var(--color-error-600))',
+			700: 'rgb(var(--color-error-700))',
+			800: 'rgb(var(--color-error-800))',
+			900: 'rgb(var(--color-error-900))'
+		}}
+	/>
+	<ColorItem
+		title="color.surface"
+		subtitle="Surface"
+		colors={{
+			50: 'rgb(var(--color-surface-50))',
+			100: 'rgb(var(--color-surface-100))',
+			200: 'rgb(var(--color-surface-200))',
+			300: 'rgb(var(--color-surface-300))',
+			400: 'rgb(var(--color-surface-400))',
+			500: 'rgb(var(--color-surface-500))',
+			600: 'rgb(var(--color-surface-600))',
+			700: 'rgb(var(--color-surface-700))',
+			800: 'rgb(var(--color-surface-800))',
+			900: 'rgb(var(--color-surface-900))'
+		}}
+	/>
+</ColorPalette>