search

argyleink / open-props

CSS custom properties to help accelerate adaptive and consistent design.
https://open-props.style
MIT License
4.78k stars 193 forks source link

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

Closed hchiam closed 2 years ago

hchiam commented 2 years ago

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

hchiam commented 2 years ago

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

hchiam commented 2 years ago

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:

image

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 commented 2 years ago

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

argyleink commented 2 years ago

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 commented 2 years ago

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 https://github.com/argyleink/open-props/pull/260#issuecomment-1212443320, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEKKWSYKHGUYA2KZHSLVWNLVYVNL5ANCNFSM56DD3SLA . You are receiving this because you authored the thread.Message ID: @.***>

argyleink commented 2 years ago

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 commented 2 years ago

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