@sproutsocial/seeds-typography - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

dist/seeds-typography.js

 'use strict';
 
 module.exports = {
-  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_FAMILY: '"Proxima Nova", proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  TYPOGRAPHY_FAMILY_CLEAN_SANCHEZ: 'clean-sanchez, "Proxima Nova", proxima-nova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  TYPOGRAPHY_FAMILY_SYSTEM: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
   TYPOGRAPHY_SIZE_100: {
@@ -7,0 +8,0 @@ fontSize: '11px',

gulpfile.js

@@ -59,3 +59,6 @@ const fs = require('fs');
           app: upperFirst(prop.name),
-          sass: `@include ${suitCssName(prop.package, prop.name)};`,
+          sass:
+            prop.category === 'font size'
+              ? `@include ${suitCssName(prop.package, prop.name)};`
+              : sassVar(prop.package, prop.name),
           javascript: `{ style: ${javascriptConst(prop.package, prop.name)} }`,
@@ -62,0 +65,0 @@ lineHeightProportional: prop.value.rules && prop.value.rules['line-height'],

package.json

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

typography/examples.md

@@ -22,3 +22,3 @@ ## Examples
 - Native mobile apps utilize the system font families: San Francisco for iOS and Roboto for Android.
-- When limited to system fonts we use Helvetica. 
+- When Proxima Nova or Sanchez are unavailable, we attempt to default to [system font families](https://css-tricks.com/snippets/css/system-font-stack/). Defaulting to these fonts helps also with emoji rendering. The Proxima and Sanchez tokens already include theses system font fallbacks; **do not use the system font stack on its own unless you are using SEEDS in a situtation where loading Proxima or Sanchez is impossible or unwise**.
 
@@ -25,0 +25,0 @@ {% include_relative example-family.html %}

No alert changes

Improved metrics

Total package byte prevSize

23987

increased by11.66%

Number of package files

17

increased by6.25%

Lines of code

131

increased by3.15%

No dependency changes