Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Logical Animation Directions #422

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Logical Animation Directions #422

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b22b11c
change animation names and add aliases
ryanmitchx Sep 29, 2023
e12ff60
modify ltr/rtl detection to bypass postcss issues
ryanmitchx Sep 29, 2023
1dd9242
update number of props in test
ryanmitchx Sep 29, 2023
cf60881
add supports stylesheet to index and animations, allow animation prop…
ryanmitchx Sep 29, 2023
2020010
checkin updated index.css
ryanmitchx Sep 29, 2023
394d6d8
update prop names in docsite
ryanmitchx Sep 29, 2023
c81c420
stylesheet formatting
ryanmitchx Sep 29, 2023
f737f66
stylesheet formatting
ryanmitchx Sep 29, 2023
6d498b3
Merge branch 'main' into logical-animations
argyleink Sep 29, 2023
8d84136
update tests
argyleink Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions build/props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ buildPropsStylesheet({
// gen index.css
const entry = fs.createWriteStream(`../src/${pfx}index.css`)
entry.write(`@import 'props.media.css';
@import 'props.supports.css';
`)
Object.keys(mainbundle).forEach(filename => {
entry.write(`@import '${filename}';\n`)
Expand Down
9 changes: 7 additions & 2 deletions build/to-stylesheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {

let appendedMeta = ''

if (filename.includes('shadows') || filename.includes('animations')) {
if (filename.includes('shadows')) {
file.write(`@import 'props.media.css';\n\n`)
} else if(filename.includes('animations')) {
file.write(`@import 'props.media.css';\n`)
file.write(`@import 'props.supports.css';\n\n`)
}

if (filename.includes('shadows')) {
Expand Down Expand Up @@ -40,7 +43,9 @@ ${dark_propsMeta}

if (prop.includes('animation')) {
let keyframes = props[`${prop}-@`]
appendedMeta += keyframes
if(keyframes != undefined) {
appendedMeta += keyframes
}
}

if (prefix && prefix !== "''") {
Expand Down
4 changes: 2 additions & 2 deletions docsite/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1386,10 +1386,10 @@ input[type="range"] {
}

.shake-fade-combo {
--animation-slide-left-fade-in-shake-y:
--animation-slide-start-fade-in-shake-y:
var(--animation-shake-y),
var(--animation-fade-in),
var(--animation-slide-in-left);
var(--animation-slide-in-start);
}

.push-out-combo {
Expand Down
26 changes: 13 additions & 13 deletions docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2467,8 +2467,8 @@ <h5>The Props</h5>
--animation-fade-{in,out}-bloom
--animation-shake-{x,y}

--animation-slide-out-{up,down,left,right}
--animation-slide-in-{up,down,left,right}
--animation-slide-out-{up,down,start,end}
--animation-slide-in-{up,down,start,end}
Comment on lines +2470 to +2471
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
--animation-slide-out-{up,down,start,end}
--animation-slide-in-{up,down,start,end}
--animation-slide-out-{up,down,left,right,start,end}
--animation-slide-in-{up,down,left,right,start,end}


--animation-spin
--animation-ping
Expand All @@ -2487,7 +2487,7 @@ <h5>Keyframe Effect Examples</h5>
to { opacity: 1 }
}

@keyframes op-slide-out-right {
@keyframes op-slide-out-end {
to { transform: translateX(100%) }
}

Expand Down Expand Up @@ -2608,8 +2608,8 @@ <h6>Slide Out Down</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-out-right">
<h6>Slide Out Right</h6>
<div class="animation-demo-target" data-animation="slide-out-end">
<h6>Slide Out End</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2618,8 +2618,8 @@ <h6>Slide Out Right</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-out-left">
<h6>Slide Out Left</h6>
<div class="animation-demo-target" data-animation="slide-out-start">
<h6>Slide Out Start</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand Down Expand Up @@ -2648,8 +2648,8 @@ <h6>Slide In Down</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-in-right">
<h6>Slide In Right</h6>
<div class="animation-demo-target" data-animation="slide-in-end">
<h6>Slide In End</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2658,8 +2658,8 @@ <h6>Slide In Right</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-in-left">
<h6>Slide In Left</h6>
<div class="animation-demo-target" data-animation="slide-in-start">
<h6>Slide In Start</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand Down Expand Up @@ -2778,7 +2778,7 @@ <h6>Slide Fade</h6>

<div class="animation-pair">
<!-- data-starting-styles="opacity:0" -->
<div class="animation-demo-target shake-fade-combo" data-animation="slide-left-fade-in-shake-y">
<div class="animation-demo-target shake-fade-combo" data-animation="slide-start-fade-in-shake-y">
<h6>Shake In</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
Expand All @@ -2793,7 +2793,7 @@ <h6>Shake In</h6>
animation:
var(--animation-shake-y),
var(--animation-fade-in),
var(--animation-slide-in-left);
var(--animation-slide-in-start);
}
</code></pre>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'props.media.css';
@import 'props.supports.css';
@import 'props.fonts.css';
@import 'props.sizes.css';
@import 'props.easing.css';
Expand Down
29 changes: 17 additions & 12 deletions src/props.animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'props.media.css';
@import 'props.supports.css';

:where(html) {
--animation-fade-in: fade-in .5s var(--ease-3);
Expand All @@ -9,12 +10,16 @@
--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-out-end: slide-out-end .5s var(--ease-3);
--animation-slide-out-right: var(--animation-slide-out-end);
--animation-slide-out-start: slide-out-start .5s var(--ease-3);
--animation-slide-out-left: var(--animation-slide-out-start);
Comment on lines +13 to +16
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice job matching these all up 👍🏻

--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-end: slide-in-end .5s var(--ease-3);
--animation-slide-in-right: var(--animation-slide-in-end);
--animation-slide-in-start: slide-in-start .5s var(--ease-3);
--animation-slide-in-left: var(--animation-slide-in-start);
--animation-shake-x: shake-x .75s var(--ease-out-5);
--animation-shake-y: shake-y .75s var(--ease-out-5);
--animation-spin: spin 2s linear infinite;
Expand Down Expand Up @@ -53,23 +58,23 @@
@keyframes slide-out-down {
to { transform: translateY(100%) }
}
@keyframes slide-out-right {
to { transform: translateX(100%) }
@keyframes slide-out-end {
to { transform: translateX(calc(100% * var(--isLTR))) }
}
@keyframes slide-out-left {
to { transform: translateX(-100%) }
@keyframes slide-out-start {
to { transform: translateX(calc(-100% * var(--isLTR))) }
}
@keyframes slide-in-up {
from { transform: translateY(100%) }
}
@keyframes slide-in-down {
from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
from { transform: translateX(-100%) }
@keyframes slide-in-end {
from { transform: translateX(calc(-100% * var(--isLTR))) }
}
@keyframes slide-in-left {
from { transform: translateX(100%) }
@keyframes slide-in-start {
from { transform: translateX(calc(100% * var(--isLTR))) }
}
@keyframes shake-x {
0%, 100% { transform: translateX(0%) }
Expand Down
40 changes: 22 additions & 18 deletions src/props.animations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,18 @@ export default {
@keyframes slide-out-down {
to { 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-left": "slide-out-left .5s var(--ease-3)",
"--animation-slide-out-left-@": `
@keyframes slide-out-left {
to { transform: translateX(-100%) }
}`,
"--animation-slide-out-end": "slide-out-end .5s var(--ease-3)",
"--animation-slide-out-end-@": `
@keyframes slide-out-end {
to { transform: translateX(calc(100% * var(--isLTR))) }
}`,
"--animation-slide-out-right": "var(--animation-slide-out-end)",
"--animation-slide-out-start": "slide-out-start .5s var(--ease-3)",
"--animation-slide-out-start-@": `
@keyframes slide-out-start {
to { transform: translateX(calc(-100% * var(--isLTR))) }
}`,
"--animation-slide-out-left": "var(--animation-slide-out-start)",
"--animation-slide-in-up": "slide-in-up .5s var(--ease-3)",
"--animation-slide-in-up-@": `
@keyframes slide-in-up {
Expand All @@ -75,16 +77,18 @@ export default {
@keyframes slide-in-down {
from { transform: translateY(-100%) }
}`,
"--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-end": "slide-in-end .5s var(--ease-3)",
"--animation-slide-in-end-@": `
@keyframes slide-in-end {
from { transform: translateX(calc(-100% * var(--isLTR))) }
}`,
"--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-right": "var(--animation-slide-in-end)",
"--animation-slide-in-start": "slide-in-start .5s var(--ease-3)",
"--animation-slide-in-start-@": `
@keyframes slide-in-start {
from { transform: translateX(calc(100% * var(--isLTR))) }
}`,
"--animation-slide-in-left": "var(--animation-slide-in-start)",
"--animation-shake-x": "shake-x .75s var(--ease-out-5)",
"--animation-shake-x-@": `
@keyframes shake-x {
Expand Down
11 changes: 9 additions & 2 deletions src/props.supports.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,16 @@
:where(html) {
--isLTR: 1;
--isRTL: -1;

&:dir(rtl) {
/* PostCSS compiles this to [dir="rtl"] :where(html) for older browsers, which doesn't work */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding 'dir-pseudo-class': false, to https://github.com/argyleink/open-props/blob/main/postcss.config.cjs#L17 will resolve this. postcss is attempting to polyfill it and we want just nesting.

--isLTR: -1;
--isRTL: 1;
}

&[dir="rtl"] {
/* Force the dir attribute selector to attach to :where(html) */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a nice backup to using :dir() anyway, we'll do it ourselves in our own nesting way and not use the polyfill that's part of postcss-preset-env

--isLTR: -1;
--isRTL: 1;
}
}
}
2 changes: 1 addition & 1 deletion test/basic.test.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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, 1642)
t.is(Object.keys(OpenProps).length, 1650)
})

test('Import should have animations', async t => {
Expand Down