[sr] bentos wave 3#6228
Conversation
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
Commits
|
| .dark { | ||
| a.standalone-link { | ||
| &::after { | ||
| filter: invert(1); |
There was a problem hiding this comment.
Is this the actual suggestion from Design? I used it in some POCs, but I was hoping colors get defined from the S2A tokens
There was a problem hiding this comment.
No, it's not. It was a very easy way to change the icon color for dark mode since it comes across as an <img>. I haven't seen any designs related to dark mode.
The link color is marked as black (#000). The icon matches. This currently meets that requirement. I say we keep it easy for now and can update if new requirements come in.
|
|
||
| &.bento .explore-card { | ||
| border-radius: var(--s2a-border-radius-md); | ||
| border: 2px inset rgb(255 255 255 / 10%); |
There was a problem hiding this comment.
Any chance we can get design to standardize to an S2A token?
There was a problem hiding this comment.
I'll check. The design file had this raw value.
| .explore-card-foreground { | ||
| aspect-ratio: 1 / 1.2; | ||
| transition: filter 0.3s ease-in-out, transform 0.3s ease-out; | ||
| will-change: transform; |
There was a problem hiding this comment.
Transition should already send properties to the compositor, I'm not sure this adds any benefit or if the same operation would now be performed twice.
There was a problem hiding this comment.
I added this after I noticed the hover state was making the text go a little blurry. This corrected that.
| prodIcon.closest('p').classList.add('icon'); | ||
| if (prodIcons.length) { | ||
| const iconPara = prodIcons[0].closest('p'); | ||
| iconPara?.classList.add('icon'); |
There was a problem hiding this comment.
Is there any clarity on whether we might have multiple icons? I've heard that could be a possibility, maybe it's a good time to plan for that and make this an icons wrapper
There was a problem hiding this comment.
I did see some older designs. Seems to be removed for the start of wave 3. But, i could see this coming in during VQA or later.
This does support multiple icons. Here's a working example of that on other page I was testing. Under the "The latest technology, always" section.
| prodIcons.forEach((icon) => { | ||
| if (isSvgUrl(icon.src)) icon.src = getFederatedUrl(icon.src); | ||
| const para = icon.closest('p'); | ||
| if (para && para !== iconPara) { |
There was a problem hiding this comment.
Nit: early return
| if (para && para !== iconPara) { | |
| if (!para || para === iconPara) { |
|
|
||
| &.bento .explore-card { | ||
| border-radius: var(--s2a-border-radius-md); | ||
| border: 2px inset rgb(255 255 255 / 10%); |
There was a problem hiding this comment.
For color there is no 10%, either 12% or 8%.
| border: 2px inset rgb(255 255 255 / 10%); | |
| border: var(--s2a-border-width-md) inset var(--s2a-color-transparent-white-12)); |
| if (prodIcons.length) { | ||
| const iconPara = prodIcons[0].closest('p'); | ||
| iconPara?.classList.add('icon'); |
There was a problem hiding this comment.
Nit: Do we need this if ?
| if (prodIcons.length) { | |
| const iconPara = prodIcons[0].closest('p'); | |
| iconPara?.classList.add('icon'); | |
| const iconPara = prodIcons[0]?.closest('p'); | |
| iconPara?.classList.add('icon'); |
5 participants
stand-alonelink icon to work with dark modeResolves:
Test URLs: