From a9ffef6db308d1a6d675d11276a7976da211f795 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 6 Apr 2022 16:11:27 +0200
Subject: [PATCH] add color json keys

---
 .../design-system/src/styleguide/colors.stories.mdx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/design-system/src/styleguide/colors.stories.mdx b/packages/design-system/src/styleguide/colors.stories.mdx
index 19983ba32a..d92c2ff764 100644
--- a/packages/design-system/src/styleguide/colors.stories.mdx
+++ b/packages/design-system/src/styleguide/colors.stories.mdx
@@ -154,3 +154,15 @@ import ColorCircles from './ColorCircles.vue';
 		}}
 	</Story>
 </Canvas>
+
+
+<Canvas>
+	<Story name="json">
+		{{
+			template: `<color-circles :colors="['--color-json-default', '--color-json-null', '--color-json-boolean', '--color-json-number', '--color-json-string', '--color-json-key', '--color-json-brackets', '--color-json-brackets-hover', '--color-json-line', '--color-json-highlight']" />`,
+			components: {
+				ColorCircles,
+			},
+		}}
+	</Story>
+</Canvas>