From a14dade918a72310f8f76975abf16f43c6c80f7b Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Wed, 23 Oct 2024 20:29:54 +0300
Subject: [PATCH] (refactor) Ward: Refactor styling imports and use Carbon
 spacing tokens (#1352)

This PR refactors some left over some CSS carbon spacing module imports to import from `@carbon/layout` instead of `@carbon/styles/scss/spacing`. It also replaces CSS imports from
the vars library in the framework that use the old `@import` directive, replacing them with the `@use` directive.
---
 .../esm-ward-app/src/ward-view-header/ward-metric.scss | 10 +++++-----
 .../src/ward-view-header/ward-metrics.scss             |  3 +--
 packages/esm-ward-app/src/ward-view/ward-view.scss     |  2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/esm-ward-app/src/ward-view-header/ward-metric.scss b/packages/esm-ward-app/src/ward-view-header/ward-metric.scss
index f50f0cf8a..c534cb470 100644
--- a/packages/esm-ward-app/src/ward-view-header/ward-metric.scss
+++ b/packages/esm-ward-app/src/ward-view-header/ward-metric.scss
@@ -1,9 +1,9 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metric {
-  margin-left: spacing.$spacing-05;
+  margin-left: layout.$spacing-05;
   display: flex;
   align-items: end;
   gap: 5px;
@@ -20,6 +20,6 @@
 }
 
 .skeleton {
-  height: 15px;
-  width: 15px;
+  height: layout.$spacing-05;
+  width: layout.$spacing-05;
 }
diff --git a/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss b/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss
index 1888baa6e..975236715 100644
--- a/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss
+++ b/packages/esm-ward-app/src/ward-view-header/ward-metrics.scss
@@ -1,5 +1,4 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .metricsContainer {
   display: flex;
diff --git a/packages/esm-ward-app/src/ward-view/ward-view.scss b/packages/esm-ward-app/src/ward-view/ward-view.scss
index 84de64a52..0885ec7eb 100644
--- a/packages/esm-ward-app/src/ward-view/ward-view.scss
+++ b/packages/esm-ward-app/src/ward-view/ward-view.scss
@@ -1,5 +1,5 @@
 @use '@carbon/layout';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wardView {
   background-color: #e4e4e4;