Change separator lines opacity

[ludoboludo]

Why are these changes introduced?

Fixes #22

What approach did you take?

Changed some of the existing value to be 0.08 instead of 0.2.

Other considerations

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[kmeleta]

Couple quick questions

1. Should the footer borders be updated here as well? https://screenshot.click/19-48-rt6fv-c6p0b.png

2. I'd kind of expect the cart items to receive this change as well https://screenshot.click/19-45-fjcs7-a28o1.png. There may be a reason this wasn't called out in the ticket but wanted to float that.

[martinamarien]

On shops with light backgrounds, the line contrast is more defined. On darker backgrounds, the line is almost invisible. In the screenshot I have provided, there are lines around the product cards and a separator line below the header. Are we sure we want to change the line opacity to 8%?

[ludoboludo]

On shops with light backgrounds, the line contrast is more defined. On darker backgrounds, the line is almost invisible. In the screenshot I have provided, there are lines around the product cards and a separator line below the header. Are we sure we want to change the line opacity to 8%?

Oof, good point 🤔 cc: @Guillaumegranger1

[Guillaumegranger1]

I know it makes the theme less scalable, but I think we should move forward with it because it was requested by stakeholders and I don't feel like fighting that battle. Or can we implement the update as is, and see later if we can slightly bump up the opacity? Is it easy to do? ...like changing a variable in one place? @ludoboludo

[ludoboludo]

Yes, it wouldn't be hard to change later. It's not something in one place but a few. Doesn't take long to figure out which ones though.

[chrisberthe]

Looks good. @melissaperreault would the cart notification border be part of this colour update as well? I noticed this variation so questioning it here:

[kmeleta]

If we're moving forward with this change as is, LGTM

[ludoboludo]

Looks good. @melissaperreault would the cart notification border be part of this colour update as well? I noticed this variation so questioning it here:

image

I assumed we didn't want to do it based on this: screenshot from the issue. I had tested and it looked pretty faint in contrast with the background but I see how it's not seemless with the rest of the header border

[melissaperreault]

Looks good. @melissaperreault would the cart notification border be part of this colour update as well? I noticed this variation so questioning it here:

I assumed we didn't want to do it based on this: screenshot from the issue. I had tested and it looked pretty faint in contrast with the background but I see how it's not seemless with the rest of the header border

I actually find it detaches and help emphasize the component so I would keep it as is 👌 We also have the interest to revise the overlay patterns across similar experience from this issue #462

[melissaperreault]

Thanks Ludo, took a look and looks good!

I think we could also make the change in My account tables to have a similar feeling from the Cart. Example of the outcome.

This would affect the Account order history and the order detail tables I believe.

[ludoboludo]

@melissaperreault I was making the changes and thought I'd bring something up. It has some continuity when doing it, so it matches the footer and header but the role of the borders here also plays a role in terms of accessibility.
It helps keep track of which order you're looking at. So if the lines are pretty faint it will make it harder 🤔
So it might be worth keeping it as is.
Let me know what you think, I can loop Scott in if necessary 👍

[melissaperreault]

It has some continuity when doing it, so it matches the footer and header but the role of the borders here also plays a role in terms of accessibility.

I understand the point you raise but believe it would be aligned with the overall changes and minimal aesthetic to harmonize in those templates too. To me, the borders are already not accessible (low contrast) at 20% and we have even fewer separator in the Cart template which wears the 8% already.

This might be a bigger conversation whether our table are easy to consult through Fable testing to inform how we can improve legibility, but it would require probably more than increasing the opacity of the borders.

I was not part of the effort to change some of the border opacity so I'd like to loop in @Oliviammarcello and @Guillaumegranger1 , perhaps they did consider keeping them at 20%? 🙏

[melissaperreault]

LGTM! 🎉 🙏

[ludoboludo]

@kmeleta & @chrisberthe I'd need your approval again. I just changed the opacity on the account page for the table or order page

[Guillaumegranger1]

Yes! 🚢🚀