diff --git a/docsite/index.css b/docsite/index.css index e22ca418..c7737251 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -535,7 +535,7 @@ pre[class*="language-"] { &:is(:hover,:focus) { transform: scale(1.5); transition-delay: 0s; - transition-timing-function: var(--ease-elastic-3); + transition-timing-function: var(--ease-elastic-out-3); &::before { opacity: 1; @@ -1436,7 +1436,7 @@ input[type="range"] { stroke-width: 2px; transform-origin: center center; transition: - transform .5s var(--ease-elastic-4), + transform .5s var(--ease-elastic-out-4), opacity var(--_opacity-dur) var(--ease-3); @nest :hover > svg > & { diff --git a/docsite/index.html b/docsite/index.html index 2592d624..f9d26fb7 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.5.16 + v1.6.2
The Props
--ease-in-{1-5} --ease-out-{1-5} --ease-in-out-{1-5} - --ease-elastic-{1-5} - --ease-squish-{1-5} + --ease-elastic-out-{1-5} + --ease-elastic-in-{1-5} + --ease-elastic-in-out-{1-5} --ease-spring-{1-5} --ease-step-{1-5} + + /* will be removed in v2 */ + --ease-elastic-{1-5} /* deprecated; equal to elastic-out */ + --ease-squish-{1-5} /* deprecated; equal to elastic-in-out */ @@ -2352,7 +2357,26 @@
Ease In Out
-
Ease Elastic
+
Ease Elastic Out
+ +
+
+
ease-elastic-out-1
+
ease-elastic-out-2
+
ease-elastic-out-3
+
ease-elastic-out-4
+
ease-elastic-out-5
+
+
+ +
+
+
Ease Elastic In
-
ease-elastic-1
-
ease-elastic-2
-
ease-elastic-3
-
ease-elastic-4
-
ease-elastic-5
+
ease-elastic-in-1
+
ease-elastic-in-2
+
ease-elastic-in-3
+
ease-elastic-in-4
+
ease-elastic-in-5
-
Ease Squish
+
Ease Elastic In Out
-
ease-squish-1
-
ease-squish-2
-
ease-squish-3
-
ease-squish-4
-
ease-squish-5
+
ease-elastic-in-out-1
+
ease-elastic-in-out-2
+
ease-elastic-in-out-3
+
ease-elastic-in-out-4
+
ease-elastic-in-out-5
@@ -2745,7 +2769,7 @@
Slide Fade
animation: var(--animation-fade-out) forwards, var(--animation-slide-out-down); - animation-timing-function: var(--ease-squish-3); + animation-timing-function: var(--ease-elastic-in-out-3); animation-duration: 1s; } @@ -2791,7 +2815,7 @@
Push Out
animation: var(--animation-scale-down), var(--animation-fade-out); - animation-timing-function: var(--ease-squish-4); + animation-timing-function: var(--ease-elastic-in-out-4); } diff --git a/package.json b/package.json index 8e084174..e9850de7 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.5.16", + "version": "1.6.2", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props" diff --git a/src/extra/buttons.css b/src/extra/buttons.css index e58b803d..2598022c 100644 --- a/src/extra/buttons.css +++ b/src/extra/buttons.css @@ -52,7 +52,7 @@ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; - transition: border-color .5s var(--ease-3) 3s; + transition: border-color .5s var(--ease-3); @media (--OSdark) { --_highlight: var(--_highlight-dark); @@ -62,7 +62,7 @@ @media (--motionOK) { transition: - border-color .5s var(--ease-3) 3s, + border-color .5s var(--ease-3), box-shadow 145ms var(--ease-4), outline-offset 145ms var(--ease-4); } @@ -84,7 +84,6 @@ /* pressing */ &:where(:not(:active):hover) { --_highlight-size: var(--size-2); - transition-delay: 0s; transition-duration: .25s; } diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css index 248800b8..65cdea53 100644 --- a/src/extra/normalize.src.css +++ b/src/extra/normalize.src.css @@ -161,6 +161,7 @@ min-inline-size: 0; max-inline-size: max-content; writing-mode: lr; + direction: ltr; } :where(:not(pre) > code) { @@ -210,6 +211,7 @@ & > :where(figcaption) { font-size: var(--font-size-1); + text-wrap: balance; } } diff --git a/src/props.easing.css b/src/props.easing.css index d316ed25..d0d03626 100644 --- a/src/props.easing.css +++ b/src/props.easing.css @@ -19,21 +19,36 @@ --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-in-out-4: cubic-bezier(.7, 0, .3, 1); --ease-in-out-5: cubic-bezier(.9, 0, .1, 1); - --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25); - --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25); - --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25); - --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25); - --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25); - --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5); - --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5); - --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5); - --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5); - --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5); + --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25); + --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25); + --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25); + --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25); + --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25); + --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1); + --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1); + --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1); + --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1); + --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1); + --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5); + --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5); + --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5); + --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5); + --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5); --ease-step-1: steps(2); --ease-step-2: steps(3); --ease-step-3: steps(4); --ease-step-4: steps(7); --ease-step-5: steps(10); + --ease-elastic-1: var(--ease-elastic-out-1); + --ease-elastic-2: var(--ease-elastic-out-2); + --ease-elastic-3: var(--ease-elastic-out-3); + --ease-elastic-4: var(--ease-elastic-out-4); + --ease-elastic-5: var(--ease-elastic-out-5); + --ease-squish-1: var(--elastic-in-out-1); + --ease-squish-2: var(--elastic-in-out-2); + --ease-squish-3: var(--elastic-in-out-3); + --ease-squish-4: var(--elastic-in-out-4); + --ease-squish-5: var(--elastic-in-out-5); --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%, diff --git a/src/props.easing.js b/src/props.easing.js index 56d3b80d..bb583ec9 100644 --- a/src/props.easing.js +++ b/src/props.easing.js @@ -23,17 +23,23 @@ export default { '--ease-in-out-4': 'cubic-bezier(.7, 0, .3, 1)', '--ease-in-out-5': 'cubic-bezier(.9, 0, .1, 1)', - '--ease-elastic-1': 'cubic-bezier(.5, .75, .75, 1.25)', - '--ease-elastic-2': 'cubic-bezier(.5, 1, .75, 1.25)', - '--ease-elastic-3': 'cubic-bezier(.5, 1.25, .75, 1.25)', - '--ease-elastic-4': 'cubic-bezier(.5, 1.5, .75, 1.25)', - '--ease-elastic-5': 'cubic-bezier(.5, 1.75, .75, 1.25)', + '--ease-elastic-out-1': 'cubic-bezier(.5, .75, .75, 1.25)', + '--ease-elastic-out-2': 'cubic-bezier(.5, 1, .75, 1.25)', + '--ease-elastic-out-3': 'cubic-bezier(.5, 1.25, .75, 1.25)', + '--ease-elastic-out-4': 'cubic-bezier(.5, 1.5, .75, 1.25)', + '--ease-elastic-out-5': 'cubic-bezier(.5, 1.75, .75, 1.25)', - '--ease-squish-1': 'cubic-bezier(.5, -.1, .1, 1.5)', - '--ease-squish-2': 'cubic-bezier(.5, -.3, .1, 1.5)', - '--ease-squish-3': 'cubic-bezier(.5, -.5, .1, 1.5)', - '--ease-squish-4': 'cubic-bezier(.5, -.7, .1, 1.5)', - '--ease-squish-5': 'cubic-bezier(.5, -.9, .1, 1.5)', + '--ease-elastic-in-1': 'cubic-bezier(.5, -0.25, .75, 1)', + '--ease-elastic-in-2': 'cubic-bezier(.5, -0.50, .75, 1)', + '--ease-elastic-in-3': 'cubic-bezier(.5, -0.75, .75, 1)', + '--ease-elastic-in-4': 'cubic-bezier(.5, -1.00, .75, 1)', + '--ease-elastic-in-5': 'cubic-bezier(.5, -1.25, .75, 1)', + + '--ease-elastic-in-out-1': 'cubic-bezier(.5, -.1, .1, 1.5)', + '--ease-elastic-in-out-2': 'cubic-bezier(.5, -.3, .1, 1.5)', + '--ease-elastic-in-out-3': 'cubic-bezier(.5, -.5, .1, 1.5)', + '--ease-elastic-in-out-4': 'cubic-bezier(.5, -.7, .1, 1.5)', + '--ease-elastic-in-out-5': 'cubic-bezier(.5, -.9, .1, 1.5)', '--ease-step-1': 'steps(2)', '--ease-step-2': 'steps(3)', @@ -41,6 +47,18 @@ export default { '--ease-step-4': 'steps(7)', '--ease-step-5': 'steps(10)', + '--ease-elastic-1': 'var(--ease-elastic-out-1)', + '--ease-elastic-2': 'var(--ease-elastic-out-2)', + '--ease-elastic-3': 'var(--ease-elastic-out-3)', + '--ease-elastic-4': 'var(--ease-elastic-out-4)', + '--ease-elastic-5': 'var(--ease-elastic-out-5)', + + '--ease-squish-1': 'var(--elastic-in-out-1)', + '--ease-squish-2': 'var(--elastic-in-out-2)', + '--ease-squish-3': 'var(--elastic-in-out-3)', + '--ease-squish-4': 'var(--elastic-in-out-4)', + '--ease-squish-5': 'var(--elastic-in-out-5)', + '--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%, diff --git a/test/basic.test.cjs b/test/basic.test.cjs index ee816316..917fe983 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, 1620) + t.is(Object.keys(OpenProps).length, 1642) }) 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, 419) + t.is(Object.keys(OPtokens).length, 434) t.assert(Object.keys(OPtokens).includes('--orange-0')) })