1046: Add color utility classes #1053
Conversation
| ); | ||
|
|
||
| @each $name, $var in $text-colors { | ||
| .u-text-#{$name} { |
There was a problem hiding this comment.
Does KSS work inside a loop?
There was a problem hiding this comment.
A: Not quite… I wondered whether the variables would be processed.
There was a problem hiding this comment.
Yeah, I went down a rabbit hole about this. It turns out Sass isn't built to dynamically generate comments, unfortunately.
| } | ||
|
|
||
| .u-fill-#{$name} { | ||
| fill: $var; |
There was a problem hiding this comment.
What are your thoughts on using !important on these utilities? I popped a fill class on the logo, but because they're imported early on, it was superseded by c-logo__icon.
There was a problem hiding this comment.
I'd prefer to keep it off. I don't mind occasionally using color declarations outside of scope the utility classes, so long as there's a specific design need.
ericwbailey
left a comment
ericwbailey
left a comment
There was a problem hiding this comment.
I see you found the very half-baked styleguide 😅
| ); | ||
|
|
||
| @each $name, $var in $text-colors { | ||
| .u-text-#{$name} { |
There was a problem hiding this comment.
Yeah, I went down a rabbit hole about this. It turns out Sass isn't built to dynamically generate comments, unfortunately.
| } | ||
|
|
||
| .u-fill-#{$name} { | ||
| fill: $var; |
There was a problem hiding this comment.
I'd prefer to keep it off. I don't mind occasionally using color declarations outside of scope the utility classes, so long as there's a specific design need.
|
@ericwbailey Are there any further changes I can make to see this over the line? I'm not sure whether the original scope covered implementing the classes as well, but I am happy to do that – whether in this PR or a new branch. |
|
@danielmatthew Ah shoot, sorry about that. I've had a pretty demanding client so my attention has been all over the place. No changes needed, this is a great addition! Thank you again for your help. |
|
@ericwbailey No worries – I understand. Happy to look out for future 'help wanteds' 🥳 |
2 participants
This PR uses a map of the colour variables to create utility classes for
color,background-colorandfill.Closes #1046