@sproutsocial/seeds-motion - npm Package Compare versions

Comparing version 0.2.11 to 0.3.0

dist/tokens.json

@@ -1,1 +0,1 @@
-[{"sass":"$Motion-ease--linear","javascript":"MOTION_EASE_LINEAR","value":"linear","description":"Use for elements changing color or fading into view"},{"sass":"$Motion-ease--in","javascript":"MOTION_EASE_IN","value":"cubic-bezier(.4, 0, 1, 1)","description":"Use for elements moving out of view"},{"sass":"$Motion-ease--out","javascript":"MOTION_EASE_OUT","value":"cubic-bezier(0, 0, .2, 1)","description":"Use for elements moving into view"},{"sass":"$Motion-ease--inout","javascript":"MOTION_EASE_INOUT","value":"cubic-bezier(.4, 0, .2, 1)","description":"Use for elements that change position"}]
+[{"sass":"$Motion-ease--linear","javascript":"MOTION_EASE_LINEAR","css":"--motion-ease-linear","value":"linear","description":"Use for elements changing color or fading into view"},{"sass":"$Motion-ease--in","javascript":"MOTION_EASE_IN","css":"--motion-ease-in","value":"cubic-bezier(.4, 0, 1, 1)","description":"Use for elements moving out of view"},{"sass":"$Motion-ease--out","javascript":"MOTION_EASE_OUT","css":"--motion-ease-out","value":"cubic-bezier(0, 0, .2, 1)","description":"Use for elements moving into view"},{"sass":"$Motion-ease--inout","javascript":"MOTION_EASE_INOUT","css":"--motion-ease-inout","value":"cubic-bezier(.4, 0, .2, 1)","description":"Use for elements that change position"}]

docs/01-usage.md

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

docs/CHANGELOG.md

 ## Changelog
 
+### v0.3.0
 
+- **New** Added support for tokens as CSS custom properties. To use them, `@import seeds-motion/dist/seeds-motion.css` and refer to the token names in the documentation.
+
 ### v0.2.8
@@ -5,0 +8,0 @@

gulpfile.js

@@ -6,2 +6,3 @@ const fs = require('fs');
 const sassVar = require('@sproutsocial/seeds-utils/sassvar').sassVar;
+const cssPropertyName = require('@sproutsocial/seeds-utils/css-property-name');
 const getGulpTask = require('@sproutsocial/seeds-utils/getgulptask');
@@ -23,2 +24,5 @@ const javascriptConst = require('@sproutsocial/seeds-utils/constantcase').javascriptConst;
 gulp.task('motion-scss', getGulpMotionTask('web', 'scss'));
+
+gulp.task('motion-css', getGulpMotionTask('web', 'custom-properties.css'));
+
 gulp.task('motion-js', getGulpMotionTask('js', 'common.js'));
@@ -40,2 +44,3 @@
             javascript: javascriptConst(prop.package, prop.name),
+            css: cssPropertyName(prop.package, prop.name),
             value,
@@ -52,2 +57,2 @@ description
 
-gulp.task('default', gulp.series(['clean', gulp.parallel(['motion-scss', 'motion-js']), 'motion-docs']));
+gulp.task('default', gulp.series(['clean', gulp.parallel(['motion-css', 'motion-scss', 'motion-js']), 'motion-docs']));

package.json

 {
   "name": "@sproutsocial/seeds-motion",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "stability": "beta",
@@ -16,4 +16,4 @@ "description": "SEEDS Design System Motion and Animation Values",
   "devDependencies": {
-    "@sproutsocial/seeds-utils": "^0.1.11"
+    "@sproutsocial/seeds-utils": "^0.2.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

6224

increased by13.23%

Number of package files

12

increased by9.09%

Lines of code

57

increased by18.75%

No dependency changes