fade-in-bloom and fade-out-boom for #255

[hchiam]

demo: https://codepen.io/hchiam/pen/bGvjoev
(hey, sorry for the delay, got distracted earlier today)

[hchiam]

Ready for review. Not sure if 1086 needs to be edited in the test file:
https://github.com/argyleink/open-props/runs/7760228885?check_suite_focus=true#step:7:32

test('Should have an all included import', t => {
  t.is(Object.keys(OpenProps).length, 1086)
})

[argyleink]

awesome, looks good! thanks a bunch, this'll be a cool addition. bloom-out looks nice, great work.

todo:

• update docsite/index.html animations section to have a demo
• update docsite "The Props" section with the bloom fades
• update the test to account for the new props (1094)

I feel like only the test update is required of you, I can update the docsite. But if you're down to tackle the docsite additions I'd be happy to merge it all in one PR 🙂

[hchiam]

agreed, i'll update the count in the test, and i'll leave the docsite update to you @argyleink

[hchiam]

i can confirm that the +8 in the count (from 1086 to 1094) is coming solely from the changes in this PR, because when i revert (and run yarn bundle; yarn test), the test passes:

What confuses me is why there's +8 instead of just +4

EDIT: i see now, it's double what i expected because it generates both CSS and JS keys:

1. '--animation-fade-in-bloom'
2. '--animation-fade-in-bloom-@'
3. '--animation-fade-out-bloom'
4. '--animation-fade-out-bloom-@'
5. animationFadeInBloom
6. 'animationFadeInBloom@'
7. animationFadeOutBloom
8. 'animationFadeOutBloom@'

[hchiam]

Ready for review. Updated test. I'll leave the docsite update to you, thanks!

[argyleink]

🤘🏻

[argyleink]

just pushed updates to the docsite and published a new OP version 👍🏻

i'm curious if you think there's a nice way to make the brightness light/dark contextual? like in a dark theme instead of blooming white it blooms grey or black? i tried a couple things, seems like it could work nice, but didnt find a happy spot for it. thoughts?!

[hchiam]

oooh nice we def want to make this play nice with dark mode - maybe a css variable for the brightness, dependent on the `--OSdark` dark mode var?

…

On Thu., Aug. 11, 2022, 14:14 Adam Argyle, ***@***.***> wrote: just pushed updates to the docsite and published a new OP version 👍🏻 i'm curious if you think there's a nice way to make the brightness light/dark contextual? like in a dark theme instead of blooming white it blooms grey or black? i tried a couple things, seems like it could work nice, but didnt find a happy spot for it. thoughts?! — Reply to this email directly, view it on GitHub <#260 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEKKWSYKHGUYA2KZHSLVWNLVYVNL5ANCNFSM56DD3SLA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[argyleink]

yep! shadows does it, can follow that path. but yeah, if you find a great way to make it adaptive to color-scheme then we can deploy an upgraded version 🙂

[hchiam]

oh, make the bloom light/dark dependent, not simply on dark mode, but on any color-scheme, eh? very interesting. i might not be able to work on this until next week, so feel to work on it meanwhile