Add color issues section #146
Conversation
✅ Deploy Preview for oddcontrast ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
This will need some design help from @stacyk or @dvdherron - there was some conflicts with the other definition list in use. I added the styles to the component, but assume they should be located elsewhere. |
|
Note to the designers- I added a second issue in #145, which adds some additional complexity, so it may be worth styling with that content in mind. |
Co-authored-by: david herron <[email protected]>
* main: sveltekit does not support vite v5 yet pin back stylelint for now Automated dependency upgrades Automated dependency upgrades Bump @adobe/css-tools from 4.3.1 to 4.3.2
* color-issues: sveltekit does not support vite v5 yet pin back stylelint for now Automated dependency upgrades Automated dependency upgrades Bump @adobe/css-tools from 4.3.1 to 4.3.2
|
@jgerigmeyer I am assigning this to you because I see you left comments but haven't approved this PR yet. |
There was a problem hiding this comment.
I thought this was an issue that was fixed, but I see that Safari adds their own marker, so what I thought was just a thing in progress was actually a browser difference.
I'll see what we can do since I use Safari as a primary, might be easier for me to test.
src/sass/patterns/_disclosure.scss
Outdated
| transform: rotate(0deg); | ||
| transition: all 1s ease-out 100ms; | ||
|
|
||
| [open] & { | ||
| transform: rotate(90deg); | ||
| } |
There was a problem hiding this comment.
@mirisuzanne @dvdherron Is there a bug in Safari that doesn't allow this before pseudo element to transition when we add the [open] attribute? I am able to see the transitions if I just toggle the properties (see screen recording) but not when I click to open/close it. I made it 1s for testing purposes so it is obvious.
css-safari-transition.mov
There was a problem hiding this comment.
Made an issue for future tracking if we choose to: https://github.com/orgs/oddbird/projects/3/views/1?pane=issue&itemId=49346644
There was a problem hiding this comment.
I tried searching for a bug related to this but haven't been able to find anything just yet. I know it shouldn't be needed but does adding a vendor prefix change anything @stacyk ?
There was a problem hiding this comment.
I just tried the vendor prefix (didn't work) and I couldn't find anything either last week, but this morning I found this: https://bugs.webkit.org/show_bug.cgi?id=213349
So it looks like it was a bug, then it was fixed, and then it came back in version 16. I don't know if it is helpful to send them our use case once this is merged?
There was a problem hiding this comment.
LGTM 🚀
@mirisuzanne @dvdherron Is there a bug in Safari that doesn't allow this before pseudo element to transition when we add the [open] attribute? I am able to see the transitions if I just toggle the properties (see screen recording) but not when I click to open/close it.
@stacyk Is this issue blocking merge for this PR? Or something we want to capture in a new story?
|
We shouldn't block the pr because of the transition, but i think there was a ridiculous duration and delay on that transition for testing that would need to be adjusted. |
src/sass/patterns/_disclosure.scss
Outdated
| transform: rotate(0deg); | ||
| transition: all 1s ease-out 100ms; | ||
|
|
||
| [open] & { | ||
| transform: rotate(90deg); | ||
| } |
There was a problem hiding this comment.
Made an issue for future tracking if we choose to: https://github.com/orgs/oddbird/projects/3/views/1?pane=issue&itemId=49346644
|
@stacyk I think my latest changes address everything except for the possible Safari transition bug. If you want to give this a last look I think this is soon ready to merge. |
Description
Adds a section with space for more info on known color issues. Currently, only the Gamut mapping issue is documented- the Alpha caveats should be added with the related PRs.
Fixes #143
Steps to test/reproduce
Show me