Normalize and improve font sizes

This commit standardizes font sizes across components for a uniform
look. The icon sizes, font weights and line heights are also adjusted
accordingly for better standardization and simplicity.

- Introduce variables for standard font sizes, enhancing
  maintainability.
- Remove explicit pixel values, replaced with scalable units based on
  root size.
- Remove workaround for line-height adoptation of bigger font-size.
- Use consistent small font-size for the code area.
- Adjust checkbox tick to scale with font size.

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -1,5 +1,9 @@
 <template>
-  <MarkdownText :text="renderedMarkdown" class="documentation-text" />
+  <MarkdownText
+    class="documentation-text"
+    :text="renderedMarkdown"
+    @click.stop
+  />
 </template>
 
 <script lang="ts">
@@ -55,7 +59,7 @@ function formatAsMarkdownListItem(content: string): string {
   flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
   max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
 
-  font-size: calc(24px * 75/100);
+  font-size: $font-size-normal;
   font-family: $font-main;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue

@@ -49,8 +49,7 @@ export default defineComponent({
 .documentation-button {
   vertical-align: middle;
   color: $color-primary;
-  font-size: 24px;
-
+  font-size: $font-size-large;
   :deep() { // This override leads to inconsistent highlight color, it should be re-styled.
     @include hover-or-touch {
       color: $color-primary-darker;

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/MarkdownText.vue

@@ -2,7 +2,6 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     class="markdown-text"
-    @click.stop
     v-html="htmlOutput"
   />
 </template>

src/presentation/components/Scripts/View/Tree/NodeContent/NodeTitle.vue

@@ -24,17 +24,6 @@ export default defineComponent({
 
 .node-title {
   font-family: $font-main;
-  font-size: 1.5em;
-  line-height: 24px;
-  /*
-    Following is a workaround fixing overflow-y caused by line height being smaller than font.
-    It should be removed once a proper line-height matching the font-size (not smaller than) is used.
-  */
-  $line-height-compensation: calc((1.5em - 24px) / 4);
-  padding-top: $line-height-compensation;
-  padding-bottom: $line-height-compensation;
-  margin-top: calc(-1 * $line-height-compensation);
-  margin-bottom: calc(-1 * $line-height-compensation);
-  overflow-y: none;
+  font-size: $font-size-large;
 }
 </style>

src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue

@@ -68,13 +68,15 @@ export default defineComponent({
 @use 'sass:math';
 @use "@/presentation/assets/styles/main" as *;
 
+$font-size              : $font-size-small;
+
 $color-toggle-unchecked : $color-primary-darker;
 $color-toggle-checked   : $color-on-secondary;
 $color-text-unchecked   : $color-on-primary;
 $color-text-checked     : $color-on-secondary;
 $color-bg-unchecked     : $color-primary;
 $color-bg-checked       : $color-secondary;
-$size-height            : 30px;
+$size-height            : $font-size + 8px;
 $size-circle            : math.div($size-height * 2, 3);
 $padding-horizontal     : 0.40em;
 $gap                    : 0.25em;
@@ -106,8 +108,7 @@ $gap                    : 0.25em;
   width: auto;
   height: $size-height;
   border-radius: $size-height;
-  line-height: $size-height;
-  font-size: math.div($size-height, 2);
+  font-size: $font-size;
 
   input.toggle-input {
     position: absolute;

src/presentation/components/Scripts/View/Tree/TreeView/Node/NodeCheckbox.vue

@@ -53,13 +53,13 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 @use "./../tree-colors" as *;
 
-$sideSizeInPx: 30px;
+$side-size-in-px: $font-size-larger;
 
 .checkbox {
   position: relative;
 
-  width: $sideSizeInPx;
-  height: $sideSizeInPx;
+  width: $side-size-in-px;
+  height: $side-size-in-px;
 
   box-sizing: border-box;
   border: 1px solid $color-node-checkbox-border-unchecked;
@@ -76,12 +76,12 @@ $sideSizeInPx: 30px;
   &.indeterminate {
     border-color: $color-node-checkbox-border-unchecked;
 
-    &:after {
+    &:after { // Draw line (─)
       background-color: $color-node-checkbox-border-indeterminate;
       top: 50%;
       left: 20%;
       right: 20%;
-      height: 2px;
+      height: 1.5px;
     }
   }
 
@@ -89,15 +89,18 @@ $sideSizeInPx: 30px;
     background: $color-node-checkbox-bg-checked;
     border-color: $color-node-checkbox-border-checked;
 
-    &:after {
+    &:after { // Draw checkmark tick (✔️)
+
       box-sizing: content-box;
       border: 1.5px solid $color-node-checkbox-tick-checked;
       border-left: 0;
       border-top: 0;
-      left: 9px;
-      top: 3px;
-      height: 15px;
-      width: 8px;
+
+      left: $side-size-in-px * 0.33;
+      top: $side-size-in-px * 0.11;
+      height: $side-size-in-px * 0.50;
+      width: $side-size-in-px * 0.25;
+
       transform: rotate(45deg) scaleY(1);
       transition: transform .25s;
       transform-origin: center;