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

Commit

Permalink
feat(type): add type classes (#129)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joshblack
joshblack authored Dec 7, 2018
1 parent 827709e commit 4025bec
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 69 deletions.
64 changes: 32 additions & 32 deletions packages/type/examples/basic/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,19 @@ <h2>Font Faces</h2>
<tbody>
<tr>
<td>Light</td>
<td class="type-sans type-weight-light">Light</td>
<td class="bx--type-sans bx--type-light">Light</td>
</tr>
<tr>
<td>Regular</td>
<td class="type-sans">Regular</td>
<td class="bx--type-sans">Regular</td>
</tr>
<tr>
<td>Regular Italic</td>
<td class="type-sans type-style-italic">Regular</td>
<td class="bx--type-sans bx--type-italic">Regular</td>
</tr>
<tr>
<td>Semibold</td>
<td class="type-sans type-weight-semibold">Semibold</td>
<td class="bx--type-sans bx--type-semibold">Semibold</td>
</tr>
</tbody>
</table>
Expand All @@ -49,15 +49,15 @@ <h2>Font Faces</h2>
<tbody>
<tr>
<td>Light</td>
<td class="type-serif type-weight-light">Light</td>
<td class="bx--type-serif bx--type-light">Light</td>
</tr>
<tr>
<td>Regular</td>
<td class="type-serif">Regular</td>
<td class="bx--type-serif">Regular</td>
</tr>
<tr>
<td>Semibold</td>
<td class="type-serif type-weight-semibold">Semibold</td>
<td class="bx--type-serif bx--type-semibold">Semibold</td>
</tr>
</tbody>
</table>
Expand All @@ -72,15 +72,15 @@ <h2>Font Faces</h2>
<tbody>
<tr>
<td>Light</td>
<td class="type-mono type-weight-light">Light</td>
<td class="bx--type-mono bx--type-light">Light</td>
</tr>
<tr>
<td>Regular</td>
<td class="type-mono">Regular</td>
<td class="bx--type-mono">Regular</td>
</tr>
<tr>
<td>Semibold</td>
<td class="type-mono type-weight-semibold">Semibold</td>
<td class="bx--type-mono bx--type-semibold">Semibold</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -239,91 +239,91 @@ <h2>Type styles</h2>
</thead>
<tr>
<td><pre><code>caption-01</code></pre></td>
<td class="type-caption-01">Component</td>
<td class="bx--type-caption-01">Component</td>
</tr>
<tr>
<td><pre><code>label-01</code></pre></td>
<td class="type-label-01">Component</td>
<td class="bx--type-label-01">Component</td>
</tr>
<tr>
<td><pre><code>helper-text-01</code></pre></td>
<td class="type-helper-text-01">Component</td>
<td class="bx--type-helper-text-01">Component</td>
</tr>
<tr>
<td><pre><code>body-short-01</code></pre></td>
<td class="type-body-short-01">Component</td>
<td class="bx--type-body-short-01">Component</td>
</tr>
<tr>
<td><pre><code>body-short-02</code></pre></td>
<td class="type-body-short-02">Component</td>
<td class="bx--type-body-short-02">Component</td>
</tr>
<tr>
<td><pre><code>body-long-01</code></pre></td>
<td class="type-body-long-01">Component</td>
<td class="bx--type-body-long-01">Component</td>
</tr>
<tr>
<td><pre><code>body-long-02</code></pre></td>
<td class="type-body-long-02">Component</td>
<td class="bx--type-body-long-02">Component</td>
</tr>
<tr>
<td><pre><code>code-01</code></pre></td>
<td class="type-code-01">Component</td>
<td class="bx--type-code-01">Component</td>
</tr>
<tr>
<td><pre><code>code-02</code></pre></td>
<td class="type-code-02">Component</td>
<td class="bx--type-code-02">Component</td>
</tr>
<tr>
<td><pre><code>heading-01</code></pre></td>
<td class="type-heading-01">Component</td>
<td class="bx--type-heading-01">Component</td>
</tr>
<tr>
<td><pre><code>heading-02</code></pre></td>
<td class="type-heading-02">Component</td>
<td class="bx--type-heading-02">Component</td>
</tr>
<tr>
<td><pre><code>heading-03</code></pre></td>
<td class="type-heading-03">Component</td>
<td class="bx--type-heading-03">Component</td>
</tr>
<tr>
<td><pre><code>productive-heading-04</code></pre></td>
<td class="type-productive-heading-04">Component</td>
<td class="bx--type-productive-heading-04">Component</td>
</tr>
<tr>
<td><pre><code>productive-heading-05</code></pre></td>
<td class="type-productive-heading-05">Component</td>
<td class="bx--type-productive-heading-05">Component</td>
</tr>
<tr>
<td><pre><code>expressive-heading-04</code></pre></td>
<td class="type-expressive-heading-04">Component</td>
<td class="bx--type-expressive-heading-04">Component</td>
</tr>
<tr>
<td><pre><code>expressive-heading-05</code></pre></td>
<td class="type-expressive-heading-05">Component</td>
<td class="bx--type-expressive-heading-05">Component</td>
</tr>
<tr>
<td><pre><code>quotation-01</code></pre></td>
<td class="type-quotation-01">Component</td>
<td class="bx--type-quotation-01">Component</td>
</tr>
<tr>
<td><pre><code>quotation-02</code></pre></td>
<td class="type-quotation-02">Component</td>
<td class="bx--type-quotation-02">Component</td>
</tr>
<tr>
<td><pre><code>display-01</code></pre></td>
<td class="type-display-01">Component</td>
<td class="bx--type-display-01">Component</td>
</tr>
<tr>
<td><pre><code>display-02</code></pre></td>
<td class="type-display-02">Component</td>
<td class="bx--type-display-02">Component</td>
</tr>
<tr>
<td><pre><code>display-03</code></pre></td>
<td class="type-display-03">Component</td>
<td class="bx--type-display-03">Component</td>
</tr>
<tr>
<td><pre><code>display-04</code></pre></td>
<td class="type-display-04">Component</td>
<td class="bx--type-display-04">Component</td>
</tr>
</table>
</article>
Expand Down
41 changes: 4 additions & 37 deletions packages/type/examples/basic/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,17 @@
@import '../../scss/font-face/sans';
@import '../../scss/font-face/serif';
@import '../../scss/font-face/mono';
@import '../../scss/classes';

//------------------------------------------------------------------------------
// Font-face
//------------------------------------------------------------------------------
.type-sans,
.type-serif,
.type-mono {
@include font-weight('regular');
.bx--type-sans,
.bx--type-serif,
.bx--type-mono {
@include type-scale(8);
}

.type-sans {
@include font-family('sans');
}

.type-serif {
@include font-family('serif');
}

.type-mono {
@include font-family('mono');
}

.type-weight-light {
@include font-weight('light');
}

.type-weight-semibold {
@include font-weight('semibold');
}

.type-style-italic {
font-style: italic;
}

//------------------------------------------------------------------------------
// Type-scale
//------------------------------------------------------------------------------
Expand All @@ -48,15 +24,6 @@
}
}

//------------------------------------------------------------------------------
// Type styles
//------------------------------------------------------------------------------
@each $name, $value in $tokens {
.type-#{$name} {
@include type-style($name, map-has-key($value, breakpoints));
}
}

//------------------------------------------------------------------------------
// Spacing
//------------------------------------------------------------------------------
Expand Down
32 changes: 32 additions & 0 deletions packages/type/scss/_classes.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@import '@carbon/import-once/scss/import-once';
@import 'prefix';
@import 'styles';
@import 'font-family';

@include exports('@carbon/type/scss/_classes.scss') {
// Font families
@each $name, $value in $font-families {
.#{$prefix}--type-#{$name} {
font-family: $value;
}
}

// Font weights
@each $name, $value in $font-weights {
.#{$prefix}--type-#{$name} {
font-weight: $value;
}
}

// Font styles
.#{$prefix}--type-italic {
font-style: italic;
}

// Type styles
@each $name, $value in $tokens {
.#{$prefix}--type-#{$name} {
@include type-style($name, map-has-key($value, breakpoints));
}
}
}
1 change: 1 addition & 0 deletions packages/type/scss/_prefix.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
$prefix: 'bx' !default;

0 comments on commit 4025bec

Please sign in to comment.