Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Fri, 29 Sep 2023 19:47:57 +0000
Hash: 5e21d4a135ca3e6d05708479349c26878508d1df
Timestamp: Fri, 29 Sep 2023 19:47:57 +0000 (11 months ago)

+99 -42 +/-6 browse
v1.6 (#421) 
v1.6 (#421)

* version bump

* Added --ease-anticipate-* easings (#419)

* breaking change: added --ease-elastic-in, renamed --ease-elastic-* and --ease-squish-* to --ease-elastic-out-* and --ease-elastic-in-out-*

* Update docsite/index.css

Fixed typo from refactor in docsite/index.css as per Adam's comment

Co-authored-by: Adam Argyle <argyle@google.com>

* adjusted tests to correspond to additional props we added

---------

Co-authored-by: Alex Li <alex.li@twosigma.com>
Co-authored-by: Adam Argyle <argyle@google.com>

* document and create fallback

* update tests

---------

Co-authored-by: Alex Li <aml7hqv@virginia.edu>
Co-authored-by: Alex Li <alex.li@twosigma.com>
1diff --git a/docsite/index.css b/docsite/index.css
2index c6f8bf6..cfce4b7 100644
3--- a/docsite/index.css
4+++ b/docsite/index.css
5 @@ -535,7 +535,7 @@ pre[class*="language-"] {
6 &:is(:hover,:focus) {
7 transform: scale(1.5);
8 transition-delay: 0s;
9- transition-timing-function: var(--ease-elastic-3);
10+ transition-timing-function: var(--ease-elastic-out-3);
11
12 &::before {
13 opacity: 1;
14 @@ -1436,7 +1436,7 @@ input[type="range"] {
15 stroke-width: 2px;
16 transform-origin: center center;
17 transition:
18- transform .5s var(--ease-elastic-4),
19+ transform .5s var(--ease-elastic-out-4),
20 opacity var(--_opacity-dur) var(--ease-3);
21
22 @nest :hover > svg > & {
23 diff --git a/docsite/index.html b/docsite/index.html
24index 88418d6..9f45368 100644
25--- a/docsite/index.html
26+++ b/docsite/index.html
27 @@ -119,7 +119,7 @@
28 </li>
29 </ul>
30 <small>
31- v1.5.16
32+ v1.6.0
33 <span class="license">
34 <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
35 <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>
36 @@ -2252,10 +2252,15 @@
37 --ease-in-{1-5}
38 --ease-out-{1-5}
39 --ease-in-out-{1-5}
40- --ease-elastic-{1-5}
41- --ease-squish-{1-5}
42+ --ease-elastic-out-{1-5}
43+ --ease-elastic-in-{1-5}
44+ --ease-elastic-in-out-{1-5}
45 --ease-spring-{1-5}
46 --ease-step-{1-5}
47+
48+ /* will be removed in v2 */
49+ --ease-elastic-{1-5} /* deprecated; equal to elastic-out */
50+ --ease-squish-{1-5} /* deprecated; equal to elastic-in-out */
51 </code></pre>
52 </div>
53 </div>
54 @@ -2352,7 +2357,26 @@
55
56 <div class="block-wrap">
57 <header class="animation-control-header">
58- <h5>Ease Elastic</h5>
59+ <h5>Ease Elastic Out</h5>
60+ <button class="play-button">
61+ <svg viewBox="0 0 20 20">
62+ <use href="#play-icon"/>
63+ <use href="#pause-icon" class="hidden"/>
64+ </svg>
65+ </button>
66+ </header>
67+ <div class="ease-demo paused">
68+ <div style="animation-timing-function: var(--ease-elastic-out-1)">ease-elastic-out-1</div>
69+ <div style="animation-timing-function: var(--ease-elastic-out-2)">ease-elastic-out-2</div>
70+ <div style="animation-timing-function: var(--ease-elastic-out-3)">ease-elastic-out-3</div>
71+ <div style="animation-timing-function: var(--ease-elastic-out-4)">ease-elastic-out-4</div>
72+ <div style="animation-timing-function: var(--ease-elastic-out-5)">ease-elastic-out-5</div>
73+ </div>
74+ </div>
75+
76+ <div class="block-wrap">
77+ <header class="animation-control-header">
78+ <h5>Ease Elastic In</h5>
79 <button class="play-button">
80 <svg viewBox="0 0 20 20">
81 <use href="#play-icon"/>
82 @@ -2361,17 +2385,17 @@
83 </button>
84 </header>
85 <div class="ease-demo paused">
86- <div style="animation-timing-function: var(--ease-elastic-1)">ease-elastic-1</div>
87- <div style="animation-timing-function: var(--ease-elastic-2)">ease-elastic-2</div>
88- <div style="animation-timing-function: var(--ease-elastic-3)">ease-elastic-3</div>
89- <div style="animation-timing-function: var(--ease-elastic-4)">ease-elastic-4</div>
90- <div style="animation-timing-function: var(--ease-elastic-5)">ease-elastic-5</div>
91+ <div style="animation-timing-function: var(--ease-elastic-in-1)">ease-elastic-in-1</div>
92+ <div style="animation-timing-function: var(--ease-elastic-in-2)">ease-elastic-in-2</div>
93+ <div style="animation-timing-function: var(--ease-elastic-in-3)">ease-elastic-in-3</div>
94+ <div style="animation-timing-function: var(--ease-elastic-in-4)">ease-elastic-in-4</div>
95+ <div style="animation-timing-function: var(--ease-elastic-in-5)">ease-elastic-in-5</div>
96 </div>
97 </div>
98
99 <div class="block-wrap">
100 <header class="animation-control-header">
101- <h5>Ease Squish</h5>
102+ <h5>Ease Elastic In Out</h5>
103 <button class="play-button">
104 <svg viewBox="0 0 20 20">
105 <use href="#play-icon"/>
106 @@ -2380,11 +2404,11 @@
107 </button>
108 </header>
109 <div class="ease-demo paused">
110- <div style="animation-timing-function: var(--ease-squish-1)">ease-squish-1</div>
111- <div style="animation-timing-function: var(--ease-squish-2)">ease-squish-2</div>
112- <div style="animation-timing-function: var(--ease-squish-3)">ease-squish-3</div>
113- <div style="animation-timing-function: var(--ease-squish-4)">ease-squish-4</div>
114- <div style="animation-timing-function: var(--ease-squish-5)">ease-squish-5</div>
115+ <div style="animation-timing-function: var(--ease-elastic-in-out-1)">ease-elastic-in-out-1</div>
116+ <div style="animation-timing-function: var(--ease-elastic-in-out-2)">ease-elastic-in-out-2</div>
117+ <div style="animation-timing-function: var(--ease-elastic-in-out-3)">ease-elastic-in-out-3</div>
118+ <div style="animation-timing-function: var(--ease-elastic-in-out-4)">ease-elastic-in-out-4</div>
119+ <div style="animation-timing-function: var(--ease-elastic-in-out-5)">ease-elastic-in-out-5</div>
120 </div>
121 </div>
122
123 @@ -2745,7 +2769,7 @@
124 animation:
125 var(--animation-fade-out) forwards,
126 var(--animation-slide-out-down);
127- animation-timing-function: var(--ease-squish-3);
128+ animation-timing-function: var(--ease-elastic-in-out-3);
129 animation-duration: 1s;
130 }
131 </code></pre>
132 @@ -2791,7 +2815,7 @@
133 animation:
134 var(--animation-scale-down),
135 var(--animation-fade-out);
136- animation-timing-function: var(--ease-squish-4);
137+ animation-timing-function: var(--ease-elastic-in-out-4);
138 }
139 </code></pre>
140 </div>
141 diff --git a/package.json b/package.json
142index 8e08417..4304345 100644
143--- a/package.json
144+++ b/package.json
145 @@ -3,7 +3,7 @@
146 "name": "open-props",
147 "author": "Adam Argyle",
148 "license": "MIT",
149- "version": "1.5.16",
150+ "version": "1.6.0",
151 "repository": {
152 "type": "git",
153 "url": "https://github.com/argyleink/open-props"
154 diff --git a/src/props.easing.css b/src/props.easing.css
155index d316ed2..d0d0362 100644
156--- a/src/props.easing.css
157+++ b/src/props.easing.css
158 @@ -19,21 +19,36 @@
159 --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
160 --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
161 --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
162- --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
163- --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
164- --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
165- --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
166- --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
167- --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
168- --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
169- --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
170- --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
171- --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
172+ --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
173+ --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
174+ --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
175+ --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
176+ --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
177+ --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
178+ --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
179+ --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
180+ --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
181+ --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
182+ --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
183+ --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
184+ --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
185+ --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
186+ --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
187 --ease-step-1: steps(2);
188 --ease-step-2: steps(3);
189 --ease-step-3: steps(4);
190 --ease-step-4: steps(7);
191 --ease-step-5: steps(10);
192+ --ease-elastic-1: var(--ease-elastic-out-1);
193+ --ease-elastic-2: var(--ease-elastic-out-2);
194+ --ease-elastic-3: var(--ease-elastic-out-3);
195+ --ease-elastic-4: var(--ease-elastic-out-4);
196+ --ease-elastic-5: var(--ease-elastic-out-5);
197+ --ease-squish-1: var(--elastic-in-out-1);
198+ --ease-squish-2: var(--elastic-in-out-2);
199+ --ease-squish-3: var(--elastic-in-out-3);
200+ --ease-squish-4: var(--elastic-in-out-4);
201+ --ease-squish-5: var(--elastic-in-out-5);
202 --ease-spring-1: linear(
203 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
204 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
205 diff --git a/src/props.easing.js b/src/props.easing.js
206index 56d3b80..bb583ec 100644
207--- a/src/props.easing.js
208+++ b/src/props.easing.js
209 @@ -23,17 +23,23 @@ export default {
210 '--ease-in-out-4': 'cubic-bezier(.7, 0, .3, 1)',
211 '--ease-in-out-5': 'cubic-bezier(.9, 0, .1, 1)',
212
213- '--ease-elastic-1': 'cubic-bezier(.5, .75, .75, 1.25)',
214- '--ease-elastic-2': 'cubic-bezier(.5, 1, .75, 1.25)',
215- '--ease-elastic-3': 'cubic-bezier(.5, 1.25, .75, 1.25)',
216- '--ease-elastic-4': 'cubic-bezier(.5, 1.5, .75, 1.25)',
217- '--ease-elastic-5': 'cubic-bezier(.5, 1.75, .75, 1.25)',
218+ '--ease-elastic-out-1': 'cubic-bezier(.5, .75, .75, 1.25)',
219+ '--ease-elastic-out-2': 'cubic-bezier(.5, 1, .75, 1.25)',
220+ '--ease-elastic-out-3': 'cubic-bezier(.5, 1.25, .75, 1.25)',
221+ '--ease-elastic-out-4': 'cubic-bezier(.5, 1.5, .75, 1.25)',
222+ '--ease-elastic-out-5': 'cubic-bezier(.5, 1.75, .75, 1.25)',
223
224- '--ease-squish-1': 'cubic-bezier(.5, -.1, .1, 1.5)',
225- '--ease-squish-2': 'cubic-bezier(.5, -.3, .1, 1.5)',
226- '--ease-squish-3': 'cubic-bezier(.5, -.5, .1, 1.5)',
227- '--ease-squish-4': 'cubic-bezier(.5, -.7, .1, 1.5)',
228- '--ease-squish-5': 'cubic-bezier(.5, -.9, .1, 1.5)',
229+ '--ease-elastic-in-1': 'cubic-bezier(.5, -0.25, .75, 1)',
230+ '--ease-elastic-in-2': 'cubic-bezier(.5, -0.50, .75, 1)',
231+ '--ease-elastic-in-3': 'cubic-bezier(.5, -0.75, .75, 1)',
232+ '--ease-elastic-in-4': 'cubic-bezier(.5, -1.00, .75, 1)',
233+ '--ease-elastic-in-5': 'cubic-bezier(.5, -1.25, .75, 1)',
234+
235+ '--ease-elastic-in-out-1': 'cubic-bezier(.5, -.1, .1, 1.5)',
236+ '--ease-elastic-in-out-2': 'cubic-bezier(.5, -.3, .1, 1.5)',
237+ '--ease-elastic-in-out-3': 'cubic-bezier(.5, -.5, .1, 1.5)',
238+ '--ease-elastic-in-out-4': 'cubic-bezier(.5, -.7, .1, 1.5)',
239+ '--ease-elastic-in-out-5': 'cubic-bezier(.5, -.9, .1, 1.5)',
240
241 '--ease-step-1': 'steps(2)',
242 '--ease-step-2': 'steps(3)',
243 @@ -41,6 +47,18 @@ export default {
244 '--ease-step-4': 'steps(7)',
245 '--ease-step-5': 'steps(10)',
246
247+ '--ease-elastic-1': 'var(--ease-elastic-out-1)',
248+ '--ease-elastic-2': 'var(--ease-elastic-out-2)',
249+ '--ease-elastic-3': 'var(--ease-elastic-out-3)',
250+ '--ease-elastic-4': 'var(--ease-elastic-out-4)',
251+ '--ease-elastic-5': 'var(--ease-elastic-out-5)',
252+
253+ '--ease-squish-1': 'var(--elastic-in-out-1)',
254+ '--ease-squish-2': 'var(--elastic-in-out-2)',
255+ '--ease-squish-3': 'var(--elastic-in-out-3)',
256+ '--ease-squish-4': 'var(--elastic-in-out-4)',
257+ '--ease-squish-5': 'var(--elastic-in-out-5)',
258+
259 '--ease-spring-1': `linear(
260 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
261 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%,
262 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
263index 6aaa580..917fe98 100644
264--- a/test/basic.test.cjs
265+++ b/test/basic.test.cjs
266 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
267 const OPtokens = require('../open-props.tokens.json')
268
269 test('Should have an all included import', t => {
270- t.is(Object.keys(OpenProps).length, 1612)
271+ t.is(Object.keys(OpenProps).length, 1642)
272 })
273
274 test('Import should have animations', async t => {
275 @@ -24,7 +24,7 @@ test('Import should have colors', async t => {
276 })
277
278 test('JSON Import should have colors', async t => {
279- t.is(Object.keys(OPtokens).length, 419)
280+ t.is(Object.keys(OPtokens).length, 434)
281 t.assert(Object.keys(OPtokens).includes('--orange-0'))
282 })
283