@sproutsocial/seeds-typography - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/seeds-typography.js

@@ -5,2 +5,4 @@ 'use strict';
   TYPOGRAPHY_FAMILY: '"Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  TYPOGRAPHY_FAMILY_CLEAN_SANCHEZ:
+    'clean-sanchez, "Proxima Nova", proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif',
   TYPOGRAPHY_SIZE_100: {
@@ -7,0 +9,0 @@ fontSize: '11px',

gulpfile.js

@@ -54,12 +54,12 @@ const fs = require('fs');
       const tokens = JSON.parse(result);
-      const sizeProps = tokens.propKeys.filter(key => tokens.props[key].type === 'font size');
-      const sizes = sizeProps.map(key => {
+      const tokensJson = tokens.propKeys.map(key => {
         const prop = tokens.props[key];
         return {
-          size: prop.value.value,
+          value: prop.value.value || prop.value,
           app: upperFirst(prop.name),
           sass: `@include ${suitCssName(prop.package, prop.name)};`,
           javascript: `{ style: ${javascriptConst(prop.package, prop.name)} }`,
-          lineHeightProportional: prop.value.rules['line-height'],
-          lineHeightPx: prop.value.rules['line-height'] * parseInt(prop.value.value, 10)
+          lineHeightProportional: prop.value.rules && prop.value.rules['line-height'],
+          lineHeightPx: prop.value.rules && prop.value.rules['line-height'] * parseInt(prop.value.value, 10),
+          category: prop.category
         };
@@ -72,3 +72,3 @@ });
           `<!-- GENERATED BY GULP - DO NOT EDIT -->\n\n<script>window.seedsTypography = ${JSON.stringify(
-            sizes
+            tokensJson
           )};</script>`
@@ -75,0 +75,0 @@ );

package.json

 {
   "name": "@sproutsocial/seeds-typography",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "stability": "stable",
@@ -5,0 +5,0 @@ "description": "SEEDS Design System Typography Styles",

typography/examples.md

 ## Examples
 
-<h3>App Downloads</h3>
-<ul>
-  <li>
-    <a href="{{ site.baseurl }}/_generated/{{page.package}}.{{ site.data.versions[page.package].version }}.json" download>Sketch Styles</a> (Requires <a href="https://github.com/nilshoenson/shared-text-styles">Shared Text Styles plugin</a>)
-  </li>
-  <li>
-    <a href="https://assets.adobe.com/assets/libraries/a4c2bfd3-f701-470c-ab88-1ba696d9f628e">Adobe Creative Cloud Library</a>
-  </li>
-</ul>
+### App Downloads
 
-<h3>Get the Code</h3>
-<p>For SCSS or Javascript:</p>
-<ul>
-  <li>
-    <code>yarn add @sproutsocial/{{page.package}}</code>
-  </li>
-  <li>
-    <code>npm install @sproutsocial/{{page.package}} --save</code>
-  </li>
-</ul>
+- <a href="_generated/{{page.package}}.{{ site.data.versions[page.package].version }}.json" download>Sketch Styles</a> (Requires [Shared Text Styles plugin](https://github.com/nilshoenson/shared-text-styles))
+- [Adobe Creative Cloud Library](https://assets.adobe.com/assets/libraries/a4c2bfd3-f701-470c-ab88-1ba696d9f628e)
 
+
+### Get the Code
+
+For SCSS or Javascript:
+
+- `yarn add @sproutsocial/{{page.package}}`
+- `npm install @sproutsocial/{{page.package}} --save`
+
+
 ### Typefaces
@@ -31,35 +24,21 @@
 
-<table class="table">
-  <thead>
-    <th scope="col" style="white-space: nowrap;">
-      Name
-    </th>
-    <th scope="col">Example</th>
-  </thead>
-  
-  <tbody>
-    <tr>
-      <th>Proxima Nova</th>
-      <td>
-        <div class="Typography-size--700">
-          ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-          abcdefghijklmnopqrstuvwxyz<br>
-          0987654321
-        </div>
-      </td>
-    </tr>
+{% include_relative example-family.html %}
 
-    <tr>
-      <th>Clean Sanchez</th>
-      <td>
-        <div class="Typography-size--700 Typography-weight--semibold Typography-family--sanchez">
-        ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
-        abcdefghijklmnopqrstuvwxyz<br>
-        0987654321
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
 
-{% include_relative scale.html %}
+### Font Weights
+
+For simplicity and performance, we use two font weights on the web.
+
+{% include_relative example-weight.html %}
+
+
+### Type Scale
+
+Line heights are calculated to ensure at least three lines align to an 8px grid. Use the associated line-height values only.
+
+{% include_relative example-size.html %}
+
+
+<!-- Scripts needed to render examples -->
+
+{% include_relative example-scripts.html %}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21270

increased by17.25%

Number of package files

16

increased by23.08%

Lines of code

128

increased by1.59%

No dependency changes