| ## Colors |
| |
| --- |
| |
| Prefer the use of Color Intent over Color variables where possible. Color Intents are themed and |
| adjust for dark mode. |
| |
| ### Gray {#colors-gray} |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-1"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-2"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-3"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-4"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-5"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-6"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-7"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-8"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-9"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--gray-10"></go-color> |
| </span> |
| |
| ### Brand {#colors-brand} |
| |
| <span style="display:contents;"> |
| <go-color id="--turq-light"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--turq-med"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--turq-dark"></go-color> |
| </span> |
| |
| ### Other {#colors-other} |
| |
| <span style="display:contents;"> |
| <go-color id="--blue"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--blue-light"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--black"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--green"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--green-light"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--pink"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--pink-light"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--purple"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--purple-light"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--slate"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--white"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--yellow"></go-color> |
| </span> |
| |
| <span style="display:contents;"> |
| <go-color id="--yellow-light"></go-color> |
| </span> |