From f79c77a65406823dbcf9f86a9f2a7096f9916f74 Mon Sep 17 00:00:00 2001 From: sai Date: Fri, 27 Jan 2023 15:13:41 +0200 Subject: [PATCH 01/29] add animations for reduced motion --- src/props.animations.css | 90 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/src/props.animations.css b/src/props.animations.css index 603555a9..4eb4d723 100644 --- a/src/props.animations.css +++ b/src/props.animations.css @@ -5,24 +5,47 @@ --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); --animation-fade-out: fade-out .5s var(--ease-3); --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); + --animation-scale-up: scale-up .5s var(--ease-3); + --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-4); --animation-scale-down: scale-down .5s var(--ease-3); + --animation-scale-down-reduced: scale-down-reduced .5s var(--ease-4); + --animation-slide-out-up: slide-out-up .5s var(--ease-3); + --animation-slide-out-up-reduced: slide-out-up-reduced .5s var(--ease-4); --animation-slide-out-down: slide-out-down .5s var(--ease-3); + --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-4); --animation-slide-out-right: slide-out-right .5s var(--ease-3); + --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-4); --animation-slide-out-left: slide-out-left .5s var(--ease-3); + --animation-slide-out-left-reduced: slide-out-left-reduced .5s var(--ease-4); + --animation-slide-in-up: slide-in-up .5s var(--ease-3); + --animation-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-4); --animation-slide-in-down: slide-in-down .5s var(--ease-3); + --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-4); --animation-slide-in-right: slide-in-right .5s var(--ease-3); + --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-4); --animation-slide-in-left: slide-in-left .5s var(--ease-3); + --animation-slide-in-left-reduced: slide-in-left-reduced .5s var(--ease-4); + --animation-shake-x: shake-x .75s var(--ease-out-5); + --animation-shake-x-reduced: shake-x-reduced .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); + --animation-shake-y-reduced: shake-y-reduced .75s var(--ease-out-5); + --animation-spin: spin 2s linear infinite; + --animation-spin-reduced: spin 4s var(--ease-step-4) infinite; /* too fast? */ --animation-ping: ping 5s var(--ease-out-3) infinite; + --animation-ping-reduced: ping-reduced 5s var(--ease-out-5) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; + --animation-blink-reduced: blink 2s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; + --animation-float-reduced: float-reduced 3s var(--ease-in-out-2) infinite; --animation-bounce: bounce 2s var(--ease-squish-2) infinite; + --animation-bounce-reduced: bounce-reduced 2s var(--ease-squish-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; + --animation-pulse-reduced: pulse-reduced 2s var(--ease-out-3) infinite; } @keyframes fade-in { @@ -41,36 +64,70 @@ 10% { opacity: 1; filter: brightness(2) blur(10px) } 0% { opacity: 1; filter: brightness(1) blur(0) } } + @keyframes scale-up { to { transform: scale(1.25) } } +@keyframes scale-up-reduced { + to { transform: scale(1.10) } +} @keyframes scale-down { to { transform: scale(.75) } } +@keyframes scale-down-reduced { + to { transform: scale(.90) } +} + @keyframes slide-out-up { to { transform: translateY(-100%) } } +@keyframes slide-out-up-reduced { + to { transform: translateY(-10%) } +} @keyframes slide-out-down { to { transform: translateY(100%) } } +@keyframes slide-out-down-reduced { + to { transform: translateY(10%) } +} @keyframes slide-out-right { to { transform: translateX(100%) } } +@keyframes slide-out-right-reduced { + to { transform: translateX(10%) } +} @keyframes slide-out-left { to { transform: translateX(-100%) } } +@keyframes slide-out-left-reduced { + to { transform: translateX(-10%) } +} + @keyframes slide-in-up { from { transform: translateY(100%) } } +@keyframes slide-in-up-reduced { + from { transform: translateY(10%) } +} @keyframes slide-in-down { from { transform: translateY(-100%) } } +@keyframes slide-in-down-reduced { + from { transform: translateY(-10%) } +} @keyframes slide-in-right { from { transform: translateX(-100%) } } +@keyframes slide-in-right-reduced { + from { transform: translateX(-10%) } +} @keyframes slide-in-left { from { transform: translateX(100%) } } +@keyframes slide-in-left-reduced { + from { transform: translateX(10%) } +} + @keyframes shake-x { 0%, 100% { transform: translateX(0%) } 20% { transform: translateX(-5%) } @@ -78,6 +135,13 @@ 60% { transform: translateX(-5%) } 80% { transform: translateX(5%) } } +@keyframes shake-x-reduced { + 0%, 100% { transform: translateX(0%) } + 20% { transform: translateX(-2%) } + 40% { transform: translateX(2%) } + 60% { transform: translateX(-2%) } + 80% { transform: translateX(2%) } +} @keyframes shake-y { 0%, 100% { transform: translateY(0%) } 20% { transform: translateY(-5%) } @@ -85,6 +149,14 @@ 60% { transform: translateY(-5%) } 80% { transform: translateY(5%) } } +@keyframes shake-y-reduced { + 0%, 100% { transform: translateY(0%) } + 20% { transform: translateY(-2%) } + 40% { transform: translateY(2%) } + 60% { transform: translateY(-2%) } + 80% { transform: translateY(2%) } +} + @keyframes spin { to { transform: rotate(1turn) } } @@ -94,6 +166,12 @@ opacity: 0; } } +@keyframes ping-reduced { + 90%, 100% { + transform: scale(1.2); + opacity: 0; + } +} @keyframes blink { 0%, 100% { opacity: 1 @@ -105,14 +183,26 @@ @keyframes float { 50% { transform: translateY(-25%) } } +@keyframes float-reduced { + 50% { transform: translateY(-10%) } +} @keyframes bounce { 25% { transform: translateY(-20%) } 40% { transform: translateY(-3%) } 0%, 60%, 100% { transform: translateY(0) } } +@keyframes bounce-reduced { + 25% { transform: translateY(-7%) } + 40% { transform: translateY(-2%) } + 0%, 60%, 100% { transform: translateY(0) } +} @keyframes pulse { 50% { transform: scale(.9,.9) } } +@keyframes pulse-reduced { + 50% { transform: scale(.95,.95) } +} + @media (--OSdark) { @keyframes fade-in-bloom { 0% { opacity: 0; filter: brightness(1) blur(20px) } From 9d58a7fa7ee2a9236495164ddb84c9aba88f7d6c Mon Sep 17 00:00:00 2001 From: sai Date: Fri, 27 Jan 2023 15:15:03 +0200 Subject: [PATCH 02/29] add previews for new animations to docsite --- docsite/index.css | 7 ++ docsite/index.html | 212 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) diff --git a/docsite/index.css b/docsite/index.css index 852b36f2..cc824c1a 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -1381,6 +1381,13 @@ input[type="range"] { var(--animation-slide-in-left); } +.reduced-shake-fade-combo { + --animation-slide-left-fade-in-shake-y-reduced: + var(--animation-shake-y-reduced), + var(--animation-fade-in), + var(--animation-slide-in-left-reduced); +} + .push-out-combo { --animation-push-out: var(--animation-scale-down), diff --git a/docsite/index.html b/docsite/index.html index 150ef1ef..e839a80f 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2524,6 +2524,8 @@
Bloom Fade Out
+
+
Scale Up
+
+
Scale Up Less
+ +
+
Scale Down
+
+
Scale Down Less
+ +
+ +
Slide Out Up
@@ -2554,6 +2577,16 @@
Slide Out Up
+
+
Slide Out Up Less
+ +
+
Slide Out Down
+
+
Slide Out Down Less
+ +
+
Slide Out Right
+
+
Slide Out Right Less
+ +
+
Slide Out Left
+
+
Slide Out Left Less
+ +
+ +
+
Slide In Up
+
+
Slide In Up Less
+ +
+
Slide In Down
+
+
Slide In Down Less
+ +
+
Slide In Right
+
+
Slide In Right Less
+ +
+
Slide In Left
+
+
Slide In Left Less
+ +
+ +
+
Spin
+
+
Spin Less
+ +
+
Ping
+
+
Ping Less
+ +
+
Blink
+
+
Blink Less
+ +
+
Float
+
+
Float Less
+ +
+
Bounce
+
+
Bounce Less
+ +
+
Pulse
+
+
Pulse Less
+ +
+ +
+
Shake X
+
+
Shake X Less
+ +
+
Shake Y
+ +
+
Shake Y Less
+ +
@@ -2776,6 +2965,29 @@
Push Out
+ +
+ +
+
Shake In Less
+ +
+
+ 

+                .shake-in-reduced {
+                  animation: 
+                    var(--animation-shake-y-reduced),
+                    var(--animation-fade-in),
+                    var(--animation-slide-in-left-reduced);
+                }
+
+
+
From 9f8fb02d2db9d6641db830e7b8be123a5efb8566 Mon Sep 17 00:00:00 2001 From: sai Date: Fri, 10 Feb 2023 18:12:23 +0200 Subject: [PATCH 03/29] add animations that use fades --- docsite/index.html | 192 ++++++++++++++++++++++++++++++++++ src/props.animations.css | 215 ++++++++++++++++++++++++++++++++++++++- 2 files changed, 404 insertions(+), 3 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index e839a80f..4bd25b1d 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2483,6 +2483,7 @@
Usage Sample
Samples
+
Fade In
@@ -2546,6 +2547,26 @@
Scale Up Less
+
+
Scale Up Fade
+ +
+ +
+
Scale Up Less Fade
+ +
+
Scale Down
+
Scale Down Less
+
+
Scale Down Fade
+ +
+ +
+
Scale Down Less Fade
+ +
+
@@ -2577,6 +2619,16 @@
Slide Out Up
+
+
Slide Out Up Fade
+ +
+
Slide Out Up Less
+
+
Slide Out Up Less Fade
+ +
+
Slide Out Down
+
+
Slide Out Down Fade
+ +
+
Slide Out Down Less
+
+
Slide Out Right Fade
+ +
+
Slide Out Right Less
+
+
Slide Out Left Fade
+ +
+
Slide Out Left Less
+
+
Slide In Up Fade
+ +
+
Slide In Up Less
+
+
Slide In Down Fade
+ +
+
Slide In Down Less
+
+
Slide In Right Fade
+ +
+
Slide In Right Less
+
+
Slide In Left Fade
+ +
+
Slide In Left Less
+
+
Spin Less Fade
+ +
+
Ping
+
+
Float Fade
+ +
+
Float Less
+
+
Bounce Fade
+ +
+
Bounce Less
+
+
Pulse Fade
+ +
+
Pulse Less
+
+
Shake X Fade
+ +
+
Shake X Less
+
+
Shake Y Fade
+ +
+
Shake Y Less
-
+
Scale Up Less
-
+
Scale Up Less Fade
-
+
Scale Down Less
-
+
Scale Down Less Fade
-
+
Slide Out Up Less
-
+
Slide Out Up Less Fade
-
+
Slide Out Down Less
-
+
Slide Out Right Less
-
+
Slide Out Left Less
-
+
Slide In Up Less
-
+
Slide In Down Less
-
+
Slide In Right Less
-
+
Slide In Left Less
-
+
Spin Less
-
+
Spin Less Fade
-
+
Ping Less
-
+
Blink Less
-
+
Float Less
-
+
Bounce Less
-
+
Pulse Less
-
+
Shake X Less
-
+
Shake Y Less

-                .shake-in-reduced {
+                .shake-in-less {
                   animation: 
-                    var(--animation-shake-y-reduced),
+                    var(--animation-shake-y-less),
                     var(--animation-fade-in),
-                    var(--animation-slide-in-left-reduced);
+                    var(--animation-slide-in-left-less);
                 }
diff --git a/src/props.animations.css b/src/props.animations.css index be6cf468..70d78a9b 100644 --- a/src/props.animations.css +++ b/src/props.animations.css @@ -7,64 +7,64 @@ --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); --animation-scale-up: scale-up .5s var(--ease-3); - --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-4); + --animation-scale-up-less: scale-up-less .5s var(--ease-4); --animation-scale-up-fade: scale-up-fade .5s var(--ease-3); - --animation-scale-up-reduced-fade: scale-up-reduced-fade .5s var(--ease-4); + --animation-scale-up-less-fade: scale-up-less-fade .5s var(--ease-4); --animation-scale-down: scale-down .5s var(--ease-3); - --animation-scale-down-reduced: scale-down-reduced .5s var(--ease-4); + --animation-scale-down-less: scale-down-less .5s var(--ease-4); --animation-scale-down-fade: scale-down-fade .5s var(--ease-3); - --animation-scale-down-reduced-fade: scale-down-reduced-fade .5s var(--ease-4); + --animation-scale-down-less-fade: scale-down-less-fade .5s var(--ease-4); --animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-up-fade: slide-out-up-fade .5s var(--ease-3); - --animation-slide-out-up-reduced: slide-out-up-reduced .5s var(--ease-4); - --animation-slide-out-up-reduced-fade: slide-out-up-reduced-fade .5s var(--ease-4); + --animation-slide-out-up-less: slide-out-up-less .5s var(--ease-4); + --animation-slide-out-up-less-fade: slide-out-up-less-fade .5s var(--ease-4); --animation-slide-out-down: slide-out-down .5s var(--ease-3); --animation-slide-out-down-fade: slide-out-down-fade .5s var(--ease-3); - --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-4); + --animation-slide-out-down-less: slide-out-down-less .5s var(--ease-4); --animation-slide-out-right: slide-out-right .5s var(--ease-3); --animation-slide-out-right-fade: slide-out-right-fade .5s var(--ease-3); - --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-4); + --animation-slide-out-right-less: slide-out-right-less .5s var(--ease-4); --animation-slide-out-left: slide-out-left .5s var(--ease-3); --animation-slide-out-left-fade: slide-out-left-fade .5s var(--ease-3); - --animation-slide-out-left-reduced: slide-out-left-reduced .5s var(--ease-4); + --animation-slide-out-left-less: slide-out-left-less .5s var(--ease-4); --animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-up-fade: slide-in-up-fade .5s var(--ease-3); - --animation-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-4); + --animation-slide-in-up-less: slide-in-up-less .5s var(--ease-4); --animation-slide-in-down: slide-in-down .5s var(--ease-3); --animation-slide-in-down-fade: slide-in-down-fade .5s var(--ease-3); - --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-4); + --animation-slide-in-down-less: slide-in-down-less .5s var(--ease-4); --animation-slide-in-right: slide-in-right .5s var(--ease-3); --animation-slide-in-right-fade: slide-in-right-fade .5s var(--ease-3); - --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-4); + --animation-slide-in-right-less: slide-in-right-less .5s var(--ease-4); --animation-slide-in-left: slide-in-left .5s var(--ease-3); --animation-slide-in-left-fade: slide-in-left-fade .5s var(--ease-3); - --animation-slide-in-left-reduced: slide-in-left-reduced .5s var(--ease-4); + --animation-slide-in-left-less: slide-in-left-less .5s var(--ease-4); --animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-x-fade: shake-x-fade 1.5s; - --animation-shake-x-reduced: shake-x-reduced .75s var(--ease-out-5); + --animation-shake-x-less: shake-x-less .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); --animation-shake-y-fade: shake-y-fade 1.5s; - --animation-shake-y-reduced: shake-y-reduced .75s var(--ease-out-5); + --animation-shake-y-less: shake-y-less .75s var(--ease-out-5); --animation-spin: spin 2s linear infinite; - --animation-spin-reduced: spin 4s var(--ease-step-3) infinite; - --animation-spin-reduced-fade: spin-reduced-fade 4s var(--ease-step-3) infinite; + --animation-spin-less: spin 4s var(--ease-step-3) infinite; + --animation-spin-less-fade: spin-less-fade 4s var(--ease-step-3) infinite; --animation-ping: ping 5s var(--ease-out-3) infinite; - --animation-ping-reduced: ping-reduced 5s var(--ease-out-5) infinite; + --animation-ping-less: ping-less 5s var(--ease-out-5) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; - --animation-blink-reduced: blink 2s var(--ease-out-3) infinite; + --animation-blink-less: blink 2s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; --animation-float-fade: float-fade 3s var(--ease-in-out-3) infinite; - --animation-float-reduced: float-reduced 3s var(--ease-in-out-2) infinite; + --animation-float-less: float-less 3s var(--ease-in-out-2) infinite; --animation-bounce: bounce 2s var(--ease-squish-2) infinite; --animation-bounce-fade: bounce-fade 2s var(--ease-squish-2) infinite; - --animation-bounce-reduced: bounce-reduced 2s var(--ease-squish-2) infinite; + --animation-bounce-less: bounce-less 2s var(--ease-squish-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; --animation-pulse-fade: pulse-fade 2s var(--ease-out-3) infinite; - --animation-pulse-reduced: pulse-reduced 2s var(--ease-out-3) infinite; + --animation-pulse-less: pulse-less 2s var(--ease-out-3) infinite; } @keyframes fade-in { @@ -87,7 +87,7 @@ @keyframes scale-up { to { transform: scale(1.25) } } -@keyframes scale-up-reduced { +@keyframes scale-up-less { to { transform: scale(1.1) } } @keyframes scale-up-fade { @@ -96,7 +96,7 @@ 55% { opacity: 0; transform: scale(1.25) } 100% { opacity: 1; transform: scale(1.25) } } -@keyframes scale-up-reduced-fade { +@keyframes scale-up-less-fade { 0% { opacity: 1 } 45% { opacity: 0; transform: scale(1) } 55% { opacity: 0; transform: scale(1.1) } @@ -105,7 +105,7 @@ @keyframes scale-down { to { transform: scale(.75) } } -@keyframes scale-down-reduced { +@keyframes scale-down-less { to { transform: scale(.9) } } @keyframes scale-down-fade { @@ -114,7 +114,7 @@ 55% { opacity: 0; transform: scale(0.75) } 100% { opacity: 1; transform: scale(0.75) } } -@keyframes scale-down-reduced-fade { +@keyframes scale-down-less-fade { 0% { opacity: 1 } 45% { opacity: 0; transform: scale(1) } 55% { opacity: 0; transform: scale(0.9) } @@ -124,7 +124,7 @@ @keyframes slide-out-up { to { transform: translateY(-100%) } } -@keyframes slide-out-up-reduced { +@keyframes slide-out-up-less { to { transform: translateY(-10%) } } @keyframes slide-out-up-fade { @@ -134,7 +134,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-out-up-reduced-fade { +@keyframes slide-out-up-less-fade { to { transform: translateY(-10%) } 0% { opacity: 1 } 20% { opacity: 0 } @@ -151,7 +151,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-out-down-reduced { +@keyframes slide-out-down-less { to { transform: translateY(10%) } } @keyframes slide-out-right { @@ -164,7 +164,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-out-right-reduced { +@keyframes slide-out-right-less { to { transform: translateX(10%) } } @keyframes slide-out-left { @@ -177,7 +177,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-out-left-reduced { +@keyframes slide-out-left-less { to { transform: translateX(-10%) } } @@ -191,7 +191,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-in-up-reduced { +@keyframes slide-in-up-less { from { transform: translateY(10%) } } @keyframes slide-in-down { @@ -204,7 +204,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-in-down-reduced { +@keyframes slide-in-down-less { from { transform: translateY(-10%) } } @keyframes slide-in-right { @@ -217,7 +217,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-in-right-reduced { +@keyframes slide-in-right-less { from { transform: translateX(-10%) } } @keyframes slide-in-left { @@ -230,7 +230,7 @@ 60% { opacity: 0 } 100% { opacity: 1 } } -@keyframes slide-in-left-reduced { +@keyframes slide-in-left-less { from { transform: translateX(10%) } } @@ -263,7 +263,7 @@ 91% { opacity: 0; transform: translateX(0%) } } -@keyframes shake-x-reduced { +@keyframes shake-x-less { 0%, 100% { transform: translateX(0%) } 20% { transform: translateX(-2%) } 40% { transform: translateX(2%) } @@ -299,7 +299,7 @@ 91% { opacity: 0; transform: translateY(0%) } } -@keyframes shake-y-reduced { +@keyframes shake-y-less { 0%, 100% { transform: translateY(0%) } 20% { transform: translateY(-2%) } 40% { transform: translateY(2%) } @@ -310,7 +310,7 @@ @keyframes spin { to { transform: rotate(1turn) } } -@keyframes spin-reduced-fade { +@keyframes spin-less-fade { to { transform: rotate(1turn) } 0%, 100% { opacity: 0 } @@ -336,7 +336,7 @@ opacity: 0; } } -@keyframes ping-reduced { +@keyframes ping-less { 90%, 100% { transform: scale(1.2); opacity: 0; @@ -366,7 +366,7 @@ 80% { opacity: 0 } 90% { opacity: 1 } } -@keyframes float-reduced { +@keyframes float-less { 50% { transform: translateY(-10%) } } @keyframes bounce { @@ -389,7 +389,7 @@ 35% { opacity: 0 } 40% { opacity: 1 } } -@keyframes bounce-reduced { +@keyframes bounce-less { 25% { transform: translateY(-7%) } 40% { transform: translateY(-2%) } 0%, 60%, 100% { transform: translateY(0) } @@ -408,7 +408,7 @@ 80% { opacity: 0; transform: scale(1,1) } 90% { opacity: 1 } } -@keyframes pulse-reduced { +@keyframes pulse-less { 50% { transform: scale(.95,.95) } } From 0873a7958dda66c80b008374ee2b1576e215c411 Mon Sep 17 00:00:00 2001 From: sai Date: Mon, 24 Apr 2023 14:20:48 +0200 Subject: [PATCH 05/29] remove old iterations --- docsite/index.html | 330 ++++++++------------------------------- src/props.animations.css | 110 ++----------- 2 files changed, 78 insertions(+), 362 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index e125ce98..69d22162 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -56,13 +56,13 @@ Get Started - Try in browser + Try in browser RAD
- +
PostCSS - +
CSS Imports

@@ -973,7 +973,7 @@ 
Bundles

                     import OpenProps from 'open-props/src'; // unbundled ES module
                     import Colors from 'open-props/src/colors';
 
-                    // object notation access is special to OpenProps 
+                    // object notation access is special to OpenProps
                     console.info(OpenProps.size1);
                     console.info(OpenProps['--size-1']);
 
@@ -1031,7 +1031,7 @@ 
Props as Javascript

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-                    
+
                     module.exports = {
                       plugins: [
                         postcssJitProps(OpenProps),
@@ -1045,7 +1045,7 @@ 
Props from CSS

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-                    
+
                     module.exports = {
                       plugins: [
                         postcssJitProps({
@@ -1075,14 +1075,14 @@ 
Customize Bundles

                     npm run gen:shadowdom                   // src files with `:host` instead of `html`
                     npm run gen:nowhere                     // src files without `:where()`
                     npm run gen:prefixed                    // each prop prefixed with `op`, like `--op-font-size-1`
-                    
+
                     // full custom! pass args with node to the props.js script
                     node props.js 'ns' true ':root' 'my'
                     ⇣
                     // arg1: default '', is a custom namespace, props will be --ns-gray-1
                     // arg2: default false, indicates wrapping in :where() or not
                     // arg3: default '', set a custom selector like :scope, .my-class, etc
-                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc 
+                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
@@ -1160,13 +1160,13 @@

Autocomplete

Sublime Text
  1. - There are number of ways with which the autocomplete engine of Sublime Text can be extended. - You can decide to use the completion files, - snippets or - plugins. + There are number of ways with which the autocomplete engine of Sublime Text can be extended. + You can decide to use the completion files, + snippets or + plugins.
  2. - An approach that is less strenous is the "completion file" approach. + An approach that is less strenous is the "completion file" approach. Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so: 
    3. 
@@ -1185,7 +1185,7 @@ 
    Autocomplete
    
                   "scope": "path/to/your/variables",
               }
    -
  3. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via +
  4. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via Preferences > Settings, then you'll modify the file to include the snippet below — replacing "source" with the path to your variables. 
    5. 
@@ -1320,7 +1320,7 @@ 
    Stone
    
         
         
         
-
+

Red

@@ -1592,7 +1592,7 @@

Jungle

-
+
@@ -1676,7 +1676,7 @@
Purple

2) Creating adaptive color schemes

It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.

- +
No Preference (Light)
@@ -1753,7 +1753,7 @@
Prefers Purple

3) Using the aliases

Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

- +
Page Styles Using Themes
@@ -1797,7 +1797,7 @@
Typography
} h5,h6,small,dd { - color: var(--text-2); + color: var(--text-2); }
@@ -1979,9 +1979,9 @@
Vars Sample
--ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; - --ratio-widescreen: 16/9; + --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; - --ratio-golden: 1.6180/1; + --ratio-golden: 1.6180/1;
@@ -2024,7 +2024,7 @@
The Props
- +
Usage Sample

@@ -2085,14 +2085,14 @@ 
Font Weights
Aa
-
@@ -2116,14 +2116,14 @@

Letter Spacing

Letter Spacing
-
@@ -2148,14 +2148,14 @@

Line Height

Sample paragraph content to provide a preview for OP's line heights
-
@@ -2178,7 +2178,7 @@

Relative Line Height

--font-relative-lineheight-6: calc(1rem + 3ch); --> - +

Font Sizes


@@ -2470,7 +2470,7 @@ 
Usage Sample

               animation: var(--animation-slide-out-down) forwards;
 
               &.open {
-                animation: var(--animation-slide-in-up) forwards;  
+                animation: var(--animation-slide-in-up) forwards;
               }
             }
 
@@ -2514,7 +2514,7 @@ 
Bloom Fade In
- +
Bloom Fade Out
-
-
Scale Up Less
- -
-
Scale Up Fade
-
-
Scale Up Less Fade
- -
-
Scale Down
-
-
Scale Down Less
- -
-
Scale Down Fade
-
-
Scale Down Less Fade
- -
-
@@ -2629,26 +2589,6 @@
Slide Out Up Fade
-
-
Slide Out Up Less
- -
- -
-
Slide Out Up Less Fade
- -
-
Slide Out Down
-
-
Slide Out Down Less
- -
-
Slide Out Right
-
-
Slide Out Right Less
- -
-
Slide Out Left
-
-
Slide Out Left Less
- -
-
@@ -2761,16 +2671,6 @@
Slide In Up Fade
-
-
Slide In Up Less
- -
-
Slide In Down
-
-
Slide In Down Less
- -
-
Slide In Right
-
-
Slide In Right Less
- -
-
Slide In Left
-
-
Slide In Left Less
- -
-
@@ -2873,16 +2743,6 @@
Spin
-
-
Spin Less
- -
-
Spin Less Fade
-
-
Blink Less
- -
-
Float
-
-
Float Less
- -
-
Bounce
-
-
Bounce Less
- -
-
Pulse
-
-
Pulse Less
- -
-
@@ -3045,16 +2865,6 @@
Shake X Fade
-
-
Shake X Less
- -
-
Shake Y
- -
-
Shake Y Less
- -
@@ -3103,7 +2903,7 @@
Slide Fade

                 .slide-fade {
-                  animation: 
+                  animation:
                     var(--animation-fade-out) forwards,
                     var(--animation-slide-out-down);
                   animation-timing-function: var(--ease-squish-3);
@@ -3127,7 +2927,7 @@ 
Shake In

             

               

                 .shake-in {
-                  animation: 
+                  animation:
                     var(--animation-shake-y),
                     var(--animation-fade-in),
                     var(--animation-slide-in-left);
@@ -3149,7 +2949,7 @@ 
Push Out

             

               

                 .push-out {
-                  animation: 
+                  animation:
                     var(--animation-scale-down),
                     var(--animation-fade-out);
                   animation-timing-function: var(--ease-squish-4);
@@ -3172,7 +2972,7 @@ 
Shake In Less

             

               

                 .shake-in-less {
-                  animation: 
+                  animation:
                     var(--animation-shake-y-less),
                     var(--animation-fade-in),
                     var(--animation-slide-in-left-less);
@@ -3230,12 +3030,12 @@ 
Relative Sizes

         

           
Usage Sample

           

-            article { 
+            article {
               display: grid;
               gap: var(--size-3);
             }
 
-            li { 
+            li {
               padding-inline-start: var(--size-2);
             }
 
@@ -3285,11 +3085,11 @@ 
Fluid Sizes

         

           
Usage Sample

           

-            body { 
+            body {
               padding: var(--size-fluid-3);
             }
 
-            hr { 
+            hr {
               margin-block: var(--size-fluid-5);
             }
           

@@ -3322,11 +3122,11 @@ 
Reading Content Sizes

         

           
Usage Sample

           

-            p { 
+            p {
               max-inline-size: var(--size-content-3);
             }
 
-            aside { 
+            aside {
               max-inline-size: var(--size-content-2);
             }
           

@@ -3357,11 +3157,11 @@ 
Headline Content Sizes

         

           
Usage Sample

           

-            h1 { 
+            h1 {
               max-inline-size: var(--size-header-2);
             }
 
-            small { 
+            small {
               max-inline-size: var(--size-header-1);
             }
           

@@ -3387,7 +3187,7 @@ 
Borders

       
       

         

-          
+
           
Vars Sample

           

             

@@ -3710,7 +3510,7 @@ 
NPM Imported Usage Sample

           

         

       

-    
+
       

         

           
Mask Edges

@@ -3783,7 +3583,7 @@ 
Drips

 
         

 
-        
Zig-Zag
          
+        
Zig-Zag

         

           
Top

           
Right

@@ -3800,7 +3600,7 @@ 
Zig-Zag

           }
         

       

-    
+
       

         

           
Mask Corner Cuts

@@ -3824,7 +3624,7 @@ 
Circles

           
           

             --mask-corner-cut-circles-{1,2,3}
-  
+
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-circles-2);
             }
@@ -3842,7 +3642,7 @@ 
Squares

           
           

             --mask-corner-cut-squares-{1,2,3}
-  
+
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-squares-2);
             }
@@ -3858,7 +3658,7 @@ 
Angles

           
           

             --mask-corner-cut-angles-{1,2,3}
-  
+
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-angles-2);
             }
diff --git a/src/props.animations.css b/src/props.animations.css
index 70d78a9b..f720e3cd 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -7,64 +7,49 @@
   --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
 
   --animation-scale-up: scale-up .5s var(--ease-3);
-  --animation-scale-up-less: scale-up-less .5s var(--ease-4);
   --animation-scale-up-fade: scale-up-fade .5s var(--ease-3);
-  --animation-scale-up-less-fade: scale-up-less-fade .5s var(--ease-4);
   --animation-scale-down: scale-down .5s var(--ease-3);
-  --animation-scale-down-less: scale-down-less .5s var(--ease-4);
   --animation-scale-down-fade: scale-down-fade .5s var(--ease-3);
-  --animation-scale-down-less-fade: scale-down-less-fade .5s var(--ease-4);
 
   --animation-slide-out-up: slide-out-up .5s var(--ease-3);
   --animation-slide-out-up-fade: slide-out-up-fade .5s var(--ease-3);
-  --animation-slide-out-up-less: slide-out-up-less .5s var(--ease-4);
-  --animation-slide-out-up-less-fade: slide-out-up-less-fade .5s var(--ease-4);
   --animation-slide-out-down: slide-out-down .5s var(--ease-3);
   --animation-slide-out-down-fade: slide-out-down-fade .5s var(--ease-3);
-  --animation-slide-out-down-less: slide-out-down-less .5s var(--ease-4);
   --animation-slide-out-right: slide-out-right .5s var(--ease-3);
   --animation-slide-out-right-fade: slide-out-right-fade .5s var(--ease-3);
-  --animation-slide-out-right-less: slide-out-right-less .5s var(--ease-4);
   --animation-slide-out-left: slide-out-left .5s var(--ease-3);
   --animation-slide-out-left-fade: slide-out-left-fade .5s var(--ease-3);
-  --animation-slide-out-left-less: slide-out-left-less .5s var(--ease-4);
 
   --animation-slide-in-up: slide-in-up .5s var(--ease-3);
   --animation-slide-in-up-fade: slide-in-up-fade .5s var(--ease-3);
-  --animation-slide-in-up-less: slide-in-up-less .5s var(--ease-4);
   --animation-slide-in-down: slide-in-down .5s var(--ease-3);
   --animation-slide-in-down-fade: slide-in-down-fade .5s var(--ease-3);
-  --animation-slide-in-down-less: slide-in-down-less .5s var(--ease-4);
   --animation-slide-in-right: slide-in-right .5s var(--ease-3);
   --animation-slide-in-right-fade: slide-in-right-fade .5s var(--ease-3);
-  --animation-slide-in-right-less: slide-in-right-less .5s var(--ease-4);
   --animation-slide-in-left: slide-in-left .5s var(--ease-3);
   --animation-slide-in-left-fade: slide-in-left-fade .5s var(--ease-3);
-  --animation-slide-in-left-less: slide-in-left-less .5s var(--ease-4);
 
   --animation-shake-x: shake-x .75s var(--ease-out-5);
   --animation-shake-x-fade: shake-x-fade 1.5s;
-  --animation-shake-x-less: shake-x-less .75s var(--ease-out-5);
   --animation-shake-y: shake-y .75s var(--ease-out-5);
   --animation-shake-y-fade: shake-y-fade 1.5s;
-  --animation-shake-y-less: shake-y-less .75s var(--ease-out-5);
 
   --animation-spin: spin 2s linear infinite;
-  --animation-spin-less: spin 4s var(--ease-step-3) infinite;
   --animation-spin-less-fade: spin-less-fade 4s var(--ease-step-3) infinite;
+
   --animation-ping: ping 5s var(--ease-out-3) infinite;
   --animation-ping-less: ping-less 5s var(--ease-out-5) infinite;
+
   --animation-blink: blink 1s var(--ease-out-3) infinite;
-  --animation-blink-less: blink 2s var(--ease-out-3) infinite;
+
   --animation-float: float 3s var(--ease-in-out-3) infinite;
   --animation-float-fade: float-fade 3s var(--ease-in-out-3) infinite;
-  --animation-float-less: float-less 3s var(--ease-in-out-2) infinite;
+
   --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
   --animation-bounce-fade: bounce-fade 2s var(--ease-squish-2) infinite;
-  --animation-bounce-less: bounce-less 2s var(--ease-squish-2) infinite;
+
   --animation-pulse: pulse 2s var(--ease-out-3) infinite;
   --animation-pulse-fade: pulse-fade 2s var(--ease-out-3) infinite;
-  --animation-pulse-less: pulse-less 2s var(--ease-out-3) infinite;
 }
 
 @keyframes fade-in {
@@ -87,46 +72,25 @@
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }
-@keyframes scale-up-less {
-  to { transform: scale(1.1) }
-}
 @keyframes scale-up-fade {
   0%   { opacity: 1 }
   45%  { opacity: 0; transform: scale(1) }
   55%  { opacity: 0; transform: scale(1.25) }
   100% { opacity: 1; transform: scale(1.25) }
 }
-@keyframes scale-up-less-fade {
-  0%   { opacity: 1 }
-  45%  { opacity: 0; transform: scale(1) }
-  55%  { opacity: 0; transform: scale(1.1) }
-  100% { opacity: 1; transform: scale(1.1) }
-}
 @keyframes scale-down {
   to { transform: scale(.75) }
 }
-@keyframes scale-down-less {
-  to { transform: scale(.9) }
-}
 @keyframes scale-down-fade {
   0%   { opacity: 1 }
   45%  { opacity: 0; transform: scale(1) }
   55%  { opacity: 0; transform: scale(0.75) }
   100% { opacity: 1; transform: scale(0.75) }
 }
-@keyframes scale-down-less-fade {
-  0%   { opacity: 1 }
-  45%  { opacity: 0; transform: scale(1) }
-  55%  { opacity: 0; transform: scale(0.9) }
-  100% { opacity: 1; transform: scale(0.9) }
-}
 
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }
-@keyframes slide-out-up-less {
-  to { transform: translateY(-10%) }
-}
 @keyframes slide-out-up-fade {
   to { transform: translateY(-100%) }
   0%   { opacity: 1 }
@@ -134,13 +98,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-out-up-less-fade {
-  to { transform: translateY(-10%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }
@@ -151,9 +108,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-out-down-less {
-  to { transform: translateY(10%) }
-}
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }
@@ -164,9 +118,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-out-right-less {
-  to { transform: translateX(10%) }
-}
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }
@@ -177,9 +128,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-out-left-less {
-  to { transform: translateX(-10%) }
-}
 
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
@@ -191,9 +139,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-in-up-less {
-  from { transform: translateY(10%) }
-}
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }
@@ -204,9 +149,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-in-down-less {
-  from { transform: translateY(-10%) }
-}
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }
@@ -217,9 +159,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-in-right-less {
-  from { transform: translateX(-10%) }
-}
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }
@@ -230,9 +169,6 @@
   60%  { opacity: 0 }
   100% { opacity: 1 }
 }
-@keyframes slide-in-left-less {
-  from { transform: translateX(10%) }
-}
 
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -263,13 +199,6 @@
 
   91% { opacity: 0; transform: translateX(0%) }
 }
-@keyframes shake-x-less {
-  0%, 100% { transform: translateX(0%) }
-  20% { transform: translateX(-2%) }
-  40% { transform: translateX(2%) }
-  60% { transform: translateX(-2%) }
-  80% { transform: translateX(2%) }
-}
 @keyframes shake-y {
   0%, 100% { transform: translateY(0%) }
   20% { transform: translateY(-5%) }
@@ -299,13 +228,6 @@
 
   91% { opacity: 0; transform: translateY(0%) }
 }
-@keyframes shake-y-less {
-  0%, 100% { transform: translateY(0%) }
-  20% { transform: translateY(-2%) }
-  40% { transform: translateY(2%) }
-  60% { transform: translateY(-2%) }
-  80% { transform: translateY(2%) }
-}
 
 @keyframes spin {
   to { transform: rotate(1turn) }
@@ -319,7 +241,7 @@
   20% { opacity: 1 }
   25% { opacity: 0 }
   30% { opacity: 1 }
-  
+
   45% { opacity: 1 }
   50% { opacity: 0 }
   55% { opacity: 1 }
@@ -327,9 +249,10 @@
   70% { opacity: 1 }
   75% { opacity: 0 }
   80% { opacity: 1 }
-  
+
   95% { opacity: 1 }
 }
+
 @keyframes ping {
   90%, 100% {
     transform: scale(2);
@@ -342,6 +265,7 @@
     opacity: 0;
   }
 }
+
 @keyframes blink {
   0%, 100% {
     opacity: 1
@@ -366,18 +290,17 @@
   80% { opacity: 0 }
   90% { opacity: 1 }
 }
-@keyframes float-less {
-  50% { transform: translateY(-10%) }
-}
+
 @keyframes bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }
 @keyframes bounce-fade {
+  0% { transform: translateY(0) }
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
-  0%, 60%, 100% { transform: translateY(0) }
+  60%, 100% { transform: translateY(0) }
 
   0%  { opacity: 1 }
   5%  { opacity: 0 }
@@ -389,11 +312,7 @@
   35% { opacity: 0 }
   40% { opacity: 1 }
 }
-@keyframes bounce-less {
-  25% { transform: translateY(-7%) }
-  40% { transform: translateY(-2%) }
-  0%, 60%, 100% { transform: translateY(0) }
-}
+
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }
@@ -408,9 +327,6 @@
   80% { opacity: 0; transform: scale(1,1) }
   90% { opacity: 1 }
 }
-@keyframes pulse-less {
-  50% { transform: scale(.95,.95) }
-}
 
 @media (--OSdark) {
   @keyframes fade-in-bloom {

From 0bde169b6726d34b74820b7986dcdd5879429e7c Mon Sep 17 00:00:00 2001
From: sai 
Date: Mon, 24 Apr 2023 14:38:25 +0200
Subject: [PATCH 06/29] rename animations to ANIMATION_NAME-reduced

---
 docsite/index.css        | 92 ++++++++++++++++++++--------------------
 docsite/index.html       | 90 +++++++++++++++++++--------------------
 src/props.animations.css | 89 +++++++++++++++++++-------------------
 3 files changed, 136 insertions(+), 135 deletions(-)

diff --git a/docsite/index.css b/docsite/index.css
index 15cbd0d0..5cfe1ee7 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -27,9 +27,9 @@ body {
   display: grid;
   justify-items: flex-start;
   grid-template-columns:
-    var(--size-8) 
-    calc(100% - 2 * var(--size-8)) 
-    var(--size-8) 
+    var(--size-8)
+    calc(100% - 2 * var(--size-8))
+    var(--size-8)
   ;
 
   & > * {
@@ -43,9 +43,9 @@ body {
 
   @media (--md-n-below) {
     grid-template-columns:
-      var(--size-3) 
-      calc(100% - 2 * var(--size-3))  
-      var(--size-3) 
+      var(--size-3)
+      calc(100% - 2 * var(--size-3))
+      var(--size-3)
     ;
   }
 }
@@ -59,7 +59,7 @@ section {
   gap: var(--size-fluid-4);
   justify-items: flex-start;
   padding-block: var(--size-fluid-6);
-  
+
   &:not(:last-of-type) { border-block-end-width: var(--border-size-1) }
   &:nth-of-type(1n) { border-color: var(--orange-5) }
   &:nth-of-type(2n) { border-color: var(--red-5) }
@@ -182,7 +182,7 @@ section.hero {
   }
 
   @media (--lg-n-above) {
-    column-gap: var(--size-12);    
+    column-gap: var(--size-12);
   }
 }
 
@@ -235,7 +235,7 @@ section.hero {
   @media (--motionOK) {
     & > * {
       opacity: 0;
-      animation: 
+      animation:
         var(--animation-fade-in) forwards,
         var(--animation-slide-in-up) forwards;
       animation-timing-function: var(--ease-out-5);
@@ -288,7 +288,7 @@ blockquote {
     &.indigo {
       --_accent-1: var(--indigo-5);
       --_accent-2: var(--indigo-4);
-      
+
       @nest [data-theme="light"] & {
         --_bg: var(--indigo-0);
         --_ink: var(--indigo-9);
@@ -325,11 +325,11 @@ pre[class*="language-"] {
   --glass-lightness: 100%;
   background: hsl(0 0% var(--glass-lightness) / 50%);
   backdrop-filter: blur(40px);
-  
+
   @nest [data-theme="dark"] & {
     --glass-lightness: 0%;
   }
-  
+
   @supports not (backdrop-filter: blur(1px)) {
     background: hsl(0 0% var(--glass-lightness) / 90%);
   }
@@ -352,24 +352,24 @@ pre[class*="language-"] {
   position: relative;
   inline-size: 100%;
   max-inline-size: 100%;
-  
+
   & > * {
     grid-area: stack;
   }
-  
+
   & > img {
     position: absolute;
     inset: 0;
     transform: scaleY(-1);
   }
-  
+
   & > div {
     z-index: 1;
     padding-inline: var(--size-3);
     padding-block: var(--size-3) var(--size-4);
     display: grid;
     gap: var(--size-1);
-    
+
     @nest [data-theme="dark"] & {
       text-shadow: 0 1px 0 hsl(0 0% 0% / 20%);
     }
@@ -476,7 +476,7 @@ pre[class*="language-"] {
   @nest [data-theme="light"] & {
     color: var(--indigo-7);
   }
-  
+
   & > span {
     line-height: .9;
     text-transform: uppercase;
@@ -503,7 +503,7 @@ pre[class*="language-"] {
 .op-icon-o {
   stroke: var(--indigo-4);
   @nest a:hover & { stroke: var(--indigo-3); }
-  
+
   @nest [data-theme="light"] & {
     stroke: var(--indigo-5);
   }
@@ -580,7 +580,7 @@ pre[class*="language-"] {
     scroll-snap-align: start;
     display: grid;
     justify-content: flex-start;
-    
+
     &::before {
       font-size: var(--font-size-fluid-1);
       background: var(--surface-1);
@@ -778,7 +778,7 @@ pre[class*="language-"] {
   }
 
   @nest [data-theme="light"] & {
-    background-image: var(--gradient-18);    
+    background-image: var(--gradient-18);
   }
 
   @media (--md-n-above) {
@@ -889,7 +889,7 @@ pre[class*="language-"] {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--size-8);
-  
+
   @media (--md-n-below) {
     grid-template-columns: 1fr;
     justify-self: stretch;
@@ -904,19 +904,19 @@ pre[class*="language-"] {
     column-gap: var(--size-12);
   }
 
-  & > div:nth-of-type(1) svg { 
+  & > div:nth-of-type(1) svg {
     color: var(--purple-5);
     border-color: var(--purple-3);
   }
-  & > div:nth-of-type(2) svg { 
+  & > div:nth-of-type(2) svg {
     color: var(--orange-5);
     border-color: var(--orange-3);
   }
-  & > div:nth-of-type(3) svg { 
+  & > div:nth-of-type(3) svg {
     color: var(--indigo-5);
     border-color: var(--indigo-3);
   }
-  & > div:nth-of-type(4) svg { 
+  & > div:nth-of-type(4) svg {
     color: var(--red-5);
     border-color: var(--red-3);
   }
@@ -1005,7 +1005,7 @@ pre[class*="language-"] {
     background: var(--brand-bg-gradient) fixed;
     border-radius: var(--radius-round);
     position: relative;
-    
+
     @media (--motionOK) {
       animation: ping-pong 2s ease infinite;
     }
@@ -1053,7 +1053,7 @@ pre[class*="language-"] {
   display: flex;
   flex-flow: row wrap;
   gap: var(--size-5);
-  
+
   & > div {
     background: white;
     inline-size: var(--size-12);
@@ -1135,7 +1135,7 @@ pre[class*="language-"] {
     color: var(--green-3);
 
     @nest [data-theme="light"] & {
-      color: var(--green-6);        
+      color: var(--green-6);
     }
   }
 
@@ -1143,7 +1143,7 @@ pre[class*="language-"] {
     color: var(--green-4);
 
     @nest [data-theme="light"] & {
-      color: var(--green-7);        
+      color: var(--green-7);
     }
   }
 
@@ -1151,7 +1151,7 @@ pre[class*="language-"] {
     color: var(--green-5);
 
     @nest [data-theme="light"] & {
-      color: var(--green-8);        
+      color: var(--green-8);
     }
   }
 }
@@ -1277,10 +1277,10 @@ input[type="range"] {
     appearance: none;
     block-size: var(--track-height);
     border-radius: 5ex;
-    background: 
+    background:
       linear-gradient(
-        to right, 
-        transparent var(--track-fill), 
+        to right,
+        transparent var(--track-fill),
         var(--surface-3) 0%
       ),
       var(--brand-bg-gradient) fixed;
@@ -1290,10 +1290,10 @@ input[type="range"] {
     appearance: none;
     block-size: var(--track-height);
     border-radius: 5ex;
-    background: 
+    background:
       linear-gradient(
-        to right, 
-        transparent var(--track-fill), 
+        to right,
+        transparent var(--track-fill),
         var(--surface-3) 0%
       ),
       var(--brand-bg-gradient) fixed;
@@ -1310,7 +1310,7 @@ input[type="range"] {
     border-radius: 50%;
     background: var(--brand-bg-gradient) fixed;
     box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
-    
+
     @media (--motionOK) {
       & {
         transition: box-shadow .1s ease;
@@ -1345,7 +1345,7 @@ input[type="range"] {
   display: flex;
   gap: var(--size-2);
   flex-flow: row wrap;
-  
+
   & > div {
     place-items: center;
     display: inline-flex;
@@ -1366,7 +1366,7 @@ input[type="range"] {
 }
 
 .slide-fade-combo {
-  --animation-slide-down-fade-out: 
+  --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 */
@@ -1375,21 +1375,21 @@ input[type="range"] {
 }
 
 .shake-fade-combo {
-  --animation-slide-left-fade-in-shake-y: 
+  --animation-slide-left-fade-in-shake-y:
     var(--animation-shake-y),
     var(--animation-fade-in),
     var(--animation-slide-in-left);
 }
 
-.less-shake-fade-combo {
-  --animation-slide-left-fade-in-shake-y-less: 
-    var(--animation-shake-y-less),
+.shake-fade-reduced-combo {
+  --animation-slide-left-fade-in-shake-y-reduced:
+    var(--animation-shake-y-reduced),
     var(--animation-fade-in),
-    var(--animation-slide-in-left-less);
+    var(--animation-slide-in-left-reduced);
 }
 
 .push-out-combo {
-  --animation-push-out: 
+  --animation-push-out:
     var(--animation-scale-down),
     var(--animation-fade-out)
   ;
@@ -1431,7 +1431,7 @@ input[type="range"] {
   stroke: var(--nav-icon);
   stroke-width: 2px;
   transform-origin: center center;
-  transition: 
+  transition:
     transform .5s var(--ease-elastic-4),
     opacity var(--_opacity-dur) var(--ease-3);
 
diff --git a/docsite/index.html b/docsite/index.html
index 69d22162..a43002ac 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2537,8 +2537,8 @@ 
Scale Up

             
           

 
-          

-            
Scale Up Fade

+          

+            
Scale Up Reduced

             
           

 
-          

-            
Scale Down Fade

+          

+            
Scale Down Reduced

             
           

 
-          

-            
Slide Out Up Fade

+          

+            
Slide Out Up Reduced

             
           

 
-          

-            
Slide Out Down Fade

+          

+            
Slide Out Down Reduced

             
           

 
-          

-            
Slide Out Right Fade

+          

+            
Slide Out Right Reduced

             
           

 
-          

-            
Slide Out Left Fade

+          

+            
Slide Out Left Reduced

             
           

 
-          

-            
Slide In Up Fade

+          

+            
Slide In Up Reduced

             
           

 
-          

-            
Slide In Down Fade

+          

+            
Slide In Down Reduced

             
           

 
-          

-            
Slide In Right Fade

+          

+            
Slide In Right Reduced

             
           

 
-          

-            
Slide In Left Fade

+          

+            
Slide In Left Reduced

             
           

 
-          

-            
Spin Less Fade

+          

+            
Spin

             
           

 
-          

-            
Ping

+          

+            
Spin Reduced

             
           

 
-          

-            
Ping Less

+          

+            
Ping

             
           

 
-          

-            
Blink

+          

+            
Ping Reduced

             
           

 
-          

-            
Float Fade

+          

+            
Float Reduced

             
           

 
-          

-            
Bounce Fade

+          

+            
Bounce Reduced

             
           

 
-          

-            
Pulse Fade

+          

+            
Pulse Reduced

             
           

 
-          

-            
Shake X Fade

+          

+            
Shake X Reduced

             
           

 
-          

-            
Shake Y Fade

+          

+            
Shake Y Reduced

             

             

               

-                .shake-in-less {
+                .shake-in-reduced {
                   animation:
-                    var(--animation-shake-y-less),
+                    var(--animation-shake-y-reduced),
                     var(--animation-fade-in),
-                    var(--animation-slide-in-left-less);
+                    var(--animation-slide-in-left-reduced);
                 }
               

             

diff --git a/src/props.animations.css b/src/props.animations.css
index f720e3cd..a09e6b65 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -7,49 +7,49 @@
   --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
 
   --animation-scale-up: scale-up .5s var(--ease-3);
-  --animation-scale-up-fade: scale-up-fade .5s var(--ease-3);
+  --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-3);
   --animation-scale-down: scale-down .5s var(--ease-3);
-  --animation-scale-down-fade: scale-down-fade .5s var(--ease-3);
+  --animation-scale-down-reduced: scale-down-reduced .5s var(--ease-3);
 
   --animation-slide-out-up: slide-out-up .5s var(--ease-3);
-  --animation-slide-out-up-fade: slide-out-up-fade .5s var(--ease-3);
+  --animation-slide-out-up-reduced: slide-out-up-reduced .5s var(--ease-3);
   --animation-slide-out-down: slide-out-down .5s var(--ease-3);
-  --animation-slide-out-down-fade: slide-out-down-fade .5s var(--ease-3);
+  --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-3);
   --animation-slide-out-right: slide-out-right .5s var(--ease-3);
-  --animation-slide-out-right-fade: slide-out-right-fade .5s var(--ease-3);
+  --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-3);
   --animation-slide-out-left: slide-out-left .5s var(--ease-3);
-  --animation-slide-out-left-fade: slide-out-left-fade .5s var(--ease-3);
+  --animation-slide-out-left-reduced: slide-out-left-reduced .5s var(--ease-3);
 
   --animation-slide-in-up: slide-in-up .5s var(--ease-3);
-  --animation-slide-in-up-fade: slide-in-up-fade .5s var(--ease-3);
+  --animation-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-3);
   --animation-slide-in-down: slide-in-down .5s var(--ease-3);
-  --animation-slide-in-down-fade: slide-in-down-fade .5s var(--ease-3);
+  --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-3);
   --animation-slide-in-right: slide-in-right .5s var(--ease-3);
-  --animation-slide-in-right-fade: slide-in-right-fade .5s var(--ease-3);
+  --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-3);
   --animation-slide-in-left: slide-in-left .5s var(--ease-3);
-  --animation-slide-in-left-fade: slide-in-left-fade .5s var(--ease-3);
+  --animation-slide-in-left-reduced: slide-in-left-reduced .5s var(--ease-3);
 
   --animation-shake-x: shake-x .75s var(--ease-out-5);
-  --animation-shake-x-fade: shake-x-fade 1.5s;
+  --animation-shake-x-reduced: shake-x-reduced 1.5s;
   --animation-shake-y: shake-y .75s var(--ease-out-5);
-  --animation-shake-y-fade: shake-y-fade 1.5s;
+  --animation-shake-y-reduced: shake-y-reduced 1.5s;
+
+  --animation-blink: blink 1s var(--ease-out-3) infinite;
 
   --animation-spin: spin 2s linear infinite;
-  --animation-spin-less-fade: spin-less-fade 4s var(--ease-step-3) infinite;
+  --animation-spin-less-reduced: spin-less-reduced 4s var(--ease-step-3) infinite;
 
   --animation-ping: ping 5s var(--ease-out-3) infinite;
-  --animation-ping-less: ping-less 5s var(--ease-out-5) infinite;
-
-  --animation-blink: blink 1s var(--ease-out-3) infinite;
+  --animation-ping-reduced: ping-reduced 5s var(--ease-out-5) infinite;
 
   --animation-float: float 3s var(--ease-in-out-3) infinite;
-  --animation-float-fade: float-fade 3s var(--ease-in-out-3) infinite;
+  --animation-float-reduced: float-reduced 3s var(--ease-in-out-3) infinite;
 
   --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
-  --animation-bounce-fade: bounce-fade 2s var(--ease-squish-2) infinite;
+  --animation-bounce-reduced: bounce-reduced 2s var(--ease-squish-2) infinite;
 
   --animation-pulse: pulse 2s var(--ease-out-3) infinite;
-  --animation-pulse-fade: pulse-fade 2s var(--ease-out-3) infinite;
+  --animation-pulse-reduced: pulse-reduced 2s var(--ease-out-3) infinite;
 }
 
 @keyframes fade-in {
@@ -72,7 +72,7 @@
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }
-@keyframes scale-up-fade {
+@keyframes scale-up-reduced {
   0%   { opacity: 1 }
   45%  { opacity: 0; transform: scale(1) }
   55%  { opacity: 0; transform: scale(1.25) }
@@ -81,7 +81,7 @@
 @keyframes scale-down {
   to { transform: scale(.75) }
 }
-@keyframes scale-down-fade {
+@keyframes scale-down-reduced {
   0%   { opacity: 1 }
   45%  { opacity: 0; transform: scale(1) }
   55%  { opacity: 0; transform: scale(0.75) }
@@ -91,7 +91,7 @@
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }
-@keyframes slide-out-up-fade {
+@keyframes slide-out-up-reduced {
   to { transform: translateY(-100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -101,7 +101,7 @@
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }
-@keyframes slide-out-down-fade {
+@keyframes slide-out-down-reduced {
   to { transform: translateY(100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -111,7 +111,7 @@
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }
-@keyframes slide-out-right-fade {
+@keyframes slide-out-right-reduced {
   to { transform: translateX(100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -121,7 +121,7 @@
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }
-@keyframes slide-out-left-fade {
+@keyframes slide-out-left-reduced {
   to { transform: translateX(-100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -132,7 +132,7 @@
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }
-@keyframes slide-in-up-fade {
+@keyframes slide-in-up-reduced {
   from { transform: translateY(100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -142,7 +142,7 @@
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }
-@keyframes slide-in-down-fade {
+@keyframes slide-in-down-reduced {
   from { transform: translateY(-100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -152,7 +152,7 @@
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }
-@keyframes slide-in-right-fade {
+@keyframes slide-in-right-reduced {
   from { transform: translateX(-100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -162,7 +162,7 @@
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }
-@keyframes slide-in-left-fade {
+@keyframes slide-in-left-reduced {
   from { transform: translateX(100%) }
   0%   { opacity: 1 }
   20%  { opacity: 0 }
@@ -177,7 +177,7 @@
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
 }
-@keyframes shake-x-fade {
+@keyframes shake-x-reduced {
   0%, 100% { opacity: 1 }
   10%  { opacity: 0; transform: translateX(0%) }
 
@@ -206,7 +206,7 @@
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }
-@keyframes shake-y-fade {
+@keyframes shake-y-reduced {
   0%, 100% { opacity: 1 }
   10%  { opacity: 0; transform: translateY(0%) }
 
@@ -229,10 +229,19 @@
   91% { opacity: 0; transform: translateY(0%) }
 }
 
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
+
 @keyframes spin {
   to { transform: rotate(1turn) }
 }
-@keyframes spin-less-fade {
+@keyframes spin-reduced {
   to { transform: rotate(1turn) }
 
   0%, 100% { opacity: 0 }
@@ -259,25 +268,17 @@
     opacity: 0;
   }
 }
-@keyframes ping-less {
+@keyframes ping-reduced {
   90%, 100% {
     transform: scale(1.2);
     opacity: 0;
   }
 }
 
-@keyframes blink {
-  0%, 100% {
-    opacity: 1
-  }
-  50% {
-    opacity: .5
-  }
-}
 @keyframes float {
   50% { transform: translateY(-25%) }
 }
-@keyframes float-fade {
+@keyframes float-reduced {
   50% { transform: translateY(-25%) }
 
   10% { opacity: 1 }
@@ -296,7 +297,7 @@
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }
-@keyframes bounce-fade {
+@keyframes bounce-reduced {
   0% { transform: translateY(0) }
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
@@ -316,7 +317,7 @@
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }
-@keyframes pulse-fade {
+@keyframes pulse-reduced {
   10% { opacity: 1 }
   20% { opacity: 0; transform: scale(1,1) }
   30% { opacity: 0; transform: scale(.9,.9) }

From 6afb4ee35787f7864274542ca95381687cf9fdb3 Mon Sep 17 00:00:00 2001
From: sai 
Date: Mon, 24 Apr 2023 15:00:51 +0200
Subject: [PATCH 07/29] new iteration of reduced animations

---
 docsite/index.html       |   9 +
 src/props.animations.css | 633 ++++++++++++++++++++++++++++-----------
 2 files changed, 467 insertions(+), 175 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index a43002ac..7240fd80 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2742,6 +2742,15 @@ 
Blink

               
             
           

+          

+            
Blink Once

+            
+          

 
           

             
Spin

diff --git a/src/props.animations.css b/src/props.animations.css
index a09e6b65..441f3517 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -7,46 +7,49 @@
   --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
 
   --animation-scale-up: scale-up .5s var(--ease-3);
-  --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-3);
   --animation-scale-down: scale-down .5s var(--ease-3);
+  --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-3);
   --animation-scale-down-reduced: scale-down-reduced .5s var(--ease-3);
 
   --animation-slide-out-up: slide-out-up .5s var(--ease-3);
-  --animation-slide-out-up-reduced: slide-out-up-reduced .5s var(--ease-3);
   --animation-slide-out-down: slide-out-down .5s var(--ease-3);
-  --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-3);
   --animation-slide-out-right: slide-out-right .5s var(--ease-3);
-  --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-3);
   --animation-slide-out-left: slide-out-left .5s var(--ease-3);
+  --animation-slide-out-up-reduced: slide-out-up-reduced .5s var(--ease-3);
+  --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-3);
+  --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-3);
   --animation-slide-out-left-reduced: slide-out-left-reduced .5s var(--ease-3);
 
   --animation-slide-in-up: slide-in-up .5s var(--ease-3);
-  --animation-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-3);
   --animation-slide-in-down: slide-in-down .5s var(--ease-3);
-  --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-3);
   --animation-slide-in-right: slide-in-right .5s var(--ease-3);
-  --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-3);
   --animation-slide-in-left: slide-in-left .5s var(--ease-3);
+  --animation-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-3);
+  --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-3);
+  --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-3);
   --animation-slide-in-left-reduced: slide-in-left-reduced .5s var(--ease-3);
 
   --animation-shake-x: shake-x .75s var(--ease-out-5);
-  --animation-shake-x-reduced: shake-x-reduced 1.5s;
   --animation-shake-y: shake-y .75s var(--ease-out-5);
-  --animation-shake-y-reduced: shake-y-reduced 1.5s;
+  --animation-shake-x-reduced: shake-x-reduced .75s;
+  --animation-shake-y-reduced: shake-y-reduced .75s;
+  --animation-shake-reduced-blink: shake-reduced-blink .75s;
 
   --animation-blink: blink 1s var(--ease-out-3) infinite;
+  --animation-blink-once: blink 1s var(--ease-out-3) forwards;
 
   --animation-spin: spin 2s linear infinite;
-  --animation-spin-less-reduced: spin-less-reduced 4s var(--ease-step-3) infinite;
+  --animation-spin-less-reduced: spin-less-reduced 2s var(--ease-step-3) infinite;
 
   --animation-ping: ping 5s var(--ease-out-3) infinite;
-  --animation-ping-reduced: ping-reduced 5s var(--ease-out-5) infinite;
+  --animation-ping-reduced: ping-reduced 5s var(--ease-out-3) infinite;
 
   --animation-float: float 3s var(--ease-in-out-3) infinite;
   --animation-float-reduced: float-reduced 3s var(--ease-in-out-3) infinite;
 
   --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
   --animation-bounce-reduced: bounce-reduced 2s var(--ease-squish-2) infinite;
+  --animation-bounce-reduced-blink: bounce-reduced-blink 2s var(--ease-squish-2) infinite;
 
   --animation-pulse: pulse 2s var(--ease-out-3) infinite;
   --animation-pulse-reduced: pulse-reduced 2s var(--ease-out-3) infinite;
@@ -73,160 +76,227 @@
   to { transform: scale(1.25) }
 }
 @keyframes scale-up-reduced {
-  0%   { opacity: 1 }
-  45%  { opacity: 0; transform: scale(1) }
-  55%  { opacity: 0; transform: scale(1.25) }
-  100% { opacity: 1; transform: scale(1.25) }
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: scale(1);
+	}
+
+	50.01% {
+		transform: scale(1.25);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1.25);
+	}
 }
 @keyframes scale-down {
   to { transform: scale(.75) }
 }
 @keyframes scale-down-reduced {
-  0%   { opacity: 1 }
-  45%  { opacity: 0; transform: scale(1) }
-  55%  { opacity: 0; transform: scale(0.75) }
-  100% { opacity: 1; transform: scale(0.75) }
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: scale(1);
+	}
+
+	50.01% {
+		transform: scale(0.75);
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(0.75);
+	}
 }
 
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }
-@keyframes slide-out-up-reduced {
-  to { transform: translateY(-100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
 }
-@keyframes slide-out-down-reduced {
-  to { transform: translateY(100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
 }
-@keyframes slide-out-right-reduced {
-  to { transform: translateX(100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }
+@keyframes slide-out-up-reduced {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: translateY(0%);
+	}
+
+	50.01% {
+		transform: translateY(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(-100%);
+	}
+}
+@keyframes slide-out-down-reduced {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: translateY(0%);
+	}
+
+	50.01% {
+		transform: translateY(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateY(100%);
+	}
+}
+@keyframes slide-out-right-reduced {
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: translateX(0%);
+	}
+
+	50.01% {
+		transform: translateX(100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(100%);
+	}
+}
 @keyframes slide-out-left-reduced {
-  to { transform: translateX(-100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
+	0% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+		transform: translateX(0%);
+	}
+
+	50.01% {
+		transform: translateX(-100%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(-100%);
+	}
 }
 
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }
-@keyframes slide-in-up-reduced {
-  from { transform: translateY(100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
 }
-@keyframes slide-in-down-reduced {
-  from { transform: translateY(-100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
 }
-@keyframes slide-in-right-reduced {
-  from { transform: translateX(-100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }
-@keyframes slide-in-left-reduced {
-  from { transform: translateX(100%) }
-  0%   { opacity: 1 }
-  20%  { opacity: 0 }
-  60%  { opacity: 0 }
-  100% { opacity: 1 }
-}
+@keyframes slide-in-up-reduced {
+	0% {
+		opacity: 1;
+		transform: translateY(100%);
+	}
 
-@keyframes shake-x {
-  0%, 100% { transform: translateX(0%) }
-  20% { transform: translateX(-5%) }
-  40% { transform: translateX(5%) }
-  60% { transform: translateX(-5%) }
-  80% { transform: translateX(5%) }
-}
-@keyframes shake-x-reduced {
-  0%, 100% { opacity: 1 }
-  10%  { opacity: 0; transform: translateX(0%) }
+	50% {
+		opacity: 0;
+		transform: translateY(100%);
+	}
 
-  11% { opacity: 0; transform: translateX(-5%) }
-  20% { opacity: 1 }
-  30% { opacity: 0; transform: translateX(-5%) }
+	50.01% {
+		transform: translateY(0%);
+	}
 
-  31% { opacity: 0; transform: translateX(5%) }
-  40% { opacity: 1 }
-  50% { opacity: 0; transform: translateX(5%) }
+	100% {
+		opacity: 1;
+		transform: translateY(0%);
+	}
+}
+@keyframes slide-in-down-reduced {
+	0% {
+		opacity: 1;
+		transform: translateY(-100%);
+	}
 
-  51% { opacity: 0; transform: translateX(-5%) }
-  60% { opacity: 1 }
-  70% { opacity: 0; transform: translateX(-5%) }
+	50% {
+		opacity: 0;
+		transform: translateY(-100%);
+	}
 
-  71% { opacity: 0; transform: translateX(5%) }
-  80% { opacity: 1 }
-  90% { opacity: 0; transform: translateX(5%) }
+	50.01% {
+		transform: translateY(0%);
+	}
 
-  91% { opacity: 0; transform: translateX(0%) }
-}
-@keyframes shake-y {
-  0%, 100% { transform: translateY(0%) }
-  20% { transform: translateY(-5%) }
-  40% { transform: translateY(5%) }
-  60% { transform: translateY(-5%) }
-  80% { transform: translateY(5%) }
+	100% {
+		opacity: 1;
+		transform: translateY(0%);
+	}
 }
-@keyframes shake-y-reduced {
-  0%, 100% { opacity: 1 }
-  10%  { opacity: 0; transform: translateY(0%) }
+@keyframes slide-in-right-reduced {
+	0% {
+		opacity: 1;
+		transform: translateX(-100%);
+	}
 
-  11% { opacity: 0; transform: translateY(-5%) }
-  20% { opacity: 1 }
-  30% { opacity: 0; transform: translateY(-5%) }
+	50% {
+		opacity: 0;
+		transform: translateX(-100%);
+	}
 
-  31% { opacity: 0; transform: translateY(5%) }
-  40% { opacity: 1 }
-  50% { opacity: 0; transform: translateY(5%) }
+	50.01% {
+		transform: translateX(0%);
+	}
 
-  51% { opacity: 0; transform: translateY(-5%) }
-  60% { opacity: 1 }
-  70% { opacity: 0; transform: translateY(-5%) }
+	100% {
+		opacity: 1;
+		transform: translateX(0%);
+	}
+}
+@keyframes slide-in-left-reduced {
+	0% {
+		opacity: 1;
+		transform: translateX(100%);
+	}
 
-  71% { opacity: 0; transform: translateY(5%) }
-  80% { opacity: 1 }
-  90% { opacity: 0; transform: translateY(5%) }
+	50% {
+		opacity: 0;
+		transform: translateX(100%);
+	}
 
-  91% { opacity: 0; transform: translateY(0%) }
+	50.01% {
+		transform: translateX(0%);
+	}
+
+	100% {
+		opacity: 1;
+		transform: translateX(0%);
+	}
 }
 
 @keyframes blink {
@@ -238,28 +308,156 @@
   }
 }
 
+@keyframes shake-x {
+  0%, 100% { transform: translateX(0%) }
+  20% { transform: translateX(-5%) }
+  40% { transform: translateX(5%) }
+  60% { transform: translateX(-5%) }
+  80% { transform: translateX(5%) }
+}
+@keyframes shake-y {
+  0%, 100% { transform: translateY(0%) }
+  20% { transform: translateY(-5%) }
+  40% { transform: translateY(5%) }
+  60% { transform: translateY(-5%) }
+  80% { transform: translateY(5%) }
+}
+@keyframes shake-x-reduced {
+	0%,
+	5% {
+		transform: translateX(0%);
+	}
+	5.01%,
+	25% {
+		transform: translateX(-5%);
+	}
+	25.01%,
+	45% {
+		transform: translateX(5%);
+	}
+	45.01%,
+	65% {
+		transform: translateX(-5%);
+	}
+	65.01%,
+	85% {
+		transform: translateX(5%);
+	}
+	85.01% {
+		transform: translateX(0%);
+	}
+}
+@keyframes shake-y-reduced {
+	0%,
+	5% {
+		transform: translateY(0%);
+	}
+	5.01%,
+	25% {
+		transform: translateY(-5%);
+	}
+	25.01%,
+	45% {
+		transform: translateY(5%);
+	}
+	45.01%,
+	65% {
+		transform: translateY(-5%);
+	}
+	65.01%,
+	85% {
+		transform: translateY(5%);
+	}
+	85.01% {
+		transform: translateY(0%);
+	}
+}
+@keyframes shake-reduced-blink {
+	0%,
+	5% {
+		opacity: 1;
+	}
+	10% {
+		opacity: 0.5;
+	}
+	20% {
+		opacity: 1;
+	}
+	30% {
+		opacity: 0.5;
+	}
+	40% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	60% {
+		opacity: 1;
+	}
+	70% {
+		opacity: 0.5;
+	}
+	80% {
+		opacity: 1;
+	}
+	90% {
+		opacity: 0.5;
+	}
+	95% {
+		opacity: 1;
+	}
+}
+
 @keyframes spin {
   to { transform: rotate(1turn) }
 }
 @keyframes spin-reduced {
-  to { transform: rotate(1turn) }
-
-  0%, 100% { opacity: 0 }
-  5% { opacity: 1 }
-
-  20% { opacity: 1 }
-  25% { opacity: 0 }
-  30% { opacity: 1 }
-
-  45% { opacity: 1 }
-  50% { opacity: 0 }
-  55% { opacity: 1 }
-
-  70% { opacity: 1 }
-  75% { opacity: 0 }
-  80% { opacity: 1 }
-
-  95% { opacity: 1 }
+	to {
+		transform: rotate(1turn);
+	}
+
+	0%,
+	100% {
+		opacity: 0;
+	}
+	5% {
+		opacity: 1;
+	}
+
+	20% {
+		opacity: 1;
+	}
+	25% {
+		opacity: 0;
+	}
+	30% {
+		opacity: 1;
+	}
+
+	45% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	55% {
+		opacity: 1;
+	}
+
+	70% {
+		opacity: 1;
+	}
+	75% {
+		opacity: 0;
+	}
+	80% {
+		opacity: 1;
+	}
+
+	95% {
+		opacity: 1;
+	}
 }
 
 @keyframes ping {
@@ -269,27 +467,59 @@
   }
 }
 @keyframes ping-reduced {
-  90%, 100% {
-    transform: scale(1.2);
-    opacity: 0;
-  }
+	0% {
+		opacity: 1;
+	}
+	30% {
+		transform: scale(1);
+	}
+	30.01% {
+		transform: scale(2);
+		opacity: 0;
+	}
+	60% {
+		opacity: 0.5;
+	}
+	90%,
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
 }
 
 @keyframes float {
   50% { transform: translateY(-25%) }
 }
 @keyframes float-reduced {
-  50% { transform: translateY(-25%) }
-
-  10% { opacity: 1 }
-  20% { opacity: 0 }
-  30% { opacity: 0 }
-  40% { opacity: 1 }
-
-  60% { opacity: 1 }
-  70% { opacity: 0 }
-  80% { opacity: 0 }
-  90% { opacity: 1 }
+	5% {
+		opacity: 1;
+	}
+	25% {
+		opacity: 0;
+		transform: translateY(0%);
+	}
+	25.01% {
+		transform: translateY(-25%);
+	}
+
+	45% {
+		opacity: 1;
+	}
+	55% {
+		opacity: 1;
+	}
+
+	75% {
+		opacity: 0;
+		transform: translateY(-25%);
+	}
+	75.01% {
+		opacity: 0;
+		transform: translateY(0%);
+	}
+	95% {
+		opacity: 1;
+	}
 }
 
 @keyframes bounce {
@@ -298,35 +528,88 @@
   0%, 60%, 100% { transform: translateY(0) }
 }
 @keyframes bounce-reduced {
-  0% { transform: translateY(0) }
-  25% { transform: translateY(-20%) }
-  40% { transform: translateY(-3%) }
-  60%, 100% { transform: translateY(0) }
-
-  0%  { opacity: 1 }
-  5%  { opacity: 0 }
-  10% { opacity: 0 }
-  20% { opacity: 1 }
-
-  25% { opacity: 1 }
-  30% { opacity: 0 }
-  35% { opacity: 0 }
-  40% { opacity: 1 }
+	0%,
+	40%,
+	60%,
+	100% {
+		/* opacity: 1; */
+		transform: translateY(0%);
+	}
+
+	10% {
+		/* opacity: 0; */
+		transform: translateY(0%);
+	}
+	10.01% {
+		transform: translateY(-20%);
+	}
+	20%,
+	25% {
+		/* opacity: 1; */
+	}
+	30% {
+		/* opacity: 0; */
+		transform: translateY(-20%);
+	}
+	30.01% {
+		transform: translateY(0%);
+	}
+
+	/* 45% {
+		opacity: 0.5;
+	} */
+}
+@keyframes bounce-reduced-blink {
+	0%,
+	20%,
+	25%,
+	40%,
+	60%,
+	100% {
+		opacity: 1;
+	}
+
+	10%,
+	30% {
+		opacity: 0;
+	}
+
+	/* 45% {
+		opacity: 0.5;
+	} */
 }
 
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }
 @keyframes pulse-reduced {
-  10% { opacity: 1 }
-  20% { opacity: 0; transform: scale(1,1) }
-  30% { opacity: 0; transform: scale(.9,.9) }
-  40% { opacity: 1 }
-
-  60% { opacity: 1 }
-  70% { opacity: 0; transform: scale(.9,.9) }
-  80% { opacity: 0; transform: scale(1,1) }
-  90% { opacity: 1 }
+	5% {
+		opacity: 1;
+	}
+	15% {
+		opacity: 0;
+		transform: scale(1, 1);
+	}
+	15.01% {
+		transform: scale(0.9, 0.9);
+	}
+	45% {
+		opacity: 1;
+	}
+
+	55% {
+		opacity: 1;
+	}
+	60% {
+		opacity: 0;
+		transform: scale(0.9, 0.9);
+	}
+	60.01% {
+		transform: scale(1, 1);
+	}
+	95% {
+		opacity: 1;
+	}
 }
 
 @media (--OSdark) {

From 20a48b6f0ff286462c935d6247e2115fbdaa6865 Mon Sep 17 00:00:00 2001
From: sai 
Date: Tue, 25 Apr 2023 16:34:25 +0200
Subject: [PATCH 08/29] implement reduced motion animations

---
 docsite/index.html       | 189 ----------
 src/props.animations.css | 793 +++++++++++++++------------------------
 2 files changed, 297 insertions(+), 685 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index 7240fd80..99b1b0f0 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2525,8 +2525,6 @@ 
Bloom Fade Out

             
           

 
-          

-
           

             
Scale Up

             
           

 
-          

-            
Scale Up Reduced

-            
-          

-
           

             
Scale Down

             
           

 
-          

-            
Scale Down Reduced

-            
-          

-
-          

-
           

             
Slide Out Up

             
           

 
-          

-            
Slide Out Up Reduced

-            
-          

-
           

             
Slide Out Down

             
           

 
-          

-            
Slide Out Down Reduced

-            
-          

-
           

             
Slide Out Right

             
           

 
-          

-            
Slide Out Right Reduced

-            
-          

-
           

             
Slide Out Left

             
           

 
-          

-            
Slide Out Left Reduced

-            
-          

-
-          

-
           

             
Slide In Up

             
           

 
-          

-            
Slide In Up Reduced

-            
-          

-
           

             
Slide In Down

             
           

 
-          

-            
Slide In Down Reduced

-            
-          

-
           

             
Slide In Right

             
           

 
-          

-            
Slide In Right Reduced

-            
-          

-
           

             
Slide In Left

             
           

 
-          

-            
Slide In Left Reduced

-            
-          

-
-          

-
           

             
Blink

             
           

-          

-            
Blink Once

-            
-          

 
           

             
Spin

@@ -2762,16 +2645,6 @@ 
Spin

             
           

 
-          

-            
Spin Reduced

-            
-          

-
           

             
Ping

             
           

 
-          

-            
Ping Reduced

-            
-          

-
           

             
Float

             
           

 
-          

-            
Float Reduced

-            
-          

-
           

             
Bounce

             
           

 
-          

-            
Bounce Reduced

-            
-          

-
           

             
Pulse

             
           

 
-          

-            
Pulse Reduced

-            
-          

-
-          

-
           

             
Shake X

             
           

 
-          

-            
Shake X Reduced

-            
-          

-
           

             
Shake Y

             
           

-
-          

-            
Shake Y Reduced

-            
-          

         

       

 
diff --git a/src/props.animations.css b/src/props.animations.css
index 441f3517..d6672134 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -8,51 +8,26 @@
 
   --animation-scale-up: scale-up .5s var(--ease-3);
   --animation-scale-down: scale-down .5s var(--ease-3);
-  --animation-scale-up-reduced: scale-up-reduced .5s var(--ease-3);
-  --animation-scale-down-reduced: scale-down-reduced .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-out-up-reduced: slide-out-up-reduced .5s var(--ease-3);
-  --animation-slide-out-down-reduced: slide-out-down-reduced .5s var(--ease-3);
-  --animation-slide-out-right-reduced: slide-out-right-reduced .5s var(--ease-3);
-  --animation-slide-out-left-reduced: slide-out-left-reduced .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-slide-in-up-reduced: slide-in-up-reduced .5s var(--ease-3);
-  --animation-slide-in-down-reduced: slide-in-down-reduced .5s var(--ease-3);
-  --animation-slide-in-right-reduced: slide-in-right-reduced .5s var(--ease-3);
-  --animation-slide-in-left-reduced: slide-in-left-reduced .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-shake-x-reduced: shake-x-reduced .75s;
-  --animation-shake-y-reduced: shake-y-reduced .75s;
-  --animation-shake-reduced-blink: shake-reduced-blink .75s;
 
   --animation-blink: blink 1s var(--ease-out-3) infinite;
-  --animation-blink-once: blink 1s var(--ease-out-3) forwards;
-
   --animation-spin: spin 2s linear infinite;
-  --animation-spin-less-reduced: spin-less-reduced 2s var(--ease-step-3) infinite;
-
   --animation-ping: ping 5s var(--ease-out-3) infinite;
-  --animation-ping-reduced: ping-reduced 5s var(--ease-out-3) infinite;
-
   --animation-float: float 3s var(--ease-in-out-3) infinite;
-  --animation-float-reduced: float-reduced 3s var(--ease-in-out-3) infinite;
-
   --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
-  --animation-bounce-reduced: bounce-reduced 2s var(--ease-squish-2) infinite;
-  --animation-bounce-reduced-blink: bounce-reduced-blink 2s var(--ease-squish-2) infinite;
-
   --animation-pulse: pulse 2s var(--ease-out-3) infinite;
-  --animation-pulse-reduced: pulse-reduced 2s var(--ease-out-3) infinite;
 }
 
 @keyframes fade-in {
@@ -75,47 +50,9 @@
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }
-@keyframes scale-up-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: scale(1);
-	}
-
-	50.01% {
-		transform: scale(1.25);
-	}
-
-	100% {
-		opacity: 1;
-		transform: scale(1.25);
-	}
-}
 @keyframes scale-down {
   to { transform: scale(.75) }
 }
-@keyframes scale-down-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: scale(1);
-	}
-
-	50.01% {
-		transform: scale(0.75);
-	}
-
-	100% {
-		opacity: 1;
-		transform: scale(0.75);
-	}
-}
 
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
@@ -129,82 +66,6 @@
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }
-@keyframes slide-out-up-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateY(0%);
-	}
-
-	50.01% {
-		transform: translateY(-100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(-100%);
-	}
-}
-@keyframes slide-out-down-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateY(0%);
-	}
-
-	50.01% {
-		transform: translateY(100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(100%);
-	}
-}
-@keyframes slide-out-right-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateX(0%);
-	}
-
-	50.01% {
-		transform: translateX(100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(100%);
-	}
-}
-@keyframes slide-out-left-reduced {
-	0% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateX(0%);
-	}
-
-	50.01% {
-		transform: translateX(-100%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(-100%);
-	}
-}
 
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
@@ -218,95 +79,6 @@
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }
-@keyframes slide-in-up-reduced {
-	0% {
-		opacity: 1;
-		transform: translateY(100%);
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateY(100%);
-	}
-
-	50.01% {
-		transform: translateY(0%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0%);
-	}
-}
-@keyframes slide-in-down-reduced {
-	0% {
-		opacity: 1;
-		transform: translateY(-100%);
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateY(-100%);
-	}
-
-	50.01% {
-		transform: translateY(0%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateY(0%);
-	}
-}
-@keyframes slide-in-right-reduced {
-	0% {
-		opacity: 1;
-		transform: translateX(-100%);
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateX(-100%);
-	}
-
-	50.01% {
-		transform: translateX(0%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0%);
-	}
-}
-@keyframes slide-in-left-reduced {
-	0% {
-		opacity: 1;
-		transform: translateX(100%);
-	}
-
-	50% {
-		opacity: 0;
-		transform: translateX(100%);
-	}
-
-	50.01% {
-		transform: translateX(0%);
-	}
-
-	100% {
-		opacity: 1;
-		transform: translateX(0%);
-	}
-}
-
-@keyframes blink {
-  0%, 100% {
-    opacity: 1
-  }
-  50% {
-    opacity: .5
-  }
-}
 
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
@@ -322,295 +94,35 @@
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }
-@keyframes shake-x-reduced {
-	0%,
-	5% {
-		transform: translateX(0%);
-	}
-	5.01%,
-	25% {
-		transform: translateX(-5%);
-	}
-	25.01%,
-	45% {
-		transform: translateX(5%);
-	}
-	45.01%,
-	65% {
-		transform: translateX(-5%);
-	}
-	65.01%,
-	85% {
-		transform: translateX(5%);
-	}
-	85.01% {
-		transform: translateX(0%);
-	}
-}
-@keyframes shake-y-reduced {
-	0%,
-	5% {
-		transform: translateY(0%);
-	}
-	5.01%,
-	25% {
-		transform: translateY(-5%);
-	}
-	25.01%,
-	45% {
-		transform: translateY(5%);
-	}
-	45.01%,
-	65% {
-		transform: translateY(-5%);
-	}
-	65.01%,
-	85% {
-		transform: translateY(5%);
-	}
-	85.01% {
-		transform: translateY(0%);
-	}
-}
-@keyframes shake-reduced-blink {
-	0%,
-	5% {
-		opacity: 1;
-	}
-	10% {
-		opacity: 0.5;
-	}
-	20% {
-		opacity: 1;
-	}
-	30% {
-		opacity: 0.5;
-	}
-	40% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	60% {
-		opacity: 1;
-	}
-	70% {
-		opacity: 0.5;
-	}
-	80% {
-		opacity: 1;
-	}
-	90% {
-		opacity: 0.5;
-	}
-	95% {
-		opacity: 1;
-	}
-}
 
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
 @keyframes spin {
   to { transform: rotate(1turn) }
 }
-@keyframes spin-reduced {
-	to {
-		transform: rotate(1turn);
-	}
-
-	0%,
-	100% {
-		opacity: 0;
-	}
-	5% {
-		opacity: 1;
-	}
-
-	20% {
-		opacity: 1;
-	}
-	25% {
-		opacity: 0;
-	}
-	30% {
-		opacity: 1;
-	}
-
-	45% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0;
-	}
-	55% {
-		opacity: 1;
-	}
-
-	70% {
-		opacity: 1;
-	}
-	75% {
-		opacity: 0;
-	}
-	80% {
-		opacity: 1;
-	}
-
-	95% {
-		opacity: 1;
-	}
-}
-
 @keyframes ping {
   90%, 100% {
     transform: scale(2);
     opacity: 0;
   }
 }
-@keyframes ping-reduced {
-	0% {
-		opacity: 1;
-	}
-	30% {
-		transform: scale(1);
-	}
-	30.01% {
-		transform: scale(2);
-		opacity: 0;
-	}
-	60% {
-		opacity: 0.5;
-	}
-	90%,
-	100% {
-		transform: scale(2);
-		opacity: 0;
-	}
-}
-
 @keyframes float {
   50% { transform: translateY(-25%) }
 }
-@keyframes float-reduced {
-	5% {
-		opacity: 1;
-	}
-	25% {
-		opacity: 0;
-		transform: translateY(0%);
-	}
-	25.01% {
-		transform: translateY(-25%);
-	}
-
-	45% {
-		opacity: 1;
-	}
-	55% {
-		opacity: 1;
-	}
-
-	75% {
-		opacity: 0;
-		transform: translateY(-25%);
-	}
-	75.01% {
-		opacity: 0;
-		transform: translateY(0%);
-	}
-	95% {
-		opacity: 1;
-	}
-}
-
 @keyframes bounce {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
 }
-@keyframes bounce-reduced {
-	0%,
-	40%,
-	60%,
-	100% {
-		/* opacity: 1; */
-		transform: translateY(0%);
-	}
-
-	10% {
-		/* opacity: 0; */
-		transform: translateY(0%);
-	}
-	10.01% {
-		transform: translateY(-20%);
-	}
-	20%,
-	25% {
-		/* opacity: 1; */
-	}
-	30% {
-		/* opacity: 0; */
-		transform: translateY(-20%);
-	}
-	30.01% {
-		transform: translateY(0%);
-	}
-
-	/* 45% {
-		opacity: 0.5;
-	} */
-}
-@keyframes bounce-reduced-blink {
-	0%,
-	20%,
-	25%,
-	40%,
-	60%,
-	100% {
-		opacity: 1;
-	}
-
-	10%,
-	30% {
-		opacity: 0;
-	}
-
-	/* 45% {
-		opacity: 0.5;
-	} */
-}
-
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }
-@keyframes pulse-reduced {
-	5% {
-		opacity: 1;
-	}
-	15% {
-		opacity: 0;
-		transform: scale(1, 1);
-	}
-	15.01% {
-		transform: scale(0.9, 0.9);
-	}
-	45% {
-		opacity: 1;
-	}
-
-	55% {
-		opacity: 1;
-	}
-	60% {
-		opacity: 0;
-		transform: scale(0.9, 0.9);
-	}
-	60.01% {
-		transform: scale(1, 1);
-	}
-	95% {
-		opacity: 1;
-	}
-}
 
 @media (--OSdark) {
   @keyframes fade-in-bloom {
@@ -625,4 +137,293 @@
    10% { opacity: 1; filter: brightness(0.5) blur(10px) }
     0% { opacity: 1; filter: brightness(1) blur(0) }
   };
+}
+
+@media (--motionNotOK) {
+	@keyframes scale-up {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: scale(1);
+		}
+
+		50.01% {
+			transform: scale(1.25);
+		}
+
+		100% {
+			opacity: 1;
+			transform: scale(1.25);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes scale-down {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: scale(1);
+		}
+
+		50.01% {
+			transform: scale(0.75);
+		}
+
+		100% {
+			opacity: 1;
+			transform: scale(0.75);
+		}
+	};
+}
+
+@media (--motionNotOK) {
+	@keyframes slide-out-up {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateY(0%);
+		}
+
+		50.01% {
+			transform: translateY(-100%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(-100%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-out-down {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateY(0%);
+		}
+
+		50.01% {
+			transform: translateY(100%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(100%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-out-right {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateX(0%);
+		}
+
+		50.01% {
+			transform: translateX(100%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(100%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-out-left {
+		0% {
+			opacity: 1;
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateX(0%);
+		}
+
+		50.01% {
+			transform: translateX(-100%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(-100%);
+		}
+	};
+}
+
+@media (--motionNotOK) {
+	@keyframes slide-in-up {
+		0% {
+			opacity: 1;
+			transform: translateY(100%);
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateY(100%);
+		}
+
+		50.01% {
+			transform: translateY(0%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-in-down {
+		0% {
+			opacity: 1;
+			transform: translateY(-100%);
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateY(-100%);
+		}
+
+		50.01% {
+			transform: translateY(0%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateY(0%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-in-right {
+		0% {
+			opacity: 1;
+			transform: translateX(-100%);
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateX(-100%);
+		}
+
+		50.01% {
+			transform: translateX(0%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(0%);
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes slide-in-left {
+		0% {
+			opacity: 1;
+			transform: translateX(100%);
+		}
+
+		50% {
+			opacity: 0;
+			transform: translateX(100%);
+		}
+
+		50.01% {
+			transform: translateX(0%);
+		}
+
+		100% {
+			opacity: 1;
+			transform: translateX(0%);
+		}
+	};
+}
+
+@media (--motionNotOK) {
+	@keyframes shake-x {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes shake-y {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+
+@media (--motionNotOK) {
+	@keyframes spin {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes ping {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes float {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes bounce {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
+}
+@media (--motionNotOK) {
+	@keyframes pulse {
+		0%, 100% {
+			opacity: 1
+		}
+		50% {
+			opacity: .5
+		}
+	};
 }
\ No newline at end of file

From a232412d1436949036e823fabdec560243d17063 Mon Sep 17 00:00:00 2001
From: sai 
Date: Fri, 28 Apr 2023 15:32:21 +0200
Subject: [PATCH 09/29] clean up diffs

---
 docsite/index.css        |  91 ++++++++++------------
 docsite/index.html       | 163 +++++++++++++++++----------------------
 src/props.animations.css |  64 +++------------
 3 files changed, 121 insertions(+), 197 deletions(-)

diff --git a/docsite/index.css b/docsite/index.css
index 5cfe1ee7..852b36f2 100644
--- a/docsite/index.css
+++ b/docsite/index.css
@@ -27,9 +27,9 @@ body {
   display: grid;
   justify-items: flex-start;
   grid-template-columns:
-    var(--size-8)
-    calc(100% - 2 * var(--size-8))
-    var(--size-8)
+    var(--size-8) 
+    calc(100% - 2 * var(--size-8)) 
+    var(--size-8) 
   ;
 
   & > * {
@@ -43,9 +43,9 @@ body {
 
   @media (--md-n-below) {
     grid-template-columns:
-      var(--size-3)
-      calc(100% - 2 * var(--size-3))
-      var(--size-3)
+      var(--size-3) 
+      calc(100% - 2 * var(--size-3))  
+      var(--size-3) 
     ;
   }
 }
@@ -59,7 +59,7 @@ section {
   gap: var(--size-fluid-4);
   justify-items: flex-start;
   padding-block: var(--size-fluid-6);
-
+  
   &:not(:last-of-type) { border-block-end-width: var(--border-size-1) }
   &:nth-of-type(1n) { border-color: var(--orange-5) }
   &:nth-of-type(2n) { border-color: var(--red-5) }
@@ -182,7 +182,7 @@ section.hero {
   }
 
   @media (--lg-n-above) {
-    column-gap: var(--size-12);
+    column-gap: var(--size-12);    
   }
 }
 
@@ -235,7 +235,7 @@ section.hero {
   @media (--motionOK) {
     & > * {
       opacity: 0;
-      animation:
+      animation: 
         var(--animation-fade-in) forwards,
         var(--animation-slide-in-up) forwards;
       animation-timing-function: var(--ease-out-5);
@@ -288,7 +288,7 @@ blockquote {
     &.indigo {
       --_accent-1: var(--indigo-5);
       --_accent-2: var(--indigo-4);
-
+      
       @nest [data-theme="light"] & {
         --_bg: var(--indigo-0);
         --_ink: var(--indigo-9);
@@ -325,11 +325,11 @@ pre[class*="language-"] {
   --glass-lightness: 100%;
   background: hsl(0 0% var(--glass-lightness) / 50%);
   backdrop-filter: blur(40px);
-
+  
   @nest [data-theme="dark"] & {
     --glass-lightness: 0%;
   }
-
+  
   @supports not (backdrop-filter: blur(1px)) {
     background: hsl(0 0% var(--glass-lightness) / 90%);
   }
@@ -352,24 +352,24 @@ pre[class*="language-"] {
   position: relative;
   inline-size: 100%;
   max-inline-size: 100%;
-
+  
   & > * {
     grid-area: stack;
   }
-
+  
   & > img {
     position: absolute;
     inset: 0;
     transform: scaleY(-1);
   }
-
+  
   & > div {
     z-index: 1;
     padding-inline: var(--size-3);
     padding-block: var(--size-3) var(--size-4);
     display: grid;
     gap: var(--size-1);
-
+    
     @nest [data-theme="dark"] & {
       text-shadow: 0 1px 0 hsl(0 0% 0% / 20%);
     }
@@ -476,7 +476,7 @@ pre[class*="language-"] {
   @nest [data-theme="light"] & {
     color: var(--indigo-7);
   }
-
+  
   & > span {
     line-height: .9;
     text-transform: uppercase;
@@ -503,7 +503,7 @@ pre[class*="language-"] {
 .op-icon-o {
   stroke: var(--indigo-4);
   @nest a:hover & { stroke: var(--indigo-3); }
-
+  
   @nest [data-theme="light"] & {
     stroke: var(--indigo-5);
   }
@@ -580,7 +580,7 @@ pre[class*="language-"] {
     scroll-snap-align: start;
     display: grid;
     justify-content: flex-start;
-
+    
     &::before {
       font-size: var(--font-size-fluid-1);
       background: var(--surface-1);
@@ -778,7 +778,7 @@ pre[class*="language-"] {
   }
 
   @nest [data-theme="light"] & {
-    background-image: var(--gradient-18);
+    background-image: var(--gradient-18);    
   }
 
   @media (--md-n-above) {
@@ -889,7 +889,7 @@ pre[class*="language-"] {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--size-8);
-
+  
   @media (--md-n-below) {
     grid-template-columns: 1fr;
     justify-self: stretch;
@@ -904,19 +904,19 @@ pre[class*="language-"] {
     column-gap: var(--size-12);
   }
 
-  & > div:nth-of-type(1) svg {
+  & > div:nth-of-type(1) svg { 
     color: var(--purple-5);
     border-color: var(--purple-3);
   }
-  & > div:nth-of-type(2) svg {
+  & > div:nth-of-type(2) svg { 
     color: var(--orange-5);
     border-color: var(--orange-3);
   }
-  & > div:nth-of-type(3) svg {
+  & > div:nth-of-type(3) svg { 
     color: var(--indigo-5);
     border-color: var(--indigo-3);
   }
-  & > div:nth-of-type(4) svg {
+  & > div:nth-of-type(4) svg { 
     color: var(--red-5);
     border-color: var(--red-3);
   }
@@ -1005,7 +1005,7 @@ pre[class*="language-"] {
     background: var(--brand-bg-gradient) fixed;
     border-radius: var(--radius-round);
     position: relative;
-
+    
     @media (--motionOK) {
       animation: ping-pong 2s ease infinite;
     }
@@ -1053,7 +1053,7 @@ pre[class*="language-"] {
   display: flex;
   flex-flow: row wrap;
   gap: var(--size-5);
-
+  
   & > div {
     background: white;
     inline-size: var(--size-12);
@@ -1135,7 +1135,7 @@ pre[class*="language-"] {
     color: var(--green-3);
 
     @nest [data-theme="light"] & {
-      color: var(--green-6);
+      color: var(--green-6);        
     }
   }
 
@@ -1143,7 +1143,7 @@ pre[class*="language-"] {
     color: var(--green-4);
 
     @nest [data-theme="light"] & {
-      color: var(--green-7);
+      color: var(--green-7);        
     }
   }
 
@@ -1151,7 +1151,7 @@ pre[class*="language-"] {
     color: var(--green-5);
 
     @nest [data-theme="light"] & {
-      color: var(--green-8);
+      color: var(--green-8);        
     }
   }
 }
@@ -1277,10 +1277,10 @@ input[type="range"] {
     appearance: none;
     block-size: var(--track-height);
     border-radius: 5ex;
-    background:
+    background: 
       linear-gradient(
-        to right,
-        transparent var(--track-fill),
+        to right, 
+        transparent var(--track-fill), 
         var(--surface-3) 0%
       ),
       var(--brand-bg-gradient) fixed;
@@ -1290,10 +1290,10 @@ input[type="range"] {
     appearance: none;
     block-size: var(--track-height);
     border-radius: 5ex;
-    background:
+    background: 
       linear-gradient(
-        to right,
-        transparent var(--track-fill),
+        to right, 
+        transparent var(--track-fill), 
         var(--surface-3) 0%
       ),
       var(--brand-bg-gradient) fixed;
@@ -1310,7 +1310,7 @@ input[type="range"] {
     border-radius: 50%;
     background: var(--brand-bg-gradient) fixed;
     box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
-
+    
     @media (--motionOK) {
       & {
         transition: box-shadow .1s ease;
@@ -1345,7 +1345,7 @@ input[type="range"] {
   display: flex;
   gap: var(--size-2);
   flex-flow: row wrap;
-
+  
   & > div {
     place-items: center;
     display: inline-flex;
@@ -1366,7 +1366,7 @@ input[type="range"] {
 }
 
 .slide-fade-combo {
-  --animation-slide-down-fade-out:
+  --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 */
@@ -1375,21 +1375,14 @@ input[type="range"] {
 }
 
 .shake-fade-combo {
-  --animation-slide-left-fade-in-shake-y:
+  --animation-slide-left-fade-in-shake-y: 
     var(--animation-shake-y),
     var(--animation-fade-in),
     var(--animation-slide-in-left);
 }
 
-.shake-fade-reduced-combo {
-  --animation-slide-left-fade-in-shake-y-reduced:
-    var(--animation-shake-y-reduced),
-    var(--animation-fade-in),
-    var(--animation-slide-in-left-reduced);
-}
-
 .push-out-combo {
-  --animation-push-out:
+  --animation-push-out: 
     var(--animation-scale-down),
     var(--animation-fade-out)
   ;
@@ -1431,7 +1424,7 @@ input[type="range"] {
   stroke: var(--nav-icon);
   stroke-width: 2px;
   transform-origin: center center;
-  transition:
+  transition: 
     transform .5s var(--ease-elastic-4),
     opacity var(--_opacity-dur) var(--ease-3);
 
diff --git a/docsite/index.html b/docsite/index.html
index 99b1b0f0..49c78560 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -56,13 +56,13 @@
           
         
         
       
       Get Started
       
-        Try in browser
+        Try in browser 
         RAD
       
       

               

             
-
+            
             

               PostCSS
-
+              
               

                 
CSS Imports

                 

@@ -973,7 +973,7 @@ 
Bundles

                     import OpenProps from 'open-props/src'; // unbundled ES module
                     import Colors from 'open-props/src/colors';
 
-                    // object notation access is special to OpenProps
+                    // object notation access is special to OpenProps 
                     console.info(OpenProps.size1);
                     console.info(OpenProps['--size-1']);
 
@@ -1031,7 +1031,7 @@ 
Props as Javascript

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-
+                    
                     module.exports = {
                       plugins: [
                         postcssJitProps(OpenProps),
@@ -1045,7 +1045,7 @@ 
Props from CSS

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-
+                    
                     module.exports = {
                       plugins: [
                         postcssJitProps({
@@ -1075,14 +1075,14 @@ 
Customize Bundles

                     npm run gen:shadowdom                   // src files with `:host` instead of `html`
                     npm run gen:nowhere                     // src files without `:where()`
                     npm run gen:prefixed                    // each prop prefixed with `op`, like `--op-font-size-1`
-
+                    
                     // full custom! pass args with node to the props.js script
                     node props.js 'ns' true ':root' 'my'
                     ⇣
                     // arg1: default '', is a custom namespace, props will be --ns-gray-1
                     // arg2: default false, indicates wrapping in :where() or not
                     // arg3: default '', set a custom selector like :scope, .my-class, etc
-                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
+                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc 
                   

                 

                 

@@ -1160,13 +1160,13 @@ 
Autocomplete

             Sublime Text
             
    
               
  1. 
-                There are number of ways with which the autocomplete engine of Sublime Text can be extended.
-                You can decide to use the completion files,
-                snippets or
-                plugins.
+                There are number of ways with which the autocomplete engine of Sublime Text can be extended. 
+                You can decide to use the completion files, 
+                snippets or 
+                plugins. 
               
    2. 
               
  2. 
-                An approach that is less strenous is the "completion file" approach.
+                An approach that is less strenous is the "completion file" approach. 
                 Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so:
               
    3. 
               
    
@@ -1185,7 +1185,7 @@ 
    Autocomplete
    
                   "scope": "path/to/your/variables",
               }
               
    
-              
  3. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via
+              
  4. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via 
                 Preferences > Settings, then you'll modify the file to include the snippet below — replacing "source" with the path to your variables.
               
    5. 
               
    
@@ -1320,7 +1320,7 @@ 
    Stone
    
         
         
         
-      

+      
 
       

           
Red

           
@@ -1592,7 +1592,7 @@ 
Jungle

           
           
           
-      

+      
      
       
 
       

@@ -1676,7 +1676,7 @@ 
Purple

             
2) Creating adaptive color schemes

             
It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.

           
-
+          
           

             

               
No Preference (Light)

@@ -1753,7 +1753,7 @@ 
Prefers Purple

             
3) Using the aliases

             
Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

           
-
+          
           

             

               
Page Styles Using Themes

@@ -1797,7 +1797,7 @@ 
Typography

                 }
 
                 h5,h6,small,dd {
-                  color: var(--text-2);
+                  color: var(--text-2); 
                 }
               

             

@@ -1979,9 +1979,9 @@ 
Vars Sample

               --ratio-square: 1;
               --ratio-landscape: 4/3;
               --ratio-portrait: 3/4;
-              --ratio-widescreen: 16/9;
+              --ratio-widescreen: 16/9; 
               --ratio-ultrawide: 18/5;
-              --ratio-golden: 1.6180/1;
+              --ratio-golden: 1.6180/1; 
             

           

         

@@ -2024,7 +2024,7 @@ 
The Props
- +
Usage Sample

@@ -2085,14 +2085,14 @@ 
Font Weights
Aa
-
@@ -2116,14 +2116,14 @@

Letter Spacing

Letter Spacing
-
@@ -2148,14 +2148,14 @@

Line Height

Sample paragraph content to provide a preview for OP's line heights
-
@@ -2178,7 +2178,7 @@

Relative Line Height

--font-relative-lineheight-6: calc(1rem + 3ch); --> - +

Font Sizes


@@ -2470,7 +2470,7 @@ 
Usage Sample

               animation: var(--animation-slide-out-down) forwards;
 
               &.open {
-                animation: var(--animation-slide-in-up) forwards;
+                animation: var(--animation-slide-in-up) forwards;  
               }
             }
 
@@ -2514,7 +2514,7 @@ 
Bloom Fade In
- +
Bloom Fade Out
-
-
Blink
+
+
Spin
-
-
Spin
+
+
Ping
-
-
Ping
+
+
Blink
-
-
- 

-                .shake-in-reduced {
-                  animation:
-                    var(--animation-shake-y-reduced),
-                    var(--animation-fade-in),
-                    var(--animation-slide-in-left-reduced);
-                }
-
-
-
@@ -2850,12 +2827,12 @@
Relative Sizes
Usage Sample

-            article {
+            article { 
               display: grid;
               gap: var(--size-3);
             }
 
-            li {
+            li { 
               padding-inline-start: var(--size-2);
             }
 
@@ -2905,11 +2882,11 @@ 
Fluid Sizes

         

           
Usage Sample

           

-            body {
+            body { 
               padding: var(--size-fluid-3);
             }
 
-            hr {
+            hr { 
               margin-block: var(--size-fluid-5);
             }
           

@@ -2942,11 +2919,11 @@ 
Reading Content Sizes

         

           
Usage Sample

           

-            p {
+            p { 
               max-inline-size: var(--size-content-3);
             }
 
-            aside {
+            aside { 
               max-inline-size: var(--size-content-2);
             }
           

@@ -2977,11 +2954,11 @@ 
Headline Content Sizes

         

           
Usage Sample

           

-            h1 {
+            h1 { 
               max-inline-size: var(--size-header-2);
             }
 
-            small {
+            small { 
               max-inline-size: var(--size-header-1);
             }
           

@@ -3007,7 +2984,7 @@ 
Borders

       
       

         

-
+          
           
Vars Sample

           

             

@@ -3330,7 +3307,7 @@ 
NPM Imported Usage Sample

           

         

       

-
+    
       

         

           
Mask Edges

@@ -3403,7 +3380,7 @@ 
Drips

 
         

 
-        
Zig-Zag

+        
Zig-Zag
          
         

           
Top

           
Right

@@ -3420,7 +3397,7 @@ 
Zig-Zag

           }
- +

Mask Corner Cuts

@@ -3444,7 +3421,7 @@
Circles

             --mask-corner-cut-circles-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-circles-2);
             }
@@ -3462,7 +3439,7 @@ 
Squares

           
           

             --mask-corner-cut-squares-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-squares-2);
             }
@@ -3478,7 +3455,7 @@ 
Angles

           
           

             --mask-corner-cut-angles-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-angles-2);
             }
diff --git a/src/props.animations.css b/src/props.animations.css
index d6672134..08ecdae3 100644
--- a/src/props.animations.css
+++ b/src/props.animations.css
@@ -5,26 +5,21 @@
   --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
   --animation-fade-out: fade-out .5s var(--ease-3);
   --animation-fade-out-bloom: fade-out-bloom 2s 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-blink: blink 1s var(--ease-out-3) infinite;
   --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;
@@ -46,14 +41,12 @@
  10% { opacity: 1; filter: brightness(2) blur(10px) }
   0% { opacity: 1; filter: brightness(1) blur(0) }
 }
-
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }
 @keyframes scale-down {
   to { transform: scale(.75) }
 }
-
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
 }
@@ -66,7 +59,6 @@
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
 }
-
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
 }
@@ -79,7 +71,6 @@
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
 }
-
 @keyframes shake-x {
   0%, 100% { transform: translateX(0%) }
   20% { transform: translateX(-5%) }
@@ -94,15 +85,6 @@
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }
-
-@keyframes blink {
-  0%, 100% {
-    opacity: 1
-  }
-  50% {
-    opacity: .5
-  }
-}
 @keyframes spin {
   to { transform: rotate(1turn) }
 }
@@ -112,6 +94,14 @@
     opacity: 0;
   }
 }
+@keyframes blink {
+  0%, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: .5
+  }
+}
 @keyframes float {
   50% { transform: translateY(-25%) }
 }
@@ -123,7 +113,6 @@
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }
-
 @media (--OSdark) {
   @keyframes fade-in-bloom {
     0% { opacity: 0; filter: brightness(1) blur(20px) }
@@ -138,22 +127,18 @@
     0% { opacity: 1; filter: brightness(1) blur(0) }
   };
 }
-
 @media (--motionNotOK) {
 	@keyframes scale-up {
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: scale(1);
 		}
-
 		50.01% {
 			transform: scale(1.25);
 		}
-
 		100% {
 			opacity: 1;
 			transform: scale(1.25);
@@ -165,38 +150,31 @@
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: scale(1);
 		}
-
 		50.01% {
 			transform: scale(0.75);
 		}
-
 		100% {
 			opacity: 1;
 			transform: scale(0.75);
 		}
 	};
 }
-
 @media (--motionNotOK) {
 	@keyframes slide-out-up {
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateY(0%);
 		}
-
 		50.01% {
 			transform: translateY(-100%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateY(-100%);
@@ -208,16 +186,13 @@
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateY(0%);
 		}
-
 		50.01% {
 			transform: translateY(100%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateY(100%);
@@ -229,16 +204,13 @@
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateX(0%);
 		}
-
 		50.01% {
 			transform: translateX(100%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateX(100%);
@@ -250,39 +222,32 @@
 		0% {
 			opacity: 1;
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateX(0%);
 		}
-
 		50.01% {
 			transform: translateX(-100%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateX(-100%);
 		}
 	};
 }
-
 @media (--motionNotOK) {
 	@keyframes slide-in-up {
 		0% {
 			opacity: 1;
 			transform: translateY(100%);
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateY(100%);
 		}
-
 		50.01% {
 			transform: translateY(0%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateY(0%);
@@ -295,16 +260,13 @@
 			opacity: 1;
 			transform: translateY(-100%);
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateY(-100%);
 		}
-
 		50.01% {
 			transform: translateY(0%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateY(0%);
@@ -317,16 +279,13 @@
 			opacity: 1;
 			transform: translateX(-100%);
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateX(-100%);
 		}
-
 		50.01% {
 			transform: translateX(0%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateX(0%);
@@ -339,23 +298,19 @@
 			opacity: 1;
 			transform: translateX(100%);
 		}
-
 		50% {
 			opacity: 0;
 			transform: translateX(100%);
 		}
-
 		50.01% {
 			transform: translateX(0%);
 		}
-
 		100% {
 			opacity: 1;
 			transform: translateX(0%);
 		}
 	};
 }
-
 @media (--motionNotOK) {
 	@keyframes shake-x {
 		0%, 100% {
@@ -376,7 +331,6 @@
 		}
 	};
 }
-
 @media (--motionNotOK) {
 	@keyframes spin {
 		0%, 100% {

From 87dd5c40d432e8f8b54e25957c147f5488f9f42a Mon Sep 17 00:00:00 2001
From: sai 
Date: Fri, 28 Apr 2023 16:47:14 +0200
Subject: [PATCH 10/29] add documentation

---
 docsite/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docsite/index.html b/docsite/index.html
index 49c78560..76e1bb5f 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2413,6 +2413,7 @@ 
Ease Steps

       

         
Animations

         
Premade keyframe effects allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.

+        
All animations automatically offer a reduced motion fallback. Slide and scale animations crossfade between their start and end states, while all the attention getting animations reduce to a simple attention getting blink.

       

       

         

@@ -2423,6 +2424,7 @@ 
The Props

               --animation-fade-{in,out}-bloom
               --animation-shake-{x,y}
 
+              --animation-scale-{up,down}
               --animation-slide-out-{up,down,left,right}
               --animation-slide-in-{up,down,left,right}
 

From a00460ab7d1aad6fe71094d67b73ffa7007c5288 Mon Sep 17 00:00:00 2001
From: sai 
Date: Fri, 28 Apr 2023 16:52:01 +0200
Subject: [PATCH 11/29] clean up diff

---
 docsite/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docsite/index.html b/docsite/index.html
index 76e1bb5f..82fee654 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2485,7 +2485,6 @@ 
Usage Sample

 
       

         
Samples

-
         

           

             
Fade In


From 6975f7fe37593ec29472cd211bb2e3f4ba2927e0 Mon Sep 17 00:00:00 2001
From: Quentin 
Date: Fri, 28 Apr 2023 21:06:39 +0200
Subject: [PATCH 12/29] [add] Reduced media handling for animations [add]
 Dynamic reduced animations [add] Local reference for the blink animation
 values

---
 build/to-stylesheet.js  |  39 ++++++++++----
 src/props.animations.js | 116 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 136 insertions(+), 19 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index 2d0afd51..b13ef084 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -53,18 +53,37 @@ ${dark_propsMeta}
   })
 
   if (filename.includes('animations')) {
-    let dark_props = Object.entries(props)
-      .filter(([prop, val]) =>
-        prop.includes('-@media:dark'))
 
-    dark_props.forEach(([prop, val], index) => {
-      let hasDarkKeyframe = prop.endsWith('-@media:dark') && val.trim().startsWith('@keyframe')
-      if (hasDarkKeyframe) {
-        appendedMeta += `
-@media (--OSdark) {
-  ${val.trim().replace(/\n/g, '\n  ')};
-}`
+    const [
+      dark_props,
+      reduced_props,
+    ] = Object.entries(props).reduce((acc, prop) => {
+      const [key, val] = prop;
+
+      if (val.trim().startsWith('@keyframe')) {
+        const _val = val.trim().replace(/\n/g, '\n  ');
+        key.endsWith('-@media:dark') && acc[0].push([key, _val]);
+        key.endsWith('-@media:reduced') && acc[1].push([key, _val]);
       }
+
+      return acc;
+    }, [[], []])
+
+
+    dark_props.forEach(([_, val]) => {
+      appendedMeta += `
+@media (--OSdark) {
+  ${val};
+}
+      `
+    })
+
+    reduced_props.forEach(([_, val]) => {
+      appendedMeta += `
+@media (--motionNotOK) {
+  ${val};
+}
+      `
     })
   }
 
diff --git a/src/props.animations.js b/src/props.animations.js
index 5ba7d050..a01721d8 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -1,3 +1,8 @@
+const LOCAL_REFERENCES = {
+  "--animation-blink-@": `0%, 100% { opacity: 1 }
+    50% { opacity: .5 }`
+};
+
 export default {
   "--animation-fade-in": "fade-in .5s var(--ease-3)",
   "--animation-fade-in-@": `
@@ -39,51 +44,121 @@ export default {
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
+}`,
+"--animation-scale-up-@media:reduced": `
+@keyframes scale-up {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: scale(1); }
+  50.01% { transform: scale(1.25); }
+  100% { opacity: 1; transform: scale(1.25); }
 }`,
   "--animation-scale-down": "scale-down .5s var(--ease-3)", 
   "--animation-scale-down-@": `
 @keyframes scale-down {
   to { transform: scale(.75) }
+}`,
+"--animation-scale-down-@media:reduced": `
+@keyframes scale-down {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: scale(1); }
+  50.01% { transform: scale(.75); }
+  100% { opacity: 1; transform: scale(.75); }
 }`,
   "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
+}`,
+"--animation-slide-out-up-@media:reduced": `
+@keyframes slide-out-up {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateY(0%); }
+  50.01% { transform: translateY(-100%); }
+  100% { opacity: 1; transform: translateY(-100%); }
 }`,
   "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
+}`,
+"--animation-slide-out-down-@media:reduced": `
+@keyframes slide-out-down {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateY(0%); }
+  50.01% { transform: translateY(100%); }
+  100% { opacity: 1; transform: translateY(100%); }
 }`,
   "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
+}`,
+"--animation-slide-out-right-@media:reduced": `
+@keyframes slide-out-right {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateX(0%); }
+  50.01% { transform: translateX(100%); }
+  100% { opacity: 1; transform: translateX(100%); }
 }`,
   "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
+}`,
+"--animation-slide-out-left-@media:reduced": `
+@keyframes slide-out-left {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateX(0%); }
+  50.01% { transform: translateX(-100%); }
+  100% { opacity: 1; transform: translateX(-100%); }
 }`,
   "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
+}`,
+"--animation-slide-in-up-@media:reduced": `
+@keyframes slide-in-up {
+  0% { opacity: 1; transform: translateY(100%); }
+  50% { opacity: 0; transform: translateY(100%); }
+  50.01% { transform: translateY(0%); }
+  100% { opacity: 1; transform: translateY(0%); }
 }`,
   "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
+}`,
+"--animation-slide-in-down-@media:reduced": `
+@keyframes slide-in-down {
+  0% { opacity: 1; transform: translateY(-100%); }
+  50% { opacity: 0; transform: translateY(-100%); }
+  50.01% { transform: translateY(0%); }
+  100% { opacity: 1; transform: translateY(0%); }
 }`,
   "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
+}`,
+"--animation-slide-in-right-@media:reduced": `
+@keyframes slide-in-right {
+  0% { opacity: 1; transform: translateX(-100%); }
+  50% { opacity: 0; transform: translateX(-100%); }
+  50.01% { transform: translateX(0%); }
+  100% { opacity: 1; transform: translateX(0%); }
 }`,
   "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
+}`,
+"--animation-slide-in-left-@media:reduced": `
+@keyframes slide-in-left {
+  0% { opacity: 1; transform: translateX(100%); }
+  50% { opacity: 0; transform: translateX(100%); }
+  50.01% { transform: translateX(0%); }
+  100% { opacity: 1; transform: translateX(0%); }
 }`,
   "--animation-shake-x": "shake-x .75s var(--ease-out-5)", 
   "--animation-shake-x-@": `
@@ -93,6 +168,10 @@ export default {
   40% { transform: translateX(5%) }
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
+}`,
+"--animation-shake-x-@media:reduced": `
+@keyframes shake-x {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-shake-y": "shake-y .75s var(--ease-out-5)", 
   "--animation-shake-y-@": `
@@ -102,11 +181,19 @@ export default {
   40% { transform: translateY(5%) }
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
+}`,
+"--animation-shake-y-@media:reduced": `
+@keyframes shake-y {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-spin": "spin 2s linear infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
+}`,
+"--animation-spin-@media:reduced": `
+@keyframes spin {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-ping": "ping 5s var(--ease-out-3) infinite", 
   "--animation-ping-@": `
@@ -116,20 +203,23 @@ export default {
     opacity: 0;
   }
 }`,
-  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
-  "--animation-blink-@": `
-@keyframes blink {
-  0%, 100% {
-    opacity: 1
-  }
-  50% {
-    opacity: .5
-  }
+"--animation-ping-@media:reduced": `
+@keyframes ping {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
+  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
+  "--animation-blink-@":  `
+  @keyframes blink {
+    ${LOCAL_REFERENCES['--animation-blink-@']}
+  }`,
   "--animation-float": "float 3s var(--ease-in-out-3) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
+}`,
+"--animation-float-@media:reduced": `
+@keyframes float {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite", 
   "--animation-bounce-@": `
@@ -137,10 +227,18 @@ export default {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
+}`,
+"--animation-bounce-@media:reduced": `
+@keyframes bounce {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-pulse": "pulse 2s var(--ease-out-3) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }`,
+"--animation-pulse-@media:reduced": `
+@keyframes pulse {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
+}`,
 }

From 31a04ba457bdb9cb0aaba7ea7b68120ae66ea6cb Mon Sep 17 00:00:00 2001
From: Adam Argyle 
Date: Fri, 10 Mar 2023 21:16:38 -0800
Subject: [PATCH 13/29] fixes #353

---
 src/extra/normalize.src.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
index d54eb40f..833ba5cd 100644
--- a/src/extra/normalize.src.css
+++ b/src/extra/normalize.src.css
@@ -156,12 +156,14 @@
   white-space: pre;
   min-inline-size: 0;
   max-inline-size: max-content; 
+  writing-mode: lr;
 }
 
 :where(:not(pre) > code) {
   padding: var(--size-1) var(--size-2);
   background: var(--surface-2);
   border-radius: var(--radius-2);
+  writing-mode: lr;
 }
 
 :where(kbd, var) {

From 3da47766c852a95e79f85030a18776d50310a2fc Mon Sep 17 00:00:00 2001
From: Adam Argyle 
Date: Fri, 10 Mar 2023 21:21:04 -0800
Subject: [PATCH 14/29] cut 1.5.6 with normalize update

---
 docsite/index.html | 2 +-
 package.json       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index 82fee654..5d3feb7b 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -119,7 +119,7 @@ 
CSS variables.

           
         
         
-          v1.5.5
+          v1.5.6
           
             
Angles

           
NPM

         

 
+        

+          
Showcase

+          
Color helper

+        

+        
         

           
Connect

           
GitHub


From 22b7878e72288d9d5997835f86f8a1f606cd381e Mon Sep 17 00:00:00 2001
From: Paulo Nunes 
Date: Thu, 30 Mar 2023 16:42:14 +0100
Subject: [PATCH 16/29] op-logo-svg-fix (#359)

align line-stem to inner circle
---
 docsite/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docsite/index.html b/docsite/index.html
index bc2ed24f..b0ac1bd5 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -51,7 +51,7 @@
     

@@ -1628,13 +1628,13 @@ 
Dark

                 html {
                   --brand-dark: var(--orange-3);
 
-                  --text-1-dark: var(--gray-1);
-                  --text-2-dark: var(--gray-3);
+                  --text-1-dark: var(--gray-3);
+                  --text-2-dark: var(--gray-5);
 
-                  --surface-1-dark: var(--gray-9);
-                  --surface-2-dark: var(--gray-8);
-                  --surface-3-dark: var(--gray-7);
-                  --surface-4-dark: var(--gray-6);
+                  --surface-1-dark: var(--gray-12);
+                  --surface-2-dark: var(--gray-11);
+                  --surface-3-dark: var(--gray-10);
+                  --surface-4-dark: var(--gray-9);
                 }
From 29e39d7a9365628b091525d5979718f02b6ad8ac Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Wed, 19 Apr 2023 09:52:12 -0700 Subject: [PATCH 20/29] bug fix for bright oklch color --- docsite/index.html | 2 +- package.json | 2 +- src/props.colors-oklch.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docsite/index.html b/docsite/index.html index 01defad2..f8a59b76 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.5.7 + v1.5.8 RAD -
- +
PostCSS - +
CSS Imports

@@ -973,7 +973,7 @@ 
Bundles

                     import OpenProps from 'open-props/src'; // unbundled ES module
                     import Colors from 'open-props/src/colors';
 
-                    // object notation access is special to OpenProps 
+                    // object notation access is special to OpenProps
                     console.info(OpenProps.size1);
                     console.info(OpenProps['--size-1']);
 
@@ -1031,7 +1031,7 @@ 
Props as Javascript

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-                    
+
                     module.exports = {
                       plugins: [
                         postcssJitProps(OpenProps),
@@ -1045,7 +1045,7 @@ 
Props from CSS

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-                    
+
                     module.exports = {
                       plugins: [
                         postcssJitProps({
@@ -1075,14 +1075,14 @@ 
Customize Bundles

                     npm run gen:shadowdom                   // src files with `:host` instead of `html`
                     npm run gen:nowhere                     // src files without `:where()`
                     npm run gen:prefixed                    // each prop prefixed with `op`, like `--op-font-size-1`
-                    
+
                     // full custom! pass args with node to the props.js script
                     node props.js 'ns' true ':root' 'my'
                     ⇣
                     // arg1: default '', is a custom namespace, props will be --ns-gray-1
                     // arg2: default false, indicates wrapping in :where() or not
                     // arg3: default '', set a custom selector like :scope, .my-class, etc
-                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc 
+                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
@@ -1160,13 +1160,13 @@

Autocomplete

Sublime Text
  1. - There are number of ways with which the autocomplete engine of Sublime Text can be extended. - You can decide to use the completion files, - snippets or - plugins. + There are number of ways with which the autocomplete engine of Sublime Text can be extended. + You can decide to use the completion files, + snippets or + plugins.
  2. - An approach that is less strenous is the "completion file" approach. + An approach that is less strenous is the "completion file" approach. Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so: 
    3. 
@@ -1185,7 +1185,7 @@ 
    Autocomplete
    
                   "scope": "path/to/your/variables",
               }
    -
  3. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via +
  4. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via Preferences > Settings, then you'll modify the file to include the snippet below — replacing "source" with the path to your variables. 
    5. 
@@ -1320,7 +1320,7 @@ 
    Stone
    
         
         
         
-
+

Red

@@ -1592,7 +1592,7 @@

Jungle

-
+
@@ -1676,7 +1676,7 @@
Purple

2) Creating adaptive color schemes

It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.

- +
No Preference (Light)
@@ -1753,7 +1753,7 @@
Prefers Purple

3) Using the aliases

Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

- +
Page Styles Using Themes
@@ -1797,7 +1797,7 @@
Typography
} h5,h6,small,dd { - color: var(--text-2); + color: var(--text-2); }
@@ -1979,9 +1979,9 @@
Vars Sample
--ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; - --ratio-widescreen: 16/9; + --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; - --ratio-golden: 1.6180/1; + --ratio-golden: 1.6180/1;
@@ -2024,7 +2024,7 @@
The Props
- +
Usage Sample

@@ -2085,14 +2085,14 @@ 
Font Weights
Aa
-
@@ -2116,14 +2116,14 @@

Letter Spacing

Letter Spacing
-
@@ -2148,14 +2148,14 @@

Line Height

Sample paragraph content to provide a preview for OP's line heights
-
@@ -2178,7 +2178,7 @@

Relative Line Height

--font-relative-lineheight-6: calc(1rem + 3ch); --> - +

Font Sizes


@@ -2472,7 +2472,7 @@ 
Usage Sample

               animation: var(--animation-slide-out-down) forwards;
 
               &.open {
-                animation: var(--animation-slide-in-up) forwards;  
+                animation: var(--animation-slide-in-up) forwards;
               }
             }
 
@@ -2515,7 +2515,7 @@ 
Bloom Fade In
- +
Bloom Fade Out
- +
PostCSS - +
CSS Imports

@@ -973,7 +973,7 @@ 
Bundles

                     import OpenProps from 'open-props/src'; // unbundled ES module
                     import Colors from 'open-props/src/colors';
 
-                    // object notation access is special to OpenProps
+                    // object notation access is special to OpenProps 
                     console.info(OpenProps.size1);
                     console.info(OpenProps['--size-1']);
 
@@ -1031,7 +1031,7 @@ 
Props as Javascript

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-
+                    
                     module.exports = {
                       plugins: [
                         postcssJitProps(OpenProps),
@@ -1045,7 +1045,7 @@ 
Props from CSS

                     // postcss.config.js
                     const postcssJitProps = require('postcss-jit-props');
                     const OpenProps = require('open-props');
-
+                    
                     module.exports = {
                       plugins: [
                         postcssJitProps({
@@ -1075,14 +1075,14 @@ 
Customize Bundles

                     npm run gen:shadowdom                   // src files with `:host` instead of `html`
                     npm run gen:nowhere                     // src files without `:where()`
                     npm run gen:prefixed                    // each prop prefixed with `op`, like `--op-font-size-1`
-
+                    
                     // full custom! pass args with node to the props.js script
                     node props.js 'ns' true ':root' 'my'
                     ⇣
                     // arg1: default '', is a custom namespace, props will be --ns-gray-1
                     // arg2: default false, indicates wrapping in :where() or not
                     // arg3: default '', set a custom selector like :scope, .my-class, etc
-                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
+                    // arg4: default '', set a file prefix, files will be my.props.easing.css, etc
@@ -1160,13 +1160,13 @@

Autocomplete

Sublime Text
  1. - There are number of ways with which the autocomplete engine of Sublime Text can be extended. - You can decide to use the completion files, - snippets or - plugins. + There are number of ways with which the autocomplete engine of Sublime Text can be extended. + You can decide to use the completion files, + snippets or + plugins.
  2. - An approach that is less strenous is the "completion file" approach. + An approach that is less strenous is the "completion file" approach. Here, all you'd be required to do is point the `scope` keyword in the .sublime-completions file to the open-props classes in the node_modules folder like so: 
    3. 
@@ -1185,7 +1185,7 @@ 
    Autocomplete
    
                   "scope": "path/to/your/variables",
               }
    -
  3. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via +
  4. Another approach for enabling autocomplete would be to open the settings json file of Sublime Text via Preferences > Settings, then you'll modify the file to include the snippet below — replacing "source" with the path to your variables. 
    5. 
@@ -1320,7 +1320,7 @@ 
    Stone
    
         
         
         
-
+

Red

@@ -1592,7 +1592,7 @@

Jungle

-
+
@@ -1676,7 +1676,7 @@
Purple

2) Creating adaptive color schemes

It's not ideal for components to reference individual light or dark theme colors. Instead, you should prefer to use these individual variables to build a set of theme-agnostic aliases. This allows you to reference a custom property without worrying about its underlying value, which will dynamically adapt to the current context's theme.

- +
No Preference (Light)
@@ -1753,7 +1753,7 @@
Prefers Purple

3) Using the aliases

Your app is now free to use adaptive custom properties! Now, your team only needs to remember a single naming convention rather than wrestling with individual theming variables. Here are a few examples of how the above color theme system could be used.

- +
Page Styles Using Themes
@@ -1797,7 +1797,7 @@
Typography
} h5,h6,small,dd { - color: var(--text-2); + color: var(--text-2); }
@@ -1979,9 +1979,9 @@
Vars Sample
--ratio-square: 1; --ratio-landscape: 4/3; --ratio-portrait: 3/4; - --ratio-widescreen: 16/9; + --ratio-widescreen: 16/9; --ratio-ultrawide: 18/5; - --ratio-golden: 1.6180/1; + --ratio-golden: 1.6180/1;
@@ -2024,7 +2024,7 @@
The Props
- +
Usage Sample

@@ -2085,14 +2085,14 @@ 
Font Weights
Aa
-
@@ -2116,14 +2116,14 @@

Letter Spacing

Letter Spacing
-
@@ -2148,14 +2148,14 @@

Line Height

Sample paragraph content to provide a preview for OP's line heights
- @@ -2178,7 +2178,7 @@

Relative Line Height

--font-relative-lineheight-6: calc(1rem + 3ch); --> - +

Font Sizes


@@ -2472,7 +2472,7 @@ 
Usage Sample

               animation: var(--animation-slide-out-down) forwards;
 
               &.open {
-                animation: var(--animation-slide-in-up) forwards;
+                animation: var(--animation-slide-in-up) forwards;  
               }
             }
 
@@ -2515,7 +2515,7 @@ 
Bloom Fade In

               
             
           
-
+          
           

             
Bloom Fade Out

             

             --mask-corner-cut-circles-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-circles-2);
             }
@@ -3440,7 +3440,7 @@ 
Squares

           
           

             --mask-corner-cut-squares-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-squares-2);
             }
@@ -3456,7 +3456,7 @@ 
Angles

           
           

             --mask-corner-cut-angles-{1,2,3}
-
+  
             .mask-usage {
               -webkit-mask: var(--mask-corner-cut-angles-2);
             }

From 61cdce2c2d7802a1469fee610d2ca0ba7480beda Mon Sep 17 00:00:00 2001
From: Quentin 
Date: Fri, 28 Apr 2023 21:06:39 +0200
Subject: [PATCH 24/29] [add] Reduced media handling for animations [add]
 Dynamic reduced animations [add] Local reference for the blink animation
 values

---
 build/to-stylesheet.js  |  39 ++++++++++----
 src/props.animations.js | 116 ++++++++++++++++++++++++++++++++++++----
 2 files changed, 136 insertions(+), 19 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index 2d0afd51..b13ef084 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -53,18 +53,37 @@ ${dark_propsMeta}
   })
 
   if (filename.includes('animations')) {
-    let dark_props = Object.entries(props)
-      .filter(([prop, val]) =>
-        prop.includes('-@media:dark'))
 
-    dark_props.forEach(([prop, val], index) => {
-      let hasDarkKeyframe = prop.endsWith('-@media:dark') && val.trim().startsWith('@keyframe')
-      if (hasDarkKeyframe) {
-        appendedMeta += `
-@media (--OSdark) {
-  ${val.trim().replace(/\n/g, '\n  ')};
-}`
+    const [
+      dark_props,
+      reduced_props,
+    ] = Object.entries(props).reduce((acc, prop) => {
+      const [key, val] = prop;
+
+      if (val.trim().startsWith('@keyframe')) {
+        const _val = val.trim().replace(/\n/g, '\n  ');
+        key.endsWith('-@media:dark') && acc[0].push([key, _val]);
+        key.endsWith('-@media:reduced') && acc[1].push([key, _val]);
       }
+
+      return acc;
+    }, [[], []])
+
+
+    dark_props.forEach(([_, val]) => {
+      appendedMeta += `
+@media (--OSdark) {
+  ${val};
+}
+      `
+    })
+
+    reduced_props.forEach(([_, val]) => {
+      appendedMeta += `
+@media (--motionNotOK) {
+  ${val};
+}
+      `
     })
   }
 
diff --git a/src/props.animations.js b/src/props.animations.js
index 5ba7d050..a01721d8 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -1,3 +1,8 @@
+const LOCAL_REFERENCES = {
+  "--animation-blink-@": `0%, 100% { opacity: 1 }
+    50% { opacity: .5 }`
+};
+
 export default {
   "--animation-fade-in": "fade-in .5s var(--ease-3)",
   "--animation-fade-in-@": `
@@ -39,51 +44,121 @@ export default {
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
+}`,
+"--animation-scale-up-@media:reduced": `
+@keyframes scale-up {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: scale(1); }
+  50.01% { transform: scale(1.25); }
+  100% { opacity: 1; transform: scale(1.25); }
 }`,
   "--animation-scale-down": "scale-down .5s var(--ease-3)", 
   "--animation-scale-down-@": `
 @keyframes scale-down {
   to { transform: scale(.75) }
+}`,
+"--animation-scale-down-@media:reduced": `
+@keyframes scale-down {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: scale(1); }
+  50.01% { transform: scale(.75); }
+  100% { opacity: 1; transform: scale(.75); }
 }`,
   "--animation-slide-out-up": "slide-out-up .5s var(--ease-3)", 
   "--animation-slide-out-up-@": `
 @keyframes slide-out-up {
   to { transform: translateY(-100%) }
+}`,
+"--animation-slide-out-up-@media:reduced": `
+@keyframes slide-out-up {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateY(0%); }
+  50.01% { transform: translateY(-100%); }
+  100% { opacity: 1; transform: translateY(-100%); }
 }`,
   "--animation-slide-out-down": "slide-out-down .5s var(--ease-3)", 
   "--animation-slide-out-down-@": `
 @keyframes slide-out-down {
   to { transform: translateY(100%) }
+}`,
+"--animation-slide-out-down-@media:reduced": `
+@keyframes slide-out-down {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateY(0%); }
+  50.01% { transform: translateY(100%); }
+  100% { opacity: 1; transform: translateY(100%); }
 }`,
   "--animation-slide-out-right": "slide-out-right .5s var(--ease-3)", 
   "--animation-slide-out-right-@": `
 @keyframes slide-out-right {
   to { transform: translateX(100%) }
+}`,
+"--animation-slide-out-right-@media:reduced": `
+@keyframes slide-out-right {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateX(0%); }
+  50.01% { transform: translateX(100%); }
+  100% { opacity: 1; transform: translateX(100%); }
 }`,
   "--animation-slide-out-left": "slide-out-left .5s var(--ease-3)", 
   "--animation-slide-out-left-@": `
 @keyframes slide-out-left {
   to { transform: translateX(-100%) }
+}`,
+"--animation-slide-out-left-@media:reduced": `
+@keyframes slide-out-left {
+  0% { opacity: 1; }
+  50% { opacity: 0; transform: translateX(0%); }
+  50.01% { transform: translateX(-100%); }
+  100% { opacity: 1; transform: translateX(-100%); }
 }`,
   "--animation-slide-in-up": "slide-in-up .5s var(--ease-3)", 
   "--animation-slide-in-up-@": `
 @keyframes slide-in-up {
   from { transform: translateY(100%) }
+}`,
+"--animation-slide-in-up-@media:reduced": `
+@keyframes slide-in-up {
+  0% { opacity: 1; transform: translateY(100%); }
+  50% { opacity: 0; transform: translateY(100%); }
+  50.01% { transform: translateY(0%); }
+  100% { opacity: 1; transform: translateY(0%); }
 }`,
   "--animation-slide-in-down": "slide-in-down .5s var(--ease-3)", 
   "--animation-slide-in-down-@": `
 @keyframes slide-in-down {
   from { transform: translateY(-100%) }
+}`,
+"--animation-slide-in-down-@media:reduced": `
+@keyframes slide-in-down {
+  0% { opacity: 1; transform: translateY(-100%); }
+  50% { opacity: 0; transform: translateY(-100%); }
+  50.01% { transform: translateY(0%); }
+  100% { opacity: 1; transform: translateY(0%); }
 }`,
   "--animation-slide-in-right": "slide-in-right .5s var(--ease-3)", 
   "--animation-slide-in-right-@": `
 @keyframes slide-in-right {
   from { transform: translateX(-100%) }
+}`,
+"--animation-slide-in-right-@media:reduced": `
+@keyframes slide-in-right {
+  0% { opacity: 1; transform: translateX(-100%); }
+  50% { opacity: 0; transform: translateX(-100%); }
+  50.01% { transform: translateX(0%); }
+  100% { opacity: 1; transform: translateX(0%); }
 }`,
   "--animation-slide-in-left": "slide-in-left .5s var(--ease-3)", 
   "--animation-slide-in-left-@": `
 @keyframes slide-in-left {
   from { transform: translateX(100%) }
+}`,
+"--animation-slide-in-left-@media:reduced": `
+@keyframes slide-in-left {
+  0% { opacity: 1; transform: translateX(100%); }
+  50% { opacity: 0; transform: translateX(100%); }
+  50.01% { transform: translateX(0%); }
+  100% { opacity: 1; transform: translateX(0%); }
 }`,
   "--animation-shake-x": "shake-x .75s var(--ease-out-5)", 
   "--animation-shake-x-@": `
@@ -93,6 +168,10 @@ export default {
   40% { transform: translateX(5%) }
   60% { transform: translateX(-5%) }
   80% { transform: translateX(5%) }
+}`,
+"--animation-shake-x-@media:reduced": `
+@keyframes shake-x {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-shake-y": "shake-y .75s var(--ease-out-5)", 
   "--animation-shake-y-@": `
@@ -102,11 +181,19 @@ export default {
   40% { transform: translateY(5%) }
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
+}`,
+"--animation-shake-y-@media:reduced": `
+@keyframes shake-y {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-spin": "spin 2s linear infinite", 
   "--animation-spin-@": `
 @keyframes spin {
   to { transform: rotate(1turn) }
+}`,
+"--animation-spin-@media:reduced": `
+@keyframes spin {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-ping": "ping 5s var(--ease-out-3) infinite", 
   "--animation-ping-@": `
@@ -116,20 +203,23 @@ export default {
     opacity: 0;
   }
 }`,
-  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
-  "--animation-blink-@": `
-@keyframes blink {
-  0%, 100% {
-    opacity: 1
-  }
-  50% {
-    opacity: .5
-  }
+"--animation-ping-@media:reduced": `
+@keyframes ping {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
+  "--animation-blink": "blink 1s var(--ease-out-3) infinite", 
+  "--animation-blink-@":  `
+  @keyframes blink {
+    ${LOCAL_REFERENCES['--animation-blink-@']}
+  }`,
   "--animation-float": "float 3s var(--ease-in-out-3) infinite", 
   "--animation-float-@": `
 @keyframes float {
   50% { transform: translateY(-25%) }
+}`,
+"--animation-float-@media:reduced": `
+@keyframes float {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-bounce": "bounce 2s var(--ease-squish-2) infinite", 
   "--animation-bounce-@": `
@@ -137,10 +227,18 @@ export default {
   25% { transform: translateY(-20%) }
   40% { transform: translateY(-3%) }
   0%, 60%, 100% { transform: translateY(0) }
+}`,
+"--animation-bounce-@media:reduced": `
+@keyframes bounce {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
 }`,
   "--animation-pulse": "pulse 2s var(--ease-out-3) infinite", 
   "--animation-pulse-@": `
 @keyframes pulse {
   50% { transform: scale(.9,.9) }
 }`,
+"--animation-pulse-@media:reduced": `
+@keyframes pulse {
+  ${LOCAL_REFERENCES['--animation-blink-@']}
+}`,
 }

From 8995020ae41f7c9bb64d56fc1c241b8f59bcf15d Mon Sep 17 00:00:00 2001
From: Quentin 
Date: Mon, 8 May 2023 16:49:12 +0200
Subject: [PATCH 25/29] [chg] Remove duplicate media definitons [fix] Total
 props count test

---
 build/to-stylesheet.js  | 35 ++++++++++++++++++-----------------
 src/props.animations.js | 14 +++++++-------
 test/basic.test.cjs     |  2 +-
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index b13ef084..557a2d6b 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -1,5 +1,20 @@
 import fs from 'fs'
 
+/**
+ * Wraps a set of definitions inside of a media query 
+ * @param {*} queryValue The media value to query for
+ * @param {*} definitions The definitions that need to be wrapped
+ * @returns Media query string
+ */
+const wrapInQuery = (queryValue, definitions) => {
+  return definitions ? `
+@media (${queryValue}) {
+  ${definitions.reduce((acc, [_, val], i) => (
+    `${acc} ${i ? `\n` : ''} ${val}`
+  ), '')}
+}` : '';
+}
+
 export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
   const file = fs.createWriteStream("../src/" + filename)
 
@@ -67,24 +82,10 @@ ${dark_propsMeta}
       }
 
       return acc;
-    }, [[], []])
-
+    }, [[], []]);
 
-    dark_props.forEach(([_, val]) => {
-      appendedMeta += `
-@media (--OSdark) {
-  ${val};
-}
-      `
-    })
-
-    reduced_props.forEach(([_, val]) => {
-      appendedMeta += `
-@media (--motionNotOK) {
-  ${val};
-}
-      `
-    })
+    appendedMeta += wrapInQuery('--OSdark', dark_props)
+    appendedMeta += wrapInQuery('--motionNotOK', reduced_props)
   }
 
   file.write('}\n')
diff --git a/src/props.animations.js b/src/props.animations.js
index a01721d8..6a234ff3 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -30,22 +30,22 @@ export default {
   "--animation-fade-out-bloom": "fade-out-bloom 2s var(--ease-3)",
   "--animation-fade-out-bloom-@": `
 @keyframes fade-out-bloom {
-100% { opacity: 0; filter: brightness(1) blur(20px) }
- 10% { opacity: 1; filter: brightness(2) blur(10px) }
-  0% { opacity: 1; filter: brightness(1) blur(0) }
+  100% { opacity: 0; filter: brightness(1) blur(20px) }
+  10% { opacity: 1; filter: brightness(2) blur(10px) }
+    0% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-fade-out-bloom-@media:dark": `
 @keyframes fade-out-bloom {
-100% { opacity: 0; filter: brightness(1) blur(20px) }
- 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
-  0% { opacity: 1; filter: brightness(1) blur(0) }
+  100% { opacity: 0; filter: brightness(1) blur(20px) }
+  10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+    0% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-scale-up": "scale-up .5s var(--ease-3)", 
   "--animation-scale-up-@": `
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }`,
-"--animation-scale-up-@media:reduced": `
+  "--animation-scale-up-@media:reduced": `
 @keyframes scale-up {
   0% { opacity: 1; }
   50% { opacity: 0; transform: scale(1); }
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index 3501ff03..7f736d9f 100644
--- a/test/basic.test.cjs
+++ b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1566)
+  t.is(Object.keys(OpenProps).length, 1600)
 })
 
 test('Import should have animations', async t => {

From 0dd1ec83edbd50a23733fbf154bd64ffc990bd91 Mon Sep 17 00:00:00 2001
From: Saien Govender <35043617+saitheninja@users.noreply.github.com>
Date: Tue, 9 May 2023 15:41:47 +0200
Subject: [PATCH 26/29] Update build/to-stylesheet.js

puts all the reduced keyframes into 1 media query instead of many

Co-authored-by: Adam Argyle 
---
 build/to-stylesheet.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index b13ef084..0a47893a 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -78,13 +78,20 @@ ${dark_propsMeta}
       `
     })
 
-    reduced_props.forEach(([_, val]) => {
+    if (reduced_props.length) {
       appendedMeta += `
-@media (--motionNotOK) {
-  ${val};
-}
-      `
-    })
+@media (--motionNotOK) {`
+
+      reduced_props.forEach(([_, val]) => {
+        appendedMeta += `
+  ${val}
+        `
+      })
+
+      appendedMeta += `
+}`
+    }
+  }
   }
 
   file.write('}\n')

From 752fc57c18bbe6b39215011ece15d741af64f738 Mon Sep 17 00:00:00 2001
From: sai 
Date: Thu, 11 May 2023 14:52:19 +0200
Subject: [PATCH 27/29] typo

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

diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js
index 0a47893a..fa627fc3 100644
--- a/build/to-stylesheet.js
+++ b/build/to-stylesheet.js
@@ -92,7 +92,6 @@ ${dark_propsMeta}
 }`
     }
   }
-  }
 
   file.write('}\n')
   file.end(appendedMeta)

From d8cfd83a984160f5ec6a37f895f1f89f1c677abc Mon Sep 17 00:00:00 2001
From: Quentin 
Date: Tue, 23 May 2023 20:22:42 +0200
Subject: [PATCH 28/29] [chg] Fix formating

---
 src/props.animations.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/props.animations.js b/src/props.animations.js
index 6a234ff3..224ad9c5 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -30,15 +30,15 @@ export default {
   "--animation-fade-out-bloom": "fade-out-bloom 2s var(--ease-3)",
   "--animation-fade-out-bloom-@": `
 @keyframes fade-out-bloom {
-  100% { opacity: 0; filter: brightness(1) blur(20px) }
-  10% { opacity: 1; filter: brightness(2) blur(10px) }
-    0% { opacity: 1; filter: brightness(1) blur(0) }
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(2) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-fade-out-bloom-@media:dark": `
 @keyframes fade-out-bloom {
-  100% { opacity: 0; filter: brightness(1) blur(20px) }
-  10% { opacity: 1; filter: brightness(0.5) blur(10px) }
-    0% { opacity: 1; filter: brightness(1) blur(0) }
+100% { opacity: 0; filter: brightness(1) blur(20px) }
+ 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
+  0% { opacity: 1; filter: brightness(1) blur(0) }
 }`,
   "--animation-scale-up": "scale-up .5s var(--ease-3)", 
   "--animation-scale-up-@": `

From 15f10c4d62e7db9509b31adb9dfd0ea7be952d98 Mon Sep 17 00:00:00 2001
From: Quentin 
Date: Tue, 23 May 2023 20:23:58 +0200
Subject: [PATCH 29/29] [del] Remove unnecessary whitespace

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

diff --git a/src/props.animations.js b/src/props.animations.js
index 224ad9c5..a01721d8 100644
--- a/src/props.animations.js
+++ b/src/props.animations.js
@@ -45,7 +45,7 @@ export default {
 @keyframes scale-up {
   to { transform: scale(1.25) }
 }`,
-  "--animation-scale-up-@media:reduced": `
+"--animation-scale-up-@media:reduced": `
 @keyframes scale-up {
   0% { opacity: 1; }
   50% { opacity: 0; transform: scale(1); }