From aa3bef93ce021e71446500fd4511cad7a1f708bf Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Tue, 2 Apr 2024 11:44:31 +0200
Subject: [PATCH] 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, use `v-bind`
  instead of hacky way to inject circle width value.
- 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
  5d940b57ef2a4c219932cd15201401f8550cfb41.
- 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.
---

TODO: Search margin, margin-left, margin-right, margin-top, margin-bottom, padding, padding-left, padding-right, padding-top, padding-bottom, gap, column-gap, row-gap, em;, rem;,px; 5M
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.
---
 docs/presentation.md                          | 10 +++-
 src/presentation/assets/styles/_spacing.scss  | 16 ++++++
 .../assets/styles/base/_index.scss            | 19 ++++---
 .../assets/styles/base/_margin-padding.scss   | 35 +++++++------
 .../assets/styles/components/_card.scss       |  1 -
 src/presentation/assets/styles/main.scss      |  3 +-
 src/presentation/components/App.vue           | 23 +++++----
 .../Code/CodeButtons/IconButton.vue           |  1 -
 .../RunInstructions/Steps/CopyableCommand.vue |  6 +--
 .../Code/CodeButtons/TheCodeButtons.vue       |  5 +-
 .../components/DevToolkit/DevToolkit.vue      |  6 +--
 .../Scripts/Menu/MenuOptionList.vue           |  2 +-
 .../Recommendation/Rating/CircleRating.vue    |  4 +-
 .../Recommendation/Rating/RatingCircle.vue    | 49 ++++++++++---------
 .../RecommendationDocumentation.vue           |  2 +-
 .../Menu/Revert/RevertStatusDocumentation.vue |  2 +-
 .../Scripts/Menu/TheScriptsMenu.vue           | 18 +++----
 .../Scripts/Slider/HorizontalResizeSlider.vue | 23 ++-------
 .../Scripts/Slider/SliderHandle.vue           |  4 +-
 .../components/Scripts/TheScriptArea.vue      | 13 +++--
 .../Scripts/View/Cards/CardList.vue           |  3 +-
 .../Scripts/View/Cards/CardListItem.vue       | 11 +++--
 .../Scripts/View/Cards/card-gap.scss          |  3 ++
 .../Scripts/View/TheScriptsView.vue           | 14 ++----
 .../Documentation/DocumentableNode.vue        |  6 +--
 .../View/Tree/NodeContent/NodeContent.vue     |  2 +-
 .../View/Tree/NodeContent/RevertToggle.vue    |  2 +-
 .../View/Tree/NodeContent/ToggleSwitch.vue    |  8 +--
 .../Scripts/View/Tree/ScriptsTree.vue         | 11 +++--
 .../TreeView/Node/HierarchicalTreeNode.vue    | 34 ++++++++-----
 .../View/Tree/TreeView/Node/LeafTreeNode.vue  | 14 +++---
 .../components/Shared/FlatButton.vue          |  2 +-
 .../components/Shared/Modal/ModalDialog.vue   |  4 +-
 .../components/Shared/TooltipWrapper.vue      |  6 +--
 .../components/TheFooter/DownloadUrlList.vue  |  6 +--
 .../components/TheFooter/TheFooter.vue        |  9 ++--
 src/presentation/components/TheSearchBar.vue  |  6 +--
 37 files changed, 208 insertions(+), 175 deletions(-)
 create mode 100644 src/presentation/assets/styles/_spacing.scss
 delete mode 100644 src/presentation/assets/styles/components/_card.scss
 create mode 100644 src/presentation/components/Scripts/View/Cards/card-gap.scss

diff --git a/docs/presentation.md b/docs/presentation.md
index b85f44ade..21c7ebd4c 100644
--- a/docs/presentation.md
+++ b/docs/presentation.md
@@ -14,14 +14,13 @@ The presentation layer uses an event-driven architecture for bidirectional react
   - [**`main.ts`**](./../src/presentation/main.ts): Starts Vue app.
   - [**`index.html`**](./../src/presentation/index.html): The `index.html` entry file, located at the root of the project as required by Vite
   - [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue components and plugins.
-  - [**`components/`**](./../src/presentation/components/): Contains Vue components and helpers.
+  - [**`components/`**](./../src/presentation/components/): Contains Vue components, helpers and styles coupled to Vue components.
     - [**`Shared/`**](./../src/presentation/components/Shared): Contains shared Vue components and helpers.
       - [**`Hooks`**](../src/presentation/components/Shared/Hooks): Hooks used by components through [dependency injection](#dependency-injections).
   - [**`/public/`**](../src/presentation/public/): Contains static assets.
   - [**`assets/`**](./../src/presentation/assets/styles/): Contains assets processed by Vite.
     - [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts.
     - [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles.
-      - [**`components/`**](./../src/presentation/assets/styles/components): Contains styles coupled to Vue components.
       - [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Main Sass file, imported by other components as single entrypoint..
   - [**`electron/`**](./../src/presentation/electron/): Contains Electron code.
     - [`/main/` **`index.ts`**](./../src/presentation/main.ts): Main entry for Electron, managing application windows and lifecycle events.
@@ -38,6 +37,13 @@ The presentation layer uses an event-driven architecture for bidirectional react
   They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
 - **Borders**:
   privacy.sexy prefers sharper edges in its design language.
+- **Fonts**:
+  - Use the primary font for regular text and monospace font for code or specific data.
+  - Use cursive and logo fonts solely for branding.
+  - Refer to [standardized font size variables](../src/presentation/assets/styles/_typography.scss) for font sizing, avoiding arbitrary `px`, `em`, `rem`, or percentage values.
+- **Spacing**:
+  Use [global spacing variables](../src/presentation/assets/styles/_spacing.scss) for consistent margin, padding, and gap definitions.
+  This provides uniform spatial distribution and alignment of elements, enhancing visual harmony and making the UI more scalable and maintainable.
 
 ## Application data
 
diff --git a/src/presentation/assets/styles/_spacing.scss b/src/presentation/assets/styles/_spacing.scss
new file mode 100644
index 000000000..03a829696
--- /dev/null
+++ b/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; // TODO: Only used once
+$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;
diff --git a/src/presentation/assets/styles/base/_index.scss b/src/presentation/assets/styles/base/_index.scss
index 50715f237..45edc2bb6 100644
--- a/src/presentation/assets/styles/base/_index.scss
+++ b/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,
 );
 
diff --git a/src/presentation/assets/styles/base/_margin-padding.scss b/src/presentation/assets/styles/base/_margin-padding.scss
index 5fbf4eda3..9699e0727 100644
--- a/src/presentation/assets/styles/base/_margin-padding.scss
+++ b/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;
 }
diff --git a/src/presentation/assets/styles/components/_card.scss b/src/presentation/assets/styles/components/_card.scss
deleted file mode 100644
index 2e31d34a0..000000000
--- a/src/presentation/assets/styles/components/_card.scss
+++ /dev/null
@@ -1 +0,0 @@
-$card-gap: 15px;
diff --git a/src/presentation/assets/styles/main.scss b/src/presentation/assets/styles/main.scss
index 8f5c9dfa7..74be8db35 100644
--- a/src/presentation/assets/styles/main.scss
+++ b/src/presentation/assets/styles/main.scss
@@ -5,6 +5,5 @@
 @forward "./media";
 @forward "./colors";
 @forward "./base";
+@forward "./spacing";
 @forward "./mixins";
-
-@forward "./components/card";
diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index 4881ef980..6b303e574 100644
--- a/src/presentation/components/App.vue
+++ b/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-medium;
     }
     .app__code-buttons {
-      padding-bottom: 10px;
+      padding-bottom: $spacing-absolute-medium;
     }
   }
 }
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index f0a0ac717..82764fa22 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/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;
diff --git a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue b/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
index 4d6efee69..768a10618 100644
--- a/src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
+++ b/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>
diff --git a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue b/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
index cd3bb45bf..9cc1dc913 100644
--- a/src/presentation/components/Code/CodeButtons/TheCodeButtons.vue
+++ b/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;
diff --git a/src/presentation/components/DevToolkit/DevToolkit.vue b/src/presentation/components/DevToolkit/DevToolkit.vue
index f7d226d69..dbdd5510e 100644
--- a/src/presentation/components/DevToolkit/DevToolkit.vue
+++ b/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;
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionList.vue b/src/presentation/components/Scripts/Menu/MenuOptionList.vue
index fd698efea..6fbc61269 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionList.vue
+++ b/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) {
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue b/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue
index 6f7603fff..7232bc0b6 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/Rating/CircleRating.vue
+++ b/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>
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue b/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
index 8cc8c7558..61a33300a 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
+++ b/src/presentation/components/Scripts/Menu/Recommendation/Rating/RatingCircle.vue
@@ -1,19 +1,16 @@
 <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"
+        :class="{
+          filled,
+        }"
+      />
+    </svg>
+  </span>
 </template>
 
 <script lang="ts">
@@ -43,10 +40,13 @@ export default defineComponent({
       const height = circleDiameterInPx + circleStrokeWidthInPx;
       return `${minX} ${minY} ${width} ${height}`;
     });
+    const circleStrokeWidthCssValue = computed(() => {
+      return `${circleStrokeWidthInPx}px`;
+    });
     return {
       circleRadiusInPx,
       circleDiameterInPx,
-      circleStrokeWidthInPx,
+      circleStrokeWidthCssValue,
       circleRadiusWithoutStrokeInPx,
       viewBox,
     };
@@ -55,17 +55,20 @@ 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;
+$circle-stroke-width: v-bind(circleStrokeWidthCssValue);
 
 svg {
-  height: $circleHeight;
+  font-size: $circle-height;
+  height: 1em;
   circle {
-    stroke: $circleColor;
-    stroke-width: $circleStrokeWidth;
+    stroke: $circle-color;
+    stroke-width: $circle-stroke-width;
     &.filled {
-      fill: $circleColor;
+      fill: $circle-color;
     }
   }
 }
diff --git a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue b/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
index 6112f2a2f..95a142b46 100644
--- a/src/presentation/components/Scripts/Menu/Recommendation/RecommendationDocumentation.vue
+++ b/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) {
diff --git a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue b/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
index fcfadcfe4..dfcf6b259 100644
--- a/src/presentation/components/Scripts/Menu/Revert/RevertStatusDocumentation.vue
+++ b/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) {
diff --git a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
index e2d80bcf9..0bf889103 100644
--- a/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
+++ b/src/presentation/components/Scripts/Menu/TheScriptsMenu.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="scripts-menu">
-    <div class="scripts-menu-item scripts-menu-rows">
+    <div class="scripts-menu-item scripts-menu-rows left">
       <TheRecommendationSelector class="scripts-menu-item" />
       <TheRevertSelector class="scripts-menu-item" />
     </div>
-    <TheOsChanger class="scripts-menu-item" />
+    <TheOsChanger class="scripts-menu-item middle" />
     <TheViewChanger
       v-if="!isSearching"
-      class="scripts-menu-item"
+      class="scripts-menu-item right"
       @view-changed="$emit('viewChanged', $event)"
     />
   </div>
@@ -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>
diff --git a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue b/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
index 26a4ffb85..fa021dc3f 100644
--- a/src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
+++ b/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;
     }
diff --git a/src/presentation/components/Scripts/Slider/SliderHandle.vue b/src/presentation/components/Scripts/Slider/SliderHandle.vue
index dd321c4c6..e2c1b98f9 100644
--- a/src/presentation/components/Scripts/Slider/SliderHandle.vue
+++ b/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>
diff --git a/src/presentation/components/Scripts/TheScriptArea.vue b/src/presentation/components/Scripts/TheScriptArea.vue
index b4ade9db4..58a041e47 100644
--- a/src/presentation/components/Scripts/TheScriptArea.vue
+++ b/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-small;
+}
+
+.horizontal-slider {
+  // Add row gap between lines on mobile (smaller screens)
+  // when the slider turns into rows.
+  row-gap: $spacing-absolute-large;
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardList.vue b/src/presentation/components/Scripts/View/Cards/CardList.vue
index faeefe257..249bc021c 100644
--- a/src/presentation/components/Scripts/View/Cards/CardList.vue
+++ b/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 {
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index ea5c0d3a2..454167f0a 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/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 {
diff --git a/src/presentation/components/Scripts/View/Cards/card-gap.scss b/src/presentation/components/Scripts/View/Cards/card-gap.scss
new file mode 100644
index 000000000..f46a7e000
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Cards/card-gap.scss
@@ -0,0 +1,3 @@
+@use "@/presentation/assets/styles/main" as *;
+
+$card-gap: $spacing-absolute-large;
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index a21805d2f..7bbac2aa9 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/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;
     }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
index 8eaf72cdb..bcfb4940b 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentableNode.vue
+++ b/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;
     }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
index 8043e022f..06f264296 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue
+++ b/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;
     }
   }
 }
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
index dbfe85ff9..a4f66b1a7 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue
+++ b/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>
 
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
index 124c62dfb..9b546f202 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue
+++ b/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});
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 63eb30ada..daf58d769 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/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>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
index 09625b923..360847490 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue
+++ b/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);
       }
     }
   }
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue b/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
index 01a0fefa8..16cc1c568 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue
+++ b/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-absolute-small;
+    padding-right: $spacing-absolute-x-small;
     text-decoration: none;
     user-select: none;
   }
diff --git a/src/presentation/components/Shared/FlatButton.vue b/src/presentation/components/Shared/FlatButton.vue
index 4164851a3..9ca98fd31 100644
--- a/src/presentation/components/Shared/FlatButton.vue
+++ b/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);
   }
diff --git a/src/presentation/components/Shared/Modal/ModalDialog.vue b/src/presentation/components/Shared/Modal/ModalDialog.vue
index b5e5d34d6..7d3d22c04 100644
--- a/src/presentation/components/Shared/Modal/ModalDialog.vue
+++ b/src/presentation/components/Shared/Modal/ModalDialog.vue
@@ -63,7 +63,7 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 .dialog {
-  margin-bottom: 10px;
+  margin-bottom: $spacing-absolute-medium;
   display: flex;
   flex-direction: row;
 
@@ -75,7 +75,7 @@ export default defineComponent({
     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;
   }
 }
diff --git a/src/presentation/components/Shared/TooltipWrapper.vue b/src/presentation/components/Shared/TooltipWrapper.vue
index 739a3ce15..ccdcb2a06 100644
--- a/src/presentation/components/Shared/TooltipWrapper.vue
+++ b/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(
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 14b3a725d..c1176bb4f 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/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;
     }
   }
 }
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index 7b51186ad..f6643ee95 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/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;
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 8cf9d3af8..edcd28f1f 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -108,8 +108,8 @@ export default defineComponent({
   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 +127,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>