adjust leaf glow colors and sizing

[rlskoeser]

---

Here are the relevant files for you to adjust colors and size of the glow. All the scss files are under themes/timetree/assets.

• colors are all defined in scss/base/_colors.scss
• mixin for leaf states; takes a parameter for branch to select correct set of colors scss/pages/_timetree.scss

(the links will take you to specific lines that are most relevant; these changes have now been merged into develop)

I think I copied the colors correctly from Figma, but please confirm. You'll see I have commented out rgba versions of the colors, which were available in the Figma styles; I can't remember why I didn't use those. Could be useful to play with the rgba versions and the opacity.

I wonder if the browsers automatically decrease the opacity for the color used to generate the glow / shadow?

Not sure what's going on with Safari, I would guess it doesn't properly support the css filter we have to use with SVG path elements. I found an issue suggesting problems with filter + drop-shadow on Safari, but IDK if this is exactly our problem.

Originally posted by @rlskoeser in #98 (comment)

[rlskoeser]

@gissoo I adjusted the size of the leaf glow colors in one of my recent updates (I just halved all the numbers, since our leaf size is half the size of your design in Figma). Do you still have concerns about the colors? Also, any thoughts on what to do about Safari, where the glow isn't working at all?

[gissoo]

@rlskoeser thank you! I still have concerns but haven't gotten to it yet. I'll work on this next week

[rlskoeser]

@gissoo if we want to use an svg filter effect (which seems like a good option, they seem to be much more powerful than css filters), then I think we should define a preliminary svg in the template code.

Examples:

• https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization/
• https://codepen.io/dipscom/pen/mVYjPw

The svg should go roughly here: https://github.com/Princeton-CDH/lenape-timetree/blob/develop/layouts/index.html#L14-L16

I'll have to update the d3.js code to find and update the existing svg instead of creating it, and then when highlighting leaves the code will need to enable/disable the filter.

[gissoo]

@rlskoeser thank you! Just to document here:

• I tested by making the opacity transparent and saw the white glow was the only thing that remained.
• I tried everything I found for CSS yesterday but nothing worked.

I agree on trying the SVG effect, hopefully it will get rid of the white glow. I came across this one yesterday which uses SVG, so I can try this as well

• https://www.visualcinnamon.com/2016/06/glow-filter-d3-visualization/

[gissoo]

@rlskoeser I spent a lot of time on this later last week but couldn't get it to work. Here is what I did:

• copied the code from the second link into the layouts html file and lines you mentioned,

• commented out the part below on the timetree.scss file and tried to link to the layouts html file to test the filter and see if anything works.

But I don't know if I'm linking correctly, or if I should just comment out everything on the scss and do everything in the html file. I didn't think it would be this complicated :(

[rlskoeser]

Sorry this is difficult, Gissoo, I wondered if it might be. The SVG filter can't be applied in CSS, it has to be set within the SVG (and will have to be toggled with javascript to make it dynamic).

Were you able to preview at all if this filter does what you want? Do you want me to try implementing it? Or would it work to try implementing this filter in Figma?

I guess we'll need a different filter for each leaf color. That's not too bad, though.

[gissoo]

@rlskoeser ahh it needs to be within the leaf svg??
I couldn't preview it at all!
I don't think there is a way to implement it in Figma 👀 – I'll come talk to you about this

[rlskoeser]

resolved in PR #188