Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Mon, 07 Aug 2023 17:15:31 +0000
Hash: b02b1a8fd2953e34b25d1abc6b557f573c1a67c0
Timestamp: Mon, 07 Aug 2023 17:15:31 +0000 (1 year ago)

+104 -19 +/-8 browse
Spring Easings ⚽️ (#387) 
Spring Easings ⚽️ (#387)

* easings and docs lookin good

* update tests with new 5 props

* prep for publish
1diff --git a/docsite/index.html b/docsite/index.html
2index 8286348..54b6088 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -119,7 +119,7 @@
6 </li>
7 </ul>
8 <small>
9- v1.5.10
10+ v1.5.11
11 <span class="license">
12 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
13 <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>
14 @@ -2254,6 +2254,7 @@
15 --ease-in-out-{1-5}
16 --ease-elastic-{1-5}
17 --ease-squish-{1-5}
18+ --ease-spring-{1-5}
19 --ease-step-{1-5}
20 </code></pre>
21 </div>
22 @@ -2389,6 +2390,25 @@
23
24 <div class="block-wrap">
25 <header class="animation-control-header">
26+ <h5>Ease Spring</h5>
27+ <button class="play-button">
28+ <svg viewBox="0 0 20 20">
29+ <use href="#play-icon" />
30+ <use href="#pause-icon" class="hidden" />
31+ </svg>
32+ </button>
33+ </header>
34+ <div class="ease-demo paused">
35+ <div style="animation-timing-function: var(--ease-spring-1)">ease-spring-1</div>
36+ <div style="animation-timing-function: var(--ease-spring-2)">ease-spring-2</div>
37+ <div style="animation-timing-function: var(--ease-spring-3)">ease-spring-3</div>
38+ <div style="animation-timing-function: var(--ease-spring-4)">ease-spring-4</div>
39+ <div style="animation-timing-function: var(--ease-spring-5)">ease-spring-5</div>
40+ </div>
41+ </div>
42+
43+ <div class="block-wrap">
44+ <header class="animation-control-header">
45 <h5>Ease Steps</h5>
46 <button class="play-button">
47 <svg viewBox="0 0 20 20">
48 diff --git a/docsite/package-lock.json b/docsite/package-lock.json
49index b747f49..bc00f55 100644
50--- a/docsite/package-lock.json
51+++ b/docsite/package-lock.json
52 @@ -101,9 +101,9 @@
53 }
54 },
55 "node_modules/caniuse-lite": {
56- "version": "1.0.30001431",
57- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
58- "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
59+ "version": "1.0.30001519",
60+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
61+ "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
62 "dev": true,
63 "funding": [
64 {
65 @@ -113,6 +113,10 @@
66 {
67 "type": "tidelift",
68 "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
69+ },
70+ {
71+ "type": "github",
72+ "url": "https://github.com/sponsors/ai"
73 }
74 ]
75 },
76 @@ -1864,9 +1868,9 @@
77 }
78 },
79 "caniuse-lite": {
80- "version": "1.0.30001431",
81- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
82- "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
83+ "version": "1.0.30001519",
84+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
85+ "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
86 "dev": true
87 },
88 "chalk": {
89 diff --git a/package-lock.json b/package-lock.json
90index 695339f..c985b57 100644
91--- a/package-lock.json
92+++ b/package-lock.json
93 @@ -1,12 +1,12 @@
94 {
95 "name": "open-props",
96- "version": "1.5.4",
97+ "version": "1.5.10",
98 "lockfileVersion": 2,
99 "requires": true,
100 "packages": {
101 "": {
102 "name": "open-props",
103- "version": "1.5.4",
104+ "version": "1.5.10",
105 "license": "MIT",
106 "devDependencies": {
107 "ava": "^3.15.0",
108 @@ -846,9 +846,9 @@
109 }
110 },
111 "node_modules/caniuse-lite": {
112- "version": "1.0.30001431",
113- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
114- "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
115+ "version": "1.0.30001519",
116+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
117+ "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
118 "dev": true,
119 "funding": [
120 {
121 @@ -858,6 +858,10 @@
122 {
123 "type": "tidelift",
124 "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
125+ },
126+ {
127+ "type": "github",
128+ "url": "https://github.com/sponsors/ai"
129 }
130 ]
131 },
132 @@ -6947,9 +6951,9 @@
133 }
134 },
135 "caniuse-lite": {
136- "version": "1.0.30001431",
137- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
138- "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
139+ "version": "1.0.30001519",
140+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz",
141+ "integrity": "sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==",
142 "dev": true
143 },
144 "chalk": {
145 diff --git a/package.json b/package.json
146index 3ecdfe5..cbed601 100644
147--- a/package.json
148+++ b/package.json
149 @@ -3,7 +3,7 @@
150 "name": "open-props",
151 "author": "Adam Argyle",
152 "license": "MIT",
153- "version": "1.5.10",
154+ "version": "1.5.11",
155 "repository": {
156 "type": "git",
157 "url": "https://github.com/argyleink/open-props"
158 diff --git a/src/props.colors-oklch.css b/src/props.colors-oklch.css
159index a949d0d..83c533d 100644
160--- a/src/props.colors-oklch.css
161+++ b/src/props.colors-oklch.css
162 @@ -15,5 +15,5 @@
163 --color-13: oklch(20% .09 var(--color-hue, 0));
164 --color-14: oklch(14% .07 var(--color-hue, 0));
165 --color-15: oklch(11% .05 var(--color-hue, 0));
166- --color-bright: oklch(65% .3 var(--color-hue));
167+ --color-bright: oklch(65% .3 var(--color-hue, 0));
168 }
169 diff --git a/src/props.easing.css b/src/props.easing.css
170index b855d8e..d316ed2 100644
171--- a/src/props.easing.css
172+++ b/src/props.easing.css
173 @@ -34,4 +34,32 @@
174 --ease-step-3: steps(4);
175 --ease-step-4: steps(7);
176 --ease-step-5: steps(10);
177+ --ease-spring-1: linear(
178+ 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
179+ 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
180+ 1.001
181+ );
182+ --ease-spring-2: linear(
183+ 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
184+ 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
185+ 0.999 61.6%, 0.995 71.2%, 1
186+ );
187+ --ease-spring-3: linear(
188+ 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
189+ 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
190+ 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
191+ 0.997 69.8%, 1.003 76.9%, 1
192+ );
193+ --ease-spring-4: linear(
194+ 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
195+ 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
196+ 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
197+ 0.998 78.9%, 1
198+ );
199+ --ease-spring-5: linear(
200+ 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
201+ 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
202+ 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
203+ 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
204+ );
205 }
206 diff --git a/src/props.easing.js b/src/props.easing.js
207index d9fe72e..56d3b80 100644
208--- a/src/props.easing.js
209+++ b/src/props.easing.js
210 @@ -40,4 +40,33 @@ export default {
211 '--ease-step-3': 'steps(4)',
212 '--ease-step-4': 'steps(7)',
213 '--ease-step-5': 'steps(10)',
214+
215+ '--ease-spring-1': `linear(
216+ 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
217+ 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
218+ 1.001
219+ )`,
220+ '--ease-spring-2': `linear(
221+ 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962,
222+ 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%,
223+ 0.999 61.6%, 0.995 71.2%, 1
224+ )`,
225+ '--ease-spring-3': `linear(
226+ 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
227+ 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
228+ 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
229+ 0.997 69.8%, 1.003 76.9%, 1
230+ )`,
231+ '--ease-spring-4': `linear(
232+ 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185,
233+ 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973,
234+ 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%,
235+ 0.998 78.9%, 1
236+ )`,
237+ '--ease-spring-5': `linear(
238+ 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231,
239+ 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%,
240+ 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
241+ 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
242+ )`,
243 }
244 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
245index 13e20ea..3b9d153 100644
246--- a/test/basic.test.cjs
247+++ b/test/basic.test.cjs
248 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
249 const OPtokens = require('../open-props.tokens.json')
250
251 test('Should have an all included import', t => {
252- t.is(Object.keys(OpenProps).length, 1600)
253+ t.is(Object.keys(OpenProps).length, 1610)
254 })
255
256 test('Import should have animations', async t => {
257 @@ -24,7 +24,7 @@ test('Import should have colors', async t => {
258 })
259
260 test('JSON Import should have colors', async t => {
261- t.is(Object.keys(OPtokens).length, 414)
262+ t.is(Object.keys(OPtokens).length, 419)
263 t.assert(Object.keys(OPtokens).includes('--orange-0'))
264 })
265