merge

2025-12-10 11:35:59 +01:00 · 2025-12-10 11:35:59 +01:00 · 35c9ab1d3b
commit 35c9ab1d3b
parent ceaf318272 ea755a2dc6
56 changed files with 1617 additions and 357 deletions
--- a/public/assets/css/src/_buttons.scss
+++ b/public/assets/css/src/_buttons.scss
@ -1,22 +1,59 @@
-button {
-  cursor: pointer;

-  border: 1px solid var(--color-browngray-300);
-  color: var(--color-browngray-300);
-  background-color: var(--color-panel-bg);
-  border-radius: var(--border-radius);
-  padding: 0.1rem 0.3rem;
+.unit-toggle{
+  button:not(.spinner-btn) {
+    cursor: pointer;
+  
+    border: 1px solid var(--color-interface-400);
+    color: var(--color-interface-400);
+    background-color: var(--color-panel-bg);
+    border-radius: var(--border-radius);
+    padding: 0.1rem 0.3rem;
+    height: calc(var(--input-h)*0.75);
+  

-  &.active {
-    border: 1px solid #000;
-    color: #000;
-  }
-
-  &.tab {
-    &.active {
-      background-color: #000;
-      color: #fff;
-      border: none;
+    &:not(.active):hover{
+      background-color: var(--color-interface-100);
    }
+  
+    &.active {
+      // border: 1px solid var(--color-interface-700);
+      color: var(--color-interface-050);
+      background-color: var(--color-interface-500);
+      cursor: auto;
+    }
+
+
  }
 }
+
+
+#editor-panel .tabs{
+  .tab{
+    color: var(--color-interface-600);
+    font-size: 1rem;
+    font-family: var(--sans-serif);
+    height: var(--input-h);
+    padding: 0 1ch;
+    border: 1px solid currentColor;
+    border-radius: calc(var(--input-h));
+    font-weight: 500;
+
+    &.active{
+      background-color: var(--color-interface-400);
+      border-color: var(--color-interface-400);
+      color: var(--color-panel-bg);
+    }
+
+    &:not(.active):hover{
+      cursor: pointer;
+      background-color: var(--color-interface-100);
+    }
+  }
+  // .tab {
+  //   &.active {
+  //     background-color: var(--color-txt);
+  //     color: #fff;
+  //     border: none;
+  //   }
+  // }
+}
--- a/public/assets/css/src/_colors.scss
+++ b/public/assets/css/src/_colors.scss
@ -0,0 +1,105 @@
+:root{
+
+
+  
+
+    // BRONZE SUBTIL
+    --color-interface-050: #f5f0ed; 
+    --color-interface-050: #f8f5f4;
+    --color-interface-100: #efe9e6;
+    --color-interface-200: #e0d5d0;
+    --color-interface-300: #cabbb5;
+    --color-interface-400: #b2a29c;
+    --color-interface-500: #998985;
+    --color-interface-600: #7f716e;
+    --color-interface-700: #675b58;
+    --color-interface-800: #5b4f4c; 
+    --color-interface-900: #483c39; 
+
+
+    --color-050: #f5f0ed; 
+    --color-050: #f8f5f4;
+    --color-100: #efe9e6;
+    --color-200: #e0d5d0;
+    --color-300: #cabbb5;
+    --color-400: #b2a29c;
+    --color-500: #998985;
+    --color-600: #7f716e;
+    --color-700: #675b58;
+    --color-800: #5b4f4c; 
+    --color-900: #483c39; 
+
+
+
+
+
+  // MARRON
+//   --color-interface-050: #fcf7f4;
+//   --color-interface-100: #f5eae4;
+//   --color-interface-200: #e9d4c8;
+//   --color-interface-300: #d8b7a6;
+//   --color-interface-400: #c39986;
+//   --color-interface-500: #ad826f;
+//   --color-interface-600: #916b5b;
+//   --color-interface-700: #755548;
+//   --color-interface-800: #5c443a;
+//   --color-interface-900: #46342b;
+
+  
+  
+
+  // CHAMPAGNE
+  // --color-interface-050: #f9f6f4;
+  // --color-interface-100: #f2ebe6;
+  // --color-interface-200: #e6d8cf;
+  // --color-interface-300: #d4c2b7;
+  // --color-interface-400: #c2ac9d;
+  // --color-interface-500: #ac9383;
+  // --color-interface-600: #927a6a;
+  // --color-interface-700: #776356;
+  // --color-interface-800: #5e4e45;
+  // --color-interface-900: #473a32;
+
+  // GREY
+  // --color-interface-050: #f7f6f4;
+  // --color-interface-100: #eceae6;
+  // --color-interface-200: #dedbd6;
+  // --color-interface-300: #c9c5be;
+  // --color-interface-400: #b4afa7;
+  // --color-interface-500: #9d978f;
+  // --color-interface-600: #86817a;
+  // --color-interface-700: #6e6a63;
+  // --color-interface-800: #55534d;
+  // --color-interface-900: #3e3c37;
+
+  
+}
+
+
+
+[data-color-type="elem"]{
+    --color-050: #fff4ec;
+    --color-100: #ffe6d6;
+    --color-200: #ffd1b5;
+    --color-300: #ffbc94;
+    --color-400: #ffa673;
+    --color-500: #ff945b;
+    --color-600: #ff8d54;
+    --color-700: #f97f46;
+    --color-800: #ff8a50; 
+    --color-900: #d96a30;
+}
+
+
+[data-color-type="page"]{
+    --color-050: #f4f0ff;
+    --color-100: #e7e1ff;
+    --color-200: #d4c8ff;
+    --color-300: #b9a8ff;
+    --color-400: #9f89ff;
+    --color-500: #866aff;
+    --color-600: #7a52ff;
+    --color-700: #7442ff;
+    --color-800: #7136ff; 
+    --color-900: #5223d6;
+}
--- a/public/assets/css/src/_fonts.scss
+++ b/public/assets/css/src/_fonts.scss
@ -0,0 +1,162 @@
+// DM Sans - Variable font (recommended)
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans[opsz,wght].woff2') format('woff2-variations');
+  font-weight: 100 1000;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2') format('woff2-variations');
+  font-weight: 100 1000;
+  font-style: italic;
+  font-display: swap;
+}
+
+// DM Sans - Static weights (fallback)
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  src: url('/assets/fonts/DMSans/DMSans-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+// Inconsolata - Monospace font
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inconsolata';
+  src: url('/assets/fonts/Inconsolata/Inconsolata-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
--- a/public/assets/css/src/_forms-section.scss
+++ b/public/assets/css/src/_forms-section.scss
@ -0,0 +1,56 @@
+.settings-section {
+
+  margin-top: 3em;
+
+
+  // .cons
+
+
+
+  h2 {
+    margin-bottom: var(--space);
+
+    font-weight: 600;
+    font-size: 1.4rem;
+    // border-radius: var(--border-radius);
+    // height: var(--input-h);
+    // padding: 0 1ch;
+    // display: flex;
+    // align-items: center;
+
+    // color: var(--color-interface-050);
+    // background-color: var(--color-800);
+    // display: inline-block;
+
+    border-bottom: 1px solid var(--color-200);
+    color: var(--color-800);
+
+//   border-bottom: 2px solid currentColor;
+//   margin-bottom: 2rem;
+  }
+
+  .infos{
+    font-size: 0.8rem;
+    color: var(--color-interface-400);
+  }
+
+  .settings-subsection:not(:last-child) {
+    border-bottom: 1px solid var(--color-interface-100);
+  }
+
+  .settings-subsection {
+    padding: var(--space-xs) 0;
+
+    h3 {
+        margin-top: calc(var(--space-xs)*1.5);
+      margin-bottom: calc(var(--space-xs)*2);
+    //   color: var(--color-600);
+      font-size: 1rem;
+      font-weight: 600;
+
+    }
+  }
+}
+
+   
+  
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@ -1,17 +1,132 @@
 select,
 input[type="text"],
 input[type="number"] {
-  background-color: var(--color-browngray-300);
+  height: var(--input-h);
+  border: 1px solid var(--color-interface-200);
+  background-color: var(--color-interface-100);
+  font-family: var(--sans-serif);
+  font-size: 1rem;
+  // min-width: var(--input-w);
+  // width: 100%;
+  // padding: 0 1ch;
+  
 }

+.field {
+  display: flex;
+
+  // label{
+  //   width: var(--label-w);
+  //   background-color: red;
+  //   flex-grow: 3;
+  // }
+
+  label {
+    font-weight: 600;
+    color: var(--color-800);
+  }
+
+
+
+  .input-with-unit {
+    display: flex;
+    gap: 0.3rem;
+
+    
+  }
+
+  .unit-toggle {
+    height: var(--input-h);
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+  }
+
+  .input-with-color {
+    width: 100%;
+    .clr-field {
+      width: 100%;
+      display: grid;
+      grid-template-columns: var(--input-h);
+      grid-gap: 1ch;
+      button{
+        grid-column: 1;
+        position: relative;
+        border-radius: var(--border-radius);
+
+      }
+      input{
+        grid-column: 2;
+      }
+
+    }
+  }
+}
+
+
+.field{
+  display: grid;
+  grid-template-columns: var(--label-w) 1fr;
+  label{
+    align-self: center;
+  }
+}
+
+.field-font{
+  display: grid;
+  grid-template-columns: var(--label-w) 1fr;
+  grid-template-rows: var(--input-h) var(--input-h);
+
+  select{
+    width: 100%;
+  }
+  .field-checkbox{
+    padding-top: var(--space-xs);
+    label{
+      font-weight: 400;
+      margin-left: 0.75ch;
+    }
+  }
+}
+
+.field-margin, .field-size{
+  display: inline-grid;
+  width: calc(50% - 1ch);
+  grid-template-columns: 6.5ch var(--input-w-small) 1fr;
+  margin-bottom: var(--space-xs);
+  input{ 
+    width: var(--input-w-small);
+    padding-left: 0.75ch;
+  }
+  &:nth-of-type(odd){
+    margin-right: 2ch;
+
+  }
+
+}
+
+.checkbox-field{
+  margin: calc(var(--space-xs)*2) 0;
+  grid-template-columns: 3ch 1fr;
+  label{
+    // font-weight: normal;
+  }
+  input{
+    justify-self: left;
+    margin: 0;
+  }
+}
+
+
+
+
 .field--view-only {
  opacity: 0.3;
 }

 /* Label with CSS tooltip */
 .label-with-tooltip {
-  text-decoration: underline dotted;
-  text-decoration-color: var(--color-browngray-200);
+  text-decoration: underline dotted 1px var(--color-200);
  text-underline-offset: 2px;
  cursor: help;
  position: relative;
@ -23,9 +138,9 @@ input[type="number"] {
    left: 0;
    margin-bottom: 4px;
    padding: 0.25rem 0.5rem;
-    background: var(--color-browngray-700);
-    color: var(--color-browngray-100);
-    font-family: "Courier New", Courier, monospace;
+    background: var(--color-interface-700);
+    color: var(--color-interface-050);
+    font-family: var(--mono);
    font-size: 0.75rem;
    border-radius: 4px;
    white-space: nowrap;
@ -43,86 +158,127 @@ input[type="number"] {
  }
 }

-.settings-section {
-  h2 {
-    border-bottom: 1px solid #000;
-    margin-bottom: var(--space-xs);
-  }
-  .settings-subsection:not(:last-child) {
-    border-bottom: 1px solid var(--color-browngray-050);
-  }

-  .settings-subsection {
-    padding: var(--space-xs) 0;

-    h3 {
-      margin-bottom: var(--space-xs);
-    }

-    .field {
-      display: flex;

-      label,
-      select {
-        width: 50%;
-      }

-      input {
-        padding: 0.1rem 0.1rem 0.1rem 0.3rem;
-      }

-      .input-with-unit {
-        display: flex;
-        gap: 0.3rem;
+// INPUT NUMBER ===============================================

-        .unit-toggle {
-          display: flex;
-          gap: 0.3rem;
-        }
-      }
-
-      .input-with-color {
-        width: 50%;
-        .clr-field {
-          display: flex;
-          button {
-            position: absolute;
-            transform: none;
-            height: 1.1rem;
-            top: auto;
-            right: auto;
-            cursor: pointer;
-          }
-
-          input {
-            padding-left: 2.5rem;
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    &.margins {
-      display: flex;
-      flex-wrap: wrap;
-      row-gap: var(--space-xs);
-
-      h3 {
-        width: 100%;
-      }
-      .field {
-        width: 50%;
-
-        label {
-          width: 30%;
-        }
-
-        .input-with-unit {
-          input {
-            width: 50%;
-          }
-        }
-      }
-    }
-  }
+// Masquer les spinners natifs partout
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
 }
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+
+.number-input{
+  position: relative;
+  // padding: 0 1ch!important;
+  input{
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .spinner-buttons{
+    height: var(--input-h);
+    width:  var(--input-h);
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    button{
+      height: calc(var(--input-h)*0.6);
+      cursor: pointer;
+      padding: 0;
+      svg path{
+          fill: var(--color-interface-600);
+      }
+      &:hover{
+        svg path{
+          fill: var(--color-interface-900);
+      }
+      }
+    }
+    .spinner-down{
+      svg{
+        position: relative;
+        top: -2px;
+      }
+    }
+    
+
+  }
+
+}
+// Composant NumberInput avec boutons personnalisés
+// .number-input {
+//   position: relative;
+//   display: flex;
+//   align-items: center;
+//   width: 100%;
+//   position: relative;
+
+//   input[type="number"] {
+//     width: 100%;
+//     box-sizing: border-box;
+//   }
+
+//   .spinner-buttons {
+//     background-color: red;
+//     position: absolute;
+//     right: 1px;
+//     top: 1px;
+//     bottom: 1px;
+//     display: flex;
+//     flex-direction: column;
+//     justify-content: center;
+//     gap: 1px;
+//     z-index: 10;
+
+//     .spinner-btn {
+//       display: flex;
+//       align-items: center;
+//       justify-content: center;
+//       width: 20px;
+//       height: 10px;
+//       padding: 0;
+//       margin: 0;
+//       background-color: var(--color-interface-200);
+//       border: 1px solid var(--color-interface-300);
+//       border-radius: 2px;
+//       cursor: pointer;
+//       transition: background-color 0.15s ease;
+//       color: var(--color-interface-700);
+//       line-height: 0;
+
+//       svg {
+//         width: 8px;
+//         height: 6px;
+//         display: block;
+//       }
+
+//       &:hover:not(:disabled) {
+//         background-color: var(--color-interface-300);
+//         color: var(--color-interface-900);
+//       }
+
+//       &:active:not(:disabled) {
+//         background-color: var(--color-interface-400);
+//       }
+
+//       &:disabled {
+//         opacity: 0.3;
+//         cursor: not-allowed;
+//       }
+//     }
+//   }
+// }
--- a/public/assets/css/src/_settings-popup.scss
+++ b/public/assets/css/src/_settings-popup.scss
@ -60,38 +60,38 @@
 }

 // Label with CSS tooltip
-.label-with-tooltip {
-  text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  cursor: help;
-  position: relative;
+// .label-with-tooltip {
+//   text-decoration: underline dotted;
+//   text-underline-offset: 2px;
+//   cursor: help;
+//   position: relative;

-  &::after {
-    content: attr(data-css);
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 4px;
-    padding: 0.25rem 0.5rem;
-    background: var(--color-browngray-700, #3d3d3d);
-    color: var(--color-browngray-100, #f5f5f5);
-    font-family: "Courier New", Courier, monospace;
-    font-size: 0.75rem;
-    border-radius: 4px;
-    white-space: nowrap;
-    opacity: 0;
-    visibility: hidden;
-    transition:
-      opacity 0.15s ease,
-      visibility 0.15s ease;
-    z-index: 10;
-  }
+//   &::after {
+//     content: attr(data-css);
+//     position: absolute;
+//     bottom: 100%;
+//     left: 0;
+//     margin-bottom: 4px;
+//     padding: 0.25rem 0.5rem;
+//     background: var(--color-browngray-700, #3d3d3d);
+//     color: var(--color-browngray-100, #f5f5f5);
+//     font-family: "Courier New", Courier, monospace;
+//     font-size: 0.75rem;
+//     border-radius: 4px;
+//     white-space: nowrap;
+//     opacity: 0;
+//     visibility: hidden;
+//     transition:
+//       opacity 0.15s ease,
+//       visibility 0.15s ease;
+//     z-index: 10;
+//   }

-  &:hover::after {
-    opacity: 1;
-    visibility: visible;
-  }
-}
+//   &:hover::after {
+//     opacity: 1;
+//     visibility: visible;
+//   }
+// }

 // Inheritance lock/unlock button
 .inheritance-btn {
--- a/public/assets/css/src/_text.scss
+++ b/public/assets/css/src/_text.scss
@ -1,15 +1,10 @@
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-input,
-select,
-figcaption,
-label {
-  font-family: sans-serif;
+body {
+  font-family: var(--sans-serif);
+  color: var(--color-txt);
 }
+
+// code,
+// pre,
+// .monospace {
+//   font-family: 'Inconsolata', monospace;
+// }
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@ -1,15 +1,37 @@
 :root {
-  --color-panel-bg: #e8e6e5;
+
+  
+
  --color-browngray-050: #f5f3f0;
  --color-browngray-200: #d0c4ba;
-  --color-browngray-300: #b5a9a1;

+
+
+
+
+  --color-txt: var(--color-interface-800);
+  --color-panel-bg: var(--color-interface-050);
+  
  --color-page-highlight: #ff8a50;
  --color-purple: #7136ff;

  --border-radius: 0.2rem;

  --space-xs: 0.5rem;
+  --space-s: 1rem;
+  --space: 1.5rem;

  --curve: cubic-bezier(0.86, 0, 0.07, 1);
+
+  --sans-serif: 'DM Sans', sans-serif;
+  --mono: 'Inconsolata', monospace;
+
+
+  --input-h: 26px;
+  --input-w: 160px;
+  --input-w-small: 45px;
+  --label-w: 18ch;
+  font-size: 14px;
+
+  --panel-w: 540px;
 }
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -1,3 +1,194 @@
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans[opsz,wght].woff2") format("woff2-variations");
+  font-weight: 100 1000;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2") format("woff2-variations");
+  font-weight: 100 1000;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "DM Sans";
+  src: url("/assets/fonts/DMSans/DMSans-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inconsolata";
+  src: url("/assets/fonts/Inconsolata/Inconsolata-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+:root {
+  --color-interface-050: #f5f0ed;
+  --color-interface-050: #f8f5f4;
+  --color-interface-100: #efe9e6;
+  --color-interface-200: #e0d5d0;
+  --color-interface-300: #cabbb5;
+  --color-interface-400: #b2a29c;
+  --color-interface-500: #998985;
+  --color-interface-600: #7f716e;
+  --color-interface-700: #675b58;
+  --color-interface-800: #5b4f4c;
+  --color-interface-900: #483c39;
+  --color-050: #f5f0ed;
+  --color-050: #f8f5f4;
+  --color-100: #efe9e6;
+  --color-200: #e0d5d0;
+  --color-300: #cabbb5;
+  --color-400: #b2a29c;
+  --color-500: #998985;
+  --color-600: #7f716e;
+  --color-700: #675b58;
+  --color-800: #5b4f4c;
+  --color-900: #483c39;
+}
+
+[data-color-type=elem] {
+  --color-050: #fff4ec;
+  --color-100: #ffe6d6;
+  --color-200: #ffd1b5;
+  --color-300: #ffbc94;
+  --color-400: #ffa673;
+  --color-500: #ff945b;
+  --color-600: #ff8d54;
+  --color-700: #f97f46;
+  --color-800: #ff8a50;
+  --color-900: #d96a30;
+}
+
+[data-color-type=page] {
+  --color-050: #f4f0ff;
+  --color-100: #e7e1ff;
+  --color-200: #d4c8ff;
+  --color-300: #b9a8ff;
+  --color-400: #9f89ff;
+  --color-500: #866aff;
+  --color-600: #7a52ff;
+  --color-700: #7442ff;
+  --color-800: #7136ff;
+  --color-900: #5223d6;
+}
+
 body,
 html {
  padding: 0;
@ -30,31 +221,30 @@ img {
 }

 :root {
-  --color-panel-bg: #e8e6e5;
  --color-browngray-050: #f5f3f0;
  --color-browngray-200: #d0c4ba;
-  --color-browngray-300: #b5a9a1;
+  --color-txt: var(--color-interface-800);
+  --color-panel-bg: var(--color-interface-050);
  --color-page-highlight: #ff8a50;
  --color-purple: #7136ff;
  --border-radius: 0.2rem;
  --space-xs: 0.5rem;
+  --space-s: 1rem;
+  --space: 1.5rem;
  --curve: cubic-bezier(0.86, 0, 0.07, 1);
+  --sans-serif: "DM Sans", sans-serif;
+  --mono: "Inconsolata", monospace;
+  --input-h: 26px;
+  --input-w: 160px;
+  --input-w-small: 45px;
+  --label-w: 18ch;
+  font-size: 14px;
+  --panel-w: 540px;
 }

-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-input,
-select,
-figcaption,
-label {
-  font-family: sans-serif;
+body {
+  font-family: var(--sans-serif);
+  color: var(--color-txt);
 }

 /* PagedJS print styles */
@ -79,7 +269,93 @@ h2 {
 select,
 input[type=text],
 input[type=number] {
-  background-color: var(--color-browngray-300);
+  height: var(--input-h);
+  border: 1px solid var(--color-interface-200);
+  background-color: var(--color-interface-100);
+  font-family: var(--sans-serif);
+  font-size: 1rem;
+}
+
+.field {
+  display: flex;
+}
+.field label {
+  font-weight: 600;
+  color: var(--color-800);
+}
+.field .input-with-unit {
+  display: flex;
+  gap: 0.3rem;
+}
+.field .unit-toggle {
+  height: var(--input-h);
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+}
+.field .input-with-color {
+  width: 100%;
+}
+.field .input-with-color .clr-field {
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--input-h);
+  grid-gap: 1ch;
+}
+.field .input-with-color .clr-field button {
+  grid-column: 1;
+  position: relative;
+  border-radius: var(--border-radius);
+}
+.field .input-with-color .clr-field input {
+  grid-column: 2;
+}
+
+.field {
+  display: grid;
+  grid-template-columns: var(--label-w) 1fr;
+}
+.field label {
+  align-self: center;
+}
+
+.field-font {
+  display: grid;
+  grid-template-columns: var(--label-w) 1fr;
+  grid-template-rows: var(--input-h) var(--input-h);
+}
+.field-font select {
+  width: 100%;
+}
+.field-font .field-checkbox {
+  padding-top: var(--space-xs);
+}
+.field-font .field-checkbox label {
+  font-weight: 400;
+  margin-left: 0.75ch;
+}
+
+.field-margin, .field-size {
+  display: inline-grid;
+  width: calc(50% - 1ch);
+  grid-template-columns: 6.5ch var(--input-w-small) 1fr;
+  margin-bottom: var(--space-xs);
+}
+.field-margin input, .field-size input {
+  width: var(--input-w-small);
+  padding-left: 0.75ch;
+}
+.field-margin:nth-of-type(odd), .field-size:nth-of-type(odd) {
+  margin-right: 2ch;
+}
+
+.checkbox-field {
+  margin: calc(var(--space-xs) * 2) 0;
+  grid-template-columns: 3ch 1fr;
+}
+.checkbox-field input {
+  justify-self: left;
+  margin: 0;
 }

 .field--view-only {
@ -88,9 +364,8 @@ input[type=number] {

 /* Label with CSS tooltip */
 .label-with-tooltip {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  text-decoration-color: var(--color-browngray-200);
+  -webkit-text-decoration: underline dotted 1px var(--color-200);
+          text-decoration: underline dotted 1px var(--color-200);
  text-underline-offset: 2px;
  cursor: help;
  position: relative;
@ -102,9 +377,9 @@ input[type=number] {
  left: 0;
  margin-bottom: 4px;
  padding: 0.25rem 0.5rem;
-  background: var(--color-browngray-700);
-  color: var(--color-browngray-100);
-  font-family: "Courier New", Courier, monospace;
+  background: var(--color-interface-700);
+  color: var(--color-interface-050);
+  font-family: var(--mono);
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
@ -118,89 +393,112 @@ input[type=number] {
  visibility: visible;
 }

+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.number-input {
+  position: relative;
+}
+.number-input input {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.number-input .spinner-buttons {
+  height: var(--input-h);
+  width: var(--input-h);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.number-input .spinner-buttons button {
+  height: calc(var(--input-h) * 0.6);
+  cursor: pointer;
+  padding: 0;
+}
+.number-input .spinner-buttons button svg path {
+  fill: var(--color-interface-600);
+}
+.number-input .spinner-buttons button:hover svg path {
+  fill: var(--color-interface-900);
+}
+.number-input .spinner-buttons .spinner-down svg {
+  position: relative;
+  top: -2px;
+}
+
+.settings-section {
+  margin-top: 3em;
+}
 .settings-section h2 {
-  border-bottom: 1px solid #000;
-  margin-bottom: var(--space-xs);
+  margin-bottom: var(--space);
+  font-weight: 600;
+  font-size: 1.4rem;
+  border-bottom: 1px solid var(--color-200);
+  color: var(--color-800);
+}
+.settings-section .infos {
+  font-size: 0.8rem;
+  color: var(--color-interface-400);
 }
 .settings-section .settings-subsection:not(:last-child) {
-  border-bottom: 1px solid var(--color-browngray-050);
+  border-bottom: 1px solid var(--color-interface-100);
 }
 .settings-section .settings-subsection {
  padding: var(--space-xs) 0;
 }
 .settings-section .settings-subsection h3 {
-  margin-bottom: var(--space-xs);
-}
-.settings-section .settings-subsection .field {
-  display: flex;
-}
-.settings-section .settings-subsection .field label,
-.settings-section .settings-subsection .field select {
-  width: 50%;
-}
-.settings-section .settings-subsection .field input {
-  padding: 0.1rem 0.1rem 0.1rem 0.3rem;
-}
-.settings-section .settings-subsection .field .input-with-unit {
-  display: flex;
-  gap: 0.3rem;
-}
-.settings-section .settings-subsection .field .input-with-unit .unit-toggle {
-  display: flex;
-  gap: 0.3rem;
-}
-.settings-section .settings-subsection .field .input-with-color {
-  width: 50%;
-}
-.settings-section .settings-subsection .field .input-with-color .clr-field {
-  display: flex;
-}
-.settings-section .settings-subsection .field .input-with-color .clr-field button {
-  position: absolute;
-  transform: none;
-  height: 1.1rem;
-  top: auto;
-  right: auto;
-  cursor: pointer;
-}
-.settings-section .settings-subsection .field .input-with-color .clr-field input {
-  padding-left: 2.5rem;
-  width: 100%;
-}
-.settings-section .settings-subsection.margins {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: var(--space-xs);
-}
-.settings-section .settings-subsection.margins h3 {
-  width: 100%;
-}
-.settings-section .settings-subsection.margins .field {
-  width: 50%;
-}
-.settings-section .settings-subsection.margins .field label {
-  width: 30%;
-}
-.settings-section .settings-subsection.margins .field .input-with-unit input {
-  width: 50%;
+  margin-top: calc(var(--space-xs) * 1.5);
+  margin-bottom: calc(var(--space-xs) * 2);
+  font-size: 1rem;
+  font-weight: 600;
 }

-button {
+.unit-toggle button:not(.spinner-btn) {
  cursor: pointer;
-  border: 1px solid var(--color-browngray-300);
-  color: var(--color-browngray-300);
+  border: 1px solid var(--color-interface-400);
+  color: var(--color-interface-400);
  background-color: var(--color-panel-bg);
  border-radius: var(--border-radius);
  padding: 0.1rem 0.3rem;
+  height: calc(var(--input-h) * 0.75);
 }
-button.active {
-  border: 1px solid #000;
-  color: #000;
+.unit-toggle button:not(.spinner-btn):not(.active):hover {
+  background-color: var(--color-interface-100);
 }
-button.tab.active {
-  background-color: #000;
-  color: #fff;
-  border: none;
+.unit-toggle button:not(.spinner-btn).active {
+  color: var(--color-interface-050);
+  background-color: var(--color-interface-500);
+  cursor: auto;
+}
+
+#editor-panel .tabs .tab {
+  color: var(--color-interface-600);
+  font-size: 1rem;
+  font-family: var(--sans-serif);
+  height: var(--input-h);
+  padding: 0 1ch;
+  border: 1px solid currentColor;
+  border-radius: calc(var(--input-h));
+  font-weight: 500;
+}
+#editor-panel .tabs .tab.active {
+  background-color: var(--color-interface-400);
+  border-color: var(--color-interface-400);
+  color: var(--color-panel-bg);
+}
+#editor-panel .tabs .tab:not(.active):hover {
+  cursor: pointer;
+  background-color: var(--color-interface-100);
 }

 .settings-popup {
@ -262,36 +560,6 @@ button.tab.active {
  font-weight: 600;
 }

-.label-with-tooltip {
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  text-underline-offset: 2px;
-  cursor: help;
-  position: relative;
-}
-.label-with-tooltip::after {
-  content: attr(data-css);
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  margin-bottom: 4px;
-  padding: 0.25rem 0.5rem;
-  background: var(--color-browngray-700, #3d3d3d);
-  color: var(--color-browngray-100, #f5f5f5);
-  font-family: "Courier New", Courier, monospace;
-  font-size: 0.75rem;
-  border-radius: 4px;
-  white-space: nowrap;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.15s ease, visibility 0.15s ease;
-  z-index: 10;
-}
-.label-with-tooltip:hover::after {
-  opacity: 1;
-  visibility: visible;
-}
-
 .inheritance-btn {
  display: flex;
  align-items: center;
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
--- a/public/assets/css/style.scss
+++ b/public/assets/css/style.scss
@ -1,7 +1,10 @@
-@import "src/_reset.scss";
-@import "src/_variables.scss";
-@import "src/_text.scss";
-@import "src/_print-styles.scss";
-@import "src/_forms.scss";
-@import "src/_buttons.scss";
-@import "src/_settings-popup.scss";
+@use "src/_fonts.scss" as *;
+@use "src/_colors.scss" as *;
+@use "src/_reset.scss" as *;
+@use "src/_variables.scss" as *;
+@use "src/_text.scss" as *;
+@use "src/_print-styles.scss" as *;
+@use "src/_forms.scss" as *;
+@use "src/_forms-section.scss" as *;
+@use "src/_buttons.scss" as *;
+@use "src/_settings-popup.scss" as *;
--- a/public/assets/fonts/DMSans/DMSans-Black.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Black.woff2
--- a/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-BlackItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Bold.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Bold.woff2
--- a/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-BoldItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraBlack.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraBlackItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraBold.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraBoldItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraLight.woff2
--- a/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ExtraLightItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Italic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Italic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2
+++ b/public/assets/fonts/DMSans/DMSans-Italic[opsz,wght].woff2
--- a/public/assets/fonts/DMSans/DMSans-Light.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Light.woff2
--- a/public/assets/fonts/DMSans/DMSans-LightItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-LightItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Medium.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Medium.woff2
--- a/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-MediumItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Regular.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Regular.woff2
--- a/public/assets/fonts/DMSans/DMSans-SemiBold.woff2
+++ b/public/assets/fonts/DMSans/DMSans-SemiBold.woff2
--- a/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-SemiBoldItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans-Thin.woff2
+++ b/public/assets/fonts/DMSans/DMSans-Thin.woff2
--- a/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2
+++ b/public/assets/fonts/DMSans/DMSans-ThinItalic.woff2
--- a/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2
+++ b/public/assets/fonts/DMSans/DMSans[opsz,wght].woff2
--- a/public/assets/fonts/DMSans/stylesheet.css
+++ b/public/assets/fonts/DMSans/stylesheet.css
@ -0,0 +1,137 @@
+/* DMSans Font Faces */
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BlackItalic.woff2") format("woff2");
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-BoldItalic.woff2") format("woff2");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBlack.woff2") format("woff2");
+  font-weight: 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBlackItalic.woff2") format("woff2");
+  font-weight: 950;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraBoldItalic.woff2") format("woff2");
+  font-weight: 800;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraLight.woff2") format("woff2");
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ExtraLightItalic.woff2") format("woff2");
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Italic[opsz,wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-LightItalic.woff2") format("woff2");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-SemiBoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans-ThinItalic.woff2") format("woff2");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: "DMSans";
+  src: url("DMSans[opsz,wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+}
+/* Example usage */
+body {
+  font-family: "DMSans", sans-serif;
+}/*# sourceMappingURL=stylesheet.css.map */
--- a/public/assets/fonts/DMSans/stylesheet.css.map
+++ b/public/assets/fonts/DMSans/stylesheet.css.map
@ -0,0 +1 @@
+{"version":3,"sources":["stylesheet.scss","stylesheet.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,kDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,wDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,0DAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,qDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,gDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,iDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,uDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADEA,kBAAA;AACA;EACE,iCAAA;ACAF","file":"stylesheet.css"}
--- a/public/assets/fonts/DMSans/stylesheet.scss
+++ b/public/assets/fonts/DMSans/stylesheet.scss
@ -0,0 +1,138 @@
+/* DMSans Font Faces */
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Black.woff2') format('woff2');
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-BlackItalic.woff2') format('woff2');
+  font-weight: 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-BoldItalic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBlack.woff2') format('woff2');
+  font-weight: 950;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBlackItalic.woff2') format('woff2');
+  font-weight: 950;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraBoldItalic.woff2') format('woff2');
+  font-weight: 800;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraLight.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ExtraLightItalic.woff2') format('woff2');
+  font-weight: 200;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Italic[opsz,wght].woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-LightItalic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-MediumItalic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-SemiBoldItalic.woff2') format('woff2');
+  font-weight: 600;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans-ThinItalic.woff2') format('woff2');
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'DMSans';
+  src: url('DMSans[opsz,wght].woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* Example usage */
+body {
+  font-family: 'DMSans', sans-serif;
+}
--- a/public/assets/fonts/webfont/Inconsolata-Black.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Black.woff2
--- a/public/assets/fonts/webfont/Inconsolata-Bold.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Bold.woff2
--- a/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-ExtraBold.woff2
--- a/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-ExtraLight.woff2
--- a/public/assets/fonts/webfont/Inconsolata-Light.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Light.woff2
--- a/public/assets/fonts/webfont/Inconsolata-Medium.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Medium.woff2
--- a/public/assets/fonts/webfont/Inconsolata-Regular.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Regular.woff2
--- a/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-SemiBold.woff2
--- a/public/assets/fonts/webfont/Inconsolata-Thin.woff2
+++ b/public/assets/fonts/webfont/Inconsolata-Thin.woff2
--- a/public/assets/fonts/webfont/stylesheet.css
+++ b/public/assets/fonts/webfont/stylesheet.css
@ -0,0 +1,61 @@
+/* Inconsolata Font Faces (ordered from lightest to boldest) */
+@font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Thin.woff2') format('woff2');
+    font-weight: 100;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-ExtraLight.woff2') format('woff2');
+    font-weight: 200;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Bold.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-ExtraBold.woff2') format('woff2');
+    font-weight: 800;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Inconsolata';
+    src: url('Inconsolata-Black.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
+  }
+  
+  /* Example usage */
+  /* code, pre, .mono {
+    font-family: 'Inconsolata', monospace;
+  } */
+
				`@ -0,0 +1 @@`
				{"version":3,"sources":["stylesheet.scss","stylesheet.css"],"names":[],"mappings":"AAAA,sBAAA;AACA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,kDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,wDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,yDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,0DAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,8CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,oDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,+CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,qDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,gDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,iDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,uDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,6CAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,gBAAA;EACA,kBAAA;ACCF;ADCA;EACE,qBAAA;EACA,mDAAA;EACA,oBAAA;EACA,kBAAA;ACCF;ADEA,kBAAA;AACA;EACE,iCAAA;ACAF","file":"stylesheet.css"}