static/shared/color/color-intent.md

## Color Intents

---

### Brand {#color-intent-brand}

<span style="display:contents;">
  <go-color id="--color-brand-primary"></go-color>
</span>

### Background {#color-intent-background}

<span style="display:contents;">
  <go-color id="--color-background"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-background-inverted"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-background-accented"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-background-highlighted"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-background-warning"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-background-alert"></go-color>
</span>

### Border {#color-intent-border}

<span style="display:contents;">
  <go-color id="--color-border"></go-color>
</span>

### Text {#color-intent-text}

<span style="display:contents;">
  <go-color id="--color-text"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-text-subtle"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-text-inverted"></go-color>
</span>

### Input {#color-intent-input}

<span style="display:contents;">
  <go-color id="--color-input"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-input-text"></go-color>
</span>

### Button {#color-intent-button}

<span style="display:contents;">
  <go-color id="--color-button"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-disabled"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-text"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-text-disabled"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-inverted"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-inverted-disabled"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-inverted-text"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-inverted-text-disabled"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-accented"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-accented-disabled"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-accented-text"></go-color>
</span>

<span style="display:contents;">
  <go-color id="--color-button-accented-text-disabled"></go-color>
</span>