Document SCSS color naming guidelines

[iandunn]

Problem

It's not obvious to me how the names in base-styles/_colors.scss and other SCSS files are chosen.

• Why do some names describe the color itself (e.g., $dark-opacity-light-200) while others describe the usage of the color (e.g., $get-caption-background-color).
• Why do some names describe the color, but not include number at the end? e.g., $subtle-light-gray
• How do I determine if the specific hex value I want to use should be considered "medium" or "dark"? Are those specific references to Core's style guide -- in which case they wouldn't necessarily be relevant to plugins -- or is there some objective standard?
• How do I determine what the number at the end should be?

That confusion (and maybe inconsistency) makes it difficult to set a matching standard in plugins, and contribute to some areas of Gutenberg itself.

Proposed Solution

• Add a section to coding-guidelines.md describing the convention. If it's an external one, linking to a detailed document would be helpful as well.
• Add a comment at the top of _colors.scss mentioning that the convention is documented in coding-guidelines.md.

[skorasaurus]

very closely related: #7553

[jordesign]

Conversation on the naming and classes of CSS seems to have consolidated in #29568 - so I'll close this issue in favour of that one.