From 165eda64eb4a9b93a3943d8138518b48b1f38793 Mon Sep 17 00:00:00 2001
From: mihai-peteu <mihai.peteu@konghq.com>
Date: Wed, 18 Sep 2024 11:46:15 -0400
Subject: [PATCH] feat: tokenize dashboard renderer and associated components
 [MA-2963]

---
 .../dashboard-renderer/src/components/DashboardRenderer.vue | 6 +++---
 .../src/components/GoldenSignalsRenderer.vue                | 2 +-
 .../dashboard-renderer/src/components/layout/GridLayout.vue | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
index 0703b6b093..b62774a115 100644
--- a/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/DashboardRenderer.vue
@@ -157,10 +157,10 @@ const mergedContext = computed<DashboardRendererContextInternal>(() => {
 <style lang="scss" scoped>
 .kong-ui-public-dashboard-renderer {
   .tile-container {
-    border: 1px solid $kui-color-border;
-    border-radius: $kui-border-radius-20;
+    border: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
+    border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
     height: 100%;
-    padding: $kui-space-70;
+    padding: var(--kui-space-70, $kui-space-70);
   }
 }
 </style>
diff --git a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
index b12f49a51d..0a594d12ab 100644
--- a/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
+++ b/packages/analytics/dashboard-renderer/src/components/GoldenSignalsRenderer.vue
@@ -74,7 +74,7 @@ const options = computed<ProviderProps>(() => ({
     .metricscard {
       @media (min-width: ($kui-breakpoint-phablet - 1px)) {
         &:not(:last-of-type) {
-          border-right: $kui-border-width-10 solid $kui-color-border;
+          border-right: var(--kui-border-width-10, $kui-border-width-10) solid var(--kui-color-border, $kui-color-border);
         }
       }
     }
diff --git a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
index 3c0a22903a..28ec089a45 100644
--- a/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
+++ b/packages/analytics/dashboard-renderer/src/components/layout/GridLayout.vue
@@ -97,7 +97,7 @@ const gridCells = computed<Cell<T>[]>(() => {
 <style lang="scss" scoped>
 .kong-ui-public-grid-layout {
   display: grid;
-  gap: $kui-space-70;
+  gap: var(--kui-space-70, $kui-space-70);
   grid-template-columns: repeat(v-bind('gridSize.cols'), 1fr);
   grid-template-rows: v-bind('rowDefinition');
   width: 100%;
@@ -117,7 +117,7 @@ const gridCells = computed<Cell<T>[]>(() => {
       width: auto !important;
 
       &:not(:first-child) {
-        margin-top: $kui-space-70;
+        margin-top: var(--kui-space-70, $kui-space-70);
       }
     }