From 3b0f8ebb0f39644882c1c269fe731513418f51ef Mon Sep 17 00:00:00 2001
From: Anthony Vitacco <avitacco@protonmail.com>
Date: Thu, 13 Aug 2026 17:29:35 -0400
Subject: [PATCH 1/2] Fixing a repo security issue

Signed-off-by: Anthony Vitacco <avitacco@protonmail.com>
---
 .github/workflows/docs-test.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/docs-test.yml b/.github/workflows/docs-test.yml
index 0c7e988..b98e074 100644
--- a/.github/workflows/docs-test.yml
+++ b/.github/workflows/docs-test.yml
@@ -5,6 +5,9 @@ on:
     branches: [main]
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   internal_links:
     runs-on: ubuntu-latest

From d9711f7ea38f5e642aef1d5d2340f21ac36bac9b Mon Sep 17 00:00:00 2001
From: Anthony Vitacco <avitacco@protonmail.com>
Date: Mon, 17 Aug 2026 21:05:35 -0400
Subject: [PATCH 2/2] Fixing the colors grid

Using the vox-grid component to ensure all variations of a color stay on
the same line.

Signed-off-by: Anthony Vitacco <avitacco@protonmail.com>
---
 docs/guide/colors/index.md | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/docs/guide/colors/index.md b/docs/guide/colors/index.md
index 539acbe..a266267 100644
--- a/docs/guide/colors/index.md
+++ b/docs/guide/colors/index.md
@@ -16,8 +16,8 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
 
 ### Gray
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
-  <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
+<vox-grid cols="9">
+<div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-gray-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">gray-100</code>
   </div>
@@ -53,11 +53,12 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-gray-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">gray-900</code>
   </div>
-</div>
+</vox-grid>
+
 
 ### Teal
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-teal-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">teal-100</code>
@@ -94,11 +95,11 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-teal-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">teal-900</code>
   </div>
-</div>
+</vox-grid>
 
 ### Blue
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-blue-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">blue-100</code>
@@ -135,11 +136,11 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-blue-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">blue-900</code>
   </div>
-</div>
+</vox-grid>
 
 ### Green
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-green-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">green-100</code>
@@ -176,11 +177,11 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-green-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">green-900</code>
   </div>
-</div>
+</vox-grid>
 
 ### Gold
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-gold-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">gold-100</code>
@@ -217,11 +218,11 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-gold-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">gold-900</code>
   </div>
-</div>
+</vox-grid>
 
 ### Red
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-red-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">red-100</code>
@@ -258,11 +259,11 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-red-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">red-900</code>
   </div>
-</div>
+</vox-grid>
 
 ### Purple
 
-<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0;">
+<vox-grid cols="9">
   <div style="display: flex; flex-direction: column; align-items: center; gap: 0.35rem;">
     <span class="vox-bg-purple-100 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">purple-100</code>
@@ -299,7 +300,7 @@ Lower numbers are lighter tints, higher numbers are darker shades. `500` is each
     <span class="vox-bg-purple-900 vox-radius-md" style="display: block; width: 56px; height: 56px;"></span>
     <code style="font-size: 12px;">purple-900</code>
   </div>
-</div>
+</vox-grid>
 
 ## Tokens