Skip to content
This repository has been archived by the owner on Jul 12, 2019. It is now read-only.

Commit

Permalink
fix(type): allow type styles to inherit font-family (#465)
Browse files Browse the repository at this point in the history 
* fix(type): allow type styles to inherit font-family

* chore(test): update snapshots

* Update _reset.scss
  • Loading branch information
@joshblack
joshblack authored Apr 3, 2019
1 parent d47d12f commit 0d06371
Show file tree
Hide file tree
Showing 8 changed files with 127 additions and 165 deletions.
53 changes: 47 additions & 6 deletions packages/type/examples/preview/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ function App() {
<React.Fragment>
<TableOfContents />
<FontFaces />
<TypeScale />
<TypeStyles />
<TypeScale />
</React.Fragment>
);
}
Expand All @@ -35,10 +35,10 @@ function TableOfContents() {
<a href="#font-faces">Font faces</a>
</li>
<li>
<a href="#type-scale">Type scale</a>
<a href="#type-styles">Type styles</a>
</li>
<li>
<a href="#type-styles">Type styles</a>
<a href="#type-scale">Type scale</a>
</li>
</ul>
</React.Fragment>
Expand Down Expand Up @@ -161,6 +161,31 @@ function TypeScale() {
}

function TypeStyles() {
const fontFamilies = [
{
title: 'Arabic',
fontFamily: 'IBM Plex Arabic',
sample: 'السادس',
dir: 'rtl',
},
{
title: 'Devanagari',
fontFamily: 'IBM Plex Devanagari',
sample: 'कारन प्रदान',
},
{
title: 'Hebrew',
fontFamily: 'IBM Plex Sans Hebrew',
sample: 'אחרים בהתייחסות',
dir: 'rtl',
},
{
title: 'Thai',
fontFamily: 'IBM Plex Thai',
sample: 'บลูเบอร์รีแอคทีฟซู',
},
];

return (
<article>
<header>
Expand All @@ -170,8 +195,15 @@ function TypeStyles() {
<table>
<thead>
<tr>
<td>Token</td>
<td>Sample</td>
<th>Token</th>
<th>Sample</th>
{fontFamilies.map(({ dir, title }) => (
<th
key={title}
style={{ textAlign: dir === 'rtl' ? 'right' : 'left' }}>
{title}
</th>
))}
</tr>
</thead>
<tbody>
Expand All @@ -183,8 +215,17 @@ function TypeStyles() {
</pre>
</td>
<td className={`bx--type-${formatTokenName(token)}`}>
Text sample
<span>Text sample</span>
</td>
{fontFamilies.map(({ dir, fontFamily, title, sample }) => (
<td
key={title}
className={`bx--type-${formatTokenName(token)}`}
style={{ fontFamily }}
dir={dir}>
<span>{sample}</span>
</td>
))}
</tr>
))}
</tbody>
Expand Down
32 changes: 32 additions & 0 deletions packages/type/examples/preview/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,38 @@
//------------------------------------------------------------------------------
// Demo-specific
//------------------------------------------------------------------------------
th {
text-align: left;
}

.samples {
max-width: 560px;
}

@font-face {
font-family: 'IBM Plex Arabic';
font-weight: 400;
src: url('https://unpkg.com/@ibm/plex@1.3.1/IBM-Plex-Arabic/fonts/complete/woff2/IBMPlexArabic-Regular.woff2')
format('woff2');
}

@font-face {
font-family: 'IBM Plex Devanagari';
font-weight: 400;
src: url('https://unpkg.com/@ibm/plex@1.3.1/IBM-Plex-Devanagari/fonts/complete/woff2/IBMPlexDevanagari-Regular.woff2')
format('woff2');
}

@font-face {
font-family: 'IBM Plex Sans Hebrew';
font-weight: 400;
src: url('https://unpkg.com/@ibm/plex@1.3.1/IBM-Plex-Sans-Hebrew/fonts/complete/woff2/IBMPlexSansHebrew-Regular.woff2')
format('woff2');
}

@font-face {
font-family: 'IBM Plex Thai';
font-weight: 400;
src: url('https://unpkg.com/@ibm/plex@1.3.1/IBM-Plex-Thai/fonts/complete/woff2/IBMPlexThai-Regular.woff2')
format('woff2');
}
27 changes: 20 additions & 7 deletions packages/type/scss/_reset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,36 @@
@import '@carbon/layout/scss/convert';
@import 'font-family';

/// Include a type reset that individuals can use in their projects for
/// consistent rendering
@mixin carbon--type-reset() {
/// Include a type reset for a given body and mono font family.
/// @param {Number} $base-font-size - the base font size for your document
/// @param {String} $body-font-family - the font family used on the <body>
/// element
/// @param {String} $mono-font-family - the font family used on elements that
/// require mono fonts, like the <code> element
@mixin carbon--type-reset(
$base-font-size: $carbon--base-font-size,
$body-font-family: carbon--font-family('sans'),
$mono-font-family: carbon--font-family('mono')
) {
html {
font-size: $carbon--base-font-size;
font-size: $base-font-size;
}

body {
@include carbon--font-family('sans');
@include carbon--font-weight('regular');

font-family: $body-font-family;
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

// IBM Plex uses semibold instead of bold, as a result we need to map
// tags that use `font-weight: bold` to the semibold value
strong {
font-weight: 600;
}

code {
font-family: $mono-font-family;
}
}
26 changes: 0 additions & 26 deletions packages/type/scss/_styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,123 +6,107 @@
//

@import '@carbon/layout/scss/breakpoint';
@import 'font-family';
@import 'scale';

$caption-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(1),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(16px),
letter-spacing: 0.32px,
) !default;

$label-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(1),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(16px),
letter-spacing: 0.32px,
) !default;

$helper-text-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(1),
font-style: italic,
line-height: carbon--rem(16px),
letter-spacing: 0.32px,
) !default;

$body-short-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(18px),
letter-spacing: 0.16px,
) !default;

$body-long-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(20px),
letter-spacing: 0.16px,
) !default;

$body-short-02: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(3),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(22px),
letter-spacing: 0,
) !default;

$body-long-02: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(3),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(24px),
letter-spacing: 0,
) !default;

$code-01: (
font-family: carbon--font-family('mono'),
font-size: carbon--type-scale(1),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(16px),
letter-spacing: 0.32px,
) !default;

$code-02: (
font-family: carbon--font-family('mono'),
font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(20px),
letter-spacing: 0.32px,
) !default;

$heading-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(2),
font-weight: carbon--font-weight('semibold'),
line-height: carbon--rem(18px),
letter-spacing: 0.16px,
) !default;

$heading-02: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(3),
font-weight: carbon--font-weight('semibold'),
line-height: carbon--rem(22px),
letter-spacing: 0,
) !default;

$productive-heading-03: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(26px),
letter-spacing: 0,
) !default;

$productive-heading-04: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(7),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(36px),
letter-spacing: 0,
) !default;

$productive-heading-05: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(8),
font-weight: carbon--font-weight('regular'),
line-height: carbon--rem(40px),
letter-spacing: 0,
) !default;

$expressive-heading-03: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
line-height: 130%,
Expand All @@ -139,7 +123,6 @@ $expressive-heading-03: (
) !default;

$expressive-heading-04: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(7),
font-weight: carbon--font-weight('regular'),
line-height: 129%,
Expand All @@ -156,7 +139,6 @@ $expressive-heading-04: (
) !default;

$expressive-heading-05: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(8),
font-weight: carbon--font-weight('regular'),
line-height: 125%,
Expand All @@ -181,7 +163,6 @@ $expressive-heading-05: (
) !default;

$expressive-heading-06: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(8),
font-weight: carbon--font-weight('semibold'),
line-height: 125%,
Expand All @@ -206,7 +187,6 @@ $expressive-heading-06: (
) !default;

$expressive-paragraph-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(6),
font-weight: carbon--font-weight('light'),
line-height: 125%,
Expand All @@ -224,7 +204,6 @@ $expressive-paragraph-01: (
);

$quotation-01: (
font-family: carbon--font-family('serif'),
font-size: carbon--type-scale(5),
font-weight: carbon--font-weight('regular'),
line-height: 130%,
Expand All @@ -249,7 +228,6 @@ $quotation-01: (
) !default;

$quotation-02: (
font-family: carbon--font-family('serif'),
font-size: carbon--type-scale(8),
font-weight: carbon--font-weight('light'),
line-height: 125%,
Expand All @@ -274,7 +252,6 @@ $quotation-02: (
) !default;

$display-01: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(10),
font-weight: carbon--font-weight('light'),
line-height: 119%,
Expand All @@ -298,7 +275,6 @@ $display-01: (
) !default;

$display-02: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(10),
font-weight: carbon--font-weight('semibold'),
line-height: 119%,
Expand All @@ -322,7 +298,6 @@ $display-02: (
) !default;

$display-03: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(10),
font-weight: carbon--font-weight('light'),
line-height: 119%,
Expand Down Expand Up @@ -351,7 +326,6 @@ $display-03: (
) !default;

$display-04: (
font-family: carbon--font-family('sans'),
font-size: carbon--type-scale(10),
font-weight: carbon--font-weight('semibold'),
line-height: 119%,
Expand Down
Loading

0 comments on commit 0d06371

Please sign in to comment.