@dscout/particle 1.0.0-alpha.2 → 1.0.0-alpha.3

package/styles/utilities/_typography.scss

@@ -1,69 +1,4 @@
-/*
-@styleguide
-@title Font Sizes
-
-Use font-size classes on any text elements.
-
-<h1 class="font-size--headline">Headline</h1>
-
-```html
-<h1 class="font-size--headline">Headline</h1>
-```
-
-<h3 class="font-size--subheadline">Subheadline</h3>
-
-```html
-<h3 class="font-size--subheadline">Subheadline</h3>
-```
-
-<span class="font-size--xxxl">XXXL Text</span>
-
-```html
-<span class="font-size--xxxl">XXXL Text</span>
-```
-
-<span class="font-size--xxl">XXL Text</span>
-
-```html
-<span class="font-size--xxl">XXL Text</span>
-```
-
-<span class="font-size--xl">XL Text</span>
-
-```html
-<span class="font-size--xl">XL Text</span>
-```
-
-<span class="font-size--l">Large Text</span>
-
-```html
-<span class="font-size--l">Large Text</span>
-```
-
-<span class="font-size--base">Base Font Size</span>
-
-```html
-<span class="font-size--m">Base Font Size</span>
-```
-
-<span class="font-size--s">Small Text</span>
-
-```html
-<span class="font-size--s">Small Text</span>
-```
-
-<span class="font-size--xs">XS Text</span>
-
-```html
-<span class="font-size--xs">XS Text</span>
-```
-
-<span class="font-size--xxs">XXS Text</span>
-
-```html
-<span class="font-size--xxs">XXS Text</span>
-```
-*/
+/*=== Font size ===*/
 
 .font-size--xxs  { font-size: var(--font-size--xxs); }
 .font-size--xs   { font-size: var(--font-size--xs); }
@@ -77,164 +12,30 @@ Use font-size classes on any text elements.
 .font-size--headline    { font-size: var(--font-size--headline); }
 .font-size--subheadline { font-size: var(--font-size--subheadline); }
 
-/*
-@styleguide
-@title Font Family
-
-Set the font family to one of three supported enums:
-
-- `stack`
-- `emoji`
-- `monospace`
-
-<p class="font--stack">Default font stack</p>
-
-```html
-<p class="font--stack">Default font stack</p>
-```
-
-<p class="font--emoji">👍</p>
-
-```html
-<p class="font--emoji">👍</p>
-```
-
-<p class="font--monospace">Monospace</p>
-
-```html
-<p class="font--monospace">Monospace</p>
-```
-*/
+/*=== Font family ===*/
 
 .font--stack { font-family: var(--font--stack); }
 .font--emoji { font-family: var(--font--emoji); }
 .font--monospace { font-family: var(--font--monospace); }
 
-/*
-@styleguide
-@title Line Heights
-
-Use the line-height class names on any text element.
-
-<p class="line-height--copy">Regular line-height</p>
-
-```html
-<p class="line-height--copy">Regular line-height</p>
-```
-
-<p class="line-height--solid">Solid line-height</p>
-
-```html
-<p class="line-height--solid">Solid line-height</p>
-```
-
-<h3 class="line-height--title">Title line-height</h3>
-
-```html
-<h3 class="line-height--title">Title line-height</h3>
-```
-
-<span class="line-height--loose">Loose line-height</span>
-
-```html
-<span class="line-height--loose">Loose line-height</span>
-```
-*/
-
-// === LINE HEIGHTS === //
-// 1.2 Minor Third
-// http://type-scale.com
+/*=== Line heights ===*/
 
 .line-height--copy  { line-height: var(--line-height--copy); }
 .line-height--solid { line-height: var(--line-height--solid); }
 .line-height--title { line-height: var(--line-height--title); }
 .line-height--loose { line-height: var(--line-height--loose); }
 
-/*
-@styleguide
-@title Letter Spacings
-
-Use the "tracked" classes on any text element.
-
-<p class="tracked--loose">Loose</p>
-
-```html
-<p class="tracked--loose">Loose</p>
-```
-
-<p class="tracked--looser">Looser</p>
-
-```html
-<p class="tracked--looser">Looser</p>
-```
-
-<p class="tracked--tight">Tight</p>
 
-```html
-<p class="tracked--tight">Tight</p>
-```
+/*=== Tracking ===*/
 
-<p class="tracked--mega">Mega</p>
-
-```html
-<p class="tracked--mega">Mega</p>
-```
-
-<p class="tracked--tighter">Tighter</p>
-
-```html
-<p class="tracked--tighter">Tighter</p>
-```
-*/
-
-// === TRACKING === //
-
-.tracked--tighter { letter-spacing: var(--tracked--tigher); }
+.tracked--tighter { letter-spacing: var(--tracked--tighter); }
 .tracked--tight   { letter-spacing: var(--tracked--tight); }
 .tracked--loose   { letter-spacing: var(--tracked--loose); }
 .tracked--looser  { letter-spacing: var(--tracked--looser); }
 .tracked--mega    { letter-spacing: var(--tracked--mega); }
 
-/*
-@styleguide
-@title Font Weights
-
-Use the font weight classes on any text element.
-
-<p class="font-weight--normal">Normal</p>
-
-```html
-<p class="font-weight--normal">Normal</p>
-```
-
-<span class="font-weight--semibold">Semibold</span>
-
-```html
-<span class="font-weight--semibold">Semibold</span>
-```
-
-<span class="font-weight--bold">Bold</span>
 
-```html
-<span class="font-weight--bold">Bold</span>
-```
-
-Use numbers between 1 and 9 to set the numerical font-weight between 100 and 900.
-
-<h1 class="font-weight--1">100</h1>
-
-```html
-<h1 class="font-weight--1">100</h1>
-```
-
-<p class="font-weight--7">700</p>
-
-```html
-<p class="font-weight--7">700</p>
-```
-*/
-
-// === FONT WEIGHTS === //
+/*=== Font weight ===*/
 
 .font-weight--normal   { font-weight: var(--font-weight--normal); }
 .font-weight--bold     { font-weight: var(--font-weight--bold); }
@@ -249,158 +50,35 @@ Use numbers between 1 and 9 to set the numerical font-weight between 100 and 900
 .font-weight--8        { font-weight: 800; }
 .font-weight--9        { font-weight: 900; }
 
-/*
-@styleguide
-@title Text Transform
-
-Apply the following `text-transform` properties:
-
-- `capitalize`
-- `uppercase`
-- `lowercase`
-
-<h2 class="text-transform--c">capitalize this heading</h2>
-
-```html
-<h2 class="text-transform--c">capitalize this heading</h2>
-```
-
-<h4 class="text-transform--u">uppercase</h4>
 
-```html
-<h4 class="text-transform--u">uppercase</h4>
-```
-
-<p class="text-transform--l">MAKE IT LOWERCASE</p>
-
-```html
-<p class="text-transform--l">MAKE IT LOWERCASE</p>
-```
-*/
-
-// === TEXT TRANSFORM === //
+/*=== Text transform ===*/
 
 .text-transform--c     { text-transform: capitalize; }
 .text-transform--u     { text-transform: uppercase; }
 .text-transform--l     { text-transform: lowercase; }
 
-/*
-@styleguide
-@title Whitespace
-
-Apply the following `white-space` properties:
-
-- `pre-wrap`
-- `nowrap`
-- `pre-line`
-
-<p class="white-space--pre-wrap">
-Line
-breaks  and    lots      of         spaces
-</p>
-
-```html
-<p class="white-space--pre-wrap">
-Line
-breaks  and    lots      of         spaces
-</p>
-```
-
-<p class="white-space--nowrap">Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a break tag is encountered</p>
-
-```html
-<p class="white-space--nowrap">Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a break tag is encountered</p>
-```
-
-<p class="white-space--pre-line">Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks</p>
-
-```html
-<p class="white-space--pre-line">Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks</p>
-```
-*/
 
-// === WHITESPACE === //
+/*=== Whitespace ===*/
 
 .white-space--pre-wrap { white-space: pre-wrap; }
 .white-space--nowrap   { white-space: nowrap; }
 .white-space--pre-line { white-space: pre-line; }
 
 
-/*
-@styleguide
-@title Text Decoration
-
-Set the following text decoration properties:
-- `none`
-- `underline`
-
-Note that this sets the shorthand property, which includes `text-decoration-line`,
-`text-decoration-style`, `text-decoration-color`, and `text-decoration-thickness`.
-If you are applying these utility classes to an element that has one of those
-long-hand text decoration properties set, you may run into specificity issues
-depending on how and where those selectors are defined.
-*/
+/*=== Text decoration ===*/
 
 .text-decoration--none { text-decoration: none; }
 .text-decoration--underline { text-decoration: underline; }
 
-/* 
-@styleguide
-@title Line wrap
-
-Apply `.line-wrap` to force otherwise-unbreakable words to wrap. Applies
-`hyphens: auto`, which delegates to the browser to determine whether to
-hyphenate (hyphenation depends on the HTML `lang` attribute).
-
-Without `.line-wrap`:
-
-<div class="width--10 border b-color--gray-4">
-    supercalifragilisticexpialidocious
-</div>
-
-```html
-<div class="width--10 border b-color--gray-4">
-    supercalifragilisticexpialidocious
-</div>
-```
 
-With `.line-wrap`:
-
-<div class="width--10 border b-color--gray-4 line-wrap">
-    supercalifragilisticexpialidocious
-</div>
-
-```html
-<div class="width--10 border b-color--gray-4 line-wrap">
-    supercalifragilisticexpialidocious
-</div>
-```
-*/
+/*=== Line wrap ===*/
 
 .line-wrap {
   overflow-wrap: break-word;
   hyphens: auto;
 }
 
-/*
-@styleguide
-@title Truncate Text
-
-Combine this class with a width to truncate text or just leave as is to
-truncate at width of containing element.
-
-<div class="width--10 truncate">
-  Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef
-  t-bone, jowl ham pork loin biltong picanha.
-</div>
-
-```html
-<div class="width--10 truncate">
-  Pork chop spare ribs pork loin pastrami turkey. Tenderloin corned beef
-  t-bone, jowl ham pork loin biltong picanha.
-</div>
-```
-*/
+/*=== Truncate ===*/
 
 .truncate {
   overflow: hidden;