(refactor) Update Carbon styling imports and tokens

openmrs · Jul 29, 2024 · 8ee1e33 · 8ee1e33
1 parent 1e63545
commit 8ee1e33
Show file tree

Hide file tree

Showing 133 changed files with 1,421 additions and 1,382 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,7 +1,5 @@
 dist/
 node_modules/
-**/*.css
-**/*.scss
 **/*.md
 **/*.json
 packages/esm-form-entry-app/src/app/loader/loader.component.html
diff --git a/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.scss b/packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.scss
@@ -1,8 +1,10 @@
+@use '@carbon/layout';
+
 .toggleContainer {
   display: flex;
   align-items: center;
   height: var(--workspace-header-height);
-  margin-right: 0.5rem;
+  margin-right: layout.$spacing-03;
 }
 
 :global(.omrs-breakpoint-lt-desktop) {

diff --git a/packages/esm-form-engine-app/src/form-renderer/form-error.scss b/packages/esm-form-engine-app/src/form-renderer/form-error.scss
@@ -1,45 +1,44 @@
-@use '@carbon/styles/scss/spacing';
+@use '@carbon/layout';
 @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
+@use '@carbon/type';
 
 .errorContainer {
   display: flex;
   justify-content: center;
-  margin-top: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
 }
 
 .formErrorCard {
   background-color: colors.$gray-10;
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   min-width: 23rem;
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
 .errorTitle {
-  @include type.type-style("heading-compact-02");
-  margin-bottom: spacing.$spacing-04;
+  @include type.type-style('heading-compact-02');
+  margin-bottom: layout.$spacing-04;
 }
 
 .errorMessage {
-  @include type.type-style("body-long-01");
-  margin-bottom: spacing.$spacing-05;
+  @include type.type-style('body-long-01');
+  margin-bottom: layout.$spacing-05;
   color: colors.$gray-70;
   display: flex;
   align-items: center;
 
-  &>button {
-    padding: 0 0 0 spacing.$spacing-01 !important;
+  & > button {
+    padding-left: layout.$spacing-01 !important;
   }
 }
 
-
 .separator {
   @include type.type-style('body-01');
   color: colors.$gray-90;
   width: 12rem;
-  margin: spacing.$spacing-03 0;
+  margin: layout.$spacing-03 0;
   overflow: hidden;
   text-align: center;
   color: colors.$gray-70;
@@ -48,7 +47,7 @@
 .separator::before,
 .separator::after {
   background-color: colors.$gray-40;
-  content: "";
+  content: '';
   display: inline-block;
   height: 1px;
   position: relative;
@@ -57,18 +56,18 @@
 }
 
 .separator::before {
-  right: 1rem;
+  right: layout.$spacing-05;
   margin-left: -50%;
 }
 
 .separator::after {
-  left: 1rem;
+  left: layout.$spacing-05;
   margin-right: -50%;
 }
 
 .list {
-  margin-left: spacing.$spacing-02;
-  color:colors.$blue-60;
+  margin-left: layout.$spacing-02;
+  color: colors.$blue-60;
   text-decoration: underline;
   cursor: pointer;
-}
+}
diff --git a/packages/esm-form-engine-app/src/form-renderer/form-renderer.scss b/packages/esm-form-engine-app/src/form-renderer/form-renderer.scss
@@ -1,7 +1,3 @@
-@use '@carbon/colors';
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-
 .loaderContainer {
   height: 100vh;
 }

diff --git a/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.scss b/packages/esm-form-entry-app/src/app/fe-wrapper/fe-wrapper.component.scss
@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .error-tile {
   width: 60%;
@@ -10,7 +10,7 @@
   flex-flow: column wrap;
   align-items: center;
   justify-content: center;
-  padding: 1.5rem 0 1.75rem;
+  padding: layout.$spacing-06 0 1.75rem;
 }
 
 /* Tablet */
@@ -24,7 +24,7 @@
 }
 
 .helperText {
-  margin-top: 0.5rem;
+  margin-top: layout.$spacing-03;
   @include type.type-style('body-01');
   color: colors.$gray-90;
 }
@@ -38,9 +38,10 @@
   text-align: center;
 }
 
-.separator::before, .separator::after {
+.separator::before,
+.separator::after {
   background-color: colors.$gray-40;
-  content: "";
+  content: '';
   display: inline-block;
   height: 1px;
   position: relative;
@@ -49,18 +50,18 @@
 }
 
 .separator::before {
-  right: 1rem;
+  right: layout.$spacing-05;
   margin-left: -50%;
 }
 
 .separator::after {
-  left: 1rem;
+  left: layout.$spacing-05;
   margin-right: -50%;
 }
 
 .title-icon-size {
-  height: 0.8rem;
-  width: 0.8rem;
+  height: layout.$spacing-04;
+  width: layout.$spacing-04;
 }
 
 .no-errors {
@@ -71,7 +72,7 @@
   margin-top: -1px;
   width: 55%;
   height: 80%;
-  padding: 4px;
+  padding: layout.$spacing-02;
   overflow-y: scroll;
   overflow-x: hidden;
 }
@@ -88,8 +89,8 @@
 
 .error-content {
   border-top: 1px solid colors.$gray-20;
-  margin: -4px;
-  padding: 4px;
+  margin: -(layout.$spacing-02);
+  padding: layout.$spacing-02;
 }
 
 .error-title .closed {
@@ -98,8 +99,7 @@
 }
 
 .no-padding {
-  margin-left: -2rem;
-  margin-right: -2rem;
+  margin: 0 (-(layout.$spacing-07));
 }
 
 .center {
@@ -116,33 +116,33 @@
 }
 
 .button-set {
-  margin: 0 -2rem;
+  margin: 0 (-(layout.$spacing-07));
 }
 
 .button-set button {
-  height: 4rem;
+  height: layout.$spacing-10;
   align-items: baseline;
   min-width: 50%;
 }
 
 /* Desktop */
 :host-context(.omrs-breakpoint-gt-tablet) .form-container {
   height: 100%;
-  margin: 0 2rem;
+  margin: 0 layout.$spacing-07;
 }
 
 :host-context(.omrs-breakpoint-gt-tablet) .button-set {
-  padding: 0rem;
+  padding: 0;
 }
 
 /* Tablet */
 :host-context(.omrs-breakpoint-lt-desktop) .form-container {
   height: 100%;
-  margin: 0 2rem;
+  margin: 0 layout.$spacing-07;
 }
 
 :host-context(.omrs-breakpoint-lt-desktop) .button-set {
-  padding: 1.5rem 1rem;
+  padding: layout.$spacing-06 layout.$spacing-05;
   background-color: $ui-02;
 }
 
@@ -172,14 +172,14 @@
   flex-direction: column;
   width: 100%;
   row-gap: 0.625rem;
-  margin-top: 1rem;
-  padding-top: 1rem;
+  margin-top: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
   margin-left: 0.625rem;
-  @include type.type-style("body-short-01");
-  border-top: 1px solid #a8a8a8;
+  @include type.type-style('body-short-01');
+  border-top: 1px solid colors.$gray-40;
 
   & button {
     width: 100%;
-    padding: spacing.$spacing-04 spacing.$spacing-05;
+    padding: layout.$spacing-04 layout.$spacing-05;
   }
 }
diff --git a/packages/esm-form-entry-app/src/app/loader/loader.component.scss b/packages/esm-form-entry-app/src/app/loader/loader.component.scss
@@ -1,4 +1,6 @@
+@use '@carbon/layout';
+
 .spinner {
-  min-height: 1rem;
+  min-height: layout.$spacing-05;
   width: fit-content;
 }
diff --git a/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss b/packages/esm-generic-patient-widgets-app/src/obs-graph/obs-graph.scss
@@ -1,84 +1,85 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .label01 {
-  @include type.type-style("label-01");
+  @include type.type-style('label-01');
 }
 
 .bodyShort01 {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
 }
 
 .graphContainer {
   display: flex;
-  margin: 0rem spacing.$spacing-05;
+  margin: 0 layout.$spacing-05;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .conceptPickerTabs {
   flex-grow: 1;
-  margin: spacing.$spacing-03 0;
-  padding-right: spacing.$spacing-05;
+  margin: layout.$spacing-03 0;
+  padding-right: layout.$spacing-05;
 }
 
 .lineChartContainer {
   flex-grow: 4;
-  padding: 0 spacing.$spacing-05 spacing.$spacing-09;
+  padding: 0 layout.$spacing-05 layout.$spacing-09;
 
   :global(.cds--cc--layout-row) {
     height: 0;
   }
 
   :global(.layout-child) {
-    margin-top: spacing.$spacing-03;
+    margin-top: layout.$spacing-03;
   }
 }
 
 .conceptLabel {
   @extend .label01;
-  margin-bottom: spacing.$spacing-05;
+  margin-bottom: layout.$spacing-05;
   display: inline-block;
 }
 
 .verticalTabs {
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
   scroll-behavior: smooth;
 
   > ul {
     flex-direction: column !important;
   }
 
-  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item+.cds--tabs--scrollable__nav-item) {
-    margin-left: 0rem;
+  :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-item + .cds--tabs--scrollable__nav-item) {
+    margin-left: 0;
   }
 
   :global(.cds--tabs--scrollable .cds--tabs--scrollable__nav-link) {
     border-bottom: 0 !important;
-    border-left: 2px solid $color-gray-30;
+    border-left: layout.$spacing-01 solid $color-gray-30;
   }
 }
 
 .tab {
   outline: 0;
   outline-offset: 0;
 
-  &:active, &:focus {
-    outline: 2px solid var(--brand-03) !important;
+  &:active,
+  &:focus {
+    outline: layout.$spacing-01 solid var(--brand-03) !important;
   }
 
-  &[aria-selected="true"] {
+  &[aria-selected='true'] {
     border-left: 3px solid var(--brand-03);
     border-bottom: none;
     font-weight: 600;
-    margin-left: 0rem !important;
+    margin-left: 0 !important;
   }
 
-  &[aria-selected="false"] {
+  &[aria-selected='false'] {
     border-bottom: none;
-    border-left: 2px solid $ui-03;
-    margin-left: 0rem !important;
+    border-left: layout.$spacing-01 solid $ui-03;
+    margin-left: 0 !important;
   }
 }