diff --git a/packages/webawesome/docs/_data/componentsBy.js b/packages/webawesome/docs/_data/componentsBy.js
deleted file mode 100644
index a40340286..000000000
--- a/packages/webawesome/docs/_data/componentsBy.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import components from './components.js';
-
-const by = {
- attribute: {},
- slot: {},
- event: {},
- method: {},
- cssPart: {},
- cssProperty: {},
-};
-
-function getAll(component, type) {
- let prop = type + 's';
- if (type === 'cssProperty') {
- prop = 'cssProperties';
- }
-
- return component[prop] ?? [];
-}
-
-for (const componentName in components) {
- const component = components[componentName];
-
- for (const type of ['attribute', 'slot', 'event', 'method', 'cssPart', 'cssProperty']) {
- for (const item of getAll(component, type)) {
- by[type][item.name] ??= [];
- by[type][item.name].push(component);
- }
- }
-}
-
-// Sort by descending number of components
-const sortByLengthDesc = (a, b) => b[1].length - a[1].length;
-
-for (const key in by) {
- by[key] = sortObject(by[key], sortByLengthDesc);
-}
-
-export default by;
-
-function sortObject(obj, sorter) {
- return Object.fromEntries(Object.entries(obj).sort(sorter));
-}
diff --git a/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js b/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js
deleted file mode 100644
index a52adb275..000000000
--- a/packages/webawesome/docs/docs/components/cheatsheet/cheatsheet.js
+++ /dev/null
@@ -1,76 +0,0 @@
-let url = new URL(location);
-const pushedURL = false;
-
-const matchers = {
- default(textContent, query) {
- return textContent.includes(query);
- },
-
- i(textContent, query) {
- return textContent.toLowerCase().includes(query.toLowerCase());
- },
-
- regexp(textContent, query) {
- query.lastIndex = 0;
- return query.test(textContent);
- },
-};
-
-matchers.iregexp = matchers.regexp; // i is baked into the query
-
-function filterByName(value) {
- const previousFilter = url.searchParams.get('name') || '';
- url = new URL(location);
-
- if (value) {
- const isRegexp = name_search_regexp.checked;
- const i = !name_search_i.checked;
- const query = isRegexp ? new RegExp(value, 'gmsv' + (i ? 'i' : '')) : value;
- const matcherId = (i ? 'i' : '') + (isRegexp ? 'regexp' : '');
- const matcher = matchers[matcherId] ?? matchers.default;
-
- for (const th of document.querySelectorAll('table tbody th:first-child')) {
- const tr = th.parentNode;
- const matches = matcher(th.textContent, query);
- tr.toggleAttribute('hidden', !matches);
- }
- url.searchParams.set('name', value);
-
- if (matcherId) {
- url.searchParams.set('match', matcherId);
- } else {
- url.searchParams.delete('match');
- }
- } else {
- for (const tr of document.querySelectorAll('table tbody tr[hidden]')) {
- tr.removeAttribute('hidden');
- }
- url.searchParams.delete('name');
- url.searchParams.delete('match');
- }
-
- if (value !== previousFilter) {
- history[pushedURL ? 'replaceState' : 'pushState'](null, '', url);
- }
-
- // Update heading counts
- for (const h2 of document.querySelectorAll('h2:has(+ table)')) {
- const count = h2.querySelector('.count');
- if (!count) continue;
- const table = h2.nextElementSibling;
- const visibleRows = table.querySelectorAll('tbody tr:not([hidden])').length;
- count.textContent = visibleRows;
- const outlineLink = document.querySelector(`#outline-standard a[href="#${h2.id}"]`);
- if (outlineLink) {
- // Why not just = h2.textContent? To skip the "Jump to heading" link
- outlineLink.textContent = '';
- outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
- }
- }
-}
-
-if (name_search.value) {
- filterByName(name_search.value);
-}
-
-name_search_group.addEventListener('input', e => filterByName(name_search.value));
diff --git a/packages/webawesome/docs/docs/components/cheatsheet/index.njk b/packages/webawesome/docs/docs/components/cheatsheet/index.njk
deleted file mode 100644
index e7dde94c1..000000000
--- a/packages/webawesome/docs/docs/components/cheatsheet/index.njk
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: Component Cheatsheet
-layout: docs
-unlisted: true
----
-
-
-
-
- This page lists every bit of syntax used by every Web Awesome component and which components share it.
- For these times when your memory is failing, or to simply explore the possibilities!
-
-
-
- Filter by name
- Case sensitive
- Regular expression
-
-
-
-
-
-{% for type, all in componentsBy -%}
-{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
-
- All {{ (all | keys).length }}
- {{ typeTitle }}
-
-
-
-
-
- Name
- Components
-
-
- {% for name, thingComponents in all -%}
-
- {{ name }}{{ "()" if type == "method" }}
- {% set componentLinks = [] %}
- {% for component in thingComponents %}
- {%- set link -%}
- <{{ component.tagName }}>
- {{ thingComponents.length }} components
- {% else %}
- {{ componentLinks | safe }}
- {% endif %}
-
-
- {%- endfor %}
-
-
-{%- endfor %}
diff --git a/packages/webawesome/docs/docs/utilities/color.md b/packages/webawesome/docs/docs/utilities/color.md
index 7259e860c..91513d416 100644
--- a/packages/webawesome/docs/docs/utilities/color.md
+++ b/packages/webawesome/docs/docs/utilities/color.md
@@ -7,11 +7,11 @@ file: styles/utilities/variants.css
Some Web Awesome components, like ``, 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" -%}
-- <{{ component.tagName }}>`](/docs/components/badge)
+- [``](/docs/components/button)
+- [``](/docs/components/button-group)
+- [``](/docs/components/callout)
+- [``](/docs/components/tag)
You can create the same effect on any element by using the color variant utility classes: