From 0a41821a6a3b64d176314516ded5db305b6e154c Mon Sep 17 00:00:00 2001 From: Adam DeHaven <2229946+adamdehaven@users.noreply.github.com> Date: Mon, 2 May 2022 12:43:05 -0400 Subject: [PATCH] feat(fonts): default to non-licensed font-family (#611) * docs: remove font family * fix: system font * docs: add font-family variables * docs: fix typo * fix(kalert): fix icon color * feat(font-weight): add font-weight variable --- docs/style-guide/type.md | 24 ++++++++- src/components/KAlert/KAlert.vue | 8 +-- src/styles/_fonts.scss | 86 -------------------------------- src/styles/_utils.scss | 2 +- src/styles/_variables.scss | 4 +- src/styles/styles.scss | 3 +- 6 files changed, 31 insertions(+), 96 deletions(-) delete mode 100644 src/styles/_fonts.scss diff --git a/docs/style-guide/type.md b/docs/style-guide/type.md index 68898fcbf4..6d8ef54b81 100644 --- a/docs/style-guide/type.md +++ b/docs/style-guide/type.md @@ -35,8 +35,30 @@ mono: # Type -Kong uses the [Maison Neue](https://www.milieugrotesque.com/typefaces/maison-neue/) font face. +## Font family +Kongponents defaults to the system font for `sans-serif` and `monospace`. You can customize the `font-family` by setting the CSS variables as shown here: + +```scss +:root { + --font-family-sans: 'Roboto'; // custom font-family + --font-family-mono: 'Roboto Mono'; // custom font-family +} +``` + +## Font weight + +The default font-weight (for `body`) is set to `400`. You may customize the `font-weight` by setting the CSS variable as shown here: + +```scss +:root { + --font-weight-normal: 200; // custom font-weight +} +``` + +:::tip +This only applies to the `body` element and inherited font weights. Individual style rules still have varying `font-weight` attributes. +::: ## Font size There are utility classes for `font-size`. diff --git a/src/components/KAlert/KAlert.vue b/src/components/KAlert/KAlert.vue index 06b54738a5..2b19d2d7a8 100644 --- a/src/components/KAlert/KAlert.vue +++ b/src/components/KAlert/KAlert.vue @@ -484,19 +484,19 @@ div.k-alert.banner { .k-alert { button.close > .kong-icon { - svg.info { + &.info svg { stroke: var(--KAlertInfoColor, var(--blue-500, color(blue-500))); } - svg.success { + &.success svg { stroke: var(--KAlertSuccessColor, var(--green-600, color(green-600))); } - svg.danger { + &.danger svg { stroke: var(--KAlertDangerColor, var(--red-700, color(red-700))); } - svg.warning { + &.warning svg { stroke: var(--KAlertWarningColor, var(--yellow-500, color(yellow-500))); } } diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss deleted file mode 100644 index 7325703398..0000000000 --- a/src/styles/_fonts.scss +++ /dev/null @@ -1,86 +0,0 @@ -/* Maison Neue */ - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/Light/MaisonNeue-Light.ttf") format("truetype"); - font-weight: 100; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/LightItalic/MaisonNeue-LightItalic.ttf") format("truetype"); - font-weight: 100; - font-style: italic; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/Book/MaisonNeue-Book.ttf") format("truetype"); - font-weight: 200; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/BookItalic/MaisonNeue-BookItalic.ttf") format("truetype"); - font-weight: 200; - font-style: italic; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/Medium/MaisonNeue-Medium.ttf") format("truetype"); - font-weight: 300; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue"; - src: url("/assets/fonts/MaisonNeue/MediumItalic/MaisonNeue-MediumItalic.ttf") format("truetype"); - font-weight: 300; - font-style: italic; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/Demi/MaisonNeue-Demi.ttf") format("truetype"); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/DemiItalic/MaisonNeue-DemiItalic.ttf") format("truetype"); - font-weight: 400; - font-style: italic; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/Bold/MaisonNeue-Bold.ttf") format("truetype"); - font-weight: 500; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue"; - src: url("./assets/fonts/MaisonNeue/BoldItalic/MaisonNeue-BoldItalic.ttf") format("truetype"); - font-weight: 500; - font-style: italic; -} - -/* Maison Neue Mono */ -@font-face { - font-family: "Maison Neue Mono"; - src: url("./assets/fonts/MaisonNeue/Mono/MaisonNeue-Mono.ttf") format("truetype"); - font-weight: 100; - font-style: normal; -} - -@font-face { - font-family: "Maison Neue Mono"; - src: url("/assets/fonts/MaisonNeue/MonoItalic/MaisonNeue-MonoItalic.ttf") format("truetype"); - font-weight: 100; - font-style: italic; -} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 13244bdb0b..52f3411467 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -335,7 +335,7 @@ $sides: (top, right, bottom, left); min-height: 100vh !important; } -//remove button default styles for elements that act like buttons, but don't look like them +// remove button default styles for elements that act like buttons, but don't look like them .non-visual-button, .non-visual-button:focus, .non-visual-button:hover { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index bd12a036d4..0f973e1328 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -83,8 +83,8 @@ $type-sizes: ( xxs: 10px, ); $fonts: ( - sans: "Maison Neue", - mono: "Maison Neue Mono", + sans: sans-serif, + mono: monospace, ); // Retrieve color from $colors map ie. `color(blue-500)` diff --git a/src/styles/styles.scss b/src/styles/styles.scss index c1ac1b0728..33fc13f5a9 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -2,7 +2,6 @@ // Do not remove the comment above - allows other apps to identify the style block @import "variables"; -@import "fonts"; @import "typography"; @import "utils"; @import "forms/forms"; @@ -28,6 +27,6 @@ } // Font weight body { - font-weight: 200; + font-weight: var(--font-weight-normal, 400); } }