Vocabulary: Helper classes should be available to full color palette

[Audiosutras]

Problem

Currently helper classes (has-text-, has-background-) are only applied to Brand colors. The full color palette should be able to use these helper classes.

[dhruvkb]

@Audiosutras is there a particular use case for this? We closed #412 because there wasn't enough reason to build this.

[Audiosutras]

Hello @dhruvkb,

For the cc-licenses project we chose to remove all node packages. This was done largely because the solution we are building only required Django outside of styling. Using the proposed installation methods shown on this page (https://cc-vocabulary.netlify.app/?path=/docs/vocabulary-usage--page) we chose to included vocabulary in the base.html template of the project (https://github.com/creativecommons/cc-licenses/blob/c1c191c9c034c5cea3b5b933efe50b79c079bbf0/cc_licenses/templates/base.html#L13).

Based on our implementation, we cannot import the color.scss file and use the non-brand color classes directly because we aren't supporting scss. Currently we are having to style elements that use non-brand color styling as so https://github.com/creativecommons/cc-licenses/blob/c1c191c9c034c5cea3b5b933efe50b79c079bbf0/cc_licenses/templates/includes/about_cc.html#L21-L26.

I added the above issue because it seemed from reading the docs that there was an expectation that this style guide was going to be imported using npm and listed in package.json (and you have node_modules) instead of a cdn and listed in an html file. In our case we are using the cdn. Based on meetings with @kgodey and the cc-team, it was emphasized that we should do our best to use Vocabulary for styling. I proposed the issue above because helper classes covering the full color palette would be beneficial to developers using vocabulary just through the cdn and we could avoid using rgb values directly in the project.

100% ok with not implementing this!👍

[dhruvkb]

Surely copying RGB values is a sub-optimal solution. Apart from the helpers from the Brand colors, Vocabulary also supports the color helpers for other colors as defined in Bulma.

What I actually wanted to ask was which colors other than these do you need and are unsupported at present?

[Audiosutras]

Thanks @dhruvkb, I better understand now. I'm going to try has-text-info-light which is defined in Bulma's documentation. Thanks.

This ticket should be closed. Misunderstanding on my part.

[dhruvkb]

Misunderstanding on my part.

..and lack of better documentation on ours. Since all code is technical debt, it's always a pleasure when you can extract more value from existing tech.

[zackkrida]

@dhruvkb could you help me understand the best way to use one of the 'neutral' colors in a project? This came up for me in search. Are those 'neutral' colors part of the bulma built in colors?

[kgodey]

@dhruvkb could you open an issue for improving the documentation about this based on @Audiosutras and @zackkrida's questions?

[dhruvkb]

@zackkrida we should ideally be overriding (#425) the corresponding colors in Bulma and then using Bulma's helper classes for the neutral colors. The documentation for that should be updated once the predefined colors are overriden.

@kgodey yes, I'll open the issue and link to all other issues that are in the same theme as this one.

[dhruvkb]

@zackkrida we do override those colors in the current deployed version and so you can directly use Bulma's helpers to set background and text color.

See color_overrides.scss