Skip to content

Commit

Permalink
refactor and enhance typography size definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Jan 17, 2019
1 parent 2a41868 commit cc7fb2e
Show file tree
Hide file tree
Showing 17 changed files with 259 additions and 124 deletions.
2 changes: 1 addition & 1 deletion ...nb-design-system-portal/src/pages/uilib/typography/font-weights/usage-in-css.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ order: 1
/* This will result in loading the Medium Font */
.my-new-class {
font-family: 'Fedra Sans Std', sans-serif; /* Fallback */
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: 600;
font-style: normal;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/dnb-design-system-portal/src/pages/uilib/usage/best-practice/styling.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ This helps coworkers quickly find and understand the sentence and meaning of the
padding: 1em; /* Will be the same as our local font-size of 1.5rem */

/* 3. Fonts & Typography */
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1.5rem;
color: var(--color-sea-green);

Expand Down
27 changes: 19 additions & 8 deletions packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,17 +212,28 @@ exports[`Button scss have to match snapshot 1`] = `
*
*/
:root {
--font-family-std: 'Fedra Sans Std', sans-serif;
--font-family-default: 'Fedra Sans Std', sans-serif;
--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-weight-std: normal;
--font-weight-default: normal;
--font-weight-book: normal;
--font-weight-demi: 500;
--font-weight-medium: 600;
--font-size-xxx-small: 0.75rem;
--font-size-xx-small: 0.625rem;
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-default: 1rem;
--font-size-x-default: 1.25rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--font-size-x-large: 2.5rem;
--font-size-xx-large: 3rem;
--font-size-decimate: 0.5em;
--color-sea-green-alt: #008484;
--color-mint-green-50: #d2f0e9;
--color-mint-green-25: #e9f8f4;
Expand Down Expand Up @@ -255,22 +266,22 @@ exports[`Button scss have to match snapshot 1`] = `
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-std:
* --font-family-default:
*
*/
.dnb-typo-std,
.dnb-typo-book {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal; }
.dnb-typo-medium {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal; }
.dnb-typo-demi {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-demi);
font-style: normal; }
Expand Down Expand Up @@ -355,8 +366,8 @@ exports[`Button scss have to match snapshot 1`] = `
.dnb-button {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down
39 changes: 25 additions & 14 deletions packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,17 +192,28 @@ exports[`Dropdown scss have to match snapshot 1`] = `
*
*/
:root {
--font-family-std: 'Fedra Sans Std', sans-serif;
--font-family-default: 'Fedra Sans Std', sans-serif;
--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-weight-std: normal;
--font-weight-default: normal;
--font-weight-book: normal;
--font-weight-demi: 500;
--font-weight-medium: 600;
--font-size-xxx-small: 0.75rem;
--font-size-xx-small: 0.625rem;
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-default: 1rem;
--font-size-x-default: 1.25rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--font-size-x-large: 2.5rem;
--font-size-xx-large: 3rem;
--font-size-decimate: 0.5em;
--color-sea-green-alt: #008484;
--color-mint-green-50: #d2f0e9;
--color-mint-green-25: #e9f8f4;
Expand Down Expand Up @@ -235,22 +246,22 @@ exports[`Dropdown scss have to match snapshot 1`] = `
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-std:
* --font-family-default:
*
*/
.dnb-typo-std,
.dnb-typo-book {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal; }
.dnb-typo-medium {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal; }
.dnb-typo-demi {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-demi);
font-style: normal; }
Expand Down Expand Up @@ -343,8 +354,8 @@ exports[`Dropdown scss have to match snapshot 1`] = `
.dnb-button {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -492,8 +503,8 @@ a.dnb-button {
*/
.dnb-form-label {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -527,8 +538,8 @@ a.dnb-button {
.dnb-input {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -664,8 +675,8 @@ a.dnb-button {
.dnb-dropdown {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down
23 changes: 17 additions & 6 deletions packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,17 +66,28 @@ exports[`Icon scss have to match snapshot 1`] = `
*
*/
:root {
--font-family-std: 'Fedra Sans Std', sans-serif;
--font-family-default: 'Fedra Sans Std', sans-serif;
--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-weight-std: normal;
--font-weight-default: normal;
--font-weight-book: normal;
--font-weight-demi: 500;
--font-weight-medium: 600;
--font-size-xxx-small: 0.75rem;
--font-size-xx-small: 0.625rem;
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-default: 1rem;
--font-size-x-default: 1.25rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--font-size-x-large: 2.5rem;
--font-size-xx-large: 3rem;
--font-size-decimate: 0.5em;
--color-sea-green-alt: #008484;
--color-mint-green-50: #d2f0e9;
--color-mint-green-25: #e9f8f4;
Expand Down Expand Up @@ -109,22 +120,22 @@ exports[`Icon scss have to match snapshot 1`] = `
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-std:
* --font-family-default:
*
*/
.dnb-typo-std,
.dnb-typo-book {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal; }
.dnb-typo-medium {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal; }
.dnb-typo-demi {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-demi);
font-style: normal; }
Expand Down
39 changes: 25 additions & 14 deletions ...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,17 +49,28 @@ exports[`InputMasked scss have to match snapshot 1`] = `
*
*/
:root {
--font-family-std: 'Fedra Sans Std', sans-serif;
--font-family-default: 'Fedra Sans Std', sans-serif;
--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-weight-std: normal;
--font-weight-default: normal;
--font-weight-book: normal;
--font-weight-demi: 500;
--font-weight-medium: 600;
--font-size-xxx-small: 0.75rem;
--font-size-xx-small: 0.625rem;
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-default: 1rem;
--font-size-x-default: 1.25rem;
--font-size-medium: 1.5rem;
--font-size-large: 2rem;
--font-size-x-large: 2.5rem;
--font-size-xx-large: 3rem;
--font-size-decimate: 0.5em;
--color-sea-green-alt: #008484;
--color-mint-green-50: #d2f0e9;
--color-mint-green-25: #e9f8f4;
Expand Down Expand Up @@ -92,22 +103,22 @@ exports[`InputMasked scss have to match snapshot 1`] = `
* Typography
*
* The font-family properties are defined in the properties.scss file, like:
* --font-family-std:
* --font-family-default:
*
*/
.dnb-typo-std,
.dnb-typo-book {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: normal;
font-style: normal; }
.dnb-typo-medium {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-medium);
font-style: normal; }
.dnb-typo-demi {
font-family: var(--font-family-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-demi);
font-style: normal; }
Expand Down Expand Up @@ -200,8 +211,8 @@ exports[`InputMasked scss have to match snapshot 1`] = `
.dnb-button {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -349,8 +360,8 @@ a.dnb-button {
*/
.dnb-form-label {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -384,8 +395,8 @@ a.dnb-button {
.dnb-input {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down Expand Up @@ -521,8 +532,8 @@ a.dnb-button {
.dnb-input-masked {
font-family: sans-serif;
font-family: var(--font-family-std);
font-weight: var(--font-weight-std);
font-family: var(--font-family-default);
font-weight: var(--font-weight-default);
font-size: 1rem;
font-style: normal;
line-height: 1.5rem;
Expand Down
Loading

0 comments on commit cc7fb2e

Please sign in to comment.