feat: define a better typography for the whole web interface

webui-src/app/scss/abstracts/_colors.scss

@@ -0,0 +1,21 @@
+//---------------------------------- Colors ----------------------------------//
+/// Primary Retro color
+$primary-retro-color: #118fcc !default;
+
+/// Primary color
+$primary-color: #019dff !default;
+
+/// Primary light color
+$primary-light-color: #9bdaff !default;
+
+/// Light red
+$red-color: #ff3a4a !default;
+
+/// Dark
+$dark-color: #14141b !default;
+
+/// Light
+$light-color: #eef3f6 !default;
+
+/// Message Starred Color
+$golden-yellow-color: #fcba03;

webui-src/app/scss/abstracts/_index.scss

@@ -1,3 +1,5 @@
-@forward "variables";
-@forward "mixins";
-@forward "functions";
+@forward 'variables';
+@forward 'colors';
+@forward 'mixins';
+@forward 'functions';
+@forward 'typography';

webui-src/app/scss/abstracts/_typography.scss

@@ -0,0 +1,45 @@
+//-------------------------------- Typography --------------------------------//
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2.25rem;
+}
+
+h3 {
+  font-size: 1.875rem;
+}
+
+h4 {
+  font-size: 1.5rem;
+}
+
+h5 {
+  font-size: 1.25rem;
+}
+
+h6 {
+  font-size: 1.125rem;
+}
+
+p {
+  font-size: 1rem;
+}
+
+.small {
+  font-size: 0.875rem;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+  font-weight: normal;
+}

webui-src/app/scss/abstracts/_variables.scss

@@ -1,22 +1,3 @@
 // -----------------------------------------------------------------------------
 // This file contains all application-wide Sass variables.
 // -----------------------------------------------------------------------------
-
-//---------------------------------- Colors ----------------------------------//
-/// Primary color
-$primary-color: #019dff !default;
-
-/// Primary light color
-$primary-light-color: #9bdaff !default;
-
-/// Light red
-$red-color: #ff3a4a !default;
-
-/// Dark
-$dark-color: #14141b !default;
-
-/// Light
-$light-color: #eef3f6 !default;
-
-/// Message Starred Color
-$golden-yellow-color: #fcba03;

webui-src/app/scss/base/_base.scss

@@ -75,8 +75,6 @@ table tr {
 }
 
 h3 {
-  font-size: 2em;
-  font-weight: 100;
   color: #444;
 }
 hr {

webui-src/app/scss/base/_reset.scss

@@ -1,5 +1,5 @@
 html {
-  font-size: 100%;
+  font-size: 14px;
   box-sizing: border-box;
 }
 
@@ -26,8 +26,8 @@ dd {
 }
 
 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
-ul[role="list"],
-ol[role="list"] {
+ul[role='list'],
+ol[role='list'] {
   list-style: none;
 }
 
@@ -66,7 +66,7 @@ select {
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   html:focus-within {
-   scroll-behavior: auto;
+    scroll-behavior: auto;
   }
   *,
   *::before,

webui-src/app/scss/components/_navbar.scss

@@ -13,7 +13,6 @@
   margin-right: 0rem;
 
   &__logo {
-    width: 130px;
     padding: 1.2rem 0;
     display: flex;
     gap: 0.3rem;
@@ -25,6 +24,7 @@
     }
 
     h4 {
+      font-size: 1.3rem;
       color: white;
       align-self: end;
     }

webui-src/app/scss/pages/_config.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/variables' as *;
+@use '../abstracts/colors' as *;
 
 .config-node-panel {
   position: relative;

webui-src/app/scss/pages/_files.scss

@@ -1,4 +1,4 @@
-@use '../abstracts/variables' as *;
+@use '../abstracts/colors' as *;
 
 .file-view {
   width: 90%;