docs: update colors doc

Author: lepture

.vitepress/theme/css/vars.css

@@ -30,7 +30,7 @@ links and other interactive elements. `accentColor` is specified directly on the
 </template>
 ```
 
-### Available accent colors
+### Available colors
 
 There is a range of accent colors to choose from:
 
@@ -41,3 +41,20 @@ There is a range of accent colors to choose from:
     <div class="text-xs text-gray-10">{{ color }}</div>
   </div>
 </div>
+
+### Color scales
+
+Each accent is a 12-step scale that includes a solid and a transparent variant of each color.
+For example, here’s the `indigo` color scale:
+
+<div class="grid grid-cols-12 gap-2">
+  <div v-for="i in 12" :key="i" class="flex flex-col gap-1">
+    <div class="h-8" :style="{backgroundColor: `var(--indigo-${i})`, borderRadius: 'var(--radius-1)'}">
+    </div>
+    <div class="transparent-grid" style="border-radius: var(--radius-1)">
+      <div class="h-8" :style="{backgroundColor: `var(--indigo-a${i})`, borderRadius: 'var(--radius-1)'}">
+      </div>
+    </div>
+    <div class="text-sm text-center text-gray-10">{{i}}</div>
+  </div>
+</div>

docs/content/overview/color.md

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue'
 import {
-  Icon,
   Button,
   DialogRoot,
   DialogTrigger,