Colour utility

[nastiatikk]

Status: Ready for Review Reviewers: @ry5n @kpeatt @avelinet @cole-sanderson @yourpalsonja @jeffkamo @mlworks

Changes

u-text-accent, u-text-success and u-text-error utilities added to _text.scss

Proof of existence

Sometimes we need to add just text colour to a word. With component approach we don't have many template files and sometimes we create them for just one line. This is where colour utility could help us.

I couldn't find a way to avoid using $text__accent variables. Is there a way to use Vellum variables without it?

Todos:

• [x] Designer +1 (@jeffkamo)
• [x] Designer +1 (@ry5n)

[ry5n]

I’m not a big fan of adding utils for text colors. I’m just not convinced that enough projects need them. (You can always add what you need in the project, since these are so simple.)

[jeffkamo]

I dunno, I've found myself in scenarios where all I needed to do was change the color of some text. Options being:

a. Create a new component (seems a bit heavy handed for just a color) b. Add to an existing component (may or may not be valid depending on circumstances) c. Add some page styles (higher specificity bandaid) d. Use a utility class (it's another utility class, doesn't make sense in places that could change)

So ya, I dunno... I'm not totally against it... I understand why some people are against it... maybe I'm just lazy haha.

[nastiatikk]

@ry5n Can you explain more why you're not a fan of adding utils for text colours?

We have a lot of very simple utils like margins, all-caps, floats, visibility, text-align. Colours look like another one simple util for those who needs it.

[ry5n]

I should clarify: I am definitely for creating text colour utilities. But I am not sure they belong in our official text utils, mostly because the colours you need will vary between projects. The utils we have here are invariant: all-caps, text-align are useful on any project.

I’m not opposed to them if others feel these ones would be often used.

[avelinet]

@ry5n i think the 3 colours @nastiatikk is proposing are pretty standard and used on most projects. At the very least the success and error ones.

[nastiatikk]

@avelinet is right, probably accent-colour isn't wide used and we can remove it. But success and error colours are used in the single selected words often enough to put them to the util.

[ry5n]

OK, cool. I don’t think we’ve done config variables before for utilities. Wondering if we should add a u- variable prefix to distinguish this from a hypothetical Text component:

$u-text__success: …;

[jeffkamo]

Thanks for clarifying @ry5n. Sounds like we've come to a reasonable concensus. Once that CSS is recompiled and commited, :+1:

[ry5n]

Also want to get thoughts from everyone on the variable name suggestion above.

[jeffkamo]

it's probably a good idea to namespace the utility vars, otherwise they look like they are referencing components.

[ry5n]

Agreed.

[nastiatikk]

u-text__something is a good idea to separate them from component variables

[jeffkamo]

:+1:

[ry5n]

+1