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 5d940b5. - 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.
undergroundwires · Apr 12, 2024 · 7625ce9 · 7625ce9
1 parent ffd647d
commit 7625ce9
Show file tree

Hide file tree

Showing 37 changed files with 217 additions and 176 deletions.
diff --git 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
@@ -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
@@ -5,37 +5,36 @@
   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;
 }
 
 body {
   background: $color-background;
   @include base-font-style;
-  @include apply-uniform-spacing($base-spacing: $base-spacing)
+  @include apply-uniform-spacing;
 }
 
 input {
   font-family: unset; // Reset browser default
 }
 
 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -55,7 +55,7 @@ export default defineComponent({
 
 @mixin horizontal-stack {
   display: flex;
-  gap: 0.5em;
+  gap: $spacing-relative-small;
 }
 
 @mixin apply-icon-color($color) {