Rethink styling patterns

[charlesLoder]

Description

The use of CSS modules and native nesting could potentially be solving the same problem two ways, creating unnecessary overhead.

Determine a best practice for combining the two (if they should be combined)

Notes

Keep the practice of each component being a directory with an index.tsx and style.module.css file. That's good.

Nesting has some advantages, where like in the Input component, a color can be rescoped and then applied to multiple children:

.container {
  --accent-color: var(--clover-ai-colors-accentMuted);

  input {
    --input-border-color: var(--accent-color);
    border-color: var(--input-border-color);
  }
}

.container[data-error="true"] {
  --accent-color: var(--clover-ai-colors-error);
  --input-border-color: var(--clover-ai-colors-error);

  label {
    color: var(--accent-color);
  }

  .helperText {
    color: var(--accent-color);
  }
}

But nesting the error state makes it even clearer, imo.

But then how much nesting is too much nesting???