From 4adbb19e68a0719292891db9d2399948962459e6 Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Wed, 11 Oct 2023 15:35:35 +0200
Subject: [PATCH] fix: enable CssVariables

---
 src/PluginWrapper.js                                         | 3 ++-
 src/components/Visualization/styles/Visualization.module.css | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/PluginWrapper.js b/src/PluginWrapper.js
index 4600a1968..1e36d43a3 100644
--- a/src/PluginWrapper.js
+++ b/src/PluginWrapper.js
@@ -1,5 +1,5 @@
 import { useCacheableSection, CacheableSection } from '@dhis2/app-runtime'
-import { CenteredContent, CircularLoader, Layer } from '@dhis2/ui'
+import { CenteredContent, CircularLoader, CssVariables, Layer } from '@dhis2/ui'
 import postRobot from '@krakenjs/post-robot'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
@@ -114,6 +114,7 @@ const PluginWrapper = () => {
             >
                 <Visualization {...propsFromParent} />
             </CacheableSectionWrapper>
+            <CssVariables colors spacers elevations />
         </div>
     ) : null
 }
diff --git a/src/components/Visualization/styles/Visualization.module.css b/src/components/Visualization/styles/Visualization.module.css
index 574dc1de4..4a863be83 100644
--- a/src/components/Visualization/styles/Visualization.module.css
+++ b/src/components/Visualization/styles/Visualization.module.css
@@ -6,7 +6,7 @@
 }
 
 .legendKeyWrapper {
-    border: 1px solid #d5dde5; /* FIXME: should use var(--colors-grey400) but the color is not being parsed */
+    border: 1px solid var(--colors-grey400);
     overflow: auto;
     height: 100%;
 }
@@ -28,7 +28,7 @@
 .pluginContainer {
     display: flex;
     justify-content: space-between;
-    gap: 4px; /* FIXME: should use var(--spacers-dp4) but the spacer is not being parsed */
+    gap: var(--spacers-dp4);
     min-width: 0;
     flex-grow: 1;
 }