Consider namespacing variables

[chuckhendo]

SASS variables are global, so they are available to (and can be overwritten by) anything. Some of our variable names are very simple (such as $space) and there's a reasonable chance of a collision with another library/the user's own code.

We should consider namespacing all variables with a $willow- prefix. This will greatly reduce the chances of a collision.

[slkennedy]

Did a quick review of Bootstrap, Semantic UI and Carbon Components - don't see any prefixing on their variables but I am seeing a naming pattern. We use patterning through our variables but we aren't being as consistent or purposeful about it as we could be. Here's the current state -

Constant Variables

pattern: $type-description(-version)
examples: $color-apple-red, $color-apple-red-dark, $font-family-primary, $space-inline-xl
prefix: none

Theme Variables

pattern: $prefix-purpose(-modifier)(-version)
examples: $theme-feedback, $theme-feedback-2, $theme-feedback-negative-2prefix:theme`

Component Variables

pattern: $prefix-component(-modifier)-property(-state)
examples: $component-button-background-color, $component-button-negative-background-color-hover
prefix: component

Instead of prefixing everything with $willow I purpose better defining the Constant Variable's pattern to mirror the other variables a little more. Like this:

Constant Variables

pattern: $prefix-type-description(-version)
examples: $constant-color-apple-red, $constant-color-apple-red-dark, $constant-font-family-primary, $constant-space-inline-xl
prefix: constant

Thoughts?

[chuckhendo]

True. But those are also established libraries... so they can get away with more stuff. I also don't like that they're not prefixed. If bootstrap's variables were prefixed, it would make our lives easier now during Willow dev, as we'd know what variables belong to them vs us :)

You know me - I like namespaces.

[slkennedy]

We can get away with whatever we want too! 😃 🎉

Previously prefixing to describe the variable ($constant, $theme, $component) has previously helped me see the purpose of a variable right away. I worry adding $willow might water down some of that understanding - $willow-component-button-negative-background-color-hover.

I honestly don't feel strongly about it either way, but want more input from others and also want to prioritize this into the backlog...probably needs to make v1 since it's a big break for any of the existing 0.x.0 versions.

@dbay24 @Keale2 @bollinghball @rebekahpadula @townivan @susannekappler

[slkennedy]

I made branches with this change so we could see the idea in action

Willow
Colonial Life Theme