From 7055c853f3ef48846825006da984fc9444b372f2 Mon Sep 17 00:00:00 2001 From: shani-terminus Date: Mon, 1 Apr 2019 14:13:15 -0400 Subject: [PATCH] chore(Accessibility): BREAKING CHANGE - base font weight increased to 400 --- README.md | 15 +++++++++++++-- demo/index.html | 2 +- package.json | 5 +++-- .../csv-entry/src/csv-entry.component.scss | 2 +- terminus-ui/link/src/link.component.scss | 2 +- .../navigation/src/navigation.component.scss | 2 +- terminus-ui/scss/helpers/_typography.scss | 8 ++++---- yarn.lock | 8 ++++---- 8 files changed, 28 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 53a2162d6..62f7f801e 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,8 @@ The library of UI components used for Terminus applications. - [Constants](#constants) - [Style Helpers](#style-helpers) - [Installation](#installation) -- [Global Styles](#global-styles) + - [Fonts and Typefaces](#fonts-and-typefaces) + - [Global Styles](#global-styles) - [SCSS Helpers](#scss-helpers) - [Contributing](#contributing) - [Contributors](#contributors) @@ -222,7 +223,17 @@ $ yarn add @amcharts/amcharts4 @amcharts/amcharts4-geodata ``` -## Global Styles +### Fonts and Typefaces + +Add the following links to install the body fonts and icon fonts used by the library: + +```html + + +``` + + +### Global Styles To use the global styles, import the CSS file into your stylesheets: diff --git a/demo/index.html b/demo/index.html index 0ddc4fd42..e04ccea93 100644 --- a/demo/index.html +++ b/demo/index.html @@ -7,7 +7,7 @@ - + diff --git a/package.json b/package.json index 0cd8aae13..bae64ef28 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,8 @@ "release": { "branch": "master", "plugins": [ - ["@semantic-release/release-notes-generator", + [ + "@semantic-release/release-notes-generator", { "parserOpts": { "noteKeywords": [ @@ -172,7 +173,7 @@ "@angular/platform-browser": "^7.2.2", "@angular/platform-browser-dynamic": "^7.2.2", "@angular/router": "^7.2.2", - "@terminus/ngx-tools": ">=5.0.0", + "@terminus/ngx-tools": "^6.3.0", "@terminus/ui": "latest", "date-fns": "2.0.0-alpha.26", "ngx-perfect-scrollbar": "^7.2.0", diff --git a/terminus-ui/csv-entry/src/csv-entry.component.scss b/terminus-ui/csv-entry/src/csv-entry.component.scss index e73c1e559..76d679317 100644 --- a/terminus-ui/csv-entry/src/csv-entry.component.scss +++ b/terminus-ui/csv-entry/src/csv-entry.component.scss @@ -124,7 +124,7 @@ &--invalid { color: color(warn); - font-weight: 400; + font-weight: $type__weight--base; } } diff --git a/terminus-ui/link/src/link.component.scss b/terminus-ui/link/src/link.component.scss index 95f61bc83..4e42ba8ae 100644 --- a/terminus-ui/link/src/link.component.scss +++ b/terminus-ui/link/src/link.component.scss @@ -107,7 +107,7 @@ .mat-menu-content & { color: color(pure, dark); display: block; - font-weight: 300; + font-weight: $type__weight--base; padding: spacing(small, 1) spacing(); text-decoration: none; transition: background 400ms $g-material-background-easing; diff --git a/terminus-ui/navigation/src/navigation.component.scss b/terminus-ui/navigation/src/navigation.component.scss index 20e013f3a..b08a9ce88 100644 --- a/terminus-ui/navigation/src/navigation.component.scss +++ b/terminus-ui/navigation/src/navigation.component.scss @@ -120,7 +120,7 @@ // wrapper for welcome message &-welcome { - font-weight: 300; + font-weight: $type__weight--base; } // diff --git a/terminus-ui/scss/helpers/_typography.scss b/terminus-ui/scss/helpers/_typography.scss index 47bc5ce27..5162a80ba 100644 --- a/terminus-ui/scss/helpers/_typography.scss +++ b/terminus-ui/scss/helpers/_typography.scss @@ -44,7 +44,7 @@ $type__size--base: 16px !default; * @nuclide * @section Typography */ -$type__weight--base: 300 !default; +$type__weight--base: 400 !default; /** * The available typography formats @@ -146,7 +146,7 @@ $typography-body-levels: ( @if $level == 4 { font-size: 112px; - font-weight: 300; + font-weight: 400; letter-spacing: -.01em; line-height: 112px; } @@ -189,7 +189,7 @@ $typography-body-levels: ( } @if $level == 1 { - font-weight: 300; + font-weight: 400; // TODO: overwrite in files rather than this nested chain (too specific) https://github.com/GetTerminus/terminus-ui/issues/1152 // Don't apply custom line-height to buttons @@ -227,7 +227,7 @@ $typography-body-levels: ( @if $format == 'hint' { color: color(utility); font-size: 75%; - font-weight: 300; + font-weight: 400; letter-spacing: .01em; line-height: 1.5; } diff --git a/yarn.lock b/yarn.lock index 86f3fdeca..d9f6b786f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -780,10 +780,10 @@ into-stream "^4.0.0" lodash "^4.17.4" -"@terminus/ngx-tools@>=5.0.0": - version "6.1.0" - resolved "https://registry.yarnpkg.com/@terminus/ngx-tools/-/ngx-tools-6.1.0.tgz#34f4935879904c7630118bb2df131eecd12e79da" - integrity sha512-bW8ch5/n7PpSkj//00SBmbW+iJi78uTEYM67oFd4J6+enqK8CKZWe43w5f+GKhl7k0hzVyllfJ53x+7SS77rHw== +"@terminus/ngx-tools@^6.3.0": + version "6.3.0" + resolved "https://registry.yarnpkg.com/@terminus/ngx-tools/-/ngx-tools-6.3.0.tgz#146b7cdadbc21bdd8d3cef6ff9c6d1b89fc98f22" + integrity sha512-4V4zC/Ctg5GPzb+gUdpUJf3yx+C4j2EAFDFaEaBNUGgoTSIynbVSqFgJAQOz3iVgqAvXNi/FpiJbsDs+kdNafA== dependencies: tslib "^1.9.0"