feat: add monospace font as an official useable font property `font-f…

…amily: var(--font-family-monospace);` - currently this is needed by the #date-picker
dnbexperience · May 5, 2019 · c1f8bc9 · c1f8bc9
1 parent c210e53
commit c1f8bc9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 33 deletions.
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/code.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/code.md
@@ -31,8 +31,5 @@ So simply use them in Your Syntax:
 `<code>` snippets look best when rendered in a _Monotype_ font. Developers will normally have installed some of these fonts on their devices. Here is an example of CSS `font-family` usage:
 
 ```css
-font-family: /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas, /* Android 4+ */
-    Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace, /* KDE Plasma 5+ */
-    Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono, /* Linux/OpenOffice fallback */
-    Liberation Mono, /* fallback */ monospace; /* 1 */
+font-family: var(--font-family-monospace);
 ```
diff --git a/packages/dnb-ui-lib/src/style/core/properties.scss b/packages/dnb-ui-lib/src/style/core/properties.scss
@@ -9,6 +9,12 @@
   --font-family-book: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
   --font-family-demi: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
   --font-family-medium: 'Fedra Sans Std', sans-serif; /* Do not use, use --font-weight-... */
+  --font-family-monospace: /* macOS 10.10+ */ Menlo,
+    /* Windows 6+ */ Consolas, /* Android 4+ */ Roboto Mono,
+    /* Ubuntu 10.10+ */ Ubuntu Monospace, /* KDE Plasma 5+ */ Noto Mono,
+    /* KDE Plasma 4+ */ Oxygen Mono,
+    /* Linux/OpenOffice fallback */ Liberation Mono,
+    /* fallback */ monospace;
 
   // Typography Weights
   --font-weight-default: normal;

diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss
@@ -103,23 +103,6 @@
     list-style: none;
   }
 
-  /**
-   * 1. Use the default monospace user interface font
-   *    in all browsers (opinionated).
-   * 2. Correct the odd `em` font sizing in all browsers.
-   */
-
-  pre {
-    font-family:
-      /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
-      /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
-      /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono,
-      /* Linux/OpenOffice fallback */ Liberation Mono,
-      /* fallback */ monospace; /* 1 */
-
-    font-size: 1em; /* 2 */
-  }
-
   /* Text-level semantics
    */
 
@@ -147,15 +130,11 @@
    * 2. Correct the odd `em` font sizing in all browsers.
    */
 
+  pre,
   code,
   kbd,
   samp {
-    font-family:
-      /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
-      /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
-      /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono,
-      /* Linux/OpenOffice fallback */ Liberation Mono,
-      /* fallback */ monospace; /* 1 */
+    font-family: var(--font-family-monospace); /* 1 */
 
     font-size: 1em; /* 2 */
   }

diff --git a/packages/dnb-ui-lib/src/style/elements/code.scss b/packages/dnb-ui-lib/src/style/elements/code.scss
@@ -39,12 +39,7 @@
   tab-size: 2;
 
   font-size: inherit;
-  font-family:
-  /* macOS 10.10+ */ Menlo, /* Windows 6+ */ Consolas,
-    /* Android 4+ */ Roboto Mono, /* Ubuntu 10.10+ */ Ubuntu Monospace,
-    /* KDE Plasma 5+ */ Noto Mono, /* KDE Plasma 4+ */ Oxygen Mono,
-    /* Linux/OpenOffice fallback */ Liberation Mono,
-    /* fallback */ monospace; /* 1 */
+  font-family: var(--font-family-monospace);
 
   pre {
     padding: 1rem;