From c1f8bc91cb9ea481fb0c18128edfd22b281192d1 Mon Sep 17 00:00:00 2001 From: Tobias Date: Sat, 4 May 2019 13:25:01 +0200 Subject: [PATCH] feat: add monospace font as an official useable font property `font-family: var(--font-family-monospace);` - currently this is needed by the #date-picker --- .../src/pages/uilib/elements/code.md | 5 +--- .../dnb-ui-lib/src/style/core/properties.scss | 6 +++++ packages/dnb-ui-lib/src/style/core/reset.scss | 25 ++----------------- .../dnb-ui-lib/src/style/elements/code.scss | 7 +----- 4 files changed, 10 insertions(+), 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 index 6e13ef7c4e5..a43d1bb3431 100644 --- 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: `` 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 index 0da2cf0f249..efe2fe2e02a 100644 --- 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 index dac90b61207..a37be8acc96 100644 --- 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 index ba1395d5175..2ed8e363304 100644 --- 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;