(refactor) Ward: Refactor styling imports and use Carbon spacing toke…

…ns (#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.

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;
 }

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;

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;