Refactoring my garden's styles

Stream of thoughts; planning refactor & things I want it to achieve

location Raleigh,  NC,  US
  1. Plan out all the palette mappings. (What do I have now?)
  2. Do four levels: being/who, existing/what, naming/when, meaning/{where, how, why}.
  3. Being is raw variables. Naming is mapping. Meaning is context.

Being:

  • the palette.
  • the palette is based in a darkest to lightest grouping, to have 5-7 colors to form the color system.
  • consider this the "horizontal axis" of each color.
  • individual swatches are the foundation, and this is the foundation. Could call it a cell.

Existing:

  • these are values mapped. Also a lightest to darkest.
  • consider this the vertical axis of each color.
  • highlight the swatch the palette is based on.

Naming

One more step is missing: the translation to -figure/-ground relationships.

The horizontal and vertical axes make a quadrant chart that can be used to map good contrasts, and an easy tool visualization to cycle through ALL the pairings, some of the pairings (by corresponding contrasts).

These are things like:

  • primary–quinary -ground values.
  • primary–quinary -figure values
  • primary–quinary frills values (map everything to logo class naming)

Meaning:

  • these are component specific.

This would be like button-bg or hed-color, etc.

e.g. 

:root{
  --button-filled-ground-cta: var(--primary-ground)
  --button-filled-figure-cta: car(--secondary-figure)
  --button-filled-frills-cta: var(--tertiary-figure)
 --button-filled-ground-hover-cta: car(--secondary-ground)
}

etc.