fix: add explicit styles for welcome tab

CHANGELOG.md

@@ -6,6 +6,7 @@ All notable changes to the [Camunda Modeler](https://github.com/camunda/camunda-
 
 ___Note:__ Yet to be released changes appear here._
 
+* `FIX`: correct broken styles after loading variable outline ([#4555](https://github.com/camunda/camunda-modeler/issues/4555))
 * `FIX`: show lint errors for FEEL expressions used in BPMN processes ([camunda/bpmnlint-plugin-camunda-compat#175](https://github.com/camunda/bpmnlint-plugin-camunda-compat/pull/175))
 * `DEPS`: update to `@camunda/linting@3.27.2`
 

client/src/app/EmptyTab.less

@@ -13,11 +13,6 @@
   bottom: 0;
   left: 0;
 
-
-  font-size: 14px;
-  font-weight: 400;
-  font-family: 'IBM Plex Sans';
-
   .flex-spacer {
     min-width: 5px;
     max-width: 40px;
@@ -30,6 +25,18 @@
     margin-bottom: 35px;
   }
 
+  /* <carbon-override> */
+  line-height: var(--line-height-default);
+  font-size: var(--font-size-default);
+
+  p {
+    font-size: var(--font-size-default);
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  /* </carbon-override> */
+
   .welcome-cards {
     width: 100%;
     align-items: center;

client/src/app/primitives/TabLinks.js

@@ -133,7 +133,7 @@ export default class TabLinks extends PureComponent {
               onClick={ placeholder.onClick }
               title={ placeholder.title }
             >
-              <span className="tab__content">
+              <span className="tab__content tab__name">
                 { placeholder.label }
               </span>
             </div>

client/src/plugins/privacy-preferences/PrivacyPreferencesView.less

@@ -1,7 +1,5 @@
 :local(.View) {
 
-  font-size: 1.2em;
-
   .form-submit {
     text-align: right;
   }

client/src/plugins/update-checks/NewVersionInfoView.less

@@ -1,8 +1,6 @@
 :local(.NewVersionInfo) {
   user-select: none;
 
-  font-size: 1.2em;
-
   button + button {
     margin-left: 10px;
   }

client/src/shared/ui/overlay/Overlay.less

@@ -32,7 +32,17 @@
   min-width: var(--overlay-min-width);
   overflow-y: auto;
 
-  font-size: 14px;
+  /* <carbon-override> */
+  line-height: var(--line-height-default);
+  font-size: var(--font-size-default);
+
+  p {
+    font-size: var(--font-size-default);
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  /* </carbon-override> */
 
   h1, h2, h3, h4 {
     font-weight: 500;

client/src/styles/_base.less

@@ -4,7 +4,7 @@
 
 body {
   font-family: var(--font-family);
-  font-size: 12px;
+  font-size: var(--font-size-default);
   background-color: var(--color-white);
   overflow: hidden;
 }

client/src/styles/_font.less

@@ -50,4 +50,5 @@
   --font-family: 'IBM Plex Sans', system-ui, Arial, sans-serif;
   --font-family-monospace: 'IBM Plex Mono', monospace;
   --font-size-default: 14px;
+  --line-height-default: 1.5;
 }

client/src/styles/_forms.less

@@ -181,15 +181,16 @@
     // border of the radio
     .custom-control-input:checked + .custom-control-label:before,
     .custom-control-input:not(:checked) + .custom-control-label:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--color-grey-225-10-75);
-        border-radius: 3px;
-        background: var(--color-white);
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 16px;
+      height: 16px;
+      border: 1px solid var(--color-grey-225-10-75);
+      border-radius: 3px;
+      background: var(--color-white);
+      box-sizing: content-box;
     }
 
     // inside the checkbox
@@ -201,6 +202,7 @@
       height: 16px;
       content: "";
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill-rule='evenodd' points='5.743 14.314 1 9.57 2.897 7.673 5.743 10.519 13.103 3.16 15 5.057'/%3E%3C/svg%3E%0A");
+      box-sizing: content-box;
     }
   }
 
@@ -209,36 +211,38 @@
     // border of the radio
     .custom-control-input:checked + .custom-control-label:before,
     .custom-control-input:not(:checked) + .custom-control-label:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--color-grey-225-10-75);
-        border-radius: 100%;
-        background: var(--color-white);
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 16px;
+      height: 16px;
+      border: 1px solid var(--color-grey-225-10-75);
+      border-radius: 100%;
+      background: var(--color-white);
+      box-sizing: content-box;
     }
 
     // inside the radio
     .custom-control-input:checked + .custom-control-label:after,
     .custom-control-input:not(:checked) + .custom-control-label:after {
-        content: '';
-        width: 8px;
-        height: 8px;
-        background-color: var(--color-grey-225-10-15);
-        position: absolute;
-        top: 5px;
-        left: 5px;
-        border-radius: 100%;
+      content: '';
+      width: 8px;
+      height: 8px;
+      background-color: var(--color-grey-225-10-15);
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      border-radius: 100%;
+      box-sizing: content-box;
     }
 
     // radio control
     .custom-control-input:not(:checked) + .custom-control-label:after {
-        opacity: 0;
+      opacity: 0;
     }
     .custom-control-input:checked + .custom-control-label:after {
-        opacity: 1;
+      opacity: 1;
     }
 
     .custom-control-label:focus {
@@ -253,10 +257,10 @@
 
   // feedback / tooltip
   .invalid-feedback {
-      color: var(--color-red-360-100-45);
-      margin-top: 6px;
-      font-size: 13px;
-      display: inline-block;
+    color: var(--color-red-360-100-45);
+    margin-top: 6px;
+    font-size: 13px;
+    display: inline-block;
 
     .invalid-tooltip {
       visibility: hidden;

client/src/styles/_modal.less

@@ -71,7 +71,17 @@
 
   overflow-y: auto;
 
-  font-size: 14px;
+  /* <carbon-override> */
+  line-height: var(--line-height-default);
+  font-size: var(--font-size-default);
+
+  p {
+    font-size: var(--font-size-default);
+
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  /* </carbon-override> */
 
   background-color: var(--color-white);