Centralize and use global spacing variables

This commit improves UI consistency. It also improves maintainability by
removing "magic values" in favor of standardized spacing throughout the
application.

- Adjust spacing variables to match the convention.
- Add `_spacing.scss` to define a centralized set of spacing variables, both
  absolute and relative, to standardize the spacing throughout the application.
  This new approach ensures a consistent spacing logic across all components and
  layouts, facilitating easier maintenance and scalability of the styling codebase.
- Update various SCSS styles to utilize the new spacing variables. This change
  harmonizes the spacing across different parts of the application, aligning with
  the new design system's principles.
- Slightly adjust existing padding/margin/gaps for better consistency.

Other supporting changes per component:

- RatingCircle: Update style names to match convention and simplify
  hacky way to inject circle width value through CSS variables. Add
  tests for the new behavior and refactor existing tests for easier
  extensibility.
- TheFooter: Add small gap when footer items wrap.
- HiearchicalTreeNode: Refactor variables to separate caret size clearly
  from padding applied.
- App: Make padding responsive as initial behavior of v0.13.0 before
  5d940b57ef.
- ModalDialog: Use responsive absolute values instead of percentage.
- HorizontalResizeSlider:
  - Use `v-bind` instead of hacky way to inject SCSS values through variables.
  - Remove `verticalMargin` property to simplify its styling.
- Move `src/presentation/assets/styles/components/_card.scss` closer to
  components that it styles. Update structure documentation.

The centralization of spacing definitions will aid in future design
adjustments, ensuring that updates to spacing can be made swiftly and
uniformly across the application. It's a step towards a more maintainable
and scalable frontend architecture.

src/presentation/assets/styles/_spacing.scss

@@ -0,0 +1,16 @@
+// Use for fixed-size elements where consistent spacing is important
+// regardless of context.
+$spacing-absolute-xx-small: 3px;
+$spacing-absolute-x-small : 4px;
+$spacing-absolute-small   : 6px;
+$spacing-absolute-medium  : 10px;
+$spacing-absolute-large   : 15px;
+$spacing-absolute-x-large : 20px;
+$spacing-absolute-xx-large: 30px;
+
+// Use for elements with text content where spacing should
+// scale with text size.
+$spacing-relative-x-small : 0.25em;
+$spacing-relative-small   : 0.5em;
+$spacing-relative-medium  : 1em;
+$spacing-relative-large   : 2em;

src/presentation/assets/styles/base/_index.scss

@@ -5,16 +5,15 @@
   CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers
 */
 
-@use "@/presentation/assets/styles/colors" as *;
-@use "@/presentation/assets/styles/mixins" as *;
-@use "@/presentation/assets/styles/vite-path" as *;
-@use "@/presentation/assets/styles/typography" as *;
+@use "../colors" as *;
+@use "../mixins" as *;
+@use "../vite-path" as *;
+@use "../typography" as *;
+@use "../spacing" as *;
 @use "_code-styling" as *;
 @use "_margin-padding" as *;
 @use "_link-styling" as *;
 
-$base-spacing: 1em;
-
 * {
   box-sizing: border-box;
 }
@@ -22,7 +21,7 @@ $base-spacing: 1em;
 body {
   background: $color-background;
   @include base-font-style;
-  @include apply-uniform-spacing($base-spacing: $base-spacing)
+  @include apply-uniform-spacing;
 }
 
 input {
@@ -30,12 +29,12 @@ input {
 }
 
 blockquote {
-  padding: 0 $base-spacing;
-  border-left: .25em solid $color-primary;
+  padding: 0 $spacing-relative-medium;
+  border-left: $spacing-absolute-x-small solid $color-primary;
 }
 
 @include style-code-elements(
-  $code-block-padding: $base-spacing,
+  $code-block-padding: $spacing-relative-medium,
   $color-background: $color-primary-darker,
 );
 

src/presentation/assets/styles/base/_margin-padding.scss

@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use "../spacing" as *;
 
 @mixin no-margin($selectors) {
   #{$selectors} {
@@ -26,7 +27,7 @@
   }
 }
 
-@mixin apply-uniform-vertical-spacing($base-vertical-spacing) {
+@mixin apply-uniform-vertical-spacing {
   /* Reset default top/bottom margins added by browser. */
   @include no-margin('p');
   @include no-margin('h1, h2, h3, h4, h5, h6');
@@ -36,29 +37,27 @@
   @include no-margin('ul, ol');
 
   /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
-  $small-vertical-spacing: math.div($base-vertical-spacing, 2);
-  @include bottom-margin('p', $base-vertical-spacing);
-  @include bottom-margin('li > p', $small-vertical-spacing); // Reduce margin for paragraphs directly within list items to visually group related content.
-  @include bottom-margin('h1, h2, h3, h4, h5, h6', $small-vertical-spacing);
-  @include bottom-margin('ul, ol', $base-vertical-spacing);
-  @include bottom-margin('li', $small-vertical-spacing);
-  @include bottom-margin('table', $base-vertical-spacing);
-  @include bottom-margin('blockquote', $base-vertical-spacing);
-  @include bottom-margin('pre', $base-vertical-spacing);
-  @include bottom-margin('article', $base-vertical-spacing);
-  @include bottom-margin('hr', $base-vertical-spacing);
+  @include bottom-margin('p', $spacing-relative-medium);
+  @include bottom-margin('li > p', $spacing-relative-small); // Reduce margin for paragraphs directly within list items to visually group related content.
+  @include bottom-margin('h1, h2, h3, h4, h5, h6', $spacing-relative-small);
+  @include bottom-margin('ul, ol', $spacing-relative-medium);
+  @include bottom-margin('li', $spacing-relative-small);
+  @include bottom-margin('table', $spacing-relative-medium);
+  @include bottom-margin('blockquote', $spacing-relative-medium);
+  @include bottom-margin('pre', $spacing-relative-medium);
+  @include bottom-margin('article', $spacing-relative-medium);
+  @include bottom-margin('hr', $spacing-relative-medium);
 }
 
-@mixin apply-uniform-horizontal-spacing($base-horizontal-spacing) {
+@mixin apply-uniform-horizontal-spacing {
   /* Reset default left/right paddings added by browser. */
   @include no-padding('ul, ol');
 
   /* Add spacing for list items. */
-  $large-horizontal-spacing: $base-horizontal-spacing * 2;
-  @include left-padding('ul, ol', $large-horizontal-spacing);
+  @include left-padding('ul, ol', $spacing-relative-large);
 }
 
-@mixin apply-uniform-spacing($base-spacing) {
-  @include apply-uniform-vertical-spacing($base-spacing);
-  @include apply-uniform-horizontal-spacing($base-spacing);
+@mixin apply-uniform-spacing {
+  @include apply-uniform-vertical-spacing;
+  @include apply-uniform-horizontal-spacing;
 }

src/presentation/assets/styles/components/_card.scss

@@ -1 +0,0 @@
-$card-gap: 15px;

src/presentation/assets/styles/main.scss

@@ -5,6 +5,5 @@
 @forward "./media";
 @forward "./colors";
 @forward "./base";
+@forward "./spacing";
 @forward "./mixins";
-
-@forward "./components/card";

src/presentation/components/App.vue

@@ -53,20 +53,25 @@ function getOptionalDevToolkitComponent(): Component | undefined {
 @use 'sass:math';
 
 @mixin responsive-spacing {
-  $spacing-absolute-small: math.div($base-spacing, 2);
-  $spacing-absolute-extra-small: math.div($base-spacing, 4);
   // Avoid using percentage-based values for spacing the avoid unintended layout shifts.
-  margin-left: $base-spacing;
-  margin-right: $base-spacing;
+  margin-left: $spacing-absolute-medium;
+  margin-right: $spacing-absolute-medium;
+  padding: $spacing-absolute-xx-large;
   @media screen and (max-width: $media-screen-big-width) {
     margin-left: $spacing-absolute-small;
     margin-right: $spacing-absolute-small;
+    padding: $spacing-absolute-x-large;
   }
   @media screen and (max-width: $media-screen-medium-width) {
-    margin-left: $spacing-absolute-extra-small;
-    margin-right: $spacing-absolute-extra-small;
+    margin-left: $spacing-absolute-x-small;
+    margin-right: $spacing-absolute-x-small;
+    padding: $spacing-absolute-medium;
+  }
+  @media screen and (max-width: $media-screen-small-width) {
+    margin-left: 0;
+    margin-right: 0;
+    padding: $spacing-absolute-small;
   }
-  padding: $spacing-absolute-small;
 }
 
 #app {
@@ -83,10 +88,10 @@ function getOptionalDevToolkitComponent(): Component | undefined {
     display:flex;
     flex-direction: column;
     .app__row {
-      margin-bottom: 10px;
+      margin-bottom: $spacing-absolute-large;
     }
     .app__code-buttons {
-      padding-bottom: 10px;
+      padding-bottom: $spacing-absolute-medium;
     }
   }
 }

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -74,7 +74,6 @@ export default defineComponent({
   color: $color-on-secondary;
 
   border: none;
-  padding: 20px;
   transition-duration: 0.4s;
   overflow: hidden;
   box-shadow: 0 3px 9px $color-primary-darkest;

src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue

@@ -54,14 +54,14 @@ export default defineComponent({
 
 .copyable-command {
   display: inline-flex;
-  padding: 0.25em;
+  padding: $spacing-relative-x-small;
   font-size: $font-size-absolute-small;
   .dollar {
-    margin-right: 0.5rem;
+    margin-right: $spacing-relative-small;
     user-select: none;
   }
   .copy-action-container {
-    margin-left: 1rem;
+    margin-left: $spacing-relative-medium;
   }
 }
 </style>

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -34,12 +34,15 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .container {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  gap: 30px;
+  gap: $spacing-absolute-xx-large;
 }
+
 .code-button {
   width: 10%;
   min-width: 90px;

src/presentation/components/DevToolkit/DevToolkit.vue

@@ -77,7 +77,7 @@ interface DevAction {
   right: 0;
   background-color: rgba($color-on-surface, 0.5);
   color: $color-on-primary;
-  padding: 10px;
+  padding: $spacing-absolute-medium;
   z-index: 10000;
 
   display:flex;
@@ -113,14 +113,14 @@ interface DevAction {
   .action-buttons {
     display: flex;
     flex-direction: column;
-    gap: 10px;
+    gap: $spacing-absolute-medium;
     @include reset-ul;
 
     .action-button {
       @include reset-button;
 
       display: block;
-      padding: 5px 10px;
+      padding: $spacing-absolute-x-small $spacing-absolute-medium;
       background-color: $color-primary;
       color: $color-on-primary;
       border: none;

src/presentation/components/Scripts/Menu/MenuOptionList.vue

@@ -25,7 +25,7 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$gap: 0.25rem;
+$gap: $spacing-relative-x-small;
 .list {
   display: flex;
   :deep(.items) {

src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue

@@ -37,8 +37,10 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .circle-rating {
   display: inline-flex;
-  gap: 0.2em;
+  gap: $spacing-relative-x-small;
 }
 </style>

src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue

@@ -1,19 +1,17 @@
 <template>
-  <svg
-    :style="{
-      '--circle-stroke-width': `${circleStrokeWidthInPx}px`,
-    }"
-    :viewBox="viewBox"
-  >
-    <circle
-      :cx="circleRadiusInPx"
-      :cy="circleRadiusInPx"
-      :r="circleRadiusWithoutStrokeInPx"
-      :class="{
-        filled,
-      }"
-    />
-  </svg>
+  <span class="circle-container">
+    <svg :viewBox="viewBox">
+      <circle
+        :cx="circleRadiusInPx"
+        :cy="circleRadiusInPx"
+        :r="circleRadiusWithoutStrokeInPx"
+        :stroke-width="circleStrokeWidthStyleValue"
+        :class="{
+          filled,
+        }"
+      />
+    </svg>
+  </span>
 </template>
 
 <script lang="ts">
@@ -43,10 +41,13 @@ export default defineComponent({
       const height = circleDiameterInPx + circleStrokeWidthInPx;
       return `${minX} ${minY} ${width} ${height}`;
     });
+    const circleStrokeWidthStyleValue = computed(() => {
+      return `${circleStrokeWidthInPx}px`;
+    });
     return {
       circleRadiusInPx,
       circleDiameterInPx,
-      circleStrokeWidthInPx,
+      circleStrokeWidthStyleValue,
       circleRadiusWithoutStrokeInPx,
       viewBox,
     };
@@ -55,17 +56,18 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-$circleColor: currentColor;
-$circleHeight: 0.8em;
-$circleStrokeWidth: var(--circle-stroke-width);
+@use "@/presentation/assets/styles/main" as *;
+
+$circle-color: currentColor;
+$circle-height: $font-size-relative-smaller;
 
 svg {
-  height: $circleHeight;
+  font-size: $circle-height;
+  height: 1em;
   circle {
-    stroke: $circleColor;
-    stroke-width: $circleStrokeWidth;
+    stroke: $circle-color;
     &.filled {
-      fill: $circleColor;
+      fill: $circle-color;
     }
   }
 }

src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue

@@ -88,7 +88,7 @@ export default defineComponent({
 
 @mixin horizontal-stack {
   display: flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
 }
 
 @mixin apply-icon-color($color) {

src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue

@@ -55,7 +55,7 @@ export default defineComponent({
 
 @mixin horizontal-stack {
   display: flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
 }
 
 @mixin apply-icon-color($color) {

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -70,8 +70,6 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 @use 'sass:math';
 
-$spacing-small: math.div($base-spacing, 2);
-
 @mixin center-middle-flex-item {
   &:first-child, &:last-child {
     flex-grow: 1;
@@ -87,12 +85,12 @@ $responsive-alignment-breakpoint: $media-screen-medium-width;
 .scripts-menu {
   display: flex;
   flex-wrap: wrap;
-  column-gap: $base-spacing;
-  row-gap: $base-spacing;
+  column-gap: $spacing-relative-medium;
+  row-gap: $spacing-relative-small;
   flex-wrap: wrap;
   align-items: center;
-  margin-left: $spacing-small;
-  margin-right: $spacing-small;
+  margin-left: $spacing-absolute-small;
+  margin-right: $spacing-absolute-small;
   @media screen and (max-width: $responsive-alignment-breakpoint) {
     justify-content: space-around;
   }
@@ -106,7 +104,7 @@ $responsive-alignment-breakpoint: $media-screen-medium-width;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    row-gap: 0.5em;
+    row-gap: $spacing-relative-x-small;
   }
 }
 </style>

src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue

@@ -1,13 +1,5 @@
 <template>
-  <div
-    class="slider"
-    :style="{
-      '--vertical-margin': verticalMargin,
-      '--first-min-width': firstMinWidth,
-      '--first-initial-width': firstInitialWidth,
-      '--second-min-width': secondMinWidth,
-    }"
-  >
+  <div class="slider">
     <div ref="firstElement" class="first">
       <slot name="first" />
     </div>
@@ -27,10 +19,6 @@ export default defineComponent({
     SliderHandle,
   },
   props: {
-    verticalMargin: {
-      type: String,
-      required: true,
-    },
     firstMinWidth: {
       type: String,
       required: true,
@@ -71,21 +59,18 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   .first {
-    min-width: var(--first-min-width);
-    width: var(--first-initial-width);
+    min-width: v-bind(firstMinWidth);
+    width: v-bind(firstInitialWidth);
   }
   .second {
     flex: 1;
-    min-width: var(--second-min-width);
+    min-width: v-bind(secondMinWidth);
   }
   @media screen and (max-width: $media-vertical-view-breakpoint) {
     flex-direction: column;
     .first {
       width: auto !important;
     }
-    .second {
-      margin-top: var(--vertical-margin);
-    }
     .handle {
       display: none;
     }

src/presentation/components/Scripts/Slider/SliderHandle.vue

@@ -81,7 +81,7 @@ $cursor         : v-bind(cursorCssValue);
   .icon {
     color: $color;
   }
-  margin-right: 5px;
-  margin-left: 5px;
+  margin-right: $spacing-absolute-small;
+  margin-left: $spacing-absolute-small;
 }
 </style>

src/presentation/components/Scripts/TheScriptArea.vue

@@ -2,8 +2,7 @@
   <div class="script-area">
     <TheScriptsMenu @view-changed="currentView = $event" />
     <HorizontalResizeSlider
-      class="row"
-      vertical-margin="15px"
+      class="horizontal-slider"
       first-initial-width="55%"
       first-min-width="20%"
       second-min-width="20%"
@@ -42,9 +41,17 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
 .script-area {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: $spacing-absolute-medium;
+}
+
+.horizontal-slider {
+  // Add row gap between lines on mobile (smaller screens)
+  // when the slider turns into rows.
+  row-gap: $spacing-absolute-large;
 }
 </style>

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -125,6 +125,7 @@ function isClickable(element: Element) {
 
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
+@use "./card-gap" as *;
 
 .cards {
   display: flex;
@@ -135,7 +136,7 @@ function isClickable(element: Element) {
     It ensures that there's room to grow, so the animation is shown without overflowing
     with scrollbars.
   */
-  padding: 10px;
+  padding: $spacing-absolute-medium;
 }
 
 .error {

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -138,9 +138,10 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
+@use "./card-gap" as *;
 
-$card-inner-padding     : 30px;
-$expanded-margin-top    : 30px;
+$card-inner-padding     : $spacing-absolute-xx-large;
+$expanded-margin-top    : $spacing-absolute-xx-large;
 $card-horizontal-gap    : $card-gap;
 
 .card {
@@ -178,13 +179,13 @@ $card-horizontal-gap    : $card-gap;
     .card__inner__selection_indicator {
       height: $card-inner-padding;
       margin-right: -$card-inner-padding;
-      padding-right: 10px;
+      padding-right: $spacing-absolute-medium;
       display: flex;
       justify-content: flex-end;
     }
     .card__inner__expand-icon {
       width: 100%;
-      margin-top: .25em;
+      margin-top: $spacing-relative-x-small;
       vertical-align: middle;
       font-size: $font-size-absolute-normal;
     }
@@ -209,7 +210,7 @@ $card-horizontal-gap    : $card-gap;
     .card__expander__close-button {
       font-size: $font-size-absolute-large;
       align-self: flex-end;
-      margin-right: 0.25em;
+      margin-right: $spacing-absolute-small;
       @include clickable;
       color: $color-primary-light;
       @include hover-or-touch {

src/presentation/components/Scripts/View/Cards/card-gap.scss

@@ -0,0 +1,3 @@
+@use "@/presentation/assets/styles/main" as *;
+
+$card-gap: $spacing-absolute-large;

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -128,10 +128,7 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$margin-inner: 4px;
-
 .scripts-view {
-  margin-top: $margin-inner;
   @media screen and (min-width: $media-vertical-view-breakpoint) {
     // so the current code is always visible
     overflow: auto;
@@ -143,16 +140,17 @@ $margin-inner: 4px;
   display: flex;
   flex-direction: column;
   background-color: $color-scripts-bg;
+  padding-top: $spacing-absolute-large;
+  padding-bottom:$spacing-absolute-large;
   .search__query {
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
-    margin-top: 1em;
     color: $color-primary-light;
     .search__query__close-button {
       font-size: $font-size-absolute-large;
-      margin-left: 0.25rem;
+      margin-left: $spacing-relative-x-small;
     }
   }
   .search-no-matches {
@@ -161,11 +159,9 @@ $margin-inner: 4px;
     word-break:break-word;
     color: $color-on-primary;
     font-size: $font-size-absolute-large;
-    padding:10px;
+    padding: $spacing-absolute-medium;
     text-align:center;
-    > div {
-      padding-bottom:13px;
-    }
+    gap: $spacing-relative-small;
     a {
       color: $color-primary;
     }

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

@@ -69,7 +69,7 @@ export default defineComponent({
   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)
   *:not(:first-child) {
-    margin-left: 5px;
+    margin-left: $spacing-absolute-small;
   }
   .header {
     display: flex;
@@ -80,10 +80,10 @@ export default defineComponent({
   }
   .docs {
     background: $color-primary-darkest;
-    margin-top: 0.25em;
+    margin-top: $spacing-relative-x-small;
     color: $color-on-primary;
     text-transform: none;
-    padding: 0.5em;
+    padding: $spacing-absolute-medium;
     &-collapsed {
       display: none;
     }

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

@@ -55,7 +55,7 @@ export default defineComponent({
     flex-wrap: wrap;
 
     .node-content-item:not(:first-child) {
-      margin-left: 5px;
+      margin-left: $spacing-relative-small;
     }
   }
 }

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

@@ -2,7 +2,7 @@
   <ToggleSwitch
     v-model="isReverted"
     :stop-click-propagation="true"
-    :label="'Revert'"
+    label="Revert"
   />
 </template>
 

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

@@ -83,12 +83,12 @@ $color-text-unchecked         : $color-on-primary;
 $color-text-checked           : $color-on-secondary;
 $color-bg-unchecked           : $color-primary;
 $color-bg-checked             : $color-secondary;
-$padding-horizontal           : calc($font-size * 0.4);
-$padding-vertical             : calc($font-size * 0.3);
+$padding-horizontal           : $spacing-relative-small;
+$padding-vertical             : $spacing-absolute-small;
 $size-height                  : calc($font-size + ($padding-vertical * 2));
-$size-circle                  : math.div($size-height * 2, 3);
+$size-circle                  : calc($size-height * 2/3);
 
-$gap-between-circle-and-text  : 0.25em;
+$gap-between-circle-and-text  : $spacing-relative-x-small;
 
 @mixin locateNearCircle($direction: 'left') {
   $circle-width: calc(#{$size-circle} + #{$padding-horizontal});

src/presentation/components/Scripts/View/Tree/ScriptsTree.vue

@@ -73,7 +73,8 @@ export default defineComponent({
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-$padding: 20px;
+$padding-horizontal : $spacing-absolute-large;
+$padding-vertical   : $spacing-absolute-x-large;
 
 .scripts-tree-container {
   display: flex; // We could provide `block`, but `flex` is more versatile.
@@ -84,11 +85,11 @@ $padding: 20px;
 
   flex: 1; // Expands the container to fill available horizontal space, enabling alignment of child items.
 
-  padding-bottom: $padding;
-  padding-left: $padding;
-  padding-right: $padding;
+  padding-bottom: $padding-vertical;
+  padding-left: $padding-horizontal;
+  padding-right: $padding-horizontal;
   &.top-padding {
-    padding-top: $padding;
+    padding-top: $padding-vertical;
   }
 }
 </style>

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

@@ -9,7 +9,7 @@
       :tree-root="treeRoot"
     >
       <div
-        class="expand-collapse-arrow"
+        class="expand-collapse-caret"
         :class="{
           expanded: isExpanded,
           'has-children': hasChildren,
@@ -141,10 +141,13 @@ export default defineComponent({
   flex-direction: row;
   align-items: center;
 
-  .expand-collapse-arrow {
+  .expand-collapse-caret {
+    $caret-size: 24px;
+    $padding-right: $spacing-absolute-small;
+
     flex-shrink: 0;
-    height: 30px;
-    margin-left: 30px;
+    height: $caret-size;
+    margin-left: $caret-size + $padding-right;
     width: 0;
 
     @include clickable;
@@ -157,25 +160,32 @@ export default defineComponent({
 
     &.has-children {
       margin-left: 0;
-      width: 30px;
+      width: $caret-size + $padding-right;
       position: relative;
 
+      $caret-dimension: $caret-size * 0.375;
+      $caret-stroke-width: 1.5px;
       &:after {
-        border: 1.5px solid $color-node-arrow;
+        border: $caret-stroke-width solid $color-node-arrow;
         position: absolute;
         border-left: 0;
         border-top: 0;
-        left: 9px;
+        left: $caret-dimension;
         top: 50%;
-        height: 9px;
-        width: 9px;
-        transform: rotate(-45deg) translateY(-50%) translateX(0);
+        height: $caret-dimension;
+        width: $caret-dimension;
+        transform:
+          rotate(-45deg)
+          translateY(-50%)
+          translateX($caret-dimension * 0.2);
         transition: transform .25s;
         transform-origin: center;
       }
-
       &.expanded:after {
-        transform: rotate(45deg) translateY(-50%) translateX(-5px);
+        transform:
+          rotate(45deg)
+          translateY(-50%)
+          translateX($caret-dimension * -0.5);
       }
     }
   }

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

@@ -76,18 +76,18 @@ export default defineComponent({
   }
 }
 .node {
-  margin-bottom: 3px;
-  margin-top: 3px;
-  padding-bottom: 3px;
-  padding-top: 3px;
-  padding-right: 6px;
+  margin-bottom: $spacing-absolute-xx-small;
+  margin-top: $spacing-absolute-xx-small;
+  padding-bottom: $spacing-absolute-xx-small;
+  padding-top: $spacing-absolute-xx-small;
+  padding-right: $spacing-absolute-small;
   box-sizing: border-box;
 
   .content {
     display: flex; // We could provide `block`, but `flex` is more versatile.
     color: $color-node-fg;
-    padding-left: 9px;
-    padding-right: 6px;
+    padding-left: $spacing-relative-small;
+    padding-right: $spacing-absolute-x-small;
     text-decoration: none;
     user-select: none;
   }

src/presentation/components/Shared/FlatButton.vue

@@ -61,7 +61,7 @@ export default defineComponent({
 
 .flat-button {
   display: inline-flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
   &.disabled {
     @include flat-button($disabled: true);
   }

src/presentation/components/Shared/Modal/ModalContent.vue

@@ -55,7 +55,7 @@ export default defineComponent({
 $modal-content-transition-duration: 400ms;
 $modal-content-color-shadow: $color-on-surface;
 $modal-content-color-background: $color-surface;
-$modal-content-offset-upward: 20px;
+$modal-content-offset-upward: $spacing-absolute-x-large;
 
 @mixin scrollable() {
   overflow-y: auto;

src/presentation/components/Shared/Modal/ModalDialog.vue

@@ -63,19 +63,25 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .dialog {
-  margin-bottom: 10px;
+  margin-bottom: $spacing-absolute-medium;
   display: flex;
   flex-direction: row;
 
   &__content {
-    margin: 5%;
+    margin: $spacing-absolute-xx-large;
+    @media screen and (max-width: $media-screen-big-width) {
+      margin: $spacing-absolute-x-large;
+    }
+    @media screen and (max-width: $media-screen-medium-width) {
+      margin: $spacing-absolute-large;
+    }
   }
 
   .dialog__close-button {
     color: $color-primary-dark;
     width: auto;
     font-size: $font-size-absolute-large;
-    margin-right: 0.25em;
+    margin-right: $spacing-absolute-small;
     align-self: flex-start;
   }
 }

src/presentation/components/Shared/TooltipWrapper.vue

@@ -219,7 +219,7 @@ $color-tooltip-background: $color-primary-darkest;
   background: $color-tooltip-background;
   color: $color-on-primary;
   border-radius: 16px;
-  padding: 12px 10px;
+  padding: $spacing-absolute-large $spacing-absolute-medium;
 
   // Explicitly set font styling for tooltips to prevent inconsistent appearances due to style inheritance from trigger elements.
   @include base-font-style;
@@ -230,8 +230,8 @@ $color-tooltip-background: $color-primary-darkest;
     and balanced layout.
     Avoiding setting vertical margin as it disrupts the arrow rendering.
   */
-  margin-left: 2px;
-  margin-right: 2px;
+  margin-left: $spacing-absolute-xx-small;
+  margin-right: $spacing-absolute-xx-small;
 
   // Setting max-width increases readability and consistency reducing overlap and clutter.
   @include set-property-ch-value-with-fallback(

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -67,10 +67,10 @@ export default defineComponent({
   }
   .description {
     &__icon {
-      margin-right: 0.5em;
+      margin-right: $spacing-relative-small;
     }
     &__text {
-      margin-right: 0.3em;
+      margin-right: $spacing-relative-x-small;
     }
   }
 }
@@ -79,7 +79,7 @@ export default defineComponent({
     &:not(:first-child)::before {
       content: "|";
       font-size: $font-size-absolute-x-small;
-      padding: 0 5px;
+      padding: 0 $spacing-relative-small;
     }
   }
 }

src/presentation/components/TheFooter/TheFooter.vue

@@ -104,7 +104,7 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .icon {
-  margin-right: 0.5em;
+  margin-right: $spacing-relative-small;
 }
 
 .footer {
@@ -119,18 +119,19 @@ export default defineComponent({
     @media screen and (max-width: $media-screen-big-width) {
       justify-content: space-around;
       width: 100%;
+      column-gap: $spacing-relative-medium;
       &:not(:first-child) {
-        margin-top: 0.7em;
+        margin-top: $spacing-relative-small;
       }
     }
     flex-wrap: wrap;
     &__item:not(:first-child) {
       &::before {
         content: "|";
-        padding: 0 5px;
+        padding: 0 $spacing-relative-small;
       }
       @media screen and (max-width: $media-screen-big-width) {
-        margin-top: 3px;
+        margin-top: $spacing-absolute-xx-small;
         &::before {
           content: "";
           padding: 0;

src/presentation/components/TheSearchBar.vue

@@ -106,10 +106,9 @@ export default defineComponent({
   min-width: 60px;
   border: 1.5px solid $color-primary;
   border-right: none;
-  height: 36px;
   border-radius: 3px 0 0 3px;
-  padding-left:10px;
-  padding-right:10px;
+  padding-left: $spacing-absolute-medium;
+  padding-right: $spacing-absolute-medium;
   outline: none;
   color: $color-primary;
   font-size: $font-size-absolute-normal;
@@ -127,6 +126,6 @@ export default defineComponent({
   color: $color-on-primary;
   border-radius: 0 5px 5px 0;
   font-size: $font-size-absolute-large;
-  padding:5px;
+  padding: $spacing-absolute-x-small;
 }
 </style>