First stab at variant utils docs

docs/docs/utilities/color.md

@@ -0,0 +1,44 @@
+---
+title: Color variants
+---
+
+You may have noticed that some Web Awesome components like `<wa-button>` allow you to change the color by using a `variant` attribute:
+
+{% for component in componentsBy.attribute.variant %}
+{% if component.fileSlug != "icon" or component.fileSlug != "icon-button" -%}
+- <a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
+{%- endif %}
+{%- endfor %}
+
+You can create the same effect on any element by using the variant utility classes:
+
+- `.wa-brand`
+- `.wa-neutral`
+- `.wa-success`
+- `.wa-warning`
+- `.wa-danger`
+
+Using these classes is a two-way handshake:
+they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/theming/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
+This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
+and all of our [native styles](/docs/native/) do so (where it made sense).
+
+For example, assume we wanted to make a custom `.callout` class with color variants.
+This is all we need to do:
+
+```html { .example }
+<p class="callout">This is a callout.</p>
+<p class="callout wa-brand">This is a callout.</p>
+<p class="callout wa-success">This is a callout.</p>
+<p class="callout wa-warning">This is a callout.</p>
+<p class="callout wa-danger">This is a callout.</p>
+
+<style>
+  .callout {
+	background-color: var(--wa-color-fill-quiet);
+	border: 1px solid var(--wa-color-border-quiet);
+	color: var(--wa-color-on-quiet);
+	padding: 1rem;
+  }
+</style>
+```

docs/docs/utilities/gap.md

@@ -14,6 +14,7 @@ tags: ["utilities", "layout"]
 </style>
 
 Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
+Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
 
 Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.