Revamp Guise Skeleton color designations.


In line with all of our CSS variables (including our semantic size designations in ) start with --guise-skeleton-, except for colors:

In addition the component color attributes don't start with "is".

Update all color designations to have the correct Guise prefix in line with GUISE-86, and switch to using the is- if appropriate.

See Also




Garret Wilson
September 17, 2020, 3:34 PM

Bulma uses e.g. is-primary, which fits with the idea of making attributes explicit. Bootstrap uses a text- prefix, e.g. text-primary, but that's less than ideal, as we want to use these colors generally and have the component know whether to apply it to text or background (as with a hero for the latter). Foundation uses just the name such as primary, which is what we've been using here so far.

We also had a problem earlier where the GlobalMentor styles just used e.g. warning for text, with a default, implicit icon prefix. Thus a <span class="warning">danger</span> would have a little warning symbol placed before it. But then trying to make a <button class="warning"></button> made the symbol show up, even if that was not desired for buttons.

So it may be important to distinguish between something being a warning, and something having the warning colors. Or maybe the real problem is that we want to distinguish between a button being a warning, and the button text being a warning. Maybe that's what Bootstrap is trying to do when it uses text-warning as the CSS class.

I had thought seriously at one point about using a status- prefix for buttons to indicate what sort of status they report or type of action they perform. But that would only work for buttons, and not for other types of components.

Perhaps the solution is to use is-warning et. al. for component properties, and to use just warning for text that is a warning, such as <span class="warning">danger</span>. That would probably solve the problem of having a warning icon on a button when we only want it on text. But would an <aside> then use warning or is-warning? GlobalMentor documents have been using <aside class="warning"> a lot, expecting the warning icon to appear in the aside. Maybe <aside> should be considered a component. Or maybe instead we need to leave plain <aside> alone and make an alert component (which could be used with <aside>)? That would be <aside class="alert is-warning">. In fact this may be the best approach, rather than hijacking plain HTML alert. It looks like this is what Bootstrap does. In fact there is even an alert WAI-ARIA role. Oh, but reading the semantics of the WAI-ARIA alert, it seems like it may not be appropriate for a static box. Maybe we should just consider <aside> to be like a component and be styled with is-warning by itself.

Lastly we need to consider whether we use is-primary, is-warning, and the like; or if we want something more meaningful. What do these designations mean, anyway? Are they roles? Categories? Colors? Terms like "info", "warning", and "error" are like log levels—they indicate some sort of notification priority level. But what about "primary" and "success"? I suppose "success" is like a status; in fact "info", "warning", and "error" are sort of like status as well. They are status notifications. But "primary"? It seems to designate a semantically different type of thing. Are "primary" and "secondary" more site color designations? Or for a button, does it designate which is the "primary" or default button?

Maybe we should consider more deeply these categories, and maybe split out "primary"/"secondary" as different types of designations. The others maybe should be "force" or "level" or "priority" or "weight" or some such.


Garret Wilson


Garret Wilson




Fix versions