From a595dd805d9d8b0c403be42d83ad6ab27c4b3f52 Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Fri, 18 Feb 2022 00:45:13 +0100
Subject: [PATCH 1/9] Fix build on windows devices

Fix build on windows devices by manually setting undefined for a not defined prefix.
---
 build/props.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/build/props.js b/build/props.js
index 653245b7..36fe8a18 100644
--- a/build/props.js
+++ b/build/props.js
@@ -18,7 +18,14 @@ import {toJSON} from './to-json.js'
 import {toTokens} from './to-tokens.js'
 import {toFigmaTokens} from './to-figmatokens.js'
 
-const [,,prefix,useWhere] = process.argv
+let prefix = process.argv[2];
+const useWhere = process.argv[3]
+
+// On windows devices the prefixs is "''" if not set
+if(prefix === "''") {
+  prefix = undefined;
+}
+
 const selector = useWhere === 'true' ? ':where(html)' : 'html'
 
 const mainbundle = {

From a835966bd7f457777a30657a9fcbbfa688318117 Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Fri, 18 Feb 2022 00:54:41 +0100
Subject: [PATCH 2/9] Enhance anmations with reduced motion

---
 build/to-stylesheet.js   | 17 ++++++++++++++
 src/props.animations.css | 49 +++++++++++++++++++++++++---------------
 src/props.animations.js  | 36 ++++++++++++++---------------
 3 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index abc99502..a40ffd54 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -35,6 +35,23 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
 }`
   }
 
+  if (filename.includes('animations')) {
+    appendedMeta += `
+@media (--motionOK) {
+  :where(html) {
+    --scale-duration: .5s;
+    --slide-duration: .5s;
+    --shake-duration: .75s;
+    --spin-duration: 2s;
+    --ping-duration: 5s;
+    --blink-duration: 1s;
+    --float-duration: 3s;
+    --bounce-duration: 2s;
+    --pulse-duration: 2s;
+  }
+}`
+  }
+
   file.write('}\n')
   file.end(appendedMeta)
 }
\ No newline at end of file
diff --git a/src/props.animations.css b/src/props.animations.css
index f2a96de1..0e1e513b 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -1,24 +1,24 @@
 :where(html) {
   --animation-fade-in: fade-in .5s var(--ease-3);
   --animation-fade-out: fade-out .5s var(--ease-3);
-  --animation-scale-up: scale-up .5s var(--ease-3);
-  --animation-scale-down: scale-down .5s var(--ease-3);
-  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
-  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
-  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
-  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
-  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
-  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
-  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
-  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
-  --animation-shake-x: shake-x .75s var(--ease-out-5);
-  --animation-shake-y: shake-y .75s var(--ease-out-5);
-  --animation-spin: spin 2s linear infinite;
-  --animation-ping: ping 5s var(--ease-out-3) infinite;
-  --animation-blink: blink 1s var(--ease-out-3) infinite;
-  --animation-float: float 3s var(--ease-in-out-3) infinite;
-  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
-  --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+  --animation-scale-up: scale-up var(--scale-duration, 1ms) var(--ease-3);
+  --animation-scale-down: scale-down var(--scale-duration, 1ms) var(--ease-3);
+  --animation-slide-out-up: slide-out-up var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-out-down: slide-out-down var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-out-right: slide-out-right var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-out-left: slide-out-left var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-in-up: slide-in-up var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-in-down: slide-in-down var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-in-right: slide-in-right var(--slide-duration, 1ms) var(--ease-3);
+  --animation-slide-in-left: slide-in-left var(--slide-duration, 1ms) var(--ease-3);
+  --animation-shake-x: shake-x var(--shake-duration, 1ms) var(--ease-out-5);
+  --animation-shake-y: shake-y var(--shake-duration, 1ms) var(--ease-out-5);
+  --animation-spin: spin var(--spin-duration, 1ms) linear infinite;
+  --animation-ping: ping var(--ping-duration, 1ms) var(--ease-out-3) infinite;
+  --animation-blink: blink var(--blink-duration, 1ms) var(--ease-out-3) infinite;
+  --animation-float: float var(--float-duration, 1ms) var(--ease-in-out-3) infinite;
+  --animation-bounce: bounce var(--bounce-duration, 1ms) var(--ease-squish-2) infinite;
+  --animation-pulse: pulse var(--pulse-duration, 1ms) var(--ease-out-3) infinite;
 }
 
 @keyframes fade-in {
@@ -98,4 +98,17 @@
 }
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
+}
+@media (--motionOK) {
+  :where(html) {
+    --scale-duration: .5s;
+    --slide-duration: .5s;
+    --shake-duration: .75s;
+    --spin-duration: 2s;
+    --ping-duration: 5s;
+    --blink-duration: 1s;
+    --float-duration: 3s;
+    --bounce-duration: 2s;
+    --pulse-duration: 2s;
+  }
 }
\ No newline at end of file
diff --git a/src/props.animations.js b/src/props.animations.js
index 26ec4836..929a6685 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -9,57 +9,57 @@ export default {
 @keyframes fade-out {
   to { opacity: 0 }
 }`,
-  "--animation-scale-up": "scale-up .5s var(--ease-3)", 
+  "--animation-scale-up": "scale-up var(--scale-duration, 1ms) var(--ease-3)", 
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }`,
-  "--animation-scale-down": "scale-down .5s var(--ease-3)", 
+  "--animation-scale-down": "scale-down var(--scale-duration, 1ms) var(--ease-3)", 
   "--animation-scale-down-@": `
 @keyframes scale-down {
   to { transform: scale(.75) }
 }`,
-  "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)", 
+  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }`,
-  "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)", 
+  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }`,
-  "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)", 
+  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }`,
-  "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)", 
+  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)", 
+  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }`,
-  "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)", 
+  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }`,
-  "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)", 
+  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)", 
+  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 1ms) var(--ease-3)", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }`,
-  "--animation-shake-x": "shake-x .75s var(--ease-out-5)", 
+  "--animation-shake-x": "shake-x var(--shake-duration, 1ms) var(--ease-out-5)", 
   "--animation-shake-x-@": `
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -68,7 +68,7 @@ export default {
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
 }`,
-  "--animation-shake-y": "shake-y .75s var(--ease-out-5)", 
+  "--animation-shake-y": "shake-y var(--shake-duration, 1ms) var(--ease-out-5)", 
   "--animation-shake-y-@": `
 @keyframes shake-y {
   0%, 100% { transform: translateY(0%) }
@@ -77,12 +77,12 @@ export default {
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }`,
-  "--animation-spin": "spin 2s linear infinite", 
+  "--animation-spin": "spin var(--spin-duration, 1ms) linear infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
 }`,
-  "--animation-ping": "ping 5s var(--ease-out-3) infinite", 
+  "--animation-ping": "ping var(--ping-duration, 1ms) var(--ease-out-3) infinite", 
   "--animation-ping-@": `
 @keyframes ping {
   90%, 100% {
@@ -90,7 +90,7 @@ export default {
     opacity: 0;
   }
 }`,
-  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
+  "--animation-blink": "blink var(--blink-duration, 1ms) var(--ease-out-3) infinite", 
   "--animation-blink-@": `
 @keyframes blink {
   0%, 100% {
@@ -100,19 +100,19 @@ export default {
     opacity: .5
   }
 }`,
-  "--animation-float": "float 3s var(--ease-in-out-3) infinite", 
+  "--animation-float": "float var(--float-duration, 1ms) var(--ease-in-out-3) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
 }`,
-  "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite", 
+  "--animation-bounce": "bounce var(--bounce-duration, 1ms) var(--ease-squish-2) infinite", 
   "--animation-bounce-@": `
 @keyframes bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }`,
-  "--animation-pulse": "pulse 2s var(--ease-out-3) infinite", 
+  "--animation-pulse": "pulse var(--pulse-duration, 1ms) var(--ease-out-3) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }

From 3f692c1ac24c0189f147a20eb41eb8802833c69e Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 11:44:22 +0100
Subject: [PATCH 3/9] Move the empty string string check to to-stylesheet.js

---
 build/props.js         | 8 +-------
 build/to-stylesheet.js | 2 +-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/build/props.js b/build/props.js
index 36fe8a18..64a0826f 100644
--- a/build/props.js
+++ b/build/props.js
@@ -18,13 +18,7 @@ import {toJSON} from './to-json.js'
 import {toTokens} from './to-tokens.js'
 import {toFigmaTokens} from './to-figmatokens.js'
 
-let prefix = process.argv[2];
-const useWhere = process.argv[3]
-
-// On windows devices the prefixs is "''" if not set
-if(prefix === "''") {
-  prefix = undefined;
-}
+const [,,prefix='',useWhere] = process.argv
 
 const selector = useWhere === 'true' ? ':where(html)' : 'html'
 
diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index abc99502..a65d1cb5 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -14,7 +14,7 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
     if (prop.includes('-@'))
       return
 
-    if (prefix)
+    if (prefix && prefix !== "''")
       prop = `--${prefix}-` + prop.slice(2)
     
     if (prop.includes('animation')) {

From b23f29cee740161cc19fd36694954ea3f4a18422 Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 14:57:07 +0100
Subject: [PATCH 4/9] Remove windows fix from this branch

---
 build/to-stylesheet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index c3a771d5..a40ffd54 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -14,7 +14,7 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
     if (prop.includes('-@'))
       return
 
-    if (prefix && prefix !== "''")
+    if (prefix)
       prop = `--${prefix}-` + prop.slice(2)
     
     if (prop.includes('animation')) {

From 6cf4a6378fae4340404d27bc7a668b37221ddd7a Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 15:01:14 +0100
Subject: [PATCH 5/9] Revoke changes from windows fix

---
 build/props.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/props.js b/build/props.js
index 64a0826f..4568c332 100644
--- a/build/props.js
+++ b/build/props.js
@@ -18,7 +18,7 @@ import {toJSON} from './to-json.js'
 import {toTokens} from './to-tokens.js'
 import {toFigmaTokens} from './to-figmatokens.js'
 
-const [,,prefix='',useWhere] = process.argv
+const [,,prefix,useWhere] = process.argv
 
 const selector = useWhere === 'true' ? ':where(html)' : 'html'
 

From a752b66864cf840e16e819c039daa90eb063b12f Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 18:16:36 +0100
Subject: [PATCH 6/9] Add reduced motion with steps

---
 build/props.js           |  1 -
 src/props.animations.css | 41 ++++++++++++++++++++++------------------
 src/props.animations.js  | 32 +++++++++++++++----------------
 3 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/build/props.js b/build/props.js
index 4568c332..653245b7 100644
--- a/build/props.js
+++ b/build/props.js
@@ -19,7 +19,6 @@ import {toTokens} from './to-tokens.js'
 import {toFigmaTokens} from './to-figmatokens.js'
 
 const [,,prefix,useWhere] = process.argv
-
 const selector = useWhere === 'true' ? ':where(html)' : 'html'
 
 const mainbundle = {
diff --git a/src/props.animations.css b/src/props.animations.css
index 0e1e513b..28028dbf 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -3,22 +3,22 @@
   --animation-fade-out: fade-out .5s var(--ease-3);
   --animation-scale-up: scale-up var(--scale-duration, 1ms) var(--ease-3);
   --animation-scale-down: scale-down var(--scale-duration, 1ms) var(--ease-3);
-  --animation-slide-out-up: slide-out-up var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-out-down: slide-out-down var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-out-right: slide-out-right var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-out-left: slide-out-left var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-in-up: slide-in-up var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-in-down: slide-in-down var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-in-right: slide-in-right var(--slide-duration, 1ms) var(--ease-3);
-  --animation-slide-in-left: slide-in-left var(--slide-duration, 1ms) var(--ease-3);
-  --animation-shake-x: shake-x var(--shake-duration, 1ms) var(--ease-out-5);
-  --animation-shake-y: shake-y var(--shake-duration, 1ms) var(--ease-out-5);
-  --animation-spin: spin var(--spin-duration, 1ms) linear infinite;
-  --animation-ping: ping var(--ping-duration, 1ms) var(--ease-out-3) infinite;
-  --animation-blink: blink var(--blink-duration, 1ms) var(--ease-out-3) infinite;
-  --animation-float: float var(--float-duration, 1ms) var(--ease-in-out-3) infinite;
-  --animation-bounce: bounce var(--bounce-duration, 1ms) var(--ease-squish-2) infinite;
-  --animation-pulse: pulse var(--pulse-duration, 1ms) var(--ease-out-3) infinite;
+  --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3));
+  --animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(2));
+  --animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(2));
+  --animation-spin: spin 2s var(--spin-easing, steps(4)) infinite;
+  --animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4)) infinite;
+  --animation-blink: blink var(--blink-duration, 2s) var(--ease-out-3) infinite;
+  --animation-float: float 3s var(--float-ease, steps(2)) infinite;
+  --animation-bounce: bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite;
+  --animation-pulse: pulse 2s var(--pulse-ease, steps(2)) infinite;
 }
 
 @keyframes fade-in {
@@ -103,12 +103,17 @@
   :where(html) {
     --scale-duration: .5s;
     --slide-duration: .5s;
+    --slide-easing: var(--ease-3);
     --shake-duration: .75s;
-    --spin-duration: 2s;
+    --shake-easing: var(--ease-out-5);
+    --spin-easing: linear;
     --ping-duration: 5s;
+    --ping-easing: var(--ease-out-3);
     --blink-duration: 1s;
-    --float-duration: 3s;
+    --float-ease: var(--ease-out-3);
     --bounce-duration: 2s;
+    --bounce-ease: var(--ease-squish-2);
     --pulse-duration: 2s;
+    --pulse-ease: var(--ease-out-3);
   }
 }
\ No newline at end of file
diff --git a/src/props.animations.js b/src/props.animations.js
index 929a6685..8d2fc6f6 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -19,47 +19,47 @@ export default {
 @keyframes scale-down {
   to { transform: scale(.75) }
 }`,
-  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }`,
-  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }`,
-  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }`,
-  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }`,
-  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }`,
-  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 1ms) var(--ease-3)", 
+  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }`,
-  "--animation-shake-x": "shake-x var(--shake-duration, 1ms) var(--ease-out-5)", 
+  "--animation-shake-x": "shake-x var(--shake-duration, 3s) var(--shake-easing, steps(2))", 
   "--animation-shake-x-@": `
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -68,7 +68,7 @@ export default {
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
 }`,
-  "--animation-shake-y": "shake-y var(--shake-duration, 1ms) var(--ease-out-5)", 
+  "--animation-shake-y": "shake-y var(--shake-duration, 3s) var(--shake-easing, steps(2))", 
   "--animation-shake-y-@": `
 @keyframes shake-y {
   0%, 100% { transform: translateY(0%) }
@@ -77,12 +77,12 @@ export default {
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }`,
-  "--animation-spin": "spin var(--spin-duration, 1ms) linear infinite", 
+  "--animation-spin": "spin 2s var(--spin-easing, steps(4)) infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
 }`,
-  "--animation-ping": "ping var(--ping-duration, 1ms) var(--ease-out-3) infinite", 
+  "--animation-ping": "ping var(--ping-duration, 4s) var(--ping-easing, steps(4)) infinite", 
   "--animation-ping-@": `
 @keyframes ping {
   90%, 100% {
@@ -90,7 +90,7 @@ export default {
     opacity: 0;
   }
 }`,
-  "--animation-blink": "blink var(--blink-duration, 1ms) var(--ease-out-3) infinite", 
+  "--animation-blink": "blink var(--blink-duration, 2s) var(--ease-out-3) infinite", 
   "--animation-blink-@": `
 @keyframes blink {
   0%, 100% {
@@ -100,19 +100,19 @@ export default {
     opacity: .5
   }
 }`,
-  "--animation-float": "float var(--float-duration, 1ms) var(--ease-in-out-3) infinite", 
+  "--animation-float": "float 3s var(--float-ease, steps(2)) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
 }`,
-  "--animation-bounce": "bounce var(--bounce-duration, 1ms) var(--ease-squish-2) infinite", 
+  "--animation-bounce": "bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite", 
   "--animation-bounce-@": `
 @keyframes bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }`,
-  "--animation-pulse": "pulse var(--pulse-duration, 1ms) var(--ease-out-3) infinite", 
+  "--animation-pulse": "pulse 2s var(--pulse-ease, steps(2)) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }

From c7d41630b6b69e7a17983b6a259d35ef6f8f734e Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 18:18:45 +0100
Subject: [PATCH 7/9] Add easings

---
 build/to-stylesheet.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index a40ffd54..7045822f 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -41,13 +41,18 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
   :where(html) {
     --scale-duration: .5s;
     --slide-duration: .5s;
+    --slide-easing: var(--ease-3);
     --shake-duration: .75s;
-    --spin-duration: 2s;
+    --shake-easing: var(--ease-out-5);
+    --spin-easing: linear;
     --ping-duration: 5s;
+    --ping-easing: var(--ease-out-3);
     --blink-duration: 1s;
-    --float-duration: 3s;
+    --float-ease: var(--ease-out-3);
     --bounce-duration: 2s;
+    --bounce-ease: var(--ease-squish-2);
     --pulse-duration: 2s;
+    --pulse-ease: var(--ease-out-3);
   }
 }`
   }

From 25ab5801fa39bc5aecb280b26d3f296a564ff998 Mon Sep 17 00:00:00 2001
From: Quentin <quentin.albert@web.de>
Date: Wed, 23 Feb 2022 19:08:25 +0100
Subject: [PATCH 8/9] Fix step timings

---
 src/props.animations.css | 28 ++++++++++++++--------------
 src/props.animations.js  | 28 ++++++++++++++--------------
 2 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/props.animations.css b/src/props.animations.css
index 28028dbf..04f6ea05 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -3,22 +3,22 @@
   --animation-fade-out: fade-out .5s var(--ease-3);
   --animation-scale-up: scale-up var(--scale-duration, 1ms) var(--ease-3);
   --animation-scale-down: scale-down var(--scale-duration, 1ms) var(--ease-3);
-  --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3));
-  --animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(2));
-  --animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(2));
-  --animation-spin: spin 2s var(--spin-easing, steps(4)) infinite;
-  --animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4)) infinite;
+  --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
+  --animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1));
+  --animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1));
+  --animation-spin: spin 2s var(--spin-easing, steps(4, jump-start)) infinite;
+  --animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite;
   --animation-blink: blink var(--blink-duration, 2s) var(--ease-out-3) infinite;
-  --animation-float: float 3s var(--float-ease, steps(2)) infinite;
+  --animation-float: float 3s var(--float-ease, steps(2, jump-start)) infinite;
   --animation-bounce: bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite;
-  --animation-pulse: pulse 2s var(--pulse-ease, steps(2)) infinite;
+  --animation-pulse: pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite;
 }
 
 @keyframes fade-in {
diff --git a/src/props.animations.js b/src/props.animations.js
index 8d2fc6f6..b0715b32 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -19,47 +19,47 @@ export default {
 @keyframes scale-down {
   to { transform: scale(.75) }
 }`,
-  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-out-up": "slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }`,
-  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-out-down": "slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }`,
-  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-out-right": "slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }`,
-  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-out-left": "slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-in-up": "slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }`,
-  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-in-down": "slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }`,
-  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-in-right": "slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }`,
-  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3))", 
+  "--animation-slide-in-left": "slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }`,
-  "--animation-shake-x": "shake-x var(--shake-duration, 3s) var(--shake-easing, steps(2))", 
+  "--animation-shake-x": "shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1))", 
   "--animation-shake-x-@": `
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -68,7 +68,7 @@ export default {
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
 }`,
-  "--animation-shake-y": "shake-y var(--shake-duration, 3s) var(--shake-easing, steps(2))", 
+  "--animation-shake-y": "shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1))", 
   "--animation-shake-y-@": `
 @keyframes shake-y {
   0%, 100% { transform: translateY(0%) }
@@ -77,12 +77,12 @@ export default {
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }`,
-  "--animation-spin": "spin 2s var(--spin-easing, steps(4)) infinite", 
+  "--animation-spin": "spin 2s var(--spin-easing, steps(4, jump-start)) infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
 }`,
-  "--animation-ping": "ping var(--ping-duration, 4s) var(--ping-easing, steps(4)) infinite", 
+  "--animation-ping": "ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite", 
   "--animation-ping-@": `
 @keyframes ping {
   90%, 100% {
@@ -100,7 +100,7 @@ export default {
     opacity: .5
   }
 }`,
-  "--animation-float": "float 3s var(--float-ease, steps(2)) infinite", 
+  "--animation-float": "float 3s var(--float-ease, steps(2, jump-start)) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
@@ -112,7 +112,7 @@ export default {
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }`,
-  "--animation-pulse": "pulse 2s var(--pulse-ease, steps(2)) infinite", 
+  "--animation-pulse": "pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }

From c439cd2ac315751cf62a19d68ab8e4fdb0f83c44 Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Wed, 23 Feb 2022 21:52:19 -0800
Subject: [PATCH 9/9] adds fixes for combo examples, fixes scale animations

---
 build/to-stylesheet.js   |  1 +
 docsite/index.css        | 11 +++++++++--
 docsite/index.html       | 16 ++++++++++++++--
 src/props.animations.css |  5 +++--
 src/props.animations.js  |  4 ++--
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index 7045822f..568f611a 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -40,6 +40,7 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
 @media (--motionOK) {
   :where(html) {
     --scale-duration: .5s;
+    --scale-easing: var(--ease-3);
     --slide-duration: .5s;
     --slide-easing: var(--ease-3);
     --shake-duration: .75s;
diff --git a/docsite/index.css b/docsite/index.css
index ff0fcb97..6cd6e36f 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -1352,9 +1352,13 @@ input[type="range"] {
   --animation-slide-down-fade-out: 
     var(--animation-fade-out) forwards,
     var(--animation-slide-out-down);
+
   /* important required because JS is writing props into inline styles */
-  animation-timing-function: var(--ease-squish-3) !important;
   animation-duration: 1s !important;
+
+  @media (--motionOK) {
+    animation-timing-function: var(--ease-3), var(--ease-squish-3) !important;
+  }
 }
 
 .shake-fade-combo {
@@ -1369,7 +1373,10 @@ input[type="range"] {
     var(--animation-scale-down),
     var(--animation-fade-out)
   ;
-  animation-timing-function: var(--ease-squish-4) !important;
+
+  @media (--motionOK) {
+    animation-timing-function: var(--ease-squish-4), var(--ease-3) !important;
+  }
 }
 
 
diff --git a/docsite/index.html b/docsite/index.html
index 4989367e..e4c76b7b 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2386,8 +2386,14 @@ <h6>Slide Fade</h6>
                   animation: 
                     var(--animation-fade-out) forwards,
                     var(--animation-slide-out-down);
-                  animation-timing-function: var(--ease-squish-3);
                   animation-duration: 1s;
+
+                  /* change slide timing to squish */
+                  @media (--motionOK) {
+                    animation-timing-function: 
+                      var(--ease-3), 
+                      var(--ease-squish-3);
+                  }
                 }
               </code></pre>
             </div>
@@ -2432,7 +2438,13 @@ <h6>Push Out</h6>
                   animation: 
                     var(--animation-scale-down),
                     var(--animation-fade-out);
-                  animation-timing-function: var(--ease-squish-4);
+
+                  /* change scale timing to squish */
+                  @media (--motionOK) {
+                    animation-timing-function: 
+                      var(--ease-squish-4), 
+                      var(--ease-3);
+                  }
                 }
               </code></pre>
             </div>
diff --git a/src/props.animations.css b/src/props.animations.css
index 04f6ea05..12eacded 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -1,8 +1,8 @@
 :where(html) {
   --animation-fade-in: fade-in .5s var(--ease-3);
   --animation-fade-out: fade-out .5s var(--ease-3);
-  --animation-scale-up: scale-up var(--scale-duration, 1ms) var(--ease-3);
-  --animation-scale-down: scale-down var(--scale-duration, 1ms) var(--ease-3);
+  --animation-scale-up: scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
+  --animation-scale-down: scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
   --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
   --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
   --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
@@ -102,6 +102,7 @@
 @media (--motionOK) {
   :where(html) {
     --scale-duration: .5s;
+    --scale-easing: var(--ease-3);
     --slide-duration: .5s;
     --slide-easing: var(--ease-3);
     --shake-duration: .75s;
diff --git a/src/props.animations.js b/src/props.animations.js
index b0715b32..9cbdf242 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -9,12 +9,12 @@ export default {
 @keyframes fade-out {
   to { opacity: 0 }
 }`,
-  "--animation-scale-up": "scale-up var(--scale-duration, 1ms) var(--ease-3)", 
+  "--animation-scale-up": "scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", 
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }`,
-  "--animation-scale-down": "scale-down var(--scale-duration, 1ms) var(--ease-3)", 
+  "--animation-scale-down": "scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", 
   "--animation-scale-down-@": `
 @keyframes scale-down {
   to { transform: scale(.75) }