Make ui small again

changelog/unreleased/enhancement-make-ui-smaller

@@ -0,0 +1,5 @@
+Enhancement: Make UI smaller
+
+We've adjusted several values to make the UI appear less big.
+
+https://github.com/owncloud/owncloud-design-system/pull/2270

changelog/unreleased/enhancement-use-inter

@@ -0,0 +1,5 @@
+Enhancement: Use Inter font
+
+We've switched the default font from Roboto to Inter.
+
+https://github.com/owncloud/owncloud-design-system/pull/2270

config/docs.config.js

@@ -17,7 +17,7 @@ module.exports = {
     maxWidth: "100%",
     sidebarWidth: 240,
     fontFamily: {
-      base: ["'Roboto'", "sans-serif"],
+      base: ["Inter", "sans-serif"],
       monospace: ["Consolas", "'Liberation Mono'", "Menlo", "monospace"],
     },
   },

docs/docs.font.scss

@@ -0,0 +1,4 @@
+@font-face {
+    font-family: Inter;
+    src: url('../src/assets/fonts/inter.ttf');
+}

docs/docs.styles.scss

@@ -3,13 +3,13 @@
  * (the odd formatting hence most of the classes are dynamic)
  */
 
-@import '../src/assets/tokens/docs';
 @import '../src/assets/tokens/ods';
-@import './docs.tokens';
-@import './docs.mixins';
+@import '../src/styles/styles';
+@import './docs.font';
 @import './docs.functions';
+@import './docs.mixins';
 @import './docs.spacing';
-@import '../src/styles/styles';
+@import './docs.tokens';
 
 /* LOCAL DESIGN TOKENS
 --------------------------------------------- */
@@ -231,7 +231,7 @@ p[class^="rsg--version"] {
   @include inset-squish-space($space-xs);
   margin: $space-xs 0 0;
   color: $color-bleu-de-france;
-  font-family: "Roboto", sans-serif;
+  font-family: $oc-docs-font-face;
   font-weight: $oc-docs-font-weight-normal;
   display: inline-block;
   line-height: $oc-docs-line-height-xsmall;
@@ -456,7 +456,7 @@ div[class^="rsg--tab"] {
       letter-spacing: 1px;
       font-size: $size-s;
       font-weight: $oc-docs-font-weight-normal;
-      font-family: $oc-docs-font-text;
+      font-family: $oc-docs-font-face;
       line-height: $oc-docs-line-height-small;
       @include inset-squish-space($space-s);
       cursor: pointer;
@@ -551,7 +551,7 @@ div[class^="rsg--root"] div[class^="rsg--tabs"] {
 
 // Status label is shown in top right corner for each component
 .status {
-  font-family: "Roboto", sans-serif;
+  font-family: $oc-docs-font-face;
   font-weight: $oc-docs-font-weight-normal;
   order: 1;
   align-self: flex-end;