[WIP] feat(tag): add color emphasis #131
Conversation
Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>
olaf-k
force-pushed
the
olaf/tag-color-emphasis
branch
from
4404222 to
099c7e1
Compare
R-Bower
left a comment
R-Bower
left a comment
There was a problem hiding this comment.
one question about colors
|
|
||
| &:active { | ||
| background: | ||
| linear-gradient(var(--color-interactive-background-ghost-pressed) 0 0), |
There was a problem hiding this comment.
I am confused by the linear gradient. Why use this instead of a static color?
There was a problem hiding this comment.
ah! that's a point I wanted to address with Steve on Monday.
it looks like Figma is stacking the base color with background/hover rather than using a dedicated one:
(blue medium is used for the border, forget about it)
so I transposed that mechanism the best I could (could've probably used color-mix too) in the meantime.
There was a problem hiding this comment.
ah yeah, I see now. Here's the Figma CSS for the blue emphasis hover state (I removed the var fallbacks for clarity)
background:
linear-gradient(
0deg, var(--color-interactive-background-ghost-hover) 0%,
var(--color-interactive-background-ghost-hover) 100%),
var(--color-category-blue-subtle)
);This continues for the other colors, but only the last var changes. So we could declare this linear gradient once and swap out the last color based on the emphasis.
&:hover {
background:
linear-gradient(
0deg, var(--color-interactive-background-ghost-hover) 0%,
var(--color-interactive-background-ghost-hover) 100%),
var(--hover-bg)
);
}
&[data-emphasis="blue"] {
--hover-bg: var(--color-category-blue-subtle);
}
&[data-emphasis="green"] {
--hover-bg: var(--color-category-green-subtle);
}
/* etc... */
R-Bower
left a comment
R-Bower
left a comment
There was a problem hiding this comment.
edit: see my previous review. Accidentally hit "Approve"
olaf-k
changed the title
No description provided.