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;