Fixup

e2e/specs/login.spec.ts

@@ -18,7 +18,7 @@ test('Login as Admin user', async ({ page }) => {
   });
 
   await test.step('And I enter my password', async () => {
-    await page.getByLabel(/password/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
+    await page.getByLabel(/^password$/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
   });
 
   await test.step('And I click the `Log in` button', async () => {

packages/apps/esm-devtools-app/src/devtools/devtools-popup.styles.scss

@@ -1,3 +1,4 @@
+@use '@carbon/layout';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .popup {
@@ -19,20 +20,20 @@
 
 .tabList {
   position: fixed;
-  height: 4rem;
+  height: layout.$spacing-10;
   width: 100%;
   z-index: 1000;
   background-color: black;
 }
 
 .tabPanels {
-  padding: 1.5rem;
+  padding: layout.$spacing-06;
 }
 
 .farRight {
   position: absolute;
-  right: 24px;
-  top: 16px;
+  right: layout.$spacing-06;
+  top: layout.$spacing-05;
   display: flex;
   z-index: 1000;
 }

packages/apps/esm-devtools-app/src/devtools/devtools.component.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { type AppProps } from 'single-spa';
 import { importMapOverridden } from './import-map.component';
 import DevToolsPopup from './devtools-popup.component';
-import styles from './devtools.styles.css';
+import styles from './devtools.styles.scss';
 
 export default function Root(props: AppProps) {
   return window.spaEnv === 'development' || Boolean(localStorage.getItem('openmrs:devtools')) ? (

packages/apps/esm-devtools-app/src/devtools/devtools.styles.scss

@@ -0,0 +1,20 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.devtoolsTriggerButton {
+  z-index: 7900;
+  background-color: colors.$gray-30;
+  height: layout.$spacing-08 !important;
+  width: layout.$spacing-08 !important;
+  bottom: layout.$spacing-11;
+  right: layout.$spacing-02;
+  position: fixed;
+  border-radius: layout.$spacing-02;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.overridden {
+  background-color: colors.$red-60;
+}

packages/apps/esm-devtools-app/src/devtools/import-map-list/import-map.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .spacer {
-  margin: 0.5rem 0;
+  margin: layout.$spacing-03 0;
 }

packages/apps/esm-devtools-app/src/devtools/import-map-list/list.scss

@@ -25,7 +25,7 @@
 
 .imoTable {
   // 50vh is the container size - size of the header
-  max-height: calc(50vh - layout.$spacing-09 - 12px);
+  max-height: calc(50vh - layout.$spacing-09 - layout.$spacing-04);
 }
 
 .imoStatus {

packages/apps/esm-help-menu-app/src/help-menu/help-popup.styles.scss

@@ -5,15 +5,15 @@
 .popup {
   position: fixed;
   flex: auto;
-  bottom: 2rem;
-  right: 3rem;
+  bottom: layout.$spacing-07;
+  right: layout.$spacing-09;
   width: 11rem;
   z-index: 8000;
   background-color: $ui-02;
   gap: layout.$spacing-05;
   padding: layout.$spacing-02;
   margin: layout.$spacing-02;
-  box-shadow: 0 12px 24px 0 $ui-03;
+  box-shadow: 0 layout.$spacing-04 layout.$spacing-06 0 $ui-03;
 }
 
 .popup {

packages/apps/esm-help-menu-app/src/help-menu/help.styles.scss

@@ -4,14 +4,14 @@
 .helpMenuButton {
   z-index: 7900;
   background-color: white;
-  height: 2.5rem !important;
-  width: 2.5rem !important;
+  height: layout.$spacing-08 !important;
+  width: layout.$spacing-08 !important;
   bottom: layout.$spacing-05;
   position: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
-  right: 0.25rem;
+  right: layout.$spacing-02;
   border: none;
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.1),

packages/apps/esm-implementer-tools-app/src/configuration/configuration.styles.scss

@@ -1,50 +1,8 @@
 @use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/react/scss/themes';
-@use '@carbon/react/scss/theme';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.productiveHeading01 {
-  @include type.type-style('heading-compact-01');
-}
-
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-}
-
-.bodyShort01 {
-  @include type.type-style('body-compact-01');
-}
-
-.toolStyles {
-  background-color: transparent;
-}
-
-// Chevron button - implementer-tools component
-.chevronImplementerToolsButton {
-  position: fixed;
-  bottom: 0;
-  left: calc(50vw - layout.$spacing-05);
-  z-index: 9999;
-
-  div {
-    background-color: $ui-02;
-    width: layout.$spacing-07;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-
-  div:hover {
-    padding: layout.$spacing-03 0;
-  }
-}
-
-.darkTheme {
-  @include theme.theme(themes.$g90);
-}
-
 .tools {
   width: 100%;
   background-color: theme.$background;
@@ -65,14 +23,14 @@
 .row {
   display: flex;
   flex-flow: row wrap;
-  margin: 0 -1rem;
+  margin: 0 (-(layout.$spacing-05));
 
   :global(.cds--col) {
     max-width: 100%;
     flex-basis: 0;
     flex-grow: 1;
     width: 100%;
-    padding: 0 1rem;
+    padding: 0 layout.$spacing-05;
   }
 }
 
@@ -118,21 +76,21 @@
   width: 35%;
   background-color: theme.$background;
   color: theme.$text-secondary;
-  padding: layout.$spacing-05 2em;
+  padding: layout.$spacing-05 layout.$spacing-07;
   font-size: 12pt;
   overflow-wrap: break-word;
   overflow-y: auto;
 }
 
 .configTreePane :global(.cds--text-input-wrapper) {
-  min-width: 8em;
+  min-width: 8rem;
 }
 
 .toggleToolbarButton {
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  padding: 0.25rem;
+  padding: layout.$spacing-02;
 }
 
 .toggleButtons {
@@ -147,6 +105,6 @@
   justify-content: flex-end;
 
   > button {
-    margin: 0 1rem;
+    margin: 0 layout.$spacing-05;
   }
 }

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/description.styles.scss

@@ -1,50 +1,11 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '@carbon/react/scss/themes';
-@use '@carbon/react/scss/theme';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .productiveHeading01 {
   @include type.type-style('heading-compact-01');
 }
 
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-}
-
-.bodyShort01 {
-  @include type.type-style('body-compact-01');
-}
-
-.toolStyles {
-  background-color: transparent;
-}
-
-// Chevron button - implementer-tools component
-.chevronImplementerToolsButton {
-  position: fixed;
-  bottom: 0;
-  left: calc(50vw - layout.$spacing-05);
-  z-index: 9999;
-
-  div {
-    background-color: $ui-02;
-    width: layout.$spacing-07;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-
-  div:hover {
-    padding: layout.$spacing-03 0;
-  }
-}
-
-.darkTheme {
-  @include theme.theme(themes.$g90);
-}
-
 .path {
   @include type.type-style('heading-02');
   margin-bottom: layout.$spacing-03;

packages/apps/esm-implementer-tools-app/src/configuration/interactive-editor/display-value.scss

@@ -1,50 +1,6 @@
 @use '@carbon/layout';
-@use '@carbon/type';
-@use '@carbon/react/scss/themes';
-@use '@carbon/react/scss/theme';
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
-.productiveHeading01 {
-  @include type.type-style('heading-compact-01');
-}
-
-.productiveHeading02 {
-  @include type.type-style('heading-compact-02');
-}
-
-.bodyShort01 {
-  @include type.type-style('body-compact-01');
-}
-
-.toolStyles {
-  background-color: transparent;
-}
-
-// Chevron button - implementer-tools component
-.chevronImplementerToolsButton {
-  position: fixed;
-  bottom: 0;
-  left: calc(50vw - layout.$spacing-05);
-  z-index: 9999;
-
-  div {
-    background-color: $ui-02;
-    width: layout.$spacing-07;
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-
-  div:hover {
-    padding: layout.$spacing-03 0;
-  }
-}
-
-.darkTheme {
-  @include theme.theme(themes.$g90);
-}
-
 .smallListCell {
   padding: layout.$spacing-03;
 }