Theming options

src/assets/styles/_common-variables.scss

@@ -41,6 +41,10 @@ body {
     --iqser-blue-5: #c5d3eb;
     --iqser-pink-1: #f125de;
     --iqser-helpmode-primary: green;
+    --iqser-button-radius: 17px;
+    --iqser-button-font-size: 13px;
+    --iqser-button-height: 34px;
+    --iqser-font-family: 'Inter, sans-serif';
 }
 
 @mixin configureLight($args...) {

src/assets/styles/common-buttons.scss

@@ -1,8 +1,8 @@
 .mat-button,
 .mat-flat-button {
-    border-radius: 17px !important;
-    font-size: 13px !important;
-    height: 34px;
+    border-radius: var(--iqser-button-radius) !important;
+    font-size: var(--iqser-button-font-size) !important;
+    height: var(--iqser-button-height);
     display: flex !important;
     align-items: center;
 

src/assets/styles/common-controls.scss

@@ -6,7 +6,7 @@
         cursor: pointer;
         color: var(--iqser-accent);
         background: var(--iqser-white);
-        font-family: Inter, sans-serif;
+        font-family: var(--iqser-font-family);
         font-size: 13px;
         line-height: 14px;
         padding: 10px 14px;

src/assets/styles/common-fonts.scss

@@ -1,5 +1,3 @@
-/* inter-regular - latin */
-
 @font-face {
     font-family: 'OpenSans Extrabold';
     src: url('../font/OpenSans-ExtraBold.ttf') format('truetype');
@@ -34,3 +32,33 @@
     font-weight: 700;
     src: url('../font/Inter-VariableFont.ttf') format('truetype');
 }
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 300;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 400;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 500;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 600;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Nunito';
+    font-weight: 700;
+    src: url('../font/Nunito-VariableFont.ttf') format('truetype');
+}

src/assets/styles/common-inputs.scss

@@ -98,7 +98,7 @@ form .iqser-input-group:not(first-of-type) {
         padding-left: 11px;
         padding-right: 11px;
         border: 1px solid var(--iqser-inputs-outline);
-        font-family: Inter, sans-serif;
+        font-family: var(--iqser-font-family);
         font-size: 13px;
         background-color: var(--iqser-background);
         color: var(--iqser-text);

src/assets/styles/common-layout.scss

@@ -5,7 +5,7 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--iqser-font-family);
     color: var(--iqser-text);
     background-color: var(--iqser-background);
     font-size: 13px;
@@ -14,7 +14,7 @@ body {
     overflow: hidden;
 }
 
-redaction-root {
+body > *:first-child {
     display: flex;
     overflow: hidden;
 

src/assets/styles/common-texts.scss

@@ -51,7 +51,7 @@ a {
 }
 
 pre {
-    font-family: Inter, sans-serif;
+    font-family: var(--iqser-font-family);
     color: var(--iqser-text);
 }
 

src/assets/styles/common-toasts.scss

@@ -5,7 +5,7 @@ $toast-width: 400px;
     padding: 11px 16px;
     border-radius: 8px;
     background-image: none;
-    font-family: Inter, sans-serif;
+    font-family: var(--iqser-font-family);
     font-size: 13px;
     line-height: 18px;
     width: $toast-width;

src/assets/styles/common-utilities.scss

@@ -25,6 +25,16 @@ $sides: (top, bottom, left, right);
     }
 }
 
+@each $space in $values {
+    .m-#{$space} {
+        margin: #{$space}px !important;
+    }
+
+    .p-#{$space} {
+        padding: #{$space}px !important;
+    }
+}
+
 /* flex-${n} */
 
 @for $n from 1 through 5 {