Change outdated colors

packages/docs/src/en/plugins/focus.md

@@ -280,7 +280,7 @@ For example:
 <!-- START_VERBATIM -->
 <div class="demo">
     <div
-        x-data="{ open: false }" 
+        x-data="{ open: false }"
         x-trap.noreturn="open"
         @click.outside="open = false"
         @keyup.escape.prevent.stop="open = false"
@@ -345,9 +345,9 @@ Let's walk through a few examples of these utilities in use. The example below a
     @keydown.right="$focus.next()"
     @keydown.left="$focus.previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 (Click a button, then use the arrow keys to move left and right)
 </div>
@@ -373,9 +373,9 @@ Notice how if the last button is focused, pressing "right arrow" won't do anythi
     @keydown.right="$focus.wrap().next()"
     @keydown.left="$focus.wrap().previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 (Click a button, then use the arrow keys to move left and right)
 </div>
@@ -410,9 +410,9 @@ Now, let's add two buttons, one to focus the first element in the button group,
     @keydown.right="$focus.wrap().next()"
     @keydown.left="$focus.wrap().previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 </div>
 <!-- END_VERBATIM -->

packages/docs/src/en/plugins/mask.md

@@ -54,7 +54,7 @@ Alpine.plugin(mask)
 
 </div>
 </div>
-<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-aqua-600 font-medium underline">
+<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-cyan-600 font-medium underline">
     <span x-text="expanded ? 'Hide' : 'Show more'">Show</span> <span x-text="expanded ? '↑' : '↓'">↓</span>
 </button>
  </div>

packages/docs/src/en/plugins/morph.md

@@ -21,10 +21,10 @@ The best way to understand its purpose is with the following interactive visuali
 
     <div class="flex w-full justify-between" style="padding-bottom: 1rem">
         <div class="w-1/2 px-4">
-            <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Previous</button>
+            <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Previous</button>
         </div>
         <div class="w-1/2 px-4">
-            <button @click="slide = (slide % 13) + 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Next</button>
+            <button @click="slide = (slide % 13) + 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Next</button>
         </div>
     </div>
 </div>
@@ -82,8 +82,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
 
 ```alpine
 <div x-data="{ message: 'Change me, then press the button!' }">
-    <input type="text" x-model="message"> 
-    <span x-text="message"></span> 
+    <input type="text" x-model="message">
+    <span x-text="message"></span>
 </div>
 
 <button>Run Morph</button>
@@ -95,9 +95,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
         Alpine.morph(el, `
             <div x-data="{ message: 'Change me, then press the button!' }">
                 <h2>See how new elements have been added</h2>
-                
-                <input type="text" x-model="message"> 
-                <span x-text="message"></span> 
+
+                <input type="text" x-model="message">
+                <span x-text="message"></span>
 
                 <h2>but the state of this component hasn't changed? Magical.</h2>
             </div>
@@ -110,9 +110,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
 <div class="demo">
     <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2">
         <input type="text" x-model="message" class="w-full">
-        <span x-text="message"></span> 
+        <span x-text="message"></span>
     </div>
-    
+
     <button id="morph-button-1" class="mt-4">Run Morph</button>
 </div>
 
@@ -123,8 +123,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
         Alpine.morph(el, `
             <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2">
                 <h4>See how new elements have been added</h4>
-                <input type="text" x-model="message" class="w-full"> 
-                <span x-text="message"></span> 
+                <input type="text" x-model="message" class="w-full">
+                <span x-text="message"></span>
                 <h4>but the state of this component hasn't changed? Magical.</h4>
             </div>
         `)