@sproutsocial/seeds-typography - npm Package Compare versions

Comparing version 0.4.5 to 0.5.0

dist/tokens.json

@@ -1,1 +0,1 @@
-[{"app":"Family","sass":"$Typography-family","javascript":"TYPOGRAPHY_FAMILY","category":"font family","value":"\"Proxima Nova\", proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""},{"app":"Family cleanSanchez","sass":"$Typography-family--cleanSanchez","javascript":"TYPOGRAPHY_FAMILY_CLEAN_SANCHEZ","category":"font family","value":"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\""},{"app":"Family system","sass":"$Typography-family--system","javascript":"TYPOGRAPHY_FAMILY_SYSTEM","category":"font family","value":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""},{"app":"Size 100","sass":"@include Typography-size--100;","javascript":"{ style: TYPOGRAPHY_SIZE_100 }","category":"font size","value":{"fontSize":"11px","lineHeightProportional":1.696969696969697,"lineHeightPx":18.666666666666668}},{"app":"Size 200","sass":"@include Typography-size--200;","javascript":"{ style: TYPOGRAPHY_SIZE_200 }","category":"font size","value":{"fontSize":"13px","lineHeightProportional":1.641025641025641,"lineHeightPx":21.333333333333332}},{"app":"Size 300","sass":"@include Typography-size--300;","javascript":"{ style: TYPOGRAPHY_SIZE_300 }","category":"font size","value":{"fontSize":"16px","lineHeightProportional":1.5,"lineHeightPx":24}},{"app":"Size 400","sass":"@include Typography-size--400;","javascript":"{ style: TYPOGRAPHY_SIZE_400 }","category":"font size","value":{"fontSize":"18px","lineHeightProportional":1.4814814814814816,"lineHeightPx":26.666666666666668}},{"app":"Size 500","sass":"@include Typography-size--500;","javascript":"{ style: TYPOGRAPHY_SIZE_500 }","category":"font size","value":{"fontSize":"21px","lineHeightProportional":1.3968253968253967,"lineHeightPx":29.333333333333332}},{"app":"Size 600","sass":"@include Typography-size--600;","javascript":"{ style: TYPOGRAPHY_SIZE_600 }","category":"font size","value":{"fontSize":"24px","lineHeightProportional":1.3333333333333333,"lineHeightPx":32}},{"app":"Size 700","sass":"@include Typography-size--700;","javascript":"{ style: TYPOGRAPHY_SIZE_700 }","category":"font size","value":{"fontSize":"32px","lineHeightProportional":1.25,"lineHeightPx":40}},{"app":"Size 800","sass":"@include Typography-size--800;","javascript":"{ style: TYPOGRAPHY_SIZE_800 }","category":"font size","value":{"fontSize":"43px","lineHeightProportional":1.1782945736434107,"lineHeightPx":50.666666666666664}},{"app":"Size 900","sass":"@include Typography-size--900;","javascript":"{ style: TYPOGRAPHY_SIZE_900 }","category":"font size","value":{"fontSize":"57px","lineHeightProportional":1.1228070175438596,"lineHeightPx":64}},{"app":"Size 1000","sass":"@include Typography-size--1000;","javascript":"{ style: TYPOGRAPHY_SIZE_1000 }","category":"font size","value":{"fontSize":"76px","lineHeightProportional":1.0526315789473684,"lineHeightPx":80}},{"app":"Weight regular","sass":"$Typography-weight--regular","javascript":"TYPOGRAPHY_WEIGHT_REGULAR","category":"font weight","value":400},{"app":"Weight bold","sass":"$Typography-weight--bold","javascript":"TYPOGRAPHY_WEIGHT_BOLD","category":"font weight","value":600}]
+[{"app":"Family","sass":"$Typography-family","javascript":"TYPOGRAPHY_FAMILY","css":"--typography-family","category":"font family","value":"\"Proxima Nova\", proxima-nova, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""},{"app":"Family cleanSanchez","sass":"$Typography-family--cleanSanchez","javascript":"TYPOGRAPHY_FAMILY_CLEAN_SANCHEZ","css":"--typography-family-clean-sanchez","category":"font family","value":"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\""},{"app":"Family system","sass":"$Typography-family--system","javascript":"TYPOGRAPHY_FAMILY_SYSTEM","css":"--typography-family-system","category":"font family","value":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""},{"app":"Size 100","sass":"@include Typography-size--100;","javascript":"{ style: TYPOGRAPHY_SIZE_100 }","css":"--typography-size-100","category":"font size","value":{"fontSize":"11px","lineHeightProportional":1.696969696969697,"lineHeightPx":"18.666666666666668px"}},{"app":"Size 200","sass":"@include Typography-size--200;","javascript":"{ style: TYPOGRAPHY_SIZE_200 }","css":"--typography-size-200","category":"font size","value":{"fontSize":"13px","lineHeightProportional":1.641025641025641,"lineHeightPx":"21.333333333333332px"}},{"app":"Size 300","sass":"@include Typography-size--300;","javascript":"{ style: TYPOGRAPHY_SIZE_300 }","css":"--typography-size-300","category":"font size","value":{"fontSize":"16px","lineHeightProportional":1.5,"lineHeightPx":"24px"}},{"app":"Size 400","sass":"@include Typography-size--400;","javascript":"{ style: TYPOGRAPHY_SIZE_400 }","css":"--typography-size-400","category":"font size","value":{"fontSize":"18px","lineHeightProportional":1.4814814814814816,"lineHeightPx":"26.666666666666668px"}},{"app":"Size 500","sass":"@include Typography-size--500;","javascript":"{ style: TYPOGRAPHY_SIZE_500 }","css":"--typography-size-500","category":"font size","value":{"fontSize":"21px","lineHeightProportional":1.3968253968253967,"lineHeightPx":"29.333333333333332px"}},{"app":"Size 600","sass":"@include Typography-size--600;","javascript":"{ style: TYPOGRAPHY_SIZE_600 }","css":"--typography-size-600","category":"font size","value":{"fontSize":"24px","lineHeightProportional":1.3333333333333333,"lineHeightPx":"32px"}},{"app":"Size 700","sass":"@include Typography-size--700;","javascript":"{ style: TYPOGRAPHY_SIZE_700 }","css":"--typography-size-700","category":"font size","value":{"fontSize":"32px","lineHeightProportional":1.25,"lineHeightPx":"40px"}},{"app":"Size 800","sass":"@include Typography-size--800;","javascript":"{ style: TYPOGRAPHY_SIZE_800 }","css":"--typography-size-800","category":"font size","value":{"fontSize":"43px","lineHeightProportional":1.1782945736434107,"lineHeightPx":"50.666666666666664px"}},{"app":"Size 900","sass":"@include Typography-size--900;","javascript":"{ style: TYPOGRAPHY_SIZE_900 }","css":"--typography-size-900","category":"font size","value":{"fontSize":"57px","lineHeightProportional":1.1228070175438596,"lineHeightPx":"64px"}},{"app":"Size 1000","sass":"@include Typography-size--1000;","javascript":"{ style: TYPOGRAPHY_SIZE_1000 }","css":"--typography-size-1000","category":"font size","value":{"fontSize":"76px","lineHeightProportional":1.0526315789473684,"lineHeightPx":"80px"}},{"app":"Weight regular","sass":"$Typography-weight--regular","javascript":"TYPOGRAPHY_WEIGHT_REGULAR","css":"--typography-weight-regular","category":"font weight","value":400},{"app":"Weight bold","sass":"$Typography-weight--bold","javascript":"TYPOGRAPHY_WEIGHT_BOLD","css":"--typography-weight-bold","category":"font weight","value":600}]

docs/01-usage.md

@@ -11,3 +11,3 @@ ## Usage
 
-For SCSS or Javascript:
+For CSS, SCSS, or Javascript:
 
@@ -14,0 +14,0 @@ - `yarn add {{name}}`

docs/CHANGELOG.md

 ## Changelog
 
+### v0.5.0
+- **New** Added support for tokens as CSS custom properties. To use them, `@import seeds-typography/dist/seeds-typography.css` and refer to the token names in the documentation.
+
 ### v0.4.2
@@ -4,0 +7,0 @@ - **Fixed** Fixed documentation of Javascript tokens. Were showing objects for all values, but only type scale values are objects; the rest of the values are simple constants.

gulpfile.js

@@ -8,2 +8,3 @@ const fs = require('fs');
 const upperFirst = require('lodash.upperfirst');
+const cssPropertyName = require('@sproutsocial/seeds-utils/css-property-name');
 const sassVar = require('@sproutsocial/seeds-utils/sassvar').sassVar;
@@ -42,3 +43,7 @@ const suitCssName = require('@sproutsocial/seeds-utils/sassvar').suitCssName;
 gulp.task('typography-scss', getGulpTypographyTask('web', 'scss', {appendFile: typographyFunction}));
+
+gulp.task('typography-css', getGulpTypographyTask('web', 'custom-properties.css'));
+
 gulp.task('typography-js', getGulpTypographyTask('js', 'common.js'));
+
 gulp.task(
@@ -71,2 +76,3 @@ 'typography-sketch',
                 : javascriptConst(prop.package, prop.name),
+            css: cssPropertyName(prop.package, prop.name),
             category: prop.category,
@@ -78,3 +84,4 @@ value:
                     lineHeightProportional: prop.value.rules && prop.value.rules['line-height'],
-                    lineHeightPx: prop.value.rules && prop.value.rules['line-height'] * parseInt(prop.value.value, 10)
+                    lineHeightPx:
+                      prop.value.rules && `${prop.value.rules['line-height'] * parseInt(prop.value.value, 10)}px`
                   }
@@ -93,3 +100,7 @@ : prop.value
   'default',
-  gulp.series(['clean', gulp.parallel(['typography-scss', 'typography-js', 'typography-sketch']), 'typography-docs'])
+  gulp.series([
+    'clean',
+    gulp.parallel(['typography-css', 'typography-scss', 'typography-js', 'typography-sketch']),
+    'typography-docs'
+  ])
 );

package.json

 {
   "name": "@sproutsocial/seeds-typography",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "stability": "stable",
@@ -16,4 +16,4 @@ "description": "SEEDS Design System Typography Styles",
   "devDependencies": {
-    "@sproutsocial/seeds-utils": "^0.1.11"
+    "@sproutsocial/seeds-utils": "^0.2.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

97065

increased by3.36%

Number of package files

21

increased by5%

Lines of code

187

increased by31.69%

No dependency changes