Make ui small again (#2270)

owncloud · Aug 19, 2022 · baf0d0b · baf0d0b
1 parent 79dc03e
commit baf0d0b
Show file tree

Hide file tree

Showing 24 changed files with 185 additions and 527 deletions.
diff --git a/changelog/unreleased/enhancement-make-ui-smaller b/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
diff --git a/changelog/unreleased/enhancement-use-inter b/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
diff --git a/config/docs.config.js b/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"],
     },
   },

diff --git a/docs/docs.font.scss b/docs/docs.font.scss
@@ -0,0 +1,6 @@
+@font-face {
+    font-family: Inter;
+    src: url('../src/assets/fonts/inter.ttf');
+    font-weight: 100 900;
+    font-style: oblique 0deg 12deg;
+}
diff --git a/docs/docs.styles.scss b/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;