From 7df4d3afb2c8176bd3e0bf29771ab2f7a016d148 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 6 Apr 2022 15:47:16 +0200
Subject: [PATCH] add colors for json

---
 packages/design-system/theme/src/_tokens.scss | 11 ++++++++++
 packages/editor-ui/src/components/RunData.vue | 20 +++++++++----------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/design-system/theme/src/_tokens.scss b/packages/design-system/theme/src/_tokens.scss
index 88e94353a3..74e0ed5336 100644
--- a/packages/design-system/theme/src/_tokens.scss
+++ b/packages/design-system/theme/src/_tokens.scss
@@ -329,6 +329,17 @@
 		var(--color-canvas-background-l)
 	);
 
+	--color-json-default: #5045A1;
+	--color-json-null:  var(--color-danger);
+	--color-json-boolean: #1d8ce0;
+	--color-json-number: #1d8ce0;
+	--color-json-string: #5045A1;
+	--color-json-key: var(--color-text-dark);
+	--color-json-brackets: var(--color-text-dark);
+	--color-json-brackets-hover: #1890ff;
+	--color-json-line: #bfcbd9;
+	--color-json-highlight: #EBEDF3;
+
 	--border-radius-xlarge: 12px;
 	--border-radius-large: 8px;
 	--border-radius-base: 4px;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index b5f664ec09..45546b0821 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -957,43 +957,43 @@ export default mixins(
 
 <style lang="scss">
 .vjs-tree {
-	color: #5045A1;
+	color: var(--color-json-default);
 }
 
 .vjs-tree.is-highlight-selected {
-	background-color: #EBEDF3;
+	background-color: var(--color-json-highlight);
 }
 
 .vjs-tree .vjs-value__null {
-	color: var(--color-danger);
+	color: var(--color-json-null);
 }
 
 .vjs-tree .vjs-value__boolean {
-	color: #1d8ce0;
+	color: var(--color-json-boolean);
 }
 
 .vjs-tree .vjs-value__number {
-	color: #1d8ce0;
+	color: var(--color-json-number);
 }
 
 .vjs-tree .vjs-value__string {
-	color: #5045A1;
+	color: var(--color-json-string);
 }
 
 .vjs-tree .vjs-key {
-	color: var(--color-text-dark);
+	color: var(--color-json-key);
 }
 
 .vjs-tree .vjs-tree__brackets {
-	color: var(--color-text-dark);
+	color: var(--color-json-brackets);
 }
 
 .vjs-tree .vjs-tree__brackets:hover {
-	color: #1890ff
+	color: var(--color-json-brackets-hover);
 }
 
 .vjs-tree .vjs-tree__content.has-line {
-	border-left: 1px dotted #bfcbd9
+	border-left: 1px dotted var(--color-json-line);
 }
 
 </style>