Improve UI code styling for all platforms

This commit standardizes the visual styling of inline code and code
blocks, ensuring consistency across macOS, Android, Linux and Windows
platforms.

The discrepancies observed in font rendering on macOS, which caused the
inline code font to appear larger, have been addressed. This behavior
was only observed on macOS using different browsers such as Firefox,
Safari, Chromium-based browsers including Electron.

Key changes:

- Standardize font size relative to the parent element.
- Remove font-weight for uniformity, especially when the specific weight
  is not included with the application.
- Add a consistent background color to inline codes, aligning their look
  with code blocks.
- Refactor code styling into a separate SCSS file for improved
  modularity and maintainability.
- Update the documentation to reflect these visual design choices for
  privacy.sexy's UI.

These changes enhance the overall user experience by providing a
consistent look and feel for code elements within the UI, regardless of
the user's platform or browser.

docs/presentation.md

@@ -32,7 +32,12 @@ The presentation layer uses an event-driven architecture for bidirectional react
 
 ## Visual design best-practices
 
-Add visual clues for clickable items. It should be as clear as possible that they're interactable at first look without hovering. They should also have different visual state when hovering/touching on them that indicates that they are being clicked, which helps with accessibility.
+- **Clickables**:
+  Add visual clues for clickable items.
+  It should be as clear as possible that they're interactable at first look without hovering.
+  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.
 
 ## Application data
 

src/presentation/assets/styles/_fonts.scss

@@ -40,3 +40,5 @@ $font-size-normal   : 18px;
 $font-size-large    : 22px;
 $font-size-larger   : 26px;
 $font-size-largest  : 40px;
+
+$font-size-relative-smaller: 85%;

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/_code-styling.scss

@@ -0,0 +1,45 @@
+@use "@/presentation/assets/styles/main" as *;
+
+@mixin code-block() {
+  pre {
+    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
+  }
+}
+
+@mixin inline-code() {
+  :not(pre)>code {
+    @content;
+  }
+}
+
+@mixin base-code() {
+  code {
+    @content;
+  }
+}
+
+@mixin style-code-elements(
+  $color-background,
+  $code-block-padding,
+) {
+  $border-radius: 2px; // Subtle rounding still maintaining sharp design.
+
+  @include base-code {
+    font-family: $font-normal;
+    border-radius: $border-radius;
+    font-size: $font-size-relative-smaller; // Keep relative size to scale right with different text sizes around.
+  }
+
+  @include inline-code {
+    background: $color-background;
+    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
+    padding: 0.2em 0.4em; // Balanced padding for readability, with `em` units scaling with font size.
+  }
+
+  @include code-block {
+    background: $color-background;
+    border-radius: $border-radius;
+    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+    padding: $code-block-padding;
+  }
+}

src/presentation/components/Scripts/View/Tree/NodeContent/Markdown/markdown-styles.scss

@@ -1,24 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
+@use "_code-styling" as *;
 @use 'sass:math';
 
-@mixin code-block() {
-  pre {
-    @content; // :has(> code) { @content; } would be better, but Firefox doesn't support it https://caniuse.com/css-has
-  }
-}
-
-@mixin inline-code() {
-  :not(pre) > code {
-    @content;
-  }
-}
-
-@mixin code() {
-  code {
-    @content;
-  }
-}
-
 @mixin no-margin($selectors) {
   #{$selectors} {
     margin: 0;
@@ -110,21 +93,6 @@
     }
   }
 
-  @include code {
-    font-family: $font-normal;
-    font-weight: 600;
-  }
-
-  @include inline-code {
-    word-break: break-all; // Enables inline code to wrap with the text, even for long single words (like registry paths), thus preventing overflow.
-  }
-
-  @include code-block {
-    padding: $base-spacing;
-    background: $color-primary-darker;
-    overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
-  }
-
   @include apply-uniform-vertical-spacing($base-spacing);
   @include apply-uniform-horizontal-spacing($base-spacing);
 
@@ -140,4 +108,9 @@
     padding: 0 $base-spacing;
     border-left: .25em solid $color-primary;
   }
+
+  @include style-code-elements(
+    $code-block-padding: $base-spacing,
+    $color-background: $color-primary-darker,
+  );
 }