Spring Easings ⚽️ (#387)

* easings and docs lookin good * update tests with new 5 props * prep for publish
argyleink · Aug 7, 2023 · b02b1a8 · b02b1a8
1 parent 4a0b8c7
commit b02b1a8
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 19 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
           </li>
         </ul>
         <small>
-          v1.5.10
+          v1.5.11
           <span class="license">
             <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
               <path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
@@ -2254,6 +2254,7 @@ <h5>The Props</h5>
               --ease-in-out-{1-5}
               --ease-elastic-{1-5}
               --ease-squish-{1-5}
+              --ease-spring-{1-5}
               --ease-step-{1-5}
             </code></pre>
           </div>
@@ -2387,6 +2388,25 @@ <h5>Ease Squish</h5>
           </div>
         </div>
 
+        <div class="block-wrap">
+          <header class="animation-control-header">
+            <h5>Ease Spring</h5>
+            <button class="play-button">
+              <svg viewBox="0 0 20 20">
+                <use href="#play-icon" />
+                <use href="#pause-icon" class="hidden" />
+              </svg>
+            </button>
+          </header>
+          <div class="ease-demo paused">
+            <div style="animation-timing-function: var(--ease-spring-1)">ease-spring-1</div>
+            <div style="animation-timing-function: var(--ease-spring-2)">ease-spring-2</div>
+            <div style="animation-timing-function: var(--ease-spring-3)">ease-spring-3</div>
+            <div style="animation-timing-function: var(--ease-spring-4)">ease-spring-4</div>
+            <div style="animation-timing-function: var(--ease-spring-5)">ease-spring-5</div>
+          </div>
+        </div>
+
         <div class="block-wrap">
           <header class="animation-control-header">
             <h5>Ease Steps</h5>

diff --git a/docsite/package-lock.json b/docsite/package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "name": "open-props",
   "author": "Adam Argyle",
   "license": "MIT",
-  "version": "1.5.10",
+  "version": "1.5.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/argyleink/open-props"

diff --git a/src/props.colors-oklch.css b/src/props.colors-oklch.css
@@ -15,5 +15,5 @@
   --color-13: oklch(20% .09 var(--color-hue, 0));
   --color-14: oklch(14% .07 var(--color-hue, 0));
   --color-15: oklch(11% .05 var(--color-hue, 0));
-  --color-bright: oklch(65% .3 var(--color-hue));
+  --color-bright: oklch(65% .3 var(--color-hue, 0));
 }
diff --git a/src/props.easing.css b/src/props.easing.css
@@ -34,4 +34,32 @@
   --ease-step-3: steps(4);
   --ease-step-4: steps(7);
   --ease-step-5: steps(10);
+  --ease-spring-1: linear(
+    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
+    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
+    1.001
+  );
+  --ease-spring-2: linear(
+    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
+    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
+    0.999 61.6%, 0.995 71.2%, 1
+  );
+  --ease-spring-3: linear(
+    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
+    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
+    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
+    0.997 69.8%, 1.003 76.9%, 1
+  );
+  --ease-spring-4: linear(
+    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
+    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
+    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
+    0.998 78.9%, 1
+  );
+  --ease-spring-5: linear(
+    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
+    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
+    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
+    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
+  );
 }
diff --git a/src/props.easing.js b/src/props.easing.js
@@ -40,4 +40,33 @@ export default {
   '--ease-step-3': 'steps(4)',
   '--ease-step-4': 'steps(7)',
   '--ease-step-5': 'steps(10)',
+
+  '--ease-spring-1': `linear(
+    0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
+    0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
+    1.001
+  )`,
+  '--ease-spring-2': `linear(
+    0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
+    1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
+    0.999 61.6%, 0.995 71.2%, 1
+  )`,
+  '--ease-spring-3': `linear(
+    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
+    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
+    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
+    0.997 69.8%, 1.003 76.9%, 1
+  )`,
+  '--ease-spring-4': `linear(
+    0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
+    1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
+    0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
+    0.998 78.9%, 1
+  )`,
+  '--ease-spring-5': `linear(
+    0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
+    1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
+    0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
+    1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
+  )`,
 }
diff --git 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, 1600)
+  t.is(Object.keys(OpenProps).length, 1610)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 414)
+  t.is(Object.keys(OPtokens).length, 419)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })